Deploy All Demos to Spaces on PRs (#2012)

* Add step to deploy to spaces on release

* Import package not modules

* Lint

* Hacky solution

* Add app file

* Github actions script

* Fix bucket url

* Update versioning

* Fic typo in script

* Change path

* Fix quote

* Clean up action

* Fix keys

* Formatting + comment

* Fix all_demo creation

* lint ui

* Get latest pypi version and use only 20 demos

* Test version change works correctly

* Fix gradio version

* Fix typo

* Use github sha to rebuild on every commit

* Get sha the proper way

* Change where env is accessed

* Fix typo in cp

* Undo changes to version.txt

* Add matrix transpose

.github/workflows/deploy-spaces.yml

@@ -0,0 +1,57 @@
+name: Deploy to Spaces
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  deploy-current-pr:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Install Python
+      uses: actions/setup-python@v3
+      with:
+        python-version: '3.9'
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7
+    - name: Install pip
+      run: python -m pip install pip wheel requests
+    - name: Get PR Number
+      run: |
+        python -c "import os;print(os.environ['GITHUB_REF'].split('/')[2])" > pr_number.txt
+        echo "PR_NUMBER=$(cat pr_number.txt)" >> $GITHUB_ENV
+        echo "GRADIO_VERSION=$(python -c 'import requests;print(requests.get("https://pypi.org/pypi/gradio/json").json()["info"]["version"])')" >> $GITHUB_ENV
+    - name: Build and publish pr package
+      run: | 
+        export AWS_ACCESS_KEY_ID=${{ secrets.PR_DEPLOY_KEY }}
+        export AWS_SECRET_ACCESS_KEY=${{ secrets.PR_DEPLOY_SECRET }}
+        export AWS_DEFAULT_REGION=us-east-1
+        echo ${{ env.GRADIO_VERSION }} > gradio/version.txt
+        cd ui
+        pnpm i
+        pnpm build
+        cd ..
+        python3 setup.py bdist_wheel
+        aws s3 cp dist/gradio-${{ env.GRADIO_VERSION }}-py3-none-any.whl s3://gradio-builds/${{ github.sha  }}/
+    - name: Install Hub Client Library
+      run: pip install huggingface-hub==0.8.1
+    - name: Set up Demos
+      run: python scripts/copy_demos.py https://gradio-builds.s3.amazonaws.com/${{ github.sha }}/gradio-${{ env.GRADIO_VERSION }}-py3-none-any.whl
+    - name: Upload kitchen sink to spaces
+      run: |
+        python scripts/upload_demo_to_space.py all_demos \
+        gradio-pr-deploys/pr-${{ env.PR_NUMBER }}-all-demos \
+        ${{ secrets.SPACES_DEPLOY_TOKEN }} \
+        --gradio-version ${{ env.GRADIO_VERSION }} > url.txt
+        echo "SPACE_URL=$(cat url.txt)" >> $GITHUB_ENV
+    - name: Comment On Release PR
+      uses: thollander/actions-comment-pull-request@v1
+      with:
+        message: |
+          All the demos for this PR have been deployed at ${{ env.SPACE_URL }}
+        comment_includes: All the demos for this PR have been deployed at
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -31,6 +31,8 @@ test.txt
 demo/tmp.zip
 demo/files/*.avi
 demo/files/*.mp4
+demo/all_demos/demos/*
+demo/all_demos/requirements.txt
 
 # Etc
 .idea/*

demo/all_demos/run.py

@@ -0,0 +1,29 @@
+import importlib
+import gradio as gr
+import os
+import sys
+import copy
+import pathlib
+
+
+demo_dir = pathlib.Path(__file__).parent / "demos"
+
+
+all_demos = []
+demo_module = None
+for p in os.listdir("./demos"):
+    old_path = copy.deepcopy(sys.path)
+    sys.path = [os.path.join(demo_dir, p)] + sys.path
+    if demo_module is None:
+        demo_module = importlib.import_module(f"run")
+    else:
+        demo_module = importlib.reload(demo_module)
+    all_demos.append((p, demo_module.demo))
+
+with gr.Blocks() as mega_demo:
+    with gr.Tabs():
+        for demo_name, demo in all_demos:
+            with gr.TabItem(demo_name):
+                demo.render()
+
+mega_demo.launch()

demo/blocks_component_shortcut/run.py

@@ -26,4 +26,6 @@ with gr.Blocks() as demo:
     text2.change(greet, text2, text3)
     text3.change(greet, text3, text1)
     button = gr.component("button")
+
+if __name__ == "__main__":
     demo.launch()

demo/blocks_interpretation/run.py

@@ -54,4 +54,5 @@ with gr.Blocks() as demo:
     classify.click(classifier, input_text, label)
     interpret.click(interpretation_function, input_text, [interpretation, interpretation_plot])
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_mask/run.py

@@ -1,5 +1,5 @@
 import gradio as gr
-
+import os
 
 def fn(mask):
     return [mask["image"], mask["mask"]]
@@ -11,7 +11,7 @@ with demo:
     with gr.Row():
         with gr.Column():
             img = gr.Image(
-                tool="sketch", source="upload", label="Mask", value="lion.jpg"
+                tool="sketch", source="upload", label="Mask", value=os.path.join(os.path.dirname(__file__), "lion.jpg")
             )
             with gr.Row():
                 btn = gr.Button("Run")
@@ -22,4 +22,5 @@ with demo:
     btn.click(fn=fn, inputs=img, outputs=[img2, img3])
 
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_multiple_event_triggers/run.py

@@ -28,7 +28,8 @@ with gr.Blocks() as demo:
 
     plt = gr.Plot()
     # You can add multiple event triggers in 2 lines like this
-    for event in [lib.change, time.change, demo.load]:
+    for event in [lib.change, time.change]:
         event(get_plot, [lib, time], [plt])
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()

demo/image_classifier_interface_load/run.py

@@ -1,6 +1,9 @@
 import gradio as gr
+import pathlib
 
-images = ["cheetah1.jpeg", "cheetah1.jpg", "lion.jpg"]
+current_dir = pathlib.Path(__file__)
+
+images = [current_dir / "cheetah1.jpeg", current_dir / "cheetah1.jpg", current_dir / "lion.jpg"]
 
 
 img_classifier = gr.Interface.load(
@@ -17,9 +20,9 @@ using_img_classifier_as_function = gr.Interface(
     [gr.Image(type="filepath"), "text"],
     ["label", "text"],
     examples=[
-        ["cheetah1.jpeg", None],
-        ["cheetah1.jpg", "cheetah"],
-        ["lion.jpg", "lion"],
+        [current_dir / "cheetah1.jpeg", None],
+        [current_dir / "cheetah1.jpg", "cheetah"],
+        [current_dir / "lion.jpg", "lion"],
     ],
     cache_examples=True,
 )

demo/live_with_vars/run.py

@@ -1,6 +1,9 @@
 import gradio as gr
 
-gr.Interface(
+demo = gr.Interface(
     lambda x, y: (x + y if y is not None else x, x + y if y is not None else x), 
     ["textbox", "state"], 
-    ["textbox", "state"], live=True).launch()
+    ["textbox", "state"], live=True)
+
+if __name__ == "__main__":
+    demo.launch()

demo/matrix_transpose/run.py

@@ -18,6 +18,7 @@ demo = gr.Interface(
         [np.random.randint(0, 10, (10, 3)).tolist()],
         [np.random.randint(0, 10, (10, 10)).tolist()],
     ],
+    cache_examples=False
 )
 
 if __name__ == "__main__":

demo/no_input/run.py

@@ -13,4 +13,6 @@ def random_sentence():
 
 
 demo = gr.Interface(fn=random_sentence, inputs=None, outputs="text")
-demo.launch()
+
+if __name__ == "__main__":
+    demo.launch()

scripts/copy_demos.py

@@ -0,0 +1,62 @@
+import shutil
+import os
+import pathlib
+import textwrap
+import argparse
+
+
+def copy_all_demos(source_dir: str, dest_dir: str):
+    demos_to_copy = [
+        "blocks_essay",
+        "blocks_js_methods",
+        "blocks_layout",
+        "blocks_mask",
+        "blocks_multiple_event_triggers",
+        "calculator",
+        "fake_gan",
+        "gender_sentence_default_interpretation",
+        "image_mod_default_image",
+        "interface_parallel_load",
+        "interface_random_slider",
+        "interface_series_load",
+        "kitchen_sink",
+        "matrix_transpose",
+        "model3D",
+        "reverse_audio",
+        "sst_or_tts",
+        "stream_audio",
+        "stream_frames",
+        "zip_two_files",
+    ]
+    for demo in demos_to_copy:
+        shutil.copytree(
+            os.path.join(source_dir, demo),
+            os.path.join(dest_dir, demo),
+            dirs_exist_ok=True,
+        )
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(
+        description="Copy all demos to all_demos and update requirements"
+    )
+    parser.add_argument("gradio_version", type=str, help="Gradio")
+    args = parser.parse_args()
+
+    source_dir = pathlib.Path(pathlib.Path(__file__).parent, "..", "demo")
+    dest_dir = pathlib.Path(
+        pathlib.Path(__file__).parent, "..", "demo", "all_demos", "demos"
+    )
+    copy_all_demos(source_dir, dest_dir)
+    reqs_file_path = pathlib.Path(
+        pathlib.Path(__file__).parent, "..", "demo", "all_demos", "requirements.txt"
+    )
+    requirements = f"""
+    {args.gradio_version}
+    pypistats==1.1.0
+    plotly==5.10.0
+    opencv-python==4.6.0.66
+    transformers==4.21.1
+    torch==1.12.1
+    """
+    open(reqs_file_path, "w").write(textwrap.dedent(requirements))

ui/packages/tabs/src/Tabs.svelte

@@ -45,7 +45,7 @@
 </script>
 
 <div class="tabs flex flex-col my-4" id={elem_id}>
-	<div class="flex border-b-2 dark:border-gray-700">
+	<div class="flex border-b-2 flex-wrap dark:border-gray-700">
 		{#each tabs as t (t.id)}
 			{#if t.id === $selected_tab}
 				<button