Init commit
This commit is contained in:
pporcheret
@@ -0,0 +1,30 @@
|
||||
/* Contrôles indépendants de la feuille alfred.css existante */
|
||||
body > main { position: relative; min-height: 100dvh; padding-bottom: 82px; box-sizing: border-box; }
|
||||
.alfred-controls {
|
||||
position: absolute; left: 16px; right: 16px; bottom: 12px;
|
||||
display: flex; align-items: center; gap: 14px; min-height: 56px;
|
||||
padding: 8px 18px; box-sizing: border-box;
|
||||
border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
|
||||
background: rgba(35,37,41,.92); color: #f4f4f5;
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.14);
|
||||
font: 14px/1.3 system-ui, sans-serif;
|
||||
}
|
||||
.alfred-controls .audio-toggle { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font-size: 23px; cursor: pointer; }
|
||||
.alfred-controls .audio-toggle:hover, .alfred-controls .audio-toggle:focus-visible { background: rgba(255,255,255,.10); outline-offset: 2px; }
|
||||
.alfred-controls .audio-toggle[aria-pressed="true"] { background: rgba(225,100,100,.14); border-color: rgba(225,100,100,.28); }
|
||||
.alfred-controls .volume-label { white-space: nowrap; color: #c8c8ce; }
|
||||
.alfred-controls input[type="range"] { min-width: 60px; flex: 1; accent-color: #d1d5db; cursor: pointer; }
|
||||
.alfred-controls output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.alfred-controls .controls-separator { height: 25px; width: 1px; background: rgba(255,255,255,.16); }
|
||||
@media (max-width: 480px) { .alfred-controls { gap: 8px; padding: 6px 9px; left: 8px; right: 8px; } .alfred-controls .volume-label { display: none; } }
|
||||
|
||||
/* Deux curseurs dans la barre inférieure */
|
||||
.alfred-controls { gap: 10px; }
|
||||
.alfred-controls input[type="range"] { min-width: 55px; }
|
||||
.alfred-controls output { min-width: 48px; }
|
||||
@media (max-width: 700px) {
|
||||
body > main { padding-bottom: 126px; }
|
||||
.alfred-controls { flex-wrap: wrap; justify-content: center; }
|
||||
.alfred-controls input[type="range"] { flex: 1 1 80px; }
|
||||
.alfred-controls .controls-separator { display: none; }
|
||||
}
|
||||
@@ -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; } }
|
||||
@@ -0,0 +1 @@
|
||||
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f5f5;background:#242628}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 30%,#303336,#202224 65%);min-height:100vh;color:#fff}main{min-height:100vh;display:grid;grid-template-rows:auto 1fr 120px;padding:28px 42px;gap:18px}header{display:flex;justify-content:space-between;opacity:.72;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}#stage{display:flex;align-items:center;justify-content:center;overflow:hidden}#content{width:min(1100px,92vw);text-align:center;transition:opacity .45s ease,transform .45s ease;animation:appear .55s ease}#content.swap{opacity:0;transform:translateY(12px) scale(.99)}h1{font-size:clamp(2rem,5vw,5rem);font-weight:350;margin:.2em}p{font-size:clamp(1rem,2vw,1.5rem);color:#d4d4d4}.hero{max-width:min(100%,900px);max-height:62vh;border-radius:18px;box-shadow:0 25px 70px #0008;animation:imageIn .9s cubic-bezier(.2,.8,.2,1)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left}.card{padding:18px;border:1px solid #ffffff1c;background:#ffffff0a;border-radius:16px;backdrop-filter:blur(8px)}#wave{display:flex;align-items:center}canvas{width:100%;height:100%}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes imageIn{from{opacity:0;filter:blur(14px);transform:scale(.965)}to{opacity:1;filter:blur(0);transform:scale(1)}}
|
||||
@@ -0,0 +1,90 @@
|
||||
(() => {
|
||||
'use strict';
|
||||
const slider = document.getElementById('volumeSlider');
|
||||
const volumeValue = document.getElementById('volumeValue');
|
||||
const speaker = document.getElementById('speakerMute');
|
||||
const mic = document.getElementById('micMute');
|
||||
const micGain = document.getElementById('micGainSlider');
|
||||
const micGainValue = document.getElementById('micGainValue');
|
||||
const endpoint = '/api/audio/settings';
|
||||
let state = { volume: 70, mic_gain: null, speaker_muted: false, mic_muted: false };
|
||||
let saveTimer;
|
||||
|
||||
function render() {
|
||||
slider.value = String(state.volume);
|
||||
volumeValue.value = `${state.volume} %`;
|
||||
if (Number.isFinite(state.mic_gain)) {
|
||||
micGain.value = String(state.mic_gain);
|
||||
micGainValue.textContent = `${state.mic_gain} %`;
|
||||
micGain.disabled = false;
|
||||
} else {
|
||||
micGainValue.textContent = 'N/D';
|
||||
micGain.disabled = true;
|
||||
}
|
||||
speaker.setAttribute('aria-pressed', String(state.speaker_muted));
|
||||
speaker.setAttribute('aria-label', state.speaker_muted ? 'Réactiver le haut-parleur' : 'Couper le haut-parleur');
|
||||
speaker.title = speaker.getAttribute('aria-label');
|
||||
speaker.textContent = state.speaker_muted ? '🔇' : '🔊';
|
||||
mic.setAttribute('aria-pressed', String(state.mic_muted));
|
||||
mic.setAttribute('aria-label', state.mic_muted ? 'Réactiver le microphone' : 'Couper le microphone');
|
||||
mic.title = mic.getAttribute('aria-label');
|
||||
mic.textContent = state.mic_muted ? '🎙️̸' : '🎙️';
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(Object.fromEntries(Object.entries(state).filter(([k,v]) => v !== null)))
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const result = await response.json();
|
||||
if (result && typeof result.volume === 'number') {
|
||||
state = { ...state, ...result };
|
||||
render();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Réglages audio non synchronisés avec Flask :', error);
|
||||
}
|
||||
}
|
||||
|
||||
slider.addEventListener('input', () => {
|
||||
state.volume = Number(slider.value);
|
||||
render();
|
||||
clearTimeout(saveTimer);
|
||||
saveTimer = setTimeout(save, 200);
|
||||
});
|
||||
micGain.addEventListener('input', () => {
|
||||
state.mic_gain = Number(micGain.value);
|
||||
render();
|
||||
clearTimeout(saveTimer);
|
||||
saveTimer = setTimeout(save, 250);
|
||||
});
|
||||
speaker.addEventListener('click', () => {
|
||||
state.speaker_muted = !state.speaker_muted;
|
||||
render();
|
||||
clearTimeout(saveTimer);
|
||||
save();
|
||||
});
|
||||
mic.addEventListener('click', () => {
|
||||
state.mic_muted = !state.mic_muted;
|
||||
render();
|
||||
clearTimeout(saveTimer);
|
||||
save();
|
||||
});
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const response = await fetch(endpoint);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const settings = await response.json();
|
||||
if (typeof settings.mic_gain === 'number') state.mic_gain = Math.max(0, Math.min(100, settings.mic_gain));
|
||||
if (typeof settings.volume === 'number') state.volume = Math.max(0, Math.min(100, settings.volume));
|
||||
if (typeof settings.speaker_muted === 'boolean') state.speaker_muted = settings.speaker_muted;
|
||||
if (typeof settings.mic_muted === 'boolean') state.mic_muted = settings.mic_muted;
|
||||
} catch (error) {
|
||||
console.warn('Réglages audio non disponibles :', error);
|
||||
}
|
||||
render();
|
||||
})();
|
||||
})();
|
||||
@@ -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(() => {});
|
||||
})();
|
||||
@@ -0,0 +1,7 @@
|
||||
const socket=io(), content=document.querySelector('#content'), modeEl=document.querySelector('#mode');
|
||||
const canvas=document.querySelector('#waveCanvas'), ctx=canvas.getContext('2d'); let mode='idle',level=.02,t=0;
|
||||
function resize(){canvas.width=canvas.clientWidth*devicePixelRatio;canvas.height=canvas.clientHeight*devicePixelRatio} addEventListener('resize',resize);resize();
|
||||
function draw(){t+=.035;ctx.clearRect(0,0,canvas.width,canvas.height);ctx.strokeStyle='rgba(255,255,255,.85)';ctx.lineWidth=2*devicePixelRatio;ctx.beginPath();let mid=canvas.height/2,amp=(mode==='idle'?1:mode==='thinking'?8:Math.max(5,level*45))*devicePixelRatio;for(let x=0;x<canvas.width;x+=4*devicePixelRatio){let y=mid+Math.sin(x*.018+t*4)*Math.sin(x*.006+t)*amp*(.35+.65*Math.sin(x/canvas.width*Math.PI));x?ctx.lineTo(x,y):ctx.moveTo(x,y)}ctx.stroke();requestAnimationFrame(draw)}draw();
|
||||
function swap(html){content.classList.add('swap');setTimeout(()=>{content.innerHTML=html;content.classList.remove('swap')},260)}
|
||||
function render(d){if(d.type==='image') swap(`<img class="hero" src="${d.url}" alt="${d.alt||''}"><p>${d.caption||''}</p>`);else if(d.type==='cards') swap(`<div class="cards">${(d.items||[]).map(i=>`<article class="card"><h2>${i.title||''}</h2><p>${i.text||''}</p></article>`).join('')}</div>`);else swap(`<h1>${d.title||''}</h1><p>${d.text||''}</p>`)}
|
||||
socket.on('alfred_state',s=>{mode=s.mode||'idle';modeEl.textContent=mode;if(s.content)render(s.content)});socket.on('alfred_render',render);socket.on('audio_level',d=>level=d.level||0);
|
||||
Reference in New Issue
Block a user