Extrapolate

See how well you age with AI

Introduction · Features · Deploy Your Own · Author

--NEW README COMING SOON--

Introduction

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

Extrapolate.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.

Cloudflare Worker Code

// Check requests for a pre-shared secretconsthasValidHeader=(request,env)=>{returnrequest.headers.get("X-CF-Secret")===env.AUTH_KEY_SECRET;};functionauthorizeRequest(request,env,key){switch(request.method){case"PUT":
case"DELETE":
returnhasValidHeader(request,env);case"GET":
returntrue;default:
returnfalse;}}exportdefault{asyncfetch(request,env){consturl=newURL(request.url);constkey=url.pathname.slice(1);if(!authorizeRequest(request,env,key)){returnnewResponse("Forbidden",{status: 403});}switch(request.method){case"PUT":
awaitenv.MY_BUCKET.put(key,request.body);returnnewResponse(`Put ${key} successfully!`);case"GET":
constobject=awaitenv.MY_BUCKET.get(key);if(object===null){returnnewResponse("Object Not Found",{status: 404});}constheaders=newHeaders();object.writeHttpMetadata(headers);headers.set("etag",object.httpEtag);returnnewResponse(object.body,{
headers,});case"DELETE":
awaitenv.MY_BUCKET.delete(key);returnnewResponse("Deleted!");default:
returnnewResponse("Method Not Allowed",{status: 405,headers: {Allow: "PUT, GET, DELETE",},});}},};

Author

• Steven Tey (@steventey)