Website svelte migration (#527)

Merge in svelte migration for website Co-authored-by: Ali Abid <aliabid94@gmail.com>
2025-04-18 12:50:30 +08:00 · 2022-02-03 16:29:58 -08:00 · 2022-02-03 16:29:58 -08:00 · cb02501708
commit cb02501708
parent ac22485d33
17 changed files with 61 additions and 32 deletions
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@ -9,8 +9,10 @@ import replace from '@rollup/plugin-replace';
 import json from "@rollup/plugin-json";
 import copy from 'rollup-plugin-copy';
 import postcss from 'rollup-plugin-postcss';
+var fs = require("fs");

 const production = !process.env.ROLLUP_WATCH;
+const PIP_VERSION = fs.readFileSync("../gradio/version.txt")

 function serve() {
 	let server;
@ -56,7 +58,8 @@ export default {
 		json(),
 		replace({
 			BUILD_MODE: production ? "prod" : "dev",
-			BACKEND_URL: production ? "" : "http://localhost:7860/"
+			BACKEND_URL: production ? "" : "http://localhost:7860/",
+			PIP_VERSION: PIP_VERSION
 		}),
 		postcss({
 			extract: 'themes.css',
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@ -15,7 +15,8 @@
    allow_flagging,
    allow_interpretation,
    live,
-    queue;
+    queue,
+    static_src;

  $: embedded = space !== undefined;
 </script>
@ -50,6 +51,7 @@
        {allow_interpretation}
        {live}
        {queue}
+        {static_src}
      />
      {#if article}
        <p class="article prose pt-8 pb-4 max-w-none">
@ -82,7 +84,7 @@
          view the api
          <img
            class="h-5 inline-block"
-            src="./static/img/api-logo.svg"
+            src="{static_src}/static/img/api-logo.svg"
            alt="api"
          />
        </a>
@ -90,7 +92,7 @@
        <a href="https://gradio.app" target="_blank" rel="noreferrer">
          built with <img
            class="h-6 inline-block"
-            src="./static/img/logo.svg"
+            src="{static_src}/static/img/logo.svg"
            alt="logo"
          />
        </a>
--- a/frontend/src/Interface.svelte
+++ b/frontend/src/Interface.svelte
@ -1,4 +1,6 @@
 <script>
+  import { init } from "svelte/internal";
+
  import {
    input_component_map,
    output_component_map,
@ -16,7 +18,8 @@
    allow_interpretation,
    avg_durations,
    live,
-    queue;
+    queue,
+    static_src;

  let examples_dir = root + "file/";
  let interpret_mode = false;
@ -197,6 +200,7 @@
                ]}
                {...input_component}
                {theme}
+                {static_src}
                value={input_values[i]}
                interpretation={interpret_mode
                  ? interpretation_values[i]
@ -246,13 +250,13 @@
                {/if}
              </div>
              <img
-                src="./static/img/logo.svg"
+                src="{static_src}/static/img/logo.svg"
                alt="Pending"
                class="pending h-5 ml-1 inline-block"
              />
            {:else if state === "ERROR"}
              <img
-                src="./static/img/logo_error.svg"
+                src="{static_src}/static/img/logo_error.svg"
                alt="Error"
                class="error h-5 ml-2 inline-block"
              />
@ -269,6 +273,7 @@
                this={output_component_map[output_component.name].component}
                {...output_component}
                {theme}
+                {static_src}
                value={output_values[i]}
              />
            </div>
--- a/frontend/src/components/input/Audio/Component.svelte
+++ b/frontend/src/components/input/Audio/Component.svelte
@ -8,6 +8,7 @@
    setValue,
    theme,
    name,
+    static_src,
    is_example = false;
  export let source;

@ -126,6 +127,7 @@
      edit={() => (mode = "edit")}
      absolute={false}
      {theme}
+      {static_src}
    />

    <audio
--- a/frontend/src/components/input/File/Component.svelte
+++ b/frontend/src/components/input/File/Component.svelte
@ -3,7 +3,7 @@
  import ModifyUpload from "../../utils/ModifyUpload.svelte";
  import { prettyBytes } from "../../utils/helpers";

-  export let value, setValue, theme;
+  export let value, setValue, theme, static_src;
 </script>

 <div class="input-file" {theme}>
@ -15,7 +15,7 @@
    </Upload>
  {:else}
  <div class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative">
-    <ModifyUpload clear={() => setValue(null)} {theme} />
+    <ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
--- a/frontend/src/components/input/Image/Component.svelte
+++ b/frontend/src/components/input/Image/Component.svelte
@ -7,7 +7,7 @@
  import ImageEditor from "../../utils/ImageEditor.svelte";
  import Sketch from "../../utils/Sketch.svelte";
  import Webcam from "../../utils/Webcam.svelte";
-  export let value, setValue, theme;
+  export let value, setValue, theme, static_src;
  export let source = "upload";
  export let tool = "editor";

@ -49,7 +49,7 @@
          Click to Upload
        </Upload>
      {:else if source === "webcam"}
-        <Webcam on:capture={({ detail }) => setValue(detail)} />
+        <Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />
      {/if}
    {:else if tool === "select"}
      <Cropper image={value} on:crop={({ detail }) => setValue(detail)} />
@ -65,6 +65,7 @@
        edit={() => (mode = "edit")}
        clear={() => setValue(null)}
        {theme}
+        {static_src}
      />

      <img class="w-full h-full object-contain" src={value} alt="" />
--- a/frontend/src/components/input/Video/Component.svelte
+++ b/frontend/src/components/input/Video/Component.svelte
@ -3,7 +3,7 @@
  import ModifyUpload from "../../utils/ModifyUpload.svelte";
  import { prettyBytes, playable } from "../../utils/helpers";

-  export let value, setValue, theme;
+  export let value, setValue, theme, static_src;
  export let source;
 </script>

@ -20,7 +20,7 @@
      </Upload>
    {/if}
  {:else}
-    <ModifyUpload clear={() => setValue(null)} {theme} />
+    <ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
    {#if playable(value.name)}
      <!-- svelte-ignore a11y-media-has-caption -->
      <video
--- a/frontend/src/components/utils/ModifyUpload.svelte
+++ b/frontend/src/components/utils/ModifyUpload.svelte
@ -1,5 +1,5 @@
 <script>
-  export let edit, clear, theme;
+  export let edit, clear, theme, static_src;
  export let absolute = true;
 </script>

@ -15,7 +15,7 @@
    >
      <img
        class="h-4 filter dark:invert"
-        src="static/img/edit.svg"
+        src="{static_src}/static/img/edit.svg"
        alt="Edit"
      />
    </button>
@ -26,7 +26,7 @@
  >
    <img
      class="h-4 filter dark:invert"
-      src="static/img/clear.svg"
+      src="{static_src}/static/img/clear.svg"
      alt="Clear"
    />
  </button>
--- a/frontend/src/components/utils/Webcam.svelte
+++ b/frontend/src/components/utils/Webcam.svelte
@ -1,6 +1,8 @@
 <script>
  import { createEventDispatcher, onMount } from "svelte";

+  export let static_src;
+
  let video_source = null;
  let canvas;

@ -58,7 +60,7 @@
  >
    <img
      style="color: white"
-      src="static/img/camera.svg"
+      src="{static_src}/static/img/camera.svg"
      alt="take a screenshot"
      class="w-2/4 h-2/4"
    />
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -7,6 +7,13 @@ window.launchGradio = (config, element_query) => {
  if (config.root === undefined) {
    config.root = "BACKEND_URL";
  }
+  if (window.gradio_mode === "app") {
+    config.static_src = ".";
+  } else if (window.gradio_mode === "website") {
+    config.static_src = "/gradio_static";
+  } else {
+    config.static_src = "https://gradio.s3-us-west-2.amazonaws.com/PIP_VERSION";
+  }
  if (config.detail === "Not authenticated") {
    new Login({
      target: target,
--- a/gradio/inputs.py
+++ b/gradio/inputs.py
@ -1574,6 +1574,8 @@ class Timeseries(InputComponent):
 class State(InputComponent):
    """
    Special hidden component that stores state across runs of the interface.
+    Input type: Any
+    Demos: chatbot
    """

    def __init__(self, label: str = None, default: Any = None):
--- a/gradio/outputs.py
+++ b/gradio/outputs.py
@ -797,6 +797,8 @@ class Timeseries(OutputComponent):
 class State(OutputComponent):
    """
    Special hidden component that stores state across runs of the interface.
+    Output type: Any
+    Demos: chatbot
    """

    def __init__(self, label: Optional[str] = None):
--- a/website/homepage/Dockerfile
+++ b/website/homepage/Dockerfile
@ -1,4 +1,4 @@
-FROM python:latest
+FROM python:3.8

 RUN apt-get update
 RUN apt-get --assume-yes install npm nginx
@ -6,6 +6,8 @@ RUN pip install pandas matplotlib
 RUN mkdir gradio
 WORKDIR /gradio
 COPY ./frontend ./frontend
+RUN mkdir gradio
+COPY ./gradio/version.txt ./gradio/version.txt
 WORKDIR /gradio/frontend
 RUN npm install
 RUN npm run build
@ -29,7 +31,7 @@ RUN npm run build
 WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*
 RUN mkdir ./gradio_static/
-RUN cp -r /gradio/gradio/templates/frontend/static ./gradio_static/static
+RUN cp -r /gradio/gradio/templates/frontend/. ./gradio_static/
 RUN cp -r /gradio/website/homepage/dist/. ./
 RUN cp /gradio/website/homepage/nginx.conf /etc/nginx/conf.d/default.conf

--- a/website/homepage/src/docs_template.html
+++ b/website/homepage/src/docs_template.html
@ -32,7 +32,6 @@
      white-space: pre-wrap !important;
    }
    .prose .code, .prose pre {
-      background-color: whitesmoke;
      color: black;
    }

--- a/website/homepage/src/guides_template.html
+++ b/website/homepage/src/guides_template.html
@ -20,7 +20,7 @@
  <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  

  <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/static/bundle.css" rel="stylesheet">
+  <link href="/gradio_static/build/themes.css" rel="stylesheet">
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/assets/prism.css">
  <style>
@ -38,11 +38,13 @@
    .prose {
      max-width: none !important;
    }
-    .gradio_page .footer {
+    .gradio-page .content {
+      padding: 0px !important;
+    }
+    .gradio-page .footer {
      display: none !important;
    }
    .prose .code, .prose pre {
-      background-color: whitesmoke;
      color: black;
    }
    .prose table {
@ -123,7 +125,7 @@
  <script>
    window.gradio_mode = "website";
  </script>
-  <script defer id='gradio-library' src="/gradio_static/static/bundle.js"></script>
+  <script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
  <script>
    var demo_endpoint = "/demo";
    var demo_names = {{ demo_names|tojson }};
--- a/website/homepage/src/index_template.html
+++ b/website/homepage/src/index_template.html
@ -20,7 +20,7 @@
  <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  

  <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/static/bundle.css" rel="stylesheet">
+  <link href="/gradio_static/build/themes.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="/assets/prism.css">
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
@ -336,7 +336,7 @@ iface <span class="token operator">=</span> gr<span class="token punctuation">.<

    window.gradio_mode = "website";
  </script>
-  <script defer id='gradio-library' src="/gradio_static/static/bundle.js"></script>
+  <script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
  <script>
    document.querySelector("#gradio-library").addEventListener('load', function () {
      launchGradioFromSpaces("abidlabs/Draw", "#demo_mnist");
--- a/website/homepage/src/other_templates/kitchen_sink_template.html
+++ b/website/homepage/src/other_templates/kitchen_sink_template.html
@ -7,7 +7,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gradio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
-  <link href="/gradio_static/static/bundle.css" rel="stylesheet">
+  <link href="/gradio_static/build/bundle.css" rel="stylesheet">
  <style></style>
 </head>

@ -36,7 +36,7 @@
      } else {
        document.querySelector("#target").classList.remove("dark");
      }
-      document.querySelector(".gradio_bg").setAttribute("theme", theme);
+      document.querySelector(".gradio-bg").setAttribute("theme", theme);
    }
    var hidden_inputs = new Set();
    var hidden_outputs = new Set();    
@ -45,12 +45,12 @@
      let style_html = "";
      if (hidden_inputs.size > 0) {
        let inputs_selected = Array.from(hidden_inputs).map(i => `.panel:nth-child(1) .component:nth-child(${i + 1})`).join(", ");
-        let examples_selected = Array.from(hidden_inputs).map(i => `.examples_table tr > *:nth-child(${i + 1})`).join(", ");
+        let examples_selected = Array.from(hidden_inputs).map(i => `.examples-table tr > *:nth-child(${i + 1})`).join(", ");
        style_html += `${inputs_selected}, ${examples_selected} { display: none !important }`;
        if (hidden_inputs.size === input_count - 1) {
-          document.querySelector(".examples_table").classList.add("gallery");
+          document.querySelector(".examples-table").classList.add("gallery");
        } else {
-          document.querySelector(".examples_table").classList.remove("gallery");
+          document.querySelector(".examples-table").classList.remove("gallery");
        }
      }
      if (hidden_outputs.size > 0) {
@ -105,7 +105,7 @@
    var output_count = 0;
    window.gradio_mode = "website";
  </script>
-  <script src="/gradio_static/static/bundle.js"></script>
+  <script src="/gradio_static/build/bundle.js"></script>
  <script>
    let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
    let theme_html = "";