custom component templating not working for some components

[duerrsimon]

Describe the bug

The following command doesn't work:
gradio_component create Model3dTest --template model3d --install --overwrite

The folder for model3D does exist but I guess there is some automatic conversion to lowercase going on. If I rename
miniconda3/envs/gradio_customcomponents/lib/python3.9/site-packages/gradio/_frontend_code/model3D/ to model3d the error messages changes from FileNotFoundError: [Errno 2] No such file or directory: to ValueError: Cannot find model3d in gradio.components or gradio.layouts. Please pass in a valid component name via the --template option. It must match the name of the python class exactly.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

run command above

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 3.45.0b11
gradio_client version: 0.6.0b2

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

aiofiles: 23.2.1
altair: 5.1.1
fastapi: 0.103.1
ffmpy: 0.3.1
gradio-client==0.6.0-beta.2 is not installed.
httpx: 0.25.0
huggingface-hub: 0.17.3
importlib-resources: 6.1.0
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.0
numpy: 1.26.0
orjson: 3.9.7
packaging: 23.1
pandas: 2.1.1
pillow: 10.0.1
pydantic: 2.4.1
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
requests: 2.31.0
semantic-version: 2.10.0
typer: 0.9.0
typing-extensions: 4.8.0
uvicorn: 0.23.2
websockets: 11.0.3
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.9.2
httpx: 0.25.0
huggingface-hub: 0.17.3
packaging: 23.1
requests: 2.31.0
typing-extensions: 4.8.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[pngwn]

Does this work with 'Model3D'?

[duerrsimon]

No, that was the first thing I tried since that is the classname of the gradio component.

Since it looks for the folder model3d instead of Model3D I assumed it has to do something with automatic conversion to lowercase under the hood.

$ gradio_component create Model3dTest --template Model3D --install --overwrite
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ 🏗  Creating component Model3dTest in directory model3dtest                                                  │
│ 📠 Starting from template Model3D                                                                           │
│ 🐍 Created backend code                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────── Traceback (most recent call last) ────────────────────────────────╮
│ /home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3.9/site-packages/gradio/cli/comma │
│ nds/components/create.py:98 in _create                                                           │
│                                                                                                  │
│    95 │   │   _create_utils._create_backend(name, component, directory, package_name)            │
│    96 │   │   live.update(":snake: Created backend code", add_sleep=0.2)                         │
│    97 │   │                                                                                      │
│ ❱  98 │   │   _create_utils._create_frontend(name.lower(), component, directory=directory)       │
│    99 │   │   live.update(":art: Created frontend code", add_sleep=0.2)                          │
│   100 │   │                                                                                      │
│   101 │   │   if install:                                                                        │
│                                                                                                  │
│ ╭─────────────────────────────────────────── locals ───────────────────────────────────────────╮ │
│ │    component = ComponentFiles(                                                               │ │
│ │                │   template='Model3D',                                                       │ │
│ │                │   demo_code='\nexample = {name}().example_inputs()\n\nwith gr.Blocks() as   │ │
│ │                demo:\n    {name}(value'+73,                                                  │ │
│ │                │   python_file_name='model3d.py',                                            │ │
│ │                │   js_dir='model3d'                                                          │ │
│ │                )                                                                             │ │
│ │    directory = PosixPath('model3dtest')                                                      │ │
│ │      install = True                                                                          │ │
│ │         live = <gradio.cli.commands.display.LivePanelDisplay object at 0x7f2d48cbd730>       │ │
│ │         name = 'Model3dTest'                                                                 │ │
│ │          npm = '/usr/local/bin/npm'                                                          │ │
│ │  npm_install = '/usr/local/bin/npm install'                                                  │ │
│ │    overwrite = True                                                                          │ │
│ │ package_name = 'gradio_model3dtest'                                                          │ │
│ │     template = 'Model3D'                                                                     │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│                                                                                                  │
│ /home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3.9/site-packages/gradio/cli/comma │
│ nds/components/_create_utils.py:201 in _create_frontend                                          │
│                                                                                                  │
│   198 │   │   │   │   ignored.append(n)                                                          │
│   199 │   │   return ignored                                                                     │
│   200 │                                                                                          │
│ ❱ 201 │   shutil.copytree(                                                                       │
│   202 │   │   str(p / "_frontend_code" / component.js_dir),                                      │
│   203 │   │   frontend,                                                                          │
│   204 │   │   dirs_exist_ok=True,                                                                │
│                                                                                                  │
│ ╭─────────────────────────────────────────── locals ───────────────────────────────────────────╮ │
│ │ component = ComponentFiles(                                                                  │ │
│ │             │   template='Model3D',                                                          │ │
│ │             │   demo_code='\nexample = {name}().example_inputs()\n\nwith gr.Blocks() as      │ │
│ │             demo:\n    {name}(value'+73,                                                     │ │
│ │             │   python_file_name='model3d.py',                                               │ │
│ │             │   js_dir='model3d'                                                             │ │
│ │             )                                                                                │ │
│ │ directory = PosixPath('model3dtest')                                                         │ │
│ │  frontend = PosixPath('model3dtest/frontend')                                                │ │
│ │    ignore = <function _create_frontend.<locals>.ignore at 0x7f2d48d33f70>                    │ │
│ │      name = 'model3dtest'                                                                    │ │
│ │         p = PosixPath('/home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3.9/si… │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│                                                                                                  │
│ /home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3.9/shutil.py:566 in copytree      │
│                                                                                                  │
│    563 │   `src` tree.                                                                           │
│    564 │   """                                                                                   │
│    565 │   sys.audit("shutil.copytree", src, dst)                                                │
│ ❱  566 │   with os.scandir(src) as itr:                                                          │
│    567 │   │   entries = list(itr)                                                               │
│    568 │   return _copytree(entries=entries, src=src, dst=dst, symlinks=symlinks,                │
│    569 │   │   │   │   │    ignore=ignore, copy_function=copy_function,                          │
│                                                                                                  │
│ ╭─────────────────────────────────────────── locals ───────────────────────────────────────────╮ │
│ │            copy_function = <function copy2 at 0x7f2d53f4d040>                                │ │
│ │            dirs_exist_ok = True                                                              │ │
│ │                      dst = PosixPath('model3dtest/frontend')                                 │ │
│ │                   ignore = <function _create_frontend.<locals>.ignore at 0x7f2d48d33f70>     │ │
│ │ ignore_dangling_symlinks = False                                                             │ │
│ │                      src = '/home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3… │ │
│ │                 symlinks = False                                                             │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
FileNotFoundError: [Errno 2] No such file or directory: 
'/home/duerr/miniconda3/envs/gradio_customcomponents/lib/python3.9/site-packages/gradio/_frontend_code/model3d'

[freddyaboulton]

Thanks for filing @duerrsimon !

Templating Model3D works on the v4 branch. Planning to do another beta release either later today or tomorrow.

[duerrsimon]

Since this is working now, closing this issue.