There have been many AI chat bots built for various use cases. However recently I’ve wondered what it would be like to bake AI into an application. So that’s exactly what I did within my blog.

NLP

NLP is a field of study that focuses on the interaction between computers and human language. It is a subfield of Artificial Intelligence that deals with the design and development of algorithms and models that enable computers to understand, process, and generate human language.

Given the nature of NLP, I wanted to use a model that would be able to understand the content of a blog post and generate translations in a variety of different languages.

There are many ways I could have approached this. I could have used an open source model from Hugging Face like Bert but on this occasion I decided to use one of Google’s Gemini models. It’s faster and more efficient than Bert.

The Model

I’ve used the Gemini 2.0 flash model which is a 1.5B parameter model that is trained on a variety of different languages. It’s also a multilingual model which is perfect for my use case.

The Feature

I wanted the user to be able to translate the blog post into a variety of different languages. The dropdown menu have a set of pre-set languages the user can choose from. I’ve also integrated a search field for custom languages, this handles less well known languages and there is also a fall back to English if the language is not supported.

Utilising the Cloud

Given I’m using a Gemini model for the translations, I know I would have to chunk the data whilst it was being streamed via the API. Given tokens can be expensive, I wanted to ensure I could enable caching to reduce the number of requests to the API. I also went a step further and added a CDN, this allows for a better user experience by ensuring the user is able to see blog posts in the language of the country they are located in.

Cloudflare has been fast and reliable, the free tier is perfect for my blog without worrying about costs.

localStorage.setItem(cacheKey, translatedContent.translatedText);

The Code

One of my favourite things around streaming data from AI models is chunking the data. This allows for a better user experience by ensuring the user is able to see blog posts in the language of the country they are located in. Below is a snippet of the code that does this for the translation of the blog post.

async translateBlogPost(
    content: string,
    targetLanguage: string,
    originalLanguage: string = "en"
  ): Promise<TranslationResult> {
    console.log(
      "Translating blog post to",
      targetLanguage,
      "content length:",
      content.length
    );

    // Split content into smaller chunks for faster processing
    const chunks = this.splitContentIntoChunks(content, 1000);
    console.log("Split into", chunks.length, "chunks");

    // Process chunks in parallel (max 6 concurrent requests to avoid rate limits)
    const translatedChunks: string[] = [];
    const batchSize = 6;

    for (let i = 0; i < chunks.length; i += batchSize) {
      const batch = chunks.slice(i, i + batchSize);
      console.log(
        `Processing batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(
          chunks.length / batchSize
        )}`
      );

      const batchPromises = batch.map(async (chunk, index) => {
        console.log(`Translating chunk ${i + index + 1}/${chunks.length}`);
        const result = await this.translateText(
          chunk,
          targetLanguage,
          originalLanguage
        );
        return result.translatedText;
      });

      const batchResults = await Promise.all(batchPromises);
      translatedChunks.push(...batchResults);
    }

    const finalTranslation = translatedChunks.join("\n\n");
    console.log("Final translation length:", finalTranslation.length);

    return {
      translatedText: finalTranslation,
      originalLanguage,
      targetLanguage,
      confidence: 0.9,
    };
  }

The Demo

Within this blog post, change the language from English to one in the dropdown menu. Search for a rogue language like “Klingon” and see how it handles it. I’ve tried to ensure I catch edge cases and error handling too.