Add files via upload

hwkims · web-flow · commit 45a1c18f20f5 · 2024-12-11T14:51:04.000+09:00
diff --git a/index.html b/index.html
@@ -3,44 +3,78 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>YOLOv8 Object Detection with Logs</title>
+    <title>YOLOv8 Object Detection with Sound Alert</title>
     <style>
-        #webcam-container {
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f9;
             display: flex;
             justify-content: center;
             align-items: center;
-            margin-top: 20px;
+            height: 100vh;
         }
+
+        #container {
+            position: relative;
+            width: 640px;
+            height: 480px;
+            border: 2px solid #ccc;
+            background-color: #fff;
+        }
+
         #webcam {
-            border: 2px solid black;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
         }
+
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            pointer-events: none; /* 캔버스가 비디오 위에 있지만 클릭할 수 없도록 설정 */
+        }
+
         #log {
             margin-top: 20px;
             padding: 10px;
             width: 640px;
-            height: 150px;
-            border: 2px solid #000;
-            overflow-y: scroll;
-            background-color: #f0f0f0;
+            max-height: 200px;
+            overflow-y: auto;
+            background-color: #222;
+            color: #fff;
             font-family: monospace;
+            border-radius: 5px;
+            border: 2px solid #333;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
         }
+
     </style>
 </head>
 <body>
-    <h1>YOLOv8 Object Detection</h1>
-    <div id="webcam-container">
-        <video id="webcam" width="640" height="480" autoplay></video>
+    <div id="container">
+        <video id="webcam" autoplay></video>
+        <canvas id="canvas" width="640" height="480"></canvas>
     </div>
     <div id="log"></div> <!-- 로그를 표시할 영역 추가 -->
-    <script src="ort.min.js"></script> <!-- 로컬 ort.min.js 파일을 로드 -->
+
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.min.js"></script>
     <script>
         // 전역 변수: 소리, 상태
         let alertSound = new Audio('alert_sound.mp3'); // 알림 소리 파일 경로 수정
         let isPlaying = false;
 
         // 웹캠 초기화
         const video = document.getElementById('webcam');
-        const canvas = document.createElement('canvas');
+        const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
 
         // 웹캠 권한 요청 및 설정
@@ -78,21 +112,28 @@ <h1>YOLOv8 Object Detection</h1>
 
         // 객체 탐지 시작
         async function startDetection() {
-            canvas.width = video.width;
-            canvas.height = video.height;
-
             function detectObjects() {
                 ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                let frame = canvas.toDataURL('image/jpeg');
+                let frame = canvas;
 
                 // 이미지 데이터를 텐서로 변환
                 let tensor = preprocessImage(frame);
 
+                // 모델의 입력 이름을 확인 후, feeds 객체에 적절한 값을 추가
+                const feeds = {};
+                feeds['input.1'] = tensor; // 입력 이름을 정확하게 확인하고 변경하세요
+
                 // 추론 실행
-                session.run([tensor]).then((output) => {
-                    const boxes = output[0].data;  // 박스 데이터
-                    const confidences = output[1].data;  // 신뢰도 데이터
-                    const classIds = output[2].data;  // 클래스 ID 데이터
+                session.run(feeds).then((output) => {
+                    // output 객체 출력 (디버깅을 위해 추가)
+                    console.log("Model output:", output);
+
+                    // output의 구조를 확인한 후 아래와 같이 수정합니다.
+                    // output[0], output[1], output[2] 등은 실제 모델의 출력 형식에 따라 다를 수 있습니다.
+
+                    const boxes = output[0] ? output[0].data : [];  // 박스 데이터
+                    const confidences = output[1] ? output[1].data : [];  // 신뢰도 데이터
+                    const classIds = output[2] ? output[2].data : [];  // 클래스 ID 데이터
 
                     // 'cigarette'가 탐지된 경우
                     let cigaretteDetected = false;
@@ -132,9 +173,23 @@ <h1>YOLOv8 Object Detection</h1>
 
         // 웹캠 이미지 전처리 및 텐서로 변환
         function preprocessImage(frame) {
-            // 이미지 전처리 (크기 조정, 정규화 등)
-            // 모델에 맞는 텐서 형태로 변환
-            let tensor = new ort.Tensor('float32', new Float32Array(frame), [1, 3, 640, 640]);  // 모델의 입력 형식에 맞게 수정 필요
+            canvas.width = 640;
+            canvas.height = 640;
+            ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
+
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = new Float32Array(3 * 640 * 640);
+            let index = 0;
+
+            // RGBA -> RGB로 변환하고 정규화
+            for (let i = 0; i < imageData.data.length; i += 4) {
+                data[index++] = imageData.data[i] / 255;     // Red
+                data[index++] = imageData.data[i + 1] / 255; // Green
+                data[index++] = imageData.data[i + 2] / 255; // Blue
+            }
+
+            // 모델에 맞게 텐서 생성
+            const tensor = new ort.Tensor('float32', data, [1, 3, 640, 640]);
             return tensor;
         }
 
@@ -146,6 +201,11 @@ <h1>YOLOv8 Object Detection</h1>
             ctx.strokeStyle = 'red';
             ctx.fillStyle = 'red';
             ctx.stroke();
+
+            // 텍스트 추가: "Cigarette" 또는 클래스명 출력
+            ctx.font = "20px Arial";
+            ctx.fillStyle = "red";
+            ctx.fillText("Cigarette", x, y - 10);
         }
 
         // 로그 메시지 추가
