Building a Full-Stack AI Image Workshop: Angular Meets Gemini API

Introduction

AI-powered image generation and modification are revolutionizing the digital content landscape. With the advancements in AI, users can create unique images from text prompts or modify existing ones with ease. In this blog, we will explore how I built AI Image Studio App, a web application that leverages Google’s Gemini AI for image processing.

Features of AI Image Studio App

This application enables users to:
✅ Generate AI Images: Create unique images using text prompts.
✅ Modify Existing Images: Edit uploaded images through AI-powered modifications.
✅ Store Images in Cloudinary: Securely save all generated and modified images.
✅ User-Friendly UI: Built with Angular 19 and TailwindCSS for a modern and responsive experience.

Tech Stack

🔹 Frontend: Angular 19, TailwindCSS, RxJS
🔹 Backend: Node.js, Express.js, MongoDB, Cloudinary
🔹 AI Model: Google Gemini AI for image generation and modification

---

Project Structure

The project consists of two main parts:

1️⃣ Frontend (Angular)

📌 Built with Angular 19, it provides a seamless UI for users to interact with the AI image tools.
📌 Uses RxJS for reactive state management and TailwindCSS for styling.
📌 Integrates with the backend API for sending text prompts and images for AI processing.

2️⃣ Backend (Node.js + Express)

📌 Runs an Express.js server that handles API requests.
📌 Uses MongoDB to store image metadata.
📌 Integrates Google Generative AI (Gemini) to generate and modify images.
📌 Stores images in Cloudinary for fast retrieval and sharing.

---

Setting Up the Project

1️⃣ Clone the Repository

git clone https://github.com/manthanank/ai-image-studio-app.git
cd ai-image-studio

2️⃣ Install Frontend Dependencies

npm install

3️⃣ Install Backend Dependencies

cd backend
npm install

4️⃣ Configure Environment Variables

Create a .env file in the backend directory and add the following:

MONGO_URI=your_mongodb_connection_string
GEMINI_API_KEY=your_google_gemini_api_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
PORT=5000

5️⃣ Run the Application

Start the backend server:

cd backend
npm run dev

Start the Angular frontend:

cd ..
npm start

Open http://localhost:4200 in your browser 🎉

---

Key API Endpoints

🚀 POST /api/image/generate → Generates an image from a text prompt.
🚀 POST /api/image/modify → Modifies an uploaded image using AI.
🚀 GET /api/image/all → Retrieves all stored images.

---

Deployment

The application is deployed using Vercel:

• 🌍 Frontend: AI Image Studio App

• 🔗 Backend: AI Image Studio API

---

Conclusion

AI Image Studio App is a powerful tool for AI-driven image generation and editing. Built with Angular and Node.js, it provides an intuitive user experience while leveraging the power of Google Gemini AI.