Rework the layout for better usability and readability

app.py

@@ -31,8 +31,7 @@ classifier = pipeline(
     top_k=None,  # Returns all scores for all labels, not just the one with the highest score
     truncation=True,  # Truncates the input text if it exceeds the maximum length
     max_length=512,  # Defines the maximum length of the input text (512 for BERT. Explicitly set here)
-    torch_dtype=torch_d_type
-    # Sets the torch dtype to 16-bit half-precision floating-point format if CUDA is available, otherwise sets it to 32-bit single-precision floating-point format
+    torch_dtype=torch_d_type  # Sets the torch dtype to 16-bit half-precision floating-point format if CUDA is available, otherwise sets it to 32-bit single-precision floating-point format
 )
 
 
@@ -62,20 +61,16 @@ examples = [
     ["Review: Great game, but the community is toxic., Playtime: 50, Voted Up: True, Upvotes: 1, Votes Funny: 0"]
 ]
 
-# HTML article to display in the Gradio Interface using the "article" parameter
-article = (
-    """
-    Format your input as follows for the best results: ***Review**: {review_text}, **Playtime**: {author_playtime_at_review}, **Voted Up**: {voted_up}, **Upvotes**: {upvotes}, **Votes Funny**: {votes_funny}.*
-    """
-)
+# Information Description about the Steam Review Format
+# info_description = (
+#     """
+#     Format your input as follows for the best results: ***Review**: {review_text}, **Playtime**: {author_playtime_at_review}, **Voted Up**: {voted_up}, **Upvotes**: {upvotes}, **Votes Funny**: {votes_funny}.*
+#     """
+# )
 
+# Labeling Criteria Information Markdown
 labeling_criteria = (
     """
-    <br>
-    <hr style="width: 75%; margin-left: auto; margin-right: auto;">
-    <b><u>Labeling Criteria:</u></b>
-    <br>
-    <br>
     <ul>
         <li>
             <b><span style="color:green;">Constructive</span></b>: 
@@ -91,51 +86,72 @@ labeling_criteria = (
     """
 )
 
+# Custom CSS to create a card-like design for the Gradio Interface
+custom_css = """
+<style>
+.card {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 16px;
+    border-radius: 12px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: transparent;
+    margin-bottom: 16px;
+}
+</style>
+"""
+
 # Main Gradio Interface using Gradio Blocks
 # Docs: https://www.gradio.app/docs/gradio/blocks
 with gr.Blocks() as steam_reviews_classifier_block:
-    gr.Markdown("## Steam Review Constructiveness Classifier")
-    gr.Markdown(article)
-
-    # Main Column
-    with gr.Column():
-        # Upper Row (Input Textbox, Constructive Label, Not Constructive Label)
-        with gr.Row(equal_height=True):
-            # Input Textbox Column
-            with gr.Column():
-                input_textbox = gr.Textbox(
-                    lines=8,
-                    label="Steam Review",
-                    # info="Input Steam Review here",
-                    placeholder="Review: I think this is a great game but it still has some room for improvement., Playtime: 12, Voted Up: True, Upvotes: 1, Votes Funny: 0",
+    with gr.Column(elem_classes=["card"]):
+        gr.Markdown("## Steam Review Constructiveness Classifier")
+        # gr.Markdown(info_description)
+
+        gr.HTML(custom_css)
+        # Main Column
+        with gr.Column():
+            # Card Column to create a card-like Design for the Main Functionality Components
+            with gr.Column(elem_classes=["card"]):
+                # Upper Row (Input Textbox, Constructive Label, Not Constructive Label)
+                with gr.Row(equal_height=True):
+                    # Input Textbox Column
+                    with gr.Column():
+                        input_textbox = gr.Textbox(
+                            lines=8,
+                            label="Steam Review",
+                            # info="Input Steam Review here",
+                            placeholder="Review: I think this is a great game but it still has some room for improvement., Playtime: 12, Voted Up: True, Upvotes: 1, Votes Funny: 0",
+                            show_copy_button=False,
+                            value="Review: I think this is a great game but it still has some room for improvement., Playtime: 12, Voted Up: True, Upvotes: 1, Votes Funny: 0"
+                        )
+
+                    # Constructive and Not Constructive Labels Column
+                    with gr.Column():
+                        constructive_label = gr.Label(label="Constructive")
+                        not_constructive_label = gr.Label(label="Not Constructive")
+
+                # Output Textbox which shows the textual representation of the Constructiveness Prediction
+                output_textbox = gr.Textbox(
+                    label="Constructiveness Prediction",
+                    interactive=False,
                     show_copy_button=False,
-                    value="Review: I think this is a great game but it still has some room for improvement., Playtime: 12, Voted Up: True, Upvotes: 1, Votes Funny: 0"
+                    # info="Textual representation of the Constructiveness Prediction"
                 )
 
-            # Constructive and Not Constructive Labels Column
-            with gr.Column():
-                constructive_label = gr.Label(label="Constructive")
-                not_constructive_label = gr.Label(label="Not Constructive")
-
-        # Examples Component
-        example_component = gr.Examples(
-            examples=examples,
-            inputs=input_textbox
-        )
-
-        # Output Textbox which shows the textual representation of the Constructiveness Prediction
-        output_textbox = gr.Textbox(
-            label="Constructiveness Prediction",
-            interactive=False,
-            show_copy_button=False,
-            # info="Textual representation of the Constructiveness Prediction"
-        )
-
-        # Submit Button
-        submit_button = gr.Button(value="Submit")
-
-        # Labeling Criteria
-        gr.Markdown(labeling_criteria)
+                gr.Markdown("<br>")
+
+                # Examples Component
+                example_component = gr.Examples(
+                    examples=examples,
+                    inputs=input_textbox
+                )
+
+                # Submit Button
+                submit_button = gr.Button(value="Submit")
+
+            # Collapsable Labeling Criteria Info Accordion
+            with gr.Accordion(label="See Labeling Criteria", open=False):
+                gr.Markdown(labeling_criteria)
 
     # Function to run when the Submit Button is clicked (Passes the input text to the classifier and displays the output text)
     def on_submit_click(input_text):