| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| <title>winter-frost-2</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); |
| |
| :root{ |
| --bg:#04070a; |
| --panel:#0d1620; |
| --panel2:#0a121b; |
| --line:#1c2b3a; |
| --frost:#d9edf9; |
| --muted:#6c8296; |
| --accent:#39d6ff; |
| --accent-dim:#1a4a5c; |
| --crack:#eaf6ff; |
| } |
| *{box-sizing:border-box;margin:0;padding:0;} |
| html{scroll-behavior:smooth;} |
| body{ |
| background:var(--bg); |
| color:var(--frost); |
| font-family:'Space Grotesk',Arial,sans-serif; |
| min-height:100vh; |
| overflow-x:hidden; |
| } |
| |
| |
| #snow{ |
| position:fixed; |
| inset:0; |
| pointer-events:none; |
| overflow:hidden; |
| z-index:50; |
| } |
| .flake{ |
| position:absolute; |
| top:-5vh; |
| color:var(--frost); |
| animation:fall linear infinite; |
| will-change:transform; |
| } |
| @keyframes fall{ |
| 0%{transform:translateY(0) translateX(0) rotate(0deg);} |
| 100%{transform:translateY(115vh) translateX(var(--drift,20px)) rotate(300deg);} |
| } |
| @media (prefers-reduced-motion: reduce){ |
| .flake{animation:none;display:none;} |
| } |
| |
| |
| .hero{ |
| position:relative; |
| min-height:92vh; |
| display:flex; |
| align-items:center; |
| justify-content:center; |
| flex-direction:column; |
| text-align:center; |
| padding:40px 20px; |
| overflow:hidden; |
| border-bottom:1px solid var(--line); |
| background: |
| radial-gradient(ellipse 60% 50% at 50% 30%,rgba(57,214,255,.10),transparent 60%), |
| radial-gradient(ellipse 90% 60% at 50% 100%,rgba(57,214,255,.05),transparent 60%), |
| var(--bg); |
| } |
| .glow{ |
| position:absolute; |
| top:15%; |
| left:50%; |
| width:600px; |
| height:600px; |
| transform:translateX(-50%); |
| background:radial-gradient(circle,rgba(57,214,255,.14),transparent 65%); |
| filter:blur(10px); |
| animation:pulse 6s ease-in-out infinite; |
| pointer-events:none; |
| } |
| @keyframes pulse{ |
| 0%,100%{opacity:.55;} |
| 50%{opacity:1;} |
| } |
| .vignette{ |
| position:absolute; |
| inset:0; |
| background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 40%,rgba(4,7,10,.85) 100%); |
| pointer-events:none; |
| } |
| |
| .eyebrow{ |
| position:relative; |
| z-index:2; |
| display:inline-block; |
| font-family:'IBM Plex Mono',monospace; |
| font-size:11px; |
| letter-spacing:.2em; |
| text-transform:uppercase; |
| color:var(--accent); |
| border:1px solid var(--accent-dim); |
| padding:6px 12px; |
| border-radius:100px; |
| margin-bottom:32px; |
| opacity:0; |
| animation:riseIn .8s ease-out .2s forwards; |
| } |
| .title-wrap{ |
| position:relative; |
| z-index:2; |
| display:inline-block; |
| opacity:0; |
| animation:riseIn .9s ease-out .5s forwards; |
| } |
| .title{ |
| font-family:'Archivo Black',Arial,sans-serif; |
| font-size:clamp(40px,9vw,96px); |
| letter-spacing:-.01em; |
| line-height:1; |
| color:var(--frost); |
| text-transform:uppercase; |
| text-shadow:0 0 40px rgba(57,214,255,.25); |
| } |
| .title span{color:var(--accent);} |
| @keyframes riseIn{ |
| from{opacity:0;transform:translateY(14px);} |
| to{opacity:1;transform:translateY(0);} |
| } |
| |
| .crack-svg{ |
| position:absolute; |
| inset:-20% -8%; |
| pointer-events:none; |
| } |
| .crack-line{ |
| fill:none; |
| stroke:var(--crack); |
| stroke-width:1.4; |
| stroke-linecap:round; |
| stroke-dasharray:420; |
| stroke-dashoffset:420; |
| opacity:.9; |
| animation:draw 1.3s ease-out forwards, fade 2s ease-in 1.4s forwards; |
| } |
| .crack-line.d2{animation-delay:1s,2.1s;} |
| .crack-line.d3{animation-delay:1.1s,2.2s;} |
| .crack-line.d4{animation-delay:1.2s,2.3s;} |
| @keyframes draw{to{stroke-dashoffset:0;}} |
| @keyframes fade{to{opacity:0;}} |
| @media (prefers-reduced-motion: reduce){ |
| .crack-line,.eyebrow,.title-wrap{animation:none;opacity:1;} |
| } |
| |
| .tagline{ |
| position:relative; |
| z-index:2; |
| max-width:520px; |
| margin:28px auto 0; |
| color:var(--muted); |
| font-size:15px; |
| line-height:1.7; |
| opacity:0; |
| animation:riseIn .9s ease-out 1.6s forwards; |
| } |
| .tagline b{color:var(--frost);font-weight:500;} |
| |
| .scroll-cue{ |
| position:absolute; |
| bottom:28px; |
| left:50%; |
| transform:translateX(-50%); |
| font-family:'IBM Plex Mono',monospace; |
| font-size:10px; |
| letter-spacing:.2em; |
| color:var(--muted); |
| text-transform:uppercase; |
| opacity:0; |
| animation:riseIn 1s ease-out 2.1s forwards, drift 2.4s ease-in-out 3.1s infinite; |
| } |
| @keyframes drift{ |
| 0%,100%{transform:translateX(-50%) translateY(0);} |
| 50%{transform:translateX(-50%) translateY(6px);} |
| } |
| |
| |
| .section{ |
| position:relative; |
| max-width:860px; |
| margin:0 auto; |
| padding:60px 20px; |
| z-index:2; |
| } |
| .section h2{ |
| font-family:'Space Grotesk',sans-serif; |
| font-weight:700; |
| font-size:22px; |
| margin-bottom:6px; |
| } |
| .section .lede{ |
| color:var(--muted); |
| font-size:13.5px; |
| margin-bottom:26px; |
| max-width:560px; |
| } |
| |
| |
| .tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;} |
| .tab{ |
| font-family:'Space Grotesk',sans-serif; |
| padding:10px 18px; |
| border-radius:9px; |
| border:1px solid var(--line); |
| background:var(--panel); |
| color:var(--muted); |
| cursor:pointer; |
| font-size:13px; |
| transition:border-color .15s,color .15s; |
| } |
| .tab.active{border-color:var(--accent);color:var(--accent);} |
| .tab:hover{color:var(--frost);} |
| |
| .panel{ |
| display:none; |
| background:var(--panel); |
| border:1px solid var(--line); |
| border-radius:14px; |
| padding:24px; |
| } |
| .panel.active{display:block;} |
| .panel h3{font-size:15px;margin-bottom:8px;} |
| .panel p{color:var(--muted);font-size:13px;line-height:1.65;margin-bottom:14px;} |
| |
| .warn{ |
| background:rgba(57,214,255,.06); |
| border:1px solid var(--accent-dim); |
| color:#aee3f5; |
| font-size:12px; |
| padding:10px 12px; |
| border-radius:8px; |
| margin-bottom:14px; |
| line-height:1.55; |
| } |
| |
| pre{ |
| background:var(--panel2); |
| border:1px solid var(--line); |
| border-radius:10px; |
| padding:16px; |
| overflow-x:auto; |
| font-family:'IBM Plex Mono',monospace; |
| font-size:12px; |
| line-height:1.6; |
| color:#bfe4ff; |
| white-space:pre-wrap; |
| word-break:break-word; |
| } |
| .copy{ |
| margin-top:10px; |
| padding:8px 16px; |
| border-radius:8px; |
| border:1px solid var(--accent-dim); |
| background:transparent; |
| color:var(--accent); |
| cursor:pointer; |
| font-family:'Space Grotesk',sans-serif; |
| font-size:12px; |
| } |
| .copy:hover{background:rgba(57,214,255,.08);} |
| |
| ul{color:var(--muted);font-size:13px;line-height:1.75;margin-left:18px;margin-bottom:14px;} |
| a{color:var(--accent);text-decoration:none;} |
| a:hover{text-decoration:underline;} |
| |
| |
| .names{ |
| display:grid; |
| grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); |
| gap:10px; |
| } |
| .name-card{ |
| background:var(--panel); |
| border:1px solid var(--line); |
| border-radius:10px; |
| padding:14px; |
| transition:border-color .15s,transform .15s; |
| } |
| .name-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);} |
| .name-card .n{ |
| font-family:'IBM Plex Mono',monospace; |
| font-size:13px; |
| color:var(--accent); |
| margin-bottom:6px; |
| } |
| .name-card .d{ |
| font-size:11.5px; |
| color:var(--muted); |
| line-height:1.5; |
| } |
| |
| footer{ |
| position:relative; |
| z-index:2; |
| text-align:center; |
| color:var(--muted); |
| font-size:11px; |
| padding:30px 20px 50px; |
| font-family:'IBM Plex Mono',monospace; |
| letter-spacing:.04em; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div id="snow"></div> |
|
|
| <div class="hero"> |
| <div class="glow"></div> |
| <div class="eyebrow">brucoder · language model</div> |
| <div class="title-wrap"> |
| <div class="title">WINTER<span>-</span>FROST<span>-</span>2</div> |
| <svg class="crack-svg" viewBox="0 0 500 200" preserveAspectRatio="none"> |
| <path class="crack-line" d="M40,20 L120,60 L100,110 L180,90 L160,150" /> |
| <path class="crack-line d2" d="M480,15 L410,55 L440,95 L380,120 L400,175" /> |
| <path class="crack-line d3" d="M250,0 L230,50 L270,80 L240,140" /> |
| <path class="crack-line d4" d="M0,100 L60,95 L50,140 L20,180" /> |
| </svg> |
| </div> |
| <p class="tagline">Built by <b>INEZA AIME BRUNO (brucoder)</b>. Cold, direct, no filler.</p> |
| <div class="scroll-cue">scroll ↓</div> |
| <div class="vignette"></div> |
| </div> |
|
|
| <div class="section"> |
| <h2>Run it</h2> |
| <p class="lede">Three ways in, from easiest to most involved.</p> |
|
|
| <div class="tabs"> |
| <button class="tab active" data-tab="colab" onclick="showTab('colab')">Colab · one cell</button> |
| <button class="tab" data-tab="local" onclick="showTab('local')">Local · one command</button> |
| <button class="tab" data-tab="browser" onclick="showTab('browser')">In-browser</button> |
| </div> |
|
|
| <div class="panel active" id="panel-colab"> |
| <h3>Google Colab</h3> |
| <p>Free GPU, zero local setup. Paste into one cell — installs everything, loads the model in 4-bit, opens an interactive chat loop.</p> |
| <pre id="code-colab">!pip install -q -U transformers accelerate bitsandbytes |
|
|
| from transformers import AutoModelForCausalLM, AutoTokenizer, BitsAndBytesConfig |
| import torch |
|
|
| bnb_config = BitsAndBytesConfig(load_in_4bit=True, bnb_4bit_quant_type="nf4", |
| bnb_4bit_compute_dtype=torch.float16, bnb_4bit_use_double_quant=True) |
|
|
| tokenizer = AutoTokenizer.from_pretrained("brucoder/winter-frost-2") |
| model = AutoModelForCausalLM.from_pretrained("brucoder/winter-frost-2", |
| quantization_config=bnb_config, device_map="auto") |
|
|
| conversation = [{"role": "system", "content": "You are a helpful assistant."}] |
| print("Model loaded. Chat with winter-frost-2 (type 'quit' to stop).\n") |
|
|
| while True: |
| user_input = input("You: ") |
| if user_input.strip().lower() in ("quit", "exit"): |
| break |
| conversation.append({"role": "user", "content": user_input}) |
| inputs = tokenizer.apply_chat_template(conversation, tokenize=True, add_generation_prompt=True, |
| return_tensors="pt", return_dict=True).to(model.device) |
| output = model.generate(**inputs, max_new_tokens=300, do_sample=True, temperature=0.7, |
| top_p=0.9, pad_token_id=tokenizer.eos_token_id) |
| response = tokenizer.decode(output[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True) |
| print(f"winter-frost-2: {response}\n") |
| conversation.append({"role": "assistant", "content": response})</pre> |
| <button class="copy" onclick="copyCode('code-colab', this)">Copy</button> |
| </div> |
|
|
| <div class="panel" id="panel-local"> |
| <h3>Local machine</h3> |
| <p>Needs Python 3.9+. A GPU with 16GB+ VRAM keeps this fast — it'll run on CPU too, just slowly.</p> |
| <div class="warn">First run downloads ~15GB of weights from Hugging Face. Cached after that.</div> |
| <pre id="code-local">pip install -q -U transformers accelerate torch && python3 -c " |
| from transformers import AutoModelForCausalLM, AutoTokenizer |
| import torch |
|
|
| tokenizer = AutoTokenizer.from_pretrained('brucoder/winter-frost-2') |
| model = AutoModelForCausalLM.from_pretrained('brucoder/winter-frost-2', torch_dtype=torch.float16, device_map='auto') |
|
|
| conversation = [{'role': 'system', 'content': 'You are a helpful assistant.'}] |
| print('Model loaded. Chat with winter-frost-2 (type quit to stop).') |
|
|
| while True: |
| user_input = input('You: ') |
| if user_input.strip().lower() in ('quit', 'exit'): |
| break |
| conversation.append({'role': 'user', 'content': user_input}) |
| inputs = tokenizer.apply_chat_template(conversation, tokenize=True, add_generation_prompt=True, return_tensors='pt', return_dict=True).to(model.device) |
| output = model.generate(**inputs, max_new_tokens=300, do_sample=True, temperature=0.7, top_p=0.9, pad_token_id=tokenizer.eos_token_id) |
| response = tokenizer.decode(output[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True) |
| print('winter-frost-2:', response) |
| conversation.append({'role': 'assistant', 'content': response}) |
| "</pre> |
| <button class="copy" onclick="copyCode('code-local', this)">Copy</button> |
| </div> |
|
|
| <div class="panel" id="panel-browser"> |
| <h3>In-browser (WebGPU)</h3> |
| <div class="warn">Not yet a one-click option for this model. In-browser inference (e.g. via WebLLM) needs the model converted into a compiled format first — pointing it at any Hugging Face repo doesn't work out of the box. Qwen2.5's architecture is supported; this specific checkpoint hasn't been converted yet.</div> |
| <p>What it would offer once converted:</p> |
| <ul> |
| <li>Genuinely free forever — runs on the visitor's own device, no server cost to anyone</li> |
| <li>Needs a WebGPU-capable browser (Chrome/Edge desktop mainly)</li> |
| <li>First visit downloads ~4-5GB (4-bit), cached after that</li> |
| <li>Underpowered laptops/phones may struggle</li> |
| </ul> |
| <p>Conversion happens via <a href="https://webllm.mlc.ai/" target="_blank" rel="noopener">MLC-AI's WebLLM</a> tooling — a separate project on its own.</p> |
| </div> |
| </div> |
|
|
| <footer>brucoder / winter-frost-2</footer> |
|
|
| <script> |
| function showTab(name){ |
| document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name)); |
| document.querySelectorAll('.panel').forEach(p => p.classList.toggle('active', p.id === 'panel-' + name)); |
| } |
| function copyCode(id, btn){ |
| const text = document.getElementById(id).innerText; |
| navigator.clipboard.writeText(text).then(() => { |
| const original = btn.textContent; |
| btn.textContent = 'Copied!'; |
| setTimeout(() => btn.textContent = original, 1500); |
| }); |
| } |
| |
| |
| (function createSnow(){ |
| const snow = document.getElementById('snow'); |
| const count = window.innerWidth < 600 ? 45 : 80; |
| for(let i=0;i<count;i++){ |
| const flake = document.createElement('div'); |
| flake.className = 'flake'; |
| flake.textContent = Math.random() > 0.5 ? '❄' : '•'; |
| const size = 3 + Math.random()*9; |
| flake.style.left = Math.random()*100 + '%'; |
| flake.style.fontSize = size + 'px'; |
| flake.style.opacity = 0.25 + Math.random()*0.55; |
| flake.style.setProperty('--drift', (Math.random()*80-40) + 'px'); |
| flake.style.animationDuration = (9 + Math.random()*14) + 's'; |
| flake.style.animationDelay = (-(Math.random()*20)) + 's'; |
| snow.appendChild(flake); |
| } |
| })(); |
| </script> |
| </body> |
| </html> |
