Update index.html
Browse files- index.html +617 -19
index.html
CHANGED
|
@@ -1,19 +1,617 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8"/>
|
| 5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
|
| 6 |
+
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
| 7 |
+
<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
|
| 8 |
+
<meta name="mobile-web-app-capable" content="yes"/>
|
| 9 |
+
<meta name="theme-color" content="#ffffff"/>
|
| 10 |
+
<title>WebLLM Chat — Local AI in Your Browser</title>
|
| 11 |
+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
| 12 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
| 13 |
+
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
|
| 14 |
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"/>
|
| 15 |
+
<style>
|
| 16 |
+
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
| 17 |
+
:root{
|
| 18 |
+
--bg:#ffffff;--bg-warm:#faf9f7;--bg-cool:#f4f2ef;
|
| 19 |
+
--surface:#ffffff;--surface-raised:#fefefe;
|
| 20 |
+
--border:#e8e5e0;--border-light:#f0ede8;
|
| 21 |
+
--text:#1a1815;--text-2:#5c5650;--text-3:#9c958d;--text-4:#c4beb6;
|
| 22 |
+
--accent:#4f6df5;--accent-hover:#3d5ae0;--accent-light:#eef1fe;--accent-text:#3b54c4;
|
| 23 |
+
--green:#2d9d5e;--green-bg:#edf7f0;
|
| 24 |
+
--red:#d44040;--red-bg:#fdf0f0;
|
| 25 |
+
--amber:#c08520;--amber-bg:#fdf6e8;
|
| 26 |
+
--radius:14px;--radius-sm:10px;--radius-xs:7px;
|
| 27 |
+
--shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02);
|
| 28 |
+
--shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
|
| 29 |
+
--shadow-lg:0 12px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
|
| 30 |
+
--font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
|
| 31 |
+
--font-display:'Newsreader',Georgia,serif;
|
| 32 |
+
--font-mono:'IBM Plex Mono','SF Mono',monospace;
|
| 33 |
+
--safe-top:env(safe-area-inset-top,0px);
|
| 34 |
+
--safe-bottom:env(safe-area-inset-bottom,0px);
|
| 35 |
+
}
|
| 36 |
+
html{font-size:16px;height:100%}
|
| 37 |
+
body{font-family:var(--font);background:var(--bg-warm);color:var(--text);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;opacity:0}
|
| 38 |
+
body.ready{opacity:1;transition:opacity .3s}
|
| 39 |
+
input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appearance:none;appearance:none}
|
| 40 |
+
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
|
| 41 |
+
.screen{display:none;width:100%;height:100%}.screen.active{display:flex}
|
| 42 |
+
|
| 43 |
+
/* LANDING */
|
| 44 |
+
#landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;position:relative;overflow-y:auto;background:var(--bg)}
|
| 45 |
+
.landing-deco{position:absolute;width:min(500px,90vw);height:min(500px,90vw);border-radius:50%;background:radial-gradient(circle,rgba(79,109,245,.07) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none}
|
| 46 |
+
.landing-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-light);padding:6px 16px;border-radius:100px;margin-bottom:24px;font-weight:500}
|
| 47 |
+
.landing-title{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4.5rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--text);margin-bottom:12px}
|
| 48 |
+
.landing-title em{font-style:italic;color:var(--accent)}
|
| 49 |
+
.landing-sub{font-size:.95rem;color:var(--text-2);max-width:460px;line-height:1.7;margin-bottom:32px;font-weight:400}
|
| 50 |
+
.landing-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
|
| 51 |
+
.chip{font-family:var(--font-mono);font-size:.68rem;font-weight:500;padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);letter-spacing:.02em}
|
| 52 |
+
.model-search-wrap{position:relative;width:100%;max-width:440px;margin-bottom:20px}
|
| 53 |
+
.model-search-input{width:100%;padding:14px 40px 14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:.82rem;outline:none;transition:border-color .2s,box-shadow .2s}
|
| 54 |
+
.model-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.1)}
|
| 55 |
+
.model-search-input::placeholder{color:var(--text-4)}
|
| 56 |
+
.search-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:.65rem;pointer-events:none;transition:transform .2s}
|
| 57 |
+
.model-search-wrap.open .search-chevron{transform:translateY(-50%) rotate(180deg)}
|
| 58 |
+
.model-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:320px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
|
| 59 |
+
.model-search-wrap.open .model-dropdown{display:block}
|
| 60 |
+
.model-search-wrap.open .model-search-input{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-color:var(--accent)}
|
| 61 |
+
.model-item{padding:11px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border-light);transition:background .1s;min-height:44px}
|
| 62 |
+
.model-item:last-child{border-bottom:none}
|
| 63 |
+
.model-item:hover,.model-item.active{background:var(--accent-light)}
|
| 64 |
+
.model-item-name{font-family:var(--font-mono);font-size:.75rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
|
| 65 |
+
.model-item-meta{display:flex;gap:5px;align-items:center;flex-shrink:0}
|
| 66 |
+
.size-badge{background:var(--accent-light);color:var(--accent-text);padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:.6rem;font-weight:600}
|
| 67 |
+
.vram-badge{background:var(--amber-bg);color:var(--amber);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.58rem;font-weight:600}
|
| 68 |
+
.mobile-badge{background:var(--green-bg);color:var(--green);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.56rem;font-weight:700;letter-spacing:.03em}
|
| 69 |
+
.model-dropdown-loading{padding:12px 14px;font-size:.75rem;color:var(--text-3);text-align:center}
|
| 70 |
+
.model-section-label{padding:8px 14px 4px;font-family:var(--font-mono);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:var(--bg-warm)}
|
| 71 |
+
.btn-load{font-family:var(--font);font-size:.9rem;font-weight:600;color:#fff;background:var(--accent);border:none;padding:14px 40px;border-radius:100px;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(79,109,245,.25);min-height:48px}
|
| 72 |
+
.btn-load:hover{background:var(--accent-hover);box-shadow:0 4px 20px rgba(79,109,245,.3);transform:translateY(-1px)}
|
| 73 |
+
.btn-load:active{transform:translateY(0)}
|
| 74 |
+
.btn-load:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
|
| 75 |
+
.landing-footer{margin-top:auto;padding:20px 0;font-family:var(--font-mono);font-size:.65rem;color:var(--text-4)}
|
| 76 |
+
.landing-footer a{color:var(--text-3);text-decoration:none}.landing-footer a:hover{color:var(--accent)}
|
| 77 |
+
|
| 78 |
+
/* LOADING */
|
| 79 |
+
#loading{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;background:var(--bg)}
|
| 80 |
+
.loader-ring{width:56px;height:56px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
|
| 81 |
+
@keyframes spin{to{transform:rotate(360deg)}}
|
| 82 |
+
.loader-text{font-size:.88rem;color:var(--text-2);font-weight:500;text-align:center}
|
| 83 |
+
.loader-sub{font-size:.75rem;color:var(--text-3);margin-top:4px;text-align:center;line-height:1.5}
|
| 84 |
+
.download-bar{width:min(360px,85vw)}
|
| 85 |
+
.download-text{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);text-align:center;margin-bottom:6px}
|
| 86 |
+
.download-track{height:4px;background:var(--bg-cool);border-radius:2px;overflow:hidden}
|
| 87 |
+
.download-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s}
|
| 88 |
+
|
| 89 |
+
/* CHAT */
|
| 90 |
+
#chat{flex-direction:column;height:100%;background:var(--bg-warm)}
|
| 91 |
+
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:calc(10px + var(--safe-top));border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;min-height:56px;gap:8px}
|
| 92 |
+
.chat-header-left{display:flex;align-items:center;gap:10px;min-width:0}
|
| 93 |
+
.chat-avatar{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.05rem;color:#fff;font-weight:600;flex-shrink:0}
|
| 94 |
+
.chat-header-info{min-width:0}
|
| 95 |
+
.chat-header-title{font-size:.92rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
| 96 |
+
.chat-header-status{font-family:var(--font-mono);font-size:.6rem;color:var(--green);letter-spacing:.05em;display:flex;align-items:center;gap:4px;font-weight:500}
|
| 97 |
+
.chat-header-status::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;flex-shrink:0}
|
| 98 |
+
.chat-header-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
|
| 99 |
+
.toggle-pill{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;padding:5px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface);transition:all .2s;min-height:32px}
|
| 100 |
+
.toggle-pill:has(input:checked){background:var(--accent-light);border-color:var(--accent)}
|
| 101 |
+
.toggle-pill input{display:none}
|
| 102 |
+
.toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:background .2s;flex-shrink:0}
|
| 103 |
+
.toggle-pill:has(input:checked) .toggle-dot{background:var(--accent)}
|
| 104 |
+
.toggle-lbl{font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);transition:color .2s;white-space:nowrap}
|
| 105 |
+
.toggle-pill:has(input:checked) .toggle-lbl{color:var(--accent-text)}
|
| 106 |
+
.btn-icon{background:var(--surface);border:1px solid var(--border);color:var(--text-3);width:32px;height:32px;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:.78rem;flex-shrink:0}
|
| 107 |
+
.btn-icon:hover{background:var(--bg-cool);color:var(--text-2)}
|
| 108 |
+
.btn-icon:active{transform:scale(.95)}
|
| 109 |
+
.btn-icon.active{background:var(--accent-light);color:var(--accent-text);border-color:var(--accent)}
|
| 110 |
+
.btn-reset{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--surface);border:1px solid var(--border);padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .15s;white-space:nowrap;min-height:32px}
|
| 111 |
+
.btn-reset:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
|
| 112 |
+
|
| 113 |
+
.settings-panel{padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border-light);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
|
| 114 |
+
.settings-panel.open{max-height:200px;padding:10px 16px}
|
| 115 |
+
.settings-row{display:flex;align-items:center;gap:5px}
|
| 116 |
+
.settings-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);min-width:40px;white-space:nowrap}
|
| 117 |
+
.settings-select{padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.72rem;outline:none;cursor:pointer;min-height:32px}
|
| 118 |
+
.settings-select:focus{border-color:var(--accent)}
|
| 119 |
+
.settings-slider{width:64px;accent-color:var(--accent);height:3px;cursor:pointer}
|
| 120 |
+
.settings-val{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
|
| 121 |
+
.system-prompt-wrap{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--bg)}
|
| 122 |
+
.system-prompt-wrap.open{max-height:170px;padding:8px 16px 10px;border-bottom:1px solid var(--border-light)}
|
| 123 |
+
.system-prompt-input{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-warm);color:var(--text);outline:none;resize:vertical;min-height:48px;max-height:120px;font-size:.8rem;line-height:1.5}
|
| 124 |
+
.system-prompt-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
|
| 125 |
+
.system-prompt-input::placeholder{color:var(--text-4)}
|
| 126 |
+
.stats-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:5px 16px;border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;font-size:.62rem;flex-wrap:wrap}
|
| 127 |
+
.stats-bar:empty{display:none}
|
| 128 |
+
.stat{display:flex;align-items:center;gap:4px}
|
| 129 |
+
.stat-label{color:var(--text-4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:.55rem}
|
| 130 |
+
.stat-value{color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.68rem}
|
| 131 |
+
.stat-value.hl{color:var(--accent-text)}
|
| 132 |
+
.error-banner{display:none;padding:10px 16px;background:var(--red-bg);border:1px solid rgba(212,64,64,.2);border-radius:var(--radius-sm);color:var(--red);font-size:.8rem;margin:8px 16px 0}
|
| 133 |
+
.error-banner.visible{display:block}
|
| 134 |
+
|
| 135 |
+
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
|
| 136 |
+
.msg-group{display:flex;flex-direction:column;gap:3px;max-width:85%;animation:msgIn .25s ease}
|
| 137 |
+
.msg-group.user{align-self:flex-end}
|
| 138 |
+
.msg-group.assistant{align-self:flex-start}
|
| 139 |
+
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
|
| 140 |
+
.msg-role{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px;font-weight:600}
|
| 141 |
+
.msg-group.assistant .msg-role{color:var(--accent-text)}
|
| 142 |
+
.msg-bubble{padding:12px 16px;border-radius:var(--radius);color:var(--text);font-size:.88rem;line-height:1.7;word-wrap:break-word;box-shadow:var(--shadow-sm)}
|
| 143 |
+
.msg-group.user .msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(79,109,245,.15)}
|
| 144 |
+
.msg-group.assistant .msg-bubble{background:var(--surface);border:1px solid var(--border-light);border-bottom-left-radius:4px}
|
| 145 |
+
.msg-group.assistant .msg-bubble.generating{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,109,245,.08)}
|
| 146 |
+
|
| 147 |
+
.msg-bubble.md{white-space:normal}
|
| 148 |
+
.msg-bubble.md p{margin:0 0 .5em}.msg-bubble.md p:last-child{margin:0}
|
| 149 |
+
.msg-bubble.md h1,.msg-bubble.md h2,.msg-bubble.md h3{margin:.7em 0 .35em;font-weight:600;line-height:1.3}
|
| 150 |
+
.msg-bubble.md h1{font-size:1.2em}.msg-bubble.md h2{font-size:1.1em}.msg-bubble.md h3{font-size:1em}
|
| 151 |
+
.msg-bubble.md h1:first-child,.msg-bubble.md h2:first-child,.msg-bubble.md h3:first-child{margin-top:0}
|
| 152 |
+
.msg-bubble.md code{font-family:var(--font-mono);font-size:.84em;padding:2px 6px;background:var(--bg-cool);border-radius:5px;color:var(--accent-text)}
|
| 153 |
+
.msg-bubble.md pre{margin:.5em 0;padding:12px;background:var(--bg-warm);border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow-x:auto;line-height:1.5}
|
| 154 |
+
.msg-bubble.md pre code{padding:0;background:none;color:var(--text);font-size:.78rem}
|
| 155 |
+
.msg-bubble.md ul,.msg-bubble.md ol{margin:.4em 0;padding-left:1.4em}
|
| 156 |
+
.msg-bubble.md li{margin:.15em 0}
|
| 157 |
+
.msg-bubble.md blockquote{margin:.5em 0;padding:8px 12px;border-left:3px solid var(--accent);color:var(--text-2);background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
|
| 158 |
+
.msg-bubble.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}
|
| 159 |
+
.msg-bubble.md th,.msg-bubble.md td{padding:6px 8px;border:1px solid var(--border);text-align:left}
|
| 160 |
+
.msg-bubble.md th{background:var(--bg-cool);font-weight:600;color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
|
| 161 |
+
.msg-bubble.md strong{font-weight:600}
|
| 162 |
+
.msg-bubble.md a{color:var(--accent)}
|
| 163 |
+
.msg-bubble.md hr{margin:.7em 0;border:none;border-top:1px solid var(--border-light)}
|
| 164 |
+
.msg-group.user .msg-bubble.md code{background:rgba(255,255,255,.2);color:#fff}
|
| 165 |
+
.msg-group.user .msg-bubble.md pre{background:rgba(0,0,0,.1);border-color:rgba(255,255,255,.15)}
|
| 166 |
+
.msg-group.user .msg-bubble.md pre code{color:#fff}
|
| 167 |
+
|
| 168 |
+
.think-block{margin-bottom:8px;border-left:2.5px solid var(--accent);padding:8px 12px;background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
|
| 169 |
+
.think-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);min-height:28px}
|
| 170 |
+
.think-toggle:hover{opacity:.75}
|
| 171 |
+
.think-arrow{font-size:.5rem;transition:transform .2s;display:inline-block}
|
| 172 |
+
.think-arrow.open{transform:rotate(90deg)}
|
| 173 |
+
.think-content{font-size:.8rem;color:var(--text-2);line-height:1.65;white-space:pre-wrap;word-wrap:break-word;margin-top:6px;overflow:hidden;max-height:50vh;transition:max-height .3s,margin .3s,opacity .2s}
|
| 174 |
+
.think-content.collapsed{max-height:0;margin-top:0;opacity:0}
|
| 175 |
+
.msg-stats{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px;letter-spacing:.03em}
|
| 176 |
+
.thinking-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px;animation:dot 1.2s ease-in-out infinite}
|
| 177 |
+
.thinking-dots span:nth-child(2){animation-delay:.2s}
|
| 178 |
+
.thinking-dots span:nth-child(3){animation-delay:.4s}
|
| 179 |
+
@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
|
| 180 |
+
|
| 181 |
+
.chat-input-area{padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg);flex-shrink:0}
|
| 182 |
+
.chat-input-row{display:flex;align-items:flex-end;gap:6px}
|
| 183 |
+
.input-wrap{flex:1;position:relative}
|
| 184 |
+
.input-wrap textarea{width:100%;min-height:44px;max-height:120px;padding:11px 14px;background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:.88rem;line-height:1.5;resize:none;outline:none;transition:border-color .2s,box-shadow .2s}
|
| 185 |
+
.input-wrap textarea::placeholder{color:var(--text-4)}
|
| 186 |
+
.input-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
|
| 187 |
+
.btn-send{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--accent);border:none;color:#fff;transition:all .15s}
|
| 188 |
+
.btn-send:disabled{opacity:.3;cursor:not-allowed}
|
| 189 |
+
.btn-send:not(:disabled):hover{background:var(--accent-hover);box-shadow:0 2px 8px rgba(79,109,245,.25)}
|
| 190 |
+
.btn-send:not(:disabled):active{transform:scale(.95)}
|
| 191 |
+
.btn-send .icon-stop{display:none}
|
| 192 |
+
.btn-send.stopping{background:var(--red)}
|
| 193 |
+
.btn-send.stopping .icon-send{display:none}
|
| 194 |
+
.btn-send.stopping .icon-stop{display:block}
|
| 195 |
+
.chat-footer-note{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px;letter-spacing:.03em;padding:0 8px}
|
| 196 |
+
|
| 197 |
+
.welcome-msg{text-align:center;padding:40px 20px;color:var(--text-3);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
| 198 |
+
.welcome-msg h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-2);margin-bottom:8px;font-weight:400;font-style:italic}
|
| 199 |
+
.welcome-msg p{font-size:.85rem;line-height:1.65}
|
| 200 |
+
|
| 201 |
+
.toast{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);padding:10px 20px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;transition:all .3s;z-index:1000;max-width:min(480px,90vw);box-shadow:var(--shadow-lg);pointer-events:none}
|
| 202 |
+
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
|
| 203 |
+
.toast.error{border-color:var(--red);color:var(--red)}
|
| 204 |
+
.toast.success{border-color:var(--green);color:var(--green)}
|
| 205 |
+
|
| 206 |
+
@media(max-width:640px){
|
| 207 |
+
.chip{font-size:.62rem;padding:4px 10px}
|
| 208 |
+
.landing-sub{font-size:.88rem;padding:0 8px}
|
| 209 |
+
.chat-header{padding:8px 12px;padding-top:calc(8px + var(--safe-top));gap:6px}
|
| 210 |
+
.chat-header-title{font-size:.84rem}
|
| 211 |
+
.chat-header-controls{gap:4px}
|
| 212 |
+
.toggle-pill{padding:4px 8px;min-height:28px}
|
| 213 |
+
.toggle-lbl{font-size:.58rem}
|
| 214 |
+
.btn-icon{width:28px;height:28px;font-size:.7rem}
|
| 215 |
+
.btn-reset{font-size:.58rem;padding:5px 10px;min-height:28px}
|
| 216 |
+
.settings-panel.open{gap:6px 12px;padding:8px 12px}
|
| 217 |
+
.settings-slider{width:56px}
|
| 218 |
+
.chat-messages{padding:12px}
|
| 219 |
+
.msg-group{max-width:90%}
|
| 220 |
+
.msg-bubble{padding:10px 14px;font-size:.85rem}
|
| 221 |
+
.chat-input-area{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom))}
|
| 222 |
+
.btn-send{width:42px;height:42px}
|
| 223 |
+
.input-wrap textarea{min-height:42px;padding:10px 12px;font-size:.86rem}
|
| 224 |
+
.stats-bar{gap:10px;padding:4px 12px}
|
| 225 |
+
.system-prompt-wrap.open{padding:6px 12px 8px}
|
| 226 |
+
}
|
| 227 |
+
@media(max-width:380px){
|
| 228 |
+
.toggle-lbl{display:none}
|
| 229 |
+
.landing-title{font-size:2rem}
|
| 230 |
+
.chat-header-title{font-size:.78rem;max-width:120px}
|
| 231 |
+
}
|
| 232 |
+
@media(max-height:500px) and (orientation:landscape){
|
| 233 |
+
.chat-header{padding:6px 12px;min-height:44px}
|
| 234 |
+
.chat-avatar{width:28px;height:28px;font-size:.8rem}
|
| 235 |
+
.chat-messages{padding:8px 12px;gap:10px}
|
| 236 |
+
}
|
| 237 |
+
</style>
|
| 238 |
+
</head>
|
| 239 |
+
<body>
|
| 240 |
+
|
| 241 |
+
<div id="landing" class="screen active">
|
| 242 |
+
<div class="landing-deco"></div>
|
| 243 |
+
<div class="landing-tag">WebLLM · Mobile Ready · WebGPU</div>
|
| 244 |
+
<h1 class="landing-title">Local <em>AI Chat</em></h1>
|
| 245 |
+
<p class="landing-sub">Run open-source LLMs entirely in your browser — desktop and mobile. No server, no API keys, powered by WebLLM.</p>
|
| 246 |
+
<div class="landing-chips">
|
| 247 |
+
<span class="chip">Qwen · Llama · Gemma</span>
|
| 248 |
+
<span class="chip">Mobile + Desktop</span>
|
| 249 |
+
<span class="chip">Streaming</span>
|
| 250 |
+
<span class="chip">Markdown</span>
|
| 251 |
+
</div>
|
| 252 |
+
<div class="model-search-wrap" id="modelSearchWrap">
|
| 253 |
+
<input class="model-search-input" id="modelSearchInput" type="text" value="SmolLM2-360M-Instruct-q4f16_1-MLC" placeholder="Select a model…" autocomplete="off" readonly/>
|
| 254 |
+
<span class="search-chevron">▾</span>
|
| 255 |
+
<div class="model-dropdown" id="modelDropdown"></div>
|
| 256 |
+
</div>
|
| 257 |
+
<button class="btn-load" id="btnLoad">Load Model</button>
|
| 258 |
+
<div class="landing-footer">Powered by <a href="https://webllm.mlc.ai/" target="_blank">WebLLM</a> + <a href="https://mlc.ai/" target="_blank">MLC-AI</a></div>
|
| 259 |
+
</div>
|
| 260 |
+
|
| 261 |
+
<div id="loading" class="screen">
|
| 262 |
+
<div class="loader-ring" id="loaderRing"></div>
|
| 263 |
+
<div><div class="loader-text" id="loaderText">Initializing engine…</div><div class="loader-sub" id="loaderSub">Model is cached after first download.</div></div>
|
| 264 |
+
<div class="download-bar" id="downloadBar" style="display:none"><div class="download-text" id="downloadText">Downloading…</div><div class="download-track"><div class="download-fill" id="downloadFill"></div></div></div>
|
| 265 |
+
</div>
|
| 266 |
+
|
| 267 |
+
<div id="chat" class="screen">
|
| 268 |
+
<div class="chat-header">
|
| 269 |
+
<div class="chat-header-left"><div class="chat-avatar">W</div><div class="chat-header-info"><div class="chat-header-title" id="chatTitle">WebLLM Chat</div><div class="chat-header-status">Ready</div></div></div>
|
| 270 |
+
<div class="chat-header-controls">
|
| 271 |
+
<label class="toggle-pill" title="Stream responses"><input type="checkbox" id="streamToggle" checked/><span class="toggle-dot"></span><span class="toggle-lbl">Stream</span></label>
|
| 272 |
+
<button class="btn-icon" id="btnSettings" title="Settings">⚙</button>
|
| 273 |
+
<button class="btn-icon" id="btnSysPrompt" title="System prompt">S</button>
|
| 274 |
+
<button class="btn-reset" id="btnReset">Reset</button>
|
| 275 |
+
</div>
|
| 276 |
+
</div>
|
| 277 |
+
<div class="settings-panel" id="settingsPanel">
|
| 278 |
+
<div class="settings-row"><span class="settings-label">Temp</span><input type="range" class="settings-slider" id="tempSlider" min="0" max="200" value="70"/><span class="settings-val" id="tempVal">0.70</span></div>
|
| 279 |
+
<div class="settings-row"><span class="settings-label">Top-P</span><input type="range" class="settings-slider" id="toppSlider" min="1" max="100" value="95"/><span class="settings-val" id="toppVal">0.95</span></div>
|
| 280 |
+
<div class="settings-row"><span class="settings-label">Tokens</span><select class="settings-select" id="maxTokSelect"><option value="256">256</option><option value="512" selected>512</option><option value="1024">1024</option><option value="2048">2048</option><option value="4096">4096</option></select></div>
|
| 281 |
+
<div class="settings-row"><span class="settings-label">Rep</span><input type="range" class="settings-slider" id="repPenSlider" min="100" max="200" value="110"/><span class="settings-val" id="repPenVal">1.10</span></div>
|
| 282 |
+
</div>
|
| 283 |
+
<div class="system-prompt-wrap" id="sysPromptWrap"><textarea class="system-prompt-input" id="sysPromptInput" placeholder="System prompt (optional)…"></textarea></div>
|
| 284 |
+
<div class="stats-bar" id="statsBar"></div>
|
| 285 |
+
<div class="error-banner" id="errorBanner"></div>
|
| 286 |
+
<div class="chat-messages" id="chatMessages"><div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Type a message below. The model runs entirely in your browser — desktop and mobile.</p></div></div>
|
| 287 |
+
<div class="chat-input-area">
|
| 288 |
+
<div class="chat-input-row">
|
| 289 |
+
<div class="input-wrap"><textarea id="msgInput" rows="1" placeholder="Type a message…"></textarea></div>
|
| 290 |
+
<button class="btn-send" id="btnSend" disabled title="Send">
|
| 291 |
+
<svg class="icon-send" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
| 292 |
+
<svg class="icon-stop" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
|
| 293 |
+
</button>
|
| 294 |
+
</div>
|
| 295 |
+
<div class="chat-footer-note">100% local — no data leaves your device. Works on mobile and desktop.</div>
|
| 296 |
+
</div>
|
| 297 |
+
</div>
|
| 298 |
+
|
| 299 |
+
<div class="toast" id="toast"></div>
|
| 300 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
|
| 301 |
+
|
| 302 |
+
<script type="module">
|
| 303 |
+
import * as webllm from "https://esm.run/@mlc-ai/web-llm";
|
| 304 |
+
|
| 305 |
+
/* ─── Model catalog ─── */
|
| 306 |
+
const MODELS = [
|
| 307 |
+
{ id: "SmolLM2-135M-Instruct-q0f32-MLC", label: "SmolLM2 135M", vram: "719MB", mobile: true },
|
| 308 |
+
{ id: "SmolLM2-360M-Instruct-q4f16_1-MLC", label: "SmolLM2 360M", vram: "489MB", mobile: true },
|
| 309 |
+
{ id: "Qwen2.5-0.5B-Instruct-q4f16_1-MLC", label: "Qwen2.5 0.5B", vram: "945MB", mobile: true },
|
| 310 |
+
{ id: "Qwen2.5-1.5B-Instruct-q4f16_1-MLC", label: "Qwen2.5 1.5B", vram: "1.5GB", mobile: true },
|
| 311 |
+
{ id: "gemma-2-2b-it-q4f16_1-MLC-1k", label: "Gemma-2 2B (1k ctx)", vram: "1.6GB", mobile: true },
|
| 312 |
+
{ id: "Llama-3.2-1B-Instruct-q4f16_1-MLC", label: "Llama 3.2 1B", vram: "1.1GB", mobile: true },
|
| 313 |
+
{ id: "Llama-3.2-3B-Instruct-q4f16_1-MLC", label: "Llama 3.2 3B", vram: "2.2GB", mobile: false },
|
| 314 |
+
{ id: "gemma-2-2b-it-q4f16_1-MLC", label: "Gemma-2 2B (4k ctx)", vram: "1.9GB", mobile: false },
|
| 315 |
+
{ id: "Qwen2.5-3B-Instruct-q4f16_1-MLC", label: "Qwen2.5 3B", vram: "2.3GB", mobile: false },
|
| 316 |
+
{ id: "Phi-3.5-mini-instruct-q4f16_1-MLC", label: "Phi-3.5 Mini 3.8B", vram: "3.0GB", mobile: false },
|
| 317 |
+
{ id: "Mistral-7B-Instruct-v0.3-q4f16_1-MLC", label: "Mistral 7B", vram: "5.0GB", mobile: false },
|
| 318 |
+
{ id: "Llama-3.1-8B-Instruct-q4f16_1-MLC", label: "Llama 3.1 8B", vram: "5.1GB", mobile: false },
|
| 319 |
+
];
|
| 320 |
+
|
| 321 |
+
/* ─── State ─── */
|
| 322 |
+
let engine = null;
|
| 323 |
+
let isGenerating = false;
|
| 324 |
+
let abortController = null;
|
| 325 |
+
let chatHistory = [];
|
| 326 |
+
let totalTokens = 0;
|
| 327 |
+
|
| 328 |
+
const $ = id => document.getElementById(id);
|
| 329 |
+
const getTemp = () => parseInt($("tempSlider").value) / 100;
|
| 330 |
+
const getTopP = () => parseInt($("toppSlider").value) / 100;
|
| 331 |
+
const getMaxTok = () => parseInt($("maxTokSelect").value);
|
| 332 |
+
const getRepPen = () => parseInt($("repPenSlider").value) / 100;
|
| 333 |
+
const getSysPrompt = () => $("sysPromptInput").value.trim();
|
| 334 |
+
|
| 335 |
+
document.fonts.ready.then(() => document.body.classList.add("ready"));
|
| 336 |
+
|
| 337 |
+
const $loaderTx = $("loaderText"), $loaderSub = $("loaderSub");
|
| 338 |
+
const $messages = $("chatMessages"), $input = $("msgInput"), $btnSend = $("btnSend");
|
| 339 |
+
const $btnLoad = $("btnLoad"), $btnReset = $("btnReset");
|
| 340 |
+
const $errBanner = $("errorBanner"), $streamToggle = $("streamToggle");
|
| 341 |
+
const $searchInput = $("modelSearchInput"), $searchWrap = $("modelSearchWrap"), $dropdown = $("modelDropdown");
|
| 342 |
+
const $downloadBar = $("downloadBar"), $downloadText = $("downloadText"), $downloadFill = $("downloadFill");
|
| 343 |
+
const $statsBar = $("statsBar"), $toast = $("toast");
|
| 344 |
+
|
| 345 |
+
/* ─── Toast ─── */
|
| 346 |
+
let toastTimer = null;
|
| 347 |
+
function showToast(m, t = "") { clearTimeout(toastTimer); $toast.textContent = m; $toast.className = "toast " + t + " show"; toastTimer = setTimeout(() => $toast.classList.remove("show"), 3000); }
|
| 348 |
+
|
| 349 |
+
/* ─── Stats ─── */
|
| 350 |
+
function updateStatsBar(tps = null, tokens = null) {
|
| 351 |
+
if (!totalTokens && !tps) { $statsBar.innerHTML = ""; return; }
|
| 352 |
+
let h = "";
|
| 353 |
+
if (tps !== null) h += `<div class="stat"><span class="stat-label">Speed</span><span class="stat-value hl">${tps} t/s</span></div>`;
|
| 354 |
+
if (tokens !== null) h += `<div class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${tokens}</span></div>`;
|
| 355 |
+
if (totalTokens > 0) h += `<div class="stat"><span class="stat-label">Session</span><span class="stat-value">${totalTokens}</span></div>`;
|
| 356 |
+
h += `<div class="stat"><span class="stat-label">Msgs</span><span class="stat-value">${chatHistory.length}</span></div>`;
|
| 357 |
+
$statsBar.innerHTML = h;
|
| 358 |
+
}
|
| 359 |
+
|
| 360 |
+
/* ─── Model dropdown ─── */
|
| 361 |
+
function renderDropdown(filter = "") {
|
| 362 |
+
const q = filter.toLowerCase();
|
| 363 |
+
const filtered = q ? MODELS.filter(m => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q)) : MODELS;
|
| 364 |
+
const mobileModels = filtered.filter(m => m.mobile);
|
| 365 |
+
const desktopModels = filtered.filter(m => !m.mobile);
|
| 366 |
+
let html = "";
|
| 367 |
+
if (mobileModels.length) {
|
| 368 |
+
html += '<div class="model-section-label">Mobile-friendly</div>';
|
| 369 |
+
html += mobileModels.map(m => modelItemHtml(m)).join("");
|
| 370 |
+
}
|
| 371 |
+
if (desktopModels.length) {
|
| 372 |
+
html += '<div class="model-section-label">Desktop (more VRAM)</div>';
|
| 373 |
+
html += desktopModels.map(m => modelItemHtml(m)).join("");
|
| 374 |
+
}
|
| 375 |
+
if (!filtered.length) html = '<div class="model-dropdown-loading">No models found</div>';
|
| 376 |
+
$dropdown.innerHTML = html;
|
| 377 |
+
$dropdown.querySelectorAll(".model-item").forEach(el => {
|
| 378 |
+
el.addEventListener("click", () => { $searchInput.value = el.dataset.id; closeDropdown(); });
|
| 379 |
+
});
|
| 380 |
+
}
|
| 381 |
+
|
| 382 |
+
function modelItemHtml(m) {
|
| 383 |
+
return `<div class="model-item" data-id="${m.id}">
|
| 384 |
+
<span class="model-item-name">${m.label}</span>
|
| 385 |
+
<span class="model-item-meta">
|
| 386 |
+
${m.mobile ? '<span class="mobile-badge">MOBILE</span>' : ''}
|
| 387 |
+
<span class="vram-badge">${m.vram}</span>
|
| 388 |
+
</span>
|
| 389 |
+
</div>`;
|
| 390 |
+
}
|
| 391 |
+
|
| 392 |
+
function openDropdown() { $searchWrap.classList.add("open"); renderDropdown(); }
|
| 393 |
+
function closeDropdown() { $searchWrap.classList.remove("open"); }
|
| 394 |
+
$searchInput.addEventListener("click", () => { $searchInput.removeAttribute("readonly"); openDropdown(); });
|
| 395 |
+
$searchInput.addEventListener("focus", () => { $searchInput.removeAttribute("readonly"); openDropdown(); });
|
| 396 |
+
$searchInput.addEventListener("input", () => renderDropdown($searchInput.value));
|
| 397 |
+
document.addEventListener("click", e => { if (!e.target.closest(".model-search-wrap")) closeDropdown(); });
|
| 398 |
+
$searchInput.addEventListener("keydown", e => {
|
| 399 |
+
if (e.key === "Escape") closeDropdown();
|
| 400 |
+
const items = $dropdown.querySelectorAll(".model-item");
|
| 401 |
+
if (!items.length) return;
|
| 402 |
+
const active = $dropdown.querySelector(".model-item.active");
|
| 403 |
+
let idx = Array.from(items).indexOf(active);
|
| 404 |
+
if (e.key === "ArrowDown") { e.preventDefault(); idx = Math.min(idx + 1, items.length - 1); items.forEach(i => i.classList.remove("active")); items[idx].classList.add("active"); items[idx].scrollIntoView({ block: "nearest" }); }
|
| 405 |
+
if (e.key === "ArrowUp") { e.preventDefault(); idx = Math.max(idx - 1, 0); items.forEach(i => i.classList.remove("active")); items[idx].classList.add("active"); items[idx].scrollIntoView({ block: "nearest" }); }
|
| 406 |
+
if (e.key === "Enter") { e.preventDefault(); if (active) { $searchInput.value = active.dataset.id; } closeDropdown(); }
|
| 407 |
+
});
|
| 408 |
+
|
| 409 |
+
/* ─── Settings ─── */
|
| 410 |
+
$("btnSettings").addEventListener("click", () => { $("settingsPanel").classList.toggle("open"); $("btnSettings").classList.toggle("active"); });
|
| 411 |
+
$("btnSysPrompt").addEventListener("click", () => { $("sysPromptWrap").classList.toggle("open"); $("btnSysPrompt").classList.toggle("active"); });
|
| 412 |
+
$("tempSlider").addEventListener("input", () => $("tempVal").textContent = getTemp().toFixed(2));
|
| 413 |
+
$("toppSlider").addEventListener("input", () => $("toppVal").textContent = getTopP().toFixed(2));
|
| 414 |
+
$("repPenSlider").addEventListener("input", () => $("repPenVal").textContent = getRepPen().toFixed(2));
|
| 415 |
+
|
| 416 |
+
function showScreen(id) { document.querySelectorAll(".screen").forEach(s => s.classList.toggle("active", s.id === id)); }
|
| 417 |
+
|
| 418 |
+
/* ─── Engine loading ─── */
|
| 419 |
+
$btnLoad.addEventListener("click", async () => {
|
| 420 |
+
const modelId = $searchInput.value.trim();
|
| 421 |
+
if (!modelId) { showToast("Select a model", "error"); return; }
|
| 422 |
+
showScreen("loading");
|
| 423 |
+
$downloadBar.style.display = "none";
|
| 424 |
+
try {
|
| 425 |
+
$loaderTx.textContent = "Initializing WebLLM…";
|
| 426 |
+
engine = await webllm.CreateMLCEngine(modelId, {
|
| 427 |
+
initProgressCallback: (progress) => {
|
| 428 |
+
$downloadBar.style.display = "";
|
| 429 |
+
const pct = Math.round(progress.progress * 100);
|
| 430 |
+
$downloadFill.style.width = pct + "%";
|
| 431 |
+
$downloadText.textContent = progress.text || `Loading: ${pct}%`;
|
| 432 |
+
$loaderTx.textContent = progress.text || "Loading model…";
|
| 433 |
+
}
|
| 434 |
+
});
|
| 435 |
+
$loaderTx.textContent = "Ready!";
|
| 436 |
+
const m = MODELS.find(m => m.id === modelId);
|
| 437 |
+
$("chatTitle").textContent = m ? m.label : modelId.split("-").slice(0, 3).join(" ");
|
| 438 |
+
setTimeout(() => showScreen("chat"), 300);
|
| 439 |
+
showToast("Model loaded!", "success");
|
| 440 |
+
} catch (err) {
|
| 441 |
+
console.error(err);
|
| 442 |
+
$loaderTx.textContent = "Failed to load";
|
| 443 |
+
$loaderSub.textContent = err.message;
|
| 444 |
+
$("loaderRing").style.borderTopColor = "var(--red)";
|
| 445 |
+
showToast("Load failed: " + err.message.slice(0, 60), "error");
|
| 446 |
+
}
|
| 447 |
+
});
|
| 448 |
+
|
| 449 |
+
/* ─── Input ─── */
|
| 450 |
+
$input.addEventListener("input", () => { $input.style.height = "auto"; $input.style.height = Math.min($input.scrollHeight, 120) + "px"; updateSendBtn(); });
|
| 451 |
+
$input.addEventListener("keydown", e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (!isGenerating) sendMessage(); } });
|
| 452 |
+
$btnSend.addEventListener("click", () => { if (isGenerating) abortGeneration(); else sendMessage(); });
|
| 453 |
+
function updateSendBtn() {
|
| 454 |
+
if (isGenerating) { $btnSend.disabled = false; $btnSend.classList.add("stopping"); }
|
| 455 |
+
else { $btnSend.classList.remove("stopping"); $btnSend.disabled = !$input.value.trim(); }
|
| 456 |
+
}
|
| 457 |
+
function abortGeneration() { if (abortController) { abortController.abort(); abortController = null; } }
|
| 458 |
+
|
| 459 |
+
/* ─── Reset ─── */
|
| 460 |
+
$btnReset.addEventListener("click", async () => {
|
| 461 |
+
chatHistory = [];
|
| 462 |
+
totalTokens = 0;
|
| 463 |
+
if (engine) try { await engine.resetChat(); } catch (e) { console.warn(e); }
|
| 464 |
+
$messages.innerHTML = '<div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Type a message below. The model runs entirely in your browser.</p></div>';
|
| 465 |
+
$errBanner.classList.remove("visible");
|
| 466 |
+
$input.value = ""; $input.style.height = "auto";
|
| 467 |
+
updateStatsBar(); updateSendBtn();
|
| 468 |
+
});
|
| 469 |
+
|
| 470 |
+
/* ─── Markdown ─── */
|
| 471 |
+
function renderMarkdown(t) {
|
| 472 |
+
if (typeof marked === "undefined") return escapeHtml(t);
|
| 473 |
+
try { marked.setOptions({ breaks: true, gfm: true }); return marked.parse(t); } catch { return escapeHtml(t); }
|
| 474 |
+
}
|
| 475 |
+
function escapeHtml(s) { return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); }
|
| 476 |
+
|
| 477 |
+
/* ─── Send message ─── */
|
| 478 |
+
async function sendMessage() {
|
| 479 |
+
if (isGenerating || !engine) return;
|
| 480 |
+
const text = $input.value.trim();
|
| 481 |
+
if (!text) return;
|
| 482 |
+
$errBanner.classList.remove("visible");
|
| 483 |
+
const welcome = $messages.querySelector(".welcome-msg");
|
| 484 |
+
if (welcome) welcome.remove();
|
| 485 |
+
|
| 486 |
+
appendMessage("user", text);
|
| 487 |
+
chatHistory.push({ role: "user", content: text });
|
| 488 |
+
|
| 489 |
+
$input.value = ""; $input.style.height = "auto";
|
| 490 |
+
isGenerating = true;
|
| 491 |
+
updateSendBtn();
|
| 492 |
+
|
| 493 |
+
const { groupEl, bubbleEl } = appendAssistantPlaceholder();
|
| 494 |
+
|
| 495 |
+
try {
|
| 496 |
+
const messages = [];
|
| 497 |
+
const sysPrompt = getSysPrompt();
|
| 498 |
+
if (sysPrompt) messages.push({ role: "system", content: sysPrompt });
|
| 499 |
+
messages.push(...chatHistory);
|
| 500 |
+
|
| 501 |
+
const useStream = $streamToggle.checked;
|
| 502 |
+
let fullText = "";
|
| 503 |
+
let tokenCount = 0;
|
| 504 |
+
const startTime = performance.now();
|
| 505 |
+
|
| 506 |
+
const textNode = document.createElement("div");
|
| 507 |
+
textNode.className = "msg-text";
|
| 508 |
+
bubbleEl.appendChild(textNode);
|
| 509 |
+
|
| 510 |
+
if (useStream) {
|
| 511 |
+
abortController = new AbortController();
|
| 512 |
+
const stream = await engine.chat.completions.create({
|
| 513 |
+
messages,
|
| 514 |
+
temperature: getTemp(),
|
| 515 |
+
top_p: getTopP(),
|
| 516 |
+
max_tokens: getMaxTok(),
|
| 517 |
+
frequency_penalty: getRepPen() - 1,
|
| 518 |
+
stream: true,
|
| 519 |
+
stream_options: { include_usage: true },
|
| 520 |
+
});
|
| 521 |
+
|
| 522 |
+
for await (const chunk of stream) {
|
| 523 |
+
if (abortController?.signal?.aborted) break;
|
| 524 |
+
const delta = chunk.choices?.[0]?.delta?.content;
|
| 525 |
+
if (delta) {
|
| 526 |
+
fullText += delta;
|
| 527 |
+
tokenCount++;
|
| 528 |
+
textNode.innerHTML = renderMarkdown(fullText);
|
| 529 |
+
$messages.scrollTop = $messages.scrollHeight;
|
| 530 |
+
}
|
| 531 |
+
if (chunk.usage) tokenCount = chunk.usage.completion_tokens || tokenCount;
|
| 532 |
+
}
|
| 533 |
+
} else {
|
| 534 |
+
const reply = await engine.chat.completions.create({
|
| 535 |
+
messages,
|
| 536 |
+
temperature: getTemp(),
|
| 537 |
+
top_p: getTopP(),
|
| 538 |
+
max_tokens: getMaxTok(),
|
| 539 |
+
frequency_penalty: getRepPen() - 1,
|
| 540 |
+
});
|
| 541 |
+
fullText = reply.choices[0]?.message?.content || "";
|
| 542 |
+
tokenCount = reply.usage?.completion_tokens || 0;
|
| 543 |
+
textNode.innerHTML = renderMarkdown(fullText);
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
chatHistory.push({ role: "assistant", content: fullText });
|
| 547 |
+
|
| 548 |
+
if (fullText.includes("`") || fullText.includes("#") || fullText.includes("|") || fullText.includes("*")) {
|
| 549 |
+
bubbleEl.classList.add("md");
|
| 550 |
+
}
|
| 551 |
+
|
| 552 |
+
const elapsed = (performance.now() - startTime) / 1000;
|
| 553 |
+
const tps = tokenCount > 0 ? (tokenCount / elapsed).toFixed(1) : "?";
|
| 554 |
+
const statsEl = document.createElement("div");
|
| 555 |
+
statsEl.className = "msg-stats";
|
| 556 |
+
statsEl.textContent = `${tokenCount} tokens · ${tps} tok/s · ${elapsed.toFixed(1)}s`;
|
| 557 |
+
groupEl.appendChild(statsEl);
|
| 558 |
+
|
| 559 |
+
totalTokens += tokenCount;
|
| 560 |
+
updateStatsBar(tps, tokenCount);
|
| 561 |
+
bubbleEl.classList.remove("generating");
|
| 562 |
+
|
| 563 |
+
} catch (err) {
|
| 564 |
+
if (err.name === "AbortError") {
|
| 565 |
+
bubbleEl.classList.remove("generating");
|
| 566 |
+
showToast("Generation stopped", "");
|
| 567 |
+
} else {
|
| 568 |
+
console.error(err);
|
| 569 |
+
groupEl.remove();
|
| 570 |
+
$errBanner.textContent = "Error: " + err.message;
|
| 571 |
+
$errBanner.classList.add("visible");
|
| 572 |
+
showToast("Generation failed", "error");
|
| 573 |
+
}
|
| 574 |
+
}
|
| 575 |
+
|
| 576 |
+
isGenerating = false;
|
| 577 |
+
abortController = null;
|
| 578 |
+
updateSendBtn();
|
| 579 |
+
$messages.scrollTop = $messages.scrollHeight;
|
| 580 |
+
}
|
| 581 |
+
|
| 582 |
+
/* ─── Render helpers ─── */
|
| 583 |
+
function appendMessage(role, text) {
|
| 584 |
+
const g = document.createElement("div"); g.className = `msg-group ${role}`;
|
| 585 |
+
const r = document.createElement("div"); r.className = "msg-role"; r.textContent = role === "user" ? "You" : "AI"; g.appendChild(r);
|
| 586 |
+
const b = document.createElement("div"); b.className = "msg-bubble"; b.textContent = text; g.appendChild(b);
|
| 587 |
+
$messages.appendChild(g); $messages.scrollTop = $messages.scrollHeight; return g;
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
+
function appendAssistantPlaceholder() {
|
| 591 |
+
const g = document.createElement("div"); g.className = "msg-group assistant";
|
| 592 |
+
const r = document.createElement("div"); r.className = "msg-role"; r.textContent = "AI"; g.appendChild(r);
|
| 593 |
+
const b = document.createElement("div"); b.className = "msg-bubble generating";
|
| 594 |
+
const d = document.createElement("span"); d.className = "thinking-dots";
|
| 595 |
+
for (let i = 0; i < 3; i++) d.appendChild(document.createElement("span"));
|
| 596 |
+
b.appendChild(d); g.appendChild(b); $messages.appendChild(g); $messages.scrollTop = $messages.scrollHeight;
|
| 597 |
+
return { groupEl: g, bubbleEl: b };
|
| 598 |
+
}
|
| 599 |
+
|
| 600 |
+
/* ─── Mobile keyboard resize ─── */
|
| 601 |
+
window.visualViewport?.addEventListener("resize", () => { $messages.scrollTop = $messages.scrollHeight; });
|
| 602 |
+
|
| 603 |
+
/* ─── WebGPU check ─── */
|
| 604 |
+
(async () => {
|
| 605 |
+
if (!navigator.gpu) {
|
| 606 |
+
showToast("WebGPU not available — try Chrome or Edge", "error");
|
| 607 |
+
$btnLoad.disabled = true;
|
| 608 |
+
return;
|
| 609 |
+
}
|
| 610 |
+
try {
|
| 611 |
+
const a = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
|
| 612 |
+
if (!a) { showToast("No WebGPU adapter found", "error"); $btnLoad.disabled = true; }
|
| 613 |
+
} catch (e) { showToast("WebGPU init failed", "error"); }
|
| 614 |
+
})();
|
| 615 |
+
</script>
|
| 616 |
+
</body>
|
| 617 |
+
</html>
|