feat(web): cria painel Svelte com shell, Ao vivo e Ajustes
- web/ com Vite + Svelte 5 + TypeScript; servidor entrega web/dist em "/" (telas antigas seguem em /dashboard, /painel, /braco...) - design system em tokens CSS, tema escuro e claro, fontes locais - estado unico: foto de /estado + um EventSource em /eventos, sem polling - shell com navegacao lateral/inferior, selos de status reais e E-Stop fixo - command palette (Ctrl+K), gestos favoritos com atalhos 1-9, g+letra navega - Ao vivo: camera WebRTC e rastreamento portados para TS, rosto, aparencia, sensores do celular, IA local e feed de acontecimentos - Ajustes: campos do celular agrupados com busca, salvamento otimista e restaurar padrao (GET /app/padrao); motor da conversa, Gemini e token - carinha.html ganha modo ?painel=1 dirigido por postMessage (sem polling) - teste Playwright de ponta a ponta do painel novo Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
julio
@@ -0,0 +1,388 @@
|
||||
<script lang="ts">
|
||||
import { Battery, Brain, Camera, Download, Ear, Moon, RefreshCw, ScanFace } from '@lucide/svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { postar } from '../lib/api';
|
||||
import { salvarApp } from '../lib/ajustes.svelte';
|
||||
import { tentar } from '../lib/avisos.svelte';
|
||||
import { cor, CORES, hex, recarregarCelular, rgb, rosto } from '../lib/comandos.svelte';
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
import Gestos from '../lib/componentes/Gestos.svelte';
|
||||
import RostoPrevia from '../lib/componentes/RostoPrevia.svelte';
|
||||
import Selo from '../lib/componentes/Selo.svelte';
|
||||
import Toggle from '../lib/componentes/Toggle.svelte';
|
||||
import { estado } from '../lib/estado.svelte';
|
||||
import { Rastreamento } from '../lib/rastreamento.svelte';
|
||||
import { VideoAoVivo } from '../lib/video.svelte';
|
||||
|
||||
let elVideo: HTMLVideoElement;
|
||||
let elTela: HTMLCanvasElement;
|
||||
let video = $state<VideoAoVivo>();
|
||||
let rastreio = $state<Rastreamento>();
|
||||
|
||||
onMount(() => {
|
||||
video = new VideoAoVivo(elVideo);
|
||||
rastreio = new Rastreamento(elVideo, elTela, video);
|
||||
});
|
||||
onDestroy(() => {
|
||||
rastreio?.destruir();
|
||||
video?.destruir();
|
||||
});
|
||||
|
||||
// Vídeo e rastreamento seguem o estado do servidor (SSE), sem polling próprio.
|
||||
$effect(() => {
|
||||
const cfg = estado.appConfig ? { ...estado.appConfig } : null;
|
||||
const online = estado.celularOnline;
|
||||
video?.atualizar(estado.app, cfg, online);
|
||||
const dormindo = !!estado.app?.estado?.dormindo;
|
||||
const permitido = !!cfg?.preview && online && cfg.sensorCamera !== false && (!dormindo || !!cfg.cameraSono);
|
||||
rastreio?.atualizar(cfg, permitido);
|
||||
});
|
||||
|
||||
const sensores = $derived(estado.app?.estado ?? {});
|
||||
const bateria = $derived.by(() => {
|
||||
const b = sensores.bateria;
|
||||
const n = typeof b === 'number' ? b : b?.nivel;
|
||||
return typeof n === 'number' ? Math.round(n <= 1 ? n * 100 : n) : null;
|
||||
});
|
||||
const pct = (v: unknown) => (typeof v === 'number' ? Math.round(Math.min(1, v) * 100) : 0);
|
||||
const hora = (t: number) => new Date(t).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
|
||||
async function foto() {
|
||||
if (!elVideo.videoWidth) return;
|
||||
const c = document.createElement('canvas');
|
||||
c.width = elVideo.videoWidth;
|
||||
c.height = elVideo.videoHeight;
|
||||
c.getContext('2d')!.drawImage(elVideo, 0, 0);
|
||||
const a = document.createElement('a');
|
||||
a.href = c.toDataURL('image/png');
|
||||
a.download = `carinha-${new Date().toISOString().replace(/[:.]/g, '-')}.png`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
const iaLocal = (ativo: boolean) => tentar(() => postar('/ia/config', { ativo }), ativo ? 'Personalidade local ligada.' : 'Personalidade local desligada.');
|
||||
</script>
|
||||
|
||||
<div class="ao-vivo">
|
||||
<section class="palco">
|
||||
<div class="quadro camera">
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video bind:this={elVideo} muted playsinline autoplay hidden={!video?.exibindo}></video>
|
||||
<canvas bind:this={elTela} class="sobreposicao" aria-hidden="true"></canvas>
|
||||
{#if !video?.exibindo}
|
||||
<div class="vazio">
|
||||
<Camera size={32} />
|
||||
<p>{video?.mensagem ?? 'Carregando…'}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="rodape">
|
||||
<Selo tom={video?.exibindo ? 'ok' : 'neutro'}>Câmera</Selo>
|
||||
{#if video?.qualidade && video.exibindo}<span class="mono fraco">{video.qualidade}</span>{/if}
|
||||
<span class="espaco"></span>
|
||||
{#if video?.exibindo}
|
||||
<button class="btn pequeno" onclick={foto}><Download size={14} /> Foto</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="quadro rosto">
|
||||
<RostoPrevia titulo="Rosto ao vivo" />
|
||||
<div class="rodape">
|
||||
<Selo tom={estado.celularOnline ? 'ok' : 'neutro'}>Rosto {estado.celularOnline ? 'no celular' : '· prévia'}</Selo>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="controles">
|
||||
<div class="transmissao">
|
||||
<Toggle
|
||||
rotulo="Transmitir câmera do celular"
|
||||
ajuda="Vídeo direto do celular para este PC (WebRTC)"
|
||||
checked={!!estado.appConfig?.preview}
|
||||
disabled={!estado.appConfig}
|
||||
onchange={(v) => salvarApp({ preview: v })}
|
||||
/>
|
||||
{#if rastreio && estado.appConfig?.preview}
|
||||
<p class="fraco pequeno-texto linha"><ScanFace size={14} /> {rastreio.texto}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grade-cards">
|
||||
<Card titulo="Gestos" descricao="Favoritos com atalho de 1 a 9. Fixe outros na tela de Reações ou pelo Ctrl+K.">
|
||||
<Gestos />
|
||||
</Card>
|
||||
|
||||
<Card titulo="Aparência">
|
||||
<div class="campo">
|
||||
<span>Rosto</span>
|
||||
<div class="segmentado" role="radiogroup" aria-label="Rosto">
|
||||
{#each estado.rostos as r (r)}
|
||||
<button role="radio" aria-checked={estado.aparencia.rosto === r} onclick={() => rosto(r)}>{r}</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="campo">
|
||||
<span>Cor dos olhos</span>
|
||||
<div class="cores">
|
||||
{#each CORES as c (c.nome)}
|
||||
<button
|
||||
class="cor"
|
||||
style="--c: {hex(c.rgb)}"
|
||||
aria-label={c.nome}
|
||||
aria-pressed={hex(estado.aparencia.cor) === hex(c.rgb)}
|
||||
onclick={() => cor(c.rgb)}
|
||||
></button>
|
||||
{/each}
|
||||
<label class="cor livre" style="--c: {hex(estado.aparencia.cor)}" title="Outra cor">
|
||||
<input type="color" value={hex(estado.aparencia.cor)} onchange={(e) => cor(rgb(e.currentTarget.value))} />
|
||||
<span class="sr-only">Escolher outra cor</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card titulo="Celular">
|
||||
{#snippet acoes()}
|
||||
<button class="btn pequeno" onclick={recarregarCelular} disabled={!estado.celularOnline}>
|
||||
<RefreshCw size={14} /> Recarregar tela
|
||||
</button>
|
||||
{/snippet}
|
||||
{#if estado.celularOnline}
|
||||
<dl class="sensores">
|
||||
<div>
|
||||
<dt><Battery size={16} /> Bateria</dt>
|
||||
<dd>{bateria !== null ? bateria + '%' : '—'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt><Moon size={16} /> Estado</dt>
|
||||
<dd>{sensores.dormindo ? 'Dormindo' : 'Acordado'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt><Ear size={16} /> Som</dt>
|
||||
<dd>
|
||||
{#if sensores.microfone_ativo}
|
||||
<meter min="0" max="100" value={pct(sensores.microfone)} aria-label="Nível de som"></meter>
|
||||
{:else}<span class="fraco">desligado</span>{/if}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt><Camera size={16} /> Movimento</dt>
|
||||
<dd>
|
||||
{#if sensores.camera_ativa}
|
||||
<meter min="0" max="100" value={pct((sensores.movimento as number) * 5)} aria-label="Movimento"></meter>
|
||||
{:else}<span class="fraco">desligado</span>{/if}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="fraco pequeno-texto mono">{estado.app?.celular_ip ?? ''}</p>
|
||||
{:else}
|
||||
<p class="fraco pequeno-texto">
|
||||
O celular não está enviando sinais. Abra o app Carinha no aparelho e confira se ele aponta para este servidor.
|
||||
</p>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<Card titulo="Personalidade local" descricao="Qwen escolhe expressões a partir de sons e movimentos.">
|
||||
<Toggle
|
||||
rotulo="Reagir sozinho com IA local"
|
||||
ajuda={estado.ia ? `${estado.ia.modelo} · ${estado.ia.executor}` : ''}
|
||||
checked={!!estado.ia?.ativo}
|
||||
disabled={!estado.ia}
|
||||
onchange={iaLocal}
|
||||
/>
|
||||
{#if estado.ia?.ultima}
|
||||
<p class="pequeno-texto linha">
|
||||
<Brain size={14} /> Último: {estado.ia.ultima.evento} → <strong>{estado.ia.ultima.gesto}</strong>
|
||||
<span class="fraco">({estado.ia.ultima.segundos}s)</span>
|
||||
</p>
|
||||
{/if}
|
||||
{#if estado.ia?.erro}<p class="erro pequeno-texto">{estado.ia.erro}</p>{/if}
|
||||
</Card>
|
||||
|
||||
<Card titulo="Acontecimentos" class="feed">
|
||||
{#if estado.feed.length}
|
||||
<ol>
|
||||
{#each estado.feed as item (item.id)}
|
||||
<li class={item.tipo}><time class="mono fraco">{hora(item.quando)}</time> {item.texto}</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{:else}
|
||||
<p class="fraco pequeno-texto">Gestos, respostas e reações aparecem aqui assim que acontecerem.</p>
|
||||
{/if}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ao-vivo {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
}
|
||||
.palco {
|
||||
display: grid;
|
||||
gap: var(--e-3);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.quadro {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--raio-lg);
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
border: 1px solid var(--borda);
|
||||
}
|
||||
.camera video,
|
||||
.sobreposicao {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.sobreposicao {
|
||||
pointer-events: none;
|
||||
}
|
||||
.vazio {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
gap: var(--e-2);
|
||||
padding: var(--e-5);
|
||||
text-align: center;
|
||||
color: #8396ab;
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
.rodape {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding: var(--e-2) var(--e-3);
|
||||
background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
|
||||
color: #e8eef6;
|
||||
font-size: var(--t-xs);
|
||||
pointer-events: none;
|
||||
}
|
||||
.rodape button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.espaco {
|
||||
flex: 1;
|
||||
}
|
||||
.controles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--e-4);
|
||||
align-items: center;
|
||||
}
|
||||
.transmissao {
|
||||
display: grid;
|
||||
gap: var(--e-1);
|
||||
min-width: min(100%, 420px);
|
||||
}
|
||||
.grade-cards {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
|
||||
}
|
||||
.segmentado {
|
||||
display: flex;
|
||||
background: var(--fundo-2);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-sm);
|
||||
padding: 3px;
|
||||
gap: 3px;
|
||||
}
|
||||
.segmentado button {
|
||||
flex: 1;
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--texto-2);
|
||||
font: 500 var(--t-sm) var(--fonte);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
}
|
||||
.segmentado button[aria-checked='true'] {
|
||||
background: var(--superficie-3);
|
||||
color: var(--texto);
|
||||
}
|
||||
.cores {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--e-2);
|
||||
}
|
||||
.cor {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--borda-forte);
|
||||
background: var(--c);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.cor[aria-pressed='true'] {
|
||||
outline: 2px solid var(--texto);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.livre {
|
||||
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
|
||||
}
|
||||
.livre input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sensores {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--e-3);
|
||||
margin: 0;
|
||||
}
|
||||
.sensores div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
dt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: var(--t-xs);
|
||||
color: var(--texto-3);
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
.erro {
|
||||
color: var(--perigo);
|
||||
}
|
||||
:global(.feed) ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--e-2);
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
:global(.feed) li.estop {
|
||||
color: var(--aviso);
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.palco {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user