DEV Community: Migbolivar

5 attempts, 2 SIGKILLs, 1 non-existent flag: how I got a 4-second avatar to speak Spanish

Migbolivar — Mon, 17 Aug 2026 15:22:50 +0000

5 attempts, 2 SIGKILLs, 1 non-existent flag: how I got a 4-second avatar to speak Spanish

This is the story of a four-second video that took an entire evening, five attempts, two out-of-memory kills, one flag that never existed, and a parameter combo that felt like a magic spell. The mission: make my AI avatar say a sentence in Spanish — with the lips actually synced.

The mission

I had an avatar video of myself. I generated the audio with edge-tts (Spanish voice, "La IA no espera. Tu negocio tampoco." — "AI doesn't wait. Neither does your business."). All I needed was to map the audio onto the face with Wav2Lip. Simple, right?

Attempt 1 — the library moved on without me

librosa.filters.mel(...) → TypeError: unexpected keyword argument

Wav2Lip was written for librosa 0.8. My environment had 0.11, where mel() requires keyword arguments. One-line patch in audio.py, re-run.

Attempt 2 — SIGKILL (the quiet killer)

No Python traceback. No error message. Just Killed — the signature of the OOM killer on a server with ~8 GB already occupied by other services. Wav2Lip was loading the whole face video into memory.

Attempt 3 — the flag that never existed

I shrank the video to 960×540 and confidently added --batch_size 8. The CLI replied: unknown argument. The real flag is --wav2lip_batch_size — I'd read the docs from memory and hallucinated the name. (Yes — I, the person writing a story about a bug, introduced a hallucinated flag.)

Attempt 4 — the second SIGKILL

Correct flag, both batch sizes set: --wav2lip_batch_size 8 --face_batch_size 8. The process made it further… then died the same silent death. At this point I understood: it wasn't the video resolution, it wasn't the flags — it was peak memory during inference.

Attempt 5 — the magic combo

The winning incantation:

OMP_NUM_THREADS=4 python inference.py \
  --checkpoint_path wav2lip_gan.pth \
  --face miguel-face-small.mp4 \
  --audio avatar-es.mp3 \
  --wav2lip_batch_size 4 \
  --resize_factor 2 \
  --outfile miguel-avatar-es.mp4

--resize_factor 2: halves the processing resolution (and memory) while keeping the output watchable
--wav2lip_batch_size 4: small enough to fit, big enough to be worth it
OMP_NUM_THREADS=4: keeps the rest of the box alive

104 frames. 4.2 seconds. Exit code 0. The lips moved with the Spanish audio, frame by frame.

The plot twist

I was so proud I tried a "high-definition" re-run with --resize_factor 1. The OOM killer came back and murdered it in seconds. The lesson landed twice: I wasn't fixing resolution, I was fighting RAM — and the "lower quality" version was the production version all along.

What made the software more resilient (me)

The OOM kill is a feature of your environment, not a bug of your code — free -h before you start, batch sizes after.
Read the CLI help, don't trust your memory of it — --help takes ten seconds and saves an attempt.
The ugly-but-working config is a legitimate final state — resize_factor 2 + batch 4 was "worse" on paper and the only thing that survived.

The takeaway

A four-second video that took five attempts taught me more about memory management than a month of tutorials. And the avatar? He's out there, speaking Spanish, perfectly in sync.

🎬 The actual output: a 4.2s clip, 480×270, 365,943 bytes — the smallest, scrappiest, most hard-won video I've made.

bugsmash

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

I fixed a clip-split bug in Hyperframes with 89 lines (and it was about where time starts)

Migbolivar — Mon, 17 Aug 2026 15:18:09 +0000

I fixed a clip-split bug in Hyperframes with 89 lines (and it was about where time starts)

A bug report about a two-second edit that lost its position. My fix: make the split point honest about time. Merged as heygen-com/hyperframes#3272 (+89/−2).

The bug

Hyperframes (HeyGen's open-source video rendering framework) has a browser-based Studio where you can split a clip in two. The bug: when you split an untrimmed clip, the source-media position of the right segment was wrong — the second half started playing from the wrong in-point, and audio drifted out of sync with video.

The root cause was subtle: when a clip had never been trimmed, the left segment carried no explicit in-point — and the split logic treated "no in-point" as "start at 0" for the left, but the right segment's source position was computed from a baseline that didn't include the original clip's own trim state.

The fix

Two changes, 89 additions, 2 deletions:

Left segment: when the original clip was untrimmed, it now carries an explicit zero in-point — so "no in-point" can never be misinterpreted downstream.
Right segment: its in-point now starts at the split-adjusted source position — the exact point in the source media where the split happened, instead of an offset from the wrong baseline.

Small principle, wide blast radius: be explicit about where time starts. A missing attribute read as zero by luck; now it's zero by contract.

Why it mattered

Audio/video sync: the split could desync a talking-head clip — the exact failure mode that makes rendered videos unusable.
Deterministic rendering: Hyperframes renders seek-by-frame, so any in-point ambiguity becomes a permanent, reproducible artifact — the worst kind.

Verification

Merged and green (CI + lint + format gates: oxlint/oxfmt).
I also rendered the fixed behavior through the pr-to-video workflow to watch the split behave correctly end-to-end.

What I learned

"No value" and "zero" are different states — normalize the first into the second before any arithmetic touches it.
A two-line conceptual fix can be 89 lines of test coverage — and that's the right ratio.
Split logic is a time-travel machine — every segment must be able to answer "where am I in the source?" on its own, without depending on siblings.

The takeaway

The bug was invisible in preview and permanent in render — the classic "works in the editor, broken in the output" trap. Being explicit about in-points fixed both segments, the audio drift, and the class of bugs around it.

🔗 PR: https://github.com/heygen-com/hyperframes/pull/3272

bugsmash

javascript

opencode

Breed Whisperer — know any dog with Google AI (and pure CSS)

Migbolivar — Sun, 16 Aug 2026 15:31:14 +0000

Breed Whisperer — know any dog with Google AI (and pure CSS)

A dog breed identifier for the DEV Weekend Challenge: Dog Days Edition. Upload a photo of any dog and Google AI (Gemini) whispers back its breed, confidence, personality and care tips — in seconds. The dog on this page isn't a photo: it's drawn entirely in pure CSS, no images, no SVG.

🔗 Live demo: https://dog.bmops.tech

The story

Every dog has a story. The Elkhound that guarded Viking hunts. The lab who's "just a good boy" (very rare breed). The park stranger who absolutely deserves a treat.

Breed Whisperer is my tiny contribution to understanding them: point your camera at a dog and ask Google's newest vision model. It tells you who they are, what they're like, and how to take care of them. Three seconds, no signup, nothing stored.

What I built

🐶 Pure-CSS dog — the hero illustration is hand-drawn with divs, layered box-shadow and gradients (the cyanHarlow technique): floppy ears, a wagging tail, a panting tongue, a collar with a shiny tag. The tail and tongue animate with CSS keyframes (disabled for prefers-reduced-motion)
📷 Drag-and-drop upload — click or drop a photo, see a live preview, and Gemini reads it
🧠 Google AI identification — the photo goes to gemini-3-flash-preview via the Gemini API, which returns breed, confidence, a personality read, a care tip, and a "did you know?" fact
♿ Accessible by default — skip link, semantic landmarks, keyboard-operable upload (Enter/Space), role="status" live regions, visible focus, 0 axe-core violations, responsive from 360px to desktop

How it works

Snap it — any camera, any dog, any park
Gemini sees — one private request to Google AI's vision model; nothing is stored
Whisper back — breed + personality + care tips in under ten seconds

The Google AI bit (and a 2026 gotcha)

I chased a 401 for a while before realising the API key format changed: new keys are AQ... and must be sent with the x-goog-api-key header, not ?key=. And gemini-2.5-flash is retired for new accounts — gemini-3-flash-preview is the current workhorse. Once I switched both, the first real photo (a very majestic Norwegian Elkhound) came back perfectly:

Elkhound Noruego · confidence: alta
— national dog of Norway, used by Vikings to hunt moose.
Care: frequent brushing (dense double coat) + lots of daily exercise.

Why pure CSS for the dog

The challenge is about dogs, and dogs are character. I wanted the page itself to have a personality — not a stock photo, but a hand-drawn companion rendered by the browser. Every shadow on its fur is an inset box-shadow; every ear is a rotated border-radius ellipse. The whole illustration is ~200 lines of CSS. No <img>, no <svg>, no canvas — one file, ~17 KB.

What I learned / enjoyed

The new Google AI key format (AQ... + x-goog-api-key header) — documented for the next dev who hits the same wall
Layered inset shadows make CSS fur feel soft (same trick as clay pots in my previous challenge entry 😄)
Gemini's vision model handles messy real-world photos (park dogs, dark fur, motion blur) surprisingly well
An accessible upload widget is easier than it looks: one input, two drag events, three ARIA attributes

Tech

HTML5 · CSS3 (pure-CSS illustration, keyframes, prefers-reduced-motion) · Vanilla JS (fetch, drag & drop, live regions) · Google AI — Gemini 3 Flash Preview (vision) · FastAPI backend · Zero images · Zero dependencies · 0 axe violations

Built for the DEV Weekend Challenge: Dog Days Edition · submitted in the **Best use of Google AI* category · all illustrations are pure CSS · no dogs were emotionally manipulated (much).*

La Abuela — Comfort Food from Madrid

Migbolivar — Fri, 14 Aug 2026 15:13:09 +0000

La Abuela — Comfort Food from Madrid 🍲

A cozy, fully accessible landing page for an imaginary family restaurant in Madrid, built from scratch with vanilla HTML, CSS and JavaScript for the DEV Frontend Challenge: Comfort Food Edition.

🔗 Live demo: https://laabuela.bmops.tech

💻 Interactive pen (CodePen):

The story

La Abuela ("the grandmother") is a tiny four-table restaurant in Lavapiés, Madrid. In 1987, Abuela Carmen opened it with one rule: if it wouldn't be served at her Sunday table, it wouldn't be served here. Forty years later, the menu still has three dishes — caldo, croquetas, lentejas — and the pot still simmers for three hours.

The page tells that story through a warm terracotta-and-cream palette and five illustrations drawn entirely in pure CSS — no images, no SVG, no canvas.

What I built

Hero — a clay pot in pure CSS: gradient body with layered inset shadows for volume, decorative band, handles, a two-tongued fire with a glowing core, a wooden table with grain, a light sweep across the heading, and animated organic steam
Our story — a bowl of caldo with a wooden spoon and a terracotta heart, all divs and box-shadows
The menu — three dish cards, each with its own pure-CSS illustration: a steaming bowl of caldo, three golden croquetas with crispy texture and a pool of salsa, and a dark bowl of lentils with nine individual grains
The recipe — an accessible accordion unlocking Abuela's caldo, step by step
Quotes — from regulars (including one from Osaka who cried into the caldo)
Booking form — with inline validation, clear labels and a friendly confirmation
Footer — hours, address, and a wink to Carmen

The art is pure CSS — no images, no SVG

Every illustration is built the way : nested absolutely-positioned divs, layered box-shadow (inset shadows give the clay its volume and the croquettes their crust), organic border-radius, and radial gradients for light. The pot alone uses four shadow layers to feel round instead of flat.

The steam is animated with pure CSS keyframes (and disabled for users who prefer reduced motion)
The croquettes' golden heart is an inset highlight — no image, no filter trick
The lentil grains are nine individual divs with their own tiny highlights
Total: zero <img>, zero <svg>, zero canvas — one file, ~37 KB

Accessibility (it was the first requirement, not an afterthought)

The challenge judges accessibility — so I treated it as a feature:

✅ 0 violations on axe-core (serious + moderate)
✅ WCAG AA contrast on every text element (I darkened the primary buttons after the first axe pass)
✅ Skip-to-content link, one h1, logical heading order (h2 → h3, no skips)
✅ Semantic landmarks (header, main, footer, section with aria-labelledby)
✅ Keyboard navigable: hamburger menu, accordion and form all work with Tab/Enter
✅ Visible :focus-visible outlines on every interactive element
✅ aria-expanded on nav toggle and accordion buttons, role="region" + aria-label on panels
✅ Live region (role="status") for form feedback
✅ prefers-reduced-motion — animations, steam and scroll reveals are disabled for users who ask for it

Responsive

Tested at 390px, 360px, 820px and 1440px viewports: no horizontal overflow, no console errors, hamburger navigation kicks in on mobile, grids collapse gracefully, and the illustrations scale down with transform.

What I learned / enjoyed

Chasing axe-core to zero violations is a great discipline — the color-contrast pass caught a button I would have shipped as-is
grid-template-rows: 0fr → 1fr makes a silky pure-CSS accordion with no height hacks
Layered inset box-shadows are the entire trick behind "3D" CSS art — one shadow is flat, four shadows are clay
Drawing food in pure CSS is harder than cooking it. The croquettes took three tries and still look suspiciously like planets
A 100% vanilla stack keeps the page ~37 KB and instantly embeddable anywhere

Tech

HTML5 · CSS3 (custom properties, grid, layered box-shadow art, media queries, prefers-reduced-motion) · Vanilla JS (IntersectionObserver, ~90 lines) · Zero dependencies · Zero images · Zero SVG

---#frontendchallenge

Built for the Frontend Challenge: Comfort Food Edition · All recipes belong to Carmen.