Aryan Singh

Posted on Apr 27

Build a Free AI Image Editor Using Airforce & ImgBB (No Server, Just a Browser!)

#ai #javascript #showdev #webdev

🎨 Build a Free AI Image Editor Using Airforce & ImgBB (No Server, Just a Browser!)

Ever needed to quickly tweak an image with AI but didn't want to fire up heavy software or pay for a subscription? I’ve built a lightweight, zero‑backend web tool that lets you edit your own images using the Airforce AI API, host them temporarily on ImgBB, and keep a local history of your edits – all from a single HTML file.

👉 GitHub Repo: Free-AI-Image-Editor

Star the repo ⭐ to support the project and help others discover it!

🧠 What It Does

Upload an image from your device.
Describe the change you want with a natural language prompt.
Send the image to ImgBB (free temporary hosting).
Process it through Airforce’s image generation/editing models.
Receive the edited image directly in your browser.
All edits are saved in your browser’s localStorage with thumbnails, prompts, and model info – a full edit history!

The editor runs entirely client‑side, so your API keys and images never touch a backend server (except the official APIs). No database, no login, no cost beyond the free tiers of the APIs.

🔧 Features at a Glance

🖼️ Multiple AI models – Nanobanana 2, Image 1 Edit, Flux 2 Pro, and more.
📜 Edit history – Stores up to 25 edits locally, with thumbnails and metadata. Delete individual entries or clear all.
📷 Original/Edited preview – Side‑by‑side comparison.
⚡ Streaming results – SSE‑based real‑time image generation updates.
🛡️ Fully private – Your API keys are only used client‑side; no third‑party tracking.
📱 Responsive – Works on desktop and mobile.

🚀 How to Use (2‑Minute Setup)

1. Get Your Free API Keys

Airforce API Key – Dashboard
ImgBB API Key – api.imgbb.com (free registration, no credit card)

2. Open the Tool

Clone the repo and open Image Edit 2.html in your favourite browser – yes, it’s that simple.

Or just download the HTML file from the repo and double‑click it.

3. Start Editing

Paste your API keys.
Choose an AI model from the dropdown.
Select an image and write a prompt (e.g., “make the sky sunset orange”).
Click Edit Image and watch the magic happen.

All successful edits are automatically added to the history section below.

🧬 How It Works (Code Highlights)

The entire logic is vanilla JavaScript using fetch and the Streams API. Here’s the core flow:

// Step 1: Upload to ImgBB
const publicUrl = await uploadToImgBB(selectedFile, imgbbKey);

// Step 2: Send to Airforce with image_url
const response = await fetch("https://api.airforce/v1/images/generations", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${airforceKey}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: modelSelect.value,
    prompt: prompt,
    n: 1,
    size: "1024x1024",
    response_format: "url",
    image_urls: [publicUrl],
  }),
});

// Step 3: Stream the SSE response
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  // ... process SSE lines, extract final image URL
}

History is stored with localStorage and resized thumbnails are generated using <canvas>. It’s a great example of how powerful modern browsers have become.

⭐ Why You Should Star the Repo

It’s 100% free and open‑source – no hidden fees, no ads.
You can modify it for your own workflows (e.g., batch processing, different storage backends).
It demonstrates real‑world use of SSE, canvas thumbnails, localStorage, and API orchestration – perfect for learning or teaching.
I actively maintain it and welcome contributions, bug reports, and feature requests.

If you find this tool handy, please star the repo on GitHub – it takes a second and helps me know people are using it. Share it with your friends who might need a quick image editor!

🛠️ Tech Stack

HTML5 + CSS (dark theme, fully responsive)
Vanilla JavaScript (no frameworks)
Airforce API – AI image generation/editing
ImgBB API – temporary image hosting
localStorage – edit history persistence

👤 Credits

Built by Aryan Singh – you can find more projects and join the discussion on Discord.

Try it now and never pay for AI image editing again. Happy tweaking! ✨

GitHub Repo | Live Demo (just open the HTML)

DEV Community