<!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>


# Source Code
```html
<!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>
```

<!DOCTYPE html>
<html lang="es">
  <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">Tamaño de entrada:</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">Tamaño del kernel:</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">Matriz de entrada</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Matriz de salida</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Pasa el cursor sobre</span> las matrices
        para cambiar la posición del kernel.
      </p>
    </div>

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


<!DOCTYPE html>
<html lang="pt">
  <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">Tamanho de entrada:</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">Tamanho do kernel:</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">Matriz de entrada</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Matriz de saída</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Passe o cursor sobre</span> as matrizes
        para alterar a posição do kernel.
      </p>
    </div>

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


<!DOCTYPE html>
<html lang="fr">
  <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">Taille d'entrée :</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"
              >Taille du<br />
              kernel :</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">Matrice d'entrée</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Matrice de sortie</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Passez la souris sur</span> les matrices
        pour modifier la position du kernel.
      </p>
    </div>

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


<!DOCTYPE html>
<html lang="de">
  <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">Eingangsgröße:</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">Kernelgröße:</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">Eingangsmatrix</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Ausgangsmatrix</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Bewegen Sie den Mauszeiger über</span>
        die Matrizen, um die Position des Kernels zu ändern.
      </p>
    </div>

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


<!DOCTYPE html>
<html lang="uk">
  <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">Розмір вхідних даних:</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):</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">Вхідна матриця</div>
          <div class="grid input-grid"></div>
        </div>

        <div class="grid-container">
          <div class="grid-title js-output-grid-size">Вихідна матриця</div>
          <div class="grid output-grid"></div>
        </div>
      </div>
      <p class="text">
        <span style="font-weight: 600">Наведіть курсор</span> на матриці, щоб
        змінити положення ядра.
      </p>
    </div>

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


This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

Test UI Features

CNN Hyperparameters

Element

Source Code

Spanish

Portuguese

French

German

Ukrainian