use the replicate npm package

lib/db.js

@@ -1,8 +1,17 @@
 import prisma from "./prisma";
 
+function enabled() {
+  return process.env.DATABASE_URL ? true : false;
+}
+
 export async function upsertPrediction(predictionData) {
   console.log("🤔 upsert prediction? ", predictionData.id);
 
+  if (!enabled()) {
+    console.log("skiping upsert, database not enabled");
+    return;
+  }
+
   if (predictionData?.status !== "succeeded") {
     console.log("🙈 skiping incomplete or unsuccesful prediction");
     return;

package.json

@@ -30,6 +30,7 @@
     "react-dom": "18.2.0",
     "react-sketch-canvas": "^6.2.0",
     "react-spinners": "^0.13.8",
+    "replicate": "github:replicate/replicate-js",
     "upload-js-full": "^1.22.0"
   },
   "devDependencies": {
@@ -41,4 +42,4 @@
     "tailwindcss": "^3.1.8",
     "tailwindcss-animate": "^1.0.5"
   }
-}
+}

pages/api/predictions/[id].js

@@ -1,19 +1,13 @@
-const API_HOST = process.env.REPLICATE_API_HOST || "https://api.replicate.com";
+import replicate from "replicate";
 
 export default async function handler(req, res) {
-  const response = await fetch(`${API_HOST}/v1/predictions/${req.query.id}`, {
-    headers: {
-      Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
-      "Content-Type": "application/json",
-    },
-  });
-  if (response.status !== 200) {
-    let error = await response.json();
+  const prediction = await replicate.prediction(req.query.id).load();
+
+  if (prediction.error) {
     res.statusCode = 500;
-    res.end(JSON.stringify({ detail: error.detail }));
+    res.end(JSON.stringify({ detail: prediction.error }));
     return;
   }
 
-  const prediction = await response.json();
   res.end(JSON.stringify(prediction));
 }

pages/api/predictions/index.js

@@ -1,6 +1,4 @@
-const REPLICATE_API_HOST = "https://api.replicate.com";
-
-import packageData from "../../../package.json";
+import replicate from "replicate";
 
 const WEBHOOK_HOST = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -13,34 +11,25 @@ export default async function handler(req, res) {
     );
   }
 
-  const body = JSON.stringify({
-    // https://replicate.com/jagilley/controlnet-scribble/versions
-    version: "435061a1b5a4c1e26740464bf786efdfa9cb3a3ac488595a2de23e143fdb0117",
-    input: req.body,
-    webhook: `${WEBHOOK_HOST}/api/replicate-webhook`,
-    webhook_events_filter: ["start", "completed"],
-  });
-
-  const headers = {
-    Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
-    "Content-Type": "application/json",
-    "User-Agent": `${packageData.name}/${packageData.version}`,
-  };
-
-  const response = await fetch(`${REPLICATE_API_HOST}/v1/predictions`, {
-    method: "POST",
-    headers,
-    body,
-  });
+  const input = req.body;
+  const prediction = await replicate
+    .model(
+      "jagilley/controlnet-scribble:435061a1b5a4c1e26740464bf786efdfa9cb3a3ac488595a2de23e143fdb0117"
+    )
+    .createPrediction(
+      { input },
+      {
+        webhook: `${WEBHOOK_HOST}/api/replicate-webhook`,
+        webhookEventsFilter: ["completed"],
+      }
+    );
 
-  if (response.status !== 201) {
-    let error = await response.json();
+  if (prediction.error) {
     res.statusCode = 500;
-    res.end(JSON.stringify({ detail: error.detail }));
+    res.end(JSON.stringify({ detail: prediction.error }));
     return;
   }
 
-  const prediction = await response.json();
   res.statusCode = 201;
   res.end(JSON.stringify(prediction));
 }

pages/api/replicate-webhook.js

@@ -4,7 +4,7 @@
 import { upsertPrediction } from "../../lib/db";
 
 export default async function handler(req, res) {
-  console.log("received webhook for prediction: ", req.body.id);
+  console.log("🪝 received webhook for prediction: ", req.body.id);
   await upsertPrediction(req.body);
 
   res.end();