dark_mode (#3)

- add dark mode, fix issues (cb0d4a7fae13462c7ab9cfb937e1bf1015d71d5d)
- add dark mode (9a0e3d5ed4353a65ad59b278f196dbe56a229cee)
- adding report template (156d6a00a946f0db59e7996316778b9ab2f3d48c)

Delete_Later_report.txt

@@ -1 +1,49 @@
-Report section: 
+Report section: 
+Title Page
+    • Title: Term Project
+    • Authors:  Saksham Lakhera and Ahmed Zaher
+    • Course: CSE 555 — Introduction to Pattern Recognition
+    • Date: July 20 2025
+Abstract
+  • One concise paragraph summarizing the problem, method, key results, and significance
+Keywords (optional)
+  • 4 – 6 technical terms that index your paper (e.g., “pattern recognition, machine learning, CNN, EEG”)
+Introduction
+  • Problem statement and motivation
+  • Objectives and contributions
+  • Outline of the paper
+Background / Related Work
+  • Survey of prior methods and the state of the art
+  • Clear positioning of your approach relative to existing literature
+Dataset and Pre-processing
+  • Data source(s), collection or selection criteria
+  • Cleaning, normalization, augmentation, class balancing, etc.
+Methodology
+  • Theoretical foundations and algorithms used
+  • Model architecture, feature extraction, hyper-parameters
+  • Assumptions and justifications
+Experimental Setup
+  • Hardware / software environment
+  • Train / validation / test split, cross-validation strategy
+  • Evaluation metrics (accuracy, F1-score, ROC-AUC, etc.)
+Results
+  • Quantitative tables and charts
+  • Qualitative examples (e.g., confusion matrix, sample outputs)
+  • Statistical significance tests where applicable
+Discussion
+   • Interpretation of results (why methods worked or failed)
+   • Comparison with baselines or published benchmarks
+   • Limitations of your study
+Conclusion
+   • Recap of contributions and findings
+   • Practical implications
+Future Work
+   • Concrete next steps or open problems
+Acknowledgments (if appropriate)
+   • Funding sources, collaborators, data providers
+References
+   • Properly formatted bibliography (IEEE, APA, etc.)
+Appendices (optional)
+   • Supplementary proofs, additional graphs, extensive tables, code snippets
+
+

assets/css/styles.css

@@ -1,5 +1,27 @@
+:root {
+    --bg-primary: #ffffff; 
+    --bg-secondary: #f1f3f6;
+    --text-primary: #000000;
+    --text-secondary: #333333;
+    --border-color: #4a90e2;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+    --bg-primary: #1e1e1e;
+    --bg-secondary: #2d2d2d;
+    --text-primary: #ffffff;
+    --text-secondary: #e0e0e0;
+    --border-color: #6bb6ff;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
 body {
     font-family: 'Segoe UI', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
 }
 
 .block-container {
@@ -22,21 +44,22 @@ body {
 }
 
 .home-card {
-    background: #ffffff;
+    background: var(--bg-primary);
     border-radius: 12px;
     padding: 2rem;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 20px var(--shadow-color);
     max-width: 600px;
     text-align: center;
 }
 
 .about-box {
-    background-color: #f1f3f6;
-    border-left: 5px solid #4a90e2;
+    background-color: var(--bg-secondary);
+    border-left: 5px solid var(--border-color);
     padding: 1rem;
     margin-bottom: 1.5rem;
     border-radius: 6px;
     font-size: 0.95rem;
+    color: var(--text-secondary);
 }
 
 img {
@@ -55,3 +78,14 @@ p, li { font-size: 1rem; }
 
 /* Sidebar tweaks */
 .css-1lcbmhc { padding-top: 2rem; }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+      --bg-primary: #1e1e1e;
+      --bg-secondary: #2d2d2d;
+      --text-primary: #ffffff;
+      --text-secondary: #e0e0e0;
+      --border-color: #6bb6ff;
+      --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+  }

model/search_script.py

@@ -145,7 +145,7 @@ class RecipeSearchSystem:
             recipe = self.recipes_df.iloc[recipe_index]
             recipe_id = recipe['id']
             
-            semantic_score = similarities[recipe_index]
+            similarity_score = similarities[recipe_index]
             
             #if the recipe has no ratings we will assume it is a bad recipe to choose and set the ratio to 1.0
             if recipe_id in self.recipe_stats:
@@ -156,7 +156,7 @@ class RecipeSearchSystem:
             recipe_scores.append({
                 'recipe_index': recipe_index,
                 'recipe_id': recipe_id,
-                'semantic_score': semantic_score,
+                'similarity_score': similarity_score,
                 'avg_rating': avg_rating
             })
         
@@ -179,7 +179,7 @@ class RecipeSearchSystem:
             'minutes': int(recipe['minutes']),
             'n_steps': int(recipe['n_steps']),
             'description': recipe.get('description', ''),
-            'semantic_score': float(scores_info['semantic_score']),
+            'similarity_score': float(scores_info['similarity_score']),
             'avg_rating': float(avg_rating),
             'num_ratings': int(num_ratings),
             'unique_users': int(unique_users)
@@ -202,7 +202,7 @@ class RecipeSearchSystem:
         recipe_scores = self.rank_recipes_by_similarity_and_rating(similarities, filtered_recipe_indices)
         
         # Sort by semantic similarity, then by average rating
-        recipe_scores.sort(key=lambda x: (x['semantic_score'], x['avg_rating']), reverse=True)
+        recipe_scores.sort(key=lambda x: (x['similarity_score'], x['avg_rating']), reverse=True)
         
         # Get top results
         top_results = recipe_scores[:top_k]

pages/3_Recipe_Recommendation.py

@@ -6,7 +6,7 @@ import streamlit.components.v1 as components
 
 def recipe_search_page():
     st.markdown("""
-        ## 🍽️ Advanced Recipe Recommendation
+        ## Advanced Recipe Recommendation
         <div class="about-box">
         This module uses a custom-trained BERT model to semantically search recipes
         based on your query, ingredients, and tags.
@@ -14,18 +14,18 @@ def recipe_search_page():
     """, unsafe_allow_html=True)
 
     if 'search_system' not in st.session_state:
-        with st.spinner("🔄 Initializing recipe search system..."):
+        with st.spinner("Initializing recipe search system"):
             st.session_state.search_system = search_for_recipes()
 
     search_system = st.session_state.search_system
 
     if not search_system.is_ready:
-        st.error("❌ System not ready. Please check data files and try again.")
+        st.error("System not ready. Please check data files and try again.")
         return
 
     query = st.text_input(
         "Search for recipes:",
-        placeholder="e.g., 'chicken pasta', 'vegetarian salad', 'chocolate dessert'"
+        placeholder="e.g., 'chicken pasta', 'vegetarian salad', 'chocolate dessert', 'quick easy "
     )
 
     col1, col2 = st.columns(2)
@@ -42,8 +42,7 @@ def recipe_search_page():
             elapsed = time.time() - start
 
         if results:
-            st.markdown(f"### 🎯 Top {len(results)} recipe recommendations for: *'{query}'*")
-            st.markdown("<sub>📊 Sorted by best match using semantic search and popularity</sub>", unsafe_allow_html=True)
+            st.markdown(f"### Top {len(results)} recipe recommendations for: *'{query}'*")
             st.markdown("<hr>", unsafe_allow_html=True)
 
             for i, recipe in enumerate(results, 1):
@@ -52,39 +51,39 @@ def recipe_search_page():
 
                 html_code = f"""
                 <div style="margin-bottom: 24px; padding: 16px; border-radius: 12px; background-color: #fdfdfd; box-shadow: 0 2px 8px rgba(0,0,0,0.06); font-family: Arial, sans-serif;">
-                    <div style="font-size: 18px; font-weight: bold; color: #333;">🔝 {i}. {recipe['name']}</div>
+                    <div style="font-size: 18px; font-weight: bold; color: #333;"> {i}. {recipe['name']}</div>
 
                     <div style="margin: 4px 0 8px 0; font-size: 14px; color: #555;">
-                        ⏱️ <b>{recipe['minutes']} min</b> &nbsp;&nbsp;|&nbsp;&nbsp; 🔥 <b>{recipe['n_steps']} steps</b> &nbsp;&nbsp;|&nbsp;&nbsp; ⭐ <b>{recipe['avg_rating']:.1f}/5.0</b>
+                         <b>{recipe['minutes']} min</b> &nbsp;&nbsp;|&nbsp;&nbsp; <b>{recipe['n_steps']} steps</b> &nbsp;&nbsp;|&nbsp;&nbsp; <b>{recipe['avg_rating']:.1f}/5.0</b>
                         <span style="font-size: 12px; color: #999;">({recipe['num_ratings']} ratings)</span>
                     </div>
 
                     <div style="margin-bottom: 6px; font-size: 14px;">
-                        <b>🔍 Match Score:</b> <span style="color: #007acc; font-weight: bold;">{recipe['similarity_score']:.1%}</span>
+                        <b>Match Score:</b> <span style="color: #007acc; font-weight: bold;">{recipe['similarity_score']:.1%}</span>
                         <span style="font-size: 12px; color: #888;">(query match)</span><br>
-                        <b>🏆 Overall Score:</b> <span style="color: green; font-weight: bold;">{recipe['combined_score']:.1%}</span>
+                        <b>Overall Score:</b> <span style="color: green; font-weight: bold;">{recipe['combined_score']:.1%}</span>
                         <span style="font-size: 12px; color: #888;">(match + popularity)</span>
                     </div>
 
                     <div style="margin-bottom: 6px;">
-                        <b>🏷️ Tags:</b><br>
+                        <b>Tags:</b><br>
                         {" ".join([f"<span style='background:#eee;padding:4px 8px;border-radius:6px;margin:2px;display:inline-block;font-size:12px'>{tag}</span>" for tag in recipe['tags']])}
                     </div>
 
                     <div style="margin-bottom: 6px;">
-                        <b>🥘 Ingredients:</b><br>
+                        <b>Ingredients:</b><br>
                         <span style="font-size: 13px; color: #444;">{', '.join(recipe['ingredients'][:8])}
                         {'...' if len(recipe['ingredients']) > 8 else ''}</span>
                     </div>
 
-                    {"<div style='margin-top: 10px; font-size: 13px; color: #333;'><b>📖 Description:</b><br>" + description + "</div>" if description else ""}
+                    {"<div style='margin-top: 10px; font-size: 13px; color: #333;'><b>Description:</b><br>" + description + "</div>" if description else ""}
 
-                    {"<div style='margin-top: 10px; font-size: 13px;'><b>🧑‍🍳 Steps:</b><ol style='margin: 6px 0 0 18px; padding: 0;'>" + steps_html + "</ol></div>" if steps_html else ""}
+                    {"<div style='margin-top: 10px; font-size: 13px;'><b>Steps:</b><ol style='margin: 6px 0 0 18px; padding: 0;'>" + steps_html + "</ol></div>" if steps_html else ""}
                 </div>
                 """
                 components.html(html_code, height=360 + len(recipe.get("steps", [])) * 20)
 
         else:
-            st.warning(f"😔 No recipes found for '{query}' with a minimum rating of {min_rating}/5.0.")
+            st.warning(f"No recipes found for '{query}' with a minimum rating of {min_rating}/5.0.")
 
 render_layout(recipe_search_page)