Extrapolate – AI Aging App

--NEW README COMING SOON--

Introduction

Extrapolate is an app for you to see how well you age by transforming your face with Artificial Intelligence.

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

Features

• 3s GIF of your face as it ages through time 🧓
• Store & retrieve photos from Cloudflare R2 using Workers

Deploy Your Own

You can deploy this template to Vercel with the button below:

Note that you'll need to:

• Set up a ReplicateHQ account to get the REPLICATE_API_TOKEN env var.
• Set up an Upstash account to get the Upstash Redis env vars.
• Create a Cloudflare R2 instance and set up a Cloudflare Worker to handle uploads & reads (instructions below).

Cloudflare R2 setup instructions

1. Go to Cloudflare and create an R2 bucket.
2. Create a Cloudflare Worker using the code snippet below.
3. Bind your worker to your R2 instance under Settings > R2 Bucket Bindings.
4. For extra security, set an AUTH_KEY_SECRET variable under Settings > Environment Variables (you can generate a random secret here).
5. Replace all instances of images.extrapolate.workers.dev in the codebase with your Cloudflare Worker endpoint.

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

6
function authorizeRequest(request, env, key) {
7
  switch (request.method) {
8
    case "PUT":
9
    case "DELETE":
10
      return hasValidHeader(request, env);
11
    case "GET":
12
      return true;
13
    default:
14
      return false;
15
  }
16
}
17

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

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

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

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

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

42
        return new Response(object.body, {
43
          headers,
44
        });
45
      case "DELETE":
46
        await env.MY_BUCKET.delete(key);
47
        return new Response("Deleted!");
48

49
      default:
50
        return new Response("Method Not Allowed", {
51
          status: 405,
52
          headers: {
53
            Allow: "PUT, GET, DELETE",
54
          },
55
        });
56
    }
57
  },
58
};

Author

• Steven Tey (@steventey)