Hugging Face's logo

Spaces:
itembox
/
segment-anything-webgpu
Running

App Files Community
itembox commited on
Commit
6db0e0b
·
verified ·
1 Parent(s): cca4cbf

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +70 -19
index.html CHANGED
@@ -7,29 +7,76 @@
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
- <p>
17
- "Segment 기능은 WebGPU를 활용하여 이미지를 상호작용적으로 분할할 수 있는 도구입니다.
18
- 사용자는 이미지를 업로드하고 간단한 마우스 조작을 통해 포함하거나 제외할 영역을 정의할 수 있습니다.
19
- 이 애플리케이션은 머신러닝 모델을 활용하여 브라우저에서 실시간 피드백을 제공하며,
20
- 분할된 영역을 쉽게 조정할 수 있도록 합니다.
21
- </p>
22
- <p>
23
- <strong>사용 방법:</strong>
24
- <ul>
25
- <li>"이미지 업로드" 버튼을 클릭하여 이미지를 업로드하거나 "(또는 예시 사용)"으로 샘플 이미지를 사용할 수 있습니다.</li>
26
- <li>마우스 왼쪽 클릭으로 포함할 영역을, 오른쪽 클릭으로 제외할 영역을 정의합니다.</li>
27
- <li>"이미지 재설정" 버튼을 사용하여 이미지를 초기화하고, "점수 초기화"로 정의된 모든 포인트를 제거할 수 있습니다.</li>
28
- <li>분할이 완료되면 "이미지 다운로드" 버튼을 사용하여 분할된 이미지를 다운로드할 수 있습니다.</li>
29
- </ul>
30
- </p>
31
- </div>
32
-
33
  <label id="upload-button" for="upload">
34
  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
35
  <path fill="#000"
@@ -41,15 +88,19 @@
41
  </label>
42
  <canvas id="mask-output"></canvas>
43
  </div>
 
44
  <label id="status"></label>
 
45
  <div id="controls">
46
  <button id="reset-image">이미지 재설정</button>
47
  <button id="clear-points">점수 초기화</button>
48
  <button id="cut-mask" disabled>이미지 다운로드</button>
49
  </div>
 
50
  <p id="information">
51
  좌측 클릭 = 수집 영역, 우측 클릭 = 수집 제외 영역
52
  </p>
 
53
  <input id="upload" type="file" accept="image/*" />
54
  </body>
55
 
 
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
+ <style>
11
+ body {
12
+ display: flex;
13
+ flex-direction: column;
14
+ align-items: center;
15
+ justify-content: center;
16
+ min-height: 100vh;
17
+ margin: 0;
18
+ padding: 20px;
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ #container {
23
+ width: 100%;
24
+ max-width: 800px;
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ margin-bottom: 20px;
29
+ }
30
+
31
+ #description {
32
+ width: 100%;
33
+ margin-bottom: 20px;
34
+ padding: 20px;
35
+ background-color: #f3f4f6;
36
+ border-radius: 5px;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ #controls {
41
+ display: flex;
42
+ gap: 10px;
43
+ margin-bottom: 20px;
44
+ }
45
+
46
+ #mask-output {
47
+ width: 100%;
48
+ height: auto;
49
+ border: 1px solid #ccc;
50
+ margin-bottom: 20px;
51
+ max-width: 100%;
52
+ }
53
+
54
+ input[type="file"] {
55
+ display: none;
56
+ }
57
+ </style>
58
  </head>
59
 
60
  <body>
61
+ <div id="description">
62
+ <p>
63
+ "Segment 기능은 WebGPU를 활용하여 이미지를 상호작용적으로 분할할 수 있는 도구입니다.
64
+ 사용자는 이미지를 업로드하고 간단한 마우스 조작을 통해 포함하거나 제외할 영역을 정의할 수 있습니다.
65
+ 이 애플리케이션은 머신러닝 모델을 활용하여 브라우저에서 실시간 피드백을 제공하며,
66
+ 분할된 영역을 쉽게 조정할 수 있도록 합니다.
67
+ </p>
68
+ <p>
69
+ <strong>사용 방법:</strong>
70
+ <ul>
71
+ <li>"이미지 업로드" 버튼을 클릭하여 이미지를 업로드하거나 "(또는 예시 사용)"으로 샘플 이미지를 사용할 수 있습니다.</li>
72
+ <li>마우스 왼쪽 클릭으로 포함할 영역을, 오른쪽 클릭으로 제외할 영역을 정의합니다.</li>
73
+ <li>"이미지 재설정" 버튼을 사용하여 이미지를 초기화하고, "점수 초기화"로 정의된 모든 포인트를 제거할 수 있습니다.</li>
74
+ <li>분할이 완료되면 "이미지 다운로드" 버튼을 사용하여 분할된 이미지를 다운로드할 수 있습니다.</li>
75
+ </ul>
76
+ </p>
77
+ </div>
78
+
79
  <div id="container">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  <label id="upload-button" for="upload">
81
  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
82
  <path fill="#000"
 
88
  </label>
89
  <canvas id="mask-output"></canvas>
90
  </div>
91
+
92
  <label id="status"></label>
93
+
94
  <div id="controls">
95
  <button id="reset-image">이미지 재설정</button>
96
  <button id="clear-points">점수 초기화</button>
97
  <button id="cut-mask" disabled>이미지 다운로드</button>
98
  </div>
99
+
100
  <p id="information">
101
  좌측 클릭 = 수집 영역, 우측 클릭 = 수집 제외 영역
102
  </p>
103
+
104
  <input id="upload" type="file" accept="image/*" />
105
  </body>
106