Image caption generator template

What it does

Drag, drop, caption

Drop an image or browse for one, preview it, and generate a caption in one click.

Ready for alt text

Captions are short plain sentences, and a Copy button puts them on your clipboard.

Checks uploads first

The function only accepts JPG, PNG or GIF images of 4 MB or less, within Vercel’s request limit.

Keeps your key private

The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 captions a minute.

Runs locally in one command

npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the upload and sends it to Image Caption.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { guard, callApi, respond, fail } from '../lib/apiverve.js';

// Vercel caps a function's request body at 4.5 MB, so uploads stop at 4 MB.
const MAX_BYTES = 4 * 1024 * 1024;
const TYPES = ['image/jpeg', 'image/png', 'image/gif'];

/** POST /api/caption (multipart, field "image"): a one-sentence description of the image. */
export async function POST(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const form = await request.formData().catch(() => null);
  const image = form?.get('image');
  if (!image || typeof image === 'string') return fail('Choose an image to caption');
  if (!TYPES.includes(image.type)) return fail('Use a JPG, PNG or GIF image');
  if (image.size > MAX_BYTES) return fail('Images must be 4 MB or smaller');

  const upload = new FormData();
  upload.append('image', image, image.name || 'image');
  return respond(() => callApi('imagecaption', { form: upload }));
}

See the whole file on GitHub →

Deploy it

1. Get a free API key

   The free plan includes 200 credits a month, no card needed. Create your key.

2. Deploy it

   Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.

3. Open your app

   Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the Image Caption API — the call this template makes

1
2
3
4
5
6
7

{
  "status": "ok",
  "error": null,
  "data": {
    "caption": "A golden retriever running through a grassy field on a sunny day"
  }
}