Add SaaS Feature Comparator app

README.md

@@ -1,12 +1,66 @@
 ---
-title: Saas Feature Comparator
-emoji: 🌍
-colorFrom: pink
+title: SaaS Feature Comparator
+emoji: 🔍
+colorFrom: blue
 colorTo: purple
 sdk: gradio
-sdk_version: 6.13.0
+sdk_version: "4.44.0"
 app_file: app.py
 pinned: false
+license: cc-by-4.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🔍 SaaS Feature Comparator
+
+**Compare any 2–4 SaaS products side-by-side — powered by [ComparEdge.com](https://comparedge.com)**
+
+Instantly see which tools support which features, how pricing stacks up, and what makes each product unique.
+
+---
+
+## ✨ Features
+
+- 📋 **Feature-by-feature comparison** with ✅/❌ — across 300+ SaaS products
+- 🔍 **Smart filtering** — hide identical rows, surface only what differs
+- 🗂 **Category filter** — narrow products by category (CRM, AI Tools, Project Management, etc.)
+- 📊 **Summary stats** — "Product A has X unique features vs Product B"
+- 📋 **Export to Markdown** — copy the comparison for docs, blog posts, or reports
+- ⚡ **Fast** — feature index is pre-built at startup for instant comparisons
+
+---
+
+## 🚀 How to Use
+
+1. **(Optional)** Filter by **Category** to narrow the dropdown list
+2. Pick **2–4 SaaS products** from the dropdowns
+3. Click **⚡ Compare**
+4. Browse the feature table — by default only **differing features** are shown
+5. Toggle **"Show all features"** to see the complete list
+6. Check **📊 Feature Summary** for unique-feature stats
+7. Expand **📋 Export** to copy a Markdown version
+
+---
+
+## 📦 Data
+
+- **331 SaaS products** across 28 categories
+- Data curated and maintained by [ComparEdge.com](https://comparedge.com)
+- Features normalized to a common taxonomy for fair comparison
+- Pricing, ratings, pros & cons included
+
+---
+
+## 🗂 Covered Categories
+
+`project-management` · `crm` · `ai-writing` · `ai-assistants` · `ai-coding` · `ai-image` · `ai-video` · `ai-voice` · `ai-productivity` · `ai-agents` · `llm` · `design-tools` · `email-marketing` · `video-conferencing` · `accounting` · `website-builders` · `cloud-hosting` · `vpn` · `password-managers` · `crypto-exchanges` · `crypto-wallets` · `crypto-trading-bots` · `crypto-analytics` · `crypto-tax` · `crypto-portfolio-trackers` · `crypto-telegram-bots` · `defi-tools` · `dex`
+
+---
+
+## 🔗 Links
+
+- 🌐 **Full comparison site:** [comparedge.com](https://comparedge.com)
+- 📊 **Detailed reviews & pricing:** [comparedge.com](https://comparedge.com)
+
+---
+
+*Powered by [ComparEdge](https://comparedge.com) — the SaaS Comparison Platform*

app.py

@@ -0,0 +1,412 @@
+"""
+SaaS Feature Comparator — Powered by ComparEdge.com
+A Gradio app to compare SaaS products side-by-side.
+"""
+
+import json
+import re
+from pathlib import Path
+from typing import Optional
+
+import gradio as gr
+import pandas as pd
+
+# ─── Data Loading ──────────────────────────────────────────────────────────────
+
+DATA_PATH = Path(__file__).parent / "products.json"
+
+with open(DATA_PATH, "r", encoding="utf-8") as f:
+    _raw = json.load(f)
+
+PRODUCTS: list[dict] = _raw["products"]
+
+# Build lookup maps at startup
+PRODUCT_BY_SLUG: dict[str, dict] = {p["slug"]: p for p in PRODUCTS}
+PRODUCT_BY_NAME: dict[str, dict] = {p["name"]: p for p in PRODUCTS}
+
+# Collect all categories (pretty-printed)
+CATEGORY_LABELS: dict[str, str] = {}
+for p in PRODUCTS:
+    cat = p.get("category", "other")
+    CATEGORY_LABELS[cat] = cat.replace("-", " ").title()
+
+ALL_CATEGORIES = ["All Categories"] + sorted(CATEGORY_LABELS.values())
+
+# Pre-compute feature set per product
+FEATURE_INDEX: dict[str, dict[str, bool]] = {}
+for p in PRODUCTS:
+    FEATURE_INDEX[p["name"]] = p.get("normalizedFeatures") or {}
+
+# All unique feature names across the whole dataset
+ALL_FEATURES_GLOBAL: list[str] = sorted(
+    {feat for feats in FEATURE_INDEX.values() for feat in feats}
+)
+
+
+def get_price_range(product: dict) -> str:
+    """Return a compact price-range string like 'Free – $18/mo'."""
+    pricing = product.get("pricing") or {}
+    plans = pricing.get("plans") or []
+    prices = [pl["price"] for pl in plans if isinstance(pl.get("price"), (int, float))]
+    if not prices:
+        return "N/A"
+    lo, hi = min(prices), max(prices)
+    has_free = pricing.get("free", False) or lo == 0
+    if lo == hi:
+        label = "Free" if lo == 0 else f"${lo}/mo"
+    else:
+        label = f"{'Free' if has_free else f'${lo}'} – ${hi}/mo"
+    return label
+
+
+def get_rating(product: dict) -> str:
+    rating = product.get("rating") or {}
+    scores = [v for v in rating.values() if isinstance(v, (int, float))]
+    if not scores:
+        return "N/A"
+    avg = round(sum(scores) / len(scores), 1)
+    return f"⭐ {avg}"
+
+
+def filter_products_by_category(category_label: str) -> list[str]:
+    """Return product names matching the chosen category label."""
+    if category_label == "All Categories" or not category_label:
+        return sorted(PRODUCT_BY_NAME.keys())
+    # reverse-map label → category slug
+    target_slug = None
+    for slug, label in CATEGORY_LABELS.items():
+        if label == category_label:
+            target_slug = slug
+            break
+    if not target_slug:
+        return sorted(PRODUCT_BY_NAME.keys())
+    return sorted(
+        p["name"] for p in PRODUCTS if p.get("category") == target_slug
+    )
+
+
+# ─── Comparison Logic ──────────────────────────────────────────────────────────
+
+def build_comparison(
+    selected_names: list[str],
+    show_all: bool,
+) -> tuple[str, str, str]:
+    """
+    Returns (html_table, summary_md, export_md).
+    """
+    selected_names = [n for n in selected_names if n]
+    if len(selected_names) < 2:
+        msg = "<p style='color:#888;text-align:center;padding:2rem'>Select at least 2 products to compare.</p>"
+        return msg, "", ""
+
+    products = [PRODUCT_BY_NAME[n] for n in selected_names if n in PRODUCT_BY_NAME]
+    if len(products) < 2:
+        return "<p style='color:#888'>Products not found.</p>", "", ""
+
+    # Gather features present in at least one selected product
+    feature_sets: list[set[str]] = [set(FEATURE_INDEX[p["name"]].keys()) for p in products]
+    union_features: list[str] = sorted(set().union(*feature_sets))
+
+    # Determine which features differ across selected products
+    def has_value(p: dict, feat: str) -> bool:
+        return bool(FEATURE_INDEX[p["name"]].get(feat, False))
+
+    def is_uniform(feat: str) -> bool:
+        vals = [has_value(p, feat) for p in products]
+        return len(set(vals)) == 1
+
+    if show_all:
+        display_features = union_features
+    else:
+        display_features = [f for f in union_features if not is_uniform(f)]
+
+    # ── HTML Table ───────────────────────────────────────────────────────────
+
+    # Header row — product cards
+    header_cells = "<th style='min-width:160px;background:#1e293b;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;text-align:left'>Feature</th>"
+    for p in products:
+        price = get_price_range(p)
+        rating = get_rating(p)
+        cat = CATEGORY_LABELS.get(p.get("category", ""), p.get("category", ""))
+        header_cells += f"""
+        <th style='min-width:180px;background:#1e293b;padding:12px 14px;text-align:center;border-left:1px solid #334155'>
+          <div style='font-size:16px;font-weight:700;color:#f1f5f9'>{p['name']}</div>
+          <div style='font-size:11px;color:#64748b;margin-top:2px'>{cat}</div>
+          <div style='font-size:13px;color:#38bdf8;margin-top:4px'>{price}</div>
+          <div style='font-size:12px;color:#fbbf24;margin-top:2px'>{rating}</div>
+        </th>"""
+
+    rows_html = ""
+    for i, feat in enumerate(display_features):
+        bg = "#0f172a" if i % 2 == 0 else "#111827"
+        row = f"<tr style='background:{bg}'>"
+        row += f"<td style='padding:8px 14px;color:#cbd5e1;font-size:13px;border-bottom:1px solid #1e293b'>{feat}</td>"
+        for p in products:
+            val = has_value(p, feat)
+            icon = "✅" if val else "❌"
+            cell_bg = "rgba(34,197,94,.08)" if val else "rgba(239,68,68,.06)"
+            row += f"<td style='text-align:center;padding:8px 14px;border-left:1px solid #1e293b;border-bottom:1px solid #1e293b;background:{cell_bg};font-size:16px'>{icon}</td>"
+        row += "</tr>"
+        rows_html += row
+
+    if not display_features:
+        rows_html = f"<tr><td colspan='{len(products)+1}' style='text-align:center;padding:2rem;color:#64748b'>All selected products share identical features. Enable \"Show all features\" to see the full list.</td></tr>"
+
+    table_html = f"""
+<div style='overflow-x:auto;border-radius:12px;border:1px solid #1e293b;font-family:Inter,system-ui,sans-serif'>
+  <table style='width:100%;border-collapse:collapse'>
+    <thead><tr>{header_cells}</tr></thead>
+    <tbody>{rows_html}</tbody>
+  </table>
+</div>
+<div style='text-align:right;margin-top:6px;font-size:11px;color:#475569'>
+  Data by <a href='https://comparedge.com' target='_blank' style='color:#38bdf8;text-decoration:none'>ComparEdge.com</a>
+</div>
+"""
+
+    # ── Summary ──────────────────────────────────────────────────────────────
+    summary_lines = ["### 📊 Feature Summary\n"]
+    for p in products:
+        feats = FEATURE_INDEX[p["name"]]
+        total = len(feats)
+        supported = sum(1 for v in feats.values() if v)
+        summary_lines.append(f"- **{p['name']}**: {supported}/{total} features supported")
+
+    # Unique features per product
+    if len(products) == 2:
+        a, b = products
+        a_feats = {f for f, v in FEATURE_INDEX[a["name"]].items() if v}
+        b_feats = {f for f, v in FEATURE_INDEX[b["name"]].items() if v}
+        unique_a = a_feats - b_feats
+        unique_b = b_feats - a_feats
+        summary_lines.append(f"\n**{a['name']}** has **{len(unique_a)} unique features** not in {b['name']}")
+        summary_lines.append(f"**{b['name']}** has **{len(unique_b)} unique features** not in {a['name']}")
+
+    summary_md = "\n".join(summary_lines)
+
+    # ── Export Markdown ───────────────────────────────────────────────────────
+    export_lines = [f"# SaaS Comparison: {' vs '.join(p['name'] for p in products)}\n"]
+    export_lines.append("Generated by [ComparEdge.com](https://comparedge.com)\n")
+    export_lines.append("## Product Overview\n")
+    for p in products:
+        export_lines.append(f"### {p['name']}")
+        export_lines.append(f"- Category: {CATEGORY_LABELS.get(p.get('category',''), '')}")
+        export_lines.append(f"- Price: {get_price_range(p)}")
+        export_lines.append(f"- Rating: {get_rating(p)}")
+        pros = p.get("pros") or []
+        cons = p.get("cons") or []
+        if pros:
+            export_lines.append(f"- Pros: {', '.join(pros[:3])}")
+        if cons:
+            export_lines.append(f"- Cons: {', '.join(cons[:3])}")
+        export_lines.append("")
+
+    export_lines.append("## Feature Comparison\n")
+    # Build markdown table
+    header_row = "| Feature | " + " | ".join(p["name"] for p in products) + " |"
+    sep_row = "|---|" + "---|" * len(products)
+    export_lines.append(header_row)
+    export_lines.append(sep_row)
+    for feat in union_features:
+        cells = " | ".join("✅" if has_value(p, feat) else "❌" for p in products)
+        export_lines.append(f"| {feat} | {cells} |")
+
+    export_md = "\n".join(export_lines)
+
+    return table_html, summary_md, export_md
+
+
+# ─── Gradio UI ─────────────────────────────────────────────────────────────────
+
+CSS = """
+body, .gradio-container {
+    background: #0a0f1e !important;
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+}
+.main-header {
+    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
+    border-radius: 16px;
+    padding: 24px 32px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.main-header h1 {
+    color: #f8fafc;
+    font-size: 2rem;
+    font-weight: 800;
+    margin: 0 0 6px 0;
+    letter-spacing: -0.02em;
+}
+.main-header p {
+    color: #bfdbfe;
+    margin: 0;
+    font-size: 1rem;
+}
+.controls-panel {
+    background: #0f172a;
+    border: 1px solid #1e293b;
+    border-radius: 12px;
+    padding: 20px;
+}
+.section-label {
+    color: #94a3b8;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .08em;
+    margin-bottom: 8px;
+}
+footer { display: none !important; }
+.gr-button-primary {
+    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+}
+.gr-button-secondary {
+    background: #1e293b !important;
+    border: 1px solid #334155 !important;
+    color: #94a3b8 !important;
+}
+"""
+
+
+def update_product_list(category_label: str):
+    names = filter_products_by_category(category_label)
+    return gr.update(choices=names)
+
+
+def do_compare(p1, p2, p3, p4, show_all):
+    selected = [p for p in [p1, p2, p3, p4] if p]
+    table, summary, export = build_comparison(selected, show_all)
+    return table, summary, export
+
+
+def clear_all():
+    return None, None, None, None, False, "", "", ""
+
+
+with gr.Blocks(css=CSS, title="SaaS Feature Comparator — ComparEdge") as demo:
+
+    # ── Header ────────────────────────────────────────────────────────────────
+    gr.HTML("""
+    <div class='main-header'>
+      <h1>🔍 SaaS Feature Comparator</h1>
+      <p>Compare any 2–4 SaaS products side-by-side. Instantly see what's different.</p>
+      <p style='margin-top:8px;font-size:13px;opacity:.7'>
+        Data curated by <a href='https://comparedge.com' target='_blank'
+          style='color:#93c5fd;text-decoration:none;font-weight:600'>ComparEdge.com</a>
+        — the SaaS Comparison Platform
+      </p>
+    </div>
+    """)
+
+    # ── Controls ──────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes="controls-panel"):
+        gr.Markdown("### ⚙️ Select Products to Compare")
+
+        with gr.Row():
+            category_filter = gr.Dropdown(
+                choices=ALL_CATEGORIES,
+                value="All Categories",
+                label="🗂 Filter by Category",
+                interactive=True,
+                scale=1,
+            )
+
+        all_names = sorted(PRODUCT_BY_NAME.keys())
+
+        with gr.Row():
+            p1 = gr.Dropdown(choices=all_names, value="Notion",
+                             label="Product 1", interactive=True, scale=1)
+            p2 = gr.Dropdown(choices=all_names, value="ClickUp",
+                             label="Product 2", interactive=True, scale=1)
+
+        with gr.Row():
+            p3 = gr.Dropdown(choices=all_names, value=None,
+                             label="Product 3 (optional)", interactive=True, scale=1)
+            p4 = gr.Dropdown(choices=all_names, value=None,
+                             label="Product 4 (optional)", interactive=True, scale=1)
+
+        with gr.Row():
+            show_all_toggle = gr.Checkbox(
+                value=False,
+                label="Show all features (including identical ones)",
+                scale=2,
+            )
+            compare_btn = gr.Button("⚡ Compare", variant="primary", scale=1)
+            clear_btn = gr.Button("🗑 Clear", variant="secondary", scale=1)
+
+    # ── Comparison Output ─────────────────────────────────────────────────────
+    gr.Markdown("---")
+    comparison_html = gr.HTML(
+        value="<p style='text-align:center;color:#475569;padding:3rem;font-family:Inter,sans-serif'>Select products above and click <strong>Compare</strong> to see the comparison.</p>"
+    )
+
+    # ── Summary ───────────────────────────────────────────────────────────────
+    with gr.Accordion("📊 Feature Summary", open=True):
+        summary_md = gr.Markdown("")
+
+    # ── Export ────────────────────────────────────────────────────────────────
+    with gr.Accordion("📋 Export as Markdown", open=False):
+        export_box = gr.Textbox(
+            label="Copy the markdown below",
+            lines=20,
+            interactive=False,
+            show_copy_button=True,
+        )
+
+    # ── Footer ────────────────────────────────────────────────────────────────
+    gr.HTML("""
+    <div style='text-align:center;padding:24px 0 8px;color:#475569;font-size:13px;
+                font-family:Inter,sans-serif;border-top:1px solid #1e293b;margin-top:20px'>
+      Powered by
+      <a href='https://comparedge.com' target='_blank'
+         style='color:#38bdf8;text-decoration:none;font-weight:600'>ComparEdge</a>
+      — SaaS Comparison Platform &nbsp;·&nbsp;
+      <a href='https://comparedge.com' target='_blank'
+         style='color:#64748b;text-decoration:none'>Explore 300+ SaaS tools →</a>
+    </div>
+    """)
+
+    # ── Events ────────────────────────────────────────────────────────────────
+    category_filter.change(
+        fn=update_product_list,
+        inputs=category_filter,
+        outputs=[p1],
+    )
+    category_filter.change(
+        fn=update_product_list,
+        inputs=category_filter,
+        outputs=[p2],
+    )
+
+    compare_btn.click(
+        fn=do_compare,
+        inputs=[p1, p2, p3, p4, show_all_toggle],
+        outputs=[comparison_html, summary_md, export_box],
+    )
+
+    # Also trigger on toggle change
+    show_all_toggle.change(
+        fn=do_compare,
+        inputs=[p1, p2, p3, p4, show_all_toggle],
+        outputs=[comparison_html, summary_md, export_box],
+    )
+
+    clear_btn.click(
+        fn=clear_all,
+        inputs=[],
+        outputs=[p1, p2, p3, p4, show_all_toggle, comparison_html, summary_md, export_box],
+    )
+
+    # Auto-compare on load with defaults
+    demo.load(
+        fn=do_compare,
+        inputs=[p1, p2, p3, p4, show_all_toggle],
+        outputs=[comparison_html, summary_md, export_box],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,2 @@
+gradio==4.44.0
+pandas>=2.0.0