Yesterday, Elizabeth Siegle, a developer advocate for CLoudflare, showed off a really freaking cool demo making use of Cloudflare's Workers AI support. Her demo made use of WNBA stats to create a beautiful dashboard that's then enhanced with AI. You can find the demo here: https://wnba-analytics-ai-insights.streamlit.app/

I found this incredibly exciting. I last looked at Cloudflare's AI stuff almost an entire year ago ("Using Cloudflare's AI Workers to Add Translations to PDFs"), and I haven't quite had a chance to try it again, mostly because I've been focused on Google Gemini for my Generative AI work.

From an API/usage perspective, Cloudflare's Workers are easy as heck (although I recently had an issue with them that turned out to be a very unique edge case), and you can see this in her code behind the dashboard here: https://github.com/elizabethsiegle/wnba-analytics-dash-ai-insights/blob/main/app.py. Scroll down to the generate_insights Python method and you'll see it's a simple POST with a prompt to get the results.

As I said, this was exciting as heck to me. Last week, my Code Break episode was focused on charting in JavaScript. In that session, I made use of Chart.js to create charts for a simple set of sales data. This sales data was a hard coded set of totals for four products over 12 months. You can see an example chart I built here: https://cfjedimaster.github.io/codebr/charts1/chartjs2.html. In case you don't want to click, here's the chart:

Inspired by Elizabeth's example, I wanted to take this chart, and see if Google could get insights from it. Here's what I built.

Version One

For the first version, I started off with an HTML page making use of the same chart as shown above, but with an added empty div to share insights:

<h1>Sales Data</h1> 

<div id="chartWrapper">
<canvas id="myChart"></canvas>
</div>

<div id="result"></div>

On the client-side, the JavaScript is mostly related to Chart.js, but at the end, I've added a call to my server-side code to get insights and render it to the page:

document.addEventListener('DOMContentLoaded', init, false);
let sales;
let $result;

async function init() {

	$result = document.querySelector('#result');

	let req = await fetch('./data.json');
	salesData = await req.json();

	let chartData = [];

	let productNames = ['Apples', 'Bananas', 'Cherries', 'Donuts'];
	for(let p of productNames) {

		let data = {
			label:p, 
			data: salesData.sales.map(d => {
				for(let product of d.items) {
					if(product.name === p) return product.total;
				}
			})
		}

		chartData.push(data);
	}

	chartLabels = salesData.sales.map(d => {
		return d.date;
	});

	const ctx = document.getElementById('myChart');

	new Chart(ctx, {
		type: 'bar',
		data: {
			labels: chartLabels,
			datasets:chartData,
		},
		options: {
		scales: {
			y: {
			beginAtZero: true
			}
		}
		}
	});

	$result.innerHTML = '<p><i>Getting AI insights into this data...</i></p>';

	let insightsReq = await fetch('/insights', {
		method:'POST', 
		body:JSON.stringify(salesData)
	});

	let insights = await insightsReq.json();
	console.log(insights);
	$result.innerHTML = marked.parse(insights.text);
}

So far, nothing special. Do note that I'm passing the same sales data I used in the chart to my server. This is a sample of that data, just the first three months:

{
	"sales": [
		{ 
			"date":"1/2024", 
			"items": [
				{ "name": "Apples", "total": 541 },
				{ "name": "Bananas", "total": 218 },
				{ "name": "Cherries", "total": 490 },
				{ "name": "Donuts", "total": 451 }
			]
		},
		{ 
			"date":"2/2024", 
			"items": [
				{ "name": "Apples", "total": 558 },
				{ "name": "Bananas", "total": 198 },
				{ "name": "Cherries", "total": 452 },
				{ "name": "Donuts", "total": 491 }
			]
		},
		{ 
			"date":"3/2024", 
			"items": [
				{ "name": "Apples", "total": 521 },
				{ "name": "Bananas", "total": 312 },
				{ "name": "Cherries", "total": 402 },
				{ "name": "Donuts", "total": 645 }
			]
		}
	]
}

Alright, the fun part comes at the server. I'll share a link to the complete source in a bit, but here's the Gemini aspect:

const MODEL_NAME = "gemini-1.5-pro-latest";
const API_KEY = process.env.GOOGLE_API_KEY;

const si = `
You provide insights on sales data. You should return 3 to 5 insights about the products sold and their trends over time.
`;

const genAI = new GoogleGenerativeAI(API_KEY);

const model = genAI.getGenerativeModel({ model: MODEL_NAME,
	systemInstruction: {
		parts: [{ text:si }],
		role:"model"
	} 
 });

async function callGemini(data) {

	const generationConfig = {
		temperature: 0.9,
		topK: 1,
		topP: 1,
		maxOutputTokens: 2048,
	};

	const safetySettings = [
		{ category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_NONE, },
		{ category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,	threshold: HarmBlockThreshold.BLOCK_NONE, },
		{ category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_NONE, },
		{ category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_NONE, },
	];
	
	const parts = [
    	{text:JSON.stringify(data)},
  	];

	const result = await model.generateContent({
		contents: [{ role: "user", parts }],
		generationConfig,
		safetySettings
	});

	console.log(JSON.stringify(result,null,'\t'));

	try {

		if(result.response.promptFeedback && result.response.promptFeedback.blockReason) {

			return { error: `Blocked for ${result.response.promptFeedback.blockReason}` };
		}
		const response = result.response.candidates[0].content.parts[0].text;
		return { response };
	} catch(e) {
		// better handling
		return {
			error:e.message
		}
	}
	
}

In this case, my system instruction does all the heavy lifting. I'm literally just passing my JSON to Gemini as is... and it works really well. I honestly thought I'd have to rewrite it, perhaps in simple text with tabs and such to line it up, but it didn't need any help at all.

Here's the result:

I recognize that text may be a bit hard to read, so here's a copy:

Sweet! You can find the source here: https://github.com/cfjedimaster/ai-testingzone/tree/main/chartdemo

Version Two

So, I was just going to stop there, and then I recognized something. When I built the HTML for this demo, I had copied in a template that made use of Shoelace, my favorite UI library built with web components. I wasn't actually using any of them in them in my code so the smart thing would have been to remove the dependencies. I didn't. Instead, I looked at the Shoelace site to see if perhaps I could render the insights a bit nicer.

While looking, I came across their Carousel component, and I thought it would be nice to display the insights, one at a time, in larger text to be a bit more... bold? I'm not a designer, and I don't play one on TV, but I figured it was worth a shot.

On the client side, I modified my code a tiny bit, making the assumption I would get an array back from the server:

let insights = await insightsReq.json();
console.log(insights);
let html = `<sl-carousel pagination navigation>`;
insights.forEach(i => html += `<sl-carousel-item style="background: var(--sl-color-red-200);font-size: var(--sl-font-size-2x-large);padding:20px;">${i}</sl-carousel-item>`);
html += '</sl-carousel>';
$result.innerHTML = html;

Converting my insights into an array was trivial - I simply made use of JSON schema in my call to Gemini:

const schema = {
	"description": "A list of insights",
	"type": "array",
	"items": {
		"type":"string"
	}
};

I still sent the same prompt, the only change was to my "config" object:

const generationConfig = {
	temperature: 0.9,
	topK: 1,
	topP: 1,
	maxOutputTokens: 2048,
	responseMimeType: "application/json",
	responseSchema:schema
};

The results were pretty impressive I think:

I love how big and impactful the insight is. If this were a dashboard on display, you could add the autoplay feature to the carousel and have it change automatically.

I was happy with this, but the red color made me think a bit. I liked the red, but I literally just got it from copying and pasting Shoelace sample code. I wondered if I could do something different. Before I show you that, here's the source for this version: https://github.com/cfjedimaster/ai-testingzone/tree/main/chartdemo2

Version Three

As I said, the red kinda bothered me, as even though it wasn't a bright red, red usually implies a warning or negative item. What if I could get Gemini to quantify it's insights into three sentiments, positive, negative, and neutral?

Turns out, this was incredibly simple - I just updated my JSON Schema and system instructions:

const schema = {
	"description": "A list of insights categorized by positive, neutral, or negative",
	"type": "array",
	"items": {
		"type":"object",
		"properties": {
			"insight": {
				"type":"string",
				"description":"The actual insight."
			},
			"sentiment":{
				"type":"string",
				"enum":["positive","neutral","negative"]
			}
		}
	}
};


const si = `
You provide insights on sales data. You should return 3 to 5 insights about the products sold and their trends over time. For each insight, classify the sentiment as either positive, neutral, or negative.
`;

Nothing else changed on the server. On the front end, I slightly tweaked my code:

let insights = await insightsReq.json();
console.log(insights);

let sentimentColors = {
	"positive":"green",
	"neutral":"blue",
	"negative":"red"
};

let html = `<sl-carousel pagination navigation>`;
insights.forEach(i => {
	let mood = sentimentColors[i.sentiment];
	html += `<sl-carousel-item style="background: var(--sl-color-${mood}-200);font-size: var(--sl-font-size-2x-large);padding:20px;">${i.insight}</sl-carousel-item>`;
});
html += '</sl-carousel>';
$result.innerHTML = html;

Here's an example of a positive report:

And here's a negative:

Blue is used for neutral:

There ya go. You can find the code for this here: https://github.com/cfjedimaster/ai-testingzone/tree/main/chartdemo3

I wish I could host these publicly, but I don't want to incur charges for a simple demo. :) As always, let me know what you think, and huge thanks again to Elizabeth Siegle for the inspiration!