1<!DOCTYPE html><html lang="en"><head>
vendor: 71 bytes, lines 1-2
1 2 <script defer="" src="https://www.googletagmanager.com/gtag/js?id=
2UA-122494709-1
vendor: 16 bytes, lines 2-3
2"></script> 3
3<script> 4 window.dataLayer = window.dataLayer || [] 5 6 function gtag() { 7 dataLayer.push(arguments) 8 } 9 gtag('js', new Date()) 10 gtag('config', 'UA-122494709-1') 11 </script>
11 12 <title>deeplizard - Convolution Demo</title> 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 15 16 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> 17 <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Noto+Serif:ital@0;1&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"> 18 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Noto+Serif:ital@0;1&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" media="print" onload="this.media='all'"> 19 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"> 20 <noscript> 21 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Noto+Serif:ital@0;1&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" /> 22 </noscript> 23 24 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-djO3wMl9GeaC/u6K+ic4Uj/LKhRUSlUFcsruzS7v5ms=" crossorigin=""> 25 <link rel="stylesheet" href="/assets/css/b8d9a036.css"> 26 27 <link rel="icon" href="/assets/png/4424f999.png"> 28 <meta name="twitter:card" content="summary_large_image"> 29 <meta name="twitter:site" content="@deeplizard"> 30 <meta name="twitter:creator" content="@deeplizard"> 31 32 <link rel="canonical" href="https://deeplizard.com/resource/pavq7noze2"> 33 <meta property="og:url" content="https://deeplizard.com/resource/pavq7noze2"> 34 <meta property="og:type" content="article"> 35 <meta property="og:title" content="DEEPLIZARD Interactive Demo - Convolution Operation"> 36 <meta property="og:image" content="https://deeplizard.com/assets/jpg/a74bc5d5.jpg"> 37 <meta property="og:description" content="In deep learning, convolution operations are the key components used in convolutional neural networks. A convolution operation maps an input to an output using a filter and a sliding window. Use the interactive demonstration below to gain a better understanding of this process."> 38 <meta name="description" content="In deep learning, convolution operations are the key components used in convolutional neural networks. A convolution operation maps an input to an output using a filter and a sliding window. Use the interactive demonstration below to gain a better understanding of this process."> 39 40 <style> 41 .visual svg { 42 margin-bottom: 0.5rem; 43 } 44 45 .controls { 46 margin-bottom: .75rem; 47 } 48 49 .controls button { 50 width: 100%; 51 margin: 2px; 52 } 53 54 .output svg { 55 border: 1px dashed rgba(0, 0, 0, .15); 56 } 57 </style> 58
58<script src="/assets/js/4e14a3dd.js" data-global="true"></script>
58 59
59<script src="/assets/js/1d23033d.js" data-global="true" defer=""></script>
59 60 61</head> 62 63<body class="article left-sidebar-showing"> 64
64<script> 65 const storedTheme = localStorage.getItem('data-theme'); 66 if (storedTheme) { 67 document.body.setAttribute('data-theme', storedTheme); 68 } 69 </script>
69 70 <aside class="left-offcanvas"> 71 72 <section class="main-nav"> 73 74 <a class="navbar-brand" href="/"> 75 <img src="/assets/png/4424f999.png" height="35" width="35" alt="deeplizard logo"> 76 <b>DEEPLIZARD</b> 77 </a> 78 79 <div class="navbar-nav"> 80 <a href="/courses">Courses</a> 81 <a href="/resources">Code</a> 82 <a href="/hivemind">Hivemind</a> 83 <a href="https://youtube.com/deeplizardvlog" rel="noreferrer">Vlog</a> 84 </div> 85 86 </section> 87 88 <section class="resource-links"> 89 90 <h3 class="section-heading"> 91 Resources 92 </h3> 93 94 <div class="navbar-nav"> 95 <a href="/resource/pavq7noze2">Conv Demo</a> 96 <a href="/resource/pavq7noze3">Max-Pool Demo</a> 97 <a href="/lesson/sda1ladzir">AI Art for Beginners<sup style="font-size: 75%;"> NEW</sup></a> 98 <a href="/curriculum/deep-learning">Deep Learning Curriculum<sup style="font-size: 75%;"> NEW</sup></a> 99 <a href="/lesson/dia1aidrzl">Stable Diffusion Masterclass<sup style="font-size: 75%;"> NEW</sup></a> 100 </div> 101 </section> 102 103 <section class="quick-links"> 104 <h3 class="section-heading">Quick Links</h3> 105 <div class="quick-links-list"> 106 <a class="link-item" href="https://twitter.com/deeplizard" rel="noreferrer"> 107 <img src="/assets/png/391a3a86.png" alt="deeplizard twitter" class="theme-sensitive"> 108 <span>Twitter</span> 109 </a> 110 <a class="link-item" href="https://facebook.com/deeplizard" rel="noreferrer"> 111 <img src="/assets/png/65ce1b58.png" alt="deeplizard facebook" class="theme-sensitive"> 112 <span>Facebook</span> 113 </a> 114 <a class="link-item" href="https://instagram.com/deeplizard" rel="noreferrer"> 115 <img src="/assets/png/afa79796.png" alt="deeplizard instagram" class="theme-sensitive"> 116 <span>Instagram</span> 117 </a> 118 <a class="link-item" href="https://patreon.com/deeplizard" rel="noreferrer"> 119 <img src="/assets/svg/b81b64be.svg" alt="deeplizard patreon" class="theme-sensitive"> 120 <span>Patreon</span> 121 </a> 122 <a class="link-item" href="https://youtube.com/deeplizardvlog" rel="noreferrer"> 123 <img src="/assets/png/aa1235b1.png" alt="deeplizard vlog" class="theme-sensitive"> 124 <span>Vlog</span> 125 </a> 126 <a class="link-item" href="https://www.youtube.com/channel/UCdCxHNCexDrAx78VfAuyKiA" rel="noreferrer"> 127 <img src="/assets/png/aa1235b1.png" alt="deeplizard lifts" class="theme-sensitive"> 128 <span>Fitness</span> 129 </a> 130 <a class="link-item" href="https://youtube.com/deeplizard" rel="noreferrer"> 131 <img src="/assets/png/aa1235b1.png" alt="deeplizard youtube" class="theme-sensitive"> 132 <span>YouTube</span> 133 </a> 134 <a class="link-item" href="https://consilienceproject.org"> 135 <img src="/assets/png/16cd59f3.png" alt="Consilience Project link" style="border-radius:10px;" class="theme-sensitive"> 136 <span>Consilience</span> 137 </a> 138 <a class="link-item" href="https://neurohacker.com/shop?rfsn=6488344.d171c6"> 139 <img src="/assets/png/9e31119a.png" alt="deeplizard neurohacker link" class="theme-sensitive"> 140 <span>Neurohacker</span> 141 </a> 142 </div> 143 </section> 144 145 <section class="table-of-contents"> 146 147 <h3 class="section-heading"> 148 Table of Contents 149 </h3> 150 151 <nav> 152 <ul class="toc-item-list"></ul> 153 </nav> 154 155 </section> 156 157 158 159 </aside> 160 161 <header> 162 <button class="hamburger left" style="display:none">â°</button> 163 <div class="top-bar-background"> 164 <div class="top-bar grid-container"> 165 <div class="left-side"> 166 <a href="/article/about">About</a> 167 <a href="https://youtube.com/deeplizard" rel="noreferrer">YouTube</a> 168 <a href="https://neurohacker.com/shop?rfsn=6488344.d171c6">Neurohacker</a> 169 <a href="/resource/pavq7noze2">Conv Demo</a> 170 <a href="/resource/pavq7noze3">Max-Pool Demo</a> 171 <a href="/lesson/sda1ladzir">AI Art for Beginners<sup style="font-size: 75%;"> NEW</sup></a> 172 </div> 173 <div class="right-side"> 174 <a href="/account/profile" class="profile logged-in" style="display:none">Profile</a> 175 <a href="/account/logout" class="logout logged-in" style="display:none">Logout</a> 176 <a href="/account/login" class="login logged-out" style="display:none">Login</a> 177 <a id="theme-toggle">
178 <span id="dark-toggle-icon" class="material-icons-outlined" style="display:none">dark_mode</span> 179 <span id="light-toggle-icon" class="material-icons-outlined" style="display:none">light_mode</span> 180 </a> 181 </div> 182 </div> 183 </div> 184 <nav class="navbar grid-container"> 185 <a class="navbar-brand" href="/"> 186 <img src="/assets/png/4424f999.png" height="30" width="30" alt="deeplizard logo"> 187 <b>DEEPLIZARD</b> 188 </a> 189 <div class="navbar-nav"> 190 <a href="/courses">Courses</a> 191 <a href="/resources">Code</a> 192 <a href="/hivemind">Hivemind</a> 193 <a href="https://youtube.com/deeplizardvlog" rel="noreferrer">Vlog</a> 194 </div> 195 </nav> 196 </header> 197 <main class="lesson-content"> 198 199 <section class="heading"> 200 <h1 class="title">Engage with Deep Learning</h1> 201 <p class="subtitle">Interactive Visualization Crafted by deeplizard</p> 202 <div class="neurohacker-info"> 203 <a href="https://neurohacker.com/shop?rfsn=6488344.d171c6"> 204 <img class="for-dark-themes" src="/assets/jpg/4bf50cd6.jpg" alt="Neurohacker link" loading="lazy"> 205 <img class="for-light-themes" src="/assets/jpg/d679db81.jpg" alt="Neurohacker link" loading="lazy"> 206 </a> 207 </div> 208 209 </section> 210 211 <section class="author-container"> 212 <div class="author"> 213 <a href="/article/about"><img src="/assets/jpg/19321ad8.jpg" alt="Chris Profile" loading="lazy"></a> 214 <div class="author-info"> 215 <div class="name">Chris Lee</div> 216 <div class="bio">Research & Dev</div> 217 <div class="creationDate">June 2, 2021</div> 218 </div> 219 </div> 220 <div class="author"> 221 <a href="/article/about"><img src="/assets/jpg/16b4d955.jpg" alt="Mandy Profile" loading="lazy"></a> 222 <div class="author-info"> 223 <div class="name">Mandy Lee</div> 224 <div class="bio">Research & Dev</div> 225 <div class="creationDate">June 2, 2021</div> 226 </div> 227 </div> 228 </section> 229 230 <section> 231 <h3 class="section-heading"> 232 Understanding Convolution Operations in Neural Networks 233 </h3> 234 235 <p> 236 In deep learning, convolutional operations serve as the cornerstone of <a href="/learn/video/YRhxdVk_sIs">convolutional neural networks</a>. 237 </p> 238 239 <ul> 240 <li>Filter</li> 241 <li>Sliding window mechanism</li> 242 </ul> 243 244 <p> 245 A convolution operation transforms an input into an output through a filter and a sliding window mechanism. Explore the interactive demonstration below to deepen your grasp of this crucial process. 246 </p> 247 248 <div class="ratio ratio-16x9"> 249 <iframe src="https://youtube.com/embed/vJiZqZRkIg8?rel=0&showinfo=0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe> 250 </div> 251 252 <h4 class="sub-section-heading"> 253 Navigating the Application 254 </h4> 255 256 <p> 257 To make the most of your experience, here are some pointers for using the app: 258 </p> 259 260 <ul> 261 <li> 262 Hover over pixel values in both the calculations and the output to see the relationships between them. ð 263 </li> 264 <li> 265 The <code class="language-python hljs">*</code> operation between the window and the filter signifies the sum of the element-wise product, also known as the <a href="https://en.wikipedia.org/wiki/Frobenius_inner_product">Frobenius inner product</a>. 𧮠266 </li> 267 <li> 268 In the output, red pixels indicate positive activations, while blue pixels signify negative activations. ð´ðµ 269 </li> 270 <li> 271 Although the app functions on mobile, it's optimized for desktop use. We've done some testing on mobileâplease report any issues you experience. ð±ð» 272 </li> 273 <li> 274 Curious about filter size and stride? The app defaults to a
274stride of <code class="language-python hljs"><span class="hljs-number">1</span></code> and a filter size of <code class="language-python hljs"><span class="hljs-number">3</span> x <span class="hljs-number">3</span></code>. ð 275 </li> 276 </ul> 277 278 </section> 279 280 <section class="deeplizard-message app full-width"> 281 <div class="row justify-content-center align-items-center"> 282 <div class="col-12"> 283 <div class="message"> 284 <div class="message-header"> 285 <img src="/assets/png/4424f999.png" class="rounded me-2" alt="deeplizard logo" loading="lazy"> 286 <strong class="me-auto text-uppercase">Convolution Operation</strong> 287 <small>Application</small> 288 <span class="material-icons-outlined ms-2">settings</span> 289 </div> 290 <div class="message-body"> 291 292 <div class="controls text-center"> 293 <div class="row justify-content-center align-items-center text-center"> 294 <div class="col col-12 col-md-4 d-none d-md-block"> 295 <button id="fullscreen" type="button" class="btn btn-outline-dark">Full Screen</button> 296 </div> 297 <div class="col col-12 col-md-4"> 298 <div class="dropdown dataset-dropdown"> 299 <button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> 300 <span class="dataset-choice text-capitalize">MNIST</span> 301 </button> 302 <div class="dropdown-menu text-capitalize" style="width:100%"> 303 <a class="dropdown-item" href="#">MNIST</a> 304 <a class="dropdown-item" href="#">Fashion MNIST</a> 305 </div> 306 </div> 307 </div> 308 <div class="col col-12 col-md-4"> 309 <div class="dropdown image-dropdown"> 310 <button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> 311 <span class="image-choice text-capitalize"></span> 312 </button> 313 <div class="dropdown-menu text-capitalize" style="width:100%"></div> 314 </div> 315 </div> 316 <div class="col col-12 col-md-4"> 317 <div class="dropdown filter-dropdown"> 318 <button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> 319 <span class="filter-choice text-capitalize">Top Edge Filter</span> 320 </button> 321 <div class="dropdown-menu text-capitalize" style="width:100%"> 322 <h6 class="dropdown-header">Filters</h6> 323 <a class="dropdown-item" href="#">Top Edge Filter</a> 324 <a class="dropdown-item" href="#">Bottom Edge Filter</a> 325 <a class="dropdown-item" href="#">Left Edge Filter</a> 326 <a class="dropdown-item" href="#">Right Edge Filter</a> 327 <h6 class="dropdown-header">Prewitt</h6> 328 <a class="dropdown-item" href="#">Prewitt Top Filter</a> 329 <a class="dropdown-item" href="#">Prewitt Bottom Filter</a> 330 <a class="dropdown-item" href="#">Prewitt Left Filter</a> 331 <a class="dropdown-item" href="#">Prewitt Right Filter</a> 332 <h6 class="dropdown-header">Sobel</h6> 333 <a class="dropdown-item" href="#">Sobel Top Filter</a> 334 <a class="dropdown-item" href="#">Sobel Bottom Filter</a> 335 <a class="dropdown-item" href="#">Sobel Left Filter</a> 336 <a class="dropdown-item" href="#">Sobel Right Filter</a> 337 </div> 338 </div> 339 </div> 340 <div class="col col-12 col-md-4"> 341 <button id="step" type="button" class="btn btn-outline-dark">Step</button> 342 </div> 343 <div class="col col-12 col-md-4"> 344 <button id="play" type="button" class="btn btn-outline-dark">Play</button> 345 </div> 346 </div> 347 </div> 348 349 <hr> 350 351 <div class="visual text-center"> 352 <div class="row justify-content-center align-items-center"> 353 <div class="col-4"> 354 <div class="operation"></div> 355 </div> 356 <div class="col-12"> 357 <div class="operation-expanded"></div> 358 </div> 359 </div> 360 361 <div class="row justify-content-center align-items-center"> 362 <div class="col-6"> 363 <h4>Input</h4> 364 <div class="input"></div> 365 </div> 366 <div class="col-6"> 367 <h4>Output</h4> 368 <div class="output"></div> 369 </div> 370 </div> 371 </div> 372 </div> 373 </div> 374 </div> 375 </div> 376 </section> 377 378 </main> 379 <footer> 380 <div class="footer-container"> 381 <div class="footer-left"> 382 <a href="/">©deeplizard</a> 383 <a href="/article/about">About</a> 384 <a href="/article/agreements">Agreements</a> 385 <a href="https://youtube.com/deeplizard" rel="noreferrer">YouTube</a> 386 <a href="https://youtube.com/deeplizardvlog" rel="noreferrer">Vlog</a> 387 <a href="https://www.youtube.com/channel/UCdCxHNCexDrAx78VfAuyKiA" rel="noreferrer">Fitness</a> 388 <a href="/hivemind">Hivemind</a> 389 </div> 390 <div class="footer-right"> 391 <i id="back-to-the-top" class="material-icons" onclick="window.scrollTo({top: 0, behavior: 'smooth'});">keyboard_arrow_up</i> 392 </div> 393 </div> 394 </footer> 395 396 397 398 399 400 401
402<script type="module" src="/assets/js/78afe7bd.js" data-name="deeplizard-js"></script>
402<script type="module" src="/assets/js/b97983a8.js" class="page-script"></script>
402</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.