fix: auto size issue

README.md

@@ -7,10 +7,8 @@
 - Prompt supports Chinese and English (Chinese will automatically call `AI` translation)
 - `API` provided by `CloudflareAI` and `HuggingFace`
 
-## TODO
-
-- [ ] Implement `Image-to-text` feature
-- [ ] Add preview images to `README.md`
+| ![](./readme/2.png) | ![](./readme/1.png) | ![](./readme/3.png) |
+| :---: | :---: | :---: |
 
 ## Usage
 

app/api/prompt/route.ts

@@ -4,7 +4,7 @@ export async function POST(req: Request): Promise<Response> {
     const url = `https://api.cloudflare.com/client/v4/accounts/${process.env.CF_USER_ID}/ai/run/@cf/unum/uform-gen2-qwen-500m`
     const body = {
       image: image as number[],
-      max_tokens: 2048,
+      max_tokens: 4096,
       prompt: 'Generate a detailed description in a single paragraph for this image',
     }
     const response = await fetch(url, {

app/components/Prompt.tsx

@@ -87,10 +87,11 @@ export default function Prompt() {
         showUploadList={false}
         accept='.jpg,.jpeg,.png'
         beforeUpload={async (file) => {
+          const MAX_SIZE_MB = 2
           try {
             flushSync(() => setDisabled(true))
-            if (file.size > 2 * 1024 * 1024) {
-              alert('Image size should be less than 2MB')
+            if (file.size > MAX_SIZE_MB * 1024 * 1024) {
+              alert(`Image size should be less than ${MAX_SIZE_MB}MB`)
               return false
             }
             const uint8array = new Uint8Array(await file.arrayBuffer())

app/lib/useImageSize.tsx

@@ -6,9 +6,8 @@ export function useImageSize(containerID: string): number {
     return Math.min(container?.clientWidth || 0, container?.clientHeight || 0) - 48
   }
   const subSize = (callback: () => void) => {
-    const container = document.getElementById(containerID)
-    container?.addEventListener('resize', callback)
-    return () => container?.removeEventListener('resize', callback)
+    window.addEventListener('resize', callback)
+    return () => window.removeEventListener('resize', callback)
   }
   return useSyncExternalStore(subSize, getSize, () => 0)
 }