44 lines
1.7 KiB
Markdown
44 lines
1.7 KiB
Markdown
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.
|
|
|
|
|