window.ai - running AI LOCALLY from DevTools! 🤯
GrahamTheDev

GrahamTheDev @grahamthedev

About: Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.

Location:
United Kingdown
Joined:
Jan 2, 2021

window.ai - running AI LOCALLY from DevTools! 🤯

Publish Date: Jun 30 '24
212 29

On-device AI in the browser is here - kinda.

It is currently in Chrome canary which means, it will be here soon(ish).

In this article I will show you how to get it running on your device, so that you can have a play with it and see what use cases you can think of.

And I will just say this: Running window.ai from DevTools without an internet connection is pretty fun, even if the results are "meh"!

Setup

Getting up and running only takes 5 minutes!

1. Download Chrome Canary

Go to the Chrome Canary site and download Chrome Canary.

2. Enable "Prompt API for Gemini Nano".

Open Chrome Canary and type "chrome://flags/" in the URL bar and press enter.

Then in the search box at the top type "prompt API"

You should see "Prompt API for Gemini Nano" as the only option

prompt API in search box on chrome experiments page, there is one item highlighted called

Switch that to "enabled".

3. Enable "Enables optimization guide on device"

While you are on the "chrome://flags" page, you need to enable a second item.

Remove your previous search and search for "optimization guide on".

You should see "Enables optimization guide on device" as your only option.

This time you want to enable it, but with the "Enabled ByPassPerfRequirement" option.

4. Install Gemini Nano

Last step, we need to install Gemini Nano on our device.

This is actually part of a bigger tool, but we don't need to worry about that, except for the fact that it helps us know what to download.

Warning: This file is 1.5gb. It doesn't tell you that anywhere so if you have a slow connection / pay per Gb of data / low storage space you may not want to do this!

Head to: "chrome://components/".

Hit Ctrl + f and search for "Optimization Guide".

You will see an item "Optimization Guide On Device Model".

Click "Check for Update" and it will install the file.

On the chrome components page, search box is showing with

5. DONE!

Last step: Restart Chrome Canary for the changes to take effect.

Add that is it, now we can move on to using AI locally!

Using window.ai

If everything worked as expected then you should now be able to open DevTools (F12), go to the "Console" tab and start playing!

The easiest way to check is to type window. into the console and see if ai comes up as an option.

If not, go back and check you didn't miss a step!

Creating our first session.

Just one command is needed to start a session with our AI model.

const chatSession = await window.ai.createTextSession()
Enter fullscreen mode Exit fullscreen mode

Tip: Don't forget the await. I did originally 🤦🏼‍♂️!

There is also an option of createGenericSession() but I haven't worked out what the difference is yet!

Now we can use that session to ask questions.

Sending a prompt

For this we just use the .prompt function on our chatSession object!

const result = await chatSession.prompt("hi, what is your name?")
Enter fullscreen mode Exit fullscreen mode

Yet again, all async, don't forget the await (I didn't make the same mistake twice...honest!).

Depending on the complexity of your prompt and your hardware this can take anywhere from a few milliseconds to several seconds, but you should eventually see undefined in the console once it has done.

Getting the response.

Now we just have to console.log the result!

console.log(result)
Enter fullscreen mode Exit fullscreen mode

And we get:

  As a large language model, I do not have a name.
Enter fullscreen mode Exit fullscreen mode

Pretty underwhelming, but at least it works!

Quick and Dirty Reusable example

Obviously you don't want to have to keep sending multiple commands, so you can copy and paste this function into your console to make things easier:

  async function askLocalGPT(promptText){
    if(!window.chatSession){
      console.log("starting chat session") 
      window.chatSession = await window.ai.createTextSession()
      console.log("chat session created") 
    }

    return console.log(await window.chatSession.prompt(promptText)) 
  }
Enter fullscreen mode Exit fullscreen mode

And now you can just type askLocalGPT("prompt text") into your console.

I personally have that saved as a snippet in Sources > snippets for quick access when I want to play with it.

Have fun!

Is it any good?

No

Really? It isn't any good?

I mean, it depends on the measuring stick you are using.

If you are trying to compare it to Claude or ChatGPT, it is terrible.

However for local playing and experimentation it is awesome!

Also bear in mind that each time you ask a question, it does not automatically have memory of what you asked previously.

So if you want to have a conversation where the model "remembers" what was said previously you need to feed previous questions and answers in with your new question.

Is it fun to play with?

Yes.

The fact I can get it to work locally in my browser is pretty cool. Plus it can do simple coding questions etc.

And the beauty is no big bills! You can use the full 32k context window as often as you want without worrying about racking up a big bill by mistake.

Oh and while I said it isn't very good, it can do summaries quite well:

  askLocalGPT("can you summarise this HTML 
for me please and explain what the page is 
about etc, please return a plain text response 
with the summary and nothing else:" + document.querySelector('article').textContent.toString())
Enter fullscreen mode Exit fullscreen mode

And with a little playing it outputs:

This article explains how to run window.ai locally in your browser using Google's large language model (LGBL).

It describes the necessary steps, including enabling the "Prompt API for Gemini Nano" and "Optimization Guide on Device Model" flags in Google Chrome Canary, installing Gemini Nano, and restarting Chrome Canary.

The article then demonstrates how to use window.ai by creating a text session, prompting the AI model, and receiving the response. It concludes by discussing the possibilities and future enhancements of window.ai.

What will you build?

I have only just scratched the surface of the new API, but I can see it being really handy for creating "custom GPTs" for your own use for now.

In the future once AI is available in-browser for everybody, who knows what amazing things will be created.

Final thought

While I find this exciting as a developer and the possibilities it opens up, there is a large part of me that dislikes / is cautious of this.

People are already throwing "AI" into everything for no reason. Having it run locally on people's machines will only encourage them to use it for even stupider things!

Plus there are probably about 50 other things around security, remote AI farms, etc. etc. that are likely to make me cry in the future the more I think about it.

Comments 29 total

  • Devarshi Shimpi
    Devarshi ShimpiJun 30, 2024

    Time to use it to summarise this article haha

    • GrahamTheDev
      GrahamTheDevJun 30, 2024

      Already done that, so that tells me you didn't read it all! hahahahah. 💗

  • Irfannur Diah
    Irfannur DiahJun 30, 2024

    Linux is not supported. haha

  • Best Codes
    Best CodesJun 30, 2024

    Opera browser developer has a much better setup for this than Chrome. You can use literally over 100 AI models locally with no internet through Aria, Opera's built in AI.

    GPT4ALL.io and Ollama are great for running models from huggingface locally on Linux, Windows, or macOS.

    Nice article!

    • GrahamTheDev
      GrahamTheDevJun 30, 2024

      That is cool to know, I will have to check that out! 💗

      • Best Codes
        Best CodesJun 30, 2024

        😁 Let me know what you think!

  • Rasmus Schultz
    Rasmus SchultzJul 1, 2024

    Also bear in mind that each time you ask a question, it does not automatically have memory of what you asked previously.

    There is an API for conversation/chat as well.

    It doesn't look like there's any documentation for the JS API yet though. I'm not sure this is open source? so we might not even be able to reference the C++ code.

    Based on the announcement from Google, they want us to use the API wrapper for their hosted inference, which has a built-in adapter for the JS API, which can be used with their hosted inference as a fallback.

    I'd love a reply if you can find the docs or code?

    • GrahamTheDev
      GrahamTheDevJul 1, 2024

      I had a good look, but didn't find anything when I was writing this.

      I imagine documentation will come once it all starts to filter down towards production.

      If I do find anything I will let you know! 💗

  • Bob James
    Bob JamesJul 1, 2024

    Is it any good?
    No
    Is it fun to play with?
    Yes
    laugh out loud on this, the story of my life 🤣🤣

    • GrahamTheDev
      GrahamTheDevJul 1, 2024

      hehe, well I can't go writing articles on anything that is actually useful, it would ruin my reputation! 🤷🏼‍♂️🤣💗

      • Bob James
        Bob JamesJul 1, 2024

        i like fun things 💛💛

  • Lavi Yatziv
    Lavi YatzivJul 1, 2024

    This is pretty neat. This could open a lot of doors for accessibility and language translation.

  • Franklin Thaker
    Franklin ThakerJul 2, 2024

    Aren't you guys concerned of setting up AI in browser ? I mean, I'm ok with this in new browser which I don't use often but I don't want a Blackbox to run on my machine.

    • GrahamTheDev
      GrahamTheDevJul 2, 2024

      At the moment, no. It is heavily sandboxed.

      Am I concerned for what security problems this may pose in the future. Yes, I imagine there will be security holes introduced as they give AI more freedom. 💗

  • Loris Galler
    Loris GallerJul 6, 2024

    Is this still working in the current version of 128? I tried everything but cant make it work

    • GrahamTheDev
      GrahamTheDevJul 6, 2024

      Yes still working.

      Chrome version 128.0.6580.0 - up to date

    • Bill Baker
      Bill BakerJul 26, 2024

      In the console in 128, I had to do something like this instead:

      let session = undefined
      window.ai.createTextSession().then(s => session = s)
      
      Enter fullscreen mode Exit fullscreen mode

      Then I could do this:

      await session.prompt("Say hello.")
      
      Enter fullscreen mode Exit fullscreen mode
      • GrahamTheDev
        GrahamTheDevJul 27, 2024

        This is exactly the same, just in a more complicated way.

        My guess is you missed an await the first time when creating the session constant. 💗

  • Marius Bongarts
    Marius BongartsJul 11, 2024

    Does anyone know if it's certain that this will become a standard feature in Chrome browsers? Is it safe to start building with this API for the future?

    I can't imagine all Chrome users downloading the large Gemini model. How does Chrome plan to handle this?

    • GrahamTheDev
      GrahamTheDevJul 12, 2024

      I certainly wouldn't recommend building anything substantial with an API that has not been announced or documented in any meaningful way. It is likely to change, evolve, features get deprecated, change model etc. etc. 💗

  • Henry Rutté
    Henry RuttéJul 16, 2024

    Hi, I'm on chrome://components/ but it doesn't appear "Optimization Guide On Device Model". Do you know why this could be happening?

    • Henry Rutté
      Henry RuttéJul 16, 2024

      Image description

      Image description

      • EhsanKey
        EhsanKeyOct 28, 2024

        Hi, did you find a solution?
        I have this problem too

    • GrahamTheDev
      GrahamTheDevJul 16, 2024

      Check your Canary Chrome is up to date, other than that I am not sure I am afraid. 💗

  • Francesco Maida
    Francesco MaidaAug 5, 2024

    The disaster of Internet Explorer and ActiveX evidently taught us nothing. If this tool were to succeed, I can already imagine an entire platoon of websites and web apps that can only be used with Google Chrome.
    Goodbye, browser interoperability.

    • Davilink
      DavilinkSep 6, 2024

      I was thinking the same. That was my first thought when my coworker told me about window.ai, Imagine your boss telling you that the "feature" that "you've develop" don't work correctly on firefox or safari, and you try to tell him that firefox/safari doesn't use the same model of ai that chrome use... good luck fixing that. The only way that window.ai can have a future, is that every browser uses the SAME model, because otherwise it just impossible to have the same expectation of result.

  • JEEVA D
    JEEVA DSep 4, 2024

    is this not supported for ubuntu linux os.

    • GrahamTheDev
      GrahamTheDevSep 4, 2024

      I am afraid I have no idea, sorry. If you have run the code above on Chrome Canary and it does not function, then for some reason it would seem not.

Add comment