Update app.py

app.py

@@ -4,41 +4,48 @@ from pingpong import PingPong
 from pingpong.gradio import GradioAlpacaChatPPManager
 
 STYLE = """
+#container-col {
+  
+}
+
 .custom-btn {
     border: none !important;
     background: none !important;
     box-shadow: none !important;
+    display: block !important;
+    text-align: left !important;
 }
-
 .custom-btn:hover {
     background: rgb(243 244 246) !important;
 }
-
 #prompt-txt > label > span {
     display: none !important;
 }
-
 #prompt-txt > label > textarea {
     border: transparent;
     box-shadow: none;
 }
-
 #chatbot {
     height: 800px; 
     overflow: auto;
     box-shadow: none !important;
     border: none !important;
 }
-
 #chatbot > .wrap {
     max-height: 780px;
 }
-
 #left-pane {
     background-color: #f9fafb;
     border-radius: 15px;
+    padding: 10px;
+}
+
+#left-top {
     padding-left: 10px;
     padding-right: 10px;
+    text-align: center;
+    font-weight: bold;
+    font-size: large;    
 }
 """
 
@@ -52,9 +59,7 @@ function() {
   }
   const local_data = getStorage('local_data');
   const history = [];
-
   console.log(1);
-
   if(local_data) {
     console.log(2);
     console.log(local_data);
@@ -62,7 +67,6 @@ function() {
       history.push([element.ping, element.pong])
     );
   }
-
   console.log(history);
   return [local_data, history];
 }
@@ -125,7 +129,7 @@ def initialize_t(ld):
 
   return list_conv[0].build_uis(), local_data
 
-with gr.Blocks(css=STYLE, theme='gradio/soft') as block:
+with gr.Blocks(css=STYLE, elem_id='container-col') as block:
   idx = gr.State(0)
   ttt = gr.Textbox(visible=False)
   local_data = gr.JSON(
@@ -135,8 +139,8 @@ with gr.Blocks(css=STYLE, theme='gradio/soft') as block:
   )
   
   with gr.Row():
-    with gr.Column(scale=1, min_width=100):
-      gr.Markdown("GradioChat")
+    with gr.Column(scale=1, min_width=180):
+      gr.Markdown("GradioChat", elem_id="left-top")
         
       with gr.Column(elem_id="left-pane"):
         first = gr.Button("1st", elem_classes=["custom-btn"])
@@ -145,10 +149,10 @@ with gr.Blocks(css=STYLE, theme='gradio/soft') as block:
         fourth = gr.Button("4th", elem_classes=["custom-btn"])
         fifth = gr.Button("5th", elem_classes=["custom-btn"])
           
-    with gr.Column(scale=10):
+    with gr.Column(scale=8):
       chatbot = gr.Chatbot(elem_id='chatbot')
       instruction_txtbox = gr.Textbox(
-          placeholder="What do you want to say to AI?", label="",
+          placeholder="Ask anything", label="",
           elem_id="prompt-txt"
       )