mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve design of api recorder (#8473)

Browse Source 
* 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>
This commit is contained in:
Ali Abdalla 2024-06-06 05:55:21 -07:00 committed by GitHub
parent d5a9604930
commit 8ca93d45dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 136 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/pink-bananas-sleep.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/app": patch
"gradio": patch
---
feat:Improve design of api recorder

41
js/app/src/api_docs/ApiBanner.svelte
View File

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

36
js/app/src/api_docs/ApiDocs.svelte
View File

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

78
js/app/src/api_docs/ApiRecorder.svelte
View File

@ -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);
}
.message {
font-style: italic;
}
.api-name {
font-size: var(--text-md);
font-size: var(--text-sm);
font-family: var(--font-mono);
color: #fd7b00;
}
.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;
}
: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>

4
js/app/test/test_chatinterface_streaming_echo.spec.ts
View File

@ -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]");
});