mirror of
https://github.com/mudler/LocalAI.git
synced 2025-05-31 07:54:59 +00:00
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
GitHub
parent
06eb7e9fa7
commit
de81b42b49
9 changed files with 25 additions and 282 deletions
|
|
@ -31,7 +31,7 @@ SOFTWARE.
|
|||
<script defer src="static/chat.js"></script>
|
||||
{{ $allGalleryConfigs:=.GalleryConfig }}
|
||||
{{ $model:=.Model}}
|
||||
<body class="bg-slate-900 text-gray-100 flex flex-col h-screen" x-data="{ key: $store.chat.key, sidebarOpen: true }">
|
||||
<body class="bg-slate-900 text-gray-100 flex flex-col h-screen" x-data="{ sidebarOpen: true }">
|
||||
{{template "views/partials/navbar" .}}
|
||||
|
||||
<!-- Main container with sidebar toggle -->
|
||||
|
|
@ -150,36 +150,9 @@ SOFTWARE.
|
|||
</div>
|
||||
|
||||
<!-- Settings tab -->
|
||||
<div x-show="activeTab === 'settings'" x-data="{ showKeyForm: false, showPromptForm: false }" class="space-y-3">
|
||||
<div x-show="activeTab === 'settings'" x-data="{ showPromptForm: false }" class="space-y-3">
|
||||
<button
|
||||
@click="showKeyForm = !showKeyForm; showPromptForm = false"
|
||||
class="w-full flex items-center justify-between px-3 py-2 text-sm rounded text-white bg-gray-700 hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span><i class="fa-solid fa-key mr-2"></i> API Key</span>
|
||||
<i :class="showKeyForm ? 'fa-chevron-up' : 'fa-chevron-down'" class="fa-solid"></i>
|
||||
</button>
|
||||
|
||||
<div x-show="showKeyForm" class="p-3 bg-gray-700 rounded">
|
||||
<form id="key" class="flex flex-col space-y-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-md shadow-sm p-2 appearance-none"
|
||||
placeholder="OpenAI API Key"
|
||||
x-model.lazy="key"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-3 py-2 text-sm rounded text-white bg-blue-600 hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Save API Key
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="showPromptForm = !showPromptForm; showKeyForm = false"
|
||||
@click="showPromptForm = !showPromptForm"
|
||||
class="w-full flex items-center justify-between px-3 py-2 text-sm rounded text-white bg-gray-700 hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span><i class="fa-solid fa-message mr-2"></i> System Prompt</span>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{template "views/partials/inprogress" .}}
|
||||
|
||||
<!-- Search and Filter Section -->
|
||||
<div class="bg-gray-800/70 rounded-xl p-6 mb-8 shadow-lg border border-gray-700/50">
|
||||
<!-- Search Input -->
|
||||
|
|
|
|||
|
|
@ -23,42 +23,6 @@
|
|||
<!-- Talk 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">
|
||||
<!-- Key Management Header -->
|
||||
<div class="border-b border-gray-700 p-4" x-data="{ component: 'menu' }">
|
||||
<div class="flex items-center justify-center">
|
||||
<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="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-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Talk Interface Body -->
|
||||
<div class="p-6">
|
||||
<!-- Recording Status -->
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -60,37 +61,6 @@
|
|||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- API Key Controls -->
|
||||
<div class="w-full md:w-auto">
|
||||
<div x-show="component === 'menu'" id="menu" class="flex justify-end">
|
||||
<button @click="component = 'key'" title="Update API key"
|
||||
class="flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:shadow-lg"
|
||||
>
|
||||
<i class="fas fa-key mr-2"></i>
|
||||
<span>Set API Key</span>
|
||||
</button>
|
||||
</div>
|
||||
<form x-show="component === 'key'" id="key" class="flex items-center space-x-2">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="apiKey"
|
||||
name="apiKey"
|
||||
placeholder="OpenAI API Key"
|
||||
x-model.lazy="key"
|
||||
class="pl-3 pr-10 py-2 bg-gray-900 border border-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-lg text-gray-200"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<i class="fas fa-lock text-gray-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="component = 'menu'" type="submit" title="Save API key"
|
||||
class="bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg transition duration-300 ease-in-out">
|
||||
<i class="fas fa-save"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue