🤺 🐭 🌽 Construire un réseau de neurones Hopfield en JavaScript 🧖🏽 🥠 🎯

Face aux réseaux de neurones à l'université, le réseau Hopfield est devenu l'un de mes préférés. J'ai été surpris qu'il soit le dernier sur la liste des laboratoires, car son travail peut être clairement démontré à l'aide d'images et il n'est pas si difficile à mettre en œuvre.

Cet article montre comment résoudre le problème de restauration d'images déformées à l'aide d'un réseau de neurones Hopfield, préalablement formé sur des images de référence.

J'ai essayé de décrire étape par étape et aussi simplement que possible le processus de mise en œuvre d'un programme qui vous permet de jouer avec un réseau de neurones directement dans le navigateur, d'entraîner le réseau à l'aide de mes propres images dessinées à la main et de tester son fonctionnement sur des images déformées. images.

Sources sur Github et démo .

Pour la mise en œuvre, vous aurez besoin de :

Le navigateur
Compréhension de base des réseaux de neurones
Connaissance de base de JavaScript / HTML

Un peu de théorie

Le réseau de neurones Hopfield est un réseau de neurones entièrement connecté avec une matrice symétrique de connexions. Un tel réseau peut être utilisé pour organiser la mémoire associative, en tant que filtre, et aussi pour résoudre certains problèmes d'optimisation.

- . , . , , .

Schéma fonctionnel du réseau de neurones Hopfield

, , . (, ), . , , «» ( ).

:

$w_ {ij} = \ gauche \ {\ begin {matrice} \ sum_ {k = 1} ^ {m} x_ {i} ^ {k} * x_ {j} ^ {k} & i \ neq j \\ 0 , & i = j \ end {matrice} \ right.$

—

$x_ {i} ^ {k}, x_ {j} ^ {k}$ — - - - .
. :

$y_ {j} (0) = x_ {j}$
( ):

$y_ {j} (t + 1) = f \ gauche (\ sum_ {i = 1} ^ {n} w_ {ij} * y_ {i} (t) \ droite)$

— ;

— ;

— .
. — 3, , , . , .

Canvas . HTML CSS , ( ).

Canvas , ( ) . , Canvas ( «» ).

, 10×10 . , , 100 ( 100 ). — , −1 1, −1 — , 1 — .

- , .

//     10   
const gridSize = 10;
//     
const squareSize = 45;
//    (100)
const inputNodes = gridSize * gridSize;

//         ,
//      
let userImageState = [];
//      
let isDrawing = false;
//  
for (let i = 0; i < inputNodes; i += 1) {  
  userImageState[i] = -1;  
}

//   :
const userCanvas = document.getElementById('userCanvas');
const userContext = userCanvas.getContext('2d');
const netCanvas = document.getElementById('netCanvas');
const netContext = netCanvas.getContext('2d');

, .

//      
//   100  (gridSize * gridSize)
const drawGrid = (ctx) => {
  ctx.beginPath();
  ctx.fillStyle = 'white';
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'black';
  for (let row = 0; row < gridSize; row += 1) {
    for (let column = 0; column < gridSize; column += 1) {
      const x = column * squareSize;
      const y = row * squareSize;
      ctx.rect(x, y, squareSize, squareSize);
      ctx.fill();
      ctx.stroke();
    }
  }
  ctx.closePath();
};

«» , .

//   
const handleMouseDown = (e) => {
  userContext.fillStyle = 'black';
  //      x, y
  //  squareSize  squareSize (4545 )
  userContext.fillRect(
    Math.floor(e.offsetX / squareSize) * squareSize,
    Math.floor(e.offsetY / squareSize) * squareSize,
    squareSize, squareSize,
  );

  //     ,
  //      
  const { clientX, clientY } = e;
  const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);
  const index = calcIndex(coords.x, coords.y, gridSize);

  //       
  if (isValidIndex(index, inputNodes) && userImageState[index] !== 1) {
    userImageState[index] = 1;
  }

  //   (   )
  isDrawing = true;
};

//     
const handleMouseMove = (e) => {
  //   , ..      ,    
  if (!isDrawing) return;

  //  ,   handleMouseDown
  //     isDrawing = true;
  userContext.fillStyle = 'black';

  userContext.fillRect(
    Math.floor(e.offsetX / squareSize) * squareSize,
    Math.floor(e.offsetY / squareSize) * squareSize,
    squareSize, squareSize,
  );

  const { clientX, clientY } = e;
  const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);
  const index = calcIndex(coords.x, coords.y, gridSize);

  if (isValidIndex(index, inputNodes) && userImageState[index] !== 1) {
    userImageState[index] = 1;
  }
};

, , getNewSquareCoords, calcIndex isValidIndex. .

//      
//      
const calcIndex = (x, y, size) => x + y * size;

// ,     
const isValidIndex = (index, len) => index < len && index >= 0;

//        
//  ,      0  9
const getNewSquareCoords = (canvas, clientX, clientY, size) => {
  const rect = canvas.getBoundingClientRect();
  const x = Math.ceil((clientX - rect.left) / size) - 1;
  const y = Math.ceil((clientY - rect.top) / size) - 1;
  return { x, y };
};

. .

const clearCurrentImage = () => {
  //    ,    
  //       
  drawGrid(userContext);
  drawGrid(netContext);
  userImageState = new Array(gridSize * gridSize).fill(-1);
};

«» .

— . ( ).

...
const weights = [];  //   
for (let i = 0; i < inputNodes; i += 1) {
  weights[i] = new Array(inputNodes).fill(0); //       0
  userImageState[i] = -1;
}
...

, , inputNodes . 100 , 100 .

( ) . . .

const memorizeImage = () => {
  for (let i = 0; i < inputNodes; i += 1) {
    for (let j = 0; j < inputNodes; j += 1) {
      if (i === j) weights[i][j] = 0;
      else {
        // ,       userImageState  
        //  -1  1,  -1 -  ,  1 -     
        weights[i][j] += userImageState[i] * userImageState[j];
      }
    }
  }
};

, , , . :

// -  html   lodash:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
...
const recognizeSignal = () => {
  let prevNetState;
  //      .  
  //       
  // (2  ),     
  const currNetState = [...userImageState];
  do {
    //    , 
		// ..     
    prevNetState = [...currNetState];
    //      3  
    for (let i = 0; i < inputNodes; i += 1) {
      let sum = 0;
      for (let j = 0; j < inputNodes; j += 1) {
        sum += weights[i][j] * prevNetState[j];
      }
      //    ( - )
      currNetState[i] = sum >= 0 ? 1 : -1;
    }
    //      
    //     - isEqual
  } while (!_.isEqual(currNetState, prevNetState));

  //    ( ),   
  drawImageFromArray(currNetState, netContext);
};

isEqual lodash.

drawImageFromArray. .

const drawImageFromArray = (data, ctx) => {
  const twoDimData = [];
  //     
  while (data.length) twoDimData.push(data.splice(0, gridSize));

  //   
  drawGrid(ctx);
  //     ( )
  for (let i = 0; i < gridSize; i += 1) {
    for (let j = 0; j < gridSize; j += 1) {
      if (twoDimData[i][j] === 1) {
        ctx.fillStyle = 'black';
        ctx.fillRect((j * squareSize), (i * squareSize), squareSize, squareSize);
      }
    }
  }
};

HTML .

HTML

const resetButton = document.getElementById('resetButton');
const memoryButton = document.getElementById('memoryButton');
const recognizeButton = document.getElementById('recognizeButton');

//    
resetButton.addEventListener('click', () => clearCurrentImage());
memoryButton.addEventListener('click', () => memorizeImage());
recognizeButton.addEventListener('click', () => recognizeSignal());

//    
userCanvas.addEventListener('mousedown', (e) => handleMouseDown(e));
userCanvas.addEventListener('mousemove', (e) => handleMouseMove(e));
//  ,         
userCanvas.addEventListener('mouseup', () => isDrawing = false);
userCanvas.addEventListener('mouseleave', () => isDrawing = false);

//  
drawGrid(userContext);
drawGrid(netContext);

, :

Images de référence pour la formation en réseau

Essayer de reconnaître l'image déformée de la lettre H

Essayer de reconnaître une image déformée de la lettre T

! .

, , 0,15 * n ( — ). , , , , , .

Sources sur Github et démo .

Au lieu de la littérature, les conférences ont été utilisées par un excellent professeur sur les réseaux de neurones - Sergei Mikhailovich Roshchin , pour lequel un grand merci à lui.

Construire un réseau de neurones Hopfield en JavaScript

Un peu de théorie

More articles: