move files (gradio-app#3605)

* move files

* commit the rest of the files

* fix lockfile

* fix workflow

* fix type errors

* fix tests

* only run ci when certain files change

* run correct test command in ci

* version

* fix pypi script

---------

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

.config/.prettierignore

@@ -0,0 +1,14 @@
+**/js/app/public/**
+**/pnpm-workspace.yaml
+**/js/app/dist/**
+**/pnpm-lock.yaml
+**/js/plot/src/Plot.svelte
+**/.svelte-kit/**
+**/demo/**
+**/gradio/**
+**/website/**
+**/venv/**
+**/.github/**
+**/guides/**
+**/test/**
+**/*.md

ui/README.md → .config/README.md

@@ -9,8 +9,6 @@ This folder contains all of the Gradio UI and component source code.
 - [quality checks](#quality-checks)
 - [ci checks](#ci-checks)
 
-> Note: The below assumes you are in the `ui` directory unless alternative instructions are given.
-
 ## setup
 
 This folder is managed as 'monorepo' a multi-package repository which make dependency management very simple. In order to do this we use `pnpm` as our package manager.
@@ -21,13 +19,13 @@ You will also need `node` which you probably already have
 
 ## running the application
 
-Install all dependencies from the `ui` folder:
+Install all dependencies:
 
 ```bash
 pnpm i
 ```
 
-This will install the dependencies for all packages within the `ui` folder and link any local packages
+This will install the dependencies for all packages and link any local packages
 
 ## local development
 
@@ -45,19 +43,18 @@ This will start a development server on port `7860` that the web app is expectin
 Run the web app:
 
 ```bash
-cd ui #move back into ui if you haven't already
 pnpm dev
 ```
 
 ## building for production
 
-From the `ui` folder run the build.
+Run the build:
 
 ```bash
 pnpm build
 ```
 
-This will create the necessary files in `ui/app/public` and also in `gradio/templates/frontend`.
+This will create the necessary files in `js/app/public` and also in `gradio/templates/frontend`.
 
 ## quality checks
 

ui/playwright.config.js → .config/playwright.config.js

@@ -3,6 +3,8 @@ export default {
 		screenshot: "only-on-failure",
 		trace: "retain-on-failure"
 	},
+	// testMatch: /.*.spec.ts/,
+	testDir: "..",
 	globalSetup: "./playwright-setup.js",
 	workers: 1
 };

.config/vitest.config.ts

@@ -0,0 +1,3 @@
+import config from "../js/app/vite.config";
+
+export default config;

ui/.editorconfig → .editorconfig

@@ -1,7 +1,8 @@
 
 root = true
 
-[*]
+[{js/*, client/js/*}]
 end_of_line = lf
 insert_final_newline = true
 indent_style = tab
+tab_width = 2

.github/workflows/backend.yml

@@ -42,7 +42,7 @@ jobs:
       with:
         node-version: 16
         cache: pnpm
-        cache-dependency-path: ui/pnpm-lock.yaml
+        cache-dependency-path: pnpm-lock.yaml
     - name: Install pip
       run: python -m pip install build requests virtualenv
     - name: venv activate Linux
@@ -83,10 +83,8 @@ jobs:
     - name: Build frontend
       shell: bash
       run: |
-        cd ui
         pnpm i --frozen-lockfile
         pnpm build
-        cd ..
     - name: Install ffmpeg
       uses: FedericoCarboni/setup-ffmpeg@v2
     - name: Create coverage dir

.github/workflows/build-pr.yml

@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: 16
         cache: pnpm
-        cache-dependency-path: ui/pnpm-lock.yaml
+        cache-dependency-path: pnpm-lock.yaml
     - name: Install pip
       run: python -m pip install build requests
     - name: Get PR Number
@@ -33,10 +33,8 @@ jobs:
     - name: Build pr package
       run: |
         echo ${{ env.GRADIO_VERSION }} > gradio/version.txt
-        cd ui
         pnpm i --frozen-lockfile
         pnpm build
-        cd ..
         python3 -m build -w
       env:
         NODE_OPTIONS: --max_old_space_size=8192

.github/workflows/publish-npm.yml

@@ -3,15 +3,17 @@ on:
   push:
     branches:
       - main
+    paths:
+      - 'js/**'
+      - 'client/js/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
 env:
   CI: true
   PNPM_CACHE_FOLDER: .pnpm-store
 jobs:
   version:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ui
     steps:
       - name: checkout code repository
         uses: actions/checkout@v3
@@ -25,7 +27,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: pnpm
-          cache-dependency-path: ui/pnpm-lock.yaml
+          cache-dependency-path: pnpm-lock.yaml
           node-version: 18
           registry-url: "https://registry.npmjs.org"
       - name: install dependencies
@@ -39,7 +41,6 @@ jobs:
           commit: "chore: update versions"
           title: "chore: update versions"
           publish: pnpm ci:publish
-          cwd: ui
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ui.yml

@@ -6,10 +6,6 @@ on:
       - "main"
   pull_request:
 
-defaults:
-  run:
-    working-directory: ui
-
 env:
   CI: true
   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
@@ -32,7 +28,7 @@ jobs:
         with:
           node-version: 16
           cache: pnpm
-          cache-dependency-path: ui/pnpm-lock.yaml
+          cache-dependency-path: pnpm-lock.yaml
       - name: install dependencies
         run: pnpm i --frozen-lockfile
       - name: formatting check
@@ -54,13 +50,13 @@ jobs:
         with:
           node-version: 16
           cache: pnpm
-          cache-dependency-path: ui/pnpm-lock.yaml
+          cache-dependency-path: pnpm-lock.yaml
       - name: Install Python
         uses: actions/setup-python@v3
         with:
           python-version: '3.x'
-      - run: cd .. && bash scripts/install_gradio.sh
-      - run: pip install -r ../demo/outbreak_forecast/requirements.txt
+      - run: bash scripts/install_gradio.sh
+      - run: pip install -r demo/outbreak_forecast/requirements.txt
       - run: pnpm install --frozen-lockfile
       - run: pnpm exec playwright install chromium
       - run: pnpm test:browser:full
@@ -70,4 +66,4 @@ jobs:
         with:
           retention-days: 3
           name: test-failure-${{ github.run_id }}
-          path: ui/packages/app/test-results
+          path: js/app/test-results

.gitignore

@@ -53,4 +53,9 @@ workspace.code-workspace
 .venv*
 
 # FRP
-gradio/frpc_*
+gradio/frpc_*
+
+# js
+node_modules
+public/build/
+test-results

.vscode/settings.json

@@ -1,23 +1,16 @@
 {
-    "python.formatting.provider": "black",
-    "cssvar.files": [
-    // Or your custom Pollen bundle
-    "./ui/node_modules/pollen-css/pollen.css",
-    ],
-    // Do not ignore css files in node_modules, which is ignored by default
-    "cssvar.ignore": [],
-    // Use Pollen's inbuilt variable ordering
-    "cssvar.disableSort": true,
-    // Add support for autocomplete in other file types
-    "cssvar.extensions": [
-        "js",
-        "css",
-        "html",
-        "jsx",
-        "tsx",
-        "svelte"
-    ],
-    "python.analysis.extraPaths": [
-        "./gradio/themes/utils"
-    ]
-}
+	"python.formatting.provider": "black",
+	"cssvar.files": [
+		// Or your custom Pollen bundle
+		"./js/node_modules/pollen-css/pollen.css"
+	],
+	// Do not ignore css files in node_modules, which is ignored by default
+	"cssvar.ignore": [],
+	// Use Pollen's inbuilt variable ordering
+	"cssvar.disableSort": true,
+	// Add support for autocomplete in other file types
+	"cssvar.extensions": ["js", "css", "html", "jsx", "tsx", "svelte"],
+	"python.analysis.extraPaths": ["./gradio/themes/utils"],
+	"prettier.configPath": ".config/.prettierrc.json",
+	"prettier.ignorePath": "./config/.prettierignore"
+}

CONTRIBUTING.md

@@ -2,73 +2,74 @@
 
 Prequisites:
 
-* [Python 3.7+](https://www.python.org/downloads/)
-* [pnpm version 7.x](https://pnpm.io/7.x/installation) (optional for backend-only changes, but needed for any frontend changes)
+- [Python 3.7+](https://www.python.org/downloads/)
+- [pnpm version 7.x](https://pnpm.io/7.x/installation) (optional for backend-only changes, but needed for any frontend changes)
 
 More than 80 awesome developers have contributed to the `gradio` library, and we'd be thrilled if you would like be the next `gradio` contributor! Start by cloning this repo and installing Gradio locally:
 
 ### Install Gradio locally from the `main` branch
 
-* Clone this repo
-* Navigate to the repo folder and run
+- Clone this repo
+- Navigate to the repo folder and run
 
 ```bash
 bash scripts/install_gradio.sh
 ```
 
-* Build the front end
+- Build the front end
 
 ```
 bash scripts/build_frontend.sh
 ```
 
-
 ### Install testing requirements
 
 In order to be able to run the Python unit tests, do the following:
 
-* Navigate to the repo folder and install test requirements (note that it is highly recommended to use a virtual environment running **Python 3.9** since the versions are pinned)
+- Navigate to the repo folder and install test requirements (note that it is highly recommended to use a virtual environment running **Python 3.9** since the versions are pinned)
 
 ```
 bash scripts/install_test_requirements.sh
 ```
-* If you have a different Python version and conflicting packages during the installation, please first run:
+
+- If you have a different Python version and conflicting packages during the installation, please first run:
 
 ```
 bash scripts/create_test_requirements.sh
 ```
 
 ### Extra tidbits
 
-* You can run gradio scripts in reload mode which will watch for changes in the `gradio` folder and reload the app if changes are made.
+- You can run gradio scripts in reload mode which will watch for changes in the `gradio` folder and reload the app if changes are made.
+
 ```
 gradio app.py
 ```
 
-* You can also start a local frontend development server (on port 3000 by default) that responds to any changes in the frontend.
+- You can also start a local frontend development server (on port 3000 by default) that responds to any changes in the frontend.
 
 ```
 bash scripts/run_frontend.sh
 ```
-* To run all of the tests, do:
+
+- To run all of the tests, do:
 
 ```
 bash scripts/run_all_tests.sh
 ```
 
-
 ### Structure of the Repository
 
 It's helpful to know the overall structure of the repository so that you can focus on the part of the source code you'd like to contribute to
 
-* `/gradio`: contains the Python source code for the library
-    * `/gradio/interface.py`: contains the Python source code for the core `Interface` class
-    * `/gradio/blocks.py`: contains the Python source code for the core `Blocks` class
-    * `/gradio/components.py`: contains the Python source code for the `components`, you can add your custom components here.
-* `/ui`: contains the HTML/JS/CSS source code for the library ([start here for frontend changes](/ui/README.md))
-* `/test`: contains Python unit tests for the library
-* `/demo`: contains demos that are used in the documentation, you can find `Gradio` examples over here.
-* `/website`: contains the code for the Gradio website (www.gradio.app). See the README in the `/website` folder for more details
+- `/gradio`: contains the Python source code for the library
+  - `/gradio/interface.py`: contains the Python source code for the core `Interface` class
+  - `/gradio/blocks.py`: contains the Python source code for the core `Blocks` class
+  - `/gradio/components.py`: contains the Python source code for the `components`, you can add your custom components here.
+- `/js`: contains the HTML/JS/CSS source code for the library ([start here for frontend changes](/ui/README.md))
+- `/test`: contains Python unit tests for the library
+- `/demo`: contains demos that are used in the documentation, you can find `Gradio` examples over here.
+- `/website`: contains the code for the Gradio website (www.gradio.app). See the README in the `/website` folder for more details
 
 ### Continuous Integration and Testing
 
@@ -78,22 +79,26 @@ All PRs must pass the continuous integration tests before merging. To test local
 
 All PRs should be against `main`. Direct commits to main are blocked, and PRs require an approving review to merge into main. By convention, the Gradio maintainers will review PRs when:
 
-* An initial review has been requested, and
-* A description of the change (with a link to the GitHub PR) has been added to CHANGELOG.md, and
-* A maintainer (@abidlabs, @aliabid94, @aliabd, @AK391, @dawoodkhan82, @pngwn, @freddyaboulton) is tagged in the PR comments and asked to complete a review
+- An initial review has been requested, and
+- A description of the change (with a link to the GitHub PR) has been added to CHANGELOG.md, and
+- A maintainer (@abidlabs, @aliabid94, @aliabd, @AK391, @dawoodkhan82, @pngwn, @freddyaboulton) is tagged in the PR comments and asked to complete a review
 
 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
 ```
+
 ```
 bash scripts/format_frontend.sh
 ```
-You can run the circleci checks locally as well. 
+
+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!*
+_Could these guidelines be clearer? Feel free to open a PR to help us faciltiate open-source contributions!_