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,341 @@
|
||||
<script lang="ts">
|
||||
import { Download, KeyRound, RefreshCw, RotateCcw, Search, ShieldCheck, ShieldOff } from '@lucide/svelte';
|
||||
import { gravarToken, lerToken, postar } from '../lib/api';
|
||||
import { GRUPOS, restaurarPadrao, salvarApp, type Campo } from '../lib/ajustes.svelte';
|
||||
import { avisos, tentar } from '../lib/avisos.svelte';
|
||||
import { recarregarCelular } from '../lib/comandos.svelte';
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
import Selo from '../lib/componentes/Selo.svelte';
|
||||
import Slider from '../lib/componentes/Slider.svelte';
|
||||
import Toggle from '../lib/componentes/Toggle.svelte';
|
||||
import { conectar, estado } from '../lib/estado.svelte';
|
||||
|
||||
// ---------- busca nos ajustes do celular
|
||||
let busca = $state('');
|
||||
const normal = (t: string) => t.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
|
||||
const grupos = $derived(
|
||||
GRUPOS.map((g) => ({
|
||||
...g,
|
||||
campos: g.campos.filter((c) => !busca || normal(c.rotulo + ' ' + (c.ajuda ?? '')).includes(normal(busca))),
|
||||
})).filter((g) => g.campos.length),
|
||||
);
|
||||
const valor = (c: Campo) => estado.appConfig?.[c.chave];
|
||||
|
||||
let confirmarPadrao = $state(false);
|
||||
|
||||
// ---------- IA
|
||||
let modelo = $state('');
|
||||
let chave = $state('');
|
||||
let testando = $state(false);
|
||||
let resultadoTeste = $state<{ ok: boolean; mensagem: string; segundos?: number } | null>(null);
|
||||
$effect(() => {
|
||||
if (estado.api && !modelo) modelo = estado.api.modelo;
|
||||
});
|
||||
|
||||
async function trocarProvedor(provedor: string) {
|
||||
await tentar(async () => {
|
||||
estado.conversa = await postar('/conversa/config', { provedor });
|
||||
}, provedor === 'gemini' ? 'Conversa usando Gemini.' : 'Conversa usando Qwen local.');
|
||||
}
|
||||
|
||||
async function salvarGemini(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const dados: Record<string, string> = { modelo: modelo.trim() };
|
||||
if (chave.trim()) dados.chave = chave.trim();
|
||||
const r = await tentar(() => postar('/api/configuracao/salvar', dados), 'Configuração do Gemini salva.');
|
||||
if (r) {
|
||||
estado.api = r;
|
||||
chave = '';
|
||||
resultadoTeste = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function testarGemini() {
|
||||
testando = true;
|
||||
resultadoTeste = (await tentar(() => postar('/api/configuracao/testar'))) ?? null;
|
||||
testando = false;
|
||||
}
|
||||
|
||||
// ---------- segurança
|
||||
let tokenLocal = $state(!!lerToken());
|
||||
function esquecerToken() {
|
||||
gravarToken('');
|
||||
tokenLocal = false;
|
||||
avisos.ok('Token removido deste navegador.');
|
||||
if (estado.autenticacao) conectar();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="ajustes">
|
||||
<Card titulo="Celular" descricao="Mudanças valem na hora no aparelho. Nada trava enquanto salva.">
|
||||
{#snippet acoes()}
|
||||
<label class="busca">
|
||||
<Search size={16} />
|
||||
<input type="search" bind:value={busca} placeholder="Buscar ajuste" aria-label="Buscar ajuste" />
|
||||
</label>
|
||||
{#if confirmarPadrao}
|
||||
<span class="pequeno-texto">Restaurar todos?</span>
|
||||
<button
|
||||
class="btn pequeno perigo"
|
||||
onclick={async () => {
|
||||
confirmarPadrao = false;
|
||||
await tentar(restaurarPadrao);
|
||||
}}>Sim, restaurar</button
|
||||
>
|
||||
<button class="btn pequeno" onclick={() => (confirmarPadrao = false)}>Cancelar</button>
|
||||
{:else}
|
||||
<button class="btn pequeno" onclick={() => (confirmarPadrao = true)} disabled={!estado.appConfig}>
|
||||
<RotateCcw size={14} /> Restaurar padrão
|
||||
</button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#if !estado.appConfig}
|
||||
<p class="fraco">Carregando ajustes…</p>
|
||||
{:else}
|
||||
<div class="grupos">
|
||||
{#each grupos as g (g.titulo)}
|
||||
<fieldset>
|
||||
<legend>
|
||||
<strong>{g.titulo}</strong>
|
||||
<span class="fraco pequeno-texto">{g.descricao}</span>
|
||||
</legend>
|
||||
{#each g.campos as c (c.chave)}
|
||||
{#if c.tipo === 'toggle'}
|
||||
<Toggle rotulo={c.rotulo} ajuda={c.ajuda} checked={!!valor(c)} onchange={(v) => salvarApp({ [c.chave]: v })} />
|
||||
{:else if c.tipo === 'slider'}
|
||||
<Slider
|
||||
rotulo={c.rotulo}
|
||||
valor={Number(valor(c) ?? 0)}
|
||||
min={c.min!}
|
||||
max={c.max!}
|
||||
passo={c.passo}
|
||||
unidade={c.unidade}
|
||||
onchange={(v) => salvarApp({ [c.chave]: v })}
|
||||
/>
|
||||
{:else}
|
||||
<label class="campo escolha">
|
||||
<span>{c.rotulo}</span>
|
||||
<select
|
||||
value={String(valor(c))}
|
||||
onchange={(e) => {
|
||||
const v = e.currentTarget.value;
|
||||
salvarApp({ [c.chave]: typeof c.opcoes![0][0] === 'number' ? Number(v) : v });
|
||||
}}
|
||||
>
|
||||
{#each c.opcoes! as [v, t] (v)}<option value={String(v)}>{t}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
{/each}
|
||||
</fieldset>
|
||||
{:else}
|
||||
<p class="fraco">Nenhum ajuste com “{busca}”.</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<div class="coluna">
|
||||
<Card titulo="Inteligência artificial">
|
||||
<div class="campo">
|
||||
<span>Motor da conversa</span>
|
||||
<div class="segmentado" role="radiogroup" aria-label="Motor da conversa">
|
||||
<button role="radio" aria-checked={estado.conversa?.provedor === 'local'} onclick={() => trocarProvedor('local')}>
|
||||
Qwen local
|
||||
</button>
|
||||
<button
|
||||
role="radio"
|
||||
aria-checked={estado.conversa?.provedor === 'gemini'}
|
||||
disabled={!estado.api?.configurada}
|
||||
title={estado.api?.configurada ? '' : 'Configure a chave do Gemini abaixo'}
|
||||
onclick={() => trocarProvedor('gemini')}
|
||||
>
|
||||
Gemini
|
||||
</button>
|
||||
</div>
|
||||
<small class="fraco">Local roda no celular/placa, sem custo. Gemini responde melhor e cria reações.</small>
|
||||
</div>
|
||||
|
||||
<form class="gemini" onsubmit={salvarGemini}>
|
||||
<div class="linha entre">
|
||||
<strong class="pequeno-texto">Gemini</strong>
|
||||
<Selo tom={estado.api?.configurada ? 'ok' : 'aviso'}>{estado.api?.configurada ? 'Chave configurada' : 'Sem chave'}</Selo>
|
||||
</div>
|
||||
<label class="campo">
|
||||
<span>Modelo</span>
|
||||
<input type="text" bind:value={modelo} list="modelos-gemini" required pattern="[a-zA-Z0-9._\-]{'{'}3,100{'}'}" />
|
||||
<datalist id="modelos-gemini">
|
||||
<option value="gemini-flash-lite-latest"></option>
|
||||
<option value="gemini-flash-latest"></option>
|
||||
<option value="gemini-2.5-flash-lite"></option>
|
||||
<option value="gemini-2.5-flash"></option>
|
||||
<option value="gemini-2.5-pro"></option>
|
||||
</datalist>
|
||||
</label>
|
||||
<label class="campo">
|
||||
<span>Chave de API {estado.api?.configurada ? '(deixe vazio para manter)' : ''}</span>
|
||||
<input type="password" bind:value={chave} autocomplete="off" placeholder="AIza…" />
|
||||
</label>
|
||||
<div class="linha">
|
||||
<button class="btn primario" type="submit"><KeyRound size={16} /> Salvar</button>
|
||||
<button class="btn" type="button" onclick={testarGemini} disabled={testando || !estado.api?.configurada}>
|
||||
{testando ? 'Testando…' : 'Testar conexão'}
|
||||
</button>
|
||||
</div>
|
||||
{#if resultadoTeste}
|
||||
<p class="pequeno-texto" class:ok={resultadoTeste.ok} class:erro={!resultadoTeste.ok}>
|
||||
{resultadoTeste.mensagem}{resultadoTeste.segundos ? ` (${resultadoTeste.segundos}s)` : ''}
|
||||
</p>
|
||||
{/if}
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<Card titulo="Segurança">
|
||||
<div class="linha">
|
||||
{#if estado.autenticacao}
|
||||
<Selo tom="ok"><ShieldCheck size={12} /> Servidor exige token</Selo>
|
||||
{:else}
|
||||
<Selo tom="aviso"><ShieldOff size={12} /> Servidor aberto na rede</Selo>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="fraco pequeno-texto">
|
||||
{#if estado.autenticacao}
|
||||
Só quem tem o token controla o robô. Ele fica guardado apenas neste navegador.
|
||||
{:else}
|
||||
Qualquer aparelho da rede local pode controlar o robô. Defina <span class="mono">CARINHA_TOKEN</span> na placa
|
||||
(veja docs/SEGURANCA.md) depois de atualizar o app do celular.
|
||||
{/if}
|
||||
</p>
|
||||
{#if tokenLocal}
|
||||
<button class="btn pequeno" onclick={esquecerToken}>Esquecer token neste navegador</button>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<Card titulo="Sistema">
|
||||
<dl class="info">
|
||||
<div><dt>Versão do servidor</dt><dd class="mono">{estado.versao || '—'}</dd></div>
|
||||
<div><dt>Celular</dt><dd class="mono">{estado.app?.celular_ip ?? 'offline'}</dd></div>
|
||||
<div><dt>Servidor</dt><dd class="mono">{location.host}</dd></div>
|
||||
</dl>
|
||||
<div class="linha">
|
||||
<button class="btn pequeno" onclick={recarregarCelular} disabled={!estado.celularOnline}>
|
||||
<RefreshCw size={14} /> Recarregar tela do celular
|
||||
</button>
|
||||
<a class="btn pequeno" href="/app.apk" download><Download size={14} /> Baixar app Android</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ajustes {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
align-items: start;
|
||||
}
|
||||
.coluna {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
}
|
||||
.busca {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding-left: var(--e-3);
|
||||
border: 1px solid var(--borda-forte);
|
||||
border-radius: var(--raio-sm);
|
||||
background: var(--fundo-2);
|
||||
color: var(--texto-3);
|
||||
}
|
||||
.busca input {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
min-height: 32px;
|
||||
width: 160px;
|
||||
}
|
||||
.grupos {
|
||||
display: grid;
|
||||
gap: var(--e-5);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
||||
}
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--e-2);
|
||||
align-content: start;
|
||||
}
|
||||
legend {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 0 0 var(--e-2);
|
||||
margin-bottom: var(--e-2);
|
||||
border-bottom: 1px solid var(--borda);
|
||||
width: 100%;
|
||||
}
|
||||
.escolha {
|
||||
min-height: 44px;
|
||||
}
|
||||
.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);
|
||||
cursor: pointer;
|
||||
}
|
||||
.segmentado button[aria-checked='true'] {
|
||||
background: var(--superficie-3);
|
||||
color: var(--texto);
|
||||
}
|
||||
.segmentado button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.gemini {
|
||||
display: grid;
|
||||
gap: var(--e-3);
|
||||
padding-top: var(--e-3);
|
||||
border-top: 1px solid var(--borda);
|
||||
}
|
||||
.ok {
|
||||
color: var(--ok);
|
||||
}
|
||||
.erro {
|
||||
color: var(--perigo);
|
||||
}
|
||||
.info {
|
||||
display: grid;
|
||||
gap: var(--e-2);
|
||||
margin: 0;
|
||||
}
|
||||
.info div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--e-3);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
dt {
|
||||
color: var(--texto-3);
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.ajustes {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
</script>
|
||||
|
||||
<Card titulo="Conversa" descricao="Chat, voz e memória migram na fase 3.">
|
||||
<p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/conversa">abrir Conversa (versão anterior)</a>.</p>
|
||||
</Card>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
</script>
|
||||
|
||||
<Card titulo="Movimento" descricao="Braço, calibração e diagnóstico migram na fase 4.">
|
||||
<p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/braco">abrir Movimento (versão anterior)</a>.</p>
|
||||
</Card>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
</script>
|
||||
|
||||
<Card titulo="Reações" descricao="Biblioteca e criação com IA migram na fase 3.">
|
||||
<p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/emojis">abrir Reações (versão anterior)</a>.</p>
|
||||
</Card>
|
||||
Reference in New Issue
Block a user