DEV Community: no-chili

I Built Video Compress Kit: A Free, Private Media Toolkit That Runs in Your Browser

no-chili — Thu, 17 Sep 2026 04:47:00 +0000

I kept running into the same problem: I needed to make a video smaller, trim a clip, or extract its audio, but many online tools introduced another problem first.

They asked me to create an account, added a watermark, or required uploading a private media file to an unknown server.

So I built Video Compress Kit: a free collection of browser-based video, image, and audio tools. There is no sign-up, no watermark, and media processing happens on the user's device.

The idea behind the project is simple:

Free. Simple. Yours.

What Video Compress Kit does

The first release includes six focused tools:

A video compressor with quality and resolution controls
An image compressor for common web image formats
An audio compressor with MP3 as the default output
A video trimmer for removing unwanted beginnings and endings
A video cropper and resizer for changing dimensions and aspect ratios
A video-to-audio extractor for MP3, M4A, AAC, OGG, WAV, FLAC, and WebM audio

The interface is available in English and Japanese. Files can be selected from the device, and a public direct media URL can also be imported when the source allows browser access.

Each tool has its own workflow and explanation. I did not want one generic converter page with a different heading pasted on top. A person trimming a video has different questions from someone compressing an image, so the surrounding guidance, examples, and controls should reflect that task.

Why process media in the browser?

My main product decision was to keep media files on the user's device.

With the usual cloud workflow, a user has to upload a large file, wait for server processing, and download the result. That creates three sources of friction:

Upload time can be longer than the actual processing time.
Private or client media leaves the device.
Server costs eventually push a supposedly free tool toward queues, credits, or file-size paywalls.

Video Compress Kit downloads the application code, then processes the selected media locally. Cloudflare serves the website, but the media file itself is not uploaded to the Video Compress Kit server.

That makes the privacy promise concrete: the video stays in the browser tab where the user selected it.

Building it with Mediabunny

The media layer uses Mediabunny, a JavaScript media toolkit designed around modern browser APIs.

It provides a cleaner way to inspect tracks, decode media, transform video and audio, and write output containers without building the product around a large command-line program compiled to WebAssembly.

The rest of the application uses React 19 and TanStack Start. It is deployed on Cloudflare Workers, while the tool interface is built from reusable shadcn/ui components.

At a high level, the processing path looks like this:

Select a local file or import a public URL
                ↓
         Inspect media tracks
                ↓
    Apply the selected tool settings
                ↓
    Encode the result in the browser
                ↓
          Download the output

I lazy-load optional MP3 and FLAC encoders so people only download those components when they need them. The application also avoids silently returning a video without its audio track when the browser cannot encode the requested combination.

Local processing has real trade-offs

Running everything locally is not a magic performance trick. It moves the work from a remote server to the user's device.

That means processing speed depends on the browser, codec support, hardware, file length, and selected output settings. A recent desktop browser will usually have a better experience than an older phone processing a long 4K recording.

The current web tools accept one file at a time, up to 500 MB. I chose that boundary because a clear limit is better than promising unlimited processing and letting a browser tab run out of memory without explanation.

Format support also depends partly on the browser. When an encoder is unavailable, the interface should explain the limitation rather than pretend every format works everywhere.

These constraints are part of the product design, not details to hide in a footer.

Designing for people who just need the file fixed

Media settings can become technical very quickly. Bitrate, codecs, containers, frame rates, and sample rates are useful, but most people arrive with a simpler goal:

Make this video small enough to share
Remove the first few seconds
Turn this video into an MP3
Resize a clip for a different screen

The interface starts with presets and plain language, then exposes more control where it is useful. It also shows the original and output file sizes after processing so the result is understandable immediately.

There is no login wall before the download. A tool that promises a quick result should not reveal an account requirement only after the user has waited for processing.

What I learned

Three lessons have shaped the project so far.

1. Privacy works best as architecture

A privacy sentence is stronger when the system does not need the file in the first place. Local processing reduces what the service has to collect and protect.

2. A focused tool needs focused content

Duplicating the same marketing copy across every tool is easy, but it is not helpful. Each page should answer the questions that belong to its actual task.

3. Honest limits improve the experience

Browser media APIs are improving quickly, but compatibility and device performance still vary. Clear errors and realistic limits are more useful than a long list of formats that has not been tested.

What is next?

I am currently exploring a video frame extractor for saving a precise frame or exporting images at selected intervals. I also want to improve compatibility, add more practical presets, and use real user feedback to decide which workflows deserve their own tools.

If you regularly compress, trim, crop, or convert media, you can try Video Compress Kit.

I would especially like to know:

Which browser and device did you use?
Which format worked or failed?
What media task still takes too many steps?

That feedback will shape the next release.

The “Too Perfect” Problem: 6 Clues That Make AI Images Feel Synthetic

no-chili — Sun, 23 Aug 2026 09:11:40 +0000

AI image models have become very good at producing impressive pictures. That creates a strange new problem: an image can be detailed, sharp, beautifully lit—and still feel fake within half a second.

Usually the problem is not a dramatic mistake like an extra finger. It is the accumulation of small signals. Surfaces are a little too clean. Light behaves too politely. Every object receives the same amount of attention. The result looks less like a photograph and more like a photograph that has been aggressively optimized.

After comparing a lot of generated portraits, interiors, product concepts, and 3D renders, these are the six clues I notice most often.

1. Every surface has the same “finished” texture

Real materials do not age or reflect light in the same way. Skin has pores and tiny color changes. Painted walls have unevenness. Fabric compresses around seams. Metal may be clean, but its reflections still depend on the surrounding space.

AI images often replace those differences with one generalized finish: smooth, sharp, and slightly glossy. It is attractive at thumbnail size, but it makes skin, plastic, wood, and stone feel as if they came from the same material library.

A useful editing question is: What would this surface do differently from the surface next to it? If the answer is “nothing,” the image probably needs more material separation.

2. The lighting explains everything too clearly

Photography contains ambiguity. A face may be brighter than the background, but one side still falls away. A product can have a clean key light while picking up a weak reflection from a nearby wall. Shadows are rarely identical in softness and direction across a whole scene.

Generated images often use light to describe every form equally well. It is as if the scene were designed to make every object readable. That can look cinematic, but not necessarily photographic.

Try reducing local clarity in secondary areas. Let part of the image be less informative. Real cameras do not give every object equal priority.

3. The depth of field feels painted on

A shallow depth of field is more than a blurred background. Focus changes gradually with distance, and objects on the same plane usually share similar sharpness. AI-generated blur sometimes ignores that geometry: one edge is sharp, the neighboring edge is soft, and a distant object suddenly returns to focus.

When reviewing an image, trace a line from the nearest object to the farthest one. The focus transition should make spatial sense. If it does not, a subtler and more consistent depth treatment usually feels more natural than stronger blur.

4. Small imperfections are missing—or added everywhere

A perfectly clean scene can feel synthetic, but randomly adding grain is not a complete fix. Real imperfections have causes. A fingerprint appears where someone touched a glossy surface. Fabric wrinkles where it bends. Dust collects in specific places. Sensor noise depends on exposure, not on the semantic importance of an object.

The goal is not “more noise.” It is evidence of use, physics, and capture.

This is why a uniform film-grain layer can make an image look vintage without making it look real. The underlying materials and lighting still need believable variation.

5. Color harmony is suspiciously complete

AI models are excellent at palettes. Sometimes they are too excellent. Clothing, props, background accents, and skin tones all cooperate with the same color scheme. In real environments, there is usually at least one color that did not receive the art director’s memo.

That does not mean making the image ugly. A small neutral shift, a cooler reflection, or a less coordinated background object can keep the scene from feeling like a single prompt rendered every pixel.

6. Composition and realism get edited together

This is the most expensive mistake in a good generated image. The composition is already working, so a creator asks for “more realism” and gets a new image with a different face, changed product shape, moved furniture, or altered camera position.

Realism is often a finishing problem, not a regeneration problem.

I built my own workflow around that distinction. I first decide whether the idea and framing are worth keeping. If they are, I work on texture, lighting, color, materials, and camera depth without redesigning the scene. A browser tool such as Image to Realistic can help with this composition-preserving pass when the source is a portrait, product concept, interior, illustration, or render.

A practical review order

When an image feels synthetic, I now check it in this order:

Composition: Is the framing already good enough to preserve?
Materials: Do skin, fabric, glass, metal, and wood behave differently?
Light: Is every area explained too clearly?
Depth: Does focus change consistently with distance?
Imperfections: Do they have a physical reason to exist?
Color: Is the palette a little too coordinated?

This order matters. It prevents a strong composition from being destroyed by unnecessary regeneration, and it turns “make it realistic” into a set of smaller decisions that can actually be evaluated.

The best realistic result is rarely the one with the most detail. It is the one where the details agree with each other—and where a few parts of the scene are allowed to be ordinary.

Why AI influencers need a character system, not another image generator

no-chili — Sun, 16 Aug 2026 07:35:33 +0000

A convincing AI influencer is not just a good portrait. It is a character that stays recognizable across posts, campaigns, and formats.

That sounds obvious, but most image-generation workflows begin from a blank prompt every time. The result may look impressive in isolation while the face, styling, tone, or audience changes from one asset to the next.

The real problem is continuity

For a reusable virtual creator, continuity has several layers:

Visual identity: facial features, hair, proportions, wardrobe, and recurring details
Creative direction: aesthetic, lighting, locations, and camera language
Voice: personality, vocabulary, and the way the character addresses an audience
Positioning: niche, target audience, and the topics the character should or should not cover

If those details live only inside a long prompt, they are easy to lose. A better approach is to treat them as structured character data that can be reused whenever a new scene or campaign asset is created.

A repeatable workflow

The workflow I settled on has three steps:

Define the character once. Store the face, style, voice, niche, and audience as a reusable profile.
Describe the campaign asset. Focus the prompt on the new scene, message, or format instead of rebuilding the identity.
Generate and compare. Check new images or videos against the established character before publishing.

This separation makes iteration much easier. You can change a location, pose, or campaign concept without unintentionally redesigning the person.

What I learned while building it

The biggest product lesson was that more generation controls do not automatically create a better workflow. Users need fewer decisions at the moment of creation, because the important identity decisions should already have been made and saved.

It also helps to show the character reference beside the current asset. Consistency is much easier to judge when the source identity and the new output are visible in the same workspace.

I built AI Influencer Creator around this character-first idea. It lets creators define a reusable virtual persona and then generate images and videos for different scenes while preserving that identity.

I would love feedback from anyone working with generative media: which part of character consistency is hardest in your current workflow—appearance, voice, or creative direction?