Spaces:
Running
Running
Update index.html
Browse files- index.html +24 -8
index.html
CHANGED
|
@@ -1,18 +1,36 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html lang="
|
| 3 |
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8" />
|
| 6 |
-
|
| 7 |
-
|
| 8 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 9 |
<title>Transformers.js - Segment Anything WebGPU</title>
|
| 10 |
-
|
| 11 |
-
|
| 12 |
</head>
|
| 13 |
|
| 14 |
<body>
|
| 15 |
<div id="container">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
<label id="upload-button" for="upload">
|
| 17 |
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| 18 |
<path fill="#000"
|
|
@@ -34,8 +52,6 @@
|
|
| 34 |
좌측 클릭 = 수집 영역, 우측 클릭 = 수집 제외 영역
|
| 35 |
</p>
|
| 36 |
<input id="upload" type="file" accept="image/*" />
|
| 37 |
-
|
| 38 |
-
|
| 39 |
</body>
|
| 40 |
|
| 41 |
-
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="ko">
|
| 3 |
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8" />
|
|
|
|
|
|
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 7 |
<title>Transformers.js - Segment Anything WebGPU</title>
|
| 8 |
+
<script type="module" crossorigin src="/assets/index-Dh-wG5Rt.js"></script>
|
| 9 |
+
<link rel="stylesheet" crossorigin href="/assets/index-Bbb1uBOJ.css">
|
| 10 |
</head>
|
| 11 |
|
| 12 |
<body>
|
| 13 |
<div id="container">
|
| 14 |
+
<!-- Segment Anything 설명 -->
|
| 15 |
+
<div id="description" style="margin-bottom: 20px; padding: 10px; background-color: #f3f4f6; border-radius: 5px;">
|
| 16 |
+
<h2>Segment Anything - 개요</h2>
|
| 17 |
+
<p>
|
| 18 |
+
"Segment Anything"은 WebGPU를 활용하여 이미지를 상호작용적으로 분할할 수 있는 도구입니다.
|
| 19 |
+
사용자는 이미지를 업로드하고 간단한 마우스 조작을 통해 포함하거나 제외할 영역을 정의할 수 있습니다.
|
| 20 |
+
이 애플리케이션은 머신러닝 모델을 활용하여 브라우저에서 실시간 피드백을 제공하며,
|
| 21 |
+
분할된 영역을 쉽게 조정할 수 있도록 합니다.
|
| 22 |
+
</p>
|
| 23 |
+
<p>
|
| 24 |
+
<strong>사용 방법:</strong>
|
| 25 |
+
<ul>
|
| 26 |
+
<li>"이미지 업로드" 버튼을 클릭하여 이미지를 업로드하거나 "(또는 예시 사용)"으로 샘플 이미지를 사용할 수 있습니다.</li>
|
| 27 |
+
<li>마우스 왼쪽 클릭으로 포함할 영역을, 오른쪽 클릭으로 제외할 영역을 정의합니다.</li>
|
| 28 |
+
<li>"이미지 재설정" 버튼을 사용하여 이미지를 초기화하고, "점수 초기화"로 정의된 모든 포인트를 제거할 수 있습니다.</li>
|
| 29 |
+
<li>분할이 완료되면 "이미지 다운로드" 버튼을 사용하여 분할된 이미지를 다운로드할 수 있습니다.</li>
|
| 30 |
+
</ul>
|
| 31 |
+
</p>
|
| 32 |
+
</div>
|
| 33 |
+
|
| 34 |
<label id="upload-button" for="upload">
|
| 35 |
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| 36 |
<path fill="#000"
|
|
|
|
| 52 |
좌측 클릭 = 수집 영역, 우측 클릭 = 수집 제외 영역
|
| 53 |
</p>
|
| 54 |
<input id="upload" type="file" accept="image/*" />
|
|
|
|
|
|
|
| 55 |
</body>
|
| 56 |
|
| 57 |
+
</html>
|