Adds docs for gr.api() which were previously missing from the website (#11173)

* changes

* add changeset

* add changeset

* js

---------

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

Author: abidlabs

.changeset/eleven-rabbits-obey.md

@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"website": patch
+---
+
+feat:Adds docs for `gr.api()` which were previously missing from the website

gradio/events.py

@@ -932,13 +932,20 @@ def api(
                 input = gr.Textbox()
                 button = gr.Button("Submit")
             output = gr.Textbox()
-            gr.on(
-                triggers=[button.click, input.submit],
-                fn=lambda x: x,
-                inputs=[input],
-                outputs=[output]
-            )
-        demo.launch()
+            def fn(a: int, b: int, c: list[str]) -> tuple[int, str]:
+                return a + b, c[a:b]
+            gr.api(fn, api_name="add_and_slice")
+        _, url, _ = demo.launch()
+
+        from gradio_client import Client
+        client = Client(url)
+        result = client.predict(
+                a=3,
+                b=5,
+                c=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+                api_name="/add_and_slice"
+        )
+        print(result)
     """
     if fn == "decorator":
 

guides/04_additional-features/14_view-api-page.md

@@ -32,6 +32,40 @@ btn.click(add, [num1, num2], output, api_name=False)
 
 Note: setting an `api_name=False` also means that downstream apps will not be able to load your Gradio app using `gr.load()` as this function uses the Gradio API under the hood.
 
+**Adding API endpoints**
+
+You can also add new API routes to your Gradio application that do not correspond to events in your UI.
+
+For example, in this Gradio applicaiton, we add a new route that adds numbers and slices a list:
+
+```py
+import gradio as gr
+with gr.Blocks() as demo:
+    with gr.Row():
+        input = gr.Textbox()
+        button = gr.Button("Submit")
+    output = gr.Textbox()
+    def fn(a: int, b: int, c: list[str]) -> tuple[int, str]:
+        return a + b, c[a:b]
+    gr.api(fn, api_name="add_and_slice")
+
+_, url, _ = demo.launch()
+```
+
+This will create a new route `/add_and_slice` which will show up in the "view API" page. It can be programmatically called by the Python or JS Clients (discussed below) like this:
+
+```py
+from gradio_client import Client
+
+client = Client(url)
+result = client.predict(
+        a=3,
+        b=5,
+        c=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+        api_name="/add_and_slice"
+)
+print(result)
+```
 
 ## The Clients
 

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

@@ -0,0 +1,76 @@
+
+<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("api");
+</script>
+
+<!--- Title -->
+# {obj.name}
+
+<!--- Usage -->
+```python
+gradio.api(···)
+```
+
+<!--- 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:
+    with gr.Row():
+        input = gr.Textbox()
+        button = gr.Button("Submit")
+    output = gr.Textbox()
+    def fn(a: int, b: int, c: list[str]) -> tuple[int, str]:
+        return a + b, c[a:b]
+    gr.api(fn, api_name="add_and_slice")
+_, url, _ = demo.launch()
+
+from gradio_client import Client
+client = Client(url)
+result = client.predict(
+        a=3,
+        b=5,
+        c=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+        api_name="/add_and_slice"
+)
+print(result)
+```
+{/if}
+
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} anchor_links={obj.name}/>
+
+
+{#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}