Summary  
This chapter introduces the core concept of feedforward neural networks trained via supervised learning, showing how layers of interconnected “neurons” learn patterns from labeled examples to perform classification tasks.

General domain of usage  
Image recognition (e.g., distinguishing drawings of cats and dogs)

## Introduktion

Forestil dig at lære at oversætte engelsk til spansk. Du memorerer ord, sætninger og deres kontekst — og snart kan du oversætte sætninger, du aldrig har set før.
Et neuralt netværk fungerer på samme måde: det **lærer af eksempler** såsom tekst, billeder eller lyd, og bruger opdagede mønstre til at lave forudsigelser.

Ligesom mennesker lærer at skelne katte fra hunde ved at se mange eksempler, lærer et neuralt netværk at udføre opgaver som **klassifikation**, **regression** eller **generering** ved at analysere mærkede data. Denne proces kaldes **superviseret læring**, den mest almindelige metode til at træne neurale netværk.

Under træning ser netværket eksempler med kendte svar (**labels**) og tilpasser sig for at matche dem. Senere, når det får nye **uetiketterede** input, anvender det det, det har lært, til selvstændigt at lave forudsigelser.

Bemærk

Nedenfor ses en simpel demonstration af et neuralt netværk, der er trænet til at **genkende tegninger af katte og hunde**.
Tegn noget og se, hvordan modellen klassificerer det:

* **LMB** – tegn
* **Shift + LMB** – slet


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

      :root {
        --dark-blue: #1e2635;
        --blue: #4f5e77;
        --orange: #ff8a00;
        --grey: #f4f4f4;
      }

      /* body {
          width: 713px;
          border: 1px solid;
        } */

      ul {
        list-style-type: none;
        padding: 0;
      }

      li {
        margin: 0.5rem 0;
        text-align: center;
      }

      a {
        text-decoration: none;
      }

      .custom-parent-container {
        display: flex;
        justify-content: space-between;
      }

      /* >>>>>>>>>>> CANVAS <<<<<<<<<<<<<<<<<< */
      .canvas {
        width: 256px;
        height: 256px;
        border-radius: 5px;
        border: 3px solid var(--orange);
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background-color: var(--grey);
      }

      .tools-wrapper {
        width: 256px;
        display: flex;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 15px;
      }

      .customize-btn {
        background-color: var(--grey);
        color: var(--orange);
        font-size: 20px;
        border: 3px solid var(--orange);
        border-radius: 5px;
        padding: 5px 11px;
        font-family: "Hind Siliguri";
        font-weight: 700;
        cursor: pointer;
        transition: 0.5s ease-in-out;
      }

      .customize-btn:hover,
      .customize-btn:focus {
        background-color: var(--orange);
        color: #fff;
      }

      .cat-btn {
        margin-left: 5px;
      }

      .clear-btn {
        margin-left: auto;
      }

      /* >>>>>>>>>>>>>>>> SQUARES <<<<<<<<<<<<<*/
      .layers-section {
        width: 340px;
        height: 310px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
      }

      .square {
        margin: 10px 0;
        width: 30px;
        height: 30px;
        border-radius: 2px;
        border: 3px solid var(--orange);
        background: transparent;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }

      .lines-wrapper {
        top: 0;
        position: relative;
        width: 100%;
        height: 300px;
      }

      .svg-icon {
        position: absolute;
      }

      .square-filler {
        width: 100%;
        background-color: var(--orange);
        margin: 1px;
        transition: height 1s;
      }

      /* IMAGES */

      .images-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 20px;
      }

      .custom-image:not(:last-child) {
        margin-bottom: 10px;
      }

      .custom-image {
        transition: width 1s;
      }
    </style>
  </head>
  <body>
    <div class="custom-parent-container">
      
      <div class="section">
        <canvas onmousedown="handleCanvasMouseDown(event)" onmousemove="handleCanvasMouseMove(event)" onmouseup="handleCanvasMouseUp(event)" class="canvas js-canvas" width="256" height="256" id="canvas"></canvas>

        <div class="tools-wrapper">
          <button type="button" class="customize-btn js-dog-btn" onclick="handleDogBtnClick()">
            Hund
          </button>
          <button type="button" class="customize-btn cat-btn js-cat-btn" onclick="handleCatBtnClick()">
            Kat
          </button>
          <button type="button" class="customize-btn clear-btn js-clear-btn" onclick="handleClearClick()">
            Ryd
          </button>
        </div>
      </div>
      
      <div class="layers-section js-layers-section"></div>
      
      <div class="images-section">
        <img class="custom-image" src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/cat.png" alt="Cat Illustration" width="30px" style="width: 30px" id="class_cat">
        <img class="custom-image" src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/dog.png" alt="Dog Illustration" width="30px" style="width: 30px" id="class_dog">
      </div>
    </div>
    
    
    <script>
      // Canvas properties
      window.penSize = 2;
      window.isDrawing = false;
      window.penColor = "black";
      window.lastX = undefined;
      window.lastY = undefined;
    </script>
    
    <script>
      function handleCanvasMouseDown(e) {
        const canvasContext = document.querySelector(".js-canvas").getContext("2d");

        isDrawing = true;
        lastX = e.offsetX;
        lastY = e.offsetY;

        if (e.shiftKey) {
          // If Shift key is held down, start clearing mode
          clearPixels(lastX, lastY);
        } else {
          canvasContext.beginPath();
          canvasContext.moveTo(lastX, lastY);
        }
      }

      function handleCanvasMouseUp() {
        isDrawing = false;
        lastX = undefined;
        lastY = undefined;
      }

      function handleCanvasMouseMove(e) {
        const canvasContext = document.querySelector(".js-canvas").getContext("2d");

        if (isDrawing) {
          const currentX = e.offsetX;
          const currentY = e.offsetY;

          if (e.shiftKey) {
            // If Shift key is held down and in clearing mode, clear the pixels
            clearPixels(currentX, currentY);
          } else {
            canvasContext.lineTo(currentX, currentY);
            canvasContext.strokeStyle = penColor;
            canvasContext.lineWidth = penSize * 2;
            canvasContext.stroke();
          }

          lastX = currentX;
          lastY = currentY;
        }
      }

      function clearPixels(x, y) {
        const canvasContext = document.querySelector(".js-canvas").getContext("2d");
        canvasContext.clearRect(x - penSize, y - penSize, penSize * 2, penSize * 2);
      }

      function handleClearClick() {
        const canvas = document.querySelector(".js-canvas");
        const canvasContext = canvas.getContext("2d");
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
      }
    </script>

    
    
    <script>
      window.nn_data = [
        [
          { id: "neuron_0_0", fill: 50 },
          { id: "neuron_0_1", fill: 50 },
          { id: "neuron_0_2", fill: 50 },
          { id: "neuron_0_3", fill: 50 },
        ],
        [
          { id: "neuron_1_0", fill: 50 },
          { id: "neuron_1_1", fill: 50 },
          { id: "neuron_1_2", fill: 50 },
        ],
        [
          { id: "neuron_2_0", fill: 50 },
          { id: "neuron_2_1", fill: 50 },
          { id: "neuron_2_2", fill: 50 },
          { id: "neuron_2_3", fill: 50 },
          { id: "neuron_2_4", fill: 50 },
          { id: "neuron_2_5", fill: 50 },
          { id: "neuron_2_6", fill: 50 },
          { id: "neuron_2_7", fill: 50 },
        ],
        [
          { id: "neuron_3_0", fill: 50 },
          { id: "neuron_3_1", fill: 50 },
          { id: "neuron_3_2", fill: 50 },
          { id: "neuron_3_3", fill: 50 },
          { id: "neuron_3_4", fill: 50 },
          { id: "neuron_3_5", fill: 50 },
        ],
        [
          { id: "neuron_4_0", fill: 50 },
          { id: "neuron_4_1", fill: 50 },
        ],
      ];
      window.points = {
        1: [150],
        2: [130, 170],
        3: [110, 150, 190],
        4: [90, 130, 170, 210],
        5: [70, 110, 150, 190, 230],
        6: [50, 90, 130, 170, 210, 250],
        7: [30, 70, 110, 150, 190, 230, 270],
        8: [10, 50, 90, 130, 170, 210, 250, 290],
      };
    </script>
    

    
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/andrii_test/scripts/index_ww.js"></script>

    <script>
      function handleLoad() {
        const layersSectionElement = document.querySelector(".js-layers-section");

        // Generate columns and sets of lines dynamically
        for (let i = 0; i < nn_data.length; i++) {
          const column = buildColumnSquares(nn_data[i]);
          layersSectionElement.appendChild(column);

          if (i < nn_data.length - 1) {
            const setOfLines = createDots(nn_data[i].length, nn_data[i + 1].length);
            layersSectionElement.appendChild(setOfLines);
          }
        }

        if (isMobile()) {
          //console.log('Mobile Detected');
          document.getElementsByClassName("custom-parent-container")[0].style.display = "none";
        } else {
          //console.log('Mobile Not Detected');
          start_nn();
        }
      }

      function buildColumnSquares(squaresArray) {
        const columnParentElement = document.createElement("div");
        columnParentElement.setAttribute("class", "layer");

        const columnSquaresMarkup = squaresArray
          .map(
            ({ id, fill }) => `
                <div class="square" id="${id}">
                  <div class="square-filler" style="height: ${(22 * fill) / 100}px;"></div>
                </div>
              `
          )
          .join("");

        columnParentElement.innerHTML = columnSquaresMarkup;
        return columnParentElement;
      }

      function createDots(...keys) {
        if (keys.includes(0)) {
          return;
        }
        const linesParentElement = document.createElement("div");
        linesParentElement.setAttribute("class", "lines-wrapper");

        const combinations = [];

        // Generate all combinations of points from different arrays
        for (let i = 0; i < keys.length; i++) {
          const key1 = keys[i];
          const linePoints1 = points[key1];

          for (let j = i + 1; j < keys.length; j++) {
            const key2 = keys[j];
            const linePoints2 = points[key2];

            // Loop through all combinations of points from different arrays
            for (const point1 of linePoints1) {
              for (const point2 of linePoints2) {
                combinations.push({ point1, point2 });
              }
            }
          }
        }

        // Create SVG elements and append them to the container
        for (const combination of combinations) {
          const svgElement = createLine(combination.point1, combination.point2);
          linesParentElement.innerHTML += svgElement;
        }

        return linesParentElement; // Return the container
      }

      function createLine(point1, point2) {
        return `
            <svg width="100%" height="100%" class="svg-icon">
              <line
                x1="0"
                y1="${point1}"
                x2="100%"
                y2="${point2}"
                stroke="#ff8a00"
                stroke-width="1"
              />
            </svg>
          `;
      }

      function isMobile() {
        var a;
        if (
          navigator.userAgent.match(/Android/i) ||
          navigator.userAgent.match(/webOS/i) ||
          navigator.userAgent.match(/iPhone/i) ||
          navigator.userAgent.match(/iPad/i) ||
          navigator.userAgent.match(/iPod/i) ||
          navigator.userAgent.match(/BlackBerry/i) ||
          navigator.userAgent.match(/Windows Phone/i)
        ) {
          a = true;
        } else {
          a = false;
        }
        return a;
      }

      window.onload = handleLoad();
    </script>
  </body>
</html>

Neurale netværk er kraftfulde algoritmer inspireret af den menneskelige hjernes struktur, som anvendes til at løse komplekse maskinlæringsproblemer. Du vil konstruere dit eget neurale netværk fra bunden for at forstå dets funktion. Efter dette kursus vil du kunne oprette neurale netværk til løsning af klassifikations- og regressionsopgaver ved hjælp af scikit-learn-biblioteket.

Først vil vi diskutere, hvad et neuralt netværk er, og hvordan det fungerer. Vi vil også overveje anvendelsesområdet.

Herefter vil vi forsøge at opbygge vores eget neurale netværk og undersøge, hvor effektivt det håndterer læring. Vi vil også se på en færdig løsning fra scikit-learn-biblioteket.

Afslutningsvis vil vi give dig yderligere nyttig information om, hvordan du kan forstå, hvilken model der skal anvendes, samt hvilke typer neurale netværk der findes. For at afslutte kurset vil din tilegnede viden blive testet.

Hvad er et neuralt netværk?

Introduktion

Eksempel på neuralt netværk

Hvad er et neuralt netværk?

Introduktion

Eksempel på neuralt netværk