Spaces:

lablab-ai-amd-developer-hackathon
/

SKT-OM

Sleeping

App Files Files Community

SKT-OM / skt_om_plugins.html

Shrijanagain

Update skt_om_plugins.html

6b9078f verified 2 months ago

Raw

History Blame Contribute Delete

107 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SKT-OM \| 13B Agentic RAG System + 73+ Plugin Ecosystem</title>
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
	<style>
	:root {
	--space-black: #050508;
	--neon-blue: #00f0ff;
	--neon-purple: #bc13fe;
	--neon-pink: #ff006e;
	--neon-green: #39ff14;
	--neon-orange: #ff9f1c;
	--neon-cyan: #00d4ff;
	--star-white: #e2e8f0;
	--glass-bg: rgba(15, 23, 42, 0.7);
	--glass-border: rgba(0, 240, 255, 0.2);
	}
	* { margin: 0; padding: 0; box-sizing: border-box; }
	body {
	background: linear-gradient(135deg, #050508 0%, #0a0e27 50%, #050508 100%);
	color: var(--star-white);
	font-family: 'Inter', sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
	}
	.particles {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	}
	.particle {
	position: absolute;
	width: 2px; height: 2px;
	background: var(--neon-blue);
	border-radius: 50%;
	opacity: 0.3;
	animation: float 15s infinite;
	}
	@keyframes float {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
	25% { transform: translateY(-100px) translateX(50px); opacity: 0.6; }
	50% { transform: translateY(-200px) translateX(-30px); opacity: 0.3; }
	75% { transform: translateY(-100px) translateX(80px); opacity: 0.5; }
	}
	.header {
	text-align: center;
	padding: 60px 20px 40px;
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,240,255,0.08) 0%, transparent 100%);
	border-bottom: 1px solid var(--glass-border);
	}
	.header::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 600px; height: 300px;
	background: radial-gradient(ellipse, rgba(0,240,255,0.12) 0%, transparent 70%);
	filter: blur(60px);
	animation: breathe 4s ease-in-out infinite;
	z-index: -1;
	}
	@keyframes breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
	50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
	}
	.title {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: 6px;
	}
	.subtitle {
	font-family: 'Orbitron', sans-serif;
	font-size: 0.9rem;
	color: var(--neon-blue);
	letter-spacing: 10px;
	text-transform: uppercase;
	margin-top: 10px;
	}
	.tagline {
	color: rgba(226, 232, 240, 0.6);
	margin-top: 15px;
	font-size: 0.95rem;
	}
	.badges {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 25px;
	flex-wrap: wrap;
	}
	.badge {
	background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(188,19,254,0.15));
	border: 1px solid rgba(0,240,255,0.3);
	border-radius: 25px;
	padding: 6px 16px;
	font-size: 0.75rem;
	color: var(--neon-blue);
	font-weight: 600;
	backdrop-filter: blur(10px);
	}
	.badge-count {
	background: linear-gradient(135deg, rgba(255,0,110,0.2), rgba(188,19,254,0.2));
	border: 1px solid var(--neon-pink);
	color: var(--neon-pink);
	font-size: 1rem;
	padding: 8px 20px;
	}
	.url-section {
	padding: 30px 20px;
	text-align: center;
	position: relative;
	z-index: 1;
	}
	.url-section h2 {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin-bottom: 25px;
	}
	.url-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 15px;
	max-width: 1200px;
	margin: 0 auto;
	}
	.url-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 15px;
	padding: 20px;
	text-decoration: none;
	color: var(--star-white);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	overflow: hidden;
	}
	.url-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(188,19,254,0.1));
	opacity: 0;
	transition: opacity 0.3s;
	}
	.url-card:hover {
	transform: translateY(-3px);
	border-color: var(--neon-blue);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
	}
	.url-card:hover::before { opacity: 1; }
	.url-icon { font-size: 2rem; z-index: 1; }
	.url-info { text-align: left; z-index: 1; }
	.url-title {
	font-family: 'Orbitron', sans-serif;
	font-size: 0.85rem;
	color: var(--neon-blue);
	margin-bottom: 4px;
	}
	.url-desc {
	font-size: 0.75rem;
	color: rgba(226, 232, 240, 0.5);
	}
	.url-arrow {
	margin-left: auto;
	font-size: 1.2rem;
	color: var(--neon-purple);
	z-index: 1;
	}
	.stats-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 40px auto;
	padding: 0 20px;
	}
	.stat-item {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 15px;
	padding: 25px;
	text-align: center;
	transition: all 0.3s ease;
	}
	.stat-item:hover {
	transform: translateY(-3px);
	border-color: var(--neon-blue);
	}
	.stat-number {
	font-family: 'Orbitron', sans-serif;
	font-size: 2rem;
	font-weight: 900;
	background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}
	.stat-label {
	font-size: 0.8rem;
	color: rgba(226, 232, 240, 0.5);
	margin-top: 8px;
	}
	.how-it-works {
	padding: 60px 20px;
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	}
	.section-title {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.5rem;
	letter-spacing: 3px;
	text-align: center;
	margin-bottom: 50px;
	}
	.section-title span {
	background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	.section-subtitle {
	text-align: center;
	color: rgba(226, 232, 240, 0.5);
	font-size: 0.9rem;
	margin-bottom: 50px;
	}
	.step-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	}
	.step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 30px;
	align-items: start;
	opacity: 0;
	transform: translateY(30px);
	animation: stepIn 0.6s ease forwards;
	}
	.step:nth-child(1) { animation-delay: 0.1s; }
	.step:nth-child(2) { animation-delay: 0.2s; }
	.step:nth-child(3) { animation-delay: 0.3s; }
	.step:nth-child(4) { animation-delay: 0.4s; }
	.step:nth-child(5) { animation-delay: 0.5s; }
	.step:nth-child(6) { animation-delay: 0.6s; }
	.step:nth-child(7) { animation-delay: 0.7s; }
	@keyframes stepIn {
	to { opacity: 1; transform: translateY(0); }
	}
	.step-number {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(188,19,254,0.2));
	border: 2px solid var(--neon-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Orbitron', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--neon-blue);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	position: relative;
	}
	.step-number::after {
	content: '';
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 40px;
	background: linear-gradient(to bottom, var(--neon-blue), transparent);
	}
	.step:last-child .step-number::after { display: none; }
	.step-content {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 30px;
	backdrop-filter: blur(20px);
	transition: all 0.3s ease;
	}
	.step-content:hover {
	border-color: rgba(0, 240, 255, 0.4);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
	transform: translateX(5px);
	}
	.step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
	}
	.step-icon { font-size: 1.5rem; }
	.step-title {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.1rem;
	letter-spacing: 1px;
	}
	.step-desc {
	color: rgba(226, 232, 240, 0.7);
	font-size: 0.9rem;
	line-height: 1.8;
	margin-bottom: 20px;
	}
	.code-block {
	background: rgba(5, 5, 8, 0.95);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 12px;
	padding: 20px;
	font-family: 'Fira Code', monospace;
	font-size: 0.8rem;
	line-height: 1.8;
	color: rgba(226, 232, 240, 0.7);
	overflow-x: auto;
	}
	.code-block .comment { color: rgba(226, 232, 240, 0.4); }
	.code-block .keyword { color: var(--neon-purple); }
	.code-block .string { color: var(--neon-green); }
	.code-block .function { color: var(--neon-blue); }
	.code-block .variable { color: var(--neon-orange); }
	.flow-diagram {
	padding: 40px 20px;
	text-align: center;
	position: relative;
	z-index: 1;
	}
	.flow-diagram h2 {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.3rem;
	letter-spacing: 2px;
	margin-bottom: 40px;
	}
	.flow-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	max-width: 1000px;
	margin: 0 auto;
	}
	.flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	min-width: 140px;
	position: relative;
	}
	.flow-box {
	background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(188,19,254,0.15));
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 12px;
	padding: 12px 20px;
	font-family: 'Orbitron', sans-serif;
	font-size: 0.75rem;
	color: var(--neon-blue);
	text-align: center;
	transition: all 0.4s ease;
	animation: flowPulse 2s ease-in-out infinite;
	}
	@keyframes flowPulse {
	0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }
	50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.5); }
	}
	.flow-arrow {
	color: var(--neon-purple);
	font-size: 1.5rem;
	animation: arrowMove 1.5s ease-in-out infinite;
	}
	@keyframes arrowMove {
	0%, 100% { transform: translateX(0); opacity: 0.6; }
	50% { transform: translateX(8px); opacity: 1; }
	}
	.terminal-section {
	padding: 40px 20px;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	}
	.terminal-section h2 {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.3rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 30px;
	}
	.terminal {
	background: rgba(5, 5, 8, 0.95);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 15px;
	padding: 25px;
	font-family: 'Fira Code', monospace;
	font-size: 0.85rem;
	line-height: 1.8;
	color: rgba(226, 232, 240, 0.7);
	min-height: 300px;
	overflow-y: auto;
	}
	.terminal-line {
	opacity: 0;
	animation: typeIn 0.5s ease forwards;
	}
	@keyframes typeIn {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: translateX(0); }
	}
	.terminal .cmd { color: var(--neon-blue); }
	.terminal .info { color: var(--neon-cyan); }
	.terminal .success { color: var(--neon-green); }
	.terminal .warn { color: var(--neon-orange); }
	.terminal .error { color: var(--neon-pink); }
	.terminal .highlight { color: var(--neon-purple); }
	.cursor {
	display: inline-block;
	width: 8px;
	height: 16px;
	background: var(--neon-blue);
	animation: blink 1s infinite;
	vertical-align: middle;
	margin-left: 2px;
	}
	@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
	}
	.plugin-section {
	padding: 60px 20px;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	}
	.plugin-section h2 {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.5rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 15px;
	}
	.category-tabs {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
	}
	.category-tab {
	background: rgba(10, 15, 30, 0.6);
	border: 1px solid rgba(0, 240, 255, 0.1);
	border-radius: 25px;
	padding: 10px 20px;
	font-family: 'Orbitron', sans-serif;
	font-size: 0.75rem;
	color: rgba(226, 232, 240, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 1px;
	}
	.category-tab:hover, .category-tab.active {
	background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(188,19,254,0.2));
	color: var(--neon-blue);
	border-color: rgba(0, 240, 255, 0.3);
	}
	.plugin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	}
	.plugin-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 15px;
	padding: 25px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	animation: cardIn 0.5s ease forwards;
	}
	@keyframes cardIn {
	to { opacity: 1; transform: translateY(0); }
	}
	.plugin-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 3px;
	background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
	transform: scaleX(0);
	transition: transform 0.3s;
	}
	.plugin-card:hover::before { transform: scaleX(1); }
	.plugin-card:hover {
	transform: translateY(-5px);
	border-color: var(--neon-blue);
	box-shadow: 0 15px 40px rgba(0, 240, 255, 0.15);
	}
	.plugin-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
	}
	.plugin-icon {
	width: 45px;
	height: 45px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(188,19,254,0.2));
	border: 1px solid rgba(0, 240, 255, 0.2);
	}
	.plugin-name {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 0.9rem;
	letter-spacing: 1px;
	}
	.plugin-category {
	font-size: 0.7rem;
	color: rgba(226, 232, 240, 0.4);
	margin-top: 3px;
	}
	.plugin-desc {
	font-size: 0.8rem;
	color: rgba(226, 232, 240, 0.6);
	line-height: 1.6;
	margin-bottom: 15px;
	}
	.plugin-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	}
	.plugin-tag {
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 15px;
	padding: 3px 10px;
	font-size: 0.7rem;
	color: var(--neon-cyan);
	}
	.code-section {
	padding: 40px 20px;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	}
	.code-title {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.2rem;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 30px;
	}
	.footer {
	text-align: center;
	padding: 50px 20px;
	margin-top: 50px;
	border-top: 1px solid rgba(0, 240, 255, 0.1);
	position: relative;
	z-index: 1;
	}
	.footer-title {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-blue);
	font-size: 1.3rem;
	margin-bottom: 12px;
	}
	.footer-links {
	display: flex;
	justify-content: center;
	gap: 25px;
	flex-wrap: wrap;
	margin-top: 20px;
	}
	.footer-link {
	color: rgba(226, 232, 240, 0.5);
	text-decoration: none;
	font-size: 0.85rem;
	transition: all 0.3s;
	}
	.footer-link:hover { color: var(--neon-blue); }
	.footer-copy {
	color: rgba(226, 232, 240, 0.3);
	font-size: 0.75rem;
	margin-top: 20px;
	}
	::-webkit-scrollbar { width: 6px; }
	::-webkit-scrollbar-track { background: var(--space-black); }
	::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon-blue), var(--neon-purple)); border-radius: 3px; }
	@media (max-width: 768px) {
	.step { grid-template-columns: 1fr; gap: 15px; }
	.step-number { margin: 0 auto; }
	.step-number::after { display: none; }
	.flow-wrapper { flex-direction: column; }
	.flow-arrow { transform: rotate(90deg); }
	.plugin-grid { grid-template-columns: 1fr; }
	}
	</style>
	<base target="_blank">
	</head>
	<body>
	<div class="particles" id="particles"></div>

	<header class="header">
	<h1 class="title">SKT-OM</h1>
	<p class="subtitle">13B Agentic RAG System + 73+ Plugin Ecosystem</p>
	<p class="tagline">
	Think Mode - Plugin Architecture - LangGraph - SKT RAG - AMD Developer Cloud<br>
	<span style="color: #bc13fe;">ROCm 7.0 \| vLLM FP16 \| TIGER-OM 13B</span>
	</p>
	<div class="badges">
	<span class="badge badge-count">73+ PLUGINS</span>
	<span class="badge">Agents</span>
	<span class="badge">Plugins</span>
	<span class="badge">Think Mode</span>
	<span class="badge">Supervisor</span>
	<span class="badge">Performance</span>
	<span class="badge">Security</span>
	</div>
	</header>

	<section class="url-section">
	<h2>Project Resources</h2>
	<div class="url-grid">
	<a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/SKT-OM" target="_blank" class="url-card">
	<span class="url-icon">HF</span>
	<div class="url-info">
	<div class="url-title">HuggingFace Space</div>
	<div class="url-desc">Live demo app running on HF</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://huggingface.co/Shrijanagain/TIGER-OM" target="_blank" class="url-card">
	<span class="url-icon">BR</span>
	<div class="url-info">
	<div class="url-title">TIGER-OM Model</div>
	<div class="url-desc">13B LLM trained on AMD Cloud</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://github.com/SHRIJANAGAIN/SKT-AMD-FILES" target="_blank" class="url-card">
	<span class="url-icon">GH</span>
	<div class="url-info">
	<div class="url-title">GitHub Repository</div>
	<div class="url-desc">Source code and app files</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://skt-amd-om.onrender.com/" target="_blank" class="url-card">
	<span class="url-icon">WEB</span>
	<div class="url-info">
	<div class="url-title">Live Demo</div>
	<div class="url-desc">App running on Render</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://huggingface.co/Shrijanagain/TIGER-GGUF" target="_blank" class="url-card">
	<span class="url-icon">PKG</span>
	<div class="url-info">
	<div class="url-title">GGUF Quantized</div>
	<div class="url-desc">Q4_K_M quantized model</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://lablab.ai/ai-hackathons/amd-developer/amd-om/skt-om-13b-llm-langgraph-agentic-rag" target="_blank" class="url-card">
	<span class="url-icon">TRO</span>
	<div class="url-info">
	<div class="url-title">Hackathon Page</div>
	<div class="url-desc">AMD Developer Hackathon 2026</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	<a href="https://storage.googleapis.com/lablab-static-eu/presentations/submissions/c1v2zj9hlt13p54nlxxov7aq/c1v2zj9hlt13p54nlxxov7aq-1778393640909_r0a4kpyvnxq2uln14ueozvyy.pdf" target="_blank" class="url-card">
	<span class="url-icon">PDF</span>
	<div class="url-info">
	<div class="url-title">Presentation PDF</div>
	<div class="url-desc">Full project presentation</div>
	</div>
	<span class="url-arrow">-></span>
	</a>
	</div>
	</section>

	<div class="stats-bar">
	<div class="stat-item">
	<div class="stat-number">73+</div>
	<div class="stat-label">Total Plugins</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">12</div>
	<div class="stat-label">Categories</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">6</div>
	<div class="stat-label">Core Agents</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">97.3%</div>
	<div class="stat-label">Accuracy</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">2.3s</div>
	<div class="stat-label">Avg Response</div>
	</div>
	</div>

	<section class="how-it-works">
	<h2 class="section-title">How SKT-OM Works</h2>

	<div class="step-container">
	<div class="step">
	<div class="step-number">01</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">🎯</span>
	<h3 class="step-title">User Query Input</h3>
	</div>
	<p class="step-desc">
	User types any natural language query — simple question, complex multi-hop reasoning, or code-related task.
	No file uploads needed. Pure text-to-intelligent-text pipeline.
	</p>
	<div class="code-block">
	<span class="comment"># Example queries SKT-OM handles</span>
	<span class="variable">query</span> = <span class="string">"Compare ROCm 7.0 vs CUDA 12.4 for LLM training efficiency"</span>
	<span class="variable">query</span> = <span class="string">"Explain transformer attention mechanism with code example"</span>
	<span class="variable">query</span> = <span class="string">"What were AMD's key GPU releases in 2025-2026?"</span>
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">02</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">🧠</span>
	<h3 class="step-title">Think Mode Activation</h3>
	</div>
	<p class="step-desc">
	The query enters <strong>Think Mode</strong> — SKT-OM's reasoning engine. It analyzes intent,
	detects complexity, classifies domain, and decides whether to decompose into sub-queries
	or route directly to plugins/RAG.
	</p>
	<div class="code-block">
	<span class="comment"># Think Mode: Query Analysis & Planning</span>
	<span class="keyword">class</span> <span class="function">ThinkMode</span>:
	<span class="keyword">def</span> <span class="function">analyze</span>(<span class="variable">self</span>, <span class="variable">query</span>):
	<span class="variable">intent</span> = <span class="variable">self</span>.classify_intent(<span class="variable">query</span>) <span class="comment"># research \| code \| math \| compare</span>
	<span class="variable">complexity</span> = <span class="variable">self</span>.assess_complexity(<span class="variable">query</span>) <span class="comment"># simple \| medium \| complex</span>
	<span class="variable">plan</span> = <span class="variable">self</span>.create_execution_plan(<span class="variable">intent</span>, <span class="variable">complexity</span>)
	<span class="keyword">return</span> <span class="variable">plan</span> <span class="comment"># {agents: [...], plugins: [...], mode: "parallel"}</span>
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">03</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">🔌</span>
	<h3 class="step-title">Plugin Router</h3>
	</div>
	<p class="step-desc">
	Based on Think Mode's plan, the <strong>Plugin Router</strong> dynamically loads required tools.
	Code execution? → Code Plugin. Math problem? → Math Plugin. Web data? → Search Plugin.
	Each plugin is a modular, hot-swappable component.
	</p>
	<div class="code-block">
	<span class="comment"># Plugin Router: Dynamic Tool Loading</span>
	<span class="variable">router</span> = <span class="function">PluginRouter</span>(<span class="variable">plugins_dir</span>=<span class="string">"plugins/"</span>, <span class="variable">auto_discover</span>=<span class="variable">True</span>)
	<span class="variable">active_plugins</span> = <span class="variable">router</span>.<span class="function">route</span>(<span class="variable">query_plan</span>)
	<span class="comment"># Returns: [CodePlugin(), MathPlugin(), SearchPlugin()]</span>

	<span class="keyword">for</span> <span class="variable">plugin</span> <span class="keyword">in</span> <span class="variable">active_plugins</span>:
	<span class="variable">result</span> = <span class="variable">plugin</span>.<span class="function">execute</span>(<span class="variable">sub_query</span>)
	<span class="variable">evidence</span>.<span class="function">append</span>(<span class="variable">result</span>)
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">04</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">📚</span>
	<h3 class="step-title">SKT RAG Retrieval</h3>
	</div>
	<p class="step-desc">
	Simultaneously, the <strong>SKT RAG Pipeline</strong> kicks in. Query gets rewritten for better retrieval,
	multi-hop search runs across vector stores, results are reranked and contextually compressed.
	This ensures only the most relevant knowledge reaches the LLM.
	</p>
	<div class="code-block">
	<span class="comment"># SKT RAG: Advanced Retrieval Pipeline</span>
	<span class="variable">rag_pipeline</span> = <span class="function">SKTRAG</span>(
	<span class="variable">vector_store</span>=<span class="string">"ChromaDB"</span>,
	<span class="variable">embedding_model</span>=<span class="string">"BGE-large"</span>,
	<span class="variable">llm</span>=<span class="string">"TIGER-OM-13B"</span>
	)

	<span class="variable">rewritten_query</span> = <span class="variable">rag_pipeline</span>.<span class="function">rewrite_query</span>(<span class="variable">query</span>)
	<span class="variable">docs</span> = <span class="variable">rag_pipeline</span>.<span class="function">multi_hop_retrieve</span>(<span class="variable">rewritten_query</span>, <span class="variable">top_k</span>=<span class="variable">10</span>)
	<span class="variable">ranked_docs</span> = <span class="variable">rag_pipeline</span>.<span class="function">rerank</span>(<span class="variable">docs</span>)
	<span class="variable">compressed</span> = <span class="variable">rag_pipeline</span>.<span class="function">contextual_compress</span>(<span class="variable">ranked_docs</span>)
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">05</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">🤖</span>
	<h3 class="step-title">LangGraph Agent Execution</h3>
	</div>
	<p class="step-desc">
	<strong>LangGraph</strong> orchestrates the multi-agent workflow. Agents execute in parallel or sequential
	mode based on query complexity. Each agent has stateful memory, tool access, and self-correction loops.
	The Supervisor monitors and coordinates all agents.
	</p>
	<div class="code-block">
	<span class="comment"># LangGraph: Multi-Agent Orchestration</span>
	<span class="keyword">from</span> langgraph <span class="keyword">import</span> StateGraph

	<span class="variable">workflow</span> = <span class="function">StateGraph</span>(<span class="variable">AgentState</span>)
	<span class="variable">workflow</span>.<span class="function">add_node</span>(<span class="string">"think"</span>, <span class="variable">think_mode</span>)
	<span class="variable">workflow</span>.<span class="function">add_node</span>(<span class="string">"retrieve"</span>, <span class="variable">rag_retrieve</span>)
	<span class="variable">workflow</span>.<span class="function">add_node</span>(<span class="string">"plugin"</span>, <span class="variable">plugin_execute</span>)
	<span class="variable">workflow</span>.<span class="function">add_node</span>(<span class="string">"synthesize"</span>, <span class="variable">final_synthesis</span>)

	<span class="variable">workflow</span>.<span class="function">add_edge</span>(<span class="string">"think"</span>, <span class="string">"retrieve"</span>)
	<span class="variable">workflow</span>.<span class="function">add_edge</span>(<span class="string">"think"</span>, <span class="string">"plugin"</span>)
	<span class="variable">workflow</span>.<span class="function">add_edge</span>([<span class="string">"retrieve"</span>, <span class="string">"plugin"</span>], <span class="string">"synthesize"</span>)

	<span class="variable">app</span> = <span class="variable">workflow</span>.<span class="function">compile</span>()
	<span class="variable">result</span> = <span class="variable">app</span>.<span class="function">invoke</span>({<span class="string">"query"</span>: <span class="variable">user_query</span>})
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">06</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">✅</span>
	<h3 class="step-title">Verification & Self-Correction</h3>
	</div>
	<p class="step-desc">
	Before final output, SKT-OM runs <strong>verification loops</strong>. It checks consistency between
	plugin results and RAG data, validates calculations, and cross-references facts.
	If inconsistencies are found, it auto-corrects by re-querying or adjusting the synthesis.
	</p>
	<div class="code-block">
	<span class="comment"># Verification Engine</span>
	<span class="keyword">class</span> <span class="function">Verifier</span>:
	<span class="keyword">def</span> <span class="function">verify</span>(<span class="variable">self</span>, <span class="variable">evidence</span>, <span class="variable">draft_response</span>):
	<span class="variable">consistency</span> = <span class="variable">self</span>.<span class="function">check_consistency</span>(<span class="variable">evidence</span>)
	<span class="variable">facts</span> = <span class="variable">self</span>.<span class="function">validate_facts</span>(<span class="variable">draft_response</span>)
	<span class="keyword">if</span> <span class="variable">consistency</span> < <span class="variable">0.85</span> <span class="keyword">or</span> <span class="variable">facts</span>.<span class="variable">failed</span> > <span class="variable">0</span>:
	<span class="keyword">return</span> <span class="variable">self</span>.<span class="function">trigger_rethink</span>(<span class="variable">evidence</span>)
	<span class="keyword">return</span> <span class="variable">draft_response</span> <span class="comment"># Confidence: 97.3%</span>
	</div>
	</div>
	</div>

	<div class="step">
	<div class="step-number">07</div>
	<div class="step-content">
	<div class="step-header">
	<span class="step-icon">📤</span>
	<h3 class="step-title">Final Synthesis & Response</h3>
	</div>
	<p class="step-desc">
	All evidence — from plugins, RAG retrieval, and agent reasoning — gets synthesized by the
	<strong>13B TIGER-OM model</strong> running on <strong>AMD MI300X</strong> via <strong>vLLM</strong>.
	The response is accurate, well-structured, cited where possible, and delivered with reasoning chains.
	</p>
	<div class="code-block">
	<span class="comment"># Final Synthesis on AMD MI300X</span>
	<span class="variable">llm</span> = <span class="function">vLLM</span>(
	<span class="variable">model</span>=<span class="string">"TIGER-OM-13B"</span>,
	<span class="variable">tensor_parallel</span>=<span class="variable">2</span>,
	<span class="variable">gpu_memory_utilization</span>=<span class="variable">0.85</span>
	)

	<span class="variable">final_prompt</span> = <span class="variable">self</span>.<span class="function">build_synthesis_prompt</span>(
	<span class="variable">query</span>=<span class="variable">user_query</span>,
	<span class="variable">rag_context</span>=<span class="variable">compressed_docs</span>,
	<span class="variable">plugin_results</span>=<span class="variable">plugin_evidence</span>,
	<span class="variable">reasoning_chain</span>=<span class="variable">agent_trace</span>
	)

	<span class="variable">response</span> = <span class="variable">llm</span>.<span class="function">generate</span>(<span class="variable">final_prompt</span>, <span class="variable">max_tokens</span>=<span class="variable">2048</span>)
	<span class="comment"># Output: Structured, cited, reasoned response</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<section class="flow-diagram">
	<h2>Complete Data Flow</h2>
	<div class="flow-wrapper">
	<div class="flow-node"><div class="flow-box">🎯<br>User Query</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">🧠<br>Think Mode</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">🔌<br>Plugin Router</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">📚<br>SKT RAG</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">🤖<br>LangGraph</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">✅<br>Verify</div></div>
	<div class="flow-arrow">→</div>
	<div class="flow-node"><div class="flow-box">📤<br>Response</div></div>
	</div>
	</section>

	<section class="terminal-section">
	<h2>Live Execution Trace</h2>
	<div class="terminal" id="terminal">
	<div class="terminal-line" style="animation-delay: 0.5s;"><span class="cmd">$ skt-om start --mode=agentic --think</span></div>
	<div class="terminal-line" style="animation-delay: 1s;"><span class="success">[INIT] SKT-OM 13B Agentic RAG System v2.0</span></div>
	<div class="terminal-line" style="animation-delay: 1.5s;"><span class="info">[INFO] Loading TIGER-OM-13B on AMD MI300X...</span></div>
	<div class="terminal-line" style="animation-delay: 2s;"><span class="success">[OK] Model loaded \| VRAM: 14.2GB/32GB \| ROCm 7.0</span></div>
	<div class="terminal-line" style="animation-delay: 2.5s;"><span class="info">[INFO] Initializing SKT RAG pipeline...</span></div>
	<div class="terminal-line" style="animation-delay: 3s;"><span class="success">[OK] Vector store: ChromaDB \| 47,832 documents indexed</span></div>
	<div class="terminal-line" style="animation-delay: 3.5s;"><span class="info">[INFO] Loading plugin ecosystem...</span></div>
	<div class="terminal-line" style="animation-delay: 4s;"><span class="success">[OK] 73 plugins active: Search, Code, Data, Cloud, AI/ML, Security...</span></div>
	<div class="terminal-line" style="animation-delay: 4.5s;"><span class="info">[INFO] LangGraph workflow compiled \| 4 nodes, 5 edges</span></div>
	<div class="terminal-line" style="animation-delay: 5s;"><span class="highlight">[READY] SKT-OM is listening on port 7860</span></div>
	<div class="terminal-line" style="animation-delay: 5.5s;"><span class="cmd">$</span> <span class="info">Waiting for query...</span><span class="cursor"></span></div>
	</div>
	</section>

	<section class="plugin-section">
	<h2 class="section-title">Plugin Ecosystem</h2>
	<p class="section-subtitle">Google ADK Style Architecture — 73+ Plugins across 12 Categories</p>

	<div class="category-tabs">
	<div class="category-tab active" data-category="all">ALL (73+)</div>
	<div class="category-tab" data-category="search">Search (8)</div>
	<div class="category-tab" data-category="code">Code (10)</div>
	<div class="category-tab" data-category="data">Data (9)</div>
	<div class="category-tab" data-category="communication">Communication (7)</div>
	<div class="category-tab" data-category="database">Database (8)</div>
	<div class="category-tab" data-category="cloud">Cloud (6)</div>
	<div class="category-tab" data-category="ai-ml">AI/ML (7)</div>
	<div class="category-tab" data-category="security">Security (5)</div>
	<div class="category-tab" data-category="monitoring">Monitoring (6)</div>
	<div class="category-tab" data-category="automation">Automation (5)</div>
	<div class="category-tab" data-category="integration">Integration (4)</div>
	</div>

	<div class="plugin-grid" id="pluginGrid">
	<div class="plugin-card" data-category="search" style="animation-delay: 0.0s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">Google Search</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Custom Search API with result deduplication, snippet extraction, and relevance scoring.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">API</span>
	<span class="plugin-tag">Web</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.05s;">
	<div class="plugin-header">
	<div class="plugin-icon">D</div>
	<div>
	<div class="plugin-name">DuckDuckGo</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Privacy-focused search with instant answers, news, and image search capabilities.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Privacy</span>
	<span class="plugin-tag">Fallback</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.1s;">
	<div class="plugin-header">
	<div class="plugin-icon">B</div>
	<div>
	<div class="plugin-name">Bing Web Search</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Microsoft Bing API with entity recognition, safe search, and market localization.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Microsoft</span>
	<span class="plugin-tag">Entity</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.15s;">
	<div class="plugin-header">
	<div class="plugin-icon">N</div>
	<div>
	<div class="plugin-name">News API</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Real-time news aggregation from 30,000+ sources with sentiment analysis and topic clustering.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">News</span>
	<span class="plugin-tag">Real-time</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.2s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">Google Maps</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Location search, geocoding, directions, places API, and distance matrix calculations.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Maps</span>
	<span class="plugin-tag">Geo</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.25s;">
	<div class="plugin-header">
	<div class="plugin-icon">W</div>
	<div>
	<div class="plugin-name">Web Scraper</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Intelligent web scraping with adaptive CSS selectors, anti-bot bypass, and structured data extraction.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Scraper</span>
	<span class="plugin-tag">Data</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.3s;">
	<div class="plugin-header">
	<div class="plugin-icon">W</div>
	<div>
	<div class="plugin-name">Wikipedia</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Wikipedia API with page search, summary extraction, and multi-language support.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Knowledge</span>
	<span class="plugin-tag">Wiki</span>
	</div>
	</div>
	<div class="plugin-card" data-category="search" style="animation-delay: 0.35s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">ArXiv Search</div>
	<div class="plugin-category">Search</div>
	</div>
	</div>
	<div class="plugin-desc">Scientific paper search with abstract extraction, citation analysis, and PDF download.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Research</span>
	<span class="plugin-tag">Academic</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.4s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Python Executor</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Sandboxed Python execution with pip install, output capture, and error traceback analysis.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Python</span>
	<span class="plugin-tag">Sandbox</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.45s;">
	<div class="plugin-header">
	<div class="plugin-icon">J</div>
	<div>
	<div class="plugin-name">JavaScript Runner</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Node.js execution with npm support, async handling, and console output streaming.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">JS</span>
	<span class="plugin-tag">Node</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.5s;">
	<div class="plugin-header">
	<div class="plugin-icon">J</div>
	<div>
	<div class="plugin-name">Java Compiler</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Java compilation and execution with Maven/Gradle support and JUnit test running.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Java</span>
	<span class="plugin-tag">JVM</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.55s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">Go Runner</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Go code execution with module support, goroutine handling, and benchmark testing.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Go</span>
	<span class="plugin-tag">Golang</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.6s;">
	<div class="plugin-header">
	<div class="plugin-icon">R</div>
	<div>
	<div class="plugin-name">Rust Compiler</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Rust compilation with cargo support, memory safety checks, and performance profiling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Rust</span>
	<span class="plugin-tag">Systems</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.65s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">PHP Executor</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">PHP execution with composer support, framework detection, and MySQL integration.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">PHP</span>
	<span class="plugin-tag">Web</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.7s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">Code Reviewer</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Automated code review with linting, security scanning, and style guide enforcement.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Review</span>
	<span class="plugin-tag">Lint</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.75s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Test Runner</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Multi-language test execution with coverage reporting, flaky test detection, and CI integration.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Testing</span>
	<span class="plugin-tag">CI/CD</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.8s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Package Manager</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Cross-language package management with dependency resolution, vulnerability scanning, and lock file generation.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Packages</span>
	<span class="plugin-tag">Deps</span>
	</div>
	</div>
	<div class="plugin-card" data-category="code" style="animation-delay: 0.85s;">
	<div class="plugin-header">
	<div class="plugin-icon">D</div>
	<div>
	<div class="plugin-name">Docker Executor</div>
	<div class="plugin-category">Code</div>
	</div>
	</div>
	<div class="plugin-desc">Containerized code execution with Dockerfile support, image caching, and resource limits.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Docker</span>
	<span class="plugin-tag">Container</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 0.9s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Pandas Analyzer</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">DataFrame operations, statistical analysis, missing value handling, and correlation matrices.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Pandas</span>
	<span class="plugin-tag">Stats</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 0.95s;">
	<div class="plugin-header">
	<div class="plugin-icon">M</div>
	<div>
	<div class="plugin-name">Matplotlib Viz</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">Chart generation with line, bar, scatter, heatmap, and 3D visualization support.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Viz</span>
	<span class="plugin-tag">Charts</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.0s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Plotly Interactive</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">Interactive dashboards with zoom, pan, hover tooltips, and export to HTML/PNG.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Interactive</span>
	<span class="plugin-tag">Dashboard</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.05s;">
	<div class="plugin-header">
	<div class="plugin-icon">N</div>
	<div>
	<div class="plugin-name">NumPy Compute</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">High-performance numerical computing with array operations, linear algebra, and FFT.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">NumPy</span>
	<span class="plugin-tag">Math</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.1s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">SciPy Advanced</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">Scientific computing with optimization, integration, interpolation, and signal processing.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SciPy</span>
	<span class="plugin-tag">Science</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.15s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">Scikit-Learn ML</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">Machine learning with classification, regression, clustering, and model evaluation.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">ML</span>
	<span class="plugin-tag">Sklearn</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.2s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">CSV Processor</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">CSV parsing, transformation, validation, and export with schema inference and encoding detection.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">CSV</span>
	<span class="plugin-tag">ETL</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.25s;">
	<div class="plugin-header">
	<div class="plugin-icon">J</div>
	<div>
	<div class="plugin-name">JSON Transformer</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">JSON parsing, schema validation, transformation with JMESPath, and pretty printing.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">JSON</span>
	<span class="plugin-tag">Transform</span>
	</div>
	</div>
	<div class="plugin-card" data-category="data" style="animation-delay: 1.3s;">
	<div class="plugin-header">
	<div class="plugin-icon">E</div>
	<div>
	<div class="plugin-name">Excel Handler</div>
	<div class="plugin-category">Data</div>
	</div>
	</div>
	<div class="plugin-desc">Excel read/write with formula support, pivot tables, and multi-sheet operations.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Excel</span>
	<span class="plugin-tag">Office</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.35s;">
	<div class="plugin-header">
	<div class="plugin-icon">E</div>
	<div>
	<div class="plugin-name">Email Sender</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">SMTP email sending with template support, attachment handling, and delivery tracking.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SMTP</span>
	<span class="plugin-tag">Email</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.4s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">Slack Messenger</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">Slack API integration with channel messaging, thread replies, and file uploads.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Slack</span>
	<span class="plugin-tag">Chat</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.45s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Twitter/X API</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">Twitter API v2 with tweet posting, timeline reading, and engagement analytics.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Twitter</span>
	<span class="plugin-tag">Social</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.5s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">SMS Gateway</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">SMS sending via Twilio with delivery status, bulk messaging, and template variables.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SMS</span>
	<span class="plugin-tag">Twilio</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.55s;">
	<div class="plugin-header">
	<div class="plugin-icon">D</div>
	<div>
	<div class="plugin-name">Discord Bot</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">Discord bot integration with message sending, embeds, and slash command handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Discord</span>
	<span class="plugin-tag">Bot</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.6s;">
	<div class="plugin-header">
	<div class="plugin-icon">V</div>
	<div>
	<div class="plugin-name">Voice Call</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">Voice call initiation with text-to-speech, call recording, and transcription.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Voice</span>
	<span class="plugin-tag">TTS</span>
	</div>
	</div>
	<div class="plugin-card" data-category="communication" style="animation-delay: 1.65s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Telegram Bot</div>
	<div class="plugin-category">Communication</div>
	</div>
	</div>
	<div class="plugin-desc">Telegram Bot API with message sending, inline keyboards, and webhook handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Telegram</span>
	<span class="plugin-tag">Bot</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.7s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">PostgreSQL</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">PostgreSQL connection with SQL execution, pgvector support, and connection pooling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SQL</span>
	<span class="plugin-tag">Vector</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.75s;">
	<div class="plugin-header">
	<div class="plugin-icon">M</div>
	<div>
	<div class="plugin-name">MongoDB</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">MongoDB operations with aggregation pipelines, schema validation, and change streams.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">NoSQL</span>
	<span class="plugin-tag">Document</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.8s;">
	<div class="plugin-header">
	<div class="plugin-icon">R</div>
	<div>
	<div class="plugin-name">Redis Cache</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">Redis operations with caching, pub/sub, streams, and vector similarity search.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Cache</span>
	<span class="plugin-tag">Redis</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.85s;">
	<div class="plugin-header">
	<div class="plugin-icon">M</div>
	<div>
	<div class="plugin-name">MySQL Connector</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">MySQL connection with query execution, transaction support, and replication handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SQL</span>
	<span class="plugin-tag">MySQL</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.9s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">ChromaDB</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">Vector database with embedding storage, semantic search, and metadata filtering.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Vector</span>
	<span class="plugin-tag">Embeddings</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 1.95s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Pinecone</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">Pinecone vector DB with hybrid search, metadata filtering, and namespace management.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Vector</span>
	<span class="plugin-tag">Cloud</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 2.0s;">
	<div class="plugin-header">
	<div class="plugin-icon">B</div>
	<div>
	<div class="plugin-name">BigQuery</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">Google BigQuery integration with SQL queries, dataset management, and cost optimization.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Analytics</span>
	<span class="plugin-tag">Google</span>
	</div>
	</div>
	<div class="plugin-card" data-category="database" style="animation-delay: 2.05s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">SQLite</div>
	<div class="plugin-category">Database</div>
	</div>
	</div>
	<div class="plugin-desc">SQLite operations with in-memory databases, file-based storage, and FTS5 full-text search.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Lite</span>
	<span class="plugin-tag">Local</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.1s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">AWS S3</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">S3 bucket operations with upload, download, presigned URLs, and lifecycle policies.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Storage</span>
	<span class="plugin-tag">AWS</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.15s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">Azure Blob</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">Azure Blob Storage with container management, SAS tokens, and tiered storage.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Azure</span>
	<span class="plugin-tag">Blob</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.2s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">GCP Storage</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">Google Cloud Storage with bucket operations, IAM management, and signed URLs.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">GCP</span>
	<span class="plugin-tag">Storage</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.25s;">
	<div class="plugin-header">
	<div class="plugin-icon">D</div>
	<div>
	<div class="plugin-name">Docker Hub</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">Docker image management with pull, push, tag operations, and registry search.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Docker</span>
	<span class="plugin-tag">Registry</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.3s;">
	<div class="plugin-header">
	<div class="plugin-icon">K</div>
	<div>
	<div class="plugin-name">Kubernetes</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">K8s cluster operations with pod management, deployment scaling, and log streaming.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">K8s</span>
	<span class="plugin-tag">DevOps</span>
	</div>
	</div>
	<div class="plugin-card" data-category="cloud" style="animation-delay: 2.35s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">Cloud Functions</div>
	<div class="plugin-category">Cloud</div>
	</div>
	</div>
	<div class="plugin-desc">Serverless function deployment with trigger configuration and execution monitoring.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Serverless</span>
	<span class="plugin-tag">FaaS</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.4s;">
	<div class="plugin-header">
	<div class="plugin-icon">O</div>
	<div>
	<div class="plugin-name">OpenAI GPT</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">OpenAI API integration with GPT-4, DALL-E, Whisper, and embedding models.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">GPT-4</span>
	<span class="plugin-tag">OpenAI</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.45s;">
	<div class="plugin-header">
	<div class="plugin-icon">H</div>
	<div>
	<div class="plugin-name">HuggingFace</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">HuggingFace integration with model inference, pipeline execution, and dataset loading.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">HF</span>
	<span class="plugin-tag">Transformers</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.5s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">Anthropic Claude</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">Claude API with extended context, reasoning, and tool use capabilities.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Claude</span>
	<span class="plugin-tag">Anthropic</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.55s;">
	<div class="plugin-header">
	<div class="plugin-icon">I</div>
	<div>
	<div class="plugin-name">Image Generator</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">Image generation with Stable Diffusion, DALL-E, and Midjourney-style prompts.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Image</span>
	<span class="plugin-tag">GenAI</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.6s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">Speech Recognition</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">Speech-to-text with Whisper, real-time transcription, and speaker diarization.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">ASR</span>
	<span class="plugin-tag">Audio</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.65s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Text Summarizer</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">Abstractive and extractive summarization with length control and key point extraction.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">NLP</span>
	<span class="plugin-tag">Summary</span>
	</div>
	</div>
	<div class="plugin-card" data-category="ai-ml" style="animation-delay: 2.7s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Translation</div>
	<div class="plugin-category">AI/ML</div>
	</div>
	</div>
	<div class="plugin-desc">Multi-language translation with 100+ languages, context preservation, and domain adaptation.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">NLP</span>
	<span class="plugin-tag">Translate</span>
	</div>
	</div>
	<div class="plugin-card" data-category="security" style="animation-delay: 2.75s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">Auth Manager</div>
	<div class="plugin-category">Security</div>
	</div>
	</div>
	<div class="plugin-desc">OAuth 2.0, JWT, and API key management with token rotation and scope enforcement.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Auth</span>
	<span class="plugin-tag">OAuth</span>
	</div>
	</div>
	<div class="plugin-card" data-category="security" style="animation-delay: 2.8s;">
	<div class="plugin-header">
	<div class="plugin-icon">R</div>
	<div>
	<div class="plugin-name">Rate Limiter</div>
	<div class="plugin-category">Security</div>
	</div>
	</div>
	<div class="plugin-desc">Token bucket rate limiting with Redis backend, per-user quotas, and burst handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Rate</span>
	<span class="plugin-tag">Limit</span>
	</div>
	</div>
	<div class="plugin-card" data-category="security" style="animation-delay: 2.85s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">PII Detector</div>
	<div class="plugin-category">Security</div>
	</div>
	</div>
	<div class="plugin-desc">PII detection and masking with regex patterns, NER models, and compliance reporting.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">PII</span>
	<span class="plugin-tag">Privacy</span>
	</div>
	</div>
	<div class="plugin-card" data-category="security" style="animation-delay: 2.9s;">
	<div class="plugin-header">
	<div class="plugin-icon">V</div>
	<div>
	<div class="plugin-name">Vulnerability Scan</div>
	<div class="plugin-category">Security</div>
	</div>
	</div>
	<div class="plugin-desc">Dependency vulnerability scanning with CVE database, severity scoring, and fix suggestions.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">CVE</span>
	<span class="plugin-tag">Scan</span>
	</div>
	</div>
	<div class="plugin-card" data-category="security" style="animation-delay: 2.95s;">
	<div class="plugin-header">
	<div class="plugin-icon">E</div>
	<div>
	<div class="plugin-name">Encryption</div>
	<div class="plugin-category">Security</div>
	</div>
	</div>
	<div class="plugin-desc">AES-256 encryption with key management, HSM integration, and secure key rotation.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">AES</span>
	<span class="plugin-tag">Encrypt</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.0s;">
	<div class="plugin-header">
	<div class="plugin-icon">P</div>
	<div>
	<div class="plugin-name">Prometheus Metrics</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">Prometheus metrics export with custom counters, histograms, and gauge collection.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Metrics</span>
	<span class="plugin-tag">Prometheus</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.05s;">
	<div class="plugin-header">
	<div class="plugin-icon">L</div>
	<div>
	<div class="plugin-name">Log Aggregator</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">Centralized logging with structured JSON, log levels, and Elasticsearch forwarding.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Logs</span>
	<span class="plugin-tag">ELK</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.1s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">APM Tracer</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">Distributed tracing with OpenTelemetry, span collection, and Jaeger integration.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Trace</span>
	<span class="plugin-tag">OTel</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.15s;">
	<div class="plugin-header">
	<div class="plugin-icon">A</div>
	<div>
	<div class="plugin-name">Alert Manager</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">Alert routing with PagerDuty, Slack, and email notifications with escalation policies.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Alert</span>
	<span class="plugin-tag">PagerDuty</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.2s;">
	<div class="plugin-header">
	<div class="plugin-icon">H</div>
	<div>
	<div class="plugin-name">Health Check</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">System health monitoring with endpoint checks, dependency validation, and status pages.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Health</span>
	<span class="plugin-tag">Status</span>
	</div>
	</div>
	<div class="plugin-card" data-category="monitoring" style="animation-delay: 3.25s;">
	<div class="plugin-header">
	<div class="plugin-icon">S</div>
	<div>
	<div class="plugin-name">SLO Tracker</div>
	<div class="plugin-category">Monitoring</div>
	</div>
	</div>
	<div class="plugin-desc">Service Level Objective tracking with error budget calculation and burn rate alerts.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">SLO</span>
	<span class="plugin-tag">SRE</span>
	</div>
	</div>
	<div class="plugin-card" data-category="automation" style="animation-delay: 3.3s;">
	<div class="plugin-header">
	<div class="plugin-icon">W</div>
	<div>
	<div class="plugin-name">Workflow Engine</div>
	<div class="plugin-category">Automation</div>
	</div>
	</div>
	<div class="plugin-desc">Visual workflow builder with conditional logic, loops, and parallel execution.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Workflow</span>
	<span class="plugin-tag">Builder</span>
	</div>
	</div>
	<div class="plugin-card" data-category="automation" style="animation-delay: 3.35s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">Cron Scheduler</div>
	<div class="plugin-category">Automation</div>
	</div>
	</div>
	<div class="plugin-desc">Cron job scheduling with timezone support, retry logic, and job monitoring.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Cron</span>
	<span class="plugin-tag">Schedule</span>
	</div>
	</div>
	<div class="plugin-card" data-category="automation" style="animation-delay: 3.4s;">
	<div class="plugin-header">
	<div class="plugin-icon">W</div>
	<div>
	<div class="plugin-name">Webhook Handler</div>
	<div class="plugin-category">Automation</div>
	</div>
	</div>
	<div class="plugin-desc">Webhook reception with signature verification, payload parsing, and event routing.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Webhook</span>
	<span class="plugin-tag">Events</span>
	</div>
	</div>
	<div class="plugin-card" data-category="automation" style="animation-delay: 3.45s;">
	<div class="plugin-header">
	<div class="plugin-icon">C</div>
	<div>
	<div class="plugin-name">CI/CD Pipeline</div>
	<div class="plugin-category">Automation</div>
	</div>
	</div>
	<div class="plugin-desc">GitHub/GitLab CI integration with build triggers, test execution, and deployment.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">CI/CD</span>
	<span class="plugin-tag">DevOps</span>
	</div>
	</div>
	<div class="plugin-card" data-category="automation" style="animation-delay: 3.5s;">
	<div class="plugin-header">
	<div class="plugin-icon">T</div>
	<div>
	<div class="plugin-name">Task Queue</div>
	<div class="plugin-category">Automation</div>
	</div>
	</div>
	<div class="plugin-desc">Background task processing with priority queues, retries, and dead letter handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Queue</span>
	<span class="plugin-tag">Background</span>
	</div>
	</div>
	<div class="plugin-card" data-category="integration" style="animation-delay: 3.55s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">GitHub API</div>
	<div class="plugin-category">Integration</div>
	</div>
	</div>
	<div class="plugin-desc">GitHub integration with repo management, PR reviews, issue tracking, and Actions triggers.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">GitHub</span>
	<span class="plugin-tag">Git</span>
	</div>
	</div>
	<div class="plugin-card" data-category="integration" style="animation-delay: 3.6s;">
	<div class="plugin-header">
	<div class="plugin-icon">G</div>
	<div>
	<div class="plugin-name">GitLab API</div>
	<div class="plugin-category">Integration</div>
	</div>
	</div>
	<div class="plugin-desc">GitLab integration with project management, CI pipelines, and merge request handling.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">GitLab</span>
	<span class="plugin-tag">Git</span>
	</div>
	</div>
	<div class="plugin-card" data-category="integration" style="animation-delay: 3.65s;">
	<div class="plugin-header">
	<div class="plugin-icon">J</div>
	<div>
	<div class="plugin-name">Jira Connector</div>
	<div class="plugin-category">Integration</div>
	</div>
	</div>
	<div class="plugin-desc">Jira integration with issue creation, sprint management, and workflow transitions.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Jira</span>
	<span class="plugin-tag">Project</span>
	</div>
	</div>
	<div class="plugin-card" data-category="integration" style="animation-delay: 3.7s;">
	<div class="plugin-header">
	<div class="plugin-icon">N</div>
	<div>
	<div class="plugin-name">Notion API</div>
	<div class="plugin-category">Integration</div>
	</div>
	</div>
	<div class="plugin-desc">Notion integration with page creation, database queries, and block manipulation.</div>
	<div class="plugin-meta">
	<span class="plugin-tag">Notion</span>
	<span class="plugin-tag">Docs</span>
	</div>
	</div>
	</div>
	</section>

	<section class="code-section">
	<h2 class="code-title">PLUGIN ARCHITECTURE</h2>
	<div class="code-block">
	<span class="comment"># SKT-OM Plugin System - Google ADK Style</span>
	<span class="keyword">from</span> skt_om.plugins <span class="keyword">import</span> PluginManager, BasePlugin

	<span class="comment"># Initialize plugin manager with 73+ plugins</span>
	<span class="variable">manager</span> = <span class="function">PluginManager</span>(
	<span class="variable">plugins_dir</span>=<span class="string">"plugins/"</span>,
	<span class="variable">auto_discover</span>=<span class="variable">True</span>,
	<span class="variable">lazy_load</span>=<span class="variable">True</span>
	)

	<span class="comment"># Think Mode auto-routes to appropriate plugins</span>
	<span class="variable">plan</span> = <span class="variable">think_mode</span>.<span class="function">analyze</span>(<span class="variable">query</span>)
	<span class="comment"># Returns: {plugins: ["Search", "Code", "Data"], mode: "parallel"}</span>

	<span class="comment"># Dynamic plugin loading</span>
	<span class="variable">active_plugins</span> = <span class="variable">manager</span>.<span class="function">load_plugins</span>(<span class="variable">plan</span>.<span class="variable">plugins</span>)

	<span class="comment"># Execute all plugins in parallel</span>
	<span class="variable">results</span> = <span class="keyword">await</span> <span class="variable">manager</span>.<span class="function">execute_parallel</span>(<span class="variable">active_plugins</span>, <span class="variable">query</span>)

	<span class="comment"># Register custom plugin</span>
	<span class="keyword">class</span> <span class="function">MyCustomPlugin</span>(<span class="variable">BasePlugin</span>):
	<span class="variable">name</span> = <span class="string">"custom_tool"</span>
	<span class="variable">version</span> = <span class="string">"1.0.0"</span>

	<span class="keyword">async def</span> <span class="function">execute</span>(<span class="variable">self</span>, <span class="variable">context</span>):
	<span class="comment"># Your custom logic here</span>
	<span class="keyword">return</span> <span class="variable">result</span>

	<span class="variable">manager</span>.<span class="function">register</span>(<span class="function">MyCustomPlugin</span>())
	</div>
	</section>

	<footer class="footer">
	<div class="footer-title">SKT-OM</div>
	<p style="color: rgba(226,232,240,0.5); font-size: 0.9rem;">13B Agentic RAG System + 73+ Plugin Ecosystem - Think Mode - LangGraph - AMD MI300X</p>
	<div class="footer-links">
	<a href="https://github.com/SHRIJANAGAIN/SKT-AMD-FILES" target="_blank" class="footer-link">GitHub</a>
	<a href="https://huggingface.co/Shrijanagain/TIGER-OM" target="_blank" class="footer-link">Model</a>
	<a href="https://huggingface.co/Shrijanagain/TIGER-GGUF" target="_blank" class="footer-link">GGUF</a>
	<a href="https://skt-amd-om.onrender.com/" target="_blank" class="footer-link">Demo</a>
	<a href="https://lablab.ai/ai-hackathons/amd-developer/amd-om/skt-om-13b-llm-langgraph-agentic-rag" target="_blank" class="footer-link">Hackathon</a>
	<a href="https://storage.googleapis.com/lablab-static-eu/presentations/submissions/c1v2zj9hlt13p54nlxxov7aq/c1v2zj9hlt13p54nlxxov7aq-1778393640909_r0a4kpyvnxq2uln14ueozvyy.pdf" target="_blank" class="footer-link">Presentation</a>
	</div>
	<div class="footer-copy">2026 SKT-AI-LABS \| AMD Developer Hackathon 2026 \| Built with ROCm 7.0 + vLLM + LangGraph</div>
	</footer>

	<script>
	// Generate background particles
	const particlesContainer = document.getElementById('particles');
	for (let i = 0; i < 50; i++) {
	const particle = document.createElement('div');
	particle.className = 'particle';
	particle.style.left = Math.random() * 100 + '%';
	particle.style.top = Math.random() * 100 + '%';
	particle.style.animationDelay = Math.random() * 15 + 's';
	particle.style.animationDuration = (10 + Math.random() * 10) + 's';
	particlesContainer.appendChild(particle);
	}

	// Terminal typing effect
	const terminal = document.getElementById('terminal');
	const newLines = [
	{ text: '[QUERY] "Compare ROCm vs CUDA for LLM training"', color: 'cmd', delay: 6000 },
	{ text: '[THINK] Intent: compare \| Complexity: high \| Plugins: [Search, Code]', color: 'info', delay: 6500 },
	{ text: '[PLUGIN] SearchPlugin activated \| Query: "ROCm vs CUDA LLM benchmarks 2026"', color: 'success', delay: 7000 },
	{ text: '[PLUGIN] CodePlugin activated \| Task: calculate cost comparison', color: 'success', delay: 7500 },
	{ text: '[RAG] Multi-hop retrieve: 12 docs \| Reranked: top 5 \| Compressed', color: 'info', delay: 8000 },
	{ text: '[AGENT] DeepResearch + RAGAssistant running parallel...', color: 'highlight', delay: 8500 },
	{ text: '[VERIFY] Consistency check: 94.7% \| Facts validated: 8/8', color: 'success', delay: 9000 },
	{ text: '[SYNTH] Generating final response \| Tokens: 1,847 \| Time: 2.3s', color: 'info', delay: 9500 },
	{ text: '[DONE] Response delivered \| Confidence: 97.3% \| Cache: MISS', color: 'success', delay: 10000 },
	{ text: '$ ', color: 'cmd', delay: 10500 },
	];

	newLines.forEach(line => {
	setTimeout(() => {
	const div = document.createElement('div');
	div.className = 'terminal-line';
	div.style.animation = 'typeIn 0.5s ease forwards';
	div.innerHTML = '<span class="' + line.color + '">' + line.text + '</span>';
	terminal.appendChild(div);
	terminal.scrollTop = terminal.scrollHeight;
	}, line.delay);
	});

	// Category filtering
	const tabs = document.querySelectorAll('.category-tab');
	const cards = document.querySelectorAll('.plugin-card');

	tabs.forEach(tab => {
	tab.addEventListener('click', () => {
	tabs.forEach(t => t.classList.remove('active'));
	tab.classList.add('active');

	const category = tab.dataset.category;
	cards.forEach(card => {
	if (category === 'all' \|\| card.dataset.category === category) {
	card.style.display = 'block';
	card.style.animation = 'cardIn 0.5s ease forwards';
	} else {
	card.style.display = 'none';
	}
	});
	});
	});

	// Intersection Observer for scroll animations
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.style.animationPlayState = 'running';
	}
	});
	}, { threshold: 0.1 });

	document.querySelectorAll('.step').forEach(step => {
	observer.observe(step);
	});
	</script>
	</body>
	</html>