Update app.py

app.py

@@ -18,44 +18,77 @@ def classify_commit(message):
     # Return the predicted labels as a comma-separated string
     return ", ".join(predicted_labels[0]) if predicted_labels[0] else "No labels"
 
-# Custom CSS for Light Blue Background
+# Custom CSS for Improved Aesthetics
 custom_css = """
 body {
-    background-color: #d0f0fd;  /* Light Blue */
+    background-color: #e6f7ff;  /* Light Blue Background */
+    font-family: 'Arial', sans-serif;
+}
+.gradio-container {
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+    max-width: 800px;
+    margin: auto;
+}
+h1, h2 {
+    color: #004d80;  /* Darker Blue for headings */
+    text-align: center;
+}
+footer {
+    text-align: center;
+    color: #555;
+    font-size: 12px;
 }
 """
 
-# Create a Gradio interface with Dockerfile-specific examples and visuals
-demo = gr.Interface(
-    fn=classify_commit,
-    inputs=gr.Textbox(
-        label="Enter Commit Message",
-        placeholder="Type your Dockerfile-related commit message here...",
-        lines=3,
-        max_lines=5,
-    ),
-    outputs=gr.Textbox(label="Predicted Labels"),
-    title="🐳 Dockerfile Commit Message Classifier",
-    description="🔍 Classify commit messages related to Dockerfiles into categories like 'bug fix', 'feature addition', and more. Enter a commit message to get the predictions.",
-    examples=[
-        ["Fixed an issue with the base image version in Dockerfile"],
-        ["Added a new multistage build to optimize Docker image size"],
-        ["Updated the Python version in Dockerfile to 3.10"],
-        ["Sort Dockerfile"],
-        ["Added COPY instruction for configuration files"],
-    ],
-    article="""
-    **How to Use**:
-    - Enter a commit message related to Dockerfiles.
-    - The tool predicts categories such as 'bug fix', 'code refactoring', 'feature addition', or 'maintenance/other'.
-    
-    **Examples**:
-    - Fixing base image versions.
-    - Adding new Docker build stages.
-    - Updating dependencies in Dockerfiles.
-    """,
-    css=custom_css,
-)
+# Create the layout with Gradio Blocks
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("<h1>🐳 Dockerfile Commit Message Classifier</h1>")
+    gr.Markdown(
+        """
+        <p>🔍 Use this tool to classify Dockerfile-related commit messages into categories like <b>'bug fix'</b>, 
+        <b>'feature addition'</b>, and more. Enter a commit message below to see the prediction.</p>
+        """
+    )
+    with gr.Row():
+        with gr.Column(scale=1):
+            commit_message_input = gr.Textbox(
+                label="Enter Commit Message",
+                placeholder="Type your Dockerfile-related commit message here...",
+                lines=3,
+                max_lines=5,
+            )
+        with gr.Column(scale=1):
+            predicted_output = gr.Textbox(
+                label="Predicted Labels",
+                interactive=False,
+                lines=2,
+            )
+    classify_button = gr.Button("Classify", elem_id="classify-btn")
+    classify_button.click(
+        classify_commit, inputs=commit_message_input, outputs=predicted_output
+    )
+
+    gr.Markdown("<h2>📝 Examples</h2>")
+    gr.Examples(
+        examples=[
+            ["Fixed an issue with the base image version in Dockerfile"],
+            ["Added a new multistage build to optimize Docker image size"],
+            ["Updated the Python version in Dockerfile to 3.10"],
+            ["Sort Dockerfile"],
+            ["Added COPY instruction for configuration files"],
+        ],
+        inputs=commit_message_input,
+    )
+
+    gr.Markdown(
+        """
+        <footer>
+        <p>⚙️ Built with ❤️ using <b>Gradio</b>. Try it now!</p>
+        </footer>
+        """
+    )
 
 # Launch the Gradio app
 demo.launch(share=True, server_port=7860)