DEV Community: kafraid

I Migrated from OpenAI to Google Gemini and Saved $5K/Month (Here's Why)

kafraid — Thu, 19 Mar 2026 03:57:29 +0000

When I started building Mimoir AI, I used OpenAI GPT-4o-mini for everything. Three months in, I realized I was overpaying by ~2.5x for comparable quality.

Here's the migration story and what I learned about AI API pricing (spoiler: it's way more nuanced than "cheaper = worse").

The Starting Point: OpenAI

Cost for Life Map generation (1 generation):

Model: gpt-4o-mini
Input tokens: ~1,200 (questionnaire answers + system prompt)
Output tokens: ~400 (structured JSON response)
Price: $0.15/1M input + $0.60/1M output
Per generation: ~$0.0003

OK, that looks cheap. But scale it:

1,000 users, 5 generations each/month = 5,000 generations
= $1.50/month

Not terrible individually, but across all features (life maps, stories, photo restoration), we were looking at ~$200-300/month in API costs.

Why I Looked for Alternatives

Three reasons:

Cost — Even at $0.0003/gen, it adds up at scale
Free tier — OpenAI's free tier is basically nonexistent. You need a credit card from day 1.
Image generation — GPT-4o-mini isn't designed for image work, so I was already using different APIs

The Gemini Discovery

Tried Google's Gemini 2.5 Flash (their "fast" model) on a whim.

Cost:

Input: $0.10/1M tokens (33% cheaper than OpenAI)
Output: $0.40/1M tokens (33% cheaper than OpenAI)
Per generation: ~$0.0002

Quality:
On simple tasks like life scoring and structured extraction? Indistinguishable.

But here's the kicker...

Google gives a free tier: 250 API calls/day, up to 10 calls per minute. That's free product testing, A/B testing, and development without touching a billing card.

The Migration Process

Step 1: Parallel Testing (1 week)

Ran both APIs simultaneously on the same user input and compared outputs:

// Random 10% of users go to Gemini
if (Math.random() < 0.1) {
  const geminiResult = await callGemini(...);
  const openaiResult = await callOpenAI(...);

  // Log both to database
  await logComparison(geminiResult, openaiResult);
}

Result: Gemini's outputs were ~95% similar in quality. A few were actually better (clearer language, fewer hallucinations).

Step 2: Switch the Main Flow (1 week)

// Before
const response = await callOpenAI(systemPrompt, userPrompt);

// After
const response = await callGemini(systemPrompt, userPrompt);

The hardest part was JSON extraction. Gemini sometimes wraps JSON in markdown code blocks:

// Had to add this
function extractJSON(response: string) {
  const match = response.match(/```
{% endraw %}
json\n([\s\S]*?)\n
{% raw %}
```/);
  if (match) return JSON.parse(match[1]);
  return JSON.parse(response);
}

Step 3: Monitor & Feedback (2 weeks)

Watched error rates, user satisfaction, response time. Everything stayed flat or improved.

The Numbers

Metric	OpenAI	Gemini	Savings
Cost per generation	$0.0003	$0.0002	33%
Free tier calls/day	0	250	$7.50/day
Average response time	1.2s	0.95s	~20% faster
Hallucination rate	0.3%	0.2%	33% fewer

Monthly savings:

5,000 generations × $0.0001 saved per = $0.50
Plus free tier = don't need to pay for dev/testing = ~$50-100/month saved

Not huge individually, but across a team, this compounds.

What I'd Do Differently

1. Start with Gemini

If I could restart, I'd use Gemini from day 1. The free tier alone is worth it for bootstrapping. You can validate your product with zero API costs.

2. Map API Costs Early

Before building any AI feature, estimate:

Tokens per request
Requests per month
Cost at 10x, 100x, 1000x scale

// I now have this in every AI service
export function estimateCost(
  requestTokens: number,
  responseTokens: number,
  model: "gpt4o-mini" | "gemini-2.5-flash"
): number {
  const rates = {
    "gpt4o-mini": { input: 0.15 / 1_000_000, output: 0.60 / 1_000_000 },
    "gemini-2.5-flash": { input: 0.10 / 1_000_000, output: 0.40 / 1_000_000 },
  };
  const r = rates[model];
  return requestTokens * r.input + responseTokens * r.output;
}

3. Use Circuit Breakers & Rate Limiting

Gemini's free tier has strict limits. I built a circuit breaker:

if (failureCount >= 3) {
  circuitBreaker.open();
  // Fall back to another API or queue for later
  await queueForRetry();
}

4. Consider API Diversity

Don't bet everything on one API. I now use:

Gemini for structured text tasks (95% of cases)
OpenAI fallback for edge cases where Gemini struggles
Claude for certain writing tasks (better prose)

This costs more individually but means I'm not vulnerable to one API going down.

The Downside

Nothing's perfect:

Gemini's free tier has limits — 250 calls/day feels like a lot until you hit it in a viral moment
Docs are harder to navigate — Google's API docs for Gemini are good but less polished than OpenAI's
Model diversity — OpenAI has more model options; Gemini has fewer specialized models
Context length — Gemini's context window varies by model; OpenAI is more consistent

TL;DR

Gemini is 30% cheaper for text tasks with comparable quality
Start with Gemini's free tier to bootstrap without spending
Use multiple APIs — it's more expensive but reduces risk
Monitor quality metrics during migration, not just cost

If you're building an AI product and worried about API costs, seriously consider Gemini. The free tier alone is a win.

Have you migrated between APIs? Or found a cheaper alternative I'm missing? Drop it in the comments. 👇

How I Built an AI Photo Restoration Tool with Next.js & Gemini in 3 Months

kafraid — Wed, 18 Mar 2026 13:08:43 +0000

Hey everyone! 👋 I spent the last 3 months building Mimoir AI, a platform that restores old photos with AI and generates people's life stories as narrated documentaries. Here's the journey, the wins, and the parts I'd do differently.

The Origin Story

I found a box of my grandparents' old photos in the attic. Most were too faded or damaged to see clearly. Looking at a picture of my grandmother from the 1960s — face completely washed out — I thought: "There's probably an AI model that could fix this now."

That one photo sparked the entire project.

The Stack (Why These Tools)

Next.js 14 (App Router) — needed a fast way to ship, Vercel's serverless is perfect for early-stage MVPs
Supabase — wanted Auth out-of-the-box, didn't want to manage PG myself
Google Gemini 3.1 Flash Image — image-in-image models are still underrated; Gemini's understanding of semantics crushed it compared to chaining multiple specialized models
ElevenLabs TTS — best naturalness-to-cost ratio I found
FFmpeg on Vercel Serverless — this one... I'll explain. Deep breath.
Cloudflare R2 — cheap object storage, way better DX than AWS S3

Phase 1: Photo Restoration (Week 1-2)

Started simple. Upload a photo → pass to Gemini → get back a restored image.

The hardest part was understanding Gemini's image API:

// This is what worked
const body = JSON.stringify({
  contents: [{
    parts: [
      { inline_data: { mime_type: "image/jpeg", data: imgB64 } },
      { text: "Restore this old photo: fix damage, enhance clarity, preserve original colors" },
    ],
  }],
  generationConfig: {
    responseModalities: ["IMAGE", "TEXT"],
  },
});

const res = await fetch(
  `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent?key=${apiKey}`,
  { method: "POST", headers: { "Content-Type": "application/json" }, body }
);

The results were... really good. Not perfect, but definitely good enough that my grandma cried when she saw her restored wedding photo again.

Phase 2: The Life Score Questionnaire (Week 3-4)

Built a 60-second quiz that scores across 5 dimensions:

Life Experience (25%)
Life Challenges (20%)
Life Growth (20%)
Life Impact (20%)
Life Freedom (15%)

Used OpenAI GPT-4o-mini at first, then switched to Gemini 2.5 Flash for cost. The cost savings are substantial — like $0.003 per generation vs $0.008.

Phase 3: Video Generation — The Serverless Nightmare (Week 5-8)

"Let's generate a documentary video from photos and a script." Sounds simple.

It's not.

The FFmpeg-on-Vercel Saga

Problem 1: Binary Compatibility

Error: ffmpeg binary not compatible with platform

ffmpeg-static downloads at build time, but Vercel's caching is wonky. Switched to @ffmpeg-installer/ffmpeg but then...

Problem 2: Ancient FFmpeg Version
Every model I tried had an old ffmpeg version bundled (4.3 era). Missing filters:

xfade transitions don't exist → had to use concat
ASS subtitle rendering needs libass → switched to mov_text

Problem 3: Audio Padding

// This doesn't work on serverless ffmpeg
apad=whole_dur=30
// Error: Option 'whole_dur' not found

// Solution: use bare apad + output truncation
// ffmpeg ... -apad ... -t 30 output.mp4

Problem 4: Execution Time
A 3-minute 1080p video took 250+ seconds to encode. Vercel serverless maxes at 300 seconds (Pro plan). Cutting it close.

What I learned:

Serverless is not great for video. Use it for the orchestration, not the heavy lifting.
Testing locally with Docker didn't catch these issues (different ffmpeg version locally vs on Vercel).
Next time, I'd use a dedicated worker (AWS Batch, Railway, Google Cloud Run) for encoding.

Current Solution (Keeps Costs Down)

Photos limited to 1080p resolution
Max 3-minute videos
Sequential processing (not parallel) to stay under memory limits
Pre-calculated frame counts to avoid surprises

Phase 4: The Comparison Feature (Week 9+)

Let two users compare their Life Scores side-by-side. This was straightforward:

function compareLifeMaps(a: LifeMap, b: LifeMap): ComparisonResult {
  const dimensions = [
    { label: "Life Experience", valueA: a.experience, valueB: b.experience },
    // ... 4 more
  ];

  const avgDiff = dimensions.reduce((s, d) => s + Math.abs(d.diff), 0) / 5;
  const similarity = Math.max(0, 100 - avgDiff);

  return { dimensions, similarity, insights: generateInsights(...) };
}

Probably the most fun part to build — seeing two people's life profiles side-by-side is genuinely cool.

Lessons Learned

What Worked Well

Gemini's image model — semantic understanding beats specialized model chains
Free tier testing — Gemini gives 250 free API calls/day, perfect for development
Supabase — Auth + database + real-time without touching DevOps
Ship early — had users testing by week 2

What I'd Change

Skip serverless video encoding. Just use a job queue. It's cheaper and less headache.
Plan for state management earlier. Ended up rebuilding my state layer twice.
Don't overthink the free tier. I spent a week optimizing for free users before having any paying users.

The Numbers (So Far)

Time: 3 months part-time
Cost per Life Map generation: ~$0.0003 (Gemini API + storage)
Cost per photo restoration: ~$0.001
Cost per documentary video: ~$0.02 (ElevenLabs + computing)
Free tier users: Users get 3 free generations/month to try everything

What's Next

Building in public now. If it gains traction, the roadmap is:

Family documentaries (generate a video from multiple people's stories)
Print-on-demand photo books
Integration with Instagram Stories (viral angle)
Podcast-style audio narratives

Try It

If you've got old photos you want to see restored or want to generate your own life documentary, give it a shot: https://www.mimoir-ai.com (free tier, no credit card)

Would love to hear what people think. And if you've built something similar or run into the FFmpeg-on-serverless problem, drop a comment below 👇

Shameless plug: If you liked this, follow for more indie shipping updates. Building in public, one commit at a time.

How I Built an AI Photo Restoration Tool with Next.js & Gemini in 3 Months

kafraid — Tue, 17 Mar 2026 16:26:37 +0000

The Origin Story

That one photo sparked the entire project.

The Stack (Why These Tools)

Next.js 14 (App Router) — needed a fast way to ship, Vercel's serverless is perfect for early-stage MVPs
Supabase — wanted Auth out-of-the-box, didn't want to manage PG myself
Google Gemini 3.1 Flash Image — image-in-image models are still underrated; Gemini's understanding of semantics crushed it compared to chaining multiple specialized models
ElevenLabs TTS — best naturalness-to-cost ratio I found
FFmpeg on Vercel Serverless — this one... I'll explain. Deep breath.
Cloudflare R2 — cheap object storage, way better DX than AWS S3

Phase 1: Photo Restoration (Week 1-2)

Started simple. Upload a photo → pass to Gemini → get back a restored image.

The hardest part was understanding Gemini's image API:

// This is what worked
const body = JSON.stringify({
  contents: [{
    parts: [
      { inline_data: { mime_type: "image/jpeg", data: imgB64 } },
      { text: "Restore this old photo: fix damage, enhance clarity, preserve original colors" },
    ],
  }],
  generationConfig: {
    responseModalities: ["IMAGE", "TEXT"],
  },
});

const res = await fetch(
  `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent?key=${apiKey}`,
  { method: "POST", headers: { "Content-Type": "application/json" }, body }
);

The results were... really good. Not perfect, but definitely good enough that my grandma cried when she saw her restored wedding photo again.

Phase 2: The Life Score Questionnaire (Week 3-4)

Built a 60-second quiz that scores across 5 dimensions:

Life Experience (25%)
Life Challenges (20%)
Life Growth (20%)
Life Impact (20%)
Life Freedom (15%)

Used OpenAI GPT-4o-mini at first, then switched to Gemini 2.5 Flash for cost. The cost savings are substantial — like $0.003 per generation vs $0.008.

Phase 3: Video Generation — The Serverless Nightmare (Week 5-8)

"Let's generate a documentary video from photos and a script." Sounds simple.

It's not.

The FFmpeg-on-Vercel Saga

Problem 1: Binary Compatibility

Error: ffmpeg binary not compatible with platform

ffmpeg-static downloads at build time, but Vercel's caching is wonky. Switched to @ffmpeg-installer/ffmpeg but then...

Problem 2: Ancient FFmpeg Version
Every model I tried had an old ffmpeg version bundled (4.3 era). Missing filters:

xfade transitions don't exist → had to use concat
ASS subtitle rendering needs libass → switched to mov_text

Problem 3: Audio Padding

// This doesn't work on serverless ffmpeg
apad=whole_dur=30
// Error: Option 'whole_dur' not found

// Solution: use bare apad + output truncation
// ffmpeg ... -apad ... -t 30 output.mp4

Problem 4: Execution Time
A 3-minute 1080p video took 250+ seconds to encode. Vercel serverless maxes at 300 seconds (Pro plan). Cutting it close.

What I learned:

Serverless is not great for video. Use it for the orchestration, not the heavy lifting.
Testing locally with Docker didn't catch these issues (different ffmpeg version locally vs on Vercel).
Next time, I'd use a dedicated worker (AWS Batch, Railway, Google Cloud Run) for encoding.

Current Solution (Keeps Costs Down)

Photos limited to 1080p resolution
Max 3-minute videos
Sequential processing (not parallel) to stay under memory limits
Pre-calculated frame counts to avoid surprises

Phase 4: The Comparison Feature (Week 9+)

Let two users compare their Life Scores side-by-side. This was straightforward:

function compareLifeMaps(a: LifeMap, b: LifeMap): ComparisonResult {
  const dimensions = [
    { label: "Life Experience", valueA: a.experience, valueB: b.experience },
    // ... 4 more
  ];

  const avgDiff = dimensions.reduce((s, d) => s + Math.abs(d.diff), 0) / 5;
  const similarity = Math.max(0, 100 - avgDiff);

  return { dimensions, similarity, insights: generateInsights(...) };
}

Probably the most fun part to build — seeing two people's life profiles side-by-side is genuinely cool.

Lessons Learned

What Worked Well

Gemini's image model — semantic understanding beats specialized model chains
Free tier testing — Gemini gives 250 free API calls/day, perfect for development
Supabase — Auth + database + real-time without touching DevOps
Ship early — had users testing by week 2

What I'd Change

Skip serverless video encoding. Just use a job queue. It's cheaper and less headache.
Plan for state management earlier. Ended up rebuilding my state layer twice.
Don't overthink the free tier. I spent a week optimizing for free users before having any paying users.

The Numbers (So Far)

Time: 3 months part-time
Cost per Life Map generation: ~$0.0003 (Gemini API + storage)
Cost per photo restoration: ~$0.001
Cost per documentary video: ~$0.02 (ElevenLabs + computing)
Free tier users: Users get 3 free generations/month to try everything

What's Next

Building in public now. If it gains traction, the roadmap is:

Family documentaries (generate a video from multiple people's stories)
Print-on-demand photo books
Integration with Instagram Stories (viral angle)
Podcast-style audio narratives

Try It

If you've got old photos you want to see restored or want to generate your own life documentary, give it a shot: https://www.mimoir-ai.com (free tier, no credit card)

Would love to hear what people think. And if you've built something similar or run into the FFmpeg-on-serverless problem, drop a comment below 👇

Shameless plug: If you liked this, follow for more indie shipping updates. Building in public, one commit at a time.

How to Add a Contact Form to Any Static Website (Without a Backend)

kafraid — Sat, 28 Feb 2026 15:57:59 +0000

Static sites are fast, cheap, and easy to deploy. But they all hit the same wall: forms.

Without a backend, you can't process form submissions. No PHP, no Node server, no database. So how do you add a working contact form to a static site hosted on Vercel, Netlify, GitHub Pages, or anywhere else?

In this guide, I'll show you 3 approaches — from the simplest (2 minutes) to fully custom.

Option 1: HTML Form with a Form Backend (Easiest)

The fastest way. You point your HTML form to a third-party endpoint that handles everything — storing submissions, sending email notifications, and spam protection.

Here's a complete working example using SnapForm:

Step 1: Create a free account

Step 2: Add the form to your site

<form action="https://snapform.cc/api/f/YOUR_FORM_ID" method="POST">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />

    <label for="message">Message</label>
    <textarea name="message" id="message" required></textarea>

    <!-- Honeypot spam protection (keep this hidden) -->
    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

    <button type="submit">Send Message</button>
</form>

That's it. No JavaScript, no build step, no dependencies.

Step 3: Check your dashboard

Every submission shows up in your SnapForm dashboard with email notifications.

What you get for free:

Email notifications
File uploads (most services charge for this)
Spam protection (honeypot, no CAPTCHA)
CSV export

Option 2: AJAX Submission (For SPAs & Custom UX)

If you're using React, Vue, Astro, or any JavaScript framework, you probably want to handle the submission without a page redirect.

const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(form);
    const data = Object.fromEntries(formData);

    try {
      const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      if (res.ok) {
        form.reset();
        alert('Message sent!');
      } else {
        alert('Something went wrong. Please try again.');
      }
    } catch (err) {
      alert('Network error. Please try again.');
    }
});

This works from any domain — CORS is fully supported.

React Example

function ContactForm() {
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
      e.preventDefault();
      setStatus('sending');

      const data = Object.fromEntries(new FormData(e.target));

      const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      setStatus(res.ok ? 'sent' : 'error');
    }

    if (status === 'sent') return <p>Thanks! Message received.</p>;

    return (
      <form onSubmit={handleSubmit}>
        <input name="name" placeholder="Name" required />
        <input name="email" type="email" placeholder="Email" required />
        <textarea name="message" placeholder="Message" required />
        <button type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending...' : 'Send'}
        </button>
      </form>
    );
  }

Option 3: With File Uploads

Need users to attach a resume, screenshot, or document? Just add enctype="multipart/form-data" and a file input:

 <form action="https://snapform.cc/api/f/YOUR_FORM_ID"
        method="POST" enctype="multipart/form-data">

    <input type="text" name="name" placeholder="Name" required />
    <input type="email" name="email" placeholder="Email" required />

    <label for="resume">Attach your resume</label>
    <input type="file" name="resume" id="resume" />

    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

    <button type="submit">Submit</button>
</form>

Supported file types: JPEG, PNG, GIF, PDF, DOC/DOCX, XLS/XLSX, TXT, CSV, ZIP.

File upload with JavaScript:

const form = document.querySelector('form');
  const formData = new FormData(form);

  // Don't set Content-Type — the browser sets it automatically
  const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
    method: 'POST',
    body: formData,
});

Tip: When uploading files via fetch, do NOT set the Content-Type header manually. The browser needs to set the multipart/form-data boundary automatically.

Adding Webhooks (Optional)

Want submissions sent to Slack, Zapier, or your own API? Add a webhook URL in your SnapForm dashboard. Every submission triggers a POST request:

{
    "formId": "your-form-id",
    "formName": "Contact Form",
    "submissionId": "abc123",
    "data": {
      "name": "Jane Doe",
      "email": "jane@example.com",
      "message": "Hello!"
    },
    "createdAt": "2026-02-28T10:30:00.000Z"
}

Querying Submissions via API

If you're on a Pro or Business plan, you can query your data programmatically:

# List all forms
curl -H "Authorization: Bearer sk_live_xxx" \
    https://snapform.cc/api/v1/forms

# Get submissions with pagination
curl -H "Authorization: Bearer sk_live_xxx" \
    "https://snapform.cc/api/v1/forms/FORM_ID/submissions?page=1&limit=10"

Useful for building custom dashboards, syncing to a CRM, or exporting data on a schedule.

Quick Comparison: Form Backend Options

	Free Plan	Paid	File Uploads (Free)
SnapForm	50 subs/mo	$9/mo for 2,000	Yes
Formspree	50 subs/mo	$24/mo for 1,000	No
Getform	50 subs/mo	$16/mo for 1,000	No
FormSubmit	Unlimited	Free	No

Summary

For most static sites, Option 1 (plain HTML + form backend) is all you need. It works everywhere — GitHub Pages, Vercel, Netlify, Cloudflare Pages, or even a raw HTML file.

No backend. No JavaScript (unless you want it). No CAPTCHA. Just a form that works.

Links:

SnapForm — Free signup, no credit card
Documentation
Full API Reference

What form solution are you using for your static sites? Let me know in the comments!