Created
January 9, 2026 14:02
-
-
Save shukla2112/b4f8816c5bb260f0c7fe2019a2ab4afd to your computer and use it in GitHub Desktop.
knowledge-interviewer.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Knowledge Seeder - Demo Presentation</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .slide { display: none; min-height: 100vh; } | |
| .slide.active { display: flex; } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .flow-arrow { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .code-block { | |
| background: #1e293b; | |
| border-radius: 8px; | |
| padding: 16px; | |
| font-family: 'Monaco', 'Menlo', monospace; | |
| font-size: 14px; | |
| color: #e2e8f0; | |
| overflow-x: auto; | |
| } | |
| .highlight { color: #22d3ee; } | |
| .keyword { color: #f472b6; } | |
| .string { color: #a3e635; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Slide 1: Title --> | |
| <div class="slide active flex-col items-center justify-center p-8" id="slide-1"> | |
| <div class="max-w-4xl text-center"> | |
| <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl mx-auto mb-8 flex items-center justify-center shadow-2xl"> | |
| <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| </div> | |
| <h1 class="text-6xl font-bold mb-6 gradient-text">Knowledge Seeder</h1> | |
| <p class="text-2xl text-gray-400 mb-12">Intelligent Business Knowledge Capture for PromptQL</p> | |
| <div class="flex justify-center gap-4 text-sm text-gray-500"> | |
| <span class="px-4 py-2 bg-gray-800 rounded-full">Dynamic Questions</span> | |
| <span class="px-4 py-2 bg-gray-800 rounded-full">Metadata-Aware</span> | |
| <span class="px-4 py-2 bg-gray-800 rounded-full">Wiki Export</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2: The Problem --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-2"> | |
| <div class="max-w-5xl"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">The Problem</h2> | |
| <div class="grid grid-cols-2 gap-12"> | |
| <div class="bg-gray-800 rounded-2xl p-8"> | |
| <div class="text-red-400 text-6xl mb-4">?</div> | |
| <h3 class="text-2xl font-semibold mb-4">Rich Data, No Context</h3> | |
| <p class="text-gray-400">Data warehouses have tables and fields, but PromptQL needs to understand:</p> | |
| <ul class="mt-4 space-y-2 text-gray-300"> | |
| <li class="flex items-center gap-2"><span class="text-red-400">-</span> What is a "lost customer"?</li> | |
| <li class="flex items-center gap-2"><span class="text-red-400">-</span> How is margin calculated?</li> | |
| <li class="flex items-center gap-2"><span class="text-red-400">-</span> When does fiscal year start?</li> | |
| <li class="flex items-center gap-2"><span class="text-red-400">-</span> What KPIs matter most?</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl p-8"> | |
| <div class="text-yellow-400 text-6xl mb-4">!</div> | |
| <h3 class="text-2xl font-semibold mb-4">Static Questionnaires Fail</h3> | |
| <p class="text-gray-400">Generic question templates don't work because:</p> | |
| <ul class="mt-4 space-y-2 text-gray-300"> | |
| <li class="flex items-center gap-2"><span class="text-yellow-400">-</span> Every business is different</li> | |
| <li class="flex items-center gap-2"><span class="text-yellow-400">-</span> Data models vary widely</li> | |
| <li class="flex items-center gap-2"><span class="text-yellow-400">-</span> Priorities change</li> | |
| <li class="flex items-center gap-2"><span class="text-yellow-400">-</span> Context is lost</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: The Solution --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-3"> | |
| <div class="max-w-5xl"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">The Solution: <span class="gradient-text">Dynamic Generation</span></h2> | |
| <div class="relative"> | |
| <!-- Flow diagram --> | |
| <div class="flex items-center justify-between"> | |
| <!-- Discovery --> | |
| <div class="bg-blue-900/50 border border-blue-500 rounded-xl p-6 w-64"> | |
| <div class="text-blue-400 text-sm font-semibold mb-2">PHASE 1</div> | |
| <h3 class="text-xl font-bold mb-2">Discovery</h3> | |
| <p class="text-gray-400 text-sm">User answers 8 questions about priorities, pain points, urgency</p> | |
| </div> | |
| <div class="flow-arrow text-4xl text-gray-600">→</div> | |
| <!-- Analysis --> | |
| <div class="bg-purple-900/50 border border-purple-500 rounded-xl p-6 w-64"> | |
| <div class="text-purple-400 text-sm font-semibold mb-2">PHASE 2</div> | |
| <h3 class="text-xl font-bold mb-2">Analysis</h3> | |
| <p class="text-gray-400 text-sm">System reads metadata HML files and maps to user needs</p> | |
| </div> | |
| <div class="flow-arrow text-4xl text-gray-600">→</div> | |
| <!-- Generation --> | |
| <div class="bg-green-900/50 border border-green-500 rounded-xl p-6 w-64"> | |
| <div class="text-green-400 text-sm font-semibold mb-2">PHASE 3</div> | |
| <h3 class="text-xl font-bold mb-2">Generation</h3> | |
| <p class="text-gray-400 text-sm">Contextual questions generated referencing actual fields</p> | |
| </div> | |
| </div> | |
| <!-- Metadata boxes below --> | |
| <div class="mt-12 grid grid-cols-4 gap-4"> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center"> | |
| <div class="text-cyan-400 text-sm font-mono">dim_customer</div> | |
| <div class="text-xs text-gray-500 mt-1">customer_group, division</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center"> | |
| <div class="text-cyan-400 text-sm font-mono">so_line</div> | |
| <div class="text-xs text-gray-500 mt-1">unit_price, qty_ordered</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center"> | |
| <div class="text-cyan-400 text-sm font-mono">sales_budget</div> | |
| <div class="text-xs text-gray-500 mt-1">net_sales, volume</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center"> | |
| <div class="text-cyan-400 text-sm font-mono">inventory_current</div> | |
| <div class="text-xs text-gray-500 mt-1">days_on_hand, aging</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Discovery Flow --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-4"> | |
| <div class="max-w-4xl w-full"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">Phase 1: <span class="gradient-text">Discovery</span></h2> | |
| <div class="bg-gray-800 rounded-2xl p-8 mb-8"> | |
| <div class="text-pink-400 text-sm font-semibold mb-2">Question 1 of 8</div> | |
| <h3 class="text-2xl font-bold mb-4">What are the top 3 business outcomes you want to achieve?</h3> | |
| <div class="bg-gray-900 rounded-xl p-4 text-gray-300 italic"> | |
| "Reduce customer churn, improve margin visibility by product, track sales vs budget by division" | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl p-8 mb-8"> | |
| <div class="text-pink-400 text-sm font-semibold mb-2">Question 2 of 8</div> | |
| <h3 class="text-2xl font-bold mb-4">What are your biggest pain points?</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-4 py-2 bg-blue-600 rounded-full text-sm">Can't drill down to root causes</span> | |
| <span class="px-4 py-2 bg-blue-600 rounded-full text-sm">Missing key metrics</span> | |
| <span class="px-4 py-2 bg-gray-700 rounded-full text-sm">Takes too long</span> | |
| <span class="px-4 py-2 bg-blue-600 rounded-full text-sm">Hard to compare periods</span> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-500"> | |
| <p>These answers drive which categories and questions appear next...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Metadata Mapping --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-5"> | |
| <div class="max-w-5xl w-full"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">Phase 2: <span class="gradient-text">Metadata Analysis</span></h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-300">User Said: <span class="text-blue-400">"customer churn"</span></h3> | |
| <div class="code-block"> | |
| <div class="text-gray-500"># From dim_customer.hml</div> | |
| <div><span class="keyword">fields:</span></div> | |
| <div class="pl-4">- <span class="highlight">customer_code</span></div> | |
| <div class="pl-4">- <span class="highlight">customer_group</span></div> | |
| <div class="pl-4">- customer_type_code</div> | |
| <div class="pl-4">- <span class="highlight">active</span></div> | |
| <div class="mt-4 text-gray-500"># From so_line.hml</div> | |
| <div><span class="keyword">fields:</span></div> | |
| <div class="pl-4">- <span class="highlight">order_entry_date_key</span></div> | |
| <div class="pl-4">- <span class="highlight">extended_usd_price</span></div> | |
| </div> | |
| <div class="mt-4 p-4 bg-green-900/30 border border-green-500 rounded-lg"> | |
| <div class="text-green-400 font-semibold">Generated Category:</div> | |
| <div class="text-white">Customer Lifecycle (8 questions)</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-300">User Said: <span class="text-blue-400">"margin visibility"</span></h3> | |
| <div class="code-block"> | |
| <div class="text-gray-500"># From so_invoice_line patterns</div> | |
| <div><span class="keyword">fields:</span></div> | |
| <div class="pl-4">- <span class="highlight">net_sales</span></div> | |
| <div class="pl-4">- <span class="highlight">tpm</span> (throughput margin)</div> | |
| <div class="pl-4">- <span class="highlight">extended_material_cost</span></div> | |
| <div class="pl-4">- <span class="highlight">rebates</span></div> | |
| <div class="mt-4 text-gray-500"># From dim_item.hml</div> | |
| <div><span class="keyword">fields:</span></div> | |
| <div class="pl-4">- <span class="highlight">product_category_code</span></div> | |
| <div class="pl-4">- item_sales_class_desc</div> | |
| </div> | |
| <div class="mt-4 p-4 bg-green-900/30 border border-green-500 rounded-lg"> | |
| <div class="text-green-400 font-semibold">Generated Category:</div> | |
| <div class="text-white">Profitability Analysis (8 questions)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Generated Question Example --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-6"> | |
| <div class="max-w-4xl w-full"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">Phase 3: <span class="gradient-text">Contextual Questions</span></h2> | |
| <div class="bg-gray-800 rounded-2xl p-8"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-purple-600 rounded-full text-sm">Customer Lifecycle</span> | |
| <span class="text-gray-500">Question generated from metadata</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">How do you define a "Lost Customer"?</h3> | |
| <div class="mb-6"> | |
| <div class="text-gray-400 text-sm mb-2">Related Data Fields:</div> | |
| <div class="flex gap-2 flex-wrap"> | |
| <span class="px-3 py-1 bg-gray-700 rounded font-mono text-sm text-cyan-400">dim_customer.customer_code</span> | |
| <span class="px-3 py-1 bg-gray-700 rounded font-mono text-sm text-cyan-400">so_line.order_entry_date_key</span> | |
| <span class="px-3 py-1 bg-gray-700 rounded font-mono text-sm text-cyan-400">dim_date.fiscal_year</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="text-gray-400 text-sm mb-2">Choose your answer format:</div> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm">Description</button> | |
| <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm">Pseudo Code</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm">Exact Code</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm">Steps</button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-4"> | |
| <div class="text-gray-500 text-sm mb-2">Example Answer (Pseudo Code):</div> | |
| <div class="font-mono text-green-400"> | |
| IF gross_sales_prior_year > 0 AND gross_sales_current_year = 0<br/> | |
| THEN customer_status = "Lost" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 7: Answer Formats --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-7"> | |
| <div class="max-w-5xl w-full"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">Answer Format <span class="gradient-text">Flexibility</span></h2> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-blue-400 font-semibold mb-2">Description</div> | |
| <p class="text-gray-400 text-sm mb-4">Natural language explanation</p> | |
| <div class="bg-gray-900 rounded-lg p-4 text-sm"> | |
| "A lost customer is any customer who placed orders in the previous fiscal year but has not placed any orders in the current fiscal year." | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-purple-400 font-semibold mb-2">Pseudo Code</div> | |
| <p class="text-gray-400 text-sm mb-4">Logic in readable format</p> | |
| <div class="bg-gray-900 rounded-lg p-4 text-sm font-mono text-green-400"> | |
| IF orders_last_year > 0<br/> | |
| AND orders_this_year = 0<br/> | |
| THEN mark as "Lost" | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-cyan-400 font-semibold mb-2">Exact Code</div> | |
| <p class="text-gray-400 text-sm mb-4">SQL or formula syntax</p> | |
| <div class="bg-gray-900 rounded-lg p-4 text-sm font-mono text-yellow-400"> | |
| WHERE gross_sales_ly > 0<br/> | |
| AND gross_sales_cy = 0 | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-pink-400 font-semibold mb-2">Steps</div> | |
| <p class="text-gray-400 text-sm mb-4">Step-by-step process</p> | |
| <div class="bg-gray-900 rounded-lg p-4 text-sm"> | |
| 1. Get all customers with LY sales<br/> | |
| 2. Check if CY sales = 0<br/> | |
| 3. Flag as "Lost Customer" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 8: Output --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-8"> | |
| <div class="max-w-4xl w-full"> | |
| <h2 class="text-4xl font-bold mb-12 text-center">Output: <span class="gradient-text">Wiki Pages</span></h2> | |
| <div class="code-block text-sm"> | |
| <div><span class="keyword">kind:</span> <span class="string">WikiPage</span></div> | |
| <div><span class="keyword">version:</span> <span class="string">v1</span></div> | |
| <div><span class="keyword">definition:</span></div> | |
| <div class="pl-4"><span class="keyword">title:</span> <span class="string">lost customer</span></div> | |
| <div class="pl-4"><span class="keyword">body:</span> |</div> | |
| <div class="pl-6 text-gray-300">A **lost customer** is defined as a customer who had</div> | |
| <div class="pl-6 text-gray-300">orders in the prior fiscal year but has zero orders</div> | |
| <div class="pl-6 text-gray-300">in the current fiscal year.</div> | |
| <div class="pl-6 text-gray-300"></div> | |
| <div class="pl-6 text-gray-300">## Definition Logic</div> | |
| <div class="pl-6 text-yellow-400">```sql</div> | |
| <div class="pl-6 text-yellow-400">WHERE gross_sales_prior_year > 0</div> | |
| <div class="pl-6 text-yellow-400"> AND gross_sales_current_year = 0</div> | |
| <div class="pl-6 text-yellow-400">```</div> | |
| <div class="pl-6 text-gray-300"></div> | |
| <div class="pl-6 text-gray-300">## Related Concepts</div> | |
| <div class="pl-6 text-cyan-400">- [New Customer](wiki://<new customer>)</div> | |
| <div class="pl-6 text-cyan-400">- [Customer Churn Rate](wiki://<churn rate>)</div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-400">These wiki pages power PromptQL query planning</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 9: Summary --> | |
| <div class="slide flex-col items-center justify-center p-8" id="slide-9"> | |
| <div class="max-w-4xl text-center"> | |
| <h2 class="text-4xl font-bold mb-12">Why <span class="gradient-text">Knowledge Seeder</span>?</h2> | |
| <div class="grid grid-cols-3 gap-8 mb-12"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-4xl mb-4">🎯</div> | |
| <h3 class="text-xl font-semibold mb-2">Contextual</h3> | |
| <p class="text-gray-400 text-sm">Questions adapt to user priorities and available data</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-4xl mb-4">📊</div> | |
| <h3 class="text-xl font-semibold mb-2">Metadata-Aware</h3> | |
| <p class="text-gray-400 text-sm">References actual tables and fields from HML files</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="text-4xl mb-4">⚡</div> | |
| <h3 class="text-xl font-semibold mb-2">Flexible</h3> | |
| <p class="text-gray-400 text-sm">Answer in description, pseudo-code, SQL, or steps</p> | |
| </div> | |
| </div> | |
| <a href="http://localhost:5173" target="_blank" class="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"> | |
| Try Live Demo | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="fixed bottom-8 left-1/2 transform -translate-x-1/2 flex items-center gap-4 bg-gray-800 rounded-full px-6 py-3"> | |
| <button onclick="prevSlide()" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> | |
| </svg> | |
| </button> | |
| <div class="flex gap-2" id="dots"></div> | |
| <button onclick="nextSlide()" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <script> | |
| let currentSlide = 1; | |
| const totalSlides = 9; | |
| function showSlide(n) { | |
| const slides = document.querySelectorAll('.slide'); | |
| slides.forEach(s => s.classList.remove('active')); | |
| if (n > totalSlides) currentSlide = 1; | |
| if (n < 1) currentSlide = totalSlides; | |
| document.getElementById(`slide-${currentSlide}`).classList.add('active'); | |
| updateDots(); | |
| } | |
| function nextSlide() { | |
| currentSlide++; | |
| showSlide(currentSlide); | |
| } | |
| function prevSlide() { | |
| currentSlide--; | |
| showSlide(currentSlide); | |
| } | |
| function goToSlide(n) { | |
| currentSlide = n; | |
| showSlide(currentSlide); | |
| } | |
| function updateDots() { | |
| const dotsContainer = document.getElementById('dots'); | |
| dotsContainer.innerHTML = ''; | |
| for (let i = 1; i <= totalSlides; i++) { | |
| const dot = document.createElement('button'); | |
| dot.className = `w-2 h-2 rounded-full transition-colors ${i === currentSlide ? 'bg-white' : 'bg-gray-600'}`; | |
| dot.onclick = () => goToSlide(i); | |
| dotsContainer.appendChild(dot); | |
| } | |
| } | |
| // Keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight' || e.key === ' ') nextSlide(); | |
| if (e.key === 'ArrowLeft') prevSlide(); | |
| }); | |
| // Initialize | |
| updateDots(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment