Refactor component directories (#5074)

* asd * changes * fix everything * cleanup * add changeset * fix casing * lockfile * fix casing * fix ci, enable linting * fix test * add changeset * add changeset * delete changeset * fix dirs * fix casing * fix notebooks * fix casing * fix casing * fix casing * fix casing * fix casing * fix casing * fix casing * fix casing --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Aug 3, 2023 · 1419538 · 1419538 · vercel · Aug 3, 2023
1 parent d7f8382
commit 1419538
Show file tree

Hide file tree

Showing 498 changed files with 25,848 additions and 3,777 deletions.
diff --git a/.changeset/bumpy-bugs-rule.md b/.changeset/bumpy-bugs-rule.md
@@ -2,4 +2,4 @@
 "website": patch
 ---
 
-fix:Correct gradio version on website 
+fix:Correct gradio version on website
diff --git a/.config/.prettierignore b/.config/.prettierignore
@@ -15,7 +15,6 @@
 **/.github/**
 **/guides/**
 **/.mypy_cache/**
-**/*.md
 !test-strategy.md
 **/js/_space-test/**
 ../js/app/src/lite/theme.css

diff --git a/.config/.prettierrc.json b/.config/.prettierrc.json
@@ -3,5 +3,5 @@
 	"singleQuote": false,
 	"trailingComma": "none",
 	"printWidth": 80,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"]
+	"plugins": ["prettier-plugin-svelte"]
 }
diff --git a/.config/eslint.config.js b/.config/eslint.config.js
@@ -16,10 +16,9 @@ const js_rules_disabled = Object.fromEntries(
 	Object.keys(js_plugin.configs.all.rules).map((rule) => [rule, "off"])
 );
 
-const rules = {
-	...ts_rules_disabled,
+const js_rules = {
 	...js_rules_disabled,
-	"no-console": ["error", { allow: ["warn", "error"] }],
+	"no-console": ["error", { allow: ["warn", "error", "debug"] }],
 	"no-constant-condition": "error",
 	"no-dupe-args": "error",
 	"no-extra-boolean-cast": "error",
@@ -30,10 +29,16 @@ const rules = {
 	complexity: "error",
 	"no-else-return": "error",
 	"no-useless-return": "error",
-	"no-shadow": "error",
-	"no-undef": "error",
+	"no-undef": "error"
+};
+
+const ts_rules = {
+	...ts_rules_disabled,
 	"@typescript-eslint/adjacent-overload-signatures": "error",
-	"@typescript-eslint/explicit-function-return-type": "error",
+	"@typescript-eslint/explicit-function-return-type": [
+		"error",
+		{ allowExpressions: true }
+	],
 	"@typescript-eslint/consistent-type-exports": "error",
 	"@typescript-eslint/ban-types": "error",
 	"@typescript-eslint/array-type": "error",
@@ -52,7 +57,10 @@ export default [
 			"**/*.spec.ts",
 			"**/*.test.ts",
 			"**/*.node-test.ts",
-			"js/app/test/**/*"
+			"js/app/test/**/*",
+			"**/*vite.config.ts",
+			"**/_website/**/*",
+			"**/_spaces-test/**/*"
 		]
 	},
 	{
@@ -68,7 +76,7 @@ export default [
 		plugins: {
 			"eslint:recommended": js_plugin
 		},
-		rules
+		rules: js_rules
 	},
 
 	{
@@ -90,10 +98,14 @@ export default [
 			"@typescript-eslint": ts_plugin,
 			"eslint:recommended": js_plugin
 		},
-		rules
+		rules: {
+			...ts_rules,
+			...js_rules,
+			"no-undef": "off"
+		}
 	},
 	{
-		files: ["./client/js/**"],
+		files: ["**/client/js/**"],
 		languageOptions: {
 			parserOptions: {
 				project: "./client/js/tsconfig.json"
@@ -120,8 +132,11 @@ export default [
 			"eslint:recommended": js_plugin
 		},
 		rules: {
-			...rules,
-			...sveltePlugin.configs.recommended.rules
+			...ts_rules,
+			...js_rules,
+			...sveltePlugin.configs.recommended.rules,
+			"svelte/no-at-html-tags": "off",
+			"no-undef": "off"
 		}
 	}
 ];
diff --git a/.github/workflows/deploy-chromatic.yml b/.github/workflows/deploy-chromatic.yml
@@ -53,6 +53,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
+          exitOnceUploaded: true
       - name: post deployment link to PR
         if: ${{ needs.get-current-pr.outputs.pr_found }} == 'true' 
         uses: thollander/actions-comment-pull-request@v2

diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml
@@ -31,7 +31,6 @@ jobs:
         run: pnpm --filter @gradio/wasm build
       - name: lint
         run: pnpm lint
-        continue-on-error: true
       - name: typecheck
         run: pnpm ts:check
       - name: unit tests

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,7 +12,6 @@
 	"python.testing.pytestArgs": ["."],
 	"python.testing.unittestEnabled": false,
 	"python.testing.pytestEnabled": true,
-	"eslint.packageManager": "pnpm",
 	"eslint.validate": ["javascript", "typescript", "html", "markdown", "svelte"],
 	"eslint.experimental.useFlatConfig": true,
 	"eslint.options": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -2,22 +2,23 @@
 
 <div align="center">
 
-  [<img src="readme_files/gradio.svg" alt="gradio" width=300>](https://gradio.app)<br>
-  <em>Build & share delightful machine learning apps easily</em>
-
-  [![gradio-backend](https://github.com/gradio-app/gradio/actions/workflows/backend.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/backend.yml)
-  [![gradio-ui](https://github.com/gradio-app/gradio/actions/workflows/ui.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/ui.yml)  
-  [![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
-  [![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
-  ![Python version](https://img.shields.io/badge/python-3.8+-important)
-  [![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
-
-  [Website](https://gradio.app)
-  | [Documentation](https://gradio.app/docs/)
-  | [Guides](https://gradio.app/guides/)
-  | [Getting Started](https://gradio.app/getting_started/)
-  | [Examples](demo/)
-  | [中文](readme_files/zh-cn#readme)
+[<img src="readme_files/gradio.svg" alt="gradio" width=300>](https://gradio.app)<br>
+<em>Build & share delightful machine learning apps easily</em>
+
+[![gradio-backend](https://github.com/gradio-app/gradio/actions/workflows/backend.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/backend.yml)
+[![gradio-ui](https://github.com/gradio-app/gradio/actions/workflows/ui.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/ui.yml)  
+ [![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
+[![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
+![Python version](https://img.shields.io/badge/python-3.8+-important)
+[![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
+
+[Website](https://gradio.app)
+| [Documentation](https://gradio.app/docs/)
+| [Guides](https://gradio.app/guides/)
+| [Getting Started](https://gradio.app/getting_started/)
+| [Examples](demo/)
+| [中文](readme_files/zh-cn#readme)
+
 </div>
 
 # Gradio: Build Machine Learning Web Apps — in Python
@@ -43,7 +44,7 @@ Gradio is useful for:
 
 ### What Does Gradio Do?
 
-One of the *best ways to share* your machine learning model, API, or data science workflow with others is to create an **interactive app** that allows your users or colleagues to try out the demo in their browsers.
+One of the _best ways to share_ your machine learning model, API, or data science workflow with others is to create an **interactive app** that allows your users or colleagues to try out the demo in their browsers.
 
 Gradio allows you to **build demos and share them, all in Python.** And usually in just a few lines of code! So let's get started.
 
@@ -66,11 +67,10 @@ def greet(name):
     return "Hello " + name + "!"
 
 demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-    
+
 demo.launch()
 ```
 
-
 We shorten the imported name to `gr` for better readability of code using Gradio. This is a widely adopted convention that you should follow so that anyone working with your code can easily understand it.
 
 3\. The demo below will appear automatically within the Jupyter Notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860) if running from a script:
@@ -154,8 +154,8 @@ import gradio as gr
 
 def sepia(input_img):
     sepia_filter = np.array([
-        [0.393, 0.769, 0.189], 
-        [0.349, 0.686, 0.168], 
+        [0.393, 0.769, 0.189],
+        [0.349, 0.686, 0.168],
         [0.272, 0.534, 0.131]
     ])
     sepia_img = input_img.dot(sepia_filter.T)
@@ -184,8 +184,8 @@ You can read more about the many components and how to use them in the [Gradio d
 
 Gradio includes a high-level class, `gr.ChatInterface`, which is similar to `gr.Interface`, but is specifically designed for chatbot UIs. The `gr.ChatInterface` class also wraps a function but this function must have a specific signature. The function should take two arguments: `message` and then `history` (the arguments can be named anything, but must be in this order)
 
-* `message`: a `str` representing the user's input
-* `history`: a `list` of `list` representing the conversations up until that point. Each inner list consists of two `str` representing a pair: `[user input, bot response]`. 
+- `message`: a `str` representing the user's input
+- `history`: a `list` of `list` representing the conversations up until that point. Each inner list consists of two `str` representing a pair: `[user input, bot response]`.
 
 Your function should return a single string response, which is the bot's response to the particular user input `message`.
 
@@ -232,7 +232,7 @@ with gr.Blocks() as demo:
     output = gr.Textbox(label="Output Box")
     greet_btn = gr.Button("Greet")
     greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
-   
+
 
 demo.launch()
 ```
@@ -289,7 +289,6 @@ A lot more going on here! We'll cover how to create complex `Blocks` apps like t
 
 Congrats, you're now familiar with the basics of Gradio! 🥳 Go to our [next guide](https://gradio.app/key_features) to learn more about the key features of Gradio.
 
-
 ## Open Source Stack
 
 Gradio is built with many wonderful open-source libraries, please support them as well!
@@ -311,7 +310,7 @@ Gradio is licensed under the Apache License 2.0 found in the [LICENSE](LICENSE)
 
 ## Citation
 
-Also check out the paper *[Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild](https://arxiv.org/abs/1906.02569), ICML HILL 2019*, and please cite it if you use Gradio in your work.
+Also check out the paper _[Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild](https://arxiv.org/abs/1906.02569), ICML HILL 2019_, and please cite it if you use Gradio in your work.
 
 ```
 @article{abid2019gradio,

diff --git a/client/js/README.md b/client/js/README.md
@@ -65,8 +65,8 @@ Applications hosted on Hugging Face spaces can be in a number of different state
 import { client, type SpaceStatus } from "@gradio/client";
 
 const app = await client("user/space-name", {
-  // The space_status parameter does not need to be manually annotated, this is just for illustration.
-  space_status: (space_status: SpaceStatus) => console.log(space_status),
+	// The space_status parameter does not need to be manually annotated, this is just for illustration.
+	space_status: (space_status: SpaceStatus) => console.log(space_status)
 });
 ```
 
@@ -157,22 +157,22 @@ The status payload look like this:
 
 ```ts
 interface Status {
-  queue: boolean;
-  code?: string;
-  success?: boolean;
-  stage: "pending" | "error" | "complete" | "generating";
-  size?: number;
-  position?: number;
-  eta?: number;
-  message?: string;
-  progress_data?: Array<{
-    progress: number | null;
-    index: number | null;
-    length: number | null;
-    unit: string | null;
-    desc: string | null;
-  }>;
-  time?: Date;
+	queue: boolean;
+	code?: string;
+	success?: boolean;
+	stage: "pending" | "error" | "complete" | "generating";
+	size?: number;
+	position?: number;
+	eta?: number;
+	message?: string;
+	progress_data?: Array<{
+		progress: number | null;
+		index: number | null;
+		length: number | null;
+		unit: string | null;
+		desc: string | null;
+	}>;
+	time?: Date;
 }
 ```
 
@@ -183,9 +183,9 @@ import { client } from "@gradio/client";
 
 const app = await client("user/space-name");
 const submission = app
-  .submit("/predict", payload)
-  .on("data", (data) => console.log(data))
-  .on("status", (status: Status) => console.log(status));
+	.submit("/predict", payload)
+	.on("data", (data) => console.log(data))
+	.on("status", (status: Status) => console.log(status));
 ```
 
 ##### `off`
@@ -229,8 +229,8 @@ import { client } from "@gradio/client";
 
 const app = await client("user/space-name");
 const submission = app
-  .submit("/predict", payload)
-  .on("data", (data) => console.log(data));
+	.submit("/predict", payload)
+	.on("data", (data) => console.log(data));
 
 // later
 
@@ -271,7 +271,7 @@ The duplicate function will attempt to duplicate the space that is referenced an
 import { duplicate } from "@gradio/client";
 
 const app = await duplicate("user/space-name", {
-  hf_token: "hf_...",
+	hf_token: "hf_..."
 });
 ```
 
@@ -295,8 +295,8 @@ This is an optional property specific to `duplicate`'s options object and will d
 import { duplicate } from "@gradio/client";
 
 const app = await duplicate("user/space-name", {
-  hf_token: "hf_...",
-  private: true,
+	hf_token: "hf_...",
+	private: true
 });
 ```
 
@@ -308,9 +308,9 @@ This is an optional property specific to `duplicate`'s options object and will s
 import { duplicate } from "@gradio/client";
 
 const app = await duplicate("user/space-name", {
-  hf_token: "hf_...",
-  private: true,
-  timeout: 5,
+	hf_token: "hf_...",
+	private: true,
+	timeout: 5
 });
 ```
 
@@ -332,8 +332,8 @@ Possible hardware options are:
 import { duplicate } from "@gradio/client";
 
 const app = await duplicate("user/space-name", {
-  hf_token: "hf_...",
-  private: true,
-  hardware: "a10g-small",
+	hf_token: "hf_...",
+	private: true,
+	hardware: "a10g-small"
 });
 ```