updates ⚒️

README.md

@@ -41,6 +41,56 @@ stream both [gradio](https://gradio.app) ( and later [streamlit](https://streaml
      - [**Run Gradio within Gradio-Flow**](#5-run-gradio-within-gradio-flow)
  
  - [**Application**](#application-%EF%B8%8F)
+
+## Updates ⚒️
+### Backend 💽
+- ``__init__`` function takes inputs within class wrapper
+- better determine registered functions within classes
+- more examples located in the ``backend/src/example``
+    - just import and launch or run them within the demoE.py file in ``backend/src``
+- launch interface functions that takes the interface and appends it within the gradio-flow so if it's (load, from_pipline, Block, or any other prebuilt interface you have you can append them into Gradio-Flow)
+
+### Frontend 🖥️
+- no new updates
+
+```python
+def InterLauncher(name, interface, listen=2000, **kwargs):
+    port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
+    print(listen)
+    try:
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{listen}/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : {name}, "name" : "Not Applicable", "kwargs" : kwargs})
+    except Exception as e:
+        print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛 \n {e}")
+        return
+
+    interface.launch(server_port=port,
+                     server_name=f"{DOCKER_LOCAL_HOST}",
+                     inline= kwargs['inline'] if "inline" in kwargs else True,
+                     share=kwargs['share'] if "share" in kwargs else None,
+                     debug=kwargs['debug'] if "debug" in kwargs else False,
+                     enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
+                     max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                     auth=kwargs['auth'] if "auth" in kwargs else None,
+                     auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
+                     prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
+                     show_error=kwargs['show_error'] if "show_error" in kwargs else True,
+                     show_tips=kwargs['show_tips'] if "show_tips" in kwargs else False,
+                     height=kwargs['height'] if "height" in kwargs else 500,
+                     width=kwargs['width'] if "width" in kwargs else 900,
+                     encrypt=kwargs['encrypt'] if "encrypt" in kwargs else False,
+                     favicon_path=kwargs['favicon_path'] if "favicon_path" in kwargs else None,
+                     ssl_keyfile=kwargs['ssl_keyfile'] if "ssl_keyfile" in kwargs else None,
+                     ssl_certfile=kwargs['ssl_certfile'] if "ssl_certfile" in kwargs else None,
+                     ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
+                     quiet=kwargs['quiet'] if "quiet" in kwargs else False)
+    
+    try:
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{ 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}")
+```
+
+
  ## App Architecture 🏗️
 ![architecture](https://github.com/commune-ai/Gradio-Flow/blob/gradio-flow/gradio-only/architecture.png)
  

backend/.gitignore

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

backend/src/demoC.py

@@ -1,4 +1,5 @@
-from resources import GradioModule, register
+from resources import GradioModule, register, InterLauncher
+import gradio as gr
 
 @GradioModule
 class Greeting:
@@ -14,8 +15,8 @@ class Greeting:
 
 if __name__ == "__main__":
     # run just gradio
-    Greeting().launch()
+    # Greeting().launch()
     # run it within Gradio-flow
-    # Greeting().launch(listen=2000)
+    Greeting().launch(listen=2000)
 
     

backend/src/demoE.py

@@ -0,0 +1,3 @@
+from example.examples import Pictionary, FSD, HelloWorld_2_0, stock_forecast
+
+Pictionary("./example/data/labels.txt", "./example/data/pytorch_model.bin").launch(live=True, listen=2000, port=3002)

backend/src/demoF.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from resources import register, tabularGradio
+from example.examples import FSD, Pictionary
 
 @register(["text"], ["text"], examples=[["Luca Vivona"]])
 def Hello_World(name):
@@ -11,6 +12,7 @@ def add(x, y):
 
 if __name__ == "__main__":
     # run single gradio
+    
     tabularGradio([Hello_World(), add()], ["Hello World", "Add"])
 
     # run it within Gradio-Flow

backend/src/demoL.py

@@ -0,0 +1,8 @@
+from resources import GradioModule, register, InterLauncher
+import gradio as gr
+
+if __name__ == "__main__":
+    description = "Story generation with GPT"
+    examples = [["An adventurer is approached by a mysterious stranger in the tavern for a new quest."]]
+    demo = gr.Interface.load("models/EleutherAI/gpt-neo-1.3B", description=description, examples=examples)
+    InterLauncher("Demo", demo, listen=2000)

backend/src/example/data/labels.txt

@@ -0,0 +1,100 @@
+airplane
+alarm_clock
+anvil
+apple
+axe
+baseball
+baseball_bat
+basketball
+beard
+bed
+bench
+bicycle
+bird
+book
+bread
+bridge
+broom
+butterfly
+camera
+candle
+car
+cat
+ceiling_fan
+cell_phone
+chair
+circle
+clock
+cloud
+coffee_cup
+cookie
+cup
+diving_board
+donut
+door
+drums
+dumbbell
+envelope
+eye
+eyeglasses
+face
+fan
+flower
+frying_pan
+grapes
+hammer
+hat
+headphones
+helmet
+hot_dog
+ice_cream
+key
+knife
+ladder
+laptop
+light_bulb
+lightning
+line
+lollipop
+microphone
+moon
+mountain
+moustache
+mushroom
+pants
+paper_clip
+pencil
+pillow
+pizza
+power_outlet
+radio
+rainbow
+rifle
+saw
+scissors
+screwdriver
+shorts
+shovel
+smiley_face
+snake
+sock
+spider
+spoon
+square
+star
+stop_sign
+suitcase
+sun
+sword
+syringe
+t-shirt
+table
+tennis_racquet
+tent
+tooth
+traffic_light
+tree
+triangle
+umbrella
+wheel
+wristwatch

backend/src/example/data/pytorch_model.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:effb6ea6f1593c09e8247944028ed9c309b5ff1cef82ba38b822bee2ca4d0f3c
+size 1656903

backend/src/example/examples.py

@@ -1,19 +1,23 @@
 import gradio as gr
+import sys
 import matplotlib
 import matplotlib.pyplot as plt
+from pathlib import Path
+import torch
+from torch import nn
 import numpy as np
 import PIL
-from helper.compiler import GradioCompiler, register
 
+sys.path.insert(0, "../resources")
+from resources.module import GradioModule, register
 
 
-"""
-@gradio_compile
+@GradioModule
 class Pictionary:
 
-    def __init__(self) -> None:
-        self.LABELS = Path('./src/examples/data/labels.txt').read_text().splitlines()
-    
+    def __init__(self, txt, model) -> None:
+        self.LABELS = Path(txt).read_text().splitlines()
+        print(txt, model)
         self.model = nn.Sequential(
                 nn.Conv2d(1, 32, 3, padding='same'),
                 nn.ReLU(),
@@ -29,11 +33,11 @@ class Pictionary:
                 nn.ReLU(),
                 nn.Linear(256, len(self.LABELS)),
                 )   
-        state_dict = torch.load('./src/examples/data/pytorch_model.bin',    map_location='cpu')
+        state_dict = torch.load(model,    map_location='cpu')
         self.model.load_state_dict(state_dict, strict=False)
         self.model.eval()
 
-    @register(inputs="sketchpad", outputs=gr.Label())
+    @register(inputs="sketchpad", outputs=gr.Label(), examples=None, live=True)
     def perdict(self, img) -> 'dict[str, float]':
         if type(img) == type(None): return {}
         x = torch.tensor(img, dtype=torch.float32).unsqueeze(0).unsqueeze(0) / 255.
@@ -43,9 +47,8 @@ class Pictionary:
         values, indices = torch.topk(probabilities, 5)
         confidences = {self.LABELS[i]: v.item() for i, v in zip(indices, values)}
         return confidences
-"""
 
-@GradioCompiler
+@GradioModule
 class HelloWorld_2_0:
 
     @register(inputs=["text", "text", gr.Radio(["morning", "evening", "night"])], outputs="text")
@@ -65,14 +68,14 @@ class HelloWorld_2_0:
 
 
 
-@GradioCompiler
+@GradioModule
 class FSD:
 
     def get_new_val(self, old_val, nc):
         return np.round(old_val * (nc - 1)) / (nc - 1)
 
 
-    def palette_reduce(self, img : PIL.Image.Image, nc : 'tuple[float, float, float]'=(0.0000, 0, 16)):
+    def palette_reduce(self, img : PIL.Image.Image, nc):
         pixels = np.array(img, dtype=float) / 255
         pixels = self.get_new_val(pixels, nc)
 
@@ -80,7 +83,7 @@ class FSD:
         return PIL.Image.fromarray(carr)
 
     @register(inputs=[gr.Image(), gr.Slider(0.00, 16)], outputs=gr.Gallery())
-    def Floyd_Steinberg_dithering(self, img, nc : 'tuple[float, float, float]'=(0.0000, 0, 16) ) -> 'list[PIL.Image.Image]':
+    def Floyd_Steinberg_dithering(self, img, nc  ):
         pixels = np.array(img, dtype=float) / 255
         new_height, new_width, _ = img.shape 
         for row in range(new_height):
@@ -100,19 +103,7 @@ class FSD:
         carr = np.array(pixels / np.max(pixels, axis=(0, 1)) * 255, dtype=np.uint8)
         return [PIL.Image.fromarray(carr), self.palette_reduce(img, nc) ]
 
-
-
-@GradioCompiler
-class C:
-
-    def Hello(self):
-        return "Hello"
-    
-    @register(inputs="text", outputs="text")
-    def Greeting(self, name):
-        return self.Hello() + " " + name
-
-@GradioCompiler
+@GradioModule
 class stock_forecast:
     
     def __init__(self):

backend/src/resources/module.py

@@ -9,7 +9,7 @@ class Dock:
 
     def __init__(self) -> None:
             self.num_ports = 20
-            self.port_range = (7860, 7880)
+            self.port_range = (3002, 8000)
 
     def portConnection(self, port : int):
             s = socket.socket(
@@ -18,10 +18,11 @@ class Dock:
             if result == 0: return True
             return False
 
-    def determinePort(self, max_trial_count=10):
+    def determinePort(self, max_trial_count=20):
             trial_count = 0 
             while trial_count <= max_trial_count:
                 port=random.randint(*self.port_range)
+                print(port)
                 if not self.portConnection(port):
                     return port
                 trial_count += 1
@@ -31,6 +32,41 @@ class Dock:
 DOCKER_LOCAL_HOST = '0.0.0.0'
 DOCKER_PORT = Dock()
 
+def InterLauncher(name, interface, listen=2000, **kwargs):
+    port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
+    print(listen)
+    try:
+        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:
+        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
+
+    interface.launch(server_port=port,
+                     server_name=f"{DOCKER_LOCAL_HOST}",
+                     inline= kwargs['inline'] if "inline" in kwargs else True,
+                     share=kwargs['share'] if "share" in kwargs else None,
+                     debug=kwargs['debug'] if "debug" in kwargs else False,
+                     enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
+                     max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                     auth=kwargs['auth'] if "auth" in kwargs else None,
+                     auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
+                     prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
+                     show_error=kwargs['show_error'] if "show_error" in kwargs else True,
+                     show_tips=kwargs['show_tips'] if "show_tips" in kwargs else False,
+                     height=kwargs['height'] if "height" in kwargs else 500,
+                     width=kwargs['width'] if "width" in kwargs else 900,
+                     encrypt=kwargs['encrypt'] if "encrypt" in kwargs else False,
+                     favicon_path=kwargs['favicon_path'] if "favicon_path" in kwargs else None,
+                     ssl_keyfile=kwargs['ssl_keyfile'] if "ssl_keyfile" in kwargs else None,
+                     ssl_certfile=kwargs['ssl_certfile'] if "ssl_certfile" in kwargs else None,
+                     ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
+                     quiet=kwargs['quiet'] if "quiet" in kwargs else False)
+    
+    try:
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{ 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}")
+
 def tabularGradio(funcs, names, name="Tabular Temp Name", **kwargs):
     """
     takes all gradio Interfaces, and names
@@ -153,14 +189,15 @@ def register(inputs, outputs, examples=None, **kwargs):
                                     allow_flagging=kwargs['allow_flagging'] if "allow_flagging" in kwargs else None,
                                     theme='default', 
                                     )
+        decorator.__decorator__ = "__gradio__"
         return decorator
     return register_gradio
 
 def GradioModule(cls):
     class Decorator:
 
-        def __init__(self) -> None:
-            self.__cls__ = cls()
+        def __init__(self, *args, **kwargs) -> None:
+            self.__cls__ = cls(*args, **kwargs)
             self.__get_funcs_attr()
             self.interface = self.__compile()
         
@@ -175,7 +212,9 @@ def GradioModule(cls):
         def __get_funcs_attr(self):
             for func in dir(self.__cls__):
                 fn = getattr(self.__cls__, func, None)
-                if not func.startswith("__") and fn.__name__ == "decorator":
+                
+                if callable(fn) and not func.startswith("__") and  "__decorator__" in dir(fn) and fn.__decorator__ == "__gradio__":
+                    print(func,  callable(fn))
                     fn()
 
         def __compile(self):

frontend/public/index.html

@@ -35,7 +35,27 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="Gradio-Flow"></div>
+    <script>
+    var frame = document.getElementById("Iframe");
+
+    frame.onload = function()
+      // function execute while load the iframe
+        
+      {
+        // set the height of the iframe as 
+        // the height of the iframe content
+        frame.style.height = 
+        frame.contentWindow.document.body.scrollHeight + 'px';
+        console.log(frame.contentWindow.document.body.scrollHeight)  
+
+      // set the width of the iframe as the 
+      // width of the iframe content
+      frame.style.width  = 
+        frame.contentWindow.document.body.scrollWidth+'px';
+            
+        }
+    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

frontend/src/Components/Navagation/navbar.js

@@ -202,7 +202,7 @@ export default class Navbar extends Component{
                 </div>
 
                 <div className={`rounded-md text-center ${this.state.open ? "" : "px-0"} py-3`} onClick={() => {this.handelModal(true)}}>
-                    <div className={` text-center bg-transparent w-full h-10 border border-slate-300 hover:border-sky-500 hover:animate-pulse border-dashed rounded-md py-2 pl-5 ${this.state.open ? "pr-3" : "hidden"} shadow-sm sm:text-sm`}>
+                    <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>

frontend/src/Components/Nodes/custom.js

@@ -22,14 +22,15 @@ import React from "react"
     render(){
       
       console.log(this.state.reachable)
+      var frame = document.getElementById("Iframe");
 
       return (
         <>
         { this.state.selected && this.state.reachable ? 
-        <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0' onClick={()=>this.handelSelected()}>
-          <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-10`}></div>
-          <iframe src={this.state.data.host} title={this.state.data.label} frameBorder={0} allowFullScreen className=" h-full w-full p-2 overflow-y-scroll"></iframe>
-        </div> :
+                <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0' onClick={()=>this.handelSelected()}>
+                <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-10`}></div>
+                <iframe src={this.state.data.host} title={this.state.data.label} frameBorder={0} allowFullScreen className=" h-full w-full p-2 overflow-y-scroll"></iframe>
+              </div>:
         <>
         <div className='break-words'> 
           <div className=' h-auto text-center pointer-events-none'>  

frontend/src/Components/ReactFlow/ReactFlowEnv.js

@@ -71,8 +71,8 @@ export default function ReactEnviorment() {
 
     return (
       <>          
-        <div className=' absolute top-4 right-5 z-50' >
-          <h1 className='text-3xl' onClick={()=> setTheme(theme === "" ? "dark" : "")}>{theme === "dark"  ? '🌙' : '☀️'}</h1>  
+        <div className=' absolute top-4 right-5 z-50' onClick={()=> setTheme(theme === "" ? "dark" : "")}>
+          <h1 className='text-4xl' >{theme === "dark"  ? '🌙' : '☀️'}</h1>  
         </div>
         <div className={`flex h-screen w-screen ${theme} transition-all`}>
           <Navbar/>

frontend/src/css/dist/output.css

@@ -570,14 +570,6 @@ video {
   bottom: 0px;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
-.right-5 {
-  right: 1.25rem;
-}
-
 .-right-3 {
   right: -0.75rem;
 }
@@ -594,14 +586,26 @@ video {
   bottom: 0px;
 }
 
-.z-50 {
-  z-index: 50;
+.top-0 {
+  top: 0px;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.right-5 {
+  right: 1.25rem;
 }
 
 .z-10 {
   z-index: 10;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -666,14 +670,26 @@ video {
   height: auto;
 }
 
-.h-\[540px\] {
-  height: 540px;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-\[95\%\] {
+  height: 95%;
+}
+
+.h-\[500px\] {
+  height: 500px;
+}
+
+.h-\[300px\] {
+  height: 300px;
+}
+
+.h-\[540px\] {
+  height: 540px;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -682,14 +698,30 @@ video {
   width: 100%;
 }
 
-.w-\[600px\] {
-  width: 600px;
+.w-\[1000px\] {
+  width: 1000px;
+}
+
+.w-\[95\%\] {
+  width: 95%;
 }
 
 .w-screen {
   width: 100vw;
 }
 
+.w-\[900px\] {
+  width: 900px;
+}
+
+.w-\[800px\] {
+  width: 800px;
+}
+
+.w-\[600px\] {
+  width: 600px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -704,6 +736,10 @@ video {
   cursor: pointer;
 }
 
+.resize {
+  resize: both;
+}
+
 .items-center {
   align-items: center;
 }
@@ -748,6 +784,10 @@ video {
   border-style: dashed;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -900,6 +940,14 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-\[56\.25\%\] {
+  padding-top: 56.25%;
+}
+
+.pt-\[57\.25\%\] {
+  padding-top: 57.25%;
+}
+
 .text-left {
   text-align: left;
 }
@@ -912,11 +960,6 @@ video {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -932,11 +975,26 @@ video {
   line-height: 1.5rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1026,6 +1084,16 @@ video {
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
 }
 
+.hover\:border-Retro-purple:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(151 0 204 / var(--tw-border-opacity));
+}
+
+.hover\:border-l-Retro-purple:hover {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(151 0 204 / var(--tw-border-opacity));
+}
+
 .focus\:border-sky-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
@@ -1077,14 +1145,6 @@ video {
     width: 15rem;
   }
 
-  .sm\:w-\[250pxs\] {
-    width: 250pxs;
-  }
-
-  .sm\:w-\[250px\] {
-    width: 250px;
-  }
-
   .sm\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

frontend/src/css/iframe.css

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

frontend/src/index.js

@@ -5,7 +5,7 @@ import App from './App';
 //import Navbar from './Components/Navagation/navbar';
 import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('Gradio-Flow'));
 root.render(
   <React.StrictMode>
     < App/>