Update app.py

app.py

@@ -110,31 +110,33 @@ def search_matching_cvs(jd_text, jd_file, num_results):
     # Format results
     jd_preview = job_description[:150] + "..." if len(job_description) > 150 else job_description
     
-    output = f"""## 🎯 Top {len(results)} Matching CVs
+    output = f"""<div style="background: #ffffff; padding: 20px; border-radius: 10px; border: 1px solid #dee2e6;">
+## 🎯 Top {len(results)} Matching CVs
 **Job Description**: {jd_preview}
 **Search Results**:
+</div>
 """
     
     for i, cv in enumerate(results, 1):
         similarity_percentage = cv['weighted_score'] * 100
         
-        # Determine match quality and CSS class
+        # Determine match quality and inline styles
         if similarity_percentage >= 80:
             match_quality = "🟢 Excellent Match"
-            quality_class = "excellent-match"
+            quality_style = "background: #28a74522; border-left: 4px solid #28a745;"
         elif similarity_percentage >= 65:
             match_quality = "🟡 Good Match"
-            quality_class = "good-match"
+            quality_style = "background: #ffc10722; border-left: 4px solid #ffc107;"
         elif similarity_percentage >= 50:
             match_quality = "🟠 Fair Match"
-            quality_class = "fair-match"
+            quality_style = "background: #fd7e1422; border-left: 4px solid #fd7e14;"
         else:
             match_quality = "🔴 Weak Match"
-            quality_class = "weak-match"
+            quality_style = "background: #dc354522; border-left: 4px solid #dc3545;"
         
         output += f"""
 ### {i}. **{cv['filename']}**
-<div class="{quality_class}">
+<div style="{quality_style} padding: 15px; border-radius: 8px; margin: 10px 0;">
 **{match_quality}** - **{similarity_percentage:.1f}% Overall Match**
 📊 **Detailed Scores:**
 - Best Section Match: {cv['max_similarity']*100:.1f}%
@@ -144,7 +146,7 @@ def search_matching_cvs(jd_text, jd_file, num_results):
 *"{cv['best_match_text']}"*
 </div>
 ---
-        """
+"""
     
     return output
 
@@ -159,6 +161,7 @@ def get_system_status():
     
     if cv_search is None:
         return f"""
+        <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 5px solid #dc3545;">
         ## ⚠️ System Status: Not Ready
         
         {initialization_status}
@@ -168,12 +171,14 @@ def get_system_status():
         - Incorrect folder ID
         - Folder is not public
         - No PDF files in the folder
+        </div>
         """
     
     db_info = cv_search.get_database_info()
     
     if db_info['unique_cvs'] == 0:
         return f"""
+        <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 5px solid #dc3545;">
         ## ⚠️ System Status: No CVs Loaded
         
         {initialization_status}
@@ -182,9 +187,11 @@ def get_system_status():
         - Google Drive folder contains PDF files
         - Folder is publicly accessible
         - API key has proper permissions
+        </div>
         """
     
     return f"""
+    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 5px solid #28a745;">
     ## ✅ System Status: Ready for Search
     
     📊 **Database Statistics:**
@@ -195,6 +202,7 @@ def get_system_status():
     🤖 **AI Model**: Sentence Transformers (all-MiniLM-L6-v2)
     
     📁 **Sample CVs**: {', '.join(db_info['cv_filenames'][:3])}{'...' if len(db_info['cv_filenames']) > 3 else ''}
+    </div>
     """
 
 # Create Gradio interface
@@ -212,32 +220,16 @@ def create_interface():
         background: #f8f9fa; padding: 25px; border-radius: 15px; margin: 20px 0; 
         border-left: 5px solid #007bff;
     }
-    .gradio-container .results-container { 
-        background: #ffffff; padding: 25px; border-radius: 15px; 
-        border: 1px solid #dee2e6; margin: 20px 0;
-    }
     .gradio-container .header { 
         text-align: center; padding: 30px; background: #74b9ff; 
         color: white; margin: -20px -20px 20px -20px; border-radius: 15px 15px 0 0; 
     }
     .gradio-container .tab-content { padding: 15px; }
-    .gradio-container .excellent-match { 
-        background: #28a74522; padding: 15px; border-radius: 8px; border-left: 4px solid #28a745; 
-    }
-    .gradio-container .good-match { 
-        background: #ffc10722; padding: 15px; border-radius: 8px; border-left: 4px solid #ffc107; 
-    }
-    .gradio-container .fair-match { 
-        background: #fd7e1422; padding: 15px; border-radius: 8px; border-left: 4px solid #fd7e14; 
-    }
-    .gradio-container .weak-match { 
-        background: #dc354522; padding: 15px; border-radius: 8px; border-left: 4px solid #dc3545; 
-    }
     """
     
     with gr.Blocks(
         title="CV Semantic Search - Auto-loaded from Google Drive",
-        theme=gr.themes.Default(),  # Changed to Default theme to reduce conflicts
+        theme=gr.themes.Default(),
         css=css
     ) as demo:
         
@@ -316,6 +308,7 @@ Responsibilities:
             with gr.Group(elem_classes=["results-container"]):
                 search_output = gr.Markdown(
                     """
+                    <div style="background: #ffffff; padding: 25px; border-radius: 15px; border: 1px solid #dee2e6;">
                     ## 📋 How to Use This System:
                     
                     1. **Enter Job Requirements**: Use the text box or upload a PDF with your job description
@@ -329,8 +322,8 @@ Responsibilities:
                     - **Detailed Analysis**: Shows why each CV matches your requirements
                     
                     *Enter a job description above to get started!*
-                    """,
-                    elem_classes=["results-container"]
+                    </div>
+                    """
                 )
             
             # Refresh Status Button