Spaces:

deedrop1140
/

MachineLearningAlgorithms

Running

App Files Files Community

deedrop1140 commited on 14 days ago

Commit

42001a3

verified ·

1 Parent(s): fc49ccf

Upload 18 files

Browse files

Files changed (18) hide show

templates/Apriori-Simulator-three.html +446 -0
templates/Eclat-Algorithm-three.html +858 -0
templates/Gaussian-Mixture-Models.html +46 -0
templates/Gradient-Descen.html +47 -0
templates/Independent-Component-Analysis.html +47 -0
templates/Linear-Discriminant-Analysis.html +47 -0
templates/Naive-Bayes-Simulator.html +730 -0
templates/Neural-Networks-for-Classification-three.html +916 -0
templates/Neural-Networks-for-Classification.html +48 -0
templates/Optimization.html +12 -0
templates/XGBoost-Regression.html +94 -0
templates/gmm-threejs.html +977 -0
templates/gradient-descent-three.html +695 -0
templates/ica-threejs.html +456 -0
templates/lda-three.html +688 -0
templates/pca-threejs.html +524 -0
templates/xboost-tree-three.html +645 -0
templates/xbost-graph-three.html +693 -0

templates/Apriori-Simulator-three.html ADDED Viewed

	@@ -0,0 +1,446 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apriori Algorithm Simulator | Learn Data Mining Interactively</title>
+    <!-- Dependencies -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></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;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8fafc;
+        }
+        .gradient-hero {
+            background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
+        }
+        .text-gradient {
+            background: linear-gradient(to right, #2563eb, #7c3aed);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .shadow-card {
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+        }
+        .shadow-soft {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+        }
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-slide-up {
+            animation: slideUp 0.5s ease-out forwards;
+        }
+        @keyframes scaleIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        .animate-scale-in {
+            animation: scaleIn 0.3s ease-out forwards;
+        }
+        .gradient-primary {
+            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useMemo } = React;
+        // --- Data & Helpers ---
+        const groceryItems = [
+            { id: "bread", name: "Bread", emoji: "🍞", category: "bakery" },
+            { id: "milk", name: "Milk", emoji: "🥛", category: "dairy" },
+            { id: "butter", name: "Butter", emoji: "🧈", category: "dairy" },
+            { id: "eggs", name: "Eggs", emoji: "🥚", category: "dairy" },
+            { id: "cheese", name: "Cheese", emoji: "🧀", category: "dairy" },
+            { id: "apple", name: "Apple", emoji: "🍎", category: "fruits" },
+            { id: "banana", name: "Banana", emoji: "🍌", category: "fruits" },
+            { id: "coffee", name: "Coffee", emoji: "☕", category: "beverages" },
+            { id: "cereal", name: "Cereal", emoji: "🥣", category: "breakfast" },
+            { id: "yogurt", name: "Yogurt", emoji: "🥛", category: "dairy" },
+        ];
+        const getItemEmoji = (id) => groceryItems.find(i => i.id === id)?.emoji || "📦";
+        const getItemDisplayName = (id) => groceryItems.find(i => i.id === id)?.name || id;
+        // --- Logic Engine ---
+        const transactions = [
+            { id: 1, items: ["bread", "milk", "butter"], customer: "👩" },
+            { id: 2, items: ["bread", "eggs", "milk"], customer: "👨" },
+            { id: 3, items: ["milk", "butter", "cheese"], customer: "👵" },
+            { id: 4, items: ["bread", "milk", "butter", "eggs"], customer: "👦" },
+            { id: 5, items: ["bread", "butter"], customer: "👧" },
+            { id: 6, items: ["milk", "eggs", "cheese"], customer: "👴" },
+            { id: 7, items: ["bread", "milk", "butter", "cheese"], customer: "👩‍🦰" },
+            { id: 8, items: ["bread", "milk"], customer: "👨‍🦱" },
+        ];
+        // --- UI Components ---
+        const Icon = ({ name, size = 20, className = "" }) => {
+            const icons = {
+                "lightbulb": <><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .5 2.2 1.5 3.1.7.9 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></>,
+                "search": <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
+                "rotate-ccw": <><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></>,
+                "chevron-left": <path d="m15 18-6-6 6-6"/>,
+                "chevron-right": <path d="m9 18 6-6 6-6"/>,
+                "shopping-cart": <><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></>,
+                "sparkles": <><path d="m12 3 1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></>,
+                "arrow-right": <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
+                "trending-up": <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>
+            };
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={size}
+                    height={size}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className={className}
+                >
+                    {icons[name] || null}
+                </svg>
+            );
+        };
+        const Button = ({ children, onClick, disabled, variant = "default", size = "md", className = "" }) => {
+            const variants = {
+                default: "bg-slate-900 text-white hover:bg-slate-800",
+                outline: "border border-slate-200 bg-white hover:bg-slate-50 text-slate-700",
+                hero: "gradient-primary text-white shadow-lg hover:opacity-90",
+                icon: "p-2 border border-slate-200 hover:bg-slate-50"
+            };
+            const sizes = {
+                md: "px-4 py-2",
+                lg: "px-8 py-3 text-lg font-bold"
+            };
+            return (
+                <button
+                    onClick={onClick}
+                    disabled={disabled}
+                    className={`inline-flex items-center justify-center rounded-xl transition-all active:scale-95 disabled:opacity-50 disabled:active:scale-100 ${variants[variant]} ${sizes[size]} ${className}`}
+                >
+                    {children}
+                </button>
+            );
+        };
+        // --- Main Simulator ---
+        const steps = [
+            { id: 0, title: "Meet Sarah, the Store Owner 👩‍💼", subtitle: "She wants to understand her customers better" },
+            { id: 1, title: "Sarah looks at shopping receipts 🧾", subtitle: "8 customers visited her store today" },
+            { id: 2, title: "Let's count each item! 🔢", subtitle: "How many times did each item appear?" },
+            { id: 3, title: "Find the popular items! ⭐", subtitle: "Items bought by at least 3 customers are 'frequent'" },
+            { id: 4, title: "Which items are bought TOGETHER? 🤝", subtitle: "Let's check pairs of frequent items" },
+            { id: 5, title: "Sarah discovers patterns! 💡", subtitle: "These are called 'Association Rules'" },
+            { id: 6, title: "Sarah can use these insights! 🎯", subtitle: "Now she knows how to arrange her store" },
+        ];
+        const AprioriSimulator = () => {
+            const [currentStep, setCurrentStep] = useState(0);
+            const nextStep = () => currentStep < steps.length - 1 && setCurrentStep(currentStep + 1);
+            const prevStep = () => currentStep > 0 && setCurrentStep(currentStep - 1);
+            const reset = () => setCurrentStep(0);
+            // Audio Handler
+            const playSound = (e) => {
+                e.preventDefault(); // Prevent default anchor behavior to allow sound to play
+                const audio = document.getElementById('clickSound');
+                if (audio) {
+                    audio.currentTime = 0;
+                    audio.play().catch(err => console.log("Audio play prevented:", err));
+                }
+                // Navigate after a short delay for the sound
+                setTimeout(() => {
+                    window.location.href = "/xgboost-regression";
+                }, 150);
+            };
+            // Calculations
+            const itemCounts = useMemo(() => {
+                const counts = {};
+                transactions.forEach(t => t.items.forEach(item => counts[item] = (counts[item] || 0) + 1));
+                return counts;
+            }, []);
+            const frequentItems = Object.entries(itemCounts).filter(([_, c]) => c >= 3).map(([i]) => i);
+            const pairCounts = useMemo(() => {
+                const counts = {};
+                transactions.forEach(t => {
+                    for (let i = 0; i < t.items.length; i++) {
+                        for (let j = i + 1; j < t.items.length; j++) {
+                            const pair = [t.items[i], t.items[j]].sort().join("+");
+                            if (frequentItems.includes(t.items[i]) && frequentItems.includes(t.items[j])) {
+                                counts[pair] = (counts[pair] || 0) + 1;
+                            }
+                        }
+                    }
+                });
+                return counts;
+            }, [frequentItems]);
+            const frequentPairs = Object.entries(pairCounts).filter(([_, c]) => c >= 3).sort((a,b) => b[1]-a[1]);
+            // Define progress bar style outside of JSX to avoid double-curly-brace pattern
+            const progressStyle = { width: `${((currentStep + 1) / steps.length) * 100}%` };
+            const renderStepContent = () => {
+                switch (currentStep) {
+                    case 0: return (
+                        <div className="text-center animate-scale-in">
+                            <div className="text-8xl mb-6">👩‍💼</div>
+                            <div className="bg-white rounded-3xl p-8 shadow-card max-w-md mx-auto border border-blue-50">
+                                <p className="text-xl leading-relaxed text-slate-700">
+                                    "Hi! I'm <strong>Sarah</strong>. I own a small grocery store.
+                                    I noticed some customers buy certain items together..."
+                                </p>
+                                <p className="text-xl leading-relaxed mt-4 text-slate-700">
+                                    "I want to find these <strong>patterns</strong> so I can place
+                                    related items close together!"
+                                </p>
+                            </div>
+                            <div className="mt-8 flex justify-center gap-6 text-5xl">
+                                🍞 🥛 🧈 🥚 🧀
+                            </div>
+                        </div>
+                    );
+                    case 1: return (
+                        <div className="animate-slide-up">
+                            <div className="grid gap-3 max-w-2xl mx-auto">
+                                {transactions.map((t, idx) => {
+                                    // Removed double-curly-brace style pattern for Flask compatibility
+                                    const animStyle = { animationDelay: `${idx * 100}ms` };
+                                    return (
+                                        <div key={t.id} className="flex items-center gap-4 bg-white rounded-2xl p-4 shadow-soft border border-slate-100 animate-slide-up" style={animStyle}>
+                                            <div className="text-3xl">{t.customer}</div>
+                                            <div className="text-2xl opacity-50">🛒</div>
+                                            <div className="flex flex-wrap gap-2">
+                                                {t.items.map(item => (
+                                                    <span key={item} className="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1 border border-slate-200">
+                                                        <span className="text-lg">{getItemEmoji(item)}</span>
+                                                        {getItemDisplayName(item)}
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    );
+                    case 2: return (
+                        <div className="animate-scale-in">
+                            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-3xl mx-auto">
+                                {Object.entries(itemCounts).sort((a,b) => b[1]-a[1]).map(([item, count], idx) => (
+                                    <div key={item} className="bg-white rounded-2xl p-6 shadow-soft text-center border border-slate-100">
+                                        <div className="text-5xl mb-2">{getItemEmoji(item)}</div>
+                                        <div className="font-bold text-lg text-slate-800">{getItemDisplayName(item)}</div>
+                                        <div className="mt-2 text-4xl font-extrabold text-blue-600">{count}</div>
+                                        <div className="text-sm text-slate-400 font-medium uppercase tracking-wider">Times Bought</div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    );
+                    case 3: return (
+                        <div className="animate-scale-in">
+                            <div className="text-center mb-8">
+                                <div className="inline-block bg-blue-50 text-blue-700 px-6 py-3 rounded-2xl border border-blue-100">
+                                    <p className="text-lg font-medium">
+                                        <strong>Rule:</strong> Bought by <strong>at least 3</strong> customers
+                                    </p>
+                                </div>
+                            </div>
+                            <div className="grid sm:grid-cols-2 gap-4 max-w-2xl mx-auto">
+                                {Object.entries(itemCounts).sort((a,b) => b[1]-a[1]).map(([item, count]) => (
+                                    <div key={item} className={`rounded-2xl p-5 flex items-center justify-between border-2 transition-all ${count >= 3 ? "bg-green-50 border-green-200 shadow-sm" : "bg-slate-50 border-slate-100 opacity-50"}`}>
+                                        <div className="flex items-center gap-4">
+                                            <span className="text-4xl">{getItemEmoji(item)}</span>
+                                            <div>
+                                                <div className="font-bold text-slate-800">{getItemDisplayName(item)}</div>
+                                                <div className="text-sm text-slate-500 font-medium">{count} / 8 customers</div>
+                                            </div>
+                                        </div>
+                                        <div className="text-2xl">{count >= 3 ? "✅" : "❌"}</div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    );
+                    case 4: return (
+                        <div className="animate-scale-in">
+                            <div className="grid sm:grid-cols-2 gap-4 max-w-2xl mx-auto">
+                                {frequentPairs.map(([pair, count], idx) => {
+                                    const [i1, i2] = pair.split("+");
+                                    // Removed double-curly-brace style pattern for Flask compatibility
+                                    const animStyle = { animationDelay: `${idx * 150}ms` };
+                                    return (
+                                        <div key={pair} className="bg-white rounded-2xl p-6 shadow-card border border-blue-50 text-center animate-slide-up" style={animStyle}>
+                                            <div className="flex items-center justify-center gap-4 mb-3">
+                                                <span className="text-5xl">{getItemEmoji(i1)}</span>
+                                                <span className="text-3xl font-bold text-blue-400">+</span>
+                                                <span className="text-5xl">{getItemEmoji(i2)}</span>
+                                            </div>
+                                            <div className="font-bold text-slate-800 text-lg">{getItemDisplayName(i1)} & {getItemDisplayName(i2)}</div>
+                                            <div className="mt-3 text-blue-600 font-extrabold text-2xl">Together {count}x</div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    );
+                    case 5: return (
+                        <div className="animate-scale-in max-w-2xl mx-auto space-y-4">
+                            {[
+                                { from: "bread", to: "milk", p: 86, tip: "Most bread buyers also get milk!" },
+                                { from: "bread", to: "butter", p: 71, tip: "Bread and butter are best friends!" },
+                                { from: "milk", to: "butter", p: 57, tip: "Dairy items stick together!" }
+                            ].map((rule, idx) => (
+                                <div key={idx} className="bg-white rounded-2xl p-6 shadow-card border border-blue-50 border-l-4 border-l-blue-600">
+                                    <div className="flex items-center justify-between flex-wrap gap-4">
+                                        <div className="flex items-center gap-3">
+                                            <span className="text-sm font-bold text-slate-400 uppercase">If buys</span>
+                                            <span className="bg-blue-600 text-white px-4 py-1 rounded-full font-bold flex items-center gap-2">
+                                                {getItemEmoji(rule.from)} {getItemDisplayName(rule.from)}
+                                            </span>
+                                        </div>
+                                        <div className="text-2xl text-slate-300">➜</div>
+                                        <div className="flex items-center gap-3">
+                                            <span className="text-sm font-bold text-slate-400 uppercase">Then likely buys</span>
+                                            <span className="bg-green-500 text-white px-4 py-1 rounded-full font-bold flex items-center gap-2">
+                                                {getItemEmoji(rule.to)} {getItemDisplayName(rule.to)}
+                                            </span>
+                                        </div>
+                                        <div className="ml-auto text-3xl font-black text-blue-600">{rule.p}%</div>
+                                    </div>
+                                    <div className="mt-4 flex items-center gap-2 text-slate-500 italic text-sm">
+                                        <Icon name="lightbulb" className="w-4 h-4 text-amber-500" />
+                                        {rule.tip}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    );
+                    case 6: return (
+                        <div className="text-center animate-scale-in max-w-2xl mx-auto">
+                            <div className="text-8xl mb-6">🎉</div>
+                            <h2 className="text-3xl font-black text-slate-800 mb-8">Sarah has a plan!</h2>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
+                                {[
+                                    { e: "🛒", t: "Store Layout", d: "Put bread near milk and butter" },
+                                    { e: "🏷️", t: "Bundle Deals", d: "Offer 'Bread + Butter' discount packs" },
+                                    { e: "📱", t: "Smart Suggestions", d: "If someone has milk, suggest butter!" },
+                                    { e: "📦", t: "Inventory", d: "Stock more milk when bread is on sale" },
+                                ].map((tip, idx) => (
+                                    <div key={idx} className="bg-white rounded-2xl p-5 shadow-soft border border-slate-100">
+                                        <div className="text-4xl mb-2">{tip.e}</div>
+                                        <div className="font-bold text-lg text-slate-800">{tip.t}</div>
+                                        <div className="text-slate-500">{tip.d}</div>
+                                    </div>
+                                ))}
+                            </div>
+                            <div className="mt-10 bg-blue-600 text-white rounded-3xl p-8 shadow-xl">
+                                <h3 className="text-2xl font-bold mb-3">🧠 You mastered Apriori!</h3>
+                                <p className="text-blue-100 text-lg leading-relaxed">
+                                    You just learned how to find <strong>frequent itemsets</strong> and turn them into
+                                    <strong> association rules</strong> to drive real business decisions!
+                                </p>
+                            </div>
+                        </div>
+                    );
+                    default: return null;
+                }
+            };
+            return (
+                <div className="min-h-screen gradient-hero py-12 px-4">
+                    <div className="max-w-4xl mx-auto">
+                        {/* Header */}
+                        <div className="text-center mb-10">
+                            <h1 className="text-4xl md:text-5xl font-black mb-2 tracking-tight">
+                                <span className="text-gradient">Apriori Algorithm</span>
+                            </h1>
+                            <p className="text-slate-500 text-lg font-medium">Learn how stores find shopping patterns! 🛍️</p>
+                        </div>
+                        {/* Progress Bar */}
+                        <div className="mb-8">
+                            <div className="flex justify-between items-center mb-3">
+                                <span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Step {currentStep + 1} of {steps.length}</span>
+                                <span className="text-sm font-bold text-blue-600">{steps[currentStep].title}</span>
+                            </div>
+                            <div className="h-3 bg-slate-100 rounded-full overflow-hidden shadow-inner border border-slate-50">
+                                {/* Using pre-defined variable for style to avoid double-curly-brace pattern */}
+                                <div
+                                    className="h-full gradient-primary transition-all duration-700 ease-in-out"
+                                    style={progressStyle}
+                                />
+                            </div>
+                        </div>
+                        {/* Card Content */}
+                        <div className="min-h-[500px] mb-10">
+                            <div className="bg-white rounded-[2rem] p-8 shadow-card border border-blue-50">
+                                <div className="text-center mb-8">
+                                    <h2 className="text-2xl font-black text-slate-800 mb-1">{steps[currentStep].title}</h2>
+                                    <p className="text-slate-400 font-medium">{steps[currentStep].subtitle}</p>
+                                </div>
+                                {renderStepContent()}
+                            </div>
+                        </div>
+                        {/* Navigation */}
+                        <div className="flex items-center justify-center gap-4">
+                            <Button variant="outline" size="lg" onClick={reset} disabled={currentStep === 0}>
+                                <Icon name="rotate-ccw" className="w-5 h-5 mr-2" />
+                                Reset
+                            </Button>
+                            <Button variant="outline" size="lg" onClick={prevStep} disabled={currentStep === 0}>
+                                <Icon name="chevron-left" className="w-5 h-5 mr-1" />
+                                Back
+                            </Button>
+                            <Button variant="hero" size="lg" onClick={nextStep} className="px-12">
+                                {currentStep === steps.length - 1 ? "Start Over" : "Next Step"}
+                                {currentStep < steps.length - 1 && <Icon name="chevron-right" className="ml-2 w-6 h-6" />}
+                            </Button>
+                        </div>
+                        {/* Centered Button (FIXED) */}
+                        <div className="mt-12 flex justify-center pb-8">
+                            <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+                            <a
+                                href="/xgboost-regression"
+                                onClick={playSound}
+                                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 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 cursor-pointer"
+                            >
+                                Back to Core
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<AprioriSimulator />);
+    </script>
+</body>
+</html>

templates/Eclat-Algorithm-three.html ADDED Viewed

	@@ -0,0 +1,858 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eclat Algorithm Simulator</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        border: "hsl(var(--border))",
+                        input: "hsl(var(--input))",
+                        ring: "hsl(var(--ring))",
+                        background: "hsl(var(--background))",
+                        foreground: "hsl(var(--foreground))",
+                        primary: {
+                            DEFAULT: "hsl(var(--primary))",
+                            foreground: "hsl(var(--primary-foreground))",
+                        },
+                        secondary: {
+                            DEFAULT: "hsl(var(--secondary))",
+                            foreground: "hsl(var(--secondary-foreground))",
+                        },
+                        destructive: {
+                            DEFAULT: "hsl(var(--destructive))",
+                            foreground: "hsl(var(--destructive-foreground))",
+                        },
+                        muted: {
+                            DEFAULT: "hsl(var(--muted))",
+                            foreground: "hsl(var(--muted-foreground))",
+                        },
+                        accent: {
+                            DEFAULT: "hsl(var(--accent))",
+                            foreground: "hsl(var(--accent-foreground))",
+                        },
+                        popover: {
+                            DEFAULT: "hsl(var(--popover))",
+                            foreground: "hsl(var(--popover-foreground))",
+                        },
+                        card: {
+                            DEFAULT: "hsl(var(--card))",
+                            foreground: "hsl(var(--card-foreground))",
+                        },
+                        success: {
+                            DEFAULT: "#10b981",
+                            foreground: "#ffffff"
+                        }
+                    },
+                    borderRadius: {
+                        lg: "var(--radius)",
+                        md: "calc(var(--radius) - 2px)",
+                        sm: "calc(var(--radius) - 4px)",
+                    },
+                    animation: {
+                        'pulse-glow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        pulseGlow: {
+                            '0%, 100%': { opacity: 1, boxShadow: '0 0 10px hsl(var(--primary) / 0.5)' },
+                            '50%': { opacity: .8, boxShadow: '0 0 20px hsl(var(--primary) / 0.8)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- React & Libraries -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+        :root {
+            --background: 224 71% 4%;
+            --foreground: 213 31% 91%;
+            --card: 224 71% 4%;
+            --card-foreground: 213 31% 91%;
+            --popover: 224 71% 4%;
+            --popover-foreground: 215 20.2% 65.1%;
+            --primary: 263.4 70% 50.4%;
+            --primary-foreground: 210 40% 98%;
+            --secondary: 222.2 47.4% 11.2%;
+            --secondary-foreground: 210 40% 98%;
+            --muted: 217.2 32.6% 17.5%;
+            --muted-foreground: 215 20.2% 65.1%;
+            --accent: 45 93% 47%;
+            --accent-foreground: 210 40% 98%;
+            --destructive: 0 62.8% 30.6%;
+            --destructive-foreground: 210 40% 98%;
+            --border: 217.2 32.6% 17.5%;
+            --input: 217.2 32.6% 17.5%;
+            --ring: 224.3 76.3% 48%;
+            --radius: 0.5rem;
+        }
+        body {
+            background-color: hsl(var(--background));
+            color: hsl(var(--foreground));
+            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        }
+        .circuit-pattern {
+            background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+            background-size: 24px 24px;
+        }
+        .text-glow {
+            text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
+        }
+        .glow-primary {
+            box-shadow: 0 0 15px -3px hsl(var(--primary) / 0.6);
+        }
+        .glow-accent {
+            box-shadow: 0 0 15px -3px hsl(var(--accent) / 0.4);
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: hsl(var(--secondary));
+        }
+        ::-webkit-scrollbar-thumb {
+            background: hsl(var(--muted));
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: hsl(var(--primary));
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <!-- We use {% raw %} to prevent Jinja2 from parsing React's curly braces -->
+    {% raw %}
+    <script type="text/babel">
+        const { useState, useEffect, useRef } = React;
+        const { motion, AnimatePresence } = window.Motion;
+        // --- UTILS ---
+        function cn(...classes) {
+            return classes.filter(Boolean).join(' ');
+        }
+        // --- ICONS (Lucide replacement) ---
+        const Icon = ({ d, 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={d} />
+            </svg>
+        );
+        const Icons = {
+            Play: (props) => <Icon d="M5 3l14 9-14 9V3z" {...props} />,
+            Pause: (props) => <Icon d="M6 4h4v16H6zm8 0h4v16h-4z" {...props} />,
+            RotateCcw: (props) => <Icon d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8 M3 3v5h5" {...props} />,
+            ChevronRight: (props) => <Icon d="M9 18l6-6-6-6" {...props} />,
+            Database: (props) => <Icon d="M3 5c0-1.1 4.03-2 9-2s9 .9 9 2c0 1.1-4.03 2-9 2s-9-.9-9-2z M3 5v14c0 1.1 4.03 2 9 2s9-.9 9-2V5 M3 12c0 1.1 4.03 2 9 2s9-.9 9-2" {...props} />,
+            Info: (props) => <Icon d="M12 16v-4 M12 8h.01 M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10z" {...props} />,
+            RotateCw: (props) => <Icon d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8 M21 3v5h-5" {...props} />,
+            Lightbulb: (props) => <Icon d="M9 18h6 M10 22h4 M15.09 14c.18-.9.93-1.54 1.86-1.54.96 0 1.63.74 1.93 1.54M9 14c.18-.9.93-1.54 1.86-1.54.96 0 1.63.74 1.93 1.54" {...props} />,
+            ChevronDown: (props) => <Icon d="M6 9l6 6 6-6" {...props} />,
+            ChevronUp: (props) => <Icon d="M18 15l-6-6-6 6" {...props} />,
+            ShoppingCart: (props) => <Icon d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" {...props} />,
+            Sparkles: (props) => <Icon d="M12 3l1.912 5.813a2 2 0 0 1 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 1-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 1-1.275-1.275L3 12l5.813-1.912a2 2 0 0 1 1.275-1.275z" {...props} />,
+            ArrowRight: (props) => <Icon d="M5 12h14M12 5l7 7-7 7" {...props} />,
+            BookOpen: (props) => <Icon d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" {...props} />,
+            Zap: (props) => <Icon d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" {...props} />,
+            CheckCircle: (props) => <Icon d="M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3" {...props} />,
+            XCircle: (props) => <Icon d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" {...props} />,
+            Trophy: (props) => <Icon d="M8 21h8M12 17v4M7 4h10c.66 0 1.33.2 2 .59V9a8 8 0 0 1-8 8 8 8 0 0 1-8-8V4.59c.67-.39 1.34-.59 2-.59zM19 10a5 5 0 0 0 0 10M5 10a5 5 0 0 1 0 10" {...props} />,
+            TrendingUp: (props) => <Icon d="M23 6l-9.5 9.5-5-5L1 18" {...props} />,
+            HelpCircle: (props) => <Icon d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01 M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" {...props} />,
+            X: (props) => <Icon d="M18 6L6 18M6 6l12 12" {...props} />,
+            Search: (props) => <Icon d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" {...props} />,
+        };
+        // --- BASIC UI COMPONENTS ---
+        const Button = ({ children, variant = 'default', size = 'default', className, onClick, disabled }) => {
+            const variants = {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+            };
+            const sizes = {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                icon: "h-10 w-10",
+                lg: "h-11 rounded-md px-8",
+            };
+            return (
+                <button
+                    onClick={onClick}
+                    disabled={disabled}
+                    className={cn(
+                        "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                        variants[variant],
+                        sizes[size],
+                        className
+                    )}
+                >
+                    {children}
+                </button>
+            );
+        };
+        const Slider = ({ value, onValueChange, min, max, step, className }) => {
+            return (
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={value[0]}
+                    onChange={(e) => onValueChange([parseFloat(e.target.value)])}
+                    className={cn("w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary", className)}
+                />
+            );
+        };
+        const Input = ({ className, ...props }) => (
+            <input
+                className={cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)}
+                {...props}
+            />
+        );
+        // --- SUB COMPONENTS ---
+        const BeginnerTip = ({ title, children, defaultOpen = false }) => {
+            const [isOpen, setIsOpen] = useState(defaultOpen);
+            return (
+                <motion.div layout className="rounded-lg border border-accent/30 bg-accent/5 overflow-hidden">
+                    <button onClick={() => setIsOpen(!isOpen)} className="w-full p-3 flex items-center gap-2 text-left hover:bg-accent/10 transition-colors">
+                        <Icons.Lightbulb className="w-4 h-4 text-accent shrink-0" />
+                        <span className="text-sm font-medium text-foreground flex-1">{title}</span>
+                        {isOpen ? <Icons.ChevronUp className="w-4 h-4 text-muted-foreground" /> : <Icons.ChevronDown className="w-4 h-4 text-muted-foreground" />}
+                    </button>
+                    {isOpen && (
+                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="px-3 pb-3 text-sm text-foreground/80">
+                            {children}
+                        </motion.div>
+                    )}
+                </motion.div>
+            );
+        };
+        const TransactionPanel = ({ transactions, highlightedTids, step }) => {
+            const itemEmojis = { 'Bread': '🍞', 'Milk': '🥛', 'Eggs': '🥚', 'Butter': '🧈' };
+            return (
+                <div className="rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm overflow-hidden h-full">
+                    <div className="p-4 border-b border-border/50 flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-secondary/20 flex items-center justify-center">
+                            <Icons.ShoppingCart className="w-4 h-4 text-secondary" />
+                        </div>
+                        <div>
+                            <h2 className="font-semibold text-foreground">Transaction Database</h2>
+                            <p className="text-xs text-muted-foreground">Horizontal Format (Traditional)</p>
+                        </div>
+                    </div>
+                    <div className="p-4 space-y-3">
+                        {transactions.map((transaction, index) => (
+                            <motion.div
+                                key={transaction.id}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: step >= 0 ? 1 : 0.3, x: 0, scale: highlightedTids.includes(transaction.id) ? 1.02 : 1 }}
+                                transition={{ delay: index * 0.1 }}
+                                className={`p-3 rounded-lg border transition-all duration-300 ${highlightedTids.includes(transaction.id) ? 'bg-primary/10 border-primary/50 glow-primary' : 'bg-muted/30 border-border/30 hover:border-border/60'}`}
+                            >
+                                <div className="flex items-center gap-3">
+                                    <span className={`font-mono text-sm font-bold w-8 h-8 rounded-full flex items-center justify-center ${highlightedTids.includes(transaction.id) ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
+                                        T{transaction.id}
+                                    </span>
+                                    <div className="flex flex-wrap gap-2">
+                                        {transaction.items.map((item, i) => (
+                                            <motion.span key={i} initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: index * 0.1 + i * 0.05 }} className="px-2 py-1 rounded-md bg-background/50 border border-border/30 text-sm flex items-center gap-1">
+                                                <span>{itemEmojis[item]}</span><span className="text-foreground/80">{item}</span>
+                                            </motion.span>
+                                        ))}
+                                    </div>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+            );
+        };
+        const TidSetPanel = ({ tidSets, step, minSupportCount, onItemHover, highlightedItem }) => {
+            const itemEmojis = { 'Bread': '🍞', 'Milk': '🥛', 'Eggs': '🥚', 'Butter': '🧈' };
+            const itemColors = {
+                'Bread': 'from-amber-500/20 to-orange-500/20 border-amber-500/50',
+                'Milk': 'from-blue-500/20 to-cyan-500/20 border-blue-500/50',
+                'Eggs': 'from-yellow-500/20 to-amber-500/20 border-yellow-500/50',
+                'Butter': 'from-yellow-600/20 to-orange-400/20 border-yellow-600/50',
+            };
+            if (step < 1) {
+                return (
+                    <div className="rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm overflow-hidden h-full">
+                        <div className="p-4 border-b border-border/50 flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center"><Icons.Database className="w-4 h-4 text-primary" /></div>
+                            <div><h2 className="font-semibold text-foreground">TID Sets</h2><p className="text-xs text-muted-foreground">Vertical Format (Eclat)</p></div>
+                        </div>
+                        <div className="p-8 flex items-center justify-center">
+                            <div className="text-center">
+                                <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mx-auto mb-4"><Icons.Database className="w-8 h-8 text-muted-foreground/50" /></div>
+                                <p className="text-muted-foreground text-sm">Press <span className="text-primary font-semibold">Play</span> or <span className="text-primary font-semibold">Next Step</span> to begin</p>
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+            return (
+                <div className="rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm overflow-hidden h-full">
+                    <div className="p-4 border-b border-border/50 flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center animate-pulse-glow"><Icons.Database className="w-4 h-4 text-primary" /></div>
+                        <div><h2 className="font-semibold text-foreground">TID Sets</h2><p className="text-xs text-muted-foreground">Vertical Format (Item → Transaction IDs)</p></div>
+                    </div>
+                    <div className="p-4 space-y-3">
+                        {tidSets.map((tidSet, index) => {
+                            const isFrequent = tidSet.tids.length >= minSupportCount;
+                            const isHighlighted = highlightedItem === tidSet.item;
+                            return (
+                                <motion.div
+                                    key={tidSet.item}
+                                    initial={{ opacity: 0, x: 20 }}
+                                    animate={{ opacity: 1, x: 0, scale: isHighlighted ? 1.02 : 1 }}
+                                    transition={{ delay: index * 0.15 }}
+                                    onMouseEnter={() => onItemHover(tidSet.item, tidSet.tids)}
+                                    onMouseLeave={() => onItemHover(null)}
+                                    className={`p-3 rounded-lg border bg-gradient-to-r transition-all duration-300 cursor-pointer ${itemColors[tidSet.item]} ${isHighlighted ? 'glow-primary' : ''}`}
+                                >
+                                    <div className="flex items-center justify-between mb-2">
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-lg">{itemEmojis[tidSet.item]}</span>
+                                            <span className="font-semibold text-foreground">{tidSet.item}</span>
+                                        </div>
+                                        {step >= 2 && (
+                                            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${isFrequent ? 'bg-success/20 text-success' : 'bg-destructive/20 text-destructive'}`}>
+                                                {isFrequent ? <><Icons.CheckCircle className="w-3 h-3" /> Frequent</> : <><Icons.XCircle className="w-3 h-3" /> Pruned</>}
+                                            </motion.div>
+                                        )}
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-xs text-muted-foreground font-mono">TID:</span>
+                                        <div className="flex flex-wrap gap-1">
+                                            {tidSet.tids.map((tid, i) => (
+                                                <motion.span key={tid} initial={{ scale: 0, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ delay: index * 0.15 + i * 0.05 }} className="px-2 py-0.5 rounded bg-background/50 text-xs font-mono text-foreground/80 border border-border/30">
+                                                    {tid}
+                                                </motion.span>
+                                            ))}
+                                        </div>
+                                        <span className="ml-auto text-xs font-mono text-accent font-bold">|{tidSet.tids.length}|</span>
+                                    </div>
+                                </motion.div>
+                            );
+                        })}
+                    </div>
+                    {step >= 1 && (
+                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="p-4 border-t border-border/30 bg-primary/5">
+                            <p className="text-xs text-muted-foreground"><span className="text-primary font-semibold">🔄 Transformed:</span> Now each item maps to the transactions containing it.</p>
+                        </motion.div>
+                    )}
+                </div>
+            );
+        };
+        const IntersectionVisualizer = ({ tidSets, minSupportCount, step }) => {
+            const itemEmojis = { 'Bread': '🍞', 'Milk': '🥛', 'Eggs': '🥚', 'Butter': '🧈' };
+            const frequentItems = tidSets.filter(t => t.tids.length >= minSupportCount);
+            const intersections = [];
+            for (let i = 0; i < frequentItems.length; i++) {
+                for (let j = i + 1; j < frequentItems.length; j++) {
+                    const result = frequentItems[i].tids.filter(tid => frequentItems[j].tids.includes(tid));
+                    intersections.push({
+                        item1: frequentItems[i].item,
+                        item2: frequentItems[j].item,
+                        tids1: frequentItems[i].tids,
+                        tids2: frequentItems[j].tids,
+                        result,
+                        isFrequent: result.length >= minSupportCount
+                    });
+                }
+            }
+            return (
+                <div className="rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm overflow-hidden">
+                    <div className="p-4 border-b border-border/50 flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center"><Icons.Zap className="w-4 h-4 text-accent" /></div>
+                        <div><h2 className="font-semibold text-foreground">Set Intersections</h2><p className="text-xs text-muted-foreground">Finding 2-item patterns through TID overlap</p></div>
+                    </div>
+                    <div className="p-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {intersections.map((intersection, index) => (
+                                <motion.div
+                                    key={`${intersection.item1}-${intersection.item2}`}
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    transition={{ delay: index * 0.1 }}
+                                    className={`p-4 rounded-lg border transition-all ${intersection.isFrequent ? 'bg-success/5 border-success/30' : 'bg-muted/20 border-border/30 opacity-60'}`}
+                                >
+                                    <div className="flex items-center justify-center gap-2 mb-3">
+                                        <span className="px-2 py-1 rounded bg-background/50 text-sm font-medium flex items-center gap-1">{itemEmojis[intersection.item1]} {intersection.item1}</span>
+                                        <span className="text-primary font-mono">∩</span>
+                                        <span className="px-2 py-1 rounded bg-background/50 text-sm font-medium flex items-center gap-1">{itemEmojis[intersection.item2]} {intersection.item2}</span>
+                                    </div>
+                                    <div className="flex items-center justify-center gap-2 mb-3 text-xs">
+                                        <div className="flex gap-0.5">
+                                            {intersection.tids1.map(tid => (
+                                                <span key={tid} className={`w-5 h-5 rounded flex items-center justify-center font-mono ${intersection.result.includes(tid) ? 'bg-success/30 text-success' : 'bg-muted/50 text-muted-foreground'}`}>{tid}</span>
+                                            ))}
+                                        </div>
+                                        <Icons.ArrowRight className="w-3 h-3 text-muted-foreground" />
+                                        <div className="flex gap-0.5">
+                                            {intersection.result.length > 0 ? intersection.result.map(tid => (
+                                                <span key={tid} className="w-5 h-5 rounded flex items-center justify-center font-mono bg-success/30 text-success font-bold">{tid}</span>
+                                            )) : <span className="text-muted-foreground">∅</span>}
+                                        </div>
+                                    </div>
+                                    <div className={`text-center text-xs font-medium px-2 py-1 rounded ${intersection.isFrequent ? 'bg-success/20 text-success' : 'bg-destructive/10 text-destructive/70'}`}>
+                                        Support: {intersection.result.length} {intersection.isFrequent ? ' ✓ Frequent' : ' ✗ Pruned'}
+                                    </div>
+                                </motion.div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+        const FrequentItemsetsPanel = ({ itemsets, step, onItemsetHover }) => {
+            const itemEmojis = { 'Bread': '🍞', 'Milk': '🥛', 'Eggs': '🥚', 'Butter': '🧈' };
+            const oneItemsets = itemsets.filter(i => i.items.length === 1);
+            const twoItemsets = itemsets.filter(i => i.items.length === 2);
+            const threeItemsets = itemsets.filter(i => i.items.length === 3);
+            const ItemsetCard = ({ items, support, tids, delay }) => (
+                <motion.div
+                    initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: delay }}
+                    onMouseEnter={() => onItemsetHover(items.join(','), tids)} onMouseLeave={() => onItemsetHover(null)}
+                    className="p-2 rounded-lg bg-muted/30 border border-border/30 hover:border-primary/50 transition-all cursor-pointer"
+                >
+                    <div className="flex items-center justify-between">
+                        <span className="flex items-center gap-1">
+                            {items.map(item => <span key={item} className="flex items-center gap-1">{itemEmojis[item]} {item}</span>)}
+                        </span>
+                        <span className="text-xs font-mono text-accent">{support.toFixed(0)}%</span>
+                    </div>
+                </motion.div>
+            );
+            return (
+                <div className="rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm overflow-hidden">
+                    <div className="p-4 border-b border-border/50 flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center"><Icons.Trophy className="w-4 h-4 text-success" /></div>
+                        <div><h2 className="font-semibold text-foreground">Frequent Itemsets Discovered</h2><p className="text-xs text-muted-foreground">Patterns that meet minimum support</p></div>
+                    </div>
+                    <div className="p-4">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div>
+                                <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2"><span className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center text-xs font-mono text-primary">1</span> Single Items</h3>
+                                <div className="space-y-2">{oneItemsets.map((is, i) => <ItemsetCard key={i} {...is} delay={i * 0.05} />)}</div>
+                            </div>
+                            <div>
+                                <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2"><span className="w-6 h-6 rounded-full bg-secondary/20 flex items-center justify-center text-xs font-mono text-secondary">2</span> Item Pairs {step < 3 && <span className="text-xs text-muted-foreground">(next)</span>}</h3>
+                                <div className="space-y-2">
+                                    {step >= 3 ? twoItemsets.map((is, i) => <ItemsetCard key={i} {...is} delay={i * 0.05} />) : <div className="p-4 rounded-lg border border-dashed border-border/30 text-center"><Icons.TrendingUp className="w-6 h-6 text-muted-foreground/50 mx-auto mb-2" /><p className="text-xs text-muted-foreground">Continue to find pairs</p></div>}
+                                </div>
+                            </div>
+                            <div>
+                                <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2"><span className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center text-xs font-mono text-accent">3</span> Triplets {step < 4 && <span className="text-xs text-muted-foreground">(final)</span>}</h3>
+                                <div className="space-y-2">
+                                    {step >= 4 ? (threeItemsets.length > 0 ? threeItemsets.map((is, i) => <ItemsetCard key={i} {...is} delay={i * 0.05} />) : <div className="p-4 rounded-lg border border-border/30 text-center"><p className="text-xs text-muted-foreground">No 3-itemsets found</p></div>) : <div className="p-4 rounded-lg border border-dashed border-border/30 text-center"><Icons.Trophy className="w-6 h-6 text-muted-foreground/50 mx-auto mb-2" /><p className="text-xs text-muted-foreground">Discover triplets last</p></div>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+        const StepExplainer = ({ step, minSupport, minSupportCount }) => {
+            const stepContent = [
+                { title: "Step 1: Look at Receipts 🧾", simple: "Transactions", description: "Each row is one customer's shopping basket. Goal: find patterns.", color: "primary" },
+                { title: "Step 2: Flip the View 🔄", simple: "Vertical Format", description: "Convert 'Receipt → Items' to 'Item → Receipt Numbers'. This is key to Eclat!", color: "primary" },
+                { title: "Step 3: Check Popularity ⭐", simple: "Filter by Support", description: `Remove rare items. Must appear in at least ${minSupportCount} receipts (${minSupport}%).`, color: "secondary" },
+                { title: "Step 4: Find Pairs 🔗", simple: "Intersections", description: "Find overlapping receipt numbers. Overlap = Bought together.", color: "accent" },
+                { title: "Step 5: Bigger Patterns 🏆", simple: "3+ Items", description: "Intersect pairs to find triplets. Keep going until no overlaps remain.", color: "success" }
+            ];
+            const content = stepContent[step] || stepContent[0];
+            return (
+                <AnimatePresence mode="wait">
+                    <motion.div
+                        key={step}
+                        initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }} transition={{ duration: 0.3 }}
+                        className={`p-5 rounded-xl border backdrop-blur-sm bg-${content.color}/5 border-${content.color}/30`}
+                    >
+                        <div className="flex items-center gap-4">
+                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl font-bold bg-${content.color}/20 text-${content.color}`}>{step + 1}</div>
+                            <div>
+                                <h3 className="font-bold text-foreground text-lg">{content.title}</h3>
+                                <p className="text-sm text-foreground/80">{content.description}</p>
+                            </div>
+                        </div>
+                    </motion.div>
+                </AnimatePresence>
+            );
+        };
+        const IntroTutorial = ({ onStart }) => {
+            const [page, setPage] = useState(0);
+            const pages = [
+                { title: "Welcome to Eclat! 👋", content: <div className="space-y-4"><p>Imagine owning a store. You want to know: "If someone buys Bread, do they also buy Milk?" Eclat finds these patterns automatically using math!</p></div> },
+                { title: "How Eclat Works 🔍", content: <div className="space-y-4"><p>Most algorithms scan receipts one by one (slow). Eclat uses a trick: it lists <strong>Transaction IDs (TIDs)</strong> for each item. Then it just compares lists of numbers!</p></div> },
+                { title: "Let's Simluate! 🚀", content: <div className="space-y-4"><p>We have 6 receipts. You can control the speed, hover over items to see connections, and adjust the 'Support' threshold. Ready?</p></div> }
+            ];
+            return (
+                <div className="fixed inset-0 bg-background/90 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+                    <motion.div initial={{ scale: 0.9 }} animate={{ scale: 1 }} className="max-w-md w-full bg-card border border-border rounded-xl p-6 shadow-2xl">
+                        <div className="text-center mb-6">
+                            <h2 className="text-2xl font-bold text-primary mb-2">{pages[page].title}</h2>
+                            <div className="text-muted-foreground">{pages[page].content}</div>
+                        </div>
+                        <div className="flex justify-between items-center">
+                            <div className="flex gap-1">{pages.map((_, i) => <div key={i} className={`w-2 h-2 rounded-full ${i===page?'bg-primary':'bg-muted'}`} />)}</div>
+                            {page < pages.length - 1 ? <Button onClick={() => setPage(p => p+1)}>Next <Icons.ChevronRight className="w-4 h-4 ml-1"/></Button> : <Button onClick={onStart}>Start <Icons.Play className="w-4 h-4 ml-1"/></Button>}
+                        </div>
+                    </motion.div>
+                </div>
+            );
+        };
+        const GlossaryPanel = ({ isOpen, onClose }) => {
+            const terms = [
+                { t: "Transaction", d: "A single shopping receipt (e.g., T1)" },
+                { t: "TID", d: "Transaction ID (the number of the receipt)" },
+                { t: "Support", d: "How frequently an item appears (%)" },
+                { t: "Itemset", d: "A collection of one or more items" },
+                { t: "Intersection", d: "Finding common numbers in two lists" }
+            ];
+            return (
+                <AnimatePresence>
+                    {isOpen && (
+                        <>
+                            <div className="fixed inset-0 bg-background/50 z-40" onClick={onClose} />
+                            <motion.div initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} className="fixed right-0 top-0 h-full w-80 bg-card border-l border-border z-50 p-6 shadow-xl">
+                                <div className="flex justify-between items-center mb-6">
+                                    <h2 className="font-bold text-lg">Glossary</h2>
+                                    <button onClick={onClose}><Icons.X className="w-5 h-5" /></button>
+                                </div>
+                                <div className="space-y-4">
+                                    {terms.map((item, i) => (
+                                        <div key={i} className="p-3 bg-muted/20 rounded-lg">
+                                            <div className="font-bold text-primary text-sm">{item.t}</div>
+                                            <div className="text-sm text-muted-foreground">{item.d}</div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </motion.div>
+                        </>
+                    )}
+                </AnimatePresence>
+            );
+        };
+        const TheoryPanel = () => {
+            const playSound = () => {
+                const audio = document.getElementById('clickSound');
+                if (audio) {
+                    audio.currentTime = 0;
+                    audio.play();
+                }
+            };
+            return (
+                <section className="mt-8 p-6 rounded-xl bg-card/80 border border-border/50 backdrop-blur-sm relative">
+                    <div className="flex items-center gap-3 mb-6">
+                        <div className="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center">
+                            <Icons.BookOpen className="w-5 h-5 text-indigo-400" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-bold text-foreground">Theoretical Background</h2>
+                            <p className="text-sm text-muted-foreground">Understanding the core concepts behind Eclat</p>
+                        </div>
+                    </div>
+                    <div className="grid md:grid-cols-2 gap-8 mb-12">
+                        <div className="space-y-4">
+                            <div className="p-4 rounded-lg bg-muted/20 border border-border/30">
+                                <h3 className="font-semibold text-primary mb-2 flex items-center gap-2">
+                                    1. Vertical Data Format
+                                </h3>
+                                <p className="text-sm text-muted-foreground leading-relaxed">
+                                    Traditional algorithms like Apriori use a <strong>Horizontal</strong> layout (Transaction ID → List of Items).
+                                    Eclat flips this to a <strong>Vertical</strong> layout (Item → List of Transaction IDs).
+                                    This transformation is the key to its speed, as it avoids repeatedly scanning the entire database.
+                                </p>
+                            </div>
+                            <div className="p-4 rounded-lg bg-muted/20 border border-border/30">
+                                <h3 className="font-semibold text-primary mb-2 flex items-center gap-2">
+                                    2. Set Intersection
+                                </h3>
+                                <p className="text-sm text-muted-foreground leading-relaxed">
+                                    To calculate the support of a new itemset (e.g., <span className="font-mono text-accent">{"{A, B}"}</span>), Eclat simply calculates the intersection of their TID sets:
+                                    <br/>
+                                    <code className="bg-background/50 px-1 rounded text-xs mt-1 block w-fit">TID(A) ∩ TID(B) = TID(A,B)</code>
+                                    The size of this resulting set is the support count.
+                                </p>
+                            </div>
+                        </div>
+                        <div className="space-y-4">
+                            <div className="p-4 rounded-lg bg-muted/20 border border-border/30">
+                                <h3 className="font-semibold text-primary mb-2 flex items-center gap-2">
+                                    3. Depth-First Search (DFS)
+                                </h3>
+                                <p className="text-sm text-muted-foreground leading-relaxed">
+                                    Unlike Apriori which uses Breadth-First Search (finding all pairs, then all triplets), Eclat uses <strong>Depth-First Search</strong>.
+                                    It creates long patterns quickly by extending a specific prefix (e.g., A -> AB -> ABC) before backtracking.
+                                </p>
+                            </div>
+                            <div className="p-4 rounded-lg bg-muted/20 border border-border/30">
+                                <h3 className="font-semibold text-primary mb-2 flex items-center gap-2">
+                                    4. Advantages
+                                </h3>
+                                <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                                    <li><strong>Speed:</strong> Generally faster than Apriori for dense datasets.</li>
+                                    <li><strong>Memory:</strong> Does not need to generate candidate sets explicitly.</li>
+                                    <li><strong>Efficiency:</strong> Intersection operations are computationally cheap on modern CPUs.</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Centered Button with Fixes */}
+                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center">
+                        <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+                        <a
+                            href="/eclat"
+                            onClick={playSound}
+                            className="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                </section>
+            );
+        };
+        // --- MAIN APP COMPONENT ---
+        const SAMPLE_TRANSACTIONS = [
+            { id: 1, items: ['Bread', 'Milk', 'Eggs'] },
+            { id: 2, items: ['Bread', 'Butter'] },
+            { id: 3, items: ['Milk', 'Butter', 'Eggs'] },
+            { id: 4, items: ['Bread', 'Milk', 'Butter'] },
+            { id: 5, items: ['Bread', 'Milk', 'Eggs', 'Butter'] },
+            { id: 6, items: ['Milk', 'Eggs'] },
+        ];
+        const ITEMS = ['Bread', 'Milk', 'Eggs', 'Butter'];
+        const EclatSimulation = () => {
+            const [showTutorial, setShowTutorial] = useState(true);
+            const [showGlossary, setShowGlossary] = useState(false);
+            const [step, setStep] = useState(0);
+            const [isPlaying, setIsPlaying] = useState(false);
+            const [minSupport, setMinSupport] = useState(50);
+            const [tidSets, setTidSets] = useState([]);
+            const [frequentItemsets, setFrequentItemsets] = useState([]);
+            const [highlightedTids, setHighlightedTids] = useState([]);
+            const [highlightedItem, setHighlightedItem] = useState(null);
+            const totalTransactions = SAMPLE_TRANSACTIONS.length;
+            const minSupportCount = Math.ceil((minSupport / 100) * totalTransactions);
+            // Core Logic
+            const buildTidSets = () => ITEMS.map(item => ({
+                item, tids: SAMPLE_TRANSACTIONS.filter(t => t.items.includes(item)).map(t => t.id)
+            }));
+            const intersect = (t1, t2) => t1.filter(x => t2.includes(x));
+            useEffect(() => {
+                if (step >= 1) setTidSets(buildTidSets());
+            }, [step]);
+            useEffect(() => {
+                if (!isPlaying) return;
+                const timer = setTimeout(() => {
+                    if (step < 4) setStep(s => s + 1);
+                    else setIsPlaying(false);
+                }, 3000);
+                return () => clearTimeout(timer);
+            }, [isPlaying, step]);
+            useEffect(() => {
+                if (step >= 2) {
+                    const currentTidSets = buildTidSets();
+                    const frequent = [];
+                    // 1-itemsets
+                    currentTidSets.forEach(ts => {
+                        if (ts.tids.length >= minSupportCount) frequent.push({ items: [ts.item], tids: ts.tids, support: (ts.tids.length / totalTransactions) * 100 });
+                    });
+                    // 2-itemsets
+                    if (step >= 3) {
+                        const freqItems = frequent.map(f => f.items[0]);
+                        for(let i=0; i<freqItems.length; i++) {
+                            for(let j=i+1; j<freqItems.length; j++) {
+                                const t1 = currentTidSets.find(t=>t.item===freqItems[i]).tids;
+                                const t2 = currentTidSets.find(t=>t.item===freqItems[j]).tids;
+                                const inter = intersect(t1, t2);
+                                if(inter.length >= minSupportCount) frequent.push({ items: [freqItems[i], freqItems[j]], tids: inter, support: (inter.length/totalTransactions)*100 });
+                            }
+                        }
+                    }
+                    // 3-itemsets
+                    if (step >= 4) {
+                        const pairs = frequent.filter(f => f.items.length === 2);
+                        for(let i=0; i<pairs.length; i++) {
+                            for(let j=i+1; j<pairs.length; j++) {
+                                const combined = [...new Set([...pairs[i].items, ...pairs[j].items])];
+                                if(combined.length === 3) {
+                                    const inter = intersect(pairs[i].tids, pairs[j].tids);
+                                    if(inter.length >= minSupportCount && !frequent.some(f=>f.items.length===3 && f.items.every(it=>combined.includes(it)))) {
+                                        frequent.push({ items: combined, tids: inter, support: (inter.length/totalTransactions)*100 });
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    setFrequentItemsets(frequent);
+                }
+            }, [step, minSupport, minSupportCount]);
+            const handleHover = (item, tids = []) => {
+                setHighlightedItem(item);
+                setHighlightedTids(tids);
+            };
+            return (
+                <div className="min-h-screen bg-background grid-bg circuit-pattern pb-20">
+                    {showTutorial && <IntroTutorial onStart={() => setShowTutorial(false)} />}
+                    <GlossaryPanel isOpen={showGlossary} onClose={() => setShowGlossary(false)} />
+                    <header className="border-b border-border/50 backdrop-blur-sm bg-background/80 sticky top-0 z-30">
+                        <div className="container mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-4">
+                            <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center glow-primary"><Icons.Database className="w-5 h-5 text-primary"/></div>
+                                <div><h1 className="text-xl font-bold text-foreground text-glow">Eclat Algorithm</h1><p className="text-xs text-muted-foreground">Interactive Learning Simulation</p></div>
+                            </div>
+                            <div className="flex items-center gap-3">
+                                <Button variant="outline" size="sm" onClick={() => setShowGlossary(true)} className="gap-2"><Icons.HelpCircle className="w-4 h-4"/> Glossary</Button>
+                                <Button variant="ghost" size="sm" onClick={() => setShowTutorial(true)} className="gap-2"><Icons.RotateCw className="w-4 h-4"/> Tutorial</Button>
+                            </div>
+                        </div>
+                    </header>
+                    <main className="container mx-auto px-4 py-6">
+                        <motion.div initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} className="mb-6 p-4 rounded-xl bg-card/50 border border-border/50 backdrop-blur-sm">
+                            <div className="flex flex-wrap items-center justify-between gap-4">
+                                <div className="flex flex-wrap items-center gap-3">
+                                    <Button onClick={() => setIsPlaying(!isPlaying)} className="gap-2" variant={isPlaying ? "secondary" : "default"}>
+                                        {isPlaying ? <Icons.Pause className="w-4 h-4"/> : <Icons.Play className="w-4 h-4"/>} {isPlaying ? 'Pause' : 'Play'}
+                                    </Button>
+                                    <Button onClick={() => step < 4 && setStep(s => s+1)} variant="outline" disabled={step >= 4} className="gap-2">
+                                        <Icons.ChevronRight className="w-4 h-4"/> Next
+                                    </Button>
+                                    <Button onClick={() => { setStep(0); setIsPlaying(false); }} variant="ghost" className="gap-2"><Icons.RotateCcw className="w-4 h-4"/> Reset</Button>
+                                </div>
+                                <div className="flex items-center gap-4 w-full md:w-auto">
+                                    <span className="text-sm text-muted-foreground whitespace-nowrap">Support: {minSupport}%</span>
+                                    <Slider value={[minSupport]} onValueChange={([v]) => setMinSupport(v)} min={20} max={80} step={10} className="w-full md:w-32"/>
+                                </div>
+                            </div>
+                            <div className="mt-4 flex flex-wrap items-center gap-2">
+                                {['Transactions', 'Build TID Sets', 'Frequent 1-Items', '2-Item Intersections', '3-Item Patterns'].map((label, i) => (
+                                    <div key={i} className="flex items-center gap-2">
+                                        <motion.div animate={step === i ? { scale: [1, 1.1, 1] } : {}} className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all ${step >= i ? 'bg-primary text-primary-foreground glow-primary' : 'bg-muted text-muted-foreground'}`}>{i + 1}</motion.div>
+                                        <span className={`text-xs hidden sm:block ${step >= i ? 'text-foreground' : 'text-muted-foreground'}`}>{label}</span>
+                                        {i < 4 && <Icons.ChevronRight className="w-4 h-4 text-muted-foreground hidden sm:block"/>}
+                                    </div>
+                                ))}
+                            </div>
+                        </motion.div>
+                        <StepExplainer step={step} minSupport={minSupport} minSupportCount={minSupportCount} />
+                        {step === 0 && <div className="mt-4"><BeginnerTip title="🆕 New to this?" defaultOpen={true}><p>Think of this like looking at <strong>grocery store receipts</strong>. Each row (T1, T2...) is one customer's shopping basket.</p></BeginnerTip></div>}
+                        {step === 1 && <div className="mt-4"><BeginnerTip title="🔄 Why did we flip the data?"><p><strong>Before:</strong> "Receipt 1 has Bread" (horizontal). <strong>After:</strong> "Bread is in Receipt 1" (vertical). This makes finding pairs faster!</p></BeginnerTip></div>}
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
+                            <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
+                                <TransactionPanel transactions={SAMPLE_TRANSACTIONS} highlightedTids={highlightedTids} step={step} />
+                            </motion.div>
+                            <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }}>
+                                <TidSetPanel tidSets={tidSets} step={step} minSupportCount={minSupportCount} onItemHover={handleHover} highlightedItem={highlightedItem} />
+                            </motion.div>
+                        </div>
+                        <AnimatePresence>
+                            {step >= 3 && (
+                                <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mt-6">
+                                    <IntersectionVisualizer tidSets={tidSets} minSupportCount={minSupportCount} step={step} />
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                        <AnimatePresence>
+                            {step >= 2 && (
+                                <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mt-6">
+                                    <FrequentItemsetsPanel itemsets={frequentItemsets} step={step} onItemsetHover={handleHover} />
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                        <TheoryPanel />
+                    </main>
+                </div>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<EclatSimulation />);
+    </script>
+    {% endraw %}
+</body>
+</html>

templates/Gaussian-Mixture-Models.html CHANGED Viewed

@@ -177,6 +177,52 @@
     <div class="container">
         <h1>🌌 Study Guide: Gaussian Mixture Models (GMM)</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story-gmm">
             <p><strong>Story-style intuition: The Expert Fruit Sorter</strong></p>

     <div class="container">
         <h1>🌌 Study Guide: Gaussian Mixture Models (GMM)</h1>
+          <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/gaussian-mixture-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story-gmm">
             <p><strong>Story-style intuition: The Expert Fruit Sorter</strong></p>

templates/Gradient-Descen.html CHANGED Viewed

@@ -150,6 +150,53 @@
     <div class="container">
         <h1>Gradient Descent Study Guide</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>The Story: The Lost Hiker</strong></p>

     <div class="container">
         <h1>Gradient Descent Study Guide</h1>
+         <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/gradient-descent-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>The Story: The Lost Hiker</strong></p>

templates/Independent-Component-Analysis.html CHANGED Viewed

@@ -192,6 +192,53 @@
     <div class="container">
         <h1>🎙️ Study Guide: Independent Component Analysis (ICA)</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story-ica">
             <p><strong>Story-style intuition: The Cocktail Party Problem</strong></p>

     <div class="container">
         <h1>🎙️ Study Guide: Independent Component Analysis (ICA)</h1>
+          <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/ica-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story-ica">
             <p><strong>Story-style intuition: The Cocktail Party Problem</strong></p>

templates/Linear-Discriminant-Analysis.html CHANGED Viewed

@@ -177,6 +177,53 @@
     <div class="container">
         <h1>🔍 Study Guide: Linear Discriminant Analysis (LDA)</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story-lda">
             <p><strong>Story-style intuition: The Smart Photographer</strong></p>

     <div class="container">
         <h1>🔍 Study Guide: Linear Discriminant Analysis (LDA)</h1>
+          <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/lda-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story-lda">
             <p><strong>Story-style intuition: The Smart Photographer</strong></p>

templates/Naive-Bayes-Simulator.html ADDED Viewed

	@@ -0,0 +1,730 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Naive Bayes Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --background: #05080a;
+            --primary: #ff0055; /* Apple Red */
+            --secondary: #ffcc00; /* Orange Orange */
+            --accent: #00ffff;
+            --surface: #0a1014;
+            --border: #1e293b;
+        }
+        body {
+            background-color: var(--background);
+            color: #f8fafc;
+            font-family: 'Space Grotesk', sans-serif;
+            margin: 0;
+            overflow-x: hidden;
+        }
+        .glass {
+            background: rgba(10, 16, 20, 0.85);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(30, 41, 59, 0.5);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
+        .canvas-container {
+            width: 100%;
+            height: 50vh; /* Responsive height */
+            min-height: 400px;
+            max-height: 600px;
+            position: relative;
+            background: radial-gradient(circle at center, #111827 0%, #000000 100%);
+            border-radius: 1rem;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            cursor: grab;
+        }
+        .canvas-container:active { cursor: grabbing; }
+        .learning-log {
+            height: 120px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
+        input[type=range] {
+            -webkit-appearance: none;
+            width: 100%;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 6px;
+            cursor: pointer;
+            background: #1e293b;
+            border-radius: 3px;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            height: 18px;
+            width: 18px;
+            border-radius: 50%;
+            background: var(--accent);
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -6px;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+        .math-box {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 10px;
+        }
+        .hidden { display: none; }
+    </style>
+</head>
+<body class="p-4 md:p-6 lg:p-8">
+    <div class="max-w-7xl mx-auto grid lg:grid-cols-[1fr_380px] gap-6 lg:gap-8">
+        <!-- Left Side: Visualizer -->
+        <div class="flex flex-col gap-4">
+            <header>
+                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
+                    <div>
+                        <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">3D Naive Bayes <span class="text-cyan-400">Viz</span></h1>
+                        <p class="text-slate-400 text-sm max-w-xl">
+                            A classifier that learns by shaping 3D probability clouds. It assumes dimensions (Weight, Sweetness, Color) are independent.
+                        </p>
+                            <!-- Centered Button --> <div class="absolute left-1/2 -translate-x-1/2 flex items-center"> <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio> <a href="/naive_bayes" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                    </div>
+                </div>
+            </header>
+            <div class="relative">
+                <!-- 3D Canvas -->
+                <div class="canvas-container shadow-2xl" id="container">
+                    <div id="three-canvas" class="w-full h-full"></div>
+                    <!-- Top Overlays (Inside Canvas) -->
+                    <div class="absolute top-4 left-4 pointer-events-none flex flex-col gap-2 z-10 max-w-[200px]">
+                        <div class="glass px-3 py-2 rounded-lg">
+                            <div class="text-[10px] text-slate-500 font-mono uppercase tracking-widest">Status</div>
+                            <div id="status-text" class="text-xs font-mono text-cyan-400 mt-1 uppercase font-bold animate-pulse">Waiting to Learn</div>
+                        </div>
+                        <div class="glass px-3 py-2 rounded-lg flex flex-col gap-1">
+                             <div class="text-[10px] text-slate-500 font-mono uppercase tracking-widest mb-1">Legend</div>
+                            <div class="flex items-center gap-2 text-[10px] font-bold text-white"><span class="w-2.5 h-2.5 rounded-full bg-[#ff0055] shadow-[0_0_8px_#ff0055]"></span> Apple Class</div>
+                            <div class="flex items-center gap-2 text-[10px] font-bold text-white"><span class="w-2.5 h-2.5 rounded-full bg-[#ffcc00] shadow-[0_0_8px_#ffcc00]"></span> Orange Class</div>
+                            <div class="flex items-center gap-2 text-[10px] font-bold text-white"><span class="w-2.5 h-2.5 rounded-full bg-white border border-slate-500"></span> Mystery Fruit</div>
+                        </div>
+                    </div>
+                    <!-- Measurement Label (Inside Canvas) -->
+                    <div class="absolute top-4 right-4 pointer-events-none text-right z-10">
+                        <div class="glass px-3 py-2 rounded-lg">
+                            <div class="text-[10px] text-slate-500 font-mono uppercase tracking-widest">Input Features</div>
+                            <div id="pos-display" class="text-xs font-mono text-cyan-400 mt-1 uppercase">W:0.0 S:0.0 C:0.0</div>
+                        </div>
+                    </div>
+                    <!-- Instructions Overlay (Mobile/Desktop) -->
+                    <div class="absolute bottom-4 left-4 pointer-events-none z-10 hidden md:block">
+                        <div class="glass px-3 py-2 rounded-lg text-[10px] text-slate-400">
+                            <b>Left-Click</b> Rotate &nbsp;|&nbsp; <b>Right-Click</b> Pan &nbsp;|&nbsp; <b>Shift+Drag</b> Lift Y-Axis
+                        </div>
+                    </div>
+                </div>
+                <!-- Result Card: Below on Mobile, Absolute Overlay on Desktop -->
+                <div class="mt-4 md:mt-0 md:absolute md:bottom-4 md:right-4 z-20 w-full md:w-80">
+                    <div class="glass p-4 rounded-xl shadow-xl border border-slate-700/50">
+                        <div class="flex justify-between items-center mb-3">
+                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Prediction Engine</div>
+                            <div id="uncertainty-badge" class="hidden text-[9px] bg-slate-700 text-white px-2 py-0.5 rounded font-mono">UNCERTAIN</div>
+                        </div>
+                        <!-- Apple Calc -->
+                        <div class="space-y-1 mb-3">
+                            <div class="flex justify-between text-[10px] text-[#ff0055] font-bold uppercase items-center">
+                                <span>Apple Likelihood</span>
+                                <span id="prob-a-val" class="text-xs">50%</span>
+                            </div>
+                            <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
+                                <div id="bar-a" class="h-full bg-[#ff0055] transition-all duration-300" style="width: 50%"></div>
+                            </div>
+                            <div class="math-box text-[9px] text-slate-500 flex justify-between px-1">
+                                <span>Prior(<span id="prior-a">.5</span>)</span>
+                                <span>×</span>
+                                <span>L(<span id="total-l-a">0</span>)</span>
+                            </div>
+                        </div>
+                        <!-- Orange Calc -->
+                        <div class="space-y-1 mb-4">
+                            <div class="flex justify-between text-[10px] text-[#ffcc00] font-bold uppercase items-center">
+                                <span>Orange Likelihood</span>
+                                <span id="prob-b-val" class="text-xs">50%</span>
+                            </div>
+                             <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
+                                <div id="bar-b" class="h-full bg-[#ffcc00] transition-all duration-300" style="width: 50%"></div>
+                            </div>
+                             <div class="math-box text-[9px] text-slate-500 flex justify-between px-1">
+                                <span>Prior(<span id="prior-b">.5</span>)</span>
+                                <span>×</span>
+                                <span>L(<span id="total-l-b">0</span>)</span>
+                            </div>
+                        </div>
+                        <div class="pt-3 border-t border-slate-700/50 text-center">
+                             <div class="text-[9px] text-slate-500 uppercase font-bold mb-1">Final Classification</div>
+                             <div id="result-text" class="text-2xl font-bold text-white uppercase tracking-tighter">NEUTRAL</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- The Learning Log -->
+            <div class="glass rounded-xl p-4 flex flex-col h-40">
+                <h3 class="text-xs font-bold text-white mb-2 flex items-center gap-2 shrink-0">
+                    <span class="text-cyan-400">⚡</span> System Logs
+                </h3>
+                <div id="learning-log" class="learning-log text-xs font-mono text-slate-400 space-y-1.5 pr-2">
+                    <div>> System initialized.</div>
+                    <div>> Waiting for training data...</div>
+                </div>
+            </div>
+        </div>
+        <!-- Right Side: Controls -->
+        <aside class="space-y-6">
+            <div class="glass rounded-xl p-5 space-y-6">
+                <h2 class="text-lg font-bold text-white flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-cyan-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.532 1.532 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.532 1.532 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /></svg>
+                    Control Panel
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="text-xs font-bold text-slate-400 uppercase">Search Variance (Alpha)</label>
+                            <span id="alpha-value" class="text-cyan-400 font-mono text-sm bg-cyan-950 px-2 rounded">1.00</span>
+                        </div>
+                        <input type="range" id="alpha-slider" min="0.1" max="5.0" step="0.1" value="1.0">
+                        <p class="text-[10px] text-slate-500 mt-2">
+                            Higher alpha = wider probability clouds (High Bias). Lower alpha = tighter clouds (High Variance).
+                        </p>
+                    </div>
+                    <div class="grid grid-cols-1 gap-3 pt-2">
+                        <button id="btn-toggle" class="group relative flex items-center justify-center gap-2 py-3 rounded-lg font-bold text-black bg-cyan-400 hover:bg-cyan-300 transition-all overflow-hidden">
+                            <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                            <span id="toggle-icon">▶</span> <span id="toggle-text">Start Training</span>
+                        </button>
+                        <button id="btn-reset" class="flex items-center justify-center gap-2 py-3 rounded-lg border border-slate-700 hover:bg-slate-800 hover:border-slate-600 transition-all font-bold text-sm text-slate-300">
+                            Reset Simulation
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Scenario Selection -->
+            <div class="glass rounded-xl p-5 space-y-3">
+                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-1">Data Scenario</h3>
+                <div class="grid grid-cols-2 gap-2">
+                    <button onclick="selectScenario(0)" id="scen-0" class="text-[10px] py-2.5 px-2 rounded border border-cyan-500/50 bg-cyan-500/10 text-cyan-400 font-bold uppercase transition-all">Easy (Clustered)</button>
+                    <button onclick="selectScenario(1)" id="scen-1" class="text-[10px] py-2.5 px-2 rounded border border-slate-700 bg-transparent text-slate-400 hover:bg-slate-800 font-bold uppercase transition-all">Hard (Scattered)</button>
+                </div>
+                <p class="text-[10px] text-slate-500 leading-relaxed pt-2 border-t border-slate-800">
+                    Switching scenarios resets the robot's memory.
+                </p>
+            </div>
+            <!-- Learning Concept Card -->
+            <div class="glass rounded-xl p-5 border-l-2 border-cyan-400">
+                <h3 class="text-xs font-bold text-cyan-400 uppercase tracking-widest mb-2">How it works</h3>
+                <p class="text-[11px] text-slate-300 leading-relaxed">
+                    The robot calculates the center (mean) and spread (variance) of the points it sees.
+                    <br><br>
+                    To predict the mystery fruit, it measures the distance to each cloud center relative to the cloud's size.
+                    <br><br>
+                    <span class="text-white font-bold">Naive Assumption:</span> It processes Width, Sweetness, and Color completely separately, then multiplies the results.
+                </p>
+            </div>
+        </aside>
+    </div>
+    <script>
+        // --- DATA CONFIG ---
+        const SCENARIOS = [
+            { name: 'Clustered', points: 80, spread: 1.2 },
+            { name: 'Scattered', points: 200, spread: 3.5 }
+        ];
+        let currentScenario = SCENARIOS[0];
+        let dataPoints = [];
+        let processedIdx = 0;
+        let isRunning = false;
+        let loopId = null;
+        let alpha = 1.0;
+        // Model State
+        let model = [
+            { name: 'Apple', color: 0xff0055, count: 0, mean: {x:0, y:0, z:0}, var: {x:1, y:1, z:1}, score: 0 },
+            { name: 'Orange', color: 0xffcc00, count: 0, mean: {x:0, y:0, z:0}, var: {x:1, y:1, z:1}, score: 0 }
+        ];
+        // --- THREE.JS SETUP ---
+        const container = document.getElementById('container');
+        const scene = new THREE.Scene();
+        // Dark gradient background effect via clear color not possible easily, handled via CSS
+        const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
+        let cameraRadius = 35;
+        let cameraPhi = Math.PI / 2.5;
+        let cameraTheta = Math.PI / 4;
+        function updateCameraPosition() {
+            camera.position.x = cameraRadius * Math.sin(cameraPhi) * Math.sin(cameraTheta);
+            camera.position.y = cameraRadius * Math.cos(cameraPhi);
+            camera.position.z = cameraRadius * Math.sin(cameraPhi) * Math.cos(cameraTheta);
+            camera.lookAt(0, 0, 0);
+        }
+        updateCameraPosition();
+        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        document.getElementById('three-canvas').appendChild(renderer.domElement);
+        // Lighting
+        scene.add(new THREE.AmbientLight(0xffffff, 0.7));
+        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        dirLight.position.set(10, 20, 10);
+        scene.add(dirLight);
+        // Axes & Grid
+        const grid = new THREE.GridHelper(30, 30, 0x1e293b, 0x0f172a);
+        grid.position.y = -5;
+        scene.add(grid);
+        // Custom Axes
+        function createAxis(start, end, color) {
+            const points = [start, end];
+            const geometry = new THREE.BufferGeometry().setFromPoints(points);
+            const material = new THREE.LineBasicMaterial({ color: color });
+            return new THREE.Line(geometry, material);
+        }
+        // X (Red), Y (Green), Z (Blue)
+        scene.add(createAxis(new THREE.Vector3(-15, -5, 0), new THREE.Vector3(15, -5, 0), 0x334155));
+        scene.add(createAxis(new THREE.Vector3(0, -15, 0), new THREE.Vector3(0, 15, 0), 0x334155));
+        scene.add(createAxis(new THREE.Vector3(0, -5, -15), new THREE.Vector3(0, -5, 15), 0x334155));
+        // Data Points Group
+        const pointGroup = new THREE.Group();
+        scene.add(pointGroup);
+        // Mystery Fruit (Interactive)
+        const mysteryFruitMesh = new THREE.Mesh(
+            new THREE.SphereGeometry(0.7, 32, 32),
+            new THREE.MeshStandardMaterial({
+                color: 0xffffff,
+                roughness: 0.2,
+                metalness: 0.1,
+                emissive: 0xffffff,
+                emissiveIntensity: 0.2
+            })
+        );
+        mysteryFruitMesh.position.set(0, 0, 0); // Start neutral
+        scene.add(mysteryFruitMesh);
+        // Ring indicator for mystery fruit
+        const ringGeo = new THREE.RingGeometry(0.8, 0.9, 32);
+        const ringMat = new THREE.MeshBasicMaterial({ color: 0x00ffff, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
+        const ring = new THREE.Mesh(ringGeo, ringMat);
+        ring.rotation.x = -Math.PI / 2;
+        mysteryFruitMesh.add(ring);
+        // Measurement Lines
+        const measureLines = new THREE.LineSegments(
+            new THREE.BufferGeometry(),
+            new THREE.LineDashedMaterial({ color: 0x00ffff, dashSize: 0.4, gapSize: 0.2, opacity: 0.5, transparent: true })
+        );
+        // Fixed: Removed premature call to computeLineDistances() on empty geometry
+        scene.add(measureLines);
+        // Gaussian Clouds (Visualizing Variance)
+        const clouds = model.map(m => {
+            const mesh = new THREE.Mesh(
+                new THREE.SphereGeometry(1, 32, 32),
+                new THREE.MeshBasicMaterial({
+                    color: m.color,
+                    transparent: true,
+                    opacity: 0.1,
+                    wireframe: true,
+                    depthWrite: false
+                })
+            );
+            mesh.visible = false; // Hide until training starts
+            scene.add(mesh);
+            return mesh;
+        });
+        // --- MATH & LOGIC ---
+        function gaussian(x, mean, variance) {
+            // Prevent division by zero or extremely small variance
+            const v = Math.max(variance, 0.1) + (alpha * 0.2);
+            // Add tiny epsilon to avoid pure 0 underflow in exp
+            return (1 / Math.sqrt(2 * Math.PI * v)) * Math.exp(-Math.pow(x - mean, 2) / (2 * v)) + 1e-9;
+        }
+        function generateData() {
+            dataPoints = [];
+            pointGroup.clear();
+            // Offsets to make them distinct
+            const appleCenter = { x: -6, y: -2, z: -4 };
+            const orangeCenter = { x: 6, y: 3, z: 4 };
+            model.forEach((m, i) => {
+                const center = i === 0 ? appleCenter : orangeCenter;
+                for (let j = 0; j < currentScenario.points / 2; j++) {
+                    const x = center.x + (Math.random() - 0.5) * currentScenario.spread * 5;
+                    const y = center.y + (Math.random() - 0.5) * currentScenario.spread * 5;
+                    const z = center.z + (Math.random() - 0.5) * currentScenario.spread * 5;
+                    dataPoints.push({ x, y, z, classId: i });
+                    const p = new THREE.Mesh(
+                        new THREE.SphereGeometry(0.2, 8, 8),
+                        new THREE.MeshBasicMaterial({ color: m.color, transparent: true, opacity: 0.6 })
+                    );
+                    p.position.set(x, y, z);
+                    p.visible = false;
+                    pointGroup.add(p);
+                }
+            });
+            // Shuffle
+            dataPoints.sort(() => Math.random() - 0.5);
+        }
+        function trainStep() {
+            if (processedIdx >= dataPoints.length) {
+                stopTraining();
+                addLog("Training complete. Model optimized.");
+                return;
+            }
+            // Process a batch for speed
+            const batchSize = 2;
+            for(let k=0; k<batchSize && processedIdx < dataPoints.length; k++) {
+                const p = dataPoints[processedIdx];
+                const m = model[p.classId];
+                // Online Mean/Variance Update (Welford's algorithm simplified)
+                m.count++;
+                const lr = 1.0 / (m.count + 5); // Decaying learning rate for stability
+                // Update Mean
+                const oldMean = { ...m.mean };
+                m.mean.x += lr * (p.x - m.mean.x);
+                m.mean.y += lr * (p.y - m.mean.y);
+                m.mean.z += lr * (p.z - m.mean.z);
+                // Update Variance (Approximation for visualizer)
+                const varLr = 0.1;
+                m.var.x = (1 - varLr) * m.var.x + varLr * Math.pow(p.x - m.mean.x, 2);
+                m.var.y = (1 - varLr) * m.var.y + varLr * Math.pow(p.y - m.mean.y, 2);
+                m.var.z = (1 - varLr) * m.var.z + varLr * Math.pow(p.z - m.mean.z, 2);
+                pointGroup.children[processedIdx].visible = true;
+                processedIdx++;
+            }
+            if (processedIdx % 10 === 0) updateVisuals();
+            predict();
+        }
+        function updateVisuals() {
+            model.forEach((m, i) => {
+                clouds[i].visible = true;
+                clouds[i].position.set(m.mean.x, m.mean.y, m.mean.z);
+                // Visual scale based on standard deviation (sqrt of variance)
+                // Add base size so it doesn't disappear
+                const sx = Math.sqrt(m.var.x) * 2.5 + alpha;
+                const sy = Math.sqrt(m.var.y) * 2.5 + alpha;
+                const sz = Math.sqrt(m.var.z) * 2.5 + alpha;
+                clouds[i].scale.set(sx, sy, sz);
+            });
+        }
+        function predict() {
+            const p = mysteryFruitMesh.position;
+            const totalPoints = Math.max(1, processedIdx);
+            model.forEach(m => {
+                // Naive Bayes Formula: P(Class|Features) ∝ P(Class) * P(F1|Class) * P(F2|Class)...
+                // 1. Prior: Frequency of class (laplace smoothing)
+                const prior = (m.count + 1) / (totalPoints + 2);
+                // 2. Likelihoods for each dimension (Gaussian)
+                const lW = gaussian(p.x, m.mean.x, m.var.x);
+                const lC = gaussian(p.y, m.mean.y, m.var.y);
+                const lS = gaussian(p.z, m.mean.z, m.var.z);
+                // Store for UI
+                m.lastCalc = { prior, lW, lS, lC };
+                m.score = prior * lW * lS * lC;
+            });
+            // Normalize probabilities
+            const totalScore = model[0].score + model[1].score;
+            let probA = 0, probB = 0;
+            if (totalScore > 0) {
+                probA = (model[0].score / totalScore) * 100;
+                probB = (model[1].score / totalScore) * 100;
+            } else {
+                // Handle 0 score / underflow case
+                probA = 50;
+                probB = 50;
+            }
+            updateUI(probA, probB);
+            updateMeasurementLines();
+        }
+        function updateUI(probA, probB) {
+            // Bars
+            document.getElementById('bar-a').style.width = `${probA}%`;
+            document.getElementById('bar-b').style.width = `${probB}%`;
+            // Text
+            document.getElementById('prob-a-val').innerText = probA.toFixed(1) + '%';
+            document.getElementById('prob-b-val').innerText = probB.toFixed(1) + '%';
+            // Details
+            document.getElementById('prior-a').innerText = model[0].lastCalc?.prior.toFixed(2) || '0.5';
+            document.getElementById('prior-b').innerText = model[1].lastCalc?.prior.toFixed(2) || '0.5';
+            // Just showing one likelihood sum for brevity in UI
+            const totLA = (model[0].lastCalc?.lW + model[0].lastCalc?.lC + model[0].lastCalc?.lS) || 0;
+            const totLB = (model[1].lastCalc?.lW + model[1].lastCalc?.lC + model[1].lastCalc?.lS) || 0;
+            document.getElementById('total-l-a').innerText = totLA.toFixed(2);
+            document.getElementById('total-l-b').innerText = totLB.toFixed(2);
+            // Winner Logic (with Neutral zone)
+            const resultText = document.getElementById('result-text');
+            const badge = document.getElementById('uncertainty-badge');
+            if (Math.abs(probA - probB) < 2) {
+                // Too close to call
+                resultText.innerText = "NEUTRAL";
+                resultText.style.color = "#94a3b8"; // slate-400
+                badge.classList.remove('hidden');
+            } else if (probA > probB) {
+                resultText.innerText = "APPLE";
+                resultText.style.color = "#ff0055";
+                badge.classList.add('hidden');
+            } else {
+                resultText.innerText = "ORANGE";
+                resultText.style.color = "#ffcc00";
+                badge.classList.add('hidden');
+            }
+        }
+        function updateMeasurementLines() {
+            const p = mysteryFruitMesh.position;
+            // Lines projecting to axes for visual reference
+            const points = [
+                p.x, p.y, p.z,   p.x, -5, p.z,  // To floor
+                p.x, -5, p.z,    p.x, -5, 0,    // On floor to X-axis
+                p.x, -5, p.z,    0, -5, p.z     // On floor to Z-axis
+            ];
+            const vertices = [];
+            for(let i=0; i<points.length; i+=3) {
+                vertices.push(new THREE.Vector3(points[i], points[i+1], points[i+2]));
+            }
+            measureLines.geometry.setFromPoints(vertices);
+            measureLines.computeLineDistances();
+            document.getElementById('pos-display').innerText =
+                `W:${p.x.toFixed(1)} S:${p.z.toFixed(1)} C:${p.y.toFixed(1)}`;
+        }
+        // --- CONTROLS ---
+        function startTraining() {
+            if (isRunning) return;
+            isRunning = true;
+            document.getElementById('toggle-text').innerText = 'Pause';
+            document.getElementById('toggle-icon').innerText = '⏸';
+            document.getElementById('status-text').innerText = 'Training...';
+            document.getElementById('status-text').classList.remove('animate-pulse');
+            loopId = setInterval(trainStep, 50);
+        }
+        function stopTraining() {
+            isRunning = false;
+            document.getElementById('toggle-text').innerText = 'Resume';
+            document.getElementById('toggle-icon').innerText = '▶';
+            document.getElementById('status-text').innerText = 'Paused / Idle';
+            clearInterval(loopId);
+        }
+        function reset() {
+            stopTraining();
+            processedIdx = 0;
+            // Reset math model
+            model.forEach(m => {
+                m.count = 0;
+                m.mean = {x:0, y:0, z:0};
+                m.var = {x:1, y:1, z:1};
+                m.score = 0;
+            });
+            clouds.forEach(c => c.visible = false);
+            document.getElementById('toggle-text').innerText = 'Start Training';
+            document.getElementById('toggle-icon').innerText = '▶';
+            document.getElementById('status-text').innerText = 'Ready';
+            document.getElementById('status-text').classList.add('animate-pulse');
+            // Reset position
+            mysteryFruitMesh.position.set(0, 0, 0);
+            generateData();
+            addLog("Memory wiped. System reset.");
+            predict();
+        }
+        function selectScenario(idx) {
+            currentScenario = SCENARIOS[idx];
+            // Update UI buttons
+            document.getElementById('scen-0').className = idx === 0
+                ? "text-[10px] py-2.5 px-2 rounded border border-cyan-500/50 bg-cyan-500/10 text-cyan-400 font-bold uppercase transition-all shadow-[0_0_10px_rgba(34,211,238,0.2)]"
+                : "text-[10px] py-2.5 px-2 rounded border border-slate-700 bg-transparent text-slate-400 hover:bg-slate-800 font-bold uppercase transition-all";
+            document.getElementById('scen-1').className = idx === 1
+                ? "text-[10px] py-2.5 px-2 rounded border border-cyan-500/50 bg-cyan-500/10 text-cyan-400 font-bold uppercase transition-all shadow-[0_0_10px_rgba(34,211,238,0.2)]"
+                : "text-[10px] py-2.5 px-2 rounded border border-slate-700 bg-transparent text-slate-400 hover:bg-slate-800 font-bold uppercase transition-all";
+            reset();
+        }
+        function addLog(msg) {
+            const log = document.getElementById('learning-log');
+            const div = document.createElement('div');
+            const time = new Date().toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute:'2-digit', second:'2-digit'});
+            div.innerHTML = `<span class="text-slate-600">[${time}]</span> ${msg}`;
+            log.prepend(div);
+        }
+        // --- EVENTS ---
+        document.getElementById('btn-toggle').onclick = () => isRunning ? stopTraining() : startTraining();
+        document.getElementById('btn-reset').onclick = reset;
+        document.getElementById('alpha-slider').oninput = (e) => {
+            alpha = parseFloat(e.target.value);
+            document.getElementById('alpha-value').innerText = alpha.toFixed(2);
+            updateVisuals();
+            predict();
+        };
+        // 3D Interaction Logic
+        let isMouseDown = false;
+        let mouseButton = 0;
+        let prevMouse = { x: 0, y: 0 };
+        container.addEventListener('mousedown', (e) => {
+            isMouseDown = true;
+            mouseButton = e.button;
+            prevMouse = { x: e.clientX, y: e.clientY };
+        });
+        window.addEventListener('mouseup', () => isMouseDown = false);
+        container.addEventListener('contextmenu', (e) => e.preventDefault());
+        container.addEventListener('mousemove', (e) => {
+            if (!isMouseDown) return;
+            const dx = e.clientX - prevMouse.x;
+            const dy = e.clientY - prevMouse.y;
+            // Left Click (0): Rotate Camera
+            if (mouseButton === 0 && !e.shiftKey) {
+                cameraTheta -= dx * 0.01;
+                cameraPhi = Math.max(0.1, Math.min(Math.PI - 0.1, cameraPhi - dy * 0.01));
+                updateCameraPosition();
+            }
+            // Shift + Drag: Lift Object
+            else if (e.shiftKey) {
+                mysteryFruitMesh.position.y -= dy * 0.1;
+                mysteryFruitMesh.position.y = Math.max(-10, Math.min(10, mysteryFruitMesh.position.y));
+                predict();
+            }
+            // Right Click (2): Move Object Plane
+            else if (mouseButton === 2 || (mouseButton === 0 && e.ctrlKey)) {
+                // Move relative to camera view roughly
+                const speed = 0.1;
+                const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+                forward.y = 0; forward.normalize();
+                const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion);
+                right.y = 0; right.normalize();
+                mysteryFruitMesh.position.addScaledVector(right, dx * speed);
+                mysteryFruitMesh.position.addScaledVector(forward, dy * speed);
+                // Bounds
+                ['x', 'y', 'z'].forEach(axis => {
+                    mysteryFruitMesh.position[axis] = Math.max(-14, Math.min(14, mysteryFruitMesh.position[axis]));
+                });
+                predict();
+            }
+            prevMouse = { x: e.clientX, y: e.clientY };
+        });
+        // Zoom
+        container.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            cameraRadius = Math.max(10, Math.min(60, cameraRadius + e.deltaY * 0.05));
+            updateCameraPosition();
+        }, { passive: false });
+        window.addEventListener('resize', () => {
+            camera.aspect = container.clientWidth / container.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(container.clientWidth, container.clientHeight);
+        });
+        // Animation Loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Spin the ring
+            ring.rotation.z -= 0.02;
+            renderer.render(scene, camera);
+        }
+        // Init
+        generateData();
+        predict();
+        animate();
+        updateUI(50, 50); // Initial neutral state
+    </script>
+</body>
+</html>

templates/Neural-Networks-for-Classification-three.html ADDED Viewed

	@@ -0,0 +1,916 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Network Playground</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        :root {
+            --background: 222 47% 6%;
+            --foreground: 210 40% 96%;
+            --card: 222 47% 8%;
+            --primary: 199 89% 48%;
+            --primary-foreground: 222 47% 6%;
+            --secondary: 280 65% 55%;
+            --secondary-foreground: 210 40% 98%;
+            --muted: 217 33% 15%;
+            --muted-foreground: 215 20% 55%;
+            --accent: 142 71% 45%;
+            --destructive: 0 84% 60%;
+            --destructive-foreground: 210 40% 98%;
+            --border: 217 33% 20%;
+            /* Custom neural network colors */
+            --node-input: 199 89% 48%;
+            --node-hidden: 280 65% 55%;
+            --node-positive: 142 71% 45%; /* Class A (Green) */
+            --node-negative: 350 89% 60%; /* Class B (Red) */
+            --radius: 0.75rem;
+        }
+        body {
+            background-color: hsl(var(--background));
+            color: hsl(var(--foreground));
+            font-family: system-ui, -apple-system, sans-serif;
+        }
+        .glass-panel {
+            background-color: hsla(var(--card), 0.6);
+            backdrop-filter: blur(16px);
+            border: 1px solid hsla(var(--border), 0.5);
+            border-radius: var(--radius);
+            box-shadow: 0 0 30px hsl(199 89% 48% / 0.1);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(280 65% 55%) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        /* Animation Utilities */
+        @keyframes flow {
+            0% { stroke-dashoffset: 20; }
+            100% { stroke-dashoffset: 0; }
+        }
+        .animate-flow {
+            animation: flow 1s linear infinite;
+        }
+        @keyframes pulse-glow {
+            0%, 100% { opacity: 1; filter: brightness(1); }
+            50% { opacity: 0.7; filter: brightness(1.2); }
+        }
+        .animate-node-pulse {
+            animation: pulse-glow 2s ease-in-out infinite;
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: hsl(var(--background)); }
+        ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
+        input[type=range] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: hsl(var(--primary));
+            cursor: pointer;
+            margin-top: -6px;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            background: hsl(var(--muted));
+            border-radius: 2px;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition-colors: 0.15s;
+            cursor: pointer;
+        }
+        .btn:disabled {
+            opacity: 0.5;
+            pointer-events: none;
+        }
+        .btn-glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; }
+        .btn-glass:hover { background: rgba(255,255,255,0.1); }
+        .btn-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+        .btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
+        .btn-glow {
+            background: hsl(var(--primary));
+            color: white;
+            box-shadow: 0 0 15px hsl(var(--primary)/0.5);
+        }
+        .btn-glow:hover { box-shadow: 0 0 25px hsl(var(--primary)/0.6); }
+        .tab-btn {
+            flex: 1;
+            padding: 0.375rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            border-radius: 0.375rem;
+            transition: all 0.2s;
+            color: hsl(var(--muted-foreground));
+        }
+        .tab-btn.active {
+            background-color: hsl(var(--card));
+            color: hsl(var(--primary));
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+<body class="min-h-screen p-4 selection:bg-[hsl(var(--primary))] selection:text-white">
+    <!-- Background Ambience -->
+    <div class="fixed inset-0 pointer-events-none overflow-hidden -z-10">
+        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[hsl(var(--primary)/0.1)] rounded-full blur-[100px]"></div>
+        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[hsl(var(--secondary)/0.1)] rounded-full blur-[100px]"></div>
+    </div>
+    <!-- Header -->
+    <header class="relative z-10 border-b border-white/10 bg-[hsl(var(--background)/0.8)] backdrop-blur-md sticky top-0 mb-8 rounded-xl">
+        <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="p-2 rounded-xl bg-[hsl(var(--primary)/0.2)] animate-pulse">
+                    <i data-lucide="brain" class="h-6 w-6 text-[hsl(var(--primary))]"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold gradient-text">Neural Network Playground</h1>
+                    <div class="absolute left-1/2 -translate-x-1/2 flex items-center"> <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio> <a href="/neural-network-classification" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                    <p class="text-xs text-[hsl(var(--muted-foreground))]">Interactive Classification Visualizer</p>
+                    <p class="text-xxl p-3 text-[hsl(var(--muted-foreground))]">After training you cant train agian and cant change output so if you want add a custom data in predefine data so add before training</p>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-4 text-sm text-[hsl(var(--muted-foreground))]">
+                <div class="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full">
+                    <i data-lucide="layers" class="h-4 w-4"></i>
+                    <span id="header-neurons-count">4 hidden neurons</span>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="relative z-10 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
+        <!-- Left Sidebar: Controls -->
+        <div class="lg:col-span-3 space-y-6">
+            <!-- Control Panel -->
+            <div class="glass-panel p-5 space-y-5">
+                <div>
+                    <h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">Data Class</h3>
+                    <div class="flex gap-2">
+                        <button onclick="setClass(1)" id="btn-class-a" class="btn btn-accent h-9 px-3 flex-1 text-sm">
+                            <div class="w-3 h-3 rounded-full bg-[hsl(var(--node-positive))] mr-2"></div> Class A
+                        </button>
+                        <button onclick="setClass(0)" id="btn-class-b" class="btn btn-glass h-9 px-3 flex-1 text-sm">
+                            <div class="w-3 h-3 rounded-full bg-[hsl(var(--node-negative))] mr-2"></div> Class B
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">
+                        Hidden Neurons: <span id="neurons-display" class="text-[hsl(var(--primary))]">4</span>
+                    </h3>
+                    <div class="flex items-center gap-3">
+                        <button onclick="changeNeurons(-1)" class="btn btn-glass h-10 w-10 p-0"><i data-lucide="minus" class="h-4 w-4"></i></button>
+                        <input type="range" min="1" max="8" value="4" class="flex-1" id="neurons-slider" oninput="changeNeuronsFromSlider(this.value)">
+                        <button onclick="changeNeurons(1)" class="btn btn-glass h-10 w-10 p-0"><i data-lucide="plus" class="h-4 w-4"></i></button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))] mb-3">
+                        Learning Rate: <span id="lr-display" class="text-[hsl(var(--secondary))]">0.50</span>
+                    </h3>
+                    <input type="range" min="1" max="100" value="50" class="w-full" id="lr-slider" oninput="changeLR(this.value)">
+                </div>
+                <div class="flex gap-2">
+                    <button id="btn-train" onclick="toggleTraining()" class="btn btn-glow flex-1 h-10 px-4">
+                        <i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network
+                    </button>
+                    <button onclick="resetApp()" class="btn btn-glass h-10 w-10 p-0">
+                        <i data-lucide="rotate-ccw" class="h-4 w-4"></i>
+                    </button>
+                </div>
+                <div id="accuracy-panel" class="text-center py-3 rounded-lg bg-white/5 hidden">
+                    <span class="text-sm text-[hsl(var(--muted-foreground))]">Accuracy: </span>
+                    <span id="accuracy-display" class="text-lg font-bold">0.0%</span>
+                </div>
+            </div>
+            <!-- Presets -->
+            <div class="glass-panel p-4 space-y-3">
+                <h3 class="text-sm font-medium text-[hsl(var(--muted-foreground))]">Presets</h3>
+                <div class="grid grid-cols-2 gap-2">
+                    <button onclick="loadPreset('Linear')" class="btn btn-glass flex flex-col h-auto py-3">
+                        <i data-lucide="waves" class="h-4 w-4 mb-1"></i> <span class="text-xs">Linear</span>
+                    </button>
+                    <button onclick="loadPreset('XOR')" class="btn btn-glass flex flex-col h-auto py-3">
+                        <i data-lucide="target" class="h-4 w-4 mb-1"></i> <span class="text-xs">XOR</span>
+                    </button>
+                    <button onclick="loadPreset('Circle')" class="btn btn-glass flex flex-col h-auto py-3">
+                        <i data-lucide="circle" class="h-4 w-4 mb-1"></i> <span class="text-xs">Circle</span>
+                    </button>
+                    <button onclick="loadPreset('Spiral')" class="btn btn-glass flex flex-col h-auto py-3">
+                        <i data-lucide="sparkles" class="h-4 w-4 mb-1"></i> <span class="text-xs">Spiral</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Logs -->
+            <div class="glass-panel p-4 space-y-3">
+                <div class="flex justify-between items-center text-sm font-medium text-[hsl(var(--muted-foreground))]">
+                    <span class="flex items-center gap-2"><i data-lucide="clock" class="h-4 w-4"></i> Training Log</span>
+                    <span id="epoch-display" class="text-[hsl(var(--primary))] animate-pulse hidden">Epoch 0</span>
+                </div>
+                <div class="w-full bg-white/10 rounded-full h-1.5 overflow-hidden">
+                    <div id="progress-bar" class="h-full bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--secondary))]" style="width: 0%"></div>
+                </div>
+                <div id="logs-container" class="space-y-1 max-h-32 overflow-y-auto">
+                    <!-- Logs go here -->
+                </div>
+            </div>
+        </div>
+        <!-- Center: Visualizations -->
+        <div class="lg:col-span-6 space-y-6">
+            <!-- Network Vis -->
+            <div class="glass-panel p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold flex items-center gap-2">
+                        <i data-lucide="brain" class="h-5 w-5 text-[hsl(var(--primary))]"></i> Network Architecture
+                    </h2>
+                </div>
+                <div class="flex justify-center" id="network-container">
+                    <!-- SVG Network goes here -->
+                </div>
+            </div>
+            <!-- Data Canvas -->
+            <div class="glass-panel p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold">Data & Decision Boundary</h2>
+                    <span class="text-xs px-2 py-1 bg-white/10 rounded text-[hsl(var(--primary))] font-mono">Points: <span id="points-count">0</span></span>
+                </div>
+                <div class="flex justify-center relative">
+                    <div class="relative">
+                        <canvas id="main-canvas" width="300" height="300" class="rounded-lg border border-white/10 cursor-crosshair shadow-2xl bg-black"></canvas>
+                        <div class="absolute -bottom-6 left-0 right-0 text-center text-xs text-muted-foreground text-[hsl(var(--muted-foreground))]">X Coordinate</div>
+                        <div class="absolute -left-6 top-1/2 -translate-y-1/2 -rotate-90 text-xs text-muted-foreground text-[hsl(var(--muted-foreground))]">Y Coordinate</div>
+                    </div>
+                </div>
+                <div class="mt-4 flex flex-wrap justify-center gap-4 text-xs text-[hsl(var(--muted-foreground))]">
+                    <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[hsl(var(--node-positive))]"></div> Class A</div>
+                    <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[hsl(var(--node-negative))]"></div> Class B</div>
+                    <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[hsl(var(--node-positive))/0.3]"></div> Prediction A</div>
+                    <div class="flex items-center gap-2"><div class="w-3 h-3 bg-[hsl(var(--node-negative))/0.3]"></div> Prediction B</div>
+                </div>
+            </div>
+        </div>
+        <!-- Right Sidebar: Explainers -->
+        <div class="lg:col-span-3 space-y-6">
+            <div class="w-full">
+                <div class="flex bg-white/5 p-1 rounded-lg mb-4">
+                    <button onclick="switchTab('howItWorks')" id="tab-howItWorks" class="tab-btn active"><i data-lucide="lightbulb" class="h-3 w-3 mr-1 inline"></i> How It Works</button>
+                    <button onclick="switchTab('learn')" id="tab-learn" class="tab-btn"><i data-lucide="sparkles" class="h-3 w-3 mr-1 inline"></i> Learn</button>
+                </div>
+                <div id="content-howItWorks" class="glass-panel p-5 space-y-4">
+                    <h3 class="text-lg font-semibold gradient-text">Live Prediction (Hover)</h3>
+                    <div class="space-y-4 text-sm">
+                        <div>
+                            <div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--node-input))]">
+                                <span class="w-5 h-5 rounded-full bg-[hsl(var(--node-input))/0.2] flex items-center justify-center text-xs">1</span> Input
+                            </div>
+                            <div class="bg-white/5 p-3 rounded-lg border border-white/10 font-mono text-xs">
+                                X: <span id="val-x">0.00</span><br>
+                                Y: <span id="val-y">0.00</span>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--node-hidden))]">
+                                <span class="w-5 h-5 rounded-full bg-[hsl(var(--node-hidden))/0.2] flex items-center justify-center text-xs">2</span> Hidden Layer
+                            </div>
+                            <div id="val-hidden" class="bg-white/5 p-3 rounded-lg border border-white/10 font-mono text-xs grid grid-cols-4 gap-1">
+                                <!-- Hidden values -->
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex items-center gap-2 mb-2 font-medium text-[hsl(var(--accent))]">
+                                <span class="w-5 h-5 rounded-full bg-[hsl(var(--accent))/0.2] flex items-center justify-center text-xs">3</span> Output
+                            </div>
+                            <div class="bg-white/5 p-3 rounded-lg border border-white/10">
+                                <div class="flex justify-between items-center">
+                                    <span class="text-xs text-gray-400">Raw: <span id="val-raw">0.0000</span></span>
+                                    <span id="val-class" class="font-bold text-gray-500">-</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="content-learn" class="glass-panel p-5 space-y-4 hidden">
+                    <div class="flex items-center gap-3">
+                        <div class="p-2 rounded-lg bg-[hsl(var(--primary))/0.2]"><i data-lucide="brain" class="h-5 w-5 text-[hsl(var(--primary))]"></i></div>
+                        <h3 class="font-semibold gradient-text">Training Process</h3>
+                    </div>
+                    <p class="text-sm text-gray-300 leading-relaxed">
+                        The network learns by "Backpropagation". It compares its guess to the real label, finds the error, and adjusts the weights backwards from output to input.
+                    </p>
+                    <div class="p-3 rounded-lg bg-white/5 text-xs text-gray-400 border border-white/10">
+                        💡 <strong>Tip:</strong> If the network gets stuck, try increasing neurons or clicking "Reset" to randomize weights.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // --- Neural Network Logic ---
+        class SimpleNeuralNetwork {
+            constructor(inputSize, hiddenSize, outputSize, learningRate) {
+                this.inputSize = inputSize;
+                this.hiddenSize = hiddenSize;
+                this.outputSize = outputSize;
+                this.learningRate = learningRate;
+                // Xavier initialization
+                const scale1 = Math.sqrt(2 / (this.inputSize + this.hiddenSize));
+                this.w1 = Array(this.hiddenSize).fill(0).map(() =>
+                    Array(this.inputSize).fill(0).map(() => (Math.random() * 2 - 1) * scale1)
+                );
+                this.b1 = Array(this.hiddenSize).fill(0);
+                const scale2 = Math.sqrt(2 / (this.hiddenSize + this.outputSize));
+                this.w2 = Array(this.outputSize).fill(0).map(() =>
+                    Array(this.hiddenSize).fill(0).map(() => (Math.random() * 2 - 1) * scale2)
+                );
+                this.b2 = Array(this.outputSize).fill(0);
+            }
+            sigmoid(x) { return 1 / (1 + Math.exp(-x)); }
+            sigmoidDeriv(y) { return y * (1 - y); }
+            forward(inputs) {
+                const hActivations = this.w1.map((weights, i) =>
+                    this.sigmoid(weights.reduce((acc, w, j) => acc + w * inputs[j], 0) + this.b1[i])
+                );
+                const outputs = this.w2.map((weights, i) =>
+                    this.sigmoid(weights.reduce((acc, w, j) => acc + w * hActivations[j], 0) + this.b2[i])
+                );
+                return { activations: [[...inputs], hActivations, outputs], output: outputs[0] };
+            }
+            predict(x, y) { return this.forward([x, y]).output; }
+            train(data, batchSize) {
+                for(let k = 0; k < batchSize * 5; k++) {
+                    const point = data[Math.floor(Math.random() * data.length)];
+                    const inputs = [point.x, point.y];
+                    const target = [point.label];
+                    const { activations } = this.forward(inputs);
+                    const hActivations = activations[1];
+                    const outputs = activations[2];
+                    const outputErrors = outputs.map((o, i) => target[i] - o);
+                    const outputGradients = outputs.map((o, i) => outputErrors[i] * this.sigmoidDeriv(o));
+                    const hiddenErrors = this.w1.map((_, i) =>
+                        this.w2.reduce((acc, weights, j) => acc + weights[i] * outputGradients[j], 0)
+                    );
+                    const hiddenGradients = hActivations.map((h, i) => hiddenErrors[i] * this.sigmoidDeriv(h));
+                    for(let i=0; i<this.outputSize; i++) {
+                        for(let j=0; j<this.hiddenSize; j++) {
+                            this.w2[i][j] += this.learningRate * outputGradients[i] * hActivations[j];
+                        }
+                        this.b2[i] += this.learningRate * outputGradients[i];
+                    }
+                    for(let i=0; i<this.hiddenSize; i++) {
+                        for(let j=0; j<this.inputSize; j++) {
+                            this.w1[i][j] += this.learningRate * hiddenGradients[i] * inputs[j];
+                        }
+                        this.b1[i] += this.learningRate * hiddenGradients[i];
+                    }
+                }
+            }
+            getWeights() { return [this.w1, this.w2]; }
+        }
+        // --- Application State ---
+        let state = {
+            dataPoints: [],
+            currentClass: 1,
+            hiddenNeurons: 4,
+            learningRate: 0.5,
+            isTraining: false,
+            network: null,
+            epoch: 0,
+            accuracy: 0,
+            activations: null,
+            predictions: [], // Store heatmap data here
+            logs: [],
+            lastProbe: { x: 0, y: 0 } // Track last cursor position for live updates
+        };
+        // --- Helper: Generate Grid Predictions ---
+        function generatePredictions() {
+            const gridSize = 30;
+            const grid = [];
+            for (let i = 0; i < gridSize; i++) {
+                const row = [];
+                for (let j = 0; j < gridSize; j++) {
+                    const x = (j / gridSize) * 2 - 1;
+                    const y = 1 - (i / gridSize) * 2;
+                    row.push(state.network.predict(x, y));
+                }
+                grid.push(row);
+            }
+            return grid;
+        }
+        // --- Initialization ---
+        function init() {
+            lucide.createIcons();
+            state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
+            state.predictions = generatePredictions(); // Initial heatmap
+            setupCanvas();
+            renderUI();
+            // Set initial dummy activations
+            state.activations = [[0,0], Array(state.hiddenNeurons).fill(0), [0]];
+            updateExplainers();
+        }
+        // --- UI Updates ---
+        function setClass(c) {
+            state.currentClass = c;
+            const btnA = document.getElementById('btn-class-a');
+            const btnB = document.getElementById('btn-class-b');
+            if(c === 1) {
+                btnA.classList.remove('btn-glass'); btnA.classList.add('btn-accent');
+                btnB.classList.add('btn-glass'); btnB.classList.remove('btn-destructive');
+            } else {
+                btnA.classList.add('btn-glass'); btnA.classList.remove('btn-accent');
+                btnB.classList.remove('btn-glass'); btnB.classList.add('btn-destructive');
+            }
+        }
+        function changeNeurons(delta) {
+            const newVal = Math.max(1, Math.min(8, state.hiddenNeurons + delta));
+            state.hiddenNeurons = newVal;
+            document.getElementById('neurons-slider').value = newVal;
+            updateNeuronsUI();
+        }
+        function changeNeuronsFromSlider(val) {
+            state.hiddenNeurons = parseInt(val);
+            updateNeuronsUI();
+        }
+        function updateNeuronsUI() {
+            document.getElementById('neurons-display').innerText = state.hiddenNeurons;
+            document.getElementById('header-neurons-count').innerText = state.hiddenNeurons + " hidden neurons";
+            resetApp(); // Rebuild network on architecture change
+        }
+        function changeLR(val) {
+            state.learningRate = val / 100;
+            document.getElementById('lr-display').innerText = state.learningRate.toFixed(2);
+            if(state.network) state.network.learningRate = state.learningRate;
+        }
+        function resetApp() {
+            state.dataPoints = [];
+            state.isTraining = false;
+            state.epoch = 0;
+            state.accuracy = 0;
+            state.logs = [];
+            state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
+            state.predictions = generatePredictions(); // Generate initial random boundary
+            state.lastProbe = { x: 0, y: 0 };
+            document.getElementById('points-count').innerText = "0";
+            document.getElementById('accuracy-panel').classList.add('hidden');
+            document.getElementById('epoch-display').classList.add('hidden');
+            document.getElementById('progress-bar').style.width = '0%';
+            document.getElementById('logs-container').innerHTML = '';
+            const btnTrain = document.getElementById('btn-train');
+            btnTrain.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
+            lucide.createIcons();
+            renderCanvas();
+            renderNetwork();
+            // Recalc activations for default probe
+            state.activations = state.network.forward([0, 0]).activations;
+            updateExplainers();
+        }
+        function switchTab(tab) {
+            document.getElementById('tab-howItWorks').classList.remove('active');
+            document.getElementById('tab-learn').classList.remove('active');
+            document.getElementById('content-howItWorks').classList.add('hidden');
+            document.getElementById('content-learn').classList.add('hidden');
+            document.getElementById('tab-' + tab).classList.add('active');
+            document.getElementById('content-' + tab).classList.remove('hidden');
+        }
+        // --- Canvas Logic ---
+        const canvas = document.getElementById('main-canvas');
+        const ctx = canvas.getContext('2d');
+        const canvasSize = 300;
+        const gridSize = 30;
+        function setupCanvas() {
+            canvas.addEventListener('mousedown', handleCanvasClick);
+            canvas.addEventListener('mousemove', handleCanvasHover);
+            canvas.addEventListener('mouseleave', () => {
+                renderCanvas(); // clear hover
+            });
+            renderCanvas();
+        }
+        function handleCanvasClick(e) {
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            const clickX = (e.clientX - rect.left) * scaleX;
+            const clickY = (e.clientY - rect.top) * scaleY;
+            const x = (clickX / (canvasSize / 2)) - 1;
+            const y = 1 - (clickY / (canvasSize / 2));
+            const point = {
+                x: Math.max(-1, Math.min(1, x)),
+                y: Math.max(-1, Math.min(1, y)),
+                label: state.currentClass
+            };
+            state.dataPoints.push(point);
+            state.lastProbe = { x, y }; // Update probe
+            document.getElementById('points-count').innerText = state.dataPoints.length;
+            // Forward pass for viz
+            state.activations = state.network.forward([point.x, point.y]).activations;
+            updateExplainers();
+            renderCanvas();
+            renderNetwork();
+        }
+        function handleCanvasHover(e) {
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            const clickX = (e.clientX - rect.left) * scaleX;
+            const clickY = (e.clientY - rect.top) * scaleY;
+            renderCanvas();
+            // Draw hover cursor
+            ctx.beginPath();
+            ctx.arc(clickX, clickY, 8, 0, Math.PI * 2);
+            ctx.strokeStyle = state.currentClass === 1 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
+            ctx.setLineDash([4, 4]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            // LIVE UPDATE: Calculate network output for current mouse position
+            const x = (clickX / (canvasSize / 2)) - 1;
+            const y = 1 - (clickY / (canvasSize / 2));
+            state.lastProbe = { x, y }; // Update probe tracker
+            if (state.network) {
+                state.activations = state.network.forward([x, y]).activations;
+                updateExplainers(); // Update the "Output" panel text
+                renderNetwork();    // Update the node visualizations/colors
+            }
+        }
+        function renderCanvas() {
+            // Background
+            ctx.fillStyle = 'hsl(222, 47%, 8%)';
+            ctx.fillRect(0, 0, canvasSize, canvasSize);
+            // Heatmap - Draw if predictions exist
+            if (state.predictions && state.predictions.length > 0) {
+                const cellSize = canvasSize / gridSize;
+                for (let i = 0; i < gridSize; i++) {
+                    for (let j = 0; j < gridSize; j++) {
+                        const pred = state.predictions[i][j];
+                        const hue = pred > 0.5 ? 142 : 350;
+                        const lightness = 20 + Math.abs(pred - 0.5) * 40;
+                        const alpha = 0.3 + Math.abs(pred - 0.5) * 0.4;
+                        ctx.fillStyle = `hsla(${hue}, 70%, ${lightness}%, ${alpha})`;
+                        ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
+                    }
+                }
+            }
+            // Grid
+            ctx.strokeStyle = 'hsla(217, 33%, 40%, 0.2)';
+            ctx.lineWidth = 1;
+            for (let i = 0; i <= canvasSize; i += 30) {
+                ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvasSize); ctx.stroke();
+                ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvasSize, i); ctx.stroke();
+            }
+            // Axes
+            ctx.strokeStyle = 'hsla(217, 33%, 50%, 0.5)';
+            ctx.lineWidth = 2;
+            ctx.beginPath(); ctx.moveTo(canvasSize / 2, 0); ctx.lineTo(canvasSize / 2, canvasSize); ctx.stroke();
+            ctx.beginPath(); ctx.moveTo(0, canvasSize / 2); ctx.lineTo(canvasSize, canvasSize / 2); ctx.stroke();
+            // Points
+            state.dataPoints.forEach(point => {
+                const drawX = (point.x + 1) * (canvasSize / 2);
+                const drawY = (1 - point.y) * (canvasSize / 2);
+                ctx.beginPath();
+                ctx.arc(drawX, drawY, 6, 0, Math.PI * 2);
+                ctx.fillStyle = point.label === 1 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
+                ctx.fill();
+                ctx.strokeStyle = 'white';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+            });
+        }
+        // --- Network Visualizer (SVG) ---
+        function renderNetwork() {
+            const container = document.getElementById('network-container');
+            const width = 500;
+            const height = 300;
+            const layers = [2, state.hiddenNeurons, 1];
+            const layerSpacing = (width - 100) / (layers.length - 1);
+            let svgHtml = `<svg width="${width}" height="${height}" style="overflow: visible;">`;
+            // Calculate positions
+            const nodePositions = [];
+            layers.forEach((count, layerIdx) => {
+                const x = 50 + layerIdx * layerSpacing;
+                const maxNodes = Math.max(...layers);
+                const vSpacing = (height - 100) / (maxNodes + 1);
+                const offset = ((maxNodes - count) * vSpacing) / 2;
+                for(let i=0; i<count; i++) {
+                    nodePositions.push({
+                        x: x,
+                        y: 50 + offset + (i+1) * vSpacing,
+                        layer: layerIdx,
+                        index: i
+                    });
+                }
+            });
+            // Draw Connections
+            const weights = state.network.getWeights();
+            let fromIndex = 0;
+            for(let l=0; l<layers.length-1; l++) {
+                const fromCount = layers[l];
+                const toCount = layers[l+1];
+                const toStartIndex = fromIndex + fromCount;
+                for(let i=0; i<fromCount; i++) {
+                    for(let j=0; j<toCount; j++) {
+                        const w = weights[l][j][i];
+                        const fromNode = nodePositions[fromIndex + i];
+                        const toNode = nodePositions[toStartIndex + j];
+                        const opacity = Math.min(0.8, 0.1 + Math.abs(w) * 0.3);
+                        const color = w > 0 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
+                        const dash = state.isTraining ? 'stroke-dasharray="4 4" class="animate-flow"' : '';
+                        svgHtml += `<line x1="${fromNode.x}" y1="${fromNode.y}" x2="${toNode.x}" y2="${toNode.y}" stroke="${color}" stroke-width="${1 + Math.abs(w)}" stroke-opacity="${opacity}" ${dash} />`;
+                    }
+                }
+                fromIndex += fromCount;
+            }
+            // Draw Nodes
+            nodePositions.forEach(node => {
+                let activation = 0;
+                if(state.activations) {
+                    activation = state.activations[node.layer][node.index];
+                }
+                let color = 'hsl(280, 65%, 55%)'; // hidden
+                if(node.layer === 0) color = 'hsl(199, 89%, 48%)'; // input
+                if(node.layer === layers.length - 1) {
+                    color = activation > 0.5 ? 'hsl(142, 71%, 45%)' : 'hsl(350, 89%, 60%)';
+                }
+                const r = 10 + (activation * 5);
+                const pulseClass = state.isTraining ? 'class="animate-node-pulse"' : '';
+                svgHtml += `<circle cx="${node.x}" cy="${node.y}" r="${r+4}" fill="none" stroke="${color}" stroke-opacity="0.3" ${pulseClass} />`;
+                svgHtml += `<circle cx="${node.x}" cy="${node.y}" r="${r}" fill="${color}" />`;
+                svgHtml += `<text x="${node.x}" y="${node.y - r - 5}" text-anchor="middle" fill="white" font-size="9">${activation.toFixed(2)}</text>`;
+            });
+            svgHtml += `</svg>`;
+            container.innerHTML = svgHtml;
+        }
+        // --- Explainers ---
+        function updateExplainers() {
+            if(!state.activations) return;
+            // Input
+            document.getElementById('val-x').innerText = state.activations[0][0].toFixed(2);
+            document.getElementById('val-y').innerText = state.activations[0][1].toFixed(2);
+            // Hidden
+            const hiddenContainer = document.getElementById('val-hidden');
+            let hiddenHtml = '';
+            state.activations[1].forEach(v => {
+                const cls = v > 0.5 ? 'bg-white/10 text-white' : 'text-gray-500';
+                hiddenHtml += `<div class="text-center p-1 rounded ${cls}">${v.toFixed(1)}</div>`;
+            });
+            hiddenContainer.innerHTML = hiddenHtml;
+            // Output
+            const outVal = state.activations[2][0];
+            document.getElementById('val-raw').innerText = outVal.toFixed(4);
+            const classEl = document.getElementById('val-class');
+            // Direct style application
+            if(outVal > 0.5) {
+                classEl.innerText = "Class A";
+                classEl.style.color = "hsl(142, 71%, 45%)"; // Green
+            } else {
+                classEl.innerText = "Class B";
+                classEl.style.color = "hsl(350, 89%, 60%)"; // Red
+            }
+        }
+        // --- Training Loop ---
+        function toggleTraining() {
+            if(state.dataPoints.length < 2) {
+                alert("Please add at least 2 data points first!");
+                return;
+            }
+            state.isTraining = !state.isTraining;
+            const btn = document.getElementById('btn-train');
+            if(state.isTraining) {
+                btn.innerHTML = '<i data-lucide="zap" class="h-4 w-4 animate-pulse mr-2"></i> Stop';
+                document.getElementById('epoch-display').classList.remove('hidden');
+                document.getElementById('accuracy-panel').classList.remove('hidden');
+                trainStep();
+            } else {
+                btn.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
+            }
+            lucide.createIcons();
+        }
+        function trainStep() {
+            if(!state.isTraining) return;
+            if(state.epoch >= 100) {
+                toggleTraining();
+                return;
+            }
+            state.network.train(state.dataPoints, 10);
+            state.epoch++;
+            // Recalculate predictions for the current cursor position ("lastProbe")
+            // This ensures the "Live Prediction" text updates instantly as the network learns
+            state.activations = state.network.forward([state.lastProbe.x, state.lastProbe.y]).activations;
+            updateExplainers();
+            renderNetwork(); // Update the nodes/weights visual
+            if(state.epoch % 5 === 0) {
+                // Update predictions every 5 epochs
+                state.predictions = generatePredictions();
+                // Calc accuracy
+                let correct = 0;
+                state.dataPoints.forEach(p => {
+                    if ((state.network.predict(p.x, p.y) > 0.5 ? 1 : 0) === p.label) correct++;
+                });
+                state.accuracy = correct / state.dataPoints.length;
+                // Update UI
+                document.getElementById('epoch-display').innerText = "Epoch " + state.epoch;
+                document.getElementById('accuracy-display').innerText = (state.accuracy * 100).toFixed(1) + "%";
+                document.getElementById('accuracy-display').className = "text-lg font-bold " + (state.accuracy > 0.8 ? 'text-[hsl(var(--accent))]' : state.accuracy > 0.5 ? 'text-[hsl(var(--secondary))]' : 'text-[hsl(var(--destructive))]');
+                document.getElementById('progress-bar').style.width = state.epoch + "%";
+                // Add log
+                const logItem = `<div class="flex justify-between text-xs py-1 border-b border-white/5 last:border-0">
+                   <span class="text-[hsl(var(--muted-foreground))]">Epoch ${state.epoch}</span>
+                   <span class="${state.accuracy > 0.8 ? 'text-[hsl(var(--accent))]' : 'text-white'}">${(state.accuracy * 100).toFixed(1)}%</span>
+                 </div>`;
+                document.getElementById('logs-container').insertAdjacentHTML('afterbegin', logItem);
+                renderCanvas();
+            }
+            requestAnimationFrame(trainStep);
+        }
+        // --- Presets ---
+        function loadPreset(type) {
+            let points = [];
+            if (type === 'XOR') {
+                for(let i=0; i<20; i++) {
+                    points.push({ x: -0.5 + Math.random()*0.3, y: 0.5 + Math.random()*0.3, label: 1 });
+                    points.push({ x: 0.5 + Math.random()*0.3, y: -0.5 - Math.random()*0.3, label: 1 });
+                    points.push({ x: 0.5 + Math.random()*0.3, y: 0.5 + Math.random()*0.3, label: 0 });
+                    points.push({ x: -0.5 + Math.random()*0.3, y: -0.5 - Math.random()*0.3, label: 0 });
+                }
+            } else if (type === 'Circle') {
+                for(let i=0; i<40; i++) {
+                    const angle = Math.random() * Math.PI * 2;
+                    const r1 = Math.random() * 0.4;
+                    points.push({ x: Math.cos(angle)*r1, y: Math.sin(angle)*r1, label: 1 });
+                    const r2 = 0.6 + Math.random() * 0.3;
+                    points.push({ x: Math.cos(angle)*r2, y: Math.sin(angle)*r2, label: 0 });
+                }
+            } else if (type === 'Linear') {
+                for(let i=0; i<30; i++) {
+                    points.push({ x: -0.4 - Math.random()*0.4, y: Math.random()*1.6 - 0.8, label: 1 });
+                    points.push({ x: 0.4 + Math.random()*0.4, y: Math.random()*1.6 - 0.8, label: 0 });
+                }
+            } else if (type === 'Spiral') {
+                for (let i = 0; i < 60; i++) {
+                    const r = i / 60;
+                    const t = 1.75 * i / 60 * 2 * Math.PI;
+                    points.push({ x: r * Math.sin(t), y: r * Math.cos(t), label: 1 });
+                    points.push({ x: r * Math.sin(t + Math.PI), y: r * Math.cos(t + Math.PI), label: 0 });
+                }
+            }
+            // Reset but keep new points and generate initial map
+            state.dataPoints = points;
+            state.isTraining = false;
+            state.epoch = 0;
+            state.accuracy = 0;
+            state.logs = [];
+            state.network = new SimpleNeuralNetwork(2, state.hiddenNeurons, 1, state.learningRate);
+            state.predictions = generatePredictions(); // Generate immediate prediction map
+            state.lastProbe = { x: 0, y: 0 };
+            document.getElementById('points-count').innerText = points.length;
+            document.getElementById('accuracy-panel').classList.add('hidden');
+            document.getElementById('epoch-display').classList.add('hidden');
+            document.getElementById('progress-bar').style.width = '0%';
+            document.getElementById('logs-container').innerHTML = '';
+            const btnTrain = document.getElementById('btn-train');
+            btnTrain.innerHTML = '<i data-lucide="play" class="h-4 w-4 mr-2"></i> Train Network';
+            lucide.createIcons();
+            renderCanvas();
+            renderNetwork();
+            if(points.length) {
+                // Set probe to first point to avoid 0,0 default
+                state.lastProbe = { x: points[0].x, y: points[0].y };
+                state.activations = state.network.forward([points[0].x, points[0].y]).activations;
+                updateExplainers();
+            }
+        }
+        function renderUI() {
+            renderNetwork();
+        }
+        // Start
+        window.onload = init;
+    </script>
+</body>
+</html>

templates/Neural-Networks-for-Classification.html CHANGED Viewed

@@ -150,6 +150,54 @@
     <div class="container">
         <h1>🧠 Study Guide: Neural Networks for Classification</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>Story-style intuition: The Corporate Hierarchy</strong></p>

     <div class="container">
         <h1>🧠 Study Guide: Neural Networks for Classification</h1>
+         <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/Neural-Networks-for-Classification-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>Story-style intuition: The Corporate Hierarchy</strong></p>

templates/Optimization.html ADDED Viewed

	@@ -0,0 +1,12 @@

+{% extends "layout.html" %}
+{% block content %}
+<h1 class="text-4xl font-bold text-gray-800 mb-6">Optimization Method</h1>
+<p class="text-gray-600 text-lg mb-8">Optimization (Gradient Descent): Gradient descent is an optimization algorithm used to minimize the error (loss function) of a model during the training process. It is the underlying mechanism that powers the "gradient" aspect of gradient boosting, allowing the models to iteratively improve their performance.</p>
+<div class="flex flex-col gap-6">
+    <div class="card p-6">
+        <h2 class="text-2xl font-semibold text-gray-800 mb-4"></h2>
+       <a href="/gradient-descent" class="algorithm-box">Gradient Descent</a>
+        </div>
+{% endblock %}

templates/XGBoost-Regression.html CHANGED Viewed

@@ -151,6 +151,100 @@
     <div class="container">
         <h1>🚀 Study Guide: XGBoost Regression</h1>
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>Story-style intuition: The Master Craftsman</strong></p>

     <div class="container">
         <h1>🚀 Study Guide: XGBoost Regression</h1>
+         <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/xgboost-tree-three"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
+          <!-- button -->
+         <div>
+    <!-- Audio Element -->
+    <!-- Note: Browsers may block audio autoplay if the user hasn't interacted with the document first,
+         but since this is triggered by a click, it should work fine. -->
+    <a
+      href="/xgboost-graph-three2"
+      target="_blank"
+      onclick="playSound()"
+      class="
+        cursor-pointer
+        inline-block
+        relative
+        bg-blue-500
+        text-white
+        font-bold
+        py-4 px-8
+        rounded-xl
+        text-2xl
+        transition-all
+        duration-150
+        /* 3D Effect (Hard Shadow) */
+        shadow-[0_8px_0_rgb(29,78,216)]
+        /* Pressed State (Move down & remove shadow) */
+        active:shadow-none
+        active:translate-y-[8px]
+      ">
+      Tap Me!
+    </a>
+  </div>
+  <script>
+    function playSound() {
+      const audio = document.getElementById("clickSound");
+      if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(e => console.log("Audio play failed:", e));
+      }
+    }
+  </script>
+         <!-- button -->
         <h2>🔹 Core Concepts</h2>
         <div class="story">
             <p><strong>Story-style intuition: The Master Craftsman</strong></p>

templates/gmm-threejs.html ADDED Viewed

	@@ -0,0 +1,977 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GMM Simulator - Learn Gaussian Mixture Models Visually</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');
+        :root {
+            --primary: 221.2 83.2% 53.3%;
+            --accent: 142.1 76.2% 36.3%;
+            --cluster-1: 15 85% 60%;
+            --cluster-2: 195 80% 50%;
+            --cluster-3: 45 90% 55%;
+            --cluster-4: 280 65% 60%;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8fafc;
+        }
+        .font-mono { font-family: 'JetBrains Mono', monospace; }
+        .shadow-soft {
+            box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.05);
+        }
+        .animate-pulse-soft {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: .7; }
+        }
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+        .tab-trigger.active {
+            background: white;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            color: black;
+        }
+        .step-node.active { background-color: rgb(59 130 246); color: white; }
+        .step-node.done { background-color: #f1f5f9; color: #64748b; }
+        .step-node.converged { background-color: #10b981; color: white; }
+        .modal-overlay {
+            background: rgba(15, 23, 42, 0.6);
+            backdrop-filter: blur(4px);
+        }
+    </style>
+</head>
+<body class="text-slate-900">
+    <div id="app" class="min-h-screen p-4 md:p-6">
+        <div class="max-w-7xl mx-auto space-y-6">
+            <!-- Header -->
+            <header class="text-center space-y-2">
+                <h1 class="text-2xl md:text-4xl font-extrabold tracking-tight">
+                    EM Algorithm & <span class="text-blue-600">Gaussian Mixture Models</span>
+                </h1>
+                <p class="text-slate-500 text-sm md:text-base max-w-2xl mx-auto">
+                    Learn how machines find hidden groups in data. Watch points get assigned and clusters adapt in real-time!
+                </p>
+            </header>
+            <!-- Tabs Navigation -->
+            <div class="flex justify-center">
+                <div class="bg-slate-200/50 p-1 rounded-lg inline-flex w-full max-w-md">
+                    <button onclick="switchTab('simulator')" id="btn-tab-simulator" class="tab-trigger flex-1 py-1.5 px-3 rounded-md text-sm font-medium transition-all active flex items-center justify-center gap-2">
+                        <i data-lucide="play" class="w-4 h-4"></i> Interactive Simulator
+                    </button>
+                    <button onclick="switchTab('learn')" id="btn-tab-learn" class="tab-trigger flex-1 py-1.5 px-3 rounded-md text-sm font-medium transition-all flex items-center justify-center gap-2 text-slate-600">
+                        <i data-lucide="book-open" class="w-4 h-4"></i> Learn EM Algorithm
+                    </button>
+                </div>
+            </div>
+            <!-- Simulator Tab Content -->
+            <div id="tab-simulator" class="tab-content active space-y-6">
+                <!-- Quick Facts Grid -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                    <div class="bg-white rounded-xl border p-4 shadow-soft">
+                        <i data-lucide="book-open" class="w-6 h-6 mb-2 text-orange-500"></i>
+                        <h4 class="font-bold text-sm mb-1">GMM = Soft Clustering</h4>
+                        <p class="text-xs text-slate-500">Points can partially belong to multiple clusters.</p>
+                    </div>
+                    <div class="bg-white rounded-xl border p-4 shadow-soft">
+                        <i data-lucide="zap" class="w-6 h-6 mb-2 text-blue-500"></i>
+                        <h4 class="font-bold text-sm mb-1">EM is Iterative</h4>
+                        <p class="text-xs text-slate-500">Alternates between E-step and M-step.</p>
+                    </div>
+                    <div class="bg-white rounded-xl border p-4 shadow-soft">
+                        <i data-lucide="eye" class="w-6 h-6 mb-2 text-emerald-500"></i>
+                        <h4 class="font-bold text-sm mb-1">Watch the Ellipses</h4>
+                        <p class="text-xs text-slate-500">Ellipses show the statistical shape of clusters.</p>
+                    </div>
+                    <div class="bg-white rounded-xl border p-4 shadow-soft">
+                        <i data-lucide="brain" class="w-6 h-6 mb-2 text-indigo-500"></i>
+                        <h4 class="font-bold text-sm mb-1">Convergence</h4>
+                        <p class="text-xs text-slate-500">Algorithm stops when centers stabilize.</p>
+                    </div>
+                </div>
+                <div class="grid lg:grid-cols-3 gap-6">
+                    <!-- Left: Canvas and Main Controls -->
+                    <div class="lg:col-span-2 space-y-4">
+                        <!-- Algorithm Flow Indicator -->
+                        <div class="bg-white rounded-xl border p-4 shadow-soft">
+                            <h4 class="font-bold text-sm mb-4 text-center">EM Algorithm Flow</h4>
+                            <div class="flex items-center justify-between">
+                                <div class="flex flex-col items-center flex-1 text-center">
+                                    <div id="step-init" class="step-node active w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all">
+                                        <i data-lucide="circle" class="w-5 h-5"></i>
+                                    </div>
+                                    <span class="text-xs font-medium mt-2">Initialize</span>
+                                </div>
+                                <div class="h-0.5 flex-1 mx-2 bg-slate-200" id="line-1"></div>
+                                <div class="flex flex-col items-center flex-1 text-center">
+                                    <div id="step-e" class="step-node w-10 h-10 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-bold text-sm transition-all">
+                                        <i data-lucide="circle" class="w-5 h-5"></i>
+                                    </div>
+                                    <span class="text-xs font-medium mt-2">E-Step</span>
+                                </div>
+                                <div class="h-0.5 flex-1 mx-2 bg-slate-200" id="line-2"></div>
+                                <div class="flex flex-col items-center flex-1 text-center">
+                                    <div id="step-m" class="step-node w-10 h-10 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-bold text-sm transition-all">
+                                        <i data-lucide="refresh-cw" class="w-5 h-5"></i>
+                                    </div>
+                                    <span class="text-xs font-medium mt-2">M-Step</span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Canvas Area -->
+                        <div class="bg-white rounded-2xl shadow-soft border overflow-hidden">
+                            <div class="p-3 border-b bg-slate-50 flex flex-wrap gap-4" id="legend">
+                                <!-- Legend items generated via JS -->
+                            </div>
+                            <div class="relative p-2 flex justify-center items-center overflow-hidden" style="height: 400px;" id="canvas-container">
+                                <svg id="gmm-svg" width="100%" height="100%" class="rounded-lg">
+                                    <defs>
+                                        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" stroke-width="0.5" />
+                                        </pattern>
+                                    </defs>
+                                    <rect width="100%" height="100%" fill="url(#grid)" />
+                                    <g id="ellipses-group"></g>
+                                    <g id="points-group"></g>
+                                </svg>
+                            </div>
+                        </div>
+                        <!-- Main Controls -->
+                        <div class="bg-white rounded-xl p-5 border shadow-soft space-y-6">
+                            <div class="flex flex-wrap items-center gap-3">
+                                <button id="btn-play" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 px-6 rounded-lg inline-flex items-center gap-2 transition-colors">
+                                    <i data-lucide="play" class="w-5 h-5"></i> <span id="btn-play-text">Auto Play</span>
+                                </button>
+                                <button id="btn-step" class="bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold py-2.5 px-6 rounded-lg inline-flex items-center gap-2 transition-colors">
+                                    <i data-lucide="skip-forward" class="w-5 h-5"></i> Next Step
+                                </button>
+                                <button id="btn-reset" class="border border-slate-200 hover:bg-slate-50 text-slate-800 font-bold py-2.5 px-6 rounded-lg inline-flex items-center gap-2 transition-colors">
+                                    <i data-lucide="rotate-ccw" class="w-5 h-5"></i> Reset
+                                </button>
+                                <button id="btn-generate" class="border border-emerald-200 text-emerald-600 hover:bg-emerald-50 font-bold py-2.5 px-6 rounded-lg inline-flex items-center gap-2 transition-colors">
+                                    <i data-lucide="sparkles" class="w-5 h-5"></i> New Data
+                                </button>
+                            </div>
+                            <div class="flex flex-wrap items-center justify-between gap-6 pt-2 border-t border-slate-100">
+                                <div class="flex items-center gap-4">
+                                    <span class="text-sm font-medium text-slate-500 whitespace-nowrap">Speed:</span>
+                                    <input type="range" id="speed-slider" min="500" max="3000" step="100" value="1500" class="w-32 accent-blue-600">
+                                    <span id="speed-text" class="text-xs text-slate-400 w-12 text-center">Medium</span>
+                                </div>
+                                <div class="flex items-center gap-4">
+                                    <div class="bg-slate-100 px-4 py-2 rounded-lg flex items-center gap-2">
+                                        <span class="text-sm font-medium text-slate-500">Iteration:</span>
+                                        <span id="counter-text" class="font-mono text-lg font-bold">0 / 20</span>
+                                    </div>
+                                    <div id="status-badge" class="hidden px-4 py-2 rounded-lg font-semibold text-sm"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Right: Info Panels -->
+                    <div class="space-y-4">
+                        <!-- Dynamic Explanation -->
+                        <div id="explanation-card" class="p-5 rounded-xl border-2 bg-blue-50/50 border-blue-200 shadow-soft transition-all">
+                            <div class="flex items-start gap-4">
+                                <div class="p-3 rounded-lg bg-white text-blue-600" id="expl-icon">
+                                    <i data-lucide="lightbulb" class="w-6 h-6"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <h3 class="font-bold text-lg mb-2" id="expl-title">Ready to Start! 🚀</h3>
+                                    <ul class="space-y-2" id="expl-content">
+                                        <li class="flex items-start gap-2 text-sm text-slate-600">
+                                            <i data-lucide="arrow-right" class="w-4 h-4 mt-0.5 text-emerald-500 flex-shrink-0"></i>
+                                            <span>Press 'Next Step' to see how the EM algorithm works.</span>
+                                        </li>
+                                        <li class="flex items-start gap-2 text-sm text-slate-600">
+                                            <i data-lucide="arrow-right" class="w-4 h-4 mt-0.5 text-emerald-500 flex-shrink-0"></i>
+                                            <span>Watch points get assigned to the most likely cluster center.</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Log-Likelihood Chart -->
+                        <div class="bg-white rounded-xl border p-4 shadow-soft">
+                            <div class="flex items-center justify-between mb-3">
+                                <div class="flex items-center gap-2">
+                                    <i data-lucide="trending-up" class="w-5 h-5 text-blue-600"></i>
+                                    <h4 class="font-bold">Log-Likelihood</h4>
+                                </div>
+                                <div id="converged-badge" class="hidden items-center gap-1 text-emerald-600 text-sm font-medium">
+                                    <i data-lucide="check-circle-2" class="w-4 h-4"></i> Converged!
+                                </div>
+                            </div>
+                            <p class="text-xs text-slate-500 mb-4">
+                                Measures model fit. Higher values = better grouping.
+                            </p>
+                            <div class="h-32 w-full flex items-end gap-1 px-1" id="chart-container">
+                                <!-- Chart bars generated via JS -->
+                                <div class="flex-1 h-full flex items-center justify-center text-slate-300 text-xs text-center px-4">
+                                    Start simulation to see progress...
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Key Terms -->
+                        <div class="bg-white rounded-xl p-5 border shadow-soft">
+                            <h4 class="font-bold mb-3">Key Terms 📚</h4>
+                            <div class="space-y-4 text-sm">
+                                <div>
+                                    <span class="font-semibold text-orange-500">E-Step:</span>
+                                    <p class="text-slate-500 mt-0.5">Calculating the "responsibility" (probability) that each point belongs to each cluster center.</p>
+                                </div>
+                                <div>
+                                    <span class="font-semibold text-blue-500">M-Step:</span>
+                                    <p class="text-slate-500 mt-0.5">Moving and stretching clusters to better fit the points assigned to them.</p>
+                                </div>
+                                <div>
+                                    <span class="font-semibold text-emerald-500">Convergence:</span>
+                                    <p class="text-slate-500 mt-0.5">The point where the clusters stop moving because they've found the optimal mathematical fit.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Learn Tab Content -->
+            <div id="tab-learn" class="tab-content space-y-8">
+                <!-- Introduction Section -->
+                <section class="bg-white rounded-2xl border p-6 shadow-soft">
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="p-3 rounded-xl bg-blue-50 text-blue-600">
+                            <i data-lucide="book-open" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">What is the EM Algorithm?</h2>
+                    </div>
+                    <div class="space-y-4 text-slate-600">
+                        <p>
+                            <strong class="text-slate-900">EM (Expectation-Maximization)</strong> is a powerful iterative method used to find maximum likelihood estimates of parameters in statistical models, where the model depends on unobserved latent variables.
+                        </p>
+                        <div class="bg-slate-50 rounded-xl p-4 border border-slate-100">
+                            <h4 class="font-semibold text-slate-900 mb-2">🎯 Real-Life Analogy</h4>
+                            <p class="text-sm">
+                                Imagine you have a bag of colored marbles, but you're colorblind! You can feel their sizes and weights, but you can't see the colors. EM helps you figure out which marbles are likely the same color based on their shared physical properties.
+                            </p>
+                        </div>
+                        <p>The algorithm works by alternating between two main steps until it finds the best mathematical grouping.</p>
+                    </div>
+                </section>
+                <!-- Detailed Steps Grid -->
+                <div class="grid md:grid-cols-2 gap-6">
+                    <!-- E-Step Details -->
+                    <section class="bg-gradient-to-br from-orange-50/50 to-white rounded-2xl border border-orange-100 p-6 shadow-sm">
+                        <div class="flex items-center gap-3 mb-4">
+                            <div class="p-3 rounded-xl bg-orange-100 text-orange-600">
+                                <i data-lucide="target" class="w-6 h-6"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-lg font-bold">E-Step (Expectation)</h3>
+                                <p class="text-xs text-orange-500 font-medium">Assignment Phase</p>
+                            </div>
+                        </div>
+                        <div class="space-y-4">
+                            <p class="text-sm text-slate-600"><strong>Goal:</strong> Calculate the probability (responsibility) of each cluster for each data point.</p>
+                            <div class="space-y-2">
+                                <h4 class="font-semibold text-sm">Process:</h4>
+                                <ul class="space-y-2 text-sm text-slate-500">
+                                    <li class="flex items-start gap-2"><span class="text-orange-600">•</span> Each point "looks" at all current cluster curves.</li>
+                                    <li class="flex items-start gap-2"><span class="text-orange-600">•</span> It asks: "Given my location, which cluster would likely have produced me?"</li>
+                                    <li class="flex items-start gap-2"><span class="text-orange-600">•</span> Points get colored by their most likely cluster.</li>
+                                </ul>
+                            </div>
+                            <div class="bg-white/80 rounded-lg p-3 border border-orange-100">
+                                <p class="text-xs text-slate-500 font-mono">responsibility = (fit to cluster) / (total fit to all clusters)</p>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- M-Step Details -->
+                    <section class="bg-gradient-to-br from-blue-50/50 to-white rounded-2xl border border-blue-100 p-6 shadow-sm">
+                        <div class="flex items-center gap-3 mb-4">
+                            <div class="p-3 rounded-xl bg-blue-100 text-blue-600">
+                                <i data-lucide="bar-chart-3" class="w-6 h-6"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-lg font-bold">M-Step (Maximization)</h3>
+                                <p class="text-xs text-blue-500 font-medium">Update Phase</p>
+                            </div>
+                        </div>
+                        <div class="space-y-4">
+                            <p class="text-sm text-slate-600"><strong>Goal:</strong> Update cluster parameters (center, shape, weight) based on assigned points.</p>
+                            <div class="space-y-2">
+                                <h4 class="font-semibold text-sm">Process:</h4>
+                                <ul class="space-y-2 text-sm text-slate-500">
+                                    <li class="flex items-start gap-2"><span class="text-blue-600">•</span> Cluster centers move to the weighted average of points.</li>
+                                    <li class="flex items-start gap-2"><span class="text-blue-600">•</span> The ellipse stretches/shrinks to cover its assigned points better.</li>
+                                    <li class="flex items-start gap-2"><span class="text-blue-600">•</span> Cluster "popularity" (weight) is updated.</li>
+                                </ul>
+                            </div>
+                            <div class="bg-white/80 rounded-lg p-3 border border-blue-100">
+                                <p class="text-xs text-slate-500 font-mono">new_mean = average(points × their_responsibilities)</p>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+                <!-- Algorithm Flow Visual -->
+                <section class="bg-white rounded-2xl border p-6 shadow-soft">
+                    <div class="flex items-center gap-3 mb-6">
+                        <div class="p-3 rounded-xl bg-indigo-50 text-indigo-600">
+                            <i data-lucide="refresh-cw" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">The Complete Cycle</h2>
+                    </div>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 relative">
+                        <div class="bg-slate-50 p-4 rounded-xl text-center border">
+                            <i data-lucide="shuffle" class="w-8 h-8 mx-auto mb-2 text-slate-400"></i>
+                            <h4 class="font-bold text-sm">1. Initialize</h4>
+                            <p class="text-xs text-slate-500 mt-1">Random centers and circular shapes</p>
+                        </div>
+                        <div class="bg-orange-50 p-4 rounded-xl text-center border border-orange-100">
+                            <i data-lucide="target" class="w-8 h-8 mx-auto mb-2 text-orange-500"></i>
+                            <h4 class="font-bold text-sm">2. E-Step</h4>
+                            <p class="text-xs text-slate-500 mt-1">Assign data points to clusters</p>
+                        </div>
+                        <div class="bg-blue-50 p-4 rounded-xl text-center border border-blue-100">
+                            <i data-lucide="bar-chart-3" class="w-8 h-8 mx-auto mb-2 text-blue-500"></i>
+                            <h4 class="font-bold text-sm">3. M-Step</h4>
+                            <p class="text-xs text-slate-500 mt-1">Update cluster parameters</p>
+                        </div>
+                        <div class="bg-emerald-50 p-4 rounded-xl text-center border border-emerald-100">
+                            <i data-lucide="check-circle-2" class="w-8 h-8 mx-auto mb-2 text-emerald-500"></i>
+                            <h4 class="font-bold text-sm">4. Converged?</h4>
+                            <p class="text-xs text-slate-500 mt-1">Repeat 2 & 3 until stable</p>
+                        </div>
+                    </div>
+                </section>
+                <!-- Why it Works Section -->
+                <section class="bg-white rounded-2xl border p-6 shadow-soft">
+                    <div class="flex items-center gap-3 mb-6">
+                        <div class="p-3 rounded-xl bg-amber-50 text-amber-600">
+                            <i data-lucide="lightbulb" class="w-6 h-6"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Why Does EM Work?</h2>
+                    </div>
+                    <div class="grid md:grid-cols-2 gap-8">
+                        <div class="space-y-4">
+                            <h4 class="font-bold text-slate-900">The Chicken-and-Egg Problem 🐔🥚</h4>
+                            <p class="text-sm text-slate-600 leading-relaxed">
+                                We have a classic loop: To find the centers, we need to know point assignments. To find point assignments, we need to know the centers.
+                                EM solves this by starting with a "best guess" and iteratively refining it.
+                            </p>
+                        </div>
+                        <div class="space-y-4">
+                            <h4 class="font-bold text-slate-900">Guaranteed Improvement 📈</h4>
+                            <p class="text-sm text-slate-600 leading-relaxed">
+                                Mathematically, each iteration of EM is guaranteed to increase the <strong>Log-Likelihood</strong> of the model (or leave it unchanged). This means the model always gets better at explaining the data until it hits a maximum.
+                            </p>
+                        </div>
+                    </div>
+                </section>
+                <!-- Comparison Table -->
+                <section class="bg-white rounded-2xl border p-6 shadow-soft overflow-hidden">
+                    <h2 class="text-xl font-bold mb-6">GMM vs K-Means: The Difference</h2>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm">
+                            <thead class="bg-slate-50">
+                                <tr class="text-left">
+                                    <th class="py-3 px-4 font-bold border-b">Feature</th>
+                                    <th class="py-3 px-4 font-bold border-b text-blue-600">K-Means</th>
+                                    <th class="py-3 px-4 font-bold border-b text-orange-600">GMM (EM)</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y text-slate-600">
+                                <tr>
+                                    <td class="py-4 px-4 font-semibold text-slate-900">Assignment</td>
+                                    <td class="py-4 px-4">Hard (0 or 1)</td>
+                                    <td class="py-4 px-4">Soft (Probabilities)</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-4 px-4 font-semibold text-slate-900">Cluster Shape</td>
+                                    <td class="py-4 px-4">Always circular/spherical</td>
+                                    <td class="py-4 px-4">Flexible ellipses (any orientation)</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-4 px-4 font-semibold text-slate-900">Model Type</td>
+                                    <td class="py-4 px-4">Distance-based</td>
+                                    <td class="py-4 px-4">Distribution-based</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-4 px-4 font-semibold text-slate-900">Use Case</td>
+                                    <td class="py-4 px-4">Simple, distinct groups</td>
+                                    <td class="py-4 px-4">Overlapping, varied group shapes</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </section>
+                <!-- Real World Applications Grid -->
+                <section class="bg-slate-900 text-white rounded-2xl p-8 shadow-xl">
+                    <h2 class="text-2xl font-bold mb-6">🌍 Real-World Applications</h2>
+                    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">🖼️</div>
+                            <h4 class="font-bold text-sm">Image Segmentation</h4>
+                            <p class="text-xs text-slate-400 mt-1">Grouping pixels by color/texture to separate objects in photos.</p>
+                        </div>
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">🔊</div>
+                            <h4 class="font-bold text-sm">Speech Recognition</h4>
+                            <p class="text-xs text-slate-400 mt-1">Identifying different speakers in an audio stream using voice patterns.</p>
+                        </div>
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">📊</div>
+                            <h4 class="font-bold text-sm">Customer Segmentation</h4>
+                            <p class="text-xs text-slate-400 mt-1">Finding groups of customers with similar shopping behaviors.</p>
+                        </div>
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">🧬</div>
+                            <h4 class="font-bold text-sm">Genetics</h4>
+                            <p class="text-xs text-slate-400 mt-1">Clustering gene expression data to find functional biological groups.</p>
+                        </div>
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">🌤️</div>
+                            <h4 class="font-bold text-sm">Meteorology</h4>
+                            <p class="text-xs text-slate-400 mt-1">Classifying climate zones based on temperature and humidity data.</p>
+                        </div>
+                        <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                            <div class="text-2xl mb-2">📧</div>
+                            <h4 class="font-bold text-sm">Spam Detection</h4>
+                            <p class="text-xs text-slate-400 mt-1">Clustering emails into 'Ham' and 'Spam' based on content features.</p>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+    <!-- Intro Modal -->
+    <div id="intro-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay">
+        <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6 md:p-8 relative">
+            <button onclick="closeModal()" class="absolute top-4 right-4 p-2 rounded-full hover:bg-slate-100 transition-colors">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+            <div class="text-center mb-8">
+                <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Welcome to the <span class="text-blue-600">EM Simulator</span></h2>
+                <p class="text-slate-500">Discover how AI learns hidden patterns in data</p>
+            </div>
+            <div class="space-y-4 mb-8">
+                <div class="flex items-start gap-4 p-4 rounded-xl bg-slate-50">
+                    <div class="p-3 rounded-lg bg-white text-orange-500 shadow-sm"><i data-lucide="sparkles" class="w-6 h-6"></i></div>
+                    <div><h3 class="font-bold">What is GMM?</h3><p class="text-sm text-slate-500">A statistical model that groups data points into distinct probability curves (clusters).</p></div>
+                </div>
+                <div class="flex items-start gap-4 p-4 rounded-xl bg-slate-50">
+                    <div class="p-3 rounded-lg bg-white text-blue-500 shadow-sm"><i data-lucide="zap" class="w-6 h-6"></i></div>
+                    <div><h3 class="font-bold">How it learns</h3><p class="text-sm text-slate-500">It "cycles" between assigning points (E-Step) and updating groups (M-Step) until stable.</p></div>
+                </div>
+            </div>
+            <button onclick="closeModal()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl transition-all shadow-lg flex items-center justify-center gap-2">
+                Start Learning <i data-lucide="arrow-right" class="w-5 h-5"></i>
+            </button>
+        </div>
+          <!-- Centered Button -->
+        <div class="absolute left-1/2 -translate-x-1/2 flex items-center">
+            <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+            <a href="/gaussian-mixture-models" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+    </div>
+    <script>
+        // --- CONSTANTS & DATA ---
+        const CLUSTER_COLORS = [
+            { fill: 'rgba(239, 115, 87, 0.15)', stroke: 'hsl(15, 85%, 60%)', label: 'Coral' },
+            { fill: 'rgba(50, 180, 205, 0.15)', stroke: 'hsl(195, 80%, 50%)', label: 'Teal' },
+            { fill: 'rgba(245, 185, 66, 0.15)', stroke: 'hsl(45, 90%, 55%)', label: 'Amber' },
+            { fill: 'rgba(175, 100, 200, 0.15)', stroke: 'hsl(280, 65%, 60%)', label: 'Violet' }
+        ];
+        const MAX_ITERATIONS = 20;
+        const NUM_POINTS = 100;
+        // --- STATE ---
+        let state = {
+            points: [],
+            clusters: [],
+            iteration: 0,
+            stepType: 'none', // 'none', 'e-step', 'm-step'
+            isPlaying: false,
+            converged: false,
+            logLikelihoods: [],
+            speed: 1500,
+            timer: null
+        };
+        // --- MATH UTILS ---
+        function multivariateNormalPDF(x, y, mean, cov) {
+            const dx = x - mean.x;
+            const dy = y - mean.y;
+            const det = cov.xx * cov.yy - cov.xy * cov.xy;
+            const inv = {
+                xx: cov.yy / det,
+                xy: -cov.xy / det,
+                yy: cov.xx / det
+            };
+            const exponent = -0.5 * (dx * (dx * inv.xx + dy * inv.xy) + dy * (dx * inv.xy + dy * inv.yy));
+            return (1 / (2 * Math.PI * Math.sqrt(Math.abs(det)))) * Math.exp(exponent);
+        }
+        function getEllipseParams(cov) {
+            const trace = cov.xx + cov.yy;
+            const det = cov.xx * cov.yy - cov.xy * cov.xy;
+            const sqrtDisc = Math.sqrt(Math.pow(trace / 2, 2) - det);
+            const lambda1 = trace / 2 + sqrtDisc;
+            const lambda2 = trace / 2 - sqrtDisc;
+            const a = Math.sqrt(Math.max(0, lambda1)) * 2;
+            const b = Math.sqrt(Math.max(0, lambda2)) * 2;
+            const angle = 0.5 * Math.atan2(2 * cov.xy, cov.xx - cov.yy) * (180 / Math.PI);
+            return { a, b, angle };
+        }
+        // --- CORE LOGIC (EM ALGORITHM) ---
+        function generateData() {
+            const points = [];
+            const centers = [
+                { x: 150, y: 150 },
+                { x: 450, y: 250 },
+                { x: 250, y: 350 }
+            ];
+            for (let i = 0; i < NUM_POINTS; i++) {
+                const center = centers[Math.floor(Math.random() * centers.length)];
+                points.push({
+                    x: center.x + (Math.random() - 0.5) * 150,
+                    y: center.y + (Math.random() - 0.5) * 150,
+                    responsibilities: []
+                });
+            }
+            state.points = points;
+            initClusters();
+            resetSimState();
+            render();
+        }
+        function initClusters() {
+            state.clusters = [];
+            for (let i = 0; i < 3; i++) {
+                state.clusters.push({
+                    mean: { x: Math.random() * 600, y: Math.random() * 400 },
+                    covariance: { xx: 2500, xy: 0, yy: 2500 },
+                    weight: 1 / 3,
+                    color: CLUSTER_COLORS[i]
+                });
+            }
+        }
+        function resetSimState() {
+            state.iteration = 0;
+            state.stepType = 'none';
+            state.converged = false;
+            state.logLikelihoods = [];
+            state.points.forEach(p => delete p.clusterIndex);
+            stopAutoPlay();
+            updateUI();
+        }
+        function eStep() {
+            let totalLogLikelihood = 0;
+            state.points.forEach(p => {
+                let responsibilities = state.clusters.map(c => {
+                    const prob = multivariateNormalPDF(p.x, p.y, c.mean, c.covariance);
+                    return c.weight * prob;
+                });
+                const sum = responsibilities.reduce((a, b) => a + b, 0);
+                totalLogLikelihood += Math.log(sum || 1e-10);
+                if (sum > 0) {
+                    responsibilities = responsibilities.map(r => r / sum);
+                } else {
+                    responsibilities = state.clusters.map(() => 1 / state.clusters.length);
+                }
+                p.responsibilities = responsibilities;
+                // For visualization
+                let maxIdx = 0;
+                responsibilities.forEach((r, idx) => { if (r > responsibilities[maxIdx]) maxIdx = idx; });
+                p.clusterIndex = maxIdx;
+            });
+            state.logLikelihoods.push(totalLogLikelihood);
+            state.stepType = 'e-step';
+            // Check convergence
+            if (state.logLikelihoods.length > 2) {
+                const diff = Math.abs(state.logLikelihoods[state.logLikelihoods.length - 1] - state.logLikelihoods[state.logLikelihoods.length - 2]);
+                if (diff < 0.1) state.converged = true;
+            }
+        }
+        function mStep() {
+            const N = state.points.length;
+            state.clusters.forEach((c, j) => {
+                const sumResp = state.points.reduce((acc, p) => acc + p.responsibilities[j], 0);
+                // Update Weight
+                c.weight = sumResp / N;
+                // Update Mean
+                if (sumResp > 0) {
+                    const newMean = state.points.reduce((acc, p) => {
+                        acc.x += p.responsibilities[j] * p.x;
+                        acc.y += p.responsibilities[j] * p.y;
+                        return acc;
+                    }, { x: 0, y: 0 });
+                    c.mean.x = newMean.x / sumResp;
+                    c.mean.y = newMean.y / sumResp;
+                    // Update Covariance
+                    const newCov = state.points.reduce((acc, p) => {
+                        const dx = p.x - c.mean.x;
+                        const dy = p.y - c.mean.y;
+                        acc.xx += p.responsibilities[j] * dx * dx;
+                        acc.xy += p.responsibilities[j] * dx * dy;
+                        acc.yy += p.responsibilities[j] * dy * dy;
+                        return acc;
+                    }, { xx: 0, xy: 0, yy: 0 });
+                    // Add a small value to diagonal for stability
+                    c.covariance.xx = newCov.xx / sumResp + 10;
+                    c.covariance.xy = newCov.xy / sumResp;
+                    c.covariance.yy = newCov.yy / sumResp + 10;
+                }
+            });
+            state.iteration++;
+            state.stepType = 'm-step';
+            if (state.iteration >= MAX_ITERATIONS) state.converged = true;
+        }
+        // --- RENDER & UI ---
+        function render() {
+            const pointsGroup = document.getElementById('points-group');
+            const ellipsesGroup = document.getElementById('ellipses-group');
+            // Clear
+            pointsGroup.innerHTML = '';
+            ellipsesGroup.innerHTML = '';
+            // Draw Clusters
+            state.clusters.forEach((c, i) => {
+                const params = getEllipseParams(c.covariance);
+                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                const ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
+                ellipse.setAttribute('cx', c.mean.x);
+                ellipse.setAttribute('cy', c.mean.y);
+                ellipse.setAttribute('rx', params.a);
+                ellipse.setAttribute('ry', params.b);
+                ellipse.setAttribute('fill', c.color.fill);
+                ellipse.setAttribute('stroke', c.color.stroke);
+                ellipse.setAttribute('stroke-width', '2');
+                ellipse.setAttribute('transform', `rotate(${params.angle}, ${c.mean.x}, ${c.mean.y})`);
+                if (state.isPlaying) ellipse.classList.add('animate-pulse-soft');
+                const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                center.setAttribute('cx', c.mean.x);
+                center.setAttribute('cy', c.mean.y);
+                center.setAttribute('r', '6');
+                center.setAttribute('fill', c.color.stroke);
+                center.setAttribute('stroke', 'white');
+                center.setAttribute('stroke-width', '2');
+                g.appendChild(ellipse);
+                g.appendChild(center);
+                ellipsesGroup.appendChild(g);
+            });
+            // Draw Points
+            state.points.forEach((p, i) => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', p.x);
+                circle.setAttribute('cy', p.y);
+                circle.setAttribute('r', '5');
+                circle.setAttribute('stroke', 'white');
+                circle.setAttribute('stroke-width', '1');
+                const color = p.clusterIndex !== undefined ? CLUSTER_COLORS[p.clusterIndex % CLUSTER_COLORS.length].stroke : '#94a3b8';
+                circle.setAttribute('fill', color);
+                pointsGroup.appendChild(circle);
+            });
+            updateUI();
+        }
+        function updateUI() {
+            // Update Legend
+            const legend = document.getElementById('legend');
+            if (legend) {
+                legend.innerHTML = state.clusters.map((c, i) => `
+                    <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white border shadow-sm">
+                        <div class="w-3 h-3 rounded-full" style="background: ${c.color.stroke}"></div>
+                        <span class="font-medium text-xs">${c.color.label}</span>
+                        <span class="text-[10px] text-slate-400 font-mono">(${(c.weight * 100).toFixed(0)}%)</span>
+                    </div>
+                `).join('');
+            }
+            // Steps logic
+            const sInit = document.getElementById('step-init');
+            const sE = document.getElementById('step-e');
+            const sM = document.getElementById('step-m');
+            const l1 = document.getElementById('line-1');
+            const l2 = document.getElementById('line-2');
+            if (sInit && sE && sM) {
+                [sInit, sE, sM].forEach(el => el.className = 'step-node w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all bg-slate-100 text-slate-400');
+                if (l1 && l2) [l1, l2].forEach(el => el.className = 'h-0.5 flex-1 mx-2 bg-slate-200');
+                if (state.converged) {
+                    [sInit, sE, sM].forEach(el => el.classList.add('converged'));
+                    if (l1 && l2) [l1, l2].forEach(el => el.classList.add('bg-emerald-500'));
+                } else if (state.stepType === 'e-step') {
+                    sE.className = 'step-node active w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm bg-blue-600 text-white';
+                    sInit.className = 'step-node done w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm bg-slate-200 text-slate-500';
+                    if (l1) l1.className = 'h-0.5 flex-1 mx-2 bg-blue-200';
+                } else if (state.stepType === 'm-step') {
+                    sM.className = 'step-node active w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm bg-blue-600 text-white';
+                    sE.className = 'step-node done w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm bg-slate-200 text-slate-500';
+                    if (l2) l2.className = 'h-0.5 flex-1 mx-2 bg-blue-200';
+                } else {
+                    sInit.className = 'step-node active w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm bg-blue-600 text-white';
+                }
+            }
+            // Status Badge
+            const badge = document.getElementById('status-badge');
+            if (badge) {
+                if (state.converged) {
+                    badge.className = 'px-4 py-2 rounded-lg font-semibold text-sm bg-emerald-100 text-emerald-700 block';
+                    badge.innerText = 'Converged!';
+                } else if (state.stepType !== 'none') {
+                    badge.className = `px-4 py-2 rounded-lg font-semibold text-sm block ${state.stepType === 'e-step' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'}`;
+                    badge.innerText = state.stepType === 'e-step' ? 'E-Step' : 'M-Step';
+                } else {
+                    badge.className = 'hidden';
+                }
+            }
+            // Explanation Card
+            const explCard = document.getElementById('explanation-card');
+            const explTitle = document.getElementById('expl-title');
+            const explContent = document.getElementById('expl-content');
+            const explIcon = document.getElementById('expl-icon');
+            if (explCard && explTitle && explContent && explIcon) {
+                if (state.converged) {
+                    explCard.className = 'p-5 rounded-xl border-2 bg-emerald-50 border-emerald-200 shadow-soft';
+                    explTitle.innerText = "Converged! 🎉";
+                    explIcon.className = "p-3 rounded-lg bg-white text-emerald-600";
+                    explIcon.innerHTML = '<i data-lucide="check-circle-2" class="w-6 h-6"></i>';
+                    explContent.innerHTML = `
+                        <li class="flex items-start gap-2 text-sm text-emerald-800 font-medium">Clusters have stopped moving. Optimal fit found!</li>
+                        <li class="flex items-start gap-2 text-sm text-slate-600">Total iterations: ${state.iteration}</li>
+                    `;
+                } else if (state.stepType === 'e-step') {
+                    explCard.className = 'p-5 rounded-xl border-2 bg-orange-50 border-orange-200 shadow-soft';
+                    explTitle.innerText = "E-Step: Expectations 🤔";
+                    explIcon.className = "p-3 rounded-lg bg-white text-orange-600";
+                    explIcon.innerHTML = '<i data-lucide="target" class="w-6 h-6"></i>';
+                    explContent.innerHTML = `
+                        <li class="flex items-start gap-2 text-sm text-slate-600"><i data-lucide="arrow-right" class="w-4 h-4 text-orange-500"></i> Each point calculates probabilities for all clusters.</li>
+                        <li class="flex items-start gap-2 text-sm text-slate-600"><i data-lucide="arrow-right" class="w-4 h-4 text-orange-500"></i> Points change color based on the highest probability.</li>
+                    `;
+                } else if (state.stepType === 'm-step') {
+                    explCard.className = 'p-5 rounded-xl border-2 bg-blue-50 border-blue-200 shadow-soft';
+                    explTitle.innerText = "M-Step: Update 📊";
+                    explIcon.className = "p-3 rounded-lg bg-white text-blue-600";
+                    explIcon.innerHTML = '<i data-lucide="bar-chart-3" class="w-6 h-6"></i>';
+                    explContent.innerHTML = `
+                        <li class="flex items-start gap-2 text-sm text-slate-600"><i data-lucide="arrow-right" class="w-4 h-4 text-blue-500"></i> Centers move to the heart of their assigned points.</li>
+                        <li class="flex items-start gap-2 text-sm text-slate-600"><i data-lucide="arrow-right" class="w-4 h-4 text-blue-500"></i> Ellipses stretch to cover the point spread.</li>
+                    `;
+                } else {
+                    explCard.className = 'p-5 rounded-xl border-2 bg-slate-50 border-slate-200 shadow-soft';
+                    explTitle.innerText = "Ready to Start! 🚀";
+                    explIcon.className = "p-3 rounded-lg bg-white text-blue-600";
+                    explIcon.innerHTML = '<i data-lucide="lightbulb" class="w-6 h-6"></i>';
+                    explContent.innerHTML = `
+                        <li class="flex items-start gap-2 text-sm text-slate-600">Press 'Next Step' or 'Auto Play' to begin.</li>
+                    `;
+                }
+            }
+            // Counters
+            const counterText = document.getElementById('counter-text');
+            if (counterText) counterText.innerText = `${state.iteration} / ${MAX_ITERATIONS}`;
+            const btnPlayText = document.getElementById('btn-play-text');
+            if (btnPlayText) btnPlayText.innerText = state.isPlaying ? 'Pause' : 'Auto Play';
+            const btnPlay = document.getElementById('btn-play');
+            if (btnPlay) {
+                const icon = btnPlay.querySelector('i, svg');
+                if (icon) icon.setAttribute('data-lucide', state.isPlaying ? 'pause' : 'play');
+            }
+            // Chart
+            renderChart();
+            if (window.lucide) lucide.createIcons();
+        }
+        function renderChart() {
+            const container = document.getElementById('chart-container');
+            if (!container) return;
+            if (state.logLikelihoods.length === 0) return;
+            const min = Math.min(...state.logLikelihoods);
+            const max = Math.max(...state.logLikelihoods);
+            const range = max - min || 10;
+            container.innerHTML = state.logLikelihoods.map((val, i) => {
+                const height = ((val - min) / range * 80) + 10;
+                return `<div class="bg-blue-500 rounded-t-sm flex-1 transition-all duration-300" style="height: ${height}%" title="Iter ${i}: ${val.toFixed(2)}"></div>`;
+            }).join('');
+            const convergedBadge = document.getElementById('converged-badge');
+            if (convergedBadge) {
+                if (state.converged) {
+                    convergedBadge.classList.replace('hidden', 'flex');
+                } else {
+                    convergedBadge.classList.replace('flex', 'hidden');
+                }
+            }
+        }
+        // --- HANDLERS ---
+        function performStep() {
+            if (state.converged) return;
+            if (state.stepType === 'none' || state.stepType === 'm-step') {
+                eStep();
+            } else {
+                mStep();
+            }
+            render();
+        }
+        function toggleAutoPlay() {
+            if (state.isPlaying) {
+                stopAutoPlay();
+            } else {
+                if (state.converged) return;
+                state.isPlaying = true;
+                state.timer = setInterval(() => {
+                    performStep();
+                    if (state.converged) stopAutoPlay();
+                }, state.speed);
+                updateUI();
+            }
+        }
+        function stopAutoPlay() {
+            state.isPlaying = false;
+            clearInterval(state.timer);
+            updateUI();
+        }
+        function switchTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
+            document.querySelectorAll('.tab-trigger').forEach(el => el.classList.remove('active', 'text-slate-900'));
+            document.querySelectorAll('.tab-trigger').forEach(el => el.classList.add('text-slate-600'));
+            const tab = document.getElementById(`tab-${tabId}`);
+            if (tab) tab.classList.add('active');
+            const btn = document.getElementById(`btn-tab-${tabId}`);
+            if (btn) {
+                btn.classList.add('active', 'text-slate-900');
+                btn.classList.remove('text-slate-600');
+            }
+            if (window.lucide) lucide.createIcons();
+        }
+        function closeModal() {
+            const modal = document.getElementById('intro-modal');
+            if (modal) modal.classList.add('hidden');
+        }
+        // --- INITIALIZATION ---
+        window.onload = () => {
+            generateData();
+            // Event Listeners
+            const btnPlay = document.getElementById('btn-play');
+            if (btnPlay) btnPlay.addEventListener('click', toggleAutoPlay);
+            const btnStep = document.getElementById('btn-step');
+            if (btnStep) btnStep.addEventListener('click', performStep);
+            const btnReset = document.getElementById('btn-reset');
+            if (btnReset) btnReset.addEventListener('click', () => {
+                initClusters();
+                resetSimState();
+                render();
+            });
+            const btnGenerate = document.getElementById('btn-generate');
+            if (btnGenerate) btnGenerate.addEventListener('click', generateData);
+            const speedSlider = document.getElementById('speed-slider');
+            if (speedSlider) {
+                speedSlider.addEventListener('input', (e) => {
+                    state.speed = 3500 - parseInt(e.target.value);
+                    const text = state.speed > 2000 ? 'Slow' : state.speed > 1000 ? 'Medium' : 'Fast';
+                    const speedText = document.getElementById('speed-text');
+                    if (speedText) speedText.innerText = text;
+                    if (state.isPlaying) {
+                        stopAutoPlay();
+                        toggleAutoPlay();
+                    }
+                });
+            }
+            if (window.lucide) lucide.createIcons();
+        };
+    </script>
+</body>
+</html>

templates/gradient-descent-three.html ADDED Viewed

	@@ -0,0 +1,695 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gradient Descent Simulator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --background: #05080a;
+            --primary: #00ffff;
+            --secondary: #a855f7;
+            --accent: #ec4899;
+            --surface: #0a1014;
+            --border: #1e293b;
+        }
+        body {
+            background-color: var(--background);
+            color: #f8fafc;
+            font-family: 'Space Grotesk', sans-serif;
+            margin: 0;
+            overflow-x: hidden;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .glass {
+            background: rgba(10, 16, 20, 0.8);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(30, 41, 59, 0.5);
+        }
+        .glow-cyan {
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+        }
+        .canvas-container {
+            width: 100%;
+            height: 350px; /* Default for mobile */
+            position: relative;
+            background: #000;
+            border-radius: 1rem;
+            overflow: hidden;
+            border: 1px solid var(--border);
+        }
+        /* Desktop override */
+        @media (min-width: 768px) {
+            .canvas-container {
+                height: 500px;
+            }
+        }
+        input[type=range] {
+            -webkit-appearance: none;
+            width: 100%;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 6px;
+            cursor: pointer;
+            background: #1e293b;
+            border-radius: 3px;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            height: 18px;
+            width: 18px;
+            border-radius: 50%;
+            background: var(--primary);
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -6px;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+        .hidden { display: none; }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .animate-float { animation: float 3s ease-in-out infinite; }
+    </style>
+</head>
+<body class="p-4 md:p-8">
+    <div class="max-w-7xl mx-auto grid lg:grid-cols-[1fr_350px] gap-8">
+        <!-- Left Side: Header & Viewport -->
+        <div class="space-y-6">
+            <header class="relative flex flex-col md:block">
+                <h1 class="text-4xl md:text-5xl font-bold gradient-text text-center md:text-left">Gradient Descent</h1>
+                <!-- Centered Button (Responsive Position) -->
+                <div class="order-last md:order-none mt-4 md:mt-0 md:absolute md:left-1/2 md:-translate-x-1/2 md:top-1 flex items-center justify-center">
+                    <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+                    <a href="/gradient-descent" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                <p class="text-slate-400 text-sm max-w-md mt-2 text-center md:text-left mx-auto md:mx-0">
+                    Optimize parameters by descending the loss landscape. Now with <b>Adaptive Learning Rate</b> logic!
+                </p>
+            </header>
+            <div class="canvas-container" id="container">
+                <div id="three-canvas"></div>
+                <!-- Viewport Overlays -->
+                <div class="absolute top-4 left-4 pointer-events-none">
+                    <div class="glass px-3 py-2 rounded-lg">
+                        <div class="text-[10px] text-slate-500 font-mono uppercase tracking-widest">Status</div>
+                        <div id="status-text" class="text-xs font-mono text-cyan-400 mt-1 uppercase">Ready</div>
+                    </div>
+                </div>
+                <div class="absolute top-4 right-4 pointer-events-none text-right">
+                    <div class="glass px-3 py-2 rounded-lg">
+                        <div class="text-[10px] text-slate-500 font-mono uppercase tracking-widest">Position</div>
+                        <div id="pos-display" class="text-xs font-mono text-cyan-400 mt-1">X: 3.00 Y: 3.00</div>
+                    </div>
+                </div>
+                <div class="absolute bottom-4 left-4 glass px-3 py-1 rounded-full text-[10px] text-slate-400 font-bold border border-slate-800">
+                    GOAL AT <span id="goal-coords" class="text-green-400">0, 0</span>
+                </div>
+            </div>
+            <!-- Educational Info -->
+            <div class="glass rounded-xl overflow-hidden">
+                <button onclick="toggleInfo()" class="w-full flex items-center justify-between p-4 hover:bg-slate-800/30 transition-colors">
+                    <div class="flex items-center gap-2">
+                        <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                        <span class="font-bold">Optimizer Secrets</span>
+                    </div>
+                    <svg id="info-arrow" class="w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                </button>
+                <div id="info-content" class="p-4 pt-0 text-sm text-slate-400 leading-relaxed grid md:grid-cols-2 gap-6 border-t border-slate-800 hidden">
+                    <div class="space-y-2 pt-4">
+                        <p><strong class="text-white">Momentum (β):</strong> Acts like a physical ball with weight. It keeps moving in the same direction, helping it "roll" through flat valleys and over small local pits.</p>
+                    </div>
+                    <div class="space-y-2 pt-4">
+                        <p><strong class="text-white">The Challenge:</strong> Rosenbrock and Rastrigin are "non-convex" or have "vanishing gradients." Vanilla GD is often too weak to reach the center without help!</p>
+                    </div>
+                    <!-- Pro Tip Note -->
+                    <div class="col-span-full pt-4 border-t border-slate-800/50 mt-2">
+                        <p class="text-yellow-400 font-medium">
+                            <span class="mr-2">💡</span> <b>Pro Tip:</b> If the ball gets stuck or vibrates wildly, you must <b>adjust the learning rate</b> or <b>momentum</b>. Or turn on <b>Adaptive Rate</b> to let the algorithm handle it!
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Right Side: Controls -->
+        <aside class="space-y-6">
+            <div class="glass rounded-xl p-6 space-y-6">
+                <!-- Learning Rate Slider -->
+                <div class="space-y-4">
+                    <div class="flex justify-between items-center">
+                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Learning Rate (α)</label>
+                        <span id="lr-value" class="text-cyan-400 font-mono bg-cyan-400/10 px-2 py-0.5 rounded border border-cyan-400/20 text-sm">0.050</span>
+                    </div>
+                    <input type="range" id="lr-slider" min="0.001" max="0.5" step="0.001" value="0.05">
+                </div>
+                <!-- Adaptive Toggle -->
+                <div onclick="toggleAdaptive()" class="flex items-center justify-between p-3 rounded-lg bg-slate-800/40 border border-slate-700/50 cursor-pointer hover:bg-slate-800 transition-colors">
+                    <div class="flex flex-col">
+                        <span class="text-xs font-bold text-slate-300">Adaptive Rate</span>
+                        <span class="text-[10px] text-slate-500">Auto-tune α during descent</span>
+                    </div>
+                    <div id="adaptive-toggle-bg" class="w-10 h-5 rounded-full bg-slate-700 relative transition-colors">
+                        <div id="adaptive-toggle-dot" class="absolute left-1 top-1 w-3 h-3 rounded-full bg-white transition-all"></div>
+                    </div>
+                </div>
+                <!-- Momentum Slider -->
+                <div class="space-y-4">
+                    <div class="flex justify-between items-center">
+                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Momentum (β)</label>
+                        <span id="mom-value" class="text-purple-400 font-mono bg-purple-400/10 px-2 py-0.5 rounded border border-purple-400/20 text-sm">0.10</span>
+                    </div>
+                    <input type="range" id="mom-slider" min="0" max="0.99" step="0.01" value="0.1">
+                </div>
+                <!-- Playback Buttons -->
+                <div class="grid grid-cols-2 gap-3">
+                    <button id="btn-toggle" class="flex items-center justify-center gap-2 py-3 rounded-lg font-bold transition-all bg-cyan-400 text-black glow-cyan hover:brightness-110">
+                        <span id="toggle-icon">▶</span> <span id="toggle-text">Start</span>
+                    </button>
+                    <button id="btn-step" class="flex items-center justify-center gap-2 py-3 rounded-lg border border-slate-700 hover:bg-slate-800 transition-all font-bold">
+                        Step ➜
+                    </button>
+                </div>
+                <button id="btn-reset" class="w-full flex items-center justify-center gap-2 py-2 text-slate-400 hover:text-white text-sm transition-colors font-medium">
+                    Reset Position ↺
+                </button>
+                <!-- Stats -->
+                <div class="grid grid-cols-2 gap-4 pt-4 border-t border-slate-800">
+                    <div class="text-center">
+                        <div id="steps-val" class="text-2xl font-mono font-bold text-cyan-400">0</div>
+                        <div class="text-[10px] text-slate-500 uppercase tracking-tighter">Steps</div>
+                    </div>
+                    <div class="text-center">
+                        <div id="loss-val" class="text-2xl font-mono font-bold text-pink-500">9.00</div>
+                        <div class="text-[10px] text-slate-500 uppercase tracking-tighter">Loss</div>
+                    </div>
+                </div>
+                <!-- Progress -->
+                <div class="p-4 bg-slate-900/50 rounded-lg border border-slate-800">
+                    <div class="flex justify-between text-xs mb-2">
+                        <span class="text-slate-500">Distance to Target</span>
+                        <span id="dist-val" class="font-mono text-slate-300">4.242</span>
+                    </div>
+                    <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                        <div id="progress-bar" class="h-full bg-cyan-400 transition-all duration-300" style="width: 10%"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Level Selector -->
+            <div class="glass rounded-xl p-4 space-y-3">
+                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest px-2">Function Landscape</h3>
+                <div id="level-list" class="space-y-1">
+                    <!-- Levels injected here -->
+                </div>
+            </div>
+        </aside>
+    </div>
+    <!-- Victory Modal -->
+    <div id="victory-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm hidden">
+        <div class="glass relative max-w-sm w-full rounded-2xl p-8 text-center animate-float">
+            <!-- Close Button (Cross) -->
+            <button onclick="closeModal()" class="absolute top-4 right-4 text-slate-500 hover:text-white transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            </button>
+            <div class="w-16 h-16 bg-cyan-400/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <span class="text-3xl text-cyan-400">🏆</span>
+            </div>
+            <h2 class="text-2xl font-bold gradient-text mb-1">Convergence!</h2>
+            <p id="modal-level-name" class="text-slate-400 text-sm mb-6">Level Complete</p>
+            <div class="bg-slate-900/80 rounded-xl p-4 mb-6">
+                <div id="modal-steps" class="text-3xl font-mono text-cyan-400 font-bold">0</div>
+                <div class="text-xs text-slate-500 uppercase tracking-widest">Total Steps</div>
+            </div>
+            <div class="flex gap-3">
+                <button onclick="closeModal()" class="flex-1 py-2 rounded-lg border border-slate-700 hover:bg-slate-800 transition-colors text-sm font-semibold">Retry</button>
+                <button onclick="nextLevel()" class="flex-1 py-2 rounded-lg bg-cyan-400 text-black font-bold text-sm">Next Level</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // --- LEVEL DEFINITIONS ---
+        // Added 'presets' to automatically tune parameters for each landscape
+        const LEVELS = [
+            {
+                id: 1,
+                name: 'The Bowl',
+                difficulty: 'easy',
+                loss: (x, y) => x*x + y*y,
+                min: {x: 0, y: 0},
+                winRadius: 0.15,
+                presets: { lr: 0.05, mom: 0.1 } // Slow & Steady
+            },
+            {
+                id: 2,
+                name: 'The Ellipse',
+                difficulty: 'easy',
+                loss: (x, y) => x*x + 10*y*y,
+                min: {x: 0, y: 0},
+                winRadius: 0.2,
+                presets: { lr: 0.05, mom: 0.1 }
+            },
+            {
+                id: 3,
+                name: 'Rosenbrock Valley',
+                difficulty: 'medium',
+                loss: (x, y) => Math.pow(1-x, 2) + 100*Math.pow(y-x*x, 2),
+                min: {x: 1, y: 1},
+                winRadius: 0.25,
+                presets: { lr: 0.002, mom: 0.85 } // Needs momentum to traverse the valley
+            },
+            {
+                id: 4,
+                name: 'Beale Function',
+                difficulty: 'medium',
+                loss: (x, y) => Math.pow(1.5-x+x*y, 2) + Math.pow(2.25-x+x*y*y, 2) + Math.pow(2.625-x+x*y*y*y, 2),
+                min: {x: 3, y: 0.5},
+                winRadius: 0.25,
+                presets: { lr: 0.01, mom: 0.5 }
+            },
+            {
+                id: 5,
+                name: 'Rastrigin',
+                difficulty: 'hard',
+                loss: (x, y) => 20 + x*x - 10*Math.cos(2*Math.PI*x) + y*y - 10*Math.cos(2*Math.PI*y),
+                min: {x: 0, y: 0},
+                winRadius: 0.3,
+                presets: { lr: 0.005, mom: 0.95 } // HIGH MOMENTUM to escape local minima
+            }
+        ];
+        // Constants for 3D Visuals
+        const SURFACE_OFFSET = -0.5;
+        const Z_SCALE = 0.8;
+        const BALL_FLOAT = 0.1;
+        // --- APP STATE ---
+        let currentLevel = LEVELS[0];
+        let pos = { x: 3, y: 3 };
+        let velocity = { x: 0, y: 0 };
+        let path = [];
+        let learningRate = 0.05;
+        let momentum = 0.1; // Default starting momentum
+        let isAdaptive = false;
+        let isRunning = false;
+        let steps = 0;
+        let loopId = null;
+        let prevLoss = Infinity;
+        // --- THREE.JS SETUP ---
+        const container = document.getElementById('container');
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x05080a);
+        const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
+        camera.position.set(8, 8, 8);
+        camera.lookAt(0, 0, 0);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.getElementById('three-canvas').appendChild(renderer.domElement);
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+        scene.add(ambientLight);
+        const pointLight = new THREE.PointLight(0x00ffff, 1);
+        pointLight.position.set(10, 10, 10);
+        scene.add(pointLight);
+        function calculateVizHeight(x, y) {
+            let z = currentLevel.loss(x, y);
+            z = Math.min(z, 50);
+            return (Math.log(z + 1) * Z_SCALE) + SURFACE_OFFSET;
+        }
+        // Surface
+        let surfaceMesh;
+        function updateSurface() {
+            if (surfaceMesh) scene.remove(surfaceMesh);
+            const size = 64;
+            const geo = new THREE.PlaneBufferGeometry(10, 10, size, size);
+            const posAttr = geo.attributes.position;
+            const colorAttr = new THREE.BufferAttribute(new Float32Array(posAttr.count * 3), 3);
+            let minVal = Infinity, maxVal = -Infinity;
+            const vals = [];
+            for (let i = 0; i < posAttr.count; i++) {
+                const x = posAttr.getX(i);
+                const y = posAttr.getY(i);
+                let z = currentLevel.loss(x, y);
+                z = Math.min(z, 50);
+                z = Math.log(z + 1) * Z_SCALE;
+                vals.push(z);
+                minVal = Math.min(minVal, z);
+                maxVal = Math.max(maxVal, z);
+            }
+            for (let i = 0; i < posAttr.count; i++) {
+                const z = vals[i];
+                posAttr.setZ(i, z);
+                const t = (z - minVal) / (maxVal - minVal || 1);
+                colorAttr.setXYZ(i, 0.1 + t * 0.8, 0.8 - t * 0.6, 0.8 + t * 0.2);
+            }
+            geo.setAttribute('color', colorAttr);
+            geo.computeVertexNormals();
+            const mat = new THREE.MeshStandardMaterial({ vertexColors: true, side: THREE.DoubleSide, transparent: true, opacity: 0.8, roughness: 0.5 });
+            surfaceMesh = new THREE.Mesh(geo, mat);
+            surfaceMesh.rotation.x = -Math.PI / 2;
+            surfaceMesh.position.y = SURFACE_OFFSET;
+            scene.add(surfaceMesh);
+        }
+        const ball = new THREE.Mesh(
+            new THREE.SphereGeometry(0.18, 24, 24),
+            new THREE.MeshStandardMaterial({ color: 0xff66cc, emissive: 0xff0088, emissiveIntensity: 0.5 })
+        );
+        scene.add(ball);
+        let pathLine;
+        function updatePath() {
+            if (pathLine) scene.remove(pathLine);
+            if (path.length < 2) return;
+            const points = path.map(p => new THREE.Vector3(p.x, calculateVizHeight(p.x, p.y) + 0.05, p.y));
+            const geo = new THREE.BufferGeometry().setFromPoints(points);
+            const mat = new THREE.LineBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.8 });
+            pathLine = new THREE.Line(geo, mat);
+            scene.add(pathLine);
+        }
+        const goalMarker = new THREE.Group();
+        const torus = new THREE.Mesh(new THREE.TorusGeometry(0.3, 0.02, 16, 32), new THREE.MeshBasicMaterial({ color: 0x00ff66, transparent: true, opacity: 0.5 }));
+        torus.rotation.x = Math.PI/2;
+        const star = new THREE.Mesh(new THREE.SphereGeometry(0.08, 8, 8), new THREE.MeshBasicMaterial({ color: 0x00ff66 }));
+        goalMarker.add(torus);
+        goalMarker.add(star);
+        scene.add(goalMarker);
+        function updateGoalMarker() {
+            const gx = currentLevel.min.x;
+            const gy = currentLevel.min.y;
+            const gz = calculateVizHeight(gx, gy);
+            goalMarker.position.set(gx, gz + 0.05, gy);
+            document.getElementById('goal-coords').innerText = `[${gx}, ${gy}]`;
+        }
+        scene.add(new THREE.GridHelper(10, 20, 0x1a3a4a, 0x0a1a2a));
+        // --- OPTIMIZER LOGIC ---
+        function calculateGradient(x, y) {
+            const h = 0.0001;
+            const dx = (currentLevel.loss(x + h, y) - currentLevel.loss(x - h, y)) / (2 * h);
+            const dy = (currentLevel.loss(x, y + h) - currentLevel.loss(x, y - h)) / (2 * h);
+            const magnitude = Math.sqrt(dx*dx + dy*dy);
+            const limit = 50;
+            if (magnitude > limit) {
+                return { x: (dx / magnitude) * limit, y: (dy / magnitude) * limit, magnitude: limit };
+            }
+            return { x: dx, y: dy, magnitude };
+        }
+        function step() {
+            const currentLoss = currentLevel.loss(pos.x, pos.y);
+            const grad = calculateGradient(pos.x, pos.y);
+            // --- ADAPTIVE LOGIC ---
+            if (isAdaptive) {
+                if (currentLoss > prevLoss * 1.05) {
+                    learningRate *= 0.5;
+                }
+                else if (Math.abs(currentLoss - prevLoss) < 0.00001 && grad.magnitude < 0.01) {
+                    learningRate *= 1.2;
+                }
+                learningRate = Math.max(0.001, Math.min(0.5, learningRate));
+                updateLRElement();
+            }
+            // Momentum Logic
+            velocity.x = momentum * velocity.x - learningRate * grad.x;
+            velocity.y = momentum * velocity.y - learningRate * grad.y;
+            pos.x = Math.max(-5, Math.min(5, pos.x + velocity.x));
+            pos.y = Math.max(-5, Math.min(5, pos.y + velocity.y));
+            path.push({...pos});
+            steps++;
+            prevLoss = currentLoss;
+            updateUI();
+            const dist = Math.sqrt(Math.pow(pos.x - currentLevel.min.x, 2) + Math.pow(pos.y - currentLevel.min.y, 2));
+            if (dist < currentLevel.winRadius) {
+                stopDescent();
+                showVictory();
+            } else if (steps > 3000) {
+                stopDescent();
+            }
+        }
+        function updateLRElement() {
+            document.getElementById('lr-slider').value = learningRate;
+            document.getElementById('lr-value').innerText = learningRate.toFixed(3);
+        }
+        function updateUI() {
+            document.getElementById('pos-display').innerText = `X: ${pos.x.toFixed(2)} Y: ${pos.y.toFixed(2)}`;
+            document.getElementById('steps-val').innerText = steps;
+            const lossVal = currentLevel.loss(pos.x, pos.y);
+            document.getElementById('loss-val').innerText = lossVal.toFixed(2);
+            const dist = Math.sqrt(Math.pow(pos.x - currentLevel.min.x, 2) + Math.pow(pos.y - currentLevel.min.y, 2));
+            document.getElementById('dist-val').innerText = dist.toFixed(3);
+            document.getElementById('progress-bar').style.width = `${Math.max(5, Math.min(100, (1 - dist / 7) * 100))}%`;
+            const ballZ = calculateVizHeight(pos.x, pos.y);
+            ball.position.set(pos.x, ballZ + BALL_FLOAT, pos.y);
+            updatePath();
+        }
+        function toggleAdaptive() {
+            isAdaptive = !isAdaptive;
+            const bg = document.getElementById('adaptive-toggle-bg');
+            const dot = document.getElementById('adaptive-toggle-dot');
+            if (isAdaptive) {
+                bg.classList.replace('bg-slate-700', 'bg-cyan-400');
+                dot.style.left = '22px';
+            } else {
+                bg.classList.replace('bg-cyan-400', 'bg-slate-700');
+                dot.style.left = '4px';
+            }
+        }
+        function startDescent() {
+            isRunning = true;
+            document.getElementById('toggle-text').innerText = 'Pause';
+            document.getElementById('status-text').innerText = 'Descending...';
+            document.getElementById('status-text').className = 'text-xs font-mono text-yellow-400 mt-1 uppercase';
+            prevLoss = currentLevel.loss(pos.x, pos.y);
+            loopId = setInterval(step, 50);
+        }
+        function stopDescent() {
+            isRunning = false;
+            document.getElementById('toggle-text').innerText = 'Start';
+            document.getElementById('status-text').innerText = 'Paused';
+            document.getElementById('status-text').className = 'text-xs font-mono text-cyan-400 mt-1 uppercase';
+            clearInterval(loopId);
+        }
+        function showVictory() {
+            document.getElementById('modal-level-name').innerText = currentLevel.name;
+            document.getElementById('modal-steps').innerText = steps;
+            document.getElementById('victory-modal').classList.remove('hidden');
+        }
+        function reset() {
+            stopDescent();
+            if(currentLevel.id === 3) pos = { x: -3, y: -3 };
+            else if(currentLevel.id === 4) pos = { x: 1, y: 1 };
+            else pos = { x: (Math.random() - 0.5) * 8, y: (Math.random() - 0.5) * 8 };
+            velocity = { x: 0, y: 0 };
+            path = [{...pos}];
+            steps = 0;
+            updateUI();
+        }
+        // --- EVENT HANDLERS ---
+        document.getElementById('btn-toggle').onclick = () => isRunning ? stopDescent() : startDescent();
+        document.getElementById('btn-step').onclick = step;
+        document.getElementById('btn-reset').onclick = reset;
+        document.getElementById('lr-slider').oninput = (e) => {
+            learningRate = parseFloat(e.target.value);
+            document.getElementById('lr-value').innerText = learningRate.toFixed(3);
+        };
+        document.getElementById('mom-slider').oninput = (e) => {
+            momentum = parseFloat(e.target.value);
+            document.getElementById('mom-value').innerText = momentum.toFixed(2);
+        };
+        function toggleInfo() {
+            const content = document.getElementById('info-content');
+            content.classList.toggle('hidden');
+        }
+        function closeModal() {
+            document.getElementById('victory-modal').classList.add('hidden');
+            reset();
+        }
+        function nextLevel() {
+            const idx = LEVELS.findIndex(l => l.id === currentLevel.id);
+            const next = LEVELS[(idx + 1) % LEVELS.length];
+            selectLevel(next.id);
+            document.getElementById('victory-modal').classList.add('hidden');
+        }
+        function selectLevel(id) {
+            currentLevel = LEVELS.find(l => l.id === id);
+            // Apply Presets if they exist
+            if (currentLevel.presets) {
+                learningRate = currentLevel.presets.lr;
+                momentum = currentLevel.presets.mom;
+                // Update UI Controls
+                document.getElementById('lr-slider').value = learningRate;
+                document.getElementById('lr-value').innerText = learningRate.toFixed(3);
+                document.getElementById('mom-slider').value = momentum;
+                document.getElementById('mom-value').innerText = momentum.toFixed(2);
+            }
+            renderLevels();
+            updateSurface();
+            updateGoalMarker();
+            reset();
+        }
+        function renderLevels() {
+            const list = document.getElementById('level-list');
+            list.innerHTML = LEVELS.map(l => `
+                <button onclick="selectLevel(${l.id})" class="w-full text-left p-3 rounded-lg transition-all border ${currentLevel.id === l.id ? 'bg-cyan-400/10 border-cyan-400/50' : 'border-transparent hover:bg-slate-800'}">
+                    <div class="flex justify-between items-center mb-1">
+                        <span class="font-bold text-sm ${currentLevel.id === l.id ? 'text-cyan-400' : ''}">${l.name}</span>
+                        <span class="text-[9px] px-1.5 py-0.5 rounded border ${l.difficulty === 'easy' ? 'border-green-500/30 text-green-400' : l.difficulty === 'medium' ? 'border-yellow-500/30 text-yellow-400' : 'border-red-500/30 text-red-400'} uppercase">${l.difficulty}</span>
+                    </div>
+                </button>
+            `).join('');
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            if (isRunning) {
+                const s = 1 + Math.sin(Date.now() * 0.01) * 0.15;
+                ball.scale.setScalar(s);
+            }
+            renderer.render(scene, camera);
+        }
+        window.addEventListener('resize', () => {
+            camera.aspect = container.clientWidth / container.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(container.clientWidth, container.clientHeight);
+        });
+        renderLevels();
+        updateSurface();
+        updateGoalMarker();
+        updateUI();
+        animate();
+        // --- MOUSE & TOUCH CONTROLS ---
+        let isMouseDown = false;
+        let prevMouse = { x: 0, y: 0 };
+        // Mouse Events
+        container.addEventListener('mousedown', (e) => {
+            isMouseDown = true;
+            prevMouse = { x: e.clientX, y: e.clientY };
+        });
+        window.addEventListener('mouseup', () => isMouseDown = false);
+        window.addEventListener('mousemove', (e) => handleCameraRotate(e.clientX, e.clientY));
+        // Touch Events (Mobile)
+        container.addEventListener('touchstart', (e) => {
+            if(e.touches.length === 1) {
+                isMouseDown = true;
+                prevMouse = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+        }, { passive: false });
+        window.addEventListener('touchend', () => isMouseDown = false);
+        window.addEventListener('touchmove', (e) => {
+            if(e.touches.length === 1 && isMouseDown) {
+                handleCameraRotate(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        }, { passive: false });
+        // Common Rotation Logic
+        function handleCameraRotate(clientX, clientY) {
+            if (!isMouseDown) return;
+            const dx = (clientX - prevMouse.x) * 0.005;
+            const dy = (clientY - prevMouse.y) * 0.005;
+            const radius = camera.position.length();
+            let phi = Math.atan2(camera.position.x, camera.position.z);
+            let theta = Math.acos(camera.position.y / radius);
+            phi -= dx;
+            theta = Math.max(0.1, Math.min(Math.PI / 2.1, theta - dy));
+            camera.position.x = radius * Math.sin(theta) * Math.sin(phi);
+            camera.position.y = radius * Math.cos(theta);
+            camera.position.z = radius * Math.sin(theta) * Math.cos(phi);
+            camera.lookAt(0, 0, 0);
+            prevMouse = { x: clientX, y: clientY };
+        }
+    </script>
+</body>
+</html>

templates/ica-threejs.html ADDED Viewed

	@@ -0,0 +1,456 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ICA Simulator - Independent Component Analysis</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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Import Map -->
+    <script type="importmap">
+    {
+        "imports": {
+            "react": "https://esm.sh/react@18.2.0",
+            "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
+        }
+    }
+    </script>
+    {% raw %}
+    <style>
+        :root {
+            --background: 40 30% 98%;
+            --foreground: 220 20% 20%;
+            --card: 0 0% 100%;
+            --card-foreground: 220 20% 20%;
+            --popover: 0 0% 100%;
+            --popover-foreground: 220 20% 20%;
+            --primary: 12 80% 60%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 180 50% 45%;
+            --secondary-foreground: 0 0% 100%;
+            --muted: 40 20% 92%;
+            --muted-foreground: 220 10% 45%;
+            --accent: 260 60% 60%;
+            --accent-foreground: 0 0% 100%;
+            --destructive: 0 84.2% 60.2%;
+            --destructive-foreground: 210 40% 98%;
+            --border: 40 20% 88%;
+            --input: 40 20% 88%;
+            --ring: 12 80% 60%;
+            --radius: 1rem;
+            /* Signal Colors */
+            --signal-1: 12 85% 62%;
+            --signal-2: 175 65% 45%;
+            --signal-mixed: 280 60% 55%;
+            --shadow-soft: 0 4px 20px -4px hsl(220 20% 20% / 0.1);
+            --shadow-glow: 0 0 30px hsl(12 80% 60% / 0.2);
+        }
+        body {
+            background-color: hsl(var(--background));
+            color: hsl(var(--foreground));
+            font-family: 'Space Grotesk', sans-serif;
+            margin: 0;
+            overflow-x: hidden;
+        }
+        code, .mono { font-family: 'JetBrains Mono', monospace; }
+        .text-gradient {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .shadow-soft { box-shadow: var(--shadow-soft); }
+        .shadow-glow { box-shadow: var(--shadow-glow); }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .animate-float { animation: float 3s ease-in-out infinite; }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid hsl(var(--border));
+        }
+        input[type=range] {
+            accent-color: hsl(var(--primary));
+        }
+        canvas {
+            width: 100% !important;
+            height: auto !important;
+            display: block;
+        }
+    </style>
+    {% endraw %}
+</head>
+<body>
+    <div id="root"></div>
+    {% raw %}
+    <script type="text/babel" data-type="module">
+        import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+        import { createRoot } from 'react-dom/client';
+        /** --- Icons --- */
+        const Icons = {
+            Play: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>,
+            RotateCcw: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>,
+            Sparkles: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4M19 17v4M3 5h4M17 19h4"/></svg>,
+            Music: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>,
+            Radio: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 1 0-8.48 0"/><path d="M19.07 4.93a10 10 0 1 0-14.14 0"/></svg>,
+            Zap: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
+            ArrowRight: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
+            Lightbulb: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6m-3 4h.01M12 2a7 7 0 0 0-7 7c0 2.32 1.35 4.31 3.31 5.31l.69 1.69h6l.69-1.69C17.65 13.31 19 11.32 19 9a7 7 0 0 0-7-7z"/></svg>,
+            PartyPopper: (p) => <svg {...p} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5.8 11.3 2 22l10.7-3.8"/><path d="M4 3h.01"/><path d="M22 8h.01"/><path d="M15 2h.01"/><path d="M22 20h.01"/><path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 2.4l-.15 1.41a2.9 2.9 0 0 1-2.4 2.6l-1.4.15a2.9 2.9 0 0 0-2.4 1.96L11 13"/><path d="m18 13 2.24-.75a2.9 2.9 0 0 0 1.96-2.4l.15-1.41a2.9 2.9 0 0 1 2.4-2.6l1.4-.15a2.9 2.9 0 0 0 2.4-1.96L29 1.5"/></svg>,
+        };
+        /** --- Math Utility --- */
+        const generateSignal = (type, frequency, samples) => {
+            const signal = [];
+            for (let i = 0; i < samples; i++) {
+                const t = (i / samples) * 4 * Math.PI * frequency;
+                switch (type) {
+                    case "sine": signal.push(Math.sin(t)); break;
+                    case "square": signal.push(Math.sin(t) > 0 ? 0.8 : -0.8); break;
+                    case "sawtooth": signal.push(((t % (2 * Math.PI)) / Math.PI - 1) * 0.8); break;
+                }
+            }
+            return signal;
+        };
+        /** --- UI Sub-Components --- */
+        const Button = ({ children, className = '', variant = 'default', size = 'default', ...props }) => {
+            const variants = {
+                default: "bg-primary text-primary-foreground hover:opacity-90 shadow-soft",
+                outline: "border border-input bg-background hover:bg-slate-50",
+                ghost: "hover:bg-slate-100",
+            };
+            const sizes = { default: "h-10 px-4 py-2", lg: "h-12 px-6 text-lg", sm: "h-9 rounded-md px-3" };
+            return <button className={`inline-flex items-center justify-center rounded-xl font-medium transition-all active:scale-95 disabled:opacity-50 whitespace-nowrap ${variants[variant] || variants.default} ${sizes[size] || sizes.default} ${className}`} {...props}>{children}</button>;
+        };
+        const WaveCanvas = ({ signals, colors, width = 400, height = 120, animated = true, showGrid = true }) => {
+            const canvasRef = useRef(null);
+            const offsetRef = useRef(0);
+            useEffect(() => {
+                const canvas = canvasRef.current; if (!canvas) return;
+                const ctx = canvas.getContext("2d"); if (!ctx) return;
+                const dpr = window.devicePixelRatio || 1;
+                canvas.width = width * dpr; canvas.height = height * dpr;
+                ctx.scale(dpr, dpr);
+                let req;
+                const draw = () => {
+                    ctx.clearRect(0, 0, width, height);
+                    if (showGrid) {
+                        ctx.strokeStyle = "hsl(220 15% 88% / 0.5)"; ctx.lineWidth = 1;
+                        ctx.beginPath(); ctx.moveTo(0, height / 2); ctx.lineTo(width, height / 2); ctx.stroke();
+                    }
+                    signals.forEach((signal, idx) => {
+                        ctx.strokeStyle = colors[idx] || "#666"; ctx.lineWidth = 2.5; ctx.lineCap = "round";
+                        ctx.beginPath();
+                        const step = width / (signal.length - 1);
+                        signal.forEach((val, i) => {
+                            const x = i * step;
+                            const drift = animated ? Math.sin((i * 0.05) + offsetRef.current * 0.02) * 0.1 : 0;
+                            const y = height / 2 - (val + drift) * (height / 2 * 0.8);
+                            if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+                        });
+                        ctx.stroke();
+                    });
+                    if (animated) { offsetRef.current += 1; req = requestAnimationFrame(draw); }
+                };
+                draw();
+                return () => cancelAnimationFrame(req);
+            }, [signals, colors, width, height, animated, showGrid]);
+            return <canvas ref={canvasRef} className="rounded-lg w-full h-auto" />;
+        };
+        const MixingSlider = ({ label, value, onChange, color }) => (
+            <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-foreground">{label}</span>
+                    <span className="text-sm font-mono px-2 py-0.5 rounded bg-slate-100" style={{ color }}>{value.toFixed(2)}</span>
+                </div>
+                <input
+                    type="range" min="0" max="1" step="0.01" value={value}
+                    onChange={(e) => onChange(parseFloat(e.target.value))}
+                    className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer"
+                />
+            </div>
+        );
+        const SignalCard = ({ title, description, signals, colors, icon, badge, badgeColor = "bg-primary" }) => (
+            <div className="glass-card rounded-xl p-5 shadow-soft hover:shadow-lg transition-all group">
+                <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                        {icon && <div className="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600 group-hover:scale-110 transition-transform">{icon}</div>}
+                        <div><h3 className="font-semibold text-foreground text-sm sm:text-base">{title}</h3>{description && <p className="text-xs text-muted-foreground">{description}</p>}</div>
+                    </div>
+                    {badge && <span className={`text-[10px] font-bold px-2 py-1 rounded-full ${badgeColor} text-white uppercase`}>{badge}</span>}
+                </div>
+                <div className="bg-slate-50/50 rounded-lg p-3 overflow-hidden">
+                    <WaveCanvas signals={signals} colors={colors} width={400} height={100} />
+                </div>
+            </div>
+        );
+        const StepIndicator = ({ currentStep, totalSteps, labels }) => (
+            <div className="flex items-center justify-center gap-2 sm:gap-4 mb-8 sm:mb-12 overflow-x-auto pb-2">
+                {labels.map((label, i) => (
+                    <React.Fragment key={i}>
+                        <div className="flex flex-col items-center flex-shrink-0">
+                            <div className={`w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center font-bold text-xs sm:text-sm transition-all ${i < currentStep ? "bg-secondary text-white" : i === currentStep ? "bg-primary text-white shadow-glow" : "bg-slate-200 text-slate-400"}`}>{i + 1}</div>
+                            <span className={`mt-2 text-[8px] sm:text-[10px] font-bold uppercase tracking-wider ${i <= currentStep ? "text-foreground" : "text-slate-400"}`}>{label}</span>
+                        </div>
+                        {i < totalSteps - 1 && <div className={`w-8 sm:w-12 h-0.5 mt-[-16px] sm:mt-[-20px] ${i < currentStep ? "bg-secondary" : "bg-slate-200"}`} />}
+                    </React.Fragment>
+                ))}
+            </div>
+        );
+        /** --- Main ICA Simulator --- */
+        const App = () => {
+            const [step, setStep] = useState(0);
+            const [mixingMatrix, setMixingMatrix] = useState({ a11: 0.7, a12: 0.3, a21: 0.4, a22: 0.6 });
+            const [isUnmixing, setIsUnmixing] = useState(false);
+            const [unmixProgress, setUnmixProgress] = useState(0);
+            const SAMPLES = 200;
+            const originalSignals = useMemo(() => ({
+                signal1: generateSignal("sine", 1, SAMPLES),
+                signal2: generateSignal("square", 2, SAMPLES),
+            }), []);
+            const mixedSignals = useMemo(() => {
+                const { a11, a12, a21, a22 } = mixingMatrix;
+                const mixed1 = originalSignals.signal1.map((s1, i) => a11 * s1 + a12 * originalSignals.signal2[i]);
+                const mixed2 = originalSignals.signal1.map((s1, i) => a21 * s1 + a22 * originalSignals.signal2[i]);
+                return { mixed1, mixed2 };
+            }, [originalSignals, mixingMatrix]);
+            const recoveredSignals = useMemo(() => {
+                const { a11, a12, a21, a22 } = mixingMatrix;
+                const det = a11 * a22 - a12 * a21;
+                if (Math.abs(det) < 0.01) return { recovered1: mixedSignals.mixed1, recovered2: mixedSignals.mixed2 };
+                const invA11 = a22 / det; const invA12 = -a12 / det; const invA21 = -a21 / det; const invA22 = a11 / det;
+                const progress = unmixProgress / 100;
+                const recovered1 = mixedSignals.mixed1.map((m1, i) => {
+                    const target = invA11 * m1 + invA12 * mixedSignals.mixed2[i];
+                    return m1 + (target - m1) * progress;
+                });
+                const recovered2 = mixedSignals.mixed1.map((m1, i) => {
+                    const target = invA21 * m1 + invA22 * mixedSignals.mixed2[i];
+                    return mixedSignals.mixed2[i] + (target - mixedSignals.mixed2[i]) * progress;
+                });
+                return { recovered1, recovered2 };
+            }, [mixedSignals, mixingMatrix, unmixProgress]);
+            const runICA = useCallback(() => {
+                setIsUnmixing(true); setUnmixProgress(0);
+                const interval = setInterval(() => {
+                    setUnmixProgress(prev => {
+                        if (prev >= 100) { clearInterval(interval); setIsUnmixing(false); return 100; }
+                        return prev + 2;
+                    });
+                }, 30);
+            }, []);
+            const reset = () => { setStep(0); setUnmixProgress(0); setIsUnmixing(false); setMixingMatrix({ a11: 0.7, a12: 0.3, a21: 0.4, a22: 0.6 }); };
+            const signalColors = { signal1: "hsl(12 85% 62%)", signal2: "hsl(175 65% 45%)", mixed: "hsl(280 60% 55%)" };
+            return (
+                <div className="min-h-screen bg-background pb-12">
+                    <header className="relative overflow-hidden pt-12 pb-6 sm:pt-16 sm:pb-8">
+                        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-accent/5 to-secondary/5" />
+                        <div className="max-w-4xl mx-auto px-6 relative text-center">
+                            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-[10px] sm:text-xs font-bold uppercase tracking-wider mb-6 animate-fade-in">
+                                <Icons.Sparkles className="w-3 h-3 sm:w-4 sm:h-4" /> Interactive Lab
+                            </div>
+                            <h1 className="text-3xl md:text-6xl font-bold tracking-tight text-foreground mb-4 animate-fade-in">Understanding <span className="text-gradient">ICA</span></h1>
+                            <p className="text-muted-foreground text-sm sm:text-lg max-w-2xl mx-auto animate-fade-in leading-relaxed">Independent Component Analysis made simple. Learn to untangle mixed signals like conversations at a party!</p>
+                        </div>
+                    </header>
+                    <main className="max-w-6xl mx-auto px-4 sm:px-6">
+                        <StepIndicator currentStep={step} totalSteps={4} labels={["Sources", "Mix", "Observe", "Separate"]} />
+                        {step === 0 && (
+                            <div className="animate-fade-in space-y-6">
+                                <div className="glass-card rounded-2xl p-6 sm:p-8 flex flex-col md:flex-row gap-6 items-center shadow-soft">
+                                    <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-accent/10 flex items-center justify-center shrink-0"><Icons.Lightbulb className="w-6 h-6 sm:w-8 sm:h-8 text-accent" /></div>
+                                    <div><h2 className="text-xl sm:text-2xl font-bold mb-2">Step 1: The Original Sources</h2><p className="text-sm sm:text-base text-muted-foreground leading-relaxed">Imagine two people talking. Each voice is an <strong>independent source</strong>. In real-world data science, these could be audio recordings, brain waves, or even economic trends.</p></div>
+                                </div>
+                                <div className="grid md:grid-cols-2 gap-4 sm:gap-6">
+                                    <SignalCard title="Voice 1 (Sine Wave)" signals={[originalSignals.signal1]} colors={[signalColors.signal1]} icon={<Icons.Music className="w-4 h-4 sm:w-5 sm:h-5"/>} badge="Source A" />
+                                    <SignalCard title="Voice 2 (Square Wave)" signals={[originalSignals.signal2]} colors={[signalColors.signal2]} icon={<Icons.Radio className="w-4 h-4 sm:w-5 sm:h-5"/>} badge="Source B" />
+                                </div>
+                                <div className="flex justify-center"><Button size="lg" onClick={() => setStep(1)} className="gap-2">Next: Mix the Signals <Icons.ArrowRight className="w-4 h-4"/></Button></div>
+                            </div>
+                        )}
+                        {step === 1 && (
+                            <div className="animate-fade-in space-y-6">
+                                <div className="glass-card rounded-2xl p-6 sm:p-8 flex flex-col md:flex-row gap-6 items-center shadow-soft">
+                                    <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-secondary/10 flex items-center justify-center shrink-0"><Icons.PartyPopper className="w-6 h-6 sm:w-8 sm:h-8 text-secondary" /></div>
+                                    <div><h2 className="text-xl sm:text-2xl font-bold mb-2">Step 2: Mixing the Signals</h2><p className="text-sm sm:text-base text-muted-foreground leading-relaxed">At a party, microphones don't record one voice perfectly. They pick up a <strong>blend</strong> of everyone. Adjust the matrix sliders below to change how the signals are mixed!</p></div>
+                                </div>
+                                <div className="grid lg:grid-cols-2 gap-6">
+                                    <div className="glass-card rounded-2xl p-6 sm:p-8 space-y-6">
+                                        <h3 className="font-bold text-base sm:text-lg">Mixing Parameters</h3>
+                                        <div className="space-y-4 pt-4 border-t border-slate-100">
+                                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Mic 1 Weights</p>
+                                            <MixingSlider label="Voice A" value={mixingMatrix.a11} onChange={(v) => setMixingMatrix({ ...mixingMatrix, a11: v })} color={signalColors.signal1} />
+                                            <MixingSlider label="Voice B" value={mixingMatrix.a12} onChange={(v) => setMixingMatrix({ ...mixingMatrix, a12: v })} color={signalColors.signal2} />
+                                        </div>
+                                        <div className="space-y-4 pt-4 border-t border-slate-100">
+                                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Mic 2 Weights</p>
+                                            <MixingSlider label="Voice A" value={mixingMatrix.a21} onChange={(v) => setMixingMatrix({ ...mixingMatrix, a21: v })} color={signalColors.signal1} />
+                                            <MixingSlider label="Voice B" value={mixingMatrix.a22} onChange={(v) => setMixingMatrix({ ...mixingMatrix, a22: v })} color={signalColors.signal2} />
+                                        </div>
+                                    </div>
+                                    <div className="space-y-4">
+                                        <SignalCard title="Microphone 1 Input" signals={[mixedSignals.mixed1]} colors={[signalColors.mixed]} icon={<Icons.Zap className="w-4 h-4 sm:w-5 sm:h-5"/>} badge="Mixed" />
+                                        <SignalCard title="Microphone 2 Input" signals={[mixedSignals.mixed2]} colors={[signalColors.mixed]} icon={<Icons.Zap className="w-4 h-4 sm:w-5 sm:h-5"/>} badge="Mixed" />
+                                    </div>
+                                </div>
+                                <div className="flex flex-col sm:flex-row justify-center gap-4">
+                                    <Button variant="outline" onClick={() => setStep(0)}>Back</Button>
+                                    <Button size="lg" onClick={() => setStep(2)}>Next: Observe Challenge <Icons.ArrowRight className="ml-2 w-4 h-4"/></Button>
+                                </div>
+                            </div>
+                        )}
+                        {step === 2 && (
+                            <div className="animate-fade-in space-y-6">
+                                <div className="glass-card rounded-2xl p-6 sm:p-8 flex flex-col md:flex-row gap-6 items-center shadow-soft border-destructive/20">
+                                    <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-destructive/10 flex items-center justify-center shrink-0"><Icons.Zap className="w-6 h-6 sm:w-8 sm:h-8 text-destructive" /></div>
+                                    <div><h2 className="text-xl sm:text-2xl font-bold mb-2 text-destructive">Step 3: The ICA Challenge</h2><p className="text-sm sm:text-base text-muted-foreground leading-relaxed">We only have the <strong>mixed recordings</strong>. We don't know the original voices or how they were combined. This is a classic Blind Source Separation problem.</p></div>
+                                </div>
+                                <div className="glass-card rounded-2xl p-4 sm:p-8 space-y-6">
+                                    <h3 className="font-bold text-lg text-center">Visualizing the Entanglement</h3>
+                                    <div className="bg-white rounded-xl p-3 sm:p-6 border border-slate-100 overflow-hidden">
+                                        <WaveCanvas
+                                            signals={[originalSignals.signal1, originalSignals.signal2, mixedSignals.mixed1, mixedSignals.mixed2]}
+                                            colors={[signalColors.signal1, signalColors.signal2, signalColors.mixed, "hsl(280 40% 45%)"]}
+                                            width={600}
+                                            height={200}
+                                        />
+                                    </div>
+                                    <div className="flex flex-wrap justify-center gap-4 sm:gap-6 text-[8px] sm:text-[10px] font-bold uppercase tracking-widest text-slate-400 pt-2 sm:pt-4">
+                                        <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full" style={{ backgroundColor: signalColors.signal1 }} /> Original A</div>
+                                        <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full" style={{ backgroundColor: signalColors.signal2 }} /> Original B</div>
+                                        <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full" style={{ backgroundColor: signalColors.mixed }} /> Mixed Result</div>
+                                    </div>
+                                </div>
+                                <div className="flex flex-col sm:flex-row justify-center gap-4 px-4">
+                                    <Button variant="outline" onClick={() => setStep(1)} className="w-full sm:w-auto">Back</Button>
+                                    <Button
+                                        size="lg"
+                                        onClick={() => setStep(3)}
+                                        className="w-full sm:w-auto gap-2 text-sm sm:text-lg"
+                                    >
+                                        Next: Separate with ICA <Icons.ArrowRight className="w-4 h-4"/>
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+                        {step === 3 && (
+                            <div className="animate-fade-in space-y-6">
+                                <div className="glass-card rounded-2xl p-6 sm:p-8 flex flex-col md:flex-row gap-6 items-center shadow-soft border-secondary/20">
+                                    <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-secondary/10 flex items-center justify-center shrink-0 animate-float"><Icons.Sparkles className="w-6 h-6 sm:w-8 sm:h-8 text-secondary" /></div>
+                                    <div><h2 className="text-xl sm:text-2xl font-bold mb-2 text-secondary">Step 4: ICA Magic</h2><p className="text-sm sm:text-base text-muted-foreground leading-relaxed">ICA assumes the sources are independent and non-Gaussian. By maximizing statistical independence, it finds the inverse mixing matrix automatically.</p></div>
+                                </div>
+                                <div className="grid lg:grid-cols-2 gap-6 sm:gap-8">
+                                    <div className="space-y-4">
+                                        <h3 className="font-bold text-center text-slate-400 text-sm sm:text-base">Input: Mixed recordings</h3>
+                                        <SignalCard title="Recorded Mic 1" signals={[mixedSignals.mixed1]} colors={[signalColors.mixed]} />
+                                        <SignalCard title="Recorded Mic 2" signals={[mixedSignals.mixed2]} colors={[signalColors.mixed]} />
+                                    </div>
+                                    <div className="space-y-4">
+                                        <h3 className="font-bold text-center text-secondary text-sm sm:text-base">Output: Recovered Sources</h3>
+                                        <SignalCard title="Recovered A" signals={[recoveredSignals.recovered1]} colors={[signalColors.signal1]} badge={unmixProgress === 100 ? "Success" : `${unmixProgress}%`} badgeColor="bg-secondary" />
+                                        <SignalCard title="Recovered B" signals={[recoveredSignals.recovered2]} colors={[signalColors.signal2]} badge={unmixProgress === 100 ? "Success" : `${unmixProgress}%`} badgeColor="bg-secondary" />
+                                    </div>
+                                </div>
+                                <div className="flex flex-col items-center space-y-6">
+                                    {unmixProgress === 0 && <Button size="lg" onClick={runICA} className="bg-secondary hover:bg-secondary/90 gap-2"><Icons.Play className="w-4 h-4" /> Run ICA Algorithm</Button>}
+                                    {isUnmixing && <div className="w-full max-w-md px-4"><div className="h-2 bg-slate-100 rounded-full overflow-hidden"><div className="h-full bg-secondary transition-all" style={{ width: `${unmixProgress}%` }} /></div><p className="text-center text-[10px] font-bold mt-2 text-secondary uppercase tracking-widest">Optimizing Independence...</p></div>}
+                                    {unmixProgress === 100 && <div className="text-center space-y-4 animate-scale-in"><div className="bg-secondary/10 text-secondary px-6 sm:px-8 py-3 sm:py-4 rounded-2xl border border-secondary/20 inline-block font-bold text-sm sm:text-base">🎉 Signals successfully separated!</div></div>}
+                                </div>
+                                <div className="flex flex-col sm:flex-row justify-center gap-4 px-4 mt-6">
+                                    <Button variant="outline" onClick={() => setStep(2)} className="w-full sm:w-auto">Back</Button>
+                                    <Button variant="outline" onClick={reset} className="w-full sm:w-auto"><Icons.RotateCcw className="w-4 h-4 mr-2" /> Start Over</Button>
+                                </div>
+                            </div>
+                        )}
+                    </main>
+                    {/* Info Footer Section */}
+                    <section className="mt-12 sm:mt-16 max-w-3xl mx-auto px-4">
+                        <div className="glass-card p-6 sm:p-8 bg-gradient-to-br from-primary/5 to-accent/5 border-primary/10 rounded-3xl">
+                            <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-6 text-center">How does ICA work? 🧠</h2>
+                            <div className="grid md:grid-cols-3 gap-8 text-center">
+                                <div>
+                                    <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-3 text-lg sm:text-xl">1️⃣</div>
+                                    <h3 className="font-semibold text-foreground mb-1 text-sm sm:text-base">Assumption</h3>
+                                    <p className="text-xs sm:text-sm text-muted-foreground">Original sources are statistically independent.</p>
+                                </div>
+                                <div>
+                                    <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-3 text-lg sm:text-xl">2️⃣</div>
+                                    <h3 className="font-semibold text-foreground mb-1 text-sm sm:text-base">Goal</h3>
+                                    <p className="text-xs sm:text-sm text-muted-foreground">Find a transformation that maximizes output independence.</p>
+                                </div>
+                                <div>
+                                    <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-secondary/10 flex items-center justify-center mx-auto mb-3 text-lg sm:text-xl">3️⃣</div>
+                                    <h3 className="font-semibold text-foreground mb-1 text-sm sm:text-base">Result</h3>
+                                    <p className="text-xs sm:text-sm text-muted-foreground">Recover original hidden sources from mixed records.</p>
+                                </div>
+                            </div>
+                        </div>
+        <div class="absolute left-1/2 -translate-x-1/2 flex items-center">
+            <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+            <a href="/ica" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                    </section>
+                </div>
+            );
+        };
+        const root = createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+    {% endraw %}
+</body>
+</html>

templates/lda-three.html ADDED Viewed

	@@ -0,0 +1,688 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LDA Simulator</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        border: "hsl(var(--border))",
+                        input: "hsl(var(--input))",
+                        ring: "hsl(var(--ring))",
+                        background: "hsl(var(--background))",
+                        foreground: "hsl(var(--foreground))",
+                        primary: {
+                            DEFAULT: "hsl(var(--primary))",
+                            foreground: "hsl(var(--primary-foreground))",
+                        },
+                        secondary: {
+                            DEFAULT: "hsl(var(--secondary))",
+                            foreground: "hsl(var(--secondary-foreground))",
+                        },
+                        destructive: {
+                            DEFAULT: "hsl(var(--destructive))",
+                            foreground: "hsl(var(--destructive-foreground))",
+                        },
+                        muted: {
+                            DEFAULT: "hsl(var(--muted))",
+                            foreground: "hsl(var(--muted-foreground))",
+                        },
+                        accent: {
+                            DEFAULT: "hsl(var(--accent))",
+                            foreground: "hsl(var(--accent-foreground))",
+                        },
+                        card: {
+                            DEFAULT: "hsl(var(--card))",
+                            foreground: "hsl(var(--card-foreground))",
+                        },
+                        // Custom LDA Class Colors
+                        'class-a': '#06b6d4', // Cyan-500
+                        'class-b': '#d946ef', // Fuchsia-500
+                        'centroid': '#f59e0b', // Amber-500
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0', transform: 'translateY(10px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- React & ReactDOM -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <!-- Babel for JSX -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+        :root {
+            --background: 222.2 84% 4.9%;
+            --foreground: 210 40% 98%;
+            --card: 222.2 84% 4.9%;
+            --card-foreground: 210 40% 98%;
+            --popover: 222.2 84% 4.9%;
+            --popover-foreground: 210 40% 98%;
+            --primary: 217.2 91.2% 59.8%;
+            --primary-foreground: 222.2 47.4% 11.2%;
+            --secondary: 217.2 32.6% 17.5%;
+            --secondary-foreground: 210 40% 98%;
+            --muted: 217.2 32.6% 17.5%;
+            --muted-foreground: 215 20.2% 65.1%;
+            --accent: 217.2 32.6% 17.5%;
+            --accent-foreground: 210 40% 98%;
+            --destructive: 0 62.8% 30.6%;
+            --destructive-foreground: 210 40% 98%;
+            --border: 217.2 32.6% 17.5%;
+            --input: 217.2 32.6% 17.5%;
+            --ring: 212.7 26.8% 83.9%;
+        }
+        body {
+            background-color: hsl(222.2, 84%, 4.9%);
+            color: hsl(210, 40%, 98%);
+            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        }
+        .glow-primary { box-shadow: 0 0 15px hsl(217.2, 91.2%, 59.8%, 0.3); }
+        .glow-accent { box-shadow: 0 0 15px hsl(189, 94%, 43%, 0.3); }
+        .glow-class-b { box-shadow: 0 0 15px hsl(300, 76%, 60%, 0.3); }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useRef, useCallback, useMemo } = React;
+        // --- UTILS ---
+        function cn(...classes) {
+            return classes.filter(Boolean).join(' ');
+        }
+        // --- MATH ENGINE (LDA) ---
+        // Simplified Linear Discriminant Analysis for 2D data
+        const calculateLDA = (points, canvasWidth, canvasHeight) => {
+            const classA = points.filter(p => p.classLabel === 'A');
+            const classB = points.filter(p => p.classLabel === 'B');
+            if (classA.length < 2 || classB.length < 2) return null;
+            // 1. Calculate Mean Vectors (Centroids)
+            const getMean = (pts) => {
+                const sum = pts.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+                return { x: sum.x / pts.length, y: sum.y / pts.length };
+            };
+            const meanA = getMean(classA);
+            const meanB = getMean(classB);
+            // 2. Calculate Within-Class Scatter Matrix (Sw)
+            // Sw = sum((x - mu)(x - mu)T) for all classes
+            let swxx = 0, swxy = 0, swyy = 0;
+            const addToScatter = (pts, mean) => {
+                pts.forEach(p => {
+                    const dx = p.x - mean.x;
+                    const dy = p.y - mean.y;
+                    swxx += dx * dx;
+                    swxy += dx * dy;
+                    swyy += dy * dy;
+                });
+            };
+            addToScatter(classA, meanA);
+            addToScatter(classB, meanB);
+            // 3. Calculate Inverse of Sw (Sw^-1)
+            const det = swxx * swyy - swxy * swxy;
+            if (Math.abs(det) < 1e-10) return null; // Singular matrix
+            const invSwxx = swyy / det;
+            const invSwxy = -swxy / det;
+            const invSwyy = swxx / det;
+            // 4. Calculate Vector w = Sw^-1 * (meanB - meanA)
+            // We want direction that separates means
+            const diffMeanX = meanB.x - meanA.x;
+            const diffMeanY = meanB.y - meanA.y;
+            const wx = invSwxx * diffMeanX + invSwxy * diffMeanY;
+            const wy = invSwxy * diffMeanX + invSwyy * diffMeanY;
+            // Normalize w
+            const mag = Math.sqrt(wx * wx + wy * wy);
+            const w = { x: wx / mag, y: wy / mag };
+            // 5. Project Points onto Line defined by w passing through Global Mean
+            const allPoints = [...classA, ...classB];
+            const globalMean = getMean(allPoints);
+            const projectedPoints = allPoints.map(p => {
+                // Vector from mean to point
+                const vmx = p.x - globalMean.x;
+                const vmy = p.y - globalMean.y;
+                // Scalar projection length
+                const dot = vmx * w.x + vmy * w.y;
+                // Projected point coordinates
+                return {
+                    x: globalMean.x + dot * w.x,
+                    y: globalMean.y + dot * w.y,
+                    classLabel: p.classLabel
+                };
+            });
+            return {
+                projectionVector: w,
+                centroidA: meanA,
+                centroidB: meanB,
+                projectedPoints
+            };
+        };
+        // --- UI COMPONENTS ---
+        const Button = ({ children, className, variant = "default", ...props }) => {
+            const base = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2";
+            const variants = {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                ghost: "hover:bg-accent hover:text-accent-foreground"
+            };
+            return (
+                <button className={cn(base, variants[variant], className)} {...props}>
+                    {children}
+                </button>
+            );
+        };
+        const Toast = ({ message, type, onClose }) => {
+            useEffect(() => {
+                const timer = setTimeout(onClose, 3000);
+                return () => clearTimeout(timer);
+            }, [onClose]);
+            return (
+                <div className={cn(
+                    "fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-medium animate-fade-in z-50",
+                    type === 'error' ? "bg-red-500" : "bg-emerald-600"
+                )}>
+                    {message}
+                </div>
+            );
+        };
+        // --- ICONS ---
+        const IconWrapper = ({ children, 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}>
+                {children}
+            </svg>
+        );
+        const Icons = {
+            CircleDot: (props) => <IconWrapper {...props}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></IconWrapper>,
+            Trash2: (props) => <IconWrapper {...props}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></IconWrapper>,
+            Play: (props) => <IconWrapper {...props}><polygon points="5 3 19 12 5 21 5 3"/></IconWrapper>,
+            RotateCcw: (props) => <IconWrapper {...props}><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></IconWrapper>,
+            Sparkles: (props) => <IconWrapper {...props}><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M9 3v4"/><path d="M3 9h4"/><path d="M3 5h4"/></IconWrapper>,
+            Info: (props) => <IconWrapper {...props}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></IconWrapper>,
+            Target: (props) => <IconWrapper {...props}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></IconWrapper>,
+            Layers: (props) => <IconWrapper {...props}><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"/></IconWrapper>,
+            TrendingUp: (props) => <IconWrapper {...props}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></IconWrapper>,
+            BookOpen: (props) => <IconWrapper {...props}><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></IconWrapper>,
+            Check: (props) => <IconWrapper {...props}><polyline points="20 6 9 17 4 12"/></IconWrapper>,
+            Circle: (props) => <IconWrapper {...props}><circle cx="12" cy="12" r="10"/></IconWrapper>,
+            ArrowRight: (props) => <IconWrapper {...props}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></IconWrapper>,
+        };
+        // --- SUB-COMPONENTS ---
+        const LDACanvas = ({ points, onAddPoint, selectedClass, showProjection, ldaResult }) => {
+            const canvasRef = useRef(null);
+            const containerRef = useRef(null);
+            const [canvasSize, setCanvasSize] = useState({ width: 600, height: 400 });
+            // Handle adding points
+            const handleCanvasClick = useCallback((e) => {
+                const canvas = canvasRef.current;
+                if (!canvas) return;
+                const rect = canvas.getBoundingClientRect();
+                const x = (e.clientX - rect.left) * (canvas.width / rect.width);
+                const y = (e.clientY - rect.top) * (canvas.height / rect.height);
+                onAddPoint({ x, y, classLabel: selectedClass });
+            }, [onAddPoint, selectedClass]);
+            // Resize observer
+            useEffect(() => {
+                const handleResize = () => {
+                    const container = containerRef.current;
+                    if (container) {
+                        setCanvasSize({
+                            width: container.clientWidth,
+                            height: Math.min(400, container.clientWidth * 0.75)
+                        });
+                    }
+                };
+                window.addEventListener('resize', handleResize);
+                handleResize();
+                return () => window.removeEventListener('resize', handleResize);
+            }, []);
+            // Draw Loop
+            useEffect(() => {
+                const canvas = canvasRef.current;
+                if (!canvas) return;
+                const ctx = canvas.getContext("2d");
+                // Clear
+                ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
+                // Grid
+                ctx.strokeStyle = "rgba(100, 116, 139, 0.1)";
+                ctx.lineWidth = 1;
+                const gridSize = 30;
+                for (let x = 0; x < canvasSize.width; x += gridSize) {
+                    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvasSize.height); ctx.stroke();
+                }
+                for (let y = 0; y < canvasSize.height; y += gridSize) {
+                    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvasSize.width, y); ctx.stroke();
+                }
+                // Projection
+                if (showProjection && ldaResult) {
+                    const { projectionVector, centroidA, centroidB, projectedPoints } = ldaResult;
+                    const allPts = [...points];
+                    // Global Mean approx
+                    const gMean = {
+                         x: allPts.reduce((s, p) => s + p.x, 0) / allPts.length,
+                         y: allPts.reduce((s, p) => s + p.y, 0) / allPts.length
+                    };
+                    // Draw Line
+                    const lineLen = 1000;
+                    ctx.beginPath();
+                    ctx.strokeStyle = "hsl(45, 93%, 58%)"; // Amber
+                    ctx.lineWidth = 2;
+                    ctx.setLineDash([5, 5]);
+                    ctx.moveTo(gMean.x - projectionVector.x * lineLen, gMean.y - projectionVector.y * lineLen);
+                    ctx.lineTo(gMean.x + projectionVector.x * lineLen, gMean.y + projectionVector.y * lineLen);
+                    ctx.stroke();
+                    ctx.setLineDash([]);
+                    // Draw Projected Points
+                    projectedPoints.forEach(pp => {
+                        ctx.beginPath();
+                        ctx.fillStyle = pp.classLabel === 'A' ? "hsl(189, 94%, 43%)" : "hsl(300, 76%, 60%)";
+                        ctx.globalAlpha = 0.5;
+                        ctx.arc(pp.x, pp.y, 4, 0, Math.PI * 2);
+                        ctx.fill();
+                        // Connecting line (optional, purely for visual connection)
+                        // This would need original point ref, skipping for simplicity
+                    });
+                    ctx.globalAlpha = 1;
+                    // Centroids
+                    [centroidA, centroidB].forEach((c, idx) => {
+                        ctx.beginPath();
+                        ctx.strokeStyle = idx === 0 ? "hsl(189, 94%, 43%)" : "hsl(300, 76%, 60%)";
+                        ctx.lineWidth = 2;
+                        ctx.arc(c.x, c.y, 12, 0, Math.PI * 2);
+                        ctx.stroke();
+                        // Cross
+                        ctx.beginPath();
+                        ctx.moveTo(c.x - 5, c.y); ctx.lineTo(c.x + 5, c.y);
+                        ctx.moveTo(c.x, c.y - 5); ctx.lineTo(c.x, c.y + 5);
+                        ctx.stroke();
+                    });
+                }
+                // Points
+                points.forEach(p => {
+                    ctx.beginPath();
+                    const color = p.classLabel === 'A' ? "hsl(189, 94%, 43%)" : "hsl(300, 76%, 60%)";
+                    // Glow
+                    const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 15);
+                    grad.addColorStop(0, color);
+                    grad.addColorStop(1, "transparent");
+                    ctx.fillStyle = grad;
+                    ctx.globalAlpha = 0.3;
+                    ctx.arc(p.x, p.y, 15, 0, Math.PI * 2);
+                    ctx.fill();
+                    // Core
+                    ctx.globalAlpha = 1;
+                    ctx.fillStyle = color;
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, 6, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.strokeStyle = "white";
+                    ctx.lineWidth = 1.5;
+                    ctx.stroke();
+                });
+            }, [points, canvasSize, showProjection, ldaResult]);
+            return (
+                <div ref={containerRef} className="relative w-full rounded-xl overflow-hidden border border-border bg-card/50 backdrop-blur-sm shadow-sm">
+                    <canvas
+                        ref={canvasRef}
+                        width={canvasSize.width}
+                        height={canvasSize.height}
+                        onClick={handleCanvasClick}
+                        className="cursor-crosshair block w-full h-auto"
+                    />
+                    <div className="absolute bottom-3 left-3 flex gap-2 text-[10px] sm:text-xs font-mono">
+                        <span className="px-2 py-1 rounded bg-secondary/90 text-class-a border border-class-a/20">
+                            Class A: {points.filter((p) => p.classLabel === "A").length}
+                        </span>
+                        <span className="px-2 py-1 rounded bg-secondary/90 text-class-b border border-class-b/20">
+                            Class B: {points.filter((p) => p.classLabel === "B").length}
+                        </span>
+                    </div>
+                </div>
+            );
+        };
+        const ControlPanel = ({ selectedClass, onSelectClass, onClear, onRunLDA, onLoadExample, canRunLDA, showProjection }) => (
+            <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-center justify-between p-4 rounded-xl bg-card border border-border shadow-sm">
+                <div className="flex gap-2 w-full sm:w-auto justify-center">
+                    <Button
+                        variant={selectedClass === "A" ? "default" : "outline"}
+                        onClick={() => onSelectClass("A")}
+                        className={`gap-2 flex-1 sm:flex-none ${selectedClass === "A" ? "bg-class-a hover:bg-class-a/90 text-white glow-accent" : "border-class-a/50 text-class-a hover:bg-class-a/10"}`}
+                    >
+                        <Icons.CircleDot className="w-4 h-4" /> Class A
+                    </Button>
+                    <Button
+                        variant={selectedClass === "B" ? "default" : "outline"}
+                        onClick={() => onSelectClass("B")}
+                        className={`gap-2 flex-1 sm:flex-none ${selectedClass === "B" ? "bg-class-b hover:bg-class-b/90 text-white glow-class-b" : "border-class-b/50 text-class-b hover:bg-class-b/10"}`}
+                    >
+                        <Icons.CircleDot className="w-4 h-4" /> Class B
+                    </Button>
+                </div>
+                <div className="flex gap-2 w-full sm:w-auto justify-center">
+                    <Button variant="outline" onClick={onLoadExample} className="gap-2 text-xs sm:text-sm">
+                        <Icons.Sparkles className="w-4 h-4" /> Example
+                    </Button>
+                    <Button variant="outline" onClick={onClear} className="gap-2 border-destructive/50 text-destructive hover:bg-destructive/10 text-xs sm:text-sm">
+                        <Icons.Trash2 className="w-4 h-4" /> Clear
+                    </Button>
+                    <Button
+                        onClick={onRunLDA}
+                        disabled={!canRunLDA}
+                        className={`gap-2 flex-1 sm:flex-none min-w-[120px] ${showProjection ? "bg-primary/80" : "glow-primary"}`}
+                    >
+                        {showProjection ? <><Icons.RotateCcw className="w-4 h-4" /> Reset View</> : <><Icons.Play className="w-4 h-4" /> Run LDA</>}
+                    </Button>
+                </div>
+            </div>
+        );
+        const StepIndicator = ({ currentStep, showProjection }) => {
+            const steps = ["Add A", "Add B", "Run LDA", "Project"];
+            const activeStep = showProjection ? 4 : currentStep;
+            return (
+                <div className="flex items-center justify-between sm:justify-center gap-2 sm:gap-4 p-4 rounded-xl bg-card/50 border border-border/50 overflow-x-auto">
+                    {steps.map((label, index) => {
+                        const stepNum = index + 1;
+                        const isCompleted = stepNum < activeStep;
+                        const isActive = stepNum === activeStep;
+                        return (
+                            <div key={index} className="flex items-center gap-2 min-w-fit">
+                                <div className={cn("w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs sm:text-sm font-mono transition-all",
+                                    isCompleted ? "bg-accent text-white" : isActive ? "bg-primary text-primary-foreground glow-primary" : "bg-secondary text-muted-foreground"
+                                )}>
+                                    {isCompleted ? <Icons.Check className="w-3 h-3 sm:w-4 sm:h-4" /> : isActive ? <Icons.CircleDot className="w-3 h-3 sm:w-4 sm:h-4" /> : stepNum}
+                                </div>
+                                <span className={cn("text-xs hidden sm:block", isActive ? "text-foreground font-medium" : "text-muted-foreground")}>{label}</span>
+                                {index < steps.length - 1 && <Icons.ArrowRight className="w-3 h-3 text-muted-foreground/30" />}
+                            </div>
+                        )
+                    })}
+                </div>
+            );
+        };
+        const ExplanationPanel = ({ step, showProjection }) => {
+            const currentStep = showProjection ? "result" : step;
+            const content = {
+                intro: { icon: Icons.Info, title: "Welcome!", desc: "LDA finds the best way to separate groups.", details: ["Click canvas to add points", "Switch classes with buttons"] },
+                addPoints: { icon: Icons.Target, title: "Add Points", desc: "Create two groups of data.", details: ["Add at least 3 points per class", "Try overlapping groups to see LDA magic"] },
+                centroids: { icon: Icons.Layers, title: "Ready to Run", desc: "We have enough data.", details: ["LDA will calculate centroids (averages)", "It finds a line to separate them"] },
+                projection: { icon: Icons.TrendingUp, title: "Projection", desc: "LDA finds the optimal separation line.", details: ["Golden line = Projection direction", "Notice how classes separate on the line"] },
+                result: { icon: Icons.TrendingUp, title: "Result", desc: "Data reduced from 2D to 1D.", details: ["Maximizes between-class distance", "Minimizes within-class scatter"] }
+            }[currentStep];
+            const Icon = content.icon;
+            return (
+                <div className="p-5 rounded-xl bg-card border border-border animate-fade-in shadow-sm">
+                    <div className="flex items-start gap-3 mb-4">
+                        <div className="p-2 rounded-lg bg-primary/20 text-primary"><Icon className="w-5 h-5" /></div>
+                        <div>
+                            <h3 className="font-semibold text-lg text-foreground">{content.title}</h3>
+                            <p className="text-muted-foreground text-sm mt-1">{content.desc}</p>
+                        </div>
+                    </div>
+                    <ul className="space-y-2 ml-10">
+                        {content.details.map((d, i) => (
+                            <li key={i} className="text-sm text-muted-foreground flex items-start gap-2">
+                                <span className="text-primary mt-1">•</span> {d}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            );
+        };
+        const FormulaCard = ({ showProjection }) => (
+            <div className="p-5 rounded-xl bg-card border border-border shadow-sm mt-4 lg:mt-0">
+                <div className="flex items-center gap-2 mb-4">
+                    <Icons.BookOpen className="w-5 h-5 text-primary" />
+                    <h3 className="font-semibold text-foreground">The Math</h3>
+                </div>
+                <div className="space-y-4 text-sm">
+                    <div className="p-3 rounded-lg bg-secondary/50 font-mono text-center text-xs sm:text-base">
+                        <span className="text-primary">w</span>
+                        <span className="text-muted-foreground"> = </span>
+                        <span className="text-accent">S<sub>w</sub><sup>-1</sup></span>
+                        <span className="text-muted-foreground"> (</span>
+                        <span className="text-class-b">μ<sub>B</sub></span>
+                        <span className="text-muted-foreground"> - </span>
+                        <span className="text-class-a">μ<sub>A</sub></span>
+                        <span className="text-muted-foreground">)</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground text-center">
+                        We inverse the Scatter Matrix (<span className="text-accent">S<sub>w</sub></span>) and multiply by the difference of Means.
+                    </p>
+                </div>
+            </div>
+        );
+        const TheorySection = () => (
+            <div className="mt-8 grid md:grid-cols-2 gap-6 animate-fade-in">
+                <div className="p-6 rounded-xl bg-card border border-border">
+                    <div className="flex items-center gap-2 mb-4">
+                        <Icons.BookOpen className="w-5 h-5 text-primary" />
+                        <h2 className="text-xl font-bold">The Intuition</h2>
+                    </div>
+                    <p className="text-muted-foreground mb-4">
+                        Imagine you have two bags of mixed candy (classes) spilled on a table. You want to take a photo (project to 2D -> 1D) such that the two types of candy look as separate as possible in the picture.
+                    </p>
+                    <p className="text-muted-foreground">
+                        LDA tries to find the camera angle that:
+                    </p>
+                    <ul className="list-disc ml-5 mt-2 space-y-1 text-muted-foreground">
+                        <li>Keeps candies of the same type close together (<strong>Minimize Within-Class Variance</strong>)</li>
+                        <li>Pushes the centers of the two groups far apart (<strong>Maximize Between-Class Variance</strong>)</li>
+                    </ul>
+                </div>
+                <div className="p-6 rounded-xl bg-card border border-border">
+                    <div className="flex items-center gap-2 mb-4">
+                        <Icons.TrendingUp className="w-5 h-5 text-accent" />
+                        <h2 className="text-xl font-bold">Fisher's Criterion</h2>
+                    </div>
+                    <p className="text-muted-foreground mb-4">
+                        Mathematically, LDA solves for a vector <span className="font-mono text-primary">w</span> that maximizes the ratio <span className="font-mono">J(w)</span>:
+                    </p>
+                    <div className="p-4 bg-secondary/30 rounded-lg text-center font-mono my-4">
+                        J(w) = <span className="text-accent">Between-Class Variance</span> / <span className="text-primary">Within-Class Variance</span>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                        If we just maximized the distance between means, we might pick an angle where the classes are spread out and overlap. By dividing by the variance (spread), we ensure the clusters are tight <i>and</i> separated.
+                    </p>
+                </div>
+            </div>
+        );
+        const App = () => {
+            const [points, setPoints] = useState([]);
+            const [selectedClass, setSelectedClass] = useState("A");
+            const [showProjection, setShowProjection] = useState(false);
+            const [ldaResult, setLdaResult] = useState(null);
+            const [toastMsg, setToastMsg] = useState(null);
+            const showToast = (msg, type = 'info') => setToastMsg({ msg, type, id: Date.now() });
+            // Example Data
+            const handleLoadExample = () => {
+                setPoints([
+                    { x: 120, y: 150, classLabel: "A" }, { x: 150, y: 180, classLabel: "A" },
+                    { x: 130, y: 200, classLabel: "A" }, { x: 160, y: 160, classLabel: "A" },
+                    { x: 140, y: 220, classLabel: "A" }, { x: 180, y: 190, classLabel: "A" },
+                    { x: 450, y: 200, classLabel: "B" }, { x: 480, y: 230, classLabel: "B" },
+                    { x: 460, y: 260, classLabel: "B" }, { x: 490, y: 180, classLabel: "B" },
+                    { x: 520, y: 220, classLabel: "B" }, { x: 470, y: 280, classLabel: "B" },
+                ]);
+                setShowProjection(false);
+                setLdaResult(null);
+                showToast("Example data loaded!");
+            };
+            const handleAddPoint = (point) => {
+                if (showProjection) return;
+                setPoints(prev => [...prev, point]);
+            };
+            const handleClear = () => {
+                setPoints([]);
+                setShowProjection(false);
+                setLdaResult(null);
+                showToast("Canvas cleared");
+            };
+            const handleRunLDA = () => {
+                if (showProjection) {
+                    setShowProjection(false);
+                    setLdaResult(null);
+                    return;
+                }
+                const result = calculateLDA(points);
+                if (result) {
+                    setLdaResult(result);
+                    setShowProjection(true);
+                    showToast("LDA Projection calculated!", "success");
+                } else {
+                    showToast("Need more points!", "error");
+                }
+            };
+            const classACount = points.filter(p => p.classLabel === 'A').length;
+            const classBCount = points.filter(p => p.classLabel === 'B').length;
+            const canRunLDA = classACount >= 2 && classBCount >= 2;
+            const getCurrentStep = () => {
+                if (classACount === 0) return 1;
+                if (classBCount === 0) return 2;
+                if (!showProjection) return 3;
+                return 4;
+            };
+            const getExplanationStep = () => {
+                if (points.length === 0) return "intro";
+                if (classACount < 2 || classBCount < 2) return "addPoints";
+                if (!showProjection) return "centroids";
+                return "projection";
+            };
+            return (
+                <div className="min-h-screen pb-10">
+                    <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-10">
+                        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+                            <div>
+                                <h1 className="text-xl sm:text-2xl font-bold text-foreground">
+                                    LDA <span className="text-primary">Simulator</span>
+                                </h1>
+                                <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">Linear Discriminant Analysis — Interactive Learning</p>
+                            </div>
+                        </div>
+                    </header>
+        <div class="absolute left-1/2 -translate-x-1/2 flex items-center">
+            <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+            <a href="/lda" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                    <main className="container mx-auto px-4 py-6 space-y-6">
+                        <StepIndicator currentStep={getCurrentStep()} showProjection={showProjection} />
+                        <div className="grid lg:grid-cols-3 gap-6">
+                            <div className="lg:col-span-2 space-y-4">
+                                <ControlPanel
+                                    selectedClass={selectedClass} onSelectClass={setSelectedClass}
+                                    onClear={handleClear} onRunLDA={handleRunLDA} onLoadExample={handleLoadExample}
+                                    canRunLDA={canRunLDA} showProjection={showProjection}
+                                />
+                                <LDACanvas
+                                    points={points} onAddPoint={handleAddPoint}
+                                    selectedClass={selectedClass} showProjection={showProjection} ldaResult={ldaResult}
+                                />
+                                <div className="flex flex-wrap gap-2 text-[10px] sm:text-xs">
+                                    <span className="px-3 py-1.5 rounded-full bg-class-a/20 text-class-a border border-class-a/30">● Class A (Cyan)</span>
+                                    <span className="px-3 py-1.5 rounded-full bg-class-b/20 text-class-b border border-class-b/30">● Class B (Magenta)</span>
+                                    {showProjection && <span className="px-3 py-1.5 rounded-full bg-primary/20 text-primary border border-primary/30">─ ─ Projection</span>}
+                                </div>
+                            </div>
+                            <div className="space-y-4">
+                                <ExplanationPanel step={getExplanationStep()} showProjection={showProjection} />
+                                <FormulaCard showProjection={showProjection} />
+                            </div>
+                        </div>
+                        <TheorySection />
+                    </main>
+                    {toastMsg && <Toast message={toastMsg.msg} type={toastMsg.type} onClose={() => setToastMsg(null)} />}
+                </div>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>

templates/pca-threejs.html ADDED Viewed

	@@ -0,0 +1,524 @@

+<!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>PCA Playground - Interactive Tool</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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Import Map -->
+    <script type="importmap">
+    {
+        "imports": {
+            "react": "https://esm.sh/react@18.2.0",
+            "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
+        }
+    }
+    </script>
+    <style>
+        :root {
+            --background: 40 30% 98%;
+            --foreground: 220 20% 20%;
+            --card: 0 0% 100%;
+            --card-foreground: 220 20% 20%;
+            --popover: 0 0% 100%;
+            --popover-foreground: 220 20% 20%;
+            --primary: 12 80% 60%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 180 50% 45%;
+            --secondary-foreground: 0 0% 100%;
+            --muted: 40 20% 92%;
+            --muted-foreground: 220 10% 45%;
+            --accent: 260 60% 60%;
+            --accent-foreground: 0 0% 100%;
+            --destructive: 0 84.2% 60.2%;
+            --destructive-foreground: 210 40% 98%;
+            --border: 40 20% 88%;
+            --input: 40 20% 88%;
+            --ring: 12 80% 60%;
+            --radius: 1rem;
+            --pc1-color: 180 70% 45%;
+            --pc2-color: 260 60% 60%;
+            --point-color: 12 80% 60%;
+            --grid-color: 220 20% 90%;
+            --gradient-warm: linear-gradient(135deg, hsl(12 80% 60%) 0%, hsl(30 90% 65%) 100%);
+            --gradient-cool: linear-gradient(135deg, hsl(180 50% 45%) 0%, hsl(200 60% 50%) 100%);
+            --gradient-accent: linear-gradient(135deg, hsl(260 60% 60%) 0%, hsl(280 70% 65%) 100%);
+            --gradient-bg: linear-gradient(180deg, hsl(40 30% 98%) 0%, hsl(40 25% 95%) 100%);
+            --shadow-soft: 0 4px 20px -4px hsl(220 20% 20% / 0.1);
+            --shadow-glow: 0 0 30px hsl(12 80% 60% / 0.2);
+        }
+        body {
+            background-color: hsl(var(--background));
+            color: hsl(var(--foreground));
+            font-family: 'Space Grotesk', sans-serif;
+            margin: 0;
+            overflow-x: hidden;
+            -webkit-tap-highlight-color: transparent;
+        }
+        code, .mono { font-family: 'JetBrains Mono', monospace; }
+        .shadow-soft { box-shadow: var(--shadow-soft); }
+        .text-pc1 { color: hsl(var(--pc1-color)); }
+        .bg-pc1 { background-color: hsl(var(--pc1-color)); }
+        .text-pc2 { color: hsl(var(--pc2-color)); }
+        .bg-pc2 { background-color: hsl(var(--pc2-color)); }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
+        canvas { touch-action: none; }
+        .glass-btn {
+            background: white;
+            border: 1px solid hsl(var(--border));
+            transition: all 0.2s;
+        }
+        .glass-btn:hover { background: hsl(var(--muted)); }
+        .glass-btn-active {
+            background: hsl(var(--primary));
+            color: white;
+            border-color: hsl(var(--primary));
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel" data-type="module">
+        import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+        import { createRoot } from 'react-dom/client';
+        /** --- Utils: Icons --- */
+        const Icons = {
+            Trash: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"/></svg>,
+            Eye: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>,
+            EyeOff: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24M10.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.68M6.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" y1="2" x2="22" y2="22"/></svg>,
+            Tags: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58M13 13l3.58 3.58a2.41 2.41 0 0 0 3.42 0l3.58-3.58a2.41 2.41 0 0 0 0-3.42L13 2H6"/></svg>,
+            Tag: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
+            Sparkles: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L12 3Z"/><path d="M5 3v4M19 17v4M3 5h4M17 19h4"/></svg>,
+            ChevronDown: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
+            ChevronUp: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m18 15-6-6-6 6"/></svg>,
+            Camera: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="13" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><circle cx="12" cy="13" r="3"/></svg>,
+            Chart: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>,
+            Dna: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m8 18.8 8.9-8.9M12 12l3.5-3.5M15.5 15.4 12 12M19 11.9l-3.5-3.5M19 19 10.1 10.1M5 12.1 8.4 8.7M8.5 15.4 12 12M5 5l8.9 8.9"/></svg>,
+            Music: (p) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>,
+        };
+        /** --- Math Logic --- */
+        const calculatePCA = (points) => {
+            if (points.length < 2) return null;
+            const n = points.length;
+            const mean = { x: points.reduce((s, p) => s + p.x, 0) / n, y: points.reduce((s, p) => s + p.y, 0) / n };
+            let covXX = 0, covYY = 0, covXY = 0;
+            points.forEach(p => {
+                const dx = p.x - mean.x;
+                const dy = p.y - mean.y;
+                covXX += dx * dx; covYY += dy * dy; covXY += dx * dy;
+            });
+            covXX /= (n - 1); covYY /= (n - 1); covXY /= (n - 1);
+            const trace = covXX + covYY;
+            const det = covXX * covYY - covXY * covXY;
+            const gap = Math.sqrt(Math.max(0, trace * trace - 4 * det));
+            const lambda1 = (trace + gap) / 2;
+            const lambda2 = (trace - gap) / 2;
+            const getEigenvector = (lambda) => {
+                if (Math.abs(covXY) > 1e-9) {
+                    const x = covXY, y = lambda - covXX;
+                    const mag = Math.sqrt(x*x + y*y);
+                    return { x: x/mag, y: y/mag };
+                } else {
+                    return covXX >= covYY
+                        ? (lambda === lambda1 ? { x: 1, y: 0 } : { x: 0, y: 1 })
+                        : (lambda === lambda1 ? { x: 0, y: 1 } : { x: 1, y: 0 });
+                }
+            };
+            const pc1 = getEigenvector(lambda1);
+            const pc2 = getEigenvector(lambda2);
+            const v1 = (lambda1 + lambda2 === 0) ? 50 : (lambda1 / (lambda1 + lambda2)) * 100;
+            const v2 = (lambda1 + lambda2 === 0) ? 50 : (lambda2 / (lambda1 + lambda2)) * 100;
+            const projections = points.map(p => {
+                const dot = (p.x - mean.x) * pc1.x + (p.y - mean.y) * pc1.y;
+                return { x: mean.x + pc1.x * dot, y: mean.y + pc1.y * dot };
+            });
+            return { mean, pc1, pc2, variance1: v1, variance2: v2, projections };
+        };
+        const generateSamplePoints = (pattern) => {
+            const pts = [];
+            const cx = 250, cy = 200;
+            for (let i = 0; i < 8; i++) {
+                let x, y;
+                if (pattern === 'diagonal') { x = cx + (i-4)*40 + (Math.random()-0.5)*20; y = cy + (i-4)*40 + (Math.random()-0.5)*20; }
+                else if (pattern === 'cluster') { x = cx + (Math.random()-0.5)*100; y = cy + (Math.random()-0.5)*100; }
+                else { x = Math.random()*400+50; y = Math.random()*300+50; }
+                pts.push({ x, y, id: `p_${Date.now()}_${i}` });
+            }
+            return pts;
+        };
+        /** --- Sub-Components --- */
+        const Button = ({ children, className = '', variant = 'default', size = 'default', ...props }) => {
+            const variants = {
+                default: "bg-primary text-primary-foreground hover:opacity-90 shadow-soft",
+                outline: "border border-input bg-background hover:bg-slate-50",
+                ghost: "hover:bg-slate-100",
+                glass: "glass-btn",
+                secondary: "bg-secondary text-secondary-foreground hover:opacity-90 shadow-soft",
+                pc2: "bg-[hsl(var(--pc2-color))] text-white shadow-soft",
+            };
+            const sizes = { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", icon: "h-10 w-10" };
+            const vClass = variants[variant] || variants.default;
+            const sClass = sizes[size] || sizes.default;
+            return <button className={`inline-flex items-center justify-center rounded-xl text-sm font-medium transition-all focus:outline-none active:scale-95 disabled:opacity-50 ${vClass} ${sClass} ${className}`} {...props}>{children}</button>;
+        };
+        const ExplanationPanel = () => {
+            const [expanded, setExpanded] = useState(0);
+            const steps = [
+                { title: "What is PCA?", emoji: "🎯", content: "PCA finds the directions where your data varies the most. Think of it like finding the 'spine' of your data cloud!" },
+                { title: "Step 1: Find the Center", emoji: "⭕", content: "First, we find the average position of all points. This is shown as the red hollow circle. Everything rotates around this center." },
+                { title: "Step 2: Find PC1", emoji: "📏", content: "The teal arrow (PC1) points in the direction of most spread. Points would be as far apart as possible!" },
+                { title: "Step 3: Find PC2", emoji: "↔️", content: "The purple arrow (PC2) is always perpendicular to PC1. It captures the remaining variation." },
+                { title: "Projections", emoji: "📐", content: "The dotted lines show how each point 'projects' onto PC1. This is how PCA compresses 2D data into 1D!" },
+            ];
+            return (
+                <div className="space-y-2">
+                    {steps.map((s, i) => (
+                        <div key={i} className="border border-border bg-card rounded-xl overflow-hidden shadow-soft transition-all duration-300">
+                            <button className="w-full flex items-center justify-between p-3 transition-colors hover:bg-muted/50" onClick={() => setExpanded(expanded === i ? -1 : i)}>
+                                <span className="text-sm font-medium flex items-center gap-2"><span>{s.emoji}</span> {s.title}</span>
+                                {expanded === i ? <Icons.ChevronUp /> : <Icons.ChevronDown />}
+                            </button>
+                            {expanded === i && <p className="px-3 pb-3 text-xs text-muted-foreground leading-relaxed pl-9 animate-fade-in">{s.content}</p>}
+                        </div>
+                    ))}
+                </div>
+            );
+        };
+        const RealWorldExamples = () => (
+            <div className="bg-card rounded-xl p-4 border border-border shadow-soft space-y-3">
+                <h3 className="text-sm font-semibold flex items-center gap-2">🌍 Real-World Uses of PCA</h3>
+                {[
+                    { Icon: Icons.Camera, title: "Face Recognition", desc: "Compress pixels into key features" },
+                    { Icon: Icons.Chart, title: "Stock Analysis", desc: "Find patterns in market movements" },
+                    { Icon: Icons.Dna, title: "Genetics", desc: "Visualize population spread" },
+                    { Icon: Icons.Music, title: "Recommendation", desc: "Group songs by audio vibes" }
+                ].map((e, i) => (
+                    <div key={i} className="flex gap-3 items-center group cursor-default">
+                        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:bg-primary/20 transition-colors">
+                            <e.Icon className="text-primary" />
+                        </div>
+                        <div>
+                            <p className="text-xs font-semibold">{e.title}</p>
+                            <p className="text-[10px] text-muted-foreground leading-tight">{e.desc}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+        const PCACanvas = ({ points, onAddPoint, onMovePoint, showProjections, showPC2, showLabels }) => {
+            const canvasRef = useRef(null);
+            const [dragging, setDragging] = useState(null);
+            const [hovered, setHovered] = useState(null);
+            const pca = useMemo(() => calculatePCA(points), [points]);
+            const draw = useCallback(() => {
+                const canvas = canvasRef.current; if (!canvas) return;
+                const ctx = canvas.getContext('2d');
+                const { width, height } = canvas;
+                ctx.fillStyle = 'hsl(40, 30%, 98%)'; ctx.fillRect(0, 0, width, height);
+                ctx.strokeStyle = 'hsl(220, 20%, 90%)'; ctx.lineWidth = 1;
+                for (let x = 0; x <= width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); }
+                for (let y = 0; y <= height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); }
+                if (pca && points.length >= 2) {
+                    const scale = 150;
+                    if (showProjections) {
+                        ctx.strokeStyle = 'rgba(12, 80, 60, 0.2)'; ctx.setLineDash([5, 5]);
+                        points.forEach((p, i) => {
+                            const proj = pca.projections[i];
+                            ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(proj.x, proj.y); ctx.stroke();
+                        });
+                        ctx.setLineDash([]); ctx.fillStyle = 'hsl(var(--pc1-color))';
+                        pca.projections.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); });
+                    }
+                    if (showPC2) {
+                        ctx.strokeStyle = 'hsl(var(--pc2-color))'; ctx.lineWidth = 3; ctx.beginPath();
+                        ctx.moveTo(pca.mean.x - pca.pc2.x * scale, pca.mean.y - pca.pc2.y * scale);
+                        ctx.lineTo(pca.mean.x + pca.pc2.x * scale, pca.mean.y + pca.pc2.y * scale); ctx.stroke();
+                    }
+                    ctx.strokeStyle = 'hsl(var(--pc1-color))'; ctx.lineWidth = 4; ctx.beginPath();
+                    ctx.moveTo(pca.mean.x - pca.pc1.x * scale, pca.mean.y - pca.pc1.y * scale);
+                    ctx.lineTo(pca.mean.x + pca.pc1.x * scale, pca.mean.y + pca.pc1.y * scale); ctx.stroke();
+                    // --- BOLD RED MEAN POINT ---
+                    ctx.strokeStyle = '#000000'; ctx.lineWidth = 4;
+                    ctx.beginPath(); ctx.arc(pca.mean.x, pca.mean.y, 11, 0, Math.PI * 2); ctx.stroke();
+                    ctx.fillStyle = '#ff3b30'; // Bold Red
+                    ctx.beginPath(); ctx.arc(pca.mean.x, pca.mean.y, 7, 0, Math.PI * 2); ctx.fill();
+                    if (showLabels) {
+                        ctx.fillStyle = '#ff3b30';
+                        ctx.font = 'bold 15px "Space Grotesk"';
+                        ctx.textAlign = 'left';
+                        ctx.fillText('MEAN', pca.mean.x + 18, pca.mean.y - 4);
+                        ctx.font = 'bold 10px "Space Grotesk"';
+                        ctx.fillStyle = '#000000';
+                        ctx.fillText('(center)', pca.mean.x + 18, pca.mean.y + 10);
+                    }
+                }
+                // --- BOLD DATA POINTS (3D Look) ---
+                points.forEach((p, i) => {
+                    const isH = hovered === p.id;
+                    const radius = isH ? 14 : 11; // Smaller radius
+                    const hue = (i * 137.5) % 360;
+                    // 3D Gradient
+                    const grad = ctx.createRadialGradient(
+                        p.x - radius/3, p.y - radius/3, radius/5,
+                        p.x, p.y, radius
+                    );
+                    grad.addColorStop(0, `hsl(${hue}, 100%, 80%)`);   // Highlight
+                    grad.addColorStop(0.4, `hsl(${hue}, 85%, 55%)`); // Body
+                    grad.addColorStop(1, `hsl(${hue}, 90%, 30%)`);   // Shadow
+                    ctx.shadowBlur = isH ? 8 : 4;
+                    ctx.shadowColor = 'rgba(0,0,0,0.3)';
+                    ctx.fillStyle = grad;
+                    ctx.beginPath(); ctx.arc(p.x, p.y, radius, 0, Math.PI * 2); ctx.fill();
+                    // Subtle border
+                    ctx.strokeStyle = 'rgba(255,255,255,0.6)';
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                    // Reset shadow for text
+                    ctx.shadowBlur = 0;
+                    ctx.fillStyle = 'white';
+                    ctx.font = 'bold 10px "Space Grotesk"';
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText(i + 1, p.x, p.y);
+                    if (showLabels) {
+                        ctx.textBaseline = 'alphabetic';
+                        ctx.fillStyle = `hsl(${hue}, 85%, 45%)`;
+                        ctx.font = 'bold 11px "Space Grotesk"';
+                        ctx.textAlign = 'center';
+                        ctx.fillText(`Point ${i + 1}`, p.x, p.y + (isH ? 30 : 26));
+                    }
+                });
+                if (points.length === 0) {
+                    ctx.fillStyle = 'hsl(var(--muted-foreground))';
+                    ctx.font = 'bold 16px "Space Grotesk"';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('Click/Touch to add your first data point!', width/2, height/2);
+                }
+            }, [points, pca, hovered, dragging, showProjections, showPC2, showLabels]);
+            useEffect(() => draw(), [draw]);
+            // --- Mobile Touch & Mouse Unified Handler ---
+            const getPos = (e) => {
+                const canvas = canvasRef.current;
+                const rect = canvas.getBoundingClientRect();
+                // Handle both touch and mouse events
+                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+                return {
+                    x: (clientX - rect.left) * scaleX,
+                    y: (clientY - rect.top) * scaleY
+                };
+            };
+            const handleStart = (e) => {
+                e.preventDefault(); // Prevent scrolling on touch
+                const { x, y } = getPos(e);
+                const target = points.find(p => Math.sqrt((p.x - x)**2 + (p.y - y)**2) < 25);
+                if (target) setDragging(target.id);
+                else onAddPoint({ x, y, id: `p_${Date.now()}` });
+            };
+            const handleMove = (e) => {
+                e.preventDefault();
+                const { x, y } = getPos(e);
+                if (dragging) {
+                    onMovePoint(dragging, x, y);
+                } else {
+                    // Only hover effects for mouse, not touch (usually)
+                    if (!e.touches) {
+                        setHovered(points.find(p => Math.sqrt((p.x - x)**2 + (p.y - y)**2) < 25)?.id || null);
+                    }
+                }
+            };
+            const handleEnd = (e) => {
+                // For touchEnd, we don't need to preventDefault usually, but it's good practice for games
+                if(e.cancelable) e.preventDefault();
+                setDragging(null);
+            };
+            return (
+                <canvas
+                    ref={canvasRef} width={500} height={400}
+                    className="w-full h-auto bg-white rounded-xl border-2 border-border cursor-crosshair shadow-soft"
+                    // Mouse Events
+                    onMouseDown={handleStart}
+                    onMouseMove={handleMove}
+                    onMouseUp={handleEnd}
+                    onMouseLeave={() => { setDragging(null); setHovered(null); }}
+                    // Touch Events (Mobile)
+                    onTouchStart={handleStart}
+                    onTouchMove={handleMove}
+                    onTouchEnd={handleEnd}
+                    onTouchCancel={handleEnd}
+                />
+            );
+        };
+        const ControlPanel = ({ onClear, onGenerate, showProjections, onToggleProjections, showPC2, onTogglePC2, showLabels, onToggleLabels, count }) => (
+            <div className="bg-card rounded-xl p-4 border border-border shadow-soft space-y-4">
+                <h3 className="text-sm font-semibold">Toggle Features</h3>
+                <div className="grid grid-cols-1 gap-2">
+                    <Button variant={showProjections ? "default" : "glass"} size="sm" onClick={onToggleProjections} className={`justify-start gap-2 ${showProjections ? 'glass-btn-active' : ''}`}>
+                        {showProjections ? <Icons.EyeOff /> : <Icons.Eye />} Projections
+                    </Button>
+                    <Button variant={showPC2 ? "pc2" : "glass"} size="sm" onClick={onTogglePC2} className={`justify-start gap-2 ${showPC2 ? 'glass-btn-active' : ''}`}>
+                        {showPC2 ? <Icons.EyeOff /> : <Icons.Eye />} PC2 Arrow
+                    </Button>
+                    <Button variant={showLabels ? "secondary" : "glass"} size="sm" onClick={onToggleLabels} className={`justify-start gap-2 ${showLabels ? 'glass-btn-active' : ''}`}>
+                        {showLabels ? <Icons.Tags /> : <Icons.Tag />} Labels
+                    </Button>
+                </div>
+                <div className="pt-2 border-t border-border">
+                    <h4 className="text-xs font-semibold mb-2">Try Patterns</h4>
+                    <div className="grid grid-cols-3 gap-2">
+                        <Button variant="outline" size="sm" onClick={() => onGenerate('diagonal')}>Linear</Button>
+                        <Button variant="outline" size="sm" onClick={() => onGenerate('cluster')}>Cluster</Button>
+                        <Button variant="outline" size="sm" onClick={() => onGenerate('spread')}>Random</Button>
+                    </div>
+                </div>
+                <div className="flex items-center justify-between pt-2 border-t border-border">
+                    <span className="text-xs text-muted-foreground font-medium">{count} points added</span>
+                    <Button variant="ghost" size="sm" onClick={onClear} className="text-destructive h-auto p-1 px-2"><Icons.Trash /> Clear All</Button>
+                </div>
+            </div>
+        );
+        const App = () => {
+            const [points, setPoints] = useState([]);
+            const [showProjections, setShowProjections] = useState(false);
+            const [showPC2, setShowPC2] = useState(false);
+            const [showLabels, setShowLabels] = useState(true);
+            const [variance, setVariance] = useState({ v1: 50, v2: 50 });
+            useEffect(() => {
+                const res = calculatePCA(points);
+                setVariance(res ? { v1: res.variance1, v2: res.variance2 } : { v1: 50, v2: 50 });
+            }, [points]);
+            // Styles defined here to avoid Jinja2 conflict with double curly braces
+            const pc1BarStyle = { width: `${variance.v1}%` };
+            const pc2BarStyle = { width: `${variance.v2}%` };
+            return (
+                <div className="min-h-screen bg-background p-4 md:p-8 animate-fade-in">
+                    <div className="max-w-6xl mx-auto space-y-8">
+                        <header className="text-center space-y-3">
+                            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-xs font-semibold tracking-wide uppercase"><Icons.Sparkles /> Interactive Lab</div>
+                            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">PCA Playground</h1>
+                            <p className="text-muted-foreground max-w-xl mx-auto text-base">Explore Principal Component Analysis (PCA) by adding points, dragging them, and discovering hidden patterns.</p>
+                        </header>
+                        <div className="grid lg:grid-cols-[1fr_340px] gap-8">
+                            <div className="space-y-6">
+                                <PCACanvas points={points} onAddPoint={p => setPoints(prev => [...prev, p])} onMovePoint={(id, x, y) => setPoints(prev => prev.map(p => p.id === id ? {...p, x, y} : p))} showProjections={showProjections} showPC2={showPC2} showLabels={showLabels} />
+                                <div className="flex flex-wrap gap-6 justify-center bg-card p-3 rounded-xl border border-border text-[11px] font-bold text-muted-foreground shadow-sm uppercase tracking-wider">
+                                    <div className="flex items-center gap-2"><div className="w-4 h-4 rounded-full bg-point"/> Data Balls</div>
+                                    <div className="flex items-center gap-2"><div className="w-5 h-1.5 bg-pc1 rounded"/> PC1 (Main)</div>
+                                    <div className="flex items-center gap-2"><div className="w-5 h-1.5 bg-pc2 rounded"/> PC2 (Secondary)</div>
+                                    <div className="flex items-center gap-2"><div className="w-5 h-5 rounded-full border-2 border-foreground bg-[#ff3b30]"/> Mean Center</div>
+                                </div>
+                            </div>
+                            <div className="space-y-4">
+                                <ControlPanel onClear={() => { setPoints([]); setShowProjections(false); setShowPC2(false); }} onGenerate={pattern => setPoints(generateSamplePoints(pattern))} showProjections={showProjections} onToggleProjections={() => setShowProjections(prev => !prev)} showPC2={showPC2} onTogglePC2={() => setShowPC2(prev => !prev)} showLabels={showLabels} onToggleLabels={() => setShowLabels(prev => !prev)} count={points.length} />
+                                {points.length >= 2 && (
+                                    <div className="bg-card rounded-xl p-4 border border-border shadow-soft space-y-3">
+                                        <h3 className="text-sm font-semibold">Variance Explained</h3>
+                                        <div className="space-y-4">
+                                            <div>
+                                                <div className="flex justify-between text-xs font-medium mb-1 text-pc1"><span>PC1</span><span>{variance.v1.toFixed(1)}%</span></div>
+                                                <div className="h-3 bg-muted rounded-full overflow-hidden"><div className="h-full bg-pc1 transition-all duration-500" style={pc1BarStyle} /></div>
+                                            </div>
+                                            <div>
+                                                <div className="flex justify-between text-xs font-medium mb-1 text-pc2"><span>PC2</span><span>{variance.v2.toFixed(1)}%</span></div>
+                                                <div className="h-3 bg-muted rounded-full overflow-hidden"><div className="h-full bg-pc2 transition-all duration-500" style={pc2BarStyle} /></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                                <ExplanationPanel />
+                                <RealWorldExamples />
+                            </div>
+                        </div>
+                        {/* Centered Back Button */}
+                        <div className="mt-12 flex justify-center pb-8 relative">
+                             <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+                             <a
+                                href="/hierarchical-clustering"
+                                onClick={(e) => {
+                                    const audio = document.getElementById("clickSound");
+                                    if(audio) audio.play().catch(err => console.log(err));
+                                }}
+                                className="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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>
+                    </div>
+                </div>
+            );
+        };
+        const root = createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>

templates/xboost-tree-three.html ADDED Viewed

	@@ -0,0 +1,645 @@

+<!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>XGBoost 3D Simulator</title>
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <!-- Three.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <!-- OrbitControls -->
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        background: 'hsl(222 47% 6%)',
+                        foreground: 'hsl(210 40% 98%)',
+                        primary: 'hsl(187 100% 50%)',
+                        secondary: 'hsl(32 100% 55%)',
+                        accent: 'hsl(270 80% 60%)',
+                        success: 'hsl(142 76% 50%)',
+                        muted: 'hsl(222 30% 15%)',
+                        'muted-foreground': 'hsl(215 20% 65%)',
+                        border: 'hsl(222 30% 18%)',
+                    },
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/css">
+        body {
+            background-color: hsl(222 47% 6%);
+            color: hsl(210 40% 98%);
+            font-family: 'Outfit', sans-serif;
+            margin: 0;
+            overflow-x: hidden;
+        }
+        .gradient-hero {
+            background: linear-gradient(180deg, hsl(222 47% 8%) 0%, hsl(222 47% 4%) 100%);
+        }
+        .gradient-card {
+            background: linear-gradient(145deg, hsl(222 47% 10%) 0%, hsl(222 47% 6%) 100%);
+        }
+        .text-gradient-primary {
+            background: linear-gradient(135deg, hsl(187 100% 50%) 0%, hsl(200 100% 60%) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .glow-primary {
+            box-shadow: 0 0 30px hsla(187, 100%, 50%, 0.3);
+        }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+            touch-action: none; /* Prevents scrolling while rotating model */
+        }
+        .glass-btn {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.2s ease;
+        }
+        .glass-btn:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+        .primary-btn {
+            background: linear-gradient(135deg, hsl(187 100% 50%) 0%, hsl(200 100% 60%) 100%);
+            color: hsl(222 47% 6%);
+            font-weight: 600;
+            transition: all 0.2s ease;
+        }
+        .primary-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 20px hsla(187, 100%, 50%, 0.4);
+        }
+        input[type=range] {
+            -webkit-appearance: none;
+            width: 100%;
+            background: transparent;
+        }
+        input[type=range]:focus { outline: none; }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 6px;
+            cursor: pointer;
+            background: hsl(222 30% 18%);
+            border-radius: 3px;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            height: 18px;
+            width: 18px;
+            border-radius: 50%;
+            background: hsl(187 100% 50%);
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -6px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        }
+        .chart-path {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash 2s ease-out forwards;
+        }
+        @keyframes dash { to { stroke-dashoffset: 0; } }
+        select {
+            background: hsl(222 30% 12%);
+            border: 1px solid hsl(222 30% 20%);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        .logic-step {
+            position: relative;
+            padding-left: 2rem;
+        }
+        .logic-step::before {
+            content: '';
+            position: absolute;
+            left: 0.75rem;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: hsl(222 30% 20%);
+        }
+        .logic-step:last-child::before {
+            display: none;
+        }
+    </style>
+</head>
+<body class="gradient-hero min-h-screen">
+    <!-- Header -->
+    <!-- Changed: Added flex-col for mobile, relative positioning -->
+    <header class="border-b border-border/50 backdrop-blur-sm sticky top-0 z-50">
+        <div class="container mx-auto px-4 md:px-6 py-4 flex flex-col md:flex-row items-center justify-between gap-4 md:gap-0 relative">
+            <!-- Logo Area -->
+            <div class="flex items-center gap-4 w-full md:w-auto justify-start">
+                <div class="p-2 rounded-lg bg-primary/20 glow-primary shrink-0">
+                    <i data-lucide="trees" class="h-6 w-6 text-primary"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl md:text-2xl font-bold text-gradient-primary leading-tight">XGBoost Simulator</h1>
+                    <p class="text-xs md:text-sm text-muted-foreground hidden sm:block">Interactive 3D Visualization</p>
+                </div>
+            </div>
+            <!-- Centered Button -->
+            <!-- Changed: Relative on mobile (order-3), Absolute centered on desktop -->
+            <div class="order-3 md:order-none w-full md:w-auto md:absolute md:left-1/2 md:-translate-x-1/2 flex items-center justify-center">
+                <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+                <a href="/xgboost-regression" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 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 w-full md:w-auto">
+                    Back to Core
+                </a>
+            </div>
+            <!-- Dataset Selector -->
+            <!-- Changed: Full width on mobile -->
+            <div class="flex items-center justify-between md:justify-start gap-3 glass-btn px-4 py-2 rounded-xl w-full md:w-auto">
+                <span class="text-xs text-muted-foreground font-medium uppercase tracking-wider text-white">Dataset:</span>
+                <select id="dataset-selector" class="bg-transparent border-none outline-none text-right md:text-left">
+                    <option value="sine">Sine Wave</option>
+                    <option value="step">Step Function</option>
+                    <option value="linear">Linear Trend</option>
+                    <option value="random">Random Noise</option>
+                </select>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 md:px-6 py-4 md:py-8 space-y-6 md:space-y-8">
+        <!-- Stats Section -->
+        <div id="stats-container" class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4"></div>
+        <!-- Simulator Layout -->
+        <!-- Changed: Stacked columns on mobile -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
+            <div class="lg:col-span-2 space-y-6">
+                <!-- 3D Scene -->
+                <div class="relative aspect-[16/12] md:aspect-[16/10] rounded-xl border border-border overflow-hidden gradient-card shadow-2xl touch-none">
+                    <div id="canvas-container" class="w-full h-full"></div>
+                    <div id="labels-container" class="absolute inset-0 pointer-events-none"></div>
+                </div>
+                <!-- Dual Charts Row -->
+                <!-- Changed: Stacked on small mobile, grid on md -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Training Progress -->
+                    <div class="gradient-card border border-border rounded-xl p-4 md:p-6 shadow-lg">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center gap-2">
+                                <i data-lucide="line-chart" class="h-5 w-5 text-success"></i>
+                                <h3 class="text-lg font-semibold text-foreground">Loss Decay</h3>
+                            </div>
+                        </div>
+                        <div class="h-28 w-full relative">
+                            <svg id="progress-chart" viewBox="0 0 400 100" class="w-full h-full overflow-visible">
+                                <path id="loss-path" d="" fill="none" stroke="hsl(187 100% 50%)" stroke-width="2" class="chart-path" />
+                                <path id="loss-area" d="" fill="url(#chart-gradient)" opacity="0.1" />
+                                <g id="chart-dots"></g>
+                                <defs>
+                                    <linearGradient id="chart-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                                        <stop offset="0%" style="stop-color:hsl(187 100% 50%);stop-opacity:1" />
+                                        <stop offset="100%" style="stop-color:hsl(187 100% 50%);stop-opacity:0" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                        </div>
+                    </div>
+                    <!-- Feature Importance -->
+                    <div class="gradient-card border border-border rounded-xl p-4 md:p-6 shadow-lg">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center gap-2">
+                                <i data-lucide="bar-chart-3" class="h-5 w-5 text-accent"></i>
+                                <h3 class="text-lg font-semibold text-foreground">Feature Importance</h3>
+                            </div>
+                        </div>
+                        <div id="importance-container" class="space-y-3 pt-2">
+                            <!-- Bars injected by JS -->
+                        </div>
+                    </div>
+                </div>
+                <!-- Decision Path Explorer -->
+                <div class="gradient-card border border-border rounded-xl p-4 md:p-6 shadow-lg">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
+                        <div class="flex items-center gap-2">
+                            <i data-lucide="route" class="h-5 w-5 text-primary"></i>
+                            <h3 class="text-lg font-semibold text-foreground">Decision Path Explorer</h3>
+                        </div>
+                        <div class="flex items-center justify-between sm:justify-end gap-2 w-full sm:w-auto bg-black/20 p-2 rounded-lg sm:bg-transparent sm:p-0">
+                            <span class="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">Tracking Point:</span>
+                            <select id="point-selector" class="text-[10px] py-1 max-w-[120px]">
+                                <!-- Options injected by JS -->
+                            </select>
+                        </div>
+                    </div>
+                    <div id="decision-path-container" class="space-y-4">
+                        <!-- Iteration steps injected here -->
+                    </div>
+                </div>
+            </div>
+            <!-- Side Panels -->
+            <div class="space-y-6">
+                <!-- Configuration Panel -->
+                <div class="gradient-card border border-border rounded-xl p-4 md:p-6 space-y-6 shadow-lg">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-semibold text-foreground">Configuration</h3>
+                        <span id="iteration-count" class="text-sm text-muted-foreground font-mono">Iter 0/5</span>
+                    </div>
+                    <!-- Playback Controls -->
+                    <div class="flex items-center justify-between sm:justify-center gap-2">
+                        <button id="prev-btn" class="glass-btn p-2 rounded-lg disabled:opacity-30 flex-1 sm:flex-none justify-center flex"><i data-lucide="chevron-left" class="h-5 w-5"></i></button>
+                        <button id="play-pause-btn" class="primary-btn px-4 sm:px-6 py-2 rounded-lg flex items-center gap-2 min-w-[100px] sm:min-w-[120px] justify-center flex-2">
+                            <i id="play-icon" data-lucide="play" class="h-5 w-5"></i>
+                            <span id="play-text">Play</span>
+                        </button>
+                        <button id="next-btn" class="glass-btn p-2 rounded-lg disabled:opacity-30 flex-1 sm:flex-none justify-center flex"><i data-lucide="chevron-right" class="h-5 w-5"></i></button>
+                        <button id="reset-btn" class="glass-btn p-2 rounded-lg flex-1 sm:flex-none justify-center flex"><i data-lucide="rotate-ccw" class="h-5 w-5"></i></button>
+                    </div>
+                    <div class="space-y-4 pt-4 border-t border-border/50">
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-xs text-muted-foreground"><span>Iteration</span><span id="boost-val">0</span></div>
+                            <input id="iteration-slider" type="range" min="0" max="5" value="0" step="1">
+                        </div>
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-xs text-muted-foreground"><span>Learning Rate (η)</span><span id="lr-value" class="text-primary font-mono">0.30</span></div>
+                            <input id="lr-slider" type="range" min="1" max="100" value="30">
+                        </div>
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-xs text-muted-foreground"><span>Max Tree Depth</span><span id="depth-val" class="text-secondary font-mono">2</span></div>
+                            <input id="depth-slider" type="range" min="1" max="4" value="2">
+                        </div>
+                    </div>
+                </div>
+                <!-- Explanation Panel -->
+                <div id="explanation-panel" class="gradient-card border border-border rounded-xl p-4 md:p-6 space-y-4 shadow-lg">
+                    <div class="flex items-center gap-3">
+                        <div class="p-2 rounded-lg bg-primary/20"><i data-lucide="book-open" class="h-5 w-5 text-primary"></i></div>
+                        <h3 id="exp-title" class="text-lg font-semibold text-foreground">Status</h3>
+                    </div>
+                    <p id="exp-desc" class="text-muted-foreground text-sm leading-relaxed">Starting simulation...</p>
+                    <div class="bg-muted/50 rounded-lg p-3 border border-border/50 overflow-x-auto">
+                        <code id="exp-formula" class="text-sm font-mono text-gradient-primary whitespace-nowrap"></code>
+                    </div>
+                    <div class="pt-4 mt-4 border-t border-border/50 space-y-3">
+                        <h4 class="text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                            <i data-lucide="brain-circuit" class="h-3 w-3"></i> The Objective Function
+                        </h4>
+                        <p class="text-[10px] text-muted-foreground leading-relaxed">
+                            XGBoost minimizes $L(\phi) = \sum l(y_i, \hat{y}_i) + \sum \Omega(f_k)$.
+                            It uses a 2nd order Taylor expansion for fast optimization.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // --- STATE & CONSTANTS ---
+        let currentIteration = 0, maxIterations = 5, learningRate = 0.3, maxDepth = 2, datasetType = 'sine', selectedPointIdx = 0;
+        let isPlaying = false, playInterval = null;
+        let scene, camera, renderer, controls, treeGroup, pointsGroup, initialGroup;
+        let dataPoints = [], iterationsData = [];
+        // --- SIMULATION LOGIC ---
+        function generateData(type) {
+            const points = [];
+            for (let i = 0; i < 12; i++) {
+                const x = (i / 11) * 10;
+                let actual = 0;
+                if (type === 'sine') actual = Math.sin(x * 0.6) * 2;
+                else if (type === 'step') actual = x < 5 ? -1.5 : 1.5;
+                else if (type === 'linear') actual = (x - 5) * 0.4;
+                else actual = (Math.random() - 0.5) * 4;
+                points.push({ id: i, x, actual: actual + (Math.random() * 0.2) });
+            }
+            return points;
+        }
+        function createTree(depthLimit, iteration, currentDepth = 0, x = 0, y = 0, z = 0, width = 4) {
+            const isLeaf = currentDepth >= depthLimit;
+            const threshold = Math.random() * 10;
+            const node = {
+                id: Math.random().toString(36),
+                feature: "X",
+                threshold: threshold,
+                isLeaf,
+                value: isLeaf ? (Math.random() * 1.5 - 0.75) : undefined,
+                position: [x, y, z]
+            };
+            if (!isLeaf) {
+                const nextWidth = width / 2;
+                node.left = createTree(depthLimit, iteration, currentDepth + 1, x - nextWidth, y - 1.5, z, nextWidth);
+                node.right = createTree(depthLimit, iteration, currentDepth + 1, x + nextWidth, y - 1.5, z, nextWidth);
+            }
+            return node;
+        }
+        function simulate(points, treeCount, lr, depth) {
+            const results = [];
+            let currentPreds = Array(points.length).fill(points.reduce((a,b)=>a+b.actual,0)/points.length);
+            for (let i = 1; i <= treeCount; i++) {
+                const tree = createTree(depth, i);
+                const residuals = points.map((p, idx) => p.actual - currentPreds[idx]);
+                // Track path for each point
+                const treeOutputs = points.map(p => {
+                    let curr = tree;
+                    const path = [];
+                    while(!curr.isLeaf) {
+                        const direction = p.x < curr.threshold ? "left" : "right";
+                        path.push({ node: curr, direction });
+                        curr = curr[direction];
+                    }
+                    path.push({ node: curr, direction: "leaf" });
+                    return { value: curr.value, path };
+                });
+                currentPreds = currentPreds.map((p, idx) => p + lr * treeOutputs[idx].value);
+                results.push({
+                    iteration: i,
+                    tree,
+                    predictions: [...currentPreds],
+                    residuals: points.map((p, idx) => p.actual - currentPreds[idx]),
+                    outputs: treeOutputs
+                });
+            }
+            return results;
+        }
+        // --- RENDERING ---
+        function initThree() {
+            const canvasContainer = document.getElementById('canvas-container');
+            scene = new THREE.Scene();
+            scene.fog = new THREE.Fog(0x0a0f1a, 10, 40);
+            camera = new THREE.PerspectiveCamera(50, canvasContainer.clientWidth/canvasContainer.clientHeight, 0.1, 1000);
+            camera.position.set(0, 2, 12);
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            canvasContainer.appendChild(renderer.domElement);
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+            const p1 = new THREE.PointLight(0x00d4ff, 1); p1.position.set(10,10,10); scene.add(p1);
+            const grid = new THREE.GridHelper(40, 40, 0x1e3a5f, 0x0f172a); grid.position.y = -5; scene.add(grid);
+            treeGroup = new THREE.Group(); pointsGroup = new THREE.Group(); initialGroup = new THREE.Group();
+            scene.add(treeGroup); scene.add(pointsGroup); scene.add(initialGroup);
+            window.addEventListener('resize', () => {
+                camera.aspect = canvasContainer.clientWidth/canvasContainer.clientHeight; camera.updateProjectionMatrix();
+                renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
+            });
+            const animate = () => { requestAnimationFrame(animate); controls.update(); updateLabels(); renderer.render(scene, camera); };
+            animate();
+        }
+        function drawNode(node, parentPos = null) {
+            const group = new THREE.Group(); group.position.set(...node.position);
+            const nodeColor = node.isLeaf ? 0x22c55e : 0x00d4ff;
+            if (parentPos) {
+                const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,0,0), new THREE.Vector3(parentPos[0]-node.position[0], parentPos[1]-node.position[1], parentPos[2]-node.position[2])]), new THREE.LineBasicMaterial({ color: 0x334155, transparent: true, opacity: 0.6 }));
+                group.add(line);
+            }
+            const mesh = new THREE.Mesh(new THREE.SphereGeometry(node.isLeaf?0.25:0.35, 32, 32), new THREE.MeshStandardMaterial({ color: nodeColor, emissive: nodeColor, emissiveIntensity: 0.4 }));
+            mesh.userData = { label: node.isLeaf ? node.value.toFixed(2) : `X < ${node.threshold.toFixed(1)}`, isNode: true };
+            group.add(mesh); treeGroup.add(group);
+            if (node.left) drawNode(node.left, node.position);
+            if (node.right) drawNode(node.right, node.position);
+        }
+        function drawPoints(data) {
+            pointsGroup.clear();
+            const startX = -((data.predictions.length-1) * 0.8) / 2;
+            data.predictions.forEach((pred, i) => {
+                const g = new THREE.Group(); g.position.set(startX + i * 0.8, -4, 0);
+                const barH = Math.max(0.1, Math.abs(pred)*1.5);
+                const bar = new THREE.Mesh(new THREE.BoxGeometry(0.3, barH, 0.3), new THREE.MeshStandardMaterial({ color: i === selectedPointIdx ? 0xffff00 : 0x00d4ff, emissive: i === selectedPointIdx ? 0xffff00 : 0x000000, emissiveIntensity: 0.5 }));
+                bar.position.y = barH/2; g.add(bar);
+                const res = new THREE.Mesh(new THREE.SphereGeometry(0.15), new THREE.MeshStandardMaterial({ color: data.residuals[i]>0?0x22c55e:0xef4444 }));
+                res.position.y = -0.5; g.add(res); pointsGroup.add(g);
+            });
+        }
+        function updateLabels() {
+            const labelsContainer = document.getElementById('labels-container');
+            if (!labelsContainer) return;
+            labelsContainer.innerHTML = '';
+            if (currentIteration === 0) {
+                createLabel("Base Prediction: Mean(y)", new THREE.Vector3(0,2,0), "text-white font-semibold text-xs");
+            } else {
+                treeGroup.children.forEach(g => {
+                    const m = g.children.find(c=>c.userData.isNode);
+                    if (m) {
+                        const v = new THREE.Vector3(); m.getWorldPosition(v);
+                        createLabel(m.userData.label, v.add(new THREE.Vector3(0,0.6,0)), "text-[9px] text-muted-foreground bg-background/80 px-1 rounded shadow-sm");
+                    }
+                });
+            }
+        }
+        function createLabel(txt, pos, cls) {
+            const v = pos.project(camera); if (v.z > 1) return;
+            const x = (v.x*0.5+0.5)*renderer.domElement.clientWidth, y = (v.y*-0.5+0.5)*renderer.domElement.clientHeight;
+            const d = document.createElement('div'); d.className = `absolute transform -translate-x-1/2 pointer-events-none ${cls}`;
+            d.style.left = `${x}px`; d.style.top = `${y}px`; d.textContent = txt;
+            const labelsContainer = document.getElementById('labels-container');
+            if (labelsContainer) labelsContainer.appendChild(d);
+        }
+        // --- UI UPDATES ---
+        function refresh() {
+            dataPoints = generateData(datasetType);
+            iterationsData = simulate(dataPoints, maxIterations, learningRate, maxDepth);
+            // Re-populate point selector
+            const sel = document.getElementById('point-selector');
+            sel.innerHTML = '';
+            dataPoints.forEach((p, i) => {
+                const opt = document.createElement('option');
+                opt.value = i;
+                opt.textContent = `Point #${i} (X: ${p.x.toFixed(1)})`;
+                sel.appendChild(opt);
+            });
+            sel.value = selectedPointIdx;
+            render();
+        }
+        function render() {
+            document.getElementById('iteration-count').textContent = `Iter ${currentIteration}/${maxIterations}`;
+            document.getElementById('boost-val').textContent = currentIteration;
+            document.getElementById('depth-val').textContent = maxDepth;
+            document.getElementById('iteration-slider').value = currentIteration;
+            const baseMse = 1.0;
+            const currentMse = currentIteration === 0 ? baseMse : (iterationsData[currentIteration-1].residuals.reduce((a,b)=>a+b*b,0)/dataPoints.length);
+            updateStats(currentMse);
+            updateCharts(currentMse);
+            updateDecisionPath();
+            treeGroup.clear(); pointsGroup.clear(); initialGroup.clear();
+            if (currentIteration === 0) {
+                const g = new THREE.SphereGeometry(1,32,32);
+                initialGroup.add(new THREE.Mesh(g, new THREE.MeshStandardMaterial({color:0x00d4ff, transparent:true, opacity:0.8})));
+                document.getElementById('exp-title').textContent = "Initialization";
+                document.getElementById('exp-desc').textContent = "Model starts with the global mean. Initial residuals are high.";
+                document.getElementById('exp-formula').textContent = "F₀(x) = average(targets)";
+            } else {
+                const d = iterationsData[currentIteration-1];
+                drawNode(d.tree); drawPoints(d);
+                document.getElementById('exp-title').textContent = `Tree ${currentIteration}`;
+                document.getElementById('exp-desc').textContent = `Building weak learner ${currentIteration} to minimize residuals using the learning rate.`;
+                document.getElementById('exp-formula').textContent = `Fₘ = Fₘ₋₁ + η · Treeₘ(x)`;
+            }
+        }
+        function updateStats(mse) {
+            const container = document.getElementById('stats-container'); container.innerHTML = '';
+            const stats = [
+                { l: "MSE Loss", v: mse.toFixed(4), i: "target", c: "text-secondary" },
+                { l: "Complexity", v: currentIteration*maxDepth, i: "layers", c: "text-primary" },
+                { l: "Learning Rate", v: learningRate.toFixed(2), i: "zap", c: "text-accent" },
+                { l: "Progress", v: ((currentIteration/maxIterations)*100).toFixed(0)+"%", i: "trending-down", c: "text-success" }
+            ];
+            stats.forEach(s => {
+                const d = document.createElement('div'); d.className="gradient-card border border-border rounded-xl p-4";
+                d.innerHTML = `<div class='flex gap-2 mb-1'><i data-lucide='${s.i}' class='h-4 w-4 ${s.c}'></i><span class='text-xs text-muted-foreground'>${s.l}</span></div><div class='text-xl font-mono font-bold ${s.c}'>${s.v}</div>`;
+                container.appendChild(d);
+            });
+            lucide.createIcons();
+        }
+        function updateCharts(mse) {
+            const path = document.getElementById('loss-path'), area = document.getElementById('loss-area'), dots = document.getElementById('chart-dots');
+            const pts = [{x:0, y:1}];
+            iterationsData.slice(0, currentIteration).forEach((it, i) => {
+                const m = it.residuals.reduce((a,b)=>a+b*b,0)/dataPoints.length;
+                pts.push({x:(i+1)*(400/maxIterations), y:m});
+            });
+            let d = `M ${pts[0].x} ${100-pts[0].y*100}`;
+            let dotH = `<circle cx="${pts[0].x}" cy="${100-pts[0].y*100}" r="3" fill="hsl(187 100% 50%)" />`;
+            for(let i=1;i<pts.length;i++){ d += ` L ${pts[i].x} ${100-pts[i].y*100}`; dotH += `<circle cx="${pts[i].x}" cy="${100-pts[i].y*100}" r="3" fill="hsl(187 100% 50%)" />`; }
+            path.setAttribute('d', d); area.setAttribute('d', `${d} L ${pts[pts.length-1].x} 100 L 0 100 Z`); dots.innerHTML = dotH;
+            const impC = document.getElementById('importance-container'); impC.innerHTML = '';
+            const feats = [ {n: "Feature X", v: Math.min(100, currentIteration*18 + 5)}, {n: "Interaction", v: Math.min(100, currentIteration*8)}, {n: "Bias", v: 10} ];
+            feats.forEach(f => {
+                const row = document.createElement('div'); row.className = "space-y-1";
+                row.innerHTML = `<div class='flex justify-between text-[10px] uppercase font-bold text-muted-foreground'><span>${f.n}</span><span>${f.v}%</span></div><div class='h-1.5 w-full bg-border rounded-full overflow-hidden'><div class='h-full bg-accent transition-all duration-500' style='width:${f.v}%'></div></div>`;
+                impC.appendChild(row);
+            });
+        }
+        function updateDecisionPath() {
+            const container = document.getElementById('decision-path-container');
+            container.innerHTML = '';
+            if (currentIteration === 0) {
+                container.innerHTML = '<div class="text-center py-8 text-muted-foreground text-xs italic">Step into the boosting process to see point #0 trace through the ensemble.</div>';
+                return;
+            }
+            const p = dataPoints[selectedPointIdx];
+            iterationsData.slice(0, currentIteration).forEach((iter, idx) => {
+                const output = iter.outputs[selectedPointIdx];
+                const card = document.createElement('div');
+                card.className = "p-4 border border-border/50 rounded-lg bg-white/5 space-y-3";
+                let stepsHtml = '';
+                output.path.forEach((step, sIdx) => {
+                    const isLast = sIdx === output.path.length - 1;
+                    const nodeTxt = isLast ? `Leaf Weight: ${step.node.value.toFixed(3)}` : `Split: X (${p.x.toFixed(1)}) < ${step.node.threshold.toFixed(1)}?`;
+                    const resTxt = isLast ? '' : `<span class="px-2 py-0.5 rounded text-[10px] font-bold ${step.direction === 'left' ? 'bg-success/20 text-success' : 'bg-secondary/20 text-secondary'}">${step.direction === 'left' ? 'YES' : 'NO'}</span>`;
+                    stepsHtml += `
+                        <div class="logic-step flex items-center justify-between text-[11px]">
+                            <div class="flex items-center gap-2">
+                                <div class="w-1.5 h-1.5 rounded-full ${isLast ? 'bg-success' : 'bg-primary'}"></div>
+                                <span class="${isLast ? 'text-white font-bold' : 'text-muted-foreground'}">${nodeTxt}</span>
+                            </div>
+                            ${resTxt}
+                        </div>
+                    `;
+                });
+                card.innerHTML = `
+                    <div class="flex items-center justify-between">
+                        <span class="text-[10px] font-bold text-primary uppercase">Iteration ${iter.iteration}</span>
+                        <span class="text-[10px] font-mono text-muted-foreground">contrib: η × ${output.value.toFixed(2)}</span>
+                    </div>
+                    <div class="space-y-2 relative">${stepsHtml}</div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        window.onload = () => {
+            initThree(); refresh();
+            document.getElementById('dataset-selector').onchange = (e) => { datasetType = e.target.value; currentIteration = 0; refresh(); };
+            document.getElementById('depth-slider').oninput = (e) => { maxDepth = parseInt(e.target.value); refresh(); };
+            document.getElementById('lr-slider').oninput = (e) => { learningRate = parseInt(e.target.value)/100; document.getElementById('lr-value').textContent = learningRate.toFixed(2); refresh(); };
+            document.getElementById('iteration-slider').oninput = (e) => { currentIteration = parseInt(e.target.value); render(); };
+            document.getElementById('point-selector').onchange = (e) => { selectedPointIdx = parseInt(e.target.value); render(); };
+            document.getElementById('play-pause-btn').onclick = () => {
+                isPlaying = !isPlaying;
+                if(isPlaying) {
+                    document.getElementById('play-text').textContent = "Pause";
+                    document.getElementById('play-icon').setAttribute('data-lucide', 'pause');
+                    playInterval = setInterval(() => { if(currentIteration < maxIterations){ currentIteration++; render(); } else { isPlaying=false; clearInterval(playInterval); document.getElementById('play-text').textContent = "Play"; document.getElementById('play-icon').setAttribute('data-lucide', 'play'); } }, 1500);
+                } else { clearInterval(playInterval); document.getElementById('play-text').textContent = "Play"; document.getElementById('play-icon').setAttribute('data-lucide', 'play'); }
+                lucide.createIcons();
+            };
+            document.getElementById('next-btn').onclick = () => { if(currentIteration < maxIterations) { currentIteration++; render(); } };
+            document.getElementById('prev-btn').onclick = () => { if(currentIteration > 0) { currentIteration--; render(); } };
+            document.getElementById('reset-btn').onclick = () => { currentIteration = 0; render(); };
+            lucide.createIcons();
+        };
+    </script>
+</body>
+</html>

templates/xbost-graph-three.html ADDED Viewed

	@@ -0,0 +1,693 @@

+<!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>XGB-CORE // Gradient Boosting Simulator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <!-- Added OrbitControls for user interaction -->
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-color: #05080a;
+            --accent-cyan: #00f3ff;
+            --accent-pink: #ff00ff;
+            --accent-purple: #7000ff;
+            --glass: rgba(10, 15, 20, 0.7);
+        }
+        body {
+            background-color: var(--bg-color);
+            color: #e2e8f0;
+            font-family: 'Space Grotesk', sans-serif;
+            overflow: hidden; /* Main body hidden, scroll happens in panels */
+            margin: 0;
+        }
+        .glass-panel {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
+        }
+        .glow-cyan { text-shadow: 0 0 10px var(--accent-cyan); }
+        .glow-pink { text-shadow: 0 0 10px var(--accent-pink); }
+        .border-glow-cyan { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 243, 255, 0.3); }
+        input[type="range"] {
+            -webkit-appearance: none;
+            background: rgba(255, 255, 255, 0.1);
+            height: 4px;
+            border-radius: 2px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            background: var(--accent-cyan);
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 0 10px var(--accent-cyan);
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .btn-action {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-action:hover {
+            transform: translateY(-2px);
+            filter: brightness(1.2);
+        }
+        canvas { display: block; touch-action: none; }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .status-pulse { animation: pulse 2s infinite; }
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 5px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 10px; }
+    </style>
+</head>
+<body class="h-screen w-screen flex flex-col supports-[height:100dvh]:h-[100dvh]">
+    <!-- Header -->
+    <header class="h-16 shrink-0 flex items-center justify-between px-4 lg:px-8 border-b border-white/10 z-50 glass-panel relative">
+        <div class="flex items-center gap-2 lg:gap-4 z-10">
+            <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center font-bold text-black shadow-lg shadow-cyan-500/20 shrink-0">X</div>
+            <div>
+                <h1 class="text-lg lg:text-xl font-bold gradient-text tracking-tighter leading-none">XGB-CORE <span class="hidden sm:inline">//</span> <span class="text-white/80 block sm:inline text-xs sm:text-lg">REGR-01</span></h1>
+                <p class="hidden sm:block text-[10px] text-white/40 uppercase tracking-[0.2em]">Gradient Boosting Machine Visualizer</p>
+            </div>
+        </div>
+        <!-- Centered Button - Position adjusted for mobile -->
+        <div class="absolute left-1/2 -translate-x-1/2 flex items-center top-1/2 -translate-y-1/2">
+            <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
+            <a href="/xgboost-regression" onclick="playSound(); return false;" class="inline-flex items-center justify-center text-center leading-none bg-blue-600 hover:bg-blue-500 text-white font-bold py-1.5 px-4 lg:py-2 lg:px-6 rounded-xl text-xs lg:text-sm transition-all duration-150 shadow-[0_4px_0_rgb(29,78,216)] active:shadow-none active:translate-y-[4px] uppercase tracking-wider whitespace-nowrap">
+                Back to Core
+            </a>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-xs uppercase tracking-widest text-white/60">
+            <div class="flex gap-2 items-center">
+                <span class="w-2 h-2 rounded-full bg-cyan-500 status-pulse"></span>
+                <span>System Ready</span>
+            </div>
+            <div id="clock">00:00:00</div>
+        </div>
+        <!-- Mobile Menu Placeholder / Status dot for mobile -->
+        <div class="md:hidden">
+            <span class="w-2 h-2 rounded-full bg-cyan-500 status-pulse block"></span>
+        </div>
+    </header>
+    <main class="flex-1 flex flex-col lg:flex-row overflow-hidden relative">
+        <!-- Left Column: 3D Viewport -->
+        <!-- Mobile: Fixed height (45% of viewport), Desktop: Flex grow -->
+        <div class="relative w-full h-[40vh] lg:h-full lg:flex-1 order-1 shrink-0">
+            <div id="canvas-container" class="w-full h-full bg-[#030507]"></div>
+            <!-- HUD Overlays - Adjusted positioning for mobile -->
+            <div class="absolute top-2 left-2 lg:top-6 lg:left-6 pointer-events-none z-10">
+                <div class="glass-panel p-2 lg:p-4 rounded-xl border-l-4 border-l-cyan-500 min-w-[140px] lg:min-w-[200px]">
+                    <h3 class="text-white/40 text-[8px] lg:text-[10px] uppercase mb-1">Training Status</h3>
+                    <div id="iteration-display" class="text-xl lg:text-3xl font-bold font-mono">TREE: 00</div>
+                    <div id="loss-display" class="text-cyan-400 text-[10px] lg:text-xs mt-1">MSE: 0.0000</div>
+                </div>
+            </div>
+            <div class="absolute bottom-2 left-2 lg:bottom-6 lg:left-6 pointer-events-none hidden sm:block">
+                <div class="glass-panel p-2 lg:p-3 rounded-xl text-[10px] text-white/40 uppercase leading-relaxed">
+                    <p>Vector Map: <span class="text-white">Active</span></p>
+                    <p>Subsampling: <span class="text-white">1.0 (Exact)</span></p>
+                    <p>View: <span class="text-white">User Controlled</span></p>
+                </div>
+            </div>
+            <div id="coord-hud" class="absolute top-2 right-2 lg:top-6 lg:right-6 pointer-events-none glass-panel p-2 lg:p-3 rounded-xl text-right z-10">
+                <div class="text-[8px] lg:text-[10px] text-white/40 mb-1">CURSOR DATA</div>
+                <div id="coord-readout" class="font-mono text-[10px] lg:text-xs text-cyan-500">X: 0.00 | Y: 0.00 | Z: 0.00</div>
+            </div>
+        </div>
+        <!-- Right Column: Sidebar -->
+        <!-- Mobile: Scrollable remaining space, Desktop: Fixed width sidebar -->
+        <aside class="w-full lg:w-[400px] bg-[var(--bg-color)] lg:bg-transparent glass-panel border-t lg:border-t-0 lg:border-l border-white/10 p-4 lg:p-6 flex flex-col gap-4 lg:gap-6 overflow-y-auto flex-1 lg:flex-none order-2 pb-20 lg:pb-6">
+            <!-- Controls Section -->
+            <section>
+                <h2 class="text-white/40 text-[10px] font-bold uppercase tracking-widest mb-4">Hyper-Parameters</h2>
+                <div class="flex flex-col gap-5">
+                    <!-- Added Speed Controller -->
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-xs">
+                            <span class="text-white/80">Training Delay (ms)</span>
+                            <span id="speed-val" class="text-cyan-400 font-mono">100</span>
+                        </div>
+                        <input type="range" id="speed-input" min="10" max="1000" step="10" value="100" class="w-full">
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-xs">
+                            <span class="text-white/80">Learning Rate (η)</span>
+                            <span id="lr-val" class="text-cyan-400 font-mono">0.1</span>
+                        </div>
+                        <input type="range" id="lr-input" min="0.01" max="1.0" step="0.01" value="0.1" class="w-full">
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-xs">
+                            <span class="text-white/80">Max Tree Depth</span>
+                            <span id="depth-val" class="text-cyan-400 font-mono">3</span>
+                        </div>
+                        <input type="range" id="depth-input" min="1" max="6" step="1" value="3" class="w-full">
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex justify-between text-xs">
+                            <span class="text-white/80">Regularization (λ)</span>
+                            <span id="lambda-val" class="text-cyan-400 font-mono">1.0</span>
+                        </div>
+                        <input type="range" id="lambda-input" min="0" max="10" step="0.5" value="1.0" class="w-full">
+                    </div>
+                </div>
+            </section>
+            <!-- Playback -->
+            <section class="bg-white/5 rounded-xl p-4 border border-white/10">
+                <div class="grid grid-cols-2 gap-3">
+                    <button id="start-btn" class="btn-action bg-cyan-600 hover:bg-cyan-500 text-black font-bold py-2 px-4 rounded-lg flex items-center justify-center gap-2 text-sm lg:text-base">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M4.5 3.5v13l11-6.5-11-6.5z"/></svg>
+                        TRAIN
+                    </button>
+                    <button id="step-btn" class="btn-action bg-white/10 hover:bg-white/20 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center gap-2 text-sm lg:text-base">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/></svg>
+                        STEP
+                    </button>
+                    <button id="reset-btn" class="btn-action col-span-2 bg-pink-600/20 hover:bg-pink-600 text-pink-500 hover:text-white border border-pink-500/50 py-2 rounded-lg mt-1 font-bold text-sm lg:text-base">
+                        RESET KERNEL
+                    </button>
+                </div>
+            </section>
+            <!-- Scenario Selector -->
+            <section>
+                <h2 class="text-white/40 text-[10px] font-bold uppercase tracking-widest mb-4">Manifold Scenario</h2>
+                <div class="grid grid-cols-1 gap-2">
+                    <button class="scenario-btn active border-glow-cyan bg-cyan-500/10 text-cyan-400 p-3 rounded-lg text-left text-xs transition-all" data-scene="sine">
+                        <div class="font-bold">Interlocking Sine Wave</div>
+                        <div class="opacity-60">High frequency non-linearity</div>
+                    </button>
+                    <button class="scenario-btn border border-white/5 hover:border-white/20 bg-white/5 p-3 rounded-lg text-left text-xs transition-all" data-scene="saddle">
+                        <div class="font-bold">Hyperbolic Paraboloid</div>
+                        <div class="opacity-60">Saddle-point gradient challenge</div>
+                    </button>
+                    <button class="scenario-btn border border-white/5 hover:border-white/20 bg-white/5 p-3 rounded-lg text-left text-xs transition-all" data-scene="stairs">
+                        <div class="font-bold">Step Discontinuity</div>
+                        <div class="opacity-60">Sharp edges, axis-aligned splits</div>
+                    </button>
+                </div>
+            </section>
+            <!-- Real-time Stats -->
+            <section class="mt-auto pb-4 lg:pb-0">
+                <div class="grid grid-cols-2 gap-2 text-[10px] uppercase font-mono">
+                    <div class="p-2 bg-white/5 rounded border border-white/10">
+                        <div class="text-white/40">Trees Fit</div>
+                        <div id="stat-trees" class="text-white text-lg font-bold">0</div>
+                    </div>
+                    <div class="p-2 bg-white/5 rounded border border-white/10">
+                        <div class="text-white/40">Convergence</div>
+                        <div id="stat-conv" class="text-white text-lg font-bold">---</div>
+                    </div>
+                </div>
+            </section>
+        </aside>
+    </main>
+    <!-- Bottom Panel - Modified to stack on mobile, hidden details on tiny screens -->
+    <footer class="glass-panel border-t border-white/10 p-4 lg:px-8 flex flex-col lg:flex-row items-center justify-between text-xs z-50 shrink-0 gap-4 lg:gap-0">
+        <div class="flex flex-wrap justify-center lg:justify-start gap-4 lg:gap-12 w-full lg:w-auto">
+            <div class="flex flex-col items-center lg:items-start">
+                <span class="text-white/40 uppercase text-[9px] mb-1">Mechanism</span>
+                <span class="text-cyan-400">Additive Basis Expansion</span>
+            </div>
+            <div class="flex flex-col items-center lg:items-start">
+                <span class="text-white/40 uppercase text-[9px] mb-1">Loss Function</span>
+                <span class="text-purple-400">Sum of Squares (L2)</span>
+            </div>
+            <div class="flex flex-col items-center lg:items-start">
+                <span class="text-white/40 uppercase text-[9px] mb-1">Regularizer</span>
+                <span class="text-pink-400">Shrinkage + Complexity Penalties</span>
+            </div>
+        </div>
+        <div class="max-w-md text-white/50 italic text-[11px] leading-tight text-center lg:text-right hidden sm:block">
+            <strong class="text-white not-italic uppercase text-[9px]">Pro Tip:</strong>
+            Adjust **Training Delay** to slow down or speed up the recursive gradient minimization process.
+        </div>
+    </footer>
+    <!-- Victory Modal -->
+    <div id="victory-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md z-[100] hidden items-center justify-center p-6">
+        <div class="glass-panel max-w-lg w-full rounded-2xl border-2 border-cyan-500 p-8 text-center relative">
+            <button id="close-modal" class="absolute top-4 right-4 text-white/40 hover:text-white">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+            </button>
+            <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
+                <svg class="w-8 h-8 text-cyan-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5z"/></svg>
+            </div>
+            <h2 class="text-2xl lg:text-3xl font-bold mb-2 tracking-tighter italic">OPTIMIZATION COMPLETE</h2>
+            <p class="text-white/60 mb-8 text-sm lg:text-base">The XGB-CORE engine has successfully minimized residuals for the current manifold.</p>
+            <div class="grid grid-cols-3 gap-4 mb-8">
+                <div class="p-3 bg-white/5 rounded-xl border border-white/10">
+                    <div class="text-[9px] text-white/40 uppercase">Total Estimators</div>
+                    <div id="final-trees" class="text-xl font-bold text-cyan-400">50</div>
+                </div>
+                <div id="final-loss-container" class="p-3 bg-white/5 rounded-xl border border-white/10">
+                    <div class="text-[9px] text-white/40 uppercase">Global Loss</div>
+                    <div id="final-loss" class="text-xl font-bold text-pink-400">0.0021</div>
+                </div>
+                <div class="p-3 bg-white/5 rounded-xl border border-white/10">
+                    <div class="text-[9px] text-white/40 uppercase">Score</div>
+                    <div class="text-xl font-bold text-white">99.8%</div>
+                </div>
+            </div>
+            <button onclick="document.getElementById('victory-modal').style.display='none'" class="w-full bg-cyan-600 hover:bg-cyan-500 text-black font-bold py-4 rounded-xl shadow-lg shadow-cyan-500/20 transition-all">
+                ACKNOWLEDGE
+            </button>
+        </div>
+    </div>
+    <script>
+        /**
+         * XGBOOST REGRESSION CORE LOGIC
+         */
+        class DecisionTree {
+            constructor(maxDepth = 3) {
+                this.maxDepth = maxDepth;
+                this.tree = null;
+            }
+            fit(X, y) {
+                this.tree = this.buildTree(X, y, 0);
+            }
+            buildTree(X, y, depth) {
+                if (depth >= this.maxDepth || X.length <= 2) {
+                    return { leaf: true, value: y.reduce((a, b) => a + b, 0) / y.length };
+                }
+                let bestSplit = null;
+                let minMse = Infinity;
+                for (let featureIdx of [0, 1]) {
+                    const featureValues = X.map(p => p[featureIdx]);
+                    const uniqueValues = [...new Set(featureValues)].sort((a,b) => a-b);
+                    const candidates = uniqueValues.filter((_, i) => i % Math.max(1, Math.floor(uniqueValues.length / 10)) === 0);
+                    for (let threshold of candidates) {
+                        const leftIndices = X.map((p, i) => p[featureIdx] < threshold ? i : null).filter(i => i !== null);
+                        const rightIndices = X.map((p, i) => p[featureIdx] >= threshold ? i : null).filter(i => i !== null);
+                        if (leftIndices.length === 0 || rightIndices.length === 0) continue;
+                        const leftY = leftIndices.map(i => y[i]);
+                        const rightY = rightIndices.map(i => y[i]);
+                        const mse = this.calculateMSE(leftY) * leftY.length + this.calculateMSE(rightY) * rightY.length;
+                        if (mse < minMse) {
+                            minMse = mse;
+                            bestSplit = { featureIdx, threshold, leftIndices, rightIndices };
+                        }
+                    }
+                }
+                if (!bestSplit) return { leaf: true, value: y.reduce((a, b) => a + b, 0) / y.length };
+                return {
+                    leaf: false,
+                    featureIdx: bestSplit.featureIdx,
+                    threshold: bestSplit.threshold,
+                    left: this.buildTree(bestSplit.leftIndices.map(i => X[i]), bestSplit.leftIndices.map(i => y[i]), depth + 1),
+                    right: this.buildTree(bestSplit.rightIndices.map(i => X[i]), bestSplit.rightIndices.map(i => y[i]), depth + 1)
+                };
+            }
+            calculateMSE(y) {
+                if (y.length === 0) return 0;
+                const mean = y.reduce((a, b) => a + b, 0) / y.length;
+                return y.reduce((acc, val) => acc + Math.pow(val - mean, 2), 0) / y.length;
+            }
+            predictSingle(p) {
+                let node = this.tree;
+                while (!node.leaf) {
+                    if (p[node.featureIdx] < node.threshold) node = node.left;
+                    else node = node.right;
+                }
+                return node.value;
+            }
+        }
+        class XGBoost {
+            constructor() {
+                this.trees = [];
+                this.learningRate = 0.1;
+                this.maxDepth = 3;
+                this.basePrediction = 0;
+            }
+            init(y) {
+                this.trees = [];
+                this.basePrediction = y.reduce((a, b) => a + b, 0) / y.length;
+            }
+            trainStep(X, y) {
+                const currentPredictions = this.predictAll(X);
+                const residuals = y.map((val, i) => val - currentPredictions[i]);
+                const tree = new DecisionTree(this.maxDepth);
+                tree.fit(X, residuals);
+                this.trees.push(tree);
+                return this.calculateMSE(y, this.predictAll(X));
+            }
+            predict(p) {
+                let pred = this.basePrediction;
+                for (let tree of this.trees) {
+                    pred += this.learningRate * tree.predictSingle(p);
+                }
+                return pred;
+            }
+            predictAll(X) {
+                return X.map(p => this.predict(p));
+            }
+            calculateMSE(yTrue, yPred) {
+                return yTrue.reduce((acc, val, i) => acc + Math.pow(val - yPred[i], 2), 0) / yTrue.length;
+            }
+        }
+        /**
+         * THREE.JS VISUALIZATION ENGINE
+         */
+        const SCENE_CONFIG = {
+            sine: (x, z) => Math.sin(x * 2) * Math.cos(z * 2) * 0.5,
+            saddle: (x, z) => (x*x - z*z) * 0.4,
+            stairs: (x, z) => {
+                const stepX = Math.floor(x * 3) / 3;
+                const stepZ = Math.floor(z * 3) / 3;
+                return (stepX + stepZ) * 0.3;
+            }
+        };
+        let scene, camera, renderer, surface, dataPoints, pointsGroup, controls;
+        let container = document.getElementById('canvas-container');
+        let xgb = new XGBoost();
+        let trainingData = { X: [], y: [] };
+        let isTraining = false;
+        let currentScene = 'sine';
+        let trainingDelay = 100; // Delay between steps
+        function initThree() {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            container.appendChild(renderer.domElement);
+            // Added OrbitControls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            const ambientLight = new THREE.AmbientLight(0x404040, 2);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(5, 10, 7.5);
+            scene.add(directionalLight);
+            const grid = new THREE.GridHelper(4, 20, 0x1a1a1a, 0x1a1a1a);
+            grid.position.y = -0.5;
+            scene.add(grid);
+            setupData();
+            createSurface();
+            camera.position.set(3, 2.5, 3);
+            camera.lookAt(0, 0, 0);
+            animate();
+        }
+        function setupData() {
+            if (pointsGroup) scene.remove(pointsGroup);
+            pointsGroup = new THREE.Group();
+            trainingData.X = [];
+            trainingData.y = [];
+            const count = 400;
+            const geom = new THREE.BufferGeometry();
+            const pos = new Float32Array(count * 3);
+            const colors = new Float32Array(count * 3);
+            for (let i = 0; i < count; i++) {
+                const x = (Math.random() - 0.5) * 4;
+                const z = (Math.random() - 0.5) * 4;
+                const y = SCENE_CONFIG[currentScene](x, z) + (Math.random() - 0.5) * 0.1;
+                trainingData.X.push([x, z]);
+                trainingData.y.push(y);
+                pos[i * 3] = x;
+                pos[i * 3 + 1] = y;
+                pos[i * 3 + 2] = z;
+                colors[i * 3] = 1;
+                colors[i * 3 + 1] = 0.5 + y;
+                colors[i * 3 + 2] = 1;
+            }
+            geom.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+            geom.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            const mat = new THREE.PointsMaterial({ size: 0.05, vertexColors: true, transparent: true, opacity: 0.8 });
+            dataPoints = new THREE.Points(geom, mat);
+            pointsGroup.add(dataPoints);
+            scene.add(pointsGroup);
+            xgb.init(trainingData.y);
+        }
+        function createSurface() {
+            if (surface) scene.remove(surface);
+            const segments = 40;
+            const geom = new THREE.PlaneGeometry(4, 4, segments, segments);
+            geom.rotateX(-Math.PI / 2);
+            const mat = new THREE.MeshPhongMaterial({
+                color: 0x00f3ff,
+                wireframe: true,
+                transparent: true,
+                opacity: 0.3,
+                side: THREE.DoubleSide
+            });
+            surface = new THREE.Mesh(geom, mat);
+            scene.add(surface);
+            updateSurface();
+        }
+        function updateSurface() {
+            const positions = surface.geometry.attributes.position.array;
+            for (let i = 0; i < positions.length; i += 3) {
+                const x = positions[i];
+                const z = positions[i + 2];
+                positions[i + 1] = xgb.predict([x, z]);
+            }
+            surface.geometry.attributes.position.needsUpdate = true;
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update(); // Required for damping
+            renderer.render(scene, camera);
+        }
+        /**
+         * APP UI & STATE
+         */
+        const ui = {
+            speedInput: document.getElementById('speed-input'),
+            speedVal: document.getElementById('speed-val'),
+            lrInput: document.getElementById('lr-input'),
+            lrVal: document.getElementById('lr-val'),
+            depthInput: document.getElementById('depth-input'),
+            depthVal: document.getElementById('depth-val'),
+            lambdaInput: document.getElementById('lambda-input'),
+            lambdaVal: document.getElementById('lambda-val'),
+            startBtn: document.getElementById('start-btn'),
+            stepBtn: document.getElementById('step-btn'),
+            resetBtn: document.getElementById('reset-btn'),
+            iterDisplay: document.getElementById('iteration-display'),
+            lossDisplay: document.getElementById('loss-display'),
+            statTrees: document.getElementById('stat-trees'),
+            statConv: document.getElementById('stat-conv'),
+            finalTrees: document.getElementById('final-trees'),
+            finalLoss: document.getElementById('final-loss'),
+            victoryModal: document.getElementById('victory-modal'),
+            scenarioBtns: document.querySelectorAll('.scenario-btn'),
+            coordReadout: document.getElementById('coord-readout'),
+            clock: document.getElementById('clock')
+        };
+        // Speed Control logic
+        ui.speedInput.addEventListener('input', (e) => {
+            trainingDelay = parseInt(e.target.value);
+            ui.speedVal.innerText = e.target.value;
+            if (isTraining) {
+                // Restart interval with new speed
+                clearInterval(trainInterval);
+                trainInterval = setInterval(performStep, trainingDelay);
+            }
+        });
+        ui.lrInput.addEventListener('input', (e) => {
+            xgb.learningRate = parseFloat(e.target.value);
+            ui.lrVal.innerText = e.target.value;
+        });
+        ui.depthInput.addEventListener('input', (e) => {
+            xgb.maxDepth = parseInt(e.target.value);
+            ui.depthVal.innerText = e.target.value;
+        });
+        ui.lambdaInput.addEventListener('input', (e) => {
+            ui.lambdaVal.innerText = e.target.value;
+        });
+        ui.scenarioBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                ui.scenarioBtns.forEach(b => {
+                    b.classList.remove('active', 'border-glow-cyan', 'text-cyan-400');
+                    b.classList.add('border-white/5', 'bg-white/5');
+                });
+                btn.classList.add('active', 'border-glow-cyan', 'text-cyan-400');
+                btn.classList.remove('border-white/5', 'bg-white/5');
+                currentScene = btn.dataset.scene;
+                resetSimulation();
+            });
+        });
+        function performStep() {
+            if (xgb.trees.length >= 60) {
+                stopTraining();
+                showVictory();
+                return;
+            }
+            const loss = xgb.trainStep(trainingData.X, trainingData.y);
+            updateSurface();
+            ui.iterDisplay.innerText = `TREE: ${xgb.trees.length.toString().padStart(2, '0')}`;
+            ui.lossDisplay.innerText = `MSE: ${loss.toFixed(6)}`;
+            ui.statTrees.innerText = xgb.trees.length;
+            const conv = (1 / (1 + loss)).toFixed(2);
+            ui.statConv.innerText = `${(conv * 100).toFixed(0)}%`;
+            if (loss < 0.0005) {
+                stopTraining();
+                showVictory();
+            }
+        }
+        let trainInterval;
+        function startTraining() {
+            if (isTraining) {
+                stopTraining();
+            } else {
+                isTraining = true;
+                ui.startBtn.innerHTML = `<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> PAUSE`;
+                ui.startBtn.classList.replace('bg-cyan-600', 'bg-purple-600');
+                trainInterval = setInterval(performStep, trainingDelay);
+            }
+        }
+        function stopTraining() {
+            isTraining = false;
+            ui.startBtn.innerHTML = `<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M4.5 3.5v13l11-6.5-11-6.5z"/></svg> TRAIN`;
+            ui.startBtn.classList.replace('bg-purple-600', 'bg-cyan-600');
+            clearInterval(trainInterval);
+        }
+        function resetSimulation() {
+            stopTraining();
+            setupData();
+            updateSurface();
+            ui.iterDisplay.innerText = `TREE: 00`;
+            ui.lossDisplay.innerText = `MSE: 0.0000`;
+            ui.statTrees.innerText = '0';
+            ui.statConv.innerText = '---';
+        }
+        function showVictory() {
+            const lastLoss = ui.lossDisplay.innerText.split(': ')[1];
+            ui.finalTrees.innerText = xgb.trees.length;
+            ui.finalLoss.innerText = lastLoss;
+            ui.victoryModal.style.display = 'flex';
+        }
+        ui.startBtn.addEventListener('click', startTraining);
+        ui.stepBtn.addEventListener('click', performStep);
+        ui.resetBtn.addEventListener('click', resetSimulation);
+        document.getElementById('close-modal').addEventListener('click', () => {
+            ui.victoryModal.style.display = 'none';
+        });
+        window.addEventListener('resize', () => {
+            camera.aspect = container.clientWidth / container.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(container.clientWidth, container.clientHeight);
+        });
+        container.addEventListener('mousemove', (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = ((e.clientX - rect.left) / container.clientWidth) * 4 - 2;
+            const z = ((e.clientY - rect.top) / container.clientHeight) * 4 - 2;
+            const y = xgb.predict([x, z]);
+            ui.coordReadout.innerText = `X: ${x.toFixed(2)} | Y: ${y.toFixed(2)} | Z: ${z.toFixed(2)}`;
+        });
+        setInterval(() => {
+            const now = new Date();
+            ui.clock.innerText = now.toTimeString().split(' ')[0];
+        }, 1000);
+        window.onload = initThree;
+    </script>
+</body>
+</html>