fix: add image compression for DALL-E generated images

libs/model/src/services/openai/generateTokenIdea.ts

@@ -1,4 +1,5 @@
 import { blobStorage } from '@hicommonwealth/core';
+import { compressImage } from '@hicommonwealth/shared';
 import fetch from 'node-fetch';
 import { OpenAI } from 'openai';
 import {
@@ -75,7 +76,7 @@ const chatWithOpenAI = async (prompt = '', openai: OpenAI) => {
   );
 };
 
-const generateTokenIdea = async function* ({
+export const generateTokenIdea = async function* ({
   ideaPrompt,
 }: GenerateTokenIdeaProps): AsyncGenerator<
   GenerateTokenIdeaResponse,
@@ -135,8 +136,8 @@ const generateTokenIdea = async function* ({
     // generate image url and send the generated url to the client (to save time on s3 upload)
     const imageResponse = await openai.images.generate({
       prompt: TOKEN_AI_PROMPTS_CONFIG.image(tokenIdea.name, tokenIdea.symbol),
-      size: '256x256',
-      model: 'dall-e-2',
+      model: 'dall-e-3',
+      size: '1024x1024',
       n: 1,
       response_format: 'url',
     });
@@ -146,10 +147,11 @@ const generateTokenIdea = async function* ({
     // upload image to s3 and then send finalized imageURL
     const resp = await fetch(tokenIdea.imageURL);
     const buffer = await resp.buffer();
+    const compressedBuffer = await compressImage(buffer);
     const { url } = await blobStorage().upload({
       key: `${uuidv4()}.png`,
       bucket: 'assets',
-      content: buffer,
+      content: compressedBuffer,
       contentType: 'image/png',
     });
     tokenIdea.imageURL = url;
@@ -172,5 +174,3 @@ const generateTokenIdea = async function* ({
     yield { error };
   }
 };
-
-export { generateTokenIdea };

libs/shared/package.json

@@ -36,9 +36,16 @@
     "@libp2p/crypto": "^5.0.4",
     "@libp2p/peer-id": "^5.0.4",
     "@polkadot/util": "12.6.2",
+    "browser-image-compression": "^2.0.2",
     "ethers": "^6.13.2",
     "libp2p": "^2.1.3",
     "moment": "^2.23.0",
-    "safe-stable-stringify": "^2.4.2"
+    "safe-stable-stringify": "^2.4.2",
+    "sharp": "^0.32.0"
+  },
+  "devDependencies": {
+    "@types/expect": "^24.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/sharp": "^0.32.0"
   }
 }

libs/shared/src/utils.ts

@@ -6,13 +6,56 @@ import {
   encodeAddress,
 } from '@polkadot/util-crypto';
 import moment from 'moment';
+import sharp from 'sharp';
 import {
   CONTEST_FEE_PERCENT,
   PRODUCTION_DOMAIN,
   S3_ASSET_BUCKET_CDN,
   S3_RAW_ASSET_BUCKET_DOMAIN,
 } from './constants';
 
+export const compressImage = async (
+  buffer: Buffer,
+  maxSizeMB = 0.5,
+  maxWidthOrHeight = 1024,
+): Promise<Buffer> => {
+  try {
+    let processedImage = sharp(buffer);
+
+    const metadata = await processedImage.metadata();
+    if (
+      metadata.width &&
+      metadata.height &&
+      (metadata.width > maxWidthOrHeight || metadata.height > maxWidthOrHeight)
+    ) {
+      processedImage = processedImage.resize(
+        maxWidthOrHeight,
+        maxWidthOrHeight,
+        {
+          fit: 'inside',
+          withoutEnlargement: true,
+        },
+      );
+    }
+
+    const compressedBuffer = await processedImage
+      .jpeg({ quality: 80 })
+      .toBuffer();
+
+    if (compressedBuffer.length > maxSizeMB * 1024 * 1024) {
+      const quality = Math.floor(
+        (80 * (maxSizeMB * 1024 * 1024)) / compressedBuffer.length,
+      );
+      return processedImage.jpeg({ quality: Math.max(quality, 40) }).toBuffer();
+    }
+
+    return compressedBuffer;
+  } catch (error) {
+    console.error('Error compressing image:', error);
+    throw error;
+  }
+};
+
 /**
  * Decamelizes a string
  * @param value camelized string
@@ -226,7 +269,7 @@ export function safeTruncateBody(body: string, length: number = 500): string {
 
   // Regular expressions to identify URLs and user mentions
   const urlRegex = /((https?:\/\/|www\.)[^\s]+)$/gi;
-  const mentionRegex = /\[@[^\]]+\]\(\/profile\/id\/\d+\)$/g;
+  const mentionRegex = /\[@[^\]]+]\(\/profile\/id\/\d+\)$/g;
 
   const result = getWordAtIndex(body, length);
   if (!result) return body.substring(0, length);

package.json

@@ -43,6 +43,7 @@
     "resolve": "^1.20.0"
   },
   "dependencies": {
+    "@types/sharp": "^0.32.0",
     "extensionless": "^1.9.6"
   },
   "devDependencies": {
@@ -122,7 +123,7 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "process": "^0.11.10",
     "readline-sync": "^1.4.10",
-    "sharp": "^0.31.2",
+    "sharp": "^0.31.3",
     "source-map-support": "^0.5.21",
     "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.5",
@@ -131,6 +132,7 @@
     "tsc-alias": "^1.8.8",
     "tsconfig-paths": "^4.2.0",
     "tslint": "^5.13.0",
+    "tsx": "^4.7.2",
     "typescript": "^5.0.0",
     "vite": "^5.4.11",
     "vite-bundle-visualizer": "^1.2.1",

packages/commonwealth/client/scripts/utils/ImageCompression.ts

@@ -9,13 +9,13 @@ export async function compressImage(file: File): Promise<File> {
 
     const options = {
       maxSizeMB: 10,
-      maxWidthOrHeight: 1000, // in pixels, due to cloudflare polish limit
-      useWebWorker: true, // allows compression to run in separate thread in browser
+      maxWidthOrHeight: 1000,
+      useWebWorker: true,
     };
 
     return imageCompression(file, options);
   } catch (e) {
     console.error(e);
-    throw new Error(e);
+    throw e;
   }
 }

packages/commonwealth/server/api/external-router.ts

@@ -158,4 +158,4 @@ const oasOptions: trpc.OasOptions = {
 const trpcRouter = trpc.router(api);
 trpc.useOAS(router, trpcRouter, oasOptions);
 
-export { PATH, oasOptions, router, trpcRouter };
+export { oasOptions, PATH, router, trpcRouter };

packages/commonwealth/server/routes/generateImage.ts

@@ -5,6 +5,7 @@ import {
   logger,
 } from '@hicommonwealth/core';
 import { DB } from '@hicommonwealth/model';
+import { compressImage } from '@hicommonwealth/shared';
 import fetch from 'node-fetch';
 import { OpenAI } from 'openai';
 import { v4 as uuidv4 } from 'uuid';
@@ -57,10 +58,10 @@ const generateImage = async (
   let image;
   try {
     const response = await openai.images.generate({
-      model: 'dall-e-2',
       n: 1,
       prompt: description,
-      size: '256x256',
+      model: 'dall-e-3',
+      size: '1024x1024',
       response_format: 'url',
     });
 
@@ -72,10 +73,11 @@ const generateImage = async (
   try {
     const resp = await fetch(image);
     const buffer = await resp.buffer();
+    const compressedBuffer = await compressImage(buffer);
     const { url } = await blobStorage().upload({
       key: `${uuidv4()}.png`,
       bucket: 'assets',
-      content: buffer,
+      content: compressedBuffer,
       contentType: 'image/png',
     });
     return success(res, { imageUrl: url });