Adding scrolling conversation history like ChatGPT

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 from transformers import T5Tokenizer, T5ForConditionalGeneration
 from langchain.memory import ConversationBufferMemory
-from langchain.prompts import PromptTemplate
 
 # Load the tokenizer and model for flan-t5
 tokenizer = T5Tokenizer.from_pretrained("google/flan-t5-base")
@@ -30,17 +29,21 @@ def chat_with_flan(input_text):
     # Update the memory with the user input and model response
     memory.save_context({"input": input_text}, {"output": response})
     
-    return response
+    return conversation_history + f"\nUser: {input_text}\nAssistant: {response}"
 
-# Set up the Gradio interface
-interface = gr.Interface(
-    fn=chat_with_flan,
-    inputs=gr.Textbox(label="Chat with FLAN-T5"),
-    outputs=gr.Textbox(label="FLAN-T5's Response"),
-    title="FLAN-T5 Chatbot with Memory",
-    description="This is a simple chatbot powered by the FLAN-T5 model with conversational memory, using LangChain.",
-)
+# Set up the Gradio interface with the input box below the output box
+with gr.Blocks() as interface:
+    chatbot_output = gr.Textbox(label="Conversation", lines=15, placeholder="Chat history will appear here...", interactive=False)
+    user_input = gr.Textbox(label="Your Input", placeholder="Type your message here...", lines=2)
+    
+    def update_chat(input_text, chat_history):
+        updated_history = chat_with_flan(input_text)
+        return updated_history, ""
+
+    # Arrange input/output components with live updating
+    user_input.submit(update_chat, inputs=[user_input, chatbot_output], outputs=[chatbot_output, user_input])
 
 # Launch the Gradio app
 interface.launch()
 
+