Spaces:

aashish-bindal
/

dabur-pricing-app

Sleeping

File size: 16,167 Bytes

14356bb

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Genesis AI — Complete Data Flow</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f4f6f9;
    color: #1a1a2e;
    padding: 32px;
  }

  h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a6b2f;
    border-bottom: 3px solid #1a6b2f;
    padding-bottom: 10px;
    margin-bottom: 6px;
  }

  .subtitle {
    font-size: 12px;
    color: #666;
    margin-bottom: 32px;
  }

  /* ── Section cards ── */
  .section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 24px 28px;
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #1a6b2f;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-title .badge {
    background: #1a6b2f;
    color: #fff;
    font-size: 11px;
    border-radius: 20px;
    padding: 2px 10px;
  }

  /* ── Mermaid diagram wrapper ── */
  .mermaid {
    overflow-x: auto;
    padding: 8px 0;
  }

  /* ── Step table ── */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  thead tr {
    background: #1a6b2f;
    color: #fff;
  }

  thead th {
    padding: 9px 14px;
    text-align: left;
    font-weight: 600;
    letter-spacing: .3px;
  }

  tbody tr:nth-child(odd)  { background: #f8faf8; }
  tbody tr:nth-child(even) { background: #fff; }
  tbody tr:hover           { background: #e8f5e9; }

  td {
    padding: 8px 14px;
    vertical-align: top;
    border-bottom: 1px solid #e8ede9;
  }

  td:first-child { font-weight: 600; color: #1a6b2f; white-space: nowrap; }

  .tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .tag-fe  { background: #e3f2fd; color: #1565c0; }
  .tag-api { background: #fff3e0; color: #e65100; }
  .tag-py  { background: #e8f5e9; color: #1a6b2f; }
  .tag-out { background: #f3e5f5; color: #6a1b9a; }

  /* ── File list ── */
  .file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 4px;
  }

  .file-card {
    background: #f8faf8;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 10px 13px;
  }

  .file-card .fname {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #1a6b2f;
  }

  .file-card .fsrc {
    font-size: 10px;
    color: #888;
    margin-top: 3px;
  }

  /* ── API table ── */
  code {
    font-family: 'Consolas', monospace;
    font-size: 11.5px;
    background: #f0f4f0;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .footer {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
  }
</style>
</head>
<body>

<h1>Genesis AI — Price Elasticity Intelligence</h1>
<div class="subtitle">Complete Data Flow &nbsp;|&nbsp; Frontend → API → Python Pipeline → Output → Dashboard</div>

<!-- ── MASTER FLOWCHART ── -->
<div class="section">
  <div class="section-title"><span class="badge">1</span> Master Flow Diagram</div>
  <div class="mermaid">
flowchart TD
    A([User opens Dashboard\nbrowser · localhost:5173]) --> B

    B{Upload server\nrunning?}
    B -- YES --> C1[GET /api/data/key x16\nFastAPI reads output/*.json]
    B -- NO  --> C2[GET /data/key.json x16\nVite serves public/data/ static files]
    C1 --> D([React tabs render\nwith computed data])
    C2 --> D

    style A fill:#1a6b2f,color:#fff,rx:20
    style D fill:#1a6b2f,color:#fff,rx:20
    style B fill:#fff3e0,color:#333
  </div>
</div>

<!-- ── UPLOAD FLOW ── -->
<div class="section">
  <div class="section-title"><span class="badge">2</span> Upload Button → Python Pipeline → Dashboard Refresh</div>
  <div class="mermaid">
flowchart TD
    U1([User clicks Upload button\nHeader.jsx]) -->|opens| U2[UploadModal.jsx]
    U2 -->|POST /api/upload/reset| U3[FastAPI resets job state → idle]
    U3 --> U4[User drags or picks .xlsx file]
    U4 -->|POST /api/upload\nmultipart form-data| U5

    U5[upload_server.py\n@app.post /api/upload] --> U6[Save file to\n_uploads/ folder]
    U6 --> U7[Spawn background thread\n_run_pipeline]
    U7 -->|returns immediately| U8[HTTP 200 · ok: true]
    U8 --> U9[UploadModal polls every 1.5s\nGET /api/upload/status\nGET /api/upload/logs]

    U7 -->|subprocess.Popen| P1

    P1[pipeline/run.py\nEntry Point] --> P2
    P2[pipeline/loader.py\nload_source_data\nread_brand_config] --> P3
    P3[pipeline/config.py\nDEFAULT_PACK_ORDER\nconstants only] --> P4
    P4[pipeline/modelling.py\nbuild_wide_pivot\nrun_elasticity_models\n343 specs tested] --> P5
    P5[pipeline/proxies.py\nassign_proxies 7 grains\ncompute_freq_anchors] --> P6
    P6[pipeline/diagnostics.py\nrun_diagnostics\nStep1_Diagnostics.xlsx] --> P7

    P7[pipeline/exporters/stats.py] --> J1[models.json\nstats.json\nfreq_anchors.json]
    P7 --> EX2

    EX2[pipeline/exporters/market.py] --> J2[trend.json · ms.json\nvol_salience.json · val_share.json\ncomp_ms.json · vtm.json]
    EX2 --> EX3

    EX3[pipeline/exporters/ppa.py\nreads sheet 3_PPA_MT\nreads sheet 4_PPA_TT] --> J3[ppa_mt.json\nppa_tt.json]
    EX3 --> EX4

    EX4[pipeline/exporters/analytics.py] --> J4[interaction.json\ngrowth_decomp.json\npgi.json]
    EX4 --> EX5

    EX5[pipeline/exporters/recommendations.py] --> J5[recs_full.json]

    J1 & J2 & J3 & J4 & J5 --> OUT[16 JSON files\nin output/]
    OUT --> CP[Copied to\npublic/data/ as fallback]
    OUT --> ST[Job status = done]

    ST --> PL[UploadModal sees done\nUser clicks Reload Dashboard]
    PL -->|GET /api/data/key x16| SV[upload_server.py\n@app.get /api/data/key\nreads output/key.json]
    SV --> RD([React re-renders\nall 9 tabs with fresh data])

    style U1 fill:#1a6b2f,color:#fff
    style RD fill:#1a6b2f,color:#fff
    style P1 fill:#1565c0,color:#fff
    style OUT fill:#6a1b9a,color:#fff
  </div>
</div>

<!-- ── STEP BY STEP TABLE ── -->
<div class="section">
  <div class="section-title"><span class="badge">3</span> Step-by-Step Reference</div>
  <table>
    <thead>
      <tr>
        <th>Step</th>
        <th>Where</th>
        <th>File / Endpoint</th>
        <th>What happens</th>
        <th>Layer</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Browser</td>
        <td><code>Header.jsx</code></td>
        <td>User clicks ↑ Upload button — UploadModal opens</td>
        <td><span class="tag tag-fe">Frontend</span></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Browser</td>
        <td><code>UploadModal.jsx</code></td>
        <td>POST /api/upload/reset — clears previous job state on server</td>
        <td><span class="tag tag-api">API</span></td>
      </tr>
      <tr>
        <td>3</td>
        <td>Browser</td>
        <td><code>UploadModal.jsx</code></td>
        <td>POST /api/upload — sends .xlsx file as multipart form-data</td>
        <td><span class="tag tag-api">API</span></td>
      </tr>
      <tr>
        <td>4</td>
        <td>Server</td>
        <td><code>upload_server.py</code></td>
        <td>Saves file to _uploads/, spawns background thread, returns HTTP 200 immediately</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>5</td>
        <td>Server</td>
        <td><code>upload_server.py</code></td>
        <td>subprocess.Popen → runs python -m pipeline.run with the uploaded file</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>6</td>
        <td>Pipeline</td>
        <td><code>pipeline/loader.py</code></td>
        <td>Reads sheet 1_Source_Data → 3,207 rows DataFrame. Reads sheet 2_Brand_Config → focal brand + competitors</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>7</td>
        <td>Pipeline</td>
        <td><code>pipeline/config.py</code></td>
        <td>Loads DEFAULT_PACK_ORDER and all modelling thresholds (no I/O)</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>8</td>
        <td>Pipeline</td>
        <td><code>pipeline/modelling.py</code></td>
        <td>build_wide_pivot() builds monthly CH×Region tables. run_elasticity_models() tests 343 OLS specs per grain, selects best Adj-R²</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>9</td>
        <td>Pipeline</td>
        <td><code>pipeline/proxies.py</code></td>
        <td>assign_proxies() fills 7 grains that failed sign check. compute_freq_anchors() finds dominant pack per CH×Region</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>10</td>
        <td>Pipeline</td>
        <td><code>pipeline/diagnostics.py</code></td>
        <td>Runs collinearity, RPI, distribution, cannibalization checks → writes Step1_Diagnostics.xlsx</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>11</td>
        <td>Exporters</td>
        <td><code>exporters/stats.py</code></td>
        <td>Writes models.json, stats.json, freq_anchors.json to output/</td>
        <td><span class="tag tag-out">Output</span></td>
      </tr>
      <tr>
        <td>12</td>
        <td>Exporters</td>
        <td><code>exporters/market.py</code></td>
        <td>Writes trend.json, ms.json, vol_salience.json, val_share.json, comp_ms.json, vtm.json</td>
        <td><span class="tag tag-out">Output</span></td>
      </tr>
      <tr>
        <td>13</td>
        <td>Exporters</td>
        <td><code>exporters/ppa.py</code></td>
        <td>Reads Excel sheets 3_PPA_MT and 4_PPA_TT → writes ppa_mt.json, ppa_tt.json</td>
        <td><span class="tag tag-out">Output</span></td>
      </tr>
      <tr>
        <td>14</td>
        <td>Exporters</td>
        <td><code>exporters/analytics.py</code></td>
        <td>Writes interaction.json, growth_decomp.json, pgi.json</td>
        <td><span class="tag tag-out">Output</span></td>
      </tr>
      <tr>
        <td>15</td>
        <td>Exporters</td>
        <td><code>exporters/recommendations.py</code></td>
        <td>Writes recs_full.json</td>
        <td><span class="tag tag-out">Output</span></td>
      </tr>
      <tr>
        <td>16</td>
        <td>Server</td>
        <td><code>upload_server.py</code></td>
        <td>Copies all 16 JSON files from output/ to public/data/ as static fallback. Sets job status = done</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>17</td>
        <td>Browser</td>
        <td><code>UploadModal.jsx</code></td>
        <td>Polling detects status = done. User clicks Reload Dashboard</td>
        <td><span class="tag tag-fe">Frontend</span></td>
      </tr>
      <tr>
        <td>18</td>
        <td>Browser</td>
        <td><code>DataContext.jsx</code></td>
        <td>Fires GET /api/data/{key} × 16 calls to fetch all computed JSON data</td>
        <td><span class="tag tag-api">API</span></td>
      </tr>
      <tr>
        <td>19</td>
        <td>Server</td>
        <td><code>upload_server.py</code></td>
        <td>@app.get("/api/data/{key}") reads output/{key}.json → returns JSON to browser</td>
        <td><span class="tag tag-py">Python</span></td>
      </tr>
      <tr>
        <td>20</td>
        <td>Browser</td>
        <td>All 9 tab components</td>
        <td>React re-renders every tab with fresh pipeline-computed data</td>
        <td><span class="tag tag-fe">Frontend</span></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ── API ENDPOINTS ── -->
<div class="section">
  <div class="section-title"><span class="badge">4</span> All API Endpoints</div>
  <table>
    <thead>
      <tr><th>Method</th><th>Endpoint</th><th>Called by</th><th>Purpose</th></tr>
    </thead>
    <tbody>
      <tr><td>POST</td><td><code>/api/upload</code></td><td>UploadModal.jsx</td><td>Upload .xlsx file → triggers Python pipeline</td></tr>
      <tr><td>GET</td> <td><code>/api/upload/status</code></td><td>UploadModal.jsx (poll)</td><td>Returns { status, message, elapsed_s }</td></tr>
      <tr><td>GET</td> <td><code>/api/upload/logs</code></td><td>UploadModal.jsx (poll)</td><td>Returns live pipeline stdout as { logs }</td></tr>
      <tr><td>POST</td><td><code>/api/upload/reset</code></td><td>UploadModal.jsx (on open)</td><td>Clears job state back to idle</td></tr>
      <tr><td>GET</td> <td><code>/api/data/{key}</code></td><td>DataContext.jsx</td><td>Serves output/{key}.json computed by pipeline</td></tr>
      <tr><td>GET</td> <td><code>/api/data</code></td><td>(debug)</td><td>Lists all available data keys and file sizes</td></tr>
      <tr><td>GET</td> <td><code>/data/{key}.json</code></td><td>DataContext.jsx (fallback)</td><td>Vite static file — used only when server is down</td></tr>
    </tbody>
  </table>
</div>

<!-- ── OUTPUT FILES ── -->
<div class="section">
  <div class="section-title"><span class="badge">5</span> Python Output Files → Dashboard Tabs</div>
  <div class="file-grid">
    <div class="file-card"><div class="fname">models.json</div><div class="fsrc">exporters/stats.py → Elasticity Results tab</div></div>
    <div class="file-card"><div class="fname">stats.json</div><div class="fsrc">exporters/stats.py → Header KPIs</div></div>
    <div class="file-card"><div class="fname">freq_anchors.json</div><div class="fsrc">exporters/stats.py → Methodology tab</div></div>
    <div class="file-card"><div class="fname">trend.json</div><div class="fsrc">exporters/market.py → Trends tab</div></div>
    <div class="file-card"><div class="fname">ms.json</div><div class="fsrc">exporters/market.py → shared</div></div>
    <div class="file-card"><div class="fname">vol_salience.json</div><div class="fsrc">exporters/market.py → shared</div></div>
    <div class="file-card"><div class="fname">val_share.json</div><div class="fsrc">exporters/market.py → shared</div></div>
    <div class="file-card"><div class="fname">comp_ms.json</div><div class="fsrc">exporters/market.py → shared</div></div>
    <div class="file-card"><div class="fname">vtm.json</div><div class="fsrc">exporters/market.py → Brand Interaction tab</div></div>
    <div class="file-card"><div class="fname">ppa_mt.json</div><div class="fsrc">exporters/ppa.py → PPA tab (MT)</div></div>
    <div class="file-card"><div class="fname">ppa_tt.json</div><div class="fsrc">exporters/ppa.py → PPA tab (TT)</div></div>
    <div class="file-card"><div class="fname">interaction.json</div><div class="fsrc">exporters/analytics.py → Brand Interaction tab</div></div>
    <div class="file-card"><div class="fname">growth_decomp.json</div><div class="fsrc">exporters/analytics.py → Growth Decomp tab</div></div>
    <div class="file-card"><div class="fname">pgi.json</div><div class="fsrc">exporters/analytics.py → Price Gradient tab</div></div>
    <div class="file-card"><div class="fname">recs_full.json</div><div class="fsrc">exporters/recommendations.py → Recommendations tab</div></div>
    <div class="file-card"><div class="fname">recs.json</div><div class="fsrc">alias of recs_full.json</div></div>
  </div>
</div>

<div class="footer">
  Genesis AI · Price Elasticity Intelligence · Dabur Sarson Amla &nbsp;|&nbsp; Generated by Claude Code
</div>

<script>
  mermaid.initialize({
    startOnLoad: true,
    theme: 'default',
    flowchart: { curve: 'basis', padding: 20 },
    themeVariables: {
      primaryColor:       '#e8f5e9',
      primaryTextColor:   '#1a1a2e',
      primaryBorderColor: '#1a6b2f',
      lineColor:          '#1a6b2f',
      secondaryColor:     '#fff3e0',
      tertiaryColor:      '#e3f2fd',
    }
  })
</script>
</body>
</html>