UX: add FAQ tab with pipeline diagram, About, and accordion FAQ

README.md

@@ -302,11 +302,12 @@ The UI lets you:
 - **Drag-and-drop** your Instagram export zip (or `saved_posts.json` directly) — zip is extracted in-browser, no unzipping needed
 - **Pick a provider** — three options available (see below)
 - **Watch real-time progress** as posts are extracted, geocoded, and mapped
-- **Two-tab layout visible from first load** — the app shows two top-level tabs immediately on the landing page:
+- **Three-tab layout visible from first load** — the app shows three top-level tabs:
   - **📥 Extract** — upload your Instagram export, pick a model, run the pipeline, watch real-time progress
   - **🗺 Explore** — for returning users; drop your `places_map.kml` or `places_full.csv` here to skip re-extraction entirely. Once data loads, two sub-tabs appear:
     - **🎲 Roulette** — auto-spins the moment you land on it; filter by category or location (accepts city name or country name); badge shows how many unvisited spots remain. Default after extraction
     - **📋 Browse** — stats bar, interactive Leaflet map, full-text search, filters, card grid, and KML / GeoJSON / CSV download buttons. Default after import
+  - **❓ FAQ** — system pipeline diagram, About The Belagurian, and answers to common questions
   - After extraction completes, the app automatically jumps to Explore → Roulette and spins immediately
 - **Preview pins on a map** — an in-app Leaflet/OpenStreetMap map renders every geocoded place so you can sanity-check for misplaced pins before exporting. Follows your active filters; pins link back to the original reel
 - **Filter and search** — text search by name/city, country, category, and cuisine dropdowns, multi-select price range chips, "missing pins" toggle, and a **🍴 Food only** toggle (on by default) that limits Browse and Roulette to food/drink places (Restaurant, Bar, Cafe, Bakery, Market) — all client-side with instant results

web/static/app.css

@@ -837,3 +837,176 @@
   }
   .action-btn:hover { opacity: 0.88; }
   .action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  /* ── FAQ / About panel ────────────────────────────────────── */
+
+  /* Pipeline diagram */
+  .pipeline-diagram {
+    display: flex;
+    align-items: flex-start;
+    gap: 0;
+    overflow-x: auto;
+    padding-bottom: 6px;
+    scrollbar-width: thin;
+  }
+  .pipe-node {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 96px;
+    flex-shrink: 0;
+    padding: 12px 8px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+  }
+  .pipe-node-hl {
+    border-color: rgba(225,48,108,0.4);
+    background: rgba(225,48,108,0.07);
+  }
+  .pipe-icon-wrap { font-size: 1.4rem; margin-bottom: 6px; }
+  .pipe-node-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 4px;
+    line-height: 1.3;
+  }
+  .pipe-node-sub {
+    font-size: 0.65rem;
+    color: var(--muted);
+    line-height: 1.4;
+  }
+  .pipe-providers {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 3px;
+    margin-top: 8px;
+  }
+  .pipe-prov {
+    font-size: 0.6rem;
+    background: rgba(225,48,108,0.18);
+    color: var(--ig1);
+    border-radius: 4px;
+    padding: 2px 5px;
+    white-space: nowrap;
+  }
+  .pipe-connector {
+    display: flex;
+    align-items: flex-start;
+    padding: 20px 5px 0;
+    color: var(--muted);
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+  .pipeline-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 0.72rem;
+    color: var(--muted);
+  }
+  .pipe-out {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 3px 8px;
+    color: var(--text);
+    font-size: 0.7rem;
+  }
+
+  /* About section */
+  .about-row {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+  }
+  .about-avatar {
+    font-size: 2.4rem;
+    width: 64px; height: 64px;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .about-body { flex: 1; min-width: 0; }
+  .about-name {
+    font-size: 1rem;
+    font-weight: 800;
+    background: var(--grad);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  .about-handle {
+    font-size: 0.78rem;
+    color: var(--muted);
+    margin-bottom: 10px;
+  }
+  .about-bio {
+    font-size: 0.85rem;
+    color: var(--muted);
+    line-height: 1.65;
+    margin-bottom: 14px;
+  }
+  .about-bio strong { color: var(--text); }
+  .about-links { display: flex; gap: 10px; flex-wrap: wrap; }
+  .about-link {
+    font-size: 0.8rem;
+    color: var(--ig1);
+    text-decoration: none;
+    border: 1px solid rgba(225,48,108,0.3);
+    border-radius: 6px;
+    padding: 4px 10px;
+    transition: background 0.15s;
+  }
+  .about-link:hover { background: rgba(225,48,108,0.1); }
+
+  /* FAQ accordion */
+  .faq-list { display: flex; flex-direction: column; }
+  .faq-item {
+    border-bottom: 1px solid var(--border);
+  }
+  .faq-item:last-child { border-bottom: none; }
+  .faq-item summary {
+    padding: 14px 0;
+    font-size: 0.88rem;
+    font-weight: 600;
+    cursor: pointer;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text);
+    user-select: none;
+  }
+  .faq-item summary::-webkit-details-marker { display: none; }
+  .faq-item summary::before {
+    content: '+';
+    font-size: 1.1rem;
+    color: var(--ig1);
+    font-weight: 400;
+    width: 16px;
+    flex-shrink: 0;
+    text-align: center;
+  }
+  .faq-item[open] > summary::before { content: '−'; }
+  .faq-item p {
+    font-size: 0.84rem;
+    color: var(--muted);
+    line-height: 1.75;
+    padding: 0 0 16px 26px;
+  }
+  .faq-item p strong { color: var(--text); }
+  .faq-item p code {
+    font-family: monospace;
+    font-size: 0.8rem;
+    background: var(--surface2);
+    border-radius: 4px;
+    padding: 1px 5px;
+  }

web/templates/index.html

@@ -27,6 +27,7 @@
   <div class="top-nav-inner">
     <button class="top-tab-btn active" data-top-tab="extract">📥 Extract</button>
     <button class="top-tab-btn" data-top-tab="explore">🗺 Explore</button>
+    <button class="top-tab-btn" data-top-tab="faq">❓ FAQ</button>
   </div>
 </div>
 
@@ -374,6 +375,115 @@
 
 </div><!-- /top-panel-explore -->
 
+<!-- ══ FAQ / About panel ═══════════════════════════════════════ -->
+<div class="top-panel" id="top-panel-faq">
+
+  <!-- System diagram -->
+  <div class="card" style="max-width:640px;">
+    <p class="card-title">How it works</p>
+    <div class="pipeline-diagram">
+      <div class="pipe-node">
+        <div class="pipe-icon-wrap">📱</div>
+        <div class="pipe-node-label">Instagram export</div>
+        <div class="pipe-node-sub">saved_posts.json or .zip</div>
+      </div>
+      <div class="pipe-connector">→</div>
+      <div class="pipe-node">
+        <div class="pipe-icon-wrap">🔍</div>
+        <div class="pipe-node-label">Pre-filter</div>
+        <div class="pipe-node-sub">keyword &amp; regex gate — skips non-places</div>
+      </div>
+      <div class="pipe-connector">→</div>
+      <div class="pipe-node pipe-node-hl">
+        <div class="pipe-icon-wrap">🤖</div>
+        <div class="pipe-node-label">AI extraction</div>
+        <div class="pipe-node-sub">reads captions &amp; hashtags</div>
+        <div class="pipe-providers">
+          <span class="pipe-prov">Claude API</span>
+          <span class="pipe-prov">Ollama</span>
+          <span class="pipe-prov">Free chatbot</span>
+        </div>
+      </div>
+      <div class="pipe-connector">→</div>
+      <div class="pipe-node">
+        <div class="pipe-icon-wrap">📍</div>
+        <div class="pipe-node-label">Geocoding</div>
+        <div class="pipe-node-sub">Nominatim OSM — 3-gate validation</div>
+      </div>
+      <div class="pipe-connector">→</div>
+      <div class="pipe-node">
+        <div class="pipe-icon-wrap">🗺️</div>
+        <div class="pipe-node-label">Export</div>
+        <div class="pipe-node-sub">KML · GeoJSON · CSV</div>
+      </div>
+    </div>
+    <div class="pipeline-legend">
+      <span>Outputs:</span>
+      <span class="pipe-out">🗺 Google My Maps (KML)</span>
+      <span class="pipe-out">🌐 GeoJSON</span>
+      <span class="pipe-out">📄 CSV</span>
+    </div>
+  </div>
+
+  <!-- About -->
+  <div class="card" style="max-width:640px;">
+    <p class="card-title">About</p>
+    <div class="about-row">
+      <div class="about-avatar">🍜</div>
+      <div class="about-body">
+        <div class="about-name">The Belagurian</div>
+        <div class="about-handle">by Harshith Belagur</div>
+        <p class="about-bio">
+          Food &amp; travel journal documenting meals and places worth remembering. IG Food Mapper was built to solve a real problem: saving hundreds of restaurant reels and never finding them again. Everything runs local-first — your data stays yours.
+        </p>
+        <div class="about-links">
+          <a href="https://instagram.com/the_belagurian" target="_blank" rel="noopener" class="about-link">Instagram ↗</a>
+          <a href="https://github.com/harshithbelagur/instagram-restaurant-mapper" target="_blank" rel="noopener" class="about-link">GitHub ↗</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- FAQ -->
+  <div class="card" style="max-width:640px;">
+    <p class="card-title">FAQ</p>
+    <div class="faq-list">
+
+      <details class="faq-item">
+        <summary>Is my data private?</summary>
+        <p>Yes. Your Instagram export never leaves your device. The only external calls are to the AI model you choose (Anthropic API or a local Ollama instance) and OpenStreetMap's geocoder. Nothing is stored on a server between sessions — no analytics, no tracking.</p>
+      </details>
+
+      <details class="faq-item">
+        <summary>Which AI models are supported?</summary>
+        <p>Three paths: <strong>Claude API</strong> (bring your own Anthropic key — Haiku is fast and cheap), <strong>Ollama</strong> (fully local, $0, needs the Ollama app running), or the <strong>free chatbot mode</strong> where you paste posts into ChatGPT or Claude.ai manually and bring the results back here. No API key required for the latter two.</p>
+      </details>
+
+      <details class="faq-item">
+        <summary>Why are some places missing map pins?</summary>
+        <p>Geocoding only succeeds when all three validation gates pass: country match, city match, and proximity check. If a place name is ambiguous or the caption doesn't include enough location context, the coordinates are left blank rather than guessing. You can fix missing pins manually via the Browse panel — click a card to edit it.</p>
+      </details>
+
+      <details class="faq-item">
+        <summary>What's the difference between KML, GeoJSON, and CSV?</summary>
+        <p><strong>KML</strong> is the primary export — import it into Google My Maps or Organic Maps for a navigable map organised by country → city. <strong>GeoJSON</strong> is for developers and tools like Mapbox or QGIS. <strong>CSV</strong> includes every row (including ungeocoded ones) and is useful for spreadsheet review or re-import after manual edits.</p>
+      </details>
+
+      <details class="faq-item">
+        <summary>How do I get my Instagram export?</summary>
+        <p>Instagram → <strong>☰ Settings and privacy → Your activity → Download your information → Download or transfer information</strong>. Select your account → <em>Some of your information</em> → tick <strong>Saved posts</strong> → Next → Download to device → Format: <strong>JSON</strong> → Date range: <strong>All time</strong> → Create files. Instagram emails you when it's ready (usually under an hour). Drop the zip here directly — no unzipping needed.</p>
+      </details>
+
+      <details class="faq-item">
+        <summary>Can I re-import a previous export?</summary>
+        <p>Yes. Switch to the <strong>Explore</strong> tab and drop a <code>places_map.kml</code> or <code>places_full.csv</code> from a previous run to jump straight to Roulette &amp; Browse without re-running the pipeline.</p>
+      </details>
+
+    </div>
+  </div>
+
+</div><!-- /top-panel-faq -->
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>