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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg-0: #0a0a0a; --bg-1: #111111; --bg-2: #1a1a1a; --bg-3: #222222; | |
| --accent: #2dd4bf; --accent-hover: #14b8a6; --accent-dim: rgba(45,212,191,0.10); | |
| --text-1: #ffffff; --text-2: #999999; --text-3: #555555; | |
| --border: #2a2a2a; --border-light: #333333; | |
| --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 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: 20px; } | |
| .welcome h1 { font-size: 32px; font-weight: 700; color: var(--accent); } | |
| .welcome p { color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 460px; } | |
| .load-section { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; } | |
| .repo-input { width: 340px; padding: 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; text-align: center; } | |
| .repo-input:focus { 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-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: hidden; max-height: 600px; transition: max-height 0.3s, margin 0.3s, padding 0.3s; } | |
| .think-content.collapsed { max-height: 0; margin-top: 0; padding: 0; } | |
| /* 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: 12px 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; } | |
| .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); } | |
| /* 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-Cji2l4fL.js"></script> | |
| <link rel="modulepreload" crossorigin href="/assets/gpu-ops-flxI8RuZ.js"> | |
| <link rel="modulepreload" crossorigin href="/assets/qwen35-model-BJNcT5Rw.js"> | |
| <link rel="modulepreload" crossorigin href="/assets/safetensors-loader-CwGm5mJX.js"> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> | |