VS Code 擴充功能以 Gemma 3 自動生成圖片替代文字

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

Every codebase I've touched has the same line in it:

<img src="/imgs/cookie.png" alt="" />

It's rarely because we don't care about accessibility. Describing forty images is just the most boring job in front-end, so it gets pushed to "later."

So I built a VS Code extension that does it for me. Hover over any <img> with a missing or empty alt, click Generate alt text, and the description is written straight into your code.

Feeling really lazy? Press Cmd+Shift+A (Ctrl+Shift+A on Windows/Linux) and it fills in every empty alt in the file at once.

A few small rules keep it safe to trust:

It never overwrites alt text you already wrote.
Failures are reported per image, and the successful ones are still applied.
Output is escaped, so a stray quote can't break your markup.

Code

0shuvo0 / ai-img-alt-text-ext

Generate accessible image alt text in HTML, JSX, and TSX files using a locally running Ollama vision model. Image contents are sent only to the Ollama server you configure.

AI Image Alt Text

Generate accessible image alt text in HTML, JSX, and TSX files using a locally running Ollama vision model. Image contents are sent only to the Ollama server you configure.

Features

Hover over an <img> element with an empty or missing alt attribute and select Generate alt text.
Press Cmd+Shift+A (or Ctrl+Shift+A on Windows/Linux) to fill empty or missing alt attributes in the current file.
Supports multiline tags, other attributes, workspace-relative image files, and HTTP(S) image URLs.
Existing non-empty alt text is never overwritten. Bulk generation reports individual image failures and applies successful results together.

Requirements

Ollama running locally or at a server you can access.
A vision-capable model installed in Ollama, for example:
```
ollama pull gemma3:latest
```

The first generation prompts for the Ollama server URL (for example http://localhost:11434) and model name. These values are saved in the VS Code user settings. To change them…

How I Built It

The whole thing runs on Gemma 3 through Ollama, entirely on my own machine.

When you click the button, the extension:

Finds the image. It checks the workspace root first, then common static folders like public/, so /imgs/cookie.png just works. Remote URLs work too.
Sends it to the local Gemma model with a short prompt asking for a concise, useful description.
Writes the result back into the alt attribute.

Setup is two steps: ollama pull gemma3:latest, then point the extension at your Ollama URL. The model name is a setting, so you can swap in any other vision model without touching the code.

Why Does Open Innovation Matter?

Alt text feels like a perfect job for a hosted API, until you think about what you'd be sending it.

Your images stay yours. Client mockups, unreleased products and internal dashboards often sit in a repo long before anyone should see them. With a local model, nothing leaves the laptop.

It costs nothing per image. A big project can have hundreds of images. Running them through Gemma costs electricity, not a bill that grows with your codebase.

It's swappable. If a better open vision model shows up next month, it's a one-line settings change. I'm not tied to one provider's pricing or availability.

The honest trade-off: a local model is slower than a hosted API. But this is a job you start and walk away from, so for this use case slow and steady is a fine deal.

The Lazy Payoff

I ran it on 20 images from one of my projects.

Time: just 3 minutes, versus roughly 10 minutes writing them by hand.
Usable as-is: 18 out of 20 descriptions needed no editing.
Where it struggled: Animated or vector images eg gif files

Prize Categories

Best Use of Gemma: every description is generated by Gemma 3, running locally through Ollama.