Cognitive_Agent/apps/ir-toy-console/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="color-scheme" content="light" />
    <meta name="theme-color" content="#0a6f67" />
    <title>玩具搭档 · 自扩展能力工作台</title>
    <link rel="stylesheet" href="./styles.css?v=11" />
    <script src="./app.js?v=11" defer></script>
  </head>
  <body>
    <header class="topbar">
      <a class="brand" href="#" aria-label="玩具搭档首页"><span class="brand-mark">T</span><span><strong>玩具搭档</strong><small>自扩展能力工作台</small></span></a>
      <nav class="scope-tabs" aria-label="能力范围"><span class="active">外设玩具</span><i></i><span class="active">车端设备</span><b>GPT 联动编排</b></nav>
      <div class="topbar-actions">
        <span class="intelligence-badge" id="intelligenceBadge" data-state="checking"><i>GPT</i><span id="intelligenceLabel">智能编排检查中</span></span>
        <button class="connection-button" id="connectionButton" type="button" data-state="checking"><span class="connection-dot"></span><span id="connectionLabel">正在检查学习器</span></button>
        <button class="reset-button" id="openResetButton" type="button">↻ 新一轮测试</button>
        <button class="settings-button" id="openConnectionButton" type="button" aria-label="连接设置">⚙</button>
      </div>
    </header>

    <main class="screen-shell">
      <section class="command-strip">
        <div class="command-heading"><span class="command-orbit">AI</span><div><span>ONE SENTENCE CONTROL</span><h1>说一句，联动外设玩具与车端设备</h1></div></div>
        <div class="command-composer"><textarea id="utterance" rows="1" maxlength="500" placeholder="例如：打开灯光，然后把空调调到 24 度并关闭遮阳帘"></textarea><button class="voice-button" id="voiceButton" type="button" aria-label="语音输入">●</button><button class="execute-button" id="executeButton" type="button">GPT 执行 <span>→</span></button></div>
        <div class="session-chip"><span>本轮已学</span><strong id="sessionCapabilityCount">0</strong><small>个动作</small></div>
      </section>

      <section class="dashboard-grid">
        <div class="peripheral-board">
          <div class="board-heading">
            <div><span class="eyebrow">IR PERIPHERAL CAPABILITIES</span><h2>外设玩具能力</h2><p>六类区域固定展示；在分类内添加、选择具体硬件，预设动作点击即学。</p></div>
            <div class="hardware-total"><strong id="hardwareCount">1</strong><span>台具体外设硬件</span></div>
          </div>
          <div class="hardware-grid" id="hardwareGrid"></div>
        </div>

        <aside class="vehicle-board">
          <div class="vehicle-heading"><div><span class="eyebrow">CAN_DEV VEHICLE CAPABILITIES</span><h2>车端设备动作</h2></div><span class="future-badge" id="vehicleBridgeBadge" data-state="checking">桥接检查中</span></div>
          <p class="vehicle-intro">来自 CAN_DEV 的已验证能力，与外设红外动作进入同一条 GPT 联动计划。</p>
          <div class="vehicle-grid" id="vehicleGrid"></div>
        </aside>
      </section>

      <section class="execution-bar" id="runCard" hidden aria-live="polite"><span class="execution-dot"></span><div><strong id="runTitle">准备执行</strong><small id="runNote">红外动作会依次发射</small></div><div class="run-plan" id="runPlan"></div><span id="runProgress">0 / 0</span></section>
    </main>

    <dialog class="modal add-hardware-modal" id="addHardwareDialog">
      <div class="modal-header"><div><span class="eyebrow">ADD IR PERIPHERAL</span><h2>添加具体外设硬件</h2><p>先选择玩具类型，再给这台具体硬件取名。</p></div><button class="modal-close" data-close-dialog="addHardwareDialog" type="button">×</button></div>
      <form id="addHardwareForm">
        <div class="type-chooser" id="typeChooser"></div>
        <label class="hardware-name-field">外设硬件名称<input id="newHardwareName" required maxlength="30" placeholder="例如：桌面灯光玩具、蓝色机器狗" /></label>
        <div class="preset-preview"><span>将自动创建这些待学习动作</span><div id="presetPreview"></div></div>
        <button class="modal-primary" type="submit">添加硬件与预设动作</button>
      </form>
    </dialog>

    <dialog class="modal learn-modal" id="learnDialog">
      <div class="modal-header"><div><span class="eyebrow">LEARN PRESET ACTION</span><h2 id="learnDialogTitle">学习预设动作</h2><p id="learnTargetPath">外设硬件 · 动作</p></div><button class="modal-close" data-close-dialog="learnDialog" type="button">×</button></div>
      <div class="stepper"><span class="active" data-learn-step="1"><b>1</b>确认动作</span><i></i><span data-learn-step="2"><b>2</b>按遥控器</span><i></i><span data-learn-step="3"><b>3</b>发射验证</span></div>
      <section class="learn-page" data-learn-page="1">
        <div class="learn-target-card"><span id="learnHardwareIcon">💡</span><div><small id="learnHardwareType">灯光类玩具</small><strong id="learnHardwareName">灯光测试玩具</strong></div><i>→</i><div class="target-action"><small>本次学习</small><strong id="learnActionName">蓝色灯光</strong></div></div>
        <p class="no-input-note">动作名称和常用说法已由玩具类型自动预设，无需再次输入。</p>
        <details class="advanced-fields"><summary>高级设置</summary><div><label>其他说法<input id="learnAliases" maxlength="120" /></label><label>风险等级<select id="learnRisk"><option value="low">低</option><option value="medium">中</option><option value="high">高</option></select></label><label>红外槽位<input id="learnSlot" type="number" min="1" max="248" /></label></div></details>
        <button class="modal-primary" id="continueToLearn" type="button">下一步：准备按实体遥控器</button>
      </section>
      <section class="learn-page centered-page" data-learn-page="2" hidden><div class="learn-animation" id="learnAnimation" data-state="ready"><span>IR</span><i></i><i></i><i></i></div><h3 id="learnStatusTitle">准备接收遥控信号</h3><p id="learnStatusMessage">把实体遥控器对准学习器，然后点击“开始接收”。</p><strong class="countdown" id="learnCountdown">15</strong><div class="modal-actions"><button class="modal-secondary" id="backToAction" type="button">返回</button><button class="modal-primary" id="startLearnButton" type="button">开始接收</button></div><button class="cancel-link" id="cancelLearnButton" type="button" hidden>取消本次学习</button></section>
      <section class="learn-page centered-page" data-learn-page="3" hidden><div class="test-success">✓</div><h3 id="testTitle">按键信号已捕获</h3><p id="testMessage">发射一次刚学到的信号，并观察玩具是否执行正确动作。</p><div class="modal-actions"><button class="modal-secondary" id="testEmitButton" type="button">发射试一下</button><button class="modal-primary" id="confirmLearnButton" type="button" disabled>动作正确，完成学习</button></div></section>
    </dialog>

    <dialog class="modal danger-modal" id="resetDialog"><div class="danger-symbol">↻</div><span class="eyebrow">NEW TEST ROUND</span><h2>开始新一轮空白测试？</h2><p>这会擦除 GSCU1B 中的全部红外码，并把所有外设硬件的动作恢复为“待学习”。硬件名称与类型会保留。</p><label>输入“清空”确认<input id="resetConfirmText" autocomplete="off" placeholder="清空" /></label><div class="modal-actions"><button class="modal-secondary" data-close-dialog="resetDialog" type="button">取消</button><button class="danger-primary" id="confirmResetButton" type="button" disabled>擦除并开始新测试</button></div></dialog>

    <dialog class="modal connection-modal" id="connectionDialog"><div class="modal-header"><div><span class="eyebrow">SYSTEM CONNECTIONS</span><h2>学习器与智能编排连接</h2></div><button class="modal-close" data-close-dialog="connectionDialog" type="button">×</button></div><div class="connection-overview" id="connectionOverview" data-state="checking"><span class="large-connection-dot"></span><div><strong id="connectionStatusTitle">正在检查</strong><p id="connectionStatusMessage">等待设备状态</p></div><button id="refreshConnection" type="button">刷新</button></div><label class="bridge-field">前端桥接地址<input id="bridgeUrl" type="url" placeholder="留空使用当前地址" /></label><div class="connection-facts"><span>GSCU1B<b>TCP 4444</b></span><span>GPT 意图理解<b id="gptConnectionFact">检查中</b></span><span>CAN_DEV 编排<b id="vehicleConnectionFact">检查中</b></span></div><button class="modal-primary" id="saveConnection" type="button">保存并检查全部连接</button></dialog>

    <div class="toast-stack" id="toastStack" aria-live="polite"></div>
  </body>
</html>