Merge pull request #35 from depatchedmode/image-bugs

Image bugs

modules/processFrameRequest.ts

@@ -1,7 +1,11 @@
+import satori from "satori";
+import sharp from "sharp";
+import { html } from "satori-html";
+import fonts from "../src/fonts.js";
+import mainLayout from "../src/layouts/main.js";
 import frames from '../src/frames/index.js';
 import { Frame, FrameActionDataParsed, GetFrameHtmlOptions, getFrameHtml } from "frames.js";
 import landingPage from '../src/landing-page.js';
-import { objectToURLSearchParams } from '../modules/utils.js';
 import { isFrameStolen } from './antitheft.js';
 
 /**
@@ -63,7 +67,7 @@ const respondWithFrame = async (
   const host = process.env.URL;
   const frame: Frame = {
     version: 'vNext', 
-    image: handleImageSource(name, simpleFrame, message),
+    image: await handleImageSource(simpleFrame, message),
     buttons: simpleFrame.buttons, 
     inputText: simpleFrame.inputText,
     postUrl: `${host}/?${postVars.toString()}`
@@ -90,26 +94,43 @@ const respondWithFrame = async (
   );
 };
 
-function handleImageSource(name, frame, message):string {
+async function handleImageSource(frame, message):Promise<string> {
   const dataUriPattern = /^data:image\/[a-zA-Z]+;base64,/;
   const absoluteUrlPattern = /^https?:\/\//;
   const host = process.env.URL;
 
-  const { image } = frame;
+  const { imageURL, imageMarkup } = frame;
 
-  if (dataUriPattern.test(image)) {
-    return `${host}/og-image?${objectToURLSearchParams({
-      dataUri: image,
-    })}`;
-  } else if (absoluteUrlPattern.test(image)) {
-    return `${host}/og-image?${objectToURLSearchParams({
-      imageUrl: image,
-    })}`;
-  } else {
-    return `${host}/og-image?${objectToURLSearchParams({
-      t: new Date().valueOf(), // Current timestamp for cache busting.
-      frameName: name || '', 
-      message
-    })}`;
+  if (imageMarkup) {
+    const frameMarkupInLayout = mainLayout(imageMarkup, message)
+    const svg = await satori(
+      html(frameMarkupInLayout), 
+      {
+        width: 1200,
+        height: 630,
+        fonts: fonts,
+      }
+    );
+    const svgBuffer = Buffer.from(svg);
+    const imgOutput = sharp(svgBuffer).webp();
+    const imageBuffer = await imgOutput.toBuffer();
+    return `data:image/png;base64,${imageBuffer.toString('base64')}`;
+  } 
+
+  // data URI
+  else if (dataUriPattern.test(imageURL)) {
+    return imageURL;
+  }
+
+  // external image: need to proxy it
+  else if (absoluteUrlPattern.test(imageURL)) {
+    const ogImageResponse = await fetch(imageURL);
+    const dataURI = await ogImageResponse.text(); // Assuming og-image returns the data URI in the response body
+    return dataURI;
+  } 
+
+  // local image
+  else {
+    return `${host}/${imageURL}`;
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "simplest-frame",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "dependencies": {
     "@netlify/blobs": "^6.4.2",
     "dompurify": "^3.0.8",

src/frames/count.ts

@@ -9,7 +9,7 @@ export default {
         const count = await getCount();
         const { username, taunt } = await getFramer() || {};
         return {
-            image:  html`
+            imageMarkup:  html`
                     <div style="
                         font-family: 'Redaction';
                         display: flex;

src/frames/index.ts

@@ -1,14 +1,12 @@
 import poster from "./poster.js";
 import count from "./count.js";
-import credits from "./credits.js";
 import mint from "./mint.js";
 import transaction from "./transaction.js";
 import stolen from "./stolen.js";
 
 export default {
     count,
     poster,
-    credits,
     transaction,
     mint,
     stolen,

src/frames/mint.ts

@@ -6,7 +6,7 @@ export default {
     name: 'mint',
     render: async () => {
         return {
-            image: `${process.env.URL}/images/poster-animated.gif`,
+            imageURL: 'images/poster-animated.gif',
             buttons: [
                 {
                     action: 'post',

src/frames/poster.ts

@@ -4,7 +4,7 @@ export default {
     name: 'poster',
     render: () => {
         return {
-            image: `${process.env.URL}/images/poster-animated.gif`,
+            imageURL: 'images/poster-animated.gif',
             buttons: [
                 {
                     action: 'post',

src/frames/stolen.ts

@@ -2,7 +2,7 @@ export default {
     name: 'stolen',
     render: () => { 
         return {
-            image: `${process.env.URL}/images/stolen.png`,
+            imageURL: 'images/stolen.png',
             buttons: [
                 {
                     action: 'post',

src/frames/transaction.ts

@@ -5,7 +5,7 @@ export default {
     name: 'transaction',
     render: async () => {
         return {
-            image: html`
+            imageMarkup: html`
             <div style="
                 font-family: 'Redaction';
                 display: flex;