Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agentic AI in Data Catalog System</title> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Mermaid.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> | |
| <script> | |
| mermaid.initialize({ | |
| startOnLoad: true, | |
| theme: 'dark', | |
| securityLevel: 'loose', | |
| flowchart: { | |
| useMaxWidth: true, | |
| htmlLabels: true, | |
| curve: 'basis' | |
| }, | |
| themeVariables: { | |
| primaryColor: '#06b6d4', | |
| primaryTextColor: '#fff', | |
| primaryBorderColor: '#06b6d4', | |
| lineColor: '#d946ef', | |
| secondaryColor: '#1e293b', | |
| tertiaryColor: '#0f172a' | |
| } | |
| }); | |
| </script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="presentation-container"> | |
| <!-- Background Decor --> | |
| <div class="bg-blobs"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <!-- Slide Counter --> | |
| <div class="slide-counter" id="slideCounter"> | |
| 01 / 21 | |
| </div> | |
| <!-- Navigation --> | |
| <div class="nav-controls"> | |
| <button class="nav-btn" id="prevBtn" aria-label="Previous"> | |
| <i data-lucide="chevron-left"></i> | |
| </button> | |
| <button class="nav-btn" id="nextBtn" aria-label="Next"> | |
| <i data-lucide="chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="slides-wrapper" id="slidesWrapper"> | |
| <!-- SLIDE 1: Title --> | |
| <section class="slide active" data-slide="1"> | |
| <div class="slide-content"> | |
| <div class="badge"><i data-lucide="sparkles"></i> The Next Evolution</div> | |
| <!-- <h1 class="gradient-text">DataNexus:<br>Agentic AI Assistant</h1> --> | |
| <h1 class="gradient-text">Agentic AI <br> in Data Catalog System</h1> | |
| <p class="subtitle">Revolutionizing Data Discovery, Lineage, and Governance through intelligent agent orchestration.</p> | |
| </div> | |
| </section> | |
| <!-- SLIDE 2: Overview --> | |
| <section class="slide" data-slide="2"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">What is a Data Catalog?</h2> | |
| <p class="subtitle" style="max-width: 1000px; margin-bottom: 2.5rem;"> | |
| A <strong>Data Catalog System</strong> is a modern platform that gives organizations complete visibility into their interconnected data ecosystem. It enables businesses to integrate data from multiple sources | |
| <span style="color: var(--primary); font-weight: 600;">(MySQL, MSSQL, Snowflake, Redshift)</span> | |
| and provides a visual interface to explore, track, and ensure data accuracy through lineage, alerts, and notifications. | |
| </p> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="search"></i></div> | |
| <h3>Discovery</h3> | |
| <p>Global asset searching across multi-cloud environments.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="git-branch"></i></div> | |
| <h3>Lineage</h3> | |
| <p>Deep-hop dependency tracking and impact analysis.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="activity"></i></div> | |
| <h3>Health</h3> | |
| <p>Real-time data quality scores and freshness alerts.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 3: System Structure --> | |
| <section class="slide" data-slide="3"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The Building Blocks</h2> | |
| <p class="subtitle">Understanding the core structure of our data ecosystem.</p> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="box"></i></div> | |
| <h3>Data Assets</h3> | |
| <p>The individual "objects" in your catalog. <br><br><strong>Examples:</strong> <br>• Tables & Columns <br>• Databases <br>• Pipelines & Jobs <br>• Dashboards & Reports</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="network"></i></div> | |
| <h3>Lineage</h3> | |
| <p>The "Family Tree" of your data. It maps the flow from the <strong>Source</strong> to the <strong>Destination</strong>, showing exactly how datasets are connected and transformed.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="database"></i></div> | |
| <h3>Metadata</h3> | |
| <p>The "Identity Card" for every asset. It stores who owns the data, its current quality score, business tags, and technical schema details.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 4: AI Features --> | |
| <section class="slide" data-slide="4"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Introducing AI Features</h2> | |
| <p class="subtitle">A comprehensive toolkit for autonomous data intelligence.</p> | |
| <div class="grid-cards stagger-in" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem;"> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="users"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Multi-Agent System</h3> | |
| <p style="font-size: 0.8rem;">Coordinated specialist network.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="brain"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Smart Query Understanding</h3> | |
| <p style="font-size: 0.8rem;">Deep intent & semantic parsing.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="help-circle"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Clarification Handling</h3> | |
| <p style="font-size: 0.8rem;">Resolving ambiguity via dialogue.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="repeat"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Multi-Step Reasoning</h3> | |
| <p style="font-size: 0.8rem;">Autonomous ReAct Loop.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="layers"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Parallel Agent Execution</h3> | |
| <p style="font-size: 0.8rem;">Multithreaded task fulfillment.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="history"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Memory & Context</h3> | |
| <p style="font-size: 0.8rem;">Long-term conversation history.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="briefcase"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Workspace Awareness</h3> | |
| <p style="font-size: 0.8rem;">Deep metadata & schema insight.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="filter"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Hybrid Search</h3> | |
| <p style="font-size: 0.8rem;">Vector + Semantic + Structured.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="target"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Decision Making</h3> | |
| <p style="font-size: 0.8rem;">Autonomous path selection.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="gantt-chart"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Task Decomposition</h3> | |
| <p style="font-size: 0.8rem;">Breaking down complex goals.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem;"> | |
| <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="coins"></i></div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Token Tracking</h3> | |
| <p style="font-size: 0.8rem;">Transparent usage monitoring.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);"> | |
| <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Write / Action Capability</h3> | |
| <p style="font-size: 0.8rem;">Direct metadata modifications.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);"> | |
| <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Permission Control</h3> | |
| <p style="font-size: 0.8rem;">Role-based governance.</p> | |
| </div> | |
| <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);"> | |
| <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div> | |
| <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Confirmation Flow</h3> | |
| <p style="font-size: 0.8rem;">Human-in-the-loop validation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 5: Current AI Approaches --> | |
| <section class="slide" data-slide="5"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">How AI is Built Today</h2> | |
| <p class="subtitle">Why most companies get stuck with basic tools that don't work for real business.</p> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="message-square"></i></div> | |
| <h3>Basic Chatbots</h3> | |
| <p>Easy to build, but they often "make up" wrong answers because they don't really know your company's data.</p> | |
| </div> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="git-branch"></i></div> | |
| <h3>Simple Search (RAG)</h3> | |
| <p>Good for basic questions, but it fails when you ask something slightly complex or when your data changes.</p> | |
| </div> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="alert-octagon"></i></div> | |
| <h3>The Big Problem</h3> | |
| <p><strong>Too Rigid:</strong> These tools break easily. <br><strong>No Thinking:</strong> They can't fix their own mistakes or ask you for help.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 6: What is Agentic AI? --> | |
| <section class="slide" data-slide="6"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">What is Agentic AI?</h2> | |
| <p class="subtitle">The shift from "Static Retrieval" to "Dynamic Reasoning".</p> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="brain-cog"></i></div> | |
| <h3>Cognitive Agency</h3> | |
| <p>An AI that can "think" through a problem, decide which tools to use, and verify results.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="git-merge"></i></div> | |
| <h3>The Basic Flow</h3> | |
| <p>1. <strong>Plan:</strong> Decompose Query<br>2. <strong>Act:</strong> Use Expert Tools<br>3. <strong>Refine:</strong> Self-Correct</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="workflow"></i></div> | |
| <h3>Stateful Logic</h3> | |
| <p>Maintains memory throughout the loop to ensure no detail is missed during discovery.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 7: Why Agentic AI? --> | |
| <section class="slide" data-slide="7"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Why Agentic AI?</h2> | |
| <p class="subtitle">Moving beyond traditional RAG limitations.</p> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="brain-circuit"></i></div> | |
| <h3>Multi-step Reasoning</h3> | |
| <p>Decomposes "impossible" questions into logical steps.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="help-circle"></i></div> | |
| <h3>Human Clarification</h3> | |
| <p>Asks for missing details instead of hallucinating.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="shield-check"></i></div> | |
| <h3>Verification</h3> | |
| <p>Agents cross-check results before returning to user.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 8: Old Approach Architecture --> | |
| <section class="slide diagram-slide" data-slide="8"> | |
| <div class="slide-content"> | |
| <div class="badge">Architecture: Legacy</div> | |
| <h2 class="gradient-text">The Old RAG Pipeline</h2> | |
| <p class="subtitle">A linear, one-shot retrieval flow.</p> | |
| <div class="flow-container stagger-in"> | |
| <div class="flow-node"> | |
| <i data-lucide="search"></i> | |
| <h4>Retrieve</h4> | |
| <p>Vector Search</p> | |
| </div> | |
| <div class="flow-connector"></div> | |
| <div class="flow-node"> | |
| <i data-lucide="filter"></i> | |
| <h4>Rank</h4> | |
| <p>Generic Filter</p> | |
| </div> | |
| <div class="flow-connector"></div> | |
| <div class="flow-node"> | |
| <i data-lucide="help-circle"></i> | |
| <h4>Guess</h4> | |
| <p>Direct Prompt</p> | |
| </div> | |
| <div class="flow-connector"></div> | |
| <div class="flow-node" style="border-color: var(--danger);"> | |
| <i data-lucide="x-circle" style="color: var(--danger);"></i> | |
| <h4>Output</h4> | |
| <p>Static Answer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 9: Old Approach Flow --> | |
| <section class="slide" data-slide="9"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The Linear Flow</h2> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <h3>1. Retrieve</h3> | |
| <p>Vector search finds chunks in workspace JSON.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>2. Rerank</h3> | |
| <p>Cross-encoder filters for high similarity.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>3. Classify</h3> | |
| <p>Hardcoded routing to Mongo or Python paths.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>4. Synthesize</h3> | |
| <p>LLM summarizes the final context once.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 10: Limitations --> | |
| <section class="slide" data-slide="10"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Legacy Bottlenecks</h2> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="alert-triangle"></i></div> | |
| <h3>Zero Recovery</h3> | |
| <p>If retrieval fails at step 1, the whole answer fails.</p> | |
| </div> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="eye-off"></i></div> | |
| <h3>Context Blindness</h3> | |
| <p>Cannot handle complex dependencies across sections.</p> | |
| </div> | |
| <div class="feature-card" style="border-top: 4px solid var(--secondary);"> | |
| <div class="icon-box" style="color: var(--secondary);"><i data-lucide="user-x"></i></div> | |
| <h3>Passive</h3> | |
| <p>Guesses intent rather than clarifying with the user.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 11: Agentic AI Architecture --> | |
| <section class="slide diagram-slide" data-slide="11"> | |
| <div class="slide-content"> | |
| <div class="badge">Architecture: Modern</div> | |
| <h2 class="gradient-text">The Agentic Graph</h2> | |
| <p class="subtitle">Dynamic, stateful, and autonomous execution.</p> | |
| <div class="hub-spoke-container stagger-in"> | |
| <!-- Central Hub --> | |
| <div class="center-hub"> | |
| <i data-lucide="cpu" style="font-size: 3rem; margin-bottom: 0.5rem;"></i> | |
| <h3 style="color: #fff; font-size: 1.2rem;">Orchestrator</h3> | |
| <p style="font-size: 0.7rem; color: var(--primary);">Brain of the System</p> | |
| </div> | |
| <!-- Spoke Nodes --> | |
| <div class="spoke-node" style="top: 10%; left: 20%;"> | |
| <i data-lucide="message-circle"></i> | |
| <p>Clarification</p> | |
| </div> | |
| <div class="spoke-node" style="top: 10%; right: 20%;"> | |
| <i data-lucide="search"></i> | |
| <p>Query SME</p> | |
| </div> | |
| <div class="spoke-node" style="bottom: 10%; left: 20%;"> | |
| <i data-lucide="bar-chart"></i> | |
| <p>Analytics SME</p> | |
| </div> | |
| <div class="spoke-node" style="bottom: 10%; right: 20%;"> | |
| <i data-lucide="share-2"></i> | |
| <p>Lineage SME</p> | |
| </div> | |
| <div class="spoke-node" style="right: 5%; top: 50%; transform: translateY(-50%);"> | |
| <i data-lucide="heart-pulse"></i> | |
| <p>Health SME</p> | |
| </div> | |
| <!-- Reasoning Loop Indicator --> | |
| <div style="position: absolute; width: 350px; height: 350px; border: 2px dashed rgba(6, 182, 212, 0.2); border-radius: 50%; animation: spin 20s linear infinite;"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 12: Agents in System --> | |
| <section class="slide" data-slide="12"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Agent Ecosystem</h2> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="cpu"></i></div> | |
| <h3>Orchestrator</h3> | |
| <p>The routing brain.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="helping-hand"></i></div> | |
| <h3>Clarification</h3> | |
| <p>The gap-filler.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="shield"></i></div> | |
| <h3>Specialists</h3> | |
| <p>The domain experts.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="zap"></i></div> | |
| <h3>Action</h3> | |
| <p>The active executor.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 13: Orchestrator Agent --> | |
| <section class="slide" data-slide="13"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The Orchestrator</h2> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <h3>Context Injection</h3> | |
| <p>Enriches query with history and database metadata.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Intent Routing</h3> | |
| <p>Classifies if the task is Read, Write, or Ambiguous.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Task Splitting</h3> | |
| <p>Parallelizes work across multi-threading specialists.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 14: Clarification Agent --> | |
| <section class="slide" data-slide="14"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The Clarification Agent</h2> | |
| <p class="subtitle">Guaranteed 100% precision through dialogue.</p> | |
| <div class="feature-card" style="border-left: 6px solid var(--accent); background: rgba(245, 158, 11, 0.05);"> | |
| <div class="grid-cards" style="margin-top:0;"> | |
| <div> | |
| <h3>Ambiguity Scoring</h3> | |
| <p>If confidence < 0.5, it halts execution.</p> | |
| </div> | |
| <div> | |
| <h3>User Engagement</h3> | |
| <p>Asks for specific time-ranges, asset names, or columns.</p> | |
| </div> | |
| </div> | |
| <div class="query-example" style="border-left-color: var(--accent);"> | |
| <span class="query-label">Dialogue Preview</span> | |
| <strong>User:</strong> "Find the Sales table."<br> | |
| <strong>Agent:</strong> "I found 3 tables related to 'Sales' which are named as 'marketing', 'sales_category1', 'sales_category2'. Which one should I analyze?" | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 15: Specialists --> | |
| <section class="slide" data-slide="15"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Specialist Agents</h2> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="database"></i></div> | |
| <h3>Query SME</h3> | |
| <p>Factual lookup & Mongo query generation.</p> | |
| <div class="query-example"> | |
| <span class="query-label">Example Query</span> | |
| "List all columns in 'Users' with PII tags." | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="bar-chart-2"></i></div> | |
| <h3>Analytics SME</h3> | |
| <p>Complex aggregations & success rate math.</p> | |
| <div class="query-example"> | |
| <span class="query-label">Example Query</span> | |
| "How many jobs failed in 'ETL_Main' today?" | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="network"></i></div> | |
| <h3>Lineage SME</h3> | |
| <p>Traverses upstream/downstream flows.</p> | |
| <div class="query-example"> | |
| <span class="query-label">Example Query</span> | |
| "Show downstream reports for 'Order_Header'." | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="heart-pulse"></i></div> | |
| <h3>Health SME</h3> | |
| <p>Calculates freshness & quality scores.</p> | |
| <div class="query-example"> | |
| <span class="query-label">Example Query</span> | |
| "Is the 'Inventory' AWS Bucket stale?" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 16: Action Agent --> | |
| <section class="slide" data-slide="16"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The Action Agent</h2> | |
| <div class="badge" style="color: var(--secondary); border-color: var(--secondary);">Dev-Stage: In Progress</div> | |
| <div class="grid-cards stagger-in"> | |
| <div class="feature-card"> | |
| <h3>Active Modification</h3> | |
| <p>Updating descriptions and tags via AI.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Security First</h3> | |
| <p>Permission checks and Human-in-the-Loop confirms.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <h3>Audit Log</h3> | |
| <p>Who, What, When tracking for all write actions.</p> | |
| </div> | |
| </div> | |
| <div class="query-example" style="border-left-color: var(--secondary); margin-top: 2rem;"> | |
| <span class="query-label">Action Request</span> | |
| <strong>User:</strong> "Set the owner of 'Payment_Gateway' to 'DevOps-Team'."<br> | |
| <strong>System:</strong> "Permission verified. Requesting human confirmation..." | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 17: ReAct Loop --> | |
| <section class="slide" data-slide="17"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">The ReAct Tool Loop</h2> | |
| <p class="subtitle">The agents' inner monologue.</p> | |
| <div class="feature-card"> | |
| <div class="grid-cards" style="margin-top:0; text-align: center;"> | |
| <div> | |
| <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="info"></i></div> | |
| <h3>Reason</h3> | |
| </div> | |
| <div> | |
| <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="hammer"></i></div> | |
| <h3>Act</h3> | |
| </div> | |
| <div> | |
| <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="scan-face"></i></div> | |
| <h3>Observe</h3> | |
| </div> | |
| </div> | |
| <p style="margin-top: 2rem; text-align: center; color: var(--text-muted);">Iterates up to 5 times to refine and verify facts.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 18: Comparison: Old vs New --> | |
| <section class="slide" data-slide="18"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Comparison: Old vs New</h2> | |
| <div class="comparison-container"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Feature</th> | |
| <th>Old RAG</th> | |
| <th>Agentic Assistant</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Logic Pattern</td> | |
| <td>Static / Linear</td> | |
| <td>Dynamic / Graph-based</td> | |
| </tr> | |
| <tr> | |
| <td>Multiple Tasks</td> | |
| <td>Fail / Sequential</td> | |
| <td>Parallel Specialist Dispatch</td> | |
| </tr> | |
| <tr> | |
| <td>Gap Resolution</td> | |
| <td>Hallucinates</td> | |
| <td>Clarification Agent Enquiry</td> | |
| </tr> | |
| <tr> | |
| <td>Consistency</td> | |
| <td>Hit-or-Miss</td> | |
| <td>High (via ReAct verification)</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 19: Query Performance Comparison --> | |
| <section class="slide" data-slide="19"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Performance: Query Benchmarks</h2> | |
| <p class="subtitle">Direct comparison across different query complexities.</p> | |
| <div class="comparison-container"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Query Type</th> | |
| <th>Old RAG Approach</th> | |
| <th>Agentic AI Approach</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Basic Discovery</strong><br><small>"Find sales table"</small></td> | |
| <td><span style="color: var(--danger);">✘</span> Often Guesses Wrong</td> | |
| <td><span style="color: var(--success);">✔</span> Precise (via Clarification)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Multi-step Logic</strong><br><small>"Find 'Users' in Prod vs Dev"</small></td> | |
| <td><span style="color: var(--danger);">✘</span> Context Overflow</td> | |
| <td><span style="color: var(--success);">✔</span> Parallel SME Dispatch</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Data Analytics</strong><br><small>"Success rate of Job X?"</small></td> | |
| <td><span style="color: var(--danger);">✘</span> Information Unavailable</td> | |
| <td><span style="color: var(--success);">✔</span> Real-time Calculation</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Impact Analysis</strong><br><small>"Downstream of Column Y"</small></td> | |
| <td><span style="color: var(--danger);">✘</span> 50% Failure Rate</td> | |
| <td><span style="color: var(--success);">✔</span> Deep-hop Lineage Trace</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 20: Why Agentic > Simple Chat --> | |
| <section class="slide" data-slide="20"> | |
| <div class="slide-content"> | |
| <h2 class="gradient-text">Agentic Choice: Beyond the ChatBot</h2> | |
| <p class="subtitle">Why industrial data catalogs need "Agency," not just conversation.</p> | |
| <div class="grid-cards stagger-in" style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="brain-circuit"></i></div> | |
| <h3>From Answering to Solving</h3> | |
| <p>A standard chatbot only predicts text. Our Agentic AI **decomposes complex goals** into logical steps to solve multi-hop data problems autonomously.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="wrench"></i></div> | |
| <h3>Active Tool Integration</h3> | |
| <p>Instead of hallucinating facts, agents actively **execute specialized tools** (SQL, Python, Mongo) to fetch real-time, verified metadata.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="users-2"></i></div> | |
| <h3>Specialized Expert Swarms</h3> | |
| <p>A simple bot is a generalist. We use **SME Agents** (Lineage, Analytics, Health) that act as individual domain experts for 100% technical accuracy.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="navigation"></i></div> | |
| <h3>Autonomous Path Selection</h3> | |
| <p>Chatbots hit a dead-end if a query is ambiguous. Our system **self-corrects and pivots** to find alternative discovery paths or asks the user for missing info.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="shield-check"></i></div> | |
| <h3>Self-Verifying Logic</h3> | |
| <p>The **ReAct Loop** forces the AI to check its own work. If the observation doesn't match the plan, the agent refuses to guess and restarts the logic trail.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i data-lucide="git-pull-request"></i></div> | |
| <h3>Enterprise Context Awareness</h3> | |
| <p>Seamlessly integrates with **Workspace Metadata** and RBAC, ensuring that AI responses are contextually grounded in your specific industrial environment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SLIDE 21: Closing --> | |
| <section class="slide" data-slide="21"> | |
| <div class="slide-content"> | |
| <h1 class="gradient-text">The Future is Agentic.</h1> | |
| <!-- <p class="subtitle">Beyond Conversation. Toward Autonomous Data Intelligence.</p> --> | |
| <!-- <div class="badge" style="margin-top: 3rem;"><i data-lucide="mail"></i> Contact: Team DataNexus AI</div> --> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="keyboard-hints"> | |
| <span>← → to navigate | SPACE to jump</span> | |
| </div> | |
| </div> | |
| <!-- Lucide Init --> | |
| <script> | |
| lucide.createIcons(); | |
| </script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |