first commit

app/expo/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+import clsx from "clsx";
+
+// 展台四模块视频配置（请将对应 mp4/webm 文件放入 public/videos/ 下）
+const videos = [
+  {
+    key: "mechanics",
+    title: "力学 · 单摆高精度测量",
+    src: "/videos/mechanics.mp4",
+    desc: "CV 追踪 + AI 拟合：g 误差压至 0.43%，提取阻尼 γ 与品质因数 Q。探究傅科摆效应。"
+  },
+  {
+    key: "circuit",
+    title: "电路 · 实物 → 虚拟转换",
+    src: "/videos/circuit.mp4",
+    desc: "YOLO 识别元件与连线，自动生成可交互虚拟电路 + AI 问答辅导。"
+  },
+  {
+    key: "electromag",
+    title: "电磁 · 能量转换优化",
+    src: "/videos/electromag.mp4",
+    desc: "视觉 + 单片机测电磁转换效率 + 未来 BO/RL 迭代脉冲参数，提高加速/制动能量效率。"
+  },
+  {
+    key: "optics",
+    title: "光学 · 分光计智能辅助",
+    src: "/videos/optics.mp4",
+    desc: "十字像追踪 + 分步引导 + PID 调节。"
+  }
+];
+
+interface VideoStateRef {
+  currentTime: number;
+  wasPlaying: boolean;
+}
+
+export default function ExpoPage() {
+  const [active, setActive] = useState<string | null>(null);
+  const timeRefs = useRef<Record<string, VideoStateRef>>({});
+  const containerRefs = useRef<Record<string, HTMLVideoElement | null>>({});
+
+  // 记录时间用于在放大时继续播放（非严格同步，够展示用）
+  const handleBeforeExpand = (key: string) => {
+    const vid = containerRefs.current[key];
+    if (vid) {
+      timeRefs.current[key] = {
+        currentTime: vid.currentTime,
+        wasPlaying: !vid.paused
+      };
+    }
+    setActive(key);
+  };
+
+  const handleRestore = () => {
+    setActive(null);
+  };
+
+  // 在放大的 video 元素上恢复播放进度
+  const expandedVideoRef = useRef<HTMLVideoElement | null>(null);
+  useEffect(() => {
+    if (active && expandedVideoRef.current) {
+      const state = timeRefs.current[active];
+      if (state) {
+        try {
+          expandedVideoRef.current.currentTime = state.currentTime;
+        } catch (_) {
+          /* Safari 某些情况下可能阻止精确跳转，忽略 */
+        }
+        if (state.wasPlaying) expandedVideoRef.current.play().catch(() => {});
+      }
+    }
+  }, [active]);
+
+  // ESC 关闭
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && active) setActive(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [active]);
+
+  return (
+    <main className="relative min-h-screen w-full bg-[#05080b] text-slate-100 overflow-hidden select-none">
+
+      {/* 2x2 全屏栅格 */}
+      <div className="grid grid-cols-1 grid-rows-4 md:grid-cols-2 md:grid-rows-2 w-full h-screen">
+        {videos.map(v => (
+          <motion.div
+            key={v.key}
+            layoutId={`card-${v.key}`}
+            className={clsx(
+              "relative group overflow-hidden flex cursor-pointer bg-black",
+              active && active !== v.key && "opacity-25 scale-[0.99] transition"
+            )}
+            onClick={() => handleBeforeExpand(v.key)}
+          >
+            <video
+              ref={el => { containerRefs.current[v.key] = el; }}
+              className="w-full h-full object-contain"
+              src={v.src}
+              playsInline
+              muted
+              autoPlay
+              loop
+              preload="auto"
+            />
+            {/* 角标信息，默认半透明，悬停/触摸更亮 */}
+            <div className="absolute left-0 top-0 p-2 md:p-3 bg-black/35 backdrop-blur-sm rounded-br-xl md:rounded-br-2xl text-[10px] md:text-xs leading-snug transition group-hover:bg-black/55">
+              <p className="font-semibold text-slate-100/95 mb-0.5 md:mb-1 truncate max-w-[10rem] md:max-w-[14rem]">{v.title}</p>
+              <p className="text-[9px] md:text-[10px] text-slate-300/80 line-clamp-2 md:line-clamp-2 max-w-[12rem] md:max-w-[16rem]">{v.desc}</p>
+            </div>
+            <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition bg-black/25 flex items-center justify-center text-[11px] tracking-wide font-medium">点击放大</div>
+          </motion.div>
+        ))}
+      </div>
+
+      <AnimatePresence>
+        {active && (
+          <>
+            <motion.div
+              key="backdrop"
+              className="fixed inset-0 bg-black/70 backdrop-blur-sm z-40"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            />
+            {videos.filter(v => v.key === active).map(v => (
+              <motion.div
+                key={v.key}
+                layoutId={`card-${v.key}`}
+                className="fixed z-50 inset-0 flex flex-col overflow-hidden bg-black"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ type: "spring", stiffness: 180, damping: 22 }}
+              >
+                <div className="relative flex-1 bg-black">
+                  <video
+                    ref={expandedVideoRef}
+                    className="w-full h-full object-contain bg-black"
+                    src={v.src}
+                    playsInline
+                    muted
+                    autoPlay
+                    loop
+                    controls
+                  />
+                  <div className="absolute top-0 left-0 right-0 p-3 md:p-5 flex flex-col gap-2 bg-gradient-to-b from-black/70 to-transparent pointer-events-none">
+                    <h2 className="text-base md:text-2xl font-semibold tracking-tight drop-shadow">{v.title}</h2>
+                    <p className="text-[10px] md:text-sm text-slate-300 max-w-4xl leading-relaxed">{v.desc}</p>
+                  </div>
+                  <button
+                    onClick={handleRestore}
+                    className="absolute top-2 right-2 md:top-4 md:right-4 w-9 h-9 rounded-full bg-black/60 hover:bg-black/80 text-slate-200 flex items-center justify-center border border-white/10 backdrop-blur-sm transition"
+                    aria-label="关闭放大"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+                <div className="p-2 md:p-3 flex justify-end gap-3 items-center text-[10px] md:text-xs text-slate-400 bg-[#0e1419]/90 border-t border-white/5">
+                  <button
+                    onClick={handleRestore}
+                    className="px-3 py-1 rounded-md bg-sky-600/25 hover:bg-sky-600/40 text-sky-200 font-medium tracking-wide"
+                  >返回</button>
+                </div>
+              </motion.div>
+            ))}
+          </>
+        )}
+      </AnimatePresence>
+    </main>
+  );
+}

app/globals.css

@@ -0,0 +1,89 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0b0f17; /* 深色主背景 */
+  --background-alt: #111827; /* 次级面板背景 */
+  --foreground: #e5e7ef;
+  --muted: #94a3b8;
+  --accent: #3b82f6;
+  --accent-alt: #6366f1;
+  --radius: 14px;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+/* 强制使用暗色风格，可按需扩展主题切换 */
+
+body {
+  background: radial-gradient(circle at 35% 20%, #1e293b 0%, #0b0f17 55%) fixed;
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen;
+  text-rendering: optimizeLegibility;
+}
+
+/* Custom gradient backgrounds & animations */
+.gradient-text {
+  background: linear-gradient(90deg,var(--accent),var(--accent-alt));
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.glass {
+  background: linear-gradient(140deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
+  backdrop-filter: blur(14px) saturate(140%);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: var(--radius);
+}
+
+.panel {
+  background: linear-gradient(160deg,#141a24,#111827 65%);
+  border: 1px solid #1f2937;
+  border-radius: var(--radius);
+}
+
+@keyframes floatSlow {
+  0% { transform: translateY(0px) translateX(0px); }
+  50% { transform: translateY(-35px) translateX(10px); }
+  100% { transform: translateY(0px) translateX(0px); }
+}
+
+.float-slow { animation: floatSlow 18s ease-in-out infinite; }
+
+@keyframes pulseRing {
+  0% { transform: scale(.6); opacity: .6; }
+  70% { transform: scale(2.6); opacity: 0; }
+  100% { opacity: 0; }
+}
+.pulse-ring::before, .pulse-ring::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: radial-gradient(circle at center,rgba(255,255,255,.35),transparent 70%);
+  animation: pulseRing 6s linear infinite;
+}
+.pulse-ring::after { animation-delay: 3s; }
+
+/* Scroll snap layout for sections */
+html,body { scroll-behavior: smooth; }
+.snap-y { scroll-snap-type: y mandatory; }
+.snap-section { scroll-snap-align: start; }
+
+::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar-track { background: #111827; }
+::-webkit-scrollbar-thumb { background: linear-gradient(#374151,#1f2937); border-radius: 20px; }
+::-webkit-scrollbar-thumb:hover { background: linear-gradient(#475569,#334155); }
+
+/* 提升文字可读性 */
+h1,h2,h3,h4 { letter-spacing: 0.02em; }
+p { color: var(--muted); }
+
+/* 卡片 hover 简约高亮 */
+.card-hover { transition: border-color .25s, box-shadow .25s, transform .25s; }
+.card-hover:hover { border-color: var(--accent); box-shadow: 0 4px 28px -8px rgba(59,130,246,0.35); transform: translateY(-4px); }
+

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "AI视觉驱动智慧物理实验平台",
+  description: "“AI + CV”双引擎：Web端实时视觉采集、AI参数拟合、误差校正与智能交互的多学科物理实验创新平台",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,484 @@
+"use client";
+import dynamic from "next/dynamic";
+import { motion } from "framer-motion";
+import { Cpu, CircuitBoard, Sparkles, Atom, Waves, Camera, Brain } from "lucide-react";
+import Link from "next/link";
+import clsx from "clsx";
+
+const Scene = dynamic(() => import("@/components/Scene"), { ssr: false });
+
+// 已移除浮动花哨徽章组件，保留简洁风格
+
+const moduleLinks = [
+  { title: "力学实验模块", href: "#mechanics", icon: Waves, desc: "单摆精密测量 / 大摆角与阻尼修正 / 傅科摆进动 / 多参数智能拟合" },
+  { title: "电路实验模块", href: "#circuit", icon: CircuitBoard, desc: "YOLO 电路识别 → 拓扑重建 → 虚拟仿真 → AI 智能辅导闭环" },
+  { title: "电磁学实验模块", href: "#electromag", icon: Atom, desc: "气垫导轨 + 视觉测量 + BO/RL 迭代优化电磁能量转换效率" },
+  { title: "光学实验模块", href: "#optics", icon: Camera, desc: "分光计视觉十字像追踪 + PID/步骤引导提升调节精度与效率" },
+];
+
+export default function Home() {
+  return (
+  <main className="relative w-full h-full text-slate-100 overflow-x-hidden">
+      {/* 3D Background */}
+  <Scene />
+
+      {/* Hero Section */}
+      <section className="snap-section min-h-screen relative flex flex-col items-center justify-center px-6 pt-24 text-center">
+        <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_40%_30%,rgba(59,130,246,0.25),transparent_65%)]" />
+        <motion.h1
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+          className="text-5xl md:text-7xl font-bold leading-tight gradient-text drop-shadow-lg tracking-tight"
+        >
+          AI视觉驱动的智慧物理实验创新平台
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1, delay: 0.3 }}
+          className="mt-8 max-w-3xl mx-auto text-lg md:text-xl leading-relaxed text-slate-300"
+        >
+          “AI + CV”双引擎，重构数据采集、分析、交互与反馈全链路。摆球轨迹追踪、智能电路识别、Web端轻量化、跨平台实时推理，让物理实验进入沉浸式智能时代。
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.45 }}
+            className="mt-10 flex flex-wrap items-center justify-center gap-4"
+        >
+          <Link href="/expo" className="group relative">
+            <span className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-sky-600/80 to-cyan-500/70 px-6 py-3 text-sm font-semibold tracking-wide text-white shadow-lg shadow-sky-900/30 backdrop-blur-md transition hover:from-sky-500 hover:to-cyan-400 focus:outline-none focus:ring-2 focus:ring-sky-400/70">
+              <Sparkles className="w-4 h-4" /> 展台同步视频演示
+            </span>
+            <span className="pointer-events-none absolute -inset-px rounded-full border border-sky-300/30 group-hover:border-cyan-200/40 transition" />
+          </Link>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.6, type: "spring" }}
+          className="mt-14 flex flex-wrap justify-center gap-6"
+        >
+          {moduleLinks.map((m) => (
+            <Link key={m.title} href={m.href}>
+              <motion.div
+                whileHover={{ y: -6, boxShadow: "0 12px 40px -8px rgba(56,189,248,0.4)" }}
+                whileTap={{ scale: 0.95 }}
+                className={clsx(
+                  "relative group rounded-xl px-6 py-5 w-64 overflow-hidden cursor-pointer transition-all card-hover",
+                  "panel"
+                )}
+              >
+                <div className="relative flex items-center gap-3">
+                  <m.icon className="w-7 h-7 text-slate-200" />
+                  <h3 className="font-semibold tracking-wide text-base text-slate-100">{m.title}</h3>
+                </div>
+                <p className="relative mt-3 text-xs leading-relaxed text-slate-400 min-h-12">{m.desc}</p>
+                <div className="relative mt-4 flex items-center gap-2 text-[10px] text-slate-400">
+                  <Sparkles className="w-4 h-4 text-slate-500" /> 查看详情
+                </div>
+              </motion.div>
+            </Link>
+          ))}
+        </motion.div>
+      </section>
+
+      {/* Architecture Section */}
+  <section id="architecture" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-20 items-start">
+            <div>
+              <motion.h2
+                initial={{ opacity: 0, x: -40 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8 }}
+                className="text-3xl md:text-5xl font-bold gradient-text mb-8"
+              >
+                平台总体设计与核心技术架构
+              </motion.h2>
+              <motion.div
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.3, duration: 0.8 }}
+                className="space-y-6 text-sm leading-relaxed text-slate-400"
+              >
+                <p className="indent-4">
+                  本平台以“AI + CV”双引擎驱动：前端浏览器侧完成数据感知、实时视觉解析与轻量推理，后端/边缘协同完成大模型问答与复杂优化计算，形成数据采集—建模拟合—智能校正—反馈交互的闭环。
+                </p>
+                <div className="grid grid-cols-2 gap-5 pt-4">
+                  {[
+                    { t: "CV 感知", d: "Hough/轮廓/YOLO 追踪摆球、电路元件识别" },
+                    { t: "AI 分析", d: "非线性拟合 / 符号回归 / 误差自适应校正" },
+                    { t: "智能交互", d: "Agent 提示步骤 / 故障诊断 / 学习引导" },
+                    { t: "可视化", d: "WebGL & 交互式参数变化动态渲染" },
+                  ].map((b) => (
+                    <div key={b.t} className="relative p-4 rounded-lg panel card-hover">
+                      <h4 className="text-sm font-semibold mb-1 text-slate-200">{b.t}</h4>
+                      <p className="text-xs text-slate-500 leading-snug">{b.d}</p>
+                      <span className="absolute -top-px -left-px h-2 w-2 bg-gradient-to-br from-sky-400 to-fuchsia-500 rounded-full shadow" />
+                    </div>
+                  ))}
+                </div>
+              </motion.div>
+            </div>
+            <div className="relative">
+              <div className="relative panel rounded-2xl p-10 space-y-8 card-hover">
+                <h3 className="text-xl font-semibold flex items-center gap-3 text-slate-100"><Sparkles className="text-sky-400" />“AI + CV”双引擎协同</h3>
+                <ul className="space-y-4 text-xs leading-relaxed text-slate-400">
+                  <li>CV 模块：图像序列 → 轨迹/姿态/拓扑；YOLO + 自定义滤波器优化稳定性。</li>
+                  <li>AI 模块：特征→参数拟合→误差补偿→智能讲解；支持本地与云端混合推理。</li>
+                  <li>数据管线：WebAssembly/OpenCV.js 实时帧处理；TensorFlow.js / WebGPU 加速。</li>
+                  <li>交互体验：自然语言问答、实验步骤导航、异常检测提醒。</li>
+                  <li>部署形态：纯 Web / 微信小程序 / 边缘一体盒子可拓展。</li>
+                </ul>
+                <div className="grid grid-cols-3 gap-4 pt-2 text-center text-[10px] font-mono">
+                  {['Capture','Track','Fit','Correct','Explain','Feedback'].map(s => (
+                    <div key={s} className="p-2 rounded-md bg-[#18202b] border border-[#223042]">
+                      <span className="text-[10px] text-slate-300 font-semibold tracking-wide">{s}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Module Overview Section */}
+  <section id="modules" className="snap-section relative py-24 px-6 md:px-16">
+        <div className="max-w-7xl mx-auto">
+          <motion.h2
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-3xl md:text-5xl font-bold gradient-text mb-14 text-center"
+          >
+            四大实验模块 & 未来拓展
+          </motion.h2>
+          <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-10">
+            {moduleLinks.map((m) => (
+              <Link key={m.title} href={m.href} className="group block relative">
+                <div className="relative rounded-xl panel p-6 h-full flex flex-col overflow-hidden card-hover">
+                  <div className="flex items-center gap-3">
+                    <m.icon className="w-6 h-6 text-slate-200" />
+                    <h3 className="font-semibold text-sm tracking-wide text-slate-100">{m.title}</h3>
+                  </div>
+                  <p className="mt-3 text-[11px] leading-relaxed text-slate-500 flex-1">{m.desc}</p>
+                  <div className="mt-4 text-[10px] tracking-wider text-slate-500 flex items-center gap-2">
+                    <Sparkles className="w-4 h-4 text-slate-600" /> 内部锚点
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+          <div className="mt-20 grid md:grid-cols-3 gap-8">
+            {[
+              { icon: Waves, t: '统一“AI + CV”技术底座', d: '共享采集 → 追踪 → 拟合 → 校正 → 交互流水线，跨力学 / 电学 / 电磁 / 光学复用。' },
+              { icon: Camera, t: '纯 Web 端实时推理', d: '浏览器即可完成摄像采集 + OpenCV.js 处理 + 轻量模型推理，无需本地安装。' },
+              { icon: Brain, t: '智能实验助手', d: '误差分析、参数解释、探索性提问引导，支持未来符号回归自动方程发现。' },
+            ].map(card => (
+              <div key={card.t} className="relative rounded-xl panel p-6 overflow-hidden card-hover">
+                <card.icon className="w-8 h-8 text-slate-300 mb-4" />
+                <h4 className="font-semibold text-sm mb-2 text-slate-200">{card.t}</h4>
+                <p className="text-[11px] leading-relaxed text-slate-500">{card.d}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mechanics Module Detail */}
+      <section id="mechanics" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-6xl mx-auto space-y-10">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">力学实验模块 · 单摆 & 傅科摆</h2>
+          <div className="grid lg:grid-cols-3 gap-10">
+            <div className="lg:col-span-2 space-y-8">
+              <div className="space-y-4 text-sm text-slate-400 leading-relaxed">
+                <p>聚焦单摆高精度测量与扩展（大摆角修正 / 阻尼 / 品质因数 / 进动现象），实现从 <span className="text-slate-200">“验证型”</span> 向 <span className="text-slate-200">“探究型 + 参数发现”</span> 转化。</p>
+                <ul className="list-disc pl-5 space-y-2">
+                  <li><span className="text-slate-200">基础模型：</span> 小角近似  → 解析周期 ；</li>
+                  <li><span className="text-slate-200">大摆角修正：</span> 椭圆积分展开（振幅  时周期 +1.7%；时 +3.7%）；</li>
+                  <li><span className="text-slate-200">空气阻尼：</span> 线性阻尼模型  ，对振幅指数衰减拟合获取 γ & Q；</li>
+                  <li><span className="text-slate-200">进动效应：</span> 初步观测傅科摆水平轨迹椭圆长轴缓慢进动，实验相对理论偏差 ≈1.9%。</li>
+                </ul>
+                <p className="text-slate-300">AI 数据处理流水线：</p>
+                <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
+                  <li>CV 追踪：HSV 阈值 + 轮廓 + 质心 → 轨迹 (30–240fps)</li>
+                  <li>降噪：LSTM / 滤波平滑缺失帧</li>
+                  <li>非线性拟合：阻尼简谐 + 大摆角修正同步反演 (A, γ, ω<sub>d</sub>, φ)</li>
+                  <li>系统误差校正：大摆角 / 阻尼 / 像素标定统一补偿</li>
+                  <li>结果生成：g、γ、Q、误差拆解与置信区间</li>
+                </ol>
+              </div>
+              <div className="grid md:grid-cols-3 gap-4 text-[11px]">
+                {[
+                  { k: 'g 相对误差', v: '0.43%' },
+                  { k: 'Q 典型值', v: '≈ 900+' },
+                  { k: '进动偏差', v: '≈ 1.9%' },
+                  { k: 'FPS 需求', v: '≥ 60 fps' },
+                  { k: '拟合优度 R²', v: '≈ 1.0000' },
+                  { k: 'γ 精度', v: '1e-4 s⁻¹ 级' },
+                ].map(x => (
+                  <div key={x.k} className="panel p-3 rounded-lg flex flex-col">
+                    <span className="text-slate-500">{x.k}</span>
+                    <span className="text-slate-200 font-semibold text-sm">{x.v}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-6 text-xs md:text-sm text-slate-500">
+              <h3 className="text-slate-200 font-semibold">误差来源 & 缓解</h3>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>摆长测量主导：像素-长度标定引入 &gt;50% 误差份额 → 透视校正 + 直尺仰拍。</li>
+                <li>大摆角不修正： 可致 g 低估 ~0.5% → 自动角幅检测触发修正。</li>
+                <li>阻尼 γ 不确定度：衰减峰值回归 + 多周期平均抑制噪声。</li>
+                <li>时间戳漂移：基于浏览器高精度计时 + 丢帧插值。</li>
+              </ul>
+              <h3 className="text-slate-200 font-semibold pt-4">拓展实验</h3>
+              <p>自由落体 / 斜抛 / 弹簧振子共用“轨迹 → 拟合”管线；增加加速度二阶差分平滑与物理约束回填。</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Circuit Module Detail */}
+      <section id="circuit" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-6xl mx-auto space-y-10">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">电路实验模块 · 实物 → 虚拟 智能桥接</h2>
+          <div className="grid lg:grid-cols-3 gap-10">
+            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
+              <p>面向电路搭建“高错误率 / 低直观 / 教学成本高”痛点，平台构建 <span className="text-slate-200">拍照识别 → 拓扑生成 → 虚拟仿真 → AI 辅导 → 诊断优化</span> 闭环。</p>
+              <h3 className="text-slate-200 font-semibold">识别与转换流程</h3>
+              <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
+                <li>上传实物俯视图：对比度增强 / 去噪预处理</li>
+                <li>YOLO 模型：元件类别 + 位置检测 (置信度 &gt; 90%)</li>
+                <li>导线解析：颜色分割 + 形态学 + 拓扑推断</li>
+                <li>结构化导出：JSON(元件, 参数, 连接) → 虚拟场景重建</li>
+                <li>序列化 / 反序列化：支持再编辑 & 教学复用</li>
+              </ol>
+              <h3 className="text-slate-200 font-semibold pt-2">AI 实验助手 (Agent)</h3>
+              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
+                <li>电路原理答疑：上下文相关自然语言解析</li>
+                <li>故障排查：短路 / 断路 / 量程错误定位 (准确率 &gt;85%)</li>
+                <li>个性化引导：分层次提问 + 练习建议</li>
+                <li>策略建议：参数调优与替代元件推荐</li>
+              </ul>
+              <h3 className="text-slate-200 font-semibold pt-2">功能改造亮点</h3>
+              <p>重构虚拟电表架构：统一量程 / 内阻抽象，支持序列化与自定义显示函数，适配直流电桥 / 复杂测量场景。</p>
+            </div>
+            <div className="space-y-6 text-xs md:text-sm text-slate-500">
+              <h4 className="text-slate-200 font-semibold">价值提升</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>从“手工搭建”延伸到“智能反馈 + 虚实双轨”体验</li>
+                <li>降低误接线风险，减少元件损耗</li>
+                <li>学习路径个性化：错误模式 → 策略建议</li>
+              </ul>
+              <h4 className="text-slate-200 font-semibold pt-4">核心数据面板</h4>
+              <div className="grid grid-cols-2 gap-3 text-[11px]">
+                {[
+                  { k: '识别置信度', v: '>90%' },
+                  { k: '故障诊断', v: '>85%' },
+                  { k: '转换延迟', v: '< 3 s' },
+                  { k: '数据格式', v: 'JSON 标准化' },
+                ].map(x => (
+                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Electromagnetics Module Detail */}
+      <section id="electromag" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-6xl mx-auto space-y-10">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">电磁学实验模块 · 电磁能量转换优化</h2>
+          <div className="grid lg:grid-cols-3 gap-10">
+            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
+              <p>围绕气垫导轨低摩擦环境 + 永磁体滑块 + 线圈 + 可编程电源构建“视觉测量 + 参数智能优化”平台，实现 <span className="text-slate-200">加速 / 制动能量转换效率</span> 最大化。</p>
+              <h3 className="text-slate-200 font-semibold">视觉 & 数据采集</h3>
+              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
+                <li>荧光标签 + HSV 阈值 + 轮廓提取 → 位移序列</li>
+                <li>差分计算速度 / 加速度，功率曲线与感应电压时间同步</li>
+                <li>亚像素插值提升定位至 0.1 px</li>
+              </ul>
+              <h3 className="text-slate-200 font-semibold pt-2">优化算法闭环</h3>
+              <ol className="list-decimal pl-5 space-y-1 text-xs md:text-sm">
+                <li>参数向量：提前量 Δt，脉冲宽度 τ，强度 U/I</li>
+                <li>安全约束：V / I / dI/dt / 线圈温度限幅</li>
+                <li>奖励函数：加速 → v<sub>out</sub>/能耗；制动 → 回收能量/距离</li>
+                <li>冷启动：均匀采样 5–8 组 → 贝叶斯优化拟合响应面</li>
+                <li>迭代 30–50 次收敛至最优策略</li>
+              </ol>
+              <h3 className="text-slate-200 font-semibold pt-2">实验价值</h3>
+              <p>将传统“经验调参”转化为 <span className="text-slate-200">数据驱动小样本优化</span>；可扩展到多线圈同步控制与能量回收策略研究。</p>
+            </div>
+            <div className="space-y-6 text-xs md:text-sm text-slate-500">
+              <h4 className="text-slate-200 font-semibold">主要误差控制</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>动态模糊：提升快门 / 降低曝光，结合运动补偿滤波</li>
+                <li>时间量化：60 fps → 插值校正 16.67ms 间隔偏差</li>
+                <li>探索噪声：RL 初期随机性通过收敛监测抑制</li>
+              </ul>
+              <div className="grid grid-cols-2 gap-3 text-[11px] pt-2">
+                {[
+                  { k: '像素精度', v: '0.1 px' },
+                  { k: '收敛迭代', v: '≤ 50' },
+                  { k: '参数维度', v: '3~5 可扩展' },
+                  { k: '奖励形式', v: '可插拔' },
+                ].map(x => (
+                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Optics Module Detail */}
+      <section id="optics" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-6xl mx-auto space-y-10">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">光学实验模块 · 分光计智能辅助</h2>
+          <div className="grid lg:grid-cols-3 gap-10">
+            <div className="lg:col-span-2 space-y-6 text-sm text-slate-400">
+              <p>针对分光计“调节耗时 / 精度依赖经验 / 错误代价高”痛点，引入 <span className="text-slate-200">十字像视觉追踪 + 规则/算法混合引导 + PID 精细调节</span>。</p>
+              <h3 className="text-slate-200 font-semibold">系统能力</h3>
+              <ul className="list-disc pl-5 space-y-1 text-xs md:text-sm">
+                <li>十字像偏移检测：HSV 分割 + 卡尔曼预测补帧</li>
+                <li>分步指引：载物台 → 望远镜 → 平行光管层层收敛</li>
+                <li>方向纠错：若偏移增大 → 即时反向提示</li>
+                <li>PID 复合：P 快速靠近 + I 消除残差 + D 减少过冲</li>
+              </ul>
+              <h3 className="text-slate-200 font-semibold pt-2">效果指标</h3>
+              <div className="grid grid-cols-3 gap-4 text-[11px]">
+                {[
+                  { k: '光轴垂直度误差', v: '±1′ (改进自 ±5′)' },
+                  { k: '光谱测量误差', v: '0.8% (原 3%)' },
+                  { k: '调节练习次数', v: '3 次 (原 8 次)' },
+                ].map(x => (
+                  <div key={x.k} className="panel p-3 rounded-lg"><p className="text-slate-500">{x.k}</p><p className="text-slate-200 font-semibold">{x.v}</p></div>
+                ))}
+              </div>
+              <p>通过“实物操作 ↔ 虚拟反馈”双通道，强化对最小偏向角 / 光路可逆性等抽象概念的可视化理解。</p>
+            </div>
+            <div className="space-y-6 text-xs md:text-sm text-slate-500">
+              <h4 className="text-slate-200 font-semibold">算法要点</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>多源容错：反光 / 暂时遮挡 → 轨迹预测维持稳定</li>
+                <li>操作建议语言模板化，降低认知负荷</li>
+                <li>未来扩展：自动电机微调 + 自监督姿态估计</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Innovation Section */}
+      <section id="innovation" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-6xl mx-auto space-y-10">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">创新点与特色</h2>
+          <div className="grid md:grid-cols-2 gap-12 text-sm text-slate-400">
+            <div className="space-y-5">
+              <h3 className="text-slate-200 font-semibold">平台特色</h3>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>统一 Web 前端栈：摄像 / 视觉 / 推理 / 可视化 一体化。</li>
+                <li>模块化实验插件：力学 / 电学 / 电磁 / 光学按需加载。</li>
+                <li>AI 贯穿“采集 → 分析 → 交互 → 评估”全链路。</li>
+                <li>纯浏览器运行：降低硬件门槛 & 便于推广。</li>
+              </ul>
+              <h3 className="text-slate-200 font-semibold pt-4">技术统一性</h3>
+              <p>CV 负责“看见”；AI 负责“理解 / 校正 / 解释”；Agent 负责“交互与引导”。三者协同构成可拓展物理实验智能底座。</p>
+            </div>
+            <div className="space-y-5">
+              <h3 className="text-slate-200 font-semibold">核心创新</h3>
+              <ol className="list-decimal pl-5 space-y-2">
+                <li>YOLO + 物理约束拟合：替代人工计时与单一软件辅助。</li>
+                <li>多参数联测：单摆拓展至 (g, γ, Q) & 大摆角修正耦合。</li>
+                <li>虚实转换桥：电路识别 → 拓扑生成 → 仿真联动。</li>
+                <li>小样本优化：BO / RL 迭代探索最优电磁脉冲。</li>
+                <li>可扩展方程发现：预留符号回归 / 自监督接口。</li>
+                <li>统一序列化：虚拟元件 / 轨迹 / 训练日志规范输出。</li>
+              </ol>
+              <h3 className="text-slate-200 font-semibold pt-4">拓展潜力</h3>
+              <p>预期接入：衍射条纹分析、热膨胀追踪、声学驻波测量、流体可视化——形成多学科“AI 实验超集”。</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Outlook Section */}
+      <section id="outlook" className="snap-section relative py-28 px-6 md:px-16">
+        <div className="max-w-5xl mx-auto space-y-8 text-sm text-slate-400">
+          <h2 className="text-3xl md:text-4xl font-bold gradient-text">总结与展望</h2>
+          <p>平台验证了“AI + CV” 在物理实验 <span className="text-slate-200">高精度测量 / 多参数挖掘 / 智能交互 / 自适应优化</span> 多维价值：单摆 g 误差压至 0.43%；电路拓扑自动化；电磁脉冲小样本收敛；光学调节效率显著提升。</p>
+          <ul className="list-disc pl-5 space-y-2">
+            <li><span className="text-slate-200">技术深化：</span> 引入自监督特征提取、符号回归 (SINDy / AI Feynman) 自动方程发现。</li>
+            <li><span className="text-slate-200">场景拓展：</span> 热学、流体、复杂耦合系统多源数据融合。</li>
+            <li><span className="text-slate-200">智能调参：</span> AI 基于学习目标与实时数据主动推荐实验条件。</li>
+            <li><span className="text-slate-200">教育生态：</span> 数据共享与协作分析社区，支撑探究式教学改革。</li>
+          </ul>
+          <p>目标：建设面向未来理工教育的 <span className="text-slate-200">“全能型 AI 实验基础设施”</span>，让每一位学生以低门槛获得科研级观测与建模能力。</p>
+        </div>
+      </section>
+
+      {/* Web Deployment Section */}
+  <section id="web" className="snap-section relative py-24 px-6 md:px-16">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid lg:grid-cols-2 gap-20 items-center">
+            <div>
+              <motion.h2
+                initial={{ opacity: 0, x: -40 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8 }}
+                className="text-3xl md:text-5xl font-bold gradient-text mb-8"
+              >
+                Web 端轻量化与跨平台
+              </motion.h2>
+              <ul className="space-y-4 text-sm text-slate-300/90 leading-relaxed">
+                <li>跨平台：浏览器即实验室，覆盖手机 / PC / 平板 / 小程序。</li>
+                <li>本地推理：TensorFlow.js / WebGPU 使 YOLO / Transformer 部分模型可端侧运行，降低延迟。</li>
+                <li>实时 CV：getUserMedia + OpenCV.js 在纯前端实现图像滤波、边缘检测、轮廓拟合与运动轨迹重建。</li>
+                <li>混合架构：轻量模型前端运行，大模型问答 & 复杂优化通过 API 协同。</li>
+                <li>开放拓展：支持未来热学 / 声学 / 流体等模块的即插式算法集成。</li>
+              </ul>
+            </div>
+            <div className="relative">
+              <div className="relative panel p-10 rounded-2xl card-hover">
+                <h3 className="font-semibold mb-6 flex items-center gap-2 text-slate-100"><Cpu className="text-sky-400" /> 端侧计算栈</h3>
+                <div className="grid grid-cols-2 gap-4 text-[11px] font-mono">
+                  {[
+                    'WebGL','WebGPU','WASM','OpenCV.js','TensorFlow.js','MediaPipe','YOLOv8-tiny','Edge Agent'
+                  ].map(s => (
+                    <div key={s} className="p-2 rounded-md bg-[#18202b] border border-[#223042] text-center text-slate-300 tracking-wide">
+                      {s}
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-8 relative">
+                  <div className="relative h-40 w-40 mx-auto rounded-full flex items-center justify-center bg-[#18202b] border border-[#223042]">
+                    <div className="text-center text-[10px] leading-relaxed text-slate-400">
+                      <span className="text-slate-200 font-semibold">Edge Inference Core</span><br />
+                      Capture → Track → Fit → Insight
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative py-14 text-center text-[11px] text-slate-500">
+        <div className="max-w-5xl mx-auto px-6">
+          <p>© {new Date().getFullYear()} AI 视觉驱动智慧物理实验平台 · 展示页 · 外链为占位符</p>
+        </div>
+      </footer>
+    </main>
+  );
+}