frontend/require 🎨

backend/requirements.txt

@@ -33,7 +33,7 @@ kiwisolver==1.4.4
 linkify-it-py==1.0.3
 markdown-it-py==2.1.0
 MarkupSafe==2.1.1
-#matplotlib==3.5.2
+matplotlib==3.5.2
 mdit-py-plugins==0.3.0
 mdurl==0.1.1
 monotonic==1.6
@@ -41,7 +41,7 @@ multidict==6.0.2
 numpy==1.23.1
 orjson==3.7.8
 packaging==21.3
-#pandas==1.4.3
+pandas==1.4.3
 paramiko==2.11.0
 Pillow==9.2.0
 pycparser==2.21

frontend/src/Components/Navagation/navbar.js

@@ -174,7 +174,7 @@ export default class Navbar extends Component{
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
                     className={` text-white text-md flex text-center items-center cursor-pointer shadow-lg
-                                 p-7 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>
+                                 p-5 px-2 mt-4 ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} rounded-md mt-2 cursor-grabbing`} 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 >      
@@ -204,13 +204,13 @@ export default class Navbar extends Component{
                     open={this.state.modal}
                     size='small'
                 >
-                <Header icon>
+                <Header className="select-none space-y-4" icon>
                     🌐 
                     <br/>
                     Append Shared Gradio Hosts 
                 </Header>
                 <Modal.Content>
-                <div className=" text-center">Host other HugginFace Models or Gradio application via shared lin</div>
+                <div className=" text-center select-none">Host other HugginFace Models or Gradio application via shared lin</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`}>

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

@@ -1,6 +1,6 @@
 import React from "react"
 
-  export default class CustomNodeIframe extends React.Component {
+export default class CustomNodeIframe extends React.Component {
     constructor({data}){
       super()
       this.myRef = React.createRef()
@@ -17,24 +17,41 @@ import React from "react"
       }).catch(()=>{
         this.setState({reachable : false, selected : !this.state.selected, data : this.state.data})
       })
-      //>
+    }
+
+    handelEvent = (e) => {
+      console.log(e.type)
+      if(e.type === "mousedown"){
+        console.log("down")
+      }
+      else {
+        console.log("up")
+      }
+
 
     }
+
+
     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 
+                <>
+                <div className="w-full h-10 top-0 hover:bg-black" onClick={this.handelEvent} onMouseDown={this.handelEvent} onMouseUp={this.handelEvent}>
+                  
+                </div>               
+
+                <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0 shadow-2xl' onClick={()=>this.handelSelected()}>
+                  <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
+                  <iframe 
                       id="iframe"
                       ref={this.myRef} 
                       src={this.state.data.host} 
                       title={this.state.data.label} 
-                      frameBorder="0" class="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>:
+                      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>
+                </> :
         <>
         <div className='break-words'> 
           <div className=' h-auto text-center pointer-events-none'>  

frontend/src/Components/ReactFlow/ReactFlowEnv.js

@@ -1,4 +1,4 @@
-import CustomNodeIframe from "../Nodes/custom";
+import CustomNodeIframe from "../Nodes/Custom.js";
 import '../../css/dist/output.css'
 import '../../css/CustomNode.css'
 import ReactFlow, { Background,
@@ -7,7 +7,7 @@ import ReactFlow, { Background,
                     ReactFlowProvider,
                     } from 'react-flow-renderer';
 import React ,{ useState, useCallback, useRef } from 'react';
-import Navbar from '../Navagation/Navbar';
+import Navbar from '../Navagation/navbar';
 import { useThemeDetector } from '../../helper/visual'
  
 const types = {
@@ -16,12 +16,12 @@ 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);
-  
+    console.log("theme",theme)
   
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
@@ -71,10 +71,10 @@ export default function ReactEnviorment() {
 
     return (
       <>          
-        <div className=' absolute top-4 right-5 z-50' onClick={()=> setTheme(theme === "" ? "dark" : "")}>
-          <h1 className='text-4xl' >{theme === "dark"  ? '🌙' : '☀️'}</h1>  
+        <div className=' absolute top-4 right-5 z-50' onClick={()=> setTheme(theme ? "dark" : "")}>
+          <h1 className='text-4xl select-none' >{theme  ? '🌙' : '☀️'}</h1>  
         </div>
-        <div className={`flex h-screen w-screen ${theme} transition-all`}>
+        <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>
           <Navbar/>
           <ReactFlowProvider>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>

frontend/src/css/dist/output.css

@@ -628,6 +628,10 @@ video {
   right: 1.25rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -636,10 +640,22 @@ video {
   z-index: -10;
 }
 
+.-z-0 {
+  z-index: 0;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.-z-20 {
+  z-index: -20;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
 .float-left {
   float: left;
 }
@@ -712,6 +728,10 @@ video {
   height: 100%;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -750,10 +770,33 @@ video {
   cursor: pointer;
 }
 
+.cursor-s-resize {
+  cursor: s-resize;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}
+
+.select-none {
+  -webkit-user-select: none;
+          user-select: none;
+}
+
 .items-center {
   align-items: center;
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -822,6 +865,11 @@ video {
   background-color: rgba(255,255,255, 0.18);
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1167,6 +1215,11 @@ video {
   border-color: rgb(151 0 204 / var(--tw-border-opacity));
 }
 
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .focus\:border-sky-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(14 165 233 / var(--tw-border-opacity));