index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- ★ 수정한 부분: 내 데모의 제목 -->
  <title>StreetCLIP 사진으로 국가 맞히기</title>

  <style>
    body {
      font-family: "맑은 고딕", sans-serif;
      max-width: 720px;
      margin: 24px auto;
      padding: 0 16px;
      color: #202124;
    }

    h1 { font-size: 24px; margin-bottom: 4px; }
    .sub { color: #5f6368; margin-top: 0; }

    #status {
      display: block;
      margin: 12px 0;
      padding: 8px 12px;
      background: #f1f3f4;
      border-radius: 6px;
    }

    #preview {
      max-width: 100%;
      max-height: 320px;
      display: none;
      margin: 12px 0;
      border-radius: 6px;
    }

    .row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0;
    }

    .name {
      width: 90px;
      flex-shrink: 0;
      font-size: 14px;
    }

    .track {
      flex: 1;
      background: #e8edf5;
      border-radius: 3px;
    }

    /* ★ 수정한 부분: 막대 색상을 파란색으로 변경 */
    .bar {
      height: 14px;
      background: #2563eb;
      border-radius: 3px;
    }

    .score { font-size: 13px; color: #5f6368; }
    button { padding: 6px 14px; }
  </style>
</head>

<body>
  <!-- ★ 수정한 부분: 국가 후보를 비교하는 데모로 변경 -->
  <h1>사진으로 국가 맞히기</h1>
  <p class="sub">
    거리·풍경 사진을 올리고, 어느 나라와 가장 비슷한지 확인해 보세요.
  </p>

  <p>101개 국가·지역을 비교해 상위 5개 후보를 보여 줍니다.</p>

  <p>
    점수는 전체 101개 후보 사이의 상대적인 예측 점수이며,
    상위 5개의 합은 100%가 아닐 수 있습니다.
    실제 정답률이나 정확한 촬영 위치가 아닙니다.
  </p>

  <details>
    <summary>비교 후보 101개 보기</summary>
    <p id="countryList"></p>
  </details>

  <p class="sub">
    논문 부록에 나열된 92개 국가·지역에 9개 국가를 추가한 비교 목록입니다.
    정확한 학습 국가 목록은 아니며,
    후보 밖 지역의 사진도 이 중 하나로 나올 수 있습니다.
  </p>

  <!-- ★ 수정한 부분: 모델 준비 전에는 입력을 비활성화 -->
  <input
    id="upload"
    type="file"
    accept="image/*"
    aria-label="분류할 사진 선택"
    disabled
  />

  <button id="example" disabled>예시 거리 사진으로 해 보기</button>

  <span id="status" role="status">
    모델 불러오는 중...
    처음에는 약 434MB의 모델을 받아 시간이 걸릴 수 있습니다.
  </span>

  <img id="preview" alt="분류할 사진" />
  <div id="result"></div>

  <p class="sub">
    예시 사진: 모델 제작자가 공개한 샌프란시스코 사진.
    결과는 실행 후 확인하세요.
  </p>

  <p class="sub">
    모델:
    <a href="https://huggingface.co/onnx-community/StreetCLIP-ONNX">
      StreetCLIP ONNX
    </a>
    · 원본:
    <a href="https://huggingface.co/geolocal/StreetCLIP">
      geolocal/StreetCLIP
    </a>
    ·
    <a href="https://creativecommons.org/licenses/by-nc/4.0/">
      CC BY-NC 4.0
    </a>
  </p>

  <script type="module">
    import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6";

    // ★ 수정한 부분: 사진과 국가 이름을 비교하는 모델
    const TASK = "zero-shot-image-classification";
    const MODEL_NAME = "onnx-community/StreetCLIP-ONNX";
    const EXAMPLE_URL = "https://huggingface.co/geolocal/StreetCLIP/resolve/main/sanfrancisco.jpeg";

    // ★ 수정한 부분: 모델에는 영어 이름, 화면에는 한국어 이름 사용
    const countries = {
      "Albania": "알바니아",
      "Andorra": "안도라",
      "Argentina": "아르헨티나",
      "Australia": "호주",
      "Austria": "오스트리아",
      "Bangladesh": "방글라데시",
      "Belgium": "벨기에",
      "Bermuda": "버뮤다",
      "Bhutan": "부탄",
      "Bolivia": "볼리비아",
      "Botswana": "보츠와나",
      "Brazil": "브라질",
      "Bulgaria": "불가리아",
      "Cambodia": "캄보디아",
      "Canada": "캐나다",
      "Chile": "칠레",
      "China": "중국",
      "Colombia": "콜롬비아",
      "Croatia": "크로아티아",
      "Czech Republic": "체코",
      "Denmark": "덴마크",
      "Dominican Republic": "도미니카 공화국",
      "Ecuador": "에콰도르",
      "Estonia": "에스토니아",
      "Finland": "핀란드",
      "France": "프랑스",
      "Germany": "독일",
      "Ghana": "가나",
      "Greece": "그리스",
      "Greenland": "그린란드",
      "Guam": "괌",
      "Guatemala": "과테말라",
      "Hungary": "헝가리",
      "Iceland": "아이슬란드",
      "India": "인도",
      "Indonesia": "인도네시아",
      "Ireland": "아일랜드",
      "Israel": "이스라엘",
      "Italy": "이탈리아",
      "Japan": "일본",
      "Jordan": "요르단",
      "Kenya": "케냐",
      "Kyrgyzstan": "키르기스스탄",
      "Laos": "라오스",
      "Latvia": "라트비아",
      "Lesotho": "레소토",
      "Lithuania": "리투아니아",
      "Luxembourg": "룩셈부르크",
      "North Macedonia": "북마케도니아",
      "Madagascar": "마다가스카르",
      "Malaysia": "말레이시아",
      "Malta": "몰타",
      "Mexico": "멕시코",
      "Monaco": "모나코",
      "Mongolia": "몽골",
      "Montenegro": "몬테네그로",
      "Netherlands": "네덜란드",
      "New Zealand": "뉴질랜드",
      "Nigeria": "나이지리아",
      "Norway": "노르웨이",
      "Pakistan": "파키스탄",
      "Palestine": "팔레스타인",
      "Peru": "페루",
      "Philippines": "필리핀",
      "Poland": "폴란드",
      "Portugal": "포르투갈",
      "Puerto Rico": "푸에르토리코",
      "Romania": "루마니아",
      "Russia": "러시아",
      "Rwanda": "르완다",
      "Senegal": "세네갈",
      "Serbia": "세르비아",
      "Singapore": "싱가포르",
      "Slovakia": "슬로바키아",
      "Slovenia": "슬로베니아",
      "South Africa": "남아프리카 공화국",
      "South Korea": "한국",
      "Spain": "스페인",
      "Sri Lanka": "스리랑카",
      "Eswatini": "에스와티니",
      "Sweden": "스웨덴",
      "Switzerland": "스위스",
      "Taiwan": "대만",
      "Thailand": "태국",
      "Tunisia": "튀니지",
      "Turkey": "튀르키예",
      "Uganda": "우간다",
      "Ukraine": "우크라이나",
      "United Arab Emirates": "아랍에미리트",
      "United Kingdom": "영국",
      "United States": "미국",
      "Uruguay": "우루과이",
      "Vietnam": "베트남",
      "Nepal": "네팔",
      "Kazakhstan": "카자흐스탄",
      "Costa Rica": "코스타리카",
      "Panama": "파나마",
      "Morocco": "모로코",
      "Egypt": "이집트",
      "Saudi Arabia": "사우디아라비아",
      "Tanzania": "탄자니아"
    };

    const candidateLabels = Object.keys(countries);

    // ★ 수정한 부분: 국가·지역 101개를 비교하고 결과는 상위 5개만 표시
    document.getElementById("countryList").textContent =
      Object.values(countries).join(" · ");

    const statusBox = document.getElementById("status");
    const uploadInput = document.getElementById("upload");
    const exampleButton = document.getElementById("example");
    const previewImage = document.getElementById("preview");
    const resultBox = document.getElementById("result");

    let classifier = null;
    let loadSeconds = "";

    try {
      const loadStart = performance.now();

      // ★ 수정한 부분: 원본보다 작은 q8 ONNX 파일 사용, 파일별 진행률 표시
      classifier = await pipeline(TASK, MODEL_NAME, {
        dtype: "q8",
        progress_callback: (data) => {
          if (data.status === "progress") {
            statusBox.textContent =
              `파일 받는 중: ${data.file} ${Math.round(data.progress)}%`;
          }

          if (data.status === "done") {
            statusBox.textContent =
              "파일 다운로드 완료 · 모델 준비 중...";
          }
        }
      });

      loadSeconds =
        ((performance.now() - loadStart) / 1000).toFixed(1);

      statusBox.textContent =
        `준비 완료 · 모델 불러오기 ${loadSeconds}초`;

      uploadInput.disabled = false;
      exampleButton.disabled = false;
    } catch (error) {
      statusBox.textContent =
        `모델을 불러오지 못했습니다. 인터넷 연결을 확인하고 새로 고침하세요. (${error.message})`;
    }

    async function classifyImage(imageUrl) {
      if (classifier === null) return;

      previewImage.src = imageUrl;
      previewImage.style.display = "block";
      resultBox.innerHTML = "";

      statusBox.textContent =
        "101개 국가·지역을 비교하는 중... 시간이 걸릴 수 있습니다.";

      // ★ 수정한 부분: 분류 중에는 중복 실행 방지
      uploadInput.disabled = true;
      exampleButton.disabled = true;

      // ★ 수정한 부분: 분류 실패도 화면에 안내
      try {
        const start = performance.now();

        // ★ 수정한 부분: 사진과 함께 비교할 국가 후보를 전달
        const results = await classifier(imageUrl, candidateLabels, {
          hypothesis_template: "A street view photo taken in {}."
        });

        const seconds =
          ((performance.now() - start) / 1000).toFixed(1);

        statusBox.textContent =
          `분류 ${seconds}초 · (모델 불러오기 ${loadSeconds}초)`;

        // 전체 후보 점수를 유지한 채 점수순으로 정렬해 5개만 표시
        results.sort((a, b) => b.score - a.score);

        results.slice(0, 5).forEach(({ label, score }) => {
          resultBox.innerHTML += `
            <div class="row">
              <span class="name">${countries[label]}</span>
              <div class="track">
                <div
                  class="bar"
                  style="width:${(score * 100).toFixed(1)}%"
                ></div>
              </div>
              <span class="score">
                ${(score * 100).toFixed(1)}%
              </span>
            </div>`;
        });
      } catch (error) {
        statusBox.textContent =
          `분류하지 못했습니다. 다른 사진으로 다시 시도하세요. (${error.message})`;
      }

      uploadInput.disabled = false;
      exampleButton.disabled = false;
    }

    exampleButton.addEventListener(
      "click",
      () => classifyImage(EXAMPLE_URL)
    );

    uploadInput.addEventListener("change", (event) => {
      const file = event.target.files[0];

      // 파일 선택을 취소하면 종료
      if (!file) return;

      // ★ 수정한 부분: 이미지가 아닌 파일을 고른 경우 안내
      if (!file.type.startsWith("image/")) {
        statusBox.textContent =
          "JPG 또는 PNG 같은 사진 파일을 선택하세요.";
        return;
      }

      const reader = new FileReader();

      reader.onload = (e) => classifyImage(e.target.result);

      // ★ 수정한 부분: 파일 읽기 실패 안내
      reader.onerror = () => {
        statusBox.textContent =
          "파일을 읽지 못했습니다. 사진을 다시 선택하세요.";
      };

      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>