mirror/LocalAI
1
0
Fork 0
mirror of https://github.com/mudler/LocalAI.git synced 2026-02-23 18:27:47 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): improve navigation and buttons placement (#8608)

Browse Source 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
2026-02-19 23:41:05 +01:00
committed by GitHub
parent b1c434f0fc
commit df792d6243
15 changed files with 125 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/http/static/general.css
View File

@@ -39,6 +39,11 @@ body {
background-color: var(--color-bg-primary);
}
/* Pages without sidebar (e.g. login): center content */
.app-layout.no-sidebar .main-content {
margin-left: 0;
}
/* Chat page: fix viewport height so messages scroll and input stays fixed at bottom */
.app-layout.chat-layout {
height: 100vh;

12
core/http/views/404.html
View File

@@ -19,15 +19,13 @@
404 - Page Not Found
</h1>
<p class="text-xl text-[var(--color-text-secondary)] mb-6">The page you're looking for doesn't exist or has been moved</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="./"
class="btn-primary">
<i class="fas fa-home mr-2"></i>
<div class="flex flex-wrap justify-center gap-2">
<a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-home"></i>
<span>Return Home</span>
</a>
<a href="browse/"
class="btn-secondary">
<i class="fas fa-images mr-2"></i>
<a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-images"></i>
<span>Browse Gallery</span>
</a>
</div>

8
core/http/views/agent-job-details.html
View File

@@ -39,11 +39,11 @@
}"
class="px-4 py-2 rounded-lg text-sm font-semibold text-white"
x-text="job.status ? job.status.toUpperCase() : 'LOADING...'"></span>
<button x-show="job.status === 'pending' || job.status === 'running'"
<button type="button" x-show="job.status === 'pending' || job.status === 'running'"
@click="cancelJob()"
class="btn-primary"
style="background: var(--color-error);">
<i class="fas fa-stop mr-2"></i>Cancel
class="inline-flex items-center gap-1.5 text-xs text-red-400/90 hover:text-red-400 bg-transparent hover:bg-red-500/10 border border-[var(--color-border-subtle)] hover:border-red-500/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-stop"></i>
<span>Cancel</span>
</button>
</div>
</div>

12
core/http/views/backends.html
View File

@@ -61,10 +61,10 @@
<span class="text-[var(--color-text-secondary)] mr-1">Capability:</span>
<span class="font-semibold text-[var(--color-primary)]" x-text="systemCapability"></span>
</div>
<a href="https://localai.io/backends/" target="_blank" class="btn-primary">
<i class="fas fa-info-circle mr-2"></i>
<a href="https://localai.io/backends/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-info-circle"></i>
<span>Documentation</span>
<i class="fas fa-external-link-alt ml-2 text-xs"></i>
<i class="fas fa-external-link-alt text-[10px]"></i>
</a>
</div>
</div>
@@ -119,12 +119,12 @@
</div>
<div class="flex items-center gap-4">
<button
<button type="button"
@click="installExternalBackend()"
:disabled="installingExternal || !externalBackend.uri"
class="btn-primary"
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]"
>
<i class="mr-2" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
<i class="text-[10px]" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
<span x-text="installingExternal ? 'Installing...' : 'Install Backend'"></span>
</button>
<span x-show="externalBackendProgress" class="text-sm text-[var(--color-text-secondary)]" x-text="externalBackendProgress"></span>

12
core/http/views/error.html
View File

@@ -19,15 +19,13 @@
{{if .ErrorCode}}{{.ErrorCode}}{{else}}Error{{end}}
</h1>
<p class="text-xl text-[var(--color-text-secondary)] mb-6">{{if .ErrorMessage}}{{.ErrorMessage}}{{else}}An unexpected error occurred{{end}}</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="./"
class="btn-primary">
<i class="fas fa-home mr-2"></i>
<div class="flex flex-wrap justify-center gap-2">
<a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-home"></i>
<span>Return Home</span>
</a>
<a href="browse/"
class="btn-secondary">
<i class="fas fa-images mr-2"></i>
<a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-images"></i>
<span>Browse Gallery</span>
</a>
</div>

7
core/http/views/explorer.html
View File

@@ -195,9 +195,8 @@
</div>
<div class="flow-root">
<!-- Toggle button for showing/hiding the form -->
<button class="btn-primary float-right mb-2" @click="toggleForm()">
<!-- Conditional icon display -->
<i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'" class="mr-2"></i>
<button type="button" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors float-right mb-2" @click="toggleForm()">
<i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'"></i>
<span x-text="showForm ? 'Close' : 'Add New Network'"></span>
</button>
</div>
@@ -216,7 +215,7 @@
<label for="token">Token</label>
<textarea id="token" x-model="newNetwork.token" placeholder="Enter token" class="input"></textarea>
</div>
<button @click="addNetwork" class="btn-primary"><i class="fa-solid fa-plus"></i> Add Network</button>
<button type="button" @click="addNetwork" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors"><i class="fa-solid fa-plus"></i> <span>Add Network</span></button>
<template x-if="errorMessage">
<p class="error" x-text="errorMessage"></p>
</template>

22
core/http/views/index.html
View File

@@ -87,19 +87,19 @@
</div>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<a href="/browse/" class="btn-primary">
<i class="fas fa-images mr-2"></i>
Browse Model Gallery
<div class="flex flex-wrap justify-center gap-2 mb-8">
<a href="/browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-images"></i>
<span>Browse Model Gallery</span>
</a>
<a href="/import-model" class="btn-primary">
<i class="fas fa-upload mr-2"></i>
Import Model
<a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-upload"></i>
<span>Import Model</span>
</a>
<a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary">
<i class="fas fa-graduation-cap mr-2"></i>
Getting Started
<i class="fas fa-external-link-alt ml-2 text-sm"></i>
<a href="https://localai.io/basics/getting_started/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-graduation-cap"></i>
<span>Getting Started</span>
<i class="fas fa-external-link-alt text-[10px]"></i>
</a>
</div>
{{ else }}

10
core/http/views/login.html
View File

@@ -3,7 +3,7 @@
{{template "views/partials/head" .}}
<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
<div class="app-layout">
<div class="app-layout no-sidebar">
<main class="main-content">
<div class="main-content-inner">
@@ -44,11 +44,9 @@
</div>
<div>
<button
type="submit"
class="btn-primary w-full"
>
<i class="fas fa-sign-in-alt mr-2"></i>
<button type="submit"
class="inline-flex items-center justify-center gap-1.5 w-full text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-sign-in-alt"></i>
<span>Login</span>
</button>
</div>

99
core/http/views/manage.html
View File

@@ -42,36 +42,6 @@
Model & Backend Management
</h1>
<p class="hero-subtitle">Manage your installed models and backends</p>
<!-- Quick Actions -->
<div class="flex flex-wrap justify-center gap-3">
<a href="browse/" class="btn-primary text-sm py-1.5 px-3">
<i class="fas fa-images mr-1.5 text-[10px]"></i>
<span>Model Gallery</span>
</a>
<a href="/import-model" class="btn-primary text-sm py-1.5 px-3">
<i class="fas fa-plus mr-1.5 text-[10px]"></i>
<span>Import Model</span>
</a>
<button id="reload-models-btn" class="btn-primary text-sm py-1.5 px-3">
<i class="fas fa-sync-alt mr-1.5 text-[10px]"></i>
<span>Update Models</span>
</button>
<a href="/browse/backends" class="btn-secondary text-sm py-1.5 px-3">
<i class="fas fa-cogs mr-1.5 text-[10px]"></i>
<span>Backend Gallery</span>
</a>
{{ if not .DisableRuntimeSettings }}
<a href="/settings" class="btn-secondary text-sm py-1.5 px-3">
<i class="fas fa-cog mr-1.5 text-[10px]"></i>
<span>Settings</span>
</a>
{{ end }}
</div>
</div>
</div>
@@ -190,17 +160,17 @@
<p class="text-sm text-[var(--color-text-secondary)] mb-6">Get started by installing a model from the gallery or importing it</p>
<div class="flex flex-wrap justify-center gap-2 mb-6">
<a href="browse" class="btn-primary text-sm py-1.5 px-3">
<i class="fas fa-images mr-1.5 text-[10px]"></i>
Browse Model Gallery
<a href="browse" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-images text-[10px]"></i>
<span>Browse Model Gallery</span>
</a>
<a href="/import-model" class="btn-primary text-sm py-1.5 px-3">
<i class="fas fa-upload mr-1.5 text-[10px]"></i>
Import Model
<a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-upload text-[10px]"></i>
<span>Import Model</span>
</a>
<a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary text-sm py-1.5 px-3">
<i class="fas fa-book mr-1.5 text-[10px]"></i>
Documentation
<a href="https://localai.io/basics/getting_started/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-book text-[10px]"></i>
<span>Documentation</span>
</a>
</div>
@@ -228,13 +198,22 @@
{{ $modelsN := len .ModelsConfig}}
{{ $modelsN = add $modelsN (len .Models)}}
<div class="mb-6">
<h2 class="h3 mb-1 flex items-center">
<i class="fas fa-brain mr-2 text-[var(--color-primary)] text-sm"></i>
Installed Models
</h2>
<p class="text-sm text-[var(--color-text-secondary)] mb-4">
<span class="text-[var(--color-primary)] font-medium">{{$modelsN}}</span> model{{if gt $modelsN 1}}s{{end}} ready to use
</p>
<div class="flex items-center justify-between gap-3 mb-1">
<div>
<h2 class="h3 flex items-center">
<i class="fas fa-brain mr-2 text-[var(--color-primary)] text-sm"></i>
Installed Models
</h2>
<p class="text-sm text-[var(--color-text-secondary)] mt-0.5">
<span class="text-[var(--color-primary)] font-medium">{{$modelsN}}</span> model{{if gt $modelsN 1}}s{{end}} ready to use
</p>
</div>
<button id="reload-models-btn" type="button" title="Update models list from disk"
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-sync-alt text-[10px]"></i>
<span>Update</span>
</button>
</div>
</div>
<div class="overflow-x-auto mb-8">
@@ -339,13 +318,13 @@
<td class="p-2">
<div class="flex items-center justify-end gap-1">
{{ if index $loadedModels .Name }}
<button class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
<button type="button" class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
onclick="handleStopModel('{{.Name}}')"
title="Stop {{.Name}}">
<i class="fas fa-stop text-xs"></i>
</button>
{{ end }}
<button class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
<button type="button" class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
onclick="handleDeleteModel('{{.Name}}')"
title="Delete {{.Name}}">
<i class="fas fa-trash-alt text-xs"></i>
@@ -397,12 +376,12 @@
Installed Backends
</h2>
{{ if gt (len .InstalledBackends) 0 }}
<button
<button type="button"
@click="reinstallAllBackends()"
:disabled="reinstallingAll"
class="btn-primary text-sm py-1.5 px-3"
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]"
title="Reinstall all backends">
<i class="fas fa-arrow-rotate-right mr-1.5 text-[10px]" :class="reinstallingAll ? 'fa-spin' : ''"></i>
<i class="fas fa-arrow-rotate-right text-[10px]" :class="reinstallingAll ? 'fa-spin' : ''"></i>
<span x-text="reinstallingAll ? 'Reinstalling...' : 'Reinstall All'"></span>
</button>
{{ end }}
@@ -422,14 +401,14 @@
<h2 class="h2 mb-2">No backends installed yet</h2>
<p class="text-sm text-[var(--color-text-secondary)] mb-6">Backends power your AI models. Install them from the backend gallery to get started</p>
<div class="flex flex-wrap justify-center gap-3">
<a href="/browse/backends" class="btn-primary">
<i class="fas fa-cogs mr-2 text-xs"></i>
Browse Backend Gallery
<div class="flex flex-wrap justify-center gap-2">
<a href="/browse/backends" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-cogs text-[10px]"></i>
<span>Browse Backend Gallery</span>
</a>
<a href="https://localai.io/backends/" target="_blank" class="btn-secondary">
<i class="fas fa-book mr-2 text-xs"></i>
Documentation
<a href="https://localai.io/backends/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-book text-[10px]"></i>
<span>Documentation</span>
</a>
</div>
</div>
@@ -502,14 +481,14 @@
<td class="p-2">
<div class="flex items-center justify-end gap-1">
{{ if not .IsSystem }}
<button
<button type="button"
@click="reinstallBackend('{{.Name}}')"
:disabled="reinstallingBackends['{{.Name}}']"
class="text-[var(--color-primary)]/60 hover:text-[var(--color-primary)] hover:bg-[var(--color-primary)]/10 disabled:opacity-50 disabled:cursor-not-allowed rounded p-1 transition-colors"
title="Reinstall {{.Name}}">
<i class="fas fa-arrow-rotate-right text-xs" :class="reinstallingBackends['{{.Name}}'] ? 'fa-spin' : ''"></i>
</button>
<button
<button type="button"
@click="deleteBackend('{{.Name}}')"
class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
title="Delete {{.Name}}">

20
core/http/views/model-editor.html
View File

@@ -24,30 +24,30 @@
<div class="flex gap-3">
<!-- Mode Toggle (only show when not in edit mode) -->
<template x-if="!isEditMode">
<button @click="toggleMode()" class="btn-secondary">
<i class="fas" :class="isAdvancedMode ? 'fa-magic mr-2' : 'fa-code mr-2'"></i>
<button type="button" @click="toggleMode()" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas" :class="isAdvancedMode ? 'fa-magic' : 'fa-code'"></i>
<span x-text="isAdvancedMode ? 'Simple Mode' : 'Advanced Mode'"></span>
</button>
</template>
<!-- Advanced Mode Buttons -->
<template x-if="isAdvancedMode">
<div class="flex gap-3">
<button id="validateBtn" class="btn-primary">
<i class="fas fa-check mr-2"></i>
<div class="flex gap-2">
<button type="button" id="validateBtn" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-check"></i>
<span>Validate</span>
</button>
<button id="saveBtn" class="btn-primary">
<i class="fas fa-save mr-2"></i>
<button type="button" id="saveBtn" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-save"></i>
<span>{{if .ModelName}}Update{{else}}Create{{end}}</span>
</button>
</div>
</template>
<!-- Simple Mode Button -->
<template x-if="!isAdvancedMode && !isEditMode">
<button @click="submitImport()"
<button type="button" @click="submitImport()"
:disabled="isSubmitting || !importUri.trim()"
class="btn-primary">
<i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin mr-2' : 'fa-upload mr-2'"></i>
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
<i class="fas text-[10px]" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-upload'"></i>
<span x-text="isSubmitting ? 'Importing...' : 'Import Model'"></span>
</button>
</template>

14
core/http/views/models.html
View File

@@ -61,14 +61,14 @@
<span class="font-semibold text-purple-300" x-text="repositories.length"></span>
<span class="text-[var(--color-text-secondary)] ml-1">repositories</span>
</div>
<a href="/import-model" class="btn-primary">
<i class="fas fa-upload mr-2"></i>
<a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-upload"></i>
<span>Import Model</span>
</a>
<a href="https://localai.io/models/" target="_blank" class="btn-secondary">
<i class="fas fa-info-circle mr-2"></i>
<a href="https://localai.io/models/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-info-circle"></i>
<span>Documentation</span>
<i class="fas fa-external-link-alt ml-2 text-xs"></i>
<i class="fas fa-external-link-alt text-[10px]"></i>
</a>
</div>
</div>
@@ -453,8 +453,8 @@
</div>
<!-- Modal Footer -->
<div class="flex items-center p-4 md:p-5 border-t border-[var(--color-border-subtle)] rounded-b">
<button @click="closeModal()"
class="btn-secondary">
<button type="button" @click="closeModal()"
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
Close
</button>
</div>

6
core/http/views/partials/navbar.html
View File

@@ -85,9 +85,15 @@
<span class="nav-label">Swarm</span>
</a>
<a href="/manage" class="nav-item">
<i class="fas fa-server nav-icon"></i>
<span class="nav-label">System</span>
</a>
{{ if not .DisableRuntimeSettings }}
<a href="/settings" class="nav-item">
<i class="fas fa-cog nav-icon"></i>
<span class="nav-label">Settings</span>
</a>
{{ end }}
</div>
</nav>

49
core/http/views/settings.html
View File

@@ -36,22 +36,22 @@
<div class="container mx-auto px-4 py-6 flex-grow max-w-4xl">
<!-- Header -->
<div class="mb-6">
<div class="flex items-center justify-between mb-2">
<h1 class="h2">
Application Settings
</h1>
<a href="/manage"
class="inline-flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors">
<i class="fas fa-arrow-left mr-2 text-sm"></i>
<span class="text-sm">Back to Manage</span>
</a>
</div>
<div class="mb-4">
<h1 class="h2 mb-2">Application Settings</h1>
<p class="text-sm text-[var(--color-text-secondary)]">Configure watchdog and backend request settings</p>
</div>
<!-- Settings Form -->
<form @submit.prevent="saveSettings()" class="space-y-6">
<!-- Sticky Save bar -->
<div class="sticky top-0 z-10 -mx-4 px-4 py-3 -mt-2 mb-2 bg-[var(--color-bg-primary)] border-b border-[var(--color-border-subtle)] flex justify-end">
<button type="submit"
:disabled="saving"
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
<i class="fas fa-save text-[10px]" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
<span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
</button>
</div>
<!-- Watchdog Settings Section -->
<div class="bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded-lg p-6">
<h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
@@ -591,30 +591,6 @@
</div>
</div>
</div>
<!-- Source Info -->
<div class="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4" x-show="sourceInfo">
<div class="flex items-start">
<i class="fas fa-info-circle text-yellow-400 mr-2 mt-0.5"></i>
<div class="flex-1">
<p class="text-sm text-yellow-300 font-medium mb-1">Configuration Source</p>
<p class="text-xs text-yellow-200" x-text="'Settings are currently loaded from: ' + sourceInfo"></p>
<p class="text-xs text-yellow-200 mt-1" x-show="sourceInfo === 'env'">
Environment variables take precedence. To modify settings via the UI, unset the relevant environment variables first.
</p>
</div>
</div>
</div>
<!-- Save Button -->
<div class="flex justify-end">
<button type="submit"
:disabled="saving"
class="btn-primary">
<i class="fas fa-save mr-2" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
<span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
</button>
</div>
</form>
</div>
@@ -659,7 +635,6 @@ function settingsDashboard() {
agent_job_retention_days: 30,
open_responses_store_ttl: '0'
},
sourceInfo: '',
saving: false,
init() {
@@ -707,7 +682,6 @@ function settingsDashboard() {
agent_job_retention_days: data.agent_job_retention_days || 30,
open_responses_store_ttl: data.open_responses_store_ttl || '0'
};
this.sourceInfo = data.source || 'default';
} else {
this.addNotification('Failed to load settings: ' + (data.error || 'Unknown error'), 'error');
}
@@ -879,7 +853,6 @@ function settingsDashboard() {
if (response.ok && data.success) {
this.addNotification('Settings saved successfully!', 'success');
// Reload settings to get updated source info
setTimeout(() => this.loadSettings(), 1000);
} else {
this.addNotification('Failed to save settings: ' + (data.error || 'Unknown error'), 'error');

2
core/http/views/sound.html
View File

@@ -149,7 +149,7 @@
</div>
<div class="pt-4">
<button type="submit" id="generate-btn" class="btn-primary w-full py-3 flex items-center justify-center gap-2">
<button type="submit" id="generate-btn" class="inline-flex items-center justify-center gap-1.5 w-full text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-music"></i>
<span>Generate sound</span>
</button>

16
core/http/views/traces.html
View File

@@ -43,13 +43,13 @@
API Traces
</h1>
<p class="hero-subtitle">View logged API requests and responses</p>
<div class="flex flex-wrap justify-center gap-3">
<button @click="clearTraces()" class="btn-secondary text-sm py-1.5 px-3">
<i class="fas fa-trash mr-1.5 text-[10px]"></i>
<div class="flex flex-wrap justify-center gap-2">
<button type="button" @click="clearTraces()" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-trash text-[10px]"></i>
<span>Clear Traces</span>
</button>
<a href="/api/traces" download="traces.json" class="btn-secondary text-sm py-1.5 px-3">
<i class="fas fa-download mr-1.5 text-[10px]"></i>
<a href="/api/traces" download="traces.json" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
<i class="fas fa-download text-[10px]"></i>
<span>Export Traces</span>
</a>
</div>
@@ -93,10 +93,10 @@
<!-- Save Button -->
<div class="flex justify-end pt-2">
<button @click="saveTracingSettings()"
<button type="button" @click="saveTracingSettings()"
:disabled="saving"
class="btn-primary px-4 py-2 text-sm">
<i class="fas fa-save mr-2" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
<i class="fas fa-save text-[10px]" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
<span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
</button>
</div>