first commit
This commit is contained in:
+113
@@ -0,0 +1,113 @@
|
||||
<!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>
|
||||
<p id="region-fixed-note" class="control-note">Ref1 기준 · 색면 단순화 1 · 굴절 1 (고정)</p>
|
||||
|
||||
<label>Grid Size <output id="gridOut">13</output>
|
||||
<input id="grid-size" type="range" min="10" max="24" step="1" value="13">
|
||||
</label>
|
||||
<small class="control-help">큰 얼굴 12–16 · 작은 얼굴/여러 마리 20–24</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>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 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>Mosaic 스타일<select id="mosaic-style">
|
||||
<option value="0">조각 유리</option><option value="1">촘촘 유리</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>
|
||||
Reference in New Issue
Block a user