Hugging Face's logo

Spaces:
thoughtspot-dp
/
demoprep-doc
Running

App Files Community
demoprep-doc / index.html
mike boone
Upload index.html with huggingface_hub
475b3f6 verified
Raw
History Blame Contribute Delete
22 kB
<!DOCTYPE html>
<html lang="en">
<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"69b41b4154acc2f4230becc8"}};</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DemoPrep β€” Quick Start Guide</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
 :root {
 --navy: #0F1E35;
 --navy2: #1E2E47;
 --navy3: #253858;
 --blue: #2D6BE4;
 --sky: #5BC2E7;
 --sky2: #93DAEA;
 --white: #FFFFFF;
 --off: #E8EEF7;
 --muted: #8FA3BF;
 --border: rgba(91,194,231,0.18);
 --glow: rgba(45,107,228,0.25);
 }
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 body {
 font-family: 'DM Sans', sans-serif;
 background: var(--navy);
 color: var(--white);
 line-height: 1.6;
 overflow-x: hidden;
 }
 /* ── HEADER ── */
 header {
 position: relative;
 padding: 72px 0 80px;
 text-align: center;
 overflow: hidden;
 }
 header::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 80% 60% at 50% -10%, rgba(45,107,228,0.35) 0%, transparent 70%),
 radial-gradient(ellipse 40% 40% at 80% 110%, rgba(91,194,231,0.15) 0%, transparent 60%);
 pointer-events: none;
 }
 .logo-row {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 14px;
 margin-bottom: 28px;
 position: relative;
 }
 .logo-badge {
 background: var(--blue);
 color: var(--white);
 font-family: 'DM Mono', monospace;
 font-size: 13px;
 font-weight: 500;
 letter-spacing: .08em;
 padding: 5px 14px;
 border-radius: 4px;
 }
 .logo-sep { color: var(--muted); font-size: 18px; }
 .logo-ts {
 color: var(--sky);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 }
 header h1 {
 font-size: clamp(2.2rem, 5vw, 3.6rem);
 font-weight: 700;
 letter-spacing: -.02em;
 line-height: 1.1;
 position: relative;
 }
 header h1 span { color: var(--sky); }
 header p.sub {
 margin-top: 16px;
 font-size: 1.1rem;
 color: var(--muted);
 max-width: 520px;
 margin-inline: auto;
 position: relative;
 }
 .header-cta {
 margin-top: 32px;
 display: inline-flex;
 align-items: center;
 gap: 10px;
 background: var(--blue);
 color: var(--white);
 font-weight: 600;
 font-size: .95rem;
 padding: 12px 28px;
 border-radius: 8px;
 text-decoration: none;
 transition: background .2s, transform .15s;
 position: relative;
 }
 .header-cta:hover { background: #3d7ef0; transform: translateY(-1px); }
 /* ── LAYOUT ── */
 .container { max-width: 900px; margin-inline: auto; padding-inline: 28px; }
 /* ── VIDEO SECTION ── */
 .video-section {
 padding: 0 0 72px;
 }
 .video-wrap {
 position: relative;
 background: var(--navy2);
 border: 1px solid var(--border);
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 8px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(91,194,231,0.08);
 }
 .video-placeholder {
 aspect-ratio: 16/9;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 16px;
 background: linear-gradient(135deg, var(--navy2) 0%, var(--navy3) 100%);
 color: var(--muted);
 font-size: .95rem;
 }
 .video-placeholder .play-icon {
 width: 64px; height: 64px;
 background: var(--blue);
 border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 color: white;
 font-size: 24px;
 box-shadow: 0 0 0 12px rgba(45,107,228,0.15);
 }
 .video-wrap iframe {
 width: 100%; aspect-ratio: 16/9; border: none; display: block;
 }
 .video-caption {
 padding: 14px 20px;
 font-size: .85rem;
 color: var(--muted);
 border-top: 1px solid var(--border);
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .video-caption::before {
 content: 'β–Ά';
 color: var(--sky);
 font-size: .7rem;
 }
 /* ── SECTION HEADINGS ── */
 .section { padding: 56px 0; border-top: 1px solid var(--border); }
 .section-label {
 font-family: 'DM Mono', monospace;
 font-size: .75rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--sky);
 margin-bottom: 10px;
 }
 .section h2 {
 font-size: clamp(1.5rem, 3vw, 2rem);
 font-weight: 700;
 letter-spacing: -.02em;
 margin-bottom: 8px;
 }
 .section .lead {
 color: var(--muted);
 font-size: 1rem;
 max-width: 600px;
 margin-bottom: 36px;
 }
 /* ── STEP CARDS ── */
 .steps { display: flex; flex-direction: column; gap: 20px; }
 .step {
 display: grid;
 grid-template-columns: 52px 1fr;
 gap: 20px;
 align-items: start;
 background: var(--navy2);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 24px;
 transition: border-color .2s, box-shadow .2s;
 }
 .step:hover {
 border-color: rgba(91,194,231,0.35);
 box-shadow: 0 4px 24px rgba(0,0,0,0.3);
 }
 .step-num {
 width: 40px; height: 40px;
 background: linear-gradient(135deg, var(--blue), #1a4fa8);
 border-radius: 10px;
 display: flex; align-items: center; justify-content: center;
 font-family: 'DM Mono', monospace;
 font-size: .85rem;
 font-weight: 500;
 color: var(--white);
 flex-shrink: 0;
 margin-top: 2px;
 }
 .step-body h3 {
 font-size: 1.05rem;
 font-weight: 600;
 margin-bottom: 6px;
 }
 .step-body p {
 color: var(--muted);
 font-size: .93rem;
 line-height: 1.6;
 }
 .step-body .tag-row {
 display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
 }
 .tag {
 background: rgba(91,194,231,0.1);
 border: 1px solid rgba(91,194,231,0.25);
 color: var(--sky2);
 font-family: 'DM Mono', monospace;
 font-size: .75rem;
 padding: 3px 10px;
 border-radius: 20px;
 }
 /* ── SCREENSHOT PLACEHOLDER ── */
 .screenshot-wrap {
 margin-top: 24px;
 background: var(--navy3);
 border: 1px dashed rgba(91,194,231,0.3);
 border-radius: 10px;
 aspect-ratio: 16/8;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 8px;
 color: var(--muted);
 font-size: .88rem;
 }
 .screenshot-wrap .ss-icon { font-size: 2rem; opacity: .4; }
 .screenshot-wrap img {
 width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block;
 }
 /* ── PANEL GRID ── */
 .panel-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 margin-top: 8px;
 }
 @media (max-width: 600px) { .panel-grid { grid-template-columns: 1fr; } }
 .panel-card {
 background: var(--navy2);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 20px;
 }
 .panel-card h4 {
 font-size: .9rem;
 font-weight: 600;
 color: var(--sky);
 margin-bottom: 8px;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .panel-card h4::before {
 content: '';
 width: 6px; height: 6px;
 background: var(--sky);
 border-radius: 50%;
 flex-shrink: 0;
 }
 .panel-card p, .panel-card ul {
 font-size: .88rem;
 color: var(--muted);
 line-height: 1.6;
 }
 .panel-card ul { padding-left: 16px; }
 .panel-card li { margin-bottom: 4px; }
 /* ── ASSET TABLE ── */
 .asset-table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 4px;
 }
 .asset-table th {
 text-align: left;
 font-size: .75rem;
 font-family: 'DM Mono', monospace;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--sky);
 padding: 10px 16px;
 border-bottom: 1px solid var(--border);
 }
 .asset-table td {
 padding: 14px 16px;
 font-size: .9rem;
 color: var(--muted);
 border-bottom: 1px solid rgba(255,255,255,0.04);
 vertical-align: top;
 }
 .asset-table td:first-child { color: var(--white); font-weight: 500; }
 .asset-table tr:last-child td { border-bottom: none; }
 .asset-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
 /* ── PIPELINE STATUS ���─ */
 .pipeline {
 display: flex;
 align-items: center;
 gap: 0;
 margin-top: 24px;
 flex-wrap: wrap;
 }
 .pipe-step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 flex: 1;
 min-width: 80px;
 }
 .pipe-dot {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--navy3);
 border: 2px solid var(--border);
 display: flex; align-items: center; justify-content: center;
 font-size: .7rem;
 color: var(--muted);
 position: relative;
 z-index: 1;
 }
 .pipe-dot.active {
 background: var(--blue);
 border-color: var(--blue);
 color: var(--white);
 box-shadow: 0 0 0 4px rgba(45,107,228,0.2);
 }
 .pipe-label {
 font-size: .72rem;
 color: var(--muted);
 text-align: center;
 font-family: 'DM Mono', monospace;
 }
 .pipe-connector {
 flex: 1;
 height: 2px;
 background: var(--border);
 margin-bottom: 22px;
 min-width: 20px;
 }
 /* ── FOOTER ── */
 footer {
 border-top: 1px solid var(--border);
 padding: 36px 0;
 text-align: center;
 color: var(--muted);
 font-size: .85rem;
 }
 footer a { color: var(--sky); text-decoration: none; }
 footer a:hover { text-decoration: underline; }
 /* ── FADE IN ── */
 @keyframes fadeUp {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: translateY(0); }
 }
 header h1, header p.sub, .header-cta { animation: fadeUp .6s ease both; }
 header p.sub { animation-delay: .1s; }
 .header-cta { animation-delay: .2s; }
</style>
</head>
<body>
<!-- ── HEADER ── -->
<header>
 <div class="container">
 <div class="logo-row">
 <span class="logo-badge">DemoPrep</span>
 <span class="logo-sep">Γ—</span>
 <span class="logo-ts">ThoughtSpot</span>
 </div>
 <h1>Quick Start <span>Guide</span></h1>
 <p class="sub">Everything you need to generate a demo-ready ThoughtSpot liveboard in minutes.</p>
 <a class="header-cta" href="https://huggingface.co/spaces/thoughtspot-dp/demoprep" target="_blank">
 β–Ά &nbsp;Open DemoPrep
 </a>
 </div>
</header>
<!-- ── VIDEO ── -->
<div class="video-section">
 <div class="container">
 <div class="video-wrap">
 <!-- Video player -->
 <video controls style="width:100%; display:block;" poster="">
 <source src="demoprep.mp4" type="video/mp4">
 </video>
 <div class="video-caption">DemoPrep walkthrough β€” how to run a demo end-to-end</div>
 </div>
 </div>
</div>
<!-- ── SECTION 1: CONFIGURE THE RIGHT PANEL ── -->
<div class="section">
 <div class="container">
 <div class="section-label">Step 01</div>
 <h2>Configure the Right Panel</h2>
 <p class="lead">The right panel controls your ThoughtSpot connection, AI model, and tracks progress as the pipeline runs. Set it up before hitting GO.</p>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;">
 <div>
 <div class="panel-grid" style="grid-template-columns: 1fr;">
 <div class="panel-card">
 <h4>TS Environment</h4>
 <p>Choose which ThoughtSpot instance to deploy to. <strong style="color:var(--white);">Required</strong> β€” GO will not run without a selection.</p>
 </div>
 <div class="panel-card">
 <h4>AI Model</h4>
 <p>Select the LLM for the build. GPT-5.5 is the current default β€” Claude models are also available for higher reasoning quality.</p>
 </div>
 <div class="panel-card">
 <h4>βš™οΈ Settings (click to expand)</h4>
 <p>Collapsible section with per-run options that take effect immediately β€” no save or reload needed:</p>
 <ul style="margin-top:8px; padding-left:14px; font-size:.83rem; line-height:1.8;">
 <li><strong style="color:var(--white);">Liveboard Name</strong> β€” leave blank to auto-derive from the company URL</li>
 <li><strong style="color:var(--white);">Data Size</strong> β€” Small (~1k rows, fast) or Medium (~10k rows, richer data)</li>
 <li><strong style="color:var(--white);">Geo Scope</strong> β€” USA Only or International location data</li>
 <li><strong style="color:var(--white);">Tag Name</strong> β€” optional tag applied to all created TS objects</li>
 <li><strong style="color:var(--white);">Column Naming Style</strong> β€” Regular Case, snake_case, camelCase, PascalCase, etc.</li>
 <li><strong style="color:var(--white);">Object Naming Prefix</strong> β€” short prefix added to model and liveboard names</li>
 <li><strong style="color:var(--white);">Share With</strong> β€” ThoughtSpot email to share the liveboard with after deployment</li>
 </ul>
 </div>
 <div class="panel-card">
 <h4>Pipeline Progress</h4>
 <p>Once GO is pressed, watch the stages tick through in real time β€” Research β†’ DDL β†’ Data β†’ ThoughtSpot β†’ Liveboard β†’ Complete. Pipeline Status shows live output as it runs.</p>
 </div>
 </div>
 </div>
 <div>
 <div style="border-radius: 10px; overflow: hidden; border: 1px solid var(--border);">
 <img src="ss_rightpanel.png" alt="Right panel β€” TS Environment, AI Model, Liveboard Name, Pipeline Progress" style="width:100%; display:block;"/>
 </div>
 </div>
 </div>
 </div>
</div>
<!-- ── SECTION 2: CHOOSE YOUR VERTICAL ── -->
<div class="section">
 <div class="container">
 <div class="section-label">Step 02</div>
 <h2>Choose Your Vertical, Line &amp; Function</h2>
 <p class="lead">DemoPrep covers 15 industry verticals, each with specific lines of business, and 6 universal functions. Three selections and you're ready to run.</p>
<div class="steps">
 <div class="step">
 <div class="step-num">1</div>
 <div class="step-body">
 <h3>Pick a Vertical</h3>
 <p>Select the prospect's industry. DemoPrep covers 15 verticals β€” once you pick one, the Line dropdown populates automatically.</p>
 <div class="tag-row">
 <span class="tag">Retail &amp; Consumer Goods</span>
 <span class="tag">Financial Services</span>
 <span class="tag">Healthcare &amp; Life Sciences</span>
 <span class="tag">Travel &amp; Hospitality</span>
 <span class="tag">Telecom</span>
 <span class="tag">Manufacturing</span>
 <span class="tag">Professional Services</span>
 <span class="tag">Media &amp; Entertainment</span>
 <span class="tag">Utilities &amp; Energy</span>
 <span class="tag">Technology</span>
 <span class="tag">Education</span>
 <span class="tag">Real Estate &amp; Construction</span>
 <span class="tag">Government &amp; Non-Profit</span>
 <span class="tag">Transportation &amp; Logistics</span>
 <span class="tag">Agriculture</span>
 </div>
 </div>
 </div>
 <div class="step">
 <div class="step-num">2</div>
 <div class="step-body">
 <h3>Choose a Line</h3>
 <p>Each vertical has its own lines of business β€” pick the one that best matches the prospect. A few examples:</p>
 <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;">
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Technology</div>
 <div style="font-size:.83rem; color:var(--muted);">SaaS, Cybersecurity, Hardware, AI, IT Services</div>
 </div>
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Financial Services</div>
 <div style="font-size:.83rem; color:var(--muted);">Banking, Insurance, Asset &amp; Wealth Management</div>
 </div>
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Manufacturing</div>
 <div style="font-size:.83rem; color:var(--muted);">Automotive, Aerospace, Chemical, Electronics, Machinery</div>
 </div>
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Healthcare &amp; Life Sciences</div>
 <div style="font-size:.83rem; color:var(--muted);">Life Sciences, Healthcare Providers, Payers</div>
 </div>
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Retail &amp; Consumer Goods</div>
 <div style="font-size:.83rem; color:var(--muted);">Fashion, Consumer Electronics, Grocery, Specialty Retail</div>
 </div>
 <div>
 <div style="font-size:.78rem; color:var(--sky); font-family:'DM Mono',monospace; margin-bottom:4px;">Transportation &amp; Logistics</div>
 <div style="font-size:.83rem; color:var(--muted);">Shipping, Supply Chain, Air Transport, Trucking, Freight</div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="screenshot-wrap" style="aspect-ratio:16/10;">
 <img src="ss_line.png" alt="Line selection dropdown in DemoPrep"/>
 </div>
<div class="steps" style="margin-top:28px;">
 <div class="step">
 <div class="step-num">3</div>
 <div class="step-body">
 <h3>Select a Function</h3>
 <p>The same six business functions are available across every vertical and every line. Pick the one that fits the audience in the room.</p>
 <div class="tag-row">
 <span class="tag">Sales</span>
 <span class="tag">Marketing</span>
 <span class="tag">Finance</span>
 <span class="tag">HR</span>
 <span class="tag">IT</span>
 <span class="tag">Legal</span>
 </div>
 </div>
 </div>
 </div>
<div class="screenshot-wrap" style="aspect-ratio:16/10;">
 <img src="ss_function.png" alt="Function selection dropdown in DemoPrep"/>
 </div>
</div>
</div>
<!-- ── SECTION 3: RUN THE PIPELINE ── -->
<div class="section">
 <div class="container">
 <div class="section-label">Step 03</div>
 <h2>Run the Pipeline</h2>
 <p class="lead">Hit run and DemoPrep handles the rest. Watch the pipeline status bar as it moves through each stage β€” you'll see exactly where you are at all times.</p>
<div class="pipeline">
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">Init</div>
 </div>
 <div class="pipe-connector"></div>
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">Research</div>
 </div>
 <div class="pipe-connector"></div>
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">DDL</div>
 </div>
 <div class="pipe-connector"></div>
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">Data</div>
 </div>
 <div class="pipe-connector"></div>
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">Model</div>
 </div>
 <div class="pipe-connector"></div>
 <div class="pipe-step">
 <div class="pipe-dot active">βœ“</div>
 <div class="pipe-label">Liveboard</div>
 </div>
 </div>
<div class="steps" style="margin-top:28px;">
 <div class="step">
 <div class="step-num">↓</div>
 <div class="step-body">
 <h3>Demo Assets Produced</h3>
 <p>Every completed run produces three reusable assets you can bring to any demo:</p>
 <div style="margin-top:16px;">
 <table class="asset-table">
 <thead>
 <tr>
 <th>Asset</th>
 <th>What it is</th>
 <th>Where it lives</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Liveboard</td>
 <td>A fully built ThoughtSpot liveboard scoped to the vertical and company</td>
 <td>ThoughtSpot instance</td>
 </tr>
 <tr>
 <td>Data Model</td>
 <td>The semantic model powering the liveboard β€” includes AI-generated column descriptions, synonyms, and Sage search index</td>
 <td>ThoughtSpot instance</td>
 </tr>
 <tr>
 <td>SpotterViz Story</td>
 <td>A sequence of natural language Spotter prompts matched to the liveboard β€” paste into Spotter to walk the demo story step by step</td>
 <td>Demo Assets tab</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
<div class="screenshot-wrap" style="aspect-ratio:16/9;">
 <img src="ss_liveboard.png" alt="Completed Shopify liveboard in ThoughtSpot"/>
 </div>
</div>
</div>
<!-- ── FOOTER ── -->
<footer>
 <div class="container">
 <p>Built by the ThoughtSpot SE team &nbsp;Β·&nbsp; <a href="https://huggingface.co/spaces/thoughtspot-dp/demoprep" target="_blank">Open DemoPrep β†—</a></p>
 </div>
</footer>
</body>
</html>