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 }
);