more updates 🧑‍🚀🚀

README.md

@@ -136,8 +136,8 @@ Now that you're within the docker backend container environment you can start ad
 #### **3.** Appending Nodes To Frontend From The Backend
 
 ```console
-> cd ./src
-> python demoC.py
+> cd ./src/demo
+> python demo.py -l 2000
 //run example gradio application
 ```
 
@@ -169,13 +169,13 @@ It is quite simple, and similar within the docker build, the first way you can a
 **NOTE** If you use the gradio decorator compiler for gradio flow you need to set a listen port to 2000 or else the api will never get the key and will throw you an error, I'll also provided an example below if this isn't clear.
 
 ```python
-#backend/src/demoF.py (functional base)
+# (functional base)
 ##########
 from resources import register, tabularGradio
 
 @register(["text"], ["text"], examples=[["Luca Vivona"]])
 def Hello_World(name):
-        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+        return f"👋 Hello {name}, and welcome to Gradio Flow 🤗" 
 
 @register(inputs=["number", "number"], outputs=["number"], examples=[[1,1]])
 def add(x, y):
@@ -183,15 +183,15 @@ def add(x, y):
 
 if __name__ == "__main__":
     # run single gradio
-    tabularGradio([Hello_World(), add()], ["Hello World", "Add"])
+    tabularGradio([Hello_World, add])  # tabularGradio([Hello_World, add], ["Hello World", "Add"])
 
     # run it within Gradio-Flow
-    # tabularGradio([Hello_World(), add()], ["Hello World", "Add"], listen=2000)
+    # tabularGradio([Hello_World, add], ["Hello World", "Add"], listen=2000) # tabularGradio([Hello_World, add], ["Hello World", "Add"], listen=2000)
     
 ```
 
 ```python
-#backend/src/demoC.py (Class Base)
+#(Class Base)
 ###########
 from resources import GradioModule, register
 
@@ -200,7 +200,7 @@ class Greeting:
 
     @register(["text"], ["text"], examples=[["Luca Vivona"]])
     def Hello_World(self, name):
-        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
+        return f"👋 Hello {name}, and welcome to Gradio Flow 🤗" 
 
     @register(inputs=["number", "number"], outputs=["number"], examples=[[1,1]])
     def add(self, x, y):
@@ -212,7 +212,18 @@ if __name__ == "__main__":
     Greeting().launch()
     # run it within Gradio-flow
     # Greeting().launch(listen=2000)
-```` 
+```
+
+# More Demos ➕
+Within the ``backend/src/demo`` directory there are some demos
+```command
+# type : class | function | load | None
+# port : 2000 | None 
+# python demo.py -e [type] -l [port]
+(e.g)
+> python demo.py -e class -l 2000
+> python demo.py -e class
+```
 ## Application 🏛️
 ![Dark-Application](https://github.com/LVivona/Gradio-Flow/blob/8edde72f878c174f53602c4ddff0fc6d3fc7cd61/images/app.png)
 ![Light-Application](https://github.com/LVivona/Gradio-Flow/blob/8edde72f878c174f53602c4ddff0fc6d3fc7cd61/images/light-app.png)

backend/src/demo/demo.py

@@ -0,0 +1,46 @@
+import argparse
+import sys
+
+sys.path.insert(0, "../")
+from resources import GradioModule, register, InterLauncher, tabularGradio
+from example.examples import Pictionary
+
+import gradio as gr
+
+parser = argparse.ArgumentParser()
+parser.add_argument("-e", "--examples", help="Examples made to show how to append it your own functon or classes", default="")
+parser.add_argument("-l", "--listen", help="send the gradio information to flask api **NOTE error will show up if the api is not up", default=None)
+args = parser.parse_args()
+gr.close_all()
+if args.examples == "class":
+    @GradioModule
+    class Greeting:
+
+        @register(["text"], ["text"], examples=[["Luca Vivona"]])
+        def Hello_World(self, name):
+            return f"👋 Hello {name}, and welcome to Gradio Flow 🤗" 
+
+        @register(["number", "number"], ["number"], examples=[[1,1]])
+        def add(self, x, y):
+            return x + y
+
+    Greeting().launch() if args.listen == None else Greeting().launch(listen=args.listen)
+
+elif args.examples == "function":
+    @register(["text"], ["text"], examples=[["Luca Vivona"]])
+    def Hello_World(name):
+            return f"👋 Hello {name}, and welcome to Gradio Flow 🤗" 
+
+    @register(["number", "number"], ["number"], examples=[[1,1]])
+    def add(x, y):
+            return x + y
+    tabularGradio([Hello_World, add]) if args.listen == None else tabularGradio([Hello_World, add], listen=args.listen)
+
+elif args.examples == "load":
+    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) if args.listen == None else InterLauncher("Demo", demo, listen=args.listen)
+
+else:
+    Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True)  if args.listen == None else Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True, listen=args.listen)

backend/src/demoC.py

@@ -1,22 +0,0 @@
-from resources import GradioModule, register, InterLauncher
-import gradio as gr
-
-@GradioModule
-class Greeting:
-
-    @register(["text"], ["text"], examples=[["Luca Vivona"]])
-    def Hello_World(self, name):
-        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
-
-    @register(["number", "number"], ["number"], examples=[[1,1]])
-    def add(self, x, y):
-        return x + y
-
-
-if __name__ == "__main__":
-    # run just gradio
-    # Greeting().launch()
-    # run it within Gradio-flow
-    Greeting().launch(listen=2000)
-
-    

backend/src/demoE.py

@@ -1,3 +0,0 @@
-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)

backend/src/demoF.py

@@ -1,20 +0,0 @@
-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):
-        return f"Hello {name}, and welcome to Gradio Flow 🤗" 
-
-@register(["number", "number"], ["number"], examples=[[1,1]])
-def add(x, y):
-    return x + y
-
-if __name__ == "__main__":
-    # run single gradio
-    
-    tabularGradio([Hello_World(), add()], ["Hello World", "Add"])
-
-    # run it within Gradio-Flow
-    # tabularGradio([Hello_World(), add()], ["Hello World", "Add"], listen=2000)
-    

backend/src/demoL.py

@@ -1,8 +0,0 @@
-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/resources/module.py

@@ -1,15 +1,16 @@
 import gradio as gr
-from inspect import getfile, isclass, getmro
+from inspect import getfile
 
 import socket
-import random
 import requests
 
 class Dock:
 
     def __init__(self) -> None:
-            self.num_ports = 20
-            self.port_range = (7860, 7880)
+            self.port_map = dict()
+            for p in range(7860, 7880):
+                if not self.portConnection(p):
+                    self.port_map[p] = True
 
     def portConnection(self, port : int):
             s = socket.socket(
@@ -18,15 +19,11 @@ class Dock:
             if result == 0: return True
             return False
 
-    def determinePort(self, max_trial_count=20):
-            trial_count = 0 
-            while trial_count <= max_trial_count:
-                port=random.randint(*self.port_range)
-                if not self.portConnection(port):
-                    return port
-                trial_count += 1
-            raise Exception('Exceeded Max Trial count without finding port')
-
+    def determinePort(self):
+        for port, available in self.port_map.items():
+            if available == True:
+                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()
@@ -41,7 +38,7 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
 
     interface.launch(server_port=port,
                      server_name=f"{DOCKER_LOCAL_HOST}",
-                     inline= kwargs['inline'] if "inline" in kwargs else True,
+                     inline= kwargs['inline'] if "inline" in kwargs else False,
                      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,
@@ -65,13 +62,16 @@ def InterLauncher(name, interface, listen=2000, **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):
+def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
     """
     takes all gradio Interfaces, and names
     from input and launch the gradio.
     """
 
-    assert len(funcs) == len(names), f"{bcolor.BOLD}{bcolor.FAIL}🐛 something went wrong!!! The function you appended dose not match the length of the names{bcolor.ENDC}"
+    fn = [fn() for fn in funcs if not isinstance(fn, gr.Interface) and  fn.__decorator__ == "__gradio__" ]
+    if len(names) == 0:
+        names = [_.__name__ for _ in fn]
+        
     port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
     
     # send this to the backend api for it to be read by the react frontend
@@ -83,7 +83,7 @@ def tabularGradio(funcs, names, name="Tabular Temp Name", **kwargs):
             return
     
     # provided by gradio a tabularInterface function that take function and names
-    gr.TabbedInterface(funcs, names).launch(server_port=port,
+    gr.TabbedInterface(fn, names).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,
@@ -154,7 +154,7 @@ def register(inputs, outputs, examples=None, **kwargs):
                                                                     css=kwargs['css'] if "css" in kwargs else None,
                                                                     live=kwargs['live'] if "live" in kwargs else False,
                                                                     allow_flagging=kwargs['allow_flagging'] if "allow_flagging" in kwargs else None,
-                                                                    theme=kwargs['theme'] if "theme" in kwargs else  'default', )
+                                                                    theme=kwargs['theme'] if "theme" in kwargs else 'default', )
 
                 if len(args[1:]) == (func.__code__.co_argcount - 1):
                     return func(*args, **wargs) 

frontend/public/index.html

@@ -31,6 +31,9 @@
     href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"
   />
   <script src="https://cdn.jsdelivr.net/npm/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
+  <script type="module"
+  src="https://gradio.s3-us-west-2.amazonaws.com/3.1.1/gradio.js">
+  </script>
 
   </head>
   <body>

frontend/src/Components/Nodes/custom.js

@@ -34,8 +34,6 @@ import React from "react"
                       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>
-                {/* {console.log(this.myRef.current.contentWindow)} */}
-                {/* <gradio-app space={`${this.state.data.host}/api/predict`} className="w-full h-full"></gradio-app> */}
               </div>:
         <>
         <div className='break-words'>