{\rtf1\ansi\ansicpg1252\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red70\green137\blue204;\red23\green24\blue24;\red140\green211\blue254;
\red202\green202\blue202;\red109\green109\blue109;\red194\green126\blue101;\red109\green115\blue120;\red212\green212\blue212;
\red113\green192\blue131;\red167\green197\blue152;\red183\green111\blue247;\red246\green124\blue48;\red54\green192\blue160;
}
{\*\expandedcolortbl;;\cssrgb\c33725\c61176\c83922;\cssrgb\c11765\c12157\c12549;\cssrgb\c61176\c86275\c99608;
\cssrgb\c83137\c83137\c83137;\cssrgb\c50196\c50196\c50196;\cssrgb\c80784\c56863\c47059;\cssrgb\c50196\c52549\c54510;\cssrgb\c86275\c86275\c86275;
\cssrgb\c50588\c78824\c58431;\cssrgb\c70980\c80784\c65882;\cssrgb\c77255\c54118\c97647;\cssrgb\c98039\c56471\c24314;\cssrgb\c23922\c78824\c69020;
}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 <!DOCTYPE\cf4 \strokec4  html\cf2 \strokec2 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 <\cf2 \strokec2 html\cf5 \strokec5  \cf4 \strokec4 lang\cf6 \strokec6 =\cf7 \strokec7 "en"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "scroll-smooth"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 charset\cf6 \strokec6 =\cf7 \strokec7 "UTF-8"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 name\cf6 \strokec6 =\cf7 \strokec7 "viewport"\cf5 \strokec5  \cf4 \strokec4 content\cf6 \strokec6 =\cf7 \strokec7 "width=device-width, initial-scale=1.0"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \strokec5 Interactive Brief: MetadataHub + Wasabi for AI\cf6 \strokec6 </\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 "https://cdn.tailwindcss.com"\cf6 \strokec6 ></\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 "https://cdn.jsdelivr.net/npm/chart.js"\cf6 \strokec6 ></\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "preconnect"\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://fonts.googleapis.com"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "preconnect"\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://fonts.gstatic.com"\cf5 \strokec5  \cf4 \strokec4 crossorigin\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "stylesheet"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf8 \strokec8 <!-- Chosen Palette: Cloud Intelligence -->\cf5 \cb1 \strokec5 \
\cb3     \cf8 \strokec8 <!-- Application Structure Plan: The SPA uses a thematic, scrolling narrative structure. It guides the user through a journey: 1) Hero section to grab attention, 2) An illustrative Problem section, 3) An interactive multi-step Solution Flow diagram, and 4) An interactive Impact Dashboard with animated charts. This structure was chosen to transform a static document into a guided, engaging story, making the solution and its benefits more memorable and easier to understand than a simple text page. -->\cf5 \cb1 \strokec5 \
\cb3     \cf8 \strokec8 <!-- Visualization & Content Choices: \cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf8 \cb3 \strokec8         - The Challenge: Presented with a simple visual metaphor (a locked box) to make the concept of 'locked data' tangible.\cf5 \cb1 \strokec5 \
\cf8 \cb3 \strokec8         - The Solution: An interactive 6-step flow diagram built with HTML/Tailwind. Goal: Organize & Inform. Interaction: User clicks a step to reveal detailed text below, keeping the UI clean. Method: Vanilla JS.\cf5 \cb1 \strokec5 \
\cf8 \cb3 \strokec8         - Business Impact: Presented as an interactive dashboard. Goal: Inform & Compare with quantified data.\cf5 \cb1 \strokec5 \
\cf8 \cb3 \strokec8             - 'Time Saved' -> Chart.js Doughnut Chart (Gauge). An animated gauge is perfect for visualizing a percentage.\cf5 \cb1 \strokec5 \
\cf8 \cb3 \strokec8             - 'AI Accuracy' -> Chart.js Bar Chart. A bar chart provides a clear, direct comparison.\cf5 \cb1 \strokec5 \
\cf8 \cb3 \strokec8         - All interactions are designed to be triggered on scroll to create a dynamic "wow" factor as the user explores. -->\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3     \cf8 \strokec8 <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 body\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 font-family:\cf5 \strokec5  \cf10 \strokec10 'Inter'\cf9 \strokec9 ,\cf5 \strokec5  \cf7 \strokec7 sans-serif\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #f8fafc\cf9 \strokec9 ;\cf5 \strokec5  \cf8 \strokec8 /* slate-50 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 color:\cf5 \strokec5  #1e293b\cf9 \strokec9 ;\cf5 \strokec5  \cf8 \strokec8 /* slate-800 */\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .chart-container\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 position:\cf5 \strokec5  \cf7 \strokec7 relative\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 width:\cf5 \strokec5  \cf11 \strokec11 100%\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 max-width:\cf5 \strokec5  \cf11 \strokec11 400px\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 margin-left:\cf5 \strokec5  \cf7 \strokec7 auto\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 margin-right:\cf5 \strokec5  \cf7 \strokec7 auto\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 height:\cf5 \strokec5  \cf11 \strokec11 250px\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 max-height:\cf5 \strokec5  \cf11 \strokec11 300px\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         @\cf2 \strokec2 media\cf5 \strokec5  (\cf2 \strokec2 min-width:\cf5 \strokec5  768\cf2 \strokec2 px\cf5 \strokec5 ) \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             .chart-container \{\cb1 \
\cb3                 \cf4 \strokec4 height:\cf5 \strokec5  \cf11 \strokec11 300px\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         \}\cb1 \
\cb3         \cf2 \strokec2 .flow-step-active\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-color:\cf5 \strokec5  #0ea5e9 \cf12 \strokec12 !important\cf9 \strokec9 ;\cf5 \strokec5  \cf8 \strokec8 /* sky-500 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #f0f9ff \cf12 \strokec12 !important\cf9 \strokec9 ;\cf5 \strokec5  \cf8 \strokec8 /* sky-50 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 translateY(\cf11 \strokec11 -4px\cf7 \strokec7 )\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 box-shadow:\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 10px\cf5 \strokec5  \cf11 \strokec11 15px\cf5 \strokec5  \cf11 \strokec11 -3px\cf5 \strokec5  \cf7 \strokec7 rgb(\cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf9 \strokec9 /\cf5 \strokec5  \cf11 \strokec11 0.1\cf7 \strokec7 )\cf9 \strokec9 ,\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 4px\cf5 \strokec5  \cf11 \strokec11 6px\cf5 \strokec5  \cf11 \strokec11 -4px\cf5 \strokec5  \cf7 \strokec7 rgb(\cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf11 \strokec11 0\cf5 \strokec5  \cf9 \strokec9 /\cf5 \strokec5  \cf11 \strokec11 0.1\cf7 \strokec7 )\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 body\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "antialiased"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\pard\pardeftab720\partightenfactor0
\cf5 \cb3     \cf8 \strokec8 <!-- Hero Section -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 section\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "min-h-screen flex flex-col items-center justify-center text-center p-6 bg-slate-100"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-4xl"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h1\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-4xl md:text-6xl font-bold text-slate-900"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 Unlock the AI Potential of Your Data in \cb1 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 span\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-sky-600"\cf6 \strokec6 >\cf5 \strokec5 Wasabi Hot Cloud Storage\cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 h1\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-6 text-lg md:text-xl text-slate-600 max-w-3xl mx-auto"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 This interactive brief explores how MetadataHub transforms your dormant Wasabi archive into a high-quality, queryable asset for next-generation AI applications.\cb1 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-12 text-slate-500 animate-bounce"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 svg\cf5 \strokec5  \cf4 \strokec4 xmlns\cf6 \strokec6 =\cf7 \strokec7 "http://www.w3.org/2000/svg"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "h-8 w-8 mx-auto"\cf5 \strokec5  \cf4 \strokec4 fill\cf6 \strokec6 =\cf7 \strokec7 "none"\cf5 \strokec5  \cf4 \strokec4 viewBox\cf6 \strokec6 =\cf7 \strokec7 "0 0 24 24"\cf5 \strokec5  \cf4 \strokec4 stroke\cf6 \strokec6 =\cf7 \strokec7 "currentColor"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 path\cf5 \strokec5  \cf4 \strokec4 stroke-linecap\cf6 \strokec6 =\cf7 \strokec7 "round"\cf5 \strokec5  \cf4 \strokec4 stroke-linejoin\cf6 \strokec6 =\cf7 \strokec7 "round"\cf5 \strokec5  \cf4 \strokec4 stroke-width\cf6 \strokec6 =\cf7 \strokec7 "2"\cf5 \strokec5  \cf4 \strokec4 d\cf6 \strokec6 =\cf7 \strokec7 "M19 14l-7 7m0 0l-7-7m7 7V3"\cf5 \strokec5  \cf6 \strokec6 />\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 svg\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 section\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 <!-- The Challenge Section -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 section\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "py-20 px-6 bg-white"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-5xl mx-auto text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl md:text-4xl font-bold text-slate-900"\cf6 \strokec6 >\cf5 \strokec5 The Challenge: A Locked Asset in the Cloud\cf6 \strokec6 </\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-12 grid md:grid-cols-2 gap-12 items-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "p-8 border-2 border-dashed border-slate-300 rounded-2xl text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-6xl mb-4"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u55357 \u56550 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-2xl font-semibold text-slate-800"\cf6 \strokec6 >\cf5 \strokec5 Dormant Data Archive\cf6 \strokec6 </\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-slate-600 mt-2"\cf6 \strokec6 >\cf5 \strokec5 Your Wasabi storage is cost-effective, but the valuable unstructured data within often sits unused and inaccessible to AI.\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-left"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                      \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg text-slate-600 leading-relaxed"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         Organizations successfully store massive amounts of data in Wasabi, but it remains a valuable yet untapped resource. Without the right tools, turning this archive into fuel for generative AI is a major hurdle. This leads to stalled projects and unreliable AI outcomes built on incomplete, poor-quality data. The potential remains locked away.\cb1 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 section\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 <!-- The Solution Flow Section -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 section\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "solution-flow"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "py-20 px-6 bg-slate-50"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-6xl mx-auto"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl md:text-4xl font-bold text-slate-900 text-center"\cf6 \strokec6 >\cf5 \strokec5 The MetadataHub Flow: Activating Your Archive\cf6 \strokec6 </\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-center text-lg text-slate-600 mt-4 max-w-3xl mx-auto"\cf6 \strokec6 >\cf5 \strokec5 Follow the journey from raw data in Wasabi to intelligent AI applications. Click each step to learn more.\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "flow-steps-container"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 <!-- Steps will be injected by JS -->\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "flow-details"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-12 bg-white p-8 rounded-2xl shadow-lg min-h-[200px] transition-opacity duration-500"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "flow-detail-title"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-2xl font-bold text-sky-600"\cf6 \strokec6 ></\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "flow-detail-description"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-slate-600 mt-4 text-lg"\cf6 \strokec6 ></\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 section\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 <!-- The Business Impact Section -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 section\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "business-impact"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "py-20 px-6 bg-white"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-6xl mx-auto"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl md:text-4xl font-bold text-slate-900 text-center"\cf6 \strokec6 >\cf5 \strokec5 The Business Impact: A Clear ROI\cf6 \strokec6 </\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-center text-lg text-slate-600 mt-4 max-w-3xl mx-auto"\cf6 \strokec6 >\cf5 \strokec5 The joint solution delivers quantifiable returns by improving accuracy, accelerating timelines, and maximizing the value of your Wasabi data.\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-16 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-slate-50 p-6 rounded-2xl text-center shadow-md"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-xl font-semibold text-slate-800"\cf6 \strokec6 >\cf5 \strokec5 Accelerate Timelines\cf6 \strokec6 </\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-sm text-slate-500 mb-4"\cf6 \strokec6 >\cf5 \strokec5 Cut Data Prep Time\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "chart-container"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 <\cf2 \strokec2 canvas\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "timeSavedChart"\cf6 \strokec6 ></\cf2 \strokec2 canvas\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-slate-50 p-6 rounded-2xl text-center shadow-md"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-xl font-semibold text-slate-800"\cf6 \strokec6 >\cf5 \strokec5 Improve AI Accuracy\cf6 \strokec6 </\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-sm text-slate-500 mb-4"\cf6 \strokec6 >\cf5 \strokec5 Model Reliability with Quality Data\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "chart-container"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 <\cf2 \strokec2 canvas\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "accuracyChart"\cf6 \strokec6 ></\cf2 \strokec2 canvas\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-slate-50 p-6 rounded-2xl text-center shadow-md"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-xl font-semibold text-slate-800"\cf6 \strokec6 >\cf5 \strokec5 Maximize Storage ROI\cf6 \strokec6 </\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-sm text-slate-500 mb-4"\cf6 \strokec6 >\cf5 \strokec5 Turn Your Archive into an Active Asset\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "flex items-center justify-center h-full min-h-[250px] md:min-h-[300px]"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                          \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 span\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-7xl font-bold text-sky-600"\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "roi-counter"\cf6 \strokec6 >\cf5 \strokec5 0\cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 ><\cf2 \strokec2 span\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-5xl font-bold text-sky-600"\cf6 \strokec6 >\cf5 \strokec5 %\cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-2 text-slate-600"\cf6 \strokec6 >\cf5 \strokec5 Value Unlocked\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                  \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-slate-50 p-6 rounded-2xl text-center shadow-md"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-xl font-semibold text-slate-800"\cf6 \strokec6 >\cf5 \strokec5 Enable Compliant AI\cf6 \strokec6 </\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-sm text-slate-500 mb-4"\cf6 \strokec6 >\cf5 \strokec5 Traceable, Auditable, and Trustworthy\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                      \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "flex items-center justify-center h-full min-h-[250px] md:min-h-[300px]"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-5xl text-green-500"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \strokec5 \uc0\u10003 \cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 span\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "opacity-0 transition-opacity duration-500 delay-200"\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "check2"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u10003 \cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 span\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "opacity-0 transition-opacity duration-500 delay-500"\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "check3"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u10003 \cf6 \strokec6 </\cf2 \strokec2 span\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg text-slate-600 mt-4"\cf6 \strokec6 >\cf5 \strokec5 Full Data Lineage\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 section\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 <!-- CTA Section -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 section\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "py-20 px-6 bg-slate-800 text-white"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-4xl mx-auto text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl md:text-4xl font-bold"\cf6 \strokec6 >\cf5 \strokec5 Ready to Activate Your Data?\cf6 \strokec6 </\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-4 text-lg text-slate-300"\cf6 \strokec6 >\cf5 \strokec5 Stop letting your data sit idle. The joint MetadataHub and Wasabi solution turns your cloud archive into high-quality fuel for your next generation of applications.\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-8 bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-transform transform hover:scale-105"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 Request a Demo\cb1 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 section\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 <\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3 document\cf9 \strokec9 .\cf5 \strokec5 addEventListener\cf9 \strokec9 (\cf10 \strokec10 'DOMContentLoaded'\cf9 \strokec9 ,\cf5 \strokec5  \cf9 \strokec9 ()\cf5 \strokec5  \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 // --- Solution Flow Logic ---\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 const\cf5 \strokec5  flowData \cf9 \strokec9 =\cf5 \strokec5  \cf9 \strokec9 [\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 1\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u9729 \u65039 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'Wasabi Data'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'The process starts with your unstructured files\'97documents, images, audio, scientific data\'97stored securely and cost-effectively in Wasabi Hot Cloud Storage.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 2\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u9881 \u65039 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'MetadataHub'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'MetadataHub connects directly to your Wasabi buckets. It deeply processes each file, extracting not just content but also critical context, embedded metadata, and unique identifiers.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 3\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u55357 \u56516 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'Structured Output'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'The key step: MdH transforms chaotic data into clean, structured JSON, CSV, or Parquet records. This high-quality output is enriched and instantly ready for the next stage.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 4\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u55358 \u56800 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'Embedding Engine'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'The structured text is fed into an embedding model (like OpenAI or Hugging Face), which converts the text into numerical vector representations.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 5\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u55357 \u56772 \u65039 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'Vector Database'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'These vectors are loaded into a specialized database (e.g., Pinecone, Qdrant) optimized for ultra-fast similarity search at scale.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \{\cf5 \strokec5  \cb1 \
\cb3             id\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 6\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             icon\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '\uc0\u55357 \u56960 '\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             title\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'AI Applications'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             description\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'Your AI applications, such as RAG, Semantic Search, or other knowledge retrieval systems, can now query the vector database to find the most relevant information instantly.'\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 ];\cf5 \cb1 \strokec5 \
\
\cb3     \cf12 \strokec12 const\cf5 \strokec5  stepsContainer \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'flow-steps-container'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 const\cf5 \strokec5  detailTitle \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'flow-detail-title'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 const\cf5 \strokec5  detailDescription \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'flow-detail-description'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\
\cb3     flowData\cf9 \strokec9 .\cf5 \strokec5 forEach\cf9 \strokec9 (\cf5 \strokec5 step \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  stepEl \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 createElement\cf9 \strokec9 (\cf10 \strokec10 'div'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         stepEl\cf9 \strokec9 .\cf5 \strokec5 className \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 'flow-step p-4 border-2 border-slate-300 rounded-lg cursor-pointer transition-all duration-300 hover:bg-slate-100'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         stepEl\cf9 \strokec9 .\cf5 \strokec5 dataset\cf9 \strokec9 .\cf5 \strokec5 id \cf9 \strokec9 =\cf5 \strokec5  step\cf9 \strokec9 .\cf5 \strokec5 id\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         stepEl\cf9 \strokec9 .\cf5 \strokec5 innerHTML \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 `\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10             <div class="text-4xl">\cf9 \strokec9 $\{\cf5 \strokec5 step\cf9 \strokec9 .\cf5 \strokec5 icon\cf9 \strokec9 \}\cf10 \strokec10 </div>\cf5 \cb1 \strokec5 \
\cf10 \cb3 \strokec10             <p class="mt-2 font-semibold text-slate-700">\cf9 \strokec9 $\{\cf5 \strokec5 step\cf9 \strokec9 .\cf5 \strokec5 title\cf9 \strokec9 \}\cf10 \strokec10 </p>\cf5 \cb1 \strokec5 \
\cf10 \cb3 \strokec10         `\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3         stepsContainer\cf9 \strokec9 .\cf5 \strokec5 appendChild\cf9 \strokec9 (\cf5 \strokec5 stepEl\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\
\cb3     \cf12 \strokec12 const\cf5 \strokec5  flowSteps \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 querySelectorAll\cf9 \strokec9 (\cf10 \strokec10 '.flow-step'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\
\cb3     \cf12 \strokec12 function\cf5 \strokec5  updateFlowDetails\cf9 \strokec9 (\cf5 \strokec5 id\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  stepData \cf9 \strokec9 =\cf5 \strokec5  flowData\cf9 \strokec9 .\cf5 \strokec5 find\cf9 \strokec9 (\cf5 \strokec5 s \cf9 \strokec9 =>\cf5 \strokec5  s\cf9 \strokec9 .\cf5 \strokec5 id \cf9 \strokec9 ==\cf5 \strokec5  id\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 stepData\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             detailTitle\cf9 \strokec9 .\cf5 \strokec5 textContent \cf9 \strokec9 =\cf5 \strokec5  stepData\cf9 \strokec9 .\cf5 \strokec5 title\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             detailDescription\cf9 \strokec9 .\cf5 \strokec5 textContent \cf9 \strokec9 =\cf5 \strokec5  stepData\cf9 \strokec9 .\cf5 \strokec5 description\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         flowSteps\cf9 \strokec9 .\cf5 \strokec5 forEach\cf9 \strokec9 (\cf5 \strokec5 step \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 step\cf9 \strokec9 .\cf5 \strokec5 dataset\cf9 \strokec9 .\cf5 \strokec5 id \cf9 \strokec9 ==\cf5 \strokec5  id\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 step\cf9 \strokec9 .\cf5 \strokec5 classList\cf9 \strokec9 .\cf5 \strokec5 add\cf9 \strokec9 (\cf10 \strokec10 'flow-step-active'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \strokec5  \cf12 \strokec12 else\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 step\cf9 \strokec9 .\cf5 \strokec5 classList\cf9 \strokec9 .\cf5 \strokec5 remove\cf9 \strokec9 (\cf10 \strokec10 'flow-step-active'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\
\cb3     stepsContainer\cf9 \strokec9 .\cf5 \strokec5 addEventListener\cf9 \strokec9 (\cf10 \strokec10 'click'\cf9 \strokec9 ,\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 e\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  stepEl \cf9 \strokec9 =\cf5 \strokec5  e\cf9 \strokec9 .\cf5 \strokec5 target\cf9 \strokec9 .\cf5 \strokec5 closest\cf9 \strokec9 (\cf10 \strokec10 '.flow-step'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 stepEl\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             updateFlowDetails\cf9 \strokec9 (\cf5 \strokec5 stepEl\cf9 \strokec9 .\cf5 \strokec5 dataset\cf9 \strokec9 .\cf5 \strokec5 id\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\
\cb3     updateFlowDetails\cf9 \strokec9 (\cf13 \strokec13 1\cf9 \strokec9 );\cf5 \strokec5  \cf8 \strokec8 // Initialize with the first step\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 // --- Intersection Observer for Animations ---\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 let\cf5 \strokec5  timeSavedChart\cf9 \strokec9 ,\cf5 \strokec5  accuracyChart\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 const\cf5 \strokec5  impactSection \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'business-impact'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\
\cb3     \cf12 \strokec12 const\cf5 \strokec5  observer \cf9 \strokec9 =\cf5 \strokec5  \cf12 \strokec12 new\cf5 \strokec5  \cf14 \strokec14 IntersectionObserver\cf9 \strokec9 ((\cf5 \strokec5 entries\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         entries\cf9 \strokec9 .\cf5 \strokec5 forEach\cf9 \strokec9 (\cf5 \strokec5 entry \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 entry\cf9 \strokec9 .\cf5 \strokec5 isIntersecting\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (!\cf5 \strokec5 timeSavedChart\cf9 \strokec9 )\cf5 \strokec5  createTimeSavedChart\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (!\cf5 \strokec5 accuracyChart\cf9 \strokec9 )\cf5 \strokec5  createAccuracyChart\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                 animateRoiCounter\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                 animateChecks\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                 observer\cf9 \strokec9 .\cf5 \strokec5 unobserve\cf9 \strokec9 (\cf5 \strokec5 entry\cf9 \strokec9 .\cf5 \strokec5 target\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \},\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  threshold\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 0.4\cf5 \strokec5  \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\
\cb3     observer\cf9 \strokec9 .\cf5 \strokec5 observe\cf9 \strokec9 (\cf5 \strokec5 impactSection\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\
\cb3     \cf8 \strokec8 // --- Chart.js Logic ---\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 function\cf5 \strokec5  createTimeSavedChart\cf9 \strokec9 ()\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  ctx \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'timeSavedChart'\cf9 \strokec9 ).\cf5 \strokec5 getContext\cf9 \strokec9 (\cf10 \strokec10 '2d'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         timeSavedChart \cf9 \strokec9 =\cf5 \strokec5  \cf12 \strokec12 new\cf5 \strokec5  \cf14 \strokec14 Chart\cf9 \strokec9 (\cf5 \strokec5 ctx\cf9 \strokec9 ,\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             type\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'doughnut'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             data\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 labels\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf10 \strokec10 'Time Saved'\cf9 \strokec9 ,\cf5 \strokec5  \cf10 \strokec10 'Time Spent'\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                 datasets\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\{\cf5 \cb1 \strokec5 \
\cb3                     data\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf13 \strokec13 90\cf9 \strokec9 ,\cf5 \strokec5  \cf13 \strokec13 10\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                     backgroundColor\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf10 \strokec10 '#0ea5e9'\cf9 \strokec9 ,\cf5 \strokec5  \cf10 \strokec10 '#e2e8f0'\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                     borderColor\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf10 \strokec10 '#0ea5e9'\cf9 \strokec9 ,\cf5 \strokec5  \cf10 \strokec10 '#e2e8f0'\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                     borderWidth\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 1\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                     circumference\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 180\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                     rotation\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 270\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \}]\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3             options\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 responsive\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 true\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 maintainAspectRatio\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 plugins\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                     legend\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  display\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf5 \strokec5  \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3                     tooltip\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  enabled\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf5 \strokec5  \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3                 cutout\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 '70%'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3             plugins\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\{\cf5 \cb1 \strokec5 \
\cb3                 id\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'doughnutLabel'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 beforeDraw\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 chart\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  width\cf9 \strokec9 ,\cf5 \strokec5  height\cf9 \strokec9 ,\cf5 \strokec5  ctx \cf9 \strokec9 \}\cf5 \strokec5  \cf9 \strokec9 =\cf5 \strokec5  chart\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 save\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  text \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 '90%'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 font \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 'bold 3rem Inter'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 textAlign \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 'center'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 textBaseline \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 'middle'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 fillStyle \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 '#1e293b'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 fillText\cf9 \strokec9 (\cf5 \strokec5 text\cf9 \strokec9 ,\cf5 \strokec5  width \cf9 \strokec9 /\cf5 \strokec5  \cf13 \strokec13 2\cf9 \strokec9 ,\cf5 \strokec5  height \cf9 \strokec9 -\cf5 \strokec5  \cf13 \strokec13 20\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3                     ctx\cf9 \strokec9 .\cf5 \strokec5 restore\cf9 \strokec9 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}]\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\
\cb3     \cf12 \strokec12 function\cf5 \strokec5  createAccuracyChart\cf9 \strokec9 ()\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  ctx \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'accuracyChart'\cf9 \strokec9 ).\cf5 \strokec5 getContext\cf9 \strokec9 (\cf10 \strokec10 '2d'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         accuracyChart \cf9 \strokec9 =\cf5 \strokec5  \cf12 \strokec12 new\cf5 \strokec5  \cf14 \strokec14 Chart\cf9 \strokec9 (\cf5 \strokec5 ctx\cf9 \strokec9 ,\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             type\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'bar'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3             data\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 labels\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf10 \strokec10 'Without MdH'\cf9 \strokec9 ,\cf5 \strokec5  \cf10 \strokec10 'With MdH'\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                 datasets\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\{\cf5 \cb1 \strokec5 \
\cb3                     label\cf9 \strokec9 :\cf5 \strokec5  \cf10 \strokec10 'AI Model Accuracy'\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                     data\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf13 \strokec13 55\cf9 \strokec9 ,\cf5 \strokec5  \cf13 \strokec13 95\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                     backgroundColor\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 [\cf10 \strokec10 '#f87171'\cf9 \strokec9 ,\cf5 \strokec5  \cf10 \strokec10 '#4ade80'\cf9 \strokec9 ],\cf5 \cb1 \strokec5 \
\cb3                     borderRadius\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 6\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \}]\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3             options\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 responsive\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 true\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 maintainAspectRatio\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                 scales\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                     y\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                         beginAtZero\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 true\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                         max\cf9 \strokec9 :\cf5 \strokec5  \cf13 \strokec13 100\cf9 \strokec9 ,\cf5 \cb1 \strokec5 \
\cb3                         ticks\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                             callback\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 function\cf9 \strokec9 (\cf5 \strokec5 value\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                                 \cf12 \strokec12 return\cf5 \strokec5  value \cf9 \strokec9 +\cf5 \strokec5  \cf10 \strokec10 '%'\cf5 \cb1 \strokec5 \
\cb3                             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                         \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                     \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3                     x\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                         grid\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  display\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf5 \strokec5  \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \},\cf5 \cb1 \strokec5 \
\cb3                 plugins\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                     legend\cf9 \strokec9 :\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \strokec5  display\cf9 \strokec9 :\cf5 \strokec5  \cf12 \strokec12 false\cf5 \strokec5  \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \});\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3     \cb1 \
\cb3     \cf8 \strokec8 // --- Counter and Checkmark Animations ---\cf5 \cb1 \strokec5 \
\cb3     \cf12 \strokec12 function\cf5 \strokec5  animateRoiCounter\cf9 \strokec9 ()\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  counter \cf9 \strokec9 =\cf5 \strokec5  document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'roi-counter'\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  target \cf9 \strokec9 =\cf5 \strokec5  \cf13 \strokec13 100\cf9 \strokec9 ;\cf5 \strokec5  \cf8 \strokec8 // Animate to 100% to show full value unlocked\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 let\cf5 \strokec5  current \cf9 \strokec9 =\cf5 \strokec5  \cf13 \strokec13 0\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  increment \cf9 \strokec9 =\cf5 \strokec5  target \cf9 \strokec9 /\cf5 \strokec5  \cf13 \strokec13 100\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 const\cf5 \strokec5  timer \cf9 \strokec9 =\cf5 \strokec5  setInterval\cf9 \strokec9 (()\cf5 \strokec5  \cf9 \strokec9 =>\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3             current \cf9 \strokec9 +=\cf5 \strokec5  increment\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 if\cf5 \strokec5  \cf9 \strokec9 (\cf5 \strokec5 current \cf9 \strokec9 >=\cf5 \strokec5  target\cf9 \strokec9 )\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3                 current \cf9 \strokec9 =\cf5 \strokec5  target\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3                 clearInterval\cf9 \strokec9 (\cf5 \strokec5 timer\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3             counter\cf9 \strokec9 .\cf5 \strokec5 innerText \cf9 \strokec9 =\cf5 \strokec5  \cf14 \strokec14 Math\cf9 \strokec9 .\cf5 \strokec5 ceil\cf9 \strokec9 (\cf5 \strokec5 current\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3         \cf9 \strokec9 \},\cf5 \strokec5  \cf13 \strokec13 20\cf9 \strokec9 );\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\cb3     \cb1 \
\cb3     \cf12 \strokec12 function\cf5 \strokec5  animateChecks\cf9 \strokec9 ()\cf5 \strokec5  \cf9 \strokec9 \{\cf5 \cb1 \strokec5 \
\cb3         document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'check2'\cf9 \strokec9 ).\cf5 \strokec5 style\cf9 \strokec9 .\cf5 \strokec5 opacity \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 '1'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3         document\cf9 \strokec9 .\cf5 \strokec5 getElementById\cf9 \strokec9 (\cf10 \strokec10 'check3'\cf9 \strokec9 ).\cf5 \strokec5 style\cf9 \strokec9 .\cf5 \strokec5 opacity \cf9 \strokec9 =\cf5 \strokec5  \cf10 \strokec10 '1'\cf9 \strokec9 ;\cf5 \cb1 \strokec5 \
\cb3     \cf9 \strokec9 \}\cf5 \cb1 \strokec5 \
\
\pard\pardeftab720\partightenfactor0
\cf9 \cb3 \strokec9 \});\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cf6 \cb3 \strokec6 </\cf2 \strokec2 body\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf2 \strokec2 html\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
}