integrate fastapi

.gitignore

@@ -0,0 +1,5 @@
+venv/
+data/__pycache__
+models/__pycache__
+.env
+__pycache__

Dockerfile

@@ -4,8 +4,12 @@ WORKDIR /docker
 
 ADD . /docker
 
+COPY requirements.txt requirements.txt
+RUN pip install --upgrade pip
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
+COPY . .
+
 # Set up a new user named "user" with user ID 1000
 RUN useradd -m -u 1000 user
 
@@ -14,7 +18,7 @@ USER user
 
 # Set home to the user's home directory
 ENV HOME=/home/user \
-	PATH=/home/user/.local/bin:$PATH
+    PATH=/home/user/.local/bin:$PATH
 
 # Set the working directory to the user's home directory
 WORKDIR $HOME/app
@@ -22,4 +26,5 @@ WORKDIR $HOME/app
 # Set the working directory to the user's home directory
 COPY --chown=user . $HOME/app
 
-CMD [ "gunicorn" , "app:app" ]
+# CMD [ "gunicorn" , "main:app" ]
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -1,52 +0,0 @@
-import os
-from datetime import datetime
-
-import openai
-from flask import Flask, redirect, render_template, request, session, url_for
-from models.bloom import initialize_index
-
-app = Flask(__name__)
-index = None
-
-@app.route("/")
-def home():
-    if 'access_token' not in session:
-        return render_template('auth.html')
-    global index
-    try: 
-        index = initialize_index("index.json")
-    except:
-        return render_template("auth.html", error="Invalid Token Key")
-    return render_template('chat.html')
-
-
-@app.route("/login", methods=["GET", "POST"])
-def login():
-    if request.method == "POST":
-        username = request.form.get("username")
-        access_token = request.form.get("access_token")
-        openai.api_key = access_token
-        session['access_token'] = access_token
-        return redirect(url_for('home'))
-    return render_template('auth.html')
-
-@app.route("/logout")
-def logout():
-    session.pop('access_token', None)
-    return redirect(url_for('home'))
-
-@app.route("/chat")
-def chat():
-    query_text = request.args.get("msg", None)
-    if query_text is None:
-        return "Invalid input"
-
-    if 'access_token' not in session:
-        return redirect(url_for('login'))
-
-    response = index.query(query_text)
-    return str(response), 200
-
-
-if __name__ == "__main__":
-    app.run(debug=True)

main.py

@@ -0,0 +1,37 @@
+import os
+
+import openai
+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.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+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")
+
+# mounts the static folder that contains the css file
+app.mount("/static", StaticFiles(directory="static", html=True), name="static")
+
+# locates the template files that will be modified at run time
+# with the dialog form the user and bot
+templates = Jinja2Templates(directory="templates")
+
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    return templates.TemplateResponse('chat.html', {"request": request})
+
+@app.get("/chat")
+async def chat(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

@@ -1,5 +1,7 @@
 Click
-Flask
+flask
+fastapi
+unvicorn
 Flask-SQLAlchemy
 gunicorn
 itsdangerous
@@ -14,4 +16,5 @@ panda
 numpy
 langchain
 python-dotenv
-flask-login
+flask-login
+python-multipart

static/script.js

@@ -0,0 +1,66 @@
+const msgerForm = get(".msger-inputarea");
+const msgerInput = get(".msger-input");
+const msgerChat = get(".msger-chat");
+
+// Icons made by Freepik from www.flaticon.com
+const BOT_IMG = "./icons/dialogflow-insights-svgrepo-com.svg";
+const PERSON_IMG = "";
+const BOT_NAME = "    ChatBot";
+const PERSON_NAME = "You";
+
+msgerForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    const msgText = msgerInput.value;
+    if (!msgText) return;
+
+    appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
+    msgerInput.value = "";
+    botResponse(msgText);
+});
+
+function appendMessage(name, img, side, text) {
+    //   Simple solution for small apps
+    const msgHTML = `
+                <div class="msg ${side}-msg">
+                <div class="msg-img" style="background-image: url(${img})"></div>
+
+                <div class="msg-bubble">
+                    <div class="msg-info">
+                        <div class="msg-info-name">${name}</div>
+                        <div class="msg-info-time">${formatDate(
+                            new Date()
+                        )}</div>
+                    </div>
+
+                    <div class="msg-text">${text}</div>
+                </div>
+                </div>
+            `;
+
+    msgerChat.insertAdjacentHTML("beforeend", msgHTML);
+    msgerChat.scrollTop += 500;
+}
+
+async function botResponse(text) {
+    // Bot Response
+    const response = await fetch("chat?input=${text}");
+    const json = await response.json();
+
+    console.log(text);
+    console.log(json);
+
+    appendMessage(BOT_NAME, BOT_IMG, "left", json.bot_reply);
+}
+
+// Utils
+function get(selector, root = document) {
+    return root.querySelector(selector);
+}
+
+function formatDate(date) {
+    const h = "0" + date.getHours();
+    const m = "0" + date.getMinutes();
+
+    return `${h.slice(-2)}:${m.slice(-2)}`;
+}

templates/base.html

@@ -6,9 +6,10 @@
     <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', filename='styles/chat.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles/auth.css') }}">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', path='styles/chat.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='styles/login.css') }}"> 
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
+    <script type="module" src="../static/script.js"></script>
 </head>
 
 <body>

templates/chat.html

@@ -9,10 +9,6 @@
             <div class="msger-header-title">
                 <i class="fas fa-bug"></i> Chatbot <i class="fas fa-bug"></i>
             </div>
-
-            {% if session.logged_in %}
-                <a href="{{ url_for('logout') }}" class="msger-logout-btn">Logout</a>
-            {% endif %}
         </header>
 
         <main class="msger-chat">
@@ -23,7 +19,7 @@
                 <div class="msg-bubble">
                     <div class="msg-info">
                         <div class="msg-info-name">Chatbot</div>
-                        <div class="msg-info-time">12:45</div>
+                        <div class="msg-info-time">{}</div>
                     </div>
 
                     <div class="msg-text">
@@ -41,76 +37,4 @@
     </section>
     <!-- partial -->
     <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
-    <script>
-
-        const msgerForm = get(".msger-inputarea");
-        const msgerInput = get(".msger-input");
-        const msgerChat = get(".msger-chat");
-
-
-        // Icons made by Freepik from www.flaticon.com
-        const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
-        const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
-        const BOT_NAME = "    ChatBot";
-        const PERSON_NAME = "You";
-
-        msgerForm.addEventListener("submit", event => {
-            event.preventDefault();
-
-            const msgText = msgerInput.value;
-            if (!msgText) return;
-
-            appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
-            msgerInput.value = "";
-            botResponse(msgText);
-        });
-
-        function appendMessage(name, img, side, text) {
-            //   Simple solution for small apps
-            const msgHTML = `
-                <div class="msg ${side}-msg">
-                <div class="msg-img" style="background-image: url(${img})"></div>
-
-                <div class="msg-bubble">
-                    <div class="msg-info">
-                        <div class="msg-info-name">${name}</div>
-                        <div class="msg-info-time">${formatDate(new Date())}</div>
-                    </div>
-
-                    <div class="msg-text">${text}</div>
-                </div>
-                </div>
-            `;
-
-            msgerChat.insertAdjacentHTML("beforeend", msgHTML);
-            msgerChat.scrollTop += 500;
-        }
-
-        function botResponse(rawText) {
-
-            // Bot Response
-            $.get("/chat", { msg: rawText }).done(function (data) {
-                console.log(rawText);
-                console.log(data);
-                const msgText = data;
-                appendMessage(BOT_NAME, BOT_IMG, "left", msgText);
-
-            });
-
-        }
-
-
-        // Utils
-        function get(selector, root = document) {
-            return root.querySelector(selector);
-        }
-
-        function formatDate(date) {
-            const h = "0" + date.getHours();
-            const m = "0" + date.getMinutes();
-
-            return `${h.slice(-2)}:${m.slice(-2)}`;
-        }
-    </script>
-
 {% endblock %}

templates/update.html

@@ -1,18 +0,0 @@
-{% extends 'base.html' %}
-
-{% block head %}
-<title>Task Master</title>
-{% endblock %}
-
-{% block body %}
-<div class="content">
-    <h1 style="text-align: center">Update Task</h1>
-
-    <div class="form">
-        <form action="/update/{{task.id}}" method="POST">
-            <input type="text" name="content" id="content" value="{{task.content}}">
-            <input type="submit" value="Update">
-        </form>
-    </div>
-</div>
-{% endblock %}