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

36
templates/gallery.html
View File

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

39
templates/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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>
* {
margin: 0;
@ -12,28 +12,57 @@
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
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 {
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
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>
<script>
setInterval(() => {
location.reload();
}, {{ reload_interval }}); // Refresh every 5 seconds
}, {{ 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 style="color: white;">No images found</p>
<p>No images found</p>
{% endif %}
</body>
</html>