Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>TensorBend</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg-0: #08080a; --bg-1: #0e0e12; --bg-2: #16161d; --bg-3: #1e1e28; | |
| --accent: #2dd4bf; --accent-hover: #22b8a5; --accent-dim: rgba(45,212,191,0.08); | |
| --accent-glow: rgba(45,212,191,0.15); | |
| --text-1: #e8e6e3; --text-2: #8a8693; --text-3: #4a4654; | |
| --border: #1e1d24; --border-light: #2a2833; | |
| --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --mono: 'JetBrains Mono', 'SF Mono', monospace; | |
| --chat-max: 720px; | |
| } | |
| html, body { height: 100%; font-family: var(--font); background: var(--bg-0); color: var(--text-1); font-size: 15px; -webkit-font-smoothing: antialiased; } | |
| input, textarea, button, select { font-family: inherit; font-size: inherit; } | |
| ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } | |
| .app { display: flex; flex-direction: column; height: 100vh; } | |
| /* Top bar */ | |
| .topbar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg-0); flex-shrink: 0; } | |
| .topbar-left { display: flex; align-items: center; gap: 12px; } | |
| .topbar-title { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } | |
| .topbar-model { font-size: 13px; color: var(--text-2); font-weight: 500; } | |
| .topbar-right { display: flex; align-items: center; gap: 10px; } | |
| .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; } | |
| .status-dot.ready { background: #4ade80; } | |
| .status-dot.loading, .status-dot.generating { background: var(--accent); animation: pulse 1.2s infinite; } | |
| .status-dot.error { background: #ef4444; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } | |
| .status-text { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } | |
| /* Stats bar */ | |
| .stats-bar { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 7px 20px; border-bottom: 1px solid var(--border); background: var(--bg-1); font-size: 11px; flex-shrink: 0; } | |
| .stats-bar:empty { display: none; } | |
| .stat { display: flex; align-items: center; gap: 6px; } | |
| .stat-label { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 10px; } | |
| .stat-value { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; } | |
| .stat-value.highlight { color: var(--accent); font-size: 13px; } | |
| /* Chat area */ | |
| .chat-container { flex: 1; overflow-y: auto; } | |
| .chat-scroll { max-width: var(--chat-max); margin: 0 auto; padding: 32px 20px 20px; display: flex; flex-direction: column; gap: 28px; min-height: 100%; } | |
| /* Welcome */ | |
| .welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding-bottom: 40px; } | |
| .welcome h1 { font-size: 36px; font-weight: 700; color: var(--text-1); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 0; } | |
| .welcome h1 .brand-dot { color: var(--accent); } | |
| .experimental-badge { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--accent); border: 1px solid rgba(45,212,191,0.3); padding: 3px 8px; border-radius: 3px; letter-spacing: 0.1em; align-self: center; margin-left: 10px; } | |
| .model-family-badge { font-family: var(--mono); font-size: 9px; font-weight: 600; color: #2dd4bf; border: 1px solid rgba(45,212,191,0.3); padding: 3px 8px; border-radius: 3px; letter-spacing: 0.1em; align-self: center; margin-left: 6px; } | |
| .badge-row { display: flex; gap: 6px; justify-content: center; } | |
| .quant-support-badge { font-family: var(--mono); font-size: 9px; font-weight: 600; color: #eab308; border: 1px solid rgba(234,179,8,0.3); padding: 3px 8px; border-radius: 3px; letter-spacing: 0.08em; } | |
| .welcome p { color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 480px; } | |
| .welcome .tagline { font-size: 16px; color: #b8b4bf; font-weight: 400; line-height: 1.65; letter-spacing: -0.005em; } | |
| .welcome .tagline strong { color: var(--text-1); font-weight: 600; } | |
| .welcome .speed-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0; } | |
| .welcome .speed-headline { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; } | |
| .welcome .speed-context { text-align: center; font-size: 12px; color: var(--text-2); line-height: 1.7; max-width: 420px; letter-spacing: 0.005em; } | |
| .load-section { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; } | |
| .repo-input { width: 100%; padding: 11px 32px 11px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); outline: none; font-family: var(--mono); font-size: 13px; box-sizing: border-box; } | |
| .repo-input:focus { border-color: var(--accent); } | |
| .repo-dropdown-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); font-size: 10px; transition: transform 0.2s; } | |
| .repo-dropdown-wrapper.open .repo-dropdown-chevron { transform: translateY(-50%) rotate(180deg); } | |
| .repo-dropdown-wrapper.open .repo-input { border-radius: 8px 8px 0 0; border-color: var(--accent); } | |
| .btn-load { padding: 11px 28px; border-radius: 8px; border: none; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; font-size: 14px; transition: background 0.15s; letter-spacing: 0.02em; } | |
| .btn-load:hover { background: var(--accent-hover); } | |
| .btn-load:disabled { opacity: 0.4; cursor: not-allowed; } | |
| /* Download progress */ | |
| .download-bar { padding: 10px 20px; background: var(--accent-dim); border-bottom: 1px solid var(--border); text-align: center; flex-shrink: 0; } | |
| .download-text { font-size: 12px; color: var(--text-2); margin-bottom: 6px; } | |
| .download-track { max-width: 360px; margin: 0 auto; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } | |
| .download-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width 0.3s; } | |
| /* Messages */ | |
| .msg-group { display: flex; flex-direction: column; gap: 4px; } | |
| .msg-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px; } | |
| .msg-content { line-height: 1.7; font-size: 15px; white-space: pre-wrap; word-wrap: break-word; color: var(--text-1); } | |
| .msg-content.md-rendered { white-space: normal; } | |
| .msg-content.md-rendered p { margin: 0 0 0.6em 0; } | |
| .msg-content.md-rendered p:last-child { margin-bottom: 0; } | |
| .msg-content.md-rendered h1, .msg-content.md-rendered h2, .msg-content.md-rendered h3, | |
| .msg-content.md-rendered h4, .msg-content.md-rendered h5, .msg-content.md-rendered h6 { | |
| margin: 1em 0 0.5em 0; font-weight: 600; color: var(--text-1); line-height: 1.3; | |
| } | |
| .msg-content.md-rendered h1 { font-size: 1.4em; } | |
| .msg-content.md-rendered h2 { font-size: 1.2em; } | |
| .msg-content.md-rendered h3 { font-size: 1.05em; } | |
| .msg-content.md-rendered h1:first-child, .msg-content.md-rendered h2:first-child, .msg-content.md-rendered h3:first-child { margin-top: 0; } | |
| .msg-content.md-rendered code { | |
| font-family: var(--mono); font-size: 0.88em; padding: 2px 6px; | |
| background: var(--bg-3); border-radius: 4px; color: var(--accent); | |
| } | |
| .msg-content.md-rendered pre { | |
| margin: 0.6em 0; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--border); | |
| border-radius: 6px; overflow-x: auto; line-height: 1.5; | |
| } | |
| .msg-content.md-rendered pre code { | |
| padding: 0; background: none; color: var(--text-1); font-size: 13px; | |
| } | |
| .msg-content.md-rendered ul, .msg-content.md-rendered ol { | |
| margin: 0.4em 0; padding-left: 1.6em; | |
| } | |
| .msg-content.md-rendered li { margin: 0.2em 0; } | |
| .msg-content.md-rendered blockquote { | |
| margin: 0.6em 0; padding: 8px 14px; border-left: 3px solid var(--border-light); | |
| color: var(--text-2); background: var(--bg-2); border-radius: 0 4px 4px 0; | |
| } | |
| .msg-content.md-rendered table { | |
| margin: 0.6em 0; border-collapse: collapse; width: 100%; font-size: 14px; | |
| } | |
| .msg-content.md-rendered th, .msg-content.md-rendered td { | |
| padding: 6px 10px; border: 1px solid var(--border); text-align: left; | |
| } | |
| .msg-content.md-rendered th { background: var(--bg-2); font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } | |
| .msg-content.md-rendered hr { margin: 1em 0; border: none; border-top: 1px solid var(--border); } | |
| .msg-content.md-rendered a { color: var(--accent); text-decoration: none; } | |
| .msg-content.md-rendered a:hover { text-decoration: underline; } | |
| .msg-content.md-rendered strong { font-weight: 600; color: var(--text-1); } | |
| .msg-content.md-rendered em { font-style: italic; } | |
| .msg-content.md-rendered del { text-decoration: line-through; color: var(--text-2); } | |
| .msg-user .msg-role { color: var(--text-2); } | |
| /* Thinking block */ | |
| .think-block { margin-bottom: 10px; border-left: 2px solid var(--accent); padding: 10px 14px; background: var(--accent-dim); border-radius: 0 6px 6px 0; } | |
| .think-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } | |
| .think-toggle:hover { opacity: 0.8; } | |
| .think-arrow { font-size: 9px; transition: transform 0.2s; display: inline-block; } | |
| .think-arrow.open { transform: rotate(90deg); } | |
| .think-content { font-size: 13px; color: var(--text-2); line-height: 1.65; white-space: pre-wrap; word-wrap: break-word; margin-top: 8px; overflow-y: auto; max-height: 50vh; transition: max-height 0.3s, margin 0.3s, padding 0.3s; } | |
| .think-content.collapsed { max-height: 0; margin-top: 0; padding: 0; } | |
| /* Tool call block */ | |
| .tool-block { margin-bottom: 10px; border-left: 2px solid #f59e0b; padding: 10px 14px; background: rgba(245,158,11,0.06); border-radius: 0 6px 6px 0; } | |
| .tool-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #f59e0b; } | |
| .tool-toggle:hover { opacity: 0.8; } | |
| .tool-name { font-family: var(--mono); font-size: 12px; color: #fbbf24; font-weight: 500; text-transform: none; letter-spacing: 0; } | |
| .tool-content { font-size: 12px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; margin-top: 8px; font-family: var(--mono); overflow-y: auto; max-height: 40vh; transition: max-height 0.3s, margin 0.3s, padding 0.3s; } | |
| .tool-content.collapsed { max-height: 0; margin-top: 0; padding: 0; overflow: hidden; } | |
| .tool-args { color: var(--text-3); margin-bottom: 6px; } | |
| .tool-result-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #f59e0b; margin-top: 8px; margin-bottom: 4px; } | |
| .tool-result { color: var(--text-2); background: var(--bg-2); padding: 8px 10px; border-radius: 4px; max-height: 30vh; overflow-y: auto; } | |
| .tool-elapsed { font-size: 10px; color: var(--text-3); margin-top: 6px; font-family: var(--mono); } | |
| .tool-error { color: #ef4444; } | |
| /* Message stats */ | |
| .msg-stats { font-size: 10px; color: var(--text-3); margin-top: 8px; font-family: var(--mono); display: flex; gap: 8px; letter-spacing: 0.02em; } | |
| .msg-stats .sep { opacity: 0.3; } | |
| /* Images */ | |
| .msg-images { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } | |
| .msg-img { max-width: 200px; max-height: 200px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); } | |
| /* Image preview */ | |
| .image-preview { display: flex; gap: 6px; padding: 0 20px; flex-wrap: wrap; max-width: var(--chat-max); margin: 0 auto; width: 100%; } | |
| .image-preview:empty { display: none; } | |
| .img-thumb { position: relative; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } | |
| .img-thumb img { width: 100%; height: 100%; object-fit: cover; } | |
| .img-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,0.8); color: #fff; font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; } | |
| /* Input area */ | |
| .input-wrapper { border-top: 1px solid var(--border); background: var(--bg-0); padding: 14px 20px 22px; flex-shrink: 0; } | |
| .input-row { max-width: var(--chat-max); margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; position: relative; } | |
| .input-row textarea { flex: 1; padding: 12px 48px 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); outline: none; resize: none; height: 48px; max-height: 160px; line-height: 1.5; font-size: 15px; } | |
| .input-row textarea:focus { border-color: var(--accent); } | |
| .input-row textarea:disabled { opacity: 0.4; } | |
| .send-btn { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 6px; border: none; background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } | |
| .send-btn:hover:not(:disabled) { background: var(--accent-hover); } | |
| .send-btn:disabled { opacity: 0.2; cursor: not-allowed; } | |
| .send-btn svg { width: 15px; height: 15px; } | |
| .img-upload-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } | |
| .img-upload-btn:hover { background: var(--bg-2); color: var(--text-2); } | |
| .input-hint { text-align: center; font-size: 10px; color: var(--text-3); margin-top: 8px; max-width: var(--chat-max); margin-left: auto; margin-right: auto; text-transform: uppercase; letter-spacing: 0.06em; } | |
| /* Clear / Settings buttons */ | |
| .btn-clear, .btn-settings { padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; display: flex; align-items: center; justify-content: center; } | |
| .btn-clear:hover, .btn-settings:hover { background: var(--bg-2); color: var(--text-2); } | |
| .btn-settings { width: 30px; height: 26px; padding: 0; } | |
| .btn-settings svg { pointer-events: none; } | |
| /* Settings panel */ | |
| .settings-panel { padding: 0 20px; background: var(--bg-1); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: center; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } | |
| .settings-panel.open { max-height: 200px; padding: 12px 20px; } | |
| .settings-row { display: flex; align-items: center; gap: 8px; } | |
| .settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); min-width: 56px; white-space: nowrap; } | |
| .settings-select { padding: 4px 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); font-size: 12px; outline: none; cursor: pointer; } | |
| .settings-select:focus { border-color: var(--accent); } | |
| .settings-slider { width: 80px; accent-color: var(--accent); height: 4px; cursor: pointer; } | |
| .settings-val { font-size: 11px; color: var(--text-2); font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; } | |
| .settings-divider { width: 1px; height: 20px; background: var(--border); } | |
| .toggle-btn { padding: 3px 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-3); color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: all 0.15s; } | |
| .toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } | |
| .toggle-btn:hover { border-color: var(--accent); } | |
| /* Thinking placeholder while model is reasoning */ | |
| .msg-content[data-thinking="true"]:empty::before { content: "Thinking..."; color: var(--text-3); font-style: italic; animation: thinkPulse 1.5s infinite; } | |
| @keyframes thinkPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.2; } } | |
| /* System prompt textarea */ | |
| .system-prompt-input { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); outline: none; resize: vertical; min-height: 60px; max-height: 200px; font-size: 12px; line-height: 1.5; font-family: var(--font); } | |
| .system-prompt-input:focus { border-color: var(--accent); } | |
| .system-prompt-input::placeholder { color: var(--text-3); } | |
| /* Model search dropdown */ | |
| .repo-dropdown-wrapper { position: relative; width: 400px; } | |
| .repo-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-2); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 8px 8px; max-height: 320px; overflow-y: auto; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } | |
| .repo-dropdown-item { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; } | |
| .repo-dropdown-item:last-child { border-bottom: none; } | |
| .repo-dropdown-item:hover, .repo-dropdown-item.active { background: var(--accent-dim); } | |
| .repo-dropdown-item .model-name { font-family: var(--mono); font-size: 12px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } | |
| .repo-dropdown-item .model-meta { font-size: 10px; color: var(--text-3); display: flex; gap: 5px; align-items: center; flex-shrink: 0; } | |
| .repo-dropdown-item .model-meta .size-badge { background: var(--accent-dim); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 10px; min-width: 24px; text-align: center; } | |
| .repo-dropdown-item .model-meta .quant-badge { padding: 2px 5px; border-radius: 4px; font-weight: 600; font-size: 9px; letter-spacing: 0.03em; } | |
| .quant-paro { background: #2d1b4e; color: #c084fc; } | |
| .quant-gptq { background: #1b3a2d; color: #4ade80; } | |
| .quant-awq { background: #3a2a10; color: #fbbf24; } | |
| .quant-gguf { background: #1b2d3a; color: #60a5fa; } | |
| .quant-int4 { background: #2a2a2a; color: #a1a1aa; } | |
| .repo-dropdown-item .model-meta .meta-size { color: #f59e0b; font-weight: 600; } | |
| .repo-dropdown-item .model-meta .meta-ctx { color: #60a5fa; font-weight: 600; } | |
| .repo-dropdown-item .model-meta .cached-badge { background: #064e3b; color: #34d399; padding: 2px 5px; border-radius: 4px; font-weight: 700; font-size: 8px; letter-spacing: 0.05em; } | |
| .repo-dropdown-item.cached { border-left: 2px solid #34d399; } | |
| .repo-dropdown-loading { padding: 10px 14px; font-size: 11px; color: var(--text-3); text-align: center; } | |
| /* WebGPU warning banner */ | |
| .webgpu-warning { padding: 10px 20px; background: rgba(245,158,11,0.12); border-bottom: 1px solid #f59e0b; color: #f59e0b; font-size: 12px; text-align: center; flex-shrink: 0; } | |
| /* Toast */ | |
| .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border); opacity: 0; transition: all 0.3s; z-index: 1000; max-width: 480px; } | |
| .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } | |
| .toast-error { border-color: #ef4444; color: #ef4444; } | |
| .toast-success { border-color: var(--accent); color: var(--accent); } | |
| </style> | |
| <script type="module" crossorigin src="/assets/main-CSqvdzRW.js"></script> | |
| <link rel="modulepreload" crossorigin href="/assets/gpu-ops-CgR4iK87.js"> | |
| <link rel="modulepreload" crossorigin href="/assets/qwen35-model-DHin-Xw8.js"> | |
| <link rel="modulepreload" crossorigin href="/assets/safetensors-loader-CNnqzt-J.js"> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> | |