feat(webui): allow to specify image size

Signed-off-by: Ettore Di Giacinto <[email protected]>

Author: mudler

core/http/static/image.js

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

core/http/views/text2image.html

@@ -91,6 +91,30 @@ <h2 class="text-2xl font-bold text-white mb-6">Generate an Image</h2>
                             </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 -->