behind_glass/index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pet Behind Glass</title>
  </head>
  <body>
    <div id="app">
      <main>
        <div class="visual-column">
          <div id="reference-strip" class="reference-strip" hidden role="group" aria-label="레퍼런스 비교 이미지">
            <figure aria-labelledby="reference-caption-1">
              <img id="reference-image-1" alt="">
              <figcaption id="reference-caption-1">Ref1 · 주 기준</figcaption>
            </figure>
            <figure aria-labelledby="reference-caption-2">
              <img id="reference-image-2" alt="">
              <figcaption id="reference-caption-2">Ref2 · 보조</figcaption>
            </figure>
            <p id="reference-status" role="status" aria-live="polite" hidden>레퍼런스 이미지를 불러오지 못했습니다.</p>
          </div>
          <section class="stage">
            <div id="canvas-wrap"><div id="empty">반려동물 사진 또는 영상을 선택하세요</div></div>
            <p id="hint">화면을 드래그해서 시점을 움직여보세요</p>
          </section>
        </div>
        <aside>
          <h1>Pet Behind Glass</h1>
          <label class="upload">사진 선택<input id="image" type="file" accept="image/jpeg,image/png,image/webp"></label>
          <button id="ai-depth" data-testid="ai-depth" disabled>AI 깊이 생성</button>
          <p id="depth-provenance" hidden aria-live="polite"></p>
          <label>테스트 사진<select id="test-photo">
            <option value="sample">기존 샘플 · 흰 강아지 얼굴</option>
            <option value="dog1">멍멍이 1 · 잔디 위 흰 포메라니안</option>
            <option value="dog2">멍멍이 2 · 실내에 엎드린 검정·갈색 강아지</option>
            <option value="dog3">멍멍이 3 · 후드 옷을 입은 강아지 두 마리</option>
            <option value="dog4">멍멍이 4 · 벤치 위 갈색 닥스훈트</option>
          </select></label>
          <button id="sample">선택한 테스트 사진 불러오기</button>
          <label>유리 패턴<select id="mosaic-style">
            <option value="2" selected>고방유리 · 표면 굴절</option>
            <option value="0">Ref1 옵션 2 · 사각 색면</option>
            <option value="1">기존 촘촘 유리</option>
          </select></label>
          <p id="region-fixed-note" class="control-note">고방유리 · 표면 요철에 따른 굴절 · 색면 처리 없음</p>

          <label>Grid Size <output id="gridOut">20</output>
            <input id="grid-size" type="range" min="10" max="24" step="1" value="20">
          </label>
          <small class="control-help">고방유리 20–24 · 큰 셀 비교 12–16</small>
          <div id="gloss-controls" class="core-optics">
            <label>셀 굴곡 (−1 오목 · +1 볼록) <output id="curvatureOut">1.00</output>
              <input id="curvature" type="range" min="-1" max="1" step="0.01" value="1">
            </label>
            <small class="control-help">|굴곡| 0.65–1 권장</small>
            <label>광택 강도 <output id="glossOut">0.30</output>
              <input id="gloss-strength" type="range" min="0" max="0.4" step="0.01" value="0.30">
            </label>
          </div>
          <label>사진–유리 거리 <output id="photoGlassDistanceOut">0%</output>
            <input id="photo-glass-distance" type="range" min="0" max="100" step="1" value="0">
          </label>
          <small class="control-help">최대 depth 표면 기준 · 0% 가까움 · 100% 멀어짐</small>
          <label>Camera Offset <output id="cameraOut">0.50</output>
            <input id="camera-offset" type="range" min="0" max="0.9" step="0.01" value="0.5">
          </label>
          <small class="control-help">권장 0.35–0.65 · 시점 이동 범위</small>
          <button id="reset">시점 초기화</button>
          <button id="gyro">Gyroscope: OFF</button>

          <details>
            <summary>사진 구도</summary>
            <div class="details-content">
              <label>사진 확대 <output id="photoZoomOut">1.00</output>
                <input id="photo-zoom" type="range" min="1" max="3" step="0.05" value="1">
              </label>
              <label>사진 가로 위치 <output id="photoPanXOut">0.00</output>
                <input id="photo-pan-x" type="range" min="-1" max="1" step="0.01" value="0">
              </label>
              <label>사진 세로 위치 <output id="photoPanYOut">0.00</output>
                <input id="photo-pan-y" type="range" min="-1" max="1" step="0.01" value="0">
              </label>
              <button id="photo-reset">사진 구도 초기화</button>
            </div>
          </details>

          <details>
            <summary>개발 비교</summary>
            <div class="details-content">
              <label>AI 깊이 모델<select id="ai-depth-model">
                <option value="small">V2 Small · 상업적 사용 가능</option>
                <option value="base">V2 Base · 비상업적 테스트</option>
              </select></label>
              <small class="control-note">모델을 선택한 뒤 AI 깊이 생성을 누르세요 · 입력 770</small>
              <details id="depth-inspection">
                <summary>최대 깊이 영역 확인</summary>
                <p class="control-note">모델 최대 1: 분홍 · 8비트 depth=1: 청록 · 모델 depth≥0.99: 노랑</p>
                <canvas id="depth-inspection-canvas" aria-label="최대 깊이 영역 · 사진을 클릭해 값 확인"></canvas>
                <pre id="depth-inspection-summary">사진과 깊이를 불러오세요.</pre>
                <div class="depth-coordinates">
                  <label>픽셀 X<input id="depth-inspection-x" type="number" min="0" value="0"></label>
                  <label>픽셀 Y<input id="depth-inspection-y" type="number" min="0" value="0"></label>
                </div>
                <pre id="depth-inspection-point"></pre>
                <small class="control-note">1은 사진별 정규화 최댓값이며 실제 거리나 코 검출 결과가 아닙니다. 간격은 깊이맵 기준 장면 단위입니다.</small>
              </details>
              <label class="upload">동영상 선택<input id="video" type="file" accept="video/mp4,video/webm"></label>
              <label class="upload">Depth 이미지 선택<input id="depth-image" type="file" accept="image/png,image/webp"></label>
              <label>View Mode<select id="view-mode">
                <option value="final">Final</option><option value="noglass">No Glass</option><option value="rgb">RGB</option><option value="depth">Depth</option><option value="glass">Glass Only</option>
              </select></label>
              <label>Glass<select id="effect">
                <option value="mosaic">Mosaic</option><option value="reeded">Reeded</option><option value="frosted">Frosted</option>
              </select></label>
              <label>Depth Scale <output id="depthOut">0.25</output>
                <input id="depth-scale" type="range" min="0" max="0.4" step="0.01" value="0.25">
              </label>
              <label>조명 가로 <output id="lightXOut">0.60</output>
                <input id="light-x" type="range" min="-2" max="2" step="0.05" value="0.6">
              </label>
              <label>조명 세로 <output id="lightYOut">0.80</output>
                <input id="light-y" type="range" min="-2" max="2" step="0.05" value="0.8">
              </label>
              <label>View sensitivity <output id="sensitivityOut">1.00</output>
                <input id="sensitivity" type="range" min="0.2" max="2" step="0.05" value="1">
              </label>
            </div>
          </details>
          <p id="status" role="status"></p>
        </aside>
      </main>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>