Initial commit - MVP project setup
Created by AI Dev Factory init-mvp-project.sh
This commit is contained in:
AI Dev Factory
commit
cf33cc08c1
|
|
@ -0,0 +1,31 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
*.pyo
|
||||
*.pyd
|
||||
.Python
|
||||
venv/
|
||||
.venv/
|
||||
env/
|
||||
.env
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Build
|
||||
dist/
|
||||
build/
|
||||
*.egg-info/
|
||||
|
||||
# Test
|
||||
.coverage
|
||||
.pytest_cache/
|
||||
*.log
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
# Image Description AI - System Architecture
|
||||
|
||||
## High-Level System Design
|
||||
|
||||
The Image Description AI is a client-side single-page application (SPA) that enables users to upload images and receive AI-generated descriptions using the Minimax API. The architecture follows a modern, responsive web application pattern with clean separation of concerns.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Client-Side Application │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
||||
│ │ Upload │ │ Preview │ │ AI Description │ │
|
||||
│ │ Component │ │ Component │ │ Display │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Application State │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
||||
│ │ File │ │ Image │ │ API Response │ │
|
||||
│ │ Validation │ │ Processing │ │ Handler │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Minimax API │
|
||||
│ https://api.minimax.io/v1/text/chatcompletion_v2 │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Technology Choices and Rationale
|
||||
|
||||
### Core Technologies
|
||||
- **HTML5**: Semantic markup for accessibility and modern web standards
|
||||
- **CSS3**: Modern styling with Flexbox/Grid for responsive layouts
|
||||
- **Vanilla JavaScript**: Lightweight, no framework overhead, fast loading
|
||||
- **File API**: Native browser API for file handling and validation
|
||||
|
||||
### UI Framework Decision: Vanilla JavaScript vs React
|
||||
**Chosen: Vanilla JavaScript**
|
||||
- **Rationale**:
|
||||
- Single HTML file requirement simplifies deployment
|
||||
- Minimal bundle size improves load times
|
||||
- No build process needed
|
||||
- Direct DOM manipulation gives precise control
|
||||
- Sufficient for the application's complexity level
|
||||
|
||||
### Styling Approach
|
||||
- **CSS Grid & Flexbox**: Modern, flexible layouts
|
||||
- **CSS Custom Properties**: Maintainable theming
|
||||
- **Mobile-First Responsive Design**: Works across all device sizes
|
||||
- **CSS Animations**: Smooth transitions and loading states
|
||||
|
||||
## Database Schema
|
||||
|
||||
**Not Applicable**: This is a client-side only application with no persistent data storage. All processing is transient and happens in memory.
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### External API Integration
|
||||
|
||||
**Endpoint**: `https://api.minimax.io/v1/text/chatcompletion_v2`
|
||||
- **Method**: POST
|
||||
- **Authentication**: Bearer token (API key)
|
||||
- **Content-Type**: application/json
|
||||
|
||||
**Request Structure**:
|
||||
```json
|
||||
{
|
||||
"model": "MiniMax-M2",
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please provide a detailed description of this image in English"
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"max_tokens": 500,
|
||||
"temperature": 0.7
|
||||
}
|
||||
```
|
||||
|
||||
**Response Structure**:
|
||||
```json
|
||||
{
|
||||
"id": "chatcmpl-abc123",
|
||||
"object": "chat.completion",
|
||||
"created": 1677652288,
|
||||
"model": "MiniMax-M2",
|
||||
"choices": [
|
||||
{
|
||||
"index": 0,
|
||||
"message": {
|
||||
"role": "assistant",
|
||||
"content": "This image shows a beautiful sunset over..."
|
||||
},
|
||||
"finish_reason": "stop"
|
||||
}
|
||||
],
|
||||
"usage": {
|
||||
"prompt_tokens": 15,
|
||||
"completion_tokens": 32,
|
||||
"total_tokens": 47
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
image-description-ai/
|
||||
├── index.html # Main application file (self-contained)
|
||||
├── assets/
|
||||
│ ├── styles/
|
||||
│ │ └── main.css # (Optional separate CSS file)
|
||||
│ └── scripts/
|
||||
│ └── main.js # (Optional separate JS file)
|
||||
├── README.md # Project documentation
|
||||
└── docs/
|
||||
├── ARCHITECTURE.md # This file
|
||||
└── TASKS.md # Implementation tasks
|
||||
```
|
||||
|
||||
### Single File Implementation
|
||||
For production deployment as specified, the complete application exists in one HTML file:
|
||||
- `index.html` - Contains all HTML, CSS, and JavaScript inline
|
||||
- No external dependencies or build process required
|
||||
- Immediate browser deployment ready
|
||||
|
||||
## Component Interactions
|
||||
|
||||
### 1. File Upload Flow
|
||||
```
|
||||
User Input → File Selection → Validation → Preview Display
|
||||
↓ ↓ ↓ ↓
|
||||
Drag&Drop → File API → Size/Type Check → Image Preview
|
||||
Click → Reader → Convert to → Update UI
|
||||
→ Base64 → Base64 → State Update
|
||||
```
|
||||
|
||||
### 2. AI Processing Flow
|
||||
```
|
||||
Generate Click → API Request → Loading State → Response Handling
|
||||
↓ ↓ ↓ ↓
|
||||
Validate → Construct → Show Spinner → Display Result
|
||||
Image → Payload → Disable UI → Handle Errors
|
||||
↓ ↓ ↓ ↓
|
||||
State Check → Send POST → Timeout → Success/Failure
|
||||
→ Minimax API → Management → UI Update
|
||||
```
|
||||
|
||||
### 3. Error Handling Flow
|
||||
```
|
||||
Any Error → Error Handler → User Notification → Recovery Option
|
||||
↓ ↓ ↓ ↓
|
||||
Network → Categorize → Clear Message → Reset/Retry
|
||||
API → Error Type → Visual Alert → State Reset
|
||||
File → Log Details → Action Required → User Guidance
|
||||
Validation → Store State → UX Feedback → Continue Flow
|
||||
```
|
||||
|
||||
## Data Flow Architecture
|
||||
|
||||
### Application State Management
|
||||
```javascript
|
||||
appState = {
|
||||
currentImage: {
|
||||
file: File | null,
|
||||
base64: string | null,
|
||||
preview: string | null,
|
||||
metadata: {
|
||||
name: string,
|
||||
size: number,
|
||||
type: string
|
||||
}
|
||||
},
|
||||
apiStatus: {
|
||||
isProcessing: boolean,
|
||||
lastError: string | null,
|
||||
requestId: string | null
|
||||
},
|
||||
ui: {
|
||||
dragOver: boolean,
|
||||
showPreview: boolean,
|
||||
showResults: boolean
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Event-Driven Architecture
|
||||
- **File Input Events**: Handle drag&drop, click-to-browse, file selection
|
||||
- **Validation Events**: File size, type, and format checking
|
||||
- **API Events**: Request initiation, response handling, error management
|
||||
- **UI Events**: Loading states, animations, user feedback
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Client-Side Security
|
||||
- **Input Validation**: Strict file type and size checking
|
||||
- **XSS Prevention**: Sanitized content display
|
||||
- **API Key Management**: Client-side exposure (note: production should use server-side proxy)
|
||||
- **HTTPS Only**: Secure transmission to Minimax API
|
||||
|
||||
### Production Recommendations
|
||||
1. **Server-Side API Proxy**: Move API calls to backend to hide API keys
|
||||
2. **Rate Limiting**: Prevent API abuse
|
||||
3. **File Scanning**: Server-side malware detection
|
||||
4. **Content Security Policy**: Additional XSS protection
|
||||
|
||||
## Performance Optimizations
|
||||
|
||||
### Client-Side Optimizations
|
||||
- **Lazy Loading**: Load UI components on demand
|
||||
- **Debounced Validation**: Reduce unnecessary processing
|
||||
- **Memory Management**: Clean up base64 strings after use
|
||||
- **Progressive Enhancement**: Core functionality works without JavaScript
|
||||
|
||||
### API Optimizations
|
||||
- **Request Compression**: Minimize payload size
|
||||
- **Timeout Management**: Prevent hanging requests
|
||||
- **Retry Logic**: Handle transient network failures
|
||||
- **Caching**: Avoid duplicate API calls for same images
|
||||
|
||||
## Scalability Considerations
|
||||
|
||||
### Current Architecture Limits
|
||||
- **Client-Only Processing**: Limited by user's device capabilities
|
||||
- **File Size Constraints**: 5MB limit for practical performance
|
||||
- **API Rate Limits**: Dependent on Minimax service limits
|
||||
|
||||
### Future Enhancements
|
||||
- **Backend Integration**: Server-side processing and API management
|
||||
- **Batch Processing**: Multiple image handling
|
||||
- **User Accounts**: Save and manage image descriptions
|
||||
- **Advanced Features**: Multiple language support, custom prompts
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
### Supported Features
|
||||
- **File API**: Modern browsers (IE10+, all modern browsers)
|
||||
- **Base64 Encoding**: Universal browser support
|
||||
- **CSS Grid/Flexbox**: IE11+, all modern browsers
|
||||
- **Fetch API**: IE11+, all modern browsers (polyfill available)
|
||||
|
||||
### Fallback Strategies
|
||||
- **Older Browsers**: Graceful degradation with polyfills
|
||||
- **No JavaScript**: Basic form submission (limited functionality)
|
||||
- **Network Issues**: Offline mode with queued requests
|
||||
|
||||
## Deployment Architecture
|
||||
|
||||
### Static File Deployment
|
||||
- **CDN Ready**: Single HTML file suitable for any CDN
|
||||
- **Zero Dependencies**: No npm packages or build process
|
||||
- **Instant Deployment**: Upload and serve immediately
|
||||
- **Version Control**: Simple Git-based version management
|
||||
|
||||
### Environment Configuration
|
||||
- **Development**: Direct API calls with test keys
|
||||
- **Staging**: Mirror production with environment-specific settings
|
||||
- **Production**: Server-side API proxy recommended for security
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
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.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
# Image Description AI - Implementation Tasks
|
||||
|
||||
## Task 1: Create Basic HTML Structure and Styling Foundation
|
||||
**Objective**: Establish the foundational HTML structure with semantic markup and responsive CSS framework
|
||||
**Deliverables**:
|
||||
- Complete HTML skeleton with proper DOCTYPE and meta tags
|
||||
- Responsive CSS Grid layout system for the main application container
|
||||
- Modern color scheme implementation (blues/grays as specified)
|
||||
- Typography system with readable fonts and proper spacing
|
||||
- Mobile-first responsive breakpoints
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] HTML validates as HTML5 standard
|
||||
- [ ] Layout is responsive across mobile (320px+), tablet (768px+), and desktop (1024px+)
|
||||
- [ ] Color scheme uses professional blue/gray palette with proper contrast ratios
|
||||
- [ ] Typography is legible across all device sizes
|
||||
- [ ] Basic layout structure includes: header, main upload area, preview section, results section
|
||||
- [ ] CSS is modular with clear section organization (layout, components, utilities)
|
||||
|
||||
## Task 2: Implement File Upload Interface with Drag & Drop
|
||||
**Objective**: Create an intuitive file upload interface supporting both drag-and-drop and click-to-browse functionality
|
||||
**Deliverables**:
|
||||
- Drag-and-drop zone with visual feedback states (drag over, drop, default)
|
||||
- Hidden file input element for click-to-browse functionality
|
||||
- Visual upload area with icon, instructional text, and file format specifications
|
||||
- File type icon display for different image formats
|
||||
- Hover and focus states for accessibility
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Drag-and-drop zone visually responds to drag events with proper styling
|
||||
- [ ] Click-to-browse opens file dialog and triggers file selection
|
||||
- [ ] Upload area shows clear instructions: "Drag an image here or click to browse"
|
||||
- [ ] Supported formats are displayed: JPG, PNG, WebP
|
||||
- [ ] Accessibility: Keyboard navigation and screen reader support
|
||||
- [ ] Visual feedback on hover/focus with smooth transitions
|
||||
|
||||
## Task 3: Add File Validation and Error Handling System
|
||||
**Objective**: Implement comprehensive file validation to ensure only valid images are processed
|
||||
**Deliverables**:
|
||||
- File type validation (accept only jpg, jpeg, png, webp)
|
||||
- File size validation (maximum 5MB with user-friendly error messages)
|
||||
- Validation feedback system with clear error messages
|
||||
- File metadata extraction (name, size, type)
|
||||
- Reset functionality to clear errors and start over
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Invalid file types show error: "Please select a valid image file (JPG, PNG, WebP)"
|
||||
- [ ] Files over 5MB show error: "File size must be less than 5MB"
|
||||
- [ ] Error messages display in red text below upload area
|
||||
- [ ] Successful validation clears previous errors
|
||||
- [ ] Validation occurs immediately upon file selection
|
||||
- [ ] Files with valid extensions but invalid content are caught
|
||||
- [ ] Reset button clears all errors and upload area state
|
||||
|
||||
## Task 4: Implement Image Preview Functionality
|
||||
**Objective**: Display uploaded image with proper sizing and formatting for user confirmation
|
||||
**Deliverables**:
|
||||
- Image preview container with proper aspect ratio handling
|
||||
- Image resizing and optimization for preview (max 400px width/height)
|
||||
- Base64 encoding of the selected image for API submission
|
||||
- Metadata display (filename, file size, dimensions)
|
||||
- Replace/change image functionality
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Image preview displays within 2 seconds of file selection
|
||||
- [ ] Preview maintains aspect ratio without distortion
|
||||
- [ ] Large images are scaled appropriately for preview
|
||||
- [ ] Base64 encoding completes successfully and is stored in memory
|
||||
- [ ] Image metadata is extracted and displayed (filename, size in MB, dimensions)
|
||||
- [ ] "Change Image" button allows uploading a different file
|
||||
- [ ] Preview clears when starting over
|
||||
|
||||
## Task 5: Integrate Minimax API for Image Description Generation
|
||||
**Objective**: Connect to Minimax API and implement the core AI description generation functionality
|
||||
**Deliverables**:
|
||||
- API request construction with proper payload format
|
||||
- Base64 image embedding in the request body
|
||||
- Proper error handling for network issues and API responses
|
||||
- Response parsing and extraction of the AI-generated description
|
||||
- API key management (client-side with security notes)
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] API request uses correct endpoint: `https://api.minimax.io/v1/text/chatcompletion_v2`
|
||||
- [ ] Request payload includes model: "MiniMax-M2"
|
||||
- [ ] Base64 image is properly formatted in the messages array
|
||||
- [ ] Prompt "Please provide a detailed description of this image in English" is included
|
||||
- [ ] Successful API response extracts the description text
|
||||
- [ ] API errors are handled gracefully with user-friendly messages
|
||||
- [ ] Network timeouts are handled with appropriate error messaging
|
||||
- [ ] Loading state is shown during API calls
|
||||
|
||||
## Task 6: Create Loading States and User Feedback System
|
||||
**Objective**: Implement comprehensive loading and feedback mechanisms to enhance user experience
|
||||
**Deliverables**:
|
||||
- Loading spinner and progress indicator during API calls
|
||||
- Status messages for different processing stages
|
||||
- Button state management (disabled during processing)
|
||||
- Timeout handling with user notification
|
||||
- Success and error state animations
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Loading spinner appears immediately when "Generate Description" is clicked
|
||||
- [ ] "Generate Description" button is disabled during processing to prevent duplicate requests
|
||||
- [ ] Status message shows: "Analyzing image with AI..."
|
||||
- [ ] Processing timeout (30 seconds) shows: "Processing is taking longer than expected"
|
||||
- [ ] Success animation plays when description is generated
|
||||
- [ ] Error state shows appropriate error message with red styling
|
||||
- [ ] Loading states have smooth transitions and professional appearance
|
||||
|
||||
## Task 7: Display AI Description Results with Formatting
|
||||
**Objective**: Present the AI-generated description in a clean, readable format with additional functionality
|
||||
**Deliverables**:
|
||||
- Results display area with proper typography and spacing
|
||||
- Text formatting and paragraph handling for long descriptions
|
||||
- Option to copy description to clipboard
|
||||
- "Generate New Description" functionality for the same image
|
||||
- "Upload New Image" reset functionality
|
||||
- Responsive results layout
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Description displays in a readable format with proper line breaks
|
||||
- [ ] Long descriptions are scrollable if they exceed viewport
|
||||
- [ ] "Copy to Clipboard" button works and shows confirmation
|
||||
- [ ] "Generate New Description" button triggers new API call
|
||||
- [ ] "Upload New Image" button clears all data and returns to upload state
|
||||
- [ ] Results area is visually distinct from upload area
|
||||
- [ ] Typography is large enough to read comfortably on mobile devices
|
||||
|
||||
## Task 8: Final Polish, Testing, and Production Readiness
|
||||
**Objective**: Complete final testing, optimizations, and prepare for immediate browser deployment
|
||||
**Deliverables**:
|
||||
- Comprehensive error handling for all edge cases
|
||||
- Performance optimization for large images and slow networks
|
||||
- Cross-browser compatibility testing
|
||||
- Accessibility improvements (ARIA labels, keyboard navigation)
|
||||
- Final code organization and documentation
|
||||
- Single HTML file consolidation with inline CSS and JavaScript
|
||||
|
||||
**Acceptance Criteria**:
|
||||
- [ ] Application works in Chrome, Firefox, Safari, and Edge
|
||||
- [ ] All functionality works on mobile devices (iOS and Android)
|
||||
- [ ] Images up to 5MB process within 30 seconds on average connections
|
||||
- [ ] Clear error messages for all failure scenarios (network, API, validation)
|
||||
- [ ] Complete keyboard navigation support
|
||||
- [ ] ARIA labels and semantic HTML for screen readers
|
||||
- [ ] No console errors or warnings
|
||||
- [ ] Single HTML file contains all code and loads immediately in any modern browser
|
||||
- [ ] Professional appearance with smooth animations and transitions
|
||||
- [ ] File size under 50KB for fast loading
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### Task Dependencies
|
||||
- Tasks 1-2 can be implemented in parallel
|
||||
- Task 3 depends on Task 2 (validation needs upload interface)
|
||||
- Task 4 depends on Task 3 (preview needs validation)
|
||||
- Task 5 depends on Task 4 (API needs base64 image)
|
||||
- Task 6 depends on Task 5 (loading states during API calls)
|
||||
- Task 7 depends on Task 6 (results display after processing)
|
||||
- Task 8 depends on all previous tasks (final testing and polish)
|
||||
|
||||
### Technical Considerations
|
||||
- Use vanilla JavaScript ES6+ features for modern browser support
|
||||
- Implement CSS custom properties for maintainable theming
|
||||
- Follow progressive enhancement principles
|
||||
- Maintain separation of concerns within the single file
|
||||
- Include comprehensive error boundaries
|
||||
|
||||
### Testing Approach
|
||||
- Test with various image sizes and formats
|
||||
- Test error scenarios (large files, invalid types, network issues)
|
||||
- Verify responsive behavior across devices
|
||||
- Validate accessibility with screen readers
|
||||
- Performance test with slow network connections
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
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.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue