|
|
<!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/[email protected]/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> |
|
|
|
