287 lines
11 KiB
HTML
287 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Re-Commander — Commander Mode</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div id="status-dot"></div>
|
|
<h1>Re<span>-Commander</span></h1>
|
|
<span id="status-label">Connecting…</span>
|
|
<span id="hotword-indicator"></span>
|
|
<button id="btn-back-home" style="margin-left: auto; padding: 5px 12px; font-size: 12px;">← Back to Home</button>
|
|
</header>
|
|
|
|
<div class="main">
|
|
|
|
<!-- ── LEFT PANEL ── -->
|
|
<div class="left-panel">
|
|
|
|
<!-- Look / Navigation -->
|
|
<div class="section">
|
|
<div class="section-title">Head Navigation</div>
|
|
<div style="display:flex; gap:16px; align-items:center; margin-bottom:8px;">
|
|
<div class="arrow-pad">
|
|
<div></div>
|
|
<button id="btn-up" title="Look up (↑)">UP</button>
|
|
<div></div>
|
|
<button id="btn-left" title="Look left (←)">←</button>
|
|
<div></div>
|
|
<button id="btn-right" title="Look right (→)">→</button>
|
|
<div></div>
|
|
<button id="btn-down" title="Look down (↓)">↓</button>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Say -->
|
|
<div class="section">
|
|
<div class="section-title">Say</div>
|
|
<div class="field">
|
|
<textarea id="say-text" rows="2" placeholder="Hello! I am Jibo."></textarea>
|
|
</div>
|
|
<div class="controls-row">
|
|
<button id="btn-say">▶ Say</button>
|
|
<button id="btn-say-cancel" class="danger">✕ Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Listen -->
|
|
<div class="section">
|
|
<div class="section-title">Listen</div>
|
|
<div class="row">
|
|
<label>Max speech</label>
|
|
<input type="number" id="listen-max-speech" value="10000" step="1000">
|
|
<label>ms</label>
|
|
</div>
|
|
<div class="row">
|
|
<label>No-speech TO</label>
|
|
<input type="number" id="listen-max-nosp" value="5000" step="1000">
|
|
<label>ms</label>
|
|
</div>
|
|
<div class="controls-row" style="margin-bottom:8px;">
|
|
<button id="btn-listen">🎙 Listen</button>
|
|
<button id="btn-listen-cancel" class="danger">✕ Cancel</button>
|
|
</div>
|
|
<div id="listen-result">(result appears here)</div>
|
|
<div style="margin-top:8px;display:flex;align-items:center;gap:6px;">
|
|
<input type="checkbox" id="auto-listen-toggle" style="width:auto;">
|
|
<label for="auto-listen-toggle" style="margin:0;cursor:pointer;">Auto-listen on hotword</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice AI -->
|
|
<div class="section">
|
|
<div class="section-title">Voice AI</div>
|
|
<div style="display:flex;align-items:center;gap:6px;margin-bottom:8px;">
|
|
<input type="checkbox" id="llm-toggle" style="width:auto;">
|
|
<label for="llm-toggle" style="margin:0;cursor:pointer;">LLM voice loop</label>
|
|
<button id="btn-llm-clear" style="margin-left:auto;font-size:11px;padding:2px 8px;" title="Clear conversation history">↺ Clear</button>
|
|
</div>
|
|
<div class="field">
|
|
<label>Completions endpoint</label>
|
|
<input type="text" id="llm-endpoint" placeholder="http://localhost:11434/v1/chat/completions">
|
|
</div>
|
|
<div class="field">
|
|
<label>Model</label>
|
|
<input type="text" id="llm-model" placeholder="llama3">
|
|
</div>
|
|
<div class="field">
|
|
<label>System prompt</label>
|
|
<textarea id="llm-system-prompt" rows="3" placeholder="You are Jibo, a friendly social robot. Keep responses brief and conversational."></textarea>
|
|
</div>
|
|
<div id="llm-status" style="font-size:11px;color:var(--muted);font-style:italic;min-height:16px;"></div>
|
|
</div>
|
|
|
|
<!-- Attention -->
|
|
<div class="section">
|
|
<div class="section-title">Attention Mode</div>
|
|
<div class="attention-grid">
|
|
<button class="attn-btn" data-mode="OFF">Off</button>
|
|
<button class="attn-btn" data-mode="IDLE">Idle</button>
|
|
<button class="attn-btn" data-mode="DISENGAGE">Disengage</button>
|
|
<button class="attn-btn" data-mode="ENGAGED">Engaged</button>
|
|
<button class="attn-btn" data-mode="SPEAKING">Speaking</button>
|
|
<button class="attn-btn" data-mode="FIXATED">Fixated</button>
|
|
<button class="attn-btn" data-mode="ATTRACTABLE">Attractable</button>
|
|
<button class="attn-btn" data-mode="COMMAND">Command</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volume -->
|
|
<div class="section">
|
|
<div class="section-title">Volume</div>
|
|
<div class="row">
|
|
<input type="range" id="volume-slider" min="0" max="1" step="0.05" value="0.75">
|
|
<span id="volume-label" style="min-width:32px;text-align:right;font-size:12px;">75%</span>
|
|
</div>
|
|
<button id="btn-set-volume">Set Volume</button>
|
|
</div>
|
|
|
|
</div><!-- /left-panel -->
|
|
|
|
<!-- ── CENTER PANEL ── -->
|
|
<div class="center-panel">
|
|
|
|
<!-- Camera feed -->
|
|
<div id="camera-wrap">
|
|
<img id="camera-feed" alt="Jibo camera" style="display:none;">
|
|
<div id="camera-no-feed">
|
|
<div style="font-size:40px;">📷</div>
|
|
<div>No camera feed</div>
|
|
<div style="font-size:11px;color:var(--muted);">Use the Camera tab to start video or take a photo</div>
|
|
</div>
|
|
<div id="click-dot"></div>
|
|
</div>
|
|
|
|
<!-- Arrow pad (compact, centered under feed) -->
|
|
<div class="controls-row" style="justify-content:center; gap:10px;">
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;">
|
|
<div style="font-size:11px;color:var(--muted);">Click on feed → look there</div>
|
|
<div style="display:flex;gap:6px;align-items:center;">
|
|
<span style="font-size:12px;color:var(--muted);">Track:</span>
|
|
<input type="checkbox" id="track-flag" style="width:auto;">
|
|
<span id="video-status"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photos -->
|
|
<div style="width:100%;max-width:640px;">
|
|
<div class="section-title" style="margin-bottom:6px;">Photo Strip</div>
|
|
<div id="photo-strip"></div>
|
|
</div>
|
|
|
|
</div><!-- /center-panel -->
|
|
|
|
<!-- ── RIGHT PANEL ── -->
|
|
<div class="right-panel">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="tab-camera">Camera</button>
|
|
<button class="tab-btn" data-tab="tab-display">Display</button>
|
|
<button class="tab-btn" data-tab="tab-entities">Entities</button>
|
|
<button class="tab-btn" data-tab="tab-log">Log</button>
|
|
</div>
|
|
|
|
<!-- Camera tab -->
|
|
<div class="tab-panel active" id="tab-camera">
|
|
<div class="section-title">Video Stream</div>
|
|
<div class="video-controls" style="margin-bottom:8px;">
|
|
<button id="btn-video-start">▶ Start Video</button>
|
|
<button id="btn-video-stop" class="danger">■ Stop</button>
|
|
</div>
|
|
|
|
<div class="section-title" style="margin-top:10px;">Take Photo</div>
|
|
<div class="row">
|
|
<label>Camera</label>
|
|
<select id="photo-camera">
|
|
<option value="right">Right</option>
|
|
<option value="left">Left</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<label>Resolution</label>
|
|
<select id="photo-res">
|
|
<option value="highRes">HighRes</option>
|
|
<option value="medRes">MedRes</option>
|
|
<option value="lowRes">LowRes</option>
|
|
<option value="microRes">MicroRes</option>
|
|
</select>
|
|
</div>
|
|
<button id="btn-photo" style="width:100%;margin-bottom:10px;">📷 Take Photo</button>
|
|
|
|
<div class="section-title" style="margin-top:10px;">Subscriptions</div>
|
|
<div class="controls-row">
|
|
<button id="btn-sub-entity" class="active">👤 Entity</button>
|
|
<button id="btn-sub-motion" class="active">〰 Motion</button>
|
|
<button id="btn-sub-headtouch" class="active">✋ Touch</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Display tab -->
|
|
<div class="tab-panel" id="tab-display">
|
|
<div class="section-title">Eye</div>
|
|
<button id="btn-eye" style="width:100%;margin-bottom:10px;">👁 Show Eye</button>
|
|
|
|
<div class="section-title">Play Animation</div>
|
|
<div class="field">
|
|
<select id="eye-anim-select">
|
|
<optgroup label="── Blinks">
|
|
<option>Eye_Blink_01</option>
|
|
<option>Eye_Blink_02</option>
|
|
</optgroup>
|
|
<optgroup label="── Expressions">
|
|
<option>eye_happy_00</option>
|
|
<option>eye_happy_01</option>
|
|
<option>eye_sad_01</option>
|
|
<option>eye_scared_00</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<button id="btn-play-anim" style="width:100%;margin-bottom:10px;">▶ Play Animation</button>
|
|
|
|
<div class="section-title" style="margin-top:4px;">Display Text</div>
|
|
<div class="field">
|
|
<textarea id="display-text" rows="2" placeholder="Text to show on screen…"></textarea>
|
|
</div>
|
|
<button id="btn-display-text" style="width:100%;margin-bottom:10px;">Show Text</button>
|
|
|
|
<div class="section-title">Display Image</div>
|
|
<div class="field">
|
|
<input type="text" id="display-img-src" placeholder="http://… image URL">
|
|
</div>
|
|
<button id="btn-display-image" style="width:100%;">Show Image</button>
|
|
|
|
</div>
|
|
|
|
<!-- Entities tab -->
|
|
<div class="tab-panel" id="tab-entities">
|
|
<div class="section-title">Detected Entities</div>
|
|
<div id="entity-list"><div style="color:var(--muted);font-size:12px;">Waiting for entity events…</div></div>
|
|
<div class="section-title" style="margin-top:12px;">Head Touch</div>
|
|
<div id="head-touch-display" style="display:grid;grid-template-columns:repeat(3,1fr);gap:4px;">
|
|
<div class="pad-indicator" data-pad="frontLeft">FL</div>
|
|
<div class="pad-indicator" data-pad="middleLeft">ML</div>
|
|
<div class="pad-indicator" data-pad="backLeft">BL</div>
|
|
<div class="pad-indicator" data-pad="frontRight">FR</div>
|
|
<div class="pad-indicator" data-pad="middleRight">MR</div>
|
|
<div class="pad-indicator" data-pad="backRight">BR</div>
|
|
</div>
|
|
<style>
|
|
.pad-indicator {
|
|
background: var(--surface2); border: 1px solid var(--border);
|
|
border-radius: 4px; padding: 6px; text-align: center;
|
|
font-size: 11px; color: var(--muted); transition: all 0.2s;
|
|
}
|
|
.pad-indicator.active { background: var(--accent); color: #000; border-color: var(--accent); }
|
|
</style>
|
|
</div>
|
|
|
|
<!-- Log tab -->
|
|
<div class="tab-panel" id="tab-log" style="padding:0;display:flex;flex-direction:column;flex:1;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);">
|
|
<span class="section-title" style="margin:0;">Event Log</span>
|
|
<button id="btn-clear-log" style="font-size:11px;padding:3px 8px;">Clear</button>
|
|
</div>
|
|
<div id="event-log"></div>
|
|
</div>
|
|
|
|
</div><!-- /right-panel -->
|
|
</div>
|
|
|
|
<!-- Photo modal -->
|
|
<div id="photo-modal">
|
|
<div id="photo-modal-close">✕</div>
|
|
<img id="photo-modal-img" src="" alt="Photo">
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|