Blocks dev (#853)

* Blocks-Components-v2
- default -> default_value refactoring

* Blocks-Components-v2
- refactor output types into output_type and make them auto

* Blocks-Backend-Events
- all events are implemented

* Blocks-Backend-Events
- refactor fn: str -> Callable

* Blocks-Backend-Events
- add change event to TabItem

* Blocks Backend Components
- Remove KeyValues from components

* Blocks-Backend-Components-v2
- Resolve Components imports in inputs and outputs

* Blocks-Backend-Components-v2
- fix default parameter usage in demos

* Blocks-Backend-Components-v2
- fix default parameter usage in demos

* Blocks-Backend-Components-v2
- fix default parameter usage in demos

* Blocks-Backend-Components-v2
- docstring updates

* revert demos

* Blocks-Backend-Components-v2
- tweaks

* Blocks-Backend-Components-v2
- add change event to Tabs

* Interfaces from Blocks (#849)

Build interfaces from blocks

Co-authored-by: Ali Abid <aliabid94@gmail.com>

Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Ali Abid <aliabid94@gmail.com>

Author: 4 people

demo/xray_blocks/run.py

@@ -8,37 +8,38 @@
 xray_blocks = gr.Blocks()
 
 with xray_blocks:
-    gr.Markdown(
+    gr.components.Markdown(
         """
 	# Detect Disease From Scan
 	With this model you can lorem ipsum
 	- ipsum 1
 	- ipsum 2
 	"""
     )
-    disease = gr.inputs.CheckboxGroup(
-        ["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
-    )
+    disease = gr.components.CheckboxGroup(choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For")
 
     with gr.Tabs():
         with gr.TabItem("X-ray"):
             with gr.Row():
-                xray_scan = gr.inputs.Image()
-                xray_results = gr.outputs.JSON()
-                output_textbox = gr.outputs.Textbox()
-                input_textbox = gr.inputs.Textbox(default="Hello This Is a Input Textbox")
-            xray_run = gr.Button("Run")
+                xray_scan = gr.components.Image()
+                xray_results = gr.components.JSON()
+                output_textbox = gr.components.Textbox()
+                input_textbox = gr.components.Textbox(default_value="Hello This Is a Input Textbox")
+            xray_run = gr.Button("Run", css={
+                "background-color": "red",
+                "--hover-color": "orange"
+            })
             xray_run.click(xray_model, inputs=[disease, xray_scan], outputs=xray_results)
             xray_run.click(xray_model, inputs=[disease, xray_scan], outputs=output_textbox)
 
         with gr.TabItem("CT Scan"):
             with gr.Row():
-                ct_scan = gr.inputs.Image()
-                ct_results = gr.outputs.JSON()
+                ct_scan = gr.components.Image()
+                ct_results = gr.components.JSON()
             ct_run = gr.Button("Run")
             ct_run.click(ct_model, inputs=[disease, ct_scan], outputs=ct_results)
 
-    overall_probability = gr.outputs.Textbox()
+    overall_probability = gr.components.Textbox()
 
 # TODO: remove later
 import json

gradio/blocks.py

@@ -19,77 +19,33 @@ def __init__(self):
             Context.root_block.blocks[self._id] = self
         self.events = []
 
-    def click(self, fn, inputs, outputs):
-        if not isinstance(inputs, list):
-            inputs = [inputs]
-        if not isinstance(outputs, list):
-            outputs = [outputs]
-        Context.root_block.fns.append(fn)
-        Context.root_block.dependencies.append(
-            {
-                "id": len(Context.root_block.dependencies),
-                "targets": [self._id],
-                "trigger": "click",
-                "inputs": [block._id for block in inputs],
-                "outputs": [block._id for block in outputs],
-            }
-        )
-
-    def change(
-        self, fn: str, inputs: List["Component"], outputs: List["Component"]
+    def set_event_trigger(
+        self,
+        event_name: str,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
     ) -> None:
         """
-        Adds change event to the component's dependencies.
-
-        Whenever the component changes the function is triggered.
-
+        Adds an event to the component's dependencies.
         Parameters:
-            fn: function name
+            event_name: event name
+            fn: Callable function
             inputs: input list
             outputs: output list
-
         Returns: None
-
         """
+        # Support for singular parameter
         if not isinstance(inputs, list):
             inputs = [inputs]
         if not isinstance(outputs, list):
             outputs = [outputs]
-        Context.root_block.fns.append(fn)
-        Context.root_block.dependencies.append(
-            {
-                "targets": [self._id],
-                "trigger": "change",
-                "inputs": [block._id for block in inputs],
-                "outputs": [block._id for block in outputs],
-            }
-        )
 
-    def save(
-        self, fn: str, inputs: List["Component"], outputs: List["Component"]
-    ) -> None:
-        """
-        Adds save event to the component's dependencies.
-
-        Whenever the component is saved the function is triggered.
-
-        Parameters:
-            fn: function name
-            inputs: input list
-            outputs: output list
-
-        Returns: None
-
-        """
-        if not isinstance(inputs, list):
-            inputs = [inputs]
-        if not isinstance(outputs, list):
-            outputs = [outputs]
         Context.root_block.fns.append(fn)
         Context.root_block.dependencies.append(
             {
                 "targets": [self._id],
-                "trigger": "save",
+                "trigger": event_name,
                 "inputs": [block._id for block in inputs],
                 "outputs": [block._id for block in outputs],
             }
@@ -120,7 +76,15 @@ def get_template_context(self):
 
 
 class Tabs(BlockContext):
-    pass
+    def change(self, fn: Callable, inputs: List[Component], outputs: List[Component]):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+        Returns: None
+        """
+        self.set_event_trigger("change", fn, inputs, outputs)
 
 
 class TabItem(BlockContext):
@@ -131,6 +95,16 @@ def __init__(self, label):
     def get_template_context(self):
         return {"label": self.label}
 
+    def change(self, fn: Callable, inputs: List[Component], outputs: List[Component]):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+        Returns: None
+        """
+        self.set_event_trigger("change", fn, inputs, outputs)
+
 
 class Blocks(Launchable, BlockContext):
     def __init__(self, theme="default"):