Update app.py

app.py

@@ -47,8 +47,8 @@ def infer(question):
 
     return result
 
-css="""
-#col-container {max-width: 700px; margin-left: auto; margin-right: auto;}
+# CSS
+css = """
 #col-container {
   max-width: 700px;
   margin-left: auto;
@@ -81,19 +81,14 @@ css="""
   height: 350px;
   border: 1px solid #ccc;
   padding: 10px;
-}
-
-.question {
-  margin-bottom: 10px;
-}
-
-.submit-btn {
-  margin-bottom: 10px;
+  background-color: #fff;
+  font-family: sans-serif;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 .chatbot .message {
   color: #000;
-  font-size: 16px;
 }
 
 .chatbot .user-message {
@@ -105,37 +100,70 @@ css="""
 }
 """
 
-title ="""
+# HTML
+title = """
 <div style="text-align: center;max-width: 700px;">
     <h1>Chat with PDF</h1>
     <p style="text-align: center;">Upload a .pdf from local machine, click the "Load PDF🚀" button, <br />
     When ready, you are all set to start asking questions from the pdf</p>
-</div>"""
+</div>
+"""
+
+
+def pdf_changes(inputs, outputs):
+  """Updates the text of the langchain status textbox."""
+  pdf_doc = inputs["pdf_doc"]
+  repo_id = inputs["repo_id"]
+
+  langchain_status.update_text(f"Loading PDF to langchain...")
+
+  # Load the PDF to langchain
+  langchain.load_pdf(pdf_doc, repo_id)
+
+  langchain_status.update_text(f"PDF loaded to langchain.")
+
+
+def add_text(inputs, outputs):
+  """Adds text to the chatbot."""
+  chatbot = inputs["chatbot"]
+  question = inputs["question"]
+
+  # Add the user question to the chatbot
+  chatbot.add_user_message(question)
+
+  # Get the response from the langchain chatbot
+  response = langchain.get_response(question)
+
+  # Add the bot response to the chatbot
+  chatbot.add_bot_message(response)
+
 
+# Create the chatbot
+chatbot = gr.Chatbot([], elem_id="chatbot").style(height=350)
 
+# Create the langchain object
+langchain = gr.Langchain()
 
+# Create the UI
 with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="col-container"):
-        gr.HTML(title)
-        
-        with gr.Column():
-            pdf_doc = gr.File(label="Load a pdf", file_types=['.pdf'], type="file")
-            repo_id = gr.Dropdown(label="LLM", choices=["google/flan-ul2", "OpenAssistant/oasst-sft-1-pythia-12b", "bigscience/bloomz"], value="google/flan-ul2")
-            with gr.Row():
-                langchain_status = gr.Textbox(label="Status", placeholder="", interactive=False)
-                load_pdf = gr.Button("Load pdf to langchain")
-        
-        chatbot = gr.Chatbot([], elem_id="chatbot").style(height=350)
-        question = gr.Textbox(label="Question", placeholder="Type your Question and hit Enter ")
-        submit_btn = gr.Button("Send message")
-    #load_pdf.click(loading_pdf, None, langchain_status, queue=False)    
-    repo_id.change(pdf_changes, inputs=[pdf_doc, repo_id], outputs=[langchain_status], queue=False)
-    load_pdf.click(pdf_changes, inputs=[pdf_doc, repo_id], outputs=[langchain_status], queue=False)
-    question.submit(add_text, [chatbot, question], [chatbot, question]).then(
-        bot, chatbot, chatbot
-    )
-    submit_btn.click(add_text, [chatbot, question], [chatbot, question]).then(
-        bot, chatbot, chatbot
-    )
-
-demo.launch(True)
+  with gr.Column(elem_id="col-container"):
+    gr.HTML(title)
+
+    with gr.Column():
+      pdf_doc = gr.File(label="Load a pdf", file_types=['.pdf'], type="file")
+      repo_id = gr.Dropdown(label="LLM", choices=["google/flan-ul2", "OpenAssistant/oasst-sft-1-pythia-12b", "bigscience/bloomz"], value="google/flan-ul2")
+      with gr.Row():
+        langchain_status = gr.Textbox(label="Status", placeholder="", interactive=False)
+        load_pdf = gr.Button("Load pdf to langchain")
+        chatbot.style(height=350)
+
+    question = gr.Textbox(label="Question", placeholder="Type your Question and hit Enter ")
+    submit_btn = gr.Button("Send message")
+
+  # Respond to events
+  load_pdf.click(pdf_changes, inputs=[pdf_doc, repo_id], outputs=[langchain_status], queue=False)
+  question.submit(add_text, [chatbot, question], [chatbot, question]).then(bot, chatbot, chatbot)
+  submit_btn.click(add_text, [chatbot, question], [chatbot, question]).then(bot, chatbot, chatbot)
+
+# Start the demo
+demo.show(True)