v5p3

app.py

@@ -198,27 +198,41 @@ def generate(
 # Initialize an empty list to store the generation history
 generation_history = []
 
-# Function to update the history dropdown
-def update_history_dropdown():
-    return [f"{item['prompt']} ({item['timestamp']})" for item in 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
+
+# Function to handle image click in history
+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
 def generate_and_update_history(*args, **kwargs):
     images, metadata = generate(*args, **kwargs)
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    generation_history.insert(0, {"prompt": metadata["prompt"], "timestamp": timestamp, "image": images[0], "metadata": metadata})
+    generation_history.insert(0, {
+        "prompt": metadata["prompt"],
+        "timestamp": timestamp,
+        "image": images[0],
+        "metadata": metadata
+    })
     if len(generation_history) > 10:  # Limit history to 10 items
         generation_history.pop()
-    return images, metadata, update_history_dropdown()
-
-# Function to display selected history item
-def display_history_item(selected_item):
-    if not selected_item:
-        return None, None
-    for item in generation_history:
-        if f"{item['prompt']} ({item['timestamp']})" == selected_item:
-            return item['image'], json.dumps(item['metadata'], indent=2)
-    return None, None
+    return images, metadata, gr.update(visible=True)  # Update to show the accordion
 
 if torch.cuda.is_available():
     pipe = load_pipeline(MODEL)
@@ -307,7 +321,6 @@ with gr.Blocks(css="style.css") as demo:
                 value=1.5,
                 visible=False,
             )
-
         sampler = gr.Dropdown(
             label="Sampler",
             choices=config.sampler_list,
@@ -340,10 +353,12 @@ with gr.Blocks(css="style.css") as demo:
         json_input = gr.TextArea(label="Edit/Paste JSON Parameters", placeholder="Paste or edit JSON parameters here")
         generate_from_json = gr.Button("Generate from JSON")
 
-    # Add history dropdown
-    history_dropdown = gr.Dropdown(label="Generation History", choices=[], interactive=True)
-    history_image = gr.Image(label="Selected Image", interactive=False)
-    history_metadata = gr.JSON(label="Selected Metadata", show_label=False)
+    # Add history accordion
+    with gr.Accordion("Generation History", visible=False) as history_accordion:
+        history_list = gr.HTML()
+        with gr.Row():
+            selected_image = gr.Image(label="Selected Image", interactive=False)
+            selected_metadata = gr.JSON(label="Selected Metadata", show_label=False)
 
     gr.Examples(
         examples=config.examples,
@@ -381,7 +396,7 @@ with gr.Blocks(css="style.css") as demo:
         use_upscaler,
         upscaler_strength,
         upscale_by,
-        json_input,  # Add JSON input to the list of inputs
+        json_input,
     ]
 
     prompt.submit(
@@ -391,11 +406,14 @@ with gr.Blocks(css="style.css") as demo:
         queue=False,
         api_name=False,
     ).then(
-        fn=generate_and_update_history,  # Use the new function
+        fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_dropdown],  # Add history_dropdown to outputs
-        api_name="run",
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
+
     negative_prompt.submit(
         fn=utils.randomize_seed_fn,
         inputs=[seed, randomize_seed],
@@ -403,11 +421,14 @@ with gr.Blocks(css="style.css") as demo:
         queue=False,
         api_name=False,
     ).then(
-        fn=generate_and_update_history,  # Use the new function
+        fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_dropdown],  # Add history_dropdown to outputs
-        api_name=False,
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
+
     run_button.click(
         fn=utils.randomize_seed_fn,
         inputs=[seed, randomize_seed],
@@ -415,25 +436,33 @@ with gr.Blocks(css="style.css") as demo:
         queue=False,
         api_name=False,
     ).then(
-        fn=generate_and_update_history,  # Use the new function
+        fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_dropdown],  # Add history_dropdown to outputs
-        api_name=False,
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
 
     # Add event handler for generate_from_json button
     generate_from_json.click(
         fn=generate_and_update_history,
         inputs=inputs,
-        outputs=[result, gr_metadata, history_dropdown],
-        api_name=False,
+        outputs=[result, gr_metadata, history_accordion],
+    ).then(
+        fn=update_history_list,
+        outputs=history_list
     )
 
-    # Add event handler for history_dropdown
-    history_dropdown.change(
-        fn=display_history_item,
-        inputs=[history_dropdown],
-        outputs=[history_image, history_metadata],
-    )
+    # Add JavaScript for handling image clicks
+    demo.load(None, None, None, _js="""
+    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);
+    }
+    """)
 
-demo.queue(max_size=20).launch(debug=IS_COLAB, share=IS_COLAB)
+demo.queue(max_size=20).launch(debug=IS_COLAB, share=IS_COLAB)