Forem: Tools Crazy

Building a Multi-Model AI Image Generator as a Chrome Extension

Tools Crazy — Wed, 13 May 2026 01:57:17 +0000

I shipped AI Photo Genie - a Chrome extension that lets you generate images with FLUX, Z-Image, Seedream, and Nano Banana directly from the toolbar. Here are the architectural decisions that made it work.

The Problem

AI image tools require tab-switching. Generate -> download -> upload to editor -> back to work. This takes 2-3 minutes per image. I wanted the full generation loop - prompt -> image -> edit - to happen without leaving the browser.

The Architecture

Chrome Manifest V3 restrictions shaped every decision.

Background Service Worker for API Calls

The extension popup has strict execution limits (and will be killed if it hangs). Long-running AI API calls must be offloaded to the background service worker. The popup sends a message, the service worker calls the API, and replies back via message passing. The key: return true from the message listener to keep the channel open asynchronously.

Unified Model Adapter

FLUX, Z-Image, Seedream, and Nano Banana all have different request formats, authentication patterns, and rate limits. I built a single adapter layer that normalizes them into one interface. The popup never knows which API it is hitting - it just calls generateImage({ model, prompt, width, height }) and gets back a blob URL.

Free Credits Without Signup

To eliminate the conversion-killing signup step, I use a device fingerprint tied to the extension install for daily credit tracking. Not bulletproof against determined abusers - but it removes all friction for legitimate users. Install -> generate in under 60 seconds.

PhotoQuill Integration

Generated images open directly in PhotoQuill - our browser-based Photoshop alternative - via chrome.tabs. No file downloads needed between tools. The extension creates a tab, waits for it to load, then sends the image data via message passing.

Key Lessons

Service workers die after 30s - break long operations into smaller chunks with keepalive pings
chrome.storage.local is a sync bottleneck - batch reads/writes, do not call on every keystroke
MV3 has no background page - every state you need must be explicitly persisted; do not assume anything survives between events
Different models = different valid aspect ratios - build a model capability manifest early, not as an afterthought

Result

Install -> generate in under 60 seconds, no account required. Free daily credits, no watermarks. Optional paid plans from $4.90/month for heavier usage.

Try it: AI Photo Genie on Chrome Web Store

Questions about Chrome extension architecture, MV3 service worker quirks, or multi-model AI routing? Happy to dig in.

Building a Free Browser-Based PBR Texture Generator (No Plugins, No Uploads)

Tools Crazy — Tue, 12 May 2026 02:50:16 +0000

I built NormalMap AI — a free, browser-based tool that generates complete PBR texture sets (Normal, Roughness, AO, Metallic, Height, ORM) from any uploaded image. Here's what I learned building it.

Demo Video

Screenshots

The Problem

Game devs and 3D artists have always needed PBR texture maps. The traditional tools:

Photoshop 3D filter: removed in newer versions, never great
Substance Painter: $49.99/month per seat — a lot for hobbyists or small studios
Free desktop tools: slow, require installs, inconsistent results

My goal: make the full PBR workflow free, instant, and browser-native.

Technical Approach

Core pipeline: WebGL compute shaders for all map generation.

Normal map: Sobel operator on height-converted luminance, GPU-computed
Roughness: variance + high-frequency detection across local neighborhoods
AO: SSAO-style hemisphere sampling in screen space
Height: multi-scale luminance integration with gamma correction
Metallic: saturation + specular estimation from luminance

Real-time 3D preview uses Three.js + custom HDRI loader, running at 60fps.

The Seamless Texture Maker

This was the hard part. Auto seam repair uses a 3-algorithm cascade:

Optimal offset search: finds the best tile offset to minimize edge discontinuity
Min-cut seam repair: graph-cut algorithm to find the minimum-cost seam path
Structural patch repair + low-frequency balance: handle remaining artifacts

Plus clone and healing brushes for manual touch-up, and a delight pass to remove uneven lighting before tiling.

AI Integration

Added AI texture generation from text prompts (FLUX + other models via Runware). Users can generate a source texture from a prompt, which automatically feeds the PBR pipeline. Credit-based pricing: 5 free credits/day, paid plans from $19.90/month.

Results

The free tier covers 90% of use cases for hobbyists and indie devs
AI generation is where the revenue comes from
Biggest surprise: transparent PNG maker (black + white matte removal for VFX) became a top use case I didn't anticipate

Tech Stack

Frontend: Astro + TypeScript
Rendering: WebGL / Three.js
Auth + DB: Supabase
Payments: Creem
AI providers: Runware + Kie

Questions for IH:

How do you price free-tier limits to convert without annoying power users?
Anyone else building browser-native GPU tools? What's your WebGL/WebGPU strategy?

Try it: https://normalmap.ai

Try it out here: NormalMap AI

NormalMap AI main interface: AI Generate panel, real-time 3D sphere preview, and full PBR map thumbnails (Normal, Roughness, AO, Metallic, Height, ORM).

A full-resolution tangent-space normal map (blue-purple) ready for Unity, UE5, or Blender.

Building a Browser-Based Photoshop Alternative with WebGPU

Tools Crazy — Mon, 11 May 2026 06:52:06 +0000

I spent 14 months building PhotoQuill, a browser-based Photoshop alternative that runs entirely on WebGPU. Launched 2 weeks ago. Here's what I learned.

Why I Built This

I'm a designer turned developer. Every time I opened Photoshop, I had to wait forever for it to load. Plus, Adobe's $22.99/month subscription felt too expensive for occasional use. I thought: what if there was a browser version that just works, instantly, and for free?

The Technical Challenge

I started with Canvas 2D API. Performance was terrible with large images. Then I discovered WebGPU - the new browser GPU API that gives you direct access to graphics hardware.

Key decisions:

WebGPU over WebGL (3-5x performance boost)
Pure client-side processing (privacy + zero server costs)
Full PSD compatibility, not just export (hardest part)

Three Hardest Technical Problems

Reverse-Engineering PSD Format

Photoshop's .psd format has no complete public documentation. I spent a month studying the ag-psd library source code to understand layers, masks, blend modes, and data structures. Smart Objects were the worst - they're nested PSD files.

WebGPU Performance Optimization

Getting 60fps canvas rendering in a browser required careful GPU memory management:

Tile-based rendering (split layers into chunks)
Only render visible areas
Compute Shaders for filters (2x faster than Fragment Shaders)

Result: smooth editing even with 500MB PSD files.

Implementing 27 Blend Modes

Photoshop has 27 layer blend modes (Multiply, Screen, Overlay, Color Dodge, etc.). Each one required writing GLSL shaders and ensuring pixel-perfect match with Photoshop's output. 2000+ lines of shader code.

What Worked

Ship MVP fast: First version had just layers, brushes, and export. Launched in 2 weeks.
Build in public on Twitter: Daily progress updates built early audience.
Focus on one killer feature: Full PSD compatibility. Competitors only do partial support.
Freemium model: Core editor free forever. AI features are paid add-ons.

What Didn't Work

Trying to build 50 features at once: Took 3 months to realize I should ship with 10 core features first.
Ignoring mobile: 30% of users are on mobile. Had to rebuild the UI.
Over-optimization: Spent 2 weeks optimizing a feature only 1% of users touch.

Current Status (2 weeks post-launch)

800+ users (no paid ads)
15% day-1 retention
First paying customer yesterday
4.6/5 rating on Product Hunt

Tech Stack

Frontend: React + TypeScript + Zustand
Rendering: WebGPU + GLSL Shaders
PSD parsing: ag-psd (heavily modified)
Hosting: Cloudflare Pages (free tier)

Cost Structure

Server: $0 (static site)
AI API: ~$50/month (user-paid)
Domain: $12/year
Total: Nearly zero operating cost

Advice for Indie Hackers

Pick the right tech: WebGPU enabled desktop-class performance in a browser.
Freemium works: Free core attracts users. Premium features convert.
Build in public: Twitter exposure drove 60% of early traffic.
Solve real pain: Adobe's price + install requirement + privacy concerns = clear market need.

Open Source Plans

Planning to open-source the core PSD parser and WebGPU rendering engine under MIT license. Want to help other developers build similar tools.

Questions for the Community

What performance bottlenecks have you hit building browser apps?
Would you consider using WebGPU over Canvas/WebGL?
Any experience with freemium pricing models?

Try it: https://photoquill.com

Happy to answer technical questions about WebGPU, PSD format, or indie development.

Try it out here: PhotoQuill