Update app.py

app.py

@@ -24,45 +24,110 @@ def get_data(revision='main'):
 
     return data, prompts
 
-def on_refresh(data_state):
-    data, prompts = get_data()
-    data_state.update(dict(data))
-    return [
-        data_state,
-        gr.update(choices=prompts),
-    ]
 
-def on_submit(run_idx, data):
-    run = sorted(data.keys())[run_idx]
-    images = [(hf_hub_url(repo_id=repo_id, filename=img, repo_type='dataset'), f"Seed:\n{Path(img).stem}") for img in data[run]]
-    prompt_config_url = hf_hub_url(
-        repo_id=repo_id,
-        filename=f'{run}/prompt_config.json',
-        repo_type='dataset'
-    )
-    prompt_config_json = requests.get(prompt_config_url).json()
-    return prompt_config_json, images
+def assembleHTML(data):
+    # Borrowed mostly from:
+    # https://huggingface.co/spaces/sd-concepts-library/stable-diffusion-conceptualizer
+    html_gallery = ''
+    html_gallery = html_gallery+'''
+    <div class="flex gr-gap gr-form-gap row gap-4 w-full flex-wrap" id="main_row">
+    '''
+    for key, values in data.items():
+        html_gallery = html_gallery+ f'''
+        <div class="gr-block gr-box relative w-full overflow-hidden border-solid border border-gray-200 gr-panel">
+            <div class="output-markdown gr-prose" style="max-width: 100%;">
+            <h3>
+                <a href="https://huggingface.co/datasets/nateraw/stable-diffusion-gallery/blob/main/{key}/prompt_config.json" target="_blank">
+                <code>{ key }</code>
+                </a>
+            </h3>
+            </div>
+            <div id="gallery" class="gr-block gr-box relative w-full overflow-hidden border-solid border border-gray-200">
+            <div class="wrap svelte-17ttdjv opacity-0"></div>
+            <div class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-b border-r border-gray-100 dark:bg-gray-900">
+                <span class="mr-2 h-[12px] w-[12px] opacity-80">
+                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                    <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+                </span> Images
+            </div>
+            <div class="overflow-y-auto h-full p-2" style="position: relative;">
+                <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 svelte-1g9btlg pt-6">
+        '''
+        for image in values[:4]:
+            html_gallery = html_gallery + f'''    
+            <button class="gallery-item svelte-1g9btlg">
+                <img alt="" loading="lazy" class="h-full w-full overflow-hidden object-contain" src="{hf_hub_url(repo_id, filename=image, repo_type='dataset')}">
+            </button>
+            '''
+        html_gallery = html_gallery+'''
+                    </div>
+                    <iframe style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;" aria-hidden="true" tabindex="-1" src="about:blank"></iframe>
+                </div>
+                </div>
+            </div>
+            '''
+    html_gallery = html_gallery+'''
+    </div>
+    '''
+    return html_gallery
 
-data, prompts = get_data()
-runs = sorted(data.keys())
-with gr.Blocks() as demo:
-    data_state = gr.State(data)
-    with gr.Column(variant="panel"):
-        with gr.Row(variant="compact"):
-            refresh_btn = gr.Button("Refresh").style(full_width=True)
 
-        with gr.Row(variant="compact"):
-            run_idx = gr.Dropdown(prompts, type='index') #interactive=True) # .style(container=False)
-            btn = gr.Button("View images").style(full_width=False)
+css = '''
+.gradio-container {font-family: 'IBM Plex Sans', sans-serif}
+#top_title{margin-bottom: .5em}
+#top_title h2{margin-bottom: 0; text-align: center}
+/*#main_row{flex-wrap: wrap; gap: 1em; max-height: 550px; overflow-y: scroll; flex-direction: row}*/
+#component-3{height: 760px; overflow: auto}
+#component-9{position: sticky;top: 0;align-self: flex-start;}
+@media (min-width: 768px){#main_row > div{flex: 1 1 32%; margin-left: 0 !important}}
+.gr-prose code::before, .gr-prose code::after {content: "" !important}
+::-webkit-scrollbar {width: 10px}
+::-webkit-scrollbar-track {background: #f1f1f1}
+::-webkit-scrollbar-thumb {background: #888}
+::-webkit-scrollbar-thumb:hover {background: #555}
+.gr-button {white-space: nowrap}
+.gr-button:focus {
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  outline: none;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-border-opacity: 1;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+  --tw-ring-opacity: .5;
+}
+#prompt_input{flex: 1 3 auto; width: auto !important;}
+#prompt_area{margin-bottom: .75em}
+#prompt_area > div:first-child{flex: 1 3 auto}
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+#share-btn-container {
+    display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
+}
+#share-btn {
+    all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
+}
+#share-btn * {
+    all: unset;
+}
+'''
 
-        with gr.Row(variant="compact"):
-            data_json = gr.Json()
-        gallery = gr.Gallery(
-            label="Generated images", show_label=False, elem_id="gallery"
-        ).style(grid=[5], height="auto")
+data, prompts = get_data()
 
-    refresh_btn.click(on_refresh, data_state, [data_state, run_idx])
-    btn.click(on_submit, [run_idx, data_state], [data_json, gallery])
+with gr.Blocks(css=css) as demo:
+    with gr.Box().style(border=None):
+        html = gr.HTML(assembleHTML(data))
 
-if __name__ == '__main__':
-    demo.launch(debug=True)
+demo.launch(debug=True)