Download templates/SVM_Simulator_3D.html from deedrop1140/machinelearningalgorithms: direct link, hf CLI and curl.
- Browser
- Download file 36.6 kB
-
https://huggingface.co/spaces/deedrop1140/machinelearningalgorithms/resolve/main/templates/SVM_Simulator_3D.html
- Command line
-
hf download hf://spaces/deedrop1140/machinelearningalgorithms/templates/SVM_Simulator_3D.html
-
curl -L -o SVM_Simulator_3D.html https://huggingface.co/spaces/deedrop1140/machinelearningalgorithms/resolve/main/templates/SVM_Simulator_3D.html
36.6 kB
| <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> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Babel for JSX (Standalone) --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <!-- Import Map to resolve dependencies --> | |
| <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; /* Prevent scrolling on mobile while interacting with canvas */ | |
| } | |
| .font-display { font-family: var(--font-display); } | |
| /* Glassmorphism */ | |
| .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); | |
| } | |
| /* Animations */ | |
| @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 Effects */ | |
| .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); } | |
| /* Custom Scrollbar */ | |
| ::-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); } | |
| /* Hide scrollbar for clean mobile UI but allow scroll */ | |
| .no-scrollbar::-webkit-scrollbar { display: none; } | |
| .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| /* Button Glows */ | |
| .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'; | |
| // --- Utils: Icons --- | |
| 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> | |
| ); | |
| // --- Utils: SVM Logic --- | |
| 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; | |
| }; | |
| // --- UI Components --- | |
| 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> | |
| ); | |
| }; | |
| // Toast System | |
| 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') }; | |
| }; | |
| // --- 3D Components --- | |
| 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> | |
| ); | |
| // --- Panel Components --- | |
| const ControlPanel = ({ | |
| showHyperplane, onToggleHyperplane, | |
| showMargins, onToggleMargins, | |
| onRegenerateData, onRunAlgorithm, | |
| isRunning, margin, onMarginChange, | |
| isResultView, onResetView | |
| }) => { | |
| // NEW: Result View Logic for Mobile Optimization | |
| 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> | |
| ); | |
| } | |
| // Default View | |
| 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> | |
| ); | |
| }; | |
| // --- Main App Component --- | |
| 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); | |
| // New state for mobile toggle | |
| const [isResultView, setIsResultView] = useState(false); | |
| const regenerateData = useCallback(() => { | |
| const newData = generateSVMData(); | |
| setDataPoints(newData); | |
| setSupportVectorIndices([]); | |
| setShowHyperplane(false); | |
| setShowMargins(false); | |
| setIsResultView(false); // Reset view on new data | |
| 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); // Switch to result view | |
| 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> |