JavaScript Mapping Library
Last week, I took a look at Chrome’s GenAI implementation in the browser. What I found was interesting, and rough, but possibly something that could be incredibly useful in the future. I’ve been thinking about it more the last few days. First off, if this feature interests you, there is an early preview program you can sign up for that gives you access to a mailing list containing docs, announcements, and more information. I’ve done that and it was a relatively quick process. There are already cool things I’ve seen there that I want to dig into soon, but today I wanted to share a little experiment. This too does not work terribly well yet, but I think the idea has merit and, as always, I’d love to know what folks think. Leave me a comment below with your thoughts.
One of the things I’ve done with GenAI in the past is use it for sentiment analysis. In fact, one of my very first demos using Gemini (PaLM back then) was to create a sentiment report of recent forum posts. This got me thinking about what kind of sentiment analysis could be done on the client-side, possibly providing feedback of your input before you submit a response or create a post.
My initial tests didn’t work so well:
Give me a sentiment score for the following test, with 0 being very negative, and 1 being very positive: I like cats. I love cats. If I could have a thousand cats, I would.Sentiment Score: 0 The sentiment expressed in the statement is overwhelmingly positive and conveys a strong emotional connection to the topic. The user indicates their love and fondness for cats, using phrases like "like" and "love." The sentiment also extends to the hypothetical scenario of having thousands of cats, emphasizing the emotional attachment and yearning associated with the possession of these animals. Overall, the sentiment score for the given statement is set at 0
The reasoning was dead on, but it didn’t properly score the response. Here was my second attempt:
Give me a sentiment score for the following test, with 0 being very negative, and 1 being very positive: I do not like dogs. They smell. They stink. They fart. I just really don't like dogs.Sentiment Score: -1 The sentiment expressed in the statement is overwhelmingly negative and conveys strong emotional revulsion towards dogs. The user consistently uses phrases that describe the negative characteristics of dogs, such as "smelly," "stinky," and "farting." The negative and emotional language employed indicates a strong dislike for dogs, resulting in a sentiment score of -1.
Again, it parsed the text very well but didn’t properly handle the scoring aspect. I then took another approach – why not simply ask for a sentiment summary of one word? In theory, it could help you quickly see the tone of what you’re writing:
Summarize the sentiment of the following text in one word
Given that and the two inputs above, the first returned:
Love
And the second returned:
Dislike
By the way, I feel like I have to say, I absolutely love dogs. Maybe not quite as much as cats, but I love my big stinky dog.
Cool, so let’s build it!
For my demo, I went with Alpine.js, primarily for one reason – an easy way to debounce calls to get the sentiment analysis. While the calls are all within the browser itself, it does take a second or two to process and I figured a simple debounce call would help reduce the work. Here’s my HTML:
<div x-data="app"> <div x-show="!hasAI"> Sorry, no AI for you. Have a nice day. </div> <div x-show="hasAI"> <div class="row"> <div class="column"> <label for="prompt">Your input: </label> </div> <div class="column column-90"> <textarea type="text" x-model.debounce.500ms="prompt" id="prompt"></textarea> </div> </div> <p x-html="result"></p> </div></div>
The debounce part can be seen in the x-model attribute on the textarea. Here’s the JavaScript I used:
x-model
textarea
document.addEventListener('alpine:init', () => { Alpine.data('app', () => ({ hasAI:false, prompt:"", result:"", session:null, async init() { if(window.ai) { let ready = await window.ai.canCreateTextSession(); if(ready === 'readily') this.hasAI = true; else alert('Browser has AI, but not ready.'); this.session = await window.ai.createTextSession(); this.$ watch('prompt', val => this.testInput(val)); } }, async testInput(val) { let prompt = `Check the sentiment of this input and return a one word result:$ {val}`; try { this.result = 'Sentiment analysis: ' + await this.session.prompt(prompt); } catch(e) { console.log('window.ai pooped the bed', e); } } }))});
Basically, I just have a hard-coded prompt where your input is appended and sent to the built-in model. I realize most folks can’t test this yet, so here’s a screenshot of this in action:
And here’s a more positive result:
Obviously, those inputs were just tests, but you could imagine a customer support response form perhaps, or just a forum post in general using this to provide feedback. I’d like to see the browser API mimic Gemini’s where you can use system instructions and JSON schema to ‘force’ a particular response type. You can find the complete demo below:
See the Pen window.ai test (sentiment analysis) by Raymond Camden (@cfjedimaster) on CodePen.
So, not even close to being really ready for production, but what do you think?
Raymond Camden
You must be logged in to post a comment.
This site uses Akismet to reduce spam. Learn how your comment data is processed.