update app

app.py

@@ -84,24 +84,46 @@ def gradio_predict(option, text_input, file_input):
 def clear_inputs():
     return "Enter Text", "", None, "", None
 
-
-# Custom CSS for Better UI Scaling
+# Custom CSS for improved UI and fixed input container sizes
 custom_css = """
-.gradio-container { max-width: 1400px !important; margin: auto !important; }
-#title { text-align: center; font-size: 26px !important; font-weight: bold; }
-#predict-button, #clear-button, #download-button { width: 100% !important; height: 55px !important; font-size: 18px !important; }
-#results-box { height: 350px !important; overflow-y: auto !important; background: #f9f9f9; padding: 15px; border-radius: 10px; font-size: 16px; }
-"""
-custom_css1 = """
-.gradio-container { max-width: 1400px !important; margin: auto !important; }
-#title { text-align: center; font-size: 26px !important; font-weight: bold; }
-#predict-button, #clear-button, #download-button { width: 100% !important; height: 55px !important; font-size: 18px !important; }
-#results-box { height: 350px !important; overflow-y: auto !important; background: #f9f9f9; padding: 15px; border-radius: 10px; font-size: 16px; }
-#download-csv-file input { height: 30px !important; font-size: 14px !important; padding: 5px !important; }
+.gradio-container { 
+    max-width: 1000px !important; 
+    margin: auto !important; 
+}
+#title { 
+    text-align: center; 
+    font-size: 26px !important; 
+    font-weight: bold; 
+}
+#predict-button, #clear-button, #download-button { 
+    width: 100% !important; 
+    height: 55px !important; 
+    font-size: 18px !important; 
+}
+#results-box { 
+    height: 350px !important; 
+    overflow-y: auto !important; 
+    background: #f9f9f9; 
+    padding: 15px; 
+    border-radius: 10px; 
+    font-size: 16px; 
+}
+/* Reduce vertical padding for the radio component */
+#choose_input_method {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+}
+/* Force both input components to have the same min-height */
+#text_input, #file_input {
+    min-height: 200px !important;
+    /* Optionally add a consistent border and padding to match styling */
+    border: 1px solid #ccc;
+    padding: 10px;
+}
 """
-#".gradio-container {max-width: 1500px; margin: auto;}"
+
 # Gradio App UI
-with gr.Blocks(css=custom_css1) as app:
+with gr.Blocks(css=custom_css) as app:
     gr.Markdown(
         """
         # AI Solution for Defect Ticket Classification
@@ -111,25 +133,38 @@ with gr.Blocks(css=custom_css1) as app:
         **Model:** Fine-tuned **RoBERTa** for classification.  
 
         Enter ticket Description/Comment/Summary or upload a **CSV file** to predict Assigned Teams & Team Emails.
-        
         """,
         elem_id="title"
     )
 
     with gr.Row():
-        with gr.Column(scale=3):
-            option = gr.Radio(["Enter Text", "Upload CSV"], label="📝 Choose Input Method", value="Enter Text")
+        with gr.Column(scale=1):
+            # Radio component with elem_id for CSS targeting
+            option = gr.Radio(
+                ["Enter Text", "Upload CSV"], 
+                label="📝 Choose Input Method", 
+                value="Enter Text", 
+                elem_id="choose_input_method"
+            )
 
+            # Both inputs are given an element id to force consistent dimensions.
             text_input = gr.Textbox(
                 label="Enter Ticket Description/Comment/Summary (One per line)", 
+                visible=True,
                 lines=6, 
-                placeholder="Example:\n - Database performance issue\n - Login fails for admin users..."
+                placeholder="Example:\n - Database performance issue\n - Login fails for admin users...",
+                elem_id="text_input"
             )
 
-            file_input = gr.File(label="📂 Upload CSV (Optional)", type="filepath", visible=False)
+            file_input = gr.File(
+                label="📂 Upload CSV (Optional)", 
+                type="filepath", 
+                visible=False,
+                elem_id="file_input"
+            )
 
-        with gr.Column(scale=3):
-            gr.Markdown("## Prediction Results")  # **Title for Prediction Results**
+        with gr.Column(scale=1):
+            gr.Markdown("## Prediction Results")
             results_output = gr.Markdown(elem_id="results-box", visible=True)
             download_csv = gr.File(label="📥 Download Predictions CSV", interactive=False)
 
@@ -137,16 +172,18 @@ with gr.Blocks(css=custom_css1) as app:
         predict_btn = gr.Button("PREDICT", variant="primary")
         clear_btn = gr.Button("CLEAR", variant="secondary")
 
-    # Logic for Showing/ Hiding Input Fields
+    # Toggle the visibility of input components to ensure consistent sizing
     def toggle_input(selected_option):
-        return gr.update(visible=(selected_option == "Enter Text")), gr.update(visible=(selected_option == "Upload CSV"))
+        if selected_option == "Enter Text":
+            return gr.update(visible=True), gr.update(visible=False)
+        else:
+            return gr.update(visible=False), gr.update(visible=True)
 
     option.change(fn=toggle_input, inputs=[option], outputs=[text_input, file_input])
-
     predict_btn.click(fn=gradio_predict, inputs=[option, text_input, file_input], outputs=[results_output, download_csv])
     clear_btn.click(fn=clear_inputs, inputs=[], outputs=[option, text_input, file_input, results_output, download_csv])
 
-     # Footer view
+    # Footer view
     gr.Markdown("---")
     gr.Markdown(
         "<p style='text-align: center;color: gray;'>"

ticket-predictions.csv

@@ -1,4 +1,6 @@
 Index,Description,Assigned Team,Team Email
-1,Incorrect error handling in exception module.,Code Review Team,codereview.team@company.com
-2,Implement input sanitization to prevent injection attacks.,Code Review Team,codereview.team@company.com
-3,Error Handling Needs Improvement,Code Review Team,codereview.team@company.com
+1,Database queries not optimized for large datasets.,Code Review Team,codereview.team@company.com
+2,User authentication fails when accessing restricted sections.,Functional Team,functional.team@company.com
+3,High CPU utilization leading to system overheating and slow performance.,Performance Team,performance.team@company.com
+4,System crashes due to misconfigured runtime environments.,Infrastructure Team,infra.team@company.com
+5,Unauthorized access detected in restricted sections of the application.,Security Team,security.team@company.com