add back button to the bottom of the gallery

add create_image page
2025-09-08 15:33:16 +01:00 · 2025-05-15 09:26:10 +01:00 · 2025-05-15 09:16:09 +01:00
4 changed files with 191 additions and 18 deletions
--- a/ai_frame_image_server.py
+++ b/ai_frame_image_server.py
@ -111,6 +111,17 @@ def scheduled_task() -> None:
    print(f"Executing scheduled task at {time.strftime('%Y-%m-%d %H:%M:%S')}")
    create_image(None)

+@app.route("/create_image", methods=["GET"])
+def create_image_endpoint() -> str:
+    """
+    Renders the create image template with image and prompt.
+    """
+
+    return render_template(
+        "create_image.html"
+    )
+    
+

 if user_config["frame"]["auto_regen"] == "True":
    if os.environ.get("WERKZEUG_RUN_MAIN") == "true":
--- a/templates/create_image.html
+++ b/templates/create_image.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create An Image</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: black;
+            color: white;
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        textarea {
+            width: 80vw;
+            height: 200px;
+            border-radius: 10px;
+            padding: 15px;
+            font-size: 16px;
+            font-family: monospace;
+            resize: none;
+            margin-bottom: 20px;
+            background: #111;
+            color: #eee;
+            border: 1px solid #333;
+        }
+        .button-group {
+            display: flex;
+            gap: 20px;
+        }
+        button {
+            background: #333;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #555;
+        }
+    </style>
+</head>
+<body>
+    <h1 style="margin-bottom: 20px;">Create An Image</h1>
+    <textarea id="prompt-box" placeholder="Enter your custom prompt here..."></textarea>
+    <div class="button-group">
+        <button onclick="location.href='/'">Back</button>
+        <button onclick="sendPrompt()">Send Prompt</button>
+        <button onclick="location.href='/create'">Random Prompt</button>
+    </div>
+
+    <script>
+        function sendPrompt() {
+            const prompt = document.getElementById('prompt-box').value;
+            const formData = new URLSearchParams();
+            formData.append('prompt', prompt);
+
+            fetch('/create', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: formData.toString()
+            }).then(response => {
+                if (response.redirected) {
+                    window.location.href = response.url;
+                } else {
+                    alert("Image creation request sent.");
+                }
+            }).catch(error => {
+                alert("Error sending prompt: " + error);
+            });
+        }
+    </script>
+</body>
+</html>
--- a/templates/gallery.html
+++ b/templates/gallery.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,21 +11,25 @@
            padding: 0;
            box-sizing: border-box;
        }
+
        body {
            background-color: black;
            color: white;
            font-family: sans-serif;
            padding: 2rem;
        }
+
        h1 {
            text-align: center;
            margin-bottom: 2rem;
        }
+
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            gap: 20px;
        }
+
        .gallery img {
            width: 100%;
            height: auto;
@ -32,6 +37,7 @@
            cursor: pointer;
            transition: transform 0.2s ease;
        }
+
        .gallery img:hover {
            transform: scale(1.02);
        }
@ -50,11 +56,13 @@
            flex-direction: column;
            z-index: 999;
        }
+
        .lightbox img {
            max-width: 90%;
            max-height: 80%;
            border-radius: 10px;
        }
+
        .lightbox .close {
            position: absolute;
            top: 20px;
@ -63,6 +71,7 @@
            color: white;
            cursor: pointer;
        }
+
        .arrow {
            position: absolute;
            top: 50%;
@ -72,9 +81,11 @@
            user-select: none;
            transform: translateY(-50%);
        }
+
        .arrow.left {
            left: 20px;
        }
+
        .arrow.right {
            right: 20px;
        }
@ -90,17 +101,46 @@
            text-align: left;
            margin-top: 20px;
        }
+
+        .button-group {
+            display: flex;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+
+        .button-link {
+            background: #333;
+            color: white;
+            text-decoration: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background 0.3s;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .button-link:hover {
+            background: #555;
+        }
    </style>
 </head>
+
 <body>
    <h1>Image Archive</h1>
    <div class="gallery">
        {% for image in images %}
-            <!-- <img src="{{ url_for('images', filename=image.thumbnail_filename) }}" alt="Image" loading="lazy" onclick="openLightbox({{ loop.index0 }})"> -->
-            <img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}" data-fullsrc="{{ url_for('images', filename=image.filename) }}" onclick="openLightbox({{ loop.index0 }})">
+        <!-- <img src="{{ url_for('images', filename=image.thumbnail_filename) }}" alt="Image" loading="lazy" onclick="openLightbox({{ loop.index0 }})"> -->
+        <img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}"
+            data-fullsrc="{{ url_for('images', filename=image.filename) }}" onclick="openLightbox({{ loop.index0 }})">

        {% endfor %}
    </div>
+    <div class="button-group">
+        <a href="/" class="button-link">Back</a>
+    </div>
+

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
@ -114,11 +154,11 @@
    <script>
        let images = [
            {% for image in images %}
-            {
-                src: "{{ url_for('images', filename=image.filename) }}",
+        {
+            src: "{{ url_for('images', filename=image.filename) }}",
                prompt: `{{ image.prompt | escape }}`
-            },
-            {% endfor %}
+        },
+        {% endfor %}
        ];
        let currentIndex = 0;

@ -145,4 +185,5 @@
        }
    </script>
 </body>
-</html>
+
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,6 +11,7 @@
            padding: 0;
            box-sizing: border-box;
        }
+
        body {
            display: flex;
            flex-direction: column;
@ -20,6 +22,7 @@
            color: white;
            font-family: Arial, sans-serif;
        }
+
        .image-container {
            max-width: 90vw;
            max-height: 80vh;
@ -28,6 +31,7 @@
            justify-content: center;
            margin-bottom: 20px;
        }
+
        img {
            max-width: 100%;
            max-height: 100%;
@ -35,6 +39,7 @@
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }
+
        .prompt {
            color: #ccc;
            font-family: monospace;
@ -45,6 +50,30 @@
            max-width: 80vw;
            text-align: left;
        }
+
+        .button-group {
+            display: flex;
+            gap: 20px;
+            margin-top: 15px;
+            justify-content: center;
+        }
+
+        .button-link {
+            background: #333;
+            color: white;
+            text-decoration: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background 0.3s;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .button-link:hover {
+            background: #555;
+        }
    </style>
    <script>
        setInterval(() => {
@ -52,17 +81,20 @@
        }, {{ reload_interval }});  // Refresh every X ms
    </script>
 </head>
+
 <body>
    {% if image %}
-        <div class="image-container">
-            <img src="{{ url_for('images', filename=image) }}" alt="Latest Image">
-        </div>
-        {% if prompt %}
-            <div class="prompt">{{ prompt }}</div>
-            <a href="/images" id="archive-link">Archive</a>
-        {% endif %}
-    {% else %}
-        <p>No images found</p>
+    <div class="image-container">
+        <img src="{{ url_for('images', filename=image) }}" alt="Latest Image">
+    </div>
+    {% if prompt %}
+    <div class="prompt">{{ prompt }}</div>
+    <div class="button-group">
+        <a href="/images" class="button-link">Archive</a>
+        <a href="/create_image" class="button-link">Create Image</a>
+    </div>
    {% endif %}
-</body>
-</html>
+    {% else %}
+    <p>No images found</p>
+    {% endif %}
+</body>
Author	SHA1	Message	Date
Karl	0ccebcf037	add back button to the bottom of the gallery	2025-05-15 09:26:10 +01:00
Karl	da37913d84	add create_image page	2025-05-15 09:16:09 +01:00