63 lines
3.2 KiB
HTML
63 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Voice Assistant — {{ settings.APP_NAME }}{% endblock %}
|
|
{% block content %}
|
|
<div class="page" style="max-width:560px">
|
|
<h1 class="greeting">Voice Assistant (Jervis)</h1>
|
|
<p class="muted">Type a command for the home assistant — it's sent to the local LLM agent, which acts (lights, shopping, weather, reminders…) and speaks the reply on the house speakers.</p>
|
|
<div class="admin-panel">
|
|
<div class="linkout-card stack">
|
|
{% if error %}<div class="form-error">{{ error }}</div>{% endif %}
|
|
<form method="post" action="/voice" onsubmit="onSend()">
|
|
<div class="form-field">
|
|
<label for="message">Command</label>
|
|
<textarea class="text-input" id="message" name="message" rows="2" required
|
|
placeholder="e.g. what time is it, what's the weather, turn on the lights, play some music, Donald tell me a joke…"
|
|
style="resize:vertical; min-height:2.9em">{{ command or '' }}</textarea>
|
|
</div>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="button button-primary" style="flex:1" type="submit" id="sendBtn">Send</button>
|
|
<button class="button button-utility" type="button" id="clearMsg">Clear</button>
|
|
</div>
|
|
</form>
|
|
<div id="waiting" class="waiting">
|
|
<span class="spinner"></span> Working — asking Jervis…
|
|
</div>
|
|
<style>
|
|
.waiting { display: none; align-items: center; gap: 8px; margin-top: 14px; color: #555; font: var(--type-body-sm); }
|
|
.spinner { width: 16px; height: 16px; border: 2px solid #d7d7d7; border-top-color: var(--primary, #0075de); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
<script>
|
|
function onSend() {
|
|
var b = document.getElementById('sendBtn');
|
|
if (b) { b.disabled = true; b.textContent = 'Sending…'; }
|
|
var w = document.getElementById('waiting');
|
|
if (w) { w.style.display = 'flex'; }
|
|
}
|
|
var clearMsg = document.getElementById('clearMsg');
|
|
if (clearMsg) clearMsg.addEventListener('click', function () {
|
|
var m = document.getElementById('message');
|
|
if (m) m.value = '';
|
|
m && m.focus();
|
|
});
|
|
</script>
|
|
{% if reply %}
|
|
<div class="linkout-card stack" style="margin-top:16px">
|
|
<strong>Jervis:</strong>
|
|
<p style="margin:8px 0 0">{{ reply }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="linkout-card stack" style="margin-top:16px">
|
|
<strong>Characters:</strong>
|
|
<p class="muted" style="margin:6px 0">Donald • Hal • Mech Warrior • Ryan — e.g. <em>"Donald, tell me a joke"</em> or <em>"Hey Jervis, ask Donald Trump to tell me a joke"</em>.</p>
|
|
<strong>Things to ask:</strong>
|
|
<p class="muted" style="margin:6px 0">a question • the time • the weather • today's date • turn on the lights • play a song, album or artist.</p>
|
|
</div>
|
|
<p class="faint margin-top" style="font: var(--type-caption)">
|
|
Uses the local voice agent on `.13` (OmniRoute LLM). Replies are also spoken via Snapcast.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |