Support Bash in Api Recorder

.changeset/empty-moons-stick.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+feat:Support Bash in Api Recorder 

.config/.prettierignore

@@ -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

guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md

@@ -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
 
@@ -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. 
@@ -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}

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();
 </script>
@@ -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>
 

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(
@@ -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">
@@ -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"
@@ -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}
@@ -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
@@ -369,4 +376,8 @@
 		border-radius: var(--size-1);
 		cursor: pointer;
 	}
+
+	code {
+		font-size: var(--text-md);
+	}
 </style>

js/app/src/api_docs/CodeSnippet.svelte

@@ -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}<!--
@@ -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>