Refactor Frontend/Backend 👨‍💻

backend/src/demo/demo.py

@@ -3,7 +3,7 @@ import sys
 
 sys.path.insert(0, "../")
 from resources import GradioModule, register, InterLauncher, tabularGradio
-from example.examples import Pictionary
+from example.examples import Pictionary, FSD, stock_forecast
 
 import gradio as gr
 
@@ -42,5 +42,9 @@ elif args.examples == "load":
     demo = gr.Interface.load("models/EleutherAI/gpt-neo-1.3B", description=description, examples=examples)
     InterLauncher("Demo", demo) if args.listen == None else InterLauncher("Demo", demo, listen=args.listen)
 
+elif args.examples == "FSD": FSD().launch() if args.listen == None else FSD().launch(listen=args.listen)
+
+elif args.examples == "Stonk" : stock_forecast().launch() if args.listen == None else stock_forecast().launch(listen=args.listen)
+
 else:
     Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True)  if args.listen == None else Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True, listen=args.listen)

frontend/package-lock.json

@@ -11,6 +11,10 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^28.1.8",
+        "@types/node": "^18.7.13",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
         "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -19,6 +23,7 @@
         "react-scripts": "5.0.1",
         "semantic-ui-css": "^2.4.1",
         "semantic-ui-react": "^2.1.3",
+        "typescript": "^4.8.2",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2489,6 +2494,25 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/@jest/expect-utils": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-28.1.3.tgz",
+      "integrity": "sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==",
+      "dependencies": {
+        "jest-get-type": "^28.0.2"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@jest/expect-utils/node_modules/jest-get-type": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz",
+      "integrity": "sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==",
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
     "node_modules/@jest/fake-timers": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
@@ -2634,11 +2658,11 @@
       }
     },
     "node_modules/@jest/schemas": {
-      "version": "28.0.2",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.0.2.tgz",
-      "integrity": "sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
       "dependencies": {
-        "@sinclair/typebox": "^0.23.3"
+        "@sinclair/typebox": "^0.24.1"
       },
       "engines": {
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
@@ -3121,9 +3145,9 @@
       }
     },
     "node_modules/@sinclair/typebox": {
-      "version": "0.23.5",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.23.5.tgz",
-      "integrity": "sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg=="
+      "version": "0.24.28",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.28.tgz",
+      "integrity": "sha512-dgJd3HLOkLmz4Bw50eZx/zJwtBq65nms3N9VBYu5LTjJ883oBFkTyXRlCB/ZGGwqYpJJHA5zW2Ibhl5ngITfow=="
     },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.3",
@@ -3750,14 +3774,38 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz",
-      "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==",
+      "version": "28.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.8.tgz",
+      "integrity": "sha512-8TJkV++s7B6XqnDrzR1m/TT0A0h948Pnl/097veySPN67VRAgQ4gZ7n2KfJo2rVq6njQjdxU3GCCyDvAeuHoiw==",
       "dependencies": {
-        "jest-matcher-utils": "^28.0.0",
+        "expect": "^28.0.0",
         "pretty-format": "^28.0.0"
       }
     },
+    "node_modules/@types/jest/node_modules/@jest/types": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
+      "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
+      "dependencies": {
+        "@jest/schemas": "^28.1.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@types/jest/node_modules/@types/yargs": {
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.11.tgz",
+      "integrity": "sha512-aB4y9UDUXTSMxmM4MH+YnuR0g5Cph3FLQBoWoMB21DSvFVAxRVEHEMx3TLh+zUZYMCQtKiqazz0Q4Rre31f/OA==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
     "node_modules/@types/jest/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3811,6 +3859,21 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
+    "node_modules/@types/jest/node_modules/expect": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-28.1.3.tgz",
+      "integrity": "sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==",
+      "dependencies": {
+        "@jest/expect-utils": "^28.1.3",
+        "jest-get-type": "^28.0.2",
+        "jest-matcher-utils": "^28.1.3",
+        "jest-message-util": "^28.1.3",
+        "jest-util": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
     "node_modules/@types/jest/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3820,14 +3883,14 @@
       }
     },
     "node_modules/@types/jest/node_modules/jest-diff": {
-      "version": "28.1.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.1.tgz",
-      "integrity": "sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.3.tgz",
+      "integrity": "sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==",
       "dependencies": {
         "chalk": "^4.0.0",
         "diff-sequences": "^28.1.1",
         "jest-get-type": "^28.0.2",
-        "pretty-format": "^28.1.1"
+        "pretty-format": "^28.1.3"
       },
       "engines": {
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
@@ -3842,25 +3905,60 @@
       }
     },
     "node_modules/@types/jest/node_modules/jest-matcher-utils": {
-      "version": "28.1.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz",
-      "integrity": "sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz",
+      "integrity": "sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==",
       "dependencies": {
         "chalk": "^4.0.0",
-        "jest-diff": "^28.1.1",
+        "jest-diff": "^28.1.3",
         "jest-get-type": "^28.0.2",
-        "pretty-format": "^28.1.1"
+        "pretty-format": "^28.1.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@types/jest/node_modules/jest-message-util": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
+      "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^28.1.3",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^28.1.3",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/@types/jest/node_modules/jest-util": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
+      "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
+      "dependencies": {
+        "@jest/types": "^28.1.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
       },
       "engines": {
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
     "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "28.1.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.1.tgz",
-      "integrity": "sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
       "dependencies": {
-        "@jest/schemas": "^28.0.2",
+        "@jest/schemas": "^28.1.3",
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
         "react-is": "^18.0.0"
@@ -3912,9 +4010,9 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "node_modules/@types/node": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.0.tgz",
-      "integrity": "sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA=="
+      "version": "18.7.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.13.tgz",
+      "integrity": "sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3947,9 +4045,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz",
-      "integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==",
+      "version": "18.0.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
+      "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3957,9 +4055,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.0.5",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
-      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -15848,10 +15946,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "peer": true,
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
+      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18637,6 +18734,21 @@
         "jest-mock": "^27.5.1"
       }
     },
+    "@jest/expect-utils": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-28.1.3.tgz",
+      "integrity": "sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==",
+      "requires": {
+        "jest-get-type": "^28.0.2"
+      },
+      "dependencies": {
+        "jest-get-type": {
+          "version": "28.0.2",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz",
+          "integrity": "sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA=="
+        }
+      }
+    },
     "@jest/fake-timers": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
@@ -18743,11 +18855,11 @@
       }
     },
     "@jest/schemas": {
-      "version": "28.0.2",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.0.2.tgz",
-      "integrity": "sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
+      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
       "requires": {
-        "@sinclair/typebox": "^0.23.3"
+        "@sinclair/typebox": "^0.24.1"
       }
     },
     "@jest/source-map": {
@@ -19084,9 +19196,9 @@
       }
     },
     "@sinclair/typebox": {
-      "version": "0.23.5",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.23.5.tgz",
-      "integrity": "sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg=="
+      "version": "0.24.28",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.28.tgz",
+      "integrity": "sha512-dgJd3HLOkLmz4Bw50eZx/zJwtBq65nms3N9VBYu5LTjJ883oBFkTyXRlCB/ZGGwqYpJJHA5zW2Ibhl5ngITfow=="
     },
     "@sinonjs/commons": {
       "version": "1.8.3",
@@ -19546,14 +19658,35 @@
       }
     },
     "@types/jest": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz",
-      "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==",
+      "version": "28.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.8.tgz",
+      "integrity": "sha512-8TJkV++s7B6XqnDrzR1m/TT0A0h948Pnl/097veySPN67VRAgQ4gZ7n2KfJo2rVq6njQjdxU3GCCyDvAeuHoiw==",
       "requires": {
-        "jest-matcher-utils": "^28.0.0",
+        "expect": "^28.0.0",
         "pretty-format": "^28.0.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
+          "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
+          "requires": {
+            "@jest/schemas": "^28.1.3",
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^17.0.8",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "17.0.11",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.11.tgz",
+          "integrity": "sha512-aB4y9UDUXTSMxmM4MH+YnuR0g5Cph3FLQBoWoMB21DSvFVAxRVEHEMx3TLh+zUZYMCQtKiqazz0Q4Rre31f/OA==",
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -19589,20 +19722,32 @@
           "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-28.1.1.tgz",
           "integrity": "sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw=="
         },
+        "expect": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-28.1.3.tgz",
+          "integrity": "sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==",
+          "requires": {
+            "@jest/expect-utils": "^28.1.3",
+            "jest-get-type": "^28.0.2",
+            "jest-matcher-utils": "^28.1.3",
+            "jest-message-util": "^28.1.3",
+            "jest-util": "^28.1.3"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "jest-diff": {
-          "version": "28.1.1",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.1.tgz",
-          "integrity": "sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==",
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.3.tgz",
+          "integrity": "sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==",
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^28.1.1",
             "jest-get-type": "^28.0.2",
-            "pretty-format": "^28.1.1"
+            "pretty-format": "^28.1.3"
           }
         },
         "jest-get-type": {
@@ -19611,22 +19756,51 @@
           "integrity": "sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA=="
         },
         "jest-matcher-utils": {
-          "version": "28.1.1",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz",
-          "integrity": "sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==",
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz",
+          "integrity": "sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==",
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^28.1.1",
+            "jest-diff": "^28.1.3",
             "jest-get-type": "^28.0.2",
-            "pretty-format": "^28.1.1"
+            "pretty-format": "^28.1.3"
+          }
+        },
+        "jest-message-util": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
+          "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@jest/types": "^28.1.3",
+            "@types/stack-utils": "^2.0.0",
+            "chalk": "^4.0.0",
+            "graceful-fs": "^4.2.9",
+            "micromatch": "^4.0.4",
+            "pretty-format": "^28.1.3",
+            "slash": "^3.0.0",
+            "stack-utils": "^2.0.3"
+          }
+        },
+        "jest-util": {
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
+          "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
+          "requires": {
+            "@jest/types": "^28.1.3",
+            "@types/node": "*",
+            "chalk": "^4.0.0",
+            "ci-info": "^3.2.0",
+            "graceful-fs": "^4.2.9",
+            "picomatch": "^2.2.3"
           }
         },
         "pretty-format": {
-          "version": "28.1.1",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.1.tgz",
-          "integrity": "sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==",
+          "version": "28.1.3",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
+          "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
           "requires": {
-            "@jest/schemas": "^28.0.2",
+            "@jest/schemas": "^28.1.3",
             "ansi-regex": "^5.0.1",
             "ansi-styles": "^5.0.0",
             "react-is": "^18.0.0"
@@ -19670,9 +19844,9 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "@types/node": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.0.tgz",
-      "integrity": "sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA=="
+      "version": "18.7.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.13.tgz",
+      "integrity": "sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -19705,9 +19879,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "18.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz",
-      "integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==",
+      "version": "18.0.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
+      "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -19715,9 +19889,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.0.5",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
-      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "requires": {
         "@types/react": "*"
       }
@@ -28217,10 +28391,9 @@
       }
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "peer": true
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
+      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw=="
     },
     "unbox-primitive": {
       "version": "1.0.2",

frontend/package.json

@@ -6,6 +6,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^18.7.13",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -14,6 +18,7 @@
     "react-scripts": "5.0.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.3",
+    "typescript": "^4.8.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/Components/Navagation/navbar.js

@@ -10,18 +10,19 @@ export default class Navbar extends Component{
         super() 
         this.fetch_classes()
         this.temp_host = 0
+        this.state = {open : true,
+            menu : [],
+            colour : [],
+            text : "",
+            name : "",
+            emoji : [],
+            mode : false,
+            modal : false,
+            error : false
+           }
     }
 
-    state = {open : true,
-        menu : [],
-        colour : [],
-        text : "",
-        name : "",
-        emoji : [],
-        mode : false,
-        modal : false,
-        error : false
-       }
+
 
     async fetch_classes(){
         try {
@@ -167,10 +168,6 @@ export default class Navbar extends Component{
 
     subComponents(item, index){
         
-
-        if (this.state.colour.length === 0 || this.state.emoji.length === 0){
-          this.hanelTabs()  
-        } 
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
                     className={` text-white text-md flex text-center items-center cursor-pointer shadow-lg
@@ -217,7 +214,7 @@ export default class Navbar extends Component{
                         <BsSearch className="block float-left cursor-pointer mr-2"/>
                     </span>
                     <input className={`placeholder:italic placeholder:text-slate-400 block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 ${this.state.open ? "pr-3" : "hidden"} shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
-                           placeholder={`stream localhost...`}
+                           placeholder={`stream link...`}
                            type="text" name="search"
                            onChange={(e) => {
                             this.updateText(e, "text")
@@ -232,7 +229,7 @@ export default class Navbar extends Component{
                         <Icon className="block float-left cursor-pointer mr-2" name="address card"/>
                     </span>
                     <input className={`placeholder:italic placeholder:text-slate-400 block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 ${this.state.open ? "pr-3" : "hidden"} shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
-                           placeholder={`Name...` }
+                           placeholder={`Give it name...` }
                            type="text" name="search"
                            onChange={(e) => {
                             this.updateText(e, "name")

frontend/src/Components/Nodes/Custom.js

@@ -4,13 +4,14 @@ import {BiCube} from 'react-icons/bi'
 import {BsTrash} from 'react-icons/bs'
 import {CgLayoutGridSmall} from 'react-icons/cg'
 import '../../css/counter.css'
+
 export default class CustomNodeIframe extends React.Component {
     constructor({id , data}){
       super()
       this.myRef = React.createRef()
-      this.id = id
       this.state = {
-        reachable : this.handelFetch,
+        id : id,
+        reachable : this.isFetchable(data.host),
         selected : true,
         data : data,
         width : 600,
@@ -21,50 +22,50 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     handelSelected = () => {
-      this.setState({reachable : this.state.reachable, selected : !this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : !this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
     }
 
-    handelFetch = () => {
-      fetch(this.state.data.host, {mode: 'no-cors'}).then((re) => {
-        this.setState({reachable : true, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
-      }).catch(()=>{
-        this.setState({reachable : false, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
+    handelSizeState = () => {
+        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : !this.state.size})
+      }
+
+    isFetchable = async (host) => {
+
+      fetch(host, {mode: 'no-cors'}).then((re) => {
+        return true
+      }).catch((err)=>{
+        alert(`🤪 Something went wrong the url that that was put in is not reachable...\n\n${err}`)
+        return false
       })
+      return false
     }
 
-    handelSizeState = () => {
-      this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : !this.state.size})
-    }
 
     onNodeClick = (id) => {
       this.state.data.delete(id)
     }
 
     handelOnChange(evt, type){
-      this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  type === "width" ? parseInt(evt.target.value) : this.state.width, height : type === "height" ? parseInt(evt.target.value) : this.state.height, size : this.state.size})
-      type === "width" ? this.myRef.current.style.width = `${parseInt(evt.target.value)}px` : this.myRef.current.style.height = `${parseInt(evt.target.value)}px` 
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  type === "width" ? parseInt(evt.target.value) : this.state.width, height : type === "height" ? parseInt(evt.target.value) : this.state.height, size : this.state.size})
+        type === "width" ? this.myRef.current.style.width = `${parseInt(evt.target.value)}px` : this.myRef.current.style.height = `${parseInt(evt.target.value)}px` 
     }
 
     handelSize(evt, increment, change){
-      console.log(evt,increment)
-      if (evt === "Enter"){
-        this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? increment : this.state.width, height : change === "height" ? increment : this.state.height, size : this.state.size})
-        change === "width" ? this.myRef.current.style.width = `${increment}px` : this.myRef.current.style.height = `${increment}px` 
-      } else if (evt === "increment") {
-        this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? this.state.width + increment : this.state.width, height : change === "height" ? this.state.height + increment : this.state.height, size : this.state.size})
-        change === "width" ? this.myRef.current.style.width = `${parseInt(this.state.width) + increment}px` : this.myRef.current.style.height = `${parseInt(this.state.height) + increment}px` 
+      if (evt === "increment") {
+        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? this.state.width + increment : this.state.width, height : change === "height" ? this.state.height + increment : this.state.height, size : this.state.size})
+        change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
     }
 
-    Counter(focus, count){
+    Counter(focus, size){
       return (<div className="custom-number-input h-10 w-32 dark:text-white text-black ">
                 <div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent">
-                  <button data-action="decrement" className=" border-2 border-dotted border-fuchsia-300 hover:border-rose-600 rounded-l-xl hover:animate-pulse h-full w-20 cursor-pointer outline-none " onClick={(e)=> {this.handelSize("increment", -5, focus)}}>
+                  <button data-action="decrement" className=" border-2 border-dotted border-Retro-dark-blue hover:border-rose-700 rounded-l-xl hover:animate-pulse h-full w-20 cursor-pointer outline-none " onClick={(e)=> {this.handelSize("increment", -5, focus)}}>
                     <span className="m-auto text-2xl font-bold">−</span>
                   </button>
-                  <input type="number" className="outline-none focus:outline-none border-fuchsia-300 border-y-2 border-dotted text-center w-full font-semibold text-md focus:from-fuchsia-200 md:text-basecursor-default flex items-cente outline-none bg-transparent" name="input-number" value={count} onChange={(e) => this.handelOnChange(e, focus)} onKeyDown={(e) => {this.handelSize(e.key, count, focus)}}></input>
-                  <button data-action="increment" className="border-2 border-dotted border-fuchsia-300 hover:border-Green-Emerald rounded-r-xl hover:animate-pulse h-full w-20  cursor-pointer" onClick={(e)=> {this.handelSize("increment", 5, focus)}} >
+                  <input type="number" className="focus:outline-none border-Retro-dark-blue border-y-2 border-dotted text-center w-full font-semibold text-md focus:from-fuchsia-200 md:text-basecursor-default flex items-cente outline-none bg-transparent" name="input-number" value={size} onChange={(e) => this.handelOnChange(e, focus)} onKeyDown={(e) => {this.handelSize(e.key, size, focus)}}></input>
+                  <button data-action="increment" className="border-2 border-dotted border-Retro-dark-blue hover:border-green-400 rounded-r-xl hover:animate-pulse h-full w-20  cursor-pointer" onClick={(e)=> {this.handelSize("increment", 5, focus)}} >
                     <span className="m-auto text-2xl font-bold">+</span>
                   </button>
                 </div>
@@ -72,17 +73,17 @@ export default class CustomNodeIframe extends React.Component {
     }
     
     render(){
+      if (!this.state.reachable) this.onNodeClick(this.state.id) 
       return (<>
-        { this.state.reachable &&
                 <>
-                  <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
-                  <div title="Collaspse Node" className=" duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
+                  <div className=" flex w-full h-10 top-0 cursor-pointer">
+                  <div title="Collaspse Node" className=" duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
 
                    
                     <div className={` flex ${this.state.selected ? '' : 'w-0 hidden'}`}>
-                      <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={this.handelSizeState}><TbResize className="h-full w-full text-white p-1"/></div>
-                      <a href={this.state.data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
-                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.id)}><BsTrash className="h-full w-full text-white p-1"/></div>
+                      <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={this.handelSizeState}><TbResize className="h-full w-full text-white p-1"/></div>
+                      <a href={this.state.data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
+                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.state.id)}><BsTrash className="h-full w-full text-white p-1"/></div>
                     
                       { this.state.size && <div className="duration-300 flex w-[60%] h-full  mr-2 -mt-3 space-x-4">
                         {this.Counter("width", this.state.width)}
@@ -92,15 +93,18 @@ export default class CustomNodeIframe extends React.Component {
                   
                   </div>               
                 
-                  <div className={`relative w-[${this.state.width}px] h-[${this.state.height}px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
+                  <div className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
                     <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
                     <iframe 
                         id="iframe" 
                         src={this.state.data.host} 
                         title={this.state.data.label} 
-                        frameBorder="0" className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+                        frameBorder="0" 
+                        className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " 
+                        allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" 
+                        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
                   </div>
                 </>
-        } </>)
+        </>)
     }
 }

frontend/src/Components/ReactFlow/ReactFlowEnv.js

@@ -47,8 +47,7 @@ export default function ReactEnviorment() {
   
         const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
         const type = event.dataTransfer.getData('application/reactflow');
-        const host = event.dataTransfer.getData('application/host');
-        const name = event.dataTransfer.getData('application/name');
+        const item  = JSON.parse(event.dataTransfer.getData('application/item'));
         const colour = event.dataTransfer.getData('application/colour');
         // check if the dropped element is valid
         if (typeof type === 'undefined' || !type) {
@@ -60,10 +59,10 @@ export default function ReactEnviorment() {
           y: event.clientY - reactFlowBounds.top,
         });
         const newNode = {
-          id: `${name}-${nodes.length}`,
+          id: `${item.name}-${nodes.length}`,
           type,
           position,
-          data: { label: `${name}`, host : `${host}`, colour : `${colour}`, delete : deleteNode },
+          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
         };
         setNodes((nds) => nds.concat(newNode));
       },

frontend/src/css/dist/output.css

@@ -583,18 +583,6 @@ video {
   }
 }
 
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.visible {
-  visibility: visible;
-}
-
 .absolute {
   position: absolute;
 }
@@ -656,14 +644,14 @@ video {
   float: left;
 }
 
-.m-0 {
-  margin: 0px;
-}
-
 .m-auto {
   margin: auto;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -692,14 +680,6 @@ video {
   margin-top: -0.75rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -740,18 +720,6 @@ video {
   height: 600px;
 }
 
-.h-\[540px\] {
-  height: 540px;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-5 {
-  height: 1.25rem;
-}
-
 .w-10 {
   width: 2.5rem;
 }
@@ -764,30 +732,6 @@ video {
   width: 2.25rem;
 }
 
-.w-\[85\%\] {
-  width: 85%;
-}
-
-.w-screen {
-  width: 100vw;
-}
-
-.w-\[540px\] {
-  width: 540px;
-}
-
-.w-\[600px\] {
-  width: 600px;
-}
-
-.w-\[80\%\] {
-  width: 80%;
-}
-
-.w-\[78\%\] {
-  width: 78%;
-}
-
 .w-32 {
   width: 8rem;
 }
@@ -796,24 +740,24 @@ video {
   width: 5rem;
 }
 
-.w-\[72\%\] {
-  width: 72%;
+.w-0 {
+  width: 0px;
 }
 
-.w-\[70\%\] {
-  width: 70%;
+.w-\[60\%\] {
+  width: 60%;
 }
 
-.w-\[75\%\] {
-  width: 75%;
+.w-screen {
+  width: 100vw;
 }
 
-.w-\[60\%\] {
-  width: 60%;
+.w-\[560px\] {
+  width: 560px;
 }
 
-.w-0 {
-  width: 0px;
+.w-\[540px\] {
+  width: 540px;
 }
 
 .flex-1 {
@@ -857,12 +801,6 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -881,10 +819,6 @@ video {
   overflow: scroll;
 }
 
-.break-words {
-  overflow-wrap: break-word;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -893,22 +827,12 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
-.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
-.rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+.rounded-xl {
+  border-radius: 0.75rem;
 }
 
 .rounded-l-xl {
@@ -938,10 +862,6 @@ video {
   border-right-width: 1px;
 }
 
-.border-t-2 {
-  border-top-width: 2px;
-}
-
 .border-dashed {
   border-style: dashed;
 }
@@ -965,14 +885,14 @@ video {
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
 }
 
-.border-green-600 {
+.border-Retro-dark-blue {
   --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+  border-color: rgb(3 94 232 / var(--tw-border-opacity));
 }
 
-.border-fuchsia-300 {
+.border-white {
   --tw-border-opacity: 1;
-  border-color: rgb(240 171 252 / var(--tw-border-opacity));
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
 .bg-white {
@@ -1003,31 +923,6 @@ video {
   background-color: rgb(241 52 132 / var(--tw-bg-opacity));
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-}
-
-.bg-cream {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 249 246 / var(--tw-bg-opacity));
-}
-
 .bg-Warm-Red {
   --tw-bg-opacity: 1;
   background-color: rgb(255 96 93 / var(--tw-bg-opacity));
@@ -1283,11 +1178,6 @@ video {
   line-height: 2.5rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -1300,45 +1190,16 @@ video {
   font-weight: 600;
 }
 
-.font-thin {
-  font-weight: 100;
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-green-300 {
-  --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
-}
-
-.text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1384,14 +1245,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1440,39 +1293,14 @@ video {
   border-color: rgb(151 0 204 / var(--tw-border-opacity));
 }
 
-.hover\:border-Green-Forest:hover {
+.hover\:border-rose-700:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(26 76 57 / var(--tw-border-opacity));
+  border-color: rgb(190 18 60 / var(--tw-border-opacity));
 }
 
-.hover\:border-Green-Emerald:hover {
+.hover\:border-green-400:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(49 155 114 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(225 29 72 / var(--tw-border-opacity));
-}
-
-.hover\:border-b-Green-Forest:hover {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(26 76 57 / var(--tw-border-opacity));
-}
-
-.hover\:bg-gray-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.hover\:text-gray-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.hover\:text-black:hover {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  border-color: rgb(74 222 128 / var(--tw-border-opacity));
 }
 
 .focus\:border-sky-500:focus {
@@ -1486,11 +1314,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.focus\:text-black:focus {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1517,11 +1340,6 @@ video {
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -1532,11 +1350,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:w-60 {
     width: 15rem;