changed Image layout

app.py

@@ -282,19 +282,20 @@ def main(args):
     with gr.Blocks(css="""
             .center { display: flex; justify-content: center; }
         """) as demo:
-        gr.HTML(
-        """
-        <center><h1><b>ReactXT</b></h1></center>
-        <p style="font-size:20px; font-weight:bold;">This is the demo page of our ACL 2024 paper 
-        <i>ReactXT: Understanding Molecular “Reaction-ship” via Reaction-Contextualized Molecule-Text Pretraining.</i></p>
-        """)
-        with gr.Row(elem_classes="center"):
-            gr.Image(value="./figures/frameworks.jpg", elem_classes="center", width=800, label="Framework of ReactXT")
-        gr.HTML(
-        """
-        <p style="font-size:16px;"> Please input one chemical reaction below, and we will generate the predicted experimental procedure.</p>
-        <p style="font-size:16px;"> The reaction should be in form of <b>Reactants>Reagents>Product</b>.</p>
-        """)
+        with gr.Column():
+            gr.HTML(
+            """
+            <center><h1><b>ReactXT</b></h1></center>
+            <p style="font-size:20px; font-weight:bold;">This is the demo page of our ACL 2024 paper 
+            <i>ReactXT: Understanding Molecular “Reaction-ship” via Reaction-Contextualized Molecule-Text Pretraining.</i></p>
+            """)
+            with gr.Row(elem_classes="center"):
+                gr.Image(value="figures/frameworks.jpg", elem_classes="center", label="Framework of ReactXT", scale=0.8)
+            gr.HTML(
+            """
+            <p style="font-size:16px;"> Please input one chemical reaction below, and we will generate the predicted experimental procedure.</p>
+            <p style="font-size:16px;"> The reaction should be in form of <b>Reactants>Reagents>Product</b>.</p>
+            """)
 
         reaction_string = gr.Textbox(placeholder="Input one reaction", label='Input Reaction')
         gr.Examples(example_inputs, [reaction_string,], fn=online_chat, label='Example Reactions')