faheemonhub/ai-image-gen

An innovative FREE to use web application that harnesses the power of Proxy Based Proxy-DALL-E 3 to transform your text prompts into visually stunning, AI-generated images. Share your creations with a vibrant community of artists and enthusiasts.

AI Image Generator

An innovative web application that harnesses the power of Proxy Based Proxy-DALL-E 3 to transform your text prompts into visually stunning, AI-generated images. Share your creations with a vibrant community of artists and enthusiasts.

🌟 Features

• AI-Powered Image Generation: Use Proxy-DALL-E 3 model to turn your text descriptions into unique, high-quality images.
• Community Showcase: Share your AI-generated masterpieces and explore an ever-growing gallery of community creations.
• Intuitive UI: A clean, user-friendly interface built with React and styled with Tailwind CSS.
• Quick Search: Easily find images by searching through prompts or artist names.
• "Surprise Me" Option: Stuck for ideas? Let us generate a random prompt for you!

🚀 Tech Stack

Frontend

• React: For building a dynamic and responsive user interface.
• React Router: Enabling smooth, client-side navigation.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Fetch API: Making asynchronous requests to our backend.

Backend

• Node.js & Express: Fast, unopinionated backend.
• MongoDB & Mongoose: Flexible, schema-based solution for data modeling.
• Cloudinary: Cloud-based image management.
• dotenv: For secure environment variable management.

AI & External Services

• Proxy-DALL-E 3 API: state-of-the-art image generation model.
• Proxy Proxy-DALL-E API: A custom proxy to interface with service.

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/yourusername/ai-image-generator.git
   cd ai-image-generator
   

2. Install dependencies:

   # Frontend
   cd frontend
   npm install
   
   # Backend
   cd ../backend
   npm install
   

3. Set up environment variables:

   • Create a .env file in the backend directory.
   • Add the following:

     OPENAI_API_KEY=your_openai_api_key
     PROXY_URL=your_proxy_url
     MONGODB_URL=your_mongodb_url
     CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
     CLOUDINARY_API_KEY=your_cloudinary_api_key
     CLOUDINARY_API_SECRET=your_cloudinary_api_secret
     

4. Run the application:

   # Backend
   npm start
   
   # Frontend (in a new terminal)
   cd ../frontend
   npm run dev
   

5. Open http://localhost:3000 in your browser.

📸 How It Works

1. Generate an Image:

   • Navigate to "Create Post".
   • Enter your name and a descriptive prompt.
   • Click "Generate Image" or try "Surprise Me" for a random prompt.
   • Watch as Proxy-DALL-E brings your idea to life!

2. Share Your Creation:

   • Happy with your image? Click "Share Post".
   • Your artwork is uploaded to Cloudinary and added to our MongoDB database.
   • It's now part of our community showcase!

3. Explore & Get Inspired:

   • Visit the home page to see all community posts.
   • Use the search bar to find specific themes or artists.
   • Let the creativity of others spark your next idea!

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for more information.

🙏 Acknowledgements

• Cloudinary for seamless image hosting.
• MongoDB for flexible data storage.
• React and Tailwind CSS for making frontend development a joy.

📞 Contact

FAHEEM MUSHTAQ - twitterhandle

---

Happy generating! 🎨🤖 Turn your words into art with our AI Image Generator.

Note: You should replace placeholders like yourusername, your_openai_api_key, and other personal or sensitive information with your actual details. Also, add your project logo and any screenshots that showcase your application's UI and generated images to make the README more visually appealing.

ai-image-gen's Issues

Enhance UX with Timed Progress Indicator for Image Generation

Currently, when a user clicks the "Generate Image" button, the application displays a simple loader animation. This provides feedback that the process has started, but it doesn't give users any sense of progress or estimated completion time. For tasks that can take a variable amount of time, such as AI-based image generation, providing more informative progress feedback can significantly improve user experience by setting expectations and reducing uncertainty.
Proposed Enhancement
Implement a timed progress indicator that runs from 0% to 100% over a maximum duration of one minute when generating an image. This will provide users with a visual and quantitative sense of progress, making the waiting experience more engaging and less frustrating.
Key Features:

Timed Progress Bar: Replace the current loader with a progress bar that advances from 0% to 100% over 60 seconds.

Adaptive Behavior:

If the image is generated before one minute elapses, stop and hide the progress bar.
If generation takes longer than a minute, keep the bar at 100% with a "Finalizing..." message.

Visual and Textual Feedback:

Show percentage (e.g., "35%") alongside the bar.
Display status messages like "Interpreting prompt...", "Generating concepts...", "Refining details...".

Benefits:

Better User Experience: Users feel more in control when they can see progress.
Reduced Perceived Wait Time: Visual progress makes waiting feel shorter.
Set Expectations: A one-minute max sets a clear expectation, even if it sometimes overshoots.
Educational: Status messages teach users about the AI's process.

Incorporate additional image generation models such as Stable Diffusion or Hyper-SD

Incorporation of additional models to use would be beneficial for the end user and also the integration of HuggingFace models into the project, if required the client side or an extension to it could be added that can do the processing task on a local in-prem machine with open source text-to-image generation models as mentioned in the Title above.

Implement Server-Side Pagination and Lazy Loading

Summary
Our application's home page, which showcases community-generated images, is experiencing performance issues as our user base grows. Currently, we fetch and display all images at once, resulting in slow page loads, high memory usage, and a poor user experience, especially on mobile devices. We need to implement server-side pagination and lazy loading to optimize performance and scalability.

Expected Behavior

Initial load shows only the first batch (e.g., 20) of most recent images.
A "Load More" button or infinite scroll fetches the next batch.
Images are lazy-loaded as they enter the viewport.
Server response times stay under 2 seconds, even at 100k+ images.
No out-of-memory errors or app crashes on any device.