Adding AI Insights to Data with Google Gemini

This content originally appeared on Raymond Camden and was authored by Raymond Camden

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!

This content originally appeared on Raymond Camden and was authored by Raymond Camden

Print Share Comment Cite Upload Translate Updates

APA

Raymond Camden | Sciencx (2024-10-17T18:00:00+00:00) Adding AI Insights to Data with Google Gemini. Retrieved from https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/

MLA

" » Adding AI Insights to Data with Google Gemini." Raymond Camden | Sciencx - Thursday October 17, 2024, https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/

HARVARD

Raymond Camden | Sciencx Thursday October 17, 2024 » Adding AI Insights to Data with Google Gemini., viewed ,<https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/>

VANCOUVER

Raymond Camden | Sciencx - » Adding AI Insights to Data with Google Gemini. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/

CHICAGO

" » Adding AI Insights to Data with Google Gemini." Raymond Camden | Sciencx - Accessed . https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/

IEEE

" » Adding AI Insights to Data with Google Gemini." Raymond Camden | Sciencx [Online]. Available: https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/. [Accessed: ]

rf:citation

» Adding AI Insights to Data with Google Gemini | Raymond Camden | Sciencx | https://www.scien.cx/2024/10/17/adding-ai-insights-to-data-with-google-gemini/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.