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)

## Johdanto

Kuvittele, että opettelet kääntämään englantia espanjaksi. Opettelet sanoja, lauseita ja niiden konteksteja — ja pian pystyt kääntämään lauseita, joita et ole aiemmin nähnyt.
Neuroverkko toimii samalla tavalla: se **opp ii esimerkeistä** kuten teksti, kuvat tai ääni, ja käyttää havaittuja malleja tehdäkseen ennusteita.

Aivan kuten ihmiset oppivat erottamaan kissat koirista näkemällä useita esimerkkejä, neuroverkko oppii suorittamaan tehtäviä kuten **luokittelu**, **regressio** tai **generointi** analysoimalla merkittyä dataa. Tätä prosessia kutsutaan **ohjatuksi oppimiseksi**, joka on yleisin tapa kouluttaa neuroverkkoja.

Koulutuksen aikana verkko näkee esimerkkejä, joilla on tunnetut vastaukset (**tunnisteet**) ja mukauttaa itseään vastaamaan niitä. Myöhemmin, kun verkolle annetaan uusia **tunnisteettomia** syötteitä, se soveltaa oppimaansa tehdäkseen ennusteita itsenäisesti.

Huomio

Alla on yksinkertainen esimerkki neuroverkosta, joka on opetettu **tunnistamaan kissojen ja koirien piirroksia**.
Piirrä jotain ja katso, miten malli luokittelee sen:

* **LMB** – piirrä
* **Shift + LMB** – pyyhi


<!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()">
            Koira
          </button>
          <button type="button" class="customize-btn cat-btn js-cat-btn" onclick="handleCatBtnClick()">
            Kissa
          </button>
          <button type="button" class="customize-btn clear-btn js-clear-btn" onclick="handleClearClick()">
            Tyhjennä
          </button>
        </div>
      </div>
      
      <div class="layers-section js-layers-section"></div>
      
      <div class="images-section">
        <img class="custom-image" src="https://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://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://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>

Neuroverkot ovat tehokkaita algoritmeja, jotka on inspiroitu ihmisaivojen rakenteesta ja joita käytetään ratkaisemaan monimutkaisia koneoppimisen ongelmia. Rakennat oman neuroverkkosi alusta alkaen ymmärtääksesi sen toimintaa. Tämän kurssin jälkeen osaat luoda neuroverkkoja luokittelu- ja regressio-ongelmien ratkaisemiseksi scikit-learn-kirjaston avulla.

Ensiksi käsittelemme, mitä neuroverkko on ja miten se toimii. Tarkastelemme myös sen sovellusalueita.

Seuraavaksi rakennamme oman neuroverkon ja tarkastelemme, kuinka tehokkaasti se oppii. Lisäksi käsittelemme valmista ratkaisua scikit-learn-kirjastosta.

Lopuksi annamme sinulle lisätietoa siitä, miten valita sopiva malli ja millaisia neuroverkkoja on olemassa. Kurssin suorittamiseksi osaamisesi testataan.

Mikä on neuroverkko?

Mikä on neuroverkko?