-
-
-
-
+ AI-TRAINER
- UNSLOTH GRPO MOE ++ + AUTONOMOUS UN SLOTH GRPO PIPELINE MAP +
+Real-time dynamic expert pruning, hard execution sandbox evaluation, and GGUF quant deployment
+
+ STATUS: IDLE
+
+ Overall Progress:
+ 0%
- Proxify-ADB Fleet Orchestrator & MoE Pruner
-
-
- VRAM:
- 6.2 / 16.0 GB
-
-
-
-
- RAM:
- 34.5 / 64.0 GB
-
-
-
-
- ADB Fleet:
- 14 / 14 Online
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
- - - AUTONOMOUS FINE-TUNING PIPELINE VISUALIZER -
-Interactive execution path with dynamic layer pruning & execution rewards
-
- STATUS: IDLE
- Progress: 0%
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
+
-
+ UNSLOTH GRPO HARD EXECUTION REWARD CONVERGENCE
- - Step 0 / 300 - -
-
+
+
+ Step 0 / 300
+
Multi-vector reward curve ($R_{exec} = +3.0$, $R_{anti-hesit} = +2.0$, Safety = $-10.0$)
+
+
+
-
+
+
+
-
-
+
-
+ DOMAIN MoE EXPERT RETENTION VS PRUNED TRIVIA EXPERTS
- - Retained: 64 / 256 - -
-
+
+
+ Retained: 64 / 256
+
+ Dropping ~68.75% dormant botany/history experts across 61 layers
+
-
+
-
-
-
+
+
+
+
+
+
+
+
+
10.30.20.0/24 PROXMOX FLEET TOPOLOGY
+ vmbr1 Isolated
+
-
-
- Control Gateway
- 10.30.20.1
- vmbr1 (Isolated Bridge)
-
-
- DHCP Pool
- .100 - .254
- dnsmasq 12h Leases
-
+
+
+ Gateway Control Node
+ 10.30.20.1
+ Port 5555 / REST API
-
-
-
-
-
-
-
-
- PIPELINE SCRIPT INSPECTOR
-
-
-
- # Loading script content...
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- LIVE LOG STREAM
-
- 0 Logs
-
-
-
- Filter:
-
-
-
-
-
+
+
+
+
+
+ PIPELINE SCRIPT INSPECTOR
+
+
-
-
-
+ # Select a script to view source code...
-
-
-
-
-
-
-
-
- TUNING KNOBS & REWARD WEIGHTS
-
-
+
+
+
+
+
+
+
+
+
+
+ LIVE LOG STREAM CONSOLE
+
+ 0 Logs
+
+
+
+
+
+ LEVEL:
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ TUNING KNOBS & REWARD WEIGHTS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hardware Memory Target:
+ 16.0 GB VRAM + 64.0 GB System RAM Streaming
+
+
+
+
+
+
+
diff --git a/public/js/pipeline.js b/public/js/pipeline.js
index be5b027..4e8a507 100644
--- a/public/js/pipeline.js
+++ b/public/js/pipeline.js
@@ -1,20 +1,22 @@
/**
- * pipeline.js - Interactive Canvas Pipeline Visualizer
- * Renders nodes, dynamic connections, glowing particle pulses, and interactive states.
+ * pipeline.js - Interactive HTML5 Canvas Pipeline Visualizer
+ * Renders glowing neon nodes, animated pulse particles, laser beams, and stage cards.
*/
class PipelineVisualizer {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
+
this.nodes = [
- { id: 'harvester', name: '1. Config Harvester', icon: '⚡', x: 0.12, y: 0.5, status: 'idle', desc: 'Scrapes /etc/dnsmasq.d & ADB nodes' },
- { id: 'pruner', name: '2. MoE Expert Pruner', icon: '✂️', x: 0.28, y: 0.5, status: 'idle', desc: 'Drops 70% dormant trivia experts (256->64)' },
- { id: 'harness', name: '3. Execution Gym', icon: '🛡️', x: 0.44, y: 0.5, status: 'idle', desc: 'Command safety sandbox & STDERR check' },
- { id: 'grpo', name: '4. Unsloth GRPO', icon: '🧠', x: 0.60, y: 0.5, status: 'idle', desc: 'Hard execution & anti-hesitation rewards' },
- { id: 'export', name: '5. GGUF Quantizer', icon: '📦', x: 0.76, y: 0.5, status: 'idle', desc: 'Dual-offload Q4_K_M GGUF packaging' },
- { id: 'telemetry', name: '6. State Eye Daemon', icon: '👁️', x: 0.90, y: 0.5, status: 'idle', desc: '10.30.20.1 live state context injector' }
+ { id: 'harvester', name: '1. Config Harvester', icon: '⚡', x: 0.10, y: 0.5, status: 'idle', color: '#00F0FF', desc: 'Scrapes /etc/dnsmasq.d & ADB nodes' },
+ { id: 'pruner', name: '2. MoE Expert Pruner', icon: '✂️', x: 0.26, y: 0.5, status: 'idle', color: '#FFB800', desc: 'Drops 70% dormant trivia experts (256->64)' },
+ { id: 'harness', name: '3. Execution Gym', icon: '🛡️', x: 0.42, y: 0.5, status: 'idle', color: '#8A2BE2', desc: 'Command safety sandbox & STDERR check' },
+ { id: 'grpo', name: '4. Unsloth GRPO', icon: '🧠', x: 0.58, y: 0.5, status: 'idle', color: '#00FF9D', desc: 'Hard execution & anti-hesitation rewards' },
+ { id: 'export', name: '5. GGUF Quantizer', icon: '📦', x: 0.74, y: 0.5, status: 'idle', color: '#C084FC', desc: 'Dual-offload Q4_K_M GGUF packaging' },
+ { id: 'telemetry', name: '6. State Eye Daemon', icon: '👁️', x: 0.90, y: 0.5, status: 'idle', color: '#00F0FF', desc: '10.30.20.1 live state context injector' }
];
+
this.particles = [];
this.activeStage = null;
this.animId = null;
@@ -27,17 +29,20 @@ class PipelineVisualizer {
resize() {
const parent = this.canvas.parentElement;
- this.canvas.width = parent.clientWidth;
- this.canvas.height = parent.clientHeight;
+ if (parent) {
+ this.canvas.width = parent.clientWidth;
+ this.canvas.height = parent.clientHeight;
+ }
}
initParticles() {
this.particles = [];
- for (let i = 0; i < 20; i++) {
+ for (let i = 0; i < 25; i++) {
this.particles.push({
progress: Math.random(),
speed: 0.003 + Math.random() * 0.004,
- size: 3 + Math.random() * 2
+ size: 3 + Math.random() * 2,
+ alpha: 0.5 + Math.random() * 0.5
});
}
}
@@ -74,7 +79,7 @@ class PipelineVisualizer {
const h = this.canvas.height;
this.ctx.clearRect(0, 0, w, h);
- // 1. Draw Connecting Lines
+ // 1. Draw Connecting Laser Beams
for (let i = 0; i < this.nodes.length - 1; i++) {
const n1 = this.nodes[i];
const n2 = this.nodes[i + 1];
@@ -85,17 +90,31 @@ class PipelineVisualizer {
const isPassed = this.activeStage && this.getStageIndex(n1.id) <= this.getStageIndex(this.activeStage);
+ // Base Beam
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
- this.ctx.strokeStyle = isPassed ? 'rgba(0, 240, 255, 0.6)' : 'rgba(51, 65, 85, 0.5)';
- this.ctx.lineWidth = isPassed ? 3 : 2;
- this.ctx.setLineDash(isPassed ? [] : [5, 5]);
+ this.ctx.strokeStyle = isPassed ? 'rgba(0, 240, 255, 0.4)' : 'rgba(30, 41, 59, 0.6)';
+ this.ctx.lineWidth = isPassed ? 4 : 2;
+ if (!isPassed) this.ctx.setLineDash([6, 6]);
this.ctx.stroke();
this.ctx.setLineDash([]);
+
+ // Neon Glow Line
+ if (isPassed) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(x1, y1);
+ this.ctx.lineTo(x2, y2);
+ this.ctx.strokeStyle = 'rgba(0, 240, 255, 0.8)';
+ this.ctx.lineWidth = 2;
+ this.ctx.shadowColor = '#00F0FF';
+ this.ctx.shadowBlur = 15;
+ this.ctx.stroke();
+ this.ctx.shadowBlur = 0;
+ }
}
- // 2. Draw Moving Data Particles
+ // 2. Draw Animated Particles on Active Segment
if (this.activeStage) {
this.particles.forEach(p => {
p.progress += p.speed;
@@ -114,40 +133,44 @@ class PipelineVisualizer {
this.ctx.beginPath();
this.ctx.arc(px, py, p.size, 0, Math.PI * 2);
- this.ctx.fillStyle = '#00F0FF';
- this.ctx.shadowColor = '#00F0FF';
- this.ctx.shadowBlur = 10;
+ this.ctx.fillStyle = '#00FF9D';
+ this.ctx.shadowColor = '#00FF9D';
+ this.ctx.shadowBlur = 12;
this.ctx.fill();
this.ctx.shadowBlur = 0;
}
});
}
- // 3. Draw Nodes
+ // 3. Draw Nodes & Cards
this.nodes.forEach(node => {
const nx = node.x * w;
const ny = node.y * h;
- // Glow effect for active/completed nodes
+ // Pulsing outer aura ring for active node
if (node.status === 'running') {
+ const pulse = 34 + Math.sin(Date.now() * 0.006) * 6;
this.ctx.beginPath();
- this.ctx.arc(nx, ny, 32, 0, Math.PI * 2);
+ this.ctx.arc(nx, ny, pulse, 0, Math.PI * 2);
this.ctx.fillStyle = 'rgba(0, 240, 255, 0.15)';
+ this.ctx.strokeStyle = 'rgba(0, 240, 255, 0.6)';
+ this.ctx.lineWidth = 2;
this.ctx.shadowColor = '#00F0FF';
- this.ctx.shadowBlur = 20;
+ this.ctx.shadowBlur = 25;
this.ctx.fill();
+ this.ctx.stroke();
this.ctx.shadowBlur = 0;
}
- // Outer Circle
+ // Outer Node Circle
this.ctx.beginPath();
- this.ctx.arc(nx, ny, 24, 0, Math.PI * 2);
+ this.ctx.arc(nx, ny, 26, 0, Math.PI * 2);
if (node.status === 'running') {
- this.ctx.fillStyle = '#0F172A';
- this.ctx.strokeStyle = '#00F0FF';
+ this.ctx.fillStyle = '#090D16';
+ this.ctx.strokeStyle = node.color;
this.ctx.lineWidth = 3;
} else if (node.status === 'completed') {
- this.ctx.fillStyle = 'rgba(0, 255, 157, 0.2)';
+ this.ctx.fillStyle = 'rgba(0, 255, 157, 0.15)';
this.ctx.strokeStyle = '#00FF9D';
this.ctx.lineWidth = 2;
} else {
@@ -158,8 +181,8 @@ class PipelineVisualizer {
this.ctx.fill();
this.ctx.stroke();
- // Icon
- this.ctx.font = '16px sans-serif';
+ // Node Icon Emoji
+ this.ctx.font = '18px sans-serif';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillText(node.icon, nx, ny);
@@ -167,12 +190,12 @@ class PipelineVisualizer {
// Node Name Label
this.ctx.font = 'bold 11px Outfit, sans-serif';
this.ctx.fillStyle = node.status === 'running' ? '#00F0FF' : node.status === 'completed' ? '#00FF9D' : '#94A3B8';
- this.ctx.fillText(node.name, nx, ny + 42);
+ this.ctx.fillText(node.name, nx, ny + 46);
- // Status Badge
+ // Status Badge Sub-label
this.ctx.font = '9px Fira Code, monospace';
- this.ctx.fillStyle = '#64748B';
- this.ctx.fillText(node.status.toUpperCase(), nx, ny + 56);
+ this.ctx.fillStyle = node.status === 'running' ? '#00FF9D' : '#64748B';
+ this.ctx.fillText(node.status.toUpperCase(), nx, ny + 62);
});
}
+
+
- 10.30.20.0/24 PROXMOX FLEET TOPOLOGY
+ vmbr1 Isolated +
-
- Control Gateway
- 10.30.20.1
-
- vmbr1 (Isolated Bridge)
-
- DHCP Pool
- .100 - .254
-
+ dnsmasq 12h Leases
-
+
-
-
-
-
-
+ Gateway Control Node
+ 10.30.20.1
+
-
-
-
-
- Port 5555 / REST API
-
-
-
- - - PIPELINE SCRIPT INSPECTOR -
- -# Loading script content...+ + - -
-
-
-
-
-
-
- LIVE LOG STREAM
-
- 0 Logs
-
-
-
-
-
- Filter:
-
-
-
-
-
+
+
-
-
+
-
+
-
-
-
+ + + PIPELINE SCRIPT INSPECTOR +
+# Select a script to view source code...
-
-
-
- TUNING KNOBS & REWARD WEIGHTS -
- + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ LIVE LOG STREAM CONSOLE
+
+ 0 Logs
+
+
+
+
+
+ LEVEL:
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/public/js/pipeline.js b/public/js/pipeline.js
index be5b027..4e8a507 100644
--- a/public/js/pipeline.js
+++ b/public/js/pipeline.js
@@ -1,20 +1,22 @@
/**
- * pipeline.js - Interactive Canvas Pipeline Visualizer
- * Renders nodes, dynamic connections, glowing particle pulses, and interactive states.
+ * pipeline.js - Interactive HTML5 Canvas Pipeline Visualizer
+ * Renders glowing neon nodes, animated pulse particles, laser beams, and stage cards.
*/
class PipelineVisualizer {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
+
this.nodes = [
- { id: 'harvester', name: '1. Config Harvester', icon: '⚡', x: 0.12, y: 0.5, status: 'idle', desc: 'Scrapes /etc/dnsmasq.d & ADB nodes' },
- { id: 'pruner', name: '2. MoE Expert Pruner', icon: '✂️', x: 0.28, y: 0.5, status: 'idle', desc: 'Drops 70% dormant trivia experts (256->64)' },
- { id: 'harness', name: '3. Execution Gym', icon: '🛡️', x: 0.44, y: 0.5, status: 'idle', desc: 'Command safety sandbox & STDERR check' },
- { id: 'grpo', name: '4. Unsloth GRPO', icon: '🧠', x: 0.60, y: 0.5, status: 'idle', desc: 'Hard execution & anti-hesitation rewards' },
- { id: 'export', name: '5. GGUF Quantizer', icon: '📦', x: 0.76, y: 0.5, status: 'idle', desc: 'Dual-offload Q4_K_M GGUF packaging' },
- { id: 'telemetry', name: '6. State Eye Daemon', icon: '👁️', x: 0.90, y: 0.5, status: 'idle', desc: '10.30.20.1 live state context injector' }
+ { id: 'harvester', name: '1. Config Harvester', icon: '⚡', x: 0.10, y: 0.5, status: 'idle', color: '#00F0FF', desc: 'Scrapes /etc/dnsmasq.d & ADB nodes' },
+ { id: 'pruner', name: '2. MoE Expert Pruner', icon: '✂️', x: 0.26, y: 0.5, status: 'idle', color: '#FFB800', desc: 'Drops 70% dormant trivia experts (256->64)' },
+ { id: 'harness', name: '3. Execution Gym', icon: '🛡️', x: 0.42, y: 0.5, status: 'idle', color: '#8A2BE2', desc: 'Command safety sandbox & STDERR check' },
+ { id: 'grpo', name: '4. Unsloth GRPO', icon: '🧠', x: 0.58, y: 0.5, status: 'idle', color: '#00FF9D', desc: 'Hard execution & anti-hesitation rewards' },
+ { id: 'export', name: '5. GGUF Quantizer', icon: '📦', x: 0.74, y: 0.5, status: 'idle', color: '#C084FC', desc: 'Dual-offload Q4_K_M GGUF packaging' },
+ { id: 'telemetry', name: '6. State Eye Daemon', icon: '👁️', x: 0.90, y: 0.5, status: 'idle', color: '#00F0FF', desc: '10.30.20.1 live state context injector' }
];
+
this.particles = [];
this.activeStage = null;
this.animId = null;
@@ -27,17 +29,20 @@ class PipelineVisualizer {
resize() {
const parent = this.canvas.parentElement;
- this.canvas.width = parent.clientWidth;
- this.canvas.height = parent.clientHeight;
+ if (parent) {
+ this.canvas.width = parent.clientWidth;
+ this.canvas.height = parent.clientHeight;
+ }
}
initParticles() {
this.particles = [];
- for (let i = 0; i < 20; i++) {
+ for (let i = 0; i < 25; i++) {
this.particles.push({
progress: Math.random(),
speed: 0.003 + Math.random() * 0.004,
- size: 3 + Math.random() * 2
+ size: 3 + Math.random() * 2,
+ alpha: 0.5 + Math.random() * 0.5
});
}
}
@@ -74,7 +79,7 @@ class PipelineVisualizer {
const h = this.canvas.height;
this.ctx.clearRect(0, 0, w, h);
- // 1. Draw Connecting Lines
+ // 1. Draw Connecting Laser Beams
for (let i = 0; i < this.nodes.length - 1; i++) {
const n1 = this.nodes[i];
const n2 = this.nodes[i + 1];
@@ -85,17 +90,31 @@ class PipelineVisualizer {
const isPassed = this.activeStage && this.getStageIndex(n1.id) <= this.getStageIndex(this.activeStage);
+ // Base Beam
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
- this.ctx.strokeStyle = isPassed ? 'rgba(0, 240, 255, 0.6)' : 'rgba(51, 65, 85, 0.5)';
- this.ctx.lineWidth = isPassed ? 3 : 2;
- this.ctx.setLineDash(isPassed ? [] : [5, 5]);
+ this.ctx.strokeStyle = isPassed ? 'rgba(0, 240, 255, 0.4)' : 'rgba(30, 41, 59, 0.6)';
+ this.ctx.lineWidth = isPassed ? 4 : 2;
+ if (!isPassed) this.ctx.setLineDash([6, 6]);
this.ctx.stroke();
this.ctx.setLineDash([]);
+
+ // Neon Glow Line
+ if (isPassed) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(x1, y1);
+ this.ctx.lineTo(x2, y2);
+ this.ctx.strokeStyle = 'rgba(0, 240, 255, 0.8)';
+ this.ctx.lineWidth = 2;
+ this.ctx.shadowColor = '#00F0FF';
+ this.ctx.shadowBlur = 15;
+ this.ctx.stroke();
+ this.ctx.shadowBlur = 0;
+ }
}
- // 2. Draw Moving Data Particles
+ // 2. Draw Animated Particles on Active Segment
if (this.activeStage) {
this.particles.forEach(p => {
p.progress += p.speed;
@@ -114,40 +133,44 @@ class PipelineVisualizer {
this.ctx.beginPath();
this.ctx.arc(px, py, p.size, 0, Math.PI * 2);
- this.ctx.fillStyle = '#00F0FF';
- this.ctx.shadowColor = '#00F0FF';
- this.ctx.shadowBlur = 10;
+ this.ctx.fillStyle = '#00FF9D';
+ this.ctx.shadowColor = '#00FF9D';
+ this.ctx.shadowBlur = 12;
this.ctx.fill();
this.ctx.shadowBlur = 0;
}
});
}
- // 3. Draw Nodes
+ // 3. Draw Nodes & Cards
this.nodes.forEach(node => {
const nx = node.x * w;
const ny = node.y * h;
- // Glow effect for active/completed nodes
+ // Pulsing outer aura ring for active node
if (node.status === 'running') {
+ const pulse = 34 + Math.sin(Date.now() * 0.006) * 6;
this.ctx.beginPath();
- this.ctx.arc(nx, ny, 32, 0, Math.PI * 2);
+ this.ctx.arc(nx, ny, pulse, 0, Math.PI * 2);
this.ctx.fillStyle = 'rgba(0, 240, 255, 0.15)';
+ this.ctx.strokeStyle = 'rgba(0, 240, 255, 0.6)';
+ this.ctx.lineWidth = 2;
this.ctx.shadowColor = '#00F0FF';
- this.ctx.shadowBlur = 20;
+ this.ctx.shadowBlur = 25;
this.ctx.fill();
+ this.ctx.stroke();
this.ctx.shadowBlur = 0;
}
- // Outer Circle
+ // Outer Node Circle
this.ctx.beginPath();
- this.ctx.arc(nx, ny, 24, 0, Math.PI * 2);
+ this.ctx.arc(nx, ny, 26, 0, Math.PI * 2);
if (node.status === 'running') {
- this.ctx.fillStyle = '#0F172A';
- this.ctx.strokeStyle = '#00F0FF';
+ this.ctx.fillStyle = '#090D16';
+ this.ctx.strokeStyle = node.color;
this.ctx.lineWidth = 3;
} else if (node.status === 'completed') {
- this.ctx.fillStyle = 'rgba(0, 255, 157, 0.2)';
+ this.ctx.fillStyle = 'rgba(0, 255, 157, 0.15)';
this.ctx.strokeStyle = '#00FF9D';
this.ctx.lineWidth = 2;
} else {
@@ -158,8 +181,8 @@ class PipelineVisualizer {
this.ctx.fill();
this.ctx.stroke();
- // Icon
- this.ctx.font = '16px sans-serif';
+ // Node Icon Emoji
+ this.ctx.font = '18px sans-serif';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillText(node.icon, nx, ny);
@@ -167,12 +190,12 @@ class PipelineVisualizer {
// Node Name Label
this.ctx.font = 'bold 11px Outfit, sans-serif';
this.ctx.fillStyle = node.status === 'running' ? '#00F0FF' : node.status === 'completed' ? '#00FF9D' : '#94A3B8';
- this.ctx.fillText(node.name, nx, ny + 42);
+ this.ctx.fillText(node.name, nx, ny + 46);
- // Status Badge
+ // Status Badge Sub-label
this.ctx.font = '9px Fira Code, monospace';
- this.ctx.fillStyle = '#64748B';
- this.ctx.fillText(node.status.toUpperCase(), nx, ny + 56);
+ this.ctx.fillStyle = node.status === 'running' ? '#00FF9D' : '#64748B';
+ this.ctx.fillText(node.status.toUpperCase(), nx, ny + 62);
});
}
+
+
+
+ + TUNING KNOBS & REWARD WEIGHTS +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hardware Memory Target:
+ 16.0 GB VRAM + 64.0 GB System RAM Streaming
+
+
+
+
+