feat: move components directory to frontend root 🚚

frontend/components/Edges/Custom.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {BiX} from 'react-icons/bi'
+import { getBezierPath, getEdgeCenter } from 'react-flow-renderer';
+
+import '../../css/dist/output.css';
+
+const foreignObjectSize = 40;
+
+const onEdgeClick = (evt, id) => {
+  evt(id)
+};
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  data
+}) {
+  const edgePath = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <>
+      <path
+        id={id}
+        style={{stroke : "#00FF4A", strokeWidth : "6"}}
+        className="react-flow__edge-path"
+        d={edgePath}
+        markerEnd={markerEnd}
+      />
+      <foreignObject
+        width={foreignObjectSize}
+        height={200}
+        x={edgeCenterX - foreignObjectSize / 2}
+        y={edgeCenterY - foreignObjectSize / 2}
+        className="edgebutton-foreignobject"
+        requiredExtensions="http://www.w3.org/1999/xhtml"
+      >
+          <div className=" flex w-10 h-10 dark:bg-black bg-white border-2 rounded-xl hover:shadow-lg text-center duration-200" onClick={() => onEdgeClick(data.delete, id)}>
+            <BiX className=' flex-1 w-9 h-9 text-black dark:text-white'/>
+          </div>
+      </foreignObject>
+    </>
+  );
+}

frontend/components/Edges/CustomLine.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { getBezierPath } from 'react-flow-renderer';
+
+const CustomLine = ({
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+  connectionLineType,
+  connectionLineStyle,
+}) => {
+
+    const edgePath = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke="#00FF4A"
+        strokeWidth={7}
+        className="animated"
+        d={edgePath}
+      />
+    </g>
+  );
+};
+
+export default CustomLine;

frontend/components/Modal/importer.js

@@ -0,0 +1,198 @@
+import { Modal, Icon, Message} from 'semantic-ui-react'
+import "../../css/dist/output.css"
+import {ReactComponent as Gradio} from '../../images/gradio.svg'
+import {ReactComponent as Streamlit} from '../../images/streamlit.svg'
+import {ReactComponent as Exit} from '../../images/exit.svg'
+import { useState } from 'react'
+import {BsSearch} from 'react-icons/bs';
+
+export default function Import(props){
+    const [tab, setTab] = useState("gradio")
+    const [subTab, setSubTab] = useState(0)
+
+    return (<div>
+        <Modal
+            basic
+            className=''
+            open={props.open}
+            size='fullscreen'
+            >
+                <div className='w-full shadow-lg rounded-lg'>
+                    <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                        <li className="" onClick={()=>{
+                            setTab("gradio") 
+                            props.catch ? props.handelError(false) : props.handelError(props.catch)  }}>
+                            <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10"/></button>
+                        </li>
+                        <li className="" onClick={()=>{
+                            setTab("streamlit")
+                            props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
+                            <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 rounded-tl-lg ${ tab === "streamlit" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Streamlit className=" w-20 h-10"/></button>
+                        </li>
+                    </ul>
+                    <div className='absolute right-5 top-5 z-20 mr-5'
+                         onClick={()=>{
+                            props.quitHandeler(false)
+                            props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
+                        <button type="button"
+                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center dark:bg-neutral-700 hover:opacity-70 focus:outline-none">
+                        <Exit className=" w-[20px] h-[20px] text-gray-400 dark:text-white"/>
+                        </button>
+                    </div> 
+                </div>
+                    { tab === "gradio" &&
+                        <div className='w-full bg-white'>
+                        <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                            <li className="" onClick={()=>{
+                                setSubTab(0)
+                                props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
+                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Local</button>
+                            </li>
+                            <li className="" onClick={()=>{
+                                setSubTab(1)
+                                props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
+                            <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300' : '' }  hover:bg-gray-300  `}>Shared</button>
+                            </li>
+                        </ul>
+                        {subTab === 0 && <Local/>}
+                        {subTab === 1 && <Shared type="gradio" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
+
+                        {props.catch && <div className='p-5'>
+                                        <Message floating negative>
+                                        <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 key={"error_1"}>- The input was empty</li>
+                                                    <li key={"error_2"}>- The connection was forbidden</li>
+                                                    <li key={"error_3"}>- The name was already taken</li>
+                                                    <li key={"error_4"}>- The link you gave did not pass the regex</li>
+                                                    <ul className="px-6">
+                                                        <li key={"error_5"}>- http://localhost:xxxx</li>
+                                                        <li key={"error_6"}>- http://xxxxx.gradio.app</li>
+                                                        <li key={"error_7"}>- https://hf.space/embed/$user/$space_name/+</li>
+                                                    </ul>
+                                                    <li>- link already exist within the menu</li>
+                                                </ul>
+                        
+                                        </Message>
+                                        </div>}
+                        </div> 
+                    }
+                    { tab === "streamlit" && 
+                    <div className='w-full bg-white'>
+                        <Shared type="streamlit" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>
+                    </div>
+                    }
+
+                </Modal>
+    </div>)
+}
+
+function Local(props){
+    return (
+        <div className='p-5'>
+        <Message floating>
+            
+            <Message.Header>🏗️ Comming soon...</Message.Header> 
+            <Message.Content className='p-5'>
+            This tab will allow you grab your function from a given directory and build
+            your own tabular module gradio functions
+            </Message.Content>
+
+        </Message>
+        </div>
+    )
+}
+
+function Shared(props){
+    const [preview, setPreview] = useState("")
+    const [fetchable, setFetch] = useState(false)
+
+    const isFetchable = async (url) => {
+        const pattern = {
+            share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
+            hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
+        } 
+
+        if (!pattern.share.test(url) &&
+            !pattern.hugginFace.test(url)){
+                setFetch(false)
+                return
+            }
+
+        
+        fetch(url, {mode : "no-cors"}).then((re) => {
+            console.log(re)
+            if(re.url.includes("http://localhost:3000")){
+                setFetch(false)    
+            } else { 
+                setFetch(true)
+                props.catch ? props.handelError(false) : props.handelError(props.catch)  
+            }
+            
+          }).catch((err)=>{
+            setFetch(false)
+          })
+          setFetch(false)
+        }
+    
+    return (
+        <div className='w-full shadow-lg' onKeyPress={(e)=>{
+            if (e.key.includes("Enter")) props.appendHandler(props.type)
+        }}>
+            <div className='p-5'>
+            <Message floating>            
+                         <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
+                            <label className="relative block w-full p-5 focus:shadow-xl">
+                                <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
+                                    <BsSearch className="block float-left cursor-pointer text-gray-500"/>
+                                </span>
+                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
+                                    placeholder={`URL`}
+                                    type="text" name="search"
+                                    onChange={(e) => {
+                                        props.textHandler(e, "text")
+                                        setPreview(e.target.value)
+                                         setFetch(isFetchable(e.target.value))
+                                    }}
+                                    />
+                            </label>
+                        </div>   
+                        { fetchable === true && <div className=' w-full'>
+                            <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
+                            <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
+                                <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
+                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
+                                </div>
+                            </div>
+                        </div>}
+                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
+                    <label className="relative block p-5 w-full focus:shadow-xl">
+                        <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
+                            <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
+                        </span>
+                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                            placeholder={`Name ( > 20 Characters)` }
+                            type="text" name="search"
+                            autoComplete='off'
+                            onChange={(e) => {
+                                props.textHandler(e, "name")
+                               }}
+                            />
+                    </label>
+                    </div> 
+                    <div className=' right-0 ml-5'>
+                        <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
+                                onClick={()=>{props.appendHandler(props.type)}}>
+                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
+                                Enter
+                            </span>
+                        </button>
+                    </div>
+                </Message>
+                </div>
+                </div>  
+                         
+    )
+}

frontend/components/Navagation/navbar.js

@@ -0,0 +1,242 @@
+import React, { Component } from "react";
+import { Icon } from 'semantic-ui-react'
+import Import from '../Modal/importer'
+import { random_colour, random_emoji } from "../../helper/visual";
+
+import "../../css/dist/output.css"
+
+import {BsArrowLeftShort} from 'react-icons/bs';
+import {ReactComponent as ReactLogo} from '../../images/logo.svg'
+
+export default class Navbar extends Component{
+    constructor(props){
+        super(props) 
+        this.temp_host = 0
+        this.deleteNode = props.onDelete
+        this.state = {
+            open : true,
+            menu : [],
+            colour : props.colour || [],
+            text : "",
+            name : "",
+            emoji : props.emoji || [],
+            mode : false,
+            modal : false,
+            error : false
+           }
+       
+    }
+
+    componentDidMount(){
+        this.fetch_classes()   
+
+    }
+
+    /**
+     *  Asynchronously call the Flask api server every second to check if there exist a gradio application info
+     *  @return null
+     */
+    fetch_classes = async () => {
+        try {
+        setInterval( async () => {
+            await fetch("http://localhost:2000/api/open/ports", { method: 'GET', mode : 'cors',})
+                .then(response => response.json())
+                .then(data => {
+                    this.handelTabs(this.state.menu,data, data)
+                    this.setState({menu : data})
+                })
+                .catch(error => {console.log(error)})
+    
+        },1000);    
+        }catch(e){
+            console.log(e)
+        }
+    }
+
+    /**
+     * Append new node from the user 
+     */
+    appendStreamNode = async (type) => {
+        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+_-]+)\/*([+])?(\/)?$/
+        } 
+
+        if (this.state.name.length > 20 ||
+            this.state.text === ""||
+            this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.text) }) !== -1 ||
+            this.state.text.includes(" ") || 
+            (!pattern.local.test(this.state.text) &&
+            !pattern.share.test(this.state.text) &&
+            !pattern.hugginFace.test(this.state.text))){
+            
+                this.setState({
+                    'text': '',
+                    'name': '',
+                    'error': true})
+                return 
+            } 
+
+        fetch(this.state.text, {method : "GET", mode: 'no-cors'}).then((re) => {
+            fetch("http://localhost:2000/api/append/port", {method: 'POST', mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({file : "", kwargs : { type : type }, name : this.state.name === "" ?`temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0 , host : this.state.text}) }).then(resp => {
+                this.setState({'text': "",'name' : "",'error' : false,'modal' : false  })
+
+            }).catch(() => this.setState({'text': '', 'name' : '',  'error' : true, }))
+          }).catch((err)=> this.setState({'text': '','name' : '', 'error' : true,}))
+    }
+
+    /**
+     * error check the user input
+     * @param {*} bool boolean of the current state of the modal  
+     */
+    handelModal = (bool) => {
+        this.setState({'error' : !bool ? false : this.state.error ,
+                       '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) => {
+        event.dataTransfer.setData('application/reactflow', nodeType);
+        event.dataTransfer.setData('application/style', JSON.stringify({colour : this.state.colour[index], emoji : this.state.emoji[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
+     */
+    handelTabs = async (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.length - e.length === 0) return
+        else if(d.length - e.length < 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.length; k++){
+                c.splice(this.state.menu.indexOf(a[k]), 1)
+                j.splice(this.state.menu.indexOf(a[k]), 1)
+            }
+            this.setState({'colour' : c, 'emoji' : j})
+        }else{
+            //append new colours
+            for(var i =0; i < d.length; i++){
+                    c.push(random_colour(i === 0 ? null : c[i-1]));
+                    j.push(random_emoji(i === 0 ? null : c[i-1]));
+                
+            }
+            const colour = [...this.state.colour]
+            const emoji  = [...this.state.emoji]
+            this.setState({'colour' : [...colour, ...c], 'emoji' : [...emoji, ...j],})
+        }
+    }
+
+    handelError = (boolean) => {
+        this.setState({'error' : boolean})
+    }
+
+    /**
+     * handel navagation open and close function
+     */
+    handelNavbar = () => {
+        this.setState({'open' : !this.state.open})
+    }
+
+    /**
+     * 
+     * @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({[`${type}`] : e.target.value })
+    }
+
+    /**
+     * 
+     * @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(<>
+                <li key={`${index}-li`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
+                    className={` text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
+                                 p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`}  break-all -z-20`} draggable>
+
+                    <div key={`${index}-div`}  className=" absolute -mt-2 text-4xl opacity-60 z-10 ">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</div>    
+                    <h4 key={`${index}-h4`}  className={`  max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20  ${this.state.open ? "" : "hidden"}`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{`${item.name}`} </h4>
+
+                </li >      
+
+        </>)
+    }
+
+
+    render(){
+        
+        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`}> <ReactLogo className="w-9 h-9 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-Retro-purple 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>
+                <Import open={this.state.modal} 
+                        quitHandeler={this.handelModal}
+                        textHandler={this.updateText}
+                        appendHandler={this.appendStreamNode}
+                        handelError={this.handelError}
+                        catch={this.state.error}/>
+                
+                <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/components/Nodes/Custom.js

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useRef, useState } from "react"
+// import { Handle, Position } from "react-flow-renderer"
+import {TbResize} from 'react-icons/tb'
+import {BiCube, BiRefresh} from 'react-icons/bi'
+import {BsTrash} from 'react-icons/bs'
+import {CgLayoutGridSmall} from 'react-icons/cg'
+import {useDrag} from '@use-gesture/react'
+import { useSpring, animated } from 'react-spring'
+
+import '../../css/counter.css'
+
+const MINIMUM_HEIGHT = 600;
+const MINIMUM_WIDTH = 540; 
+
+export default function CustomNodeIframe({id, data}){
+    const [collapsed, setCollapsible] = useState(true)
+    const [{width, height}, api] = useSpring(() => ({width: MINIMUM_WIDTH, height: MINIMUM_HEIGHT }))
+    const [sizeAdjuster, setSizeAdjuster] = useState(false)
+    const [reachable ,setReachable] = useState(false)
+    const [refresh, setRefresh] = useState(0)
+    const dragElement = useRef()
+
+    const bind = useDrag((state) => {
+      const isResizing = (state?.event.target === dragElement.current);
+      if (isResizing) {
+        api.set({
+          width: state.offset[0],
+          height: state.offset[1],
+
+        });
+      } 
+    }, {
+      from: (event) => {
+        const isResizing = (event.target === dragElement.current);
+        if (isResizing) {
+          return [width.get(), height.get()];
+        } 
+      },
+    });
+
+    const isFetchable =useCallback(async () => {
+      return fetch(data.host, {mode: 'no-cors'}).then((res) => {
+        return true
+      }).catch((err)=>{
+        return false
+      })
+    }, [data.host])
+
+    useEffect(() => {
+      const fetched = setInterval(
+        async () => {
+          const fetch = await isFetchable()
+          if (fetch){
+            setReachable(true)
+            clearInterval(fetched)
+          }
+        },1000) 
+    },[isFetchable])
+
+
+    return (
+    <div className="w-10 h-10">
+      
+      <div id={'draggable'}className=" flex w-full h-10 top-0 cursor-pointer" onClick={() => {}}>
+      <div id={'draggable'} title={collapsed ? "Collaspse Node" : "Expand Node"} className=" flex-none duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={() => {setCollapsible((clps) => !clps)}}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
+
+      <div className={` flex ${!collapsed ? '' : '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={() => {setSizeAdjuster((size) => !size)}}><TbResize className="h-full w-full text-white p-1"/></div>
+                      <a href={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={() => {data.delete([{id}])}}><BsTrash className="h-full w-full text-white p-1"/></div>
+                      <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={() => {setRefresh((old) => old++)}}><BiRefresh className="h-full w-full text-white p-1"/></div>
+        </div>
+      </div>
+
+      { !collapsed && reachable && <>
+          <animated.div className={`border-dashed  ${sizeAdjuster ? 'border-4 border-white' : ''} relative top-0 left-0 z-[1000] touch-none shadow-lg rounded-xl`} style={{width, height }} {...bind()}>
+            <div id="draggable" className={`absolute h-full w-full ${data.colour} shadow-2xl rounded-xl -z-20`}></div>
+            <iframe id="iframe" 
+                        key={refresh}
+                        src={data.host} 
+                        title={data.label}
+                        frameBorder="0"
+                        className=" p-[0.6rem] -z-10 h-full w-full ml-auto mr-auto overflow-y-scroll"/>
+              <div className={` ${sizeAdjuster ? '' : 'hidden'} rounded-full border-2 absolute -bottom-4 -right-4 w-7 h-7 bg-Blue-Royal cursor-nwse-resize touch-none shadow-lg`} ref={dragElement}>
+            </div>  
+            </animated.div>
+            </>
+        }
+
+        { collapsed  &&
+              <div id={`draggable`}
+                   className={` w-[340px] h-[140px]  text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
+                                p-5 px-2 rounded-md break-all -z-20 ${data.colour} hover:opacity-70 duration-300`} onClick={() => setCollapsible(collapsed => !collapsed)}>
+                  <div  className="absolute text-6xl opacity-60 z-10 pt-8 ">{data.emoji}</div>    
+                  <h2 className={`max-w-full font-sans text-blue-50 leading-tight font-bold text-3xl flex-1 z-20 pt-10`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{data.label}</h2>
+              </div > 
+        }
+      </div>)
+}

frontend/components/ReactFlow/ReactFlowEnv.js

@@ -0,0 +1,183 @@
+import CustomNodeIframe from "../Nodes/Custom.js";
+import '../../css/dist/output.css'
+import ReactFlow, { Background,
+                    applyNodeChanges,
+                    ReactFlowProvider,
+                    addEdge,
+                    updateEdge,
+                    applyEdgeChanges,
+                    Controls,
+                    MarkerType
+                    } from 'react-flow-renderer';
+import React ,{ useState, useCallback, useRef, useEffect } from 'react';
+import Navbar from '../Navagation/navbar';
+import CustomEdge from '../Edges/Custom'
+import CustomLine from "../Edges/CustomLine.js";
+import { useThemeDetector } from '../../helper/visual'
+import {CgMoreVerticalAlt} from 'react-icons/cg'
+import {BsFillEraserFill} from 'react-icons/bs' 
+import {FaRegSave} from 'react-icons/fa'
+
+const NODE = {
+    custom : CustomNodeIframe,
+  }
+
+const EDGE = {
+    custom : CustomEdge
+}
+
+
+export default function ReactEnviorment() {
+
+    const [theme, setTheme] = useState(useThemeDetector)
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([])
+    const [reactFlowInstance, setReactFlowInstance] = useState(null);
+    const reactFlowWrapper = useRef(null);
+    const [tool, setTool] = useState(false)
+
+    const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
+    const deleteEdge = useCallback((id) => setEdges((eds) => eds.filter(e => e.id !== id)), [setEdges])
+    const deleteNode = useCallback((id) =>{
+      setNodes(() => nodes.filter(n => n.id !== id ))
+    }, [setNodes, nodes])
+
+
+    useEffect(() => {
+      const restore = () => {
+      const flow = JSON.parse(localStorage.getItem('flowkey'));
+        
+        if(flow){
+          flow.nodes.map((nds) => nds.data.delete = deleteNode)
+          flow.edges.map((eds) => eds.data.delete = deleteEdge)
+          setNodes(flow.nodes || [])
+          setEdges(flow.edges || [])
+          console.log(flow)
+        }
+      }
+      restore()
+    },[deleteNode, deleteEdge])
+
+
+
+    const onNodesChange = useCallback(
+      (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+      [setNodes]
+    );
+  
+    const onEdgesChange = useCallback(
+      (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+      [setEdges]
+    );
+
+    const onEdgeUpdate = useCallback(
+      (oldEdge, newConnection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
+      []
+    );
+
+    const onConnect = useCallback(
+      (params) => {
+        console.log(params)
+        setEdges((els) => addEdge({...params, type: "custom", animated : true, style : {stroke : "#00FF4A", strokeWidth : "6"}, markerEnd: {type: MarkerType.ArrowClosed, color : "#00FF4A"}, data : { delete : deleteEdge}}, els))
+        fetch("http://localhost:2000/api/append/connection", {method : "POST", mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({"source": params.source, "target" : params.target})}).then( res => {
+          console.log(res)
+        }).catch(error => {
+          console.log(error)
+        })
+      },
+      [setEdges, deleteEdge]
+    );
+
+
+  
+    const onDragOver = useCallback((event) => {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    }, []);
+
+
+    const onSave = useCallback(() => {
+      if (reactFlowInstance) {
+        const flow = reactFlowInstance.toObject();
+        alert("The current nodes have been saved into the localstorage 💾")
+        localStorage.setItem('flowkey', JSON.stringify(flow));
+        var labels = [];
+        var colour = [];
+        var emoji = [];
+          for(let i = 0; i < flow.nodes.length; i++){
+            if (!labels.includes(flow.nodes[i].data.label))
+              colour.push(flow.nodes[i].data.colour)
+              emoji.push(flow.nodes[i].data.emoji)
+              labels.push(flow.nodes[i].data.label)
+          }
+        localStorage.setItem('colour',JSON.stringify(colour))
+        localStorage.setItem('emoji', JSON.stringify(emoji))
+      }
+    }, [reactFlowInstance]);
+
+    const onErase = useCallback(() => {
+      const flow = localStorage.getItem("flowkey")
+      if (reactFlowInstance && flow){
+        alert("The current nodes have been erased from the localstorage")
+        localStorage.removeItem("flowkey")
+        localStorage.removeItem('colour')
+        localStorage.removeItem('emoji')
+      }
+    },[reactFlowInstance])
+
+
+    const onDrop = useCallback(
+      (event) => {
+        event.preventDefault();
+
+        if(event.dataTransfer.getData('application/reactflow')  !== ""){
+          const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
+          const type = event.dataTransfer.getData('application/reactflow');
+          const item  = JSON.parse(event.dataTransfer.getData('application/item'));
+          const style = JSON.parse(event.dataTransfer.getData('application/style'));
+          // 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: `${item.name}-${nodes.length+1}`,
+            type,
+            position,
+            dragHandle : `#draggable`,
+            data: { label: `${item.name}`, host : `${item.host}`, colour : `${style.colour}`, emoji : `${style.emoji}`, delete : deleteNode },
+          };
+
+          setNodes((nds) => nds.concat(newNode));
+      }
+      },
+      [reactFlowInstance, nodes, deleteNode]);
+
+    return (
+      <div className={`${theme ? "dark" : ""}`}>          
+        <div className={` absolute text-center ${tool ? "h-[203.3333px]" : "h-[41px]"} overflow-hidden w-[41px] text-4xl top-4 right-5 z-50 cursor-default select-none bg-white dark:bg-stone-900 rounded-full border border-black dark:border-white duration-500`}  >
+          <CgMoreVerticalAlt className={` text-black dark:text-white ${tool ? "-rotate-0 mr-auto ml-auto mt-1" : " rotate-180 mr-auto ml-auto mt-1"} duration-300`} onClick={() => setTool(!tool)}/>
+          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`p-4 px-1 pb-0 ${tool ? "visible" : "invisible"} text-3xl`} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
+          <FaRegSave title="Save" className={`mt-6 text-black dark:text-white ${tool ? "visible" : " invisible"} ml-auto mr-auto `} onClick={() => onSave()}/> 
+          <BsFillEraserFill title="Erase" className={`mt-6 text-black dark:text-white ml-auto mr-auto ${tool ? "visible" : " invisible"} `} onClick={() => onErase()}/>
+        </div>
+        <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
+          <ReactFlowProvider>
+          <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
+            <div className="h-screen w-screen" ref={reactFlowWrapper}>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={NODE} edgeTypes={EDGE} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance} connectionLineComponent={CustomLine} fitView>
+                <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
+                <Controls/>
+              </ReactFlow>
+            </div>
+          </ReactFlowProvider>
+        </div>
+      </div>
+    );
+  }
+