AI Image Transformer

A modern web application that allows users to upload images and transform them using OpenAI's image editing API. Users can provide text prompts to describe how they want their images to be modified.

Features

• 🖼️ Drag & Drop Image Upload: Easy image upload with drag and drop support
• ✨ Text Prompt Transformation: Describe how you want to transform your image
• 🔒 Secure API Key Storage: Your OpenAI API key is stored locally in your browser
• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• 🎨 Modern UI: Beautiful, intuitive interface with smooth animations
• 💾 Download Results: Download your transformed images directly
• ⚡ Real-time Validation: Form validation ensures all required fields are filled

Setup

1. Clone or download this repository to your local machine

2. Get an OpenAI API Key:

   • Visit OpenAI's website
   • Sign up or log in to your account
   • Navigate to the API section
   • Generate a new API key
   • Important: Make sure your account has access to the image editing API

3. Open the application:

   • Simply open index.html in your web browser
   • Or serve the files using a local web server

Usage

1. Upload an Image:

   • Click the upload area or drag and drop an image file
   • Supported formats: JPG, PNG, GIF, WebP
   • Maximum file size: 10MB

2. Enter Your Prompt:

   • Describe how you want to transform the image
   • Be specific and detailed for better results
   • Examples:
     • "Add a sunset background"
     • "Make it look like a watercolor painting"
     • "Add snow to the scene"
     • "Change the background to a forest"

3. Add Your API Key:

   • Enter your OpenAI API key in the designated field
   • Your key will be saved locally for future use

4. Transform:

   • Click the "Transform Image" button
   • Wait for the AI to process your request
   • View and download your transformed image

Important Notes

API Requirements

• Image Size: Images are automatically resized to meet OpenAI's requirements (max 1024x1024 pixels)
• Format: Images are converted to PNG format before processing
• API Endpoint: Uses OpenAI's /v1/images/edits endpoint

API Key Security

• Your API key is stored locally in your browser's localStorage
• It is never sent to any external servers except OpenAI
• You can clear it anytime by emptying the API key field

Costs

• OpenAI charges for image editing API usage
• Check OpenAI's pricing page for current rates
• Monitor your usage in your OpenAI dashboard

Technical Details

File Structure

├── index.html          # Main HTML file
├── styles.css          # CSS styles and responsive design
├── script.js           # JavaScript functionality
└── README.md           # This file

Technologies Used

• HTML5: Semantic markup and modern features
• CSS3: Flexbox, Grid, animations, and responsive design
• JavaScript (ES6+): Modern JavaScript with async/await
• OpenAI API: Image editing endpoint
• Canvas API: Image processing and resizing

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Troubleshooting

Common Issues

1. "Error calling OpenAI API":

   • Check if your API key is correct
   • Ensure your OpenAI account has access to image editing
   • Verify you have sufficient credits in your account

2. "Image file size must be less than 10MB":

   • Compress your image or use a smaller file
   • Convert to a more efficient format (PNG → JPG)

3. "Please select a valid image file":

   • Make sure you're uploading an image file (JPG, PNG, GIF, WebP)
   • Try a different image file

4. Transform button is disabled:

   • Ensure you have uploaded an image
   • Fill in the prompt field
   • Enter your OpenAI API key

Getting Help

If you encounter issues:

1. Check the browser console for error messages
2. Verify your OpenAI API key and account status
3. Ensure you have a stable internet connection
4. Try refreshing the page and starting over

Privacy & Security

• No Server: This application runs entirely in your browser
• Local Storage: Your API key is stored locally, not on any server
• Direct API Calls: All API calls go directly from your browser to OpenAI
• No Data Collection: We don't collect or store any of your data

License

This project is open source and available under the MIT License.

Contributing

Feel free to submit issues, feature requests, or pull requests to improve this application.

---

Note: This application requires an OpenAI API key and may incur charges based on your usage. Please review OpenAI's pricing and terms of service before use.