fixed bugs

main.py

@@ -2,11 +2,14 @@ import datetime
 import os
 
 import openai
+import requests
 import uvicorn
 from dotenv import load_dotenv
 # from flask import Flask, redirect, render_template, request, session, url_for
-from fastapi import FastAPI, Form, Request
-from fastapi.responses import HTMLResponse
+from fastapi import (Cookie, Depends, FastAPI, Form, HTTPException, Request,
+                     Response)
+from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.security import APIKeyHeader
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
@@ -15,7 +18,11 @@ from models.bloom import initialize_index
 load_dotenv()
 app = FastAPI()
 app.secret_key = os.environ.get('SECRET_KEY', 'my-secret-key')
-openai.api_key = os.environ.get("OPENAI_API_KEY")
+# openai.api_key = os.environ.get("OPENAI_API_KEY")
+openai_api_key_header = APIKeyHeader(name="token")
+index = None
+# index = initialize_index("index.json")
+OPENAI_API_KEY = ""
 
 # mounts the static folder that contains the css file
 app.mount("/static", StaticFiles(directory="static", html=True), name="static")
@@ -24,18 +31,117 @@ app.mount("/static", StaticFiles(directory="static", html=True), name="static")
 # with the dialog form the user and bot
 templates = Jinja2Templates(directory="templates")
 
-index = initialize_index("index.json")
+# user data
+user = {}
 
 @app.get("/", response_class=HTMLResponse)
 async def home(request: Request):
-    return templates.TemplateResponse('chat.html', {"request": request})
+    return templates.TemplateResponse('login.html', {"request": request})
 
-@app.get("/chat")
-async def chat(input: str):
-    print("input: ", input)
+def validate(token: str):
+    api_endpoint = "https://api.openai.com/v1/chat/completions"
+    api_key = token
+
+    headers = {
+        "Content-Type" : "application/json",
+        "Authorization": f"Bearer {api_key}"
+    }
+
+    messages = [
+        {"role": "user", "content": "Say this is a test!"}
+    ]
+
+    data = {
+        "model": "gpt-3.5-turbo",
+        "messages": messages
+    }
+
+    response = requests.post(api_endpoint, json=data, headers=headers)
+    return response
+
+# Beware that most browsers cache GET requests 
+# (i.e., saved in browser's history), thus making 
+# them less secure compared to POST, as the data 
+# sent are part of the URL and visible to anyone 
+# who has access to the device. Thus, GET method 
+# should not be used when sending passwords or 
+# other sensitive information.
+# @app.post("/login", response_class=HTMLResponse)
+# async def login(token: str, request: Request):
+#     # form = await request.form()
+#     # print("login form data:", form.values())
+#     # api_key = form.get("access_token")
+#     print("apikey from login main.py: ", token)
+#     try:
+#         response = validate(token)
+#         print("login response: ", response.json())
+#         if ("error" in response.json()):
+#             error = response.json()["error"]
+#             raise HTTPException(status_code=400, detail=error["message"])
+#     except Exception as e:
+#         context = {"request": request, "error_message": str(e)}
+#         print("login error: ", context)
+#         return templates.TemplateResponse('login.html', context=context)
+    
+#     return templates.TemplateResponse("chatbot.html", {"request": request})
+
+# @app.post("/login")
+# async def login(token: str, response: Response):
+#     print("apikey from login main.py: ", token)
+    
+#     response = validate(token)
+#     print("login response: ", response.json())
+#     if ("error" in response.json()):
+#         error = response.json()["error"]
+#          # Redirect back to the login page with an error message
+#         response.set_cookie(key="message", value=error.message)
+#         return RedirectResponse(url="/login")
+    
+#     # Store the session token or other identifying information in a cookie
+    
+#     # response.set_cookie(key="username", value=username)
+#     # Redirect to the chatbot page upon successful login
+#     return RedirectResponse(url="/chatbot")
+    
+@app.post("/login")
+async def login(token: str, response: Response):
+    result = validate(token)
+    print("login response: ", result.json())
+    if ("error" in result.json()):
+        error = result.json()["error"]
+        response.set_cookie(key="message", value=error["message"])
+        return {"error": error["message"]}
+    else:
+        return {"redirect": "/chatbot"}
+
+@app.post("/initLlamaIndex")
+async def initLlamaIndex(token: str):
+    openai.api_key = token
+    global index
+    index = initialize_index("index.json")
+    return {"success": True}
+
+# Chatbot endpoint
+@app.get("/chatbot", response_class=HTMLResponse)
+async def chatbot(request: Request):
+    startTime = ""
+    context = {"request": request, "startTime": startTime}
+    return templates.TemplateResponse("chatbot.html", context=context)
+
+
+# @app.get("/chatbot", response_class=HTMLResponse)
+# async def chatbot(request: Request, username: str = Cookie(None)):
+#     if not username:
+#         # Redirect back to the login page if the user is not authenticated
+#         return RedirectResponse(url="/login")
+#     else:
+#         # Render the chatbot page with the username passed to the template
+#         return templates.TemplateResponse("chatbot.html", {"request": request, "username": username})
+
+@app.get("/reply")
+def reply(input: str):
     bot_reply = index.query(input)
     return {"bot_reply": bot_reply}
 
 if __name__ == "__main__":
-    # index = initialize_index("index.json")
     uvicorn.run("main:app", reload=True)

requirements.txt

@@ -14,4 +14,5 @@ panda
 numpy
 langchain
 python-dotenv
-python-multipart
+python-multipart
+httpx

static/{script.js → scripts/chatbot.js}

@@ -1,6 +1,7 @@
 const msgerForm = get(".msger-inputarea");
 const msgerInput = get(".msger-input");
 const msgerChat = get(".msger-chat");
+const isUserVerified = false;
 
 // Icons made by Freepik from www.flaticon.com
 const BOT_IMG = "../static/icons/dialogflow-insights-svgrepo-com.svg";
@@ -16,7 +17,9 @@ msgerForm.addEventListener("submit", async (event) => {
 
     appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
     msgerInput.value = "";
+
     botResponse(msgText);
+    // authenticate(msgText);
 });
 
 function appendMessage(name, img, side, text) {
@@ -43,14 +46,38 @@ function appendMessage(name, img, side, text) {
 
 async function botResponse(text) {
     // Bot Response
-    console.log(text);
-    const response = await fetch(`chat?input=${text}`);
-    const json = await response.json();
+    try {
+        const response = await fetch(`reply?input=${text}`);
+        const data = await response.json();
+        const reply = data.bot_reply;
+        appendMessage(BOT_NAME, BOT_IMG, "left", reply.response);
+    } catch (error) {
+        console.error(error);
+        appendMessage(
+            BOT_NAME,
+            BOT_IMG,
+            "left",
+            "Sorry, I'm not able to respond at the moment."
+        );
+    }
+}
 
-    console.log(json);
+// async function authenticate(token) {
+//     const response = await fetch(`login?token=${token}`, {
+//         method: "POST",
+//     });
 
-    appendMessage(BOT_NAME, BOT_IMG, "left", json.bot_reply.response);
-}
+//     const data = await response.json();
+//     console.log("data", data);
+
+//     if ("error" in data) {
+//         error = response.json()["error"];
+//         appendMessage(BOT_NAME, BOT_IMG, "left", error["message"]);
+//     } else {
+//         isUserVerified = true;
+//         appendMessage(BOT_NAME, BOT_IMG, "left", "How can I can help you?");
+//     }
+// }
 
 // Utils
 function get(selector, root = document) {

static/scripts/login.js

@@ -0,0 +1,39 @@
+// show the loading animation when the login form is submitted
+const loginBox = document.querySelector(".login-box");
+const loginForm = document.querySelector(".login-form");
+const tokenInput = document.getElementById("accessToken");
+const loadingContainer = document.querySelector(".loading-container");
+
+// some animations for validating token
+// and initializing index
+
+loginForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    const token = tokenInput.value;
+    if (!token) return;
+
+    loadingContainer.classList.add("show"); // to show the loading animation
+
+    const loginResponse = await fetch(`/login?token=${token}`, {
+        method: "POST",
+    });
+
+    const loginData = await loginResponse.json();
+
+    if ("redirect" in loginData) {
+        // if the login response contains a "redirect" property, it means the login was successful
+        const initResp = await fetch(`initLlamaIndex?token=${token}`, {
+            method: "POST",
+        });
+
+        const initData = await initResp.json();
+
+        if ("success" in initData) {
+            window.location.href = loginData.redirect;
+        }
+    } else if ("error" in loginData) {
+        // display error message login page
+        loadingContainer.classList.remove("show");
+    }
+});

static/styles/login.css

@@ -40,4 +40,35 @@ body {
 /* Style error messages */
 .error-message {
     color: red;
+}
+
+/* Style loading */
+.loading-container {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 9999;
+}
+
+.loading-container.show {
+    display: flex;
+}
+
+.loader {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.loader img {
+    width: 60px;
+    height: 60px;
 }

templates/base.html

@@ -6,9 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>{% block title %}{% endblock %}</title>
-    <link rel="stylesheet" href="{{ url_for('static', path='styles/chat.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='styles/chatbot.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', path='styles/login.css') }}"> 
-    <script type="module" src="../static/script.js"></script>
+    <script type="module" src="../static/scripts/chatbot.js"></script>
+    <script type="module" src="../static/scripts/login.js"></script>
+
 </head>
 
 <body>

templates/{chat.html → chatbot.html}

@@ -7,7 +7,7 @@
     <section class="msger">
         <header class="msger-header">
             <div class="msger-header-title">
-                <i class="fas fa-bug"></i> Chatbot <i class="fas fa-bug"></i>
+                <i class="fa-thin fa-message-bot"></i>Water Regulation QA Chatbot <i class="fa-thin fa-message-bot"></i>
             </div>
         </header>
 
@@ -19,22 +19,21 @@
                 <div class="msg-bubble">
                     <div class="msg-info">
                         <div class="msg-info-name">Chatbot</div>
-                        <div class="msg-info-time">${}</div>
+                        <div class="msg-info-time"></div>
                     </div>
 
                     <div class="msg-text">
-                        Hi, welcome to ChatBot! Go ahead and send me a message. 😄
+                        Hi, welcome to ChatBot! Please type in your question. 😄
                     </div>
                 </div>
             </div>
 
         </main>
 
-        <form class="msger-inputarea" action="/" method="POST">
+        <form class="msger-inputarea">
             <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
             <button type="submit" class="msger-send-btn">Send</button>
         </form>
     </section>
     <!-- partial -->
-    <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
 {% endblock %}

templates/login.html

@@ -5,19 +5,21 @@
 {% block content %}
     <div class="login-box">
         <h2 style="text-align: center">Login</h2>
-        {% if error %}
-            <p class="error-message">{{ error }}</p>
-        {% endif %}
     
-        <form action="{{ url_for('login') }}" method="post">
+        <form class="login-form" id="loginForm">
             <label for="username">Username</label>
             <input type="text" id="username" name="username" placeholder="Enter username" required>
 
-            <label for="accessToken">Access Token</label>
-            <input type="password" id="access_token" name="access_token" placeholder="Enter Token Key" required>
+            <label for="accessToken">OpenAI API KEY</label>
+            <input type="password" class="token-input" id="accessToken" name="accessToken" placeholder="Enter Token Key" required>
 
             <button type="submit" class="login-button">Login</button>
         </form>
     </div>
-
+    <div class="loading-container">
+        <div class="loader">
+            <p>Authenticating OpenAI Token ...</p>
+            <p>Initializing chatbot ...</p>
+        </div>
+    </div>
 {% endblock %}