|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
<title>SVM 3D Simulator</title>
|
|
|
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
|
|
|
|
|
<script type="importmap">
|
|
|
{
|
|
|
"imports": {
|
|
|
"react": "https://esm.sh/react@18.2.0",
|
|
|
"react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
|
|
|
"react-dom": "https://esm.sh/react-dom@18.2.0",
|
|
|
"three": "https://esm.sh/three@0.161.0",
|
|
|
"@react-three/fiber": "https://esm.sh/@react-three/fiber@8.15.16?external=react,react-dom,three",
|
|
|
"@react-three/drei": "https://esm.sh/@react-three/drei@9.102.0?external=react,react-dom,three,@react-three/fiber"
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
{% raw %}
|
|
|
|
|
|
<style>
|
|
|
:root {
|
|
|
--font-sans: 'Inter', sans-serif;
|
|
|
--font-display: 'Outfit', sans-serif;
|
|
|
}
|
|
|
body {
|
|
|
font-family: var(--font-sans);
|
|
|
background-color: #020817;
|
|
|
color: #f8fafc;
|
|
|
margin: 0;
|
|
|
overflow: hidden;
|
|
|
touch-action: none;
|
|
|
}
|
|
|
.font-display { font-family: var(--font-display); }
|
|
|
|
|
|
|
|
|
.glass-panel {
|
|
|
background: rgba(15, 23, 42, 0.75);
|
|
|
backdrop-filter: blur(12px);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 0.75rem;
|
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes slideUp {
|
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
.animate-slide-up {
|
|
|
animation: slideUp 0.6s ease-out forwards;
|
|
|
}
|
|
|
|
|
|
@keyframes pulseGlow {
|
|
|
0%, 100% { box-shadow: 0 0 5px #ffd60a; }
|
|
|
50% { box-shadow: 0 0 15px #ffd60a; }
|
|
|
}
|
|
|
.animate-pulse-glow {
|
|
|
animation: pulseGlow 2s infinite;
|
|
|
}
|
|
|
|
|
|
|
|
|
.neon-text-primary { text-shadow: 0 0 10px rgba(56, 189, 248, 0.5); }
|
|
|
.neon-text-accent { text-shadow: 0 0 10px rgba(255, 214, 10, 0.5); }
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { width: 4px; }
|
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
|
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
|
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
|
|
|
|
|
|
|
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
|
|
|
|
|
.glow-primary { box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); }
|
|
|
.glow-accent { box-shadow: 0 0 15px rgba(255, 214, 10, 0.3); }
|
|
|
|
|
|
.bg-classA { background-color: #00d4ff; }
|
|
|
.bg-classB { background-color: #ff006e; }
|
|
|
.bg-supportVector { background-color: #ffd60a; }
|
|
|
.bg-hyperplane { background-color: #44ff44; }
|
|
|
.bg-marginLineSVM { background-color: #ef4444; }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="root"></div>
|
|
|
|
|
|
<script type="text/babel" data-type="module">
|
|
|
import React, { useState, useEffect, useCallback, useMemo, useRef, Suspense, createContext, useContext } from 'react';
|
|
|
import { createRoot } from 'react-dom/client';
|
|
|
import * as THREE from 'three';
|
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
|
import { OrbitControls, Stars, Grid } from '@react-three/drei';
|
|
|
|
|
|
|
|
|
const PlayIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
|
|
);
|
|
|
const RotateCcwIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74-2.74L3 12"/><path d="M3 3v9h9"/></svg>
|
|
|
);
|
|
|
const EyeIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
|
);
|
|
|
const EyeOffIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
|
|
|
);
|
|
|
const LayersIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
|
|
|
);
|
|
|
const ChevronLeftIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m15 18-6-6 6-6"/></svg>
|
|
|
);
|
|
|
const ChevronRightIcon = ({ className }) => (
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m9 18 6-6-6-6"/></svg>
|
|
|
);
|
|
|
|
|
|
|
|
|
const generateSVMData = () => {
|
|
|
const points = [];
|
|
|
const w1 = 0.5, w2 = -0.3, b = 0.5;
|
|
|
|
|
|
for(let i=0; i<40; i++) {
|
|
|
const x = (Math.random() - 0.5) * 8;
|
|
|
const z = (Math.random() - 0.5) * 8;
|
|
|
const boundaryY = -(w1 * x + w2 * z + b);
|
|
|
const isClassA = Math.random() > 0.5;
|
|
|
const gap = 0.8 + Math.random() * 2;
|
|
|
const y = isClassA ? boundaryY + gap : boundaryY - gap;
|
|
|
points.push({ position: [x, y, z], classLabel: isClassA ? 1 : -1 });
|
|
|
}
|
|
|
return points;
|
|
|
};
|
|
|
|
|
|
const computeHyperplane = (dataPoints) => ({ w1: 0.5, w2: -0.3, b: 0.5 });
|
|
|
|
|
|
const findSupportVectors = (dataPoints, params, margin) => {
|
|
|
const indices = [];
|
|
|
const { w1, w2, b } = params;
|
|
|
dataPoints.forEach((point, index) => {
|
|
|
const [x, y, z] = point.position;
|
|
|
const predictedY = -(w1 * x + w2 * z + b);
|
|
|
const distance = Math.abs(y - predictedY);
|
|
|
if (distance < margin + 0.5) indices.push(index);
|
|
|
});
|
|
|
return indices;
|
|
|
};
|
|
|
|
|
|
|
|
|
const Button = ({ children, variant = 'default', size = 'default', className = '', ...props }) => {
|
|
|
const baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 touch-manipulation";
|
|
|
const variants = {
|
|
|
default: "bg-slate-100 text-slate-900 hover:bg-slate-100/90 shadow",
|
|
|
outline: "border border-slate-700 bg-slate-900/50 hover:bg-slate-800 text-slate-100",
|
|
|
ghost: "hover:bg-slate-800 text-slate-100"
|
|
|
};
|
|
|
const sizes = {
|
|
|
default: "h-8 md:h-9 px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm",
|
|
|
sm: "h-7 md:h-8 rounded-md px-2 md:px-3 text-[10px] md:text-xs",
|
|
|
icon: "h-8 w-8 md:h-9 md:w-9"
|
|
|
};
|
|
|
return (
|
|
|
<button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props}>
|
|
|
{children}
|
|
|
</button>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
|
|
|
const ToastContext = createContext(null);
|
|
|
const ToastProvider = ({ children }) => {
|
|
|
const [toasts, setToasts] = useState([]);
|
|
|
|
|
|
const addToast = useCallback((message, type = 'info') => {
|
|
|
const id = Date.now();
|
|
|
setToasts(prev => [...prev, { id, message, type }]);
|
|
|
setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3000);
|
|
|
}, []);
|
|
|
|
|
|
return (
|
|
|
<ToastContext.Provider value={addToast}>
|
|
|
{children}
|
|
|
<div className="fixed bottom-20 left-4 right-4 md:bottom-4 md:right-4 md:left-auto md:w-auto z-[60] flex flex-col gap-2 pointer-events-none">
|
|
|
{toasts.map(t => (
|
|
|
<div key={t.id} className={`p-4 rounded-lg shadow-lg text-sm font-medium animate-slide-up mx-auto md:mx-0 w-full md:w-72 text-center md:text-left ${
|
|
|
t.type === 'success' ? 'bg-green-600/90 text-white backdrop-blur' : 'bg-slate-800/90 text-white border border-slate-700 backdrop-blur'
|
|
|
}`}>{t.message}</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</ToastContext.Provider>
|
|
|
);
|
|
|
};
|
|
|
const useToast = () => {
|
|
|
const context = useContext(ToastContext);
|
|
|
if (!context) throw new Error("useToast must be used within ToastProvider");
|
|
|
return { info: (msg) => context(msg, 'info'), success: (msg) => context(msg, 'success') };
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const DataPoint = ({ position, classLabel, isSupportVector }) => {
|
|
|
const meshRef = useRef(null);
|
|
|
const glowRef = useRef(null);
|
|
|
useFrame((state) => {
|
|
|
if (meshRef.current) {
|
|
|
meshRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 2 + position[0]) * 0.03;
|
|
|
if (isSupportVector) meshRef.current.scale.setScalar(1 + Math.sin(state.clock.elapsedTime * 3) * 0.15);
|
|
|
}
|
|
|
if (glowRef.current && isSupportVector) glowRef.current.rotation.z = state.clock.elapsedTime * 0.5;
|
|
|
});
|
|
|
const color = classLabel === 1 ? "#00d4ff" : "#ff006e";
|
|
|
const size = isSupportVector ? 0.28 : 0.22;
|
|
|
return (
|
|
|
<group position={position}>
|
|
|
<mesh ref={meshRef}>
|
|
|
<sphereGeometry args={[size, 32, 32]} />
|
|
|
<meshPhongMaterial color={color} emissive={color} emissiveIntensity={isSupportVector ? 1 : 0.6} shininess={100} />
|
|
|
</mesh>
|
|
|
<mesh>
|
|
|
<sphereGeometry args={[size * 0.6, 16, 16]} />
|
|
|
<meshBasicMaterial color={color} transparent opacity={0.9} />
|
|
|
</mesh>
|
|
|
<mesh>
|
|
|
<sphereGeometry args={[size * 1.4, 16, 16]} />
|
|
|
<meshBasicMaterial color={color} transparent opacity={0.15} />
|
|
|
</mesh>
|
|
|
{isSupportVector && (
|
|
|
<mesh ref={glowRef} rotation={[Math.PI / 2, 0, 0]}>
|
|
|
<torusGeometry args={[0.4, 0.03, 16, 32]} />
|
|
|
<meshBasicMaterial color="#ffd60a" transparent opacity={0.8} />
|
|
|
</mesh>
|
|
|
)}
|
|
|
</group>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const Hyperplane = ({ params }) => {
|
|
|
const meshRef = useRef(null);
|
|
|
useFrame((state) => {
|
|
|
if (meshRef.current) meshRef.current.material.emissiveIntensity = 0.3 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
|
});
|
|
|
const geometry = useMemo(() => {
|
|
|
const { w1, w2, b } = params;
|
|
|
const size = 7;
|
|
|
const segments = 30;
|
|
|
const positions = [], colors = [], indices = [];
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
|
for (let j = 0; j <= segments; j++) {
|
|
|
const x = (i / segments - 0.5) * size * 2;
|
|
|
const z = (j / segments - 0.5) * size * 2;
|
|
|
const y = -(w1 * x + w2 * z + b);
|
|
|
const clampedY = Math.max(-4, Math.min(4, y));
|
|
|
positions.push(x, clampedY, z);
|
|
|
const normalizedY = (clampedY + 4) / 8;
|
|
|
const normalizedX = i / segments;
|
|
|
colors.push(0.2 + normalizedX * 0.8, 0.8 - normalizedY * 0.6, 0.4);
|
|
|
}
|
|
|
}
|
|
|
for (let i = 0; i < segments; i++) {
|
|
|
for (let j = 0; j < segments; j++) {
|
|
|
const a = i * (segments + 1) + j;
|
|
|
const b_idx = a + 1;
|
|
|
const c = a + segments + 1;
|
|
|
const d = c + 1;
|
|
|
indices.push(a, b_idx, c);
|
|
|
indices.push(b_idx, d, c);
|
|
|
}
|
|
|
}
|
|
|
const geo = new THREE.BufferGeometry();
|
|
|
geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
|
|
|
geo.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
|
|
|
geo.setIndex(indices);
|
|
|
geo.computeVertexNormals();
|
|
|
return geo;
|
|
|
}, [params]);
|
|
|
const wireframeGeometry = useMemo(() => new THREE.WireframeGeometry(geometry), [geometry]);
|
|
|
return (
|
|
|
<group>
|
|
|
<mesh ref={meshRef} geometry={geometry}>
|
|
|
<meshPhongMaterial vertexColors transparent opacity={0.6} side={THREE.DoubleSide} emissive="#44ff44" emissiveIntensity={0.2} shininess={100} />
|
|
|
</mesh>
|
|
|
<lineSegments geometry={wireframeGeometry}>
|
|
|
<lineBasicMaterial color="#00ffff" transparent opacity={0.3} />
|
|
|
</lineSegments>
|
|
|
</group>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const MarginPlanes = ({ params, margin }) => {
|
|
|
const createPlaneGeometry = (offset) => {
|
|
|
const { w1, w2, b } = params;
|
|
|
const size = 6;
|
|
|
const segments = 20;
|
|
|
const positions = [], indices = [];
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
|
for (let j = 0; j <= segments; j++) {
|
|
|
const x = (i / segments - 0.5) * size * 2;
|
|
|
const z = (j / segments - 0.5) * size * 2;
|
|
|
const y = -(w1 * x + w2 * z + b) + offset;
|
|
|
positions.push(x, Math.max(-3, Math.min(3, y)), z);
|
|
|
}
|
|
|
}
|
|
|
for (let i = 0; i < segments; i++) {
|
|
|
for (let j = 0; j < segments; j++) {
|
|
|
const a = i * (segments + 1) + j;
|
|
|
const b_idx = a + 1;
|
|
|
const c = a + segments + 1;
|
|
|
const d = c + 1;
|
|
|
indices.push(a, b_idx, c);
|
|
|
indices.push(b_idx, d, c);
|
|
|
}
|
|
|
}
|
|
|
const geo = new THREE.BufferGeometry();
|
|
|
geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
|
|
|
geo.setIndex(indices);
|
|
|
geo.computeVertexNormals();
|
|
|
return geo;
|
|
|
};
|
|
|
const upperGeometry = useMemo(() => createPlaneGeometry(margin), [params, margin]);
|
|
|
const lowerGeometry = useMemo(() => createPlaneGeometry(-margin), [params, margin]);
|
|
|
const color = '#ef4444';
|
|
|
return (
|
|
|
<>
|
|
|
<mesh geometry={upperGeometry}><meshStandardMaterial color={color} transparent opacity={0.4} side={THREE.DoubleSide} emissive={color} emissiveIntensity={0.2} /></mesh>
|
|
|
<mesh geometry={lowerGeometry}><meshStandardMaterial color={color} transparent opacity={0.4} side={THREE.DoubleSide} emissive={color} emissiveIntensity={0.2} /></mesh>
|
|
|
</>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const GridFloor = () => (
|
|
|
<Grid position={[0, -3, 0]} args={[20, 20]} cellSize={1} cellThickness={0.5} cellColor="#1a3a4a" sectionSize={5} sectionThickness={1} sectionColor="#2a5a6a" fadeDistance={25} fadeStrength={1} infiniteGrid={true} />
|
|
|
);
|
|
|
|
|
|
const Scene3D = ({ dataPoints, supportVectorIndices, showHyperplane, showMargins, hyperplaneParams, margin, sceneRotation }) => (
|
|
|
<Canvas camera={{ position: [8, 6, 8], fov: 50 }}>
|
|
|
<Suspense fallback={null}>
|
|
|
<group rotation={[0, sceneRotation, 0]}>
|
|
|
<ambientLight intensity={0.4} />
|
|
|
<pointLight position={[10, 10, 10]} intensity={1.5} color="#00d4ff" />
|
|
|
<pointLight position={[-10, 10, -10]} intensity={1} color="#ff006e" />
|
|
|
<pointLight position={[0, -10, 0]} intensity={0.5} color="#ffd60a" />
|
|
|
<directionalLight position={[5, 5, 5]} intensity={0.8} />
|
|
|
<spotLight position={[0, 15, 0]} intensity={1} angle={0.5} penumbra={0.5} color="#ffffff" />
|
|
|
<Stars radius={100} depth={50} count={3000} factor={4} saturation={0} fade speed={1} />
|
|
|
<GridFloor />
|
|
|
{dataPoints.map((point, index) => (
|
|
|
<DataPoint key={index} position={point.position} classLabel={point.classLabel} isSupportVector={supportVectorIndices.includes(index)} />
|
|
|
))}
|
|
|
{showHyperplane && <Hyperplane params={hyperplaneParams} />}
|
|
|
{showMargins && showHyperplane && <MarginPlanes params={hyperplaneParams} margin={margin} />}
|
|
|
</group>
|
|
|
<OrbitControls enablePan={true} enableZoom={true} enableRotate={true} minDistance={5} maxDistance={30} autoRotateSpeed={0.5} />
|
|
|
</Suspense>
|
|
|
</Canvas>
|
|
|
);
|
|
|
|
|
|
|
|
|
const ControlPanel = ({
|
|
|
showHyperplane, onToggleHyperplane,
|
|
|
showMargins, onToggleMargins,
|
|
|
onRegenerateData, onRunAlgorithm,
|
|
|
isRunning, margin, onMarginChange,
|
|
|
isResultView, onResetView
|
|
|
}) => {
|
|
|
|
|
|
if (isResultView) {
|
|
|
return (
|
|
|
<div className="glass-panel p-3 md:p-4 animate-slide-up w-full text-center">
|
|
|
<div className="bg-green-500/20 border border-green-500/50 rounded-lg p-2 mb-3">
|
|
|
<p className="text-green-400 text-sm font-semibold flex items-center justify-center gap-2">
|
|
|
<span className="relative flex h-3 w-3">
|
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
|
|
</span>
|
|
|
Separation Complete
|
|
|
</p>
|
|
|
</div>
|
|
|
<Button onClick={onResetView} className="w-full bg-slate-700 hover:bg-slate-600 text-white shadow-lg h-10 font-bold border border-slate-600">
|
|
|
<RotateCcwIcon className="w-4 h-4 mr-2" />
|
|
|
Continue Editing
|
|
|
</Button>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
|
|
|
return (
|
|
|
<div className="glass-panel p-3 md:p-4 space-y-2 md:space-y-4 animate-slide-up w-full">
|
|
|
<h2 className="font-display text-lg font-bold text-white neon-text-primary hidden md:block">Controls</h2>
|
|
|
<div className="space-y-2">
|
|
|
<Button onClick={onRunAlgorithm} disabled={isRunning} className="w-full bg-green-500 hover:bg-green-600 text-white glow-primary font-semibold shadow-lg">
|
|
|
<PlayIcon className="w-4 h-4 mr-2" />
|
|
|
{isRunning ? "Running..." : "Find Hyperplane"}
|
|
|
</Button>
|
|
|
<Button onClick={onRegenerateData} variant="outline" className="w-full shadow-lg">
|
|
|
<RotateCcwIcon className="w-4 h-4 mr-2" />
|
|
|
New Data Points
|
|
|
</Button>
|
|
|
</div>
|
|
|
<div className="space-y-2">
|
|
|
<label className="text-sm text-slate-400 hidden md:block">Visibility</label>
|
|
|
<div className="flex gap-2">
|
|
|
<Button variant={showHyperplane ? "default" : "outline"} size="sm" onClick={onToggleHyperplane} className="flex-1">
|
|
|
{showHyperplane ? <EyeIcon className="w-4 h-4" /> : <EyeOffIcon className="w-4 h-4" />}
|
|
|
<span className="ml-2">Plane</span>
|
|
|
</Button>
|
|
|
<Button variant={showMargins ? "default" : "outline"} size="sm" onClick={onToggleMargins} className="flex-1">
|
|
|
<LayersIcon className="w-4 h-4" />
|
|
|
<span className="ml-2">Margins</span>
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="space-y-2 hidden md:block">
|
|
|
<label className="text-sm text-slate-400">Margin Width: {margin.toFixed(2)}</label>
|
|
|
<input type="range" min="0.3" max="2" step="0.1" value={margin} onChange={(e) => onMarginChange(parseFloat(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500" />
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const LegendPanel = () => (
|
|
|
<div className="glass-panel p-3 md:p-4 space-y-2 md:space-y-3 animate-slide-up w-full">
|
|
|
<h2 className="font-display text-lg font-bold hidden md:block">Legend</h2>
|
|
|
<div className="space-y-2 text-xs md:text-sm">
|
|
|
<div className="flex items-center gap-3"><div className="w-4 h-4 rounded-full bg-classA glow-primary flex-shrink-0" /><span className="text-slate-200">Class A (Positive)</span></div>
|
|
|
<div className="flex items-center gap-3"><div className="w-4 h-4 rounded-full bg-classB shadow-[0_0_10px_#ff006e] flex-shrink-0" /><span className="text-slate-200">Class B (Negative)</span></div>
|
|
|
<div className="flex items-center gap-3"><div className="w-4 h-4 rounded-full bg-supportVector glow-accent animate-pulse-glow flex-shrink-0" /><span className="text-slate-200">Support Vectors</span></div>
|
|
|
<div className="flex items-center gap-3"><div className="w-4 h-2 rounded bg-hyperplane opacity-60 flex-shrink-0" /><span className="text-slate-200">Decision Boundary</span></div>
|
|
|
<div className="flex items-center gap-3"><div className="w-4 h-2 rounded opacity-80 bg-marginLineSVM flex-shrink-0" /><span className="text-slate-200">Margin Boundaries (Red)</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
|
|
|
const TutorialPanel = () => {
|
|
|
const [currentStep, setCurrentStep] = useState(0);
|
|
|
const svmSteps = [
|
|
|
{ title: "What is SVM?", content: "Support Vector Machine (SVM) finds the best boundary (hyperplane) to separate two classes." },
|
|
|
{ title: "Data Points", content: "Cyan points are Class A, Magenta are Class B. The goal is to separate them cleanly." },
|
|
|
{ title: "The Hyperplane", content: "The green transparent surface is the decision boundary. One side is A, the other B." },
|
|
|
{ title: "Support Vectors", content: "YELLOW glowing points are Support Vectors! They define where the boundary sits." },
|
|
|
{ title: "The Margin (Red)", content: "RED planes show the MARGIN. SVM maximizes this street width. Points should be OUTSIDE." },
|
|
|
{ title: "Max Margin", content: "A wider margin means the model is more confident and generalizes better." },
|
|
|
];
|
|
|
const steps = svmSteps;
|
|
|
const nextStep = () => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1));
|
|
|
const prevStep = () => setCurrentStep(prev => Math.max(prev - 1, 0));
|
|
|
return (
|
|
|
<div className="glass-panel p-3 md:p-4 space-y-2 md:space-y-4 animate-slide-up w-full">
|
|
|
<div className="flex items-center justify-between">
|
|
|
<h2 className="font-display text-md md:text-lg font-bold neon-text-accent">Learn SVM</h2>
|
|
|
<span className="text-xs text-slate-400">{currentStep + 1} / {steps.length}</span>
|
|
|
</div>
|
|
|
<div className="min-h-[60px] md:min-h-[100px]">
|
|
|
<h3 className="font-display text-sm md:text-md text-cyan-400 mb-1 md:mb-2 font-semibold">{steps[currentStep].title}</h3>
|
|
|
<p className="text-xs md:text-sm text-slate-300 leading-relaxed">{steps[currentStep].content}</p>
|
|
|
</div>
|
|
|
<div className="flex items-center justify-between gap-2">
|
|
|
<Button variant="outline" size="sm" onClick={prevStep} disabled={currentStep === 0}><ChevronLeftIcon className="w-4 h-4" /></Button>
|
|
|
<div className="flex gap-1">
|
|
|
{steps.map((_, i) => (
|
|
|
<div key={i} className={`w-1.5 h-1.5 rounded-full transition-all ${i === currentStep ? "bg-yellow-400 scale-125" : i < currentStep ? "bg-cyan-500/50" : "bg-slate-700"}`} />
|
|
|
))}
|
|
|
</div>
|
|
|
<Button variant="outline" size="sm" onClick={nextStep} disabled={currentStep === steps.length - 1}><ChevronRightIcon className="w-4 h-4" /></Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
|
|
|
const App = () => {
|
|
|
const toast = useToast();
|
|
|
const [dataPoints, setDataPoints] = useState([]);
|
|
|
const [supportVectorIndices, setSupportVectorIndices] = useState([]);
|
|
|
const [hyperplaneParams, setHyperplaneParams] = useState({ w1: 0.3, w2: 0.1, b: 0 });
|
|
|
const [margin, setMargin] = useState(0.8);
|
|
|
const [showHyperplane, setShowHyperplane] = useState(false);
|
|
|
const [showMargins, setShowMargins] = useState(false);
|
|
|
const [isRunning, setIsRunning] = useState(false);
|
|
|
const [sceneRotation, setSceneRotation] = useState(0);
|
|
|
|
|
|
|
|
|
const [isResultView, setIsResultView] = useState(false);
|
|
|
|
|
|
const regenerateData = useCallback(() => {
|
|
|
const newData = generateSVMData();
|
|
|
setDataPoints(newData);
|
|
|
setSupportVectorIndices([]);
|
|
|
setShowHyperplane(false);
|
|
|
setShowMargins(false);
|
|
|
setIsResultView(false);
|
|
|
if(dataPoints.length > 0) toast.success(`Generated ${newData.length} new data points!`);
|
|
|
}, [toast, dataPoints.length]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
regenerateData();
|
|
|
}, []);
|
|
|
|
|
|
const runAlgorithm = async () => {
|
|
|
setIsRunning(true);
|
|
|
toast.info("Finding optimal hyperplane...");
|
|
|
await new Promise(r => setTimeout(r, 800));
|
|
|
|
|
|
const params = computeHyperplane(dataPoints);
|
|
|
setHyperplaneParams(params);
|
|
|
setShowHyperplane(true);
|
|
|
|
|
|
await new Promise(r => setTimeout(r, 500));
|
|
|
|
|
|
const svIndices = findSupportVectors(dataPoints, params, margin);
|
|
|
setSupportVectorIndices(svIndices);
|
|
|
setShowMargins(true);
|
|
|
|
|
|
setIsRunning(false);
|
|
|
setIsResultView(true);
|
|
|
toast.success(`Found ${svIndices.length} support vectors!`);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="h-[100dvh] w-full bg-slate-950 overflow-hidden relative font-sans text-slate-100">
|
|
|
{/* Header */}
|
|
|
<header className="absolute top-0 left-0 right-0 z-40 p-3 md:p-6 pointer-events-none bg-gradient-to-b from-slate-950/80 to-transparent">
|
|
|
<div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-2 md:gap-4 pointer-events-auto">
|
|
|
<div className="text-center md:text-left">
|
|
|
<h1 className="font-display text-xl md:text-3xl font-bold text-white neon-text-primary">SVM 3D Simulator</h1>
|
|
|
<p className="text-xs md:text-sm text-slate-400 mt-1 hidden md:block">Interactive Machine Learning Visualization</p>
|
|
|
</div>
|
|
|
<div className="hidden md:flex items-center gap-2 text-sm text-slate-500 backdrop-blur-sm bg-slate-900/30 p-2 rounded-full border border-slate-800">
|
|
|
<span>🖱️ Drag to rotate</span>
|
|
|
<span>•</span>
|
|
|
<span>🔍 Scroll to zoom</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
{/* 3D Scene */}
|
|
|
<div className="absolute inset-0 z-0">
|
|
|
<Scene3D
|
|
|
dataPoints={dataPoints}
|
|
|
supportVectorIndices={supportVectorIndices}
|
|
|
showHyperplane={showHyperplane}
|
|
|
showMargins={showMargins}
|
|
|
hyperplaneParams={hyperplaneParams}
|
|
|
margin={margin}
|
|
|
sceneRotation={sceneRotation}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
{/* Controls Container: Mobile Top, Desktop Left */}
|
|
|
<div className="absolute left-4 right-4 md:right-auto top-[4.5rem] md:top-28 md:w-64 space-y-3 md:space-y-4 z-30 max-h-[45vh] overflow-y-auto md:max-h-none md:overflow-visible no-scrollbar">
|
|
|
<ControlPanel
|
|
|
showHyperplane={showHyperplane}
|
|
|
onToggleHyperplane={() => setShowHyperplane(!showHyperplane)}
|
|
|
showMargins={showMargins}
|
|
|
onToggleMargins={() => setShowMargins(!showMargins)}
|
|
|
onRegenerateData={regenerateData}
|
|
|
onRunAlgorithm={runAlgorithm}
|
|
|
isRunning={isRunning}
|
|
|
margin={margin}
|
|
|
onMarginChange={setMargin}
|
|
|
isResultView={isResultView}
|
|
|
onResetView={() => setIsResultView(false)}
|
|
|
/>
|
|
|
{/* Hide legend in result view on mobile to save space if needed, though instruction said only buttons invisible */}
|
|
|
<LegendPanel />
|
|
|
</div>
|
|
|
|
|
|
{/* Tutorial Container: Mobile Bottom, Desktop Right */}
|
|
|
<div className="absolute left-4 right-4 md:left-auto md:right-4 bottom-20 md:bottom-auto md:top-28 md:w-72 z-20">
|
|
|
<TutorialPanel />
|
|
|
</div>
|
|
|
|
|
|
{/* Rotation Slider: Hidden on Mobile */}
|
|
|
<div className="hidden md:flex absolute right-6 top-1/2 -translate-y-1/2 z-20 items-center justify-center bg-slate-900/80 p-3 rounded-xl border border-slate-700 backdrop-blur-md">
|
|
|
<div className="flex flex-col items-center gap-2 h-64 w-8 relative">
|
|
|
<span className="text-xs font-medium text-slate-300 absolute -top-6">Rot</span>
|
|
|
<input
|
|
|
type="range"
|
|
|
min={0}
|
|
|
max={Math.PI * 2}
|
|
|
step={0.01}
|
|
|
value={sceneRotation}
|
|
|
onChange={(e) => setSceneRotation(parseFloat(e.target.value))}
|
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-56 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500 -rotate-90 origin-center"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Footer */}
|
|
|
<footer className="absolute bottom-4 left-0 right-0 z-10 text-center pointer-events-none">
|
|
|
<div className="absolute left-1/2 -translate-x-1/2 bottom-0 w-full flex flex-col items-center gap-2 pointer-events-auto pb-4 md:pb-0">
|
|
|
<p className="hidden md:block text-xs text-slate-500 backdrop-blur-sm px-3 py-1 rounded-full mb-2">
|
|
|
Click "Find Hyperplane" to see the algorithm in action!
|
|
|
</p>
|
|
|
|
|
|
<a href="/svm" onClick={() => {}} className="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 md:py-2 md:px-6 rounded-xl text-sm transition-all duration-150 shadow-[0_4px_0_rgb(29,78,216)] active:shadow-none active:translate-y-[4px] uppercase tracking-wider">
|
|
|
Back to Core
|
|
|
</a>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const Root = () => (<ToastProvider><App /></ToastProvider>);
|
|
|
const root = createRoot(document.getElementById('root'));
|
|
|
root.render(<Root />);
|
|
|
</script>
|
|
|
{% endraw %}
|
|
|
</body>
|
|
|
</html> |
