custom-components (#985)

* custom-components
- create template components
- changes in PKG and requires comes from scripts/install_gradio.sh

* custom-components
- tweaks

* update-components
- tweaks

* update-components
- fix get_block_name

* update-components
- add webcam demo

* custom-components
- make use of get_block_name function whenever possible

* custom-components
- tweaks

demo/blocks_textarea/run.py

@@ -0,0 +1,12 @@
+import gradio as gr
+from gradio import Templates
+
+
+def greet(name):
+    return "Hello " + name + "!!"
+
+
+demo = gr.Interface(fn=greet, inputs=Templates.TextArea(), outputs=Templates.TextArea())
+
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_webcam/run.py

@@ -0,0 +1,14 @@
+import numpy as np
+
+import gradio as gr
+from gradio import Templates
+
+
+def snap(image):
+    return np.flipud(image)
+
+
+demo = gr.Interface(snap, Templates.Webcam(), gr.Image())
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -4,6 +4,7 @@ import gradio.components as components
 import gradio.inputs as inputs
 import gradio.outputs as outputs
 import gradio.processing_utils
+import gradio.templates as Templates
 from gradio.blocks import Blocks, Column, Row, TabItem, Tabs
 from gradio.components import (
     HTML,

gradio/blocks.py

@@ -36,6 +36,20 @@ class Block:
             Context.root_block.blocks[self._id] = self
         self.events = []
 
+    def get_block_name(self) -> str:
+        """
+        Gets block's class name.
+
+        If it is template component it gets the parent's class name.
+
+        @return: class name
+        """
+        return (
+            self.__class__.__base__.__name__.lower()
+            if hasattr(self, "is_template")
+            else self.__class__.__name__.lower()
+        )
+
     def set_event_trigger(
         self,
         event_name: str,
@@ -266,7 +280,7 @@ class Blocks(BlockContext):
             config["components"].append(
                 {
                     "id": _id,
-                    "type": block.__class__.__name__.lower(),
+                    "type": (block.get_block_name()),
                     "props": block.get_template_context()
                     if hasattr(block, "get_template_context")
                     else None,

gradio/components.py

@@ -57,14 +57,14 @@ class Component(Block):
         return self.__repr__()
 
     def __repr__(self):
-        return f"{type(self).__name__} (label={self.label})"
+        return f"{self.get_block_name()} (label={self.label})"
 
     def get_template_context(self):
         """
         :return: a dictionary with context variables for the javascript file associated with the context
         """
         return {
-            "name": self.__class__.__name__.lower(),
+            "name": self.get_block_name(),
             "label": self.label,
             "css": self.css,
             "interactive": self.interactive,
@@ -2896,9 +2896,7 @@ class Dataset(Component):
 
     def get_template_context(self):
         return {
-            "components": [
-                component.__class__.__name__.lower() for component in self.components
-            ],
+            "components": [component.get_block_name() for component in self.components],
             "headers": self.headers,
             "samples": self.samples,
             "type": self.type,
@@ -2955,7 +2953,7 @@ class Interpretation(Component):
 
     def get_template_context(self):
         return {
-            "component": self.component.__class__.__name__.lower(),
+            "component": self.component.get_block_name(),
             "component_props": self.component.get_template_context(),
         }
 

gradio/routes.py

@@ -55,7 +55,6 @@ templates = Jinja2Templates(directory=STATIC_TEMPLATE_LIB)
 
 
 def create_app() -> FastAPI:
-
     app = FastAPI(default_response_class=ORJSONResponse)
     app.add_middleware(
         CORSMiddleware,
@@ -176,8 +175,8 @@ def create_app() -> FastAPI:
         outputs = [type(out) for out in app.blocks.output_components]
         input_types_doc, input_types = get_types(inputs, "input")
         output_types_doc, output_types = get_types(outputs, "output")
-        input_names = [type(inp).__name__ for inp in app.blocks.input_components]
-        output_names = [type(out).__name__ for out in app.blocks.output_components]
+        input_names = [inp.get_block_name() for inp in app.blocks.input_components]
+        output_names = [out.get_block_name() for out in app.blocks.output_components]
         if app.blocks.examples is not None:
             sample_inputs = app.blocks.examples[0]
         else:

gradio/templates.py

@@ -0,0 +1,122 @@
+from gradio.components import Audio as C_Audio
+from gradio.components import Dataframe as C_Dataframe
+from gradio.components import File as C_File
+from gradio.components import Image as C_Image
+from gradio.components import Textbox as C_Textbox
+from gradio.components import Video as C_Video
+
+
+class TextArea(C_Textbox):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(lines=7, **kwargs)
+
+
+class Webcam(C_Image):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(source="webcam", **kwargs)
+
+
+class Sketchpad(C_Image):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(
+            image_mode="L",
+            source="canvas",
+            shape=(28, 28),
+            invert_colors=True,
+            **kwargs
+        )
+
+
+class Plot(C_Image):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="plot", **kwargs)
+
+
+class Pil(C_Image):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="pil", **kwargs)
+
+
+class PlayableVideo(C_Video):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="mp4", **kwargs)
+
+
+class Microphone(C_Audio):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(source="microphone", **kwargs)
+
+
+class C_Files(C_File):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(file_count="multiple", **kwargs)
+
+
+class Numpy(C_Dataframe):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="numpy", **kwargs)
+
+
+class Matrix(C_Dataframe):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="array", **kwargs)
+
+
+class List(C_Dataframe):
+    def __init__(self, **kwargs):
+        """
+        Custom component
+        @param kwargs:
+        """
+        self.is_template = True
+        super().__init__(type="array", col_count=1, **kwargs)