Spaces:

gradio-pr-deploys
/

pr-6676-all-demos

Sleeping

App Files Files Community

gradio-pr-bot commited on Dec 7, 2023

Commit

87fb88a

•

1 Parent(s): 2d0f950

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

app.py +25 -8
requirements.txt +2 -4
templates/index.html +118 -0

app.py CHANGED Viewed

@@ -4,12 +4,30 @@ import os
 import sys
 import copy
 import pathlib
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 demo_dir = pathlib.Path(__file__).parent / "demos"
 all_demos = []
 demo_module = None
 for p in sorted(os.listdir("./demos")):
@@ -20,16 +38,15 @@ for p in sorted(os.listdir("./demos")):
             demo_module = importlib.import_module(f"run")
         else:
             demo_module = importlib.reload(demo_module)
-        all_demos.append((p, demo_module.demo))
     except Exception as e:
-        p = p + " ❌"
         with gr.Blocks() as demo:
             gr.Markdown(f"Error loading demo: {e}")
-        all_demos.append((p, demo))
-with gr.Blocks() as mega_demo:
-    for demo_name, demo in all_demos:
-        with gr.Tab(demo_name):
-            demo.render()
-mega_demo.queue().launch()

 import sys
 import copy
 import pathlib
+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+import uvicorn
+from gradio.utils import get_space
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 demo_dir = pathlib.Path(__file__).parent / "demos"
+app = FastAPI()
+templates = Jinja2Templates(directory="templates")
+names = sorted(os.listdir("./demos"))
+@app.get("/")
+def index(request: Request):
+    names = [[p[0], p[2]] for p in all_demos]
+    return templates.TemplateResponse("index.html", {"request": request, "names": names,
+                                                     "initial_demo": names[0][0], "is_space": get_space()})
 all_demos = []
 demo_module = None
 for p in sorted(os.listdir("./demos")):
             demo_module = importlib.import_module(f"run")
         else:
             demo_module = importlib.reload(demo_module)
+        all_demos.append((p, demo_module.demo.queue(), False))
     except Exception as e:
         with gr.Blocks() as demo:
             gr.Markdown(f"Error loading demo: {e}")
+        all_demos.append((p, demo, True))
+for demo_name, demo, _ in all_demos:
+    app = gr.mount_gradio_app(app, demo, f"/demo/{demo_name}")
+if __name__ == "__main__":
+    uvicorn.run(app, port=7860, host="0.0.0.0")

requirements.txt CHANGED Viewed

@@ -1,6 +1,6 @@
-gradio-client @ git+https://github.com/gradio-app/gradio@42cbe015a3da385b2d8a83838d52b4cfe9fcdb54#subdirectory=client/python
-https://gradio-builds.s3.amazonaws.com/42cbe015a3da385b2d8a83838d52b4cfe9fcdb54/gradio-4.8.0-py3-none-any.whl
 pypistats==1.1.0
 plotly==5.10.0
 opencv-python==4.6.0.66
@@ -8,5 +8,3 @@ transformers==4.21.1
 torch==1.12.1
 altair
 vega_datasets
-pydantic==2.1.1
-pydantic_core==2.4.0

+gradio-client @ git+https://github.com/gradio-app/gradio@40c01c121762aed57d4dd8220efb5ebf7b12be4b#subdirectory=client/python
+https://gradio-builds.s3.amazonaws.com/40c01c121762aed57d4dd8220efb5ebf7b12be4b/gradio-4.8.0-py3-none-any.whl
 pypistats==1.1.0
 plotly==5.10.0
 opencv-python==4.6.0.66
 torch==1.12.1
 altair
 vega_datasets

templates/index.html ADDED Viewed

	@@ -0,0 +1,118 @@

+<!DOCTYPE html>
+<html>
+<head>
+    {%if is_space %}
+        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+    {% endif %}
+    <style>
+        /* Reset some default styles */
+        body, h1, h2, h3, p, ul {
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            overflow-y: hidden;
+        }
+        .sidebar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            max-height: calc(100vh - 50px);
+            width: 300px;
+            overflow-y: scroll;
+            overflow-x: hidden;
+            font-size: 0.875rem; /* 14px */
+            line-height: 1.25rem; /* 20px */
+            transition: width 0.3s ease;
+        }
+        .sidebar.collapsed {
+            width: 0;
+        }
+        .sidebar a {
+            display: block;
+            padding: 8px 16px;
+            text-decoration: none;
+            color: rgb(107 114 128);
+        }
+        .sidebar a:hover {
+            color: black;
+            transform: translateX(1px);
+        }
+        /* Apply a different style to the selected item in the sidebar */
+        .sidebar a.active {
+            background-color: rgb(251 146 60);
+            color: white;
+            border-radius: 0.75rem;
+            font-weight: bold;
+        }
+        /* Styling for the close button */
+        .close-btn {
+            cursor: pointer;
+            border: none;
+            background-color: white;
+            font-size: xx-large;
+            position: relative;
+        }
+        /* Styling for the content */
+        .content {
+            margin-left: 300px;
+            padding: 20px;
+            display: block;
+            height: 100vh;
+            transition: margin-left 0.3s ease;
+        }
+        .content.collapsed {
+            margin-left: 0;
+        }
+        /* Make the iframe responsive */
+        .content iframe {
+            width: 100%;
+            border: 0;
+            height: 100%;
+        }
+        @media only screen and (max-width: 600px) {
+            /* Adjust styles for smaller screens */
+            .sidebar {
+                width: 100%;
+                position: relative;
+                height: auto;
+            }
+            .content {
+                margin-left: 0;
+            }
+        }
+    </style>
+    <script src="//unpkg.com/alpinejs" defer></script>
+</head>
+<body x-data="{ current_demo: '{{ initial_demo }}', is_collapsed: false }">
+    <div style="display: flex; flex-direction: column;">
+        <div>
+            <button @click="is_collapsed = !is_collapsed" class="close-btn">
+                <a x-text="is_collapsed ? '➡️' : '⬅️'"></a>
+            </button>
+        </div>
+        <div :class="{ 'sidebar': true, 'collapsed': is_collapsed }" style="margin-top: 50px;">
+            {% for name in names %}
+                <a @click="current_demo = '{{ name[0] }}'" :class="current_demo == '{{ name[0] }}' ? 'active' : ''">{{ name[0] }} {% if name[1] %}❌{% endif %}</a>
+            {% endfor %}
+        </div>
+    </div>
+    <div :class="{ 'content': true, 'collapsed': is_collapsed }">
+        <iframe :src="`/demo/${current_demo}${document.location.search}`"></iframe>
+    </div>
+</body>
+</html>