Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-04-28 19:23:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated styling and prompt on home page

Browse Source
This commit is contained in:
Karl Hudgell 2025-04-24 22:15:13 +01:00
parent 4acf28e485
commit 020c2c2f1b
3 changed files with 73 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ai_frame_image_server.py
View File

@ -19,18 +19,21 @@ image_folder = "./output"
@app.route("/", methods=["GET"]) @app.route("/", methods=["GET"])
def index() -> str: def index() -> str:
""" """
Renders the main HTML template. Renders the main HTML template with image and prompt.
Args:
None
Returns:
str: The rendered HTML template.
""" """
image_filename = "./image.png"
image_path = os.path.join(image_folder, image_filename)
prompt = get_prompt_from_png(image_path)
return render_template( return render_template(
"index.html", "index.html",
image="./image.png", image=image_filename,
prompt=prompt,
reload_interval=user_config["frame"]["reload_interval"], reload_interval=user_config["frame"]["reload_interval"],
) )
@app.route("/images", methods=["GET"]) @app.route("/images", methods=["GET"])
def gallery() -> str: def gallery() -> str:
""" """

36
templates/gallery.html
View File

@ -5,17 +5,37 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Archive</title> <title>Image Archive</title>
<style> <style>
* {
margin: 0;
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 { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 10px; gap: 20px;
} }
.gallery img { .gallery img {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 5px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease;
} }
.gallery img:hover {
transform: scale(1.02);
}
/* Lightbox styles */ /* Lightbox styles */
.lightbox { .lightbox {
display: none; display: none;
@ -24,15 +44,16 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.9);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
z-index: 999;
} }
.lightbox img { .lightbox img {
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 80%;
border-radius: 5px; border-radius: 10px;
} }
.lightbox .close { .lightbox .close {
position: absolute; position: absolute;
@ -84,11 +105,10 @@
<span class="close" onclick="closeLightbox()">&times;</span> <span class="close" onclick="closeLightbox()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span> <span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src=""> <img id="lightbox-img" src="">
<p id="lightbox-prompt"></p> <!-- 👈 Add this line --> <p id="lightbox-prompt"></p>
<span class="arrow right" onclick="nextImage()">&#10095;</span> <span class="arrow right" onclick="nextImage()">&#10095;</span>
</div> </div>
<script> <script>
let images = [ let images = [
{% for image in images %} {% for image in images %}
@ -107,7 +127,6 @@
document.getElementById("lightbox").style.display = "flex"; document.getElementById("lightbox").style.display = "flex";
} }
function closeLightbox() { function closeLightbox() {
document.getElementById("lightbox").style.display = "none"; document.getElementById("lightbox").style.display = "none";
} }
@ -121,7 +140,6 @@
currentIndex = (currentIndex - 1 + images.length) % images.length; currentIndex = (currentIndex - 1 + images.length) % images.length;
openLightbox(currentIndex); openLightbox(currentIndex);
} }
</script> </script>
</body> </body>
</html> </html>

39
templates/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Image of the day</title> <title>AI Image of the Day</title>
<style> <style>
* { * {
margin: 0; margin: 0;
@ -12,28 +12,57 @@
} }
body { body {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
background: black; background: black;
color: white;
font-family: Arial, sans-serif;
}
.image-container {
max-width: 90vw;
max-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
} }
img { img {
width: 100vw; max-width: 100%;
height: 100vh; max-height: 100%;
object-fit: contain; object-fit: contain;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.prompt {
color: #ccc;
font-family: monospace;
white-space: pre-wrap;
background: rgba(0, 0, 0, 0.6);
padding: 15px 20px;
border-radius: 10px;
max-width: 80vw;
text-align: left;
} }
</style> </style>
<script> <script>
setInterval(() => { setInterval(() => {
location.reload(); location.reload();
}, {{ reload_interval }}); // Refresh every 5 seconds }, {{ reload_interval }}); // Refresh every X ms
</script> </script>
</head> </head>
<body> <body>
{% if image %} {% if image %}
<div class="image-container">
<img src="{{ url_for('images', filename=image) }}" alt="Latest Image"> <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 %} {% else %}
<p style="color: white;">No images found</p> <p>No images found</p>
{% endif %} {% endif %}
</body> </body>
</html> </html>