Embedding Components on Docs#1726
Conversation
| assert "demo.launch()" in filedata, demo_name + " has no demo.launch()\n" + filedata | ||
| else: | ||
| os.mkdir(demo_folder) | ||
| filedata = component_launch_code.format(component_name=demo_name[:-10]) |
There was a problem hiding this comment.
I think it would be better if we defined a SUFFIX="_component" constant and then used it where it's needed.
Instead of demo_name.endwith("_component") we can do demo_name.endswith(SUFFIX) and .format(component_name=demo_name[:-len(SUFFIX)] as opposed to format(component_name=demo_name[:-10])
There was a problem hiding this comment.
What will happen if we create a new component that requires constructor parameters? The demo will not work properly for sure, but will it break the website build?
There was a problem hiding this comment.
To be clear, there isn't a component right now with required parameters. For example, CheckboxGroup should get choices but they're not required in the constructor, they default to None
So
import gradio as gr
with gr.Blocks() as demo:
component = gr.CheckboxGroup()
demo.launch()doesn't break the website, it just shows up like this:
If we create a component with required parameters in the constructor, but don't override with a _component demo, it will break the website build.
There was a problem hiding this comment.
Ok got it, I think we should try catch this to be more robust but otherwise LGTM!
|
Wonder what people think about the |
|
@aliabd The |
|
@aliabd this looks great! But I don't see the embedded components on the preview website:
|
|
@abidlabs there are a few of us who use the dev server now, I think when you checked someone else was testing a different change and checked out out of this branch. My mistake for linking to it as that's not how it should be used. embedded-components-demo.mov |
|
LGTM! |
|
As suggested by @aliabid94, moved all the |
| def launch_demo(demo_folder): | ||
| subprocess.check_call([f"cd {demo_folder} && python run2.py"], shell=True) | ||
|
|
||
| SUFFIX = "_component" |
There was a problem hiding this comment.
better name, COMPONENT_SUFFIX?
| filedata = filedata.replace(f"demo.launch()", f"demo.launch(server_port={port}, _frontend=False)") | ||
| with open(demo_2_file, "w") as file: | ||
| file.write(filedata) | ||
| demo_thread = threading.Thread(target=launch_demo, args=(demo_folder,)) |
There was a problem hiding this comment.
some duplicated code across this if/else branches
| }; | ||
|
|
||
|
|
||
| // Remove built-with-gradio footers and extra space from embedded components |
There was a problem hiding this comment.
couldn't be done with css? also this needs to be done in guides too, maybe put this in a js file or common template so it can be used there too.
There was a problem hiding this comment.
will do this in a separate PR
aliabid94
left a comment
aliabid94
left a comment
There was a problem hiding this comment.
LGTM beside small nits
4 participants
Embeds components on the docs page so readers can immediately see what they look like and interact with them.
The old way we did this was by hardcoding the configs, which meant they wouldn't change if the library did. This launches them the same way as demos. For most of the input components, the code is just this (to launch a demo with only the component):
But some require parameters (like CheckboxGroup, etc) or some are output only. All the code to launch the demos is in
/demo/components_demos/run.py, and modifying this will change the embedded component.