feat: add Hermes WebUI provisioning and English Dragon HD Omni voices

design-options/prism.html

@@ -0,0 +1,5 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hope / Prism</title><style>
+*{box-sizing:border-box}body{margin:0;color:#302639;background:#eee9f3;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{border:0;background:none;color:inherit;min-height:44px;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8b52ba;outline-offset:4px}a{color:inherit}h1,h2,p{margin:0}[hidden]{display:none!important}.stage{min-height:100vh;max-width:1230px;display:grid;grid-template-columns:1fr 400px 180px;align-items:center;gap:48px;padding:54px 42px;margin:auto}.intro{align-self:start;padding-top:55px}.back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none}.name{font-size:15px;margin:30px 0 20px;color:#674878}.intro h1{font-size:66px;line-height:1.07;letter-spacing:-.035em;font-weight:450}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:#9251ad}.lede{font-size:17px;line-height:1.7;margin-top:26px;max-width:34ch;color:#675c6e}.features{margin-top:38px}.feature{padding:17px 0;border-top:1px solid #d7ccde;font-size:14px;line-height:1.6;color:#675c6e}.feature strong{display:block;font-size:15px;color:#302639;margin-bottom:4px}.phone{height:824px;width:390px;border:7px solid #fcfbfd;border-radius:48px;overflow:hidden;position:relative;background:linear-gradient(160deg,#fff 0%,#fdfbff 55%,#f0edf8 100%);box-shadow:0 6px 8px #5340640c;display:flex;flex-direction:column}.statusbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:12px 25px 0;font-size:14px;font-weight:600;flex-shrink:0}.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:103px;height:27px;border-radius:20px;background:#292331}.header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 9px;flex-shrink:0}.header button{width:44px;background:#fff;border-radius:50%;font-size:20px}.wordmark{font-size:20px;font-weight:600;letter-spacing:-.03em}.wordmark span{font-weight:400;color:#9c80b0}.view{flex:1;overflow:auto;min-height:0;padding:0 22px 16px}.hero{text-align:center;padding-top:9px}.sculpture{height:108px;width:140px;margin:0 auto 10px;position:relative;filter:drop-shadow(0 9px 8px #b298ce22)}.sculpture .piece{position:absolute;width:67px;height:84px;border-radius:48% 50% 44% 52%;top:11px;left:31px;transform:rotate(-24deg);background:radial-gradient(ellipse at 22% 13%,#fff 0%,#fff9 14%,transparent 39%),conic-gradient(from 130deg,#cee9f6,#eed9f7,#e6a7d8,#fee0ca,#d9eaf5,#c7b1f0,#cee9f6);box-shadow:inset 2px 1px 2px #fff,inset -3px -2px 5px #baa2d455;border:1px solid #fff9}.sculpture .piece:nth-child(2){left:65px;top:12px;transform:rotate(24deg);width:51px;height:77px;background:radial-gradient(ellipse at 75% 17%,#fff 0%,#fff8 17%,transparent 44%),conic-gradient(from 30deg,#cceafb,#d5c0f5,#f3d2e8,#fee5dd,#d3eaf9)}.sculpture:after{content:'';position:absolute;bottom:2px;left:27px;width:90px;height:8px;background:#bb9dda35;filter:blur(8px);border-radius:50%}.hero h2{font-size:29px;line-height:1.14;font-weight:450;letter-spacing:-.03em}.hero h2 em{font-family:Georgia,serif;color:#9251ad;font-weight:400}.hero p{font-size:13px;color:#74627f;line-height:1.5;margin-top:10px}.topic{display:flex;align-items:center;justify-content:space-between;margin:24px 0 18px;font-size:12px;color:#766a7d}.topic span:first-child{padding:7px 11px;border:1px solid #e8dfed;border-radius:20px;background:#fff}.messages{display:flex;flex-direction:column;gap:20px}.message{font-size:15px;line-height:1.6}.message.user{padding:11px 14px;border-radius:14px;background:#f2eaf7;margin-left:28px}.message .who{font-size:11px;font-weight:600;color:#7c6688;margin-bottom:5px}.message p{white-space:pre-wrap;overflow-wrap:anywhere}.reply-title{font-size:20px;letter-spacing:-.02em;font-weight:500;margin:8px 0}.idea{margin-top:16px;display:flex;gap:12px;align-items:center}.idea-art{width:70px;height:76px;flex-shrink:0;overflow:hidden;border-radius:12px;position:relative;background:linear-gradient(150deg,#e3c1e8,#e5e3ff,#c5d9f2)}.idea-art:before{content:'';position:absolute;width:72px;height:72px;border-radius:50%;left:20px;top:25px;background:linear-gradient(140deg,#e7dbff,#a8bfe2);box-shadow:inset 1px 1px 2px #fff8}.idea-art:after{content:'';position:absolute;width:30px;height:30px;left:13px;top:10px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9,#f5c7dc 35%,#d397c4);box-shadow:0 4px 5px #ae90b333}.idea-text{font-size:13px;line-height:1.6;color:#71607c}.idea-text strong{display:block;color:#45334e;font-size:14px;margin-bottom:3px}.actions{display:flex;gap:8px;margin-top:15px}.actions button{padding:0 12px;border-radius:24px;border:1px solid #e1d7e8;background:#fff;font-size:12px}.composer-shell{padding:10px 14px 12px;flex-shrink:0}.composer{border-radius:16px;background:#fff;padding:13px 14px 10px;box-shadow:0 4px 8px #8c76a313}.composer input{border:0;color:#45334e;background:transparent;wLine truncated
+</style></head><body><svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs><linearGradient id="gem" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#fff5ef"/><stop offset=".35" stop-color="#def3fb"/><stop offset=".65" stop-color="#e9c9f0"/><stop offset="1" stop-color="#f4afcf"/></linearGradient><linearGradient id="gem2"><stop stop-color="#dfc2f1"/><stop offset=".5" stop-color="#f8e2e5"/><stop offset="1" stop-color="#e1f2ff"/></linearGradient><symbol id="prism-icon" viewBox="0 0 100 100"><path d="M26 16C10 28 11 57 28 73C36 80 45 77 48 66L57 36C62 18 42 4 26 16Z" fill="url(#gem)" stroke="#fff7" stroke-width="1"/><path d="M69 21C54 11 42 29 47 46L58 77C63 91 85 78 85 59C85 39 81 29 69 21Z" fill="url(#gem2)" stroke="#fff8" stroke-width="1"/><path d="M29 19C18 26 17 42 20 50M68 24C77 31 79 39 80 48" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></symbol><symbol id="mic-symbol" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8"/></symbol></defs></svg><main class="stage"><section class="intro"><a class="back" href="new-index.html">← Compare the new directions</a><div class="name">Prism / a conversation that unfolds</div><h1>From a thought<br>to <em>something<br>you can use.</em></h1><p class="lede">A softer place to talk things through. Pearlescent details, quiet lavender, and useful answers with room to breathe.</p><div class="features"><div class="feature"><strong>Your answer is the main event.</strong>A compact sculptural identity leaves space for readable replies and the next step.</div><div class="feature"><strong>Write or speak from one place.</strong>A floating composer makes switching between voice and text effortless.</div><div class="feature"><strong>A little color, a lighter touch.</strong>Translucent pastel forms carry the personality. Controls stay simple.</div></div></section><section class="phone-wrap" aria-label="Interactive Prism demonstration"><div class="phone"><div class="statusbar"><span>9:41</span><div class="island" aria-hidden="true"></div><span aria-hidden="true">▮▮▮ ▰</span></div><header class="header"><button id="history" aria-label="Conversation history">☰</button><div class="wordmark">hope <span>/ prism</span></div><button id="settings" aria-label="Settings">···</button></header><section class="view" id="chat-view"><div class="hero"><div class="sculpture" aria-hidden="true"><div class="piece"></div><div class="piece"></div></div><h2>A little possibility,<br><em>Shane.</em></h2><p>Let’s see where your thoughts take us.</p></div><div class="topic"><span>A slower weekend</span><span>Sample conversation</span></div><div class="messages" id="messages" role="log" aria-label="Conversation" aria-live="polite"><article class="message user"><div class="who">You</div><p>I’d like a weekend that feels less busy.</p></article><article class="message"><div class="who">Hope</div><h2 class="reply-title">Leave a little room.</h2><p>Choose one thing you’ll look forward to, and leave the rest of the morning open. A walk with no destination is a good place to start.</p><div class="idea"><div class="idea-art" aria-hidden="true"></div><div class="idea-text"><strong>A morning, unplanned.</strong>Take a short walk. Stop somewhere new. Let the day find its own pace.</div></div><div class="actions"><button id="continue">Plan a quiet morning ↗</button><button id="copy">Copy reply</button></div><p class="toast" id="copy-status" role="status"></p></article></div><p class="light-status" id="chat-status" role="status"></p></section><section class="view" id="history-view" hidden><h2 class="nav-title">Your conversations</h2><p class="sub">Pick up a thought where you left it.</p><div class="list"><button id="open-thread"><strong>A slower weekend</strong><small>Today · Sample conversation</small></button><button id="open-idea"><strong>An idea taking shape</strong><small>Yesterday · Sample conversation</small></button></div><button class="voice-back" id="history-back">← Back to conversation</button><p class="notice">Example history only. Nothing is saved or loaded from your account.</p></section><section class="view" id="settings-view" hidden><h2 class="nav-title">Make it yours.</h2><p class="sub">The voice that meets you here.</p><div class="list"><label class="setting"><span>Hope’s voice</span><select id="voice-choice"><option>Ava</option><option>Andrew</option><option>Emma</option></select></label><label class="setting"><span>Read replies aloud</span><input id="spoken" type="checkbox" checked style="width:24px;height:24px;accent-color:#a36cba"></label><div class="setting"><span>Account</span><span>Shane · demo</span></div></div><p class="notice">Preferences apply to this sample only. No audio is played and no real account is connected.</p><button class="voice-back" id="settings-back">← Back to conversation</button><button class="voice-back" id="signout" style="display:block">SiLine truncated
+const $=id=>document.getElementById(id);let timeouts=[],clock=null,seconds=0,active=false,muted=false,busy=false;function clear(){timeouts.forEach(clearTimeout);timeouts=[];clearInterval(clock);clock=null;busy=false}function view(name){document.querySelectorAll('.view').forEach(v=>v.hidden=v.id!==name+'-view');$('composer-shell').hidden=name!=='chat';$('history').textContent=name==='chat'?'☰':'‹'}function add(role,text){const article=document.createElement('article');article.className='message'+(role==='You'?' user':'');const who=document.createElement('div');who.className='who';who.textContent=role;const p=document.createElement('p');p.textContent=text;article.append(who,p);$('messages').append(article);$('chat-view').scrollTop=$('chat-view').scrollHeight}function reply(text){if(busy)return;busy=true;add('You',text);$('chat-status').textContent='Hope is finding a starting point… · demo';$('voice-state').textContent='Putting a thought together · demo';$('voice-heading').textContent='One moment.';timeouts.push(setTimeout(()=>{add('Hope','Leave the first hour open. A slow breakfast, a nearby walk, and one small thing you’re looking forward to. You can decide what comes next when you get there. (Sample reply.)');$('chat-status').textContent='Sample reply ready';$('voice-state').textContent=muted?'Microphone muted · demo':'Hope’s reply is ready · demo';$('voice-heading').textContent='A little room to breathe.';busy=false},1600))}function start(){clear();active=true;muted=false;seconds=0;$('timer').textContent='00:00';$('pause').textContent='Mute';$('pause').setAttribute('aria-pressed','false');$('voice-state').textContent='Listening · demo';$('voice-heading').innerHTML='Take your time.<br>I’m here.';view('voice');clock=setInterval(()=>{$('timer').textContent=String(Math.floor(++seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0')},1000);timeouts.push(setTimeout(()=>{if(active&&!muted)reply('Help me plan a quiet morning.')},2400))}$('start-voice').onclick=start;$('demo-turn').onclick=()=>{if(!muted)reply('Help me plan a quiet morning.')};$('pause').onclick=()=>{muted=!muted;$('pause').textContent=muted?'Unmute':'Mute';$('pause').setAttribute('aria-pressed',String(muted));$('voice-state').textContent=muted?'Microphone muted · demo':'Listening · demo'};$('end').onclick=()=>{clear();active=false;view('chat');$('chat-status').textContent='Voice demo ended. Your conversation stays here.'};$('transcript').onclick=()=>view('chat');$('history').onclick=()=>{if(!$('chat-view').hidden)view('history');else view('chat')};$('settings').onclick=()=>view('settings');$('history-back').onclick=$('settings-back').onclick=()=>view('chat');$('open-thread').onclick=()=>view('chat');$('open-idea').onclick=()=>{add('Hope','Tell me the idea in its simplest form. We can work out the next step together. (Sample history.)');view('chat')};$('composer').onsubmit=e=>{e.preventDefault();const text=$('text-input').value.trim();if(text&&!busy){$('text-input').value='';reply(text)}};$('continue').onclick=()=>reply('Help me plan a quiet morning.');$('copy').onclick=async()=>{try{await navigator.clipboard.writeText('Choose one thing you’ll look forward to, and leave the rest of the morning open.');$('copy-status').textContent='Reply copied.'}catch{$('copy-status').textContent='Copy isn’t available here. Select the reply text to copy it.'}};$('voice-choice').onchange=e=>$('settings-status').textContent=e.target.value+' selected for this demo.';$('spoken').onchange=e=>$('settings-status').textContent='Spoken replies '+(e.target.checked?'enabled':'disabled')+' as a demo preference. No audio plays.';$('signout').onclick=()=>{clear();active=false;$('settings-status').textContent='Simulated sign out complete. Your real account was not accessed.'};
+</script></body></html>