Improve design of api recorder (#8473)

* better api recorder buttons * better banner * formatting * add changeset * add changeset * fix functional tests --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Jun 6, 2024 · 8ca93d4 · 8ca93d4
1 parent d5a9604
commit 8ca93d4
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 28 deletions.
diff --git a/.changeset/pink-bananas-sleep.md b/.changeset/pink-bananas-sleep.md
@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+feat:Improve design of api recorder 
diff --git a/js/app/src/api_docs/ApiBanner.svelte b/js/app/src/api_docs/ApiBanner.svelte
@@ -12,22 +12,26 @@
 
 <h2>
 	<img src={api_logo} alt="" />
-	<div>
+	<div class="title">
 		API documentation
 		<div class="url">
 			{root}
 		</div>
 	</div>
 	<span class="counts">
-		<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}<br
-		/>
 		<Button
 			size="sm"
-			variant="primary"
+			variant="secondary"
+			elem_id="start-api-recorder"
 			on:click={() => dispatch("close", { api_recorder_visible: true })}
 		>
-			🪄 API Recorder
+			<div class="loading-dot self-baseline"></div>
+			<p class="self-baseline btn-text">API Recorder</p>
 		</Button>
+		<p>
+			<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}<br
+			/>
+		</p>
 	</span>
 </h2>
 
@@ -83,5 +87,32 @@
 		margin-left: auto;
 		color: var(--body-text-color);
 		font-weight: var(--weight-light);
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 12px;
+		height: 12px;
+		border-radius: 6px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		margin-right: 0.3rem;
+	}
+
+	.self-baseline {
+		align-self: baseline;
+	}
+	.title {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+	.btn-text {
+		font-size: var(--text-lg);
 	}
 </style>
diff --git a/js/app/src/api_docs/ApiDocs.svelte b/js/app/src/api_docs/ApiDocs.svelte
@@ -126,7 +126,9 @@
 							id="num-recorded-api-calls"
 							style="font-size: var(--text-lg); font-weight:bold; margin: 10px 0px;"
 						>
-							🪄 Recorded API Calls ({api_calls.length})
+							🪄 Recorded API Calls <span class="api-count"
+								>[{api_calls.length}]</span
+							>
 						</p>
 						<p>
 							Here is the code snippet to replay the most recently recorded API
@@ -183,13 +185,14 @@
 								target="_blank">read more</a
 							>).{/if}
 
-						Or
+						Or use the
 						<Button
 							size="sm"
-							variant="primary"
+							variant="secondary"
 							on:click={() => dispatch("close", { api_recorder_visible: true })}
 						>
-							🪄 Use the API Recorder
+							<div class="loading-dot"></div>
+							<p class="self-baseline">API Recorder</p>
 						</Button>
 						to automatically generate your API requests.
 						{#if current_language == "bash"}<br />&nbsp;<br />Note: making a
@@ -380,4 +383,29 @@
 	code {
 		font-size: var(--text-md);
 	}
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 10px;
+		height: 10px;
+		border-radius: 5px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		margin-right: 0.25rem;
+	}
+	:global(.docs-wrap .sm.secondary) {
+		padding-top: 1px;
+		padding-bottom: 1px;
+	}
+	.self-baseline {
+		align-self: baseline;
+	}
+	.api-count {
+		font-weight: bold;
+		color: #fd7b00;
+		align-self: baseline;
+		font-family: var(--font-mono);
+		font-size: var(--text-md);
+	}
 </style>
diff --git a/js/app/src/api_docs/ApiRecorder.svelte b/js/app/src/api_docs/ApiRecorder.svelte
@@ -1,33 +1,75 @@
 <script lang="ts">
 	import type { Payload, Dependency } from "../types";
+	import Button from "../../../button/shared/Button.svelte";
 
 	export let api_calls: Payload[] = [];
 	export let dependencies: Dependency[];
 </script>
 
 <div id="api-recorder">
-	🟠 <span class="message">Recording API Calls...</span>
-	({api_calls.length}) {#if api_calls.length > 0}
-		| <span class="api-name"
-			>/{dependencies[api_calls[api_calls.length - 1].fn_index].api_name}</span
-		>
-	{/if}
+	<Button size="sm" variant="secondary">
+		<div class="loading-dot self-baseline"></div>
+		<p class="self-baseline">Recording API Calls:</p>
+		<p class="self-baseline api-section">
+			<span class="api-count">
+				[{api_calls.length}]
+			</span>
+			{#if api_calls.length > 0}
+				<span class="api-name"
+					>/{dependencies[api_calls[api_calls.length - 1].fn_index]
+						.api_name}</span
+				>
+			{/if}
+		</p>
+	</Button>
 </div>
 
 <style>
-	#api-recorder {
-		border: 1px solid var(--color-accent);
-		background-color: var(--color-accent-soft);
-		padding: 0px var(--size-2);
-		border-radius: var(--size-1);
-		cursor: pointer;
-		color: var(--body-text-color);
+	.api-name {
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+		color: #fd7b00;
 	}
-	.message {
-		font-style: italic;
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 10px;
+		height: 10px;
+		border-radius: 5px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		animation: loading-dot 2s infinite linear;
+		animation-delay: 0.25s;
+		margin-left: 0.25rem;
+		margin-right: 0.5rem;
 	}
-	.api-name {
-		font-size: var(--text-md);
+	:global(.docs-wrap .sm.secondary) {
+		padding-top: 1px;
+		padding-bottom: 1px;
+	}
+	.self-baseline {
+		align-self: baseline;
+	}
+	@keyframes loading-dot {
+		0% {
+			box-shadow: 9999px 0 0 -1px;
+		}
+		50% {
+			box-shadow: 9999px 0 0 2px;
+		}
+		100% {
+			box-shadow: 9999px 0 0 -1px;
+		}
+	}
+	.api-count {
+		font-weight: bold;
+		color: #fd7b00;
+		align-self: baseline;
 		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+	}
+	.api-section {
+		margin-left: 4px;
 	}
 </style>
diff --git a/js/app/test/test_chatinterface_streaming_echo.spec.ts b/js/app/test/test_chatinterface_streaming_echo.spec.ts
@@ -71,12 +71,12 @@ test("the api recorder correctly records the api calls", async ({ page }) => {
 	await textbox.fill("hi");
 
 	await page.getByRole("button", { name: "Use via API logo" }).click();
-	await page.getByRole("button", { name: "🪄 Use the API Recorder" }).click();
+	await page.locator("#start-api-recorder").click();
 	await submit_button.click();
 	await expect(textbox).toHaveValue("");
 	const api_recorder = await page.locator("#api-recorder");
 	await api_recorder.click();
 
 	const num_calls = await page.locator("#num-recorded-api-calls").innerText();
-	await expect(num_calls).toBe("🪄 Recorded API Calls (5)");
+	await expect(num_calls).toBe("🪄 Recorded API Calls [5]");
 });