mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling of parameter tables in the docs (#8618)

Browse Source 
* param table

* add changeset

* add changeset

* format

* add changeset

* styling changes

* rename initialization to parameters

* event listener styling

* remove

* add changeset

* fixes

* format

* changes

* changes

* revert svx

* add changeset

* revert svx

* revert

* changes

* changes

* functiondoc

* undo

* format

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Abubakar Abid 2024-07-16 15:53:04 -07:00 committed by GitHub
parent 7b19474cb2
commit aa4b7a7192
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 85 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/ninety-ravens-care.md Normal file
View File

@ -0,0 +1,7 @@
---
"@gradio/paramviewer": patch
"gradio": patch
"website": patch
---
feat:Improve styling of parameter tables in the docs

1
js/_website/package.json
View File

@ -24,6 +24,7 @@
"type": "module",
"dependencies": {
"@gradio/code": "workspace:^",
"@gradio/paramviewer": "workspace:^",
"@sindresorhus/slugify": "^2.2.0",
"@sveltejs/adapter-vercel": "^5.3.0",
"hast-util-to-string": "^3.0.0",

52
js/_website/src/lib/components/EventListeners.svelte
View File

@ -1,15 +1,16 @@
<script lang="ts">
export let fns: any[];
import { style_formatted_text } from "$lib/text";
import ParamTable from "$lib/components/ParamTable.svelte";
</script>
<div id="event-listeners-description">
<h4 class="mt-8 text-xl text-orange-500 font-light group">Description</h4>
<p class="mb-2 text-lg text-gray-600">
Event listeners allow you to capture and respond to user interactions with
the UI components you've defined in a Gradio Blocks app. When a user
interacts with an element, such as changing a slider value or uploading an
image, a function is called.
Event listeners allow you to respond to user interactions with the UI
components you've defined in a Gradio Blocks app. When a user interacts with
an element, such as changing a slider value or uploading an image, a
function is called.
</p>
</div>
@ -25,7 +26,7 @@
component supports the following event listeners. Each event listener takes the
same parameters, which are listed in the
<a href="#event-listeners-arguments" class="text-orange-500 font-light"
>Event Arguments</a
>Event Parameters</a
> table below.
</p>
@ -62,46 +63,9 @@
class="text-xl text-orange-500 font-light group"
id="event-listener-arguments"
>
Event Arguments
Event Parameters
</h4>
<table class="table-fixed w-full leading-loose">
<thead class="text-left">
<tr>
<th class="px-3 pb-3 font-semibold text-gray-700 w-2/5">Parameter</th>
<th class="px-3 pb-3 font-semibold text-gray-700">Description</th>
</tr>
</thead>
<tbody
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
>
{#each fns[0].parameters as param}
{#if param["name"] != "self"}
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
<td class="p-3 w-2/5 break-words">
<code class="block">
{param["name"]}
</code>
<p class="text-gray-500 italic">
{param["annotation"].replace("Sequence[", "list[")}
</p>
{#if "default" in param}
<p class="text-gray-500 font-semibold">
default: {param["default"]}
</p>
{:else if !("kwargs" in param)}
<p class="text-orange-600 font-semibold italic">required</p>
{/if}
</td>
<td class="p-3 text-gray-700 break-words">
<p>{@html style_formatted_text(param["doc"]) || ""}</p>
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
<ParamTable parameters={fns[0].parameters}></ParamTable>
</div>
<style>

51
js/_website/src/lib/components/FunctionDoc.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
export let fn: any;
import anchor from "../assets/img/anchor.svg";
import { style_formatted_text } from "$lib/text";
import ParamTable from "./ParamTable.svelte";
</script>
<!-- name, signature, description, params -->
@ -78,53 +78,6 @@
{/if}
{#if (fn.parameters.length > 0 && fn.parameters[0].name != "self") || fn.parameters.length > 1}
<h4
class="mt-6 text-xl text-orange-500 font-light group"
id="{fn.name.toLowerCase()}-arguments"
>
Arguments
<a
href="#{fn.name.toLowerCase()}-arguments"
class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<table class="table-fixed w-full leading-loose">
<thead class="text-left">
<tr>
<th class="px-3 pb-3 font-semibold text-gray-700 w-2/5">Parameter</th>
<th class="px-3 pb-3 font-semibold text-gray-700">Description</th>
</tr>
</thead>
<tbody
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
>
{#each fn.parameters as param}
{#if param["name"] != "self"}
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
<td class="p-3 w-2/5 break-words">
<code class="block">
{param["name"]}
</code>
<p class="text-gray-500 italic">
{param["annotation"].replace("Sequence[", "list[")}
</p>
{#if "default" in param}
<p class="text-gray-500 font-semibold">
default: {param["default"]}
</p>
{:else if !("kwargs" in param)}
<p class="text-orange-600 font-semibold italic">required</p>
{/if}
</td>
<td class="p-3 text-gray-700 break-words">
<p>{@html param["doc"] || ""}</p>
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
<ParamTable parameters={fn.parameters} />
{/if}
</div>

4
js/_website/src/lib/components/FunctionsSection.svelte
View File

@ -7,13 +7,13 @@
{#if event_listeners}
{#if fns && fns.length > 0}
<div class="flex flex-col gap-8 pl-12">
<div class="flex flex-col pl-12">
<EventListeners {fns} />
<div class="ml-12" />
</div>
{/if}
{:else}
<div class="flex flex-col gap-8 pl-12">
<div class="flex flex-col pl-12">
{#each fns as fn}
<FunctionDoc {fn} />
{/each}

96
js/_website/src/lib/components/ParamTable.svelte
View File

@ -1,43 +1,61 @@
<script lang="ts">
export let parameters = [] as any[];
import { style_formatted_text } from "$lib/text";
import ParamViewer from "@gradio/paramviewer";
interface OriginalParam {
annotation: string | null;
doc: string;
default?: string | null;
name: string;
}
interface NewParam {
type: string | null;
description: string;
default: string | null;
name?: string;
}
function decode_html_entities(text: string | null): string {
if (text == null) {
return "";
}
const entities: { [key: string]: string } = {
"&quot;": '"',
"&apos;": "'",
"&amp;": "&",
"&lt;": "<",
"&gt;": ">",
"&nbsp;": " ",
"&iexcl;": "¡"
};
const decimal_regex = /&#(\d+);/g;
const hex_regex = /&#x([0-9A-Fa-f]+);/g;
const named_regex = new RegExp(Object.keys(entities).join("|"), "g");
return text
.replace(decimal_regex, (_, code) =>
String.fromCharCode(parseInt(code, 10))
)
.replace(hex_regex, (_, code) => String.fromCharCode(parseInt(code, 16)))
.replace(named_regex, (match) => entities[match]);
}
function convert_params(
original_parameters: OriginalParam[]
): Record<string, NewParam> {
let new_parameters: Record<string, NewParam> = {};
for (let param of original_parameters) {
new_parameters[param.name] = {
type: param.annotation,
description: decode_html_entities(param.doc),
default: param.default || null
};
}
return new_parameters;
}
let new_parameters = convert_params(parameters);
</script>
{#if (parameters.length > 0 && parameters[0].name != "self") || parameters.length > 1}
<table class="table-fixed w-full leading-loose">
<thead class="text-left">
<tr>
<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold">Parameter</th>
<th class="px-3 pb-3 text-gray-700 font-semibold">Description</th>
</tr>
</thead>
<tbody
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
>
{#each parameters as param}
{#if param["name"] != "self"}
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
<td class="p-3 w-2/5 break-words">
<code class="block">
{param["name"]}
</code>
<p class="text-gray-500 italic">
{param["annotation"].replace("Sequence[", "list[")}
</p>
{#if "default" in param}
<p class="text-gray-500 font-semibold">
default: {param["default"]}
</p>
{:else if !("kwargs" in param)}
<p class="text-orange-600 font-semibold italic">required</p>
{/if}
</td>
<td class="p-3 text-gray-700 break-words">
<p>{@html style_formatted_text(param["doc"]) || ""}</p>
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
{/if}
<ParamViewer value={new_parameters} header="Parameters" />

4
js/_website/src/lib/text.ts
View File

@ -8,11 +8,11 @@ export function style_formatted_text(formatted_text: string | null): string {
.replace(regex_italic, "<em class='italic font-semibold'>$1</em>")
.replace(
regex_code,
"<code class='text-orange-500' style='font-family: monospace; font-size: large;'>$1</code>"
"<code class='text-orange-500' style='font-family: monospace; font-size: 0.9em;'>$1</code>"
)
.replace(
regex_curly_brackets,
"<code class='text-orange-500' style='font-family: monospace; font-size: large;'>$1</code>"
"<code class='text-orange-500' style='font-family: monospace; font-size: 0.9em;'>$1</code>"
)
.replace(
/\[(.*?)\]\((.*?)\)/g,

3
js/paramviewer/ParamViewer.svelte
View File

@ -44,6 +44,9 @@
_docs: typeof docs,
lang: "python" | "typescript"
): Param[] {
if (!_docs) {
return [];
}
return Object.entries(_docs).map(
([name, { type, description, default: _default }]) => {
let highlighted_type = type ? highlight(type, lang) : null;

3
pnpm-lock.yaml generated
View File

@ -424,6 +424,9 @@ importers:
'@gradio/code':
specifier: workspace:^
version: link:../code
'@gradio/paramviewer':
specifier: workspace:^
version: link:../paramviewer
'@sindresorhus/slugify':
specifier: ^2.2.0
version: 2.2.0