DEV Community: sam lee

First frame + last frame is enough. You don't need a timeline.

sam lee — Thu, 13 Aug 2026 11:36:29 +0000

I keep seeing the same product mistake in image-to-video tools: they ship a timeline.

Tracks. Keyframes. Easing. Export presets. A “studio” that looks like a junior After Effects. That is a real product if the user already has footage. It is the wrong surface if the user only has two stills and wants the three seconds in between.

The job is smaller than “make a video”

Most of the requests I hear are not open-ended generation. They sound like this:

I have a wide shot and a close-up of the same object.
I have the room before paint and the room after.
I have daylight and night from the same doorway.

The user already did the hard part: they chose two frames that belong together. What they lack is motion that starts on A and arrives on B. A cross-dissolve is not that motion. A Ken Burns crop on one JPEG is not that motion either. Both are opacity or scale. Neither invents an in-between.

A full editor does not fix this. It just gives you more ways to fake the middle.

Why two bookends beat an empty prompt

Text-to-video is a bad default for this job. An empty prompt asks the model to invent a scene. Two stills ask the model to respect a scene that already exists.

That constraint is also a product constraint:

Inputs stay obvious. First frame. Last frame. Optional short prompt. Duration in a small set (a few seconds, not a film).
Failure is readable. If the pair does not share a camera height, a subject, or a backdrop, the clip looks like melting furniture. You throw it away. You do not add another effect layer.
The UI can live in a browser. Nobody needs a project file to test whether two JPEGs have a usable middle.

The last point matters if you are building on the web. A guest can upload two frames and see if the idea is worth a generate. Auth and credits only show up when they want the file. That is a cleaner funnel than “sign in to open the editor.”

What I refused to build

I refused a multi-track timeline. I refused “10 transition styles.” I refused treating a warp mesh as the product.

Those features help when you already have video. They hide a bad pair when you only have stills. The honest version of the tool is: bookends in, short MP4 out, keep or delete. If the clip does not survive a single playback at the size it will actually run, it should not ship to the timeline.

Export stays simple: one video file from the model. The stills remain the source of truth. The clip is only a bridge.

The loop I actually use

Pick two frames that already agree. Generate once. Watch it once. Keep it only if the subject is still the subject in every frame.

If you want to see that constraint in a UI instead of a slide deck, you can run a first-and-last-frame generation in the browser and decide whether the middle is usable before you open an editor.

That is the whole product argument: do not ask people to learn a timeline for a job that starts and ends on two photographs.

Building a timed naming challenge with live knowledge-graph checks

sam lee — Thu, 06 Aug 2026 10:36:33 +0000

Building a timed naming challenge with live knowledge-graph checks

Timed trivia looks simple until you try to score it fairly.

If you let players type free-form names — athletes, inventors, musicians, politicians — you immediately hit messy problems: spelling variants, duplicate identities, and “is this person actually famous enough?” Without a shared source of truth, every answer becomes a judgment call.

Why a knowledge graph helps

A public knowledge graph (for example Wikidata) gives you stable entity IDs, gender/occupation metadata, and alias lists. That means your game can accept “Muhammad Ali” and “Cassius Clay” as the same person, reject empty celebrity-adjacent guesses, and keep scoring consistent across sessions.

The UX pattern that works well:

Start a timer
Accept one name at a time
Validate against the graph in near real time
Show progress toward a round goal (often 100)

That loop is more interesting than a static quiz form because players feel the clock and the validation feedback together.

Practical implementation notes

A few details matter more than the UI polish:

Normalize input early — trim, collapse spaces, and lowercase only for matching, not for display.
Cache recent lookups — the same names get typed a lot; don’t hammer the API.
Be honest about false negatives — obscure but real people may fail validation; surface a clear “not found” state instead of a soft accept.
Keep the client thin — validate on the server so keys and rate limits stay out of the browser.

If you’re prototyping, start with one category and one validation rule (for example: must resolve to a human entity matching a gender filter). Expand categories only after the scoring feel is right.

Try the live version

I put a small free build of this idea online if you want to feel the loop before writing your own. You can play name 100 men with a timer and live checks — useful as a reference for pacing, error states, and how strict validation should feel.

After you try a round, note where you stalled. Those stalls are usually product clues: weak autocomplete, slow validation, or categories that are too broad for a satisfying finish rate.

Building a Practical Browser-Based AI Stem Separation Tool with Demucs

sam lee — Fri, 17 Jul 2026 07:47:41 +0000

Over the past few months, I've been exploring how to bring powerful AI audio models directly into the browser. One of the most useful projects I worked on was creating an easy-to-use online stem separation tool.
The core challenge was making Demucs (specifically HT-Demucs) run efficiently in a web environment without forcing users to install anything. Using ONNX export and WebAssembly-friendly inference, it's now possible to split audio tracks into multiple stems — vocals, drums, bass, guitar, piano, and others — right in the browser.
Key Technical Highlights

Model: HT-Demucs (6-stem version)
Frontend: Clean React-based interface with file upload and YouTube/SoundCloud link support
Backend: Server-side processing with queue management for longer tracks
Pricing Model: Pay-per-minute (credits never expire) — much more developer and user-friendly than subscription-heavy alternatives
Export Options: MP3 and WAV stems

The workflow is straightforward: upload audio → choose stem count (2/4/6) → process → download individual stems. It works well on both desktop and mobile browsers.
This kind of tool is particularly useful for web-based music production apps, DJ tools, karaoke platforms, or even educational projects involving audio analysis.
If you're a developer or music tech enthusiast looking for a reliable, no-install stem separation solution, I highly recommend checking this one out:
ai stemp separation

Have you built or used any browser-based AI audio tools? What challenges did you face with model deployment or real-time inference? Share your experiences in the comments!

Building a browser sound game with Web Audio (why “listen first” beat live tweaking)

sam lee — Sat, 11 Apr 2026 13:23:11 +0000

I’ve been chipping away at a tiny browser game called Dialed Sound Game—you hear a few short tones, then try to dial in each frequency from memory. Practice mode when you want warm-up, daily run when you want a shared “shape” to the challenge. No install, no account nonsense.

This isn’t a write-up of every line of code. It’s the one design fight that saved the project.

Early on I let people scrub the slider while the tone was still playing. Scores looked great; the thing felt hollow. You weren’t really remembering—you were chasing the needle. Splitting listen and guess made the game meaner at first, but it finally felt like the mechanic I’d described out loud to friends.

Audio-wise, the web is “fine” until you care about loudness across frequencies and the way cheap speakers lie to you. I kept the listen sound on the softer side and avoided turning it into a piercing test tone. It’s supposed to be a casual loop, not a stunt.

Stack-wise it’s Next.js on the surface and a lot of “schedule audio from the gesture you still have” underneath—if you’ve shipped Web Audio in Chrome, you know the drill.

If you actually try it, use headphones; laptop speakers will make you blame the game for physics that isn’t its fault.

Play it here when you’re bored: https://dialedsoundgame.com/

If you’ve shipped something similar and found a different compromise for “comfortable loudness,” I’m curious what worked on your end—reply below.

Why Instagram Adds "AI Info" to Your Photos (and a way to fix it in the browser)

sam lee — Mon, 09 Mar 2026 05:31:04 +0000

Instagram and a few other platforms are now reading metadata in your images to detect AI-generated content. They look at things like C2PA and certain EXIF fields, then add an "AI Info" label. You can’t turn it off in the app.

I ran into this after using an AI upscaler on a photo. The image was mine, but the platform still tagged it. Fair enough from their side, but not great if you only used AI for small edits and don’t want every post labeled that way.

I looked for tools that could strip the relevant metadata. A lot of options were either desktop software or sites that asked you to upload everything to their servers. I didn’t want to hand over my images.

I ended up using a browser-based tool that runs locally. You drag in the image, it removes C2PA and the related EXIF data, and you download a clean file. No uploads, no signup. I used it on a few photos before posting and the labels stopped appearing. If you’re in a similar situation, removeailabel.com does this and is free to use.

I’m also curious how different platforms handle it—Instagram vs Pinterest vs TikTok—if you’ve seen any differences.

Building a Gold Price Calculator with Next.js and a Dual-API Fallback

sam lee — Fri, 13 Feb 2026 14:04:20 +0000

When I set out to build a gold value calculator—something users could use to check melt value by weight and purity—the first thing I had to figure out was where to get live gold prices. Most financial data APIs are paid or rate-limited, and I needed something that could handle production traffic without breaking.

The API Landscape

I looked at a few options:

GoldAPI.io — straightforward REST endpoint, returns XAU (gold) price per troy ounce. Free tier: 100 requests/month. Paid plans scale from there.
MetalpriceAPI — similar concept, supports multiple metals and currencies. Also has a free tier with monthly limits.
Metals-API, Kitco, etc. — various pricing and feature sets.

I didn’t want to depend on a single provider. If one API went down or hit rate limits, the whole calculator would fail. So I designed a primary + fallback pattern: try GoldAPI first, then MetalpriceAPI if that failed.

Handling Different Response Formats

The tricky part was normalizing the responses. GoldAPI returns price per troy ounce directly. MetalpriceAPI’s “latest” endpoint uses rates.USDXAU for “1 ounce of XAU = $X” — but their docs warn that some setups return XAU (how much gold you get per $1) instead, so you have to check and use 1/XAU when needed. I ended up with a small adapter that maps both provider responses into a common structure: 24K price per gram, then derive 14K, 18K, etc. from purity ratios.

Server-Side Caching and SSR

Since gold prices don’t change every second, I used Next.js unstable_cache (or equivalent) to cache the API response on the server. That way:

The first request populates the cache.
Subsequent requests use cached data for a set TTL (e.g. 15 minutes).
The initial HTML includes real prices for SEO and fast first paint, instead of empty placeholders.

The client then hydrates and can refetch on currency change or user interaction, but the initial load is server-rendered with real data.

Timeouts and Error Handling

Both APIs can be slow or unavailable. I added a 15-second timeout per request. If the primary provider times out or returns 429, we immediately try the fallback. If both fail, we fall back to a static price (with a clear “stale data” indicator) so the UI doesn’t break. Users still get a usable calculator; they just see that the price might be outdated.

What I’d Do Differently

Rate limit awareness: On the free tier, 100 requests/month sounds like a lot until you realize server-side fetches + client refreshes can burn through that quickly. Caching is essential.
Webhook or scheduled job: For a higher-traffic app, I’d consider a cron job that fetches prices periodically and stores them (e.g. in a DB or KV store), so the app reads from storage instead of calling external APIs on every request.

If you’re working with commodity or metal price APIs, the same patterns apply: normalize responses, cache aggressively, and always have a fallback. The calculator I built is live at MyGoldCalc if you want to see the result—supports grams, troy ounces, and common purities like 10K, 14K, 18K, 22K.

A Free Chronological Age Calculator (And Why Small Utilities Still Matter)

sam lee — Tue, 10 Feb 2026 16:28:47 +0000

If you've ever had to fill in "chronological age at date of testing" on a form—assessment, IEP, or clinical report—you know the pain: count months and days by hand, watch for leap years, double-check. One wrong month and the whole thing feels off.

I stopped doing that and started using a free online chronological age calculator. Two dates in (e.g. birth date and test date), exact age out in years, months, and days. No signup, no install. It runs in the browser and handles leap years and variable month lengths correctly.

Why this matters (especially in schools and clinics)

In education and clinical settings, age often has to be exact—years, months, and days—for standardized assessments (e.g. Pearson) and paperwork. Manual counting is error-prone. A small utility that does one thing well reduces mistakes and saves time. Plus: no account and no stored data means it's safe to use and to recommend on shared devices.

The tool I use

When I need precise chronological age for forms or reports, I use Chronological Age Calculator. Free, no account, and the logic matches what assessment manuals expect so numbers stay consistent.

Takeaway

Single-purpose tools—one input, one output, no fluff—still have a place. If you regularly need "age at testing" in years, months, and days, bookmark one solid calculator and move on to the actual work.

If you have a similar "small tool" you rely on (age, date diff, units, etc.), drop it in the comments.

Building a Production-Ready Square Image Editor with Next.js: Lessons from SquareImage

sam lee — Thu, 15 Jan 2026 02:20:03 +0000

As a full-stack developer who recently built a square image editor, I want to share how Next.js enabled us to create a performant, SEO-friendly tool that handles client-side image processing efficiently.

Technical Architecture Highlights:

Next.js 14 with App Router: Leverages React Server Components for initial page load performance while maintaining client-side interactivity

Client-Side Image Processing: All image manipulation happens in the browser using Canvas API, ensuring zero server costs and maximum privacy

Dynamic Imports: Heavy components like the image editor are lazy-loaded to reduce initial bundle size

Responsive Design: Tailwind CSS with mobile-first approach ensures consistent experience across devices

Key Technical Decisions:

javascript
// Example of our dynamic import strategy
const ImageEditor = dynamic(() => import('@/components/image-editor'), {
loading: () =>
});

Why This Architecture Works:

SEO Optimization: Next.js SSR ensures our tool pages rank well for terms like "free square image maker"

Performance: Edge caching and optimized images via Next.js Image component

Scalability: Static generation for landing pages, client-side rendering for the editor

The entire project is built with TypeScript and includes comprehensive structured data markup. You can explore the live implementation at: squareimage

For developers interested in building similar tools, I recommend starting with Next.js for its excellent developer experience and production-ready features out of the box.