https://github.com/hrranger5/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.
https://github.com/hrranger5/ai-image-generator
angular css googlegenaisdk tailwind typescript
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/hrranger5/ai-image-generator
- Owner: hrranger5
- Created: 2025-10-27T07:06:26.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-27T07:16:40.000Z (8 months ago)
- Last Synced: 2025-10-27T09:11:17.873Z (8 months ago)
- Topics: angular, css, googlegenaisdk, tailwind, typescript
- Language: HTML
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
```typescript
// 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!