Update app.py

app.py

@@ -244,32 +244,29 @@ css = """
     overflow: auto; 
     border: 1px solid #ccc; 
     }
-    /* Style for the upvote button */ 
-    .submit-btn {  
-    width: 100%;  
-    }  
-    
-    .vote-container {  
-        display: flex;  
-        width: 100%;  
-        gap: 10px;  
-    }  
-    
-    .vote-buttons {  
-        display: flex;  
-        width: 100%;  
-        gap: 10px;  
-    }  
+    /* Style for the upvote button */
+    .upvote-button {
+        width: 500px; /* Set button width */
+        height: 50px; /* Set button height */
+        font-size: 20px; /* Set font size */
+        background-color: #d4edda; /* Set background color */
+        border-radius: 5px; /* Rounded corners */
+    }
     
-    .vote-btn {  
-        flex: 1;  
+    /* Style for the downvote button */
+    .downvote-button {
+        width: 50px; /* Set button width */
+        height: 50px; /* Set button height */
+        font-size: 20px; /* Set font size */
+        background-color: #f8d7da; /* Set background color */
+        border-radius: 5px; /* Rounded corners */
     }
     .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:
@@ -280,33 +277,20 @@ 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", elem_classes=["submit-btn"])
+                submit_btn = gr.Button(value="Submit")
             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(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():
+            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():
             inputs = gr.Textbox(type="text", label="Your feedback")
             feedback_markdown = gr.Markdown(label="Output")
@@ -338,3 +322,4 @@ with gr.Blocks(css=css) as demo:
 
 demo.launch(debug=True)
 
+