Update app.py

app.py

@@ -29,8 +29,6 @@ torch.manual_seed(seed)
 if torch.cuda.is_available():
     torch.cuda.manual_seed_all(seed)
 
-
-
 model_paths = [
     'karths/binary_classification_train_port',
     'karths/binary_classification_train_perf',
@@ -58,7 +56,6 @@ models = {path: AutoModelForSequenceClassification.from_pretrained(path) for pat
 def get_quality_name(model_name):
     return quality_mapping.get(model_name.split('/')[-1], "Unknown Quality")
 
-
 def model_prediction(model, text, device):
     model.to(device)
     model.eval()
@@ -127,7 +124,6 @@ def llama_generate(
     torch.cuda.empty_cache()
     return output_text.strip()
 
-
 def generate_explanation(issue_text, top_quality):
     """Generates an explanation for the *single* top quality above threshold."""
     if not top_quality:
@@ -157,7 +153,6 @@ Provide your response directly without preamble. Use a clear separation between
         logging.error(f"Error during Llama generation: {e}")
         return "<div style='color: red;'>An error occurred while generating the explanation.</div>"
 
-
 @spaces.GPU(duration=60)
 def main_interface(text):
     if not text.strip():
@@ -188,42 +183,21 @@ def main_interface(text):
         output_html = "<div style='color: red;'>No quality tag met the prediction probability threshold (>= 0.95).</div>"
         explanation = ""
 
-
     return output_html, "", explanation
 
 def render_html_output(top_qualities):
-    #Simplified to show only the top prediction
-    styles = """
-    <style>
-        .quality-container {
-            font-family: Arial, sans-serif;
-            text-align: center;
-            margin-top: 20px;
-        }
-        .quality-label, .ranking {
-            display: inline-block;
-            padding: 0.5em 1em;
-            font-size: 18px;
-            font-weight: bold;
-            color: white;
-            background-color: #007bff;
-            border-radius: 0.5rem;
-            margin-right: 10px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-    </style>
-    """
+    # Cleaned up: Removed the duplicate inline <style> tags here.
     if not top_qualities: # Handle empty case
-        return styles + "<div class='quality-container'>No Top Prediction</div>"
+        return "<div class='quality-container'>No Top Prediction</div>"
 
-    quality, _ = top_qualities[0] #We know there is only one
+    quality, _ = top_qualities[0] # We know there is only one
     html_content = f"""
     <div class="quality-container">
         <span class="ranking">Top Prediction</span>
         <span class="quality-label">{quality}</span>
     </div>
     """
-    return styles + html_content
+    return html_content
 
 example_texts = [
     ["The algorithm does not accurately distinguish between the positive and negative classes during edge cases.\n\nEnvironment: Production\nReproduction: Run the classifier on the test dataset with known edge cases."],
@@ -231,44 +205,66 @@ example_texts = [
     ["There is frequent miscommunication between the development and QA teams regarding feature specifications.\n\nEnvironment: Inter-team meetings\nReproduction: Audit recent communication logs and meeting notes between the teams."],
     ["The service-oriented architecture does not effectively isolate failures, leading to cascading failures across services.\n\nEnvironment: Microservices architecture\nReproduction: Simulate a service failure and observe the impact on other services."]
 ]
-# Improved CSS for better layout and appearance
+
+# Improved CSS for better layout and appearance in BOTH Light and Dark modes
 css = """
 .quality-container {
     font-family: Arial, sans-serif;
     text-align: center;
     margin-top: 20px;
     padding: 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color-primary, #ddd);
     border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--background-fill-secondary, #f9f9f9);
+    color: var(--body-text-color, #000);
 }
+
 .quality-label, .ranking {
     display: inline-block;
     padding: 0.5em 1em;
     font-size: 18px;
     font-weight: bold;
-    color: white;
+    color: white; /* Always keep text white inside the blue badge */
     background-color: #007bff;
     border-radius: 0.5rem;
     margin-right: 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
 .explanation-box {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color-primary, #ccc);
     padding: 15px;
     margin-top: 15px;
     border-radius: 8px;
-    background-color: #fff;
+    background-color: var(--background-fill-primary, #fff);
+    color: var(--body-text-color, #000);
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     line-height: 1.5;
 }
+
 .explanation-box p {
     margin: 8px 0;
 }
+
 .explanation-box b {
     color: #007bff;
 }
+
+/* Fallback explicit styling for Gradio Dark Mode */
+.dark .quality-container {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f3f4f6;
+}
+
+.dark .explanation-box {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f3f4f6;
+    box-shadow: 0 1px 3px rgba(255,255,255,0.05);
+}
 """
+
 interface = gr.Interface(
     fn=main_interface,
     inputs=gr.Textbox(lines=7, label="Issue Description", placeholder="Enter your issue text here"),
@@ -281,6 +277,8 @@ interface = gr.Interface(
     description="This tool classifies text into different quality domains such as Security, Usability, Mantainability, Reliability etc., and provides explanations.",
     examples=example_texts,
     css=css,
-    cache_examples=False# Apply the CSS
+    cache_examples=False
 )
-interface.launch()
+
+if __name__ == "__main__":
+    interface.launch()