diff --git a/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor b/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor index ed2879b..c6700e3 100644 --- a/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor +++ b/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor @@ -1,5 +1,7 @@ @inherits LayoutComponentBase + + @@ -19,9 +21,6 @@ @Body - - Footer links... - @code { diff --git a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor b/SqlDatabaseVectorSearch/Components/Pages/Documents.razor index 19ef8f6..695ee40 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Documents.razor @@ -4,7 +4,6 @@ @inject IServiceProvider ServiceProvider @inject IJSRuntime JSRuntime - Documents @@ -56,7 +55,7 @@ } else { -

+

Available documents

@@ -111,6 +110,9 @@ else private UploadDocumentRequest uploadDocumentRequest = new(); private EditContext? editContext; + [Inject] + protected ToastService ToastService { get; set; } = default!; + protected override void OnInitialized() { editContext = new EditContext(uploadDocumentRequest); @@ -171,7 +173,7 @@ else var documentId = string.IsNullOrWhiteSpace(uploadDocumentRequest.DocumentId) ? null : (Guid?)Guid.Parse(uploadDocumentRequest.DocumentId); await vectorSearchService.ImportAsync(stream, fileName, MimeUtility.GetMimeMapping(fileName), documentId); - CreateToastMessage(ToastType.Success, "Upload document", $"The document {fileName} has been successfully uploaded and indexed.", await GetLocalDateTimeStringAsync(DateTimeOffset.UtcNow)); + ToastService.Notify(await CreateToastMessageAsync(ToastType.Success, "Upload document", $"The document {fileName} has been successfully uploaded and indexed.")); await LoadDocumentsAsync(scope.ServiceProvider); } @@ -185,10 +187,19 @@ else { var selectedDocumentIds = documents?.Where(d => d.IsSelected).Select(d => d.Id) ?? []; + var options = new ConfirmDialogOptions + { + YesButtonText = "Yes", + YesButtonColor = ButtonColor.Danger, + NoButtonText = "No", + NoButtonColor = ButtonColor.Secondary + }; + var confirmation = await dialog.ShowAsync( - title: "Delete the selected document?", + title: "Delete the selected documents?", message1: "This will delete the documents and all the corresponding embeddings. The operation cannot be undone.", - message2: "Do you want to proceed?"); + message2: "Do you want to proceed?", + confirmDialogOptions: options); if (!confirmation) { @@ -205,7 +216,7 @@ else await documentService.DeleteAsync(selectedDocumentIds); await LoadDocumentsAsync(scope.ServiceProvider); - CreateToastMessage(ToastType.Info, "Delete documents", "The selected documents have been successfully deleted.", await GetLocalDateTimeStringAsync(DateTimeOffset.UtcNow)); + ToastService.Notify(await CreateToastMessageAsync(ToastType.Info, "Delete documents", "The selected documents have been successfully deleted.")); } finally { @@ -213,18 +224,17 @@ else } } - private void CreateToastMessage(ToastType toastType, string title, string message, string? helpText = null) + private async Task CreateToastMessageAsync(ToastType toastType, string title, string message) { var toastMessage = new ToastMessage { Type = toastType, Title = title, - HelpText = helpText, - Message = message, - AutoHide = true, + HelpText = await GetLocalDateTimeStringAsync(DateTimeOffset.UtcNow), + Message = message }; - messages.Add(toastMessage); + return toastMessage; } private async Task GetLocalDateTimeStringAsync(DateTimeOffset dateTime) diff --git a/SqlDatabaseVectorSearch/Components/Pages/Home.razor b/SqlDatabaseVectorSearch/Components/Pages/Home.razor index 4d16159..f7336c8 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Home.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Home.razor @@ -1,7 +1,7 @@ @page "/" @rendermode @(new InteractiveServerRenderMode(prerender: false)) -@inject IHttpClientFactory HttpClientFactory +@inject IWebHostEnvironment WebHostEnvironment SQL Database Vector Search @@ -31,7 +31,8 @@ else return; } - markdown = await HttpClientFactory.CreateClient().GetStringAsync("https://raw.githubusercontent.com/marcominerva/SqlDatabaseVectorSearch/refs/heads/master/docs.md"); + var filePath = Path.Combine(WebHostEnvironment.WebRootPath, "docs.md"); + markdown = await File.ReadAllTextAsync(filePath); StateHasChanged(); } diff --git a/SqlDatabaseVectorSearch/Program.cs b/SqlDatabaseVectorSearch/Program.cs index 7c20f81..f8d4bb7 100644 --- a/SqlDatabaseVectorSearch/Program.cs +++ b/SqlDatabaseVectorSearch/Program.cs @@ -51,7 +51,6 @@ builder.Services.AddHybridCache(options => }; }); -builder.Services.AddHttpClient(); builder.Services.ConfigureHttpClientDefaults(builder => { builder.AddStandardResilienceHandler(); diff --git a/SqlDatabaseVectorSearch/Services/ChatService.cs b/SqlDatabaseVectorSearch/Services/ChatService.cs index 172cd96..d830954 100644 --- a/SqlDatabaseVectorSearch/Services/ChatService.cs +++ b/SqlDatabaseVectorSearch/Services/ChatService.cs @@ -23,6 +23,7 @@ public class ChatService(IChatCompletionService chatCompletionService, Tokenizer --- {question} --- + The reformulation must always explicitly contain the subject of the question. You must reformulate the question in the same language of the user's question. For example, it the user asks a question in English, the answer must be in English. Never add "in this chat", "in the context of this chat", "in the context of our conversation", "search for" or something like that in your answer. """; diff --git a/SqlDatabaseVectorSearch/wwwroot/docs.md b/SqlDatabaseVectorSearch/wwwroot/docs.md new file mode 100644 index 0000000..fcf9f37 --- /dev/null +++ b/SqlDatabaseVectorSearch/wwwroot/docs.md @@ -0,0 +1,138 @@ +# SQL Database Vector Search + +## Setup + +- [Create an Azure SQL Database](https://learn.microsoft.com/en-us/azure/azure-sql/database/single-database-create-quickstart) on a server that has the Vector Support feature enabled +- Execute the [Scripts.sql](https://github.com/marcominerva/SqlDatabaseVectorSearch/blob/master/Scripts.sql) file to create the tables needed by the application + - You may need to update the size of the [`VECTOR`](https://github.com/marcominerva/SqlDatabaseVectorSearch/blob/master/Scripts.sql#L17) column to match the size of the embedding model. Currently, the maximum allowed value is 1998. +- Open the [appsettings.json](https://github.com/marcominerva/SqlDatabaseVectorSearch/blob/master/SqlDatabaseVectorSearch/appsettings.json) file and set the connection string to the database and the other settings required by Azure OpenAI + - If your embedding model supports shortening, like **text-embedding-3-small** and **text-embedding-3-large**, and you want to use this feature, you need to set the [`Dimensions`](https://github.com/marcominerva/SqlDatabaseVectorSearch/blob/master/SqlDatabaseVectorSearch/appsettings.json#L17) property to match the value you have used in the SQL script. If your model doesn't provide this feature, or do you want to use the default size, just leave the [`Dimensions`](https://github.com/marcominerva/SqlDatabaseVectorSearch/blob/master/SqlDatabaseVectorSearch/appsettings.json#L17) property to NULL. Keep in mind that **text-embedding-3-small** has a dimension of 1536, while **text-embedding-3-large** uses vectors with 3072 elements, so with this latter model it is mandatory to specify a value (that, as said, must be less or equal to 1998). +- Run the application and start importing your documents with `/api/documents` endpoint. +- Ask questions using `/api/ask` or `/api/ask-streaming` endpoints. + +## Supported features + +- Conversation history with question reformulation +- Information about token usage +- Response streaming + +```json +{ + "originalQuestion": "why is mars called the red planet?", + "reformulatedQuestion": "Why is Mars referred to as the Red Planet?", + "answer": "Mars is referred to as the Red Planet due to its characteristic reddish color, which is caused by the abundance of iron oxide (rust) on its surface. This distinctive coloration has also been a significant factor in the cultural and mythological associations of Mars across different civilizations.", + "streamState": null, + "tokenUsage": { + "reformulation": { + "inputTokenCount": 107, + "outputTokenCount": 10, + "totalTokenCount": 117 + }, + "embeddingTokenCount": 10, + "question": { + "inputTokenCount": 9142, + "outputTokenCount": 53, + "totalTokenCount": 9195 + } + } +} +``` + +### How response streaming works + +When using the `/api/ask-streaming` endpoint, answers will be streamed as happens with the typical response from OpenAI. The format of the response is the following: + +```json +[ + { + "originalQuestion": "why is mars called the red planet?", + "reformulatedQuestion": "Why is Mars referred to as the Red Planet?", + "answer": null, + "streamState": "Start", + "tokenUsage": { + "reformulation": { + "inputTokenCount": 107, + "outputTokenCount": 10, + "totalTokenCount": 117 + }, + "embeddingTokenCount": 10, + "question": null + } + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": "Mars", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": " is", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": " called", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": " the", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": " Red", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": " Planet", + "streamState": "Append", + "tokenUsage": null + }, + //... + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": ".", + "streamState": "Append", + "tokenUsage": null + }, + { + "originalQuestion": null, + "reformulatedQuestion": null, + "answer": null, + "streamState": "End", + "tokenUsage": { + "reformulation": null, + "embeddingTokenCount": null, + "question": { + "inputTokenCount": 8986, + "outputTokenCount": 31, + "totalTokenCount": 9017 + } + } + } +] +``` + +- The first piece of the response has the following characteristics: + - the *streamState* property is set to `Start`, + - it contains the question and its reformulation (if not requested, *reformulatedQuestion* will be equals to *originalQuestion*) + - the *tokenUsage* section holds information about token used for reformulation (if done) and for the embedding of the question +- Then, there are as many elements for the actual answer as necessary: + - each one contains a token + - The *streamState* property is set to `Append` + - *origianlQuestion*, *reformulatedQuestion* and *tokenUsage* are always `null` +- The stream ends when an element with *streamState* equals to `End` is received. This element contains token usage information for the question and the whole answer.