Update templates/index.html

templates/index.html

@@ -45,7 +45,6 @@
       position: relative; z-index: 1;
       height: 100%; display: flex; flex-direction: column;
     }
-
     /* ── Topbar ── */
     #topbar {
       height: 56px; padding: 0 16px;
@@ -84,7 +83,6 @@
       background: rgba(108,131,255,.06);
     }
     .top-btn svg { width: 14px; height: 14px; }
-
     /* ── Status bar ── */
     #statusbar {
       height: 0; overflow: hidden;
@@ -107,7 +105,6 @@
       0%, 100% { opacity: .4; transform: scale(.85); }
       50% { opacity: 1; transform: scale(1.1); }
     }
-
     /* ── Chat area ── */
     #chat {
       flex: 1; overflow-y: auto;
@@ -118,7 +115,6 @@
     #chat::-webkit-scrollbar-track { background: transparent; }
     #chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 9px; }
     .wrap { max-width: 760px; margin: 0 auto; }
-
     /* ── Welcome ── */
     .welcome {
       margin: 6vh auto 0; max-width: 480px; text-align: center;
@@ -135,7 +131,6 @@
       from { opacity: 0; transform: translateY(12px); }
       to { opacity: 1; transform: translateY(0); }
     }
-
     /* ── Turns ── */
     .turn {
       display: flex; gap: 10px; margin-bottom: 6px;
@@ -189,7 +184,6 @@
     .chip.muted { color: var(--muted); }
     .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.25); }
     .chip.matched { color: var(--accent); border-color: rgba(108,131,255,.25); }
-
     /* ── Best answer ── */
     .best-answer-bubble {
       border: 1px solid rgba(45,212,191,.15);
@@ -203,7 +197,6 @@
       margin-top: 4px;
       display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
-
     /* ── Vote ── */
     .vote-row { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
     .vote-btn {
@@ -230,7 +223,6 @@
       background: rgba(248,113,113,.08);
     }
     .vote-btn:active { transform: scale(.94); }
-
     .action-btn {
       border: 1px solid var(--border2);
       background: rgba(255,255,255,.02);
@@ -245,7 +237,6 @@
       border-color: rgba(108,131,255,.35);
       color: var(--text);
     }
-
     /* ── Write answer inline panel ── */
     .write-answer-btn {
       border: 1px solid rgba(45,212,191,.3);
@@ -264,7 +255,6 @@
       border-color: rgba(45,212,191,.5);
     }
     .write-answer-btn svg { width: 14px; height: 14px; }
-
     .write-panel {
       max-height: 0; overflow: hidden;
       transition: max-height 300ms ease, opacity 250ms ease, margin 200ms ease;
@@ -316,7 +306,6 @@
       font: inherit; font-size: 12px;
       cursor: pointer;
     }
-
     /* ── Other answers expandable ── */
     .other-answers-toggle {
       margin-top: 8px;
@@ -366,7 +355,6 @@
       font-size: 13px; line-height: 1.6;
       white-space: pre-wrap; word-break: break-word;
     }
-
     /* ── Versions ── */
     .versions-toggle {
       margin-top: 4px;
@@ -401,7 +389,6 @@
       font-size: 12px; line-height: 1.55;
       white-space: pre-wrap; word-break: break-word;
     }
-
     /* ── Propose version ── */
     .propose-panel {
       max-height: 0; overflow: hidden;
@@ -450,7 +437,6 @@
       font: inherit; font-size: 11px;
       cursor: pointer;
     }
-
     /* ── Typing indicator ── */
     .typing-indicator {
       display: flex; gap: 10px; margin-bottom: 6px;
@@ -475,7 +461,6 @@
       0%, 60%, 100% { transform: translateY(0); opacity: .35; }
       30% { transform: translateY(-5px); opacity: 1; }
     }
-
     /* ── Diffusion ── */
     .diffusion-text {
       display: inline;
@@ -496,6 +481,29 @@
       opacity: 1;
       transform: translateY(0);
     }
+    .diffusion-v2-text {
+      display: inline;
+    }
+    .diffusion-v2-char {
+      display: inline-block;
+      min-width: .04em;
+      opacity: .82;
+      color: rgba(235,239,247,.92);
+      transition:
+        color 180ms ease,
+        opacity 180ms ease,
+        transform 180ms ease;
+    }
+    .diffusion-v2-char.pending {
+      color: rgba(139,147,168,.88);
+      opacity: .9;
+      transform: translateY(calc(var(--drift, 0) * 1px));
+    }
+    .diffusion-v2-char.resolved {
+      color: var(--text);
+      opacity: 1;
+      transform: translateY(0);
+    }
     .related-stack {
       margin-top: 14px;
       padding-top: 12px;
@@ -548,7 +556,6 @@
       line-height: 1.5;
       margin-top: 6px;
     }
-
     /* ── Composer (questions only) ── */
     .compose {
       border-top: 1px solid var(--border);
@@ -602,7 +609,6 @@
     }
     .send-btn:active { transform: scale(.96); }
     .send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
-
     /* ── Settings panel ── */
     #settingsPanel {
       position: fixed;
@@ -654,7 +660,6 @@
       transition: transform 200ms ease;
     }
     .toggle.on::after { transform: translateX(16px); }
-
     /* ── Toast ── */
     #toast {
       position: fixed;
@@ -676,9 +681,7 @@
     #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
     #toast.good { border-color: rgba(45,212,191,.4); color: var(--good); }
     #toast.bad { border-color: rgba(248,113,113,.4); color: var(--bad); }
-
     .no-answer-bubble { border-style: dashed !important; color: var(--muted); }
-
     @media (max-width: 600px) {
       #topbar { padding: 0 10px; }
       .brand-sub { display: none; }
@@ -733,6 +736,10 @@
         <div><div class="setting-label">Diffusion</div><div class="setting-desc">Blur-to-clear reveal</div></div>
         <div class="toggle" id="togDiffusion" data-anim="diffusion"></div>
       </div>
+      <div class="setting-row">
+        <div><div class="setting-label">Diffusion v2</div><div class="setting-desc">Random text resolves in global steps</div></div>
+        <div class="toggle" id="togDiffusionV2" data-anim="diffusion-v2"></div>
+      </div>
     </div>
 
     <div id="chat">
@@ -771,7 +778,6 @@
         animMode: localStorage.getItem("hi_anim") || "none",
       };
       const $ = id => document.getElementById(id);
-
       function getClientId() {
         let id = localStorage.getItem("hi_client_id");
         if (!id) {
@@ -781,7 +787,6 @@
         }
         return id;
       }
-
       function toast(msg, kind = "") {
         const t = $("toast");
         t.textContent = msg;
@@ -790,7 +795,6 @@
         clearTimeout(t._t);
         t._t = setTimeout(() => { t.className = ""; }, 2000);
       }
-
       function showStatus(text) {
         $("statusText").textContent = text;
         $("statusbar").classList.add("visible");
@@ -798,7 +802,6 @@
       function hideStatus() {
         $("statusbar").classList.remove("visible");
       }
-
       function esc(s) {
         return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
       }
@@ -823,7 +826,74 @@
           return `<span class="diffusion-token" style="--blur:${blur}px;--opacity:${opacity};--shift:${shift}px;">${esc(part)}</span>`;
         }).join("");
       }
-
+      function escAttr(s) {
+        return String(s)
+          .replace(/&/g,"&amp;")
+          .replace(/"/g,"&quot;")
+          .replace(/</g,"&lt;")
+          .replace(/>/g,"&gt;");
+      }
+      function randomGlyphFor(ch) {
+        if (/\s/.test(ch)) return ch;
+        const pools = {
+          upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+          lower: "abcdefghijklmnopqrstuvwxyz",
+          digit: "0123456789",
+          punct: ".,!?;:-_=+/*#%&$@<>[]{}()"
+        };
+        let pool = pools.punct;
+        if (/[A-Z]/.test(ch)) pool = pools.upper;
+        else if (/[a-z]/.test(ch)) pool = pools.lower;
+        else if (/[0-9]/.test(ch)) pool = pools.digit;
+        return pool[Math.floor(Math.random() * pool.length)] || ch;
+      }
+      function buildDiffusionV2(text) {
+        const chars = Array.from(String(text || ""));
+        const total = chars.filter(ch => !/\s/.test(ch)).length || 1;
+        let seen = 0;
+        const meta = chars.map((ch, i) => {
+          if (/\s/.test(ch)) return { ch, threshold: -1, drift: 0 };
+          const base = seen / total;
+          seen += 1;
+          const jitter = (Math.random() - 0.5) * 0.18;
+          const tailBoost = Math.pow(i / Math.max(chars.length - 1, 1), 1.35) * 0.18;
+          return {
+            ch,
+            threshold: Math.min(.985, Math.max(.04, base * 0.82 + tailBoost + jitter)),
+            drift: Math.round((Math.random() - 0.5) * 4)
+          };
+        });
+        const html = meta.map((item, i) => {
+          if (/\s/.test(item.ch)) return esc(item.ch);
+          const start = randomGlyphFor(item.ch);
+          return `<span class="diffusion-v2-char pending" data-i="${i}" data-final="${escAttr(item.ch)}" style="--drift:${item.drift};">${esc(start)}</span>`;
+        }).join("");
+        return { html, meta };
+      }
+      async function animateDiffusionV2(el, text) {
+        const { html, meta } = buildDiffusionV2(text);
+        el.innerHTML = `<span class="diffusion-v2-text">${html}</span>`;
+        scrollBottom();
+        const nodes = Array.from(el.querySelectorAll(".diffusion-v2-char"));
+        const steps = Math.max(10, Math.min(22, Math.ceil(String(text || "").length / 8) + 8));
+        for (let step = 0; step <= steps; step++) {
+          const progress = step / steps;
+          let charNodeIndex = 0;
+          for (let i = 0; i < meta.length; i++) {
+            const item = meta[i];
+            if (/\s/.test(item.ch)) continue;
+            const node = nodes[charNodeIndex++];
+            if (!node) continue;
+            const resolved = progress >= item.threshold;
+            node.classList.toggle("resolved", resolved);
+            node.classList.toggle("pending", !resolved);
+            node.textContent = resolved ? item.ch : randomGlyphFor(item.ch);
+          }
+          scrollBottom();
+          await sleep(42 + Math.random() * 26);
+        }
+        el.textContent = String(text || "");
+      }
       async function animateText(el, text) {
         const mode = S.animMode;
         if (mode === "ai") {
@@ -855,11 +925,12 @@
             if (i % 5 === 0) scrollBottom();
             await sleep(26 + Math.random() * 30);
           }
+        } else if (mode === "diffusion-v2") {
+          await animateDiffusionV2(el, text);
         } else {
           el.innerHTML = nl2br(text);
         }
       }
-
       function showTyping() {
         removeTyping();
         $("transcript").insertAdjacentHTML("beforeend", `
@@ -870,7 +941,6 @@
         scrollBottom();
       }
       function removeTyping() { const el = $("typingInd"); if (el) el.remove(); }
-
       function activeVersion(answer) {
         const v = answer?.versions || [];
         if (!v.length) return null;
@@ -888,7 +958,6 @@
           return d !== 0 ? d : String(b.created_at||"").localeCompare(String(a.created_at||""));
         });
       }
-
       /* ── Render helpers ── */
       function renderVoteRow(answerId, ver) {
         const vu = ver.votes_by_client && ver.votes_by_client[S.clientId] === 1;
@@ -898,7 +967,6 @@
           <button class="vote-btn ${vd?"voted-down":""}" data-vote="${answerId}|${ver.id}|-1">▼</button>
         </div>`;
       }
-
       function renderVersions(answer) {
         const act = activeVersion(answer);
         const others = (answer.versions||[]).filter(v => v.id !== act?.id);
@@ -920,7 +988,6 @@
               </div>`).join("")}
           </div>`;
       }
-
       function renderPropose(answerId) {
         return `
           <button class="action-btn" data-propose="${answerId}">Propose version</button>
@@ -932,7 +999,6 @@
             </div>
           </div>`;
       }
-
       function renderWriteAnswer() {
         return `
           <button class="write-answer-btn" id="writeAnswerBtn">
@@ -947,7 +1013,6 @@
             </div>
           </div>`;
       }
-
       function renderAnswerBlock(answer, idx, isBest) {
         const v = activeVersion(answer);
         if (!v) return "";
@@ -967,7 +1032,6 @@
             ${renderPropose(answer.id)}
           </div>`;
       }
-
       function renderOtherAnswers(answers) {
         if (answers.length <= 1) return "";
         const others = answers.slice(1);
@@ -996,10 +1060,8 @@
             }).join("")}
           </div>`;
       }
-
       function renderRelated(rel) {
         if (!rel || !rel.length) return "";
-
         return `
           <div class="related-stack">
             <div class="chip muted">from similar questions</div>
@@ -1023,21 +1085,17 @@
           </div>
         `;
       }
-
       /* ── Main render ── */
       async function renderConversation(questionText, doAnimate) {
         const tr = $("transcript");
         const wl = $("welcome");
         tr.innerHTML = "";
-
         if (!S.conversation) {
           wl.style.display = "block";
           return;
         }
         wl.style.display = "none";
-
         const q = questionText || S.conversation.question || "";
-
         // Question bubble
         tr.insertAdjacentHTML("beforeend", `
           <div class="turn user">
@@ -1050,9 +1108,7 @@
             </div>
             <div class="avatar user">U</div>
           </div>`);
-
         const answers = sortedAnswers(S.conversation);
-
         if (!answers.length) {
           // No answers yet — show placeholder + write button
           tr.insertAdjacentHTML("beforeend", `
@@ -1078,7 +1134,6 @@
                 <div id="relatedMount"></div>
               </div>
             </div>`);
-
           // Animate best answer text
           const bestV = activeVersion(best);
           if (bestV) {
@@ -1090,16 +1145,13 @@
             }
           }
         }
-
         const relatedMount = $("relatedMount");
         if (relatedMount && S.relatedAnswers.length) {
           relatedMount.innerHTML = renderRelated(S.relatedAnswers);
         }
-
         bindHandlers();
         scrollBottom();
       }
-
       /* ── Bind handlers ── */
       function bindHandlers() {
         // Votes
@@ -1119,7 +1171,6 @@
             } else toast(res.error||"Error","bad");
           };
         });
-
         // Toggle versions
         document.querySelectorAll("[data-toggle-versions]").forEach(btn => {
           btn.onclick = () => {
@@ -1130,7 +1181,6 @@
             btn.querySelector(".arrow").style.transform = open ? "rotate(90deg)" : "";
           };
         });
-
         // Other answers toggle
         const oat = $("otherAnswersToggle");
         if (oat) oat.onclick = () => {
@@ -1139,7 +1189,6 @@
           const open = p.classList.toggle("open");
           oat.classList.toggle("open", open);
         };
-
         const rt = $("relatedToggle");
         if (rt) rt.onclick = () => {
           const p = $("relatedPanel");
@@ -1147,7 +1196,6 @@
           const open = p.classList.toggle("open");
           rt.classList.toggle("open", open);
         };
-
         // Propose toggle
         document.querySelectorAll("[data-propose]").forEach(btn => {
           btn.onclick = () => {
@@ -1161,7 +1209,6 @@
             if (p) p.classList.remove("open");
           };
         });
-
         // Submit proposal
         document.querySelectorAll("[data-submit-proposal]").forEach(btn => {
           btn.onclick = async () => {
@@ -1185,7 +1232,6 @@
             } else toast(res.error||"Error","bad");
           };
         });
-
         // Write answer toggle
         const wab = $("writeAnswerBtn");
         if (wab) wab.onclick = () => {
@@ -1198,14 +1244,12 @@
             }
           }
         };
-
         // Cancel write
         const wc = $("writeCancel");
         if (wc) wc.onclick = () => {
           const p = $("writePanel");
           if (p) p.classList.remove("open");
         };
-
         // Submit answer
         const ws = $("writeSubmit");
         if (ws) ws.onclick = async () => {
@@ -1231,11 +1275,9 @@
           } else toast(res.error||"Error","bad");
         };
       }
-
       function save() {
         if (S.conversation) localStorage.setItem("hi_last_cid", S.conversation.id);
       }
-
       /* ── API ── */
       async function callAPI(action, payload = {}) {
         const resp = await fetch("/api", {
@@ -1245,7 +1287,6 @@
         });
         return resp.json();
       }
-
       /* ── Ask (input bar is ONLY for asking) ── */
       async function askQuestion(q) {
         showStatus("Searching for answers…");
@@ -1265,7 +1306,6 @@
         toast(res.matched ? "Existing answer found" : "New question created", "good");
         await renderConversation(q, true);
       }
-
       async function submitPrompt() {
         const p = $("prompt");
         const text = p.value.trim();
@@ -1276,12 +1316,10 @@
         // because the input bar is ONLY for questions
         await askQuestion(text);
       }
-
       function autoGrow(el) {
         el.style.height = "auto";
         el.style.height = Math.min(el.scrollHeight, 180) + "px";
       }
-
       async function loadSaved() {
         const id = localStorage.getItem("hi_last_cid");
         if (!id) return;
@@ -1295,7 +1333,6 @@
           renderConversation(S.currentQuestion, false);
         }
       }
-
       function newChat() {
         S.conversation = null;
         S.currentQuestion = "";
@@ -1306,7 +1343,6 @@
         $("prompt").value = "";
         $("prompt").focus();
       }
-
       /* ── Settings ── */
       function initSettings() {
         const panel = $("settingsPanel");
@@ -1315,7 +1351,7 @@
           if (!panel.contains(e.target) && e.target !== $("settingsBtn") && !$("settingsBtn").contains(e.target))
             panel.classList.remove("open");
         });
-        const ids = ["togNone","togAI","togHuman","togDiffusion"];
+        const ids = ["togNone","togAI","togHuman","togDiffusion","togDiffusionV2"];
         function sync() {
           ids.forEach(id => {
             $(id).classList.toggle("on", S.animMode === $(id).getAttribute("data-anim"));
@@ -1330,7 +1366,6 @@
         });
         sync();
       }
-
       /* ── Init ── */
       function init() {
         S.clientId = getClientId();
@@ -1351,4 +1386,4 @@
     })();
   </script>
 </body>
-</html>
+</html>