feat(ui): remove api key handling and small ui adjustments (#4948)

* chore(ui): drop set api key button

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

* chore(ui): shore in-progress installs in model view

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

* feat(ui): improve text to image view

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

---------

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto 2025-03-05 19:37:36 +01:00 committed by GitHub
parent 06eb7e9fa7
commit de81b42b49
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 25 additions and 282 deletions

View file

@ -3,7 +3,7 @@
{{template "views/partials/head" .}}
<script defer src="static/tts.js"></script>
<body class="bg-gradient-to-br from-gray-900 to-gray-950 text-gray-200" x-data="{ component: 'menu', key: $store.chat.key }">
<body class="bg-gradient-to-br from-gray-900 to-gray-950 text-gray-200">
<div class="flex flex-col min-h-screen">
{{template "views/partials/navbar" .}}
@ -31,39 +31,9 @@
<!-- TTS Interface -->
<div class="max-w-3xl mx-auto">
<div class="bg-gray-800/90 border border-gray-700/50 rounded-xl overflow-hidden transition-all duration-300 shadow-lg shadow-blue-900/20">
<!-- Header with API Key and Model Selection -->
<!-- Header with Model Selection -->
<div class="border-b border-gray-700 p-5">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<!-- API Key Management -->
<div>
<div x-show="component === 'menu'" id="menu">
<button @click="component = 'key'" title="Update API key"
class="group flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<i class="fas fa-key mr-2"></i>
<span>Set API Key</span>
<i class="fas fa-arrow-right opacity-0 group-hover:opacity-100 group-hover:translate-x-2 ml-2 transition-all duration-300"></i>
</button>
</div>
<form x-show="component === 'key'" id="key" class="flex items-center space-x-2">
<input
type="password"
id="apiKey"
name="apiKey"
class="bg-gray-800 text-white border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 rounded-lg shadow-sm p-2 appearance-none"
placeholder="OpenAI API Key"
x-model.lazy="key"
/>
<button
@click="component = 'menu'"
type="submit"
title="Save API key"
class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition duration-300">
<i class="fa-solid fa-lock"></i>
</button>
</form>
</div>
<!-- Model Selection -->
<div class="flex items-center">
<label for="model-select" class="mr-3 text-gray-300 font-medium">