Merge pull request #35 from jackyzha0/031-use-tf-js

031 use tf js

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
-.eslintrc.js
-node_modules
+.cache
 build
-package-lock.json
+node_modules

README.md

@@ -1,15 +1,48 @@
 # reflect.
 a mindful website blocker for the productive.
 
-## Building the project
-First, ensure you have [TypeScript](https://www.typescriptlang.org/) installed. Then, in the root directory of this project, run `tsc` to compile the `.ts` files to `.js` files which you can find in the `build` directory.
+## Directory
+A brief overview of the file structure in the repository,
+```python
+src # holds the source code for the extension (typescript)
+ | - background.ts # handles intent classification, setup, whitelist, etc.
+ | - content.ts # injected into every page, actual block page
+ | - contextMenus.ts # create chrome right click context menu
+ | - nn.ts # tokenizer and classifier class implementation
+ | - options.ts # handle site block changes
+ | - util.ts # random util functions
+build # stores intermediate js files compiled from ts [GENERATED]
+ | - background.js
+ | - content.js       # as these are generated, you shouldn't be 
+ | - contextMenus.js  # editing these if you need the change
+ | - nn.js            # functionality, do it in `src/`
+ | - options.js
+ | - util.js
+dist # distribution folder, select this when loading as extension
+ | - res # resources folder
+ |   | - models # stores converted keras models (jackyzha0/reflect-nlp/nlp)
+ |   |   | - acc%%.%% # where %%.%% represents accuracy on the test set
+ |   |   |   | - group1-shar1of1.bin # binary storage of model weights
+ |   |   |   | - model.json # stores architecture of model
+ |   |   |   | - tokenizer.json # stores word tokenizer mappings
+ |   |   ...
+ |   | - pages # html files
+ |   |   | - options.html # page to edit website whitelist
+ |   |   | - prompt.html # actual block page
+ |   | ... # misc. svg files, fonts, css, and images
+ | - src # final source code, generated from `npm run build` [GENERATED]
+ | - jquery-3.4.1.min.js # jquery source code, used for DOM manipulation
+ | - jquery-ui.min.js # jquery ui source code, used for animations
+ | - manifest.json # for chrome to figure out what the extension does/needs
+ tsconfig.json # config for how typescript compiles to javascript
+ README.md # this file
+ package.json # tells npm about the project and how to build it
+```
 
-## Getting set up
-0. Open CMD and navigate to a convenient folder through `cd`
-1. Clone the repository by doing `git clone https://github.com/jackyzha0/reflect-chrome.git`
-2. Compile the TypeScript to JavaScript by running `tsc`.
-3. Load the extension by opening Chrome first turning on developer mode in extensions `Settings > Extensions`.
-4. Then, click `Load unpacked extension` and select the `reflect-chrome` folder.
+## Building the project
+0. Ensure you have [TypeScript](https://www.typescriptlang.org/) installed.
+1. Then, install the `node` package dependencies by doing `npm i`. 
+2. Finally, `npm run build`.
 
 ## Git Workflow
 0. Get an up to date version of the remote by doing `git pull`
@@ -20,6 +53,13 @@ First, ensure you have [TypeScript](https://www.typescriptlang.org/) installed.
 5. Push these changes to the remote repository by doing `git push origin ###-NAME-OF-BRANCH` where the branch name is the same as above. You can always do `git branch` to see which branch you are on.
 6. Make a pull-request on Github!
 
+### Using different intent classifiers
+Just drop them into `dist/res/models/` and call it in `src/background.ts`:
+```typescript
+// Load ML model stuff
+const model: IntentClassifier = new IntentClassifier("acc84.78");
+```
+
 ## FAQ
 I'm getting errors about `Cannot find namespace/name ___`.
 * Install the JQuery support by doing `npm i @types/jquery` in the directory.

manifest.json → dist/manifest.json

@@ -5,10 +5,11 @@
   "description": "a mindful website blocker for the productive.",
   "version": "0.3",
   "options_page": "res/pages/options.html",
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 
   "background": {
-    "scripts": ["build/background.js", "build/contextMenus.js", "build/util.js"],
-  	"persistent": false
+    "scripts": ["src/background.js", "src/contextMenus.js", "src/util.js"],
+  	"persistent": true
   },
   "icons": {
     "16": "res/icon.png",
@@ -29,9 +30,9 @@
   ],
   "content_scripts": [
     {
-    "matches": [ "*://*/*" ],
-    "js": ["jquery-3.4.1.min.js","jquery-ui.min.js", "build/content.js"],
-    "run_at": "document_start"         // pay attention to this line
+      "matches": [ "*://*/*" ],
+      "js": ["jquery-3.4.1.min.js","jquery-ui.min.js", "src/content.js"],
+      "run_at": "document_start"
     }
   ],
   "web_accessible_resources": [

dist/res/models/acc84.78/model.json

@@ -0,0 +1 @@
+{"format": "layers-model", "generatedBy": "keras v2.3.1", "convertedBy": "TensorFlow.js Converter v1.6.0", "modelTopology": {"keras_version": "2.3.1", "backend": "tensorflow", "model_config": {"class_name": "Model", "config": {"name": "model_1", "layers": [{"name": "inputs", "class_name": "InputLayer", "config": {"batch_input_shape": [null, 75], "dtype": "float32", "sparse": false, "name": "inputs"}, "inbound_nodes": []}, {"name": "embedding_1", "class_name": "Embedding", "config": {"name": "embedding_1", "trainable": true, "batch_input_shape": [null, 75], "dtype": "float32", "input_dim": 1000, "output_dim": 64, "embeddings_initializer": {"class_name": "RandomUniform", "config": {"minval": -0.05, "maxval": 0.05, "seed": null}}, "embeddings_regularizer": null, "activity_regularizer": null, "embeddings_constraint": null, "mask_zero": false, "input_length": 75}, "inbound_nodes": [[["inputs", 0, 0, {}]]]}, {"name": "lstm_1", "class_name": "LSTM", "config": {"name": "lstm_1", "trainable": true, "dtype": "float32", "return_sequences": false, "return_state": false, "go_backwards": false, "stateful": false, "unroll": false, "units": 64, "activation": "tanh", "recurrent_activation": "sigmoid", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "recurrent_initializer": {"class_name": "Orthogonal", "config": {"gain": 1.0, "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "unit_forget_bias": true, "kernel_regularizer": null, "recurrent_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "recurrent_constraint": null, "bias_constraint": null, "dropout": 0.0, "recurrent_dropout": 0.0, "implementation": 2}, "inbound_nodes": [[["embedding_1", 0, 0, {}]]]}, {"name": "FC1", "class_name": "Dense", "config": {"name": "FC1", "trainable": true, "dtype": "float32", "units": 256, "activation": "linear", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "inbound_nodes": [[["lstm_1", 0, 0, {}]]]}, {"name": "dropout_1", "class_name": "Dropout", "config": {"name": "dropout_1", "trainable": true, "dtype": "float32", "rate": 0.5, "noise_shape": null, "seed": null}, "inbound_nodes": [[["FC1", 0, 0, {}]]]}, {"name": "out_layer", "class_name": "Dense", "config": {"name": "out_layer", "trainable": true, "dtype": "float32", "units": 1, "activation": "linear", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "inbound_nodes": [[["dropout_1", 0, 0, {}]]]}, {"name": "activation_1", "class_name": "Activation", "config": {"name": "activation_1", "trainable": true, "dtype": "float32", "activation": "sigmoid"}, "inbound_nodes": [[["out_layer", 0, 0, {}]]]}], "input_layers": [["inputs", 0, 0]], "output_layers": [["activation_1", 0, 0]]}}, "training_config": {"optimizer_config": {"class_name": "RMSprop", "config": {"learning_rate": 0.0010000000474974513, "rho": 0.8999999761581421, "decay": 0.0, "epsilon": 1e-07}}, "loss": "binary_crossentropy", "metrics": ["accuracy"], "weighted_metrics": null, "sample_weight_mode": null, "loss_weights": null}}, "weightsManifest": [{"paths": ["group1-shard1of1.bin"], "weights": [{"name": "FC1/kernel", "shape": [64, 256], "dtype": "float32"}, {"name": "FC1/bias", "shape": [256], "dtype": "float32"}, {"name": "embedding_1/embeddings", "shape": [1000, 64], "dtype": "float32"}, {"name": "lstm_1/kernel", "shape": [64, 256], "dtype": "float32"}, {"name": "lstm_1/recurrent_kernel", "shape": [64, 256], "dtype": "float32"}, {"name": "lstm_1/bias", "shape": [256], "dtype": "float32"}, {"name": "out_layer/kernel", "shape": [256, 1], "dtype": "float32"}, {"name": "out_layer/bias", "shape": [1], "dtype": "float32"}]}]}