updated logic to show prompt on the lightbox display

This commit is contained in:
Karl Hudgell 2025-04-24 16:55:07 +01:00
parent cce1cb27d2
commit 81140d720b
4 changed files with 47 additions and 12 deletions

View File

@ -9,7 +9,7 @@ import os
import time
import threading
from apscheduler.schedulers.background import BackgroundScheduler
from lib import create_image, load_config, create_prompt_on_openwebui, cancel_current_job
from lib import create_image, load_config, create_prompt_on_openwebui, cancel_current_job, get_prompt_from_png
user_config = load_config()
app = Flask(__name__)
@ -35,13 +35,17 @@ def index() -> str:
def gallery() -> str:
"""
Renders the gallery HTML template.
Args:
None
Returns:
str: The rendered HTML template.
"""
images = [f for f in os.listdir(image_folder) if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif'))]
images = sorted(images, reverse=True)
images = []
for f in os.listdir(image_folder):
if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif')):
path = os.path.join(image_folder, f)
prompt = get_prompt_from_png(path) # Youd define this function to read metadata
images.append({'filename': f, 'prompt': prompt})
return render_template("gallery.html", images=images)

11
lib.py
View File

@ -6,6 +6,7 @@ import litellm
import time
import os
import requests
from PIL import Image
from typing import Optional
from comfy_api_simplified import ComfyApiWrapper, ComfyWorkflowWrapper
from tenacity import (
@ -270,5 +271,15 @@ def create_image(prompt: str | None = None) -> None:
logging.error("No prompt generated.")
def get_prompt_from_png(path):
try:
with Image.open(path) as img:
meta = img.info.get("parameters").split("Negative")[0] # ComfyUI usually stores it here
return meta or ""
except Exception as e:
print(f"Error reading metadata from {path}: {e}")
return ""
user_config = load_config()
output_folder = user_config["comfyui"]["output_dir"]

Binary file not shown.

View File

@ -57,13 +57,25 @@
.arrow.right {
right: 20px;
}
#lightbox-prompt {
color: #ccc;
font-family: monospace;
white-space: pre-wrap;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 10px;
max-width: 80%;
text-align: left;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image Archive</h1>
<div class="gallery">
{% for image in images %}
<img src="{{ url_for('images', filename=image) }}" alt="Image" loading="lazy" onclick="openLightbox({{ loop.index0 }})">
<img src="{{ url_for('images', filename=image.filename) }}" alt="Image" loading="lazy" onclick="openLightbox({{ loop.index0 }})">
{% endfor %}
</div>
@ -72,36 +84,44 @@
<span class="close" onclick="closeLightbox()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src="">
<p id="lightbox-prompt"></p> <!-- 👈 Add this line -->
<span class="arrow right" onclick="nextImage()">&#10095;</span>
</div>
<script>
let images = [
{% for image in images %}
"{{ url_for('images', filename=image) }}",
{
src: "{{ url_for('images', filename=image.filename) }}",
prompt: `{{ image.prompt | escape }}`
},
{% endfor %}
];
let currentIndex = 0;
function openLightbox(index) {
currentIndex = index;
document.getElementById("lightbox-img").src = images[currentIndex];
document.getElementById("lightbox-img").src = images[currentIndex].src;
document.getElementById("lightbox-prompt").textContent = images[currentIndex].prompt;
document.getElementById("lightbox").style.display = "flex";
}
function closeLightbox() {
document.getElementById("lightbox").style.display = "none";
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex];
openLightbox(currentIndex);
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex];
openLightbox(currentIndex);
}
</script>
</body>
</html>