From 924e4da7c562743930201ebe18661c1bfefa8717 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Wed, 5 Mar 2025 19:23:13 +0100
Subject: [PATCH] feat(ui): improve text to image view

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/views/text2image.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/core/http/views/text2image.html b/core/http/views/text2image.html
index 5397d5d8..0424eefe 100644
--- a/core/http/views/text2image.html
+++ b/core/http/views/text2image.html
@@ -10,7 +10,7 @@
     <div class="container mx-auto px-4 py-8 flex-grow" x-data="{ component: 'menu' }">
     
         <!-- Hero Section -->
-        <div class="bg-gradient-to-r from-blue-900/30 to-indigo-900/30 rounded-2xl shadow-xl p-8 mb-10">
+        <div class="bg-gradient-to-r from-blue-900/30 to-indigo-900/30 rounded-2xl shadow-xl p-8 mb-6">
             <div class="max-w-4xl mx-auto text-center">
                 <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                     <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-400">
@@ -35,15 +35,16 @@
             </div>
         </div>
       
-        <!-- Model Selection and Controls -->
-        <div class="bg-gray-800/90 border border-gray-700/50 rounded-xl p-6 mb-8 shadow-lg">
-            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
-                <!-- Model Selector -->
-                <div class="w-full md:w-auto">
-                    <label for="model-select" class="block text-sm font-medium text-gray-300 mb-2">Select a Model</label>
+        <!-- Model Selection - Positioned between hero and generation form -->
+        <div class="bg-gray-800/90 border border-gray-700/50 rounded-xl p-5 mb-6 shadow-lg">
+            <div class="flex items-center">
+                <div class="text-lg font-medium text-blue-400 mr-4">
+                    <i class="fas fa-palette mr-2"></i>Select Model:
+                </div>
+                <div class="flex-grow">
                     <select x-data="{ link : '' }" x-model="link" x-init="$watch('link', value => window.location = link)" 
                         id="model-select"
-                        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 pr-10 appearance-none w-full md:w-64 transition-colors duration-200"
+                        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 pr-10 appearance-none w-full max-w-md transition-colors duration-200"
                     >	
                         <option value="" disabled class="text-gray-400">Select a model</option>
                         {{ $model:=.Model}}
@@ -59,7 +60,7 @@
                             <option value="text2image/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-gray-800 text-white">{{.}}</option>
                         {{end}}
                     </select>
-                </div>               
+                </div>
             </div>
         </div>
             
@@ -96,7 +97,7 @@
                 <div class="mt-6 border-t border-gray-700/50 pt-6">
                     <h3 class="text-xl font-semibold text-gray-200 mb-4">Generated Image</h3>
                     <div class="container mx-auto flex justify-center">
-                        <div id="result" class="mx-auto bg-gray-900/50 border border-gray-700/50 rounded-xl p-4 min-h-[300px] flex items-center justify-center">
+                        <div id="result" class="mx-auto bg-gray-900/50 border border-gray-700/50 rounded-xl p-4 min-h-[300px] w-full flex items-center justify-center">
                             <p class="text-gray-400 italic">Your generated image will appear here</p>
                         </div>
                     </div>