Update app.py

app.py

@@ -200,14 +200,24 @@ generation_history = []
 
 # Function to update the history list
 def update_history_list():
-    return [
-        gr.Image(value=item["image"], show_label=False, height=100, width=100).style(full_width=False, size="small")
-        for item in generation_history
-    ]
+    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
 
 # Function to handle image click in history
-def handle_image_click(evt: gr.SelectData):
-    selected = generation_history[evt.index]
+def handle_image_click(idx):
+    selected = generation_history[idx]
     return selected["image"], json.dumps(selected["metadata"], indent=2)
 
 # Modify the generate function to add results to the history
@@ -222,7 +232,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_history_list()
+    return images, metadata, gr.update(visible=True)  # Update to show the accordion
 
 if torch.cuda.is_available():
     pipe = load_pipeline(MODEL)
@@ -345,10 +355,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.Gallery(show_label=False, columns=5, height="auto", allow_preview=False, elem_id="history_list")
+        history_list = gr.HTML()
         with gr.Row():
-            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")
+            selected_image = gr.Image(label="Selected Image", interactive=False)
+            selected_metadata = gr.JSON(label="Selected Metadata", show_label=False)
 
     gr.Examples(
         examples=config.examples,
@@ -398,7 +408,10 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion, history_list],
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
 
     negative_prompt.submit(
@@ -410,7 +423,10 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion, history_list],
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
 
     run_button.click(
@@ -422,21 +438,23 @@ with gr.Blocks(css="style.css") as demo:
     ).then(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_accordion, history_list],
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=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, history_list],
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
 
-    # Add event handler for history_list
-    history_list.select(
-        fn=handle_image_click,
-        inputs=None,
-        outputs=[selected_image, selected_metadata],
-    )
+    # Add JavaScript for handling image clicks (todo)
+    
 
 demo.queue(max_size=20).launch(debug=IS_COLAB, share=IS_COLAB)