Fetching Frame Image from Cloud CDN

[mubarakone]

TLDR: I need help optimizing my generateFrames/route.ts file to beat the 10 second time limit on Vercel. My Frame image needs to be generated quick enough on the server, so it can be displayed. It only needs to be generated once.

Describe the bug and the steps to reproduce it

I'm not the best with middleware, so I need your help.

So when testing my frame during production using the Warpcast Frame Tool, I decided to fetch the images used for my Frame using Cloud CDN, which provides you a public Static IP Address you can go to directly and saves time executing on the server. The purpose of this is to reduce execution time on the server, otherwise I will exceed my 10 seconds limit from Vercel.

Task timed out after 10.01 seconds

Previously, I was timing out on the server by fetching the image URL soon after the image is uploaded. Having a CDN link will make things faster. Here are the links I will use for the frame images:

http://34.36.130.28/images/snippet_0.png
http://34.36.130.28/images/snippet_1.png
http://34.36.130.28/images/snippet_2.png
http://34.36.130.28/images/snippet_3.png

Everything seems to be working great, until when it comes to passing the CDN to image.src property, nothing happens. If you click on the links, the CDN works fine. Here is some code snippets:

// api/generatedFrames/route.ts

image: {
        src: 'http://34.36.130.28/images/snippet_0.png',
        aspectRatio: '1:1',
      },

// api/frame/route.ts

image: {
        src: `http://34.36.130.28/images/${frameID - 1}.png`,
        aspectRatio: '1:1',
      },

When I checked the Warpcast Frame Tool, I get this (these messages are only shown when screen: md | sm, pass this message to the Warpcast guys):

My server-side functionality for these frames is a bit complex, but I feel concise enough to be able to beat the time given by Warpcast Frame Tool 5445 ms. However I do not know how else i can speed up the process given the functionalities at play.

Here is what is going on in [api/generatedFrames/route.ts](https://newspaper.tips/api/generateFrames):
https://github.com/mubarakone/tailwind-css-starter-blog/blob/main/app/api/generateFrames/route.ts

1. A static .mdx file gets fetched locally, the contents is saved into a string variable, and is passed through an OpenAI API and generates a summary of the fetched file
2. The summary is then parsed through and formatted into 6 parts.
3. The summaries are then iterated through a Fetch API to generate a PNG image of each summary, then uploaded to a Firebase Storage folder.

All of this must happen in one file, and cannot use any client functionality because this is what will be required for the Frame.

What's the expected behavior?

To give an idea of what I'm building, this Frame is an AI generated preview of an article. It will be a good way for users to get a preview of what the article is about, before reading it entirely. It also serves as a great way to onboard users to my app.

The expected behavior is for the next Frame image to generate on time, before the server times out.

What version of the libraries are you using?

"@coinbase/onchainkit": "^0.10.1",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "^5.1.3",

[mubarakone]

Here is the frame URL (live): https://newspaper.tips/latest/blog/release-of-tailwind-nextjs-starter-blog-v2.0