Finish UI Piece

Signed-off-by: David Weik <[email protected]>

Author: Criptic

js/objects/add-rag-builder-object.js

@@ -366,26 +366,126 @@ async function addRAGBuilderObject(ragBuilderObject, paneID, ragBuilderInterface
     ragBuilderVectorDBHeader.innerText = ragBuilderInterfaceText?.ragBuilderVectorDBHeader;
     let ragBuilderVectorDBDescription = document.createElement('p');
     ragBuilderVectorDBDescription.innerHTML = ragBuilderInterfaceText?.ragBuilderVectorDBDescription;
+    let ragBuilderVectorDBContainer = document.createElement('div');
     let ragBuilderVectorDBSelectorDropdown = document.createElement('select');
     ragBuilderVectorDBSelectorDropdown.setAttribute('class', 'form-select');
     ragBuilderVectorDBSelectorDropdown.setAttribute('id', `${ragBuilderObject?.id}-vectorDB-dropdown`);
+    ragBuilderVectorDBSelectorDropdown.onchange = async function () {
+        ragBuilderVectorDBContainer.innerHTML = '';
+        let ragBuilderVectorDBDescriptor = document.createElement('p');
+        const selectedVectorDB = this.options[this.selectedIndex].value;
+        // Implement VectorDB specific notes
+        if (selectedVectorDB === 'Chroma') {
+            ragBuilderVectorDBDescriptor.innerHTML = ragBuilderInterfaceText?.chromaDescriptor;
+            let ragBuilderVectorDBCollectionInputLabel = document.createElement('span');
+            ragBuilderVectorDBCollectionInputLabel.innerText = `${ragBuilderInterfaceText?.ragBuilderVectorDBCollectionInputLabel}:`;
+            let ragBuilderVectorDBCollectionInput = document.createElement('input');
+            ragBuilderVectorDBCollectionInput.type = 'text';
+            ragBuilderVectorDBCollectionInput.placholder = "my_collection";
+            ragBuilderVectorDBCollectionInput.setAttribute('id', `${ragBuilderObject?.id}-collection-name`);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDescriptor);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBCollectionInputLabel);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBCollectionInput);
+        } else if (selectedVectorDB === 'SingleStore') {
+            ragBuilderVectorDBDescriptor.innerHTML = ragBuilderInterfaceText?.singleStoreDescriptor;
+            let ragBuilderVectorDBDatabaseInputLabel = document.createElement('span');
+            ragBuilderVectorDBDatabaseInputLabel.innerText = `${ragBuilderInterfaceText?.ragBuilderVectorDBDatabaseInputLabel}:`;
+            let ragBuilderVectorDBDatabaseInput = document.createElement('input');
+            ragBuilderVectorDBDatabaseInput.type = 'text';
+            ragBuilderVectorDBDatabaseInput.placholder = "database_name";
+            ragBuilderVectorDBDatabaseInput.setAttribute('id', `${ragBuilderObject?.id}-database-name`);
+            let ragBuilderVectorDBTableInputLabel = document.createElement('span');
+            ragBuilderVectorDBTableInputLabel.innerText = `${ragBuilderInterfaceText?.ragBuilderVectorDBTableInputLabel}:`;
+            let ragBuilderVectorDBTableInput = document.createElement('input');
+            ragBuilderVectorDBTableInput.type = 'text';
+            ragBuilderVectorDBTableInput.placholder = "table_name";
+            ragBuilderVectorDBTableInput.setAttribute('id', `${ragBuilderObject?.id}-table-name`);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDescriptor);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDatabaseInputLabel);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDatabaseInput);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBTableInputLabel);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBTableInput);
+        } else if (selectedVectorDB === 'pgVector') {
+            ragBuilderVectorDBDescriptor.innerHTML = ragBuilderInterfaceText?.pgVectorDescriptor;
+            let ragBuilderVectorDBDatabaseInputLabel = document.createElement('span');
+            ragBuilderVectorDBDatabaseInputLabel.innerText = `${ragBuilderInterfaceText?.ragBuilderVectorDBDatabaseInputLabel}:`;
+            let ragBuilderVectorDBDatabaseInput = document.createElement('input');
+            ragBuilderVectorDBDatabaseInput.type = 'text';
+            ragBuilderVectorDBDatabaseInput.placholder = "database_name";
+            ragBuilderVectorDBDatabaseInput.setAttribute('id', `${ragBuilderObject?.id}-database-name`);
+            let ragBuilderVectorDBTableInputLabel = document.createElement('span');
+            ragBuilderVectorDBTableInputLabel.innerText = `${ragBuilderInterfaceText?.ragBuilderVectorDBTableInputLabel}:`;
+            let ragBuilderVectorDBTableInput = document.createElement('input');
+            ragBuilderVectorDBTableInput.type = 'text';
+            ragBuilderVectorDBTableInput.placholder = "table_name";
+            ragBuilderVectorDBTableInput.setAttribute('id', `${ragBuilderObject?.id}-table-name`);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDescriptor);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDatabaseInputLabel);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBDatabaseInput);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBTableInputLabel);
+            ragBuilderVectorDBContainer.appendChild(ragBuilderVectorDBTableInput);
+        }
+    }
     let ragBuilderVectorDBSelectorItem = document.createElement('option');
     ragBuilderVectorDBSelectorItem.value = `${ragBuilderInterfaceText?.ragBuilderVectorDBHeader}`;
     ragBuilderVectorDBSelectorItem.innerHTML = `${ragBuilderInterfaceText?.ragBuilderVectorDBHeader}`;
     ragBuilderVectorDBSelectorDropdown.append(ragBuilderVectorDBSelectorItem);
     // Add the projects to the dropdown
     for (const vectorDB in ragBuilderObject?.vectorDBList) {
-        if (ragBuilderObject?.vectorDBList[vectorDB] in SUPPORTEDVECTORDBS) {
+        if (SUPPORTEDVECTORDBS.includes(ragBuilderObject?.vectorDBList[vectorDB])) {
             let vectorDBOption = document.createElement('option');
             vectorDBOption.value = ragBuilderObject?.vectorDBList[vectorDB];
             vectorDBOption.innerHTML = ragBuilderObject?.vectorDBList[vectorDB];
             ragBuilderVectorDBSelectorDropdown.append(vectorDBOption);
         } else {
-            console.log(`The configured Vector DB: ${vectorDBList[vectorDB]} is not supported, please open an issue.`)
+            console.log(`The configured Vector DB: ${ragBuilderObject?.vectorDBList[vectorDB]} is not supported, please open an issue.`);
         }
     }
 
     // Add a selector for the embedding model
+    let ragBuilderEmbeddingModelHeader = document.createElement('h2');
+    ragBuilderEmbeddingModelHeader.innerText = ragBuilderInterfaceText?.ragBuilderEmbeddingModelHeader;
+    let ragBuilderEmbeddingModelDescription = document.createElement('p');
+    ragBuilderEmbeddingModelDescription.innerText = ragBuilderInterfaceText?.ragBuilderEmbeddingModelDescription;
+    // Retrieve the Embedding Models
+    let ragBuilderAvailableEmbeddingModels = await getModelProjectModels(VIYA, ragBuilderObject?.embeddingProjectID);
+    let promptBuilderDeprecatedLLMs = await getModelProjectModels(VIYA, ragBuilderObject?.embeddingProjectID, "eq(tags,'deprecated')");
+    ragBuilderAvailableEmbeddingModels = ragBuilderAvailableEmbeddingModels.filter(obj1 => !promptBuilderDeprecatedLLMs.some(obj2 => obj1.id === obj2.id))
+    for(const ragBuilderAvailableEmbeddingModel in ragBuilderAvailableEmbeddingModels) {
+        let ragBuilderAvailableEmbeddingContents = await getModelContents(VIYA, ragBuilderAvailableEmbeddingModels[ragBuilderAvailableEmbeddingModel]?.id);
+        for(const ragBuilderAvailableEmbeddingContent in ragBuilderAvailableEmbeddingContents) {
+            if(ragBuilderAvailableEmbeddingContents[ragBuilderAvailableEmbeddingContent]?.name == 'options.json') {
+                ragBuilderAvailableEmbeddingModels[ragBuilderAvailableEmbeddingModel].fileURI = ragBuilderAvailableEmbeddingContents[ragBuilderAvailableEmbeddingContent]?.fileURI
+                let promptBuilderCurrentOptions = await getFileContent(VIYA, ragBuilderAvailableEmbeddingModels[ragBuilderAvailableEmbeddingModel].fileURI);
+                let ragBuilderCurrentOptionsContent = await promptBuilderCurrentOptions.json();
+                ragBuilderAvailableEmbeddingModels[ragBuilderAvailableEmbeddingModel].options = ragBuilderCurrentOptionsContent;
+            }
+        }
+    }
+    let ragBuilderEmbeddingModelSelectorDropdown = document.createElement('select');
+    ragBuilderEmbeddingModelSelectorDropdown.setAttribute('class', 'form-select');
+    ragBuilderEmbeddingModelSelectorDropdown.setAttribute('id', `${ragBuilderObject?.id}-embedding-model-dropdown`);
+    let ragBuilderEmbeddingModelSelectorItem = document.createElement('option');
+    ragBuilderEmbeddingModelSelectorItem.value = `${ragBuilderInterfaceText?.ragBuilderEmbeddingModelHeader}`;
+    ragBuilderEmbeddingModelSelectorItem.innerHTML = `${ragBuilderInterfaceText?.ragBuilderEmbeddingModelHeader}`;
+    ragBuilderEmbeddingModelSelectorDropdown.append(ragBuilderEmbeddingModelSelectorItem);
+    // Add the Embedding Models to the dropdown
+    for (const embeddingModel in ragBuilderAvailableEmbeddingModels) {
+        let embeddingModelOption = document.createElement('option');
+        embeddingModelOption.value = ragBuilderAvailableEmbeddingModels[embeddingModel].id;
+        embeddingModelOption.innerHTML = ragBuilderAvailableEmbeddingModels[embeddingModel].name;
+        ragBuilderEmbeddingModelSelectorDropdown.append(embeddingModelOption);
+    }
+
+    // Save RAG Setup
+    let ragSetupSaveButton = document.createElement('div');
+    ragSetupSaveButton.id = `${paneID}-obj-${ragBuilderObject?.id}-rag-setup-save-button`;
+    ragSetupSaveButton.innerText = `${ragBuilderInterfaceText?.ragSetupSaveButton}`;
+    ragSetupSaveButton.setAttribute('type', 'button');
+    ragSetupSaveButton.setAttribute('class', 'btn btn-primary');
+    ragSetupSaveButton.onclick = async function () {
+        console.log('SAVED');
+    }
 
     ragBuilderContainer.appendChild(ragBuilderHeader);
     ragBuilderContainer.appendChild(ragBuilderDescription);
@@ -411,6 +511,13 @@ async function addRAGBuilderObject(ragBuilderObject, paneID, ragBuilderInterface
     ragBuilderContainer.appendChild(ragBuilderVectorDBDescription);
     ragBuilderContainer.appendChild(ragBuilderVectorDBSelectorDropdown);
     ragBuilderContainer.appendChild(document.createElement('br'));
+    ragBuilderContainer.appendChild(ragBuilderVectorDBContainer);
+    ragBuilderContainer.appendChild(document.createElement('br'));
+    ragBuilderContainer.appendChild(ragBuilderEmbeddingModelHeader);
+    ragBuilderContainer.appendChild(ragBuilderEmbeddingModelDescription);
+    ragBuilderContainer.appendChild(ragBuilderEmbeddingModelSelectorDropdown);
+    ragBuilderContainer.appendChild(document.createElement('br'));
+    ragBuilderContainer.appendChild(ragSetupSaveButton);
 
     return ragBuilderContainer;
 }

language/de.json

@@ -245,6 +245,15 @@
     "chunkSizeOverlapText": "Geben Sie die Größe der Überlappung zwischen Chunks an",
     "chunkSeparatorText": "Geben Sie die Seperators ein. Stellen Sie dabei sicher das jeder Seperator in einfachen Anführungszeichen ist und durch Kommata getrennt sind",
     "ragBuilderVectorDBHeader": "Wählen Sie eine Vector Datenbank für Ihr Projekt",
-    "ragBuilderVectorDBDescription": "Eine Vektor Datenbank (Vektor-DB) ist eine Art von Datenbank, die Daten als hochdimensionale Vektoren speichert. Diese Vektoren sind numerische Darstellungen von Daten. Sie werden von Embedding-Modellen erstellt und erfassen die semantische Bedeutung und die wichtigsten Merkmale der ursprünglichen Daten."
+    "ragBuilderVectorDBDescription": "Eine Vektor Datenbank (Vektor-DB) ist eine Art von Datenbank, die Daten als hochdimensionale Vektoren speichert. Diese Vektoren sind numerische Darstellungen von Daten. Sie werden von Embedding-Modellen erstellt und erfassen die semantische Bedeutung und die wichtigsten Merkmale der ursprünglichen Daten. Für die Verbindung zu den Vektor-Datenbanken muss beim deployment des RAG Setups dann Umgebungsvariablen gesetzt werden. Diese Informationen finden sich als Deployment-Notes.md zusammen mit dem RAG Setup im SAS Model Manager.",
+    "chromaDescriptor": "Chroma ist eine open-source, embedding database, mit der man auch auf einem lokalen Rechner einfach starten kann. Sie wurde speziell für die Entwicklung von KI-Anwendungen wie RAG konzipiert und ist bekannt für ihre Benutzerfreundlichkeit und Entwicklerfreundlichkeit. Chroma konzentriert sich darauf, eine reine Vektordatenbank zu sein, die vector embeddings und ihre Metadaten speichert, um eine schnelle semantische Suche zu ermöglichen. <br><ul><li><b>Use Case:</b> Chroma ist eine ausgezeichnete Wahl für einen Machbarkeitsnachweis (Proof-of-Concept) oder für schnelles Prototyping. Ihr schlanker Charakter und die einfache Einrichtung machen sie ideal, um schnell eine Idee zu testen, Bilder, Videos oder andere Inhalte basierend auf Text oder anderen Eingaben abzurufen, ohne die Komplexität eines größeren Datenbanksystems.</li></ul>",
+    "pgVectorDescriptor": "pgVector ist eine open-source Erweiterung, die die robuste und funktionsreiche relationale PostgreSQL-Datenbank in eine Vektordatenbank verwandelt. Sie ermöglicht es, vector embeddings neben Ihren strukturierten Daten zu speichern und abzufragen, was Ihre Architektur vereinfacht, da keine separate Datenbank für Ihre Vektoren erforderlich ist. pgVector nutzt die vollumfänglichen SQL-Funktionen von PostgreSQL, einschließlich Joins und Filtern, um hybride Suchvorgänge durchzuführen. <br><ul><li><b>Use Case:</b> pgVector ist eine gute Option für eine Anwendung, die komplexe, multimodale Abfragen erfordert. Zum Beispiel eine Suche, die ein Bild basierend auf der Textbeschreibung eines Benutzers findet und gleichzeitig die Ergebnisse basierend auf strukturierten Daten wie dem Preis, der Kategorie und der Verfügbarkeit des Produkts filtert.</li></ul>",
+    "singleStoreDescriptor": "SingleStore ist eine verteilte SQL-Datenbank, die Transaktionen und Echtzeitanalysen mit integrierten Vektorfunktionen vereint. Im Gegensatz zu einer spezialisierten Vektordatenbank ist SingleStore eine Multi-Modell-Datenbank, die sowohl traditionelle relationale Daten als auch Vektoren verarbeiten kann. Dies ermöglicht leistungsstarke hybride Suchvorgänge, die die Geschwindigkeit einer Vektorsuche mit der tiefen Filterung und der analytischen Leistungsfähigkeit von SQL kombinieren.<br><ul><li><b>Use Case:</b> SingleStore eignet sich am besten für eine Anwendung auf Unternehmensebene, die in einem massiven Umfang und mit geringer Latenz betrieben werden muss. Ihre Architektur ist ideal für Anwendungen wie eine große E-Commerce-Plattform, die Echtzeitsuchen in einem Produktkatalog mit Millionen von Artikeln durchführen und diese Daten gleichzeitig sofort mit Kundenanalysen, Bestandsdaten und der Bestellhistorie verknüpfen muss.</li></ul>",
+    "ragBuilderVectorDBCollectionInputLabel": "Geben Sie einen Namen für die Collection ein: ",
+    "ragBuilderVectorDBDatabaseInputLabel": "Geben Sie den Namen der Datenbank ein: ",
+    "ragBuilderVectorDBTableInputLabel": "Geben Sie einen Namen für die Tabelle ein: ",
+    "ragBuilderEmbeddingModelHeader": "Wählen Sie das Embedding Modell für Ihr Projekt",
+    "ragBuilderEmbeddingModelDescription": "Embedding-Modelle sind grundlegend für RAG-Systeme, da sie bestimmen, wie Ihre Textdaten in numerische Vektoren umgewandelt werden. Ziel ist es, embeddings zu erstellen, die die semantische Bedeutung Ihres Textes präzise erfassen, damit das System die relevantesten Informationen finden kann.",
+    "ragSetupSaveButton": "RAG Setup Speichern"
   }
 }

language/en.json

@@ -245,6 +245,15 @@
     "chunkSizeOverlapText": "Specify the size of the overlap of chunks",
     "chunkSeparatorText": "Specify the list of separators. Make sure they are in single quotes and separated by commas",
     "ragBuilderVectorDBHeader": "Select a Vector DB for your project",
-    "ragBuilderVectorDBDescription": "A vector database (vector DB) is a type of database that stores data as high-dimensional vectors, which are numerical representations of data. These vectors, often called embeddings, are created by embedding models and capture the semantic meaning and key features of the original data."
+    "ragBuilderVectorDBDescription": "A vector database (vector DB) is a type of database that stores data as high-dimensional vectors, which are numerical representations of data. These vectors, often called embeddings, are created by embedding models and capture the semantic meaning and key features of the original data. For the connection with the vector DB additional information might be required for the deployment of the RAG setup. The required environment will be stored along the RAG Setup in SAS Model Manager in Deployment-Notes.md.",
+    "chromaDescriptor": "Chroma is an open-source, AI-native embedding database that's simple to get started with, even on a local machine. It's designed specifically for building AI applications like RAG and is known for its ease of use and developer-friendly nature. Chroma is focused on being a pure vector database, storing vector embeddings and their metadata to enable fast semantic search.<br><ul><li><b>Use Case:</b> Chroma is an excellent choice for a proof-of-concept or for rapid prototyping. Its lightweight nature and simple setup make it ideal for quickly testing an idea to retrieve images, videos, or other content based on text or other inputs, without the complexity of a larger database system.</li></ul>",
+    "pgVectorDescriptor": "pgVector is an open-source extension that turns the robust and feature-rich PostgreSQL relational database into a vector database. It allows you to store and query vector embeddings alongside your structured data, simplifying your architecture by not requiring a separate database for your vectors. pgVector leverages PostgreSQL's full-featured SQL capabilities, including joins and filtering, to perform hybrid searches. <br><ul><li><b>Use Case:</b> pgVector is a strong option for an application that requires the ability to perform complex, multimodal queries. For example, a search that finds an image based on a user's text description, while simultaneously filtering the results based on structured data like the product's price, category, and availability.</li></ul>",
+    "singleStoreDescriptor": "SingleStore is a distributed SQL database that unifies transactions and real-time analytics with built-in vector capabilities. Unlike a specialized vector database, SingleStore is a multi-model database that can handle traditional relational data as well as vectors. This allows for powerful hybrid searches that combine the speed of a vector search with the deep filtering and analytical power of SQL.<br><ul><li><b>Use Case:</b> SingleStore is best suited for an enterprise-level application that needs to operate at a massive scale with low latency. Its architecture is ideal for applications like a large e-commerce platform that needs to perform real-time searches across a product catalog of millions of items, while also instantly joining that data with customer analytics, inventory data, and order history.</li></ul>",
+    "ragBuilderVectorDBCollectionInputLabel": "Enter the name of collection: ",
+    "ragBuilderVectorDBDatabaseInputLabel": "Enter the name of the database: ",
+    "ragBuilderVectorDBTableInputLabel": "Enter the name of the table: ",
+    "ragBuilderEmbeddingModelHeader": "Select the Embedding Model for your project",
+    "ragBuilderEmbeddingModelDescription": "Embedding models are fundamental to RAG systems, as they determine how your text data is converted into numerical vectors. The goal is to create embeddings that accurately capture the semantic meaning of your text, allowing the system to find the most relevant information.",
+    "ragSetupSaveButton": "Save RAG Setup"
   }
 }