move files (#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 <abubakar@huggingface.co>

.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

.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
 

.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;

.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,37 +2,37 @@
 
 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
@@ -40,35 +40,36 @@ 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!_

client/js/src/client.ts

@@ -10,7 +10,6 @@ import type {
 	EventListener,
 	ListenerMap,
 	Event,
-	Config,
 	Payload,
 	PostResponse,
 	UploadResponse,
@@ -19,6 +18,8 @@ import type {
 	SpaceStatusCallback
 } from "./types";
 
+import type { Config } from "../../../globals";
+
 type event = <K extends EventType>(
 	eventType: K,
 	listener: EventListener<K>
@@ -77,7 +78,7 @@ export async function client(
 	app_reference: string,
 	space_status_callback?: SpaceStatusCallback
 ): Promise<client_return> {
-	return new Promise(async (res, rej) => {
+	return new Promise(async (res) => {
 		const return_obj = {
 			predict,
 			on,

globals.d.ts

@@ -0,0 +1,31 @@
+declare global {
+	interface Window {
+		__gradio_mode__: "app" | "website";
+		launchGradio: Function;
+		launchGradioFromSpaces: Function;
+		gradio_config: Config;
+		scoped_css_attach: (link: HTMLLinkElement) => void;
+		__is_colab__: boolean;
+	}
+}
+
+export interface Config {
+	auth_required: boolean | undefined;
+	auth_message: string;
+	components: any[];
+	css: string | null;
+	dependencies: any[];
+	dev_mode: boolean;
+	enable_queue: boolean;
+	layout: any;
+	mode: "blocks" | "interface";
+	root: string;
+	theme: string;
+	title: string;
+	version: string;
+	is_space: boolean;
+	is_colab: boolean;
+	show_api: boolean;
+	stylesheets: string[];
+	path: string;
+}

gradio/version.txt

@@ -1 +1 @@
-3.23.0
+3.23.1b1

guides/06_other-tutorials/creating-a-new-component.md

@@ -8,7 +8,7 @@ The purpose of this guide is to illustrate how to add a new component, which you
 
 Make sure you have followed the [CONTRIBUTING.md](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) guide in order to setup your local development environment (both client and server side).
 
-Here's how to create a new component on Gradio: 
+Here's how to create a new component on Gradio:
 
 1. [Create a New Python Class and Import it](#1-create-a-new-python-class-and-import-it)
 2. [Create a New Svelte Component](#2-create-a-new-svelte-component)
@@ -132,7 +132,6 @@ class ColorPicker(Changeable, Submittable, IOComponent):
         return x
 ```
 
-
 Once defined, it is necessary to import the new class inside the [\_\_init\_\_](https://github.com/gradio-app/gradio/blob/main/gradio/__init__.py) module class in order to make it module visible.
 
 ```python
@@ -204,7 +203,8 @@ class TestColorPicker(unittest.TestCase):
 ## 2. Create a New Svelte Component
 
 Let's see the steps you need to follow to create the frontend of your new component and to map it to its python code:
-- Create a new UI-side Svelte component and figure out where to place it. The options are: create a package for the new component in the [ui/packages folder](https://github.com/gradio-app/gradio/tree/main/ui/packages), if this is completely different from existing components or add the new component to an existing package, such as to the [form package](https://github.com/gradio-app/gradio/tree/main/ui/packages/form). The ColorPicker component for example, was included in the form package because it is similar to components that already exist.
+
+- Create a new UI-side Svelte component and figure out where to place it. The options are: create a package for the new component in the [js folder](https://github.com/gradio-app/gradio/tree/main/js/), if this is completely different from existing components or add the new component to an existing package, such as to the [form package](https://github.com/gradio-app/gradio/tree/main/js/form). The ColorPicker component for example, was included in the form package because it is similar to components that already exist.
 - Create a file with an appropriate name in the src folder of the package where you placed the Svelte component, note: the name must start with a capital letter. This is the 'core' component and it's the generic component that has no knowledge of Gradio specific functionality. Initially add any text/html to this file so that the component renders something. The Svelte application code for the ColorPicker looks like this:
 
 ```typescript
@@ -247,8 +247,8 @@ Let's see the steps you need to follow to create the frontend of your new compon
 </label>
 ```
 
-- Export this file inside the index.ts file of the package where you placed the Svelte component by doing `export { default as FileName } from "./FileName.svelte"`. The ColorPicker file is exported in the [index.ts](https://github.com/gradio-app/gradio/blob/main/ui/packages/form/src/index.ts) file and the export is performed by doing: `export { default as ColorPicker } from "./ColorPicker.svelte";`.
-- Create the Gradio specific component in [ui/packages/app/src/components](https://github.com/gradio-app/gradio/tree/main/ui/packages/app/src/components). This is a Gradio wrapper that handles the specific logic of the library, passes the necessary data down to the core component and attaches any necessary event listeners. Copy the folder of another component, rename it and edit the code inside it, keeping the structure. 
+- Export this file inside the index.ts file of the package where you placed the Svelte component by doing `export { default as FileName } from "./FileName.svelte"`. The ColorPicker file is exported in the [index.ts](https://github.com/gradio-app/gradio/blob/main/js/form/src/index.ts) file and the export is performed by doing: `export { default as ColorPicker } from "./ColorPicker.svelte";`.
+- Create the Gradio specific component in [js/app/src/components](https://github.com/gradio-app/gradio/tree/main/js/app/src/components). This is a Gradio wrapper that handles the specific logic of the library, passes the necessary data down to the core component and attaches any necessary event listeners. Copy the folder of another component, rename it and edit the code inside it, keeping the structure.
 
 Here you will have three files, the first file is for the Svelte application, and it will look like this:
 
@@ -359,7 +359,7 @@ export { default as Component } from "./ColorPicker.svelte";
 export const modes = ["static", "dynamic"];
 ```
 
-- Add the mapping for your component in the [directory.ts file](https://github.com/gradio-app/gradio/blob/main/ui/packages/app/src/components/directory.ts). To do this, copy and paste the mapping line of any component and edit its text. The key name must be the lowercase version of the actual component name in the Python library. So for example, for the ColorPicker component the mapping looks like this: 
+- Add the mapping for your component in the [directory.ts file](https://github.com/gradio-app/gradio/blob/main/js/app/src/components/directory.ts). To do this, copy and paste the mapping line of any component and edit its text. The key name must be the lowercase version of the actual component name in the Python library. So for example, for the ColorPicker component the mapping looks like this:
 
 ```typescript
 export const component_map = {
@@ -371,17 +371,17 @@ colorpicker: () => import("./ColorPicker"),
 
 ### 2.1 Writing Unit Test for Svelte Component
 
-When developing new components, you should also write a suite of unit tests for it. The tests should be placed in the new component's folder in a file named MyAwesomeComponent.test.ts. Again, as above, take a cue from the tests of other components (e.g. [Textbox.test.ts](https://github.com/gradio-app/gradio/blob/main/ui/packages/app/src/components/Textbox/Textbox.test.ts)) and add as many unit tests as you think are appropriate to test all the different aspects and functionalities of the new component.
+When developing new components, you should also write a suite of unit tests for it. The tests should be placed in the new component's folder in a file named MyAwesomeComponent.test.ts. Again, as above, take a cue from the tests of other components (e.g. [Textbox.test.ts](https://github.com/gradio-app/gradio/blob/main/js/app/src/components/Textbox/Textbox.test.ts)) and add as many unit tests as you think are appropriate to test all the different aspects and functionalities of the new component.
 
 ### 3. Create a New Demo
 
-The last step is to create a demo in the [gradio/demo folder](https://github.com/gradio-app/gradio/tree/main/demo), which will use the newly added component. Again, the suggestion is to reference an existing demo. Write the code for the demo in a file called run.py, add the necessary requirements and an image showing the application interface. Finally add a gif showing its usage. 
+The last step is to create a demo in the [gradio/demo folder](https://github.com/gradio-app/gradio/tree/main/demo), which will use the newly added component. Again, the suggestion is to reference an existing demo. Write the code for the demo in a file called run.py, add the necessary requirements and an image showing the application interface. Finally add a gif showing its usage.
 You can take a look at the [demo](https://github.com/gradio-app/gradio/tree/main/demo/color_picker) created for the ColorPicker, where an icon and a color selected through the new component is taken as input, and the same icon colored with the selected color is returned as output.
 
 To test the application:
 
 - run on a terminal `python path/demo/run.py` which starts the backend at the address [http://localhost:7860](http://localhost:7860);
-- in another terminal, from the ui folder, run `pnpm dev` to start the frontend at [http://localhost:9876](http://localhost:9876) with hot reload functionalities.
+- in another terminal, run `pnpm dev` to start the frontend at [http://localhost:9876](http://localhost:9876) with hot reload functionalities.
 
 ## Conclusion
 

js/_cdn-test/package.json

@@ -3,8 +3,8 @@
 	"private": true,
 	"version": "0.0.0",
 	"scripts": {
-		"dev": "vite --port 3001",
-		"build": "vite build",
+		"dev": "vite --port 3001 -c",
+		"build": "vite build -c",
 		"preview": "vite preview  --port 3001"
 	},
 	"devDependencies": {

js/app/package.json

@@ -5,13 +5,13 @@
 	"scripts": {
 		"dev": "vite --port 9876",
 		"build:cdn": "vite build --mode production:cdn --emptyOutDir",
-		"build:website": "vite build --mode production:website --emptyOutDir",
-		"build:local": "vite build --mode production:local --emptyOutDir",
+		"build:website": "vite build  --mode production:website --emptyOutDir",
+		"build:local": "vite build  --mode production:local --emptyOutDir",
 		"preview": "vite preview",
-		"test:snapshot": "pnpm exec playwright test snapshots/ --config=../../playwright.config.js",
-		"test:browser": "pnpm exec playwright test test/ --config=../../playwright.config.js",
-		"test:browser:full": "python test/create_demo_configs.py && pnpm exec playwright test test/ --config=../../playwright.config.js",
-		"test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../playwright.config.js",
+		"test:snapshot": "pnpm exec playwright test snapshots/ --config=../../.config/playwright.config.js",
+		"test:browser": "pnpm exec playwright test test/ --config=../../.config/playwright.config.js",
+		"test:browser:full": "python test/create_demo_configs.py && pnpm exec playwright test test/ --config=../../.config/playwright.config.js",
+		"test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../.config/playwright.config.js",
 		"build:css": "pollen -c pollen.config.cjs -o src/pollen-dev.css"
 	},
 	"dependencies": {

js/app/snapshots/blocks_layout.spec.ts

@@ -6,7 +6,7 @@ function mock_demo(page: Page, demo: string) {
 			headers: {
 				"Access-Control-Allow-Origin": "*"
 			},
-			path: `../../../demo/${demo}/config.json`
+			path: `../../demo/${demo}/config.json`
 		});
 	});
 }

js/app/snapshots/blocks_xray.spec.ts

@@ -6,7 +6,7 @@ function mock_demo(page: Page, demo: string) {
 			headers: {
 				"Access-Control-Allow-Origin": "*"
 			},
-			path: `../../../demo/${demo}/config.json`
+			path: `../../demo/${demo}/config.json`
 		});
 	});
 }

js/app/snapshots/kitchen_sink.spec.ts

@@ -6,7 +6,7 @@ function mock_demo(page: Page, demo: string) {
 			headers: {
 				"Access-Control-Allow-Origin": "*"
 			},
-			path: `../../../demo/${demo}/config.json`
+			path: `../../demo/${demo}/config.json`
 		});
 	});
 }