Add: Resize the image size to meet OpenAI requirements

[mingming-ma]

Explanation

This updates make sure users' input image's size is within OpenAI GPT-4V limit.

The OpenAI requirements for images can be found at Is there a limit to the size of the image I can upload?

Yes, we restrict image uploads to 20MB per image.

And Calculating costs

detail: high images are first scaled to fit within a 2048 x 2048 square, maintaining their aspect ratio.

I found this tool browser-image-compression focus on the image compression in web browser is great to handle it, supports both file size and px constraints.

I set the values in imageCompressionOptions as:

      const imageCompressionOptions = {
        maxSizeMB: 20,
        maxWidthOrHeight: 2048,
        useWebWorker: true,
      };

The useWebWorker is optional, means the tool will use multi-thread web worker for the compression, fallback to run in main-thread (default: true). Although it is default true, I added it to align with the document's Usage

How to test

Use some large size image in the prompt, I got a 30MB image from here

Before

After

Fixes #395
Fixes #465

[Amnish04]

I've tested this and it works well! Just a few suggestions I commented.

[Amnish04]

I was also wondering if we should set a lower maximum size of image upload for better performance, or would that be a negligible difference?

[mingming-ma]

@Amnish04 Yeah, that's a good way to try. if we set lower value of maxSizeMB, it should improve the response since the payload now have smaller image, and also help reduce the costs.

Maybe we add options in follow up PRs for the user to select uploaded image with different compression rate or wanted size. User can adjust it accordingly by the result.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	0ef37ba
Status:	✅  Deploy successful!
Preview URL:	https://e5c9b2e2.console-overthinker-dev.pages.dev
Branch Preview URL:	https://mingming-resizeimage-395.console-overthinker-dev.pages.dev

View logs

[Amnish04]

@Amnish04 Yeah, that's a good way to try. if we set lower value of maxSizeMB, it should improve the response since the payload now have smaller image, and also help reduce the costs.

Maybe we add options in follow up PRs for the user to select uploaded image with different compression rate or wanted size. User can adjust it accordingly by the result.

Sounds good, could you please file a follow up for that.

[mingming-ma]

@humphd During refactoring the code, I realized can also solve the dynamic import issue 😄 Let me know if other updates needed. Thanks a lot for the feedback!

[humphd]

Much better! One small fix.

[humphd]

Move this inline below into your compressImageToBase64 function, since we don't use this externally now.