+
+
+ {/* ========== Top Navigation ========== */}
+
+
+ {/* ========== HERO ========== */}
+
+
+
+
+ XEngineers
+
+
+ CamTalk
+
+ 给 AI 装上眼睛和耳朵
+
+
+ 多模态实时 AI 视觉对话助手。打开浏览器，对着摄像头说话，AI 实时理解画面和语音，以文字和语音同步回答你。
+
+
+
+
+
+
+
+ {/* Device Mockup - Double Bezel */}
+
+
+
+
+
+
这道数学题怎么做？
+
+ 这是一道二次方程求解题。观察方程 x² - 5x + 6 = 0，可以使用因式分解法……
+
+
+
+
+
能用求根公式再算一遍吗？
+
+
+
+
+
+
+
+
+
+ {/* ========== PROBLEM ========== */}
+
+
+
+
痛点分析
+
AI 能说会道，却看不到你眼前的世界
+
传统 AI 助手存在三大断层，割裂了自然交流的直觉
+
+
+
+
+
视觉断层
+
用户必须先拍照、保存、上传、再打字描述上下文，AI 才能「看到」画面。四步操作，割裂了自然交流的直觉。
+
+
+
+
交互断层
+
面对外语菜单、数学公式、电路图等复杂内容，打字描述极其低效。用户脑中的问题转不成文字，AI 也就无法作答。
+
+
+
+
成本断层
+
实时视频流 + 大模型推理的组合让 API 成本居高不下。传统方案月成本高达 $5,000，无法面向普通用户商业化。
+
+
+
+
+ {/* ========== SOLUTION ========== */}
+
+
+
+
看 + 听 + 说 = 真正理解你的 AI
+
CamTalk 用一个对话界面闭合所有断层
+
+
+
+ {[
+ { icon: "📷", label: "摄像头采集" },
+ { icon: "🧠", label: "边缘预处理" },
+ { icon: "🔌", label: "WebSocket" },
+ { icon: "⚡", label: "Eino 编排" },
+ { icon: "👁️", label: "视觉理解" },
+ { icon: "💬", label: "流式回复" },
+ { icon: "🔊", label: "语音输出" },
+ ].map((step, i, arr) => (
+
+
+
{step.icon}
+
{step.label}
+
+ {i < arr.length - 1 &&
→
}
+
+ ))}
+
+
+
+
+ {/* ========== FEATURES ========== */}
+
+
+
+
核心亮点
+
五大技术创新
+
从端到端架构到成本控制，每一层都经过精心设计
+
+
+ {[
+ {
+ num: "01", icon: "⚡",
+ title: "流式并行推送",
+ desc: "LLM 文本流与 TTS 音频流并行输出。用户先看到文字，紧接着听到语音，感知延迟低于 0.5 秒，接近真人对话节奏。",
+ },
+ {
+ num: "02", icon: "🧠",
+ title: "声明式 AI 编排",
+ desc: "基于 CloudWeGo Eino Graph 的 7 节点 DAG 流水线（STT → History → ChatModel → Splitter → TTS），类型安全、可扩展、易测试。",
+ },
+ {
+ num: "03", icon: "💰",
+ title: "端云协同降本",
+ desc: "浏览器端 VAD 语音检测 + 关键帧像素比较 + 混合采样策略，节省 70% 带宽，月成本从 $5,000 降至 $300，降幅 90%。",
+ },
+ {
+ num: "04", icon: "🎯",
+ title: "多场景智能模式",
+ desc: "5 种 AI 角色（自由对话 / 模拟面试 / 英语老师 / 辩论对手 / 同声翻译）× 3 种视觉模式 × 观察模式，灵活覆盖学习与工作。",
+ },
+ {
+ num: "05", icon: "🏗️",
+ title: "生产级工程架构",
+ desc: "三级存储自动降级（Memory → Redis → PostgreSQL）、JWT 双 token 认证、Docker Compose 一键部署、完善的错误处理与降级策略。",
+ },
+ ].map((f) => (
+
+
{f.num}
+
+ {f.icon}
+
+
{f.title}
+
{f.desc}
+
+ ))}
+
+
+
+ {/* ========== USERS ========== */}
+
+
+
+
为每一类学习者而设计
+
无论你是在学英语、准备面试，还是想让 AI 帮你看看眼前的世界
+
+
+ {[
+ { avatar: "🧑🎓", title: "语言学习者", desc: "对着课本或实物，与 AI 英语外教用英语自由对话，实时纠正语法和发音" },
+ { avatar: "💼", title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
+ { avatar: "🌍", title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
+ { avatar: "👁️", title: "视障人士", desc: "AI 实时描述摄像头画面中的环境、障碍物和文字，提供无障碍信息辅助" },
+ { avatar: "🔬", title: "学生 / 教师", desc: "对着题目问「怎么做？」，AI 看到画面后逐步讲解，就像身边有一位私教" },
+ ].map((u) => (
+
+
{u.avatar}
+
{u.title}
+
{u.desc}
+
+ ))}
+
+
+
+ {/* ========== SCENES ========== */}
+
+
+
+
五种模式，覆盖真实需求
+
+
+ {[
+ { icon: "💬", title: "自由对话", desc: "对着摄像头随意聊天，AI 实时理解画面并语音回答", tag: "通用" },
+ { icon: "🗣️", title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
+ { icon: "🎤", title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
+ { icon: "⚔️", title: "辩论对手", desc: "AI 反驳你的观点，锻炼你的逻辑思维和表达能力", tag: "思维" },
+ { icon: "🌐", title: "同声翻译", desc: "实时识别画面中的外语文字并语音翻译，口语化输出", tag: "工具" },
+ ].map((s) => (
+
+
{s.icon}
+
+
+ {s.tag}
+
+
+ ))}
+
+
+
+ {/* ========== METRICS ========== */}
+
+
+
+
用数据说话
+
+
+ {[
+ { value: "< 2s", label: "端到端响应延迟" },
+ { value: "90%", label: "API 成本降幅" },
+ { value: "70%", label: "带宽节省率" },
+ { value: "5+3", label: "场景 × 视觉模式" },
+ ].map((m) => (
+
+
{m.value}
+
{m.label}
+
+ ))}
+
+
+
+ {/* ========== TECH STACK ========== */}
+
+
+
+
三层系统，生产级质量
+
前端轻量预处理 → Go 网关智能编排 → 云端 AI 按需调用
+
+
+ {[
+ { badge: "前端层", tags: ["React 18", "TypeScript", "Vite", "WebRTC VAD", "Canvas 关键帧检测", "WebSocket", "i18n (中/英/日)"] },
+ { badge: "网关层", tags: ["Go + Gin", "gorilla/websocket", "Eino Graph", "JWT 双 Token", "Zap 日志", "Viper 配置"] },
+ { badge: "存储层", tags: ["L1 Memory", "L2 Redis", "L3 PostgreSQL", "TieredManager 自动降级"] },
+ { badge: "AI 服务", tags: ["qwen3-vl-plus (LLM)", "MiMo ASR (STT)", "MiMo TTS", "Docker Compose"] },
+ ].map((layer) => (
+
+
+
+ {layer.tags.map((tag) => {tag})}
+
+
+ ))}
+
+
+
+ {/* ========== CTA ========== */}
+
+
+
让 AI 看见你看见的世界
+
CamTalk，不只是聊天，而是真正的多模态视觉对话。
+
+
+
+
+ {/* ========== Footer ========== */}
+
+
+ {/* ========== Login Modal ========== */}
+ {modal.open && (
+
+ )}
+