Website Design Changes (#1015)

* adding gallery

* added netlify files

* new navbar design

* header section new design

* used by section new design

* cards section new design

* integrates with section new design

* customer stories section new design

* footer and gradient

* demos section new design

* docs fixes

* docs reorg

* docs reorg

* upgrading to tailwind 3

* tailwind config changes

* navbar new design

* fixing body on all pages

* Updating Guides  (#1012)

* updating getting started

* updated codecov version

* tweaks to gs

* added netlify file

* added netlify file

* website prebuild script

* increased code size

* blocks

* edits

* blocks_hello

* hello world

* guide

* merge main

* added flipper demo

* guide

* guide

* add guides

* tweak to refresh website

* header section new design

* demos section new design

* cards design

* used by section

* tweets section

* footer on all pages

* mobile responsive fixes

* mobile responsive fixes

* https fonts

* completed blocks guide

* unify components

* minor tweaks

* docs headers styling and navigation pane

* parameter code blocks

* styling description and input type

* parameter tables and other styling

* only documenting interactive components when possible

* guides

* embedding not working

* demos not working

* fixing demo code

* fixing demos

* demo fix

* updated demos

* updated demos

* ui update

* updated docstrings

* updated code snippets so they run

* updating docs

* Interface docs

* updating interface

* fixing parameters in interface.py

* required and defaults for interface, and styling

* fixing up interface (#1207)

* fixing up interface

* fixed interface methods

* formatting

* updating interface docs

* updating interface docs

* formatting

* docstring to load from docstrings

* fixed colors

* finalize interface content

* interface examples

* fixed examples

* added some blocks docs

* blocks

* component fixes

* reorganized some files (#1210)

* formatting

* added info for every component

* fixes

* blocks docs

* added blocks demos

* adding combined interfaces

* added parallel, series

* Doc: layout update (#1216)

* doc layout

* home spacing

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* adding layouts

* layouts done

* added events for components

* formatting and https

* brings back dropdown and other components

* fix header ids

* moved ids and fixed nav

* added parameters for remaining component

* docstring fixes

* landing page demos

* demo window placeholder

* demo nav

* fixed test

* formatting

* demo code

* correctly importing gradio  css/js

* remove keyvalues

* modify launch script to move gradio assetS

* components embedded test

* correct demo name

* hide try demo and embedding

* local devserver changes

* create embedding json with configs

* changes

* fixes

* comment out layout docs

* demo work

* demo fixes

* demo embedding fixes

* typo

* jinja fix

* demo nav fix

* hide demo button

* formatting

* removed whitespace

* remove newline from parameter

* reverting comments

Co-authored-by: aliabd <ali.si3luwa@gmail.com>
Co-authored-by: Victor Muštar <victor.mustar@gmail.com>
Co-authored-by: Ali Abid <aabid94@gmail.com>

demo/blocks_essay/run.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+def change_textbox(choice):
+    if choice == "short":
+        return gr.Radio.update(lines=2, visible=True)
+    elif choice == "long":
+        return gr.Radio.update(lines=8, visible=True)
+    else:
+        return gr.Radio.update(visible=False)
+
+
+with gr.Blocks() as demo:
+    radio = gr.Radio(["short", "long", "none"], 
+                     label="What kind of essay would you like to write?")
+    text = gr.Textbox(lines=2, interactive=True)
+
+    radio.change(fn=change_textbox, inputs=radio, outputs=text)
+
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_flipper/run.py

@@ -0,0 +1,34 @@
+import numpy as np
+import gradio as gr
+
+demo = gr.Blocks()
+
+
+def flip_text(x):
+    return x[::-1]
+
+def flip_image(x):
+    return np.fliplr(x)
+
+
+with demo:
+    gr.Markdown("Flip text or image files using this demo.")
+    with gr.Tabs():
+        with gr.TabItem("Flip Text"):
+            with gr.Column():
+                with gr.Row():
+                    text_input = gr.Textbox()
+                    text_output = gr.Textbox()
+                text_button = gr.Button("Flip")
+        with gr.TabItem("Flip Image"):
+            with gr.Column():
+                with gr.Row():
+                    image_input = gr.Image()
+                    image_output = gr.Image()
+                image_button = gr.Button("Flip")
+    
+    text_button.click(flip_text, inputs=text_input, outputs=text_output)
+    image_button.click(flip_image, inputs=image_input, outputs=image_output)
+    
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_gpt/run.py

@@ -0,0 +1,16 @@
+import gradio as gr
+
+api = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B")
+
+def complete_with_gpt(text):
+    # Use the last 50 characters of the text as context
+    return text[:-50] + api(text[-50:])
+
+with gr.Blocks() as demo:
+    textbox = gr.Textbox(placeholder="Type here and press enter...", lines=4)
+    btn = gr.Button("Generate")
+    
+    btn.click(complete_with_gpt, textbox, textbox)
+    
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_hello/run.py

@@ -0,0 +1,22 @@
+import gradio as gr
+
+
+def update(name):
+    return f"Welcome to Gradio, {name}!"
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown(
+    """
+    # Hello World!
+    Start typing below to see the output.
+    """)
+    inp = gr.Textbox(placeholder="What is your name?")
+    out = gr.Textbox()
+    
+    inp.change(fn=update, 
+               inputs=inp, 
+               outputs=out)
+
+demo.launch()

demo/blocks_js_methods/run.py

@@ -2,7 +2,7 @@ import gradio as gr
 
 blocks = gr.Blocks()
 
-with blocks:
+with blocks as demo:
     subject = gr.Textbox(placeholder="subject")
     verb = gr.Radio(["ate", "loved", "hated"])
     object = gr.Textbox(placeholder="object")
@@ -24,4 +24,5 @@ with blocks:
     verb.change(lambda x: x, verb, output3, _js="(x) => [...x].reverse().join('')")
     foo_bar_btn.click(None, [], subject, _js="(x) => x + ' foo'")
 
-blocks.launch()
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_simple_squares/run.py

@@ -1,8 +1,8 @@
 import gradio as gr
 
-test = gr.Blocks(css="#btn {color: red}")
+demo = gr.Blocks(css="#btn {color: red}")
 
-with test:
+with demo:
     num = gr.Variable(value=0)
     squared = gr.Number(value=0).style(text_color="blue", container_bg_color="yellow")
     btn = gr.Button("Next Square", elem_id="btn").style(rounded=False, bg_color="purple")
@@ -13,4 +13,5 @@ with test:
 
     btn.click(increase, [num], [num, squared])
 
-test.launch()
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_speech_text_length/run.py

@@ -1,32 +1,32 @@
-from transformers import pipeline
+# from transformers import pipeline
 
 import gradio as gr
 
-asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
-classifier = pipeline("text-classification")
+# asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
+# classifier = pipeline("text-classification")
 
 
-def speech_to_text(speech):
-    text = asr(speech)["text"]
-    return text
+# def speech_to_text(speech):
+#     text = asr(speech)["text"]
+#     return text
 
 
-def text_to_sentiment(text):
-    return classifier(text)[0]["label"]
+# def text_to_sentiment(text):
+#     return classifier(text)[0]["label"]
 
 
 demo = gr.Blocks()
 
 with demo:
-    m = gr.Audio(type="filepath")
-    t = gr.Textbox()
-    l = gr.Label()
+    audio_file = gr.Audio(type="filepath")
+    text = gr.Textbox()
+    label = gr.Label()
 
     b1 = gr.Button("Recognize Speech")
     b2 = gr.Button("Classify Sentiment")
 
-    b1.click(speech_to_text, inputs=m, outputs=t)
-    b2.click(text_to_sentiment, inputs=t, outputs=l)
+    # b1.click(speech_to_text, inputs=audio_file, outputs=text)
+    # b2.click(text_to_sentiment, inputs=text, outputs=label)
 
 if __name__ == "__main__":
     demo.launch()

demo/blocks_update/run.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-with gr.Blocks() as block:
+with gr.Blocks() as demo:
     gr.Markdown(
         """
     # Animal Generator
@@ -41,4 +41,6 @@ with gr.Blocks() as block:
 
     generate_btn.click(lambda x: x, details, output)
 
-block.launch()
+
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_webcam/run.py

@@ -1,7 +1,6 @@
 import numpy as np
 
 import gradio as gr
-from gradio import Templates
 
 
 def snap(image):

demo/gender_sentence_custom_interpretation/run.py

@@ -39,4 +39,4 @@ demo = gr.Interface(
 )
 
 if __name__ == "__main__":
-    demo.launch(auth=("a", "b"))
+    demo.launch()

demo/hello_world/run.py

@@ -4,7 +4,6 @@ import gradio as gr
 def greet(name):
     return "Hello " + name + "!!"
 
-
 demo = gr.Interface(fn=greet, inputs="text", outputs="text")
 
 if __name__ == "__main__":

demo/hello_world_2/run.py

@@ -12,4 +12,4 @@ demo = gr.Interface(
 )
 
 if __name__ == "__main__":
-    app, local_url, share_url = demo.launch()
+    demo.launch()

demo/hello_world_3/run.py

@@ -10,7 +10,7 @@ def greet(name, is_morning, temperature):
 
 demo = gr.Interface(
     fn=greet,
-    inputs=["text", "checkbox", gr.Slider(0, 100)],
+    inputs=["text", "checkbox", gr.Slider(minimum=0, maximum=100)],
     outputs=["text", "number"],
 )
 if __name__ == "__main__":

gradio.egg-info/PKG-INFO

@@ -1,4 +1,4 @@
-Metadata-Version: 2.1
+Metadata-Version: 1.0
 Name: gradio
 Version: 2.9b50
 Summary: Python library for easily interacting with trained machine learning models
@@ -6,6 +6,7 @@ Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq, Pete Allen, Ömer Faruk Özdemir
 Author-email: team@gradio.app
 License: Apache License 2.0
+Description: UNKNOWN
 Keywords: machine learning,visualization,reproducibility
 Platform: UNKNOWN
 Description-Content-Type: text/markdown
@@ -633,5 +634,4 @@ author={Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfoz
 journal={arXiv preprint arXiv:1906.02569},
 year={2019}
 }
-```
-
+```

gradio/.dockerignore

@@ -1 +1,2 @@
-templates/frontend
+templates/frontend
+templates/frontend/**/*

gradio/__init__.py

@@ -5,7 +5,7 @@ import gradio.inputs as inputs
 import gradio.outputs as outputs
 import gradio.processing_utils
 import gradio.templates
-from gradio.blocks import Blocks, Box, Column, Group, Row, TabItem, Tabs
+from gradio.blocks import Blocks
 from gradio.components import (
     HTML,
     JSON,
@@ -48,6 +48,7 @@ from gradio.flagging import (
     SimpleCSVLogger,
 )
 from gradio.interface import Interface, TabbedInterface, close_all
+from gradio.layouts import Box, Column, Group, Row, TabItem, Tabs
 from gradio.mix import Parallel, Series
 from gradio.templates import *
 

gradio/blocks.py

@@ -158,94 +158,6 @@ class BlockContext(Block):
         return y
 
 
-class Row(BlockContext):
-    def get_config(self):
-        return {"type": "row", **super().get_config()}
-
-    @staticmethod
-    def update(
-        visible: Optional[bool] = None,
-    ):
-        return {
-            "visible": visible,
-            "__type__": "update",
-        }
-
-    def style(
-        self,
-        equal_height: Optional[bool] = None,
-        mobile_collapse: Optional[bool] = None,
-    ):
-        if equal_height is not None:
-            self._style["equal_height"] = equal_height
-        if mobile_collapse is not None:
-            self._style["mobile_collapse"] = mobile_collapse
-
-        return self
-
-
-class Column(BlockContext):
-    def __init__(
-        self,
-        visible: bool = True,
-        variant: str = "default",
-    ):
-        """
-        variant: column type, 'default' (no background) or 'panel' (gray background color and rounded corners)
-        """
-        self.variant = variant
-        super().__init__(visible=visible)
-
-    def get_config(self):
-        return {
-            "type": "column",
-            "variant": self.variant,
-            **super().get_config(),
-        }
-
-    @staticmethod
-    def update(
-        variant: Optional[str] = None,
-        visible: Optional[bool] = None,
-    ):
-        return {
-            "variant": variant,
-            "visible": visible,
-            "__type__": "update",
-        }
-
-
-class Tabs(BlockContext):
-    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):
-    def __init__(self, label, **kwargs):
-        super().__init__(**kwargs)
-        self.label = label
-
-    def get_config(self):
-        return {"label": self.label, **super().get_config()}
-
-    def select(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("select", fn, inputs, outputs)
-
-
 class BlockFunction:
     def __init__(self, fn: Optional[Callable], preprocess: bool, postprocess: bool):
         self.fn = fn
@@ -256,6 +168,19 @@ class BlockFunction:
 
 
 class Blocks(BlockContext):
+    """
+    The Blocks class is a low-level API that allows you to create custom web
+    applications entirely in Python. Compared to the Interface class, Blocks offers
+    more flexibility and control over: (1) the layout of components (2) the events that
+    trigger the execution of functions (3) data flows (e.g. inputs can trigger outputs,
+    which can trigger the next level of outputs). Blocks also offers ways to group
+    together related demos e.g. using tabs.
+
+    The basic usage of Blocks is as follows: create a Blocks object, then use it as a
+    context (with the "with" statement), and then define layouts, components, or events
+    within the Blocks context. Finally, call the launch() method to launch the demo.
+    """
+
     def __init__(
         self,
         theme: str = "default",
@@ -264,7 +189,12 @@ class Blocks(BlockContext):
         css: Optional[str] = None,
         **kwargs,
     ):
-
+        """
+        Parameters:
+        theme (str): which theme to use - right now, only "default" is supported.
+        analytics_enabled (bool | None): whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.
+        mode (str): a human-friendly name for the kind of Blocks interface being created.
+        """
         # Cleanup shared parameters with Interface #TODO: is this part still necessary after Interface with Blocks?
         self.save_to = None
         self.api_mode = False
@@ -467,13 +397,12 @@ class Blocks(BlockContext):
     def launch(
         self,
         inline: bool = None,
-        inbrowser: bool = None,
+        inbrowser: bool = False,
         share: bool = False,
         debug: bool = False,
         enable_queue: bool = None,
         auth: Optional[Callable | Tuple[str, str] | List[Tuple[str, str]]] = None,
         auth_message: Optional[str] = None,
-        private_endpoint: Optional[str] = None,
         prevent_thread_lock: bool = False,
         show_error: bool = True,
         server_name: Optional[str] = None,
@@ -488,27 +417,28 @@ class Blocks(BlockContext):
         ssl_keyfile_password: Optional[str] = None,
     ) -> Tuple[FastAPI, str, str]:
         """
-        Launches the webserver that serves the UI for the interface.
+        Launches a simple web server that serves the demo. Can also be used to create a
+        shareable link.
         Parameters:
-        inline (bool): whether to display in the interface inline on python notebooks.
+        inline (bool | None): whether to display in the interface inline in an iframe. Defaults to True in python notebooks; False otherwise.
         inbrowser (bool): whether to automatically launch the interface in a new tab on the default browser.
-        share (bool): whether to create a publicly shareable link from your computer for the interface.
-        debug (bool): if True, and the interface was launched from Google Colab, prints the errors in the cell output.
-        auth (Callable, Union[Tuple[str, str], List[Tuple[str, str]]]): If provided, username and password (or list of username-password tuples) required to access interface. Can also provide function that takes username and password and returns True if valid login.
-        auth_message (str): If provided, HTML message provided on login page.
-        private_endpoint (str): If provided, the public URL of the interface will be this endpoint (should generally be unchanged).
+        share (bool): whether to create a publicly shareable link for the interface. Creates an SSH tunnel to make your UI accessible from anywhere.
+        debug (bool): if True, blocks the main thread from running. If running in Google Colab, this is needed to print the errors in the cell output.
+        auth (Callable | Union[Tuple[str, str] | List[Tuple[str, str]]] | None): If provided, username and password (or list of username-password tuples) required to access interface. Can also provide function that takes username and password and returns True if valid login.
+        auth_message (str | None): If provided, HTML message provided on login page.
         prevent_thread_lock (bool): If True, the interface will block the main thread while the server is running.
         show_error (bool): If True, any errors in the interface will be printed in the browser console log
-        server_port (int): will start gradio app on this port (if available). Can be set by environment variable GRADIO_SERVER_PORT.
-        server_name (str): to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME.
+        server_port (int | None): will start gradio app on this port (if available). Can be set by environment variable GRADIO_SERVER_PORT. If None, will search for an available port starting at 7860.
+        server_name (str | None): to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME. If None, will use "127.0.0.1".
         show_tips (bool): if True, will occasionally show tips about new Gradio features
+        enable_queue (bool | None): if True, inference requests will be served through a queue instead of with parallel threads. Required for longer inference times (> 1min) to prevent timeout. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
         width (int): The width in pixels of the iframe element containing the interface (used if inline=True)
         height (int): The height in pixels of the iframe element containing the interface (used if inline=True)
         encrypt (bool): If True, flagged data will be encrypted by key provided by creator at launch
-        favicon_path (str): If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.
-        ssl_keyfile (str): If a path to a file is provided, will use this as the private key file to create a local server running on https.
-        ssl_certfile (str): If a path to a file is provided, will use this as the signed certificate for https. Needs to be provided if ssl_keyfile is provided.
-        ssl_keyfile_password (str): If a password is provided, will use this with the ssl certificate for https.
+        favicon_path (str | None): If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.
+        ssl_keyfile (str | None): If a path to a file is provided, will use this as the private key file to create a local server running on https.
+        ssl_certfile (str | None): If a path to a file is provided, will use this as the signed certificate for https. Needs to be provided if ssl_keyfile is provided.
+        ssl_keyfile_password (str | None): If a password is provided, will use this with the ssl certificate for https.
         Returns:
         app (FastAPI): FastAPI app object that is running the demo
         local_url (str): Locally accessible link to the demo
@@ -578,23 +508,15 @@ class Blocks(BlockContext):
         if is_colab and self.requires_permissions:
             print(strings.en["MEDIA_PERMISSIONS_IN_COLAB"])
 
-        if private_endpoint is not None:
-            share = True
-
         if share:
             if self.is_space:
                 raise RuntimeError("Share is not supported when you are in Spaces")
             try:
                 if self.share_url is None:
-                    share_url = networking.setup_tunnel(
-                        self.server_port, private_endpoint
-                    )
+                    share_url = networking.setup_tunnel(self.server_port, None)
                     self.share_url = share_url
                 print(strings.en["SHARE_LINK_DISPLAY"].format(self.share_url))
-                if private_endpoint:
-                    print(strings.en["PRIVATE_LINK_MESSAGE"])
-                else:
-                    print(strings.en["SHARE_LINK_MESSAGE"])
+                print(strings.en["SHARE_LINK_MESSAGE"])
             except RuntimeError:
                 if self.analytics_enabled:
                     utils.error_analytics(self.ip_address, "Not able to set up tunnel")
@@ -686,31 +608,3 @@ class Blocks(BlockContext):
             self.server.close()
             if self.enable_queue:
                 queueing.close()
-
-
-class Group(BlockContext):
-    def get_config(self):
-        return {"type": "group", **super().get_config()}
-
-    @staticmethod
-    def update(
-        visible: Optional[bool] = None,
-    ):
-        return {
-            "visible": visible,
-            "__type__": "update",
-        }
-
-
-class Box(BlockContext):
-    def get_config(self):
-        return {"type": "box", **super().get_config()}
-
-    @staticmethod
-    def update(
-        visible: Optional[bool] = None,
-    ):
-        return {
-            "visible": visible,
-            "__type__": "update",
-        }

gradio/components.py

@@ -1,3 +1,7 @@
+"""Contains all of the components that can be used used with Gradio Interface / Blocks.
+Along with the docs for each component, you can find the names of example demos that use
+each component. These demos are located in the `demo` directory."""
+
 from __future__ import annotations
 
 import inspect
@@ -23,6 +27,14 @@ from markdown_it import MarkdownIt
 
 from gradio import media_data, processing_utils
 from gradio.blocks import Block
+from gradio.events import (
+    Changeable,
+    Clearable,
+    Clickable,
+    Editable,
+    Playable,
+    Submittable,
+)
 
 
 class Component(Block):
@@ -248,186 +260,13 @@ class IOComponent(Component):
         return self
 
 
-class Changeable(Component):
-    def change(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        status_tracker: Optional[StatusTracker] = None,
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            status_tracker: StatusTracker to visualize function progress
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
-        Returns: None
-        """
-        self.set_event_trigger(
-            "change", fn, inputs, outputs, status_tracker=status_tracker, js=_js
-        )
-
-
-class Clickable(Component):
-    def click(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        status_tracker: Optional[StatusTracker] = None,
-        queue=None,
-        _js: Optional[str] = None,
-        _preprocess: bool = True,
-        _postprocess: bool = True,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            status_tracker: StatusTracker to visualize function progress
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-            _preprocess: If False, will not run preprocessing of component data before running 'fn'.
-            _postprocess: If False, will not run postprocessing of component data before returning 'fn' output.
-        Returns: None
-        """
-        self.set_event_trigger(
-            "click",
-            fn,
-            inputs,
-            outputs,
-            status_tracker=status_tracker,
-            queue=queue,
-            js=_js,
-            preprocess=_preprocess,
-            postprocess=_postprocess,
-        )
-
-
-class Submittable(Component):
-    def submit(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        status_tracker: Optional[StatusTracker] = None,
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            status_tracker: StatusTracker to visualize function progress
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger(
-            "submit", fn, inputs, outputs, status_tracker=status_tracker, js=_js
-        )
-
-
-class Editable(Component):
-    def edit(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger("edit", fn, inputs, outputs, js=_js)
-
-
-class Clearable(Component):
-    def clear(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger("submit", fn, inputs, outputs, js=_js)
-
-
-class Playable(Component):
-    def play(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger("play", fn, inputs, outputs, js=_js)
-
-    def pause(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger("pause", fn, inputs, outputs, js=_js)
-
-    def stop(
-        self,
-        fn: Callable,
-        inputs: List[Component],
-        outputs: List[Component],
-        _js: Optional[str] = None,
-    ):
-        """
-        Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
-        Returns: None
-        """
-        self.set_event_trigger("stop", fn, inputs, outputs, js=_js)
-
-
 class Textbox(Changeable, Submittable, IOComponent):
     """
-    Component creates a textbox for user to enter string input or display string output. Provides a string as an argument to the wrapped function.
-    Input type: str
-    Output type: str
+    Creates a textarea for user to enter string input or display string output.
+    Preprocessing: passes textarea value as a {str} into the function.
+    Postprocessing: expects a {str} returned from function and sets textarea value to it.
 
-    Demos: hello_world, diff_texts, sentence_builder
+    Demos: hello_world, diff_texts, sentence_builder, blocks_gpt
     """
 
     def __init__(
@@ -628,12 +467,11 @@ class Textbox(Changeable, Submittable, IOComponent):
 
 class Number(Changeable, Submittable, IOComponent):
     """
-    Component creates a field for user to enter numeric input or display numeric output. Provides a number as an argument to the wrapped function.
-    Can be used as an output as well.
+    Creates a numeric field for user to enter numbers as input or display numeric output.
+    Preprocessing: passes field value as a {float} or {int} into the function, depending on `precision`.
+    Postprocessing: expects an {int} or {float} returned from the function and sets field value to it.
 
-    Input type: float or int.
-    Output type: float or int.
-    Demos: tax_calculator, titanic_survival
+    Demos: tax_calculator, titanic_survival, blocks_static_textbox, blocks_simple_squares
     """
 
     def __init__(
@@ -654,8 +492,7 @@ class Number(Changeable, Submittable, IOComponent):
         label (Optional[str]): component name in interface.
         show_label (bool): if True, will display label.
         visible (bool): If False, component will be hidden.
-        precision (Optional[int]): Precision to round input/output to. If set to 0, will
-            round to nearest integer and covert type to int. If None, no rounding happens.
+        precision (Optional[int]): Precision to round input/output to. If set to 0, will round to nearest integer and covert type to int. If None, no rounding happens.
         """
         self.value = self.round_to_precision(value, precision)
         self.precision = precision
@@ -825,9 +662,10 @@ class Number(Changeable, Submittable, IOComponent):
 
 class Slider(Changeable, IOComponent):
     """
-    Component creates a slider that ranges from `minimum` to `maximum`. Provides a number as an argument to the wrapped function.
+    Creates a slider that ranges from `minimum` to `maximum` with a step size of `step`.
+    Preprocessing: passes slider value as a {float} into the function.
+    Postprocessing: expects an {int} or {float} returned from function and sets slider value to it as long as it is within range.
 
-    Input type: float
     Demos: sentence_builder, generate_tone, titanic_survival
     """
 
@@ -953,7 +791,7 @@ class Slider(Changeable, IOComponent):
 
         # Output Functionalities
 
-    def postprocess(self, y: float | None):
+    def postprocess(self, y: int | float | None):
         """
         Any postprocessing needed to be performed on function output.
         """
@@ -979,10 +817,10 @@ class Slider(Changeable, IOComponent):
 
 class Checkbox(Changeable, IOComponent):
     """
-    Component creates a checkbox that can be set to `True` or `False`. Provides a boolean as an argument to the wrapped function.
+    Creates a checkbox that can be set to `True` or `False`.
 
-    Input type: bool
-    Output type: bool
+    Preprocessing: passes the status of the checkbox as a {bool} into the function.
+    Postprocessing: expects a {bool} returned from the function and, if it is True, checks the checkbox.
     Demos: sentence_builder, titanic_survival
     """
 
@@ -1105,9 +943,10 @@ class Checkbox(Changeable, IOComponent):
 
 class CheckboxGroup(Changeable, IOComponent):
     """
-    Component creates a set of checkboxes of which a subset can be selected. Provides a list of strings representing the selected choices as an argument to the wrapped function.
+    Creates a set of checkboxes of which a subset can be checked.
+    Preprocessing: passes the list of checked checkboxes as a {List[str]} or their indices as a {List[int]} into the function, depending on `type`.
+    Postprocessing: expects a {List[str]}, each element of which becomes a checked checkbox.
 
-    Input type: Union[List[str], List[int]]
     Demos: sentence_builder, titanic_survival, fraud_detector
     """
 
@@ -1271,10 +1110,11 @@ class CheckboxGroup(Changeable, IOComponent):
 
 class Radio(Changeable, IOComponent):
     """
-    Component creates a set of radio buttons of which only one can be selected. Provides string representing selected choice as an argument to the wrapped function.
+    Creates a set of radio buttons of which only one can be selected.
+    Preprocessing: passes the value of the selected radio button as a {str} or its index as an {int} into the function, depending on `type`.
+    Postprocessing: expects a {str} corresponding to the value of the radio button to be selected.
 
-    Input type: Union[str, int]
-    Demos: sentence_builder, tax_calculator, titanic_survival
+    Demos: sentence_builder, tax_calculator, titanic_survival, blocks_essay
     """
 
     def __init__(
@@ -1421,9 +1261,10 @@ class Radio(Changeable, IOComponent):
 
 class Dropdown(Radio):
     """
-    Component creates a dropdown of which only one can be selected. Provides string representing selected choice as an argument to the wrapped function.
+    Creates a dropdown of which only one entry can be selected.
+    Preprocessing: passes the value of the selected dropdown entry as a {str} or its index as an {int} into the function, depending on `type`.
+    Postprocessing: expects a {str} corresponding to the value of the dropdown entry to be selected.
 
-    Input type: Union[str, int]
     Demos: sentence_builder, filter_records, titanic_survival
     """
 
@@ -1466,10 +1307,10 @@ class Dropdown(Radio):
 
 class Image(Editable, Clearable, Changeable, IOComponent):
     """
-    Component creates an image component with input and output capabilities.
+    Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).
+    Preprocessing: passes the uploaded image as a {numpy.array}, {PIL.Image} or {str} filepath depending on `type`.
+    Postprocessing: expects a {numpy.array}, {PIL.Image} or {str} filepath to an image and displays the image.
 
-    Input type: Union[numpy.array, PIL.Image, file-object]
-    Output type: Union[numpy.array, PIL.Image, str, matplotlib.pyplot, Tuple[Union[numpy.array, PIL.Image, str], List[Tuple[str, float, float, float, float]]]]
     Demos: image_classifier, image_mod, webcam, digit_classifier
     """
 
@@ -1796,10 +1637,10 @@ class Image(Editable, Clearable, Changeable, IOComponent):
 
 class Video(Changeable, Clearable, Playable, IOComponent):
     """
-    Component creates a video file upload that is converted to a file path.
+    Creates an video component that can be used to upload/record videos (as an input) or display videos (as an output).
+    Preprocessing: passes the uploaded video as a {str} filepath whose extension can be set by `format`.
+    Postprocessing: expects a {str} filepath to a video which is displayed.
 
-    Input type: filepath
-    Output type: filepath
     Demos: video_flip
     """
 
@@ -1807,7 +1648,7 @@ class Video(Changeable, Clearable, Playable, IOComponent):
         self,
         value: str = "",
         *,
-        type: Optional[str] = None,
+        format: Optional[str] = None,
         source: str = "upload",
         label: Optional[str] = None,
         show_label: bool = True,
@@ -1819,7 +1660,7 @@ class Video(Changeable, Clearable, Playable, IOComponent):
         """
         Parameters:
         value(str): A path or URL for the default value that Video component is going to take.
-        type (str): Type of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.
+        format (str): Format of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.
         source (str): Source of video. "upload" creates a box where user can drop an video file, "webcam" allows user to record a video from their webcam.
         label (Optional[str]): component name in interface.
         show_label (bool): if True, will display label.
@@ -1828,7 +1669,7 @@ class Video(Changeable, Clearable, Playable, IOComponent):
         self.value = (
             processing_utils.encode_url_or_file_to_base64(value) if value else None
         )
-        self.type = type
+        self.format = format
         self.source = source
         IOComponent.__init__(
             self,
@@ -1891,8 +1732,8 @@ class Video(Changeable, Clearable, Playable, IOComponent):
             )
         file_name = file.name
         uploaded_format = file_name.split(".")[-1].lower()
-        if self.type is not None and uploaded_format != self.type:
-            output_file_name = file_name[0 : file_name.rindex(".") + 1] + self.type
+        if self.format is not None and uploaded_format != self.format:
+            output_file_name = file_name[0 : file_name.rindex(".") + 1] + self.format
             ff = FFmpeg(inputs={file_name: None}, outputs={output_file_name: None})
             ff.run()
             return output_file_name
@@ -1921,8 +1762,8 @@ class Video(Changeable, Clearable, Playable, IOComponent):
         (str): base64 url data
         """
         returned_format = y.split(".")[-1].lower()
-        if self.type is not None and returned_format != self.type:
-            output_file_name = y[0 : y.rindex(".") + 1] + self.type
+        if self.format is not None and returned_format != self.format:
+            output_file_name = y[0 : y.rindex(".") + 1] + self.format
             ff = FFmpeg(inputs={y: None}, outputs={output_file_name: None})
             ff.run()
             y = output_file_name
@@ -1937,17 +1778,16 @@ class Video(Changeable, Clearable, Playable, IOComponent):
 
 class Audio(Changeable, Clearable, Playable, IOComponent):
     """
-    Component accepts audio input files or creates an audio player that plays the output audio.
+    Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).
+    Preprocessing: passes the uploaded audio as a {Tuple(int, numpy.array)} corresponding to (sample rate, data) or as a {str} filepath, depending on `type`
+    Postprocessing: expects a {Tuple(int, numpy.array)} corresponding to (sample rate, data) or as a {str} filepath to an audio file, which gets displayed
 
-
-    Input type: Union[Tuple[int, numpy.array], file-object, numpy.array]
-    Output type: Union[Tuple[int, numpy.array], str]
     Demos: main_note, generate_tone, reverse_audio, spectogram
     """
 
     def __init__(
         self,
-        value="",
+        value: str = "",
         *,
         source: str = "upload",
         type: str = "numpy",
@@ -1960,7 +1800,7 @@ class Audio(Changeable, Clearable, Playable, IOComponent):
     ):
         """
         Parameters:
-        value (str): IGNORED
+        value (str): A path or URL for the default value that Audio component is going to take.
         source (str): Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input.
         type (str): The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (width, height, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "file" produces a temporary file object whose path can be retrieved by file_obj.name, "filepath" returns the path directly.
         label (Optional[str]): component name in interface.
@@ -2218,10 +2058,10 @@ class Audio(Changeable, Clearable, Playable, IOComponent):
 
 class File(Changeable, Clearable, IOComponent):
     """
-    Component accepts generic file uploads and output..
+    Creates a file component that allows uploading generic file (when used as an input) and or displaying generic files (output).
+    Preprocessing: passes the uploaded file as a {file-object} or {List[file-object]} depending on `file_count` (or a {bytes}/{List{bytes}} depending on `type`)
+    Postprocessing: expects a {str} path to a file returned by the function.
 
-    Input type: Union[file-object, bytes, List[Union[file-object, bytes]]]
-    Output type: Union[file-like, str]
     Demos: zip_to_json, zip_two_files
     """
 
@@ -2362,9 +2202,10 @@ class File(Changeable, Clearable, IOComponent):
 
 class Dataframe(Changeable, IOComponent):
     """
-    Component accepts or displays 2D input  through a spreadsheet interface.
+    Accepts or displays 2D input through a spreadsheet-like component for dataframes.
+    Preprocessing: passes the uploaded spreadsheet data as a {pandas.DataFrame}, {numpy.array}, {List[List]}, or {List} depending on `type`
+    Postprocessing: expects a {pandas.DataFrame}, {numpy.array}, {List[List]}, or {List} which is rendered in the spreadsheet.
 
-    Input or Output type: Union[pandas.DataFrame, numpy.array, List[Union[str, float]], List[List[Union[str, float]]]]
     Demos: filter_records, matrix_transpose, tax_calculator
     """
 
@@ -2388,13 +2229,14 @@ class Dataframe(Changeable, IOComponent):
         **kwargs,
     ):
         """
-        Input Parameters:
-        value (List[List[Any]]): Default value as a pandas DataFrame. TODO: Add support for default value as a filepath
-        row_count (Union[int, Tuple[int, str]]): Limit number of rows for input and decide whether user can create new rows. The first element of the tuple is an `int`, the row count; the second should be 'fixed' or 'dynamic', the new row behaviour. If an `int` is passed the rows default to 'dynamic'
-        col_count (Union[int, Tuple[int, str]]): Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic'
-        datatype (Union[str, List[str]]): Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", and "date".
+        Parameters:
+        value (List[List[Any]]): Default value as a 2-dimensional list of values.
+        headers (List[str] | None): List of str header names. If None, no headers are shown.
+        row_count (int | Tuple[int, str]): Limit number of rows for input and decide whether user can create new rows. The first element of the tuple is an `int`, the row count; the second should be 'fixed' or 'dynamic', the new row behaviour. If an `int` is passed the rows default to 'dynamic'
+        col_count (int | Tuple[int, str]): Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic'
+        datatype (str | List[str]): Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", and "date".
         type (str): Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.
-        headers (List[str]): Header names to dataframe. Only applicable if type is "numpy" or "array".
+        label (str): component name in interface.
         max_rows (int): Maximum number of rows to display at once. Set to None for infinite.
         max_cols (int): Maximum number of columns to display at once. Set to None for infinite.
         overflow_row_behaviour (str): If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.
@@ -2569,10 +2411,10 @@ class Dataframe(Changeable, IOComponent):
 
 class Timeseries(Changeable, IOComponent):
     """
-    Component accepts pandas.DataFrame uploaded as a timeseries csv file or renders a dataframe consisting of a time series as output.
+    Creates a component that can be used to upload/preview timeseries csv files or display a dataframe consisting of a time series graphically.
+    Preprocessing: passes the uploaded timeseries data as a {pandas.DataFrame} into the function
+    Postprocessing: expects a {pandas.DataFrame} to be returned, which is then displayed as a timeseries graph
 
-    Input type: pandas.DataFrame
-    Output type: pandas.DataFrame
     Demos: fraud_detector
     """
 
@@ -2592,13 +2434,13 @@ class Timeseries(Changeable, IOComponent):
     ):
         """
         Parameters:
-        value: File path for the timeseries csv file. TODO: Add support for default value as a pd.DataFrame
+        value: File path for the timeseries csv file.
         x (str): Column name of x (time) series. None if csv has no headers, in which case first column is x series.
         y (Union[str, List[str]]): Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series.
-        label (Optional[str]): component name in interface.
+        label (str): component name in interface.
+        colors (List[str]): an ordered list of colors to use for each line plot
         show_label (bool): if True, will display label.
         visible (bool): If False, component will be hidden.
-        colors List[str]: an ordered list of colors to use for each line plot
         """
         self.value = pd.read_csv(value) if value is not None else None
         self.x = x
@@ -2691,11 +2533,12 @@ class Timeseries(Changeable, IOComponent):
 
 class Variable(IOComponent):
     """
-    Special hidden component that stores state across runs of the interface.
+    Special hidden component that stores session state across runs of the demo by the
+    same user. The value of the Variable is cleared when the user refreshes the page.
 
-    Input type: Any
-    Output type: Any
-    Demos: chatbot
+    Preprocessing: No preprocessing is performed
+    Postprocessing: No postprocessing is performed
+    Demos: chatbot, blocks_simple_squares
     """
 
     def __init__(
@@ -2725,8 +2568,10 @@ class Variable(IOComponent):
 
 class Label(Changeable, IOComponent):
     """
-    Component outputs a classification label, along with confidence scores of top categories if provided. Confidence scores are represented as a dictionary mapping labels to scores between 0 and 1.
-    Output type: Union[Dict[str, float], str, int, float]
+    Displays a classification label, along with confidence scores of top categories, if provided.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a {Dict[str, float]} of classes and confidences, or {str} with just the class or an {int}/{float} for regression outputs.
+
     Demos: image_classifier, main_note, titanic_survival
     """
 
@@ -2852,9 +2697,10 @@ class Label(Changeable, IOComponent):
 
 class HighlightedText(Changeable, IOComponent):
     """
-    Component creates text that contains spans that are highlighted by category or numerical value.
-    Output is represent as a list of Tuple pairs, where the first element represents the span of text represented by the tuple, and the second element represents the category or value of the text.
-    Output type: List[Tuple[str, Union[float, str]]]
+    Displays text that contains spans that are highlighted by category or numerical value.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a {List[Tuple[str, float | str]]]} consisting of spans of text and their associated labels.
+
     Demos: diff_texts, text_analysis
     """
 
@@ -2955,9 +2801,11 @@ class HighlightedText(Changeable, IOComponent):
 
 class JSON(Changeable, IOComponent):
     """
-    Used for JSON output. Expects a JSON string or a Python object that is JSON serializable.
-    Output type: Union[str, Any]
-    Demos: zip_to_json
+    Used to display arbitrary JSON output prettily.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a valid JSON {str} -- or a {list} or {dict} that is JSON serializable.
+
+    Demos: zip_to_json, blocks_xray
     """
 
     def __init__(
@@ -3029,8 +2877,10 @@ class JSON(Changeable, IOComponent):
 
 class HTML(Changeable, IOComponent):
     """
-    Used for HTML output. Expects an HTML valid string.
-    Output type: str
+    Used to display arbitrary HTML output.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a valid HTML {str}.
+
     Demos: text_analysis
     """
 
@@ -3093,6 +2943,14 @@ class HTML(Changeable, IOComponent):
 
 
 class Gallery(IOComponent):
+    """
+    Used to display a list of images as a gallery that can be scrolled through.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a list of images in any format, {List[numpy.array | PIL.Image | str]}, and displays them.
+
+    Demos: fake_gan
+    """
+
     def __init__(
         self,
         *,
@@ -3178,8 +3036,10 @@ class Gallery(IOComponent):
 # max_grid=[3], grid_behavior="scale", height="auto"
 class Carousel(IOComponent):
     """
-    Component displays a set of output components that can be scrolled through.
-    Output type: List[List[Any]]
+    Used to display a list of arbitrary components that can be scrolled through.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: Expects a nested {List[List]} where the inner elements depend on the components in the Carousel.
+
     Demos: disease_report
     """
 
@@ -3280,8 +3140,10 @@ class Carousel(IOComponent):
 
 class Chatbot(Changeable, IOComponent):
     """
-    Component displays a chatbot output showing both user submitted messages and responses
-    Output type: List[Tuple[str, str]]
+    Displays a chatbot output showing both user submitted messages and responses
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a {List[Tuple[str, str]]}, a list of tuples with user inputs and responses.
+
     Demos: chatbot
     """
 
@@ -3355,7 +3217,7 @@ class Model3D(Changeable, Editable, Clearable, IOComponent):
     Component creates a 3D Model component with input and output capabilities.
     Input type: File object of type (.obj, glb, or .gltf)
     Output type: filepath
-    Demos: Model3D
+    Demos: model3D
     """
 
     def __init__(
@@ -3475,15 +3337,16 @@ class Model3D(Changeable, Editable, Clearable, IOComponent):
 
 class Plot(Changeable, Clearable, IOComponent):
     """
-    Used for plot output.
-    Output type: matplotlib plt, plotly figure, or Bokeh fig (json_item format)
-    Demos: outbreak_forecast
+    Used to display various kinds of plots (matplotlib, plotly, or bokeh are supported)
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects either a {matplotlib.pyplot.Figure}, a {plotly.graph_objects._figure.Figure}, or a {dict} corresponding to a bokeh plot (json_item format)
+
+    Demos: outbreak_forecast, blocks_kinematics
     """
 
     def __init__(
         self,
         *,
-        type: str = None,
         label: Optional[str] = None,
         show_label: bool = True,
         visible: bool = True,
@@ -3492,12 +3355,10 @@ class Plot(Changeable, Clearable, IOComponent):
     ):
         """
         Parameters:
-        type (str): type of plot (matplotlib, plotly)
         label (Optional[str]): component name in interface.
         show_label (bool): if True, will display label.
         visible (bool): If False, component will be hidden.
         """
-        self.type = type
         IOComponent.__init__(
             self,
             label=label,
@@ -3534,32 +3395,25 @@ class Plot(Changeable, Clearable, IOComponent):
         (str): plot base64 or json
         """
         dtype = self.type
-        if self.type == "plotly":
-            out_y = y.to_json()
-        elif self.type == "matplotlib":
+        if isinstance(y, (ModuleType, matplotlib.pyplot.Figure)):
+            dtype = "matplotlib"
             out_y = processing_utils.encode_plot_to_base64(y)
-        elif self.type == "bokeh":
+        elif isinstance(y, dict):
+            dtype = "bokeh"
             out_y = json.dumps(y)
-        elif self.type == "auto":
-            if isinstance(y, (ModuleType, matplotlib.pyplot.Figure)):
-                dtype = "matplotlib"
-                out_y = processing_utils.encode_plot_to_base64(y)
-            elif isinstance(y, dict):
-                dtype = "bokeh"
-                out_y = json.dumps(y)
-            else:
-                dtype = "plotly"
-                out_y = y.to_json()
         else:
-            raise ValueError(
-                "Unknown type. Please choose from: 'plotly', 'matplotlib', 'bokeh'."
-            )
+            dtype = "plotly"
+            out_y = y.to_json()
         return {"type": dtype, "plot": out_y}
 
 
 class Markdown(Component):
     """
-    Used for Markdown output. Expects a valid string that is rendered into Markdown.
+    Used to render arbitrary Markdown output.
+    Preprocessing: this component does *not* accept input.
+    Postprocessing: expects a valid {str} that can be rendered as Markdown.
+
+    Demos: blocks_hello, blocks_kinematics, blocks_neural_instrument_coding
     """
 
     def __init__(
@@ -3609,7 +3463,9 @@ class Markdown(Component):
 
 class Button(Clickable, Component):
     """
-    Used to create a button, that can be assigned arbitrary click() events.
+    Used to create a button, that can be assigned arbitrary click() events. Accepts neither input nor output.
+
+    Demos: blocks_inputs, blocks_kinematics
     """
 
     def __init__(

gradio/deprecation.py

@@ -15,6 +15,9 @@ DEPRECATION_MESSAGE = {
     "numeric": simple_deprecated_notice("numeric"),
     "verbose": simple_deprecated_notice("verbose"),
     "allow_screenshot": simple_deprecated_notice("allow_screenshot"),
+    "layout": simple_deprecated_notice("layout"),
+    "show_input": simple_deprecated_notice("show_input"),
+    "show_output": simple_deprecated_notice("show_output"),
     "capture_session": simple_deprecated_notice("capture_session"),
     "api_mode": simple_deprecated_notice("api_mode"),
     "show_tips": use_in_launch("show_tips"),

gradio/events.py

@@ -0,0 +1,181 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING, Any, Callable, Dict, List, Optional, Tuple
+
+from gradio.blocks import Block
+
+if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
+    from gradio.components import Component, StatusTracker
+
+
+class Changeable(Block):
+    def change(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        status_tracker: Optional[StatusTracker] = None,
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            status_tracker: StatusTracker to visualize function progress
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
+        Returns: None
+        """
+        self.set_event_trigger(
+            "change", fn, inputs, outputs, status_tracker=status_tracker, js=_js
+        )
+
+
+class Clickable(Block):
+    def click(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        status_tracker: Optional[StatusTracker] = None,
+        queue=None,
+        _js: Optional[str] = None,
+        _preprocess: bool = True,
+        _postprocess: bool = True,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            status_tracker: StatusTracker to visualize function progress
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            _preprocess: If False, will not run preprocessing of component data before running 'fn'.
+            _postprocess: If False, will not run postprocessing of component data before returning 'fn' output.
+        Returns: None
+        """
+        self.set_event_trigger(
+            "click",
+            fn,
+            inputs,
+            outputs,
+            status_tracker=status_tracker,
+            queue=queue,
+            js=_js,
+            preprocess=_preprocess,
+            postprocess=_postprocess,
+        )
+
+
+class Submittable(Block):
+    def submit(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        status_tracker: Optional[StatusTracker] = None,
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            status_tracker: StatusTracker to visualize function progress
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger(
+            "submit", fn, inputs, outputs, status_tracker=status_tracker, js=_js
+        )
+
+
+class Editable(Block):
+    def edit(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger("edit", fn, inputs, outputs, js=_js)
+
+
+class Clearable(Block):
+    def clear(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger("submit", fn, inputs, outputs, js=_js)
+
+
+class Playable(Block):
+    def play(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger("play", fn, inputs, outputs, js=_js)
+
+    def pause(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger("pause", fn, inputs, outputs, js=_js)
+
+    def stop(
+        self,
+        fn: Callable,
+        inputs: List[Component],
+        outputs: List[Component],
+        _js: Optional[str] = None,
+    ):
+        """
+        Parameters:
+            fn: Callable function
+            inputs: List of inputs
+            outputs: List of outputs
+            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+        Returns: None
+        """
+        self.set_event_trigger("stop", fn, inputs, outputs, js=_js)

gradio/inputs.py

@@ -80,7 +80,7 @@ class Number(C_Number):
 
 class Slider(C_Slider):
     """
-    Component creates a slider that ranges from `minimum` to `maximum`. Provides a number as an argument to the wrapped function.
+    Component creates a slider that ranges from `minimum` to `maximum`. Provides number as an argument to the wrapped function.
     Input type: float
     Demos: sentence_builder, generate_tone, titanic_survival
     """
@@ -323,7 +323,7 @@ class Video(C_Video):
             "Usage of gradio.inputs is deprecated, and will not be supported in the future, please import your components from gradio.components",
             DeprecationWarning,
         )
-        super().__init__(type=type, source=source, label=label, optional=optional)
+        super().__init__(format=type, source=source, label=label, optional=optional)
 
 
 class Audio(C_Audio):

gradio/interface.py

@@ -21,7 +21,7 @@ from markdown_it import MarkdownIt
 from mdit_py_plugins.footnote import footnote_plugin
 
 from gradio import interpretation, utils
-from gradio.blocks import Blocks, Column, Row, TabItem, Tabs
+from gradio.blocks import Blocks
 from gradio.components import (
     Button,
     Component,
@@ -34,6 +34,7 @@ from gradio.components import (
 )
 from gradio.external import load_from_pipeline, load_interface  # type: ignore
 from gradio.flagging import CSVLogger, FlaggingCallback  # type: ignore
+from gradio.layouts import Column, Row, TabItem, Tabs
 from gradio.process_examples import cache_interface_examples, load_from_cache
 
 if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
@@ -42,9 +43,9 @@ if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
 
 class Interface(Blocks):
     """
-    Gradio interfaces are created by constructing a `Interface` object
-    with a locally-defined function, or with `Interface.load()` with the path
-    to a repo or by `Interface.from_pipeline()` with a Transformers Pipeline.
+    The Interface class is a high-level abstraction that allows you to create a
+    web-based demo around a machine learning model or arbitrary Python function
+    by specifying: (1) the function (2) the desired input components and (3) desired output components.
     """
 
     # stores references to all currently existing Interface instances
@@ -73,12 +74,14 @@ class Interface(Blocks):
         **kwargs,
     ) -> Interface:
         """
-        Class method to construct an Interface from an external source repository, such as huggingface.
+        Class method that constructs an Interface from a Hugging Face repo. Can accept
+        model repos (if src is "models") or Space repos (if src is "spaces"). The input
+        and output components are automatically loaded from the repo.
         Parameters:
-        name (str): the name of the model (e.g. "gpt2"), can include the `src` as prefix (e.g. "huggingface/gpt2")
-        src (str): the source of the model: `huggingface` or `gradio` (or empty if source is provided as a prefix in `name`)
-        api_key (str): optional api key for use with Hugging Face Model Hub
-        alias (str): optional, used as the name of the loaded model instead of the default name
+        name (str): the name of the model (e.g. "gpt2"), can include the `src` as prefix (e.g. "models/gpt2")
+        src (str | None): the source of the model: `models` or `spaces` (or empty if source is provided as a prefix in `name`)
+        api_key (str | None): optional api key for use with Hugging Face Hub
+        alias (str | None): optional string used as the name of the loaded model instead of the default name
         Returns:
         (gradio.Interface): a Gradio Interface object for the given model
         """
@@ -91,17 +94,12 @@ class Interface(Blocks):
     @classmethod
     def from_pipeline(cls, pipeline: transformers.Pipeline, **kwargs) -> Interface:
         """
-        Construct an Interface from a Hugging Face transformers.Pipeline.
+        Class method that constructs an Interface from a Hugging Face transformers.Pipeline object.
+        The input and output components are automatically determined from the pipeline.
         Parameters:
-        pipeline (transformers.Pipeline):
+        pipeline (transformers.Pipeline): the pipeline object to use.
         Returns:
         (gradio.Interface): a Gradio Interface object from the given Pipeline
-
-        Example usage:
-            import gradio as gr
-            from transformers import pipeline
-            pipe = pipeline(model="lysandre/tiny-vit-random")
-            gr.Interface.from_pipeline(pipe).launch()
         """
         interface_info = load_from_pipeline(pipeline)
         kwargs = dict(interface_info, **kwargs)
@@ -117,49 +115,44 @@ class Interface(Blocks):
         cache_examples: Optional[bool] = None,
         examples_per_page: int = 10,
         live: bool = False,
-        layout: str = "unaligned",
-        show_input: bool = True,
-        show_output: bool = True,
         interpretation: Optional[Callable | str] = None,
         num_shap: float = 2.0,
-        theme: Optional[str] = None,
-        repeat_outputs_per_model: bool = True,
         title: Optional[str] = None,
         description: Optional[str] = None,
         article: Optional[str] = None,
         thumbnail: Optional[str] = None,
+        theme: Optional[str] = None,
         css: Optional[str] = None,
         allow_flagging: Optional[str] = None,
         flagging_options: List[str] = None,
         flagging_dir: str = "flagged",
-        analytics_enabled: Optional[bool] = None,
         flagging_callback: FlaggingCallback = CSVLogger(),
+        analytics_enabled: Optional[bool] = None,
+        _repeat_outputs_per_model: bool = True,
         **kwargs,
     ):
         """
         Parameters:
-        fn (Union[Callable, List[Callable]]): the function to wrap an interface around.
-        inputs (Union[str, InputComponent, List[Union[str, InputComponent]]]): a single Gradio input component, or list of Gradio input components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn.
-        outputs (Union[str, OutputComponent, List[Union[str, OutputComponent]]]): a single Gradio output component, or list of Gradio output components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn.
-        examples (Union[List[List[Any]], str]): sample inputs for the function; if provided, appears below the UI components and can be used to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
+        fn (Callable): the function to wrap an interface around. Often a machine learning model's prediction function.
+        inputs (str | Component | List[str] | List[Component] | None): a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn. If set to None, then only the output components will be displayed.
+        outputs (str | Component | List[str] | List[Component] | None): a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn. If set to None, then only the input components will be displayed.
+        examples (List[List[Any]] | str | None): sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
+        cache_examples (bool | None): If True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
         examples_per_page (int): If examples are provided, how many to display per page.
-        cache_examples(Optional[bool]):
-            If True, caches examples in the server for fast runtime in examples.
-            The default option in HuggingFace Spaces is True.
-            The default option elsewhere is False.
-        live (bool): whether the interface should automatically reload on change.
-        layout (str): Layout of input and output panels. "horizontal" arranges them as two columns of equal height, "unaligned" arranges them as two columns of unequal height, and "vertical" arranges them vertically.
-        interpretation (Union[Callable, str]): function that provides interpretation explaining prediction output. Pass "default" to use simple built-in interpreter, "shap" to use a built-in shapley-based interpreter, or your own custom interpretation function.
+        live (bool): whether the interface should automatically rerun if any of the inputs change.
+        interpretation (Callable | str): function that provides interpretation explaining prediction output. Pass "default" to use simple built-in interpreter, "shap" to use a built-in shapley-based interpreter, or your own custom interpretation function.
         num_shap (float): a multiplier that determines how many examples are computed for shap-based interpretation. Increasing this value will increase shap runtime, but improve results. Only applies if interpretation is "shap".
-        title (str): a title for the interface; if provided, appears above the input and output components.
-        description (str): a description for the interface; if provided, appears above the input and output components.
-        article (str): an expanded article explaining the interface; if provided, appears below the input and output components. Accepts Markdown and HTML content.
-        thumbnail (str): path to image or src to use as display picture for models listed in gradio.app/hub
-        theme (str): Theme to use - one of "default", "huggingface", "seafoam", "grass", "peach". Add "dark-" prefix, e.g. "dark-peach" for dark theme (or just "dark" for the default dark theme).
-        css (str): custom css or path to custom css file to use with interface.
-        allow_flagging (str): one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every prediction will be automatically flagged. If "manual", samples are flagged when the user clicks flag button. Can be set with environmental variable GRADIO_ALLOW_FLAGGING.
-        flagging_options (List[str]): if provided, allows user to select from the list of options when flagging. Only applies if allow_flagging is "manual".
-        flagging_dir (str): what to name the dir where flagged data is stored.
+        title (str | None): a title for the interface; if provided, appears above the input and output components in large font.
+        description (str | None): a description for the interface; if provided, appears above the input and output components and beneath the title in regular font. Accepts Markdown and HTML content.
+        article (str | None): an expanded article explaining the interface; if provided, appears below the input and output components in regular font. Accepts Markdown and HTML content.
+        thumbnail (str | None): path or url to image to use as display image when the web demo is shared on social media.
+        theme (str | None): Theme to use - right now, only "default" is supported. Can be set with the GRADIO_THEME environment variable.
+        css (str | None): custom css or path to custom css file to use with interface.
+        allow_flagging (str | None): one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every prediction will be automatically flagged. If "manual", samples are flagged when the user clicks flag button. Can be set with environmental variable GRADIO_ALLOW_FLAGGING; otherwise defaults to "manual".
+        flagging_options (List[str] | None): if provided, allows user to select from the list of options when flagging. Only applies if allow_flagging is "manual".
+        flagging_dir (str): what to name the directory where flagged data is stored.
+        flagging_callback (FlaggingCallback): An instance of a subclass of FlaggingCallback which will be called when a sample is flagged. By default logs to a local CSV file.
+        analytics_enabled (bool | None): Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True.
         """
         super().__init__(
             analytics_enabled=analytics_enabled, mode="interface", css=css, **kwargs
@@ -227,7 +220,7 @@ class Interface(Blocks):
             for o in self.output_components:
                 o.interactive = False  # Force output components to be non-interactive
 
-        if repeat_outputs_per_model:
+        if _repeat_outputs_per_model:
             self.output_components *= len(fn)
 
         if (
@@ -250,9 +243,6 @@ class Interface(Blocks):
         self.__name__ = ", ".join(self.function_names)
 
         self.live = live
-        self.layout = layout
-        self.show_input = show_input
-        self.show_output = show_output
         self.flag_hash = random.getrandbits(32)
 
         self.title = title
@@ -284,35 +274,9 @@ class Interface(Blocks):
         self.article = article
 
         self.thumbnail = thumbnail
-        theme = theme if theme is not None else os.getenv("GRADIO_THEME", "default")
-        DEPRECATED_THEME_MAP = {
-            "darkdefault": "default",
-            "darkhuggingface": "dark-huggingface",
-            "darkpeach": "dark-peach",
-            "darkgrass": "dark-grass",
-        }
-        VALID_THEME_SET = (
-            "default",
-            "huggingface",
-            "seafoam",
-            "grass",
-            "peach",
-            "dark",
-            "dark-huggingface",
-            "dark-seafoam",
-            "dark-grass",
-            "dark-peach",
-        )
-        if theme in DEPRECATED_THEME_MAP:
-            warnings.warn(
-                f"'{theme}' theme name is deprecated, using {DEPRECATED_THEME_MAP[theme]} instead."
-            )
-            theme = DEPRECATED_THEME_MAP[theme]
-        elif theme not in VALID_THEME_SET:
-            raise ValueError(
-                f"Invalid theme name, theme must be one of: {', '.join(VALID_THEME_SET)}"
-            )
-        self.theme = theme
+        self.theme = theme or os.getenv("GRADIO_THEME", "default")
+        if not (self.theme == "default"):
+            warnings.warn("Currently, only the 'default' theme is supported.")
 
         if examples is None or (
             isinstance(examples, list)
@@ -819,9 +783,21 @@ class Interface(Blocks):
 
 
 class TabbedInterface(Blocks):
+    """
+    A TabbedInterface is created by providing a list of Interfaces, each of which gets
+    rendered in a separate tab.
+    """
+
     def __init__(
         self, interface_list: List[Interface], tab_names: Optional[List[str]] = None
     ):
+        """
+        Parameters:
+        interface_list (List[Interface]): a list of interfaces to be rendered in tabs.
+        tab_names (List[str] | None): a list of tab names. If None, the tab names will be "Tab 1", "Tab 2", etc.
+        Returns:
+        (gradio.TabbedInterface): a Gradio Tabbed Interface for the given interfaces
+        """
         if tab_names is None:
             tab_names = ["Tab {}".format(i) for i in range(len(interface_list))]
         super().__init__()

gradio/layouts.py

@@ -0,0 +1,124 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING, Any, Callable, Dict, List, Optional, Tuple
+
+from gradio.blocks import BlockContext
+
+if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
+    from gradio.components import Component
+
+
+class Row(BlockContext):
+    def get_config(self):
+        return {"type": "row", **super().get_config()}
+
+    @staticmethod
+    def update(
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "__type__": "update",
+        }
+
+    def style(
+        self,
+        equal_height: Optional[bool] = None,
+        mobile_collapse: Optional[bool] = None,
+    ):
+        if equal_height is not None:
+            self._style["equal_height"] = equal_height
+        if mobile_collapse is not None:
+            self._style["mobile_collapse"] = mobile_collapse
+
+        return self
+
+
+class Column(BlockContext):
+    def __init__(
+        self,
+        visible: bool = True,
+        variant: str = "default",
+    ):
+        """
+        variant: column type, 'default' (no background) or 'panel' (gray background color and rounded corners)
+        """
+        self.variant = variant
+        super().__init__(visible=visible)
+
+    def get_config(self):
+        return {
+            "type": "column",
+            "variant": self.variant,
+            **super().get_config(),
+        }
+
+    @staticmethod
+    def update(
+        variant: Optional[str] = None,
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "variant": variant,
+            "visible": visible,
+            "__type__": "update",
+        }
+
+
+class Tabs(BlockContext):
+    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):
+    def __init__(self, label, **kwargs):
+        super().__init__(**kwargs)
+        self.label = label
+
+    def get_config(self):
+        return {"label": self.label, **super().get_config()}
+
+    def select(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("select", fn, inputs, outputs)
+
+
+class Group(BlockContext):
+    def get_config(self):
+        return {"type": "group", **super().get_config()}
+
+    @staticmethod
+    def update(
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "__type__": "update",
+        }
+
+
+class Box(BlockContext):
+    def get_config(self):
+        return {"type": "box", **super().get_config()}
+
+    @staticmethod
+    def update(
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "__type__": "update",
+        }

gradio/mix.py

@@ -6,15 +6,18 @@ import gradio
 
 class Parallel(gradio.Interface):
     """
-    Creates a new Interface consisting of multiple models in parallel
-    Parameters:
-    interfaces: any number of Interface objects that are to be compared in parallel
-    options: additional kwargs that are passed into the new Interface object to customize it
-    Returns:
-    (Interface): an Interface object comparing the given models
+    Creates a new Interface consisting of multiple models in parallel (comparing their outputs).
+    The Interfaces to put in Parallel must share the same input components (but can have different output components).
     """
 
     def __init__(self, *interfaces, **options):
+        """
+        Parameters:
+        *interfaces (Interface): any number of Interface objects that are to be compared in parallel
+        **options (optional): additional kwargs that are passed into the new Interface object to customize it
+        Returns:
+        (Interface): an Interface object comparing the given models
+        """
         fns = []
         outputs = []
 
@@ -26,7 +29,7 @@ class Parallel(gradio.Interface):
             "fn": fns,
             "inputs": interfaces[0].input_components,
             "outputs": outputs,
-            "repeat_outputs_per_model": False,
+            "_repeat_outputs_per_model": False,
         }
         kwargs.update(options)
         super().__init__(**kwargs)
@@ -37,15 +40,18 @@ class Parallel(gradio.Interface):
 
 class Series(gradio.Interface):
     """
-    Creates a new Interface from multiple models in series (the output of one is fed as the input to the next)
-    Parameters:
-    interfaces: any number of Interface objects that are to be connected in series
-    options: additional kwargs that are passed into the new Interface object to customize it
-    Returns:
-    (Interface): an Interface object connecting the given models
+    Creates a new Interface from multiple models in series (the output of one is fed as the input to the next,
+    and so the input and output components must agree between the interfaces).
     """
 
     def __init__(self, *interfaces, **options):
+        """
+        Parameters:
+        *interfaces (Interface): any number of Interface objects that are to be connected in series
+        **options (optional): additional kwargs that are passed into the new Interface object to customize it
+        Returns:
+        (Interface): an Interface object connecting the given models
+        """
         fns = [io.predict for io in interfaces]
 
         def connected_fn(

gradio/outputs.py

@@ -82,7 +82,7 @@ class Video(C_Video):
             "Usage of gradio.outputs is deprecated, and will not be supported in the future, please import your components from gradio.components",
             DeprecationWarning,
         )
-        super().__init__(type=type, label=label)
+        super().__init__(format=type, label=label)
 
 
 class Audio(C_Audio):

gradio/templates/frontend/index.html

@@ -59,8 +59,8 @@
 			rel="stylesheet"
 		/>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
-		<script type="module" crossorigin src="./assets/index.c5f2277d.js"></script>
-		<link rel="stylesheet" href="./assets/index.267add2a.css">
+		<script type="module" crossorigin src="./assets/index.9b6fd8a6.js"></script>
+		<link rel="stylesheet" href="./assets/index.bf810f69.css">
 	</head>
 
 	<body

guides/Gradio_and_ONNX_on_Hugging_Face.md

@@ -3,6 +3,8 @@
 related_spaces: https://huggingface.co/spaces/onnx/EfficientNet-Lite4
 tags: ONNX, SPACES
 Contributed by Gradio and the <a href="https://onnx.ai/">ONNX</a> team
+Docs: image, label
+
 
 ## Introduction
 

guides/building_a_pictionary_app.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/nateraw/quickdraw
 tags: SKETCHPAD, LABELS, LIVE
+Docs: image, label
 
 ## Introduction
 

guides/create_your_own_friends_with_a_gan.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/NimaBoscarino/cryptopunks, https://huggingface.co/spaces/nateraw/cryptopunks-generator
 tags: GAN, IMAGE, HUB
+Docs: slider, image
 
 Contributed by <a href="https://huggingface.co/NimaBoscarino">Nima Boscarino</a> and <a href="https://huggingface.co/nateraw">Nate Raw</a>
 

guides/creating_a_chatbot.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/abidlabs/chatbot-minimal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
 tags: NLP, TEXT, HTML
+Docs: textbox, state
 
 ## Introduction
 

guides/getting_started.md

@@ -1,8 +1,28 @@
-## Getting Started
+## Quickstart
 
-**Prerequisite**: Python 3.7+ and that's it! 
+**Prerequisite**: Gradio requires Python 3.7 or above, that's it! 
 
-### Quick Start
+### Introduction
+
+Gradio allows you to easily build machine learning demos, data science dashboards, or other kinds of web apps, **entirely in Python**. These web apps can be launched from wherever you use Python (jupyter notebooks, colab notebooks, Python terminal, etc.) and shared with anyone instantly using Gradio's auto-generated share links.
+
+To offer both simplicity and more powerful and flexible control for advanced web apps, Gradio offers two different APIs to users:
+
+* `gradio.Interface`: a high-level API that allows you to create a machine learning demo simply by specifying a list of inputs and outputs. It often takes just a few lines of Python to create a fully usable and share machine learning demo.
+
+* `gradio.Blocks`: a low-level API that allows you to have full control over the data flows and layout of your application. You can build very complex, multi-step applications using Blocks.
+
+This Quickstart focuses on the high-level `gradio.Interface` API. For more information on Blocks, read our dedicated guide.
+
+### What Problem is Gradio Solving?
+
+One of the best ways to share your machine learning model, API, or data science workflow with others is to create a web-based *interactive demo* that allows your users or colleagues to try out the demo with their inputs and visualize the outputs. These web-based demos are great as they allow *anyone who can use a browser* (not just technical people) to understand what you've built.
+
+However, creating such web-based demos has traditionally been difficult, as you needed to know backend frameworks (like Flask or Django) to serve your web app, containerization tools (like Docker), databases to store data or users, and front end web development (HTML, CSS, JavaScript) to build a GUI for your demo.
+
+Gradio lets you do all of this, directly in Python. And usually in just a few lines of code! So let's get started.
+
+### Getting Started
 
 To get Gradio running with a simple "Hello, World" example, follow these three steps:
 

guides/image_classification_in_pytorch.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/abidlabs/pytorch-image-classifier, https://huggingface.co/spaces/pytorch/ResNet, https://huggingface.co/spaces/pytorch/ResNext, https://huggingface.co/spaces/pytorch/SqueezeNet
 tags: VISION, RESNET, PYTORCH
+Docs: image, label
 
 ## Introduction
 

guides/image_classification_in_tensorflow.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/abidlabs/keras-image-classifier
 tags: VISION, MOBILENET, TENSORFLOW
+Docs: image, label
 
 ## Introduction
 

guides/image_classification_with_vision_transformers.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/abidlabs/vision-transformer
 tags: VISION, TRANSFORMERS, HUB
+Docs: image, label
 
 ## Introduction
 

guides/introduction_to_blocks.md

@@ -0,0 +1,132 @@
+## Introduction to Gradio Blocks 🧱 
+ 
+Gradio is a Python library that allows you to quickly build web-based machine learning demos, data science dashboards, or other kinds of web apps, **entirely in Python**. These web apps can be launched from wherever you use Python (jupyter notebooks, colab notebooks, Python terminal, etc.) and shared with anyone instantly using Gradio's auto-generated share links.
+
+To offer both simplicity and more powerful and flexible control for advanced web apps, Gradio offers two different APIs to users:
+
+* ⚡`gradio.Interface`: a high-level API that allows you to create a full machine learning demo simply by providing a list of inputs and outputs.
+
+* 🧱 `gradio.Blocks`: a low-level API that allows you to have full control over the data flows and layout of your application. You can build very complex, multi-step applications using Blocks (as in "building blocks").
+
+This Guide will teach you the **Blocks API** and we will create several custom web apps in the process. It will be helpful but not necessary to be familiar with the Interface API before you read this tutorial.
+
+### Why Blocks 🧱?
+
+If you have already used `gradio.Interface`, you know that you can easily create fully-fledged machine learning demos with just a few lines of code. The Interface API is very convenient but in some cases may not be sufficiently flexible for your needs. For example, you might want to:
+
+* Group together related demos as multiple tabs in one web app
+* Change the layout of your demo instead of just having all of the inputs on the left and outputs on the right
+* Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general
+* Change a component's properties (for example, the choices in a Dropdown) or its visibilty based on user input
+
+These are all use cases where you should use the Blocks API!
+
+
+### "Hello World" with Blocks
+
+After you have installed Gradio, run the code below as a Python script or in a Python notebook (or in a  [colab notebook](https://colab.research.google.com/drive/1n_uB44G_uENGf0zroeVKgcytFQ-7UwZt?usp=sharing))
+
+{{ code["blocks_hello"] }}
+
+The interface below will appear automatically within the Python notebook, or pop in a browser on  [http://localhost:7860](http://localhost:7860/)  if running from a script.
+
+{{ demos["blocks_hello"] }}
+
+
+### Understanding this Example
+
+This simple example introduces 5 concepts that underlie Blocks:
+
+1. Blocks allow you to build web applications that combine markdown, HTML, buttons, and interactive **components** simply by *instantiating* objects in Python inside of a "`with gradio.Blocks`" context. The *order* in which you instantiate components <u>matters</u> as each element gets rendered into the web app in the order it was created. (More complex layouts are discussed below)
+
+2. You can define **regular Python functions** anywhere in your code and run them with user input using BLocks. In our example, we have a simple function that adds a welcome message before a user's name, but you can write *any* Python function, from a simple calculation to large machine learning model's inference.
+
+3. You can assign **events** to any Blocks component. This will run your function when the component is clicked/changed/etc. When you assign an event, you pass in three parameters: `fn`: the function  that should be called, `inputs`: the (list) of input component(s), and `outputs`: the (list) of output components that should be called.<p /> 
+In this example, we run the `update()` function when the value in the `Textbox` named `inp` changes. The event reads the value in `inp`, passes it as the `name` parameter to `update()`, which then returns a value that gets assigned to our second `Textbox` named `out`. <p /> To see a list of events that each component supports, see [the documentation](https://www.gradio.app/docs).
+
+
+4. Blocks automatically figures out whether a component should be **interactive** (accept user input) or not, based on the event triggers you define. In our example, the first textbox is interactive, since its value is used by the `update()` function. The second textbox is not interactive, since its value is never used as an input. In some cases, you might want to override this, which you can do by passing the appropriate boolean to `interactive`, a  parameter that every component accepts.
+
+5. You can write and `launch()` your Blocks anywhere: jupyter notebooks, colab notebooks, or regular Python IDEs since Gradio uses the standard Python interpreter. You can also share Blocks with other people by setting a single parameter: `launch(share=True)`, which we will discuss towards the end of this guide.
+
+### Layouts
+
+By default, `Blocks` renders the components that you create *vertically in one column*. You can change that by creating additional columns (`with gradio.Column():`) or rows (`with gradio.Row():`) and creating components within those contexts.
+
+Here's what you should keep in mind: any components created under a `Column` (this is also the default) will be laid out *vertically*. Any component created under a `Row` will be laid out *horizontally*, similar to the [flexbox model in web development](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
+
+Finally, you can also create a `with gradio.Tabs():` and within it create multiple  `with gradio.TabItem(name_of_tab):` children. Any component created inside of a `with gradio.TabItem(name_of_tab):` context appears in that tab.
+
+Here is a example with tabs, rows, and columns:
+
+{{ code["blocks_flipper"] }}
+
+{{ demos["blocks_flipper"] }}
+
+You'll notice that in this example, we've also created a `Button` component in each tab, and we've assigned a click event to each button, which is what actually runs the function. So let's talk more about events... 
+
+### Events
+
+Just as you can control the layout, `Blocks` gives you fine-grained control over what events trigger function calls. Each component and many layouts have specific events that they support. 
+
+For example, the `Textbox` component has 2 events: `change()` (when the value inside of the textbox changes), and `submit()` (when a user presses the enter key while focused on the textbox). More complex components can have even more events: for example, the `Audio` component also has separate events for when the audio file is played, cleared, paused, etc. See [the documentation](https://www.gradio.app/docs) for the events each component supports. 
+
+You can attach event trigger to none, one, or more of these events. You create an event trigger by calling the name of the event on the component instance as a function -- e.g. `textbox.change(...)` or `btn.click(...)`. The function takes in three parameters, as discussed above:
+
+* `fn`: the function to run
+* `inputs`: a (list of) component(s) whose values should supplied as the input parameters to the function. Each component's value gets mapped to the corresponding function parameter, in order. This parameter can be `None` if the function does not take any parameters.
+* `outputs`: a (list of) component(s) whose values should be updated based on the values returned by the function. Each return value gets sets the corresponding component's value, in order. This parameter can be `None` if the function does not return anything.
+
+You can even make the input and output component be the same component, as we do in this example that uses a GPT model to do text completion:
+
+{{ code["blocks_gpt"] }}
+
+{{ demos["blocks_gpt"] }}
+
+### Multistep Demos
+
+In some cases, you might want want a "multi-step" demo, in which you reuse the output of one function as the input to the next. This is really easy to do with Blocks, as you can use a component for the input of one event trigger but the output of another. Take a look at the `text` component in the example below, its value is the result of a speech-to-text model, but also gets passed into a sentiment analysis model:
+
+{{ code["blocks_speech_text_length"] }}
+
+{{ demos["blocks_speech_text_length"] }}
+
+### Updating Component Properties
+
+So far, we have seen how to create events to update the value of another component. But if you want to change *other properties*  of a component (like the visibility of a textbox or the choices in a radio button group)? You can do this by returning a component class's `update()`  method instead of a regular return value from your function. 
+
+This is perhaps most easily illustrated with an example:
+
+{{ code["blocks_essay"] }}
+
+{{ demos["blocks_essay"] }}
+
+### Sharing Blocks Publicly
+
+Blocks  can be easily shared publicly by setting `share=True` in the `launch()` method. Like this:
+
+```python
+demo = gr.Blocks()
+
+with demo:
+    ...  # define components & events here
+
+demo.launch(share=True)
+```
+
+This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the demo in their browser. Because the processing happens on your device (as long as your device stays on!), you don't have to worry about any packaging any dependencies. If you're working out of colab notebook, a share link is always automatically created. It usually looks something like this:  **XXXXX.gradio.app**. Although the link is served through a gradio link, we are only a proxy for your local server, and do not store any data sent through the demo.
+
+Keep in mind, however, that these links are publicly accessible, meaning that anyone can use your model for prediction! Therefore, make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. If you set `share=False` (the default), only a local link is created, which can be shared by  [port-forwarding](https://www.ssh.com/ssh/tunneling/example) with specific users. 
+
+Share links expire after 72 hours. For permanent hosting, see Hosting Gradio Blocks on Spaces below.
+
+![Sharing diagram](/assets/img/sharing.svg)
+
+### Hosting Gradio Blocks on Spaces
+
+Huggingface provides the infrastructure to permanently host your Gradio demo on the internet, for free! You can either drag and drop a folder containing your Gradio model and all related files, or you can point HF Spaces to your Git repository and HF Spaces will pull the Gradio interface from there. It's just as easy to share a Blocks demo as it is a regular Gradio Interface.
+
+See [Huggingface Spaces](http://huggingface.co/spaces/) for more information. 
+
+![Hosting Demo](/assets/img/hf_demo.gif)
+

guides/real_time_speech_recognition.md

@@ -2,6 +2,7 @@
 
 related_spaces: https://huggingface.co/spaces/abidlabs/streaming-asr-paused, https://huggingface.co/spaces/abidlabs/full-context-asr
 tags: ASR, SPEECH, STREAMING
+Docs: audio, state, textbox
 
 ## Introduction
 

scripts/launch_website.sh

@@ -8,5 +8,8 @@ else
   npm install
   npm run build
   cd dist
+  rm -rf ./gradio_static/
+  mkdir ./gradio_static/
+  cp -r ../../../gradio/templates/frontend/. ./gradio_static/
   python -m http.server
 fi

test/test_components.py

@@ -1123,7 +1123,7 @@ class TestVideo(unittest.TestCase):
         self.assertIsNone(video_input.preprocess(None))
         x_video["is_example"] = True
         self.assertIsNotNone(video_input.preprocess(x_video))
-        video_input = gr.Video(type="avi")
+        video_input = gr.Video(format="avi")
         self.assertEqual(video_input.preprocess(x_video)[-3:], "avi")
         with self.assertRaises(NotImplementedError):
             video_input.serialize(x_video, True)

test/test_interfaces.py

@@ -8,8 +8,9 @@ import mlflow
 import requests
 import wandb
 
-from gradio.blocks import Blocks, TabItem, Tabs
+from gradio.blocks import Blocks
 from gradio.interface import Interface, TabbedInterface, close_all, os
+from gradio.layouts import TabItem, Tabs
 from gradio.utils import assert_configs_are_equivalent_besides_ids
 
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"

ui/packages/app/src/themes/typography.min.css

@@ -133,7 +133,7 @@
 .prose code {
 	color: #111827;
 	font-weight: 600;
-	font-size: 0.875em;
+	font-size: 1em;
 }
 .prose code::before {
 	content: "`";

website/demos/map_demos.py

@@ -13,11 +13,16 @@ sys.path.insert(0, GRADIO_DEMO_DIR)
 port = 7860
 
 DEMO_PATTERN = r'demos\["([A-Za-z0-9_]+)"]'
-demos_to_run = ["kitchen_sink"]
-for guide_filename in os.listdir(GRADIO_GUIDES_DIR):
-    with open(os.path.join(GRADIO_GUIDES_DIR, guide_filename)) as guide_file:
-        guide_content = guide_file.read()
-    demos_to_run += re.findall(DEMO_PATTERN, guide_content)
+
+demos_to_skip = ["no_input", "disease_report", "fake_gan", "hello_login"] # skipping some demos
+demos_to_run = [demo for demo in os.listdir(GRADIO_DEMO_DIR)
+                if os.path.isdir(os.path.join(GRADIO_DEMO_DIR, demo))
+                and demo not in demos_to_skip]
+# for guide_filename in os.listdir(GRADIO_GUIDES_DIR):
+# for guide_filename in ["getting_started.md"]:
+#     with open(os.path.join(GRADIO_GUIDES_DIR, guide_filename)) as guide_file:
+#         guide_content = guide_file.read()
+#     demos_to_run += re.findall(DEMO_PATTERN, guide_content)
 
 demo_port_sets = []
 for demo_name in demos_to_run:
@@ -29,6 +34,7 @@ for demo_name in demos_to_run:
         )
     setup_file = os.path.join(demo_folder, "setup.sh")
     if os.path.exists(setup_file):
+        continue # ignore for now
         subprocess.check_call(["sh", setup_file])
     demo_port_sets.append((demo_name, port))
     port += 1

website/demos/run_demos.py

@@ -25,7 +25,7 @@ for demo_name, port in demo_port_sets:
     demo_file = os.path.join(demo_folder, "run.py")
     with open(demo_file, "r") as file:
         filedata = file.read()
-    assert "demo.launch()" in filedata
+    assert "demo.launch()" in filedata, demo_name + " has no demo.launch()\n" + filedata 
     filedata = filedata.replace(f"demo.launch()", f"demo.launch(server_port={port})")
     with open(demo_file, "w") as file:
         file.write(filedata)
@@ -35,7 +35,7 @@ for demo_name, port in demo_port_sets:
 start_time = time.time()
 while True:
     for demo_name, _ in demo_port_sets:
-        r = requests.head(f"http://localhost:80/demo/{demo_name}/")
+        r = requests.get(f"http://localhost:80/demo/{demo_name}/config")
         if r.status_code != 200:
             print(demo_name, "down")
             if time.time() - start_time > LAUNCH_PERIOD:

website/homepage/embedding-configs.json

@@ -0,0 +1,724 @@
+{
+  "textbox": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 29,
+        "type": "textbox",
+        "props": {
+          "lines": 1,
+          "max_lines": 20,
+          "placeholder": "Placeholder",
+          "value": "",
+          "show_label": true,
+          "name": "textbox",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 28,
+      "children": [
+        {
+          "id": 29
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          29
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "number": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 31,
+        "type": "number",
+        "props": {
+          "show_label": true,
+          "name": "number",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 30,
+      "children": [
+        {
+          "id": 31
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          31
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "slider": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 33,
+        "type": "slider",
+        "props": {
+          "minimum": 0,
+          "maximum": 100,
+          "step": 1,
+          "value": 0,
+          "show_label": true,
+          "name": "slider",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 32,
+      "children": [
+        {
+          "id": 33
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          33
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "checkbox": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 35,
+        "type": "checkbox",
+        "props": {
+          "value": false,
+          "show_label": true,
+          "name": "checkbox",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 34,
+      "children": [
+        {
+          "id": 35
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          35
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "checkboxgroup": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 37,
+        "type": "checkboxgroup",
+        "props": {
+          "choices": [
+            "First Choice",
+            "Second Choice",
+            "Third Choice"
+          ],
+          "value": [],
+          "show_label": true,
+          "name": "checkboxgroup",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 36,
+      "children": [
+        {
+          "id": 37
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          37
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "radio": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 39,
+        "type": "radio",
+        "props": {
+          "choices": [
+            "First Choice",
+            "Second Choice",
+            "Third Choice"
+          ],
+          "value": "First Choice",
+          "show_label": true,
+          "name": "radio",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 38,
+      "children": [
+        {
+          "id": 39
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          39
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "dropdown": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 41,
+        "type": "dropdown",
+        "props": {
+          "choices": [
+            "First Choice",
+            "Second Choice",
+            "Third Choice"
+          ],
+          "value": "First Choice",
+          "show_label": true,
+          "name": "dropdown",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 40,
+      "children": [
+        {
+          "id": 41
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          41
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "image": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 43,
+        "type": "image",
+        "props": {
+          "image_mode": "RGB",
+          "source": "upload",
+          "tool": "editor",
+          "show_label": true,
+          "name": "image",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 42,
+      "children": [
+        {
+          "id": 43
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          43
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "video": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 45,
+        "type": "video",
+        "props": {
+          "source": "upload",
+          "show_label": true,
+          "name": "video",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 44,
+      "children": [
+        {
+          "id": 45
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          45
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "audio": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 49,
+        "type": "audio",
+        "props": {
+          "source": "microphone",
+          "show_label": true,
+          "name": "audio",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 48,
+      "children": [
+        {
+          "id": 49
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          49
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "file": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 51,
+        "type": "file",
+        "props": {
+          "file_count": "single",
+          "show_label": true,
+          "name": "file",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 50,
+      "children": [
+        {
+          "id": 51
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          51
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "dataframe": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 53,
+        "type": "dataframe",
+        "props": {
+          "datatype": "str",
+          "row_count": [
+            3,
+            "dynamic"
+          ],
+          "col_count": [
+            3,
+            "dynamic"
+          ],
+          "value": [
+            [
+              "",
+              "",
+              ""
+            ],
+            [
+              "",
+              "",
+              ""
+            ],
+            [
+              "",
+              "",
+              ""
+            ]
+          ],
+          "max_rows": 20,
+          "overflow_row_behaviour": "paginate",
+          "show_label": true,
+          "name": "dataframe",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 52,
+      "children": [
+        {
+          "id": 53
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          53
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "timeseries": {
+  "mode": "blocks",
+  "components": [
+      {
+        "id": 55,
+        "type": "timeseries",
+        "props": {
+          "show_label": true,
+          "name": "timeseries",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 54,
+      "children": [
+        {
+          "id": 55
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          55
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "model3d": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 57,
+        "type": "model3d",
+        "props": {
+          "show_label": true,
+          "name": "model3d",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 56,
+      "children": [
+        {
+          "id": 57
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          20
+        ],
+        "trigger": "click",
+        "inputs": [
+          57
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  },
+  "button": {
+    "mode": "blocks",
+    "components": [
+      {
+        "id": 61,
+        "type": "button",
+        "props": {
+          "value": "Button",
+          "variant": "primary",
+          "name": "button",
+          "visible": true,
+          "style": {}
+        }
+      }
+    ],
+    "theme": "default",
+    "css": null,
+    "enable_queue": false,
+    "layout": {
+      "id": 60,
+      "children": [
+        {
+          "id": 61
+        }
+      ]
+    },
+    "dependencies": [
+      {
+        "targets": [
+          61
+        ],
+        "trigger": "click",
+        "inputs": [
+          57
+        ],
+        "outputs": [
+          4
+        ],
+        "backend_fn": true,
+        "js": null,
+        "status_tracker": null,
+        "queue": null
+      }
+    ]
+  }
+}

website/homepage/netlify.toml

@@ -0,0 +1,2 @@
+[build]
+   ignore = "/bin/false"

website/homepage/nginx.conf

@@ -7,12 +7,12 @@ server {
 
     location / {
         root   /usr/share/nginx/html;
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ $uri/index.html =404;
         index  index.html index.htm;
         autoindex on;
     }
 
-    #error_page  404              /404.html;
+    error_page  404              /404.html;
 
     # redirect server error pages to the static page /50x.html
     #

website/homepage/package.json

@@ -1,22 +1,25 @@
 {
   "name": "gradio-website",
   "scripts": {
+    "prebuild": "(ls ../../gradio/templates/frontend/assets) || (cd ../../ui && pnpm i --frozen-lockfile && pnpm build && cd ../website/homepage) || (npm install pnpm && cd ../../ui && pnpm i --frozen-lockfile && npm install pnpm && pnpm build && cd ../website/homepage)",
     "build:setup": "mkdir -p dist generated",
     "build:html": "python render_html.py && html-minifier --input-dir generated --output-dir dist --file-ext html --remove-comments --collapse-whitespace --minify-js true",
     "build:css": "postcss src/style.css -o dist/style.css && python replace_style_names.py",
     "build:assets": "cp -R src/assets/. dist/assets/",
-    "build": "npm run build:setup && npm run build:html && npm run build:css && npm run build:assets",
+    "build": "npm run prebuild && npm run build:setup && npm run build:html && npm run build:css && npm run build:assets",
     "start": "npm run build && chokidar 'src/**' '../guides/*' -c 'echo '{path}' && if [[ {path} =~ ^src/.*.html ]]; then npm run build:html && npm run build:css; elif [[ {path} =~ ^../guides/.* ]]; then npm run build:html && npm ; elif [[ {path} =~ ^src/.*.css ]]; then npm run build:html && npm run build:css; elif [[ {path} =~ ^src/assets/.* ]]; then npm run build:assets; fi; echo 0 ' "
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.3",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.0",
+    "@tailwindcss/forms": "^0.5.0",
     "autoprefixer": "^10.4.0",
     "chokidar-cli": "^3.0.0",
     "cssnano": "^5.0.8",
     "html-minifier": "^4.0.0",
+    "pnpm": "^6.32.7",
     "postcss-cli": "^9.0.1",
     "postcss-hash": "^3.0.0",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.0.24"
   }
-}
+}

website/homepage/render_html.py

@@ -9,20 +9,50 @@ import requests
 from jinja2 import Template
 from render_html_helpers import generate_meta_image
 
-# from gradio.inputs import InputComponent
-from gradio.interface import Interface
-# from gradio.outputs import OutputComponent
+from gradio.components import (
+    Textbox, 
+    Number,
+    Slider, 
+    Checkbox, 
+    CheckboxGroup, 
+    Radio, 
+    Dropdown,
+    Image, 
+    Video, 
+    Audio, 
+    File, 
+    Dataframe, 
+    Timeseries,    
+    Label, 
+    HighlightedText,
+    JSON, 
+    HTML, 
+    Gallery,
+    Carousel, 
+    Chatbot, 
+    Model3D, 
+    Plot, 
+    Markdown,    
+    Button, 
+    Dataset, 
+    Variable
+)
+
+from gradio.interface import Interface, TabbedInterface
+from gradio.mix import Series, Parallel
+from gradio.blocks import Blocks
+from gradio.layouts import Row, Column, Tabs, TabItem
+from gradio.events import Changeable, Clearable, Submittable, Editable, Playable, Clickable
 
 GRADIO_DIR = "../../"
 GRADIO_GUIDES_DIR = os.path.join(GRADIO_DIR, "guides")
 GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
-GRADIO_ASSETS_LIST = os.listdir(
-    os.path.join(GRADIO_DIR, "gradio", "templates", "frontend", "assets")
-)
-GRADIO_ASSETS = {
-    f"{asset.split('.')[0]}_{asset.split('.')[-1]}_file": asset
-    for asset in GRADIO_ASSETS_LIST
-}
+GRADIO_INDEX_FILE = os.path.join(GRADIO_DIR, "gradio", "templates", "frontend", "index.html")
+with open(GRADIO_INDEX_FILE) as index_file:
+    index_html = index_file.read()
+
+ENTRY_JS_FILE=re.findall(r'"\.\/assets\/(.*\.js)"', index_html)[0]
+ENTRY_CSS_FILE=re.findall(r'"\.\/assets\/(.*\.css)"', index_html)[0]
 
 with open("src/navbar.html", encoding="utf-8") as navbar_file:
     navbar_html = navbar_file.read()
@@ -44,7 +74,8 @@ def render_index():
             tweets=tweets,
             star_count=star_count,
             navbar_html=navbar_html,
-            **GRADIO_ASSETS,
+            entry_js_file=ENTRY_JS_FILE,
+            entry_css_file=ENTRY_CSS_FILE
         )
     with open(
         os.path.join("generated", "index.html"), "w", encoding="utf-8"
@@ -80,6 +111,9 @@ for guide in guide_files:
     contributor = None
     if "Contributed by " in guide_content:
         contributor = guide_content.split("Contributed by ")[1].split("\n")[0]
+    docs = []
+    if "Docs: " in guide_content:
+        docs = guide_content.split("Docs: ")[1].split("\n")[0].split(", ")
 
     url = f"https://gradio.app/{guide_name}/"
 
@@ -91,6 +125,7 @@ for guide in guide_files:
                 line.startswith("tags: ")
                 or line.startswith("related_spaces: ")
                 or line.startswith("Contributed by ")
+                or line.startswith("Docs: ")
                 or line == title
             )
         ]
@@ -105,6 +140,7 @@ for guide in guide_files:
             "spaces": spaces,
             "url": url,
             "contributor": contributor,
+            "docs": docs
         }
     )
 
@@ -124,6 +160,17 @@ def render_guides_main():
         generated_template.write(output_html)
 
 
+def render_gallery():
+    with open("src/gallery.html", encoding="utf-8") as template_file:
+        template = Template(template_file.read())
+        output_html = template.render(navbar_html=navbar_html)
+    os.makedirs(os.path.join("generated", "gallery"), exist_ok=True)
+    with open(
+        os.path.join("generated", "gallery", "index.html"), "w", encoding="utf-8"
+    ) as generated_template:
+        generated_template.write(output_html)
+
+
 def render_guides():
     for guide in guides:
         generate_meta_image(guide)
@@ -202,7 +249,8 @@ def render_guides():
                 spaces=guide["spaces"],
                 tags=guide["tags"],
                 contributor=guide["contributor"],
-                **GRADIO_ASSETS,
+                entry_js_file=ENTRY_JS_FILE,
+                entry_css_file=ENTRY_CSS_FILE
             )
             generated_template.write(output_html)
 
@@ -267,19 +315,29 @@ def render_docs():
                 param_set.insert(0, (params.args[neg_index],))
         return "\n".join(func_doc), param_set, params_doc, return_doc
 
-    def get_class_documentation(cls):
+    def get_class_documentation(cls, get_interpret=True, lines=1, replace_brackets=False):
         inp = {}
         inp["name"] = cls.__name__
         doc = inspect.getdoc(cls)
         doc_lines = doc.split("\n")
-        inp["doc"] = "\n".join(doc_lines[:-2])
-        inp["type"] = doc_lines[-2].split("type: ")[-1]
-        inp["demos"] = doc_lines[-1][7:].split(", ")
+        inp["doc"] = ""
+        parameters_started = False
+        inp["demos"] = []
+        for l, line in enumerate(doc_lines):
+            if not(parameters_started):
+                inp["doc"] += line + " "
+            if line.startswith("Demos: "):
+                inp["demos"] = [demo for demo in line.split("Demos: ")[1].split(", ")]
+            if "Parameters:" in line or (lines is not None and l >= lines-1):
+                parameters_started = True
+            if parameters_started and ": " in line:
+                key, value = line.split(": ")
+                inp[key] = value.replace("{","<em>").replace("}","</em>") if replace_brackets else value
+
         _, inp["params"], inp["params_doc"], _ = get_function_documentation(
             cls.__init__
         )
-        inp["shortcuts"] = list(cls.get_shortcut_implementations().items())
-        if "interpret" in cls.__dict__:
+        if get_interpret and "interpret" in cls.__dict__:
             (
                 inp["interpret"],
                 inp["interpret_params"],
@@ -289,40 +347,233 @@ def render_docs():
             _, _, _, inp["interpret_returns_doc"] = get_function_documentation(
                 cls.get_interpretation_scores
             )
-
+        inp["guides"] = [guide for guide in guides if inp['name'].lower() in guide["docs"]]
+        
+        
+        inp["events"] = []
+        if issubclass(cls, Changeable):
+            inp["events"].append("change()")
+        if issubclass(cls, Clickable):
+            inp["events"].append("click()")
+        if issubclass(cls, Clearable):
+            inp["events"].append("clear()")
+        if issubclass(cls, Playable):
+            inp["events"].append("play()")
+            inp["events"].append("pause()")
+            inp["events"].append("stop()")
+        if issubclass(cls, Editable):
+            inp["events"].append("edit()")
+        if issubclass(cls, Submittable):
+            inp["events"].append("submit()")
+        inp["events"] = ", ".join(inp["events"])
+            
         return inp
 
-    inputs = [get_class_documentation(cls) for cls in InputComponent.__subclasses__()]
-    outputs = [get_class_documentation(cls) for cls in OutputComponent.__subclasses__()]
+    components = [
+        Textbox, 
+        Number,
+        Slider, 
+        Checkbox, 
+        CheckboxGroup, 
+        Radio, 
+        Dropdown,
+        Image, 
+        Video, 
+        Audio, 
+        File, 
+        Dataframe, 
+        Timeseries,    
+        Label, 
+        HighlightedText, 
+        JSON, 
+        HTML, 
+        Gallery,
+        Carousel, 
+        Chatbot, 
+        Model3D, 
+        Plot, 
+        Markdown,    
+        Button, 
+        Dataset,
+        Variable
+    ]
+    
+    components_docs = [get_class_documentation(cls, replace_brackets=True) for cls in components]
     interface_params = get_function_documentation(Interface.__init__)
+    interface_docs = get_class_documentation(Interface, get_interpret=False, lines=None)["doc"]
     interface = {
-        "doc": inspect.getdoc(Interface),
+        "doc": interface_docs,
         "params": interface_params[1],
         "params_doc": interface_params[2],
+        "example": [
+"""import gradio as gr
+
+def image_classifier(inp):
+    pass  # image classifier model defined here
+gr.Interface(fn=image_classifier, inputs="image", outputs="label")""",
+"""import gradio as gr
+
+def speech_to_text(inp):
+    pass  # speech recognition model defined here
+
+gr.Interface(speech_to_text, inputs="mic", outputs=gr.Textbox(label="Predicted text", lines=4))"""],
+        "demos": ["hello_world", "hello_world_3", "gpt_j"]
     }
     launch_params = get_function_documentation(Interface.launch)
     launch = {
+        "doc": launch_params[0],
         "params": launch_params[1],
         "params_doc": launch_params[2],
+        "example": """import gradio as gr\n\ndef image_classifier(inp):\n    pass # image classifier model defined here\n\ndemo = gr.Interface(image_classifier, "image", "label")\ndemo.launch(share=True)"""
     }
     load_params = get_function_documentation(Interface.load)
     load = {
+        "doc": load_params[0],
         "params": load_params[1],
         "params_doc": load_params[2],
         "return_doc": load_params[3],
+        "example":
+"""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)
+
+demo.launch()"""
     }
+    from_pipeline_params = get_function_documentation(Interface.from_pipeline)
+    from_pipeline = {
+        "doc": from_pipeline_params[0],
+        "params": from_pipeline_params[1],
+        "params_doc": from_pipeline_params[2],
+        "return_doc": from_pipeline_params[3],
+        "example": 
+"""import gradio as gr
+from transformers import pipeline
+
+pipe = pipeline("image-classification")
+
+gr.Interface.from_pipeline(pipe).launch()"""
+    }
+    blocks_docs = get_class_documentation(Blocks, lines=None)["doc"]
+    blocks_params = get_function_documentation(Blocks.__init__)
+    blocks_docs = {
+        "doc": blocks_docs,
+        "params": blocks_params[1],
+        "params_doc": blocks_params[2],
+        "example":
+"""import gradio as gr
+
+def update(name):
+    return f"Welcome to Gradio, {name}!"
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown("Start typing below and then click **Run** to see the output.")
+    with gr.Row():
+        inp = gr.Textbox(placeholder="What is your name?")
+        out = gr.Textbox()
+    btn = gr.Button("Run")
+    btn.click(fn=update, inputs=inp, outputs=out)
+
+demo.launch()"""            
+    }    
+    tabbed_interface_docs = get_class_documentation(TabbedInterface, lines=None)["doc"]
+    tabbed_interface_params = get_function_documentation(TabbedInterface.__init__)
+    tabbed_interface = {
+        "doc": tabbed_interface_docs,
+        "params": tabbed_interface_params[1],
+        "params_doc": tabbed_interface_params[2],
+    }
+    
+    series_docs = get_class_documentation(Series, lines=None)["doc"]
+    series_params = get_function_documentation(Series.__init__)
+    series = {
+        "doc": series_docs,
+        "params": series_params[1],
+        "params_doc": series_params[2],
+    }
+    
+    parallel_docs = get_class_documentation(Parallel, lines=None)["doc"]
+    parallel_params = get_function_documentation(Parallel.__init__)
+    parallel = {
+        "doc": parallel_docs,
+        "params": parallel_params[1],
+        "params_doc": parallel_params[2],
+    }    
+    
+    # row = {
+    #     "doc": get_class_documentation(Row, lines=None)["doc"],
+    #     "params": get_function_documentation(Row.__init__)[1],
+    #     "params_doc": get_function_documentation(Row.__init__)[2],
+    # }           
+
+    # column = {
+    #     "doc": get_class_documentation(Column, lines=None)["doc"],
+    #     "params": get_function_documentation(Column.__init__)[1],
+    #     "params_doc": get_function_documentation(Column.__init__)[2],
+    # }           
+
+    # tabs = {
+    #     "doc": get_class_documentation(Tabs, lines=None)["doc"],
+    #     "params": get_function_documentation(Tabs.__init__)[1],
+    #     "params_doc": get_function_documentation(Tabs.__init__)[2],
+    # }           
+
+    # tabitem = {
+    #     "doc": get_class_documentation(TabItem, lines=None)["doc"],
+    #     "params": get_function_documentation(TabItem.__init__)[1],
+    #     "params_doc": get_function_documentation(TabItem.__init__)[2],
+    # }
+
+
+    SCREENSHOT_FOLDER = "dist/assets/demo_screenshots"
+    os.makedirs(SCREENSHOT_FOLDER, exist_ok=True)
+
+    demo_code = {}
+    for component in components_docs:
+        for code_src in component["demos"]:
+            with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
+                python_code = code_file.read().replace(
+                    'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+                )
+                demo_code[code_src] = python_code
+
+    for code_src in interface["demos"]:
+        with open(os.path.join(GRADIO_DEMO_DIR, code_src, "run.py")) as code_file:
+            python_code = code_file.read().replace(
+                'if __name__ == "__main__":\n    iface.launch()', "iface.launch()"
+            )
+            demo_code[code_src] = python_code
+
+    with open('embedding-configs.json') as json_file:
+        embedding_configs = json.load(json_file)
+
     docs = {
-        "input": inputs,
-        "output": outputs,
+        "components": components_docs,
         "interface": interface,
         "launch": launch,
         "load": load,
+        "from_pipeline": from_pipeline,
+        "blocks": blocks_docs,
+        "tabbed_interface": tabbed_interface,
+        "parallel": parallel,
+        "series": series,
+        # "row": row,
+        # "column": column,
+        # "tabs": tabs,
+        # "tabitem": tabitem,
+        "demo_code": demo_code,
+        "embedding_configs": embedding_configs
     }
+
     os.makedirs("generated", exist_ok=True)
     with open("src/docs_template.html") as template_file:
         template = Template(template_file.read())
         output_html = template.render(
-            docs=docs, demo_links=demo_links, navbar_html=navbar_html
+            docs=docs, demo_links=demo_links, navbar_html=navbar_html,
+            entry_js_file=ENTRY_JS_FILE,
+            entry_css_file=ENTRY_CSS_FILE
         )
     os.makedirs(os.path.join("generated", "docs"), exist_ok=True)
     with open(
@@ -349,7 +600,10 @@ def render_other():
             os.path.join("src/other_templates", template_filename)
         ) as template_file:
             template = Template(template_file.read())
-            output_html = template.render(GRADIO_ASSETS)
+            output_html = template.render(
+                entry_js_file=ENTRY_JS_FILE,
+                entry_css_file=ENTRY_CSS_FILE
+            )
         folder_name = template_filename[:-14]
         os.makedirs(os.path.join("generated", folder_name), exist_ok=True)
         with open(
@@ -362,5 +616,7 @@ if __name__ == "__main__":
     render_index()
     render_guides_main()
     render_guides()
-    render_static_docs()
+    render_docs()
+    # render_static_docs()
+    render_gallery()
     render_other()

website/homepage/runtime.txt

@@ -0,0 +1 @@
+3.8

website/homepage/src/assets/img/thunder.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512.007 512.007" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<path xmlns="http://www.w3.org/2000/svg" style="" d="M397.413,199.303c-2.944-4.576-8-7.296-13.408-7.296h-112v-176c0-7.552-5.28-14.08-12.672-15.648  c-7.52-1.6-14.88,2.272-17.952,9.152l-128,288c-2.208,4.928-1.728,10.688,1.216,15.2c2.944,4.544,8,7.296,13.408,7.296h112v176  c0,7.552,5.28,14.08,12.672,15.648c1.12,0.224,2.24,0.352,3.328,0.352c6.208,0,12-3.616,14.624-9.504l128-288  C400.805,209.543,400.389,203.847,397.413,199.303z" fill="#ff822a" data-original="#ffc107" class=""/>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>

website/homepage/src/docs_template.html

@@ -18,14 +18,19 @@
   <meta name="twitter:title" content="Gradio Docs">
   <meta name="twitter:description" content="Browse Gradio documentation and examples">
   <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  
-
+  <link href="https://fonts.cdnfonts.com/css/product-sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
+  <link rel="stylesheet" href="/gradio_static/assets/{{ entry_css_file }}">
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/assets/prism.css">
   <style>
     pre {
       overflow-x: hidden !important;
-      border: solid 1px black;
+      overflow-y: scroll !important;
+      background: #F6F7FA;
+      border-radius: 6px;
     }
 
     code {
@@ -35,6 +40,10 @@
       color: black;
     }
 
+    .header:hover .anchor {
+      visibility: visible;
+    }
+
   </style>
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
     <script>
@@ -45,71 +54,157 @@
       gtag('js', new Date());
       gtag('config', 'UA-156449732-1');
     </script>
-
 </head>
 
-<body class="bg-white text-gray-900 text-md sm:text-lg">
+<body>
   {{navbar_html|safe}}
-  <div class="container mx-auto px-4">
-    <main class="container flex gap-4">
-      <div class="h-screen leading-relaxed sticky top-0 bg-gray-50 p-4 text-md overflow-y-auto hidden md:block" style="width: 64rem">
-        <a class="link mb-2 block" href="#creating_interfaces">Creating Interfaces</a>
-        <a class="block thin-link" href="#interface">Interfaces</a>
-        <a class="block thin-link" href="#launch">Launching</a>
-        <a class="block thin-link" href="#load">Loading</a>
-        <a class="link my-2 block" href="#input_components">Input Components</h4>
-        {% for input in docs["input"] %}
-        <a class="block thin-link" href="#i_{{ input["name"].lower() }}">{{ input["name"] }}</a>
-        {% endfor %}
-        <a class="link my-2 block" href="#output_components">Output Components</h4>
-          {% for output in docs["output"] %}
-        <a class="block thin-link" href="#o_{{ output["name"].lower() }}">{{ output["name"] }}</a>
+  <div class="container mx-auto max-w-7xl">
+    <main class="flex gap-4">
+      <div class="py-4 navigation h-screen leading-relaxed sticky top-0 text-md overflow-y-auto hidden md:block rounded-t-xl bg-gradient-to-r from-white to-gray-50" style="min-width: 18%">
+        <a class="px-4 link mb-2 block border-orange-500 text-orange-500 md:border-l-2 pl-4" href="#building_demos">Building Demos</a>
+        <a class="px-4 block thin-link" href="#interface">Interface</a>
+        <a class="px-4 block thin-link" href="#combining_interfaces">Combining Interfaces</a>
+        <a class="px-4 block thin-link" href="#blocks">Blocks<sup class="text-orange-500">NEW</sup></a>
+        <a class="px-4 link my-2 block" href="#components">Components</h4>
+        {% for component in docs["components"] %}
+        <a class="px-4 block thin-link" href="#{{ component["name"].lower() }}">{{ component["name"] }}</a>
         {% endfor %}
       </div>
-      <div class="leading-7 max-w-full">
-        <p class="bg-blue-200 border border-blue-600 px-4 py-2 rounded mb-4">If you are just getting started with Gradio, see the <a class="link" href="/getting_started">Getting Started</a> guide.</p>
-        <h1 class="text-3xl font-semibold mb-4">Docs</h1>
-        <h2 id="creating_interfaces" class="text-2xl font-semibold mb-4">Creating Interfaces</h2>
-        <section class="flex flex-col gap-6">
-          <div id="interface" class="func">
+      <div class="docs mx-6 leading-7 max-w-full">
+        <p class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200/80 px-4 py-1 rounded-full mb-4 text-md w-full text-orange-900">New to Gradio? Start here: <a class="link underline" href="/getting_started">Getting Started</a></p>
+        <h2 id="building_demos" class="text-4xl font-light mb-4 mt-8 text-orange-500">Building Demos</h2>
+        <section id="interface" class="flex flex-col gap-6">
+          <div class="func">
+            <h3 id="interface-header" class="text-3xl font-light my-4">Interface</h3>
+            <button class="hidden rounded-full bg-orange-500 text-white py-1 px-3 my-3" onclick="showDemos({{ docs.interface['demos'] }})">
+              Try Demo &#8594;
+            </button>
             <pre><code class='lang-python'>gradio.Interface(<!--
-          -->{% for param in docs.interface["params"] %}<!--
+          -->{% for param in docs.interface["params"][:4] %}<!--
             -->{% if param|length == 1 %}<!--
               -->{{ param[0] }}<!--
             -->{% else %}<!--
               -->{{ param[0] }}={{ param[1] }}<!--
             -->{% endif %}<!--
-            -->{% if not loop.last %}, {% endif %}<!--
-          -->{% endfor %})</code></pre>
-            <p class="mb-2">{{ docs.interface["doc"] }}</p>
-            <h4 class="font-semibold mb-2">Parameters</h4>
-            <ul class="list-disc list-inside">
+            -->, <!--
+          -->{% endfor %}&#183;&#183;&#183;)</code></pre>
+            <p class="mb-2 w-full md:pr-12 mt-4 text-lg">{{ docs.interface["doc"] }}</p>
+            <table class="table-fixed w-full mt-6 mb-4">
+              <thead class="text-left">
+                <tr>
+                  <th class="font-semibold w-2/5">Parameter</th>
+                  <th class="font-semibold">Description</th>
+                </tr>
+              </thead>
+            </table>
+            <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+              <tbody class="text-left align-top divide-y">
               {% for param in docs.interface["params_doc"] %}
-              <li><span class="font-semibold">{{ param[0] }}</span> <em>({{ param[1] }})</em> - {{ param[2] }}</li>
+                  <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+                    <td class="p-3 w-2/5">
+                      <code class=“prettyprint”>{{ param[0] }}</code>
+                      <p class="text-gray-500 italic">{{ param[1] }}</p>
+                      {% if docs.interface["params"][loop.index]|length == 1 %}
+                        <p class="text-orange-600 font-semibold italic">required</p>
+                      {% else %}
+                        <p class="text-gray-600 font-semibold italic">default: {{ docs.interface["params"][loop.index][1] }}</p>
+                      {% endif %}
+                    </td>
+                    <td class="p-3 text-gray-700">
+                      <p>{{ param[2] }}</p>
+                    </td>
+                  </tr>
               {% endfor %}
-            </ul>
+              </tbody>
+            </table>
+            <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
+            <pre><code class='lang-python'>{{ docs.interface["example"][0] }}</code></pre>
+            <pre><code class='lang-python'>{{ docs.interface["example"][1] }}</code></pre>
           </div>
-          <div id="launch" class="func">
+          <h3 class="font-semibold">Methods:</h3>
+          <div id="launch" class="func ml-12">
+            <h3 id="launch-header" class="text-2xl font-light my-4">launch()</h3>
             <pre><code class='lang-python'>gradio.Interface().launch(<!--
-            -->{% for param in docs.launch["params"] %}<!--
-              -->{% if param|length == 1 %}<!--
-                -->{{ param[0] }}<!--
-              -->{% else %}<!--
-                -->{{ param[0] }}={{ param[1] }}<!--
-              -->{% endif %}<!--
-              -->{% if not loop.last %}, {% endif %}<!--
-            -->{% endfor %})</code></pre>
-            <p class="mb-2">Launches the webserver that serves the UI for the interface.</p>
-            <h4 class="font-semibold mb-2">Parameters</h4>
-            <ul class="list-disc list-inside">
+            -->&#183;&#183;&#183;<!--
+            -->)</code></pre>
+            <p class="mb-2 w-full md:pr-12 mt-4 text-lg">{{ docs.launch["doc"] }}</p>
+            <table class="table-fixed w-full mt-6 mb-4">
+              <thead class="text-left">
+                <tr>
+                  <th class="font-semibold w-2/5">Parameter</th>
+                  <th class="font-semibold">Description</th>
+                </tr>
+              </thead>
+            </table>
+            <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+              <tbody class="text-left align-top divide-y">
               {% for param in docs.launch["params_doc"] %}
-              <li><span class="font-semibold">{{ param[0] }}</span> <em>({{ param[1] }})</em> - {{ param[2] }}</li>
+                  <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+                    <td class="p-3 w-2/5 break-words">
+                      <code class=“prettyprint”>{{ param[0] }}</code>
+                      <p class="text-gray-500 italic">{{ param[1] }}</p>
+                      {% if docs.launch["params"][loop.index]|length == 1 %}
+                        <p class="text-orange-600 font-semibold italic">required</p>
+                      {% else %}
+                        <p class="text-gray-600 font-semibold italic">default: {{ docs.launch["params"][loop.index][1] }}</p>
+                      {% endif %}
+                    </td>
+                    <td class="p-2 w-3/5 break-words text-gray-700">
+                      <p>{{ param[2] }}</p>
+                    </td>
+                  </tr>
               {% endfor %}
-            </ul>
+              </tbody>
+            </table>
+            <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
+            <pre><code class='lang-python'>{{ docs.launch["example"] }}</code></pre>
           </div>
-          <div id="load" class="func">
+          <div id="load" class="func ml-12">
+            <h3 id="load-header" class="text-2xl font-light my-4">load()</h3>
             <pre><code class='lang-python'>gradio.Interface.load(<!--
-            -->{% for param in docs.load["params"] %}<!--
+            -->{% for param in docs.load["params"][:1] %}<!--
+              -->{% if param|length == 1 %}<!--
+                -->{{ param[0] }}<!--
+              -->{% else %}<!--
+                -->{{ param[0] }}={{ param[1] }}<!--
+              -->{% endif %}, <!--
+            -->{% endfor %}&#183;&#183;&#183;)</code></pre>
+            <p class="mb-2 w-full md:pr-12 mt-4 text-lg">{{ docs.load["doc"] }}</p>
+            <table class="table-fixed w-full mt-6 mb-4">
+              <thead class="text-left">
+                <tr>
+                  <th class="font-semibold w-2/5">Parameter</th>
+                  <th class="font-semibold">Description</th>
+                </tr>
+              </thead>
+            </table>
+            <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+              <tbody class="text-left align-top divide-y">
+              {% for param in docs.load["params_doc"] %}
+                  <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+                    <td class="p-3 w-2/5">
+                      <code class=“prettyprint”>{{ param[0] }}</code>
+                      <p class="text-gray-500 italic">{{ param[1] }}</p>
+                      {% if docs.load["params"][loop.index - 1]|length == 1 %}
+                        <p class="text-orange-600 font-semibold italic">required</p>
+                      {% else %}
+                        <p class="text-gray-600 font-semibold italic">default: {{ docs.load["params"][loop.index - 1][1] }}</p>
+                      {% endif %}
+                    </td>
+                    <td class="p-3 text-gray-700">
+                      <p>{{ param[2] }}</p>
+                    </td>
+                  </tr>
+              {% endfor %}
+              </tbody>
+            </table>
+            <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
+            <pre><code class='lang-python'>{{ docs.load["example"] }}</code></pre>
+          </div>
+          <div id="from_pipeline" class="func ml-12">
+            <h3 id="from_pipeline-header" class="text-2xl font-light my-4">from_pipeline()</h3>
+            <pre><code class='lang-python'>gradio.Interface.from_pipeline(<!--
+            -->{% for param in docs.from_pipeline["params"] %}<!--
               -->{% if param|length == 1 %}<!--
                 -->{{ param[0] }}<!--
               -->{% else %}<!--
@@ -117,27 +212,237 @@
               -->{% endif %}<!--
               -->{% if not loop.last %}, {% endif %}<!--
             -->{% endfor %})</code></pre>
-            <p class="mb-2">Class method to construct an Interface from an external source repository, such as huggingface.</p>
-            <h4 class="font-semibold mb-2">Parameters</h4>
-            <ul class="list-disc list-inside">
-              {% for param in docs.load["params_doc"] %}
-              <li><span class="font-semibold">{{ param[0] }}</span> <em>({{ param[1] }})</em> - {{ param[2] }}</li>
+            <p class="mb-2 w-full md:pr-12 mt-4 text-lg">{{ docs.from_pipeline["doc"] }}</p>
+            <table class="table-fixed w-full mt-6 mb-4">
+              <thead class="text-left">
+                <tr>
+                  <th class="font-semibold w-2/5">Parameter</th>
+                  <th class="font-semibold">Description</th>
+                </tr>
+              </thead>
+            </table>
+            <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+              <tbody class="text-left align-top divide-y">
+              {% for param in docs.from_pipeline["params_doc"] %}
+                  <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+                    <td class="p-3 w-2/5">
+                      <code class=“prettyprint”>{{ param[0] }}</code>
+                      <p class="text-gray-500 italic">{{ param[1] }}</p>
+                      {% if docs.from_pipeline["params"][loop.index - 1]|length == 1 %}
+                        <p class="text-orange-600 font-semibold italic">required</p>
+                      {% else %}
+                        <p class="text-gray-600 font-semibold italic">default: {{ docs.from_pipeline["params"][loop.index - 1][1] }}</p>
+                      {% endif %}
+                    </td>
+                    <td class="p-3 text-gray-700">
+                      <p>{{ param[2] }}</p>
+                    </td>
+                  </tr>
               {% endfor %}
-            </ul>
-            <h4 class="font-semibold mb-2">Returns</h4>
-            <ul class="list-disc list-inside">
-              {% for ret in docs.load["return_doc"] %}
-              <li><em>({{ ret[0] }})</em> - {{ ret[1] }}</li>
-              {% endfor %}
-            </ul>
+              </tbody>
+            </table>
+            <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
+            <pre><code class='lang-python'>{{ docs.from_pipeline["example"] }}</code></pre>
+            <div class="py-4">
+              <div class="w-full border-t border-gray-200"></div>
+            </div>
+          </div>
+        </section>
+        <section id="combining_interfaces" class="flex flex-col gap-6">
+          <div class="func">
+            <h3 id="combining-interfaces-header" class="text-3xl font-light my-4">Combining Interfaces</h3>
+            <p class="w-4/5 mt-4 text-lg">Once you have created several Interfaces, we provide several classes that let you
+              start combining them together. For example, you can chain them in <em>Series</em>
+              or compare their outputs in <em>Parallel</em> if the inputs and outputs match accordingly. 
+              You can also display arbitrary Interfaces together in a tabbed layout using <em>TabbedInterface</em>.</p>
+              <h3 class="font-semibold">Classes:</h3>
+              <div id="tabbed_interface" class="func ml-20">
+                <h3 id="tabbed_interface_header" class="text-2xl font-light my-4">TabbedInterface</h3>
+                <pre><code class='lang-python'>gradio.TabbedInterface(interface_list, &#183;&#183;&#183;)</code></pre>
+                <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.tabbed_interface["doc"] }}</p>
+                <table class="table-fixed w-full my-4">
+                  <thead class="text-left">
+                    <tr>
+                      <th class="font-semibold w-2/5">Parameter</th>
+                      <th class="font-semibold">Description</th>
+                    </tr>
+                  </thead>
+                </table>
+                <table class="table-fixed w-full my-4 rounded-lg bg-gray-100">
+                  <tbody class="text-left align-top">
+                  {% for param in docs.tabbed_interface["params_doc"] %}
+                      <tr class="group hover:bg-gray-200">
+                        <td class="p-2 w-2/5 break-words">
+                          <code class=“prettyprint”>{{ param[0] }}</code>
+                          <p class="text-gray-500 italic">{{ param[1] }}</p>
+                          {% if docs.tabbed_interface["params"][loop.index]|length == 1 %}
+                            <p class="text-orange-600 font-semibold italic">required</p>
+                          {% else %}
+                            <p class="text-gray-600 font-semibold italic">default: {{ docs.tabbed_interface["params"][loop.index][1] }}</p>
+                          {% endif %}
+                        </td>
+                        <td class="p-2 w-3/5 break-words">
+                          <p>{{ param[2] }}</p>
+                        </td>
+                      </tr>
+                  {% endfor %}
+                  </tbody>
+                </table>
+              </div>
+              
+              <div id="parallel" class="func ml-20">
+                <h3 id="parallel-header" class="text-2xl font-light my-4">Parallel</h3>
+                <pre><code class='lang-python'>gradio.Parallel(*interfaces, &#183;&#183;&#183;)</code></pre>
+                <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.parallel["doc"] }}</p>
+                <table class="table-fixed w-full my-4">
+                  <thead class="text-left">
+                    <tr>
+                      <th class="font-semibold w-2/5">Parameter</th>
+                      <th class="font-semibold">Description</th>
+                    </tr>
+                  </thead>
+                </table>
+                <table class="table-fixed w-full my-4 rounded-lg bg-gray-100">
+                  <tbody class="text-left align-top">
+                  {% for param in docs.parallel["params_doc"] %}
+                      <tr class="group hover:bg-gray-200">
+                        <td class="p-2 w-2/5 break-words">
+                          <code class=“prettyprint”>{{ param[0] }}</code>
+                          <p class="text-gray-500 italic">{{ param[1] }}</p>
+                          {% if docs.parallel["params"][loop.index]|length == 1 %}
+                            <p class="text-orange-600 font-semibold italic">required</p>
+                          {% else %}
+                            <p class="text-gray-600 font-semibold italic">default: None</p>
+                          {% endif %}
+                        </td>
+                        <td class="p-2 w-3/5 break-words">
+                          <p>{{ param[2] }}</p>
+                        </td>
+                      </tr>
+                  {% endfor %}
+                  </tbody>
+                </table>
+              </div>              
+
+              <div id="series" class="func ml-20">
+                <h3 id="series-header" class="text-2xl font-light my-4">Series</h3>
+                <pre><code class='lang-python'>gradio.Series(*interfaces, &#183;&#183;&#183;)</code></pre>
+                <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.series["doc"] }}</p>
+                <table class="table-fixed w-full my-4">
+                  <thead class="text-left">
+                    <tr>
+                      <th class="font-semibold w-2/5">Parameter</th>
+                      <th class="font-semibold">Description</th>
+                    </tr>
+                  </thead>
+                </table>
+                <table class="table-fixed w-full my-4 rounded-lg bg-gray-100">
+                  <tbody class="text-left align-top">
+                  {% for param in docs.series["params_doc"] %}
+                      <tr class="group hover:bg-gray-200">
+                        <td class="p-2 w-2/5 break-words">
+                          <code class=“prettyprint”>{{ param[0] }}</code>
+                          <p class="text-gray-500 italic">{{ param[1] }}</p>
+                          {% if docs.series["params"][loop.index]|length == 1 %}
+                            <p class="text-orange-600 font-semibold italic">required</p>
+                          {% else %}
+                            <p class="text-gray-600 font-semibold italic">default: None</p>
+                          {% endif %}
+                        </td>
+                        <td class="p-2 w-3/5 break-words">
+                          <p>{{ param[2] }}</p>
+                        </td>
+                      </tr>
+                  {% endfor %}
+                  </tbody>
+                </table>
+              </div>              
+              
+
+          </div>
+        </section>
+        <section id="blocks" class="flex flex-col gap-6">
+          <div class="func">
+            <h3 id="blocks-header" class="text-3xl font-light my-4">Blocks</h3>
+            <button class="hidden rounded-full bg-orange-500 text-white py-1 px-3 my-3" onclick="showDemos('blocks')">
+              Try Demo &#8594;
+            </button>
+            <pre><code class='lang-python'>with gradio.Blocks(theme, analytics_enabled, mode):
+    &#183;&#183;&#183;</code></pre>
+    <p class="mb-2 w-full md:pr-12 mt-4 text-lg">{{ docs.blocks["doc"] }}</p>
+    <table class="table-fixed w-full mt-6 mb-4">
+      <thead class="text-left">
+        <tr>
+          <th class="font-semibold w-2/5">Parameter</th>
+          <th class="font-semibold">Description</th>
+        </tr>
+      </thead>
+    </table>
+    <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+      <tbody class="text-left align-top divide-y">
+      {% for param in docs.blocks["params_doc"] %}
+          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+            <td class="p-3 w-2/5">
+              <code class=“prettyprint”>{{ param[0] }}</code>
+              <p class="text-gray-500 italic">{{ param[1] }}</p>
+              {% if docs.blocks["params"][loop.index]|length == 1 %}
+                <p class="text-orange-600 font-semibold italic">required</p>
+              {% else %}
+                <p class="text-gray-600 font-semibold italic">default: {{ docs.blocks["params"][loop.index][1] }}</p>
+              {% endif %}
+            </td>
+            <td class="p-3 text-gray-700">
+              <p>{{ param[2] }}</p>
+            </td>
+          </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+    <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
+    <pre><code class='lang-python'>{{ docs.blocks["example"] }}</code></pre>
+
+    <!-- <h3 class="font-semibold">Layout Classes:</h3>
+    <div id="layout-classes" class="func ml-20">
+      <h3 id="layout-classes-header" class="text-2xl font-light my-4">Row</h3>
+      <pre><code class='lang-python'>with gradio.Row():
+    &#183;&#183;&#183;</code></pre>
+      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
+
+      <h3 id="column-header" class="text-2xl font-light my-4">Column</h3>
+      <pre><code class='lang-python'>with gradio.Column():
+    &#183;&#183;&#183;</code></pre>
+      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
+
+      <h3 id="tabs-header" class="text-2xl font-light my-4">Tabs and TabItem</h3>
+      <pre><code class='lang-python'>with gradio.Tabs():
+    with gradio.TabItem("Tab 1"):
+      &#183;&#183;&#183;
+    with gradio.TabItem("Tab 2"):
+      &#183;&#183;&#183;</code></pre>
+      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
+    </div> -->
+
           </div>
         </section>
-        {% for component_type in ('input', 'output') %}
-        <h2 id="{{ component_type }}_components" class="text-2xl font-semibold my-4">{{ component_type|capitalize }} Components</h2>
         <section class="flex flex-col gap-6">
-          {% for func in docs[component_type] %}
-          <div id="{{ component_type[0] }}_{{ func["name"].lower() }}" class="func">
-            <pre ><code class="lang-python">gradio.{{ component_type }}s.<span>{{ func["name"] }}(</span><!--
+          <div id="components">
+            <h2 id ="components-header" class="text-4xl font-light my-4 text-orange-500">Components</h2>
+            <p class="w-4/5 mt-8 text-lg">Gradio includes pre-built components that can be used as
+            inputs or outputs in your Interface or Blocks with a single line of code. Components
+            include <em>preprocessing</em> steps that convert user data submitted through browser
+            to something that be can used by a Python function, and <em>postprocessing</em>
+          steps to convert values returned by a Python function into something that can be displayed in a browser.</p>
+          </div>
+          {% for func in docs["components"] %}
+          <div id="{{ func['name'].lower() }}" class="func">
+            <h3 id="{{ func['name'].lower() }}-header" class="text-3xl font-light my-4">
+              {{ func['name'] }}
+            </h3>
+            <button class="hidden rounded-full bg-orange-500 text-white py-1 px-3 my-3" onclick="showDemos({{ func['demos'] }})">
+              Try Demo &#8594;
+            </button>
+            <div id='{{ func["name"].lower() }}-component'  class="component-embedding hidden"></div>
+            <pre><code class="lang-python">gradio.components.<span>{{ func["name"] }}(</span><!--
             -->{% for param in func["params"] %}<!--
               -->{% if param|length == 1 %}<!--
                 -->{{ param[0] }}<!--
@@ -146,14 +451,53 @@
               -->{% endif %}<!--
               -->{% if not loop.last %}, {% endif %}<!--
             -->{% endfor %}<span>)</span></code></pre>
-            <p class="mb-2">{{ func["doc"] }}</p>
-            <p class="mb-2">{{ component_type|capitalize }} type: <span class="font-semibold">{{ func["type"] }}</span></p>
-            <h4 class="font-semibold mb-2">Parameters</h4>
-            <ul class="list-disc list-inside">
+            <p class="w-4/5 mt-8 text-lg">{{ func["doc"] }}</p>
+            {% if func["Preprocessing"]|length %}
+            <p class="text-gray-500">Preprocessing: {{ func["Preprocessing"] | safe}}</p>
+            {% endif %}
+            {% if func["Postprocessing"]|length %}
+            <p class="text-gray-500">Postprocessing: {{ func["Postprocessing"] | safe}}</p>
+            {% endif %}
+            <p class="text-gray-500">Supported events: <em>{{func["events"]}}</em></p>
+            <table class="table-fixed w-full mt-6 mb-4">
+              <thead class="text-left">
+                <tr>
+                  <th class="font-semibold w-2/5">Parameter</th>
+                  <th class="font-semibold">Description</th>
+                </tr>
+              </thead>
+            </table>
+            <table class="table-fixed w-full mt-6 mb-4 rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
+              <tbody class="text-left align-top divide-y">
               {% for param in func["params_doc"] %}
-              <li><span class="font-semibold">{{ param[0] }}</span> <em>({{ param[1] }})</em> - {{ param[2] }}</li>
+                  <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+                    <td class="p-3 w-2/5">
+                      <code class=“prettyprint”>{{ param[0] }}</code>
+
+                      <p class="text-gray-500 italic">{{ param[1] }}</p>
+                    </td>
+                    <td class="p-3 text-gray-700">
+                      <p>{{ param[2] }}</p>
+                    </td>
+                  </tr>
               {% endfor %}
-            </ul>
+              </tbody>
+            </table>
+            <h4 class="my-2 font-semibold">Step-by-step Guides</h4>
+            {% if func["guides"] %}
+              <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
+                {% for guide in func["guides"] %}
+                <a class="flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4" target="_blank" href="/{{ guide.name }}">
+                  <div class="flex flex-col p-4 h-min">
+                    <p class="font-semibold group-hover:underline text-l">{{ guide.pretty_name }}</p>
+                  </div>
+                </a>
+
+                {% endfor %}
+              </div>
+            {% else %}
+              <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/master/guides">contribute</a> a guide about <span class="font-semibold">{{ func["name"] }}</span></p>
+            {% endif %}
             {% if func["shortcuts"]|length %}
             <h4 class="my-2 font-semibold">String Shortcuts</h4>
             <ul class="list-disc list-inside">
@@ -197,47 +541,296 @@
               {% endfor %}
             </ul>
             {% endif %}
-            <h4 class="my-2 font-semibold">Demos</h4>
-            <div class="flex gap-4 overflow-x-auto pb-1">
-              {% for demo in func["demos"] %}
-              <div class="flex-shrink-0 flex flex-col">
-                <div class="mb-2">
-                  <span class="italic">{{ demo }}:</span>
-                  <a class="demo_code link" target="_blank"
-                    href="{{ demo_links[demo] if demo in demo_links else '#'  }}"
-                    target="_blank">
-                    Open in Colab
-                  </a>
-                </div>
-                <div class="relative cursor-pointer flex-grow">
-                  <a href="{{ demo_links[demo] }}" target="_blank" class="absolute w-full h-full bg-gray-400 bg-opacity-10 hover:bg-opacity-0 group transition flex items-center justify-center">
-                    <img src="/assets/img/colab-badge.svg" class="opacity-60 group-hover:opacity-80 transition h-6">
-                  </a>
-                  <img style="width:420px"
-                    src="/assets/demo_screenshots/{{ demo }}.png">
-                </div>
+<!--            <h4 class="my-2 font-semibold">Demos</h4>-->
+<!--            <div class="flex gap-4 overflow-x-auto pb-1">-->
+<!--              {% for demo in func["demos"] %}-->
+<!--              <div class="flex-shrink-0 flex flex-col">-->
+<!--                <div class="mb-2">-->
+<!--                  <span class="italic">{{ demo }}:</span>-->
+<!--                  <a class="demo_code link" target="_blank"-->
+<!--                    href="{{ demo_links[demo] if demo in demo_links else '#'  }}"-->
+<!--                    target="_blank">-->
+<!--                    Open in Colab-->
+<!--                  </a>-->
+<!--                </div>-->
+<!--                <div class="relative cursor-pointer flex-grow">-->
+<!--                  <a href="{{ demo_links[demo] }}" target="_blank" class="absolute w-full h-full bg-gray-400 bg-opacity-10 hover:bg-opacity-0 group transition flex items-center justify-center">-->
+<!--                    <img src="/assets/img/colab-badge.svg" class="opacity-60 group-hover:opacity-80 transition h-6">-->
+<!--                  </a>-->
+<!--                  <img style="width:420px"-->
+<!--                    src="/assets/demo_screenshots/{{ demo }}.png">-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              {% endfor %}-->
+<!--            </div>-->
+            {% if not loop.last %}
+              <div class="py-4">
+                <div class="w-full border-t border-gray-200"></div>
               </div>
-              {% endfor %}
-            </div>
+            {% endif %}
           </div>
           {% endfor %}
         </section>
-        {% endfor %}
       </div>
+
+        <div class="fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" id="demos-window">
+          <div class="relative mx-auto my-auto p-5 border w-4/5 shadow-lg rounded-md bg-white" style="top: 5%; height: 90%">
+            <div class="flex flex-row items-start w-11/12 h-11/12 m-auto gap-6">
+              <div class="w-2/5">
+                <div class="flex flex-column items-start w-11/12 h-11/12 m-auto gap-6">
+                  <h3 class="text-3xl font-semibold text-left">Code</h3>
+                </div>
+                <div class="w-full h-full my-2 bg-grey-200 rounded-md">
+                  {% for src, code in docs.demo_code.items() %}
+                    <pre id="{{ src }}" class="hidden demo-code"><code class='lang-python' style="max-height: 34rem;">{{ code }}</code></pre>
+                  {% endfor %}
+                </div>
+              </div>
+              <div class="w-3/5">
+                <h2 class="text-3xl font-semibold text-left">Demos</h2>
+                <div class="mb-6">
+                  <nav class="demos-nav flex flex-wrap gap-6 whitespace-nowrap text-gray-600 md:text-lg my-2 md:mb-0"></nav>
+                </div>
+                <div class="demos w-full h-full my-2 bg-gray-200 rounded-md">
+                  {% for src, code in docs.demo_code.items() %}
+                    <div id="{{ src }}-interface" class="hidden demo-interface"></div>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
     </main>
   </div>
-  <footer class="container mx-auto p-4 flex justify-between items-center">
-    <img src="/assets/img/logo.svg" class="h-10">
-    <div class="flex gap-4">
+  <footer class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 z-10 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-6 justify-between flex-wrap gap-6">
+    <a href="/">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
+    </a>
+    <nav class="flex ml-auto hidden w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-8">
       <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
         <img src="/assets/img/twitter.svg" class="h-8">
       </a>
       <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
         <img src="/assets/img/github.svg" class="h-8">
       </a>
-    </div>
+    </nav>
   </footer>
   <script src="/assets/prism.js"></script>
+  <script id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ entry_js_file }}"></script>
+  <script>
+   // highlighting section in nav bar
+    let mainNavLinks = document.querySelectorAll(".navigation a");
+    let lastId;
+    let cur = [];
+
+    window.addEventListener("scroll", event => {
+      let fromTop = window.scrollY;
+
+    mainNavLinks.forEach(link => {
+      let section = document.querySelector(link.hash);
+
+      if (
+        section.offsetTop <= fromTop*1.01 &&
+        section.offsetTop + section.offsetHeight > fromTop*1.01
+      ) {
+        link.classList.add("border-orange-500", "text-orange-500", "md:border-l-2", "pl-4");
+      } else {
+        link.classList.remove("border-orange-500", "text-orange-500", "md:border-l-2", "pl-4");
+      }
+    });
+    });
+
+    // header anchor tags
+    function createAnchorTag(link) {
+            let a = document.createElement('a');
+            a.href = link;
+            a.classList.add("anchor", "invisible");
+            let img = document.createElement('img');
+            img.classList.add("anchor-img", "w-7", "max-w-full", "inline-block", "mr-0", "ml-1")
+            img.src = "/assets/img/anchor.svg";
+            a.appendChild(img);
+            return a;
+        }
+    function createMobileAnchorTag(link) {
+            let a = document.createElement('a');
+            a.href = link;
+            a.style="text-decoration: none"
+            return a;
+    }
+    var headers = document.querySelectorAll(".docs h2, .docs h3");
+    function isTouchDevice() {
+            return (('ontouchstart' in window) ||
+               (navigator.maxTouchPoints > 0) ||
+               (navigator.msMaxTouchPoints > 0));
+          }
+
+    if (isTouchDevice()) {
+          for (let i = 0; i < headers.length; i++) {
+            let link = '#' + headers[i].id;
+            var parent = headers[i].parentNode;
+            var wrapper = createMobileAnchorTag(link);
+            parent.replaceChild(wrapper, headers[i]);
+            wrapper.appendChild(headers[i]);
+          }
+    } else {
+          for (let i = 0; i < headers.length; i++) {
+            headers[i].classList.add("header");
+            let link = '#' + headers[i].id;
+            headers[i].appendChild(createAnchorTag(link))
+          }
+    }
+
+    // guides styling
+    var a;
+    guideLists = document.querySelectorAll(".guides-list");
+
+    guideLists.forEach(guideList => {
+      a = guideList.getElementsByTagName('a');
+
+      var backgrounds = ['linear-gradient(90deg, rgba(255,254,188,0.3) 0%, rgba(255,255,240,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(255,205,188,0.3) 0%, rgba(255,253,253,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(255,188,188,0.3) 0%, rgba(255,238,238,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(194,255,169,0.3) 0%, rgba(243,255,238,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(169,255,237,0.3) 0%, rgba(230,255,250,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(182,169,255,0.3) 0%, rgba(237,234,255,0.3) 100%)',
+                         'linear-gradient(90deg, rgba(255,183,245,0.3) 0%, rgba(255,234,252,0.3) 100%)']
+
+      function shuffleBackgrounds(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+      }
+
+      shuffleBackgrounds(backgrounds);
+
+      color_counter = 0
+      for (let i = 0; i < a.length; i++) {
+        a[i].style.background = backgrounds[color_counter];
+        color_counter += 1
+        if (color_counter == backgrounds.length) {
+          color_counter = 0;
+        }
+      }
+      });
+
+    // DEMOS
+    var demosWindow = document.getElementById("demos-window");
+    var demosNav = document.querySelector("#demos-window .demos-nav");
+    var demos = document.querySelector("#demos-window .demos");
+    var demoCode = document.querySelector("#demos-window .demo-code");
+
+    function showCode(demo_name) {
+      let codeDiv = document.getElementById(demo_name);
+      let allCodeDivs = document.querySelectorAll("#demos-window .demo-code").forEach(e => {
+              e.classList.add("hidden");
+            });
+      codeDiv.classList.remove("hidden");
+    }
+
+    function showInterface(demo_name) {
+      let interfaceDiv = document.getElementById(demo_name + "-interface");
+      let allInterfaceDivs = document.querySelectorAll("#demos-window .demo-interface").forEach(e => {
+              e.classList.add("hidden");
+            });
+      interfaceDiv.classList.remove("hidden");
+    }
+
+    var demo_endpoint = "/demo";
+
+    {% for src, code in docs.demo_code.items() %}
+        fetch('/demo/{{ src }}/config')
+        .then(response => response.json())
+        .then(demo => {
+          demo.root = demo_endpoint + "/{{ src }}/";
+          launchGradio(demo, "#{{ src }}-interface");
+        });
+    {% endfor %}
+
+
+
+    function buildDemos(demo_names) {
+      console.log(demo_names);
+      for (let i = 0; i < demo_names.length; i++) {
+        if (i == 0) {
+          let demoTab = document.createElement('div');
+          demoTab.classList.add("demo-tab", "mr-2", "border-orange-500", "border-b-2", "text-orange-500", "cursor-pointer");
+          showCode(demo_names[i]);
+          showInterface(demo_names[i])
+          demoTab.innerHTML = demo_names[i];
+          demoTab.onclick = function() {
+            showCode(demo_names[i]);
+            showInterface(demo_names[i])
+            let otherTabs = document.querySelectorAll(".demo-tab").forEach(e => {
+              e.classList.remove("text-orange-500", "border-orange-500", "border-b-2");
+              e.classList.add("hover:text-gray-800");
+            });
+            demoTab.classList.add("border-orange-500", "border-b-2", "text-orange-500");
+          };
+          demosNav.appendChild(demoTab);
+        } else {
+          let demoTab = document.createElement('div');
+          demoTab.classList.add("demo-tab", "mr-2", "cursor-pointer", "hover:text-gray-800");
+          demoTab.innerHTML = demo_names[i];
+          demoTab.onclick = function() {
+            showCode(demo_names[i]);
+            showInterface(demo_names[i])
+            let otherTabs = document.querySelectorAll(".demo-tab").forEach(e => {
+              e.classList.remove("text-orange-500", "border-orange-500", "border-b-2");
+              e.classList.add("hover:text-gray-800");
+            });
+            demoTab.classList.add("border-orange-500", "border-b-2", "text-orange-500");
+          }
+        demosNav.appendChild(demoTab);
+        }
+      }
+    }
+
+
+    function showDemos(demo_names) {
+       buildDemos(demo_names);
+       demosWindow.style.display = "block";
+    }
+
+    function removeAllChildNodes(parent) {
+        while (parent.firstChild) {
+            parent.removeChild(parent.firstChild);
+        }
+    }
+
+    window.onclick = function(event) {
+      if (event.target == demosWindow) {
+        demosWindow.style.display = "none";
+        removeAllChildNodes(demosNav);
+      }
+    }
+
+
+    {% for component, config in docs.embedding_configs.items() %}
+      target = "#{{ component }}-component";
+      config = {{ config|tojson }};
+      window.launchGradio(config, target);
+    {% endfor %}
+
+    let componentEmbeddings = document.querySelectorAll(".component-embedding").forEach(e => {
+                  e.classList.remove("dark");
+              });
+    let componentEmbeddingsFooters = document.querySelectorAll(".component-embedding .footer").forEach(e => {
+              e.classList.add("hidden");
+            });
+
+
+  </script>
 </body>
 
 </html>

website/homepage/src/gallery.html

@@ -0,0 +1,156 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Gradio Gallery</title>
+  <meta name="description" content="A gallery of awesome Gradio apps to serve as inspiration for your demo!">
+  <meta name="author" content="Abubakar Abid">
+  <meta property="og:title" content="Gradio Gallery">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://gradio.app/gallery">
+  <meta property="og:description" content="How to use Gradio">
+  <meta property="og:image" content="/assets/img/guides/guides-meta.png">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:creator" content="@teamGradio">
+  <meta name="twitter:title" content="Gradio Guides">
+  <meta name="twitter:description" content="How to use Gradio">
+  <meta name="twitter:image" content="https://gradio.app/assets/img/guides/guides-meta.png">
+
+  <link href="https://fonts.cdnfonts.com/css/product-sans" rel="stylesheet">
+  <link rel="icon" type="image/png" href="/assets/img/logo.png">
+  <link href="/gradio_static/static/bundle.css" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/assets/prism.css">
+  <style>
+    html {
+      font-size: 16px !important;
+    }
+    .search-for-tags {
+      width: 100%;
+      position: relative;
+      display: flex;
+    }
+    .searchTerm {
+      width: 100%;
+      border: 1px solid #bebfc3;
+      padding: 5px;
+      height: 50px;
+      border-radius: 25px;
+      outline: none;
+      color: #9ca3af;
+      text-align: center;
+      font-size: large;
+    }
+
+    .searchTerm:focus{
+      color: #101827;
+    }
+
+    .wrap-for-search{
+      padding-top: 20px;
+      margin: auto;
+    }
+
+    #no-guides-found {
+      text-align: center;
+      color: #9ca3af;
+      font-size: larger;
+    }
+
+    .counter-box {
+        width: 100%;
+        color: #ec8f14;
+    }
+
+    .counter{
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+
+    .counter-parent {
+      text-align: center;
+      font-size: smaller;
+    }
+    .counter-child {
+      display: inline-block;
+    }
+
+    .tags-holder {
+      text-align: left;
+      font-size: small;
+      font-weight: 300;
+      color: #5a5a5a;
+    }
+
+  </style>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-156449732-1');
+    </script>
+</head>
+
+<body class="bg-white text-gray-900 text-md sm:text-lg">
+  {{navbar_html|safe}}
+  <div class="container mx-auto px-4">
+    <main class="container flex gap-4">
+      <div class="h-screen leading-relaxed sticky top-0 bg-gray-50 p-4 text-md overflow-y-auto hidden md:block" style="background-color: #ff946c0d;">
+        <a class="link mb-2 block" href="#nlp">🖊️ NLP and Text</a>
+        <a class="link mb-2 block" href="#speech">🎵 Speech and Audio</a>
+        <a class="link mb-2 block" href="#vision">📷 Computer Vision</a>
+        <a class="link mb-2 block" href="#science">🔬 Science and Math</a>
+        <a class="link my-2 block" href="#medicine">🩺 Biology and Medicine</h4>
+        <a class="link my-2 block" href="#fun">🎉 Fun</h4>
+      </div>
+      <div class="leading-7 max-w-full">
+        <h1 class="text-3xl font-semibold mb-4">Gallery</h1>
+        <h3>Awesome demos and apps built by the Gradio community. Hosted on 
+          <a href="https://huggingface.co/spaces" target="_blank" style="font-weight: bold; text-decoration: underline;">Hugging Face Spaces</a>, 
+          where you can host your demos for free! Try these demos out in 
+          your browser, check out the source code, and be inspired 💡 </h3>
+        <h2 id="nlp" class="text-2xl font-semibold mb-4">🖊️ NLP and Text</h2>
+        <h2 id="speech" class="text-2xl font-semibold mb-4">🎵 Speech and Audio</h2>
+        <h2 id="vision" class="text-2xl font-semibold mb-4">📷 Computer Vision</h2>
+        <h2 id="science" class="text-2xl font-semibold mb-4">🔬 Science and Math</h2>
+        <h2 id="medicine" class="text-2xl font-semibold mb-4">🩺 Biology and Medicine</h2>
+        <h2 id="fun" class="text-2xl font-semibold mb-4">🎉 Fun</h2>
+        <section class="flex flex-col gap-6">
+          <div id="interface" class="func">
+            <p class="mb-2"></p>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+  <footer class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 z-10 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-6 justify-between flex-wrap gap-6">
+    <a href="/">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
+    </a>
+    <nav class="flex ml-auto hidden w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-8">
+      <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
+        <img src="/assets/img/twitter.svg" class="h-8">
+      </a>
+      <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
+        <img src="/assets/img/github.svg" class="h-8">
+      </a>
+    </nav>
+  </footer>
+  <script src="/assets/prism.js"></script>
+</body>
+
+</html>

website/homepage/src/guides_main_template.html

@@ -20,6 +20,7 @@
   <meta name="twitter:description" content="How to use Gradio">
   <meta name="twitter:image" content="https://gradio.app/assets/img/guides/guides-meta.png">
 
+  <link href="https://fonts.cdnfonts.com/css/product-sans" rel="stylesheet">
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
   <link href="/gradio_static/static/bundle.css" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
@@ -97,7 +98,7 @@
     </script>
 </head>
 
-<body class="bg-white text-gray-900 text-md sm:text-lg">
+<body>
   {{navbar_html|safe}}
   <div class="container mx-auto px-4 mb-12" style="width: 80%;">
 
@@ -141,7 +142,7 @@
         </div>
       </a>
       {% endfor %}
-  </div>
+    </div>
 
     <div id="no-guides-found" style="display: none">
     <p>
@@ -153,17 +154,25 @@
 
     </div>
   </div>
-  <footer class="container mx-auto p-4 flex justify-between items-center">
-    <div class="h-10"></div>
-    <div class="flex gap-4">
+  <footer class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 z-10 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-6 justify-between flex-wrap gap-6">
+    <a href="/">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
+    </a>
+    <nav class="flex ml-auto hidden w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-8">
       <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
         <img src="/assets/img/twitter.svg" class="h-8">
       </a>
       <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
         <img src="/assets/img/github.svg" class="h-8">
       </a>
-    </div>
-    <div class="h-10"></div>
+    </nav>
   </footer>
   <script>
   var div, li, a;

website/homepage/src/guides_template.html

@@ -13,8 +13,8 @@
   <meta name="twitter:image" content="https://gradio.app/assets/img/guides/{{ guide_name }}.png">
   <meta name="twitter:card" content="summary_large_image">
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
-  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
+  <link rel="stylesheet" href="/gradio_static/assets/{{ entry_css_file }}">
+  <link href="https://fonts.cdnfonts.com/css/product-sans" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/assets/prism.css">
   <style>
@@ -114,7 +114,7 @@
   </script>
 </head>
 
-<body class="bg-white text-gray-900 text-md sm:text-lg">
+<body>
   {{navbar_html|safe}}
   <div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
     <div class="prose mt-6 mb-6">
@@ -143,35 +143,41 @@
       {{ template_html|safe }}
     </div>
   </div>
-  <footer class="container mx-auto p-4 flex justify-between items-center">
-    <img src="/assets/img/logo.svg" class="h-10">
-    <div class="flex gap-4">
+  <footer class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 z-10 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-6 justify-between flex-wrap gap-6">
+    <a href="/">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
+    </a>
+    <nav class="flex ml-auto hidden w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-8">
       <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
         <img src="/assets/img/twitter.svg" class="h-8">
       </a>
       <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
         <img src="/assets/img/github.svg" class="h-8">
       </a>
-    </div>
+    </nav>
   </footer>
   <script src="/assets/prism.js"></script>
   <script>
     window.gradio_mode = "website";
   </script>
-  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
-  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
+  <script id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ entry_js_file }}"></script>
   <script>
     var demo_endpoint = "/demo";
     var demo_names = {{ demo_names| tojson }};
-    document.querySelector("#gradio-library").addEventListener('load', function () {
-      demo_names.forEach((demo_name, i) => {
-        fetch('/demo/' + demo_name + '/config')
-          .then(response => response.json())
-          .then(demo => {
-            demo.root = demo_endpoint + "/" + demo_name + "/";
-            launchGradio(demo, "#interface_" + demo_name);
-          });
-      });
+    demo_names.forEach((demo_name, i) => {
+      fetch('/demo/' + demo_name + '/config')
+        .then(response => response.json())
+        .then(demo => {
+          demo.root = demo_endpoint + "/" + demo_name + "/";
+          launchGradio(demo, "#interface_" + demo_name);
+        });
     });
     function createAnchorTag(link) {
             let a = document.createElement('a');

website/homepage/src/index_template.html

@@ -20,10 +20,13 @@
   <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  
 
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
-  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
+  <link rel="stylesheet" href="/gradio_static/assets/{{ entry_css_file }}">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="/assets/prism.css">
+  <link href="https://fonts.cdnfonts.com/css/product-sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
+
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
@@ -33,243 +36,210 @@
       gtag('js', new Date());
       gtag('config', 'UA-156449732-1');
     </script>
+
+  <style>
+    .language-python {
+      background: none !important;
+    }
+
+    .token.operator {
+      background: none !important;
+    }
+  </style>
 </head>
 
-<body class="bg-white text-gray-900 text-md sm:text-lg">
+<body>
+<!--NAVBAR-->
   {{navbar_html|safe}}
-  <section
-    class="flex flex-col gap-8 items-center justify-center p-4 bg-opacity-20 bg-cover bg-center"
-    style="background-image: url('/assets/img/gallery.png');">
-    <div class="max-w-3xl mx-auto p-2 text-center text-4xl leading-snug md:text-6xl md:leading-snug font-semibold">
-      Build &amp; share delightful machine learning apps
-    </div>
-    <p class="font-semibold text-center text-2xl leading-relaxed max-w-3xl text-gray-500">Gradio is the fastest way to demo your machine learning model with a friendly web interface so that anyone can use it, anywhere! </p>
-    <div class="flex justify-center ">
-      <a class="border shadow border-gray-300 bg-gradient-to-b from-gray-50 to-gray-100 hover:to-gray-200 transition rounded inline-flex gap-2 items-center justify-center px-3 py-2 rounded-r-none"
-        href="https://github.com/gradio-app/gradio-UI" target="_blank"
-        aria-label="Star gradio-app/gradio-UI on GitHub">
-        <svg version="1.1" class="h-6" viewBox="0 0 14 16" class="inline" aria-hidden="true">
-          <path fill-rule="evenodd"
-            d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
-        </svg>
-        <span class="text-md">Star</span>
-      </a>
-      <a class="font-semibold border shadow bg-white border-gray-300 hover:border-gray-400 transition hover:text-blue-600 rounded px-3 py-2 rounded-l-none border-l-0"
-        href="https://github.com/gradio-app/gradio/stargazers" target="_blank" aria-label="3902 stargazers on GitHub">
-        <span id="star-count" class="transition preloaded-star-count">{{ star_count }}</span>
-      </a>
-    </div>
-    <div class="text-xl text-center">
-      <a class="font-semibold transition hover:text-blue-600" href="/getting_started">Get Started</a>
-       with 5 lines of pure Python
-    </div>
-  </section>
-  <div class="container mx-auto p-4">
-    <div class="flex flex-col sm:flex-row mt-16">
-      <div class="flex-1 text-center px-2 py-3 cursor-pointer border-gray-300 demotab selected" demo="1"
-        onclick="load_demo(1)">Sketch Recognition</div>
-      <div class="flex-1 text-center px-2 py-3 cursor-pointer border-gray-300 demotab" demo="2" onclick="load_demo(2)">
-        Question Answer</div>
-      <div class="flex-1 text-center px-2 py-3 cursor-pointer border-gray-300 demotab" demo="3" onclick="load_demo(3)">Image Segmentation</div>
-      <div class="flex-1 text-center px-2 py-3 cursor-pointer border-gray-300 demotab" demo="4" onclick="load_demo(4)">Speech Verification</div>
-    </div>
-    <div class="demo mb-16 p-4 border border-gray-300 border-t-0 shadow-lg" demo="1">
-      <div class="relative">
-        <a
-          class="absolute font-sans top-2 right-2 uppercase text-sm bg-gray-200 px-2 py-1 cursor-pointer font-semibold hidden">View
-          full code</a>
-        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
 
-<span class="token keyword">def</span> <span class="token function">sketch_recognition</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">:</span>
-  <span class="token comment"># Implement sketch recognition model here...</span>
-  <span class="token comment"># Return labels and confidences as dictionary</span>
-
-iface <span class="token operator">=</span> gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>sketch_recognition<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"sketchpad"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"label"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre>
-      </div>
-      <div id="demo_mnist" class="w-full">
-        <iframe src="https://hf.space/embed/abidlabs/draw2/+" frameBorder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
-      </div>
-    </div>
-    <div class="demo mb-16 p-4 border border-gray-300 border-t-0 shadow-lg hidden" demo="2">
-      <div class="relative">
-        <a
-          class="absolute font-sans top-2 right-2 uppercase text-sm bg-gray-200 px-2 py-1 cursor-pointer font-semibold hidden">View
-          full code</a>
-        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
-
-<span class="token keyword">def</span> <span class="token function">question_answer</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> question<span class="token punctuation">)</span><span class="token punctuation">:</span>
-  <span class="token comment"># Implement Q&amp;A model here...</span>
-<span class="token comment"># Return a tuple consisting of two strings: (answer, confidence) </span>
-
-iface <span class="token operator">=</span> gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>question_answer<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">],</span> outputs<span class="token operator">=</span>[</span><span class="token string">"textbox"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">]).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre>
-      </div>
-      <div id="demo_qa" class="w-full">
-        <iframe src="https://hf.space/embed/abidlabs/question-answering-simple/+" frameBorder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
-      </div>
-      </div>
-    <div class="demo mb-16 p-4 border border-gray-300 border-t-0 shadow-lg hidden" demo="3">
-      <div class="relative">
-        <a
-          class="absolute font-sans top-2 right-2 uppercase text-sm bg-gray-200 px-2 py-1 cursor-pointer font-semibold hidden">View
-          full code</a>
-        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
-
-<span class="token keyword">def</span> <span class="token function">segment</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">:</span>
-  <span class="token comment"># Implement image segmentation model here...</span>
-  <span class="token comment"># Return segmented image</span>
-
-iface <span class="token operator">=</span> gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>segment<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre>
-      </div>
-      <div id="demo_image_classifier" class="w-full">
-        <iframe src="https://hf.space/embed/abidlabs/Echocardiogram-Segmentation-simple/+" frameBorder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
-      </div>
-      </div>
-    <div class="demo mb-16 p-4 border border-gray-300 border-t-0 shadow-lg hidden" demo="4">
-      <div class="relative">
-        <a
-          class="absolute font-sans top-2 right-2 uppercase text-sm bg-gray-200 px-2 py-1 cursor-pointer font-semibold hidden">View
-          full code</a>
-        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
-
-<span class="token keyword">def</span> <span class="token function">same_or_different</span><span class="token punctuation">(</span>audio1<span class="token punctuation">,</span> audio2<span class="token punctuation">)</span><span class="token punctuation">:</span>
-  <span class="token comment"># Run model to see if spoken by same person or not</span>
-  <span class="token comment"># Return the result as a custom HTML snippet</span>
-
-iface <span class="token operator">=</span> gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>
-  fn<span class="token operator">=</span>same_or_different<span class="token punctuation">,</span>
-  inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"audio"</span><span class="token punctuation">,</span> <span class="token string">"audio"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-  outputs<span class="token operator">=</span><span class="token string">"html"</span>
-<span class="token punctuation">)</span><span class="token punctuation">.</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
-      </div>
-      <div id="demo_anime" class="w-full">
-        <iframe src="https://hf.space/embed/abidlabs/speech-simple/+" frameBorder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
+<!--HEADER-->
+  <div class="mx-auto max-w-xl px-4 py-20 text-center xl:max-w-2xl xl:py-36 2xl:py-44">
+    <div class="mb-10 text-4xl font-bold capitalize text-gray-900 md:text-5xl xl:text-6xl">Build & share delightful machine learning apps</div>
+    <p class="mx-auto mb-12 max-w-xl text-xl text-gray-600">Gradio is the fastest way to demo your machine learning model with a friendly web interface so that anyone can use it, anywhere!</p>
+    <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4">
+      <a class="rounded-full bg-gradient-to-br from-orange-500 via-orange-500 to-yellow-500 px-6 py-3 text-lg md:text-xl font-semibold text-white hover:to-yellow-400 hover:drop-shadow-md" href="/getting_started">Get Started</a>
+      <div class="flex items-center justify-center">
+        <a href="https://github.com/gradio-app/gradio" class="btn-star font-bold text-lg -mr-1">
+            <svg class="dark:text-gray-200 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.03em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 250">
+              <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0zm-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931zm6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66zm4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08zm7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403z" fill="currentColor"></path>
+            </svg>
+            Star
+        </a>
+        <div class="relative ml-3">
+            <div class="absolute z-[-1] -left-1 top-3 h-3 w-3 bg-gradient-to-t from-gray-100-to-white rounded-sm dark:bg-gray-900 border border-gray-200 dark:border-gray-850 flex-none transform rotate-45"></div>
+            <a id="star-count" class="inset-0 btn-star font-bold text-lg dark:hover:text-yellow-500 relative" href="https://github.com/gradio-app/gradio">6,000</a>
+        </div>
       </div>
     </div>
   </div>
-  <section class="w-full py-8 mb-12 bg-gradient-to-tr from-gray-50 to-gray-200 shadow-inner">
-    <div class="container mx-auto mb-2 text-center text-gray-600">
-      Used by machine learning teams big and small
-      <div class="mt-8 grid grid-cols-3 md:grid-cols-5 gap-x-3 sm:gap-x-4 gap-y-8 justify-center justify-items-center">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/google.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/amazon.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/fb.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/cisco.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/twitter.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/vmware.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/huggingface.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/siemens.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/mit-svg-50.png">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/stanford.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/uipath.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/unifyid.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/humaniseai.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/factmata.svg">
-        <img class="sm:h-5 h-4" src="/assets/img/logos/wns.png">
-      </div>
+
+<!--DEMOS-->
+    <div class="mx-auto mb-6">
+      <nav class="flex flex-wrap gap-6 whitespace-nowrap text-gray-600 md:text-lg mb-4 md:mb-0 justify-center">
+        <div class="demo-tab mr-2 border-orange-500 border-b-2 text-orange-500 cursor-pointer" demo="1"
+        onclick="load_demo(1)">Sketch Recognition</div>
+        <div class="demo-tab mr-2 hover:text-gray-800 cursor-pointer" demo="2"
+        onclick="load_demo(2)">Question Answering</div>
+        <div class="demo-tab mr-2 hover:text-gray-800 cursor-pointer" demo="3"
+        onclick="load_demo(3)">Image Segmentation</div>
+        <div class="demo-tab mr-2 hover:text-gray-800 cursor-pointer" demo="4"
+        onclick="load_demo(4)">Speech Verification</div>
+      </nav>
     </div>
-  </section>
-  <section class="container mx-auto mb-12 p-4">
-    <h2 class="text-2xl font-semibold mt-8 mb-2">Fast, easy setup</h2>
-    <p class="mb-2">Gradio can be installed directly through pip. Creating a Gradio interface only requires adding a
-      couple lines of code to your project. You can choose from a variety of interface types to interface your function.
-    </p>
-    <p class="mb-2"><a class="link italic text-gray-500" href="/getting_started">Read more on Getting Started...</a></p>
-    <h2 class="text-2xl font-semibold mt-12 mb-2">Present and share</h2>
-    <p class="mb-2">Gradio can be embedded in Python notebooks or presented as a webpage. A Gradio interface can
-      automatically generate a public link you can share with colleagues that lets them interact with the model on your
-      computer remotely from their own devices.</p>
-    <p class="mb-2"><a class="link italic text-gray-500" href="/getting_started#sharing_interfaces_publicly">Read more on Sharing...</a></p>
-    <h2 class="text-2xl font-semibold mt-12 mb-2">Permanent hosting</h2>
-    <p class="mb-2">Once you've created an interface, you can permanently host your interface on Huggingface Spaces.
-      Huggingface Spaces will host the interface on its servers and provide you with a link you can share.</p>
-    <p class="mb-2"><a class="link italic text-gray-500" href="/getting_started#hosting_on_spaces">Read more on Hosting...</a></p>
-  </section>
-  <section class="w-full py-8 bg-gradient-to-tr from-gray-50 to-gray-200 shadow-inner mb-8">
-    <div class="container mx-auto mb-2 text-center text-gray-600">
-      <div>Integrates with all your favorite Python libraries</div>
-      <div class="mt-8 inline-grid lg:grid-cols-6 grid-cols-3 gap-6 sm:gap-10 justify-center justify-items-center items-center">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/huggingface.svg">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/jupyter.svg">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/matplotlib.svg">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/numpy.svg">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/pytorch.svg">
-        <img class="sm:h-6 h-4 object-contain" src="/assets/img/logos/scikit.svg">
+  <div class="mx-auto grid max-w-7xl grid-cols-1 px-4 w-4/5">
+
+    <div class="demo space-y-2 md:col-span-3" demo="1">
+      <div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base w-11/12 mx-auto">
+        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
+
+<span class="token keyword">def</span> <span class="token function">sketch_recognition</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">:</span>
+    <span class="token keyword">pass </span><span class="token comment"> # Implement your sketch recognition model here...</span>
+
+gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>sketch_recognition<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"sketchpad"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"label"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre>
       </div>
+        <iframe src="https://hf.space/embed/aliabd/pictionary/+" frameBorder="0" height="350" scrolling="no" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
     </div>
-  </section>
-  <section class="w-full py-8 px-4 container mx-auto mb-2 flex flex-col sm:flex-row gap-8">
-    <div class="sm:flex-grow sm:w-0 relative">
-      <img class="z-0 h-6 absolute opacity-80" src="/assets/img/quote.png">
-      <div class="z-10 relative">
-        <blockquote class="mb-4" style="text-indent: 1rem;">Gradio is now an essential part of our ML demos. All it takes is a few minutes to make a demo come to life.</blockquote>
-        <div class="italic">
-          - <a class="link" href="https://www.linkedin.com/in/elgeish">Mohamed El-Geish</a>, Director of AI at Cisco
-        </div>
+
+    <div class="demo space-y-2 md:col-span-3 hidden" demo="2">
+      <div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base w-11/12 mx-auto">
+        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
+
+<span class="token keyword">def</span> <span class="token function">question_answer</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> question<span class="token punctuation">)</span><span class="token punctuation">:</span>
+    <span class="token keyword">pass </span><span class="token comment"> # Implement your question-answering model here...</span>
+
+gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>question_answer<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">],</span> outputs<span class="token operator">=</span>[</span><span class="token string">"textbox"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">]).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre>
       </div>
+        <iframe src="https://hf.space/embed/aliabd/question-answering/+" frameBorder="0" height="425" scrolling="no" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
     </div>
-    <div class="sm:flex-grow sm:w-0 relative">
-      <img class="z-0 h-6 absolute opacity-80" src="/assets/img/quote.png">
-      <div class="z-10 relative">
-        <blockquote class="mb-4" style="text-indent: 1rem;">Gradio accelerated our efforts to build and demo interdisciplinary models by
-          quickly letting clinicians interact with machine learning models without writing any code. It's a huge
-          time-saver!</blockquote>
-        <div class="italic">
-          - <a class="link" href="https://www.linkedin.com/in/davidouyang">David Ouyang</a>, Cardiologist at Stanford Medicine
-        </div>
+
+    <div class="demo space-y-2 md:col-span-3 hidden" demo="3">
+      <div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base w-11/12 mx-auto">
+        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
+
+<span class="token keyword">def</span> <span class="token function">segment</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">:</span>
+    <span class="token keyword">pass </span><span class="token comment"> # Implement your image segmentation model here...</span>
+
+gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>segment<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre>
       </div>
+       <iframe src="https://hf.space/embed/aliabd/Echocardiogram-Segmentation/+" frameBorder="0" height="475" scrolling="no" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
     </div>
-  </section>
-  <section class="w-full py-8 px-4">
-    <div class="container mx-auto mb-2 text-gray-600">
-      <div class="grid gap-4 grid-cols-1 md:grid-cols-3">
-        {% for tweet in tweets %}
-        <div class="border border-gray-300 bg-white rounded p-4 text-md flex flex-col">
+
+    <div class="demo space-y-2 md:col-span-3 hidden" demo="4">
+      <div class="rounded-lg bg-gray-50 shadow-inner text-sm md:text-base w-11/12 mx-auto">
+        <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
+
+<span class="token keyword">def</span> <span class="token function">same_or_different</span><span class="token punctuation">(</span>audio1<span class="token punctuation">,</span> audio2<span class="token punctuation">)</span><span class="token punctuation">:</span>
+    <span class="token keyword">pass </span><span class="token comment"> # Generate a response depending on if audio1 and audio2 are spoken by same person or not</span>
+
+gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>same_or_different<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"audio"</span><span class="token punctuation">,</span> <span class="token string">"audio"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"html"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
+      </div>
+       <iframe src="https://hf.space/embed/aliabd/same-person-or-different/+" frameBorder="0" height="420" scrolling="no" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
+    </div>
+  </div>
+
+<!--CARDS-->
+  <div class="relative mx-auto max-w-7xl space-y-6 px-4 py-24 md:flex md:space-y-0 lg:space-x-8 text-lg">
+    <div class="shadow-alternate flex-1 rounded-xl border border-gray-100 p-6">
+      <h2 class="mb-4 text-xl font-bold">
+        <svg class="mr-2 mb-3 text-2xl text-gray-800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
+          <rect class="text-orange-500" x="6.34" y="19" width="11.31" height="2" transform="translate(-10.63 14.34) rotate(-45)"></rect>
+          <path d="M17,30a1,1,0,0,1-.37-.07,1,1,0,0,1-.62-.79l-1-7,2-.28.75,5.27L21,24.52V17a1,1,0,0,1,.29-.71l4.07-4.07A8.94,8.94,0,0,0,28,5.86V4H26.14a8.94,8.94,0,0,0-6.36,2.64l-4.07,4.07A1,1,0,0,1,15,11H7.48L4.87,14.26l5.27.75-.28,2-7-1a1,1,0,0,1-.79-.62,1,1,0,0,1,.15-1l4-5A1,1,0,0,1,7,9h7.59l3.77-3.78A10.92,10.92,0,0,1,26.14,2H28a2,2,0,0,1,2,2V5.86a10.92,10.92,0,0,1-3.22,7.78L23,17.41V25a1,1,0,0,1-.38.78l-5,4A1,1,0,0,1,17,30Z"></path>
+        </svg>
+        Fast, easy setup
+      </h2>
+      <p class="mb-3 text-gray-600">Gradio can be <a class="text-link" href="https://gradio.app/getting_started/">installed with pip</a>. Creating a Gradio interface only requires adding a couple lines of code to your project.</p>
+      <p class="text-gray-600">You can choose from a variety of interface types to interface your function.</p>
+    </div>
+    <div class="shadow-alternate flex-1 rounded-xl border border-t border-gray-100 p-6">
+      <h2 class="mb-4 text-xl font-bold">
+        <svg width="1em" height="1em" class="mr-2 mb-3 fill-current text-2xl text-gray-800" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0.675 0.590576H0.73125V0.731201H0.675V0.590576ZM0.5625 0.449951H0.61875V0.731201H0.5625V0.449951Z" />
+          <path class="text-orange-500" d="M0.210183 0.689964C0.236545 0.716326 0.272288 0.731157 0.30957 0.731201C0.346866 0.731201 0.382635 0.716385 0.409007 0.690013C0.43538 0.663641 0.450195 0.627872 0.450195 0.590576C0.450195 0.55328 0.43538 0.517512 0.409007 0.491139C0.382635 0.464767 0.346866 0.449951 0.30957 0.449951V0.506201C0.326258 0.506201 0.342571 0.51115 0.356447 0.520421C0.370322 0.529692 0.381137 0.54287 0.387523 0.558287C0.393909 0.573705 0.39558 0.59067 0.392324 0.607037C0.389068 0.623404 0.381032 0.638438 0.369232 0.650238C0.357432 0.662038 0.342398 0.670074 0.326031 0.67333C0.309664 0.676586 0.292699 0.674915 0.277281 0.668529C0.261864 0.662142 0.248686 0.651328 0.239415 0.637452C0.230144 0.623577 0.225195 0.607264 0.225195 0.590576H0.168945C0.16899 0.627859 0.18382 0.663601 0.210183 0.689964Z" />
+          <path d="M0.787402 0.0561523H0.112402C0.0974885 0.0561672 0.0831897 0.0620983 0.072644 0.072644C0.0620983 0.0831897 0.0561672 0.0974885 0.0561523 0.112402V0.787402C0.0561672 0.802316 0.0620983 0.816615 0.072644 0.827161C0.0831897 0.837706 0.0974885 0.843637 0.112402 0.843652H0.787402C0.802314 0.84363 0.816608 0.837697 0.827152 0.827152C0.837697 0.816608 0.84363 0.802314 0.843652 0.787402V0.112402C0.843637 0.0974885 0.837706 0.0831897 0.827161 0.072644C0.816615 0.0620983 0.802316 0.0561672 0.787402 0.0561523ZM0.787402 0.309277H0.393652V0.112402H0.787402V0.309277ZM0.337402 0.112402V0.309277H0.112402V0.112402H0.337402ZM0.112402 0.787402V0.365527H0.787402L0.787459 0.787402H0.112402Z" />
+        </svg>
+
+        Present and share
+      </h2>
+      <p class="mb-3 text-gray-600">Gradio can be embedded in <a href="https://colab.research.google.com/drive/1T70IHFbztf_F0-HggwvM1PN7jBmS_wPN" class="text-link">Python notebooks</a> or presented as a <a href="https://huggingface.co/spaces/akhaliq/AnimeGANv2" class="text-link">webpage</a>.</p>
+      <p class="text-gray-600">A Gradio interface can automatically generate a public link you can share with colleagues that lets them interact with the model on your computer remotely from their own devices.</p>
+    </div>
+    <div class="shadow-alternate flex-1 rounded-xl border border-gray-100 p-6">
+      <h2 class="mb-4 text-xl font-bold">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="mr-2 mb-3 text-2xl text-gray-800" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
+          <path fill="currentColor" d="M16 2a8 8 0 1 0 8 8a8.01 8.01 0 0 0-8-8zm5.91 7h-2.438a15.246 15.246 0 0 0-.791-4.36A6.009 6.009 0 0 1 21.91 9zm-5.888 6.999h-.008c-.38-.12-1.309-1.821-1.479-4.999h2.93c-.17 3.176-1.094 4.877-1.443 4.999zM14.535 9c.17-3.176 1.094-4.877 1.443-4.999h.008c.38.12 1.309 1.821 1.479 4.999zM13.32 4.64A15.246 15.246 0 0 0 12.528 9H10.09a6.009 6.009 0 0 1 3.23-4.36zM10.09 11h2.437a15.246 15.246 0 0 0 .792 4.36A6.009 6.009 0 0 1 10.09 11zm8.59 4.36a15.246 15.246 0 0 0 .792-4.36h2.438a6.009 6.009 0 0 1-3.23 4.36zM28 30H4a2.002 2.002 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h24a2.002 2.002 0 0 1 2 2v6a2.002 2.002 0 0 1-2 2zM4 22v6h24v-6z"></path>
+          <circle cx="7" cy="25" r="1" class="fill-current text-orange-500"></circle>
+        </svg>
+        Permanent hosting
+      </h2>
+      <p class="mb-3 text-gray-600">Once you've created an interface, you can permanently host it on Hugging Face.</p>
+      <p class="text-gray-600"><a href="https://huggingface.co/spaces" class="text-link">Hugging Face Spaces</a> will host the interface on its servers and provide you with a link you can share.</p>
+    </div>
+  </div>
+
+<!--USED BY-->
+  <div class="text-center">
+    <h2 class="mb-2 inline-block bg-white px-5 text-gray-400">Used by</h2>
+    <div class="border-t border-b border-gray-100 bg-gradient-to-t from-gray-50 px-4 pt-16 pb-20" style="margin-top: -1.2rem;">
+      <div class="mx-auto grid max-w-7xl grid-cols-3 justify-items-center gap-x-3 gap-y-8 grayscale sm:gap-x-4 md:grid-cols-5"><img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/google.svg" /> <img class="logo h-4 contrast-0 sm:h-5" src="https://gradio.app/assets/img/logos/amazon.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/fb.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/cisco.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/twitter.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/vmware.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/huggingface.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/siemens.svg" /> <img class="logo h-4 contrast-0 sm:h-5" src="https://gradio.app/assets/img/logos/mit-svg-50.png" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/stanford.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/uipath.svg" /> <img class="logo h-4 sm:h-5" src="https://gradio.app/assets/img/logos/unifyid.svg" /> <img class="logo h-4 contrast-0 sm:h-5" src="https://gradio.app/assets/img/logos/humaniseai.svg" /> <img class="logo h-4 contrast-0 sm:h-5" src="https://gradio.app/assets/img/logos/factmata.svg" /> <img class="logo h-4 contrast-0 sm:h-5" src="https://gradio.app/assets/img/logos/wns.png" /></div>
+    </div>
+  </div>
+
+
+<!--TWEETS-->
+  <div class="pt-12 md:pt-20 mx-auto max-w-7xl px-4">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {% for tweet in tweets %}
+        <a href="{{ tweet['link'] }}" class="rounded-xl border border-gray-200 bg-white p-4 hover:shadow dark:border-gray-800 dark:bg-gray-800">
           <div class="flex justify-between">
-            <a class="flex items-center gap-2" href="https://twitter.com/{{ tweet['handle'] }}" target="_blank"
-              rel="noopener noreferrer">
-              <img class="h-10 w-10 rounded-full" alt="{{ tweet['name'] }}" aria-hidden="true" role="presentation"
-                src="/assets/img/twitter/{{ tweet['profile_pic'] }}">
-              <div>
-                <div title="{{ tweet['name'] }}">{{ tweet['name'] }}</div>
-                <div class="text-gray-500" title="@{{ tweet['handle'] }}">@{{ tweet['handle'] }}</div>
+            <div class="flex items-center gap-2">
+              <img class="h-11 w-11 rounded-full" src="/assets/img/twitter/{{ tweet['profile_pic'] }}" />
+              <div class="ml-1.5 text-sm leading-tight">
+                <span class="block font-bold text-black dark:text-white">{{ tweet['name'] }}</span>
+                <span class="block font-normal text-gray-500 dark:text-gray-400">@{{ tweet['handle'] }}</span>
               </div>
-            </a>
-            <a href="{{ tweet['link'] }}" target="_blank" rel="noopener noreferrer">
-              <img class="h-6" title="View on Twitter" src="/assets/img/twitter/logo.svg">
-            </a>
+            </div>
+            <svg class="inline-block h-6 w-auto fill-current text-blue-400 dark:text-white" viewBox="0 0 24 24">
+              <g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g>
+            </svg>
           </div>
-          <div class="twitter-text my-2">
-            {{ tweet['content']|safe }}
-          </div>
-          <div class="flex-1"></div>
-          <div class="flex items-center gap-2 text-gray-500">
-            <a class="hover:text-red-600 flex items-center" href="#" title="Like" target="_blank" rel="noopener noreferrer">
-              <div class="twitter-heart w-4 h-4 bg-contain"></div>
-              <span>{{ tweet['likes'] }}</span>
-            </a>
-            <a class="/static-tweet-time" href="{{ tweet['link'] }}" target="_blank" rel="noopener noreferrer">
-              <time>{{ tweet['timestamp'] }}</time>
-            </a>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
+          <p class="mt-3 block text-lg leading-snug text-black dark:text-white">{{ tweet['content']|safe }}</p>
+
+          <p class="my-0.5 flex items-center py-1 text-base text-gray-500 dark:text-gray-400">
+            <svg class="mr-1 h-3.5 w-4 fill-current" viewBox="0 0 24 24" class="r-1re7ezh r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr" style="">
+              <g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g>
+            </svg>
+            {{ tweet['likes'] }} · {{ tweet['timestamp'] }}
+          </p>
+        </a>
+      {% endfor %}
     </div>
-  </section>
-  <footer class="container mx-auto p-4 flex justify-between items-center">
-    <img src="/assets/img/logo.svg" class="h-10">
-    <div class="flex gap-4">
+  </div>
+
+<!--FOOTER-->
+  <footer class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 z-10 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-6 justify-between flex-wrap gap-6">
+    <a href="/">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
+    </a>
+    <nav class="flex ml-auto w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-8">
       <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
-        <img src="/assets/img/twitter.svg" class="h-8">
+        <img src="/assets/img/twitter.svg" class="w-6">
       </a>
       <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
-        <img src="/assets/img/github.svg" class="h-8">
+        <img src="/assets/img/github.svg" class="w-6">
       </a>
-    </div>
+    </nav>
   </footer>
+  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ entry_js_file }}"></script>
   <script>
     let xhr = new XMLHttpRequest;
     xhr.open('GET', 'https://api.github.com/repos/gradio-app/gradio', true)
@@ -286,27 +256,28 @@ iface <span class="token operator">=</span> gr<span class="token punctuation">.<
     xhr.send();
 
     let load_demo = demo_id => {
-      document.querySelectorAll(".demotab").forEach(demotab => {
-        demotab.classList.remove("selected");
+      document.querySelectorAll(".demo-tab").forEach(e => {
+        e.classList.remove("text-orange-500", "border-orange-500", "border-b-2");
+        e.classList.add("hover:text-gray-800");
       })
-      document.querySelectorAll(".demo").forEach(demo => {
-        demo.classList.add("hidden");
+      document.querySelectorAll(".demo").forEach(e => {
+        e.classList.add("hidden");
       })
-      document.querySelector(`.demotab[demo='${demo_id}']`).classList.add("selected");
+      document.querySelector(`.demo-tab[demo='${demo_id}']`).classList.add("border-orange-500", "border-b-2", "text-orange-500");
+      document.querySelector(`.demo-tab[demo='${demo_id}']`).classList.remove("hover:text-gray-800");
+
       document.querySelector(`.demo[demo='${demo_id}']`).classList.remove("hidden");
     }
 
     window.gradio_mode = "website";
   </script>
-  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
-  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
   <script>
-<!--    document.querySelector("#gradio-library").addEventListener('load', function () {-->
-<!--      launchGradioFromSpaces("abidlabs/Draw", "#demo_mnist");-->
-<!--      launchGradioFromSpaces("abidlabs/question-answering", "#demo_qa");-->
-<!--      launchGradioFromSpaces("abidlabs/Echocardiogram-Segmentation", "#demo_image_classifier");-->
-<!--      launchGradioFromSpaces("abidlabs/same-person-or-different", "#demo_anime");-->
-<!--    });-->
+  <!--    document.querySelector("#gradio-library").addEventListener('load', function () {-->
+  <!--      launchGradioFromSpaces("abidlabs/Draw", "#demo_mnist");-->
+  <!--      launchGradioFromSpaces("abidlabs/question-answering", "#demo_qa");-->
+  <!--      launchGradioFromSpaces("abidlabs/Echocardiogram-Segmentation", "#demo_image_classifier");-->
+  <!--      launchGradioFromSpaces("abidlabs/same-person-or-different", "#demo_anime");-->
+  <!--    });-->
   </script>
 </body>
 

website/homepage/src/navbar.html

@@ -1,42 +1,31 @@
-<header class="container mx-auto p-4 flex flex-wrap justify-between items-center gap-6 flex-row sm:flex-col lg:flex-row">
+<div class="container flex-row sm:flex-col lg:flex-row relative inset-x-0 top-0 bg-white/80 backdrop-blur-lg mx-auto flex max-w-7xl items-center px-4 py-5 justify-between flex-wrap gap-6 text-lg">
     <a href="/">
-      <img src="/assets/img/logo.svg" class="h-10">
+      <svg width="60" viewBox="0 0 1090 365" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.72486 337.254L31.1725 300.91C47.4495 315.82 65.5902 323.275 85.5947 323.275C99.0139 323.275 110.072 321.287 118.77 317.311C127.468 313.335 131.816 307.868 131.816 300.91C131.816 289.106 122.187 283.204 102.928 283.204C97.7093 283.204 89.9436 283.826 79.6307 285.068C69.3178 286.311 61.552 286.932 56.3335 286.932C24.2765 286.932 8.24807 275.439 8.24807 252.452C8.24807 245.867 10.9195 239.406 16.2623 233.069C21.6051 226.732 27.8177 222.072 34.9001 219.09C12.162 204.304 0.792969 183.368 0.792969 156.281C0.792969 134.91 8.62083 117.266 24.2765 103.35C39.9323 89.3095 59.1913 82.2893 82.0536 82.2893C99.9458 82.2893 114.918 85.6441 126.971 92.3537L145.236 71.1066L177.479 100.368L155.3 116.583C163.004 128.262 166.855 142.054 166.855 157.959C166.855 180.697 159.897 198.899 145.981 212.567C132.189 226.111 114.732 232.882 93.609 232.882C90.2542 232.882 85.7811 232.572 80.1898 231.95L72.5483 230.832C71.6786 230.832 68.3238 232.199 62.4839 234.932C56.7684 237.542 53.9106 240.275 53.9106 243.133C53.9106 248.103 58.1972 250.588 66.7706 250.588C70.6224 250.588 77.0835 249.656 86.1539 247.793C95.2243 245.929 102.99 244.997 109.451 244.997C154.803 244.997 177.479 263.2 177.479 299.605C177.479 319.734 168.409 335.514 150.268 346.945C132.127 358.501 110.259 364.279 84.6629 364.279C54.0969 364.279 26.4509 355.27 1.72486 337.254ZM48.3192 156.468C48.3192 168.271 51.5498 177.777 58.0109 184.983C64.5962 192.066 73.4181 195.607 84.4765 195.607C95.5349 195.607 104.046 192.128 110.01 185.17C115.974 178.212 118.956 168.644 118.956 156.468C118.956 146.403 115.726 137.892 109.265 130.934C102.928 123.976 94.6651 120.497 84.4765 120.497C73.7908 120.497 65.0932 123.851 58.3836 130.561C51.674 137.271 48.3192 145.906 48.3192 156.468Z" fill="#FF7C00" />
+        <path d="M323.599 129.816C315.274 124.348 306.142 121.615 296.201 121.615C285.391 121.615 275.762 126.523 267.313 136.339C258.988 146.155 254.826 158.145 254.826 172.31V286H208.231V86.3896H254.826V104.655C267.872 89.9929 285.205 82.662 306.825 82.662C322.729 82.662 334.906 85.0849 343.355 89.9308L323.599 129.816Z" fill="#FF7C00" />
+        <path d="M482.579 266.058C478.354 273.016 470.961 278.731 460.4 283.204C449.963 287.553 439.029 289.727 427.598 289.727C406.102 289.727 389.204 284.385 376.903 273.699C364.602 262.889 358.451 247.606 358.451 227.85C358.451 204.739 367.087 186.661 384.358 173.614C401.753 160.568 426.417 154.045 458.35 154.045C463.817 154.045 470.278 154.977 477.733 156.84C477.733 133.357 462.885 121.615 433.189 121.615C415.669 121.615 401.008 124.535 389.204 130.375L379.139 94.2174C395.168 86.5138 414.24 82.662 436.357 82.662C466.799 82.662 489.102 89.6201 503.267 103.536C517.432 117.328 524.514 143.545 524.514 182.188V224.868C524.514 251.458 529.857 268.17 540.542 275.004C536.691 281.713 532.404 285.814 527.682 287.305C522.961 288.92 517.556 289.727 511.467 289.727C504.758 289.727 498.732 287.242 493.389 282.272C488.046 277.302 484.443 271.897 482.579 266.058ZM478.106 192.066C470.154 190.45 464.19 189.643 460.214 189.643C423.435 189.643 405.046 201.695 405.046 225.8C405.046 243.692 415.421 252.638 436.171 252.638C464.128 252.638 478.106 238.66 478.106 210.703V192.066Z" fill="#FF7C00" />
+        <path d="M703.436 286V273.885C699.584 278.11 693.061 281.838 683.867 285.068C674.672 288.174 665.167 289.727 655.351 289.727C627.519 289.727 605.588 280.906 589.56 263.262C573.655 245.618 565.703 221.016 565.703 189.456C565.703 157.896 574.836 132.238 593.101 112.482C611.49 92.6022 634.477 82.662 662.06 82.662C677.219 82.662 691.011 85.7683 703.436 91.9809V12.0249L750.031 0.842285V286H703.436ZM703.436 134.102C693.496 126.15 683.121 122.174 672.311 122.174C653.674 122.174 639.322 127.89 629.258 139.321C619.194 150.628 614.161 166.905 614.161 188.152C614.161 229.652 634.166 250.402 674.175 250.402C678.648 250.402 684.115 249.097 690.576 246.488C697.162 243.754 701.448 241.021 703.436 238.287V134.102Z" fill="#FF7C00" />
+        <path d="M833.341 9.0429C840.797 9.0429 847.133 11.7143 852.352 17.0571C857.695 22.2757 860.366 28.6125 860.366 36.0676C860.366 43.5227 857.695 49.9217 852.352 55.2645C847.133 60.4831 840.797 63.0924 833.341 63.0924C825.886 63.0924 819.487 60.4831 814.145 55.2645C808.926 49.9217 806.317 43.5227 806.317 36.0676C806.317 28.6125 808.926 22.2757 814.145 17.0571C819.487 11.7143 825.886 9.0429 833.341 9.0429ZM809.299 286V124.597H783.765V86.3896H856.452V286H809.299Z" fill="#FF7C00" />
+        <path d="M897.828 185.729C897.828 155.287 906.588 130.499 924.107 111.364C941.751 92.2294 964.986 82.662 993.813 82.662C1024.13 82.662 1047.68 91.8567 1064.45 110.246C1081.22 128.635 1089.61 153.796 1089.61 185.729C1089.61 217.537 1081.04 242.822 1063.89 261.584C1046.87 280.346 1023.51 289.727 993.813 289.727C963.495 289.727 939.887 280.284 922.989 261.398C906.215 242.388 897.828 217.164 897.828 185.729ZM946.286 185.729C946.286 229.714 962.128 251.706 993.813 251.706C1008.35 251.706 1019.84 245.991 1028.29 234.56C1036.87 223.129 1041.15 206.852 1041.15 185.729C1041.15 142.365 1025.37 120.683 993.813 120.683C979.275 120.683 967.72 126.399 959.146 137.83C950.573 149.261 946.286 165.227 946.286 185.729Z" fill="#FF7C00" />
+      </svg>
     </a>
-    <svg class="h-8 w-8 sm:hidden" viewBox="-10 -10 20 20" 
-      onclick="document.querySelector('nav').classList.toggle('hidden'); document.querySelector('nav').classList.toggle('flex');">
-      <rect x="-7" y="-6" width="14" height="2" />
-      <rect x="-7" y="-1" width="14" height="2" />
-      <rect x="-7" y="4" width="14" height="2" />
+    <svg class="h-8 w-8 sm:hidden" viewBox="-10 -10 20 20"
+       onclick="document.querySelector(&quot;nav&quot;).classList.toggle(&quot;hidden&quot;),document.querySelector(&quot;nav&quot;).classList.toggle(&quot;flex&quot;)">
+      <rect x="-7" y="-6" width="14" height="2"></rect>
+      <rect x="-7" y="-1" width="14" height="2"></rect>
+      <rect x="-7" y="4" width="14" height="2"></rect>
     </svg>
-    <nav class="sm:flex sm:flex-row sm:w-auto w-full flex-col gap-3 sm:gap-12 hidden">
-      <a class="link flex gap-3 items-center" href="/getting_started">
-        <span>⚡</span> 
-        <span>Getting Started</span>
-      </a>
-      <a class="link flex gap-3 items-center" href="/docs">
-        <span>✍️</span>
-        <span>Docs</span>
-      </a>
-      <a class="link flex gap-3 items-center" href="/guides">
-        <span>💡</span>
-        <span>Guides</span>
-      </a>
-      <div class="group relative cursor-pointer font-semibold flex gap-3 items-center" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
-        <span>🖐</span>
-        <span>Community</span>
-        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-        </svg>
-        <div class="help-menu hidden group-hover:flex flex-col absolute top-6 sm:right-0 bg-white shadow w-52">
-          <a class="link px-4 py-2 inline-block hover:bg-gray-100"
-            href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
-          <a class="link px-4 py-2 inline-block hover:bg-gray-100"
-            href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a>
-          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
-            href="https://discord.gg/feTf9x3ZSB">Discord</a>
-          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
-            href="https://gradio.curated.co/">Newsletter</a>
-        </div>
+    <nav class="ml-auto hidden w-full flex-col gap-3 sm:flex sm:w-auto sm:flex-row sm:gap-12">
+      <a class="thin-link flex items-center gap-3" href="/getting_started"><span>⚡</span> <span>Getting Started</span> </a>
+      <a class="thin-link flex items-center gap-3" href="/docs"><span>✍️</span> <span>Docs</span> </a>
+      <a class="thin-link flex items-center gap-3" href="/guides"><span>💡</span> <span>Guides</span></a>
+      <div class="group relative flex cursor-pointer items-center gap-3 font-semibold" onclick='document.querySelector(".help-menu").classList.toggle("flex"),document.querySelector(".help-menu").classList.toggle("hidden")'>
+        <span>🖐</span> <span>Community</span> <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
+        <div class="help-menu absolute top-6 hidden w-52 flex-col bg-white shadow group-hover:flex sm:right-0">
+          <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
+          <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a>
+          <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" target="_blank" href="https://discord.gg/feTf9x3ZSB">Discord</a>
+          <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" target="_blank" href="https://gradio.curated.co/">Newsletter</a></div>
       </div>
     </nav>
-  </header>
+</div>

website/homepage/src/other_templates/kitchen_sink_template.html

@@ -7,8 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gradio</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
-  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
-  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
+  <link rel="stylesheet" href="/gradio_static/assets/{{ entry_css_file }}">
   <style></style>
 </head>
 
@@ -106,8 +105,7 @@
     var output_count = 0;
     window.gradio_mode = "website";
   </script>
-  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
-  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
+  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ entry_js_file }}"></script>
   <script>
     let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
     let theme_html = "";

website/homepage/src/style.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+
+.btn-star {
+    @apply cursor-pointer select-none inline-flex justify-center items-center whitespace-nowrap px-3 py-1 rounded-lg border bg-gradient-to-b focus:outline-none focus:ring text-gray-800 border-gray-200 from-white to-gray-100 hover:shadow-inner;
+}
+
 .link {
     @apply font-semibold hover:text-blue-500 transition-colors;
 }
@@ -66,3 +71,32 @@
 .twitter-like:hover .twitter-heart {
     background-image: url("assets/img/twitter/redheart.svg");
 }
+
+@layer base {
+  a.text-link {
+    @apply font-semibold text-gray-800 underline decoration-orange-500 underline-offset-2 hover:text-orange-500;
+  }
+}
+
+@layer utilities {
+  @variants hover, focus {
+    .filter-none {
+      filter: none;
+    }
+    .filter-grayscale {
+      filter: grayscale(100%);
+    }
+    .shadow-alternate-sm {
+      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.03),
+        0px 0px 1px rgba(0, 0, 0, 0.03);
+    }
+    .shadow-alternate {
+      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04),
+        0px 0px 1px rgba(0, 0, 0, 0.04);
+    }
+    .shadow-alternate-xl {
+      box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+        0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    }
+  }
+}

website/homepage/src/tweets.json

@@ -1,56 +1,83 @@
 [
+    {
+        "name": "Amar Saini",
+        "handle": "_Epoching_",
+        "link": "https://twitter.com/_Epoching_/status/1471091318482825219",
+        "content": "Just built a ️<span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> app for a video related deep learning project. <br> I’m astonished by how simple it is to use & how elegant it looks! Lots and lots of great features & flexibility. Thanks for making this ❤ ",
+        "likes": 47,
+        "timestamp": "7:14 AM · Dec 15, 2021",
+        "profile_pic": "pwMrDOBv_400x400.jpeg"
+    },
+    {
+        "name": "Will Rice",
+        "handle": "_Will_Rice",
+        "link": "https://twitter.com/_Will_Rice/status/1430258610131582979",
+        "content": "Just tried out <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span> and I am very impressed. Only took like 10mins to put together a <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#tts</span> demo.",
+        "likes": 11,
+        "timestamp": "4:00 PM · Aug 24, 2021",
+        "profile_pic": "LsCnjnsl_400x400.jpeg"
+    },
+    {
+        "name": "Roxana Daneshjou MD/PhD",
+        "handle": "RoxanaDaneshjou",
+        "link": "https://twitter.com/RoxanaDaneshjou/status/1418399829944721415",
+        "content": "Honestly, without <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, we would not be doing a real time AI trial.  We have many other ideas for algorithms we want to test through clinical trials, and we know it's possible thanks to <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>.",
+        "likes": 15,
+        "timestamp": "7:37 PM · Jul 22, 2021",
+        "profile_pic": "ITFspAMm_x96.jpg"
+    },
     {
         "name": "Vinay Prabhu",
         "handle": "vinayprabhu",
         "link": "https://twitter.com/vinayprabhu/status/1324409497641652225",
-        "content": "Dear <a href=\"https:\/\/twitter.com\/hashtag\/MachineLearning?src=hash\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/hashtag\/MachineLearning?src=hash\" class=\"static-tweet-twitter-link\">#MachineLearning<\/a> twitter,<br>If you haven't typed: <br>$ pip install gradio<br>yet, now would be a damn good time.<br>Especially if you are working              in computer vision &amp; deploying models in the real world. <a href=\"https:\/\/twitter.com\/abidlabs\/status\/1324074291525230601\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/abidlabs\/status\/1324074291525230601\" class=\"static-tweet-anchor\">twitter.com\/abidlabs\/statu...<\/a>",
+        "content": "Dear <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning<\/span> twitter,<br>If you haven't typed: <br>$ pip install gradio<br>yet, now would be a damn good time.<br>Especially if you are working in computer vision &amp; deploying models in the real world. ",
         "likes": 19,
-        "timestamp": "12:53 PM - Nov 5, 2020",
+        "timestamp": "12:53 PM · Nov 5, 2020",
         "profile_pic": "1013607349943058433.jpg"
     },
     {
-        "name": "David Ouyang, MD",
-        "handle": "David_Ouyang",
-        "link": "https://twitter.com/David_Ouyang/status/1338734957070454785",
-        "content": "Having <a href=\"https:\/\/twitter.com\/GradioML\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/GradioML\" class=\"static-tweet-twitter-link\">@GradioML<\/a> deploy your model is like a test-of-time award,              except it\u2019s test-of-now. Open implementation, clear code, and actionable dataset has to skew towards              better papers. <a href=\"https:\/\/twitter.com\/GradioML\/status\/1338554494678872072\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/GradioML\/status\/1338554494678872072\" class=\"static-tweet-anchor\">twitter.com\/GradioML\/statu...<\/a>",
-        "likes": 13,
-        "timestamp": "1:37 AM - Dec 15, 2020",
-        "profile_pic": "889312280092999680.jpg"
+        "name": "Tanishq Mathew Abraham",
+        "handle": "iScienceLuvr",
+        "link": "https://twitter.com/iScienceLuvr/status/1460716613032837120",
+        "content": "After training an ML model, the BEST way to showcase it to the world is to make a demo for others to try! <br>The easiest way to do so is w/ <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, hosted on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@HuggingFace<\/span> Spaces. <br>Read my new blog post to learn how to do this (w/ appearance by <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@fastdotai<\/span>)! <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://tmabraham.github...</span>",
+        "likes": 285,
+        "timestamp": "4:09 PM · Nov 16, 2021",
+        "profile_pic": "ksO1TT2P_400x400.jpeg"
     },
     {
-        "name": "Aniket Maurya",
-        "handle": "aniketmaurya",
-        "link": "https://twitter.com/aniketmaurya/status/1453598427669884932",
-        "content": "Build prototype UI for any kind of Machine Learning model with a single line of code, powered by <a href=\"https:\/\/twitter.com\/Gradio\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/Gradio\" class=\"static-tweet-twitter-link\">@Gradio<\/a> <br><br>🎉 It is framework agnostic - use <br><a href=\"https:\/\/twitter.com\/PyTorch\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/PyTorch\" class=\"static-tweet-twitter-link\">@PyTorch<\/a> <br><a href=\"https:\/\/twitter.com\/Tensorflow\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/Tensorflow\" class=\"static-tweet-twitter-link\">@Tensorflow<\/a> <br><a href=\"https:\/\/twitter.com\/scikit_learn\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/scikit_learn\" class=\"static-tweet-twitter-link\">@scikit_learn<\/a><br>or any of your fav. ML framework. <br><br>👉 Get started with a single line of code.",
-        "likes": 74,
-        "timestamp": "10:44 PM - Oct 27 2021",
-        "profile_pic": "d8qFeBSq_x96.png"
+        "name": "Dipankar Mazumdar",
+        "handle": "Dipankartnt",
+        "link": "https://twitter.com/Dipankartnt/status/1427750254586253318",
+        "content": "I love low-code ML solutions like <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> that do not restricts anyone from making ML accessible. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#machinelearning</span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#datascience</span>",
+        "likes": 0,
+        "timestamp": "5:52 PM · Aug 17, 2021",
+        "profile_pic": "GDLc7Oe4_400x400.jpeg"
     },
     {
         "name": "Charly Wargnier",
         "handle": "DataChaz",
         "link": "https://twitter.com/DataChaz/status/1351290055894179842",
-        "content": "Pretty neat that <a href=\"https:\/\/twitter.com\/GradioML\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/GradioML\" class=\"static-tweet-twitter-link\">@GradioML<\/a>! <img class=\"static-tweet-emoji\" src=\"https:\/\/abs.twimg.com\/emoji\/v2\/72x72\/1f40d.png\" alt=\"\uD83D\uDC0D\"><img class=\"static-tweet-emoji\" src=\"https:\/\/abs.twimg.com\/emoji\/v2\/72x72\/1f525.png\" alt=\"\uD83D\uDD25\"><br><br>+ Generate an easy-to-use UI for your <a href=\"https:\/\/twitter.com\/hashtag\/ML?src=hash\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/hashtag\/ML?src=hash\" class=\"static-tweet-twitter-link\">#ML<\/a> model, function, or <a href=\"https:\/\/twitter.com\/hashtag\/API?src=hash\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/hashtag\/API?src=hash\" class=\"static-tweet-twitter-link\">#API<\/a> with only a few lines of code!<br>+ Integrate directly into your <a href=\"https:\/\/twitter.com\/ProjectJupyter\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/ProjectJupyter\" class=\"static-tweet-twitter-link\">@ProjectJupyter<\/a> notebook<br>+ or share a link with anyone<br><br>h\/t <a href=\"https:\/\/twitter.com\/VincentTerrasi\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/VincentTerrasi\" class=\"static-tweet-twitter-link\">@VincentTerrasi<\/a> <br><a href=\"https:\/\/twitter.com\/hashtag\/MachineLearning?src=hash\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/hashtag\/MachineLearning?src=hash\" class=\"static-tweet-twitter-link\">#MachineLearning<\/a> <br><a href=\"https:\/\/www.gradio.app\/\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/www.gradio.app\/\" class=\"static-tweet-anchor\">www.gradio.app<\/a>",
+        "content": "Pretty neat that <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@GradioML<\/span>!\uD83D\uDC0D\uD83D\uDD25 <br>+ Generate an easy-to-use UI for your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#ML<\/span> model, function, or <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#API<\/span> with only a few lines of code!<br>+ Integrate directly into your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@ProjectJupyter<\/span> notebook<br>+ or share a link with anyone<br><br>h\/t <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@VincentTerrasi<\/span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning<\/span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">www.gradio.app</span>",
         "likes": 18,
-        "timestamp": "5:07 PM - Jan 18, 2021",
+        "timestamp": "5:07 PM · Jan 18, 2021",
         "profile_pic": "1362781887098454025.jpg"
     },
     {
         "name": "Chua Chin Hon",
         "handle": "chinhon",
         "link": "https://twitter.com/chinhon/status/1452510073452859392",
-        "content": "What's exciting about ML in 2021 is how the building blocks r coming together. Built this headline writer using: <br>- AutoNLP to finetune Bart<br>- <a href=\"https:\/\/twitter.com\/Gradio\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/Gradio\" class=\"static-tweet-twitter-link\">@Gradio<\/a> for the UI<br>- <a href=\"https:\/\/twitter.com\/huggingface\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/huggingface\" class=\"static-tweet-twitter-link\">@huggingface<\/a>'s Spaces for hosting and compute <br>Try it here: <a href='https://huggingface.co/spaces/chinhon/headline_writer'>https://huggingface.co/spa...</a><br>",
+        "content": "What's exciting about ML in 2021 is how the building blocks r coming together. Built this headline writer using: <br>- AutoNLP to finetune Bart<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> for the UI<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@huggingface</span>'s Spaces for hosting and compute <br>Try it here: <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://huggingface.co/spa...</span><br>",
         "likes": 61,
-        "timestamp": "10:39 PM - Oct 24, 2021",
+        "timestamp": "10:39 PM · Oct 24, 2021",
         "profile_pic": "R1gj6nb3_x96.jpg"
     },
     {
-        "name": "Roxana Daneshjou MD/PhD",
-        "handle": "RoxanaDaneshjou",
-        "link": "https://twitter.com/RoxanaDaneshjou/status/1418399829944721415",
-        "content": "Honestly, without <a href=\"https:\/\/twitter.com\/Gradio\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/Gradio\" class=\"static-tweet-twitter-link\">@Gradio<\/a>, we would not be doing a real time AI trial.  We have many other ideas for algorithms we want to test through clinical trials, and we know it's possible thanks to <a href=\"https:\/\/twitter.com\/Gradio\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"https:\/\/twitter.com\/Gradio\" class=\"static-tweet-twitter-link\">@Gradio<\/a>.",
-        "likes": 15,
-        "timestamp": "7:37 PM - Jul 22, 2021",
-        "profile_pic": "ITFspAMm_x96.jpg"
+        "name": "Poonam Ligade @Jarvislabs.ai",
+        "handle": "Poonamligade",
+        "link": "https://twitter.com/Poonamligade/status/1521740054368251905",
+        "content": "My son is fascinated with all things about dinosaurs. I built a \uD83E\uDD96 \uD83E\uDD95 classifier for him as homework for the first week of the fastai cohort. <br> I used <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, and deployed on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@jarvislabsai</span>. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">http://dinoapp.jarvis..<\/span>",
+        "likes": 305,
+        "timestamp": "2:34 AM · May 4, 2022",
+        "profile_pic": "8vyTl51q_400x400.jpeg"
     }
 ]

website/homepage/tailwind.config.js

@@ -1,28 +1,40 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+  './src/*.{html,js,css}',
+  './src/**/*.{html,js,svelte,ts,css}',
+  '**/@gradio/**/*.{html,js,svelte,ts,css}'
+  ],
+
   theme: {
     extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            code: {
-              fontWeight: 'normal',
-              backgroundColor: 'whitesmoke',
-              '&:before': {
-                content: "none !important",
-              },
-              '&:after': {
-                content: "none !important",
-              },
-            },
-          },
+      fontFamily: {
+        sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
+        mono: ['IBM Plex Mono', ...defaultTheme.fontFamily.mono],
+      },
+      colors: {
+        orange: {
+          50: '#FFF2E5',
+          100: '#FFE5CC',
+          200: '#FFD8B4',
+          300: '#FFB066',
+          400: '#FF9633',
+          500: '#FF7C00',
+          600: '#EE7400',
+          700: '#CE6400',
+          800: '#A45000',
+          900: '#5C2D00',
         },
-      }
+      },
     },
   },
+  mode: 'jit',
+  darkMode: 'class', // or 'media' or 'class'
+
   variants: {
     extend: {},
   },
-  plugins: [require("@tailwindcss/typography")]
+  plugins: [require('@tailwindcss/forms'), require("@tailwindcss/typography")],
 }
+