Translate Image

Simple script to translate the text found on a selected image. It uses Google Cloud vision and translation apis. To set it up locally you need to authenticate to Google Cloud API https://cloud.google.com/docs/authentication/getting-started

Install translate-image

import "@johnlindquist/kit";
// Menu: Translate Image
// Description: Translate text extracted from a selected image
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri

const vision = await npm("@google-cloud/vision");
const gtranslate = await npm("@google-cloud/translate");
const { Translate } = gtranslate.v2;

const client = new vision.ImageAnnotatorClient();
const translate = new Translate();

const extractText = async (): Promise<string> => {
  const file = await getSelectedFile();
  const [result] = await client.textDetection(file);
  return result.fullTextAnnotation.text;
};

const translateText = async (text: string) => {
  let [translations] = await translate.translate(text, "en");
  translations = Array.isArray(translations) ? translations : [translations];
  return translations.join(" ");
};

div(md("Extracting and Translating..."));
const text = await extractText();
const translation = await translateText(text);

show(
  `
<div>
  <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 text-gray-800 bg-white">
    <div class="overflow-hidden shadow-md">
      <div class="px-6 py-4 border-b border-gray-200 font-bold">Extracted Text</div>
      <div class="p-6 border-b border-gray-200">${text}</div>
    </div>
  </div>

  <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 text-gray-800 bg-white">
    <div class="overflow-hidden shadow-md">
      <div class="px-6 py-4 border-b border-gray-200 font-bold">Translation</div>
      <div class="p-6 border-b border-gray-200">${translation}</div>
    </div>
  </div>
</div>

`,
  { width: 640, height: 420, transparent: true }
);