app.py

import gradio as gr
import pandas as pd
import numpy as np
import ast
from sentence_transformers import SentenceTransformer
from sklearn.metrics.pairwise import cosine_similarity

# --- 1. Load Data ---
print("⏳ Loading Data...")
try:
    df = pd.read_pickle("apps_clustered.pkl")
    print("✅ Data Loaded")
except Exception as e:
    print(f"❌ Error loading data: {e}")
    df = pd.DataFrame() 

# --- Column Setup ---
def get_col_name(candidates, df_cols):
    return next((col for col in candidates if col in df_cols), None)

image_col = get_col_name(['artworkUrl512', 'artworkUrl100', 'artworkUrl60', 'image_url', 'icon'], df.columns)
desc_col  = get_col_name(['description', 'longDescription', 'shortDescription', 'summary'], df.columns)
lang_col  = get_col_name(['languageCodesISO2A', 'primaryLanguage', 'languages', 'language'], df.columns)
rating_col = 'averageUserRating'

print("⏳ Loading AI Model...")
model = SentenceTransformer('all-MiniLM-L6-v2')
print("✅ Ready!")

# --- 2. The Logic ---
def search_apps(user_query):
    if not user_query:
        return ""
        
    try:
        # Search
        user_vector = model.encode(user_query).reshape(1, -1)
        app_embeddings = np.vstack(df["text_embedding"].values)
        scores = cosine_similarity(user_vector, app_embeddings).flatten()
        
        df_results = df.copy()
        df_results["similarity_score"] = scores
        top_results = df_results.sort_values(by="similarity_score", ascending=False).head(3)
        
        # --- HTML GENERATION ---
        html_content = """
        <div style="margin-bottom: 20px; text-align: center;">
            <h3 style="color: #374151; margin: 0;">Here is what our recommendation system found for you:</h3>
        </div>
        """
        html_content += '<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">'
        
        for _, row in top_results.iterrows():
            # Image Logic
            img_url = row.get(image_col, "")
            if pd.isna(img_url) or not isinstance(img_url, str):
                img_tag = '<div style="width: 100%; height: 180px; background: #eee; border-radius: 15px; display: flex; align-items: center; justify-content: center;">No Image</div>'
            else:
                img_tag = f'<img src="{img_url}" style="width: 100%; height: auto; border-radius: 15px; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">'

            # Rating Logic
            score = row.get(rating_col, 0)
            rating_text = "No ratings yet" if (pd.isna(score) or score == 0) else f"{float(score):.1f} ⭐"

            # Language Logic
            lang_val = row.get(lang_col, "N/A")
            if pd.isna(lang_val): lang_val = "N/A"
            if isinstance(lang_val, str) and lang_val.startswith('[') and lang_val.endswith(']'):
                try: lang_val = ast.literal_eval(lang_val)
                except: pass
            
            if isinstance(lang_val, list):
                lang_text = f"{lang_val[0]} and more" if len(lang_val) > 1 else (str(lang_val[0]) if len(lang_val) == 1 else "N/A")
            else:
                lang_text = str(lang_val)

            # Description Logic
            desc = str(row.get(desc_col, "No description"))
            if len(desc) > 120: desc = desc[:120] + "..."

            # Link Logic
            url = row.get('trackViewUrl', '#')
            if pd.isna(url) and 'trackId' in row: url = f"https://apps.apple.com/app/id{row['trackId']}"
            
            # Card HTML
            card_html = f"""
            <div style="width: 280px; padding: 20px; background-color: white; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: flex-start; font-family: sans-serif;">
                {img_tag}
                <h3 style="margin: 0 0 5px 0; color: #1f2937; font-size: 18px;">{row['trackName']}</h3>
                <p style="margin: 0 0 10px 0; color: #6b7280; font-size: 14px; font-weight: 500;">{row['primaryGenreName']}</p>
                <div style="display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #4b5563;">
                    <span style="background: #f3f4f6; padding: 4px 8px; border-radius: 6px;">{rating_text}</span>
                    <span style="background: #f3f4f6; padding: 4px 8px; border-radius: 6px;">🗣️ {lang_text}</span>
                </div>
                <p style="font-size: 13px; color: #6b7280; margin-bottom: 15px; line-height: 1.4;">{desc}</p>
                <a href="{url}" target="_blank" style="margin-top: auto; width: 100%; text-align: center; background-color: #2563eb; color: white; padding: 10px 0; border-radius: 10px; text-decoration: none; font-weight: bold; transition: background 0.2s;">Get App ↗️</a>
            </div>
            """
            html_content += card_html

        html_content += '</div>'
        return html_content
        
    except Exception as e:
        return f"<div style='color:red;'>Error: {str(e)}</div>"

# --- 3. The UI (Rearranged Layout) ---
with gr.Blocks() as demo:
    
    # Title stays at the absolute top (Header)
    gr.Markdown("# 📱 AI App Recommender")
    
    # TABS are now at the top of the content
    with gr.Tabs():
        
        # --- TAB 1: SEARCH ---
        with gr.Tab("🔍 Find Apps"):
            # Description is now INSIDE the tab, above the search bar
            gr.Markdown("Describe what you need, and the AI will find the best apps for you.")
            
            with gr.Column():
                with gr.Row():
                    txt_input = gr.Textbox(show_label=False, placeholder="Type here... (e.g., 'I need a puzzle game for kids')", scale=4)
                    btn_submit = gr.Button("🚀 Find Apps", variant="primary", scale=1)
                
                gr.Examples(examples=[["I want a timer for my kitchen"], ["A game to learn math"]], inputs=txt_input)
                output_html = gr.HTML(label="Recommended Apps")

        # --- TAB 2: VIDEO (Smaller & Centered) ---
        with gr.Tab("🎥 Video Presentation"):
            gr.Markdown("### Watch our project presentation below:")
            
            # Smaller video (600px) and centered
            gr.HTML("""
                <div style="display: flex; justify-content: center; align-items: center;">
                    <video width="600" controls style="border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
                        <source src="https://huggingface.co/spaces/Liori25/ReccomendationSystemForApps/resolve/main/PresentationVideo.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            """)

    # --- FOOTER ---
    gr.Markdown("""<div style="text-align: center; margin-top: 40px; color: #9ca3af; font-size: 14px;">app developed by Karin M & Lior F</div>""")

    # Logic connection
    btn_submit.click(fn=search_apps, inputs=txt_input, outputs=output_html)
    txt_input.submit(fn=search_apps, inputs=txt_input, outputs=output_html)

# --- Launch ---
demo.launch(theme=gr.themes.Soft())