Spaces:

deedrop1140
/

MachineLearningAlgorithms

Build error

App Files Files Community

deedrop1140 commited on 29 days ago

Commit

0406d78

verified ·

1 Parent(s): b96bb0c

Upload SVM_Simulator_3D.html

Browse files

Files changed (1) hide show

templates/SVM_Simulator_3D.html +624 -0

templates/SVM_Simulator_3D.html ADDED Viewed

	@@ -0,0 +1,624 @@

+<!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>
+    <!-- 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>