Update app.py

app.py

@@ -1,441 +1,451 @@
-import gradio as gr
-from neo4j import GraphDatabase
-import logging
-from typing import List, Dict, Tuple
-import pandas as pd
-from datetime import datetime
-import os
-
-# Set up logging
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-# Get Neo4j credentials from environment variables
-NEO4J_URL = os.environ['NEO4J_URL']
-NEO4J_USER = os.environ['NEO4J_USER']
-NEO4J_PASSWORD = os.environ['NEO4J_PASSWORD']
-
-def format_neo4j_datetime(dt) -> str:
-    """Convert Neo4j datetime to string format."""
-    if dt is None:
-        return 'Unknown date'
-    try:
-        # Convert Neo4j datetime to Python datetime
-        if hasattr(dt, 'to_native'):
-            dt = dt.to_native()
-        return dt.strftime('%Y-%m-%d')
-    except Exception as e:
-        logger.warning(f"Error formatting datetime: {e}")
-        return 'Unknown date'
-
-def format_interest_list(interests: set, max_items: int = 10) -> str:
-    """Format a list of interests with a limit and show count if truncated."""
-    if not interests:
-        return 'None'
-    sorted_interests = sorted(interests)
-    if len(sorted_interests) <= max_items:
-        return ', '.join(sorted_interests)
-    return f"{', '.join(sorted_interests[:max_items])} (+{len(sorted_interests) - max_items} more)"
-
-class QuestionRecommender:
-    def __init__(self):
-        self.driver = GraphDatabase.driver(
-            NEO4J_URL,
-            auth=(NEO4J_USER, NEO4J_PASSWORD)
-        )
-
-    def close(self):
-        self.driver.close()
-
-    def get_all_users(self) -> List[str]:
-        """Get list of all users."""
-        with self.driver.session() as session:
-            result = session.run("""
-                MATCH (u:User)
-                RETURN DISTINCT u.name as username
-                ORDER BY username
-            """)
-            return [record["username"] for record in result if record["username"]]
-
-    def get_user_interests(self, username: str) -> Dict[str, set]:
-        """Get keywords and topics a user is interested in."""
-        with self.driver.session() as session:
-            # Get keywords the user is interested in
-            keyword_result = session.run("""
-                MATCH (u:User {name: $username})-[:INTERESTED_IN_KEYWORD]->(k:Keyword)
-                RETURN DISTINCT k.keyword as keyword
-            """, username=username)
-            keywords = {str(record["keyword"]) for record in keyword_result if record["keyword"]}
-
-            # Get topics the user is interested in
-            topic_result = session.run("""
-                MATCH (u:User {name: $username})-[:INTERESTED_IN_TOPIC]->(t:Topic)
-                RETURN DISTINCT t.topic as topic
-            """, username=username)
-            topics = {str(record["topic"]) for record in topic_result if record["topic"]}
-
-            return {"keywords": keywords or set(), "topics": topics or set()}
-
-    def find_common_questions(self, user1: str, user2: str, max_questions: int = 5) -> List[Dict]:
-        """Find questions to recommend based on common interests."""
-        with self.driver.session() as session:
-            # First try to find questions with common keywords
-            keyword_questions = session.run("""
-                // Find keywords that both users are interested in
-                MATCH (u1:User {name: $user1})-[:INTERESTED_IN_KEYWORD]->(k:Keyword)<-[:INTERESTED_IN_KEYWORD]-(u2:User {name: $user2})
-                
-                // Find questions with these common keywords
-                WITH DISTINCT k
-                MATCH (q:Question)-[:HAS_KEYWORD]->(k)
-                WHERE q.author <> $user1 AND q.author <> $user2
-                
-                // Return questions with their details
-                RETURN DISTINCT 
-                       q.title as title,
-                       q.body as body,
-                       q.created_utc_ts as created_date,
-                       q.author as author,
-                       collect(k.keyword) as keywords
-                ORDER BY q.created_utc_ts DESC
-                LIMIT $limit
-            """, user1=user1, user2=user2, limit=max_questions)
-            
-            questions = [dict(record) for record in keyword_questions]
-            
-            # If no questions found with common keywords, try topics
-            if not questions:
-                topic_questions = session.run("""
-                    // Find topics that both users are interested in
-                    MATCH (u1:User {name: $user1})-[:INTERESTED_IN_TOPIC]->(t:Topic)<-[:INTERESTED_IN_TOPIC]-(u2:User {name: $user2})
-                    
-                    // Find questions with these common topics
-                    WITH DISTINCT t
-                    MATCH (q:Question)-[:HAS_TOPIC]->(t)
-                    WHERE q.author <> $user1 AND q.author <> $user2
-                    
-                    // Return questions with their details
-                    RETURN DISTINCT 
-                           q.title as title,
-                           q.body as body,
-                           q.created_utc_ts as created_date,
-                           q.author as author,
-                           collect(t.topic) as topics
-                    ORDER BY q.created_utc_ts DESC
-                    LIMIT $limit
-                """, user1=user1, user2=user2, limit=max_questions)
-                
-                questions = [dict(record) for record in topic_questions]
-
-            return questions
-
-def format_question(q: Dict) -> str:
-    """Format a question for display."""
-    created_date = format_neo4j_datetime(q.get('created_date'))
-    keywords_or_topics = q.get('keywords', q.get('topics', []))
-    interests = format_interest_list(set(k for k in keywords_or_topics if k is not None), max_items=5)
-    author = q.get('author', 'Unknown author')
-    title = q.get('title', 'Untitled')
-    body = q.get('body', '')
-    
-    # Only show body section if there's actual content
-    body_html = f"""
-    <div class="question-body">
-        {body[:300] + "... [truncated]" if body and len(body) > 300 else body}
-    </div>
-    """ if body else ""
-    
-    return f"""
-<div class="question-card">
-    <h3>{title}</h3>
-    <div class="question-meta">
-        Posted by <span class="author">{author}</span> on <span class="date">{created_date}</span>
-    </div>
-    <div class="interests">
-        Common Interests: <span class="interest-tags">{interests}</span>
-    </div>{body_html}
-</div>
-"""
-
-def recommend_questions(user1: str, user2: str) -> Tuple[str, str, str]:
-    """Main function to get recommendations and user interests."""
-    recommender = QuestionRecommender()
-    try:
-        # Get interests for both users
-        user1_interests = recommender.get_user_interests(user1)
-        user2_interests = recommender.get_user_interests(user2)
-        
-        # Find common interests
-        common_keywords = user1_interests['keywords'] & user2_interests['keywords']
-        common_topics = user1_interests['topics'] & user2_interests['topics']
-        
-        # Format interests summary
-        interests_summary = f"""
-<div class="interests-summary">
-    <div class="user-interests">
-        <h3>{user1}'s Interests</h3>
-        <div class="interest-section">
-            <strong>Keywords:</strong> {format_interest_list(user1_interests['keywords'], max_items=8)}
-        </div>
-        <div class="interest-section">
-            <strong>Topics:</strong> {format_interest_list(user1_interests['topics'], max_items=5)}
-        </div>
-    </div>
-    
-    <div class="user-interests">
-        <h3>{user2}'s Interests</h3>
-        <div class="interest-section">
-            <strong>Keywords:</strong> {format_interest_list(user2_interests['keywords'], max_items=8)}
-        </div>
-        <div class="interest-section">
-            <strong>Topics:</strong> {format_interest_list(user2_interests['topics'], max_items=5)}
-        </div>
-    </div>
-    
-    <div class="common-interests">
-        <h3>Common Interests</h3>
-        <div class="interest-section">
-            <strong>Keywords:</strong> {format_interest_list(common_keywords, max_items=8)}
-        </div>
-        <div class="interest-section">
-            <strong>Topics:</strong> {format_interest_list(common_topics, max_items=5)}
-        </div>
-    </div>
-</div>
-"""
-        
-        # Get recommended questions
-        questions = recommender.find_common_questions(user1, user2)
-        
-        if questions:
-            questions_text = """<div class="questions-container">\n""" + \
-                           """\n""".join(format_question(q) for q in questions) + \
-                           """\n</div>"""
-            recommendation_type = """<h2 class="recommendation-header">""" + \
-                                ("Recommendations Based on Common Keywords" if 'keywords' in questions[0] 
-                                 else "Recommendations Based on Common Topics") + \
-                                """</h2>"""
-        else:
-            questions_text = """<div class="no-questions">No questions found based on common interests.</div>"""
-            recommendation_type = """<h2 class="recommendation-header">No Recommendations Available</h2>"""
-        
-        return interests_summary, recommendation_type, questions_text
-    
-    except Exception as e:
-        logger.error(f"Error in recommend_questions: {str(e)}")
-        return (
-            """<div class="error">Error fetching user interests. Please try again.</div>""",
-            """<h2 class="error-header">Error</h2>""",
-            f"""<div class="error-message">An error occurred: {str(e)}</div>"""
-        )
-    finally:
-        recommender.close()
-
-def loading_message() -> Tuple[str, str, str]:
-    """Return loading message in proper HTML format."""
-    loading_html = """
-    <div class="loading-spinner">
-        <div style="text-align: center;">
-            <div style="border: 4px solid #60a5fa; border-top: 4px solid transparent; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto;"></div>
-            <div style="color: #60a5fa; margin-top: 10px;">Analyzing interests and finding recommendations...</div>
-        </div>
-    </div>
-    """
-    return loading_html, loading_html, loading_html
-
-# Update the custom CSS with dark theme compatible colors
-custom_css = """
-.gradio-container {
-    max-width: 1200px !important;
-    margin: auto !important;
-    padding: 20px !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-}
-
-.interests-summary {
-    background: rgba(30, 41, 59, 0.5);
-    padding: 20px;
-    border-radius: 10px;
-    margin-bottom: 20px;
-    border: 1px solid rgba(148, 163, 184, 0.1);
-}
-
-.user-interests, .common-interests {
-    background: rgba(51, 65, 85, 0.5);
-    padding: 15px;
-    border-radius: 8px;
-    margin: 10px 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(148, 163, 184, 0.2);
-}
-
-.interest-section {
-    margin: 10px 0;
-    line-height: 1.5;
-    color: #e2e8f0;
-}
-
-.question-card {
-    background: rgba(51, 65, 85, 0.5);
-    padding: 20px;
-    border-radius: 8px;
-    margin: 15px 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(148, 163, 184, 0.2);
-    transition: transform 0.2s ease;
-}
-
-.question-card:hover {
-    transform: translateY(-2px);
-}
-
-.question-card h3 {
-    color: #60a5fa;
-    margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 1.25rem;
-}
-
-.question-meta {
-    font-size: 0.9em;
-    color: #cbd5e1;
-    margin-bottom: 10px;
-}
-
-.author {
-    color: #93c5fd;
-    font-weight: 500;
-}
-
-.date {
-    color: #94a3b8;
-}
-
-.interests {
-    margin: 10px 0;
-    font-size: 0.9em;
-    color: #cbd5e1;
-}
-
-.interest-tags {
-    color: #93c5fd;
-    font-weight: 500;
-}
-
-.question-body {
-    line-height: 1.6;
-    color: #e2e8f0;
-    margin-top: 15px;
-    white-space: pre-wrap;
-}
-
-.recommendation-header {
-    color: #60a5fa;
-    padding: 10px 0;
-    margin: 20px 0;
-    border-bottom: 2px solid #3b82f6;
-}
-
-.error {
-    color: #fca5a5;
-    padding: 15px;
-    background: rgba(239, 68, 68, 0.2);
-    border-radius: 8px;
-    margin: 10px 0;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.error-header {
-    color: #fca5a5;
-}
-
-.error-message {
-    background: rgba(239, 68, 68, 0.2);
-    padding: 15px;
-    border-radius: 8px;
-    color: #fca5a5;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.no-questions {
-    padding: 20px;
-    background: rgba(51, 65, 85, 0.5);
-    border-radius: 8px;
-    text-align: center;
-    color: #94a3b8;
-    border: 1px solid rgba(148, 163, 184, 0.2);
-}
-
-.loading-spinner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    color: #60a5fa;
-}
-
-h1, h2, h3 {
-    color: #60a5fa !important;
-}
-
-strong {
-    color: #93c5fd;
-}
-
-.user-interests h3, .common-interests h3 {
-    color: #60a5fa;
-    margin-top: 0;
-    margin-bottom: 15px;
-    font-size: 1.2rem;
-}
-"""
-
-# Create Gradio interface
-recommender = QuestionRecommender()
-users = recommender.get_all_users()
-recommender.close()
-
-with gr.Blocks(title="Question Recommender", theme=gr.themes.Soft(), css=custom_css) as iface:
-    gr.Markdown("""
-    # 🤝 Question Recommender
-    Find questions that two users might be interested in discussing together based on their common interests.
-    """)
-    
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
-            user1_dropdown = gr.Dropdown(
-                choices=users, 
-                label="👤 First User",
-                interactive=True
-            )
-        with gr.Column(scale=1):
-            user2_dropdown = gr.Dropdown(
-                choices=users,
-                label="👤 Second User",
-                interactive=True
-            )
-    
-    recommend_btn = gr.Button(
-        "🔍 Get Recommendations",
-        variant="primary",
-        size="lg"
-    )
-    
-    with gr.Row():
-        interests_output = gr.HTML(label="Common Interests")
-    
-    recommendation_type = gr.HTML()
-    questions_output = gr.HTML()
-    
-    # Add loading state
-    recommend_btn.click(
-        fn=loading_message,  # First show loading message
-        outputs=[interests_output, recommendation_type, questions_output],
-        queue=False  # Don't queue this call
-    ).then(  # Then get the actual recommendations
-        fn=recommend_questions,
-        inputs=[user1_dropdown, user2_dropdown],
-        outputs=[interests_output, recommendation_type, questions_output]
-    )
-
-if __name__ == "__main__":
+import gradio as gr
+from neo4j import GraphDatabase
+import logging
+from typing import List, Dict, Tuple
+import pandas as pd
+from datetime import datetime
+import os
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Get Neo4j credentials from environment variables
+NEO4J_URL = os.environ['NEO4J_URL']
+NEO4J_USER = os.environ['NEO4J_USER']
+NEO4J_PASSWORD = os.environ['NEO4J_PASSWORD']
+
+def format_neo4j_datetime(dt) -> str:
+    """Convert Neo4j datetime to string format."""
+    if dt is None:
+        return 'Unknown date'
+    try:
+        # Convert Neo4j datetime to Python datetime
+        if hasattr(dt, 'to_native'):
+            dt = dt.to_native()
+        return dt.strftime('%Y-%m-%d')
+    except Exception as e:
+        logger.warning(f"Error formatting datetime: {e}")
+        return 'Unknown date'
+
+def format_interest_list(interests: set, max_items: int = 10) -> str:
+    """Format a list of interests with a limit and show count if truncated."""
+    if not interests:
+        return 'None'
+    sorted_interests = sorted(interests)
+    if len(sorted_interests) <= max_items:
+        return ', '.join(sorted_interests)
+    return f"{', '.join(sorted_interests[:max_items])} (+{len(sorted_interests) - max_items} more)"
+
+class QuestionRecommender:
+    def __init__(self):
+        self.driver = GraphDatabase.driver(
+            NEO4J_URL,
+            auth=(NEO4J_USER, NEO4J_PASSWORD)
+        )
+
+    def close(self):
+        self.driver.close()
+
+    def get_all_users(self) -> List[str]:
+        """Get list of all users."""
+        with self.driver.session() as session:
+            result = session.run("""
+                MATCH (u:User)
+                RETURN DISTINCT u.name as username
+                ORDER BY username
+            """)
+            return [record["username"] for record in result if record["username"]]
+
+    def get_user_interests(self, username: str) -> Dict[str, set]:
+        """Get keywords and topics a user is interested in."""
+        with self.driver.session() as session:
+            # Get keywords the user is interested in
+            keyword_result = session.run("""
+                MATCH (u:User {name: $username})-[:INTERESTED_IN_KEYWORD]->(k:Keyword)
+                RETURN DISTINCT k.keyword as keyword
+            """, username=username)
+            keywords = {str(record["keyword"]) for record in keyword_result if record["keyword"]}
+
+            # Get topics the user is interested in
+            topic_result = session.run("""
+                MATCH (u:User {name: $username})-[:INTERESTED_IN_TOPIC]->(t:Topic)
+                RETURN DISTINCT t.topic as topic
+            """, username=username)
+            topics = {str(record["topic"]) for record in topic_result if record["topic"]}
+
+            return {"keywords": keywords or set(), "topics": topics or set()}
+
+    def find_common_questions(self, user1: str, user2: str, max_questions: int = 5) -> List[Dict]:
+        """Find questions to recommend based on common interests."""
+        with self.driver.session() as session:
+            # First try to find questions with common keywords
+            keyword_questions = session.run("""
+                // Find keywords that both users are interested in
+                MATCH (u1:User {name: $user1})-[:INTERESTED_IN_KEYWORD]->(k:Keyword)<-[:INTERESTED_IN_KEYWORD]-(u2:User {name: $user2})
+                WITH DISTINCT k
+                
+                // Find questions with these common keywords
+                MATCH (q:Question)-[:HAS_KEYWORD]->(k)
+                WHERE q.author <> $user1 AND q.author <> $user2
+                
+                // Count how many common keywords each question matches
+                WITH q, k, COLLECT(k.keyword) as matching_keywords
+                WITH q, matching_keywords, SIZE(matching_keywords) as relevance_score
+                
+                // Return questions with their details
+                RETURN DISTINCT 
+                    q.title as title,
+                    q.body as body,
+                    q.created_utc_ts as created_date,
+                    q.author as author,
+                    matching_keywords as keywords,
+                    relevance_score
+                ORDER BY relevance_score DESC, q.created_utc_ts DESC
+                LIMIT $limit
+            """, user1=user1, user2=user2, limit=max_questions)
+            
+            questions = [dict(record) for record in keyword_questions]
+            
+            # If no questions found with common keywords, try topics
+            if not questions:
+                topic_questions = session.run("""
+                    // Find topics that both users are interested in
+                    MATCH (u1:User {name: $user1})-[:INTERESTED_IN_TOPIC]->(t:Topic)<-[:INTERESTED_IN_TOPIC]-(u2:User {name: $user2})
+                    WITH DISTINCT t
+                    
+                    // Find questions with these common topics
+                    MATCH (q:Question)-[:HAS_TOPIC]->(t)
+                    WHERE q.author <> $user1 AND q.author <> $user2
+                    
+                    // Count how many common topics each question matches
+                    WITH q, t, COLLECT(t.topic) as matching_topics
+                    WITH q, matching_topics, SIZE(matching_topics) as relevance_score
+                    
+                    // Return questions with their details
+                    RETURN DISTINCT 
+                        q.title as title,
+                        q.body as body,
+                        q.created_utc_ts as created_date,
+                        q.author as author,
+                        matching_topics as topics,
+                        relevance_score
+                    ORDER BY relevance_score DESC, q.created_utc_ts DESC
+                    LIMIT $limit
+                """, user1=user1, user2=user2, limit=max_questions)
+                
+                questions = [dict(record) for record in topic_questions]
+
+            return questions
+
+def format_question(q: Dict) -> str:
+    """Format a question for display."""
+    created_date = format_neo4j_datetime(q.get('created_date'))
+    keywords_or_topics = q.get('keywords', q.get('topics', []))
+    interests = format_interest_list(set(k for k in keywords_or_topics if k is not None), max_items=5)
+    author = q.get('author', 'Unknown author')
+    title = q.get('title', 'Untitled')
+    body = q.get('body', '')
+    
+    # Only show body section if there's actual content
+    body_html = f"""
+    <div class="question-body">
+        {body[:300] + "... [truncated]" if body and len(body) > 300 else body}
+    </div>
+    """ if body else ""
+    
+    return f"""
+<div class="question-card">
+    <h3>{title}</h3>
+    <div class="question-meta">
+        Posted by <span class="author">{author}</span> on <span class="date">{created_date}</span>
+    </div>
+    <div class="interests">
+        Common Interests: <span class="interest-tags">{interests}</span>
+    </div>{body_html}
+</div>
+"""
+
+def recommend_questions(user1: str, user2: str) -> Tuple[str, str, str]:
+    """Main function to get recommendations and user interests."""
+    recommender = QuestionRecommender()
+    try:
+        # Get interests for both users
+        user1_interests = recommender.get_user_interests(user1)
+        user2_interests = recommender.get_user_interests(user2)
+        
+        # Find common interests
+        common_keywords = user1_interests['keywords'] & user2_interests['keywords']
+        common_topics = user1_interests['topics'] & user2_interests['topics']
+        
+        # Format interests summary
+        interests_summary = f"""
+<div class="interests-summary">
+    <div class="user-interests">
+        <h3>{user1}'s Interests</h3>
+        <div class="interest-section">
+            <strong>Keywords:</strong> {format_interest_list(user1_interests['keywords'], max_items=8)}
+        </div>
+        <div class="interest-section">
+            <strong>Topics:</strong> {format_interest_list(user1_interests['topics'], max_items=5)}
+        </div>
+    </div>
+    
+    <div class="user-interests">
+        <h3>{user2}'s Interests</h3>
+        <div class="interest-section">
+            <strong>Keywords:</strong> {format_interest_list(user2_interests['keywords'], max_items=8)}
+        </div>
+        <div class="interest-section">
+            <strong>Topics:</strong> {format_interest_list(user2_interests['topics'], max_items=5)}
+        </div>
+    </div>
+    
+    <div class="common-interests">
+        <h3>Common Interests</h3>
+        <div class="interest-section">
+            <strong>Keywords:</strong> {format_interest_list(common_keywords, max_items=8)}
+        </div>
+        <div class="interest-section">
+            <strong>Topics:</strong> {format_interest_list(common_topics, max_items=5)}
+        </div>
+    </div>
+</div>
+"""
+        
+        # Get recommended questions
+        questions = recommender.find_common_questions(user1, user2)
+        
+        if questions:
+            questions_text = """<div class="questions-container">\n""" + \
+                           """\n""".join(format_question(q) for q in questions) + \
+                           """\n</div>"""
+            recommendation_type = """<h2 class="recommendation-header">""" + \
+                                ("Recommendations Based on Common Keywords" if 'keywords' in questions[0] 
+                                 else "Recommendations Based on Common Topics") + \
+                                """</h2>"""
+        else:
+            questions_text = """<div class="no-questions">No questions found based on common interests.</div>"""
+            recommendation_type = """<h2 class="recommendation-header">No Recommendations Available</h2>"""
+        
+        return interests_summary, recommendation_type, questions_text
+    
+    except Exception as e:
+        logger.error(f"Error in recommend_questions: {str(e)}")
+        return (
+            """<div class="error">Error fetching user interests. Please try again.</div>""",
+            """<h2 class="error-header">Error</h2>""",
+            f"""<div class="error-message">An error occurred: {str(e)}</div>"""
+        )
+    finally:
+        recommender.close()
+
+def loading_message() -> Tuple[str, str, str]:
+    """Return loading message in proper HTML format."""
+    loading_html = """
+    <div class="loading-spinner">
+        <div style="text-align: center;">
+            <div style="border: 4px solid #60a5fa; border-top: 4px solid transparent; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto;"></div>
+            <div style="color: #60a5fa; margin-top: 10px;">Analyzing interests and finding recommendations...</div>
+        </div>
+    </div>
+    """
+    return loading_html, loading_html, loading_html
+
+# Update the custom CSS with dark theme compatible colors
+custom_css = """
+.gradio-container {
+    max-width: 1200px !important;
+    margin: auto !important;
+    padding: 20px !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
+.interests-summary {
+    background: rgba(30, 41, 59, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    border: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.user-interests, .common-interests {
+    background: rgba(51, 65, 85, 0.5);
+    padding: 15px;
+    border-radius: 8px;
+    margin: 10px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.interest-section {
+    margin: 10px 0;
+    line-height: 1.5;
+    color: #e2e8f0;
+}
+
+.question-card {
+    background: rgba(51, 65, 85, 0.5);
+    padding: 20px;
+    border-radius: 8px;
+    margin: 15px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    transition: transform 0.2s ease;
+}
+
+.question-card:hover {
+    transform: translateY(-2px);
+}
+
+.question-card h3 {
+    color: #60a5fa;
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 1.25rem;
+}
+
+.question-meta {
+    font-size: 0.9em;
+    color: #cbd5e1;
+    margin-bottom: 10px;
+}
+
+.author {
+    color: #93c5fd;
+    font-weight: 500;
+}
+
+.date {
+    color: #94a3b8;
+}
+
+.interests {
+    margin: 10px 0;
+    font-size: 0.9em;
+    color: #cbd5e1;
+}
+
+.interest-tags {
+    color: #93c5fd;
+    font-weight: 500;
+}
+
+.question-body {
+    line-height: 1.6;
+    color: #e2e8f0;
+    margin-top: 15px;
+    white-space: pre-wrap;
+}
+
+.recommendation-header {
+    color: #60a5fa;
+    padding: 10px 0;
+    margin: 20px 0;
+    border-bottom: 2px solid #3b82f6;
+}
+
+.error {
+    color: #fca5a5;
+    padding: 15px;
+    background: rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+    margin: 10px 0;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.error-header {
+    color: #fca5a5;
+}
+
+.error-message {
+    background: rgba(239, 68, 68, 0.2);
+    padding: 15px;
+    border-radius: 8px;
+    color: #fca5a5;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.no-questions {
+    padding: 20px;
+    background: rgba(51, 65, 85, 0.5);
+    border-radius: 8px;
+    text-align: center;
+    color: #94a3b8;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    color: #60a5fa;
+}
+
+h1, h2, h3 {
+    color: #60a5fa !important;
+}
+
+strong {
+    color: #93c5fd;
+}
+
+.user-interests h3, .common-interests h3 {
+    color: #60a5fa;
+    margin-top: 0;
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+}
+"""
+
+# Create Gradio interface
+recommender = QuestionRecommender()
+users = recommender.get_all_users()
+recommender.close()
+
+with gr.Blocks(title="Question Recommender", theme=gr.themes.Soft(), css=custom_css) as iface:
+    gr.Markdown("""
+    # 🤝 Question Recommender
+    Find questions that two users might be interested in discussing together based on their common interests.
+    """)
+    
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1):
+            user1_dropdown = gr.Dropdown(
+                choices=users, 
+                label="👤 First User",
+                interactive=True
+            )
+        with gr.Column(scale=1):
+            user2_dropdown = gr.Dropdown(
+                choices=users,
+                label="👤 Second User",
+                interactive=True
+            )
+    
+    recommend_btn = gr.Button(
+        "🔍 Get Recommendations",
+        variant="primary",
+        size="lg"
+    )
+    
+    with gr.Row():
+        interests_output = gr.HTML(label="Common Interests")
+    
+    recommendation_type = gr.HTML()
+    questions_output = gr.HTML()
+    
+    # Add loading state
+    recommend_btn.click(
+        fn=loading_message,  # First show loading message
+        outputs=[interests_output, recommendation_type, questions_output],
+        queue=False  # Don't queue this call
+    ).then(  # Then get the actual recommendations
+        fn=recommend_questions,
+        inputs=[user1_dropdown, user2_dropdown],
+        outputs=[interests_output, recommendation_type, questions_output]
+    )
+
+if __name__ == "__main__":
     iface.launch(share=True)