@gradio/core 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/blocks.d.ts +1 -0
- package/dist/blocks.js +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/login.d.ts +1 -0
- package/dist/login.js +1 -0
- package/dist/src/Blocks.svelte +674 -0
- package/dist/src/Blocks.svelte.d.ts +41 -0
- package/dist/src/Embed.svelte +195 -0
- package/dist/src/Embed.svelte.d.ts +26 -0
- package/dist/src/Login.svelte +107 -0
- package/dist/src/Login.svelte.d.ts +19 -0
- package/dist/src/MountComponents.svelte +26 -0
- package/dist/src/MountComponents.svelte.d.ts +26 -0
- package/dist/src/Render.svelte +91 -0
- package/dist/src/Render.svelte.d.ts +29 -0
- package/dist/src/RenderComponent.svelte +51 -0
- package/dist/src/RenderComponent.svelte.d.ts +32 -0
- package/dist/src/api_docs/ApiBanner.svelte +115 -0
- package/dist/src/api_docs/ApiBanner.svelte.d.ts +19 -0
- package/dist/src/api_docs/ApiDocs.svelte +388 -0
- package/dist/src/api_docs/ApiDocs.svelte.d.ts +27 -0
- package/dist/src/api_docs/ApiRecorder.svelte +72 -0
- package/dist/src/api_docs/ApiRecorder.svelte.d.ts +18 -0
- package/dist/src/api_docs/CodeSnippet.svelte +184 -0
- package/dist/src/api_docs/CodeSnippet.svelte.d.ts +24 -0
- package/dist/src/api_docs/CopyButton.svelte +15 -0
- package/dist/src/api_docs/CopyButton.svelte.d.ts +16 -0
- package/dist/src/api_docs/EndpointDetail.svelte +36 -0
- package/dist/src/api_docs/EndpointDetail.svelte.d.ts +18 -0
- package/dist/src/api_docs/InputPayload.svelte +149 -0
- package/dist/src/api_docs/InputPayload.svelte.d.ts +24 -0
- package/dist/src/api_docs/InstallSnippet.svelte +56 -0
- package/dist/src/api_docs/InstallSnippet.svelte.d.ts +16 -0
- package/dist/src/api_docs/NoApi.svelte +71 -0
- package/dist/src/api_docs/NoApi.svelte.d.ts +18 -0
- package/dist/src/api_docs/ParametersSnippet.svelte +104 -0
- package/dist/src/api_docs/ParametersSnippet.svelte.d.ts +19 -0
- package/dist/src/api_docs/RecordingSnippet.svelte +210 -0
- package/dist/src/api_docs/RecordingSnippet.svelte.d.ts +22 -0
- package/dist/src/api_docs/ResponseSnippet.svelte +95 -0
- package/dist/src/api_docs/ResponseSnippet.svelte.d.ts +19 -0
- package/dist/src/api_docs/TryButton.svelte +17 -0
- package/dist/src/api_docs/TryButton.svelte.d.ts +17 -0
- package/dist/src/api_docs/img/api-logo.svg +4 -0
- package/dist/src/api_docs/img/bash.svg +8 -0
- package/dist/src/api_docs/img/clear.svelte +19 -0
- package/dist/src/api_docs/img/clear.svelte.d.ts +23 -0
- package/dist/src/api_docs/img/javascript.svg +16 -0
- package/dist/src/api_docs/img/python.svg +20 -0
- package/dist/src/api_docs/index.d.ts +2 -0
- package/dist/src/api_docs/index.js +2 -0
- package/dist/src/api_docs/utils.d.ts +2 -0
- package/dist/src/api_docs/utils.js +135 -0
- package/dist/src/css.d.ts +2 -0
- package/dist/src/css.js +93 -0
- package/dist/src/gradio_helper.js +4 -0
- package/dist/src/i18n.d.ts +6 -0
- package/dist/src/i18n.js +22 -0
- package/dist/src/images/lightning.svg +2 -0
- package/dist/src/images/logo.svg +19 -0
- package/dist/src/images/play.svg +2 -0
- package/dist/src/images/spaces.svg +7 -0
- package/dist/src/init.d.ts +107 -0
- package/dist/src/init.js +377 -0
- package/dist/src/lang/BCP47_codes.d.ts +2 -0
- package/dist/src/lang/BCP47_codes.js +58 -0
- package/dist/src/lang/ar.json +16 -0
- package/dist/src/lang/ca.json +19 -0
- package/dist/src/lang/ckb.json +108 -0
- package/dist/src/lang/de.json +16 -0
- package/dist/src/lang/en.json +118 -0
- package/dist/src/lang/es.json +17 -0
- package/dist/src/lang/eu.json +16 -0
- package/dist/src/lang/fa.json +16 -0
- package/dist/src/lang/fr.json +30 -0
- package/dist/src/lang/he.json +16 -0
- package/dist/src/lang/hi.json +16 -0
- package/dist/src/lang/ja.json +16 -0
- package/dist/src/lang/ko.json +16 -0
- package/dist/src/lang/lt.json +16 -0
- package/dist/src/lang/nl.json +16 -0
- package/dist/src/lang/pl.json +16 -0
- package/dist/src/lang/pt-BR.json +19 -0
- package/dist/src/lang/ru.json +118 -0
- package/dist/src/lang/ta.json +16 -0
- package/dist/src/lang/tr.json +16 -0
- package/dist/src/lang/uk.json +16 -0
- package/dist/src/lang/ur.json +16 -0
- package/dist/src/lang/uz.json +15 -0
- package/dist/src/lang/zh-CN.json +115 -0
- package/dist/src/lang/zh-TW.json +16 -0
- package/dist/src/s-blocks.d.ts +1 -0
- package/dist/src/s-blocks.js +1 -0
- package/dist/src/s-login.d.ts +1 -0
- package/dist/src/s-login.js +1 -0
- package/dist/src/stores.d.ts +30 -0
- package/dist/src/stores.js +93 -0
- package/dist/src/types.d.ts +95 -0
- package/dist/src/types.js +1 -0
- package/dist/src/vite-env-override.d.ts +20 -0
- package/package.json +71 -60
- package/src/Blocks.svelte +14 -10
- package/src/Render.svelte +3 -1
- package/src/api_docs/ApiDocs.svelte +1 -1
- package/src/api_docs/ApiRecorder.svelte +1 -1
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<script>import { Loader } from "@gradio/statustracker";
|
|
2
|
+
import { represent_value } from "./utils";
|
|
3
|
+
export let is_running;
|
|
4
|
+
export let endpoint_returns;
|
|
5
|
+
export let js_returns;
|
|
6
|
+
export let current_language;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<h4>
|
|
10
|
+
<div class="toggle-icon">
|
|
11
|
+
<div class="toggle-dot" />
|
|
12
|
+
</div>
|
|
13
|
+
Accepts {endpoint_returns.length} parameter{#if endpoint_returns.length != 1}s{/if}:
|
|
14
|
+
</h4>
|
|
15
|
+
|
|
16
|
+
<div class:hide={is_running}>
|
|
17
|
+
{#each endpoint_returns as { label, python_type, component, parameter_name, parameter_has_default, parameter_default }, i}
|
|
18
|
+
<hr class="hr" />
|
|
19
|
+
<div style="margin:10px;">
|
|
20
|
+
<p style="white-space: nowrap; overflow-x: auto;">
|
|
21
|
+
<span class="code" style="margin-right: 10px;"
|
|
22
|
+
>{current_language !== "bash" && parameter_name
|
|
23
|
+
? parameter_name
|
|
24
|
+
: "[" + i + "]"}</span
|
|
25
|
+
>
|
|
26
|
+
<span class="code highlight" style="margin-right: 10px;"
|
|
27
|
+
>{#if current_language === "python"}{python_type.type}{#if parameter_has_default && parameter_default === null} |
|
|
28
|
+
None{/if}{:else}{js_returns[i].type || "any"}{/if}</span
|
|
29
|
+
>
|
|
30
|
+
{#if !parameter_has_default || current_language == "bash"}<span
|
|
31
|
+
style="font-weight:bold">Required</span
|
|
32
|
+
>{:else}<span> Default: </span><span
|
|
33
|
+
class="code"
|
|
34
|
+
style="font-size: var(--text-sm);"
|
|
35
|
+
>{represent_value(parameter_default, python_type.type, "py")}</span
|
|
36
|
+
>{/if}
|
|
37
|
+
</p>
|
|
38
|
+
<p class="desc">
|
|
39
|
+
The input value that is provided in the "{label}" <!--
|
|
40
|
+
-->{component}
|
|
41
|
+
component<!--
|
|
42
|
+
-->.
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
45
|
+
{/each}
|
|
46
|
+
</div>
|
|
47
|
+
{#if is_running}
|
|
48
|
+
<div class="load-wrap">
|
|
49
|
+
<Loader margin={false} />
|
|
50
|
+
</div>
|
|
51
|
+
{/if}
|
|
52
|
+
|
|
53
|
+
<style>
|
|
54
|
+
.hr {
|
|
55
|
+
border: 0;
|
|
56
|
+
height: 1px;
|
|
57
|
+
background: var(--color-accent-soft);
|
|
58
|
+
margin-bottom: 12px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.code {
|
|
62
|
+
font-family: var(--font-mono);
|
|
63
|
+
display: inline;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.highlight {
|
|
67
|
+
background: var(--color-accent-soft);
|
|
68
|
+
color: var(--color-accent);
|
|
69
|
+
padding: var(--size-1);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.desc {
|
|
73
|
+
color: var(--body-text-color-subdued);
|
|
74
|
+
font-size: var(--text-lg);
|
|
75
|
+
margin-top: var(--size-1);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h4 {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
margin-top: var(--size-6);
|
|
82
|
+
margin-bottom: var(--size-3);
|
|
83
|
+
color: var(--body-text-color);
|
|
84
|
+
font-weight: var(--weight-bold);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.toggle-icon {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
margin-right: var(--size-2);
|
|
91
|
+
border-radius: var(--radius-full);
|
|
92
|
+
background: var(--color-grey-300);
|
|
93
|
+
width: 12px;
|
|
94
|
+
height: 4px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.toggle-dot {
|
|
98
|
+
border-radius: var(--radius-full);
|
|
99
|
+
background: var(--color-grey-700);
|
|
100
|
+
width: 6px;
|
|
101
|
+
height: 6px;
|
|
102
|
+
margin-right: auto;
|
|
103
|
+
}
|
|
104
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
is_running: boolean;
|
|
5
|
+
endpoint_returns: any;
|
|
6
|
+
js_returns: any;
|
|
7
|
+
current_language: "python" | "javascript" | "bash";
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {};
|
|
13
|
+
};
|
|
14
|
+
export type ParametersSnippetProps = typeof __propDef.props;
|
|
15
|
+
export type ParametersSnippetEvents = typeof __propDef.events;
|
|
16
|
+
export type ParametersSnippetSlots = typeof __propDef.slots;
|
|
17
|
+
export default class ParametersSnippet extends SvelteComponent<ParametersSnippetProps, ParametersSnippetEvents, ParametersSnippetSlots> {
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
<script>import CopyButton from "./CopyButton.svelte";
|
|
2
|
+
import { Block } from "@gradio/atoms";
|
|
3
|
+
import { represent_value } from "./utils";
|
|
4
|
+
import { onMount, tick } from "svelte";
|
|
5
|
+
export let dependencies;
|
|
6
|
+
export let short_root;
|
|
7
|
+
export let root;
|
|
8
|
+
export let current_language;
|
|
9
|
+
export let username;
|
|
10
|
+
let python_code;
|
|
11
|
+
let python_code_text;
|
|
12
|
+
let js_code;
|
|
13
|
+
let bash_code;
|
|
14
|
+
export let api_calls = [];
|
|
15
|
+
async function get_info() {
|
|
16
|
+
let response = await fetch(root + "info/?all_endpoints=true");
|
|
17
|
+
let data = await response.json();
|
|
18
|
+
return data;
|
|
19
|
+
}
|
|
20
|
+
let endpoints_info;
|
|
21
|
+
let py_zipped = [];
|
|
22
|
+
let js_zipped = [];
|
|
23
|
+
let bash_zipped = [];
|
|
24
|
+
function format_api_call(call, lang) {
|
|
25
|
+
const api_name = `/${dependencies[call.fn_index].api_name}`;
|
|
26
|
+
let call_data_excluding_state = call.data.filter(
|
|
27
|
+
(d) => typeof d !== "undefined"
|
|
28
|
+
);
|
|
29
|
+
const params = call_data_excluding_state.map((param, index) => {
|
|
30
|
+
if (endpoints_info[api_name]) {
|
|
31
|
+
const param_info = endpoints_info[api_name].parameters[index];
|
|
32
|
+
if (!param_info) {
|
|
33
|
+
return void 0;
|
|
34
|
+
}
|
|
35
|
+
const param_name = param_info.parameter_name;
|
|
36
|
+
const python_type = param_info.python_type.type;
|
|
37
|
+
if (lang === "py") {
|
|
38
|
+
return ` ${param_name}=${represent_value(
|
|
39
|
+
param,
|
|
40
|
+
python_type,
|
|
41
|
+
"py"
|
|
42
|
+
)}`;
|
|
43
|
+
} else if (lang === "js") {
|
|
44
|
+
return ` ${param_name}: ${represent_value(
|
|
45
|
+
param,
|
|
46
|
+
python_type,
|
|
47
|
+
"js"
|
|
48
|
+
)}`;
|
|
49
|
+
} else if (lang === "bash") {
|
|
50
|
+
return ` ${represent_value(
|
|
51
|
+
param,
|
|
52
|
+
python_type,
|
|
53
|
+
"bash"
|
|
54
|
+
)}`;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return ` ${represent_value(param, void 0, lang)}`;
|
|
58
|
+
}).filter((d) => typeof d !== "undefined").join(",\n");
|
|
59
|
+
if (params) {
|
|
60
|
+
if (lang === "py") {
|
|
61
|
+
return `${params},
|
|
62
|
+
`;
|
|
63
|
+
} else if (lang === "js") {
|
|
64
|
+
return `{
|
|
65
|
+
${params},
|
|
66
|
+
}`;
|
|
67
|
+
} else if (lang === "bash") {
|
|
68
|
+
return `
|
|
69
|
+
${params}
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
if (lang === "py") {
|
|
74
|
+
return "";
|
|
75
|
+
}
|
|
76
|
+
return "\n";
|
|
77
|
+
}
|
|
78
|
+
onMount(async () => {
|
|
79
|
+
const data = await get_info();
|
|
80
|
+
endpoints_info = data["named_endpoints"];
|
|
81
|
+
let py_api_calls = api_calls.map(
|
|
82
|
+
(call) => format_api_call(call, "py")
|
|
83
|
+
);
|
|
84
|
+
let js_api_calls = api_calls.map(
|
|
85
|
+
(call) => format_api_call(call, "js")
|
|
86
|
+
);
|
|
87
|
+
let bash_api_calls = api_calls.map(
|
|
88
|
+
(call) => format_api_call(call, "bash")
|
|
89
|
+
);
|
|
90
|
+
let api_names = api_calls.map(
|
|
91
|
+
(call) => dependencies[call.fn_index].api_name || ""
|
|
92
|
+
);
|
|
93
|
+
py_zipped = py_api_calls.map((call, index) => ({
|
|
94
|
+
call,
|
|
95
|
+
api_name: api_names[index]
|
|
96
|
+
}));
|
|
97
|
+
js_zipped = js_api_calls.map((call, index) => ({
|
|
98
|
+
call,
|
|
99
|
+
api_name: api_names[index]
|
|
100
|
+
}));
|
|
101
|
+
bash_zipped = bash_api_calls.map((call, index) => ({
|
|
102
|
+
call,
|
|
103
|
+
api_name: api_names[index]
|
|
104
|
+
}));
|
|
105
|
+
await tick();
|
|
106
|
+
python_code_text = python_code.innerText;
|
|
107
|
+
});
|
|
108
|
+
</script>
|
|
109
|
+
|
|
110
|
+
<div class="container">
|
|
111
|
+
<!-- <EndpointDetail {named} api_name={dependency.api_name} /> -->
|
|
112
|
+
<Block border_mode={"focus"}>
|
|
113
|
+
{#if current_language === "python"}
|
|
114
|
+
<code>
|
|
115
|
+
<div class="copy">
|
|
116
|
+
<CopyButton code={python_code_text} />
|
|
117
|
+
</div>
|
|
118
|
+
<div bind:this={python_code}>
|
|
119
|
+
<pre><span class="highlight">from</span> gradio_client <span
|
|
120
|
+
class="highlight">import</span
|
|
121
|
+
> Client, file
|
|
122
|
+
|
|
123
|
+
client = Client(<span class="token string">"{short_root}"</span
|
|
124
|
+
>{#if username !== null}, auth=("{username}", **password**){/if})
|
|
125
|
+
{#each py_zipped as { call, api_name }}<!--
|
|
126
|
+
-->
|
|
127
|
+
client.<span class="highlight"
|
|
128
|
+
>predict(
|
|
129
|
+
{call} api_name=<span class="api-name">"/{api_name}"</span>
|
|
130
|
+
)
|
|
131
|
+
</span>{/each}</pre>
|
|
132
|
+
</div>
|
|
133
|
+
</code>
|
|
134
|
+
{:else if current_language === "javascript"}
|
|
135
|
+
<code>
|
|
136
|
+
<div class="copy">
|
|
137
|
+
<CopyButton code={js_code?.innerText} />
|
|
138
|
+
</div>
|
|
139
|
+
<div bind:this={js_code}>
|
|
140
|
+
<pre>import { Client } from "@gradio/client";
|
|
141
|
+
|
|
142
|
+
const app = await Client.connect(<span class="token string">"{short_root}"</span
|
|
143
|
+
>{#if username !== null}, {auth: ["{username}", **password**]}{/if});
|
|
144
|
+
{#each js_zipped as { call, api_name }}<!--
|
|
145
|
+
-->
|
|
146
|
+
await client.predict(<span
|
|
147
|
+
class="api-name">
|
|
148
|
+
"/{api_name}"</span
|
|
149
|
+
>{#if call},
|
|
150
|
+
{/if}{call});
|
|
151
|
+
{/each}</pre>
|
|
152
|
+
</div>
|
|
153
|
+
</code>
|
|
154
|
+
{:else if current_language === "bash"}
|
|
155
|
+
<code>
|
|
156
|
+
<div class="copy">
|
|
157
|
+
<CopyButton code={bash_code?.innerText} />
|
|
158
|
+
</div>
|
|
159
|
+
<div bind:this={bash_code}>
|
|
160
|
+
{#each bash_zipped as { call, api_name }}
|
|
161
|
+
<pre>curl -X POST {short_root}call/{api_name} -s -H "Content-Type: application/json" -d '{"{"}
|
|
162
|
+
"data": [{call}]{"}"}' \
|
|
163
|
+
| awk -F'"' '{"{"} print $4{"}"}' \
|
|
164
|
+
| read EVENT_ID; curl -N {short_root}call/{api_name}/$EVENT_ID</pre>
|
|
165
|
+
<br />
|
|
166
|
+
{/each}
|
|
167
|
+
</div>
|
|
168
|
+
</code>
|
|
169
|
+
{/if}
|
|
170
|
+
</Block>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<style>
|
|
174
|
+
code pre {
|
|
175
|
+
overflow-x: auto;
|
|
176
|
+
color: var(--body-text-color);
|
|
177
|
+
font-family: var(--font-mono);
|
|
178
|
+
tab-size: 2;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.token.string {
|
|
182
|
+
display: contents;
|
|
183
|
+
color: var(--color-accent-base);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
code {
|
|
187
|
+
position: relative;
|
|
188
|
+
display: block;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.copy {
|
|
192
|
+
position: absolute;
|
|
193
|
+
top: 0;
|
|
194
|
+
right: 0;
|
|
195
|
+
margin-top: -5px;
|
|
196
|
+
margin-right: -5px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.container {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
gap: var(--spacing-xxl);
|
|
203
|
+
margin-top: var(--size-3);
|
|
204
|
+
margin-bottom: var(--size-3);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.api-name {
|
|
208
|
+
color: var(--color-accent);
|
|
209
|
+
}
|
|
210
|
+
</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { Dependency, Payload } from "../types";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
dependencies: Dependency[];
|
|
6
|
+
short_root: string;
|
|
7
|
+
root: string;
|
|
8
|
+
current_language: "python" | "javascript" | "bash";
|
|
9
|
+
username: string | null;
|
|
10
|
+
api_calls?: Payload[] | undefined;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export type RecordingSnippetProps = typeof __propDef.props;
|
|
18
|
+
export type RecordingSnippetEvents = typeof __propDef.events;
|
|
19
|
+
export type RecordingSnippetSlots = typeof __propDef.slots;
|
|
20
|
+
export default class RecordingSnippet extends SvelteComponent<RecordingSnippetProps, RecordingSnippetEvents, RecordingSnippetSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<script>import { Loader } from "@gradio/statustracker";
|
|
2
|
+
export let is_running;
|
|
3
|
+
export let endpoint_returns;
|
|
4
|
+
export let js_returns;
|
|
5
|
+
export let current_language;
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<h4>
|
|
9
|
+
<div class="toggle-icon">
|
|
10
|
+
<div class="toggle-dot toggle-right" />
|
|
11
|
+
</div>
|
|
12
|
+
Returns {#if endpoint_returns.length > 1}
|
|
13
|
+
{current_language == "python" ? "tuple" : "list"} of {endpoint_returns.length}
|
|
14
|
+
elements{:else}
|
|
15
|
+
1 element{/if}
|
|
16
|
+
</h4>
|
|
17
|
+
|
|
18
|
+
<div class:hide={is_running}>
|
|
19
|
+
{#each endpoint_returns as { label, type, python_type, component, serializer }, i}
|
|
20
|
+
<hr class="hr" />
|
|
21
|
+
<div style="margin:10px;">
|
|
22
|
+
<p>
|
|
23
|
+
{#if endpoint_returns.length > 1}
|
|
24
|
+
<span class="code">[{i}]</span>
|
|
25
|
+
{/if}
|
|
26
|
+
<span class="code highlight"
|
|
27
|
+
>{#if current_language === "python"}{python_type.type}{:else}{js_returns[
|
|
28
|
+
i
|
|
29
|
+
].type}{/if}</span
|
|
30
|
+
>
|
|
31
|
+
</p>
|
|
32
|
+
<p class="desc">
|
|
33
|
+
The output value that appears in the "{label}" <!--
|
|
34
|
+
-->{component}
|
|
35
|
+
component<!--
|
|
36
|
+
-->.
|
|
37
|
+
</p>
|
|
38
|
+
</div>
|
|
39
|
+
{/each}
|
|
40
|
+
</div>
|
|
41
|
+
{#if is_running}
|
|
42
|
+
<div class="load-wrap">
|
|
43
|
+
<Loader margin={false} />
|
|
44
|
+
</div>
|
|
45
|
+
{/if}
|
|
46
|
+
|
|
47
|
+
<style>
|
|
48
|
+
.hr {
|
|
49
|
+
border: 0;
|
|
50
|
+
height: 1px;
|
|
51
|
+
background: var(--color-accent-soft);
|
|
52
|
+
}
|
|
53
|
+
.code {
|
|
54
|
+
font-family: var(--font-mono);
|
|
55
|
+
margin-right: 10px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.highlight {
|
|
59
|
+
background: var(--color-accent-soft);
|
|
60
|
+
color: var(--color-accent);
|
|
61
|
+
padding: var(--size-1);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.desc {
|
|
65
|
+
color: var(--body-text-color-subdued);
|
|
66
|
+
font-size: var(--text-lg);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
h4 {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
margin-top: var(--size-6);
|
|
73
|
+
margin-bottom: var(--size-3);
|
|
74
|
+
color: var(--body-text-color);
|
|
75
|
+
font-weight: var(--weight-bold);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.toggle-icon {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
margin-right: var(--size-2);
|
|
82
|
+
border-radius: var(--radius-full);
|
|
83
|
+
background: var(--color-grey-300);
|
|
84
|
+
width: 12px;
|
|
85
|
+
height: 4px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.toggle-dot {
|
|
89
|
+
border-radius: var(--radius-full);
|
|
90
|
+
background: var(--color-grey-700);
|
|
91
|
+
width: 6px;
|
|
92
|
+
height: 6px;
|
|
93
|
+
margin-left: auto;
|
|
94
|
+
}
|
|
95
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
is_running: boolean;
|
|
5
|
+
endpoint_returns: any;
|
|
6
|
+
js_returns: any;
|
|
7
|
+
current_language: "python" | "javascript" | "bash";
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {};
|
|
13
|
+
};
|
|
14
|
+
export type ResponseSnippetProps = typeof __propDef.props;
|
|
15
|
+
export type ResponseSnippetEvents = typeof __propDef.events;
|
|
16
|
+
export type ResponseSnippetSlots = typeof __propDef.slots;
|
|
17
|
+
export default class ResponseSnippet extends SvelteComponent<ResponseSnippetProps, ResponseSnippetEvents, ResponseSnippetSlots> {
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script>import { BaseButton } from "@gradio/button";
|
|
2
|
+
export let dependency_index;
|
|
3
|
+
export let run;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<span class="space" />
|
|
7
|
+
<BaseButton variant="primary" on:click={run.bind(null, dependency_index)}>
|
|
8
|
+
Try It Out
|
|
9
|
+
</BaseButton>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.space {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-basis: 1;
|
|
15
|
+
margin-top: var(--size-4);
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
dependency_index: number;
|
|
5
|
+
run: (id: number) => Promise<void>;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {};
|
|
11
|
+
};
|
|
12
|
+
export type TryButtonProps = typeof __propDef.props;
|
|
13
|
+
export type TryButtonEvents = typeof __propDef.events;
|
|
14
|
+
export type TryButtonSlots = typeof __propDef.slots;
|
|
15
|
+
export default class TryButton extends SvelteComponent<TryButtonProps, TryButtonEvents, TryButtonSlots> {
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9425 2.94265C27.4632 2.42195 27.4632 1.57773 26.9425 1.05703C26.4218 0.536329 25.5776 0.536329 25.0569 1.05703L22.5713 3.54256C21.1213 2.59333 19.5367 2.43378 18.1753 2.64006C16.5495 2.88638 15.1127 3.66838 14.3905 4.39053L12.3905 6.39053C12.1405 6.64058 12 6.97972 12 7.33334C12 7.68697 12.1405 8.0261 12.3905 8.27615L19.7239 15.6095C20.2446 16.1302 21.0888 16.1302 21.6095 15.6095L23.6095 13.6095C24.3316 12.8873 25.1136 11.4505 25.36 9.82475C25.5663 8.46312 25.4066 6.87827 24.4571 5.42807L26.9425 2.94265Z" fill="#3c4555"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.276 12.9426C12.7967 12.4219 12.7967 11.5777 12.276 11.057C11.7553 10.5363 10.9111 10.5363 10.3904 11.057L8.66651 12.7809L8.27615 12.3905C8.0261 12.1405 7.68697 12 7.33334 12C6.97972 12 6.64058 12.1405 6.39053 12.3905L4.39053 14.3905C3.66838 15.1127 2.88638 16.5495 2.64006 18.1753C2.43377 19.5367 2.59333 21.1214 3.54262 22.5714L1.05703 25.057C0.536329 25.5777 0.536329 26.4219 1.05703 26.9426C1.57773 27.4633 2.42195 27.4633 2.94265 26.9426L5.42817 24.4571C6.87835 25.4066 8.46315 25.5663 9.82475 25.36C11.4505 25.1136 12.8873 24.3316 13.6095 23.6095L15.6095 21.6095C16.1302 21.0888 16.1302 20.2446 15.6095 19.7239L15.2188 19.3332L16.9426 17.6093C17.4633 17.0886 17.4633 16.2444 16.9426 15.7237C16.4219 15.203 15.5777 15.203 15.057 15.7237L13.3332 17.4475L10.5521 14.6665L12.276 12.9426Z" fill="#FF7C00"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150; background-color: #72a824;" xml:space="preserve"><script xmlns=""/>
|
|
2
|
+
<style type="text/css">
|
|
3
|
+
.st0{fill:#FFFFFF;}
|
|
4
|
+
</style>
|
|
5
|
+
<g>
|
|
6
|
+
<path class="st0" d="M118.9,40.3L81.7,18.2c-2.2-1.3-4.7-2-7.2-2s-5,0.7-7.2,2L30.1,40.3c-4.4,2.6-7.2,7.5-7.2,12.8v44.2 c0,5.3,2.7,10.1,7.2,12.8l37.2,22.1c2.2,1.3,4.7,2,7.2,2c2.5,0,5-0.7,7.2-2l37.2-22.1c4.4-2.6,7.2-7.5,7.2-12.8V53 C126.1,47.8,123.4,42.9,118.9,40.3z M90.1,109.3l0.1,3.2c0,0.4-0.2,0.8-0.5,1l-1.9,1.1c-0.3,0.2-0.5,0-0.6-0.4l0-3.1 c-1.6,0.7-3.2,0.8-4.3,0.4c-0.2-0.1-0.3-0.4-0.2-0.7l0.7-2.9c0.1-0.2,0.2-0.5,0.3-0.6c0.1-0.1,0.1-0.1,0.2-0.1 c0.1-0.1,0.2-0.1,0.3,0c1.1,0.4,2.6,0.2,3.9-0.5c1.8-0.9,2.9-2.7,2.9-4.5c0-1.6-0.9-2.3-3-2.3c-2.7,0-5.2-0.5-5.3-4.5 c0-3.3,1.7-6.7,4.4-8.8l0-3.2c0-0.4,0.2-0.8,0.5-1l1.8-1.2c0.3-0.2,0.5,0,0.6,0.4l0,3.2c1.3-0.5,2.5-0.7,3.6-0.4 c0.2,0.1,0.3,0.4,0.2,0.7l-0.7,2.8c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0.1-0.3,0 c-0.5-0.1-1.6-0.4-3.4,0.6c-1.9,1-2.6,2.6-2.5,3.8c0,1.5,0.8,1.9,3.3,1.9c3.4,0.1,4.9,1.6,5,5C94.7,103.4,92.9,107,90.1,109.3z M109.6,103.9c0,0.3,0,0.6-0.3,0.7l-9.4,5.7c-0.2,0.1-0.4,0-0.4-0.3v-2.4c0-0.3,0.2-0.5,0.4-0.6l9.3-5.5c0.2-0.1,0.4,0,0.4,0.3 V103.9z M116.1,49.6L80.9,71.3c-4.4,2.6-7.6,5.4-7.6,10.7v43.4c0,3.2,1.3,5.2,3.2,5.8c-0.6,0.1-1.3,0.2-2,0.2 c-2.1,0-4.1-0.6-5.9-1.6l-37.2-22.1c-3.6-2.2-5.9-6.2-5.9-10.5V53c0-4.3,2.3-8.4,5.9-10.5l37.2-22.1c1.8-1.1,3.8-1.6,5.9-1.6 s4.1,0.6,5.9,1.6l37.2,22.1c3.1,1.8,5.1,5,5.7,8.5C122.1,48.4,119.3,47.7,116.1,49.6z"/>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="100%"
|
|
3
|
+
height="100%"
|
|
4
|
+
viewBox="0 0 5 5"
|
|
5
|
+
version="1.1"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
8
|
+
xml:space="preserve"
|
|
9
|
+
style="fill:currentColor;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
|
|
10
|
+
>
|
|
11
|
+
<g>
|
|
12
|
+
<path
|
|
13
|
+
d="M3.789,0.09C3.903,-0.024 4.088,-0.024 4.202,0.09L4.817,0.705C4.931,0.819 4.931,1.004 4.817,1.118L1.118,4.817C1.004,4.931 0.819,4.931 0.705,4.817L0.09,4.202C-0.024,4.088 -0.024,3.903 0.09,3.789L3.789,0.09Z"
|
|
14
|
+
/>
|
|
15
|
+
<path
|
|
16
|
+
d="M4.825,3.797C4.934,3.907 4.934,4.084 4.825,4.193L4.193,4.825C4.084,4.934 3.907,4.934 3.797,4.825L0.082,1.11C-0.027,1.001 -0.027,0.823 0.082,0.714L0.714,0.082C0.823,-0.027 1.001,-0.027 1.11,0.082L4.825,3.797Z"
|
|
17
|
+
/>
|
|
18
|
+
</g>
|
|
19
|
+
</svg>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} ClearProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} ClearEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} ClearSlots */
|
|
4
|
+
export default class Clear extends SvelteComponent<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type ClearProps = typeof __propDef.props;
|
|
11
|
+
export type ClearEvents = typeof __propDef.events;
|
|
12
|
+
export type ClearSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
focusable="false"
|
|
6
|
+
role="img"
|
|
7
|
+
width="1em"
|
|
8
|
+
height="1em"
|
|
9
|
+
preserveAspectRatio="xMidYMid meet"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
>
|
|
12
|
+
<rect width="32" height="32" fill="#f7df1e"></rect>
|
|
13
|
+
<path
|
|
14
|
+
d="M21.5,25a3.27,3.27,0,0,0,3,1.83c1.25,0,2-.63,2-1.49,0-1-.81-1.39-2.19-2L23.56,23C21.39,22.1,20,20.94,20,18.49c0-2.25,1.72-4,4.41-4a4.44,4.44,0,0,1,4.27,2.41l-2.34,1.5a2,2,0,0,0-1.93-1.29,1.31,1.31,0,0,0-1.44,1.29c0,.9.56,1.27,1.85,1.83l.75.32c2.55,1.1,4,2.21,4,4.72,0,2.71-2.12,4.19-5,4.19a5.78,5.78,0,0,1-5.48-3.07Zm-10.63.26c.48.84.91,1.55,1.94,1.55s1.61-.39,1.61-1.89V14.69h3V25c0,3.11-1.83,4.53-4.49,4.53a4.66,4.66,0,0,1-4.51-2.75Z"
|
|
15
|
+
></path>
|
|
16
|
+
</svg>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
focusable="false"
|
|
6
|
+
role="img"
|
|
7
|
+
width="1em"
|
|
8
|
+
height="1em"
|
|
9
|
+
preserveAspectRatio="xMidYMid meet"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M15.84.5a16.4,16.4,0,0,0-3.57.32C9.1,1.39,8.53,2.53,8.53,4.64V7.48H16v1H5.77a4.73,4.73,0,0,0-4.7,3.74,14.82,14.82,0,0,0,0,7.54c.57,2.28,1.86,3.82,4,3.82h2.6V20.14a4.73,4.73,0,0,1,4.63-4.63h7.38a3.72,3.72,0,0,0,3.73-3.73V4.64A4.16,4.16,0,0,0,19.65.82,20.49,20.49,0,0,0,15.84.5ZM11.78,2.77a1.39,1.39,0,0,1,1.38,1.46,1.37,1.37,0,0,1-1.38,1.38A1.42,1.42,0,0,1,10.4,4.23,1.44,1.44,0,0,1,11.78,2.77Z"
|
|
14
|
+
fill="#5a9fd4"
|
|
15
|
+
></path>
|
|
16
|
+
<path
|
|
17
|
+
d="M16.16,31.5a16.4,16.4,0,0,0,3.57-.32c3.17-.57,3.74-1.71,3.74-3.82V24.52H16v-1H26.23a4.73,4.73,0,0,0,4.7-3.74,14.82,14.82,0,0,0,0-7.54c-.57-2.28-1.86-3.82-4-3.82h-2.6v3.41a4.73,4.73,0,0,1-4.63,4.63H12.35a3.72,3.72,0,0,0-3.73,3.73v7.14a4.16,4.16,0,0,0,3.73,3.82A20.49,20.49,0,0,0,16.16,31.5Zm4.06-2.27a1.39,1.39,0,0,1-1.38-1.46,1.37,1.37,0,0,1,1.38-1.38,1.42,1.42,0,0,1,1.38,1.38A1.44,1.44,0,0,1,20.22,29.23Z"
|
|
18
|
+
fill="#ffd43b"
|
|
19
|
+
></path>
|
|
20
|
+
</svg>
|