mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-12 12:40:29 +08:00
format (#4810)
This commit is contained in:
pngwn
GitHub
parent
87e14e38b5
commit
7fa5e766ce
@ -3,5 +3,5 @@
|
||||
"singleQuote": false,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 80,
|
||||
"pluginSearchDirs": ["."]
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"]
|
||||
}
|
||||
|
||||
@ -112,8 +112,8 @@ ${demos.map((d) => `from demo.${d}.run import demo as ${d}`).join("\n")}
|
||||
|
||||
app = FastAPI()
|
||||
${demos
|
||||
.map((d) => `app = gr.mount_gradio_app(app, ${d}, path="/${d}")`)
|
||||
.join("\n")}
|
||||
.map((d) => `app = gr.mount_gradio_app(app, ${d}, path="/${d}")`)
|
||||
.join("\n")}
|
||||
|
||||
config = uvicorn.Config(app, port=${port}, log_level="info")
|
||||
server = uvicorn.Server(config=config)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
@ -66,7 +66,7 @@ export async function duplicate(
|
||||
hf_token: `hf_${string}`;
|
||||
private?: boolean;
|
||||
status_callback: SpaceStatusCallback;
|
||||
hardware?: typeof hardware_types[number];
|
||||
hardware?: (typeof hardware_types)[number];
|
||||
timeout?: number;
|
||||
}
|
||||
) {
|
||||
|
||||
@ -144,7 +144,7 @@ export async function get_space_hardware(
|
||||
|
||||
export async function set_space_hardware(
|
||||
space_id: string,
|
||||
new_hardware: typeof hardware_types[number],
|
||||
new_hardware: (typeof hardware_types)[number],
|
||||
token: `hf_${string}`
|
||||
) {
|
||||
const headers: { Authorization?: string } = {};
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style>
|
||||
html {
|
||||
/* background: #111; */
|
||||
/* color: #eee; */
|
||||
font-family: Source Sans Pro;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script type="module" src="http://localhost:4321/gradio.js"></script>
|
||||
<!-- <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.18.1b6/gradio.js"></script> -->
|
||||
<!-- <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.18.0/gradio.js"></script> -->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.min.js"></script> -->
|
||||
|
||||
<head>
|
||||
<style>
|
||||
html {
|
||||
/* background: #111; */
|
||||
/* color: #eee; */
|
||||
font-family: Source Sans Pro;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script type="module" src="http://localhost:4321/gradio.js"></script>
|
||||
<!-- <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.18.1b6/gradio.js"></script> -->
|
||||
<!-- <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.18.0/gradio.js"></script> -->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.min.js"></script> -->
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <h1>Hello title</h1>
|
||||
<body>
|
||||
<!-- <h1>Hello title</h1>
|
||||
<h2>hello subtitle</h2>
|
||||
<p>
|
||||
Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
|
||||
@ -160,15 +159,15 @@
|
||||
Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
|
||||
Hello text. Hello text.
|
||||
</p> -->
|
||||
<!-- https://huggingface.co/spaces/freddyaboulton/blocks-essay -->
|
||||
<!-- <gradio-app
|
||||
<!-- https://huggingface.co/spaces/freddyaboulton/blocks-essay -->
|
||||
<!-- <gradio-app
|
||||
space="freddyaboulton/timeseries-forecasting-with-prophet
|
||||
"
|
||||
></gradio-app> -->
|
||||
<!-- -->
|
||||
<!-- </p> -->
|
||||
<!-- -->
|
||||
<!-- </p> -->
|
||||
|
||||
<!-- <gradio-app space="awacke1/GradioAutoPlotFromCSV" info="false"></gradio-app>
|
||||
<!-- <gradio-app space="awacke1/GradioAutoPlotFromCSV" info="false"></gradio-app>
|
||||
<gradio-app
|
||||
space="gradio/plot_component_main"
|
||||
initial_height="400px"
|
||||
@ -280,39 +279,42 @@
|
||||
<h2>Working</h2>
|
||||
-->
|
||||
|
||||
<gradio-app space="gradio/live_with_vars" initial_height="200px" control_page_title="true"></gradio-app>
|
||||
<!-- <iframe
|
||||
<gradio-app
|
||||
space="gradio/live_with_vars"
|
||||
initial_height="200px"
|
||||
control_page_title="true"
|
||||
></gradio-app>
|
||||
<!-- <iframe
|
||||
id="myIframe"
|
||||
allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
|
||||
src="http://127.0.0.1:7860/"
|
||||
frameborder="0"
|
||||
></iframe> -->
|
||||
<button>Toggle Space</button>
|
||||
<script>
|
||||
// iFrameResize(
|
||||
// {
|
||||
// log: false,
|
||||
// checkOrigin: false,
|
||||
// heightCalculationMethod: "lowestElement"
|
||||
// },
|
||||
// "#myIframe"
|
||||
// );
|
||||
<button>Toggle Space</button>
|
||||
<script>
|
||||
// iFrameResize(
|
||||
// {
|
||||
// log: false,
|
||||
// checkOrigin: false,
|
||||
// heightCalculationMethod: "lowestElement"
|
||||
// },
|
||||
// "#myIframe"
|
||||
// );
|
||||
|
||||
let spaces = [
|
||||
"gradio/live_with_vars",
|
||||
"gradio/colorpicker_component_main"
|
||||
];
|
||||
let spaces = [
|
||||
"gradio/live_with_vars",
|
||||
"gradio/colorpicker_component_main"
|
||||
];
|
||||
|
||||
const b = document.getElementsByTagName("button")[0];
|
||||
b.addEventListener("click", update_space);
|
||||
const b = document.getElementsByTagName("button")[0];
|
||||
b.addEventListener("click", update_space);
|
||||
|
||||
function update_space() {
|
||||
const g = document.getElementsByTagName("gradio-app")[0];
|
||||
g.setAttribute("space", spaces[1]);
|
||||
const [_old, _new] = spaces;
|
||||
spaces = [_new, _old];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
function update_space() {
|
||||
const g = document.getElementsByTagName("gradio-app")[0];
|
||||
g.setAttribute("space", spaces[1]);
|
||||
const [_old, _new] = spaces;
|
||||
spaces = [_new, _old];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
@ -33,4 +33,4 @@
|
||||
"mdsvex": "^0.11.0",
|
||||
"postcss": ">=8.3.3 <9.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = {
|
||||
extract: "themes.css",
|
||||
plugins: [require("tailwindcss/nesting"), require("tailwindcss")]
|
||||
};
|
||||
};
|
||||
|
||||
5
js/_website/src/app.d.ts
vendored
5
js/_website/src/app.d.ts
vendored
@ -9,7 +9,6 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
declare module "*.json"
|
||||
declare module "*.json";
|
||||
|
||||
|
||||
export { };
|
||||
export {};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -9,5 +9,4 @@
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const svgCopy =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
|
||||
export const svgCheck =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
|
||||
|
||||
@ -17,4 +17,4 @@ export const img = `<pre class="language-python"><code class="language-python"><
|
||||
<span class="token keyword">pass </span><span class="token comment"> # Implement your image segmentation model here...</span>
|
||||
|
||||
gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>segment<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</code></pre>`;
|
||||
</code></pre>`;
|
||||
|
||||
@ -44,12 +44,15 @@ export const twitter_pics = (
|
||||
string,
|
||||
{ default: string }
|
||||
][]
|
||||
).reduce((a, [k, mod]) => {
|
||||
a[k.replace("./twitter/", "")] = mod.default;
|
||||
return a;
|
||||
}, {} as Record<string, string>);
|
||||
).reduce(
|
||||
(a, [k, mod]) => {
|
||||
a[k.replace("./twitter/", "")] = mod.default;
|
||||
return a;
|
||||
},
|
||||
{} as Record<string, string>
|
||||
);
|
||||
|
||||
export const tweets = _tweets.map((x) => ({
|
||||
...x,
|
||||
profile_pic: twitter_pics[x.profile_pic]
|
||||
}));
|
||||
}));
|
||||
|
||||
@ -8,38 +8,42 @@ https://prismjs.com/download.html#themes=prism&languages=python */
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
background: none;
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
text-align: left;
|
||||
text-shadow: 0 1px white;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@ -51,20 +55,20 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
margin: 0.5em 0;
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: rgb(249,250,251);
|
||||
background: rgb(249, 250, 251);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
border-radius: 0.3em;
|
||||
padding: 0.1em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@ -80,7 +84,7 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -107,9 +111,9 @@ pre[class*="language-"] {
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
/* This background color was intended by the author of this theme. */
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
color: #9a6e3a;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
@ -120,7 +124,7 @@ pre[class*="language-"] {
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
@ -140,4 +144,3 @@ pre[class*="language-"] {
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
|
||||
@ -3,171 +3,181 @@
|
||||
@tailwind utilities;
|
||||
|
||||
.link {
|
||||
@apply font-semibold hover:text-orange-500 transition-colors;
|
||||
@apply font-semibold hover:text-orange-500 transition-colors;
|
||||
}
|
||||
.thin-link {
|
||||
@apply hover:text-orange-500 transition-colors;
|
||||
@apply hover:text-orange-500 transition-colors;
|
||||
}
|
||||
.thinner-link {
|
||||
@apply hover:text-orange-500 transition-colors;
|
||||
@apply hover:text-orange-500 transition-colors;
|
||||
}
|
||||
|
||||
.prose :where(img):not(:where([class~=not-prose] *)) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
.prose :where(img):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:flex { /* for some reason, group-hover:flex not working on mobile */
|
||||
display: flex;
|
||||
.group:hover .group-hover\:flex {
|
||||
/* for some reason, group-hover:flex not working on mobile */
|
||||
display: flex;
|
||||
}
|
||||
.group:active .group-active\:flex { /* for some reason, group-active:flex not working on mobile */
|
||||
display: flex;
|
||||
.group:active .group-active\:flex {
|
||||
/* for some reason, group-active:flex not working on mobile */
|
||||
display: flex;
|
||||
}
|
||||
@media (min-width: 640px) { /* for some reason, sm:block not working */
|
||||
.sm\:block {
|
||||
@apply block;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
/* for some reason, sm:block not working */
|
||||
.sm\:block {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) { /* for some reason, md:block not working */
|
||||
.md\:block {
|
||||
@apply block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
/* for some reason, md:block not working */
|
||||
.md\:block {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
a.text-link {
|
||||
@apply font-semibold text-gray-800 underline decoration-orange-500 underline-offset-2 hover:text-orange-500;
|
||||
}
|
||||
a.text-link {
|
||||
@apply font-semibold text-gray-800 underline decoration-orange-500 underline-offset-2 hover:text-orange-500;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@variants hover, focus {
|
||||
.filter-none {
|
||||
filter: none;
|
||||
}
|
||||
.filter-grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.shadow-alternate-sm {
|
||||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.03),
|
||||
0px 0px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.shadow-alternate {
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04),
|
||||
0px 0px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.shadow-alternate-xl {
|
||||
box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
|
||||
0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
@variants hover, focus {
|
||||
.filter-none {
|
||||
filter: none;
|
||||
}
|
||||
.filter-grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.shadow-alternate-sm {
|
||||
box-shadow:
|
||||
0px 5px 5px rgba(0, 0, 0, 0.03),
|
||||
0px 2px 2px rgba(0, 0, 0, 0.03),
|
||||
0px 0px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.shadow-alternate {
|
||||
box-shadow:
|
||||
0px 10px 20px rgba(0, 0, 0, 0.04),
|
||||
0px 2px 6px rgba(0, 0, 0, 0.04),
|
||||
0px 0px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.shadow-alternate-xl {
|
||||
box-shadow:
|
||||
0px 24px 32px rgba(0, 0, 0, 0.04),
|
||||
0px 16px 24px rgba(0, 0, 0, 0.04),
|
||||
0px 4px 8px rgba(0, 0, 0, 0.04),
|
||||
0px 0px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* index */
|
||||
.active-example-tab {
|
||||
@apply border-orange-500 rounded-full text-orange-500 ring-1 bg-orange-50 ring-orange-200 hover:!text-orange-500 cursor-pointer shadow shadow-orange-200;
|
||||
@apply border-orange-500 rounded-full text-orange-500 ring-1 bg-orange-50 ring-orange-200 hover:!text-orange-500 cursor-pointer shadow shadow-orange-200;
|
||||
}
|
||||
|
||||
/* guides */
|
||||
.prose > p > img {
|
||||
@apply max-w-full mx-auto my-0 w-4/5;
|
||||
@apply max-w-full mx-auto my-0 w-4/5;
|
||||
}
|
||||
.prose > p > video {
|
||||
@apply max-w-full mx-auto my-0 w-4/5;
|
||||
@apply max-w-full mx-auto my-0 w-4/5;
|
||||
}
|
||||
|
||||
.prose code::before {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prose code::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* docs & guides */
|
||||
.thin-link.current-nav-link {
|
||||
@apply text-orange-500;
|
||||
@apply text-orange-500;
|
||||
}
|
||||
.thin-link.current-nav-link:not(.subheading) {
|
||||
@apply border-orange-500 md:border-l-2 pl-4;
|
||||
@apply border-orange-500 md:border-l-2 pl-4;
|
||||
}
|
||||
.link.current-nav-link {
|
||||
@apply border-orange-500 text-orange-500;
|
||||
@apply border-orange-500 text-orange-500;
|
||||
}
|
||||
.thinner-link.current-nav-link {
|
||||
@apply border-orange-500 text-orange-500;
|
||||
@apply border-orange-500 text-orange-500;
|
||||
}
|
||||
.second-nav-link {
|
||||
@apply border-l-2 border-gray-100 px-3;
|
||||
@apply border-l-2 border-gray-100 px-3;
|
||||
}
|
||||
.current-nav-link {
|
||||
@apply border-orange-500 text-orange-500;
|
||||
@apply border-orange-500 text-orange-500;
|
||||
}
|
||||
|
||||
/* docs */
|
||||
.selected-demo {
|
||||
@apply font-semibold bg-gray-50 rounded text-orange-500;
|
||||
@apply font-semibold bg-gray-50 rounded text-orange-500;
|
||||
}
|
||||
code.language-python {
|
||||
@apply !leading-7 !whitespace-pre-wrap !break-all;
|
||||
@apply !leading-7 !whitespace-pre-wrap !break-all;
|
||||
}
|
||||
code.language-bash {
|
||||
@apply !leading-7 !whitespace-pre-wrap !break-all;
|
||||
@apply !leading-7 !whitespace-pre-wrap !break-all;
|
||||
}
|
||||
|
||||
.group-hover-visible {
|
||||
@apply group-hover:visible;
|
||||
@apply group-hover:visible;
|
||||
}
|
||||
.anchor-img {
|
||||
@apply w-7 max-w-full inline-block m-0 ml-2;
|
||||
@apply w-7 max-w-full inline-block m-0 ml-2;
|
||||
}
|
||||
.anchor-img-small {
|
||||
@apply w-5 max-w-full inline-block m-0 ml-0.5;
|
||||
@apply w-5 max-w-full inline-block m-0 ml-0.5;
|
||||
}
|
||||
.selected-version {
|
||||
@apply font-semibold text-orange-500;
|
||||
@apply font-semibold text-orange-500;
|
||||
}
|
||||
.selected-version:before {
|
||||
content:"• ";
|
||||
content: "• ";
|
||||
}
|
||||
|
||||
/* copy button */
|
||||
.clipboard-button {
|
||||
@apply absolute right-0 px-1.5 pt-0.5 pb-1 m-4 text-gray-500 text-sm z-[100] opacity-0 duration-100;
|
||||
@apply absolute right-0 px-1.5 pt-0.5 pb-1 m-4 text-gray-500 text-sm z-[100] opacity-0 duration-100;
|
||||
}
|
||||
.clipboard-button:hover {
|
||||
@apply cursor-pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.clipboard-button:hover > svg {
|
||||
@apply fill-gray-700;
|
||||
@apply fill-gray-700;
|
||||
}
|
||||
.clipboard-button:focus {
|
||||
@apply outline-0;
|
||||
@apply outline-0;
|
||||
}
|
||||
.codeblock {
|
||||
@apply relative;
|
||||
@apply relative;
|
||||
}
|
||||
.codeblock:hover > .clipboard-button {
|
||||
@apply opacity-100 duration-200;
|
||||
@apply opacity-100 duration-200;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
@apply appearance-none h-5 w-5;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/src/assets/img/esc.svg");
|
||||
background-size: 20px 20px;
|
||||
@apply appearance-none h-5 w-5;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/src/assets/img/esc.svg");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.view-code {
|
||||
@apply w-16 p-2 mx-auto hover:bg-gray-100;
|
||||
background: rgb(249,250,251);
|
||||
@apply w-16 p-2 mx-auto hover:bg-gray-100;
|
||||
background: rgb(249, 250, 251);
|
||||
}
|
||||
|
||||
/* demos */
|
||||
.selected-demo-tab {
|
||||
@apply font-semibold text-orange-500 rounded-t-md border-2 border-gray-100 border-b-0 bg-white;
|
||||
@apply font-semibold text-orange-500 rounded-t-md border-2 border-gray-100 border-b-0 bg-white;
|
||||
}
|
||||
.selected-demo-window {
|
||||
@apply rounded-b-md border-2 border-gray-100 -mt-0.5;
|
||||
@apply rounded-b-md border-2 border-gray-100 -mt-0.5;
|
||||
}
|
||||
|
||||
|
||||
@ -1,83 +1,83 @@
|
||||
[
|
||||
{
|
||||
"name": "Amar Saini",
|
||||
"handle": "_Epoching_",
|
||||
"link": "https://twitter.com/_Epoching_/status/1471091318482825219",
|
||||
"content": "Just built a ️<span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> app for a video related deep learning project. <br> I’m astonished by how simple it is to use & how elegant it looks! Lots and lots of great features & flexibility. Thanks for making this ❤ ",
|
||||
"likes": 47,
|
||||
"timestamp": "7:14 AM · Dec 15, 2021",
|
||||
"profile_pic": "pwMrDOBv_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Will Rice",
|
||||
"handle": "_Will_Rice",
|
||||
"link": "https://twitter.com/_Will_Rice/status/1430258610131582979",
|
||||
"content": "Just tried out <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span> and I am very impressed. Only took like 10mins to put together a <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#tts</span> demo.",
|
||||
"likes": 11,
|
||||
"timestamp": "4:00 PM · Aug 24, 2021",
|
||||
"profile_pic": "LsCnjnsl_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Roxana Daneshjou MD/PhD",
|
||||
"handle": "RoxanaDaneshjou",
|
||||
"link": "https://twitter.com/RoxanaDaneshjou/status/1418399829944721415",
|
||||
"content": "Honestly, without <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, we would not be doing a real time AI trial. We have many other ideas for algorithms we want to test through clinical trials, and we know it's possible thanks to <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>.",
|
||||
"likes": 15,
|
||||
"timestamp": "7:37 PM · Jul 22, 2021",
|
||||
"profile_pic": "ITFspAMm_x96.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Vinay Prabhu",
|
||||
"handle": "vinayprabhu",
|
||||
"link": "https://twitter.com/vinayprabhu/status/1324409497641652225",
|
||||
"content": "Dear <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning<\/span> twitter,<br>If you haven't typed: <br>$ pip install gradio<br>yet, now would be a damn good time.<br>Especially if you are working in computer vision & deploying models in the real world. ",
|
||||
"likes": 19,
|
||||
"timestamp": "12:53 PM · Nov 5, 2020",
|
||||
"profile_pic": "1013607349943058433.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Tanishq Mathew Abraham",
|
||||
"handle": "iScienceLuvr",
|
||||
"link": "https://twitter.com/iScienceLuvr/status/1460716613032837120",
|
||||
"content": "After training an ML model, the BEST way to showcase it to the world is to make a demo for others to try! <br>The easiest way to do so is w/ <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, hosted on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@HuggingFace<\/span> Spaces. <br>Read my new blog post to learn how to do this (w/ appearance by <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@fastdotai<\/span>)! <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://tmabraham.github...</span>",
|
||||
"likes": 285,
|
||||
"timestamp": "4:09 PM · Nov 16, 2021",
|
||||
"profile_pic": "ksO1TT2P_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Dipankar Mazumdar",
|
||||
"handle": "Dipankartnt",
|
||||
"link": "https://twitter.com/Dipankartnt/status/1427750254586253318",
|
||||
"content": "I love low-code ML solutions like <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> that do not restricts anyone from making ML accessible. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#machinelearning</span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#datascience</span>",
|
||||
"likes": 0,
|
||||
"timestamp": "5:52 PM · Aug 17, 2021",
|
||||
"profile_pic": "GDLc7Oe4_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Charly Wargnier",
|
||||
"handle": "DataChaz",
|
||||
"link": "https://twitter.com/DataChaz/status/1351290055894179842",
|
||||
"content": "Pretty neat that <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@GradioML<\/span>!\uD83D\uDC0D\uD83D\uDD25 <br>+ Generate an easy-to-use UI for your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#ML<\/span> model, function, or <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#API<\/span> with only a few lines of code!<br>+ Integrate directly into your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@ProjectJupyter<\/span> notebook<br>+ or share a link with anyone<br><br>h\/t <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@VincentTerrasi<\/span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning<\/span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">www.gradio.app</span>",
|
||||
"likes": 18,
|
||||
"timestamp": "5:07 PM · Jan 18, 2021",
|
||||
"profile_pic": "1362781887098454025.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Chua Chin Hon",
|
||||
"handle": "chinhon",
|
||||
"link": "https://twitter.com/chinhon/status/1452510073452859392",
|
||||
"content": "What's exciting about ML in 2021 is how the building blocks r coming together. Built this headline writer using: <br>- AutoNLP to finetune Bart<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> for the UI<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@huggingface</span>'s Spaces for hosting and compute <br>Try it here: <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://huggingface.co/spa...</span><br>",
|
||||
"likes": 61,
|
||||
"timestamp": "10:39 PM · Oct 24, 2021",
|
||||
"profile_pic": "R1gj6nb3_x96.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Poonam Ligade @Jarvislabs.ai",
|
||||
"handle": "Poonamligade",
|
||||
"link": "https://twitter.com/Poonamligade/status/1521740054368251905",
|
||||
"content": "My son is fascinated with all things about dinosaurs. I built a \uD83E\uDD96 \uD83E\uDD95 classifier for him as homework for the first week of the fastai cohort. <br> I used <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio<\/span>, and deployed on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@jarvislabsai</span>. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">http://dinoapp.jarvis..<\/span>",
|
||||
"likes": 305,
|
||||
"timestamp": "2:34 AM · May 4, 2022",
|
||||
"profile_pic": "8vyTl51q_400x400.jpeg"
|
||||
}
|
||||
]
|
||||
{
|
||||
"name": "Amar Saini",
|
||||
"handle": "_Epoching_",
|
||||
"link": "https://twitter.com/_Epoching_/status/1471091318482825219",
|
||||
"content": "Just built a ️<span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> app for a video related deep learning project. <br> I’m astonished by how simple it is to use & how elegant it looks! Lots and lots of great features & flexibility. Thanks for making this ❤ ",
|
||||
"likes": 47,
|
||||
"timestamp": "7:14 AM · Dec 15, 2021",
|
||||
"profile_pic": "pwMrDOBv_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Will Rice",
|
||||
"handle": "_Will_Rice",
|
||||
"link": "https://twitter.com/_Will_Rice/status/1430258610131582979",
|
||||
"content": "Just tried out <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> and I am very impressed. Only took like 10mins to put together a <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#tts</span> demo.",
|
||||
"likes": 11,
|
||||
"timestamp": "4:00 PM · Aug 24, 2021",
|
||||
"profile_pic": "LsCnjnsl_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Roxana Daneshjou MD/PhD",
|
||||
"handle": "RoxanaDaneshjou",
|
||||
"link": "https://twitter.com/RoxanaDaneshjou/status/1418399829944721415",
|
||||
"content": "Honestly, without <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>, we would not be doing a real time AI trial. We have many other ideas for algorithms we want to test through clinical trials, and we know it's possible thanks to <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>.",
|
||||
"likes": 15,
|
||||
"timestamp": "7:37 PM · Jul 22, 2021",
|
||||
"profile_pic": "ITFspAMm_x96.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Vinay Prabhu",
|
||||
"handle": "vinayprabhu",
|
||||
"link": "https://twitter.com/vinayprabhu/status/1324409497641652225",
|
||||
"content": "Dear <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning</span> twitter,<br>If you haven't typed: <br>$ pip install gradio<br>yet, now would be a damn good time.<br>Especially if you are working in computer vision & deploying models in the real world. ",
|
||||
"likes": 19,
|
||||
"timestamp": "12:53 PM · Nov 5, 2020",
|
||||
"profile_pic": "1013607349943058433.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Tanishq Mathew Abraham",
|
||||
"handle": "iScienceLuvr",
|
||||
"link": "https://twitter.com/iScienceLuvr/status/1460716613032837120",
|
||||
"content": "After training an ML model, the BEST way to showcase it to the world is to make a demo for others to try! <br>The easiest way to do so is w/ <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>, hosted on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@HuggingFace</span> Spaces. <br>Read my new blog post to learn how to do this (w/ appearance by <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@fastdotai</span>)! <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://tmabraham.github...</span>",
|
||||
"likes": 285,
|
||||
"timestamp": "4:09 PM · Nov 16, 2021",
|
||||
"profile_pic": "ksO1TT2P_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Dipankar Mazumdar",
|
||||
"handle": "Dipankartnt",
|
||||
"link": "https://twitter.com/Dipankartnt/status/1427750254586253318",
|
||||
"content": "I love low-code ML solutions like <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> that do not restricts anyone from making ML accessible. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#machinelearning</span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#datascience</span>",
|
||||
"likes": 0,
|
||||
"timestamp": "5:52 PM · Aug 17, 2021",
|
||||
"profile_pic": "GDLc7Oe4_400x400.jpeg"
|
||||
},
|
||||
{
|
||||
"name": "Charly Wargnier",
|
||||
"handle": "DataChaz",
|
||||
"link": "https://twitter.com/DataChaz/status/1351290055894179842",
|
||||
"content": "Pretty neat that <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@GradioML</span>!\uD83D\uDC0D\uD83D\uDD25 <br>+ Generate an easy-to-use UI for your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#ML</span> model, function, or <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#API</span> with only a few lines of code!<br>+ Integrate directly into your <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@ProjectJupyter</span> notebook<br>+ or share a link with anyone<br><br>h/t <br> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@VincentTerrasi</span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">#MachineLearning</span> <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">www.gradio.app</span>",
|
||||
"likes": 18,
|
||||
"timestamp": "5:07 PM · Jan 18, 2021",
|
||||
"profile_pic": "1362781887098454025.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Chua Chin Hon",
|
||||
"handle": "chinhon",
|
||||
"link": "https://twitter.com/chinhon/status/1452510073452859392",
|
||||
"content": "What's exciting about ML in 2021 is how the building blocks r coming together. Built this headline writer using: <br>- AutoNLP to finetune Bart<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span> for the UI<br>- <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@huggingface</span>'s Spaces for hosting and compute <br>Try it here: <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">https://huggingface.co/spa...</span><br>",
|
||||
"likes": 61,
|
||||
"timestamp": "10:39 PM · Oct 24, 2021",
|
||||
"profile_pic": "R1gj6nb3_x96.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Poonam Ligade @Jarvislabs.ai",
|
||||
"handle": "Poonamligade",
|
||||
"link": "https://twitter.com/Poonamligade/status/1521740054368251905",
|
||||
"content": "My son is fascinated with all things about dinosaurs. I built a \uD83E\uDD96 \uD83E\uDD95 classifier for him as homework for the first week of the fastai cohort. <br> I used <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@Gradio</span>, and deployed on <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">@jarvislabsai</span>. <span class=\"font-semibold\" style=\"color: rgb(29, 155, 240);\">http://dinoapp.jarvis..</span>",
|
||||
"likes": 305,
|
||||
"timestamp": "2:34 AM · May 4, 2022",
|
||||
"profile_pic": "8vyTl51q_400x400.jpeg"
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,25 +1,26 @@
|
||||
/** Dispatch event on click outside of node */
|
||||
declare namespace svelte.JSX {
|
||||
interface HTMLProps<T> {
|
||||
onclick_outside?: (e: CustomEvent) => void;
|
||||
}
|
||||
interface HTMLProps<T> {
|
||||
onclick_outside?: (e: CustomEvent) => void;
|
||||
}
|
||||
}
|
||||
|
||||
export function clickOutside(node: Node) {
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (
|
||||
node &&
|
||||
!node.contains(event.target as Node) &&
|
||||
!event.defaultPrevented
|
||||
) {
|
||||
node.dispatchEvent(new CustomEvent("click_outside", node as any));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
|
||||
node.dispatchEvent(
|
||||
new CustomEvent('click_outside', node as any)
|
||||
)
|
||||
}
|
||||
}
|
||||
document.addEventListener("click", handleClick, true);
|
||||
|
||||
document.addEventListener('click', handleClick, true);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener("click", handleClick, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@ import docs_json from "../routes/docs/docs.json";
|
||||
let docs = docs_json;
|
||||
|
||||
export function match(value: string) {
|
||||
return docs.pages.some((p: string) => p === value);
|
||||
}
|
||||
return docs.pages.some((p: string) => p === value);
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@ import guide_names_json from "../routes/guides/json/guide_names.json";
|
||||
let guide_urls = guide_names_json.guide_urls;
|
||||
|
||||
export function match(value: string) {
|
||||
return guide_urls.some((guide: string) => guide === value);
|
||||
return guide_urls.some((guide: string) => guide === value);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { redirects } from './redirects.js';
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
import { redirects } from "./redirects.js";
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export async function load({ url }: any) {
|
||||
if (url.pathname in redirects) {
|
||||
throw redirect(308, redirects[url.pathname as keyof typeof redirects]);
|
||||
}
|
||||
}
|
||||
if (url.pathname in redirects) {
|
||||
throw redirect(308, redirects[url.pathname as keyof typeof redirects]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import gradio_banner from "../assets/img/header-image.jpg";
|
||||
import { logos, tweets } from "../assets";
|
||||
|
||||
|
||||
export async function load({ fetch }: any) {
|
||||
let r = await fetch("https://api.github.com/repos/gradio-app/gradio");
|
||||
let j = await r.json();
|
||||
let star_count = j.stargazers_count;
|
||||
|
||||
let r = await fetch("https://api.github.com/repos/gradio-app/gradio");
|
||||
let j = await r.json();
|
||||
let star_count = j.stargazers_count;
|
||||
|
||||
return {
|
||||
logos,
|
||||
tweets,
|
||||
star_count
|
||||
};
|
||||
}
|
||||
return {
|
||||
logos,
|
||||
tweets,
|
||||
star_count
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import changelog_json from "./changelog.json";
|
||||
import { compile } from 'mdsvex';
|
||||
import { compile } from "mdsvex";
|
||||
let content = changelog_json.content;
|
||||
let versions = changelog_json.versions;
|
||||
import Prism from "prismjs";
|
||||
@ -19,7 +19,7 @@ const langs = {
|
||||
shell: "bash",
|
||||
json: "json",
|
||||
typescript: "typescript",
|
||||
directory: "json",
|
||||
directory: "json"
|
||||
};
|
||||
|
||||
function highlight(code: string, lang: string | undefined) {
|
||||
@ -27,10 +27,10 @@ function highlight(code: string, lang: string | undefined) {
|
||||
|
||||
const highlighted = _lang
|
||||
? `<pre class="language-${lang}"><code>${Prism.highlight(
|
||||
code,
|
||||
Prism.languages[_lang],
|
||||
_lang
|
||||
)}</code></pre>`
|
||||
code,
|
||||
Prism.languages[_lang],
|
||||
_lang
|
||||
)}</code></pre>`
|
||||
: code;
|
||||
|
||||
return highlighted;
|
||||
@ -42,10 +42,10 @@ export async function load() {
|
||||
highlighter: highlight
|
||||
}
|
||||
});
|
||||
content = await compiled?.code || "";
|
||||
content = (await compiled?.code) || "";
|
||||
|
||||
return {
|
||||
content,
|
||||
versions
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,29 +1,32 @@
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import demos_by_category from "./demos.json"
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import demos_by_category from "./demos.json";
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
type Demo = {
|
||||
name: string;
|
||||
dir: string;
|
||||
code: string;
|
||||
highlighted_code?: string;
|
||||
}
|
||||
name: string;
|
||||
dir: string;
|
||||
code: string;
|
||||
highlighted_code?: string;
|
||||
};
|
||||
type Category = {
|
||||
category: string;
|
||||
demos: Demo[];
|
||||
}
|
||||
category: string;
|
||||
demos: Demo[];
|
||||
};
|
||||
|
||||
export async function load() {
|
||||
demos_by_category.forEach((category: Category) => {
|
||||
category.demos.forEach((demo: Demo) => {
|
||||
demo.highlighted_code = Prism.highlight(
|
||||
demo.code,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
demos_by_category.forEach((category: Category) => {
|
||||
category.demos.forEach((demo: Demo) => {
|
||||
demo.highlighted_code = Prism.highlight(demo.code, Prism.languages[language], "python");
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
demos_by_category
|
||||
};
|
||||
return {
|
||||
demos_by_category
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
|
||||
export function load() {
|
||||
throw redirect(302, '/docs/interface');
|
||||
}
|
||||
throw redirect(302, "/docs/interface");
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import docs_json from "../docs.json";
|
||||
import Demos from '../../../components/Demos.svelte';
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import FunctionDoc from '../../../components/FunctionDoc.svelte';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import Demos from "../../../components/Demos.svelte";
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import FunctionDoc from "../../../components/FunctionDoc.svelte";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import { make_slug_processor } from "../../../utils";
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
let docs: { [key: string]: any } = docs_json.docs;
|
||||
let components = docs_json.docs.components;
|
||||
@ -14,101 +14,109 @@ let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
let py_client = docs_json.docs["py-client"];
|
||||
|
||||
|
||||
const COLOR_SETS = [
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"],
|
||||
]
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"]
|
||||
];
|
||||
|
||||
export async function load({ params }: any) {
|
||||
let name = params.doc;
|
||||
let obj;
|
||||
let mode;
|
||||
let headers = [];
|
||||
let method_headers = []
|
||||
const get_slug = make_slug_processor();
|
||||
let name = params.doc;
|
||||
let obj;
|
||||
let mode;
|
||||
let headers = [];
|
||||
let method_headers = [];
|
||||
const get_slug = make_slug_processor();
|
||||
|
||||
for (const key in docs) {
|
||||
for (const o in docs[key]) {
|
||||
if (docs[key][o].name) {
|
||||
docs[key][o].slug = get_slug(docs[key][o].name);
|
||||
}
|
||||
for (const key in docs) {
|
||||
for (const o in docs[key]) {
|
||||
if (docs[key][o].name) {
|
||||
docs[key][o].slug = get_slug(docs[key][o].name);
|
||||
}
|
||||
|
||||
if (docs[key][o].fns && docs[key][o].fns.length) {
|
||||
docs[key][o].fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${docs[key][o].name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if (o == name) {
|
||||
obj = docs[key][o];
|
||||
mode = key;
|
||||
if (docs[key][o].fns && docs[key][o].fns.length) {
|
||||
docs[key][o].fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${docs[key][o].name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if (o == name) {
|
||||
obj = docs[key][o];
|
||||
mode = key;
|
||||
|
||||
if (obj.name == "Interface") {
|
||||
obj.next_obj = "Flagging"
|
||||
} else if (obj.name == "Blocks") {
|
||||
obj.prev_obj = "Combining-Interfaces"
|
||||
obj.next_obj = "Block-Layouts"
|
||||
}
|
||||
if (obj.name == "Interface") {
|
||||
obj.next_obj = "Flagging";
|
||||
} else if (obj.name == "Blocks") {
|
||||
obj.prev_obj = "Combining-Interfaces";
|
||||
obj.next_obj = "Block-Layouts";
|
||||
}
|
||||
|
||||
if ("description" in obj) {
|
||||
headers.push(["Description", "description"])
|
||||
}
|
||||
if ("description" in obj) {
|
||||
headers.push(["Description", "description"]);
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(
|
||||
Prism.highlight(demo[1], Prism.languages[language], "python")
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(
|
||||
obj.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
headers.push(["Example Usage", "example-usage"]);
|
||||
}
|
||||
if (mode === "components") {
|
||||
headers.push(["Behavior", "behavior"]);
|
||||
}
|
||||
if (
|
||||
(obj.parameters.length > 0 && obj.parameters[0].name != "self") ||
|
||||
obj.parameters.length > 1
|
||||
) {
|
||||
headers.push(["Initialization", "initialization"]);
|
||||
}
|
||||
if (mode === "components" && obj.string_shortcuts) {
|
||||
headers.push(["Shortcuts", "shortcuts"]);
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(Prism.highlight(demo[1], Prism.languages[language], "python"));
|
||||
})
|
||||
}
|
||||
if ("demos" in obj) {
|
||||
headers.push(["Demos", "demos"]);
|
||||
}
|
||||
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(obj.example, Prism.languages[language], "python");
|
||||
headers.push(["Example Usage", "example-usage"])
|
||||
}
|
||||
if (mode === "components") {
|
||||
headers.push(["Behavior", "behavior"])
|
||||
}
|
||||
if ((obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1) {
|
||||
headers.push(["Initialization", "initialization"])
|
||||
}
|
||||
if (mode === "components" && obj.string_shortcuts) {
|
||||
headers.push(["Shortcuts", "shortcuts"])
|
||||
}
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
headers.push(["Methods", "methods"]);
|
||||
for (const fn of obj.fns) {
|
||||
method_headers.push([fn.name, fn.slug]);
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
headers.push(["Demos", "demos"])
|
||||
}
|
||||
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
headers.push(["Methods", "methods"])
|
||||
for (const fn of obj.fns) {
|
||||
method_headers.push([fn.name, fn.slug])
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(fn.example, Prism.languages[language], "python");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
obj,
|
||||
mode,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
name,
|
||||
obj,
|
||||
mode,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import docs_json from "../docs.json";
|
||||
import Demos from '../../../components/Demos.svelte';
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import FunctionDoc from '../../../components/FunctionDoc.svelte';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import Demos from "../../../components/Demos.svelte";
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import FunctionDoc from "../../../components/FunctionDoc.svelte";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import { make_slug_processor } from "../../../utils";
|
||||
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
let docs: { [key: string]: any } = docs_json.docs;
|
||||
let components = docs_json.docs.components;
|
||||
@ -15,77 +14,86 @@ let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
let py_client = docs_json.docs["py-client"];
|
||||
|
||||
|
||||
const COLOR_SETS = [
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"],
|
||||
]
|
||||
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"]
|
||||
];
|
||||
|
||||
export async function load() {
|
||||
let objs = [docs.building.row,
|
||||
docs.building.column,
|
||||
docs.building.tab,
|
||||
docs.building.box,
|
||||
docs.building.accordion];
|
||||
let objs = [
|
||||
docs.building.row,
|
||||
docs.building.column,
|
||||
docs.building.tab,
|
||||
docs.building.box,
|
||||
docs.building.accordion
|
||||
];
|
||||
|
||||
let headers = [
|
||||
["Row", "row"],
|
||||
["Column", "column"],
|
||||
["Tab", "tab"],
|
||||
["Box", "box"],
|
||||
["Accordion", "accordion"],
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
let headers = [
|
||||
["Row", "row"],
|
||||
["Column", "column"],
|
||||
["Tab", "tab"],
|
||||
["Box", "box"],
|
||||
["Accordion", "accordion"]
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(Prism.highlight(demo[1], Prism.languages[language], "python"));
|
||||
})
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(obj.example, Prism.languages[language], "python");
|
||||
}
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(
|
||||
Prism.highlight(demo[1], Prism.languages[language], "python")
|
||||
);
|
||||
});
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(
|
||||
obj.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(fn.example, Prism.languages[language], "python");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "block-layouts";
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "block-layouts";
|
||||
|
||||
let description = `Customize the layout of your Blocks UI with the layout classes below.`;
|
||||
let description = `Customize the layout of your Blocks UI with the layout classes below.`;
|
||||
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import docs_json from "../docs.json";
|
||||
import Demos from '../../../components/Demos.svelte';
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import FunctionDoc from '../../../components/FunctionDoc.svelte';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import Demos from "../../../components/Demos.svelte";
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import FunctionDoc from "../../../components/FunctionDoc.svelte";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import { make_slug_processor } from "../../../utils";
|
||||
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
let docs: { [key: string]: any } = docs_json.docs;
|
||||
let components = docs_json.docs.components;
|
||||
@ -15,73 +14,81 @@ let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
let py_client = docs_json.docs["py-client"];
|
||||
|
||||
|
||||
const COLOR_SETS = [
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"],
|
||||
]
|
||||
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"]
|
||||
];
|
||||
|
||||
export async function load() {
|
||||
let objs = [docs.building.tabbedinterface,
|
||||
docs.building.parallel,
|
||||
docs.building.series];
|
||||
let headers = [
|
||||
["Tabbed Interface", "tabbed-interface"],
|
||||
["Parallel", "parallel"],
|
||||
["Series", "series"],
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
let objs = [
|
||||
docs.building.tabbedinterface,
|
||||
docs.building.parallel,
|
||||
docs.building.series
|
||||
];
|
||||
let headers = [
|
||||
["Tabbed Interface", "tabbed-interface"],
|
||||
["Parallel", "parallel"],
|
||||
["Series", "series"]
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(
|
||||
Prism.highlight(demo[1], Prism.languages[language], "python")
|
||||
);
|
||||
});
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(
|
||||
obj.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(Prism.highlight(demo[1], Prism.languages[language], "python"));
|
||||
})
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(obj.example, Prism.languages[language], "python");
|
||||
}
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "combining-interfaces";
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(fn.example, Prism.languages[language], "python");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "combining-interfaces";
|
||||
let description = `Once you have created several Interfaces, we provide several classes that let you start combining them together. For example, you can chain them in <em>Series</em> or compare their outputs in <em>Parallel</em> if the inputs and outputs match accordingly. You can also display arbitrary Interfaces together in a tabbed layout using <em>TabbedInterface</em>.`;
|
||||
|
||||
let description = `Once you have created several Interfaces, we provide several classes that let you start combining them together. For example, you can chain them in <em>Series</em> or compare their outputs in <em>Parallel</em> if the inputs and outputs match accordingly. You can also display arbitrary Interfaces together in a tabbed layout using <em>TabbedInterface</em>.`;
|
||||
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import docs_json from "../docs.json";
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
|
||||
let components = docs_json.docs.components;
|
||||
let helpers = docs_json.docs.helpers;
|
||||
@ -9,13 +9,11 @@ let py_client = docs_json.docs["py-client"];
|
||||
let ordered_events = docs_json.docs.ordered_events;
|
||||
|
||||
export async function load() {
|
||||
|
||||
return {
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,13 +1,12 @@
|
||||
import docs_json from "../docs.json";
|
||||
import Demos from '../../../components/Demos.svelte';
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import FunctionDoc from '../../../components/FunctionDoc.svelte';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import Demos from "../../../components/Demos.svelte";
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import FunctionDoc from "../../../components/FunctionDoc.svelte";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import { make_slug_processor } from "../../../utils";
|
||||
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
let docs: { [key: string]: any } = docs_json.docs;
|
||||
let components = docs_json.docs.components;
|
||||
@ -15,74 +14,82 @@ let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
let py_client = docs_json.docs["py-client"];
|
||||
|
||||
|
||||
const COLOR_SETS = [
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"],
|
||||
]
|
||||
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"]
|
||||
];
|
||||
|
||||
export async function load() {
|
||||
let objs = [docs.building.simplecsvlogger,
|
||||
docs.building.csvlogger,
|
||||
docs.building.huggingfacedatasetsaver];
|
||||
let headers = [
|
||||
["SimpleCSVLogger", "simple-csv-logger"],
|
||||
["CSVLogger", "csv-logger"],
|
||||
["HuggingFaceDatasetSaver", "hugging-face-dataset-saver"],
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
let objs = [
|
||||
docs.building.simplecsvlogger,
|
||||
docs.building.csvlogger,
|
||||
docs.building.huggingfacedatasetsaver
|
||||
];
|
||||
let headers = [
|
||||
["SimpleCSVLogger", "simple-csv-logger"],
|
||||
["CSVLogger", "csv-logger"],
|
||||
["HuggingFaceDatasetSaver", "hugging-face-dataset-saver"]
|
||||
];
|
||||
let method_headers: string[][] = [];
|
||||
const get_slug = make_slug_processor();
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(
|
||||
Prism.highlight(demo[1], Prism.languages[language], "python")
|
||||
);
|
||||
});
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(
|
||||
obj.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(Prism.highlight(demo[1], Prism.languages[language], "python"));
|
||||
})
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(obj.example, Prism.languages[language], "python");
|
||||
}
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(fn.example, Prism.languages[language], "python");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "flagging";
|
||||
|
||||
let mode = "flagging";
|
||||
let description = `A Gradio Interface includes a 'Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of <em>FlaggingCallback</em> to the <em>flagging_callback</em> parameter in the <em>Interface</em> constructor. You can use one of the <em>FlaggingCallback</em> subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.`;
|
||||
|
||||
let description = `A Gradio Interface includes a 'Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of <em>FlaggingCallback</em> to the <em>flagging_callback</em> parameter in the <em>Interface</em> constructor. You can use one of the <em>FlaggingCallback</em> subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.`
|
||||
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import docs_json from "../docs.json";
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { compile } from "mdsvex";
|
||||
@ -14,8 +14,6 @@ import "prismjs/components/prism-typescript";
|
||||
import "prismjs/components/prism-csv";
|
||||
import "prismjs/components/prism-markup";
|
||||
|
||||
|
||||
|
||||
let components = docs_json.docs.components;
|
||||
let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
@ -23,105 +21,103 @@ let py_client = docs_json.docs["py-client"];
|
||||
let js_client = docs_json.js_client;
|
||||
let ordered_events = docs_json.docs.ordered_events;
|
||||
|
||||
|
||||
function plugin() {
|
||||
return function transform(tree: any) {
|
||||
tree.children.forEach((n: any) => {
|
||||
if (n.type === "heading") {
|
||||
// console.log(n);
|
||||
}
|
||||
});
|
||||
};
|
||||
return function transform(tree: any) {
|
||||
tree.children.forEach((n: any) => {
|
||||
if (n.type === "heading") {
|
||||
// console.log(n);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const langs = {
|
||||
python: "python",
|
||||
py: "python",
|
||||
bash: "bash",
|
||||
csv: "csv",
|
||||
html: "html",
|
||||
shell: "bash",
|
||||
json: "json",
|
||||
typescript: "typescript",
|
||||
directory: "json",
|
||||
python: "python",
|
||||
py: "python",
|
||||
bash: "bash",
|
||||
csv: "csv",
|
||||
html: "html",
|
||||
shell: "bash",
|
||||
json: "json",
|
||||
typescript: "typescript",
|
||||
directory: "json"
|
||||
};
|
||||
|
||||
function highlight(code: string, lang: string | undefined) {
|
||||
const _lang = langs[lang as keyof typeof langs] || ""
|
||||
const _lang = langs[lang as keyof typeof langs] || "";
|
||||
|
||||
const highlighted = _lang
|
||||
? `<pre class="language-${lang}"><code>${Prism.highlight(
|
||||
code,
|
||||
Prism.languages[_lang],
|
||||
_lang
|
||||
)}</code></pre>`
|
||||
: code;
|
||||
const highlighted = _lang
|
||||
? `<pre class="language-${lang}"><code>${Prism.highlight(
|
||||
code,
|
||||
Prism.languages[_lang],
|
||||
_lang
|
||||
)}</code></pre>`
|
||||
: code;
|
||||
|
||||
return highlighted;
|
||||
return highlighted;
|
||||
}
|
||||
|
||||
export async function load({ params }: any) {
|
||||
const guide_slug = [];
|
||||
const guide_slug = [];
|
||||
|
||||
const get_slug = make_slug_processor();
|
||||
function plugin() {
|
||||
return function transform(tree: any) {
|
||||
tree.children.forEach((n: any) => {
|
||||
if (
|
||||
n.type === "element" &&
|
||||
["h2", "h3", "h4", "h5", "h6"].includes(n.tagName)
|
||||
) {
|
||||
const str_of_heading = to_string(n);
|
||||
const slug = get_slug(str_of_heading);
|
||||
const get_slug = make_slug_processor();
|
||||
function plugin() {
|
||||
return function transform(tree: any) {
|
||||
tree.children.forEach((n: any) => {
|
||||
if (
|
||||
n.type === "element" &&
|
||||
["h2", "h3", "h4", "h5", "h6"].includes(n.tagName)
|
||||
) {
|
||||
const str_of_heading = to_string(n);
|
||||
const slug = get_slug(str_of_heading);
|
||||
|
||||
guide_slug.push({
|
||||
text: str_of_heading,
|
||||
href: `#${slug}`,
|
||||
level: parseInt(n.tagName.replace("h", ""))
|
||||
});
|
||||
guide_slug.push({
|
||||
text: str_of_heading,
|
||||
href: `#${slug}`,
|
||||
level: parseInt(n.tagName.replace("h", ""))
|
||||
});
|
||||
|
||||
if (!n.children) n.children = [];
|
||||
n.properties.className = ["group"]
|
||||
n.properties.id = [slug];
|
||||
n.children.push({
|
||||
type: "element",
|
||||
tagName: "a",
|
||||
properties: {
|
||||
href: `#${slug}`,
|
||||
className: ["invisible", "group-hover-visible"],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element",
|
||||
tagName: "img",
|
||||
properties: {
|
||||
src: anchor,
|
||||
className: ["anchor-img"]
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
if (!n.children) n.children = [];
|
||||
n.properties.className = ["group"];
|
||||
n.properties.id = [slug];
|
||||
n.children.push({
|
||||
type: "element",
|
||||
tagName: "a",
|
||||
properties: {
|
||||
href: `#${slug}`,
|
||||
className: ["invisible", "group-hover-visible"]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element",
|
||||
tagName: "img",
|
||||
properties: {
|
||||
src: anchor,
|
||||
className: ["anchor-img"]
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const compiled = await compile(js_client, {
|
||||
rehypePlugins: [plugin],
|
||||
highlight: {
|
||||
highlighter: highlight
|
||||
}
|
||||
});
|
||||
let readme_html = await compiled?.code;
|
||||
const compiled = await compile(js_client, {
|
||||
rehypePlugins: [plugin],
|
||||
highlight: {
|
||||
highlighter: highlight
|
||||
}
|
||||
});
|
||||
let readme_html = await compiled?.code;
|
||||
|
||||
return {
|
||||
readme_html,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
};
|
||||
return {
|
||||
readme_html,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import docs_json from "../docs.json";
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
|
||||
let components = docs_json.docs.components;
|
||||
let helpers = docs_json.docs.helpers;
|
||||
@ -8,13 +8,11 @@ let py_client = docs_json.docs["py-client"];
|
||||
let ordered_events = docs_json.docs.ordered_events;
|
||||
|
||||
export async function load() {
|
||||
|
||||
return {
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
ordered_events
|
||||
};
|
||||
}
|
||||
|
||||
151
js/_website/src/routes/docs/themes/+page.server.ts
vendored
151
js/_website/src/routes/docs/themes/+page.server.ts
vendored
@ -1,13 +1,12 @@
|
||||
import docs_json from "../docs.json";
|
||||
import Demos from '../../../components/Demos.svelte';
|
||||
import DocsNav from '../../../components/DocsNav.svelte';
|
||||
import FunctionDoc from '../../../components/FunctionDoc.svelte';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-python';
|
||||
import Demos from "../../../components/Demos.svelte";
|
||||
import DocsNav from "../../../components/DocsNav.svelte";
|
||||
import FunctionDoc from "../../../components/FunctionDoc.svelte";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-python";
|
||||
import { make_slug_processor } from "../../../utils";
|
||||
|
||||
|
||||
let language = 'python';
|
||||
let language = "python";
|
||||
|
||||
let docs: { [key: string]: any } = docs_json.docs;
|
||||
let components = docs_json.docs.components;
|
||||
@ -15,80 +14,86 @@ let helpers = docs_json.docs.helpers;
|
||||
let routes = docs_json.docs.routes;
|
||||
let py_client = docs_json.docs["py-client"];
|
||||
|
||||
|
||||
const COLOR_SETS = [
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"],
|
||||
]
|
||||
|
||||
["from-green-100", "to-green-50"],
|
||||
["from-yellow-100", "to-yellow-50"],
|
||||
["from-red-100", "to-red-50"],
|
||||
["from-blue-100", "to-blue-50"],
|
||||
["from-pink-100", "to-pink-50"],
|
||||
["from-purple-100", "to-purple-50"]
|
||||
];
|
||||
|
||||
export async function load() {
|
||||
let objs = [docs.building.base];
|
||||
let headers = [
|
||||
["Base", "base"],
|
||||
["Initialization", "Base-initialization"],
|
||||
["Methods", "Base-methods"],
|
||||
];
|
||||
let method_headers = [
|
||||
["push_to_hub", "base-push-to-hub"],
|
||||
["from_hub", "base-from-hub"],
|
||||
["load", "base-load"],
|
||||
["dump", "base-dump"],
|
||||
["from_dict", "base-from-dict"],
|
||||
["to_dict", "base-to-dict"],
|
||||
];
|
||||
let objs = [docs.building.base];
|
||||
let headers = [
|
||||
["Base", "base"],
|
||||
["Initialization", "Base-initialization"],
|
||||
["Methods", "Base-methods"]
|
||||
];
|
||||
let method_headers = [
|
||||
["push_to_hub", "base-push-to-hub"],
|
||||
["from_hub", "base-from-hub"],
|
||||
["load", "base-load"],
|
||||
["dump", "base-dump"],
|
||||
["from_dict", "base-from-dict"],
|
||||
["to_dict", "base-to-dict"]
|
||||
];
|
||||
|
||||
const get_slug = make_slug_processor();
|
||||
const get_slug = make_slug_processor();
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
|
||||
for (let obj of objs) {
|
||||
if (obj.name) {
|
||||
obj.slug = get_slug(obj.name);
|
||||
}
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
|
||||
if (obj.fns && obj.fns.length) {
|
||||
obj.fns.forEach((fn: any) => {
|
||||
if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
|
||||
});
|
||||
}
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(
|
||||
Prism.highlight(demo[1], Prism.languages[language], "python")
|
||||
);
|
||||
});
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(
|
||||
obj.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
|
||||
if ("demos" in obj) {
|
||||
obj.demos.forEach((demo: string[]) => {
|
||||
demo.push(Prism.highlight(demo[1], Prism.languages[language], "python"));
|
||||
})
|
||||
}
|
||||
if (obj.example) {
|
||||
obj.highlighted_example = Prism.highlight(obj.example, Prism.languages[language], "python");
|
||||
}
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
for (const fn of obj.fns) {
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(fn.example, Prism.languages[language], "python");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let mode = "flagging";
|
||||
|
||||
let mode = "flagging";
|
||||
let description = `A Gradio Interface includes a 'Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of <em>FlaggingCallback</em> to the <em>flagging_callback</em> parameter in the <em>Interface</em> constructor. You can use one of the <em>FlaggingCallback</em> subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.`;
|
||||
|
||||
let description = `A Gradio Interface includes a 'Flag' button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of <em>FlaggingCallback</em> to the <em>flagging_callback</em> parameter in the <em>Interface</em> constructor. You can use one of the <em>FlaggingCallback</em> subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.`
|
||||
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
objs,
|
||||
mode,
|
||||
description,
|
||||
components,
|
||||
helpers,
|
||||
routes,
|
||||
py_client,
|
||||
COLOR_SETS,
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,82 +1,100 @@
|
||||
export const redirects = {
|
||||
"/controlling-layout": "/guides/controlling-layout",
|
||||
"/state-in-blocks": "/guides/state-in-blocks",
|
||||
"/custom-CSS-and-JS": "/guides/custom-CSS-and-JS",
|
||||
"/blocks-and-event-listeners": "/guides/blocks-and-event-listeners",
|
||||
"/using-blocks-like-functions": "/guides/using-blocks-like-functions",
|
||||
"/using-flagging": "/guides/using-flagging",
|
||||
"/named-entity-recognition": "/guides/named-entity-recognition",
|
||||
"/real-time-speech-recognition": "/guides/real-time-speech-recognition",
|
||||
"/eveloping-faster-with-reload-mode": "/guides/eveloping-faster-with-reload-mode",
|
||||
"/create-your-own-friends-with-a-gan": "/guides/create-your-own-friends-with-a-gan",
|
||||
"/setting-up-a-demo-for-maximum-performance": "/guides/setting-up-a-demo-for-maximum-performance",
|
||||
"/building-a-pictionary-app": "/guides/building-a-pictionary-app",
|
||||
"/creating-a-chatbot": "/guides/creating-a-chatbot",
|
||||
"/how-to-use-D-model-component": "/guides/how-to-use-D-model-component",
|
||||
"/creating-a-new-component": "/guides/creating-a-new-component",
|
||||
"/running-background-tasks": "/guides/running-background-tasks",
|
||||
"/custom-interpretations-with-blocks": "/guides/custom-interpretations-with-blocks",
|
||||
"/reactive-interfaces": "/guides/reactive-interfaces",
|
||||
"/four-kinds-of-interfaces": "/guides/four-kinds-of-interfaces",
|
||||
"/interface-state": "/guides/interface-state",
|
||||
"/ore-on-examples": "/guides/ore-on-examples",
|
||||
"/advanced-interface-features": "/guides/advanced-interface-features",
|
||||
"/key-features": "/guides/key-features",
|
||||
"/quickstart": "/guides/quickstart",
|
||||
"/sharing-your-app": "/guides/sharing-your-app",
|
||||
"/connecting-to-a-database": "/guides/connecting-to-a-database",
|
||||
"/creating-a-realtime-dashboard-from-google-sheets": "/guides/creating-a-realtime-dashboard-from-google-sheets",
|
||||
"/plot-component-for-maps": "/guides/plot-component-for-maps",
|
||||
"/creating-a-dashboard-from-bigquery-data": "/guides/creating-a-dashboard-from-bigquery-data",
|
||||
"/using-gradio-for-tabular-workflows": "/guides/using-gradio-for-tabular-workflows",
|
||||
"/image-classification-in-pytorch": "/guides/image-classification-in-pytorch",
|
||||
"/using-hugging-face-integrations": "/guides/using-hugging-face-integrations",
|
||||
"/Gradio-and-ONNX-on-Hugging-Face": "/guides/Gradio-and-ONNX-on-Hugging-Face",
|
||||
"/image-classification-with-vision-transformers": "/guides/image-classification-with-vision-transformers",
|
||||
"/Gradio-and-Wandb-Integration": "/guides/Gradio-and-Wandb-Integration",
|
||||
"/image-classification-in-tensorflow": "/guides/image-classification-in-tensorflow",
|
||||
"/Gradio-and-Comet": "/guides/Gradio-and-Comet",
|
||||
"/introduction_to_blocks": "/guides/quickstart#more-complexity",
|
||||
"/adding_examples_to_your_app": "/guides/key-features#example-inputs",
|
||||
"/embedding_gradio_demos": "/guides/sharing-your-app#embedding-hosted-spaces",
|
||||
"/getting_started": "/guides/quickstart",
|
||||
"/building_with_blocks": "/guides/building-with-blocks",
|
||||
"/other_tutorials": "/guides/other-tutorials",
|
||||
"/building_interfaces": "/guides/building-interfaces",
|
||||
"/tabular_data_science_and_plots": "/guides/tabular-data-science-and-plots",
|
||||
"/integrating_other_frameworks": "/guides/integrating-other-frameworks",
|
||||
"/controlling_layout": "/guides/controlling-layout",
|
||||
"/state_in_blocks": "/guides/state-in-blocks",
|
||||
"/custom_CSS_and_JS": "/guides/custom-CSS-and-JS",
|
||||
"/blocks_and_event_listeners": "/guides/blocks-and-event-listeners",
|
||||
"/using_blocks_like_functions": "/guides/using-blocks-like-functions",
|
||||
"/using_flagging": "/guides/using-flagging",
|
||||
"/named_entity_recognition": "/guides/named-entity-recognition",
|
||||
"/real_time_speech_recognition": "/guides/real-time-speech-recognition",
|
||||
"/developing_faster_with_reload_mode": "/guides/developing-faster-with-reload-mode",
|
||||
"/create_your_own_friends_with_a_gan": "/guides/create-your-own-friends-with-a-gan",
|
||||
"/setting_up_a_demo_for_maximum_performance": "/guides/setting-up-a-demo-for-maximum-performance",
|
||||
"/building_a_pictionary_app": "/guides/building-a-pictionary-app",
|
||||
"/creating_a_chatbot": "/guides/creating-a-chatbot",
|
||||
"/how_to_use_3D_model_component": "/guides/how-to-use-3D-model-component",
|
||||
"/creating_a_new_component": "/guides/creating-a-new-component",
|
||||
"/running_background_tasks": "/guides/running-background-tasks",
|
||||
"/custom_interpretations_with_blocks": "/guides/custom-interpretations-with-blocks",
|
||||
"/reactive_interfaces": "/guides/reactive-interfaces",
|
||||
"/more_on_examples_and_flagging": "/guides/more-on-examples",
|
||||
"/interface_state": "/guides/interface-state",
|
||||
"/advanced_interface_features": "/guides/advanced-interface-features",
|
||||
"/key_features": "/guides/key-features",
|
||||
"/sharing_your_app": "/guides/sharing-your-app",
|
||||
"/connecting_to_a_database": "/guides/connecting-to-a-database",
|
||||
"/creating_a_realtime_dashboard_from_google_sheets": "/guides/creating-a-realtime-dashboard-from-google-sheets",
|
||||
"/plot_component_for_maps": "/guides/plot-component-for-maps",
|
||||
"/creating_a_dashboard_from_bigquery_data": "/guides/creating-a-dashboard-from-bigquery-data",
|
||||
"/using_gradio_for_tabular_workflows": "/guides/using-gradio-for-tabular-workflows",
|
||||
"/image_classification_in_pytorch": "/guides/image-classification-in-pytorch",
|
||||
"/using_hugging_face_integrations": "/guides/using-hugging-face-integrations",
|
||||
"/Gradio_and_ONNX_on_Hugging_Face": "/guides/Gradio-and-ONNX-on-Hugging-Face",
|
||||
"/image_classification_with_vision_transformers": "/guides/image-classification-with-vision-transformers",
|
||||
"/Gradio_and_Wandb_Integration": "/guides/Gradio-and-Wandb-Integration",
|
||||
"/image_classification_in_tensorflow": "/guides/image-classification-in-tensorflow",
|
||||
}
|
||||
"/controlling-layout": "/guides/controlling-layout",
|
||||
"/state-in-blocks": "/guides/state-in-blocks",
|
||||
"/custom-CSS-and-JS": "/guides/custom-CSS-and-JS",
|
||||
"/blocks-and-event-listeners": "/guides/blocks-and-event-listeners",
|
||||
"/using-blocks-like-functions": "/guides/using-blocks-like-functions",
|
||||
"/using-flagging": "/guides/using-flagging",
|
||||
"/named-entity-recognition": "/guides/named-entity-recognition",
|
||||
"/real-time-speech-recognition": "/guides/real-time-speech-recognition",
|
||||
"/eveloping-faster-with-reload-mode":
|
||||
"/guides/eveloping-faster-with-reload-mode",
|
||||
"/create-your-own-friends-with-a-gan":
|
||||
"/guides/create-your-own-friends-with-a-gan",
|
||||
"/setting-up-a-demo-for-maximum-performance":
|
||||
"/guides/setting-up-a-demo-for-maximum-performance",
|
||||
"/building-a-pictionary-app": "/guides/building-a-pictionary-app",
|
||||
"/creating-a-chatbot": "/guides/creating-a-chatbot",
|
||||
"/how-to-use-D-model-component": "/guides/how-to-use-D-model-component",
|
||||
"/creating-a-new-component": "/guides/creating-a-new-component",
|
||||
"/running-background-tasks": "/guides/running-background-tasks",
|
||||
"/custom-interpretations-with-blocks":
|
||||
"/guides/custom-interpretations-with-blocks",
|
||||
"/reactive-interfaces": "/guides/reactive-interfaces",
|
||||
"/four-kinds-of-interfaces": "/guides/four-kinds-of-interfaces",
|
||||
"/interface-state": "/guides/interface-state",
|
||||
"/ore-on-examples": "/guides/ore-on-examples",
|
||||
"/advanced-interface-features": "/guides/advanced-interface-features",
|
||||
"/key-features": "/guides/key-features",
|
||||
"/quickstart": "/guides/quickstart",
|
||||
"/sharing-your-app": "/guides/sharing-your-app",
|
||||
"/connecting-to-a-database": "/guides/connecting-to-a-database",
|
||||
"/creating-a-realtime-dashboard-from-google-sheets":
|
||||
"/guides/creating-a-realtime-dashboard-from-google-sheets",
|
||||
"/plot-component-for-maps": "/guides/plot-component-for-maps",
|
||||
"/creating-a-dashboard-from-bigquery-data":
|
||||
"/guides/creating-a-dashboard-from-bigquery-data",
|
||||
"/using-gradio-for-tabular-workflows":
|
||||
"/guides/using-gradio-for-tabular-workflows",
|
||||
"/image-classification-in-pytorch": "/guides/image-classification-in-pytorch",
|
||||
"/using-hugging-face-integrations": "/guides/using-hugging-face-integrations",
|
||||
"/Gradio-and-ONNX-on-Hugging-Face": "/guides/Gradio-and-ONNX-on-Hugging-Face",
|
||||
"/image-classification-with-vision-transformers":
|
||||
"/guides/image-classification-with-vision-transformers",
|
||||
"/Gradio-and-Wandb-Integration": "/guides/Gradio-and-Wandb-Integration",
|
||||
"/image-classification-in-tensorflow":
|
||||
"/guides/image-classification-in-tensorflow",
|
||||
"/Gradio-and-Comet": "/guides/Gradio-and-Comet",
|
||||
"/introduction_to_blocks": "/guides/quickstart#more-complexity",
|
||||
"/adding_examples_to_your_app": "/guides/key-features#example-inputs",
|
||||
"/embedding_gradio_demos": "/guides/sharing-your-app#embedding-hosted-spaces",
|
||||
"/getting_started": "/guides/quickstart",
|
||||
"/building_with_blocks": "/guides/building-with-blocks",
|
||||
"/other_tutorials": "/guides/other-tutorials",
|
||||
"/building_interfaces": "/guides/building-interfaces",
|
||||
"/tabular_data_science_and_plots": "/guides/tabular-data-science-and-plots",
|
||||
"/integrating_other_frameworks": "/guides/integrating-other-frameworks",
|
||||
"/controlling_layout": "/guides/controlling-layout",
|
||||
"/state_in_blocks": "/guides/state-in-blocks",
|
||||
"/custom_CSS_and_JS": "/guides/custom-CSS-and-JS",
|
||||
"/blocks_and_event_listeners": "/guides/blocks-and-event-listeners",
|
||||
"/using_blocks_like_functions": "/guides/using-blocks-like-functions",
|
||||
"/using_flagging": "/guides/using-flagging",
|
||||
"/named_entity_recognition": "/guides/named-entity-recognition",
|
||||
"/real_time_speech_recognition": "/guides/real-time-speech-recognition",
|
||||
"/developing_faster_with_reload_mode":
|
||||
"/guides/developing-faster-with-reload-mode",
|
||||
"/create_your_own_friends_with_a_gan":
|
||||
"/guides/create-your-own-friends-with-a-gan",
|
||||
"/setting_up_a_demo_for_maximum_performance":
|
||||
"/guides/setting-up-a-demo-for-maximum-performance",
|
||||
"/building_a_pictionary_app": "/guides/building-a-pictionary-app",
|
||||
"/creating_a_chatbot": "/guides/creating-a-chatbot",
|
||||
"/how_to_use_3D_model_component": "/guides/how-to-use-3D-model-component",
|
||||
"/creating_a_new_component": "/guides/creating-a-new-component",
|
||||
"/running_background_tasks": "/guides/running-background-tasks",
|
||||
"/custom_interpretations_with_blocks":
|
||||
"/guides/custom-interpretations-with-blocks",
|
||||
"/reactive_interfaces": "/guides/reactive-interfaces",
|
||||
"/more_on_examples_and_flagging": "/guides/more-on-examples",
|
||||
"/interface_state": "/guides/interface-state",
|
||||
"/advanced_interface_features": "/guides/advanced-interface-features",
|
||||
"/key_features": "/guides/key-features",
|
||||
"/sharing_your_app": "/guides/sharing-your-app",
|
||||
"/connecting_to_a_database": "/guides/connecting-to-a-database",
|
||||
"/creating_a_realtime_dashboard_from_google_sheets":
|
||||
"/guides/creating-a-realtime-dashboard-from-google-sheets",
|
||||
"/plot_component_for_maps": "/guides/plot-component-for-maps",
|
||||
"/creating_a_dashboard_from_bigquery_data":
|
||||
"/guides/creating-a-dashboard-from-bigquery-data",
|
||||
"/using_gradio_for_tabular_workflows":
|
||||
"/guides/using-gradio-for-tabular-workflows",
|
||||
"/image_classification_in_pytorch": "/guides/image-classification-in-pytorch",
|
||||
"/using_hugging_face_integrations": "/guides/using-hugging-face-integrations",
|
||||
"/Gradio_and_ONNX_on_Hugging_Face": "/guides/Gradio-and-ONNX-on-Hugging-Face",
|
||||
"/image_classification_with_vision_transformers":
|
||||
"/guides/image-classification-with-vision-transformers",
|
||||
"/Gradio_and_Wandb_Integration": "/guides/Gradio-and-Wandb-Integration",
|
||||
"/image_classification_in_tensorflow":
|
||||
"/guides/image-classification-in-tensorflow"
|
||||
};
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version": "3.35.2"}
|
||||
{ "version": "3.35.2" }
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import adapter from "@sveltejs/adapter-static";
|
||||
import { vitePreprocess } from "@sveltejs/kit/vite";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
|
||||
@ -25,9 +25,8 @@ module.exports = {
|
||||
700: "#CE6400",
|
||||
800: "#A45000",
|
||||
900: "#5C2D00"
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mode: "jit",
|
||||
@ -40,4 +39,4 @@ module.exports = {
|
||||
},
|
||||
|
||||
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]
|
||||
};
|
||||
};
|
||||
|
||||
@ -9,13 +9,10 @@
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"./app.d.ts"
|
||||
]
|
||||
"typeRoots": ["node_modules/@types", "./app.d.ts"]
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{
|
||||
"trailingSlash": false
|
||||
}
|
||||
"trailingSlash": false
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { sveltekit } from "@sveltejs/kit/vite";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
|
||||
@ -78,8 +78,8 @@ export function generate_cdn_entry({
|
||||
|
||||
const tree = parse(bundle["index.html"].source as string);
|
||||
const script =
|
||||
Array.from(tree.querySelectorAll("script[type=module]")).find((node) =>
|
||||
node.attributes.src?.startsWith(cdn_url)
|
||||
Array.from(tree.querySelectorAll("script[type=module]")).find(
|
||||
(node) => node.attributes.src?.startsWith(cdn_url)
|
||||
)?.attributes.src || "";
|
||||
|
||||
const output_location = join(config.dir, "gradio.js");
|
||||
|
||||
@ -1,60 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="
|
||||
<!doctype html>
|
||||
<html
|
||||
lang="en"
|
||||
style="
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
"
|
||||
>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
|
||||
/>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1" />
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
<meta property="og:url" content="https://gradio.app/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
|
||||
<meta property="og:title" content="{{ config['title'] or '' }}" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{{ config['simple_description'] or '' }}"
|
||||
/>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:creator" content="@teamGradio" />
|
||||
<meta name="twitter:title" content="{{ config['title'] or '' }}" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{{ config['simple_description'] or '' }}"
|
||||
/>
|
||||
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}" />
|
||||
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
<meta property="og:url" content="https://gradio.app/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
|
||||
<meta property="og:title" content="{{ config['title'] or '' }}" />
|
||||
<meta property="og:description" content="{{ config['simple_description'] or '' }}" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:creator" content="@teamGradio" />
|
||||
<meta name="twitter:title" content="{{ config['title'] or '' }}" />
|
||||
<meta name="twitter:description" content="{{ config['simple_description'] or '' }}" />
|
||||
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}" />
|
||||
<script>
|
||||
window.__gradio_mode__ = "app";
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.__gradio_mode__ = "app";
|
||||
</script>
|
||||
%gradio_config%
|
||||
|
||||
%gradio_config%
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
|
||||
async
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
|
||||
async></script>
|
||||
</head>
|
||||
|
||||
<body style="
|
||||
<body
|
||||
style="
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
">
|
||||
<gradio-app control_page_title="true" embed="false" eager="true"
|
||||
style="display: flex; flex-direction: column; flex-grow: 1">
|
||||
</gradio-app>
|
||||
<script>
|
||||
const ce = document.getElementsByTagName("gradio-app");
|
||||
if (ce[0]) {
|
||||
ce[0].addEventListener("domchange", () => {
|
||||
"
|
||||
>
|
||||
<gradio-app
|
||||
control_page_title="true"
|
||||
embed="false"
|
||||
eager="true"
|
||||
style="display: flex; flex-direction: column; flex-grow: 1"
|
||||
>
|
||||
</gradio-app>
|
||||
<script>
|
||||
const ce = document.getElementsByTagName("gradio-app");
|
||||
if (ce[0]) {
|
||||
ce[0].addEventListener("domchange", () => {
|
||||
document.body.style.padding = "0";
|
||||
});
|
||||
document.body.style.padding = "0";
|
||||
});
|
||||
document.body.style.padding = "0";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<!-- An entrypoint for the Wasm version development -->
|
||||
<html style="margin: 0; padding: 0; height: 100%;">
|
||||
<html style="margin: 0; padding: 0; height: 100%">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
@ -18,7 +18,7 @@
|
||||
<script type="module" src="./src/lite/index.ts"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin: 0; padding: 0; height: 100%;">
|
||||
<body style="margin: 0; padding: 0; height: 100%">
|
||||
<div id="gradio-app"></div>
|
||||
|
||||
<textarea id="code-input" cols="30" rows="10">
|
||||
@ -44,7 +44,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
||||
upload_button.upload(upload_file, upload_button, file_output)
|
||||
|
||||
demo.launch()
|
||||
</textarea>
|
||||
</textarea
|
||||
>
|
||||
<button id="exec-button">Execute</button>
|
||||
|
||||
<textarea id="requirements-input"></textarea>
|
||||
|
||||
@ -76,13 +76,13 @@ describe("Chatbot", () => {
|
||||
|
||||
let value = Array(2).fill([
|
||||
{
|
||||
"name": "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah1.jpg",
|
||||
"mime_type": "image/jpeg",
|
||||
"alt_text": null,
|
||||
"data": null,
|
||||
"is_file": true
|
||||
name: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah1.jpg",
|
||||
mime_type: "image/jpeg",
|
||||
alt_text: null,
|
||||
data: null,
|
||||
is_file: true
|
||||
}
|
||||
])
|
||||
]);
|
||||
|
||||
await component.$set({
|
||||
value: value
|
||||
@ -105,13 +105,13 @@ describe("Chatbot", () => {
|
||||
});
|
||||
let value = Array(2).fill([
|
||||
{
|
||||
"name": "https://gradio-builds.s3.amazonaws.com/demo-files/video_sample.mp4",
|
||||
"mime_type": "video/mp4",
|
||||
"alt_text": null,
|
||||
"data": null,
|
||||
"is_file": true
|
||||
name: "https://gradio-builds.s3.amazonaws.com/demo-files/video_sample.mp4",
|
||||
mime_type: "video/mp4",
|
||||
alt_text: null,
|
||||
data: null,
|
||||
is_file: true
|
||||
}
|
||||
])
|
||||
]);
|
||||
await component.$set({
|
||||
value: value
|
||||
});
|
||||
@ -134,13 +134,13 @@ describe("Chatbot", () => {
|
||||
|
||||
let value = Array(2).fill([
|
||||
{
|
||||
"name": "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
|
||||
"mime_type": "audio/wav",
|
||||
"alt_text": null,
|
||||
"data": null,
|
||||
"is_file": true
|
||||
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
|
||||
mime_type: "audio/wav",
|
||||
alt_text: null,
|
||||
data: null,
|
||||
is_file: true
|
||||
}
|
||||
])
|
||||
]);
|
||||
|
||||
await component.$set({
|
||||
value: value
|
||||
|
||||
@ -39,8 +39,12 @@ export async function wasm_proxied_mount_css(
|
||||
if (existing_link) return;
|
||||
|
||||
if (url.pathname === DYNAMIC_THEME_CSS_URL_PATH) {
|
||||
console.debug("Unmount the prebuilt theme.css before mounting the dynamic theme.css");
|
||||
const existing_prebuilt_css = document.querySelector(`link[href='${PREBUILT_CSS_URL}']`);
|
||||
console.debug(
|
||||
"Unmount the prebuilt theme.css before mounting the dynamic theme.css"
|
||||
);
|
||||
const existing_prebuilt_css = document.querySelector(
|
||||
`link[href='${PREBUILT_CSS_URL}']`
|
||||
);
|
||||
existing_prebuilt_css?.remove();
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,11 @@ declare let GRADIO_VERSION: string;
|
||||
interface GradioAppController {
|
||||
run_code: (code: string) => Promise<void>;
|
||||
run_file: (path: string) => Promise<void>;
|
||||
write: (path: string, data: string | ArrayBufferView, opts: any) => Promise<void>;
|
||||
write: (
|
||||
path: string,
|
||||
data: string | ArrayBufferView,
|
||||
opts: any
|
||||
) => Promise<void>;
|
||||
rename: (old_path: string, new_path: string) => Promise<void>;
|
||||
unlink: (path: string) => Promise<void>;
|
||||
install: (requirements: string[]) => Promise<void>;
|
||||
@ -67,7 +71,7 @@ export function create(options: Options): GradioAppController {
|
||||
gradioWheelUrl: new URL(gradioWheel, import.meta.url).href,
|
||||
gradioClientWheelUrl: new URL(gradioClientWheel, import.meta.url).href,
|
||||
files: options.files ?? {},
|
||||
requirements: options.requirements ?? [],
|
||||
requirements: options.requirements ?? []
|
||||
});
|
||||
|
||||
// Internally, the execution of `runPythonCode()` or `runPythonFile()` is queued
|
||||
@ -181,10 +185,18 @@ globalThis.createGradioApp = create;
|
||||
|
||||
declare let BUILD_MODE: string;
|
||||
if (BUILD_MODE === "dev") {
|
||||
const code_input = document.getElementById("code-input") as HTMLTextAreaElement;
|
||||
const exec_button = document.getElementById("exec-button") as HTMLButtonElement;
|
||||
const requirements_input = document.getElementById("requirements-input") as HTMLTextAreaElement;
|
||||
const install_button = document.getElementById("install-button") as HTMLButtonElement;
|
||||
const code_input = document.getElementById(
|
||||
"code-input"
|
||||
) as HTMLTextAreaElement;
|
||||
const exec_button = document.getElementById(
|
||||
"exec-button"
|
||||
) as HTMLButtonElement;
|
||||
const requirements_input = document.getElementById(
|
||||
"requirements-input"
|
||||
) as HTMLTextAreaElement;
|
||||
const install_button = document.getElementById(
|
||||
"install-button"
|
||||
) as HTMLButtonElement;
|
||||
|
||||
function parse_requirements(text: string) {
|
||||
return text
|
||||
@ -219,14 +231,14 @@ if (BUILD_MODE === "dev") {
|
||||
exec_button.onclick = () => {
|
||||
console.debug("exec_button.onclick");
|
||||
controller.run_code(code_input.value);
|
||||
console.debug("Rerun finished")
|
||||
}
|
||||
console.debug("Rerun finished");
|
||||
};
|
||||
|
||||
install_button.onclick = async () => {
|
||||
console.debug("install_button.onclick");
|
||||
const requirements = parse_requirements(requirements_input.value)
|
||||
console.debug("requirements", requirements)
|
||||
const requirements = parse_requirements(requirements_input.value);
|
||||
console.debug("requirements", requirements);
|
||||
controller.install(requirements);
|
||||
console.debug("Install finished")
|
||||
}
|
||||
console.debug("Install finished");
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { test, expect } from "@gradio/tootils";
|
||||
|
||||
test("when using an iterative function the UI should update over time as iteration results are received", async ({ page }) => {
|
||||
test("when using an iterative function the UI should update over time as iteration results are received", async ({
|
||||
page
|
||||
}) => {
|
||||
let first_iteration;
|
||||
let fourth_iteration;
|
||||
let last_iteration;
|
||||
@ -40,7 +42,9 @@ test("when using an iterative function the UI should update over time as iterati
|
||||
await expect(textbox).toHaveValue("8");
|
||||
});
|
||||
|
||||
test("when using an iterative function it should be possible to cancel the function, after which the UI should stop updating", async ({ page }) => {
|
||||
test("when using an iterative function it should be possible to cancel the function, after which the UI should stop updating", async ({
|
||||
page
|
||||
}) => {
|
||||
let first_iteration;
|
||||
const start_button = await page.locator("button", {
|
||||
hasText: /Start Iterating/
|
||||
|
||||
@ -1,108 +1,179 @@
|
||||
import { test, expect } from "@gradio/tootils";
|
||||
|
||||
test("text input by a user should be shown in the chatbot as a paragraph", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
await textbox.fill("Lorem ipsum");
|
||||
await page.keyboard.press('Enter');
|
||||
const user_message = await page.getByTestId('user').first().getByRole('paragraph').textContent();
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
await expect(user_message).toEqual("Lorem ipsum");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
test("text input by a user should be shown in the chatbot as a paragraph", async ({
|
||||
page
|
||||
}) => {
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
await textbox.fill("Lorem ipsum");
|
||||
await page.keyboard.press("Enter");
|
||||
const user_message = await page
|
||||
.getByTestId("user")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
await expect(user_message).toEqual("Lorem ipsum");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("images uploaded by a user should be shown in the chat", async ({ page }) => {
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
await page.getByRole('button', { name: '📁' }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("./test/files/cheetah1.jpg");
|
||||
await page.keyboard.press('Enter');
|
||||
test("images uploaded by a user should be shown in the chat", async ({
|
||||
page
|
||||
}) => {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.getByRole("button", { name: "📁" }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("./test/files/cheetah1.jpg");
|
||||
await page.keyboard.press("Enter");
|
||||
|
||||
const user_message = await page.getByTestId('user').first().getByRole('img');
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
const image_data = await user_message.getAttribute("src");
|
||||
await expect(image_data).toContain("cheetah1.jpg");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
const user_message = await page.getByTestId("user").first().getByRole("img");
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
const image_data = await user_message.getAttribute("src");
|
||||
await expect(image_data).toContain("cheetah1.jpg");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("audio uploaded by a user should be shown in the chatbot", async ({ page }) => {
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
await page.getByRole('button', { name: '📁' }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("../../test/test_files/audio_sample.wav");
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
const user_message = await page.getByTestId('user').first().locator('audio');
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
const audio_data = await user_message.getAttribute("src");
|
||||
await expect(audio_data).toContain("audio_sample.wav");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
test("audio uploaded by a user should be shown in the chatbot", async ({
|
||||
page
|
||||
}) => {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.getByRole("button", { name: "📁" }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("../../test/test_files/audio_sample.wav");
|
||||
await page.keyboard.press("Enter");
|
||||
|
||||
const user_message = await page.getByTestId("user").first().locator("audio");
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
const audio_data = await user_message.getAttribute("src");
|
||||
await expect(audio_data).toContain("audio_sample.wav");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("videos uploaded by a user should be shown in the chatbot", async ({ page }) => {
|
||||
const fileChooserPromise = page.waitForEvent('filechooser');
|
||||
await page.getByRole('button', { name: '📁' }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("../../test/test_files/video_sample.mp4");
|
||||
await page.keyboard.press('Enter');
|
||||
test("videos uploaded by a user should be shown in the chatbot", async ({
|
||||
page
|
||||
}) => {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.getByRole("button", { name: "📁" }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles("../../test/test_files/video_sample.mp4");
|
||||
await page.keyboard.press("Enter");
|
||||
|
||||
const user_message = await page.getByTestId('user').first().locator('video');
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
const video_data = await user_message.getAttribute("src");
|
||||
await expect(video_data).toContain("video_sample.mp4");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
const user_message = await page.getByTestId("user").first().locator("video");
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
const video_data = await user_message.getAttribute("src");
|
||||
await expect(video_data).toContain("video_sample.mp4");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
|
||||
test("markdown input by a user should be correctly formatted: bold, italics, links", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
await textbox.fill("This is **bold text**. This is *italic text*. This is a [link](https://gradio.app).");
|
||||
await page.keyboard.press('Enter');
|
||||
const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
await expect(user_message).toEqual('This is <strong>bold text</strong>. This is <em>italic text</em>. This is a <a href=\"https://gradio.app\" target=\"_blank\" rel=\"noopener noreferrer\">link</a>.');
|
||||
await expect(bot_message).toBeTruthy();
|
||||
test("markdown input by a user should be correctly formatted: bold, italics, links", async ({
|
||||
page
|
||||
}) => {
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
await textbox.fill(
|
||||
"This is **bold text**. This is *italic text*. This is a [link](https://gradio.app)."
|
||||
);
|
||||
await page.keyboard.press("Enter");
|
||||
const user_message = await page
|
||||
.getByTestId("user")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.innerHTML();
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
await expect(user_message).toEqual(
|
||||
'This is <strong>bold text</strong>. This is <em>italic text</em>. This is a <a href="https://gradio.app" target="_blank" rel="noopener noreferrer">link</a>.'
|
||||
);
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("inline code markdown input by the user should be correctly formatted", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
await textbox.fill("This is `code`.");
|
||||
await page.keyboard.press('Enter');
|
||||
const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
await expect(user_message).toEqual("This is <code>code</code>.");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
test("inline code markdown input by the user should be correctly formatted", async ({
|
||||
page
|
||||
}) => {
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
await textbox.fill("This is `code`.");
|
||||
await page.keyboard.press("Enter");
|
||||
const user_message = await page
|
||||
.getByTestId("user")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.innerHTML();
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
await expect(user_message).toEqual("This is <code>code</code>.");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("markdown code blocks input by a user should be rendered correctly with the correct language tag", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
await textbox.fill("```python\nprint('Hello')\nprint('World!')\n```");
|
||||
await page.keyboard.press('Enter');
|
||||
const user_message = await page.getByTestId('user').first().locator('pre').innerHTML();
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
await expect(user_message).toContain("language-python");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
|
||||
test("markdown code blocks input by a user should be rendered correctly with the correct language tag", async ({
|
||||
page
|
||||
}) => {
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
await textbox.fill("```python\nprint('Hello')\nprint('World!')\n```");
|
||||
await page.keyboard.press("Enter");
|
||||
const user_message = await page
|
||||
.getByTestId("user")
|
||||
.first()
|
||||
.locator("pre")
|
||||
.innerHTML();
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
await expect(user_message).toContain("language-python");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
test("LaTeX input by a user should be rendered correctly", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
await textbox.fill("This is LaTeX $$x^2$$");
|
||||
await page.keyboard.press('Enter');
|
||||
const user_message = await page.getByTestId('user').first().getByRole('paragraph').innerHTML();
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph').textContent();
|
||||
await expect(user_message).toContain("katex-display");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
await textbox.fill("This is LaTeX $$x^2$$");
|
||||
await page.keyboard.press("Enter");
|
||||
const user_message = await page
|
||||
.getByTestId("user")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.innerHTML();
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph")
|
||||
.textContent();
|
||||
await expect(user_message).toContain("katex-display");
|
||||
await expect(bot_message).toBeTruthy();
|
||||
});
|
||||
|
||||
|
||||
test("when a new message is sent the chatbot should scroll to the latest message", async ({ page }) => {
|
||||
const textbox = await page.getByTestId('textbox');
|
||||
const line_break = "<br>"
|
||||
await textbox.fill(line_break.repeat(30));
|
||||
await page.keyboard.press('Enter');
|
||||
const bot_message = await page.getByTestId('bot').first().getByRole('paragraph');
|
||||
await expect(bot_message).toBeVisible();
|
||||
const bot_message_text = bot_message.textContent();
|
||||
await expect(bot_message_text).toBeTruthy();
|
||||
});
|
||||
test("when a new message is sent the chatbot should scroll to the latest message", async ({
|
||||
page
|
||||
}) => {
|
||||
const textbox = await page.getByTestId("textbox");
|
||||
const line_break = "<br>";
|
||||
await textbox.fill(line_break.repeat(30));
|
||||
await page.keyboard.press("Enter");
|
||||
const bot_message = await page
|
||||
.getByTestId("bot")
|
||||
.first()
|
||||
.getByRole("paragraph");
|
||||
await expect(bot_message).toBeVisible();
|
||||
const bot_message_text = bot_message.textContent();
|
||||
await expect(bot_message_text).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { test, expect } from "@gradio/tootils";
|
||||
|
||||
test("selecting matplotlib should show matplotlib image and pressing clear should clear output", async ({ page }) => {
|
||||
test("selecting matplotlib should show matplotlib image and pressing clear should clear output", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.getByLabel("Plot Type").click();
|
||||
await page.getByRole("button", { name: "Matplotlib" }).click();
|
||||
await page.getByLabel("Month").click();
|
||||
@ -12,15 +14,17 @@ test("selecting matplotlib should show matplotlib image and pressing clear shoul
|
||||
page.waitForResponse("**/run/predict")
|
||||
]);
|
||||
|
||||
const matplotlib_img = await page.getByTestId('matplotlib').getByRole('img');
|
||||
const matplotlib_img = await page.getByTestId("matplotlib").getByRole("img");
|
||||
const matplotlib_img_data = await matplotlib_img.getAttribute("src");
|
||||
await expect(matplotlib_img_data).toBeTruthy();
|
||||
|
||||
await page.getByRole('button', { name: 'Clear' }).click();
|
||||
await page.getByRole("button", { name: "Clear" }).click();
|
||||
await expect(matplotlib_img).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("selecting plotly should show plotly plot and pressing clear should clear output", async ({ page }) => {
|
||||
test("selecting plotly should show plotly plot and pressing clear should clear output", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.getByLabel("Plot Type").click();
|
||||
await page.getByRole("button", { name: "Plotly" }).click();
|
||||
await page.getByLabel("Month").click();
|
||||
@ -32,11 +36,13 @@ test("selecting plotly should show plotly plot and pressing clear should clear o
|
||||
page.waitForResponse("**/run/predict")
|
||||
]);
|
||||
await expect(page.locator(".js-plotly-plot")).toHaveCount(1);
|
||||
await page.getByRole('button', { name: 'Clear' }).click();
|
||||
await page.getByRole("button", { name: "Clear" }).click();
|
||||
await expect(page.locator(".js-plotly-plot")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("selecting altair should show altair plot and pressing clear should clear output", async ({ page }) => {
|
||||
test("selecting altair should show altair plot and pressing clear should clear output", async ({
|
||||
page
|
||||
}) => {
|
||||
await page.getByLabel("Plot Type").click();
|
||||
await page.getByRole("button", { name: "altair" }).click();
|
||||
await page.getByLabel("Month").click();
|
||||
@ -48,14 +54,16 @@ test("selecting altair should show altair plot and pressing clear should clear o
|
||||
page.waitForResponse("**/run/predict")
|
||||
]);
|
||||
|
||||
const altair = await page.getByTestId('altair');
|
||||
const altair = await page.getByTestId("altair");
|
||||
await expect(altair).toHaveCount(1);
|
||||
|
||||
await page.getByRole('button', { name: 'Clear' }).click();
|
||||
await page.getByRole("button", { name: "Clear" }).click();
|
||||
await expect(altair).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("switching between all 3 plot types and pressing submit should update output component to corresponding plot type", async ({ page }) => {
|
||||
test("switching between all 3 plot types and pressing submit should update output component to corresponding plot type", async ({
|
||||
page
|
||||
}) => {
|
||||
//Matplotlib
|
||||
await page.getByLabel("Plot Type").click();
|
||||
await page.getByRole("button", { name: "Matplotlib" }).click();
|
||||
@ -68,7 +76,7 @@ test("switching between all 3 plot types and pressing submit should update outpu
|
||||
page.waitForResponse("**/run/predict")
|
||||
]);
|
||||
|
||||
const matplotlib_img = await page.getByTestId('matplotlib').getByRole('img');
|
||||
const matplotlib_img = await page.getByTestId("matplotlib").getByRole("img");
|
||||
const matplotlib_img_data = await matplotlib_img.getAttribute("src");
|
||||
await expect(matplotlib_img_data).toBeTruthy();
|
||||
|
||||
@ -90,6 +98,6 @@ test("switching between all 3 plot types and pressing submit should update outpu
|
||||
page.click("text=Submit"),
|
||||
page.waitForResponse("**/run/predict")
|
||||
]);
|
||||
const altair = await page.getByTestId('altair');
|
||||
const altair = await page.getByTestId("altair");
|
||||
await expect(altair).toHaveCount(1);
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<!-- A demo HTML file to test the bundled JS and CSS files -->
|
||||
<html style="margin: 0; padding: 0; height: 100%">
|
||||
<head>
|
||||
@ -22,7 +22,8 @@
|
||||
<body style="margin: 0; padding: 0; height: 100%">
|
||||
<div id="gradio-app"></div>
|
||||
|
||||
<script type="module"> // type="module" is necessary to use `createGradioApp()`, which is loaded with <script type="module" /> tag above.
|
||||
<script type="module">
|
||||
// type="module" is necessary to use `createGradioApp()`, which is loaded with <script type="module" /> tag above.
|
||||
createGradioApp({
|
||||
target: document.getElementById("gradio-app"),
|
||||
code: `
|
||||
|
||||
@ -18,4 +18,4 @@
|
||||
"vega": "^5.22.1",
|
||||
"vega-lite": "^5.12.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export class CrossOriginWorkerMaker {
|
||||
`Failed to load a worker script from ${url.toString()}. Trying to load a cross-origin worker...`
|
||||
);
|
||||
const workerBlob = new Blob([`importScripts("${url.toString()}");`], {
|
||||
type: "text/javascript",
|
||||
type: "text/javascript"
|
||||
});
|
||||
const workerBlobUrl = URL.createObjectURL(workerBlob);
|
||||
this.worker = new Worker(workerBlobUrl);
|
||||
|
||||
@ -11,7 +11,7 @@ import type {
|
||||
import { writeFileWithParents, renameWithParents } from "./file";
|
||||
import { verifyRequirements } from "./requirements";
|
||||
import { makeHttpRequest } from "./http";
|
||||
import scriptRunnerPySource from "./py/script_runner.py?raw"
|
||||
import scriptRunnerPySource from "./py/script_runner.py?raw";
|
||||
|
||||
importScripts("https://cdn.jsdelivr.net/pyodide/v0.23.2/full/pyodide.js");
|
||||
|
||||
@ -26,7 +26,9 @@ let call_asgi_app_from_js: (
|
||||
) => Promise<void>;
|
||||
let run_script: (path: string) => void;
|
||||
|
||||
async function loadPyodideAndPackages(options: InMessageInit["data"]): Promise<void> {
|
||||
async function loadPyodideAndPackages(
|
||||
options: InMessageInit["data"]
|
||||
): Promise<void> {
|
||||
console.debug("Loading Pyodide.");
|
||||
pyodide = await loadPyodide({
|
||||
stdout: console.log,
|
||||
@ -290,7 +292,7 @@ self.onmessage = async (event: MessageEvent<InMessage>): Promise<void> => {
|
||||
|
||||
const replyMessage: ReplyMessageSuccess = {
|
||||
type: "reply:success",
|
||||
data: null,
|
||||
data: null
|
||||
};
|
||||
messagePort.postMessage(replyMessage);
|
||||
});
|
||||
|
||||
@ -33,7 +33,7 @@ export class WorkerProxy {
|
||||
gradioWheelUrl: options.gradioWheelUrl,
|
||||
gradioClientWheelUrl: options.gradioClientWheelUrl,
|
||||
files: options.files,
|
||||
requirements: options.requirements,
|
||||
requirements: options.requirements
|
||||
}
|
||||
}).then(() => {
|
||||
console.debug("WorkerProxy.constructor(): Initialization is done.");
|
||||
@ -53,8 +53,8 @@ export class WorkerProxy {
|
||||
await this.postMessageAsync({
|
||||
type: "run-python-file",
|
||||
data: {
|
||||
path,
|
||||
},
|
||||
path
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -125,8 +125,8 @@ export class WorkerProxy {
|
||||
data: {
|
||||
path,
|
||||
data,
|
||||
opts,
|
||||
},
|
||||
opts
|
||||
}
|
||||
}) as Promise<void>;
|
||||
}
|
||||
|
||||
@ -135,8 +135,8 @@ export class WorkerProxy {
|
||||
type: "file:rename",
|
||||
data: {
|
||||
oldPath,
|
||||
newPath,
|
||||
},
|
||||
newPath
|
||||
}
|
||||
}) as Promise<void>;
|
||||
}
|
||||
|
||||
@ -144,8 +144,8 @@ export class WorkerProxy {
|
||||
return this.postMessageAsync({
|
||||
type: "file:unlink",
|
||||
data: {
|
||||
path,
|
||||
},
|
||||
path
|
||||
}
|
||||
}) as Promise<void>;
|
||||
}
|
||||
|
||||
@ -153,8 +153,8 @@ export class WorkerProxy {
|
||||
return this.postMessageAsync({
|
||||
type: "install",
|
||||
data: {
|
||||
requirements,
|
||||
},
|
||||
requirements
|
||||
}
|
||||
}) as Promise<void>;
|
||||
}
|
||||
|
||||
|
||||
13
package.json
13
package.json
@ -12,8 +12,8 @@
|
||||
"preview:cdn-server": "sirv ./gradio/templates/cdn --single --port=4321 --cors",
|
||||
"preview:cdn-app": "pnpm --filter @gradio/cdn-test dev",
|
||||
"preview:cdn-local": "run-p preview:cdn-server preview:cdn-app",
|
||||
"format:check": "prettier --ignore-path .config/.prettierignore --check --plugin-search-dir=. .",
|
||||
"format:write": "prettier --ignore-path .config/.prettierignore --write --plugin-search-dir=. .",
|
||||
"format:check": "prettier --ignore-path .config/.prettierignore --check --config .config/.prettierrc.json .",
|
||||
"format:write": "prettier --ignore-path .config/.prettierignore --write --config .config/.prettierrc.json .",
|
||||
"lint": "ESLINT_USE_FLAT_CONFIG=true eslint -c .config/eslint.config.js js client/js",
|
||||
"ts:check": "svelte-check --tsconfig tsconfig.json",
|
||||
"test": "pnpm --filter @gradio/client build && vitest dev --config .config/vitest.config.ts",
|
||||
@ -102,14 +102,5 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"storybook": "^7.0.23"
|
||||
},
|
||||
"prettier": {
|
||||
"useTabs": true,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 80,
|
||||
"pluginSearchDirs": [
|
||||
".."
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user