feat: add workspace and prettier

.gitignore

@@ -1,2 +1,4 @@
-node_modules
+.idea/
 .pnpm-debug.log
+dist/
+node_modules/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.prettierrc.yml

@@ -0,0 +1,9 @@
+printWidth: 80
+tabWidth: 2
+useTabs: false
+semi: false
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: false
+arrowParens: avoid

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Unsmile"]
+}

extension/README.md

@@ -1,33 +1,33 @@
-This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-pnpm dev
-# or
-npm run dev
-```
-
-Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
-
-You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
-
-For further guidance, [visit our Documentation](https://docs.plasmo.com/)
-
-## Making production build
-
-Run the following:
-
-```bash
-pnpm build
-# or
-npm run build
-```
-
-This should create a production bundle for your extension, ready to be zipped and published to the stores.
-
-## Submit to the webstores
-
-The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/workflows#submit-your-extension) and you should be on your way for automated submission!
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/workflows#submit-your-extension) and you should be on your way for automated submission!

extension/popup.tsx

@@ -1,21 +1,22 @@
-import { useState } from "react"
-
-function IndexPopup() {
-  const [data, setData] = useState("")
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        padding: 16
-      }}>
-      <h1>
-        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
-      </h1>
-      <input onChange={(e) => setData(e.target.value)} value={data} />
-    </div>
-  )
-}
-
-export default IndexPopup
+import { useState } from 'react'
+
+function IndexPopup() {
+  const [data, setData] = useState('')
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 16,
+      }}
+    >
+      <h1>
+        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
+      </h1>
+      <input onChange={e => setData(e.target.value)} value={data} />
+    </div>
+  )
+}
+
+export default IndexPopup

extension/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "extends": "plasmo/templates/tsconfig.base",
-  "exclude": ["node_modules"],
-  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
-  "compilerOptions": {
-    "paths": {
-      "~*": ["./*"]
-    },
-    "baseUrl": "."
-  }
-}
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./*"]
+    },
+    "baseUrl": "."
+  }
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "hateout-project",
+  "version": "1.0.0",
+  "description": "This demo project is to detect hate speeches in the browser by leveraging on-device machine learning. We will support Korean only, and provide this project as browser extensions.",
+  "private": "true",
+  "scripts": {
+    "prepare": "husky install"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codingpot/hateout.git"
+  },
+  "bugs": {
+    "url": "https://github.com/codingpot/hateout/issues"
+  },
+  "workspaces": [
+    "extension/*",
+    "trainer/*"
+  ],
+  "homepage": "https://github.com/codingpot/hateout#readme",
+  "devDependencies": {
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - '.'
+  - 'extension/**'
+  - 'trainer/**'

trainer/package.json

@@ -2,9 +2,11 @@
   "name": "trainer",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "dist/trainer.js",
+  "types": "dist/trainer.d.ts",
   "scripts": {
-    "build": "npx ts-node trainer.ts"
+    "build": "tsc --project tsconfig.json",
+    "start": "ts-node --project ./tsconfig.json trainer.ts"
   },
   "keywords": [],
   "author": "",

trainer/trainer.ts

@@ -1,94 +1,94 @@
-import * as use from "@tensorflow-models/universal-sentence-encoder";
-import * as tf from "@tensorflow/tfjs-node";
+import * as use from '@tensorflow-models/universal-sentence-encoder'
+import * as tf from '@tensorflow/tfjs-node'
 
 async function main() {
-  const encoder = await use.load();
+  const encoder = await use.load()
   const trainData = tf.data
     .csv(
-      "https://raw.githubusercontent.com/smilegate-ai/korean_unsmile_dataset/main/unsmile_train_v1.0.tsv",
+      'https://raw.githubusercontent.com/smilegate-ai/korean_unsmile_dataset/main/unsmile_train_v1.0.tsv',
       {
-        delimiter: "\t",
+        delimiter: '\t',
         hasHeader: true,
         configuredColumnsOnly: true,
         columnConfigs: {
           clean: {
-            dtype: "int32",
+            dtype: 'int32',
             isLabel: true,
           },
           문장: {
-            dtype: "string",
+            dtype: 'string',
           },
         },
-      }
+      },
     )
     .mapAsync(async (data: any) => {
-      const out = await encoder.embed(data.xs["문장"]);
+      const out = await encoder.embed(data.xs['문장'])
       return {
         xs: out.flatten(),
         ys: Object.values(data.ys),
-      };
+      }
     })
     .batch(32)
-    .shuffle(32);
+    .shuffle(32)
 
-    const valData = tf.data
+  const valData = tf.data
     .csv(
-      "https://raw.githubusercontent.com/smilegate-ai/korean_unsmile_dataset/main/unsmile_valid_v1.0.tsv",
+      'https://raw.githubusercontent.com/smilegate-ai/korean_unsmile_dataset/main/unsmile_valid_v1.0.tsv',
       {
-        delimiter: "\t",
+        delimiter: '\t',
         hasHeader: true,
         configuredColumnsOnly: true,
         columnConfigs: {
           clean: {
-            dtype: "int32",
+            dtype: 'int32',
             isLabel: true,
           },
           문장: {
-            dtype: "string",
+            dtype: 'string',
           },
         },
-      }
+      },
     )
     .mapAsync(async (data: any) => {
-      const out = await encoder.embed(data.xs["문장"]);
+      const out = await encoder.embed(data.xs['문장'])
       return {
         xs: out.flatten(),
         ys: Object.values(data.ys),
-      };
+      }
     })
     .batch(32)
-    .shuffle(32);    
+    .shuffle(32)
 
   const model = tf.sequential({
     layers: [
       tf.layers.dense({
         inputDim: 512,
         units: 512,
-        activation: "relu",
+        activation: 'relu',
       }),
       tf.layers.batchNormalization(),
       tf.layers.dense({
         units: 512,
-        activation: "relu",
+        activation: 'relu',
       }),
       tf.layers.batchNormalization(),
       tf.layers.dense({
         units: 1,
-        activation: "sigmoid",
+        activation: 'sigmoid',
       }),
     ],
-  });
+  })
 
   model.compile({
     optimizer: tf.train.adam(),
     loss: tf.losses.sigmoidCrossEntropy,
     metrics: [tf.metrics.binaryAccuracy],
-  });
+  })
 
   model.fitDataset(trainData, {
     epochs: 5,
-    validationData: valData
-  });
+    validationData: valData,
+  })
 }
 
-main();
+main()

trainer/tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -25,7 +25,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "commonjs" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -44,12 +44,12 @@
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -71,12 +71,12 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -98,6 +98,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }