bar graphs

FastAPI/app/api.py

@@ -1,13 +1,18 @@
-from fastapi import FastAPI, Query
+from typing import List
+from fastapi import FastAPI, HTTPException, Query, Request
+from fastapi.exceptions import RequestValidationError
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, JSONResponse
+import numpy as np
+from pydantic import BaseModel, Field, conlist
 
 from app.utils.embedding import get_embedding
 
 
 app = FastAPI()
 
+
 origins = [
     "http://localhost:3000",
     "http://localhost:8000",
@@ -38,17 +43,26 @@ words_db = []
 
 
 @app.get("/api/words", tags=["words"])
-async def get_todos() -> dict:
+async def get_words() -> dict:
+
     return {"data": words_db}
 
 
 @app.post("/api/add-word", tags=["words"])
 async def add_word(word: dict) -> dict:
-    words_db.append(word)
-    word_to_embbed = word["id"]
-    word_embedding = get_embedding(word_to_embbed)[:3]
-    word["embedding"] = word_embedding.tolist()
-    return {"data": {"Succesful"}}
+    try:
+        word_embedding = get_embedding(word["item"])
+        words_db.append(word)
+        word["embedding"] = word_embedding.tolist()
+
+        return JSONResponse(
+            status_code=200,
+            content={"message": "Item created successfully", "success": True},
+        )
+    except HTTPException as e:
+        raise e
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 
 
 @app.delete("/api/delete-word/{word_id}", tags=["words"])
@@ -56,12 +70,185 @@ async def delete_word(word_id: str) -> dict:
     word_id = int(word_id)
     for word in words_db:
         if int(word["id"]) == word_id:
-            print("found")
             words_db.remove(word)
+
+            return {"data": {"Succesful"}}
+
+    return {"data": {"Word not found"}}
+
+
+#### Category Words
+
+common_category_words = []
+
+
+@app.get("/api/common-category-words", tags=["category-words"])
+async def get_common_category_words() -> dict:
+
+    return {"data": common_category_words}
+
+
+@app.post("/api/add-common-category-words", tags=["category-words"])
+async def add_common_category_words(new_word: dict) -> dict:
+    try:
+        for word in common_category_words:
+            if new_word["item"] == word["item"]:
+                raise HTTPException(status_code=400, detail="Word already exists")
+
+        word_embedding = get_embedding(new_word["item"])
+        new_word["embedding"] = word_embedding.tolist()
+        common_category_words.append(new_word)
+        return JSONResponse(
+            status_code=200,
+            content={"message": "Item created successfully", "success": True},
+        )
+    except HTTPException as e:
+        raise e
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/get-embedding", tags=["category-words"])
+async def get_embedding_api() -> dict:
+    if len(common_category_words) > 1:
+        vectors = [word["embedding"] for word in common_category_words]
+        variances = np.var(vectors, axis=0)
+        low_variance_dims = np.argsort(variances)[:3]
+        result = {
+            "variances": variances.tolist(),
+            "top_variance_dims": low_variance_dims.tolist(),
+        }
+        return JSONResponse(status_code=200, content={"data": result, "success": True})
+    return JSONResponse(
+        status_code=200,
+        content={
+            "data": {"variances": [0] * 50, "top_variance_dims": [0, 1, 2]},
+            "message": "Not enough words for analysis",
+            "success": False,
+        },
+    )
+
+
+@app.delete("/api/delete-common-category-words/{word_id}", tags=["category-words"])
+async def delete_common_category_words(word_id: str) -> dict:
+    word_id = int(word_id)
+    for word in common_category_words:
+        if int(word["id"]) == word_id:
+            common_category_words.remove(word)
+
             return {"data": {"Succesful"}}
+
     return {"data": {"Word not found"}}
 
 
+### Difference Semantic
+
+from starlette.status import HTTP_422_UNPROCESSABLE_ENTITY
+
+
+class WordPair(BaseModel):
+    word1: str = Field(..., min_length=2)
+    word2: str = Field(..., min_length=2)
+
+
+@app.exception_handler(RequestValidationError)
+async def validation_exception_handler(request: Request, exc: RequestValidationError):
+    errors = exc.errors()
+    detailed_messages = [f"Error in {err['loc'][1]}: {err['msg']}" for err in errors]
+    print(detailed_messages)
+    return JSONResponse(
+        status_code=HTTP_422_UNPROCESSABLE_ENTITY,
+        content={"detail": ", ".join(detailed_messages), "body": exc.body},
+    )
+
+
+semantic_difference_db = {}
+
+
+@app.get("/api/difference-semantic-words", tags=["difference-semantic"])
+async def get_semantic_difference() -> dict:
+
+    return JSONResponse(
+        status_code=200, content={"data": semantic_difference_db, "success": True}
+    )
+
+
+@app.post("/api/add-difference-semantic-words", tags=["difference-semantic"])
+async def add_semantic_difference(new_words: WordPair):
+    try:
+        first_word = new_words.word1
+        second_word = new_words.word2
+
+        combined_word = f"{first_word}-{second_word}"
+        word_one_embedding = get_embedding(first_word)
+        word_two_embedding = get_embedding(second_word)
+
+        embedding = word_one_embedding - word_two_embedding
+
+        if (
+            combined_word in semantic_difference_db
+            or combined_word[::-1] in semantic_difference_db
+        ):
+            raise HTTPException(
+                status_code=400, detail="Semantic difference already exists"
+            )
+        semantic_difference_db[combined_word] = {
+            "id": len(semantic_difference_db) + 1,
+            "word-1": first_word,
+            "word-2": second_word,
+            "embedding": embedding.tolist(),
+        }
+        return JSONResponse(
+            status_code=200,
+            content={"message": "Item created successfully", "success": True},
+        )
+    except HTTPException as e:
+        raise e
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/get-embedding-difference", tags=["difference-semantic"])
+async def get_embedding_difference() -> dict:
+    try:
+        if len(semantic_difference_db) > 1:
+            vectors = [word["embedding"] for word in semantic_difference_db.values()]
+            variances = np.var(vectors, axis=0)
+            low_variance_dims = np.argsort(variances)[:3]
+            result = {
+                "variance": variances.tolist(),
+                "top_variance_dims": low_variance_dims.tolist(),
+            }
+            return JSONResponse(
+                status_code=200, content={"data": result, "success": True}
+            )
+        return JSONResponse(
+            status_code=200,
+            content={
+                "data": {"variance": [0] * 50, "top_variance_dims": [0, 1, 2]},
+                "message": "Not enough words for analysis",
+                "success": False,
+            },
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.delete(
+    "/api/delete-difference-semantic-words/{word_id}", tags=["difference-semantic"]
+)
+async def delete_semantic_difference(word_id: str) -> dict:
+    try:
+        word_id = int(word_id)
+        for word in semantic_difference_db.values():
+            if int(word["id"]) == word_id:
+                del semantic_difference_db[word["word-1"] + "-" + word["word-2"]]
+                return {"data": {"Succesful"}}
+        return JSONResponse(status_code=404, content={"data": {"Word not found"}})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 if __name__ == "__main__":
     import uvicorn
 

FastAPI/app/build/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/static/js/main.76e15e36.js",
+    "main.js": "/static/js/main.4ec2654c.js",
     "index.html": "/index.html",
-    "main.76e15e36.js.map": "/static/js/main.76e15e36.js.map"
+    "main.4ec2654c.js.map": "/static/js/main.4ec2654c.js.map"
   },
   "entrypoints": [
-    "static/js/main.76e15e36.js"
+    "static/js/main.4ec2654c.js"
   ]
 }

FastAPI/app/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.76e15e36.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.4ec2654c.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

FastAPI/app/build_copy_v1/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.e17bd3d9.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

FastAPI/app/build_copy_v1/static/js/main.e17bd3d9.js.LICENSE.txt

@@ -1,39 +0,0 @@
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

FastAPI/app/build_copy_v2/asset-manifest.json

@@ -1,10 +0,0 @@
-{
-  "files": {
-    "main.js": "/static/js/main.ed106e83.js",
-    "index.html": "/index.html",
-    "main.ed106e83.js.map": "/static/js/main.ed106e83.js.map"
-  },
-  "entrypoints": [
-    "static/js/main.ed106e83.js"
-  ]
-}

FastAPI/app/build_copy_v2/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

FastAPI/app/build_copy_v2/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

FastAPI/app/build_copy_v3/asset-manifest.json

@@ -1,10 +0,0 @@
-{
-  "files": {
-    "main.js": "/static/js/main.98763516.js",
-    "index.html": "/index.html",
-    "main.98763516.js.map": "/static/js/main.98763516.js.map"
-  },
-  "entrypoints": [
-    "static/js/main.98763516.js"
-  ]
-}

FastAPI/app/build_copy_v3/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.98763516.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

FastAPI/app/build_copy_v3/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

FastAPI/app/build_copy_v3/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

FastAPI/app/build_copy_v3/static/js/main.98763516.js.LICENSE.txt

@@ -1,136 +0,0 @@
-/*
-         * @copyright 2016 Sean Connelly (@voidqk), http://syntheti.cc
-         * @license MIT
-         * @preserve Project Home: https://github.com/voidqk/polybooljs
-         */
-
-/*
-        object-assign
-        (c) Sindre Sorhus
-        @license MIT
-        */
-
-/*
- * @copyright 2016 Sean Connelly (@voidqk), http://syntheti.cc
- * @license MIT
- * @preserve Project Home: https://github.com/voidqk/polybooljs
- */
-
-/*!
-                                             * The buffer module from node.js, for the browser.
-                                             *
-                                             * @author   Feross Aboukhadijeh <https://feross.org>
-                                             * @license  MIT
-                                             */
-
-/*!
-              * Determine if an object is a Buffer
-              *
-              * @author   Feross Aboukhadijeh <https://feross.org>
-              * @license  MIT
-              */
-
-/*!
-              * pad-left <https://github.com/jonschlinkert/pad-left>
-              *
-              * Copyright (c) 2014-2015, Jon Schlinkert.
-              * Licensed under the MIT license.
-              */
-
-/*!
-              * repeat-string <https://github.com/jonschlinkert/repeat-string>
-              *
-              * Copyright (c) 2014-2015, Jon Schlinkert.
-              * Licensed under the MIT License.
-              */
-
-/*!
-         * The buffer module from node.js, for the browser.
-         *
-         * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
-         * @license  MIT
-         */
-
-/*!
-         * The buffer module from node.js, for the browser.
-         *
-         * @author   Feross Aboukhadijeh <https://feross.org>
-         * @license  MIT
-         */
-
-/*! Native Promise Only
-                                           v0.8.1 (c) Kyle Simpson
-                                           MIT License: http://getify.mit-license.org
-                                           */
-
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

FastAPI/app/{build_copy_v1 → build_v2}/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/static/js/main.e17bd3d9.js",
+    "main.js": "/static/js/main.76e15e36.js",
     "index.html": "/index.html",
-    "main.e17bd3d9.js.map": "/static/js/main.e17bd3d9.js.map"
+    "main.76e15e36.js.map": "/static/js/main.76e15e36.js.map"
   },
   "entrypoints": [
-    "static/js/main.e17bd3d9.js"
+    "static/js/main.76e15e36.js"
   ]
 }

FastAPI/app/{build_copy_v2 → build_v2}/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.ed106e83.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.76e15e36.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

FastAPI/app/utils/embedding.py

@@ -1,13 +1,23 @@
 import os
+from fastapi import HTTPException
 import gensim.downloader as api
 
 # Ensure the environment variable is set correctly
-gensim_data_dir = os.getenv('GENSIM_DATA_DIR', '/home/user/gensim-data')
+gensim_data_dir = os.getenv("GENSIM_DATA_DIR", "/home/user/gensim-data")
 
 # Load the GloVe model
 model = api.load("glove-wiki-gigaword-50")
 
 
-def get_embedding(word):
+def get_embedding(word: str) -> list:
+    min_val = -5.4593
+    max_val = 5.3101
     global model
-    return model[word]
+    try:
+        embediing = model[word.lower()]
+        # normalize vector min max to -1 to 1
+        embediing = (embediing - min_val) / (max_val - min_val) * 2 - 1
+        return embediing
+    except KeyError:
+        print("Word not in vocabulary")
+        raise HTTPException(status_code=404, detail="Word not in vocabulary")

my-app/package-lock.json

@@ -15,6 +15,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "notistack": "^3.0.1",
         "plotly.js": "^2.33.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -10665,6 +10666,14 @@
         "escodegen": "^2.1.0"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -14748,6 +14757,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/notistack": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+      "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "goober": "^2.0.33"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/notistack"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/notistack/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",

my-app/package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "notistack": "^3.0.1",
     "plotly.js": "^2.33.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

my-app/src/Components/ActiveWords/index.jsx

@@ -1,65 +1,127 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, ThemeProvider, Typography } from "@mui/material";
+import { useSnackbar } from "notistack";
 import { useEffect, useState } from "react";
+import { buildTheme } from "../../infrastructure/theme/theme";
+import baseUrl from "../../services/api/api.config";
+import postData from "../../services/api/base";
 import { WordsContext } from "../Context/WordsContext";
-import CreateWordEmbedding from "../CreateWord/CreateWord";
-import WordCard from "../WordCard";
+import IntroWordRepresentation from "../CreateWord/CreateWord";
+import DimensionsList from "../DimensionList";
 import EmbeddingPlot from "../Plot";
+import WordCard from "../WordCard";
 
-export default function ActiveWords() {
-  const [words, setWords] = useState([]);
+export default function WordsVectorized() {
+  const [wordsVectorized, setWordsVectorized] = useState([]);
+  const [selectedDimensions, setSelectedDimensions] = useState([1, 2, 3]);
+  const { enqueueSnackbar } = useSnackbar();
+  const [wordOne, setWordOne] = useState("");
+  const [variance, setVariance] = useState({
+    variances: new Array(50).fill(0),
+    dimensions: [1, 2, 3],
+  });
+
+  const onChangeWordOne = (event) => {
+    const newWordOne = event.target.value;
+    setWordOne(newWordOne);
+  };
 
-  const fetchWords = async () => {
-    const url = `https://abadesalex-emb-rep.hf.space/api/words`;
-    // const url = "http://localhost:8000/api/words"
+  const onPressButton = () => {
+    const url = `/add-word`;
+    const data = {
+      id: wordsVectorized.length + 1,
+      item: wordOne,
+    };
+    postData(url, data)
+      .then(fetchWordsVectorized)
+      .catch((error) => {
+        enqueueSnackbar(error.detail || error.message, {
+          variant: "error",
+        });
+      });
 
+    setWordOne("");
+  };
+
+  const fetchWordsVectorized = async () => {
+    const url = `${baseUrl}/words`;
     const response = await fetch(url);
     const wordsResponse = await response.json();
-    setWords(wordsResponse.data);
+    setWordsVectorized(wordsResponse.data);
+    console.log(wordsResponse.data);
   };
 
-  const deleteWord = async (id) => {
-    const url = `https://abadesalex-emb-rep.hf.space/api/delete-word/${id}`;
-    // const url = `http://localhost:8000/api/delete-word/${id}`
+  const handleDimensionClick = (dimension) => {
+    setSelectedDimensions((prev) => {
+      if (prev.includes(dimension)) {
+        return prev.filter((dim) => dim !== dimension);
+      } else if (prev.length < 3) {
+        return [...prev, dimension];
+      } else {
+        return [prev[1], prev[2], dimension];
+      }
+    });
+  };
+
+  const deleteWordsVectorized = async (id) => {
+    const url = `${baseUrl}/delete-word/${id}`;
     await fetch(url, {
       method: "DELETE",
       headers: { "Content-Type": "application/json" },
     });
-    await fetchWords();
+    await fetchWordsVectorized();
   };
 
   useEffect(() => {
-    fetchWords();
+    fetchWordsVectorized();
   }, []);
 
   return (
     <>
-      <WordsContext.Provider value={{ words, fetchWords }}>
-        <Grid container>
-          <Grid item xs={8} container direction={"column"}>
-            <Grid item>
-              <CreateWordEmbedding />
-            </Grid>
-            <Grid item>
-              <EmbeddingPlot words={words} />
-            </Grid>
+      <WordsContext.Provider
+        value={{ words: wordsVectorized, fetchWords: fetchWordsVectorized }}
+      >
+        <ThemeProvider theme={buildTheme()}>
+          <Grid item textAlign={"center"} mb={5}>
+            <Typography
+              variant="h0"
+              color="#000"
+              sx={{ borderBottom: "2px solid #000" }}
+            >
+              Word Representation
+            </Typography>
           </Grid>
-          <Grid item xs={4}>
-            <Grid item>
-              <Typography variant={"h4"}>Active Words</Typography>
+          <Grid container>
+            <Grid item container direction={"column"}>
+              <IntroWordRepresentation
+                wordOne={wordOne}
+                onChangeWordOne={onChangeWordOne}
+                onPressButton={onPressButton}
+              />
+            </Grid>
+            <DimensionsList
+              embedding={variance.variances}
+              selectedDimensions={selectedDimensions}
+              onDimensionClick={handleDimensionClick}
+            />
+            <Grid item xs={9}>
+              <EmbeddingPlot words={wordsVectorized} x={selectedDimensions[0]} y={selectedDimensions[1]} z={selectedDimensions[2]} />
             </Grid>
-            <Grid container direction={"column"} mt={2}>
-              {words.map((word) => (
-                <Grid item key={word.id} mb={1} mr={1}>
-                  <WordCard
-                    word={word.item}
-                    id={word.id}
-                    deleteWord={deleteWord}
-                  />
-                </Grid>
-              ))}
+
+            <Grid item xs={3}>
+              <Grid container direction={"column"} mt={2}>
+                {wordsVectorized.map((word) => (
+                  <Grid item key={word.id} mb={1} mr={1}>
+                    <WordCard
+                      word={word.item}
+                      id={word.id}
+                      deleteWord={deleteWordsVectorized}
+                    />
+                  </Grid>
+                ))}
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
+        </ThemeProvider>
       </WordsContext.Provider>
     </>
   );

my-app/src/Components/BarPlot/index.jsx

@@ -0,0 +1,32 @@
+import { Grid } from "@mui/material";
+import Plot from "react-plotly.js";
+
+export default function BarPlot({ variance }) {
+  const dimensions = Array.from({ length: variance.length }, (_, i) => i + 1);
+
+  return (
+    <>
+      <Grid item xs={12}>
+        <Plot
+          data={[
+            {
+              x: dimensions,
+              y: variance,
+              type: "bar",
+              marker: { color: "blue" },
+            },
+          ]}
+          layout={{
+            title: "Variance across dimensions",
+            xaxis: { title: "Dimension" },
+            yaxis: { title: "Variance" },
+            showlegend: false, // Remove legend
+            autosize: true, // Enable autosizing
+          }}
+          useResizeHandler={true}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </Grid>
+    </>
+  );
+}

my-app/src/Components/Body/index.jsx

@@ -1,13 +1,14 @@
 import { Grid } from "@mui/material";
+import { useEffect, useState } from "react";
+import baseUrl from "../../services/api/api.config";
 import ActiveWords from "../ActiveWords";
-import CreateWordEmbedding from "../CreateWord/CreateWord";
 import { WordsContext } from "../Context/WordsContext";
-import { useEffect, useState } from "react";
+import CreateWordEmbedding from "../CreateWord/CreateWord";
 
 export default function Body() {
   const [words, setWords] = useState([]);
   const fetchWords = async () => {
-    const response = await fetch("http://localhost:8000/api/words");
+    const url = `${baseUrl}/words`;
     const words = await response.json();
     setWords(words.data);
   };

my-app/src/Components/CommonCategory/index.jsx

@@ -0,0 +1,174 @@
+import { ThemeProvider } from "@emotion/react";
+import { Button, Grid, TextField, Typography } from "@mui/material";
+import { useSnackbar } from "notistack";
+import { useEffect, useState } from "react";
+import { buildTheme } from "../../infrastructure/theme/theme";
+import baseUrl from "../../services/api/api.config";
+import postData from "../../services/api/base";
+import BarPlot from "../BarPlot";
+import { CommonCategoryWordsContext } from "../Context/WordsContext";
+import DimensionsList from "../DimensionList";
+import ScatterPlot from "../ScatterPlot";
+import WordCard from "../WordCard";
+
+export default function CommonCategory() {
+  const [CommonCategoryWords, setCommonCategoryWords] = useState([]);
+  const [wordOne, setWordOne] = useState("");
+  const { enqueueSnackbar } = useSnackbar();
+  const [variance, setVariance] = useState({
+    variances: new Array(50).fill(0),
+    dimensions: [1, 2, 3],
+  });
+
+  const [selectedDimensions, setSelectedDimensions] = useState([0, 0]);
+
+  const handleDimensionClick = (dimension) => {
+    setSelectedDimensions((prev) => {
+      if (prev.includes(dimension)) {
+        return prev.filter((dim) => dim !== dimension);
+      } else if (prev.length < 2) {
+        return [...prev, dimension];
+      } else {
+        return [prev[1], dimension];
+      }
+    });
+  };
+
+  const fetchCommonCategoryWords = async () => {
+    const url = `${baseUrl}/common-category-words`;
+    const response = await fetch(url);
+    const CommonCategoryWordsResponse = await response.json();
+    setCommonCategoryWords(CommonCategoryWordsResponse.data);
+  };
+
+  const fetchEmebedding = async () => {
+    const url = `${baseUrl}/get-embedding`;
+    const response = await fetch(url);
+    const embeddingResponse = await response.json();
+    setVariance(embeddingResponse.data);
+    setSelectedDimensions(embeddingResponse.data.top_variance_dims.slice(0, 2));
+    if (!embeddingResponse.success) {
+      enqueueSnackbar("Not enough word to create variance");
+    }
+  };
+
+  const deleteCommonCategoryWord = async (id) => {
+    const url = `${baseUrl}/delete-common-category-words/${id}`;
+    await fetch(url, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+    });
+    await fetchCommonCategoryWords();
+    await fetchEmebedding();
+  };
+
+  const onPressButton = async () => {
+    const url = `/add-common-category-words`;
+    const newWord = {
+      id: CommonCategoryWords.length + 1,
+      item: wordOne,
+    };
+
+    postData(url, newWord)
+      .then(fetchCommonCategoryWords)
+      .then(fetchEmebedding)
+      .catch((error) => {
+        enqueueSnackbar(error.detail || error.message, { variant: "error" });
+      });
+  };
+
+  useEffect(() => {
+    fetchCommonCategoryWords();
+  }, []);
+
+  const onChangeWordOne = (event) => {
+    const newWordOne = event.target.value;
+    setWordOne(newWordOne);
+  };
+
+  return (
+    <>
+      <CommonCategoryWordsContext.Provider
+        value={{ CommonCategoryWords, setCommonCategoryWords }}
+      >
+        <ThemeProvider theme={buildTheme()}>
+          <Grid
+            container
+            direction={"column"}
+            justifyContent={"center"}
+            alignItems={"center"}
+            spacing={2}
+            p={4}
+          >
+            <Grid item mb={2}>
+              <Typography variant="h0" color="#000">
+                Common Category
+              </Typography>
+            </Grid>
+            <Grid container textAlign={"center"} spacing={2}>
+              <Grid item xs={5}>
+                <TextField
+                  id="word-one"
+                  label="Word"
+                  variant="outlined"
+                  onChange={onChangeWordOne}
+                  fullWidth
+                />
+              </Grid>
+
+              <Grid item xs={4}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  fullWidth
+                  sx={{ height: "100%" }}
+                  onClick={onPressButton}
+                >
+                  Create Embedding
+                </Button>
+              </Grid>
+              <Grid item xs={3}>
+                <Typography
+                  variant="h0"
+                  color="#000"
+                  sx={{ borderBottom: "2px solid #000" }}
+                >
+                  Active Words's List
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid container mt={2} textAlign={"center"} spacing={2}>
+              <Grid item xs={9}>
+                <BarPlot variance={variance.variances} ini />
+              </Grid>
+
+              <Grid item xs={3}>
+                {CommonCategoryWords.map((word) => (
+                  <Grid item key={word.id} mb={1} ml={4}>
+                    <WordCard
+                      word={word.item}
+                      id={word.id}
+                      deleteWord={deleteCommonCategoryWord}
+                    />
+                  </Grid>
+                ))}
+              </Grid>
+            </Grid>
+            <DimensionsList
+              embedding={variance.variances}
+              selectedDimensions={selectedDimensions}
+              onDimensionClick={handleDimensionClick}
+            />
+            <Grid item xs={12} container>
+              <ScatterPlot
+                words={CommonCategoryWords}
+                x={selectedDimensions[0]}
+                y={selectedDimensions[1]}
+              />
+            </Grid>
+          </Grid>
+        </ThemeProvider>
+      </CommonCategoryWordsContext.Provider>
+    </>
+  );
+}

my-app/src/Components/Context/WordsContext.js

@@ -4,3 +4,13 @@ export const WordsContext = createContext({
   words: [],
   fetchWords: () => {},
 });
+
+export const CommonCategoryWordsContext = createContext({
+  CommonCategoryWords: [],
+  setCommonCategoryWords: () => {},
+});
+
+export const SemanticDifferencesContext = createContext({
+  SemanticDifferences: [],
+  setSemanticDifferences: () => {},
+});