Spaces:

2796gauravc
/

functiongemma-tutorial

Running

App Files Files Community

functiongemma-tutorial / index.html

2796gauravc

Update index.html

06a65ac verified 3 months ago

raw

history blame contribute delete

74 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FUNCTIONGEMMA \| TUTORIAL</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;700;800&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">

	<!-- Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-2Q4M55VKPR"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-2Q4M55VKPR', {
	page_path: window.location.pathname,
	anonymize_ip: true
	});
	</script>
	<style>
	:root {
	--black: #000000;
	--white: #FFFFFF;
	--yellow: #FFFF00;
	--red: #FF0000;
	--green: #00FF00;
	--cyan: #00FFFF;
	--border-width: 4px;
	--shadow-offset: 8px;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Space Grotesk', sans-serif;
	background: var(--black);
	color: var(--white);
	min-height: 100vh;
	padding: 20px;
	line-height: 1.6;
	position: relative;
	overflow-x: hidden;
	}

	body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,0,0.03) 50px, rgba(255,255,0,0.03) 52px),
	repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,0,0,0.03) 50px, rgba(255,0,0,0.03) 52px);
	pointer-events: none;
	z-index: 0;
	}

	.container {
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	}

	.header {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 40px;
	margin-bottom: 30px;
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--yellow);
	position: relative;
	animation: slideDown 0.6s ease-out;
	}

	@keyframes slideDown {
	from {
	opacity: 0;
	transform: translateY(-30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.header::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 2px solid var(--yellow);
	z-index: -1;
	}

	.header h1 {
	font-family: 'Bungee', cursive;
	font-size: 3.5em;
	color: var(--yellow);
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 4px 4px 0 var(--red);
	line-height: 1.1;
	}

	.header p {
	font-size: 1.3em;
	color: var(--white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.model-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: var(--border-width) solid var(--yellow);
	}

	.model-loading-overlay.hidden {
	display: none;
	}

	.loading-content {
	max-width: 800px;
	padding: 40px;
	background: var(--black);
	border: var(--border-width) solid var(--white);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--cyan);
	}

	.loading-title {
	font-family: 'Bungee', cursive;
	font-size: 2.5em;
	color: var(--yellow);
	margin-bottom: 30px;
	text-transform: uppercase;
	text-align: center;
	animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
	}

	.loading-steps {
	list-style: none;
	margin: 20px 0;
	}

	.loading-step {
	padding: 15px;
	margin: 10px 0;
	background: var(--black);
	border: 2px solid var(--white);
	color: var(--white);
	font-family: 'JetBrains Mono', monospace;
	position: relative;
	transition: all 0.3s ease;
	}

	.loading-step.active {
	border-color: var(--yellow);
	background: rgba(255, 255, 0, 0.1);
	box-shadow: 4px 4px 0 var(--yellow);
	}

	.loading-step.completed {
	border-color: var(--green);
	background: rgba(0, 255, 0, 0.1);
	}

	.loading-step.completed::after {
	content: ' ✓';
	color: var(--green);
	font-weight: bold;
	}

	.model-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin: 30px 0;
	}

	.info-card {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 20px;
	box-shadow: 6px 6px 0 var(--cyan);
	}

	.info-card h3 {
	font-family: 'Bungee', cursive;
	color: var(--cyan);
	font-size: 1.2em;
	margin-bottom: 10px;
	text-transform: uppercase;
	}

	.info-card p {
	font-family: 'JetBrains Mono', monospace;
	color: var(--white);
	font-size: 0.9em;
	}

	.resource-links {
	margin: 30px 0;
	padding: 20px;
	background: var(--black);
	border: var(--border-width) solid var(--yellow);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--red);
	}

	.resource-links h3 {
	font-family: 'Bungee', cursive;
	color: var(--yellow);
	margin-bottom: 15px;
	text-transform: uppercase;
	font-size: 1.5em;
	}

	.resource-links ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 15px;
	}

	.resource-links li {
	padding: 15px;
	background: var(--black);
	border: 2px solid var(--white);
	}

	.resource-links a {
	color: var(--cyan);
	text-decoration: none;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	transition: all 0.2s ease;
	display: block;
	}

	.resource-links a:hover {
	color: var(--yellow);
	transform: translateX(5px);
	}

	.progress-bar {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 20px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--cyan);
	}

	.progress-fill {
	flex: 1;
	height: 40px;
	background: var(--black);
	border: 2px solid var(--white);
	position: relative;
	overflow: hidden;
	}

	.progress-inner {
	height: 100%;
	background: var(--yellow);
	transition: width 0.5s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--black);
	font-weight: 800;
	font-family: 'Bungee', cursive;
	font-size: 1.1em;
	text-transform: uppercase;
	}

	.main-content {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 30px;
	}

	.sidebar {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 25px;
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--red);
	height: fit-content;
	position: sticky;
	top: 20px;
	}

	.model-status {
	background: var(--black);
	border: 2px solid var(--white);
	padding: 15px;
	margin-bottom: 25px;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	}

	.model-status.loaded {
	border-color: var(--green);
	box-shadow: 4px 4px 0 var(--green);
	}

	.model-status-text {
	color: var(--white);
	}

	.model-status.loaded .model-status-text {
	color: var(--green);
	}

	.lesson-list {
	list-style: none;
	}

	.lesson-item {
	padding: 18px;
	margin: 12px 0;
	background: var(--black);
	border: 2px solid var(--white);
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 0.5px;
	}

	.lesson-item:hover {
	transform: translate(4px, 4px);
	box-shadow: -4px -4px 0 var(--yellow);
	}

	.lesson-item.active {
	background: var(--yellow);
	color: var(--black);
	border-color: var(--yellow);
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--red);
	}

	.lesson-item.completed {
	border-color: var(--green);
	}

	.lesson-item.completed::after {
	content: " ✓";
	color: var(--green);
	font-weight: bold;
	}

	.content-area {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 40px;
	box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--cyan);
	min-height: 600px;
	}

	.lesson-content {
	display: none;
	}

	.lesson-content.active {
	display: block;
	animation: fadeInSlide 0.5s ease;
	}

	@keyframes fadeInSlide {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.lesson-title {
	font-family: 'Bungee', cursive;
	font-size: 2.5em;
	margin-bottom: 25px;
	color: var(--yellow);
	text-transform: uppercase;
	text-shadow: 3px 3px 0 var(--red);
	border-bottom: var(--border-width) solid var(--yellow);
	padding-bottom: 15px;
	}

	.lesson-description {
	font-size: 1.1em;
	line-height: 1.8;
	margin-bottom: 30px;
	color: var(--white);
	}

	.code-block {
	background: var(--black);
	border: var(--border-width) solid var(--yellow);
	padding: 25px;
	margin: 25px 0;
	overflow-x: auto;
	position: relative;
	box-shadow: 6px 6px 0 var(--cyan);
	}

	.code-block pre {
	color: var(--green);
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
	font-weight: 400;
	}

	.code-comment {
	color: #888;
	font-style: italic;
	}

	.code-keyword {
	color: var(--red);
	font-weight: 700;
	}

	.code-string {
	color: var(--cyan);
	}

	.code-function {
	color: var(--yellow);
	}

	.interactive-demo {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 25px;
	margin: 25px 0;
	box-shadow: 6px 6px 0 var(--red);
	}

	.interactive-demo h3 {
	font-family: 'Bungee', cursive;
	color: var(--yellow);
	margin-bottom: 20px;
	text-transform: uppercase;
	font-size: 1.5em;
	}

	.demo-controls {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	}

	button {
	background: var(--black);
	color: var(--white);
	border: var(--border-width) solid var(--white);
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: 'Space Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 4px 4px 0 var(--yellow);
	}

	button:hover:not(:disabled) {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--yellow);
	}

	button:active:not(:disabled) {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--yellow);
	}

	button:disabled {
	background: #333;
	border-color: #666;
	color: #666;
	cursor: not-allowed;
	box-shadow: none;
	}

	.btn-success {
	border-color: var(--green);
	box-shadow: 4px 4px 0 var(--green);
	color: var(--green);
	}

	.btn-success:hover:not(:disabled) {
	box-shadow: 2px 2px 0 var(--green);
	}

	.btn-danger {
	border-color: var(--red);
	box-shadow: 4px 4px 0 var(--red);
	color: var(--red);
	}

	.btn-danger:hover:not(:disabled) {
	box-shadow: 2px 2px 0 var(--red);
	}

	.output-area {
	background: var(--black);
	border: var(--border-width) solid var(--cyan);
	padding: 20px;
	margin: 20px 0;
	min-height: 150px;
	max-height: 500px;
	overflow-y: auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	box-shadow: 6px 6px 0 var(--yellow);
	}

	.token-visualization {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 25px 0;
	}

	.token-box {
	background: var(--black);
	border: 2px solid var(--white);
	padding: 15px 20px;
	text-align: center;
	min-width: 140px;
	transition: all 0.2s ease;
	box-shadow: 4px 4px 0 var(--cyan);
	}

	.token-box:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--yellow);
	border-color: var(--yellow);
	}

	.token-id {
	font-size: 11px;
	color: #888;
	margin-bottom: 8px;
	font-family: 'JetBrains Mono', monospace;
	}

	.token-text {
	font-size: 18px;
	color: var(--green);
	font-weight: 800;
	font-family: 'JetBrains Mono', monospace;
	}

	.hint-box, .info-box, .success-box, .error-box {
	background: var(--black);
	border-left: var(--border-width) solid;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 4px 4px 0;
	}

	.hint-box {
	border-color: var(--yellow);
	box-shadow: 4px 4px 0 var(--yellow);
	}

	.hint-box h4 {
	color: var(--yellow);
	margin-bottom: 12px;
	font-family: 'Bungee', cursive;
	text-transform: uppercase;
	font-size: 1.2em;
	}

	.info-box {
	border-color: var(--cyan);
	box-shadow: 4px 4px 0 var(--cyan);
	}

	.info-box h4 {
	color: var(--cyan);
	margin-bottom: 12px;
	font-family: 'Bungee', cursive;
	text-transform: uppercase;
	font-size: 1.2em;
	}

	.success-box {
	border-color: var(--green);
	box-shadow: 4px 4px 0 var(--green);
	}

	.success-box h4 {
	color: var(--green);
	margin-bottom: 12px;
	font-family: 'Bungee', cursive;
	text-transform: uppercase;
	font-size: 1.2em;
	}

	.error-box {
	border-color: var(--red);
	box-shadow: 4px 4px 0 var(--red);
	}

	.error-box h4 {
	color: var(--red);
	margin-bottom: 12px;
	font-family: 'Bungee', cursive;
	text-transform: uppercase;
	font-size: 1.2em;
	}

	.comparison-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 25px 0;
	border: var(--border-width) solid var(--white);
	}

	.comparison-table th,
	.comparison-table td {
	padding: 15px;
	text-align: left;
	border-bottom: 2px solid var(--white);
	border-right: 2px solid var(--white);
	}

	.comparison-table th {
	background: var(--yellow);
	color: var(--black);
	font-family: 'Bungee', cursive;
	text-transform: uppercase;
	font-weight: 400;
	}

	.comparison-table tr:hover {
	background: rgba(255, 255, 0, 0.1);
	}

	.comparison-table td:last-child,
	.comparison-table th:last-child {
	border-right: none;
	}

	.achievement-badge {
	display: inline-block;
	background: var(--yellow);
	color: var(--black);
	padding: 8px 15px;
	border: 2px solid var(--black);
	font-size: 12px;
	font-weight: 800;
	margin: 5px;
	text-transform: uppercase;
	font-family: 'Bungee', cursive;
	box-shadow: 3px 3px 0 var(--red);
	}

	input[type="text"],
	textarea {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	color: var(--white);
	padding: 15px;
	font-size: 14px;
	width: 100%;
	font-family: 'JetBrains Mono', monospace;
	margin-bottom: 15px;
	box-shadow: 4px 4px 0 var(--cyan);
	}

	input[type="text"]:focus,
	textarea:focus {
	outline: none;
	border-color: var(--yellow);
	box-shadow: 4px 4px 0 var(--yellow);
	}

	.loading-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid var(--white);
	border-top-color: var(--yellow);
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	to { transform: rotate(360deg); }
	}

	.playground-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	margin: 25px 0;
	}

	.playground-section {
	background: var(--black);
	border: var(--border-width) solid var(--white);
	padding: 25px;
	box-shadow: 6px 6px 0 var(--red);
	}

	.playground-section h3 {
	font-family: 'Bungee', cursive;
	color: var(--yellow);
	margin-bottom: 15px;
	text-transform: uppercase;
	}

	textarea {
	min-height: 300px;
	resize: vertical;
	}

	.resource-badge {
	display: inline-block;
	background: var(--black);
	border: 2px solid var(--cyan);
	padding: 5px 10px;
	margin: 5px;
	font-size: 11px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--cyan);
	text-transform: uppercase;
	}

	.example-item {
	background: var(--black);
	border: 2px solid var(--white);
	padding: 20px;
	margin: 15px 0;
	box-shadow: 4px 4px 0 var(--cyan);
	position: relative;
	}

	.example-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	}

	.example-item h4 {
	font-family: 'Bungee', cursive;
	color: var(--yellow);
	font-size: 1em;
	margin: 0;
	text-transform: uppercase;
	}

	.example-item input,
	.example-item textarea {
	width: 100%;
	margin-bottom: 10px;
	font-size: 13px;
	}

	.example-item textarea {
	min-height: 60px;
	resize: vertical;
	}

	.remove-example-btn {
	background: var(--black);
	color: var(--red);
	border: 2px solid var(--red);
	padding: 8px 15px;
	font-size: 12px;
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 var(--red);
	}

	.remove-example-btn:hover {
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--red);
	}

	@media (max-width: 1024px) {
	.main-content {
	grid-template-columns: 1fr;
	}
	.sidebar {
	position: static;
	}
	.playground-grid {
	grid-template-columns: 1fr;
	}
	.header h1 {
	font-size: 2.5em;
	}
	}

	@media (max-width: 768px) {
	.header h1 {
	font-size: 2em;
	}
	.lesson-title {
	font-size: 1.8em;
	}
	.model-info-grid {
	grid-template-columns: 1fr;
	}
	.resource-links ul {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<!-- Model Loading Overlay -->
	<div class="model-loading-overlay" id="loadingOverlay">
	<div class="loading-content">
	<h2 class="loading-title">LOADING FUNCTIONGEMMA</h2>
	<ul class="loading-steps" id="loadingSteps">
	<li class="loading-step" id="step1">Initializing transformers.js...</li>
	<li class="loading-step" id="step2">Loading tokenizer...</li>
	<li class="loading-step" id="step3">Detecting device capabilities...</li>
	<li class="loading-step" id="step4">Loading ONNX model...</li>
	<li class="loading-step" id="step5">Model ready!</li>
	</ul>
	<div class="model-info-grid" id="modelInfoGrid" style="display: none;">
	<div class="info-card">
	<h3>MODEL</h3>
	<p>functiongemma-270m-it-ONNX</p>
	</div>
	<div class="info-card">
	<h3>PARAMETERS</h3>
	<p>270 Million</p>
	</div>
	<div class="info-card">
	<h3>FORMAT</h3>
	<p id="modelFormat">Detecting...</p>
	</div>
	<div class="info-card">
	<h3>DEVICE</h3>
	<p id="modelDevice">Detecting...</p>
	</div>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="header">
	<h1>FUNCTIONGEMMA</h1>
	<p>INTERACTIVE TUTORIAL</p>
	<p style="font-size: 0.9em; margin-top: 10px; font-weight: 400; text-transform: none;">Master Function Calling, Tokenization & Prompt Engineering</p>
	</div>

	<div class="progress-bar">
	<div class="progress-fill">
	<div class="progress-inner" id="progressBar" style="width: 0%">0% COMPLETE</div>
	</div>
	<div id="achievements"></div>
	</div>

	<div class="main-content">
	<div class="sidebar">
	<div class="model-status" id="modelStatus">
	<strong>STATUS:</strong> <span class="model-status-text" id="modelStatusText">READY</span>
	</div>
	<ul class="lesson-list">
	<li class="lesson-item active" data-lesson="0">🚀 WELCOME</li>
	<li class="lesson-item" data-lesson="1">🔤 TOKENIZATION</li>
	<li class="lesson-item" data-lesson="2">❌ ZERO-SHOT</li>
	<li class="lesson-item" data-lesson="3">⚠️ ONE-SHOT</li>
	<li class="lesson-item" data-lesson="4">✅ FEW-SHOT</li>
	<li class="lesson-item" data-lesson="5">🔍 TOKEN DIVE</li>
	<li class="lesson-item" data-lesson="6">🎯 PLAYGROUND</li>
	<li class="lesson-item" data-lesson="7">📚 RESOURCES</li>
	</ul>
	</div>

	<div class="content-area">
	<!-- Lesson 0: Welcome -->
	<div class="lesson-content active" data-lesson="0">
	<h2 class="lesson-title">WELCOME TO FUNCTIONGEMMA</h2>
	<div class="lesson-description">
	<p>Welcome to the tutorial on FunctionGemma. This interactive experience will teach you everything about function calling, tokenization, and prompt engineering through hands-on experimentation.</p>

	<div class="info-box">
	<h4>WHAT YOU'LL LEARN</h4>
	<ul style="margin-left: 20px; line-height: 2.5;">
	<li>How tokenization works in language models</li>
	<li>Why zero-shot function calling fails</li>
	<li>How few-shot examples solve the problem</li>
	<li>Token-level analysis and debugging</li>
	<li>Best practices for prompt engineering</li>
	<li>ONNX model optimization and deployment</li>
	</ul>
	</div>

	<div class="hint-box">
	<h4>ABOUT FUNCTIONGEMMA-270M-IT-ONNX</h4>
	<p><strong>Model:</strong> onnx-community/functiongemma-270m-it-ONNX</p>
	<p><strong>Size:</strong> 270 million parameters</p>
	<p><strong>Purpose:</strong> Specialized for function calling tasks</p>
	<p><strong>Format:</strong> ONNX quantized (q4 for WebGPU, q8 for WASM)</p>
	<p><strong>Key Finding:</strong> Requires few-shot examples to generate correct function calls!</p>
	<p><strong>Architecture:</strong> Based on Google's Gemma 3 270M, fine-tuned for function calling</p>
	</div>

	<div class="success-box">
	<h4>MODEL LOADED SUCCESSFULLY</h4>
	<p>The model has been automatically loaded and is ready to use. You can now proceed with the lessons!</p>
	</div>
	</div>
	</div>

	<!-- Lesson 1: Tokenization -->
	<div class="lesson-content" data-lesson="1">
	<h2 class="lesson-title">TOKENIZATION BASICS</h2>
	<div class="lesson-description">
	<p>Tokenization is the process of converting text into tokens (numbers) that the model can understand. Let's explore this interactively!</p>

	<div class="info-box">
	<h4>WHAT IS TOKENIZATION?</h4>
	<p>Language models don't understand words directly. They work with <strong>tokens</strong> - numeric IDs that represent pieces of text. A token can be a word, part of a word, or even a single character.</p>
	</div>

	<div class="interactive-demo">
	<h3>TRY IT YOURSELF</h3>
	<input type="text" id="tokenizeInput" placeholder="Enter text to tokenize..." value="call:get_current_temperature">
	<button onclick="demonstrateTokenization()">TOKENIZE</button>
	<div id="tokenizationOutput" class="output-area" style="margin-top: 15px;"></div>
	</div>

	<div class="code-block">
	<pre><span class="code-comment">// How tokenization works in code:</span>
	<span class="code-keyword">const</span> text = <span class="code-string">"call:get_current_temperature"</span>;
	<span class="code-comment">// Tokenize the text</span>
	<span class="code-keyword">const</span> tokens = <span class="code-function">await tokenizer</span>.encode(text);
	<span class="code-comment">// Result: [6639, 236787, 828, 236779, 4002, 236779, 27495]</span>
	<span class="code-comment">// Each number represents a token ID</span>

	<span class="code-comment">// Decode tokens back to text</span>
	<span class="code-keyword">const</span> decoded = <span class="code-function">await tokenizer</span>.decode(tokens);
	<span class="code-comment">// Result: "call:get_current_temperature"</span></pre>
	</div>

	<div class="hint-box">
	<h4>KEY INSIGHT</h4>
	<p>Special tokens like <code><start_function_call></code> have specific token IDs (e.g., token 48). The model uses these to understand structure.</p>
	</div>
	</div>
	</div>

	<!-- Lesson 2: Zero-Shot -->
	<div class="lesson-content" data-lesson="2">
	<h2 class="lesson-title">ZERO-SHOT FUNCTION CALLING (WHY IT FAILS)</h2>
	<div class="lesson-description">
	<p>Zero-shot means asking the model to do something without showing it an example. Let's see what happens!</p>

	<div class="error-box">
	<h4>THE PROBLEM</h4>
	<p>Without examples, FunctionGemma generates <code>error:</code> instead of <code>call:</code> after <code><start_function_call></code>.</p>
	</div>

	<div class="interactive-demo">
	<h3>TEST ZERO-SHOT APPROACH</h3>
	<input type="text" id="zeroShotQuery" value="What's the temperature in London?" placeholder="Enter your query...">
	<button onclick="testZeroShot()">TEST ZERO-SHOT</button>
	<div id="zeroShotOutput" class="output-area" style="margin-top: 15px;"></div>
	</div>

	<div class="code-block">
	<pre><span class="code-comment">// Zero-shot approach - NO examples provided</span>
	<span class="code-keyword">const</span> messages = [
	{
	role: <span class="code-string">"developer"</span>,
	content: <span class="code-string">"You are a model that can do function calling..."</span>
	},
	{
	role: <span class="code-string">"user"</span>,
	content: <span class="code-string">"What's the temperature in London?"</span>
	}
	<span class="code-comment">// ❌ No example shown to the model!</span>
	];

	<span class="code-comment">// Result: Model generates "error:" instead of "call:"</span>
	<span class="code-comment">// Token 1899 ("error") is chosen instead of token 6639 ("call")</span></pre>
	</div>

	<div class="hint-box">
	<h4>TOKEN ANALYSIS</h4>
	<p>After <code><start_function_call></code> (token 48), the model's probability distribution favors token 1899 ("error") over token 6639 ("call") when no example is provided.</p>
	</div>
	</div>
	</div>

	<!-- Lesson 3: One-Shot -->
	<div class="lesson-content" data-lesson="3">
	<h2 class="lesson-title">ONE-SHOT FUNCTION CALLING (PARTIAL SUCCESS)</h2>
	<div class="lesson-description">
	<p>One-shot means showing the model ONE example. Let's see if this helps!</p>

	<div class="interactive-demo">
	<h3>TEST ONE-SHOT APPROACH</h3>
	<input type="text" id="oneShotQuery" value="What's the temperature in Tokyo?" placeholder="Enter your query...">
	<button onclick="testOneShot()">TEST ONE-SHOT</button>
	<div id="oneShotOutput" class="output-area" style="margin-top: 15px;"></div>
	</div>

	<div class="code-block">
	<pre><span class="code-comment">// One-shot approach - ONE example provided</span>
	<span class="code-keyword">const</span> messages = [
	{
	role: <span class="code-string">"developer"</span>,
	content: <span class="code-string">"You are a model that can do function calling..."</span>
	},
	{
	role: <span class="code-string">"user"</span>,
	content: <span class="code-string">"What's the temperature in Paris?"</span>
	},
	{
	role: <span class="code-string">"assistant"</span>,
	<span class="code-comment">// ✅ ONE example showing correct format</span>
	content: <span class="code-string">"<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"</span>
	},
	{
	role: <span class="code-string">"user"</span>,
	content: <span class="code-string">"What's the temperature in Tokyo?"</span>
	}
	];</pre>
	</div>

	<div class="info-box">
	<h4>RESULTS MAY VARY</h4>
	<p>One-shot can work sometimes, but it's not as reliable as few-shot. The model needs more context to consistently generate correct function calls.</p>
	</div>
	</div>
	</div>

	<!-- Lesson 4: Few-Shot -->
	<div class="lesson-content" data-lesson="4">
	<h2 class="lesson-title">FEW-SHOT FUNCTION CALLING (THE SOLUTION!)</h2>
	<div class="lesson-description">
	<p>Few-shot means showing the model multiple examples. This is the proven solution!</p>

	<div class="success-box">
	<h4>THE SOLUTION</h4>
	<p>By providing a few-shot example, we shift the model's token probabilities. Token 6639 ("call") becomes more likely than token 1899 ("error").</p>
	</div>

	<div class="interactive-demo">
	<h3>TEST FEW-SHOT APPROACH</h3>
	<input type="text" id="fewShotQuery" value="What's the temperature in New York?" placeholder="Enter your query...">
	<button onclick="testFewShot()">TEST FEW-SHOT</button>
	<div id="fewShotOutput" class="output-area" style="margin-top: 15px;"></div>
	</div>

	<div class="code-block">
	<pre><span class="code-comment">// ✅ FEW-SHOT APPROACH (PROVEN TO WORK):</span>
	<span class="code-comment">// Add example conversation showing correct format</span>
	<span class="code-keyword">const</span> messages = [
	{
	role: <span class="code-string">"developer"</span>,
	content: <span class="code-string">"You are a model that can do function calling with the following functions"</span>
	},
	{
	role: <span class="code-string">"user"</span>,
	content: <span class="code-string">"What's the temperature in Paris?"</span>
	},
	{
	role: <span class="code-string">"assistant"</span>,
	<span class="code-comment">// ✅ Example showing the EXACT format we want</span>
	content: <span class="code-string">"<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"</span>
	},
	{
	role: <span class="code-string">"user"</span>,
	content: query <span class="code-comment">// Your actual query</span>
	}
	];

	<span class="code-comment">// Apply chat template with tools</span>
	<span class="code-keyword">const</span> inputs = <span class="code-function">await tokenizer</span>.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: <span class="code-keyword">true</span>,
	add_generation_prompt: <span class="code-keyword">true</span>,
	return_dict: <span class="code-keyword">true</span>
	});

	<span class="code-comment">// Generate response</span>
	<span class="code-keyword">const</span> output = <span class="code-function">await model</span>.generate({
	...inputs,
	max_new_tokens: <span class="code-keyword">512</span>,
	do_sample: <span class="code-keyword">false</span>,
	temperature: <span class="code-keyword">0.0</span>
	});

	<span class="code-comment">// ✅ Result: Correct function call generated!</span>
	<span class="code-comment">// <start_function_call>call:get_current_temperature{location:<escape>New York<escape>}<end_function_call></span></pre>
	</div>

	<div class="hint-box">
	<h4>WHY FEW-SHOT WORKS</h4>
	<ul style="margin-left: 20px; line-height: 2.5;">
	<li>Shows the model the <strong>exact format</strong> we expect</li>
	<li>Shifts token probabilities in favor of "call:" instead of "error:"</li>
	<li>Provides context about the task structure</li>
	<li>Works consistently with the quantized ONNX model</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Lesson 5: Token Analysis -->
	<div class="lesson-content" data-lesson="5">
	<h2 class="lesson-title">TOKEN-LEVEL DEEP DIVE</h2>
	<div class="lesson-description">
	<p>Let's examine what happens at the token level when the model generates function calls.</p>

	<div class="interactive-demo">
	<h3>TOKEN-LEVEL ANALYSIS</h3>
	<button onclick="analyzeTokens()">ANALYZE TOKEN GENERATION</button>
	<div id="tokenAnalysisOutput" class="output-area" style="margin-top: 15px;"></div>
	<div id="tokenVisualization" class="token-visualization" style="margin-top: 15px;"></div>
	</div>

	<table class="comparison-table">
	<thead>
	<tr>
	<th>TOKEN ID</th>
	<th>TOKEN TEXT</th>
	<th>CONTEXT</th>
	<th>PROBABILITY SHIFT</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>48</td>
	<td><start_function_call></td>
	<td>Always correct</td>
	<td>N/A</td>
	</tr>
	<tr>
	<td>1899</td>
	<td>"error"</td>
	<td>Zero-shot (no example)</td>
	<td>❌ High probability</td>
	</tr>
	<tr>
	<td>6639</td>
	<td>"call"</td>
	<td>Few-shot (with example)</td>
	<td>✅ High probability</td>
	</tr>
	<tr>
	<td>236787</td>
	<td>":"</td>
	<td>Always correct</td>
	<td>N/A</td>
	</tr>
	</tbody>
	</table>

	<div class="code-block">
	<pre><span class="code-comment">// Token-level analysis of generated output</span>
	<span class="code-comment">// First 20 generated tokens:</span>

	<span class="code-comment">// Token 48: "<start_function_call>" ✅</span>
	<span class="code-comment">// Token 6639: "call" ✅ (with few-shot) or Token 1899: "error" ❌ (zero-shot)</span>
	<span class="code-comment">// Token 236787: ":" ✅</span>
	<span class="code-comment">// Token 828: "get" ✅</span>
	<span class="code-comment">// Token 236779: "_" ✅</span>
	<span class="code-comment">// Token 4002: "current" ✅</span>
	<span class="code-comment">// Token 236779: "_" ✅</span>
	<span class="code-comment">// Token 27495: "temperature" ✅</span>
	<span class="code-comment">// Token 236782: "{" ✅</span>
	<span class="code-comment">// Token 7125: "location" ✅</span>
	<span class="code-comment">// Token 236787: ":" ✅</span>
	<span class="code-comment">// Token 52: "<escape>" ✅</span>
	<span class="code-comment">// Token 27822: "London" ✅</span>
	<span class="code-comment">// Token 52: "<escape>" ✅</span>
	<span class="code-comment">// Token 236783: "}" ✅</span>
	<span class="code-comment">// Token 49: "<end_function_call>" ✅</span>

	<span class="code-comment">// The critical decision point is after token 48:</span>
	<span class="code-comment">// - Without example: Token 1899 ("error") is more likely</span>
	<span class="code-comment">// - With example: Token 6639 ("call") is more likely</span></pre>
	</div>

	<div class="info-box">
	<h4>HYPOTHESIS</h4>
	<p>The model was trained on function calling data that included error handling examples. Without context, it defaults to the error generation pattern. Few-shot examples provide the necessary context to trigger the correct generation path.</p>
	</div>
	</div>
	</div>

	<!-- Lesson 6: Playground -->
	<div class="lesson-content" data-lesson="6">
	<h2 class="lesson-title">INTERACTIVE PLAYGROUND</h2>
	<div class="lesson-description">
	<p>Now it's your turn! Experiment with different queries and see how the model responds. Add your own examples to test zero-shot, one-shot, and few-shot approaches.</p>

	<div class="playground-grid">
	<div class="playground-section">
	<h3>FUNCTION SCHEMA</h3>
	<textarea id="playgroundSchema" rows="15" style="font-family: 'JetBrains Mono', monospace; font-size: 12px;">{
	"type": "function",
	"function": {
	"name": "get_current_temperature",
	"description": "Gets the current temperature for a given location.",
	"parameters": {
	"type": "object",
	"properties": {
	"location": {
	"type": "string",
	"description": "The city name, e.g. San Francisco"
	}
	},
	"required": ["location"]
	}
	}
	}</textarea>
	</div>

	<div class="playground-section">
	<h3>SYSTEM MESSAGE</h3>
	<textarea id="playgroundSystemMessage" rows="3" style="font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 15px;">You are a model that can do function calling with the following functions</textarea>

	<h3 style="margin-top: 20px;">YOUR QUERY</h3>
	<input type="text" id="playgroundQuery" value="What's the temperature in London?" placeholder="Enter your query...">
	<div class="demo-controls" style="margin-top: 15px;">
	<button onclick="playgroundTest('zero')" class="btn-danger">ZERO-SHOT</button>
	<button onclick="playgroundTest('one')">ONE-SHOT</button>
	<button onclick="playgroundTest('few')" class="btn-success">FEW-SHOT</button>
	</div>
	<div style="margin-top: 15px;">
	<label style="display: block; margin-bottom: 10px; font-weight: 700;">MAX TOKENS:</label>
	<input type="number" id="maxTokens" value="512" min="50" max="1024" style="width: 100px;">
	</div>
	</div>
	</div>

	<div class="interactive-demo" style="margin-top: 25px;">
	<h3>CUSTOM EXAMPLES</h3>
	<p style="margin-bottom: 15px; font-size: 0.9em; color: #888;">Add example conversations to use in one-shot and few-shot modes. Each example should show a user query and the expected assistant response with function call.</p>
	<div id="playgroundExamples" style="margin-bottom: 15px;">
	<!-- Examples will be added here dynamically -->
	</div>
	<button onclick="addPlaygroundExample()" style="margin-top: 10px;">+ ADD EXAMPLE</button>
	<div class="info-box" style="margin-top: 15px;">
	<h4>EXAMPLE FORMAT</h4>
	<p style="font-family: 'JetBrains Mono', monospace; font-size: 0.85em; margin-top: 10px;">
	User: "What's the temperature in Paris?"<br>
	Assistant: "<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"
	</p>
	<p style="margin-top: 10px; font-size: 0.9em;">For few-shot, add multiple examples. For one-shot, only the first example will be used. For zero-shot, no examples are used.</p>
	</div>
	</div>

	<div class="interactive-demo">
	<h3>OUTPUT</h3>
	<div id="playgroundOutput" class="output-area"></div>
	</div>

	<div class="hint-box">
	<h4>TIPS FOR EXPERIMENTATION</h4>
	<ul style="margin-left: 20px; line-height: 2.5;">
	<li>Try different cities and locations</li>
	<li>Compare zero-shot vs few-shot results</li>
	<li>Modify the function schema and see what happens</li>
	<li>Add custom examples to test different scenarios</li>
	<li>Watch the token visualization to understand the generation process</li>
	<li>Experiment with different max_tokens values</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Lesson 7: Resources -->
	<div class="lesson-content" data-lesson="7">
	<h2 class="lesson-title">RESOURCES & LINKS</h2>
	<div class="lesson-description">
	<p>Explore these resources to deepen your understanding of FunctionGemma, ONNX, and function calling.</p>

	<div class="resource-links">
	<h3>OFFICIAL DOCUMENTATION</h3>
	<ul>
	<li><a href="https://ai.google.dev/gemma/docs/functiongemma" target="_blank">FunctionGemma Model Overview - Google AI</a></li>
	<li><a href="https://ai.google.dev/gemma/docs/capabilities/function-calling" target="_blank">Function Calling with Gemma - Google AI</a></li>
	<li><a href="https://ai.google.dev/gemma/docs/functiongemma/full-function-calling-sequence-with-functiongemma" target="_blank">Full Function Calling Sequence - Google AI</a></li>
	<li><a href="https://blog.google/technology/developers/functiongemma/" target="_blank">FunctionGemma Blog Post - Google</a></li>
	</ul>
	</div>

	<div class="resource-links">
	<h3>TUTORIALS & GUIDES</h3>
	<ul>
	<li><a href="https://docs.unsloth.ai/models/functiongemma" target="_blank">FunctionGemma: How to Run & Fine-tune - Unsloth</a></li>
	<li><a href="https://huggingface.co/onnx-community/functiongemma-270m-it-ONNX" target="_blank">FunctionGemma ONNX Model - Hugging Face</a></li>
	<li><a href="https://huggingface.co/docs/transformers.js" target="_blank">Transformers.js Documentation</a></li>
	</ul>
	</div>

	<div class="resource-links">
	<h3>ONNX & OPTIMIZATION</h3>
	<ul>
	<li><a href="https://onnx.ai/" target="_blank">ONNX - Open Neural Network Exchange</a></li>
	<li><a href="https://onnx.ai/onnx/" target="_blank">ONNX Runtime Documentation</a></li>
	<li><a href="https://huggingface.co/docs/optimum/onnxruntime/usage_guides/quantization" target="_blank">ONNX Model Quantization Guide</a></li>
	</ul>
	</div>

	<div class="resource-links">
	<h3>FUNCTION CALLING & AI</h3>
	<ul>
	<li><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank">OpenAI Function Calling Guide</a></li>
	<li><a href="https://ai.google.dev/gemma/docs/functiongemma" target="_blank">Google Function Calling Best Practices</a></li>
	<li><a href="https://blog.google/technology/developers/functiongemma/" target="_blank">FunctionGemma Physics Playground Demo</a></li>
	</ul>
	</div>

	<div class="info-box">
	<h4>KEY RESOURCES SUMMARY</h4>
	<p><strong>FunctionGemma</strong> is a specialized 270M parameter model fine-tuned from Google's Gemma 3 for function calling tasks. It's optimized for edge deployment and requires few-shot examples for reliable function call generation.</p>
	<p><strong>ONNX</strong> (Open Neural Network Exchange) is an open format for representing machine learning models, enabling interoperability between different frameworks and optimized inference across platforms.</p>
	<p>The model is available in quantized formats (q4 for WebGPU, q8 for WASM) to enable efficient browser-based inference.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script type="module">
	// Global state
	let model = null;
	let tokenizer = null;
	let currentLesson = 0;
	let completedLessons = new Set();
	let achievements = new Set();

	// Initialize
	document.addEventListener('DOMContentLoaded', () => {
	setupLessonNavigation();
	updateProgress();
	initializePlayground(); // Initialize playground with default example
	loadModel(); // Auto-load model
	});

	function setupLessonNavigation() {
	document.querySelectorAll('.lesson-item').forEach(item => {
	item.addEventListener('click', () => {
	const lessonNum = parseInt(item.dataset.lesson);
	switchLesson(lessonNum);
	});
	});
	}

	function switchLesson(lessonNum) {
	// Update active lesson
	document.querySelectorAll('.lesson-item').forEach(item => {
	item.classList.remove('active');
	if (parseInt(item.dataset.lesson) === lessonNum) {
	item.classList.add('active');
	}
	});

	// Update content
	document.querySelectorAll('.lesson-content').forEach(content => {
	content.classList.remove('active');
	if (parseInt(content.dataset.lesson) === lessonNum) {
	content.classList.add('active');
	}
	});

	currentLesson = lessonNum;

	// Initialize playground when switching to lesson 6
	if (lessonNum === 6) {
	setTimeout(() => initializePlayground(), 100);
	}
	}

	function completeLesson(lessonNum) {
	completedLessons.add(lessonNum);
	document.querySelectorAll('.lesson-item').forEach(item => {
	if (parseInt(item.dataset.lesson) === lessonNum) {
	item.classList.add('completed');
	}
	});
	updateProgress();
	}

	function addAchievement(text) {
	achievements.add(text);
	const achievementsDiv = document.getElementById('achievements');
	achievementsDiv.innerHTML = Array.from(achievements).map(a =>
	`<span class="achievement-badge">${a}</span>`
	).join('');
	}

	function updateProgress() {
	const total = 8;
	const completed = completedLessons.size;
	const percentage = Math.round((completed / total) * 100);
	document.getElementById('progressBar').style.width = percentage + '%';
	document.getElementById('progressBar').textContent = `${percentage}% COMPLETE`;
	}

	function updateLoadingStep(stepId, status) {
	const step = document.getElementById(stepId);
	if (!step) return;

	step.classList.remove('active', 'completed');
	if (status === 'active') {
	step.classList.add('active');
	} else if (status === 'completed') {
	step.classList.add('completed');
	}
	}

	function log(message, type = 'info', targetId = null) {
	const colors = {
	error: '#FF0000',
	success: '#00FF00',
	log: '#FFFF00',
	info: '#00FFFF',
	warning: '#FF6B6B'
	};

	const icon = {
	error: '❌',
	success: '✅',
	log: '📝',
	info: 'ℹ️',
	warning: '⚠️'
	};

	const output = targetId ? document.getElementById(targetId) : null;
	if (output) {
	const timestamp = new Date().toLocaleTimeString();
	const div = document.createElement('div');
	div.style.color = colors[type] \|\| colors.info;
	div.style.marginBottom = '8px';
	div.style.fontFamily = "'JetBrains Mono', monospace";
	div.textContent = `[${timestamp}] ${icon[type] \|\| ''} ${message}`;
	output.appendChild(div);
	output.scrollTop = output.scrollHeight;
	}
	console.log(`[${type.toUpperCase()}]`, message);
	}

	async function loadModel() {
	const overlay = document.getElementById('loadingOverlay');
	const statusText = document.getElementById('modelStatusText');
	const modelStatus = document.getElementById('modelStatus');
	const modelInfoGrid = document.getElementById('modelInfoGrid');

	try {
	updateLoadingStep('step1', 'active');
	log('🚀 Starting model load...', 'log');
	await new Promise(resolve => setTimeout(resolve, 500));

	log('📦 Importing transformers.js...', 'log');
	const { env, AutoTokenizer, AutoModelForCausalLM } = await import(
	"https://cdn.jsdelivr.net/npm/@huggingface/transformers@latest"
	);

	env.allowRemoteModels = true;
	env.allowLocalModels = false;
	env.useBrowserCache = true;

	updateLoadingStep('step1', 'completed');
	updateLoadingStep('step2', 'active');
	await new Promise(resolve => setTimeout(resolve, 300));

	const modelId = "onnx-community/functiongemma-270m-it-ONNX";

	log('🔤 Loading tokenizer...', 'log');
	tokenizer = await AutoTokenizer.from_pretrained(modelId);
	log('✅ Tokenizer loaded', 'success');
	updateLoadingStep('step2', 'completed');
	updateLoadingStep('step3', 'active');
	await new Promise(resolve => setTimeout(resolve, 300));

	log('🤖 Detecting device capabilities...', 'log');
	const hasWebGPU = !!navigator.gpu;
	const modelConfig = hasWebGPU
	? { dtype: "q4", device: "webgpu" }
	: { dtype: "q8", device: "wasm" };

	document.getElementById('modelFormat').textContent = hasWebGPU ? 'q4 (WebGPU)' : 'q8 (WASM)';
	document.getElementById('modelDevice').textContent = hasWebGPU ? 'WebGPU' : 'WASM';
	modelInfoGrid.style.display = 'grid';

	log(`⚙️ Using config: ${JSON.stringify(modelConfig)}`, 'info');
	updateLoadingStep('step3', 'completed');
	updateLoadingStep('step4', 'active');
	await new Promise(resolve => setTimeout(resolve, 300));

	log('🤖 Loading model...', 'log');
	model = await AutoModelForCausalLM.from_pretrained(modelId, modelConfig);
	log('✅ Model loaded successfully!', 'success');
	updateLoadingStep('step4', 'completed');
	updateLoadingStep('step5', 'active');
	await new Promise(resolve => setTimeout(resolve, 500));
	updateLoadingStep('step5', 'completed');

	statusText.textContent = 'READY';
	modelStatus.classList.add('loaded');
	addAchievement('🎯 MODEL LOADED');
	completeLesson(0);

	// Hide overlay after a brief delay
	setTimeout(() => {
	overlay.classList.add('hidden');
	}, 1000);

	} catch (error) {
	log(`❌ Error loading model: ${error.message}`, 'error');
	statusText.textContent = 'ERROR';
	console.error(error);
	overlay.innerHTML = `
	<div class="loading-content">
	<h2 class="loading-title" style="color: #FF0000;">LOADING FAILED</h2>
	<p style="color: #FFFFFF; font-family: 'JetBrains Mono', monospace; margin-top: 20px;">${error.message}</p>
	<button onclick="location.reload()" style="margin-top: 30px;">RETRY</button>
	</div>
	`;
	}
	}

	async function demonstrateTokenization() {
	if (!tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const input = document.getElementById('tokenizeInput').value;
	const output = document.getElementById('tokenizationOutput');
	output.innerHTML = '';

	log(`Tokenizing: "${input}"`, 'info', 'tokenizationOutput');

	try {
	const tokens = await tokenizer.encode(input, { return_tensors: false });
	log(`Token IDs: [${tokens.join(', ')}]`, 'info', 'tokenizationOutput');
	log(`Total tokens: ${tokens.length}`, 'info', 'tokenizationOutput');

	// Visualize tokens
	const viz = document.createElement('div');
	viz.className = 'token-visualization';
	viz.style.marginTop = '15px';

	for (let i = 0; i < Math.min(tokens.length, 20); i++) {
	const tokenId = tokens[i];
	const tokenText = await tokenizer.decode([tokenId], { skip_special_tokens: false });

	const tokenBox = document.createElement('div');
	tokenBox.className = 'token-box';
	tokenBox.innerHTML = `
	<div class="token-id">ID: ${tokenId}</div>
	<div class="token-text">${tokenText.replace(/</g, '<').replace(/>/g, '>')}</div>
	`;
	viz.appendChild(tokenBox);
	}

	output.appendChild(viz);
	addAchievement('🔤 TOKEN MASTER');

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'tokenizationOutput');
	}
	}

	async function testZeroShot() {
	if (!model \|\| !tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const query = document.getElementById('zeroShotQuery').value;
	const output = document.getElementById('zeroShotOutput');
	output.innerHTML = '';

	log('🧪 Testing Zero-Shot Approach...', 'log', 'zeroShotOutput');
	log(`Query: "${query}"`, 'info', 'zeroShotOutput');

	try {
	const weatherFunction = {
	type: "function",
	function: {
	name: "get_current_temperature",
	description: "Gets the current temperature for a given location.",
	parameters: {
	type: "object",
	properties: {
	location: {
	type: "string",
	description: "The city name, e.g. San Francisco",
	},
	},
	required: ["location"],
	},
	},
	};

	const messages = [
	{
	role: "developer",
	content: "You are a model that can do function calling with the following functions"
	},
	{
	role: "user",
	content: query
	}
	];

	log('❌ No example provided to the model', 'warning', 'zeroShotOutput');

	const inputs = await tokenizer.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: true,
	add_generation_prompt: true,
	return_dict: true
	});

	const output_tensor = await model.generate({
	...inputs,
	max_new_tokens: 512,
	do_sample: false,
	temperature: 0.0
	});

	const seqLen = inputs.input_ids.dims[1];
	const generated = output_tensor.slice(0, [seqLen, null]);
	const decoded = await tokenizer.decode(generated, { skip_special_tokens: false });

	log('📤 Generated output:', 'info', 'zeroShotOutput');
	log(decoded, 'log', 'zeroShotOutput');

	if (decoded.includes('error:')) {
	log('❌ Model generated "error:" instead of "call:"', 'error', 'zeroShotOutput');
	log('💡 This is why zero-shot fails!', 'info', 'zeroShotOutput');
	} else if (decoded.includes('call:')) {
	log('✅ Unexpected success! (This is rare)', 'success', 'zeroShotOutput');
	}

	completeLesson(2);

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'zeroShotOutput');
	}
	}

	async function testOneShot() {
	if (!model \|\| !tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const query = document.getElementById('oneShotQuery').value;
	const output = document.getElementById('oneShotOutput');
	output.innerHTML = '';

	log('🧪 Testing One-Shot Approach...', 'log', 'oneShotOutput');
	log(`Query: "${query}"`, 'info', 'oneShotOutput');

	try {
	const weatherFunction = {
	type: "function",
	function: {
	name: "get_current_temperature",
	description: "Gets the current temperature for a given location.",
	parameters: {
	type: "object",
	properties: {
	location: {
	type: "string",
	description: "The city name, e.g. San Francisco",
	},
	},
	required: ["location"],
	},
	},
	};

	// One-shot: ONE example
	const messages = [
	{
	role: "developer",
	content: "You are a model that can do function calling with the following functions"
	},
	{
	role: "user",
	content: "What's the temperature in Paris?"
	},
	{
	role: "assistant",
	content: "<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"
	},
	{
	role: "user",
	content: query
	}
	];

	log('⚠️ One example provided', 'info', 'oneShotOutput');

	const inputs = await tokenizer.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: true,
	add_generation_prompt: true,
	return_dict: true
	});

	const output_tensor = await model.generate({
	...inputs,
	max_new_tokens: 512,
	do_sample: false,
	temperature: 0.0
	});

	const seqLen = inputs.input_ids.dims[1];
	const generated = output_tensor.slice(0, [seqLen, null]);
	const decoded = await tokenizer.decode(generated, { skip_special_tokens: false });

	log('📤 Generated output:', 'info', 'oneShotOutput');
	log(decoded, 'log', 'oneShotOutput');

	if (decoded.includes('call:')) {
	log('✅ Success! One-shot worked', 'success', 'oneShotOutput');
	} else {
	log('⚠️ One-shot may not always work reliably', 'warning', 'oneShotOutput');
	}

	completeLesson(3);

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'oneShotOutput');
	}
	}

	async function testFewShot() {
	if (!model \|\| !tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const query = document.getElementById('fewShotQuery').value;
	const output = document.getElementById('fewShotOutput');
	output.innerHTML = '';

	log('🧪 Testing Few-Shot Approach...', 'log', 'fewShotOutput');
	log(`Query: "${query}"`, 'info', 'fewShotOutput');

	try {
	const weatherFunction = {
	type: "function",
	function: {
	name: "get_current_temperature",
	description: "Gets the current temperature for a given location.",
	parameters: {
	type: "object",
	properties: {
	location: {
	type: "string",
	description: "The city name, e.g. San Francisco",
	},
	},
	required: ["location"],
	},
	},
	};

	// Few-shot: Example provided
	const messages = [
	{
	role: "developer",
	content: "You are a model that can do function calling with the following functions"
	},
	{
	role: "user",
	content: "What's the temperature in Paris?"
	},
	{
	role: "assistant",
	content: "<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"
	},
	{
	role: "user",
	content: query
	}
	];

	log('✅ Few-shot example provided', 'success', 'fewShotOutput');

	const inputs = await tokenizer.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: true,
	add_generation_prompt: true,
	return_dict: true
	});

	const output_tensor = await model.generate({
	...inputs,
	max_new_tokens: 512,
	do_sample: false,
	temperature: 0.0
	});

	const seqLen = inputs.input_ids.dims[1];
	const generated = output_tensor.slice(0, [seqLen, null]);
	const decoded = await tokenizer.decode(generated, { skip_special_tokens: false });

	log('📤 Generated output:', 'info', 'fewShotOutput');
	log(decoded, 'log', 'fewShotOutput');

	if (decoded.includes('call:')) {
	log('✅ SUCCESS! Few-shot works perfectly!', 'success', 'fewShotOutput');
	addAchievement('🎯 FEW-SHOT MASTER');
	}

	completeLesson(4);

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'fewShotOutput');
	}
	}

	async function analyzeTokens() {
	if (!model \|\| !tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const output = document.getElementById('tokenAnalysisOutput');
	const viz = document.getElementById('tokenVisualization');
	output.innerHTML = '';
	viz.innerHTML = '';

	log('🔍 Analyzing token generation...', 'log', 'tokenAnalysisOutput');

	try {
	const weatherFunction = {
	type: "function",
	function: {
	name: "get_current_temperature",
	description: "Gets the current temperature for a given location.",
	parameters: {
	type: "object",
	properties: {
	location: {
	type: "string",
	description: "The city name, e.g. San Francisco",
	},
	},
	required: ["location"],
	},
	},
	};

	const messages = [
	{
	role: "developer",
	content: "You are a model that can do function calling with the following functions"
	},
	{
	role: "user",
	content: "What's the temperature in Paris?"
	},
	{
	role: "assistant",
	content: "<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>"
	},
	{
	role: "user",
	content: "What's the temperature in London?"
	}
	];

	const inputs = await tokenizer.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: true,
	add_generation_prompt: true,
	return_dict: true
	});

	const output_tensor = await model.generate({
	...inputs,
	max_new_tokens: 512,
	do_sample: false,
	temperature: 0.0
	});

	const seqLen = inputs.input_ids.dims[1];
	const generated = output_tensor.slice(0, [seqLen, null]);
	const generatedTokens = Array.from(generated.data.slice(0, 20));

	log('🔢 First 20 generated token IDs:', 'info', 'tokenAnalysisOutput');
	log(`[${generatedTokens.join(', ')}]`, 'log', 'tokenAnalysisOutput');

	log('🔤 Decoding tokens individually:', 'info', 'tokenAnalysisOutput');

	for (let i = 0; i < generatedTokens.length; i++) {
	const tokenId = generatedTokens[i];
	const tokenText = await tokenizer.decode([tokenId], { skip_special_tokens: false });
	log(`Token ${tokenId}: "${tokenText}"`, 'info', 'tokenAnalysisOutput');

	const tokenBox = document.createElement('div');
	tokenBox.className = 'token-box';
	tokenBox.innerHTML = `
	<div class="token-id">ID: ${tokenId}</div>
	<div class="token-text">${tokenText.replace(/</g, '<').replace(/>/g, '>')}</div>
	`;
	viz.appendChild(tokenBox);
	}

	log('✅ Token analysis complete!', 'success', 'tokenAnalysisOutput');
	addAchievement('🔍 TOKEN ANALYST');
	completeLesson(5);

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'tokenAnalysisOutput');
	}
	}

	function addPlaygroundExample() {
	const examplesContainer = document.getElementById('playgroundExamples');
	const exampleIndex = examplesContainer.children.length;

	const exampleDiv = document.createElement('div');
	exampleDiv.className = 'example-item';
	exampleDiv.dataset.index = exampleIndex;

	const defaultUserQuery = exampleIndex === 0 ? 'What\'s the temperature in Paris?' : '';
	const defaultAssistantResponse = exampleIndex === 0 ? '<start_function_call>call:get_current_temperature{location:<escape>Paris<escape>}<end_function_call>' : '';

	exampleDiv.innerHTML = `
	<div class="example-item-header">
	<h4>EXAMPLE ${exampleIndex + 1}</h4>
	<button class="remove-example-btn" data-remove-index="${exampleIndex}">REMOVE</button>
	</div>
	<label style="display: block; margin-bottom: 5px; font-weight: 700; font-size: 0.9em;">USER QUERY:</label>
	<input type="text" class="example-user-query" placeholder="Enter user query..." value="${defaultUserQuery}">
	<label style="display: block; margin-bottom: 5px; margin-top: 10px; font-weight: 700; font-size: 0.9em;">ASSISTANT RESPONSE (with function call):</label>
	<textarea class="example-assistant-response" placeholder="Enter assistant response with function call..." rows="2">${defaultAssistantResponse}</textarea>
	`;

	// Attach event listener to remove button
	const removeBtn = exampleDiv.querySelector('.remove-example-btn');
	removeBtn.addEventListener('click', () => {
	removePlaygroundExample(exampleIndex);
	});

	examplesContainer.appendChild(exampleDiv);
	}

	function removePlaygroundExample(index) {
	const examplesContainer = document.getElementById('playgroundExamples');
	const exampleItem = examplesContainer.querySelector(`[data-index="${index}"]`);
	if (exampleItem) {
	exampleItem.remove();
	// Reindex remaining examples
	Array.from(examplesContainer.children).forEach((item, idx) => {
	item.dataset.index = idx;
	item.querySelector('h4').textContent = `EXAMPLE ${idx + 1}`;
	const removeBtn = item.querySelector('.remove-example-btn');
	// Remove old listener and add new one
	const newRemoveBtn = removeBtn.cloneNode(true);
	removeBtn.parentNode.replaceChild(newRemoveBtn, removeBtn);
	newRemoveBtn.addEventListener('click', () => {
	removePlaygroundExample(idx);
	});
	});
	}
	}

	function getPlaygroundExamples() {
	const examplesContainer = document.getElementById('playgroundExamples');
	const examples = [];

	Array.from(examplesContainer.children).forEach(item => {
	const userQuery = item.querySelector('.example-user-query').value.trim();
	const assistantResponse = item.querySelector('.example-assistant-response').value.trim();

	if (userQuery && assistantResponse) {
	examples.push({
	user: userQuery,
	assistant: assistantResponse
	});
	}
	});

	return examples;
	}

	async function playgroundTest(mode) {
	if (!model \|\| !tokenizer) {
	alert('Model not loaded yet!');
	return;
	}

	const query = document.getElementById('playgroundQuery').value;
	const schemaText = document.getElementById('playgroundSchema').value;
	const systemMessage = document.getElementById('playgroundSystemMessage').value.trim() \|\| "You are a model that can do function calling with the following functions";
	const maxTokens = parseInt(document.getElementById('maxTokens')?.value \|\| 512);
	const output = document.getElementById('playgroundOutput');
	output.innerHTML = '';

	let weatherFunction;
	try {
	weatherFunction = JSON.parse(schemaText);
	} catch (e) {
	log('❌ Invalid JSON schema', 'error', 'playgroundOutput');
	return;
	}

	// Get custom examples
	const customExamples = getPlaygroundExamples();

	log(`🧪 Testing ${mode === 'zero' ? 'Zero-Shot' : mode === 'one' ? 'One-Shot' : 'Few-Shot'} approach...`, 'log', 'playgroundOutput');
	log(`Query: "${query}"`, 'info', 'playgroundOutput');
	log(`Max Tokens: ${maxTokens}`, 'info', 'playgroundOutput');
	log(`Custom Examples: ${customExamples.length}`, 'info', 'playgroundOutput');

	try {
	let messages = [
	{
	role: "developer",
	content: systemMessage
	}
	];

	if (mode === 'zero') {
	// Zero-shot: No examples
	messages.push({
	role: "user",
	content: query
	});
	} else if (mode === 'one') {
	// One-shot: Use first example if available, otherwise use default
	if (customExamples.length > 0) {
	messages.push({
	role: "user",
	content: customExamples[0].user
	});
	messages.push({
	role: "assistant",
	content: customExamples[0].assistant
	});
	} else {
	// Fallback to default example
	messages.push({
	role: "user",
	content: "What's the temperature in Paris?"
	});
	messages.push({
	role: "assistant",
	content: `<start_function_call>call:${weatherFunction.function.name}{location:<escape>Paris<escape>}<end_function_call>`
	});
	}
	messages.push({
	role: "user",
	content: query
	});
	} else {
	// Few-shot: Use all available examples
	if (customExamples.length > 0) {
	customExamples.forEach(example => {
	messages.push({
	role: "user",
	content: example.user
	});
	messages.push({
	role: "assistant",
	content: example.assistant
	});
	});
	} else {
	// Fallback to default example
	messages.push({
	role: "user",
	content: "What's the temperature in Paris?"
	});
	messages.push({
	role: "assistant",
	content: `<start_function_call>call:${weatherFunction.function.name}{location:<escape>Paris<escape>}<end_function_call>`
	});
	}
	messages.push({
	role: "user",
	content: query
	});
	}

	log(`📝 Message count: ${messages.length}`, 'info', 'playgroundOutput');

	const inputs = await tokenizer.apply_chat_template(messages, {
	tools: [weatherFunction],
	tokenize: true,
	add_generation_prompt: true,
	return_dict: true
	});

	const output_tensor = await model.generate({
	...inputs,
	max_new_tokens: maxTokens,
	do_sample: false,
	temperature: 0.0
	});

	const seqLen = inputs.input_ids.dims[1];
	const generated = output_tensor.slice(0, [seqLen, null]);
	const decoded = await tokenizer.decode(generated, { skip_special_tokens: false });

	log('📤 Generated output:', 'info', 'playgroundOutput');
	log(decoded, 'log', 'playgroundOutput');

	if (decoded.includes('call:')) {
	log('✅ Function call generated successfully!', 'success', 'playgroundOutput');
	} else if (decoded.includes('error:')) {
	log('❌ Model generated error instead of call', 'error', 'playgroundOutput');
	}

	completeLesson(6);
	addAchievement('🎮 PLAYGROUND EXPLORER');

	} catch (error) {
	log(`Error: ${error.message}`, 'error', 'playgroundOutput');
	console.error(error);
	}
	}

	// Initialize playground with default example
	function initializePlayground() {
	const examplesContainer = document.getElementById('playgroundExamples');
	if (examplesContainer && examplesContainer.children.length === 0) {
	addPlaygroundExample();
	}
	}

	// Make functions available globally
	window.loadModel = loadModel;
	window.demonstrateTokenization = demonstrateTokenization;
	window.testZeroShot = testZeroShot;
	window.testOneShot = testOneShot;
	window.testFewShot = testFewShot;
	window.analyzeTokens = analyzeTokens;
	window.playgroundTest = playgroundTest;
	window.addPlaygroundExample = addPlaygroundExample;
	window.removePlaygroundExample = removePlaygroundExample;
	</script>
	</body>
	</html>