{"id":27570,"date":"2024-05-07T16:12:52","date_gmt":"2024-05-07T14:12:52","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27570"},"modified":"2024-05-07T18:34:33","modified_gmt":"2024-05-07T16:34:33","slug":"tutorial-easy-client-side-ai-translator-with-transformers-js-codemotion","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/ai-ml\/tutorial-easy-client-side-ai-translator-with-transformers-js-codemotion\/","title":{"rendered":"Tutorial: Easy Client-side AI Translator With Transformers.js – Codemotion"},"content":{"rendered":"\n
\n\n\n\n

Normally when we think of integrating an Artificial Intelligence model into a Web App, we immediately think of servers in Python or, even more often, cloud platform APIs. In this small guide, however, we want to explore a less trodden path: the possibility of including AI models directly in Web Apps for client-side use today thanks to JavaScript and the current Web Standards!<\/p>\n\n\n\n

But before we launch into the fantasy and the code, let’s introduce you to the main characters of this story.<\/p>\n\n\n\n

Meet the Transformers\u2026<\/strong><\/h2>\n\n\n\n

“Transformers” have revolutionized the field of natural language processing (NLP) and artificial intelligence: this architecture, based on the concept of “self-attention”, allows models to pay attention to different parts of a text simultaneously, thus capturing the relations between words<\/em> even if they are distant in the sequence.<\/p>\n\n\n\n

But what makes “Transformers” so special?<\/strong><\/p>\n\n\n\n

Unlike traditional sequential neural network<\/a> models, such as recurrent neural networks (RNNs) or convolutional neural networks (CNNs), which process data sequentially, “Transformers” are able to process sequences in parallel, making processing much more efficient and faster.<\/p>\n\n\n\n

Transformers.js \u2013 The Library to Run [Almost] All Models Available on Hugging Face in the Browser!<\/strong><\/h2>\n\n\n\n

Among the many new tools and software related to AI, you might have missed a solution that combines the “Transformers” and the web world: it is the Transformers.js library!<\/p>\n\n\n\n

This library allows you to run artificial intelligence models available in the Python world directly in your browser<\/strong>, thus opening up new possibilities in the field of web development and beyond.<\/p>\n\n\n\n

With Transformers.js, you can easily incorporate powerful NLP models, such as GPT and BERT<\/a>, but also Computer Vision tasks like image-to-text, depth-estimation, and much more, into your web applications, Node.js, or Electron!<\/p>\n\n\n\n

All without the need to rely on external servers or cloud services since everything is executed inside the browser<\/strong>.<\/p>\n\n\n\n

This feature, in addition to the obvious low infrastructure cost, introduces a complete level of privacy: sensitive data (such as health status or webcam images) may not leave the user’s device; indeed, after downloading the model, your web app will also work offline!<\/p>\n\n\n\n

But how can we start using Transformers.js in our JavaScript <\/a>projects? Keep reading to find out!<\/p>\n\n\n\n

Now Let’s Experience the Thrill of Creating a True Web App Based on AI\u2026<\/strong><\/h2>\n\n\n\n

Here’s the most exciting part: putting into practice what we’ve discussed and creating a real web app based on artificial intelligence using Transformers.js!<\/p>\n\n\n\n

In this tutorial, we will guide you step-by-step through the creation of a simple web application (an AI translator tool) that uses a “Transformers” based text generation model to translate sentences from Italian to English. You’ll see how easy it is to integrate Transformers.js into your project and start exploring the world of Artificial Intelligence in a creative and familiar way.<\/p>\n\n\n\n

Prepare your favorite code editor and let’s tackle this simple AI translator step by step\u2026 like in a cooking recipe!<\/p>\n\n\n\n

Practical Recipe for an AI Translator Integrated into a Web Page<\/strong><\/h2>\n\n\n\n

For example, we will develop a simple translator that will use an AI model to translate from Italian to English<\/a> with a click!<\/p>\n\n\n\n

Requirements<\/strong><\/h3>\n\n\n\n

You don’t need to know about AI, Python<\/a>, or data science, just get by with vanilla JavaScript, HTML5, and CSS: the recipe is designed to be clear and accessible!<\/p>\n\n\n\n

For example, we will not use any bundler but a simple \/public<\/code><\/strong> folder to be served with your favorite web server.<\/p>\n\n\n\n

Ingredients<\/strong><\/h3>\n\n\n\n

For our web app, we will need three main ingredients:<\/p>\n\n\n\n

A minimalist UI:<\/strong><\/p>\n\n\n\n

\"simple<\/figure>
\n