Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn CNN Hyperparameters | Other
Test UI Features

bookCNN Hyperparameters

Element

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/cnn-hyperparameters/styles-v2.css"
    />
  </head>
  <body>
    <div class="wrapper">
      <div class="top-right">
        <button id="toggleAnimation">⏸️</button>
      </div>
      <div class="controls">
        <div class="control-group">
          <div class="top-row">
            <label for="inputSize">Input Size:</label>
            <input type="number" id="inputSizeNum" value="5" />
          </div>
          <input type="range" id="inputSize" value="5" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="padding">Padding:</label>
            <input type="number" id="paddingNum" value="0" />
          </div>
          <input type="range" id="padding" value="0" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="kernelSize">Kernel Size:</label>
            <input type="number" id="kernelSizeNum" value="2" />
          </div>
          <input type="range" id="kernelSize" value="2" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="stride">Stride:</label>
            <input type="number" id="strideNum" value="1" />
          </div>
          <input type="range" id="stride" value="1" />
        </div>
      </div>

      <div class="container">
        <div class="grid-container">
          <div class="grid-title js-input-grid-size">Input Grid</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Output Grid</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Hover over</span> the matrices to change
        kernel position.
      </p>
    </div>

    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/cnn-hyperparameters/script-v1.js"></script>
  </body>
</html>

Spanish

Portuguese

French

German

Ukrainian

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 1.22

bookCNN Hyperparameters

Swipe to show menu

Element

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/cnn-hyperparameters/styles-v2.css"
    />
  </head>
  <body>
    <div class="wrapper">
      <div class="top-right">
        <button id="toggleAnimation">⏸️</button>
      </div>
      <div class="controls">
        <div class="control-group">
          <div class="top-row">
            <label for="inputSize">Input Size:</label>
            <input type="number" id="inputSizeNum" value="5" />
          </div>
          <input type="range" id="inputSize" value="5" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="padding">Padding:</label>
            <input type="number" id="paddingNum" value="0" />
          </div>
          <input type="range" id="padding" value="0" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="kernelSize">Kernel Size:</label>
            <input type="number" id="kernelSizeNum" value="2" />
          </div>
          <input type="range" id="kernelSize" value="2" />
        </div>

        <div class="control-group">
          <div class="top-row">
            <label for="stride">Stride:</label>
            <input type="number" id="strideNum" value="1" />
          </div>
          <input type="range" id="stride" value="1" />
        </div>
      </div>

      <div class="container">
        <div class="grid-container">
          <div class="grid-title js-input-grid-size">Input Grid</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Output Grid</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Hover over</span> the matrices to change
        kernel position.
      </p>
    </div>

    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/cnn-hyperparameters/script-v1.js"></script>
  </body>
</html>

Spanish

Portuguese

French

German

Ukrainian

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 3
some-alt