Gradio Flow Application

.gitattributes

@@ -0,0 +1,3 @@
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -0,0 +1,146 @@
+# Gradio Flow 🤗
+ 
+**A web application with a backend in Flask and frontend in Rect, and React Flow that use [React flow](https://reactflow.dev/) node base environment to
+stream both gradio and streamlit interfaces, within a single application.**
+ 
+ 
+## Tabel Of Contents 📚
+ - [**App Architecture**](#app-architecture-%EF%B8%8F)
+ 
+ - [**Prerequisites**](#prerequisites-)
+ 
+ - [**Running The App**](#running-the-app-%EF%B8%8F)
+ 
+   - [**Makefile Run**](#makefile-run-docker-)
+
+    
+     - [**Running the docker container**](#1-running-the-docker-container)
+    
+    
+     - [**Entering the backend enviorment**](#2-entering-the-backend-enviorment)
+    
+    
+     - [**Appending Nodes To Frontend From The Backend**](3-appending-nodes-to-frontend-from-the-backend)
+   
+   
+   - [**Non-Docker Build**](#non-docker-build)
+   
+   
+     - [**Build frontend**](#1-build-frontend-within-the-directory-frontend)
+    
+    
+     - [**Run frontend**](#2-run-frontend-within-the-directory-frontend)
+    
+    
+     - [**Build backend dependency**](#3-build-backend-dependency-within-the-directory-backend)
+    
+    
+     - [**Build backend**](#4-run-backend-within-the-directory-backend)
+    
+    
+     - [**Run Gradio within Gradio-Flow**](#5-run-gradio-within-gradio-flow)
+ 
+ - [**Application**](#application-%EF%B8%8F)
+ ## App Architecture 🏗️
+![architecture](https://github.com/commune-ai/Gradio-Flow/blob/gradio-flow/gradio-only/architecture.png)
+ 
+## Prerequisites 📝
+You will need:
+(Docker build 🐳 Currently Only on: Linux)
+- [🐳  Docker](https://docs.docker.com/get-docker/)
+- [🐋 Docker Compose](https://docs.docker.com/compose/install/) (included with Docker Desktop on Windows and macOS)
+ 
+(Running Without docker)
+- 🐍 Python 3.2+ (backend)
+- npm 8.5.0 (frontend)
+- node v16.14.2 (frontend)
+## Running The App 🖥️
+ 
+Starting up it's simple as every command is already within the Makefile.
+ 
+### Makefile Run (Docker 🐳)
+#### **1.** Running the docker container
+```console
+make up
+// command running: docker-compose up -d --remove-orphans;
+// **Ubuntu** sudo make up
+```
+The React application will be running on ``http://localhost:3001`` and the Flask will be running on ``http://localhost:2000``
+#### **2.** Entering the backend enviorment
+```console
+make environment
+// command running: docker exec -it backend bash;
+// **Ubuntu** sudo make environment
+```
+Now that you're within the docker backend container environment you can start adding gradio/streamlit nodes within the frontend. (**Extra Note**) You do not need to be within the container environment to append nodes there is a feature to just run your own gradio application and then append it within the frontend by using the **+ button**. 
+ 
+#### **3.** Appending Nodes To Frontend From The Backend
+
+```console
+> cd ./src
+> python index.py
+//run example gradio application
+```
+
+### Non-Docker Build
+
+#### **1.** Build Frontend (within the directory ``./frontend``)
+```console
+npm install
+```
+#### **2.** Run Frontend (within the directory ``./frontend``)
+```console
+npm start
+```
+
+#### **3.** Build Backend Dependency (within the directory ``./backend``)
+```console
+pip install -r requirements.txt
+```
+
+#### **4.** Run Backend (within the directory backend)
+
+```console
+python app.py -p 2000
+//**NOTE** -p 2000 just assignes it localhost port 2000 anyother port will not work
+```
+#### **5.** Run Gradio within Gradio-Flow 
+It is quite simple, and similar within the docker build, the first way you can append your gradio to the Gradio flow is through running your application at a reachable url that is provided ed when you run Gradio and appending it via ``+ button`` within the frontend, another way that is possible is that within the directory ``./backend/src/helper`` there is a code that you can use to convert your own class or functional  base code into basic gradio tabular interface by using decorators, these decorators will send the nesarry information to the backend flask api and update the frontend menu state in which you'll will be able to interact with it within the front end creating a hub for gradio build functions(**read more** [**here**](https://github.com/LVivona/GradioWrapper)).
+
+**NOTE** If you use the gradio decorator compiler for gradio flow you need to set a listen port to 2000 or else the api will never get the key and will throw you an error, I'll also provided an example below if this isn't clear.
+
+```python
+#backend/src/demo.py (functional base)
+##########
+from helper.compiler import functionalCompiler, tabularGradio
+import gradio as gr
+
+@functionalCompiler(inputs=[gr.Textbox(label="name")], outputs=['text'], examples=[["Luca Vivona"]])
+def Hello_World(name):
+        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+
+if __name__ == "__main__":
+    tabularGradio([Hello_World()], ["hello world"], listen=2000)
+```
+
+```python
+#backend/src/index.py (Class Base)
+###########
+from helper.compiler import register, GradioCompiler
+import gradio as gr
+
+@GradioCompiler
+class Greeting:
+
+    @register(inputs=[gr.Textbox(label="name")], outputs=['text'], examples=[["Luca Vivona"]])
+    def Hello_World(self, name):
+        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+
+
+
+if __name__ == "__main__":
+    Greeting().run(listen=2000)
+```
+ 
+## Application 🏛️
+![Application](https://github.com/commune-ai/Gradio-Flow/blob/gradio-flow/gradio-only/app.png)

backend/.gitignore

@@ -0,0 +1 @@
+./**/__pycache__

backend/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.8
+COPY requirements.txt /app/requirements.txt 
+WORKDIR /app
+RUN pip install -r requirements.txt 
+COPY ./scripts /app/scripts 
+RUN chmod +x ./scripts/*

backend/app.py

@@ -0,0 +1,50 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import socket
+import argparse
+
+app = Flask(__name__)
+CORS(app)
+
+def portConnection(port : int):
+    s = socket.socket(
+        socket.AF_INET, socket.SOCK_STREAM)
+            
+    result = s.connect_ex(("localhost", port))
+    if result == 0: return True
+    return False
+
+
+global visable, watcher, dog
+visable = []
+
+@app.route("/")
+def Home():
+    return jsonify({"message" :"everything is up amd running... 🚀",})
+
+@app.route("/api/append/port" , methods=["POST"])
+def append_port():
+    current = request.json
+    visable.append(current)
+    return jsonify({"executed" : True})
+
+@app.route("/api/remove/port" , methods=["POST"])
+def remove_port():
+    current = request.json
+    print(current)
+    visable.remove(current)
+    return jsonify({"executed" : True,
+                    "ports" : current['port']})
+
+
+@app.route("/api/open/ports", methods=["GET"])
+def open_ports():
+    return jsonify(visable)
+
+
+if __name__ == "__main__":
+
+    parser = argparse.ArgumentParser()
+    parser.add_argument("-p", "--port", help="location of flask api port on local host", default=5000)
+    args = parser.parse_args()
+    app.run(host="0.0.0.0", port=args.port, debug=True)

backend/requirements.txt

@@ -0,0 +1,74 @@
+aiohttp==3.8.1
+aiosignal==1.2.0
+analytics-python==1.4.0
+anyio==3.6.1
+async-timeout==4.0.2
+attrs==21.4.0
+backoff==1.10.0
+bcrypt==3.2.2
+certifi==2022.6.15
+cffi==1.15.1
+charset-normalizer==2.1.0
+click==8.1.3
+cryptography==37.0.4
+cycler==0.11.0
+fastapi==0.79.0
+ffmpy==0.3.0
+filelock==3.7.1
+Flask==2.1.3
+Flask-Cors==3.0.10
+fonttools==4.34.4
+frozenlist==1.3.0
+fsspec==2022.5.0
+gradio==3.1.1
+h11==0.12.0
+httpcore==0.15.0
+httpx==0.23.0
+huggingface-hub==0.8.1
+idna==3.3
+importlib-metadata==4.12.0
+itsdangerous==2.1.2
+Jinja2==3.1.2
+kiwisolver==1.4.4
+linkify-it-py==1.0.3
+markdown-it-py==2.1.0
+MarkupSafe==2.1.1
+#matplotlib==3.5.2
+mdit-py-plugins==0.3.0
+mdurl==0.1.1
+monotonic==1.6
+multidict==6.0.2
+numpy==1.23.1
+orjson==3.7.8
+packaging==21.3
+#pandas==1.4.3
+paramiko==2.11.0
+Pillow==9.2.0
+pycparser==2.21
+pycryptodome==3.15.0
+pydantic==1.9.1
+pydub==0.25.1
+PyNaCl==1.5.0
+pyparsing==3.0.9
+python-dateutil==2.8.2
+python-multipart==0.0.5
+pytz==2022.1
+PyYAML==6.0
+regex==2022.7.24
+requests==2.28.1
+rfc3986==1.5.0
+six==1.16.0
+sniffio==1.2.0
+starlette==0.19.1
+gradioWrapper==0.0.4
+#tokenizers==0.12.1
+#torch==1.12.0
+tqdm==4.64.0
+#transformers==4.20.1
+typing_extensions==4.3.0
+uc-micro-py==1.0.1
+urllib3==1.26.10
+uvicorn==0.18.2
+Werkzeug==2.2.0
+yarl==1.7.2
+zipp==3.8.1

backend/scripts/startup.sh

@@ -0,0 +1,2 @@
+#/bin/sh
+python app.py -p 2000;

backend/src/__init__.py

@@ -0,0 +1,4 @@
+import resources
+from .example.examples import *
+import src.demo 
+import src.index

backend/src/demo.py

@@ -0,0 +1,15 @@
+import gradio as gr
+
+
+def Hello_World(name):
+        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+
+def add(x, y):
+    return x + y
+
+if __name__ == "__main__":
+    pass
+    #tabularGradio([Hello_World(), add()], ["hello world", "add"], listen=2000)
+    #print([key for key, _ in doc.__dict__.items() if not key.startswith("__")])
+    #d = Dock()
+    #print(d.determinePort(),  d2.port_count)

backend/src/example/examples.py

@@ -0,0 +1,137 @@
+import gradio as gr
+import matplotlib
+import matplotlib.pyplot as plt
+import numpy as np
+import PIL
+from helper.compiler import GradioCompiler, register
+
+
+
+"""
+@gradio_compile
+class Pictionary:
+
+    def __init__(self) -> None:
+        self.LABELS = Path('./src/examples/data/labels.txt').read_text().splitlines()
+    
+        self.model = nn.Sequential(
+                nn.Conv2d(1, 32, 3, padding='same'),
+                nn.ReLU(),
+                nn.MaxPool2d(2),
+                nn.Conv2d(32, 64, 3, padding='same'),
+                nn.ReLU(),
+                nn.MaxPool2d(2),
+                nn.Conv2d(64, 128, 3, padding='same'),
+                nn.ReLU(),
+                nn.MaxPool2d(2),
+                nn.Flatten(),
+                nn.Linear(1152, 256),
+                nn.ReLU(),
+                nn.Linear(256, len(self.LABELS)),
+                )   
+        state_dict = torch.load('./src/examples/data/pytorch_model.bin',    map_location='cpu')
+        self.model.load_state_dict(state_dict, strict=False)
+        self.model.eval()
+
+    @register(inputs="sketchpad", outputs=gr.Label())
+    def perdict(self, img) -> 'dict[str, float]':
+        if type(img) == type(None): return {}
+        x = torch.tensor(img, dtype=torch.float32).unsqueeze(0).unsqueeze(0) / 255.
+        with torch.no_grad():
+            out = self.model(x)
+        probabilities = torch.nn.functional.softmax(out[0], dim=0)
+        values, indices = torch.topk(probabilities, 5)
+        confidences = {self.LABELS[i]: v.item() for i, v in zip(indices, values)}
+        return confidences
+"""
+
+@GradioCompiler
+class HelloWorld_2_0:
+
+    @register(inputs=["text", "text", gr.Radio(["morning", "evening", "night"])], outputs="text")
+    def Hello(self, Lname : str, Fname : str, day : 'list[any]'=["morning", "evening", "night"]) -> str:
+        return "Hello, {} {}".format(Fname, Lname)  
+
+    @register(inputs=["text", "text"], outputs="text")
+    def goodbye(self, Fname : str, Lname : str) -> str:
+        return "Goodbye, {} {}".format(Fname, Lname)  
+    
+    @register(inputs=["text", gr.Checkbox() , gr.Slider(0, 60)], outputs=["text", "number"])
+    def greet(self, name, is_morning, temperature):
+        salutation = "Good morning" if is_morning else "Good evening"
+        greeting = "%s %s. It is %s degrees today" % (salutation, name, temperature)
+        celsius = (temperature - 32) * 5 / 9
+        return (greeting, round(celsius, 2))
+
+
+
+@GradioCompiler
+class FSD:
+
+    def get_new_val(self, old_val, nc):
+        return np.round(old_val * (nc - 1)) / (nc - 1)
+
+
+    def palette_reduce(self, img : PIL.Image.Image, nc : 'tuple[float, float, float]'=(0.0000, 0, 16)):
+        pixels = np.array(img, dtype=float) / 255
+        pixels = self.get_new_val(pixels, nc)
+
+        carr = np.array(pixels / np.max(pixels) * 255, dtype=np.uint8)
+        return PIL.Image.fromarray(carr)
+
+    @register(inputs=[gr.Image(), gr.Slider(0.00, 16)], outputs=gr.Gallery())
+    def Floyd_Steinberg_dithering(self, img, nc : 'tuple[float, float, float]'=(0.0000, 0, 16) ) -> 'list[PIL.Image.Image]':
+        pixels = np.array(img, dtype=float) / 255
+        new_height, new_width, _ = img.shape 
+        for row in range(new_height):
+            for col in range(new_width):
+                old_val = pixels[row, col].copy()
+                new_val = self.get_new_val(old_val, nc)
+                pixels[row, col] = new_val
+                err = old_val - new_val
+                if col < new_width - 1:
+                    pixels[row, col + 1] += err * 7 / 16
+                if row < new_height - 1:
+                    if col > 0:
+                        pixels[row + 1, col - 1] += err * 3 / 16
+                    pixels[row + 1, col] += err * 5 / 16
+                    if col < new_width - 1:
+                        pixels[row + 1, col + 1] += err * 1 / 16
+        carr = np.array(pixels / np.max(pixels, axis=(0, 1)) * 255, dtype=np.uint8)
+        return [PIL.Image.fromarray(carr), self.palette_reduce(img, nc) ]
+
+
+
+@GradioCompiler
+class C:
+
+    def Hello(self):
+        return "Hello"
+    
+    @register(inputs="text", outputs="text")
+    def Greeting(self, name):
+        return self.Hello() + " " + name
+
+@GradioCompiler
+class stock_forecast:
+    
+    def __init__(self):
+        matplotlib.use('Agg')
+
+    @register(inputs=[gr.Checkbox(label="legend"), gr.Radio([2025, 2030, 2035, 2040], label="projct"), gr.CheckboxGroup(["Google", "Microsoft", "Gradio"], label="company"), gr.Slider(label="noise"), gr.Radio(["cross", "line", "circle"], label="style")], outputs=[gr.Plot()])
+    def plot_forcast(self, legend, project, companies , noise , styles)-> matplotlib.figure.Figure:
+        start_year = 2022
+        x = np.arange(start_year, project + 1)
+        year_count = x.shape[0]
+        plt_format = ({"cross": "X", "line": "-", "circle": "o--"})[styles]
+        fig = plt.figure()
+        ax = fig.add_subplot(111)
+        for i, company in enumerate(companies):
+            series = np.arange(0, year_count, dtype=float)
+            series = series**2 * (i + 1)
+            series += np.random.rand(year_count) * noise
+            ax.plot(x, series, plt_format)
+        if legend:
+            plt.legend(companies)
+        print(type(fig))
+        return fig 

backend/src/index.py

@@ -0,0 +1,17 @@
+from resources import GradioModule, register
+import gradio as gr
+
+@GradioModule
+class Greeting:
+
+    @register(["text"], ["text"])
+    def Hello_World(self, name):
+        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+
+@register(["text"], ["text"])
+def Hello_World(name):
+    return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+
+
+if __name__ == "__main__":
+    Greeting().run(listen=2000) 

backend/src/resources/__init__.py

@@ -0,0 +1 @@
+from .module import *

backend/src/resources/dock.py

@@ -0,0 +1,24 @@
+import socket
+import random
+
+class Dock:
+
+    def __init__(self) -> None:
+            self.num_ports = 20
+            self.port_range = (7860, 7880)
+
+    def portConnection(self, port : int):
+            s = socket.socket(
+                socket.AF_INET, socket.SOCK_STREAM)  
+            result = s.connect_ex(("localhost", port))
+            if result == 0: return True
+            return False
+
+    def determinePort(self, max_trial_count=10):
+            trial_count = 0 
+            while trial_count <= max_trial_count:
+                port=random.randint(*self.port_range)
+                if not self.portConnection(port):
+                    return port
+                trial_count += 1
+            raise Exception('Exceeded Max Trial count without finding port')

backend/src/resources/module.py

@@ -0,0 +1,201 @@
+import gradio as gr
+from inspect import getfile, isclass, getmro
+
+import socket
+import random
+import requests
+
+class Dock:
+
+    def __init__(self) -> None:
+            self.num_ports = 20
+            self.port_range = (7860, 7880)
+
+    def portConnection(self, port : int):
+            s = socket.socket(
+                socket.AF_INET, socket.SOCK_STREAM)  
+            result = s.connect_ex(("localhost", port))
+            if result == 0: return True
+            return False
+
+    def determinePort(self, max_trial_count=10):
+            trial_count = 0 
+            while trial_count <= max_trial_count:
+                port=random.randint(*self.port_range)
+                if not self.portConnection(port):
+                    return port
+                trial_count += 1
+            raise Exception('Exceeded Max Trial count without finding port')
+
+
+DOCKER_LOCAL_HOST = '0.0.0.0'
+DOCKER_PORT = Dock()
+
+def tabularGradio(funcs, names, name="Tabular Temp Name", **kwargs):
+    port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
+
+    try:
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] if 'listen' in kwargs else 5000 }/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs})
+    except Exception as e:
+        print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛 \n {e}")
+        return
+    
+    gr.TabbedInterface(funcs, names).launch(server_port=port,
+                                            server_name=f"{DOCKER_LOCAL_HOST}",
+                                            inline= kwargs['inline'] if "inline" in kwargs else True,
+                                            share=kwargs['share'] if "share" in kwargs else None,
+                                            debug=kwargs['debug'] if "debug" in kwargs else False,
+                                            enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
+                                            max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                                            auth=kwargs['auth'] if "auth" in kwargs else None,
+                                            auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
+                                            prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
+                                            show_error=kwargs['show_error'] if "show_error" in kwargs else True,
+                                            show_tips=kwargs['show_tips'] if "show_tips" in kwargs else False,
+                                            height=kwargs['height'] if "height" in kwargs else 500,
+                                            width=kwargs['width'] if "width" in kwargs else 900,
+                                            encrypt=kwargs['encrypt'] if "encrypt" in kwargs else False,
+                                            favicon_path=kwargs['favicon_path'] if "favicon_path" in kwargs else None,
+                                            ssl_keyfile=kwargs['ssl_keyfile'] if "ssl_keyfile" in kwargs else None,
+                                            ssl_certfile=kwargs['ssl_certfile'] if "ssl_certfile" in kwargs else None,
+                                            ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
+                                            quiet=kwargs['quiet'] if "quiet" in kwargs else False)
+
+    try:
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] if 'listen' in kwargs else '5000' }/api/remove/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs})
+    except Exception as e:
+    
+        print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛 \n {e}")
+    
+    return
+
+    
+def register(inputs, outputs, examples=None):
+    def register_gradio(func):
+        def wrap(*args, **kwargs):            
+            try:
+                self = args[0]
+                self.registered_gradio_functons
+            except AttributeError:
+                print("✨Initializing Class Functions...✨\n")
+                self.registered_gradio_functons = dict()
+
+            fn_name = func.__name__ 
+            if fn_name in self.registered_gradio_functons: 
+                result = func(*args, **kwargs)
+                return result
+            else:
+                self.registered_gradio_functons[fn_name] = dict(inputs=inputs, outputs=outputs, examples=examples)
+                return None
+        return wrap
+    return register_gradio
+
+def GradioModule(cls):
+    class Decorator:
+
+        def __init__(self) -> None:
+            self.cls = cls()
+
+        def get_funcs(self):
+            return [func for func in dir(self.cls) if not func.startswith("__") and type(getattr(self.cls, func, None)) == type(self.get_funcs) ]
+
+        def compile(self, **kwargs):
+            print("Just putting on the finishing touches... 🔧🧰")
+            for func in self.get_funcs():
+                this = getattr(self.cls, func, None)
+                if this.__name__ == "wrap":
+                    this()
+
+            demos, names = [], []
+            for func, param in self.get_registered_gradio_functons().items():                
+                names.append(func)
+                demos.append(gr.Interface(fn=getattr(self.cls, func, None),
+                                            inputs=param['inputs'],
+                                            outputs=param['outputs'],
+                                            examples=param['examples'],
+                                            cache_examples=kwargs['cache_examples'] if "cache_examples" in kwargs else None,
+                                            examples_per_page=kwargs['cache_examples'] if "cache_examples" in kwargs else 10,
+                                            interpretation=kwargs['interpretation'] if "interpretation" in kwargs else None,
+                                            num_shap=kwargs['num_shap'] if "num_shap" in kwargs else 2.0,
+                                            title=kwargs['title'] if "title" in kwargs else None,
+                                            article=kwargs['article'] if "article" in kwargs else None,
+                                            thumbnail=kwargs['thumbnail'] if "thumbnail" in kwargs else None,
+                                            css=kwargs['css'] if "css" in kwargs else None,
+                                            live=kwargs['live'] if "live" in kwargs else False,
+                                            allow_flagging=kwargs['allow_flagging'] if "allow_flagging" in kwargs else None,
+                                            theme='default', 
+                                            ))
+                print(f"{func}....{bcolor.BOLD}{bcolor.OKGREEN} done {bcolor.ENDC}")
+
+            print("\nHappy Visualizing... 🚀")
+            return gr.TabbedInterface(demos, names)
+            
+        def get_registered_gradio_functons(self):
+            try:
+                self.cls.registered_gradio_functons
+            except AttributeError:
+                return None
+            return self.cls.registered_gradio_functons
+        
+
+        def run(self, **kwargs):
+            port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort() 
+
+            try:
+                requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] if 'listen' in kwargs else '5000' }/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : getfile(self.cls.__class__), "name" : self.cls.__class__.__name__, "kwargs" : kwargs})
+            except Exception:
+                print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛")
+                return
+
+            self.compile(live=kwargs[ 'live' ] if "live" in kwargs else False,
+                         allow_flagging=kwargs[ 'allow_flagging' ] if "allow_flagging" in kwargs else None,
+                         cache_examples=kwargs['cache_examples'] if "cache_examples" in kwargs else None,
+                         examples_per_page=kwargs['cache_examples'] if "cache_examples" in kwargs else 10,
+                         interpretation=kwargs['interpretation'] if "interpretation" in kwargs else None,
+                         num_shap=kwargs['num_shap'] if "num_shap" in kwargs else 2.0,
+                         title=kwargs['title'] if "title" in kwargs else None,
+                         article=kwargs['article'] if "article" in kwargs else None,
+                         thumbnail=kwargs['thumbnail'] if "thumbnail" in kwargs else None,
+                         css=kwargs['css'] if "css" in kwargs else None,
+                         theme=kwargs['theme'] if "theme" in kwargs else None, 
+                         ).launch(server_port=port,
+                                  server_name=f"{DOCKER_LOCAL_HOST}",
+                                  inline= kwargs['inline'] if "inline" in kwargs else True,
+                                  share=kwargs['share'] if "share" in kwargs else None,
+                                  debug=kwargs['debug'] if "debug" in kwargs else False,
+                                  enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
+                                  max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                                  auth=kwargs['auth'] if "auth" in kwargs else None,
+                                  auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
+                                  prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
+                                  show_error=kwargs['show_error'] if "show_error" in kwargs else True,
+                                  show_tips=kwargs['show_tips'] if "show_tips" in kwargs else False,
+                                  height=kwargs['height'] if "height" in kwargs else 500,
+                                  width=kwargs['width'] if "width" in kwargs else 900,
+                                  encrypt=kwargs['encrypt'] if "encrypt" in kwargs else False,
+                                  favicon_path=kwargs['favicon_path'] if "favicon_path" in kwargs else None,
+                                  ssl_keyfile=kwargs['ssl_keyfile'] if "ssl_keyfile" in kwargs else None,
+                                  ssl_certfile=kwargs['ssl_certfile'] if "ssl_certfile" in kwargs else None,
+                                  ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
+                                  quiet=kwargs['quiet'] if "quiet" in kwargs else False) 
+            try:
+                requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] if 'listen' in kwargs else '5000' }/api/remove/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : getfile(self.cls.__class__), "name" : self.cls.__class__.__name__, "kwargs" : kwargs})
+            except Exception:
+                print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛")
+            return
+
+    return Decorator
+
+
+
+class bcolor:
+    HEADER = '\033[95m'
+    OKBLUE = '\033[94m'
+    OKCYAN = '\033[96m'
+    OKGREEN = '\033[92m'
+    WARNING = '\033[93m'
+    FAIL = '\033[91m'
+    ENDC = '\033[0m'
+    BOLD = '\033[1m'
+    UNDERLINE = '\033[4m'
+

docker-compose.yml

@@ -0,0 +1,27 @@
+version : "3.9"
+services:
+  backend :
+    container_name: backend
+    image : commune-ai/backend
+    build :
+      context : ./backend
+      dockerfile : Dockerfile
+    volumes:
+      - './backend:/app'
+    ports:
+      - "2000:2000"
+      - "7860-7880:7860-7880"
+    command: "python app.py -p 2000"
+  frontend :
+    container_name: frontend
+    image : commune-ai/frontend
+    build :
+      context : ./frontend
+      dockerfile : Dockerfile
+    ports:
+      - "3001:3000"
+    volumes:
+      - './frontend/src:/app/src'
+      - './frontend/public:/app/public'
+    command: "npm start"
+    

frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/Dockerfile

@@ -0,0 +1,4 @@
+FROM node:16-alpine3.14
+WORKDIR /app
+COPY package*.json ./
+RUN npm install

frontend/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "gradio-board",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-flow-renderer": "^10.3.8",
+    "react-icons": "^4.4.0",
+    "react-scripts": "5.0.1",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.1.3",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.1.4"
+  }
+}

frontend/public/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/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="%PUBLIC_URL%/android-chrome-192x192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Gradio Flow</title>
+    <link
+    async
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"
+  />
+  <script src="https://cdn.jsdelivr.net/npm/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
+
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

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

frontend/public/robots.txt

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

frontend/src/App.js

@@ -0,0 +1,20 @@
+import ReactEnviorment from './Components/ReactFlow/ReactFlowEnv'
+import { useState } from 'react'
+import { useThemeDetector } from './helper/visual'
+ 
+
+
+export default function App() {
+  const [theme, setTheme] = useState(useThemeDetector)
+  return(
+      <>
+        
+        <div className=' absolute top-4 right-5 z-50' >
+          <h1 className='text-3xl' onClick={()=> setTheme(theme === "" ? "dark" : "")}>{theme  ? '🌙' : '☀️'}</h1>  
+        </div>
+
+        <ReactEnviorment theme={theme ? 'dark' : ''}/>
+      </>
+      
+  )
+};

frontend/src/Components/Navagation/navbar.js

@@ -0,0 +1,289 @@
+import React, { Component } from "react";
+import {BsArrowLeftShort, BsSearch} from 'react-icons/bs';
+import "../../css/dist/output.css"
+import { random_colour, random_emoji } from "../../helper/visual";
+import { Message, Header, Modal, Button, Icon } from 'semantic-ui-react'
+
+export default class Navbar extends Component{
+    constructor(){
+        super() 
+        this.fetch_classes()
+        this.temp_host = 0
+    }
+
+    state = {open : true,
+        menu : [],
+        colour : [],
+        text : "",
+        name : "",
+        emoji : [],
+        mode : false,
+        modal : false,
+        error : false
+       }
+
+    async fetch_classes(){
+        try {
+        setInterval( async () => {
+            const menu = []
+            await fetch("http://localhost:2000/api/open/ports", { method: 'GET', mode : 'cors',})
+                .then(response => response.json())
+                .then(data => {
+                    for (var i = 0; i < data.length; i++){
+                        menu.push(data[i])
+                    }
+                })
+                .catch(error => {console.log(error)})
+                
+                var diff = menu.length - this.state.menu.length
+                if(diff !== 0){
+                   this.hanelTabs(menu, diff)
+                }
+        },1000);    
+        }catch(e){
+            console.log(e)
+        }
+    }
+
+    append_gradio = () => {
+        // var expression = /((http([s]){0,1}:\/\/){0,1}(localhost|127.0.0.1){1}(([:]){0,1}[\0-9]{4}){0,1}\/{0,1}){1}/g;
+        // var regex = new RegExp(expression);
+        // if(!this.state.text.match(regex) || (this.state.text === "http://localhost:3001/")){
+        //     this.setState({open : this.state.open,
+        //                    menu : this.state.menu,
+        //                    text: this.state.text,
+        //                    name : this.state.name,
+        //                    colour : this.state.colour,
+        //                    emoji : this.state.emoji,
+        //                    error : true,
+        //                    modal : this.state.modal })
+        //     return
+        // }
+        
+        // if((this.state.text.includes("localhost") || this.state.text.includes("127.0.0.1")) 
+        //     && this.state.menu.some(e => e.host === this.state.text)){
+        //         this.setState({open : this.state.open,
+        //                        menu : this.state.menu,
+        //                        text: this.state.text,
+        //                        name : this.state.name,
+        //                        colour : this.state.colour,
+        //                        emoji : this.state.emoji,
+        //                        error : true,
+        //                        modal : this.state.modal  })
+
+        //         return
+            
+        // }
+        fetch(this.state.text, {method : "GET", mode: 'no-cors'}).then((re) => {
+            console.log(re)   
+            fetch("http://localhost:2000/api/append/port", {method: 'POST', mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({file : "", kwargs : {}, name : this.state.name === "" ?`temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0 , host : this.state.text}) }).then(resp => {
+                this.setState({open : this.state.open,
+                               menu : this.state.menu,
+                               text: "",
+                               name : "",
+                               colour : this.state.colour,
+                               emoji : this.state.emoji,
+                               error : false,
+                               modal : false  })
+
+            }).catch(() => this.setState({open : this.state.open,
+                                          menu : this.state.menu,
+                                          text: this.state.text,
+                                          colour : this.state.colour,
+                                          emoji : this.state.emoji,    
+                                          error : true,
+                                          modal : this.state.modal }))
+          })
+    }
+
+    handelModal = (bool) => {
+        this.setState({open : this.state.open,
+                       menu : this.state.menu,
+                       text: this.state.text,
+                       name: this.state.name,
+                       colour : this.state.colour,
+                       emoji : this.state.emoji, 
+                       error : !bool ? false : this.state.error ,
+                       modal : bool})
+    }
+
+
+    onDragStart = (event, nodeType, item, index) => {
+        console.log(item)
+        event.dataTransfer.setData('application/reactflow', nodeType);
+        event.dataTransfer.setData('application/host', item.host)
+        event.dataTransfer.setData('application/name', item.name)
+        event.dataTransfer.setData('application/colour', this.state.colour[index])
+        event.dataTransfer.setData('application/item',  JSON.stringify(item))
+        
+        event.dataTransfer.effectAllowed = 'move';
+      };
+
+    onDragDrop = (e) => {
+        e.preventDefault();
+        var item  = JSON.parse(e.dataTransfer.getData('application/item'));
+        fetch("http://localhost:2000/api/remove/port", {method : "POST", mode: 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify(item) }).then((re)=>{
+        })
+    }
+
+    hanelTabs = (e, d) => {
+
+        // if less then 0 we must remove colour's and emoji's
+        // get index of the object
+        // remove
+        var c = []
+        var j = []
+        if(d < 0){
+            var a = this.state.menu.filter(item => !e.includes(item)) // get the items not in menu anymore
+            c = this.state.colour
+            j = this.state.emoji
+            for(var k=0; k < d; k++){
+                c.splice(this.state.menu.indexOf(a[k]), 1)
+                j.splice(this.state.menu.indexOf(a[k]), 1)
+            }
+            this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : c, emoji : j,   error : this.state.error, modal : this.state.modal })
+        }else{
+            //append new colours
+            for(var i =0; i < d; i++){
+                c.push(random_colour());
+                j.push(random_emoji());
+            }
+            this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : this.state.colour.concat(c), emoji : this.state.emoji.concat(j), error : this.state.error, modal : this.state.modal })
+        }
+    }
+
+    appendTabs = () => {
+        this.setState({open : this.state.open, menu : this.state.menu, text: this.state.text, name: this.state.name, colour : [...this.state.colour, random_colour] , emoji : [...this.state.emoji, random_emoji],  error : this.state.error, modal : this.state.modal })
+    }
+
+    handelNavbar = () => {
+        this.setState({open : !this.state.open, menu : this.state.menu, text: this.state.text, name: this.state.name, colour : this.state.colour, emoji : this.state.emoji,  error : this.state.error, modal : this.state.modal  })
+    }
+
+    updateText(e, type){
+        this.setState({open : this.state.open, menu : this.state.menu, text: type === "text" ? e.target.value : this.state.text, name: type === "name" ? e.target.value : this.state.name, colour : this.state.colour, emoji : this.state.emoji,  error : this.state.error, modal : this.state.modal  })
+    }
+
+    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-sm flex text-center items-center cursor-pointer
+                                 p-4 px-2 mt-4 ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} rounded-md mt-2`} draggable>
+                    <span className="text-2xl font-medium ">            </span>
+                    <span className={`text-base font-medium flex-1 text-left" ${this.state.open ? "" : "hidden"}`}>{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]} ${item.name}`}</span>    
+                </li >      
+        </>)
+    }
+
+
+    render(){
+
+
+        
+        // compare the menu if the menu has changed change the state of the navbar
+        
+        // states to change
+        // 1. tabs
+
+        // 2. add colour
+        return (<div>
+        
+            <div className={`z-10 flex-1 float-left bg-white dark:bg-stone-900 h-screen p-5 pt-8 ${this.state.open ? "lg:w-72 md:64 sm:w-60" : "w-10"} duration-300 absolute shadow-2xl border-black border-r-[1px] dark:border-white dark:text-white`}>
+
+            <BsArrowLeftShort onClick={this.handelNavbar} className={`  bg-white text-Retro-darl-blue text-3xl rounded-full absolute -right-3 top-9 border border-black cursor-pointer ${!this.state.open && 'rotate-180'} dark:border-white duration-300 dark:text-white dark:bg-stone-900 `}/>
+
+                <div className="inline-flex w-full">
+                    <h1 className={`font-sans font-bold text-lg ${this.state.open ? "" : "hidden"} duration-500 ml-auto mr-auto`}>Gradio Flow 🤗</h1>
+                </div>
+
+                <div className={`rounded-md text-center ${this.state.open ? "" : "px-0"} py-3`} onClick={() => {this.handelModal(true)}}>
+                    <div className={` text-center bg-transparent w-full h-10 border border-slate-300 hover:border-sky-500 hover:animate-pulse border-dashed rounded-md py-2 pl-5 ${this.state.open ? "pr-3" : "hidden"} shadow-sm sm:text-sm`}>
+                        <Icon className=" block mr-auto ml-auto" name="plus"/>
+                    </div>
+                </div>
+
+                <Modal
+                    basic
+                    open={this.state.modal}
+                    size='small'
+                >
+                <Header icon>
+                    🌐 
+                    <br/>
+                    Append Shared Gradio Hosts 
+                </Header>
+                <Modal.Content>
+                <div className=" text-center">This feature just allows you to append other hosted applications like gradio/streamlit to have it within the Gradio Flow interface, that may not be sending its hosting location to the api or have shared links to other people's gradio application.</div>
+                <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
+                <label className="relative block w-full">
+                    <span className={`absolute inset-y-0 left-0 flex items-center pl-3`}>
+                        <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...`}
+                           type="text" name="search"
+                           onChange={(e) => {
+                            this.updateText(e, "text")
+                           }}
+                        
+                           />
+                </label>
+                </div>
+                <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
+                <label className="relative block w-full">
+                    <span className={`absolute inset-y-0 left-0 flex items-center pl-3`}>
+                        <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...` }
+                           type="text" name="search"
+                           onChange={(e) => {
+                            this.updateText(e, "name")
+                           }}
+                           />
+                </label>
+                </div>
+
+                { this.state.error &&
+                <Message negative>
+                <Message.Header>🚫 Connection to url</Message.Header>
+                    <p>🤔 Either the connection is forbidden, already exist within the menu or it is unreachable... </p>  
+                </Message>
+                }
+
+                </Modal.Content>
+                    <Modal.Actions>
+                        <Button basic color='red' inverted onClick={() => {this.handelModal(false)}}>
+                        <Icon name='remove' /> Exit
+                        </Button>
+                        <Button color='green' inverted onClick={() => {this.append_gradio()}}>
+                        <Icon name='checkmark' /> Append
+                        </Button>
+                    </Modal.Actions>                    
+                </Modal>
+
+                <div className=" relative z-10 h-auto overflow-auto pt-4">
+                    <ul className="pt-2">
+                    {this.state.menu.map((menu, index) => {return this.subComponents(menu, index)})}
+                    </ul>
+                </div>
+
+                <div className={`${this.state.open ? "" : "hidden"} absolute bottom-0 left-0 w-full text-center p-5`} onDragOver={(e)=> {e.preventDefault()}} onDrop={(e)=>{this.onDragDrop(e)}}>
+                    <div className={` text-center bg-transparent w-full h-10 border border-red-600 border-dashed rounded-md py-2 pl-5 p-4 ${this.state.open ? "pr-3" : "hidden"} shadow-sm sm:text-sm`}>
+                        <Icon name='trash alternate' />                   
+                    </div>
+                </div>
+            </div>
+            
+        </div>)
+    }
+}
+
+/**
+ *                 
+ * **/

frontend/src/Components/Nodes/custom.js

@@ -0,0 +1,48 @@
+import React from "react"
+
+  export default class CustomNodeIframe extends React.Component {
+    constructor({data}){
+      super()
+      this.state = {
+        reachable : true,
+        selected : true,
+        data : data
+      }
+    }
+
+    handelSelected = () => {
+      fetch(this.state.data.host, {mode: 'no-cors'}).then((re) => {
+        this.setState({reachable : true, selected : !this.state.selected, data : this.state.data})
+      }).catch(()=>{
+        this.setState({reachable : false, selected : !this.state.selected, data : this.state.data})
+      })
+      //>
+
+    }
+    render(){
+      
+      console.log(this.state.reachable)
+
+      return (
+        <>
+        { this.state.selected && this.state.reachable ? 
+        <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0' onClick={()=>this.handelSelected()}>
+          <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-10`}></div>
+          <iframe src={this.state.data.host} title={this.state.data.label} frameBorder={0} allowFullScreen className=" h-full w-full p-2 overflow-y-scroll"></iframe>
+        </div> :
+        <>
+        <div className='break-words'> 
+          <div className=' h-auto text-center pointer-events-none'>  
+            <div className='hexagon pointer-events-auto break-words text-center hover:animate-pulse dark:bg-black dark:text-white' onClick={()=>this.handelSelected()} >
+            <p className='z-50 pointer-events-none break-words font-sans font-bold'>{this.state.data.label}</p>
+            </div>
+          </div>
+        </div>
+        </> }
+      
+      </>
+      )
+    }
+
+  }
+  

frontend/src/Components/ReactFlow/ReactFlowEnv.js

@@ -0,0 +1,82 @@
+import CustomNodeIframe from "../Nodes/custom";
+import '../../css/dist/output.css'
+import '../../css/CustomNode.css'
+import ReactFlow, { Background,
+                    applyNodeChanges,
+                    applyEdgeChanges,
+                    ReactFlowProvider,
+                    } from 'react-flow-renderer';
+import React ,{ useState, useCallback, useRef } from 'react';
+import Navbar from '../Navagation/navbar';
+
+const types = {
+    custom : CustomNodeIframe,
+  }
+
+export default function ReactEnviorment(props) {
+ 
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
+    const [reactFlowInstance, setReactFlowInstance] = useState(null);
+    const reactFlowWrapper = useRef(null);
+  
+  
+    const onNodesChange = useCallback(
+      (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+      [setNodes]
+    );
+  
+    const onEdgesChange = useCallback(
+      (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+      [setEdges]
+    );
+  
+  
+    const onDragOver = useCallback((event) => {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    }, []);
+  
+    const onDrop = useCallback(
+      (event) => {
+        event.preventDefault();
+  
+        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 colour = event.dataTransfer.getData('application/colour');
+        // check if the dropped element is valid
+        if (typeof type === 'undefined' || !type) {
+          return;
+        }
+  
+        const position = reactFlowInstance.project({
+          x: event.clientX - reactFlowBounds.left,
+          y: event.clientY - reactFlowBounds.top,
+        });
+        const newNode = {
+          id: `${name}-${nodes.length}`,
+          type,
+          position,
+          data: { label: `${name}`, host : `${host}`, colour : `${colour}` },
+        };
+        setNodes((nds) => nds.concat(newNode));
+      },
+      [reactFlowInstance, nodes]);
+
+
+
+    return (
+      <div className={`flex h-screen w-screen ${props.theme} transition-all`}>
+        <Navbar/>
+        <ReactFlowProvider>
+          <div className="h-screen w-screen" ref={reactFlowWrapper}>
+            <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance} fitView>
+            <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
+          </ReactFlow>
+          </div>
+        </ReactFlowProvider>
+      </div>
+    );
+  }

frontend/src/css/CustomNode.css

@@ -0,0 +1,46 @@
+.hexagon {
+    position: relative;
+    width: 200px; 
+    height: 115.47px;
+    background-color: #ffffff;
+    margin: 57.74px 0;
+    border-left: solid 3px #000000;
+    border-right: solid 3px #000000;
+    margin-left: auto;
+    margin-right: auto;
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to left, #2de2e6, #f6019d);
+  }
+
+
+  .hexagon:before,
+  .hexagon:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 141.42px;
+    height: 141.42px;
+    -webkit-transform: scaleY(0.5774) rotate(-30deg);
+    -ms-transform: scaleY(0.5774) rotate(-30deg);
+    transform: scaleY(0.5774) rotate(-45deg);
+    background-color: inherit;
+    left: 27.2893px;
+  }
+  
+  .hexagon:before {
+    top: -70.7107px;
+    border-top: solid 4.8284px #000000;
+    border-right: solid 4.8284px #000000;
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to left, #2de2e6, #f6019d);
+
+  }
+  
+  .hexagon:after {
+    bottom: -70.7107px;
+    border-bottom: solid 4.8284px #000000;
+    border-left: solid 4.8284px;
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to left, #2de2e6, #f6019d);
+       
+}

frontend/src/css/dist/output.css

@@ -0,0 +1,1098 @@
+/*
+! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  /* 3 */
+  tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.-right-3 {
+  right: -0.75rem;
+}
+
+.top-9 {
+  top: 2.25rem;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.-z-10 {
+  z-index: -10;
+}
+
+.float-left {
+  float: left;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-\[540px\] {
+  height: 540px;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-\[600px\] {
+  width: 600px;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-r-\[1px\] {
+  border-right-width: 1px;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 38 38 / var(--tw-border-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-light-white {
+  background-color: rgba(255,255,255, 0.18);
+}
+
+.bg-gradient-to-bl {
+  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
+}
+
+.from-Retro-light-blue {
+  --tw-gradient-from: #2de2e6;
+  --tw-gradient-to: rgb(45 226 230 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Vapor-Violet {
+  --tw-gradient-from: #300350;
+  --tw-gradient-to: rgb(48 3 80 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Retro-purple {
+  --tw-gradient-from: #9700cc;
+  --tw-gradient-to: rgb(151 0 204 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Retro-light-pink {
+  --tw-gradient-from: #f6019d;
+  --tw-gradient-to: rgb(246 1 157 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Vapor-Orange {
+  --tw-gradient-from: #f9ac53;
+  --tw-gradient-to: rgb(249 172 83 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Vapor-Rose {
+  --tw-gradient-from: #f62e97;
+  --tw-gradient-to: rgb(246 46 151 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-Retro-light-pink {
+  --tw-gradient-to: #f6019d;
+}
+
+.to-Vapor-Orange {
+  --tw-gradient-to: #f9ac53;
+}
+
+.to-Vapor-Pink {
+  --tw-gradient-to: #e93479;
+}
+
+.to-Vapor-Blue {
+  --tw-gradient-to: #153cb4;
+}
+
+.to-Vapor-Violet {
+  --tw-gradient-to: #300350;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-9 {
+  padding-left: 2.25rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-black {
+  --tw-shadow-color: #000;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.filter {
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.placeholder\:italic::-webkit-input-placeholder {
+  font-style: italic;
+}
+
+.placeholder\:italic::placeholder {
+  font-style: italic;
+}
+
+.placeholder\:text-slate-400::-webkit-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-slate-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+@-webkit-keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.hover\:animate-pulse:hover {
+  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.hover\:border-sky-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 165 233 / var(--tw-border-opacity));
+}
+
+.focus\:border-sky-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 165 233 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-sky-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.dark .dark\:bg-stone-900 {
+  --tw-bg-opacity: 1;
+  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));
+}
+
+.dark .dark\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px) {
+  .sm\:w-60 {
+    width: 15rem;
+  }
+
+  .sm\:w-\[250pxs\] {
+    width: 250pxs;
+  }
+
+  .sm\:w-\[250px\] {
+    width: 250px;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:w-72 {
+    width: 18rem;
+  }
+}

frontend/src/css/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/css/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/helper/visual.js

@@ -0,0 +1,34 @@
+import '../css/dist/output.css'
+const emote = ['👺', '👾', '🤖', '🧠', '🦾', '🐲', '🦊', '🐵', '🦄', '🀄' ,'🌟', '🖥', '📟', '🧬', '🚀', '🌈', '🌱', '🌎']
+
+const colour_map = {
+    0 : 'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',
+    1 : 'bg-gradient-to-bl from-Vapor-Violet to-Vapor-Orange',
+    2 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Pink',
+    3 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Blue',
+    4 : 'bg-gradient-to-bl from-Retro-light-pink to-Vapor-Blue',
+    5 : 'bg-gradient-to-bl from-Vapor-Orange to-Vapor-Violet',
+    6 : 'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue'
+}
+
+export const random_emoji = () =>{
+    return emote[Math.floor(Math.random() * emote.length)]
+}
+
+export const random_colour = () => {
+    return colour_map[Math.floor(Math.random() * Object.keys(colour_map).length)]
+}
+
+export const list_of_null = (idx) => {
+    var list = []
+    for(var i = 0; i < idx; i++ ) {
+        list.push(null)
+    }
+    return list
+}
+
+
+export const useThemeDetector = () => {
+    const getCurrentTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return getCurrentTheme;
+}

frontend/src/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './css/index.css';
+import App from './App';
+//import Navbar from './Components/Navagation/navbar';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    < App/>
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;