Custom Components: gradio cc build - js not being built

[AlUlkesh]

Describe the bug

I am trying to write a custom component. I then build it with gradio cc build. This works fine a couple of times, but at some point it stops updating the files in backend\...\templates\component\

That means that the created wheel then contains the newly built python part, but the js part is from the last build that worked correctly.

The only way I found to correct this, is to make a new directory with gradio cc create and copy my changed files into there again. The next gradio cc build from the new directory will work then. But eventually that too will stop building the js files.

This makes developing the component pretty much impossible.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

gradio cc create MyComponent --template Gallery
Change the frontend\shared\Gallery.svelte file
gradio cc build --bump-version
Keep repeating changing Gallery.svelte and building. At some (seemingly random?) point it stops updating the files in backend\...\templates\component\

Screenshot

There are no errors or logs:

gradio cc build --bump-version
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ 📦 Building package in imagebrowsergallery                                                                           │
│ 🔢 Using version 0.0.4. Set --no-bump-version to use the version in pyproject.toml file.                             │
│ 🎨 Building frontend                                                                                                 │
│ ✅ Build succeeded!                                                                                                  │
│ 👷 Building... (z:\AI\image-browser-gallery\venv\Scripts\python.EXE -m build                                         │
│ Z:\AI\image-browser-gallery\imagebrowsergallery)                                                                     │
│ ✅ Build succeeded!                                                                                                  │
│ 🎡 Wheel located in Z:\AI\image-browser-gallery\imagebrowsergallery\dist                                             │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Logs

node -v
v18.17.0

npm -v
9.6.7

pyproject.toml:

[build-system]
requires = [
  "hatchling",
  "hatch-requirements-txt",
  "hatch-fancy-pypi-readme>=22.5.0",
]
build-backend = "hatchling.build"

[project]
name = "gradio_imagebrowsergallery"
version = "0.0.5"
description = "Gallery component with additional features"
readme = "README.md"
license = "unlicense"
requires-python = ">=3.8"
authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
keywords = ["gradio-custom-component", "gradio-template-Gallery", "Gallery", "Image-Browser"]
# Add dependencies here
dependencies = ["gradio>=4.0,<5.0"]
classifiers = [
  'Development Status :: 3 - Alpha',
  'License :: OSI Approved :: Apache Software License',
  'Operating System :: OS Independent',
  'Programming Language :: Python :: 3',
  'Programming Language :: Python :: 3 :: Only',
  'Programming Language :: Python :: 3.8',
  'Programming Language :: Python :: 3.9',
  'Programming Language :: Python :: 3.10',
  'Programming Language :: Python :: 3.11',
  'Topic :: Scientific/Engineering',
  'Topic :: Scientific/Engineering :: Artificial Intelligence',
  'Topic :: Scientific/Engineering :: Visualization',
]

[project.optional-dependencies]
dev = ["build", "twine"]

[tool.hatch.build]
artifacts = ["/backend/gradio_imagebrowsergallery/templates", "*.pyi"]

[tool.hatch.build.targets.wheel]
packages = ["/backend/gradio_imagebrowsergallery"]

System Info

Gradio Environment Information:
------------------------------
Operating System: Windows
gradio version: 4.12.0
gradio_client version: 0.8.0

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

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.108.0
ffmpy: 0.3.1
gradio-client==0.8.0 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.1
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.2
numpy: 1.26.2
orjson: 3.9.10
packaging: 23.2
pandas: 2.1.4
pillow: 10.1.0
pydantic: 2.5.3
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
uvicorn: 0.25.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.12.2
httpx: 0.26.0
huggingface-hub: 0.20.1
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[AlUlkesh]

Well, I found the cause of the issue.

In this part of the Gradio code of venv\Lib\site-packages\gradio\node\examine.py:

    module_name = pyproject_toml["project"]["name"]
    module = importlib.import_module(module_name)

    artifacts: list[str] = pyproject_toml["tool"]["hatch"]["build"]["artifacts"]

the code just stops after the importlib line (or is not handled by the javascript that calls it).

I put it in a try block and got a No module named xxx exception.

After doing a pip install -e . on my custom component it works again.

Not sure what the initial thing that causes this is though.

[freddyaboulton]

Hi @AlUlkesh !

I can't reproduce this locally. I made 7 modifications to the label value in the gallery on the index.svelte file and the build command always picked it up.

@pngwn Are you able to repro? I wonder if it's another Windows issue

[AlUlkesh]

Hi @freddyaboulton ,

Have you tried uninstalling the custom component and then trying a gradio cc build? Mine got (don't know why yet) uninstalled and then this happened.

[pngwn]

We need the component to be installed for the tooling to work so that's expected. I'm curious as to why it got uninstalled though.

@freddyaboulton should we install as part of the build step to be certain?

[AlUlkesh]

I think one thing that would be helpful is to throw an error when examine.py has a problem, instead of silently continuing. Then the user at least knows something is wrong.

[pngwn]

Yeah. I'll try to surface that error in the logs for easier debugging.

[freddyaboulton]

Mine got (don't know why yet) uninstalled and then this happened.

Very mysterious that this happened. Not sure either but have not seen it happen.

@freddyaboulton should we install as part of the build step to be certain?

I think we can error in the build step if the component is not installed rather than installing it again because most times the component will already be installed.

I like the suggestion to surface a log in examine.py. Just to confirm you're going to do that @pngwn ? I can make the modifications to the build command.

[pngwn]

I think we can error in the build step if the component is not installed rather than installing it again because most times the component will already be installed.

Sounds good!

I like the suggestion to surface a log in examine.py. Just to confirm you're going to do that @pngwn ?

Yep, I'll take care of that today!