| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="theme-color" content="#000000"> |
| <meta name="description" content="Micro Distillery: GRPO + VAE Enhanced Training System"> |
| <title>[mD] MICRO DISTILLERY | webXOS 2025</title> |
| |
| |
| <link rel="manifest" href="manifest.json"> |
| |
| |
| <link rel="apple-touch-icon" href="icon-192.png"> |
| |
| <style> |
| :root { |
| --bg: #000000; |
| --text: #00ff00; |
| --border: #008000; |
| --accent: #00ffff; |
| --error: #ff0000; |
| --success: #00ff00; |
| --warning: #ffff00; |
| --distill: #00ff9d; |
| --quantize: #ff00ff; |
| --teacher: #ff6b00; |
| --upload: #00ccff; |
| --export: #9d00ff; |
| --panel-bg: rgba(0, 20, 0, 0.1); |
| --grpo: #ff00ff; |
| --vae: #00ddff; |
| --cache: #ff9900; |
| --mask: #aa00ff; |
| --sandbox: #00aa88; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Courier New', monospace; |
| } |
| |
| body { |
| background: var(--bg); |
| color: var(--text); |
| padding: 10px; |
| font-size: 12px; |
| line-height: 1.3; |
| max-width: 1600px; |
| margin: 0 auto; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| .header { |
| padding: 10px 0; |
| margin-bottom: 15px; |
| text-align: center; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .title { |
| font-size: 18px; |
| color: var(--text); |
| margin-bottom: 5px; |
| } |
| |
| .subtitle { |
| font-size: 12px; |
| color: var(--accent); |
| margin-bottom: 10px; |
| } |
| |
| .header-controls { |
| display: flex; |
| justify-content: center; |
| gap: 10px; |
| margin-top: 10px; |
| } |
| |
| .main-grid { |
| display: grid; |
| grid-template-columns: 350px 350px 1fr; |
| gap: 15px; |
| margin-bottom: 15px; |
| } |
| |
| @media (max-width: 1200px) { |
| .main-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| .panel { |
| border: 1px solid var(--border); |
| padding: 15px; |
| background: var(--panel-bg); |
| border-radius: 3px; |
| min-height: 500px; |
| } |
| |
| .panel-title { |
| color: var(--accent); |
| margin-bottom: 10px; |
| padding-bottom: 5px; |
| border-bottom: 1px solid var(--border); |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .section { |
| padding: 10px; |
| border-radius: 3px; |
| margin: 10px 0; |
| } |
| |
| .grpo-section { |
| border: 1px solid var(--grpo); |
| background: rgba(255, 0, 255, 0.05); |
| } |
| |
| .vae-section { |
| border: 1px solid var(--vae); |
| background: rgba(0, 221, 255, 0.05); |
| } |
| |
| .cache-section { |
| border: 1px solid var(--cache); |
| background: rgba(255, 153, 0, 0.05); |
| } |
| |
| .mask-section { |
| border: 1px solid var(--mask); |
| background: rgba(170, 0, 255, 0.05); |
| } |
| |
| .sandbox-section { |
| border: 1px solid var(--sandbox); |
| background: rgba(0, 170, 136, 0.05); |
| } |
| |
| .slider-container { |
| margin: 8px 0; |
| } |
| |
| .slider-container label { |
| display: block; |
| font-size: 11px; |
| color: var(--accent); |
| margin-bottom: 3px; |
| } |
| |
| .slider-value { |
| float: right; |
| font-size: 10px; |
| color: #008000; |
| } |
| |
| input[type="range"] { |
| width: 100%; |
| height: 4px; |
| background: #111; |
| border-radius: 2px; |
| outline: none; |
| -webkit-appearance: none; |
| } |
| |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 12px; |
| height: 12px; |
| background: var(--grpo); |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| .action-btn { |
| background: #001100; |
| border: 1px solid var(--border); |
| color: var(--text); |
| padding: 10px; |
| font-size: 12px; |
| cursor: pointer; |
| border-radius: 3px; |
| font-family: 'Courier New', monospace; |
| transition: all 0.2s; |
| width: 100%; |
| margin: 5px 0; |
| } |
| |
| .action-btn:hover { |
| background: #002200; |
| border-color: var(--accent); |
| box-shadow: 0 0 5px var(--accent); |
| } |
| |
| .btn-grpo { |
| border-color: var(--grpo); |
| color: var(--grpo); |
| } |
| |
| .btn-vae { |
| border-color: var(--vae); |
| color: var(--vae); |
| } |
| |
| .btn-sandbox { |
| border-color: var(--sandbox); |
| color: var(--sandbox); |
| } |
| |
| .btn-export { |
| border-color: var(--export); |
| color: var(--export); |
| padding: 8px 15px; |
| width: auto; |
| } |
| |
| #terminal { |
| height: 300px; |
| overflow-y: auto; |
| background: #000; |
| border: 1px solid var(--border); |
| padding: 10px; |
| font-size: 11px; |
| font-family: 'Courier New', monospace; |
| line-height: 1.3; |
| margin-bottom: 15px; |
| } |
| |
| .log-entry { |
| margin-bottom: 2px; |
| padding: 1px 0; |
| border-bottom: 1px solid rgba(0, 255, 0, 0.05); |
| } |
| |
| .log-grpo { color: var(--grpo); } |
| .log-vae { color: var(--vae); } |
| .log-cache { color: var(--cache); } |
| .log-mask { color: var(--mask); } |
| .log-sandbox { color: var(--sandbox); } |
| .log-error { color: var(--error); } |
| .log-success { color: var(--success); } |
| .log-export { color: var(--export); } |
| |
| .metrics-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 5px; |
| margin: 10px 0; |
| } |
| |
| .metric-card { |
| background: rgba(0, 30, 0, 0.2); |
| border: 1px solid var(--border); |
| padding: 5px; |
| border-radius: 2px; |
| text-align: center; |
| font-size: 10px; |
| } |
| |
| .metric-value { |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .metric-grpo { color: var(--grpo); } |
| .metric-vae { color: var(--vae); } |
| .metric-cache { color: var(--cache); } |
| .metric-mask { color: var(--mask); } |
| |
| .sandbox-container { |
| margin-top: 15px; |
| border: 1px solid var(--border); |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| |
| .sandbox-header { |
| background: rgba(0, 30, 0, 0.3); |
| padding: 8px; |
| border-bottom: 1px solid var(--border); |
| color: var(--sandbox); |
| font-weight: bold; |
| } |
| |
| .sandbox-content { |
| padding: 10px; |
| background: rgba(0, 0, 0, 0.5); |
| height: 150px; |
| overflow-y: auto; |
| font-family: monospace; |
| font-size: 11px; |
| white-space: pre-wrap; |
| } |
| |
| .sandbox-input { |
| display: flex; |
| border-top: 1px solid var(--border); |
| background: rgba(0, 30, 0, 0.2); |
| } |
| |
| .sandbox-input input { |
| flex: 1; |
| background: transparent; |
| color: var(--text); |
| border: none; |
| padding: 8px; |
| font-family: monospace; |
| font-size: 11px; |
| } |
| |
| .sandbox-input button { |
| background: rgba(0, 170, 136, 0.2); |
| border: none; |
| border-left: 1px solid var(--border); |
| color: var(--sandbox); |
| padding: 8px 15px; |
| cursor: pointer; |
| font-size: 11px; |
| } |
| |
| .token-display { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 3px; |
| margin: 10px 0; |
| padding: 10px; |
| background: rgba(0, 0, 0, 0.3); |
| border-radius: 3px; |
| max-height: 100px; |
| overflow-y: auto; |
| } |
| |
| .token { |
| padding: 2px 5px; |
| background: rgba(0, 255, 0, 0.1); |
| border: 1px solid rgba(0, 255, 0, 0.3); |
| border-radius: 2px; |
| font-size: 9px; |
| font-family: monospace; |
| } |
| |
| .token.cached { |
| background: rgba(255, 153, 0, 0.2); |
| border-color: var(--cache); |
| } |
| |
| .token.masked { |
| background: rgba(170, 0, 255, 0.2); |
| border-color: var(--mask); |
| opacity: 0.6; |
| } |
| |
| .progress-container { |
| margin: 10px 0; |
| } |
| |
| .progress-bar { |
| height: 8px; |
| background: #111; |
| border: 1px solid var(--border); |
| overflow: hidden; |
| border-radius: 2px; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #008000, #00ff00); |
| width: 0%; |
| transition: width 0.3s; |
| } |
| |
| .progress-text { |
| text-align: center; |
| margin-top: 3px; |
| font-size: 10px; |
| color: #008000; |
| } |
| |
| .hidden { |
| display: none !important; |
| } |
| |
| .latent-space { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 5px; |
| margin: 10px 0; |
| } |
| |
| .latent-dim { |
| padding: 5px; |
| background: rgba(0, 221, 255, 0.1); |
| border: 1px solid var(--vae); |
| border-radius: 2px; |
| text-align: center; |
| font-size: 9px; |
| } |
| |
| .latent-value { |
| font-size: 10px; |
| font-weight: bold; |
| color: var(--vae); |
| display: block; |
| margin-top: 2px; |
| } |
| |
| .status-indicator { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| margin-right: 5px; |
| } |
| |
| .status-active { background: var(--success); } |
| .status-inactive { background: #333; } |
| .status-error { background: var(--error); } |
| |
| select { |
| width: 100%; |
| background: #001100; |
| color: #00ff00; |
| border: 1px solid var(--border); |
| padding: 6px; |
| border-radius: 2px; |
| font-size: 11px; |
| font-family: 'Courier New', monospace; |
| margin: 5px 0; |
| } |
| |
| |
| .export-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.85); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 1000; |
| } |
| |
| .export-modal.hidden { |
| display: none; |
| } |
| |
| .export-window { |
| background: var(--bg); |
| border: 2px solid var(--export); |
| border-radius: 5px; |
| width: 800px; |
| max-width: 90%; |
| height: 600px; |
| display: flex; |
| flex-direction: column; |
| box-shadow: 0 0 30px rgba(157, 0, 255, 0.3); |
| } |
| |
| .export-header { |
| background: rgba(157, 0, 255, 0.1); |
| padding: 15px; |
| border-bottom: 1px solid var(--export); |
| color: var(--export); |
| font-size: 14px; |
| font-weight: bold; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .close-export { |
| background: none; |
| border: 1px solid var(--export); |
| color: var(--export); |
| padding: 5px 10px; |
| cursor: pointer; |
| border-radius: 3px; |
| font-family: 'Courier New', monospace; |
| font-size: 12px; |
| } |
| |
| .close-export:hover { |
| background: rgba(157, 0, 255, 0.2); |
| } |
| |
| .export-body { |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| } |
| |
| .export-sidebar { |
| width: 200px; |
| background: rgba(0, 20, 0, 0.2); |
| border-right: 1px solid var(--border); |
| padding: 15px; |
| overflow-y: auto; |
| } |
| |
| .export-main { |
| flex: 1; |
| padding: 15px; |
| overflow-y: auto; |
| } |
| |
| .export-format { |
| margin-bottom: 20px; |
| } |
| |
| .format-option { |
| padding: 8px; |
| border: 1px solid var(--border); |
| margin: 5px 0; |
| border-radius: 3px; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-size: 11px; |
| } |
| |
| .format-option:hover { |
| border-color: var(--export); |
| background: rgba(157, 0, 255, 0.1); |
| } |
| |
| .format-option.selected { |
| border-color: var(--export); |
| background: rgba(157, 0, 255, 0.2); |
| } |
| |
| .file-browser { |
| margin-top: 20px; |
| } |
| |
| .file-item { |
| padding: 5px 10px; |
| border-bottom: 1px solid rgba(0, 255, 0, 0.1); |
| cursor: pointer; |
| font-size: 11px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .file-item:hover { |
| background: rgba(0, 255, 0, 0.05); |
| } |
| |
| .file-item.selected { |
| background: rgba(157, 0, 255, 0.1); |
| } |
| |
| .file-icon { |
| color: var(--export); |
| font-size: 12px; |
| } |
| |
| .file-content { |
| background: rgba(0, 0, 0, 0.5); |
| border: 1px solid var(--border); |
| border-radius: 3px; |
| padding: 15px; |
| margin-top: 15px; |
| max-height: 300px; |
| overflow-y: auto; |
| font-family: monospace; |
| font-size: 10px; |
| white-space: pre-wrap; |
| } |
| |
| .export-footer { |
| padding: 15px; |
| border-top: 1px solid var(--border); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: rgba(0, 20, 0, 0.2); |
| } |
| |
| .export-btn { |
| background: rgba(157, 0, 255, 0.2); |
| border: 1px solid var(--export); |
| color: var(--export); |
| padding: 10px 20px; |
| cursor: pointer; |
| border-radius: 3px; |
| font-family: 'Courier New', monospace; |
| font-size: 12px; |
| transition: all 0.2s; |
| } |
| |
| .export-btn:hover { |
| background: rgba(157, 0, 255, 0.3); |
| box-shadow: 0 0 10px rgba(157, 0, 255, 0.5); |
| } |
| |
| .export-info { |
| font-size: 11px; |
| color: var(--accent); |
| } |
| |
| .file-size { |
| color: var(--cache); |
| font-size: 10px; |
| margin-left: auto; |
| } |
| |
| .export-progress { |
| margin-top: 15px; |
| padding: 10px; |
| background: rgba(0, 20, 0, 0.3); |
| border-radius: 3px; |
| border: 1px solid var(--border); |
| } |
| |
| .export-progress.hidden { |
| display: none; |
| } |
| |
| .progress-step { |
| margin: 5px 0; |
| font-size: 11px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .step-indicator { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: #333; |
| border: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 10px; |
| } |
| |
| .step-indicator.active { |
| background: var(--export); |
| border-color: var(--export); |
| } |
| |
| .step-indicator.completed { |
| background: var(--success); |
| border-color: var(--success); |
| } |
| |
| .binary-warning { |
| color: var(--warning); |
| font-size: 10px; |
| margin-top: 5px; |
| padding: 5px; |
| background: rgba(255, 255, 0, 0.1); |
| border-radius: 2px; |
| } |
| |
| |
| .install-prompt { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| background: rgba(0, 20, 0, 0.95); |
| border: 1px solid var(--border); |
| border-radius: 5px; |
| padding: 15px; |
| z-index: 1001; |
| max-width: 300px; |
| box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); |
| } |
| |
| .install-prompt.hidden { |
| display: none; |
| } |
| |
| .install-buttons { |
| display: flex; |
| gap: 10px; |
| margin-top: 10px; |
| } |
| |
| .install-btn { |
| flex: 1; |
| padding: 8px; |
| border: 1px solid var(--success); |
| background: rgba(0, 255, 0, 0.1); |
| color: var(--success); |
| cursor: pointer; |
| border-radius: 3px; |
| font-size: 11px; |
| } |
| |
| .install-btn:hover { |
| background: rgba(0, 255, 0, 0.2); |
| } |
| |
| .install-btn.dismiss { |
| border-color: var(--error); |
| color: var(--error); |
| background: rgba(255, 0, 0, 0.1); |
| } |
| |
| |
| .offline-indicator { |
| position: fixed; |
| top: 10px; |
| right: 10px; |
| background: rgba(255, 0, 0, 0.2); |
| border: 1px solid var(--error); |
| color: var(--error); |
| padding: 5px 10px; |
| border-radius: 3px; |
| font-size: 10px; |
| z-index: 1002; |
| } |
| |
| .offline-indicator.hidden { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <div class="title">[mD] MICRO DISTILLERY | webXOS 2025</div> |
| <div class="subtitle"> |
| GRPO • Interpreter Feedback Masking • KV-Cache Reuse • VAE Filtering |
| </div> |
| <div class="header-controls"> |
| <button id="btn-show-export" class="action-btn btn-export"> |
| 🚀 EXPORT TRAINED MODEL |
| </button> |
| </div> |
| </div> |
| |
| <div class="main-grid"> |
| |
| <div class="panel"> |
| <div class="panel-title">GRPO CONFIGURATION</div> |
| |
| <div class="section grpo-section"> |
| <div class="slider-container"> |
| <label>Group Size <span class="slider-value" id="group-size-value">8</span></label> |
| <input type="range" id="group-size" min="4" max="32" step="2" value="8"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>KL Penalty <span class="slider-value" id="kl-penalty-value">0.10</span></label> |
| <input type="range" id="kl-penalty" min="0.01" max="0.5" step="0.01" value="0.1"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>Advantage Clip <span class="slider-value" id="advantage-clip-value">2.0</span></label> |
| <input type="range" id="advantage-clip" min="0.1" max="5.0" step="0.1" value="2.0"> |
| </div> |
| |
| <select id="policy-arch"> |
| <option value="gpt2-small">GPT-2 Small (117M)</option> |
| <option value="gpt2-medium">GPT-2 Medium (345M)</option> |
| <option value="distilgpt2">DistilGPT-2 (82M)</option> |
| <option value="tiny-custom">Tiny Custom (42M)</option> |
| </select> |
| </div> |
| |
| <div class="section cache-section"> |
| <div class="slider-container"> |
| <label>KV-Cache Size <span class="slider-value" id="cache-size-value">512</span></label> |
| <input type="range" id="cache-size" min="128" max="2048" step="128" value="512"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>Cache Reuse Threshold <span class="slider-value" id="cache-threshold-value">0.90</span></label> |
| <input type="range" id="cache-threshold" min="0.7" max="0.99" step="0.01" value="0.9"> |
| </div> |
| |
| <div style="font-size: 10px; color: var(--cache); margin-top: 5px;"> |
| <span class="status-indicator" id="cache-status"></span> |
| KV-Cache: <span id="cache-status-text">Inactive</span> |
| </div> |
| </div> |
| |
| <button id="btn-init-grpo" class="action-btn btn-grpo"> |
| 🚀 INITIALIZE GRPO SYSTEM |
| </button> |
| <button id="btn-train-grpo" class="action-btn btn-grpo" style="display: none;"> |
| 🏃 START GRPO TRAINING |
| </button> |
| <button id="btn-stop-grpo" class="action-btn" style="display: none; background: rgba(255,0,0,0.1);"> |
| ⏹️ STOP TRAINING |
| </button> |
| |
| <div class="metrics-grid"> |
| <div class="metric-card"> |
| <div>Groups</div> |
| <div class="metric-value metric-grpo" id="metric-groups">0</div> |
| </div> |
| <div class="metric-card"> |
| <div>Cache Hit</div> |
| <div class="metric-value metric-cache" id="metric-cache-hit">0%</div> |
| </div> |
| <div class="metric-card"> |
| <div>Training Steps</div> |
| <div class="metric-value metric-grpo" id="metric-steps">0</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="panel"> |
| <div class="panel-title">VAE FILTER & MASKING</div> |
| |
| <div class="section vae-section"> |
| <div class="slider-container"> |
| <label>Latent Dimension <span class="slider-value" id="latent-dim-value">32</span></label> |
| <input type="range" id="latent-dim" min="8" max="128" step="8" value="32"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>Beta (KL Weight) <span class="slider-value" id="vae-beta-value">0.010</span></label> |
| <input type="range" id="vae-beta" min="0.001" max="0.1" step="0.001" value="0.01"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>Filter Threshold <span class="slider-value" id="filter-threshold-value">0.70</span></label> |
| <input type="range" id="filter-threshold" min="0.1" max="0.9" step="0.05" value="0.7"> |
| </div> |
| |
| <button id="btn-train-vae" class="action-btn btn-vae"> |
| 🌀 TRAIN VAE FILTER |
| </button> |
| </div> |
| |
| <div class="section mask-section"> |
| <div class="slider-container"> |
| <label>Mask Intensity <span class="slider-value" id="mask-intensity-value">0.8</span></label> |
| <input type="range" id="mask-intensity" min="0.1" max="1.0" step="0.1" value="0.8"> |
| </div> |
| |
| <div class="slider-container"> |
| <label>Feedback Window <span class="slider-value" id="feedback-window-value">50</span></label> |
| <input type="range" id="feedback-window" min="10" max="100" step="5" value="50"> |
| </div> |
| |
| <div style="font-size: 10px; color: var(--mask); margin-top: 5px;"> |
| <span class="status-indicator" id="mask-status"></span> |
| Masking: <span id="mask-status-text">Inactive</span> |
| </div> |
| </div> |
| |
| <div class="latent-space" id="latent-display"> |
| |
| </div> |
| |
| <div class="metrics-grid"> |
| <div class="metric-card"> |
| <div>VAE Loss</div> |
| <div class="metric-value metric-vae" id="metric-vae-loss">0.000</div> |
| </div> |
| <div class="metric-card"> |
| <div>Filtered %</div> |
| <div class="metric-value metric-vae" id="metric-filtered">0%</div> |
| </div> |
| <div class="metric-card"> |
| <div>Masked Tokens</div> |
| <div class="metric-value metric-mask" id="metric-masked">0</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="panel"> |
| <div class="panel-title">REAL-TIME TRAINING TERMINAL</div> |
| |
| <div id="terminal"> |
| [00:00:00] [mD] GRPO + VAE Enhanced Training System v1.0 |
| [00:00:00] FEATURES: |
| [00:00:00] • Group Relative Policy Optimization (GRPO) |
| [00:00:00] • Interpreter Feedback Masking |
| [00:00:00] • KV-Cache Reuse for Thought tokens |
| [00:00:00] • VAE Filter for distillation quality |
| [00:00:00] • Python sandbox integration |
| [00:00:00] STATUS: Ready for initialization... |
| </div> |
| |
| <div class="progress-container"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progress-fill"></div> |
| </div> |
| <div class="progress-text" id="progress-text">Idle</div> |
| </div> |
| |
| <div class="section sandbox-section"> |
| <div class="sandbox-header"> |
| 🐍 Python Sandbox Interface |
| </div> |
| <div class="sandbox-content" id="sandbox-output"> |
| >>> Python 3.11 (simulated) - Sandbox Ready |
| >>> Safe execution environment active |
| >>> Max execution time: 5 seconds |
| </div> |
| <div class="sandbox-input"> |
| <input type="text" id="sandbox-input" placeholder="Enter Python code (e.g., print('Hello'))"> |
| <button id="btn-execute">Execute</button> |
| </div> |
| </div> |
| |
| <div style="margin-top: 10px;"> |
| <div style="font-size: 11px; color: var(--accent); margin-bottom: 5px;">Token Visualization:</div> |
| <div class="token-display" id="token-display"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="export-modal" class="export-modal hidden"> |
| <div class="export-window"> |
| <div class="export-header"> |
| 🚀 Export Micro-Distilled Model |
| <button class="close-export">✕ Close</button> |
| </div> |
| |
| <div class="export-body"> |
| <div class="export-sidebar"> |
| <div class="export-format"> |
| <div style="color: var(--export); font-size: 12px; margin-bottom: 10px;">Export Format</div> |
| <div class="format-option selected" data-format="huggingface"> |
| 🤗 Hugging Face |
| </div> |
| <div class="format-option" data-format="safetensors"> |
| 🔒 SafeTensors |
| </div> |
| <div class="format-option" data-format="gguf"> |
| 🐬 GGUF (llama.cpp) |
| </div> |
| <div class="format-option" data-format="onnx"> |
| ⚡ ONNX Runtime |
| </div> |
| </div> |
| |
| <div class="file-browser"> |
| <div style="color: var(--export); font-size: 12px; margin-bottom: 10px;">Model Files</div> |
| <div id="file-list"> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="export-main"> |
| <div style="color: var(--export); font-size: 12px; margin-bottom: 10px;">File Preview</div> |
| <div id="file-preview" class="file-content"> |
| Select a file to preview its contents... |
| </div> |
| <div class="binary-warning" id="binary-warning" style="display: none;"> |
| ⚠️ This is a binary file. Preview shows metadata only. |
| </div> |
| |
| <div style="margin-top: 20px;"> |
| <div style="color: var(--export); font-size: 12px; margin-bottom: 10px;">Export Options</div> |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> |
| <div> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="include-tokenizer" checked> Include tokenizer |
| </label> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="include-config" checked> Include config.json |
| </label> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="include-logs"> Include training logs |
| </label> |
| </div> |
| <div> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="quantize" checked> Quantize (4-bit) |
| </label> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="include-metadata" checked> Include metadata |
| </label> |
| <label style="display: block; font-size: 11px; margin-bottom: 5px; color: var(--accent);"> |
| <input type="checkbox" id="zip-compression" checked> Zip compression |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| <div id="export-progress" class="export-progress hidden"> |
| <div style="color: var(--export); font-size: 12px; margin-bottom: 10px;">Export Progress</div> |
| <div class="progress-step"> |
| <div class="step-indicator" id="step-1">1</div> |
| <div>Preparing files...</div> |
| </div> |
| <div class="progress-step"> |
| <div class="step-indicator" id="step-2">2</div> |
| <div>Creating archive...</div> |
| </div> |
| <div class="progress-step"> |
| <div class="step-indicator" id="step-3">3</div> |
| <div>Generating download...</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="export-footer"> |
| <div class="export-info"> |
| Total size: <span id="total-size">~500 MB</span> • Files: <span id="file-count">12</span> |
| </div> |
| <button id="btn-final-export" class="export-btn"> |
| 🚀 EXPORT TO HUGGING FACE |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="install-prompt" class="install-prompt hidden"> |
| <div style="font-size: 12px; margin-bottom: 8px;">📱 Install Micro Distillery as PWA?</div> |
| <div style="font-size: 10px; color: var(--accent); margin-bottom: 10px;"> |
| Install for offline access and faster loading. |
| </div> |
| <div class="install-buttons"> |
| <button id="btn-install" class="install-btn">Install</button> |
| <button id="btn-dismiss" class="install-btn dismiss">Dismiss</button> |
| </div> |
| </div> |
|
|
| |
| <div id="offline-indicator" class="offline-indicator hidden"> |
| ⚠️ You are offline |
| </div> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> |
|
|
| <script> |
| |
| class GRPOTrainingSystem { |
| constructor() { |
| this.initialized = false; |
| this.training = false; |
| this.vaeTraining = false; |
| |
| |
| this.groups = []; |
| this.currentGroup = 0; |
| this.cache = new Map(); |
| this.cache.maxSize = 512; |
| this.maskPatterns = []; |
| this.cachePatterns = []; |
| |
| |
| this.vaeModel = null; |
| this.latentSamples = []; |
| this.filteredSamples = []; |
| |
| |
| this.modelFiles = []; |
| this.selectedFormat = 'huggingface'; |
| this.vocabSize = 50257; |
| this.mergesSize = 50000; |
| |
| |
| this.metrics = { |
| cacheHits: 0, |
| cacheMisses: 0, |
| maskedTokens: 0, |
| totalTokens: 0, |
| vaeLoss: 0.0123, |
| klDivergence: 0, |
| filteredCount: 0, |
| totalSamples: 0, |
| trainingSteps: 0, |
| finalLoss: 0.0423, |
| cacheHitRate: 0.784, |
| filterRate: 0.684, |
| maskRate: 0.312, |
| averageReward: 0.82 |
| }; |
| |
| |
| this.generateDynamicFiles(); |
| |
| |
| this.updateStatus('cache', 'inactive'); |
| this.updateStatus('mask', 'inactive'); |
| this.updateMetrics(); |
| |
| this.log('GRPO + VAE System initialized', 'system'); |
| } |
| |
| |
| generateDynamicFiles() { |
| const groupSize = parseInt(document.getElementById('group-size').value) || 8; |
| const klPenalty = parseFloat(document.getElementById('kl-penalty').value) || 0.1; |
| const advantageClip = parseFloat(document.getElementById('advantage-clip').value) || 2.0; |
| const latentDim = parseInt(document.getElementById('latent-dim').value) || 32; |
| const vaeBeta = parseFloat(document.getElementById('vae-beta').value) || 0.01; |
| const filterThreshold = parseFloat(document.getElementById('filter-threshold').value) || 0.7; |
| const cacheSize = parseInt(document.getElementById('cache-size').value) || 512; |
| const cacheThreshold = parseFloat(document.getElementById('cache-threshold').value) || 0.9; |
| const maskIntensity = parseFloat(document.getElementById('mask-intensity').value) || 0.8; |
| const feedbackWindow = parseInt(document.getElementById('feedback-window').value) || 50; |
| const policyArch = document.getElementById('policy-arch').value || 'gpt2-small'; |
| |
| |
| let modelType, hiddenSize, numLayers, numHeads, intermediateSize, modelSize; |
| switch(policyArch) { |
| case 'gpt2-small': |
| modelType = 'gpt2'; |
| hiddenSize = 768; |
| numLayers = 12; |
| numHeads = 12; |
| intermediateSize = 3072; |
| modelSize = '117M'; |
| break; |
| case 'gpt2-medium': |
| modelType = 'gpt2'; |
| hiddenSize = 1024; |
| numLayers = 24; |
| numHeads = 16; |
| intermediateSize = 4096; |
| modelSize = '345M'; |
| break; |
| case 'distilgpt2': |
| modelType = 'gpt2'; |
| hiddenSize = 768; |
| numLayers = 6; |
| numHeads = 12; |
| intermediateSize = 3072; |
| modelSize = '82M'; |
| break; |
| case 'tiny-custom': |
| modelType = 'micro-distill-grpo-vae'; |
| hiddenSize = 512; |
| numLayers = 8; |
| numHeads = 8; |
| intermediateSize = 2048; |
| modelSize = '42M'; |
| break; |
| default: |
| modelType = 'gpt2'; |
| hiddenSize = 768; |
| numLayers = 12; |
| numHeads = 12; |
| intermediateSize = 3072; |
| modelSize = '117M'; |
| } |
| |
| |
| const configJson = { |
| "architectures": [ |
| modelType === 'micro-distill-grpo-vae' ? "GPT2LMHeadModel" : "GPT2LMHeadModel" |
| ], |
| "model_type": modelType === 'micro-distill-grpo-vae' ? "gpt2" : modelType, |
| "vocab_size": this.vocabSize, |
| "n_positions": 1024, |
| "n_embd": hiddenSize, |
| "n_layer": numLayers, |
| "n_head": numHeads, |
| "n_inner": intermediateSize, |
| "activation_function": "gelu_new", |
| "resid_pdrop": 0.1, |
| "embd_pdrop": 0.1, |
| "attn_pdrop": 0.1, |
| "layer_norm_epsilon": 1e-5, |
| "initializer_range": 0.02, |
| "summary_type": "cls_index", |
| "summary_use_proj": true, |
| "summary_activation": null, |
| "summary_proj_to_labels": true, |
| "summary_first_dropout": 0.1, |
| "scale_attn_weights": true, |
| "use_cache": true, |
| "bos_token_id": 50256, |
| "eos_token_id": 50256, |
| "transformers_version": "4.36.0", |
| "grpo_config": { |
| "group_size": groupSize, |
| "kl_penalty": klPenalty, |
| "advantage_clip": advantageClip, |
| "mask_intensity": maskIntensity, |
| "feedback_window": feedbackWindow |
| }, |
| "vae_config": { |
| "latent_dim": latentDim, |
| "beta": vaeBeta, |
| "filter_threshold": filterThreshold |
| }, |
| "cache_config": { |
| "cache_size": cacheSize, |
| "reuse_threshold": cacheThreshold |
| } |
| }; |
| |
| |
| const vocab = this.generateFullVocabulary(); |
| const merges = this.generateMergesFile(); |
| const tokenizerJson = this.generateTokenizerJson(); |
| const modelWeights = this.generateModelWeights(hiddenSize, numLayers, numHeads); |
| const safetensorsContent = this.generateSafetensorsFile(hiddenSize, numLayers, numHeads); |
| const onnxContent = this.generateOnnxFile(hiddenSize, numLayers, numHeads); |
| const ggufContent = this.generateGGUFFile(); |
| |
| |
| this.modelFiles = [ |
| { |
| name: 'config.json', |
| size: '3.2 KB', |
| content: JSON.stringify(configJson, null, 2), |
| type: 'config', |
| isBinary: false |
| }, |
| { |
| name: 'pytorch_model.bin', |
| size: modelSize, |
| content: modelWeights, |
| type: 'model', |
| isBinary: true, |
| preview: `PyTorch Model Weights (${modelSize})\n\nArchitecture:\n- Hidden size: ${hiddenSize}\n- Layers: ${numLayers}\n- Heads: ${numHeads}\n- Vocabulary: ${this.vocabSize}\n- Intermediate size: ${intermediateSize}\n\nTraining Details:\n- GRPO groups: ${groupSize}\n- VAE latent dim: ${latentDim}\n- Final loss: ${this.metrics.finalLoss.toFixed(4)}\n- Cache hit rate: ${(this.metrics.cacheHitRate * 100).toFixed(1)}%` |
| }, |
| { |
| name: 'model.safetensors', |
| size: modelSize, |
| content: safetensorsContent, |
| type: 'model', |
| isBinary: true, |
| preview: `SafeTensors Format\n\nSafe serialization format for PyTorch models.\n\nModel: ${modelType}\nParameters: ${modelSize}\nVocabulary: ${this.vocabSize} tokens\n\nIncludes metadata:\n- Training steps: ${this.metrics.trainingSteps}\n- GRPO groups: ${groupSize}\n- VAE filtered samples: ${this.metrics.filteredCount}\n- Cache hit rate: ${(this.metrics.cacheHitRate * 100).toFixed(1)}%\n- Export timestamp: ${new Date().toISOString()}` |
| }, |
| { |
| name: 'vocab.json', |
| size: '1.8 MB', |
| content: JSON.stringify(vocab, null, 2), |
| type: 'tokenizer', |
| isBinary: false, |
| preview: `Vocabulary file (first 100 entries shown):\n\n${Object.entries(vocab).slice(0, 100).map(([key, value]) => ` "${key}": ${value}`).join('\n')}\n\n... ${Object.keys(vocab).length - 100} more entries` |
| }, |
| { |
| name: 'merges.txt', |
| size: '456 KB', |
| content: merges, |
| type: 'tokenizer', |
| isBinary: false, |
| preview: `BPE Merges file (first 50 merges shown):\n\n${merges.split('\n').slice(0, 50).join('\n')}\n\n... ${merges.split('\n').length - 50} more merges` |
| }, |
| { |
| name: 'tokenizer.json', |
| size: '2.1 MB', |
| content: tokenizerJson, |
| type: 'tokenizer', |
| isBinary: false |
| }, |
| { |
| name: 'tokenizer_config.json', |
| size: '1.4 KB', |
| content: JSON.stringify({ |
| "tokenizer_class": "GPT2Tokenizer", |
| "bos_token": "<|endoftext|>", |
| "eos_token": "<|endoftext|>", |
| "unk_token": "<|endoftext|>", |
| "pad_token": "<|endoftext|>", |
| "add_prefix_space": false, |
| "model_max_length": 1024, |
| "special_tokens_map_file": "special_tokens_map.json", |
| "name_or_path": "micro-distill-grpo-vae" |
| }, null, 2), |
| type: 'config', |
| isBinary: false |
| }, |
| { |
| name: 'special_tokens_map.json', |
| size: '280 B', |
| content: JSON.stringify({ |
| "bos_token": { |
| "content": "<|endoftext|>", |
| "lstrip": false, |
| "normalized": false, |
| "rstrip": false, |
| "single_word": false |
| }, |
| "eos_token": { |
| "content": "<|endoftext|>", |
| "lstrip": false, |
| "normalized": false, |
| "rstrip": false, |
| "single_word": false |
| }, |
| "unk_token": { |
| "content": "<|endoftext|>", |
| "lstrip": false, |
| "normalized": false, |
| "rstrip": false, |
| "single_word": false |
| }, |
| "pad_token": { |
| "content": "<|endoftext|>", |
| "lstrip": false, |
| "normalized": false, |
| "rstrip": false, |
| "single_word": false |
| } |
| }, null, 2), |
| type: 'tokenizer', |
| isBinary: false |
| }, |
| { |
| name: 'generation_config.json', |
| size: '1.1 KB', |
| content: JSON.stringify({ |
| "_from_model_config": true, |
| "bos_token_id": 50256, |
| "eos_token_id": 50256, |
| "pad_token_id": 50256, |
| "transformers_version": "4.36.0", |
| "max_length": 1024, |
| "min_length": 1, |
| "do_sample": true, |
| "early_stopping": false, |
| "num_beams": 1, |
| "temperature": 0.7, |
| "top_k": 50, |
| "top_p": 0.9, |
| "repetition_penalty": 1.2, |
| "length_penalty": 1.0, |
| "no_repeat_ngram_size": 3, |
| "num_return_sequences": 1, |
| "output_scores": false, |
| "return_dict_in_generate": true |
| }, null, 2), |
| type: 'config', |
| isBinary: false |
| }, |
| { |
| name: 'training_logs.json', |
| size: '24.8 KB', |
| content: JSON.stringify({ |
| "training_config": configJson, |
| "metrics": this.metrics, |
| "training_history": this.generateTrainingHistory(), |
| "export_info": { |
| "format": this.selectedFormat, |
| "timestamp": new Date().toISOString(), |
| "version": "1.0.0", |
| "framework": "PyTorch 2.0+", |
| "quantization": document.getElementById('quantize').checked ? "4-bit GPTQ" : "None" |
| } |
| }, null, 2), |
| type: 'logs', |
| isBinary: false |
| }, |
| { |
| name: 'model.onnx', |
| size: modelSize, |
| content: onnxContent, |
| type: 'onnx', |
| isBinary: true, |
| preview: `ONNX Model Export\n\nModel: ${modelType}\nInputs:\n - input_ids: INT64[1, sequence_length]\n - attention_mask: INT64[1, sequence_length]\n - position_ids: INT64[1, sequence_length] (optional)\n\nOutputs:\n - logits: FLOAT32[1, sequence_length, ${this.vocabSize}]\n\nOptimization: O2\nDynamic axes enabled for variable sequence length\n\nExported with ONNX Runtime 1.16.0` |
| }, |
| { |
| name: 'model.gguf', |
| size: modelSize, |
| content: ggufContent, |
| type: 'gguf', |
| isBinary: true, |
| preview: `GGUF Format (llama.cpp compatible)\n\nQuantization: Q4_K_M\nArchitecture: LLAMA\nContext size: 2048\nVocabulary: ${this.vocabSize}\n\nCompatible with:\n- llama.cpp\n- text-generation-webui\n- koboldcpp\n\nExported with llama.cpp converter` |
| }, |
| { |
| name: 'README.md', |
| size: '5.2 KB', |
| content: this.generateReadmeContent(modelType, modelSize, hiddenSize, numLayers, numHeads), |
| type: 'docs', |
| isBinary: false |
| }, |
| { |
| name: 'modeling_micro_distill.py', |
| size: '8.7 KB', |
| content: this.generateModelingCode(modelType, hiddenSize, numLayers, numHeads), |
| type: 'code', |
| isBinary: false |
| } |
| ]; |
| } |
| |
| generateFullVocabulary() { |
| const vocab = {}; |
| vocab["<|endoftext|>"] = 50256; |
| |
| for (let i = 0; i < 256; i++) { |
| const byte = `\\x${i.toString(16).padStart(2, '0')}`; |
| vocab[byte] = i; |
| } |
| |
| const commonTokens = [ |
| "the", " of", " and", " to", " a", " in", " that", " is", " was", " he", |
| " for", " it", " with", " as", " his", " on", " be", " at", " by", " I" |
| ]; |
| |
| let idx = 256; |
| for (const token of commonTokens) { |
| vocab[token] = idx++; |
| } |
| |
| while (idx < this.vocabSize - 1) { |
| const token = `token${idx}`; |
| vocab[token] = idx++; |
| } |
| |
| return vocab; |
| } |
| |
| generateMergesFile() { |
| let merges = "#version: 0.2\n"; |
| merges += "# GPT-2 style BPE merges for micro-distilled model\n\n"; |
| |
| const commonPairs = [ |
| "t h", "h e", "e r", "r e", "e n", "n t", "t i", "i o", "o n", |
| "a n", "n d", "i n", "n g", "o f", "t o", "a t", "h a", "a s" |
| ]; |
| |
| for (const pair of commonPairs) { |
| merges += `${pair}\n`; |
| } |
| |
| for (let i = commonPairs.length; i <= this.mergesSize; i++) { |
| const char1 = String.fromCharCode(97 + Math.floor(Math.random() * 26)); |
| const char2 = String.fromCharCode(97 + Math.floor(Math.random() * 26)); |
| merges += `${char1} ${char2}\n`; |
| } |
| |
| return merges; |
| } |
| |
| generateTokenizerJson() { |
| return JSON.stringify({ |
| "version": "1.0", |
| "truncation": null, |
| "padding": null, |
| "added_tokens": [ |
| { |
| "id": 50256, |
| "content": "<|endoftext|>", |
| "single_word": false, |
| "lstrip": false, |
| "rstrip": false, |
| "normalized": false, |
| "special": true |
| } |
| ], |
| "normalizer": { |
| "type": "Sequence", |
| "normalizers": [ |
| { |
| "type": "NFC" |
| } |
| ] |
| }, |
| "pre_tokenizer": { |
| "type": "Split", |
| "pattern": { |
| "Regex": "'s|'t|'re|'ve|'m|'ll|'d| ?\\p{L}+| ?\\p{N}+| ?[^\\s\\p{L}\\p{N}]+|\\s+(?!\\S)|\\s+" |
| }, |
| "behavior": "removed" |
| }, |
| "post_processor": { |
| "type": "TemplateProcessing", |
| "single": [ |
| { |
| "Sequence": { |
| "id": "A", |
| "type_id": 0 |
| } |
| } |
| ], |
| "pair": [ |
| { |
| "Sequence": { |
| "id": "A", |
| "type_id": 0 |
| } |
| }, |
| { |
| "Sequence": { |
| "id": "B", |
| "type_id": 0 |
| } |
| } |
| ], |
| "special_tokens": { |
| "<|endoftext|>": { |
| "id": "<|endoftext|>", |
| "ids": [50256] |
| } |
| } |
| }, |
| "decoder": { |
| "type": "ByteLevel", |
| "add_prefix_space": false, |
| "trim_offsets": false, |
| "use_regex": true |
| }, |
| "model": { |
| "type": "BPE", |
| "dropout": null, |
| "unk_token": "<|endoftext|>", |
| "continuing_subword_prefix": "", |
| "end_of_word_suffix": "", |
| "fuse_unk": false, |
| "byte_fallback": true, |
| "vocab": this.generateVocabularyForTokenizer(), |
| "merges": this.generateMergesForTokenizer() |
| } |
| }, null, 2); |
| } |
| |
| generateVocabularyForTokenizer() { |
| const vocab = {}; |
| for (let i = 0; i < 256; i++) { |
| vocab[`<0x${i.toString(16).padStart(2, '0')}>`] = i; |
| } |
| vocab["<|endoftext|>"] = 50256; |
| return vocab; |
| } |
| |
| generateMergesForTokenizer() { |
| const merges = []; |
| for (let i = 0; i < 100; i++) { |
| merges.push(`a${i} b${i}`); |
| } |
| return merges; |
| } |
| |
| generateModelWeights(hiddenSize, numLayers, numHeads) { |
| const weights = { |
| metadata: { |
| format: "torch", |
| version: "1.0", |
| model: "micro-distill-grpo-vae", |
| hidden_size: hiddenSize, |
| num_layers: numLayers, |
| num_heads: numHeads, |
| vocab_size: this.vocabSize, |
| training_steps: this.metrics.trainingSteps |
| }, |
| tensors: {} |
| }; |
| |
| weights.tensors["transformer.wte.weight"] = { |
| shape: [this.vocabSize, hiddenSize], |
| dtype: "float32", |
| size: `${(this.vocabSize * hiddenSize * 4 / (1024 * 1024)).toFixed(1)} MB` |
| }; |
| |
| weights.tensors["transformer.wpe.weight"] = { |
| shape: [1024, hiddenSize], |
| dtype: "float32", |
| size: `${(1024 * hiddenSize * 4 / (1024 * 1024)).toFixed(1)} MB` |
| }; |
| |
| for (let i = 0; i < numLayers; i++) { |
| weights.tensors[`transformer.h.${i}.ln_1.weight`] = { |
| shape: [hiddenSize], |
| dtype: "float32", |
| size: `${(hiddenSize * 4 / 1024).toFixed(1)} KB` |
| }; |
| |
| weights.tensors[`transformer.h.${i}.attn.c_attn.weight`] = { |
| shape: [hiddenSize, hiddenSize * 3], |
| dtype: "float32", |
| size: `${(hiddenSize * hiddenSize * 3 * 4 / (1024 * 1024)).toFixed(1)} MB` |
| }; |
| |
| weights.tensors[`transformer.h.${i}.mlp.c_fc.weight`] = { |
| shape: [hiddenSize, hiddenSize * 4], |
| dtype: "float32", |
| size: `${(hiddenSize * hiddenSize * 4 * 4 / (1024 * 1024)).toFixed(1)} MB` |
| }; |
| } |
| |
| weights.tensors["lm_head.weight"] = { |
| shape: [this.vocabSize, hiddenSize], |
| dtype: "float32", |
| size: `${(this.vocabSize * hiddenSize * 4 / (1024 * 1024)).toFixed(1)} MB` |
| }; |
| |
| return JSON.stringify(weights, null, 2); |
| } |
| |
| generateSafetensorsFile(hiddenSize, numLayers, numHeads) { |
| const safetensors = { |
| "__metadata__": { |
| "format": "pt", |
| "architecture": "gpt2", |
| "hidden_size": hiddenSize, |
| "num_layers": numLayers, |
| "num_heads": numHeads, |
| "vocab_size": this.vocabSize, |
| "grpo_trained": true, |
| "vae_filtered": true, |
| "training_steps": this.metrics.trainingSteps, |
| "final_loss": this.metrics.finalLoss, |
| "cache_hit_rate": this.metrics.cacheHitRate, |
| "average_reward": this.metrics.averageReward, |
| "export_timestamp": new Date().toISOString(), |
| "quantization": document.getElementById('quantize').checked ? "4-bit" : "none" |
| } |
| }; |
| |
| let binaryStructure = "SafeTensors binary structure:\n\n"; |
| binaryStructure += "Header (128 bytes):\n"; |
| binaryStructure += " - Magic number: 0x73 0x61 0x66 0x65\n"; |
| binaryStructure += " - Version: 1.0\n"; |
| binaryStructure += " - Num tensors: 143\n"; |
| binaryStructure += " - Metadata length: " + JSON.stringify(safetensors).length + "\n\n"; |
| |
| return binaryStructure; |
| } |
| |
| generateOnnxFile(hiddenSize, numLayers, numHeads) { |
| return `ONNX Model Export |
| Generated: ${new Date().toISOString()} |
| Model: micro-distill-grpo-vae |
| Framework: PyTorch 2.0+ |
| ONNX Version: 1.14.0 |
| |
| Graph Structure: |
| - Inputs: |
| - input_ids: int64[batch_size, sequence_length] |
| - attention_mask: int64[batch_size, sequence_length] |
| - position_ids: int64[batch_size, sequence_length] (optional) |
| |
| - Outputs: |
| - logits: float32[batch_size, sequence_length, ${this.vocabSize}] |
| |
| Layers: |
| - Embedding: ${hiddenSize} dimensions |
| - ${numLayers} Transformer blocks |
| - Layer normalization |
| - Language modeling head |
| |
| Optimizations: |
| - Constant folding: enabled |
| - Shape inference: enabled |
| - Dynamic axes: sequence_length |
| - Opset: 17 |
| - IR version: 9 |
| |
| Quantization: ${document.getElementById('quantize').checked ? "Q4 (4-bit)" : "FP32"}`; |
| } |
| |
| generateGGUFFile() { |
| return `GGUF Model File |
| Version: 3 |
| Tensor count: 143 |
| Metadata: |
| - ggml.architecture: llama |
| - ggml.file_type: ${document.getElementById('quantize').checked ? "Q4_K_M" : "F32"} |
| - tokenizer.ggml.model: gpt2 |
| - tokenizer.ggml.tokens: ${this.vocabSize} |
| - tokenizer.ggml.merges: ${this.mergesSize} |
| - llama.context_length: 2048 |
| - llama.embedding_length: 4096 |
| - llama.feed_forward_length: 11008 |
| - llama.block_count: 32 |
| - llama.attention.head_count: 32 |
| - llama.attention.head_count_kv: 32 |
| - llama.rope.dimension_count: 128 |
| - llama.rope.freq_base: 10000.0 |
| |
| Total size: ~4.5 GB (Q4_K_M quantized)`; |
| } |
| |
| generateReadmeContent(modelType, modelSize, hiddenSize, numLayers, numHeads) { |
| const groupSize = parseInt(document.getElementById('group-size').value) || 8; |
| const latentDim = parseInt(document.getElementById('latent-dim').value) || 32; |
| |
| return `# Micro-Distilled GRPO+VAE Model |
| |
| ## Model Description |
| This is a distilled language model trained using Group Relative Policy Optimization (GRPO) with VAE filtering. |
| |
| ## Model Details |
| - **Model type**: ${modelType} |
| - **Model size**: ${modelSize} parameters |
| - **Language**: English |
| - **License**: Apache 2.0 |
| |
| ## Training Methodology |
| - **GRPO (Group Relative Policy Optimization)**: ${groupSize} groups |
| - **VAE Filtering**: ${latentDim}D latent space |
| - **KV-Cache Reuse**: ${document.getElementById('cache-size').value} cache size |
| |
| ## Architecture Details |
| - Hidden size: ${hiddenSize} |
| - Number of layers: ${numLayers} |
| - Attention heads: ${numHeads} |
| - Vocabulary size: ${this.vocabSize} |
| - Maximum sequence length: 1024 |
| |
| ## Usage |
| |
| ### Using Transformers |
| \`\`\`python |
| from transformers import AutoModelForCausalLM, AutoTokenizer |
| |
| model = AutoModelForCausalLM.from_pretrained("micro-distill-grpo-vae") |
| tokenizer = AutoTokenizer.from_pretrained("micro-distill-grpo-vae") |
| |
| inputs = tokenizer("Hello, world!", return_tensors="pt") |
| outputs = model.generate(**inputs, max_length=50) |
| print(tokenizer.decode(outputs[0])) |
| \`\`\``; |
| } |
| |
| generateModelingCode(modelType, hiddenSize, numLayers, numHeads) { |
| if (modelType !== 'micro-distill-grpo-vae') { |
| return "# Standard GPT-2 architecture - using transformers library directly\n"; |
| } |
| |
| return `# modeling_micro_distill.py |
| # Custom model architecture for micro-distill-grpo-vae |
| |
| import torch |
| import torch.nn as nn |
| from transformers import GPT2PreTrainedModel, GPT2Config |
| |
| class MicroDistillForCausalLM(GPT2PreTrainedModel): |
| def __init__(self, config): |
| super().__init__(config) |
| self.config = config |
| |
| # ... modeling code ... |
| |
| def forward(self, input_ids=None, attention_mask=None, **kwargs): |
| # Forward pass implementation |
| pass`; |
| } |
| |
| generateTrainingHistory() { |
| return Array.from({length: 10}, (_, i) => ({ |
| step: i * 100, |
| loss: 0.5 - (i * 0.045), |
| reward: 0.5 + (i * 0.035), |
| cache_hits: i * 78, |
| vae_loss: 0.1 - (i * 0.009) |
| })); |
| } |
| |
| showExportModal() { |
| this.generateDynamicFiles(); |
| const modal = document.getElementById('export-modal'); |
| modal.classList.remove('hidden'); |
| this.updateFileBrowser(); |
| this.updateExportButton(); |
| this.log('Export window opened with Hugging Face compatible files', 'export'); |
| } |
| |
| hideExportModal() { |
| const modal = document.getElementById('export-modal'); |
| modal.classList.add('hidden'); |
| const progress = document.getElementById('export-progress'); |
| progress.classList.add('hidden'); |
| document.getElementById('binary-warning').style.display = 'none'; |
| } |
| |
| updateFileBrowser() { |
| const fileList = document.getElementById('file-list'); |
| if (!fileList) return; |
| |
| fileList.innerHTML = ''; |
| |
| this.modelFiles.forEach((file, index) => { |
| const item = document.createElement('div'); |
| item.className = 'file-item'; |
| item.dataset.index = index; |
| |
| const icon = this.getFileIcon(file.type); |
| |
| item.innerHTML = ` |
| <span class="file-icon">${icon}</span> |
| <span>${file.name}</span> |
| <span class="file-size">${file.size}</span> |
| `; |
| |
| item.addEventListener('click', () => { |
| document.querySelectorAll('.file-item').forEach(f => f.classList.remove('selected')); |
| item.classList.add('selected'); |
| this.showFilePreview(file); |
| }); |
| |
| fileList.appendChild(item); |
| }); |
| |
| if (this.modelFiles.length > 0) { |
| fileList.children[0].classList.add('selected'); |
| this.showFilePreview(this.modelFiles[0]); |
| } |
| } |
| |
| getFileIcon(type) { |
| const icons = { |
| 'config': '⚙️', |
| 'model': '🤖', |
| 'tokenizer': '🔤', |
| 'logs': '📊', |
| 'vae': '🌀', |
| 'cache': '💾', |
| 'docs': '📄', |
| 'onnx': '⚡', |
| 'gguf': '🐬', |
| 'code': '📝' |
| }; |
| return icons[type] || '📄'; |
| } |
| |
| showFilePreview(file) { |
| const preview = document.getElementById('file-preview'); |
| const warning = document.getElementById('binary-warning'); |
| |
| if (!preview || !file) return; |
| |
| if (file.isBinary) { |
| warning.style.display = 'block'; |
| preview.textContent = file.preview || `Binary file: ${file.name}\nSize: ${file.size}`; |
| } else { |
| warning.style.display = 'none'; |
| let content = file.content; |
| if (content.length > 5000) { |
| content = content.substring(0, 5000) + '\n\n... (content truncated for preview)'; |
| } |
| preview.textContent = content; |
| } |
| |
| const totalSize = this.calculateTotalSize(); |
| const fileCount = this.modelFiles.length; |
| |
| document.getElementById('total-size').textContent = totalSize; |
| document.getElementById('file-count').textContent = fileCount; |
| } |
| |
| calculateTotalSize() { |
| const policyArch = document.getElementById('policy-arch').value; |
| let baseSize = '~500 MB'; |
| |
| switch(policyArch) { |
| case 'gpt2-small': baseSize = '~500 MB'; break; |
| case 'gpt2-medium': baseSize = '~1.4 GB'; break; |
| case 'distilgpt2': baseSize = '~350 MB'; break; |
| case 'tiny-custom': baseSize = '~180 MB'; break; |
| } |
| |
| if (document.getElementById('quantize').checked) { |
| return baseSize.replace('MB', 'MB (4-bit)').replace('GB', 'GB (4-bit)'); |
| } |
| return baseSize; |
| } |
| |
| updateExportButton() { |
| const exportBtn = document.getElementById('btn-final-export'); |
| if (!exportBtn) return; |
| |
| const formats = { |
| 'huggingface': '🤗 EXPORT TO HUGGING FACE', |
| 'safetensors': '🔒 EXPORT SAFETENSORS', |
| 'gguf': '🐬 EXPORT GGUF FORMAT', |
| 'onnx': '⚡ EXPORT ONNX MODEL' |
| }; |
| |
| exportBtn.textContent = formats[this.selectedFormat] || formats['huggingface']; |
| } |
| |
| async exportModel() { |
| this.log(`Exporting model in ${this.selectedFormat.toUpperCase()} format...`, 'export'); |
| |
| const progress = document.getElementById('export-progress'); |
| progress.classList.remove('hidden'); |
| |
| this.updateExportStep(1, 'active'); |
| |
| const includeTokenizer = document.getElementById('include-tokenizer').checked; |
| const includeConfig = document.getElementById('include-config').checked; |
| const includeLogs = document.getElementById('include-logs').checked; |
| const includeMetadata = document.getElementById('include-metadata').checked; |
| const useZip = document.getElementById('zip-compression').checked; |
| const quantize = document.getElementById('quantize').checked; |
| |
| let filesToExport = this.modelFiles.filter(file => { |
| if (file.type === 'tokenizer' && !includeTokenizer) return false; |
| if (file.type === 'config' && !includeConfig) return false; |
| if (file.type === 'logs' && !includeLogs) return false; |
| if (file.type === 'docs' && !includeMetadata) return false; |
| |
| if (this.selectedFormat === 'huggingface' && file.type === 'gguf') return false; |
| if (this.selectedFormat === 'gguf' && (file.type === 'onnx' || file.type === 'safetensors')) return false; |
| if (this.selectedFormat === 'onnx' && (file.type === 'gguf' || file.type === 'safetensors')) return false; |
| if (this.selectedFormat === 'safetensors' && (file.type === 'gguf' || file.type === 'onnx')) return false; |
| |
| return true; |
| }); |
| |
| if (quantize) { |
| filesToExport = filesToExport.map(file => ({ |
| ...file, |
| size: file.size.includes('MB') ? file.size.replace('MB', 'MB (Q4)') : file.size, |
| content: file.isBinary ? file.content.replace(/Quantization: None/, 'Quantization: Q4 (4-bit)') : file.content |
| })); |
| } |
| |
| this.updateExportStep(1, 'completed'); |
| this.updateExportStep(2, 'active'); |
| |
| try { |
| if (useZip) { |
| const zip = new JSZip(); |
| |
| filesToExport.forEach(file => { |
| zip.file(file.name, file.content); |
| }); |
| |
| const content = await zip.generateAsync({type: "blob"}); |
| |
| this.updateExportStep(2, 'completed'); |
| this.updateExportStep(3, 'active'); |
| |
| const timestamp = new Date().toISOString().split('T')[0]; |
| const quantStr = quantize ? '-q4' : ''; |
| const filename = `micro-distill-grpo-vae-${this.selectedFormat}${quantStr}-${timestamp}.zip`; |
| |
| saveAs(content, filename); |
| |
| this.updateExportStep(3, 'completed'); |
| |
| this.log(`✅ Export complete: ${filename}`, 'success'); |
| this.log(`📁 Format: ${this.selectedFormat.toUpperCase()}`, 'export'); |
| |
| } else { |
| this.updateExportStep(2, 'completed'); |
| this.updateExportStep(3, 'active'); |
| |
| filesToExport.forEach(file => { |
| const blob = new Blob([file.content], {type: 'text/plain'}); |
| saveAs(blob, file.name); |
| }); |
| |
| this.updateExportStep(3, 'completed'); |
| |
| this.log(`✅ Export complete: ${filesToExport.length} files`, 'success'); |
| } |
| |
| setTimeout(() => { |
| this.hideExportModal(); |
| this.resetExportSteps(); |
| }, 1500); |
| |
| } catch (error) { |
| this.logError('Export failed:', error); |
| this.updateExportStep(3, 'error'); |
| } |
| } |
| |
| updateExportStep(stepNumber, status) { |
| const step = document.getElementById(`step-${stepNumber}`); |
| if (!step) return; |
| |
| step.className = 'step-indicator'; |
| |
| if (status === 'active') { |
| step.classList.add('active'); |
| } else if (status === 'completed') { |
| step.classList.add('completed'); |
| step.textContent = '✓'; |
| } else if (status === 'error') { |
| step.style.background = 'var(--error)'; |
| step.style.borderColor = 'var(--error)'; |
| step.textContent = '✗'; |
| } |
| } |
| |
| resetExportSteps() { |
| for (let i = 1; i <= 3; i++) { |
| const step = document.getElementById(`step-${i}`); |
| if (step) { |
| step.className = 'step-indicator'; |
| step.textContent = i; |
| } |
| } |
| } |
| |
| |
| async initializeGRPO() { |
| try { |
| this.log('Initializing GRPO system...', 'grpo'); |
| this.updateProgress(10, 'Setting up GRPO groups...'); |
| |
| const groupSize = parseInt(document.getElementById('group-size').value); |
| const cacheSize = parseInt(document.getElementById('cache-size').value); |
| |
| if (groupSize < 1) { |
| throw new Error('Group size must be at least 1'); |
| } |
| |
| this.groups = Array.from({length: groupSize}, (_, i) => ({ |
| id: i, |
| policy: this.createPolicyNetwork(), |
| baseline: 0, |
| advantages: [], |
| rewards: [], |
| parameters: this.getRandomParameters() |
| })); |
| |
| this.cache = new Map(); |
| this.cache.maxSize = cacheSize; |
| |
| this.maskPatterns = this.generateMaskPatterns(); |
| this.cachePatterns = []; |
| |
| this.updateProgress(50, 'Creating policy networks...'); |
| |
| if (typeof tf !== 'undefined') { |
| this.log(`TensorFlow.js ${tf.version_core} available`, 'system'); |
| } |
| |
| this.log(`GRPO configured: ${groupSize} groups, cache=${cacheSize}`, 'grpo'); |
| this.log('Interpreter feedback masking enabled', 'mask'); |
| this.log('KV-cache reuse initialized', 'cache'); |
| |
| this.initialized = true; |
| this.updateProgress(100, 'GRPO system ready!'); |
| |
| this.metrics.trainingSteps = 0; |
| this.metrics.cacheHits = 0; |
| this.metrics.cacheMisses = 0; |
| |
| document.getElementById('btn-train-grpo').style.display = 'block'; |
| document.getElementById('btn-stop-grpo').style.display = 'none'; |
| this.updateStatus('cache', 'active'); |
| this.updateStatus('mask', 'active'); |
| |
| this.updateMetrics(); |
| this.displaySampleTokens(); |
| |
| } catch (error) { |
| this.logError('GRPO initialization failed:', error); |
| this.updateProgress(0, 'Initialization failed'); |
| } |
| } |
| |
| |
| async trainGRPO() { |
| if (!this.initialized) { |
| this.log('Initialize GRPO system first', 'error'); |
| return; |
| } |
| |
| if (this.training) { |
| this.stopTraining(); |
| return; |
| } |
| |
| this.training = true; |
| this.log('Starting GRPO training loop...', 'grpo'); |
| |
| document.getElementById('btn-train-grpo').textContent = '⏸️ PAUSE TRAINING'; |
| document.getElementById('btn-stop-grpo').style.display = 'block'; |
| |
| const steps = 100; |
| const groupSize = this.groups.length; |
| |
| for (let step = 0; step < steps && this.training; step++) { |
| this.metrics.trainingSteps = step + 1; |
| |
| const trajectories = []; |
| for (let i = 0; i < groupSize; i++) { |
| const trajectory = this.generateTrajectory(i); |
| trajectories.push(trajectory); |
| } |
| |
| const advantages = this.calculateGroupRelativeAdvantages(trajectories); |
| await this.updatePolicies(trajectories, advantages); |
| this.updateCache(trajectories); |
| |
| const progress = ((step + 1) / steps) * 100; |
| this.updateProgress(progress, `GRPO Step ${step + 1}/${steps}`); |
| |
| this.updateMetrics(); |
| |
| if (step % 5 === 0) { |
| await new Promise(resolve => setTimeout(resolve, 10)); |
| } |
| } |
| |
| if (this.training) { |
| this.log('GRPO training completed', 'success'); |
| this.training = false; |
| |
| this.metrics.finalLoss = 0.01 + Math.random() * 0.05; |
| this.metrics.cacheHitRate = this.metrics.cacheHits / (this.metrics.cacheHits + this.metrics.cacheMisses) || 0.5; |
| this.metrics.averageReward = 0.7 + Math.random() * 0.3; |
| |
| document.getElementById('btn-train-grpo').textContent = '🏃 START GRPO TRAINING'; |
| document.getElementById('btn-stop-grpo').style.display = 'none'; |
| this.updateProgress(100, 'Training complete!'); |
| } |
| } |
| |
| stopTraining() { |
| this.training = false; |
| this.log('GRPO training stopped by user', 'warning'); |
| document.getElementById('btn-train-grpo').textContent = '🏃 START GRPO TRAINING'; |
| document.getElementById('btn-stop-grpo').style.display = 'none'; |
| } |
| |
| |
| async trainVAEFilter() { |
| if (this.vaeTraining) { |
| this.vaeTraining = false; |
| this.log('VAE training stopped', 'warning'); |
| return; |
| } |
| |
| try { |
| this.vaeTraining = true; |
| this.log('Training VAE filter...', 'vae'); |
| |
| this.vaeModel = this.createVAEModel(); |
| |
| const epochs = 50; |
| |
| for (let epoch = 0; epoch < epochs && this.vaeTraining; epoch++) { |
| const samples = this.generateTrainingSamples(32); |
| const loss = this.simulateVAELoss(); |
| const filtered = this.filterSamplesWithVAE(samples); |
| |
| this.metrics.vaeLoss = loss; |
| this.metrics.filteredCount += filtered.length; |
| this.metrics.totalSamples += samples.length; |
| this.metrics.filterRate = this.metrics.filteredCount / this.metrics.totalSamples || 0; |
| |
| this.updateLatentDisplay(); |
| this.updateMetrics(); |
| |
| const progress = ((epoch + 1) / epochs) * 100; |
| this.updateProgress(progress, `VAE Epoch ${epoch + 1}/${epochs}`); |
| |
| if (epoch % 10 === 0) { |
| this.log(`VAE Epoch ${epoch}: Loss=${loss.toFixed(4)}`, 'vae'); |
| } |
| |
| await new Promise(resolve => setTimeout(resolve, 20)); |
| } |
| |
| if (this.vaeTraining) { |
| this.log('VAE filter training completed', 'success'); |
| this.vaeTraining = false; |
| this.updateProgress(100, 'VAE training complete!'); |
| } |
| |
| } catch (error) { |
| this.logError('VAE training failed:', error); |
| this.vaeTraining = false; |
| } |
| } |
| |
| |
| generateMaskPatterns() { |
| return [ |
| />>>.*/g, |
| /Traceback.*/g, |
| /Error:.*/g, |
| /Warning:.*/g, |
| /Result:.*/g, |
| /Output:.*/g, |
| /\d+\s*\.{3}\s*/g, |
| /File.*line.*/g, |
| /SyntaxError.*/g, |
| /TypeError.*/g, |
| /NameError.*/g |
| ]; |
| } |
| |
| applyFeedbackMasking(text, tokens) { |
| if (!text || !tokens || tokens.length === 0) { |
| return tokens || []; |
| } |
| |
| const maskedTokens = JSON.parse(JSON.stringify(tokens)); |
| let totalMasked = 0; |
| const maskIntensity = parseFloat(document.getElementById('mask-intensity').value); |
| |
| this.maskPatterns.forEach(pattern => { |
| const matches = [...text.matchAll(pattern)]; |
| for (const match of matches) { |
| const start = match.index; |
| const end = start + match[0].length; |
| |
| for (let i = 0; i < maskedTokens.length; i++) { |
| const token = maskedTokens[i]; |
| if (token.position >= start && token.position <= end) { |
| if (Math.random() < maskIntensity) { |
| token.masked = true; |
| totalMasked++; |
| } |
| } |
| } |
| } |
| }); |
| |
| this.metrics.maskedTokens += totalMasked; |
| this.metrics.totalTokens += tokens.length; |
| this.metrics.maskRate = this.metrics.maskedTokens / this.metrics.totalTokens || 0; |
| |
| return maskedTokens; |
| } |
| |
| |
| updateCache(trajectories) { |
| const cacheThreshold = parseFloat(document.getElementById('cache-threshold').value); |
| |
| trajectories.forEach(trajectory => { |
| if (trajectory.reward > cacheThreshold) { |
| const thoughtTokens = trajectory.tokens.filter(t => t.type === 'thought'); |
| if (thoughtTokens.length > 0) { |
| const key = thoughtTokens.map(t => t.value).join('|').substring(0, 100); |
| |
| if (!this.cache.has(key)) { |
| this.cache.set(key, { |
| tokens: thoughtTokens, |
| timestamp: Date.now(), |
| reward: trajectory.reward |
| }); |
| |
| if (this.cache.size > this.cache.maxSize) { |
| const oldestKey = [...this.cache.keys()] |
| .reduce((a, b) => this.cache.get(a).timestamp < this.cache.get(b).timestamp ? a : b); |
| this.cache.delete(oldestKey); |
| } |
| |
| this.metrics.cacheMisses++; |
| } else { |
| this.metrics.cacheHits++; |
| } |
| } |
| } |
| }); |
| } |
| |
| getCachedThought(thoughtTokens) { |
| if (thoughtTokens.length === 0) return null; |
| |
| const key = thoughtTokens.map(t => t.value).join('|').substring(0, 100); |
| return this.cache.get(key); |
| } |
| |
| |
| async executeInSandbox(code) { |
| try { |
| if (!code || code.trim() === '') { |
| return ">>> (no code entered)"; |
| } |
| |
| this.log(`Executing: ${code.substring(0, 50)}${code.length > 50 ? '...' : ''}`, 'sandbox'); |
| |
| const result = this.simulatePythonExecution(code); |
| const tokens = this.tokenizeText(result); |
| const maskedTokens = this.applyFeedbackMasking(result, tokens); |
| |
| this.displayTokens(maskedTokens); |
| |
| return result; |
| |
| } catch (error) { |
| this.logError('Sandbox execution failed:', error); |
| return `Error: ${error.message}`; |
| } |
| } |
| |
| simulatePythonExecution(code) { |
| try { |
| const dangerousPatterns = [ |
| 'import os', 'import sys', 'subprocess', |
| 'eval(', 'exec(', '__import__', |
| 'open(', 'write(', 'rm ', 'del ', |
| 'shutil', 'socket', 'requests' |
| ]; |
| |
| for (const pattern of dangerousPatterns) { |
| if (code.toLowerCase().includes(pattern.toLowerCase())) { |
| throw new Error(`Safety violation: ${pattern}`); |
| } |
| } |
| |
| if (code.includes('print(')) { |
| const match = code.match(/print\((.*)\)/); |
| if (match) { |
| const content = match[1].trim(); |
| const displayContent = content.replace(/['"]/g, ''); |
| return `>>> ${code}\n${displayContent}`; |
| } |
| } |
| |
| if (code.includes('+')) { |
| const parts = code.split('+').map(p => p.trim()); |
| const nums = parts.map(p => parseFloat(p)); |
| if (nums.every(n => !isNaN(n))) { |
| const sum = nums.reduce((a, b) => a + b, 0); |
| return `>>> ${code}\n${sum}`; |
| } |
| } |
| |
| return `>>> ${code}\n[Simulated execution] Result: OK`; |
| |
| } catch (error) { |
| return `>>> ${code}\nTraceback (most recent call last):\n Error: ${error.message}`; |
| } |
| } |
| |
| |
| createPolicyNetwork() { |
| return { |
| parameters: this.getRandomParameters(), |
| predict: (state) => { |
| return Array.from({length: 10}, () => Math.random()); |
| } |
| }; |
| } |
| |
| getRandomParameters() { |
| return Array.from({length: 100}, () => Math.random() * 2 - 1); |
| } |
| |
| generateTrajectory(groupId) { |
| const thoughts = [ |
| "I need to sort this array efficiently", |
| "Let me implement a binary search", |
| "This requires recursion with memoization", |
| "I should use dynamic programming here", |
| "Time complexity optimization needed" |
| ]; |
| |
| const actions = [ |
| "sorted_arr = sorted(original_arr)", |
| "result = [x**2 for x in range(10)]", |
| "def factorial(n): return 1 if n <= 1 else n * factorial(n-1)", |
| "total = sum([1, 2, 3, 4, 5])", |
| "print('Hello, World!')" |
| ]; |
| |
| const thought = thoughts[Math.floor(Math.random() * thoughts.length)]; |
| const action = actions[Math.floor(Math.random() * actions.length)]; |
| |
| const thoughtTokens = this.tokenizeText(thought); |
| const actionTokens = this.tokenizeText(action); |
| |
| const cached = this.getCachedThought(thoughtTokens); |
| if (cached) { |
| this.log(`Cache hit for thought in group ${groupId}`, 'cache'); |
| } |
| |
| return { |
| group: groupId, |
| thought: thought, |
| action: action, |
| tokens: [ |
| ...thoughtTokens.map(t => ({...t, type: 'thought'})), |
| ...actionTokens.map(t => ({...t, type: 'action'})) |
| ], |
| reward: 0.5 + Math.random() * 0.5, |
| cached: cached !== null |
| }; |
| } |
| |
| calculateGroupRelativeAdvantages(trajectories) { |
| const rewards = trajectories.map(t => t.reward); |
| const meanReward = rewards.reduce((a, b) => a + b, 0) / rewards.length; |
| const stdReward = Math.sqrt( |
| rewards.reduce((sum, r) => sum + Math.pow(r - meanReward, 2), 0) / rewards.length |
| ) || 1; |
| |
| const clipValue = parseFloat(document.getElementById('advantage-clip').value); |
| |
| return rewards.map(reward => { |
| const advantage = (reward - meanReward) / stdReward; |
| return Math.max(Math.min(advantage, clipValue), -clipValue); |
| }); |
| } |
| |
| async updatePolicies(trajectories, advantages) { |
| const klPenalty = parseFloat(document.getElementById('kl-penalty').value); |
| |
| for (let i = 0; i < this.groups.length; i++) { |
| const group = this.groups[i]; |
| const advantage = advantages[i]; |
| |
| group.advantages.push(advantage); |
| group.rewards.push(trajectories[i].reward); |
| |
| group.parameters = group.parameters.map(p => |
| p + advantage * 0.01 - klPenalty * 0.001 |
| ); |
| } |
| |
| const avgAdvantage = advantages.reduce((a,b) => a+b,0)/advantages.length; |
| this.log(`Policy updated with avg advantage: ${avgAdvantage.toFixed(3)}`, 'grpo'); |
| } |
| |
| createVAEModel() { |
| return { |
| encode: (x) => Array.from({length: 32}, () => Math.random() * 2 - 1), |
| decode: (z) => Array.from({length: 64}, () => Math.random()), |
| parameters: Array.from({length: 1000}, () => Math.random() * 2 - 1) |
| }; |
| } |
| |
| simulateVAELoss() { |
| return 0.01 + Math.random() * 0.05; |
| } |
| |
| generateTrainingSamples(count) { |
| return Array.from({length: count}, () => |
| Array.from({length: 64}, () => Math.random()) |
| ); |
| } |
| |
| filterSamplesWithVAE(samples) { |
| const threshold = parseFloat(document.getElementById('filter-threshold').value); |
| return samples.filter(() => Math.random() > threshold); |
| } |
| |
| tokenizeText(text) { |
| if (!text) return []; |
| |
| const words = text.split(/\s+/); |
| let position = 0; |
| |
| return words.map((word, idx) => ({ |
| id: idx, |
| value: word, |
| type: 'word', |
| position: position, |
| masked: false |
| })).map(token => { |
| position += token.value.length + 1; |
| return token; |
| }); |
| } |
| |
| displaySampleTokens() { |
| const sampleText = "Thought: I need to implement a sorting algorithm. Action: sorted_arr = sorted(input_arr)"; |
| const tokens = this.tokenizeText(sampleText); |
| |
| tokens.forEach((token, i) => { |
| if (i < 8) token.type = 'thought'; |
| else token.type = 'action'; |
| }); |
| |
| tokens[10].masked = true; |
| tokens[11].masked = true; |
| |
| this.displayTokens(tokens.slice(0, 15)); |
| } |
| |
| displayTokens(tokens) { |
| const container = document.getElementById('token-display'); |
| if (!container) return; |
| |
| container.innerHTML = ''; |
| |
| tokens.slice(0, 20).forEach(token => { |
| const span = document.createElement('span'); |
| span.className = 'token'; |
| if (token.masked) span.classList.add('masked'); |
| if (token.type === 'thought') span.classList.add('cached'); |
| |
| span.textContent = token.value.substring(0, 10); |
| span.title = `${token.type}${token.masked ? ' (masked)' : ''}`; |
| |
| container.appendChild(span); |
| }); |
| } |
| |
| updateLatentDisplay() { |
| const display = document.getElementById('latent-display'); |
| if (!display) return; |
| |
| const latentValues = Array.from({length: 4}, () => |
| (Math.random() * 2 - 1).toFixed(3) |
| ); |
| |
| display.innerHTML = latentValues.map((value, i) => ` |
| <div class="latent-dim"> |
| z<sub>${i}</sub> |
| <span class="latent-value">${value}</span> |
| </div> |
| `).join(''); |
| } |
| |
| updateMetrics() { |
| const cacheHitRate = this.metrics.cacheHits + this.metrics.cacheMisses > 0 ? |
| Math.round(this.metrics.cacheHits / (this.metrics.cacheHits + this.metrics.cacheMisses) * 100) : 0; |
| |
| const maskRate = this.metrics.totalTokens > 0 ? |
| Math.round(this.metrics.maskedTokens / this.metrics.totalTokens * 100) : 0; |
| |
| const filteredRate = this.metrics.totalSamples > 0 ? |
| Math.round(this.metrics.filteredCount / this.metrics.totalSamples * 100) : 0; |
| |
| this.safeUpdate('metric-groups', this.groups.length.toString()); |
| this.safeUpdate('metric-cache-hit', `${cacheHitRate}%`); |
| this.safeUpdate('metric-steps', this.metrics.trainingSteps.toString()); |
| this.safeUpdate('metric-vae-loss', this.metrics.vaeLoss.toFixed(3)); |
| this.safeUpdate('metric-filtered', `${filteredRate}%`); |
| this.safeUpdate('metric-masked', this.metrics.maskedTokens.toString()); |
| } |
| |
| updateProgress(percent, text) { |
| this.safeUpdate('progress-fill', percent, 'style', 'width'); |
| this.safeUpdate('progress-text', text || ''); |
| } |
| |
| updateStatus(type, status) { |
| const indicator = document.getElementById(`${type}-status`); |
| const text = document.getElementById(`${type}-status-text`); |
| |
| if (indicator) { |
| indicator.className = 'status-indicator'; |
| if (status === 'active') indicator.classList.add('status-active'); |
| else if (status === 'error') indicator.classList.add('status-error'); |
| else indicator.classList.add('status-inactive'); |
| } |
| |
| if (text) { |
| text.textContent = status.charAt(0).toUpperCase() + status.slice(1); |
| } |
| } |
| |
| safeUpdate(elementId, value, property = 'textContent', subProperty = null) { |
| try { |
| const element = document.getElementById(elementId); |
| if (element) { |
| if (property === 'style' && subProperty) { |
| element.style[subProperty] = `${value}%`; |
| } else { |
| element[property] = value; |
| } |
| } |
| } catch (error) { |
| |
| } |
| } |
| |
| log(message, type = 'system') { |
| try { |
| const time = new Date().toLocaleTimeString('en-US', { hour12: false }); |
| const terminal = document.getElementById('terminal'); |
| if (!terminal) return; |
| |
| const entry = document.createElement('div'); |
| entry.className = 'log-entry'; |
| |
| const colorClass = `log-${type}`; |
| entry.innerHTML = `<span style="color: #008000;">[${time}]</span> <span class="${colorClass}">${message}</span>`; |
| terminal.appendChild(entry); |
| |
| terminal.scrollTop = terminal.scrollHeight; |
| |
| if (terminal.children.length > 100) { |
| terminal.removeChild(terminal.firstChild); |
| } |
| } catch (error) { |
| console.error('Log error:', error); |
| } |
| } |
| |
| logError(message, error) { |
| console.error(message, error); |
| this.log(`❌ ${message} ${error?.message || ''}`, 'error'); |
| } |
| } |
| |
| |
| class PWAInstaller { |
| constructor() { |
| this.deferredPrompt = null; |
| this.isOnline = navigator.onLine; |
| |
| this.setupEventListeners(); |
| this.checkInstallPrompt(); |
| this.updateOnlineStatus(); |
| } |
| |
| setupEventListeners() { |
| |
| window.addEventListener('beforeinstallprompt', (e) => { |
| e.preventDefault(); |
| this.deferredPrompt = e; |
| this.showInstallPrompt(); |
| }); |
| |
| |
| window.addEventListener('appinstalled', () => { |
| this.hideInstallPrompt(); |
| this.log('App installed successfully', 'success'); |
| }); |
| |
| |
| window.addEventListener('online', () => { |
| this.isOnline = true; |
| this.updateOnlineStatus(); |
| }); |
| |
| window.addEventListener('offline', () => { |
| this.isOnline = false; |
| this.updateOnlineStatus(); |
| }); |
| } |
| |
| showInstallPrompt() { |
| const prompt = document.getElementById('install-prompt'); |
| if (prompt && this.deferredPrompt) { |
| prompt.classList.remove('hidden'); |
| } |
| } |
| |
| hideInstallPrompt() { |
| const prompt = document.getElementById('install-prompt'); |
| if (prompt) { |
| prompt.classList.add('hidden'); |
| } |
| } |
| |
| async installApp() { |
| if (this.deferredPrompt) { |
| this.deferredPrompt.prompt(); |
| const { outcome } = await this.deferredPrompt.userChoice; |
| |
| if (outcome === 'accepted') { |
| this.log('User accepted the install prompt', 'success'); |
| } else { |
| this.log('User dismissed the install prompt', 'warning'); |
| } |
| |
| this.deferredPrompt = null; |
| this.hideInstallPrompt(); |
| } |
| } |
| |
| checkInstallPrompt() { |
| |
| if (window.matchMedia('(display-mode: standalone)').matches) { |
| this.hideInstallPrompt(); |
| } |
| } |
| |
| updateOnlineStatus() { |
| const indicator = document.getElementById('offline-indicator'); |
| if (indicator) { |
| if (this.isOnline) { |
| indicator.classList.add('hidden'); |
| } else { |
| indicator.classList.remove('hidden'); |
| } |
| } |
| } |
| |
| log(message, type = 'system') { |
| console.log(`[PWA] ${message}`); |
| } |
| } |
| |
| |
| let grpoSystem; |
| let pwaInstaller; |
| |
| function initialize() { |
| try { |
| grpoSystem = new GRPOTrainingSystem(); |
| pwaInstaller = new PWAInstaller(); |
| |
| setupSliders(); |
| setupEventListeners(); |
| updateSliderValues(); |
| |
| |
| if ('serviceWorker' in navigator) { |
| navigator.serviceWorker.register('sw.js').then(() => { |
| console.log('Service Worker registered'); |
| }).catch(err => { |
| console.log('Service Worker registration failed:', err); |
| }); |
| } |
| |
| console.log('GRPO + VAE PWA System initialized successfully'); |
| |
| } catch (error) { |
| console.error('Initialization failed:', error); |
| const terminal = document.getElementById('terminal'); |
| if (terminal) { |
| terminal.innerHTML += `\n[ERROR] Initialization failed: ${error.message}`; |
| } |
| } |
| } |
| |
| function setupSliders() { |
| const sliders = [ |
| 'group-size', 'kl-penalty', 'advantage-clip', |
| 'cache-size', 'cache-threshold', 'mask-intensity', |
| 'feedback-window', 'latent-dim', 'vae-beta', |
| 'filter-threshold' |
| ]; |
| |
| sliders.forEach(id => { |
| const slider = document.getElementById(id); |
| const valueDisplay = document.getElementById(`${id}-value`); |
| |
| if (slider && valueDisplay) { |
| slider.addEventListener('input', (e) => { |
| const value = parseFloat(e.target.value); |
| valueDisplay.textContent = value.toFixed( |
| id.includes('kl') || id.includes('beta') ? 3 : |
| id.includes('threshold') || id.includes('intensity') ? 2 : 0 |
| ); |
| |
| if (grpoSystem) { |
| grpoSystem.generateDynamicFiles(); |
| } |
| }); |
| } |
| }); |
| } |
| |
| function updateSliderValues() { |
| document.querySelectorAll('input[type="range"]').forEach(slider => { |
| const valueDisplay = document.getElementById(`${slider.id}-value`); |
| if (valueDisplay) { |
| const value = parseFloat(slider.value); |
| valueDisplay.textContent = value.toFixed( |
| slider.id.includes('kl') || slider.id.includes('beta') ? 3 : |
| slider.id.includes('threshold') || slider.id.includes('intensity') ? 2 : 0 |
| ); |
| } |
| }); |
| } |
| |
| function setupEventListeners() { |
| |
| document.getElementById('btn-show-export').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.showExportModal(); |
| } |
| }); |
| |
| document.querySelector('.close-export').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.hideExportModal(); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.format-option').forEach(option => { |
| option.addEventListener('click', (e) => { |
| document.querySelectorAll('.format-option').forEach(opt => { |
| opt.classList.remove('selected'); |
| }); |
| e.currentTarget.classList.add('selected'); |
| |
| if (grpoSystem) { |
| grpoSystem.selectedFormat = e.currentTarget.dataset.format; |
| grpoSystem.updateExportButton(); |
| grpoSystem.generateDynamicFiles(); |
| grpoSystem.updateFileBrowser(); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('btn-final-export').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.exportModel(); |
| } |
| }); |
| |
| |
| document.getElementById('export-modal').addEventListener('click', (e) => { |
| if (e.target === document.getElementById('export-modal')) { |
| if (grpoSystem) { |
| grpoSystem.hideExportModal(); |
| } |
| } |
| }); |
| |
| |
| document.getElementById('quantize').addEventListener('change', () => { |
| if (grpoSystem) { |
| grpoSystem.generateDynamicFiles(); |
| } |
| }); |
| |
| |
| document.getElementById('policy-arch').addEventListener('change', () => { |
| if (grpoSystem) { |
| grpoSystem.generateDynamicFiles(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-init-grpo').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.initializeGRPO(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-train-grpo').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.trainGRPO(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-stop-grpo').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.stopTraining(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-train-vae').addEventListener('click', () => { |
| if (grpoSystem) { |
| grpoSystem.trainVAEFilter(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-execute').addEventListener('click', executeCode); |
| document.getElementById('sandbox-input').addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| executeCode(); |
| } |
| }); |
| |
| |
| document.getElementById('btn-install')?.addEventListener('click', () => { |
| if (pwaInstaller) { |
| pwaInstaller.installApp(); |
| } |
| }); |
| |
| document.getElementById('btn-dismiss')?.addEventListener('click', () => { |
| if (pwaInstaller) { |
| pwaInstaller.hideInstallPrompt(); |
| } |
| }); |
| |
| function executeCode() { |
| const input = document.getElementById('sandbox-input'); |
| const code = input.value.trim(); |
| |
| if (code && grpoSystem) { |
| const output = document.getElementById('sandbox-output'); |
| output.textContent += `\n>>> ${code}`; |
| |
| grpoSystem.executeInSandbox(code).then(result => { |
| output.textContent += `\n${result}`; |
| output.scrollTop = output.scrollHeight; |
| }); |
| |
| input.value = ''; |
| } |
| } |
| } |
| |
| |
| window.addEventListener('load', initialize); |
| |
| |
| window.addEventListener('beforeunload', (e) => { |
| if (window.matchMedia('(display-mode: standalone)').matches) { |
| e.preventDefault(); |
| e.returnValue = ''; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
