mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-06 12:30:29 +08:00
merge master
This commit is contained in:
dawoodkhan82
commit
725f51cfb4
@ -31,19 +31,32 @@ jobs:
|
||||
- run:
|
||||
name: Build frontend
|
||||
command: |
|
||||
cd frontend
|
||||
npm install
|
||||
npm run build
|
||||
npm i pnpm -g
|
||||
cd ui
|
||||
pnpm i --frozen-lockfile
|
||||
pnpm build
|
||||
- run:
|
||||
command: |
|
||||
mkdir screenshots
|
||||
- run:
|
||||
command: |
|
||||
. venv/bin/activate
|
||||
coverage run -m unittest
|
||||
coverage run -m pytest
|
||||
coverage xml
|
||||
- run:
|
||||
command: |
|
||||
. venv/bin/activate
|
||||
python -m black --check gradio test
|
||||
- run:
|
||||
command: |
|
||||
. venv/bin/activate
|
||||
python -m isort --profile=black --check-only gradio test
|
||||
- run:
|
||||
command: |
|
||||
. venv/bin/activate
|
||||
python -m flake8 --ignore=E731,E501,E722,W503,E126,F401,E203 gradio test
|
||||
- codecov/upload:
|
||||
file: 'coverage.xml'
|
||||
file: 'coverage.xml'
|
||||
- store_artifacts:
|
||||
path: /home/circleci/project/test/tmp
|
||||
destination: screenshots
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/feature_request.md
vendored
2
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@ -1,6 +1,6 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an improvement or new feature for Gradio
|
||||
about: Suggest an improvement or new feature or a new Guide for Gradio
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
@ -5,41 +5,34 @@ Prequisites:
|
||||
* Python 3.7+
|
||||
* Node 16.0+ (optional for backend-only changes, but needed for any frontend changes)
|
||||
|
||||
More than 30 awesome developers have contributed to the `gradio` library, and we'd be thrilled if you would like be the next `gradio` contributor! You can start by forking or cloning the
|
||||
repo (https://github.com/gradio-app/gradio.git) and creating your own branch to work from.
|
||||
More than 30 awesome developers have contributed to the `gradio` library, and we'd be thrilled if you would like be the next `gradio` contributor! You can start by forking or cloning the repo (https://github.com/gradio-app/gradio.git) and creating your own branch to work from.
|
||||
|
||||
### To install the local version of Gradio
|
||||
### Install Gradio locally from the `master` branch
|
||||
|
||||
* Clone this repo
|
||||
* Navigate to the repo folder and run
|
||||
|
||||
```bash
|
||||
bash scripts/install_gradio.sh
|
||||
```
|
||||
|
||||
### To install the local development version of Gradio
|
||||
|
||||
* Navigate to the repo folder and install test requirements (note that it is highly recommended to use a virtual environment since the versions are pinned)
|
||||
|
||||
```
|
||||
bash scripts/install_test_requirements.sh
|
||||
```
|
||||
|
||||
* Install chrome driver and chrome for selenium (necessary for tests)
|
||||
|
||||
```
|
||||
https://sites.google.com/chromium.org/driver/
|
||||
```
|
||||
|
||||
```
|
||||
https://www.google.com/chrome/
|
||||
```
|
||||
|
||||
* Build the front end
|
||||
|
||||
```
|
||||
bash scripts/build_frontend.sh
|
||||
```
|
||||
|
||||
|
||||
### Install development and testing requirements
|
||||
|
||||
* Navigate to the repo folder and install test requirements (note that it is highly recommended to use a virtual environment since the versions are pinned)
|
||||
|
||||
```
|
||||
bash scripts/install_test_requirements.sh
|
||||
```
|
||||
|
||||
* Install [chrome driver](https://sites.google.com/chromium.org/driver/) and [chrome](https://www.google.com/chrome/) for selenium (necessary for tests)
|
||||
|
||||
* Run the tests
|
||||
|
||||
```
|
||||
@ -76,4 +69,13 @@ All PRs should be against `master`. Direct commits to master are blocked, and PR
|
||||
|
||||
We ask that you make sure initial CI checks are passing before requesting a review. One of the Gradio maintainers will merge the PR when all the checks are passing.
|
||||
|
||||
Do not forget the format the backend before pushing.
|
||||
```
|
||||
bash scripts/format_backend.sh
|
||||
```
|
||||
You can run the circleci checks locally as well.
|
||||
```
|
||||
bash scripts/run_circleci.sh
|
||||
```
|
||||
|
||||
*Could these guidelines be clearer? Feel free to open a PR to help us faciltiate open-source contributions!*
|
||||
|
||||
22
README.md
22
README.md
@ -2,7 +2,7 @@
|
||||
|
||||
# Welcome to Gradio
|
||||
|
||||
Quickly create customizable UI components around your models. Gradio makes it easy for you to "play around" with your model in your browser by dragging-and-dropping in your own images, pasting your own text, recording your own voice, etc. and seeing what the model outputs.
|
||||
Quickly create beautiful user interfaces around your machine learning models. Gradio (pronounced GRAY-dee-oh) makes it easy for you to demo your model in your browser or let people "try it out" by dragging-and-dropping in their own images, pasting text, recording their own voice, etc. and seeing what the model outputs.
|
||||
|
||||
|
||||
|
||||
@ -12,16 +12,18 @@ Gradio is useful for:
|
||||
|
||||
* **Deploying** your models quickly with automatic shareable links and getting feedback on model performance
|
||||
|
||||
* **Debugging** your model interactively during development using built-in interpretation visualizations for any model
|
||||
* **Debugging** your model interactively during development using built-in manipulation and interpretation tools
|
||||
|
||||
**You can find an interactive version of the following Getting Started at [https://gradio.app/getting_started](https://gradio.app/getting_started).**
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
**Prerequisite**: Python 3.7+ and that's it!
|
||||
|
||||
### Quick Start
|
||||
|
||||
To get Gradio running with a simple example, follow these three steps:
|
||||
To get Gradio running with a simple "Hello, World" example, follow these three steps:
|
||||
|
||||
<span>1.</span> Install Gradio from pip.
|
||||
|
||||
@ -48,15 +50,15 @@ iface.launch()
|
||||
|
||||
|
||||
|
||||
### The Interface
|
||||
### Understanding the `Interface` class
|
||||
|
||||
Gradio can wrap almost any Python function with an easy-to-use user interface. That function could be anything from a simple tax calculator to a pretrained machine learning model.
|
||||
Gradio can wrap almost any Python function with an easy-to-use user interface. In the example above, we saw a simple text-based function. But the function could be anything from image enhancer to a tax calculator to (most commonly) the prediction function of a pretrained machine learning model.
|
||||
|
||||
The core `Interface` class is initialized with three parameters:
|
||||
|
||||
- `fn`: the function to wrap
|
||||
- `inputs`: the input component type(s)
|
||||
- `outputs`: the output component type(s)
|
||||
- `inputs`: the input component type(s), e.g. `"image"` or `"audio"` ([see docs for complete list](/docs))
|
||||
- `outputs`: the output component type(s) e.g. `"image"` or `"label"` ([see docs for complete list](/docs))
|
||||
|
||||
With these three arguments, we can quickly create interfaces and `launch()` them. But what if you want to change how the UI components look or behave?
|
||||
|
||||
@ -260,9 +262,9 @@ Note there is no submit button, because the interface resubmits automatically on
|
||||
|
||||
### Using State
|
||||
|
||||
Your function may use data that persists beyond a single function call. If the data is something accessible to all function calls, you can create a global variable outside the function call and access it inside the function. For example, you may load a large model outside the function and use it inside the function so that every function call does not need to reload the model.
|
||||
Your function may use data that persists beyond a single function call. If the data is something accessible to all function calls and all users, you can create a global variable outside the function call and access it inside the function. For example, you may load a large model outside the function and use it inside the function so that every function call does not need to reload the model.
|
||||
|
||||
Another type of data persistence Gradio supports is session state, where data persists across multiple submits within a page load. To store data with this permanence, use `gr.get_state` and `gr.set_state` methods.
|
||||
Another type of data persistence Gradio supports is session **state**, where data persists across multiple submits within a page load. However, data is *not* shared between different users of your model. To store data in a session state, you need to do three things: (1) Pass in an extra parameter into your function, which represents the state of the interface. (2) At the end of the function, return the updated value of the state as an extra return value (3) Add the `'state'` input and `'state'` output components when creating your `Interface`. See the chatbot example below:
|
||||
|
||||
```python
|
||||
import random
|
||||
@ -307,7 +309,7 @@ iface.launch()
|
||||
```
|
||||
|
||||
|
||||
Notice how the state persists across submits within each page, but the state is not shared between the two pages.
|
||||
Notice how the state persists across submits within each page, but the state is not shared between the two pages. Some more points to note: you can pass in a default value to the state parameter, which is used as the initial value of the state. The state must be a something that can be serialized to a JSON format (e.g. a dictionary, a list, or a single value. Typically, objects will not work).
|
||||
|
||||
### Flagging
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ def plot_forecast(final_year, companies, noise, show_legend, point_style):
|
||||
ax = fig.add_subplot(111)
|
||||
for i, company in enumerate(companies):
|
||||
series = np.arange(0, year_count, dtype=float)
|
||||
series = series ** 2 * (i + 1)
|
||||
series = series**2 * (i + 1)
|
||||
series += np.random.rand(year_count) * noise
|
||||
ax.plot(x, series, plt_format)
|
||||
if show_legend:
|
||||
|
||||
@ -2,9 +2,11 @@ import gradio as gr
|
||||
|
||||
user_db = {"admin": "admin", "foo": "bar"}
|
||||
|
||||
|
||||
def greet(name):
|
||||
return "Hello " + name + "!!"
|
||||
|
||||
|
||||
iface = gr.Interface(fn=greet, inputs="text", outputs="text")
|
||||
if __name__ == "__main__":
|
||||
iface.launch(auth=lambda u, p: user_db.get(u) == p)
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import gradio as gr
|
||||
|
||||
|
||||
def greet(name):
|
||||
return "Hello " + name + "!!"
|
||||
|
||||
|
||||
iface = gr.Interface(fn=greet, inputs="text", outputs="text")
|
||||
if __name__ == "__main__":
|
||||
iface.launch()
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import gradio as gr
|
||||
|
||||
|
||||
def greet(name):
|
||||
return "Hello " + name + "!"
|
||||
|
||||
|
||||
iface = gr.Interface(
|
||||
fn=greet,
|
||||
inputs=gr.inputs.Textbox(lines=2, placeholder="Name Here..."),
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import gradio as gr
|
||||
|
||||
|
||||
def greet(name, is_morning, temperature):
|
||||
salutation = "Good morning" if is_morning else "Good evening"
|
||||
greeting = "%s %s. It is %s degrees today" % (salutation, name, temperature)
|
||||
celsius = (temperature - 32) * 5 / 9
|
||||
return greeting, round(celsius, 2)
|
||||
|
||||
|
||||
iface = gr.Interface(
|
||||
fn=greet,
|
||||
inputs=["text", "checkbox", gr.inputs.Slider(0, 100)],
|
||||
|
||||
@ -86,11 +86,9 @@ iface = gr.Interface(
|
||||
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(
|
||||
@ -99,17 +97,14 @@ iface = gr.Interface(
|
||||
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=[
|
||||
@ -118,8 +113,9 @@ iface = gr.Interface(
|
||||
gr.outputs.Audio(label="Audio"),
|
||||
gr.outputs.Image(label="Image"),
|
||||
gr.outputs.Video(label="Video"),
|
||||
gr.outputs.HighlightedText(label="HighlightedText", color_map={
|
||||
"punc": "pink", "test 0": "blue"}),
|
||||
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"),
|
||||
@ -127,8 +123,7 @@ iface = gr.Interface(
|
||||
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=[
|
||||
[
|
||||
|
||||
@ -6,11 +6,19 @@ import math
|
||||
|
||||
import numpy as np
|
||||
import torch
|
||||
from pytorch_transformers import (WEIGHTS_NAME, BertConfig,
|
||||
BertForQuestionAnswering, BertTokenizer)
|
||||
from pytorch_transformers import (
|
||||
WEIGHTS_NAME,
|
||||
BertConfig,
|
||||
BertForQuestionAnswering,
|
||||
BertTokenizer,
|
||||
)
|
||||
from torch.utils.data import DataLoader, SequentialSampler, TensorDataset
|
||||
from utils import (get_answer, input_to_squad_example,
|
||||
squad_examples_to_features, to_list)
|
||||
from utils import (
|
||||
get_answer,
|
||||
input_to_squad_example,
|
||||
squad_examples_to_features,
|
||||
to_list,
|
||||
)
|
||||
|
||||
RawResult = collections.namedtuple(
|
||||
"RawResult", ["unique_id", "start_logits", "end_logits"]
|
||||
|
||||
@ -5,8 +5,7 @@ import math
|
||||
|
||||
import numpy as np
|
||||
import torch
|
||||
from pytorch_transformers.tokenization_bert import (BasicTokenizer,
|
||||
whitespace_tokenize)
|
||||
from pytorch_transformers.tokenization_bert import BasicTokenizer, whitespace_tokenize
|
||||
from torch.utils.data import DataLoader, SequentialSampler, TensorDataset
|
||||
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ def reverse_audio(audio):
|
||||
sr, data = audio
|
||||
return (sr, np.flipud(data))
|
||||
|
||||
|
||||
iface = gr.Interface(reverse_audio, "microphone", "audio", examples="audio")
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
@ -13,7 +13,7 @@ def stock_forecast(final_year, companies, noise, show_legend, point_style):
|
||||
ax = fig.add_subplot(111)
|
||||
for i, company in enumerate(companies):
|
||||
series = np.arange(0, year_count, dtype=float)
|
||||
series = series ** 2 * (i + 1)
|
||||
series = series**2 * (i + 1)
|
||||
series += np.random.rand(year_count) * noise
|
||||
ax.plot(x, series, plt_format)
|
||||
if show_legend:
|
||||
|
||||
4
frontend/.gitignore
vendored
4
frontend/.gitignore
vendored
@ -1,4 +0,0 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
@ -1,109 +0,0 @@
|
||||
*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.*
|
||||
|
||||
*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)*
|
||||
|
||||
---
|
||||
|
||||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## 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
|
||||
```
|
||||
10920
frontend/package-lock.json
generated
10920
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --no-clear --port 3000"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"mime-types": "^2.1.34",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.46.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rollup/plugin-replace": "^3.0.1",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"cropperjs": "^1.5.12",
|
||||
"d3-dsv": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"lazy-brush": "^1.0.1",
|
||||
"mime-types": "^2.1.34",
|
||||
"node-sass": "^7.0.1",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"rollup-plugin-copy": "^3.4.0",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-i18n": "^3.3.13",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"svelte-range-slider-pips": "^2.0.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
|
||||
"tui-image-editor": "^3.15.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="height: 100%; margin: 0; padding: 0;">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
<link rel='stylesheet' href='/build/themes.css'>
|
||||
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
|
||||
<title>{{ config['title'] or 'Gradio' }}</title>
|
||||
<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 async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-156449732-1');
|
||||
window.gradio_mode = "app";
|
||||
</script>
|
||||
<script>
|
||||
window.gradio_config = {{ config|tojson }};
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
|
||||
<title>Gradio</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 100%; margin: 0; padding: 0;">
|
||||
<div id="root" style="height: 100%"></div>
|
||||
|
||||
</body>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
|
||||
</html>
|
||||
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="189.38997mm" height="219.02647mm" viewBox="0 0 189.38997 219.02647" version="1.1" id="svg6" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-48.100733,-16.629147)" style="fill:#eb9f59;fill-opacity:1">
|
||||
<path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 99.013488,228.53136 c 0.26339,-0.29104 0.538422,-0.52916 0.611182,-0.52916 0.07276,0 -0.08321,0.23812 -0.346599,0.52916 -0.26339,0.29105 -0.538421,0.52917 -0.611182,0.52917 -0.07276,0 0.08321,-0.23812 0.346599,-0.52917 z m -41.552032,-2.44739 -1.045885,-1.12448 1.12448,1.04588 c 0.618463,0.57524 1.124479,1.08126 1.124479,1.12448 0,0.20018 -0.230413,-1.3e-4 -1.203074,-1.04588 z m 44.594744,-0.56292 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58088 -0.56291,0.36312 z m -53.933229,-23.7126 c 0,-0.3638 0.06006,-0.51263 0.133454,-0.33073 0.0734,0.1819 0.0734,0.47956 0,0.66146 -0.0734,0.1819 -0.133454,0.0331 -0.133454,-0.33073 z M 113.18959,74.654109 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190994 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z M 225.61661,46.927302 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m -51.85833,-2.38125 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 4.49792,-5.291666 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41964,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580887 -0.56291,0.363125 z m -46.43438,-4.662604 c 0.71666,-0.727605 1.36256,-1.322917 1.43532,-1.322917 0.0728,0 -0.45407,0.595312 -1.17074,1.322917 -0.71666,0.727604 -1.36255,1.322916 -1.43531,1.322916 -0.0728,0 0.45407,-0.595312 1.17073,-1.322916 z m 36.3306,-17.64324 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150452 -0.34727,0.138964 -0.30822,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m 2.91042,-0.264583 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34727,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.159851 z m 6.08541,0 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34726,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.159851 z" />
|
||||
<path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 76.606587,235.49438 c 0.190995,-0.0764 0.419201,-0.067 0.507119,0.0209 0.08792,0.0879 -0.06835,0.15047 -0.347266,0.13899 -0.308226,-0.0127 -0.370919,-0.0754 -0.159853,-0.15987 z m -28.47381,-28.79114 c 0.0054,-0.43656 0.06469,-0.58313 0.131773,-0.32569 0.06708,0.25743 0.06267,0.61461 -0.0098,0.79375 -0.07248,0.17913 -0.127363,-0.0315 -0.12197,-0.46806 z m -0.03069,-3.9908 c 0.0127,-0.30822 0.07539,-0.37092 0.159851,-0.15985 0.07643,0.19099 0.06703,0.4192 -0.02088,0.50712 -0.08792,0.0879 -0.150452,-0.0684 -0.138964,-0.34727 z M 172.12117,142.09646 c 0.191,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0683,0.15046 -0.34727,0.13897 -0.30822,-0.0127 -0.37092,-0.0754 -0.15985,-0.15985 z m 2.91042,-0.26458 c 0.19099,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0684,0.15045 -0.34727,0.13897 -0.30823,-0.0127 -0.37092,-0.0754 -0.15985,-0.15986 z m 39.73711,-15.79416 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58089 -0.56291,0.36313 z M 188.64109,84.143941 c 0.40018,-0.06062 1.05503,-0.06062 1.45521,0 0.40018,0.06062 0.0728,0.110222 -0.7276,0.110222 -0.80037,0 -1.12779,-0.0496 -0.72761,-0.110222 z m 48.63808,-0.493999 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190995 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z m -34.8136,-4.872744 c 0.56839,-0.582083 1.09297,-1.058333 1.16573,-1.058333 0.0728,0 -0.33276,0.47625 -0.90115,1.058333 -0.56838,0.582084 -1.09296,1.058334 -1.16572,1.058334 -0.0728,0 0.33275,-0.47625 0.90114,-1.058334 z m 34.84429,-3.836458 c 0.005,-0.436563 0.0647,-0.583126 0.13177,-0.325694 0.0671,0.257431 0.0627,0.614619 -0.01,0.79375 -0.0725,0.179131 -0.12737,-0.03149 -0.12197,-0.468056 z M 165.9076,61.44699 c 0.001,-1.018646 0.049,-1.402943 0.10627,-0.853996 0.0573,0.54895 0.0563,1.382387 -0.002,1.852084 -0.0585,0.469699 -0.10532,0.02056 -0.10414,-0.998088 z m 58.3861,-12.932188 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -48.15417,-6.879166 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41965,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580887 -0.56292,0.363125 z m 4.49792,-5.291667 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -46.30209,-3.96875 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 45.45873,-15.426677 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150452 -0.34727,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m -7.29258,-0.276585 c 0.5457,-0.05708 1.43867,-0.05708 1.98437,0 0.54571,0.05708 0.0992,0.103786 -0.99218,0.103786 -1.09141,0 -1.53789,-0.0467 -0.99219,-0.103786 z m 3.85299,0.01201 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150453 -0.34726,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.15985 z" />
|
||||
<path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 75.212304,235.2476 c -4.768424,-0.86074 -9.89013,-3.14915 -14.156303,-6.32518 -9.921891,-7.38651 -14.817371,-19.77821 -12.085188,-30.5907 1.113261,-4.40567 2.03654,-6.45122 4.739941,-10.50147 0.712058,-1.06681 15.399907,-20.21223 32.639659,-42.54536 l 31.345007,-40.60571 -1.19176,-3.88901 c -1.77435,-5.790137 -2.19948,-7.791017 -3.06496,-14.425346 -0.83847,-6.427195 0.12466,-16.786696 2.23901,-24.082846 1.61271,-5.565148 5.04296,-12.996921 8.10684,-17.563838 9.1454,-13.631799 22.76859,-23.101774 38.33206,-26.646 7.1018,-1.617273 17.42134,-1.617477 24.53969,-5.29e-4 2.79586,0.635148 6.68115,1.784175 6.68115,1.975914 0,0.681228 -8.51197,11.500323 -15.606,19.835923 -8.93791,10.502194 -9.94047,11.958402 -11.0907,16.109143 -2.03047,7.327204 0.13873,14.823086 6.0037,20.746331 4.98075,5.030238 10.43175,7.42704 16.85654,7.41181 3.38749,-0.008 5.42319,-0.468852 8.16035,-1.847262 3.93316,-1.980711 6.66847,-4.747496 10.15627,-10.273147 6.09648,-9.658522 16.39286,-23.861334 18.66603,-25.747895 0.83884,-0.69618 6.11005,9.216877 8.0958,15.225014 5.59821,16.938083 3.0088,35.139117 -7.18486,50.502628 -10.315,15.54639 -27.259,26.03055 -47.2239,29.21996 -3.03525,0.48488 -9.10183,1.03651 -11.45889,1.04194 l -2.26837,0.005 -31.51693,40.81198 c -17.33431,22.44659 -32.05376,41.4589 -32.70988,42.24959 -3.066208,3.69504 -8.092656,7.18047 -12.802697,8.87762 -3.905258,1.40716 -9.76262,1.83248 -14.201609,1.03121 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.1 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 349 B |
@ -1,67 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="5.9403949mm"
|
||||
height="5.9403949mm"
|
||||
viewBox="0 0 5.9403949 5.9403949"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="clear.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="10.925474"
|
||||
inkscape:cx="4.1188143"
|
||||
inkscape:cy="15.559965"
|
||||
inkscape:window-width="1248"
|
||||
inkscape:window-height="770"
|
||||
inkscape:window-x="-6"
|
||||
inkscape:window-y="-6"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-115.10942,-119.22353)">
|
||||
<g
|
||||
id="g239"
|
||||
transform="matrix(0.05138986,0.05138986,-0.05138986,0.05138986,117.0869,112.75317)">
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.295287"
|
||||
id="rect31"
|
||||
width="20"
|
||||
height="80"
|
||||
x="-111.51107"
|
||||
y="42.193726"
|
||||
rx="2.9434128"
|
||||
ry="2.6448057"
|
||||
transform="scale(-1,1)" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.295287"
|
||||
id="rect31-3"
|
||||
width="20"
|
||||
height="80"
|
||||
x="-92.193726"
|
||||
y="-141.51106"
|
||||
rx="2.9434128"
|
||||
ry="2.6448057"
|
||||
transform="matrix(0,-1,-1,0,0,0)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,39 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
fill="#000000"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
height="24px"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="edit.svg"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="11.291667"
|
||||
inkscape:cx="10.538745"
|
||||
inkscape:cy="16.383764"
|
||||
inkscape:window-width="1248"
|
||||
inkscape:window-height="770"
|
||||
inkscape:window-x="-6"
|
||||
inkscape:window-y="-6"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 19.701578,1.2915129 c -0.814834,0 -1.629669,0.307743 -2.251701,0.9246243 l -1.319356,1.3084307 4.503402,4.46611 1.319356,-1.3084308 c 1.242939,-1.2326462 1.242939,-3.232347 0,-4.4661099 C 21.331247,1.5992559 20.516413,1.2915129 19.701578,1.2915129 Z M 14.441745,5.1993591 1.494465,18.039425 v 4.46611 H 5.997867 L 18.945148,9.665469 Z"
|
||||
id="path2"
|
||||
style="stroke-width:1.12118" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,119 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="26.399866mm"
|
||||
height="26.001007mm"
|
||||
viewBox="0 0 26.399867 26.001007"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="logo.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.7313686"
|
||||
inkscape:cx="-5.8578692"
|
||||
inkscape:cy="65.534912"
|
||||
inkscape:window-width="1248"
|
||||
inkscape:window-height="770"
|
||||
inkscape:window-x="-6"
|
||||
inkscape:window-y="-6"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-113.51105,-128.48206)">
|
||||
<path
|
||||
style="fill:#000000;stroke-width:1.02388"
|
||||
id="path21"
|
||||
d="" />
|
||||
<path
|
||||
style="fill:#000000;stroke-width:0.271737"
|
||||
id="path3317"
|
||||
d="" />
|
||||
<g
|
||||
id="g880"
|
||||
transform="matrix(0.56975915,0,0,0.56975915,63.360109,62.438369)">
|
||||
<rect
|
||||
style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
|
||||
id="rect5331-6-3-1-7"
|
||||
width="20.721741"
|
||||
height="5.805635"
|
||||
x="-147.61293"
|
||||
y="69.866898"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
|
||||
id="rect5331-6-3-1"
|
||||
width="20.721741"
|
||||
height="5.805635"
|
||||
x="-147.61293"
|
||||
y="59.790516"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
|
||||
id="rect5331-6-4"
|
||||
width="20.79833"
|
||||
height="5.8430037"
|
||||
x="126.81767"
|
||||
y="201.76166"
|
||||
transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
|
||||
id="rect5331-6-3-1-3"
|
||||
width="20.799767"
|
||||
height="5.8430223"
|
||||
x="-126.81503"
|
||||
y="79.79348"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
|
||||
id="rect5331-6-3"
|
||||
width="20.859709"
|
||||
height="5.8430514"
|
||||
x="105.92157"
|
||||
y="181.56015"
|
||||
transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
|
||||
id="rect5331-6-4-9"
|
||||
width="20.79833"
|
||||
height="5.8430037"
|
||||
x="126.81767"
|
||||
y="211.83795"
|
||||
transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
|
||||
id="rect5331-6-3-1-3-1"
|
||||
width="20.799767"
|
||||
height="5.8430223"
|
||||
x="-126.81503"
|
||||
y="89.869843"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
|
||||
id="rect5331-6-3-2"
|
||||
width="20.859709"
|
||||
height="5.8430514"
|
||||
x="105.92157"
|
||||
y="191.63644"
|
||||
transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
@ -1,134 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="40.810085mm"
|
||||
height="10.393202mm"
|
||||
viewBox="0 0 40.810087 10.393202"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="logo_error.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.7313686"
|
||||
inkscape:cx="97.020959"
|
||||
inkscape:cy="33.133573"
|
||||
inkscape:window-width="1278"
|
||||
inkscape:window-height="991"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g880" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-90.438365,-136.96404)">
|
||||
<path
|
||||
style="fill:#000000;stroke-width:1.02388"
|
||||
id="path21"
|
||||
d="" />
|
||||
<path
|
||||
style="fill:#000000;stroke-width:0.271737"
|
||||
id="path3317"
|
||||
d="" />
|
||||
<g
|
||||
id="g880"
|
||||
transform="matrix(0.56975915,0,0,0.56975915,63.360109,62.438369)">
|
||||
<g
|
||||
id="g842"
|
||||
transform="matrix(0.79495203,0,0,0.79495203,13.79033,28.860894)">
|
||||
<rect
|
||||
style="fill:#f08a8d;fill-opacity:1;stroke-width:0.0478859"
|
||||
id="rect5331-6-3-1-7"
|
||||
width="10.522298"
|
||||
height="2.9480448"
|
||||
x="-146.48871"
|
||||
y="70.555779"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f08a8d;fill-opacity:1;stroke-width:0.0478859"
|
||||
id="rect5331-6-3-1"
|
||||
width="10.522298"
|
||||
height="2.9480448"
|
||||
x="-146.48871"
|
||||
y="65.439095"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#ec7c80;fill-opacity:1;stroke-width:0.0478841"
|
||||
id="rect5331-6-4"
|
||||
width="10.56119"
|
||||
height="2.9670203"
|
||||
x="135.93057"
|
||||
y="206.32899"
|
||||
transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f08a8d;fill-opacity:1;stroke-width:0.0478859"
|
||||
id="rect5331-6-3-1-3"
|
||||
width="10.561918"
|
||||
height="2.9670298"
|
||||
x="-135.92775"
|
||||
y="75.596405"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#ec7c80;fill-opacity:1;stroke-width:0.0479552"
|
||||
id="rect5331-6-3"
|
||||
width="10.592357"
|
||||
height="2.9670446"
|
||||
x="125.25629"
|
||||
y="195.93875"
|
||||
transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#ec7c80;fill-opacity:1;stroke-width:0.0478841"
|
||||
id="rect5331-6-4-9"
|
||||
width="10.56119"
|
||||
height="2.9670203"
|
||||
x="135.93057"
|
||||
y="211.44563"
|
||||
transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#f08a8d;fill-opacity:1;stroke-width:0.0478859"
|
||||
id="rect5331-6-3-1-3-1"
|
||||
width="10.561918"
|
||||
height="2.9670298"
|
||||
x="-135.92775"
|
||||
y="80.713081"
|
||||
transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
|
||||
<rect
|
||||
style="fill:#ec7c80;fill-opacity:1;stroke-width:0.0479552"
|
||||
id="rect5331-6-3-2"
|
||||
width="10.592357"
|
||||
height="2.9670446"
|
||||
x="125.25629"
|
||||
y="201.05539"
|
||||
transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
|
||||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:12.9405px;line-height:1.25;font-family:Arial;-inkscape-font-specification:Arial;fill:#ec7c80;fill-opacity:1;stroke-width:0.323512"
|
||||
x="50.629585"
|
||||
y="144.87993"
|
||||
id="text6662"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan6660"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold';fill:#ec7c80;fill-opacity:1;stroke-width:0.323512"
|
||||
x="50.629585"
|
||||
y="144.87993">ERROR</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,2 +0,0 @@
|
||||
<svg aria-hidden="true" width="5.9403949mm"
|
||||
height="5.9403949mm" focusable="false" data-prefix="fas" data-icon="undo" class="svg-inline--fa fa-undo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 811 B |
@ -1,120 +0,0 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import sveltePreprocess from "svelte-preprocess";
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
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;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true
|
||||
});
|
||||
|
||||
process.on('SIGTERM', toExit);
|
||||
process.on('exit', toExit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: 'src/main.js',
|
||||
output: [{
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
}, {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: '../gradio/templates/frontend/build/bundle.js'
|
||||
}],
|
||||
plugins: [
|
||||
copy({
|
||||
targets: [
|
||||
{ src: 'public/*', dest: '../gradio/templates/frontend' },
|
||||
{ src: 'public/static', dest: '../gradio/templates/frontend' }
|
||||
]
|
||||
}),
|
||||
json(),
|
||||
replace({
|
||||
BUILD_MODE: production ? "prod" : "dev",
|
||||
BACKEND_URL: production ? "" : "http://localhost:7860/",
|
||||
PIP_VERSION: PIP_VERSION
|
||||
}),
|
||||
postcss({
|
||||
extract: 'themes.css',
|
||||
plugins: [
|
||||
require("tailwindcss"),
|
||||
require("postcss-nested"),
|
||||
require("autoprefixer"),
|
||||
]
|
||||
}),
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({
|
||||
// sourceMap: true,
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("tailwindcss"),
|
||||
require("postcss-nested"),
|
||||
require("autoprefixer"),
|
||||
],
|
||||
},
|
||||
}),
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({
|
||||
output: 'bundle.css'
|
||||
}),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
@ -1,121 +0,0 @@
|
||||
// @ts-check
|
||||
|
||||
/** This script modifies the project to support TS code in .svelte files like:
|
||||
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
</script>
|
||||
|
||||
As well as validating the code for CI.
|
||||
*/
|
||||
|
||||
/** To work on this script:
|
||||
rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
|
||||
*/
|
||||
|
||||
const fs = require("fs")
|
||||
const path = require("path")
|
||||
const { argv } = require("process")
|
||||
|
||||
const projectRoot = argv[2] || path.join(__dirname, "..")
|
||||
|
||||
// Add deps to pkg.json
|
||||
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
|
||||
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
|
||||
"svelte-check": "^2.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"typescript": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"@tsconfig/svelte": "^2.0.0"
|
||||
})
|
||||
|
||||
// Add script for checking
|
||||
packageJSON.scripts = Object.assign(packageJSON.scripts, {
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
})
|
||||
|
||||
// Write the package JSON
|
||||
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
|
||||
|
||||
// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
|
||||
const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
|
||||
const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
|
||||
fs.renameSync(beforeMainJSPath, afterMainTSPath)
|
||||
|
||||
// Switch the app.svelte file to use TS
|
||||
const appSveltePath = path.join(projectRoot, "src", "App.svelte")
|
||||
let appFile = fs.readFileSync(appSveltePath, "utf8")
|
||||
appFile = appFile.replace("<script>", '<script lang="ts">')
|
||||
appFile = appFile.replace("export let name;", 'export let name: string;')
|
||||
fs.writeFileSync(appSveltePath, appFile)
|
||||
|
||||
// Edit rollup config
|
||||
const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
|
||||
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
|
||||
|
||||
// Edit imports
|
||||
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import typescript from '@rollup/plugin-typescript';`)
|
||||
|
||||
// Replace name of entry point
|
||||
rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
|
||||
|
||||
// Add preprocessor
|
||||
rollupConfig = rollupConfig.replace(
|
||||
'compilerOptions:',
|
||||
'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
|
||||
);
|
||||
|
||||
// Add TypeScript
|
||||
rollupConfig = rollupConfig.replace(
|
||||
'commonjs(),',
|
||||
'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
|
||||
);
|
||||
fs.writeFileSync(rollupConfigPath, rollupConfig)
|
||||
|
||||
// Add TSConfig
|
||||
const tsconfig = `{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
}`
|
||||
const tsconfigPath = path.join(projectRoot, "tsconfig.json")
|
||||
fs.writeFileSync(tsconfigPath, tsconfig)
|
||||
|
||||
// Add global.d.ts
|
||||
const dtsPath = path.join(projectRoot, "src", "global.d.ts")
|
||||
fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
|
||||
|
||||
// Delete this script, but not during testing
|
||||
if (!argv[2]) {
|
||||
// Remove the script
|
||||
fs.unlinkSync(path.join(__filename))
|
||||
|
||||
// Check for Mac's DS_store file, and if it's the only one left remove it
|
||||
const remainingFiles = fs.readdirSync(path.join(__dirname))
|
||||
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
|
||||
fs.unlinkSync(path.join(__dirname, '.DS_store'))
|
||||
}
|
||||
|
||||
// Check if the scripts folder is empty
|
||||
if (fs.readdirSync(path.join(__dirname)).length === 0) {
|
||||
// Remove the scripts folder
|
||||
fs.rmdirSync(path.join(__dirname))
|
||||
}
|
||||
}
|
||||
|
||||
// Adds the extension recommendation
|
||||
fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
|
||||
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
`)
|
||||
|
||||
console.log("Converted to TypeScript.")
|
||||
|
||||
if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
|
||||
console.log("\nYou will need to re-run your dependency manager to get started.")
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
<script>
|
||||
import Interface from "./Interface.svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { setupi18n } from "./i18n";
|
||||
setupi18n()
|
||||
|
||||
// import { addMessages, init } from "svelte-i18n";
|
||||
// import es from '../public/lang/es.json'
|
||||
// addMessages("es", es);
|
||||
// init({
|
||||
// initialLocale: "es",
|
||||
// });
|
||||
|
||||
|
||||
export let title,
|
||||
description,
|
||||
article,
|
||||
theme,
|
||||
dark,
|
||||
input_components,
|
||||
output_components,
|
||||
examples,
|
||||
fn,
|
||||
root,
|
||||
space,
|
||||
allow_flagging,
|
||||
allow_interpretation,
|
||||
live,
|
||||
queue,
|
||||
static_src;
|
||||
|
||||
$: embedded = space !== undefined;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="gradio-bg flex flex-col dark:bg-gray-600 {window.gradio_mode === 'app'
|
||||
? 'h-full'
|
||||
: 'h-auto'}"
|
||||
{theme}
|
||||
class:dark
|
||||
class:min-h-full={!embedded}
|
||||
>
|
||||
<div
|
||||
class="gradio-page container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50"
|
||||
class:embedded
|
||||
>
|
||||
<div class="content pt-4 px-4 mb-4">
|
||||
{#if title}
|
||||
<h1 class="title text-center p-4 text-4xl">{title}</h1>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="description pb-4">{@html description}</p>
|
||||
{/if}
|
||||
<Interface
|
||||
{input_components}
|
||||
{output_components}
|
||||
{examples}
|
||||
{theme}
|
||||
{fn}
|
||||
{root}
|
||||
{allow_flagging}
|
||||
{allow_interpretation}
|
||||
{live}
|
||||
{queue}
|
||||
{static_src}
|
||||
/>
|
||||
{#if article}
|
||||
<p class="article prose pt-8 pb-4 max-w-none">
|
||||
{@html article}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if embedded}
|
||||
<div class="footer bg-gray-100 p-4 rounded-b">
|
||||
<a
|
||||
href={"https://huggingface.co/spaces/" + space}
|
||||
class="font-semibold"
|
||||
>
|
||||
{space.includes("/")
|
||||
? space[space.indexOf("/") + 1].toUpperCase() +
|
||||
space.substring(space.indexOf("/") + 2)
|
||||
: space}
|
||||
</a>
|
||||
built with
|
||||
<a href="https://gradio.app" class="font-semibold">Gradio</a>, hosted on
|
||||
<a href="https://huggingface.co/spaces" class="font-semibold"
|
||||
>Hugging Face Spaces</a
|
||||
>.
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2"
|
||||
>
|
||||
<a href="api" target="_blank" rel="noreferrer">
|
||||
{$_("interface.view_api")}
|
||||
<img
|
||||
class="h-5 inline-block"
|
||||
src="{static_src}/static/img/api-logo.svg"
|
||||
alt="api"
|
||||
/>
|
||||
</a>
|
||||
•
|
||||
<a href="https://gradio.app" target="_blank" rel="noreferrer">
|
||||
{$_("interface.built_with_Gradio")}
|
||||
<img
|
||||
class="h-6 inline-block"
|
||||
src="{static_src}/static/img/logo.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style global lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.gradio-page.embedded {
|
||||
@apply rounded border-2 border-gray-100 shadow-lg;
|
||||
}
|
||||
.gradio-page:not(.embedded) {
|
||||
@apply h-full;
|
||||
.content {
|
||||
@apply flex-grow flex-shrink-0 pt-4 px-4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,102 +0,0 @@
|
||||
<script>
|
||||
import { input_component_map } from "./components/directory.js";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
export let examples,
|
||||
examples_dir,
|
||||
example_id,
|
||||
setExampleId,
|
||||
examples_per_page,
|
||||
input_components,
|
||||
theme;
|
||||
|
||||
let selected_examples = examples;
|
||||
let gallery = input_components.length === 1;
|
||||
</script>
|
||||
|
||||
<div class="examples" {theme}>
|
||||
<h4 class="text-lg font-semibold my-2">{$_("interface.examples")}</h4>
|
||||
<div
|
||||
class="examples-holder mt-4 inline-block max-w-full"
|
||||
class:gallery
|
||||
class:overflow-x-auto={!gallery}
|
||||
>
|
||||
{#if gallery}
|
||||
<div class="examples-gallery flex gap-2 flex-wrap">
|
||||
{#each selected_examples as example_row, i}
|
||||
<button
|
||||
class="example cursor-pointer p-2 rounded bg-gray-50 dark:bg-gray-700 transition"
|
||||
on:click={() => setExampleId(i)}
|
||||
>
|
||||
<svelte:component
|
||||
this={input_component_map[input_components[0].name].example}
|
||||
{theme}
|
||||
value={example_row[0]}
|
||||
{examples_dir}
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<table
|
||||
class="examples-table table-auto p-2 bg-gray-50 dark:bg-gray-600 rounded max-w-full border-collapse"
|
||||
>
|
||||
<thead class="border-b-2 dark:border-gray-600">
|
||||
<tr>
|
||||
{#each input_components as input_component, i}
|
||||
<th class="py-2 px-4" key={i}>
|
||||
{input_component.label}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each selected_examples as example_row, i}
|
||||
<tr
|
||||
class="cursor-pointer transition"
|
||||
key={i}
|
||||
class:selected={i === example_id}
|
||||
on:click={() => setExampleId(i)}
|
||||
>
|
||||
{#each example_row as example_cell, j}
|
||||
<td class="py-2 px-4">
|
||||
<svelte:component
|
||||
this={input_component_map[input_components[j].name].example}
|
||||
{theme}
|
||||
value={example_cell}
|
||||
{examples_dir}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
.examples[theme="default"] {
|
||||
.examples-holder:not(.gallery) {
|
||||
@apply shadow;
|
||||
.examples-table {
|
||||
@apply rounded dark:bg-gray-700;
|
||||
thead {
|
||||
@apply border-gray-300 dark:border-gray-600;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-yellow-500 dark:bg-red-700 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples-holder .examples-gallery {
|
||||
.example {
|
||||
@apply shadow;
|
||||
}
|
||||
.example:hover {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,396 +0,0 @@
|
||||
<script>
|
||||
import { init } from "svelte/internal";
|
||||
|
||||
import {
|
||||
input_component_map,
|
||||
output_component_map,
|
||||
} from "./components/directory.js";
|
||||
import { deepCopy } from "./components/utils/helpers.js";
|
||||
import ExampleSet from "./ExampleSet.svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
|
||||
import huggingface_theme from "./themes/huggingface.scss";
|
||||
import grass_theme from "./themes/grass.scss";
|
||||
import peach_theme from "./themes/peach.scss";
|
||||
import seafoam_theme from "./themes/seafoam.scss";
|
||||
|
||||
export let input_components,
|
||||
output_components,
|
||||
theme,
|
||||
fn,
|
||||
examples,
|
||||
root,
|
||||
allow_flagging,
|
||||
allow_interpretation,
|
||||
avg_durations,
|
||||
live,
|
||||
queue,
|
||||
static_src;
|
||||
|
||||
let examples_dir = root + "file/";
|
||||
let interpret_mode = false;
|
||||
let submission_count = 0;
|
||||
let state = "START";
|
||||
let last_duration = null;
|
||||
let has_changed = false;
|
||||
let queue_index = null;
|
||||
let initial_queue_index = null;
|
||||
|
||||
const default_inputs = input_components.map((component) =>
|
||||
"default" in component ? component.default : null
|
||||
);
|
||||
const default_outputs = new Array(output_components.length).fill(null);
|
||||
|
||||
let input_values = deepCopy(default_inputs);
|
||||
let output_values = deepCopy(default_outputs);
|
||||
let interpretation_values = [];
|
||||
let timer = null;
|
||||
let timer_start = 0;
|
||||
let timer_diff = 0;
|
||||
let avg_duration = Array.isArray(avg_durations)
|
||||
? this.props.avg_durations[0]
|
||||
: null;
|
||||
let expected_duration = null;
|
||||
|
||||
const setValues = (index, value) => {
|
||||
has_changed = true;
|
||||
input_values[index] = value;
|
||||
if (live && state !== "PENDING") {
|
||||
submit();
|
||||
}
|
||||
};
|
||||
const setExampleId = async (example_id) => {
|
||||
input_components.forEach(async (input_component, i) => {
|
||||
const process_example =
|
||||
input_component_map[input_component.name].process_example;
|
||||
if (process_example !== undefined) {
|
||||
input_values[i] = await process_example(
|
||||
examples[example_id][i],
|
||||
examples_dir
|
||||
);
|
||||
} else {
|
||||
input_values[i] = examples[example_id][i];
|
||||
}
|
||||
});
|
||||
};
|
||||
const startTimer = () => {
|
||||
timer_start = Date.now();
|
||||
timer_diff = 0;
|
||||
timer = setInterval(() => {
|
||||
timer_diff = (Date.now() - timer_start) / 1000;
|
||||
}, 100);
|
||||
};
|
||||
const stopTimer = () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
const submit = () => {
|
||||
if (state === "PENDING") {
|
||||
return;
|
||||
}
|
||||
for (let [i, input_component] of input_components.entries()) {
|
||||
if (
|
||||
input_values[i] === null &&
|
||||
input_component.name !== "state" &&
|
||||
input_component.optional !== true
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
state = "PENDING";
|
||||
submission_count += 1;
|
||||
has_changed = false;
|
||||
let submission_count_at_click = submission_count;
|
||||
startTimer();
|
||||
fn("predict", { data: input_values }, queue, queueCallback)
|
||||
.then((output) => {
|
||||
if (
|
||||
state !== "PENDING" ||
|
||||
submission_count_at_click !== submission_count
|
||||
) {
|
||||
return;
|
||||
}
|
||||
stopTimer();
|
||||
output_values = output["data"];
|
||||
for (let [i, value] of output_values.entries()) {
|
||||
if (output_components[i].name === "state") {
|
||||
for (let [j, input_component] of input_components.entries()) {
|
||||
if (input_component.name === "state") {
|
||||
input_values[j] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ("durations" in output) {
|
||||
last_duration = output["durations"][0];
|
||||
}
|
||||
if ("avg_durations" in output) {
|
||||
avg_duration = output["avg_durations"][0];
|
||||
if (queue && initial_queue_index) {
|
||||
expected_duration = avg_duration * (initial_queue_index + 1);
|
||||
} else {
|
||||
expected_duration = avg_duration;
|
||||
}
|
||||
}
|
||||
state = "COMPLETE";
|
||||
if (live && has_changed) {
|
||||
submit();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
if (
|
||||
state !== "PENDING" ||
|
||||
submission_count_at_click !== submission_count
|
||||
) {
|
||||
return;
|
||||
}
|
||||
stopTimer();
|
||||
console.error(e);
|
||||
state = "ERROR";
|
||||
output_values = deepCopy(default_outputs);
|
||||
});
|
||||
};
|
||||
const clear = () => {
|
||||
input_values = deepCopy(default_inputs);
|
||||
output_values = deepCopy(default_outputs);
|
||||
interpret_mode = false;
|
||||
state = "START";
|
||||
stopTimer();
|
||||
};
|
||||
const flag = () => {
|
||||
fn("flag", {
|
||||
data: {
|
||||
input_data: input_values,
|
||||
output_data: output_values,
|
||||
},
|
||||
});
|
||||
};
|
||||
const interpret = () => {
|
||||
if (interpret_mode) {
|
||||
interpret_mode = false;
|
||||
} else {
|
||||
fn(
|
||||
"interpret",
|
||||
{
|
||||
data: input_values,
|
||||
},
|
||||
queue,
|
||||
queueCallback
|
||||
).then((output) => {
|
||||
interpret_mode = true;
|
||||
interpretation_values = output.interpretation_scores;
|
||||
});
|
||||
}
|
||||
};
|
||||
const queueCallback = (index, is_initial) => {
|
||||
if (is_initial) {
|
||||
initial_queue_index = index;
|
||||
}
|
||||
queue_index = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="gradio-interface" {theme}>
|
||||
<div class="panels flex flex-wrap justify-center gap-4 flex-col sm:flex-row">
|
||||
<div class="panel flex-1">
|
||||
<div
|
||||
class="component-set p-2 rounded flex flex-col flex-1 gap-2"
|
||||
style="min-height: 36px"
|
||||
>
|
||||
{#each input_components as input_component, i}
|
||||
{#if input_component.name !== "state"}
|
||||
<div class="component" key={i}>
|
||||
<div class="panel-header mb-1.5">{input_component.label}</div>
|
||||
<svelte:component
|
||||
this={input_component_map[input_component.name][
|
||||
interpret_mode ? "interpretation" : "component"
|
||||
]}
|
||||
{...input_component}
|
||||
{theme}
|
||||
{static_src}
|
||||
value={input_values[i]}
|
||||
interpretation={interpret_mode
|
||||
? interpretation_values[i]
|
||||
: null}
|
||||
setValue={setValues.bind(this, i)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-buttons flex gap-4 my-4">
|
||||
<button
|
||||
class="panel-button bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
|
||||
on:click={clear}
|
||||
>
|
||||
{$_("interface.clear")}
|
||||
</button>
|
||||
<button
|
||||
class="panel-button submit bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
|
||||
on:click={submit}
|
||||
>
|
||||
{$_("interface.submit")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel flex-1">
|
||||
<div
|
||||
class="component-set p-2 rounded flex flex-col flex-1 gap-2 relative"
|
||||
style="min-height: 36px"
|
||||
class:opacity-50={state === "PENDING"}
|
||||
>
|
||||
{#if state !== "START"}
|
||||
<div class="state absolute right-2 flex items-center gap-0.5 text-xs">
|
||||
{#if state === "PENDING"}
|
||||
<div class="timer font-mono text-right" style="max">
|
||||
{timer_diff.toFixed(1)}s
|
||||
{#if expected_duration !== null}
|
||||
<span>
|
||||
(ETA: {expected_duration.toFixed(
|
||||
1
|
||||
)}s<!--
|
||||
-->{#if queue_index}
|
||||
, {queue_index} ahead<!--
|
||||
-->{/if})<!--
|
||||
--></span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<img
|
||||
src="{static_src}/static/img/logo.svg"
|
||||
alt="Pending"
|
||||
class="pending h-5 ml-1 inline-block"
|
||||
/>
|
||||
{:else if state === "ERROR"}
|
||||
<img
|
||||
src="{static_src}/static/img/logo_error.svg"
|
||||
alt="Error"
|
||||
class="error h-5 ml-2 inline-block"
|
||||
/>
|
||||
{:else if state === "COMPLETE" && last_duration !== null}
|
||||
<div class="duration font-mono">{last_duration.toFixed(1)}s</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#each output_components as output_component, i}
|
||||
{#if output_values[i] !== null}
|
||||
<div class="component" key={i}>
|
||||
<div class="panel-header mb-1.5">{output_component.label}</div>
|
||||
<svelte:component
|
||||
this={output_component_map[output_component.name].component}
|
||||
{...output_component}
|
||||
{theme}
|
||||
{static_src}
|
||||
value={output_values[i]}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-buttons flex gap-4 my-4">
|
||||
{#if allow_interpretation !== false}
|
||||
<button
|
||||
class="panel-button flag bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
|
||||
on:click={interpret}
|
||||
>
|
||||
{#if interpret_mode}
|
||||
Hide
|
||||
{:else}
|
||||
{$_("interface.interpret")}
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if allow_flagging !== "never"}
|
||||
<button
|
||||
class="panel-button flag bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
|
||||
on:click={flag}
|
||||
>
|
||||
{$_("interface.flag")}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if examples}
|
||||
<ExampleSet
|
||||
{examples}
|
||||
{input_components}
|
||||
{theme}
|
||||
{examples_dir}
|
||||
{setExampleId}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
.pending {
|
||||
@keyframes ld-breath {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(
|
||||
0.9647,
|
||||
0.2413,
|
||||
-0.0705,
|
||||
0.7911
|
||||
);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
51% {
|
||||
animation-timing-function: cubic-bezier(
|
||||
0.9226,
|
||||
0.2631,
|
||||
-0.0308,
|
||||
0.7628
|
||||
);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
animation: ld-breath 0.75s infinite linear;
|
||||
}
|
||||
.gradio-interface[theme="default"] {
|
||||
.component-set {
|
||||
@apply bg-gray-50 dark:bg-gray-700 dark:drop-shadow-xl shadow;
|
||||
}
|
||||
.component {
|
||||
@apply mb-2;
|
||||
}
|
||||
.panel-header {
|
||||
@apply uppercase text-xs;
|
||||
}
|
||||
.panel-button {
|
||||
@apply hover:bg-gray-100 dark:hover:bg-gray-600 shadow;
|
||||
}
|
||||
.panel-button.disabled {
|
||||
@apply text-gray-400 cursor-not-allowed;
|
||||
}
|
||||
.panel-button.submit {
|
||||
@apply bg-yellow-500 hover:bg-yellow-400 dark:bg-red-700 dark:hover:bg-red-600 text-white;
|
||||
}
|
||||
.examples {
|
||||
.examples-table-holder:not(.gallery) {
|
||||
@apply shadow;
|
||||
.examples-table {
|
||||
@apply rounded dark:bg-gray-700;
|
||||
thead {
|
||||
@apply border-gray-300 dark:border-gray-600;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-yellow-500 dark:bg-red-700 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples-table-holder.gallery .examples-table {
|
||||
tbody td {
|
||||
@apply shadow;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.gradio-interface[theme="huggingface"] {
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<script>
|
||||
export let root;
|
||||
</script>
|
||||
|
||||
<div class="login container mt-8">
|
||||
<form
|
||||
class="mx-auto p-4 bg-gray-50 shadow-md w-1/2"
|
||||
id="login"
|
||||
method="POST"
|
||||
action={root + "login"}
|
||||
>
|
||||
<h2 class="text-2xl font-semibold my-2">login</h2>
|
||||
|
||||
<label class="block uppercase mt-4" for="username">username</label>
|
||||
<input class="p-2 block" type="text" name="username" />
|
||||
<label class="block uppercase mt-4" for="password">password</label>
|
||||
<input class="p-2 block" type="password" name="password" />
|
||||
<input
|
||||
type="submit"
|
||||
class="block bg-yellow-500 hover:bg-yellow-400 dark:hover:bg-yellow-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,54 +0,0 @@
|
||||
function delay(n) {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(resolve, n * 1000);
|
||||
});
|
||||
}
|
||||
|
||||
let postData = async (url, body) => {
|
||||
const output = await fetch(url, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
headers: { "Content-Type": "application/json" }
|
||||
});
|
||||
return output;
|
||||
};
|
||||
|
||||
export const fn = async (api_endpoint, action, data, queue, queue_callback) => {
|
||||
if (queue && ["predict", "interpret"].includes(action)) {
|
||||
data["action"] = action;
|
||||
const output = await postData(api_endpoint + "queue/push/", data);
|
||||
const output_json = await output.json();
|
||||
let [hash, queue_position] = [
|
||||
output_json["hash"],
|
||||
output_json["queue_position"]
|
||||
];
|
||||
queue_callback(queue_position, /*is_initial=*/ true);
|
||||
let status = "UNKNOWN";
|
||||
while (status != "COMPLETE" && status != "FAILED") {
|
||||
if (status != "UNKNOWN") {
|
||||
await delay(1);
|
||||
}
|
||||
const status_response = await postData(api_endpoint + "queue/status/", {
|
||||
hash: hash
|
||||
});
|
||||
var status_obj = await status_response.json();
|
||||
status = status_obj["status"];
|
||||
if (status === "QUEUED") {
|
||||
queue_callback(status_obj["data"]);
|
||||
} else if (status === "PENDING") {
|
||||
queue_callback(null);
|
||||
}
|
||||
}
|
||||
if (status == "FAILED") {
|
||||
throw new Error(status);
|
||||
} else {
|
||||
return status_obj["data"];
|
||||
}
|
||||
} else {
|
||||
const output = await postData(api_endpoint + action + "/", data);
|
||||
if (output.status !== 200) {
|
||||
throw new Error(output.statusText);
|
||||
}
|
||||
return await output.json();
|
||||
}
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="dummy" {theme}>DUMMY</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,59 +0,0 @@
|
||||
import InputAudio from "./input/Audio/config.js";
|
||||
import InputCheckbox from "./input/Checkbox/config.js";
|
||||
import InputCheckboxGroup from "./input/CheckboxGroup/config.js";
|
||||
import InputDropdown from "./input/Dropdown/config.js";
|
||||
import InputFile from "./input/File/config.js";
|
||||
import InputImage from "./input/Image/config.js";
|
||||
import InputNumber from "./input/Number/config.js";
|
||||
import InputRadio from "./input/Radio/config.js";
|
||||
import InputSlider from "./input/Slider/config.js";
|
||||
import InputTextbox from "./input/Textbox/config.js";
|
||||
import InputVideo from "./input/Video/config.js";
|
||||
import InputDataFrame from "./input/DataFrame/config.js";
|
||||
import InputTimeSeries from './input/TimeSeries/config.js';
|
||||
|
||||
import OutputAudio from "./output/Audio/config.js";
|
||||
import OutputCarousel from "./output/Carousel/config.js";
|
||||
import OutputDataframe from "./output/Dataframe/config.js";
|
||||
import OutputFile from "./output/File/config.js";
|
||||
import OutputHighlightedText from "./output/HighlightedText/config.js";
|
||||
import OutputHtml from "./output/Html/config.js";
|
||||
import OutputImage from "./output/Image/config.js";
|
||||
import OutputJson from "./output/Json/config.js";
|
||||
import OutputLabel from "./output/Label/config.js";
|
||||
import OutputTextbox from "./output/Textbox/config.js";
|
||||
import OutputVideo from "./output/Video/config.js";
|
||||
import OutputTimeSeries from './output/TimeSeries/config.js'
|
||||
|
||||
import Dummy from "./Dummy.svelte"
|
||||
|
||||
export const input_component_map = {
|
||||
"audio": InputAudio,
|
||||
"checkbox": InputCheckbox,
|
||||
"checkboxgroup": InputCheckboxGroup,
|
||||
"dataframe": InputDataFrame,
|
||||
"dropdown": InputDropdown,
|
||||
"file": InputFile,
|
||||
"image": InputImage,
|
||||
"number": InputNumber,
|
||||
"radio": InputRadio,
|
||||
"slider": InputSlider,
|
||||
"textbox": InputTextbox,
|
||||
"timeseries": InputTimeSeries,
|
||||
"video": InputVideo,
|
||||
}
|
||||
|
||||
export const output_component_map = {
|
||||
"audio": OutputAudio,
|
||||
"carousel": OutputCarousel,
|
||||
"dataframe": OutputDataframe,
|
||||
"file": OutputFile,
|
||||
"highlightedtext": OutputHighlightedText,
|
||||
"html": OutputHtml,
|
||||
"image": OutputImage,
|
||||
"json": OutputJson,
|
||||
"label": OutputLabel,
|
||||
"textbox": OutputTextbox,
|
||||
"timeseries": OutputTimeSeries,
|
||||
"video": OutputVideo,
|
||||
}
|
||||
@ -1,163 +0,0 @@
|
||||
<script>
|
||||
import { onDestroy } from "svelte";
|
||||
import Upload from "../../utils/Upload.svelte";
|
||||
import ModifyUpload from "../../utils/ModifyUpload.svelte";
|
||||
import Range from "svelte-range-slider-pips";
|
||||
|
||||
export let value,
|
||||
setValue,
|
||||
theme,
|
||||
name,
|
||||
static_src,
|
||||
is_example = false;
|
||||
export let source;
|
||||
|
||||
let recording = false;
|
||||
let recorder;
|
||||
let mode = "";
|
||||
let audio_chunks = [];
|
||||
let audio_blob;
|
||||
let player;
|
||||
let inited = false;
|
||||
let crop_values = [0, 100];
|
||||
|
||||
function blob_to_data_url(blob) {
|
||||
return new Promise((fulfill, reject) => {
|
||||
let reader = new FileReader();
|
||||
reader.onerror = reject;
|
||||
reader.onload = (e) => fulfill(reader.result);
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
|
||||
async function prepare_audio() {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
recorder = new MediaRecorder(stream);
|
||||
|
||||
recorder.addEventListener("dataavailable", (event) => {
|
||||
audio_chunks.push(event.data);
|
||||
});
|
||||
|
||||
recorder.addEventListener("stop", async () => {
|
||||
recording = false;
|
||||
audio_blob = new Blob(audio_chunks, { type: "audio/wav" });
|
||||
|
||||
setValue({
|
||||
data: await blob_to_data_url(audio_blob),
|
||||
name,
|
||||
is_example,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function record() {
|
||||
recording = true;
|
||||
audio_chunks = [];
|
||||
|
||||
if (!inited) await prepare_audio();
|
||||
|
||||
recorder.start();
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (recorder) {
|
||||
recorder.stop();
|
||||
}
|
||||
});
|
||||
|
||||
const stop = () => {
|
||||
recorder.stop();
|
||||
};
|
||||
|
||||
function clear() {
|
||||
setValue(null);
|
||||
mode = "";
|
||||
}
|
||||
|
||||
function loaded(node) {
|
||||
function clamp_playback() {
|
||||
const start_time = (crop_values[0] / 100) * node.duration;
|
||||
const end_time = (crop_values[1] / 100) * node.duration;
|
||||
if (node.currentTime < start_time) {
|
||||
node.currentTime = start_time;
|
||||
}
|
||||
|
||||
if (node.currentTime > end_time) {
|
||||
node.currentTime = start_time;
|
||||
node.pause();
|
||||
}
|
||||
}
|
||||
|
||||
node.addEventListener("timeupdate", clamp_playback);
|
||||
|
||||
return {
|
||||
destroy: () => node.removeEventListener("timeupdate", clamp_playback),
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="input-audio">
|
||||
{#if value === null}
|
||||
{#if source === "microphone"}
|
||||
{#if recording}
|
||||
<button
|
||||
class="p-2 rounded font-semibold bg-red-200 text-red-500 dark:bg-red-600 dark:text-red-100 shadow transition hover:shadow-md"
|
||||
on:click={stop}
|
||||
>
|
||||
Stop Recording
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="p-2 rounded font-semibold bg-white dark:bg-gray-600 shadow transition hover:shadow-md bg-white dark:bg-gray-800"
|
||||
on:click={record}
|
||||
>
|
||||
Record
|
||||
</button>
|
||||
{/if}
|
||||
{:else if source === "upload"}
|
||||
<Upload filetype="audio/*" load={setValue} {theme}>
|
||||
Drop Audio Here
|
||||
<br />- or -<br />
|
||||
Click to Upload
|
||||
</Upload>
|
||||
{/if}
|
||||
{:else}
|
||||
<ModifyUpload
|
||||
{clear}
|
||||
edit={() => (mode = "edit")}
|
||||
absolute={false}
|
||||
{theme}
|
||||
{static_src}
|
||||
/>
|
||||
|
||||
<audio
|
||||
use:loaded
|
||||
class="w-full"
|
||||
controls
|
||||
bind:this={player}
|
||||
preload="metadata"
|
||||
src={value.data}
|
||||
/>
|
||||
|
||||
{#if mode === "edit" && player?.duration}
|
||||
<Range
|
||||
bind:values={crop_values}
|
||||
range
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
on:change={({ detail: { values } }) =>
|
||||
setValue({
|
||||
data: value.data,
|
||||
name,
|
||||
is_example,
|
||||
crop_min: values[0],
|
||||
crop_max: values[1],
|
||||
})}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-audio-example">{value}</div>
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
export let value, interpretation, theme;
|
||||
</script>
|
||||
|
||||
<div class="input-audio" {theme}>
|
||||
<audio class="w-full" controls>
|
||||
<source src={value.data} />
|
||||
</audio>
|
||||
<div class="interpret_range flex">
|
||||
{#each interpretation as interpret_value}
|
||||
<div class="flex-1 h-4" style={"background-color: " + getSaliencyColor(interpret_value)} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
import { loadAsFile } from "../../utils/example_processors";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
"process_example": loadAsFile
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="input-checkbox inline-block"
|
||||
{theme}
|
||||
on:click={() => setValue(!value)}
|
||||
>
|
||||
<button class="checkbox-item py-2 px-3 rounded cursor-pointer" class:selected={value}>
|
||||
<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
|
||||
<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-checkbox-example">{value.toLocaleString()}</div>
|
||||
@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
</script>
|
||||
|
||||
<div class="input-checkbox inline-block" {theme}>
|
||||
<button
|
||||
class="checkbox-item py-2 px-3 rounded cursor-pointer flex gap-1"
|
||||
class:selected={value}
|
||||
>
|
||||
<div
|
||||
class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[0])}
|
||||
/>
|
||||
<div
|
||||
class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[1])}
|
||||
>
|
||||
<svg class="check h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let choices;
|
||||
|
||||
const toggleChoice = (choice) => {
|
||||
if (value.includes(choice)) {
|
||||
value.splice(value.indexOf(choice), 1);
|
||||
} else {
|
||||
value.push(choice);
|
||||
}
|
||||
setValue(value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="input-checkbox-group flex flex-wrap gap-2" {theme}>
|
||||
{#each choices as choice, i}
|
||||
<button
|
||||
class="checkbox-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
|
||||
class:selected={value.includes(choice)}
|
||||
key={i}
|
||||
on:click={() => toggleChoice(choice)}
|
||||
>
|
||||
<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
|
||||
<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{choice}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox-group[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-checkboxgroup-example">{value.join(", ")}</div>
|
||||
@ -1,67 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="input-checkbox-group flex flex-wrap gap-2" {theme}>
|
||||
{#each choices as choice, i}
|
||||
<button
|
||||
class="checkbox-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-1"
|
||||
class:selected={value.includes(choice)}
|
||||
key={i}
|
||||
>
|
||||
<div
|
||||
class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[i][0])}
|
||||
/>
|
||||
<div
|
||||
class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[i][1])}
|
||||
>
|
||||
<svg class="check h-3 w-4" viewBox="-10 -10 20 20">
|
||||
<line
|
||||
x1="-7.5"
|
||||
y1="0"
|
||||
x2="-2.5"
|
||||
y2="5"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
x1="-2.5"
|
||||
y1="5"
|
||||
x2="7.5"
|
||||
y2="-7.5"
|
||||
stroke="black"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{choice}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected .check {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.input-checkbox-group[theme="default"] {
|
||||
.checkbox-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,362 +0,0 @@
|
||||
<script>
|
||||
import { tick } from "svelte";
|
||||
|
||||
export let theme = "";
|
||||
export let label = "Title";
|
||||
export let headers = [];
|
||||
export let values = [
|
||||
["Frank", 32, "Male"],
|
||||
["Beatrice", 99, "Female"],
|
||||
["Simone", 999, "Male"],
|
||||
];
|
||||
export let setValue;
|
||||
export let editable = true;
|
||||
|
||||
let id = 0;
|
||||
let editing = false;
|
||||
let selected = false;
|
||||
let els = {};
|
||||
|
||||
function make_headers(_h) {
|
||||
if (_h.length === 0) {
|
||||
return values[0].map((_, i) => {
|
||||
const _id = ++id;
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: i + 1 };
|
||||
});
|
||||
} else {
|
||||
return _h.map((h) => {
|
||||
const _id = ++id;
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: h };
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let _headers = make_headers(headers);
|
||||
|
||||
let data = values.map((x) =>
|
||||
x.map((n) => {
|
||||
const _id = ++id;
|
||||
els[id] = { input: null, cell: null };
|
||||
return { value: n, id: _id };
|
||||
})
|
||||
) || [
|
||||
Array(headers.length)
|
||||
.fill(0)
|
||||
|
||||
.map((_) => {
|
||||
const _id = ++id;
|
||||
els[id] = { input: null, cell: null };
|
||||
|
||||
return { value: "", id: _id };
|
||||
}),
|
||||
];
|
||||
|
||||
$: setValue(data.map((r) => r.map(({ value }) => value)));
|
||||
|
||||
function get_sort_status(name, sort) {
|
||||
if (!sort) return "none";
|
||||
if (sort[0] === name) {
|
||||
return sort[1];
|
||||
}
|
||||
}
|
||||
|
||||
async function start_edit(id) {
|
||||
if (!editable) return;
|
||||
editing = id;
|
||||
await tick();
|
||||
const { input } = els[id];
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function handle_keydown(event, i, j, id) {
|
||||
let is_data;
|
||||
switch (event.key) {
|
||||
case "ArrowRight":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i][j + 1];
|
||||
selected = is_data ? is_data.id : selected;
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i][j - 1];
|
||||
selected = is_data ? is_data.id : selected;
|
||||
break;
|
||||
case "ArrowDown":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i + 1];
|
||||
selected = is_data ? is_data[j].id : selected;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i - 1];
|
||||
selected = is_data ? is_data[j].id : selected;
|
||||
break;
|
||||
case "Escape":
|
||||
if (!editable) break;
|
||||
event.preventDefault();
|
||||
editing = false;
|
||||
break;
|
||||
case "Enter":
|
||||
if (!editable) break;
|
||||
event.preventDefault();
|
||||
if (editing === id) {
|
||||
editing = false;
|
||||
} else {
|
||||
editing = id;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_cell_click(id) {
|
||||
editing = false;
|
||||
selected = id;
|
||||
}
|
||||
|
||||
async function set_focus(id, type) {
|
||||
if (type === "edit" && typeof id == "number") {
|
||||
await tick();
|
||||
els[id].input.focus();
|
||||
}
|
||||
|
||||
if (type === "edit" && typeof id == "boolean") {
|
||||
let cell = els[selected]?.cell;
|
||||
await tick();
|
||||
cell?.focus();
|
||||
}
|
||||
|
||||
if (type === "select" && typeof id == "number") {
|
||||
const { cell } = els[id];
|
||||
cell.setAttribute("tabindex", 0);
|
||||
await tick();
|
||||
els[id].cell.focus();
|
||||
}
|
||||
}
|
||||
|
||||
$: set_focus(editing, "edit");
|
||||
$: set_focus(selected, "select");
|
||||
|
||||
let sort_direction;
|
||||
let sort_by;
|
||||
|
||||
function sort(col, dir) {
|
||||
if (dir === "asc") {
|
||||
data = data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
|
||||
} else if (dir === "des") {
|
||||
data = data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
|
||||
}
|
||||
}
|
||||
|
||||
function handle_sort(col) {
|
||||
if (typeof sort_by !== "number" || sort_by !== col) {
|
||||
sort_direction = "asc";
|
||||
sort_by = col;
|
||||
} else {
|
||||
if (sort_direction === "asc") {
|
||||
sort_direction = "des";
|
||||
} else if (sort_direction === "des") {
|
||||
sort_direction = "asc";
|
||||
}
|
||||
}
|
||||
|
||||
sort(col, sort_direction);
|
||||
}
|
||||
|
||||
let header_edit;
|
||||
|
||||
async function edit_header(_id, select) {
|
||||
if (!editable) return;
|
||||
header_edit = _id;
|
||||
await tick();
|
||||
els[_id].input.focus();
|
||||
|
||||
if (select) els[_id].input.select();
|
||||
}
|
||||
|
||||
function end_header_edit(event) {
|
||||
if (!editable) return;
|
||||
|
||||
switch (event.key) {
|
||||
case "Escape":
|
||||
event.preventDefault();
|
||||
header_edit = false;
|
||||
break;
|
||||
case "Enter":
|
||||
event.preventDefault();
|
||||
header_edit = false;
|
||||
}
|
||||
}
|
||||
|
||||
function add_row() {
|
||||
data.push(
|
||||
headers.map(() => {
|
||||
const _id = ++id;
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: "" };
|
||||
})
|
||||
);
|
||||
data = data;
|
||||
}
|
||||
|
||||
async function add_col() {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const _id = ++id;
|
||||
els[_id] = { cell: null, input: null };
|
||||
data[i].push({ id: _id, value: "" });
|
||||
}
|
||||
|
||||
const _id = ++id;
|
||||
els[_id] = { cell: null, input: null };
|
||||
_headers.push({ id: _id, value: `Header ${_headers.length + 1}` });
|
||||
|
||||
data = data;
|
||||
_headers = _headers;
|
||||
|
||||
await tick();
|
||||
|
||||
edit_header(_id, true);
|
||||
}
|
||||
|
||||
const double_click = (node, { click, dblclick }) => {
|
||||
let timer;
|
||||
|
||||
function handler(event) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = undefined;
|
||||
dblclick(event);
|
||||
} else {
|
||||
timer = setTimeout(() => {
|
||||
click(event);
|
||||
timer = undefined;
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
node.addEventListener("click", handler);
|
||||
|
||||
return {
|
||||
destroy: () => node.removeEventListener("click", handler),
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<h4 id="title">{label}</h4>
|
||||
|
||||
<div class="shadow overflow-hidden border-gray-200 rounded-sm relative">
|
||||
<table
|
||||
id="grid"
|
||||
role="grid"
|
||||
aria-labelledby="title"
|
||||
class="min-w-full divide-y divide-gray-200 "
|
||||
>
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
{#each _headers as { value, id }, i (id)}
|
||||
<th
|
||||
use:double_click={{
|
||||
click: () => handle_sort(i),
|
||||
dblclick: () => edit_header(id),
|
||||
}}
|
||||
aria-sort={get_sort_status(value, sort_by)}
|
||||
class="relative after:absolute after:opacity-0 after:content-['▲'] after:ml-2 after:inset-y-0 after:h-[1.05rem] after:m-auto relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class:sorted={sort_by === i}
|
||||
class:des={sort_by === i && sort_direction === "des"}
|
||||
>
|
||||
{#if header_edit === id}
|
||||
<input
|
||||
class="bg-transparent inset-y-0 left-6 w-full outline-none absolute p-0 w-3/4 text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
tabindex="-1"
|
||||
bind:value
|
||||
bind:this={els[id].input}
|
||||
on:keydown={end_header_edit}
|
||||
on:blur={({ currentTarget }) =>
|
||||
currentTarget.setAttribute("tabindex", -1)}
|
||||
/>
|
||||
{/if}
|
||||
<span
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
class="min-h-full"
|
||||
class:opacity-0={header_edit === id}>{value}</span
|
||||
>
|
||||
</th>
|
||||
{/each}
|
||||
</tr></thead
|
||||
><tbody class="bg-white divide-y divide-gray-200">
|
||||
{#each data as row, i (row)}
|
||||
<tr>
|
||||
{#each row as { value, id }, j (id)}
|
||||
<td
|
||||
tabindex="-1"
|
||||
class="p-0 whitespace-nowrap display-block outline-none relative "
|
||||
on:dblclick={() => start_edit(id)}
|
||||
on:click={() => handle_cell_click(id)}
|
||||
on:keydown={(e) => handle_keydown(e, i, j, id)}
|
||||
bind:this={els[id].cell}
|
||||
on:blur={({ currentTarget }) =>
|
||||
currentTarget.setAttribute("tabindex", -1)}
|
||||
>
|
||||
<div
|
||||
class:border-gray-600={selected === id}
|
||||
class:border-transparent={selected !== id}
|
||||
class="min-h-[3.3rem] px-5 py-3 border-[0.125rem]"
|
||||
>
|
||||
{#if editing === id}
|
||||
<input
|
||||
class="w-full outline-none absolute p-0 w-3/4"
|
||||
tabindex="-1"
|
||||
bind:value
|
||||
bind:this={els[id].input}
|
||||
on:blur={({ currentTarget }) =>
|
||||
currentTarget.setAttribute("tabindex", -1)}
|
||||
/>
|
||||
{/if}
|
||||
<span
|
||||
class=" cursor-default w-full"
|
||||
class:opacity-0={editing === id}
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if editable}
|
||||
<div class="flex justify-end ">
|
||||
<button
|
||||
on:click={add_col}
|
||||
class="hover:bg-gray-100 dark:hover:bg-gray-600 shadow py-1 px-3 rounded transition focus:outline-none m-2 mr-0"
|
||||
>New Column</button
|
||||
>
|
||||
<button
|
||||
on:click={add_row}
|
||||
class="bg-yellow-500 hover:bg-yellow-400 dark:bg-red-700 dark:hover:bg-red-600 text-white shadow py-1 px-3 rounded transition focus:outline-none m-2 mr-0"
|
||||
>New Row</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.sorted::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.des::after {
|
||||
transform: rotate(180deg) translateY(1.5px);
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="input-dropdown group inline-block relative" {theme}>
|
||||
<button
|
||||
class="selector py-2 px-3 font-semibold rounded inline-flex items-center"
|
||||
>
|
||||
{value}
|
||||
<svg class="caret ml-2 fill-current h-4 w-4" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="dropdown-menu-holder absolute hidden group-hover:block pt-1 z-10 bg-none"
|
||||
>
|
||||
<ul class="dropdown-menu max-h-80 overflow-y-auto">
|
||||
{#each choices as choice, i}
|
||||
<li
|
||||
class="dropdown-item first:rounded-t transition last:rounded-b py-2 px-3 block whitespace-nowrap cursor-pointer"
|
||||
on:click={() => setValue(choice)}
|
||||
key={i}
|
||||
>
|
||||
{choice}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
.input-dropdown[theme="default"] {
|
||||
.selector {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.dropdown-menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown-item {
|
||||
@apply bg-white dark:bg-gray-800 hover:bg-yellow-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-dropdown-example">{value}</div>
|
||||
@ -1,34 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="input-dropdown" {theme}>
|
||||
<ul class="dropdown-menu">
|
||||
{#each choices as choice, i}
|
||||
<li
|
||||
class="dropdown-item first:rounded-t transition last:rounded-b py-2 px-3 block whitespace-nowrap cursor-pointer"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[i])}
|
||||
key={i}
|
||||
>
|
||||
{choice}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
.input-dropdown[theme="default"] {
|
||||
.selector {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.dropdown-menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown-item {
|
||||
@apply bg-white dark:bg-gray-800 hover:font-semibold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<script>
|
||||
import Upload from "../../utils/Upload.svelte";
|
||||
import ModifyUpload from "../../utils/ModifyUpload.svelte";
|
||||
import { prettyBytes } from "../../utils/helpers";
|
||||
|
||||
export let value, setValue, theme, static_src;
|
||||
</script>
|
||||
|
||||
<div class="input-file" {theme}>
|
||||
{#if value === null}
|
||||
<Upload load={setValue} {theme}>
|
||||
Drop File Here
|
||||
<br />- or -<br />
|
||||
Click to Upload
|
||||
</Upload>
|
||||
{:else}
|
||||
<div class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative">
|
||||
<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>
|
||||
<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
|
||||
<div class="file-size text-2xl p-2">
|
||||
{prettyBytes(value.size)}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.input-file[theme="default"] .file-preview {
|
||||
@apply h-60;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-file-example">{value}</div>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import { loadAsFile } from "../../utils/example_processors";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"process_example": loadAsFile
|
||||
}
|
||||
@ -1,91 +0,0 @@
|
||||
<script>
|
||||
import Cropper from "../../utils/Cropper.svelte";
|
||||
|
||||
import Upload from "../../utils/Upload.svelte";
|
||||
import ModifyUpload from "../../utils/ModifyUpload.svelte";
|
||||
import ModifySketch from "../../utils/ModifySketch.svelte";
|
||||
import ImageEditor from "../../utils/ImageEditor.svelte";
|
||||
import Sketch from "../../utils/Sketch.svelte";
|
||||
import Webcam from "../../utils/Webcam.svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
export let value, setValue, theme, static_src;
|
||||
export let source = "upload";
|
||||
export let tool = "editor";
|
||||
|
||||
let mode;
|
||||
let sketch;
|
||||
|
||||
function handle_save({ detail }) {
|
||||
setValue(detail);
|
||||
mode = "view";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="input-image">
|
||||
<div
|
||||
class="image-preview w-full h-60 flex justify-center items-center dark:bg-gray-600 relative"
|
||||
class:bg-gray-200={value}
|
||||
>
|
||||
{#if source === "canvas"}
|
||||
<ModifySketch
|
||||
on:undo={() => sketch.undo()}
|
||||
on:clear={() => sketch.clear()}
|
||||
/>
|
||||
<Sketch
|
||||
{value}
|
||||
bind:this={sketch}
|
||||
on:change={({ detail }) => setValue(detail)}
|
||||
/>
|
||||
{:else if value === null}
|
||||
{#if source === "upload"}
|
||||
<Upload
|
||||
filetype="image/x-png,image/gif,image/jpeg"
|
||||
load={setValue}
|
||||
include_file_metadata={false}
|
||||
{theme}
|
||||
>
|
||||
{$_("interface.drop_image")}
|
||||
<br />- {$_("interface.or")} -<br />
|
||||
{$_("interface.click_to_upload")}
|
||||
</Upload>
|
||||
{:else if source === "webcam"}
|
||||
<Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />
|
||||
{/if}
|
||||
{:else if tool === "select"}
|
||||
<Cropper image={value} on:crop={({ detail }) => setValue(detail)} />
|
||||
{:else if tool === "editor"}
|
||||
{#if mode === "edit"}
|
||||
<ImageEditor
|
||||
{value}
|
||||
on:cancel={() => (mode = "view")}
|
||||
on:save={handle_save}
|
||||
/>
|
||||
{/if}
|
||||
<ModifyUpload
|
||||
edit={() => (mode = "edit")}
|
||||
clear={() => setValue(null)}
|
||||
{theme}
|
||||
{static_src}
|
||||
/>
|
||||
|
||||
<img class="w-full h-full object-contain" src={value} alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
:global(.image_editor_buttons) {
|
||||
width: 800px;
|
||||
@apply flex justify-end gap-1;
|
||||
}
|
||||
:global(.image_editor_buttons button) {
|
||||
@apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
|
||||
}
|
||||
:global(.tui-image-editor-header-buttons) {
|
||||
@apply hidden;
|
||||
}
|
||||
:global(.tui-colorpicker-palette-button) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +0,0 @@
|
||||
<script>
|
||||
export let value, examples_dir;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img class="input-image-example h-24 max-w-none" src={examples_dir + value} />
|
||||
@ -1,72 +0,0 @@
|
||||
<script>
|
||||
import ModifyUpload from "../../utils/ModifyUpload.svelte";
|
||||
import { getObjectFitSize, getSaliencyColor } from "../../utils/helpers";
|
||||
import { afterUpdate } from "svelte";
|
||||
|
||||
export let value, setValue, interpretation, shape, theme;
|
||||
|
||||
let saliency_layer;
|
||||
let image;
|
||||
|
||||
const paintSaliency = (data, ctx, width, height) => {
|
||||
var cell_width = width / data[0].length;
|
||||
var cell_height = height / data.length;
|
||||
var r = 0;
|
||||
data.forEach(function (row) {
|
||||
var c = 0;
|
||||
row.forEach(function (cell) {
|
||||
ctx.fillStyle = getSaliencyColor(cell);
|
||||
ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
|
||||
c++;
|
||||
});
|
||||
r++;
|
||||
});
|
||||
};
|
||||
|
||||
afterUpdate(() => {
|
||||
let size = getObjectFitSize(
|
||||
true,
|
||||
image.width,
|
||||
image.height,
|
||||
image.naturalWidth,
|
||||
image.naturalHeight
|
||||
);
|
||||
if (shape) {
|
||||
size = getObjectFitSize(
|
||||
true,
|
||||
size.width,
|
||||
size.height,
|
||||
shape[0],
|
||||
shape[1]
|
||||
);
|
||||
}
|
||||
let width = size.width;
|
||||
let height = size.height;
|
||||
saliency_layer.setAttribute("height", height);
|
||||
saliency_layer.setAttribute("width", width);
|
||||
paintSaliency(
|
||||
interpretation,
|
||||
saliency_layer.getContext("2d"),
|
||||
width,
|
||||
height
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="input-image">
|
||||
<div
|
||||
class="image-preview w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
|
||||
>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<div
|
||||
class="interpretation w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition"
|
||||
>
|
||||
<canvas bind:this={saliency_layer} />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img class="w-full h-full object-contain" bind:this={image} src={value} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
import { loadAsData } from "../../utils/example_processors";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
"process_example": loadAsData
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
</script>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input-number w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
{value}
|
||||
on:input={(e) => setValue(parseFloat(e.target.value))}
|
||||
{theme}
|
||||
/>
|
||||
|
||||
<style lang="postcss" global>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.input-number[theme="default"] {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-number-example">{value}</div>
|
||||
@ -1,32 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
</script>
|
||||
|
||||
<div class="input-number">
|
||||
<div class="interpret_range flex">
|
||||
{#each interpretation as interpret_value}
|
||||
<div
|
||||
class="flex-1"
|
||||
style={"background-color: " + getSaliencyColor(interpret_value[1])}
|
||||
>
|
||||
{interpret_value[0]}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.input-number[theme="default"] {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="input-radio flex flex-wrap gap-2" {theme}>
|
||||
{#each choices as choice, i}
|
||||
<button
|
||||
class="radio-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
|
||||
class:selected={value === choice}
|
||||
key={i}
|
||||
on:click={() => setValue(choice)}
|
||||
>
|
||||
<div class="radio-circle w-4 h-4 rounded-full box-border" />
|
||||
{choice}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.input-radio[theme="default"] {
|
||||
.radio-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.radio-circle {
|
||||
@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
|
||||
}
|
||||
.radio-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white shadow;
|
||||
}
|
||||
.radio-circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
.selected .radio-circle {
|
||||
@apply border-yellow-600 dark:border-red-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-radio-example">{value}</div>
|
||||
@ -1,35 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
export let choices;
|
||||
</script>
|
||||
|
||||
<div class="input-radio flex flex-wrap gap-2" {theme}>
|
||||
{#each choices as choice, i}
|
||||
<button
|
||||
class="radio-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
|
||||
class:selected={value === choice}
|
||||
key={i}
|
||||
>
|
||||
<div class="radio-circle w-4 h-4 rounded-full box-border"
|
||||
style={"background-color: " + getSaliencyColor(interpretation[i])}
|
||||
/>
|
||||
{choice}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.input-radio[theme="default"] {
|
||||
.radio-item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.radio-circle {
|
||||
@apply w-4 h-4 rounded-full box-border;
|
||||
}
|
||||
.radio-item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white shadow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let minimum, maximum, step;
|
||||
</script>
|
||||
|
||||
<div class="input-slider text-center" {theme}>
|
||||
<input
|
||||
type="range"
|
||||
class="range w-full appearance-none transition rounded h-4"
|
||||
on:input={(e) => setValue(parseFloat(e.target.value))}
|
||||
{value}
|
||||
min={minimum}
|
||||
max={maximum}
|
||||
{step}
|
||||
/>
|
||||
<div class="value inline-block mx-auto mt-1 px-2 py-0.5 rounded">{value}</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
|
||||
.input-slider[theme="default"] {
|
||||
.range {
|
||||
@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-100 dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-slider-example">{value}</div>
|
||||
@ -1,49 +0,0 @@
|
||||
<script>
|
||||
import { getSaliencyColor } from "../../utils/helpers";
|
||||
|
||||
export let value, interpretation, theme;
|
||||
export let minimum, maximum, step;
|
||||
</script>
|
||||
|
||||
<div class="input-slider text-center" {theme}>
|
||||
<input
|
||||
type="range"
|
||||
class="range w-full appearance-none transition rounded h-4"
|
||||
disabled
|
||||
{value}
|
||||
min={minimum}
|
||||
max={maximum}
|
||||
{step}
|
||||
/>
|
||||
<div class="interpret_range flex">
|
||||
{#each interpretation as interpret_value}
|
||||
<div class="flex-1 h-4" style={"background-color: " + getSaliencyColor(interpret_value)} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="value inline-block mx-auto mt-1 px-2 py-0.5 rounded">{value}</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
|
||||
.input-slider[theme="default"] {
|
||||
.range {
|
||||
@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-100 dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import Interpretation from "./Interpretation.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"interpretation": Interpretation,
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
<script>
|
||||
export let value, setValue, theme;
|
||||
export let lines, placeholder;
|
||||
</script>
|
||||
|
||||
{#if lines > 1}
|
||||
<textarea
|
||||
class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
{value}
|
||||
{placeholder}
|
||||
on:input={(e) => setValue(e.target.value)}
|
||||
{theme}
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
type="text"
|
||||
class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
|
||||
{value}
|
||||
{placeholder}
|
||||
on:change={(e) => setValue(e.target.value)}
|
||||
{theme}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss" global>
|
||||
.input-text[theme="default"] {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<div class="input-text-example">{value}</div>
|
||||
@ -1,7 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
<script>
|
||||
import Upload from "../../utils/Upload.svelte";
|
||||
import Chart from "../../utils/Chart.svelte";
|
||||
|
||||
export let value, setValue, theme, y, x;
|
||||
let _value;
|
||||
|
||||
function data_uri_to_blob(data_uri) {
|
||||
var byte_str = atob(data_uri.split(",")[1]);
|
||||
var mime_str = data_uri.split(",")[0].split(":")[1].split(";")[0];
|
||||
|
||||
var ab = new ArrayBuffer(byte_str.length);
|
||||
var ia = new Uint8Array(ab);
|
||||
|
||||
for (var i = 0; i < byte_str.length; i++) {
|
||||
ia[i] = byte_str.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([ab], { type: mime_str });
|
||||
}
|
||||
|
||||
function blob_to_string(blb) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener("loadend", (e) => {
|
||||
_value = e.srcElement.result;
|
||||
});
|
||||
|
||||
reader.readAsText(blb);
|
||||
}
|
||||
|
||||
$: {
|
||||
if (value && value.data && typeof value.data === "string") {
|
||||
if (!value) _value = null;
|
||||
else blob_to_string(data_uri_to_blob(value.data));
|
||||
}
|
||||
}
|
||||
|
||||
function make_dict(x, y) {
|
||||
const headers = [];
|
||||
const data = [];
|
||||
|
||||
headers.push(x.name);
|
||||
y.forEach(({ name }) => headers.push(name));
|
||||
|
||||
for (let i = 0; i < x.values.length; i++) {
|
||||
let _data = [];
|
||||
_data.push(x.values[i]);
|
||||
y.forEach(({ values }) => _data.push(values[i].y));
|
||||
|
||||
data.push(_data);
|
||||
}
|
||||
return { headers, data };
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if _value}
|
||||
<Chart
|
||||
value={_value}
|
||||
{y}
|
||||
{x}
|
||||
on:process={({ detail: { x, y } }) => setValue(make_dict(x, y))}
|
||||
/>
|
||||
{/if}
|
||||
{#if !value}
|
||||
<Upload
|
||||
filetype="text/csv"
|
||||
load={(v) => setValue({ data: v })}
|
||||
include_file_metadata={false}
|
||||
{theme}
|
||||
>
|
||||
Drop CSV Here
|
||||
<br />- or -<br />
|
||||
Click to Upload
|
||||
</Upload>
|
||||
{/if}
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
<script>
|
||||
import Upload from "../../utils/Upload.svelte";
|
||||
import ModifyUpload from "../../utils/ModifyUpload.svelte";
|
||||
import { prettyBytes, playable } from "../../utils/helpers";
|
||||
|
||||
export let value, setValue, theme, static_src;
|
||||
export let source;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="video-preview w-full h-80 object-contain flex justify-center items-center dark:bg-gray-600 relative"
|
||||
class:bg-gray-200={value}
|
||||
>
|
||||
{#if value === null}
|
||||
{#if source === "upload"}
|
||||
<Upload filetype="video/mp4,video/x-m4v,video/*" load={setValue} {theme}>
|
||||
Drop Video Here
|
||||
<br />- or -<br />
|
||||
Click to Upload
|
||||
</Upload>
|
||||
{/if}
|
||||
{:else}
|
||||
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
|
||||
{#if playable(value.name)}
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video
|
||||
class="w-full h-full object-contain bg-black"
|
||||
controls
|
||||
playsInline
|
||||
preload
|
||||
src={value.data}
|
||||
/>
|
||||
{:else}
|
||||
<div class="file-name text-4xl p-6 break-all">{value.name}</div>
|
||||
<div class="file-size text-2xl p-2">
|
||||
{prettyBytes(value.size)}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,20 +0,0 @@
|
||||
<script>
|
||||
import { playable } from "../../utils/helpers";
|
||||
|
||||
export let value, examples_dir;
|
||||
let video;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
{#if playable(value)}
|
||||
<video
|
||||
bind:this={video}
|
||||
on:mouseover={video.play}
|
||||
on:mouseout={video.pause}
|
||||
class="input-video-example h-24 max-w-none"
|
||||
src={examples_dir + value}
|
||||
/>
|
||||
{:else}
|
||||
<div class="input-video-example">{value}</div>
|
||||
{/if}
|
||||
@ -1,9 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
import ExampleComponent from "./Example.svelte";
|
||||
import { loadAsFile } from "../../utils/example_processors";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
"example": ExampleComponent,
|
||||
"process_example": loadAsFile
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<audio {theme} controls>
|
||||
<source src={value} />
|
||||
</audio>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { output_component_map } from "../../directory";
|
||||
|
||||
export let value, theme;
|
||||
export let components;
|
||||
|
||||
let carousel_index = 0;
|
||||
const next = () => {
|
||||
carousel_index = (carousel_index + 1) % value.length;
|
||||
};
|
||||
const prev = () => {
|
||||
carousel_index = (carousel_index - 1 + value.length) % value.length;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="output-carousel flex flex-col gap-2" {theme}>
|
||||
{#each components as component, i}
|
||||
<div class="component" key={i}>
|
||||
{#if component.label}
|
||||
<div class="panel-header">{component.label}</div>
|
||||
{/if}
|
||||
<svelte:component
|
||||
this={output_component_map[component.name].component}
|
||||
{...component}
|
||||
{theme}
|
||||
value={value[carousel_index][i]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="carousel-control flex gap-4 justify-center items-center my-1">
|
||||
<button on:click={prev}>
|
||||
<svg class="caret h-3 mt-0.5 fill-current" viewBox="0 0 9.1457395 15.999842">
|
||||
<path
|
||||
d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="carousel_index text-xl text-center font-semibold" style="min-width: 60px">
|
||||
{carousel_index + 1} / {value.length}
|
||||
</div>
|
||||
<button on:click={next}>
|
||||
<svg
|
||||
class="caret h-3 mt-0.5 fill-current"
|
||||
viewBox="0 0 9.1457395 15.999842"
|
||||
transform="scale(-1, 1)"
|
||||
>
|
||||
<path
|
||||
d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<script>
|
||||
import DataFrame from "../../input/DataFrame/Component.svelte";
|
||||
|
||||
export let headers,
|
||||
value,
|
||||
theme,
|
||||
setValue = () => {};
|
||||
</script>
|
||||
|
||||
<DataFrame
|
||||
headers={headers || value.headers}
|
||||
values={value.data}
|
||||
{setValue}
|
||||
editable={false}
|
||||
{theme}
|
||||
/>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<script>
|
||||
import { prettyBytes } from "../../utils/helpers";
|
||||
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="output-file w-full h-full flex flex-row flex-wrap justify-center items-center relative"
|
||||
href={value.data}
|
||||
download={value.name}
|
||||
{theme}
|
||||
>
|
||||
<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>
|
||||
<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
|
||||
<div class="text-2xl p-2">
|
||||
{isNaN(value.size) ? "" : prettyBytes(value.size)}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style lang="postcss">
|
||||
.output-file[theme="default"] {
|
||||
@apply h-60 hover:text-gray-500;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
<script>
|
||||
import { getNextColor } from "../../utils/helpers";
|
||||
|
||||
export let value, theme;
|
||||
export let show_legend, color_map;
|
||||
color_map = color_map || {};
|
||||
let mode;
|
||||
|
||||
if (value.length > 0) {
|
||||
for (let [_, label] of value) {
|
||||
if (label !== null) {
|
||||
if (typeof label === "string") {
|
||||
mode = "categories";
|
||||
if (!(label in color_map)) {
|
||||
let color = getNextColor(Object.keys(color_map).length);
|
||||
color_map[label] = color;
|
||||
}
|
||||
} else {
|
||||
mode = "scores";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="output-highlightedtext" {theme}>
|
||||
{#if mode === "categories"}
|
||||
{#if show_legend}
|
||||
<div class="category-legend flex flex-wrap gap-1 mb-2">
|
||||
{#each color_map.entries() as [category, color], i}
|
||||
<div
|
||||
class="category-label px-2 py-1 rounded text-white font-semibold"
|
||||
style={"background-color" + color}
|
||||
key={i}
|
||||
>
|
||||
{category}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
|
||||
>
|
||||
{#each value as [text, category], i}
|
||||
<span
|
||||
class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
|
||||
title={category}
|
||||
style={category === null
|
||||
? ""
|
||||
: `color: ${color_map[category]}; background-color: ${color_map[
|
||||
category
|
||||
].replace("1)", "var(--tw-bg-opacity))")}`}
|
||||
key={i}
|
||||
>
|
||||
<span class="text dark:text-white">{text}</span>
|
||||
{#if !show_legend && category !== null}
|
||||
<span
|
||||
class="inline-category text-xs text-white ml-0.5 px-0.5 rounded-sm"
|
||||
style={category === null
|
||||
? ""
|
||||
: `background-color: ${color_map[category]}`}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
{#if show_legend}
|
||||
<div
|
||||
class="color_legend flex px-2 py-1 justify-between rounded mb-3 font-semibold"
|
||||
style="background: -webkit-linear-gradient(to right,#8d83d6,(255,255,255,0),#eb4d4b); background: linear-gradient(to right,#8d83d6,rgba(255,255,255,0),#eb4d4b);"
|
||||
>
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>+1</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
|
||||
>
|
||||
{#each value as [text, score], i}
|
||||
<span
|
||||
class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
|
||||
title={value}
|
||||
style={"background-color: rgba(" +
|
||||
(score < 0 ? "141, 131, 214," + -score : "235, 77, 75," + score) +
|
||||
")"}
|
||||
>
|
||||
<span class="text dark:text-white">{text}</span>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.output-highlightedtext[theme="default"] {
|
||||
.textfield {
|
||||
@apply shadow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="output-html"
|
||||
{theme}
|
||||
>
|
||||
{@html value}
|
||||
</div>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<div class="output-image w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative" {theme}>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img class="w-full h-full object-contain" src={value} />
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
import JsonNode from "./JsonNode.svelte";
|
||||
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<div class="output-json font-mono leading-relaxed" {theme}>
|
||||
<JsonNode {value} depth={0} {theme} />
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
.output-text[theme="default"] {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
</style>
|
||||
@ -1,91 +0,0 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
export let depth;
|
||||
export let collapsed = depth > 4;
|
||||
</script>
|
||||
|
||||
<div class="json-node inline" {theme}>
|
||||
{#if value instanceof Array}
|
||||
{#if collapsed}
|
||||
<button
|
||||
on:click={() => {
|
||||
collapsed = false;
|
||||
}}
|
||||
>
|
||||
[+{value.length} children]
|
||||
</button>
|
||||
{:else}
|
||||
[
|
||||
<div class="json-children pl-4">
|
||||
{#each value as node, i}
|
||||
<div class="json-item">
|
||||
{i}: <svelte:self
|
||||
value={node}
|
||||
depth={depth + 1}
|
||||
key={i}
|
||||
{theme}
|
||||
/><!--
|
||||
-->{#if i !== value.length - 1}<!--
|
||||
-->,
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
]
|
||||
{/if}
|
||||
{:else if value instanceof Object}
|
||||
{#if collapsed}
|
||||
<button
|
||||
on:click={() => {
|
||||
collapsed = false;
|
||||
}}
|
||||
>
|
||||
{+{Object.keys(value).length} items}
|
||||
</button>
|
||||
{:else}
|
||||
{
|
||||
<div class="json-children pl-4">
|
||||
{#each Object.entries(value) as node, i}
|
||||
<div class="json-item">
|
||||
{node[0]}: <svelte:self
|
||||
value={node[1]}
|
||||
depth={depth + 1}
|
||||
key={i}
|
||||
{theme}
|
||||
/><!--
|
||||
-->{#if i !== Object.keys(value).length - 1}<!--
|
||||
-->,
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
}
|
||||
{/if}
|
||||
{:else if value === null}
|
||||
<div
|
||||
class="json-item inline text-gray-500 dark:text-gray-400"
|
||||
item-type="null"
|
||||
>
|
||||
null
|
||||
</div>
|
||||
{:else if typeof value === "string"}
|
||||
<div class="json-item inline text-green-500" item-type="string">
|
||||
"{value}"
|
||||
</div>
|
||||
{:else if typeof value === "boolean"}
|
||||
<div class="json-item inline text-red-500" item-type="boolean">
|
||||
{value.toLocaleString()}
|
||||
</div>
|
||||
{:else if typeof value === "number"}
|
||||
<div class="json-item inline text-blue-500" item-type="number">
|
||||
{value}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="json-item inline" item-type="other">
|
||||
{value}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default {
|
||||
"component": Component,
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
<script>
|
||||
export let value, theme;
|
||||
</script>
|
||||
|
||||
<div class="output-label" {theme}>
|
||||
<div
|
||||
class="output-class font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center"
|
||||
class:no-confidence={!("confidences" in value)}
|
||||
>
|
||||
{value.label}
|
||||
</div>
|
||||
{#if "confidences" in value}
|
||||
<div class="confidence-intervals flex text-xl">
|
||||
<div class="labels mr-2" style={{ maxWidth: "120px" }}>
|
||||
{#each value.confidences as confidence_set, i}
|
||||
<div
|
||||
class="label overflow-hidden whitespace-nowrap h-7 mb-2 overflow-ellipsis text-right"
|
||||
title={confidence_set.label}
|
||||
key={i}
|
||||
>
|
||||
{confidence_set.label}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="confidences flex flex-grow flex-col items-baseline">
|
||||
{#each value.confidences as confidence_set, i}
|
||||
<div
|
||||
class="confidence flex justify-end items-center overflow-hidden whitespace-nowrap h-7 mb-2 px-1"
|
||||
style={"min-width: calc(" +
|
||||
Math.round(confidence_set.confidence * 100) +
|
||||
"% - 12px)"}
|
||||
key={i}
|
||||
>
|
||||
{Math.round(confidence_set.confidence * 100) + "%"}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.output-label[theme="default"] {
|
||||
.label {
|
||||
@apply text-base h-7;
|
||||
}
|
||||
.confidence {
|
||||
@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-7 font-semibold rounded;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user