From ee0f39aafa2c325db3d29040150dfeda2618755b Mon Sep 17 00:00:00 2001 From: aliabd Date: Tue, 4 Jun 2024 20:48:13 -0700 Subject: [PATCH 01/11] add bash to api recorder --- js/app/src/api_docs/ApiDocs.svelte | 17 +++---- js/app/src/api_docs/RecordingSnippet.svelte | 49 ++++++++++++++++----- 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte index cfcffe40671f3..2062d795f2959 100644 --- a/js/app/src/api_docs/ApiDocs.svelte +++ b/js/app/src/api_docs/ApiDocs.svelte @@ -123,7 +123,7 @@ {/each} - {#if api_calls.length && current_language !== "bash"} + {#if api_calls.length}

read more).{/if} - {#if current_language == "bash"}Note: making a prediction and - getting a result requires 2 requests: a - POST - and a GET request. The POST request - returns an EVENT_ID, which is used in the second - GET request to fetch the results. - {:else}Or + + Or

From 089b6d84634318de9ad6a750d48a6c7808835bb5 Mon Sep 17 00:00:00 2001 From: aliabd Date: Tue, 4 Jun 2024 21:41:31 -0700 Subject: [PATCH 05/11] remove current_language from api banner --- js/app/src/api_docs/ApiBanner.svelte | 1 - js/app/src/api_docs/ApiDocs.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/js/app/src/api_docs/ApiBanner.svelte b/js/app/src/api_docs/ApiBanner.svelte index f1b6ae8d60dbb..9507ea678dc2f 100644 --- a/js/app/src/api_docs/ApiBanner.svelte +++ b/js/app/src/api_docs/ApiBanner.svelte @@ -6,7 +6,6 @@ export let root: string; export let api_count: number; - export let current_language: "python" | "javascript" | "bash"; const dispatch = createEventDispatcher(); diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte index e7e221b1474f4..25585c7ffcda5 100644 --- a/js/app/src/api_docs/ApiDocs.svelte +++ b/js/app/src/api_docs/ApiDocs.svelte @@ -99,7 +99,6 @@ on:close root={space_id || root} {api_count} - {current_language} /> From 48a524b33fda29fe4efbcaef6dc64f9debea5c9c Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Wed, 5 Jun 2024 11:07:15 +0000 Subject: [PATCH 06/11] add changeset --- .changeset/empty-moons-stick.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/empty-moons-stick.md b/.changeset/empty-moons-stick.md index 7fbecf082f841..586026c0b0907 100644 --- a/.changeset/empty-moons-stick.md +++ b/.changeset/empty-moons-stick.md @@ -1,6 +1,6 @@ --- -"@gradio/app": minor -"gradio": minor +"@gradio/app": patch +"gradio": patch --- feat:Support Bash in Api Recorder From cb6e3a36cc87af42f40970e792ae060688719cdf Mon Sep 17 00:00:00 2001 From: aliabd Date: Wed, 5 Jun 2024 09:26:47 -0700 Subject: [PATCH 07/11] use awk and read --- js/app/src/api_docs/ApiDocs.svelte | 6 +----- js/app/src/api_docs/CodeSnippet.svelte | 16 ++-------------- js/app/src/api_docs/RecordingSnippet.svelte | 8 ++------ 3 files changed, 5 insertions(+), 25 deletions(-) diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte index 25585c7ffcda5..c11f8beda217e 100644 --- a/js/app/src/api_docs/ApiDocs.svelte +++ b/js/app/src/api_docs/ApiDocs.svelte @@ -95,11 +95,7 @@ {#if info} {#if api_count}
diff --git a/js/app/src/api_docs/CodeSnippet.svelte b/js/app/src/api_docs/CodeSnippet.svelte index a367ee9bddf9f..3fc2381deac60 100644 --- a/js/app/src/api_docs/CodeSnippet.svelte +++ b/js/app/src/api_docs/CodeSnippet.svelte @@ -138,25 +138,13 @@ console.log(result.data);
- 
curl -X POST {root}call/{dependency.api_name} -H "Content-Type: application/json" -d '{"{"}
+					
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}
-]{"}"}'

-
- - - - - -
- -
- -
- 
curl -N {root}call/{dependency.api_name}/$EVENT_ID
+]{"}"}' | awk -F'"' '{"{"} print $4{"}"}' | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID
diff --git a/js/app/src/api_docs/RecordingSnippet.svelte b/js/app/src/api_docs/RecordingSnippet.svelte index 09ad3a2de9ed7..f987a85b566ac 100644 --- a/js/app/src/api_docs/RecordingSnippet.svelte +++ b/js/app/src/api_docs/RecordingSnippet.svelte @@ -169,12 +169,8 @@ client.
{#each bash_zipped as { call, api_name }} - 
EVENT_ID=$(
-curl -X POST {short_root}call/{api_name} -s -H "Content-Type: application/json" -d '{"{"} 
-	"data": [{call}]{"}"}' | jq -r '.event_id'
-)
- 
curl -N {short_root}call/{api_name}/$EVENT_ID 
-
+ 
curl -X POST {short_root}call/{api_name} -s -H "Content-Type: application/json" -d '{"{"} 
+	"data": [{call}]{"}"}' | awk -F'"' '{"{"} print $4{"}"}' | read EVENT_ID; curl -N {short_root}call/{api_name}/$EVENT_ID

{/each}
From 23c189e26741c6c02b43f71ad12ba77783f038ff Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Wed, 5 Jun 2024 15:34:37 -0700 Subject: [PATCH 08/11] separate over multiple lines --- js/app/src/api_docs/CodeSnippet.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/app/src/api_docs/CodeSnippet.svelte b/js/app/src/api_docs/CodeSnippet.svelte index 3fc2381deac60..76d00aab8b0ad 100644 --- a/js/app/src/api_docs/CodeSnippet.svelte +++ b/js/app/src/api_docs/CodeSnippet.svelte @@ -144,7 +144,9 @@ console.log(result.data); -->{represent_value(example_input, python_type.type, "bash")}{#if i < endpoint_parameters.length - 1}, {/if} {/each} -]{"}"}' | awk -F'"' '{"{"} print $4{"}"}' | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID +]{"}"}' \ + | awk -F'"' '{"{"} print $4{"}"}' \ + | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID From 7c9143385af94315b456b64eb72003d4664d79e0 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Wed, 5 Jun 2024 15:37:49 -0700 Subject: [PATCH 09/11] fix line spacing --- .config/.prettierignore | 3 ++- js/app/src/api_docs/RecordingSnippet.svelte | 11 ++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.config/.prettierignore b/.config/.prettierignore index 34269d0901340..40c07570847cf 100644 --- a/.config/.prettierignore +++ b/.config/.prettierignore @@ -30,4 +30,5 @@ sweep.yaml **/playwright/.cache/**/* **/theme/src/pollen.css **/venv/** -../js/app/src/api_docs/CodeSnippet.svelte \ No newline at end of file +../js/app/src/api_docs/CodeSnippet.svelte +../js/app/src/api_docs/RecordingSnippet.svelte \ No newline at end of file diff --git a/js/app/src/api_docs/RecordingSnippet.svelte b/js/app/src/api_docs/RecordingSnippet.svelte index f987a85b566ac..2f0300e6a005b 100644 --- a/js/app/src/api_docs/RecordingSnippet.svelte +++ b/js/app/src/api_docs/RecordingSnippet.svelte @@ -151,13 +151,12 @@ client. 
import { Client } from "@gradio/client";
 
-					const app = await Client.connect("{short_root}""{short_root}");
 					{#each js_zipped as { call, api_name }}
-					await client.predict(
-						"/{api_name}"
+  "/{api_name}"{#if call},{/if}{call});
 						{/each}
@@ -170,7 +169,9 @@ client. {#each bash_zipped as { call, api_name }} 
curl -X POST {short_root}call/{api_name} -s -H "Content-Type: application/json" -d '{"{"} 
-	"data": [{call}]{"}"}' | awk -F'"' '{"{"} print $4{"}"}' | read EVENT_ID; curl -N {short_root}call/{api_name}/$EVENT_ID
+ "data": [{call}]{"}"}' \ + | awk -F'"' '{"{"} print $4{"}"}' \ + | read EVENT_ID; curl -N {short_root}call/{api_name}/$EVENT_ID
{/each} From cc2bf5879252b78cc0c3160ee6bd25014d228684 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Wed, 5 Jun 2024 16:04:26 -0700 Subject: [PATCH 10/11] update guide --- .../03_querying-gradio-apps-with-curl.md | 23 ++++++++++--- js/app/src/api_docs/ApiDocs.svelte | 32 ++++++++++++++----- js/app/src/api_docs/CodeSnippet.svelte | 3 -- 3 files changed, 42 insertions(+), 16 deletions(-) diff --git a/guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md b/guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md index e8be790f56456..f1f9599a06b45 100644 --- a/guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md +++ b/guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md @@ -15,18 +15,31 @@ $ 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."] +``` + + +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."] ``` -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. **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. @@ -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. diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte index c11f8beda217e..cc5f3bb53e90d 100644 --- a/js/app/src/api_docs/ApiDocs.svelte +++ b/js/app/src/api_docs/ApiDocs.svelte @@ -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( @@ -153,9 +155,12 @@ {:else}

{#if current_language == "python" || current_language == "javascript"} - 1. Install the {current_language} client if you don't already have it installed. + 1. Install the + {current_language} + client (docs) if you don't already have it installed. {:else} 1. Confirm that you have cURL installed on your system. {/if} @@ -169,8 +174,11 @@ 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 (read more).{/if} @@ -184,12 +192,16 @@ 🪄 Use the API Recorder to automatically generate your API requests. - {#if current_language == "bash"}Note: making a prediction and - getting a result requires 2 requests: a + {#if current_language == "bash"}
 
Note: making a + prediction and getting a result requires + 2 requests: a POST and a GET request. The POST request returns an EVENT_ID, which is used in the second - GET request to fetch the results. + GET request to fetch the results. In these snippets, + we've used awk and read to parse the + results, combining these two requests into one command for ease of + use. See curl docs. {/if} // blob in '{label}' {component} component{:else}