Closed freddyaboulton closed 11 months ago
Thoughts on creating my first custom component:
gradio_component
to gradio
Can we create single-file templates for common components? It's kind of jarring to see so many different files when you're just getting started.
Allow authors to choose the package name. Right now, it defaults to the class name.
If we're referring to the python package, perhaps the default could be gradio-{component_name}
. This is less likely to already exist on pypi and can make finding gradio-related packages easier
ImportError: cannot import name 'RootModel' from 'pydantic' (/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/site-packages/pydantic/__init__.cpython-311-darwin.so)
[x] It might be confusing to users that two ports are launched. Maybe we just show the frontend one?
[x] I think it would be more intuitive if the default demo was an Interface with input on the left, output on the right, and examples at the bottom. For the value of the example, we could use the example_inputs()
method of the component
[x] the process of adding / removing props is cumbersome -- you have to add/remove the prop in at least 4 places (once in the backend, once in the static version of the component, once in the interactive, and once in the shared). Should we refactor the code so that you have a single file for a component, and there are flags for interactive/static? We'd lose dynamic loading, but it would simplify things so much for almost every component and probably also align better with the mental model people have for mapping frontend and backend.
[x] it would be nice to know which attributes in the backend need to be implemented at the component-level, versus which ones are taken care of by the Blocks container. For example, for the Textbox, a user doesn't have to worry about implementing label
, show_label
, container
, min_width
, etc. but this might not be obvious.
[x] if you run gradio_component dev
and there's an error in your code, there's a whole lot of blank lines that are printed in the terminal console, like this:
In my case, my app was raising a ValueError
in the python code
From @aliabid94:
Great work so far!
Few questions here that remain after the demo yesterday:
Will be working on a few components now to test stuff more:
Thanks @duerrsimon for this feedback!
What's the best way to integrate another CSS framework like tailwind in the build process? I'd prefer to have multiple components all use the same stylesheet generated by tailwind and not include tailwind multiple times so I guess it would make sense if one could add some global front-end dependencies. I think tailwind supports project set up as monorepos but I am no expert in this.
Tailwind doesn't play well with Gradio themes. I think the better approach would be to use the CSS variables that are also used in the core Gradio components. You can take a look at existing Gradio components to see how to use the CSS variables. Generally, it looks like this: var(--checkbox-border-color-focus)
. We'll also document these better (cc @hannahblair @pngwn)
Right now looks like all customcomponents will have to be in Svelte, no? Or will it be possible to use e.g React or Vue at a later point as well?
We'll probably stick to Svelte. Even though I'm primarily backend engineer who tries to stay away from frontend as much as possible, I'll say that the learning curve for Svelte is particularly nice (way easier to pick up than React imo). I've added some resources for learning Svelte to our guide: https://github.com/gradio-app/gradio/wiki/Guide-to-Custom-Components-(Beta)
Gradio uses @gradio/icons for some icons. Would be great to indicate open icon libraries with similar style so that the iconography stays somewhat consistent
@pngwn do you have any thoughts on this?
Oh it looks like @hannahblair is already addressing the first point in this PR: https://github.com/gradio-app/gradio/pull/5750!
Looking forward to the new components @duerrsimon! Thanks for the comments/questions.
https://github.com/gradio-app/gradio/assets/41651716/1fa978e6-ca8e-4574-87e9-cb30d1882a8f
EDIT: Using this to store assets lol
Uploading PDFDemo.mov…
Did pretty much all of this. Converted the remaining TODOs to issues and added the custom-components
label.
Thanks again for the feedback @duerrsimon !
Place to track all of the bugs, nits, and comments found in the 4.0 branch (
v4
)Pre launch
__call__
method is still calling serialize so it doesn't workgradio_component build
builds the front-endNice to have
gradio cc build
(post launch)Definitely post launch