构建 MIRROR：使用 Perfect Corp API 的奢华 AI 时尚试穿应用

Source: Dev.to

请提供您希望翻译的具体文本内容（除代码块和 URL 之外），我将按照要求把它翻译成简体中文并保留原有的格式。

什么是 MIRROR？

MIRROR 是一个全栈网页应用，结合了高端的商品浏览体验和 AI 驱动的虚拟试穿。

• 用户浏览商品。
• 打开试穿模态框，上传照片，看到 AI 生成的自己穿着该商品的预览。
• 将商品加入购物车——全部操作无需离开页面。

该应用支持四个商品类别，每个类别都有各自的 Perfect Corp 接口和负载结构：

• 服装
• 鞋子
• 包袋
• 耳环

技术栈

架构

关键的架构决策是让前端完全与 Perfect Corp 解耦。React 应用从不直接调用 Perfect Corp；所有 AI 请求都通过 Express 后端进行。

Client (React) → POST /api/tryon → Express Server → Perfect Corp S2S API

Perfect Corp 的 API 需要用户照片和产品参考图像的公开可访问 URL。因此服务器会：

1. 将上传的用户照片保存到磁盘。
2. 构建公开 URL（在开发环境中通过 ngrok）。

按产品类型的动态端点路由

Perfect Corp 为每个产品类别使用不同的端点，每个端点期望不同的负载结构。我用干净的基于 switch 的配置查找解决了这个问题：

function getPerfectConfig(productType) {
  switch (String(productType || "").toLowerCase()) {
    case "cloth":
      return {
        startUrl: "https://yce-api-01.makeupar.com/s2s/v2.0/task/cloth",
        /* …other config… */
      };
    case "earrings":
      return {
        startUrl:
          "https://yce-api-01.makeupar.com/s2s/v2.0/task/2d-vto/earring",
        /* …other config… */
      };
    case "shoes":
      return {
        startUrl: "https://yce-api-01.makeupar.com/s2s/v2.0/task/shoes",
        /* …other config… */
      };
    case "bag":
      return {
        startUrl: "https://yce-api-01.makeupar.com/s2s/v2.0/task/bag",
        /* …other config… */
      };
    default:
      throw new Error(`Unsupported product type: ${productType}`);
  }
}

buildPayload() 然后为每种类型创建正确的请求体：

• 服装 – 需要 garment_category 和 change_shoes。
• 鞋子 / 包 – 需要 gender 字段。
• 耳环 – 最复杂：需要 ref_file_urls（数组）、source_info 和 object_infos。

任务轮询模式

Perfect Corp 的 API 是异步的：

1. POST → 启动任务 → 接收 task_id。
2. GET → 轮询 /task/{task_id} 直至 task_status === "success"。

我构建了一个可复用的轮询器：

async function pollPerfect({
  pollBaseUrl,
  token,
  taskId,
  intervalMs = 2000,
  maxAttempts = 120,
}) {
  const headers = { Authorization: `Bearer ${token}` };

  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    const res = await fetch(`${pollBaseUrl}/task/${taskId}`, { headers });
    const data = await res.json();

    if (data.task_status === "success") return data;
    if (data.task_status === "failed") throw new Error("Task failed");

    await new Promise((r) => setTimeout(r, intervalMs));
  }
  throw new Error("Polling timed out");
}

本地开发设置

# Set env var for public URL (ngrok)
echo "PUBLIC_BASE_URL=https://your-ngrok-url.ngrok.app" >> server/.env

# Expose server (Perfect Corp needs a public URL)
ngrok http 5000

# Start backend + frontend
node server/index.js
cd client && npm start

总结

MIRROR 是一种在黑客马拉松形式中探索 AI 驱动时尚技术的绝佳方式。最有趣的工程挑战是，在保持前端界面简洁一致的同时，处理每个产品类别的不同 API 合约。

如果您想集成 Perfect Corp 的虚拟试穿 API，首先需要了解的最大要点是公共 URL 的要求。请在开始之前规划好图片托管策略，这样可以为您节省大量调试时间。

完整源码已发布在 GitHub —— 欢迎查看或将其作为您自己的试穿项目参考。

在此查看仓库