SellerCopilot 工程架构

SellerCopilot 采用经典的 BFF (Backend for Frontend) 模式变体，将 Next.js 作为交互层，Python Flask 作为 AI 逻辑编排层，实现了轻量级但高性能的 RAG 链路。

1. 后端：AI 编排与 RAG 流水线

后端核心逻辑位于 app.py。它不仅是一个 API 网关，更是整个应用的“大脑”，负责协调爬虫、Prompt 工程和格式清洗。

1.1 智能爬虫与上下文获取 (RAG Ingestion)

系统没有维护沉重的 Headless Browser 集群，而是通过集成 Jina Reader API，将复杂的 Amazon 产品页实时转换为 LLM 友好的 Markdown 格式。

def fetch_url_content(url):
    # 利用 Jina Reader 将 URL 转为 Markdown，极大降低 Token 消耗
    jina_url = f"https://r.jina.ai/{url}"
    headers = {
        "X-Return-Format": "markdown"
    }
    response = requests.get(jina_url, headers=headers)
    return response.text

1.2 竞品洞察萃取 (Information Extraction)

直接将整个网页塞给生成模型会导致“幻觉”和 Token 浪费。架构中引入了一个中间层 extract_competitor_insights，使用 DeepSeek 先提取核心卖点、SEO 关键词和语调特征。

• 输入： 12000 字符的原始 Markdown。
• Prompt 策略： Role-Play (Data Extractor) + Summarization。
• 输出： 结构化的 Competitor Context。

1.3 强类型 JSON 生成 (Structured Output)

为了保证前端能完美渲染五点描述和 HTML 代码，后端在 System Prompt 中强制约束了 JSON 格式，并配合 clean_json_string 正则函数进行防御性编程。

def clean_json_string(content):
    # 移除 LLM 可能输出的 Markdown 代码块标记，确保 JSON.loads 成功
    if content.startswith("```"):
        content = re.sub(r'^```json\s*', '', content, flags=re.MULTILINE)
        content = re.sub(r'\s*```$', '', content, flags=re.MULTILINE)
    return content

2. 前端：交互体验与状态管理

前端基于 Next.js 构建，采用了 Sidebar + Chat 的布局模式。核心代码位于 page.tsx。

2.1 状态驱动的 UI (State Management)

前端并未引入 Redux 等重型库，而是使用 React useState 管理三个核心维度的 Context：

• myProduct: 用户输入的产品参数。
• competitorText: 竞品链接或文本。
• targetLang: 目标生成语言 (EN/ES/DE/JP)。

2.2 真实 API 联调

在 handleGenerate 函数中，前端通过 fetch API 与 Flask 后端通信。这里展示了真实的负载结构：

const handleGenerate = async () => {
    // 组装 Payload，发送至 Python 后端
    const response = await fetch('[http://127.0.0.1:5000/api/generate](http://127.0.0.1:5000/api/generate)', {
        method: 'POST',
        body: JSON.stringify({
            competitorText: competitorText, 
            myProduct: myProduct,           
            targetLang: targetLang          
        }),
    });
    
    // 解析后端返回的严格 JSON 格式
    const realData = await response.json();
    // ... 渲染 Title, Bullets, Description
};

2.3 渲染引擎

前端组件具有针对 Amazon Listing 的特殊渲染逻辑：

• CopyBtn 组件： 每个字段（标题、五点）都配备独立的复制按钮，方便卖家一键搬运。
• HTML Preview： 对于 Description 字段，前端保留了 HTML 源码显示，因为 Amazon 后台需要直接粘贴 HTML 代码。
• Loading State： 使用 Sparkles 动画和 Pulse 效果缓解用户在 AI 推理期间（通常 10-20秒）的等待焦虑。

3. 部署与扩展性 (Deployment)

目前架构为单体微服务结构，便于快速迭代。未来的扩展路线图如下：

• Docker Compose： 将 Flask 和 Next.js 容器化编排。
• Redis 缓存： 在后端增加 Redis 层，缓存高频竞品 URL 的爬取结果（Markdown），减少 Jina API 调用成本。
• SSE 流式传输： 改造 app.py 为 stream_with_context，让前端能像 ChatGPT 一样逐字显示生成内容。