Svelte migration (WIP) (gradio-app#448)

* first migration commit

* style comment

* first mvp working with calculator

* ali components

* carousel

* more changes

* changes

* add examples

* examples support

* more changes

* interpretation

* interpretation

* submission state

* first migration commit

* style comment

* first mvp working with calculator

* ali components

* carousel

* more changes

* changes

* add examples

* examples support

* more changes

* interpretation

* interpretation

* submission state

* base image cropper

* add image editor

* css tweaks

* remove dead code

* finalise sketch tools

* add webcam snapshot source

* tweak config

* tweak config

* tweak config

* tweaks

* reset egg files

* lockfile v2

* image tweaks

* record audio from mic

* add audio input components

* audio tweaks

* editable table

* more table tweaks

* sort columns

* add row/col to table

* add output table

* fix broken paths

* fix svelte build destination

* fix svelte build destination again

* fix gitignore

* fix css

* add themes

* add all themes

* snake core classnames

* actually fix themes this time

* merge changes

Co-authored-by: Ali Abid <[email protected]>
Co-authored-by: Ali Abid <[email protected]>
Co-authored-by: pngwn <[email protected]>

Author: 4 people

.gitignore

@@ -12,6 +12,8 @@ build/
 
 # JS build
 gradio/templates/frontend/static
+gradio/templates/frontend/build
+gradio/templates/frontend/global.css
 
 # Secrets
 .env

demo/kitchen_sink/run.py

@@ -86,9 +86,11 @@ def fn(
     fn,
     inputs=[
         gr.inputs.Textbox(default="Lorem ipsum", label="Textbox"),
-        gr.inputs.Textbox(lines=3, placeholder="Type here..", label="Textbox 2"),
+        gr.inputs.Textbox(lines=3, placeholder="Type here..",
+                          label="Textbox 2"),
         gr.inputs.Number(label="Number", default=42),
-        gr.inputs.Slider(minimum=10, maximum=20, default=15, label="Slider: 10 - 20"),
+        gr.inputs.Slider(minimum=10, maximum=20, default=15,
+                         label="Slider: 10 - 20"),
         gr.inputs.Slider(maximum=20, step=0.04, label="Slider: step @ 0.04"),
         gr.inputs.Checkbox(label="Checkbox"),
         gr.inputs.CheckboxGroup(
@@ -97,14 +99,17 @@ def fn(
         gr.inputs.Radio(label="Radio", choices=CHOICES, default=CHOICES[2]),
         gr.inputs.Dropdown(label="Dropdown", choices=CHOICES),
         gr.inputs.Image(label="Image", optional=True),
-        gr.inputs.Image(label="Image w/ Cropper", tool="select", optional=True),
+        gr.inputs.Image(label="Image w/ Cropper",
+                        tool="select", optional=True),
         gr.inputs.Image(label="Sketchpad", source="canvas", optional=True),
         gr.inputs.Image(label="Webcam", source="webcam", optional=True),
         gr.inputs.Video(label="Video", optional=True),
         gr.inputs.Audio(label="Audio", optional=True),
-        gr.inputs.Audio(label="Microphone", source="microphone", optional=True),
+        gr.inputs.Audio(label="Microphone",
+                        source="microphone", optional=True),
         gr.inputs.File(label="File", optional=True),
-        gr.inputs.Dataframe(label="Dataframe", headers=["Name", "Age", "Gender"]),
+        gr.inputs.Dataframe(label="Dataframe", headers=[
+                            "Name", "Age", "Gender"]),
         gr.inputs.Timeseries(x="time", y=["price", "value"], optional=True),
     ],
     outputs=[
@@ -113,15 +118,17 @@ def fn(
         gr.outputs.Audio(label="Audio"),
         gr.outputs.Image(label="Image"),
         gr.outputs.Video(label="Video"),
-        gr.outputs.HighlightedText(label="HighlightedText"),
+        gr.outputs.HighlightedText(label="HighlightedText", color_map={
+                                   "punc": "pink", "test 0": "blue"}),
         gr.outputs.HighlightedText(label="HighlightedText", show_legend=True),
         gr.outputs.JSON(label="JSON"),
         gr.outputs.HTML(label="HTML"),
         gr.outputs.File(label="File"),
         gr.outputs.Dataframe(label="Dataframe"),
         gr.outputs.Dataframe(label="Numpy", type="numpy"),
         gr.outputs.Carousel("image", label="Carousel"),
-        gr.outputs.Timeseries(x="time", y=["price", "value"], label="Timeseries"),
+        gr.outputs.Timeseries(
+            x="time", y=["price", "value"], label="Timeseries"),
     ],
     examples=[
         [
@@ -147,7 +154,7 @@ def fn(
         ]
     ]
     * 3,
-    theme="huggingface",
+    theme="default",
     title="Kitchen Sink",
     description="Try out all the components!",
     article="Learn more about [Gradio](http://gradio.app)",

demo/zip_two_files/tmp.zip

@@ -1,23 +1,4 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+/node_modules/
+/public/build/
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

frontend/.dockerignore

@@ -1,20 +1,109 @@
-# Gradio Frontend
+*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
 
-This directory contains a React App that renders the frontend of the gradio framework.
+*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)*
 
-## Development Setup
+---
 
-To make changes to the gradio frontend, you will need to have the following installed
-- npm / node
-- python3
-- gradio
+# svelte app
 
-Once node is installed, make sure to run `npm install` in this directory to install the node packages.
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
 
-Because this is only the frontend of the library, you must first launch a Gradio interface running on port 7860, which will be used as a backend. You can use any of the demo projects in the gradio/demo folder to serve this backend role, but make sure that the port is set to 7860. Then you launch the development frontend by running `npm run start`. Once this is run, the frontend development will launch on port 3000. It will connect with port 7860 to load the initial configuration and make API calls on submit. 
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
 
-As a Create-React-App, any changes you make in the code will automatically reflect in the development frontend.
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
 
-## Committing Changes
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
 
-In production, the frontend is compiled and stored in the gradio/gradio/frontend directory. (This readme is in gradio/frontend, a different directory outside the python package). To compile, run `npm run build`. At the end of the process, you should see the message "Compiled successfully" - there may be an warning or error thrown about not being able to find bundle.css which you can ignore. To include the compiled js into your local python version of gradio, run `python3 setup.py install` and then launch a gradio interface. Your changes should be visible on port 7860.
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```