update app.py

app.py

@@ -11,6 +11,9 @@ PLANNER_HISTORY = []
 SEARCHER_HISTORY = []
 
 def rst_mem(history_planner: list, history_searcher: list):
+    '''
+    Reset the chatbot memory.
+    '''
     history_planner = []
     history_searcher = []
     if PLANNER_HISTORY:
@@ -36,6 +39,7 @@ def format_response(gr_history, agent_return):
     return
 
 def predict(history_planner, history_searcher):
+
     def streaming(raw_response):
         for chunk in raw_response.iter_lines(chunk_size=8192, decode_unicode=False, delimiter=b'\n'):
             if chunk:
@@ -79,47 +83,57 @@ def predict(history_planner, history_searcher):
             yield history_planner, history_searcher
     return history_planner, history_searcher
 
-with gr.Blocks(css="""
-    .centered-text {text-align: center; font-family: Arial, sans-serif; color: #333; margin-bottom: 10px;}
-    .link-container {text-align: center; margin-bottom: 15px;}
-    .link-container a {text-decoration: none; color: #4A90E2; margin: 0 10px; font-size: 15px;}
-    .link-container a:hover {color: #357ABD;}
-    .styled-button {background-color: #357ABD; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px;}
-    .styled-button:hover {background-color: #285280;}
-    .input-textbox {border-radius: 5px; border: 1px solid #ccc; padding: 10px; width: 100%;}
-""") as demo:
-    gr.HTML("""<h1 class="centered-text" style="margin-bottom: 5px;">MindSearch Gradio Demo</h1>""")
-    gr.HTML("""<p class="centered-text" style="margin-top: 0;">MindSearch is an open-source AI Search Engine Framework with Perplexity.ai Pro performance. Deploy your own search engine with either closed-source or open-source LLMs.</p>""")
-    
+with gr.Blocks(css=".button-primary { background-color: #4CAF50; color: white; border-radius: 8px; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .button-primary:hover { background-color: #45a049; } .button-secondary { background-color: #f44336; color: white; border-radius: 8px; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .button-secondary:hover { background-color: #e53935; }") as demo:
+    gr.HTML("""<h1 align="center" style="font-family: 'Arial', sans-serif; color: #4A90E2;">MindSearch Gradio Demo</h1>""")
+    gr.HTML("""<p style="text-align: center; font-family: Arial, sans-serif; color: #333; max-width: 800px; margin: 0 auto;">MindSearch is an open-source AI Search Engine Framework with Perplexity.ai Pro performance. You can deploy your own Perplexity.ai-style search engine using either closed-source LLMs (GPT, Claude) or open-source LLMs (InternLM2.5-7b-chat).</p>""")
     gr.HTML("""
-    <div class="link-container">
-        <a href="https://github.com/InternLM/MindSearch">🔗 GitHub</a>
-        <a href="https://arxiv.org/abs/2407.20183">📄 Arxiv</a>
-        <a href="https://huggingface.co/papers/2407.20183">📚 Hugging Face Papers</a>
-        <a href="https://huggingface.co/spaces/internlm/MindSearch">🤗 Hugging Face Demo</a>
+    <div style="text-align: center; font-size: 16px; margin-bottom: 20px;">
+        <a href="https://github.com/InternLM/MindSearch" style="margin-right: 15px; text-decoration: none; color: #4A90E2; font-weight: bold;">🔗 GitHub</a>
+        <a href="https://arxiv.org/abs/2407.20183" style="margin-right: 15px; text-decoration: none; color: #4A90E2; font-weight: bold;">📄 Arxiv</a>
+        <a href="https://huggingface.co/papers/2407.20183" style="margin-right: 15px; text-decoration: none; color: #4A90E2; font-weight: bold;">📚 Hugging Face Papers</a>
+        <a href="https://huggingface.co/spaces/internlm/MindSearch" style="text-decoration: none; color: #4A90E2; font-weight: bold;">🤗 Hugging Face Demo</a>
     </div>
     """)
-
     with gr.Row():
         with gr.Column(scale=10):
             with gr.Row():
                 with gr.Column():
-                    planner = gr.Chatbot(label='Planner', height=700, show_label=True, show_copy_button=True, bubble_full_width=False, render_markdown=True)
+                    planner = gr.Chatbot(label='Planner',
+                                         height=700,
+                                         show_label=True,
+                                         show_copy_button=True,
+                                         bubble_full_width=False,
+                                         render_markdown=True)
                 with gr.Column():
-                    searcher = gr.Chatbot(label='Searcher', height=700, show_label=True, show_copy_button=True, bubble_full_width=False, render_markdown=True)
+                    searcher = gr.Chatbot(label='Searcher',
+                                          height=700,
+                                          show_label=True,
+                                          show_copy_button=True,
+                                          bubble_full_width=False,
+                                          render_markdown=True)
             with gr.Row():
-                user_input = gr.Textbox(show_label=False, placeholder='帮我搜索一下 InternLM 开源体系', lines=5, container=False, elem_classes="input-textbox")
+                user_input = gr.Textbox(show_label=False,
+                                        placeholder='帮我搜索一下 InternLM 开源体系',
+                                        lines=5,
+                                        container=False,
+                                        css="border-radius: 8px; border: 1px solid #ddd; padding: 10px;")
             with gr.Row():
                 with gr.Column(scale=2):
-                    submitBtn = gr.Button('Submit', elem_classes="styled-button")
+                    submitBtn = gr.Button('Submit', css="button-primary")
                 with gr.Column(scale=1, min_width=20):
-                    emptyBtn = gr.Button('Clear History', elem_classes="styled-button")
+                    emptyBtn = gr.Button('Clear History', css="button-secondary")
 
     def user(query, history):
         return '', history + [[query, '']]
 
-    submitBtn.click(user, [user_input, planner], [user_input, planner], queue=False).then(predict, [planner, searcher], [planner, searcher])
-    emptyBtn.click(rst_mem, [planner, searcher], [planner, searcher], queue=False)
+    submitBtn.click(user, [user_input, planner], [user_input, planner],
+                    queue=False).then(predict, [planner, searcher],
+                                      [planner, searcher])
+    emptyBtn.click(rst_mem, [planner, searcher], [planner, searcher],
+                   queue=False)
 
 demo.queue()
-demo.launch(server_name='0.0.0.0', server_port=7860, inbrowser=True, share=True)
+demo.launch(server_name='0.0.0.0',
+            server_port=7860,
+            inbrowser=True,
+            share=True)