no js

app.py

@@ -200,24 +200,14 @@ generation_history = []
 
 # Function to update the history list
 def update_history_list():
-    html = "<div style='display: flex; flex-wrap: wrap;'>"
-    for idx, item in enumerate(generation_history):
-        html += f"""
-        <div style='margin: 10px; text-align: center;'>
-            <img src='data:image/png;base64,{utils.image_to_base64(item["image"])}' 
-                 style='width: 100px; height: 100px; object-fit: cover;'
-                 onclick='handle_image_click({idx})' />
-            <p style='width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
-                {item["prompt"]}
-            </p>
-        </div>
-        """
-    html += "</div>"
-    return html
+    return [
+        gr.Image(value=item["image"], show_label=False, height=100, width=100).style(full_width=False, size="small")
+        for item in generation_history
+    ]
 
 # Function to handle image click in history
-def handle_image_click(idx):
-    selected = generation_history[idx]
+def handle_image_click(evt: gr.SelectData):
+    selected = generation_history[evt.index]
     return selected["image"], json.dumps(selected["metadata"], indent=2)
 
 # Modify the generate function to add results to the history
@@ -232,7 +222,7 @@ def generate_and_update_history(*args, **kwargs):
     })
     if len(generation_history) > 10:  # Limit history to 10 items
         generation_history.pop()
-    return images, metadata, gr.update(visible=True)  # Update to show the accordion
+    return images, metadata, gr.update(visible=True), update_history_list()
 
 if torch.cuda.is_available():
     pipe = load_pipeline(MODEL)
@@ -355,10 +345,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.Gallery(show_label=False, columns=5, height="auto", allow_preview=False, 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,
@@ -408,10 +398,7 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion],
-    ).then(
-        fn=update_history_list,
-        outputs=history_list
+        outputs=[result, gr_metadata, history_accordion, history_list],
     )
 
     negative_prompt.submit(
@@ -423,10 +410,7 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion],
-    ).then(
-        fn=update_history_list,
-        outputs=history_list
+        outputs=[result, gr_metadata, history_accordion, history_list],
     )
 
     run_button.click(
@@ -438,23 +422,21 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion],
-    ).then(
-        fn=update_history_list,
-        outputs=history_list
+        outputs=[result, gr_metadata, history_accordion, history_list],
     )
-
-    # Add event handler for generate_from_json button
+    
+# Add event handler for generate_from_json button
     generate_from_json.click(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion],
-    ).then(
-        fn=update_history_list,
-        outputs=history_list
+        outputs=[result, gr_metadata, history_accordion, history_list],
     )
 
-    # Add JavaScript for handling image clicks
-    
+    # Add event handler for history_list
+    history_list.select(
+        fn=handle_image_click,
+        inputs=None,
+        outputs=[selected_image, selected_metadata],
+    )
 
 demo.queue(max_size=20).launch(debug=IS_COLAB, share=IS_COLAB)