Upload 2 files

demos/kitchen_sink/config.json

@@ -0,0 +1,941 @@
+{
+  "version": "3.0.16\n",
+  "mode": "blocks",
+  "dev_mode": true,
+  "components": [
+    {
+      "id": 26,
+      "type": "markdown",
+      "props": {
+        "value": "<h1 style='text-align: center; margin-bottom: 1rem'>Kitchen Sink</h1>",
+        "name": "markdown",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 27,
+      "type": "markdown",
+      "props": {
+        "value": "<p>Try out all the components!</p>",
+        "name": "markdown",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 28,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {
+          "equal_height": false,
+          "mobile_collapse": true
+        }
+      }
+    },
+    {
+      "id": 29,
+      "type": "column",
+      "props": {
+        "type": "column",
+        "variant": "panel",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 30,
+      "type": "column",
+      "props": {
+        "type": "column",
+        "variant": "default",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 0,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "value": "Lorem ipsum",
+        "label": "Textbox",
+        "show_label": true,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 1,
+      "type": "textbox",
+      "props": {
+        "lines": 3,
+        "max_lines": 20,
+        "placeholder": "Type here..",
+        "value": "",
+        "label": "Textbox 2",
+        "show_label": true,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "number",
+      "props": {
+        "value": 42.0,
+        "label": "Number",
+        "show_label": true,
+        "name": "number",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 3,
+      "type": "slider",
+      "props": {
+        "minimum": 10,
+        "maximum": 20,
+        "step": 0.1,
+        "value": 15,
+        "label": "Slider: 10 - 20",
+        "show_label": true,
+        "name": "slider",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 4,
+      "type": "slider",
+      "props": {
+        "minimum": 0,
+        "maximum": 20,
+        "step": 0.04,
+        "value": 0,
+        "label": "Slider: step @ 0.04",
+        "show_label": true,
+        "name": "slider",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 5,
+      "type": "checkbox",
+      "props": {
+        "value": false,
+        "label": "Checkbox",
+        "show_label": true,
+        "name": "checkbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 6,
+      "type": "checkboxgroup",
+      "props": {
+        "choices": [
+          "foo",
+          "bar",
+          "baz"
+        ],
+        "value": [
+          "foo",
+          "bar"
+        ],
+        "label": "CheckboxGroup",
+        "show_label": true,
+        "name": "checkboxgroup",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 7,
+      "type": "radio",
+      "props": {
+        "choices": [
+          "foo",
+          "bar",
+          "baz"
+        ],
+        "value": "baz",
+        "label": "Radio",
+        "show_label": true,
+        "name": "radio",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 8,
+      "type": "dropdown",
+      "props": {
+        "choices": [
+          "foo",
+          "bar",
+          "baz"
+        ],
+        "value": "foo",
+        "label": "Dropdown",
+        "show_label": true,
+        "name": "dropdown",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 9,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "editor",
+        "streaming": false,
+        "label": "Image",
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 10,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "select",
+        "streaming": false,
+        "label": "Image w/ Cropper",
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 11,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "canvas",
+        "tool": "editor",
+        "streaming": false,
+        "label": "Sketchpad",
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 12,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "webcam",
+        "tool": "editor",
+        "streaming": false,
+        "label": "Webcam",
+        "show_label": true,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 13,
+      "type": "video",
+      "props": {
+        "source": "upload",
+        "label": "Video",
+        "show_label": true,
+        "name": "video",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 14,
+      "type": "audio",
+      "props": {
+        "source": "upload",
+        "streaming": false,
+        "label": "Audio",
+        "show_label": true,
+        "name": "audio",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 15,
+      "type": "audio",
+      "props": {
+        "source": "microphone",
+        "streaming": false,
+        "label": "Microphone",
+        "show_label": true,
+        "name": "audio",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 31,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {
+          "mobile_collapse": false
+        }
+      }
+    },
+    {
+      "id": 32,
+      "type": "button",
+      "props": {
+        "value": "Clear",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 33,
+      "type": "button",
+      "props": {
+        "value": "Submit",
+        "variant": "primary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 34,
+      "type": "column",
+      "props": {
+        "type": "column",
+        "variant": "panel",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 35,
+      "type": "statustracker",
+      "props": {
+        "cover_container": true,
+        "name": "statustracker",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 16,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "max_lines": 20,
+        "value": "",
+        "label": "Textbox",
+        "show_label": true,
+        "interactive": false,
+        "name": "textbox",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 17,
+      "type": "label",
+      "props": {
+        "label": "Label",
+        "show_label": true,
+        "interactive": false,
+        "name": "label",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 18,
+      "type": "audio",
+      "props": {
+        "source": "upload",
+        "streaming": false,
+        "label": "Audio",
+        "show_label": true,
+        "interactive": false,
+        "name": "audio",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 19,
+      "type": "image",
+      "props": {
+        "image_mode": "RGB",
+        "source": "upload",
+        "tool": "editor",
+        "streaming": false,
+        "label": "Image",
+        "show_label": true,
+        "interactive": false,
+        "name": "image",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 20,
+      "type": "video",
+      "props": {
+        "source": "upload",
+        "label": "Video",
+        "show_label": true,
+        "interactive": false,
+        "name": "video",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 21,
+      "type": "highlightedtext",
+      "props": {
+        "color_map": {
+          "punc": "pink",
+          "test 0": "blue"
+        },
+        "show_legend": false,
+        "label": "HighlightedText",
+        "show_label": true,
+        "interactive": false,
+        "name": "highlightedtext",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 22,
+      "type": "highlightedtext",
+      "props": {
+        "show_legend": true,
+        "label": "HighlightedText",
+        "show_label": true,
+        "interactive": false,
+        "name": "highlightedtext",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 23,
+      "type": "json",
+      "props": {
+        "label": "JSON",
+        "show_label": true,
+        "interactive": false,
+        "name": "json",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 24,
+      "type": "html",
+      "props": {
+        "value": "",
+        "label": "HTML",
+        "show_label": true,
+        "interactive": false,
+        "name": "html",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 36,
+      "type": "row",
+      "props": {
+        "type": "row",
+        "visible": true,
+        "style": {
+          "mobile_collapse": false
+        }
+      }
+    },
+    {
+      "id": 37,
+      "type": "button",
+      "props": {
+        "value": "Flag",
+        "variant": "secondary",
+        "name": "button",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 38,
+      "type": "dataset",
+      "props": {
+        "components": [
+          "textbox",
+          "textbox",
+          "number",
+          "slider",
+          "slider",
+          "checkbox",
+          "checkboxgroup",
+          "radio",
+          "dropdown",
+          "image",
+          "image",
+          "image",
+          "image",
+          "video",
+          "audio",
+          "audio"
+        ],
+        "headers": [
+          "Textbox",
+          "Textbox 2",
+          "Number",
+          "Slider: 10 - 20",
+          "Slider: step @ 0.04",
+          "Checkbox",
+          "CheckboxGroup",
+          "Radio",
+          "Dropdown",
+          "Image",
+          "Image w/ Cropper",
+          "Sketchpad",
+          "Webcam",
+          "Video",
+          "Audio",
+          "Microphone"
+        ],
+        "samples": [
+          [
+            "the quick brown fox",
+            "jumps over the lazy dog",
+            10,
+            12,
+            4,
+            true,
+            [
+              "foo",
+              "baz"
+            ],
+            "baz",
+            "bar",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav"
+          ],
+          [
+            "the quick brown fox",
+            "jumps over the lazy dog",
+            10,
+            12,
+            4,
+            true,
+            [
+              "foo",
+              "baz"
+            ],
+            "baz",
+            "bar",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav"
+          ],
+          [
+            "the quick brown fox",
+            "jumps over the lazy dog",
+            10,
+            12,
+            4,
+            true,
+            [
+              "foo",
+              "baz"
+            ],
+            "baz",
+            "bar",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cheetah1.jpg",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/world.mp4",
+            "/Users/dawoodkhan/Desktop/Developer/gradio/demo/kitchen_sink/files/cantina.wav"
+          ]
+        ],
+        "type": "index",
+        "name": "dataset",
+        "visible": true,
+        "style": {}
+      }
+    },
+    {
+      "id": 39,
+      "type": "markdown",
+      "props": {
+        "value": "<p>Learn more about <a href=\"http://gradio.app\">Gradio</a></p>",
+        "name": "markdown",
+        "visible": true,
+        "style": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "css": null,
+  "enable_queue": false,
+  "layout": {
+    "id": 25,
+    "children": [
+      {
+        "id": 26
+      },
+      {
+        "id": 27
+      },
+      {
+        "id": 28,
+        "children": [
+          {
+            "id": 29,
+            "children": [
+              {
+                "id": 30,
+                "children": [
+                  {
+                    "id": 0
+                  },
+                  {
+                    "id": 1
+                  },
+                  {
+                    "id": 2
+                  },
+                  {
+                    "id": 3
+                  },
+                  {
+                    "id": 4
+                  },
+                  {
+                    "id": 5
+                  },
+                  {
+                    "id": 6
+                  },
+                  {
+                    "id": 7
+                  },
+                  {
+                    "id": 8
+                  },
+                  {
+                    "id": 9
+                  },
+                  {
+                    "id": 10
+                  },
+                  {
+                    "id": 11
+                  },
+                  {
+                    "id": 12
+                  },
+                  {
+                    "id": 13
+                  },
+                  {
+                    "id": 14
+                  },
+                  {
+                    "id": 15
+                  }
+                ]
+              },
+              {
+                "id": 31,
+                "children": [
+                  {
+                    "id": 32
+                  },
+                  {
+                    "id": 33
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "id": 34,
+            "children": [
+              {
+                "id": 35
+              },
+              {
+                "id": 16
+              },
+              {
+                "id": 17
+              },
+              {
+                "id": 18
+              },
+              {
+                "id": 19
+              },
+              {
+                "id": 20
+              },
+              {
+                "id": 21
+              },
+              {
+                "id": 22
+              },
+              {
+                "id": 23
+              },
+              {
+                "id": 24
+              },
+              {
+                "id": 36,
+                "children": [
+                  {
+                    "id": 37
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": 38
+      },
+      {
+        "id": 39
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [
+        33
+      ],
+      "trigger": "click",
+      "inputs": [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15
+      ],
+      "outputs": [
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": 35,
+      "queue": null,
+      "api_name": "predict",
+      "scroll_to_output": true,
+      "show_progress": true,
+      "documentation": [
+        [
+          "(str): text",
+          "(str): text",
+          "(float | None): numeric input",
+          "(number): numeric input",
+          "(number): numeric input",
+          "(bool): boolean input",
+          "(List[str]): list of selected choices",
+          "(str): selected choice",
+          "(str): selected choice",
+          "(str): base64 url data",
+          "(str): base64 url data",
+          "(str): base64 url data",
+          "(str): base64 url data",
+          "(Dict[name: str, data: str]): JSON object with filename as 'name' property and base64 data as 'data' property",
+          "(Dict[name: str, data: str]): JSON object with filename as 'name' property and base64 data as 'data' property",
+          "(Dict[name: str, data: str]): JSON object with filename as 'name' property and base64 data as 'data' property"
+        ],
+        [
+          "(str | None): text",
+          "(Dict[label: str, confidences: List[Dict[label: str, confidence: number]]]): Object with key 'label' representing primary label, and key 'confidences' representing a list of label-confidence pairs",
+          "(str): base64 url data",
+          "(str): base64 url data",
+          "(str): base64 url data",
+          "(List[Tuple[str, str | number | None]]): List of (word, category) tuples",
+          "(List[Tuple[str, str | number | None]]): List of (word, category) tuples",
+          "(Dict | List): JSON output",
+          null
+        ]
+      ]
+    },
+    {
+      "targets": [
+        32
+      ],
+      "trigger": "click",
+      "inputs": [],
+      "outputs": [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        30
+      ],
+      "backend_fn": false,
+      "js": "() => [\"\", \"\", null, 15, 0, null, [], \"baz\", \"foo\", null, null, null, null, null, null, null, \"\", null, null, null, null, null, null, null, null, {\"variant\": null, \"visible\": true, \"__type__\": \"update\"}]\n                ",
+      "status_tracker": null,
+      "queue": null,
+      "api_name": null,
+      "scroll_to_output": false,
+      "show_progress": true
+    },
+    {
+      "targets": [
+        37
+      ],
+      "trigger": "click",
+      "inputs": [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24
+      ],
+      "outputs": [],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": null,
+      "queue": false,
+      "api_name": null,
+      "scroll_to_output": false,
+      "show_progress": true
+    },
+    {
+      "targets": [
+        38
+      ],
+      "trigger": "click",
+      "inputs": [
+        38
+      ],
+      "outputs": [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15
+      ],
+      "backend_fn": true,
+      "js": null,
+      "status_tracker": null,
+      "queue": false,
+      "api_name": null,
+      "scroll_to_output": false,
+      "show_progress": true
+    }
+  ]
+}

demos/kitchen_sink/run.py

@@ -0,0 +1,146 @@
+import os
+import json
+import numpy as np
+import gradio as gr
+
+CHOICES = ["foo", "bar", "baz"]
+JSONOBJ = """{"items":{"item":[{"id": "0001","type": null,"is_good": false,"ppu": 0.55,"batters":{"batter":[{ "id": "1001", "type": "Regular" },{ "id": "1002", "type": "Chocolate" },{ "id": "1003", "type": "Blueberry" },{ "id": "1004", "type": "Devil's Food" }]},"topping":[{ "id": "5001", "type": "None" },{ "id": "5002", "type": "Glazed" },{ "id": "5005", "type": "Sugar" },{ "id": "5007", "type": "Powdered Sugar" },{ "id": "5006", "type": "Chocolate with Sprinkles" },{ "id": "5003", "type": "Chocolate" },{ "id": "5004", "type": "Maple" }]}]}}"""
+
+def fn(
+    text1,
+    text2,
+    num,
+    slider1,
+    slider2,
+    single_checkbox,
+    checkboxes,
+    radio,
+    dropdown,
+    im1,
+    im2,
+    im3,
+    im4,
+    video,
+    audio1,
+    audio2,
+    file,
+    df1,
+    df2,
+):
+    return (
+        (text1 if single_checkbox else text2)
+        + ", selected:"
+        + ", ".join(checkboxes),  # Text
+        {
+            "positive": num / (num + slider1 + slider2),
+            "negative": slider1 / (num + slider1 + slider2),
+            "neutral": slider2 / (num + slider1 + slider2),
+        },  # Label
+        (audio1[0], np.flipud(audio1[1]))
+        if audio1 is not None  else os.path.join(os.path.dirname(__file__), "files/cantina.wav"),  # Audio
+        np.flipud(im1)
+        if im1 is not None  else os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),  # Image
+        video
+        if video is not None  else os.path.join(os.path.dirname(__file__), "files/world.mp4"),  # Video
+        [
+            ("The", "art"),
+            ("quick brown", "adj"),
+            ("fox", "nn"),
+            ("jumped", "vrb"),
+            ("testing testing testing", None),
+            ("over", "prp"),
+            ("the", "art"),
+            ("testing", None),
+            ("lazy", "adj"),
+            ("dogs", "nn"),
+            (".", "punc"),
+        ]   + [(f"test {x}", f"test {x}") for x in range(10)],  # HighlightedText        
+        [
+            ("The testing testing testing", None),
+            ("over", 0.6),
+            ("the", 0.2),
+            ("testing", None),
+            ("lazy", -0.1),
+            ("dogs", 0.4),
+            (".", 0),
+        ]   + [(f"test", x / 10) for x in range(-10, 10)],  # HighlightedText
+        json.loads(JSONOBJ),  # JSON
+        "<button style='background-color: red'>Click Me: " + radio + "</button>",  # HTML
+        os.path.join(os.path.dirname(__file__), "files/titanic.csv"),
+        df1,  # Dataframe
+        np.random.randint(0, 10, (4, 4)),  # Dataframe
+        df2,  # Timeseries
+    )
+
+
+demo = gr.Interface(
+    fn,
+    inputs=[
+        gr.Textbox(value="Lorem ipsum", label="Textbox"),
+        gr.Textbox(lines=3, placeholder="Type here..", label="Textbox 2"),
+        gr.Number(label="Number", value=42),
+        gr.Slider(10, 20, value=15, label="Slider: 10 - 20"),
+        gr.Slider(maximum=20, step=0.04, label="Slider: step @ 0.04"),
+        gr.Checkbox(label="Checkbox"),
+        gr.CheckboxGroup(label="CheckboxGroup", choices=CHOICES, value=CHOICES[0:2]),
+        gr.Radio(label="Radio", choices=CHOICES, value=CHOICES[2]),
+        gr.Dropdown(label="Dropdown", choices=CHOICES),
+        gr.Image(label="Image"),
+        gr.Image(label="Image w/ Cropper", tool="select"),
+        gr.Image(label="Sketchpad", source="canvas"),
+        gr.Image(label="Webcam", source="webcam"),
+        gr.Video(label="Video"),
+        gr.Audio(label="Audio"),
+        gr.Audio(label="Microphone", source="microphone"),
+        gr.File(label="File"),
+        gr.Dataframe(label="Dataframe", headers=["Name", "Age", "Gender"]),
+        gr.Timeseries(x="time", y=["price", "value"], colors=["pink", "purple"]),
+    ],
+    outputs=[
+        gr.Textbox(label="Textbox"),
+        gr.Label(label="Label"),
+        gr.Audio(label="Audio"),
+        gr.Image(label="Image"),
+        gr.Video(label="Video"),
+        gr.HighlightedText(label="HighlightedText", color_map={"punc": "pink", "test 0": "blue"}),
+        gr.HighlightedText(label="HighlightedText", show_legend=True),
+        gr.JSON(label="JSON"),
+        gr.HTML(label="HTML"),
+        gr.File(label="File"),
+        gr.Dataframe(label="Dataframe"),
+        gr.Dataframe(label="Numpy"),
+        gr.Timeseries(x="time", y=["price", "value"], label="Timeseries"),
+    ],
+    examples=[
+        [
+            "the quick brown fox",
+            "jumps over the lazy dog",
+            10,
+            12,
+            4,
+            True,
+            ["foo", "baz"],
+            "baz",
+            "bar",
+            os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__), "files/world.mp4"),
+            os.path.join(os.path.dirname(__file__), "files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__), "files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__), "files/titanic.csv"),
+            [[1, 2, 3], [3, 4, 5]],
+            os.path.join(os.path.dirname(__file__), "files/time.csv"),
+        ]
+    ]
+    * 3,
+    theme="default",
+    title="Gradio AI UI UX",
+    cache_examples=False,
+    description="Try out all the components!",
+    article="Learn more about [Gradio](http://gradio.app)",
+)
+
+if __name__ == "__main__":
+    demo.launch()