DEV Community: sir lu

Resize and Pad AI Images for Social Media Aspect Ratios with HTML5 Canvas

sir lu — Sun, 30 Aug 2026 03:57:57 +0000

AI-generated art often outputs standard 1:1 or 16:9 aspect ratios. Adapting these images for social platforms (Instagram 4:5, YouTube Banners, Twitter Headers) without awkward cropping requires canvas padding and blur backgrounds.

Creating a Blurred Padding Background

function resizeWithBlurredBackground(sourceImg, targetWidth, targetHeight) {
  const canvas = document.createElement('canvas');
  canvas.width = targetWidth;
  canvas.height = targetHeight;
  const ctx = canvas.getContext('2d');

  // 1. Draw scaled background with CSS blur filter
  ctx.filter = 'blur(20px)';
  ctx.drawImage(sourceImg, 0, 0, targetWidth, targetHeight);
  ctx.filter = 'none';

  // 2. Draw sharp original image centered on top
  const scale = Math.min(targetWidth / sourceImg.width, targetHeight / sourceImg.height);
  const x = (targetWidth - sourceImg.width * scale) / 2;
  const y = (targetHeight - sourceImg.height * scale) / 2;

  ctx.drawImage(sourceImg, x, y, sourceImg.width * scale, sourceImg.height * scale);
  return canvas.toDataURL('image/png');
}

This technique ensures images match social platform dimensions while maintaining aesthetic composition.

Resize AI images for social platforms with custom aspect ratios using Canvas Resizer.

Why Static Export Wins Over Serverless APIs for Web Utility Tools

sir lu — Sun, 23 Aug 2026 03:33:48 +0000

When designing modern micro-SaaS web utilities (calculators, formatters, text cleaners), developers often default to Serverless Edge Functions or Server-Side Rendering (SSR).

However, for single-task utility sites, this approach often introduces unnecessary architecture overhead: cold-start latency, cloud costs, and potential data privacy concerns.

Here is why adopting a Pure Client-Side Static Export (output: 'export') model is often a superior architectural decision.

1. Zero Cloud Overhead & Unlimited Scalability

Serverless functions offer free tiers, but traffic spikes or malicious bot attacks can quickly trigger unexpected usage billing.

By executing all processing in the client browser:

Infrastructure: Reduced to hosting static HTML/JS/CSS on an Anycast CDN (e.g., Cloudflare Pages, Vercel Static).
Cost Structure: Fixed at $0/month regardless of whether you serve 10 or 1,000,000 requests per day.

2. Eliminating TTFB Latency

Server-rendered pages demand a network round-trip to compute the initial HTML. With static exports deployed via edge CDNs:

Initial Time To First Byte (TTFB) drops below 50ms globally.
Sub-pages load instantaneously since assets are cached aggressively by the user's browser.

3. Privacy-First Architecture

In an era of increasing data privacy awareness, users are often hesitant to paste proprietary code snippets, API keys, or enterprise prompts into unknown third-party tools.

Shifting calculation logic to the browser provides an uncompromised privacy guarantee: data literally cannot leave the user's device.

Example: Offloading Computations to Web Workers

To prevent client-side processing from blocking the main UI thread during heavy text tokenization or parsing, offload tasks to Web Workers:

// worker.ts
self.onmessage = (e: MessageEvent<{ text: string }>) => {
  const { text } = e.data;

  // Heavy computation executed off the main UI thread
  const result = heavyTextTransformation(text);

  self.postMessage(result);
};

Conclusion

Serverless architectures are fantastic for stateful apps with databases, but for micro-utilities, client-side static export is hard to beat.

This architecture powers RunAIToolkit — a privacy-first suite of zero-latency AI tools built entirely with Next.js static export.

I was tired of laggy, ad-bloated web tools, so I built a zero-latency AI toolkit that runs 100% in the browser.

sir lu — Sun, 16 Aug 2026 10:31:45 +0000

Hey r/SideProject,

Like many of you, I spend half my day switching between LLMs, tweaking prompts, and handling AI-generated assets. But every time I needed a simple task done—like estimating API costs, cleaning up weird Markdown artifacts, or splitting a Midjourney 2x2 grid—I had to rely on sketchy, ad-riddled websites that felt sluggish and kept uploading my data to who-knows-where.

I figured: None of these simple operations actually require a server.

So over the past few weeks, I built RunAIToolkit—a set of ultra-fast, privacy-first micro-tools that execute entirely on the client side.

💡 What I built so far:

AI Token & API Cost Estimator: Calculates exact token usage and estimates API costs across top LLMs (GPT-4o, Claude 3.5, DeepSeek R1). No more surprise cloud bills after running long prompts.
Prompt & Markdown Cleaner: Strips system artifacts, invisible unicode characters, and unwanted formatting from LLM outputs instantly.
Midjourney / Flux Grid Splitter: Uses local HTML5 Canvas to slice 2x2 image grids into high-res individual files with zero compression loss and zero upload delay.

🛠️ Key Technical Choices & Takeaways:

Static Export + Cloudflare Pages: Built with Next.js (App Router) and exported as pure static files to Cloudflare’s Anycast CDN. TTFB is under 50ms globally.
Zero Backend Cost: Since all logic runs in Web Workers and local JS, server maintenance cost is literally $0/month.
Data Privacy by Design: User prompts, text, and images never leave the browser. Perfect for developers handling NDA-sensitive data.

Why I Built a Zero-Latency AI Utility Platform Running 100% in the Browser

sir lu — Sun, 16 Aug 2026 10:20:45 +0000

When building helper tools for AI workflows—like estimating token counts, cleaning LLM output formatting, or splitting image grids—most online solutions share two frustrating drawbacks:

Privacy Concerns: Passing prompt context or generated assets through third-party servers.
Server Overhead & Latency: Unnecessary API roundtrips and cloud hosting costs for operations that modern browsers can easily execute locally.

To solve this for my own daily workflow, I built RunAIToolkit—a suite of browser-first AI utilities designed with a zero-server-cost architecture.

Here is a breakdown of how it works under the hood and why client-side execution makes sense for AI micro-tools.

🛠️ What's Under the Hood?

1. AI Token & API Cost Estimator

Instead of making backend requests to compute token counts, tokenization logic runs directly inside browser-side Web Workers.

How it helps: You can estimate costs for models like GPT-4o, Claude 3.5, and DeepSeek R1 locally without exposing proprietary prompts or system instructions.
Try it here: AI Token & API Cost Estimator

2. Prompt & Markdown Cleaner

Raw LLM outputs frequently contain hidden unicode artifacts, system tags, and inconsistent markdown formatting.

Implementation: Uses client-side regex transforms to strip unnecessary formatting instantly without high-latency server trips.
Try it here: Prompt & Markdown Cleaner

3. Midjourney & Flux Grid Splitter

Midjourney and Flux output 2x2 image grids that need to be sliced into single high-res images.

Implementation: Slices images instantly using local HTML5 Canvas (ctx.drawImage). Because processing occurs strictly in memory, image uploads are instantaneous and quality remains untouched.
Try it here: Midjourney / Flux Grid Splitter

⚡ Technical Stack & Architecture

Framework: Next.js (App Router) with Static Site Generation (output: 'export')
Styling & UI: Tailwind CSS + Shadcn/ui
Deployment: GitHub + Cloudflare Pages (Anycast Edge Network)
Operating Cost: $0/month (Zero backend servers or serverless execution costs)

💡 Key Takeaways for Web Developers

Shift Logic to the Client: Modern JavaScript engines and Web Workers can handle token calculations and canvas manipulation in milliseconds.
Static Export + Edge Hosting = Speed: Serving pre-rendered HTML straight from CDN edge nodes delivers global TTFB (Time to First Byte) under 50ms.
Privacy as a Feature: When input data never leaves the client's memory, you remove security concerns around user data logging entirely.

Check out the live platform at runaitoolkit.com!

I'd love to hear your feedback on the architecture, performance, or suggestions for additional client-side AI tools you'd like to see added next.