Building an Offline AI tool in your browser

Google has always pushed the web forward through its web browser, Chrome. In another exciting move, I was thrilled to hear about Google integrating their Gemini Nano into Chrome.

In this short post, we’ll explore building a lightweight ChatGPT-like chatbot within your browser, entirely offline.

Now, I must throw a word of caution that the APIs that we are going to use in Chrome are still very much in experimental state at the time of writing of this article — July 3, 2024.

I am going to assume that the reader already has access to a version of Chrome that supports Gemini Nano. Here is a link with information on how to get a Chrome browser that supports Native and local Gemini Nano: https://writingmate.ai/blog/access-to-gemini-nano-locally.

Once we have access to a Chrome that support Gemini Nano, its as simple as using a snippet like the one below to create an Offline AI tool in your browser.

async function browserAI(inputPrompt) {
  if (!window.ai) {
      return console.log('your browser does" support');;
  }

  if (!window.browserAISession) {
      console.log('initializing browserAI');
      window.browserAISession = await window.ai.createTextSession()
  }

  try {
      const answer = await window.browserAISession.prompt(inputPrompt);
      console.log(answer);
  } catch (eerr) {
      console.log(e);
    }
}

console.log("%c try something like below", "color:green;");
console.log("%c browserAI('where is San Francisco')", "color:blue;");

Below is a video that show how it would function in a chrome that supports local Gemini Nano

While this example merely scratches the surface, the possibilities are endless with an offline, on-device AI solution. You can connect to a local database and create a virtual assistant that can manage your schedule, including reminders and meetings, etc.