| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <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 { |
| 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); } |
| |
| |
| .container { max-width: 900px; margin-inline: auto; padding-inline: 28px; } |
| |
| |
| .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 { 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; |
| } |
| |
| |
| .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-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 { |
| 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 { |
| 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 { |
| 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 { |
| 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; } |
| |
| |
| @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> |
| <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"> |
| ▶ Open DemoPrep |
| </a> |
| </div> |
| </header> |
|
|
| |
| <div class="video-section"> |
| <div class="container"> |
| <div class="video-wrap"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="section"> |
| <div class="container"> |
| <div class="section-label">Step 02</div> |
| <h2>Choose Your Vertical, Line & 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 & Consumer Goods</span> |
| <span class="tag">Financial Services</span> |
| <span class="tag">Healthcare & Life Sciences</span> |
| <span class="tag">Travel & Hospitality</span> |
| <span class="tag">Telecom</span> |
| <span class="tag">Manufacturing</span> |
| <span class="tag">Professional Services</span> |
| <span class="tag">Media & Entertainment</span> |
| <span class="tag">Utilities & Energy</span> |
| <span class="tag">Technology</span> |
| <span class="tag">Education</span> |
| <span class="tag">Real Estate & Construction</span> |
| <span class="tag">Government & Non-Profit</span> |
| <span class="tag">Transportation & 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 & 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 & 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 & 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 & 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> |
|
|
| |
| <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> |
| <div class="container"> |
| <p>Built by the ThoughtSpot SE team · <a href="https://huggingface.co/spaces/thoughtspot-dp/demoprep" target="_blank">Open DemoPrep ↗</a></p> |
| </div> |
| </footer> |
|
|
| </body> |
| </html> |
|
|
