refactor 🚧

frontend/src/components/Modal/importer.js

@@ -9,7 +9,7 @@ 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
@@ -19,15 +19,21 @@ export default function Import(props){
             >
                 <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")}}>
+                        <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")}}>
+                        <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)}}>
+                         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"/>
@@ -37,15 +43,19 @@ export default function Import(props){
                     { 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)}}>
+                            <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)}}>
+                            <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 textHandler={props.textHandler} appendHandler={props.appendHandler} />}
+                        {subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
 
                         {props.catch && <div className='p-5'>
                                         <Message floating negative>
@@ -94,12 +104,26 @@ function Shared(props){
     const [fetchable, setFetch] = useState(false)
 
     const isFetchable = async (url) => {
-        console.log(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) }
+            } else { 
+                setFetch(true)
+                props.catch ? props.handelError(false) : props.handelError(props.catch)  
+            }
             
           }).catch((err)=>{
             setFetch(false)
@@ -143,7 +167,7 @@ function Shared(props){
                             <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` }
+                            placeholder={`Name ( > 20 Characters)` }
                             type="text" name="search"
                             autoComplete='off'
                             onChange={(e) => {

frontend/src/components/Navagation/navbar.js

@@ -62,7 +62,9 @@ export default class Navbar extends Component{
             hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
         } 
 
-        if (this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.text) }) !== -1 ||
+        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) &&
@@ -154,6 +156,10 @@ export default class Navbar extends Component{
         }
     }
 
+    handelError = (boolean) => {
+        this.setState({'error' : boolean})
+    }
+
     /**
      * handel navagation open and close function
      */
@@ -213,6 +219,7 @@ export default class Navbar extends Component{
                         quitHandeler={this.handelModal}
                         textHandler={this.updateText}
                         appendHandler={this.append_gradio}
+                        handelError={this.handelError}
                         catch={this.state.error}/>
                 
                 <div className=" relative z-10 h-auto overflow-auto pt-4">
@@ -231,7 +238,3 @@ export default class Navbar extends Component{
         </div>)
     }
 }
-
-/**
- *                 
- * **/

frontend/src/components/Nodes/Custom.js

@@ -31,11 +31,11 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     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, iframe : this.state.iframe})
+      this.setState({'selected' : !this.state.selected})
     }
 
     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, iframe : this.state.iframe})
+        this.setState({'size' : !this.state.size})
       }
 
     isFetchable = async (host) => {
@@ -57,18 +57,18 @@ export default class CustomNodeIframe extends React.Component {
       if(!this.isFetchable(this.state.data.host)){ 
         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})
+        this.setState({'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, 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` 
+      this.setState({[`${type}`] : parseInt(evt.target.value) })
+      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, iframe : this.state.iframe })
+        this.setState({[`${change}`] :  change === "width" ? this.state.width + increment : this.state.height + increment })
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
@@ -95,21 +95,19 @@ export default class CustomNodeIframe extends React.Component {
         height = this.original_height + (e.clientY - this.original_mouse_y)
         if (width > MINIMUM_WIDTH) {
           this.myRef.current.style.width = `${width}px`
-          this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
+          this.setState({'width' :  parseInt(width) , 'height' : parseInt(height)})
 
         }
         if (height > MINIMUM_HEIGHT) {
           this.myRef.current.style.height = `${height}px`
-          this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
+          this.setState({'width' :  parseInt(width) , 'height' : parseInt(height)})
 
         }
       } 
     }
 
     OnDragEnd = () => {
-      console.log("end")
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : parseInt(this.myRef.current.style.width), height : parseInt(this.myRef.current.style.height), size : this.state.size, iframe : this.state.iframe})
-      
+      this.setState({'width' : parseInt(this.myRef.current.offsetWidth), 'height' : parseInt(this.myRef.current.offsetHeight)})
     }
 
     Counter(focus, size){
@@ -160,7 +158,7 @@ export default class CustomNodeIframe extends React.Component {
                         sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
                         ></iframe>
                   </div>
-                  { this.state.size && <>
+                  { this.state.size && !navigator.userAgent.match(/firefox|fxios/i)  && <>
                   
                   <div id="remove-ghost" className={`absolute select-none -bottom-0 right-0 w-5 h-5border-2 shadow-2xl rounded-xl z-10 cursor-nwse-resize hover:opacity-50  `}
                        style={{"userDrag": "none"}} 

frontend/src/css/dist/output.css

@@ -888,6 +888,18 @@ video {
   height: 2rem;
 }
 
+.h-\[500px\] {
+  height: 500px;
+}
+
+.h-\[300px\] {
+  height: 300px;
+}
+
+.h-\[350px\] {
+  height: 350px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -940,6 +952,10 @@ video {
   width: 100vw;
 }
 
+.w-\[80\%\] {
+  width: 80%;
+}
+
 .max-w-full {
   max-width: 100%;
 }

frontend/src/css/index.css

@@ -11,3 +11,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}