Update index.html

index.html

@@ -1,19 +1,549 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>사진 속 물체 카운터</title>
+
+  <style>
+    body {
+      font-family: "맑은 고딕", sans-serif;
+      max-width: 800px;
+      margin: 24px auto;
+      padding: 0 16px;
+      color: #202124;
+    }
+
+    h1 {
+      font-size: 26px;
+      margin-bottom: 6px;
+    }
+
+    .sub {
+      color: #5f6368;
+      margin-top: 0;
+    }
+
+    #status {
+      display: block;
+      margin: 14px 0;
+      padding: 10px 12px;
+      background: #f1f3f4;
+      border-radius: 6px;
+    }
+
+    .control {
+      margin: 15px 0;
+    }
+
+    input[type="file"] {
+      margin-top: 8px;
+    }
+
+    input[type="range"] {
+      width: 300px;
+    }
+
+    button {
+      padding: 9px 16px;
+      margin-top: 10px;
+      cursor: pointer;
+      font-size: 15px;
+    }
+
+    #canvas {
+      width: 100%;
+      max-width: 720px;
+      height: auto;
+      margin-top: 15px;
+      border: 1px solid #dadce0;
+      border-radius: 6px;
+      display: none;
+    }
+
+    #result {
+      margin-top: 16px;
+      padding: 14px;
+      min-height: 60px;
+      border: 1px solid #dadce0;
+      border-radius: 6px;
+      white-space: pre-line;
+      line-height: 1.7;
+    }
+
+    .label {
+      font-weight: bold;
+    }
+  </style>
+</head>
+
+<body>
+
+  <h1>📷 사진 속 물체 카운터</h1>
+
+  <p class="sub">
+    사진을 올리면 AI가 물체를 찾아 위치를 표시하고,
+    종류별 개수와 전체 개수를 알려줍니다.
+  </p>
+
+
+  <!-- =====================================================
+       입력 1 : 이미지
+       ===================================================== -->
+
+  <div class="control">
+
+    <div class="label">① 사진 선택</div>
+
+    <input
+      type="file"
+      id="imageInput"
+      accept="image/*"
+    />
+
+  </div>
+
+
+  <!-- =====================================================
+       입력 2 : 기준 점수
+       ===================================================== -->
+
+  <div class="control">
+
+    <div class="label">
+      ② 기준 점수 :
+      <span id="thresholdValue">0.50</span>
+    </div>
+
+    <input
+      type="range"
+      id="threshold"
+      min="0.1"
+      max="0.95"
+      step="0.05"
+      value="0.5"
+    />
+
+  </div>
+
+
+  <button id="runButton">
+    🔍 물체 분석하기
+  </button>
+
+
+  <!-- 상태 표시 -->
+  <span id="status">
+    AI 모델 불러오는 중...
+  </span>
+
+
+  <!-- 결과 이미지 -->
+  <canvas id="canvas"></canvas>
+
+
+  <!-- 개수 결과 -->
+  <div id="result">
+    사진을 선택한 뒤 물체 분석하기 버튼을 눌러 주세요.
+  </div>
+
+
+  <script type="module">
+
+    import { pipeline }
+      from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6";
+
+
+    // =====================================================
+    // 모델 설정
+    // =====================================================
+
+    const TASK = "object-detection";
+
+    const MODEL_NAME =
+      "Xenova/yolos-tiny";
+
+
+    // =====================================================
+    // HTML 요소
+    // =====================================================
+
+    const imageInput =
+      document.getElementById("imageInput");
+
+    const threshold =
+      document.getElementById("threshold");
+
+    const thresholdValue =
+      document.getElementById("thresholdValue");
+
+    const runButton =
+      document.getElementById("runButton");
+
+    const statusBox =
+      document.getElementById("status");
+
+    const resultBox =
+      document.getElementById("result");
+
+    const canvas =
+      document.getElementById("canvas");
+
+    const ctx =
+      canvas.getContext("2d");
+
+
+    // =====================================================
+    // 기준 점수 숫자 표시
+    // =====================================================
+
+    threshold.addEventListener(
+      "input",
+      () => {
+
+        thresholdValue.textContent =
+          Number(threshold.value).toFixed(2);
+
+      }
+    );
+
+
+    // =====================================================
+    // AI 모델 불러오기
+    // =====================================================
+
+    let detector = null;
+    let loadSeconds = "";
+
+
+    try {
+
+      const start =
+        performance.now();
+
+
+      detector =
+        await pipeline(
+          TASK,
+          MODEL_NAME
+        );
+
+
+      loadSeconds =
+        (
+          (performance.now() - start)
+          / 1000
+        ).toFixed(1);
+
+
+      statusBox.textContent =
+        `준비 완료 · 모델 불러오기 ${loadSeconds}초`;
+
+
+    } catch (error) {
+
+      statusBox.textContent =
+        `❌ 모델을 불러오지 못함 : ${error.message}`;
+
+      console.error(error);
+
+    }
+
+
+    // =====================================================
+    // 분석 버튼
+    // =====================================================
+
+    runButton.addEventListener(
+      "click",
+      analyzeImage
+    );
+
+
+    // =====================================================
+    // 사진 분석
+    // =====================================================
+
+    async function analyzeImage() {
+
+      if (detector === null) {
+
+        resultBox.textContent =
+          "AI 모델을 아직 불러오는 중입니다.";
+
+        return;
+
+      }
+
+
+      const file =
+        imageInput.files[0];
+
+
+      if (!file) {
+
+        resultBox.textContent =
+          "사진을 먼저 선택해 주세요.";
+
+        return;
+
+      }
+
+
+      const score =
+        Number(threshold.value);
+
+
+      statusBox.textContent =
+        "물체를 찾는 중...";
+
+
+      resultBox.textContent =
+        "분석 중...";
+
+
+      // -----------------------------------------------------
+      // 이미지 URL 생성
+      // -----------------------------------------------------
+
+      const imageURL =
+        URL.createObjectURL(file);
+
+
+      const image =
+        new Image();
+
+
+      image.onload =
+        async () => {
+
+          try {
+
+            // ------------------------------------------------
+            // Canvas에 원본 이미지 표시
+            // ------------------------------------------------
+
+            canvas.width =
+              image.naturalWidth;
+
+            canvas.height =
+              image.naturalHeight;
+
+
+            ctx.clearRect(
+              0,
+              0,
+              canvas.width,
+              canvas.height
+            );
+
+
+            ctx.drawImage(
+              image,
+              0,
+              0
+            );
+
+
+            canvas.style.display =
+              "block";
+
+
+            // ------------------------------------------------
+            // YOLOS 물체 탐지
+            // ------------------------------------------------
+
+            const start =
+              performance.now();
+
+
+            const output =
+              await detector(
+                imageURL,
+                {
+                  threshold: score
+                }
+              );
+
+
+            const seconds =
+              (
+                (performance.now() - start)
+                / 1000
+              ).toFixed(1);
+
+
+            // ------------------------------------------------
+            // 개수 저장
+            // ------------------------------------------------
+
+            const counts = {};
+
+
+            // ------------------------------------------------
+            // 찾은 물체 하나씩 처리
+            // ------------------------------------------------
+
+            for (const item of output) {
+
+              const label =
+                item.label;
+
+              const score =
+                item.score;
+
+              const box =
+                item.box;
+
+
+              // 개수 증가
+              if (counts[label]) {
+
+                counts[label]++;
+
+              } else {
+
+                counts[label] = 1;
+
+              }
+
+
+              // ----------------------------------------------
+              // 네모 박스 그리기
+              // ----------------------------------------------
+
+              const x =
+                box.xmin;
+
+              const y =
+                box.ymin;
+
+              const width =
+                box.xmax - box.xmin;
+
+              const height =
+                box.ymax - box.ymin;
+
+
+              ctx.lineWidth = 4;
+
+              ctx.strokeStyle =
+                "#ff3366";
+
+              ctx.strokeRect(
+                x,
+                y,
+                width,
+                height
+              );
+
+
+              // ----------------------------------------------
+              // 물체 이름 표시
+              // ----------------------------------------------
+
+              const text =
+                `${label} ${(score * 100).toFixed(0)}%`;
+
+
+              ctx.font =
+                "20px Arial";
+
+
+              const textWidth =
+                ctx.measureText(text).width;
+
+
+              ctx.fillStyle =
+                "#ff3366";
+
+
+              ctx.fillRect(
+                x,
+                Math.max(0, y - 28),
+                textWidth + 12,
+                28
+              );
+
+
+              ctx.fillStyle =
+                "white";
+
+
+              ctx.fillText(
+                text,
+                x + 6,
+                Math.max(20, y - 7)
+              );
+
+            }
+
+
+            // ------------------------------------------------
+            // 결과 문장 만들기
+            // ------------------------------------------------
+
+            if (output.length === 0) {
+
+              resultBox.textContent =
+                "기준 점수 이상인 물체를 찾지 못했습니다.";
+
+            } else {
+
+              let resultText =
+                "📊 물체 분석 결과\n\n";
+
+
+              for (
+                const [label, count]
+                of Object.entries(counts)
+              ) {
+
+                resultText +=
+                  `${label} : ${count}개\n`;
+
+              }
+
+
+              resultText +=
+                `\n총 ${output.length}개의 물체를 찾았습니다.`;
+
+
+              resultBox.textContent =
+                resultText;
+
+            }
+
+
+            statusBox.textContent =
+              `완료 · 분석 ${seconds}초 · 기준 점수 ${score.toFixed(2)} · (모델 불러오기 ${loadSeconds}초)`;
+
+
+          } catch (error) {
+
+            statusBox.textContent =
+              `❌ 분석 실패 : ${error.message}`;
+
+            console.error(error);
+
+          } finally {
+
+            URL.revokeObjectURL(
+              imageURL
+            );
+
+          }
+
+        };
+
+
+      image.src =
+        imageURL;
+
+    }
+
+  </script>
+
+</body>
+</html>