Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 julioandClaude Opus 5.5
|
c5fd54c1d9 | ||
|
julioandClaude Opus 5.5
|
673dea62e8 | ||
|
julioandClaude Opus 5.5
|
947c0a3127 | ||
|
julioandClaude Opus 5.5
|
c4b53a8976 |
@@ -1,60 +1,83 @@
|
||||
# Carinha PC
|
||||
# Carinha Control Panel
|
||||
|
||||
Servidor no Orange Pi Zero 3, acessado pelo PC, para controlar o Carinha no Galaxy S10 e testar servos. Dashboard: http://192.168.1.35:8100/dashboard.
|
||||
Robô de mesa: o **rosto** roda num Galaxy S10 (app Android), o **servidor** num Orange Pi Zero 3
|
||||
(Python, só biblioteca padrão) e o **painel** em qualquer navegador da rede. O mesmo servidor
|
||||
comanda um braço de 7 articulações por um PCA9685 (I²C) e conversa por Gemini ou Qwen local.
|
||||
|
||||
## Desenvolvimento
|
||||
Painel: **http://192.168.1.35:8100/**
|
||||
|
||||
Pasta criada em 04/10/2026 a pedido do usuário. Código inicial copiado do projeto anterior; o original não será modificado. Design aprovado: controlar rosto, gestos, configurações e visualizar a câmera frontal pelo PC enquanto o celular mantém a carinha na tela.
|
||||
```
|
||||
PC / celular (navegador) Orange Pi :8100 Galaxy S10 (app)
|
||||
┌──────────────────────┐ HTTP ┌──────────────────────┐ HTTP ┌──────────────────┐
|
||||
│ painel Svelte (web/) │ ───────► │ kiosk-server.py │ ◄─────── │ carinha.html │
|
||||
│ 1 EventSource │ ◄─SSE─── │ /eventos /estado │ ──SSE──► │ (rosto) │
|
||||
│ WebRTC ◄────────────┼──────────┼── sinalização /rtc ──┼──────────┼─► câmera │
|
||||
└──────────────────────┘ │ braço · servos (I²C) │ └──────────────────┘
|
||||
│ conversa · reações │
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
- [Design](docs/DESIGN.md)
|
||||
- [Plano e verificações](docs/PLANO.md)
|
||||
- [Registro de alterações](docs/REGISTRO.md)
|
||||
## O painel
|
||||
|
||||
Quatro áreas + ajustes, todas alimentadas por **um** fluxo SSE (`/eventos`), sem polling:
|
||||
|
||||
| Área | O que tem |
|
||||
|---|---|
|
||||
| **Ao vivo** | Câmera do celular (WebRTC) e rosto lado a lado, gestos favoritos, aparência, sensores, IA local, acontecimentos |
|
||||
| **Conversa** | Chat com voz, motor de IA, memória (lembranças + rotina) |
|
||||
| **Reações** | Biblioteca (criar, editar, desfazer), criar com Gemini, todos os gestos, diário |
|
||||
| **Movimento** | Braço com homem-morto, sequências, posturas, calibração e diagnóstico do PCA9685 |
|
||||
| **Ajustes** | Celular (agrupado, com busca), IA e chave Gemini, token, sistema |
|
||||
|
||||
Controles que valem em qualquer tela:
|
||||
|
||||
- **Parar tudo** (botão vermelho, `Shift+Espaço` ou `Esc` duas vezes): desliga todos os servos,
|
||||
para reações e acalma o rosto. Os motores ficam travados até **Rearmar**.
|
||||
- **Ctrl+K**: paleta com gestos, rostos, cores, telas, ações e posturas.
|
||||
- **1–9**: gestos favoritos (fixe com a estrela em Reações › Gestos). **g** + letra navega
|
||||
(`g v` Ao vivo, `g c` Conversa, `g r` Reações, `g m` Movimento, `g a` Ajustes).
|
||||
- O braço **só se move enquanto você segura** o botão ou o slider; ao soltar, os motores desligam
|
||||
em menos de meio segundo. Detalhes em [docs/PAINEL.md](docs/PAINEL.md).
|
||||
|
||||
## Usar
|
||||
|
||||
1. Execute **iniciar.bat**. Verifica e abre **http://192.168.1.35:8100/dashboard**, sem iniciar servidor no PC. O serviço carinha-pc inicia automaticamente na placa.
|
||||
2. No celular, segure a tela do Carinha e altere o servidor para **http://192.168.1.35:8100**. O botão ADB do antigo servidor Windows não é usado nesta instalação.
|
||||
3. Troque rosto, cor e gestos. Use **Mostrar boca** e **Mostrar sobrancelhas** para ativar cada uma independentemente. Clique **Ligar câmera** para vídeo ao vivo com qualidade automática, sem trocar a tela do celular.
|
||||
4. Em **Comportamento**, ajuste som, movimento, volume, sono e economia de tela. **Configurações aplicadas no celular** depende da resposta do aparelho.
|
||||
1. `iniciar.bat` confere o Orange Pi e abre o painel.
|
||||
2. No celular, toque longo › **Mudar o servidor** › `http://192.168.1.35:8100`.
|
||||
3. Se a placa tiver token (recomendado, veja [docs/SEGURANCA.md](docs/SEGURANCA.md)):
|
||||
toque longo › **Token do servidor** no celular, e o painel pede o token uma vez.
|
||||
|
||||
Brilho padrão: **70% ativo / 8% em repouso**, com **30 segundos** de espera. Retorna com som, movimento ou comando. O brilho do sistema é restaurado ao sair do app.
|
||||
## Desenvolver
|
||||
|
||||
Configurações ficam em `app-config.json` e `aparencia.json`. O vídeo não é gravado: WebRTC transmite diretamente do app ao navegador. O servidor troca apenas sinalização. Logs em `runtime/`. Qualidade automática busca 30 fps, adaptando resolução e compressão. O painel mostra os fps efetivos. [Detalhes do vídeo](docs/VIDEO-AUTO.md).
|
||||
```powershell
|
||||
# servidor local (sem I²C ele avisa "PCA9685 indisponível")
|
||||
python kiosk-server.py --porta 8100
|
||||
|
||||
APK: `android/carinha-rosto.apk`. Guia: [android/APP.md](android/APP.md).
|
||||
# painel com recarga automática, falando com o servidor local ou com a placa
|
||||
cd web; npm install
|
||||
npm run dev # usa http://127.0.0.1:8100
|
||||
$env:CARINHA_SERVIDOR='http://192.168.1.35:8100'; npm run dev
|
||||
```
|
||||
|
||||
Publicar na placa: `.\deploy.ps1` (compila o painel, faz backup e reinicia o serviço).
|
||||
|
||||
## Verificações
|
||||
|
||||
```powershell
|
||||
python -m unittest discover -s tests -p test_controle_pc.py
|
||||
python tests/test_browser.py
|
||||
python tests/test_rtc_browser.py
|
||||
node tests/test_qualidade.js
|
||||
python android/build-apk.py
|
||||
python -m pytest tests -q --ignore-glob='*browser*' # servidor: token, SSE, E-Stop, trava, módulos
|
||||
cd web; npm run check; npm test; npm run build; cd .. # tipos, lógica pura e build do painel
|
||||
python tests/test_painel_web_browser.py # painel de ponta a ponta (Playwright)
|
||||
python tests/test_rtc_browser.py # WebRTC real com câmera sintética
|
||||
python tests/test_browser.py # rosto (carinha.html)
|
||||
node tests/test_qualidade.js # qualidade automática do vídeo
|
||||
python android/build-apk.py # APK (precisa de keystore e libs nativas)
|
||||
```
|
||||
|
||||
O teste de navegador usa Playwright e um servidor efêmero próprio, sem alterar o servidor real. Testes Java em `tests/` verificam conversão de imagem e brilho; compile-os com o JDK junto das classes correspondentes. O servidor em produção exige somente Python 3.9+.
|
||||
`tests/test_tracking_browser.py` precisa dos modelos (`python obter-rastreamento.py`) e das
|
||||
imagens de teste em `../work/tracking-fixtures`.
|
||||
|
||||
**Validação física em 05/10/2026:** S10 conectado à porta 8100, telemetria de câmera/microfone ativa e JPEG recente recebido pelo PC. Configurações confirmadas pelo app e brilho ativo reportado em 70%. Ainda falta observar a orientação da imagem e a transição física do brilho para repouso.
|
||||
## Documentos
|
||||
|
||||
**Atualização 0.3 instalada:** vídeo contínuo WebRTC automático e boca/sobrancelhas independentes. Teste com câmera simulada recebeu 30 fps. Após atualizar o APK, reabra o Carinha e recarregue o painel; os fps no S10 ainda precisam ser confirmados.
|
||||
|
||||
Ferramentas de compilação reutilizadas de `C:/Users/JullioPC/Documents/Open/orange-pi-zero3/android/tools` (JDK 17 e Android SDK). Não é necessário rodar servidor na placa.
|
||||
# Atualização 0.4 — sensores e câmeras
|
||||
|
||||
Controle microfone e câmera separadamente, com permissões específicas durante o sono (padrão: só microfone). Escolha frontal/traseira e qualidade automática, manual ou máxima disponível no painel ou no menu de toque longo do app. Veja [detalhes e limites](docs/SENSORES-CAMERAS.md).
|
||||
|
||||
# Atualização 0.5 — rastreamento de rosto e mãos
|
||||
|
||||
O painel agora detecta rosto e mãos no PC, mostra pontos sobre o vídeo e pode fazer os olhos acompanharem o alvo por WebRTC. Os controles estão sob o vídeo. Só funciona com a transmissão ligada e painel aberto; os sensores e regras de sono continuam valendo. Veja [uso e validação](docs/RASTREAMENTO.md).
|
||||
|
||||
|
||||
## Dashboard e organização
|
||||
|
||||
A navegação lateral reúne Visão geral, Câmera e rosto, Conversar, Emojis, Treinamento, Servos, Braço e API. O tema escuro/ciano e os controles são compartilhados em dashboard.css/dashboard.js; CSS próprio de cada página guarda apenas seu layout específico. No celular, o rosto continua em tela cheia.
|
||||
|
||||
A biblioteca /emojis permite criar emojis prontos, editar nome e contexto, substituir por emoji, duplicar, ativar/desativar, excluir, dar feedback, desfazer e exportar. Desfazer preserva o desenho original e funciona após reiniciar o serviço. Parar expressão não movimenta motores. Reações desativadas não são escolhidas automaticamente na conversa.
|
||||
|
||||
/api gerencia o modelo Gemini e a chave. Campos de chave ficam vazios após salvar e as respostas não retornam credenciais. Alterações são guardadas em api-privada.json (permissão 600 no Linux), ignorado pelo Git e bloqueado no servidor HTTP. A configuração antiga de ambiente continua válida enquanto não houver override.
|
||||
|
||||
[Revisão, critérios e validação do dashboard](docs/DASHBOARD.md).
|
||||
[Painel](docs/PAINEL.md) · [Segurança](docs/SEGURANCA.md) · [Orange Pi](docs/ORANGEPI.md) ·
|
||||
[Braço](docs/BRACO.md) · [Conversa](docs/CONVERSA.md) · [IA local](docs/IA-LOCAL.md) ·
|
||||
[Vídeo](docs/VIDEO-AUTO.md) · [Rastreamento](docs/RASTREAMENTO.md) · [Repositório](docs/GITEA.md) ·
|
||||
[Registro](docs/REGISTRO.md)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
package="br.carinha.rosto"
|
||||
android:versionCode="6"
|
||||
android:versionName="0.6-ia-local">
|
||||
android:versionCode="8"
|
||||
android:versionName="0.8-token">
|
||||
|
||||
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="34" />
|
||||
|
||||
|
||||
@@ -26,6 +26,25 @@
|
||||
</svg>
|
||||
<div id="fps"></div>
|
||||
<script>
|
||||
/* Token do servidor (o app Android abre a página com ?t=...): vai em todo pedido ao
|
||||
próprio servidor, inclusive os de reacoes-render.js. Sem ?t= nada muda. */
|
||||
(function () {
|
||||
const token = new URLSearchParams(location.search).get('t');
|
||||
window.carinhaToken = token || '';
|
||||
if (!token || !window.fetch) return;
|
||||
const original = window.fetch.bind(window);
|
||||
window.fetch = (recurso, opcoes = {}) => {
|
||||
try {
|
||||
const url = new URL(typeof recurso === 'string' ? recurso : recurso.url, location.href);
|
||||
if (url.origin === location.origin) {
|
||||
const cabecalhos = new Headers(opcoes.headers || {});
|
||||
cabecalhos.set('Authorization', 'Bearer ' + token);
|
||||
opcoes = Object.assign({}, opcoes, { headers: cabecalhos });
|
||||
}
|
||||
} catch (e) { /* URL estranha: segue sem token */ }
|
||||
return original(recurso, opcoes);
|
||||
};
|
||||
})();
|
||||
"use strict";
|
||||
/* -------------------------------------------------------------------------
|
||||
Carinha estilo Eilik em SVG — porte fiel do eilik.py (Python/framebuffer).
|
||||
@@ -424,6 +443,9 @@ function trata(ordem) {
|
||||
animar(LIVRES[Math.floor(Math.random() * LIVRES.length)]);
|
||||
} else if (SEQS[ordem]) {
|
||||
animar(ordem);
|
||||
} else if (ordem === "calma") {
|
||||
// E-Stop do painel: interrompe a animação e volta ao rosto neutro.
|
||||
r.fila = []; r.kf = null; r.boca = "neutra"; r.dormindo = false;
|
||||
} else if (ordem === "parar") {
|
||||
try { window.close(); } catch (e) { r.fila = []; }
|
||||
}
|
||||
@@ -460,7 +482,7 @@ window.eilik = {
|
||||
// busca ordens no servidorzinho da placa (/fila) — assim da para mandar gesto
|
||||
// do PC com um curl, igual ao FIFO de antes
|
||||
async function buscarOrdens() {
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1') return;
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1' || window.carinhaSSE) return;
|
||||
try {
|
||||
const resp = await fetch("fila"+(par.get("aparelho")==="1"?"?aparelho=1":""), { cache: "no-store" });
|
||||
if (!resp.ok) return;
|
||||
@@ -484,7 +506,18 @@ async function aplicarAparencia() {
|
||||
} catch (e) { /* sem servidor — segue com o padrao */ }
|
||||
}
|
||||
setTimeout(aplicarAparencia, 200);
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1') setInterval(aplicarAparencia, 1000);
|
||||
// ?painel=1: prévia dentro do painel novo. Nada de polling; o painel repassa os eventos
|
||||
// do servidor (SSE) por postMessage.
|
||||
const MODO_PAINEL = new URLSearchParams(location.search).get('painel') === '1';
|
||||
if (MODO_PAINEL) {
|
||||
window.carinhaAtiva = false;
|
||||
addEventListener('message', (e) => {
|
||||
if (e.origin !== location.origin || e.source !== parent || !e.data) return;
|
||||
const m = e.data;
|
||||
if (m.tipo === 'ordem' && typeof m.ordem === 'string') trata(m.ordem);
|
||||
else if (m.tipo === 'config' && m.config) configurarApp(m.config);
|
||||
});
|
||||
} else if (new URLSearchParams(location.search).get('espelho') === '1') setInterval(aplicarAparencia, 1000);
|
||||
|
||||
// teclado (util para testar no PC)
|
||||
const TECLAS = { p: "piscar", f: "feliz", c: "coracao", s: "surpreso", b: "bravo",
|
||||
@@ -818,8 +851,10 @@ async function sincronizarApp() {
|
||||
if (sincronizando || location.protocol === 'file:' || window.carinhaAtiva === false) return;
|
||||
sincronizando = true;
|
||||
try {
|
||||
if (!window.carinhaSSE) {
|
||||
const resp = await fetch('/app/config', { cache: 'no-store', signal: AbortSignal.timeout(2500) });
|
||||
if (resp.ok) configurarApp(await resp.json());
|
||||
}
|
||||
if (par.get('aparelho') === '1') {
|
||||
const agora = performance.now() / 1000;
|
||||
await fetch('/app/status', { method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
@@ -965,7 +1000,7 @@ setTimeout(relatar, 1500);
|
||||
if(location.protocol==='file:')return;
|
||||
let seen=null,fetching=false;
|
||||
async function poll(){
|
||||
if(fetching||window.carinhaAtiva===false)return;fetching=true;
|
||||
if(fetching||window.carinhaAtiva===false||window.carinhaSSE)return;fetching=true;
|
||||
try{const response=await fetch('/conversa/status',{cache:'no-store',signal:AbortSignal.timeout(2500)});if(!response.ok)return;
|
||||
const s=await response.json(),m=s.ultima;if(!m){seen=null;return;}
|
||||
if(m.id===seen||Date.now()/1000-m.horario>60)return;seen=m.id;
|
||||
@@ -977,11 +1012,50 @@ setTimeout(relatar, 1500);
|
||||
|
||||
</script>
|
||||
<script src="/reacoes-render.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
if(new URLSearchParams(location.search).get('aparelho')==='1' && new URLSearchParams(location.search).has('atualizacao')) {
|
||||
const aviso=document.createElement('div');aviso.id='avisoRecarga';aviso.textContent='Tela atualizada';aviso.style.cssText='position:fixed;bottom:8%;left:0;right:0;text-align:center;color:#fff;font:24px sans-serif;z-index:100;pointer-events:none';document.body.append(aviso);setTimeout(()=>aviso.remove(),4000);
|
||||
}
|
||||
|
||||
/* Tempo real: um EventSource em /eventos substitui os pollings de /fila, /app/config,
|
||||
/conversa/status e /treinamento/expressao. Se cair, os pollings voltam sozinhos
|
||||
(window.carinhaSSE=false) até o EventSource reconectar. */
|
||||
(function () {
|
||||
const p = new URLSearchParams(location.search);
|
||||
if (location.protocol === 'file:' || p.get('espelho') === '1' || !window.EventSource) return;
|
||||
const aparelho = p.get('aparelho') === '1';
|
||||
const t = window.carinhaToken;
|
||||
const fonte = new EventSource('/eventos' + (t ? '?t=' + encodeURIComponent(t) : ''));
|
||||
let ultimaConversa = null, ultimaReacao = null, primeira = true;
|
||||
const ouvir = (tipo, fn) => fonte.addEventListener(tipo, (e) => { try { fn(JSON.parse(e.data)); } catch (err) {} });
|
||||
fonte.addEventListener('pronto', () => {
|
||||
// Ordens que chegaram antes da conexão ficam na fila: executa uma vez e passa ao SSE.
|
||||
if (primeira) { primeira = false; buscarOrdens(); }
|
||||
window.carinhaSSE = true;
|
||||
// Foto dos ajustes a cada (re)conexão; depois só mudanças chegam por 'app_config'.
|
||||
fetch('/app/config', { cache: 'no-store' }).then((r) => r.ok && r.json()).then((c) => c && configurarApp(c)).catch(() => {});
|
||||
});
|
||||
fonte.onerror = () => {
|
||||
if (!window.carinhaSSE) return;
|
||||
window.carinhaSSE = false;
|
||||
// Volta ao polling sem repetir o que o SSE já entregou.
|
||||
fetch('fila' + (aparelho ? '?aparelho=1' : ''), { cache: 'no-store' }).catch(() => {});
|
||||
};
|
||||
ouvir('expressao', (d) => trata(d.ordem));
|
||||
ouvir('recarregar', () => { if (aparelho) trata('recarregar'); });
|
||||
ouvir('app_config', (c) => configurarApp(c));
|
||||
ouvir('conversa', (s) => {
|
||||
const m = s.ultima;
|
||||
if (!m || m.id === ultimaConversa || Date.now() / 1000 - m.horario > 60) return;
|
||||
ultimaConversa = m.id;
|
||||
MIC.ultimoSom = performance.now() / 1000; trata('acordar'); trata(m.gesto);
|
||||
});
|
||||
ouvir('reacao', (d) => {
|
||||
if (!d || d.id === ultimaReacao || Date.now() / 1000 - d.horario > 60) return;
|
||||
ultimaReacao = d.id;
|
||||
if (window.eilik && window.eilik.receita) window.eilik.receita(d.receita);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,6 +10,8 @@ import java.security.MessageDigest;
|
||||
public final class CerebroLocal {
|
||||
private volatile boolean fechado;
|
||||
private Process processo;
|
||||
/** Com token, o llama-server (aberto na rede para a placa) exige a mesma chave. */
|
||||
public volatile String chave = "";
|
||||
public void iniciar(final Context contexto, final String servidor) {
|
||||
new Thread(() -> {
|
||||
try {
|
||||
@@ -43,7 +45,9 @@ public final class CerebroLocal {
|
||||
try { if (health.getResponseCode() == 200) { Log.i("CarinhaIA", "Executor existente pronto"); return; } }
|
||||
finally { health.disconnect(); }
|
||||
} catch (IOException ignored) { }
|
||||
ProcessBuilder builder = new ProcessBuilder(executavel.getAbsolutePath(), "-m", modelo.getAbsolutePath(), "--host", "0.0.0.0", "--port", "8101", "-c", "1024", "-t", "2", "-np", "1", "--jinja");
|
||||
java.util.List<String> comando = new java.util.ArrayList<>(java.util.Arrays.asList(executavel.getAbsolutePath(), "-m", modelo.getAbsolutePath(), "--host", "0.0.0.0", "--port", "8101", "-c", "1024", "-t", "2", "-np", "1", "--jinja"));
|
||||
if (chave != null && !chave.isEmpty()) { comando.add("--api-key"); comando.add(chave); }
|
||||
ProcessBuilder builder = new ProcessBuilder(comando);
|
||||
builder.environment().put("LD_LIBRARY_PATH", libs.getAbsolutePath());
|
||||
builder.environment().put("GGML_BACKEND_DL_PATH", libs.getAbsolutePath());
|
||||
builder.redirectErrorStream(true);
|
||||
|
||||
@@ -46,6 +46,9 @@ public final class ControleRemoto {
|
||||
public void sinalRTC(String json) {
|
||||
if (sinais.size() < 64) sinais.offer(json);
|
||||
}
|
||||
private volatile String token = "";
|
||||
/** Token do servidor (CARINHA_TOKEN); vai como Authorization em todo pedido. */
|
||||
public void token(String valor) { token = valor == null ? "" : valor.trim(); }
|
||||
public void servidor(String valor) {
|
||||
servidor = valor;
|
||||
pendente = null;
|
||||
@@ -140,6 +143,7 @@ public final class ControleRemoto {
|
||||
HttpURLConnection c = (HttpURLConnection) new URL(url).openConnection();
|
||||
c.setConnectTimeout(1500); c.setReadTimeout(1500);
|
||||
c.setUseCaches(false);
|
||||
if (!token.isEmpty()) c.setRequestProperty("Authorization", "Bearer " + token);
|
||||
return c;
|
||||
}
|
||||
public void quadro(Image image, int rotacao) {
|
||||
|
||||
@@ -8,6 +8,7 @@ import android.content.Intent;
|
||||
import android.content.IntentFilter;
|
||||
import android.os.BatteryManager;
|
||||
import android.content.SharedPreferences;
|
||||
import android.net.Uri;
|
||||
import android.content.pm.PackageManager;
|
||||
import android.graphics.Color;
|
||||
import android.hardware.camera2.CameraAccessException;
|
||||
@@ -83,6 +84,7 @@ public class MainActivity extends Activity {
|
||||
|
||||
private static final String PREFS = "carinha";
|
||||
private static final String CHAVE = "servidor";
|
||||
private static final String CHAVE_TOKEN = "token";
|
||||
private static final String PADRAO = "http://192.168.1.15:8100";
|
||||
|
||||
private static final String TAG = "CarinhaMic";
|
||||
@@ -100,6 +102,7 @@ public class MainActivity extends Activity {
|
||||
|
||||
private WebView web;
|
||||
private String servidor;
|
||||
private String token = ""; // CARINHA_TOKEN do servidor; vazio = servidor aberto
|
||||
private final CerebroLocal cerebroLocal = new CerebroLocal();
|
||||
private boolean jaCaiuParaLocal = false;
|
||||
private boolean jaRecarregou = false;
|
||||
@@ -179,8 +182,10 @@ public class MainActivity extends Activity {
|
||||
|
||||
SharedPreferences p = getSharedPreferences(PREFS, MODE_PRIVATE);
|
||||
servidor = p.getString(CHAVE, PADRAO);
|
||||
token = p.getString(CHAVE_TOKEN, "");
|
||||
movimentoLigado = p.getBoolean(CHAVE_MOV, true);
|
||||
usarServidorDoPedido(getIntent()); // permite apontar o servidor ao lancar
|
||||
cerebroLocal.chave = token;
|
||||
cerebroLocal.iniciar(this, servidor);
|
||||
remoto = new ControleRemoto(new Runnable() {
|
||||
@Override public void run() {
|
||||
@@ -272,7 +277,7 @@ public class MainActivity extends Activity {
|
||||
runOnUiThread(new Runnable() {
|
||||
@Override
|
||||
public void run() {
|
||||
boolean pode = true;
|
||||
boolean pode = origemConfiavel(pedido.getOrigin());
|
||||
for (String recurso : pedido.getResources()) {
|
||||
if (PermissionRequest.RESOURCE_VIDEO_CAPTURE.equals(recurso)
|
||||
&& checkSelfPermission(Manifest.permission.CAMERA)
|
||||
@@ -348,6 +353,15 @@ public class MainActivity extends Activity {
|
||||
if (it == null) return;
|
||||
String novo = it.getStringExtra("servidor");
|
||||
if (novo == null) return;
|
||||
String tokenPedido = it.getStringExtra("token");
|
||||
if (!token.isEmpty() && !token.equals(tokenPedido)) {
|
||||
Log.w(TAG, "pedido para trocar o servidor sem o token certo: ignorado");
|
||||
return;
|
||||
}
|
||||
if (token.isEmpty() && tokenPedido != null && !tokenPedido.trim().isEmpty()) {
|
||||
token = tokenPedido.trim();
|
||||
getSharedPreferences(PREFS, MODE_PRIVATE).edit().putString(CHAVE_TOKEN, token).apply();
|
||||
}
|
||||
novo = novo.trim();
|
||||
while (novo.endsWith("/")) novo = novo.substring(0, novo.length() - 1);
|
||||
if (novo.length() == 0) return;
|
||||
@@ -374,8 +388,9 @@ public class MainActivity extends Activity {
|
||||
private void abrirRosto() {
|
||||
naCamera = false;
|
||||
remoto.servidor(servidor);
|
||||
remoto.token(token);
|
||||
if (usandoLocal) web.loadUrl("file:///android_asset/carinha.html");
|
||||
else web.loadUrl(servidor + "/carinha.html?aparelho=1");
|
||||
else web.loadUrl(servidor + "/carinha.html?aparelho=1" + (token.isEmpty() ? "" : "&t=" + Uri.encode(token)));
|
||||
iniciarMovimento(); // volta a observar quem passa na frente
|
||||
}
|
||||
|
||||
@@ -397,7 +412,7 @@ public class MainActivity extends Activity {
|
||||
private void menu() {
|
||||
final String[] opcoes = {"Ver a camera", "Voltar para a carinha",
|
||||
(movimentoLigado ? "Desligar reacao ao movimento" : "Ligar reacao ao movimento"),
|
||||
"Mudar o servidor", "Sensores acordado / dormindo", "Camera e qualidade do video"};
|
||||
"Mudar o servidor", "Sensores acordado / dormindo", "Camera e qualidade do video", "Token do servidor"};
|
||||
new AlertDialog.Builder(this)
|
||||
.setTitle("Carinha")
|
||||
.setItems(opcoes, new DialogInterface.OnClickListener() {
|
||||
@@ -408,7 +423,8 @@ public class MainActivity extends Activity {
|
||||
else if (i == 2) alternarMovimento();
|
||||
else if (i == 3) pedirServidor();
|
||||
else if (i == 4) menuSensores();
|
||||
else menuVideo();
|
||||
else if (i == 5) menuVideo();
|
||||
else pedirToken();
|
||||
}
|
||||
})
|
||||
.show();
|
||||
@@ -520,6 +536,37 @@ public class MainActivity extends Activity {
|
||||
.show();
|
||||
}
|
||||
|
||||
/** Token do servidor (CARINHA_TOKEN da placa). Vazio = servidor sem autenticacao. */
|
||||
private void pedirToken() {
|
||||
final EditText campo = new EditText(this);
|
||||
campo.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
|
||||
campo.setText(token);
|
||||
new AlertDialog.Builder(this)
|
||||
.setTitle("Token do servidor")
|
||||
.setMessage("O mesmo CARINHA_TOKEN configurado na placa")
|
||||
.setView(campo)
|
||||
.setPositiveButton("Salvar", new DialogInterface.OnClickListener() {
|
||||
@Override
|
||||
public void onClick(DialogInterface d, int w) {
|
||||
token = campo.getText().toString().trim();
|
||||
getSharedPreferences(PREFS, MODE_PRIVATE).edit().putString(CHAVE_TOKEN, token).apply();
|
||||
cerebroLocal.chave = token;
|
||||
aviso(token.isEmpty() ? "token removido" : "token salvo");
|
||||
abrirRosto();
|
||||
}
|
||||
})
|
||||
.setNegativeButton("Cancelar", null)
|
||||
.show();
|
||||
}
|
||||
|
||||
/** So o servidor configurado (ou a copia local do APK) pode usar camera/microfone. */
|
||||
private boolean origemConfiavel(Uri origem) {
|
||||
if (origem == null) return false;
|
||||
String o = origem.toString();
|
||||
while (o.endsWith("/")) o = o.substring(0, o.length() - 1);
|
||||
return o.startsWith("file:") || o.equals(servidor);
|
||||
}
|
||||
|
||||
/** Voltar nao sai do app (num enfeite de mesa isso seria chato): volta a carinha. */
|
||||
@Override
|
||||
public void onBackPressed() {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
(()=>{const el=id=>document.getElementById(id);let busy=false;async function call(path,data){const r=await fetch('/api/configuracao/'+path,{cache:'no-store',signal:AbortSignal.timeout(55000),...(data===undefined?{}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})});const d=await r.json();if(!r.ok)throw Error(d.erro);return d;}function lock(v){busy=v;el('apiSave').disabled=v;el('apiTest').disabled=v;}async function load(){try{const s=await call('status');el('apiModel').value=s.modelo;el('apiBadge').textContent=s.configurada?'Chave configurada':'Chave não configurada';el('apiBadge').classList.toggle('ativo',s.configurada);if(s.ultimo_teste)el('apiState').textContent=s.ultimo_teste.mensagem+(s.ultimo_teste.segundos?' ('+s.ultimo_teste.segundos+' s)':'');}catch(e){el('apiState').textContent=e.message;}}el('apiServer').textContent=location.origin;el('apiForm').onsubmit=async e=>{e.preventDefault();if(busy)return;lock(true);try{const d={modelo:el('apiModel').value.trim()};if(el('apiKey').value.trim())d.chave=el('apiKey').value.trim();await call('salvar',d);el('apiKey').value='';await load();el('apiState').textContent='Configuração salva. As próximas chamadas usarão este modelo.';}catch(e){el('apiState').textContent=e.message;}finally{lock(false);}};el('apiTest').onclick=async()=>{if(busy)return;lock(true);el('apiState').textContent='Testando o modelo salvo…';try{const s=await call('testar',{});el('apiState').textContent=s.mensagem+(s.segundos?' ('+s.segundos+' s)':'');}catch(e){el('apiState').textContent=e.message;}finally{lock(false);}};load();})();
|
||||
@@ -1,117 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>API Gemini & Conexão · Carinha</title>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>API Gemini & Conexão IA</h1>
|
||||
<p style="margin:4px 0 0">Configure o modelo do Google Gemini que dá inteligência ao diálogo e cria novas expressões.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge" id="apiBadge">Verificando…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split" style="margin-top:16px">
|
||||
<!-- Formulário do Gemini -->
|
||||
<section class="card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
|
||||
Google Gemini Cloud
|
||||
</h2>
|
||||
<span class="badge" style="font-size:11px">Seguro · api-privada.json</span>
|
||||
</div>
|
||||
|
||||
<form id="apiForm">
|
||||
<!-- Model Presets -->
|
||||
<label for="apiModelSelect">Modelos recomendados:</label>
|
||||
<select id="apiModelSelect" style="margin-bottom:12px">
|
||||
<option value="gemini-2.5-flash">gemini-2.5-flash · Rápido, expressivo & moderno (Recomendado)</option>
|
||||
<option value="gemini-1.5-flash">gemini-1.5-flash · Alta velocidade e respostas curtas</option>
|
||||
<option value="gemini-2.0-flash">gemini-2.0-flash · Nova arquitetura multimodal</option>
|
||||
<option value="gemini-1.5-pro">gemini-1.5-pro · Raciocínio profundo e criatividade</option>
|
||||
<option value="custom">Outro (digitar manualmente abaixo)</option>
|
||||
</select>
|
||||
|
||||
<label for="apiModel">Identificador do Modelo</label>
|
||||
<input id="apiModel" required maxlength="100" placeholder="gemini-flash-lite-latest">
|
||||
|
||||
<label for="apiKey">Chave de API Gemini (Google AI Studio)</label>
|
||||
<input id="apiKey" type="password" autocomplete="new-password" maxlength="250" placeholder="Insira nova chave ou deixe vazio para manter a atual">
|
||||
|
||||
<p style="font-size:12.5px;color:var(--fraco);margin-top:-6px">
|
||||
🔒 Por segurança, o campo de chave nunca exibe o valor salvo no servidor. Ele é mantido exclusivamente no arquivo privado local do Orange Pi.
|
||||
</p>
|
||||
|
||||
<div class="actions" style="margin-top:20px">
|
||||
<button class="primary" id="apiSave" type="submit">💾 Salvar Configuração</button>
|
||||
<button type="button" id="apiTest">⚡ Testar Conexão Agora</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p id="apiState" role="status" aria-live="polite" style="margin-top:16px;font-size:13.5px;color:var(--ciano);min-height:24px"></p>
|
||||
</section>
|
||||
|
||||
<!-- Instruções e Informações do Sistema -->
|
||||
<section class="card" style="display:flex;flex-direction:column;justify-content:space-between">
|
||||
<div>
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||
Arquitetura Híbrida de IA
|
||||
</h2>
|
||||
<p>O Carinha combina processamento em nuvem com inteligência embarcada no robô:</p>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px;margin:16px 0">
|
||||
<div style="background:rgba(12,22,36,0.6);border:1px solid var(--borda);border-radius:var(--raio-md);padding:12px">
|
||||
<strong style="color:var(--ciano);display:block;margin-bottom:4px">☁️ Google Gemini (Nuvem)</strong>
|
||||
<small style="color:var(--texto-medio);font-size:13px">Gera as respostas de conversação natural, recupera lembranças e desenha novas figurinhas SVG em tempo real.</small>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(12,22,36,0.6);border:1px solid var(--borda);border-radius:var(--raio-md);padding:12px">
|
||||
<strong style="color:#34d399;display:block;margin-bottom:4px">📱 Qwen / Local (Galaxy S10)</strong>
|
||||
<small style="color:var(--texto-medio);font-size:13px">Disponível no app do celular para quando estiver offline, garantindo que o Carinha continue reagindo aos sensores.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size:13px">Você pode alternar entre os motores a qualquer momento na tela <a href="/conversa">Conversar</a>.</p>
|
||||
</div>
|
||||
|
||||
<details style="margin-top:16px">
|
||||
<summary>Informações do Servidor Local</summary>
|
||||
<p id="apiServer" style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ciano);margin-top:8px"></p>
|
||||
<p style="font-size:12px;color:var(--fraco)">Orange Pi Zero 3 operando na rede interna.</p>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/api-painel.js" defer></script>
|
||||
<script>
|
||||
// Sincroniza o select de modelos com o input de modelo
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const sel = document.getElementById('apiModelSelect');
|
||||
const input = document.getElementById('apiModel');
|
||||
if (sel && input) {
|
||||
sel.onchange = () => {
|
||||
if (sel.value !== 'custom') {
|
||||
input.value = sel.value;
|
||||
}
|
||||
};
|
||||
input.addEventListener('input', () => {
|
||||
let matched = false;
|
||||
for (let opt of sel.options) {
|
||||
if (opt.value === input.value) { opt.selected = true; matched = true; break; }
|
||||
}
|
||||
if (!matched) sel.value = 'custom';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-248
@@ -1,248 +0,0 @@
|
||||
/**
|
||||
* audio-robot.js — Sintetizador procedural de efeitos sonoros robóticos (Web Audio API)
|
||||
* Gera bips, assobios, trinados alegres e sons estilo WALL-E / Eilik diretamente no navegador.
|
||||
* Sem arquivos de áudio externos, sem dependências, 100% autônomo e instantâneo.
|
||||
*/
|
||||
(function(window) {
|
||||
'use strict';
|
||||
|
||||
let audioCtx = null;
|
||||
let enabled = localStorage.getItem('carinha_sfx') !== 'false';
|
||||
let volume = parseFloat(localStorage.getItem('carinha_volume') || '0.7');
|
||||
|
||||
function getContext() {
|
||||
if (!audioCtx) {
|
||||
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
||||
if (AudioContext) {
|
||||
audioCtx = new AudioContext();
|
||||
}
|
||||
}
|
||||
if (audioCtx && audioCtx.state === 'suspended') {
|
||||
audioCtx.resume();
|
||||
}
|
||||
return audioCtx;
|
||||
}
|
||||
|
||||
const RobotAudio = {
|
||||
get enabled() { return enabled; },
|
||||
set enabled(val) {
|
||||
enabled = Boolean(val);
|
||||
localStorage.setItem('carinha_sfx', enabled ? 'true' : 'false');
|
||||
window.dispatchEvent(new CustomEvent('carinha:audio-toggle', { detail: { enabled } }));
|
||||
},
|
||||
|
||||
get volume() { return volume; },
|
||||
set volume(val) {
|
||||
volume = Math.max(0, Math.min(1, parseFloat(val) || 0.7));
|
||||
localStorage.setItem('carinha_volume', volume.toString());
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this.enabled = !this.enabled;
|
||||
if (this.enabled) this.bleep();
|
||||
return this.enabled;
|
||||
},
|
||||
|
||||
// Bip simples de confirmação / clique
|
||||
click() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const now = ctx.currentTime;
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(800, now);
|
||||
osc.frequency.exponentialRampToValueAtTime(1400, now + 0.04);
|
||||
gain.gain.setValueAtTime(volume * 0.15, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.05);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.05);
|
||||
},
|
||||
|
||||
// Bip robótico positivo
|
||||
bleep() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const now = ctx.currentTime;
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(659.25, now); // E5
|
||||
osc.frequency.setValueAtTime(880, now + 0.06); // A5
|
||||
gain.gain.setValueAtTime(volume * 0.25, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.16);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.16);
|
||||
},
|
||||
|
||||
// Trinado alegre (estilo WALL-E / Eilik feliz)
|
||||
happy() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
|
||||
const now = ctx.currentTime;
|
||||
notes.forEach((freq, idx) => {
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const start = now + idx * 0.07;
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(freq, start);
|
||||
osc.frequency.exponentialRampToValueAtTime(freq * 1.08, start + 0.06);
|
||||
gain.gain.setValueAtTime(0.001, start);
|
||||
gain.gain.linearRampToValueAtTime(volume * 0.3, start + 0.02);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, start + 0.1);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(start);
|
||||
osc.stop(start + 0.1);
|
||||
});
|
||||
},
|
||||
|
||||
// Curiosidade / interrogação
|
||||
curious() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const now = ctx.currentTime;
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(440, now);
|
||||
osc.frequency.exponentialRampToValueAtTime(950, now + 0.22);
|
||||
gain.gain.setValueAtTime(volume * 0.22, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.25);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.25);
|
||||
},
|
||||
|
||||
// Surpreso / Alerta
|
||||
surprise() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const now = ctx.currentTime;
|
||||
osc.type = 'square';
|
||||
osc.frequency.setValueAtTime(800, now);
|
||||
osc.frequency.linearRampToValueAtTime(1400, now + 0.08);
|
||||
osc.frequency.linearRampToValueAtTime(1800, now + 0.15);
|
||||
gain.gain.setValueAtTime(volume * 0.2, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.18);
|
||||
},
|
||||
|
||||
// Triste / Melancólico
|
||||
sad() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const now = ctx.currentTime;
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(600, now);
|
||||
osc.frequency.linearRampToValueAtTime(320, now + 0.35);
|
||||
gain.gain.setValueAtTime(volume * 0.2, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.4);
|
||||
},
|
||||
|
||||
// Acordando (Power on)
|
||||
wake() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const freqs = [350, 440, 587.33, 880];
|
||||
const now = ctx.currentTime;
|
||||
freqs.forEach((f, i) => {
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const t = now + i * 0.06;
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(f, t);
|
||||
gain.gain.setValueAtTime(volume * 0.25, t);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.12);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(t);
|
||||
osc.stop(t + 0.12);
|
||||
});
|
||||
},
|
||||
|
||||
// Dormindo (Power down)
|
||||
sleep() {
|
||||
if (!enabled) return;
|
||||
const ctx = getContext();
|
||||
if (!ctx) return;
|
||||
const freqs = [700, 520, 380, 220];
|
||||
const now = ctx.currentTime;
|
||||
freqs.forEach((f, i) => {
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
const t = now + i * 0.08;
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(f, t);
|
||||
gain.gain.setValueAtTime(volume * 0.2, t);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.14);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(t);
|
||||
osc.stop(t + 0.14);
|
||||
});
|
||||
},
|
||||
|
||||
// Tocar som de acordo com o gesto/emoção
|
||||
tocarGesto(gesto) {
|
||||
if (!enabled) return;
|
||||
switch ((gesto || '').toLowerCase()) {
|
||||
case 'feliz':
|
||||
case 'alegre':
|
||||
case 'coracao':
|
||||
this.happy();
|
||||
break;
|
||||
case 'surpreso':
|
||||
this.surprise();
|
||||
break;
|
||||
case 'triste':
|
||||
this.sad();
|
||||
break;
|
||||
case 'dormir':
|
||||
this.sleep();
|
||||
break;
|
||||
case 'acordar':
|
||||
this.wake();
|
||||
break;
|
||||
case 'olhar_esq':
|
||||
case 'olhar_dir':
|
||||
case 'olhar_baixo':
|
||||
this.curious();
|
||||
break;
|
||||
case 'piscar':
|
||||
case 'piscar2':
|
||||
case 'piscadinha':
|
||||
this.click();
|
||||
break;
|
||||
default:
|
||||
this.bleep();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.RobotAudio = RobotAudio;
|
||||
})(window);
|
||||
@@ -1,13 +0,0 @@
|
||||
(()=>{const el=id=>document.getElementById(id);let state=null,signature='',editing=null,lastFocus=null,busy=false;
|
||||
async function api(path,data){const r=await fetch('/treinamento/'+path,{cache:'no-store',...(data===undefined?{}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})});const d=await r.json();if(!r.ok)throw Error(d.erro);return d;}
|
||||
function text(tag,t){const n=document.createElement(tag);n.textContent=t;return n;}function button(t,f){const b=text('button',t);b.onclick=f;return b;}
|
||||
function preview(recipe){el('emojiPreview').contentWindow.postMessage({tipo:'previa-reacao',receita:recipe},location.origin);}
|
||||
async function action(path,data){if(busy)return false;busy=true;try{await api(path,data);await refresh();el('emojiState').textContent=path==='testar'?'Expressão enviada ao celular.':path==='parar'?'Pedido para parar enviado ao celular.':'Biblioteca atualizada.';return true;}catch(e){el('emojiState').textContent=e.message;return false;}finally{busy=false;}}
|
||||
function render(){const q=el('emojiSearch').value.toLocaleLowerCase('pt-BR');const recipes=state.reacoes.filter(r=>(r.receita.nome+' '+r.receita.motivo).toLocaleLowerCase('pt-BR').includes(q));el('emojiLibrary').replaceChildren();el('emojiCount').textContent=recipes.length+' reações';for(const r of recipes){const recipe=r.receita;const card=document.createElement('article');if(!r.ativa)card.classList.add('muted-card');const icon=text('div',recipe.emoji?.caractere||({ideia:'💡',cafe:'☕',musica:'🎵',coracao:'❤️',estrela:'⭐'}[recipe.simbolo]||'◈'));icon.className='emoji-swatch';if(recipe.figurinha){icon.textContent='';const ns='http://www.w3.org/2000/svg',svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('width','64');svg.setAttribute('height','64');for(const shape of recipe.figurinha.formas){const path=document.createElementNS(ns,'path');path.setAttribute('d',shape.caminho);path.setAttribute('fill',shape.cor);svg.append(path);}icon.append(svg);}card.append(icon,text('h3',recipe.nome),text('p',recipe.motivo),text('small',(recipe.figurinha?'Desenho SVG':recipe.emoji?'Emoji pronto':'Animação do rosto')+' · '+(r.ativa?'Ativa':'Desativada')));const actions=document.createElement('div');actions.className='actions';actions.append(button('Prévia',()=>preview(recipe)),button('Mostrar no celular',()=>action('testar',{id:r.id})),button('Editar',()=>edit(r)),button('Duplicar',()=>action('biblioteca',{acao:'duplicar',id:r.id})),button(r.ativa?'Desativar':'Ativar',()=>action('biblioteca',{acao:'ativar',id:r.id,ativa:!r.ativa})),button('Excluir',()=>action('biblioteca',{acao:'excluir',id:r.id})),button(r.feedback===1?'Gostei ✓':'Gostei',()=>action('feedback',{id:r.id,valor:r.feedback===1?0:1})),button(r.feedback===-1?'Não gostei ✓':'Não gostei',()=>action('feedback',{id:r.id,valor:r.feedback===-1?0:-1})));card.append(actions);el('emojiLibrary').append(card);}if(!recipes.length)el('emojiLibrary').append(text('p',q?'Nenhuma reação encontrada.':'Crie seu primeiro emoji ou peça um desenho ao Gemini.'));}
|
||||
async function refresh(){try{state=await api('status');el('emojiUndo').disabled=!state.desfazer||state.ocupado;el('emojiNew').disabled=state.ocupado;if(el('emojiCharacter').options.length===1)for(const e of state.emojis)el('emojiCharacter').add(new Option(e,e));const key=JSON.stringify(state.reacoes);if(key!==signature){signature=key;render();}}catch(e){el('emojiState').textContent=e.message;}}
|
||||
function edit(r){editing=r?.id??null;lastFocus=document.activeElement;el('emojiEditorTitle').textContent=r?'Editar reação':'Criar emoji';el('emojiName').value=r?.receita.nome||'';el('emojiReason').value=r?.receita.motivo||'';el('emojiCharacter').value=r?.receita.emoji?.caractere||(r?'':'💡');el('emojiLocation').value=r?.receita.emoji?.local||r?.receita.figurinha?.local||'olhos';el('emojiEditState').textContent='';el('emojiDialog').hidden=false;el('emojiName').focus();}
|
||||
function close(){el('emojiDialog').hidden=true;lastFocus?.focus();}
|
||||
el('emojiCancel').onclick=close;el('emojiDialog').onclick=e=>{if(e.target===el('emojiDialog'))close();};document.addEventListener('keydown',e=>{if(el('emojiDialog').hidden)return;if(e.key==='Escape')close();if(e.key==='Tab'){const nodes=[...el('emojiDialog').querySelectorAll('input,textarea,select,button')];if(e.shiftKey&&document.activeElement===nodes[0]){e.preventDefault();nodes.at(-1).focus();}else if(!e.shiftKey&&document.activeElement===nodes.at(-1)){e.preventDefault();nodes[0].focus();}}});
|
||||
el('emojiEditForm').onsubmit=async e=>{e.preventDefault();const data={acao:editing===null?'criar':'editar',id:editing,nome:el('emojiName').value.trim(),motivo:el('emojiReason').value.trim(),caractere:el('emojiCharacter').value,local:el('emojiLocation').value};if(editing===null&&!data.caractere){el('emojiEditState').textContent='Escolha um emoji para criar a reação.';return;}if(await action('biblioteca',data))close();else el('emojiEditState').textContent=el('emojiState').textContent;};
|
||||
el('emojiSearch').oninput=()=>{if(state)render();};el('emojiNew').onclick=()=>edit(null);el('emojiUndo').onclick=()=>action('biblioteca',{acao:'desfazer'});el('emojiStop').onclick=async()=>{preview({limpar:true});await action('parar',{});};el('emojiExport').onclick=()=>{if(!state)return;const url=URL.createObjectURL(new Blob([JSON.stringify(state.reacoes.map(r=>r.receita),null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='carinha-emojis.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);};refresh();setInterval(refresh,3000);
|
||||
})();
|
||||
@@ -1,17 +0,0 @@
|
||||
'use strict';
|
||||
const calibrationPanel=document.createElement('section');
|
||||
calibrationPanel.style.cssText='border:1px solid #ddd;border-radius:14px;padding:16px;margin:16px 0';
|
||||
calibrationPanel.innerHTML='<h3 style="font-size:16px;margin:0 0 12px">Testar fim de curso · passos de 100 µs</h3><p class="notice">Observe o motor e recue ao atingir o limite. Não há detecção automática. Canais 5 e 6 acompanham juntos. Cada teste dura até 2 segundos.</p><label>Canal<select id="calChannel" style="max-width:220px">'+Array.from({length:8},(_,i)=>`<option value="${i}">Canal ${i}${i===5||i===6?' (par 5/6)':''}</option>`).join('')+'</select></label><p><output id="calPulse" style="font-size:24px">1500 µs</output></p><label><input id="calEnable" type="checkbox"> Habilitar testes de calibração</label><div style="display:flex;flex-wrap:wrap;gap:8px;margin:14px 0"><button id="calDown">−100 µs</button><button id="calTest">Testar posição</button><button id="calUp">+100 µs</button><button id="calStop">Parar sinais</button></div><div style="display:flex;flex-wrap:wrap;gap:8px"><button id="calMin">Marcar mínimo</button><button id="calCenter">Marcar centro</button><button id="calMax">Marcar máximo</button></div><p id="calMessage" role="status" class="notice">Escolha um canal. Marcar limites não envia movimento.</p>';
|
||||
document.querySelector('details').insertBefore(calibrationPanel,document.getElementById('calibration'));
|
||||
calibrationPanel.querySelectorAll('button').forEach(b=>b.style.cssText='font-size:13px;padding:11px 16px');
|
||||
let calibrationPulse=1500, calibrationBusy=false;
|
||||
const el=id=>document.getElementById(id);
|
||||
function calButtons(){for(const id of ['calDown','calUp','calTest'])el(id).disabled=calibrationBusy||!el('calEnable').checked;}
|
||||
async function calPost(route,data){const r=await fetch('/braco/'+route,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const d=await r.json();if(!r.ok)throw Error(d.erro);return d;}
|
||||
async function testCalibration(delta){if(calibrationBusy||!el('calEnable').checked)return;calibrationBusy=true;calButtons();try{const next=calibrationPulse+delta;if(next<500||next>2500)throw Error('Faixa absoluta: 500–2500 µs');await BracoUI.stop();const result=await calPost('calibrar',{canal:Number(el('calChannel').value),pulso:next});calibrationPulse=next;el('calPulse').textContent=next+' µs';el('calMessage').textContent='Teste enviado: '+JSON.stringify(result.pulsos)+'. Sinal desliga em 2 s.';}catch(e){el('calMessage').textContent=e.message;}finally{calibrationBusy=false;calButtons();}}
|
||||
el('calEnable').onchange=()=>{calButtons();if(!el('calEnable').checked)BracoUI.stop().catch(e=>el('calMessage').textContent=e.message);};
|
||||
el('calChannel').onchange=()=>{el('calEnable').checked=false;calibrationPulse=BracoUI.calibration()?.[Number(el('calChannel').value)].centro??1500;el('calPulse').textContent=calibrationPulse+' µs';calButtons();BracoUI.stop().catch(e=>el('calMessage').textContent=e.message);};
|
||||
el('calDown').onclick=()=>testCalibration(-100);el('calUp').onclick=()=>testCalibration(100);el('calTest').onclick=()=>testCalibration(0);
|
||||
el('calStop').onclick=()=>{el('calEnable').checked=false;calButtons();BracoUI.stop().catch(e=>el('calMessage').textContent=e.message);};
|
||||
for(const [id,key] of [['calMin','minimo'],['calCenter','centro'],['calMax','maximo']])el(id).onclick=async()=>{if(calibrationBusy)return;try{el('calEnable').checked=false;calButtons();await BracoUI.stop();BracoUI.markCalibration(Number(el('calChannel').value),key,calibrationPulse);el('calMessage').textContent='Marcado '+key+' = '+calibrationPulse+' µs. Clique Salvar calibração abaixo.';}catch(e){el('calMessage').textContent=e.message;}};
|
||||
calButtons();
|
||||
@@ -1,41 +0,0 @@
|
||||
'use strict';
|
||||
let preview=null, previewPose=Array(7).fill(90), previewAt=0, previous=performance.now();
|
||||
const armDrawing=document.querySelector('.arm');
|
||||
const svgNS='http://www.w3.org/2000/svg';
|
||||
const shell=armDrawing.querySelector('g[stroke]');
|
||||
const parts=Array.from(shell.children);
|
||||
function group(id){const g=document.createElementNS(svgNS,'g');g.id=id;return g;}
|
||||
const baseVisual=group('armBase'),lowerVisual=group('armLower'),upperVisual=group('armUpper'),neckVisual=group('armNeck'),handVisual=group('armHand');
|
||||
parts.forEach((part,i)=>{(i<2?baseVisual:i<8?lowerVisual:i<13?upperVisual:i<17?neckVisual:handVisual).append(part);});
|
||||
neckVisual.append(handVisual);upperVisual.append(neckVisual);lowerVisual.append(upperVisual);baseVisual.append(lowerVisual);shell.append(baseVisual);
|
||||
const bolts=armDrawing.querySelector(':scope > g:not([stroke]):not([fill])');
|
||||
if(bolts){Array.from(bolts.children).forEach(bolt=>{const y=Number(bolt.getAttribute('y'));(y>420?baseVisual:y>300?lowerVisual:y>170?upperVisual:neckVisual).append(bolt);});bolts.remove();}
|
||||
const guideLines=armDrawing.querySelector('g[fill="none"]');if(guideLines)guideLines.remove();
|
||||
function drawPose(p){
|
||||
baseVisual.removeAttribute('transform');
|
||||
baseVisual.style.transformOrigin='122px 450px';
|
||||
baseVisual.style.transform=`perspective(650px) rotateY(${p[6]-90}deg)`;
|
||||
baseVisual.style.transformBox='view-box';
|
||||
lowerVisual.setAttribute('transform',`rotate(${p[4]-90},122,339)`);
|
||||
upperVisual.setAttribute('transform',`rotate(${p[3]-90},122,211)`);
|
||||
neckVisual.setAttribute('transform',`rotate(${p[5]-90},122,125)`);
|
||||
handVisual.setAttribute('transform',`rotate(${p[1]-90},122,90)`);
|
||||
const fingers=handVisual.querySelectorAll('path')[2];
|
||||
handVisual.style.transformOrigin='122px 78px';
|
||||
handVisual.style.transformBox='view-box';
|
||||
handVisual.style.transform=`perspective(450px) rotateX(${p[2]-90}deg)`;
|
||||
if(fingers){fingers.setAttribute('transform',`translate(0,${(p[0]-90)*-.06}) scale(1,${1+(p[0]-90)*.003})`);}
|
||||
}
|
||||
function stopPreview(){preview=null;document.getElementById('animationStatus').textContent='Prévia parada · posição nominal';}
|
||||
document.getElementById('stopPreview').onclick=()=>{stopPreview();BracoUI.stop().catch(e=>document.getElementById('animationStatus').textContent=e.message);};
|
||||
const init=setInterval(()=>{if(!BracoUI.ready())return;clearInterval(init);
|
||||
Movimentos.sequencias(BracoUI.bounds()).forEach((move,i)=>{const card=document.createElement('article');card.style.cssText='border:1px solid var(--borda);border-radius:12px;padding:16px;flex:1;min-width:170px';const title=document.createElement('h3');title.textContent=move.nome;title.style.cssText='font-size:14px;margin:0 0 12px';card.append(title);
|
||||
for(const [text,physical] of [['Prévia',false],['Executar',true]]){const button=document.createElement('button');button.textContent=text;if(physical){button.dataset.execute='1';button.disabled=!BracoUI.canExecute();button.title='Marque Ativar movimento para executar';}button.style.cssText='font-size:12px;padding:10px 14px;margin:3px';button.onclick=async()=>{try{const steps=Movimentos.sequencias(BracoUI.bounds())[i].passos;if(physical){stopPreview();BracoUI.execute(steps);}else{await BracoUI.stop();preview={steps,index:0,hold:0};previewPose=BracoUI.pose();previewAt=performance.now();document.getElementById('animationStatus').textContent='Prévia: '+move.nome+' · sem movimento físico';}}catch(e){document.getElementById('animationStatus').textContent=e.message;}};card.append(button);}
|
||||
document.getElementById('movimentos').append(card);
|
||||
});},100);
|
||||
function animate(now){const dt=Math.min(.1,(now-previous)/1000);previous=now;
|
||||
if(preview){const goal=preview.steps[preview.index],step=Number(document.getElementById('speed').value)*dt;const distance=Math.max(...previewPose.map((v,i)=>Math.abs(goal[i]-v))),fraction=distance?Math.min(1,step/distance):1;previewPose=previewPose.map((v,i)=>v+(goal[i]-v)*fraction);if(previewPose.every((v,i)=>Math.abs(v-goal[i])<.01)){if(!preview.hold)preview.hold=now+700;if(now>=preview.hold){preview.index++;preview.hold=0;if(preview.index===preview.steps.length){preview=null;document.getElementById('animationStatus').textContent='Prévia concluída · sem movimento físico';}}}drawPose(previewPose);}else if(BracoUI.ready())drawPose(BracoUI.pose());requestAnimationFrame(animate);}
|
||||
document.getElementById('stop').addEventListener('click',stopPreview);
|
||||
document.addEventListener('visibilitychange',()=>{if(document.hidden)stopPreview();});
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
/* ==========================================================================
|
||||
BRAÇO ROBÓTICO · WORKSPACE & CINEMÁTICA
|
||||
========================================================================== */
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
color: var(--fraco);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 220px minmax(280px, 1fr) 150px;
|
||||
gap: 20px;
|
||||
margin-top: 24px;
|
||||
align-items: center;
|
||||
background: rgba(10, 18, 30, 0.7);
|
||||
padding: 24px;
|
||||
border-radius: var(--raio-lg);
|
||||
border: 1px solid var(--borda);
|
||||
box-shadow: var(--sombra-card);
|
||||
}
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.side button {
|
||||
padding: 10px 14px;
|
||||
font-size: 13.5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(92, 214, 255, 0.15));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.counter {
|
||||
text-align: center;
|
||||
color: var(--ciano);
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
background: rgba(92, 214, 255, 0.1);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(92, 214, 255, 0.25);
|
||||
}
|
||||
|
||||
.sliders {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 72px;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
background: rgba(16, 28, 44, 0.5);
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--raio-sm);
|
||||
border: 1px solid rgba(56, 82, 110, 0.2);
|
||||
}
|
||||
|
||||
.row label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--texto-medio);
|
||||
}
|
||||
|
||||
.row output {
|
||||
background: rgba(28, 48, 70, 0.8);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-sm);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--ciano);
|
||||
box-shadow: 0 0 10px rgba(92, 214, 255, 0.15);
|
||||
}
|
||||
|
||||
#console {
|
||||
background: rgba(5, 10, 18, 0.9);
|
||||
color: #a5c7e5;
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-md);
|
||||
min-height: 64px;
|
||||
font-size: 13px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#enableLabel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 18px 0 10px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(20, 36, 56, 0.6);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-md);
|
||||
font-weight: 600;
|
||||
color: var(--texto);
|
||||
}
|
||||
|
||||
.calibration {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.calibration article {
|
||||
padding: 16px;
|
||||
background: rgba(14, 24, 38, 0.7);
|
||||
}
|
||||
|
||||
.calibration label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#importFile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notice {
|
||||
max-width: 100ch;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#poses {
|
||||
font-size: 13px;
|
||||
background: rgba(12, 20, 32, 0.9);
|
||||
}
|
||||
|
||||
#movimentos {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
#movimentos button {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
border-radius: var(--raio-sm);
|
||||
background: rgba(20, 38, 60, 0.7);
|
||||
border: 1px solid var(--borda);
|
||||
}
|
||||
|
||||
#movimentos button:hover {
|
||||
border-color: var(--ciano);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.workspace {
|
||||
grid-template-columns: 140px 180px minmax(0, 1fr);
|
||||
}
|
||||
.right {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px;
|
||||
}
|
||||
.arm {
|
||||
height: 280px;
|
||||
grid-row: 1;
|
||||
}
|
||||
.sliders {
|
||||
grid-row: 2;
|
||||
}
|
||||
.side {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.calibration {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
-158
@@ -1,158 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Braço Robótico · Carinha</title>
|
||||
<meta name="description" content="Controle os ângulos, crie coreografias articuladas e coordene 8 canais de movimento do braço robótico.">
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<link rel="stylesheet" href="/braco.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>Braço Robótico</h1>
|
||||
<p style="margin:4px 0 0">Posturas e movimentos coordenados para os 8 canais de servo.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span id="connection" class="connection">Verificando conexão…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aviso de Segurança -->
|
||||
<div class="card" style="margin-bottom:18px;border-color:rgba(245,158,11,0.35);background:rgba(45,30,6,0.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--amarelo)" stroke-width="2" style="flex-shrink:0"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<div>
|
||||
<p style="margin:0;color:var(--texto-medio);font-weight:600;font-size:14px">Atenção ao usar o braço</p>
|
||||
<p style="margin:2px 0 0;font-size:13px">Ângulos são comandos nominais, sem medição do eixo. Canais 5 e 6 movem juntos e invertidos. Comece com o braço apoiado e limites calibrados. Ao parar ou perder a conexão, o sinal desliga e o braço pode perder sustentação.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:12px">
|
||||
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;margin:0">
|
||||
<input id="enable" type="checkbox" disabled>
|
||||
<span style="font-size:14px;font-weight:600">Ativar movimento das articulações — canais 0 a 7</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workspace Principal: SVG + Sliders + Controles -->
|
||||
<div class="workspace">
|
||||
|
||||
<!-- Painel Esquerdo: Posturas Salvas -->
|
||||
<aside class="side">
|
||||
<div class="card" style="padding:18px">
|
||||
<h2 style="font-size:16px;margin-bottom:14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
|
||||
Posturas Salvas
|
||||
</h2>
|
||||
<span id="count" class="counter" style="display:block;margin-bottom:12px">0 posturas</span>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<button id="savePose" style="width:100%">💾 Salvar postura atual</button>
|
||||
<select id="poses" aria-label="Postura salva" style="margin:0">
|
||||
<option>Sem posturas</option>
|
||||
</select>
|
||||
<button id="loadPose" disabled style="width:100%">📥 Carregar postura</button>
|
||||
<button id="deletePose" disabled style="width:100%;background:rgba(60,10,18,0.5);border-color:rgba(244,63,94,0.3)">🗑️ Excluir postura</button>
|
||||
<hr style="border:none;border-top:1px solid var(--borda);margin:4px 0">
|
||||
<button id="play" disabled style="width:100%" class="primary">▶️ Reproduzir sequência</button>
|
||||
<button id="stop" class="danger" style="width:100%">⛔ Parar sinais</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Diagrama SVG do Braço -->
|
||||
<svg class="arm" viewBox="0 0 240 530" role="img" aria-label="Ilustração detalhada do braço robótico">
|
||||
<defs>
|
||||
<linearGradient id="shell"><stop stop-color="#17191b"/><stop offset=".25" stop-color="#54585b"/><stop offset=".48" stop-color="#303437"/><stop offset=".8" stop-color="#151719"/><stop offset="1" stop-color="#3b3f41"/></linearGradient>
|
||||
<linearGradient id="edge" x2="0" y2="1"><stop stop-color="#707579"/><stop offset=".18" stop-color="#34383b"/><stop offset=".8" stop-color="#191c1e"/><stop offset="1" stop-color="#464c50"/></linearGradient>
|
||||
<radialGradient id="hub"><stop stop-color="#646b70"/><stop offset=".4" stop-color="#30363a"/><stop offset=".85" stop-color="#171a1c"/><stop offset="1" stop-color="#5c6267"/></radialGradient>
|
||||
<g id="bolt"><circle r="3.2" fill="#777e83" stroke="#111" stroke-width="1"/><path d="m-1.5-1.5 3 3m0-3-3 3" stroke="#222" stroke-width=".7"/></g>
|
||||
</defs>
|
||||
<g stroke="#151719" stroke-width="2.5">
|
||||
<path d="M25 512 46 490 73 467h100l18 23 29 22Z" fill="url(#shell)"/><path d="M74 478v-33q0-15 19-22h50q26 6 27 22v33q-47 16-96 0Z" fill="url(#edge)"/>
|
||||
<rect x="87" y="343" width="70" height="103" rx="23" fill="url(#shell)"/><rect x="96" y="356" width="51" height="76" rx="13" fill="#202426"/>
|
||||
<rect x="79" y="306" width="87" height="67" rx="24" fill="url(#edge)"/><circle cx="122" cy="339" r="24" fill="url(#hub)"/><circle cx="122" cy="339" r="10" fill="#30383d"/><circle cx="122" cy="339" r="3" fill="#949ba0"/>
|
||||
<rect x="87" y="213" width="69" height="106" rx="20" fill="url(#shell)"/><path d="M97 224v74M146 224v74" stroke="#686e72" stroke-width="1.2"/>
|
||||
<rect x="80" y="179" width="85" height="64" rx="20" fill="url(#edge)"/><circle cx="122" cy="211" r="24" fill="url(#hub)"/><circle cx="122" cy="211" r="8" fill="#5b6368"/>
|
||||
<rect x="94" y="130" width="57" height="67" rx="17" fill="url(#shell)"/><rect x="77" y="96" width="91" height="59" rx="21" fill="url(#edge)"/><circle cx="122" cy="125" r="23" fill="url(#hub)"/><circle cx="122" cy="125" r="7" fill="#656c71"/>
|
||||
<path d="M50 48h63q12 0 14-13h28q18 0 19 21v37q-3 13-18 14H65q-15 0-15-13Z" fill="url(#shell)"/><path d="M71 99h83q11-1 12-12V55" fill="none" stroke="#73797e" stroke-width="3"/><rect x="43" y="44" width="16" height="64" rx="4" fill="url(#edge)"/>
|
||||
<path d="M45 57 13 61 2 72l43-6Z M45 92 13 88 2 77l43 6Z" fill="url(#edge)"/><path d="M50 46h7v59" stroke="#92989d" stroke-width="1"/>
|
||||
</g>
|
||||
<g><use href="#bolt" x="88" y="192"/><use href="#bolt" x="158" y="192"/><use href="#bolt" x="88" y="234"/><use href="#bolt" x="158" y="234"/><use href="#bolt" x="90" y="316"/><use href="#bolt" x="155" y="316"/><use href="#bolt" x="90" y="362"/><use href="#bolt" x="155" y="362"/><use href="#bolt" x="88" y="110"/><use href="#bolt" x="157" y="110"/><use href="#bolt" x="100" y="449"/><use href="#bolt" x="144" y="449"/></g>
|
||||
<g fill="none" stroke="#2f3335" stroke-width="2" opacity=".8"><path d="M174 63q25 0 33 16t24 18M164 123q30 0 44 24t25 9M165 188q30 0 43 27t25 10M164 239q24 0 42 28t28 10M160 309q25 0 49 20t24 3M168 364q24 0 40 10t25 8M171 456q20-52 38-41t24 21"/></g>
|
||||
</svg>
|
||||
|
||||
<!-- Coluna de Sliders + Console -->
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:16px">
|
||||
<div class="card" style="padding:20px">
|
||||
<h2 style="font-size:16px;margin-bottom:14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
|
||||
Controle de Canais
|
||||
</h2>
|
||||
<div id="sliders" class="sliders"></div>
|
||||
<div style="display:flex;gap:16px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--borda)">
|
||||
<div style="flex:1">
|
||||
<label for="speed">Velocidade nominal (graus/s)</label>
|
||||
<input id="speed" type="range" min="5" max="90" value="25">
|
||||
</div>
|
||||
<output id="speedValue" style="font-size:22px;font-weight:700;color:var(--ciano);font-family:'JetBrains Mono',monospace;min-width:36px">25</output>
|
||||
</div>
|
||||
<div id="console" role="status" aria-live="polite" style="margin-top:14px;padding:10px 14px;background:rgba(5,9,16,0.6);border:1px solid var(--borda);border-radius:var(--raio-sm);font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ciano)">Carregando configurações…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Painel Direito: Ferramentas -->
|
||||
<aside class="side right">
|
||||
<div class="card" style="padding:18px">
|
||||
<h2 style="font-size:16px;margin-bottom:14px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9z"/></svg>
|
||||
Ferramentas
|
||||
</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<button id="export" style="width:100%">📤 Exportar JSON</button>
|
||||
<button id="import" style="width:100%">📥 Importar JSON</button>
|
||||
<button id="reset" style="width:100%">🎯 Centralizar na tela</button>
|
||||
<input id="importFile" type="file" accept=".json,application/json">
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Calibração de Limites -->
|
||||
<details style="margin-top:24px">
|
||||
<summary>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
Calibrar Limites por Canal
|
||||
</summary>
|
||||
<div class="card" style="margin-top:14px">
|
||||
<p style="margin:0 0 14px">O projeto original usa 500–2500 µs para 0–180°. Isso não confirma o fim de curso do seu servo. Amplie gradualmente os limites com o eixo livre. Os limites desta aba são independentes dos testes individuais.</p>
|
||||
<div id="calibration" class="calibration"></div>
|
||||
<button id="saveCalibration" style="margin-top:16px">💾 Salvar calibração</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Movimentos Coordenados -->
|
||||
<section style="margin-top:24px" class="card">
|
||||
<h2 style="font-size:18px;margin-bottom:8px">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Movimentos Coordenados
|
||||
</h2>
|
||||
<p style="margin:0 0 14px">Prévia é uma simulação dos comandos, sem sensores de posição. Executar envia a sequência aos oito canais dentro dos limites salvos.</p>
|
||||
<div id="movimentos" style="display:flex;gap:12px;flex-wrap:wrap"></div>
|
||||
<div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--borda);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
|
||||
<p id="animationStatus" style="margin:0;font-size:13px;color:var(--fraco)">Representação esquemática · posição nominal</p>
|
||||
<button id="stopPreview" style="font-size:13px">⛔ Parar prévia e sinais</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/braco-calibracao.js" defer></script>
|
||||
<script src="/braco.js"></script>
|
||||
<script src="/movimentos-core.js"></script>
|
||||
<script src="/braco-movimentos.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
'use strict';
|
||||
const $=id=>document.getElementById(id);
|
||||
let config, target=Array(7).fill(90), current=target.slice(), enabled=false, dirty=false, inflight=null, needed=false, playIndex=-1, pauseUntil=0, lastTick=performance.now();
|
||||
let sequence=null;
|
||||
async function api(path,data){const r=await fetch('/braco/'+path,data===undefined?{}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const d=await r.json();if(!r.ok)throw Error(d.erro||'Falha');return d;}
|
||||
function message(text){$('console').textContent=text;}
|
||||
function pulseAngle(p,c){const center=c.centro??1500;return p<=center?90*(p-500)/(center-500):90+90*(p-center)/(2500-center);}
|
||||
function bounds(i){const ch=config.articulacoes[i].canal,c=config.calibracao[ch];let lo=pulseAngle(c.minimo,c),hi=pulseAngle(c.maximo,c);if(ch===5){const pair=config.calibracao[6];lo=Math.max(lo,180-pulseAngle(pair.maximo,pair));hi=Math.min(hi,180-pulseAngle(pair.minimo,pair));}return [Math.ceil(lo),Math.floor(hi)];}
|
||||
function controls(){ $('enable').disabled=!config?.disponivel||dirty; document.querySelectorAll('[data-execute]').forEach(b=>{b.disabled=!enabled||dirty;b.title=b.disabled?'Marque Ativar movimento e salve a calibração':'Executar nos oito canais';}); $('play').disabled=!enabled||!config.posturas.length; $('loadPose').disabled=!config.posturas.length; $('deletePose').disabled=!config.posturas.length; }
|
||||
function render(){
|
||||
$('sliders').replaceChildren();
|
||||
config.articulacoes.forEach((a,i)=>{const [lo,hi]=bounds(i);target[i]=Math.max(lo,Math.min(hi,target[i]));const row=document.createElement('div');row.className='row';const wrap=document.createElement('div'),label=document.createElement('label'),range=document.createElement('input'),out=document.createElement('output');label.textContent=`${a.nome} · canal ${a.canal}${a.canal===5?' + 6 invertido':''} · limite ${lo}–${hi}°`;range.type='range';range.min=lo;range.max=hi;range.step=1;range.value=target[i];range.id='joint'+i;label.htmlFor=range.id;out.id='value'+i;out.textContent=String(Math.round(target[i])).padStart(3,'0');range.oninput=()=>{playIndex=-1;target[i]=Number(range.value);out.textContent=String(target[i]).padStart(3,'0');if(enabled)needed=true;else message('Posição escolhida na tela. Movimento desligado.');};wrap.append(label,range);row.append(wrap,out);$('sliders').append(row);});
|
||||
$('calibration').replaceChildren();config.calibracao.forEach((c,i)=>{const card=document.createElement('article');card.textContent=`Canal ${i}`;for(const [key,name] of [['minimo','Mínimo (µs)'],['centro','Centro (µs)'],['maximo','Máximo (µs)']]){const label=document.createElement('label');label.textContent=name;const input=document.createElement('input');input.type='number';input.min=500;input.max=2500;input.step=10;input.value=c[key]??1500;input.oninput=()=>{c[key]=Number(input.value);dirty=true;stop().catch(e=>message(e.message));controls();message('Calibração alterada. Salve para habilitar movimento.');};label.append(input);card.append(label);}$('calibration').append(card);});
|
||||
$('count').textContent=config.posturas.length+' posturas';$('poses').replaceChildren();config.posturas.forEach((pose,i)=>{const option=document.createElement('option');option.value=i;option.textContent=pose.nome;$('poses').append(option);});if(!config.posturas.length){const o=document.createElement('option');o.textContent='Sem posturas';$('poses').append(o);}controls();
|
||||
}
|
||||
function showTarget(){target.forEach((v,i)=>{$('joint'+i).value=v;$('value'+i).textContent=String(Math.round(v)).padStart(3,'0');});}
|
||||
async function stop(){enabled=false;needed=false;playIndex=-1;$('enable').checked=false;controls();if(inflight)await inflight;await api('parar',{});message('Sinais desligados. Movimento desativado.');}
|
||||
async function persist(){await stop();config=await api('config',{calibracao:config.calibracao,posturas:config.posturas});dirty=false;render();}
|
||||
$('enable').onchange=()=>{if($('enable').checked){enabled=true;needed=false;current=target.slice();lastTick=performance.now();controls();message('Ativado. Arraste uma articulação para enviar a postura aos oito canais.');}else stop().catch(e=>message(e.message));};
|
||||
$('stop').onclick=()=>stop().catch(e=>message(e.message));
|
||||
$('speed').oninput=()=>$('speedValue').textContent=$('speed').value;
|
||||
$('saveCalibration').onclick=async()=>{try{await persist();message('Calibração salva. Movimento desativado.');}catch(e){message(e.message);}};
|
||||
$('savePose').onclick=async()=>{try{const name=prompt('Nome da postura:',`Postura ${config.posturas.length+1}`);if(!name)return;config.posturas.push({nome:name,angulos:target.slice()});await persist();message('Postura salva, sem movimento.');}catch(e){config=await api('status');render();message(e.message);}};
|
||||
$('deletePose').onclick=async()=>{try{config.posturas.splice(Number($('poses').value),1);await persist();message('Postura excluída.');}catch(e){message(e.message);}};
|
||||
$('loadPose').onclick=()=>{playIndex=-1;target=config.posturas[Number($('poses').value)].angulos.slice();showTarget();if(enabled)needed=true;message(enabled?'Movendo para a postura escolhida.':'Postura carregada apenas na tela.');};
|
||||
$('play').onclick=()=>{if(!enabled||!config.posturas.length)return;sequence=config.posturas.map(p=>p.angulos.slice());playIndex=0;target=sequence[0].slice();needed=true;pauseUntil=0;showTarget();message('Reproduzindo posturas salvas uma vez.');};
|
||||
$('reset').onclick=async()=>{try{await stop();target=Array(7).fill(90);current=target.slice();showTarget();message('Centro selecionado apenas na tela.');}catch(e){message(e.message);}};
|
||||
$('export').onclick=()=>{const blob=new Blob([JSON.stringify({formato:'carinha-braco-v1',calibracao:config.calibracao,posturas:config.posturas},null,2)],{type:'application/json'});const url=URL.createObjectURL(blob),a=document.createElement('a');a.href=url;a.download='braco-posturas.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);};
|
||||
$('import').onclick=()=>$('importFile').click();
|
||||
$('importFile').onchange=async()=>{try{const f=$('importFile').files[0];if(!f)return;if(f.size>65536)throw Error('Arquivo maior que 64 KB');const data=JSON.parse(await f.text());if(data.formato!=='carinha-braco-v1')throw Error('Use arquivo exportado por esta aba');await stop();config=await api('config',{calibracao:data.calibracao,posturas:data.posturas});dirty=false;target=Array(7).fill(90);render();message('Importado, sem movimento.');}catch(e){message(e.message);}finally{$('importFile').value='';}};
|
||||
setInterval(()=>{
|
||||
const now=performance.now(),dt=Math.min(.2,(now-lastTick)/1000);lastTick=now;
|
||||
if(!enabled||dirty||inflight||!needed)return;
|
||||
const step=Number($('speed').value)*dt;
|
||||
const distance=Math.max(...current.map((v,i)=>Math.abs(target[i]-v)));
|
||||
const fraction=distance?Math.min(1,step/distance):1;
|
||||
current=current.map((v,i)=>v+(target[i]-v)*fraction);
|
||||
const pose=current.map(v=>Math.round(v*100)/100);
|
||||
inflight=api('mover',{angulos:pose}).then(()=>{
|
||||
if(!enabled)return;
|
||||
const reached=current.every((v,i)=>Math.abs(v-target[i])<.01);
|
||||
if(reached&&playIndex>=0){if(!pauseUntil)pauseUntil=performance.now()+700;if(performance.now()>=pauseUntil){playIndex++;pauseUntil=0;if(playIndex>=sequence.length){playIndex=-1;needed=false;message('Sequência concluída. Sinais desligam após 2 s.');}else{target=sequence[playIndex].slice();showTarget();}}}
|
||||
else if(reached){needed=false;message('Comando enviado. Sinais desligam após 2 s.');}
|
||||
}).catch(async e=>{enabled=false;needed=false;playIndex=-1;$('enable').checked=false;controls();message(e.message);try{await api('parar',{});}catch{}}).finally(()=>{inflight=null;});
|
||||
},100);
|
||||
document.addEventListener('visibilitychange',()=>{if(document.hidden&&enabled)stop().catch(()=>{});});
|
||||
api('status').then(data=>{config=data;render();$('connection').textContent=data.disponivel?'PCA9685 · conectado':'PCA9685 indisponível';message('Pronto. Movimento desativado. Calibre antes de ampliar o curso.');}).catch(e=>message(e.message));
|
||||
window.BracoUI={calibration:()=>config?.calibracao,markCalibration(ch,key,us){config.calibracao[ch][key]=us;if(ch===5||ch===6){const other=11-ch,sum=(config.calibracao[5].centro??1500)+(config.calibracao[6].centro??1500);if(key!=='centro')config.calibracao[other][key==='minimo'?'maximo':'minimo']=sum-us;}dirty=true;render();message('Limite marcado. Clique Salvar calibração para gravar.');},canExecute:()=>enabled&&!dirty,ready:()=>!!config,bounds:()=>config.articulacoes.map((a,i)=>bounds(i)),pose:()=>enabled?current.slice():target.slice(),stop,
|
||||
execute(steps){if(!enabled||dirty)throw Error('Ative o movimento e salve a calibração primeiro');sequence=steps.map(s=>s.slice());playIndex=0;target=sequence[0].slice();needed=true;pauseUntil=0;showTarget();message('Executando movimento sincronizado.');}};
|
||||
@@ -84,7 +84,7 @@ class Braco:
|
||||
try:
|
||||
for channel,pulse in pulses.items():
|
||||
self.servos.hw.pulse(channel,pulse)
|
||||
self.servos.active[channel]=prazo
|
||||
self.servos.ligar([(channel,prazo) for channel in pulses])
|
||||
except OSError:
|
||||
self.alvo=None; self.servos.stop()
|
||||
raise
|
||||
@@ -102,7 +102,13 @@ class Braco:
|
||||
self.escrever(pulses,prazo)
|
||||
self.atual=[float(a) for a in pose]
|
||||
return dict(ok=True,pulsos=pulses,movendo=False)
|
||||
self.alvo=[float(a) for a in pose]; self.velocidade=velocidade; self.lease=prazo
|
||||
alvo=[float(a) for a in pose]
|
||||
if all(abs(a-t)<.01 for a,t in zip(self.atual,alvo)):
|
||||
# Já no alvo: só renova o prazo (e reenergiza canais que tenham desligado).
|
||||
self.alvo=None
|
||||
self.escrever(pulses,prazo)
|
||||
return dict(ok=True,pulsos=pulses,movendo=False)
|
||||
self.alvo=alvo; self.velocidade=velocidade; self.lease=prazo
|
||||
for channel in list(self.servos.active): self.servos.active[channel]=prazo
|
||||
return dict(ok=True,pulsos=pulses,movendo=True)
|
||||
def cancelar(self):
|
||||
@@ -142,7 +148,7 @@ class Braco:
|
||||
self.servos.reservar('braco'); self.alvo=None; self.atual=None
|
||||
for ch,us in outputs.items():
|
||||
self.servos.hw.pulse(ch,us)
|
||||
self.servos.active[ch]=time.monotonic()+2
|
||||
self.servos.ligar([(ch,time.monotonic()+2) for ch in outputs])
|
||||
return dict(ok=True,pulsos=outputs)
|
||||
def rotas(self,h,method):
|
||||
route=h.path.split('?',1)[0]
|
||||
|
||||
+77
-6
@@ -26,6 +26,25 @@
|
||||
</svg>
|
||||
<div id="fps"></div>
|
||||
<script>
|
||||
/* Token do servidor (o app Android abre a página com ?t=...): vai em todo pedido ao
|
||||
próprio servidor, inclusive os de reacoes-render.js. Sem ?t= nada muda. */
|
||||
(function () {
|
||||
const token = new URLSearchParams(location.search).get('t');
|
||||
window.carinhaToken = token || '';
|
||||
if (!token || !window.fetch) return;
|
||||
const original = window.fetch.bind(window);
|
||||
window.fetch = (recurso, opcoes = {}) => {
|
||||
try {
|
||||
const url = new URL(typeof recurso === 'string' ? recurso : recurso.url, location.href);
|
||||
if (url.origin === location.origin) {
|
||||
const cabecalhos = new Headers(opcoes.headers || {});
|
||||
cabecalhos.set('Authorization', 'Bearer ' + token);
|
||||
opcoes = Object.assign({}, opcoes, { headers: cabecalhos });
|
||||
}
|
||||
} catch (e) { /* URL estranha: segue sem token */ }
|
||||
return original(recurso, opcoes);
|
||||
};
|
||||
})();
|
||||
"use strict";
|
||||
/* -------------------------------------------------------------------------
|
||||
Carinha estilo Eilik em SVG — porte fiel do eilik.py (Python/framebuffer).
|
||||
@@ -463,7 +482,7 @@ window.eilik = {
|
||||
// busca ordens no servidorzinho da placa (/fila) — assim da para mandar gesto
|
||||
// do PC com um curl, igual ao FIFO de antes
|
||||
async function buscarOrdens() {
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1') return;
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1' || window.carinhaSSE) return;
|
||||
try {
|
||||
const resp = await fetch("fila"+(par.get("aparelho")==="1"?"?aparelho=1":""), { cache: "no-store" });
|
||||
if (!resp.ok) return;
|
||||
@@ -487,7 +506,18 @@ async function aplicarAparencia() {
|
||||
} catch (e) { /* sem servidor — segue com o padrao */ }
|
||||
}
|
||||
setTimeout(aplicarAparencia, 200);
|
||||
if (new URLSearchParams(location.search).get('espelho') === '1') setInterval(aplicarAparencia, 1000);
|
||||
// ?painel=1: prévia dentro do painel novo. Nada de polling; o painel repassa os eventos
|
||||
// do servidor (SSE) por postMessage.
|
||||
const MODO_PAINEL = new URLSearchParams(location.search).get('painel') === '1';
|
||||
if (MODO_PAINEL) {
|
||||
window.carinhaAtiva = false;
|
||||
addEventListener('message', (e) => {
|
||||
if (e.origin !== location.origin || e.source !== parent || !e.data) return;
|
||||
const m = e.data;
|
||||
if (m.tipo === 'ordem' && typeof m.ordem === 'string') trata(m.ordem);
|
||||
else if (m.tipo === 'config' && m.config) configurarApp(m.config);
|
||||
});
|
||||
} else if (new URLSearchParams(location.search).get('espelho') === '1') setInterval(aplicarAparencia, 1000);
|
||||
|
||||
// teclado (util para testar no PC)
|
||||
const TECLAS = { p: "piscar", f: "feliz", c: "coracao", s: "surpreso", b: "bravo",
|
||||
@@ -821,8 +851,10 @@ async function sincronizarApp() {
|
||||
if (sincronizando || location.protocol === 'file:' || window.carinhaAtiva === false) return;
|
||||
sincronizando = true;
|
||||
try {
|
||||
if (!window.carinhaSSE) {
|
||||
const resp = await fetch('/app/config', { cache: 'no-store', signal: AbortSignal.timeout(2500) });
|
||||
if (resp.ok) configurarApp(await resp.json());
|
||||
}
|
||||
if (par.get('aparelho') === '1') {
|
||||
const agora = performance.now() / 1000;
|
||||
await fetch('/app/status', { method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
@@ -968,7 +1000,7 @@ setTimeout(relatar, 1500);
|
||||
if(location.protocol==='file:')return;
|
||||
let seen=null,fetching=false;
|
||||
async function poll(){
|
||||
if(fetching||window.carinhaAtiva===false)return;fetching=true;
|
||||
if(fetching||window.carinhaAtiva===false||window.carinhaSSE)return;fetching=true;
|
||||
try{const response=await fetch('/conversa/status',{cache:'no-store',signal:AbortSignal.timeout(2500)});if(!response.ok)return;
|
||||
const s=await response.json(),m=s.ultima;if(!m){seen=null;return;}
|
||||
if(m.id===seen||Date.now()/1000-m.horario>60)return;seen=m.id;
|
||||
@@ -980,11 +1012,50 @@ setTimeout(relatar, 1500);
|
||||
|
||||
</script>
|
||||
<script src="/reacoes-render.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
if(new URLSearchParams(location.search).get('aparelho')==='1' && new URLSearchParams(location.search).has('atualizacao')) {
|
||||
const aviso=document.createElement('div');aviso.id='avisoRecarga';aviso.textContent='Tela atualizada';aviso.style.cssText='position:fixed;bottom:8%;left:0;right:0;text-align:center;color:#fff;font:24px sans-serif;z-index:100;pointer-events:none';document.body.append(aviso);setTimeout(()=>aviso.remove(),4000);
|
||||
}
|
||||
|
||||
/* Tempo real: um EventSource em /eventos substitui os pollings de /fila, /app/config,
|
||||
/conversa/status e /treinamento/expressao. Se cair, os pollings voltam sozinhos
|
||||
(window.carinhaSSE=false) até o EventSource reconectar. */
|
||||
(function () {
|
||||
const p = new URLSearchParams(location.search);
|
||||
if (location.protocol === 'file:' || p.get('espelho') === '1' || !window.EventSource) return;
|
||||
const aparelho = p.get('aparelho') === '1';
|
||||
const t = window.carinhaToken;
|
||||
const fonte = new EventSource('/eventos' + (t ? '?t=' + encodeURIComponent(t) : ''));
|
||||
let ultimaConversa = null, ultimaReacao = null, primeira = true;
|
||||
const ouvir = (tipo, fn) => fonte.addEventListener(tipo, (e) => { try { fn(JSON.parse(e.data)); } catch (err) {} });
|
||||
fonte.addEventListener('pronto', () => {
|
||||
// Ordens que chegaram antes da conexão ficam na fila: executa uma vez e passa ao SSE.
|
||||
if (primeira) { primeira = false; buscarOrdens(); }
|
||||
window.carinhaSSE = true;
|
||||
// Foto dos ajustes a cada (re)conexão; depois só mudanças chegam por 'app_config'.
|
||||
fetch('/app/config', { cache: 'no-store' }).then((r) => r.ok && r.json()).then((c) => c && configurarApp(c)).catch(() => {});
|
||||
});
|
||||
fonte.onerror = () => {
|
||||
if (!window.carinhaSSE) return;
|
||||
window.carinhaSSE = false;
|
||||
// Volta ao polling sem repetir o que o SSE já entregou.
|
||||
fetch('fila' + (aparelho ? '?aparelho=1' : ''), { cache: 'no-store' }).catch(() => {});
|
||||
};
|
||||
ouvir('expressao', (d) => trata(d.ordem));
|
||||
ouvir('recarregar', () => { if (aparelho) trata('recarregar'); });
|
||||
ouvir('app_config', (c) => configurarApp(c));
|
||||
ouvir('conversa', (s) => {
|
||||
const m = s.ultima;
|
||||
if (!m || m.id === ultimaConversa || Date.now() / 1000 - m.horario > 60) return;
|
||||
ultimaConversa = m.id;
|
||||
MIC.ultimoSom = performance.now() / 1000; trata('acordar'); trata(m.gesto);
|
||||
});
|
||||
ouvir('reacao', (d) => {
|
||||
if (!d || d.id === ultimaReacao || Date.now() / 1000 - d.horario > 60) return;
|
||||
ultimaReacao = d.id;
|
||||
if (window.eilik && window.eilik.receita) window.eilik.receita(d.receita);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+7
-1
@@ -18,6 +18,8 @@ class Cerebro:
|
||||
def __init__(self,path,controle,enviar):
|
||||
self.path=Path(path);self.controle=controle;self.enviar=enviar
|
||||
self.endpoint=os.environ.get('CARINHA_IA_URL','http://127.0.0.1:8101')
|
||||
# O llama-server do S10 fica na rede: com token, ele exige a mesma chave (--api-key).
|
||||
self.chave=os.environ.get('CARINHA_IA_CHAVE') or os.environ.get('CARINHA_TOKEN','')
|
||||
self.executor='S10' if '192.168.1.16' in self.endpoint else 'Orange Pi'
|
||||
self.lock=threading.Lock();self.ativo=False;self.pending=None;self.busy=False
|
||||
self.conversando=False;self.history=[];self.result=None;self.error='';self.last=0;self.generation=0
|
||||
@@ -25,6 +27,10 @@ class Cerebro:
|
||||
try:self.ativo=json.loads(self.path.read_text())['ativo'] is True
|
||||
except (OSError,ValueError,KeyError,TypeError):pass
|
||||
threading.Thread(target=self.loop,daemon=True).start()
|
||||
def cabecalhos(self):
|
||||
h={'Content-Type':'application/json'}
|
||||
if self.chave:h['Authorization']='Bearer '+self.chave
|
||||
return h
|
||||
def config(self,ativo):
|
||||
if type(ativo) is not bool:raise ValueError('ativo deve ser booleano')
|
||||
with self.lock:
|
||||
@@ -43,7 +49,7 @@ class Cerebro:
|
||||
return dict(ok=True)
|
||||
def decide(self,event):
|
||||
payload=dict(model='local',messages=[dict(role='system',content='Você é Carinha, um pequeno robô curioso, gentil e expressivo, inspirado em WALL-E. Escolha uma expressão adequada ao evento. Varie os gestos recentes. Responda somente JSON.'),dict(role='user',content=json.dumps(dict(evento=event,recentes=self.history[-3:]),ensure_ascii=False)+' /no_think')],max_tokens=32,temperature=.7,chat_template_kwargs=dict(enable_thinking=False),response_format=dict(type='json_schema',json_schema=dict(name='intencao',strict=True,schema=dict(type='object',properties=dict(gesto=dict(type='string',enum=list(GESTOS))),required=['gesto'],additionalProperties=False))))
|
||||
request=Request(self.endpoint+'/v1/chat/completions',data=json.dumps(payload).encode(),headers={'Content-Type':'application/json'})
|
||||
request=Request(self.endpoint+'/v1/chat/completions',data=json.dumps(payload).encode(),headers=self.cabecalhos())
|
||||
start=time.monotonic()
|
||||
with urlopen(request,timeout=90) as response:data=json.load(response)
|
||||
content=data['choices'][0]['message']['content']
|
||||
|
||||
+8
-67
@@ -1,10 +1,7 @@
|
||||
"""Configuração persistente, telemetria e prévia da câmera do celular."""
|
||||
import ipaddress
|
||||
"""Configuração persistente e telemetria do celular; sinalização do vídeo WebRTC."""
|
||||
import json
|
||||
import math
|
||||
import os
|
||||
from pathlib import Path
|
||||
import subprocess
|
||||
import threading
|
||||
import time
|
||||
from comum import origem_valida
|
||||
@@ -33,8 +30,6 @@ LIMITES = dict(volume=(0, 1), somlim=(0, 1), somganho=(0, 1),
|
||||
somaltolim=(0, 1), sompausa=(1, 3600), somcooldown=(0, 120),
|
||||
movlim=(0, 1), movforte=(0, 1), movcooldown=(0, 120), movolhar=(0, 100),
|
||||
brilho=(0.01, 1), brilhoRepouso=(0.01, 1), repousoTela=(5, 3600))
|
||||
TOOLS = Path(os.environ.get('CARINHA_TOOLS',
|
||||
'C:/Users/JullioPC/Documents/Open/orange-pi-zero3/android/tools'))
|
||||
|
||||
|
||||
def validar(dados):
|
||||
@@ -65,9 +60,6 @@ class ControlePC:
|
||||
self.status_at = 0
|
||||
self.celular_ip = None
|
||||
self.recarga = {"id": None, "confirmada": False}
|
||||
self.frame = b''
|
||||
self.frame_at = 0
|
||||
self.frame_seq = 0
|
||||
self.rtc = Sinalizacao()
|
||||
self.publicar = lambda tipo, dados: None
|
||||
try:
|
||||
@@ -85,8 +77,6 @@ class ControlePC:
|
||||
self.config = novo
|
||||
if not novo['preview']:
|
||||
self.rtc.encerrar()
|
||||
self.frame = b''
|
||||
self.frame_at = 0
|
||||
return novo.copy()
|
||||
|
||||
def resumo(self, host=''):
|
||||
@@ -96,15 +86,13 @@ class ControlePC:
|
||||
idade = agora - self.status_at
|
||||
return dict(online=idade < 5, idade=round(idade, 1) if self.status_at else None,
|
||||
celular_ip=self.celular_ip, servidor_ip=host, recarga=self.recarga.copy(),
|
||||
estado=self.estado.copy(), preview=self.config['preview'],
|
||||
camera_recente=bool(self.frame) and agora - self.frame_at < 3 and self.config['preview'],
|
||||
frame_seq=self.frame_seq)
|
||||
estado=self.estado.copy(), preview=self.config['preview'])
|
||||
|
||||
def rotas(self, h, metodo):
|
||||
if self.rtc.atender(h, metodo, self.config['preview']):
|
||||
return True
|
||||
rota = h.path.split('?', 1)[0].rstrip('/')
|
||||
if rota not in ('/app/config', '/app/status', '/camera/frame', '/app/connect', '/app/health'):
|
||||
if rota not in ('/app/config', '/app/padrao', '/app/status', '/app/health'):
|
||||
return False
|
||||
|
||||
def enviar(dados, codigo=200):
|
||||
@@ -117,18 +105,19 @@ class ControlePC:
|
||||
if rota == '/app/config' and h.headers.get('Content-Type', '').split(';')[0] != 'application/json':
|
||||
raise ValueError('Use JSON')
|
||||
tamanho = int(h.headers.get('Content-Length', '0'))
|
||||
limite = 1_000_000 if rota == '/camera/frame' else 16384
|
||||
if tamanho <= 0 or tamanho > limite:
|
||||
if tamanho <= 0 or tamanho > 16384:
|
||||
enviar({'erro': 'Corpo vazio ou grande demais'}, 413)
|
||||
return True
|
||||
corpo = h.rfile.read(tamanho)
|
||||
if len(corpo) != tamanho:
|
||||
raise ValueError('Corpo incompleto')
|
||||
dados = None if rota == '/camera/frame' else json.loads(corpo)
|
||||
dados = json.loads(corpo)
|
||||
else:
|
||||
dados = None
|
||||
|
||||
if rota == '/app/health':
|
||||
if rota == '/app/padrao':
|
||||
enviar(PADRAO)
|
||||
elif rota == '/app/health':
|
||||
enviar({'projeto': 'carinha-pc', 'versao': versao()})
|
||||
elif rota == '/app/config':
|
||||
if metodo == 'POST':
|
||||
@@ -153,56 +142,8 @@ class ControlePC:
|
||||
enviar({'ok': True})
|
||||
else:
|
||||
enviar(self.resumo(h.headers.get("Host", "").split(":")[0]))
|
||||
elif rota == '/camera/frame':
|
||||
with self.lock:
|
||||
if metodo == 'POST':
|
||||
if not self.config['preview']:
|
||||
enviar({'erro': 'Transmissão desligada'}, 409)
|
||||
elif h.headers.get('Content-Type', '').split(';')[0] != 'image/jpeg' or not corpo.startswith(b'\xff\xd8') or not corpo.endswith(b'\xff\xd9'):
|
||||
enviar({'erro': 'Esperava uma imagem JPEG'}, 400)
|
||||
else:
|
||||
self.frame = corpo
|
||||
self.frame_at = time.monotonic()
|
||||
self.frame_seq += 1
|
||||
enviar({'ok': True})
|
||||
else:
|
||||
recente = self.config['preview'] and self.frame and time.monotonic() - self.frame_at < 3
|
||||
h.enviar(self.frame if recente else b'', 'image/jpeg', 200 if recente else 204)
|
||||
elif rota == '/app/connect':
|
||||
if metodo != 'POST':
|
||||
enviar({'erro': 'Use POST'}, 405)
|
||||
elif h.client_address[0] not in ('127.0.0.1', '::1'):
|
||||
enviar({'erro': 'Abra o painel em localhost no PC para conectar'}, 403)
|
||||
else:
|
||||
self.conectar(h, dados, enviar)
|
||||
except (ValueError, TypeError) as e:
|
||||
enviar({'erro': str(e)}, 400)
|
||||
except OSError as e:
|
||||
enviar({'erro': str(e)}, 503)
|
||||
return True
|
||||
|
||||
def conectar(self, h, dados, enviar):
|
||||
ip = str(ipaddress.IPv4Address(dados.get('ip', '192.168.1.16')))
|
||||
porta = dados.get('porta', 5555)
|
||||
if isinstance(porta, bool) or not isinstance(porta, int) or not 1 <= porta <= 65535:
|
||||
raise ValueError('Porta ADB inválida')
|
||||
pc = str(ipaddress.IPv4Address(dados.get('pc', '192.168.1.15')))
|
||||
adb = str(TOOLS / 'android-sdk/platform-tools/adb.exe')
|
||||
serial = '%s:%s' % (ip, porta)
|
||||
url = 'http://%s:%s' % (pc, h.server.server_port)
|
||||
comandos = [[adb, 'connect', serial], [adb, '-s', serial, 'shell', 'input', 'keyevent', 'KEYCODE_WAKEUP'],
|
||||
[adb, '-s', serial, 'shell', 'wm', 'dismiss-keyguard'],
|
||||
[adb, '-s', serial, 'shell', 'am', 'start', '-n', 'br.carinha.rosto/.MainActivity', '-e', 'servidor', url]]
|
||||
saidas = []
|
||||
for cmd in comandos:
|
||||
try:
|
||||
r = subprocess.run(cmd, capture_output=True, text=True, timeout=15,
|
||||
creationflags=subprocess.CREATE_NO_WINDOW if os.name == 'nt' else 0)
|
||||
except subprocess.TimeoutExpired:
|
||||
enviar({'erro': 'ADB não respondeu. Confira a depuração Wi-Fi no celular.'}, 504)
|
||||
return
|
||||
saidas.append((r.stdout + r.stderr).strip())
|
||||
if r.returncode or 'cannot connect' in r.stdout.lower() or 'failed' in r.stdout.lower() or 'error:' in r.stdout.lower():
|
||||
enviar({'erro': '\n'.join(saidas)}, 502)
|
||||
return
|
||||
enviar({'ok': True, 'servidor': url, 'mensagem': 'App aberto. Aguarde a confirmação de conexão no painel.'})
|
||||
|
||||
-327
@@ -1,327 +0,0 @@
|
||||
/* ==========================================================================
|
||||
CONVERSA COM O CARINHA · CHAT MODERNO IA
|
||||
========================================================================== */
|
||||
|
||||
/* Workspace sticky de 2 colunas: rosto fixo + chat rolável */
|
||||
.conversa-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 310px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.conversa-sticky-col {
|
||||
position: sticky;
|
||||
top: 84px;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
max-height: calc(100vh - 104px);
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.conversa-sticky-col::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.conversa-sticky-col::-webkit-scrollbar-thumb {
|
||||
background: rgba(92,214,255,0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.conversa-chat-col {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-gesto-rapido {
|
||||
flex: 1 1 calc(50% - 4px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.conversa-workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.conversa-sticky-col {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chat-card {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
||||
.chat-header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--borda);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
min-height: 380px;
|
||||
max-height: 520px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background: rgba(6, 12, 22, 0.75);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
scroll-behavior: smooth;
|
||||
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.chat-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
max-width: 82%;
|
||||
animation: chatMsgAnim 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes chatMsgAnim {
|
||||
from { opacity: 0; transform: translateY(10px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.chat-row.user {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.chat-row.assistant {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-row.assistant .chat-avatar {
|
||||
background: linear-gradient(135deg, #10263f 0%, #1e4b78 100%);
|
||||
border: 1px solid var(--ciano-brilho, #5cd6ff);
|
||||
box-shadow: 0 0 12px var(--ciano-glow);
|
||||
}
|
||||
|
||||
.chat-row.user .chat-avatar {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-balloon {
|
||||
padding: 12px 18px;
|
||||
border-radius: 16px;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-row.assistant .chat-balloon {
|
||||
background: rgba(16, 28, 46, 0.9);
|
||||
border: 1px solid rgba(92, 214, 255, 0.3);
|
||||
color: #f1f7fd;
|
||||
border-top-left-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.chat-row.user .chat-balloon {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
|
||||
color: #ffffff;
|
||||
border-top-right-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
|
||||
}
|
||||
|
||||
.chat-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chat-gesto-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: 12px;
|
||||
background: rgba(92, 214, 255, 0.12);
|
||||
color: var(--ciano);
|
||||
border: 1px solid rgba(92, 214, 255, 0.3);
|
||||
cursor: pointer;
|
||||
transition: all 0.16s ease;
|
||||
}
|
||||
|
||||
.chat-gesto-badge:hover {
|
||||
background: rgba(92, 214, 255, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.chat-speak-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 2px 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
color: var(--fraco);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chat-speak-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--ciano);
|
||||
background: transparent;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Digitando / Pensando */
|
||||
.chat-typing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(16, 28, 46, 0.8);
|
||||
border: 1px solid rgba(92, 214, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
width: fit-content;
|
||||
color: var(--ciano);
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dot-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--ciano);
|
||||
border-radius: 50%;
|
||||
animation: dotPulseAnim 1.2s infinite ease-in-out;
|
||||
}
|
||||
.dot-pulse:nth-child(2) { animation-delay: 0.2s; }
|
||||
.dot-pulse:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes dotPulseAnim {
|
||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
||||
40% { transform: scale(1.1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Sugestões de Conversa */
|
||||
.chat-suggestions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.suggestion-chip {
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
background: rgba(18, 34, 54, 0.6);
|
||||
border: 1px solid var(--borda);
|
||||
color: var(--texto-medio);
|
||||
font-size: 12.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.16s ease;
|
||||
}
|
||||
|
||||
.suggestion-chip:hover {
|
||||
border-color: var(--ciano);
|
||||
color: #ffffff;
|
||||
background: rgba(30, 56, 88, 0.85);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(92, 214, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Barra de Entrada */
|
||||
.chat-input-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-input-container input {
|
||||
margin: 0 !important;
|
||||
padding-right: 48px;
|
||||
border-radius: var(--raio-md);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.btn-mic {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(22, 38, 60, 0.8);
|
||||
border: 1px solid var(--borda);
|
||||
color: var(--texto-medio);
|
||||
}
|
||||
|
||||
.btn-mic:hover {
|
||||
border-color: var(--ciano);
|
||||
color: var(--ciano);
|
||||
}
|
||||
|
||||
.btn-mic.recording {
|
||||
background: var(--vermelho);
|
||||
border-color: var(--vermelho);
|
||||
color: #ffffff;
|
||||
animation: micPulse 1s infinite alternate;
|
||||
box-shadow: 0 0 16px rgba(244, 63, 94, 0.6);
|
||||
}
|
||||
|
||||
@keyframes micPulse {
|
||||
from { transform: scale(1); }
|
||||
to { transform: scale(1.08); }
|
||||
}
|
||||
|
||||
/* Lembranças / Memória */
|
||||
.memory-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(12, 22, 36, 0.6);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-sm);
|
||||
margin-bottom: 8px;
|
||||
transition: border-color 0.16s ease;
|
||||
}
|
||||
|
||||
.memory-card:hover {
|
||||
border-color: rgba(92, 214, 255, 0.4);
|
||||
}
|
||||
-164
@@ -1,164 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Conversar com IA · Carinha</title>
|
||||
<meta name="description" content="Converse por voz ou texto com o Carinha usando Google Gemini com memória de longo prazo.">
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<link rel="stylesheet" href="/conversa.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Cabeçalho da Página -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>Conversar com o Carinha</h1>
|
||||
<p style="margin:4px 0 0">Converse por voz ou texto. As expressões do rosto mudam em tempo real conforme a conversa.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:13px;margin:0;cursor:pointer">
|
||||
<input type="checkbox" id="conversaVozAuto" checked style="width:16px;height:16px">
|
||||
<span>Falar respostas (TTS)</span>
|
||||
</label>
|
||||
<span class="badge ativo"><span class="badge-dot"></span> Gemini Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WORKSPACE STICKY: Rosto fica fixado enquanto a conversa rola -->
|
||||
<div class="conversa-workspace">
|
||||
|
||||
<!-- Coluna Fixa (Sticky: Rosto + Status) -->
|
||||
<aside class="conversa-sticky-col">
|
||||
|
||||
<!-- Preview do Rosto ao Vivo -->
|
||||
<section class="card sticky-preview-card" style="margin-bottom:18px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
|
||||
Rosto ao Vivo
|
||||
</h2>
|
||||
<span class="badge ativo" style="font-size:11px">📌 Sempre Visível</span>
|
||||
</div>
|
||||
|
||||
<iframe id="conversaCarinhaPreview"
|
||||
src="/carinha.html?espelho=1&audio=0"
|
||||
title="Expressão atual do Carinha"
|
||||
style="width:100%;height:220px;border-radius:var(--raio-md);border:1px solid var(--borda-brilho);background:#000;box-shadow:inset 0 0 30px rgba(0,0,0,0.8),0 0 20px var(--ciano-glow)">
|
||||
</iframe>
|
||||
|
||||
<!-- Status da Expressão Atual -->
|
||||
<div id="conversaExpressaoAtual" style="margin-top:10px;font-size:13px;color:var(--ciano);min-height:22px;text-align:center">
|
||||
Aguardando conversa…
|
||||
</div>
|
||||
|
||||
<!-- Motor de IA selecionado -->
|
||||
<div style="margin-top:12px">
|
||||
<label for="conversaProvedor" style="font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muito-fraco);margin-bottom:6px">Motor de IA</label>
|
||||
<select id="conversaProvedor" style="width:100%;margin:0">
|
||||
<option value="gemini">✨ Google Gemini · Nuvem</option>
|
||||
<option value="local">📱 Qwen · Local no Celular</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gestos Rápidos -->
|
||||
<section class="card">
|
||||
<h2 style="font-size:15px;margin-bottom:12px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
|
||||
Gestos Rápidos
|
||||
</h2>
|
||||
<div class="toolbar" style="flex-wrap:wrap;gap:8px;margin:0">
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="feliz" style="padding:7px 12px;font-size:13px">😊 Feliz</button>
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="surpreso" style="padding:7px 12px;font-size:13px">😲 Surpreso</button>
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="piscar" style="padding:7px 12px;font-size:13px">😉 Piscar</button>
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="coracao" style="padding:7px 12px;font-size:13px">💖 Amor</button>
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="dormir" style="padding:7px 12px;font-size:13px">🌙 Dormir</button>
|
||||
<button type="button" class="btn-gesto-rapido" data-gesto="acordar" style="padding:7px 12px;font-size:13px">☀️ Acordar</button>
|
||||
</div>
|
||||
<p id="conversaGestoEstado" role="status" style="margin:10px 0 0;font-size:12.5px;color:var(--fraco);min-height:18px"></p>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- Coluna Rolável (Chat) -->
|
||||
<main class="conversa-chat-col">
|
||||
<section class="card chat-card" style="margin:0">
|
||||
<div class="chat-header-bar">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<span style="font-weight:700;font-size:16px">Histórico</span>
|
||||
</div>
|
||||
<p id="conversaEstado" role="status" style="margin:0;font-size:12.5px;color:var(--fraco)">Carregando conversa…</p>
|
||||
</div>
|
||||
|
||||
<!-- Caixa de Histórico de Mensagens -->
|
||||
<div id="conversaHistorico" class="chat-box" role="log" aria-label="Histórico da conversa"></div>
|
||||
|
||||
<!-- Indicador de Digitando / Pensando -->
|
||||
<div id="conversaTyping" class="chat-typing" style="display:none">
|
||||
<span>Carinha está pensando</span>
|
||||
<span class="dot-pulse"></span>
|
||||
<span class="dot-pulse"></span>
|
||||
<span class="dot-pulse"></span>
|
||||
</div>
|
||||
|
||||
<!-- Sugestões Rápidas de Diálogo -->
|
||||
<div class="chat-suggestions">
|
||||
<button type="button" class="suggestion-chip" data-msg="Oi, Carinha! Como você está?">👋 Como você está?</button>
|
||||
<button type="button" class="suggestion-chip" data-msg="Me conte uma curiosidade sobre robôs!">🤖 Curiosidade robótica</button>
|
||||
<button type="button" class="suggestion-chip" data-msg="Faça uma cara bem engraçada e feliz!">😄 Faça uma cara feliz</button>
|
||||
<button type="button" class="suggestion-chip" data-msg="Você gosta de música? Qual é seu som favorito?">🎶 Gosta de música?</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulário de Envio de Mensagem com Microfone -->
|
||||
<form id="conversaForm" style="margin:0">
|
||||
<div class="chat-input-container">
|
||||
<button id="conversaMicBtn" class="btn-mic" type="button" title="Falar no microfone (Reconhecimento de Voz)">🎤</button>
|
||||
<input id="conversaTexto" maxlength="600" required placeholder="Digite uma mensagem ou clique no microfone para falar..." autocomplete="off">
|
||||
<button id="conversaEnviar" class="primary" type="submit" style="padding:10px 22px;border-radius:var(--raio-md)">
|
||||
<span>Enviar</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Gerenciador de Lembranças e Memória Persistente -->
|
||||
<details style="margin-top:10px">
|
||||
<summary>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
Lembranças & Memória de Longo Prazo
|
||||
</summary>
|
||||
<p style="margin:8px 0 12px">Fatos e preferências ensinados ao Carinha que enriquecem o prompt do Gemini sem alterar os pesos do modelo.</p>
|
||||
<form id="memoriaForm" style="display:flex;gap:10px;align-items:center;margin-bottom:14px">
|
||||
<input id="memoriaTexto" maxlength="300" required placeholder="Ex.: Meu nome é Jullio e prefiro explicações diretas" style="margin:0">
|
||||
<button type="submit" style="white-space:nowrap">Salvar Memória</button>
|
||||
</form>
|
||||
<div id="conversaMemorias" style="display:flex;flex-direction:column;gap:8px"></div>
|
||||
<div style="margin-top:16px;border-top:1px solid var(--borda);padding-top:12px;display:flex;justify-content:flex-end">
|
||||
<button id="conversaLimpar" type="button" class="danger" style="font-size:12px">🗑️ Apagar histórico e memórias</button>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/painel-conversa.js"></script>
|
||||
<script>
|
||||
// Gestos rápidos no painel lateral
|
||||
document.querySelectorAll('.btn-gesto-rapido').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const gesto = btn.dataset.gesto;
|
||||
try {
|
||||
const r = await fetch('/gesto/' + encodeURIComponent(gesto));
|
||||
if (r.ok) {
|
||||
const el = document.getElementById('conversaGestoEstado');
|
||||
if (el) { el.textContent = 'Gesto: ' + gesto + ' ✓'; setTimeout(() => { el.textContent = ''; }, 2500); }
|
||||
}
|
||||
} catch (e) { console.log('gesto rápido:', e); }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-1
@@ -145,7 +145,7 @@ class Conversa:
|
||||
messages=mensagens_modelo(history,self.memoria.listar())
|
||||
schema=dict(type='object',properties=dict(texto=dict(type='string'),gesto=dict(type='string',enum=list(GESTOS))),required=['texto','gesto'],additionalProperties=False)
|
||||
payload=dict(model='local',messages=messages,max_tokens=120,temperature=.2,repeat_penalty=1.1,chat_template_kwargs=dict(enable_thinking=False),response_format=dict(type='json_schema',json_schema=dict(name='conversa',strict=True,schema=schema)))
|
||||
req=Request(self.cerebro.endpoint+'/v1/chat/completions',data=json.dumps(payload).encode(),headers={'Content-Type':'application/json'})
|
||||
req=Request(self.cerebro.endpoint+'/v1/chat/completions',data=json.dumps(payload).encode(),headers=self.cerebro.cabecalhos())
|
||||
with urlopen(req,timeout=90) as response:data=json.load(response)
|
||||
result=validar_resposta(json.loads(data['choices'][0]['message']['content']))
|
||||
with self.lock:
|
||||
|
||||
-1353
File diff suppressed because it is too large
Load Diff
-153
@@ -1,153 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Visão Geral · Central Carinha IA</title>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>Central do Carinha</h1>
|
||||
<p style="margin:4px 0 0;font-size:15px">Supervisão em tempo real do Galaxy S10, telemetria de sensores, cérebro Gemini e robótica.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span class="badge ativo" id="overviewSystemBadge"><span class="badge-dot"></span> Sistema Ativo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-grid">
|
||||
<!-- Card do Rosto do Robô com Visualizador Interativo -->
|
||||
<section class="card overview-face-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
|
||||
<h2>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
|
||||
Expressão do Personagem
|
||||
</h2>
|
||||
<span class="badge" style="font-size:11.5px">Prévia Sincronizada</span>
|
||||
</div>
|
||||
|
||||
<iframe class="overview-face" id="overviewFace" title="Prévia do rosto do robô" src="/carinha.html?espelho=1&audio=0"></iframe>
|
||||
|
||||
<!-- Mood Switches Rápidos -->
|
||||
<div style="margin:8px 0 16px">
|
||||
<label style="font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muito-fraco);margin-bottom:8px;display:block">Expressão Rápida</label>
|
||||
<div class="toolbar" style="margin:0;gap:8px">
|
||||
<button type="button" class="btn-mood" data-gesto="feliz" style="padding:7px 12px;font-size:13px">😊 Feliz</button>
|
||||
<button type="button" class="btn-mood" data-gesto="surpreso" style="padding:7px 12px;font-size:13px">😲 Surpreso</button>
|
||||
<button type="button" class="btn-mood" data-gesto="coracao" style="padding:7px 12px;font-size:13px">💖 Amor</button>
|
||||
<button type="button" class="btn-mood" data-gesto="piscar" style="padding:7px 12px;font-size:13px">😉 Piscar</button>
|
||||
<button type="button" class="btn-mood" data-gesto="dormir" style="padding:7px 12px;font-size:13px">🌙 Dormir</button>
|
||||
<button type="button" class="btn-mood" data-gesto="acordar" style="padding:7px 12px;font-size:13px;border-color:var(--ciano)">☀️ Acordar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions" style="margin-top:auto;border-top:1px solid var(--borda);padding-top:16px">
|
||||
<a href="/painel" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--raio-sm);font-weight:700">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
Abrir Câmera & Rosto
|
||||
</a>
|
||||
<button id="overviewReload" type="button">🔄 Recarregar Tela Celular</button>
|
||||
<button id="overviewSfxHappy" type="button" title="Testar som procedural alegre">🎵 Tocar Bip</button>
|
||||
</div>
|
||||
<p id="overviewMessage" role="status" style="margin-top:10px;font-size:13px;min-height:20px;color:var(--ciano)"></p>
|
||||
</section>
|
||||
|
||||
<!-- Grade de Métricas & Telemetria -->
|
||||
<div style="display:flex;flex-direction:column;gap:18px">
|
||||
<div class="metrics">
|
||||
<section class="card metric">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<p>Galaxy S10</p>
|
||||
<span style="font-size:18px">📱</span>
|
||||
</div>
|
||||
<strong id="overviewPhone">—</strong>
|
||||
<small id="overviewIP">Aguardando conexão</small>
|
||||
</section>
|
||||
|
||||
<section class="card metric">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<p>Bateria</p>
|
||||
<span style="font-size:18px">🔋</span>
|
||||
</div>
|
||||
<strong id="overviewBattery">—</strong>
|
||||
<small id="overviewCharge">Aguardando dados</small>
|
||||
</section>
|
||||
|
||||
<section class="card metric">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<p>Inteligência IA</p>
|
||||
<span style="font-size:18px">🧠</span>
|
||||
</div>
|
||||
<strong id="overviewAI" style="font-size:22px">—</strong>
|
||||
<small id="overviewModel">Verificando API</small>
|
||||
</section>
|
||||
|
||||
<section class="card metric">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<p>Expressões</p>
|
||||
<span style="font-size:18px">🎨</span>
|
||||
</div>
|
||||
<strong id="overviewReactions">—</strong>
|
||||
<small>Reações na biblioteca</small>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Feed de Atividades Recentes -->
|
||||
<section class="card" style="flex:1">
|
||||
<h2>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
Telemetria & Eventos
|
||||
</h2>
|
||||
<div id="overviewFeed" style="display:flex;flex-direction:column;gap:10px;margin-top:12px;font-size:13px;max-height:165px;overflow-y:auto">
|
||||
<div style="display:flex;align-items:center;gap:10px;color:var(--fraco)">
|
||||
<span class="badge-dot" style="background:var(--ciano)"></span>
|
||||
<span>Central inicializada no Orange Pi Zero 3</span>
|
||||
<span style="margin-left:auto;font-size:11px;font-family:monospace">agora</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links Rápidos de Acesso com Visual Moderno -->
|
||||
<h2 style="margin:36px 0 16px">Navegação Rápida</h2>
|
||||
<div class="quick-links">
|
||||
<a class="card" href="/conversa">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<h2>💬 Conversar</h2>
|
||||
<span class="badge" style="font-size:11px">Voz & Texto</span>
|
||||
</div>
|
||||
<p>Interaja por voz e texto com o Carinha usando Gemini e memória de longo prazo.</p>
|
||||
</a>
|
||||
|
||||
<a class="card" href="/emojis">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<h2>✨ Emojis & Reações</h2>
|
||||
<span class="badge" style="font-size:11px">Estúdio SVG</span>
|
||||
</div>
|
||||
<p>Desenhe novas reações com inteligência artificial e teste diretamente nos olhos do robô.</p>
|
||||
</a>
|
||||
|
||||
<a class="card" href="/braco">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<h2>🦾 Braço Robótico</h2>
|
||||
<span class="badge" style="font-size:11px">Cinemática</span>
|
||||
</div>
|
||||
<p>Controle ângulos, crie coreografias articuladas e coordene 8 canais de movimento.</p>
|
||||
</a>
|
||||
|
||||
<a class="card" href="/treinamento">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<h2>📚 Treinamento</h2>
|
||||
<span class="badge" style="font-size:11px">Personalidade</span>
|
||||
</div>
|
||||
<p>Defina rotinas, hábitos, prompts e consulte o diário de interações do robô.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/overview.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
-459
@@ -1,459 +0,0 @@
|
||||
/**
|
||||
* dashboard.js — Shell global da Central de Controle do Carinha
|
||||
* Injeta barra lateral unificada, telemetria em tempo real no topo,
|
||||
* controle de áudio robótico e dock de comandos rápidos.
|
||||
*/
|
||||
(() => {
|
||||
if (window.location.search.includes('clean=1')) {
|
||||
document.documentElement.classList.add('is-clean-embed');
|
||||
return;
|
||||
}
|
||||
|
||||
// Carrega dinamicamente o sintetizador de áudio caso não esteja presente
|
||||
if (!window.RobotAudio) {
|
||||
const audioScript = document.createElement('script');
|
||||
audioScript.src = '/audio-robot.js';
|
||||
audioScript.defer = true;
|
||||
document.head.appendChild(audioScript);
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Principal',
|
||||
items: [
|
||||
['/dashboard', 'Visão geral', 'M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z'],
|
||||
['/painel', 'Câmera e rosto', 'M3 6h12v12H3z M15 10l6-4v12l-6-4']
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Inteligência & IA',
|
||||
items: [
|
||||
['/conversa', 'Conversar com IA', 'M3 4h18v13H9l-6 4z'],
|
||||
['/emojis', 'Emojis & Reações', 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18 M8 9h1 M15 9h1 M7 14q5 5 10 0'],
|
||||
['/treinamento', 'Treinamento', 'M3 8l9-5 9 5-9 5z M6 11v6q6 5 12 0v-6']
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Robótica & Hardware',
|
||||
items: [
|
||||
['/braco', 'Braço robótico', 'M3 21h18 M8 21v-5l7-5-3-6 M9 4h6v4H9z M14 10h4v4h-4z'],
|
||||
['/servos', 'Servos PCA9685', 'M5 3v18 M12 3v18 M19 3v18 M2 8h6 M9 16h6 M16 7h6']
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configurações',
|
||||
items: [
|
||||
['/api', 'API Gemini & Modelo', 'M8 5L2 12l6 7 M16 5l6 7-6 7 M14 3l-4 18']
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const pathname = location.pathname === '/' ? '/dashboard' : location.pathname;
|
||||
document.body.classList.add('dashboard');
|
||||
|
||||
const frame = document.createElement('div');
|
||||
frame.className = 'app-frame';
|
||||
|
||||
const main = document.createElement('main');
|
||||
main.className = 'app-content';
|
||||
main.id = 'appContent';
|
||||
|
||||
// Move elementos existentes do body para o container principal
|
||||
for (const child of [...document.body.childNodes]) {
|
||||
if (!(child.nodeType === 1 && ['SCRIPT', 'STYLE', 'LINK'].includes(child.tagName))) {
|
||||
main.append(child);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar moderna e estilizada
|
||||
const sidebar = document.createElement('aside');
|
||||
sidebar.className = 'app-sidebar';
|
||||
sidebar.innerHTML = `
|
||||
<a href="/dashboard" class="brand" title="Central Carinha">
|
||||
<span class="brand-face" aria-hidden="true"><i></i><i></i></span>
|
||||
<span>Carinha <span style="font-size:12px;color:var(--ciano);font-weight:600;letter-spacing:0.05em;vertical-align:middle;background:rgba(92,214,255,0.12);padding:2px 6px;border-radius:6px;border:1px solid rgba(92,214,255,0.25)">IA</span></span>
|
||||
</a>
|
||||
<nav aria-label="Navegação principal" id="sidebarNav"></nav>
|
||||
<div class="sidebar-footer">
|
||||
<div><strong>Orange Pi Zero 3</strong></div>
|
||||
<div style="font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muito-fraco)" id="shellServer">${location.host}</div>
|
||||
<div style="margin-top:6px;display:flex;align-items:center;gap:6px">
|
||||
<span class="badge-dot" style="background:#10b981;color:#10b981"></span>
|
||||
<span style="font-size:11px;color:var(--fraco)">Serviço operacional</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const nav = sidebar.querySelector('#sidebarNav');
|
||||
for (const sec of sections) {
|
||||
const title = document.createElement('div');
|
||||
title.className = 'nav-section-title';
|
||||
title.textContent = sec.title;
|
||||
nav.append(title);
|
||||
|
||||
for (const [url, label, path] of sec.items) {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${path}"/></svg><span>${label}</span>`;
|
||||
if (url === pathname) {
|
||||
a.setAttribute('aria-current', 'page');
|
||||
}
|
||||
a.addEventListener('click', () => {
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
});
|
||||
nav.append(a);
|
||||
}
|
||||
}
|
||||
|
||||
// Barra de ferramentas superior (Topbar)
|
||||
const top = document.createElement('header');
|
||||
top.className = 'app-topbar';
|
||||
top.innerHTML = `
|
||||
<div class="topbar-left">
|
||||
<button class="menu-button" type="button" aria-label="Abrir menu" aria-expanded="false">☰</button>
|
||||
<span class="server-label" style="font-size:14px;font-weight:600;color:var(--texto);display:flex;align-items:center;gap:8px">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ciano);box-shadow:0 0 8px var(--ciano)"></span>
|
||||
Central de Controle
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="topbar-telemetry">
|
||||
<button id="pipToggleBtn" type="button" title="Mini-monitor flutuante (Picture-in-Picture) que fica fixo em qualquer página" style="padding:6px 12px;font-size:12.5px;border-radius:20px;border-color:var(--borda)">
|
||||
📺 Monitor PiP
|
||||
</button>
|
||||
<button id="quickRemoteBtn" type="button" title="Atalhos rápidos de expressão" style="padding:6px 12px;font-size:12.5px;border-radius:20px;border-color:var(--borda)">
|
||||
⚡ Gestos
|
||||
</button>
|
||||
<button id="sfxToggleBtn" type="button" title="Ativar/Desativar efeitos sonoros robóticos" style="padding:6px 12px;font-size:12.5px;border-radius:20px">
|
||||
🔊 Som: Ativo
|
||||
</button>
|
||||
<span class="badge" id="shellConnection">
|
||||
<span class="badge-dot"></span>
|
||||
<span id="shellConnectionText">Verificando celular…</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Mini-Monitor Flutuante (Picture-in-Picture)
|
||||
const pipWidget = document.createElement('div');
|
||||
pipWidget.id = 'floatingPipWidget';
|
||||
pipWidget.className = 'floating-pip-widget';
|
||||
pipWidget.style.display = 'none';
|
||||
pipWidget.innerHTML = `
|
||||
<div class="floating-pip-header">
|
||||
<div class="pip-title">
|
||||
<span class="badge-dot" style="background:var(--ciano)"></span>
|
||||
<span>Carinha Monitor</span>
|
||||
</div>
|
||||
<div class="floating-pip-actions">
|
||||
<button id="pipMinimizeBtn" type="button" title="Minimizar ou Expandir">_</button>
|
||||
<button id="pipCloseBtn" type="button" title="Fechar">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating-pip-body" id="pipBody">
|
||||
<iframe src="/carinha.html?espelho=1&audio=0" title="Monitor Flutuante do Carinha"></iframe>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(pipWidget);
|
||||
|
||||
const pipToggleBtn = top.querySelector('#pipToggleBtn');
|
||||
const pipMinBtn = pipWidget.querySelector('#pipMinimizeBtn');
|
||||
const pipCloseBtn = pipWidget.querySelector('#pipCloseBtn');
|
||||
|
||||
function togglePip(force) {
|
||||
const isVisible = pipWidget.style.display === 'flex';
|
||||
const next = force !== undefined ? force : !isVisible;
|
||||
pipWidget.style.display = next ? 'flex' : 'none';
|
||||
pipToggleBtn.style.color = next ? 'var(--ciano)' : 'var(--texto)';
|
||||
pipToggleBtn.style.borderColor = next ? 'var(--ciano)' : 'var(--borda)';
|
||||
localStorage.setItem('carinha_pip', next ? 'true' : 'false');
|
||||
if (next && window.RobotAudio) window.RobotAudio.click();
|
||||
}
|
||||
|
||||
pipToggleBtn.onclick = () => togglePip();
|
||||
pipCloseBtn.onclick = () => togglePip(false);
|
||||
pipMinBtn.onclick = () => {
|
||||
const isMin = pipWidget.classList.toggle('minimized');
|
||||
pipMinBtn.textContent = isMin ? '□' : '_';
|
||||
};
|
||||
|
||||
// Se o usuário já deixou o PiP ativo anteriormente
|
||||
if (localStorage.getItem('carinha_pip') === 'true') {
|
||||
pipWidget.style.display = 'flex';
|
||||
pipToggleBtn.style.color = 'var(--ciano)';
|
||||
pipToggleBtn.style.borderColor = 'var(--ciano)';
|
||||
}
|
||||
|
||||
// Menu móvel
|
||||
const menuBtn = top.querySelector('.menu-button');
|
||||
menuBtn.onclick = () => {
|
||||
const open = document.body.classList.toggle('menu-open');
|
||||
menuBtn.setAttribute('aria-expanded', String(open));
|
||||
};
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') {
|
||||
document.body.classList.remove('menu-open');
|
||||
menuBtn.setAttribute('aria-expanded', 'false');
|
||||
fecharQuickRemote();
|
||||
}
|
||||
});
|
||||
main.addEventListener('click', () => {
|
||||
document.body.classList.remove('menu-open');
|
||||
menuBtn.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
// Modal / Dropdown de Gestos Rápidos
|
||||
const quickRemote = document.createElement('div');
|
||||
quickRemote.id = 'quickRemoteBar';
|
||||
quickRemote.style.cssText = `
|
||||
position: fixed; top: 72px; right: 28px; z-index: 90;
|
||||
background: rgba(14, 24, 38, 0.95); backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--borda-brilho); border-radius: 14px;
|
||||
padding: 16px; box-shadow: var(--sombra); display: none;
|
||||
flex-direction: column; gap: 10px; width: 290px;
|
||||
`;
|
||||
quickRemote.innerHTML = `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--borda);padding-bottom:8px">
|
||||
<strong style="font-size:14px;color:var(--texto)">⚡ Disparo Rápido</strong>
|
||||
<button id="closeQuickRemote" type="button" style="padding:3px 8px;font-size:12px;border:none;background:transparent;color:var(--fraco)">✕</button>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px">
|
||||
<button data-gesto="feliz" style="padding:8px;font-size:12px">😊 Feliz</button>
|
||||
<button data-gesto="surpreso" style="padding:8px;font-size:12px">😲 Surpreso</button>
|
||||
<button data-gesto="coracao" style="padding:8px;font-size:12px">❤️ Coração</button>
|
||||
<button data-gesto="bravo" style="padding:8px;font-size:12px">😠 Bravo</button>
|
||||
<button data-gesto="piscar" style="padding:8px;font-size:12px">😉 Piscar</button>
|
||||
<button data-gesto="piscadinha" style="padding:8px;font-size:12px">✨ Piscar 2</button>
|
||||
<button data-gesto="acordar" style="padding:8px;font-size:12px" class="primary">☀️ Acordar</button>
|
||||
<button data-gesto="dormir" style="padding:8px;font-size:12px">🌙 Dormir</button>
|
||||
</div>
|
||||
<button data-gesto="parar" class="danger" style="width:100%;font-size:12px;padding:8px;margin-top:4px">🛑 Parar Tudo (E-Stop)</button>
|
||||
`;
|
||||
document.body.appendChild(quickRemote);
|
||||
|
||||
function toggleQuickRemote() {
|
||||
const isVisible = quickRemote.style.display === 'flex';
|
||||
quickRemote.style.display = isVisible ? 'none' : 'flex';
|
||||
if (!isVisible && window.RobotAudio) window.RobotAudio.click();
|
||||
}
|
||||
function fecharQuickRemote() {
|
||||
quickRemote.style.display = 'none';
|
||||
}
|
||||
|
||||
top.querySelector('#quickRemoteBtn').onclick = toggleQuickRemote;
|
||||
quickRemote.querySelector('#closeQuickRemote').onclick = fecharQuickRemote;
|
||||
|
||||
quickRemote.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('button[data-gesto]');
|
||||
if (!btn) return;
|
||||
const gesto = btn.getAttribute('data-gesto');
|
||||
try {
|
||||
if (window.RobotAudio) window.RobotAudio.tocarGesto(gesto);
|
||||
await fetch('/gesto/' + encodeURIComponent(gesto));
|
||||
btn.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => btn.style.transform = '', 150);
|
||||
} catch (err) {
|
||||
console.error('Falha ao enviar gesto:', err);
|
||||
}
|
||||
});
|
||||
|
||||
// Botão de Áudio
|
||||
const sfxBtn = top.querySelector('#sfxToggleBtn');
|
||||
function atualizarBotaoSfx() {
|
||||
if (!window.RobotAudio) return;
|
||||
sfxBtn.textContent = window.RobotAudio.enabled ? '🔊 Som: Ativo' : '🔇 Som: Mudo';
|
||||
sfxBtn.style.color = window.RobotAudio.enabled ? 'var(--ciano)' : 'var(--fraco)';
|
||||
}
|
||||
sfxBtn.onclick = () => {
|
||||
if (window.RobotAudio) {
|
||||
window.RobotAudio.toggle();
|
||||
atualizarBotaoSfx();
|
||||
}
|
||||
};
|
||||
setTimeout(atualizarBotaoSfx, 400);
|
||||
|
||||
frame.append(top, main);
|
||||
document.body.prepend(sidebar, frame);
|
||||
|
||||
// Monitoramento periódico de status do celular e servidor
|
||||
async function checkStatus() {
|
||||
try {
|
||||
const r = await fetch('/app/status', { cache: 'no-store', signal: AbortSignal.timeout(3000) });
|
||||
if (!r.ok) throw Error();
|
||||
const s = await r.json();
|
||||
const badge = document.getElementById('shellConnection');
|
||||
const text = document.getElementById('shellConnectionText') || badge;
|
||||
|
||||
const bat = s.estado?.bateria?.nivel;
|
||||
const carregando = s.estado?.bateria?.carregando;
|
||||
let batInfo = '';
|
||||
if (bat != null) {
|
||||
batInfo = ` · ${bat}%${carregando ? ' ⚡' : ''}`;
|
||||
}
|
||||
|
||||
if (s.online) {
|
||||
text.textContent = `S10 Online${batInfo}`;
|
||||
badge.className = 'badge ativo';
|
||||
} else {
|
||||
text.textContent = 'S10 Desconectado';
|
||||
badge.className = 'badge offline';
|
||||
}
|
||||
} catch (e) {
|
||||
const badge = document.getElementById('shellConnection');
|
||||
if (badge) {
|
||||
badge.className = 'badge danger';
|
||||
const text = document.getElementById('shellConnectionText') || badge;
|
||||
text.textContent = 'Servidor Offline';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkStatus();
|
||||
setInterval(checkStatus, 4000);
|
||||
|
||||
// =========================================================================
|
||||
// BARRA DE MONITORAMENTO NO TOPO — câmera e rosto sempre visíveis
|
||||
// Com botão de expandir/recolher cada painel individualmente
|
||||
// =========================================================================
|
||||
const watchBar = document.createElement('div');
|
||||
watchBar.id = 'watchBar';
|
||||
watchBar.className = 'watch-bar';
|
||||
|
||||
// Lê estado salvo (expandido ou não) e tamanho
|
||||
const watchState = (() => {
|
||||
try { return JSON.parse(localStorage.getItem('carinha_watch') || '{}'); }
|
||||
catch { return {}; }
|
||||
})();
|
||||
|
||||
function saveWatchState() {
|
||||
localStorage.setItem('carinha_watch', JSON.stringify(watchState));
|
||||
}
|
||||
|
||||
// Altura dos painéis: compacto ou expandido
|
||||
const HEIGHTS = { compact: 90, medium: 200, full: 340 };
|
||||
|
||||
function makePanelHTML(id, icon, label, src) {
|
||||
const h = watchState[id + '_size'] || 'compact';
|
||||
const hidden = watchState[id + '_hidden'] === true;
|
||||
return `
|
||||
<div class="watch-panel ${hidden ? 'watch-panel-hidden' : ''}" id="wp_${id}" data-id="${id}" data-size="${h}">
|
||||
<div class="watch-panel-header">
|
||||
<span class="watch-panel-label">${icon} ${label}</span>
|
||||
<div class="watch-panel-actions">
|
||||
<button class="wp-btn wp-shrink" title="Recolher" data-id="${id}">−</button>
|
||||
<button class="wp-btn wp-expand" title="Expandir" data-id="${id}">+</button>
|
||||
<button class="wp-btn wp-hide" title="Ocultar painel" data-id="${id}">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="watch-panel-body" style="height:${HEIGHTS[h]}px">
|
||||
<iframe src="${src}" title="${label}" loading="lazy" sandbox="allow-scripts allow-same-origin"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
watchBar.innerHTML = `
|
||||
<div class="watch-bar-inner">
|
||||
<div class="watch-bar-grip" title="Arrastar">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
|
||||
<span style="font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--ciano)">MONITOR</span>
|
||||
</div>
|
||||
<div class="watch-panels" id="watchPanels">
|
||||
${makePanelHTML('camera', '📷', 'Câmera ao Vivo', '/painel?clean=1')}
|
||||
${makePanelHTML('rosto', '🤖', 'Rosto do Carinha', '/carinha.html?espelho=1&audio=0&clean=1')}
|
||||
</div>
|
||||
<div class="watch-bar-tools">
|
||||
<button id="watchAddCamera" class="wp-tool-btn" title="Mostrar/ocultar Câmera">📷</button>
|
||||
<button id="watchAddRosto" class="wp-tool-btn" title="Mostrar/ocultar Rosto">🤖</button>
|
||||
<button id="watchBarToggle" class="wp-tool-btn" title="Ocultar barra inteira" style="margin-top:auto">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(watchBar);
|
||||
|
||||
// Aplica estado inicial de visibilidade dos painéis
|
||||
['camera', 'rosto'].forEach(id => {
|
||||
const panel = watchBar.querySelector('#wp_' + id);
|
||||
if (!panel) return;
|
||||
if (watchState[id + '_hidden'] === true) panel.classList.add('watch-panel-hidden');
|
||||
});
|
||||
|
||||
// Oculta a barra inteira se o usuário fechou antes
|
||||
if (watchState['bar_hidden'] === true) {
|
||||
watchBar.classList.add('watch-bar-collapsed');
|
||||
}
|
||||
|
||||
// Toggle da barra inteira
|
||||
watchBar.querySelector('#watchBarToggle').addEventListener('click', () => {
|
||||
const collapsed = watchBar.classList.toggle('watch-bar-collapsed');
|
||||
watchState['bar_hidden'] = collapsed;
|
||||
saveWatchState();
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
});
|
||||
|
||||
// Toggle de visibilidade dos painéis individuais
|
||||
watchBar.querySelector('#watchAddCamera').addEventListener('click', () => {
|
||||
const panel = watchBar.querySelector('#wp_camera');
|
||||
const hidden = panel.classList.toggle('watch-panel-hidden');
|
||||
watchState['camera_hidden'] = hidden;
|
||||
saveWatchState();
|
||||
});
|
||||
watchBar.querySelector('#watchAddRosto').addEventListener('click', () => {
|
||||
const panel = watchBar.querySelector('#wp_rosto');
|
||||
const hidden = panel.classList.toggle('watch-panel-hidden');
|
||||
watchState['rosto_hidden'] = hidden;
|
||||
saveWatchState();
|
||||
});
|
||||
|
||||
// Expandir / Recolher tamanho dos painéis
|
||||
watchBar.addEventListener('click', e => {
|
||||
const btn = e.target.closest('.wp-expand, .wp-shrink, .wp-hide');
|
||||
if (!btn) return;
|
||||
const id = btn.dataset.id;
|
||||
const panel = watchBar.querySelector('#wp_' + id);
|
||||
const body = panel.querySelector('.watch-panel-body');
|
||||
const sizes = Object.keys(HEIGHTS);
|
||||
|
||||
if (btn.classList.contains('wp-expand')) {
|
||||
const cur = sizes.indexOf(panel.dataset.size);
|
||||
const next = sizes[Math.min(cur + 1, sizes.length - 1)];
|
||||
panel.dataset.size = next;
|
||||
body.style.height = HEIGHTS[next] + 'px';
|
||||
watchState[id + '_size'] = next;
|
||||
} else if (btn.classList.contains('wp-shrink')) {
|
||||
const cur = sizes.indexOf(panel.dataset.size);
|
||||
const next = sizes[Math.max(cur - 1, 0)];
|
||||
panel.dataset.size = next;
|
||||
body.style.height = HEIGHTS[next] + 'px';
|
||||
watchState[id + '_size'] = next;
|
||||
} else if (btn.classList.contains('wp-hide')) {
|
||||
const hidden = panel.classList.toggle('watch-panel-hidden');
|
||||
watchState[id + '_hidden'] = hidden;
|
||||
}
|
||||
saveWatchState();
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
});
|
||||
|
||||
// Ajusta padding do conteúdo principal para não sobrepor a watch-bar
|
||||
const appContent = document.getElementById('appContent');
|
||||
function syncWatchBarOffset() {
|
||||
const collapsed = watchBar.classList.contains('watch-bar-collapsed');
|
||||
const h = collapsed ? 0 : watchBar.offsetHeight;
|
||||
if (appContent) appContent.style.paddingTop = h > 0 ? (h + 12) + 'px' : '';
|
||||
document.body.classList.toggle('watch-bar-active', !collapsed);
|
||||
}
|
||||
const ro = new ResizeObserver(syncWatchBarOffset);
|
||||
ro.observe(watchBar);
|
||||
syncWatchBarOffset();
|
||||
|
||||
// Também atualiza o offset ao colapsar/expandir a barra
|
||||
const origToggle = watchBar.querySelector('#watchBarToggle');
|
||||
if (origToggle) {
|
||||
const prevHandler = origToggle.onclick;
|
||||
origToggle.addEventListener('click', () => {
|
||||
setTimeout(syncWatchBarOffset, 320); // após animação
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
> **Histórico.** Este dashboard foi substituído pelo painel 0.8 em Svelte: veja [PAINEL.md](PAINEL.md).
|
||||
|
||||
# Dashboard Carinha — 05/10/2026
|
||||
|
||||
Objetivo: unificar todas as páginas de operação em tema escuro/ciano com navegação lateral. A tela do celular continua em tela cheia.
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
|
||||
Implantação em 2026-10-05. IP atual: 192.168.1.35.
|
||||
|
||||
- Painel: http://192.168.1.35:8100/painel
|
||||
- Painel: http://192.168.1.35:8100/ (publicar com `deploy.ps1`)
|
||||
- Diretório: /opt/carinha-pc
|
||||
- Serviço: carinha-pc.service, habilitado para iniciar no boot.
|
||||
- Sistema: Armbian Debian 13, Python 3.13.5, arquitetura aarch64.
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
# Painel 0.8 — Svelte + SSE
|
||||
|
||||
Substitui as oito páginas antigas (dashboard, painel, conversa, emojis, treinamento, braço,
|
||||
servos, api). Os endereços antigos redirecionam para a seção equivalente (`/braco` → `/#/movimento`).
|
||||
|
||||
## Arquitetura
|
||||
|
||||
- `web/`: Vite + Svelte 5 + TypeScript. `npm run build` gera `web/dist/`, que o servidor entrega em `/`.
|
||||
`web/dist` não vai para o git; o `deploy.ps1` compila e copia.
|
||||
- **Estado único** (`web/src/lib/estado.svelte.ts`): uma foto inicial (`GET /estado`) e um `EventSource`
|
||||
em `/eventos`. Eventos: `expressao`, `telemetria`, `app_config`, `aparencia`, `motores`, `estop`,
|
||||
`conversa`, `ia`, `reacao`, `treinamento`, `recarregar`. Ao reconectar, o navegador manda
|
||||
`Last-Event-ID` e o servidor reenvia o que estiver no buffer; o painel ainda recarrega a foto.
|
||||
- **Comandos**: `POST /comando {tipo, valor}` com `tipo` = `gesto` | `rosto` | `cor` | `reacao` |
|
||||
`parar_reacao` | `recarregar`. Gestos e rostos são validados no servidor.
|
||||
- **Prévia do rosto**: um único iframe de `carinha.html?espelho=1&painel=1`, sem polling; o painel repassa
|
||||
os eventos por `postMessage`. A câmera (WebRTC) só existe na tela Ao vivo, então não há disputa pela sessão.
|
||||
- **Celular**: `carinha.html` também assina `/eventos` (com `?t=<token>`) e volta ao polling de `/fila`
|
||||
sozinho se o SSE cair. O batimento `POST /app/status` (1/s) continua.
|
||||
|
||||
Carga típica: antes 15–20 pedidos/s ao Orange Pi com o dashboard aberto; agora 1 conexão SSE por
|
||||
painel + o batimento do celular + a sinalização do vídeo enquanto ele conecta.
|
||||
|
||||
## Segurança dos controles
|
||||
|
||||
| Controle | Comportamento |
|
||||
|---|---|
|
||||
| Parar tudo | `POST /parar-tudo`: desliga as 16 saídas, cancela interpolação, para reações, rosto `calma`. Motores travados (409) até `POST /rearmar`. |
|
||||
| Homem-morto | O painel renova `POST /braco/mover {angulos, velocidade, ttl_ms: 450}` a cada 150 ms enquanto o botão/slider está pressionado. Sem renovação o watchdog desliga os canais. |
|
||||
| Velocidade | Interpolação a 50 Hz no servidor (`braco.py`), 5–360 °/s. Sem `velocidade` o comando é direto (compatível com scripts antigos). |
|
||||
| Dono do PCA9685 | Braço e diagnóstico não disputam o hardware: o segundo recebe 409 enquanto o primeiro tem canais ligados. |
|
||||
| Aba escondida / E-Stop | O painel solta o braço e desativa o movimento físico. |
|
||||
| Token | Opcional, recomendado: veja [SEGURANCA.md](SEGURANCA.md). |
|
||||
|
||||
## Atalhos
|
||||
|
||||
`Ctrl+K` paleta · `1`–`9` gestos favoritos · `Shift+Espaço` ou `Esc Esc` parar tudo ·
|
||||
`g v/c/r/m/a` navegar · `Espaço` segurado no botão do braço = segurar.
|
||||
|
||||
## Design
|
||||
|
||||
Tokens em `web/src/lib/tema.css`: tema escuro (padrão) e claro, contraste AA, fontes locais
|
||||
(Outfit e JetBrains Mono, sem Google Fonts). Vidro só em superfícies flutuantes (barra superior,
|
||||
paleta, mini-rosto); cards sólidos. Estado nunca só por cor: selos com texto. Navegação lateral a
|
||||
partir de 1024 px, barra inferior abaixo disso; sem rolagem horizontal a 400 px.
|
||||
|
||||
Componentes: `Card`, `Selo`, `Toggle`, `Slider`, `Abas`, `Modal` (`<dialog>` nativo), `Avisos`
|
||||
(toasts com Desfazer, no lugar de alert/confirm/prompt), `Paleta`, `EStop`, `Gestos`,
|
||||
`RostoPrevia`, `MiniRosto`, `Miniatura`, `BracoDesenho`.
|
||||
|
||||
## Testes
|
||||
|
||||
- `tests/test_servidor.py`: token, SSE, `/estado`, `/comando`, fila, E-Stop, trava, interpolação e prazo.
|
||||
- `web/tests/nucleo.test.ts` (`npm test`): escolha de alvo, encaixe, faixas e sequências do braço.
|
||||
- `tests/test_painel_web_browser.py`: token, gestos (botão, 1–9, paleta), E-Stop, ajustes, conversa,
|
||||
memória, reações com desfazer, braço com homem-morto, 400 px e tema.
|
||||
- `tests/test_rtc_browser.py`: vídeo WebRTC real no painel novo, canal de rastreamento e ajustes por SSE.
|
||||
+17
-4
@@ -25,10 +25,23 @@ ou `seguranca.json` na pasta do servidor (fora do git):
|
||||
|
||||
Sem token configurado o servidor fica aberto na rede local, como antes.
|
||||
|
||||
> **Ordem de ativação.** O painel antigo e o `carinha.html`/APK atuais ainda não enviam token.
|
||||
> Ative o token na placa só depois de publicar o painel novo e o rosto/APK com suporte a token
|
||||
> (fases 2–5 do plano de modernização). Até lá o servidor já aplica as demais proteções:
|
||||
> checagem de Origin em todos os POST, comandos validados e E-Stop.
|
||||
## Como ativar (ordem importa)
|
||||
|
||||
1. Publique servidor e painel 0.8 (`deploy.ps1`) e instale o APK `0.8-token` no S10.
|
||||
2. No S10: toque longo › **Token do servidor** › digite o token. O app passa a mandar o token
|
||||
na página do rosto (`?t=`), nos pedidos Java e no llama-server local (`--api-key`).
|
||||
3. Na placa: `echo 'CARINHA_TOKEN=...' | sudo tee /etc/carinha.env && sudo chmod 600 /etc/carinha.env`
|
||||
e `sudo systemctl restart carinha-pc`. O serviço lê o arquivo (`EnvironmentFile=`).
|
||||
4. Abra o painel: ele pede o token uma vez e guarda só naquele navegador.
|
||||
|
||||
O cérebro da placa usa o mesmo token para falar com o llama-server do S10
|
||||
(ou `CARINHA_IA_CHAVE`, se forem diferentes).
|
||||
|
||||
## App Android
|
||||
|
||||
- Com token salvo, trocar o servidor por Intent (`adb shell am start ... -e servidor URL`) exige
|
||||
`-e token <token>`; outro app não consegue redirecionar o rosto.
|
||||
- Câmera e microfone só são liberados para a página do servidor configurado ou para a cópia local.
|
||||
|
||||
## E-Stop
|
||||
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
[Unit]
|
||||
Description=Cerebro local Qwen3 Carinha
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
Environment=LD_LIBRARY_PATH=/opt/carinha-ai/llama-b11404
|
||||
ExecStart=/opt/carinha-ai/llama-b11404/llama-server -m /opt/carinha-ai/models/qwen3-0.6b-q4.gguf --host 127.0.0.1 --port 8101 -c 1024 -t 2 -np 1 --jinja --chat-template-kwargs '{"enable_thinking":false}'
|
||||
Restart=on-failure
|
||||
RestartSec=5
|
||||
Nice=10
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
|
||||
@@ -5,6 +5,8 @@ After=network.target
|
||||
[Service]
|
||||
Type=simple
|
||||
WorkingDirectory=/opt/carinha-pc
|
||||
# CARINHA_TOKEN e GEMINI_API_KEY (opcionais); o '-' ignora o arquivo se não existir
|
||||
EnvironmentFile=-/etc/carinha.env
|
||||
ExecStart=/usr/bin/python3 -u /opt/carinha-pc/kiosk-server.py --porta 8100
|
||||
Restart=on-failure
|
||||
RestartSec=3
|
||||
|
||||
-148
@@ -1,148 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Emojis & Reações · Carinha</title>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:14px">
|
||||
<div>
|
||||
<h1>Biblioteca de Emojis & Reações</h1>
|
||||
<p style="margin:4px 0 0">Gerencie expressões visuais, desenhos vetoriais e reações inteligentes para o Carinha.</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="primary" id="emojiNew">✨ Criar Nova Reação</button>
|
||||
<button id="emojiUndo" disabled>↩️ Desfazer</button>
|
||||
<button id="emojiExport">📦 Exportar JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WORKSPACE STICKY: O simulador fica fixado na tela enquanto a biblioteca rola ao lado -->
|
||||
<div class="emojis-workspace" style="margin-top:16px">
|
||||
|
||||
<!-- Coluna Fixa (Sticky Preview) -->
|
||||
<aside class="sticky-preview-col">
|
||||
<section class="card sticky-preview-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
|
||||
Simulador ao Vivo
|
||||
</h2>
|
||||
<span class="badge ativo" style="font-size:11px">📌 Sempre Visível</span>
|
||||
</div>
|
||||
|
||||
<iframe id="emojiPreview" title="Prévia de emoji no rosto" style="height:250px;border-radius:var(--raio-md);box-shadow:inset 0 0 30px rgba(0,0,0,0.8),0 0 15px var(--ciano-glow)" src="/carinha.html?espelho=1&audio=0"></iframe>
|
||||
|
||||
<div class="actions" style="margin-top:14px">
|
||||
<button id="emojiStop" class="danger" style="flex:1">🛑 Parar no Celular</button>
|
||||
<a href="/treinamento" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--raio-sm);font-size:13px">
|
||||
<span>🎨 Gemini SVG</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="code-label" style="margin-top:10px;font-size:11.5px;color:var(--muito-fraco);line-height:1.4">
|
||||
Dica: Ao clicar em "Prévia" em qualquer cartão, a animação acontece aqui mesmo sem você perder a posição de rolagem!
|
||||
</p>
|
||||
<p id="emojiState" role="status" aria-live="polite" style="font-size:13px;color:var(--ciano);min-height:22px;margin:8px 0 0"></p>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<!-- Coluna Rolável (Biblioteca de Emojis) -->
|
||||
<main class="emojis-library-col" style="min-width:0">
|
||||
<section class="card" style="margin-bottom:20px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
|
||||
<h2 style="margin:0">Catálogo de Reações do Robô</h2>
|
||||
<span class="badge ativo" id="emojiCount">—</span>
|
||||
</div>
|
||||
<p style="margin:6px 0 12px;font-size:13px">Reações salvas entram no repertório da conversa com o Gemini ou podem ser chamadas manualmente.</p>
|
||||
|
||||
<label for="emojiSearch">Filtrar por nome ou situação:</label>
|
||||
<input id="emojiSearch" placeholder="Ex.: café, feliz, ideias, surpresa, música...">
|
||||
</section>
|
||||
|
||||
<!-- Grade de Cartões de Emojis -->
|
||||
<div id="emojiLibrary" class="library-grid"></div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal / Dialog de Criação e Edição -->
|
||||
<div id="emojiDialog" class="dialog-overlay" hidden role="dialog" aria-modal="true" aria-labelledby="emojiEditorTitle">
|
||||
<form id="emojiEditForm" class="dialog-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--borda);padding-bottom:12px;margin-bottom:18px">
|
||||
<h2 id="emojiEditorTitle" style="margin:0">Criar Emoji</h2>
|
||||
<button type="button" id="emojiCancel" style="border:none;background:transparent;font-size:18px;cursor:pointer">✕</button>
|
||||
</div>
|
||||
|
||||
<label for="emojiName">Nome da Reação</label>
|
||||
<input id="emojiName" required maxlength="50" placeholder="Ex.: Café Matinal, Ideia Brilhante">
|
||||
|
||||
<label for="emojiReason">Quando Usar (Situação para o Gemini)</label>
|
||||
<textarea id="emojiReason" required maxlength="200" rows="3" placeholder="Ex.: Quando o usuário falar sobre café, cansaço ou manhã"></textarea>
|
||||
|
||||
<label for="emojiCharacter">Caractere ou Desenho</label>
|
||||
<select id="emojiCharacter">
|
||||
<option value="">Manter desenho original</option>
|
||||
</select>
|
||||
|
||||
<!-- Grade de Atalhos Rápidos de Emojis -->
|
||||
<div style="margin:6px 0 16px">
|
||||
<span style="font-size:12px;color:var(--fraco)">Atalhos rápidos:</span>
|
||||
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px" id="quickEmojiBar">
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="💡">💡</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="☕">☕</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="❤️">❤️</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="⭐">⭐</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🚀">🚀</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🤖">🤖</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🕶️">🕶️</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🔥">🔥</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🐱">🐱</button>
|
||||
<button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="😴">😴</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="emojiLocation">Posição na Tela do Carinha</label>
|
||||
<select id="emojiLocation">
|
||||
<option value="olhos">Dentro dos dois olhos</option>
|
||||
<option value="ao_redor">Ao lado do rosto</option>
|
||||
</select>
|
||||
|
||||
<p class="code-label" style="font-size:12px;margin:12px 0 18px">
|
||||
Escolher um emoji substitui o desenho SVG. Você poderá desfazer a qualquer momento.
|
||||
</p>
|
||||
|
||||
<div class="actions" style="justify-content:flex-end">
|
||||
<button type="button" onclick="document.getElementById('emojiCancel').click()">Cancelar</button>
|
||||
<button class="primary" type="submit">Salvar Reação</button>
|
||||
</div>
|
||||
<p id="emojiEditState" role="status" style="margin-top:10px;font-size:13px;color:var(--vermelho)"></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="/biblioteca.js" defer></script>
|
||||
<script>
|
||||
// Atalho para preencher emoji clicando na barra de atalhos rápidos
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('#quickEmojiBar button').forEach(btn => {
|
||||
btn.onclick = () => {
|
||||
const val = btn.getAttribute('data-val');
|
||||
const sel = document.getElementById('emojiCharacter');
|
||||
if (sel && val) {
|
||||
let found = false;
|
||||
for (let opt of sel.options) {
|
||||
if (opt.value === val) { opt.selected = true; found = true; break; }
|
||||
}
|
||||
if (!found) {
|
||||
sel.add(new Option(val, val, true, true));
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+4
-4
@@ -1,11 +1,11 @@
|
||||
param([int]$Porta = 8100, [switch]$SemAbrir)
|
||||
param([string]$Placa = '192.168.1.35', [int]$Porta = 8100, [switch]$SemAbrir)
|
||||
$ErrorActionPreference = 'Stop'
|
||||
$url = "http://192.168.1.35:$Porta"
|
||||
$url = "http://${Placa}:$Porta"
|
||||
try {
|
||||
$health = Invoke-RestMethod "$url/app/health" -TimeoutSec 5
|
||||
if ($health.projeto -ne 'carinha-pc') { throw 'Servidor inesperado' }
|
||||
} catch {
|
||||
throw "Orange Pi indisponível em $url. Confira alimentação, rede e o serviço carinha-pc. Nenhum servidor será iniciado no PC."
|
||||
}
|
||||
Write-Host "Painel no Orange Pi: $url/painel"
|
||||
if (-not $SemAbrir) { Start-Process "$url/painel" }
|
||||
Write-Host "Painel Carinha $($health.versao): $url/"
|
||||
if (-not $SemAbrir) { Start-Process "$url/" }
|
||||
|
||||
+31
-24
@@ -58,9 +58,15 @@ ORDENS_INTERNAS = {"calma"}
|
||||
APARENCIA = {"rosto": "carinha", "cor": [92, 214, 255]}
|
||||
ARQUIVO_APARENCIA = "aparencia.json"
|
||||
|
||||
# Arquivos servidos como estão: o rosto do celular e o rastreamento do painel.
|
||||
ESTATICOS = {"/carinha.html", "/camera.html", "/reacoes-render.js", "/rastreador-worker.js",
|
||||
"/vendor/mediapipe/vision_bundle.mjs", "/vendor/mediapipe/face.tflite", "/vendor/mediapipe/hands.task",
|
||||
"/vendor/mediapipe/wasm/vision_wasm_internal.js", "/vendor/mediapipe/wasm/vision_wasm_internal.wasm",
|
||||
"/vendor/mediapipe/wasm/vision_wasm_nosimd_internal.js", "/vendor/mediapipe/wasm/vision_wasm_nosimd_internal.wasm"}
|
||||
|
||||
# Rotas que não exigem token: só o necessário para a página do rosto abrir e o app se achar.
|
||||
PUBLICAS_GET = {"/app/health", "/faces", "/gestos", "/config", "/ia/modelo", "/app.apk"}
|
||||
PREFIXOS_API = ("/eventos", "/estado", "/fila", "/rtc/", "/camera/", "/conversa/", "/treinamento/",
|
||||
PREFIXOS_API = ("/eventos", "/estado", "/fila", "/rtc/", "/conversa/", "/treinamento/",
|
||||
"/app/", "/braco/", "/servos/", "/ia/", "/api/", "/gesto/", "/face/", "/diag/")
|
||||
|
||||
|
||||
@@ -290,33 +296,31 @@ class Handler(SimpleHTTPRequestHandler):
|
||||
enfileirar(ordem)
|
||||
return self.json({"ok": True, partes[0]: ordem})
|
||||
|
||||
if caminho in ("/dashboard", "/emojis", "/api"):
|
||||
self.path = caminho + ".html"
|
||||
elif caminho == "/painel":
|
||||
self.path = "/painel.html" # painel de controle
|
||||
elif caminho == '/servos':
|
||||
self.path = '/servos.html'
|
||||
elif caminho == '/conversa':
|
||||
self.path = '/conversa.html'
|
||||
elif caminho == '/treinamento':
|
||||
self.path = '/treinamento.html'
|
||||
elif caminho == '/braco':
|
||||
self.path = '/braco.html'
|
||||
elif caminho in ("/", ""):
|
||||
self.path = "/dashboard.html"
|
||||
# Painel (Vite/Svelte compilado em web/dist) em "/"; o resto é lista branca.
|
||||
painel = Path("web/dist")
|
||||
if caminho in ("/", "", "/index.html"):
|
||||
if not (painel / "index.html").is_file():
|
||||
return self.json({"erro": "Painel não compilado: rode 'npm run build' em web/ (ou use deploy.ps1)"}, 503)
|
||||
self.path = "/web/dist/index.html"
|
||||
elif caminho.startswith("/assets/"):
|
||||
nome = caminho[len("/assets/"):]
|
||||
if "/" in nome or "\\" in nome or nome.startswith(".") or not (painel / "assets" / nome).is_file():
|
||||
return self.json({"erro": "Arquivo não disponível"}, 404)
|
||||
self.path = "/web/dist/assets/" + nome
|
||||
elif caminho in ("/dashboard", "/painel", "/conversa", "/emojis", "/treinamento", "/braco", "/servos", "/api"):
|
||||
# Endereços das telas antigas levam à seção equivalente do painel novo.
|
||||
secao = {"/conversa": "conversa", "/emojis": "reacoes", "/treinamento": "reacoes", "/braco": "movimento",
|
||||
"/servos": "movimento", "/api": "ajustes"}.get(caminho, "ao-vivo")
|
||||
self.send_response(302)
|
||||
self.send_header("Location", "/#/" + secao)
|
||||
self.send_header("Content-Length", "0")
|
||||
self.end_headers()
|
||||
return
|
||||
elif caminho == '/qualidade-auto.js':
|
||||
self.path = '/android/app/assets/qualidade-auto.js'
|
||||
elif caminho == '/app.apk':
|
||||
self.path = '/android/carinha-rosto.apk'
|
||||
elif caminho in (
|
||||
'/vendor/mediapipe/vision_bundle.mjs', '/vendor/mediapipe/face.tflite', '/vendor/mediapipe/hands.task',
|
||||
'/vendor/mediapipe/wasm/vision_wasm_internal.js', '/vendor/mediapipe/wasm/vision_wasm_internal.wasm',
|
||||
'/vendor/mediapipe/wasm/vision_wasm_nosimd_internal.js', '/vendor/mediapipe/wasm/vision_wasm_nosimd_internal.wasm'):
|
||||
pass
|
||||
elif caminho in ('/dashboard.html','/emojis.html','/api.html','/dashboard.css','/dashboard.js','/overview.js','/biblioteca.js','/api-painel.js','/painel.css','/conversa.css','/treinamento.css','/servos.css','/braco.css','/audio-robot.js'):
|
||||
pass
|
||||
elif caminho not in ('/conversa.html', '/treinamento.html', '/treinamento.js', '/reacoes-render.js', '/painel-conversa.js', '/braco-calibracao.js', '/movimentos-core.js', '/braco-movimentos.js', '/braco.html', '/braco.js', '/servos.html', '/servos.js', '/carinha.html', '/camera.html', '/painel.html', '/painel-controle.js', '/painel-video.js',
|
||||
'/rastreamento-core.js', '/rastreador-worker.js', '/painel-rastreamento.js'):
|
||||
elif caminho not in ESTATICOS:
|
||||
return self.enviar(json.dumps({'erro': 'Arquivo não disponível'}), codigo=404)
|
||||
return super().do_GET()
|
||||
|
||||
@@ -412,6 +416,7 @@ class Handler(SimpleHTTPRequestHandler):
|
||||
if not online:
|
||||
return self.json({"erro": "Abra o Carinha e conecte ao servidor primeiro"}, 409)
|
||||
FILA.adicionar("recarregar")
|
||||
EVENTOS.publicar("recarregar", {"id": controle.recarga["id"]})
|
||||
return self.json({"ok": True, "mensagem": "Solicitação enviada. Aguardando o celular recarregar a tela."})
|
||||
|
||||
def log_message(self, formato, *args):
|
||||
@@ -453,6 +458,8 @@ def main():
|
||||
servidor.servos = ControleServos(Path.cwd() / 'servos.json')
|
||||
servidor.braco = Braco(Path.cwd() / 'braco.json', servidor.servos)
|
||||
servidor.cerebro = Cerebro(Path.cwd() / 'ia-config.json', servidor.controle, enfileirar)
|
||||
if servidor.token and not servidor.cerebro.chave:
|
||||
servidor.cerebro.chave = servidor.token
|
||||
servidor.conversa = Conversa(Path.cwd() / 'memoria.db', servidor.cerebro)
|
||||
servidor.treinamento = Treinamento(Path.cwd() / 'treinamento.db')
|
||||
servidor.conversa.memoria.on_registrar = servidor.treinamento.registrar
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
(function(root){
|
||||
function sequencias(ranges){
|
||||
const neutral=[0,0,0,0,0,0,0];
|
||||
const sets=[
|
||||
['Acenar',[[0,-.7,.5,.2,0,.1,0],[0,.7,-.5,.2,0,.1,0],[0,-.7,.5,.2,0,.1,0],[0,.7,-.5,.2,0,.1,0],neutral]],
|
||||
['Olhar para os lados',[[0,.2,-.4,0,0,0,-.7],[0,-.2,.4,0,0,0,.7],neutral]],
|
||||
['Alcançar e recolher',[[0,0,.2,.6,-.5,.4,0],[0,0,-.2,-.4,.5,-.4,0],neutral]],
|
||||
['Garra e punho',[[-.7,.3,0,.2,0,.1,0],[.7,-.3,0,.2,0,.1,0],[-.7,.3,0,0,0,0,0],neutral]],
|
||||
['Apresentação',[[.3,.3,-.3,.4,-.3,.3,-.6],[-.3,-.3,.3,-.3,.4,-.3,.6],[.5,.4,.2,.3,-.3,.2,0],neutral]]];
|
||||
return sets.map(([nome,steps])=>({nome,passos:steps.map(s=>s.map((v,i)=>{const [lo,hi]=ranges[i];return Math.round(90+v*(v<0?90-lo:hi-90));}))}));
|
||||
}
|
||||
const api={sequencias};if(typeof module==='object')module.exports=api;else root.Movimentos=api;
|
||||
})(globalThis);
|
||||
-159
@@ -1,159 +0,0 @@
|
||||
/**
|
||||
* overview.js — Lógica de supervisão da Visão Geral
|
||||
* Monitora métricas do robô, bateria, IA Gemini, reações e gerencia ações rápidas.
|
||||
*/
|
||||
(() => {
|
||||
const el = id => document.getElementById(id);
|
||||
let reload = null;
|
||||
let start = 0;
|
||||
let ultimoEstadoOnline = null;
|
||||
|
||||
function adicionarEvento(texto, tipo = 'info') {
|
||||
const feed = el('overviewFeed');
|
||||
if (!feed) return;
|
||||
const item = document.createElement('div');
|
||||
item.style.cssText = 'display:flex;align-items:center;gap:10px;animation:fadeInMsg .2s ease-out';
|
||||
const cor = tipo === 'online' ? '#10b981' : tipo === 'alerta' ? '#f59e0b' : 'var(--ciano)';
|
||||
const hora = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
item.innerHTML = `
|
||||
<span class="badge-dot" style="background:${cor};box-shadow:0 0 8px ${cor}"></span>
|
||||
<span style="color:var(--texto)">${texto}</span>
|
||||
<span style="margin-left:auto;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--fraco)">${hora}</span>
|
||||
`;
|
||||
feed.prepend(item);
|
||||
while (feed.children.length > 7) {
|
||||
feed.removeChild(feed.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const [s, c, t] = await Promise.all(['/app/status', '/conversa/status', '/treinamento/status'].map(async p => {
|
||||
const r = await fetch(p, { cache: 'no-store', signal: AbortSignal.timeout(3000) });
|
||||
if (!r.ok) throw Error('Servidor indisponível');
|
||||
return r.json();
|
||||
}));
|
||||
|
||||
// Estado do Celular
|
||||
if (el('overviewPhone')) {
|
||||
el('overviewPhone').textContent = s.online ? 'Conectado' : 'Desconectado';
|
||||
el('overviewPhone').style.color = s.online ? '#34d399' : 'var(--fraco)';
|
||||
}
|
||||
if (el('overviewIP')) {
|
||||
el('overviewIP').textContent = s.celular_ip || (s.online ? 'IP Detectado' : 'Abra o Carinha no celular');
|
||||
}
|
||||
|
||||
// Registra evento de conexão/desconexão
|
||||
if (ultimoEstadoOnline !== null && ultimoEstadoOnline !== s.online) {
|
||||
if (s.online) {
|
||||
adicionarEvento('Galaxy S10 conectado e sincronizado', 'online');
|
||||
if (window.RobotAudio) window.RobotAudio.happy();
|
||||
} else {
|
||||
adicionarEvento('Galaxy S10 desconectou da Central', 'alerta');
|
||||
}
|
||||
}
|
||||
ultimoEstadoOnline = s.online;
|
||||
|
||||
// Bateria
|
||||
if (el('overviewBattery')) {
|
||||
const nivel = s.online && s.estado?.bateria?.nivel != null ? s.estado.bateria.nivel + '%' : '—';
|
||||
el('overviewBattery').textContent = nivel;
|
||||
if (s.estado?.bateria?.nivel != null) {
|
||||
if (s.estado.bateria.nivel <= 20) {
|
||||
el('overviewBattery').style.color = '#fb7185';
|
||||
} else {
|
||||
el('overviewBattery').style.color = '#f0f6fc';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (el('overviewCharge')) {
|
||||
const carregando = s.estado?.bateria?.carregando;
|
||||
el('overviewCharge').textContent = carregando ? '⚡ Carregando na tomada' : 'Operando na bateria';
|
||||
el('overviewCharge').style.color = carregando ? 'var(--ciano)' : 'var(--fraco)';
|
||||
}
|
||||
|
||||
// Inteligência IA
|
||||
if (el('overviewAI')) {
|
||||
el('overviewAI').textContent = c.provedor === 'gemini' ? 'Google Gemini' : 'Qwen Local';
|
||||
}
|
||||
if (el('overviewModel')) {
|
||||
el('overviewModel').textContent = c.modelo || 'IA Pronta';
|
||||
}
|
||||
|
||||
// Biblioteca de reações
|
||||
if (el('overviewReactions')) {
|
||||
el('overviewReactions').textContent = Array.isArray(t.reacoes) ? t.reacoes.length : '0';
|
||||
}
|
||||
|
||||
// Botão de recarga
|
||||
if (el('overviewReload')) {
|
||||
el('overviewReload').disabled = !s.online;
|
||||
}
|
||||
|
||||
// Confirmação de recarga remota
|
||||
if (reload && s.recarga?.id === reload && s.recarga.confirmada) {
|
||||
el('overviewMessage').textContent = '✅ Tela atualizada: Galaxy S10 confirmou o recarregamento.';
|
||||
adicionarEvento('Tela do Galaxy S10 recarregada com sucesso', 'online');
|
||||
reload = null;
|
||||
} else if (reload && Date.now() - start > 12000) {
|
||||
el('overviewMessage').textContent = '⚠️ Sem confirmação. Reabra o app Carinha no celular.';
|
||||
reload = null;
|
||||
}
|
||||
} catch (e) {
|
||||
if (el('overviewMessage')) el('overviewMessage').textContent = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// Ação de recarregar a tela do celular
|
||||
if (el('overviewReload')) {
|
||||
el('overviewReload').onclick = async () => {
|
||||
try {
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
const r = await fetch('/app/recarregar', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: '{}'
|
||||
});
|
||||
const d = await r.json();
|
||||
if (!r.ok) throw Error(d.erro);
|
||||
el('overviewMessage').textContent = d.mensagem;
|
||||
adicionarEvento('Solicitação de recarga enviada ao celular...');
|
||||
const s = await (await fetch('/app/status')).json();
|
||||
reload = s.recarga?.id;
|
||||
start = Date.now();
|
||||
} catch (e) {
|
||||
el('overviewMessage').textContent = 'Erro: ' + e.message;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Botões de Expressão Rápida (Mood Buttons)
|
||||
document.querySelectorAll('.btn-mood').forEach(btn => {
|
||||
btn.onclick = async () => {
|
||||
const gesto = btn.getAttribute('data-gesto');
|
||||
if (!gesto) return;
|
||||
try {
|
||||
if (window.RobotAudio) window.RobotAudio.tocarGesto(gesto);
|
||||
await fetch('/gesto/' + encodeURIComponent(gesto));
|
||||
adicionarEvento(`Expressão disparada: ${gesto}`);
|
||||
btn.style.transform = 'scale(0.94)';
|
||||
setTimeout(() => btn.style.transform = '', 160);
|
||||
} catch (err) {
|
||||
console.error('Falha ao acionar gesto:', err);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Botão de Teste Sonoro
|
||||
if (el('overviewSfxHappy')) {
|
||||
el('overviewSfxHappy').onclick = () => {
|
||||
if (window.RobotAudio) {
|
||||
window.RobotAudio.happy();
|
||||
adicionarEvento('Sintetizador gerou trinado alegre');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
refresh();
|
||||
setInterval(refresh, 3500);
|
||||
})();
|
||||
@@ -1,215 +0,0 @@
|
||||
"use strict";
|
||||
const $ = (id) => document.getElementById(id);
|
||||
let recargaPendente = null;
|
||||
let recargaInicio = 0;
|
||||
let appConfig = null;
|
||||
let imagemURL = null;
|
||||
let recebendoImagem = false;
|
||||
let salvandoConfig = false;
|
||||
let sequencia = -1;
|
||||
let ultimoStatus = null;
|
||||
let consultandoStatus = false;
|
||||
|
||||
async function api(rota, dados) {
|
||||
const r = await fetch(rota, {cache: 'no-store', signal: AbortSignal.timeout(rota === '/app/connect' ? 65000 : 3500),
|
||||
...(dados === undefined ? {} : {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(dados)})});
|
||||
const body = await r.json();
|
||||
if (!r.ok) throw new Error(body.erro || 'Servidor respondeu HTTP ' + r.status);
|
||||
return body;
|
||||
}
|
||||
|
||||
function ajustarCamera() {
|
||||
const ligada = appConfig && appConfig.preview;
|
||||
$('toggleCamera').textContent = ligada ? 'Desligar câmera' : 'Ligar câmera';
|
||||
if (!ligada) esconderImagem('Transmissão desligada. O rosto e os sensores continuam funcionando.');
|
||||
if (window.CarinhaVideo && !ligada) window.CarinhaVideo.parar();
|
||||
}
|
||||
|
||||
function esconderImagem(texto) {
|
||||
$('cameraImagem').hidden = true;
|
||||
$('cameraImagem').removeAttribute('src');
|
||||
$('cameraMensagem').hidden = false;
|
||||
$('cameraMensagem').textContent = texto;
|
||||
if (imagemURL) URL.revokeObjectURL(imagemURL);
|
||||
imagemURL = null;
|
||||
sequencia = -1;
|
||||
}
|
||||
|
||||
async function salvarApp(parte) {
|
||||
if (salvandoConfig) return;
|
||||
salvandoConfig = true;
|
||||
CAMPOS.forEach(([chave]) => { $('ajuste-' + chave).disabled = true; });
|
||||
$('configEstado').textContent = 'Salvando…';
|
||||
$('toggleCamera').disabled = true;
|
||||
try {
|
||||
appConfig = (await api('/app/config', parte)).config;
|
||||
atualizarCampos();
|
||||
ajustarCamera();
|
||||
$('configEstado').textContent = 'Salvo no servidor. Aguardando o celular aplicar.';
|
||||
} catch (e) {
|
||||
$('configEstado').textContent = 'Não foi possível salvar: ' + e.message;
|
||||
atualizarCampos();
|
||||
} finally {
|
||||
salvandoConfig = false; $('toggleCamera').disabled = false;
|
||||
CAMPOS.forEach(([chave]) => { $('ajuste-' + chave).disabled = false; });
|
||||
}
|
||||
}
|
||||
|
||||
const CAMPOS = [
|
||||
['rastrearRosto', 'Rastrear rosto'], ['rastrearMaos', 'Rastrear mãos'],
|
||||
['seguirRastreamento', 'Olhos acompanharem o alvo'], ['mostrarRastreamento', 'Mostrar rastreamento no vídeo'],
|
||||
['sensorMic', 'Microfone ligado'], ['sensorCamera', 'Câmera ligada'],
|
||||
['micSono', 'Permitir microfone durante o sono'], ['cameraSono', 'Permitir câmera durante o sono'],
|
||||
['cameraLado', 'Câmera', [['user','Frontal'],['environment','Traseira']]],
|
||||
['videoResolucao', 'Resolução do vídeo', [['auto','Automática (padrão)'],['max','Máxima disponível'],['480','480p'],['720','720p'],['1080','1080p'],['2160','4K'],['4320','8K']]],
|
||||
['videoFPS', 'FPS do vídeo', [[0,'Automático (padrão)'],[-1,'Máximo disponível'],[15,'15'],[24,'24'],[30,'30'],[60,'60'],[120,'120'],[240,'240']]],
|
||||
['boca', 'Mostrar boca'], ['sobrancelhas', 'Mostrar sobrancelhas'],
|
||||
['auto', 'Gestos espontâneos'], ['audio', 'Sons da Carinha'],
|
||||
['ouvir', 'Reagir aos sons'], ['reagir', 'Reagir ao movimento'],
|
||||
['volume', 'Volume dos sons', 0, 1, 0.05],
|
||||
['sompausa', 'Silêncio para dormir (s)', 1, 120, 1],
|
||||
['economia', 'Reduzir brilho em repouso'],
|
||||
['brilho', 'Brilho normal', 0.01, 1, 0.01],
|
||||
['brilhoRepouso', 'Brilho em repouso', 0.01, 1, 0.01],
|
||||
['repousoTela', 'Espera para reduzir brilho (s)', 5, 300, 5],
|
||||
['somlim', 'Nível para perceber som', 0, 1, 0.01],
|
||||
['somganho', 'Aumento de som para susto', 0, 1, 0.01],
|
||||
['somaltolim', 'Som mínimo para susto', 0, 1, 0.01],
|
||||
['somcooldown', 'Intervalo entre sustos por som (s)', 0, 120, 1],
|
||||
['movlim', 'Movimento mínimo', 0, 1, 0.01],
|
||||
['movforte', 'Movimento para susto', 0, 1, 0.01],
|
||||
['movcooldown', 'Intervalo entre sustos por movimento (s)', 0, 120, 1],
|
||||
['movolhar', 'Quanto os olhos acompanham', 0, 100, 1],
|
||||
];
|
||||
|
||||
function montarCampos() {
|
||||
CAMPOS.forEach(([chave, texto, min, max, passo], i) => {
|
||||
const area = document.createElement('div');
|
||||
const label = document.createElement('label');
|
||||
const select = Array.isArray(min);
|
||||
const input = document.createElement(select ? 'select' : 'input');
|
||||
input.id = 'ajuste-' + chave; label.htmlFor = input.id;
|
||||
if (!select) input.type = min === undefined ? 'checkbox' : 'range';
|
||||
label.textContent = texto;
|
||||
if (select) {
|
||||
min.forEach(([v,t]) => input.add(new Option(t, String(v))));
|
||||
area.className = 'ajuste'; area.append(label, input);
|
||||
} else if (input.type === 'range') {
|
||||
input.min = min; input.max = max; input.step = passo;
|
||||
area.className = 'ajuste-range';
|
||||
const output = document.createElement('output'); output.id = 'valor-' + chave;
|
||||
label.appendChild(output); area.append(label, input);
|
||||
input.oninput = () => { output.textContent = input.value; };
|
||||
} else { area.className = 'ajuste'; area.append(label, input); }
|
||||
input.onchange = () => salvarApp({[chave]: input.type === 'checkbox' ? input.checked : select && chave !== 'videoFPS' ? input.value : Number(input.value)});
|
||||
$(i < 4 ? 'ajustesRastreamento' : i < 23 ? 'ajustesBasicos' : 'ajustesAvancados').appendChild(area);
|
||||
});
|
||||
}
|
||||
|
||||
function atualizarCampos() {
|
||||
if (!appConfig) return;
|
||||
CAMPOS.forEach(([chave]) => {
|
||||
const input = $('ajuste-' + chave);
|
||||
if (input.type === 'checkbox') input.checked = appConfig[chave];
|
||||
else if (document.activeElement !== input) {
|
||||
input.value = appConfig[chave]; if ($('valor-' + chave)) $('valor-' + chave).textContent = appConfig[chave];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function statusApp() {
|
||||
if (consultandoStatus) return;
|
||||
consultandoStatus = true;
|
||||
try {
|
||||
const s = await api('/app/status'); ultimoStatus = s;
|
||||
if (!salvandoConfig) { appConfig = await api('/app/config'); atualizarCampos(); ajustarCamera(); }
|
||||
$('conexaoEstado').textContent = s.online ? 'Conectado' : 'Sem conexão';
|
||||
$('conexaoEstado').classList.toggle('ativo', s.online);
|
||||
if(s.online && s.celular_ip && document.activeElement !== $('celularIP')) $('celularIP').value=s.celular_ip;
|
||||
if(s.servidor_ip && document.activeElement !== $('pcIP')) $('pcIP').value=s.servidor_ip;
|
||||
if(recargaPendente && s.recarga?.id===recargaPendente && s.recarga.confirmada){$('conectarEstado').textContent='Tela atualizada: confirmação recebida do celular.';recargaPendente=null;}
|
||||
else if(recargaPendente && Date.now()-recargaInicio>12000){$('conectarEstado').textContent='O celular não confirmou a recarga. Feche e reabra o Carinha uma vez para carregar o suporte atualizado.';recargaPendente=null;}
|
||||
const e = s.estado || {};
|
||||
const bateria = e.bateria;
|
||||
const nivel = bateria?.nivel;
|
||||
$('bateriaCelular').textContent = s.online && typeof nivel === 'number' && nivel >= 0 && nivel <= 100 ? `Bateria do celular: ${Math.round(nivel)}%${bateria.carregando ? ' · carregando' : ''}` : 'Bateria do celular: aguardando dados do app.';
|
||||
$('rostoConfirmado').textContent = s.online ? 'No celular: ' + (e.rosto || '?') + (e.dormindo ? ', dormindo.' : ', acordado.') : 'Aguardando confirmação do celular.';
|
||||
['mic', 'mov'].forEach((nome) => {
|
||||
const chave = nome === 'mic' ? 'microfone' : 'movimento';
|
||||
const ativo = s.online && e[nome === 'mic' ? 'microfone_ativo' : 'camera_ativa'];
|
||||
const v = ativo ? Number(e[chave] || 0) : 0;
|
||||
$(nome + 'Nivel').value = v;
|
||||
$(nome + 'Valor').textContent = ativo ? Math.round(v * 100) + '%' : '—';
|
||||
});
|
||||
$('sensorEstado').textContent = s.online ? (e.camera_ativa ? ('Câmera ' + (appConfig?.cameraLado === 'environment' ? 'traseira' : 'frontal')) : 'Câmera desativada') + (e.centro ? ' · centro do movimento: ' + e.centro.map(v => Math.round(v * 100) + '%').join(', ') : '') + (typeof e.brilho === 'number' ? ' · brilho: ' + Math.round(e.brilho * 100) + '%' : '') : 'Abra o app no celular ou use Conectar e abrir o app.';
|
||||
if (appConfig && !salvandoConfig && e.config && Object.keys(appConfig).every(k => e.config[k] === appConfig[k]))
|
||||
$('configEstado').textContent = s.online ? 'Configurações aplicadas no celular.' : 'Configurações salvas no servidor. Celular sem conexão.';
|
||||
if (appConfig && appConfig.videoRTC && window.CarinhaVideo) window.CarinhaVideo.atualizar(s, appConfig);
|
||||
if (appConfig && window.CarinhaRastreamento) window.CarinhaRastreamento.atualizar(s, appConfig);
|
||||
if (e.video && e.video.aviso) $('sensorEstado').textContent += ' · ' + e.video.aviso;
|
||||
if (appConfig && !appConfig.videoRTC && appConfig.preview && (!s.online || !s.camera_recente))
|
||||
esconderImagem(s.online ? 'Aguardando imagem da câmera. Confira a permissão de câmera no celular.' : 'Celular sem conexão. A imagem antiga foi removida.');
|
||||
} catch (e) {
|
||||
ultimoStatus = null;
|
||||
$('bateriaCelular').textContent = 'Bateria do celular: sem conexão.';
|
||||
$('conexaoEstado').textContent = 'Servidor indisponível';
|
||||
$('conexaoEstado').classList.remove('ativo');
|
||||
esconderImagem('O servidor não respondeu. Confira o serviço no Orange Pi.');
|
||||
if (window.CarinhaVideo) window.CarinhaVideo.parar();
|
||||
if (window.CarinhaRastreamento) window.CarinhaRastreamento.parar();
|
||||
} finally { consultandoStatus = false; }
|
||||
}
|
||||
|
||||
async function imagem() {
|
||||
if (appConfig && appConfig.videoRTC) return;
|
||||
if (recebendoImagem || !appConfig || !appConfig.preview || !ultimoStatus || !ultimoStatus.camera_recente) return;
|
||||
recebendoImagem = true;
|
||||
try {
|
||||
const r = await fetch('/camera/frame?t=' + Date.now(), {cache:'no-store', signal:AbortSignal.timeout(2500)});
|
||||
if (!r.ok || r.status === 204) return;
|
||||
const blob = await r.blob();
|
||||
if (!appConfig.preview) return;
|
||||
const nova = URL.createObjectURL(blob);
|
||||
const anterior = imagemURL; imagemURL = nova;
|
||||
$('cameraImagem').src = nova;
|
||||
$('cameraImagem').hidden = false; $('cameraMensagem').hidden = true;
|
||||
if (anterior) URL.revokeObjectURL(anterior);
|
||||
sequencia = ultimoStatus.frame_seq;
|
||||
} catch (e) { esconderImagem('Imagem indisponível. Aguardando o próximo quadro.'); }
|
||||
finally { recebendoImagem = false; }
|
||||
}
|
||||
|
||||
$('toggleCamera').onclick = () => salvarApp({preview: !appConfig.preview});
|
||||
$('conectarForm').onsubmit = async (ev) => {
|
||||
ev.preventDefault(); $('conectarBotao').disabled = true;
|
||||
$('conectarEstado').textContent = 'Conectando ao celular…';
|
||||
try {
|
||||
const r = await api('/app/connect', {ip: $('celularIP').value.trim(), pc: $('pcIP').value.trim(), porta:5555});
|
||||
$('conectarEstado').textContent = r.mensagem;
|
||||
} catch (e) { $('conectarEstado').textContent = e.message; }
|
||||
finally { $('conectarBotao').disabled = false; }
|
||||
};
|
||||
|
||||
montarCampos();
|
||||
(async () => {
|
||||
try { appConfig = await api('/app/config'); atualizarCampos(); ajustarCamera(); $('toggleCamera').disabled = false; await statusApp(); }
|
||||
catch (e) { $('configEstado').textContent = 'Falha ao carregar: ' + e.message; }
|
||||
})();
|
||||
setInterval(statusApp, 1000);
|
||||
setInterval(imagem, 250);
|
||||
(function(){
|
||||
const iaActive=document.getElementById('iaAtiva'),iaState=document.getElementById('iaEstado'),iaTest=document.getElementById('iaTestar');
|
||||
let updating=false;
|
||||
async function request(path,data){const r=await fetch('/ia/'+path,data===undefined?{}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const d=await r.json();if(!r.ok)throw Error(d.erro);return d;}
|
||||
async function refresh(){if(updating)return;try{const s=await request('status');iaActive.checked=s.ativo;iaTest.disabled=!s.ativo||s.ocupado;iaState.textContent=s.erro?'IA: '+s.erro:s.ocupado?'IA local pensando…':s.ultima?`${s.modelo} · ${s.executor} · última expressão: ${s.ultima.gesto} (${s.ultima.segundos} s)`:`${s.modelo} · ${s.executor} · ${s.ativo?'aguardando eventos':'desativado'}`;}catch(e){iaState.textContent=e.message;}}
|
||||
iaActive.onchange=async()=>{updating=true;try{await request('config',{ativo:iaActive.checked});}catch(e){iaState.textContent=e.message;}finally{updating=false;refresh();}};
|
||||
iaTest.onclick=async()=>{iaTest.disabled=true;try{await request('evento',{evento:document.getElementById('iaEvento').value});iaState.textContent='Evento enviado para a IA local…';}catch(e){iaState.textContent=e.message;}};
|
||||
refresh();setInterval(refresh,2000);
|
||||
})();
|
||||
|
||||
document.getElementById('recarregarTela').onclick=async()=>{
|
||||
const button=document.getElementById('recarregarTela');button.disabled=true;
|
||||
try{const r=await api('/app/recarregar',{});document.getElementById('conectarEstado').textContent=r.mensagem;recargaPendente=(await api('/app/status')).recarga.id;recargaInicio=Date.now();}
|
||||
catch(e){document.getElementById('conectarEstado').textContent=e.message;}
|
||||
finally{button.disabled=false;}
|
||||
};
|
||||
@@ -1,328 +0,0 @@
|
||||
/**
|
||||
* painel-conversa.js — Interface interativa de chat com o Carinha (IA Gemini / Qwen)
|
||||
* Suporte a Reconhecimento de Voz (Microfone), Síntese de Voz Robótica (TTS),
|
||||
* balões modernos, chips de sugestão e acionamento de expressões.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
let sending = false;
|
||||
let signature = '';
|
||||
let recognition = null;
|
||||
let isRecording = false;
|
||||
let lastSpokenMessage = null;
|
||||
|
||||
// Configuração de síntese de voz robótica
|
||||
function falarTexto(texto) {
|
||||
if (!('speechSynthesis' in window) || !texto) return;
|
||||
window.speechSynthesis.cancel(); // Para falas anteriores
|
||||
const u = new SpeechSynthesisUtterance(texto);
|
||||
u.lang = 'pt-BR';
|
||||
u.pitch = 1.35; // Voz aguda e robótica / simpática estilo robô
|
||||
u.rate = 1.05; // Ritmo levemente ágil
|
||||
|
||||
// Tenta encontrar uma voz em português brasileiro
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
const ptVoice = voices.find(v => v.lang.startsWith('pt'));
|
||||
if (ptVoice) u.voice = ptVoice;
|
||||
|
||||
window.speechSynthesis.speak(u);
|
||||
}
|
||||
|
||||
// Configuração do microfone (Speech Recognition)
|
||||
function setupSpeechRecognition() {
|
||||
const SpeechRec = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
const micBtn = el('conversaMicBtn');
|
||||
if (!SpeechRec || !micBtn) {
|
||||
if (micBtn) {
|
||||
micBtn.title = 'Reconhecimento de voz não suportado pelo navegador atual';
|
||||
micBtn.style.opacity = '0.4';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
recognition = new SpeechRec();
|
||||
recognition.lang = 'pt-BR';
|
||||
recognition.continuous = false;
|
||||
recognition.interimResults = false;
|
||||
|
||||
recognition.onstart = () => {
|
||||
isRecording = true;
|
||||
micBtn.classList.add('recording');
|
||||
micBtn.textContent = '⏹️';
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
};
|
||||
|
||||
recognition.onresult = (event) => {
|
||||
const transcript = event.results[0][0].transcript;
|
||||
const input = el('conversaTexto');
|
||||
if (input && transcript) {
|
||||
input.value = transcript;
|
||||
input.focus();
|
||||
if (window.RobotAudio) window.RobotAudio.bleep();
|
||||
}
|
||||
};
|
||||
|
||||
recognition.onerror = (e) => {
|
||||
console.warn('Erro no microfone:', e.error);
|
||||
pararGravacao();
|
||||
};
|
||||
|
||||
recognition.onend = () => {
|
||||
pararGravacao();
|
||||
};
|
||||
|
||||
function pararGravacao() {
|
||||
isRecording = false;
|
||||
micBtn.classList.remove('recording');
|
||||
micBtn.textContent = '🎤';
|
||||
}
|
||||
|
||||
micBtn.onclick = () => {
|
||||
if (isRecording) {
|
||||
recognition.stop();
|
||||
} else {
|
||||
try {
|
||||
recognition.start();
|
||||
} catch (err) {
|
||||
console.error('Falha ao iniciar reconhecimento:', err);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function api(path, data) {
|
||||
const r = await fetch('/conversa/' + path, data === undefined ? { cache: 'no-store' } : {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const result = await r.json();
|
||||
if (!r.ok) throw Error(result.erro);
|
||||
return result;
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const s = await api('status');
|
||||
|
||||
if (el('conversaProvedor')) {
|
||||
el('conversaProvedor').value = s.provedor || 'local';
|
||||
el('conversaProvedor').disabled = s.ocupado;
|
||||
}
|
||||
if (el('conversaEnviar')) {
|
||||
el('conversaEnviar').disabled = sending || s.ocupado;
|
||||
}
|
||||
|
||||
// Indicador de "Pensando..."
|
||||
const typingEl = el('conversaTyping');
|
||||
if (typingEl) {
|
||||
typingEl.style.display = s.ocupado ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
// Texto de status do motor
|
||||
if (el('conversaEstado')) {
|
||||
el('conversaEstado').textContent = s.erro ? 'Falha: ' + s.erro :
|
||||
s.ocupado ? 'Pensando com ' + (s.modelo || 'IA') + '…' :
|
||||
s.ultima ? (s.modelo || 'IA') + ' · ' + s.ultima.segundos + 's' :
|
||||
'Pronto para conversar.';
|
||||
}
|
||||
|
||||
const next = JSON.stringify([s.historico, s.lembrancas, s.ultima]);
|
||||
if (signature === next) return;
|
||||
signature = next;
|
||||
|
||||
// Renderiza Histórico de Mensagens como Balões de Chat
|
||||
const hist = el('conversaHistorico');
|
||||
if (hist) {
|
||||
hist.replaceChildren();
|
||||
|
||||
if (!s.historico || s.historico.length === 0) {
|
||||
const vazio = document.createElement('div');
|
||||
vazio.style.cssText = 'text-align:center;color:var(--fraco);padding:40px 20px;font-size:14px';
|
||||
vazio.innerHTML = `
|
||||
<div style="font-size:36px;margin-bottom:10px">🤖</div>
|
||||
<strong>O Carinha está pronto para conversar!</strong>
|
||||
<p style="margin-top:6px;font-size:13px">Envie uma mensagem abaixo ou use os atalhos de sugestão.</p>
|
||||
`;
|
||||
hist.append(vazio);
|
||||
} else {
|
||||
for (const m of s.historico) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'chat-row ' + (m.role === 'user' ? 'user' : 'assistant');
|
||||
|
||||
const avatar = document.createElement('div');
|
||||
avatar.className = 'chat-avatar';
|
||||
avatar.textContent = m.role === 'user' ? '👤' : '🤖';
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'chat-content';
|
||||
|
||||
const balloon = document.createElement('div');
|
||||
balloon.className = 'chat-balloon';
|
||||
balloon.textContent = m.content;
|
||||
|
||||
content.append(balloon);
|
||||
|
||||
// Se for mensagem do robô, adiciona botão de áudio e gesto
|
||||
if (m.role === 'assistant') {
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'chat-meta';
|
||||
|
||||
const speakBtn = document.createElement('button');
|
||||
speakBtn.className = 'chat-speak-btn';
|
||||
speakBtn.type = 'button';
|
||||
speakBtn.title = 'Ouvir resposta (Voz)';
|
||||
speakBtn.innerHTML = '🔊 Falar';
|
||||
speakBtn.onclick = () => {
|
||||
falarTexto(m.content);
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
};
|
||||
meta.append(speakBtn);
|
||||
|
||||
if (s.ultima && s.ultima.texto === m.content && s.ultima.gesto) {
|
||||
const gestoBadge = document.createElement('span');
|
||||
gestoBadge.className = 'chat-gesto-badge';
|
||||
gestoBadge.title = 'Clique para ver a carinha fazer este gesto';
|
||||
gestoBadge.innerHTML = `<span>✨</span><span>${s.ultima.gesto}</span>`;
|
||||
gestoBadge.onclick = async () => {
|
||||
try {
|
||||
if (window.RobotAudio) window.RobotAudio.tocarGesto(s.ultima.gesto);
|
||||
await fetch('/gesto/' + encodeURIComponent(s.ultima.gesto));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
meta.append(gestoBadge);
|
||||
}
|
||||
|
||||
content.append(meta);
|
||||
}
|
||||
|
||||
row.append(avatar, content);
|
||||
hist.append(row);
|
||||
}
|
||||
hist.scrollTop = hist.scrollHeight;
|
||||
}
|
||||
|
||||
// Fala automática da nova resposta da IA se a opção estiver ativada
|
||||
const autoVoz = el('conversaVozAuto')?.checked;
|
||||
if (autoVoz && s.ultima && s.ultima.texto && s.ultima.texto !== lastSpokenMessage) {
|
||||
lastSpokenMessage = s.ultima.texto;
|
||||
falarTexto(s.ultima.texto);
|
||||
if (s.ultima.gesto && window.RobotAudio) {
|
||||
window.RobotAudio.tocarGesto(s.ultima.gesto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Renderiza Lista de Lembranças / Memória
|
||||
const memorias = el('conversaMemorias');
|
||||
if (memorias) {
|
||||
memorias.replaceChildren();
|
||||
for (const m of s.lembrancas || []) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'memory-card';
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.style.cssText = 'color:var(--texto);font-size:13.5px;word-break:break-word';
|
||||
label.textContent = m.texto;
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'danger';
|
||||
button.style.cssText = 'padding:4px 10px;font-size:12px;flex-shrink:0';
|
||||
button.textContent = 'Apagar';
|
||||
button.onclick = () => action('apagar', { id: m.id });
|
||||
|
||||
row.append(label, button);
|
||||
memorias.append(row);
|
||||
}
|
||||
if (!s.lembrancas || !s.lembrancas.length) {
|
||||
memorias.innerHTML = '<span style="color:var(--fraco);font-size:13px;padding:6px 0">Nenhuma lembrança salva no banco SQLite.</span>';
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
if (el('conversaEstado')) el('conversaEstado').textContent = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function action(path, data) {
|
||||
try {
|
||||
await api(path, data);
|
||||
await refresh();
|
||||
return true;
|
||||
} catch (e) {
|
||||
if (el('conversaEstado')) el('conversaEstado').textContent = e.message;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Troca de Provedor (Gemini / Qwen)
|
||||
if (el('conversaProvedor')) {
|
||||
el('conversaProvedor').onchange = () => action('config', { provedor: el('conversaProvedor').value });
|
||||
}
|
||||
|
||||
// Envio de Mensagem
|
||||
if (el('conversaForm')) {
|
||||
el('conversaForm').onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const input = el('conversaTexto');
|
||||
const val = input.value.trim();
|
||||
if (!val) return;
|
||||
|
||||
sending = true;
|
||||
if (el('conversaEnviar')) el('conversaEnviar').disabled = true;
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
|
||||
try {
|
||||
if (await action('enviar', { texto: val })) {
|
||||
input.value = '';
|
||||
}
|
||||
} finally {
|
||||
sending = false;
|
||||
await refresh();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Chips de Sugestão de Diálogo
|
||||
document.querySelectorAll('.suggestion-chip').forEach(chip => {
|
||||
chip.onclick = async () => {
|
||||
const msg = chip.getAttribute('data-msg');
|
||||
const input = el('conversaTexto');
|
||||
if (input && msg) {
|
||||
input.value = msg;
|
||||
if (el('conversaForm')) {
|
||||
el('conversaForm').requestSubmit();
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Salvar Lembrança
|
||||
if (el('memoriaForm')) {
|
||||
el('memoriaForm').onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const input = el('memoriaTexto');
|
||||
if (await action('lembrar', { texto: input.value })) {
|
||||
input.value = '';
|
||||
if (window.RobotAudio) window.RobotAudio.bleep();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Limpar Histórico
|
||||
if (el('conversaLimpar')) {
|
||||
el('conversaLimpar').onclick = () => {
|
||||
if (confirm('Apagar todo o histórico de conversas e lembranças do Carinha?')) {
|
||||
action('limpar', {});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
setupSpeechRecognition();
|
||||
refresh();
|
||||
setInterval(refresh, 1800);
|
||||
})();
|
||||
@@ -1,98 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
const video=document.getElementById('cameraVideo'), canvas=document.getElementById('trackingOverlay');
|
||||
const ctx=canvas.getContext('2d'), label=document.getElementById('trackingEstado');
|
||||
const R=window.Rastreamento;
|
||||
const fresh=new R.FreshTarget();
|
||||
const connections=[[0,1],[1,2],[2,3],[3,4],[0,5],[5,6],[6,7],[7,8],[5,9],[9,10],[10,11],[11,12],[9,13],[13,14],[14,15],[15,16],[13,17],[0,17],[17,18],[18,19],[19,20]];
|
||||
let worker=null, ready=false, pending=false, generation=0, active=false, config={}, session=null;
|
||||
let result=null, target=null, at=0, interval=50, nextFrame=0, lastVideo=-1, samples=0, retryAt=0, previousSample=0;
|
||||
const scratch=document.createElement('canvas'), sc=scratch.getContext('2d');
|
||||
function clear() { ctx.clearRect(0,0,canvas.width,canvas.height); }
|
||||
function stop(text) {
|
||||
if (active && window.CarinhaVideo) window.CarinhaVideo.rastrear(null);
|
||||
active=false; generation++; if(worker) worker.terminate(); worker=null;
|
||||
pending=false; ready=false; result=null; target=null; lastVideo=-1; fresh.clear(); previousSample=0; clear(); label.textContent=text;
|
||||
}
|
||||
function draw() {
|
||||
const rect=canvas.parentElement.getBoundingClientRect();
|
||||
if(canvas.width!==Math.round(rect.width) || canvas.height!==Math.round(rect.height)) {
|
||||
canvas.width=Math.round(rect.width); canvas.height=Math.round(rect.height);
|
||||
}
|
||||
clear(); canvas.hidden=!config.mostrarRastreamento;
|
||||
if(canvas.hidden || !result || performance.now()-at>350 || !video.videoWidth) return;
|
||||
const fit=R.fit(canvas.width,canvas.height,video.videoWidth,video.videoHeight);
|
||||
const point=p=>R.point(p,fit);
|
||||
ctx.lineWidth=2; ctx.font='13px Segoe UI';
|
||||
for(const f of result.faces) {
|
||||
const p=point(f); ctx.strokeStyle='#5cd6ff'; ctx.fillStyle='#5cd6ff';
|
||||
ctx.strokeRect(p.x,p.y,f.w*fit.w,f.h*fit.h);
|
||||
ctx.fillText('Rosto '+Math.round(f.score*100)+'%',p.x,Math.max(15,p.y-6));
|
||||
for(const q of f.pontos || []) { const v=point(q); ctx.beginPath();ctx.arc(v.x,v.y,3,0,Math.PI*2);ctx.fill(); }
|
||||
}
|
||||
for(const h of result.hands) {
|
||||
ctx.strokeStyle='#78ffa0'; ctx.fillStyle='#78ffa0';
|
||||
for(const [a,b] of connections) { const p=point(h[a]),q=point(h[b]); ctx.beginPath();ctx.moveTo(p.x,p.y);ctx.lineTo(q.x,q.y);ctx.stroke(); }
|
||||
for(const q of h) { const p=point(q);ctx.beginPath();ctx.arc(p.x,p.y,3,0,Math.PI*2);ctx.fill(); }
|
||||
const p=point(h[0]);ctx.fillText('Mão',p.x+6,p.y+16);
|
||||
}
|
||||
if(target) { const p=point(target);ctx.strokeStyle='#ffd860';ctx.beginPath();ctx.arc(p.x,p.y,12,0,Math.PI*2);ctx.moveTo(p.x-18,p.y);ctx.lineTo(p.x+18,p.y);ctx.moveTo(p.x,p.y-18);ctx.lineTo(p.x,p.y+18);ctx.stroke(); }
|
||||
}
|
||||
function start() {
|
||||
active=true; const gen=++generation; worker=new Worker('/rastreador-worker.js');
|
||||
label.textContent='Carregando rastreadores locais…';
|
||||
worker.onerror=e=>{ retryAt=Date.now()+10000; stop('Falha no rastreador: '+e.message); };
|
||||
worker.onmessage=({data})=>{
|
||||
if(gen!==generation) return;
|
||||
pending=false;
|
||||
if(data.tipo==='erro') { retryAt=Date.now()+10000; stop('Rastreamento indisponível: '+data.erro); return; }
|
||||
ready=true;
|
||||
if(data.tipo==='pronto') { label.textContent='Rastreadores prontos. Aguardando imagem…'; return; }
|
||||
result=data; at=data.timestamp; samples++;
|
||||
const prior=target;
|
||||
target=R.target(data.faces,data.hands,prior);
|
||||
if(target) target.atividade=!!prior && target.tipo===prior.tipo && Math.hypot(target.x-prior.x,target.y-prior.y)>.008;
|
||||
if(target) fresh.accept(target,at); else fresh.clear();
|
||||
interval=Math.max(50,Math.min(200,data.ms*1.2));
|
||||
const hz=previousSample?Math.round(1000/(data.timestamp-previousSample)):0; previousSample=data.timestamp;
|
||||
label.textContent=data.faces.length+' rosto(s) · '+data.hands.length+' mão(s) · '+hz+' análises/s · '+Math.round(data.ms)+' ms' +
|
||||
(target?' · alvo: '+(target.tipo==='mao'?'mão':'rosto'):' · procurando…');
|
||||
if(config.seguirRastreamento && window.CarinhaVideo) window.CarinhaVideo.rastrear(target);
|
||||
draw();
|
||||
};
|
||||
pending=true; worker.postMessage({config:{rosto:config.rastrearRosto,maos:config.rastrearMaos}});
|
||||
}
|
||||
async function frame(now) {
|
||||
if(!active || !ready || pending || now<nextFrame || video.readyState<2 || video.hidden || video.currentTime===lastVideo) return;
|
||||
pending=true; nextFrame=now+interval; lastVideo=video.currentTime;
|
||||
const gen=generation;
|
||||
try {
|
||||
const scale=Math.min(1,640/video.videoWidth);scratch.width=Math.round(video.videoWidth*scale);scratch.height=Math.round(video.videoHeight*scale);
|
||||
sc.drawImage(video,0,0,scratch.width,scratch.height);
|
||||
const bitmap=await createImageBitmap(scratch);
|
||||
if(gen!==generation) { bitmap.close(); return; }
|
||||
worker.postMessage({bitmap,timestamp:now,config:{rosto:config.rastrearRosto,maos:config.rastrearMaos}},[bitmap]);
|
||||
} catch(e) { if(gen===generation) stop('Falha ao analisar vídeo: '+e.message); }
|
||||
}
|
||||
setInterval(()=>{const now=performance.now();frame(now);
|
||||
if(fresh.value && !fresh.get(now)) { fresh.clear(); target=null; if(config.seguirRastreamento && window.CarinhaVideo) window.CarinhaVideo.rastrear(null); }
|
||||
if(result && now-at>350) { result=null;target=null;clear(); }
|
||||
},20);
|
||||
window.addEventListener('resize',draw);
|
||||
window.CarinhaRastreamento={
|
||||
atualizar(status,c) {
|
||||
const changed=config.rastrearRosto!==c.rastrearRosto || config.rastrearMaos!==c.rastrearMaos;
|
||||
if(config.seguirRastreamento && !c.seguirRastreamento && window.CarinhaVideo) window.CarinhaVideo.rastrear(null);
|
||||
config=c;
|
||||
const allowed=status.online && c.preview && c.sensorCamera!==false && (!(status.estado || {}).dormindo || c.cameraSono);
|
||||
if(!allowed || (!c.rastrearRosto && !c.rastrearMaos)) {
|
||||
stop(!allowed?'Ligue o vídeo para rastrear no PC.':'Rastreamento desligado.'); return;
|
||||
}
|
||||
if(changed && active) stop('Atualizando rastreadores…');
|
||||
if(!active && Date.now()>=retryAt) start(); draw();
|
||||
},
|
||||
parar() { stop('Vídeo desligado.'); },
|
||||
estado() { return {active,ready,pending,samples,result,target}; }
|
||||
};
|
||||
window.addEventListener('pagehide',()=>stop('Painel fechado.'));
|
||||
})();
|
||||
-138
@@ -1,138 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
const video = document.getElementById('cameraVideo');
|
||||
const mensagem = document.getElementById('cameraMensagem');
|
||||
const qualidade = document.getElementById('videoQualidade');
|
||||
let pc = null, id = null, desde = 0, ice = [], busy = false, wanted = false;
|
||||
let opening = false, polling = false, generation = 0, retryAt = 0, last = null, outroPainel = false;
|
||||
let trackingChannel = null;
|
||||
let trackingSequence = 0;
|
||||
let effectiveQuality = '';
|
||||
async function req(path, data) {
|
||||
const r = await fetch(path, {cache:'no-store',signal:AbortSignal.timeout(3500),
|
||||
...(data === undefined?{}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})});
|
||||
const body = await r.json();
|
||||
if (!r.ok) throw new Error(body.erro || 'HTTP ' + r.status);
|
||||
return body;
|
||||
}
|
||||
function texto(t) {
|
||||
mensagem.textContent = t;
|
||||
mensagem.hidden = false; video.hidden = true;
|
||||
}
|
||||
function parar(fechar = true) {
|
||||
generation++;
|
||||
const antiga = id; id = null;
|
||||
if (pc) pc.close(); pc = null; trackingChannel=null; ice = []; desde = 0; last = null;
|
||||
if (window.CarinhaRastreamento) window.CarinhaRastreamento.parar();
|
||||
video.pause(); video.srcObject = null; video.hidden = true;
|
||||
if (antiga && fechar) req('/rtc/session',{acao:'fechar',id:antiga}).catch(() => {});
|
||||
}
|
||||
async function enviar(msg, sessao) {
|
||||
await req('/rtc/send',{id:sessao || id,de:'pc',mensagem:msg});
|
||||
}
|
||||
async function iniciar() {
|
||||
if (!wanted || pc || opening || outroPainel || Date.now() < retryAt) return;
|
||||
opening = true;
|
||||
const gen = generation;
|
||||
texto('Conectando vídeo ao vivo… O rosto continua no celular.');
|
||||
try {
|
||||
const session = await req('/rtc/session',{acao:'abrir'});
|
||||
if (gen !== generation || !wanted) { req('/rtc/session',{acao:'fechar',id:session.id}).catch(()=>{}); return; }
|
||||
id = session.id;
|
||||
const currentId = id;
|
||||
pc = new RTCPeerConnection({iceServers:[]});
|
||||
const mine = pc;
|
||||
trackingChannel=pc.createDataChannel('rastreamento',{ordered:false,maxRetransmits:0});
|
||||
pc.addTransceiver('video',{direction:'recvonly'});
|
||||
pc.onicecandidate = event => {
|
||||
if (pc === mine && event.candidate) enviar({tipo:'candidate',candidate:event.candidate.toJSON()}, currentId).catch(()=>{});
|
||||
};
|
||||
pc.ontrack = event => {
|
||||
if (pc !== mine) return;
|
||||
video.srcObject = event.streams[0] || new MediaStream([event.track]);
|
||||
video.play().catch(e => texto('Clique em Ligar câmera para permitir o vídeo: ' + e.message));
|
||||
};
|
||||
pc.onconnectionstatechange = () => {
|
||||
if (pc !== mine) return;
|
||||
if (pc.connectionState === 'failed') {
|
||||
parar(); retryAt = Date.now()+2000; texto('Reconectando o vídeo…');
|
||||
}
|
||||
};
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
if (pc !== mine) return;
|
||||
await enviar({tipo:'offer',sdp:pc.localDescription.sdp}, currentId);
|
||||
} catch (e) { parar(); retryAt = Date.now()+2500; texto('Falha ao iniciar vídeo: ' + e.message); }
|
||||
finally { opening = false; }
|
||||
}
|
||||
async function poll() {
|
||||
if (!id || !pc || polling) return;
|
||||
polling = true;
|
||||
const mine = pc, sid = id;
|
||||
try {
|
||||
const packet = await req('/rtc/poll?lado=pc&desde='+desde+'&id='+sid);
|
||||
if (pc !== mine) return;
|
||||
if (packet.id !== sid) {
|
||||
outroPainel = !!packet.id; parar(false);
|
||||
texto(outroPainel ? 'Vídeo aberto em outro painel. Recarregue para assumir o controle.' : 'Aguardando reconexão do vídeo…');
|
||||
return;
|
||||
}
|
||||
for (const envelope of packet.mensagens) {
|
||||
const msg = envelope.mensagem;
|
||||
if (msg.tipo === 'answer') {
|
||||
await pc.setRemoteDescription({type:'answer',sdp:msg.sdp});
|
||||
for (const c of ice) await pc.addIceCandidate(c);
|
||||
ice = [];
|
||||
} else if (msg.tipo === 'candidate') {
|
||||
if (pc.remoteDescription) await pc.addIceCandidate(msg.candidate); else ice.push(msg.candidate);
|
||||
} else if (msg.tipo === 'erro') {
|
||||
parar(); retryAt = Date.now()+3500;
|
||||
texto('Câmera no celular: ' + msg.erro); return;
|
||||
}
|
||||
desde = Math.max(desde,envelope.seq);
|
||||
}
|
||||
} catch (e) { if (pc === mine) { parar(); retryAt = Date.now()+2500; texto('Sinalização interrompida. Reconectando…'); } }
|
||||
finally { polling = false; }
|
||||
}
|
||||
video.onloadeddata = () => { video.hidden = false; mensagem.hidden = true; };
|
||||
video.onplaying = () => { video.hidden = false; mensagem.hidden = true; };
|
||||
let statsBusy = false;
|
||||
setInterval(async () => {
|
||||
if (!pc || pc.connectionState !== 'connected' || statsBusy) return;
|
||||
statsBusy = true;
|
||||
const mine = pc;
|
||||
try {
|
||||
const report = await pc.getStats(); if (pc !== mine) return;
|
||||
report.forEach(s => {
|
||||
if (s.type !== 'inbound-rtp' || (s.kind !== 'video' && s.mediaType !== 'video')) return;
|
||||
const fps = last ? (s.framesDecoded-last.framesDecoded)*1000/(s.timestamp-last.timestamp) : s.framesPerSecond || 0;
|
||||
const kbps = last ? (s.bytesReceived-last.bytesReceived)*8/(s.timestamp-last.timestamp) : 0;
|
||||
last = s;
|
||||
qualidade.textContent = (effectiveQuality==='auto' || (!effectiveQuality && appConfig?.videoResolucao === 'auto' && !appConfig?.videoFPS) ? 'Automática' : 'Manual') + ' · '+(s.frameWidth||video.videoWidth)+' × '+(s.frameHeight||video.videoHeight)+' · '+Math.round(fps)+' fps · '+Math.round(kbps)+' kb/s';
|
||||
if (fps > 0) { video.hidden = false; mensagem.hidden = true; }
|
||||
});
|
||||
} catch (e) { /* conexão em transição */ }
|
||||
finally { statsBusy = false; }
|
||||
},1000);
|
||||
setInterval(() => { iniciar(); poll(); },400);
|
||||
window.CarinhaVideo = {
|
||||
rastrear(alvo) {
|
||||
if (trackingChannel && trackingChannel.readyState==='open' && trackingChannel.bufferedAmount<4096)
|
||||
trackingChannel.send(JSON.stringify({tipo:'alvo',seq:++trackingSequence,alvo}));
|
||||
},
|
||||
rastreamentoConectado() { return !!trackingChannel && trackingChannel.readyState==='open'; },
|
||||
parar() { wanted = false; outroPainel = false; parar(); },
|
||||
atualizar(status, config) {
|
||||
effectiveQuality=(status.estado || {}).video?.qualidade || '';
|
||||
const liberada = config.sensorCamera !== false && (!(status.estado || {}).dormindo || config.cameraSono === true);
|
||||
const nova = !!config.preview && !!status.online && liberada;
|
||||
if (!nova) {
|
||||
if (wanted || pc) parar(); wanted = false;
|
||||
texto(!liberada ? 'Câmera desativada pelos ajustes de sensores.' : config.preview ? 'Celular sem conexão. Abra o Carinha.' : 'Transmissão desligada. O rosto e os sensores continuam funcionando.');
|
||||
} else { wanted = true; iniciar(); }
|
||||
}
|
||||
};
|
||||
window.addEventListener('pagehide', () => {
|
||||
if (id) navigator.sendBeacon('/rtc/session',new Blob([JSON.stringify({acao:'fechar',id})],{type:'application/json'}));
|
||||
wanted = false; parar(false);
|
||||
});
|
||||
})();
|
||||
-247
@@ -1,247 +0,0 @@
|
||||
/* ==========================================================================
|
||||
PAINEL DE CÂMERA & ROSTO · CARINHA HUD STYLE
|
||||
========================================================================== */
|
||||
|
||||
/* Se o painel for carregado como iframe limpo (no topo), exibe APENAS a câmera */
|
||||
html.is-clean-embed body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
html.is-clean-embed .painel-workspace {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
html.is-clean-embed .painel-monitor-sticky {
|
||||
width: 100% !important;
|
||||
top: 0 !important;
|
||||
position: static !important;
|
||||
}
|
||||
html.is-clean-embed .cartao {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
/* Oculta quase tudo, deixa só a câmera (div.visao) */
|
||||
html.is-clean-embed .cabecalho,
|
||||
html.is-clean-embed .texto-fraco,
|
||||
html.is-clean-embed .ajustes-grade,
|
||||
html.is-clean-embed .sensores,
|
||||
html.is-clean-embed .painel-controls-scroll,
|
||||
html.is-clean-embed .rodape,
|
||||
html.is-clean-embed #ajustesRastreamento,
|
||||
html.is-clean-embed #trackingEstado,
|
||||
html.is-clean-embed #sensorEstado {
|
||||
display: none !important;
|
||||
}
|
||||
html.is-clean-embed h1,
|
||||
html.is-clean-embed .sub,
|
||||
html.is-clean-embed > div:first-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
/* Oculta o segundo cartão inteiro (Prévia do Celular) */
|
||||
html.is-clean-embed .painel-monitor-sticky > section:not(:first-child) {
|
||||
display: none !important;
|
||||
}
|
||||
/* Centraliza e expande o vídeo/imagem */
|
||||
html.is-clean-embed .visao {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
min-height: unset;
|
||||
aspect-ratio: unset;
|
||||
}
|
||||
html.is-clean-embed .visao video,
|
||||
html.is-clean-embed .visao img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.supervisao {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
|
||||
gap: 22px;
|
||||
margin: 18px 0 24px;
|
||||
}
|
||||
|
||||
.visao {
|
||||
position: relative;
|
||||
background: #020509;
|
||||
border: 1px solid rgba(92, 214, 255, 0.35);
|
||||
border-radius: var(--raio-lg);
|
||||
min-height: 320px;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.visao::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12px;
|
||||
border: 1px dashed rgba(92, 214, 255, 0.2);
|
||||
border-radius: var(--raio-md);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visao img, .visao video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.visao p {
|
||||
max-width: 44ch;
|
||||
text-align: center;
|
||||
color: #9bb7cf;
|
||||
padding: 24px;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.6;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cabecalho {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.cabecalho h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.sensores {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
background: rgba(10, 18, 30, 0.6);
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--raio-md);
|
||||
border: 1px solid var(--borda);
|
||||
}
|
||||
|
||||
meter {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
margin-top: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: rgba(20, 35, 55, 0.6);
|
||||
}
|
||||
|
||||
meter::-webkit-meter-bar {
|
||||
background: rgba(20, 35, 55, 0.6);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
meter::-webkit-meter-optimum-value {
|
||||
background: linear-gradient(90deg, #38bdf8, #5cd6ff);
|
||||
box-shadow: 0 0 10px rgba(92, 214, 255, 0.5);
|
||||
}
|
||||
|
||||
.rosto-preview {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-md);
|
||||
background: #000000;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.ajustes {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.ajustes-grade {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px 28px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.ajuste {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: rgba(12, 21, 35, 0.5);
|
||||
border: 1px solid rgba(56, 82, 110, 0.25);
|
||||
border-radius: var(--raio-sm);
|
||||
}
|
||||
|
||||
.ajuste-range {
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(12, 21, 35, 0.5);
|
||||
border: 1px solid rgba(56, 82, 110, 0.25);
|
||||
border-radius: var(--raio-sm);
|
||||
}
|
||||
|
||||
.ajuste-range label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#gestos button {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
border-radius: var(--raio-sm);
|
||||
background: rgba(22, 38, 60, 0.65);
|
||||
border: 1px solid var(--borda);
|
||||
transition: all 0.16s ease;
|
||||
}
|
||||
|
||||
#gestos button:hover {
|
||||
background: rgba(35, 62, 95, 0.85);
|
||||
border-color: var(--ciano);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 14px rgba(92, 214, 255, 0.25);
|
||||
}
|
||||
|
||||
#rostos button {
|
||||
padding: 8px 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--raio-sm);
|
||||
}
|
||||
|
||||
#rostos button.on {
|
||||
background: var(--ciano);
|
||||
border-color: var(--ciano);
|
||||
color: #041420;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 16px var(--ciano-glow);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.supervisao {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.visao {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
-379
@@ -1,379 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Câmera & Rosto · Central Carinha</title>
|
||||
<script>
|
||||
if (window.location.search.includes('clean=1')) {
|
||||
document.documentElement.classList.add('is-clean-embed');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<link rel="stylesheet" href="/painel.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>Câmera & Rosto</h1>
|
||||
<p id="bateriaCelular" class="texto-fraco" role="status" style="margin:4px 0 0">Bateria do celular: aguardando dados.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span class="badge ativo"><span class="badge-dot"></span> Monitoramento Contínuo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub" style="margin-bottom:18px">Controle o rostinho no celular e acompanhe o que ele vê. O monitor da câmera e do rosto fica fixado na tela enquanto você ajusta gestos e comportamentos.</div>
|
||||
|
||||
<!-- WORKSPACE STICKY: Câmera e Rosto fixados na tela durante a rolagem de configurações -->
|
||||
<div class="painel-workspace">
|
||||
|
||||
<!-- Coluna Fixa (Sticky Monitor) -->
|
||||
<aside class="painel-monitor-sticky">
|
||||
<!-- Câmera ao Vivo -->
|
||||
<section class="cartao" style="margin-bottom:18px">
|
||||
<div class="cabecalho">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
Olhar da Carinha
|
||||
</h2>
|
||||
<div style="display:flex;gap:8px;align-items:center">
|
||||
<button id="bSnapshot" type="button" title="Capturar imagem da câmera">📸 Foto</button>
|
||||
<button id="toggleCamera" class="principal" disabled>Ligar câmera</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="visao">
|
||||
<video id="cameraVideo" autoplay muted playsinline hidden aria-label="Vídeo ao vivo da câmera do celular"></video>
|
||||
<img id="cameraImagem" alt="Imagem ao vivo da câmera do celular" hidden>
|
||||
<canvas id="trackingOverlay" aria-label="Marcações do rastreamento" style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none" hidden></canvas>
|
||||
<p id="cameraMensagem">Ligue a câmera para acompanhar o ambiente. A imagem aparece aqui; o celular continua mostrando o rosto.</p>
|
||||
</div>
|
||||
|
||||
<p class="texto-fraco" id="videoQualidade" style="margin:8px 0 4px">Qualidade automática · buscando 30 fps</p>
|
||||
<div id="ajustesRastreamento" class="ajustes-grade" style="margin-top:8px"></div>
|
||||
<p id="trackingEstado" class="texto-fraco" role="status" style="margin:4px 0">Aguardando vídeo para rastrear no PC.</p>
|
||||
|
||||
<div class="sensores">
|
||||
<label>Microfone <span id="micValor">—</span><meter id="micNivel" min="0" max="1" value="0"></meter></label>
|
||||
<label>Movimento <span id="movValor">—</span><meter id="movNivel" min="0" max="1" value="0"></meter></label>
|
||||
</div>
|
||||
<p class="texto-fraco" id="sensorEstado" style="margin:4px 0">Aguardando o app no celular.</p>
|
||||
</section>
|
||||
|
||||
<!-- Prévia da Tela do Celular -->
|
||||
<section class="cartao">
|
||||
<div class="cabecalho">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/></svg>
|
||||
Tela do Galaxy S10
|
||||
</h2>
|
||||
<span id="conexaoEstado" class="online">Aguardando</span>
|
||||
</div>
|
||||
|
||||
<iframe class="rosto-preview" style="height:165px;margin-top:4px" src="/carinha.html?espelho=1&camera=0&audio=0" title="Prévia da aparência escolhida" tabindex="-1"></iframe>
|
||||
<p class="texto-fraco" style="margin:6px 0 10px">Prévia da aparência. <span id="rostoConfirmado">Aguardando confirmação do celular.</span></p>
|
||||
|
||||
<button id="recarregarTela" type="button" style="width:100%;margin-bottom:10px">🔄 Recarregar tela do celular</button>
|
||||
|
||||
<details>
|
||||
<summary>Conexão ADB e Rede</summary>
|
||||
<form id="conectarForm" style="margin-top:10px">
|
||||
<label for="celularIP">IP do celular</label>
|
||||
<input id="celularIP" type="text" value="192.168.1.16" required>
|
||||
<label for="pcIP">IP do servidor na rede</label>
|
||||
<input id="pcIP" type="text" value="192.168.1.35" required>
|
||||
<button id="conectarBotao" type="submit" style="width:100%">Conectar e abrir o app</button>
|
||||
</form>
|
||||
<p id="conectarEstado" class="texto-fraco" role="status" style="margin-top:6px">O celular e o PC precisam estar na mesma rede, com ADB Wi-Fi ativado.</p>
|
||||
</details>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<!-- Coluna Rolável (Controles & Configurações) -->
|
||||
<main class="painel-controls-scroll">
|
||||
|
||||
<!-- Gestos -->
|
||||
<section class="cartao">
|
||||
<div class="cabecalho">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></svg>
|
||||
Disparo de Gestos
|
||||
</h2>
|
||||
<span class="badge" style="font-size:11px">Fila de Ações</span>
|
||||
</div>
|
||||
<p style="font-size:13px;margin:4px 0 12px">Clique para acionar a expressão física no robô com feedback sonoro instantâneo:</p>
|
||||
<div class="linha" id="gestos" style="gap:10px"></div>
|
||||
</section>
|
||||
|
||||
<!-- Rosto e Cor dos Olhos -->
|
||||
<div class="grade" style="grid-template-columns:1fr 1fr">
|
||||
<div class="cartao">
|
||||
<h2>Rosto</h2>
|
||||
<p style="font-size:13px;margin:4px 0 10px">Selecione a proporção e formato:</p>
|
||||
<div class="linha" id="rostos"></div>
|
||||
<div class="estado" id="estadoRosto" style="margin-top:12px;font-size:13.5px">—</div>
|
||||
</div>
|
||||
|
||||
<div class="cartao">
|
||||
<h2>Cor dos olhos</h2>
|
||||
<p style="font-size:13px;margin:4px 0 10px">Paleta com brilho neon:</p>
|
||||
<div class="linha" id="cores"></div>
|
||||
<div class="olho">
|
||||
<input type="color" id="corLivre" value="#5cd6ff">
|
||||
<span style="font-size:13px">escolher outra cor</span>
|
||||
</div>
|
||||
<div class="previa" id="previa" style="margin-top:12px">
|
||||
<div class="bolha" id="bolha1"></div>
|
||||
<div class="bolha" id="bolha2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aparência Atual -->
|
||||
<div class="cartao">
|
||||
<h2>Aparência Atual & Demos</h2>
|
||||
<div class="estado" id="estadoAparencia">—</div>
|
||||
<div class="linha" style="margin-top:14px">
|
||||
<button id="bPadrao">Voltar ao padrão</button>
|
||||
<button id="bAbracar" class="primary">Demo: acordar + feliz + coração</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personalidade e IA local -->
|
||||
<section class="cartao">
|
||||
<details style="margin:0;border:0;padding:0">
|
||||
<summary style="font-size:16px">Personalidade e IA Local (Qwen embarcado)</summary>
|
||||
<div style="margin-top:12px">
|
||||
<label style="display:flex;align-items:center;gap:10px">
|
||||
<input id="iaAtiva" type="checkbox">
|
||||
<span>Ativar cérebro autônomo do personagem</span>
|
||||
</label>
|
||||
<p class="texto-fraco">Qwen3 decide expressões a partir de sons e movimento. Processamento no celular; sem comandos de motores.</p>
|
||||
<div style="display:flex;gap:10px;align-items:center;margin-top:10px">
|
||||
<select id="iaEvento" aria-label="Evento para testar IA" style="margin:0">
|
||||
<option value="saudacao">Alguém me cumprimentou</option>
|
||||
<option value="som">Ouvi um som</option>
|
||||
<option value="movimento">Vi movimento</option>
|
||||
<option value="sozinho">Estou sozinho</option>
|
||||
</select>
|
||||
<button id="iaTestar" type="button">Testar reação</button>
|
||||
</div>
|
||||
<p id="iaEstado" role="status" style="margin-top:8px;font-size:13px">Carregando IA…</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Comportamento e Ajustes -->
|
||||
<section class="cartao ajustes">
|
||||
<div class="cabecalho">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
Comportamento & Sensores
|
||||
</h2>
|
||||
<span class="badge" style="font-size:11px">Tempo Real</span>
|
||||
</div>
|
||||
<div id="ajustesBasicos" class="ajustes-grade"></div>
|
||||
<details>
|
||||
<summary>Sensibilidade e tempos de reação</summary>
|
||||
<div id="ajustesAvancados" class="ajustes-grade"></div>
|
||||
</details>
|
||||
<div id="configEstado" role="status" style="margin-top:14px;color:var(--ciano)">Carregando configurações…</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="rodape" style="margin-top:32px">
|
||||
Servidor no Orange Pi. O vídeo é transmitido ao navegador e não é gravado.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
/* -------------------------------------------------------------------------
|
||||
Painel de controle da carinha (servido pelo kiosk-server.py em /painel).
|
||||
Ele conversa com as MESMAS rotas que a pagina da cara usa:
|
||||
GET /gestos lista de gestos
|
||||
GET /faces lista de rostos
|
||||
GET /config aparencia guardada (rosto + cor)
|
||||
GET /gesto/<nome> enfileira um gesto
|
||||
POST /config guarda e aplica rosto/cor
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
const elGestos = document.getElementById("gestos");
|
||||
const elRostos = document.getElementById("rostos");
|
||||
const elCores = document.getElementById("cores");
|
||||
const elCorLivre = document.getElementById("corLivre");
|
||||
const elEstadoRosto = document.getElementById("estadoRosto");
|
||||
const elEstadoAparencia = document.getElementById("estadoAparencia");
|
||||
const bPadrao = document.getElementById("bPadrao");
|
||||
const bAbracar = document.getElementById("bAbracar");
|
||||
const bolha1 = document.getElementById("bolha1");
|
||||
const bolha2 = document.getElementById("bolha2");
|
||||
|
||||
const PADRAO = { rosto: "carinha", cor: [92, 214, 255] };
|
||||
const PALETA = ["#5CD6FF", "#96E8FF", "#FF7070", "#FFB070", "#FFD860", "#78FFA0",
|
||||
"#82AAFF", "#FF70B0", "#F5FAFF"];
|
||||
let aparencia = Object.assign({}, PADRAO);
|
||||
|
||||
const paraHex = (c) => "#" + c.map((v) => Math.max(0, Math.min(255, Math.round(v)))
|
||||
.toString(16).padStart(2, "0")).join("");
|
||||
const deHex = (h) => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16),
|
||||
parseInt(h.slice(5, 7), 16)];
|
||||
const mesmoTom = (a, b) => a && b && a.every((v, i) => Math.abs(v - b[i]) < 6);
|
||||
|
||||
async function pedir(rota, opcoes) {
|
||||
try {
|
||||
const r = await fetch(rota, opcoes);
|
||||
if (!r.ok) throw new Error("HTTP " + r.status);
|
||||
return await r.json();
|
||||
} catch (e) {
|
||||
estado("Falha ao falar com o servidor (" + e.message + ")");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function estado(texto) {
|
||||
elEstadoAparencia.innerHTML = texto;
|
||||
}
|
||||
|
||||
function pintarPrevia() {
|
||||
const c = paraHex(aparencia.cor || PADRAO.cor);
|
||||
bolha1.style.background = c;
|
||||
bolha2.style.background = c;
|
||||
const hex = paraHex(aparencia.cor || PADRAO.cor);
|
||||
elCorLivre.value = hex;
|
||||
for (const b of elCores.children) b.classList.toggle("on", b.dataset.hex === hex);
|
||||
for (const b of elRostos.children)
|
||||
b.classList.toggle("on", b.dataset.rosto === aparencia.rosto);
|
||||
elEstadoRosto.innerHTML = "Em uso: <b>" + (aparencia.rosto || "?") + "</b>";
|
||||
estado("Rosto <b>" + (aparencia.rosto || "?") + "</b> · cor dos olhos <b>" + hex +
|
||||
"</b><br><span style='color:#7f97ab'>configuração guardada no PC</span>");
|
||||
}
|
||||
|
||||
/* Manda a aparencia para o servidor: ele guarda E enfileira a ordem certa. */
|
||||
async function salvarAparencia(parte) {
|
||||
const dados = {};
|
||||
if (parte === "rosto") dados.rosto = aparencia.rosto;
|
||||
if (parte === "cor") dados.cor = aparencia.cor;
|
||||
const r = await pedir("/config", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(dados),
|
||||
});
|
||||
if (r && r.aparencia) {
|
||||
aparencia = Object.assign(aparencia, r.aparencia);
|
||||
pintarPrevia();
|
||||
}
|
||||
}
|
||||
|
||||
function montarGestos(lista) {
|
||||
elGestos.innerHTML = "";
|
||||
for (const nome of lista) {
|
||||
const b = document.createElement("button");
|
||||
b.textContent = nome.replace(/_/g, " ");
|
||||
b.onclick = async () => {
|
||||
if (window.RobotAudio) window.RobotAudio.tocarGesto(nome);
|
||||
const resposta = await pedir("/gesto/" + encodeURIComponent(nome));
|
||||
if (resposta) estado("Gesto enviado: <b>" + nome + "</b>");
|
||||
};
|
||||
elGestos.appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
function montarRostos(lista) {
|
||||
elRostos.innerHTML = "";
|
||||
for (const nome of lista) {
|
||||
const b = document.createElement("button");
|
||||
b.textContent = nome;
|
||||
b.dataset.rosto = nome;
|
||||
b.onclick = () => {
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
aparencia.rosto = nome; pintarPrevia(); salvarAparencia("rosto");
|
||||
};
|
||||
elRostos.appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
function montarCores() {
|
||||
elCores.innerHTML = "";
|
||||
for (const hex of PALETA) {
|
||||
const b = document.createElement("button");
|
||||
b.className = "swatch";
|
||||
b.dataset.hex = hex;
|
||||
b.style.background = hex;
|
||||
b.title = hex;
|
||||
b.onclick = () => {
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
aparencia.cor = deHex(hex); pintarPrevia(); salvarAparencia("cor");
|
||||
};
|
||||
elCores.appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
// Botão de Snapshot / Foto
|
||||
const elSnapshot = document.getElementById("bSnapshot");
|
||||
if (elSnapshot) {
|
||||
elSnapshot.onclick = () => {
|
||||
const video = document.getElementById("cameraVideo");
|
||||
const img = document.getElementById("cameraImagem");
|
||||
const canvas = document.createElement("canvas");
|
||||
let ok = false;
|
||||
if (video && !video.hidden && video.videoWidth > 0) {
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
canvas.getContext("2d").drawImage(video, 0, 0);
|
||||
ok = true;
|
||||
} else if (img && !img.hidden && img.naturalWidth > 0) {
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
canvas.getContext("2d").drawImage(img, 0, 0);
|
||||
ok = true;
|
||||
}
|
||||
if (ok) {
|
||||
if (window.RobotAudio) window.RobotAudio.click();
|
||||
const a = document.createElement("a");
|
||||
a.download = "carinha-foto-" + Date.now() + ".png";
|
||||
a.href = canvas.toDataURL("image/png");
|
||||
a.click();
|
||||
estado("Foto salva da câmera!");
|
||||
} else {
|
||||
alert("Ligue a câmera e aguarde o vídeo para tirar uma foto.");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
elCorLivre.oninput = () => { aparencia.cor = deHex(elCorLivre.value); pintarPrevia();
|
||||
salvarAparencia("cor"); };
|
||||
bPadrao.onclick = () => {
|
||||
aparencia = { rosto: PADRAO.rosto, cor: PADRAO.cor.slice() };
|
||||
pintarPrevia();
|
||||
salvarAparencia("rosto").then(() => salvarAparencia("cor"));
|
||||
};
|
||||
bAbracar.onclick = async () => {
|
||||
await pedir("/gesto/acordar");
|
||||
setTimeout(() => pedir("/gesto/feliz"), 900);
|
||||
setTimeout(() => pedir("/gesto/coracao"), 2200);
|
||||
estado("Demo enviada: <b>acordar → feliz → coração</b>");
|
||||
};
|
||||
|
||||
/* Monta as listas a partir do servidor (rostos, gestos, aparencia guardada). */
|
||||
async function iniciar() {
|
||||
const cfg = await pedir("/config");
|
||||
if (cfg) aparencia = Object.assign(PADRAO, cfg);
|
||||
const rostos = (await pedir("/faces")) || { rostos: ["eilik", "carinha", "miudo"] };
|
||||
montarRostos(rostos.rostos || []);
|
||||
const gestos = (await pedir("/gestos")) || { gestos: [] };
|
||||
montarGestos(gestos.gestos || []);
|
||||
montarCores();
|
||||
pintarPrevia();
|
||||
}
|
||||
iniciar();
|
||||
</script>
|
||||
<script src="/painel-controle.js"></script>
|
||||
<script src="/painel-video.js"></script>
|
||||
<script src="/rastreamento-core.js"></script>
|
||||
<script src="/painel-rastreamento.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
(function(root) {
|
||||
'use strict';
|
||||
const valid = p => p && Number.isFinite(p.x) && Number.isFinite(p.y);
|
||||
const clamp = v => Math.max(0,Math.min(1,v));
|
||||
function target(faces, hands, previous) {
|
||||
let candidates = hands.filter(h=>h.length===21 && h.every(valid)).map(h=>{
|
||||
const palm = [0,5,9,13,17].map(i=>h[i]);
|
||||
return {tipo:'mao',x:palm.reduce((s,p)=>s+p.x,0)/5,y:palm.reduce((s,p)=>s+p.y,0)/5};
|
||||
});
|
||||
if (!candidates.length) candidates = faces.filter(f=>valid(f) && Number.isFinite(f.w) && Number.isFinite(f.h) && f.w>0 && f.h>0)
|
||||
.sort((a,b)=>b.w*b.h-a.w*a.h).map(f=>({tipo:'rosto',x:f.x+f.w/2,y:f.y+f.h/2}));
|
||||
if (!candidates.length) return null;
|
||||
if (previous && previous.tipo === candidates[0].tipo) candidates.sort((a,b)=>
|
||||
Math.hypot(a.x-previous.x,a.y-previous.y)-Math.hypot(b.x-previous.x,b.y-previous.y));
|
||||
const t = candidates[0]; t.x=clamp(t.x); t.y=clamp(t.y); return t;
|
||||
}
|
||||
function fit(w,h,vw,vh) {
|
||||
const scale = Math.min(w/vw,h/vh);
|
||||
return {x:Math.max(0,(w-vw*scale)/2),y:Math.max(0,(h-vh*scale)/2),w:vw*scale,h:vh*scale};
|
||||
}
|
||||
function point(p,r) { return {x:r.x+p.x*r.w,y:r.y+p.y*r.h}; }
|
||||
class FreshTarget {
|
||||
constructor() { this.value=null; this.at=-Infinity; }
|
||||
accept(p,now) {
|
||||
if (!valid(p) || !['mao','rosto'].includes(p.tipo) || p.x<0 || p.x>1 || p.y<0 || p.y>1) return false;
|
||||
this.value={tipo:p.tipo,x:p.x,y:p.y,atividade:p.atividade===true}; this.at=now; return true;
|
||||
}
|
||||
get(now) { return now-this.at <= 350 ? this.value : null; }
|
||||
clear() { this.value=null; this.at=-Infinity; }
|
||||
}
|
||||
const api={target,fit,point,FreshTarget}; root.Rastreamento=api;
|
||||
if(typeof module!=='undefined') module.exports=api;
|
||||
})(typeof globalThis!=='undefined'?globalThis:window);
|
||||
+1
-1
@@ -49,6 +49,6 @@
|
||||
window.eilik.receita=render;
|
||||
addEventListener('message',e=>{if(e.origin===location.origin&&e.source===parent&&e.data&&e.data.tipo==='previa-reacao')render(e.data.receita);});
|
||||
if(new URLSearchParams(location.search).get('espelho')==='1'||location.protocol==='file:')return;
|
||||
async function poll(){if(fetching||window.carinhaAtiva===false)return;fetching=true;try{const response=await fetch('/treinamento/expressao',{cache:'no-store',signal:AbortSignal.timeout(2000)});if(response.ok){const d=await response.json();if(d&&d.id!==last&&Date.now()/1000-d.horario<60){last=d.id;render(d.receita);}}}catch(e){}finally{fetching=false;}}
|
||||
async function poll(){if(fetching||window.carinhaAtiva===false||window.carinhaSSE)return;fetching=true;try{const response=await fetch('/treinamento/expressao',{cache:'no-store',signal:AbortSignal.timeout(2000)});if(response.ok){const d=await response.json();if(d&&d.id!==last&&Date.now()/1000-d.horario<60){last=d.id;render(d.receita);}}}catch(e){}finally{fetching=false;}}
|
||||
setInterval(poll,1000);
|
||||
})();
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
@echo off
|
||||
cd /d "%~dp0"
|
||||
set PORTA=%1
|
||||
if "%PORTA%"=="" set PORTA=8100
|
||||
echo Painel: http://localhost:%PORTA%/painel
|
||||
echo Ctrl+C para parar.
|
||||
python kiosk-server.py --porta %PORTA%
|
||||
pause
|
||||
-63
@@ -1,63 +0,0 @@
|
||||
/* ==========================================================================
|
||||
SERVOS PCA9685 · ESTÚDIO DE CALIBRAÇÃO & CONTROLE
|
||||
========================================================================== */
|
||||
|
||||
#cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
#cards article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
background: rgba(10, 18, 30, 0.5);
|
||||
padding: 12px;
|
||||
border-radius: var(--raio-sm);
|
||||
border: 1px solid rgba(56, 82, 110, 0.2);
|
||||
}
|
||||
|
||||
.fields label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--texto-medio);
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
margin: 14px 0 8px;
|
||||
}
|
||||
|
||||
output {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--ciano);
|
||||
text-shadow: 0 0 10px rgba(92, 214, 255, 0.3);
|
||||
}
|
||||
|
||||
#status {
|
||||
min-height: 24px;
|
||||
font-size: 13.5px;
|
||||
color: var(--ciano);
|
||||
}
|
||||
|
||||
.dirty {
|
||||
color: #fbbf24;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
#cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
-15
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Servos · Carinha</title><link rel="stylesheet" href="/dashboard.css"><link rel="stylesheet" href="/servos.css"><script src="/dashboard.js" defer></script>
|
||||
<body>
|
||||
<h1>Teste dos servos</h1>
|
||||
|
||||
<p class="intro">Escolha o canal impresso na placa (0 a 15). Ajuste o pulso e clique em Testar: o sinal dura até 2 segundos. Os limites iniciais são estreitos para começar a calibração. A posição mostrada é o comando, sem medição da posição real.</p>
|
||||
<p class="intro">Ao desligar o sinal, o servo pode perder a força de sustentação. Nesta etapa, teste com o braço apoiado. Não há movimento automático ao abrir esta página.</p>
|
||||
<label style="display:flex;gap:10px;align-items:center;font-size:16px"><input id="live" type="checkbox" style="width:22px;margin:0" disabled>Controle ao vivo — acompanhar o deslizador</label>
|
||||
<p class="intro">No modo ao vivo, arrastar envia posições. O sinal desliga até 2 segundos após o último movimento. Desmarcar o modo ou desligar todos cancela os comandos pendentes.</p>
|
||||
<div class="toolbar"><button id="stop" class="stop">Desligar todos os sinais</button><button id="save" class="primary">Salvar configurações</button><button id="add">Adicionar servo</button><span id="dirty"></span></div>
|
||||
<p id="status" role="status" aria-live="polite">Verificando PCA9685…</p>
|
||||
<div id="cards"></div>
|
||||
<script src="/servos.js"></script>
|
||||
</body></html>
|
||||
@@ -1,98 +0,0 @@
|
||||
'use strict';
|
||||
const cards = document.querySelector('#cards'), statusEl = document.querySelector('#status');
|
||||
let rows = [], available = false, dirty = false, busy = false;
|
||||
const live = document.querySelector('#live');
|
||||
let pending = null, liveRequest = null, liveTimer = null, lastSent = 0;
|
||||
function cancelLive() {
|
||||
live.checked = false; pending = null;
|
||||
clearTimeout(liveTimer); liveTimer = null;
|
||||
}
|
||||
function queueLive(index, pulse) {
|
||||
if (!live.checked || !available || dirty || busy) return;
|
||||
pending = {indice:index,pulso:pulse};
|
||||
pumpLive();
|
||||
}
|
||||
function pumpLive() {
|
||||
if (!pending || liveRequest || liveTimer || !live.checked) return;
|
||||
const wait = 100 - (performance.now() - lastSent);
|
||||
if (wait > 0) {
|
||||
liveTimer = setTimeout(() => {liveTimer = null; pumpLive();}, wait);
|
||||
return;
|
||||
}
|
||||
const command = pending; pending = null; lastSent = performance.now();
|
||||
liveRequest = api('mover', command).then(() => {
|
||||
statusEl.textContent = `Ao vivo: canal ${rows[command.indice].canal}, ${command.pulso} µs. Desligamento 2 s após o último comando.`;
|
||||
}).catch(e => { cancelLive(); statusEl.textContent = e.message; }).finally(() => {
|
||||
liveRequest = null; pumpLive();
|
||||
});
|
||||
}
|
||||
async function stopLive() {
|
||||
cancelLive();
|
||||
if (liveRequest) await liveRequest;
|
||||
await api('parar',{});
|
||||
}
|
||||
async function api(path, data) {
|
||||
const response = await fetch('/servos/' + path, data === undefined ? {} : {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw Error(result.erro || 'Falha no servidor');
|
||||
return result;
|
||||
}
|
||||
function mark() { cancelLive(); dirty = true; document.querySelector('#dirty').textContent = 'Alterações não salvas'; updateButtons(); }
|
||||
function updateButtons() {
|
||||
cards.querySelectorAll('[data-test]').forEach(b => b.disabled = !available || dirty || busy);
|
||||
document.querySelector('#add').disabled = rows.length >= 16 || busy;
|
||||
document.querySelector('#save').disabled = busy;
|
||||
live.disabled = !available || dirty || busy;
|
||||
}
|
||||
function render() {
|
||||
cards.replaceChildren();
|
||||
rows.forEach((row, index) => {
|
||||
const section = document.createElement('section'); section.className = 'card';
|
||||
const h = document.createElement('h2'); h.textContent = row.nome; section.append(h);
|
||||
const fields = document.createElement('div'); fields.className = 'fields';
|
||||
for (const [key, title, min, max] of [['nome','Nome'],['canal','Canal',0,15],['minimo','Mínimo (µs)',1000,2000],['maximo','Máximo (µs)',1000,2000],['centro','Centro (µs)',1000,2000]]) {
|
||||
const label = document.createElement('label'); label.textContent = title;
|
||||
const input = document.createElement('input'); input.type = key === 'nome' ? 'text' : 'number'; input.value = row[key];
|
||||
if (key === 'nome') input.maxLength = 40; else { input.min = min; input.max = max; input.step = 1; }
|
||||
input.addEventListener('input', () => { row[key] = key === 'nome' ? input.value : Number(input.value); mark(); if (key === 'nome') h.textContent = input.value; });
|
||||
label.append(input); fields.append(label);
|
||||
}
|
||||
section.append(fields);
|
||||
const label = document.createElement('label'); label.textContent = 'Pulso de teste';
|
||||
const range = document.createElement('input'); range.type = 'range'; range.min = row.minimo; range.max = row.maximo; range.step = 5; range.value = row.centro;
|
||||
const out = document.createElement('output'); out.textContent = range.value + ' µs';
|
||||
range.addEventListener('input', () => {out.textContent = range.value + ' µs'; queueLive(index, Number(range.value));}); label.append(range, out); section.append(label);
|
||||
const actions = document.createElement('div'); actions.className = 'actions';
|
||||
for (const [text, center] of [['Testar por 2 s',false],['Testar centro',true]]) {
|
||||
const button = document.createElement('button'); button.textContent = text; button.dataset.test = '1';
|
||||
button.addEventListener('click', () => run(async () => { await api('mover',{indice:index,pulso:center ? row.centro : Number(range.value)}); statusEl.textContent = `${row.nome}: comando enviado ao canal ${row.canal}. Sinal será desligado em até 2 s.`; }));
|
||||
actions.append(button);
|
||||
}
|
||||
section.append(actions); cards.append(section);
|
||||
});
|
||||
updateButtons();
|
||||
}
|
||||
async function run(action) {
|
||||
busy = true; updateButtons();
|
||||
try { await action(); } catch (e) { statusEl.textContent = e.message; }
|
||||
finally { busy = false; updateButtons(); }
|
||||
}
|
||||
document.querySelector('#stop').onclick = () => run(async () => { await stopLive(); statusEl.textContent = 'Sinais desligados em todos os canais.'; });
|
||||
live.onchange = () => {
|
||||
if (!live.checked) run(async () => {await stopLive(); statusEl.textContent = 'Controle ao vivo desligado. Sinais desligados.';});
|
||||
else statusEl.textContent = 'Controle ao vivo ativado. Arraste um deslizador para mover.';
|
||||
};
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden && live.checked) run(stopLive);
|
||||
});
|
||||
document.querySelector('#save').onclick = () => run(async () => {
|
||||
cancelLive(); if (liveRequest) await liveRequest;
|
||||
const data = await api('config',{servos:rows}); rows = data.servos; dirty = false;
|
||||
document.querySelector('#dirty').textContent = ''; render(); statusEl.textContent = 'Configurações salvas. Nenhum movimento enviado.';
|
||||
});
|
||||
document.querySelector('#add').onclick = () => {
|
||||
const channel = Array.from({length:16},(_,i)=>i).find(i=>!rows.some(r=>r.canal===i));
|
||||
if (channel === undefined) return;
|
||||
rows.push({nome:`Servo ${rows.length+1}`,canal:channel,minimo:1400,maximo:1600,centro:1500}); mark(); render();
|
||||
};
|
||||
run(async () => { const data = await api('status'); rows = data.servos; available = data.disponivel; render(); statusEl.textContent = available ? `PCA9685 disponível. ${data.ativos.length ? 'Teste em andamento; desligamento automático em até 2 s.' : 'Sem testes em andamento.'}` : 'Controle indisponível neste servidor. Abra a aba no Orange Pi. ' + data.erro; });
|
||||
@@ -88,6 +88,15 @@ class ControleServos:
|
||||
with self.lock:
|
||||
return dict(disponivel=self.hw is not None, erro=self.error, ativos=sorted(self.active),
|
||||
dono=self.dono, travado=self.travado)
|
||||
def ligar(self, canais_prazos):
|
||||
"""Registra canais energizados até o prazo; avisa o painel quando algum canal liga."""
|
||||
with self.lock:
|
||||
novos = False
|
||||
for canal, prazo in canais_prazos:
|
||||
novos = novos or canal not in self.active
|
||||
self.active[canal] = prazo
|
||||
if novos:
|
||||
self.publicar('motores', self.motores())
|
||||
def reservar(self, nome):
|
||||
"""Braço e diagnóstico usam o mesmo PCA9685 com limites diferentes: um de cada vez."""
|
||||
with self.lock:
|
||||
@@ -110,7 +119,7 @@ class ControleServos:
|
||||
if self.hw is None: raise OSError('PCA9685 indisponível neste servidor')
|
||||
self.reservar('diagnostico')
|
||||
self.hw.pulse(row['canal'], pulse)
|
||||
self.active[row['canal']] = time.monotonic() + 2
|
||||
self.ligar([(row['canal'], time.monotonic() + 2)])
|
||||
return self.status()
|
||||
def expire(self, now):
|
||||
with self.lock:
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
from playwright.sync_api import sync_playwright
|
||||
import json
|
||||
with sync_playwright() as p:
|
||||
b=p.chromium.launch(headless=True); page=b.new_page(viewport={'width':1400,'height':1000})
|
||||
cfg=dict(disponivel=True,erro='',calibracao=[dict(canal=i,minimo=1400,maximo=1600) for i in range(8)],posturas=[],articulacoes=[dict(nome=n,canal=c) for n,c in zip(['Garra','Punho 1','Punho 2','Braço superior','Braço inferior','Antebraço','Base'],[0,1,2,3,4,5,7])])
|
||||
calls=[]; errors=[]
|
||||
def handle(route):
|
||||
if route.request.method=='POST':
|
||||
data=route.request.post_data_json; calls.append((route.request.url,data))
|
||||
if route.request.url.endswith('/config'): cfg.update(data)
|
||||
route.fulfill(content_type='application/json',body=json.dumps(cfg))
|
||||
page.route('**/braco/status',handle); page.route('**/braco/config',handle); page.route('**/braco/mover',handle); page.route('**/braco/parar',handle)
|
||||
page.on('pageerror',lambda e:errors.append(str(e)))
|
||||
page.goto('http://192.168.1.35:8100/braco');page.wait_for_selector('#joint6')
|
||||
assert page.locator('#sliders input').count()==7
|
||||
assert not page.locator('#enable').is_checked()
|
||||
page.locator('#joint1').evaluate("e=>{e.value=95;e.dispatchEvent(new Event('input'))}");page.wait_for_timeout(200)
|
||||
assert calls==[]
|
||||
page.locator('#enable').check();assert calls==[]
|
||||
page.locator('#joint1').evaluate("e=>{e.value=85;e.dispatchEvent(new Event('input'))}");page.wait_for_timeout(650)
|
||||
moves=[d for u,d in calls if u.endswith('/mover')]
|
||||
assert moves and moves[-1]['angulos'][1]==85,moves
|
||||
assert len(moves[0]['angulos'])==7
|
||||
page.locator('#stop').click();page.wait_for_timeout(200)
|
||||
assert calls[-1][0].endswith('/parar');assert not page.locator('#enable').is_checked()
|
||||
page.on('dialog',lambda d:d.accept('Teste centro'))
|
||||
page.locator('#savePose').click();page.wait_for_timeout(250)
|
||||
assert '1 posturas' in page.locator('#count').inner_text()
|
||||
page.locator('#enable').check();page.locator('#play').click();page.wait_for_timeout(1100)
|
||||
assert 'Sequência concluída' in page.locator('#console').inner_text()
|
||||
page.locator('#stop').click();page.wait_for_timeout(200)
|
||||
page.screenshot(path='C:/Users/JullioPC/Documents/Codex/2026-10-04/o/outputs/carinha-pc/docs/braco-painel.png',full_page=True)
|
||||
page.set_viewport_size({'width':390,'height':844})
|
||||
assert page.evaluate('document.documentElement.scrollWidth<=innerWidth')
|
||||
assert not errors,errors
|
||||
print('OK: sete sliders, opt-in, velocidade, parar, salvar/reproduzir, mobile; comandos simulados')
|
||||
b.close()
|
||||
+10
-7
@@ -18,6 +18,7 @@ def main():
|
||||
kiosk.ARQUIVO_APARENCIA = str(Path(tmp) / 'aparencia.json')
|
||||
server = kiosk.Servidor(('127.0.0.1', 0), kiosk.Handler)
|
||||
server.controle = kiosk.ControlePC(Path(tmp) / 'app.json')
|
||||
kiosk.ligar_eventos(server) # o rosto recebe ajustes e ordens por SSE
|
||||
thread = threading.Thread(target=server.serve_forever, daemon=True)
|
||||
thread.start()
|
||||
try:
|
||||
@@ -63,21 +64,23 @@ def browser_test(base):
|
||||
panel = browser.new_page(viewport={'width': 1440, 'height': 1000})
|
||||
errors = []
|
||||
panel.on('pageerror', lambda error: errors.append(str(error) + '\n' + error.stack))
|
||||
panel.goto(base + '/painel')
|
||||
panel.wait_for_selector('#gestos button')
|
||||
panel.locator('#ajuste-sensorMic').uncheck()
|
||||
# Painel novo (web/dist): ajustes do celular e transmissão.
|
||||
panel.goto(base + '/#/ajustes')
|
||||
alternar = lambda nome: panel.get_by_role('switch', name=nome).locator('xpath=..').click()
|
||||
alternar('Microfone Só o nível')
|
||||
panel.wait_for_timeout(400)
|
||||
assert panel.request.get(base + '/app/config').json()['sensorMic'] is False
|
||||
panel.locator('#ajuste-cameraSono').check()
|
||||
alternar('Câmera durante o sono')
|
||||
panel.wait_for_timeout(400)
|
||||
panel.locator('#ajuste-cameraLado').select_option('environment')
|
||||
panel.get_by_role('combobox', name='Câmera').select_option('environment')
|
||||
panel.wait_for_timeout(400)
|
||||
c = panel.request.get(base + '/app/config').json()
|
||||
assert c['cameraSono'] is True and c['cameraLado'] == 'environment'
|
||||
panel.get_by_role('button', name='Ligar câmera').click()
|
||||
panel.get_by_role('link', name='Ao vivo').first.click()
|
||||
alternar('Transmitir câmera do celular')
|
||||
panel.wait_for_timeout(500)
|
||||
assert panel.request.get(base + '/app/config').json()['preview'] is True
|
||||
panel.get_by_role('button', name='Desligar câmera').click()
|
||||
alternar('Transmitir câmera do celular')
|
||||
panel.wait_for_timeout(500)
|
||||
assert panel.request.get(base + '/app/config').json()['preview'] is False
|
||||
assert not errors, errors
|
||||
|
||||
@@ -86,21 +86,13 @@ class ControleTest(unittest.TestCase):
|
||||
self.assertTrue(json.loads(body)['online'])
|
||||
self.assertEqual(json.loads(body)['estado']['rosto'], 'miudo')
|
||||
|
||||
def test_frame_is_hidden_when_disabled_and_after_expiry(self):
|
||||
jpeg = b'\xff\xd8fixture\xff\xd9'
|
||||
self.assertEqual(self.request('/camera/frame', jpeg, 'image/jpeg')[0], 409)
|
||||
def test_legacy_camera_and_adb_routes_are_gone(self):
|
||||
self.request('/app/config', {'preview': True})
|
||||
self.assertEqual(self.request('/camera/frame', jpeg, 'image/jpeg')[0], 200)
|
||||
self.assertEqual(self.request('/camera/frame'), (200, jpeg))
|
||||
self.server.controle.frame_at -= 4
|
||||
self.assertEqual(self.request('/camera/frame')[0], 204)
|
||||
self.request('/camera/frame', jpeg, 'image/jpeg')
|
||||
self.request('/app/config', {'preview': False})
|
||||
self.assertEqual(self.request('/camera/frame')[0], 204)
|
||||
self.assertEqual(self.request('/camera/frame', b'\xff\xd8x\xff\xd9', 'image/jpeg')[0], 404)
|
||||
self.assertEqual(self.request('/camera/frame')[0], 404)
|
||||
self.assertEqual(self.request('/app/connect', {'ip': '127.0.0.1'})[0], 404)
|
||||
|
||||
def test_rejects_non_jpeg_and_unknown_settings(self):
|
||||
self.request('/app/config', {'preview': True})
|
||||
self.assertEqual(self.request('/camera/frame', b'hello', 'image/jpeg')[0], 400)
|
||||
self.assertEqual(self.request('/app/config', {'preview': 'false'})[0], 400)
|
||||
self.assertEqual(self.request('/app/config', {'extra': 1})[0], 400)
|
||||
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
from playwright.sync_api import sync_playwright
|
||||
import json
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True)
|
||||
page = browser.new_page()
|
||||
calls = []
|
||||
rows = [dict(nome=f'Servo {i+1}',canal=i,minimo=1400,maximo=1600,centro=1500) for i in range(6)]
|
||||
def handle(route):
|
||||
if route.request.method == 'POST': calls.append((route.request.url, route.request.post_data_json))
|
||||
route.fulfill(content_type='application/json',body=json.dumps(dict(disponivel=True,erro='',servos=rows,ativos=[])))
|
||||
page.route('**/servos/status', handle)
|
||||
page.route('**/servos/mover', handle)
|
||||
page.route('**/servos/parar', handle)
|
||||
page.goto('http://192.168.1.35:8100/servos')
|
||||
page.wait_for_selector('.card')
|
||||
live = page.locator('#live')
|
||||
assert live.count() == 1, 'Modo ao vivo ausente'
|
||||
assert not live.is_checked()
|
||||
slider = page.locator('input[type=range]').first
|
||||
slider.evaluate("e=>{e.value=1450;e.dispatchEvent(new Event('input'))}")
|
||||
page.wait_for_timeout(200)
|
||||
assert calls == []
|
||||
live.check()
|
||||
assert calls == [], 'Ativar modo não deve mover'
|
||||
slider.evaluate("e=>{for(let i=0;i<30;i++){e.value=1400+(i%20)*5;e.dispatchEvent(new Event('input'))}e.value=1600;e.dispatchEvent(new Event('input'))}")
|
||||
page.wait_for_timeout(500)
|
||||
moves = [data for url,data in calls if url.endswith('/mover')]
|
||||
assert 1 <= len(moves) <= 6, len(moves)
|
||||
assert moves[-1] == dict(indice=0,pulso=1600)
|
||||
page.locator('#stop').click()
|
||||
page.wait_for_timeout(200)
|
||||
assert not live.is_checked()
|
||||
assert calls[-1][0].endswith('/parar')
|
||||
count = len(calls)
|
||||
slider.evaluate("e=>{e.value=1400;e.dispatchEvent(new Event('input'))}")
|
||||
page.wait_for_timeout(200)
|
||||
assert len(calls) == count
|
||||
page.locator('input[type=text]').first.fill('Teste')
|
||||
assert live.is_disabled()
|
||||
print('OK: live opt-in, limite de envio, último valor, parada cancela fila, alterações bloqueiam; hardware simulado')
|
||||
browser.close()
|
||||
@@ -1,9 +0,0 @@
|
||||
const assert=require('node:assert/strict');
|
||||
const {sequencias}=require('../movimentos-core.js');
|
||||
const ranges=Array.from({length:7},()=>[81,99]);
|
||||
const moves=sequencias(ranges);
|
||||
assert.equal(moves.length,5);
|
||||
for(const move of moves){assert.ok(move.passos.length>=3);for(const step of move.passos){assert.equal(step.length,7);step.forEach(v=>assert.ok(v>=81&&v<=99));}}
|
||||
assert.ok(moves.some(m=>m.passos.some(s=>s.filter(v=>v!==90).length>=3)));
|
||||
assert.deepEqual(moves[0].passos.at(-1),Array(7).fill(90));
|
||||
console.log('OK: cinco sequências, limites e coordenação');
|
||||
@@ -0,0 +1,203 @@
|
||||
"""Painel novo (web/dist) contra o servidor real: token, SSE, gestos, paleta, E-Stop, ajustes e celular.
|
||||
|
||||
Requer `npm run build` em web/. Uso: python tests/test_painel_web_browser.py [pasta-para-capturas]
|
||||
"""
|
||||
from playwright.sync_api import sync_playwright, expect
|
||||
from pathlib import Path
|
||||
import importlib.util
|
||||
import os
|
||||
import sys
|
||||
import tempfile
|
||||
import threading
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
sys.path.insert(0, str(ROOT))
|
||||
os.chdir(ROOT)
|
||||
spec = importlib.util.spec_from_file_location('kiosk_web', ROOT / 'kiosk-server.py')
|
||||
kiosk = importlib.util.module_from_spec(spec)
|
||||
spec.loader.exec_module(kiosk)
|
||||
from braco import Braco
|
||||
from cerebro import Cerebro
|
||||
from conversa import Conversa
|
||||
from servos import ControleServos
|
||||
from treinamento import Treinamento
|
||||
|
||||
TOKEN = 'token-de-teste-123'
|
||||
|
||||
|
||||
class HW:
|
||||
def __init__(self): self.calls = []
|
||||
def pulse(self, ch, us): self.calls.append((ch, us))
|
||||
def off(self, ch): self.calls.append((ch, None))
|
||||
|
||||
|
||||
def main(capturas=None):
|
||||
assert (ROOT / 'web/dist/index.html').is_file(), 'Rode npm run build em web/ primeiro'
|
||||
with tempfile.TemporaryDirectory() as tmp:
|
||||
tmp = Path(tmp)
|
||||
kiosk.ARQUIVO_APARENCIA = str(tmp / 'aparencia.json')
|
||||
server = kiosk.Servidor(('127.0.0.1', 0), kiosk.Handler)
|
||||
server.token = TOKEN
|
||||
server.controle = kiosk.ControlePC(tmp / 'app.json')
|
||||
server.servos = ControleServos(tmp / 'servos.json', HW())
|
||||
server.braco = Braco(tmp / 'braco.json', server.servos)
|
||||
server.cerebro = Cerebro(tmp / 'ia.json', server.controle, kiosk.enfileirar)
|
||||
server.conversa = Conversa(tmp / 'memoria.db', server.cerebro)
|
||||
server.treinamento = Treinamento(tmp / 'treinamento.db', iniciar=False)
|
||||
server.conversa.treinamento = server.treinamento
|
||||
kiosk.ligar_eventos(server)
|
||||
thread = threading.Thread(target=server.serve_forever, daemon=True)
|
||||
thread.start()
|
||||
try:
|
||||
testar('http://127.0.0.1:%d' % server.server_port, server, capturas)
|
||||
finally:
|
||||
kiosk.EVENTOS.fechar()
|
||||
server.shutdown()
|
||||
server.server_close()
|
||||
server.servos.close()
|
||||
|
||||
|
||||
def testar(base, server, capturas):
|
||||
auth = {'Authorization': 'Bearer ' + TOKEN}
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch()
|
||||
page = browser.new_page(viewport={'width': 1440, 'height': 960})
|
||||
erros = []
|
||||
page.on('pageerror', lambda e: erros.append(str(e)))
|
||||
page.goto(base + '/')
|
||||
|
||||
# 1. token
|
||||
expect(page.get_by_role('heading', name='Token do Carinha')).to_be_visible()
|
||||
page.get_by_label('Token').fill(TOKEN)
|
||||
page.get_by_role('button', name='Entrar').click()
|
||||
expect(page.get_by_text('Servidor', exact=True)).to_be_visible(timeout=5000)
|
||||
|
||||
# 2. telemetria do celular chega por SSE
|
||||
page.request.post(base + '/app/status', headers=auth, data={'dormindo': False, 'bateria': 0.8,
|
||||
'microfone_ativo': True, 'microfone': 0.3})
|
||||
expect(page.get_by_text('Celular online · 80%')).to_be_visible(timeout=5000)
|
||||
|
||||
# 3. gesto pelo dock
|
||||
kiosk.FILA.limpar()
|
||||
page.get_by_role('button', name='Feliz').first.click()
|
||||
expect(page.get_by_text('Expressão: feliz')).to_be_visible(timeout=5000)
|
||||
assert kiosk.FILA.ordens() == ['feliz'], kiosk.FILA.ordens()
|
||||
|
||||
# 4. atalho numérico e paleta
|
||||
page.locator('body').click(position={'x': 5, 'y': 900})
|
||||
page.keyboard.press('2')
|
||||
page.wait_for_timeout(300)
|
||||
assert kiosk.FILA.ordens()[-1] == 'coracao', kiosk.FILA.ordens()
|
||||
page.keyboard.press('Control+k')
|
||||
page.get_by_label('Buscar comando').fill('surpreso')
|
||||
page.keyboard.press('Enter')
|
||||
page.wait_for_timeout(300)
|
||||
assert kiosk.FILA.ordens()[-1] == 'surpreso', kiosk.FILA.ordens()
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / 'ao-vivo.png'), full_page=True)
|
||||
|
||||
# 5. E-Stop real
|
||||
page.get_by_role('button', name='Parar tudo').click()
|
||||
expect(page.get_by_role('button', name='PARADO · Rearmar')).to_be_visible(timeout=5000)
|
||||
assert kiosk.ESTOP['ativo'] and server.servos.travado
|
||||
page.get_by_role('button', name='PARADO · Rearmar').click()
|
||||
expect(page.get_by_role('button', name='Parar tudo')).to_be_visible(timeout=5000)
|
||||
assert not server.servos.travado
|
||||
|
||||
# 6. ajustes salvam sem travar
|
||||
page.get_by_role('link', name='Ajustes').first.click()
|
||||
page.get_by_label('Buscar ajuste').fill('boca')
|
||||
boca = page.get_by_role('switch', name='Mostrar boca')
|
||||
assert boca.is_checked()
|
||||
boca.locator('xpath=..').click()
|
||||
page.wait_for_timeout(500)
|
||||
assert server.controle.config['boca'] is False
|
||||
if capturas:
|
||||
page.get_by_label('Buscar ajuste').fill('')
|
||||
page.screenshot(path=str(Path(capturas) / 'ajustes.png'), full_page=True)
|
||||
|
||||
# 6b. conversa: pergunta de hora é respondida pelo relógio (sem IA) e chega por SSE
|
||||
page.get_by_role('link', name='Conversa').first.click()
|
||||
page.get_by_label('Mensagem').fill('Que horas são?')
|
||||
page.get_by_role('button', name='Enviar').click()
|
||||
expect(page.get_by_text('no horário de São Paulo')).to_be_visible(timeout=5000)
|
||||
page.get_by_label('Nova lembrança').fill('Meu nome é Júlio')
|
||||
page.get_by_role('button', name='Adicionar').click()
|
||||
expect(page.get_by_text('Meu nome é Júlio')).to_be_visible(timeout=5000)
|
||||
page.get_by_role('tab', name='Rotina e preferências').click()
|
||||
page.get_by_label('Nova rotina').fill('Treino às 7h')
|
||||
page.get_by_role('button', name='Adicionar').click()
|
||||
expect(page.get_by_text('Treino às 7h')).to_be_visible(timeout=5000)
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / 'conversa.png'), full_page=True)
|
||||
|
||||
# 6c. reações: criar emoji, mostrar no celular, excluir e desfazer pelo toast
|
||||
page.get_by_role('link', name='Reações').first.click()
|
||||
page.get_by_role('button', name='Novo emoji').click()
|
||||
page.get_by_label('Nome').fill('Ideia brilhante')
|
||||
page.get_by_label('Quando usar').fill('Quando tiver uma ideia')
|
||||
page.get_by_role('radio', name='🚀').click()
|
||||
page.get_by_role('button', name='Salvar').click()
|
||||
cartao = page.locator('li.reacao', has_text='Ideia brilhante')
|
||||
expect(cartao).to_be_visible(timeout=5000)
|
||||
cartao.get_by_role('button', name='Mostrar').click()
|
||||
page.wait_for_timeout(400)
|
||||
assert server.treinamento.expressao['receita']['nome'] == 'Ideia brilhante'
|
||||
cartao.get_by_role('button', name='Excluir').click()
|
||||
expect(cartao).to_have_count(0, timeout=5000)
|
||||
page.get_by_role('button', name='Desfazer').last.click()
|
||||
expect(page.locator('li.reacao', has_text='Ideia brilhante')).to_be_visible(timeout=5000)
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / 'reacoes.png'), full_page=True)
|
||||
|
||||
# 6d. braço: opt-in, homem-morto e desligamento pelo prazo ao soltar
|
||||
hw = server.servos.hw
|
||||
page.get_by_role('link', name='Movimento').first.click()
|
||||
segurar = page.get_by_role('button', name='Segure para ir ao alvo')
|
||||
expect(segurar).to_be_disabled()
|
||||
page.get_by_role('switch', name='Ativar movimento físico').locator('xpath=..').click()
|
||||
expect(segurar).to_be_enabled()
|
||||
hw.calls.clear()
|
||||
segurar.hover()
|
||||
page.mouse.down()
|
||||
page.wait_for_timeout(700)
|
||||
assert server.servos.active, 'motores deveriam estar ligados enquanto segura'
|
||||
expect(page.get_by_text('Motores ligados')).to_be_visible(timeout=3000)
|
||||
page.mouse.up()
|
||||
page.wait_for_timeout(900)
|
||||
assert not server.servos.active, 'motores deveriam desligar sozinhos após soltar'
|
||||
assert any(us for _, us in hw.calls), hw.calls
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / 'movimento.png'), full_page=True)
|
||||
# E-Stop desativa o movimento físico na hora
|
||||
page.get_by_role('button', name='Parar tudo').click()
|
||||
expect(page.get_by_role('switch', name='Ativar movimento físico')).to_be_disabled(timeout=3000)
|
||||
expect(segurar).to_be_disabled()
|
||||
page.get_by_role('button', name='PARADO · Rearmar').click()
|
||||
expect(page.get_by_role('button', name='Parar tudo')).to_be_visible(timeout=3000)
|
||||
|
||||
# 7. celular: barra inferior e nada de rolagem horizontal
|
||||
page.set_viewport_size({'width': 400, 'height': 860})
|
||||
page.get_by_role('link', name='Ao vivo').click()
|
||||
page.wait_for_timeout(300)
|
||||
largura = page.evaluate('document.scrollingElement.scrollWidth')
|
||||
assert largura <= 400, 'rolagem horizontal: %s' % largura
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / 'celular.png'), full_page=True)
|
||||
|
||||
# 8. tema claro
|
||||
page.set_viewport_size({'width': 1280, 'height': 900})
|
||||
inicial = page.evaluate("document.documentElement.dataset.theme")
|
||||
outro = 'light' if inicial == 'dark' else 'dark'
|
||||
page.get_by_role('button', name='Usar tema ' + ('claro' if outro == 'light' else 'escuro')).click()
|
||||
assert page.evaluate("document.documentElement.dataset.theme") == outro
|
||||
if capturas:
|
||||
page.screenshot(path=str(Path(capturas) / ('tema-' + outro + '.png')))
|
||||
|
||||
assert not erros, erros
|
||||
browser.close()
|
||||
print('OK: token, SSE, dock 1-9, paleta, E-Stop, ajustes otimistas, conversa, memória, reações com desfazer, braço com homem-morto, celular 400px, tema')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main(sys.argv[1] if len(sys.argv) > 1 else None)
|
||||
@@ -1,19 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
let R;
|
||||
try { R = require('../rastreamento-core.js'); } catch(e) { assert.fail('Rastreamento ausente'); }
|
||||
const faces = [{x:.2,y:.1,w:.3,h:.4,score:.9}];
|
||||
const hands = [Array.from({length:21},()=>({x:.8,y:.6}))];
|
||||
assert.equal(R.target(faces,hands).tipo,'mao');
|
||||
assert.equal(R.target(faces,[]).tipo,'rosto');
|
||||
assert.equal(R.target([],[]),null);
|
||||
assert.equal(R.target([{x:NaN,y:0,w:1,h:1}],[]),null);
|
||||
const rect = R.fit(1000,500,640,480);
|
||||
assert.ok(Math.abs(rect.x - (1000/2 - (500*640/480)/2)) < 1e-9);
|
||||
assert.equal(rect.y,0);
|
||||
assert.equal(R.point({x:0,y:0},rect).x,rect.x);
|
||||
const gate = new R.FreshTarget();
|
||||
gate.accept({tipo:'mao',x:.8,y:.5,atividade:true},100);
|
||||
assert.equal(gate.get(200).x,.8);
|
||||
assert.equal(gate.get(451),null,'Alvo antigo precisa expirar');
|
||||
assert.equal(gate.accept({x:Infinity,y:0},500),false);
|
||||
console.log('Rastreamento: prioridade, coordenadas, validação e expiração OK');
|
||||
+31
-19
@@ -1,4 +1,6 @@
|
||||
"""Real WebRTC sender and panel in Chromium, using a synthetic camera."""
|
||||
"""WebRTC real entre o transmissor do app e o painel novo (web/dist), com câmera sintética.
|
||||
|
||||
Requer `npm run build` em web/."""
|
||||
import importlib.util
|
||||
from pathlib import Path
|
||||
import sys
|
||||
@@ -27,6 +29,7 @@ def main():
|
||||
server = kiosk.Servidor(('127.0.0.1', 0), Handler)
|
||||
server.controle = kiosk.ControlePC(Path(tmp) / 'config.json')
|
||||
server.controle.atualizar({'preview': True,'rastrearRosto':False,'rastrearMaos':False})
|
||||
kiosk.ligar_eventos(server) # telemetria e ajustes chegam ao painel por SSE
|
||||
thread = threading.Thread(target=server.serve_forever, daemon=True)
|
||||
thread.start()
|
||||
base = 'http://127.0.0.1:' + str(server.server_port)
|
||||
@@ -62,40 +65,49 @@ def main():
|
||||
},200);
|
||||
}""")
|
||||
sender.request.post(base + '/app/status', data={'rosto':'carinha'})
|
||||
# Como o celular real, manda batimento a cada 1 s (senão o painel o considera offline).
|
||||
sender.evaluate("""() => setInterval(() => fetch('/app/status',{method:'POST',
|
||||
headers:{'Content-Type':'application/json'},body:JSON.stringify({rosto:'carinha'})}), 1000)""")
|
||||
panel = context.new_page()
|
||||
panel.on('pageerror', lambda e: errors.append(str(e)))
|
||||
panel.goto(base + '/painel')
|
||||
panel.wait_for_function("document.getElementById('cameraVideo').videoWidth > 0", timeout=20000)
|
||||
first = panel.evaluate("document.getElementById('cameraVideo').getVideoPlaybackQuality().totalVideoFrames")
|
||||
panel.goto(base + '/')
|
||||
video = "document.querySelector('.camera video')"
|
||||
panel.wait_for_function(video + ".videoWidth > 0", timeout=20000)
|
||||
first = panel.evaluate(video + ".getVideoPlaybackQuality().totalVideoFrames")
|
||||
panel.wait_for_timeout(2200)
|
||||
count = panel.evaluate("document.getElementById('cameraVideo').getVideoPlaybackQuality().totalVideoFrames") - first
|
||||
count = panel.evaluate(video + ".getVideoPlaybackQuality().totalVideoFrames") - first
|
||||
assert count >= 45, 'Vídeo não está fluido: %s quadros em 2.2 s' % count
|
||||
assert panel.locator('#cameraVideo').is_visible()
|
||||
assert 'fps' in panel.locator('#videoQualidade').inner_text()
|
||||
assert panel.locator('.camera video').is_visible()
|
||||
qualidade = panel.locator('.camera .rodape .mono').inner_text()
|
||||
assert 'fps' in qualidade, qualidade
|
||||
assert not errors, errors
|
||||
print('Vídeo WebRTC real: %s quadros em 2.2 s; %s' % (count, panel.locator('#videoQualidade').inner_text()))
|
||||
print('Vídeo WebRTC real: %s quadros em 2.2 s; %s' % (count, qualidade))
|
||||
# Canal de rastreamento (DataChannel) chega ao transmissor.
|
||||
sender.request.post(base+'/app/config',data={'rastrearMaos':True})
|
||||
sender.wait_for_function('config.rastrearMaos === true')
|
||||
panel.wait_for_function('CarinhaVideo.rastreamentoConectado()')
|
||||
panel.evaluate("CarinhaVideo.rastrear({tipo:'mao',x:.8,y:.3,atividade:true})")
|
||||
panel.wait_for_function('window.carinhaVideo?.rastreamentoConectado')
|
||||
panel.wait_for_timeout(1000) # sem vendor/ o rastreador falha e manda null uma vez
|
||||
panel.evaluate("carinhaVideo.rastrear({tipo:'mao',x:.8,y:.3,atividade:true})")
|
||||
sender.wait_for_function("window.testAlvo?.tipo === 'mao' && testAlvo.x === .8")
|
||||
panel.evaluate('CarinhaVideo.rastrear(null)')
|
||||
panel.evaluate('carinhaVideo.rastrear(null)')
|
||||
sender.wait_for_function('window.testAlvo === null')
|
||||
sender.request.post(base+'/app/config',data={'rastrearMaos':False})
|
||||
panel.locator('#ajuste-videoResolucao').select_option('480')
|
||||
# Ajustes chegam ao celular; o painel acompanha por SSE.
|
||||
sender.request.post(base+'/app/config',data={'videoResolucao':'480'})
|
||||
sender.wait_for_function("stream && stream.getVideoTracks()[0].getSettings().height === 480", timeout=10000)
|
||||
panel.locator('#ajuste-videoFPS').select_option('240')
|
||||
sender.request.post(base+'/app/config',data={'videoFPS':240})
|
||||
sender.wait_for_function("aviso.includes('indisponível')", timeout=10000)
|
||||
assert sender.evaluate('stream.getVideoTracks()[0].readyState') == 'live'
|
||||
panel.locator('#ajuste-sensorCamera').uncheck()
|
||||
panel.wait_for_function("document.getElementById('cameraVideo').srcObject === null", timeout=10000)
|
||||
sender.request.post(base+'/app/config',data={'sensorCamera':False})
|
||||
panel.wait_for_function(video + ".srcObject === null", timeout=10000)
|
||||
sender.wait_for_function('stream === null', timeout=10000)
|
||||
panel.locator('#ajuste-sensorCamera').check()
|
||||
panel.wait_for_function("document.getElementById('cameraVideo').videoWidth > 0 && document.getElementById('cameraVideo').srcObject !== null", timeout=15000)
|
||||
sender.request.post(base+'/app/config',data={'sensorCamera':True})
|
||||
panel.wait_for_function(video + ".videoWidth > 0 && " + video + ".srcObject !== null", timeout=15000)
|
||||
assert not errors, errors
|
||||
panel.get_by_role('button', name='Desligar câmera').click()
|
||||
# Desligar pela chave da tela Ao vivo.
|
||||
panel.get_by_role('switch', name='Transmitir câmera do celular').locator('xpath=..').click()
|
||||
panel.wait_for_timeout(1400)
|
||||
assert panel.evaluate("document.getElementById('cameraVideo').srcObject === null")
|
||||
assert panel.evaluate(video + ".srcObject === null")
|
||||
preview = context.new_page()
|
||||
preview.on('pageerror', lambda e: errors.append(str(e)))
|
||||
preview.goto(base + '/camera.html?lado=user&resolucao=480&fps=30')
|
||||
|
||||
@@ -215,6 +215,14 @@ class BracoMovimentoTest(unittest.TestCase):
|
||||
self.assertEqual(self.servos.active, {})
|
||||
self.assertIsNone(self.servos.dono)
|
||||
|
||||
def test_renovar_no_alvo_informa_que_chegou(self):
|
||||
self.arm.move([90] * 7)
|
||||
self.hw.calls.clear()
|
||||
r = self.arm.move([90] * 7, velocidade=60, ttl_ms=400)
|
||||
self.assertFalse(r['movendo'])
|
||||
self.assertIsNone(self.arm.alvo)
|
||||
self.assertEqual(len(self.hw.calls), 8) # reenergiza os 8 canais com o novo prazo
|
||||
|
||||
def test_parametros_invalidos(self):
|
||||
for kwargs in (dict(velocidade=1000), dict(velocidade=True), dict(ttl_ms=50), dict(ttl_ms=5000)):
|
||||
with self.assertRaises(ValueError):
|
||||
|
||||
@@ -35,7 +35,7 @@ def main():
|
||||
if not r.request.url.startswith(base): external.append(r.request.url);r.abort()
|
||||
else:r.continue_()
|
||||
page.route('**/*',route)
|
||||
page.goto(base+'/painel')
|
||||
page.goto(base+'/') # painel novo: nada pode sair para a internet
|
||||
results=page.evaluate("""async () => {
|
||||
const worker=new Worker('/rastreador-worker.js');
|
||||
const send=msg=>new Promise((resolve,reject)=>{
|
||||
@@ -56,36 +56,10 @@ def main():
|
||||
assert len(results['hand']['hands'][0])==21
|
||||
print('Inferencia real: %s rosto(s), %s mao(s); %.1f/%.1f ms' % (
|
||||
len(results['face']['faces']),len(results['hand']['hands']),results['face']['ms'],results['hand']['ms']))
|
||||
# Feed the same real worker into the panel, using a local canvas stream.
|
||||
page.request.post(base+'/app/config',data={'preview':True})
|
||||
page.request.post(base+'/app/status',data={'rosto':'carinha','dormindo':False})
|
||||
page.evaluate("""async () => {
|
||||
const image=await createImageBitmap(await (await fetch('/test-hands')).blob());
|
||||
const c=document.createElement('canvas');c.width=640;c.height=Math.round(640*image.height/image.width);
|
||||
const ctx=c.getContext('2d');ctx.drawImage(image,0,0,c.width,c.height);image.close();
|
||||
window.testStream=c.captureStream(30);
|
||||
window.testDraw=setInterval(()=>ctx.drawImage(c,0,0),33);
|
||||
const v=document.getElementById('cameraVideo');v.srcObject=testStream;v.hidden=false;await v.play();
|
||||
window.testTargets=[];
|
||||
window.CarinhaVideo={rastrear(t){testTargets.push(t)},parar(){},atualizar(){}};
|
||||
window.CarinhaRastreamento.atualizar({online:true,estado:{}}, {preview:true,sensorCamera:true,
|
||||
rastrearRosto:true,rastrearMaos:true,mostrarRastreamento:true,seguirRastreamento:true});
|
||||
}""")
|
||||
page.wait_for_function("window.CarinhaRastreamento.estado().result?.hands.length > 0",timeout=15000)
|
||||
assert page.locator('#trackingOverlay').is_visible()
|
||||
assert page.evaluate("testTargets.some(t=>t?.tipo==='mao')")
|
||||
work=ROOT.parents[1]/'work';page.screenshot(path=str(work/'rastreamento-teste.png'),full_page=True)
|
||||
page.locator('#ajuste-mostrarRastreamento').uncheck()
|
||||
page.wait_for_function("document.getElementById('trackingOverlay').hidden",timeout=5000)
|
||||
page.locator('#ajuste-seguirRastreamento').uncheck()
|
||||
page.wait_for_timeout(1200)
|
||||
assert page.evaluate('testTargets[testTargets.length-1] === null')
|
||||
page.evaluate("CarinhaRastreamento.atualizar({online:true,estado:{dormindo:true}},{preview:true,sensorCamera:true,cameraSono:false,rastrearRosto:true,rastrearMaos:true})")
|
||||
assert not page.evaluate('CarinhaRastreamento.estado().active')
|
||||
assert not external,external
|
||||
assert not errors,errors
|
||||
browser.close()
|
||||
print('Overlay, alvo, controles, sono e inferencia sem acesso externo: OK')
|
||||
print('Inferencia real no worker e painel sem acesso externo: OK')
|
||||
finally:
|
||||
server.shutdown();server.server_close();thread.join()
|
||||
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
/* ==========================================================================
|
||||
TREINAMENTO & PERSONALIDADE · ESTILOS
|
||||
========================================================================== */
|
||||
|
||||
.treinamento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.rotina {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.laboratorio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.laboratorio iframe {
|
||||
height: 340px;
|
||||
border-radius: var(--raio-md);
|
||||
margin: 12px 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#diario {
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#rotinas {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 380px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#estado {
|
||||
font-size: 13.5px;
|
||||
color: var(--ciano);
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.treinamento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.laboratorio {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Treinamento & Personalidade · Carinha</title>
|
||||
<link rel="stylesheet" href="/dashboard.css">
|
||||
<link rel="stylesheet" href="/treinamento.css">
|
||||
<script src="/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
|
||||
<div>
|
||||
<h1>Treinamento & Personalidade</h1>
|
||||
<p style="margin:4px 0 0">Ensine novos hábitos, registre preferências e crie desenhos dinâmicos com o Gemini.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/emojis" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--raio-sm)">
|
||||
<span>✨ Ver Biblioteca de Emojis</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="treinamento-grid">
|
||||
<!-- Seção de Rotina e Preferências -->
|
||||
<section class="card rotina">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
Rotina & Preferências
|
||||
</h2>
|
||||
<p>Hábitos e gostos que moldam a convivência com o Carinha.</p>
|
||||
|
||||
<form id="rotinaForm" style="margin-top:10px">
|
||||
<label for="rotinaTexto">O que o Carinha deve saber?</label>
|
||||
<input id="rotinaTexto" type="text" maxlength="300" required placeholder="Ex.: De manhã gosto de café preto e notícias">
|
||||
<button class="primary" style="width:100%">Registrar Preferência</button>
|
||||
</form>
|
||||
|
||||
<div id="rotinas"></div>
|
||||
</section>
|
||||
|
||||
<!-- Laboratório de Criação de Desenhos SVG com Gemini -->
|
||||
<section class="card laboratorio">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="12 8 8 12 12 16 16 12 12 8"/></svg>
|
||||
Laboratório de Expressão IA
|
||||
</h2>
|
||||
<span class="badge" style="font-size:11px">Gemini SVG Studio</span>
|
||||
</div>
|
||||
|
||||
<iframe id="previa" title="Prévia animada do Carinha" src="/carinha.html?espelho=1&audio=0"></iframe>
|
||||
|
||||
<p style="font-size:13px;color:var(--fraco)">
|
||||
Descreva uma ideia visual para o Gemini sintetizar em formas vetoriais no rosto do robô.
|
||||
</p>
|
||||
|
||||
<form id="figurinhaForm" style="margin:8px 0 14px">
|
||||
<label for="figurinhaTexto">O que você quer desenhar?</label>
|
||||
<input id="figurinhaTexto" type="text" maxlength="1000" required placeholder="Ex.: Uma lâmpada acendendo com brilhos ou um coração pulsando nos olhos">
|
||||
<div class="actions" style="margin-top:6px">
|
||||
<button class="primary" id="criarFigurinha" type="submit">✨ Desenhar e Mostrar</button>
|
||||
<button id="gerar" type="button">Gerar Reações Automáticas</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<details class="opcoes" style="margin-top:4px">
|
||||
<summary>Criação Automática Periódica</summary>
|
||||
<label style="display:flex;align-items:center;gap:10px;margin-top:10px">
|
||||
<input id="automatico" type="checkbox">
|
||||
<span>Criar novas reações a cada hora quando houver conversas ativas</span>
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<details style="margin-top:12px">
|
||||
<summary>Prompt enviado ao Gemini (Inspeção Técnica)</summary>
|
||||
<p style="font-size:12.5px">Orientação de sistema para os desenhos vetoriais:</p>
|
||||
<pre id="promptOrientacao"></pre>
|
||||
<h3 style="margin-top:14px">Último Prompt Enviado</h3>
|
||||
<pre id="ultimoPrompt">Nenhum pedido enviado ainda.</pre>
|
||||
</details>
|
||||
|
||||
<p id="estado" role="status" style="margin-top:12px">Carregando…</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Diário & Resumo de Sessões -->
|
||||
<div class="grid" style="margin-top:24px">
|
||||
<section class="card">
|
||||
<details>
|
||||
<summary>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
Resumo das Sessões de Treino
|
||||
</summary>
|
||||
<div id="resumos" style="margin-top:12px"></div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<details>
|
||||
<summary>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
Diário de Conversas do Robô
|
||||
</summary>
|
||||
<p style="font-size:13px;margin:8px 0 12px">Registros gerados a partir dos diálogos anteriores.</p>
|
||||
<div class="actions" style="margin-bottom:12px">
|
||||
<button id="limparDiario" type="button" class="danger" style="font-size:12px">🗑️ Apagar Diário e Resumos</button>
|
||||
</div>
|
||||
<div id="diario"></div>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/treinamento.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
(function(){
|
||||
const el=id=>document.getElementById(id);let signature='',sending=false;
|
||||
async function api(path,data){const r=await fetch('/treinamento/'+path,data===undefined?{cache:'no-store'}:{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const d=await r.json();if(!r.ok)throw Error(d.erro);return d;}
|
||||
const date=t=>new Date(t*1000).toLocaleString('pt-BR');
|
||||
function text(tag,value){const n=document.createElement(tag);n.textContent=value;return n;}
|
||||
function button(label,action){const b=text('button',label);b.onclick=action;return b;}
|
||||
async function action(path,data){try{await api(path,data);await refresh();return true;}catch(e){el('estado').textContent=e.message;return false;}}
|
||||
async function refresh(){try{const s=await api('status');el('gerar').disabled=s.ocupado||sending;el('criarFigurinha').disabled=s.ocupado;el('automatico').checked=s.automatico;el('estado').textContent=s.erro?s.erro:s.ocupado?'Gemini está criando novas reações…':s.automatico?'Geração por hora ativada.':'Crie agora ou ative a geração por hora.';
|
||||
el('promptOrientacao').textContent=s.prompt_orientacao||'';el('ultimoPrompt').textContent=s.ultimo_prompt_figurinha||'Nenhum pedido enviado ainda.';
|
||||
const key=JSON.stringify([s.rotina,s.reacoes,s.diario,s.resumos]);if(key===signature)return;signature=key;
|
||||
el('rotinas').replaceChildren();for(const r of s.rotina){const row=text('p',r.texto+' ');row.append(button('Apagar',()=>action('rotina-apagar',{id:r.id})));el('rotinas').append(row);}
|
||||
el('resumos').replaceChildren();for(const r of s.resumos)el('resumos').append(text('small',date(r.horario)),text('p',r.texto));
|
||||
el('diario').replaceChildren();for(const m of s.diario)el('diario').append(text('small',date(m.horario)+' · '+(m.papel==='user'?'Você':'Carinha')),text('p',m.texto));
|
||||
}catch(e){el('estado').textContent=e.message;}}
|
||||
el('limparDiario').onclick=()=>{if(confirm('Apagar o diario e os resumos? As rotinas e reacoes serao mantidas.'))action('limpar-diario',{});};
|
||||
el('figurinhaForm').onsubmit=async e=>{e.preventDefault();await action('figurinha',{texto:el('figurinhaTexto').value});};
|
||||
el('rotinaForm').onsubmit=async e=>{e.preventDefault();if(await action('rotina',{texto:el('rotinaTexto').value}))el('rotinaTexto').value='';};
|
||||
el('gerar').onclick=async()=>{sending=true;el('gerar').disabled=true;await action('gerar',{});sending=false;};el('automatico').onchange=()=>action('config',{automatico:el('automatico').checked});refresh();setInterval(refresh,2000);
|
||||
})();
|
||||
+6
-5
@@ -1,10 +1,11 @@
|
||||
{
|
||||
"versao": "0.7.0",
|
||||
"versao": "0.8.0",
|
||||
"data": "2026-10-05",
|
||||
"alteracoes": [
|
||||
"Dashboard escuro com sidebar e oito telas",
|
||||
"Biblioteca de emojis com edição e desfazer persistente",
|
||||
"Configuração privada e teste de API Gemini",
|
||||
"Estilos e navegação compartilhados"
|
||||
"Painel novo em Svelte: Ao vivo, Conversa, Reações, Movimento e Ajustes",
|
||||
"Estado em tempo real por SSE (/eventos) no painel e no rosto, sem polling",
|
||||
"E-Stop real (/parar-tudo) e braço com homem-morto e interpolação no servidor",
|
||||
"Token opcional para todas as rotas de controle; app Android envia o token",
|
||||
"Telas antigas, /camera/frame e /app/connect removidos"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0b1017" />
|
||||
<title>Carinha</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%230b1017'/%3E%3Crect x='14' y='20' width='12' height='22' rx='6' fill='%235cd6ff'/%3E%3Crect x='38' y='20' width='12' height='22' rx='6' fill='%235cd6ff'/%3E%3C/svg%3E" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1250
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "carinha-painel",
|
||||
"private": true,
|
||||
"version": "0.8.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"test": "node --test \"tests/**/*.test.ts\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^7.3.1",
|
||||
"@tsconfig/svelte": "^5.0.8",
|
||||
"@types/node": "^26.6.4",
|
||||
"svelte": "^5.57.1",
|
||||
"svelte-check": "^4.7.6",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/jetbrains-mono": "^5.3.0",
|
||||
"@fontsource-variable/outfit": "^5.3.0",
|
||||
"@lucide/svelte": "^1.52.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
<script lang="ts">
|
||||
import { Bot, Command, Hand, MessageCircle, Moon, Settings, Smile, Sun, Video } from '@lucide/svelte';
|
||||
import { onMount, type Component } from 'svelte';
|
||||
import Avisos from './lib/componentes/Avisos.svelte';
|
||||
import EStop from './lib/componentes/EStop.svelte';
|
||||
import MiniRosto from './lib/componentes/MiniRosto.svelte';
|
||||
import Paleta from './lib/componentes/Paleta.svelte';
|
||||
import Selo from './lib/componentes/Selo.svelte';
|
||||
import Token from './lib/componentes/Token.svelte';
|
||||
import { favoritos, gesto, pararTudo } from './lib/comandos.svelte';
|
||||
import { conectar, estado } from './lib/estado.svelte';
|
||||
import { paleta } from './lib/paleta.svelte';
|
||||
import { nav, ROTAS, type Rota } from './lib/rotas.svelte';
|
||||
import AoVivo from './telas/AoVivo.svelte';
|
||||
import Ajustes from './telas/Ajustes.svelte';
|
||||
import Conversa from './telas/Conversa.svelte';
|
||||
import Movimento from './telas/Movimento.svelte';
|
||||
import Reacoes from './telas/Reacoes.svelte';
|
||||
|
||||
const TELAS: Record<Rota, Component> = {
|
||||
'ao-vivo': AoVivo,
|
||||
conversa: Conversa,
|
||||
reacoes: Reacoes,
|
||||
movimento: Movimento,
|
||||
ajustes: Ajustes,
|
||||
};
|
||||
const ICONES: Record<Rota, Component<any>> = {
|
||||
'ao-vivo': Video,
|
||||
conversa: MessageCircle,
|
||||
reacoes: Smile,
|
||||
movimento: Hand,
|
||||
ajustes: Settings,
|
||||
};
|
||||
const Tela = $derived(TELAS[nav.atual]);
|
||||
|
||||
// ---------- tema
|
||||
let tema = $state<'dark' | 'light'>('dark');
|
||||
function aplicarTema(t: 'dark' | 'light') {
|
||||
tema = t;
|
||||
document.documentElement.dataset.theme = t;
|
||||
try {
|
||||
localStorage.setItem('carinha_tema', t);
|
||||
} catch {
|
||||
/* ok */
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- atalhos: Ctrl+K paleta · 1–9 gestos favoritos · Shift+Espaço ou Esc Esc = E-Stop · g+letra navega
|
||||
let ultimoEsc = 0;
|
||||
let prefixoG = 0;
|
||||
function editando(e: KeyboardEvent) {
|
||||
const alvo = e.target as HTMLElement;
|
||||
return alvo.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(alvo.tagName);
|
||||
}
|
||||
function teclado(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
|
||||
e.preventDefault();
|
||||
paleta.aberta ? paleta.fechar() : paleta.abrir();
|
||||
return;
|
||||
}
|
||||
if (e.shiftKey && e.code === 'Space' && !editando(e)) {
|
||||
e.preventDefault();
|
||||
pararTudo();
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Escape' && !paleta.aberta) {
|
||||
const agora = Date.now();
|
||||
if (agora - ultimoEsc < 600) pararTudo();
|
||||
ultimoEsc = agora;
|
||||
return;
|
||||
}
|
||||
if (editando(e) || paleta.aberta || e.ctrlKey || e.metaKey || e.altKey) return;
|
||||
if (e.key === 'g') {
|
||||
prefixoG = Date.now();
|
||||
return;
|
||||
}
|
||||
if (Date.now() - prefixoG < 800) {
|
||||
const rota = ROTAS.find((r) => r.atalho === 'g ' + e.key);
|
||||
prefixoG = 0;
|
||||
if (rota) nav.ir(rota.id);
|
||||
return;
|
||||
}
|
||||
if (/^[1-9]$/.test(e.key)) {
|
||||
const g = favoritos.lista[Number(e.key) - 1];
|
||||
if (g) gesto(g);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
let salvo: string | null = null;
|
||||
try {
|
||||
salvo = localStorage.getItem('carinha_tema');
|
||||
} catch {
|
||||
/* ok */
|
||||
}
|
||||
aplicarTema(salvo === 'light' || (!salvo && matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark');
|
||||
conectar();
|
||||
});
|
||||
|
||||
const conexaoTexto = $derived(
|
||||
{ conectando: 'Conectando…', aberta: 'Servidor', caiu: 'Sem servidor', token: 'Token necessário' }[estado.conexao],
|
||||
);
|
||||
const bateria = $derived.by(() => {
|
||||
const b = estado.app?.estado?.bateria;
|
||||
const n = typeof b === 'number' ? b : b?.nivel;
|
||||
return typeof n === 'number' ? Math.round(n <= 1 ? n * 100 : n) : null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={teclado} />
|
||||
|
||||
{#if estado.conexao === 'token'}
|
||||
<Token />
|
||||
{/if}
|
||||
|
||||
<div class="app">
|
||||
<nav class="lateral" aria-label="Seções">
|
||||
<div class="marca">
|
||||
<span class="logo" aria-hidden="true"><Bot size={20} /></span>
|
||||
<div>
|
||||
<strong>Carinha</strong>
|
||||
<small class="fraco mono">{estado.versao ? 'v' + estado.versao : ''}</small>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
{#each ROTAS as r (r.id)}
|
||||
{@const Icone = ICONES[r.id]}
|
||||
<li>
|
||||
<a href={'#/' + r.id} aria-current={nav.atual === r.id ? 'page' : undefined}>
|
||||
<Icone size={20} /> <span>{r.titulo}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<button class="btn fantasma paleta-btn" onclick={paleta.abrir}>
|
||||
<Command size={16} /> Comandos <kbd>Ctrl K</kbd>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<header class="topo">
|
||||
<h1 class="titulo">{ROTAS.find((r) => r.id === nav.atual)?.titulo}</h1>
|
||||
<div class="status linha">
|
||||
<Selo tom={estado.conexao === 'aberta' ? 'ok' : estado.conexao === 'conectando' ? 'aviso' : 'perigo'}>
|
||||
{conexaoTexto}
|
||||
</Selo>
|
||||
<Selo tom={estado.celularOnline ? 'ok' : 'neutro'}>
|
||||
Celular {estado.celularOnline ? 'online' : 'offline'}{bateria !== null && estado.celularOnline ? ` · ${bateria}%` : ''}
|
||||
</Selo>
|
||||
{#if estado.conversa}
|
||||
<Selo tom="destaque">IA: {estado.conversa.provedor === 'gemini' ? 'Gemini' : 'Qwen local'}</Selo>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="acoes linha">
|
||||
<button class="btn fantasma icone so-celular" onclick={paleta.abrir} aria-label="Comandos">
|
||||
<Command size={18} />
|
||||
</button>
|
||||
<button
|
||||
class="btn fantasma icone"
|
||||
onclick={() => aplicarTema(tema === 'dark' ? 'light' : 'dark')}
|
||||
aria-label={tema === 'dark' ? 'Usar tema claro' : 'Usar tema escuro'}
|
||||
>
|
||||
{#if tema === 'dark'}<Sun size={18} />{:else}<Moon size={18} />{/if}
|
||||
</button>
|
||||
<EStop />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="conteudo">
|
||||
<Tela />
|
||||
</main>
|
||||
|
||||
{#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes'}
|
||||
<MiniRosto />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Paleta />
|
||||
<Avisos />
|
||||
|
||||
<style>
|
||||
.app {
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: var(--topo-altura) 1fr;
|
||||
grid-template-areas: 'topo' 'conteudo';
|
||||
}
|
||||
/* ---------- navegação: barra inferior no celular, lateral a partir de 1024px */
|
||||
.lateral {
|
||||
position: fixed;
|
||||
z-index: 60;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
background: var(--vidro);
|
||||
backdrop-filter: blur(16px);
|
||||
border-top: 1px solid var(--borda);
|
||||
}
|
||||
.marca,
|
||||
.paleta-btn {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--e-1);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
li a {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 2px;
|
||||
padding: var(--e-2) 0;
|
||||
border-radius: var(--raio);
|
||||
color: var(--texto-3);
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
li a[aria-current='page'] {
|
||||
color: var(--destaque);
|
||||
}
|
||||
.topo {
|
||||
grid-area: topo;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-3);
|
||||
padding: 0 var(--e-4);
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
height: calc(var(--topo-altura) + env(safe-area-inset-top, 0px));
|
||||
background: var(--vidro);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--borda);
|
||||
}
|
||||
.titulo {
|
||||
font-size: var(--t-lg);
|
||||
flex: none;
|
||||
}
|
||||
.status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.status :global(.selo:nth-child(n + 2)) {
|
||||
display: none;
|
||||
}
|
||||
.acoes {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.conteudo {
|
||||
grid-area: conteudo;
|
||||
padding: var(--e-4);
|
||||
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
kbd {
|
||||
margin-left: auto;
|
||||
font: 500 11px var(--fonte-mono);
|
||||
color: var(--texto-3);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.status :global(.selo:nth-child(n + 2)) {
|
||||
display: inline-flex;
|
||||
}
|
||||
.conteudo {
|
||||
padding: var(--e-5);
|
||||
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.app {
|
||||
grid-template-columns: var(--nav-largura) 1fr;
|
||||
grid-template-areas: 'nav topo' 'nav conteudo';
|
||||
/* a coluna da navegação continua pintada quando a página rola além da viewport */
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--fundo-2) calc(var(--nav-largura) - 1px),
|
||||
var(--borda) 0 var(--nav-largura),
|
||||
transparent 0
|
||||
);
|
||||
}
|
||||
.lateral {
|
||||
grid-area: nav;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--e-4);
|
||||
padding: var(--e-4) var(--e-3);
|
||||
border-top: 0;
|
||||
border-right: 1px solid var(--borda);
|
||||
background: var(--fundo-2);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.marca {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-3);
|
||||
padding: var(--e-2);
|
||||
}
|
||||
.marca div {
|
||||
display: grid;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.logo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--raio);
|
||||
background: var(--destaque-suave);
|
||||
color: var(--destaque);
|
||||
}
|
||||
ul {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-3);
|
||||
padding: var(--e-2) var(--e-3);
|
||||
font-size: var(--t-sm);
|
||||
color: var(--texto-2);
|
||||
}
|
||||
li a:hover {
|
||||
background: var(--superficie);
|
||||
color: var(--texto);
|
||||
}
|
||||
li a[aria-current='page'] {
|
||||
background: var(--destaque-suave);
|
||||
color: var(--destaque);
|
||||
}
|
||||
.paleta-btn {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
justify-content: flex-start;
|
||||
color: var(--texto-2);
|
||||
}
|
||||
.so-celular {
|
||||
display: none;
|
||||
}
|
||||
.conteudo {
|
||||
padding-bottom: var(--e-6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
/** Ajustes do app do celular (/app/config): salvamento otimista e campos agrupados. */
|
||||
import { pedir, postar } from './api';
|
||||
import { avisos } from './avisos.svelte';
|
||||
import { estado } from './estado.svelte';
|
||||
import type { AppConfig } from './tipos';
|
||||
|
||||
/** Atualiza na hora; se o servidor recusar, volta ao valor anterior e avisa. Não trava o formulário. */
|
||||
export async function salvarApp(parcial: AppConfig) {
|
||||
const antes = estado.appConfig ? { ...estado.appConfig } : null;
|
||||
if (estado.appConfig) estado.appConfig = { ...estado.appConfig, ...parcial };
|
||||
try {
|
||||
const r = await postar<{ config: AppConfig }>('/app/config', parcial);
|
||||
estado.appConfig = r.config;
|
||||
} catch (e) {
|
||||
estado.appConfig = antes;
|
||||
avisos.erro(e);
|
||||
}
|
||||
}
|
||||
|
||||
export async function restaurarPadrao() {
|
||||
const padrao = await pedir<AppConfig>('/app/padrao');
|
||||
// A transmissão não é "ajuste": continua como está.
|
||||
delete padrao.preview;
|
||||
await salvarApp(padrao);
|
||||
avisos.ok('Ajustes do celular restaurados para o padrão.');
|
||||
}
|
||||
|
||||
type Opcoes = [string | number, string][];
|
||||
export interface Campo {
|
||||
chave: string;
|
||||
rotulo: string;
|
||||
ajuda?: string;
|
||||
tipo: 'toggle' | 'slider' | 'escolha';
|
||||
min?: number;
|
||||
max?: number;
|
||||
passo?: number;
|
||||
unidade?: string;
|
||||
opcoes?: Opcoes;
|
||||
}
|
||||
|
||||
export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = [
|
||||
{
|
||||
titulo: 'Tela e personalidade',
|
||||
descricao: 'Como o rosto aparece e se comporta sozinho.',
|
||||
campos: [
|
||||
{ chave: 'auto', rotulo: 'Gestos espontâneos', ajuda: 'Pisca e olha em volta sem comando', tipo: 'toggle' },
|
||||
{ chave: 'boca', rotulo: 'Mostrar boca', tipo: 'toggle' },
|
||||
{ chave: 'sobrancelhas', rotulo: 'Mostrar sobrancelhas', tipo: 'toggle' },
|
||||
{ chave: 'audio', rotulo: 'Sons no celular', ajuda: 'Bipes do próprio robô', tipo: 'toggle' },
|
||||
{ chave: 'volume', rotulo: 'Volume dos sons', tipo: 'slider', min: 0, max: 1, passo: 0.05 },
|
||||
{ chave: 'brilho', rotulo: 'Brilho normal', tipo: 'slider', min: 0.01, max: 1, passo: 0.01 },
|
||||
{ chave: 'economia', rotulo: 'Reduzir brilho em repouso', tipo: 'toggle' },
|
||||
{ chave: 'brilhoRepouso', rotulo: 'Brilho em repouso', tipo: 'slider', min: 0.01, max: 1, passo: 0.01 },
|
||||
{ chave: 'repousoTela', rotulo: 'Espera para reduzir brilho', tipo: 'slider', min: 5, max: 300, passo: 5, unidade: ' s' },
|
||||
],
|
||||
},
|
||||
{
|
||||
titulo: 'Sensores e reações',
|
||||
descricao: 'O que o celular percebe e como reage.',
|
||||
campos: [
|
||||
{ chave: 'sensorMic', rotulo: 'Microfone', ajuda: 'Só o nível de som é usado, nunca o áudio', tipo: 'toggle' },
|
||||
{ chave: 'ouvir', rotulo: 'Reagir a sons', tipo: 'toggle' },
|
||||
{ chave: 'micSono', rotulo: 'Microfone durante o sono', tipo: 'toggle' },
|
||||
{ chave: 'sompausa', rotulo: 'Silêncio para dormir', tipo: 'slider', min: 1, max: 120, passo: 1, unidade: ' s' },
|
||||
{ chave: 'sensorCamera', rotulo: 'Câmera como sensor', ajuda: 'Detecta movimento e permite o vídeo', tipo: 'toggle' },
|
||||
{ chave: 'reagir', rotulo: 'Reagir a movimento', tipo: 'toggle' },
|
||||
{ chave: 'cameraSono', rotulo: 'Câmera durante o sono', tipo: 'toggle' },
|
||||
{ chave: 'movolhar', rotulo: 'Quanto os olhos acompanham', tipo: 'slider', min: 0, max: 100, passo: 1, unidade: '%' },
|
||||
],
|
||||
},
|
||||
{
|
||||
titulo: 'Vídeo e rastreamento',
|
||||
descricao: 'Qualidade da transmissão e rastreamento feito neste PC.',
|
||||
campos: [
|
||||
{ chave: 'cameraLado', rotulo: 'Câmera', tipo: 'escolha', opcoes: [['user', 'Frontal'], ['environment', 'Traseira']] },
|
||||
{
|
||||
chave: 'videoResolucao',
|
||||
rotulo: 'Resolução',
|
||||
tipo: 'escolha',
|
||||
opcoes: [['auto', 'Automática'], ['max', 'Máxima'], ['480', '480p'], ['720', '720p'], ['1080', '1080p'], ['2160', '4K'], ['4320', '8K']],
|
||||
},
|
||||
{
|
||||
chave: 'videoFPS',
|
||||
rotulo: 'Quadros por segundo',
|
||||
tipo: 'escolha',
|
||||
opcoes: [[0, 'Automático'], [-1, 'Máximo'], [15, '15'], [24, '24'], [30, '30'], [60, '60'], [120, '120'], [240, '240']],
|
||||
},
|
||||
{ chave: 'rastrearRosto', rotulo: 'Rastrear rosto', tipo: 'toggle' },
|
||||
{ chave: 'rastrearMaos', rotulo: 'Rastrear mãos', tipo: 'toggle' },
|
||||
{ chave: 'seguirRastreamento', rotulo: 'Olhos seguem o alvo', tipo: 'toggle' },
|
||||
{ chave: 'mostrarRastreamento', rotulo: 'Desenhar rastreamento no vídeo', tipo: 'toggle' },
|
||||
],
|
||||
},
|
||||
{
|
||||
titulo: 'Sensibilidade (avançado)',
|
||||
descricao: 'Limiares dos sustos e intervalos entre reações.',
|
||||
campos: [
|
||||
{ chave: 'somlim', rotulo: 'Nível para perceber som', tipo: 'slider', min: 0, max: 1, passo: 0.01 },
|
||||
{ chave: 'somaltolim', rotulo: 'Som mínimo para susto', tipo: 'slider', min: 0, max: 1, passo: 0.01 },
|
||||
{ chave: 'somganho', rotulo: 'Aumento súbito para susto', tipo: 'slider', min: 0, max: 1, passo: 0.01 },
|
||||
{ chave: 'somcooldown', rotulo: 'Intervalo entre sustos por som', tipo: 'slider', min: 0, max: 120, passo: 1, unidade: ' s' },
|
||||
{ chave: 'movlim', rotulo: 'Movimento mínimo', tipo: 'slider', min: 0, max: 1, passo: 0.01 },
|
||||
{ chave: 'movforte', rotulo: 'Movimento para susto', tipo: 'slider', min: 0, max: 1, passo: 0.01 },
|
||||
{ chave: 'movcooldown', rotulo: 'Intervalo entre sustos por movimento', tipo: 'slider', min: 0, max: 120, passo: 1, unidade: ' s' },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,70 @@
|
||||
/** Cliente HTTP único do painel: token, JSON, tempo limite e erro legível. */
|
||||
|
||||
const CHAVE_TOKEN = 'carinha_token';
|
||||
|
||||
export class ErroApi extends Error {
|
||||
constructor(public status: number, mensagem: string) {
|
||||
super(mensagem);
|
||||
}
|
||||
}
|
||||
|
||||
export function lerToken(): string {
|
||||
try {
|
||||
return localStorage.getItem(CHAVE_TOKEN) || '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
export function gravarToken(token: string) {
|
||||
try {
|
||||
if (token) localStorage.setItem(CHAVE_TOKEN, token);
|
||||
else localStorage.removeItem(CHAVE_TOKEN);
|
||||
} catch {
|
||||
/* navegação privada: vale só nesta aba */
|
||||
}
|
||||
}
|
||||
|
||||
/** Avisado quando o servidor recusa o token (abre o diálogo de token). */
|
||||
let aoNegar: () => void = () => {};
|
||||
export function quandoNegado(fn: () => void) {
|
||||
aoNegar = fn;
|
||||
}
|
||||
|
||||
export async function pedir<T = any>(caminho: string, dados?: unknown, tempo = 8000): Promise<T> {
|
||||
const cabecalhos: Record<string, string> = {};
|
||||
const token = lerToken();
|
||||
if (token) cabecalhos.Authorization = 'Bearer ' + token;
|
||||
const opcoes: RequestInit = { cache: 'no-store', headers: cabecalhos, signal: AbortSignal.timeout(tempo) };
|
||||
if (dados !== undefined) {
|
||||
opcoes.method = 'POST';
|
||||
cabecalhos['Content-Type'] = 'application/json';
|
||||
opcoes.body = JSON.stringify(dados);
|
||||
}
|
||||
let resposta: Response;
|
||||
try {
|
||||
resposta = await fetch(caminho, opcoes);
|
||||
} catch (e) {
|
||||
const nome = (e as Error).name;
|
||||
throw new ErroApi(0, nome === 'TimeoutError' ? 'O servidor demorou a responder' : 'Sem conexão com o servidor');
|
||||
}
|
||||
const texto = await resposta.text();
|
||||
let corpo: any = null;
|
||||
try {
|
||||
corpo = texto ? JSON.parse(texto) : null;
|
||||
} catch {
|
||||
corpo = null;
|
||||
}
|
||||
if (!resposta.ok) {
|
||||
if (resposta.status === 401) aoNegar();
|
||||
throw new ErroApi(resposta.status, corpo?.erro || `Erro ${resposta.status}`);
|
||||
}
|
||||
return corpo as T;
|
||||
}
|
||||
|
||||
export const postar = <T = any>(caminho: string, dados: unknown = {}) => pedir<T>(caminho, dados);
|
||||
|
||||
export function urlEventos(): string {
|
||||
const token = lerToken();
|
||||
return token ? '/eventos?t=' + encodeURIComponent(token) : '/eventos';
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/** Toasts no lugar de alert/confirm: mensagem curta, com ação opcional (ex.: Desfazer). */
|
||||
|
||||
export type TipoAviso = 'info' | 'ok' | 'erro';
|
||||
|
||||
export interface Aviso {
|
||||
id: number;
|
||||
texto: string;
|
||||
tipo: TipoAviso;
|
||||
acao?: { rotulo: string; fazer: () => void };
|
||||
}
|
||||
|
||||
class Avisos {
|
||||
lista = $state<Aviso[]>([]);
|
||||
private seq = 0;
|
||||
|
||||
mostrar(texto: string, tipo: TipoAviso = 'info', acao?: Aviso['acao'], ms = tipo === 'erro' ? 6000 : 3500) {
|
||||
const id = ++this.seq;
|
||||
this.lista = [...this.lista, { id, texto, tipo, acao }].slice(-4);
|
||||
setTimeout(() => this.fechar(id), acao ? Math.max(ms, 6000) : ms);
|
||||
return id;
|
||||
}
|
||||
fechar(id: number) {
|
||||
this.lista = this.lista.filter((a) => a.id !== id);
|
||||
}
|
||||
ok = (t: string, acao?: Aviso['acao']) => this.mostrar(t, 'ok', acao);
|
||||
erro = (e: unknown) => this.mostrar(e instanceof Error ? e.message : String(e), 'erro');
|
||||
}
|
||||
|
||||
export const avisos = new Avisos();
|
||||
|
||||
/** Executa uma ação do painel mostrando o erro num toast em vez de engolir. */
|
||||
export async function tentar<T>(fn: () => Promise<T>, sucesso?: string): Promise<T | undefined> {
|
||||
try {
|
||||
const r = await fn();
|
||||
if (sucesso) avisos.ok(sucesso);
|
||||
return r;
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Braço (/braco/*) e diagnóstico (/servos/*). Segurança:
|
||||
* - homem-morto: só há movimento enquanto o botão/slider está pressionado; cada pedido leva
|
||||
* um prazo curto (ttl_ms) e o servidor desliga os motores se ele vencer sem renovação;
|
||||
* - a interpolação e o limite de velocidade são do servidor, não deste navegador.
|
||||
*/
|
||||
import { pedir, postar } from './api';
|
||||
import { avisos } from './avisos.svelte';
|
||||
import { estado } from './estado.svelte';
|
||||
import { limites } from './nucleo';
|
||||
|
||||
export { sequencias } from './nucleo';
|
||||
|
||||
export interface Calibracao {
|
||||
canal: number;
|
||||
minimo: number;
|
||||
maximo: number;
|
||||
centro: number;
|
||||
}
|
||||
export interface Postura {
|
||||
nome: string;
|
||||
angulos: number[];
|
||||
}
|
||||
export interface StatusBraco {
|
||||
calibracao: Calibracao[];
|
||||
posturas: Postura[];
|
||||
disponivel: boolean;
|
||||
erro: string;
|
||||
dono: string | null;
|
||||
travado: boolean;
|
||||
atual: number[] | null;
|
||||
movendo: boolean;
|
||||
articulacoes: { nome: string; canal: number }[];
|
||||
}
|
||||
|
||||
export const PRAZO_MS = 450;
|
||||
const RENOVAR_MS = 150;
|
||||
|
||||
class Braco {
|
||||
status = $state<StatusBraco | null>(null);
|
||||
alvo = $state<number[]>(Array(7).fill(90));
|
||||
velocidade = $state(60);
|
||||
/** Opt-in explícito antes de qualquer movimento físico. */
|
||||
ativado = $state(false);
|
||||
segurando = $state(false);
|
||||
passoSequencia = $state<{ nome: string; indice: number; total: number } | null>(null);
|
||||
|
||||
private relogio = 0;
|
||||
private emVoo = false;
|
||||
private sequencia: number[][] | null = null;
|
||||
private pausaAte = 0;
|
||||
|
||||
faixas = $derived(this.status ? limites(this.status.calibracao, this.status.articulacoes) : []);
|
||||
|
||||
async carregar() {
|
||||
try {
|
||||
this.status = await pedir<StatusBraco>('/braco/status');
|
||||
this.limitarAlvo();
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
}
|
||||
}
|
||||
|
||||
limitarAlvo() {
|
||||
if (!this.faixas.length) return;
|
||||
this.alvo = this.alvo.map((v, i) => Math.max(this.faixas[i][0], Math.min(this.faixas[i][1], v)));
|
||||
}
|
||||
|
||||
/** Começa a segurar: renova o movimento a cada 150 ms até soltar. */
|
||||
segurar(sequencia?: { nome: string; passos: number[][] }) {
|
||||
if (!this.ativado || this.segurando) return;
|
||||
if (sequencia) {
|
||||
this.sequencia = sequencia.passos;
|
||||
this.passoSequencia = { nome: sequencia.nome, indice: 0, total: sequencia.passos.length };
|
||||
this.alvo = [...sequencia.passos[0]];
|
||||
this.pausaAte = 0;
|
||||
}
|
||||
this.segurando = true;
|
||||
this.renovar();
|
||||
this.relogio = window.setInterval(() => this.renovar(), RENOVAR_MS);
|
||||
}
|
||||
|
||||
/** Soltou: para de renovar. O servidor desliga os motores quando o prazo vence (≤ 450 ms). */
|
||||
soltar() {
|
||||
if (!this.segurando) return;
|
||||
this.segurando = false;
|
||||
clearInterval(this.relogio);
|
||||
if (this.passoSequencia) avisos.mostrar(`${this.passoSequencia.nome} interrompida ao soltar.`);
|
||||
this.sequencia = null;
|
||||
this.passoSequencia = null;
|
||||
}
|
||||
|
||||
private async renovar() {
|
||||
if (this.emVoo || !this.segurando) return;
|
||||
this.emVoo = true;
|
||||
try {
|
||||
const r = await postar<{ movendo: boolean }>('/braco/mover', {
|
||||
angulos: $state.snapshot(this.alvo),
|
||||
velocidade: this.velocidade,
|
||||
ttl_ms: PRAZO_MS,
|
||||
});
|
||||
if (!r.movendo && this.sequencia && this.passoSequencia) this.avancarSequencia();
|
||||
} catch (e) {
|
||||
this.segurando = false;
|
||||
clearInterval(this.relogio);
|
||||
this.sequencia = null;
|
||||
this.passoSequencia = null;
|
||||
avisos.erro(e);
|
||||
} finally {
|
||||
this.emVoo = false;
|
||||
}
|
||||
}
|
||||
|
||||
private avancarSequencia() {
|
||||
if (!this.pausaAte) {
|
||||
this.pausaAte = performance.now() + 700;
|
||||
return;
|
||||
}
|
||||
if (performance.now() < this.pausaAte) return;
|
||||
this.pausaAte = 0;
|
||||
const p = this.passoSequencia!;
|
||||
if (p.indice + 1 >= p.total) {
|
||||
avisos.ok(`${p.nome} concluída.`);
|
||||
this.sequencia = null;
|
||||
this.passoSequencia = null;
|
||||
this.segurando = false;
|
||||
clearInterval(this.relogio);
|
||||
return;
|
||||
}
|
||||
this.passoSequencia = { ...p, indice: p.indice + 1 };
|
||||
this.alvo = [...this.sequencia![p.indice + 1]];
|
||||
}
|
||||
|
||||
async pararMotores() {
|
||||
this.soltar();
|
||||
try {
|
||||
await postar('/braco/parar');
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
}
|
||||
}
|
||||
|
||||
async desativar() {
|
||||
this.ativado = false;
|
||||
await this.pararMotores();
|
||||
}
|
||||
|
||||
async salvar(dados: { calibracao: Calibracao[]; posturas: Postura[] }, sucesso: string) {
|
||||
this.soltar();
|
||||
try {
|
||||
await postar('/braco/parar');
|
||||
this.status = await postar<StatusBraco>('/braco/config', dados);
|
||||
this.limitarAlvo();
|
||||
avisos.ok(sucesso);
|
||||
return true;
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const braco = new Braco();
|
||||
|
||||
// Segurança: aba escondida ou E-Stop param de segurar na hora.
|
||||
document.addEventListener('visibilitychange', () => document.hidden && braco.soltar());
|
||||
$effect.root(() => {
|
||||
$effect(() => {
|
||||
if (estado.estop.ativo) {
|
||||
braco.soltar();
|
||||
braco.ativado = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
/** Ações que qualquer tela pode disparar: gestos, rosto, cor, E-Stop. */
|
||||
import { postar } from './api';
|
||||
import { avisos, tentar } from './avisos.svelte';
|
||||
import { estado } from './estado.svelte';
|
||||
|
||||
/** Nome amigável e emoji de cada gesto do rosto ('parar' fecha o kiosk: não vira botão). */
|
||||
export const GESTOS_INFO: Record<string, { nome: string; emoji: string }> = {
|
||||
feliz: { nome: 'Feliz', emoji: '😊' },
|
||||
alegre: { nome: 'Alegre', emoji: '😄' },
|
||||
coracao: { nome: 'Coração', emoji: '❤️' },
|
||||
piscar: { nome: 'Piscar', emoji: '😌' },
|
||||
piscar2: { nome: 'Piscar duplo', emoji: '😑' },
|
||||
piscadinha: { nome: 'Piscadinha', emoji: '😉' },
|
||||
surpreso: { nome: 'Surpreso', emoji: '😮' },
|
||||
triste: { nome: 'Triste', emoji: '😢' },
|
||||
bravo: { nome: 'Bravo', emoji: '😠' },
|
||||
olhar_esq: { nome: 'Olhar à esquerda', emoji: '👈' },
|
||||
olhar_dir: { nome: 'Olhar à direita', emoji: '👉' },
|
||||
olhar_baixo: { nome: 'Olhar para baixo', emoji: '👇' },
|
||||
dormir: { nome: 'Dormir', emoji: '😴' },
|
||||
acordar: { nome: 'Acordar', emoji: '🌅' },
|
||||
aleatorio: { nome: 'Aleatório', emoji: '🎲' },
|
||||
};
|
||||
|
||||
export const gestosDisponiveis = () => estado.gestos.filter((g) => g in GESTOS_INFO);
|
||||
|
||||
const CHAVE_FAVORITOS = 'carinha_favoritos';
|
||||
const PADRAO_FAVORITOS = ['feliz', 'coracao', 'piscadinha', 'surpreso', 'triste', 'olhar_esq', 'olhar_dir', 'dormir', 'acordar'];
|
||||
|
||||
function lerFavoritos(): string[] {
|
||||
try {
|
||||
const v = JSON.parse(localStorage.getItem(CHAVE_FAVORITOS) || 'null');
|
||||
if (Array.isArray(v) && v.every((x) => typeof x === 'string')) return v.slice(0, 9);
|
||||
} catch {
|
||||
/* sem armazenamento */
|
||||
}
|
||||
return PADRAO_FAVORITOS;
|
||||
}
|
||||
|
||||
class Favoritos {
|
||||
lista = $state<string[]>(lerFavoritos());
|
||||
alternar(g: string) {
|
||||
this.lista = this.lista.includes(g) ? this.lista.filter((x) => x !== g) : [...this.lista, g].slice(0, 9);
|
||||
try {
|
||||
localStorage.setItem(CHAVE_FAVORITOS, JSON.stringify(this.lista));
|
||||
} catch {
|
||||
/* ok */
|
||||
}
|
||||
}
|
||||
}
|
||||
export const favoritos = new Favoritos();
|
||||
|
||||
export const gesto = (nome: string) => tentar(() => postar('/comando', { tipo: 'gesto', valor: nome }));
|
||||
export const rosto = (nome: string) => tentar(() => postar('/comando', { tipo: 'rosto', valor: nome }));
|
||||
export const cor = (rgb: [number, number, number]) => tentar(() => postar('/comando', { tipo: 'cor', valor: rgb }));
|
||||
export const recarregarCelular = () =>
|
||||
tentar(async () => {
|
||||
const r = await postar<{ mensagem: string }>('/comando', { tipo: 'recarregar' });
|
||||
avisos.ok(r.mensagem);
|
||||
});
|
||||
|
||||
export async function pararTudo() {
|
||||
try {
|
||||
await postar('/parar-tudo');
|
||||
avisos.mostrar('E-Stop acionado: motores desligados e travados.', 'erro');
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
}
|
||||
}
|
||||
|
||||
export const rearmar = () => tentar(() => postar('/rearmar'), 'Motores rearmados.');
|
||||
|
||||
export function hex(rgb: number[]) {
|
||||
return '#' + rgb.map((v) => v.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
export function rgb(hexCor: string): [number, number, number] {
|
||||
const n = parseInt(hexCor.slice(1), 16);
|
||||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
|
||||
}
|
||||
export const CORES: { nome: string; rgb: [number, number, number] }[] = [
|
||||
{ nome: 'Ciano', rgb: [92, 214, 255] },
|
||||
{ nome: 'Verde', rgb: [74, 222, 128] },
|
||||
{ nome: 'Amarelo', rgb: [251, 191, 36] },
|
||||
{ nome: 'Laranja', rgb: [255, 140, 50] },
|
||||
{ nome: 'Rosa', rgb: [255, 110, 190] },
|
||||
{ nome: 'Roxo', rgb: [167, 139, 250] },
|
||||
{ nome: 'Vermelho', rgb: [248, 90, 90] },
|
||||
{ nome: 'Branco', rgb: [235, 240, 245] },
|
||||
];
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts" generics="T extends string">
|
||||
let { abas, ativa = $bindable(), rotulo }: { abas: { id: T; titulo: string; contador?: number }[]; ativa: T; rotulo: string } =
|
||||
$props();
|
||||
|
||||
function tecla(e: KeyboardEvent, i: number) {
|
||||
const d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
|
||||
if (!d) return;
|
||||
const prox = abas[(i + d + abas.length) % abas.length];
|
||||
ativa = prox.id;
|
||||
(e.currentTarget as HTMLElement).parentElement?.querySelector<HTMLElement>(`[data-aba="${prox.id}"]`)?.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="abas" role="tablist" aria-label={rotulo}>
|
||||
{#each abas as aba, i (aba.id)}
|
||||
<button
|
||||
role="tab"
|
||||
data-aba={aba.id}
|
||||
aria-selected={ativa === aba.id}
|
||||
tabindex={ativa === aba.id ? 0 : -1}
|
||||
onclick={() => (ativa = aba.id)}
|
||||
onkeydown={(e) => tecla(e, i)}
|
||||
>
|
||||
{aba.titulo}
|
||||
{#if aba.contador !== undefined}<span class="contador">{aba.contador}</span>{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.abas {
|
||||
display: flex;
|
||||
gap: var(--e-1);
|
||||
border-bottom: 1px solid var(--borda);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding: var(--e-2) var(--e-3);
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
background: transparent;
|
||||
color: var(--texto-3);
|
||||
font: 500 var(--t-sm) var(--fonte);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button[aria-selected='true'] {
|
||||
color: var(--texto);
|
||||
border-bottom-color: var(--destaque);
|
||||
}
|
||||
.contador {
|
||||
font-size: var(--t-xs);
|
||||
padding: 0 6px;
|
||||
border-radius: var(--raio-pill);
|
||||
background: var(--superficie-3);
|
||||
color: var(--texto-2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import { X } from '@lucide/svelte';
|
||||
import { avisos } from '../avisos.svelte';
|
||||
</script>
|
||||
|
||||
<div class="avisos" role="status" aria-live="polite">
|
||||
{#each avisos.lista as a (a.id)}
|
||||
<div class="aviso {a.tipo}">
|
||||
<span>{a.texto}</span>
|
||||
{#if a.acao}
|
||||
<button
|
||||
class="btn pequeno"
|
||||
onclick={() => {
|
||||
a.acao!.fazer();
|
||||
avisos.fechar(a.id);
|
||||
}}>{a.acao.rotulo}</button
|
||||
>
|
||||
{/if}
|
||||
<button class="btn fantasma pequeno icone" aria-label="Fechar aviso" onclick={() => avisos.fechar(a.id)}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.avisos {
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
right: var(--e-4);
|
||||
bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
|
||||
display: grid;
|
||||
gap: var(--e-2);
|
||||
width: min(420px, calc(100vw - 2 * var(--e-4)));
|
||||
}
|
||||
.aviso {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
|
||||
border-radius: var(--raio);
|
||||
background: var(--superficie-2);
|
||||
border: 1px solid var(--borda-forte);
|
||||
border-left: 4px solid var(--destaque);
|
||||
box-shadow: var(--sombra-flutuante);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
.aviso span {
|
||||
flex: 1;
|
||||
}
|
||||
.ok {
|
||||
border-left-color: var(--ok);
|
||||
}
|
||||
.erro {
|
||||
border-left-color: var(--perigo);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.avisos {
|
||||
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
// Vista lateral esquemática: cada articulação é um <g> aninhado que gira no próprio eixo.
|
||||
// Ordem dos ângulos: 0 garra, 1 punho 1, 2 punho 2, 3 braço superior, 4 braço inferior, 5 antebraço, 6 base.
|
||||
let { pose, fantasma = null }: { pose: number[]; fantasma?: number[] | null } = $props();
|
||||
const r = (v: number) => v - 90;
|
||||
</script>
|
||||
|
||||
{#snippet braco(p: number[], classe: string)}
|
||||
<g class={classe}>
|
||||
<g transform="translate(120 236) rotate({r(p[4])})">
|
||||
<line x1="0" y1="0" x2="0" y2="-78" class="seg" />
|
||||
<g transform="translate(0 -78) rotate({r(p[3])})">
|
||||
<line x1="0" y1="0" x2="0" y2="-66" class="seg" />
|
||||
<g transform="translate(0 -66) rotate({r(p[5])})">
|
||||
<line x1="0" y1="0" x2="0" y2="-40" class="seg fino" />
|
||||
<g transform="translate(0 -40) rotate({r(p[1])})">
|
||||
<line x1="0" y1="0" x2="0" y2="-18" class="seg fino" />
|
||||
<ellipse cx="0" cy="-18" rx={7 * Math.abs(Math.cos(((p[2] - 90) * Math.PI) / 180)) + 2} ry="4" class="punho" />
|
||||
<g transform="translate(0 -20)">
|
||||
<path d="M0 0 L-4 -16 L-1 -24" class="dedo" transform="rotate({-8 - (p[0] - 90) * 0.25})" />
|
||||
<path d="M0 0 L4 -16 L1 -24" class="dedo" transform="rotate({8 + (p[0] - 90) * 0.25})" />
|
||||
</g>
|
||||
<circle r="4" class="junta" />
|
||||
</g>
|
||||
<circle r="5" class="junta" />
|
||||
</g>
|
||||
<circle r="6" class="junta" />
|
||||
</g>
|
||||
<circle r="7" class="junta" />
|
||||
</g>
|
||||
</g>
|
||||
{/snippet}
|
||||
|
||||
<svg viewBox="0 0 240 290" role="img" aria-label="Postura do braço">
|
||||
<!-- base: o arco mostra a rotação (vista de cima) -->
|
||||
<rect x="80" y="240" width="80" height="16" rx="5" class="base" />
|
||||
<path d="M85 274 A40 14 0 0 0 155 274" class="trilho" />
|
||||
<circle
|
||||
cx={120 + 35 * Math.cos(Math.PI - (pose[6] * Math.PI) / 180)}
|
||||
cy={274 + 12 * Math.sin((pose[6] * Math.PI) / 180) * 0.4}
|
||||
r="4"
|
||||
class="marcador"
|
||||
/>
|
||||
{#if fantasma}{@render braco(fantasma, 'fantasma')}{/if}
|
||||
{@render braco(pose, 'real')}
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.seg {
|
||||
stroke: var(--destaque);
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.fino {
|
||||
stroke-width: 8;
|
||||
}
|
||||
.junta {
|
||||
fill: var(--superficie);
|
||||
stroke: var(--texto-2);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.punho {
|
||||
fill: var(--texto-2);
|
||||
}
|
||||
.dedo {
|
||||
fill: none;
|
||||
stroke: var(--texto);
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.base {
|
||||
fill: var(--superficie-3);
|
||||
stroke: var(--borda-forte);
|
||||
}
|
||||
.trilho {
|
||||
fill: none;
|
||||
stroke: var(--borda-forte);
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 3 4;
|
||||
}
|
||||
.marcador {
|
||||
fill: var(--aviso);
|
||||
}
|
||||
.fantasma {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.fantasma .seg {
|
||||
stroke: var(--texto-3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
let { titulo = '', descricao = '', acoes, children, class: classe = '' }: {
|
||||
titulo?: string;
|
||||
descricao?: string;
|
||||
acoes?: Snippet;
|
||||
children: Snippet;
|
||||
class?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<section class="card {classe}">
|
||||
{#if titulo || acoes}
|
||||
<header>
|
||||
<div>
|
||||
{#if titulo}<h2>{titulo}</h2>{/if}
|
||||
{#if descricao}<p class="fraco pequeno-texto">{descricao}</p>{/if}
|
||||
</div>
|
||||
{#if acoes}<div class="linha">{@render acoes()}</div>{/if}
|
||||
</header>
|
||||
{/if}
|
||||
{@render children()}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
background: var(--superficie);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-lg);
|
||||
padding: var(--e-4);
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
align-content: start;
|
||||
min-width: 0;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--e-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--t-md);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.card {
|
||||
padding: var(--e-5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { OctagonX, RotateCcw } from '@lucide/svelte';
|
||||
import { pararTudo, rearmar } from '../comandos.svelte';
|
||||
import { estado } from '../estado.svelte';
|
||||
</script>
|
||||
|
||||
{#if estado.estop.ativo}
|
||||
<button class="btn estop parado" onclick={rearmar} title="Motores travados pelo E-Stop. Clique para rearmar.">
|
||||
<RotateCcw size={18} /> <span>PARADO · Rearmar</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="btn perigo estop" onclick={pararTudo} title="Parar tudo (Shift+Espaço ou Esc duas vezes)">
|
||||
<OctagonX size={18} /> <span>Parar tudo</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.estop {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.parado {
|
||||
background: var(--aviso-suave);
|
||||
border-color: var(--aviso);
|
||||
color: var(--aviso);
|
||||
animation: pulso 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulso {
|
||||
50% {
|
||||
box-shadow: 0 0 0 4px var(--aviso-suave);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
.estop {
|
||||
width: 44px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { Star } from '@lucide/svelte';
|
||||
import { favoritos, gesto, GESTOS_INFO, gestosDisponiveis } from '../comandos.svelte';
|
||||
|
||||
// compacto: só os favoritos com atalho 1–9 (dock). Completo: todos, com estrela para fixar.
|
||||
let { completo = false }: { completo?: boolean } = $props();
|
||||
const lista = $derived(completo ? gestosDisponiveis() : favoritos.lista.filter((g) => g in GESTOS_INFO));
|
||||
</script>
|
||||
|
||||
<div class="gestos" class:completo>
|
||||
{#each lista as g, i (g)}
|
||||
{@const info = GESTOS_INFO[g]}
|
||||
<div class="item">
|
||||
<button class="gesto" onclick={() => gesto(g)} title={completo ? info.nome : `${info.nome} (tecla ${i + 1})`}>
|
||||
<span class="emoji" aria-hidden="true">{info.emoji}</span>
|
||||
<span class="nome">{info.nome}</span>
|
||||
{#if !completo}<kbd>{i + 1}</kbd>{/if}
|
||||
</button>
|
||||
{#if completo}
|
||||
<button
|
||||
class="estrela"
|
||||
class:ativa={favoritos.lista.includes(g)}
|
||||
aria-label={favoritos.lista.includes(g) ? `Tirar ${info.nome} dos favoritos` : `Fixar ${info.nome} nos favoritos`}
|
||||
aria-pressed={favoritos.lista.includes(g)}
|
||||
onclick={() => favoritos.alternar(g)}
|
||||
>
|
||||
<Star size={14} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gestos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
|
||||
gap: var(--e-2);
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
}
|
||||
.gesto {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 2px;
|
||||
padding: var(--e-3) var(--e-1) var(--e-2);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio);
|
||||
background: var(--superficie-2);
|
||||
color: var(--texto);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
|
||||
}
|
||||
.gesto:hover {
|
||||
border-color: var(--destaque);
|
||||
background: var(--destaque-suave);
|
||||
}
|
||||
.gesto:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.emoji {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.nome {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--texto-2);
|
||||
text-align: center;
|
||||
}
|
||||
kbd {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
font: 500 10px var(--fonte-mono);
|
||||
color: var(--texto-3);
|
||||
}
|
||||
.estrela {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--texto-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.estrela.ativa {
|
||||
color: var(--aviso);
|
||||
}
|
||||
.estrela.ativa :global(svg) {
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { ChevronDown, ChevronUp } from '@lucide/svelte';
|
||||
import { estado } from '../estado.svelte';
|
||||
import RostoPrevia from './RostoPrevia.svelte';
|
||||
|
||||
// Um só mini-rosto em todas as telas (exceto Ao vivo, que já tem o rosto grande).
|
||||
let aberto = $state(true);
|
||||
try {
|
||||
aberto = localStorage.getItem('carinha_mini') !== '0';
|
||||
} catch {
|
||||
/* ok */
|
||||
}
|
||||
function alternar() {
|
||||
aberto = !aberto;
|
||||
try {
|
||||
localStorage.setItem('carinha_mini', aberto ? '1' : '0');
|
||||
} catch {
|
||||
/* ok */
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="mini" class:aberto aria-label="Rosto ao vivo">
|
||||
<button class="barra" onclick={alternar} aria-expanded={aberto}>
|
||||
<span class="ponto" class:online={estado.celularOnline} aria-hidden="true"></span>
|
||||
<span>Rosto {estado.celularOnline ? 'ao vivo' : '· celular offline'}</span>
|
||||
{#if aberto}<ChevronDown size={16} />{:else}<ChevronUp size={16} />{/if}
|
||||
</button>
|
||||
{#if aberto}
|
||||
<div class="tela"><RostoPrevia /></div>
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.mini {
|
||||
position: fixed;
|
||||
z-index: 55;
|
||||
right: var(--e-4);
|
||||
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
|
||||
width: 220px;
|
||||
border-radius: var(--raio);
|
||||
overflow: hidden;
|
||||
background: var(--vidro);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--borda-forte);
|
||||
box-shadow: var(--sombra-flutuante);
|
||||
}
|
||||
.barra {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding: var(--e-2) var(--e-3);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--texto-2);
|
||||
font: 500 var(--t-xs) var(--fonte);
|
||||
cursor: pointer;
|
||||
}
|
||||
.barra span:nth-child(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.ponto {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--texto-3);
|
||||
}
|
||||
.ponto.online {
|
||||
background: var(--ok);
|
||||
}
|
||||
.tela {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.mini {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.mini {
|
||||
bottom: var(--e-4);
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { SIMBOLO_EMOJI } from '../treinamento.svelte';
|
||||
|
||||
// Prévia estática de uma reação (sem iframe): figurinha SVG, emoji ou olhos do 1º passo.
|
||||
let { receita, tamanho = 64 }: { receita: any; tamanho?: number } = $props();
|
||||
const passo = $derived(receita?.passos?.[0]);
|
||||
const simbolo = $derived(receita?.emoji?.caractere || SIMBOLO_EMOJI[receita?.simbolo] || '');
|
||||
</script>
|
||||
|
||||
<div class="miniatura" style="--t: {tamanho}px" aria-hidden="true">
|
||||
{#if receita?.figurinha?.formas}
|
||||
<svg viewBox="0 0 100 100" width={tamanho} height={tamanho}>
|
||||
{#each receita.figurinha.formas as forma, i (i)}
|
||||
<path d={forma.caminho} fill={forma.cor} />
|
||||
{/each}
|
||||
</svg>
|
||||
{:else if receita?.emoji}
|
||||
<span class="emoji">{receita.emoji.caractere}</span>
|
||||
{:else}
|
||||
<svg viewBox="0 0 100 60" width={tamanho} height={tamanho * 0.6}>
|
||||
{#if passo?.olhos === 'feliz'}
|
||||
<path d="M18 38 Q30 18 42 38 M58 38 Q70 18 82 38" stroke={passo.cor} stroke-width="8" fill="none" stroke-linecap="round" />
|
||||
{:else if passo?.olhos === 'triste'}
|
||||
<path d="M18 26 Q30 44 42 26 M58 26 Q70 44 82 26" stroke={passo.cor} stroke-width="8" fill="none" stroke-linecap="round" />
|
||||
{:else}
|
||||
{@const ry = passo?.olhos === 'surpreso' ? 20 : 16}
|
||||
<ellipse cx="30" cy="30" rx="12" {ry} fill={passo?.cor ?? '#5cd6ff'} />
|
||||
<ellipse cx="70" cy="30" rx="12" {ry} fill={passo?.cor ?? '#5cd6ff'} />
|
||||
{/if}
|
||||
</svg>
|
||||
{#if simbolo}<span class="simbolo">{simbolo}</span>{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.miniatura {
|
||||
position: relative;
|
||||
width: var(--t);
|
||||
height: var(--t);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--raio);
|
||||
background: #05080c;
|
||||
flex: none;
|
||||
}
|
||||
.emoji {
|
||||
font-size: calc(var(--t) * 0.55);
|
||||
line-height: 1;
|
||||
}
|
||||
.simbolo {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
font-size: calc(var(--t) * 0.3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { X } from '@lucide/svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
// <dialog> nativo: foco preso, Esc e fundo vêm de graça.
|
||||
let { aberto = $bindable(false), titulo, children }: { aberto: boolean; titulo: string; children: Snippet } = $props();
|
||||
let dialogo: HTMLDialogElement;
|
||||
|
||||
$effect(() => {
|
||||
if (aberto && !dialogo.open) dialogo.showModal();
|
||||
else if (!aberto && dialogo.open) dialogo.close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<dialog
|
||||
bind:this={dialogo}
|
||||
onclose={() => (aberto = false)}
|
||||
onclick={(e) => e.target === dialogo && (aberto = false)}
|
||||
aria-label={titulo}
|
||||
>
|
||||
<div class="conteudo">
|
||||
<header>
|
||||
<h2>{titulo}</h2>
|
||||
<button class="btn fantasma icone pequeno" aria-label="Fechar" onclick={() => (aberto = false)}><X size={18} /></button>
|
||||
</header>
|
||||
{#if aberto}{@render children()}{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
width: min(480px, calc(100vw - 2 * var(--e-4)));
|
||||
padding: 0;
|
||||
border: 1px solid var(--borda-forte);
|
||||
border-radius: var(--raio-lg);
|
||||
background: var(--superficie);
|
||||
color: var(--texto);
|
||||
box-shadow: var(--sombra-flutuante);
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
.conteudo {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
padding: var(--e-5);
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--t-lg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import { Search } from '@lucide/svelte';
|
||||
import { itensDaPaleta, paleta, type ItemPaleta } from '../paleta.svelte';
|
||||
|
||||
let busca = $state('');
|
||||
let ativo = $state(0);
|
||||
let campo = $state<HTMLInputElement>();
|
||||
|
||||
const normal = (t: string) => t.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
|
||||
const itens = $derived.by(() => {
|
||||
const termos = normal(busca).split(/\s+/).filter(Boolean);
|
||||
return itensDaPaleta()
|
||||
.filter((i) => termos.every((t) => normal(i.grupo + ' ' + i.titulo).includes(t)))
|
||||
.slice(0, 50);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (paleta.aberta) {
|
||||
busca = '';
|
||||
ativo = 0;
|
||||
queueMicrotask(() => campo?.focus());
|
||||
}
|
||||
});
|
||||
$effect(() => {
|
||||
void busca;
|
||||
ativo = 0;
|
||||
});
|
||||
|
||||
function executar(i: ItemPaleta | undefined) {
|
||||
if (!i) return;
|
||||
paleta.fechar();
|
||||
i.fazer();
|
||||
}
|
||||
|
||||
function tecla(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
ativo = Math.min(itens.length - 1, ativo + 1);
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
ativo = Math.max(0, ativo - 1);
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'Enter') {
|
||||
executar(itens[ativo]);
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'Escape') {
|
||||
paleta.fechar();
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if paleta.aberta}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
|
||||
<div class="fundo" onclick={paleta.fechar}>
|
||||
<div class="caixa" role="dialog" tabindex="-1" aria-modal="true" aria-label="Comandos" onclick={(e) => e.stopPropagation()}>
|
||||
<div class="busca">
|
||||
<Search size={18} />
|
||||
<input
|
||||
bind:this={campo}
|
||||
bind:value={busca}
|
||||
onkeydown={tecla}
|
||||
placeholder="Gesto, rosto, tela ou ação…"
|
||||
aria-label="Buscar comando"
|
||||
role="combobox"
|
||||
aria-expanded="true"
|
||||
aria-controls="paleta-lista"
|
||||
aria-activedescendant={itens[ativo] ? 'pal-' + itens[ativo].id : undefined}
|
||||
/>
|
||||
<kbd>Esc</kbd>
|
||||
</div>
|
||||
<ul id="paleta-lista" role="listbox">
|
||||
{#each itens as item, i (item.id)}
|
||||
{#if i === 0 || itens[i - 1].grupo !== item.grupo}
|
||||
<li class="grupo" role="presentation">{item.grupo}</li>
|
||||
{/if}
|
||||
<li
|
||||
id={'pal-' + item.id}
|
||||
role="option"
|
||||
aria-selected={i === ativo}
|
||||
class:ativo={i === ativo}
|
||||
onmousemove={() => (ativo = i)}
|
||||
onclick={() => executar(item)}
|
||||
>
|
||||
<span>{item.titulo}</span>
|
||||
{#if item.dica}<kbd>{item.dica}</kbd>{/if}
|
||||
</li>
|
||||
{:else}
|
||||
<li class="vazio">Nada encontrado.</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.fundo {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 95;
|
||||
background: rgb(0 0 0 / 0.45);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
padding: 12vh var(--e-4) var(--e-4);
|
||||
}
|
||||
.caixa {
|
||||
width: min(560px, 100%);
|
||||
max-height: 70vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: var(--vidro);
|
||||
backdrop-filter: blur(18px);
|
||||
border: 1px solid var(--borda-forte);
|
||||
border-radius: var(--raio-lg);
|
||||
box-shadow: var(--sombra-flutuante);
|
||||
overflow: hidden;
|
||||
}
|
||||
.busca {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-3);
|
||||
padding: var(--e-3) var(--e-4);
|
||||
border-bottom: 1px solid var(--borda);
|
||||
color: var(--texto-3);
|
||||
}
|
||||
.busca input {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
min-height: 36px;
|
||||
font-size: var(--t-md);
|
||||
padding: 0;
|
||||
}
|
||||
.busca input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--e-2);
|
||||
overflow: auto;
|
||||
}
|
||||
li[role='option'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--e-2) var(--e-3);
|
||||
border-radius: var(--raio-sm);
|
||||
cursor: pointer;
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
li.ativo {
|
||||
background: var(--destaque-suave);
|
||||
color: var(--destaque);
|
||||
}
|
||||
.grupo {
|
||||
padding: var(--e-3) var(--e-3) var(--e-1);
|
||||
font-size: var(--t-xs);
|
||||
color: var(--texto-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.vazio {
|
||||
padding: var(--e-4);
|
||||
color: var(--texto-3);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
kbd {
|
||||
font: 500 11px var(--fonte-mono);
|
||||
color: var(--texto-3);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Prévia do rosto: o próprio carinha.html em modo ?painel=1 (sem polling).
|
||||
* O painel repassa por postMessage o que chega no SSE, então a prévia mostra
|
||||
* exatamente as mesmas ordens que o celular recebe.
|
||||
*/
|
||||
import { onDestroy } from 'svelte';
|
||||
import { estado, ouvir } from '../estado.svelte';
|
||||
|
||||
let { titulo = 'Prévia do rosto' }: { titulo?: string } = $props();
|
||||
let quadro: HTMLIFrameElement;
|
||||
let pronto = $state(false);
|
||||
|
||||
function enviar(msg: unknown) {
|
||||
if (pronto) quadro?.contentWindow?.postMessage(msg, location.origin);
|
||||
}
|
||||
|
||||
function aoCarregar() {
|
||||
pronto = true;
|
||||
if (estado.appConfig) enviar({ tipo: 'config', config: $state.snapshot(estado.appConfig) });
|
||||
}
|
||||
|
||||
let ultimaConversa = estado.conversa?.ultima?.id;
|
||||
const cancelar = [
|
||||
ouvir('expressao', (d) => enviar({ tipo: 'ordem', ordem: d.ordem })),
|
||||
ouvir('app_config', (c) => enviar({ tipo: 'config', config: c })),
|
||||
ouvir('reacao', (r) => r?.receita && enviar({ tipo: 'previa-reacao', receita: r.receita })),
|
||||
// O celular reage à resposta da conversa com acordar + gesto; a prévia imita.
|
||||
ouvir('conversa', (c) => {
|
||||
if (c.ultima && c.ultima.id !== ultimaConversa) {
|
||||
ultimaConversa = c.ultima.id;
|
||||
enviar({ tipo: 'ordem', ordem: 'acordar' });
|
||||
enviar({ tipo: 'ordem', ordem: c.ultima.gesto });
|
||||
}
|
||||
}),
|
||||
];
|
||||
onDestroy(() => cancelar.forEach((c) => c()));
|
||||
|
||||
/** Para a tela de reações: mostra uma receita sem mandar ao celular. */
|
||||
export function previa(receita: unknown) {
|
||||
enviar({ tipo: 'previa-reacao', receita });
|
||||
}
|
||||
</script>
|
||||
|
||||
<iframe
|
||||
bind:this={quadro}
|
||||
src="/carinha.html?espelho=1&painel=1&auto=0&camera=0&audio=0"
|
||||
title={titulo}
|
||||
tabindex="-1"
|
||||
onload={aoCarregar}
|
||||
></iframe>
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #000;
|
||||
border-radius: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
// Estado nunca só por cor: o selo sempre tem texto (e o ponto é decorativo).
|
||||
let { tom = 'neutro', children }: { tom?: 'ok' | 'aviso' | 'perigo' | 'neutro' | 'destaque'; children: Snippet } =
|
||||
$props();
|
||||
</script>
|
||||
|
||||
<span class="selo {tom}"><span class="ponto" aria-hidden="true"></span>{@render children()}</span>
|
||||
|
||||
<style>
|
||||
.selo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 10px;
|
||||
border-radius: var(--raio-pill);
|
||||
font-size: var(--t-xs);
|
||||
font-weight: 500;
|
||||
background: var(--superficie-2);
|
||||
color: var(--texto-2);
|
||||
border: 1px solid var(--borda);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ponto {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.ok {
|
||||
color: var(--ok);
|
||||
background: var(--ok-suave);
|
||||
border-color: transparent;
|
||||
}
|
||||
.aviso {
|
||||
color: var(--aviso);
|
||||
background: var(--aviso-suave);
|
||||
border-color: transparent;
|
||||
}
|
||||
.perigo {
|
||||
color: var(--perigo);
|
||||
background: var(--perigo-suave);
|
||||
border-color: transparent;
|
||||
}
|
||||
.destaque {
|
||||
color: var(--destaque);
|
||||
background: var(--destaque-suave);
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
let { rotulo, valor, min, max, passo = 1, unidade = '', disabled = false, oninput, onchange }: {
|
||||
rotulo: string;
|
||||
valor: number;
|
||||
min: number;
|
||||
max: number;
|
||||
passo?: number;
|
||||
unidade?: string;
|
||||
disabled?: boolean;
|
||||
oninput?: (v: number) => void;
|
||||
onchange?: (v: number) => void;
|
||||
} = $props();
|
||||
const id = 's' + Math.random().toString(36).slice(2, 9);
|
||||
let local = $state<number | null>(null);
|
||||
const mostrado = $derived(local ?? valor);
|
||||
const casas = $derived(passo < 1 ? Math.min(2, String(passo).split('.')[1]?.length ?? 2) : 0);
|
||||
</script>
|
||||
|
||||
<div class="slider">
|
||||
<label for={id}>
|
||||
<span>{rotulo}</span>
|
||||
<output for={id} class="mono">{mostrado.toFixed(casas)}{unidade}</output>
|
||||
</label>
|
||||
<input
|
||||
{id}
|
||||
type="range"
|
||||
{min}
|
||||
{max}
|
||||
step={passo}
|
||||
value={mostrado}
|
||||
{disabled}
|
||||
style="--p: {((mostrado - min) / (max - min)) * 100}%"
|
||||
oninput={(e) => {
|
||||
local = Number(e.currentTarget.value);
|
||||
oninput?.(local);
|
||||
}}
|
||||
onchange={(e) => {
|
||||
const v = Number(e.currentTarget.value);
|
||||
local = null;
|
||||
onchange?.(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.slider {
|
||||
display: grid;
|
||||
gap: var(--e-1);
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--t-sm);
|
||||
gap: var(--e-2);
|
||||
}
|
||||
output {
|
||||
color: var(--texto-2);
|
||||
}
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
input::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(to right, var(--destaque) var(--p), var(--superficie-3) var(--p));
|
||||
}
|
||||
input::-moz-range-track {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(to right, var(--destaque) var(--p), var(--superficie-3) var(--p));
|
||||
}
|
||||
input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -7px;
|
||||
border-radius: 50%;
|
||||
background: var(--texto);
|
||||
border: 3px solid var(--destaque);
|
||||
}
|
||||
input::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--texto);
|
||||
border: 3px solid var(--destaque);
|
||||
}
|
||||
input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
let { rotulo, ajuda = '', checked = false, disabled = false, onchange }: {
|
||||
rotulo: string;
|
||||
ajuda?: string;
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
onchange: (v: boolean) => void;
|
||||
} = $props();
|
||||
const id = 't' + Math.random().toString(36).slice(2, 9);
|
||||
</script>
|
||||
|
||||
<label class="toggle" for={id}>
|
||||
<span class="texto">
|
||||
<span>{rotulo}</span>
|
||||
{#if ajuda}<small class="fraco">{ajuda}</small>{/if}
|
||||
</span>
|
||||
<input {id} type="checkbox" role="switch" {checked} {disabled} onchange={(e) => onchange(e.currentTarget.checked)} />
|
||||
<span class="trilho" aria-hidden="true"></span>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--e-3);
|
||||
min-height: 44px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.texto {
|
||||
display: grid;
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
small {
|
||||
font-size: var(--t-xs);
|
||||
}
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.trilho {
|
||||
flex: none;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
border-radius: var(--raio-pill);
|
||||
background: var(--superficie-3);
|
||||
border: 1px solid var(--borda-forte);
|
||||
position: relative;
|
||||
transition: background var(--transicao);
|
||||
}
|
||||
.trilho::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--texto-2);
|
||||
transition: transform var(--transicao), background var(--transicao);
|
||||
}
|
||||
input:checked + .trilho {
|
||||
background: var(--destaque);
|
||||
border-color: var(--destaque);
|
||||
}
|
||||
input:checked + .trilho::after {
|
||||
transform: translateX(18px);
|
||||
background: var(--destaque-texto);
|
||||
}
|
||||
input:focus-visible + .trilho {
|
||||
outline: 2px solid var(--destaque);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
input:disabled + .trilho {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { KeyRound } from '@lucide/svelte';
|
||||
import { gravarToken } from '../api';
|
||||
import { conectar } from '../estado.svelte';
|
||||
|
||||
let token = $state('');
|
||||
async function entrar(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
gravarToken(token.trim());
|
||||
await conectar();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fundo">
|
||||
<form class="caixa" onsubmit={entrar}>
|
||||
<KeyRound size={28} />
|
||||
<h1>Token do Carinha</h1>
|
||||
<p class="fraco pequeno-texto">
|
||||
Este servidor exige um token para controlar o robô. Ele fica em <span class="mono">CARINHA_TOKEN</span> ou
|
||||
<span class="mono">seguranca.json</span> na placa e é guardado só neste navegador.
|
||||
</p>
|
||||
<label class="campo">
|
||||
<span>Token</span>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input type="password" bind:value={token} autocomplete="current-password" required minlength="8" autofocus />
|
||||
</label>
|
||||
<button class="btn primario" type="submit">Entrar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fundo {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--e-4);
|
||||
background: var(--fundo);
|
||||
}
|
||||
.caixa {
|
||||
width: min(400px, 100%);
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
padding: var(--e-6);
|
||||
border-radius: var(--raio-lg);
|
||||
background: var(--superficie);
|
||||
border: 1px solid var(--borda);
|
||||
color: var(--destaque);
|
||||
}
|
||||
h1,
|
||||
p,
|
||||
label {
|
||||
color: var(--texto);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* Estado do painel: uma foto inicial (/estado) + um único fluxo SSE (/eventos).
|
||||
* Nenhuma tela faz polling; todas leem daqui.
|
||||
*/
|
||||
import { ErroApi, pedir, quandoNegado, urlEventos } from './api';
|
||||
import type { AppConfig, Conversa, EstadoServidor, IA, Motores, Reacao, Telemetria } from './tipos';
|
||||
|
||||
export type Conexao = 'conectando' | 'aberta' | 'caiu' | 'token';
|
||||
|
||||
export interface ItemFeed {
|
||||
id: number;
|
||||
quando: number;
|
||||
tipo: string;
|
||||
texto: string;
|
||||
}
|
||||
|
||||
class Estado {
|
||||
conexao = $state<Conexao>('conectando');
|
||||
versao = $state('');
|
||||
autenticacao = $state(false);
|
||||
estop = $state({ ativo: false, desde: null as number | null });
|
||||
aparencia = $state({ rosto: 'carinha', cor: [92, 214, 255] as [number, number, number] });
|
||||
gestos = $state<string[]>([]);
|
||||
rostos = $state<string[]>([]);
|
||||
app = $state<Telemetria | null>(null);
|
||||
appRecebidoEm = $state(0);
|
||||
appConfig = $state<AppConfig | null>(null);
|
||||
motores = $state<Motores | null>(null);
|
||||
conversa = $state<Conversa | null>(null);
|
||||
ia = $state<IA | null>(null);
|
||||
reacao = $state<Reacao | null>(null);
|
||||
treinamento = $state({ ocupado: false, erro: '' });
|
||||
api = $state<EstadoServidor['api'] | null>(null);
|
||||
feed = $state<ItemFeed[]>([]);
|
||||
/** Relógio de 1 s para derivar "online" sem esperar evento novo. */
|
||||
agora = $state(Date.now());
|
||||
|
||||
celularOnline = $derived(!!this.app?.online && this.agora - this.appRecebidoEm < 6000);
|
||||
}
|
||||
|
||||
export const estado = new Estado();
|
||||
|
||||
type Ouvinte = (dados: any) => void;
|
||||
const ouvintes = new Map<string, Set<Ouvinte>>();
|
||||
|
||||
/** Assina um tipo de evento do servidor; devolve a função para cancelar. */
|
||||
export function ouvir(tipo: string, fn: Ouvinte): () => void {
|
||||
if (!ouvintes.has(tipo)) ouvintes.set(tipo, new Set());
|
||||
ouvintes.get(tipo)!.add(fn);
|
||||
return () => ouvintes.get(tipo)!.delete(fn);
|
||||
}
|
||||
|
||||
let seqFeed = 0;
|
||||
function noFeed(tipo: string, texto: string) {
|
||||
estado.feed = [{ id: ++seqFeed, quando: Date.now(), tipo, texto }, ...estado.feed].slice(0, 40);
|
||||
}
|
||||
|
||||
function aplicarFoto(f: EstadoServidor) {
|
||||
estado.versao = f.versao;
|
||||
estado.autenticacao = f.autenticacao;
|
||||
estado.estop = f.estop;
|
||||
estado.aparencia = f.aparencia;
|
||||
estado.gestos = f.gestos;
|
||||
estado.rostos = f.rostos;
|
||||
if (f.app) {
|
||||
estado.app = f.app;
|
||||
estado.appRecebidoEm = Date.now();
|
||||
}
|
||||
if (f.app_config) estado.appConfig = f.app_config;
|
||||
if (f.motores) estado.motores = f.motores;
|
||||
if (f.conversa) estado.conversa = f.conversa;
|
||||
if (f.ia) estado.ia = f.ia;
|
||||
estado.reacao = f.reacao ?? null;
|
||||
if (f.treinamento) estado.treinamento = f.treinamento;
|
||||
if (f.api) estado.api = f.api;
|
||||
}
|
||||
|
||||
const tratadores: Record<string, (d: any) => void> = {
|
||||
expressao: (d: { ordem: string }) => {
|
||||
if (d.ordem !== 'calma') noFeed('expressao', 'Expressão: ' + d.ordem);
|
||||
},
|
||||
telemetria: (d: Telemetria) => {
|
||||
estado.app = d;
|
||||
estado.appRecebidoEm = Date.now();
|
||||
},
|
||||
app_config: (d: AppConfig) => (estado.appConfig = d),
|
||||
aparencia: (d) => (estado.aparencia = d),
|
||||
motores: (d: Motores) => (estado.motores = d),
|
||||
estop: (d) => {
|
||||
estado.estop = d;
|
||||
noFeed('estop', d.ativo ? 'E-Stop acionado' : 'Motores rearmados');
|
||||
},
|
||||
conversa: (d: Conversa) => {
|
||||
const nova = d.ultima && d.ultima.id !== estado.conversa?.ultima?.id;
|
||||
estado.conversa = d;
|
||||
if (nova) noFeed('conversa', 'Carinha: ' + d.ultima!.texto);
|
||||
},
|
||||
ia: (d: IA) => {
|
||||
const nova = d.ultima && d.ultima.horario !== estado.ia?.ultima?.horario;
|
||||
estado.ia = d;
|
||||
if (nova) noFeed('ia', `IA local: ${d.ultima!.evento} → ${d.ultima!.gesto}`);
|
||||
},
|
||||
reacao: (d: Reacao | null) => {
|
||||
estado.reacao = d;
|
||||
if (d?.receita?.nome) noFeed('reacao', 'Reação: ' + d.receita.nome);
|
||||
},
|
||||
treinamento: (d) => (estado.treinamento = d),
|
||||
};
|
||||
|
||||
let fonte: EventSource | null = null;
|
||||
let primeiraAbertura = true;
|
||||
|
||||
export async function carregarFoto() {
|
||||
aplicarFoto(await pedir<EstadoServidor>('/estado'));
|
||||
}
|
||||
|
||||
function abrirEventos() {
|
||||
fonte?.close();
|
||||
fonte = new EventSource(urlEventos());
|
||||
fonte.addEventListener('pronto', async () => {
|
||||
estado.conexao = 'aberta';
|
||||
// Ao reconectar, ressincroniza: pode ter perdido eventos além do buffer do servidor.
|
||||
if (!primeiraAbertura) carregarFoto().catch(() => {});
|
||||
primeiraAbertura = false;
|
||||
});
|
||||
fonte.onerror = () => {
|
||||
if (estado.conexao !== 'token') estado.conexao = 'caiu';
|
||||
};
|
||||
for (const tipo of ['expressao', 'telemetria', 'app_config', 'aparencia', 'motores', 'estop', 'conversa', 'ia',
|
||||
'reacao', 'treinamento']) {
|
||||
fonte.addEventListener(tipo, (e) => {
|
||||
const dados = JSON.parse((e as MessageEvent).data);
|
||||
tratadores[tipo]?.(dados);
|
||||
ouvintes.get(tipo)?.forEach((fn) => fn(dados));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function conectar() {
|
||||
estado.conexao = 'conectando';
|
||||
try {
|
||||
await carregarFoto();
|
||||
} catch (e) {
|
||||
if (e instanceof ErroApi && e.status === 401) {
|
||||
estado.conexao = 'token';
|
||||
return;
|
||||
}
|
||||
estado.conexao = 'caiu';
|
||||
setTimeout(conectar, 3000);
|
||||
return;
|
||||
}
|
||||
abrirEventos();
|
||||
}
|
||||
|
||||
quandoNegado(() => {
|
||||
estado.conexao = 'token';
|
||||
fonte?.close();
|
||||
fonte = null;
|
||||
});
|
||||
|
||||
setInterval(() => (estado.agora = Date.now()), 1000);
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Lógica pura do painel (sem Svelte nem DOM), testada com `npm test` (node --test).
|
||||
* Rastreamento: escolha do alvo e encaixe do vídeo. Braço: faixas calibradas e sequências.
|
||||
*/
|
||||
|
||||
export interface Ponto {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
export interface Face extends Ponto {
|
||||
w: number;
|
||||
h: number;
|
||||
score?: number;
|
||||
pontos?: Ponto[];
|
||||
}
|
||||
export interface AlvoRastreio {
|
||||
tipo: 'mao' | 'rosto';
|
||||
x: number;
|
||||
y: number;
|
||||
atividade?: boolean;
|
||||
}
|
||||
|
||||
const valido = (p: Ponto | undefined) => !!p && Number.isFinite(p.x) && Number.isFinite(p.y);
|
||||
const limitar01 = (v: number) => Math.max(0, Math.min(1, v));
|
||||
|
||||
/** Mão tem prioridade sobre rosto; entre candidatos do mesmo tipo, o mais perto do alvo anterior. */
|
||||
export function escolherAlvo(faces: Face[], maos: Ponto[][], anterior: AlvoRastreio | null = null): AlvoRastreio | null {
|
||||
let candidatos: AlvoRastreio[] = maos
|
||||
.filter((h) => h.length === 21 && h.every(valido))
|
||||
.map((h) => {
|
||||
const palma = [0, 5, 9, 13, 17].map((i) => h[i]);
|
||||
return { tipo: 'mao', x: palma.reduce((s, p) => s + p.x, 0) / 5, y: palma.reduce((s, p) => s + p.y, 0) / 5 };
|
||||
});
|
||||
if (!candidatos.length)
|
||||
candidatos = faces
|
||||
.filter((f) => valido(f) && Number.isFinite(f.w) && Number.isFinite(f.h) && f.w > 0 && f.h > 0)
|
||||
.sort((a, b) => b.w * b.h - a.w * a.h)
|
||||
.map((f) => ({ tipo: 'rosto', x: f.x + f.w / 2, y: f.y + f.h / 2 }));
|
||||
if (!candidatos.length) return null;
|
||||
if (anterior && anterior.tipo === candidatos[0].tipo)
|
||||
candidatos.sort((a, b) => Math.hypot(a.x - anterior.x, a.y - anterior.y) - Math.hypot(b.x - anterior.x, b.y - anterior.y));
|
||||
const t = candidatos[0];
|
||||
return { ...t, x: limitar01(t.x), y: limitar01(t.y) };
|
||||
}
|
||||
|
||||
/** Retângulo do vídeo (vw×vh) encaixado em w×h sem cortar (object-fit: contain). */
|
||||
export function encaixe(w: number, h: number, vw: number, vh: number) {
|
||||
const escala = Math.min(w / vw, h / vh);
|
||||
return { x: Math.max(0, (w - vw * escala) / 2), y: Math.max(0, (h - vh * escala) / 2), w: vw * escala, h: vh * escala };
|
||||
}
|
||||
|
||||
export interface Calibracao {
|
||||
canal: number;
|
||||
minimo: number;
|
||||
maximo: number;
|
||||
centro?: number;
|
||||
}
|
||||
|
||||
function anguloDoPulso(p: number, c: Calibracao) {
|
||||
const centro = c.centro ?? 1500;
|
||||
return p <= centro ? (90 * (p - 500)) / (centro - 500) : 90 + (90 * (p - centro)) / (2500 - centro);
|
||||
}
|
||||
|
||||
/** Faixa segura (graus) de cada articulação; o canal 5 respeita o par 6 invertido. */
|
||||
export function limites(calibracao: Calibracao[], articulacoes: { canal: number }[]): [number, number][] {
|
||||
return articulacoes.map(({ canal }) => {
|
||||
const c = calibracao[canal];
|
||||
let lo = anguloDoPulso(c.minimo, c);
|
||||
let hi = anguloDoPulso(c.maximo, c);
|
||||
if (canal === 5) {
|
||||
const par = calibracao[6];
|
||||
lo = Math.max(lo, 180 - anguloDoPulso(par.maximo, par));
|
||||
hi = Math.min(hi, 180 - anguloDoPulso(par.minimo, par));
|
||||
}
|
||||
return [Math.ceil(lo), Math.floor(hi)];
|
||||
});
|
||||
}
|
||||
|
||||
/** As 5 sequências prontas, escaladas para a faixa calibrada de cada articulação. */
|
||||
export function sequencias(faixas: [number, number][]): { nome: string; passos: number[][] }[] {
|
||||
const neutro = [0, 0, 0, 0, 0, 0, 0];
|
||||
const base: [string, number[][]][] = [
|
||||
['Acenar', [[0, -0.7, 0.5, 0.2, 0, 0.1, 0], [0, 0.7, -0.5, 0.2, 0, 0.1, 0], [0, -0.7, 0.5, 0.2, 0, 0.1, 0], [0, 0.7, -0.5, 0.2, 0, 0.1, 0], neutro]],
|
||||
['Olhar para os lados', [[0, 0.2, -0.4, 0, 0, 0, -0.7], [0, -0.2, 0.4, 0, 0, 0, 0.7], neutro]],
|
||||
['Alcançar e recolher', [[0, 0, 0.2, 0.6, -0.5, 0.4, 0], [0, 0, -0.2, -0.4, 0.5, -0.4, 0], neutro]],
|
||||
['Garra e punho', [[-0.7, 0.3, 0, 0.2, 0, 0.1, 0], [0.7, -0.3, 0, 0.2, 0, 0.1, 0], [-0.7, 0.3, 0, 0, 0, 0, 0], neutro]],
|
||||
['Apresentação', [[0.3, 0.3, -0.3, 0.4, -0.3, 0.3, -0.6], [-0.3, -0.3, 0.3, -0.3, 0.4, -0.3, 0.6], [0.5, 0.4, 0.2, 0.3, -0.3, 0.2, 0], neutro]],
|
||||
];
|
||||
return base.map(([nome, passos]) => ({
|
||||
nome,
|
||||
passos: passos.map((s) =>
|
||||
s.map((v, i) => {
|
||||
const [lo, hi] = faixas[i];
|
||||
const meio = Math.max(lo, Math.min(hi, 90));
|
||||
return Math.round(meio + v * (v < 0 ? meio - lo : hi - meio));
|
||||
}),
|
||||
),
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/** Registro da command palette (Ctrl+K): cada parte do painel contribui com itens. */
|
||||
import { cor, CORES, gesto, GESTOS_INFO, gestosDisponiveis, pararTudo, rearmar, recarregarCelular, rosto } from './comandos.svelte';
|
||||
import { estado } from './estado.svelte';
|
||||
import { nav, ROTAS } from './rotas.svelte';
|
||||
|
||||
export interface ItemPaleta {
|
||||
id: string;
|
||||
grupo: string;
|
||||
titulo: string;
|
||||
dica?: string;
|
||||
fazer: () => unknown;
|
||||
}
|
||||
|
||||
type Fonte = () => ItemPaleta[];
|
||||
const fontes = new Set<Fonte>();
|
||||
|
||||
export function registrarNaPaleta(fonte: Fonte): () => void {
|
||||
fontes.add(fonte);
|
||||
return () => fontes.delete(fonte);
|
||||
}
|
||||
|
||||
class Paleta {
|
||||
aberta = $state(false);
|
||||
abrir = () => (this.aberta = true);
|
||||
fechar = () => (this.aberta = false);
|
||||
}
|
||||
export const paleta = new Paleta();
|
||||
|
||||
export function itensDaPaleta(): ItemPaleta[] {
|
||||
return [...fontes].flatMap((f) => f());
|
||||
}
|
||||
|
||||
// Itens base: navegação, ações gerais, gestos, rostos e cores.
|
||||
registrarNaPaleta(() => [
|
||||
...ROTAS.map((r) => ({ id: 'ir-' + r.id, grupo: 'Ir para', titulo: r.titulo, fazer: () => nav.ir(r.id) })),
|
||||
estado.estop.ativo
|
||||
? { id: 'rearmar', grupo: 'Ações', titulo: 'Rearmar motores', fazer: rearmar }
|
||||
: { id: 'estop', grupo: 'Ações', titulo: 'Parar tudo (E-Stop)', dica: 'Shift+Espaço', fazer: pararTudo },
|
||||
{ id: 'recarregar', grupo: 'Ações', titulo: 'Recarregar tela do celular', fazer: recarregarCelular },
|
||||
...gestosDisponiveis().map((g) => ({
|
||||
id: 'gesto-' + g,
|
||||
grupo: 'Gestos',
|
||||
titulo: `${GESTOS_INFO[g].emoji} ${GESTOS_INFO[g].nome}`,
|
||||
fazer: () => gesto(g),
|
||||
})),
|
||||
...estado.rostos.map((r) => ({ id: 'rosto-' + r, grupo: 'Rosto', titulo: 'Rosto ' + r, fazer: () => rosto(r) })),
|
||||
...CORES.map((c) => ({ id: 'cor-' + c.nome, grupo: 'Cor dos olhos', titulo: c.nome, fazer: () => cor(c.rgb) })),
|
||||
]);
|
||||
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Rastreamento de rosto/mãos no navegador do PC (MediaPipe num Worker servido pelo
|
||||
* servidor em /rastreador-worker.js). Porta de painel-rastreamento.js + rastreamento-core.js.
|
||||
*/
|
||||
import type { AppConfig } from './tipos';
|
||||
import { encaixe, escolherAlvo, type AlvoRastreio, type Face, type Ponto } from './nucleo';
|
||||
import type { VideoAoVivo } from './video.svelte';
|
||||
|
||||
interface Resultado {
|
||||
faces: Face[];
|
||||
hands: Ponto[][];
|
||||
ms: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
const LIGACOES = [[0, 1], [1, 2], [2, 3], [3, 4], [0, 5], [5, 6], [6, 7], [7, 8], [5, 9], [9, 10], [10, 11], [11, 12],
|
||||
[9, 13], [13, 14], [14, 15], [15, 16], [13, 17], [0, 17], [17, 18], [18, 19], [19, 20]];
|
||||
|
||||
export class Rastreamento {
|
||||
texto = $state('Rastreamento desligado.');
|
||||
|
||||
private worker: Worker | null = null;
|
||||
private pronto = false;
|
||||
private pendente = false;
|
||||
private geracao = 0;
|
||||
private ativo = false;
|
||||
private config: AppConfig = {};
|
||||
private resultado: Resultado | null = null;
|
||||
private alvo: AlvoRastreio | null = null;
|
||||
private alvoEm = 0;
|
||||
private em = 0;
|
||||
private intervalo = 50;
|
||||
private proximo = 0;
|
||||
private ultimoVideo = -1;
|
||||
private tentarEm = 0;
|
||||
private amostraAnterior = 0;
|
||||
private rascunho = document.createElement('canvas');
|
||||
private relogio: number;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
|
||||
constructor(
|
||||
private video: HTMLVideoElement,
|
||||
private tela: HTMLCanvasElement,
|
||||
private saida: VideoAoVivo,
|
||||
) {
|
||||
this.ctx = tela.getContext('2d')!;
|
||||
this.relogio = window.setInterval(() => this.passo(), 20);
|
||||
addEventListener('resize', this.desenhar);
|
||||
}
|
||||
|
||||
private limpar() {
|
||||
this.ctx.clearRect(0, 0, this.tela.width, this.tela.height);
|
||||
}
|
||||
|
||||
private parar(texto: string) {
|
||||
if (this.ativo) this.saida.rastrear(null);
|
||||
this.ativo = false;
|
||||
this.geracao++;
|
||||
this.worker?.terminate();
|
||||
this.worker = null;
|
||||
this.pendente = this.pronto = false;
|
||||
this.resultado = this.alvo = null;
|
||||
this.ultimoVideo = -1;
|
||||
this.amostraAnterior = 0;
|
||||
this.limpar();
|
||||
this.texto = texto;
|
||||
}
|
||||
|
||||
private desenhar = () => {
|
||||
const caixa = this.tela.parentElement!.getBoundingClientRect();
|
||||
if (this.tela.width !== Math.round(caixa.width) || this.tela.height !== Math.round(caixa.height)) {
|
||||
this.tela.width = Math.round(caixa.width);
|
||||
this.tela.height = Math.round(caixa.height);
|
||||
}
|
||||
this.limpar();
|
||||
this.tela.hidden = !this.config.mostrarRastreamento;
|
||||
const r = this.resultado;
|
||||
if (this.tela.hidden || !r || performance.now() - this.em > 350 || !this.video.videoWidth) return;
|
||||
const f = encaixe(this.tela.width, this.tela.height, this.video.videoWidth, this.video.videoHeight);
|
||||
const pt = (p: Ponto) => ({ x: f.x + p.x * f.w, y: f.y + p.y * f.h });
|
||||
const c = this.ctx;
|
||||
c.lineWidth = 2;
|
||||
c.font = '13px system-ui';
|
||||
const bola = (p: Ponto, raio = 3) => {
|
||||
c.beginPath();
|
||||
c.arc(p.x, p.y, raio, 0, Math.PI * 2);
|
||||
c.fill();
|
||||
};
|
||||
for (const rosto of r.faces) {
|
||||
const p = pt(rosto);
|
||||
c.strokeStyle = c.fillStyle = '#5cd6ff';
|
||||
c.strokeRect(p.x, p.y, rosto.w * f.w, rosto.h * f.h);
|
||||
c.fillText('Rosto ' + Math.round((rosto.score ?? 0) * 100) + '%', p.x, Math.max(15, p.y - 6));
|
||||
for (const q of rosto.pontos || []) bola(pt(q));
|
||||
}
|
||||
for (const mao of r.hands) {
|
||||
c.strokeStyle = c.fillStyle = '#4ade80';
|
||||
for (const [a, b] of LIGACOES) {
|
||||
const p = pt(mao[a]);
|
||||
const q = pt(mao[b]);
|
||||
c.beginPath();
|
||||
c.moveTo(p.x, p.y);
|
||||
c.lineTo(q.x, q.y);
|
||||
c.stroke();
|
||||
}
|
||||
for (const q of mao) bola(pt(q));
|
||||
}
|
||||
if (this.alvo) {
|
||||
const p = pt(this.alvo);
|
||||
c.strokeStyle = '#fbbf24';
|
||||
c.beginPath();
|
||||
c.arc(p.x, p.y, 12, 0, Math.PI * 2);
|
||||
c.moveTo(p.x - 18, p.y);
|
||||
c.lineTo(p.x + 18, p.y);
|
||||
c.moveTo(p.x, p.y - 18);
|
||||
c.lineTo(p.x, p.y + 18);
|
||||
c.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
private iniciar() {
|
||||
this.ativo = true;
|
||||
const geracao = ++this.geracao;
|
||||
this.worker = new Worker('/rastreador-worker.js');
|
||||
this.texto = 'Carregando rastreadores locais…';
|
||||
this.worker.onerror = (e) => {
|
||||
this.tentarEm = Date.now() + 10000;
|
||||
this.parar('Falha no rastreador: ' + e.message);
|
||||
};
|
||||
this.worker.onmessage = ({ data }) => {
|
||||
if (geracao !== this.geracao) return;
|
||||
this.pendente = false;
|
||||
if (data.tipo === 'erro') {
|
||||
this.tentarEm = Date.now() + 10000;
|
||||
this.parar('Rastreamento indisponível: ' + data.erro);
|
||||
return;
|
||||
}
|
||||
this.pronto = true;
|
||||
if (data.tipo === 'pronto') {
|
||||
this.texto = 'Rastreadores prontos. Aguardando imagem…';
|
||||
return;
|
||||
}
|
||||
const r = data as Resultado;
|
||||
this.resultado = r;
|
||||
this.em = r.timestamp;
|
||||
const anterior = this.alvo;
|
||||
const alvo = escolherAlvo(r.faces, r.hands, anterior);
|
||||
if (alvo) alvo.atividade = !!anterior && alvo.tipo === anterior.tipo && Math.hypot(alvo.x - anterior.x, alvo.y - anterior.y) > 0.008;
|
||||
this.alvo = alvo;
|
||||
this.alvoEm = r.timestamp;
|
||||
this.intervalo = Math.max(50, Math.min(200, r.ms * 1.2));
|
||||
const hz = this.amostraAnterior ? Math.round(1000 / (r.timestamp - this.amostraAnterior)) : 0;
|
||||
this.amostraAnterior = r.timestamp;
|
||||
this.texto = `${r.faces.length} rosto(s) · ${r.hands.length} mão(s) · ${hz} análises/s · ${Math.round(r.ms)} ms${
|
||||
alvo ? ' · alvo: ' + (alvo.tipo === 'mao' ? 'mão' : 'rosto') : ' · procurando…'
|
||||
}`;
|
||||
if (this.config.seguirRastreamento) this.saida.rastrear(alvo);
|
||||
this.desenhar();
|
||||
};
|
||||
this.pendente = true;
|
||||
this.worker.postMessage({ config: { rosto: this.config.rastrearRosto, maos: this.config.rastrearMaos } });
|
||||
}
|
||||
|
||||
private async passo() {
|
||||
const agora = performance.now();
|
||||
if (this.alvo && agora - this.alvoEm > 350) {
|
||||
this.alvo = null;
|
||||
if (this.config.seguirRastreamento) this.saida.rastrear(null);
|
||||
}
|
||||
if (this.resultado && agora - this.em > 350) {
|
||||
this.resultado = null;
|
||||
this.limpar();
|
||||
}
|
||||
const v = this.video;
|
||||
if (!this.ativo || !this.pronto || this.pendente || agora < this.proximo || v.readyState < 2 || v.currentTime === this.ultimoVideo)
|
||||
return;
|
||||
this.pendente = true;
|
||||
this.proximo = agora + this.intervalo;
|
||||
this.ultimoVideo = v.currentTime;
|
||||
const geracao = this.geracao;
|
||||
try {
|
||||
const escala = Math.min(1, 640 / v.videoWidth);
|
||||
this.rascunho.width = Math.round(v.videoWidth * escala);
|
||||
this.rascunho.height = Math.round(v.videoHeight * escala);
|
||||
this.rascunho.getContext('2d')!.drawImage(v, 0, 0, this.rascunho.width, this.rascunho.height);
|
||||
const bitmap = await createImageBitmap(this.rascunho);
|
||||
if (geracao !== this.geracao) return bitmap.close();
|
||||
this.worker!.postMessage(
|
||||
{ bitmap, timestamp: agora, config: { rosto: this.config.rastrearRosto, maos: this.config.rastrearMaos } },
|
||||
[bitmap],
|
||||
);
|
||||
} catch (e) {
|
||||
if (geracao === this.geracao) this.parar('Falha ao analisar vídeo: ' + (e as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
atualizar(config: AppConfig | null, permitido: boolean) {
|
||||
if (!config) return;
|
||||
const mudou = this.config.rastrearRosto !== config.rastrearRosto || this.config.rastrearMaos !== config.rastrearMaos;
|
||||
if (this.config.seguirRastreamento && !config.seguirRastreamento) this.saida.rastrear(null);
|
||||
this.config = config;
|
||||
if (!permitido || (!config.rastrearRosto && !config.rastrearMaos)) {
|
||||
this.parar(!permitido ? 'Ligue a transmissão para rastrear no PC.' : 'Rastreamento desligado.');
|
||||
return;
|
||||
}
|
||||
if (mudou && this.ativo) this.parar('Atualizando rastreadores…');
|
||||
if (!this.ativo && Date.now() >= this.tentarEm) this.iniciar();
|
||||
this.desenhar();
|
||||
}
|
||||
|
||||
destruir() {
|
||||
clearInterval(this.relogio);
|
||||
removeEventListener('resize', this.desenhar);
|
||||
this.parar('Painel fechado.');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/** Rotas por hash (#/conversa): o servidor só precisa entregar index.html em "/". */
|
||||
|
||||
export type Rota = 'ao-vivo' | 'conversa' | 'reacoes' | 'movimento' | 'ajustes';
|
||||
|
||||
export const ROTAS: { id: Rota; titulo: string; atalho: string }[] = [
|
||||
{ id: 'ao-vivo', titulo: 'Ao vivo', atalho: 'g v' },
|
||||
{ id: 'conversa', titulo: 'Conversa', atalho: 'g c' },
|
||||
{ id: 'reacoes', titulo: 'Reações', atalho: 'g r' },
|
||||
{ id: 'movimento', titulo: 'Movimento', atalho: 'g m' },
|
||||
{ id: 'ajustes', titulo: 'Ajustes', atalho: 'g a' },
|
||||
];
|
||||
|
||||
function lerHash(): Rota {
|
||||
const id = location.hash.replace(/^#\/?/, '').split('?')[0] as Rota;
|
||||
return ROTAS.some((r) => r.id === id) ? id : 'ao-vivo';
|
||||
}
|
||||
|
||||
class Navegacao {
|
||||
atual = $state<Rota>(lerHash());
|
||||
ir(rota: Rota) {
|
||||
location.hash = '/' + rota;
|
||||
}
|
||||
}
|
||||
|
||||
export const nav = new Navegacao();
|
||||
addEventListener('hashchange', () => (nav.atual = lerHash()));
|
||||
@@ -0,0 +1,128 @@
|
||||
/* Design system do painel Carinha: tokens + poucos utilitários. Escuro por padrão, claro opcional. */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--fundo: #0b1017;
|
||||
--fundo-2: #0f1620;
|
||||
--superficie: #141c27;
|
||||
--superficie-2: #1a2431;
|
||||
--superficie-3: #223041;
|
||||
--borda: #263447;
|
||||
--borda-forte: #34475f;
|
||||
--texto: #e8eef6;
|
||||
--texto-2: #a9b8c9;
|
||||
--texto-3: #8396ab; /* AA sobre --superficie */
|
||||
--destaque: #5cd6ff;
|
||||
--destaque-forte: #2fbff0;
|
||||
--destaque-texto: #04202b;
|
||||
--destaque-suave: rgb(92 214 255 / 0.12);
|
||||
--ok: #4ade80;
|
||||
--ok-suave: rgb(74 222 128 / 0.12);
|
||||
--aviso: #fbbf24;
|
||||
--aviso-suave: rgb(251 191 36 / 0.12);
|
||||
--perigo: #f87171;
|
||||
--perigo-forte: #ef4444;
|
||||
--perigo-suave: rgb(248 113 113 / 0.14);
|
||||
--vidro: rgb(15 22 32 / 0.72);
|
||||
|
||||
--fonte: 'Outfit Variable', 'Segoe UI', system-ui, sans-serif;
|
||||
--fonte-mono: 'JetBrains Mono Variable', ui-monospace, Consolas, monospace;
|
||||
--t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.6rem;
|
||||
|
||||
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
|
||||
--raio-sm: 8px; --raio: 12px; --raio-lg: 18px; --raio-pill: 999px;
|
||||
--sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
|
||||
--sombra-flutuante: 0 12px 40px rgb(0 0 0 / 0.45);
|
||||
--transicao: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
|
||||
--nav-largura: 232px;
|
||||
--topo-altura: 60px;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
--fundo: #f4f6f9;
|
||||
--fundo-2: #eef2f6;
|
||||
--superficie: #ffffff;
|
||||
--superficie-2: #f3f6fa;
|
||||
--superficie-3: #e7edf4;
|
||||
--borda: #dbe3ec;
|
||||
--borda-forte: #c3cfdc;
|
||||
--texto: #0f1722;
|
||||
--texto-2: #3d4d60;
|
||||
--texto-3: #5a6b7f;
|
||||
--destaque: #0284c7;
|
||||
--destaque-forte: #0369a1;
|
||||
--destaque-texto: #ffffff;
|
||||
--destaque-suave: rgb(2 132 199 / 0.1);
|
||||
--ok: #15803d; --ok-suave: rgb(21 128 61 / 0.1);
|
||||
--aviso: #b45309; --aviso-suave: rgb(180 83 9 / 0.1);
|
||||
--perigo: #dc2626; --perigo-forte: #b91c1c; --perigo-suave: rgb(220 38 38 / 0.1);
|
||||
--vidro: rgb(255 255 255 / 0.78);
|
||||
--sombra: 0 1px 2px rgb(15 23 34 / 0.06), 0 6px 20px rgb(15 23 34 / 0.08);
|
||||
--sombra-flutuante: 0 12px 40px rgb(15 23 34 / 0.18);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--fundo);
|
||||
color: var(--texto);
|
||||
font: 400 var(--t-md)/1.5 var(--fonte);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; }
|
||||
h1 { font-size: var(--t-xl); }
|
||||
h2 { font-size: var(--t-lg); }
|
||||
h3 { font-size: var(--t-md); }
|
||||
p { margin: 0; }
|
||||
a { color: var(--destaque); }
|
||||
img, video, canvas, iframe { max-width: 100%; }
|
||||
[hidden] { display: none !important; }
|
||||
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
|
||||
|
||||
/* ---------- botões ---------- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
|
||||
min-height: 40px; padding: 0 var(--e-4);
|
||||
border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
|
||||
background: var(--superficie-2); color: var(--texto);
|
||||
font: 500 var(--t-sm) var(--fonte); cursor: pointer; white-space: nowrap;
|
||||
transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
|
||||
touch-action: manipulation; user-select: none;
|
||||
}
|
||||
.btn:hover:not(:disabled) { background: var(--superficie-3); }
|
||||
.btn:active:not(:disabled) { transform: translateY(1px); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-texto); }
|
||||
.btn.primario:hover:not(:disabled) { background: var(--destaque-forte); }
|
||||
.btn.perigo { background: var(--perigo-forte); border-color: var(--perigo-forte); color: #fff; }
|
||||
.btn.perigo:hover:not(:disabled) { background: var(--perigo); }
|
||||
.btn.fantasma { background: transparent; border-color: transparent; }
|
||||
.btn.fantasma:hover:not(:disabled) { background: var(--superficie-2); }
|
||||
.btn.icone { padding: 0; width: 40px; }
|
||||
.btn.pequeno { min-height: 32px; padding: 0 var(--e-3); font-size: var(--t-xs); }
|
||||
.btn.pequeno.icone { width: 32px; padding: 0; }
|
||||
|
||||
/* ---------- formulários ---------- */
|
||||
.campo { display: grid; gap: var(--e-1); }
|
||||
.campo > span, .rotulo { font-size: var(--t-sm); color: var(--texto-2); }
|
||||
input[type='text'], input[type='password'], input[type='search'], input[type='number'], select, textarea {
|
||||
width: 100%; min-height: 40px; padding: var(--e-2) var(--e-3);
|
||||
border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
|
||||
background: var(--fundo-2); color: var(--texto); font: inherit; font-size: var(--t-sm);
|
||||
}
|
||||
textarea { resize: vertical; min-height: 80px; }
|
||||
input::placeholder, textarea::placeholder { color: var(--texto-3); }
|
||||
|
||||
/* ---------- utilitários ---------- */
|
||||
.grade { display: grid; gap: var(--e-4); }
|
||||
.linha { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
|
||||
.entre { justify-content: space-between; }
|
||||
.mono { font-family: var(--fonte-mono); font-size: 0.92em; }
|
||||
.fraco { color: var(--texto-3); }
|
||||
.pequeno-texto { font-size: var(--t-sm); }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/** Formato do que o servidor manda em /estado e nos eventos SSE. */
|
||||
|
||||
export type AppConfig = Record<string, boolean | number | string>;
|
||||
|
||||
export interface Telemetria {
|
||||
online: boolean;
|
||||
idade: number | null;
|
||||
celular_ip: string | null;
|
||||
servidor_ip: string;
|
||||
recarga: { id: string | null; confirmada: boolean };
|
||||
estado: {
|
||||
rosto?: string;
|
||||
dormindo?: boolean;
|
||||
microfone?: number;
|
||||
microfone_ativo?: boolean;
|
||||
movimento?: number;
|
||||
camera_ativa?: boolean;
|
||||
bateria?: { nivel?: number; carregando?: boolean } | number | null;
|
||||
brilho?: number;
|
||||
video?: { qualidade?: string } | null;
|
||||
[k: string]: unknown;
|
||||
};
|
||||
preview: boolean;
|
||||
}
|
||||
|
||||
export interface Motores {
|
||||
disponivel: boolean;
|
||||
erro: string;
|
||||
ativos: number[];
|
||||
dono: 'braco' | 'diagnostico' | null;
|
||||
travado: boolean;
|
||||
}
|
||||
|
||||
export interface Mensagem {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface Conversa {
|
||||
provedor: 'local' | 'gemini';
|
||||
modelo: string;
|
||||
gemini_configurado: boolean;
|
||||
ocupado: boolean;
|
||||
ultima: { id: number; texto: string; gesto: string; horario: number; segundos: number; fonte?: string } | null;
|
||||
erro: string;
|
||||
historico: Mensagem[];
|
||||
lembrancas: { id: number; texto: string }[];
|
||||
}
|
||||
|
||||
export interface IA {
|
||||
ativo: boolean;
|
||||
ocupado: boolean;
|
||||
modelo: string;
|
||||
executor: string;
|
||||
ultima: { evento: string; gesto: string; segundos: number; horario: number } | null;
|
||||
erro: string;
|
||||
}
|
||||
|
||||
export interface Reacao {
|
||||
id: number;
|
||||
horario: number;
|
||||
receita: any;
|
||||
}
|
||||
|
||||
export interface EstadoServidor {
|
||||
versao: string;
|
||||
seq: number;
|
||||
autenticacao: boolean;
|
||||
estop: { ativo: boolean; desde: number | null };
|
||||
aparencia: { rosto: string; cor: [number, number, number] };
|
||||
gestos: string[];
|
||||
rostos: string[];
|
||||
app?: Telemetria;
|
||||
app_config?: AppConfig;
|
||||
motores?: Motores;
|
||||
conversa?: Conversa;
|
||||
ia?: IA;
|
||||
reacao?: Reacao | null;
|
||||
treinamento?: { ocupado: boolean; erro: string };
|
||||
api?: { provedor: string; modelo: string; configurada: boolean; ultimo_teste: unknown };
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Biblioteca de reações, rotinas e diário (/treinamento/*). Sem polling: recarrega ao abrir a
|
||||
* tela, depois de cada ação e quando o servidor avisa (SSE 'treinamento') que terminou de criar.
|
||||
*/
|
||||
import { pedir, postar } from './api';
|
||||
import { avisos } from './avisos.svelte';
|
||||
import { ouvir } from './estado.svelte';
|
||||
|
||||
export interface ReacaoBiblioteca {
|
||||
id: number;
|
||||
horario: number;
|
||||
receita: any;
|
||||
feedback: -1 | 0 | 1;
|
||||
ativa: boolean;
|
||||
}
|
||||
|
||||
export interface StatusTreinamento {
|
||||
ocupado: boolean;
|
||||
erro: string;
|
||||
automatico: boolean;
|
||||
rotina: { id: number; texto: string }[];
|
||||
diario: { id: number; horario: number; papel: string; texto: string }[];
|
||||
resumos: { id: number; horario: number; texto: string }[];
|
||||
emojis: string[];
|
||||
desfazer: [string] | null;
|
||||
reacoes: ReacaoBiblioteca[];
|
||||
prompt_orientacao: string;
|
||||
ultimo_prompt_figurinha: string;
|
||||
}
|
||||
|
||||
class Treinamento {
|
||||
status = $state<StatusTreinamento | null>(null);
|
||||
carregando = $state(false);
|
||||
|
||||
async carregar() {
|
||||
this.carregando = true;
|
||||
try {
|
||||
this.status = await pedir<StatusTreinamento>('/treinamento/status');
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
} finally {
|
||||
this.carregando = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Executa uma ação e recarrega; devolve true se deu certo (erro vira toast). */
|
||||
async acao(rota: string, dados: object = {}, sucesso?: string) {
|
||||
try {
|
||||
await postar('/treinamento/' + rota, dados);
|
||||
if (sucesso) avisos.ok(sucesso);
|
||||
await this.carregar();
|
||||
return true;
|
||||
} catch (e) {
|
||||
avisos.erro(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const treinamento = new Treinamento();
|
||||
|
||||
let estavaOcupado = false;
|
||||
ouvir('treinamento', (d: { ocupado: boolean; erro: string }) => {
|
||||
if (treinamento.status) treinamento.status = { ...treinamento.status, ocupado: d.ocupado, erro: d.erro };
|
||||
if (estavaOcupado && !d.ocupado) {
|
||||
if (d.erro) avisos.mostrar('Gemini: ' + d.erro, 'erro');
|
||||
else avisos.ok('Novas reações prontas.');
|
||||
treinamento.carregar();
|
||||
}
|
||||
estavaOcupado = d.ocupado;
|
||||
});
|
||||
|
||||
export const SIMBOLO_EMOJI: Record<string, string> = { ideia: '💡', cafe: '☕', musica: '🎵', coracao: '❤️', estrela: '⭐' };
|
||||
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* Vídeo ao vivo do celular por WebRTC P2P. A sinalização passa pelo servidor (/rtc/*);
|
||||
* o vídeo vai direto do celular para este navegador. Porta de painel-video.js.
|
||||
* Só a tela Ao vivo cria uma instância: assim não há disputa pela única sessão.
|
||||
*/
|
||||
import { lerToken, pedir } from './api';
|
||||
import type { AlvoRastreio } from './nucleo';
|
||||
import type { AppConfig, Telemetria } from './tipos';
|
||||
|
||||
export type { AlvoRastreio } from './nucleo';
|
||||
|
||||
export class VideoAoVivo {
|
||||
mensagem = $state('Transmissão desligada.');
|
||||
exibindo = $state(false);
|
||||
qualidade = $state('');
|
||||
|
||||
private pc: RTCPeerConnection | null = null;
|
||||
private id: string | null = null;
|
||||
private desde = 0;
|
||||
private ice: RTCIceCandidateInit[] = [];
|
||||
private querido = false;
|
||||
private abrindo = false;
|
||||
private consultando = false;
|
||||
private geracao = 0;
|
||||
private tentarEm = 0;
|
||||
private ultimoStats: any = null;
|
||||
private outroPainel = false;
|
||||
private canal: RTCDataChannel | null = null;
|
||||
private seqRastreio = 0;
|
||||
private qualidadeEfetiva = '';
|
||||
private config: AppConfig = {};
|
||||
private relogios: number[] = [];
|
||||
|
||||
constructor(private video: HTMLVideoElement) {
|
||||
video.onloadeddata = video.onplaying = () => this.mostrar();
|
||||
this.relogios.push(
|
||||
window.setInterval(() => {
|
||||
this.iniciar();
|
||||
this.consultar();
|
||||
}, 400),
|
||||
window.setInterval(() => this.estatisticas(), 1000),
|
||||
);
|
||||
addEventListener('pagehide', this.aoSair);
|
||||
}
|
||||
|
||||
private mostrar() {
|
||||
this.exibindo = true;
|
||||
}
|
||||
|
||||
private texto(t: string) {
|
||||
this.mensagem = t;
|
||||
this.exibindo = false;
|
||||
}
|
||||
|
||||
private parar(fechar = true) {
|
||||
this.geracao++;
|
||||
const antiga = this.id;
|
||||
this.id = null;
|
||||
this.pc?.close();
|
||||
this.pc = null;
|
||||
this.canal = null;
|
||||
this.ice = [];
|
||||
this.desde = 0;
|
||||
this.ultimoStats = null;
|
||||
this.video.pause();
|
||||
this.video.srcObject = null;
|
||||
this.exibindo = false;
|
||||
if (antiga && fechar) pedir('/rtc/session', { acao: 'fechar', id: antiga }).catch(() => {});
|
||||
}
|
||||
|
||||
private enviar(mensagem: unknown, sessao?: string) {
|
||||
return pedir('/rtc/send', { id: sessao || this.id, de: 'pc', mensagem }, 3500);
|
||||
}
|
||||
|
||||
private async iniciar() {
|
||||
if (!this.querido || this.pc || this.abrindo || this.outroPainel || Date.now() < this.tentarEm) return;
|
||||
this.abrindo = true;
|
||||
const geracao = this.geracao;
|
||||
this.texto('Conectando vídeo ao vivo… O rosto continua no celular.');
|
||||
try {
|
||||
const sessao = await pedir<{ id: string }>('/rtc/session', { acao: 'abrir' }, 3500);
|
||||
if (geracao !== this.geracao || !this.querido) {
|
||||
pedir('/rtc/session', { acao: 'fechar', id: sessao.id }).catch(() => {});
|
||||
return;
|
||||
}
|
||||
this.id = sessao.id;
|
||||
const id = sessao.id;
|
||||
const pc = new RTCPeerConnection({ iceServers: [] });
|
||||
this.pc = pc;
|
||||
this.canal = pc.createDataChannel('rastreamento', { ordered: false, maxRetransmits: 0 });
|
||||
pc.addTransceiver('video', { direction: 'recvonly' });
|
||||
pc.onicecandidate = (e) => {
|
||||
if (this.pc === pc && e.candidate) this.enviar({ tipo: 'candidate', candidate: e.candidate.toJSON() }, id).catch(() => {});
|
||||
};
|
||||
pc.ontrack = (e) => {
|
||||
if (this.pc !== pc) return;
|
||||
this.video.srcObject = e.streams[0] || new MediaStream([e.track]);
|
||||
this.video.play().catch((err) => this.texto('Clique no vídeo para permitir a reprodução: ' + err.message));
|
||||
};
|
||||
pc.onconnectionstatechange = () => {
|
||||
if (this.pc === pc && pc.connectionState === 'failed') {
|
||||
this.parar();
|
||||
this.tentarEm = Date.now() + 2000;
|
||||
this.texto('Reconectando o vídeo…');
|
||||
}
|
||||
};
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
if (this.pc !== pc) return;
|
||||
await this.enviar({ tipo: 'offer', sdp: pc.localDescription!.sdp }, id);
|
||||
} catch (e) {
|
||||
this.parar();
|
||||
this.tentarEm = Date.now() + 2500;
|
||||
this.texto('Falha ao iniciar vídeo: ' + (e as Error).message);
|
||||
} finally {
|
||||
this.abrindo = false;
|
||||
}
|
||||
}
|
||||
|
||||
private async consultar() {
|
||||
if (!this.id || !this.pc || this.consultando) return;
|
||||
this.consultando = true;
|
||||
const pc = this.pc;
|
||||
const sid = this.id;
|
||||
try {
|
||||
const pacote = await pedir<{ id: string | null; mensagens: { seq: number; mensagem: any }[] }>(
|
||||
`/rtc/poll?lado=pc&desde=${this.desde}&id=${sid}`,
|
||||
undefined,
|
||||
3500,
|
||||
);
|
||||
if (this.pc !== pc) return;
|
||||
if (pacote.id !== sid) {
|
||||
this.outroPainel = !!pacote.id;
|
||||
this.parar(false);
|
||||
this.texto(this.outroPainel ? 'Vídeo aberto em outro painel. Recarregue para assumir.' : 'Aguardando reconexão do vídeo…');
|
||||
return;
|
||||
}
|
||||
for (const { seq, mensagem: m } of pacote.mensagens) {
|
||||
if (m.tipo === 'answer') {
|
||||
await pc.setRemoteDescription({ type: 'answer', sdp: m.sdp });
|
||||
for (const c of this.ice) await pc.addIceCandidate(c);
|
||||
this.ice = [];
|
||||
} else if (m.tipo === 'candidate') {
|
||||
if (pc.remoteDescription) await pc.addIceCandidate(m.candidate);
|
||||
else this.ice.push(m.candidate);
|
||||
} else if (m.tipo === 'erro') {
|
||||
this.parar();
|
||||
this.tentarEm = Date.now() + 3500;
|
||||
this.texto('Câmera no celular: ' + m.erro);
|
||||
return;
|
||||
}
|
||||
this.desde = Math.max(this.desde, seq);
|
||||
}
|
||||
} catch {
|
||||
if (this.pc === pc) {
|
||||
this.parar();
|
||||
this.tentarEm = Date.now() + 2500;
|
||||
this.texto('Sinalização interrompida. Reconectando…');
|
||||
}
|
||||
} finally {
|
||||
this.consultando = false;
|
||||
}
|
||||
}
|
||||
|
||||
private async estatisticas() {
|
||||
const pc = this.pc;
|
||||
if (!pc || pc.connectionState !== 'connected') return;
|
||||
try {
|
||||
const relatorio = await pc.getStats();
|
||||
relatorio.forEach((s: any) => {
|
||||
if (s.type !== 'inbound-rtp' || (s.kind !== 'video' && s.mediaType !== 'video')) return;
|
||||
const u = this.ultimoStats;
|
||||
const fps = u ? ((s.framesDecoded - u.framesDecoded) * 1000) / (s.timestamp - u.timestamp) : s.framesPerSecond || 0;
|
||||
const kbps = u ? ((s.bytesReceived - u.bytesReceived) * 8) / (s.timestamp - u.timestamp) : 0;
|
||||
this.ultimoStats = s;
|
||||
const auto =
|
||||
this.qualidadeEfetiva === 'auto' || (!this.qualidadeEfetiva && this.config.videoResolucao === 'auto' && !this.config.videoFPS);
|
||||
this.qualidade = `${auto ? 'Automática' : 'Manual'} · ${s.frameWidth || this.video.videoWidth}×${s.frameHeight || this.video.videoHeight} · ${Math.round(fps)} fps · ${Math.round(kbps)} kb/s`;
|
||||
if (fps > 0) this.mostrar();
|
||||
});
|
||||
} catch {
|
||||
/* conexão em transição */
|
||||
}
|
||||
}
|
||||
|
||||
get rastreamentoConectado() {
|
||||
return this.canal?.readyState === 'open';
|
||||
}
|
||||
|
||||
rastrear(alvo: AlvoRastreio | null) {
|
||||
if (this.canal?.readyState === 'open' && this.canal.bufferedAmount < 4096)
|
||||
this.canal.send(JSON.stringify({ tipo: 'alvo', seq: ++this.seqRastreio, alvo }));
|
||||
}
|
||||
|
||||
atualizar(status: Telemetria | null, config: AppConfig | null, online: boolean) {
|
||||
if (!config) return;
|
||||
this.config = config;
|
||||
this.qualidadeEfetiva = (status?.estado?.video as any)?.qualidade || '';
|
||||
const dormindo = !!status?.estado?.dormindo;
|
||||
const liberada = config.sensorCamera !== false && (!dormindo || config.cameraSono === true);
|
||||
const quer = !!config.preview && online && liberada;
|
||||
if (!quer) {
|
||||
if (this.querido || this.pc) this.parar();
|
||||
this.querido = false;
|
||||
this.texto(
|
||||
!liberada
|
||||
? 'Câmera desativada pelos ajustes de sensores.'
|
||||
: config.preview
|
||||
? 'Celular sem conexão. Abra o app Carinha.'
|
||||
: 'Transmissão desligada. O rosto e os sensores continuam funcionando.',
|
||||
);
|
||||
} else {
|
||||
this.querido = true;
|
||||
this.iniciar();
|
||||
}
|
||||
}
|
||||
|
||||
private aoSair = () => {
|
||||
if (this.id) {
|
||||
const t = lerToken();
|
||||
navigator.sendBeacon(
|
||||
'/rtc/session' + (t ? '?t=' + encodeURIComponent(t) : ''),
|
||||
new Blob([JSON.stringify({ acao: 'fechar', id: this.id })], { type: 'application/json' }),
|
||||
);
|
||||
}
|
||||
this.querido = false;
|
||||
this.parar(false);
|
||||
};
|
||||
|
||||
destruir() {
|
||||
this.relogios.forEach(clearInterval);
|
||||
removeEventListener('pagehide', this.aoSair);
|
||||
this.querido = false;
|
||||
this.outroPainel = false;
|
||||
this.parar();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import '@fontsource-variable/outfit';
|
||||
import '@fontsource-variable/jetbrains-mono';
|
||||
import './lib/tema.css';
|
||||
import { mount } from 'svelte';
|
||||
import App from './App.svelte';
|
||||
|
||||
mount(App, { target: document.getElementById('app')! });
|
||||
@@ -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,390 @@
|
||||
<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);
|
||||
(window as any).carinhaVideo = video; // depuração e testes de ponta a ponta
|
||||
});
|
||||
onDestroy(() => {
|
||||
rastreio?.destruir();
|
||||
video?.destruir();
|
||||
delete (window as any).carinhaVideo;
|
||||
});
|
||||
|
||||
// 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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user