Spaces:

Human-Intelligence
/

Chat

Running

App Files Files Community

wop commited on 22 days ago

Commit

aed95f4

verified ·

1 Parent(s): 3d9e926

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +92 -10

templates/index.html CHANGED Viewed

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ app_title }}</title>
   <style>
     :root {
@@ -57,9 +58,10 @@
     .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
     .logo {
       width: 30px; height: 30px; border-radius: 10px;
-      display: grid; place-items: center; font-size: 15px;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
       box-shadow: 0 6px 18px rgba(108,131,255,.25);
       flex: 0 0 auto;
     }
     .brand-title { font-weight: 700; letter-spacing: -.03em; font-size: 15px; }
@@ -351,6 +353,10 @@
       background: rgba(255,255,255,.02);
       animation: fadeUp 200ms ease both;
     }
     .other-answer-head {
       display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
       color: var(--muted); font-family: var(--mono); font-size: 10px;
@@ -472,10 +478,42 @@
     /* ── Diffusion ── */
     .diffusion-text {
-      filter: blur(4px); opacity: .4;
-      transition: filter 600ms ease, opacity 600ms ease;
     }
-    .diffusion-text.revealed { filter: blur(0); opacity: 1; }
     /* ── Composer (questions only) ── */
     .compose {
@@ -621,7 +659,7 @@
   <div id="app">
     <div id="topbar">
       <div class="brand">
-        <div class="logo">🧠</div>
         <div>
           <div class="brand-title">Human Intelligence</div>
           <div class="brand-sub">community answers</div>
@@ -694,6 +732,7 @@
         clientId: null,
         conversation: null,
         currentQuestion: "",
         loading: false,
         animMode: localStorage.getItem("hi_anim") || "none",
       };
@@ -740,6 +779,16 @@
         requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; });
       }
       function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
       async function animateText(el, text) {
         const mode = S.animMode;
@@ -764,10 +813,14 @@
             await sleep(d);
           }
         } else if (mode === "diffusion") {
-          el.innerHTML = `<span class="diffusion-text">${nl2br(text)}</span>`;
           scrollBottom();
-          await sleep(80);
-          el.querySelector(".diffusion-text").classList.add("revealed");
         } else {
           el.innerHTML = nl2br(text);
         }
@@ -910,6 +963,28 @@
           </div>`;
       }
       /* ── Main render ── */
       async function renderConversation(questionText, doAnimate) {
         const tr = $("transcript");
@@ -948,6 +1023,7 @@
                 <div class="bubble no-answer-bubble">No answer yet. Be the first to write one.</div>
                 <div class="turn-meta"><span class="chip warn">awaiting answer</span></div>
                 ${renderWriteAnswer()}
               </div>
             </div>`);
         } else {
@@ -960,6 +1036,7 @@
                 ${renderAnswerBlock(best, 0, true)}
                 ${renderWriteAnswer()}
                 ${renderOtherAnswers(answers)}
               </div>
             </div>`);
@@ -1089,7 +1166,9 @@
           ws.textContent = "Saving…";
           showStatus("Saving answer…");
           const res = await callAPI("answer", {
-            conversation_id: S.conversation.id, text,
           });
           hideStatus();
           ws.disabled = false; ws.textContent = orig;
@@ -1129,6 +1208,7 @@
         if (!res.ok) { toast(res.error||"Error","bad"); return; }
         S.conversation = res.conversation;
         S.currentQuestion = q;
         save();
         toast(res.matched ? "Existing answer found" : "New question created", "good");
         await renderConversation(q, true);
@@ -1159,6 +1239,7 @@
         if (res.ok && res.conversation) {
           S.conversation = res.conversation;
           S.currentQuestion = res.conversation.question || "";
           renderConversation(S.currentQuestion, false);
         }
       }
@@ -1166,6 +1247,7 @@
       function newChat() {
         S.conversation = null;
         S.currentQuestion = "";
         localStorage.removeItem("hi_last_cid");
         $("transcript").innerHTML = "";
         $("welcome").style.display = "block";

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/logo.png" />
   <title>{{ app_title }}</title>
   <style>
     :root {
     .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
     .logo {
       width: 30px; height: 30px; border-radius: 10px;
+      display: block;
+      object-fit: cover;
       box-shadow: 0 6px 18px rgba(108,131,255,.25);
+      border: 1px solid rgba(255,255,255,.08);
       flex: 0 0 auto;
     }
     .brand-title { font-weight: 700; letter-spacing: -.03em; font-size: 15px; }
       background: rgba(255,255,255,.02);
       animation: fadeUp 200ms ease both;
     }
+    .other-answer-card.related {
+      background: linear-gradient(180deg, rgba(108,131,255,.05), rgba(255,255,255,.02));
+      border-color: rgba(108,131,255,.16);
+    }
     .other-answer-head {
       display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
       color: var(--muted); font-family: var(--mono); font-size: 10px;
     /* ── Diffusion ── */
     .diffusion-text {
+      display: inline;
+    }
+    .diffusion-token {
+      display: inline-block;
+      filter: blur(var(--blur, 8px));
+      opacity: var(--opacity, .18);
+      transform: translateY(var(--shift, 0px));
+      transition:
+        filter 420ms cubic-bezier(.22,.61,.36,1),
+        opacity 320ms ease,
+        transform 360ms cubic-bezier(.22,.61,.36,1);
+      will-change: filter, opacity, transform;
+    }
+    .diffusion-token.revealed {
+      filter: blur(0);
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .related-stack {
+      margin-top: 14px;
+      padding-top: 12px;
+      border-top: 1px solid rgba(255,255,255,.06);
+    }
+    .related-stack .chip {
+      margin-bottom: 6px;
+    }
+    .related-score {
+      color: var(--accent);
+      border-color: rgba(108,131,255,.22);
+    }
+    .related-note {
+      color: var(--muted);
+      font-size: 11px;
+      line-height: 1.5;
+      margin-top: 6px;
     }
     /* ── Composer (questions only) ── */
     .compose {
   <div id="app">
     <div id="topbar">
       <div class="brand">
+        <img class="logo" src="/logo.png" alt="Human Intelligence logo" />
         <div>
           <div class="brand-title">Human Intelligence</div>
           <div class="brand-sub">community answers</div>
         clientId: null,
         conversation: null,
         currentQuestion: "",
+        relatedAnswers: [],
         loading: false,
         animMode: localStorage.getItem("hi_anim") || "none",
       };
         requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; });
       }
       function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+      function diffusionTokens(text) {
+        return String(text || "").split(/(\s+)/).map((part, i) => {
+          if (!part) return "";
+          if (/^\s+$/.test(part)) return part.replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
+          const blur = (5 + (i % 4) * 1.4).toFixed(1);
+          const opacity = (0.14 + (i % 3) * 0.08).toFixed(2);
+          const shift = ((i % 2 === 0 ? 1 : -1) * ((i % 3) + 1)).toFixed(0);
+          return `<span class="diffusion-token" style="--blur:${blur}px;--opacity:${opacity};--shift:${shift}px;">${esc(part)}</span>`;
+        }).join("");
+      }
       async function animateText(el, text) {
         const mode = S.animMode;
             await sleep(d);
           }
         } else if (mode === "diffusion") {
+          el.innerHTML = `<span class="diffusion-text">${diffusionTokens(text)}</span>`;
           scrollBottom();
+          const tokens = Array.from(el.querySelectorAll(".diffusion-token"));
+          for (let i = 0; i < tokens.length; i++) {
+            tokens[i].classList.add("revealed");
+            if (i % 5 === 0) scrollBottom();
+            await sleep(26 + Math.random() * 30);
+          }
         } else {
           el.innerHTML = nl2br(text);
         }
           </div>`;
       }
+      function renderRelated(rel) {
+        if (!rel || !rel.length) return "";
+        return `
+          <div class="related-stack">
+            <div class="chip muted">from similar questions</div>
+            ${rel.map(r => `
+              <div class="other-answer-card related">
+                <div class="other-answer-head">
+                  <span class="chip matched">related</span>
+                  <span>${esc(r.question || "")}</span>
+                  <span>·</span>
+                  <span class="chip related-score">score ${(Number(r.score || 0)).toFixed(2)}</span>
+                </div>
+                <div class="other-answer-text">${nl2br(r.answer || "")}</div>
+              </div>
+            `).join("")}
+            <div class="related-note">These are read-only answers from semantically similar questions, so you can reuse context without writing into the wrong thread.</div>
+          </div>
+        `;
+      }
       /* ── Main render ── */
       async function renderConversation(questionText, doAnimate) {
         const tr = $("transcript");
                 <div class="bubble no-answer-bubble">No answer yet. Be the first to write one.</div>
                 <div class="turn-meta"><span class="chip warn">awaiting answer</span></div>
                 ${renderWriteAnswer()}
+                ${renderRelated(S.relatedAnswers)}
               </div>
             </div>`);
         } else {
                 ${renderAnswerBlock(best, 0, true)}
                 ${renderWriteAnswer()}
                 ${renderOtherAnswers(answers)}
+                ${renderRelated(S.relatedAnswers)}
               </div>
             </div>`);
           ws.textContent = "Saving…";
           showStatus("Saving answer…");
           const res = await callAPI("answer", {
+            conversation_id: S.conversation.id,
+            text,
+            question: S.currentQuestion,
           });
           hideStatus();
           ws.disabled = false; ws.textContent = orig;
         if (!res.ok) { toast(res.error||"Error","bad"); return; }
         S.conversation = res.conversation;
         S.currentQuestion = q;
+        S.relatedAnswers = Array.isArray(res.related) ? res.related : [];
         save();
         toast(res.matched ? "Existing answer found" : "New question created", "good");
         await renderConversation(q, true);
         if (res.ok && res.conversation) {
           S.conversation = res.conversation;
           S.currentQuestion = res.conversation.question || "";
+          S.relatedAnswers = [];
           renderConversation(S.currentQuestion, false);
         }
       }
       function newChat() {
         S.conversation = null;
         S.currentQuestion = "";
+        S.relatedAnswers = [];
         localStorage.removeItem("hi_last_cid");
         $("transcript").innerHTML = "";
         $("welcome").style.display = "block";