Editable Docs (#8403)

* docs intro page and guides

* python library docs and js client

* reorg

* changes

* add better hovering

* fix broken version routing

* add redirects and remove duplicate pages

* fix build issues

* fix issues

* formatting

* add changeset

* working templates for all components

* add other pages

* merge

* merge

* changes

* changes

* working from templates

* changes

* refactoring

* changes

* build working

* formatting

* importing meta globs

* add uploading templates to ci

* fixes

* add changeset

* remove fake version

* fix

* ignore

* formatting

* adding render page to docs

* add changeset

* formatting fix

* typo

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/icy-mice-lose.md

@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Editable Docs

.github/workflows/deploy-website.yml

@@ -72,6 +72,7 @@ jobs:
           export AWS_DEFAULT_REGION=us-west-2
           version=$(jq -r .version js/_website/src/lib/json/version.json)
           aws s3 cp ./js/_website/src/lib/json/ s3://gradio-docs-json/$version/ --recursive
+          aws s3 cp ./js/_website/src/lib/templates/ s3://gradio-docs-json/$version/templates/ --recursive
       - name: Install Vercel CLI
         run: pnpm install --global vercel@latest
       # preview

gradio/renderable.py

@@ -88,10 +88,10 @@ def render(
     The render decorator allows Gradio Blocks apps to have dynamic layouts, so that the components and event listeners in your app can change depending on custom logic.
     Attaching a @gr.render decorator to a function will cause the function to be re-run whenever the inputs are changed (or specified triggers are activated). The function contains the components and event listeners that will update based on the inputs.
 
-    The basic usage of @gr.render is as follows:
-    1) Create a function and attach the @gr.render decorator to it.
-    2) Add the input components to the `inputs=` argument of @gr.render, and create a corresponding argument in your function for each component.
-    3) Add all components inside the function that you want to update based on the inputs. Any event listeners that use these components should also be inside this function.
+    The basic usage of @gr.render is as follows:\n
+    1. Create a function and attach the @gr.render decorator to it.\n
+    2. Add the input components to the `inputs=` argument of @gr.render, and create a corresponding argument in your function for each component.\n
+    3. Add all components inside the function that you want to update based on the inputs. Any event listeners that use these components should also be inside this function.\n
     Parameters:
         inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
         triggers: List of triggers to listen to, e.g. [btn.click, number.change]. If None, will listen to changes to any inputs.

guides/01_getting-started/02_key-features.md

@@ -0,0 +1,193 @@
+# Key Features
+
+Let's go through some of the key features of Gradio. This guide is intended to be a high-level overview of various things that you should be aware of as you build your demo. Where appropriate, we link to more detailed guides on specific topics.
+
+1. [Components](#components)
+2. [Queuing](#queuing)
+3. [Streaming outputs](#streaming-outputs)
+4. [Streaming inputs](#streaming-inputs)
+5. [Alert modals](#alert-modals)
+6. [Styling](#styling)
+7. [Progress bars](#progress-bars)
+8. [Batch functions](#batch-functions)
+
+## Components
+
+Gradio includes more than 30 pre-built components (as well as many user-built _custom components_) that can be used as inputs or outputs in your demo with a single line of code. These components correspond to common data types in machine learning and data science, e.g. the `gr.Image` component is designed to handle input or output images, the `gr.Label` component displays classification labels and probabilities, the `gr.Plot` component displays various kinds of plots, and so on.
+
+Each component includes various constructor attributes that control the properties of the component. For example, you can control the number of lines in a `gr.Textbox` using the `lines` argument (which takes a positive integer) in its constructor. Or you can control the way that a user can provide an image in the `gr.Image` component using the `sources` parameter (which takes a list like `["webcam", "upload"]`).
+
+**Static and Interactive Components**
+
+Every component has a _static_ version that is designed to *display* data, and most components also have an _interactive_ version designed to let users input or modify the data. Typically, you don't need to think about this distinction, because when you build a Gradio demo, Gradio automatically figures out whether the component should be static or interactive based on whether it is being used as an input or output. However, you can set this manually using the `interactive` argument that every component supports.
+
+**Preprocessing and Postprocessing**
+
+When a component is used as an input, Gradio automatically handles the _preprocessing_ needed to convert the data from a type sent by the user's browser (such as an uploaded image) to a form that can be accepted by your function (such as a `numpy` array).
+
+
+Similarly, when a component is used as an output, Gradio automatically handles the _postprocessing_ needed to convert the data from what is returned by your function (such as a list of image paths) to a form that can be displayed in the user's browser (a gallery of images).
+
+Consider an example demo with three input components (`gr.Textbox`, `gr.Number`, and `gr.Image`) and two outputs (`gr.Number` and `gr.Gallery`) that serve as a UI for your image-to-image generation model. Below is a diagram of what our preprocessing will send to the model and what our postprocessing will require from it.
+
+![](https://github.com/gradio-app/gradio/blob/main/guides/assets/dataflow.svg?raw=true)
+
+In this image, the following preprocessing steps happen to send the data from the browser to your function:
+
+* The text in the textbox is converted to a Python `str` (essentially no preprocessing)
+* The number in the number input in converted to a Python `float` (essentially no preprocessing)
+* Most importantly, ihe image supplied by the user is converted to a `numpy.array` representation of the RGB values in the image
+
+Images are converted to NumPy arrays because they are a common format for machine learning workflows. You can control the _preprocessing_ using the component's parameters when constructing the component. For example, if you instantiate the `Image` component with the following parameters, it will preprocess the image to the `PIL` format instead:
+
+```py
+img = gr.Image(type="pil")
+```
+
+Postprocessing is even simpler! Gradio automatically recognizes the format of the returned data (e.g. does the user's function return a `numpy` array or a `str` filepath for the `gr.Image` component?) and postprocesses it appropriately into a format that can be displayed by the browser.
+
+So in the image above, the following postprocessing steps happen to send the data returned from a user's function to the browser:
+
+* The `float` is displayed as a number and displayed directly to the user
+* The list of string filepaths (`list[str]`) is interpreted as a list of image filepaths and displayed as a gallery in the browser
+
+Take a look at the [Docs](https://gradio.app/docs) to see all the parameters for each Gradio component.
+
+## Queuing
+
+Every Gradio app comes with a built-in queuing system that can scale to thousands of concurrent users. You can configure the queue by using `queue()` method which is supported by the `gr.Interface`, `gr.Blocks`, and `gr.ChatInterface` classes. 
+
+For example, you can control the number of requests processed at a single time by setting the `default_concurrency_limit` parameter of `queue()`, e.g.
+
+```python
+demo = gr.Interface(...).queue(default_concurrency_limit=5)
+demo.launch()
+```
+
+This limits the number of requests processed for this event listener at a single time to 5. By default, the `default_concurrency_limit` is actually set to `1`, which means that when many users are using your app, only a single user's request will be processed at a time. This is because many machine learning functions consume a significant amount of memory and so it is only suitable to have a single user using the demo at a time. However, you can change this parameter in your demo easily.
+
+See the [docs on queueing](https://gradio.app/docs/gradio/interface#interface-queue) for more details on configuring the queuing parameters.
+
+## Streaming outputs
+
+In some cases, you may want to stream a sequence of outputs rather than show a single output at once. For example, you might have an image generation model and you want to show the image that is generated at each step, leading up to the final image. Or you might have a chatbot which streams its response one token at a time instead of returning it all at once.
+
+In such cases, you can supply a **generator** function into Gradio instead of a regular function. Creating generators in Python is very simple: instead of a single `return` value, a function should `yield` a series of values instead. Usually the `yield` statement is put in some kind of loop. Here's an example of an generator that simply counts up to a given number:
+
+```python
+def my_generator(x):
+    for i in range(x):
+        yield i
+```
+
+You supply a generator into Gradio the same way as you would a regular function. For example, here's a a (fake) image generation model that generates noise for several steps before outputting an image using the `gr.Interface` class:
+
+$code_fake_diffusion
+$demo_fake_diffusion
+
+Note that we've added a `time.sleep(1)` in the iterator to create an artificial pause between steps so that you are able to observe the steps of the iterator (in a real image generation model, this probably wouldn't be necessary).
+
+## Streaming inputs
+
+Similarly, Gradio can handle streaming inputs, e.g. a live audio stream that can gets transcribed to text in real time, or an image generation model that reruns every time a user types a letter in a textbox. This is covered in more details in our guide on building [reactive Interfaces](/guides/reactive-interfaces). 
+
+## Alert modals
+
+You may wish to raise alerts to the user. To do so, raise a `gr.Error("custom message")` to display an error message. You can also issue `gr.Warning("message")` and `gr.Info("message")` by having them as standalone lines in your function, which will immediately display modals while continuing the execution of your function. Queueing needs to be enabled for this to work.
+
+Note below how the `gr.Error` has to be raised, while the `gr.Warning` and `gr.Info` are single lines.
+
+```python
+def start_process(name):
+    gr.Info("Starting process")
+    if name is None:
+        gr.Warning("Name is empty")
+    ...
+    if success == False:
+        raise gr.Error("Process failed")
+```
+
+
+
+## Styling
+
+Gradio themes are the easiest way to customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Interface` constructor. For example:
+
+```python
+demo = gr.Interface(..., theme=gr.themes.Monochrome())
+```
+
+Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. You can extend these themes or create your own themes from scratch - see the [theming guide](https://gradio.app/guides/theming-guide) for more details.
+
+For additional styling ability, you can pass any CSS (as well as custom JavaScript) to your Gradio application. This is discussed in more detail in our [custom JS and CSS guide](/guides/custom-CSS-and-JS).
+
+
+## Progress bars
+
+Gradio supports the ability to create custom Progress Bars so that you have customizability and control over the progress update that you show to the user. In order to enable this, simply add an argument to your method that has a default value of a `gr.Progress` instance. Then you can update the progress levels by calling this instance directly with a float between 0 and 1, or using the `tqdm()` method of the `Progress` instance to track progress over an iterable, as shown below.
+
+$code_progress_simple
+$demo_progress_simple
+
+If you use the `tqdm` library, you can even report progress updates automatically from any `tqdm.tqdm` that already exists within your function by setting the default argument as `gr.Progress(track_tqdm=True)`!
+
+## Batch functions
+
+Gradio supports the ability to pass _batch_ functions. Batch functions are just
+functions which take in a list of inputs and return a list of predictions.
+
+For example, here is a batched function that takes in two lists of inputs (a list of
+words and a list of ints), and returns a list of trimmed words as output:
+
+```py
+import time
+
+def trim_words(words, lens):
+    trimmed_words = []
+    time.sleep(5)
+    for w, l in zip(words, lens):
+        trimmed_words.append(w[:int(l)])
+    return [trimmed_words]
+```
+
+The advantage of using batched functions is that if you enable queuing, the Gradio server can automatically _batch_ incoming requests and process them in parallel,
+potentially speeding up your demo. Here's what the Gradio code looks like (notice the `batch=True` and `max_batch_size=16`)
+
+With the `gr.Interface` class:
+
+```python
+demo = gr.Interface(
+    fn=trim_words, 
+    inputs=["textbox", "number"], 
+    outputs=["output"],
+    batch=True, 
+    max_batch_size=16
+)
+
+demo.launch()
+```
+
+With the `gr.Blocks` class:
+
+```py
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        word = gr.Textbox(label="word")
+        leng = gr.Number(label="leng")
+        output = gr.Textbox(label="Output")
+    with gr.Row():
+        run = gr.Button()
+
+    event = run.click(trim_words, [word, leng], output, batch=True, max_batch_size=16)
+
+demo.launch()
+```
+
+In the example above, 16 requests could be processed in parallel (for a total inference time of 5 seconds), instead of each request being processed separately (for a total
+inference time of 80 seconds). Many Hugging Face `transformers` and `diffusers` models work very naturally with Gradio's batch mode: here's [an example demo using diffusers to
+generate images in batches](https://github.com/gradio-app/gradio/blob/main/demo/diffusers_with_batching/run.py)
+
+
+

guides/04_building-with-blocks/04_dynamic-apps-with-render-decorator.md

@@ -34,9 +34,9 @@ $demo_render_merge_simple
 
 Let's take a look at what's happening here:
 
-1) The state variable `text_count` is keeping track of the number of Textboxes to create. By increasing it via the Add button, we trigger re-renders as `text_count` is an input to the render decorator.
-2) Note that in every single Textbox we create in the render function, we explicitly set a `key=` argument. This key allows us to preserve the value of this Component between re-renders. If you type in a value in a textbox, and then click the Add button, all the Textboxes re-render, but their values aren't cleared because the `key=` maintains the the value of a Component across a render.
-3) We've stored the Textboxes created in a list, and provide this list as input to the merge button event listener. Note that **all event listeners that use Components created inside a render function must also be defined inside that render function**. The event listener can still reference Components outside the render function, as we do here by referencing `merge_btn` and `output` which are both defined outside the render function.
+1. The state variable `text_count` is keeping track of the number of Textboxes to create. By clicking on the Add button, we increase `text_count` which triggers the render decorator.
+2. Note that in every single Textbox we create in the render function, we explicitly set a `key=` argument. This key allows us to preserve the value of this Component between re-renders. If you type in a value in a textbox, and then click the Add button, all the Textboxes re-render, but their values aren't cleared because the `key=` maintains the the value of a Component across a render.
+3. We've stored the Textboxes created in a list, and provide this list as input to the merge button event listener. Note that **all event listeners that use Components created inside a render function must also be defined inside that render function**. The event listener can still reference Components outside the render function, as we do here by referencing `merge_btn` and `output` which are both defined outside the render function.
 
 Just as with Components, whenever a function re-renders, the event listeners created from the previous render are cleared and the new event listeners from the latest run are attached. 
 

guides/06_custom-components/01_custom-components-in-five-minutes.md

@@ -90,7 +90,7 @@ gradio cc build
 This will create a `tar.gz` and `.whl` file in a `dist/` subdirectory.
 If you or anyone installs that `.whl` file (`pip install <path-to-whl>`) they will be able to use your custom component in any gradio app!
 
-The `build` command will also generate documentation for your custom component. This takes the form of an interactive space and a static `README.md`. You can disable this by passing `--no-generate-docs`. You can read more about the documentation generator in [the dedicated guide](./documenting-custom-components).
+The `build` command will also generate documentation for your custom component. This takes the form of an interactive space and a static `README.md`. You can disable this by passing `--no-generate-docs`. You can read more about the documentation generator in [the dedicated guide](https://gradio.app/guides/documenting-custom-components).
 
 ## 4. publish
 

js/_website/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 src/lib/json/
 .vercel
+src/lib/templates_*
+src/lib/templates/docs.json

js/_website/generate_jsons/generate.py

@@ -1,6 +1,9 @@
 import json
 import os
 from subprocess import run
+import boto3
+from botocore import UNSIGNED
+from botocore.client import Config
 
 from src import changelog, demos, docs, guides
 
@@ -10,6 +13,18 @@ GRADIO_DIR = os.path.abspath(os.path.join(WEBSITE_DIR, "..", "..", "gradio"))
 def make_dir(root, path):
     return os.path.abspath(os.path.join(root, path))
 
+def download_from_s3(bucket_name, s3_folder, local_dir):
+    print("Downloading templates from S3: " + bucket_name + "/" + s3_folder + " to " + local_dir)
+    s3 = boto3.client('s3', config=Config(signature_version=UNSIGNED))
+    objects = s3.list_objects_v2(Bucket=bucket_name, Prefix=s3_folder)
+    for obj in objects.get('Contents', []):
+        s3_key = obj['Key']
+        local_file_path = os.path.join(local_dir, os.path.relpath(s3_key, s3_folder))
+        if not os.path.exists(os.path.dirname(local_file_path)):
+            os.makedirs(os.path.dirname(local_file_path))
+        s3.download_file(bucket_name, s3_key, local_file_path)
+
+   
 def get_latest_release():
     with open(make_dir(GRADIO_DIR, "package.json")) as f:
         version = json.load(f)["version"]
@@ -22,6 +37,8 @@ def get_latest_release():
             json.dump({
                         "wheel": f"https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl"
                         }, j)
+        if not os.path.exists(make_dir(WEBSITE_DIR, f"src/lib/templates_{version.replace('.', '-')}")):
+            download_from_s3("gradio-docs-json", f"{version}/templates/", make_dir(WEBSITE_DIR, f"src/lib/templates_{version.replace('.', '-')}"))
 
             
 def create_dir_if_not_exists(path):
@@ -34,6 +51,7 @@ create_dir_if_not_exists(make_dir(WEBSITE_DIR, "src/lib/json/guides"))
 demos.generate(make_dir(WEBSITE_DIR, "src/lib/json/demos.json"))
 guides.generate(make_dir(WEBSITE_DIR, "src/lib/json/guides/") + "/")
 docs.generate(make_dir(WEBSITE_DIR, "src/lib/json/docs.json"))
+docs.generate(make_dir(WEBSITE_DIR, "src/lib/templates/docs.json"))
 changelog.generate(make_dir(WEBSITE_DIR, "src/lib/json/changelog.json"))
 get_latest_release()
 

js/_website/generate_jsons/src/docs/__init__.py

@@ -1,20 +1,21 @@
 import html
 import json
 import os
+import re
+import requests
+
 
 from gradio_client.documentation import document_cls, generate_documentation
 import gradio
 from ..guides import guides
 
-import requests
-
 DIR = os.path.dirname(__file__)
 DEMOS_DIR = os.path.abspath(os.path.join(DIR, "../../../../../demo"))
 JS_CLIENT_README = os.path.abspath(os.path.join(DIR, "../../../../../client/js/README.md"))
 JS_DIR = os.path.abspath(os.path.join(DIR, "../../../../../js/"))
+TEMPLATES_DIR = os.path.abspath(os.path.join(DIR, "../../../src/lib/templates"))
 
 docs = generate_documentation()
-docs["component"].sort(key=lambda x: x["name"])
 
 def add_component_shortcuts():
     for component in docs["component"]:
@@ -107,9 +108,6 @@ def escape_parameters(parameters):
 def escape_html_string_fields():
     for mode in docs:
         for cls in docs[mode]:
-            # print(cls["description"])
-            # cls["description"] = html.escape(cls["description"])
-            # print(cls["description"])
             for tag in [
                 "preprocessing",
                 "postprocessing",
@@ -124,26 +122,9 @@ def escape_html_string_fields():
             for fn in cls["fns"]:
                 fn["description"] = html.escape(fn["description"])
                 fn["parameters"] = escape_parameters(fn["parameters"])
-            # 1/0
 
 escape_html_string_fields()
 
-
-def override_signature(name, signature):
-    for mode in docs:
-        for cls in docs[mode]:
-            if cls["name"] == name:
-                cls["override_signature"] = signature
-
-
-override_signature("Blocks", "with gradio.Blocks():")
-override_signature("Row", "with gradio.Row():")
-override_signature("Column", "with gradio.Column():")
-override_signature("Tab", "with gradio.Tab():")
-override_signature("Group", "with gradio.Group():")
-override_signature("Dataset", "gr.Dataset(components, samples)")
-
-
 def find_cls(target_cls):
     for mode in docs:
         for cls in docs[mode]:
@@ -154,16 +135,17 @@ def find_cls(target_cls):
 
 def organize_docs(d):
     organized = {
-        "building": {},
-        "components": {},
-        "helpers": {},
-        "modals": {},
-        "routes": {},
-        "events": {},
-        "py-client": {},
-        "chatinterface": {}
+        "gradio": {
+            "building": {},
+            "components": {},
+            "helpers": {},
+            "modals": {},
+            "routes": {},
+            "events": {},
+            "chatinterface": {}
+        },
+        "python-client": {}
     }
-    pages = []
     for mode in d:
         for c in d[mode]:
             c["parent"] = "gradio"
@@ -182,137 +164,47 @@ def organize_docs(d):
                     if "default" in p:
                         p["default"] = str(p["default"])
             if mode == "component":
-                organized["components"][c["name"].lower()] = c
-                pages.append(c["name"].lower())
-            elif mode in ["helpers", "routes", "py-client", "chatinterface", "modals"]:
-                organized[mode][c["name"].lower()] = c
-                pages.append(c["name"].lower())
-                
+                organized["gradio"]["components"][c["name"].lower()] = c
+            elif mode == "py-client":
+                organized["python-client"][c["name"].lower()] = c
+            elif mode in ["helpers", "routes", "chatinterface", "modals"]:
+                organized["gradio"][mode][c["name"].lower()] = c                
             else:
-                # if mode not in organized["building"]:
-                #     organized["building"][mode] = {}
-                organized["building"][c["name"].lower()] = c
-                pages.append(c["name"].lower())
-
-    c_keys = list(organized["components"].keys())
-    for i, cls in enumerate(organized["components"]):
-        if not i:
-            organized["components"][cls]["prev_obj"] = "Components"
-            organized["components"][cls]["next_obj"] = organized["components"][
-                c_keys[1]
-            ]["name"]
-        elif i == len(c_keys) - 1:
-            organized["components"][cls]["prev_obj"] = organized["components"][
-                c_keys[len(c_keys) - 2]
-            ]["name"]
-            organized["components"][cls]["next_obj"] = "load"
-        else:
-            organized["components"][cls]["prev_obj"] = organized["components"][
-                c_keys[i - 1]
-            ]["name"]
-            organized["components"][cls]["next_obj"] = organized["components"][
-                c_keys[i + 1]
-            ]["name"]
-    c_keys = list(organized["helpers"].keys())
-    for i, cls in enumerate(organized["helpers"]):
-        if not i:
-            organized["helpers"][cls]["prev_obj"] = "Video"
-            organized["helpers"][cls]["next_obj"] = organized["helpers"][c_keys[1]][
-                "name"
-            ]
-        elif i == len(c_keys) - 1:
-            organized["helpers"][cls]["prev_obj"] = organized["helpers"][
-                c_keys[len(c_keys) - 2]
-            ]["name"]
-            organized["helpers"][cls]["next_obj"] = "Error"
-        else:
-            organized["helpers"][cls]["prev_obj"] = organized["helpers"][c_keys[i - 1]][
-                "name"
-            ]
-            organized["helpers"][cls]["next_obj"] = organized["helpers"][c_keys[i + 1]][
-                "name"
-            ]
-    c_keys = list(organized["modals"].keys())
-    for i, cls in enumerate(organized["modals"]):
-        if not i:
-            organized["modals"][cls]["prev_obj"] = "EventData"
-            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[1]][
-                "name"
-            ]
-        elif i == len(c_keys) - 1:
-            organized["modals"][cls]["prev_obj"] = organized["modals"][
-                c_keys[len(c_keys) - 2]
-            ]["name"]
-            organized["modals"][cls]["next_obj"] = "Request"
-        else:
-            organized["modals"][cls]["prev_obj"] = organized["modals"][c_keys[i - 1]][
-                "name"
-            ]
-            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[i + 1]][
-                "name"
-            ]
-
-    c_keys = list(organized["routes"].keys())
-    for i, cls in enumerate(organized["routes"]):
-        if not i:
-            organized["routes"][cls]["prev_obj"] = "Info"
-            organized["routes"][cls]["next_obj"] = organized["routes"][c_keys[1]][
-                "name"
-            ]
-        elif i == len(c_keys) - 1:
-            organized["routes"][cls]["prev_obj"] = organized["routes"][
-                c_keys[len(c_keys) - 2]
-            ]["name"]
-            organized["routes"][cls]["next_obj"] = "Flagging"
-        else:
-            organized["routes"][cls]["prev_obj"] = organized["routes"][c_keys[i - 1]][
-                "name"
-            ]
-            organized["routes"][cls]["next_obj"] = organized["routes"][c_keys[i + 1]][
-                "name"
-            ]
-    c_keys = list(organized["py-client"].keys())
-    for i, cls in enumerate(organized["py-client"]):
-        if not i:
-            organized["py-client"][cls]["prev_obj"] = "Intro"
-            organized["py-client"][cls]["next_obj"] = organized["py-client"][c_keys[1]][
-                "name"
-            ]
-        elif i == len(c_keys) - 1:
-            organized["py-client"][cls]["prev_obj"] = organized["py-client"][
-                c_keys[len(c_keys) - 2]
-            ]["name"]
-        else:
-            organized["py-client"][cls]["prev_obj"] = organized["py-client"][
-                c_keys[i - 1]
-            ]["name"]
-            organized["py-client"][cls]["next_obj"] = organized["py-client"][
-                c_keys[i + 1]
-            ]["name"]
-    
-    for cls in organized["chatinterface"]:
-        organized["chatinterface"][cls]["prev_obj"] = "Block-Layouts"
-        organized["chatinterface"][cls]["next_obj"] = "Themes"
-
-    layout_keys = ["row", "column", "tab", "group", "accordion"]
-    for i, cls in enumerate(layout_keys):
-        if not i:
-            organized["building"][cls]["prev_obj"] = "Blocks"
-            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
-        elif i == len(layout_keys) - 1:
-            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
-            organized["building"][cls]["next_obj"] = "Components"
-        else:
-            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
-            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
-
-
-    organized["building"][cls]["prev_obj"]
+                organized["gradio"]["building"][c["name"].lower()] = c
     
 
+    def format_name(page_name):
+        index = None
+        page_path = page_name
+        if re.match("^[0-9]+_", page_name):
+            index = int(page_name[: page_name.index("_")])
+            page_name = page_name[page_name.index("_") + 1 :]
+        if page_name.lower().endswith(".svx"):
+            page_name = page_name[:-4]
+        pretty_page_name = " ".join([word[0].upper() + word[1:] for word in page_name.split("-")])
+        return index, page_name, pretty_page_name, page_path
+    
+    
+    def organize_pages(): 
+        pages = {"gradio": [], "python-client": []}
+        absolute_index = -1;
+        for library in pages:
+            library_templates_dir = os.path.join(TEMPLATES_DIR, library)
+            page_folders = sorted(os.listdir(library_templates_dir))
+            for page_folder in page_folders:
+                page_list = sorted(os.listdir(os.path.join(library_templates_dir, page_folder)))
+                _, page_category, pretty_page_category, category_path = format_name(page_folder)
+                category_path = os.path.join(library, category_path)
+                pages[library].append({"category": pretty_page_category, "pages": []})
+                for page_file in page_list:
+                    page_index, page_name, pretty_page_name, page_path = format_name(page_file)
+                    pages[library][-1]["pages"].append({"name": page_name, "pretty_name": pretty_page_name, "path": os.path.join(category_path, page_path), "page_index": page_index, "abolute_index": absolute_index + 1})
+        return pages
 
-    organized["events_matrix"] = component_events
-    organized["events"] = events
+    pages = organize_pages()
+
+    organized["gradio"]["events_matrix"] = component_events
+    organized["gradio"]["events"] = events
 
     js = {}
     js_pages = []
@@ -348,7 +240,6 @@ def organize_docs(d):
 
     js_pages.sort()
 
-
     return {"docs": organized, "pages": pages, "js": js, "js_pages": js_pages, "js_client": readme_content}
 
 

js/_website/generate_jsons/src/guides/__init__.py

@@ -139,7 +139,6 @@ for guide_folder in guide_folders:
         guide_urls.append(guide_name)
         absolute_index += 1
 
-
 def generate(json_path):
     if not os.path.isdir(json_path):
         os.mkdir(json_path)

js/_website/package.json

@@ -3,7 +3,7 @@
 	"version": "0.30.4",
 	"private": true,
 	"scripts": {
-		"dev": "python generate_jsons/generate.py && vite dev",
+		"dev": "pip install boto3 && python generate_jsons/generate.py && vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

js/_website/src/lib/assets/style.css

@@ -121,6 +121,17 @@
 	@apply border-orange-500 text-orange-500;
 }
 
+/* editable docs */
+
+.obj h1 {
+	@apply text-3xl font-light py-4;
+}
+.obj h2 {
+	@apply mb-2 text-lg;
+}
+.obj h3 {
+	@apply mt-8 text-xl text-orange-500 font-light;
+}
 /* playground */
 
 .current-playground-demo {
@@ -238,7 +249,7 @@ li > ul {
 pre > code {
 	font-weight: 500 !important;
 	border-radius: 0.25rem;
-	font-size: 0.8em !important;
+	font-size: 0.9em !important;
 }
 
 h1 > code,
@@ -247,17 +258,23 @@ h3 > code,
 h4 > code,
 h5 > code,
 h6 > code {
-	font-weight: 600 !important;
 	border: none;
 	border-radius: 0;
 	background-color: transparent;
 }
 
-h5,
-h6 {
-	margin-top: 2rem;
+h5 {
+	@apply text-gray-500;
 }
 
 .token.table {
 	display: unset;
 }
+
+strong {
+	font-weight: 600;
+}
+
+.codeblock > pre {
+	font-size: 1em;
+}

js/_website/src/lib/components/Demos.svelte

@@ -13,40 +13,23 @@
 	/>
 </svelte:head>
 
-{#if url_version === "3.50.2"}
-	<div class="codeblock" id="{name}_code">
-		<a
-			class="clipboard-button m-2"
-			href="https://colab.research.google.com/github/gradio-app/gradio/blob/main/demo/{name}/run.ipynb"
-			target="_blank"
-			style="right:30px"
+<div class="py-2 max-h-[750px] overflow-y-scroll">
+	{#key name}
+		<button
+			class="open-btn bg-gray-200 text-gray-500 font-bold px-2 rounded mx-4 my-2"
+			on:click={() => {
+				let code_b64 = btoa(code);
+				window.open("/playground?demo=Blank&code=" + code_b64, "_blank");
+			}}
 		>
-			<img src="https://colab.research.google.com/assets/colab-badge.svg" />
-		</a>
-		<pre class=" max-h-80 overflow-auto"><code class="code language-python"
-				>{@html highlighted_code}</code
-			>
-	</pre>
-	</div>
-{:else}
-	<div class="py-2 max-h-[750px] overflow-y-scroll">
-		{#key name}
-			<button
-				class="open-btn bg-gray-200 text-gray-500 font-bold px-2 rounded mx-4 my-2"
-				on:click={() => {
-					let code_b64 = btoa(code);
-					window.open("/playground?demo=Blank&code=" + code_b64, "_blank");
-				}}
-			>
-				Open in 🎢 ↗
-			</button>
+			Open in 🎢 ↗
+		</button>
 
-			<gradio-lite playground shared-worker layout="vertical" class="p-2">
-				{code}
-			</gradio-lite>
-		{/key}
-	</div>
-{/if}
+		<gradio-lite playground shared-worker layout="vertical" class="p-2">
+			{code}
+		</gradio-lite>
+	{/key}
+</div>
 
 <style>
 	.open-btn {

js/_website/src/lib/components/DemosSection.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Demos from "$lib/components/Demos.svelte";
+	export let demos = [] as any[];
+	let current_selection = 0;
+	let url_version = "4+";
+</script>
+
+<div>
+	<div class="demo-window overflow-y-auto h-full w-full mb-4">
+		<div
+			class="relative mx-auto my-auto rounded-md bg-white"
+			style="top: 5%; height: 90%"
+		>
+			<div class="flex overflow-auto pt-4">
+				{#each demos as demo, i}
+					<button
+						on:click={() => (current_selection = i)}
+						class:selected-demo-tab={current_selection == i}
+						class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
+						name={demo[0]}>{demo[0]}</button
+					>
+				{/each}
+			</div>
+			{#each demos as demo, i}
+				<div
+					class:hidden={current_selection !== i}
+					class:selected-demo-window={current_selection == i}
+					class="demo-content px-4"
+				>
+					<Demos
+						name={demo[0]}
+						code={demo[1]}
+						highlighted_code={demo[1]}
+						{url_version}
+					/>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

js/_website/src/lib/components/DocsNav.svelte

@@ -2,11 +2,7 @@
 	// @ts-nocheck
 	import { clickOutside } from "./clickOutside.js";
 
-	export let components: any;
-	export let helpers: any;
-	export let modals: any;
-	export let routes: any;
-	export let py_client: any;
+	export let library_pages: any;
 
 	export let current_nav_link = "";
 	let docs_type = "python";
@@ -107,111 +103,14 @@
 		<DropDown></DropDown>
 	</div>
 
-	<p class="font-semibold px-4 my-2 block">Building Demos</p>
-	<a
-		class:current-nav-link={current_nav_link == "interface"}
-		class="thin-link px-4 block leading-8"
-		href="./interface/">Interface</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "chatinterface"}
-		class="thin-link px-4 block leading-8"
-		href="./chatinterface/"
-		>ChatInterface<sup class="text-orange-500">NEW</sup></a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "tabbedinterface"}
-		class="thin-link px-4 block leading-8"
-		href="./tabbedinterface/">TabbedInterface</a
-	>
-
-	<a
-		class:current-nav-link={current_nav_link == "blocks"}
-		class="thin-link px-4 block leading-8"
-		href="./blocks/">Blocks</a
-	>
-
-	<p class="font-semibold px-4 my-2 block">Block Layouts</p>
-
-	<a
-		class:current-nav-link={current_nav_link == "row"}
-		class="thin-link px-4 block leading-8"
-		href="./row/">Row</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "column"}
-		class="thin-link px-4 block leading-8"
-		href="./column/">Column</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "tab"}
-		class="thin-link px-4 block leading-8"
-		href="./tab/">Tab</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "group"}
-		class="thin-link px-4 block leading-8"
-		href="./group/">Group</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "accordion"}
-		class="thin-link px-4 block leading-8"
-		href="./accordion/">Accordion</a
-	>
-
-	<a
-		class:current-nav-link={current_nav_link == "components"}
-		class="link px-4 my-2 block"
-		href="./components/">Components</a
-	>
-	{#each Object.entries(components) as [name, obj] (name)}
-		<a
-			class:current-nav-link={current_nav_link == name}
-			class="px-4 block thin-link leading-8"
-			href="./{name}/">{obj.name}</a
-		>
+	{#each library_pages as category_pages}
+		<p class="font-semibold px-4 my-2 block">{category_pages.category}</p>
+		{#each category_pages.pages as page}
+			<a
+				class:current-nav-link={current_nav_link == page.name}
+				class="thin-link px-4 block leading-8"
+				href={page.name}>{page.pretty_name}</a
+			>
+		{/each}
 	{/each}
-	<p class="font-semibold px-4 my-2 block">Helpers</p>
-	{#each Object.entries(helpers) as [name, obj] (name)}
-		<a
-			class:current-nav-link={current_nav_link == name}
-			class="px-4 block thin-link leading-8"
-			href="./{name}/">{obj.name}</a
-		>
-	{/each}
-	<p class="font-semibold px-4 my-2 block">Modals</p>
-	{#each Object.entries(modals) as [name, obj] (name)}
-		<a
-			class:current-nav-link={current_nav_link == name}
-			class="px-4 block thin-link leading-8"
-			href="./{name}/">{obj.name}</a
-		>
-	{/each}
-
-	<p class="font-semibold px-4 my-2 block">Routes</p>
-	{#each Object.entries(routes) as [name, obj] (name)}
-		<a
-			class:current-nav-link={current_nav_link == name}
-			class="px-4 block thin-link leading-8"
-			href="./{name}/">{obj.name}</a
-		>
-	{/each}
-
-	<p class="font-semibold px-4 my-2 block">Other</p>
-
-	<a
-		class:current-nav-link={current_nav_link == "flagging"}
-		class="thin-link px-4 block leading-8"
-		href="./flagging/">Flagging</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "themes"}
-		class="thin-link px-4 block leading-8"
-		href="./themes/">Themes</a
-	>
-	<a
-		class:current-nav-link={current_nav_link == "no-reload"}
-		class="thin-link px-4 block leading-8"
-		href="./no-reload/">NO_RELOAD</a
-	>
 </div>

js/_website/src/lib/components/EventListeners.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let fns: any[];
+	import { style_formatted_text } from "$lib/text";
 </script>
 
 <div id="event-listeners-description">
@@ -42,11 +43,13 @@
 				<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80 align-top">
 					<td class="p-3 w-2/5 break-words">
 						<p>
-							<code class="lang-python">{fn.parent}.{fn.name}(fn, ···)</code>
+							<code class="lang-python"
+								>{fn.parent.replace("gradio.", "")}.{fn.name}(fn, ···)</code
+							>
 						</p>
 					</td>
 					<td class="p-3 break-words text-gray-700">
-						<p>{@html fn.description}</p>
+						<p>{@html style_formatted_text(fn.description)}</p>
 					</td>
 				</tr>
 			{/each}
@@ -89,7 +92,7 @@
 							{/if}
 						</td>
 						<td class="p-3 text-gray-700 break-words">
-							<p>{@html param["doc"] || ""}</p>
+							<p>{@html style_formatted_text(param["doc"]) || ""}</p>
 						</td>
 					</tr>
 				{/if}

js/_website/src/lib/components/FunctionDoc.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
 	export let fn: any;
 	import anchor from "../assets/img/anchor.svg";
+	import { style_formatted_text } from "$lib/text";
 </script>
 
 <!-- name, signature, description, params -->
 
-<div class="obj" id={fn.slug}>
+<div class="obj">
 	<div class="flex flex-row items-center justify-between">
-		<h3 class="group text-3xl font-light py-4">
+		<h3
+			class="group text-3xl font-light py-4"
+			id="{fn.parent
+				.toLowerCase()
+				.replace('gradio.', '')}-{fn.name.toLowerCase()}"
+		>
 			{fn.name}
-			<a href="#{fn.slug}" class="invisible group-hover-visible"
+			<a
+				href="#{fn.parent
+					.toLowerCase()
+					.replace('gradio.', '')}-{fn.name.toLowerCase()}"
+				class="invisible group-hover-visible"
 				><img class="anchor-img" src={anchor} /></a
 			>
 		</h3>
@@ -39,10 +49,12 @@
 
 	<h4
 		class="mt-8 text-xl text-orange-500 font-light group"
-		id="{fn.slug}-description"
+		id="{fn.name.toLowerCase()}-description"
 	>
 		Description
-		<a href="#{fn.slug}-description" class="invisible group-hover-visible"
+		<a
+			href="#{fn.name.toLowerCase()}-description"
+			class="invisible group-hover-visible"
 			><img class="anchor-img-small" src={anchor} /></a
 		>
 	</h4>
@@ -51,27 +63,29 @@
 	{#if fn.example}
 		<h4
 			class="mt-4 text-xl text-orange-500 font-light group"
-			id="{fn.slug}-example-usage"
+			id="{fn.name.toLowerCase()}-example-usage"
 		>
 			Example Usage
-			<a href="#{fn.slug}-example-usage" class="invisible group-hover-visible"
+			<a
+				href="#{fn.name.toLowerCase()}-example-usage"
+				class="invisible group-hover-visible"
 				><img class="anchor-img-small" src={anchor} /></a
 			>
 		</h4>
 		<div class="codeblock">
-			<pre><code class="code language-python"
-					>{@html fn.highlighted_example}</code
-				></pre>
+			<pre><code class="code language-python">{@html fn.example}</code></pre>
 		</div>
 	{/if}
 
 	{#if (fn.parameters.length > 0 && fn.parameters[0].name != "self") || fn.parameters.length > 1}
 		<h4
 			class="mt-6 text-xl text-orange-500 font-light group"
-			id="{fn.slug}-arguments"
+			id="{fn.name.toLowerCase()}-arguments"
 		>
-			Agruments
-			<a href="#{fn.slug}-arguments" class="invisible group-hover-visible"
+			Arguments
+			<a
+				href="#{fn.name.toLowerCase()}-arguments"
+				class="invisible group-hover-visible"
 				><img class="anchor-img-small" src={anchor} /></a
 			>
 		</h4>

js/_website/src/lib/components/FunctionsSection.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import EventListeners from "$lib/components/EventListeners.svelte";
+	import FunctionDoc from "$lib/components/FunctionDoc.svelte";
+	export let fns = [] as any[];
+	export let event_listeners = false;
+</script>
+
+{#if event_listeners}
+	{#if fns && fns.length > 0}
+		<div class="flex flex-col gap-8 pl-12">
+			<EventListeners {fns} />
+			<div class="ml-12" />
+		</div>
+	{/if}
+{:else}
+	<div class="flex flex-col gap-8 pl-12">
+		{#each fns as fn}
+			<FunctionDoc {fn} />
+		{/each}
+		<div class="ml-12" />
+	</div>
+{/if}

js/_website/src/lib/components/GuidesSection.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let guides = [] as any[];
+	const COLOR_SETS = [
+		["from-green-100", "to-green-50"],
+		["from-yellow-100", "to-yellow-50"],
+		["from-red-100", "to-red-50"],
+		["from-blue-100", "to-blue-50"],
+		["from-pink-100", "to-pink-50"],
+		["from-purple-100", "to-purple-50"]
+	];
+</script>
+
+{#if guides && guides.length > 0}
+	<div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 pt-2">
+		{#each guides as guide, i}
+			<a
+				class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {COLOR_SETS[
+					i
+				][0]} {COLOR_SETS[i][1]}"
+				target="_blank"
+				href="../..{guide.url}"
+			>
+				<div class="flex flex-col p-4 h-min">
+					<p class="group-hover:underline text-l">
+						{guide.pretty_name}
+					</p>
+				</div>
+			</a>
+		{/each}
+	</div>
+{/if}

js/_website/src/lib/components/ParamTable.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	export let parameters = [] as any[];
+	import { style_formatted_text } from "$lib/text";
+</script>
+
+{#if (parameters.length > 0 && parameters[0].name != "self") || parameters.length > 1}
+	<table class="table-fixed w-full leading-loose">
+		<thead class="text-left">
+			<tr>
+				<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold">Parameter</th>
+				<th class="px-3 pb-3 text-gray-700 font-semibold">Description</th>
+			</tr>
+		</thead>
+		<tbody
+			class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
+		>
+			{#each parameters as param}
+				{#if param["name"] != "self"}
+					<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+						<td class="p-3 w-2/5 break-words">
+							<code class="block">
+								{param["name"]}
+							</code>
+							<p class="text-gray-500 italic">
+								{param["annotation"]}
+							</p>
+							{#if "default" in param}
+								<p class="text-gray-500 font-semibold">
+									default: {param["default"]}
+								</p>
+							{:else if !("kwargs" in param)}
+								<p class="text-orange-600 font-semibold italic">required</p>
+							{/if}
+						</td>
+						<td class="p-3 text-gray-700 break-words">
+							<p>{@html style_formatted_text(param["doc"]) || ""}</p>
+						</td>
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
+{/if}

js/_website/src/lib/components/ShortcutTable.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	export let shortcuts = [] as any[];
+</script>
+
+<table class="mb-4 table-fixed w-full">
+	<thead class="text-left">
+		<tr>
+			<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5">Class</th>
+			<th class="px-3 pb-3 text-gray-700 font-semibold"
+				>Interface String Shortcut</th
+			>
+			<th class="px-3 pb-3 text-gray-700 font-semibold">Initialization</th>
+		</tr>
+	</thead>
+	<tbody
+		class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
+	>
+		{#each shortcuts as shortcut}
+			<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
+				<td class="p-3 w-2/5 break-words">
+					<p>
+						<code class="lang-python">gradio.{shortcut[0]}</code>
+					</p>
+				</td>
+				<td class="p-3 w-2/5 break-words">
+					<p>"{shortcut[1]}"</p>
+				</td>
+				<td class="p-3 text-gray-700 break-words">
+					{shortcut[2]}
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>

js/_website/src/lib/components/VersionDropdown.svelte

@@ -4,7 +4,7 @@
 	import { goto } from "$app/navigation";
 	import { version } from "$lib/json/version.json";
 
-	export let choices = [version, "3.50.2", "main"];
+	export let choices = [version, "main"];
 	export let value: string = $page.params?.version || version;
 	export let docs_type = "python";
 

js/_website/src/lib/templates/gradio/01_building-demos/01_interface.svx

@@ -0,0 +1,63 @@
+
+<script lang="ts" context="module">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("interface");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Interface(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+
+def image_classifier(inp):
+    return {'cat': 0.3, 'dog': 0.7}
+
+demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
+demo.launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx

@@ -0,0 +1,61 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("chatinterface");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ChatInterface(fn, ···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+### Example Usage
+```python
+import gradio as gr
+
+def echo(message, history):
+    return message
+
+demo = gr.ChatInterface(fn=echo, examples=["hello", "hola", "merhaba"], title="Echo Bot")
+demo.launch()
+```
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/01_building-demos/03_tabbedinterface.svx

@@ -0,0 +1,48 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("tabbedinterface");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.TabbedInterface(interface_list, ···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/01_building-demos/04_blocks.svx

@@ -0,0 +1,69 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("blocks");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+with gradio.Blocks():
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+def update(name):
+    return f"Welcome to Gradio, {name}!"
+
+with gr.Blocks() as 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()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/02_blocks-layout/01_render.svx

@@ -0,0 +1,72 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("render");
+    let guides = [{url: "/guides/dynamic-apps-with-render-decorator/", pretty_name: "Dynamic Apps with the Render Decorator"}]
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+@gr.render(inputs=···)
+def hello(···):
+   ... 
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+
+with gr.Blocks() as demo:
+    input_text = gr.Textbox()
+
+    @gr.render(inputs=input_text)
+    def show_split(text):
+        if len(text) == 0:
+            gr.Markdown("## No Input Provided")
+        else:
+            for letter in text:
+                with gr.Row():
+                    text = gr.Textbox(letter)
+                    btn = gr.Button("Clear")
+                    btn.click(lambda: gr.Textbox(value=""), None, text)
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+<!--- Guides -->
+### Guides
+<GuidesSection guides={guides}/>

js/_website/src/lib/templates/gradio/02_blocks-layout/accordion.svx

@@ -0,0 +1,58 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("accordion");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Accordion(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+with gr.Accordion("See Details"):
+    gr.Markdown("lorem ipsum")
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/02_blocks-layout/column.svx

@@ -0,0 +1,64 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("column");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Column(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column(scale=1):
+            text1 = gr.Textbox()
+            text2 = gr.Textbox()
+        with gr.Column(scale=4):
+            btn1 = gr.Button("Button 1")
+            btn2 = gr.Button("Button 2")
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/02_blocks-layout/group.svx

@@ -0,0 +1,59 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("group");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Group(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+with gr.Group():
+    gr.Textbox(label="First")
+    gr.Textbox(label="Last")
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/02_blocks-layout/row.svx

@@ -0,0 +1,61 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("row");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Row(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+with gr.Blocks() as demo:
+    with gr.Row():
+        gr.Image("lion.jpg", scale=2)
+        gr.Image("tiger.jpg", scale=1)
+demo.launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/02_blocks-layout/tab.svx

@@ -0,0 +1,63 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("tab");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Tab(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+with gr.Blocks() as demo:
+    with gr.Tab("Lion"):
+        gr.Image("lion.jpg")
+        gr.Button("New Lion")
+    with gr.Tab("Tiger"):
+        gr.Image("tiger.jpg")
+        gr.Button("New Tiger")
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/01_introduction.svx

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import dataflow from "$lib/assets/img/dataflow.svg"
+    import {get_object} from "../../process_json.ts";
+    let components = get_object("components");
+    let events = get_object("events");
+    let events_matrix = get_object("events_matrix");
+</script>
+
+# Components 
+
+### Introduction
+
+## 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 preprocessing steps that convert user data submitted through browser to something that be can used by a Python function, and postprocessing steps to convert values returned by a Python function into something that can be displayed in a browser.
+
+## Consider an example with three inputs (Textbox, Number, and Image) and two outputs (Number and Gallery), below is a diagram of what our preprocessing will send to the function and what our postprocessing will require from it.
+
+<img src={dataflow} />
+
+### Events
+
+## Components also come with certain events that they support. These are methods that are triggered with user actions. Below is a table showing which events are supported for each component. All events are also listed (with parameters) in the component's docs.
+
+
+<div class="max-h-96 overflow-y-scroll my-6">
+    <table class="table-fixed leading-loose">
+        <thead class="text-center sticky top-0">
+            <tr>
+                <th class="p-3 bg-white w-1/5 sticky left-0" />
+                {#each events as event}
+                    <th class="p-3 font-normal bg-white border-t border-l"
+                        >{event}</th
+                    >
+                {/each}
+            </tr>
+        </thead>
+        <tbody
+            class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
+        >
+            {#each Object.entries(components) as [name, obj] (name)}
+                <tr class="group hover:bg-gray-200/60">
+                    <th
+                        class="p-3 w-1/5 bg-white sticky z-2 left-0 font-normal"
+                    >
+                        <a href={obj.name.toLowerCase()} class="thin-link"
+                            >{obj.name}</a
+                        >
+                    </th>
+                {#each events as event}
+                        <td class="p-3 text-gray-700 break-words text-center">
+                            {#if events_matrix[obj.name].includes(event.toLowerCase())}
+                                <p class="text-orange-500">&#10003;</p>
+                            {:else}
+                                <p class="text-gray-300">&#10005;</p>
+                            {/if}
+                        </td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>
+
+
+
+<style>
+
+
+</style>

js/_website/src/lib/templates/gradio/03_components/annotatedimage.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("annotatedimage");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.AnnotatedImage(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: tuple[str, list[tuple[str, str]]] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/audio.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("audio");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Audio(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | tuple[int, np.ndarray] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | Path | bytes | tuple[int, np.ndarray] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/barplot.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("barplot");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.BarPlot(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: AltairPlotData
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> pd.DataFrame | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/button.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("button");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Button(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/chatbot.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("chatbot");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Chatbot(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: list[list[str | tuple[str] | tuple[str, str] | None]] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> list[list[str | tuple[str] | tuple[str, str] | None] | tuple] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/checkbox.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("checkbox");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Checkbox(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: bool | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> bool | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/checkboxgroup.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("checkboxgroup");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.CheckboxGroup(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: list[str | int | float] | list[int | None]
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> list[str | int | float] | str | int | float | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/clearbutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("clearbutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ClearButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/code.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("code");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Code(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> tuple[str] | str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/colorpicker.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("colorpicker");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ColorPicker(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/dataframe.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("dataframe");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Dataframe(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: pd.DataFrame | np.ndarray | pl.DataFrame | list[list]
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> pd.DataFrame | Styler | np.ndarray | pl.DataFrame | list | list[list] | dict | str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/dataset.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("dataset");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Dataset(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: int | list | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> list[list]
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/downloadbutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("downloadbutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.DownloadButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | Path | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/dropdown.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("dropdown");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Dropdown(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | int | float | list[str | int | float] | list[int | None] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | int | float | list[str | int | float] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/duplicatebutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("duplicatebutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.DuplicateButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/file.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("file");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.File(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: bytes | str | list[bytes] | list[str] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | list[str] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/fileexplorer.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("fileexplorer");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.FileExplorer(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: list[str] | str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | list[str] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/gallery.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("gallery");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Gallery(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: List[tuple[str, str | None]] | List[tuple[PIL.Image.Image, str | None]] | List[tuple[np.ndarray, str | None]] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> list[GalleryImageType | CaptionedGalleryImageType] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/highlightedtext.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("highlightedtext");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.HighlightedText(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: list[tuple[str, str | float | None]] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> list[tuple[str, str | float | None]] | dict | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/html.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("html");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.HTML(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/image.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("image");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Image(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: np.ndarray | PIL.Image.Image | str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> np.ndarray | PIL.Image.Image | str | Path | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/imageeditor.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("imageeditor");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ImageEditor(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: EditorValue | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> EditorValue | ImageType | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/json.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("json");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.JSON(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: dict | list | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> dict | list | str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/label.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("label");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Label(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: dict[str, float] | str | int | float | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> dict[str, float] | str | int | float | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/lineplot.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("lineplot");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.LinePlot(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: AltairPlotData | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> pd.DataFrame | dict | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/loginbutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("loginbutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.LoginButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/logoutbutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("logoutbutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.LogoutButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/markdown.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("markdown");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Markdown(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/model3d.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("model3d");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Model3D(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | Path | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/multimodaltextbox.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("multimodaltextbox");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.MultimodalTextbox(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: MultimodalValue | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> MultimodalValue | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/number.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("number");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Number(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: float | int | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> float | int | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/paramviewer.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("paramviewer");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ParamViewer(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: dict[str, Parameter]
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> dict[str, Parameter]
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/plot.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("plot");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Plot(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: PlotData | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> Any
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/radio.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("radio");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Radio(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | int | float | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | int | float | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/scatterplot.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("scatterplot");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.ScatterPlot(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: AltairPlotData | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> pd.DataFrame | dict | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/simpleimage.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("simpleimage");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.SimpleImage(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | Path | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/slider.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("slider");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Slider(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: float
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> float | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/state.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("state");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.State(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: Any
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> Any
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/textbox.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("textbox");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Textbox(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/uploadbutton.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("uploadbutton");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.UploadButton(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: bytes | str | list[bytes] | list[str] | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | list[str] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/03_components/video.svx

@@ -0,0 +1,78 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("video");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Video(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Behavior -->
+### Behavior
+## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
+##### Your function should accept one of these types:
+
+```python
+def predict(
+	value: str | None
+)
+	...
+```
+
+<br>
+
+## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
+##### Your function should return one of these types:
+
+```python
+def predict(···) -> str | Path | tuple[str | Path, str | Path | None] | None
+	...	
+	return value
+```
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/eventdata.svx

@@ -0,0 +1,68 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("eventdata");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.EventData(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+table = gr.Dataframe([[1, 2, 3], [4, 5, 6]])
+gallery = gr.Gallery([("cat.jpg", "Cat"), ("dog.jpg", "Dog")])
+textbox = gr.Textbox("Hello World!")
+
+statement = gr.Textbox()
+
+def on_select(evt: gr.SelectData):  # SelectData is a subclass of EventData
+    return f"You selected {evt.value} at {evt.index} from {evt.target}"
+
+table.select(on_select, None, statement)
+gallery.select(on_select, None, statement)
+textbox.select(on_select, None, statement)
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/examples.svx

@@ -0,0 +1,57 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("examples");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Examples(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+None
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/load.svx

@@ -0,0 +1,59 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("load");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.load(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+demo = gr.load("gradio/question-answering", src="spaces")
+demo.launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/make_waveform.svx

@@ -0,0 +1,57 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("make_waveform");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.make_waveform(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+None
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/progress.svx

@@ -0,0 +1,65 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("progress");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Progress(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+import time
+def my_function(x, progress=gr.Progress()):
+    progress(0, desc="Starting...")
+    time.sleep(1)
+    for i in progress.tqdm(range(100)):
+        time.sleep(0.1)
+    return x
+gr.Interface(my_function, gr.Textbox(), gr.Textbox()).queue().launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/04_helpers/set_static_paths.svx

@@ -0,0 +1,72 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("set_static_paths");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.set_static_paths(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+
+# Paths can be a list of strings or pathlib.Path objects
+# corresponding to filenames or directories.
+gr.set_static_paths(paths=["test/test_files/"])
+
+# The example files and the default value of the input
+# will not be copied to the gradio cache and will be served directly.
+demo = gr.Interface(
+    lambda s: s.rotate(45),
+    gr.Image(value="test/test_files/cheetah1.jpg", type="pil"),
+    gr.Image(),
+    examples=["test/test_files/bus.png"],
+)
+
+demo.launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/05_modals/error.svx

@@ -0,0 +1,61 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("error");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Error(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+def divide(numerator, denominator):
+    if denominator == 0:
+        raise gr.Error("Cannot divide by zero!")
+gr.Interface(divide, ["number", "number"], "number").launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/05_modals/info.svx

@@ -0,0 +1,64 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("info");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Info(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+def hello_world():
+    gr.Info('This is some info.')
+    return "hello world"
+with gr.Blocks() as demo:
+    md = gr.Markdown()
+    demo.load(hello_world, inputs=None, outputs=[md])
+demo.queue().launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/05_modals/warning.svx

@@ -0,0 +1,64 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("warning");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Warning(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+def hello_world():
+    gr.Warning('This is a warning message.')
+    return "hello world"
+with gr.Blocks() as demo:
+    md = gr.Markdown()
+    demo.load(hello_world, inputs=None, outputs=[md])
+demo.queue().launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/06_routes/mount_gradio_app.svx

@@ -0,0 +1,65 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("mount_gradio_app");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.mount_gradio_app(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+from fastapi import FastAPI
+import gradio as gr
+app = FastAPI()
+@app.get("/")
+def read_main():
+    return {"message": "This is your main app"}
+io = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
+app = gr.mount_gradio_app(app, io, path="/gradio")
+```
+##### Then run `uvicorn run:app` from the terminal and navigate to http://localhost:8000/gradio.
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/06_routes/request.svx

@@ -0,0 +1,65 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("request");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.Request(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+<!-- Example Usage --> 
+
+{#if obj.example}
+### Example Usage
+```python
+import gradio as gr
+def echo(text, request: gr.Request):
+    if request:
+        print("Request headers dictionary:", request.headers)
+        print("IP address:", request.client.host)
+        print("Query parameters:", dict(request.query_params))
+        print("Session hash:", request.session_hash)
+    return text
+io = gr.Interface(echo, "textbox", "textbox").launch()
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={obj.fns} event_listeners={false} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/gradio/other/01_flagging.svx

@@ -0,0 +1,185 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let simple_csv_logger_obj = get_object("simplecsvlogger");
+    let csv_logger_obj = get_object("csvlogger");
+    let hf_dataset_saver_obj = get_object("huggingfacedatasetsaver");
+</script>
+
+<!--- Title -->
+# Flagging
+
+<!-- Description -->
+### Description
+## A Gradio Interface includes a 'Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of _FlaggingCallback_ to the _flagging_callback_ parameter in the _Interface_ constructor. You can use one of the _FlaggingCallback_ subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.
+
+
+<!--------- SimpleCSVLogger --------->
+
+<!-- Title -->
+# {simple_csv_logger_obj.name}
+
+
+<!--- Usage -->
+```python
+gradio.SimpleCSVLogger(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(simple_csv_logger_obj.description)}
+
+<!-- Example Usage --> 
+
+{#if simple_csv_logger_obj.example}
+### Example Usage
+```python
+import gradio as gr
+def image_classifier(inp):
+    return {'cat': 0.3, 'dog': 0.7}
+demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
+                    flagging_callback=SimpleCSVLogger())
+```
+{/if}
+
+{#if (simple_csv_logger_obj.parameters.length > 0 && simple_csv_logger_obj.parameters[0].name != "self") || simple_csv_logger_obj.parameters.length > 1}
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={simple_csv_logger_obj.parameters} />
+{/if}
+
+{#if simple_csv_logger_obj.demos && simple_csv_logger_obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={simple_csv_logger_obj.demos} />
+{/if}
+
+{#if simple_csv_logger_obj.fns && simple_csv_logger_obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={simple_csv_logger_obj.fns} event_listeners={false} />
+{/if}
+
+{#if simple_csv_logger_obj.guides && simple_csv_logger_obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={simple_csv_logger_obj.guides}/>
+{/if}
+
+
+
+<!--------- CSVLogger --------->
+
+<!-- Title -->
+# {csv_logger_obj.name}
+
+
+<!--- Usage -->
+```python
+gradio.CSVLogger(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(csv_logger_obj.description)}
+
+<!-- Example Usage --> 
+
+{#if csv_logger_obj.example}
+### Example Usage
+```python
+import gradio as gr
+def image_classifier(inp):
+    return {'cat': 0.3, 'dog': 0.7}
+demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
+                    flagging_callback=CSVLogger())
+```
+{/if}
+
+{#if (csv_logger_obj.parameters.length > 0 && csv_logger_obj.parameters[0].name != "self") || csv_logger_obj.parameters.length > 1}
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={csv_logger_obj.parameters} />
+{/if}
+
+{#if csv_logger_obj.demos && csv_logger_obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={csv_logger_obj.demos} />
+{/if}
+
+{#if csv_logger_obj.fns && csv_logger_obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={csv_logger_obj.fns} event_listeners={false} />
+{/if}
+
+{#if csv_logger_obj.guides && csv_logger_obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={csv_logger_obj.guides}/>
+{/if}
+
+
+<!--------- HuggingFaceDatasetSaver --------->
+
+<!-- Title -->
+# {hf_dataset_saver_obj.name}
+
+
+<!--- Usage -->
+```python
+gradio.HuggingFaceDatasetSaver(hf_token, dataset_name, ···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(hf_dataset_saver_obj.description)}
+
+<!-- Example Usage --> 
+
+{#if hf_dataset_saver_obj.example}
+### Example Usage
+```python
+import gradio as gr
+hf_writer = gr.HuggingFaceDatasetSaver(HF_API_TOKEN, "image-classification-mistakes")
+def image_classifier(inp):
+    return {'cat': 0.3, 'dog': 0.7}
+demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
+                    allow_flagging="manual", flagging_callback=hf_writer)
+```
+{/if}
+
+{#if (hf_dataset_saver_obj.parameters.length > 0 && hf_dataset_saver_obj.parameters[0].name != "self") || hf_dataset_saver_obj.parameters.length > 1}
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={hf_dataset_saver_obj.parameters} />
+{/if}
+
+{#if hf_dataset_saver_obj.demos && hf_dataset_saver_obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={hf_dataset_saver_obj.demos} />
+{/if}
+
+{#if hf_dataset_saver_obj.fns && hf_dataset_saver_obj.fns.length > 0}
+<!--- Methods -->
+### Methods 
+<FunctionsSection fns={hf_dataset_saver_obj.fns} event_listeners={false} />
+{/if}
+
+{#if hf_dataset_saver_obj.guides && hf_dataset_saver_obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={hf_dataset_saver_obj.guides}/>
+{/if}
+
+

js/_website/src/lib/templates/gradio/other/02_themes.svx

@@ -0,0 +1,435 @@
+<script lang="ts">
+    import CopyButton from "$lib/components/CopyButton.svelte";
+</script>
+
+# Theming
+
+### Introduction
+
+## Gradio features a built-in theming engine that lets you customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Blocks` or `Interface` constructor. For example:
+
+```python
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    ...
+```
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-soft.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+## Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. These are:
+
+- -- `gr.themes.Base()`
+- -- `gr.themes.Default()`
+- -- `gr.themes.Glass()`
+- -- `gr.themes.Monochrome()`
+- -- `gr.themes.Soft()`
+
+## Each of these themes set values for hundreds of CSS variables. You can use prebuilt themes as a starting point for your own custom themes, or you can create your own themes from scratch. Let's take a look at each approach.
+
+### Using the Theme Builder
+
+## The easiest way to build a theme is using the Theme Builder. To launch the Theme Builder locally, run the following code:
+
+```python
+import gradio as gr
+
+gr.themes.builder()
+```
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-builder.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+## You can use the Theme Builder running on Spaces above, though it runs much faster when you launch it locally via `gr.themes.builder()`.
+
+## As you edit the values in the Theme Builder, the app will preview updates in real time. You can download the code to generate the theme you've created so you can use it in any Gradio app.
+
+## In the rest of the guide, we will cover building themes programmatically.
+
+### Extending Themes via the Constructor
+
+## Although each theme has hundreds of CSS variables, the values for most these variables are drawn from 8 core variables which can be set through the constructor of each prebuilt theme. Modifying these 8 arguments allows you to quickly change the look and feel of your app.
+
+### Core Colors
+
+## The first 3 constructor arguments set the colors of the theme and are `gradio.themes.Color` objects. Internally, these Color objects hold brightness values for the palette of a single hue, ranging from 50, 100, 200..., 800, 900, 950. Other CSS variables are derived from these 3 colors.
+
+## The 3 color constructor arguments are:
+
+- -- `primary_hue`: This is the color draws attention in your theme. In the default theme, this is set to `gradio.themes.colors.orange`.
+- -- `secondary_hue`: This is the color that is used for secondary elements in your theme. In the default theme, this is set to `gradio.themes.colors.blue`.
+- -- `neutral_hue`: This is the color that is used for text and other neutral elements in your theme. In the default theme, this is set to `gradio.themes.colors.gray`.
+
+## You could modify these values using their string shortcuts, such as
+
+```python
+with gr.Blocks(theme=gr.themes.Default(primary_hue="red", secondary_hue="pink")) as demo:
+    ...
+```
+
+## or you could use the `Color` objects directly, like this:
+
+```python
+with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:
+    ...
+```
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-extended-step-1.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+## Predefined colors are:
+
+- -- `slate`
+- -- `gray`
+- -- `zinc`
+- -- `neutral`
+- -- `stone`
+- -- `red`
+- -- `orange`
+- -- `amber`
+- -- `yellow`
+- -- `lime`
+- -- `green`
+- -- `emerald`
+- -- `teal`
+- -- `cyan`
+- -- `sky`
+- -- `blue`
+- -- `indigo`
+- -- `violet`
+- -- `purple`
+- -- `fuchsia`
+- -- `pink`
+- -- `rose`
+
+You could also create your own custom `Color` objects and pass them in.
+
+### Core Sizing
+
+The next 3 constructor arguments set the sizing of the theme and are `gradio.themes.Size` objects. Internally, these Size objects hold pixel size values that range from `xxs` to `xxl`. Other CSS variables are derived from these 3 sizes.
+
+- -- `spacing_size`: This sets the padding within and spacing between elements. In the default theme, this is set to `gradio.themes.sizes.spacing_md`.
+- -- `radius_size`: This sets the roundedness of corners of elements. In the default theme, this is set to `gradio.themes.sizes.radius_md`.
+- -- `text_size`: This sets the font size of text. In the default theme, this is set to `gradio.themes.sizes.text_md`.
+
+## You could modify these values using their string shortcuts, such as
+
+```python
+with gr.Blocks(theme=gr.themes.Default(spacing_size="sm", radius_size="none")) as demo:
+    ...
+```
+
+## or you could use the `Size` objects directly, like this:
+
+```python
+with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, radius_size=gr.themes.sizes.radius_none)) as demo:
+    ...
+```
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-extended-step-2.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+## The predefined size objects are:
+
+- -- `radius_none`
+- -- `radius_sm`
+- -- `radius_md`
+- -- `radius_lg`
+- -- `spacing_sm`
+- -- `spacing_md`
+- -- `spacing_lg`
+- -- `text_sm`
+- -- `text_md`
+- -- `text_lg`
+
+## You could also create your own custom `Size` objects and pass them in.
+
+### Core Fonts
+
+## The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts.
+
+- -- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Source Sans Pro")`.
+- -- `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`.
+
+## You could modify these values such as the following:
+
+```python
+with gr.Blocks(theme=gr.themes.Default(font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])) as demo:
+    ...
+```
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-extended-step-3.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+### Extending Themes via `.set()`
+
+## You can also modify the values of CSS variables after the theme has been loaded. To do so, use the `.set()` method of the theme object to get access to the CSS variables. For example:
+
+```python
+theme = gr.themes.Default(primary_hue="blue").set(
+    loader_color="#FF0000",
+    slider_color="#FF0000",
+)
+
+with gr.Blocks(theme=theme) as demo:
+    ...
+```
+
+## In the example above, we've set the `loader_color` and `slider_color` variables to `#FF0000`, despite the overall `primary_color` using the blue color palette. You can set any CSS variable that is defined in the theme in this manner.
+
+## Your IDE type hinting should help you navigate these variables. Since there are so many CSS variables, let's take a look at how these variables are named and organized.
+
+### CSS Variable Naming Conventions
+
+## CSS variable names can get quite long, like `button_primary_background_fill_hover_dark`! However they follow a common naming convention that makes it easy to understand what they do and to find the variable you're looking for. Separated by underscores, the variable name is made up of:
+
+- -- 1. The target element, such as `button`, `slider`, or `block`.
+- -- 2. The target element type or sub-element, such as `button_primary`, or `block_label`.
+- -- 3. The property, such as `button_primary_background_fill`, or `block_label_border_width`.
+- -- 4. Any relevant state, such as `button_primary_background_fill_hover`.
+- -- 5. If the value is different in dark mode, the suffix `_dark`. For example, `input_border_color_focus_dark`.
+
+## Of course, many CSS variable names are shorter than this, such as `table_border_color`, or `input_shadow`.
+
+### CSS Variable Organization
+
+## Though there are hundreds of CSS variables, they do not all have to have individual values. They draw their values by referencing a set of core variables and referencing each other. This allows us to only have to modify a few variables to change the look and feel of the entire theme, while also getting finer control of individual elements that we may want to modify.
+
+#### Referencing Core Variables
+
+## To reference one of the core constructor variables, precede the variable name with an asterisk. To reference a core color, use the `*primary_`, `*secondary_`, or `*neutral_` prefix, followed by the brightness value. For example:
+
+```python
+theme = gr.themes.Default(primary_hue="blue").set(
+    button_primary_background_fill="*primary_200",
+    button_primary_background_fill_hover="*primary_300",
+)
+```
+
+## In the example above, we've set the `button_primary_background_fill` and `button_primary_background_fill_hover` variables to `*primary_200` and `*primary_300`. These variables will be set to the 200 and 300 brightness values of the blue primary color palette, respectively.
+
+## Similarly, to reference a core size, use the `*spacing_`, `*radius_`, or `*text_` prefix, followed by the size value. For example:
+
+```python
+theme = gr.themes.Default(radius_size="md").set(
+    button_primary_border_radius="*radius_xl",
+)
+```
+
+## In the example above, we've set the `button_primary_border_radius` variable to `*radius_xl`. This variable will be set to the `xl` setting of the medium radius size range.
+
+### Referencing Other Variables
+
+## Variables can also reference each other. For example, look at the example below:
+
+```python
+theme = gr.themes.Default().set(
+    button_primary_background_fill="#FF0000",
+    button_primary_background_fill_hover="#FF0000",
+    button_primary_border="#FF0000",
+)
+```
+
+## Having to set these values to a common color is a bit tedious. Instead, we can reference the `button_primary_background_fill` variable in the `button_primary_background_fill_hover` and `button_primary_border` variables, using a `*` prefix.
+
+```python
+theme = gr.themes.Default().set(
+    button_primary_background_fill="#FF0000",
+    button_primary_background_fill_hover="*button_primary_background_fill",
+    button_primary_border="*button_primary_background_fill",
+)
+```
+
+## Now, if we change the `button_primary_background_fill` variable, the `button_primary_background_fill_hover` and `button_primary_border` variables will automatically update as well.
+
+## This is particularly useful if you intend to share your theme - it makes it easy to modify the theme without having to change every variable.
+
+## Note that dark mode variables automatically reference each other. For example:
+
+```python
+theme = gr.themes.Default().set(
+    button_primary_background_fill="#FF0000",
+    button_primary_background_fill_dark="#AAAAAA",
+    button_primary_border="*button_primary_background_fill",
+    button_primary_border_dark="*button_primary_background_fill_dark",
+)
+```
+
+## `button_primary_border_dark` will draw its value from `button_primary_background_fill_dark`, because dark mode always draw from the dark version of the variable.
+
+### Creating a Full Theme
+
+## Let's say you want to create a theme from scratch! We'll go through it step by step - you can also see the source of prebuilt themes in the gradio source repo for reference - [here's the source](https://github.com/gradio-app/gradio/blob/main/gradio/themes/monochrome.py) for the Monochrome theme.
+
+## Our new theme class will inherit from `gradio.themes.Base`, a theme that sets a lot of convenient defaults. Let's make a simple demo that creates a dummy theme called Seafoam, and make a simple app that uses it.
+
+$code_theme_new_step_1
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-new-step-1.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+
+## The Base theme is very barebones, and uses `gr.themes.Blue` as it primary color - you'll note the primary button and the loading animation are both blue as a result. Let's change the defaults core arguments of our app. We'll overwrite the constructor and pass new defaults for the core constructor arguments.
+
+## We'll use `gr.themes.Emerald` as our primary color, and set secondary and neutral hues to `gr.themes.Blue`. We'll make our text larger using `text_lg`. We'll use `Quicksand` as our default font, loaded from Google Fonts.
+
+$code_theme_new_step_2
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-new-step-2.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+See how the primary button and the loading animation are now green? These CSS variables are tied to the `primary_hue` variable.
+
+Let's modify the theme a bit more directly. We'll call the `set()` method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the `*` prefix.
+
+$code_theme_new_step_3
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-new-step-3.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+Look how fun our theme looks now! With just a few variable changes, our theme looks completely different.
+
+You may find it helpful to explore the [source code of the other prebuilt themes](https://github.com/gradio-app/gradio/blob/main/gradio/themes) to see how they modified the base theme. You can also find your browser's Inspector useful to select elements from the UI and see what CSS variables are being used in the styles panel.
+
+## Sharing Themes
+
+Once you have created a theme, you can upload it to the HuggingFace Hub to let others view it, use it, and build off of it!
+
+### Uploading a Theme
+
+There are two ways to upload a theme, via the theme class instance or the command line. We will cover both of them with the previously created `seafoam` theme.
+
+- Via the class instance
+
+Each theme instance has a method called `push_to_hub` we can use to upload a theme to the HuggingFace hub.
+
+```python
+seafoam.push_to_hub(repo_name="seafoam",
+                    version="0.0.1",
+					hf_token="<token>")
+```
+
+- Via the command line
+
+First save the theme to disk
+
+```python
+seafoam.dump(filename="seafoam.json")
+```
+
+Then use the `upload_theme` command:
+
+```bash
+upload_theme\
+"seafoam.json"\
+"seafoam"\
+--version "0.0.1"\
+--hf_token "<token>"
+```
+
+In order to upload a theme, you must have a HuggingFace account and pass your [Access Token](https://huggingface.co/docs/huggingface_hub/quick-start#login)
+as the `hf_token` argument. However, if you log in via the [HuggingFace command line](https://huggingface.co/docs/huggingface_hub/quick-start#login) (which comes installed with `gradio`),
+you can omit the `hf_token` argument.
+
+The `version` argument lets you specify a valid [semantic version](https://www.geeksforgeeks.org/introduction-semantic-versioning/) string for your theme.
+That way your users are able to specify which version of your theme they want to use in their apps. This also lets you publish updates to your theme without worrying
+about changing how previously created apps look. The `version` argument is optional. If omitted, the next patch version is automatically applied.
+
+### Theme Previews
+
+By calling `push_to_hub` or `upload_theme`, the theme assets will be stored in a [HuggingFace space](https://huggingface.co/docs/hub/spaces-overview).
+
+The theme preview for our seafoam theme is here: [seafoam preview](https://huggingface.co/spaces/gradio/seafoam).
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-seafoam.hf.space?__theme=light"
+	frameborder="0"
+></iframe>
+</div>
+
+### Discovering Themes
+
+The [Theme Gallery](https://huggingface.co/spaces/gradio/theme-gallery) shows all the public gradio themes. After publishing your theme,
+it will automatically show up in the theme gallery after a couple of minutes.
+
+You can sort the themes by the number of likes on the space and from most to least recently created as well as toggling themes between light and dark mode.
+
+<div class="wrapper">
+<iframe
+	src="https://gradio-theme-gallery.static.hf.space"
+	frameborder="0"
+></iframe>
+</div>
+
+### Downloading
+
+To use a theme from the hub, use the `from_hub` method on the `ThemeClass` and pass it to your app:
+
+```python
+my_theme = gr.Theme.from_hub("gradio/seafoam")
+
+with gr.Blocks(theme=my_theme) as demo:
+    ....
+```
+
+You can also pass the theme string directly to `Blocks` or `Interface` (`gr.Blocks(theme="gradio/seafoam")`)
+
+You can pin your app to an upstream theme version by using semantic versioning expressions.
+
+For example, the following would ensure the theme we load from the `seafoam` repo was between versions `0.0.1` and `0.1.0`:
+
+```python
+with gr.Blocks(theme="gradio/seafoam@>=0.0.1,<0.1.0") as demo:
+    ....
+```
+
+Enjoy creating your own themes! If you make one you're proud of, please share it with the world by uploading it to the hub!
+If you tag us on [Twitter](https://twitter.com/gradio) we can give your theme a shout out!
+
+<style>
+.wrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 25px;
+    height: 0;
+}
+.wrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>

js/_website/src/lib/templates/gradio/other/NO_RELOAD.svx

@@ -0,0 +1,29 @@
+
+<script lang="ts">
+    import CopyButton from "$lib/components/CopyButton.svelte";
+</script>
+
+<!--- Title -->
+# NO_RELOAD
+
+<!--- Usage -->
+```python
+if gr.NO_RELOAD:
+```
+
+<!--- Description -->
+### Description
+## Any code in a `if gr.NO_RELOAD` code-block will not be re-evaluated when the source file is reloaded. This is helpful for importing modules that do not like to be reloaded (tiktoken, numpy) as well as database connections and long running set up code.
+
+<!-- Example Usage --> 
+
+### Example Usage
+```python
+import gradio as gr
+
+if gr.NO_RELOAD:
+	from transformers import pipeline
+	pipe = pipeline("text-classification", model="cardiffnlp/twitter-roberta-base-sentiment-latest")
+
+gr.Interface.from_pipeline(pipe).launch()
+```

js/_website/src/lib/templates/process_json.ts

@@ -0,0 +1,27 @@
+import docs_json from "./docs.json";
+
+let docs: { [key: string]: any } = docs_json.docs;
+
+export function get_object(name: string) {
+	let obj: any;
+	if (name === "events" || name === "events_matrix") {
+		obj = docs["gradio"][name];
+		return obj;
+	}
+	for (const library in docs) {
+		for (const key in docs[library]) {
+			if (key === name && key !== "chatinterface") {
+				obj = docs[library][key];
+				break;
+			} else {
+				for (const o in docs[library][key]) {
+					if (o === name) {
+						obj = docs[library][key][o];
+						break;
+					}
+				}
+			}
+		}
+	}
+	return obj;
+}

js/_website/src/lib/templates/python-client/gradio_client/01_introduction.svx

@@ -0,0 +1,350 @@
+<script lang="ts">
+    import CopyButton from "$lib/components/CopyButton.svelte";
+</script>
+
+# Python Client
+
+## The lightweight Gradio client libraries make it easy to use any Gradio app as an API. We currently support both a Python client library as well as a JavaScript client library.
+
+## The Python client library is gradio_client. It's included in the latest versions of the gradio package, but for a more lightweight experience, you can install it using pip without having to install gradio:
+
+```bash
+pip install gradio_client
+```
+
+# Getting Started with the Gradio Python client
+
+
+## The Gradio Python client makes it very easy to use any Gradio app as an API. As an example, consider this [Hugging Face Space that transcribes audio files](https://huggingface.co/spaces/abidlabs/whisper) that are recorded from the microphone.
+
+![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/whisper-screenshot.jpg)
+
+## Using the `gradio_client` library, we can easily use the Gradio as an API to transcribe audio files programmatically.
+
+## Here's the entire code to do it:
+
+```python
+from gradio_client import Client, file
+
+client = Client("abidlabs/whisper")
+
+client.predict(
+    audio=file("audio_sample.wav")
+)
+
+>> "This is a test of the whisper speech recognition model."
+```
+
+The Gradio client works with any hosted Gradio app! Although the Client is mostly used with apps hosted on [Hugging Face Spaces](https://hf.space), your app can be hosted anywhere, such as your own server.
+
+**Prerequisites**: To use the Gradio client, you do _not_ need to know the `gradio` library in great detail. However, it is helpful to have general familiarity with Gradio's concepts of input and output components.
+
+### Installation
+
+If you already have a recent version of `gradio`, then the `gradio_client` is included as a dependency. But note that this documentation reflects the latest version of the `gradio_client`, so upgrade if you're not sure!
+
+The lightweight `gradio_client` package can be installed from pip (or pip3) and is tested to work with **Python versions 3.9 or higher**:
+
+```bash
+$ pip install --upgrade gradio_client
+```
+
+### Connecting to a Gradio App on Hugging Face Spaces
+
+Start by connecting instantiating a `Client` object and connecting it to a Gradio app that is running on Hugging Face Spaces.
+
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/en2fr")  # a Space that translates from English to French
+```
+
+You can also connect to private Spaces by passing in your HF token with the `hf_token` parameter. You can get your HF token here: https://huggingface.co/settings/tokens
+
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/my-private-space", hf_token="...")
+```
+
+
+### Duplicating a Space for private use
+
+While you can use any public Space as an API, you may get rate limited by Hugging Face if you make too many requests. For unlimited usage of a Space, simply duplicate the Space to create a private Space,
+and then use it to make as many requests as you'd like!
+
+The `gradio_client` includes a class method: `Client.duplicate()` to make this process simple (you'll need to pass in your [Hugging Face token](https://huggingface.co/settings/tokens) or be logged in using the Hugging Face CLI):
+
+```python
+import os
+from gradio_client import Client, file
+
+HF_TOKEN = os.environ.get("HF_TOKEN")
+
+client = Client.duplicate("abidlabs/whisper", hf_token=HF_TOKEN)
+client.predict(file("audio_sample.wav"))
+
+>> "This is a test of the whisper speech recognition model."
+```
+
+If you have previously duplicated a Space, re-running `duplicate()` will _not_ create a new Space. Instead, the Client will attach to the previously-created Space. So it is safe to re-run the `Client.duplicate()` method multiple times.
+
+**Note:** if the original Space uses GPUs, your private Space will as well, and your Hugging Face account will get billed based on the price of the GPU. To minimize charges, your Space will automatically go to sleep after 1 hour of inactivity. You can also set the hardware using the `hardware` parameter of `duplicate()`.
+
+### Connecting a general Gradio app
+
+If your app is running somewhere else, just provide the full URL instead, including the "http://" or "https://". Here's an example of making predictions to a Gradio app that is running on a share URL:
+
+```python
+from gradio_client import Client
+
+client = Client("https://bec81a83-5b5c-471e.gradio.live")
+```
+
+### Inspecting the API endpoints
+
+Once you have connected to a Gradio app, you can view the APIs that are available to you by calling the `Client.view_api()` method. For the Whisper Space, we see the following:
+
+```bash
+Client.predict() Usage Info
+---------------------------
+Named API endpoints: 1
+
+ - predict(audio, api_name="/predict") -> output
+    Parameters:
+     - [Audio] audio: filepath (required)  
+    Returns:
+     - [Textbox] output: str 
+```
+
+We see  that we have 1 API endpoint in this space, and shows us how to use the API endpoint to make a prediction: we should call the `.predict()` method (which we will explore below), providing a parameter `input_audio` of type `str`, which is a `filepath or URL`.
+
+We should also provide the `api_name='/predict'` argument to the `predict()` method. Although this isn't necessary if a Gradio app has only 1 named endpoint, it does allow us to call different endpoints in a single app if they are available.
+
+### The "View API" Page
+
+As an alternative to running the `.view_api()` method, you can click on the "Use via API" link in the footer of the Gradio app, which shows us the same information, along with example usage. 
+
+![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/view-api.png)
+
+The View API page also includes an "API Recorder" that lets you interact with the Gradio UI normally and converts your interactions into the corresponding code to run with the Python Client.
+
+### Making a prediction
+
+The simplest way to make a prediction is simply to call the `.predict()` function with the appropriate arguments:
+
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/en2fr", api_name='/predict')
+client.predict("Hello")
+
+>> Bonjour
+```
+
+If there are multiple parameters, then you should pass them as separate arguments to `.predict()`, like this:
+
+```python
+from gradio_client import Client
+
+client = Client("gradio/calculator")
+client.predict(4, "add", 5)
+
+>> 9.0
+```
+
+It is recommended to provide key-word arguments instead of positional arguments:
+
+
+```python
+from gradio_client import Client
+
+client = Client("gradio/calculator")
+client.predict(num1=4, operation="add", num2=5)
+
+>> 9.0
+```
+
+This allows you to take advantage of default arguments. For example, this Space includes the default value for the Slider component so you do not need to provide it when accessing it with the client.
+
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/image_generator")
+client.predict(text="an astronaut riding a camel")
+```
+
+The default value is the initial value of the corresponding Gradio component. If the component does not have an initial value, but if the corresponding argument in the predict function has a default value of `None`, then that parameter is also optional in the client. Of course, if you'd like to override it, you can include it as well:
+
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/image_generator")
+client.predict(text="an astronaut riding a camel", steps=25)
+```
+
+For providing files or URLs as inputs, you should pass in the filepath or URL to the file enclosed within `gradio_client.file()`. This takes care of uploading the file to the Gradio server and ensures that the file is preprocessed correctly:
+
+```python
+from gradio_client import Client, file
+
+client = Client("abidlabs/whisper")
+client.predict(
+    audio=file("https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3")
+)
+
+>> "My thought I have nobody by a beauty and will as you poured. Mr. Rochester is serve in that so don't find simpus, and devoted abode, to at might in a r—"
+```
+
+### Running jobs asynchronously
+
+Oe should note that `.predict()` is a _blocking_ operation as it waits for the operation to complete before returning the prediction.
+
+In many cases, you may be better off letting the job run in the background until you need the results of the prediction. You can do this by creating a `Job` instance using the `.submit()` method, and then later calling `.result()` on the job to get the result. For example:
+
+```python
+from gradio_client import Client
+
+client = Client(space="abidlabs/en2fr")
+job = client.submit("Hello", api_name="/predict")  # This is not blocking
+
+# Do something else
+
+job.result()  # This is blocking
+
+>> Bonjour
+```
+
+### Adding callbacks
+
+Alternatively, one can add one or more callbacks to perform actions after the job has completed running, like this:
+
+```python
+from gradio_client import Client
+
+def print_result(x):
+    print("The translated result is: {x}")
+
+client = Client(space="abidlabs/en2fr")
+
+job = client.submit("Hello", api_name="/predict", result_callbacks=[print_result])
+
+# Do something else
+
+>> The translated result is: Bonjour
+
+```
+
+### Status
+
+The `Job` object also allows you to get the status of the running job by calling the `.status()` method. This returns a `StatusUpdate` object with the following attributes: `code` (the status code, one of a set of defined strings representing the status. See the `utils.Status` class), `rank` (the current position of this job in the queue), `queue_size` (the total queue size), `eta` (estimated time this job will complete), `success` (a boolean representing whether the job completed successfully), and `time` (the time that the status was generated).
+
+```py
+from gradio_client import Client
+
+client = Client(src="gradio/calculator")
+job = client.submit(5, "add", 4, api_name="/predict")
+job.status()
+
+>> <Status.STARTING: 'STARTING'>
+```
+
+_Note_: The `Job` class also has a `.done()` instance method which returns a boolean indicating whether the job has completed.
+
+### Cancelling Jobs
+
+The `Job` class also has a `.cancel()` instance method that cancels jobs that have been queued but not started. For example, if you run:
+
+```py
+client = Client("abidlabs/whisper")
+job1 = client.submit(file("audio_sample1.wav"))
+job2 = client.submit(file("audio_sample2.wav"))
+job1.cancel()  # will return False, assuming the job has started
+job2.cancel()  # will return True, indicating that the job has been canceled
+```
+
+If the first job has started processing, then it will not be canceled. If the second job
+has not yet started, it will be successfully canceled and removed from the queue.
+
+### Generator Endpoints
+
+Some Gradio API endpoints do not return a single value, rather they return a series of values. You can get the series of values that have been returned at any time from such a generator endpoint by running `job.outputs()`:
+
+```py
+from gradio_client import Client
+
+client = Client(src="gradio/count_generator")
+job = client.submit(3, api_name="/count")
+while not job.done():
+    time.sleep(0.1)
+job.outputs()
+
+>> ['0', '1', '2']
+```
+
+Note that running `job.result()` on a generator endpoint only gives you the _first_ value returned by the endpoint.
+
+The `Job` object is also iterable, which means you can use it to display the results of a generator function as they are returned from the endpoint. Here's the equivalent example using the `Job` as a generator:
+
+```py
+from gradio_client import Client
+
+client = Client(src="gradio/count_generator")
+job = client.submit(3, api_name="/count")
+
+for o in job:
+    print(o)
+
+>> 0
+>> 1
+>> 2
+```
+
+You can also cancel jobs that that have iterative outputs, in which case the job will finish as soon as the current iteration finishes running.
+
+```py
+from gradio_client import Client
+import time
+
+client = Client("abidlabs/test-yield")
+job = client.submit("abcdef")
+time.sleep(3)
+job.cancel()  # job cancels after 2 iterations
+```
+
+### Demos with Session State
+
+Gradio demos can include [session state](https://www.gradio.app/guides/state-in-blocks), which provides a way for demos to persist information from user interactions within a page session.
+
+For example, consider the following demo, which maintains a list of words that a user has submitted in a `gr.State` component. When a user submits a new word, it is added to the state, and the number of previous occurrences of that word is displayed:
+
+```python
+import gradio as gr
+
+def count(word, list_of_words):
+    return list_of_words.count(word), list_of_words + [word]
+
+with gr.Blocks() as demo:
+    words = gr.State([])
+    textbox = gr.Textbox()
+    number = gr.Number()
+    textbox.submit(count, inputs=[textbox, words], outputs=[number, words])
+    
+demo.launch()
+```
+
+If you were to connect this this Gradio app using the Python Client, you would notice that the API information only shows a single input and output:
+
+```csv
+Client.predict() Usage Info
+---------------------------
+Named API endpoints: 1
+
+ - predict(word, api_name="/count") -> value_31
+    Parameters:
+     - [Textbox] word: str (required)  
+    Returns:
+     - [Number] value_31: float 
+```
+
+That is because the Python client handles state automatically for you -- as you make a series of requests, the returned state from one request is stored internally and automatically supplied for the subsequent request. If you'd like to reset the state, you can do that by calling `Client.reset_session()`.

js/_website/src/lib/templates/python-client/gradio_client/client.svx

@@ -0,0 +1,68 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("client");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio_client.Client(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+### Example usage
+```python
+from gradio_client import Client
+
+client = Client("abidlabs/whisper-large-v2")  # connecting to a Hugging Face Space
+client.predict("test.mp4", api_name="/predict")
+>> What a nice recording! # returns the result of the remote API call
+
+client = Client("https://bec81a83-5b5c-471e.gradio.live")  # connecting to a temporary Gradio share URL
+job = client.submit("hello", api_name="/predict")  # runs the prediction in a background thread
+job.result()
+>> 49 # returns the result of the remote API call (blocking call)
+```
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/templates/python-client/gradio_client/job.svx

@@ -0,0 +1,55 @@
+
+<script lang="ts">
+    import {get_object} from "../../process_json.ts";
+    import ParamTable from "$lib/components/ParamTable.svelte";
+    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
+    import DemosSection from "$lib/components/DemosSection.svelte";
+    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
+    import GuidesSection from "$lib/components/GuidesSection.svelte";
+    import CopyButton from "$lib/components/CopyButton.svelte";
+    import { style_formatted_text } from "$lib/text";
+
+    let obj = get_object("job");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio_client.Job(···)
+```
+
+<!--- Description -->
+### Description
+## {@html style_formatted_text(obj.description)}
+
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
+
+
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
+
+{#if obj.demos && obj.demos.length > 0}
+<!--- Demos -->
+### Demos 
+<DemosSection demos={obj.demos} />
+{/if}
+
+{#if obj.fns && obj.fns.length > 0}
+<!--- Event Listeners -->
+### Event Listeners 
+<FunctionsSection fns={obj.fns} event_listeners={true} />
+{/if}
+
+{#if obj.guides && obj.guides.length > 0}
+<!--- Guides -->
+### Guides
+<GuidesSection guides={obj.guides}/>
+{/if}

js/_website/src/lib/text.ts

@@ -2,7 +2,8 @@ const regex_italic = /\*(.*?)\*/g;
 const regex_code = /`(.*?)`/g;
 const regex_curly_brackets = /\{(.*?)\}/g;
 
-export function style_formatted_text(formatted_text: string): string {
+export function style_formatted_text(formatted_text: string | null): string {
+	if (!formatted_text) return "";
 	return formatted_text
 		.replace(regex_italic, "<em class='italic font-semibold'>$1</em>")
 		.replace(

js/_website/src/routes/[[version]]/docs/+layout.server.ts

@@ -1,6 +1,7 @@
 import { redirect } from "@sveltejs/kit";
 import version from "$lib/json/version.json";
 import wheel from "$lib/json/wheel.json";
+
 export const prerender = true;
 
 const DOCS_BUCKET = "https://gradio-docs-json.s3.us-west-2.amazonaws.com";
@@ -26,35 +27,27 @@ export async function load({ params, url }) {
 		params?.version === "main"
 			? await load_main_docs()
 			: await load_release_docs(params.version || VERSION);
+	await load_main_docs();
 
 	let docs: { [key: string]: any } = docs_json.docs;
-	let components = docs_json.docs.components;
-	let helpers = docs_json.docs.helpers;
-	let modals = docs_json.docs.modals || [];
-	let routes = docs_json.docs.routes;
-	let py_client = docs_json.docs["py-client"];
 	let js = docs_json.js || {};
 	let js_pages = docs_json.js_pages || [];
 	let js_client = docs_json.js_client;
 	let on_main = params.version === "main";
 	let wheel: string = WHEEL;
-	let pages: string[] = docs_json.pages;
+	let pages: any = docs_json.pages;
 
 	let url_version = params?.version || VERSION;
 
 	return {
 		docs,
-		components,
-		helpers,
-		modals,
-		routes,
-		py_client,
 		js,
 		js_pages,
 		on_main,
 		wheel,
 		pages,
 		js_client,
-		url_version
+		url_version,
+		VERSION
 	};
 }

js/_website/src/routes/[[version]]/docs/+page.svelte

@@ -143,36 +143,34 @@
 				(TypeScript) from the browser or server-side.
 			</div>
 		</a>
-		{#if $page.params?.version !== "3.50.2"}
-			<a
-				href="./docs/js"
-				target="_self"
-				class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
-					.COLOR_SETS[3]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
-			>
-				<div class="relative mb-2 flex items-center text-lg font-semibold">
-					<span>Javascript Components</span>
-				</div>
-				<div class="relative pr-4 text-lg font-light">
-					Use Gradio's UI components in standalone JavaScript applications
-					outside of the Gradio environment.
-				</div>
-			</a>
-			<a
-				href="../guides/custom-components-in-five-minutes"
-				target="_self"
-				class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
-					.COLOR_SETS[5]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
-			>
-				<div class="relative mb-2 flex items-center text-lg font-semibold">
-					<span>Custom Components</span>
-				</div>
-				<div class="relative pr-4 text-lg font-light">
-					Create, use, and share your own custom components within a Gradio
-					application.
-				</div>
-			</a>
-		{/if}
+		<a
+			href="./docs/js"
+			target="_self"
+			class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
+				.COLOR_SETS[3]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
+		>
+			<div class="relative mb-2 flex items-center text-lg font-semibold">
+				<span>Javascript Components</span>
+			</div>
+			<div class="relative pr-4 text-lg font-light">
+				Use Gradio's UI components in standalone JavaScript applications outside
+				of the Gradio environment.
+			</div>
+		</a>
+		<a
+			href="../guides/custom-components-in-five-minutes"
+			target="_self"
+			class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
+				.COLOR_SETS[5]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
+		>
+			<div class="relative mb-2 flex items-center text-lg font-semibold">
+				<span>Custom Components</span>
+			</div>
+			<div class="relative pr-4 text-lg font-light">
+				Create, use, and share your own custom components within a Gradio
+				application.
+			</div>
+		</a>
 		<a
 			href="../guides/gradio-lite"
 			target="_self"

js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.server.ts

@@ -1,198 +0,0 @@
-import Prism from "prismjs";
-import "prismjs/components/prism-python";
-import { make_slug_processor } from "$lib/utils";
-import { error } from "@sveltejs/kit";
-import { style_formatted_text } from "$lib/text";
-
-let language = "python";
-
-const COLOR_SETS = [
-	["from-green-100", "to-green-50"],
-	["from-yellow-100", "to-yellow-50"],
-	["from-red-100", "to-red-50"],
-	["from-blue-100", "to-blue-50"],
-	["from-pink-100", "to-pink-50"],
-	["from-purple-100", "to-purple-50"]
-];
-
-export async function load({ params, parent }) {
-	const {
-		docs,
-		components,
-		helpers,
-		modals,
-		py_client,
-		routes,
-		on_main,
-		wheel,
-		pages,
-		url_version
-	} = await parent();
-
-	let name = params.doc;
-	let obj;
-	let mode;
-	let headers = [];
-	let method_headers = [];
-	const get_slug = make_slug_processor();
-
-	if (!pages.some((p: string) => p === params.doc)) {
-		throw error(404);
-	}
-
-	for (const key in docs) {
-		for (const o in docs[key]) {
-			if (docs[key][o].name) {
-				docs[key][o].slug = get_slug(docs[key][o].name);
-			}
-
-			if (docs[key][o].fns && docs[key][o].fns.length) {
-				docs[key][o].fns.forEach((fn: any) => {
-					if (fn.name) fn.slug = get_slug(`${docs[key][o].name} ${fn.name}`);
-				});
-			}
-			if (o == name) {
-				obj = docs[key][o];
-				mode = key;
-
-				if (obj.name == "Interface") {
-					obj.next_obj = "ChatInterface";
-				} else if (obj.name == "ChatInterface") {
-					obj.prev_obj = "Interface";
-					obj.next_obj = "TabbedInterface";
-				} else if (obj.name == "TabbedInterface") {
-					obj.prev_obj = "ChatInterface";
-					obj.next_obj = "Blocks";
-				} else if (obj.name == "Blocks") {
-					obj.prev_obj = "TabbedInterface";
-					obj.next_obj = "Row";
-				}
-
-				if ("description" in obj) {
-					headers.push(["Description", "description"]);
-					obj.description = style_formatted_text(obj.description);
-				}
-
-				if ("demos" in obj) {
-					obj.demos.forEach((demo: string[]) => {
-						demo.push(
-							Prism.highlight(demo[1], Prism.languages[language], "python")
-						);
-					});
-				}
-
-				if ("preprocess" in obj && "postprocess" in obj) {
-					obj.preprocess.return_doc.doc = style_formatted_text(
-						obj.preprocess.return_doc.doc
-					);
-					obj.postprocess.parameter_doc[0].doc = style_formatted_text(
-						obj.postprocess.parameter_doc[0].doc
-					);
-
-					let preprocess_code_snippet = Prism.highlight(
-						`def predict(
-	value: ${obj.preprocess.return_doc.annotation}
-)
-	...`,
-						Prism.languages[language],
-						"python"
-					);
-
-					let postprocess_code_snippet = Prism.highlight(
-						`def predict(···) -> ${obj.postprocess.parameter_doc[0].annotation}
-	...	
-	return value`,
-						Prism.languages[language],
-						"python"
-					);
-					obj.preprocess_code_snippet = preprocess_code_snippet;
-					obj.postprocess_code_snippet = postprocess_code_snippet;
-				}
-
-				if (obj.example) {
-					obj.highlighted_example = Prism.highlight(
-						obj.example,
-						Prism.languages[language],
-						"python"
-					);
-					headers.push(["Example Usage", "example-usage"]);
-				}
-				if (mode === "components") {
-					headers.push(["Behavior", "behavior"]);
-				}
-				if (
-					(obj.parameters.length > 0 && obj.parameters[0].name != "self") ||
-					obj.parameters.length > 1
-				) {
-					headers.push(["Initialization", "initialization"]);
-				}
-				if (mode === "components" && obj.string_shortcuts) {
-					headers.push(["Shortcuts", "shortcuts"]);
-				}
-
-				if ("demos" in obj) {
-					headers.push(["Demos", "demos"]);
-				}
-
-				if ("fns" in obj && obj.fns.length > 0) {
-					if (mode === "components") {
-						headers.push(["Event Listeners", "event-listeners"]);
-					} else {
-						headers.push(["Methods", "methods"]);
-						for (const fn of obj.fns) {
-							method_headers.push([fn.name, fn.slug]);
-							if (fn.example) {
-								fn.highlighted_example = Prism.highlight(
-									fn.example,
-									Prism.languages[language],
-									"python"
-								);
-							}
-						}
-					}
-					for (const fn of obj.fns) {
-						if ("description" in fn) {
-							fn.description = style_formatted_text(fn.description);
-						}
-						if (fn.parameters.length > 0) {
-							for (const param of fn.parameters) {
-								if (param.doc) {
-									param.doc = style_formatted_text(param.doc);
-								}
-							}
-						}
-					}
-				}
-				if ("tags" in obj) {
-					if ("events" in obj.tags) {
-						obj.tags.events = style_formatted_text(obj.tags.events);
-					}
-				}
-				if (obj.parameters.length > 0) {
-					for (const param of obj.parameters) {
-						if (param.doc) {
-							param.doc = style_formatted_text(param.doc);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	return {
-		name,
-		obj,
-		mode,
-		components,
-		helpers,
-		modals,
-		routes,
-		py_client,
-		COLOR_SETS,
-		headers,
-		method_headers,
-		on_main,
-		wheel,
-		url_version
-	};
-}

js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte

@@ -1,71 +1,95 @@
 <script lang="ts">
-	import Demos from "$lib/components/Demos.svelte";
 	import DocsNav from "$lib/components/DocsNav.svelte";
-	import FunctionDoc from "$lib/components/FunctionDoc.svelte";
-	import EventListeners from "$lib/components/EventListeners.svelte";
 	import MetaTags from "$lib/components/MetaTags.svelte";
-	import anchor from "$lib/assets/img/anchor.svg";
-	import { onDestroy, onMount } from "svelte";
+	import { onDestroy } from "svelte";
 	import { page } from "$app/stores";
-	import { afterNavigate } from "$app/navigation";
 
 	export let data: any = {};
 
 	let name: string = data.name;
-	let obj = data.obj;
-	let mode = data.mode;
-	let components = data.components;
-	let helpers = data.helpers;
-	let modals = data.modals;
-	let routes = data.routes;
-	let py_client = data.py_client;
 	let on_main: boolean;
 	let wheel: string = data.wheel;
 	let url_version: string = data.url_version;
 
-	let headers: [string, string][];
-	let method_headers: [string, string][];
-	$: headers = data.headers;
-	$: method_headers = data.method_headers;
-
-	let current_selection = 0;
-
 	let y: number;
 	let header_targets: { [key: string]: HTMLElement } = {};
 	let target_elem: HTMLElement;
-
+	let module = data.module.default;
+	$: module = data.module.default;
 	onDestroy(() => {
 		header_targets = {};
 	});
 
+	let current_target: HTMLElement;
+
 	$: for (const target in header_targets) {
 		target_elem = document.querySelector(`#${target}`) as HTMLElement;
 		if (
 			y > target_elem?.offsetTop - 50 &&
 			y < target_elem?.offsetTop + target_elem?.offsetHeight
 		) {
-			header_targets[target]?.classList.add("current-nav-link");
-		} else {
-			header_targets[target]?.classList.remove("current-nav-link");
-		}
+			current_target = header_targets[target];
+			current_target.classList.add("current-nav-link");
+			Object.values(header_targets).forEach((target) => {
+				if (target !== current_target && target) {
+					target.classList.remove("current-nav-link");
+				}
+			});
+		} 
 	}
 
-	$: obj = data.obj;
-	$: mode = data.mode;
+	$: name = data.name;
 	$: on_main = data.on_main;
-	$: components = data.components;
-	$: helpers = data.helpers;
-	$: modals = data.modals;
-	$: routes = data.routes;
-	$: py_client = data.py_client;
 	$: url_version = data.url_version;
+	$: pages = data.pages.gradio;
+	$: page_path = data.page_path;
+
+	$: flattened_pages = pages.map((category: any) => category.pages).flat();
+	$: prev_obj =
+	flattened_pages[
+		flattened_pages.findIndex((page: any) => page.name === $page.params?.doc) - 1
+		];
+	$: next_obj =
+		flattened_pages[
+			flattened_pages.findIndex((page: any) => page.name === $page.params?.doc) + 1
+		];
+
+
+	let component_name = $page.params?.doc;
+
+	$: component_name = $page.params?.doc;
+	
+	function get_headers() {
+		let headers : any[] = []
+		const h3_elements = document.querySelectorAll('h3');
+		h3_elements.forEach((element) => {
+			headers.push({ title: element.textContent, id: element.id });
+	});
+		const page_title_elem = document.querySelector('h1');
+		let page_title = {title: "", id: ""}
+		if (page_title_elem) {
+			page_title_elem.id = page_title_elem?.textContent?.toLowerCase().replace(/ /g, "-") || "";
+			page_title = {title: page_title_elem?.textContent || "", id: page_title_elem.id};
+		}
+		return { headers: headers, page_title: page_title};
+	}
+	
+	var all_headers : {headers: any[], page_title: {title: string, id: string}} = {headers: [], page_title: {title: "", id: ""}};
+
+	var dynamic_component: any = null;
+
+	$: if (dynamic_component) {
+		all_headers = get_headers();
+	}
+
+
 </script>
 
 <MetaTags
-	title={"Gradio " + obj.name + " Docs"}
+	title={"Gradio " + all_headers.page_title.title + " Docs"}
 	url={$page.url.pathname}
 	canonical={$page.url.pathname}
-	description={obj.description}
+	description={"Gradio docs for using " + all_headers.page_title.title}
 />
 
 <svelte:window bind:scrollY={y} />
@@ -73,12 +97,8 @@
 <main class="container mx-auto px-4 flex gap-4">
 	<div class="flex w-full">
 		<DocsNav
-			current_nav_link={obj.name.toLowerCase()}
-			{components}
-			{helpers}
-			{modals}
-			{routes}
-			{py_client}
+			current_nav_link={name}
+			library_pages={pages}
 		/>
 
 		<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
@@ -117,26 +137,26 @@
 			{/if}
 
 			<div class="flex justify-between mt-4 lg:ml-10">
-				{#if obj.prev_obj}
+				{#if prev_obj}
 					<a
-						href="./{obj.prev_obj.toLowerCase()}"
+						href="./{prev_obj.name}"
 						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 					>
 						<div class="text-lg">
 							<span class="text-orange-500">&#8592;</span>
-							{obj.prev_obj.replace("-", " ")}
+							{prev_obj.pretty_name}
 						</div>
 					</a>
 				{:else}
 					<div />
 				{/if}
-				{#if obj.next_obj}
+				{#if next_obj}
 					<a
-						href="./{obj.next_obj.toLowerCase()}"
+						href="./{next_obj.name}"
 						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 					>
 						<div class="text-lg">
-							{obj.next_obj.replace("-", " ")}
+							{next_obj.pretty_name}
 							<span class="text-orange-500">&#8594;</span>
 						</div>
 					</a>
@@ -145,428 +165,63 @@
 				{/if}
 			</div>
 
-			<div class="flex flex-row">
-				<div class="lg:ml-10">
-					<div class="obj" id={obj.slug}>
-						<div class="flex flex-row items-center justify-between">
-							<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
-								{obj.name}
-								<a
-									href="#{obj.slug}-header"
-									class="invisible group-hover-visible"
-									><img class="anchor-img" src={anchor} /></a
-								>
-							</h3>
+				<div class="flex flex-row">
+					<div class="lg:ml-10 w-full">
+						<div class="obj">
+							<svelte:component this={module} bind:this={dynamic_component}/>
 						</div>
-
-						<div class="codeblock">
-							{#if obj.override_signature}
-								<pre><code class="code language-python"
-										>{obj.override_signature}</code
-									></pre>
-							{:else}
-								<pre><code class="code language-python"
-										>{obj.parent}.<span>{obj.name}&lpar;</span
-										><!--
-                -->{#each obj.parameters as param}<!--
-                  -->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
-                    -->{param.name}, <!--
-                  -->{/if}<!--
-                -->{/each}<!--  
-                -->···<span
-											>&rpar;</span
-										></code
-									></pre>
-							{/if}
-						</div>
-
-						<div id="description">
-							<h4 class="mt-8 text-xl text-orange-500 font-light group">
-								Description
-								<a href="#description" class="invisible group-hover-visible"
-									><img class="anchor-img-small" src={anchor} /></a
-								>
-							</h4>
-							<p class="mb-2 text-lg">{@html obj.description}</p>
-						</div>
-
-						{#if mode === "components"}
-							{#if "preprocess" in obj}
-								<div id="behavior">
-									<h4 class="mt-4 text-xl text-orange-500 font-light group">
-										Behavior
-										<a href="#behavior" class="invisible group-hover-visible"
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<p class="text-lg mb-2">
-										<span class="font-semibold">As input component:</span>
-										{@html obj.preprocess.return_doc.doc}
-									</p>
-									<p class="text-md text-gray-500 -mb-1">
-										Your function should accept one of these types:
-									</p>
-									<div class="codeblock">
-										<pre><code class="code language-python"
-												>{@html obj.preprocess_code_snippet}</code
-											></pre>
-									</div>
-
-									<p class="text-lg my-2">
-										<span class="font-semibold">As output component:</span>
-										{@html obj.postprocess.parameter_doc[0].doc}
-									</p>
-									<p class="text-md text-gray-500 -mb-1">
-										Your function should return one of these types:
-									</p>
-									<div class="codeblock">
-										<pre><code class="code language-python"
-												>{@html obj.postprocess_code_snippet}</code
-											></pre>
-									</div>
-									{#if obj.tags.events && obj.tags.events.length > 0}
-										<p class="text-lg text-gray-500">
-											<span class="text-gray-700">Supported events:</span>
-											<em>{@html obj.tags.events}</em>
-										</p>
-									{/if}
-								</div>
-							{:else}
-								<div id="behavior">
-									<h4 class="mt-4 text-xl text-orange-500 font-light group">
-										Behavior
-										<a href="#behavior" class="invisible group-hover-visible"
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<p class="text-lg text-gray-500">
-										<span class="text-gray-700">As input: </span>
-										{@html obj.tags.preprocessing}
-									</p>
-									<p class="text-lg text-gray-500">
-										<span class="text-gray-700">As output:</span>
-										{@html obj.tags.postprocessing}
-									</p>
-									{#if obj.tags.examples_format}
-										<p class="text-lg text-gray-500">
-											<span class="text-gray-700"
-												>Format expected for examples:</span
-											>
-											{@html obj.tags.examples_format}
-										</p>
-									{/if}
-									{#if obj.tags.events && obj.tags.events.length > 0}
-										<p class="text-lg text-gray-500">
-											<span class="text-gray-700">Supported events:</span>
-											<em>{@html obj.tags.events}</em>
-										</p>
-									{/if}
-								</div>
-							{/if}
-						{/if}
-
-						{#if obj.example}
-							<div id="example-usage">
-								<h4 class="mt-4 text-xl text-orange-500 font-light group">
-									Example Usage
-									<a href="#example-usage" class="invisible group-hover-visible"
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<div class="codeblock">
-									<pre><code class="code language-python"
-											>{@html obj.highlighted_example}</code
-										></pre>
-								</div>
-							</div>
-						{/if}
-
-						{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
-							<div id="initialization">
-								<h4 class="mt-6 text-xl text-orange-500 font-light group">
-									Initialization
-									<a
-										href="#initialization"
-										class="invisible group-hover-visible"
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<table class="table-fixed w-full leading-loose">
-									<thead class="text-left">
-										<tr>
-											<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold"
-												>Parameter</th
-											>
-											<th class="px-3 pb-3 text-gray-700 font-semibold"
-												>Description</th
-											>
-										</tr>
-									</thead>
-									<tbody
-										class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
-									>
-										{#each obj.parameters as param}
-											{#if param["name"] != "self"}
-												<tr
-													class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
-												>
-													<td class="p-3 w-2/5 break-words">
-														<code class="block">
-															{param["name"]}
-														</code>
-														<p class="text-gray-500 italic">
-															{param["annotation"]}
-														</p>
-														{#if "default" in param}
-															<p class="text-gray-500 font-semibold">
-																default: {param["default"]}
-															</p>
-														{:else if !("kwargs" in param)}
-															<p class="text-orange-600 font-semibold italic">
-																required
-															</p>
-														{/if}
-													</td>
-													<td class="p-3 text-gray-700 break-words">
-														<p>{@html param["doc"] || ""}</p>
-													</td>
-												</tr>
-											{/if}
-										{/each}
-									</tbody>
-								</table>
-							</div>
-						{/if}
-
-						{#if mode === "components" && obj.string_shortcuts}
-							<div id="shortcuts">
-								<h4 class="mt-6 text-xl text-orange-500 font-light group">
-									Shortcuts
-									<a href="#shortcuts" class="invisible group-hover-visible"
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<table class="mb-4 table-fixed w-full">
-									<thead class="text-left">
-										<tr>
-											<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
-												>Class</th
-											>
-											<th class="px-3 pb-3 text-gray-700 font-semibold"
-												>Interface String Shortcut</th
-											>
-											<th class="px-3 pb-3 text-gray-700 font-semibold"
-												>Initialization</th
-											>
-										</tr>
-									</thead>
-									<tbody
-										class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
-									>
-										{#each obj.string_shortcuts as shortcut}
-											<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
-												<td class="p-3 w-2/5 break-words">
-													<p>
-														<code class="lang-python">gradio.{shortcut[0]}</code
-														>
-													</p>
-												</td>
-												<td class="p-3 w-2/5 break-words">
-													<p>"{shortcut[1]}"</p>
-												</td>
-												<td class="p-3 text-gray-700 break-words">
-													{shortcut[2]}
-												</td>
-											</tr>
-										{/each}
-									</tbody>
-								</table>
-							</div>
-						{/if}
-
-						{#if obj.demos}
-							<div id="demos">
-								<div class="category my-8" id="examples">
-									<h4 class="text-xl text-orange-500 font-light group">
-										Demos
-										<a href="#demos" class="invisible group-hover-visible"
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<div>
-										<div class="demo-window overflow-y-auto h-full w-full mb-4">
-											<div
-												class="relative mx-auto my-auto rounded-md bg-white"
-												style="top: 5%; height: 90%"
-											>
-												<div class="flex overflow-auto pt-4">
-													{#each obj.demos as demo, i}
-														<button
-															on:click={() => (current_selection = i)}
-															class:selected-demo-tab={current_selection == i}
-															class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
-															name={demo[0]}>{demo[0]}</button
-														>
-													{/each}
-												</div>
-												{#each obj.demos as demo, i}
-													<div
-														class:hidden={current_selection !== i}
-														class:selected-demo-window={current_selection == i}
-														class="demo-content px-4"
-													>
-														<Demos
-															name={demo[0]}
-															code={demo[1]}
-															highlighted_code={demo[2]}
-															{url_version}
-														/>
-													</div>
-												{/each}
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						{/if}
-
-						{#if obj.fns && obj.fns.length > 0}
-							{#if mode === "components"}
-								<div id="event-listeners">
-									<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
-										Event Listeners
-										<a
-											href="#event-listeners"
-											class="invisible group-hover-visible"
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<div class="flex flex-col gap-8 pl-12">
-										<EventListeners fns={obj.fns} />
-										<div class="ml-12" />
-									</div>
-								</div>
-							{:else}
-								<div id="methods">
-									<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
-										Methods
-										<a href="#methods" class="invisible group-hover-visible"
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<div class="flex flex-col gap-8 pl-12">
-										{#each obj.fns as fn}
-											<FunctionDoc {fn} />
-										{/each}
-										<div class="ml-12" />
-									</div>
-								</div>
-							{/if}
-						{/if}
-
-						{#if obj.guides && obj.guides.length > 0}
-							<div id="guides">
-								<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
-									Guides
-									<a href="#guides" class="invisible group-hover-visible"
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-
-								<div
-									class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
-								>
-									{#each obj.guides as guide, i}
-										<a
-											class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
-												.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
-											target="_blank"
-											href="../..{guide.url}"
-										>
-											<div class="flex flex-col p-4 h-min">
-												<p class="group-hover:underline text-l">
-													{guide.pretty_name}
-												</p>
-											</div>
-										</a>
-									{/each}
-								</div>
-							</div>
-						{/if}
 					</div>
 				</div>
-			</div>
 
-			<div class="lg:ml-10 flex justify-between my-4">
-				{#if obj.prev_obj}
-					<a
-						href="./{obj.prev_obj.toLowerCase()}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-					>
-						<div class="text-lg">
-							<span class="text-orange-500">&#8592;</span>
-							{obj.prev_obj.replace("-", " ")}
-						</div>
-					</a>
-				{:else}
-					<div />
-				{/if}
-				{#if obj.next_obj}
-					<a
-						href="./{obj.next_obj.toLowerCase()}"
-						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-					>
-						<div class="text-lg">
-							{obj.next_obj.replace("-", " ")}
-							<span class="text-orange-500">&#8594;</span>
-						</div>
-					</a>
-				{:else}
-					<div />
-				{/if}
-			</div>
+
+				<div class="flex justify-between mt-4 lg:ml-10">
+					{#if prev_obj}
+						<a
+							href="./{prev_obj.name}"
+							class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						>
+							<div class="text-lg">
+								<span class="text-orange-500">&#8592;</span>
+								{prev_obj.pretty_name}
+							</div>
+						</a>
+					{:else}
+						<div />
+					{/if}
+					{#if next_obj}
+						<a
+							href="./{next_obj.name}"
+							class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						>
+							<div class="text-lg">
+								{next_obj.pretty_name}
+								<span class="text-orange-500">&#8594;</span>
+							</div>
+						</a>
+					{:else}
+						<div />
+					{/if}
+				</div>
 		</div>
 
 		<div
 			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12"
 		>
 			<div class="mx-8">
-				<a class="thin-link py-2 block text-lg" href="#{obj.slug}">{obj.name}</a
+				<a class="thin-link py-2 block text-lg" href="#{all_headers.page_title.id}">{all_headers.page_title.title}</a
 				>
-				{#if headers.length > 0}
+				{#if all_headers.headers && all_headers.headers.length > 0}
 					<ul class="text-slate-700 text-lg leading-6">
-						{#each headers as header}
+						{#each all_headers.headers as header}
 							<li>
 								<a
-									bind:this={header_targets[header[1]]}
-									href="#{header[1]}"
+									bind:this={header_targets[header.id]}
+									href="#{header.id}"
 									class="thin-link block py-2 font-light second-nav-link"
-									>{header[0]}</a
+									>{header.title}</a
 								>
 							</li>
 						{/each}
-						{#if method_headers.length > 0}
-							{#each method_headers as method_header}
-								<li class="">
-									<a
-										bind:this={header_targets[method_header[1]]}
-										href="#{method_header[1]}"
-										class="thin-link block py-2 font-light second-nav-link sub-link"
-										>&nbsp&nbsp&nbsp&nbsp{method_header[0]}</a
-									>
-								</li>
-							{/each}
-						{/if}
-						{#if obj.guides && obj.guides.length > 0}
-							<li>
-								<a
-									bind:this={header_targets["guides"]}
-									href="#guides"
-									class="thin-link block py-2 font-light second-nav-link"
-									>Guides</a
-								>
-							</li>
-						{/if}
 					</ul>
 				{/if}
 			</div>

js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.ts

@@ -0,0 +1,49 @@
+import { error } from "@sveltejs/kit";
+
+export async function load({ params, parent }) {
+    const {
+        on_main,
+        wheel,
+        pages,
+        url_version,
+        VERSION
+    } = await parent();
+
+    const modules : any = import.meta.glob("/src/lib/templates*/gradio/**/*.svx");
+    let name = params.doc;
+    let page_path : string | null = null;
+
+    for (const category of pages.gradio) {
+        for (const page of category.pages) {
+            if (page.name === name) {
+                page_path = page.path;
+            }
+        }
+    }
+
+    if (page_path === null) {
+        throw error(404);
+    }
+
+    let version_append = on_main ? "/" : "_" + VERSION.replace(/\./g, "-") + "/";
+
+    let module;
+
+    for (const path in modules) {
+        if (path.includes(page_path) && path.includes("templates" + version_append)) {
+            module = await modules[path]();
+        }
+    }
+
+
+
+    return {
+        name,
+        on_main,
+        wheel,
+        url_version,
+        pages,
+        page_path,
+        module
+    };
+    }

js/_website/src/routes/[[version]]/docs/gradio/components/+page.server.ts

@@ -1,26 +0,0 @@
-export async function load({ parent }) {
-	const {
-		docs,
-		components,
-		helpers,
-		modals,
-		py_client,
-		routes,
-		on_main,
-		wheel
-	} = await parent();
-
-	let events = docs.events;
-	let events_matrix = docs.events_matrix;
-	return {
-		components,
-		helpers,
-		modals,
-		routes,
-		py_client,
-		events,
-		events_matrix,
-		on_main,
-		wheel
-	};
-}

js/_website/src/routes/[[version]]/docs/gradio/components/+page.svelte

@@ -1,200 +0,0 @@
-<script lang="ts">
-	import DocsNav from "$lib/components/DocsNav.svelte";
-	import MetaTags from "$lib/components/MetaTags.svelte";
-	import dataflow_svg from "$lib/assets/img/dataflow.svg";
-	import { page } from "$app/stores";
-
-	export let data;
-
-	let components = data.components;
-	let helpers = data.helpers;
-	let modals = data.modals;
-	let routes = data.routes;
-	let events = data.events;
-	let events_matrix = data.events_matrix;
-	let py_client = data.py_client;
-
-	let on_main: boolean;
-	let wheel: string = data.wheel;
-
-	$: on_main = data.on_main;
-	$: components = data.components;
-	$: helpers = data.helpers;
-	$: modals = data.modals;
-	$: routes = data.routes;
-	$: py_client = data.py_client;
-</script>
-
-<MetaTags
-	title={"Gradio Component Docs"}
-	url={$page.url.pathname}
-	canonical={$page.url.pathname}
-	description={"Gradio includes pre-built components that can be used as inputs or outputs in your Interface or Blocks with a single line of code."}
-/>
-
-<main class="container mx-auto px-4 flex gap-4">
-	<div class="flex w-full">
-		<DocsNav
-			current_nav_link={"components"}
-			{components}
-			{helpers}
-			{modals}
-			{routes}
-			{py_client}
-		/>
-
-		<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
-			<div>
-				<p
-					class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
-				>
-					New to Gradio? Start here: <a class="link" href="/quickstart"
-						>Getting Started</a
-					>
-				</p>
-				<p
-					class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
-				>
-					See the <a class="link" href="/changelog">Release History</a>
-				</p>
-			</div>
-
-			{#if on_main}
-				<div
-					class="bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4 rounded-lg lg:ml-10"
-				>
-					<p class="my-2">
-						To install Gradio from main, run the following command:
-					</p>
-					<div class="codeblock">
-						<pre class="language-bash" style="padding-right: 50px;"><code
-								class="language-bash">pip install {wheel}</code
-							></pre>
-					</div>
-					<p class="float-right text-sm">
-						*Note: Setting <code style="font-size: 0.85rem">share=True</code> in
-						<code style="font-size: 0.85rem">launch()</code> will not work.
-					</p>
-				</div>
-			{/if}
-
-			<div class="lg:ml-10 flex justify-between mt-4">
-				<a
-					href="./accordion"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Accordion
-					</div>
-				</a>
-				<a
-					href="./annotatedimage"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						AnnotatedImage <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-			<div class="flex flex-row">
-				<div class="lg:w-full lg:ml-10 lg:pr-10">
-					<div class="obj" id="components">
-						<h2
-							id="components-header"
-							class="text-4xl font-light mb-2 pt-2 text-orange-500"
-						>
-							Components
-						</h2>
-
-						<p class="mt-8 mb-2 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>
-
-						<p class="mt-2 text-lg">
-							Consider an example with three inputs &lpar;Textbox, Number, and
-							Image&rpar; and two outputs &lpar;Number and Gallery&rpar;, below
-							is a diagram of what our preprocessing will send to the function
-							and what our postprocessing will require from it.
-						</p>
-
-						<img src={dataflow_svg} class="mt-4" />
-
-						<p class="mt-2 text-lg">
-							Components also come with certain events that they support. These
-							are methods that are triggered with user actions. Below is a table
-							showing which events are supported for each component. All events
-							are also listed &lpar;with parameters&rpar; in the component's
-							docs.
-						</p>
-					</div>
-
-					<div class="max-h-96 overflow-y-scroll my-6">
-						<table class="table-fixed leading-loose">
-							<thead class="text-center sticky top-0">
-								<tr>
-									<th class="p-3 bg-white w-1/5 sticky left-0" />
-									{#each events as event}
-										<th class="p-3 font-normal bg-white border-t border-l"
-											>{event}</th
-										>
-									{/each}
-								</tr>
-							</thead>
-							<tbody
-								class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
-							>
-								{#each Object.entries(components) as [name, obj] (name)}
-									<tr class="group hover:bg-gray-200/60">
-										<th
-											class="p-3 w-1/5 bg-white sticky z-2 left-0 font-normal"
-										>
-											<a href={obj.name.toLowerCase()} class="thin-link"
-												>{obj.name}</a
-											>
-										</th>
-										{#each events as event}
-											<td class="p-3 text-gray-700 break-words text-center">
-												{#if events_matrix[obj.name].includes(event.toLowerCase())}
-													<p class="text-orange-500">&#10003;</p>
-												{:else}
-													<p class="text-gray-300">&#10005;</p>
-												{/if}
-											</td>
-										{/each}
-									</tr>
-								{/each}
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-			<div class="lg:ml-10 flex justify-between my-4">
-				<a
-					href="./accordion"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Accordion
-					</div>
-				</a>
-				<a
-					href="./annotatedimage"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						AnnotatedImage <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-		</div>
-		<div
-			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
-		></div>
-	</div>
-</main>