DEV Community: popo suke

Can AI Disassemble What AI Created? — Background Removal Stress Test in 8 Levels

popo suke — Wed, 04 Mar 2026 08:02:59 +0000

"AI background removal is amazing, right?"

You've seen the comparison articles. A model standing in front of a white backdrop. Cleanly cut out. "Amazing!" End of article.

Of course it is. A person on a white background? AI could do that in 2020.

In this article, we take the test a little more seriously.

We use Nano Banana 2 (Google's image generation AI) to create progressively more complex images, then feed them into a browser-based background removal AI.

Full disclosure: the background removal tool used here, Image Tools, is a web app I built myself. It runs AI inference entirely in the browser — no server uploads. Since it's my own product, I have no intention of going easy on it. I want to know exactly where it breaks. That's the whole point.

The rules are simple. At what level does it hold up, and where does it collapse?

The Image Tools background removal interface. Runs entirely in the browser — images are never sent to a server.

Rules

Image generation: Nano Banana 2 (Google Gemini family, released February 2026)
Background removal: Image Tools (browser-only, no server upload)
Evaluation: my eyes. No scientific rigor. The only question is "is this usable in practice?"
One image per level. No retries. One shot.

Lv.1 — Warm-Up

Challenge: White background × Simple subject

Nano Banana 2 prompt:
A single red apple on a pure white background, product photography, centered, studio lighting

For a background removal AI, this is the equivalent of morning stretches. If it fails here, it should file for retirement.

Result: ⭐⭐⭐⭐⭐ Flawless

The apple's edge, the stem, the leaf. Not a single pixel out of place. The shadow is gone without a trace.

Well, of course. If we were impressed by this, the article would be over in eight lines. Let's move on.

Lv.2 — The Everyday

Challenge: Gradient background × Person

Nano Banana 2 prompt:
A woman in a dark navy business suit standing in front of a soft blue-to-purple gradient background, professional headshot, upper body

The background upgrades from solid white to a gradient. Still, the subject is a person — the bread and butter of background removal AI. If it stumbles here, there's nothing but hell waiting ahead.

Result: ⭐⭐⭐⭐⭐ Flawless

The gradient background vanishes completely. The wave of her hair, the line of her shoulders, the thin chain of her necklace — all preserved with surgical precision.

I'd like to applaud, but this is still Lv.2. Praising the AI here is like telling a marathon runner "great form" at the 2km mark.

Lv.3 — Getting Serious

Challenge: Cluttered background × Subject

Nano Banana 2 prompt:
A tabby cat sitting on a wooden desk cluttered with books, pens, a coffee mug, and scattered papers, natural window lighting, realistic photo

Now we're talking. The background is full of objects. The cat is sitting directly on the desk. The real question: can the AI tell "background" from "foreground objects that aren't the main subject"?

Result: ⭐⭐⭐ An Unexpected Judgment Call

The cat survived. Good.

The problem is that the books and the coffee mug survived too.

The window, the desk surface, and the background wall are gone. But the objects surrounding the cat — a row of Orwell paperbacks, a mug labeled "STUDIO NOTES," scattered pens — linger on as semi-transparent ghosts.

The AI apparently decided: "This cat and these objects are a package deal."

The coffee mug was classified as the cat's ally. In fairness, the relationship between cats and mugs runs deep. In the history of humanity, the number of times a cat has pushed a mug off a desk likely reaches astronomical figures. One can understand why the AI refused to separate them.

Lv.4 — Camouflage

Challenge: Subject and background are the same color

Nano Banana 2 prompt:
A white Persian cat sleeping on a white fluffy blanket on a white sofa, soft natural lighting, realistic photograph, slightly overexposed

White on white on white. For a background removal AI, this is like fighting an enemy in active camouflage. Color data is almost useless. Can it identify the subject by shape alone?

Result: ⭐⭐⭐⭐ Better than expected — and fascinating

The sofa is gone. The cushions are gone.

But the blanket remains.

The cat and blanket were extracted as a single unit. The boundary between sofa and blanket was cleanly severed, but the boundary between cat and blanket was not.

To be fair, look at the original image again. Can you find the boundary between cat and blanket? The Persian cat's long white fur sinks into the white faux fur throw. Where the cat ends and the blanket begins is unclear even to the human eye.

The AI decided they couldn't be separated. And it's probably right. If it had tried, the cat's lower body would have vanished. The AI chose to rescue the cat by rescuing the blanket along with it — a remarkably pragmatic decision.

Or perhaps the cat has simply fused with the blanket into an entirely new life form. That possibility cannot be ruled out.

Lv.5 — The Hair Battle

Challenge: Complex edges (curly hair, backlighting)

Nano Banana 2 prompt:
A woman with extremely curly voluminous afro hair, standing in a lush green garden with trees and bushes, golden hour sunlight filtering through her hair, realistic portrait photography

The nemesis of background removal: hair. And not just any hair — backlit hair with sunlight leaking through every curl. At the pixel level, the boundary between hair and background simply does not exist.

Result: ⭐⭐⭐ A valiant effort, sabotaged by the sun

The person is extracted successfully. Body line, clothing, face — all fine.

But a golden halo lingers around the hair. The backlight that filtered through each individual strand was classified as "part of the hair" rather than "background."

Is sunlight background, or part of the hair?

In physics, it's photons that passed through from behind. Visually, it's the element that makes the hair glow. The AI chose "when in doubt, keep it." Better to preserve a glow than to shred the edges of the hair.

In practice, this works fine on a white or light background. Put it on a dark background, though, and a golden ghost will appear around the hair. A result that depends on its destination.

Lv.6 — The Threshold of Philosophy

Challenge: Transparent / semi-transparent subject

Nano Banana 2 prompt:
A clear glass wine glass half filled with white wine, sitting on a marble table with a colorful flower garden visible in the background, sharp focus, realistic product photography

What does it mean to "remove the background" of something transparent?

Is the garden visible through the glass part of the glass, or part of the background? Are the flowers refracted in the wine surface the subject, or the scenery? If the AI has an existential crisis at this point, no one can blame it.

Result: ⭐⭐⭐⭐ Surprisingly philosophical

The table disappeared. The napkin disappeared. The olive dish disappeared.

Only the glass remained. The thin stem survived. The delicate base survived.

And here's the most interesting part: the refracted image of the flower garden, seen through the glass, was preserved as part of the glass itself.

This might be a philosophically correct answer. The glass is made of glass, but the strongest proof of glass's existence is the distortion of what lies beyond it. The AI kept that distortion as an "attribute of the glass."

Of course, this means that if you composite this result onto another background, the flower garden will be trapped inside the glass for eternity. A miniature garden in a wine glass. Poetic, but not ideal for product photography.

Lv.7 — Playing Dirty

Challenge: Multiple layers, the definition of "subject" is unstable

Nano Banana 2 prompt:
A person standing behind a rain-covered glass window, their reflection partially visible, city lights blurred in the background, moody cinematic photography, shallow depth of field

Is the subject the person beyond the window? The window itself? The reflection on the glass? Three layers overlap. Even a human would spend 30 minutes in Photoshop on this one.

Result: ⭐⭐⭐ A Diplomatic Answer

The actual person (right side of the frame) is solidly preserved. The window frame is gone. The raindrops are gone. The blurred city lights are gone.

But the reflection lingers.

On the left side of the frame, a faint ghost — the reflection that was on the window — remains, hovering translucently.

Should the reflection be removed or kept? There is no correct answer. It's similar to asking whether a shadow should be removed.

The AI appears to have thought: "Removing it entirely doesn't feel right, but keeping it entirely doesn't feel right either." It arrived at the diplomatic solution of leaving it semi-transparent — like a joint statement at an international summit. No one is fully satisfied. No one can fully object.

Lv.8 — Collapse

Challenge: Subject and background are physically fused

Nano Banana 2 prompt:
A ghostly human silhouette barely visible, made entirely of thin wispy smoke, dissolving into a dense dark fog that fills the entire scene, no clear boundary between body and surrounding mist, very low contrast, volumetric fog, dark art photography

The subject is made of smoke. The background is also smoke. The boundary between subject and background literally does not exist.

This isn't background removal. This is asking the AI to cut out nothingness.

Result: ⭐ — Thank you for your service

The AI cut out something.

In the center of the frame floats a vague gray smudge. You could say it resembles a human silhouette. You could also say it resembles a ghost photograph. If someone told you it was a new entry in the Rorschach test catalog, that would be the most convincing explanation.

The dark background fog was removed. But what remains has no presence as a "subject." Smoke was cut from smoke, and smoke is what remained. Logically sound. Practically meaningless.

This is where the AI draws the line. When the boundary between subject and background does not physically exist, it cannot be processed.

Which is fair. Asking AI to do what humans can't is unreasonable.

Overall Results

Lv	Challenge	Rating	One-liner
1	White bg × Apple	⭐⭐⭐⭐⭐	Retirement avoided
2	Gradient × Person	⭐⭐⭐⭐⭐	Even the necklace chain survived
3	Cluttered desk × Cat	⭐⭐⭐	The mug is apparently the cat's ally
4	White cat × White sofa	⭐⭐⭐⭐	Rescued the blanket to save the cat
5	Curly hair × Backlight	⭐⭐⭐	To keep the sunlight or not, that is the question
6	Wine glass × Garden	⭐⭐⭐⭐	An eternal garden inside the glass
7	Rain window × Reflection	⭐⭐⭐	A joint statement from the UN of pixels
8	Smoke person × Smoke bg	⭐	New Rorschach test entry

Conclusion

Lv.1–2: flawless. Lv.3–4: usable. Lv.5–7: depends on context. Lv.8: impossible.

That's the state of browser-based AI background removal in 2026.

Honestly, Lv.4 and Lv.6 exceeded my expectations. I didn't think separating a white cat from a white blanket, or extracting a transparent wine glass, would work this well. Lv.3's decision to keep the books and mug was unexpected, but "rescue all foreground objects together" is actually a smart strategy.

On the other hand, the light halo in Lv.5 and the reflection ghost in Lv.7 are genuine limitations right now. When pixels sit in an optical gray zone, the AI leans toward "keep it." It prefers the risk of keeping something extra over the risk of destroying the subject. Conservative, but rational.

And Lv.8 — that's not a background removal problem. That's a "what is a subject" problem. When boundaries don't physically exist, neither AI nor humans can find them.

So, is it actually usable?

E-commerce product photos, social media icons, presentation materials — for everyday use cases, Lv.1–4 has you covered. The answer is yes.

And above all, it runs entirely in your browser. No server uploads. Your images never leave your computer.

For anyone who cares about privacy, that might matter more than performance.

Drop an image in. That's it. Everything happens in your browser.

Curious where your images fall on the scale? Give it a try.

Tools Used

Image generation: Nano Banana 2 (Google Gemini family image generation model)
Background removal: Image Tools (browser-based, free)

Can AI Ads Cause an International Incident? I Tested NanoBanana2 in 7 Languages to Find Out

popo suke — Tue, 03 Mar 2026 03:58:59 +0000

Can AI Ads Cause an International Incident? I Tested NanoBanana2 in 7 Languages to Find Out

Tags: ai imagegeneration multilingual google

"NanoBanana2 can finally render Japanese text perfectly!"

Yes. I know. Everyone knows. There are already 200 articles about it.

Here's what I actually want to know: Can it write Arabic — right to left — on a souvenir pamphlet without causing an international incident?

I'm a software engineer living in Vietnam. When you travel around Southeast Asia, you see souvenir shop pamphlets with hilariously wrong foreign text all the time. Every time I see one, I think: "Who approved this?"

So I asked NanoBanana2 to generate souvenir pamphlets for 7 countries, each in its native language. Same prompt structure. One shot. No retries. No cherry-picking.

The results? Some pamphlets were ready to hand out at the airport. Others... well, keep reading.

The 7 Languages

I deliberately chose languages with the most difficult writing systems. Latin-alphabet languages like English or Indonesian are too easy.

#	Language	Script Challenge	Why I Chose It
1	🇯🇵 Japanese	3 scripts mixed (Kanji + Hiragana + Katakana)	Baseline test
2	🇨🇳 Chinese	High-stroke-count characters	Can it write "龍" (dragon, 18 strokes)?
3	🇰🇷 Korean	Hangul block composition	Looks simple, but the rules are strict
4	🇻🇳 Vietnamese	Diacritical marks everywhere	I live here. I'm judging this one personally
5	🇹🇭 Thai	3-story stacking (consonant + vowel + tone mark)	Characters built like apartment buildings
6	🇮🇳 Hindi	Devanagari with connected headline + conjunct characters	The horizontal line connecting everything
7	🇸🇦 Arabic	Right-to-left + characters change shape by position	The final boss

Combined speakers: ~3 billion people. 40% of the world's population.

Rules

Fair test. No tricks. This is science. Souvenir pamphlet science.

Same prompt structure for all languages — "Generate a souvenir pamphlet that would be posted at a souvenir shop in [country] for [product]"
AI writes all the text — I didn't specify any text. Product names, catchphrases, descriptions, prices — all AI-generated. If I specified the text, it would just be a copy test, not a language test
One shot — No regeneration. What you see is the first and only attempt
3 scoring criteria — Text accuracy / Design quality / "Would you actually hand this out?"

One Thing I Noticed Across All 7

Every single image includes the souvenir shop in the background. I asked for "a pamphlet" and got "a pamphlet elegantly displayed inside a fully rendered souvenir shop." Thanks, I guess.

Adding "white background, pamphlet image only" to the prompt would fix this. But the shop backgrounds are actually charming, so I'm keeping them.

Stage 1: 🇯🇵 Japanese — Matcha KitKat

Warm-up round. If it can't do Japanese, this article is 3 lines long.

It did it. Better than expected.

Natural Japanese headlines, accurate product descriptions, and — this is the part that got me — "個包装10枚入り、配りやすく好評です" (individually wrapped, 10 pieces, popular for sharing). The AI considered the shareability of the souvenir.

Price: "¥1,200 (税込1,296円)". It calculated the 8% consumption tax correctly.

Nitpick: It reproduced the KitKat logo, which is a trademark gray area. And the Kyoto souvenir shop backdrop is too clean. Real ones are messier.

Score: 14/15 🟢 Ready to distribute

Stage 2: 🇨🇳 Chinese — West Lake Dragon Well Tea

The headline "一口西湖水，满盏龙井香" is a poetic couplet. This doesn't read like AI-generated text.

The small print accurately describes Dragon Well tea's famous "四绝" (Four Excellences: green color, rich aroma, sweet taste, beautiful shape) — real product knowledge.

Nitpick: The address is fake. Phone number is "XXXXXXXXX". Also, it added "买二送一" (buy 2 get 1 free) without being asked. The AI started running its own promotional campaign.

Fix: Add "don't include addresses or phone numbers" to the prompt.

Score: 13/15 🟡 Remove the fake address, then it's ready

Stage 3: 🇰🇷 Korean — Korean Seaweed Gift Set

Hangul looks simple — circles and lines. But the way those circles and lines combine follows strict rules.

"소중한 분께 전하는 한국의 맛" (Delivering the taste of Korea to someone special). Perfect souvenir headline.

The small text is grammatically correct Korean. Package labels say "맛김" (seasoned seaweed) and "재래김" (traditional seaweed) — realistic details.

Nitpick: ₩35,000 (about $25) for a seaweed gift set? That's a bit steep. Also, the AI added another unsolicited promotion: "Buy 3+ sets, get free seaweed flakes." AI, stop trying to upsell.

Fix: Specify a price range in the prompt if needed.

Score: 13/15 🟡 Adjust the price, then good to go

Stage 4: 🇻🇳 Vietnamese — Vietnamese Coffee

I've lived in Vietnam for 6 years. This is where I judge with near-native eyes.

Vietnamese has diacritical marks (dấu) on top of diacritical marks. The letter "a" alone has 17 variations: à á ả ã ạ â ầ ấ ẩ ẫ ậ ă ằ ắ ẳ ẵ ặ. Can the AI tell them apart?

Yes. It can.

It even generated 3 products in columns: "CÀ PHÊ TRỨNG HÀ NỘI" (Hanoi Egg Coffee), "SET PHIN CÀ PHÊ LƯU NIỆM" (Souvenir Phin Coffee Set), "CÀ PHÊ GÓI DẠNG PHIN GIẤY" (Drip Bag Coffee). These are the actual top 3 coffee souvenirs tourists buy in Vietnam. The product selection is too accurate.

I checked the diacritical marks character by character. ò, ệ, ữ, ủ, ắ — all correct positions, correct marks.

The background shows "QUÀ LƯU NIỆM HỘI AN" (Hoi An Souvenir Shop) with lanterns. If you've been to Hoi An, you'd recognize this vibe instantly.

Nitpick: 150,000 VND (~$6) for an egg coffee gift is a bit cheap for a tourist area. And 3 products on one pamphlet is a lot of information.

Fix: "Focus on a single product with a simpler design" would make it cleaner.

Score: 14/15 🟢 Approved by a Vietnam resident

Stage 5: 🇹🇭 Thai — Mango Sticky Rice

Thai script is a 3-story building. Consonants on the first floor, vowels on the second, tone marks on the third. Change the first floor and the upper floors shift.

I honestly expected things to start falling apart here.

They didn't fall apart.

"สุดยอดของฝากจากเมืองไทย" (Thailand's Best Souvenir) — the headline Thai script looks accurate.

Small text: This is where the 7-language test showed the most variance. When the font size gets smaller, the distinction between vowel marks and tone marks becomes blurry. The text isn't "broken" — it's "hard to read."

Thai script's stacking nature means small font sizes are particularly dangerous. This might be a fundamental limitation rather than a NanoBanana2 problem.

Nitpick: ฿280 (~$8) for mango sticky rice souvenir is actually reasonable. Credit where it's due — AI has good price sense.

Fix: "Use larger font sizes for all text" — this one instruction could fix the readability issue. Especially critical for Thai.

Score: 11/15 🟡 Increase font size, then usable

Stage 6: 🇮🇳 Hindi — Masala Chai Gift Set

Devanagari script. A horizontal line (shirorekha) runs across the top of each word, connecting all the letters. When consonants cluster, they merge into "conjunct characters" — two letters fusing into an entirely different shape. Even humans mess this up.

This was the biggest surprise of the entire test.

"शाही मसाला चाय उपहार सेट" (Royal Masala Chai Gift Set). The shirorekha connects correctly.

Small text lists ingredients with terrifying accuracy:

"शुद्ध असम चाय की पत्तियां (१०० ग्राम)" (Pure Assam tea leaves, 100g)
"६ प्राकृतिक मसाले (इलायची, अदरक, दालचीनी, लौंग, काली मिर्च)" (6 natural spices: cardamom, ginger, cinnamon, clove, black pepper)

It listed 6 spices by their individual Hindi names. And the numbers use Devanagari numerals (१, २, ६) instead of Arabic numerals — the correct choice for Hindi-language content.

Conjunct characters like "प्रा", "स्वा", "ग्रा" are all rendered in their correct combined forms.

Nitpick: The shop name "सोनी गिफ्ट हाउस" (Sony Gift House) might remind people of a certain electronics company. And Delhi's Main Bazaar is definitely not this photogenic.

Score: 14/15 🟢 The Devanagari accuracy is genuinely impressive

Stage 7: 🇸🇦 Arabic — Dates (Najma Palm Fruit) [FINAL BOSS]

Final stage.

Arabic is written right to left. The entire layout reverses. Letters never stand alone — they change shape based on their position (beginning, middle, end of a word). Same letter, four different forms.

Arabic speakers also have extremely high standards for text aesthetics. There's a thousand-year calligraphy tradition. "Sort of readable" doesn't cut it.

Let me be honest: if this one falls apart, nobody would blame the AI.

It didn't fall apart. The final boss has been defeated.

"هدايا تمور فاخرة من المملكة" (Luxury Date Gifts from the Kingdom). RTL is completely correct.

It generated 4 products in columns arranged right to left. Even the column order follows RTL. I did not expect this level of RTL commitment.

Small text: The ligatures (letter connections) look natural. Arabic characters change form based on position (initial, medial, final, isolated), and from what I can see, the forms are correct. However, I'll be honest — I can't read Arabic. The shapes look right, but I can't be 100% certain about the grammar.

Nitpick: This needs a native Arabic speaker to do a final check. My "looks correct" judgment is worth exactly as much as a non-Arabic-speaker's opinion.

Fix: For any language you can't read, always get a native check. But the structure, direction, and design are all pointing the right way.

Score: 13/15 🟡 Get a native check, then it's ready. The boss is defeated

Final Scoreboard

Country	Souvenir	Text	Design	Usable?	Total	Verdict
🇯🇵 Japan	Matcha KitKat	5	4	5	14/15	🟢 Ship it
🇨🇳 China	Dragon Well Tea	4	5	4	13/15	🟡 Remove fake address
🇰🇷 Korea	Seaweed Set	4	5	4	13/15	🟡 Price too high
🇻🇳 Vietnam	Coffee	5	4	5	14/15	🟢 Resident approved
🇹🇭 Thailand	Mango Rice	4	4	3	11/15	🟡 Make text bigger
🇮🇳 India	Masala Chai	5	5	4	14/15	🟢 Best surprise
🇸🇦 Saudi	Dates	4	5	4	13/15	🟡 Need native check

Key Takeaways

1. Headlines: Perfect Across All 7

Every language produced accurate, natural-sounding headlines. Kanji, Hangul, diacritical marks, Devanagari, Arabic script — nothing collapsed. This alone is a massive improvement from where AI image generation was a year ago.

2. Small Text: That's Where the Differences Show

Japanese, Vietnamese, and Hindi stayed accurate even in small print. Thai struggled with readability when font size decreased due to its stacking nature. Adding "use larger font sizes" to the prompt would likely fix this.

3. The AI Understands Commerce

Without being asked, it generated "buy 2 get 1 free" promotions, loyalty discounts, tax-inclusive pricing, and package deals. NanoBanana2 didn't just generate text — it generated sales strategy.

4. Quick Prompt Fixes for Common Issues

Problem	Add to Prompt
Background shop showing	"White background, pamphlet image only"
Small text readability	"Use larger font sizes for all text"
Fake addresses	"Don't include addresses or phone numbers"
Too much info	"Focus on a single product, simple design"

Bonus: The Header Image Was Also Made by NanoBanana2

I asked it to generate "a UN conference investigating AI-generated advertisements."

Pretty good, right? The conference hall atmosphere, colorful pamphlets scattered across the table, "AI-GENERATED ADVERTISEMENT INVESTIGATION" on the big screen. Serious delegates in suits scrutinizing tourist brochures. Exactly what I asked for.

But look closely.

The person sitting at the "JAPAN" nameplate appears to be Indian. The person at "INDIA" appears to be East Asian.

NanoBanana2 can write perfect pamphlets in 7 scripts, but it still can't match country nameplates to the right people.

...So it almost caused an international incident after all.

Conclusion

I asked NanoBanana2 to make souvenir pamphlets in 7 of the world's hardest scripts.

No international incidents occurred.

I went into this fully expecting at least one "💀 would cause complaints if distributed" verdict. The lowest score was 🟡 (usable with minor fixes). Even Arabic — the final boss with its right-to-left layout and position-dependent letter shapes — was handled correctly.

Three things genuinely surprised me:

Hindi — Conjunct characters, connected shirorekha, Devanagari numerals. All correct. The biggest "I did not see that coming" of the test
Vietnamese — I judged this with 6 years of residency. 17 variations of "a" and it nailed them all
The universal sales instinct — The AI doesn't just write text. It writes marketing copy, calculates taxes, and invents promotions. It learned to sell

One thing I know for certain:

When NanoBanana3 comes out, I'll make 7 more pamphlets. With harder languages. Georgian. Tibetan. Khmer.

Until then, I'll be in Vietnam, drinking coffee and waiting.

All tests were conducted using NanoBanana2 (Gemini 3.1 Flash Image) in March 2026.
Every image shown is the first generation — no retries, no cherry-picking.
I have not performed native speaker verification for any language except Vietnamese. If you spot errors in your native language, please let me know in the comments.

I Built 18 Browser-Based Tools with Zero Server Calls — Here's How

popo suke — Mon, 02 Mar 2026 02:06:13 +0000

The Problem

Every time you upload a PDF or image to an online tool, you're trusting a random server with your files. What if the tool could run entirely in your browser instead?

I built two sites that do exactly that:

PDF Tools — 8 PDF tools (split, merge, compress, sign, and more)

Image Tools — 10 image tools (compress, resize, crop, AI background removal, and more)

Zero file uploads. Everything runs in JavaScript on your device.

Tech Stack

React 19 + Vite 7

PDF side: pdf-lib, pdfjs-dist, ExcelJS, jsPDF
Image side: Canvas API, @imgly/background-removal, TensorFlow.js + ESRGAN

1. Code Splitting: 2,775KB → 248KB Initial Load

The first build was huge. Every library loaded upfront, even if the user only needed one tool.

Fix: React.lazy() + Vite manualChunks

// Each tool loads only when selected
const SplitMode = lazy(() => import('./components/SplitMode'));
const MergeMode = lazy(() => import('./components/MergeMode'));
const CompressMode = lazy(() => import('./components/CompressMode'));

// vite.config.js — separate heavy libs into their own chunks
manualChunks: {
  'bg-removal': ['@imgly/background-removal'],  // ONNX Runtime
  'tfjs': ['@tensorflow/tfjs'],                  // ~2MB
  'upscaler': ['upscaler', '@upscalerjs/esrgan-medium'],
  'pdfjs': ['pdfjs-dist'],
}

Result: 91% reduction in initial load. Users only download what they use.

2. Canvas API Does More Than You Think

Most of Image Tools runs on Canvas API alone — no image processing libraries needed.

Compression — just toBlob() with quality parameter:

canvas.toBlob(blob => {
  // compressed blob ready
}, 'image/jpeg', 0.7); // 70% quality

Free-angle rotation — the tricky part is calculating the expanded canvas size:

const rad = angle * Math.PI / 180;
const sin = Math.abs(Math.sin(rad));
const cos = Math.abs(Math.cos(rad));

// Canvas must be large enough to fit the rotated image
canvas.width = Math.ceil(w * cos + h * sin);
canvas.height = Math.ceil(w * sin + h * cos);

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rad);
ctx.drawImage(img, -w / 2, -h / 2);

CSS Filters baked into images — apply filters and export as a file:

ctx.filter = `brightness(120%) contrast(110%) saturate(130%) grayscale(50%)`;
ctx.drawImage(img, 0, 0);
// Now export — filters are permanently applied to the pixels

3. Custom Binary Encoders for BMP, GIF, and ICO

Canvas toBlob() supports JPEG, PNG, WebP, and AVIF. But not BMP, GIF, or ICO.

I wrote custom encoders from scratch.

BMP — requires BGR byte order and bottom-up pixel storage:

// RGBA from Canvas → BGR for BMP (plus row padding to 4-byte boundary)
const rowSize = Math.ceil((width * 3) / 4) * 4;

for (let y = height - 1; y >= 0; y--) { // bottom-up
  for (let x = 0; x < width; x++) {
    const src = (y * width + x) * 4;
    bytes[dst]     = data[src + 2]; // B
    bytes[dst + 1] = data[src + 1]; // G
    bytes[dst + 2] = data[src];     // R
  }
}

GIF — includes LZW compression and 256-color quantization:

// 1. Quantize colors to fit 256-color palette
// 2. Build color lookup table
// 3. LZW encode with dictionary reset at 4096 entries
// 4. Pack into GIF89a format

Writing a GIF encoder was the most challenging part — LZW compression with variable-width codes and dictionary management is not trivial.

4. AI in the Browser — No Server Needed

Background removal with ONNX Runtime (~50MB model, cached after first use):

const { removeBackground } = await import('@imgly/background-removal');

const blob = await removeBackground(file, {
  progress: (key, current, total) => {
    setProgress(Math.round((current / total) * 100));
  },
});
// Returns transparent PNG

AI upscaling with TensorFlow.js + ESRGAN:

const upscaler = new Upscaler({ model });
const result = await upscaler.upscale(img, {
  patchSize: 64,  // Process in 64px tiles to avoid GPU OOM
  padding: 4,     // Overlap between tiles to prevent seams
});

The patchSize: 64 trick is critical — without it, large images crash the browser's GPU memory.

5. Detecting AI-Generated Image Metadata

The Metadata tool parses PNG binary chunks to detect AI generation parameters:

// PNG files contain tEXt and iTXt chunks with metadata
// AI tools embed their parameters here:
// - "parameters" → Stable Diffusion (AUTOMATIC1111)
// - "prompt" / "workflow" → ComfyUI
// - "comment" / "source" → NovelAI

This required writing a custom PNG chunk parser that reads the binary format byte by byte.

6. Lightweight i18n Without Libraries

Both sites support 5 languages (EN, JA, VI, ID, ZH) with a custom 30-line implementation:

const t = (key, ...args) => {
  const str = translations[lang]?.[key] || translations.en[key] || key;
  return str.replace(/\{(\d+)\}/g, (_, i) => args[Number(i)] ?? '');
};

// Auto-detect browser language on first visit
const browserLang = (navigator.language || '').toLowerCase();
if (browserLang.startsWith('ja')) return 'ja';
if (browserLang.startsWith('vi')) return 'vi';
// ...

No react-i18next, no formatjs. Just a plain object lookup with placeholder substitution.

Cost: $1.75/month

Item	Cost
Hosting (Vercel) x2	Free
Domains (Cloudflare) x2	~$21/year
SSL	Free (Cloudflare)
Libraries	All OSS
AI models	Browser-delivered
Total	~$1.75/month

Since all processing is client-side, server costs don't scale with users.

DEV Community: popo suke

Can AI Disassemble What AI Created? — Background Removal Stress Test in 8 Levels

Rules

Lv.1 — Warm-Up

Lv.2 — The Everyday

Lv.3 — Getting Serious

Lv.4 — Camouflage

Lv.5 — The Hair Battle

Lv.6 — The Threshold of Philosophy

Lv.7 — Playing Dirty

Lv.8 — Collapse

Overall Results

Conclusion

Tools Used

Can AI Ads Cause an International Incident? I Tested NanoBanana2 in 7 Languages to Find Out

Can AI Ads Cause an International Incident? I Tested NanoBanana2 in 7 Languages to Find Out

The 7 Languages

Rules

One Thing I Noticed Across All 7

Stage 1: 🇯🇵 Japanese — Matcha KitKat

Stage 2: 🇨🇳 Chinese — West Lake Dragon Well Tea

Stage 3: 🇰🇷 Korean — Korean Seaweed Gift Set

Stage 4: 🇻🇳 Vietnamese — Vietnamese Coffee

Stage 5: 🇹🇭 Thai — Mango Sticky Rice

Stage 6: 🇮🇳 Hindi — Masala Chai Gift Set

Stage 7: 🇸🇦 Arabic — Dates (Najma Palm Fruit) [FINAL BOSS]

Final Scoreboard

Key Takeaways

1. Headlines: Perfect Across All 7

2. Small Text: That's Where the Differences Show

3. The AI Understands Commerce

4. Quick Prompt Fixes for Common Issues

Bonus: The Header Image Was Also Made by NanoBanana2

Conclusion

I Built 18 Browser-Based Tools with Zero Server Calls — Here's How

The Problem

Tech Stack

1. Code Splitting: 2,775KB → 248KB Initial Load

2. Canvas API Does More Than You Think

3. Custom Binary Encoders for BMP, GIF, and ICO

4. AI in the Browser — No Server Needed

5. Detecting AI-Generated Image Metadata

6. Lightweight i18n Without Libraries

Cost: $1.75/month

Links