Clarity needed for cli tool \ custom component development

[cognitivetech]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

While learning to work with custom components is challenging, due to some incomplete documentation.

1. Python 3.8 does not work at all on my system for gradio cc commands.

On OSX Ventura with python 3.8 gradio cc dev results in:

ValueError: Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your frontend folder.

Which led me down a rabbit hole trying to install js packages... eventually I switched to python3.11 (where I would have started if the docs didn't explicitly suggest 3.8)

2. CC docs are missing an important step for local development.

Once I got the cc commands working under python 3.11, I discovered that I was missing a step:

gradio cc install

which inspired me to try gradio cc --help which does produce a helpful output (but isn't described in the documentation)

3. While we are here, there is a typo on the gradio cc build output

ValueError: Your custom component package (gradio_books) is not installed! Please install it with the gradio cc install command before buillding it.

"buillding" should read "building"

Describe the solution you'd like

Mostly I just care about updated documentation. I would consider doing this myself, but I'm still figuring out how this stuff works.

I confirmed that in python 3.9-3.11 the gradio app functions, when I try gradio cc build it suggests to use gradio cc install first.

So some documentation about the use of gradio cc install would be great.

Beyond that, general description of the commands listed on gradio cc --help woudl be super

% gradio cc --help
                                                                                                         
 Usage: cc [OPTIONS] COMMAND [ARGS]...                                                                   
                                                                                                         
 Create and publish a new Gradio component                                                               
                                                                                                         
╭─ Options ─────────────────────────────────────────────────────────────────────────────────────────────╮
│ --install-completion          Install completion for the current shell.                               │
│ --show-completion             Show completion for the current shell, to copy it or customize the      │
│                               installation.                                                           │
│ --help                        Show this message and exit.                                             │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─ Commands ────────────────────────────────────────────────────────────────────────────────────────────╮
│ build     Build the component for distribution. Must be called from the component directory.          │
│ create    Create a new component.                                                                     │
│ dev       Launch the custom component demo in development mode.                                       │
│ docs      Generate documentation for a custom components                                              │
│ install   Install the custom component in the current environment                                     │
│ publish   Publish a component to PyPI and HuggingFace Hub                                             │
│ show      Show the list of available templates                                                        │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯

and if its not asking too much, a help command in the main part of gradio cli to list available commands, or at least a version... something more graceful than:

% gradio
Traceback (most recent call last):
  File "/Users/cognitive/.pyenv/versions/3.9.19/bin/gradio", line 8, in <module>
    sys.exit(cli())
  File "/Users/cognitive/.pyenv/versions/3.9.19/lib/python3.9/site-packages/gradio/cli/cli.py", line 25, in cli
    raise ValueError("No file specified.")
ValueError: No file specified.

Context

https://github.com/gradio-app/gradio/blob/main/guides/06_custom-components/01_custom-components-in-five-minutes.md

[cognitivetech]

ok, one last thing:

Do I need to gradio cc install before gradio cc dev?

In all the versions when I type gradio cc dev my output is like this:

% gradio cc dev   
♻ Launching demo/app.py in reload mode

╭─────────────────────────────── Traceback (most recent call last) ────────────────────────────────╮
│ /Users/cognitive/.pyenv/versions/3.11.5/lib/python3.11/site-packages/gradio/cli/commands/components/de │
│ v.py:83 in _dev                                                                                  │
│                                                                                                  │
│    80 │   )                                                                                      │
│    81 │                                                                                          │
│    82 │   if gradio_node_path.returncode != 0:                                                   │
│ ❱  83 │   │   raise ValueError(                                                                  │
│    84 │   │   │   "Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your fr   │
│    85 │   │   )                                                                                  │
│    86                                                                                            │
│                                                                                                  │
│ ╭─────────────────────────────────────────── locals ───────────────────────────────────────────╮ │
│ │                 app = PosixPath('demo/app.py')                                               │ │
│ │ component_directory = PosixPath('/Users/cognitive/github/gradio/guides/gradio_pdf/books')          │ │
│ │    gradio_node_path = CompletedProcess(args=['/usr/local/bin/node', '-e',                    │ │
│ │                       "console.log(require.resolve('@gradio/preview'))"], returncode=1,      │ │
│ │                       stdout=b'', stderr=b"node:internal/modules/cjs/loader:1227\n  throw    │ │
│ │                       err;\n  ^\n\nError: Cannot find module '@gradio/preview'\nRequire      │ │
│ │                       stack:\n-                                                              │ │
│ │                       /Users/cognitive/github/gradio/guides/gradio_pdf/books/frontend/[eval]\n     │ │
│ │                       at Module._resolveFilename                                             │ │
│ │                       (node:internal/modules/cjs/loader:1224:15)\n    at Function.resolve    │ │
│ │                       (node:internal/modules/helpers:190:19)\n    at [eval]:1:21\n    at     │ │
│ │                       runScriptInThisContext (node:internal/vm:209:10)\n    at               │ │
│ │                       node:internal/process/execution:118:14\n    at [eval]-wrapper:6:24\n   │ │
│ │                       at runScript (node:internal/process/execution:101:62)\n    at          │ │
│ │                       evalScript (node:internal/process/execution:136:3)\n    at             │ │
│ │                       node:internal/main/eval_string:51:3 {\n  code: 'MODULE_NOT_FOUND',\n   │ │
│ │                       requireStack: [\n                                                      │ │
│ │                       '/Users/cognitive/github/gradio/guides/gradio_pdf/books/frontend/[eval]'\n   │ │
│ │                       ]\n}\n\nNode.js v22.1.0\n")                                            │ │
│ │         gradio_path = '/Users/cognitive/.pyenv/versions/3.11.5/bin/gradio'                         │ │
│ │                host = 'localhost'                                                            │ │
│ │                node = '/usr/local/bin/node'                                                  │ │
│ │         python_path = '/Users/cognitive/.pyenv/versions/3.11.5/bin/python3'                        │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
ValueError: Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your frontend folder.

ok, so it still doesn't work after I run gradio cc install but presumably I can install after changes and test from there... though hot-loading would be nice 🙏

[cognitivetech]

ok, well.. I just realized I am trying to code with gradio_pdf which was released in january, so before cc became a module.

maybe I will try again from scratch with the newer code next time

[freddyaboulton]

Hi @cognitivetech ! Thanks for filing an issue and sorry for the trouble.

The five minute guide does not cover install because it is run as a part of create when building a new component. Seems like the issue stems from starting off of someone else's component. Will add a guide to cover that (or modify an existing guide).

BTW what do you mean by this - the --help flag already shows a general description of each command like you show.

Beyond that, general description of the commands listed on gradio cc --help woudl be super

Also the issue with @gradio/preview should not have anything to do with python 3.8. It's just that old components did not list it as a frontend dependency. Can you elaborate?

[cognitivetech]

thanks freddy! i did find the gradio --help does work, later on.. so I deleted the first place mentioned on this issue, but failed to move from the other. I think I was just at my wits end trying a million different things. Maybe it was gradio --version, gradio -H or just gradio that wasn't giving me the information I wanted at that moment... but ultimately I was just tired and salty. :-)

I just had such high hope after beginning to work on your HF space, but trying to develop that cc gave me grief.

I look forward to getting to know this project better!

[cognitivetech]

hey @freddyaboulton just a friendly ping.

if you even have some basic instructions to get me started developing the cc, that would be great!

keeping busy with backend issues, but I just hope to get an MVP up sooner than later, and don't want to search anew for some other frontend solution.

[freddyaboulton]

I've modified the pdf github repo to be compatible with the latest gradio version. Opened #8386 to make some modifications to the guide.