feat(webui): allow to specify image size (#5976)

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
2025-08-06 12:38:02 +02:00
committed by GitHub
parent da6f37f000
commit 3295a298f4
2 changed files with 35 additions and 1 deletions

View File

@@ -11,6 +11,7 @@ async function promptDallE(input) {
document.getElementById("input").disabled = true;
const model = document.getElementById("image-model").value;
const size = document.getElementById("image-size").value;
const response = await fetch("v1/images/generations", {
method: "POST",
headers: {
@@ -21,7 +22,7 @@ async function promptDallE(input) {
steps: 10,
prompt: input,
n: 1,
size: "512x512",
size: size,
}),
});
const json = await response.json();
@@ -48,4 +49,13 @@ async function promptDallE(input) {
document.getElementById("input").focus();
document.getElementById("genimage").addEventListener("submit", genImage);
// Handle Enter key press in the prompt input
document.getElementById("input").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
genImage(event);
}
});
document.getElementById("loader").style.display = "none";

View File

@@ -91,6 +91,30 @@
</svg>
</span>
</div>
<!-- Size Selection -->
<div class="mt-4">
<label for="image-size" class="block text-sm font-medium text-gray-300 mb-2">
<i class="fas fa-expand-arrows-alt mr-2"></i>Image Size:
</label>
<input
type="text"
id="image-size"
value="256x256"
placeholder="e.g., 256x256, 512x512, 1024x1024"
class="bg-gray-900 text-white border border-gray-700 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 rounded-lg shadow-sm p-2.5 w-full max-w-xs transition-colors duration-200"
/>
</div>
<!-- Submit Button -->
<div class="mt-6">
<button
type="submit"
class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
>
<i class="fas fa-magic mr-2"></i>Generate Image
</button>
</div>
</form>
<!-- Image Results Container -->