dearwolf/LocalAI
1
0
Fork 0
mirror of https://github.com/mudler/LocalAI.git synced 2025-06-26 12:45:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

feat(ui): improve text to image view

Browse source 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto 2025-03-05 19:23:13 +01:00
parent 7f637f017f
commit 924e4da7c5
1 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

21
core/http/views/text2image.html
View file

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