Init commit

alfred/app/static/css/alfred-controls.css

@@ -0,0 +1,14 @@
+/* Pop-up des réglages : ne modifie pas la page configuration historique. */
+.audio-popover { position:absolute; top:82px; right:36px; z-index:10; width:min(355px,calc(100vw - 28px)); background:#252a2e; border:1px solid #ffffff2b; border-radius:17px; padding:20px; box-shadow:0 24px 70px #0008; }
+.audio-popover[hidden] { display:none !important; }
+.popover-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-size:16px; }
+.icon-button.mini { width:28px; height:28px; font-size:22px; border:0; background:none; }
+.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:19px; margin-bottom:12px; color:#d5dbe0; font-size:13px; }
+.setting-row output { color:#f4f5f6; font-size:13px; font-variant-numeric:tabular-nums; }
+.audio-popover input[type="range"] { display:block; width:100%; margin:0 0 5px; cursor:pointer; accent-color:#a8c7ce; }
+.audio-popover input[type="range"]:disabled { opacity:.35; cursor:not-allowed; }
+.setting-toggle { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid #ffffff1c; color:#cbd1d5; font-size:13px; }
+.quiet-button { color:#c3e7dc; background:#42675b33; border:1px solid #83c9ae44; padding:7px 13px; border-radius:8px; cursor:pointer; }
+.quiet-button[aria-pressed="true"] { color:#f7b5b5; background:#b65c5c26; border-color:#b65c5c66; }
+.settings-message { min-height:14px; margin:12px 0 0; font-size:11px; color:#e4c089; line-height:1.4; }
+@media(max-width:760px) { .audio-popover { top:65px; right:14px; } }

alfred/app/static/css/alfred-mode-icons.css

@@ -0,0 +1,13 @@
+.alfred-mode-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  font-size: 26px;
+  line-height: 1;
+  transition: transform .25s ease, opacity .25s ease;
+}
+.alfred-mode-icon[data-mode="thinking"] { animation: alfred-thinking 1.8s ease-in-out infinite; }
+@keyframes alfred-thinking { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
+@media (prefers-reduced-motion: reduce) { .alfred-mode-icon { animation: none !important; } }

alfred/app/static/css/alfred.css

@@ -0,0 +1,62 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #f1f3f4;
+  background: #202326;
+}
+* { box-sizing: border-box; }
+[hidden] { display:none !important; }
+body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 52% 34%, #33373a 0, #25282b 46%, #1a1d20 100%); }
+.alfred-shell { position:relative; isolation:isolate; display:grid; grid-template-rows: 56px minmax(0,1fr) 142px; gap:16px; min-height:100vh; min-height:100dvh; padding:25px 36px; }
+.topbar { display:flex; align-items:center; justify-content:space-between; z-index:5; }
+.status { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:#e6eaed; letter-spacing:.045em; }
+.status-dot { width:10px; height:10px; border-radius:50%; background:#7d8790; box-shadow:0 0 0 4px #ffffff0a; transition:background .25s,box-shadow .25s; }
+.status-dot[data-mode="listening"] { background:#70c7ce; box-shadow:0 0 0 5px #70c7ce17; animation:status-pulse 1.6s infinite; }
+.status-dot[data-mode="thinking"] { background:#e7bb72; box-shadow:0 0 0 5px #e7bb7217; animation:status-pulse 1.9s infinite; }
+.status-dot[data-mode="speaking"] { background:#9ad0b7; box-shadow:0 0 0 5px #9ad0b717; animation:status-pulse 1.4s infinite; }
+.status-dot[data-mode="error"] { background:#f18989; box-shadow:0 0 0 5px #f1898917; }
+.header-actions { display:flex; gap:10px; align-items:center; }
+.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff22; border-radius:13px; background:#ffffff08; color:#e8ebee; cursor:pointer; transition:background .2s,border-color .2s; }
+.icon-button:hover { background:#ffffff14; border-color:#ffffff35; }
+.icon-button:focus-visible,.panel-action:focus-visible,.quiet-button:focus-visible { outline:2px solid #adc8e0; outline-offset:3px; }
+.icon-button svg { width:21px; height:21px; }
+.icon-button[aria-pressed="true"] { color:#f4a2a2; background:#ae47471b; border-color:#b95d5d55; }
+.speaker-off-icon { display:none; }
+.icon-button[aria-pressed="true"] .speaker-on-icon { display:none; }
+.icon-button[aria-pressed="true"] .speaker-off-icon { display:block; }
+#stage { display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; padding:0 8%; }
+#content { width:min(990px,86vw); text-align:center; transition:opacity .25s ease,transform .25s ease; animation:appear .45s ease; }
+#content.swap { opacity:0; transform:translateY(10px) scale(.99); }
+#content h1 { font-size:clamp(2rem,4vw,4.3rem); font-weight:350; margin:.2em 0; line-height:1.2; }
+#content p { font-size:clamp(1rem,1.6vw,1.35rem); color:#cdd1d4; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
+.hero { max-width:min(100%,750px); max-height:56vh; object-fit:contain; border-radius:18px; box-shadow:0 18px 50px #0006; animation:appear .45s ease; }
+.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:13px; text-align:left; }
+.card { padding:18px; border:1px solid #ffffff1c; background:#ffffff0a; border-radius:15px; }
+.card h2 { margin:0 0 8px; font-weight:500; }
+.card p { margin:0; font-size:1rem; }
+#wave { display:flex; align-items:center; justify-self:center; width: min(560px,37vw); height:100px; align-self:end; }
+#wave canvas { width:100%; height:100%; }
+.camera-panel,.transcript-panel { position:absolute; z-index:2; bottom:34px; border:1px solid #ffffff20; background:#222629db; box-shadow:0 14px 35px #0002; border-radius:16px; backdrop-filter:blur(12px); }
+.camera-panel { left:36px; width:clamp(220px,24vw,355px); overflow:hidden; }
+.transcript-panel { right:36px; width:clamp(250px,25vw,405px); padding:15px 17px 18px; min-height:136px; }
+.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 13px; }
+.transcript-panel .panel-heading { padding:0; min-height:30px; }
+.panel-title { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.1em; font-weight:700; color:#abb5be; }
+.panel-indicator { width:7px; height:7px; border-radius:50%; background:#71818c; }
+.camera-panel[data-active="true"] .panel-indicator { background:#83c5cc; }
+.transcript-panel[data-active="true"] .stt-indicator { background:#83c5cc; }
+.panel-action { border:0; border-radius:8px; background:#ffffff0c; color:#e3e8ed; padding:7px 10px; font-size:12px; cursor:pointer; }
+.panel-action:hover { background:#ffffff22; }
+.camera-viewport { display:grid; place-items:center; position:relative; aspect-ratio:16/9; background:#101315; overflow:hidden; }
+.camera-viewport > * { grid-area:1/1; }
+.camera-viewport img { width:100%; height:100%; object-fit:contain; }
+.camera-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; color:#919ca4; font-size:12px; text-align:center; padding:12px; }
+.camera-placeholder svg { width:30px; height:30px; opacity:.65; }
+.transcript-state { color:#909ba3; font-size:11px; flex-shrink:0; }
+.transcript-text { margin:11px 0 0; color:#edf0f2; font-size:14px; line-height:1.6; overflow-wrap:anywhere; max-height:110px; overflow-y:auto; }
+.transcript-text.is-placeholder { color:#87939c; }
+@keyframes appear { from { opacity:0; transform:translateY(8px) } to { opacity:1;transform:translateY(0) } }
+@keyframes status-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
+@media(max-width:1120px) { #wave { width:28vw; } .camera-panel { width:27vw; } .transcript-panel { width:29vw; } }
+@media(max-width:760px) { .alfred-shell { padding:14px; grid-template-rows:50px minmax(220px,1fr) 80px auto; gap:8px; } #stage { padding:10px; } #wave { width:80%; height:70px; } .camera-panel,.transcript-panel { position:relative; left:auto; right:auto; bottom:auto; width:100%; } .camera-panel { grid-row:4; max-width:none; } .transcript-panel { grid-row:5; min-height:auto; } .topbar { grid-row:1; } }
+@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

alfred/app/static/js/alfred-camera.js

@@ -0,0 +1,41 @@
+/* Lecture MJPEG activée manuellement : libère la caméra si désactivée. */
+(() => {
+  'use strict';
+  const button = document.getElementById('cameraToggle');
+  const image = document.getElementById('cameraFeed');
+  const placeholder = document.getElementById('cameraPlaceholder');
+  const message = document.getElementById('cameraMessage');
+  const panel = document.querySelector('.camera-panel');
+  let active = false;
+
+  function stop() {
+    active = false;
+    image.removeAttribute('src');
+    image.hidden = true;
+    placeholder.hidden = false;
+    message.textContent = 'Caméra désactivée';
+    button.textContent = 'Activer';
+    button.setAttribute('aria-pressed', 'false');
+    panel.dataset.active = 'false';
+  }
+  function start() {
+    active = true;
+    placeholder.hidden = false;
+    message.textContent = 'Connexion à la caméra…';
+    image.hidden = false;
+    image.src = `/api/camera/stream?t=${Date.now()}`;
+    button.textContent = 'Arrêter';
+    button.setAttribute('aria-pressed', 'true');
+  }
+  button.addEventListener('click', () => active ? stop() : start());
+  image.addEventListener('load', () => { if (active) { placeholder.hidden = true; panel.dataset.active = 'true'; } });
+  image.addEventListener('error', () => {
+    if (!active) return;
+    stop();
+    message.textContent = 'Caméra indisponible ou déjà utilisée';
+  });
+  // Si l'onglet n'est pas visible, relâcher le périphérique USB.
+  document.addEventListener('visibilitychange', () => { if (document.hidden && active) stop(); });
+  window.addEventListener('pagehide', stop);
+  stop();
+})();

alfred/app/static/js/alfred-controls.js

@@ -0,0 +1,93 @@
+/* Contrôles audio depuis un pop-up + raccourci mute haut-parleur. */
+(() => {
+  'use strict';
+  const panel = document.getElementById('audioSettingsPanel');
+  const button = document.getElementById('audioSettingsButton');
+  const close = document.getElementById('closeAudioSettings');
+  const speaker = document.getElementById('speakerMuteQuick');
+  const mic = document.getElementById('micMute');
+  const volume = document.getElementById('volumeSlider');
+  const volumeValue = document.getElementById('volumeValue');
+  const gain = document.getElementById('micGainSlider');
+  const gainValue = document.getElementById('micGainValue');
+  const message = document.getElementById('audioSettingsMessage');
+  let settings = { volume:70, mic_gain:null, speaker_muted:false, mic_muted:false };
+  let volumeTimer, gainTimer;
+
+  function render() {
+    volume.value = settings.volume;
+    volumeValue.textContent = `${settings.volume} %`;
+    gain.disabled = !Number.isFinite(settings.mic_gain);
+    if (!gain.disabled) gain.value = settings.mic_gain;
+    gainValue.textContent = gain.disabled ? 'N/D' : `${settings.mic_gain} %`;
+    speaker.setAttribute('aria-pressed', String(settings.speaker_muted));
+    speaker.setAttribute('aria-label', settings.speaker_muted ? 'Réactiver le son' : 'Couper le son');
+    speaker.title = speaker.getAttribute('aria-label');
+    mic.setAttribute('aria-pressed', String(settings.mic_muted));
+    mic.textContent = settings.mic_muted ? 'Coupé' : 'Actif';
+    mic.title = settings.mic_muted ? 'Réactiver le microphone' : 'Couper le microphone';
+  }
+
+  async function update(changes) {
+    message.textContent = '';
+    try {
+      const response = await fetch('/api/audio/settings', {
+        method:'POST',
+        headers:{'Content-Type':'application/json'},
+        body:JSON.stringify(changes)
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
+      settings = { ...settings, ...data };
+      render();
+    } catch (err) {
+      message.textContent = `Impossible de modifier le réglage : ${err.message}`;
+      console.warn('[ALFRED AUDIO]', err);
+      await refresh();
+    }
+  }
+
+  async function refresh() {
+    try {
+      const response = await fetch('/api/audio/settings', {cache:'no-store'});
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      settings = { ...settings, ...await response.json() };
+      render();
+    } catch (err) {
+      message.textContent = 'Réglages indisponibles.';
+      console.warn('[ALFRED AUDIO]', err);
+    }
+  }
+
+  function setOpen(open) {
+    panel.hidden = !open;
+    button.setAttribute('aria-expanded', String(open));
+    if (open) { refresh(); close.focus(); } else { button.focus(); }
+  }
+  button.addEventListener('click', () => setOpen(panel.hidden));
+  close.addEventListener('click', () => setOpen(false));
+  document.addEventListener('pointerdown', e => {
+    if (!panel.hidden && !panel.contains(e.target) && !button.contains(e.target)) {
+      panel.hidden = true; button.setAttribute('aria-expanded', 'false');
+    }
+  });
+  document.addEventListener('keydown', e => { if (e.key === 'Escape' && !panel.hidden) setOpen(false); });
+
+  volume.addEventListener('input', () => {
+    settings.volume = Number(volume.value); render();
+    clearTimeout(volumeTimer);
+    volumeTimer = setTimeout(() => update({volume:Number(volume.value)}), 220);
+  });
+  gain.addEventListener('input', () => {
+    settings.mic_gain = Number(gain.value); render();
+    clearTimeout(gainTimer);
+    gainTimer = setTimeout(() => update({mic_gain:Number(gain.value)}), 250);
+  });
+  speaker.addEventListener('click', () => update({speaker_muted:!settings.speaker_muted}));
+  mic.addEventListener('click', () => update({mic_muted:!settings.mic_muted}));
+
+  if (window.alfredSocket) window.alfredSocket.on('audio_settings', data => {
+    settings = {...settings, ...data}; render();
+  });
+  render(); refresh();
+})();

alfred/app/static/js/alfred-mode-icons.js

@@ -0,0 +1,35 @@
+/* Icônes de statut : compatible avec alfred.js existant, sans le remplacer. */
+(() => {
+  'use strict';
+  const el = document.getElementById('mode');
+  if (!el) return;
+  const icons = {
+    idle: ['🛏️', 'Repos'], repos: ['🛏️', 'Repos'],
+    listening: ['👂', 'Écoute'], thinking: ['🧠', 'Réflexion'],
+    speaking: ['🔊', 'Parole'], error: ['⚠️', 'Erreur']
+  };
+  let current = 'idle';
+  function apply(raw) {
+    const key = String(raw || '').trim().toLowerCase();
+    if (!icons[key]) return;
+    current = key;
+    const [icon, label] = icons[key];
+    if (el.textContent !== icon) el.textContent = icon;
+    el.title = label;
+    el.setAttribute('aria-label', label);
+    el.dataset.mode = key;
+  }
+  // L'ancien alfred.js écrit le nom du mode dans #mode.
+  // L'observateur le convertit immédiatement en icône, sans modifier ce script.
+  const observer = new MutationObserver(() => {
+    const value = el.textContent.trim();
+    if (icons[value.toLowerCase()]) apply(value);
+  });
+  observer.observe(el, { childList: true, characterData: true, subtree: true });
+  apply(el.textContent);
+  // Récupère également l'état actuel après un rafraîchissement de page.
+  fetch('/api/state', { cache: 'no-store' })
+    .then(r => { if (!r.ok) throw new Error('État indisponible'); return r.json(); })
+    .then(data => { if (data && data.mode) apply(data.mode); })
+    .catch(() => {});
+})();

alfred/app/static/js/alfred.js

@@ -0,0 +1,121 @@
+/* Interface principale Alfred : statut, scène, onde et transcription Vosk. */
+(() => {
+  'use strict';
+  const socket = (typeof io === 'function') ? io() : null;
+  window.alfredSocket = socket;
+
+  const content = document.getElementById('content');
+  const modeEl = document.getElementById('mode');
+  const statusDot = document.getElementById('statusDot');
+  const transcriptText = document.getElementById('transcriptText');
+  const transcriptState = document.getElementById('transcriptState');
+  const transcriptPanel = document.querySelector('.transcript-panel');
+  const canvas = document.getElementById('waveCanvas');
+  const ctx = canvas.getContext('2d');
+
+  let mode = 'idle', level = 0.02, phase = 0, previousContent = '';
+  const labels = {
+    idle:'En attente', waiting:'En attente', listening:'À l’écoute',
+    thinking:'Réflexion en cours', speaking:'Alfred parle', error:'Erreur'
+  };
+
+  function resize() {
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.round(canvas.clientWidth * dpr);
+    canvas.height = Math.round(canvas.clientHeight * dpr);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+  function draw() {
+    const dpr = window.devicePixelRatio || 1;
+    phase += 0.035;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = 'rgba(232,241,243,.76)';
+    ctx.lineWidth = 1.6 * dpr;
+    ctx.beginPath();
+    const mid = canvas.height / 2;
+    const amp = (mode === 'idle' ? 1.5 : mode === 'thinking' ? 7 : Math.max(5, level * 45)) * dpr;
+    for (let x = 0; x < canvas.width; x += 4 * dpr) {
+      const y = mid + Math.sin(x * 0.018 + phase * 4) * Math.sin(x * 0.006 + phase) * amp *
+        (0.35 + 0.65 * Math.sin(x / canvas.width * Math.PI));
+      if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    window.requestAnimationFrame(draw);
+  }
+  window.requestAnimationFrame(draw);
+
+  function makeText(tag, value, className) {
+    const el = document.createElement(tag);
+    if (className) el.className = className;
+    el.textContent = String(value ?? '');
+    return el;
+  }
+
+  function render(data) {
+    if (!data || typeof data !== 'object') return;
+    const key = JSON.stringify(data);
+    if (key === previousContent) return;
+    previousContent = key;
+    const fragment = document.createDocumentFragment();
+    if (data.type === 'image' && typeof data.url === 'string') {
+      // Refuser les URL javascript: et les schémas non prévus.
+      if (/^(https?:\/\/|\/[^/])/i.test(data.url)) {
+        const img = document.createElement('img');
+        img.className = 'hero'; img.src = data.url; img.alt = String(data.alt || 'Image affichée par Alfred');
+        fragment.appendChild(img);
+      }
+      if (data.caption) fragment.appendChild(makeText('p', data.caption));
+    } else if (data.type === 'cards' && Array.isArray(data.items)) {
+      const cards = document.createElement('div'); cards.className = 'cards';
+      data.items.forEach(item => {
+        const card = makeText('article', '', 'card');
+        card.append(makeText('h2', item.title || ''), makeText('p', item.text || ''));
+        cards.appendChild(card);
+      });
+      fragment.appendChild(cards);
+    } else {
+      if (data.title) fragment.appendChild(makeText('h1', data.title));
+      fragment.appendChild(makeText('p', data.text || ''));
+    }
+    content.replaceChildren(fragment);
+  }
+
+  function updateTranscript(s) {
+    // Une phrase finale reste visible lors du retour en veille.
+    const finalText = String(s.transcript || '').trim();
+    const partial = String(s.partial || '').trim();
+    if (finalText) {
+      transcriptText.textContent = finalText;
+      transcriptText.classList.remove('is-placeholder');
+      transcriptState.textContent = 'Reconnu';
+    } else if (s.mode === 'listening') {
+      transcriptText.textContent = partial || 'Je vous écoute…';
+      transcriptText.classList.toggle('is-placeholder', !partial);
+      transcriptState.textContent = partial ? 'En cours' : 'Écoute';
+    } else if (s.mode === 'error') {
+      transcriptState.textContent = 'Erreur';
+    }
+    transcriptPanel.dataset.active = String(s.mode === 'listening');
+  }
+
+  function updateState(s) {
+    if (!s || typeof s !== 'object') return;
+    mode = String(s.mode || 'idle').toLowerCase();
+    modeEl.textContent = labels[mode] || mode;
+    modeEl.dataset.mode = mode;
+    statusDot.dataset.mode = mode;
+    updateTranscript(s);
+    if (s.content) render(s.content);
+  }
+
+  if (socket) {
+    socket.on('alfred_state', updateState);
+    socket.on('alfred_render', render);
+    socket.on('audio_level', data => { level = Math.max(0, Math.min(1, Number(data.level) || 0)); });
+    socket.on('connect', () => {
+      fetch('/api/state', {cache:'no-store'}).then(r => r.json()).then(updateState).catch(() => {});
+    });
+  }
+  fetch('/api/state', {cache:'no-store'}).then(r => r.json()).then(updateState).catch(() => {});
+})();