select model on create page

This commit is contained in:
Karl 2025-05-18 21:16:11 +01:00
parent aabd19dd5f
commit 0b74672844
3 changed files with 66 additions and 20 deletions

View File

@ -9,7 +9,7 @@ import os
import time
import threading
from apscheduler.schedulers.background import BackgroundScheduler
from libs.generic import load_config, load_recent_prompts, get_details_from_png, get_current_version
from libs.generic import load_config, load_recent_prompts, get_details_from_png, get_current_version, load_models_from_config
from libs.comfyui import cancel_current_job, create_image
from libs.ollama import create_prompt_on_openwebui
@ -100,6 +100,8 @@ def create() -> str:
str: Redirect to the main page or a JSON response.
"""
prompt = request.form.get("prompt") if request.method == "POST" else None
model = request.form.get("model") if request.method == "POST" else None
if prompt is None:
prompt = create_prompt_on_openwebui(user_config["comfyui"]["prompt"])
@ -122,8 +124,11 @@ def create_image_endpoint() -> str:
Renders the create image template with image and prompt.
"""
models = load_models_from_config()
models.insert(0, "Random")
return render_template(
"create_image.html"
"create_image.html", models=models
)

View File

@ -98,6 +98,12 @@ def get_current_version():
print("Error running bump-my-version:", e)
return None
def load_models_from_config():
flux_models = user_config["comfyui:flux"]["models"].split(",")
sdxl_models = user_config["comfyui"]["models"].split(",")
all_models = flux_models + sdxl_models
return all_models
user_config = load_config()
output_folder = user_config["comfyui"]["output_dir"]

View File

@ -1,15 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
}
/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ---------- layout ---------- */
body {
display: flex;
flex-direction: column;
@ -37,8 +36,9 @@
.button-group {
display: flex;
gap: 20px;
align-items: center;
}
button {
button, select {
background: #333;
color: white;
border: none;
@ -48,9 +48,8 @@
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #555;
}
button:hover,
select:hover { background: #555; }
/* ---------- spinner ---------- */
#spinner-overlay {
@ -60,7 +59,7 @@
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
visibility: hidden; /* toggled in JS */
visibility: hidden;
z-index: 1000;
}
.spinner {
@ -76,11 +75,24 @@
</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="showSpinner(); location.href='/'">Back</button>
<button onclick="sendPrompt()">Send Prompt</button>
<button onclick="showSpinner(); location.href='/create'">Random Prompt</button>
<button onclick="randomPrompt()">Random Prompt</button>
<!-- new model selector -->
<select id="model-select">
{% for m in models %}
<option value="{{ m }}">{{ m }}</option>
{% endfor %}
</select>
</div>
<!-- waiting overlay -->
@ -90,15 +102,17 @@
<script>
const overlay = document.getElementById('spinner-overlay');
function showSpinner() {
overlay.style.visibility = 'visible';
}
function showSpinner() { overlay.style.visibility = 'visible'; }
function sendPrompt() {
showSpinner();
const prompt = document.getElementById('prompt-box').value;
const model = document.getElementById('model-select').value;
const formData = new URLSearchParams();
formData.append('prompt', prompt);
formData.append('model', model);
fetch('/create', {
method: 'POST',
@ -106,14 +120,35 @@
body: formData.toString()
})
.then(response => {
// If server redirects, follow it; otherwise go to /create
window.location.href = response.redirected ? response.url : '/create';
})
.catch(error => {
overlay.style.visibility = 'hidden'; // hide spinner on failure
overlay.style.visibility = 'hidden';
alert("Error sending prompt: " + error);
});
}
// wrapper for Random Prompt button so it also sends the model
function randomPrompt() {
showSpinner();
const model = document.getElementById('model-select').value;
const formData = new URLSearchParams();
formData.append('model', model);
fetch('/create', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: formData.toString()
})
.then(response => {
window.location.href = response.redirected ? response.url : '/create';
})
.catch(error => {
overlay.style.visibility = 'hidden';
alert("Error requesting random prompt: " + error);
});
}
</script>
</body>
</html>