AI Image Generator

This is a minimalist web application built with Angular and the Google GenAI SDK, designed to generate images from text prompts. Users can describe the image they wish to create, and the application will utilize Google's imagen-4.0-generate-001 model to bring their vision to life.

✨ Features

• Text-to-Image Generation: Transforms descriptive text prompts into visual images using the advanced imagen-4.0-generate-001 model.
• Dynamic Prompt Input: Users can enter and modify text prompts in a dedicated textarea.
• Loading Indicator: Provides visual feedback to the user while an image is being generated.
• Error Handling: Displays informative error messages for issues like missing API keys or failed image generation.
• Image Display: Shows the generated image prominently on the screen.
• Responsive Design: Built with Tailwind CSS for a clean, modern, and adaptive user interface.

🚀 Tech Stack

• Frontend: Angular (Standalone Components, Signals, Zoneless Change Detection)
• Styling: Tailwind CSS (via CDN)
• AI Integration: Google GenAI SDK (@google/genai)
• Language: TypeScript

🔧 Setup and Installation

This application is designed to run in an applet environment where certain configurations are handled externally.

1. API Key Configuration: The Google GenAI SDK requires an API key. This application expects the API key to be available as an environment variable named API_KEY. CRITICAL: Ensure process.env.API_KEY is properly configured in your execution environment before running the app. The application will not function without it and will display an error message.

   // Example of API key initialization (handled internally by the app)
   const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });

💡 Usage

1. Enter a Prompt: In the provided textarea, type a description of the image you want to generate. For example: "A young man wearing a white tracksuit, standing outdoors with a natural green background."
2. Generate Image: Click the "Generate Image" button.
3. View Result: The application will display a loading spinner. Once the image is generated by the AI model, it will appear below the input area.
4. Error Messages: If there's an issue with the API key or image generation, an error message will be displayed.

Enjoy creating unique images with AI!