update app.py

app.py

@@ -80,21 +80,23 @@ def predict(history_planner, history_searcher):
     return history_planner, history_searcher
 
 with gr.Blocks(css="""
-    .block {margin-top: 20px; padding: 20px; border-radius: 10px; border: 1px solid #ddd;}
-    .centered-text {text-align: center; font-family: Arial, sans-serif; color: #333;}
-    .styled-button {background-color: #4A90E2; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;}
-    .styled-button:hover {background-color: #357ABD;}
-    .input-textbox {border-radius: 5px; border: 1px solid #ccc; padding: 10px;}
+    .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">MindSearch Gradio Demo</h1>""")
-    gr.HTML("""<p class="centered-text">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>""")
+    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>""")
     
     gr.HTML("""
-    <div class="centered-text" style="font-size: 16px;">
-        <a href="https://github.com/InternLM/MindSearch" style="margin-right: 15px; text-decoration: none; color: #4A90E2;">🔗 GitHub</a>
-        <a href="https://arxiv.org/abs/2407.20183" style="margin-right: 15px; text-decoration: none; color: #4A90E2;">📄 Arxiv</a>
-        <a href="https://huggingface.co/papers/2407.20183" style="margin-right: 15px; text-decoration: none; color: #4A90E2;">📚 Hugging Face Papers</a>
-        <a href="https://huggingface.co/spaces/internlm/MindSearch" style="text-decoration: none; color: #4A90E2;">🤗 Hugging Face Demo</a>
+    <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>
     """)