imaged/prompt.md

Create a clean, modern web application that allows users to upload an image and get an AI-generated description using the Minimax API.

Requirements:

1. Frontend Interface:

   • Single page application with a clean, centered layout
   • File upload area (drag-and-drop support + click to browse)
   • Image preview after upload
   • "Generate Description" button
   • Loading state while processing
   • Display area for the AI-generated description
   • Option to upload a new image after getting results

2. Technical Implementation:

   • Use vanilla JavaScript, HTML, and CSS (or React if you prefer)
   • Handle image file validation (accept common formats: jpg, png, webp)
   • Convert uploaded image to base64 for API submission
   • Make POST request to Minimax API endpoint
   • Handle API responses and errors gracefully
   • Display clear error messages if something goes wrong

3. Minimax API Integration:

   • Endpoint: https://api.minimax.io/v1/text/chatcompletion_v2
   • Use model: MiniMax-M2
   • Send image as base64 in the messages array
   • Prompt: "Please provide a detailed description of this image in English"
   • Handle API key securely (note: for production, this should be handled server-side)

4. UI/UX Details:

   • Responsive design that works on mobile and desktop
   • Professional color scheme (suggest modern blues/grays)
   • Smooth transitions and loading animations
   • Clear visual feedback for all user actions

5. Error Handling:

   • File size validation (max 5MB recommended)
   • File type validation
   • API error handling with user-friendly messages
   • Network error handling

Please create a complete, production-ready single HTML file with inline CSS and JavaScript that I can immediately use in a browser.