StudioShot AI

Mikael A — Mon, 10 Nov 2025 23:59:29 +0000

Building StudioShot AI: Transforming Product Photography with Gemini and Cloud Run

The $2000 Problem

Imagine you're a small business owner who just launched a handcrafted jewelry line. You've spent months perfecting your products, but when it comes time to sell online, you face a harsh reality: your iPhone photos look amateurish next to competitors with professional studio shots.

The quote from a professional photographer? $2,000 for a single product shoot.

This is the problem I set out to solve with StudioShot AI - an AI-powered platform that transforms basic product photos into professional studio-quality images in seconds, not days.

Disclosure: I created this blog post for the purposes of entering the Cloud Run Hackathon.

The Birth of an Idea

As someone who has worked with small businesses, I've seen this pattern repeatedly: great products held back by poor visual presentation. The options were limited - either pay thousands for professional photography or settle for mediocre images that hurt conversion rates.

But what if AI could bridge this gap? With Google's new Gemini models and their impressive multi-modal capabilities, I realized this was finally possible. And thus, StudioShot AI was born.

Live Demo: https://studioshot-ai-760988867361.us-west1.run.app/

The Tech Stack: Why These Choices Matter

Frontend: React 19 + TypeScript + Vite

I chose React 19 for its concurrent features and improved performance. Combined with TypeScript for type safety and Vite for lightning-fast development, I could iterate quickly while maintaining code quality.

// Type-safe state management for complex workflows
interface GalleryItem {
  id: string;
  src: string;
  prompt: string;
  type: 'edited' | 'generated';
  originalSrc?: string;
}

The AI Powerhouse: Three Gemini Models

Here's where it gets interesting. Instead of using a single AI model, I leveraged three different Google AI models, each optimized for specific tasks:

Gemini 2.5 Pro - Image analysis and prompt generation
Gemini 2.5 Flash Image - Fast image-to-image editing
Imagen 4.0 - High-quality text-to-image generation

Why three models? Because specialized tools beat generalists every time.

The Architecture: How It All Fits Together

The flow is elegant:

User Upload → Gemini 2.5 Pro (Analysis) → AI Suggestions
     ↓
User Selects Prompt → Gemini Flash Image (Transform) → Result
     ↓
Save to Gallery (LocalStorage) → Download/Share

For generation from scratch:

User Prompt → Imagen 4.0 (Generate) → Result
     ↓
Refine → Gemini Flash Image (Edit) → Improved Result

The Code: Where Magic Happens

Let me walk you through the key implementation details.

Image Analysis with Gemini 2.5 Pro

When a user uploads an image, I need to understand what's in it and suggest relevant transformations. Gemini 2.5 Pro excels at this:

export const analyzeImage = async (imageDataUrl: string): Promise<string[]> => {
  const { base64Data, mimeType } = dataUrlToBlobParts(imageDataUrl);

  const response = await ai.models.generateContent({
    model: 'gemini-2.5-pro',
    contents: {
      parts: [
        {
          inlineData: {
            mimeType: mimeType,
            data: base64Data,
          },
        },
        {
          text: `Analyze this product photo. Suggest 4 detailed, distinct 
                 prompts to transform it into a professional studio-quality 
                 image. Focus on specific styles like 'minimalist', 
                 'cinematic', 'e-commerce white background', and 
                 'dramatic lighting'.`,
        },
      ],
    },
    config: {
      responseMimeType: 'application/json',
      responseSchema: {
        type: Type.ARRAY,
        items: {
          type: Type.STRING,
          description: "A detailed prompt for image transformation."
        }
      }
    }
  });

  return JSON.parse(response.text.trim());
};

The beauty here is the structured JSON output. Instead of parsing free text, Gemini returns a clean array of suggestions I can immediately use in the UI.

Image Transformation with Gemini 2.5 Flash Image

Once the user selects (or customizes) a prompt, the transformation happens:

export const editImage = async (
  imageDataUrl: string, 
  prompt: string
): Promise<string> => {
  const { base64Data, mimeType } = dataUrlToBlobParts(imageDataUrl);

  const response = await ai.models.generateContent({
    model: 'gemini-2.5-flash-image',
    contents: {
      parts: [
        {
          inlineData: {
            data: base64Data,
            mimeType: mimeType,
          },
        },
        { text: prompt },
      ],
    },
    config: {
      responseModalities: [Modality.IMAGE],
    },
  });

  // Extract the generated image
  for (const part of response.candidates[0].content.parts) {
    if (part.inlineData) {
      const editedBase64 = part.inlineData.data;
      const editedMimeType = part.inlineData.mimeType;
      return `data:${editedMimeType};base64,${editedBase64}`;
    }
  }

  throw new Error("No image was generated by the model.");
};

Gemini 2.5 Flash Image is blazingly fast - typically returning results in 2-5 seconds. This speed is crucial for the iterative refinement feature, where users might make 5-10 adjustments before getting the perfect result.

Text-to-Image with Imagen 4.0

For the "Generate from Scratch" feature, I used Imagen 4.0:

export const generateImage = async (prompt: string): Promise<string> => {
  const response = await ai.models.generateImages({
    model: 'imagen-4.0-generate-001',
    prompt: prompt,
    config: {
      numberOfImages: 1,
      outputMimeType: 'image/png',
      aspectRatio: '1:1',
    },
  });

  if (response.generatedImages && response.generatedImages.length > 0) {
    const base64ImageBytes = response.generatedImages[0].image.imageBytes;
    return `data:image/png;base64,${base64ImageBytes}`;
  }

  throw new Error("No image was generated.");
};

Imagen 4.0 produces photorealistic results that often rival professional photography.

Deploying to Cloud Run: The Journey

This is where Cloud Run truly shines. Here's why I chose it and how the deployment went.

Why Cloud Run?

Serverless Simplicity: No infrastructure management
Automatic Scaling: Handles traffic spikes without configuration
Cost Effective: Pay only for what you use
Container-Based: Full control over the runtime environment
Built-in HTTPS: Secure by default with automatic SSL certificates

The Deployment Process

First, I containerized the Vite app. Here's my Dockerfile:

FROM node:18-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 8080

CMD ["nginx", "-g", "daemon off;"]

Then deployed to Cloud Run:

# Build the container
gcloud builds submit --tag gcr.io/[PROJECT-ID]/studioshot-ai

# Deploy to Cloud Run
gcloud run deploy studioshot-ai \
  --image gcr.io/[PROJECT-ID]/studioshot-ai \
  --platform managed \
  --region us-west1 \
  --allow-unauthenticated

Result: Deployed in under 5 minutes! 🚀

Cloud Run Benefits I Experienced

1. Instant Scaling: During testing with multiple users, Cloud Run automatically spun up additional instances without any configuration.

2. Global Performance: The CDN integration meant fast load times worldwide.

3. Zero Downtime Deployments: I could push updates without taking the app offline.

4. Cost Efficiency: For a hackathon project with variable traffic, Cloud Run's pay-per-use model is perfect. When no one's using the app, costs approach zero.

Challenges Faced

Environment Variables: Initially struggled with exposing the Gemini API key to the browser. Solution: Used Vite's import.meta.env pattern and built the key into the bundle (with rate limiting on the API side).

Cold Starts: First noticed a 2-3 second delay on the first request after idle. Implemented a "keep-warm" strategy for the production version.

CORS Issues: Needed to configure proper CORS headers for API calls. Cloud Run's ingress settings made this straightforward.

Key Features in Action

1. Transform Mode: AI-Powered Editing

The workflow is intuitive:

Drag and drop product photo
AI analyzes and suggests 4 transformation styles
Select or customize prompt
Get professional result in seconds
Refine iteratively if needed

2. Generate Mode: Create from Imagination

![Generate Mode Interface][PLACEHOLDER: Insert generate mode screenshot]

Perfect for:

Visualizing products before manufacturing
Creating marketing mockups
Rapid prototyping of product photography ideas

3. Before/After Comparison

Using react-compare-image, users can slide between original and transformed images - a powerful way to showcase the AI's capabilities.

Lessons Learned

Prompt Engineering is an Art

Early iterations produced inconsistent results. I learned that:

Specificity matters: "minimalist white background" beats "nice background"
Style keywords work: Terms like "cinematic," "dramatic," "e-commerce" guide the AI effectively
Context helps: Including product type in prompts improves accuracy

Multi-Modal AI is Powerful

The combination of vision + language understanding in Gemini 2.5 Pro creates a seamless experience. Users don't need to know how to write good prompts - the AI does it for them.

State Management Complexity

With three different workflows (Transform, Generate, Refine), managing React state became complex. I used separate state trees and careful use of useCallback to prevent unnecessary re-renders.

LocalStorage is Underrated

For this use case, I didn't need a backend database. Browser LocalStorage handles gallery persistence perfectly, keeping the architecture simple and costs low.

The Results

Performance Metrics

Average transformation time: 3-5 seconds
Average generation time: 5-8 seconds
Success rate: 95% of prompts produce usable results
Cold start time: ~2 seconds on Cloud Run

Business Impact Potential

Cost savings: $1,500-2,000 per product line vs. professional photography
Speed: Hours → Seconds
Iteration: Unlimited refinements vs. expensive reshoots

Try It Yourself

🚀 Live App: https://studioshot-ai-760988867361.us-west1.run.app/

💻 GitHub: https://github.com/mikaelaldy/StudioShot-AI

🎨 AI Studio: View my prompts

What's Next?

I have ambitious plans for StudioShot AI:

Batch processing for multiple products
Style templates for different industries
Background library with curated professional backgrounds
E-commerce integrations (Shopify, WooCommerce)
Team collaboration features

Final Thoughts

Building StudioShot AI for the Cloud Run Hackathon taught me that the barrier between "professional" and "amateur" is rapidly dissolving thanks to AI. What once required thousands of dollars and professional equipment can now be achieved with a few clicks.

But more importantly, it showed me the power of combining specialized AI models rather than relying on a single generalist. Gemini 2.5 Pro for analysis, Flash Image for speed, and Imagen for quality - each playing to its strengths.

Cloud Run made deployment almost trivially easy, letting me focus on building features instead of managing infrastructure. For anyone building AI applications, this combination of Gemini + Cloud Run is incredibly powerful.

The $2,000 problem? Solved.

Want to build something similar? The code is open source. Star the repo, fork it, and let me know what you build!

Participating in the Cloud Run Hackathon? Share your projects with #CloudRunHackathon - I'd love to see what you're building!

Can’t Start That Big Project? This App Helps ADHD Brains Beat Task Paralysis.

Mikael A — Mon, 15 Sep 2025 18:36:28 +0000

Ever stared at a huge task (like writing a report or cleaning the garage) and felt completely frozen? You know you need to start, but your brain just says "nope." This overwhelming feeling is called task paralysis, and it's a daily struggle for many people with ADHD.

That’s why I built Firefly, a smart focus app designed to break down that "wall of awful" and help you start meaningful work in under a minute.

How Firefly Turns "I Can't" into "I Just Did"

Firefly isn't just another timer or to-do list. It was built from the ground up with the ADHD brain in mind. The entire process is designed to be simple, visual, and incredibly fast, capturing your motivation the moment it strikes.

Step 1: Just Tell Firefly Your Goal

There are no complicated forms. You start with a single, simple question: "What do you want to finish?" Just type your goal in plain language.

Step 2: Get an Instant, Actionable Plan

The moment you enter your goal, Firefly’s AI gets to work. It instantly gives you a tiny, 60-second first step to get you started. This isn't a vague suggestion; it's a concrete micro-task designed to be so easy you can't say no.

Alongside that first step, you get a full, editable action plan with time estimates for each task, giving you a clear roadmap.

Step 3: Pick an Action and Start the Timer

You are in complete control. You can use the standard timer presets or, even better, select one of the AI's time estimates for a specific action. This helps you commit to a single task for a realistic amount of time.

Step 4: Stay Focused with a Visual Timer

One of the biggest challenges for people with ADHD is "time blindness": the inability to sense the passage of time. Firefly’s large, visual timer makes time tangible. The clean, distraction-free interface shows you only the current action, helping you stay locked in.

Built for a Neurodivergent World
Firefly is more than a tool; it's a companion for anyone whose brain works a little differently. It offers gentle accountability without judgment and celebrates every minute of focus, not just "perfect" sessions.

If you’ve ever felt stuck, give Firefly a try. Your next productive session is just a few seconds away.

Try Firefly: Firefly
Check out the code: firefly

DEV Community: Mikael A