AI Magic Design

Unlike other AI models that generate static images, this understands every aspect of design from structure and layering to hierarchy, and visual logic, creating fully editable content in seconds.

Comment

🎨 AI Magic Design - Cloud Run Hackathon

Unleash Your Creativity with AI-Powered Layered Designs

AI Magic Design revolutionizes digital design creation by combining Google Cloud Run's serverless power with Gemini AI's intelligence. Unlike traditional AI design tools that generate flat, unchangeable images, we deliver fully layered, editable designs that give creators complete control.

🌟 The Problem We Solve

Current AI design tools have a major limitation: they generate single, flat images. If you want to change one element, you must regenerate everything. For designers, marketers, and content creators, this means:

  • ❌ Lost time regenerating entire designs
  • ❌ No ability to fine-tune specific elements
  • ❌ Can't mix AI generation with manual edits
  • ❌ Professional design tools don't integrate with AI

✨ Our Solution

AI Magic Design bridges this gap with three innovative features:

1. RAG-Powered Design Discovery

  • Leverages Vertex AI Vector Search with 100+ pre-indexed layered designs
  • Uses text embeddings to understand design intent
  • Finds perfect template matches in milliseconds
  • Each design comes with separate, editable layers

2. AI Image Generation & Editing

  • Generate: Create unique images from text using Gemini 2.5 Flash Image
  • Edit: Transform existing images with simple prompts (Future)
  • Integrate: Seamlessly add AI content to your layered canvas

3. Professional Canvas

  • Built on Excalidraw for intuitive editing
  • Full layer control - move, resize, delete individual elements
  • Export to PNG, SVG, or JSON with layers preserved

🏗️ Technical Architecture

Serverless at Heart: Two Cloud Run services working in harmony

Frontend Service (Cloud Run)

  • React 19 + TypeScript + Vite
  • Responsive UI with Tailwind CSS
  • Real-time canvas updates
  • Auto-scales 0-10 instances

Backend Service (Cloud Run)

  • Python Flask API
  • Secure API key management
  • Multiple endpoints:
    • /api/search - Vector search via Vertex AI
    • /api/generate-image - Gemini image generation
    • /api/edit-image - AI-powered image editing
    • /api/designs - Design metadata from Firestore

Data Layer

  • Firestore: 100 design documents with metadata
  • Cloud Storage: Images and layer files
  • Vertex AI Vector Search: Semantic matching engine

🚀 Key Technologies

Google Cloud Services:

  • ✅ Cloud Run (2 services - frontend & backend)
  • ✅ Vertex AI (Vector Search for RAG)
  • ✅ Firestore (NoSQL database)
  • ✅ Cloud Storage (Image storage)

AI Models:

  • ✅ Gemini 2.5 Flash Image (Generation & Editing)
  • ✅ Text Embedding API (Semantic search)

Frontend Stack:

  • React 19, TypeScript, Excalidraw
  • Tailwind CSS, shadcn/ui
  • Vite build system

Backend Stack:

  • Python 3.11, Flask
  • Google GenAI SDK
  • Pillow for image processing

🎯 Real-World Impact

Marketing Teams

Create campaign graphics with editable text layers - perfect for A/B testing across different audiences

Content Creators

Generate unique social media posts and tweak details without starting over

Design Agencies

Rapid prototyping with AI, then polish manually for client presentations

Startups

Professional-quality designs without hiring expensive designers

📊 By The Numbers

  • 100+ professionally designed templates
  • < 2s cold start time on Cloud Run
  • < 500ms average API response
  • 3-5s AI image generation
  • < 100ms vector search queries
  • 99.9% uptime (Cloud Run SLA)

🏆 Cloud Run Hackathon Category: AI Studio

Our project perfectly fits the AI Studio category because:

  1. ✅ Used AI Studio for prototyping: Initial prompt engineering and model testing
  2. ✅ Deployed to Cloud Run: Two production services running on Cloud Run
  3. ✅ Vibe-coded concept: Rapid development from idea to deployment
  4. ✅ Gemini Integration: Core AI functionality powered by Gemini models

💡 Innovation & Creativity

What makes AI Magic Design unique:

  1. First to combine RAG with layered design templates
  2. Live image editing within canvas - no export/import workflow
  3. Keyboard shortcuts - Press 'E' to edit any selected image
  4. True serverless - scales to zero, costs nothing when idle
  5. Production-ready - proper security, error handling, monitoring

🎨 User Experience

The workflow is simple:

  1. Type what you want: "Create a Ramadan greeting card"
  2. Browse 6 matched templates with layers
  3. Click to load on canvas - each element separate
  4. Generate new images with AI Tools
  5. Edit any image by selecting + pressing 'E'
  6. Export in professional formats

🔒 Security & Best Practices

  • API keys stored securely on backend (never exposed to frontend)
  • CORS properly configured
  • Input validation on all endpoints
  • Comprehensive error handling and logging
  • Health check endpoints for monitoring

🎬 What's Next

Future enhancements we're excited about:

  • Multi-language support
  • Team collaboration features
  • Custom model fine-tuning
  • Plugin marketplace
  • Mobile app with offline mode

🙏 Acknowledgments

Built with ❤️ using Google Cloud Run, Gemini AI, Vertex AI, Excalidraw, and the amazing PrismLayersPro dataset from Hugging Face.

Special thanks to the Cloud Run Hackathon organizers for inspiring this project and pushing the boundaries of what's possible with serverless AI applications!

Category: AI Studio
Cloud Run Services: 2 (Frontend + Backend)
AI Models: Gemini 2.5 Flash Image, Text Embedding
Cloud Services: Cloud Run, Vertex AI, Firestore, Cloud Storage

#CloudRunHackathon #AI #Gemini #ServerlessAI

Built With

Share this project:

Updates