28 lines
1.5 KiB
Plaintext
28 lines
1.5 KiB
Plaintext
Act as a Senior TypeScript/Next.js Developer.
|
|
|
|
I need a robust client-side image processing utility (an "Image Agent") to optimize user uploads before sending them to an LLM or Supabase.
|
|
|
|
**Task:**
|
|
Create a utility file `src/utils/image-processing.ts`.
|
|
This file should export a function `processImageForAI` that uses the library `browser-image-compression`.
|
|
|
|
**Requirements:**
|
|
1. **Input:** The function takes a raw `File` object (from an HTML input).
|
|
2. **Processing Logic:**
|
|
- Resize the image to a maximum of **1024x1024** pixels (maintain aspect ratio).
|
|
- Convert the image to **WebP** format.
|
|
- Limit the file size to approx **0.4MB**.
|
|
- Enable `useWebWorker: true` to prevent UI freezing.
|
|
3. **Output:** The function must return a Promise that resolves to an object with this interface:
|
|
```typescript
|
|
interface ProcessedImage {
|
|
file: File; // The compressed WebP file (ready for Supabase storage)
|
|
base64: string; // The Base64 string (ready for LLM API calls)
|
|
originalFile: File; // Pass through the original file
|
|
}
|
|
```
|
|
4. **Helper:** Include a helper function to convert the resulting Blob/File to a Base64 string correctly.
|
|
5. **Edge Cases:** Handle errors gracefully (try/catch) and ensure the returned `file` has the correct `.webp` extension and mime type.
|
|
|
|
**Step 1:** Give me the `npm install` command to add the necessary library.
|
|
**Step 2:** Write the complete `src/utils/image-processing.ts` code with proper JSDoc comments. |