snowspeeder/hope-voice-api
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign Hope voice experience

Browse Source
This commit is contained in:
snowspeeder committed 2026-08-29 06:51:09 -04:00
1 parent 3c4c43f983
commit 16aadcae96
5 files changed
+1055 -518
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/index.html
+100 -54
View File
@@ -3,81 +3,127 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#09090b">
<title>Hope</title>
<meta name="theme-color" content="#08111f">
<title>Hope · Voice companion</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>Hope</h1>
<p class="subtitle">Your voice assistant</p>
<a class="skip-link" href="#conversation">Skip to conversation</a>
<main class="app-shell">
<header class="topbar">
<div class="brand">
<span class="brand-glyph" aria-hidden="true"><i></i></span>
<div>
<h1>Hope</h1>
<p>Voice companion</p>
</div>
</div>
<div class="topbar-actions">
<div class="identity-chip" aria-label="Current profile: Shane">
<span class="presence-dot" aria-hidden="true"></span>
<span>Private to <strong>Shane</strong></span>
</div>
<button id="tasksBtn" class="btn btn-secondary tasks-trigger" aria-label="Background tasks" title="Background tasks">
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h11M8 12h11M8 18h7"></path><path d="m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2"></path></svg>
<span>Tasks</span>
<span class="tasks-badge" id="tasksBadge" hidden>0</span>
</button>
</div>
</header>
<div class="orb-stage">
<div class="orb" id="orb" data-state="idle">
<div class="orb-core"></div>
<div class="orb-ring"></div>
</div>
<div class="orb-labels">
<span class="state-label" id="stateLabel">Idle</span>
<span class="thinking-chip" id="thinkingChip" hidden>thinking&#8230;</span>
<span class="barge-hint" id="bargeHint" hidden>tap or speak to interrupt</span>
</div>
<div class="workspace">
<section class="voice-console" aria-labelledby="voiceHeading">
<div class="console-intro">
<h2 id="voiceHeading">I'm here.</h2>
<p>Speak naturally. I’ll listen, remember, and answer in real time.</p>
</div>
<div class="orb-stage">
<div class="orb" id="orb" data-state="idle" aria-hidden="true">
<div class="orb-orbit orbit-one"></div>
<div class="orb-orbit orbit-two"></div>
<div class="orb-core"><span class="orb-shimmer"></span></div>
<div class="orb-ring"></div>
</div>
<div class="orb-labels" aria-live="polite">
<span class="state-label" id="stateLabel">Ready when you are</span>
<span class="thinking-chip" id="thinkingChip" hidden>Thinking&hellip;</span>
<span class="barge-hint" id="bargeHint" hidden>Speak to interrupt</span>
</div>
</div>
<div class="controls" aria-label="Conversation controls">
<button id="startBtn" class="btn btn-primary">
<span class="button-spark" aria-hidden="true"></span>
Start conversation
</button>
<button id="stopBtn" class="btn btn-danger" disabled>End conversation</button>
<button id="muteBtn" class="btn btn-icon" aria-label="Mute microphone" title="Mute microphone" disabled>
<svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="8" y1="22" x2="16" y2="22"></line></svg>
</button>
<button id="settingsBtn" class="btn btn-icon" aria-label="Voice settings" title="Voice settings">
<svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"></path><circle cx="16" cy="7" r="2"></circle><circle cx="8" cy="17" r="2"></circle></svg>
</button>
</div>
<div class="connection-strip">
<div class="status" id="status">Secure connection ready</div>
<div class="mic-meter" id="micLevel" aria-hidden="true"><span class="mic-meter-fill" id="micMeterFill"></span></div>
</div>
<p class="privacy-note">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg>
Your memory stays in Shane’s private profile.
</p>
</section>
<section class="transcript" id="conversation" aria-labelledby="conversationHeading">
<div class="transcript-header">
<div>
<h2 id="conversationHeading">Conversation</h2>
<p>Live transcript</p>
</div>
<button id="clearBtn" class="btn btn-ghost" title="Clear conversation">Clear</button>
</div>
<div id="messages" aria-live="polite"></div>
</section>
</div>
</main>
<div class="controls">
<button id="startBtn" class="btn btn-primary">Start Conversation</button>
<button id="stopBtn" class="btn btn-danger" disabled>Stop</button>
<button id="muteBtn" class="btn btn-icon" aria-label="Mute microphone" title="Mute microphone" disabled>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="8" y1="22" x2="16" y2="22"></line></svg>
</button>
<button id="settingsBtn" class="btn btn-icon" aria-label="Voice settings" title="Voice settings">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</button>
</div>
<div class="status" id="status">Disconnected</div>
<div class="mic-meter" id="micLevel" aria-hidden="true"><span class="mic-meter-fill" id="micMeterFill"></span></div>
<div class="transcript" id="transcript">
<div class="transcript-header">
<span>Conversation</span>
<button id="clearBtn" class="btn btn-ghost" title="Clear conversation">Clear</button>
</div>
<div id="messages"></div>
</div>
</div>
<!-- Settings sheet (voice picker) -->
<div class="sheet-backdrop" id="sheetBackdrop" hidden></div>
<div class="settings-sheet" id="settingsSheet" role="dialog" aria-modal="true" aria-label="Voice settings">
<div class="sheet-handle"></div>
<div class="sheet-handle" aria-hidden="true"></div>
<div class="sheet-header">
<h2>Voice</h2>
<button id="closeSheetBtn" class="btn btn-ghost" aria-label="Close">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"></path></svg>
<div>
<h2>Choose Hope’s voice</h2>
<p>Changes apply to this conversation.</p>
</div>
<button id="closeSheetBtn" class="btn btn-icon" aria-label="Close voice settings">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>
</button>
</div>
<div class="voice-list" id="voiceList"></div>
</div>
<!-- Task panel (background tasks) -->
<button id="tasksBtn" class="btn btn-icon tasks-fab" aria-label="Background tasks" title="Background tasks">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6M9 13h6M9 17h4"></path></svg>
<span class="tasks-badge" id="tasksBadge" hidden>0</span>
</button>
<div class="tasks-panel" id="tasksPanel">
<div class="tasks-panel" id="tasksPanel" aria-label="Background tasks">
<div class="tasks-header">
<h2>Background Tasks</h2>
<button id="closeTasksBtn" class="btn btn-ghost" aria-label="Close">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"></path></svg>
<div>
<h2>Background tasks</h2>
<p>Longer work continues here.</p>
</div>
<button id="closeTasksBtn" class="btn btn-icon" aria-label="Close background tasks">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>
</button>
</div>
<div class="tasks-list" id="tasksList">
<p class="tasks-empty">No tasks yet. Ask Hope to research something.</p>
<div class="tasks-empty">
<strong>Nothing running</strong>
<span>Ask Hope to research or compare something.</span>
</div>
</div>
</div>