Summary  
This chapter introduces neural networks as supervised learning models that learn from labeled data to perform tasks such as classification, regression, or generation. It demonstrates how to implement code that processes drawing input, runs inference through a trained network, and dynamically visualizes network layers and connections.  

General domain of usage  
Image classification

## はじめに

英語をスペイン語に翻訳する方法を学ぶことを想像してください。単語やフレーズ、その文脈を覚え、やがて見たことのない文も翻訳できるようになります。
ニューラルネットワークも同じように動作します。テキスト、画像、音声などの**例から学習**し、発見したパターンを使って予測を行います。

人間が多くの例を見て猫と犬を区別できるようになるのと同様に、ニューラルネットワークもラベル付きデータを解析することで、**分類**、**回帰**、**生成**などのタスクを学習します。このプロセスは**教師あり学習**と呼ばれ、ニューラルネットワークの最も一般的な訓練方法です。

訓練中、ネットワークは既知の答え（**ラベル**）が付いた例を見て、それに合わせて自身を調整します。その後、新しい**ラベルなし**入力が与えられると、学習した内容をもとに自動的に予測を行います。

ノート

## ニューラルネットワークの例

以下は、**猫と犬の絵を認識する**ように訓練されたニューラルネットワークの簡単なデモンストレーションです。
何かを描いて、モデルがどのように分類するかを確認してください。

* **LMB** – 描画
* **Shift + LMB** – 消去


<!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()">
            犬
          </button>
          <button type="button" class="customize-btn cat-btn js-cat-btn" onclick="handleCatBtnClick()">
            猫
          </button>
          <button type="button" class="customize-btn clear-btn js-clear-btn" onclick="handleClearClick()">
            クリア
          </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>

ニューラルネットワークは、人間の脳の構造に着想を得た強力なアルゴリズムであり、複雑な機械学習の問題を解決するために使用されます。本コースでは、ニューラルネットワークを一から構築し、その仕組みを理解します。このコース修了後は、scikit-learnライブラリを用いて分類や回帰問題を解決するためのニューラルネットワークを作成できるようになります。

まず、ニューラルネットワークとは何か、その仕組みについて説明します。また、その応用範囲についても考察します。

次に、独自のニューラルネットワークを構築し、その学習効率を確認します。また、scikit-learnライブラリの既製ソリューションについても検討します。

最後に、どのモデルを使用すべきか、またどのような種類のニューラルネットワークが存在するかを理解するための追加の有用な情報を提供します。コースを修了するために、習得した知識に関するテストが行われます。

ニューラルネットワークとは何か？

はじめに

ニューラルネットワークの例