Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-07-05 05:59:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

..

No commits in common. "main" and "0.2.4" have entirely different histories.
main ... 0.2.4

5 changed files with 17 additions and 170 deletions

2
.bumpversion.toml

@ -1,5 +1,5 @@
[tool.bumpversion] [tool.bumpversion]
current_version = "0.2.8" current_version = "0.2.4"
parse = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)" parse = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)"
serialize = ["{major}.{minor}.{patch}"] serialize = ["{major}.{minor}.{patch}"]
search = "{current_version}" search = "{current_version}"

1
.gitignore vendored

@ -10,4 +10,3 @@ prompts_log.jsonl
publish.sh publish.sh
test.py test.py
.vscode/launch.json .vscode/launch.json
favourites.json

8
libs/ollama.py

@ -3,7 +3,6 @@ import logging
import litellm import litellm
import nest_asyncio import nest_asyncio
from libs.generic import load_recent_prompts, load_config from libs.generic import load_recent_prompts, load_config
import re
nest_asyncio.apply() nest_asyncio.apply()
logging.basicConfig(level=logging.INFO) logging.basicConfig(level=logging.INFO)
@ -75,10 +74,5 @@ def create_prompt_on_openwebui(prompt: str, topic: str = "random") -> str:
# api_key=user_config["openwebui"]["api_key"], # api_key=user_config["openwebui"]["api_key"],
# ) # )
# prompt = response["choices"][0]["message"]["content"].strip('"') # prompt = response["choices"][0]["message"]["content"].strip('"')
match = re.search(r'"([^"]+)"', prompt)
if not match:
match = re.search(r":\s*\n*\s*(.+)", prompt)
if match:
prompt = match.group(1)
logging.debug(prompt) logging.debug(prompt)
return prompt return prompt.split(": ")[-1]

39
routes/gallery_routes.py

@ -1,50 +1,15 @@
from flask import Blueprint, render_template, jsonify, request from flask import Blueprint, render_template
import os import os
import json
bp = Blueprint("gallery_routes", __name__) bp = Blueprint("gallery_routes", __name__)
image_folder = "./output" image_folder = "./output"
favourites_file = "./favourites.json"
def get_favourites():
if not os.path.exists(favourites_file):
return []
with open(favourites_file, 'r') as f:
return json.load(f)
def save_favourites(favourites):
with open(favourites_file, 'w') as f:
json.dump(favourites, f)
@bp.route("/images", methods=["GET"]) @bp.route("/images", methods=["GET"])
def gallery(): def gallery():
favourites = get_favourites()
images = [ images = [
{"filename": f, "favourited": f in favourites} {"filename": f}
for f in os.listdir(image_folder) for f in os.listdir(image_folder)
if f.lower().endswith(("png", "jpg", "jpeg", "gif")) if f.lower().endswith(("png", "jpg", "jpeg", "gif"))
] ]
images = sorted(images, key=lambda x: os.path.getmtime(os.path.join(image_folder, x["filename"])), reverse=True) images = sorted(images, key=lambda x: os.path.getmtime(os.path.join(image_folder, x["filename"])), reverse=True)
return render_template("gallery.html", images=images) return render_template("gallery.html", images=images)
@bp.route("/favourites", methods=["GET"])
def get_favourites_route():
return jsonify(get_favourites())
@bp.route("/favourites/toggle", methods=["POST"])
def toggle_favourite():
data = request.get_json()
filename = data.get("filename")
if not filename:
return jsonify({"status": "error", "message": "Filename missing"}), 400
favourites = get_favourites()
is_favourited = False
if filename in favourites:
favourites.remove(filename)
else:
favourites.append(filename)
is_favourited = True
save_favourites(favourites)
return jsonify({"status": "success", "favourited": is_favourited})

131
templates/gallery.html

@ -116,22 +116,6 @@
/* lower than lightbox (999) */ /* lower than lightbox (999) */
} }
.favourites-button {
position: fixed;
top: 20px;
right: 120px;
z-index: 500;
}
.favourite-heart {
position: absolute;
top: 20px;
left: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
.button-link { .button-link {
background: #333; background: #333;
color: white; color: white;
@ -143,7 +127,6 @@
transition: background 0.3s; transition: background 0.3s;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border: none;
} }
.button-link:hover { .button-link:hover {
@ -196,17 +179,15 @@
<body> <body>
<a href="/" class="button-link home-button">Home</a> <a href="/" class="button-link home-button">Home</a>
<button class="button-link favourites-button" id="favourites-button" onclick="toggleFavouritesView()">Show Favourites</button>
<h1 id="page-title">Image Archive</h1> <h1>Image Archive</h1>
<!-- Empty gallery container; images will be loaded incrementally --> <!-- Empty gallery container; images will be loaded incrementally -->
<div class="gallery" id="gallery"></div> <div class="gallery" id="gallery"></div>
<!-- Lightbox --> <!-- Lightbox -->
<div class="lightbox" id="lightbox" tabindex="-1" onkeyup="handleLightboxKeys(event)"> <div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">&times;</span> <span class="close" onclick="closeLightbox()">&times;</span>
<span class="favourite-heart" id="favourite-heart" onclick="toggleFavourite()">&#9825;</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> <p id="lightbox-prompt"></p>
@ -215,11 +196,11 @@
<!-- Pass image filenames from Flask to JS --> <!-- Pass image filenames from Flask to JS -->
<script> <script>
let allImages = JSON.parse(`[ const allImages = [
{% for image in images %} {% for image in images %}
{ "filename": "{{ image.filename }}", "favourited": {{ 'true' if image.favourited else 'false' }} }{% if not loop.last %},{% endif %} { filename: "{{ image.filename }}" },
{% endfor %} {% endfor %}
]`); ];
</script> </script>
<script> <script>
@ -228,15 +209,12 @@
let loadedCount = 0; let loadedCount = 0;
let currentIndex = 0; let currentIndex = 0;
const detailsCache = {}; // Cache for image details const detailsCache = {}; // Cache for image details
let showingFavourites = false;
let filteredImages = allImages;
function createImageElement(image) { function createImageElement(image) {
const img = document.createElement('img'); const img = document.createElement('img');
img.src = `/images/thumbnails/${image.filename}`; img.src = `/images/thumbnails/${image.filename}`;
img.dataset.fullsrc = `/images/${image.filename}`; img.dataset.fullsrc = `/images/${image.filename}`;
img.dataset.filename = image.filename; img.dataset.filename = image.filename;
img.dataset.favourited = image.favourited;
img.loading = 'lazy'; img.loading = 'lazy';
img.style.cursor = 'pointer'; img.style.cursor = 'pointer';
img.style.borderRadius = '10px'; img.style.borderRadius = '10px';
@ -245,8 +223,7 @@
} }
function loadNextBatch() { function loadNextBatch() {
const imagesToLoad = showingFavourites ? filteredImages : allImages; const nextImages = allImages.slice(loadedCount, loadedCount + batchSize);
const nextImages = imagesToLoad.slice(loadedCount, loadedCount + batchSize);
nextImages.forEach(image => { nextImages.forEach(image => {
const imgEl = createImageElement(image); const imgEl = createImageElement(image);
gallery.appendChild(imgEl); gallery.appendChild(imgEl);
@ -254,35 +231,12 @@
loadedCount += nextImages.length; loadedCount += nextImages.length;
} }
function renderGallery() {
gallery.innerHTML = '';
loadedCount = 0;
loadNextBatch();
}
function toggleFavouritesView() {
showingFavourites = !showingFavourites;
const button = document.getElementById('favourites-button');
const pageTitle = document.getElementById('page-title');
if (showingFavourites) {
filteredImages = allImages.filter(img => img.favourited);
button.textContent = 'Show All';
pageTitle.textContent = 'Favourites';
} else {
filteredImages = allImages;
button.textContent = 'Show Favourites';
pageTitle.textContent = 'Image Archive';
}
renderGallery();
}
// Load initial batch // Load initial batch
renderGallery(); loadNextBatch();
// Load more images when scrolling near bottom // Load more images when scrolling near bottom
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const imagesToLoad = showingFavourites ? filteredImages : allImages; if (loadedCount >= allImages.length) return; // all loaded
if (loadedCount >= imagesToLoad.length) return; // all loaded
if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 100)) { if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 100)) {
loadNextBatch(); loadNextBatch();
} }
@ -297,45 +251,7 @@
const images = getGalleryImages(); const images = getGalleryImages();
currentIndex = images.indexOf(imgEl); currentIndex = images.indexOf(imgEl);
showImageAndLoadDetails(currentIndex); showImageAndLoadDetails(currentIndex);
const lightbox = document.getElementById("lightbox"); document.getElementById("lightbox").style.display = "flex";
lightbox.style.display = "flex";
lightbox.focus();
}
function updateFavouriteHeart(isFavourited) {
const heart = document.getElementById('favourite-heart');
heart.innerHTML = isFavourited ? '&#9829;' : '&#9825;'; // solid vs outline heart
heart.style.color = isFavourited ? 'red' : 'white';
}
function toggleFavourite() {
const images = getGalleryImages();
const imgEl = images[currentIndex];
const filename = imgEl.dataset.filename;
fetch('/favourites/toggle', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filename: filename })
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
const isFavourited = data.favourited;
imgEl.dataset.favourited = isFavourited;
updateFavouriteHeart(isFavourited);
const originalImage = allImages.find(img => img.filename === filename);
if (originalImage) {
originalImage.favourited = isFavourited;
}
if (showingFavourites) {
filteredImages = allImages.filter(img => img.favourited);
renderGallery();
}
}
});
} }
function showImageAndLoadDetails(index) { function showImageAndLoadDetails(index) {
@ -343,10 +259,8 @@
const imgEl = images[index]; const imgEl = images[index];
const filename = imgEl.dataset.filename; const filename = imgEl.dataset.filename;
const fullsrc = imgEl.dataset.fullsrc; const fullsrc = imgEl.dataset.fullsrc;
const isFavourited = imgEl.dataset.favourited === 'true';
document.getElementById("lightbox-img").src = fullsrc; document.getElementById("lightbox-img").src = fullsrc;
updateFavouriteHeart(isFavourited);
if (detailsCache[filename]) { if (detailsCache[filename]) {
document.getElementById("lightbox-prompt").textContent = document.getElementById("lightbox-prompt").textContent =
@ -373,16 +287,12 @@
function nextImage() { function nextImage() {
const images = getGalleryImages(); const images = getGalleryImages();
const imagesToLoad = showingFavourites ? filteredImages : allImages; if (currentIndex + 1 >= images.length && loadedCount < allImages.length) {
if (currentIndex + 1 >= images.length && loadedCount < imagesToLoad.length) {
loadNextBatch(); loadNextBatch();
// Wait briefly to ensure DOM updates // Wait briefly to ensure DOM updates
setTimeout(() => { setTimeout(() => {
const updatedImages = getGalleryImages();
if (currentIndex + 1 < updatedImages.length) {
currentIndex++; currentIndex++;
showImageAndLoadDetails(currentIndex); showImageAndLoadDetails(currentIndex);
}
}, 100); }, 100);
} else { } else {
currentIndex = (currentIndex + 1) % images.length; currentIndex = (currentIndex + 1) % images.length;
@ -399,27 +309,6 @@
function closeLightbox() { function closeLightbox() {
document.getElementById("lightbox").style.display = "none"; document.getElementById("lightbox").style.display = "none";
if (showingFavourites) {
// Refresh the gallery if a favourite was removed
const currentImage = getGalleryImages()[currentIndex];
const wasFavourited = currentImage.dataset.favourited === 'true';
const originalImage = allImages.find(img => img.filename === currentImage.dataset.filename);
if (originalImage && !originalImage.favourited) {
renderGallery();
}
}
}
function handleLightboxKeys(e) {
if (e.key === 'f') {
toggleFavourite();
} else if (e.key === 'Escape') {
closeLightbox();
} else if (e.key === 'ArrowLeft') {
prevImage();
} else if (e.key === 'ArrowRight') {
nextImage();
}
} }
</script> </script>
</body> </body>