some major updates on UI and backend

app.py

@@ -11,24 +11,32 @@ from typing import List, Dict
 load_dotenv()
 SUPABASE_URL = os.getenv("DB_URL")
 SUPABASE_KEY = os.getenv("DB_KEY")
-supabase_client = create_client(SUPABASE_URL, SUPABASE_KEY)
-
 pinecone_api_key = os.getenv("PINECONE")
+
+supabase_client = create_client(SUPABASE_URL, SUPABASE_KEY)
 pc = Pinecone(api_key=pinecone_api_key)
 index = pc.Index("focus-guru")
-model = SentenceTransformer('all-MiniLM-L6-v2')
+model = SentenceTransformer("all-MiniLM-L6-v2")
 
-def ingest_user_progress(supabase_client: Client, user_id: int, video_id: str, rating: float, time_spent: int, play_count: int, completed: bool):
+def ingest_user_progress(
+    supabase_client: Client,
+    user_id: int,
+    video_id: str,
+    rating: float,
+    time_spent: int,
+    play_count: int,
+    completed: bool
+):
     data = {
-        'user_id': user_id,
-        'video_id': video_id,
-        'rating': rating,
-        'time_spent': time_spent,
-        'play_count': play_count,
-        'completed': completed,
-        'updated_at': datetime.now().isoformat()
+        "user_id": user_id,
+        "video_id": video_id,
+        "rating": rating,
+        "time_spent": time_spent,
+        "play_count": play_count,
+        "completed": completed,
+        "updated_at": datetime.now().isoformat()
     }
-    response = supabase_client.table('user_progress').insert(data, upsert=True).execute()
+    response = supabase_client.table("user_progress").insert(data, upsert=True).execute()
     return response.data
 
 def gradio_ingest(user_input):
@@ -41,9 +49,9 @@ def gradio_ingest(user_input):
         play_count = int(data.get("play_count", 0))
         completed = bool(data.get("completed", False))
     except Exception as e:
-        return f"<div style='color: red;'>Error parsing input: {e}</div>"
+        return f"<p style='color: red;'>Error parsing input: {e}</p>"
     res = ingest_user_progress(supabase_client, user_id, video_id, rating, time_spent, play_count, completed)
-    return f"<div style='color: green;'>Ingested data: {res}</div>"
+    return f"<p style='color: green;'>Ingested data: {res}</p>"
 
 def recommend_playlists_by_package_and_module(assessment_output, index, model):
     report_text = assessment_output.get("report", "")
@@ -74,125 +82,100 @@ def gradio_recommend_playlist(input_json):
     try:
         assessment_data = json.loads(input_json)
     except json.JSONDecodeError:
-        return "<div style='color: red;'>Error: Invalid JSON format</div>"
+        return "<p style='color: red;'>Error: Invalid JSON format</p>"
     if "package" not in assessment_data or "report" not in assessment_data:
-        return "<div style='color: red;'>Error: Missing 'package' or 'report' field</div>"
+        return "<p style='color: red;'>Error: Missing 'package' or 'report' field</p>"
     recs = recommend_playlists_by_package_and_module(assessment_data, index, model)
-    html_output = """
-    <div style="
-        display: flex;
-        flex-direction: column;
-        gap: 30px;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-    ">
-    """
+    html_output = "<div style='padding: 20px; font-family: Arial, sans-serif;'>"
     for pkg, mod_recs in recs.items():
-        html_output += f"<h2 style='color: #2d3436;'>{pkg} Package</h2>"
-        html_output += "<div style='display: flex; flex-wrap: wrap; gap: 20px;'>"
+        html_output += f"<h2>{pkg} Package</h2><div style='display: flex; flex-wrap: wrap; gap: 20px;'>"
         for mod, rec in mod_recs.items():
-            card_html = f"""
-            <div style="
-                border: 1px solid #e0e0e0;
-                border-radius: 10px;
-                padding: 20px;
-                background: white;
-                width: 300px;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            ">
-                <h3 style="margin: 0 0 12px 0; color: #0984e3;">{mod} Module</h3>
-                <h4 style="margin: 0 0 8px 0; color: #2d3436;">{rec['title']}</h4>
-                <p style="margin: 0; color: #636e72; line-height: 1.5;">{rec['description']}</p>
+            html_output += f"""
+            <div style="border: 1px solid #ccc; border-radius: 8px; padding: 15px; width: 260px;">
+                <h3>{mod} Module</h3>
+                <strong>{rec['title']}</strong>
+                <p>{rec['description']}</p>
             </div>
             """
-            html_output += card_html
         html_output += "</div>"
     html_output += "</div>"
     return html_output
 
-def recommend_videos(user_id: int, K: int = 5, M: int = 10, N: int = 5) -> List[Dict]:
-    response = supabase_client.table('user_progress').select('video_id, rating, completed, play_count, videos!inner(playlist_id)').eq('user_id', user_id).execute()
+def recommend_videos(user_id: int, K: int = 5, M: int = 10, N: int = 5) -> Dict:
+    response = supabase_client.table("user_progress").select("video_id, rating, completed, play_count, videos!inner(playlist_id)").eq("user_id", user_id).execute()
     interactions = response.data
     if not interactions:
-        return []
+        return {
+            "note": "No interactions recorded for this user yet. Please watch or rate some videos.",
+            "recommendations": []
+        }
     for inter in interactions:
-        rating = inter['rating'] if inter['rating'] is not None else 0
-        completed_val = 1 if inter['completed'] else 0
-        play_count = inter['play_count']
-        engagement = rating + 2 * completed_val + play_count
-        inter['engagement'] = engagement
-    top_videos = sorted(interactions, key=lambda x: x['engagement'], reverse=True)[:K]
-    watched_completed_videos = {i['video_id'] for i in interactions if i['completed']}
+        rating = inter["rating"] if inter["rating"] is not None else 0
+        completed_val = 1 if inter["completed"] else 0
+        play_count = inter["play_count"]
+        inter["engagement"] = rating + 2 * completed_val + play_count
+    top_videos = sorted(interactions, key=lambda x: x["engagement"], reverse=True)[:K]
+    watched_completed_videos = {i["video_id"] for i in interactions if i["completed"]}
+    watched_incomplete_videos = {i["video_id"] for i in interactions if not i["completed"]}
     candidates = {}
     for top_video in top_videos:
         query_id = f"video_{top_video['video_id']}"
         response = index.query(id=query_id, top_k=M + 1, include_metadata=True)
-        for match in response.get('matches', []):
-            if match['id'] == query_id:
+        for match in response.get("matches", []):
+            if match["id"] == query_id:
                 continue
-            metadata = match.get('metadata', {})
-            vid = metadata.get('vid')
+            metadata = match.get("metadata", {})
+            vid = metadata.get("vid")
             if not vid:
                 continue
             if vid in watched_completed_videos:
                 continue
-            similarity = match['score']
-            pid = metadata.get('PID')
-            boost = 1.1 if pid == top_video['videos']['playlist_id'] else 1.0
-            partial_score = top_video['engagement'] * similarity * boost
+            similarity = match["score"]
+            pid = metadata.get("PID")
+            boost = 1.1 if pid == top_video["videos"]["playlist_id"] else 1.0
+            partial_score = top_video["engagement"] * similarity * boost
             if vid in candidates:
-                candidates[vid]['total_score'] += partial_score
+                candidates[vid]["total_score"] += partial_score
             else:
-                candidates[vid] = {'total_score': partial_score, 'metadata': metadata}
-    sorted_candidates = sorted(candidates.items(), key=lambda x: x[1]['total_score'], reverse=True)[:N]
+                candidates[vid] = {"total_score": partial_score, "metadata": metadata}
+    sorted_candidates = sorted(candidates.items(), key=lambda x: x[1]["total_score"], reverse=True)[:N]
     recommendations = []
     for vid, data in sorted_candidates:
-        metadata = data['metadata']
+        metadata = data["metadata"]
+        video_title = metadata.get("video_title", "Untitled Video")
+        if vid in watched_incomplete_videos:
+            video_title += " (Incomplete)"
         recommendations.append({
-            'video_id': vid,
-            'title': metadata.get('video_title'),
-            'description': metadata.get('video_description'),
-            'score': data['total_score']
+            "video_id": vid,
+            "title": video_title,
+            "description": metadata.get("video_description", ""),
+            "score": data["total_score"]
         })
-    return recommendations
+    note_text = "Based on your engagement, here are some recommended videos from the same playlist."
+    return {"note": note_text, "recommendations": recommendations}
 
 def gradio_recommend_videos(user_id_input):
     try:
         user_id = int(user_id_input)
     except Exception as e:
-        return f"<div style='color: red;'>Error: {e}</div>"
-    recs = recommend_videos(user_id)
+        return f"Error: {e}", ""
+    result = recommend_videos(user_id)
+    note_text = result["note"]
+    recs = result["recommendations"]
     if not recs:
-        return "<div style='color: #636e72;'>No video recommendations found for this user.</div>"
-    html_output = """
-    <div style="
-        display: flex;
-        flex-direction: column;
-        gap: 30px;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-    ">
-    """
-    html_output += "<h2 style='color: #2d3436;'>Recommended Videos</h2>"
-    html_output += "<div style='display: flex; flex-wrap: wrap; gap: 20px;'>"
+        return note_text, ""
+    html_output = "<div>"
+    # Use black cards with white text and orange border for visibility
     for rec in recs:
-        card_html = f"""
-        <div style="
-            border: 1px solid #e0e0e0;
-            border-radius: 10px;
-            padding: 20px;
-            background: white;
-            width: 300px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        ">
-            <h3 style="margin: 0 0 12px 0; color: #0984e3;">{rec['title']}</h3>
-            <p style="margin: 0 0 8px 0; color: #636e72;">{rec['description']}</p>
-            <p style="margin: 0; color: #2d3436;">Score: {rec['score']:.2f}</p>
+        html_output += f"""
+        <div style="background: #000; color: #fff; border: 2px solid orange; border-radius: 8px; margin-bottom: 10px; padding: 15px;">
+            <h3 style="margin-top: 0;">{rec['title']}</h3>
+            <p style="margin: 0;">{rec['description']}</p>
+            <p style="margin: 0;"><strong>Score:</strong> {rec['score']:.2f}</p>
         </div>
         """
-        html_output += card_html
-    html_output += "</div></div>"
-    return html_output
+    html_output += "</div>"
+    return note_text, html_output
 
 with gr.Blocks() as demo:
     with gr.Tabs():
@@ -202,17 +185,18 @@ with gr.Blocks() as demo:
                 label="Assessment Data (JSON)",
                 placeholder='''{
   "package": ["Focus", "Insomnia"],
-  "report": "Based on your responses, you may struggle with focus, anxiety, and burnout. The Focus and Insomnia packages can help improve your mental clarity and sleep quality."
+  "report": "Based on your responses, you may struggle with focus, anxiety, and burnout..."
 }'''
             )
             playlist_output = gr.HTML(label="Recommended Playlists")
             playlist_btn = gr.Button("Get Playlist Recommendations")
-            playlist_btn.click(gradio_recommend_playlist, playlist_input, playlist_output)
+            playlist_btn.click(fn=gradio_recommend_playlist, inputs=playlist_input, outputs=playlist_output)
         with gr.TabItem("Video Recommendation"):
             user_id_input = gr.Textbox(lines=1, label="User ID", placeholder="1")
+            note_output = gr.Textbox(label="Recommendation Note", interactive=False)
             videos_output = gr.HTML(label="Recommended Videos")
             videos_btn = gr.Button("Get Video Recommendations")
-            videos_btn.click(gradio_recommend_videos, user_id_input, videos_output)
+            videos_btn.click(fn=gradio_recommend_videos, inputs=user_id_input, outputs=[note_output, videos_output])
         with gr.TabItem("User Interaction Ingestion"):
             ingest_input = gr.Textbox(
                 lines=10,
@@ -228,6 +212,6 @@ with gr.Blocks() as demo:
             )
             ingest_output = gr.HTML(label="Ingestion Result")
             ingest_btn = gr.Button("Ingest Data")
-            ingest_btn.click(gradio_ingest, ingest_input, ingest_output)
+            ingest_btn.click(fn=gradio_ingest, inputs=ingest_input, outputs=ingest_output)
 
 demo.launch()