gradio

1
<script lang="ts">
2
	import type { ComponentMeta, Dependency } from "../types";
3
	import CopyButton from "./CopyButton.svelte";
4
	import { represent_value, is_potentially_nested_file_data } from "./utils";
5
	import { Block } from "@gradio/atoms";
6
	import EndpointDetail from "./EndpointDetail.svelte";
7

8
	interface EndpointParameter {
9
		label: string;
10
		type: string;
11
		python_type: { type: string };
12
		component: string;
13
		example_input: string;
14
		serializer: string;
15
	}
16

17
	export let dependency: Dependency;
18
	export let dependency_index: number;
19
	export let root: string;
20
	export let dependency_failures: boolean[][];
21
	export let endpoint_parameters: any;
22
	export let js_parameters: any;
23
	export let named: boolean;
24

25
	export let current_language: "python" | "javascript";
26

27
	let python_code: HTMLElement;
28
	let js_code: HTMLElement;
29

30
	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
31
		is_potentially_nested_file_data(param.example_input)
32
	);
33
	let blob_components = ["Audio", "File", "Image", "Video"];
34
	let blob_examples: any[] = endpoint_parameters.filter(
35
		(param: EndpointParameter) => blob_components.includes(param.component)
36
	);
37
</script>
38

39
<div class="container">
40
	{#if named}
41
		<EndpointDetail {named} api_name={dependency.api_name} />
42
	{:else}
43
		<EndpointDetail {named} fn_index={dependency_index} />
44
	{/if}
45
	<Block>
46
		<code>
47
			{#if current_language === "python"}
48
				<div class="copy">
49
					<CopyButton code={python_code?.innerText} />
50
				</div>
51
				<div bind:this={python_code}>
52
					<pre>from gradio_client import Client{#if has_file_path}, file{/if}
53

54
client = Client(<span class="token string">"{root}"</span>)
55
result = client.predict(<!--
56
-->{#each endpoint_parameters as { label, type, python_type, component, example_input, serializer }, i}<!--
57
        -->
58
		<span
59
								class="example-inputs"
60
								>{represent_value(example_input, python_type.type, "py")}</span
61
							>,<!--
62
			-->{#if dependency_failures[dependency_index][i]}<!--
63
			--><span
64
									class="error">ERROR</span
65
								><!--
66
				-->{/if}<!--
67
			--><span class="desc"
68
								><!--
69
			-->	# {python_type.type} {#if python_type.description}({python_type.description})
70
								{/if}<!---->in '{label}' <!--
71
			-->{component} component<!--
72
			--></span
73
							><!--
74
		-->{/each}<!--
75

76
		-->
77
		api_name="/{dependency.api_name}"<!--
78
		-->
79
)
80
print(result)</pre>
81
				</div>
82
			{:else if current_language === "javascript"}
83
				<div class="copy">
84
					<CopyButton code={js_code?.innerText} />
85
				</div>
86
				<div bind:this={js_code}>
87
					<pre>import &lbrace; client &rbrace; from "@gradio/client";
88
{#each blob_examples as { label, type, python_type, component, example_input, serializer }, i}<!--
89
-->
90
const response_{i} = await fetch("{example_input.url}");
91
const example{component} = await response_{i}.blob();
92
						{/each}<!--
93
-->
94
const app = await client(<span class="token string">"{root}"</span>);
95
const result = await app.predict({#if named}"/{dependency.api_name}"{:else}{dependency_index}{/if}, [<!--
96
-->{#each endpoint_parameters as { label, type, python_type, component, example_input, serializer }, i}<!--
97
		-->{#if blob_components.includes(component)}<!--
98
	-->
99
				<span
100
									class="example-inputs">example{component}</span
101
								>, <!--
102
		--><span class="desc"
103
									><!--
104
		-->	// blob <!--
105
		-->in '{label}' <!--
106
		-->{component} component<!--
107
		--></span
108
								><!--
109
		-->{:else}<!--
110
	-->		
111
				<span class="example-inputs"
112
									>{represent_value(
113
										example_input,
114
										python_type.type,
115
										"js"
116
									)}</span
117
								>, <!--
118
--><span class="desc"
119
									><!--
120
-->// {js_parameters[i]
121
										.type} {#if js_parameters[i].description}({js_parameters[i]
122
											.description}){/if}<!--
123
--> in '{label}' <!--
124
-->{component} component<!--
125
--></span
126
								><!--
127
-->{/if}
128
						{/each}
129
	]);
130

131
console.log(result.data);
132
</pre>
133
				</div>
134
			{/if}
135
		</code>
136
	</Block>
137
</div>
138

139
<style>
140
	code pre {
141
		overflow-x: auto;
142
		color: var(--body-text-color);
143
		font-family: var(--font-mono);
144
		tab-size: 2;
145
	}
146

147
	.token.string {
148
		display: contents;
149
		color: var(--color-accent-base);
150
	}
151

152
	code {
153
		position: relative;
154
		display: block;
155
	}
156

157
	.copy {
158
		position: absolute;
159
		top: 0;
160
		right: 0;
161
		margin-top: -5px;
162
		margin-right: -5px;
163
	}
164

165
	.container {
166
		display: flex;
167
		flex-direction: column;
168
		gap: var(--spacing-xxl);
169
		margin-top: var(--size-3);
170
		margin-bottom: var(--size-3);
171
	}
172

173
	.error {
174
		color: var(--error-text-color);
175
	}
176

177
	.desc {
178
		color: var(--body-text-color-subdued);
179
	}
180

181
	.example-inputs {
182
		border: 1px solid var(--border-color-accent);
183
		border-radius: var(--radius-sm);
184
		background: var(--color-accent-soft);
185
		padding-right: var(--size-1);
186
		padding-left: var(--size-1);
187
		color: var(--color-accent);
188
	}
189
</style>
190