In-browser translation w/ Gradio-lite & T5 ⚡️

I’m a huge notion fan and use it to organise my life, notes and to-dos. I’ve been dealing with the french beuracracy lately and sending truckloads of emails, in French.

My usualy workflow is to write something in English (usually in Notion) and then translate it to French with Google Translate/ DeepL, copy to GMail and then hit send.

With the most recent release of gradio-lite, I took it upon myself to create an in-browser translation utility w/ transformers.js that can work within Notion. After a bit of morning hacking Voila! It works! 🔥

You can try it below!👇 (Note: It takes about a minute for the model (T5-small) to download) P.S. If the widget takes too long to load then head over to this dedicated HF space:

On Browser Translation - a Hugging Face Space by reach-vb

https://reach-vb-on-browser-translation.static.hf.space

Impressed!? You might be wondering how exactly does this work! 🤔

Allow me to surprise you, all of this is powered by less than 20 lines of code:

<!DOCTYPE html>
<html>
	<head>
		<script type="module" crossorigin src="<https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/lite.js>"></script>
		<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/lite.css>" />
	</head>
	<body>
		<gradio-lite>
		<gradio-requirements>
		transformers_js_py
		markdown-it-py
		</gradio-requirements>
		
		<gradio-file name="app.py" entrypoint>
		from transformers_js import import_transformers_js
		import gradio as gr
		
		transformers = await import_transformers_js()
		pipeline = transformers.pipeline
		pipe = await pipeline('translation', 'Xenova/t5-small')
		pipe.task = 'translation_en_to_fr'
		async def generate(text):
			return await pipe(text,)
		
		demo = gr.Interface(
		  generate, 
		  gr.Textbox(label="English Text"), 
		  gr.JSON(label="Translated Text", flag=False), 
		  examples=["My name is VB and I live in Stuttgart.", "I like eating Maultaschen and Wurst.", "Can I have a pain au chocolate, please?"], 
		  theme=gr.themes.Soft(),)
		
		demo.launch()
		</gradio-file>
		</gradio-lite>
</body>
</html>

I used the snippet above to create a Hugging Face space and then embedded it to this notion page! ♥️

You can host this anywhere, GitHub pages, Hugging Face spaces, Replit, Vercel, or just run it locally in your browser, fully offline! ⚡️

Check out the in-browser playground that the team prepared to know more about what all you can do with it!: https://www.gradio.app/playground

This is possible all thanks to the hardwork of the Gradio team - specifically Yuichiro! What a legends these all are. 🤗