| import './launch.css'; |
| import {CONTEXTS,kvBytes,formatBytes,gpuMemoryBytes} from './core.js'; |
| const $=q=>document.querySelector(q); |
| const icon=name=>`<i data-lucide="${name}"></i>`; |
| const choices=[['f32','EXACT'],['f16','HALF'],['q8_0','8-BIT'],['q4_0','4-BIT']]; |
| export function mountLaunch(){ |
| const root=document.createElement('section');root.id='launch-screen'; |
| root.innerHTML=`<div class="ml-art" id="ml-art"></div><div class="ml-shade"></div><div class="ml-grain"></div> |
| <header class="ml-topbar"><a class="ml-brand" href="https://huggingface.co/openbmb/MiniCPM5-2B" target="_blank" rel="noreferrer"><span class="ml-mark">${icon('rocket')}</span><span>MINICPM5 <em>2B</em></span></a><span class="ml-private"><i></i>100% LOCAL</span></header> |
| <div class="ml-stage"><div class="ml-copy" id="ml-copy"> |
| <p class="ml-eyebrow"><span>2.52B</span>DENSE AGENTIC MODEL</p><h1>Intelligence,<br><em>launched locally.</em></h1> |
| <p class="ml-lede">MiniCPM5 runs entirely on your GPU. Think, build websites, and create documents, spreadsheets and PDFs — privately.</p> |
| <div class="ml-context"><label for="launch-context"><span>CONTEXT WINDOW</span><strong id="launch-context-value"></strong></label><input id="launch-context" type="range" min="0" max="${CONTEXTS.length-1}" step="1" aria-describedby="launch-memory-note"><p id="launch-memory-note" class="ml-context-note"></p> |
| <div class="ml-kv-row"><span>KV CACHE PRECISION</span><div class="ml-kv-modes" role="group" aria-label="KV cache precision">${choices.map(([value,label])=>`<button type="button" data-launch-setting="cacheK" data-value="${value}" aria-pressed="false" title="${{f32:'FP32',f16:'FP16',q8_0:'Q8_0',q4_0:'Q4_0'}[value]} key and value cache">${label}</button>`).join('')}</div></div> |
| </div><div class="ml-dspark"><label for="launch-dspark">DSpark acceleration</label><select id="launch-dspark"><option value="auto">Auto · adapt to each response</option><option value="on">On · always draft ahead</option><option value="off">Off · base model only</option></select><p id="launch-dspark-note"></p></div><div id="ml-storage"></div><div class="ml-actions" id="ml-actions"><button id="launch-device" type="button" class="ml-text-button">CHECK MY DEVICE</button></div><button id="launch-advanced" type="button" class="ml-text-button ml-advanced">MORE SETTINGS ${icon('arrow-up-right')}</button><div id="ml-error"></div> |
| <dl class="ml-specs"><div><dt>2.52B</dt><dd>PARAMETERS</dd></div><div><dt>128K</dt><dd>MAX CONTEXT</dd></div><div><dt>8-bit</dt><dd>OFFICIAL WEIGHTS</dd></div></dl><p class="ml-byline">OPENBMB MODEL · PROCREATIONS PLAYGROUND</p></div> |
| <div class="ml-loader" id="ml-loader" hidden><p class="ml-eyebrow">PREPARING YOUR LOCAL ENGINE</p><div id="ml-progress"></div><p class="ml-loader-note">The rocket builds thrust as your model arrives. Your prompts never leave this browser.</p><button id="cancel-load" class="ml-text-button" type="button">CANCEL LOADING</button><details class="ml-runtime-details"><summary>Runtime progress</summary><pre id="load-diagnostics">Waiting for runtime startup…</pre></details></div> |
| </div><div class="ml-caption" aria-hidden="true"><span>OPENBMB · 2026</span><i></i><span>WEBGPU EDITION</span></div>`; |
| $('#app').prepend(root); |
| $('#ml-art').append($('#launch-scene')); |
| $('#ml-actions').prepend($('.launch-control')); |
| $('#ml-storage').append($('#save-model').parentElement); |
| $('#ml-progress').append($('#loading-panel')); |
| $('#ml-error').append($('#load-error')); |
| } |
| export function refreshLaunch(settings,locked=false){ |
| $('#launch-context').value=String(CONTEXTS.indexOf(settings.context));$('#launch-context').disabled=locked; |
| $('#launch-context-value').textContent=settings.context.toLocaleString()+' tokens'; |
| const bytes=kvBytes(settings.context,settings.cacheK,settings.cacheV); |
| $('#launch-memory-note').textContent=`${formatBytes(bytes)} of KV cache · ${formatBytes(gpuMemoryBytes(settings))} estimated GPU memory.`; |
| $('#launch-dspark').value=settings.dspark;$('#launch-dspark').disabled=locked;$('#launch-dspark-note').textContent=settings.dspark==='off'?'Dedicated WebGPU decoding · 2.68 GB download.':'3.33 GB download, including a 648 MB draft. Every token verified by MiniCPM5.'; |
| for(const b of document.querySelectorAll('[data-launch-setting]')){b.setAttribute('aria-pressed',String(settings[b.dataset.launchSetting]===b.dataset.value));b.disabled=locked;} |
| } |
| export function setLaunchPhase(phase){const loading=phase!=='idle';$('#ml-copy').hidden=loading;$('#ml-loader').hidden=!loading;document.body.classList.toggle('launch-loading',loading);} |
| export function wireLaunch({getSettings,updateSettings,engine,openSettings,showDevice}){ |
| $('#launch-context').oninput=event=>{if(!engine.loading)updateSettings({context:CONTEXTS[Number(event.target.value)]});}; |
| for(const b of document.querySelectorAll('[data-launch-setting]'))b.onclick=()=>{if(!engine.loading)updateSettings({cacheK:b.dataset.value,cacheV:b.dataset.value});}; |
| $('#launch-dspark').onchange=event=>{if(!engine.loading)updateSettings({dspark:event.target.value});}; |
| $('#launch-advanced').onclick=openSettings;$('#launch-device').onclick=showDevice; |
| $('#cancel-load').onclick=()=>{engine.loadController?.abort();$('#cancel-load').disabled=true;$('#cancel-load').textContent='CANCELING…';}; |
| refreshLaunch(getSettings()); |
| } |
|
|
