File size: 54,529 Bytes

45cf443

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MiniMind-O</title>
<link rel="icon" type="image/png" href="https://www.modelscope.cn/studio/gongjy/MiniMind/resolve/master/images/logo2.png">
<style>
:root {
  --bg:#1e1e20; --p1:#2a2a2e; --p2:#35353b; --p3:#40404a;
  --bd:#55555e; --bd2:#7a7a85;
  --fg:#ececef; --mu:#9a9aa0; --dim:#8a8a92;
  --u:#7fc5e0; --a:#e5b57a; --danger:#d84545; --cam:#7ad88a;
  --serif:'Georgia','Times New Roman',serif; --mono:'SF Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{height:100vh;background:var(--bg);color:var(--fg);font-family:var(--serif);display:flex;align-items:center;justify-content:center;overflow:hidden}
.app{max-width:860px;width:100%;height:calc(100vh - 40px);display:flex;flex-direction:column;padding:20px 24px;background:var(--p1);border:1px solid var(--bd);overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px;flex-shrink:0;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand>div{min-width:0}
.brand img{height:34px}
.brand h1{font-size:1.15rem;font-weight:700;font-style:italic;color:#fff}
.brand .sub{font-size:.72rem;color:var(--mu);font-style:italic}
.topright{display:flex;gap:8px;align-items:center}
.btn{padding:5px 10px;font-size:.75rem;cursor:pointer;background:var(--p2);border:1px solid var(--bd);color:var(--fg);font-family:var(--serif);font-style:italic;display:inline-flex;align-items:center;gap:5px}
.btn:hover:not(:disabled){background:var(--p3);border-color:var(--bd2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:var(--danger);border-color:#6a3a3a}
.btn.danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:#fff}
.btn svg{width:12px;height:12px;fill:currentColor}
.model-sel{max-width:150px;padding:5px 8px;font-size:.72rem;background:var(--p2);border:1px solid var(--bd);color:var(--fg);font-family:var(--serif);font-style:italic;outline:none}
.brand .model-sel{max-width:260px;padding:0 34px 0 0;background:transparent;border:none;font-size:1.15rem;font-weight:700;color:#fff}
.model-sel:focus{border-color:var(--bd2)}
.mini-sel{max-width:130px;padding:5px 8px;font-size:.72rem;background:var(--p2);border:1px solid var(--bd);color:var(--fg);font-family:var(--serif);font-style:italic;outline:none}
.mini-sel:focus{border-color:var(--bd2)}
.voice-sel{display:none}
.more{position:relative}
.more-pop{top:100%;right:0;left:auto;margin-top:6px;min-width:130px}
.vgroup{padding:4px 10px;font-size:.6rem;color:var(--mu);font-style:italic}
.vitem{padding:5px 10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:.72rem;font-family:var(--serif);font-style:italic;color:var(--fg);gap:8px}
.vitem:hover{background:var(--p3)}
.vitem.on{color:var(--u)}
.vx{color:var(--mu);cursor:pointer;font-style:normal;font-size:.8rem;padding:0 2px;line-height:1}
.vx:hover{color:var(--danger)}
.vadd{padding:5px 10px;font-size:.72rem;color:var(--mu);cursor:pointer;font-family:var(--serif);font-style:italic;border-top:1px solid var(--bd)}
.vadd:hover{background:var(--p3);color:var(--fg)}
.status{display:inline-flex;align-items:center;gap:10px;padding:5px 10px;font-size:.65rem;font-family:var(--mono);background:var(--p2);border:1px solid var(--bd);transition:opacity .3s}
.status.hidden{opacity:0;pointer-events:none}
.status .row{display:inline-flex;gap:5px;white-space:nowrap}
.status .lab{color:var(--mu);font-style:italic}

.chat{flex:1;overflow-y:auto;padding:12px 0;min-height:0;display:flex;flex-direction:column;gap:18px;scrollbar-width:none;-ms-overflow-style:none}
.chat::-webkit-scrollbar{display:none}
.msg{display:flex;flex-direction:column;gap:6px;animation:fi .25s ease}
.msg.user{align-items:flex-end}
.msg.user .body{align-items:flex-end}
@keyframes fi{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.meta{font-size:.72rem;font-style:italic}
.msg.user .meta{color:var(--u)}
.msg.assistant .meta{color:var(--a)}
.body{display:flex;flex-direction:column;gap:8px}
.text{line-height:1.65;white-space:pre-wrap;word-break:break-word}
.img{display:block;max-width:160px;max-height:160px}
.msg.user .text:not(.voice){color:var(--u)}
.voice{font-family:var(--mono);font-size:1.05rem;line-height:1.2;color:var(--bd)}
.msg.user .voice{color:rgba(127,197,224,.5)}
.prog{text-decoration:underline dashed;text-decoration-color:var(--bd);text-underline-offset:4px;text-decoration-thickness:1px}
.prog .tk{cursor:pointer;padding:1px 0;transition:color .08s,background .08s}
.msg.assistant .prog .tk.played{color:var(--a)}
.msg.assistant .prog .tk:hover{background:rgba(229,181,122,.2)}
.msg.assistant .prog.on .tk.cur{background:rgba(229,181,122,.45)}
.msg.user .prog .tk.played{color:var(--u)}
.msg.user .prog .tk:hover{background:rgba(127,197,224,.18)}
.msg.user .prog.on .tk.cur{background:rgba(127,197,224,.35)}
.player{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;width:320px;max-width:100%;background:var(--p2);border:1px solid var(--bd)}
.pp{background:transparent;border:none;color:inherit;cursor:pointer;font-family:var(--mono);font-size:.9rem;width:20px;text-align:left}
.pp:hover{opacity:.75}
.bar-wrap{flex:1;height:3px;cursor:pointer;background:var(--p1)}
.bar{height:100%;width:0;transition:width .08s linear}
.msg.user .bar,.msg.user .pp{background:var(--u);color:var(--u)}
.msg.assistant .bar,.msg.assistant .pp{background:var(--a);color:var(--a)}
.msg.user .bar-wrap{background:var(--p1)}
.time{font-size:.7rem;font-family:var(--mono);min-width:76px;text-align:right;color:var(--mu)}

.input-area{flex-shrink:0;padding:10px 0 4px}
.compose{display:flex;gap:6px}
.compose button{padding:0 12px;min-width:42px;cursor:pointer;font-size:.85rem;background:var(--p2);border:1px solid var(--bd);color:var(--fg);display:flex;align-items:center;justify-content:center;font-family:inherit}
.compose button svg{width:16px;height:16px;fill:currentColor}
.compose button:hover:not(:disabled){background:var(--p3);border-color:var(--bd2)}
.compose button:disabled{opacity:.4;cursor:not-allowed}
.compose button.primary{background:var(--fg);color:#1a1a1e;border-color:var(--fg)}
.compose button.primary:hover:not(:disabled){background:#fff}
.compose button.rec{animation:pulse 1s infinite;background:var(--danger);color:#fff;border-color:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.text-wrap{flex:1;display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;min-width:0;background:var(--p2);border:1px solid var(--bd)}
.text-wrap:focus-within{border-color:var(--fg)}
.text-wrap input{flex:1;min-width:0;padding:10px 4px;font-size:.9rem;outline:none;background:transparent;border:none;color:inherit;font-family:inherit}
.text-wrap input::placeholder{color:var(--dim)}
.attach{display:flex;gap:4px;flex-wrap:nowrap;flex-shrink:0;max-width:45%;overflow-x:auto;scrollbar-width:none}
.attach::-webkit-scrollbar{display:none}
.attach:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;font-size:.72rem;background:var(--p1);border:1px solid var(--bd);flex-shrink:0}
.chip .x{cursor:pointer;opacity:.55;font-size:.85rem}
.chip .x:hover{opacity:1}
.chip .play{cursor:pointer}
.chip img{width:22px;height:22px;object-fit:cover}
.pop{position:absolute;background:var(--p2);border:1px solid var(--bd);display:none;flex-direction:column;z-index:50;min-width:110px;font-family:var(--serif);font-style:italic;white-space:nowrap}
.pop.on{display:flex}
.pop button{padding:5px 10px;background:transparent;border:none;color:var(--fg);cursor:pointer;text-align:left;font-size:.72rem;font-family:inherit;font-style:inherit;line-height:1.2}
.pop button:hover{background:var(--p3)}
.snap{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.snap.on{display:flex}
.snap video{max-width:80vw;max-height:70vh;background:#000;border:1px solid var(--bd)}
.snap .sr{display:flex;gap:10px}
.snap .sr button{padding:8px 18px;background:var(--p2);border:1px solid var(--bd);color:var(--fg);cursor:pointer;font-family:var(--serif);font-style:italic}
.snap .sr button.primary{background:var(--fg);color:#1a1a1e;border-color:var(--fg)}
.clone-card{width:min(92vw,520px);padding:22px;background:var(--p1);border:1px solid var(--bd);display:flex;flex-direction:column;gap:14px}
.clone-title{font-size:1rem;font-style:italic;color:#fff}
.clone-hint{font-size:.76rem;color:var(--mu);font-style:italic;line-height:1.6}
.clone-name{width:100%;padding:10px 12px;background:var(--p2);border:1px solid var(--bd);color:var(--fg);font-family:inherit;font-size:.85rem;outline:none}
.clone-name:focus{border-color:var(--fg)}
.clone-script{padding:12px 14px;background:var(--p2);border:1px solid var(--bd);font-size:1rem;line-height:1.85}
.clone-stat{min-height:18px;font-size:.72rem;color:var(--mu);font-family:var(--mono)}

/* ===== Call mode ===== */
body>.app,#call{will-change:transform,opacity,filter;transform-origin:center center}
body>.app{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1)}
body.call>.app{opacity:0;transform:scale(.92);filter:blur(8px);pointer-events:none}
#call{position:fixed;inset:0;z-index:100;background:var(--bg);overflow:hidden;opacity:0;transform:scale(1.08);filter:blur(10px);pointer-events:none;visibility:hidden;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1),visibility 0s .7s}
body.call #call{opacity:1;transform:scale(1);filter:blur(0);pointer-events:auto;visibility:visible;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1),visibility 0s 0s}
#call .app{max-width:560px;margin:20px auto;padding:18px 22px;position:relative}
#call .topbar{border-bottom:1px dashed var(--bd)}
#call .brand h1{font-size:1.05rem}
#call .brand .model-sel{max-width:230px;padding-right:38px;font-size:1.05rem}
#call .brand .sub{font-size:.68rem}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:.7rem;font-family:var(--mono);background:var(--p2);border:1px solid var(--bd);color:var(--mu);font-style:italic;line-height:1.2}
.pill .dot{width:6px;height:6px;background:var(--mu);border-radius:50%}
.pill.live{color:var(--u);border-color:#3c5966}
.pill.live .dot{background:var(--u);box-shadow:0 0 6px var(--u);animation:cp 1.4s ease-in-out infinite}
@keyframes cp{0%,100%{opacity:1}50%{opacity:.4}}
#call .btn.active{background:var(--u);color:#1a1a1e;border-color:var(--u)}

.hero{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:14px 0;position:relative}
.orb{position:relative;width:280px;height:280px;max-width:60vh;max-height:60vh;display:flex;align-items:center;justify-content:center;will-change:transform}
.orb svg{width:100%;height:100%;overflow:visible}
.blob{fill:none;stroke-linejoin:round;transition:stroke .35s,opacity .45s}
.blob.l0{stroke:#5a5a64;stroke-width:1.2;opacity:.55}
.blob.l1{stroke:var(--bd2);stroke-width:1.4;opacity:.85}
.blob.l2{stroke:var(--fg);stroke-width:1.6}
.orb.camon .blob.l0,.orb.camon .blob.l1{opacity:0}
.orb.camon .blob.l2{stroke:var(--cam);filter:drop-shadow(0 0 4px rgba(122,216,138,.45))}
svg.listen .blob.l2{stroke:var(--u);filter:drop-shadow(0 0 4px rgba(127,197,224,.45))}
svg.listen .blob.l1{stroke:rgba(127,197,224,.6)}
svg.speak .blob.l2{stroke:var(--a);filter:drop-shadow(0 0 5px rgba(229,181,122,.5))}
svg.speak .blob.l1{stroke:rgba(229,181,122,.6)}
svg.gen .blob.l2{stroke:var(--fg);filter:drop-shadow(0 0 4px rgba(236,236,239,.35))}
.core{display:none}
svg.listen .core{fill:var(--u)}
svg.speak .core{fill:var(--a)}
.ripple{fill:none;stroke:var(--mu);stroke-width:1;transform-origin:center;animation:rip 1.6s ease-out forwards}
.ripple.user{stroke:var(--u)}
.ripple.assistant{stroke:var(--a)}
@keyframes rip{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.35);opacity:0}}
.lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.ic{width:34px;height:34px;color:var(--mu);transition:color .3s;display:flex;align-items:center;justify-content:center}
.ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbl.listen .ic{color:var(--u)}
.lbl.speak .ic{color:var(--a)}
.lbl.gen .ic{color:var(--fg)}
.lbl .st{display:none}
.ic svg *{transform-box:view-box;transform-origin:12px 12px}
.lbl.idle .ic .dot{animation:breathe 2.2s ease-in-out infinite;transform-origin:center;transform-box:view-box}
@keyframes breathe{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.lbl.listen .ic .w{animation:sigin 1.6s ease-out infinite}
.lbl.listen .ic .w2{animation-delay:.3s}
.lbl.listen .ic .w3{animation-delay:.6s}
@keyframes sigin{0%{opacity:0;transform:scale(1.2)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
.lbl.gen .ic svg{animation:spin 1.2s cubic-bezier(.5,.1,.5,.9) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lbl.speak .ic .a1{animation:radout 1.3s ease-out infinite}
.lbl.speak .ic .a2{animation:radout 1.3s ease-out .25s infinite}
.lbl.speak .ic .a3{animation:radout 1.3s ease-out .5s infinite}
@keyframes radout{0%{opacity:0;transform:scale(.7)}40%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.up{display:none}
.cam{position:absolute;top:50%;left:50%;width:180px;height:180px;object-fit:cover;background:var(--bg);border:1px solid var(--bd);transform:translate(-50%,-50%) scale(.3);opacity:0;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .3s,border-color .35s,box-shadow .35s;pointer-events:none;will-change:transform,opacity}
.orb.camon .cam{transform:translate(-50%,-50%) scale(1);opacity:1;border-color:var(--cam);box-shadow:0 0 14px rgba(122,216,138,.35)}
.orb.camon .core{opacity:0}
.orb.camon .lbl{top:auto;bottom:-8px;transform:translate(-50%,100%)}
.orb.camon .lbl .st{font-size:.9rem}
svg.listen ~ .cam{border-color:var(--u);box-shadow:0 0 14px rgba(127,197,224,.45)}
svg.speak ~ .cam{border-color:var(--a);box-shadow:0 0 14px rgba(229,181,122,.45)}

.latest{width:100%;padding:10px 14px;background:var(--p2);border:1px solid var(--bd);display:flex;flex-direction:column;gap:5px;flex-shrink:0;max-height:120px;overflow-y:auto;scrollbar-width:none}
.latest::-webkit-scrollbar{display:none}
.latest .lm{font-family:var(--mono);font-size:.6rem;color:var(--mu);font-style:italic}
.latest .lt{font-size:.82rem;line-height:1.55;font-style:italic;opacity:.9;white-space:pre-wrap;word-break:break-word}
.latest.user .lm{color:var(--u)}
.latest.assistant .lm{color:var(--a)}
.latest.empty .lt{color:var(--bd)}
.ctrls{display:flex;justify-content:center;gap:10px;padding:14px 0 2px;margin-top:12px;border-top:1px dashed var(--bd);flex-shrink:0}
.cbtn{width:72px;height:58px;background:var(--p2);border:1px solid var(--bd);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--mono);font-size:.58rem;letter-spacing:1px;text-transform:uppercase;transition:all .18s}
.cbtn svg{width:18px;height:18px;fill:currentColor}
.cbtn:hover{background:var(--p3);border-color:var(--bd2)}
.cbtn.active{background:var(--u);color:#1a1a1e;border-color:var(--u)}
.cbtn.danger{color:var(--danger);border-color:#6a3a3a}
.cbtn.danger:hover{background:var(--danger);color:#fff}

.trans{position:absolute;inset:0;background:var(--p1);z-index:20;display:flex;flex-direction:column;padding:18px 22px;transform:translateY(100%);transition:transform .3s ease;will-change:transform;contain:layout paint}
.trans.on{transform:translateY(0)}
.trans .th{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px dashed var(--bd)}
.trans .tt{font-style:italic;font-size:.95rem;display:flex;gap:10px;align-items:center}
.trans .cnt{font-family:var(--mono);font-size:.68rem;color:var(--mu)}
#call .chat:empty::before{content:'no turns yet · say something';display:block;text-align:center;color:var(--bd);font-style:italic;padding:40px 0;font-size:.82rem}
@media(max-width:540px){
  body{display:block}
  .app{height:100vh;height:100dvh;max-width:none;border:none;padding:14px 16px}
  .brand img{height:28px}
  .brand h1{font-size:1rem}
  .brand .sub{display:none}
  .topbar{gap:6px}
  .status{display:none!important}
  .player{width:100%}
  .vitem,.vadd{padding:8px 12px}
  .compose button{min-width:38px;padding:0 10px}
  .text-wrap input{padding:8px 4px;font-size:.85rem}
  .clone-card{padding:16px}
  .clone-hint{font-size:.7rem}
  #call .app{margin:0;height:100vh;height:100dvh;border:none;padding:14px 16px}
  .orb{width:240px;height:240px}
  .cbtn{width:58px;height:52px}
}
</style>
</head>
<body>
<div class="app">
  <div class="topbar">
    <div class="brand">
      <img src="https://www.modelscope.cn/studio/gongjy/MiniMind/resolve/master/images/logo2.png" alt="logo">
      <div><select class="model-sel" id="modelSel"></select><div class="sub">multimodal inference · text / image / audio → text + audio</div></div>
    </div>
    <div class="topright">
      <div class="status hidden" id="stat"><div class="row"><span class="lab">text_ttft</span><span id="tt">—</span></div><div class="row"><span class="lab">audio_ttft</span><span id="ta">—</span></div><div class="row"><span class="lab">status</span><span id="ts">idle</span></div></div>
      <select class="voice-sel" id="voiceSel"><option value="default">default</option></select>
      <div class="more">
        <button class="btn" id="moreBtn">default</button>
        <div class="pop more-pop" id="morePop"></div>
      </div>
      <button class="btn" id="callBtn"><svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57.1.35 0 .74-.25 1.02l-2.2 2.2z"/></svg>Call</button>
    </div>
  </div>
  <div class="chat" id="chat"></div>
  <div class="input-area"><div class="compose">
    <div style="position:relative;display:flex">
      <button id="imgBtn" title="image"><svg viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zm-2 0H5l3.5-4.5 2.5 3.01L14.5 13l4.5 6zM8.5 8A1.5 1.5 0 1 1 7 9.5 1.5 1.5 0 0 1 8.5 8z"/></svg></button>
      <div class="pop" id="imgPop" style="bottom:100%;left:0;margin-bottom:6px"><button id="fileBtn">from file</button><button id="shotBtn">take photo</button></div>
    </div>
    <input type="file" id="imgIn" accept="image/*" hidden>
    <button id="recBtn" title="录音"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z"/></svg></button>
    <div class="text-wrap"><div class="attach" id="att"></div><input type="text" id="txt" placeholder="Message MiniMind-O..." autocomplete="off"></div>
    <button id="sendBtn" class="primary"><svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button>
  </div></div>
</div>

<div class="snap" id="snap"><video id="snapV" autoplay playsinline muted></video><div class="sr"><button id="snapCancel">cancel</button><button id="snapOk" class="primary">capture</button></div></div>
<div class="snap" id="cloneModal"><div class="clone-card"><div class="clone-title">Clone Voice</div><div class="clone-hint">请自然朗读下面这句话。建议 3 到 6 秒，环境尽量安静。录完后会自动做 1.5 倍速、提取 `CAM++` speaker embedding 与 `Mimi` ref codes，然后立即加入音色列表。</div><input class="clone-name" id="cloneName" placeholder="音色名，例如：小王" maxlength="24"><div class="clone-script" id="cloneText">今天阳光很好，欢迎来到我的语音克隆小实验。</div><div class="clone-stat" id="cloneStat">点击 start 开始录音</div><div class="sr"><button id="cloneCancel">cancel</button><button id="cloneRec" class="primary">start</button></div></div></div>

<div id="call"><div class="app">
  <div class="topbar">
    <div class="brand"><img src="https://www.modelscope.cn/studio/gongjy/MiniMind/resolve/master/images/logo2.png" alt=""><div><select class="model-sel" id="callModelSel"></select><div class="sub">live voice · bidirectional streaming</div></div></div>
    <div class="topright">
      <select class="mini-sel" id="callVoiceSel"><option value="default">default</option></select>
      <button class="btn" id="logBtn"><svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm2-3h8v-2H8v2zm0-4h8v-2H8v2z"/></svg>log</button>
      <span class="pill" id="pill"><span class="dot"></span><span id="connT">connecting</span></span>
    </div>
  </div>
  <div class="hero"><div class="orb" id="orb">
    <svg viewBox="-160 -160 320 320" id="osvg"><g id="rip"></g><path class="blob l0" id="b0"/><path class="blob l1" id="b1"/><path class="blob l2" id="b2"/><circle class="core" id="core" cx="0" cy="0" r="4"/></svg>
    <video class="cam" id="camV" autoplay playsinline muted></video>
    <div class="lbl" id="lbl"><div class="ic" id="stIc"></div><div class="st" id="stT">init</div><div class="up" id="upT">00:00:00</div></div>
  </div></div>
  <div class="latest empty" id="lat"><span class="lm" id="lmE">latest · awaiting first turn</span><span class="lt" id="ltE">speak naturally — model responds with voice and text</span></div>
  <div class="ctrls">
    <button class="cbtn" id="camBtn"><svg viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg><span>cam</span></button>
    <button class="cbtn danger" id="endBtn"><svg viewBox="0 0 24 24"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg><span>end</span></button>
  </div>
  <div class="trans" id="trans"><div class="th"><div class="tt">session transcript <span class="cnt" id="tcnt">0 turns</span></div><button class="btn" id="closeBtn">× close</button></div><div class="chat" id="cchat"></div></div>
</div></div>

<script>
const $=id=>document.getElementById(id);
const chat=$('chat'),txt=$('txt'),sendBtn=$('sendBtn'),recBtn=$('recBtn'),imgBtn=$('imgBtn'),imgIn=$('imgIn'),callBtn=$('callBtn'),att=$('att');
const stat=$('stat'),tt=$('tt'),ta=$('ta'),ts=$('ts'),voiceSel=$('voiceSel'),modelSel=$('modelSel'),callModelSel=$('callModelSel'),callVoiceSel=$('callVoiceSel');
const moreBtn=$('moreBtn'),morePop=$('morePop');
const CLONE_PROMPT='今天阳光很好，欢迎来到我的语音克隆小实验。';
let voiceGroups={builtin:[],unseen:[],manual:[]};
const closeMore=()=>morePop.classList.remove('on');
const modelLabel=m=>m;
async function loadVoices(sel){
  const keep=sel||voiceSel.value||'default';
  const keepCall=callVoiceSel.value||'default';
  voiceSel.innerHTML='<option value="default">default</option>';
  const d=await fetch('/voices').then(r=>r.json());
  voiceGroups={builtin:d.builtin||[],unseen:d.unseen||[],manual:d.manual||[]};
  for(const [label,names] of [['builtin',voiceGroups.builtin],['unseen',voiceGroups.unseen],['manual',voiceGroups.manual]]){
    if(!names.length)continue;
    const g=document.createElement('optgroup');
    g.label=label;
    names.forEach(v=>{const o=document.createElement('option');o.value=v;o.textContent=v;g.appendChild(o)});
    voiceSel.appendChild(g);
  }
  if([...voiceSel.options].some(o=>o.value===keep))voiceSel.value=keep;
  callVoiceSel.innerHTML=voiceSel.innerHTML;
  if([...callVoiceSel.options].some(o=>o.value===keepCall))callVoiceSel.value=keepCall;
  renderVoiceList();
}
function renderVoiceList(){
  let h='';const sel=voiceSel.value;
  moreBtn.textContent=sel;
  h+=`<div class="vitem${sel==='default'?' on':''}" data-voice="default">default</div>`;
  for(const [g,ns] of [['builtin',voiceGroups.builtin],['unseen',voiceGroups.unseen],['manual',voiceGroups.manual]]){
    if(!ns.length)continue;
    h+=`<div class="vgroup">${g}</div>`;
    for(const v of ns)h+=`<div class="vitem${v===sel?' on':''}" data-voice="${v}"><span>${v}</span>${g==='manual'?`<span class="vx" data-del="${v}">×</span>`:''}</div>`;
  }
  h+='<div class="vadd">+ clone</div>';
  morePop.innerHTML=h;
}
loadVoices().catch(()=>{});
async function loadModels(){
  const d=await fetch('/models').then(r=>r.json());
  modelSel.innerHTML='';callModelSel.innerHTML='';
  for(const m of d.models||[]){const o=document.createElement('option');o.value=m;o.textContent=modelLabel(m);modelSel.appendChild(o);callModelSel.appendChild(o.cloneNode(true))}
  if(d.current){modelSel.value=d.current;callModelSel.value=d.current}
}
async function switchModelSelect(sel, oldSel){
  const old=sel.dataset.current||sel.value,name=sel.value;
  const wasCall=document.body.classList.contains('call');
  stopChat();if(callStop)callStop();stat.classList.remove('hidden');ts.textContent='switching';sel.disabled=true;
  try{
    const r=await fetch('/switch_model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});
    const d=await r.json();
    if(!r.ok||!d.ok)throw new Error(d.error||'switch failed');
    modelSel.value=name;callModelSel.value=name;modelSel.dataset.current=name;callModelSel.dataset.current=name;ts.textContent=`loaded ${name}`;if(wasCall)openCall();
  }catch(e){sel.value=old;if(oldSel)oldSel.value=old;ts.textContent='switch failed';alert(e.message)}
  sel.disabled=false;
}
modelSel.onchange=()=>switchModelSelect(modelSel,callModelSel);
callModelSel.onchange=()=>switchModelSelect(callModelSel,modelSel);
callVoiceSel.onchange=()=>{if(window.callSendCtx)window.callSendCtx()};
loadModels().then(()=>{modelSel.dataset.current=modelSel.value;callModelSel.dataset.current=callModelSel.value}).catch(()=>{});

/* ------------- shared helpers ------------- */
function decPcm(b64){
  const bin=atob(b64),i16=new Int16Array(bin.length/2);
  for(let i=0;i<i16.length;i++)i16[i]=bin.charCodeAt(i*2)|(bin.charCodeAt(i*2+1)<<8);
  const f32=new Float32Array(i16.length),fade=240;
  for(let i=0;i<i16.length;i++)f32[i]=i16[i]/32768;
  for(let i=0;i<fade&&i<f32.length;i++){f32[i]*=i/fade;f32[f32.length-1-i]*=i/fade;}
  return {i16,f32};
}
function buildWav(chunks,sr){
  let n=0;for(const c of chunks)n+=c.length;
  const buf=new ArrayBuffer(44+n*2),v=new DataView(buf),w=(o,s)=>{for(let i=0;i<s.length;i++)v.setUint8(o+i,s.charCodeAt(i))};
  w(0,'RIFF');v.setUint32(4,36+n*2,true);w(8,'WAVE');w(12,'fmt ');v.setUint32(16,16,true);v.setUint16(20,1,true);v.setUint16(22,1,true);
  v.setUint32(24,sr,true);v.setUint32(28,sr*2,true);v.setUint16(32,2,true);v.setUint16(34,16,true);w(36,'data');v.setUint32(40,n*2,true);
  let o=44;for(const c of chunks)for(let i=0;i<c.length;i++){v.setInt16(o,c[i],true);o+=2;}
  return new Blob([buf],{type:'audio/wav'});
}
const blobToB64=blob=>new Promise(r=>{const fr=new FileReader();fr.onloadend=()=>r(fr.result.split(',')[1]);fr.readAsDataURL(blob)});
const fmtT=s=>{if(!isFinite(s)||s<0)s=0;s=Math.floor(s);return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`};
const fmtDur=s=>{s=Math.max(0,Math.floor(s));const h=s/3600|0,m=(s%3600/60)|0,x=s%60;return [h,m,x].map(n=>String(n).padStart(2,'0')).join(':')};
const waveChars=n=>{const c='▁▂▃▄▅▆▇';let s='';for(let i=0;i<n;i++){const v=(Math.sin(i*.7)+Math.sin(i*.31+1.3)+Math.sin(i*1.9+.4))/3;s+=c[Math.max(0,Math.min(c.length-1,Math.floor((v+1)/2*c.length)))];}return s};

function attachProg(audio,el,durHint,initPlayed){
  const raw=el.textContent;if(!raw)return;
  el.innerHTML='';el.classList.add('prog');
  const chars=[...raw],wts=chars.map(c=>/\s/.test(c)?.2:/[,、;；:：，]/.test(c)?.5:/[.。!！?？…—]/.test(c)?1:1);
  const cum=[0];for(const w of wts)cum.push(cum[cum.length-1]+w);
  const tot=cum[cum.length-1]||1;
  const spans=chars.map(c=>{const s=document.createElement('span');s.className='tk';s.textContent=c;el.appendChild(s);return s});
  if(initPlayed)spans.forEach(s=>s.classList.add('played'));
  const dur=()=>isFinite(audio.duration)&&audio.duration>0?audio.duration:(durHint||0);
  const tOf=i=>dur()*cum[i]/tot;
  const findCur=t=>{const d=dur();if(d<=0)return -1;const tg=t/d*tot;let lo=0,hi=spans.length-1;while(lo<hi){const m=(lo+hi+1)>>1;cum[m]<=tg?lo=m:hi=m-1}return lo};
  spans.forEach((s,i)=>s.onclick=()=>{if(!audio.paused&&s.classList.contains('cur')){audio.pause();return}audio.currentTime=tOf(i);if(audio.paused)audio.play()});
  const upd=()=>{const t=audio.currentTime,ci=!audio.paused?findCur(t):-1;spans.forEach((s,i)=>{s.classList.toggle('played',tOf(i)<=t);s.classList.toggle('cur',i===ci)});el.classList.toggle('on',!audio.paused)};
  ['timeupdate','seeked','play','pause'].forEach(e=>audio.addEventListener(e,upd));
}
function mkPlayer(src){
  const w=document.createElement('div');w.className='player';
  w.innerHTML='<button class="pp">▶</button><div class="bar-wrap"><div class="bar"></div></div><span class="time">0:00 / 0:00</span>';
  const a=new Audio(src),pp=w.querySelector('.pp'),bw=w.querySelector('.bar-wrap'),b=w.querySelector('.bar'),tm=w.querySelector('.time');
  pp.onclick=()=>a.paused?a.play():a.pause();
  a.onplay=()=>pp.textContent='❚❚';a.onpause=()=>pp.textContent='▶';
  a.ontimeupdate=()=>{const d=a.duration||0;b.style.width=d?(a.currentTime/d*100)+'%':'0';tm.textContent=`${fmtT(a.currentTime)} / ${fmtT(d)}`};
  a.onended=()=>b.style.width='0';a.onloadedmetadata=()=>tm.textContent=`0:00 / ${fmtT(a.duration)}`;
  bw.onclick=e=>{const r=bw.getBoundingClientRect();if(a.duration)a.currentTime=(e.clientX-r.left)/r.width*a.duration};
  return w;
}

let msgN=0;
function addMsg(root,role,opts={}){
  const d=document.createElement('div');d.className='msg '+role;msgN++;
  const ts=new Date().toLocaleTimeString('en-US',{hour12:false});
  d.innerHTML=`<div class="meta">[${msgN}] ${role} @ ${ts}</div><div class="body"></div>`;
  const body=d.querySelector('.body');
  if(opts.image){const i=document.createElement('img');i.className='img';i.src=opts.image;body.appendChild(i)}
  if(opts.audioUrl){
    if(role==='user'&&opts.audioDuration){
      const n=Math.max(14,Math.min(80,Math.round(opts.audioDuration/.15)));
      const v=document.createElement('div');v.className='text voice';v.textContent=waveChars(n);body.appendChild(v);
      attachProg(new Audio(opts.audioUrl),v,opts.audioDuration);
    } else body.appendChild(mkPlayer(opts.audioUrl));
  }
  if(opts.text!==undefined){const t=document.createElement('div');t.className='text';t.textContent=opts.text;body.appendChild(t)}
  root.appendChild(d);root.scrollTop=root.scrollHeight;
  return d;
}

/* ------------- Chat mode ------------- */
let chatHist=[],pendImg=null,pendAud=null,rec=null,recChunks=[],recording=false,gen=false,actx=null,nextT=0,aborter=null,chatPlaying=[],chatEpoch=0;
function stopChatAudio(){for(const s of chatPlaying)try{s.stop()}catch{}chatPlaying=[];if(actx){actx.close().catch(()=>{});actx=null;nextT=0}}
function stopChat(){chatEpoch++;if(aborter)try{aborter.abort()}catch{}stopChatAudio();gen=false;sendBtn.disabled=false;ts.textContent='idle'}

function renderChips(){
  att.innerHTML='';txt.disabled=!!pendAud;txt.placeholder=pendAud?'(voice attached — text disabled)':'Message MiniMind-O...';
  if(pendImg){const c=document.createElement('span');c.className='chip';c.innerHTML=`<img src="${pendImg.url}"><span>image</span><span class="x">×</span>`;c.querySelector('.x').onclick=()=>{URL.revokeObjectURL(pendImg.url);pendImg=null;renderChips()};att.appendChild(c)}
  if(pendAud){const c=document.createElement('span');c.className='chip';c.innerHTML=`<span class="play">▶ voice · ${pendAud.duration.toFixed(1)}s</span><span class="x">×</span>`;c.querySelector('.play').onclick=()=>new Audio(pendAud.url).play();c.querySelector('.x').onclick=()=>{URL.revokeObjectURL(pendAud.url);pendAud=null;renderChips()};att.appendChild(c)}
}

async function send(){
  if(gen)return;
  stopChatAudio();
  const t=txt.value.trim();if(!t&&!pendImg&&!pendAud)return;
  const o={};if(pendImg)o.image=pendImg.url;if(pendAud){o.audioUrl=pendAud.url;o.audioDuration=pendAud.duration}if(t)o.text=t;
  addMsg(chat,'user',o);
  const payload={text:t||'',audio:pendAud?.b64||null,image:pendImg?.b64||null,temperature:.7,max_tokens:512,history:chatHist,voice:voiceSel.value};
  txt.value='';pendImg=null;pendAud=null;renderChips();
  sendBtn.disabled=true;gen=true;stat.classList.remove('hidden');tt.textContent='—';ta.textContent='—';ts.textContent='sending';
  const ad=addMsg(chat,'assistant',{text:'…'}),ab=ad.querySelector('.body'),at=ab.querySelector('.text');
  let full='',segs=[],acc='';
  try{
    const myEpoch=++chatEpoch;
    aborter=new AbortController();
    const res=await fetch('/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload),signal:aborter.signal});
    const rd=res.body.getReader(),dec=new TextDecoder();ts.textContent='streaming';
    while(true){
      if(myEpoch!==chatEpoch)throw new DOMException('chat stopped','AbortError');
      const {done,value}=await rd.read();if(done)break;
      for(const ln of dec.decode(value).split('\n')){
        if(myEpoch!==chatEpoch)throw new DOMException('chat stopped','AbortError');
        if(!ln.startsWith('data: '))continue;
        let d;try{d=JSON.parse(ln.slice(6))}catch{continue}
        if(d.type==='user_prompt')chatHist.push({role:'user',content:d.content});
        else if(d.type==='ttft'){if(d.text_ttft!==undefined)tt.textContent=d.text_ttft+' ms';if(d.audio_ttft!==undefined)ta.textContent=d.audio_ttft+' ms'}
        else if(d.type==='text'){full+=d.content;at.textContent=full;chat.scrollTop=chat.scrollHeight}
        else if(d.type==='pcm'){
          acc+=d.c;
          if(d.d){
            if(!actx){actx=new AudioContext({sampleRate:24000});nextT=actx.currentTime+.1}
            const {i16,f32}=decPcm(acc);
            const buf=actx.createBuffer(1,f32.length,24000);buf.getChannelData(0).set(f32);
            const s=actx.createBufferSource();s.buffer=buf;s.connect(actx.destination);
            s.onended=()=>{chatPlaying=chatPlaying.filter(x=>x!==s)};
            chatPlaying.push(s);
            if(nextT<actx.currentTime)nextT=actx.currentTime;
            s.start(nextT);nextT+=buf.duration-.01;segs.push(i16);acc='';
          }
        } else if(d.type==='error')at.textContent='⚠ '+d.content;
      }
    }
    if(segs.length){const url=URL.createObjectURL(buildWav(segs,24000));attachProg(new Audio(url),at,null,true)}
    if(full)chatHist.push({role:'assistant',content:full});
    ts.textContent='done';
  } catch(e){if(e.name!=='AbortError'){at.textContent='⚠ '+e.message;ts.textContent='error'}}
  gen=false;sendBtn.disabled=false;aborter=null;
}

sendBtn.onclick=send;
txt.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send()}});
const imgPop=$('imgPop'),fileBtn=$('fileBtn'),shotBtn=$('shotBtn'),snap=$('snap'),snapV=$('snapV'),snapOk=$('snapOk'),snapCancel=$('snapCancel');
const cloneModal=$('cloneModal'),cloneText=$('cloneText'),cloneStat=$('cloneStat'),cloneRecBtn=$('cloneRec'),cloneCancelBtn=$('cloneCancel'),cloneName=$('cloneName');
cloneText.textContent=CLONE_PROMPT;
moreBtn.onclick=e=>{e.stopPropagation();morePop.classList.toggle('on')};
morePop.onclick=e=>{
  e.stopPropagation();
  const del=e.target.closest('.vx');
  if(del){const name=del.dataset.del;if(!confirm('确认删除 '+name+'？'))return;fetch('/delete_voice',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})}).then(r=>r.json()).then(d=>{if(!d.ok)throw new Error(d.error);loadVoices(voiceSel.value===name?'default':voiceSel.value)}).catch(e=>alert(e.message));return}
  const add=e.target.closest('.vadd');
  if(add){closeMore();stopChat();cloneModal.classList.add('on');if(!cloneName.value.trim())cloneName.value='voice_clone';cloneStat.textContent='请自然读完，不用刻意加速';return}
  const item=e.target.closest('.vitem');
  if(item&&item.dataset.voice){voiceSel.value=item.dataset.voice;renderVoiceList();closeMore()}
};
imgBtn.onclick=e=>{e.stopPropagation();imgPop.classList.toggle('on')};
document.addEventListener('click',e=>{if(!imgPop.contains(e.target)&&e.target!==imgBtn)imgPop.classList.remove('on');if(!morePop.contains(e.target)&&e.target!==moreBtn)closeMore()});
fileBtn.onclick=()=>{imgPop.classList.remove('on');imgIn.click()};
const setImg=(b64,url)=>{if(pendImg)URL.revokeObjectURL(pendImg.url);pendImg={b64,url};renderChips()};
imgIn.onchange=()=>{const f=imgIn.files?.[0];if(!f)return;const r=new FileReader();r.onloadend=()=>setImg(r.result.split(',')[1],URL.createObjectURL(f));r.readAsDataURL(f);imgIn.value=''};
let snapStream=null;
const closeSnap=()=>{snap.classList.remove('on');if(snapStream){snapStream.getTracks().forEach(t=>t.stop());snapStream=null}snapV.srcObject=null};
shotBtn.onclick=async()=>{
  imgPop.classList.remove('on');
  try{snapStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'user',width:1280,height:720}});snapV.srcObject=snapStream;snap.classList.add('on')}
  catch(e){alert('camera error: '+e.message)}
};
snapCancel.onclick=closeSnap;
snapOk.onclick=()=>{
  if(!snapV.videoWidth)return;
  const cv=document.createElement('canvas');cv.width=snapV.videoWidth;cv.height=snapV.videoHeight;cv.getContext('2d').drawImage(snapV,0,0);
  const dataUrl=cv.toDataURL('image/jpeg',.9),b64=dataUrl.split(',')[1];
  cv.toBlob(blob=>setImg(b64,URL.createObjectURL(blob)),'image/jpeg',.9);
  closeSnap();
};
const CLONE_MAX_SECS=6;
let cloneRec=null,cloneChunks=[],cloneRecording=false,cloneBusy=false,cloneCanceled=false,cloneStream=null,cloneDeadline=0,cloneTimer=null;
const stopCloneTimer=()=>{if(cloneTimer){clearInterval(cloneTimer);cloneTimer=null}};
const resetClone=()=>{stopCloneTimer();if(cloneStream){cloneStream.getTracks().forEach(t=>t.stop());cloneStream=null}cloneRec=null;cloneChunks=[];cloneRecording=false;cloneBusy=false;cloneCanceled=false;cloneDeadline=0;cloneRecBtn.classList.remove('rec');cloneRecBtn.textContent='start';cloneRecBtn.disabled=false;cloneCancelBtn.disabled=false};
const hideClone=()=>{cloneModal.classList.remove('on');resetClone();cloneStat.textContent='点击 start 开始录音'};
cloneCancelBtn.onclick=()=>{if(cloneBusy)return;if(cloneRecording&&cloneRec){cloneCanceled=true;cloneStat.textContent='已取消';cloneRec.stop()}else hideClone()};
cloneRecBtn.onclick=async()=>{
  if(cloneBusy)return;
  if(!cloneRecording){
    try{
      cloneStream=await navigator.mediaDevices.getUserMedia({audio:true});
      cloneRec=new MediaRecorder(cloneStream);cloneChunks=[];cloneCanceled=false;
      cloneRec.ondataavailable=e=>cloneChunks.push(e.data);
      cloneRec.onstop=async()=>{
        const canceled=cloneCanceled,blob=new Blob(cloneChunks,{type:(cloneRec&&cloneRec.mimeType)||'audio/webm'});
        resetClone();
        if(canceled){cloneModal.classList.remove('on');cloneStat.textContent='点击 start 开始录音';return}
        cloneBusy=true;cloneRecBtn.disabled=true;cloneCancelBtn.disabled=true;cloneStat.textContent='正在提取音色…';
        try{
          const audio=await blobToB64(blob);
          const res=await fetch('/clone_voice',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({audio,name:cloneName.value.trim()})});
          const d=await res.json();
          if(!res.ok||!d.ok)throw new Error(d.error||'clone failed');
          await loadVoices(d.voice);
          voiceSel.value=d.voice;
          cloneStat.textContent='音色已生成，已自动切换到 '+d.voice;
          setTimeout(()=>hideClone(),600);
        }catch(e){cloneBusy=false;cloneRecBtn.disabled=false;cloneCancelBtn.disabled=false;cloneStat.textContent='失败：'+e.message}
      };
      cloneRec.start();cloneRecording=true;cloneRecBtn.classList.add('rec');cloneRecBtn.textContent='stop';cloneDeadline=Date.now()+CLONE_MAX_SECS*1000;
      const tick=()=>{
        const left=Math.max(0,Math.ceil((cloneDeadline-Date.now())/1000));
        cloneStat.textContent=`正在录音，请读完这句话 · ${left}s`;
        if(left<=0&&cloneRecording&&cloneRec){cloneBusy=true;cloneRecording=false;cloneRecBtn.disabled=true;cloneRecBtn.classList.remove('rec');cloneRecBtn.textContent='start';cloneStat.textContent='录音结束，正在上传…';cloneRec.stop()}
      };
      tick();
      cloneTimer=setInterval(tick,200);
    }catch(e){alert('mic error: '+e.message)}
  }else{
    stopCloneTimer();cloneBusy=true;cloneRecording=false;cloneRecBtn.disabled=true;cloneRecBtn.classList.remove('rec');cloneRecBtn.textContent='start';cloneStat.textContent='录音结束，正在上传…';cloneRec.stop();
  }
};
recBtn.onclick=async()=>{
  if(!recording){
    try{
      const st=await navigator.mediaDevices.getUserMedia({audio:true});
      rec=new MediaRecorder(st);recChunks=[];const t0=Date.now();
      rec.ondataavailable=e=>recChunks.push(e.data);
      rec.onstop=()=>{
        st.getTracks().forEach(t=>t.stop());
        const blob=new Blob(recChunks,{type:'audio/webm'}),dur=(Date.now()-t0)/1000,r=new FileReader();
        r.onloadend=()=>{const b64=r.result.split(',')[1],url=URL.createObjectURL(blob);if(pendAud)URL.revokeObjectURL(pendAud.url);pendAud={b64,url,duration:dur};renderChips()};
        r.readAsDataURL(blob);
      };
      rec.start();recording=true;recBtn.classList.add('rec');
    } catch(e){alert('mic error: '+e.message)}
  } else {rec.stop();recording=false;recBtn.classList.remove('rec')}
};

/* ------------- Call mode ------------- */
let callInit=false,callStop=null;
callBtn.onclick=openCall;
function openCall(){stopChat();document.body.classList.add('call');history.pushState({call:1},'','/call');if(!callInit){callInit=true;initCall()}}
function closeCall(){document.body.classList.remove('call');if(callStop)callStop();if(location.pathname==='/call')history.pushState({},'','/')}
window.addEventListener('popstate',()=>location.pathname==='/call'?openCall():closeCall());
if(location.pathname==='/call')openCall();

function initCall(){
  const stT=$('stT'),upT=$('upT'),stIc=$('stIc'),lbl=$('lbl'),osvg=$('osvg'),core=$('core'),ripG=$('rip');
  const ICONS={
    idle:'<svg viewBox="0 0 24 24"><circle class="dot" cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg>',
    listen:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/><path class="w w3" d="M7 8.5a6 6 0 0 0 0 7"/><path class="w w3" d="M17 8.5a6 6 0 0 1 0 7"/><path class="w w2" d="M4 6a9.5 9.5 0 0 0 0 12"/><path class="w w2" d="M20 6a9.5 9.5 0 0 1 0 12"/></svg>',
    gen:'<svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="1.8" fill="currentColor" stroke="none"/><circle cx="18.93" cy="15.5" r="1.4" fill="currentColor" stroke="none" opacity=".65"/><circle cx="5.07" cy="15.5" r="1" fill="currentColor" stroke="none" opacity=".35"/></svg>',
    speak:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/><path class="a1" d="M8 9a5 5 0 0 1 0 6"/><path class="a1" d="M16 9a5 5 0 0 0 0 6"/><path class="a2" d="M5 6.5a9 9 0 0 1 0 11"/><path class="a2" d="M19 6.5a9 9 0 0 0 0 11"/><path class="a3" d="M2 4a13 13 0 0 1 0 16"/><path class="a3" d="M22 4a13 13 0 0 0 0 16"/></svg>',
    err:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="8.5" y1="8.5" x2="15.5" y2="15.5"/><line x1="15.5" y1="8.5" x2="8.5" y2="15.5"/></svg>',
  };
  const cchat=$('cchat'),lat=$('lat'),lmE=$('lmE'),ltE=$('ltE');
  const camBtn=$('camBtn'),logBtn=$('logBtn'),endBtn=$('endBtn'),orb=$('orb'),camV=$('camV');
  const pill=$('pill'),connT=$('connT'),tcnt=$('tcnt'),trans=$('trans'),closeBtn=$('closeBtn');
  const blobs=[$('b0'),$('b1'),$('b2')];

  let ac,ana,mic,camStream=null,camOn=false,hist=[],nextT=0;
  let ws=null,wsActive=false,proc=null,rtc=null,rtSrc=null,playing=[],turns=0,mn=0;
  let curMsg=null,curText='',segs=[],start=0,ripT=0,sVol=0,asstPlay=false,raf=0;
  let spk=false,userBuf=[];
  const RT_SAMPLE_RATE=16000,RT_BLOCK=4096;
  const resamplePcm=(input,inRate,outRate)=>{
    if(!input.length||inRate===outRate)return input;
    const outLen=Math.max(1,Math.round(input.length*outRate/inRate));
    const out=new Float32Array(outLen);
    const step=inRate/outRate;
    for(let i=0;i<outLen;i++){
      const pos=i*step,idx=Math.floor(pos),frac=pos-idx;
      const a=input[idx]||0;
      const b=input[Math.min(idx+1,input.length-1)]||a;
      out[i]=a+(b-a)*frac;
    }
    return out;
  };
  const floatToI16=input=>{const out=new Int16Array(input.length);for(let i=0;i<input.length;i++)out[i]=Math.max(-32768,Math.min(32767,input[i]*32768));return out};
  const flushUser=()=>{
    if(!userBuf.length)return;
    const dur=userBuf.reduce((a,c)=>a+c.length,0)/16000;
    const url=URL.createObjectURL(buildWav(userBuf,16000));
    userBuf=[];
    const d=addCM('user'),body=d.querySelector('.body'),n=Math.max(14,Math.min(80,Math.round(dur/.15)));
    const v=document.createElement('div');v.className='text voice';v.textContent=waveChars(n);body.appendChild(v);
    attachProg(new Audio(url),v,dur);
    setLatest('user',`[voice · ${dur.toFixed(1)}s]`);
  };

  const N=32,NC=2,NR=5;let shT=0;
  const LAY=[{c:56,r:112,a:1.8,sp:.0005,ph:.6,vc:34,vr:18},{c:80,r:124,a:2.6,sp:.0008,ph:1.3,vc:52,vr:26},{c:104,r:138,a:3.6,sp:.0011,ph:2.1,vc:74,vr:34}];

  const catmull=pts=>{let d=`M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)} `;const n=pts.length;for(let i=0;i<n;i++){const p0=pts[(i-1+n)%n],p1=pts[i],p2=pts[(i+1)%n],p3=pts[(i+2)%n];const c1x=p1[0]+(p2[0]-p0[0])/6,c1y=p1[1]+(p2[1]-p0[1])/6,c2x=p2[0]-(p3[0]-p1[0])/6,c2y=p2[1]-(p3[1]-p1[1])/6;d+=`C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `}return d+'Z'};
  const setSt=(cls,t)=>{osvg.setAttribute('class',cls||'');lbl.className='lbl '+(cls||'');stT.textContent=t;const key=cls||(/error/i.test(t)?'err':'idle');stIc.innerHTML=ICONS[key]||ICONS.idle};
  const setConn=(live,t)=>{pill.className='pill'+(live?' live':'');connT.textContent=t};
  const ripple=k=>{const now=performance.now();if(now-ripT<550)return;ripT=now;const c=document.createElementNS('http://www.w3.org/2000/svg','circle');c.setAttribute('cx',0);c.setAttribute('cy',0);c.setAttribute('r',85);c.setAttribute('class','ripple '+k);ripG.appendChild(c);c.addEventListener('animationend',()=>c.remove())};
  const upTimer=setInterval(()=>{if(start)upT.textContent=fmtDur((Date.now()-start)/1000)},1000);

  const setLatest=(role,t)=>{if(!t)return;lat.classList.remove('empty','user','assistant');lat.classList.add(role);const ts=new Date().toLocaleTimeString('en-US',{hour12:false});lmE.textContent=`latest · ${role} @ ${ts}`;ltE.textContent=t;lat.scrollTop=0};
  const addCM=role=>{const d=document.createElement('div');d.className='msg '+role;mn++;const ts=new Date().toLocaleTimeString('en-US',{hour12:false});d.innerHTML=`<div class="meta">[${mn}] ${role} @ ${ts}</div><div class="body"></div>`;cchat.appendChild(d);cchat.scrollTop=cchat.scrollHeight;return d};
  const playPcm=b64=>{const {i16,f32}=decPcm(b64);segs.push(i16);const buf=ac.createBuffer(1,f32.length,24000);buf.getChannelData(0).set(f32);const s=ac.createBufferSource();s.buffer=buf;s.connect(ac.destination);s.onended=()=>{playing=playing.filter(x=>x!==s);if(!playing.length){asstPlay=false;if(!curMsg)setSt('','idle')}};playing.push(s);asstPlay=true;if(nextT<ac.currentTime)nextT=ac.currentTime;s.start(nextT);nextT+=buf.duration-.01};
  const stopPcm=()=>{for(const s of playing)try{s.stop()}catch{}playing=[];asstPlay=false;if(ac)nextT=ac.currentTime};
  const capCam=()=>{if(!camOn||!camV.videoWidth)return null;const cv=document.createElement('canvas');cv.width=camV.videoWidth;cv.height=camV.videoHeight;cv.getContext('2d').drawImage(camV,0,0);return cv.toDataURL('image/jpeg',.8).split(',')[1]};
  const sendCtx=()=>{if(!ws||ws.readyState!==1)return;ws.send(JSON.stringify({type:'context',history:hist,image:camOn?capCam():null,voice:callVoiceSel.value}))};
  window.callSendCtx=sendCtx;

  function render(){
    const now=performance.now();let vol=0,fq=null;
    if(ana){const d=new Uint8Array(ana.frequencyBinCount);ana.getByteFrequencyData(d);fq=d;let s=0;for(let i=0;i<d.length;i++)s+=d[i];vol=s/d.length/255}
    if(asstPlay)vol=Math.max(vol,.6+.25*Math.sin(now*.013));
    sVol=sVol*.7+vol*.3;
    const tgt=camOn?1:0;shT+=(tgt-shT)*.08;
    const shN=NC+(NR-NC)*shT,inv=-1/shN;
    for(let li=0;li<LAY.length;li++){
      const L=LAY[li],hw=L.c+(L.r-L.c)*shT,hh=hw,vs=L.vc+(L.vr-L.vc)*shT;
      const pts=new Array(N);
      for(let i=0;i<N;i++){
        const ang=(i/N)*Math.PI*2,cA=Math.cos(ang),sA=Math.sin(ang);
        const n=Math.sin(now*L.sp+i*L.ph)+.55*Math.sin(now*L.sp*1.7+i*L.ph*.7+li);
        let fv=0;if(fq){const idx=Math.floor((i/N)*Math.min(64,fq.length))+li*4;fv=(fq[idx%fq.length]||0)/255}
        if(asstPlay)fv=Math.max(fv,.5+.45*Math.abs(Math.sin(now*.011+i*.55+li*.9)));
        const g=Math.min(1,fv*.65+sVol*.55);
        const tx=Math.pow(Math.abs(cA)/hw,shN),ty=Math.pow(Math.abs(sA)/hh,shN);
        const r=Math.pow(tx+ty,inv)+n*L.a+g*vs;
        pts[i]=[cA*r,sA*r];
      }
      blobs[li].setAttribute('d',catmull(pts));
    }
    core.setAttribute('r',(3+sVol*10).toFixed(1));
    raf=requestAnimationFrame(render);
  }
  raf=requestAnimationFrame(render);

  async function initMic(){
    try{mic=await navigator.mediaDevices.getUserMedia({audio:true});ac=new AudioContext();const s=ac.createMediaStreamSource(mic);ana=ac.createAnalyser();ana.fftSize=256;s.connect(ana);setSt('','connecting');setConn(false,'connecting')}
    catch(e){setSt('','mic error');setConn(false,'mic error')}
  }

  camBtn.onclick=async()=>{
    if(camOn){if(camStream){camStream.getTracks().forEach(t=>t.stop());camStream=null}camV.srcObject=null;orb.classList.remove('camon');camBtn.classList.remove('active');camOn=false}
    else{try{camStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'user',width:640,height:480}});camV.srcObject=camStream;orb.classList.add('camon');camBtn.classList.add('active');camOn=true}catch{setSt('','cam error')}}
    if(wsActive)sendCtx();
  };
  logBtn.onclick=()=>{trans.classList.toggle('on');logBtn.classList.toggle('active',trans.classList.contains('on'))};
  closeBtn.onclick=()=>{trans.classList.remove('on');logBtn.classList.remove('active')};
  endBtn.onclick=closeCall;

  async function startRT(){
    wsActive=true;if(!mic)await initMic();
    rtc=new AudioContext();rtSrc=rtc.createMediaStreamSource(mic);proc=rtc.createScriptProcessor(4096,1,1);
    let rtAcc=new Float32Array(0);
    const pr=location.protocol==='https:'?'wss':'ws';
    ws=new WebSocket(`${pr}://${location.host}/ws/realtime`);ws.binaryType='arraybuffer';
    ws.onmessage=e=>{
      const m=JSON.parse(e.data);
      if(m.type==='vad'){
        if(m.speaking&&!spk){sendCtx();stopPcm();ripple('user');userBuf=[]}
        if(!m.speaking&&spk)flushUser();
        spk=m.speaking;
        if(m.speaking)setSt('listen','listening');else if(!asstPlay&&!curMsg)setSt('','idle');
      } else if(m.type==='generating'){
        setSt('gen','thinking');if(spk){flushUser();spk=false}
        turns++;tcnt.textContent=turns+(turns===1?' turn':' turns');
        curText='';segs=[];
        const d=addCM('assistant'),body=d.querySelector('.body'),t=document.createElement('div');t.className='text';body.appendChild(t);
        curMsg={div:d,body,textEl:t};stopPcm();
      } else if(m.type==='text'){
        curText+=m.content;if(curMsg)curMsg.textEl.textContent=curText;
        setLatest('assistant',curText);cchat.scrollTop=cchat.scrollHeight;
      } else if(m.type==='pcm'){setSt('speak','speaking');ripple('assistant');playPcm(m.data)}
      else if(m.type==='done'){
        if(curText)hist.push({role:'assistant',content:curText});
        if(m.interrupted)stopPcm();
        if(curMsg&&segs.length){const url=URL.createObjectURL(buildWav(segs,24000));attachProg(new Audio(url),curMsg.textEl,null,true)}
        curMsg=null;if(!asstPlay)setSt('','idle');
      }
    };
    ws.onclose=()=>{if(wsActive)stopRT()};
    ws.onopen=()=>{
      start=Date.now();setConn(true,'live');setSt('','idle');sendCtx();
      proc.onaudioprocess=e=>{
        if(ws.readyState!==1)return;
        const rs=resamplePcm(e.inputBuffer.getChannelData(0),e.inputBuffer.sampleRate,RT_SAMPLE_RATE);
        const merged=new Float32Array(rtAcc.length+rs.length);merged.set(rtAcc);merged.set(rs,rtAcc.length);
        let off=0;
        for(;merged.length-off>=RT_BLOCK;off+=RT_BLOCK){
          const i16=floatToI16(merged.subarray(off,off+RT_BLOCK));
          ws.send(i16.buffer);
          if(spk)userBuf.push(new Int16Array(i16));
        }
        rtAcc=merged.slice(off);
      };
      rtSrc.connect(proc);proc.connect(rtc.destination);
    };
  }
  function stopRT(){wsActive=false;if(ws){ws.close();ws=null}if(proc){proc.disconnect();proc.onaudioprocess=null;proc=null}if(rtSrc){rtSrc.disconnect();rtSrc=null}if(rtc){rtc.close();rtc=null}stopPcm();setSt('','disconnected');setConn(false,'offline')}

  callStop=()=>{
    stopRT();
    window.callSendCtx=null;
    if(camStream){camStream.getTracks().forEach(t=>t.stop());camStream=null;camOn=false;orb.classList.remove('camon');camV.srcObject=null;camBtn.classList.remove('active')}
    if(mic){mic.getTracks().forEach(t=>t.stop());mic=null}
    if(ac){try{ac.close()}catch{}ac=null}
    if(raf)cancelAnimationFrame(raf);
    clearInterval(upTimer);callInit=false;callStop=null;
  };
  initMic().then(startRT);
}
</script>
</body>
</html>