Ling-2.6-1T

Runtime error

App Files Files Community

akhaliq HF Staff commited on 3 days ago

Commit

e5ed48c

1 Parent(s): 47e787a

feat: add UI and project configuration for Ling-2.6-1T chat interface

Browse files

Files changed (3) hide show

README.md +16 -4
index.html +308 -0
requirements.txt +2 -0

README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 ---
 title: Ling 2.6 1T
-emoji: 🏆
-colorFrom: pink
-colorTo: gray
 sdk: gradio
 sdk_version: 6.14.0
 python_version: '3.13'
@@ -10,4 +10,16 @@ app_file: app.py
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Ling 2.6 1T
+emoji: 🧠
+colorFrom: purple
+colorTo: blue
 sdk: gradio
 sdk_version: 6.14.0
 python_version: '3.13'
 pinned: false
 ---
+# Ling 2.6 · 1T Chat
+Chat interface for [inclusionAI/Ling-2.6-1T](https://huggingface.co/inclusionAI/Ling-2.6-1T) routed via Hugging Face Inference Router.
+## Setup
+Set the `HF_TOKEN` secret in your Space settings.
+## Architecture
+- **Backend**: `gradio.Server` (FastAPI + Gradio queuing)
+- **Frontend**: Custom HTML/CSS/JS with SSE streaming
+- **Model**: `inclusionAI/Ling-2.6-1T:novita` via HF Router

index.html ADDED Viewed

	@@ -0,0 +1,308 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Ling 2.6 1T · Chat</title>
+<meta name="description" content="Chat with inclusionAI Ling-2.6-1T, a powerful 1-trillion parameter reasoning model, via Hugging Face Inference."/>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#08090c;
+  --surface:#10121a;
+  --glass:rgba(255,255,255,0.04);
+  --border:rgba(255,255,255,0.08);
+  --accent:#7c6aff;
+  --accent2:#a78bfa;
+  --glow:rgba(124,106,255,0.25);
+  --text:#e8eaf0;
+  --muted:#6b7280;
+  --user-bg:rgba(124,106,255,0.15);
+  --ai-bg:rgba(255,255,255,0.04);
+  --radius:16px;
+  --font:'Inter',sans-serif;
+  --mono:'JetBrains Mono',monospace;
+}
+html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}
+/* animated gradient orbs */
+body::before,body::after{
+  content:'';position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;
+}
+body::before{width:600px;height:600px;background:radial-gradient(circle,rgba(124,106,255,.18),transparent 70%);top:-150px;left:-100px;animation:drift1 18s ease-in-out infinite alternate}
+body::after{width:500px;height:500px;background:radial-gradient(circle,rgba(99,200,255,.12),transparent 70%);bottom:-100px;right:-80px;animation:drift2 22s ease-in-out infinite alternate}
+@keyframes drift1{to{transform:translate(80px,60px)}}
+@keyframes drift2{to{transform:translate(-60px,-40px)}}
+/* layout */
+#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto;padding:0 16px}
+/* header */
+header{display:flex;align-items:center;gap:14px;padding:20px 0 16px;border-bottom:1px solid var(--border);flex-shrink:0}
+.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 24px var(--glow)}
+.header-text h1{font-size:1.15rem;font-weight:700;background:linear-gradient(90deg,#fff,var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.header-text p{font-size:.75rem;color:var(--muted);margin-top:2px}
+.badge{margin-left:auto;font-size:.65rem;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid var(--accent);color:var(--accent2);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
+/* system prompt toggle */
+#sys-toggle-wrap{padding:10px 0 4px;flex-shrink:0}
+#sys-toggle{background:none;border:1px solid var(--border);color:var(--muted);font-size:.78rem;font-family:var(--font);padding:6px 14px;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}
+#sys-toggle:hover{border-color:var(--accent);color:var(--accent2)}
+#sys-panel{display:none;margin-top:8px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:12px;backdrop-filter:blur(12px)}
+#sys-panel.open{display:block}
+#system-prompt{width:100%;background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:.82rem;resize:none;outline:none;min-height:60px;line-height:1.6}
+#system-prompt::placeholder{color:var(--muted)}
+/* messages */
+#messages{flex:1;overflow-y:auto;padding:16px 0 8px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
+#messages::-webkit-scrollbar{width:4px}
+#messages::-webkit-scrollbar-track{background:transparent}
+#messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
+.msg{display:flex;gap:12px;animation:fadeUp .3s ease}
+@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.msg.user{flex-direction:row-reverse}
+.avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;align-self:flex-start;margin-top:2px}
+.msg.user .avatar{background:linear-gradient(135deg,var(--accent),#a78bfa)}
+.msg.ai .avatar{background:var(--glass);border:1px solid var(--border)}
+.bubble{max-width:78%;padding:12px 16px;border-radius:var(--radius);font-size:.88rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}
+.msg.user .bubble{background:var(--user-bg);border:1px solid rgba(124,106,255,.3);border-top-right-radius:4px}
+.msg.ai .bubble{background:var(--ai-bg);border:1px solid var(--border);border-top-left-radius:4px}
+/* code blocks inside bubbles */
+.bubble code{font-family:var(--mono);font-size:.8rem;background:rgba(0,0,0,.4);padding:2px 6px;border-radius:4px;color:#a5f3fc}
+.bubble pre{background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:10px;padding:12px;margin:8px 0;overflow-x:auto}
+.bubble pre code{background:none;padding:0}
+/* typing cursor */
+.cursor{display:inline-block;width:2px;height:1em;background:var(--accent2);margin-left:2px;animation:blink .7s step-end infinite;vertical-align:text-bottom}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+/* empty state */
+#empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--muted);text-align:center;pointer-events:none;user-select:none}
+#empty .big-icon{font-size:48px;opacity:.4}
+#empty p{font-size:.85rem;max-width:320px;line-height:1.7}
+#empty.hidden{display:none}
+/* suggestions */
+#suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;flex-shrink:0}
+.sug{background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:.78rem;color:var(--muted);cursor:pointer;transition:all .2s;line-height:1.4}
+.sug:hover{border-color:var(--accent);color:var(--accent2);background:rgba(124,106,255,.08)}
+#suggestions.hidden{display:none}
+/* input bar */
+#input-wrap{flex-shrink:0;padding:12px 0 20px}
+#input-box{display:flex;align-items:flex-end;gap:10px;background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:12px 14px;backdrop-filter:blur(16px);transition:border-color .2s,box-shadow .2s}
+#input-box:focus-within{border-color:rgba(124,106,255,.5);box-shadow:0 0 0 3px rgba(124,106,255,.1)}
+#user-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:.9rem;resize:none;max-height:160px;line-height:1.6;overflow-y:auto}
+#user-input::placeholder{color:var(--muted)}
+#send-btn{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#a78bfa);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,box-shadow .2s;box-shadow:0 0 16px var(--glow)}
+#send-btn:hover:not(:disabled){transform:scale(1.07);box-shadow:0 0 24px var(--glow)}
+#send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
+#send-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+/* clear btn */
+#clear-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:.75rem;font-family:var(--font);padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .2s;flex-shrink:0;align-self:center}
+#clear-btn:hover{border-color:#ef4444;color:#f87171}
+/* footer */
+footer{text-align:center;font-size:.68rem;color:var(--muted);padding-bottom:8px;flex-shrink:0}
+footer a{color:var(--accent2);text-decoration:none}
+</style>
+</head>
+<body>
+<div id="app">
+  <header>
+    <div class="logo">🧠</div>
+    <div class="header-text">
+      <h1>Ling 2.6 · 1T</h1>
+      <p>inclusionAI · via Hugging Face Router</p>
+    </div>
+    <div class="badge">novita</div>
+    <button id="clear-btn" title="Clear conversation">Clear</button>
+  </header>
+  <div id="sys-toggle-wrap">
+    <button id="sys-toggle">⚙️ System prompt <span id="sys-arrow">▾</span></button>
+    <div id="sys-panel">
+      <textarea id="system-prompt" rows="3" placeholder="Optional system instructions… e.g. 'You are a concise coding assistant.'"></textarea>
+    </div>
+  </div>
+  <div id="messages">
+    <div id="empty">
+      <div class="big-icon">💬</div>
+      <p>Ask Ling-2.6-1T anything — math, reasoning, code, or open-ended questions.</p>
+    </div>
+  </div>
+  <div id="suggestions">
+    <div class="sug" onclick="useSuggestion(this)">🔢 Prove that √2 is irrational</div>
+    <div class="sug" onclick="useSuggestion(this)">🐍 Write a binary search in Python</div>
+    <div class="sug" onclick="useSuggestion(this)">🌍 What is the capital of France?</div>
+    <div class="sug" onclick="useSuggestion(this)">🧩 Explain attention in transformers</div>
+  </div>
+  <div id="input-wrap">
+    <div id="input-box">
+      <textarea id="user-input" placeholder="Message Ling…" rows="1" id="user-input"></textarea>
+      <button id="send-btn" title="Send">
+        <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+      </button>
+    </div>
+  </div>
+  <footer>Powered by <a href="https://huggingface.co/inclusionAI/Ling-2.6-1T" target="_blank">inclusionAI/Ling-2.6-1T</a> · Gradio Server</footer>
+</div>
+<script>
+const messagesEl = document.getElementById('messages');
+const inputEl    = document.getElementById('user-input');
+const sendBtn    = document.getElementById('send-btn');
+const emptyEl    = document.getElementById('empty');
+const sugsEl     = document.getElementById('suggestions');
+const sysToggle  = document.getElementById('sys-toggle');
+const sysPanel   = document.getElementById('sys-panel');
+const sysArrow   = document.getElementById('sys-arrow');
+const sysInput   = document.getElementById('system-prompt');
+const clearBtn   = document.getElementById('clear-btn');
+let history = [];   // [{role,content}]
+let streaming = false;
+// System prompt toggle
+sysToggle.addEventListener('click', () => {
+  sysPanel.classList.toggle('open');
+  sysArrow.textContent = sysPanel.classList.contains('open') ? '▴' : '▾';
+});
+// Auto-resize textarea
+inputEl.addEventListener('input', () => {
+  inputEl.style.height = 'auto';
+  inputEl.style.height = Math.min(inputEl.scrollHeight, 160) + 'px';
+});
+// Send on Enter (Shift+Enter = newline)
+inputEl.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+});
+sendBtn.addEventListener('click', sendMessage);
+clearBtn.addEventListener('click', clearConversation);
+function useSuggestion(el) {
+  inputEl.value = el.textContent.replace(/^[^\s]+\s/, '');
+  inputEl.focus();
+  sendMessage();
+}
+function clearConversation() {
+  history = [];
+  messagesEl.innerHTML = '<div id="empty"><div class="big-icon">💬</div><p>Ask Ling-2.6-1T anything — math, reasoning, code, or open-ended questions.</p></div>';
+  emptyEl && (emptyEl.classList.remove('hidden'));
+  sugsEl.classList.remove('hidden');
+}
+function appendMsg(role, content = '') {
+  const empt = document.getElementById('empty');
+  if (empt) empt.remove();
+  sugsEl.classList.add('hidden');
+  const wrap = document.createElement('div');
+  wrap.className = `msg ${role}`;
+  const av = document.createElement('div');
+  av.className = 'avatar';
+  av.textContent = role === 'user' ? '🧑' : '🤖';
+  const bub = document.createElement('div');
+  bub.className = 'bubble';
+  bub.textContent = content;
+  wrap.appendChild(av);
+  wrap.appendChild(bub);
+  messagesEl.appendChild(wrap);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+  return bub;
+}
+function setBubbleContent(bub, text) {
+  // Simple markdown: code fences and inline code
+  let escaped = text
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  // code fences
+  escaped = escaped.replace(/```([\w]*)\n?([\s\S]*?)```/g,
+    (_,lang,code) => `<pre><code>${code.trimEnd()}</code></pre>`);
+  // inline code
+  escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // bold
+  escaped = escaped.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
+  bub.innerHTML = escaped;
+}
+async function sendMessage() {
+  const text = inputEl.value.trim();
+  if (!text || streaming) return;
+  inputEl.value = '';
+  inputEl.style.height = 'auto';
+  sendBtn.disabled = true;
+  streaming = true;
+  history.push({ role: 'user', content: text });
+  appendMsg('user', text);
+  const aiBub = appendMsg('ai', '');
+  const cursor = document.createElement('span');
+  cursor.className = 'cursor';
+  aiBub.appendChild(cursor);
+  let accumulated = '';
+  try {
+    const resp = await fetch('/stream_chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        messages: history,
+        system_prompt: sysInput.value,
+      }),
+    });
+    const reader = resp.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = '';
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+      const parts = buf.split('\n\n');
+      buf = parts.pop();
+      for (const part of parts) {
+        if (!part.startsWith('data:')) continue;
+        const raw = part.slice(5).trim();
+        if (raw === '[DONE]') break;
+        try {
+          const { token } = JSON.parse(raw);
+          accumulated += token;
+          cursor.remove();
+          setBubbleContent(aiBub, accumulated);
+          aiBub.appendChild(cursor);
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        } catch {}
+      }
+    }
+  } catch (err) {
+    accumulated = '⚠️ Error: ' + err.message;
+    setBubbleContent(aiBub, accumulated);
+  }
+  cursor.remove();
+  setBubbleContent(aiBub, accumulated);
+  history.push({ role: 'assistant', content: accumulated });
+  streaming = false;
+  sendBtn.disabled = false;
+  inputEl.focus();
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+</script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ gradio>=5.0.0
2	+ openai>=1.0.0