// ============================================================ // chrome.jsx — Sidebar, Top action bar, Composer dock, Settings modal // ============================================================ const { useState, useRef, useEffect, useCallback } = React; // ---------- icon helpers ---------- const Ico = { Spark: (p) => , Bot: (p) => , Lamp: (p) => , Plus: (p) => , Clock: (p) => , Caret: (p) => , ArrowRight: (p) => , ArrowUp: (p) => , Copy: (p) => , Check: (p) => , X: (p) => , Gear: (p) => , Info: (p) => , Image: (p) => , Grid: (p) => , Layers:(p) => , Chat: (p) => , Cube: (p) => , Frame: (p) => , Cart: (p) => , Bolt: (p) => , Wallet:(p) => , Target:(p) => , Wave: (p) => , Stack: (p) => , Refresh:(p) => , Edit: (p) => , Brain: (p) => , }; // ============================================================ // Brand mark — replaces 元启 logo, our own "Singularity core" // ============================================================ function BrandLogo() { return (

奇点引擎 SINGULARITY

多模型聚合 · 智能体创作平台

); } // ============================================================ // Sidebar // ============================================================ const AGENTS = [ { id: 'api', name: 'API开放接口', icon: '⚡', chips: [['API','chip-api']], desc: '下载 Skill 文件，让 AI 编程工具自动接入全部模型能力，无需阅读…' }, { id: 'canvas', name: '无限画布', icon: '◇', chips: [['多模态','chip-multi']], desc: '无限延展的 AI 创意空间，自由排布图文视频，所想即所得' }, { id: 'ecom', name: '电商一键生图', icon: '🛒', chips: [['图片','chip-image']], active: true, desc: '上传商品图片和信息，AI 多轮对话补全需求，智能推荐出图方案…' }, { id: 'general', name: '通用一键生图', icon: '🎨', chips: [['图片','chip-image']], desc: '上传任意图片和描述，AI 智能分析需求，多轮对话规划方案，一键…' }, { id: 'oc', name: 'OpenClaw', icon: '🐦', chips: [['多模态','chip-multi']], desc: '免费一键部署全中文 AI 大模型，ChatGPT / Gemini / Claude 本…' }, { id: 'manhua', name: 'AI 漫剧 - S2.0', icon: '🎭', chips: [['视频','chip-video']], desc: '专为参考图打造的超级智能体，多种玩法一键生成高质量视频' }, { id: 'manhua2', name: 'AI 漫剧 · 剧情版', icon: '🎬', chips: [['视频','chip-video']], desc: '基于剧本自动分镜，逐镜生成漫剧风格画面，可导出长视频' }, { id: 'voice', name: 'AI 配音工坊', icon: '🎙', chips: [['新','chip-new']], desc: '上传文字脚本一键生成多角色配音，支持情绪与韵律调节' }, { id: 'writer', name: 'AI 写作工作台', icon: '✎', chips: [['文本','chip-text']], desc: '多模型协作长文写作，支持大纲生成、续写与多角度润色' }, ]; function Sidebar({ activeAgent, onPickAgent }) { return ( ); } // ============================================================ // Top action bar with 新任务 / 历史 + top-right product strip // ============================================================ function TopBar({ onNewTask, productThumbs, showProductStrip, currentLabel }) { return ( <>

{showProductStrip && productThumbs && (

{productThumbs.slice(0, 6).map((t, i) => )}

{currentLabel &&

{currentLabel}

}

)}

); } // Chibi-style placeholder thumb (CSS-drawn) — no real image function ProductThumb({ active, kind }) { return (

); } function ChibiPlaceholder({ kind, size = 40 }) { // CSS-only stylized "chibi product" placeholder; varied looks based on kind const v = (kind || 0) % 4; return ( ); } // Rocket-doodle variant (one of the source images) function RocketDoodle({ size = 40 }) { return ( ); } // ============================================================ // Composer (bottom dock with upload + input + mode toggle) // ============================================================ function Composer({ placeholder = '输入商品名称和详细信息…', mode, setMode, productThumbs, showStack = true, expanded, onToggleExpand }) { return (

{!showStack && (

商品图

)} {showStack && productThumbs && (

{productThumbs.slice(0,3).map((_, i) => (

))}

)}

); } // ============================================================ // Settings modal — model fallback chain etc. // ============================================================ function SettingsModal({ open, onClose }) { const [planCount, setPlanCount] = useState(30); const [strategy, setStrategy] = useState('price'); const [models, setModels] = useState([ { tag: '主', name: 'GPT-5.4', deep: '开启', web: '开启', primary: true }, { tag: '备1', name: 'Gemini 3.1 Pro', deep: '开启', web: '开启' }, { tag: '备2', name: '豆包 Seed 2.0 Pro', deep: '开启', web: '开启' }, ]); if (!open) return null; const STRATEGIES = [ ['price', '💰', '价格优先'], ['speed', '⚡', '速度优先'], ['quality', '🎯', '成功率优先'], ]; return (

e.stopPropagation()}>

电商生图配置

配置对话模型、图片模型和出图参数

规划图片上限

AI 最多规划图片方案数

{planCount}

渠道策略

{STRATEGIES.map(([id, ico, label]) => (

setStrategy(id)}> {ico} {label}

))}

图片模型

对话模型

按顺序自动切换，首个为主力模型

{models.map((m, i) => (

{m.tag}

))}

); } // ============================================================ // Settings FAB (gear at left bottom of main area) // ============================================================ function SettingsFab({ onClick }) { return ( ); } function PlaybookFab() { return ( ); } // ============================================================ // Export // ============================================================ Object.assign(window, { Ico, Sidebar, TopBar, Composer, SettingsModal, SettingsFab, PlaybookFab, ProductThumb, ChibiPlaceholder, RocketDoodle, AGENTS, });