Update app.py

app.py

@@ -21,37 +21,57 @@ def bot(history):
         time.sleep(0.05)
         yield history
 
-with gr.Blocks() as demo:
-    # chatbot = gr.Chatbot()
-    # msg = gr.Textbox()
-    chatbot = gr.Chatbot([], show_label=False, elem_id="chatbot").style(height=500)
-
-    with gr.Row():
-        with gr.Column(scale=0.85):
-            txt = gr.Textbox(
-                show_label=False,
-                placeholder="Type your response and press enter, or record your response",
-            ).style(container=False)
-        with gr.Column(scale=0.15, min_width=0):
-            submit = gr.Button("Submit")
-    # gr.Interface(
-    #     fn=transcribe, 
-    #     inputs=[
-    #         gr.Audio(source="microphone", type="filepath", streaming=True), 
-    #         "state"
-    #     ],
-    #     outputs=[
-    #         msg,
-    #         "state"
-    #     ],
-    #     live=True)
-
-    txt.submit(user, [txt, chatbot], [txt, chatbot], queue=False).then(
-        bot, chatbot, chatbot
-    )
-    submit.click(user, [txt, chatbot], [txt, chatbot], queue=False).then(
-        bot, chatbot, chatbot
-    )
+css = """
+        .gradio-container {
+            font-family: 'IBM Plex Sans', sans-serif;
+        }
+        .gr-button {
+            color: white;
+            border-color: black;
+            background: black;
+        }
+        .container {
+            max-width: 730px;
+            margin: auto;
+            padding-top: 1.5rem;
+        }
+"""
+
+with gr.Blocks(css=css) as demo:
+
+    with gr.Box():
+        
+        # chatbot = gr.Chatbot()
+        # msg = gr.Textbox()
+        chatbot = gr.Chatbot([], show_label=False, elem_id="chatbot").style(min-height=30rem)
+    
+        # with gr.Row():
+        with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
+            with gr.Column(scale=0.85):
+                txt = gr.Textbox(
+                    show_label=False,
+                    placeholder="Type your response and press enter, or record your response",
+                ).style(container=False)
+            with gr.Column(scale=0.15, min_width=0):
+                submit = gr.Button("Submit")
+        # gr.Interface(
+        #     fn=transcribe, 
+        #     inputs=[
+        #         gr.Audio(source="microphone", type="filepath", streaming=True), 
+        #         "state"
+        #     ],
+        #     outputs=[
+        #         msg,
+        #         "state"
+        #     ],
+        #     live=True)
+    
+        txt.submit(user, [txt, chatbot], [txt, chatbot], queue=False).then(
+            bot, chatbot, chatbot
+        )
+        submit.click(user, [txt, chatbot], [txt, chatbot], queue=False).then(
+            bot, chatbot, chatbot
+        )
 
 demo.queue()
 demo.launch()