carinha-control-panel/treinamento.html

<!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>