Update app.py

app.py

@@ -245,17 +245,31 @@ css = """
     border: 1px solid #ccc; 
     }
     /* Style for the upvote button */ 
-    .upvote-button, .downvote-button, .submit-btn {  
-    flex: 1; /* Allow buttons to grow equally */  
-    margin: 0 5px; /* Add some margin for spacing */  
-    max-width: calc(50% - 10px); /* Ensure they are half width minus margin */  
-}
+    .submit-btn {  
+    width: 100%;  
+    }  
+    
+    .vote-container {  
+        display: flex;  
+        width: 100%;  
+        gap: 10px;  
+    }  
+    
+    .vote-buttons {  
+        display: flex;  
+        width: 100%;  
+        gap: 10px;  
+    }  
+    
+    .vote-btn {  
+        flex: 1;  
+    }
     .feedback {
         width: 40px; /* Set button width */
         height: 40px; /* Set button height */
         font-size: 16px; /* Set font size */
         background-color: #f8d7da; /* Set background color */
-}
+    }
 """
 
 with gr.Blocks(css=css) as demo:
@@ -266,20 +280,33 @@ with gr.Blocks(css=css) as demo:
             with gr.Column():
                 input_protein = gr.Textbox(type="text", label="Upload sequence")
                 prompt = gr.Textbox(type="text", label="Taxonomy Prompt (Optional)")
-                submit_btn = gr.Button(value="Submit")
+                submit_btn = gr.Button(value="Submit", elem_classes=["submit-btn"])
             with gr.Column():
                 # output_text = gr.Textbox(label="Output Text")
                 with gr.Accordion('Prediction:', open=True):
                     output_markdown = gr.Markdown(label="Output")
-        with gr.Row():
-            with gr.Column():
-                upvote_button = gr.Button("👍")
-            with gr.Column():
-                downvote_button = gr.Button("👎")
-            with gr.Column():
-                vote_markdown = gr.Markdown(label="Output")
-            with gr.Column():
-                vote_temp = gr.Markdown()
+        # with gr.Row():
+        #     with gr.Column():
+        #         upvote_button = gr.Button("👍")
+        #     with gr.Column():
+        #         downvote_button = gr.Button("👎")
+        #     with gr.Column():
+        #         vote_markdown = gr.Markdown(label="Output")
+        #     with gr.Column():
+        #         vote_temp = gr.Markdown()
+        # 投票按钮和内容的容器  
+        with gr.Row(elem_classes=["vote-container"]):  
+            # 投票按钮组  
+            with gr.Column(scale=1, elem_classes=["vote-buttons"]):  
+                with gr.Row():  
+                    upvote_button = gr.Button("👍", elem_classes=["vote-btn"])  
+                    downvote_button = gr.Button("👎", elem_classes=["vote-btn"])  
+            
+            # 投票相关内容  
+            with gr.Column(scale=3, elem_classes=["vote-content"]):  
+                with gr.Row():  
+                    vote_markdown = gr.Markdown(label="Output")  
+                    vote_temp = gr.Markdown()
         with gr.Row():
             inputs = gr.Textbox(type="text", label="Your feedback")
             feedback_markdown = gr.Markdown(label="Output")