Feat: Add frontend

LLM_model/LLM_controllers.py

@@ -4,6 +4,7 @@
 from typing import List
 import pickle
 # from model_server import prompt_handler
+import re
 import json
 from langchain.chains import LLMChain
 from langchain.memory import ConversationBufferMemory
@@ -127,7 +128,29 @@ def get_refined_chain(user_id, chat_input, background):
     store_chain(user_id, second_chain)
     # response = second_chain.invoke(chat_input) 
     return second_chain
-
+
+def extract_product_list(product_list):
+    names = re.findall(r'"(.*?)"', product_list)
+    markdown_links = ""
+    if len(names) != 0:
+        markdown_links += "\n\n **Product List** \n" 
+    for name in names:
+        formatted_name = name.replace(" ", "+")
+        markdown_links += f'<a href="https://www.google.com/search?q={formatted_name}" style="color:#add8e6; text-decoration:underline;">{name}</a>\n'
+    return markdown_links
+
+def get_product_response(response):
+    """Get the product response from the LLMChain object."""
+    llm = get_llm()
+
+    product_prompt = get_product_prompt(response)
+    product_chain = LLMChain(llm=llm, prompt=product_prompt)
+    chat_input = {
+        "name": "HealO",
+        "prescription": response, 
+    }
+    product_response = product_chain.invoke(chat_input)
+    return product_response
 
 def get_llm_response(user_id, chat_input, background):
     """Get the response from the LLMChain object."""
@@ -143,4 +166,7 @@ def get_llm_response(user_id, chat_input, background):
         "query": query, 
     }
     response = chain.invoke(chat_input)
-    return response["text"]
+    product_response = get_product_response(response["text"])
+    final_product_string = extract_product_list(product_response["text"])
+    final_response = response["text"] + final_product_string
+    return final_response

LLM_model/Templates/template_prompt.py

@@ -70,7 +70,8 @@ def get_refined_prompt2(get_refined_example_prompt) -> ChatPromptTemplate:
                 Information is sensitive and health-related so dont make up with the answer.
                 Just answer whatever you find in text to be the  product or medicine name needed for cure.
                 Below is a sample example of the ques and answer. Follow this pattern to extract the product name.
-                Also, Important to note to output response as array/list of names of products only and not how many and how much time a day, refer to examples for format of output and stick to it."""
+                Return nothing if the prompt does not have any product name.
+                Also, Important to note to output response as array/list of names of products only and not quantity, refer to examples for format of output and stick to it."""
 )
 #____________________________________________________________________________________________________________
 

LLM_model/main.py

@@ -29,7 +29,8 @@ def initLLM():
     load_dotenv()
     # sys.stdin = open('testfile.txt', 'r')
     llm = HealOLLM()
-
+    # llm = ChatGoogleGenerativeAI(model='gemini-1.5-pro-latest', temperature=0.9)
+
     set_llm(llm)
     embedder = GoogleGenerativeAIEmbeddings(model="models/embedding-001", task_type="retrieval_query")
     vector_db = Chroma(embedding_function=embedder, persist_directory='database/tool_mistake_db', relevance_score_fn='similarity_search_with_score', )

README.md

@@ -8,6 +8,11 @@ The goal is to create a healthcare diagnosis chatbot that assists users by analy
 
 ![image](https://github.com/Health-care-Chatbot/HealO.ai/assets/41577064/8741fce9-60bc-4e0b-b929-4f24e3657821)
 
+
+# Demo Video
+**[HealO.ai Demonstration video](https://vimeo.com/961351326)** 
+
+
 ## Libraries and Frameworks Used
 
 - [Python](https://www.python.org/): Primary language used for backend

frontend/.env.sample

@@ -0,0 +1 @@
+VITE_BACKEND_URL=

frontend/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

frontend/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# todo
+todo

frontend/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

frontend/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HealO.ai</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "^0.0.25",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.10",
+    "lucide-react": "^0.395.0",
+    "marked": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -0,0 +1,20 @@
+import './App.css'
+import { ThemeProvider } from './components/theme-provider'
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Home from '@/pages/home'
+import Chat from '@/pages/chat';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/chat" element={<Chat />} />
+        </Routes>
+      </Router>
+    </ThemeProvider>
+  )
+}
+
+export default App;

frontend/src/components/chat/ai-input.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Send } from "lucide-react";
+import { useChatStore } from "@/store/chat-store";
+
+export function AiInput() {
+  const { setUserInput, addBubble } = useChatStore();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const input = e.currentTarget.compose.value;
+    addBubble({ sender: "user", data: input });
+    setUserInput(input);
+    e.currentTarget.reset();
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <div className="bg-background bg-[radial-gradient(ellipse_50%_110%_at_50%_100%,rgba(120,119,198,0.3),rgba(255,255,255,0))] shadow-t px-4 py-3 flex justify-end items-center">
+          <Input
+            className="rounded-full text-xs bg-background/30 backdrop-blur-md"
+            placeholder="Message HealO.."
+            id="compose"
+          />
+          <Button
+            type="submit"
+            size={"icon"}
+            variant={"gooeyRight"}
+            className="absolute float-end rounded-full mr-1"
+          >
+            <Send className="w-4 h-4" />
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+}