[gradio] local development manual maybe old?

[yukihirop]

Describe the bug

I followed the instructions here.

https://github.com/gradio-app/gradio/tree/71624039d2f1fd5b5e91f0aa1d34391bb2c5c5a0/js

Why is the front-end screen the same as the server one?

Have you searched existing issues? 🔎

I have searched and found no existing issues

Reproduction

Logs

demo/kitchen_sink

(kitchen-sink-py3.11) #2024-06-15 22:16|hoge@PC-0093:~/src/github.com/gradio-app/gradio/demo/kitchen_sink (main*+?)
$ python3 run.py
Using cache from '/Users/hoge/src/github.com/gradio-app/gradio/demo/kitchen_sink/gradio_cached_examples/43' directory. If method or examples have changed since last caching, delete this folder to clear cache.

Running on local URL:  http://127.0.0.1:7860

To create a public link, set `share=True` in `launch()`.

I understand that demo/kitchen_sink works as a BACKEND.

frontend

pnpm dev

> @gradio/app@1.36.2 dev /Users/hoge/src/github.com/gradio-app/gradio/js/app
> vite --port 9876

  VITE v5.2.11  ready in 650 ms

  ➜  Local:   http://localhost:9876/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
10:16:18 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/Index.svelte:337:2 <Login/> will not be reactive if Login changes. Use <svelte:component this={Login}/> if you want this reactivity.
10:16:18 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/Index.svelte:344:2 <Blocks/> will not be reactive if Blocks changes. Use <svelte:component this={Blocks}/> if you want this reactivity.
10:16:18 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/atoms/src/IconButton.svelte:38:2 <Icon/> will not be reactive if Icon changes. Use <svelte:component this={Icon}/> if you want this reactivity.
10:16:18 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/atoms/src/BlockLabel.svelte:17:2 <Icon/> will not be reactive if Icon changes. Use <svelte:component this={Icon}/> if you want this reactivity.
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:83:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:83:6 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:18:11 ApiDocs has unused export property 'root_node'. If it is for external reference only, please consider using `export const root_node`
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:267:1 Unused CSS selector ".library"
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:322:1 Unused CSS selector ".header"
10:16:19 PM [vite-plugin-svelte] /Users/hoge/src/github.com/gradio-app/gradio/js/app/src/api_docs/ApiDocs.svelte:345:1 Unused CSS selector "#api-recorder"

open http://localhost:9876/

Why is the front end display showing demo's?

System Info

gradio environment
Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.36.1
gradio_client version: 1.0.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==1.0.1 is not installed.
httpx: 0.27.0
huggingface-hub: 0.19.4
importlib-resources: 6.4.0
jinja2: 3.1.2
markupsafe: 2.1.1
matplotlib: 3.5.1
numpy: 1.26.2
orjson: 3.10.5
packaging: 24.0
pandas: 1.4.2
pillow: 10.0.1
pydantic: 2.7.4
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0
ruff: 0.4.9
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.1
uvicorn: 0.30.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.12.1
httpx: 0.27.0
huggingface-hub: 0.19.4
packaging: 24.0
typing-extensions: 4.12.2
websockets: 11.0.3

Severity

I can work around it

[pngwn]

I’m not sure I understand, this seems to be working as expected.

Why is the front end display showing demo's?

what do you mean by this? What would you expect to see?

[yukihirop]

@pngwn

thank you. I can't understand why the screen displayed as a result of running "pnpm dev" is kitchen_sink. 🙇‍♂️ Since it's called frontend, I expect other screens to be displayed.

[pngwn]

When you run pnpm dev it will show whatever demo is being run at the same time. In this case, since kitchen_sink is running that is the backend that the frontend connects to. If you run a different demo then that will be shown instead.

[yukihirop]

@pngwn

thank you🙇‍♂️