Design changes and the backend config changes which are added are ver…

…ified (#7)

* add .vscode settings

* make the embending db generated in the same location

* refactor pages

* Aktualisieren von ci.yml

---------

Co-authored-by: tmeftah <sudtechnics@gmail.com>
Co-authored-by: tmeftah <46863341+tmeftah@users.noreply.github.com>

.github/workflows/ci.yml

@@ -20,6 +20,8 @@ jobs:
         run: |
           cd backend
           pip install -r requirements.txt
+          touch .env
+          echo "DATABASE_PATH=chroma_db \n COLLECTION_NAME=langchain" >> .env
 
       - name: Start FastAPI app
         run: |

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "eslint.validate": ["javascript", "vue", "typescript", "vue"],
+
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.autopep8",
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": ["source.fixAll.eslint"]
+  }
+}

backend/embeddings/ingest.py

@@ -5,18 +5,22 @@
 # from langchain_core.runnables import RunnablePassthrough
 # from langchain_core.documents import Document
 
+import os
 from langchain_community.document_loaders import PyPDFLoader
+from langchain_community.embeddings import OllamaEmbeddings
 from langchain_text_splitters import RecursiveCharacterTextSplitter
-
 from langchain_chroma import Chroma
-from langchain_community.embeddings import OllamaEmbeddings
-import os
-import argparse
-
 import chromadb
+from dotenv import load_dotenv
+
+load_dotenv()
 
-parser = argparse.ArgumentParser(description="Averroes - Chatbot")
-parser.add_argument("indexing", type=int, help="indexing")
+# Get the path value from .env file
+relative_path = os.getenv("DATABASE_PATH")
+# Get directory of script
+script_dir = os.path.dirname(os.path.abspath(__file__))
+# Append the relative path to the script directory
+persist_directory = os.path.join(script_dir, relative_path)
 
 
 def create_vectorstore():
@@ -37,23 +41,25 @@ def create_vectorstore():
             documents.extend(document_split)
 
     Chroma.from_documents(
-        collection_name="kardex",
+        collection_name=os.environ.get("COLLECTION_NAME"),
         documents=documents,
         embedding=OllamaEmbeddings(model="mxbai-embed-large"),
-        persist_directory="./vectorstore/chroma_db",
+        persist_directory=persist_directory,
     )
 
     print("vectorstore created...")
 
 
 def get_vectorstore():
-    persistent_client = chromadb.PersistentClient(path="./vectorstore/chroma_db")
+    persistent_client = chromadb.PersistentClient(path=persist_directory)
+
     langchain_chroma = Chroma(
         client=persistent_client,
-        collection_name="kardex",
+        collection_name=os.environ.get("COLLECTION_NAME"),
         embedding_function=OllamaEmbeddings(model="mxbai-embed-large"),
     )
-    # print("There are", langchain_chroma._collection.count(), "in the collection")
+    print("There are", langchain_chroma._collection.count(), "in the collection")
+
     # print("There are", langchain_chroma.similarity_search("bmw?"))
     return langchain_chroma.as_retriever(
         search_type="mmr", search_kwargs={"k": 3, "lambda_mult": 0.25}

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "raggi",
   "version": "0.0.1",
   "description": "rag app for small business",
-  "productName": "rag app for small business",
+  "productName": "Aora Ask, Discover, Decide",
   "author": "tmeftah <sudtechnics@gmail.com>",
   "private": true,
   "scripts": {

frontend/src/components/EssentialLink.vue

@@ -1,6 +1,5 @@
 <template>
-
-  <q-item clickable tag="a" :href="props.link" class="q-py-md" >
+  <q-item clickable tag="a" :to="props.link" exact class="q-py-md">
     <q-item-section v-if="props.icon" avatar>
       <q-icon :name="props.icon" />
     </q-item-section>

frontend/src/layouts/MainLayout.vue

@@ -1,28 +1,21 @@
 <template>
-  <q-layout view="FHh Lpr lFf">
-    <q-header dark bordered class="bg-darkblue-1 text-white-8">
+  <q-layout view="hHh lpR fFf">
+    <q-header dark bordered class="bg-white text-grey-8">
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
-        <q-toolbar-title>  DOC-INFO </q-toolbar-title>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title
+          class="text-bold text-weight-bolder text-h3"
+          style="color: #507295"
+        >
+          Aora.
+        </q-toolbar-title>
+        <!-- Orion Inova -->
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-      width="220"
-    >
-
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :width="220">
       <q-list>
-
         <EssentialLink
           v-for="link in linksList"
           :key="link.title"
@@ -50,19 +43,19 @@ const linksList = [
     title: "Dashboard",
     caption: "overview",
     icon: "line_axis",
-    link: "1",
+    link: "/",
   },
   {
     title: "Ask a question",
     caption: "chat with docs",
     icon: "chat_bubble_outline",
-    link: "2",
+    link: "/query",
   },
   {
     title: "Alle Dokumente",
     caption: "chat with docs",
     icon: "folder_open",
-    link: "/",
+    link: "documents",
   },
 ];
 

frontend/src/pages/DocumentsPage.vue

@@ -0,0 +1,88 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <div class="row q-mb-xl">
+        <div class="col">
+          <span class="text-h4">Documents</span>
+          <p class="q-mt-sm text-caption text-weight-light">
+            All documents related to
+          </p>
+        </div>
+        <div class="col-grow q-gutter-sm">
+          <q-btn color="secondary" label="Upload" icon="upload" />
+        </div>
+      </div>
+      <q-table :rows="rows" :columns="columns" row-key="name" flat bordered>
+        <template v-slot:top-right>
+          <q-input
+            dense
+            debounce="300"
+            placeholder="Filter by filename"
+            outlined
+          >
+            <template v-slot:prepend>
+              <q-icon name="filter_list" class="q-mr-sm" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body-cell-status="props">
+          <q-td :props="props">
+            <div>
+              <q-badge :color="props.row.status_text" :label="props.value" />
+            </div>
+            <div class="my-table-details">
+              {{ props.row.details }}
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+defineOptions({
+  name: "IndexPage",
+});
+
+const columns = [
+  {
+    name: "name",
+    required: true,
+    label: "Name",
+    align: "left",
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "date",
+    align: "center",
+    label: "Date",
+    field: "date",
+    sortable: true,
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "Status",
+    field: "status",
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    name: "Document 01",
+    date: "12/05/2024",
+    status: "done",
+    status_text: "green",
+  },
+  {
+    name: "Document 02",
+    date: "01/08/2024",
+    status: "on progress",
+    status_text: "purple",
+  },
+];
+</script>

frontend/src/pages/IndexPage.vue

@@ -1,9 +1,36 @@
 <template>
-  <q-page class="flex flex-center"> index page </q-page>
+  <q-page padding>
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-h6">Dashboard</div>
+      </q-card-section>
+
+      <q-separator />
+      <div class="q-pa-md row items-start q-gutter-md">
+        <q-card class="q-mb-sm">
+          <q-card-section>
+            <div class="text-h6">Active Users</div>
+            <div class="text-h2 text-center text-bold">100</div></q-card-section
+          >
+        </q-card>
+
+        <q-card>
+          <q-card-section>
+            <div class="text-h6">Number of Documents</div>
+            <div class="text-center text-h2 text-bold">3524</div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </q-card>
+  </q-page>
 </template>
 
 <script setup>
 defineOptions({
-  name: "IndexPage",
+  name: "1Page",
 });
 </script>
+
+<style scoped>
+/* Add any custom styles for the dashboard here */
+</style>