File to Data URL

Helpers to convert files to base64 & base64-encoded data URLs, which are particularly helpful for sending images to LLMs like ChatGPT, Anthropic, and Google.

Live example

Create val
import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";

const dataURL = await fileToDataURL(file);
const response = await chat([
  {
    role: "system",
    content: `You are an nutritionist. 
  Estimate the calories.
  We only need a VERY ROUGH estimate.
  Respond ONLY in a JSON array with values conforming to: {ingredient: string, calories: number}
  `,
  },
  {
    role: "user",
    content: [{
      type: "image_url",
      image_url: {
        url: dataURL,
      },
    }],
  },
], {
  model: "gpt-4o",
  max_tokens: 200,
});

Live example

Create val
import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL";

const base64File = await fileToBase64(file);
let res = await anthropic.messages.create({
  model: "claude-3-5-sonnet-20240620",
  max_tokens: 1024,
  messages: [
    {
      "role": "user",
      "content": [
        {
          "type": "image",
          "source": {
            "type": "base64",
            "media_type": file.type,
            "data": base64File,
          },
        },
        {
          "type": "text",
          "text": `Write an HTML email 
          that evokes this photo in the funniest 
          way possible, with code fences.`,
        },
      ],
    },
  ],
});

Live example

Create val
import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL";

const base64Image = await fileToBase64(image);

const result = await model.generateContent([
  "Write all the names and authors of these books in JSON format. The response should be a valid JSON array of objects, each with 'title' and 'author' properties.",
  {
    inlineData: {
      data: base64Image,
      mimeType: image.type,
    },
  },
]);

Migrated from folder: Archive/fileToDataURL