Update app.py

app.py

@@ -98,41 +98,93 @@ Will not describe your needs to ChatGPT？You Use [ChatGPT Shortcut](https://new
 
 </div>
 """
-
 with gr.Blocks() as demo:
     gr.HTML(title)
     chatbot = gr.Chatbot().style(color_map=("#A238FF", "#A238FF"))
+    
     context = gr.State([])
+    
     systemPrompt = gr.State(update_system(initial_prompt))
-
+    
     with gr.Row():
         with gr.Column(scale=12):
             txt = gr.Textbox(show_label=False, placeholder="Please enter any of your needs here").style(container=False)
         with gr.Column(min_width=50, scale=1):
-            #submitBtn = gr.Button("🚀 Submit", variant="Primary")
-            submitBtn = gr.Button("🚀 Submit").style(css={"background-color": "#A238FF", "color":"white"})
-    with gr.Row():
-        emptyBtn = gr.Button("🧹 New conversation")
-        retryBtn = gr.Button("🔄 Resubmit")
-        delLastBtn = gr.Button("🗑️ Delete conversation")
-        #reduceTokenBtn = gr.Button("♻️ Optimize Tokens")
-
-    #newSystemPrompt = gr.Textbox(show_label=True, placeholder=f"Setting System Prompt...", label="Change System prompt").style(container=True)
-    #systemPromptDisplay = gr.Textbox(show_label=True, value=initial_prompt, interactive=False, label="Current System prompt").style(container=True)
+            submitBtn = gr.Button("🚀 Submit").style(
+                css={
+                    "background-color": "#A238FF",
+                    "border-radius": "8px",
+                    "padding": "8px",
+                    "color": "white",
+                    "font-weight": "bold",
+                    "font-size": "1em",
+                    "cursor": "pointer",
+                }
+            )
     
-    #gr.Markdown(description)
+    with gr.Row():
+        emptyBtn = gr.Button("🧹 New conversation").style(
+            css={
+                "background-color": "#E0E0E0",
+                "border-radius": "8px",
+                "padding": "8px",
+                "color": "black",
+                "font-weight": "bold",
+                "font-size": "1em",
+                "cursor": "pointer",
+            }
+        )
+        retryBtn = gr.Button("🔄 Resubmit").style(
+            css={
+                "background-color": "#E0E0E0",
+                "border-radius": "8px",
+                "padding": "8px",
+                "color": "black",
+                "font-weight": "bold",
+                "font-size": "1em",
+                "cursor": "pointer",
+            }
+        )
+        delLastBtn = gr.Button("🗑️ Delete conversation").style(
+            css={
+                "background-color": "#E0E0E0",
+                "border-radius": "8px",
+                "padding": "8px",
+                "color": "black",
+                "font-weight": "bold",
+                "font-size": "1em",
+                "cursor": "pointer",
+            }
+        )
     
     txt.submit(predict, [chatbot, txt, systemPrompt, context], [chatbot, context], show_progress=True)
     txt.submit(lambda :"", None, txt)
+    
     submitBtn.click(predict, [chatbot, txt, systemPrompt, context], [chatbot, context], show_progress=True)
     submitBtn.click(lambda :"", None, txt)
+    
     emptyBtn.click(reset_state, outputs=[chatbot, context])
-    #newSystemPrompt.submit(update_system, newSystemPrompt, systemPrompt)
-    #newSystemPrompt.submit(lambda x: x, newSystemPrompt, systemPromptDisplay)
-    #newSystemPrompt.submit(lambda :"", None, newSystemPrompt)
     retryBtn.click(retry, [chatbot, systemPrompt, context], [chatbot, context], show_progress=True)
     delLastBtn.click(delete_last_conversation, [chatbot, context], [chatbot, context], show_progress=True)
-    #reduceTokenBtn.click(reduce_token, [chatbot, systemPrompt, context], [chatbot, context], show_progress=True)
-
+    
+    demo.style(
+        css={
+            "background-color": "#F5F5F5",
+            "font-family": "sans-serif",
+            "padding": "20px",
+            "border-radius": "8px",
+            "box-shadow": "0px 2px 6px rgba(0,0,0,0.3)",
+        }
+    )
+    
+    demo.children[0].style(
+        css={
+            "text-align": "center",
+            "font-size": "1.5em",
+            "margin-bottom": "20px",
+        }
+    )
+    
+    gr.set_gradio_chart_theme(theme="light")
 
 demo.launch()