| | <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="five.jpeg"/><link rel="stylesheet" href="/_next/static/css/ce70925ddb507bf6.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-192c331ddd84790e.js"/><script src="/_next/static/chunks/4bd1b696-585f188d732414ff.js" async=""></script><script src="/_next/static/chunks/684-98bea1a58a90994f.js" async=""></script><script src="/_next/static/chunks/main-app-dc518554d77a2eae.js" async=""></script><script src="/_next/static/chunks/436-4434bdf56ece092d.js" async=""></script><script src="/_next/static/chunks/874-15a3df30cc819263.js" async=""></script><script src="/_next/static/chunks/953-3efb90282c9a4140.js" async=""></script><script src="/_next/static/chunks/app/layout-1282207399fa10f1.js" async=""></script><script src="/_next/static/chunks/app/cnn-explained/page-5d0af436c38dac16.js" async=""></script><title>AI in Oral Cancer Diagnosis</title><meta name="description" content="Early detection through intelligent imaging"/><meta name="generator" content="v0.dev"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__className_e8ce0c bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 min-h-screen flex flex-col"><script>((e,t,r,n,o,i,a,s)=>{let l=document.documentElement,u=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&i?o.map(e=>i[e]||e):o;r?(l.classList.remove(...n),l.classList.add(i&&i[t]?i[t]:t)):l.setAttribute(e,t)}),r=t,s&&u.includes(r)&&(l.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","dark",null,["light","dark"],null,true,true)</script><nav class="fixed top-0 w-full z-50 transition-all duration-300 bg-transparent"><div class="container mx-auto px-4"><div class="flex items-center justify-between h-16"><a class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500" href="/">AI-OralCancer</a><div class="hidden md:flex items-center space-x-6"><a class="transition-colors hover:text-purple-400 text-gray-300" href="/">Home</a><a class="transition-colors hover:text-purple-400 text-gray-300" href="/real-world">Real-World</a><a class="transition-colors hover:text-purple-400 text-gray-300" href="/predict">Predict</a><a class="transition-colors hover:text-purple-400 text-gray-300" href="/diagnosis-steps">Diagnosis Steps</a><a class="transition-colors hover:text-purple-400 text-purple-500 font-medium" href="/cnn-explained">CNN Explained</a><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-accent hover:text-accent-foreground h-10 w-10 bg-transparent border-gray-700" type="button" id="radix-«R19db»" aria-haspopup="menu" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="sr-only">Toggle theme</span></button></div><div class="flex md:hidden items-center space-x-4"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-accent hover:text-accent-foreground h-10 w-10 bg-transparent border-gray-700" type="button" id="radix-«Rtdb»" aria-haspopup="menu" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="sr-only">Toggle theme</span></button><button class="text-gray-300 hover:text-white focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button></div></div></div></nav><main class="flex-grow"><div class="flex flex-col items-center w-full"><header class="w-full py-8 px-4 text-center bg-gradient-to-r from-indigo-900 to-purple-900"><h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Convolutional Neural Network Visualized</h1><p class="mt-4 text-lg text-blue-200 max-w-2xl mx-auto">Explore how CNNs process images through multiple layers of abstraction</p></header><main class="w-full max-w-6xl mx-auto"><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">1</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Input Image</h2><p class="mb-8 text-gray-300 max-w-2xl">The CNN process begins with a raw input image. For our example, we'll use a handwritten digit '5'. The image is represented as a matrix of pixel values.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col md:flex-row gap-8 items-center justify-center"><div class="relative flex-1 grid_box"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="relative"><img src="five.jpeg" alt="Handwritten digit 5" class="w-full max-w-[300px] mx-auto rounded-lg border border-cyan-800/50"/><div class="absolute inset-0 grid grid-cols-8 grid-rows-8 pointer-events-none opacity-30"><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div><div class="border border-cyan-400/20"></div></div><div class="absolute top-2 left-2 flex items-center gap-2 bg-gray-900/70 p-2 rounded-lg border border-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image text-cyan-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg><span class="text-xs text-cyan-400">Raw Input Image</span></div></div></div></div><div class="flex-1 flex flex-col gap-4"><h3 class="text-xl font-semibold text-gray-100">Digital Representation</h3><p class="text-gray-300 text-sm">Computers see images as arrays of numbers. Each pixel is represented as a value between 0 (black) and 255 (white) for grayscale images.</p><div class="mt-4 bg-gray-900 rounded-lg p-4 border border-gray-700"><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code text-blue-400"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg><span class="text-xs text-blue-400">Matrix Representation</span></div><div class="text-xs font-mono text-gray-400 overflow-auto">[<br/> [0, 0, 0, 0, 0, 0, 0, 0],<br/> [0, 0, 110, 190, 253, 70, 0, 0],<br/> [0, 0, 191, 40, 0, 191, 0, 0],<br/> [0, 0, 160, 0, 0, 120, 0, 0],<br/> [0, 0, 127, 195, 210, 20, 0, 0],<br/> [0, 0, 0, 0, 40, 173, 0, 0],<br/> [0, 0, 75, 60, 20, 230, 0, 0],<br/> [0, 0, 90, 230, 180, 35, 0, 0]<br/>]</div></div></div></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">2</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Convolution Operation</h2><p class="mb-8 text-gray-300 max-w-2xl">The convolution operation slides a filter (kernel) across the input image to detect features like edges, textures, or patterns.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col lg:flex-row gap-8 items-center"><div class="flex-1 flex flex-col items-center"><h3 class="text-xl font-semibold text-gray-100 mb-4">Kernel Sliding</h3><div class="relative"><div class="grid grid-cols-8 grid-rows-8 w-[320px] h-[320px] gap-[1px]"><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-purple-600/30 border border-purple-400 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div><div class=" |
| | aspect-square flex items-center justify-center |
| | bg-gray-800 border border-gray-700 |
| | "></div></div><div class="absolute w-[120px] h-[120px] border-2 border-cyan-400 rounded-md shadow-lg shadow-cyan-500/50 transition-all duration-300 pointer-events-none" style="top:0px;left:0px"><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-cyan-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan-search"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path><circle cx="12" cy="12" r="3"></circle><path d="m16 16-1.9-1.9"></path></svg></div></div></div><button class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm">Pause Animation</button></div><div class="hidden lg:flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-right text-gray-500"><path d="M18 8L22 12L18 16"></path><path d="M2 12H22"></path></svg></div><div class="flex-1 flex flex-col items-center"><div class="flex gap-8 items-start"><div><h3 class="text-xl font-semibold text-gray-100 mb-4">Kernel/Filter</h3><div class="relative max-w-[150px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 gap-1"><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">8</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div><div class="aspect-square flex items-center justify-center bg-gray-900 text-sm font-mono">-1</div></div></div></div><p class="mt-2 text-sm text-gray-400 max-w-[150px]">Edge detection filter</p></div><div><h3 class="text-xl font-semibold text-gray-100 mb-4">Feature Map</h3><div class="relative max-w-[200px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid gap-[1px] " style="grid-template-columns:repeat(6, 1fr)"><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | ring-2 ring-cyan-500 ring-offset-1 ring-offset-transparent z-10 |
| | ">0.7</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.6</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.6</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.6</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div></div></div></div><p class="mt-2 text-sm text-gray-400 max-w-[200px]">Resulting feature map from convolution operation</p></div></div></div></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">3</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">ReLU Activation</h2><p class="mb-8 text-gray-300 max-w-2xl">The Rectified Linear Unit (ReLU) introduces non-linearity to the network by converting all negative values to zero, allowing the network to learn complex patterns.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col lg:flex-row items-center justify-center gap-6"><div class="flex-1 flex flex-col items-center"><h3 class="text-xl font-semibold text-gray-100 mb-4">Before ReLU</h3><div class="relative w-full max-w-[280px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid gap-[1px] " style="grid-template-columns:repeat(6, 1fr)"><div class=" |
| | aspect-square bg-blue-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-red-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.3</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-red-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.7</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.9</div><div class=" |
| | aspect-square bg-red-500/60 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.6</div><div class=" |
| | aspect-square bg-blue-500/40 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-red-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.2</div><div class=" |
| | aspect-square bg-blue-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-red-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.8</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-blue-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div><div class=" |
| | aspect-square bg-red-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.5</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-red-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.9</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-red-500/40 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.4</div><div class=" |
| | aspect-square bg-red-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.1</div><div class=" |
| | aspect-square bg-blue-500/60 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.6</div><div class=" |
| | aspect-square bg-red-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.3</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-red-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.5</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.9</div><div class=" |
| | aspect-square bg-red-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.2</div><div class=" |
| | aspect-square bg-blue-500/40 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-red-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.7</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-red-500/60 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.6</div><div class=" |
| | aspect-square bg-red-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.8</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-red-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.5</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-red-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">-0.9</div><div class=" |
| | aspect-square bg-blue-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div></div></div></div><p class="mt-3 text-sm text-gray-400 max-w-[280px] text-center">Feature map contains both positive and negative values</p></div><div class="flex flex-col items-center justify-center py-4"><div class="relative px-8"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right text-purple-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><div class="absolute top-[-24px] left-1/2 transform -translate-x-1/2 bg-purple-900/60 px-3 py-1 rounded-md border border-purple-700" style="width:9rem;text-align:center"><code class="text-xs text-purple-200">f(x) = max(0, x)</code></div></div><div class="mt-4 bg-gray-900 rounded-lg p-3 border border-gray-700"><div class="flex items-center"><div class="w-4 h-4 bg-red-500/60 rounded-sm mr-2"></div><span class="text-xs text-gray-300">Negative values</span></div><div class="flex items-center mt-1"><div class="w-4 h-4 bg-blue-500/60 rounded-sm mr-2"></div><span class="text-xs text-gray-300">Positive values</span></div></div></div><div class="flex-1 flex flex-col items-center"><h3 class="text-xl font-semibold text-gray-100 mb-4">After ReLU</h3><div class="relative w-full max-w-[280px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid gap-[1px] " style="grid-template-columns:repeat(6, 1fr)"><div class=" |
| | aspect-square bg-blue-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.9</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/40 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/50 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.5</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-blue-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/60 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.6</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.8</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.2</div><div class=" |
| | aspect-square bg-blue-500/80 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.9</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/40 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.4</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/20 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.1</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/30 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.3</div><div class=" |
| | aspect-square bg-gray-800 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.0</div><div class=" |
| | aspect-square bg-blue-500/70 border border-gray-700 flex items-center justify-center text-[0.5rem] text-gray-400 |
| | |
| | ">0.7</div></div></div></div><p class="mt-3 text-sm text-gray-400 max-w-[280px] text-center">Negative values are replaced with zeros, introducing non-linearity</p></div></div><div class="mt-12 p-4 bg-gray-900/50 rounded-lg border border-gray-700"><h4 class="text-lg font-semibold text-blue-300 mb-2">Why Non-Linearity Matters</h4><p class="text-gray-300 text-sm">Without non-linear activation functions like ReLU, the neural network would only be able to learn linear relationships in the data, significantly limiting its ability to solve complex problems. ReLU enables the network to model more complex functions while being computationally efficient.</p></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">4</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Pooling Layer</h2><p class="mb-8 text-gray-300 max-w-2xl">Pooling reduces the spatial dimensions of the feature maps, preserving the most important information while reducing computation and preventing overfitting.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col lg:flex-row items-center justify-center gap-8"><div class="flex-1 flex flex-col items-center"><h3 class="text-xl font-semibold text-gray-100 mb-4">Max Pooling (2×2 Window)</h3><div class="relative"><div class="grid grid-cols-6 gap-[1px] w-full max-w-[300px]"><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-purple-600/30 border border-purple-400 |
| | ">0.5</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-teal-600/50 border border-teal-400 text-white |
| | ">0.8</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.2</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.9</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.3</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-purple-600/30 border border-purple-400 |
| | ">0.4</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-purple-600/30 border border-purple-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.5</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.1</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.6</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.3</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.2</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.4</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.1</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.6</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.8</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.2</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.5</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.9</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.4</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.3</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.2</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.8</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.1</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.3</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.0</div><div class=" |
| | aspect-square flex items-center justify-center text-xs font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.4</div></div><div class="absolute border-2 border-cyan-400 rounded-md shadow-lg shadow-cyan-500/50 transition-all duration-300 pointer-events-none" style="top:0%;left:0%;width:33.33%;height:33.33%"></div></div><button class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm">Pause Animation</button></div><div class="flex flex-col items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden lg:block text-blue-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down block lg:hidden text-blue-500"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg><div class="mt-4 bg-gray-900 rounded-lg p-3 border border-gray-700"><h4 class="text-sm font-semibold text-blue-300 mb-1">Max Pooling</h4><p class="text-xs text-gray-300">For each 2×2 window, keep<br/>only the maximum value</p></div></div><div class="flex-1 flex flex-col items-center"><h3 class="text-xl font-semibold text-gray-100 mb-4">Pooled Feature Map</h3><div class="relative w-full max-w-[200px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 gap-[1px]"><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-teal-600/50 border border-teal-400 text-white |
| | ">0.8</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.9</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.8</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.5</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.9</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.7</div><div class=" |
| | aspect-square flex items-center justify-center text-sm font-mono |
| | bg-gray-800 border border-gray-700 text-gray-400 |
| | ">0.8</div></div></div></div><div class="mt-6 p-3 bg-gray-900/50 rounded-lg border border-gray-700 w-full max-w-[250px]"><h4 class="text-sm font-semibold text-blue-300 mb-1">Benefits of Pooling</h4><ul class="text-xs text-gray-300 list-disc pl-4 space-y-1"><li>Reduces spatial dimensions by 75%</li><li>Preserves important features</li><li>Makes detection more robust to position</li><li>Reduces overfitting</li></ul></div></div></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">5</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Deep Layer Abstraction</h2><p class="mb-8 text-gray-300 max-w-2xl">As we progress through deeper layers of the CNN, the network learns increasingly abstract representations of the input image, from simple edges to complex shapes and patterns.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-x-8 lg:gap-x-12 gap-y-10 w-full max-w-5xl lg:max-w-6xl mx-auto"><div class="flex flex-col items-center space-y-[-80px] sm:space-y-[-100px] md:space-y-[-120px] py-8 md:pt-12" style="gap:4rem"><div class="relative w-[85%] sm:w-[75%] max-w-xs sm:max-w-sm transform rotate-[-2deg] z-10"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="p-2 sm:p-3"><h3 class="text-base sm:text-lg font-semibold text-blue-300 mb-2">Layer 1: Edges & Corners</h3><div class="grid grid-cols-4 gap-1 sm:gap-2"><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-r from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-b from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-tr from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-bl from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-r from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-b from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-tr from-blue-500/30 to-transparent rounded-sm"></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full bg-gradient-to-bl from-blue-500/30 to-transparent rounded-sm"></div></div></div></div></div></div><div class="relative w-[80%] sm:w-[70%] max-w-xs sm:max-w-sm transform rotate-[1deg] translate-x-2 sm:translate-x-3 z-20"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="p-2 sm:p-3"><h3 class="text-base sm:text-lg font-semibold text-purple-300 mb-2">Layer 2: Simple Shapes</h3><div class="grid grid-cols-4 gap-1 sm:gap-2"><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40 rounded-full"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-1/2 border-2 border-purple-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40 transform rotate-45"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40 rounded-full"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-1/2 border-2 border-purple-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-purple-500/40 transform rotate-45"></div></div></div></div></div></div></div><div class="relative w-[75%] sm:w-[65%] max-w-xs sm:max-w-sm transform rotate-[-1deg] -translate-x-1 sm:-translate-x-2 z-30"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="p-2 sm:p-3"><h3 class="text-base sm:text-lg font-semibold text-pink-300 mb-2">Layer 3: Complex Features</h3><div class="grid grid-cols-4 gap-1 sm:gap-2"><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="relative w-full h-full"><div class="absolute top-1/4 left-1/4 w-1/2 h-1/2 border-2 border-pink-500/40 rounded-full"></div><div class="absolute top-1/3 left-1/3 w-1/3 h-1/3 bg-pink-500/20 rounded-full"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-1/2 bg-pink-500/20 rounded-t-full"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex flex-col items-center justify-center space-y-0.5 sm:space-y-1"><div class="w-2/3 h-1/4 bg-pink-500/20 rounded-sm"></div><div class="w-1/2 h-1/4 bg-pink-500/20 rounded-sm"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-t-2 border-r-2 border-pink-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-l-2 border-b-2 border-pink-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-2 border-pink-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-t-2 border-r-2 border-pink-500/40 rounded-md"></div></div></div><div class="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden"><div class="w-full h-full flex items-center justify-center"><div class="w-3/4 h-3/4 border-l-2 border-b-2 border-pink-500/40 rounded-md"></div></div></div></div></div></div></div></div><div class="flex flex-col gap-6 md:pt-4"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers text-blue-400 mr-2"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path></svg><h3 class="text-xl font-semibold text-blue-300">Hierarchy of Features</h3></div><div class="space-y-4"> <div class="bg-gray-800/60 rounded-lg p-4 border border-gray-700"><h4 class="text-md font-semibold text-blue-300 mb-2">Early Layers (e.g., Layer 1)</h4><p class="text-sm text-gray-300">Detect low-level features like edges, corners, and basic textures. These are the building blocks for more complex pattern recognition.</p></div><div class="bg-gray-800/60 rounded-lg p-4 border border-gray-700"><h4 class="text-md font-semibold text-purple-300 mb-2">Middle Layers (e.g., Layer 2)</h4><p class="text-sm text-gray-300">Combine edges and textures into more complex patterns and shapes like circles, squares, and simple object parts.</p></div><div class="bg-gray-800/60 rounded-lg p-4 border border-gray-700"><h4 class="text-md font-semibold text-pink-300 mb-2">Deep Layers (e.g., Layer 3)</h4><p class="text-sm text-gray-300">Recognize complex, high-level concepts specific to the training dataset, such as eyes, faces, or entire objects.</p></div></div></div></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">6</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Flattening and Fully Connected Layer</h2><p class="mb-8 text-gray-300 max-w-2xl">The final stage of a CNN involves flattening the feature maps into a single vector and passing it through fully connected layers to make predictions.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col lg:flex-row items-start justify-center gap-8"><div class="flex-1"><h3 class="text-xl font-semibold text-gray-100 mb-4">Feature Maps to Vector</h3><div class="flex flex-col items-center space-y-4"><div class="grid grid-cols-2 grid-rows-2 gap-2"><div class="relative w-[80px] h-[80px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 grid-rows-3 gap-[1px] h-full"><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6914027739810776"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7920241619187706"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9220472081627377"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6964277720550529"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.8531993050877711"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.8793624682575697"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6656947215602045"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9616433667715254"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5675980211427641"></div></div></div></div><div class="relative w-[80px] h-[80px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 grid-rows-3 gap-[1px] h-full"><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9992662783179284"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9398617884636435"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9851053298825246"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.68728782389197"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5987308372778117"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7779108814743653"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.782073806197477"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7555815942998534"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9291157594465586"></div></div></div></div><div class="relative w-[80px] h-[80px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 grid-rows-3 gap-[1px] h-full"><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9694195783754064"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.627695048813535"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5111909333031277"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7311892627092138"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7912781179829805"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.8517333472646079"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.9978963259766588"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.839977907443832"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.8522137339829299"></div></div></div></div><div class="relative w-[80px] h-[80px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-3 grid-rows-3 gap-[1px] h-full"><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.7946695416705377"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6219890781203415"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5008298551612361"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5569484911846776"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6118453228913124"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.8937776046720597"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.860761599712743"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.5338379369309407"></div><div class="bg-gray-900/80 flex items-center justify-center" style="opacity:0.6932101126391828"></div></div></div></div></div><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right transform rotate-90 text-blue-500"><path d="m9 18 6-6-6-6"></path></svg><div class="relative w-full max-w-[320px]"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="grid grid-cols-9 gap-[1px] p-1"><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-blue-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-purple-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-pink-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div><div class="h-5 bg-teal-600/30 rounded-sm"></div></div></div></div><div class="mt-2 p-3 bg-gray-900/50 rounded-lg border border-gray-700 w-full max-w-[320px]"><h4 class="text-sm font-semibold text-blue-300 mb-1">Flattening</h4><p class="text-xs text-gray-300">The 2D feature maps are converted into a 1D vector by arranging all the values in a single row. This allows the network to transition from convolutional layers to fully connected layers.</p></div></div></div><div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right hidden lg:block text-blue-500"><path d="m9 18 6-6-6-6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right block lg:hidden transform rotate-90 text-blue-500"><path d="m9 18 6-6-6-6"></path></svg></div><div class="flex-1"><h3 class="text-xl font-semibold text-gray-100 mb-4">Fully Connected Network</h3><div class="flex flex-col items-center"><div class="relative w-full h-[280px] bg-gray-900/30 rounded-lg border border-gray-800"><div class="absolute left-[10%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div><div class="w-4 h-4 rounded-full bg-blue-500 shadow-md shadow-blue-500/50"></div></div><div class="absolute left-[40%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div><div class="w-4 h-4 rounded-full bg-purple-500 shadow-md shadow-purple-500/50"></div></div><div class="absolute right-[15%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-green-500 shadow-md shadow-green-500/50 scale-150"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div><div class="w-4 h-4 rounded-full bg-pink-500 shadow-md shadow-pink-500/50"></div></div><svg class="absolute inset-0 w-full h-full pointer-events-none"><g><line x1="10%" y1="45" x2="40%" y2="54" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="73" x2="40%" y2="89" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="101" x2="40%" y2="124" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="129" x2="40%" y2="159" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="157" x2="40%" y2="194" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="185" x2="40%" y2="229" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="213" x2="40%" y2="264" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="241" x2="40%" y2="299" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="269" x2="40%" y2="54" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="297" x2="40%" y2="89" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="45" x2="40%" y2="124" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="73" x2="40%" y2="159" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="101" x2="40%" y2="194" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="129" x2="40%" y2="229" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="157" x2="40%" y2="264" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="185" x2="40%" y2="299" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="213" x2="40%" y2="54" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="241" x2="40%" y2="89" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="269" x2="40%" y2="124" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="297" x2="40%" y2="159" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="45" x2="40%" y2="194" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="73" x2="40%" y2="229" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="101" x2="40%" y2="264" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="129" x2="40%" y2="299" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="157" x2="40%" y2="54" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="185" x2="40%" y2="89" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="213" x2="40%" y2="124" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="241" x2="40%" y2="159" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="269" x2="40%" y2="194" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="10%" y1="297" x2="40%" y2="229" stroke="rgba(139, 92, 246, 0.15)" stroke-width="1"></line><line x1="40%" y1="54" x2="85%" y2="45" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="89" x2="85%" y2="73" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="124" x2="85%" y2="101" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="159" x2="85%" y2="129" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="194" x2="85%" y2="157" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="229" x2="85%" y2="185" stroke="rgba(16, 185, 129, 0.6)" stroke-width="2"></line><line x1="40%" y1="264" x2="85%" y2="213" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="299" x2="85%" y2="241" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="54" x2="85%" y2="269" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="89" x2="85%" y2="297" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="124" x2="85%" y2="45" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="159" x2="85%" y2="73" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="194" x2="85%" y2="101" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="229" x2="85%" y2="129" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="264" x2="85%" y2="157" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="299" x2="85%" y2="185" stroke="rgba(16, 185, 129, 0.6)" stroke-width="2"></line><line x1="40%" y1="54" x2="85%" y2="213" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="89" x2="85%" y2="241" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="124" x2="85%" y2="269" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="159" x2="85%" y2="297" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="194" x2="85%" y2="45" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="229" x2="85%" y2="73" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="264" x2="85%" y2="101" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="299" x2="85%" y2="129" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="54" x2="85%" y2="157" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="89" x2="85%" y2="185" stroke="rgba(16, 185, 129, 0.6)" stroke-width="2"></line><line x1="40%" y1="124" x2="85%" y2="213" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="159" x2="85%" y2="241" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="194" x2="85%" y2="269" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line><line x1="40%" y1="229" x2="85%" y2="297" stroke="rgba(219, 39, 119, 0.15)" stroke-width="1"></line></g></svg></div><div class="mt-8 w-full max-w-[320px]"><div class="flex items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column text-green-400 mr-2"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg><h4 class="text-md font-semibold text-green-300">Prediction: "5"</h4></div><div class="bg-gray-900/70 rounded-lg p-3 border border-gray-800"><div class="flex justify-between text-xs text-gray-400 mb-1"><div>Class</div><div>Probability</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">0</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:1%"></div></div><div class="w-10 text-right text-xs text-gray-300">1%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">1</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:2%"></div></div><div class="w-10 text-right text-xs text-gray-300">2%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">2</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:3%"></div></div><div class="w-10 text-right text-xs text-gray-300">3%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">3</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:5%"></div></div><div class="w-10 text-right text-xs text-gray-300">5%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">4</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:8%"></div></div><div class="w-10 text-right text-xs text-gray-300">8%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">5</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-green-500 rounded-sm transition-all duration-500 ease-out" style="width:65%"></div></div><div class="w-10 text-right text-xs text-gray-300">65%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">6</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:5%"></div></div><div class="w-10 text-right text-xs text-gray-300">5%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">7</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:4%"></div></div><div class="w-10 text-right text-xs text-gray-300">4%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">8</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:5%"></div></div><div class="w-10 text-right text-xs text-gray-300">5%</div></div><div class="flex items-center mb-1"><div class="w-6 text-xs text-gray-300">9</div><div class="flex-1 mx-2 h-5 bg-gray-800 rounded-sm overflow-hidden"><div class="h-full bg-blue-500 rounded-sm transition-all duration-500 ease-out" style="width:2%"></div></div><div class="w-10 text-right text-xs text-gray-300">2%</div></div></div></div></div></div></div></div></section><section class="min-h-screen py-16 px-4 md:px-8 flex flex-col justify-center transition-opacity duration-1000 ease-in-out opacity-0"><div class="relative"><div class="absolute -left-16 top-2 hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xl">7</div></div><h2 class="text-3xl md:text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Learning via Backpropagation</h2><p class="mb-8 text-gray-300 max-w-2xl">The CNN learns by comparing its predictions with the true labels, calculating the error, and then propagating this error backward through the network to update weights.</p><div class="bg-gray-800 border border-gray-700 rounded-xl p-6 shadow-lg shadow-purple-900/10"><div class="flex flex-col items-center"><div class="w-full max-w-[800px] relative"><div class="relative w-full h-[300px] bg-gray-900/30 rounded-lg border border-gray-800"><div class="absolute right-[15%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-5 h-5 rounded-full bg-pink-500 shadow-md shadow-pink-500/50 flex items-center justify-center text-[10px] font-bold">0</div><div class="w-5 h-5 rounded-full bg-pink-500 shadow-md shadow-pink-500/50 flex items-center justify-center text-[10px] font-bold">1</div><div class="w-5 h-5 rounded-full bg-green-500 shadow-md shadow-green-500/50 flex items-center justify-center text-[10px] font-bold">2</div><div class="w-5 h-5 rounded-full bg-pink-500 shadow-md shadow-pink-500/50 flex items-center justify-center text-[10px] font-bold">3</div><div class="w-5 h-5 rounded-full bg-pink-500 shadow-md shadow-pink-500/50 flex items-center justify-center text-[10px] font-bold">4</div></div><div class="absolute left-[50%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div><div class="w-5 h-5 rounded-full bg-purple-500 shadow-md shadow-purple-500/50 false"></div></div><div class="absolute left-[15%] top-0 bottom-0 flex flex-col justify-center space-y-1"><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div><div class="w-5 h-5 rounded-full bg-blue-500 shadow-md shadow-blue-500/50 false"></div></div><div class="absolute right-[5%] top-1/2 transform -translate-y-1/2 |
| | transition-opacity duration-500 opacity-100"><div class="relative p-1"><div class="absolute inset-0 bg-gradient-to-r opacity-50 blur-md ${color} rounded-lg -z-10"></div><div class="relative bg-gray-800 border border-gray-700 rounded-lg p-4 z-10"><div class="px-3 py-1 text-sm text-red-200">Error: 0.42</div></div></div></div><svg class="absolute inset-0 w-full h-full pointer-events-none"><defs><marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="rgba(139, 92, 246, 0.3)"></path></marker></defs><g><path d="M 15% 150 C 30% 150, 35% 150, 50% 150" stroke="rgba(139, 92, 246, 0.3)" stroke-width="20" fill="none" stroke-linecap="round" opacity="1"></path><path d="M 50% 150 C 65% 150, 70% 150, 85% 150" stroke="rgba(139, 92, 246, 0.3)" stroke-width="20" fill="none" stroke-linecap="round" opacity="1"></path><path d="M 85% 150 C 70% 150, 65% 150, 50% 150" stroke="transparent" stroke-width="4" fill="none" marker-end="url(#arrow)" stroke-dasharray="6,3" stroke-linecap="round"></path><path d="M 50% 150 C 35% 150, 30% 150, 15% 150" stroke="transparent" stroke-width="4" fill="none" marker-end="url(#arrow)" stroke-dasharray="6,3" stroke-linecap="round"></path></g></svg><div class="absolute left-[35%] top-1/4 transform -translate-x-1/2 |
| | transition-opacity duration-300 opacity-0"><div class="px-2 py-1 bg-blue-900/70 rounded text-xs text-blue-200 border border-blue-700">Update weights</div></div><div class="absolute left-[65%] top-1/4 transform -translate-x-1/2 |
| | transition-opacity duration-300 opacity-0"><div class="px-2 py-1 bg-blue-900/70 rounded text-xs text-blue-200 border border-blue-700">Update weights</div></div><div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-4"><div class="px-3 py-1 rounded text-xs bg-blue-500 text-white">Forward Pass</div><div class="px-3 py-1 rounded text-xs bg-gray-800 text-gray-400">Calculate Error</div><div class="px-3 py-1 rounded text-xs bg-gray-800 text-gray-400">Backward Pass</div></div></div><button class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm mx-auto block">Pause Animation</button></div><div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[800px]"><div class="bg-gray-800/60 rounded-lg p-5 border border-gray-700"><div class="flex items-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left text-red-400 mr-2 transform rotate-180"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg><h4 class="text-lg font-semibold text-red-300">Backpropagation</h4></div><p class="text-sm text-gray-300">Backpropagation calculates how much each neuron's weight contributed to the output error. It then adjusts these weights to minimize the error in future predictions, using the chain rule of calculus to distribute error responsibility throughout the network.</p></div><div class="bg-gray-800/60 rounded-lg p-5 border border-gray-700"><div class="flex items-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-repeat text-green-400 mr-2"><path d="m17 2 4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="m7 22-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg><h4 class="text-lg font-semibold text-green-300">Gradient Descent</h4></div><p class="text-sm text-gray-300">The network uses gradient descent to adjust weights in the direction that reduces error. By repeatedly processing many examples and making small weight updates, the model gradually improves its ability to recognize patterns and make accurate predictions.</p></div></div><div class="mt-8 p-5 bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg border border-blue-800/50 w-full max-w-[800px]"><h3 class="text-xl font-semibold text-blue-300 mb-3">Key CNN Components Recap</h3><div class="flex flex-wrap gap-3"><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-blue-300 border border-gray-800">Input Layer</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-purple-300 border border-gray-800">Convolutional Layers</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-cyan-300 border border-gray-800">Activation Functions</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-teal-300 border border-gray-800">Pooling Layers</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-pink-300 border border-gray-800">Fully Connected Layers</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-green-300 border border-gray-800">Output Layer</div><div class="bg-gray-900/60 rounded-lg px-3 py-2 text-sm text-red-300 border border-gray-800">Backpropagation</div></div></div></div></div></section></main><footer class="w-full py-8 text-center text-gray-500 text-sm"><p>© 2025 CNN Visualizer</p></footer></div></main><footer class="bg-gray-900 py-12 border-t border-gray-800"><div class="container mx-auto px-4"><div class="flex flex-col md:flex-row justify-between items-center"><div class="mb-6 md:mb-0"><h2 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500">AI-OralCancer</h2><p class="text-gray-400 mt-2 max-w-md">Advancing early detection of oral cancer through artificial intelligence and deep learning technologies.</p></div><div class="flex space-x-6"><a target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors" href="https://github.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-6 w-6"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg><span class="sr-only">GitHub</span></a><a target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors" href="https://twitter.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-6 w-6"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg><span class="sr-only">Twitter</span></a><a target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors" href="https://linkedin.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-6 w-6"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg><span class="sr-only">LinkedIn</span></a></div></div><div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"><p class="text-gray-500 text-sm">© 2025 AI-OralCancer. All rights reserved.</p><div class="flex space-x-6 mt-4 md:mt-0"><a class="text-gray-500 hover:text-gray-300 text-sm" href="#">Privacy Policy</a><a class="text-gray-500 hover:text-gray-300 text-sm" href="#">Terms of Service</a><a class="text-gray-500 hover:text-gray-300 text-sm" href="#">Contact</a></div></div></div></footer><script src="/_next/static/chunks/webpack-192c331ddd84790e.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9304,[\"436\",\"static/chunks/436-4434bdf56ece092d.js\",\"874\",\"static/chunks/874-15a3df30cc819263.js\",\"953\",\"static/chunks/953-3efb90282c9a4140.js\",\"177\",\"static/chunks/app/layout-1282207399fa10f1.js\"],\"ThemeProvider\"]\n3:I[3658,[\"436\",\"static/chunks/436-4434bdf56ece092d.js\",\"874\",\"static/chunks/874-15a3df30cc819263.js\",\"953\",\"static/chunks/953-3efb90282c9a4140.js\",\"177\",\"static/chunks/app/layout-1282207399fa10f1.js\"],\"default\"]\n4:I[7555,[],\"\"]\n5:I[1295,[],\"\"]\n6:I[6874,[\"436\",\"static/chunks/436-4434bdf56ece092d.js\",\"874\",\"static/chunks/874-15a3df30cc819263.js\",\"953\",\"static/chunks/953-3efb90282c9a4140.js\",\"177\",\"static/chunks/app/layout-1282207399fa10f1.js\"],\"\"]\n7:I[894,[],\"ClientPageRoot\"]\n8:I[8508,[\"607\",\"static/chunks/app/cnn-explained/page-5d0af436c38dac16.js\"],\"default\"]\nb:I[9665,[],\"OutletBoundary\"]\ne:I[9665,[],\"ViewportBoundary\"]\n10:I[9665,[],\"MetadataBoundary\"]\n12:I[6614,[],\"\"]\n:HL[\"/_next/static/css/ce70925ddb507bf6.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"mDISYaUQpvXufxGEtni62\",\"p\":\"\",\"c\":[\"\",\"cnn-explained\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"cnn-explained\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ce70925ddb507bf6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"__className_e8ce0c bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 min-h-screen flex flex-col\",\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"dark\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-grow\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"footer\",null,{\"className\":\"bg-gray-900 py-12 border-t border-gray-800\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col md:flex-row justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 md:mb-0\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500\",\"children\":\"AI-OralCancer\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-400 mt-2 max-w-md\",\"children\":\"Advancing early detection of oral cancer through artificial intelligence and deep learning technologies.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex space-x-6\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"https://github.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-gray-400 hover:text-white transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github h-6 w-6\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"GitHub\"}]]}],[\"$\",\"$L6\",null,{\"href\":\"https://twitter.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-gray-400 hover:text-white transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-twitter h-6 w-6\",\"children\":[[\"$\",\"path\",\"pff0z6\",{\"d\":\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"Twitter\"}]]}],[\"$\",\"$L6\",null,{\"href\":\"https://linkedin.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-gray-400 hover:text-white transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-linkedin h-6 w-6\",\"children\":[[\"$\",\"path\",\"c2jq9f\",{\"d\":\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"}],[\"$\",\"rect\",\"mk3on5\",{\"width\":\"4\",\"height\":\"12\",\"x\":\"2\",\"y\":\"9\"}],[\"$\",\"circle\",\"bt5ra8\",{\"cx\":\"4\",\"cy\":\"4\",\"r\":\"2\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"LinkedIn\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-gray-500 text-sm\",\"children\":[\"© \",2025,\" AI-OralCancer. All rights reserved.\"]}],[\"$\",\"div\",null,{\"className\":\"flex space-x-6 mt-4 md:mt-0\",\"children\":[[\"$\",\"$L6\",null,{\"href\":\"#\",\"className\":\"text-gray-500 hover:text-gray-300 text-sm\",\"children\":\"Privacy Policy\"}],[\"$\",\"$L6\",null,{\"href\":\"#\",\"className\":\"text-gray-500 hover:text-gray-300 text-sm\",\"children\":\"Terms of Service\"}],[\"$\",\"$L6\",null,{\"href\":\"#\",\"className\":\"text-gray-500 hover:text-gray-300 text-sm\",\"children\":\"Contact\"}]]}]]}]]}]}]]}]}]}]]}],{\"children\":[\"cnn-explained\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L7\",null,{\"Component\":\"$8\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@9\",\"$@a\"]}],\"$undefined\",null,[\"$\",\"$Lb\",null,{\"children\":[\"$Lc\",\"$Ld\",null]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"CoO2axhOu6WM8nfPFcJQk\",{\"children\":[[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],null]}],[\"$\",\"$L10\",null,{\"children\":\"$L11\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"9:{}\na:{}\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:null\n"])</script><script>self.__next_f.push([1,"d:null\n11:[[\"$\",\"title\",\"0\",{\"children\":\"AI in Oral Cancer Diagnosis\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Early detection through intelligent imaging\"}],[\"$\",\"meta\",\"2\",{\"name\":\"generator\",\"content\":\"v0.dev\"}]]\n"])</script></body></html> |
