【实战进阶(2/4) 】IDE工具、GitHub、API、环境变量

把首页标题改成紫色

## API 代码 （curl代码）
curl https://openrouter.ai/api/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENROUTER_API_KEY" \
  -d '{
  "model": "google/gemini-3-flash-preview",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "What is in this image?"
        },
        {
          "type": "image_url",
          "image_url": {
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg"
          }
        }
      ]
    }
  ]
  
}'



## API Key

粘贴你自己的KEY


## API示例输入 (postman请求的body)
{
  "model": "google/gemini-3-flash-preview",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "What is in this image?"
        },
        {
          "type": "image_url",
          "image_url": {
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg"
          }
        }
      ]
    }
  ]
  
}


## API示例输出 (postman返回结果里的body)
{
    "id": "gen-1760339238-BG4KZ6dgEfrjoMCRwMlQ",
    "provider": "Google AI Studio",
    "model": "google/gemini-3-flash-preview",
    "object": "chat.completion",
    "created": 1760339238,
    "choices": [
        {
            "logprobs": null,
            "finish_reason": "stop",
            "native_finish_reason": "STOP",
            "index": 0,
            "message": {
                "role": "assistant",
                "content": "This image shows a **wooden boardwalk cutting through a vibrant green field under a wide, blue sky with scattered clouds**.\n\nHere's a breakdown of the key elements:\n\n*   **Sky:** The upper portion of the image is dominated by a bright blue sky with numerous white and light grey clouds, some stretched thinly, others forming more distinct shapes. The overall impression is good weather.\n*   **Field/Meadow:** A vast expanse of lush, green grass fills the majority of the lower image. The grass appears tall and somewhat wild, suggesting a natural or semi-natural landscape rather than a manicured lawn. The sunlight catches the blades of grass, highlighting their green color.\n*   **Boardwalk:** A light-colored wooden boardwalk stretches from the bottom center of the image and recedes into the distance, appearing to curve slightly to the right. It provides a clear path through the tall grass. The planks show some signs of age or weathering.\n*   **Trees/Shrubs:** In the middle ground, on either side of the field and further along the horizon, there are clusters of trees and bushes. On the left side, the trees are predominantly green, while on the right, some of the bushes have reddish-brown foliage, possibly indicating a different species or seasonal color.\n\nThe image has a bright, natural, and inviting atmosphere, suggesting a peaceful walk through a natural landscape.",
                "refusal": null,
                "reasoning": null
            }
        }
    ],
    "usage": {
        "prompt_tokens": 265,
        "completion_tokens": 287,
        "total_tokens": 552,
        "prompt_tokens_details": {
            "cached_tokens": 0
        },
        "completion_tokens_details": {
            "reasoning_tokens": 0,
            "image_tokens": 0
        }
    }
}

让图片1里左侧的人，穿上图片2的衣服

{
    "type": "image_generation.partial_succeeded",
    "model": "doubao-seedream-4-0-250828",
    "created": 1760336285,
    "image_index": 0,
    "url": "https://placeholder.example.com/image.jpg",
    "size": "1600x2848"
}

你是我的全栈工程师。请帮我把当前项目里的默认 AI API 提供商切换为另一家 API，先输出实施计划，不要立刻改代码。
【项目背景】
- 技术栈：Next.js (App Router) + TypeScript
- 当前已有功能：{填写，例如“文生图功能 / 聊天回复功能 / 语音转写功能」
- 当前接入：{旧供应商，如 coze sdk / OpenRouter / 火山引擎}
- 本次目标：把功能从 {旧供应商/旧模型} 替换到 {新供应商/新模型}

【你先确认的四个问题（先做这4步）】
1) 旧 API 的对外能力边界：入参、出参、错误码、速率限制
2) 新 API 的能力是否能完整替代（消息格式、流式、图片/文件参数等）
3) 是否需要做字段映射（例如 messages、response schema）
4) 是否需要兼容回退策略（失败时回退旧供应商）

【API 四要素（替换目标 API）】
1) 新 API Key：{填写}
2) 示例代码（curl）：{粘贴官方示例}
3) 示例输入（Request Body）：{粘贴请求示例}
4) 示例输出（Response Body）：{粘贴返回示例}


【实现要求】
1. 先输出完整实施计划（含风险），不要先改代码
2. API Key 只能放服务端环境变量，禁止前端暴露；写入 .env
3. 统一使用服务端 service 层接入，页面组件只负责渲染/交互
4. 新增 provider 适配层，保证上层调用接口不变（你可抽象为统一 adapter）
5. 增加错误分类处理：401、403、429、5xx、timeout，返回可读的业务错误
6. 增加可观测日志（请求开始/结束、provider、耗时、状态码、错误摘要）

【你必须输出】
- 步骤计划（每步包含目的+文件）
- 你建议保留的公共接口定义（签名/返回结构）
- 关键边界映射表（旧字段 -> 新字段；新字段 -> 兼容字段）
- 对比表：替换前后能力差异

请先给我计划，等我回复“开始改”后，再给出代码实现步骤并开始改文件。

看看这个 Next.js 项目目前接入的API和对应的功能是什么

请帮我启动这个 Next.js 项目。

我想做一款产品，可以实现「虚拟试衣」这个功能。

产品形态是：我上传衣服图片和我自己的图片后，可以替换服装看到我穿上这件衣服的样子。

我想知道，当今的 AI 技术，能不能实现？有没有现成的 API 可以让我调用？

虚拟试衣 AI 工具 V1 SPEC
一、Problem Statement（问题陈述）
当前普通消费者在购买服装前，往往只能依赖模特图、商品图或想象来判断一件衣服是否适合自己。这种判断方式存在几个明显问题：第一，商品图中的模特体型、拍摄角度、搭配方式与用户本人差异较大，用户很难建立“这件衣服穿在我身上会是什么样”的直观认知；第二，用户即使有兴趣尝试多件衣服，也需要反复在不同商品图之间切换，决策成本高；第三，用户自己已有衣物与待购衣物之间的搭配关系也很难被快速验证。
因此，产品需要解决的核心问题是：让普通消费者能够用最低门槛上传自己照片和服装图片，快速获得一张可用于购买前参考的试穿预览图，从而降低购买犹豫，提高尝试意愿，并形成可持续反复使用的试穿习惯。
这个产品不是做“精确量体”或“尺码推荐”，而是做一个 低门槛、可重复使用、以购买前参考为核心价值的虚拟试衣工具。
二、Proposed Solution（方案描述）
V1 将推出一个 面向海外市场的 Web 虚拟试衣工具。用户登录后，上传一张自己的照片和一张服装图片，系统自动识别服装类别，并生成一张静态的试穿预览图。结果以“购买前参考图”的形式提供，而不是精准尺码或真实上身承诺。
1. 核心用户
普通消费者。
2. 核心场景
以 购买前预览 为主，以 穿搭尝试 为辅，同时兼顾一定程度的 身材适配参考，但不把“精准版型判断”作为首版强承诺。
3. 产品形态
Web 网页工具。
4. 输入
用户一次试衣需要提供：
1 张人物照片
1 张服装图片
V1 对输入门槛保持尽可能低：
人物图可为任意日常照片
服装图可为任意服装图片
不强制标准姿势、不强制白底图、不强制高质量输入
5. 支持品类
V1 支持：
上装
下装
连衣裙
一次试衣只替换一件衣服。
6. 识别与生成方式
系统自动识别服装类别
V1 暂不提供识别错误时的专门兜底机制
若结果不理想，用户可直接重新生成
7. 输出
返回 1 张静态试穿预览图
对外承诺为 “试穿预览图”
不承诺精准尺码、精准垂感、精准真实上身还原
8. 生成目标
生成结果应尽量满足以下方向：
尽量保持人物脸部与身份感不变
尽量保持原有身体轮廓与姿势不变
尽量保持原始背景不变
尽量还原服装的关键特征：颜色、主要版型、长度、关键图案
优先提供“购买前参考价值”，而不是纯娱乐效果
9. 复用机制
为了支持重复使用：
同一次访问中，人物图只需上传一次
用户后续可以连续更换服装图继续试穿
人物图仅在当前会话中复用，不作为默认底图长期复用
10. 账号与历史记录
V1 支持游客身份访问，登录后的账号体系支持长期保存：
试穿结果图
原始人物图
原始服装图
用户可以删除单条历史记录。
11. 商业模式
首版采用 订阅制
订阅价值主要建立在 更多试穿次数
漏斗设计为：先免费试用，再引导订阅
三、Technical Constraints（技术约束）
核心框架
框架: Next.js 16 (App Router)
语言: TypeScript 5
运行时: Node.js 24
前端技术
框架: React 19
样式: Tailwind CSS 4
组件库: shadcn/ui (Radix UI)
图标: Lucide React
AI 集成
图片 API
状态管理
方案: React Context API
全局状态: GameContext
开发工具
包管理器: pnpm (强制要求)
初始化工具: Coze CLI
代码规范: Airbnb Style Guide
四、Non-goals（明确不做的事）
V1 明确不做以下事项：
1. 不做尺码推荐
不告诉用户应该买 S、M、L 或具体尺码。
2. 不做精确身材测量
不输出肩宽、腰围、腿长等人体测量数据。
3. 不保证复杂场景适配
不承诺以下输入的效果：
多人合照
严重遮挡
极端角度
坐姿、蹲姿、复杂动作
非常模糊或极暗图像
4. 不做自动穿搭推荐
不自动推荐“这件衣服配什么裤子/鞋子/外套”。
5. 不做整套一次替换
一次仅替换一件：上装、下装或连衣裙之一。
6. 不做动态试衣
V1 只输出静态图片，不做视频或动态试穿。
7. 不做人像真实性校验
不强校验上传者是否为本人，也不限制只能上传自己的照片。
8. 不做高风险人物专项风控
除明显违规内容外，V1 暂不处理未成年人、公众人物等专项风险识别。
9. 不做高精度真实性承诺
不承诺完全真实的面料垂感、细节纹理、尺码贴合度或实体上身一致性。
五、Success Criteria（成功标准）
V1 的成功要分成 单次结果成功 和 产品层面成功 两层。
1. 单次结果成功标准
一张合格的试穿预览图，至少应满足以下四点：
用户能一眼认出是自己
衣服类别正确
结果对购买决策有参考价值
画面基本自然，不明显穿帮
这四项都至少基本成立，才算一次“成功的试衣结果”。
2. 产品层面的成功标准
V1 的首要成功指标不是一次生成率，而是 重复使用率。
重点看两件事：
（1）短期重复使用
用户在一次访问中，拿到第一张结果后，是否愿意继续试更多衣服。
（2）长期重复使用
用户是否会在几天后再次回来继续使用。
也就是说，V1 要证明自己不是一次性新鲜工具，而是一个用户愿意持续回访的消费级产品。
3. 商业化成功信号
由于产品采用“免费试用后订阅”的方式，早期可观察的商业化信号包括：
免费用户是否快速用完额度
用完后是否有明显订阅意愿
订阅用户是否确实比免费用户更高频试穿
4. 不作为 V1 核心成功指标的内容
以下指标暂不作为首版核心判断标准：
尺码准确率
身材测量准确率
高风险风控识别率
动态试衣完成率
全服装品类覆盖率
一句话版本
这是一个 面向海外普通消费者的 Web 虚拟试衣工具：
用户登录后上传自己的照片和任意服装图，系统自动识别服装类别，并在 10–20 秒内生成一张静态试穿预览图；产品以 购买前参考 为核心价值，以 低门槛、可重复使用、订阅驱动 为产品策略，不做尺码推荐、不做复杂风控、不承诺高精度真实上身效果。
如果你愿意，下一步我可以直接把这份 SPEC 继续往下扩成一版 PRD 结构，包括：
用户流程、页面模块、核心状态机、订阅设计、埋点指标、MVP 优先级。

你是我的全栈工程师。请帮我把下面这个 API 接入当前项目。

【项目背景】
- 技术栈：Next.js(App Router) + TypeScript
- 当前已有功能：{填写，如果没有，就说没有}
- 本次目标：{填写，例如"通过调用image to image的API，实现虚拟试衣功能；用户需需要传入两张图片，一张是模特照片，一张是衣服"}

【API 四要素】
1) API Key：{填写}
2) 示例代码（curl）：{粘贴官方示例}
3) 示例输入：{粘贴请求 body}
4) 示例输出：{粘贴返回示例}

【实现要求】
1. 先输出实施计划，不要立刻改代码
2. API Key 只能走服务端环境变量，不能暴露到前端；API Key配置到.env中
3. 新增 service 层，不要把调用写死在页面组件
4. 增加错误处理：401 / 429 / timeout
5. 增加开发日志，便于排查
6. 最后给我：
   - 修改文件清单
   - 本地验证步骤
   - 失败回滚方案

请先给计划，等我回复"开始改"后再改代码。

我现在 API 调用失败，请按工程排查流程帮我定位。

【错误信息】
- 状态码：{填写}
- 响应体：{粘贴}
- 控制台日志：{粘贴}
- 最近改动：{填写}

【你需要输出】
1. 最可能的3个根因（按概率排序）
2. 每个根因的验证步骤
3. 最小修复方案（不要大改架构）
4. 修复后的验证清单（成功标准）

请先定位，再给修改建议，不要直接重构。

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx

// 直接在前端组件里调用第三方 API
const response = await fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk-xxxxxxxxxxxxxxxx', // 密钥硬编码在这里
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ model: 'gpt-4', messages: [...] }),
})

// 同样是错的——NEXT_PUBLIC_ 开头的变量会被打包进前端代码
const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx

.env.local

// /app/api/chat/route.js（App Router 写法）

export async function POST(request) {
  const { messages } = await request.json()

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      // 密钥从服务端环境变量读取，永远不会出现在浏览器里
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ model: 'gpt-5.2', messages }),
  })

  const data = await response.json()
  return Response.json(data)
}

// 前端组件里
const response = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ messages }),
})

pip3 install git-filter-repo --break-system-packages
# 或者用 brew
brew install git-filter-repo

git clone https://github.com/你的用户名/api-key-demo.git api-key-demo-clean

echo "sk-or-v1-你的真实密钥==>LEAKED_KEY_REMOVED" > replacements.txt
git filter-repo --replace-text replacements.txt

git push --force --all