MuhammetOzturk/colab-da-javascript-ile-nesne-tespiti.ipynb

## colab-da-javascript-ile-nesne-tespiti.ipynb
{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "authorship_tag": "ABX9TyMI+HuLlgh2sXENLj89BNkB",
      "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/gist/MuhammetOzturk/78f9a81514e76e3cb10ed098e1251a77/colab-da-javascript-ile-nesne-tespiti.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": "_uFSKsiKEyce"
      },
      "outputs": [],
      "source": [
        "import threading\n",
        "import http.server\n",
        "import socketserver\n",
        "from google.colab import output\n",
        "\n",
        "PORT = 9000\n",
        "\n",
        "html_code = \"\"\"\n",
        "<!DOCTYPE html>\n",
        "<html>\n",
        "  <head>\n",
        "    <meta charset=\"UTF-8\">\n",
        "    <title>TensorFlow.js Nesne Tanıma</title>\n",
        "    <script src=\"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs\"></script>\n",
        "    <script src=\"https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd\"></script>\n",
        "    <style>\n",
        "      body { margin: 0; overflow: hidden; background: #000; }\n",
        "      #video, #canvas {\n",
        "        position: absolute;\n",
        "        top: 0; left: 0;\n",
        "        width: 100%;\n",
        "        height: 100%;\n",
        "        object-fit: contain;   /* 🔹 Kırpma yok, tam görüntü */\n",
        "        background: #000;\n",
        "      }\n",
        "    </style>\n",
        "  </head>\n",
        "  <body>\n",
        "    <video id=\"video\" autoplay muted playsinline></video>\n",
        "    <canvas id=\"canvas\"></canvas>\n",
        "\n",
        "    <script>\n",
        "      const video = document.getElementById('video');\n",
        "      const canvas = document.getElementById('canvas');\n",
        "      const ctx = canvas.getContext('2d');\n",
        "\n",
        "      async function setupCamera() {\n",
        "        const stream = await navigator.mediaDevices.getUserMedia({\n",
        "          video: true,\n",
        "          audio: false\n",
        "        });\n",
        "        video.srcObject = stream;\n",
        "        return new Promise((resolve) => {\n",
        "          video.onloadedmetadata = () => { resolve(video); };\n",
        "        });\n",
        "      }\n",
        "\n",
        "      async function run() {\n",
        "        const model = await cocoSsd.load();\n",
        "        await setupCamera();\n",
        "        video.play();\n",
        "\n",
        "        async function detectFrame() {\n",
        "          canvas.width = video.videoWidth;\n",
        "          canvas.height = video.videoHeight;\n",
        "\n",
        "          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n",
        "\n",
        "          const predictions = await model.detect(video);\n",
        "          predictions.forEach(pred => {\n",
        "            ctx.beginPath();\n",
        "            ctx.rect(...pred.bbox);\n",
        "            ctx.lineWidth = 2;\n",
        "            ctx.strokeStyle = \"lime\";\n",
        "            ctx.fillStyle = \"lime\";\n",
        "            ctx.stroke();\n",
        "            ctx.fillText(\n",
        "              pred.class + \" (\" + Math.round(pred.score * 100) + \"%)\",\n",
        "              pred.bbox[0],\n",
        "              pred.bbox[1] > 10 ? pred.bbox[1] - 5 : 10\n",
        "            );\n",
        "          });\n",
        "\n",
        "          requestAnimationFrame(detectFrame);\n",
        "        }\n",
        "\n",
        "        detectFrame();\n",
        "      }\n",
        "\n",
        "      run();\n",
        "    </script>\n",
        "  </body>\n",
        "</html>\n",
        "\"\"\"\n",
        "\n",
        "# HTML dosyası kaydet\n",
        "with open(\"index.html\", \"w\") as f:\n",
        "    f.write(html_code)\n",
        "\n",
        "# Basit sunucu başlat\n",
        "def run_server():\n",
        "    Handler = http.server.SimpleHTTPRequestHandler\n",
        "    with socketserver.TCPServer((\"\", PORT), Handler) as httpd:\n",
        "        httpd.serve_forever()\n",
        "\n",
        "thread = threading.Thread(target=run_server)\n",
        "thread.daemon = True\n",
        "thread.start()\n",
        "\n",
        "# Çalışan web uygulamasını Colab içinde iframe olarak aç\n",
        "output.serve_kernel_port_as_iframe(PORT, path=\"/index.html\")\n"
      ]
    }
  ]
}
	{
	"nbformat": 4,
	"nbformat_minor": 0,
	"metadata": {
	"colab": {
	"provenance": [],
	"authorship_tag": "ABX9TyMI+HuLlgh2sXENLj89BNkB",
	"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/gist/MuhammetOzturk/78f9a81514e76e3cb10ed098e1251a77/colab-da-javascript-ile-nesne-tespiti.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": "_uFSKsiKEyce"
	},
	"outputs": [],
	"source": [
	"import threading\n",
	"import http.server\n",
	"import socketserver\n",
	"from google.colab import output\n",
	"\n",
	"PORT = 9000\n",
	"\n",
	"html_code = \"\"\"\n",
	"<!DOCTYPE html>\n",
	"<html>\n",
	" <head>\n",
	" <meta charset=\"UTF-8\">\n",
	" <title>TensorFlow.js Nesne Tanıma</title>\n",
	" <script src=\"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs\"></script>\n",
	" <script src=\"https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd\"></script>\n",
	" <style>\n",
	" body { margin: 0; overflow: hidden; background: #000; }\n",
	" #video, #canvas {\n",
	" position: absolute;\n",
	" top: 0; left: 0;\n",
	" width: 100%;\n",
	" height: 100%;\n",
	" object-fit: contain; /* 🔹 Kırpma yok, tam görüntü */\n",
	" background: #000;\n",
	" }\n",
	" </style>\n",
	" </head>\n",
	" <body>\n",
	" <video id=\"video\" autoplay muted playsinline></video>\n",
	" <canvas id=\"canvas\"></canvas>\n",
	"\n",
	" <script>\n",
	" const video = document.getElementById('video');\n",
	" const canvas = document.getElementById('canvas');\n",
	" const ctx = canvas.getContext('2d');\n",
	"\n",
	" async function setupCamera() {\n",
	" const stream = await navigator.mediaDevices.getUserMedia({\n",
	" video: true,\n",
	" audio: false\n",
	" });\n",
	" video.srcObject = stream;\n",
	" return new Promise((resolve) => {\n",
	" video.onloadedmetadata = () => { resolve(video); };\n",
	" });\n",
	" }\n",
	"\n",
	" async function run() {\n",
	" const model = await cocoSsd.load();\n",
	" await setupCamera();\n",
	" video.play();\n",
	"\n",
	" async function detectFrame() {\n",
	" canvas.width = video.videoWidth;\n",
	" canvas.height = video.videoHeight;\n",
	"\n",
	" ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n",
	"\n",
	" const predictions = await model.detect(video);\n",
	" predictions.forEach(pred => {\n",
	" ctx.beginPath();\n",
	" ctx.rect(...pred.bbox);\n",
	" ctx.lineWidth = 2;\n",
	" ctx.strokeStyle = \"lime\";\n",
	" ctx.fillStyle = \"lime\";\n",
	" ctx.stroke();\n",
	" ctx.fillText(\n",
	" pred.class + \" (\" + Math.round(pred.score * 100) + \"%)\",\n",
	" pred.bbox[0],\n",
	" pred.bbox[1] > 10 ? pred.bbox[1] - 5 : 10\n",
	" );\n",
	" });\n",
	"\n",
	" requestAnimationFrame(detectFrame);\n",
	" }\n",
	"\n",
	" detectFrame();\n",
	" }\n",
	"\n",
	" run();\n",
	" </script>\n",
	" </body>\n",
	"</html>\n",
	"\"\"\"\n",
	"\n",
	"# HTML dosyası kaydet\n",
	"with open(\"index.html\", \"w\") as f:\n",
	" f.write(html_code)\n",
	"\n",
	"# Basit sunucu başlat\n",
	"def run_server():\n",
	" Handler = http.server.SimpleHTTPRequestHandler\n",
	" with socketserver.TCPServer((\"\", PORT), Handler) as httpd:\n",
	" httpd.serve_forever()\n",
	"\n",
	"thread = threading.Thread(target=run_server)\n",
	"thread.daemon = True\n",
	"thread.start()\n",
	"\n",
	"# Çalışan web uygulamasını Colab içinde iframe olarak aç\n",
	"output.serve_kernel_port_as_iframe(PORT, path=\"/index.html\")\n"
	]
	}
	]
	}
No results found