From 35a227fbfb0b0eb11806c0382c5f6910dc9777cf Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 24 Oct 2023 14:00:07 -0700 Subject: [PATCH] Proposal: sample demo for custom components should be a `gr.Interface` (#6077) * update sample demo to interface * add changeset * modify * Update gradio/cli/commands/components/_create_utils.py Co-authored-by: Freddy Boulton * added layout and static * fix * refine --------- Co-authored-by: gradio-pr-bot Co-authored-by: Freddy Boulton --- .changeset/violet-jokes-find.md | 5 + .../cli/commands/components/_create_utils.py | 105 ++++++++++++------ 2 files changed, 74 insertions(+), 36 deletions(-) create mode 100644 .changeset/violet-jokes-find.md diff --git a/.changeset/violet-jokes-find.md b/.changeset/violet-jokes-find.md new file mode 100644 index 0000000000..6c99981249 --- /dev/null +++ b/.changeset/violet-jokes-find.md @@ -0,0 +1,5 @@ +--- +"gradio": minor +--- + +feat:Proposal: sample demo for custom components should be a `gr.Interface` diff --git a/gradio/cli/commands/components/_create_utils.py b/gradio/cli/commands/components/_create_utils.py index 9974fa1ba5..6429fa05a2 100644 --- a/gradio/cli/commands/components/_create_utils.py +++ b/gradio/cli/commands/components/_create_utils.py @@ -20,9 +20,28 @@ def _in_test_dir(): default_demo_code = """ example = {name}().example_inputs() +demo = gr.Interface( + lambda x:x, + {name}(), # interactive version of your component + {name}(), # static version of your component + # examples=[[example]], # uncomment this line to view the "example version" of your component +) +""" + +static_only_demo_code = """ +example = {name}().example_inputs() + with gr.Blocks() as demo: - {name}(value=example, interactive=True) - {name}(value=example, interactive=False) + with gr.Row(): + {name}(label="Blank"), # blank component + {name}(value=example, label="Populated"), # populated component +""" + +layout_demo_code = """ +with gr.Blocks() as demo: + with {name}(): + gr.Textbox(value="foo", interactive=True) + gr.Number(value=10, interactive=True) """ @@ -40,16 +59,32 @@ class ComponentFiles: OVERRIDES = { "AnnotatedImage": ComponentFiles( - template="AnnotatedImage", python_file_name="annotated_image.py" + template="AnnotatedImage", + python_file_name="annotated_image.py", + demo_code=static_only_demo_code, ), "HighlightedText": ComponentFiles( - template="HighlightedText", python_file_name="highlighted_text.py" + template="HighlightedText", + python_file_name="highlighted_text.py", + demo_code=static_only_demo_code, ), + "Chatbot": ComponentFiles(template="Chatbot", demo_code=static_only_demo_code), + "Gallery": ComponentFiles(template="Gallery", demo_code=static_only_demo_code), + "HTML": ComponentFiles(template="HTML", demo_code=static_only_demo_code), + "Label": ComponentFiles(template="Label", demo_code=static_only_demo_code), + "Markdown": ComponentFiles(template="Markdown", demo_code=static_only_demo_code), + "Plot": ComponentFiles(template="Plot", demo_code=static_only_demo_code), "BarPlot": ComponentFiles( - template="BarPlot", python_file_name="bar_plot.py", js_dir="plot" + template="BarPlot", + python_file_name="bar_plot.py", + js_dir="plot", + demo_code=static_only_demo_code, ), "ClearButton": ComponentFiles( - template="ClearButton", python_file_name="clear_button.py", js_dir="button" + template="ClearButton", + python_file_name="clear_button.py", + js_dir="button", + demo_code=static_only_demo_code, ), "ColorPicker": ComponentFiles( template="ColorPicker", python_file_name="color_picker.py" @@ -58,6 +93,7 @@ OVERRIDES = { template="DuplicateButton", python_file_name="duplicate_button.py", js_dir="button", + demo_code=static_only_demo_code, ), "FileExplorer": ComponentFiles( template="FileExplorer", @@ -73,42 +109,46 @@ OVERRIDES = { ), ), "LinePlot": ComponentFiles( - template="LinePlot", python_file_name="line_plot.py", js_dir="plot" + template="LinePlot", + python_file_name="line_plot.py", + js_dir="plot", + demo_code=static_only_demo_code, ), "LogoutButton": ComponentFiles( - template="LogoutButton", python_file_name="logout_button.py", js_dir="button" + template="LogoutButton", + python_file_name="logout_button.py", + js_dir="button", + demo_code=static_only_demo_code, ), "LoginButton": ComponentFiles( - template="LoginButton", python_file_name="login_button.py", js_dir="button" + template="LoginButton", + python_file_name="login_button.py", + js_dir="button", + demo_code=static_only_demo_code, ), "ScatterPlot": ComponentFiles( - template="ScatterPlot", python_file_name="scatter_plot.py", js_dir="plot" + template="ScatterPlot", + python_file_name="scatter_plot.py", + js_dir="plot", + demo_code=static_only_demo_code, ), "UploadButton": ComponentFiles( - template="UploadButton", python_file_name="upload_button.py" + template="UploadButton", + python_file_name="upload_button.py", + demo_code=static_only_demo_code, + ), + "JSON": ComponentFiles( + template="JSON", + python_file_name="json_component.py", + demo_code=static_only_demo_code, ), - "JSON": ComponentFiles(template="JSON", python_file_name="json_component.py"), "Row": ComponentFiles( template="Row", - demo_code=textwrap.dedent( - """ - with gr.Blocks() as demo: - with {name}(): - gr.Textbox(value="foo", interactive=True) - gr.Number(value=10, interactive=True) - """ - ), + demo_code=layout_demo_code, ), "Column": ComponentFiles( template="Column", - demo_code=textwrap.dedent( - """ - with gr.Blocks() as demo: - with {name}(): - gr.Textbox(value="foo", interactive=True) - gr.Number(value=10, interactive=True) - """ - ), + demo_code=layout_demo_code, ), "Tabs": ComponentFiles( template="Tabs", @@ -125,14 +165,7 @@ OVERRIDES = { ), "Group": ComponentFiles( template="Group", - demo_code=textwrap.dedent( - """ - with gr.Blocks() as demo: - with {name}(): - gr.Textbox(value="foo", interactive=True) - gr.Number(value=10, interactive=True) - """ - ), + demo_code=layout_demo_code, ), "Accordion": ComponentFiles( template="Accordion",