117 lines
6.5 KiB
HTML
117 lines
6.5 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#202326">
|
||
<title>{{ name }}</title>
|
||
<link rel="stylesheet" href="/static/css/alfred.css">
|
||
<link rel="stylesheet" href="/static/css/alfred-controls.css">
|
||
<link rel="stylesheet" href="/static/css/alfred-views.css">
|
||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<main class="alfred-shell">
|
||
<header class="topbar">
|
||
<!-- Le statut remplace l'ancien titre « Alfred ». -->
|
||
<div class="status" role="status" aria-live="polite">
|
||
<span id="statusDot" class="status-dot" data-mode="idle" aria-hidden="true"></span>
|
||
<span id="mode" data-mode="idle">En attente</span>
|
||
</div>
|
||
|
||
<div class="header-actions" aria-label="Navigation et commandes audio">
|
||
<button id="viewHome" class="icon-button" type="button" title="Accueil" aria-label="Accueil">⌂</button>
|
||
<button id="viewCalendar" class="icon-button" type="button" title="Agenda" aria-label="Agenda">▦</button>
|
||
<button id="viewTemperatures" class="icon-button" type="button" title="Températures" aria-label="Températures">°</button>
|
||
<button id="viewCameras" class="icon-button" type="button" title="Caméras Home Assistant" aria-label="Caméras Home Assistant">▣</button>
|
||
<button id="audioSettingsButton" class="icon-button" type="button"
|
||
aria-label="Réglages audio" aria-haspopup="dialog" aria-expanded="false"
|
||
aria-controls="audioSettingsPanel" title="Volume et microphone">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2.5" fill="#272b30"/><circle cx="16" cy="17" r="2.5" fill="#272b30"/>
|
||
</svg>
|
||
</button>
|
||
<button id="micMute" class="icon-button" type="button"
|
||
aria-label="Couper le microphone" aria-pressed="false" title="Couper le microphone">
|
||
<svg class="mic-on-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="9" y="2.5" width="6" height="12" rx="3"/>
|
||
<path d="M5.5 10.5v1.5a6.5 6.5 0 0 0 13 0v-1.5M12 18.5v3M8 21.5h8"/>
|
||
</svg>
|
||
<svg class="mic-off-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M9.2 5.3V5.5a3 3 0 0 1 5.5-1.4M15 10.6v.9c0 .5-.1 1-.3 1.5M9 9.5v2A3 3 0 0 0 13.6 14"/>
|
||
<path d="M5.5 10.5V12a6.5 6.5 0 0 0 11.5 4.1M12 18.5v3M8 21.5h8M3 3l18 18"/>
|
||
</svg>
|
||
</button>
|
||
<button id="speakerMuteQuick" class="icon-button" type="button"
|
||
aria-label="Couper le son" aria-pressed="false" title="Couper le son">
|
||
<svg class="speaker-on-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="m11 5-5 4H3v6h3l5 4V5Z"/><path d="M15 9a4 4 0 0 1 0 6M18 6a8 8 0 0 1 0 12"/>
|
||
</svg>
|
||
<svg class="speaker-off-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="m11 5-5 4H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Pop-up : commandes connectées à /api/audio/settings -->
|
||
<div id="audioSettingsPanel" class="audio-popover" role="dialog"
|
||
aria-label="Réglages audio" aria-modal="false" hidden>
|
||
<div class="popover-heading">
|
||
<strong>Réglages audio</strong>
|
||
<button id="closeAudioSettings" class="icon-button mini" type="button" aria-label="Fermer les réglages">×</button>
|
||
</div>
|
||
<div class="setting-row">
|
||
<label for="volumeSlider">Volume du haut-parleur</label>
|
||
<output id="volumeValue" for="volumeSlider">70 %</output>
|
||
</div>
|
||
<input id="volumeSlider" type="range" min="0" max="100" value="70" step="1">
|
||
<div class="setting-row">
|
||
<label for="micGainSlider">Sensibilité du microphone</label>
|
||
<output id="micGainValue" for="micGainSlider">—</output>
|
||
</div>
|
||
<input id="micGainSlider" type="range" min="0" max="100" value="50" step="1">
|
||
<p id="audioSettingsMessage" class="settings-message" role="status" aria-live="polite"></p>
|
||
</div>
|
||
|
||
<section id="stage" aria-label="Réponse d'Alfred">
|
||
<div id="content"><h1>Bonjour.</h1><p>À votre écoute.</p></div>
|
||
</section>
|
||
|
||
<section id="wave" aria-hidden="true"><canvas id="waveCanvas"></canvas></section>
|
||
|
||
<!-- Caméra locale : désactivée tant que l'utilisateur ne l'ouvre pas,
|
||
pour éviter de monopoliser la webcam utilisée par le MCP visage. -->
|
||
<aside class="camera-panel" aria-label="Prévisualisation caméra">
|
||
<div class="panel-heading">
|
||
<span class="panel-title"><span class="panel-indicator"></span> CAMÉRA</span>
|
||
<button id="cameraToggle" class="panel-action" type="button" aria-pressed="false">Activer</button>
|
||
</div>
|
||
<div class="camera-viewport">
|
||
<img id="cameraFeed" alt="Vidéo en direct de la caméra d'Alfred" hidden>
|
||
<div id="cameraPlaceholder" class="camera-placeholder">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
|
||
<rect x="2.5" y="5" width="14" height="14" rx="3"/><path d="m16.5 10 5-3v10l-5-3"/>
|
||
</svg>
|
||
<span id="cameraMessage">Caméra désactivée</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Affiche les résultats partiels ET définitifs de la reconnaissance Vosk. -->
|
||
<aside class="transcript-panel" aria-label="Transcription vocale">
|
||
<div class="panel-heading">
|
||
<span class="panel-title"><span class="panel-indicator stt-indicator"></span> RECONNAISSANCE VOCALE · VOSK</span>
|
||
<span id="transcriptState" class="transcript-state">En attente</span>
|
||
</div>
|
||
<p id="transcriptText" class="transcript-text" aria-live="polite">La dernière phrase reconnue s'affichera ici.</p>
|
||
</aside>
|
||
</main>
|
||
|
||
<script src="/static/js/alfred.js"></script>
|
||
<script src="/static/js/alfred-views.js"></script>
|
||
<script src="/static/js/alfred-controls.js"></script>
|
||
<script src="/static/js/alfred-camera.js"></script>
|
||
</body>
|
||
</html>
|