Skip to content

Commit

Permalink
Support Bash in Api Recorder (#8460)
Browse files Browse the repository at this point in the history 
* add bash to api recorder

* formatting

* add changeset

* fix copy bug

* remove current_language from api banner

* add changeset

* use awk and read

* separate over multiple lines

* fix line spacing

* update guide

* changes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
  • Loading branch information
@aliabd @gradio-pr-bot @abidlabs
3 people authored Jun 5, 2024
1 parent 48eeea4 commit 8628899
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 85 deletions.
6 changes: 6 additions & 0 deletions .changeset/empty-moons-stick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/app": patch
"gradio": patch
---

feat:Support Bash in Api Recorder
3 changes: 2 additions & 1 deletion .config/.prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,5 @@ sweep.yaml
**/playwright/.cache/**/*
**/theme/src/pollen.css
**/venv/**
../js/app/src/api_docs/CodeSnippet.svelte
../js/app/src/api_docs/CodeSnippet.svelte
../js/app/src/api_docs/RecordingSnippet.svelte
27 changes: 20 additions & 7 deletions guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,34 @@ $ curl -X POST https://abidlabs-en2fr.hf.space/call/predict -H "Content-Type: ap
"data": ["Hello, my friend."]
}'

> {"event_id": $EVENT_ID}
>> {"event_id": $EVENT_ID}
```

```bash
$ curl -N https://abidlabs-en2fr.hf.space/call/predict/$EVENT_ID

> event: complete
> data: ["Bonjour, mon ami."]
>> event: complete
>> data: ["Bonjour, mon ami."]
```


Tip: making a prediction and getting a result requires two `curl` requests: a `POST` and a `GET`. The `POST` request returns an `EVENT_ID` and prints it to the console , which is used in the second `GET` request to fetch the results. We'll cover these two steps in more detail in the Guide below.
Note: making a prediction and getting a result requires two `curl` requests: a `POST` and a `GET`. The `POST` request returns an `EVENT_ID` and prints it to the console, which is used in the second `GET` request to fetch the results. You can combine these into a single command using `awk` and `read` to parse the results of the first command and pipe into the second, like this:

```bash
$ curl -X POST https://abidlabs-en2fr.hf.space/call/predict -H "Content-Type: application/json" -d '{
"data": ["Hello, my friend."]
}' \
| awk -F'"' '{ print $4}' \
| read EVENT_ID; curl -N https://abidlabs-en2fr.hf.space/call/predict/$EVENT_ID

>> event: complete
>> data: ["Bonjour, mon ami."]
```

In the rest of this Guide, we'll explain these two steps in more detail and provide additional examples of querying Gradio apps with `curl`.


**Prerequisites**: For this Guide, 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.
**Prerequisites**: For this Guide, you do _not_ need to know how to build Gradio apps in great detail. However, it is helpful to have general familiarity with Gradio's concepts of input and output components.

## Installation

Expand Down Expand Up @@ -90,7 +103,7 @@ Here:
When you make this `POST` request successfully, you will get an event id that is printed to the terminal in this format:

```bash
> {"event_id": $EVENT_ID}
>> {"event_id": $EVENT_ID}
```

This `EVENT_ID` will be needed in the subsequent `curl` request to fetch the results of the prediction.
Expand Down Expand Up @@ -129,7 +142,7 @@ $ curl -X POST https://private-space.hf.space/call/predict -H "Content-Type: app

**Files**

If your Gradio application requires file inputs, you can pass in files as URLs through `curl`. The URL needs to be enclosed in a dictionary in this format:
If you are using `curl` to query a Gradio application that requires file inputs, the files *need* to be provided as URLs, and The URL needs to be enclosed in a dictionary in this format:

```bash
{"path": $URL}
Expand Down
17 changes: 7 additions & 10 deletions js/app/src/api_docs/ApiBanner.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
export let root: string;
export let api_count: number;
export let current_language: "python" | "javascript" | "bash";
const dispatch = createEventDispatcher();
</script>
Expand All @@ -22,15 +21,13 @@
<span class="counts">
<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}<br
/>
{#if current_language !== "bash"}
<Button
size="sm"
variant="primary"
on:click={() => dispatch("close", { api_recorder_visible: true })}
>
🪄 API Recorder
</Button>
{/if}
<Button
size="sm"
variant="primary"
on:click={() => dispatch("close", { api_recorder_visible: true })}
>
🪄 API Recorder
</Button>
</span>
</h2>

Expand Down
61 changes: 36 additions & 25 deletions js/app/src/api_docs/ApiDocs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"https://www.gradio.app/guides/getting-started-with-the-js-client";
const py_docs =
"https://www.gradio.app/guides/getting-started-with-the-python-client";
const bash_docs =
"https://www.gradio.app/guides/querying-gradio-apps-with-curl";
const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
let api_count = dependencies.filter(
Expand Down Expand Up @@ -95,12 +97,7 @@
{#if info}
{#if api_count}
<div class="banner-wrap">
<ApiBanner
on:close
root={space_id || root}
{api_count}
{current_language}
/>
<ApiBanner on:close root={space_id || root} {api_count} />
</div>

<div class="docs-wrap">
Expand All @@ -123,7 +120,7 @@
</li>
{/each}
</div>
{#if api_calls.length && current_language !== "bash"}
{#if api_calls.length}
<div>
<p
id="num-recorded-api-calls"
Expand Down Expand Up @@ -158,9 +155,12 @@
{:else}
<p class="padded">
{#if current_language == "python" || current_language == "javascript"}
1. Install the <span style="text-transform:capitalize"
>{current_language}</span
> client if you don't already have it installed.
1. Install the
<span style="text-transform:capitalize">{current_language}</span>
client (<a
href={current_language == "python" ? py_docs : js_docs}
target="_blank">docs</a
>) if you don't already have it installed.
{:else}
1. Confirm that you have cURL installed on your system.
{/if}
Expand All @@ -174,27 +174,34 @@
placeholder values with your own input data.
{#if space_id}If this is a private Space, you may need to pass your
Hugging Face token as well (<a
href={(current_language == "python" ? py_docs : js_docs) +
spaces_docs_suffix}
href={current_language == "python"
? py_docs + spaces_docs_suffix
: current_language == "javascript"
? js_docs + spaces_docs_suffix
: bash_docs}
class="underline"
target="_blank">read more</a
>).{/if}
{#if current_language == "bash"}Note: making a prediction and
getting a result requires <strong>2 requests</strong>: a

Or
<Button
size="sm"
variant="primary"
on:click={() => dispatch("close", { api_recorder_visible: true })}
>
🪄 Use the API Recorder
</Button>
to automatically generate your API requests.
{#if current_language == "bash"}<br />&nbsp;<br />Note: making a
prediction and getting a result requires
<strong>2 requests</strong>: a
<code>POST</code>
and a <code>GET</code> request. The <code>POST</code> request
returns an <code>EVENT_ID</code>, which is used in the second
<code>GET</code> request to fetch the results.
{:else}Or
<Button
size="sm"
variant="primary"
on:click={() =>
dispatch("close", { api_recorder_visible: true })}
>
🪄 Use the API Recorder
</Button>
to automatically generate your API requests.
<code>GET</code> request to fetch the results. In these snippets,
we've used <code>awk</code> and <code>read</code> to parse the
results, combining these two requests into one command for ease of
use. See <a href={bash_docs} target="_blank">curl docs</a>.
{/if}

<!-- <span
Expand Down Expand Up @@ -369,4 +376,8 @@
border-radius: var(--size-1);
cursor: pointer;
}
code {
font-size: var(--text-md);
}
</style>
21 changes: 4 additions & 17 deletions js/app/src/api_docs/CodeSnippet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,6 @@ const result = await client.predict({#if named}<span class="api-name"
>, <!--
--><span class="desc"
><!--
--> // blob <!--
-->in '{label}' <!--
-->{component} component<!--
--></span
><!--
-->{:else}<!--
Expand Down Expand Up @@ -138,25 +135,15 @@ console.log(result.data);
</div>

<div bind:this={bash_post_code}>
<pre>curl -X POST {root}call/{dependency.api_name} -H "Content-Type: application/json" -d '{"{"}
<pre>curl -X POST {root}call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
<!--
-->{represent_value(example_input, python_type.type, "bash")}{#if i < endpoint_parameters.length - 1},
{/if}
{/each}
]{"}"}'</pre>
</div>
</code>
</Block>

<Block>
<code>
<div class="copy">
<CopyButton code={bash_get_code?.innerText}></CopyButton>
</div>

<div bind:this={bash_get_code}>
<pre>curl -N {root}call/{dependency.api_name}/$EVENT_ID </pre>
]{"}"}' \
| awk -F'"' '{"{"} print $4{"}"}' \
| read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID</pre>
</div>
</code>
</Block>
Expand Down
Loading

0 comments on commit 8628899

Please sign in to comment.