FaceRecognitionAndReplacement.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "FaceRecognitionAndReplacement.ipynb",
      "provenance": [],
      "authorship_tag": "ABX9TyMdJfFVcvoumBJCZz6G8q9y",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/AntonThai2022/ML/blob/main/FaceRecognitionAndReplacement.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "VYfS0blLb022"
      },
      "outputs": [],
      "source": [
        "<!DOCTYPE html>\n",
        "<html lang=\"en\">\n",
        "  <head>\n",
        "    <meta charset=\"UTF-8\" />\n",
        "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n",
        "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n",
        "    <title>Facial Detection App</title>\n",
        "  </head>\n",
        "  <body>\n",
        "    <h1>Facial Detection</h1>\n",
        "    <video id=\"video\" autoplay style=\"display: none\"></video>\n",
        "    <canvas id=\"canvas\" width=\"500px\" height=\"400px\"></canvas>\n",
        "    <img id=\"source\" src=\"Vengerveld_no_fone.png\" style=\"display: none\">\n",
        "  </body>\n",
        "\n",
        "  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/tensorflow/3.18.0/tf.js\"></script>\n",
        "  <script src=\"https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface\"></script>\n",
        "\n",
        "  <script>\n",
        "\n",
        "  let video = document.getElementById(\"video\"); //Здесь мы обращаемся к элементу тега video и сохраняем его в переменной video.\n",
        "  let model;\n",
        "\n",
        "  // Объявление переменной canvas и настройка контекста\n",
        "\n",
        "  let canvas = document.getElementById(\"canvas\");\n",
        "  let ctx = canvas.getContext(\"2d\");\n",
        "  var image = document.getElementById('source');\n",
        "\n",
        "  /*Функция accessCamera вызывает API  getUserMedia, и мы указываем размеры видео (здесь установлена ширина 500 px и высота 400 px,\n",
        "  но вы можете подобрать размеры по своему желанию). Функция getUserMedia возвращает промис с объектом MediaStream, который мы\n",
        "  присваиваем свойству srcObject элемента видео. Ниже будет вызвана данная функция accessCamera.*/\n",
        "  const accessCamera = () => { //Здесь у нас анонимная стрелочная функция accessCamera\n",
        "    navigator.mediaDevices\n",
        "      .getUserMedia({\n",
        "        video: { width: 500, height: 400 },\n",
        "        audio: false,\n",
        "      })\n",
        "      .then((stream) => {  //и здесь\n",
        "        video.srcObject = stream; //этот объект и возращается по итогу\n",
        "      });\n",
        "  };\n",
        "\n",
        "  const detectFaces = async () => {\n",
        "    const prediction = await model.estimateFaces(video, false);\n",
        "\n",
        "    // Использование canvas для рисования видео\n",
        "\n",
        "    ctx.drawImage(video, 0, 0, 500, 400);\n",
        "\n",
        "    prediction.forEach((predictions) => {\n",
        "      console.log(predictions);\n",
        "\n",
        "      let width = (predictions.bottomRight[0] - predictions.topLeft[0])*1.2;\n",
        "      let height = (predictions.bottomRight[1] - predictions.topLeft[1])*1.6;\n",
        "      ctx.drawImage(image,\n",
        "                    predictions.topLeft[0] - width / 7,\n",
        "                    predictions.topLeft[1] - height/ 2.5,\n",
        "                    width,\n",
        "                    height);\n",
        "      // Рисование прямоугольника, который будет определять лицо\n",
        "      //ctx.beginPath();\n",
        "      //ctx.lineWidth = \"4\";\n",
        "      //ctx.strokeStyle = \"yellow\";\n",
        "      //ctx.rect(\n",
        "      //  predictions.topLeft[0],\n",
        "      //  predictions.topLeft[1],\n",
        "      //  predictions.bottomRight[0] - predictions.topLeft[0],\n",
        "      //  predictions.bottomRight[1] - predictions.topLeft[1]\n",
        "      //);\n",
        "      // Последние два аргумента обозначают ширину и высоту,\n",
        "      // но поскольку модели blazeface возвращают только координаты,\n",
        "      // мы должны вычесть их, чтобы получить ширину и высоту\n",
        "      ctx.stroke();\n",
        "    });\n",
        "  };\n",
        "\n",
        "  accessCamera();\n",
        "\n",
        "  video.addEventListener(\"loadeddata\", async () => {\n",
        "    model = await blazeface.load();\n",
        "    // Вызов функции detectFaces каждые 40 миллисекунд\n",
        "    setInterval(detectFaces, 40);\n",
        "  });\n",
        "  \n",
        "  </script>\n",
        "</html>\n"
      ]
    }
  ]
}