Initial commit

main.py

@@ -0,0 +1,715 @@
+#!/bin/env python3.11
+import os
+import sqlite3
+import replicate
+import argparse
+import requests
+from datetime import datetime
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, Request, Form, Query, Response
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import Optional, List
+import uvicorn
+from asyncio import gather, Semaphore, create_task
+from mistralai import Mistral
+from dotenv import load_dotenv
+from contextlib import contextmanager
+from io import BytesIO
+import zipfile
+import logging
+
+# Logging-Konfiguration (gut!)
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger("uvicorn.error")
+
+import sys
+print(f"Arguments: {sys.argv}")
+
+load_dotenv()
+
+# ANSI Escape Codes für farbige Ausgabe (kann entfernt werden, falls nicht benötigt)
+HEADER = "\033[38;2;255;255;153m"
+TITLE = "\033[38;2;255;255;153m"
+MENU = "\033[38;2;255;165;0m"
+SUCCESS = "\033[38;2;153;255;153m"
+ERROR = "\033[38;2;255;69;0m"
+MAIN = "\033[38;2;204;204;255m"
+SPEAKER1 = "\033[38;2;173;216;230m"
+SPEAKER2 = "\033[38;2;255;179;102m"
+RESET = "\033[0m"
+
+DOWNLOAD_DIR = "/mnt/d/ai/dialog/2/flux-pics"  # Pfad zu deinen Bildern (sollte korrekt sein)
+DATABASE_PATH = "flux_logs_neu.db" # Datenbank-Pfad
+TIMEOUT_DURATION = 900  # Timeout-Dauer in Sekunden (scheint angemessen)
+
+# WICHTIG: Stelle sicher, dass dieses Verzeichnis existiert und die Bilder enthält.
+IMAGE_STORAGE_PATH = DOWNLOAD_DIR
+
+app = FastAPI()
+
+# StaticFiles Middleware hinzufügen (korrekt und wichtig!)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+app.mount("/flux-pics", StaticFiles(directory=IMAGE_STORAGE_PATH), name="flux-pics")
+
+templates = Jinja2Templates(directory="templates")
+
+# Datenbank-Hilfsfunktionen (sehen gut aus)
+@contextmanager
+def get_db_connection(db_path=DATABASE_PATH):
+    conn = sqlite3.connect(db_path)
+    try:
+        yield conn
+    finally:
+        conn.close()
+
+def initialize_database(db_path=DATABASE_PATH):
+    with get_db_connection(db_path) as conn:
+        cursor = conn.cursor()
+        # Tabellen-Erstellung (scheint korrekt, keine Auffälligkeiten)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS generation_logs (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                timestamp TEXT,
+                prompt TEXT,
+                optimized_prompt TEXT,
+                hf_lora TEXT,
+                lora_scale REAL,
+                aspect_ratio TEXT,
+                guidance_scale REAL,
+                output_quality INTEGER,
+                prompt_strength REAL,
+                num_inference_steps INTEGER,
+                output_file TEXT,
+                album_id INTEGER,
+                category_id INTEGER
+            )
+        """)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS albums (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL
+            )
+        """)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS categories (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL
+            )
+        """)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS pictures (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                timestamp TEXT,
+                file_path TEXT,
+                file_name TEXT,
+                album_id INTEGER,
+                FOREIGN KEY (album_id) REFERENCES albums(id)
+            )
+        """)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS picture_categories (
+                picture_id INTEGER,
+                category_id INTEGER,
+                FOREIGN KEY (picture_id) REFERENCES pictures(id),
+                FOREIGN KEY (category_id) REFERENCES categories(id),
+                PRIMARY KEY (picture_id, category_id)
+            )
+        """)
+        conn.commit()
+def log_generation(args, optimized_prompt, image_file):
+    file_path, file_name = os.path.split(image_file)
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("""
+                INSERT INTO generation_logs (
+                    timestamp, prompt, optimized_prompt, hf_lora, lora_scale, aspect_ratio, guidance_scale,
+                    output_quality, prompt_strength, num_inference_steps, output_file, album_id, category_id
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+            """, (
+                datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+                args.prompt,
+                optimized_prompt,
+                args.hf_lora,
+                args.lora_scale,
+                args.aspect_ratio,
+                args.guidance_scale,
+                args.output_quality,
+                args.prompt_strength,
+                args.num_inference_steps,
+                image_file,
+                args.album_id,
+                args.category_ids[0] if args.category_ids else None # Hier auf erstes Element zugreifen
+            ))
+            picture_id = cursor.lastrowid # Dies scheint nicht korrekt zu sein, da die ID für die Tabelle pictures benötigt wird
+            cursor.execute("""
+                INSERT INTO pictures (
+                    timestamp, file_path, file_name, album_id
+                ) VALUES (?, ?, ?, ?)
+            """, (
+                datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+                file_path,
+                file_name,
+                args.album_id
+            ))
+            picture_id = cursor.lastrowid # Korrekte Zeile
+
+            # Insert multiple categories
+            for category_id in args.category_ids:
+                cursor.execute("""
+                    INSERT INTO picture_categories (picture_id, category_id)
+                    VALUES (?, ?)
+                """, (picture_id, category_id))
+
+            conn.commit()
+    except sqlite3.Error as e:
+        print(f"Error logging generation: {e}") # Sollte durch logger.error ersetzt werden.
+
+@app.on_event("startup")
+def startup_event():
+    initialize_database()
+
+@app.get("/")
+def read_root(request: Request):
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT id, name FROM albums")
+        albums = cursor.fetchall()
+        cursor.execute("SELECT id, name FROM categories")
+        categories = cursor.fetchall()
+    return templates.TemplateResponse("index.html", {"request": request, "albums": albums, "categories": categories})
+
+@app.get("/archive")
+def read_archive(
+    request: Request,
+    album: Optional[str] = Query(None),
+    category: Optional[List[str]] = Query(None),
+    search: Optional[str] = None,
+    items_per_page: int = Query(30),
+    page: int = Query(1)
+):
+    album_id = int(album) if album and album.isdigit() else None
+    category_ids = [int(cat) for cat in category] if category else []
+    offset = (page - 1) * items_per_page
+
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        query = """
+            SELECT gl.timestamp, gl.prompt, gl.optimized_prompt, gl.output_file, a.name as album, c.name as category
+            FROM generation_logs gl
+            LEFT JOIN albums a ON gl.album_id = a.id
+            LEFT JOIN categories c ON gl.category_id = c.id
+            WHERE 1=1
+        """
+        params = []
+
+        if album_id is not None:
+            query += " AND gl.album_id = ?"
+            params.append(album_id)
+
+        if category_ids:
+            # Hier ist die Verknüpfungstabelle picture_categories notwendig
+            query = """
+                SELECT gl.timestamp, gl.prompt, gl.optimized_prompt, gl.output_file, a.name as album, GROUP_CONCAT(c.name) as categories
+                FROM generation_logs gl
+                LEFT JOIN albums a ON gl.album_id = a.id
+                LEFT JOIN picture_categories pc ON gl.id = pc.picture_id
+                LEFT JOIN categories c ON pc.category_id = c.id
+                WHERE 1=1
+            """
+            if album_id is not None:
+              query += " AND gl.album_id = ?"
+              params.append(album_id)
+            
+            query += " AND pc.category_id IN ({})".format(','.join('?' for _ in category_ids))
+            params.extend(category_ids)
+
+        if search:
+            query += " AND (gl.prompt LIKE ? OR gl.optimized_prompt LIKE ?)"
+            params.append(f'%{search}%')
+            params.append(f'%{search}%')
+
+        query += " GROUP BY gl.id, gl.timestamp, gl.prompt, gl.optimized_prompt, gl.output_file, a.name ORDER BY gl.timestamp DESC LIMIT ? OFFSET ?"
+        params.extend([items_per_page, offset])
+        cursor.execute(query, params)
+        logs = cursor.fetchall()
+
+        logs = [{
+            "timestamp": log[0],
+            "prompt": log[1],
+            "optimized_prompt": log[2],
+            "output_file": log[3],
+            "album": log[4],
+            "category": log[5]
+        } for log in logs]
+
+        cursor.execute("SELECT id, name FROM albums")
+        albums = cursor.fetchall()
+
+        cursor.execute("SELECT id, name FROM categories")
+        categories = cursor.fetchall()
+
+    return templates.TemplateResponse("archive.html", {
+        "request": request,
+        "logs": logs,
+        "albums": albums,
+        "categories": categories,
+        "selected_album": album,
+        "selected_categories": category_ids,
+        "search_query": search,
+        "items_per_page": items_per_page,
+        "page": page
+    })
+
+
+@app.get("/backend")
+def read_backend(request: Request):
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT id, name FROM albums")
+        albums = cursor.fetchall()
+        cursor.execute("SELECT id, name FROM categories")
+        categories = cursor.fetchall()
+    return templates.TemplateResponse("backend.html", {"request": request, "albums": albums, "categories": categories})
+
+@app.get("/backend/stats")
+async def get_backend_stats():
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+
+        # Anzahl der Bilder (aus der pictures-Tabelle)
+        cursor.execute("SELECT COUNT(*) FROM pictures")
+        total_images = cursor.fetchone()[0]
+
+        # Alben-Statistiken (Anzahl)
+        cursor.execute("SELECT COUNT(*) FROM albums")
+        total_albums = cursor.fetchone()[0]
+
+        # Kategorie-Statistiken (Anzahl)
+        cursor.execute("SELECT COUNT(*) FROM categories")
+        total_categories = cursor.fetchone()[0]
+
+        # Monatliche Statistiken (Anzahl der Bilder pro Monat)
+        cursor.execute("""
+            SELECT strftime('%Y-%m', timestamp) as month, COUNT(*)
+            FROM pictures
+            GROUP BY month
+            ORDER BY month
+        """)
+        monthly_stats = [{"month": row[0], "count": row[1]} for row in cursor.fetchall()]
+
+        # Speicherplatzberechnung
+        total_size = 0
+        for filename in os.listdir(IMAGE_STORAGE_PATH):
+            filepath = os.path.join(IMAGE_STORAGE_PATH, filename)
+            if os.path.isfile(filepath):
+                total_size += os.path.getsize(filepath)
+        total_size_mb = total_size / (1024 * 1024)
+
+        # Daten für die Kategorien-Statistik (Beispiel: Anzahl der Bilder pro Kategorie)
+        cursor.execute("""
+            SELECT c.name, COUNT(pc.picture_id)
+            FROM categories c
+            LEFT JOIN picture_categories pc ON c.id = pc.category_id
+            GROUP BY c.name
+        """)
+        category_stats = [{"name": row[0], "count": row[1]} for row in cursor.fetchall()]
+
+    return {
+        "total_images": total_images,
+        "albums": {
+            "total": total_albums
+        },
+        "categories": {
+            "total": total_categories,
+            "data": category_stats
+        },
+        "storage_usage_mb": total_size_mb,
+        "monthly": monthly_stats
+    }  # Hier war die Klammer falsch gesetzt
+
+# Neue Routen für Alben
+@app.get("/albums")
+async def get_albums():
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT id, name FROM albums")
+        result = cursor.fetchall()
+        albums = [{"id": row[0], "name": row[1]} for row in result]
+    return albums
+
+@app.post("/create_album")
+async def create_album_route(name: str = Form(...), description: Optional[str] = Form(None)):
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("INSERT INTO albums (name) VALUES (?)", (name,))
+            conn.commit()
+            new_album_id = cursor.lastrowid
+            return {"message": "Album erstellt", "id": new_album_id, "name": name}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error creating album: {e}")
+
+@app.delete("/delete_album/{album_id}")
+async def delete_album(album_id: int):
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            # Lösche die Verknüpfungen in picture_categories
+            cursor.execute("DELETE FROM picture_categories WHERE picture_id IN (SELECT id FROM pictures WHERE album_id = ?)", (album_id,))
+            # Lösche die Bilder aus der pictures-Tabelle
+            cursor.execute("DELETE FROM pictures WHERE album_id = ?", (album_id,))
+            # Lösche die Einträge aus generation_logs
+            cursor.execute("DELETE FROM generation_logs WHERE album_id = ?", (album_id,))
+            # Lösche das Album aus der albums-Tabelle
+            cursor.execute("DELETE FROM albums WHERE id = ?", (album_id,))
+            conn.commit()
+        return {"message": f"Album {album_id} und zugehörige Einträge gelöscht"}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error deleting album: {e}")
+
+@app.put("/update_album/{album_id}")
+async def update_album(album_id: int, request: Request):
+    data = await request.json()
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("UPDATE albums SET name = ? WHERE id = ?", (data["name"], album_id))
+            conn.commit()
+            if cursor.rowcount == 0:
+                raise HTTPException(status_code=404, detail=f"Album {album_id} nicht gefunden")
+            return {"message": f"Album {album_id} aktualisiert"}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error updating album: {e}")
+
+# Neue Routen für Kategorien
+@app.get("/categories")
+async def get_categories():
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT id, name FROM categories")
+        result = cursor.fetchall()
+        categories = [{"id": row[0], "name": row[1]} for row in result]
+    return categories
+
+@app.post("/create_category")
+async def create_category_route(name: str = Form(...)):
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("INSERT INTO categories (name) VALUES (?)", (name,))
+            conn.commit()
+            new_category_id = cursor.lastrowid
+            return {"message": "Kategorie erstellt", "id": new_category_id, "name": name}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error creating category: {e}")
+
+@app.delete("/delete_category/{category_id}")
+async def delete_category(category_id: int):
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            # Lösche die Verknüpfungen in picture_categories
+            cursor.execute("DELETE FROM picture_categories WHERE category_id = ?", (category_id,))
+            # Lösche die Kategorie aus der categories-Tabelle
+            cursor.execute("DELETE FROM categories WHERE id = ?", (category_id,))
+            conn.commit()
+        return {"message": f"Kategorie {category_id} und zugehörige Einträge gelöscht"}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error deleting category: {e}")
+
+@app.put("/update_category/{category_id}")
+async def update_category(category_id: int, request: Request):
+    data = await request.json()
+    try:
+        with get_db_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute("UPDATE categories SET name = ? WHERE id = ?", (data["name"], category_id))
+            conn.commit()
+            if cursor.rowcount == 0:
+                raise HTTPException(status_code=404, detail=f"Kategorie {category_id} nicht gefunden")
+            return {"message": f"Kategorie {category_id} aktualisiert"}
+    except sqlite3.Error as e:
+        raise HTTPException(status_code=500, detail=f"Error updating category: {e}")
+
+@app.post("/flux-pics")
+async def download_images(request: Request):
+    try:
+        body = await request.json()
+        logger.info(f"Received request body: {body}")
+
+        image_files = body.get("selectedImages", [])
+        if not image_files:
+            raise HTTPException(status_code=400, detail="Keine Bilder ausgewählt.")
+
+        logger.info(f"Processing image files: {image_files}")
+
+        # Überprüfe ob Download-Verzeichnis existiert
+        if not os.path.exists(IMAGE_STORAGE_PATH):
+            logger.error(f"Storage path not found: {IMAGE_STORAGE_PATH}")
+            raise HTTPException(status_code=500, detail="Storage path not found")
+
+        zip_buffer = BytesIO()
+        with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file:
+            for image_file in image_files:
+                image_path = os.path.join(IMAGE_STORAGE_PATH, image_file)
+                logger.info(f"Processing file: {image_path}")
+
+                if os.path.exists(image_path):
+                    zip_file.write(image_path, arcname=image_file)
+                else:
+                    logger.error(f"File not found: {image_path}")
+                    raise HTTPException(status_code=404, detail=f"Bild {image_file} nicht gefunden.")
+
+        zip_buffer.seek(0)
+
+        # Korrekter Response mit Buffer
+        return Response(
+            content=zip_buffer.getvalue(),
+            media_type="application/zip",
+            headers={
+                "Content-Disposition": f"attachment; filename=images.zip"
+            }
+        )
+
+    except Exception as e:
+        logger.error(f"Error in download_images: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/flux-pics/single")
+async def download_single_image(request: Request):
+    try:
+        data = await request.json()
+        filename = data.get("filename")
+        logger.info(f"Requested file download: {filename}")
+
+        if not filename:
+            logger.error("No filename provided")
+            raise HTTPException(status_code=400, detail="Kein Dateiname angegeben")
+
+        file_path = os.path.join(IMAGE_STORAGE_PATH, filename)
+        logger.info(f"Full file path: {file_path}")
+
+        if not os.path.exists(file_path):
+            logger.error(f"File not found: {file_path}")
+            raise HTTPException(status_code=404, detail=f"Datei {filename} nicht gefunden")
+
+        # Determine MIME type
+        file_extension = filename.lower().split('.')[-1]
+        mime_types = {
+            'png': 'image/png',
+            'jpg': 'image/jpeg',
+            'jpeg': 'image/jpeg',
+            'gif': 'image/gif',
+            'webp': 'image/webp'
+        }
+        media_type = mime_types.get(file_extension, 'application/octet-stream')
+        logger.info(f"Serving file with media type: {media_type}")
+
+        return FileResponse(
+            path=file_path,
+            filename=filename,
+            media_type=media_type,
+            headers={
+                "Content-Disposition": f"attachment; filename={filename}"
+            }
+        )
+    except Exception as e:
+        logger.error(f"Error in download_single_image: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    try:
+        data = await websocket.receive_json()
+        prompts = data.get("prompts", [data])
+
+        for prompt_data in prompts:
+            prompt_data["lora_scale"] = float(prompt_data["lora_scale"])
+            prompt_data["guidance_scale"] = float(prompt_data["guidance_scale"])
+            prompt_data["prompt_strength"] = float(prompt_data["prompt_strength"])
+            prompt_data["num_inference_steps"] = int(prompt_data["num_inference_steps"])
+            prompt_data["num_outputs"] = int(prompt_data["num_outputs"])
+            prompt_data["output_quality"] = int(prompt_data["output_quality"])
+
+            # Handle new album and category creation
+            album_name = prompt_data.get("album_id")
+            category_names = prompt_data.get("category_ids", [])
+
+            if album_name and not album_name.isdigit():
+                with get_db_connection() as conn:
+                    cursor = conn.cursor()
+                    cursor.execute(
+                        "INSERT INTO albums (name) VALUES (?)", (album_name,)
+                    )
+                    conn.commit()
+                    prompt_data["album_id"] = cursor.lastrowid
+            else:
+                prompt_data["album_id"] = int(album_name) if album_name else None
+
+            category_ids = []
+            for category_name in category_names:
+                if not category_name.isdigit():
+                    with get_db_connection() as conn:
+                        cursor = conn.cursor()
+                        cursor.execute(
+                            "INSERT INTO categories (name) VALUES (?)", (category_name,)
+                        )
+                        conn.commit()
+                        category_ids.append(cursor.lastrowid)
+                else:
+                    category_ids.append(int(category_name) if category_name else None)
+            prompt_data["category_ids"] = category_ids
+
+            args = argparse.Namespace(**prompt_data)
+
+            # await websocket.send_json({"message": "Optimiere Prompt..."})
+            optimized_prompt = (
+                optimize_prompt(args.prompt)
+                if getattr(args, "agent", False)
+                else args.prompt
+            )
+            await websocket.send_json({"optimized_prompt": optimized_prompt})
+
+            if prompt_data.get("optimize_only"):
+                continue
+
+            await generate_and_download_image(websocket, args, optimized_prompt)
+    except WebSocketDisconnect:
+        print("Client disconnected")
+    except Exception as e:
+        await websocket.send_json({"message": str(e)})
+        raise e
+    finally:
+        await websocket.close()
+
+async def fetch_image(item, index, args, filenames, semaphore, websocket, timestamp):
+    async with semaphore:
+        try:
+            response = requests.get(item, timeout=TIMEOUT_DURATION)
+            if response.status_code == 200:
+                filename = (
+                    f"{DOWNLOAD_DIR}/image_{timestamp}_{index}.{args.output_format}"
+                )
+                with open(filename, "wb") as file:
+                    file.write(response.content)
+                filenames.append(
+                    f"/flux-pics/image_{timestamp}_{index}.{args.output_format}"
+                )
+                progress = int((index + 1) / args.num_outputs * 100)
+                await websocket.send_json({"progress": progress})
+            else:
+                await websocket.send_json(
+                    {
+                        "message": f"Fehler beim Herunterladen des Bildes {index + 1}: {response.status_code}"
+                    }
+                )
+        except requests.exceptions.Timeout:
+            await websocket.send_json(
+                {"message": f"Timeout beim Herunterladen des Bildes {index + 1}"}
+            )
+
+async def generate_and_download_image(websocket: WebSocket, args, optimized_prompt):
+    try:
+        input_data = {
+            "prompt": optimized_prompt,
+            "hf_lora": getattr(
+                args, "hf_lora", None
+            ),  # Use getattr to safely access hf_lora
+            "lora_scale": args.lora_scale,
+            "num_outputs": args.num_outputs,
+            "aspect_ratio": args.aspect_ratio,
+            "output_format": args.output_format,
+            "guidance_scale": args.guidance_scale,
+            "output_quality": args.output_quality,
+            "prompt_strength": args.prompt_strength,
+            "num_inference_steps": args.num_inference_steps,
+            "disable_safety_checker": False,
+        }
+
+        # await websocket.send_json({"message": "Generiere Bilder..."})
+
+        # Debug: Log the start of the replication process
+        print(
+            f"Starting replication process for {args.num_outputs} outputs with timeout {TIMEOUT_DURATION}"
+        )
+
+        output = replicate.run(
+            "lucataco/flux-dev-lora:091495765fa5ef2725a175a57b276ec30dc9d39c22d30410f2ede68a3eab66b3",
+            input=input_data,
+            timeout=TIMEOUT_DURATION,
+        )
+
+        if not os.path.exists(DOWNLOAD_DIR):
+            os.makedirs(DOWNLOAD_DIR)
+
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filenames = []
+        semaphore = Semaphore(3)  # Limit concurrent downloads
+
+        tasks = [
+            create_task(
+                fetch_image(
+                    item, index, args, filenames, semaphore, websocket, timestamp
+                )
+            )
+            for index, item in enumerate(output)
+        ]
+        await gather(*tasks)
+
+        for file in filenames:
+            log_generation(args, optimized_prompt, file)
+
+        await websocket.send_json(
+            {"message": "Bilder erfolgreich generiert", "generated_files": filenames}
+        )
+    except requests.exceptions.Timeout:
+        await websocket.send_json(
+            {"message": "Fehler bei der Bildgenerierung: Timeout überschritten"}
+        )
+    except Exception as e:
+        await websocket.send_json(
+            {"message": f"Fehler bei der Bildgenerierung: {str(e)}"}
+        )
+        raise Exception(f"Fehler bei der Bildgenerierung: {str(e)}")
+
+def optimize_prompt(prompt):
+    api_key = os.environ.get("MISTRAL_API_KEY")
+    agent_id = os.environ.get("MISTRAL_FLUX_AGENT")
+
+    if not api_key or not agent_id:
+        raise ValueError("MISTRAL_API_KEY oder MISTRAL_FLUX_AGENT nicht gesetzt")
+
+    client = Mistral(api_key=api_key)
+    chat_response = client.agents.complete(
+        agent_id=agent_id,
+        messages=[
+            {
+                "role": "user",
+                "content": f"Optimiere folgenden Prompt für Flux Lora: {prompt}",
+            }
+        ],
+    )
+
+    return chat_response.choices[0].message.content
+
+if __name__ == "__main__":
+    # Parse command line arguments
+    parser = argparse.ArgumentParser(description="Beschreibung")
+    parser.add_argument('--hf_lora', default=None, help='HF LoRA Model')
+    args = parser.parse_args()
+
+    # Pass arguments to the FastAPI application
+    app.state.args = args
+
+    # Run the Uvicorn server
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=True,
+        log_level="trace"
+    )

static/api.js

@@ -0,0 +1,67 @@
+// static/components/api.js
+export const API = {
+    albums: {
+        list: '/albums', // Vermutung basierend auf AlbumManager.js
+        create: '/create_album',
+        delete: (id) => `/delete_album/${id}`,
+        update: (id) => `/update_album/${id}`,
+    },
+    categories: {
+        list: '/categories', // Vermutung basierend auf CategoryManager.js
+        create: '/create_category',
+        delete: (id) => `/delete_category/${id}`,
+        update: (id) => `/update_category/${id}`,
+        merge: '/categories/merge'
+    },
+    statistics: {
+        images: '/backend/stats',
+        storage: '/backend/stats'
+    }
+};
+
+export const APIHandler = {
+    get: async (url) => {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    post: async (url, data) => {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    put: async (url, data) => {
+        //PUT hinzufügen
+        const response = await fetch(url, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    delete: async (url) => {
+        const response = await fetch(url, {
+            method: 'DELETE'
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    }
+};

static/backend.js

@@ -0,0 +1,159 @@
+class Logger {
+    static isDebugMode = false;
+
+    static debug(message, data = null) {
+        if (this.isDebugMode) {
+            console.log(`[Debug] ${message}`, data || '');
+        }
+    }
+
+    static error(message, error = null) {
+        console.error(`[Error] ${message}`, error || '');
+    }
+
+    static initializeDebugMode() {
+        try {
+            const urlParams = new URLSearchParams(window.location.search);
+            this.isDebugMode = urlParams.has('debug');
+        } catch (error) {
+            console.error('Fehler beim Initialisieren des Debug-Modus:', error);
+            this.isDebugMode = false;
+        }
+    }
+}
+
+const utils = {
+    showLoading() {
+        if (document.body) {
+            document.body.classList.add('loading');
+            Logger.debug('Loading-Status aktiviert');
+        } else {
+            Logger.error('document.body nicht verfügbar');
+        }
+    },
+
+    hideLoading() {
+        if (document.body) {
+            document.body.classList.remove('loading');
+            Logger.debug('Loading-Status deaktiviert');
+        } else {
+            Logger.error('document.body nicht verfügbar');
+        }
+    },
+
+    safeGetElement(id) {
+        const element = document.getElementById(id);
+        if (!element) {
+            Logger.error(`Element mit ID '${id}' nicht gefunden`);
+            return null;
+        }
+        return element;
+    },
+
+    async withLoading(asyncFn) {
+        try {
+            this.showLoading();
+            await asyncFn();
+        } finally {
+            this.hideLoading();
+        }
+    }
+};
+
+class BackendManager {
+    constructor() {
+        this.selectedItems = new Set();
+        this.initializeEventListeners();
+    }
+
+    initializeEventListeners() {
+        // Event-Listener für Dark Mode Toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        if (darkModeToggle) {
+            darkModeToggle.addEventListener('click', () => this.toggleDarkMode());
+        }
+
+        // Event-Listener für Aktualisieren-Button
+        const refreshButton = document.querySelector(".btn-primary[onclick='refreshData()']");
+        if (refreshButton) {
+          refreshButton.addEventListener("click", () => {
+            this.refreshData();
+          });
+        }
+    }
+
+    toggleDarkMode() {
+        document.body.classList.toggle('dark-mode');
+        const isDarkMode = document.body.classList.contains('dark-mode');
+        localStorage.setItem('darkMode', isDarkMode);
+
+        // Aktualisiere das Icon
+        const icon = document.querySelector('#darkModeToggle i');
+        if (isDarkMode) {
+            icon.classList.remove('bi-moon');
+            icon.classList.add('bi-sun');
+        } else {
+            icon.classList.remove('bi-sun');
+            icon.classList.add('bi-moon');
+        }
+    }
+
+    async updateStats() {
+        try {
+            const response = await fetch('/backend/stats');
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const stats = await response.json();
+            console.log("Stats from backend:", stats);
+
+            // Aktualisiere die Statistik-Anzeige
+            document.getElementById('totalImages').textContent = stats.total_images;
+            document.getElementById('totalAlbums').textContent = stats.albums.total;
+            document.getElementById('totalCategories').textContent = stats.categories.total;
+            document.getElementById('storageUsage').textContent = `${(stats.storage_usage_mb).toFixed(2)} MB`;
+
+        } catch (error) {
+            console.error('Fehler beim Laden der Statistiken:', error);
+        }
+    }
+
+    async refreshData() {
+        try {
+            await this.updateStats();
+            this.showToast('Erfolg', 'Daten erfolgreich aktualisiert', 'success');
+        } catch (error) {
+            this.showToast('Fehler', 'Fehler beim Aktualisieren der Daten', 'danger');
+        }
+    }
+
+    showToast(title, message, type = 'info') {
+        const toast = document.getElementById('toast');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+
+        toast.classList.remove('bg-success', 'bg-danger', 'bg-info', 'bg-warning');
+        toast.classList.add(`bg-${type}`);
+        toastTitle.textContent = title;
+        toastMessage.textContent = message;
+
+        const bsToast = new bootstrap.Toast(toast);
+        bsToast.show();
+    }
+}
+
+// Initialisierung
+document.addEventListener('DOMContentLoaded', () => {
+    new BackendManager();
+    updateStatistics(); // Statistiken beim Laden der Seite abrufen
+
+    // Dark Mode aus localStorage wiederherstellen, falls vorhanden
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.body.classList.add('dark-mode');
+        const icon = document.querySelector('#darkModeToggle i');
+        if (icon) {
+            icon.classList.remove('bi-moon');
+            icon.classList.add('bi-sun');
+        }
+    }
+});

static/components/AlbumManager.js

@@ -0,0 +1,260 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { API, APIHandler, Validators } from './api.js';
+
+const AlbumManager = () => {
+    const [albums, setAlbums] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedAlbums, setSelectedAlbums] = useState(new Set());
+    const [editingAlbum, setEditingAlbum] = useState(null);
+
+    // Daten laden
+    const fetchAlbums = useCallback(async () => {
+        try {
+            setLoading(true);
+            const data = await APIHandler.get(API.albums.list);
+            setAlbums(data);
+            setError(null);
+        } catch (err) {
+            setError('Fehler beim Laden der Alben: ' + err.message);
+            console.error('Fetch error:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchAlbums();
+    }, [fetchAlbums]);
+
+
+    // Album erstellen
+    const handleCreate = async (name, description = '') => {
+        try {
+            //const validationErrors = Validators.album({ name });
+            //if (Object.keys(validationErrors).length > 0) {
+            //    throw new Error(Object.values(validationErrors).join(', '));
+            //}
+
+            await APIHandler.post(API.albums.create, { name, description });
+            await fetchAlbums();
+            window.showToast('Erfolg', 'Album wurde erstellt', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    // Album aktualisieren
+    const handleUpdate = async (id, updates) => {
+        try {
+            //const validationErrors = Validators.album(updates);
+            //if (Object.keys(validationErrors).length > 0) {
+            //    throw new Error(Object.values(validationErrors).join(', '));
+            //}
+
+            await APIHandler.put(API.albums.update(id), updates);
+            await fetchAlbums();
+            setEditingAlbum(null);
+            window.showToast('Erfolg', 'Album wurde aktualisiert', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+
+    // Album aktualisieren
+    const handleUpdate = async (id, updates) => {
+        try {
+            const validationErrors = Validators.album(updates);
+            if (Object.keys(validationErrors).length > 0) {
+                throw new Error(Object.values(validationErrors).join(', '));
+            }
+
+            await APIHandler.put(API.albums.update(id), updates);
+            await fetchAlbums();
+            setEditingAlbum(null);
+            window.showToast('Erfolg', 'Album wurde aktualisiert', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    // Massenbearbeitung
+    const handleBulkDelete = async () => {
+        if (selectedAlbums.size === 0) return;
+        if (!window.confirm(`Möchten Sie ${selectedAlbums.size} Alben wirklich löschen?`)) return;
+
+        try {
+            await Promise.all(
+                Array.from(selectedAlbums).map(id => 
+                    APIHandler.delete(API.albums.delete(id))
+                )
+            );
+            setSelectedAlbums(new Set());
+            await fetchAlbums();
+            window.showToast('Erfolg', 'Ausgewählte Alben wurden gelöscht', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    const handleSelectAll = (event) => {
+        if (event.target.checked) {
+            setSelectedAlbums(new Set(albums.map(album => album.id)));
+        } else {
+            setSelectedAlbums(new Set());
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="d-flex justify-content-center p-5">
+                <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Laden...</span>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-danger m-3" role="alert">
+                <h4 className="alert-heading">Fehler</h4>
+                <p>{error}</p>
+                <button 
+                    className="btn btn-outline-danger"
+                    onClick={fetchAlbums}
+                >
+                    Erneut versuchen
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card-body">
+            {/* Toolbar */}
+            <div className="d-flex justify-content-between mb-3">
+                <button 
+                    className="btn btn-primary"
+                    onClick={() => setEditingAlbum({ name: '', description: '' })}
+                >
+                    <i className="bi bi-plus-lg"></i> Neues Album
+                </button>
+                {selectedAlbums.size > 0 && (
+                    <button 
+                        className="btn btn-danger"
+                        onClick={handleBulkDelete}
+                    >
+                        <i className="bi bi-trash"></i> 
+                        {selectedAlbums.size} Alben löschen
+                    </button>
+                )}
+            </div>
+
+            {/* Album Liste */}
+            <div className="table-responsive">
+                <table className="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>
+                                <input 
+                                    type="checkbox"
+                                    className="form-check-input"
+                                    onChange={handleSelectAll}
+                                    checked={selectedAlbums.size === albums.length}
+                                />
+                            </th>
+                            <th>Name</th>
+                            <th>Bilder</th>
+                            <th>Erstellt</th>
+                            <th>Aktionen</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {albums.map(album => (
+                            <tr key={album.id}>
+                                <td>
+                                    <input 
+                                        type="checkbox"
+                                        className="form-check-input"
+                                        checked={selectedAlbums.has(album.id)}
+                                        onChange={(e) => {
+                                            const newSelected = new Set(selectedAlbums);
+                                            if (e.target.checked) {
+                                                newSelected.add(album.id);
+                                            } else {
+                                                newSelected.delete(album.id);
+                                            }
+                                            setSelectedAlbums(newSelected);
+                                        }}
+                                    />
+                                </td>
+                                <td>
+                                    {editingAlbum?.id === album.id ? (
+                                        <input 
+                                            type="text"
+                                            className="form-control"
+                                            value={editingAlbum.name}
+                                            onChange={(e) => setEditingAlbum({
+                                                ...editingAlbum,
+                                                name: e.target.value
+                                            })}
+                                        />
+                                    ) : album.name}
+                                </td>
+                                <td>{album.imageCount}</td>
+                                <td>{new Date(album.createdAt).toLocaleDateString()}</td>
+                                <td>
+                                    <div className="btn-group">
+                                        {editingAlbum?.id === album.id ? (
+                                            <>
+                                                <button 
+                                                    className="btn btn-sm btn-success"
+                                                    onClick={() => handleUpdate(album.id, editingAlbum)}
+                                                >
+                                                    <i className="bi bi-check"></i>
+                                                </button>
+                                                <button 
+                                                    className="btn btn-sm btn-secondary"
+                                                    onClick={() => setEditingAlbum(null)}
+                                                >
+                                                    <i className="bi bi-x"></i>
+                                                </button>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <button 
+                                                    className="btn btn-sm btn-outline-primary"
+                                                    onClick={() => setEditingAlbum(album)}
+                                                >
+                                                    <i className="bi bi-pencil"></i>
+                                                </button>
+                                                <button 
+                                                    className="btn btn-sm btn-outline-danger"
+                                                    onClick={() => handleDelete(album.id)}
+                                                >
+                                                    <i className="bi bi-trash"></i>
+                                                </button>
+                                            </>
+                                        )}
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {albums.length === 0 && (
+                <div className="text-center text-muted p-5">
+                    <i className="bi bi-folder-x display-4"></i>
+                    <p className="mt-3">Keine Alben vorhanden</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AlbumManager;
+window.AlbumManager = AlbumManager; // <-- Diese Zeile ans Ende setzen

static/components/CategoryManager.js

@@ -0,0 +1,463 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { API, APIHandler, Validators } from './api.js';
+
+const CategoryManager = () => {
+  const [categories, setCategories] = useState([]);
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const fetchCategories = async () => {
+    try {
+      const response = await fetch('/backend/categories');
+      const data = await response.json();
+      setCategories(data);
+    } catch (error) {
+      console.error('Fehler beim Laden der Kategorien:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('/create_category', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `name=${encodeURIComponent(newCategoryName)}`
+      });
+      
+      if (!response.ok) throw new Error('Fehler beim Erstellen');
+      
+      await fetchCategories();
+      setNewCategoryName('');
+    } catch (error) {
+      console.error('Fehler:', error);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Kategorie wirklich löschen?')) return;
+    
+    try {
+      const response = await fetch(`/delete_category/${id}`, {
+        method: 'DELETE'
+      });
+      
+      if (!response.ok) throw new Error('Fehler beim Löschen');
+      
+      await fetchCategories();
+    } catch (error) {
+      console.error('Fehler:', error);
+    }
+  };
+
+  if (loading) return <div>Lade...</div>;
+
+  return (
+    <div className="card-body">
+      <form onSubmit={handleSubmit} className="mb-3">
+        <div className="input-group">
+          <input
+            type="text"
+            className="form-control"
+            value={newCategoryName}
+            onChange={(e) => setNewCategoryName(e.target.value)}
+            placeholder="Neue Kategorie"
+            required
+          />
+          <button type="submit" className="btn btn-primary">Erstellen</button>
+        </div>
+      </form>
+
+      <div className="table-responsive">
+        <table className="table table-hover">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Bilder</th>
+              <th>Aktionen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.name}</td>
+                <td>{category.imageCount}</td>
+                <td>
+                  <button
+                    onClick={() => handleDelete(category.id)}
+                    className="btn btn-sm btn-outline-danger"
+                  >
+                    Löschen
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryManager;
+### END: category-manager.txt
+
+### START: category-manager-updated.txt
+import React, { useState, useEffect, useCallback } from 'react';
+import { API, APIHandler, Validators } from '@/api';
+
+const CategoryManager = () => {
+    const [categories, setCategories] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedCategories, setSelectedCategories] = useState(new Set());
+    const [editingCategory, setEditingCategory] = useState(null);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'asc' });
+
+    // Daten laden
+    const fetchCategories = useCallback(async () => {
+        try {
+            setLoading(true);
+            const data = await APIHandler.get(API.categories.list);
+            setCategories(data);
+            setError(null);
+        } catch (err) {
+            setError('Fehler beim Laden der Kategorien: ' + err.message);
+            console.error('Fetch error:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchCategories();
+    }, [fetchCategories]);
+
+    // Sortierung
+    const sortedCategories = React.useMemo(() => {
+        const sorted = [...categories];
+        sorted.sort((a, b) => {
+            if (sortConfig.key === 'imageCount') {
+                return sortConfig.direction === 'asc' 
+                    ? a.imageCount - b.imageCount 
+                    : b.imageCount - a.imageCount;
+            }
+            return sortConfig.direction === 'asc'
+                ? a[sortConfig.key].localeCompare(b[sortConfig.key])
+                : b[sortConfig.key].localeCompare(a[sortConfig.key]);
+        });
+        return sorted;
+    }, [categories, sortConfig]);
+
+    // Kategorie erstellen
+    const handleCreate = async (name) => {
+        try {
+            //const validationErrors = Validators.category({ name });
+            //if (Object.keys(validationErrors).length > 0) {
+            //    throw new Error(Object.values(validationErrors).join(', '));
+            //}
+
+            await APIHandler.post(API.categories.create, { name });
+            await fetchCategories();
+            window.showToast('Erfolg', 'Kategorie wurde erstellt', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+
+    // Kategorie löschen
+    const handleDelete = async (id) => {
+        if (!window.confirm('Möchten Sie diese Kategorie wirklich löschen?')) return;
+
+        try {
+            await APIHandler.delete(API.categories.delete(id));
+            await fetchCategories();
+            window.showToast('Erfolg', 'Kategorie wurde gelöscht', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    // Kategorie aktualisieren
+    const handleUpdate = async (id, updates) => {
+        try {
+            //const validationErrors = Validators.category(updates);
+            //if (Object.keys(validationErrors).length > 0) {
+            //    throw new Error(Object.values(validationErrors).join(', '));
+            //}
+
+            await APIHandler.put(API.categories.update(id), updates);
+            await fetchCategories();
+            setEditingCategory(null);
+            window.showToast('Erfolg', 'Kategorie wurde aktualisiert', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+
+    // Massenbearbeitung
+    const handleBulkDelete = async () => {
+        if (selectedCategories.size === 0) return;
+        if (!window.confirm(`Möchten Sie ${selectedCategories.size} Kategorien wirklich löschen?`)) return;
+
+        try {
+            await Promise.all(
+                Array.from(selectedCategories).map(id => 
+                    APIHandler.delete(API.categories.delete(id))
+                )
+            );
+            setSelectedCategories(new Set());
+            await fetchCategories();
+            window.showToast('Erfolg', 'Ausgewählte Kategorien wurden gelöscht', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    // Massenbearbeitung - Kategorien zusammenführen
+    const handleMergeCategories = async (targetId) => {
+        const selectedIds = Array.from(selectedCategories);
+        if (selectedIds.length < 2) return;
+
+        try {
+            await APIHandler.post(API.categories.merge, {
+                targetId,
+                sourceIds: selectedIds.filter(id => id !== targetId)
+            });
+            setSelectedCategories(new Set());
+            await fetchCategories();
+            window.showToast('Erfolg', 'Kategorien wurden zusammengeführt', 'success');
+        } catch (err) {
+            window.showToast('Fehler', err.message, 'danger');
+        }
+    };
+
+    const handleSelectAll = (event) => {
+        if (event.target.checked) {
+            setSelectedCategories(new Set(categories.map(cat => cat.id)));
+        } else {
+            setSelectedCategories(new Set());
+        }
+    };
+
+    const handleSort = (key) => {
+        setSortConfig(current => ({
+            key,
+            direction: current.key === key && current.direction === 'asc' ? 'desc' : 'asc'
+        }));
+    };
+
+    if (loading) {
+        return (
+            <div className="d-flex justify-content-center p-5">
+                <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Laden...</span>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-danger m-3" role="alert">
+                <h4 className="alert-heading">Fehler</h4>
+                <p>{error}</p>
+                <button 
+                    className="btn btn-outline-danger"
+                    onClick={fetchCategories}
+                >
+                    Erneut versuchen
+                </button>
+            </div>
+        );
+    }
+
+    // Filtern basierend auf Suchbegriff
+    const filteredCategories = searchTerm 
+        ? sortedCategories.filter(cat => 
+            cat.name.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+        : sortedCategories;
+
+    return (
+        <div className="card-body">
+            {/* Toolbar */}
+            <div className="d-flex flex-wrap justify-content-between mb-3 gap-2">
+                <div className="d-flex gap-2">
+                    <button 
+                        className="btn btn-primary"
+                        onClick={() => setEditingCategory({ name: '' })}
+                    >
+                        <i className="bi bi-plus-lg"></i> Neue Kategorie
+                    </button>
+                    {selectedCategories.size > 0 && (
+                        <div className="btn-group">
+                            <button 
+                                className="btn btn-danger"
+                                onClick={handleBulkDelete}
+                            >
+                                <i className="bi bi-trash"></i> 
+                                {selectedCategories.size} löschen
+                            </button>
+                            {selectedCategories.size > 1 && (
+                                <button 
+                                    className="btn btn-warning"
+                                    onClick={() => {
+                                        const firstId = Array.from(selectedCategories)[0];
+                                        handleMergeCategories(firstId);
+                                    }}
+                                >
+                                    <i className="bi bi-arrow-join"></i> 
+                                    Zusammenführen
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+                <div className="flex-grow-1 max-w-xs">
+                    <input
+                        type="search"
+                        className="form-control"
+                        placeholder="Kategorien durchsuchen..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                </div>
+            </div>
+
+            {/* Kategorie Liste */}
+            <div className="table-responsive">
+                <table className="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>
+                                <input 
+                                    type="checkbox"
+                                    className="form-check-input"
+                                    onChange={handleSelectAll}
+                                    checked={selectedCategories.size === categories.length}
+                                />
+                            </th>
+                            <th 
+                                className="cursor-pointer"
+                                onClick={() => handleSort('name')}
+                            >
+                                Name {sortConfig.key === 'name' && (
+                                    <i className={`bi bi-arrow-${sortConfig.direction === 'asc' ? 'up' : 'down'}`}></i>
+                                )}
+                            </th>
+                            <th 
+                                className="cursor-pointer"
+                                onClick={() => handleSort('imageCount')}
+                            >
+                                Bilder {sortConfig.key === 'imageCount' && (
+                                    <i className={`bi bi-arrow-${sortConfig.direction === 'asc' ? 'up' : 'down'}`}></i>
+                                )}
+                            </th>
+                            <th>Aktionen</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {filteredCategories.map(category => (
+                            <tr key={category.id}>
+                                <td>
+                                    <input 
+                                        type="checkbox"
+                                        className="form-check-input"
+                                        checked={selectedCategories.has(category.id)}
+                                        onChange={(e) => {
+                                            const newSelected = new Set(selectedCategories);
+                                            if (e.target.checked) {
+                                                newSelected.add(category.id);
+                                            } else {
+                                                newSelected.delete(category.id);
+                                            }
+                                            setSelectedCategories(newSelected);
+                                        }}
+                                    />
+                                </td>
+                                <td>
+                                    {editingCategory?.id === category.id ? (
+                                        <input 
+                                            type="text"
+                                            className="form-control"
+                                            value={editingCategory.name}
+                                            onChange={(e) => setEditingCategory({
+                                                ...editingCategory,
+                                                name: e.target.value
+                                            })}
+                                            onKeyPress={(e) => {
+                                                if (e.key === 'Enter') {
+                                                    handleUpdate(category.id, editingCategory);
+                                                }
+                                            }}
+                                        />
+                                    ) : category.name}
+                                </td>
+                                <td>{category.imageCount}</td>
+                                <td>
+                                    <div className="btn-group">
+                                        {editingCategory?.id === category.id ? (
+                                            <>
+                                                <button 
+                                                    className="btn btn-sm btn-success"
+                                                    onClick={() => handleUpdate(category.id, editingCategory)}
+                                                >
+                                                    <i className="bi bi-check"></i>
+                                                </button>
+                                                <button 
+                                                    className="btn btn-sm btn-secondary"
+                                                    onClick={() => setEditingCategory(null)}
+                                                >
+                                                    <i className="bi bi-x"></i>
+                                                </button>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <button 
+                                                    className="btn btn-sm btn-outline-primary"
+                                                    onClick={() => setEditingCategory(category)}
+                                                >
+                                                    <i className="bi bi-pencil"></i>
+                                                </button>
+                                                <button 
+                                                    className="btn btn-sm btn-outline-danger"
+                                                    onClick={() => handleDelete(category.id)}
+                                                >
+                                                    <i className="bi bi-trash"></i>
+                                                </button>
+                                            </>
+                                        )}
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {filteredCategories.length === 0 && (
+                <div className="text-center text-muted p-5">
+                    <i className="bi bi-tags display-4"></i>
+                    <p className="mt-3">
+                        {searchTerm 
+                            ? 'Keine Kategorien gefunden'
+                            : 'Keine Kategorien vorhanden'}
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CategoryManager;
+window.CategoryManager = CategoryManager; // <-- Diese Zeile ans Ende setzen

static/components/StatsVisualization.js

@@ -0,0 +1,435 @@
+import React, { useState, useEffect } from 'react';
+import { LineChart, Line, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
+
+const StatsVisualization = () => {
+  const [stats, setStats] = useState(null);
+  const [storageStats, setStorageStats] = useState(null);
+
+  useEffect(() => {
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const fetchStats = async () => {
+    try {
+      const [statsResponse, storageResponse] = await Promise.all([
+        fetch('/backend/image-stats'),
+        fetch('/backend/storage-stats')
+      ]);
+      
+      const statsData = await statsResponse.json();
+      const storageData = await storageResponse.json();
+      
+      setStats(statsData);
+      setStorageStats(storageData);
+    } catch (error) {
+      console.error('Fehler beim Laden der Statistiken:', error);
+    }
+  };
+
+  if (!stats || !storageStats) return <div>Lade Statistiken...</div>;
+
+  return (
+    <div className="container-fluid p-4">
+      <div className="row g-4">
+        {/* Monatliche Bilderzahl */}
+        <div className="col-12">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">Bilder pro Monat</h5>
+              <div style={{ height: '300px' }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={stats.monthly}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="month" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Line 
+                      type="monotone" 
+                      dataKey="count" 
+                      stroke="#8884d8" 
+                      name="Anzahl Bilder"
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Album & Kategorie Verteilung */}
+        <div className="col-md-6">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">Alben Verteilung</h5>
+              <div style={{ height: '300px' }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={[
+                        { name: 'In Album', value: stats.albums.with },
+                        { name: 'Ohne Album', value: stats.albums.without }
+                      ]}
+                      cx="50%"
+                      cy="50%"
+                      labelLine={false}
+                      label={({name, percent}) => `${name}: ${(percent * 100).toFixed(0)}%`}
+                      outerRadius={80}
+                      fill="#8884d8"
+                      dataKey="value"
+                    >
+                      {stats.albums.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                      ))}
+                    </Pie>
+                    <Tooltip />
+                    <Legend />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-md-6">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">Kategorie Verteilung</h5>
+              <div style={{ height: '300px' }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={[
+                        { name: 'Mit Kategorie', value: stats.categories.with },
+                        { name: 'Ohne Kategorie', value: stats.categories.without }
+                      ]}
+                      cx="50%"
+                      cy="50%"
+                      labelLine={false}
+                      label={({name, percent}) => `${name}: ${(percent * 100).toFixed(0)}%`}
+                      outerRadius={80}
+                      fill="#8884d8"
+                      dataKey="value"
+                    >
+                      {stats.categories.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                      ))}
+                    </Pie>
+                    <Tooltip />
+                    <Legend />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Speichernutzung nach Format */}
+        <div className="col-12">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">Speichernutzung nach Format</h5>
+              <div style={{ height: '300px' }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={storageStats}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="format" />
+                    <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
+                    <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
+                    <Tooltip />
+                    <Legend />
+                    <Bar yAxisId="left" dataKey="count" name="Anzahl" fill="#8884d8" />
+                    <Bar yAxisId="right" dataKey="sizeMB" name="Größe (MB)" fill="#82ca9d" />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatsVisualization;
+### END: stats-visualization.txt
+
+### START: stats-visualization-updated.txt
+import React, { useState, useEffect, useCallback } from 'react';
+import { API, APIHandler } from '@/api';
+import {
+    LineChart, Line, BarChart, Bar, PieChart, Pie,
+    XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+    ResponsiveContainer, Cell
+} from 'recharts';
+
+// Farbpalette für Charts
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
+
+const StatsVisualization = () => {
+    const [stats, setStats] = useState(null);
+    const [storageStats, setStorageStats] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [refreshInterval, setRefreshInterval] = useState(30000); // 30 Sekunden
+
+    // Daten laden
+    const fetchStats = useCallback(async () => {
+        try {
+            setLoading(true);
+            const [statsData, storageData] = await Promise.all([
+                APIHandler.get(API.statistics.images),
+                APIHandler.get(API.statistics.storage)
+            ]);
+            setStats(statsData);
+            setStorageStats(storageData);
+            setError(null);
+        } catch (err) {
+            setError('Fehler beim Laden der Statistiken: ' + err.message);
+            console.error('Fetch error:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // Auto-Refresh
+    useEffect(() => {
+        fetchStats();
+        if (refreshInterval > 0) {
+            const interval = setInterval(fetchStats, refreshInterval);
+            return () => clearInterval(interval);
+        }
+    }, [fetchStats, refreshInterval]);
+
+    // Format für Byte-Größen
+    const formatBytes = (bytes) => {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+
+    // Custom Tooltip für Charts
+    const CustomTooltip = ({ active, payload, label, valueFormatter }) => {
+        if (!active || !payload || !payload.length) return null;
+
+        return (
+            <div className="custom-tooltip bg-white p-3 rounded shadow">
+                <p className="label mb-2">{`${label}`}</p>
+                {payload.map((entry, index) => (
+                    <p key={index} style={{ color: entry.color }} className="mb-1">
+                        {`${entry.name}: ${valueFormatter ? valueFormatter(entry.value) : entry.value}`}
+                    </p>
+                ))}
+            </div>
+        );
+    };
+
+    if (loading) {
+        return (
+            <div className="d-flex justify-content-center p-5">
+                <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Laden...</span>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="alert alert-danger m-3" role="alert">
+                <h4 className="alert-heading">Fehler</h4>
+                <p>{error}</p>
+                <button 
+                    className="btn btn-outline-danger"
+                    onClick={fetchStats}
+                >
+                    Erneut versuchen
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container-fluid p-4">
+            {/* Toolbar */}
+            <div className="d-flex justify-content-between align-items-center mb-4">
+                <div className="btn-group">
+                    <button 
+                        className="btn btn-primary"
+                        onClick={fetchStats}
+                    >
+                        <i className="bi bi-arrow-clockwise"></i> Aktualisieren
+                    </button>
+                    <select 
+                        className="form-select"
+                        value={refreshInterval}
+                        onChange={(e) => setRefreshInterval(Number(e.target.value))}
+                    >
+                        <option value="0">Kein Auto-Refresh</option>
+                        <option value="15000">Alle 15 Sekunden</option>
+                        <option value="30000">Alle 30 Sekunden</option>
+                        <option value="60000">Jede Minute</option>
+                    </select>
+                </div>
+            </div>
+
+            <div className="row g-4">
+                {/* Monatliche Bilder */}
+                <div className="col-12">
+                    <div className="card">
+                        <div className="card-body">
+                            <h5 className="card-title">Bilder pro Monat</h5>
+                            <div style={{ height: '300px' }}>
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <LineChart data={stats?.monthly}>
+                                        <CartesianGrid strokeDasharray="3 3" />
+                                        <XAxis dataKey="month" />
+                                        <YAxis />
+                                        <Tooltip content={<CustomTooltip />} />
+                                        <Legend />
+                                        <Line 
+                                            type="monotone" 
+                                            dataKey="count" 
+                                            name="Anzahl Bilder"
+                                            stroke={COLORS[0]} 
+                                            strokeWidth={2}
+                                            dot={{ r: 4 }}
+                                            activeDot={{ r: 6 }}
+                                        />
+                                    </LineChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Album & Kategorie Verteilung */}
+                <div className="col-md-6">
+                    <div className="card">
+                        <div className="card-body">
+                            <h5 className="card-title">Album Verteilung</h5>
+                            <div style={{ height: '300px' }}>
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <PieChart>
+                                        <Pie
+                                            data={[
+                                                { name: 'In Alben', value: stats?.albums.with },
+                                                { name: 'Ohne Album', value: stats?.albums.without }
+                                            ]}
+                                            cx="50%"
+                                            cy="50%"
+                                            labelLine={false}
+                                            label={({name, percent}) => 
+                                                `${name}: ${(percent * 100).toFixed(1)}%`
+                                            }
+                                            outerRadius={80}
+                                            fill="#8884d8"
+                                            dataKey="value"
+                                        >
+                                            {stats?.albums.map((entry, index) => (
+                                                <Cell 
+                                                    key={`cell-${index}`} 
+                                                    fill={COLORS[index % COLORS.length]} 
+                                                />
+                                            ))}
+                                        </Pie>
+                                        <Tooltip content={<CustomTooltip />} />
+                                        <Legend />
+                                    </PieChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-md-6">
+                    <div className="card">
+                        <div className="card-body">
+                            <h5 className="card-title">Kategorie Verteilung</h5>
+                            <div style={{ height: '300px' }}>
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <PieChart>
+                                        <Pie
+                                            data={[
+                                                { name: 'Mit Kategorie', value: stats?.categories.with },
+                                                { name: 'Ohne Kategorie', value: stats?.categories.without }
+                                            ]}
+                                            cx="50%"
+                                            cy="50%"
+                                            labelLine={false}
+                                            label={({name, percent}) => 
+                                                `${name}: ${(percent * 100).toFixed(1)}%`
+                                            }
+                                            outerRadius={80}
+                                            fill="#8884d8"
+                                            dataKey="value"
+                                        >
+                                            {stats?.categories.map((entry, index) => (
+                                                <Cell 
+                                                    key={`cell-${index}`} 
+                                                    fill={COLORS[index % COLORS.length]} 
+                                                />
+                                            ))}
+                                        </Pie>
+                                        <Tooltip content={<CustomTooltip />} />
+                                        <Legend />
+                                    </PieChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Speichernutzung */}
+                <div className="col-12">
+                    <div className="card">
+                        <div className="card-body">
+                            <h5 className="card-title">Speichernutzung nach Format</h5>
+                            <div style={{ height: '300px' }}>
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <BarChart data={storageStats}>
+                                        <CartesianGrid strokeDasharray="3 3" />
+                                        <XAxis dataKey="format" />
+                                        <YAxis 
+                                            yAxisId="left" 
+                                            orientation="left" 
+                                            stroke={COLORS[0]}
+                                        />
+                                        <YAxis 
+                                            yAxisId="right" 
+                                            orientation="right" 
+                                            stroke={COLORS[1]}
+                                        />
+                                        <Tooltip content={<CustomTooltip valueFormatter={formatBytes} />} />
+                                        <Legend />
+                                        <Bar 
+                                            yAxisId="left" 
+                                            dataKey="count" 
+                                            name="Anzahl" 
+                                            fill={COLORS[0]} 
+                                        />
+                                        <Bar 
+                                            yAxisId="right" 
+                                            dataKey="size" 
+                                            name="Größe" 
+                                            fill={COLORS[1]} 
+                                        />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StatsVisualization;
+window.StatsVisualization = StatsVisualization; // <-- Diese Zeile ans Ende setzen

static/components/api.js

@@ -0,0 +1,67 @@
+// static/components/api.js
+export const API = {
+    albums: {
+        list: '/albums', // Vermutung basierend auf AlbumManager.js
+        create: '/create_album',
+        delete: (id) => `/delete_album/${id}`,
+        update: (id) => `/update_album/${id}`,
+    },
+    categories: {
+        list: '/categories', // Vermutung basierend auf CategoryManager.js
+        create: '/create_category',
+        delete: (id) => `/delete_category/${id}`,
+        update: (id) => `/update_category/${id}`,
+        merge: '/categories/merge'
+    },
+    statistics: {
+        images: '/backend/stats',
+        storage: '/backend/stats'
+    }
+};
+
+export const APIHandler = {
+    get: async (url) => {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    post: async (url, data) => {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    put: async (url, data) => {
+        //PUT hinzufügen
+        const response = await fetch(url, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    },
+    delete: async (url) => {
+        const response = await fetch(url, {
+            method: 'DELETE'
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    }
+};

static/components/statistic.js

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const refreshButton = document.getElementById('refreshButton');
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const newAlbumButton = document.getElementById('newAlbumButton');
+    const createAlbumButton = document.getElementById('createAlbumButton');
+    const albumTable = document.getElementById('albumTable').querySelector('tbody'); // tbody auswählen
+    const albumPageSizeSelect = document.getElementById('albumPageSize');
+    const selectAllAlbumsCheckbox = document.getElementById('selectAllAlbums');
+
+    // Mock-Daten (ersetzen durch echte Daten vom Backend)
+    let albums = JSON.parse(localStorage.getItem('albums')) || [
+        { id: 1, name: 'Urlaub 2022', images: 120, created: '2022-08-15' },
+        { id: 2, name: 'Familienfeier', images: 85, created: '2023-01-20' },
+    ];
+
+    function saveAlbumsToLocalStorage() {
+        localStorage.setItem('albums', JSON.stringify(albums));
+    }
+
+    function renderAlbums() {
+        albumTable.innerHTML = ''; // Tabelle leeren
+        albums.forEach(album => {
+            const row = albumTable.insertRow();
+            row.innerHTML = `
+                <td><input type="checkbox" class="form-check-input item-checkbox" data-type="album" data-id="${album.id}"></td>
+                <td>${album.name}</td>
+                <td>${album.images}</td>
+                <td>${album.created}</td>
+                <td><button class="btn btn-danger btn-sm delete-album" data-id="${album.id}"><i class="bi bi-trash"></i></button></td>
+            `;
+        });
+        addDeleteAlbumEventListeners();
+    }
+
+    function addDeleteAlbumEventListeners(){
+        document.querySelectorAll('.delete-album').forEach(button => {
+            button.addEventListener('click', () => {
+                const idToDelete = parseInt(button.dataset.id);
+                albums = albums.filter(album => album.id !== idToDelete);
+                saveAlbumsToLocalStorage();
+                renderAlbums();
+            });
+        });
+    }
+
+    function showToast(title, message, type = 'info') {
+        const toast = document.getElementById('toast');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+
+        toast.classList.remove('bg-success', 'bg-danger', 'bg-info');
+        toast.classList.add(`bg-${type}`);
+        toastTitle.textContent = title;
+        toastMessage.textContent = message;
+
+        const bsToast = new bootstrap.Toast(toast);
+        bsToast.show();
+    }
+
+    refreshButton.addEventListener('click', () => {
+        // Hier würde normalerweise der Datenabruf vom Backend erfolgen
+        showToast('Info', 'Daten wurden simuliert aktualisiert.', 'info');
+        renderAlbums();
+    });
+
+    darkModeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+        localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
+    });
+
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.body.classList.add('dark-mode');
+    }
+
+    newAlbumButton.addEventListener('click', () => {
+        const newAlbumModal = new bootstrap.Modal(document.getElementById('newAlbumModal'));
+        newAlbumModal.show();
+    });
+
+    createAlbumButton.addEventListener('click', () => {
+        const albumName = document.getElementById('albumName').value;
+        const albumDescription = document.getElementById('albumDescription').value;
+        if (albumName.trim() === '') {
+            showToast("Fehler", "Bitte geben Sie einen Album Namen ein", "danger")
+            return;
+        }
+
+        const newAlbum = {
+            id: albums.length + 1, // Provisorische ID
+            name: albumName,
+            images: 0,
+            created: new Date().toISOString().slice(0, 10),
+        };
+        albums.push(newAlbum);
+        saveAlbumsToLocalStorage();
+        renderAlbums();
+        document.getElementById('newAlbumForm').reset();
+        bootstrap.Modal.getInstance(document.getElementById('newAlbumModal')).hide();
+        showToast('Erfolg', 'Album erfolgreich erstellt.', 'success');
+    });
+
+    selectAllAlbumsCheckbox.addEventListener('change', () => {
+        const itemCheckboxes = document.querySelectorAll(`.item-checkbox[data-type="album"]`);
+        itemCheckboxes.forEach(item => item.checked = selectAllAlbumsCheckbox.checked);
+    });
+
+    renderAlbums();
+});

static/script.js

@@ -0,0 +1,761 @@
+// 1. Logger-Klasse
+class Logger {
+    static isDebugMode = false;
+
+    static debug(message, data = null) {
+        if (this.isDebugMode) {
+            console.log(`[Debug] ${message}`, data || '');
+        }
+    }
+
+    static error(message, error = null) {
+        console.error(`[Error] ${message}`, error || '');
+    }
+
+    static initializeDebugMode() {
+        try {
+            const urlParams = new URLSearchParams(window.location.search);
+            this.isDebugMode = urlParams.has('debug');
+        } catch (error) {
+            console.error('Fehler beim Initialisieren des Debug-Modus:', error);
+            this.isDebugMode = false;
+        }
+    }
+}
+
+// 2. Utils
+const utils = {
+    showLoading() {
+        if (document.body) {
+            document.body.classList.add('loading');
+            Logger.debug('Loading-Status aktiviert');
+        } else {
+            Logger.error('document.body nicht verfügbar');
+        }
+    },
+
+    hideLoading() {
+        if (document.body) {
+            document.body.classList.remove('loading');
+            Logger.debug('Loading-Status deaktiviert');
+        } else {
+            Logger.error('document.body nicht verfügbar');
+        }
+    },
+
+    safeGetElement(id) {
+        const element = document.getElementById(id);
+        if (!element) {
+            Logger.error(`Element mit ID '${id}' nicht gefunden`);
+            return null;
+        }
+        return element;
+    },
+
+    async withLoading(asyncFn) {
+        try {
+            this.showLoading();
+            await asyncFn();
+        } finally {
+            this.hideLoading();
+        }
+    }
+};
+
+// In der ImageModal-Klasse:
+class ImageModal {
+    constructor() {
+        this.modal = null;
+        this.modalImg = null;
+        this.currentImageIndex = 0;
+        this.selectedImages = [];
+        this.initialize();
+    }
+
+    initialize() {
+        if (typeof bootstrap === 'undefined') {
+            Logger.error('Bootstrap ist nicht verfügbar');
+            return;
+        }
+
+        const modalElement = utils.safeGetElement('imageModal');
+        if (!modalElement) return;
+
+        this.modal = new bootstrap.Modal(modalElement);
+        this.modalImg = utils.safeGetElement('modalImage');
+
+        // Event-Listener für Modal-Schließen
+        modalElement.addEventListener('hidden.bs.modal', () => {
+            this.cleanupModal();
+        });
+
+        // Klick-Handler für Modal-Container
+        const imageContainer = document.querySelector('.image-container');
+        if (imageContainer && this.modalImg) {
+            imageContainer.addEventListener('click', (e) => {
+                if (e.target === this.modalImg) {
+                    this.hide();
+                }
+            });
+        }
+
+        // Event-Listener für Tastendruck (Pfeiltasten)
+        document.addEventListener('keydown', (event) => {
+            if (this.modal && this.modal._isShown) { // Modal muss geöffnet sein
+                if (event.key === 'ArrowLeft') {
+                    event.stopPropagation(); // Verhindere Standardverhalten und Bubbling
+                    this.showPreviousImage();
+                } else if (event.key === 'ArrowRight') {
+                    event.stopPropagation(); // Verhindere Standardverhalten und Bubbling
+                    this.showNextImage();
+                }
+            }
+        });
+
+        // Download-Button Handler
+        const downloadBtn = utils.safeGetElement('modalDownloadBtn');
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', async () => {
+                const filename = this.modalImg?.dataset?.filename;
+                if (filename) {
+                    await this.downloadImage(filename);
+                } else {
+                    Logger.error('Kein Dateiname für Download verfügbar');
+                }
+            });
+        }
+    }
+
+    async downloadImage(filename) {
+        await utils.withLoading(async () => {
+            try {
+                const response = await fetch(`/flux-pics/${filename}`); // Direkt über StaticFiles
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } catch (error) {
+                Logger.error('Download-Fehler:', error);
+                alert('Ein Fehler ist beim Download aufgetreten: ' + error.message);
+            }
+        });
+    }
+
+    open(img, selectedImages = []) {
+        if (!this.modal || !this.modalImg) {
+            Logger.error('Modal nicht korrekt initialisiert');
+            return;
+        }
+
+        Logger.debug('Öffne Bild-Modal', img);
+
+        // Setze die ausgewählten Bilder und den Index des aktuellen Bildes
+        this.selectedImages = selectedImages;
+        this.currentImageIndex = this.selectedImages.indexOf(img.dataset.filename);
+
+        this.modalImg.src = img.src;
+        this.modalImg.dataset.filename = img.dataset.filename;
+
+        const metadataFields = ['format', 'timestamp', 'album', 'category', 'prompt', 'optimized_prompt'];
+        metadataFields.forEach(field => {
+            const element = utils.safeGetElement(`modal${field.charAt(0).toUpperCase() + field.slice(1)}`);
+            if (element) {
+                element.textContent = img.dataset[field] || 'Nicht verfügbar';
+            }
+        });
+
+        // Füge einen Event-Listener hinzu, um den Fokus auf das Modal zu setzen,
+        // nachdem es vollständig angezeigt wurde (shown.bs.modal)
+        this.modal._element.addEventListener('shown.bs.modal', () => {
+            this.modal._element.focus();
+        });
+
+        this.modal.show();
+    }
+
+    hide() {
+        this.modal?.hide();
+    }
+
+    cleanupModal() {
+        document.body.classList.remove('modal-open');
+        const backdrop = document.querySelector('.modal-backdrop');
+        if (backdrop) {
+            backdrop.remove();
+        }
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+    }
+
+    showPreviousImage() {
+        if (this.currentImageIndex > 0) {
+            this.currentImageIndex--;
+            this.updateModalImage();
+        }
+    }
+
+    showNextImage() {
+        if (this.currentImageIndex < this.selectedImages.length - 1) {
+            this.currentImageIndex++;
+            this.updateModalImage();
+        }
+    }
+
+    updateModalImage() {
+        const filename = this.selectedImages[this.currentImageIndex];
+        const imgElement = document.querySelector(`.image-thumbnail[data-filename="${filename}"]`);
+
+        if (imgElement) {
+            this.modalImg.src = imgElement.src;
+            this.modalImg.dataset.filename = filename;
+
+            // Metadaten aktualisieren
+            const metadataFields = ['format', 'timestamp', 'album', 'category', 'prompt', 'optimized_prompt'];
+            metadataFields.forEach(field => {
+                const element = utils.safeGetElement(`modal${field.charAt(0).toUpperCase() + field.slice(1)}`);
+                if (element) {
+                    element.textContent = imgElement.dataset[field] || 'Nicht verfügbar';
+                }
+            });
+        } else {
+            Logger.error('Bild-Element für Dateiname nicht gefunden:', filename);
+        }
+    }
+}
+
+class GalleryManager {
+    constructor() {
+        this.selectedImages = new Set();
+        this.imageModal = new ImageModal();
+        this.initialize();
+    }
+
+    initialize() {
+        this.initializeSelectionHandling();
+        this.initializeGalleryViews();
+        this.initializeDownloadHandling();
+    }
+
+    initializeSelectionHandling() {
+        // "Alle auswählen" Funktionalität
+        const selectAllCheckbox = utils.safeGetElement('selectAll');
+        if (selectAllCheckbox) {
+            selectAllCheckbox.addEventListener('change', () => {
+                const itemCheckboxes = document.querySelectorAll('.select-item');
+                itemCheckboxes.forEach(checkbox => {
+                    checkbox.checked = selectAllCheckbox.checked;
+                    this.updateSelectedImages(checkbox);
+                });
+            });
+        }
+
+        // Einzelne Bildauswahl
+        document.querySelectorAll('.select-item').forEach(checkbox => {
+            checkbox.addEventListener('change', () => this.updateSelectedImages(checkbox));
+        });
+    }
+
+    updateSelectedImages(checkbox) {
+        const card = checkbox.closest('.card');
+        if (!card) return;
+
+        const img = card.querySelector('img');
+        if (!img || !img.dataset.filename) {
+            Logger.error('Ungültiges Bild-Element in der Karte');
+            return;
+        }
+
+        if (checkbox.checked) {
+            this.selectedImages.add(img.dataset.filename);
+        } else {
+            this.selectedImages.delete(img.dataset.filename);
+        }
+
+        Logger.debug(`Ausgewählte Bilder aktualisiert: ${this.selectedImages.size} Bilder`);
+    }
+
+    getSelectedImages() {
+        return Array.from(this.selectedImages);
+    }
+
+    initializeGalleryViews() {
+        // Thumbnail-Galerie
+        const thumbGalleryBtn = utils.safeGetElement('thumbgalleryBtn');
+        if (thumbGalleryBtn) {
+            thumbGalleryBtn.addEventListener('click', () => this.openThumbnailGallery());
+        }
+
+        // Grid Layout
+        const gridLayout = utils.safeGetElement('gridLayout');
+        if (gridLayout) {
+            gridLayout.addEventListener('change', () => this.updateGridLayout(gridLayout.value));
+        }
+
+        // Bild-Thumbnails
+        document.querySelectorAll('.image-thumbnail').forEach(img => {
+            img.addEventListener('click', () => this.imageModal.open(img));
+        });
+    }
+
+    async openThumbnailGallery() {
+        const selectedImages = this.getSelectedImages();
+        if (selectedImages.length === 0) {
+            alert('Keine Bilder ausgewählt.');
+            return;
+        }
+
+        const galleryModal = new bootstrap.Modal(utils.safeGetElement('thumbGalleryModal'));
+        const container = utils.safeGetElement('thumbGalleryContainer');
+        if (!container) return;
+
+        container.innerHTML = '';
+
+        selectedImages.forEach(filename => {
+            const thumbContainer = this.createThumbnailElement(filename);
+            if (thumbContainer) {
+                container.appendChild(thumbContainer);
+            }
+        });
+
+        galleryModal.show();
+    }
+
+    createThumbnailElement(filename) {
+        const container = document.createElement('div');
+        container.className = 'thumb-container m-2';
+
+        const img = document.createElement('img');
+        img.src = `/flux-pics/${filename}`;
+        img.className = 'img-thumbnail thumbnail-img';
+        img.dataset.filename = filename;
+        img.style.maxWidth = '150px';
+        img.style.cursor = 'pointer';
+
+        const downloadBtn = document.createElement('button');
+        downloadBtn.className = 'btn btn-sm btn-primary download-thumb';
+        downloadBtn.innerHTML = '<i class="fas fa-download"></i>';
+
+        // Event-Listener
+        img.addEventListener('click', () => this.imageModal.open(img));
+        downloadBtn.addEventListener('click', async () => {
+            await this.imageModal.downloadImage(filename);
+        });
+
+        container.appendChild(img);
+        container.appendChild(downloadBtn);
+
+        return container;
+    }
+
+    updateGridLayout(columns) {
+        const imageGrid = utils.safeGetElement('imageGrid');
+        if (imageGrid) {
+            const validColumns = Math.max(1, Math.min(6, parseInt(columns) || 3));
+            imageGrid.className = `row row-cols-1 row-cols-md-${validColumns}`;
+            Logger.debug(`Grid-Layout aktualisiert: ${validColumns} Spalten`);
+        }
+    }
+
+    initializeDownloadHandling() {
+        const downloadBtn = utils.safeGetElement('downloadSelected');
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', () => this.handleBulkDownload());
+        }
+    }
+
+    async handleBulkDownload() {
+        const selectedImages = this.getSelectedImages();
+        if (selectedImages.length === 0) {
+            alert('Keine Bilder ausgewählt.');
+            return;
+        }
+
+        const useZip = selectedImages.length > 1 && 
+            confirm('Möchten Sie die Bilder als ZIP-Datei herunterladen?\nKlicken Sie "OK" für ZIP oder "Abbrechen" für Einzeldownloads.');
+
+        await utils.withLoading(async () => {
+            try {
+                if (useZip) {
+                    await this.downloadAsZip(selectedImages);
+                } else {
+                    await this.downloadIndividually(selectedImages);
+                }
+                /*alert('Download erfolgreich abgeschlossen.');*/
+            } catch (error) {
+                Logger.error('Bulk-Download Fehler:', error);
+                alert('Ein Fehler ist aufgetreten: ' + error.message);
+            }
+        });
+    }
+
+    async downloadAsZip(files) {
+        const response = await fetch('/flux-pics', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ selectedImages: files })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = 'images.zip';
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+    }
+
+    async downloadIndividually(files) {
+        for (const filename of files) {
+            await this.imageModal.downloadImage(filename);
+            // Kleine Pause zwischen Downloads
+            await new Promise(resolve => setTimeout(resolve, 500));
+        }
+    }
+}
+// Slideshow-Verwaltung
+// In der SlideshowManager-Klasse:
+class SlideshowManager {
+    constructor(gallery) {
+        if (!gallery) {
+            Logger.error('GalleryManager ist erforderlich');
+            throw new Error('GalleryManager ist erforderlich');
+        }
+        this.gallery = gallery;
+        this.slideInterval = 3000;
+        this.currentSlideIndex = 0;
+        this.slideshowInterval = null;
+        this.carousel = null;
+        this.slideshowModal = null;
+
+        // Initialisierung direkt im Konstruktor
+        const slideshowBtn = utils.safeGetElement('slideshowBtn');
+        if (slideshowBtn) {
+            slideshowBtn.addEventListener('click', () => this.openSlideshow());
+        }
+    }
+
+    async openSlideshow() {
+        const selectedImages = this.gallery.getSelectedImages();
+        if (selectedImages.length === 0) {
+            alert('Keine Bilder ausgewählt.');
+            return;
+        }
+
+        const modalElement = utils.safeGetElement('slideshowModal');
+        if (!modalElement) return;
+
+        this.slideshowModal = new bootstrap.Modal(modalElement);
+        const container = utils.safeGetElement('slideshowContainer');
+        if (!container) return;
+
+        container.innerHTML = '';
+        this.createSlides(container, selectedImages);
+
+        const carouselElement = utils.safeGetElement('carouselExampleControls');
+        if (carouselElement) {
+            this.carousel = new bootstrap.Carousel(carouselElement, {
+                interval: false
+            });
+        }
+
+        // Event-Listener für Modal-Schließen
+        modalElement.addEventListener('hidden.bs.modal', () => {
+            this.cleanupSlideshow();
+        });
+
+        this.setupSlideshowControls();
+        this.slideshowModal.show();
+    }
+
+    createSlides(container, images) {
+        images.forEach((filename, index) => {
+            const div = document.createElement('div');
+            div.classList.add('carousel-item');
+            if (index === 0) div.classList.add('active');
+
+            const img = document.createElement('img');
+            img.src = `/flux-pics/${filename}`;
+            img.classList.add('d-block', 'w-100');
+            img.dataset.filename = filename;
+            img.onerror = () => {
+                Logger.error(`Fehler beim Laden des Bildes: ${filename}`);
+                // Optional: Anstelle des Bildes ein Placeholder-Element anzeigen
+                const errorPlaceholder = document.createElement('div');
+                errorPlaceholder.classList.add('error-placeholder');
+                errorPlaceholder.textContent = `Fehler beim Laden des Bildes: ${filename}`;
+                div.replaceChild(errorPlaceholder, img);
+            };
+
+            div.appendChild(img);
+            container.appendChild(div);
+        });
+    }
+
+    setupSlideshowControls() {
+        const playBtn = utils.safeGetElement('playSlideshow');
+        const pauseBtn = utils.safeGetElement('pauseSlideshow');
+
+        if (playBtn && pauseBtn) {
+            playBtn.addEventListener('click', () => this.startSlideshow());
+            pauseBtn.addEventListener('click', () => this.pauseSlideshow());
+        }
+
+        const fullscreenBtn = utils.safeGetElement('fullscreenBtn');
+        if (fullscreenBtn) {
+            fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
+        }
+
+        const downloadBtn = utils.safeGetElement('downloadCurrentSlide');
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', () => this.downloadCurrentSlide());
+        }
+    }
+
+    startSlideshow() {
+        if (!this.carousel) return;
+
+        this.slideshowInterval = setInterval(() => {
+            this.carousel.next();
+        }, this.slideInterval);
+
+        const playBtn = utils.safeGetElement('playSlideshow');
+        const pauseBtn = utils.safeGetElement('pauseSlideshow');
+        if (playBtn && pauseBtn) {
+            playBtn.style.display = 'none';
+            pauseBtn.style.display = 'block';
+        }
+    }
+
+    pauseSlideshow() {
+        if (this.slideshowInterval) {
+            clearInterval(this.slideshowInterval);
+            this.slideshowInterval = null;
+        }
+
+        const playBtn = utils.safeGetElement('playSlideshow');
+        const pauseBtn = utils.safeGetElement('pauseSlideshow');
+        if (playBtn && pauseBtn) {
+            pauseBtn.style.display = 'none';
+            playBtn.style.display = 'block';
+        }
+    }
+
+    async toggleFullscreen() {
+        const modalElement = utils.safeGetElement('slideshowModal');
+        if (!modalElement) return;
+
+        try {
+            if (!document.fullscreenElement) {
+                if (modalElement.requestFullscreen) {
+                    await modalElement.requestFullscreen();
+                } else if (modalElement.webkitRequestFullscreen) {
+                    await modalElement.webkitRequestFullscreen();
+                } else if (modalElement.msRequestFullscreen) {
+                    await modalElement.msRequestFullscreen();
+                }
+            } else {
+                if (document.exitFullscreen) {
+                    await document.exitFullscreen();
+                }
+            }
+        } catch (error) {
+            Logger.error('Vollbild-Fehler:', error);
+        }
+    }
+
+    async downloadCurrentSlide() {
+        const activeSlide = document.querySelector('.carousel-item.active img');
+        if (activeSlide?.dataset?.filename) {
+            try {
+                const filename = activeSlide.dataset.filename;
+                const response = await fetch(`/flux-pics/${filename}`);
+
+                if (!response.ok) {
+                    throw new Error(`Fehler beim Herunterladen des Bildes: ${response.status} ${response.statusText}`);
+                }
+
+                const blob = await response.blob();
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = filename;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(link.href);
+
+            } catch (error) {
+                Logger.error('Fehler beim Herunterladen des Bildes:', error);
+            }
+        } else {
+            Logger.error('Kein aktives Bild gefunden');
+        }
+    }
+
+    cleanupSlideshow() {
+        this.pauseSlideshow();
+        
+        document.body.classList.remove('modal-open');
+        const backdrop = document.querySelector('.modal-backdrop');
+        if (backdrop) {
+            backdrop.remove();
+        }
+        
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        
+        if (document.fullscreenElement) {
+            document.exitFullscreen().catch(err => {
+                Logger.error('Fehler beim Beenden des Vollbildmodus:', err);
+            });
+        }
+    }
+}
+// 3. AppInitializer-Klasse
+class AppInitializer {
+    constructor() {
+        this.gallery = null;
+        this.slideshow = null;
+    }
+
+	initialize() {
+		try {
+			Logger.initializeDebugMode();
+			
+			document.addEventListener('DOMContentLoaded', () => {
+				try {
+					this.initializeComponents();
+					this.setupGlobalEventListeners();
+					Logger.debug('Anwendung erfolgreich initialisiert');
+					
+					// >>> Ab hier Deine zusätzlichen Funktionen:
+					// -----------------------------------------------------
+					
+					// 1) "Alles auswählen" (nur falls du es separat brauchst):
+					const selectAllCheckbox = document.getElementById('selectAll');
+					if (selectAllCheckbox) {
+						selectAllCheckbox.addEventListener('change', function() {
+							const checkboxes = document.querySelectorAll('.select-item');
+							checkboxes.forEach(cb => {
+								cb.checked = selectAllCheckbox.checked;
+							});
+						});
+					}
+	
+					// 2) Items-per-page-Select: Bei Änderung URL manipulieren und Seite neuladen
+					const itemsPerPageSelect = document.getElementById('itemsPerPageSelect');
+					if (itemsPerPageSelect) {
+						itemsPerPageSelect.addEventListener('change', function() {
+							const newVal = this.value;
+							// Aktuelle URL analysieren
+							const url = new URL(window.location.href);
+	
+							// items_per_page setzen
+							url.searchParams.set('items_per_page', newVal);
+	
+							// Page zurücksetzen (falls "page" existiert)
+							url.searchParams.delete('page');
+	
+							// Seite neuladen
+							window.location.href = url.toString();
+						});
+					}
+	
+					// -----------------------------------------------------
+					// >>> Ende deiner zusätzlichen Funktionen
+					
+				} catch (error) {
+					Logger.error('Fehler bei der Initialisierung:', error);
+					alert('Es gab ein Problem beim Laden der Anwendung. Bitte laden Sie die Seite neu.');
+				}
+			});
+		} catch (error) {
+			console.error('Kritischer Fehler bei der Initialisierung:', error);
+		}
+	}
+
+
+    initializeComponents() {
+        try {
+            this.gallery = new GalleryManager();
+            this.slideshow = new SlideshowManager(this.gallery);
+            Logger.debug('Komponenten initialisiert');
+        } catch (error) {
+            Logger.error('Fehler bei der Komponenten-Initialisierung:', error);
+            throw error;
+        }
+    }
+
+    setupGlobalEventListeners() {
+        try {
+            this.setupScrollToTop();
+            this.setupKeyboardNavigation();
+            Logger.debug('Globale Event-Listener eingerichtet');
+        } catch (error) {
+            Logger.error('Fehler beim Einrichten der Event-Listener:', error);
+            throw error;
+        }
+    }
+
+    setupScrollToTop() {
+        const scrollTopBtn = utils.safeGetElement('scrollTopBtn');
+        if (scrollTopBtn) {
+            window.addEventListener('scroll', () => {
+                scrollTopBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
+            });
+
+            scrollTopBtn.addEventListener('click', () => {
+                window.scrollTo({ 
+                    top: 0, 
+                    behavior: 'smooth' 
+                });
+            });
+        }
+    }
+
+    setupKeyboardNavigation() {
+        document.addEventListener('keydown', (e) => this.handleKeyboardNavigation(e));
+    }
+
+    handleKeyboardNavigation(e) {
+        if (e.key === 'Escape') {
+            this.closeAllModals();
+        }
+    }
+
+
+
+    checkBootstrapAvailability() {
+        if (typeof bootstrap === 'undefined') {
+            Logger.error('Bootstrap ist nicht verfügbar');
+            return false;
+        }
+        return true;
+    }
+}
+
+// 4. Anwendung starten
+try {
+    const app = new AppInitializer();
+    app.initialize();
+} catch (error) {
+    console.error('Kritischer Fehler beim Erstellen der Anwendung:', error);
+}

static/statistic.js

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const refreshButton = document.getElementById('refreshButton');
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const newAlbumButton = document.getElementById('newAlbumButton');
+    const createAlbumButton = document.getElementById('createAlbumButton');
+    const albumTable = document.getElementById('albumTable').querySelector('tbody'); // tbody auswählen
+    const albumPageSizeSelect = document.getElementById('albumPageSize');
+    const selectAllAlbumsCheckbox = document.getElementById('selectAllAlbums');
+
+    // Mock-Daten (ersetzen durch echte Daten vom Backend)
+    let albums = JSON.parse(localStorage.getItem('albums')) || [
+        { id: 1, name: 'Urlaub 2022', images: 120, created: '2022-08-15' },
+        { id: 2, name: 'Familienfeier', images: 85, created: '2023-01-20' },
+    ];
+
+    function saveAlbumsToLocalStorage() {
+        localStorage.setItem('albums', JSON.stringify(albums));
+    }
+
+    function renderAlbums() {
+        albumTable.innerHTML = ''; // Tabelle leeren
+        albums.forEach(album => {
+            const row = albumTable.insertRow();
+            row.innerHTML = `
+                <td><input type="checkbox" class="form-check-input item-checkbox" data-type="album" data-id="${album.id}"></td>
+                <td>${album.name}</td>
+                <td>${album.images}</td>
+                <td>${album.created}</td>
+                <td><button class="btn btn-danger btn-sm delete-album" data-id="${album.id}"><i class="bi bi-trash"></i></button></td>
+            `;
+        });
+        addDeleteAlbumEventListeners();
+    }
+
+    function addDeleteAlbumEventListeners(){
+        document.querySelectorAll('.delete-album').forEach(button => {
+            button.addEventListener('click', () => {
+                const idToDelete = parseInt(button.dataset.id);
+                albums = albums.filter(album => album.id !== idToDelete);
+                saveAlbumsToLocalStorage();
+                renderAlbums();
+            });
+        });
+    }
+
+    function showToast(title, message, type = 'info') {
+        const toast = document.getElementById('toast');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+
+        toast.classList.remove('bg-success', 'bg-danger', 'bg-info');
+        toast.classList.add(`bg-${type}`);
+        toastTitle.textContent = title;
+        toastMessage.textContent = message;
+
+        const bsToast = new bootstrap.Toast(toast);
+        bsToast.show();
+    }
+
+    refreshButton.addEventListener('click', () => {
+        // Hier würde normalerweise der Datenabruf vom Backend erfolgen
+        showToast('Info', 'Daten wurden simuliert aktualisiert.', 'info');
+        renderAlbums();
+    });
+
+    darkModeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+        localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
+    });
+
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.body.classList.add('dark-mode');
+    }
+
+    newAlbumButton.addEventListener('click', () => {
+        const newAlbumModal = new bootstrap.Modal(document.getElementById('newAlbumModal'));
+        newAlbumModal.show();
+    });
+
+    createAlbumButton.addEventListener('click', () => {
+        const albumName = document.getElementById('albumName').value;
+        const albumDescription = document.getElementById('albumDescription').value;
+        if (albumName.trim() === '') {
+            showToast("Fehler", "Bitte geben Sie einen Album Namen ein", "danger")
+            return;
+        }
+
+        const newAlbum = {
+            id: albums.length + 1, // Provisorische ID
+            name: albumName,
+            images: 0,
+            created: new Date().toISOString().slice(0, 10),
+        };
+        albums.push(newAlbum);
+        saveAlbumsToLocalStorage();
+        renderAlbums();
+        document.getElementById('newAlbumForm').reset();
+        bootstrap.Modal.getInstance(document.getElementById('newAlbumModal')).hide();
+        showToast('Erfolg', 'Album erfolgreich erstellt.', 'success');
+    });
+
+    selectAllAlbumsCheckbox.addEventListener('change', () => {
+        const itemCheckboxes = document.querySelectorAll(`.item-checkbox[data-type="album"]`);
+        itemCheckboxes.forEach(item => item.checked = selectAllAlbumsCheckbox.checked);
+    });
+
+    renderAlbums();
+});

static/style.css

@@ -0,0 +1,376 @@
+:root {
+  /* Farben */
+  --primary-color: #007bff; /* Hauptfarbe (Blau) */
+  --secondary-color: #6c757d; /* Sekundärfarbe (Grau) */
+  --success-color: #28a745; /* Erfolgsfarbe (Grün) */
+  --error-color: #dc3545; /* Fehlerfarbe (Rot) */
+  --info-color: #17a2b8; /* Info-Farbe (Hellblau) */
+  --light-gray: #f8f9fa; /* Helles Grau für Hintergründe */
+  --medium-gray: #ced4da; /* Mittleres Grau für Rahmen */
+  --dark-gray: #333; /* Dunkles Grau für Text */
+  --body-bg-color: #f4f4f4;
+  --text-color: #333;
+  --blink-text-color: #2eb82e;
+
+  /* Typografie */
+  --base-font-size: 1rem;
+  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+  /* Abstände */
+  --base-padding: 10px;
+  --base-margin: 10px;
+
+  /* Rahmen */
+  --border-radius: 5px;
+
+  /* Schatten */
+  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  /* Transparenz */
+  --base-opacity: 0.8;
+}
+
+/* Grundlegende Styles */
+body {
+    font-family: var(--font-family);
+	background-image: url('bg.webp');
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-attachment: fixed;
+    /* background-color: var(--body-bg-color); */
+    color: var(--text-color);
+    margin: 0;
+    padding: 0;
+    font-size: var(--base-font-size);
+}
+
+.container {
+    max-width: 1200px;
+    margin: auto;
+    padding: 20px;
+}
+
+/* Header- und Navigationsbereich */
+.banner img {
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+
+.nav-buttons a {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: var(--base-padding) calc(var(--base-padding) * 2);
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: var(--border-radius);
+    transition: background-color 0.3s ease;
+}
+
+.nav-buttons a:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 40%, black);
+}
+
+/* Formulare */
+.custom-bg {
+  background-color: var(--light-gray);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: var(--base-padding);
+}
+
+.form-label {
+    font-weight: 600;
+}
+
+.form-control {
+    border-radius: var(--border-radius);
+    border: 1px solid var(--medium-gray);
+    padding: var(--base-padding);
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-primary:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 40%, black);
+    border-color: color-mix(in srgb, var(--primary-color) 40%, black);
+}
+
+.btn-secondary {
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
+.btn-secondary:hover {
+  background-color: color-mix(in srgb, var(--secondary-color) 40%, black);
+  border-color: color-mix(in srgb, var(--secondary-color) 40%, black);
+}
+
+/* Akkordeon */
+.accordion-button {
+    font-weight: bold;
+}
+
+.accordion-button:not(.collapsed) {
+    color: var(--primary-color);
+}
+
+/* Fortschrittsnachricht */
+#progressMessage {
+    background-color: rgb(40 167 69 / 10%); /* Leicht transparentes Grün */
+    border: 1px solid rgb(40 167 69 / 80%); /* Passender Rahmen */
+    color: var(--blink-text-color);
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    font-weight: bold;
+    text-align: center;
+    animation: blink 1.5s infinite;
+    margin-top: 1rem;
+}
+
+/* Blinken-Animation */
+@keyframes blink {
+    0% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 1; }
+}
+/* Fortschrittsbalken */
+#progressContainer {
+    height: 30px;
+    background-color: var(--light-gray); /* Hintergrund des Containers */
+    border-radius: var(--border-radius); /* Abgerundete Ecken */
+    overflow: hidden; /* Versteckt den Fortschrittsbalken, der über den Container hinausragt */
+}
+
+#progressBar {
+    background-color: var(--success-color);
+    height: 100%; /* Füllt die Höhe des Containers */
+    line-height: 30px; /* Vertikal zentriert den Text */
+    color: white;
+    text-align: center; /* Horizontal zentriert den Text */
+    transition: width 0.4s ease-in-out; /* Sanfter Übergang für die Breite */
+}
+
+/* Bilder und Galerie */
+#output img {
+    margin-bottom: var(--base-margin);
+    border-radius: var(--border-radius);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.image-thumbnail {
+    border-radius: var(--border-radius);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+    cursor: pointer;
+}
+
+.image-thumbnail:hover {
+    transform: scale(1.05);
+}
+
+.thumbnail-img {
+    transition: transform 0.3s ease;
+    cursor: pointer;
+}
+
+.thumbnail-img:hover {
+    transform: scale(1.05);
+}
+
+/* Karten */
+.card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+
+/* Modal */
+.modal-content {
+    border-radius: var(--border-radius);
+}
+
+.modal-header {
+    background-color: var(--light-gray);
+}
+
+/* Toolbars */
+.toolbar {
+    background-color: white;
+    padding: var(--base-padding);
+    border: 1px solid var(--medium-gray);
+    border-radius: var(--border-radius);
+    margin-bottom: calc(var(--base-margin) * 2);
+    display: flex;
+    align-items: center;
+    gap: var(--base-margin);
+}
+
+/* Auswahl-Checkboxes */
+.select-item {
+    cursor: pointer;
+}
+
+/* "Nach oben"-Button */
+#scrollTopBtn {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: var(--base-opacity);
+}
+
+#scrollTopBtn:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* "Nach oben"-Pfeil */
+#scrollTopBtn img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}
+
+/* Benachrichtigungs-Container */
+.notification {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--base-padding) calc(var(--base-padding) * 2);
+    border: 1px solid var(--medium-gray);
+    z-index: 1000;
+    border-radius: var(--border-radius);
+    color: white;
+    font-weight: bold;
+    opacity: var(--base-opacity);
+}
+
+.notification.success {
+    background-color: var(--success-color);
+}
+
+.notification.error {
+    background-color: var(--error-color);
+}
+
+.notification.info {
+    background-color: var(--info-color);
+}
+
+/* Slideshow */
+.carousel-item img {
+    max-height: 85vh;
+    object-fit: contain;
+}
+
+.btn-primary, .btn-secondary {
+    padding: 8px 16px;
+    font-size: 0.9rem;
+    border-radius: var(--border-radius);
+}
+
+/* Zusätzliche Anpassungen für Slideshow */
+.slideshow-modal .modal-content {
+    background-color: #333;
+    color: #fff;
+}
+
+.slideshow-modal .modal-header {
+    border-bottom: 1px solid #666;
+}
+
+.slideshow-modal .modal-footer {
+    border-top: 1px solid #666;
+}
+
+.slideshow-modal .btn-close {
+    background-color: #fff;
+}
+
+.btn-sm {
+    padding: 5px 10px;
+    font-size: 0.8rem;
+}
+
+.btn-group .btn {
+    margin-right: 5px;
+}
+
+#albumStats {
+	max-width: 100%;
+	width: 100%;
+	height: auto;
+}
+
+#categoryStats {
+	max-width: 100%;
+	width: 100%;
+}
+
+#playSlideshow, #pauseSlideshow {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+}
+
+#playSlideshow i, #pauseSlideshow i {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+
+#playSlideshow:hover i, #pauseSlideshow:hover i {
+    color: color-mix(in srgb, var(--primary-color) 40%, black);
+}
+
+/* Hover-Effekte für Download-Buttons */
+.download-thumb:hover,
+.btn:hover {
+    opacity: 1;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.download-thumb {
+    transition: all 0.3s ease;
+    opacity: var(--base-opacity);
+}
+
+.btn {
+    transition: all 0.3s ease;
+}
+
+.modal-body {
+  text-align: center;
+}
+
+.error-placeholder {
+  color: var(--error-color);
+  font-weight: bold;
+  margin-top: var(--base-margin);
+}
+
+.blink-text {
+  animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}

templates/archive.html

@@ -0,0 +1,577 @@
+{% extends "base.html" %}
+
+{% block title %}Flux Bildarchiv{% endblock %}
+
+{% block content %}
+
+<div class="container-fluid bg-light p-4 rounded shadow-sm">
+	<!-- Suche -->
+	<div class="mb-3 search-container">
+		<form id="searchForm" action="/archive" method="get" class="d-flex flex-column">
+			<div class="mb-3 w-100">
+				<label for="search" class="form-label">Suche:</label>
+				<input 
+					type="text" 
+					class="form-control" 
+					id="search" 
+					name="search" 
+					value="{{ search_query }}"
+				>
+			</div>
+			<div class="d-flex flex-wrap mt-3">
+				<button type="submit" class="btn btn-primary flex-fill" style="width: 33.33%;">Suchen</button>
+				<button type="reset" class="btn btn-secondary flex-fill ms-2" style="width: 33.33%;">Zurücksetzen</button>
+			</div>
+		</form>
+	</div>
+	
+	<!-- Filter Accordion -->
+	
+	<!-- Archiv Anzeige -->
+	<!-- Archiv Anzeige -->
+	<div id="archive" class="container-fluid"><div id="archive" class="container">
+		<div class="accordion" id="filterAccordion">
+			<div class="accordion-item">
+				<h2 class="accordion-header" id="headingOne">
+					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+						Filter- und Anzeigeoptionen
+					</button>
+				</h2>
+				<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
+					<div class="accordion-body">
+						<!-- Filterformular -->
+						<form id="filterForm" action="/archive" method="get" class="d-flex flex-wrap gap-3 align-items-center">
+							<div class="mb-3 flex-grow-1">
+								<label for="album_filter" class="form-label">Album:</label>
+								<select class="form-control" id="album_filter" name="album">
+									<option value="">Alle</option>
+									{% for album in albums %}
+										<option value="{{ album[0] }}" {% if album[0] == selected_album %}selected{% endif %}>{{ album[1] }}</option>
+									{% endfor %}
+								</select>
+							</div>
+							<div class="mb-3 flex-grow-1">
+								<label for="category_filter" class="form-label">Kategorie:</label>
+								<select class="form-control" id="category_filter" name="category" multiple>
+									<option value="">Alle</option>
+									{% for category in categories %}
+										<option value="{{ category[0] }}" {% if category[0] in selected_categories %}selected{% endif %}>{{ category[1] }}</option>
+									{% endfor %}
+								</select>
+							</div>
+							<button type="submit" class="btn btn-primary flex-fill">Filtern</button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="tollbarAll" class="toolbar">
+			<button id="thumbgalleryBtn" class="btn btn-secondary">Thumbgallery</button>
+			<button id="slideshowBtn" class="btn btn-secondary">Slideshow</button>
+			<select id="gridLayout" class="form-select">
+				<option value="2">2 Bilder</option>
+				<option value="3" selected>3 Bilder</option>
+				<option value="4">4 Bilder</option>
+				<option value="5">5 Bilder</option>
+				<option value="6">6 Bilder</option>
+			</select>
+			<div class="dropdown">
+				<button class="btn btn-secondary dropdown-toggle" type="button" id="actionMenu" data-bs-toggle="dropdown" aria-expanded="false">
+					Optionen
+				</button>
+				<ul class="dropdown-menu" aria-labelledby="actionMenu">
+					<li><a class="dropdown-item" href="#" id="deleteSelected">Löschen</a></li>
+					<li><a class="dropdown-item" href="#" id="addToCategory">Zu Kategorie hinzufügen</a></li>
+					<li><a class="dropdown-item" href="#" id="addToAlbum">Zu Album hinzufügen</a></li>
+					<li><a class="dropdown-item" href="#" id="downloadSelected">Aktuelle Auswahl downloaden</a></li>
+				</ul>
+			</div>
+		</div>
+		<div class="d-flex justify-content-between align-items-center mb-3 mt-3">
+			<!-- Links: Checkbox "Alles auswählen" -->
+			<div class="d-flex align-items-center">
+				<input type="checkbox" id="selectAll" />
+				<label for="selectAll" class="ms-1 mb-0">Alles auswählen</label>
+			</div>
+			
+			<!-- Rechts: Items-per-page-Auswahl -->
+			<div  class="d-flex align-items-center">
+				<label for="itemsPerPageSelect" class="me-2 mb-0">Bilder pro Seite:</label>
+				<select id="itemsPerPageSelect" class="form-select form-select-sm" style="width: auto;">
+					<option value="15"  {% if items_per_page == 15  %}selected{% endif %}>15</option>
+					<option value="30"  {% if items_per_page == 30  %}selected{% endif %}>30</option>
+					<option value="50"  {% if items_per_page == 50  %}selected{% endif %}>50</option>
+					<option value="75"  {% if items_per_page == 75  %}selected{% endif %}>75</option>
+					<option value="100" {% if items_per_page == 100 %}selected{% endif %}>100</option>
+				</select>
+			</div>
+		</div>
+	</div>
+		<!-- Bildgrid -->
+		<div class="row row-cols-3" id="imageGrid">
+			{% for log in logs %}
+				<div class="col mb-3">
+					<div class="card custom-bg">
+						<div class="card-body p-0 position-relative">
+							<img src="{{ log.output_file }}" 
+								class="img-fluid image-thumbnail" 
+								alt="Generiertes Bild" 
+								data-id="{{ log.id }}" 
+								data-filename="{{ log.output_file.split('/')[-1] }}" 
+								data-format="{{ log.output_file.split('.')[-1] }}" 
+								data-timestamp="{{ log.timestamp }}" 
+								data-album="{{ log.album }}" 
+								data-category="{{ log.category }}" 
+								data-prompt="{{ log.prompt }}" 
+								data-optimized_prompt="{{ log.optimized_prompt }}">
+							<input type="checkbox" class="form-check-input select-item position-absolute top-0 end-0 m-2">
+						</div>
+					</div>
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+</div>
+
+<!-- Paginierung -->
+<div class="d-flex justify-content-center mt-4">
+    {% if page > 1 %}
+        <a class="btn btn-secondary me-2" href="?page={{ page - 1 }}&items_per_page={{ items_per_page }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_album %}&album={{ selected_album }}{% endif %}{% if selected_categories %}&category={{ selected_categories | join(',') }}{% endif %}">Vorherige Seite</a>
+    {% endif %}
+    {% if logs|length == items_per_page %}
+        <a class="btn btn-secondary" href="?page={{ page + 1 }}&items_per_page={{ items_per_page }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_album %}&album={{ selected_album }}{% endif %}{% if selected_categories %}&category={{ selected_categories | join(',') }}{% endif %}">Nächste Seite</a>
+    {% endif %}
+</div>
+
+<button id="scrollTopBtn" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; background: transparent;">
+    <img src="/static/arrow-up1.png" alt="Nach oben" style="width: 50px; height: 50px;">
+</button>
+
+<!-- "Nach oben"-Button -->
+<!-- <button id="scrollTopBtn" class="btn btn-primary" style="display: none; position: fixed; bottom: 20px; right: 20px; width: 100px; z-index: 99;">
+    Nach oben
+</button> -->
+
+<!-- Bild-Detail Modal -->
+<div id="imageModal" class="modal fade" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="imageModalLabel">Bilddetails</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
+            </div>
+            <div class="modal-body">
+                <div class="image-container" style="cursor: pointer;">
+                    <img id="modalImage" src="" class="img-fluid mb-3" alt="Bild">
+                </div>
+                <div class="image-details">
+                    <p><strong>Dateiname:</strong> <span id="modalFilename"></span></p>
+                    <p><strong>Bildformat:</strong> <span id="modalFormat"></span></p>
+                    <p><strong>Datum:</strong> <span id="modalTimestamp"></span></p>
+                    <p><strong>Album:</strong> <span id="modalAlbum"></span></p>
+                    <p><strong>Kategorie:</strong> <span id="modalCategory"></span></p>
+                    <p><strong>Eingabeaufforderung:</strong> <span id="modalPrompt"></span></p>
+                    <p><strong>Optimierte Eingabeaufforderung:</strong> <span id="modalOptimizedPrompt"></span></p>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" id="modalDownloadBtn">
+                    <i class="fas fa-download"></i> Download
+                </button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Thumbnail-Galerie Modal -->
+<div id="thumbGalleryModal" class="modal fade" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Thumbnail-Galerie</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div id="thumbGalleryContainer" class="d-flex flex-wrap justify-content-center">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Slideshow Modal -->
+<div id="slideshowModal" class="modal fade" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Diashow</h5>
+                <div class="btn-group ms-auto me-2">
+                    <button class="btn btn-primary btn-sm" id="playSlideshow">
+                        <i class="fas fa-play"></i>
+                    </button>
+                    <button class="btn btn-primary btn-sm" id="pauseSlideshow" style="display: none;">
+                        <i class="fas fa-pause"></i>
+                    </button>
+                    <button class="btn btn-primary btn-sm" id="fullscreenBtn">
+                        <i class="fas fa-expand"></i>
+                    </button>
+                    <button class="btn btn-primary btn-sm" id="downloadCurrentSlide">
+                        <i class="fas fa-download"></i>
+                    </button>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div id="carouselExampleControls" class="carousel slide" data-bs-interval="false">
+                    <div id="slideshowContainer" class="carousel-inner"></div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Vorherige</span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Nächste</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal für Zuweisung zu Album/Kategorie -->
+<div id="assignAlbumModal" class="modal fade" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Zu Album hinzufügen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <select class="form-control" id="albumSelect">
+                    {% for album in albums %}
+                        <option value="{{ album[0] }}">{{ album[1] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-primary" id="assignAlbumBtn">Hinzufügen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="assignCategoryModal" class="modal fade" tabindex="-1">
+   <div class="modal-dialog">
+       <div class="modal-content">
+           <div class="modal-header">
+               <h5 class="modal-title">Zu Kategorie hinzufügen</h5>
+               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+           </div>
+           <div class="modal-body">
+               <select class="form-control" id="categorySelect" multiple>
+                   {% for category in categories %}
+                       <option value="{{ category[0] }}">{{ category[1] }}</option>
+                   {% endfor %}
+               </select>
+           </div>
+           <div class="modal-footer">
+               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+               <button type="button" class="btn btn-primary" id="assignCategoryBtn">Hinzufügen</button>
+           </div>
+       </div>
+   </div>
+</div>
+
+<!-- CSS Styles -->
+<style>
+.image-container {
+   position: relative;
+   text-align: center;
+   max-height: 80vh;
+   overflow: auto;
+}
+
+.image-container img {
+   max-width: 100%;
+   height: auto;
+   transition: transform 0.2s;
+}
+
+.image-container img:hover {
+   transform: scale(1.02);
+}
+
+.thumb-container {
+   position: relative;
+   display: inline-block;
+}
+
+.download-thumb {
+   position: absolute;
+   bottom: 5px;
+   right: 5px;
+   opacity: 0;
+   transition: opacity 0.3s;
+}
+
+.thumb-container:hover .download-thumb {
+   opacity: 1;
+}
+
+.carousel-item img {
+   max-height: 80vh;
+   object-fit: contain;
+}
+
+#slideshowModal.fullscreen .modal-dialog {
+   max-width: 100%;
+   margin: 0;
+   height: 100vh;
+}
+
+#slideshowModal.fullscreen .modal-content {
+   height: 100%;
+   border: none;
+   border-radius: 0;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+   width: 10%;
+   opacity: 0;
+   transition: opacity 0.3s;
+}
+
+.carousel:hover .carousel-control-prev,
+.carousel:hover .carousel-control-next {
+   opacity: 0.5;
+}
+
+.modal-dialog {
+   max-width: 90vw;
+   margin: 1.75rem auto;
+}
+
+.image-details {
+   margin-top: 1rem;
+   padding: 1rem;
+   background-color: rgba(0,0,0,0.02);
+   border-radius: 4px;
+}
+
+.modal-footer {
+   justify-content: space-between;
+}
+
+.container-fluid.bg-light {
+    background-color: rgba(248, 249, 250, 0.8) !important; /* 50% Transparenz */
+}
+
+/* Für Geräte mit einer maximalen Breite von 768px (Tablets und kleiner) */
+@media (max-width: 768px) {
+  #tollbarAll {
+     display: none;
+  }
+  
+  #imageGrid {
+    display: grid;
+    grid-template-columns: 1fr; /* 1 Bild pro Reihe */
+    gap: 15px; /* Abstand zwischen Bildern */
+  }
+
+  /* Bildkarten auf volle Breite skalieren */
+  .card {
+    width: 100%; /* Volle Breite */
+    margin: 0 auto;
+  }
+
+  .card img {
+    width: 100%; /* Bild nimmt gesamte Breite der Karte ein */
+    height: auto;
+  }
+}
+
+
+</style>
+
+<!-- {% block scripts %}
+<script src="/static/script.js"></script>
+{% endblock %} -->
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    // Hilfsfunktion für Einzelbild-Download
+    async function downloadSingleImage(filename) {
+        try {
+            const response = await fetch(`/flux-pics/${filename}`);
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Server Error:', errorText);
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Fehler beim Download:', error);
+            alert('Ein Fehler ist aufgetreten: ' + error.message);
+        }
+    }
+
+    // Funktion zur automatischen Anpassung des Layouts für mobile Geräte
+    function updateLayoutForMobile() {
+        const gridLayout = document.getElementById('gridLayout');
+        const imageGrid = document.getElementById('imageGrid');
+        if (window.innerWidth <= 768) {
+            gridLayout.value = 1; // Ein Bild pro Zeile auf mobilen Geräten
+            imageGrid.className = 'row row-cols-1';
+        } else {
+            const columns = parseInt(gridLayout.value);
+            imageGrid.className = `row row-cols-1 row-cols-md-${columns}`;
+        }
+    }
+
+    // Initiale Layout-Anpassung
+    updateLayoutForMobile();
+
+    // Event Listener für Fenstergrößenänderung (Responsive Verhalten)
+    window.addEventListener('resize', updateLayoutForMobile);
+
+    // Event Listener für Grid Layout
+    document.getElementById('gridLayout').addEventListener('change', function () {
+        const columns = parseInt(this.value);
+        const imageGrid = document.getElementById('imageGrid');
+        imageGrid.className = `row row-cols-1 row-cols-md-${columns}`;
+    });
+
+    // Funktion zur Öffnung des Bilddetails-Modals
+    function openImageModal(img) {
+        const modal = new bootstrap.Modal(document.getElementById('imageModal'));
+        const modalImg = document.getElementById('modalImage');
+        const filename = img.dataset.filename;
+
+        modalImg.src = img.src;
+        document.getElementById('modalFilename').textContent = filename;
+        document.getElementById('modalFormat').textContent = img.dataset.format;
+        document.getElementById('modalTimestamp').textContent = img.dataset.timestamp;
+        document.getElementById('modalAlbum').textContent = img.dataset.album;
+        document.getElementById('modalCategory').textContent = img.dataset.category;
+        document.getElementById('modalPrompt').textContent = img.dataset.prompt;
+        document.getElementById('modalOptimizedPrompt').textContent = img.dataset.optimized_prompt;
+
+        modal.show();
+    }
+
+    document.querySelectorAll('.image-thumbnail').forEach(function (img) {
+        img.addEventListener('click', function () {
+            openImageModal(this);
+        });
+    });
+
+    // Funktion für die "Alle auswählen"-Checkbox
+    const selectAllCheckbox = document.getElementById('selectAll');
+    const itemCheckboxes = document.querySelectorAll('.select-item');
+    selectAllCheckbox.addEventListener('change', function () {
+        itemCheckboxes.forEach(checkbox => {
+            checkbox.checked = selectAllCheckbox.checked;
+        });
+    });
+
+    // Funktion zum Sammeln ausgewählter Bilder
+    function getSelectedImages() {
+        const selectedImages = [];
+        document.querySelectorAll('.select-item:checked').forEach(checkbox => {
+            const img = checkbox.closest('.card').querySelector('img');
+            if (img && img.dataset.filename) {
+                selectedImages.push(img.dataset.filename);
+            }
+        });
+        return selectedImages;
+    }
+
+    // Download der ausgewählten Bilder
+    document.getElementById('downloadSelected').addEventListener('click', async function () {
+        const selectedImages = getSelectedImages();
+        if (selectedImages.length === 0) {
+            alert('Keine Bilder ausgewählt.');
+            return;
+        }
+
+        let downloadType = 'single';
+        if (selectedImages.length > 1) {
+            const choice = confirm('Möchten Sie die Bilder als ZIP-Datei herunterladen? Klicken Sie "OK" für ZIP oder "Abbrechen" für Einzeldownloads.');
+            if (choice) {
+                downloadType = 'zip';
+            }
+        }
+
+        try {
+            if (downloadType === 'zip') {
+                const response = await fetch('/flux-pics', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ selectedImages })
+                });
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('Server Error:', errorText);
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                a.download = 'images.zip';
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+            } else {
+                for (const filename of selectedImages) {
+                    await downloadSingleImage(filename);
+                }
+            }
+            alert('Download erfolgreich abgeschlossen.');
+        } catch (error) {
+            console.error('Fehler beim Downloaden:', error);
+            alert('Ein Fehler ist aufgetreten: ' + error.message);
+        }
+    });
+
+    // Automatisches Aktualisieren der Bilder pro Seite
+    const itemsPerPageSelect = document.getElementById('itemsPerPageSelect');
+    if (itemsPerPageSelect) {
+        itemsPerPageSelect.addEventListener('change', function () {
+            const form = document.getElementById('generateForm');
+            if (form) {
+                form.submit();
+            }
+        });
+    }
+
+    // "Nach oben"-Button
+    const scrollTopBtn = document.getElementById('scrollTopBtn');
+    window.addEventListener('scroll', function () {
+        scrollTopBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
+    });
+
+    scrollTopBtn.addEventListener('click', function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+});
+</script>
+
+{% endblock %}

templates/backend.html

@@ -0,0 +1,581 @@
+{% extends "base.html" %}
+
+{% block title %}Backend Verwaltung{% endblock %}
+
+{% block head %}
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
+<style>
+.hoverable-row:hover {
+    background-color: rgba(0,0,0,0.05);
+    cursor: pointer;
+}
+.card {
+    transition: transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+.stat-card {
+    border-radius: 10px;
+    border: none;
+    background: linear-gradient(45deg, #3498db, #2980b9);
+    color: white;
+}
+.stat-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+.stat-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+.action-button {
+    transition: all 0.2s;
+}
+.action-button:hover {
+    transform: scale(1.05);
+}
+.toast-container {
+    z-index: 1051;
+}
+.chart-container {
+    position: relative;
+    margin: 20px 0;
+    height: 300px;
+}
+.loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<form id="generateForm" class="needs-validation custom-bg p-3 rounded" novalidate>
+  <div class="container-fluid py-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div class="btn-group">
+            <button class="btn btn-primary" onclick="refreshData()">
+                <i class="bi bi-arrow-clockwise"></i> Aktualisieren
+            </button>
+			<button class="btn btn-secondary" onclick="toggleDarkMode()">
+				<i class="bi bi-moon"></i> Dark Mode
+			</button>
+        </div>
+    </div>
+
+    <!-- Quick Stats Row -->
+    <div class="row mb-4">
+        <div class="col-md-3">
+            <div class="card stat-card mb-3">
+                <div class="card-body text-center">
+                    <i class="bi bi-images stat-icon"></i>
+                    <div class="stat-value" id="totalImages">0</div>
+                    <div class="stat-label">Gesamt Bilder</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card stat-card mb-3">
+                <div class="card-body text-center">
+                    <i class="bi bi-folder stat-icon"></i>
+                    <div class="stat-value" id="totalAlbums">0</div>
+                    <div class="stat-label">Alben</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card stat-card mb-3">
+                <div class="card-body text-center">
+                    <i class="bi bi-tags stat-icon"></i>
+                    <div class="stat-value" id="totalCategories">0</div>
+                    <div class="stat-label">Kategorien</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card stat-card mb-3">
+                <div class="card-body text-center">
+                    <i class="bi bi-hdd stat-icon"></i>
+                    <div class="stat-value" id="storageUsage">0 MB</div>
+                    <div class="stat-label">Speicherplatz</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="row">
+        <!-- Album Management -->
+        <div id="albumStats" class="col-12 col-lg-6 mb-4">
+            <div class="card h-100">
+                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Album Verwaltung</h5>
+                    <button class="btn btn-light btn-sm" onclick="showNewAlbumModal()">
+                        <i class="bi bi-plus-lg"></i> Neu
+                    </button>
+                </div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-hover" id="albumTable">
+                            <thead>
+                                <tr>
+                                    <th>
+                                        <input type="checkbox" class="form-check-input" id="selectAllAlbums">
+                                    </th>
+                                    <th>Name</th>
+                                    <th>Bilder</th>
+                                    <th>Erstellt</th>
+                                    <th>Aktionen</th>
+                                </tr>
+                            </thead>
+								<tr>
+								  <td>
+									<div class="album-list d-flex flex-wrap">
+										{% for album in albums %}
+											<div class="album-item p-2">
+												{{ album[1] }}
+											</div>
+										{% endfor %}
+									</div>
+								  </td>
+								</tr>
+                        </table>
+                    </div>
+                    <div id="albumPagination" class="d-flex justify-content-between align-items-center mt-3">
+                        <div class="d-flex align-items-center">
+                            <select class="form-select me-2" id="albumPageSize">
+                                <option value="10">10</option>
+                                <option value="25">25</option>
+                                <option value="50">50</option>
+                            </select>
+                            <span>Einträge pro Seite</span>
+                        </div>
+                        <nav>
+                            <ul class="pagination mb-0">
+                                <!-- Pagination will be inserted here -->
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Category Management -->
+        <div id="categoryStats" class="col-12 col-lg-6 mb-4">
+            <div class="card h-100">
+                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Kategorie Verwaltung</h5>
+                    <button class="btn btn-light btn-sm" onclick="showNewCategoryModal()">
+                        <i class="bi bi-plus-lg"></i> Neu
+                    </button>
+                </div>
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-hover" id="categoryTable">
+                            <thead>
+                                <tr>
+                                    <th>
+                                        <input type="checkbox" class="form-check-input" id="selectAllCategories">
+                                    </th>
+                                    <th>Name</th>
+                                    <th>Bilder</th>
+                                    <th>Erstellt</th>
+                                    <th>Aktionen</th>
+                                </tr>
+                            </thead>
+                            <tbody id="categoryList">
+                                <!-- Category rows will be inserted here -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div id="categoryPagination" class="d-flex justify-content-between align-items-center mt-3">
+                        <div class="d-flex align-items-center">
+                            <select class="form-select me-2" id="categoryPageSize">
+                                <option value="10">10</option>
+                                <option value="25">25</option>
+                                <option value="50">50</option>
+                            </select>
+                            <span>Einträge pro Seite</span>
+                        </div>
+                        <nav>
+                            <ul class="pagination mb-0">
+                                <!-- Pagination will be inserted here -->
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+ </div>
+</form>
+    <!-- Statistics Row -->
+    <!-- <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header bg-primary text-white">
+                    <h5 class="mb-0">Statistiken</h5>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="chart-container">
+                                <canvas id="monthlyStats"></canvas>
+                                <div class="loader" id="monthlyStatsLoader">
+                                    <div class="spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Laden...</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="chart-container">
+                                <canvas id="categoryStats"></canvas>
+                                <div class="loader" id="categoryStatsLoader">
+                                    <div class="spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Laden...</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mt-4">
+                        <div class="col-md-12">
+                            <div class="chart-container">
+                                <canvas id="storageStats"></canvas>
+                                <div class="loader" id="storageStatsLoader">
+                                    <div class="spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Laden...</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> 
+  </div> -->
+
+<!-- Modals -->
+<!-- New Album Modal -->
+<div class="modal fade" id="newAlbumModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Neues Album erstellen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="newAlbumForm">
+                    <div class="mb-3">
+                        <label for="albumName" class="form-label">Album Name</label>
+                        <input type="text" class="form-control" id="albumName" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="albumDescription" class="form-label">Beschreibung (optional)</label>
+                        <textarea class="form-control" id="albumDescription" rows="3"></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-primary" onclick="createAlbum()">Erstellen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- New Category Modal -->
+<div class="modal fade" id="newCategoryModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Neue Kategorie erstellen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="newCategoryForm">
+                    <div class="mb-3">
+                        <label for="categoryName" class="form-label">Kategorie Name</label>
+                        <input type="text" class="form-control" id="categoryName" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="categoryDescription" class="form-label">Beschreibung (optional)</label>
+                        <textarea class="form-control" id="categoryDescription" rows="3"></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-primary" onclick="createCategory()">Erstellen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Löschen bestätigen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Möchten Sie <span id="deleteItemName"></span> wirklich löschen?</p>
+                <p class="text-danger">Diese Aktion kann nicht rückgängig gemacht werden!</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="button" class="btn btn-danger" onclick="confirmDelete()">Löschen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Bulk Action Modal -->
+<div class="modal fade" id="bulkActionModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Massenbearbeitung</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Ausgewählte Elemente: <span id="selectedCount">0</span></p>
+                <div class="list-group">
+                    <button type="button" class="list-group-item list-group-item-action" onclick="bulkDelete()">
+                        <i class="bi bi-trash"></i> Alle löschen
+                    </button>
+                    <button type="button" class="list-group-item list-group-item-action" onclick="mergeSelected()">
+                        <i class="bi bi-arrow-join"></i> Zusammenführen
+                    </button>
+                    <button type="button" class="list-group-item list-group-item-action" onclick="exportSelected()">
+                        <i class="bi bi-download"></i> Exportieren
+                    </button>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Toast Container -->
+<!-- <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <i class="bi bi-info-circle me-2"></i>
+            <strong class="me-auto" id="toastTitle"></strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" id="toastMessage"></div>
+    </div>
+</div> -->
+{% endblock %}
+
+{% block scripts %}
+<!-- Chart.js für Statistiken -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<!-- Backend Manager Script -->
+<script src="/static/backend.js"></script>
+
+<!-- React Components -->
+<script type="module">
+    import AlbumManager from '/static/components/AlbumManager.js';
+    import CategoryManager from '/static/components/CategoryManager.js';
+    import StatsVisualization from '/static/components/StatsVisualization.js';
+
+    // React Components initialisieren
+    ReactDOM.createRoot(document.getElementById('albumManagerRoot')).render(
+        React.createElement(AlbumManager)
+    );
+
+    ReactDOM.createRoot(document.getElementById('categoryManagerRoot')).render(
+        React.createElement(CategoryManager)
+    );
+
+    ReactDOM.createRoot(document.getElementById('statsRoot')).render(
+        React.createElement(StatsVisualization)
+    );
+</script>
+
+<!-- Inline Script für zusätzliche Funktionalität -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Dark Mode Toggle
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', function() {
+            document.body.classList.toggle('dark-mode');
+            localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
+        });
+
+        // Dark Mode aus localStorage wiederherstellen
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.body.classList.add('dark-mode');
+        }
+    }
+
+    // Toast Funktionalität
+    window.showToast = function(title, message, type = 'info') {
+        const toast = document.getElementById('toast');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+        
+        toast.classList.remove('bg-success', 'bg-danger', 'bg-info');
+        toast.classList.add(`bg-${type}`);
+        toastTitle.textContent = title;
+        toastMessage.textContent = message;
+        
+        const bsToast = new bootstrap.Toast(toast);
+        bsToast.show();
+    };
+
+    // Pagination Event Listener
+    document.querySelectorAll('.page-link').forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            const page = this.getAttribute('data-page');
+            loadPage(page);
+        });
+    });
+
+    // Items per Page Event Listener
+    document.querySelectorAll('.items-per-page').forEach(select => {
+        select.addEventListener('change', function() {
+            loadPage(1);
+        });
+    });
+
+    // Select All Checkboxes
+    document.querySelectorAll('.select-all').forEach(checkbox => {
+        checkbox.addEventListener('change', function() {
+            const itemCheckboxes = document.querySelectorAll(
+                `.item-checkbox[data-type="${this.dataset.type}"]`
+            );
+            itemCheckboxes.forEach(item => item.checked = this.checked);
+            updateBulkActionButton();
+        });
+    });
+
+    // Bulk Action Button Update
+    function updateBulkActionButton() {
+        const selectedCount = document.querySelectorAll('.item-checkbox:checked').length;
+        const bulkActionBtn = document.getElementById('bulkActionBtn');
+        if (bulkActionBtn) {
+            bulkActionBtn.disabled = selectedCount === 0;
+            document.getElementById('selectedCount').textContent = selectedCount;
+        }
+    }
+
+    // Initial Load
+    loadPage(1);
+    updateStatistics();
+});
+
+// Refresh Funktionen
+async function refreshData() {
+    try {
+        await Promise.all([
+            loadPage(1),
+            updateStatistics()
+        ]);
+        showToast('Erfolg', 'Daten erfolgreich aktualisiert', 'success');
+    } catch (error) {
+        showToast('Fehler', 'Fehler beim Aktualisieren der Daten', 'danger');
+    }
+}
+
+// Statistik Aktualisierung
+async function updateStatistics() {
+    try {
+        const response = await fetch('/backend/stats');
+        const stats = await response.json();
+        
+        // Update Quick Stats
+        document.getElementById('totalImages').textContent = stats.total_images;
+        document.getElementById('totalAlbums').textContent = stats.albums.total;
+        document.getElementById('totalCategories').textContent = stats.categories.total;
+        document.getElementById('storageUsage').textContent = 
+            `${Math.round(stats.storage_usage_mb * 100) / 100} MB`;
+        
+        // Update Charts
+        updateCharts(stats);
+    } catch (error) {
+        console.error('Fehler beim Laden der Statistiken:', error);
+    }
+}
+
+// Chart Aktualisierung
+function updateCharts(stats) {
+    updateMonthlyChart(stats.monthly);
+    updateCategoryChart(stats.categories);
+    updateStorageChart(stats.storage);
+}
+
+function createChart(ctx, config) {
+    if (window.charts && window.charts[ctx.id]) {
+        window.charts[ctx.id].destroy();
+    }
+    window.charts = window.charts || {};
+    window.charts[ctx.id] = new Chart(ctx, config);
+}
+
+// Export Funktion
+async function exportSelected() {
+    const selectedIds = Array.from(document.querySelectorAll('.item-checkbox:checked'))
+        .map(cb => cb.dataset.id);
+    
+    if (selectedIds.length === 0) {
+        showToast('Warnung', 'Keine Elemente ausgewählt', 'warning');
+        return;
+    }
+
+    try {
+        const response = await fetch('/backend/export', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ids: selectedIds })
+        });
+
+        if (!response.ok) throw new Error('Export fehlgeschlagen');
+
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'export.csv';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+
+        showToast('Erfolg', 'Export erfolgreich', 'success');
+    } catch (error) {
+        showToast('Fehler', 'Export fehlgeschlagen', 'danger');
+    }
+}
+
+// Error Handler
+function handleError(error) {
+    console.error('Fehler:', error);
+    showToast('Fehler', error.message || 'Ein Fehler ist aufgetreten', 'danger');
+}
+</script>
+{% endblock %}

templates/base.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Flux Image Generator{% endblock %}</title>
+    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/style.css">
+    <style>
+        .custom-bg {
+            background-color: rgba(248, 249, 250, 0.8); /* Leicht abgehobenes Weiß mit 80% Deckkraft */
+        }
+        .nav-buttons {
+            width: 100%;
+        }
+        .nav-buttons .btn {
+            flex-grow: 1;
+            text-align: center;
+        }
+        .nav-buttons .btn + .btn {
+            margin-left: 0;
+        }
+    </style>
+    {% block head %}
+    <!-- Additional head elements can be added here -->
+    {% endblock %}
+</head>
+<body>
+    <div class="container">
+        <!-- Bannerbild -->
+        <div class="banner mb-3">
+            <img src="/static/banner.jpg" alt="Flux Image Generator Banner" class="img-fluid w-100">
+        </div>
+
+        <!-- Navigation Buttons -->
+        <div class="nav-buttons d-flex flex-wrap justify-content-between gap-2 mb-3">
+            <a href="/" class="btn btn-primary flex-fill text-center">Home</a>
+            <a href="/archive" class="btn btn-secondary flex-fill text-center">Archiv</a>
+            <a href="/backend" class="btn btn-secondary flex-fill text-center">Backend</a>
+        </div>
+        
+        {% block content %}
+        <!-- Main content will be injected here -->
+        {% endblock %}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    {% block scripts %}
+    <!-- Additional scripts can be added here -->
+    {% endblock %}
+</body>
+</html>

templates/index.html

@@ -0,0 +1,395 @@
+{% extends "base.html" %}
+
+{% block title %}Flux Image Generator - Home{% endblock %}
+
+{% block content %}
+<!-- <h1>Flux Image Generator</h1> -->
+
+<form id="generateForm" class="needs-validation custom-bg p-3 rounded" novalidate>
+    <!-- Prompt-Eingabe -->
+    <div class="mb-3">
+        <label for="prompt" class="form-label">Prompt:</label>
+        <textarea class="form-control" id="prompt" name="prompt" rows="4" required></textarea>
+        <div class="invalid-feedback">Bitte geben Sie einen Prompt ein.</div>
+    </div>
+    <!-- Fortschrittsanzeige -->
+    <div class="progress mb-3" id="progressContainer" style="display: none;">
+        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+
+    <!-- Fortschrittsnachricht -->
+	<div id="progressMessage" class="mb-3 blink-text" style="display: none;">
+		<p></h4>Generiere Bilder, bitte warten...</h4></p>
+	</div>
+    <!-- Album-Auswahl -->
+    <div class="mb-3">
+        <label for="album_id" class="form-label">Album:</label>
+        <input class="form-control" id="album_id" name="album_id" list="albums" placeholder="Wählen oder neues Album eingeben">
+        <datalist id="albums">
+            {% for album in albums %}
+                <option value="{{ album[1] }}">{{ album[0] }}</option>
+            {% endfor %}
+        </datalist>
+    </div>
+    <!-- Kategorie-Auswahl -->
+    <div class="mb-3">
+        <label for="category_id" class="form-label">Kategorie:</label>
+        <input class="form-control" id="category_id" name="category_id" list="categories" placeholder="Wählen oder neue Kategorie eingeben">
+        <datalist id="categories">
+            {% for category in categories %}
+                <option value="{{ category[1] }}">{{ category[0] }}</option>
+            {% endfor %}
+        </datalist>
+    </div>
+	<div class="btn-group d-flex flex-wrap">
+		<button type="button" class="btn btn-primary flex-fill mb-3" onclick="startGeneration()">ERSTELLEN</button>
+		<button type="button" class="btn btn-secondary flex-fill mb-3" onclick="optimizeOnly()">OPTIMIEREN</button>
+		<button type="button" class="btn btn-secondary flex-fill mb-3" onclick="copyPrompt()">ZURÜCKSETZEN</button>
+	</div>
+
+    <!-- 
+	Buttons zur Generierung und Optimierung 
+    <button type="button" class="btn btn-primary mb-3" onclick="startGeneration()">Bild Generieren</button>
+    <button type="button" class="btn btn-secondary mb-3" onclick="optimizeOnly()">Nur Optimieren</button>
+    <button type="button" class="btn btn-secondary mb-3" onclick="copyPrompt()">Prompt Kopieren</button>
+	-->
+    <!-- Erweiterte Einstellungen -->
+    <div class="accordion" id="advancedSettingsAccordion">
+        <div class="accordion-item custom-bg">
+            <h2 class="accordion-header" id="headingOne">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+                    Erweiterte Einstellungen
+                </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#advancedSettingsAccordion">
+                <div class="accordion-body">
+                    <div class="row g-3">
+                        <div class="col-12 col-md-6">
+                            <label for="num_outputs" class="form-label">Anzahl der Ausgaben:</label>
+                            <select class="form-select" id="num_outputs" name="num_outputs">
+                                <option value="1">1</option>
+                                <option value="2">2</option>
+                                <option value="3">3</option>
+                                <option value="4">4</option>
+                            </select>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="aspect_ratio" class="form-label">Seitenverhältnis:</label>
+                            <select class="form-select" id="aspect_ratio" name="aspect_ratio">
+                                <option value="1:1">1:1</option>
+                                <option value="16:9">16:9</option>
+                                <option value="21:9">21:9</option>
+                                <option value="3:2">3:2</option>
+                                <option value="2:3">2:3</option>
+                                <option value="4:5">4:5</option>
+                                <option value="5:4">5:4</option>
+                                <option value="3:4">3:4</option>
+                                <option value="4:3">4:3</option>
+                                <option value="9:16">9:16</option>
+                                <option value="9:21">9:21</option>
+                            </select>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="output_format" class="form-label">Ausgabeformat:</label>
+                            <select class="form-select" id="output_format" name="output_format">
+                                <option value="png">PNG</option>
+                                <option value="jpg">JPG</option>
+                                <option value="webp">WEBP</option>
+                            </select>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="guidance_scale" class="form-label">Guidance Scale:</label>
+                            <input type="number" step="0.1" class="form-control" id="guidance_scale" name="guidance_scale" value="3.5">
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="output_quality" class="form-label">Ausgabequalität:</label>
+                            <input type="number" class="form-control" id="output_quality" name="output_quality" value="80">
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="prompt_strength" class="form-label">Prompt Strength:</label>
+                            <input type="number" step="0.1" class="form-control" id="prompt_strength" name="prompt_strength" value="0.8">
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="num_inference_steps" class="form-label">Anzahl der Inference Steps:</label>
+                            <input type="number" class="form-control" id="num_inference_steps" name="num_inference_steps" value="28">
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <label for="lora_scale" class="form-label">LoRA Scale:</label>
+                            <input type="number" step="0.1" class="form-control" id="lora_scale" name="lora_scale" value="0.8">
+                        </div>
+<!--                        <div class="col-12 col-md-6 d-flex align-items-center"> 
+                        <div class="col-12 col-md-6">
+                            <input class="form-check-input" type="checkbox" id="hf_lora_toggle" name="hf_lora_toggle" checked>
+                            <label class="form-check-label" for="hf_lora_toggle">HF LoRA verwenden</label>
+                        </div> -->
+						
+						<div class="col-12 col-md-6">
+							<label class="form-check-label" for="hf_lora_toggle">HF LoRA verwenden:</label>
+							<input class="form-control" type="text" id="hf_lora_toggle" name="hf_lora_toggle" value="Scalino84/my-flux-face">
+						</div>
+                        <div class="col-12 col-md-6">
+                            <label class="form-check-label" for="agent">Mistral Agent verwenden:</label>
+                            <input class="form-check-input" type="checkbox" id="agent" name="agent" checked>
+                        </div>
+<!--                        </div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Batch-Optimierung -->
+    <div class="accordion mt-3" id="batchOptimizationAccordion">
+        <div class="accordion-item custom-bg">
+            <h2 class="accordion-header" id="headingTwo">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    Batch-Optimierung
+                </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#batchOptimizationAccordion">
+                <div class="accordion-body">
+                    <textarea id="batchPrompts" class="form-control" rows="10" placeholder="Mehrere Prompts eingeben, einer pro Zeile"></textarea>
+                    <button type="button" class="btn btn-primary mt-2" onclick="batchOptimize()">Batch Optimieren</button>
+                </div>
+            </div>
+			    <!-- Bildausgabebereich -->
+			<div id="output" class="mt-4 p-2 border rounded bg-light">
+				<!--<h5>Generierte Bilder:</h5>-->
+				<!-- Bilder werden hier dynamisch hinzugefügt -->
+			</div>
+        </div>
+    </div>
+</form>
+
+<!-- Ausgabebereich -->
+<div id="output" class="mt-3"></div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
+<script>
+    // Initialisierung des Croppers
+    let cropper;
+    function startCropper(imageElement) {
+        if (cropper) {
+            cropper.destroy();
+        }
+        cropper = new Cropper(imageElement, {
+            aspectRatio: 1,
+            viewMode: 1,
+            autoCropArea: 1,
+            responsive: true,
+        });
+    }
+
+    // Funktion zur Bildgenerierung
+    function startGeneration() {
+        const form = document.getElementById('generateForm');
+        if (!form.checkValidity()) {
+            form.classList.add('was-validated');
+            return;
+        }
+
+        // Fortschrittsanzeige einblenden
+        const progressContainer = document.getElementById('progressContainer');
+        progressContainer.style.display = 'block';
+        const progressBarInner = document.getElementById('progressBar');
+        progressBarInner.style.width = '0%';
+        progressBarInner.setAttribute('aria-valuenow', 0);
+
+        const progressMessage = document.getElementById('progressMessage');
+        progressMessage.style.display = 'block';
+
+        const outputDiv = document.getElementById('output');
+        outputDiv.innerHTML = '';
+
+        const formData = new FormData(form);
+
+		// HF LoRA-Einstellung hinzufügen
+		const hfLoraInput = document.getElementById('hf_lora_toggle');
+		const hfLoraValue = hfLoraInput.value.trim();
+		
+		if (hfLoraValue) {
+			formData.append('hf_lora', hfLoraValue);
+		} else {
+			formData.delete('hf_lora');
+		}
+
+        // Formulardaten in ein Objekt umwandeln
+        const formObject = Object.fromEntries(formData.entries());
+
+        // WebSocket-Verbindung öffnen
+        const socket = new WebSocket('ws://cf-lenovo:8000/ws');
+
+        socket.onopen = function (event) {
+            socket.send(JSON.stringify(formObject));
+        };
+
+        socket.onmessage = function (event) {
+            const data = JSON.parse(event.data);
+            if (data.optimized_prompt) {
+                document.getElementById('prompt').value = data.optimized_prompt;
+            }
+            if (data.progress !== undefined) {
+                progressBarInner.style.width = `${data.progress}%`;
+                progressBarInner.setAttribute('aria-valuenow', data.progress);
+            }
+            if (data.message) {
+                const message = document.createElement('div');
+                message.textContent = data.message;
+                outputDiv.appendChild(message);
+            }
+            if (data.generated_files) {
+                data.generated_files.forEach(file => {
+                    const img = document.createElement('img');
+                    img.src = file;
+                    img.style.maxWidth = '100%';
+                    outputDiv.appendChild(img);
+                    const promptText = document.createElement('p');
+                    promptText.textContent = `Prompt: ${formData.get('prompt')}`;
+                    outputDiv.appendChild(promptText);
+                    const copyButton = document.createElement('button');
+                    copyButton.textContent = 'Prompt Kopieren';
+                    copyButton.className = 'btn btn-secondary mt-2';
+                    copyButton.onclick = function() { copyPrompt(formData.get('prompt')) };
+                    outputDiv.appendChild(copyButton);
+                    outputDiv.appendChild(document.createElement('br'));
+                });
+                // Fortschrittsanzeige ausblenden
+                progressContainer.style.display = 'none';
+                progressMessage.style.display = 'none';
+            }
+        };
+        socket.onerror = function (event) {
+            console.error('WebSocket error:', event);
+            // Fortschrittsanzeige ausblenden im Fehlerfall
+            progressContainer.style.display = 'none';
+            progressMessage.style.display = 'none';
+        };
+
+        socket.onclose = function (event) {
+            console.log('WebSocket connection closed:', event);
+        };
+        // Alle Buttons auf der Seite deaktivieren
+        const buttons = document.querySelectorAll('button');
+        buttons.forEach(button => {
+            button.disabled = true;
+        });
+    }
+
+    // Funktion zur Optimierung des Prompts
+    function optimizeOnly() {
+        const form = document.getElementById('generateForm');
+        if (!form.checkValidity()) {
+            form.classList.add('was-validated');
+            return;
+        }
+
+        const formData = new FormData(form);
+
+        // HF LoRA-Einstellung hinzufügen
+        if (document.getElementById('hf_lora_toggle').checked) {
+            formData.append('hf_lora', 'Scalino84/my-flux-face');
+        } else {
+            formData.delete('hf_lora');
+        }
+
+        // Formulardaten in ein Objekt umwandeln
+        const formObject = Object.fromEntries(formData.entries());
+        formObject.optimize_only = true;
+
+        // WebSocket-Verbindung öffnen
+        const socket = new WebSocket('ws://localhost:8000/ws');
+
+        socket.onopen = function (event) {
+            socket.send(JSON.stringify(formObject));
+        };
+
+        socket.onmessage = function (event) {
+            const data = JSON.parse(event.data);
+            if (data.optimized_prompt) {
+                document.getElementById('prompt').value = data.optimized_prompt;
+            }
+        };
+
+        socket.onerror = function (event) {
+            console.error('WebSocket error:', event);
+        };
+
+        socket.onclose = function (event) {
+            console.log('WebSocket connection closed:', event);
+        };
+    }
+
+    function batchOptimize() {
+        // Prompts aus dem Textbereich sammeln
+        const batchPrompts = document.getElementById('batchPrompts').value.split('\n').filter(prompt => prompt.trim() !== '');
+        if (batchPrompts.length === 0) {
+            alert("Bitte geben Sie mindestens einen Prompt ein.");
+            return;
+        }
+
+        // Formulardaten sammeln
+        const formData = new FormData(document.getElementById('generateForm'));
+        const prompts = batchPrompts.map(prompt => {
+            const data = Object.fromEntries(formData);
+            data.prompt = prompt;
+            return data;
+        });
+
+        // Add HF LoRA toggle value to each prompt
+		if (hf_lora_toggle.checked) {
+			formData.append('hf_lora', 'Scalino84/my-flux-face');
+		} else {
+			formData.delete('hf_lora');
+		}
+
+        // WebSocket-Verbindung öffnen
+        const socket = new WebSocket('ws://localhost:8000/ws');
+
+        socket.onopen = function () {
+            // Prompts an den Server senden
+            socket.send(JSON.stringify({ prompts }));
+        };
+
+        socket.onmessage = function (event) {
+            const data = JSON.parse(event.data);
+            if (data.optimized_prompt) {
+                document.getElementById('prompt').value = data.optimized_prompt;
+            }
+            if (data.generated_files) {
+                data.generated_files.forEach(file => {
+                    const livePreviewImage = document.getElementById('livePreviewImage');
+                    if (livePreviewImage) {
+                        livePreviewImage.src = file;
+                    } else {
+                        const img = document.createElement('img');
+                        img.id = 'livePreviewImage';
+                        img.src = file;
+                        img.style.maxWidth = '100%';
+                        document.getElementById('output').appendChild(img);
+                    }
+                });
+            }
+        };
+
+        socket.onerror = function (event) {
+            console.error('WebSocket error:', event);
+            alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+        };
+
+        socket.onclose = function (event) {
+            console.log('WebSocket connection closed:', event);
+        };
+    }
+
+    function copyPrompt() {
+        const promptText = document.getElementById('prompt').value;
+        navigator.clipboard.writeText(promptText).then(() => {
+            alert('Prompt in die Zwischenablage kopiert!');
+        }).catch(err => {
+            console.error('Fehler beim Kopieren des Prompts:', err);
+        });
+    }
+</script>
+{% endblock %}