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 time
import threading import threading
from apscheduler.schedulers.background import BackgroundScheduler 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() user_config = load_config()
app = Flask(__name__) app = Flask(__name__)
@ -35,13 +35,17 @@ def index() -> str:
def gallery() -> str: def gallery() -> str:
""" """
Renders the gallery HTML template. Renders the gallery HTML template.
Args:
None
Returns: Returns:
str: The rendered HTML template. str: The rendered HTML template.
""" """
images = [f for f in os.listdir(image_folder) if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif'))] images = []
images = sorted(images, reverse=True) 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) return render_template("gallery.html", images=images)

11
lib.py
View File

@ -6,6 +6,7 @@ import litellm
import time import time
import os import os
import requests import requests
from PIL import Image
from typing import Optional from typing import Optional
from comfy_api_simplified import ComfyApiWrapper, ComfyWorkflowWrapper from comfy_api_simplified import ComfyApiWrapper, ComfyWorkflowWrapper
from tenacity import ( from tenacity import (
@ -270,5 +271,15 @@ def create_image(prompt: str | None = None) -> None:
logging.error("No prompt generated.") 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() user_config = load_config()
output_folder = user_config["comfyui"]["output_dir"] output_folder = user_config["comfyui"]["output_dir"]

Binary file not shown.

View File

@ -57,13 +57,25 @@
.arrow.right { .arrow.right {
right: 20px; 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> </style>
</head> </head>
<body> <body>
<h1>Image Archive</h1> <h1>Image Archive</h1>
<div class="gallery"> <div class="gallery">
{% for image in images %} {% 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 %} {% endfor %}
</div> </div>
@ -72,36 +84,44 @@
<span class="close" onclick="closeLightbox()">&times;</span> <span class="close" onclick="closeLightbox()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span> <span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src=""> <img id="lightbox-img" src="">
<p id="lightbox-prompt"></p> <!-- 👈 Add this line -->
<span class="arrow right" onclick="nextImage()">&#10095;</span> <span class="arrow right" onclick="nextImage()">&#10095;</span>
</div> </div>
<script> <script>
let images = [ let images = [
{% for image in images %} {% for image in images %}
"{{ url_for('images', filename=image) }}", {
src: "{{ url_for('images', filename=image.filename) }}",
prompt: `{{ image.prompt | escape }}`
},
{% endfor %} {% endfor %}
]; ];
let currentIndex = 0; let currentIndex = 0;
function openLightbox(index) { function openLightbox(index) {
currentIndex = 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"; document.getElementById("lightbox").style.display = "flex";
} }
function closeLightbox() { function closeLightbox() {
document.getElementById("lightbox").style.display = "none"; document.getElementById("lightbox").style.display = "none";
} }
function nextImage() { function nextImage() {
currentIndex = (currentIndex + 1) % images.length; currentIndex = (currentIndex + 1) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex]; openLightbox(currentIndex);
} }
function prevImage() { function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length; currentIndex = (currentIndex - 1 + images.length) % images.length;
document.getElementById("lightbox-img").src = images[currentIndex]; openLightbox(currentIndex);
} }
</script> </script>
</body> </body>
</html> </html>