vlm/webconsole/webui/index.html

<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VLM Console · Unitree Go2</title>
<style>
  :root { --glass: rgba(255,255,255,0.08); --line: rgba(255,255,255,0.15); }
  * { box-sizing: border-box; }
  body {
    margin: 0; height: 100vh; font-family: "Segoe UI", system-ui, sans-serif;
    color: #eef; overflow: hidden;
    background: radial-gradient(1200px 800px at 10% 10%, #1b2a5e, transparent),
                radial-gradient(1000px 700px at 90% 90%, #3a1b5e, transparent),
                linear-gradient(135deg, #0a0e27, #0e1430);
  }
  .app { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px;
         height: 100vh; padding: 18px; }
  .panel {
    background: var(--glass); border: 1px solid var(--line);
    border-radius: 22px; backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4); overflow: hidden;
    display: flex; flex-direction: column;
  }
  .panel-head { padding: 16px 20px; display: flex; align-items: center;
                justify-content: space-between; border-bottom: 1px solid var(--line); }
  .panel-head h1 { font-size: 16px; margin: 0; letter-spacing: .5px; font-weight: 600; }
  .badge { font-size: 12px; padding: 5px 12px; border-radius: 999px;
           display: flex; align-items: center; gap: 7px; }
  .dot { width: 9px; height: 9px; border-radius: 50%; }
  .badge.on  { background: rgba(0,255,150,.12); color: #7fffc4; }
  .badge.on .dot  { background: #2bff9c; box-shadow: 0 0 10px #2bff9c; }
  .badge.off { background: rgba(255,80,80,.12); color: #ff9d9d; }
  .badge.off .dot { background: #ff5b5b; box-shadow: 0 0 10px #ff5b5b; }
  .video-wrap { flex: 1; display: flex; align-items: center; justify-content: center;
                padding: 16px; }
  .video-wrap img { max-width: 100%; max-height: 100%; border-radius: 14px;
                    border: 1px solid var(--line); }
  .chat { flex: 1; overflow-y: auto; padding: 18px; display: flex;
          flex-direction: column; gap: 14px; }
  .msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; line-height: 1.5;
         font-size: 14px; white-space: pre-wrap; animation: rise .25s ease; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .msg.user { align-self: flex-end; background: linear-gradient(135deg,#5b8cff,#8a5bff);
              color: #fff; border-bottom-right-radius: 4px; }
  .msg.bot  { align-self: flex-start; background: rgba(255,255,255,0.06);
              border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .msg img { display: block; margin-top: 10px; max-width: 100%; border-radius: 12px; }
  .cursor { display: inline-block; width: 8px; height: 15px; background: #8a5bff;
            margin-left: 2px; animation: blink 1s steps(2) infinite; vertical-align: -2px; }
  @keyframes blink { 50% { opacity: 0; } }
  .composer { padding: 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
  .composer input {
    flex: 1; background: rgba(0,0,0,0.25); border: 1px solid var(--line);
    border-radius: 14px; padding: 13px 16px; color: #eef; font-size: 14px; outline: none;
  }
  .composer input:focus { border-color: #8a5bff; box-shadow: 0 0 0 3px rgba(138,91,255,.2); }
  .composer button {
    background: linear-gradient(135deg,#5b8cff,#8a5bff); border: 0; color: #fff;
    border-radius: 14px; padding: 0 22px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: transform .1s, filter .2s;
  }
  .composer button:hover { filter: brightness(1.1); }
  .composer button:active { transform: scale(.96); }
  .composer button:disabled { opacity: .5; cursor: not-allowed; }
  .empty { margin: auto; color: rgba(255,255,255,.4); font-size: 14px; text-align: center; }
</style>
</head>
<body>
<div class="app">
  <section class="panel">
    <div class="panel-head">
      <h1>🐾 GO2 · LIVE CAMERA</h1>
      <span id="badge" class="badge off"><span class="dot"></span><span id="badge-txt">…</span></span>
    </div>
    <div class="video-wrap"><img id="feed" src="/video_feed" alt="live feed"></div>
  </section>

  <section class="panel">
    <div class="panel-head"><h1>💬 VLM REASONING</h1></div>
    <div id="chat" class="chat">
      <div class="empty">Nhập lệnh để hỏi VLM về cảnh robot đang nhìn thấy.</div>
    </div>
    <form id="composer" class="composer">
      <input id="prompt" placeholder="vd: tìm điện thoại, mô tả cảnh, có người không?" autocomplete="off">
      <button id="send" type="submit">Gửi</button>
    </form>
  </section>
</div>

<script>
const chat = document.getElementById('chat');
const form = document.getElementById('composer');
const input = document.getElementById('prompt');
const sendBtn = document.getElementById('send');
const badge = document.getElementById('badge');
const badgeTxt = document.getElementById('badge-txt');

async function pollStatus() {
  try {
    const s = await (await fetch('/status')).json();
    const on = s.connected;
    badge.className = 'badge ' + (on ? 'on' : 'off');
    badgeTxt.textContent = on ? 'CONNECTED' : (s.mock ? 'MOCK MODE' : 'DISCONNECTED');
  } catch (e) { badge.className = 'badge off'; badgeTxt.textContent = 'OFFLINE'; }
}
pollStatus(); setInterval(pollStatus, 3000);

function clearEmpty() { const e = chat.querySelector('.empty'); if (e) e.remove(); }
function addMsg(cls) {
  clearEmpty();
  const d = document.createElement('div'); d.className = 'msg ' + cls;
  chat.appendChild(d); chat.scrollTop = chat.scrollHeight; return d;
}

let ws, busy = false;
function connectWS() {
  ws = new WebSocket(`ws://${location.host}/ws`);
  ws.onclose = () => setTimeout(connectWS, 1500);
}
connectWS();

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const prompt = input.value.trim();
  if (!prompt || busy || ws.readyState !== 1) return;
  addMsg('user').textContent = prompt;
  input.value = '';
  busy = true; sendBtn.disabled = true;

  const bot = addMsg('bot');
  const span = document.createElement('span'); bot.appendChild(span);
  const cursor = document.createElement('span'); cursor.className = 'cursor';
  bot.appendChild(cursor);

  ws.onmessage = (ev) => {
    const m = JSON.parse(ev.data);
    if (m.type === 'token') {
      span.textContent += m.text; chat.scrollTop = chat.scrollHeight;
    } else if (m.type === 'image') {
      const img = new Image(); img.src = 'data:image/jpeg;base64,' + m.data;
      bot.appendChild(img); chat.scrollTop = chat.scrollHeight;
    } else if (m.type === 'busy') {
      span.textContent = '⏳ Đang xử lý lệnh trước, thử lại sau.';
      finish(bot, cursor);
    } else if (m.type === 'error') {
      span.textContent += '\n⚠️ ' + m.message; finish(bot, cursor);
    } else if (m.type === 'done') {
      finish(bot, cursor);
    }
  };
  ws.send(JSON.stringify({ prompt }));
});

function finish(bot, cursor) {
  cursor.remove(); busy = false; sendBtn.disabled = false; input.focus();
}
</script>
</body>
</html>