Repository files navigation

This sample demonstrates how to build a session recommender using Jamstack and Event-Driven architecture, using Azure SQL DB to store and search vectors embeddings generated using OpenAI. The solution is built using Azure Static Web Apps, Azure Functions, Azure SQL Database, and Azure OpenAI.

A fully working, production ready, version of this sample, that has been used atVS Live conferences, is available here:https://ai.microsofthq.vslive.com/

This repository is a evoution of theSession Recommender sample. In addition to vector search, also Retrieval Augmented Generation (RAG) is used to generate the response to the user query. If you are completely new to this topic, you may want to start there, and then come back here.

A session recommender built using

• Azure Static Web Apps
• Azure OpenAI
• Azure Functions
• Azure Functions SQL Trigger Binding
• Azure SQL Database
• Data API builder

For more details on the solution check also the following articles:

• How I built a session recommender in 1 hour using Open AI
• Vector Similarity Search with Azure SQL database and OpenAI

Azure SQL database can be used to easily and quickly perform vector similarity search. There are two options for this: a native option and a classic option.

Thenative option uses the new Vector Functions, recently introduced in Azure SQL database. Vector Functions are a set of functions that can be used to perform vector operations directly in the database.

DECLARE @embedding VECTOR(1536)EXEC [web].[get_embedding]'I want to learn about security in SQL', @embedding OUTPUTSELECT TOP(10)s.id,s.title,s.abstract,    VECTOR_DISTANCE('cosine', @embedding,s.embeddings)AS cosine_distanceFROM    [web].[sessions] sORDER BY    cosine_distance

Theclassic option uses the classic T-SQL to perform vector operations, with the support for columnstore indexes for getting good performances.

The Azure Developer CLI (azd) is a developer-centric command-line interface (CLI) tool for creating Azure applications.

• InstallAZD CLI.
• Install.NET SDK.
• InstallNode.js.
• InstallSWA CLI.

You need to install it before running and deploying with the Azure Developer CLI.

powershell-ex AllSigned-c"Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression"

curl -fsSL https://aka.ms/install-azd.sh| bash

After logging in with the following command, you will be able to use azd cli to quickly provision and deploy the application.

Make sure AZD CLI can access Azure resources. You can use the following command to log in to Azure:

azd auth login

Then, execute theazd init command to initialize the environment (You do not need to run this command if you already have the code or have opened this in a Codespace or DevContainer).

azd init -t Azure-Samples/azure-sql-db-session-recommender-v2

Enter an environment name.

Runazd up to provision all the resources to Azure and deploy the code to those resources.

azd up

Select your desiredsubscription andlocation. Then choose a resource group or create a new resource group. Wait a moment for the resource deployment to complete, click the Website endpoint and you will see the web app page.

Note: Make sure to pick a region where all services are available like, for example,West Europe orEast US 2

Using the Azure Developer CLI, you can setup your pipelines, monitor your application, test and debug locally.

azd pipeline config

Since the database is using features that are in Private Preview, it must be deployed manually. After all resources have been deployed, get the database connection string and OpenAI endpoint and key and create a.env file from the.env.sample file. Once that is done, go into thedatabase folder and run the following command:

dotnet run

The .NET application will create the database schema and the required objects.

Add a new row to theSessions table using the following SQL statement (you can use tools likeAzure Data Studio orSQL Server Management Studio to connect to the database. No need to install them if you don't want. In that case you can use theSQL Editor in the Azure Portal):

insert intoweb.speakers    (id, full_name, require_embeddings_update)values    (5000,'John Doe',1)goinsert intoweb.sessions     (id, title, abstract, external_id, start_time, end_time, require_embeddings_update)values    (1000,'Building a session recommender using OpenAI and Azure SQL','In this fun and demo-driven session you''ll learn how to integrate Azure SQL with OpenAI to generate text embeddings, store them in the database, index them and calculate cosine distance to build a session recommender. And once that is done, you’ll publish it as a REST and GraphQL API to be consumed by a modern JavaScript frontend. Sounds pretty cool, uh? Well, it is!','S1','2024-06-01 10:00:00','2024-06-01 11:00:00',1    )goinsert intoweb.sessions_speakers    (session_id, speaker_id)values    (1000,5000)goinsert intoweb.sessions     (id, title, abstract, external_id, start_time, end_time, require_embeddings_update)values    (1001,'Unlock the Art of Pizza Making with John Doe!',         'Whether you’re an avid home pizza oven enthusiast, contemplating a purchase, or nurturing dreams of launching your very own pizza venture, this course is tailor-made for you! Join John Doe, the visionary behind Great Pizza, as he guides you through the captivating world of pizza craftsmanship. With over six years of experience running his thriving pizza business, John has honed his skills to perfection, earning the title of a master pizzaiolo. Before embarking on his entrepreneurial journey, John—a former chef—also completed a pizza-making course at The School. Now, he’s excited to share his expertise with you in this hands-on workshop. During the course, you’ll learn to create three distinct pizza styles: Neapolitan, thin Roman “Tonda,” and Calzone. Dive into the art of dough preparation, experimenting with both high and low hydration doughs, all while adjusting temperatures to achieve pizza perfection. Don’t miss this opportunity to elevate your pizza-making game and impress your taste buds! ','S2','2024-06-01 11:00:00','2024-06-01 12:00:00',1    )goinsert intoweb.sessions_speakers    (session_id, speaker_id)values    (1001,5000)go

immediately the deployed Azure Function will get executed in response to theINSERT statement. The Azure Function will call the OpenAI service to generate the text embedding for the session title and abstract, and then store the embedding in the database, specifically in theweb.sessions table.

select*fromweb.sessions

You can now open the URL associated with the created Static Web App to see the session recommender in action. You can get the URL from the Static Web App overview page in the Azure portal.

The whole solution can be executed locally, usingStatic Web App CLI andAzure Function CLI.

Install the required node packages needed by the fronted:

cd clientnpm install

once finished, create a./func/local.settings.json and.env starting from provided samples files, and fill out the settings using the correct values for your environment.

Go back to the sample root folder and then run:

swa build

to build the fronted and then start everything with:

swa start

and once the local Static Web App environment is running, you can connect to

http://localhost:4280/

and test the solution locally.

The solution uses Fluent UI for the UI components. The Fluent UI is a collection of UX frameworks from Microsoft that provides a consistent design language for web, mobile, and desktop applications. More details about Fluent UI can be found at the following links:

• https://github.com/microsoft/fluentui
• https://react.fluentui.dev/

Thanks a lot toAaron Powell for having helped in building the RAG sample, doing a complete UI revamp using the Fluent UI and for the implementaiton of theask endpoint.