v2 js

app.py

@@ -13,6 +13,29 @@ from datetime import datetime
 from diffusers.models import AutoencoderKL
 from diffusers import StableDiffusionXLPipeline, StableDiffusionXLImg2ImgPipeline
 
+js_code = """
+function handle_image_click(idx) {
+    const images = document.querySelectorAll('#history_list img');
+    images.forEach(img => img.style.border = 'none');
+    images[idx].style.border = '2px solid blue';
+    gradioApp().querySelector('#selected_image img').src = images[idx].src;
+    gradioApp().querySelector('#selected_metadata textarea').value = JSON.stringify(generation_history[idx].metadata, null, 2);
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    const historyList = document.querySelector('#history_list');
+    if (historyList) {
+        historyList.addEventListener('click', (event) => {
+            if (event.target.tagName === 'IMG') {
+                const idx = Array.from(historyList.querySelectorAll('img')).indexOf(event.target);
+                handle_image_click(idx);
+            }
+        });
+    }
+});
+"""
+
+
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
@@ -240,7 +263,7 @@ if torch.cuda.is_available():
 else:
     pipe = None
 
-with gr.Blocks(css="style.css") as demo:
+with gr.Blocks(css="style.css", js=js_code) as demo:
     title = gr.HTML(
         f"""<h1><span>{DESCRIPTION}</span></h1>""",
         elem_id="title",
@@ -355,10 +378,10 @@ with gr.Blocks(css="style.css") as demo:
 
     # Add history accordion
     with gr.Accordion("Generation History", visible=False) as history_accordion:
-        history_list = gr.HTML()
+        history_list = gr.HTML(elem_id="history_list")
         with gr.Row():
-            selected_image = gr.Image(label="Selected Image", interactive=False)
-            selected_metadata = gr.JSON(label="Selected Metadata", show_label=False)
+            selected_image = gr.Image(label="Selected Image", interactive=False, elem_id="selected_image")
+            selected_metadata = gr.JSON(label="Selected Metadata", show_label=False, elem_id="selected_metadata")
 
     gr.Examples(
         examples=config.examples,