update layout

app.py

@@ -17,6 +17,14 @@ from coreservice import app
 
 LEADING_PROMPT = "Read the following paper:"
 
+# with open("assets/custom.css", "r", encoding="utf-8") as f:
+#     custom_css = f.read()
+
+custom_css = """
+div#component-4 #chatbot {
+    height: 800px !important;
+}
+"""
 
 def replace_texttt(text):
     return re.sub(r"\\texttt\{(.*?)\}", r"*\1*", text)
@@ -31,7 +39,10 @@ def get_paper_info(paper_id):
 
     if paper is not None:
         # Return the paper's title and abstract
-        return paper.title, paper.summary
+        #  remove new lines
+        title_ = paper.title.replace("\n", " ").replace("\r", " ")
+        summary_  = paper.summary.replace("\n", " ").replace("\r", " ")
+        return  title_, summary_
     else:
         return None, None
 
@@ -203,7 +214,7 @@ def clear_context():
     return []
 
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     gr.HTML(
         """
     <h1 style='text-align: center; font-size: 24px;'>
@@ -211,13 +222,13 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         </h1>
         """
     )
-    gr.HTML(
-        """
-    <p style='text-align: justify; font-size: 18px; margin: 10px;'>
-        Explore the depths of ArXiv papers with our interactive app, powered by the advanced <code>claude-2.0</code> model. Ask detailed questions and get immediate, context-rich answers from academic papers.
-    </p>
-    """
-    )
+    # gr.HTML(
+    #     """
+    # <p style='text-align: justify; font-size: 18px; margin: 10px;'>
+    #     Explore the depths of ArXiv papers with our interactive app, powered by the advanced <code>claude-2.0</code> model. Ask detailed questions and get immediate, context-rich answers from academic papers.
+    # </p>
+    # """
+    # )
 
     gr.HTML(
         """
@@ -233,21 +244,24 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     """
     )
 
-    with gr.Column():
-        with gr.Row():
+    with gr.Row().style(equal_height=False):
+        with gr.Column(scale=2, emem_id="column-flex"):
+            chatbot = gr.Chatbot(elem_id="chatbot")
+
+        with gr.Column(scale=1):
             paper_id_input = gr.Textbox(label="Enter Paper ID", value="2310.12103")
             btn_load = gr.Button("Load Paper")
             qa_model = gr.State()
 
-        with gr.Column():
-            chatbot = gr.Chatbot().style(color_map=("blue", "yellow"))
             question_txt = gr.Textbox(
-                label="Question", lines=1, placeholder="Type your question here..."
+                label="Question", lines=5, placeholder="Type your question here..."
             )
-            btn_answer = gr.Button("Answer Question")
 
+            btn_answer = gr.Button("Answer Question")
             btn_clear = gr.Button("Clear Chat")
 
+
+
     gr.HTML(
         """<center>All the inputs are being sent to Anthropic's Claude endpoints. Please refer to <a href="https://legal.anthropic.com/#privacy">this link</a> for privacy policy.</center>"""
     )