refactor frontend/backend 👨‍💻

backend/src/resources/module.py

@@ -1,41 +1,77 @@
+from signal import signal, SIGKILL
 import gradio as gr
 from inspect import getfile
-
 import socket
 import requests
-
+import os 
 class Dock:
 
     def __init__(self) -> None:
             self.port_map = dict()
             for p in range(7860, 7880):
-                if not self.portConnection(p):
+                if not self.port_is_connected(p):
                     self.port_map[p] = True
+                else:
+                    self.port_map[p] = False
+
+            
 
-    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 port_is_connected(self, port : int) -> bool:
+        """
+            @params: 
+                - port : int
+            @return:
+                - boolean
+            check if the port is open with in our localhost
+        """
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:  
+            return s.connect_ex(("localhost", port)) == 0 
 
-    def determinePort(self):
+
+    def determinePort(self) -> any:
+        """
+            Take the port_map that was instantiate
+            in the __init__ and loop though all ports
+            and check if it the port is available  
+        """
         for port, available in self.port_map.items():
             if available == True:
+                if self.port_is_connected(port): # check if port is in use if so then go to the next one
+                    continue
                 return port
+        
         raise Exception(f'❌ 🔌 {bcolor.BOLD}{bcolor.UNDERLINE}{bcolor.FAIL}All visable ports are used up...Try close some ports {bcolor.ENDC}')
 
-DOCKER_LOCAL_HOST = '0.0.0.0'
-DOCKER_PORT = Dock()
+
+        
+
+
+DOCKER_LOCAL_HOST = '0.0.0.0' 
+DOCKER_PORT = Dock() # Determine the best possible port 
 
 def InterLauncher(name, interface, listen=2000, **kwargs):
-    port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
+    """
+        @params:
+            - name : string
+            - interface : gradio.Interface(...)
+            - listen : int
+            - **kwargs
+        
+        Take any gradio interface object 
+        that is created by the gradio 
+        package and send it to the flaks api
+    """
+    port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort() # determine the next open port is no port is listed **kwargs
+    
     try:
+        # (POST) send the information of the gradio to the flask api
         requests.post(f"http://{DOCKER_LOCAL_HOST}:{listen}/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : "Not Applicable", "name" : name, "kwargs" : kwargs})
-    except Exception as e:
+    except Exception as e: 
+        # If there is an Exception then notify the user and end the method
         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
 
+    # Launch the gradio application
     interface.launch(server_port=port,
                      server_name=f"{DOCKER_LOCAL_HOST}",
                      inline= kwargs['inline'] if "inline" in kwargs else False,
@@ -58,6 +94,9 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
                      quiet=kwargs['quiet'] if "quiet" in kwargs else False)
     
     try:
+        # (POST) stop the interface if user hits ctrl+c 
+        # send the information of the gradio to the flask
+        # api to remove it from the list within the flask api
         requests.post(f"http://{DOCKER_LOCAL_HOST}:{ listen }/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}")
@@ -77,6 +116,7 @@ def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
     # send this to the backend api for it to be read by the react frontend
     if 'listen' in kwargs:
         try:
+            # (POST) send the information of the gradio to the flask api
             requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/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}")
@@ -116,14 +156,21 @@ def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
 
 
 def register(inputs, outputs, examples=None, **kwargs):
+    """
+        Decorator that is appended to a function either within a class or not
+        and output either an interface or inputs and outputs for later processing
+        to launch either to Gradio-Flow or just Gradio
+    """
     def register_gradio(func):
-        
-
-        def decorator(*args, **wargs):                    
+        def decorator(*args, **wargs): 
+            
+            # if the output is a list then there should be equal or more then 1                   
             if type(outputs) is list:
                 assert len(outputs) >= 1, f"❌ {bcolor.BOLD}{bcolor.FAIL}you have no outputs 🤨... {str(type(outputs))} {bcolor.ENDC}"
             
-            fn_name = func.__name__ 
+            fn_name = func.__name__ # name of the function
+
+            # if there exist the self within the arguments and thats the first argument then this must be a class function
             if 'self' in func.__code__.co_varnames and func.__code__.co_varnames[0] == 'self' and fn_name in dir(args[0]):     
                 """
                 given the decorator is on a class then
@@ -131,6 +178,7 @@ def register(inputs, outputs, examples=None, **kwargs):
                 if not already initialize.
                 """
                
+                # if the inputs is a list then inputs list should equal the arugments list
                 if type(inputs) is list:
                     assert len(inputs) == func.__code__.co_argcount - 1, f"❌ {bcolor.BOLD}{bcolor.FAIL}inputs should have the same length as arguments{bcolor.ENDC}"
 
@@ -138,8 +186,9 @@ def register(inputs, outputs, examples=None, **kwargs):
                     self = args[0]
                     self.registered_gradio_functons
                 except AttributeError:
-                    self.registered_gradio_functons = dict()
+                    self.registered_gradio_functons = dict() # if registered_gradio_functons does not exist then create it 
                 
+                # if the function name is not within the registered_gradio_functons then register it within the registered_gradio_functons 
                 if not fn_name in self.registered_gradio_functons:
                     self.registered_gradio_functons[fn_name] = dict(inputs=inputs,
                                                                     outputs=outputs, 
@@ -156,13 +205,19 @@ def register(inputs, outputs, examples=None, **kwargs):
                                                                     allow_flagging=kwargs['allow_flagging'] if "allow_flagging" in kwargs else None,
                                                                     theme=kwargs['theme'] if "theme" in kwargs else 'default', )
 
+                # if the argument are within the function when it's called then give me the output of the function
+                # giving the user the ability to use the function if necessary 
                 if len(args[1:]) == (func.__code__.co_argcount - 1):
                     return func(*args, **wargs) 
+                
+                # return nothing if the arguments are not within it cause if the arguments do not exist it will give a error
                 return None
             else :
                 """
                 the function is not a class function
                 """
+
+                # if the inputs is a list then inputs list should equal the arugments list
                 if type(inputs) is list:    
                     assert len(inputs) == func.__code__.co_argcount, f"❌ {bcolor.BOLD}{bcolor.FAIL}inputs should have the same length as arguments{bcolor.ENDC}"
 
@@ -187,7 +242,7 @@ def register(inputs, outputs, examples=None, **kwargs):
                                     allow_flagging=kwargs['allow_flagging'] if "allow_flagging" in kwargs else None,
                                     theme='default', 
                                     )
-        decorator.__decorator__ = "__gradio__"
+        decorator.__decorator__ = "__gradio__" # siginture to tell any function that need to know that function is a registed gradio application
         return decorator
     return register_gradio
 
@@ -200,14 +255,23 @@ def GradioModule(cls):
             self.interface = self.__compile()
         
         def get_funcs_names(self):
+            """
+                Get all name for each function
+            """
             assert self.get_registered_map() != None, "this is not possible..."
             return [ name for name in self.get_registered_map().keys()]
 
         def get_registered_map(self):
+            """
+                Get all registered functions
+            """
             assert self.__cls__.registered_gradio_functons != None, "what happen!!!!"
             return self.__cls__.registered_gradio_functons
         
         def __get_funcs_attr(self):
+            """
+                Get all the function that are registered
+            """
             for func in dir(self.__cls__):
                 fn = getattr(self.__cls__, func, None)
                 
@@ -220,8 +284,8 @@ def GradioModule(cls):
             within the class that are registeed
             """
             demos, names = [], []
-            for func, param in self.get_registered_map().items():                
-                names.append(func)
+            for func, param in self.get_registered_map().items(): # loop though the registered function and append it to the TabularInterface           
+                names.append(func) 
                 try:
                     demos.append(gr.Interface(fn=getattr(self.__cls__, func, None), **param))
                 except Exception as e :
@@ -232,6 +296,13 @@ def GradioModule(cls):
             return gr.TabbedInterface(demos, names)
             
         def launch(self, **kwargs):
+            """
+                @params:
+                    **kwargs
+                Take the tabular interface and send it to the api if
+                'listen' is within the kwargs and launch the gradio interface
+                then when the gradio stops then remove it from the api
+            """
             port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort() 
             if 'listen' in kwargs:
                 try:
@@ -269,6 +340,7 @@ def GradioModule(cls):
 
     return Decorator
 
+# console colour changer 
 class bcolor:
     HEADER = '\033[95m'
     OKBLUE = '\033[94m'

frontend/src/App.js

@@ -1,4 +1,4 @@
-import ReactEnviorment from './Components/ReactFlow/ReactFlowEnv'
+import ReactEnviorment from './components/ReactFlow/ReactFlowEnv'
 
 export default function App() {
   return(

frontend/src/{Components → components}/Navagation/navbar.js

@@ -6,10 +6,11 @@ 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() 
+    constructor(props){
+        super(props) 
         this.fetch_classes()
         this.temp_host = 0
+        this.deleteNode = props.onDelete
         this.state = {open : true,
             menu : [],
             colour : [],
@@ -19,11 +20,15 @@ export default class Navbar extends Component{
             mode : false,
             modal : false,
             error : false
+
            }
     }
 
 
-
+    /**
+     *  Asynchronously call the Flask api server every second to check if there exist a gradio application info
+     *  @return null
+     */
     async fetch_classes(){
         try {
         setInterval( async () => {
@@ -47,35 +52,39 @@ export default class Navbar extends Component{
         }
     }
 
-    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  })
+    /**
+     * Append new node from the user 
+     */
+    append_gradio = async () => {
+        const pattern = {
+            local : /^https?:\/\/(localhost)*(:[0-9]+)?(\/)?$/,
+            share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
+            hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
+        } 
 
-        //         return
+        if (this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.host) }) !== -1 ||
+            this.state.text.includes(" ") || 
+            (!pattern.local.test(this.state.text) &&
+            !pattern.share.test(this.state.text) &&
+            !pattern.hugginFace.test(this.state.text))){
             
-        // }
+            console.log(this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.host) }) !== -1)
+            console.log(this.state.text.includes(" ") )
+            console.log(this.state.text.includes("") )
+            console.log(!pattern.local.test(this.state.text) &&
+            !pattern.share.test(this.state.text) &&
+            !pattern.hugginFace.test(this.state.text))
+                this.setState({open : this.state.open,
+                    menu : this.state.menu,
+                    text: '',
+                    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 => {
@@ -88,16 +97,31 @@ export default class Navbar extends Component{
                                error : false,
                                modal : false  })
 
-            }).catch(() => this.setState({open : this.state.open,
+            }).catch((err) => this.setState({open : this.state.open,
                                           menu : this.state.menu,
-                                          text: this.state.text,
+                                          text: '',
+                                          name : '',
                                           colour : this.state.colour,
                                           emoji : this.state.emoji,    
                                           error : true,
                                           modal : this.state.modal }))
+          }).catch((err)=>{
+            console.log(err)
+            this.setState({open : this.state.open,
+                menu : this.state.menu,
+                text: '',
+                name : '',
+                colour : this.state.colour,
+                emoji : this.state.emoji,    
+                error : true,
+                modal : this.state.modal })
           })
     }
 
+    /**
+     * error check the user input
+     * @param {*} bool boolean of the current state of the modal  
+     */
     handelModal = (bool) => {
         this.setState({open : this.state.open,
                        menu : this.state.menu,
@@ -109,25 +133,40 @@ export default class Navbar extends Component{
                        modal : bool})
     }
 
-
+    /**
+     * when dragged get all the information needed
+     * @param {*} event 
+     * @param {*} nodeType string 'custom' node type
+     * @param {*} item object information returned from the api
+     * @param {*} index current index
+     */
     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';
       };
 
+    /**
+     * droped event that occurs when the user drops the Tab within the tash div.
+     * The function just deletes all nodes within React-Flow enviorment related, 
+     * and remove it from the api.
+     * @param {*} e drop event  
+     */
     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)=>{
+            this.deleteNode(item.name)
         })
+       
     }
 
+    /**
+     * update the tabs within the navbar
+     * @param {*} e current menu 
+     * @param {*} d integer variable of the diffence between the current menu and new menu updated ment
+     */
     hanelTabs = (e, d) => {
 
         // if less then 0 we must remove colour's and emoji's
@@ -150,22 +189,39 @@ export default class Navbar extends Component{
                 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 })
+            this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : [...this.state.colour, ...c], emoji : [...this.state.emoji, ...j], error : this.state.error, modal : this.state.modal })
         }
     }
 
+    /**
+     * Append a new colour, and emoji to the colour and emoji list with in the state of the component
+     */
     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 })
     }
 
+    /**
+     * handel navagation open and close function
+     */
     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  })
     }
 
+    /**
+     * 
+     * @param {*} e : event type to get the target value of the current input
+     * @param {*} type : text | name string that set the changed value of the input to the current value 
+     */
     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  })
     }
 
+    /**
+     * 
+     * @param {*} item : object infomation from the flask api  
+     * @param {*} index : current index with in the list
+     * @returns div component that contians infomation of gradio 
+     */
     subComponents(item, index){
         
         return(<>
@@ -213,7 +269,7 @@ export default class Navbar extends Component{
                     <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`} 
+                    <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 bg-transparent`} 
                            placeholder={`stream link...`}
                            type="text" name="search"
                            onChange={(e) => {
@@ -240,8 +296,22 @@ export default class Navbar extends Component{
 
                 { 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.Header className=" text-lg text-center">🚫 Something went wrong...</Message.Header>
+                    <br/>
+                    <h1 className=" underline pb-3 font-bold text-lg">🤔 Possible Things That could of happen <br/></h1>
+                    <ul className="font-bold">
+                            <li>- The input was empty</li>
+                            <li>- The connection was forbidden</li>
+                            <li>- The name was already taken</li>
+                            <li>- The link you gave did not pass the regex</li>
+                            <ul className="px-6">
+                                <li>- http://localhost:xxxx</li>
+                                <li>- http://xxxxx.gradio.app</li>
+                                <li>- https://hf.space/embed/$user/$space_name/+</li>
+                            </ul>
+                            <li>- link already exist within the menu</li>
+                        </ul>
+
                 </Message>
                 }
 

frontend/src/{Components → components}/Nodes/Custom.js

@@ -1,6 +1,6 @@
 import React from "react"
 import {TbResize} from 'react-icons/tb'
-import {BiCube} from 'react-icons/bi'
+import {BiCube, BiRefresh} from 'react-icons/bi'
 import {BsTrash} from 'react-icons/bs'
 import {CgLayoutGridSmall} from 'react-icons/cg'
 import '../../css/counter.css'
@@ -14,19 +14,20 @@ export default class CustomNodeIframe extends React.Component {
         reachable : this.isFetchable(data.host),
         selected : true,
         data : data,
-        width : 600,
-        height : 540,
-        size : false
+        width : 540,
+        height : 600,
+        size : false,
+        iframe : 0
       }
  
     }
 
     handelSelected = () => {
-      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})
+      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, iframe : this.state.iframe})
     }
 
     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})
+        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, iframe : this.state.iframe})
       }
 
     isFetchable = async (host) => {
@@ -45,14 +46,21 @@ export default class CustomNodeIframe extends React.Component {
       this.state.data.delete(id)
     }
 
+    onRefresh(){
+      if(!this.isFetchable) this.onNodeClick(this.state.id)
+      else{
+        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, iframe : this.state.iframe + 1})
+      }
+    }
+
     handelOnChange(evt, type){
-      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})
+      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, iframe : this.state.iframe})
         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){
       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})
+        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, iframe : this.state.iframe})
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
@@ -77,15 +85,16 @@ export default class CustomNodeIframe extends React.Component {
       return (<>
                 <>
                   <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 title="Collaspse Node" className=" duration-300 cursor-pointer shadow-xl border-2 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-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">
+                      <div title="Refresh 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-Orange rounded-xl" onClick={() => this.onRefresh()}><BiRefresh className="h-full w-full text-white p-1"/></div>
+
+                      { this.state.size && <div className="duration-300 flex w-auto h-full  mr-2 -mt-3 space-x-4">
                         {this.Counter("width", this.state.width)}
                         {this.Counter("height", this.state.height)}
                       </div>}
@@ -97,11 +106,11 @@ export default class CustomNodeIframe extends React.Component {
                     <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
                     <iframe 
                         id="iframe" 
+                        key={this.state.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>
                   </div>
                 </>

frontend/src/{Components → components}/ReactFlow/ReactFlowEnv.js

@@ -1,6 +1,5 @@
 import CustomNodeIframe from "../Nodes/Custom.js";
 import '../../css/dist/output.css'
-import '../../css/CustomNode.css'
 import ReactFlow, { Background,
                     applyNodeChanges,
                     applyEdgeChanges,
@@ -16,14 +15,13 @@ const types = {
 
 export default function ReactEnviorment() {
 
-    const [theme, setTheme] = useState(useThemeDetector())
+    const [theme, setTheme] = useState(useThemeDetector)
     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]
@@ -40,7 +38,7 @@ export default function ReactEnviorment() {
     }, []);
 
     const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
-
+    const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
     const onDrop = useCallback(
       (event) => {
         event.preventDefault();
@@ -74,7 +72,7 @@ export default function ReactEnviorment() {
           <h1 className='text-4xl select-none' >{theme  ? '🌙' : '☀️'}</h1>  
         </div>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>
-          <Navbar/>
+          <Navbar onDelete={deleteNodeContains}/>
           <ReactFlowProvider>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
               <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onNodesDelete={deleteNode} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>

frontend/src/css/CustomNode.css

@@ -1,46 +0,0 @@
-.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

@@ -744,22 +744,18 @@ video {
   width: 0px;
 }
 
-.w-\[60\%\] {
-  width: 60%;
-}
-
-.w-screen {
-  width: 100vw;
-}
-
-.w-\[560px\] {
-  width: 560px;
+.w-auto {
+  width: auto;
 }
 
 .w-\[540px\] {
   width: 540px;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -928,6 +924,11 @@ video {
   background-color: rgb(255 96 93 / var(--tw-bg-opacity));
 }
 
+.bg-Warm-Orange {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 169 89 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -992,6 +993,30 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-Amethyst-Light {
+  --tw-gradient-from: #9D50BB;
+  --tw-gradient-to: rgb(157 80 187 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Peach-Red {
+  --tw-gradient-from: #ED4264;
+  --tw-gradient-to: rgb(237 66 100 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Deep-Space-Black {
+  --tw-gradient-from: #000000;
+  --tw-gradient-to: rgb(0 0 0 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-Sunshine-Red {
+  --tw-gradient-from: #b92b27;
+  --tw-gradient-to: rgb(185 43 39 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-purple-500 {
   --tw-gradient-to: rgb(168 85 247 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
@@ -1017,11 +1042,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), #F1A089, var(--tw-gradient-to);
 }
 
-.via-Happy-Light-Magenta {
-  --tw-gradient-to: rgb(207 123 198 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #CF7BC6, var(--tw-gradient-to);
-}
-
 .via-Happy-Indego-Purple {
   --tw-gradient-to: rgb(148 98 233 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #9462E9, var(--tw-gradient-to);
@@ -1073,6 +1093,22 @@ video {
   --tw-gradient-to: #319B72;
 }
 
+.to-Amethyst-Dark {
+  --tw-gradient-to: #6E48AA;
+}
+
+.to-Peach-Yello {
+  --tw-gradient-to: #FFEDBC;
+}
+
+.to-Deep-Space-Gray {
+  --tw-gradient-to: #434343;
+}
+
+.to-Sunshine-Blue {
+  --tw-gradient-to: #1565C0;
+}
+
 .p-5 {
   padding: 1.25rem;
 }
@@ -1113,6 +1149,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1141,6 +1182,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1200,6 +1245,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .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);
@@ -1271,6 +1321,14 @@ video {
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
+.placeholder\:text-transparent::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.placeholder\:text-transparent::placeholder {
+  color: transparent;
+}
+
 @-webkit-keyframes pulse {
   50% {
     opacity: .5;

frontend/src/css/iframe.css

@@ -1,5 +0,0 @@
-.Iframe_class{
-    position: absolute;
-    width: 100%!important;
-    height: 100%!important;
-}

frontend/src/helper/visual.js

@@ -1,38 +1,41 @@
 import '../css/dist/output.css'
-const emote = ['👺', '👾', '🤖', '🧠', '🦾', '🦊', '🐵', '🦄', '🀄' ,'🌟', '🖥', '📟', '🧬', '🚀', '🌈', '🌱', '🌎']
+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-indigo-500 via-purple-500 to-pink-500',
-    6 : 'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue',
-    7 : 'bg-gradient-to-bl from-Warm-Blue via-Warm-Pink via-Warm-Red via-Warm-Orange to-Warm-Yellow',
-    8 : 'bg-gradient-to-bl from-Happy-Yellow via-Happy-Tangerine via-Happy-Light-Magenta via-Happy-Indego-Purple via-Cool-Blue to-Happy-Sea-Blue',
-    9 : 'bg-gradient-to-bl from-Blue-Turquoise via-Blue-Midtone to-Blue-Royal',
-    10 : 'bg-gradient-to-bl from-Green-Black via-Green-Forest to-Green-Emerald'
-}
+const colour_map = [
+     'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',
+     'bg-gradient-to-bl from-Vapor-Violet to-Vapor-Orange',
+     'bg-gradient-to-bl from-Retro-purple to-Vapor-Pink',
+     'bg-gradient-to-bl from-Retro-purple to-Vapor-Blue',
+     'bg-gradient-to-bl from-Retro-light-pink to-Vapor-Blue',
+     'bg-gradient-to-bl from-indigo-500 via-purple-500 to-pink-500',
+     'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue',
+     'bg-gradient-to-bl from-Warm-Blue via-Warm-Pink via-Warm-Red via-Warm-Orange to-Warm-Yellow',
+     'bg-gradient-to-bl from-Happy-Yellow via-Happy-Tangerine via-Happy-Indego-Purple via-Cool-Blue to-Happy-Sea-Blue',
+     'bg-gradient-to-bl from-Blue-Turquoise via-Blue-Midtone to-Blue-Royal',
+     'bg-gradient-to-bl from-Green-Black via-Green-Forest to-Green-Emerald',
+     'bg-gradient-to-bl from-Amethyst-Light to-Amethyst-Dark',
+     'bg-gradient-to-bl from-Peach-Red to-Peach-Yello',
+     'bg-gradient-to-bl from-Deep-Space-Black to-Deep-Space-Gray',
+     'bg-gradient-to-bl from-Sunshine-Red to-Sunshine-Blue'
+]
 
 /**
- * 
- *  "Warm-Blue": "#283AB8",
-        "Warm-Violet" : "#8D379E",
-        "Warm-Pink" : "#F13484",
-        "Warm-Red" : "#FF605D",
-        "Warm-Orange" : "#FEA959",
-        "Warm-Yellow" : "#FEE27A",
+ * Get a random emoji from emote array
+ * @returns random emoji from emote array
  */
-
 export const random_emoji = () =>{
     return emote[Math.floor(Math.random() * emote.length)]
 }
 
+/**
+ * Get a random color string from colour_map array
+ * @returns random color css string 
+ */
 export const random_colour = () => {
-    return colour_map[Math.floor(Math.random() * Object.keys(colour_map).length)]
+    return colour_map[Math.floor(Math.random() * colour_map.length)]
 }
 
+
 export const list_of_null = (idx) => {
     var list = []
     for(var i = 0; i < idx; i++ ) {
@@ -41,8 +44,11 @@ export const list_of_null = (idx) => {
     return list
 }
 
-
+/**
+ * 
+ * @returns 
+ */
 export const useThemeDetector = () => {
     const getCurrentTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
-    return getCurrentTheme;
+    return getCurrentTheme();
 }

frontend/tailwind.config.js

@@ -7,6 +7,14 @@ module.exports = {
     extend: {
      
       colors : {
+        "Amethyst-Light" : "#9D50BB",
+        "Amethyst-Dark" : "#6E48AA",
+        "Peach-Red" : "#ED4264",
+        "Peach-Yello" : "#FFEDBC",
+        "Deep-Space-Black" : "#000000",
+        "Deep-Space-Gray" : "#434343",
+        "Sunshine-Red" : "#b92b27",
+        "Sunshine-Blue" : "#1565C0",
         "Retro-light-blue" : "#2de2e6",
         "Retro-dark-blue" : "#035ee8",
         "Retro-light-pink" : "#f6019d",