chore(image-ui): simplify interface (#7882)

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

Author: mudler

core/http/static/image.js

@@ -154,7 +154,7 @@ async function promptDallE() {
     if (json.data && json.data.length > 0) {
       json.data.forEach((item, index) => {
         const imageContainer = document.createElement("div");
-        imageContainer.className = "mb-4 bg-[var(--color-bg-primary)]/50 border border-[#1E293B] rounded-lg p-2";
+        imageContainer.className = "flex flex-col";
 
         // Create image element
         const img = document.createElement("img");
@@ -166,23 +166,23 @@ async function promptDallE() {
           return; // Skip invalid items
         }
         img.alt = prompt;
-        img.className = "w-full h-auto rounded-lg mb-2";
+        img.className = "w-full h-auto rounded-lg";
         imageContainer.appendChild(img);
 
-        // Create caption container
+        // Create caption container (optional, can be collapsed or shown on hover)
         const captionDiv = document.createElement("div");
-        captionDiv.className = "mt-2 p-2 bg-[var(--color-bg-secondary)] rounded-lg";
+        captionDiv.className = "mt-2 p-2 bg-[var(--color-bg-secondary)] rounded-lg text-xs";
 
         // Prompt caption
         const promptCaption = document.createElement("p");
-        promptCaption.className = "text-xs text-[var(--color-text-primary)] mb-1.5";
+        promptCaption.className = "text-[var(--color-text-primary)] mb-1.5 break-words";
         promptCaption.innerHTML = '<strong>Prompt:</strong> ' + escapeHtml(prompt);
         captionDiv.appendChild(promptCaption);
 
         // Negative prompt if provided
         if (negativePrompt) {
           const negativeCaption = document.createElement("p");
-          negativeCaption.className = "text-xs text-[var(--color-text-secondary)] mb-1.5";
+          negativeCaption.className = "text-[var(--color-text-secondary)] mb-1.5 break-words";
           negativeCaption.innerHTML = '<strong>Negative Prompt:</strong> ' + escapeHtml(negativePrompt);
           captionDiv.appendChild(negativeCaption);
         }

core/http/views/text2image.html

@@ -215,26 +215,23 @@
 
             <!-- Right Column: Image Preview -->
             <div class="flex-grow lg:w-3/4 flex flex-col min-h-0">
-                <div class="card p-3 flex flex-col flex-1 min-h-0">
-                    <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-3 flex-shrink-0">Generated Images</h3>
-                    <div class="relative flex-1 min-h-0 overflow-y-auto">
-                        <!-- Loading Animation -->
-                        <div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-[var(--color-bg-primary)]/80 rounded-xl z-10">
-                            <div class="text-center">
-                                <svg class="animate-spin h-10 w-10 text-[var(--color-primary)] mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                </svg>
-                                <p class="text-xs text-[var(--color-text-secondary)]">Generating image...</p>
-                            </div>
-                        </div>
-                        <!-- Placeholder when no images -->
-                        <div id="result-placeholder" class="bg-[var(--color-bg-primary)]/50 border border-[#1E293B] rounded-xl p-6 min-h-[400px] flex items-center justify-center flex-shrink-0">
-                            <p class="text-xs text-[var(--color-text-secondary)] italic text-center">Your generated images will appear here</p>
+                <div class="relative flex-1 min-h-0 overflow-y-auto">
+                    <!-- Loading Animation -->
+                    <div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-[var(--color-bg-primary)]/80 rounded-xl z-10">
+                        <div class="text-center">
+                            <svg class="animate-spin h-10 w-10 text-[var(--color-primary)] mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <p class="text-xs text-[var(--color-text-secondary)]">Generating image...</p>
                         </div>
-                        <!-- Results container -->
-                        <div id="result" class="space-y-4 pb-4"></div>
                     </div>
+                    <!-- Placeholder when no images -->
+                    <div id="result-placeholder" class="min-h-[400px] flex items-center justify-center flex-shrink-0">
+                        <p class="text-xs text-[var(--color-text-secondary)] italic text-center">Your generated images will appear here</p>
+                    </div>
+                    <!-- Results container -->
+                    <div id="result" class="grid grid-cols-1 sm:grid-cols-2 gap-4 pb-4"></div>
                 </div>
             </div>
         </div>