Update app.py

app.py

@@ -226,96 +226,13 @@ def respond(message, history):
                     yield output
 
 
-# Create the Gradio interface
 demo = gr.ChatInterface(
     fn=respond,
-    chatbot=gr.Chatbot(
-        show_copy_button=True,
-        likeable=True,
-        layout="custom",
-        chatbot_class="custom-chatbot",
-    ),
+    chatbot=gr.Chatbot(show_copy_button=True, likeable=True, layout="panel"),
     description="# OpenGPT 4o \n ### chat, generate images, perform web searches, and Q&A with images.",
     textbox=gr.MultimodalTextbox(),
     multimodal=True,
     concurrency_limit=200,
     cache_examples=False,
 )
-
-canvas = gr.HTML(
-    """
-    <style>
-       .custom-chatbot {
-            width: 100%;
-            height: 80vh;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            padding: 20px;
-            background-color: #f7f7f7;
-        }
-       .chatbot-header {
-            font-size: 20px;
-            font-weight: bold;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            border-bottom: 1px solid #ccc;
-        }
-       .chatbot-header.title {
-            font-size: 18px;
-        }
-       .chatbot-header.logout {
-            font-size: 14px;
-            cursor: pointer;
-            margin-left: 10px;
-        }
-       .chatbot-header.logout:hover {
-            text-decoration: underline;
-        }
-       .chat-message {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            padding: 10px;
-        }
-       .chat-message.text {
-            background-color: #fff;
-            padding: 10px;
-            border-radius: 10px;
-        }
-       .chat-message.text.self {
-            background-color: #dafff7;
-        }
-       .chat-message.text.date {
-            font-size: 12px;
-            color: #666;
-            margin-top: 5px;
-        }
-       .chat-message.input {
-            flex-grow: 1;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            font-size: 16px;
-        }
-    </style>
-    <div class="custom-chatbot">
-        <header class="chatbot-header">
-            <div class="title">OpenGPT Chatbot</div>
-            <div class="logout" onclick="logout()">Logout</div>
-        </header>
-        <div class="chat-messages">
-            <div class="chat-message" id="messages-container">
-                <!-- messages will be rendered here -->
-            </div>
-            <div class="chat-input">
-                <input type="text" id="chat-input" />
-                <button id="send-btn">Send</button>
-            </div>
-        </div>
-    </div>
-"""
-)
-
-demo.launch(canvas=canvas)
+demo.launch()