Hugging Face's logo

Spaces:
thoughtspot-dp
/
demoprep-doc
Running

App Files Community
demoprep-doc / quick_start_guide.html
mike boone
Upload quick_start_guide.html with huggingface_hub
b757b45 verified
Raw
History Blame Contribute Delete
21.5 kB
<!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>
 <style>
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background: #0f1117;
 color: #e2e8f0;
 line-height: 1.7;
 padding: 48px 24px;
 }
 .container {
 max-width: 860px;
 margin: 0 auto;
 }
 /* ── Header ── */
 .header {
 border-bottom: 1px solid #2d3748;
 padding-bottom: 28px;
 margin-bottom: 40px;
 }
 .header h1 {
 font-size: 30px;
 font-weight: 700;
 color: #ffffff;
 margin-bottom: 6px;
 }
 .header .subtitle {
 font-size: 15px;
 color: #a0aec0;
 margin-bottom: 20px;
 }
 .links {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 16px;
 }
 .links a {
 display: inline-block;
 background: #1a202c;
 border: 1px solid #2d3748;
 border-radius: 6px;
 padding: 7px 14px;
 font-size: 13px;
 color: #63b3ed;
 text-decoration: none;
 transition: border-color 0.15s;
 }
 .links a:hover { border-color: #63b3ed; }
 .links a .label {
 color: #718096;
 margin-right: 6px;
 }
 /* ── Section headings ── */
 .section-label {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: #4a5568;
 margin: 44px 0 16px;
 }
 /* ── Step blocks ── */
 .step {
 display: flex;
 gap: 20px;
 margin-bottom: 28px;
 align-items: flex-start;
 }
 .step-num {
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 background: #1a202c;
 border: 1px solid #2d3748;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: 700;
 color: #63b3ed;
 margin-top: 2px;
 }
 .step-body { flex: 1; }
 .step-body h3 {
 font-size: 16px;
 font-weight: 600;
 color: #ffffff;
 margin-bottom: 8px;
 }
 .step-body p {
 font-size: 14px;
 color: #a0aec0;
 margin-bottom: 10px;
 }
 /* ── Info cards (right panel, settings) ── */
 .card {
 background: #1a202c;
 border: 1px solid #2d3748;
 border-radius: 8px;
 padding: 20px 24px;
 margin-top: 12px;
 margin-bottom: 8px;
 }
 .card h4 {
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #718096;
 margin-bottom: 14px;
 }
 /* ── Tables ── */
 table {
 width: 100%;
 border-collapse: collapse;
 font-size: 13.5px;
 }
 th {
 text-align: left;
 color: #718096;
 font-weight: 600;
 font-size: 12px;
 padding: 0 12px 10px 0;
 border-bottom: 1px solid #2d3748;
 }
 td {
 padding: 9px 12px 9px 0;
 border-bottom: 1px solid #1f2937;
 vertical-align: top;
 color: #a0aec0;
 }
 td:first-child {
 color: #e2e8f0;
 font-weight: 500;
 white-space: nowrap;
 padding-right: 20px;
 }
 tr:last-child td { border-bottom: none; }
 /* ── Pipeline stages ── */
 .stages { list-style: none; padding: 0; margin-top: 12px; }
 .stage {
 display: flex;
 gap: 14px;
 padding: 10px 0;
 border-bottom: 1px solid #1f2937;
 align-items: flex-start;
 }
 .stage:last-child { border-bottom: none; }
 .stage-name {
 flex-shrink: 0;
 width: 110px;
 font-size: 13px;
 font-weight: 600;
 color: #68d391;
 }
 .stage-desc {
 font-size: 13px;
 color: #a0aec0;
 }
 /* ── Callout (note/tip) ── */
 .callout {
 background: #1a2744;
 border: 1px solid #2a4a7f;
 border-radius: 6px;
 padding: 12px 16px;
 font-size: 13px;
 color: #90cdf4;
 margin-top: 10px;
 }
 .callout strong { color: #bee3f8; }
 /* ── Tips list ── */
 .tips { list-style: none; padding: 0; }
 .tips li {
 padding: 10px 0 10px 20px;
 border-bottom: 1px solid #1f2937;
 font-size: 13.5px;
 color: #a0aec0;
 position: relative;
 }
 .tips li:last-child { border-bottom: none; }
 .tips li::before {
 content: "→";
 position: absolute;
 left: 0;
 color: #4a5568;
 }
 .tips li strong { color: #e2e8f0; }
 /* ── Accordion ── */
 details {
 background: #1a202c;
 border: 1px solid #2d3748;
 border-radius: 8px;
 margin-top: 12px;
 }
 summary {
 padding: 14px 20px;
 font-size: 14px;
 font-weight: 600;
 color: #e2e8f0;
 cursor: pointer;
 list-style: none;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 summary::-webkit-details-marker { display: none; }
 summary::before {
 content: "▶";
 font-size: 9px;
 color: #4a5568;
 transition: transform 0.2s;
 }
 details[open] summary::before { transform: rotate(90deg); }
 .details-body {
 padding: 0 20px 18px;
 border-top: 1px solid #2d3748;
 margin-top: 0;
 }
 /* ── Code ── */
 code {
 background: #2d3748;
 border-radius: 3px;
 padding: 1px 6px;
 font-size: 12px;
 color: #fc8181;
 }
 /* ── Footer ── */
 .footer {
 margin-top: 56px;
 padding-top: 24px;
 border-top: 1px solid #2d3748;
 font-size: 13px;
 color: #4a5568;
 text-align: center;
 }
 .footer a { color: #63b3ed; text-decoration: none; }
 </style>
</head>
<body>
 <div class="container">
<!-- ── Header ────────────────────────────────── -->
 <div class="header">
 <h1>DemoPrep</h1>
 <div class="subtitle">Quick Start Guide — how to build a ThoughtSpot demo from scratch in minutes</div>
 <div class="links">
 <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank">
 <span class="label">App</span>thoughtspot-dp-demoprep.hf.space
 </a>
 <a href="https://huggingface.co/spaces/boone-ts/demoprep_doc" target="_blank">
 <span class="label">Guide</span>This page
 </a>
 </div>
 </div>
<!-- ── What is it ─────────────────────────────── -->
 <div class="section-label">Overview</div>
<div class="card">
 <p style="font-size:14px; color:#a0aec0;">
 DemoPrep builds a complete ThoughtSpot demo from a company URL and a use case selection.
 It researches the company, generates a Snowflake database with realistic data, creates a
 ThoughtSpot semantic model, and deploys a finished liveboard — end to end in roughly
 <strong style="color:#e2e8f0;">10–30 minutes</strong> depending on data size.
 </p>
 </div>
<!-- ── Steps ─────────────────────────────────── -->
 <div class="section-label">How to Run a Demo</div>
<!-- Step 1 -->
 <div class="step">
 <div class="step-num">1</div>
 <div class="step-body">
 <h3>Log In</h3>
 <p>Go to <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank" style="color:#63b3ed;">thoughtspot-dp-demoprep.hf.space</a> and log in with your credentials.
 Your settings are saved per user and restored automatically.</p>
 <div class="callout">
 <strong>Important:</strong> Always use the direct URL above.
 The HuggingFace wrapper URL blocks auth cookies and will prevent login.
 </div>
 </div>
 </div>
<!-- Step 2 -->
 <div class="step">
 <div class="step-num">2</div>
 <div class="step-body">
 <h3>Configure the Right Panel</h3>
 <p>The right panel has two always-visible dropdowns at the top, plus a collapsible
 <strong>⚙️ Settings</strong> section for run options.</p>
<div class="card">
 <h4>Always Visible</h4>
 <table>
 <tr>
 <th>Control</th><th>What it does</th>
 </tr>
 <tr>
 <td>TS Environment</td>
 <td>The ThoughtSpot cluster to deploy to. <strong style="color:#fc8181;">Required</strong> — GO will not run without a selection.</td>
 </tr>
 <tr>
 <td>AI Model</td>
 <td>The LLM used for research, DDL generation, and liveboard questions. Defaults to the system default (GPT or Claude).</td>
 </tr>
 </table>
 </div>
<details>
 <summary>⚙️ Settings — click to expand run options</summary>
 <div class="details-body" style="padding-top:14px;">
 <table>
 <tr>
 <th style="width:170px;">Field</th><th>What it does</th>
 </tr>
 <tr>
 <td>Liveboard Name</td>
 <td>Name for the created liveboard. Leave blank to auto-derive from the company URL (e.g. <code>Nike - Sales Analytics</code>).</td>
 </tr>
 <tr>
 <td>Data Size</td>
 <td>
 Controls how many rows are generated.<br>
 <strong style="color:#e2e8f0;">Small</strong> — ~1,000 fact rows. Fast, good for testing or quick demos.<br>
 <strong style="color:#e2e8f0;">Medium</strong> — ~10,000 fact rows. Richer data, better chart distributions. Takes longer.
 </td>
 </tr>
 <tr>
 <td>Geo Scope</td>
 <td>
 <strong style="color:#e2e8f0;">USA Only</strong> — US cities, states, regions in dimensional data.<br>
 <strong style="color:#e2e8f0;">International</strong> — global locations. Use for global-brand prospects.
 </td>
 </tr>
 <tr>
 <td>Tag Name</td>
 <td>Optional ThoughtSpot tag applied to all created objects (model + liveboard). Leave blank to skip tagging.</td>
 </tr>
 <tr>
 <td>Column Naming Style</td>
 <td>How Snowflake column names are formatted: <code>Regular Case</code>, <code>snake_case</code>, <code>camelCase</code>, <code>PascalCase</code>, <code>UPPER_CASE</code>, or <code>original</code>.</td>
 </tr>
 <tr>
 <td>Object Naming Prefix</td>
 <td>Short prefix added to all TS object names (e.g. <code>acme</code> → <code>acme_CompanyModel</code>). Useful for multi-tenant or shared environments.</td>
 </tr>
 <tr>
 <td>Share With</td>
 <td>ThoughtSpot username or email to share the created liveboard with after deployment. Leave blank to skip.</td>
 </tr>
 </table>
 <p style="font-size:12px; color:#4a5568; margin-top:14px;">
 All Settings values take effect immediately for the current run — no save or page reload needed.
 </p>
 </div>
 </details>
 </div>
 </div>
<!-- Step 3 -->
 <div class="step">
 <div class="step-num">3</div>
 <div class="step-body">
 <h3>Choose Your Demo Type</h3>
<div class="card">
 <h4>Defined — recommended for most demos</h4>
 <p style="font-size:14px; color:#a0aec0; margin-bottom:12px;">
 Use the 3-level cascade to pick a curated use case from the matrix.
 </p>
 <table>
 <tr><td style="width:150px;">Industry</td><td>e.g. Retail &amp; Consumer Goods, Financial Services, Technology</td></tr>
 <tr><td>Line of Business</td><td>e.g. Specialty Retail, Wealth Management, Software as a Service</td></tr>
 <tr><td>Function</td><td>e.g. Sales, Supply Chain, Marketing, Finance</td></tr>
 </table>
 <p style="font-size:13px; color:#718096; margin-top:12px;">
 When the combination is in the matrix, you get curated KPIs, story-driven visualizations, and a target persona.
 If the combination is not fully defined, the AI adapts from the closest match.
 </p>
 </div>
<div class="card" style="margin-top:10px;">
 <h4>Custom — for demos outside the matrix</h4>
 <p style="font-size:14px; color:#a0aec0;">
 Enter the company URL and describe the use case in plain language.
 The more context you provide, the better the liveboard story.
 </p>
 </div>
 </div>
 </div>
<!-- Step 4 -->
 <div class="step">
 <div class="step-num">4</div>
 <div class="step-body">
 <h3>Hit GO</h3>
 <p>Press GO. The pipeline runs automatically through six stages:</p>
<div class="card">
 <ul class="stages">
 <li class="stage">
 <span class="stage-name">Research</span>
 <span class="stage-desc">AI reads the company website and builds a profile — industry, products, business context, and the metrics that matter for the use case.</span>
 </li>
 <li class="stage">
 <span class="stage-name">DDL</span>
 <span class="stage-desc">Schema generated for Snowflake: fact and dimension tables with realistic column names and types for the use case.</span>
 </li>
 <li class="stage">
 <span class="stage-name">Data</span>
 <span class="stage-desc">Snowflake database created and populated with AI-generated data. Small runs ~1k rows; Medium runs ~10k rows.</span>
 </li>
 <li class="stage">
 <span class="stage-name">ThoughtSpot</span>
 <span class="stage-desc">Semantic model built from the schema. Column descriptions, synonyms, and Sage search index added automatically.</span>
 </li>
 <li class="stage">
 <span class="stage-name">Liveboard</span>
 <span class="stage-desc">MCP creates the initial liveboard. Post-processing adds AI-humanized chart titles, KPI groups, donut charts, brand colors, and layout.</span>
 </li>
 <li class="stage">
 <span class="stage-name">Complete</span>
 <span class="stage-desc">Links to the model and liveboard appear in the Chat tab. Total time: Small ~10–15 min, Medium ~20–30 min.</span>
 </li>
 </ul>
 </div>
<p style="margin-top:12px;">
 Watch the <strong style="color:#e2e8f0;">Pipeline Status</strong> panel on the right for live progress.
 Detailed logs are in the <strong style="color:#e2e8f0;">AI Feedback</strong> tab.
 </p>
 </div>
 </div>
<!-- Step 5 -->
 <div class="step">
 <div class="step-num">5</div>
 <div class="step-body">
 <h3>Review Your Results</h3>
 <p>When the pipeline finishes, the Chat tab shows direct links to the model and liveboard in ThoughtSpot.
 The <strong style="color:#e2e8f0;">Demo Assets</strong> tab has:</p>
<div class="card">
 <table>
 <tr>
 <td>SpotterViz TS</td>
 <td>Matrix-grounded Spotter prompts you can paste into Spotter to walk through the demo story step by step.</td>
 </tr>
 <tr>
 <td>SpotterViz AI</td>
 <td>AI-generated alternative story flow based on the actual data and liveboard created.</td>
 </tr>
 <tr>
 <td>Demo Pack</td>
 <td>Talking points, insight bullets, and KPI context for the presentation.</td>
 </tr>
 </table>
 </div>
 </div>
 </div>
<!-- ── Settings Tab ────────────────────────────── -->
 <div class="section-label">Settings Tab</div>
<div class="card">
 <p style="font-size:14px; color:#a0aec0; margin-bottom:14px;">
 The Settings tab is for persistent configuration — credentials and defaults that carry across all runs.
 Per-run options (data size, geo scope, liveboard name, etc.) live in the <strong style="color:#e2e8f0;">⚙️ Settings accordion</strong> on the main screen.
 </p>
 <table>
 <tr><th style="width:200px;">Section</th><th>What's here</th></tr>
 <tr>
 <td>TS Environment credentials</td>
 <td>Trusted auth URL and secret key for each ThoughtSpot environment you have access to.</td>
 </tr>
 <tr>
 <td>Default Run Inputs</td>
 <td>Optional. Enable to have the app pre-fill Industry, Line of Business, Function, and Company URL at page load. Useful if you always demo the same use case.</td>
 </tr>
 <tr>
 <td>Admin defaults</td>
 <td>Admin-only. Set default values for AI model, TS environment, data size, etc. — these become the starting values everyone sees when they log in.</td>
 </tr>
 </table>
 </div>
<!-- ── Run History ─────────────────────────────── -->
 <div class="section-label">Run History Tab</div>
<div class="card">
 <p style="font-size:14px; color:#a0aec0;">
 Shows all your previous pipeline runs — company, use case, model, data size, stage reached, and outcome.
 Clicking a row shows the full stage-by-stage log for that run.
 Admin users see runs across all users with filtering by email.
 </p>
 </div>
<!-- ── Tips ───────────────────────────────────── -->
 <div class="section-label">Tips</div>
<div class="card">
 <ul class="tips">
 <li><strong>Liveboard Name blank</strong> — auto-derives from the company URL (strips TLD, capitalizes). You can always rename in ThoughtSpot after the run.</li>
 <li><strong>Small vs Medium</strong> — start with Small for testing or when speed matters. Use Medium when you want richer data: 10k rows produce better trend lines, more meaningful KPIs, and more varied chart distributions.</li>
 <li><strong>Geo Scope</strong> — use International when the prospect is a global company; USA Only for US-focused demos or when you want cleaner geographic data.</li>
 <li><strong>Tag Name</strong> — great for keeping demo objects organized. All created objects (model + liveboard) get the tag automatically. Useful when running multiple demos on the same cluster.</li>
 <li><strong>Data Adjuster</strong> — paste any existing liveboard URL into the Chat tab prompt to skip the build pipeline and go straight to adjusting data values for an existing demo.</li>
 <li><strong>Default Run Inputs</strong> — in Settings, enable this to have the app pre-fill your favorite vertical/use case combination at every page load. Saves clicks when you run the same demo type repeatedly.</li>
 </ul>
 </div>
<!-- ── Troubleshooting ─────────────────────────── -->
 <div class="section-label">Troubleshooting</div>
<div class="card">
 <table>
 <tr><th style="width:260px;">Problem</th><th>What to try</th></tr>
 <tr>
 <td>Pipeline hangs at ThoughtSpot</td>
 <td>Check the Deploy Log in the AI Feedback tab. MCP has a 5-minute timeout and will fail gracefully — the pipeline will report the error and stop.</td>
 </tr>
 <tr>
 <td>Liveboard has no data or wrong data</td>
 <td>Verify the TS Environment dropdown matches where you expected the data to land. Each environment is its own Snowflake + ThoughtSpot pair.</td>
 </tr>
 <tr>
 <td>"Auth key not set" error</td>
 <td>Select a TS environment from the dropdown before hitting GO. The pipeline requires an environment selection — it will not run without one.</td>
 </tr>
 <tr>
 <td>Login issues</td>
 <td>Use the direct URL <code>https://thoughtspot-dp-demoprep.hf.space</code> — the HuggingFace wrapper URL blocks auth cookies.</td>
 </tr>
 <tr>
 <td>Data generation timed out</td>
 <td>Try switching to Small data size. Medium runs (~10k rows) can take 20–30 minutes for data generation.</td>
 </tr>
 <tr>
 <td>Insert errors in Data stage</td>
 <td>Usually a schema type mismatch. Try running again — the AI regenerates the DDL on retry and typically resolves the conflict.</td>
 </tr>
 </table>
 </div>
<div class="footer">
 DemoPrep &nbsp;·&nbsp;
 <a href="https://thoughtspot-dp-demoprep.hf.space" target="_blank">App</a> &nbsp;·&nbsp;
 <a href="https://huggingface.co/spaces/boone-ts/demoprep_doc" target="_blank">This Guide</a>
 &nbsp;·&nbsp; Last updated April 30, 2026
 </div>
</div>
</body>
</html>