drjones/AI--trainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp Web UI: Added Tailwind CSS CDN, cyberpunk glassmorphism layout, glowing neon visualizers, and enhanced telemetry gauges

Browse Source
This commit is contained in:
drjones
2026-08-13 06:46:03 -07:00
parent 1ea2a5dc91
commit 25a8af8d4e
3 changed files with 420 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
public/js/pipeline.js
View File

@@ -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);
});
}