🚀 AI Creative Studio

A modern web application that enhances user prompts and generates images using AI-based workflows. This project demonstrates multi-step AI processing, API integration, and interactive UI design using React.

---

📌 Overview

AI Creative Studio is designed to simulate a real-world AI pipeline:

1. User enters a basic prompt
2. System enhances the prompt into a detailed description
3. Images are generated based on the enhanced prompt
4. Users can also analyze uploaded images (Style Lab)

This showcases how AI tools can be integrated into a seamless frontend experience.

---

✨ Features

• 🧠 Prompt Enhancement

  • Converts simple text into detailed, AI-friendly prompts

• 🎨 Image Generation

  • Generates images dynamically based on user input

• 🖼️ Style Lab

  • Upload an image and extract:
    • Objects
    • Colors
    • Style
    • Description

• ⚡ Real-Time UI Updates

  • Instant rendering using React state management

• 💡 Simple & Clean UI

  • Easy-to-use interface for smooth interaction

---

🛠️ Tech Stack

• Frontend: React.js
• Language: JavaScript (ES6+)
• State Management: React Hooks
• Styling: Inline CSS

---

🔗 API Integration

This project is built to support multiple AI APIs:

• OpenAI API (Prompt enhancement / image generation)
• Google Gemini API
• Placeholder Image APIs (for demo/testing)

«⚠️ Note: For demonstration, fallback image APIs are used. Real AI APIs can be integrated using environment variables.»

---

📂 Project Structure

src/ │── components/ │ ├── WorkflowText.js │ ├── WorkflowImage.js │ │── utils/ │ ├── apiHelpers.js │ │── App.js │── index.js

---

⚙️ Installation & Setup

1. Clone the repository:

git clone https://github.com/your-username/ai-creative-studio.git

2. Navigate to the project folder:

cd ai-creative-studio

3. Install dependencies:

npm install

4. Run the application:

npm start

5. Open in browser:

http://localhost:3000

Demo link: https://drive.google.com/file/d/1z36qPGFn8Ien-xSH9jmLr-tDm3LezoaQ/view?usp=sharing

vercel link: https://ai-creative-studio-seven.vercel.app/

---

🔑 Environment Variables

To integrate real AI APIs, create a ".env" file:

REACT_APP_OPENAI_API_KEY=your_key_here REACT_APP_GEMINI_API_KEY=your_key_here

«⚠️ Never expose your real API keys in public repositories.»

---

🧪 Usage

1. Enter a prompt (e.g., "A lion in jungle")
2. Click Enhance
3. Review the enhanced prompt
4. Click Generate
5. View generated images

---

🚀 Future Enhancements

• Real AI image generation (DALL·E / Stable Diffusion)
• Improved UI/UX design
• Loading indicators
• Image download feature
• Backend integration

---

🎯 Learning Outcomes

• API integration in React
• Async/await handling
• Component-based architecture
• State management using hooks
• Building AI-driven workflows

---

🤝 Contributing

Feel free to fork this repository and enhance the project.

---

📜 License

This project is for educational purposes.

---

👨‍💻 Author

Developed by Manikanta

---

⭐ If you like this project, give it a star!