sl-webui
1cd8ebeb32
React + Vite + TailwindCSS dashboard served on port 8080. Connects to ROS2 via rosbridge_server WebSocket (default ws://localhost:9090). Panels: - StatusPanel: pipeline state (idle/listening/thinking/speaking/throttled) with animated pulse indicator, GPU memory bar, per-stage latency stats - FaceGallery: enrolled persons grid with enroll/delete via /social/enrollment/* services; live detection indicator - ConversationLog: real-time transcript with human/bot bubbles, streaming partial support, auto-scroll - PersonalityTuner: sass/humor/verbosity sliders (0–10) writing to personality_node via rcl_interfaces/srv/SetParameters; live PersonalityState display - NavModeSelector: shadow/lead/side/orbit/loose/tight mode buttons publishing to /social/nav/mode; voice command reference table Usage: cd ui/social-bot && npm install && npm run dev # dev server port 8080 npm run build && npm run preview # production preview Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
74 lines
1.6 KiB
CSS
74 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background: #050510;
|
|
color: #d1d5db;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #020208;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #1a3a4a;
|
|
border-radius: 2px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #00b8d9;
|
|
}
|
|
|
|
/* Pulse animations for pipeline state */
|
|
@keyframes pulse-blue {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
|
|
50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
|
|
}
|
|
@keyframes pulse-amber {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
|
|
50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
|
|
}
|
|
@keyframes pulse-green {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
|
|
50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
|
|
}
|
|
|
|
.pulse-blue { animation: pulse-blue 1.2s infinite; }
|
|
.pulse-amber { animation: pulse-amber 0.8s infinite; }
|
|
.pulse-green { animation: pulse-green 0.6s infinite; }
|
|
|
|
/* Conversation bubbles */
|
|
.bubble-human {
|
|
background: #1e3a5f;
|
|
border: 1px solid #2d6a9f;
|
|
}
|
|
.bubble-bot {
|
|
background: #0d3030;
|
|
border: 1px solid #0d9488;
|
|
}
|
|
.bubble-partial {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Slider accent colors */
|
|
input[type='range'].accent-cyan { accent-color: #00b8d9; }
|
|
input[type='range'].accent-orange { accent-color: #f97316; }
|
|
input[type='range'].accent-purple { accent-color: #a855f7; }
|
|
|
|
/* Mode button active glow */
|
|
.mode-active {
|
|
box-shadow: 0 0 10px rgba(0, 184, 217, 0.4);
|
|
}
|