Extrapolate

使用AI查看你的衰老状况

简介 · 功能 · 部署属于你自己的 · 作者

--新README即将发布--

简介

Extrapolate是一款应用，通过人工智能技术对你的面部进行变换，帮助你了解自己的衰老情况。

https://user-images.githubusercontent.com/28986134/213781048-d215894d-2286-4176-a200-f745b255ecbe.mp4

功能

• 一段3秒的GIF动图，展示你的面部随时间推移的衰老过程 🧓
• 使用Workers将照片存储并检索至Cloudflare R2

部署属于你自己的

你可以使用下方按钮将此模板部署到Vercel：

请注意，你需要：

• 注册一个ReplicateHQ账户以获取REPLICATE_API_TOKEN环境变量。
• 注册一个Upstash账户以获取Upstash Redis的相关环境变量。
• 创建一个Cloudflare R2实例，并设置一个Cloudflare Worker来处理上传和读取操作（具体说明见下文）。

Cloudflare R2设置步骤

1. 前往Cloudflare并创建一个R2存储桶。
2. 使用下方代码片段创建一个[Cloudflare Worker]。
3. 在设置 > R2存储桶绑定中将你的Worker与R2实例绑定。
4. 为了额外的安全性，在设置 > 环境变量中设置一个AUTH_KEY_SECRET变量（你可以在此处生成随机密钥这里）。
5. 将代码库中所有出现的images.extrapolate.workers.dev替换为你自己的Cloudflare Worker端点。

// 检查请求是否包含预共享密钥
const hasValidHeader = (request, env) => {
  return request.headers.get("X-CF-Secret") === env.AUTH_KEY_SECRET;
};

function authorizeRequest(request, env, key) {
  switch (request.method) {
    case "PUT":
    case "DELETE":
      return hasValidHeader(request, env);
    case "GET":
      return true;
    default:
      return false;
  }
}

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    if (!authorizeRequest(request, env, key)) {
      return new Response("Forbidden", { status: 403 });
    }

    switch (request.method) {
      case "PUT":
        await env.MY_BUCKET.put(key, request.body);
        return new Response(`Put ${key} successfully!`);
      case "GET":
        const object = await env.MY_BUCKET.get(key);

        if (object === null) {
          return new Response("Object Not Found", { status: 404 });
        }

        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set("etag", object.httpEtag);

        return new Response(object.body, {
          headers,
        });
      case "DELETE":
        await env.MY_BUCKET.delete(key);
        return new Response("Deleted!");

      default:
        return new Response("Method Not Allowed", {
          status: 405,
          headers: {
            Allow: "PUT, GET, DELETE",
          },
        });
    }
  },
};

作者

• Steven Tey (@steventey)

Extrapolate 快速上手指南

Extrapolate 是一个基于 AI 的面部年龄变换应用，可生成用户随时间变老的动态 GIF 图像。本项目基于 Next.js、Replicate、Upstash Redis 和 Cloudflare R2 构建。

环境准备

在开始之前，请确保满足以下要求：

• Node.js: 版本 18 或更高
• 包管理器: npm, yarn, pnpm 或 bun
• 账号准备:
  • Replicate 账号（用于获取 REPLICATE_API_TOKEN）
  • Upstash 账号（用于 Redis 数据库）
  • Cloudflare 账号（用于 R2 存储和 Workers）
  • Vercel 账号（用于部署，可选）

安装步骤

1. 克隆项目仓库

git clone https://github.com/steven-tey/extrapolate.git
cd extrapolate

2. 安装依赖

npm install
# 或者使用其他包管理器
# yarn install
# pnpm install

3. 配置环境变量

复制示例环境变量文件并填入你的密钥：

cp .env.example .env.local

编辑 .env.local 文件，填入以下关键变量：

• REPLICATE_API_TOKEN: 从 Replicate 控制台获取
• REPLICATE_WEBHOOK_TOKEN: 自定义一个用于验证 Webhook 的令牌
• UPSTASH_REDIS_REST_URL 和 UPSTASH_REDIS_REST_TOKEN: 从 Upstash 控制台获取
• CLOUDFLARE_WORKER_SECRET: 自定义一个随机密钥（可使用 generate-secret.vercel.app 生成）
• POSTMARK_TOKEN: 如需邮件通知功能，从 Postmark 获取

4. 设置 Cloudflare R2 和 Worker

1. 登录 Cloudflare 控制台，创建一个 R2 Bucket。
2. 创建一个新的 Cloudflare Worker，并将以下代码粘贴进去：

// Check requests for a pre-shared secret
const hasValidHeader = (request, env) => {
  return request.headers.get("X-CF-Secret") === env.AUTH_KEY_SECRET;
};

function authorizeRequest(request, env, key) {
  switch (request.method) {
    case "PUT":
    case "DELETE":
      return hasValidHeader(request, env);
    case "GET":
      return true;
    default:
      return false;
  }
}

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    if (!authorizeRequest(request, env, key)) {
      return new Response("Forbidden", { status: 403 });
    }

    switch (request.method) {
      case "PUT":
        await env.MY_BUCKET.put(key, request.body);
        return new Response(`Put ${key} successfully!`);
      case "GET":
        const object = await env.MY_BUCKET.get(key);

        if (object === null) {
          return new Response("Object Not Found", { status: 404 });
        }

        const headers = new Headers();
        object.writeHttpMetadata(headers);
        headers.set("etag", object.httpEtag);

        return new Response(object.body, {
          headers,
        });
      case "DELETE":
        await env.MY_BUCKET.delete(key);
        return new Response("Deleted!");

      default:
        return new Response("Method Not Allowed", {
          status: 405,
          headers: {
            Allow: "PUT, GET, DELETE",
          },
        });
    }
  },
};

3. 在 Worker 的 Settings > R2 Bucket Bindings 中，将 MY_BUCKET 绑定到你创建的 R2 存储桶。
4. 在 Settings > Environment Variables 中添加 AUTH_KEY_SECRET，值设为你在 .env.local 中配置的 CLOUDFLARE_WORKER_SECRET。
5. 记录你的 Worker 访问地址（例如：https://your-worker.your-subdomain.workers.dev），并在项目代码中将所有 images.extrapolate.workers.dev 替换为你的实际地址。

5. 启动开发服务器

npm run dev

访问 http://localhost:3000 即可看到本地运行的应用。

基本使用

1. 打开应用页面，上传一张清晰的人脸照片。
2. 系统会自动调用 Replicate AI 模型处理图像，生成从年轻到年老的演变过程。
3. 几秒后，你将看到一个约 3 秒的 GIF 动图，展示面部随时间变化的效果。
4. 生成的图片会自动存储至你配置的 Cloudflare R2 存储桶，并可通过链接分享。

💡 提示：首次运行可能需要等待 AI 模型冷启动，后续请求会更快。

你现在已成功部署并运行 Extrapolate！如需生产环境部署，可点击 README 中的 "Deploy with Vercel" 按钮一键部署。