mirror of
https://github.com/mudler/LocalAI.git
synced 2026-02-18 23:21:58 -05:00
2fabdc08e6
* feat(ui): left navbar, dark/light theme Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * darker background Signed-off-by: Ettore Di Giacinto <mudler@localai.io> --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
126 lines
6.9 KiB
HTML
126 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{template "views/partials/head" .}}
|
|
<script defer src="static/talk.js"></script>
|
|
<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]" x-data="{ key: $store.chat.key }">
|
|
<div class="app-layout">
|
|
{{template "views/partials/navbar" .}}
|
|
|
|
<main class="main-content">
|
|
<div class="main-content-inner">
|
|
|
|
<div class="container mx-auto px-4 py-8 flex-grow">
|
|
<!-- Hero Section -->
|
|
<div class="hero-section">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<i class="fas fa-comments mr-2"></i>Talk Interface
|
|
</h1>
|
|
<p class="hero-subtitle">Speak with your AI models using voice interaction</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Talk Interface -->
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="card overflow-hidden">
|
|
<!-- Talk Interface Body -->
|
|
<div class="p-6">
|
|
<!-- Recording Status -->
|
|
<div id="recording" class="bg-[var(--color-error-light)] border border-[var(--color-error)]/30 rounded-lg p-4 mb-4 flex items-center space-x-3" style="display: none;">
|
|
<i class="fa-solid fa-microphone text-2xl text-[var(--color-error)]"></i>
|
|
<span class="text-[var(--color-error)] font-medium">Recording... press "Stop recording" to stop</span>
|
|
</div>
|
|
|
|
<!-- Loader -->
|
|
<div id="loader" class="my-4 flex justify-center" style="display: none;">
|
|
<div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-[var(--color-primary)]"></div>
|
|
</div>
|
|
|
|
<!-- Status Text -->
|
|
<div id="statustext" class="my-4 p-3 bg-[var(--color-bg-primary)]/50 border border-[var(--color-border-subtle)] rounded-lg text-[var(--color-text-primary)]" style="min-height: 3rem;">Press the record button to start recording.</div>
|
|
|
|
<!-- Note -->
|
|
<div class="bg-[var(--color-primary-light)] border border-[var(--color-primary)]/20 rounded-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-info-circle text-[var(--color-primary)] mt-1 mr-3 flex-shrink-0"></i>
|
|
<p class="text-[var(--color-text-secondary)]">
|
|
<strong class="text-[var(--color-primary)]">Note:</strong> You need an LLM, an audio-transcription (whisper), and a TTS model installed for this to work. Select the appropriate models below and click 'Talk' to start recording. The recording will continue until you click 'Stop recording'. Make sure your microphone is set up and enabled.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Model Selectors -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<!-- LLM Model -->
|
|
<div class="space-y-2">
|
|
<label for="modelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
|
|
<i class="fas fa-brain text-[var(--color-primary)] mr-2"></i>LLM Model
|
|
</label>
|
|
<select id="modelSelect"
|
|
class="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/50 rounded-lg shadow-sm p-2.5 appearance-none">
|
|
<option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
|
|
{{ range .ModelsConfig }}
|
|
<option value="{{.}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
|
{{ end }}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Whisper Model -->
|
|
<div class="space-y-2">
|
|
<label for="whisperModelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
|
|
<i class="fas fa-ear-listen text-[var(--color-accent)] mr-2"></i>Whisper Model
|
|
</label>
|
|
<select id="whisperModelSelect"
|
|
class="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:ring-2 focus:ring-[var(--color-accent)]/50 rounded-lg shadow-sm p-2.5 appearance-none">
|
|
<option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
|
|
{{ range .ModelsConfig }}
|
|
<option value="{{.}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
|
{{ end }}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- TTS Model -->
|
|
<div class="space-y-2">
|
|
<label for="ttsModelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
|
|
<i class="fas fa-volume-high text-[var(--color-success)] mr-2"></i>TTS Model
|
|
</label>
|
|
<select id="ttsModelSelect"
|
|
class="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] focus:border-[var(--color-success)] focus:ring-2 focus:ring-[var(--color-success)]/50 rounded-lg shadow-sm p-2.5 appearance-none">
|
|
<option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
|
|
{{ range .ModelsConfig }}
|
|
<option value="{{.}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
|
{{ end }}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex items-center justify-between mt-8">
|
|
<button id="recordButton"
|
|
class="inline-flex items-center bg-[var(--color-error)] hover:bg-[var(--color-error)]/90 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
|
|
<i class="fas fa-microphone mr-2"></i>
|
|
<span>Talk</span>
|
|
</button>
|
|
|
|
<a id="resetButton"
|
|
class="flex items-center text-[var(--color-primary)] hover:text-[var(--color-accent)] transition-colors"
|
|
href="#">
|
|
<i class="fas fa-rotate-left mr-2"></i>
|
|
<span>Reset conversation</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Audio Playback -->
|
|
<audio id="audioPlayback" controls hidden></audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "views/partials/footer" .}}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|