Update app.py

app.py

@@ -27,6 +27,44 @@ def chatbot(message):
 iface = gr.Interface(fn=chatbot, inputs="text", outputs="text")
 
 # Customize the layout to display the conversation
-iface.layout("textarea", "textbox")
+iface.interface_html = """
+<div>
+    <div>
+        <textarea id="input_text" rows="4" cols="50" placeholder="User input"></textarea>
+        <button id="submit_button">Send</button>
+    </div>
+    <div id="conversation" style="margin-top: 10px;"></div>
+</div>
+
+<script>
+    // Function to update the conversation display
+    function updateConversation() {
+        var conversation = gradio.interfaceInstances[0].cache["conversation"];
+        var conversationDiv = document.getElementById("conversation");
+        conversationDiv.innerHTML = "";
+        for (var i = 0; i < conversation.length; i++) {
+            var message = conversation[i];
+            var messageDiv = document.createElement("div");
+            messageDiv.innerHTML = message;
+            conversationDiv.appendChild(messageDiv);
+        }
+    }
+    
+    // Add event listener for the submit button
+    var submitButton = document.getElementById("submit_button");
+    submitButton.addEventListener("click", function() {
+        var inputText = document.getElementById("input_text").value;
+        if (inputText) {
+            gradio.interfaceInstances[0].input_interfaces[0].setValue(inputText);
+            gradio.interfaceInstances[0].submit();
+        }
+    });
+    
+    // Update the conversation display on page load
+    window.onload = function() {
+        updateConversation();
+    }
+</script>
+"""
 
 iface.launch()