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

add create_image page

Browse Source
This commit is contained in:
Karl 2025-05-15 09:16:09 +01:00
parent aef0afe753
commit da37913d84
3 changed files with 143 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ai_frame_image_server.py
View File

@ -111,6 +111,17 @@ def scheduled_task() -> None:
print(f"Executing scheduled task at {time.strftime('%Y-%m-%d %H:%M:%S')}") print(f"Executing scheduled task at {time.strftime('%Y-%m-%d %H:%M:%S')}")
create_image(None) 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 user_config["frame"]["auto_regen"] == "True":
if os.environ.get("WERKZEUG_RUN_MAIN") == "true": if os.environ.get("WERKZEUG_RUN_MAIN") == "true":

89
templates/create_image.html Normal file
View File

@ -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>

50
templates/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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">
@ -10,6 +11,7 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -20,6 +22,7 @@
color: white; color: white;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
.image-container { .image-container {
max-width: 90vw; max-width: 90vw;
max-height: 80vh; max-height: 80vh;
@ -28,6 +31,7 @@
justify-content: center; justify-content: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -35,6 +39,7 @@
border-radius: 20px; border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
} }
.prompt { .prompt {
color: #ccc; color: #ccc;
font-family: monospace; font-family: monospace;
@ -45,6 +50,30 @@
max-width: 80vw; max-width: 80vw;
text-align: left; 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> </style>
<script> <script>
setInterval(() => { setInterval(() => {
@ -52,17 +81,20 @@
}, {{ reload_interval }}); // Refresh every X ms }, {{ reload_interval }}); // Refresh every X ms
</script> </script>
</head> </head>
<body> <body>
{% if image %} {% if image %}
<div class="image-container"> <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> </div>
{% if prompt %} {% if prompt %}
<div class="prompt">{{ prompt }}</div> <div class="prompt">{{ prompt }}</div>
<a href="/images" id="archive-link">Archive</a> <div class="button-group">
{% endif %} <a href="/images" class="button-link">Archive</a>
<a href="/create_image" class="button-link">Create Image</a>
</div>
{% endif %}
{% else %} {% else %}
<p>No images found</p> <p>No images found</p>
{% endif %} {% endif %}
</body> </body>
</html>