Hugging Face's logo

Spaces:
itembox
/
segment-anything-webgpu
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +48 -87
index.html CHANGED
@@ -7,101 +7,62 @@
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"
83
- d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
84
- </path>
85
- </svg>
86
- 이미지 업로드
87
- <label id="example">(또는 예시 사용)</label>
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
 
107
  </html>
 
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
+ <!-- Container to hold all content centered -->
14
+ <div style="max-width: 640px; margin: 0 auto; text-align: center;">
15
+ <!-- Segment Anything 설명 -->
16
+ <div id="description" style="padding: 20px; background-color: #f3f4f6; border-radius: 0.75rem; margin-bottom: 1rem;">
17
+ <p>
18
+ "Segment 기능은 WebGPU를 활용하여 이미지를 상호작용적으로 분할할 수 있는 도구입니다.
19
+ 사용자는 이미지를 업로드하고 간단한 마우스 조작을 통해 포함하거나 제외할 영역을 정의할 수 있습니다.
20
+ 이 애플리케이션은 머신러닝 모델을 활용하여 브라우저에서 실시간 피드백을 제공하며,
21
+ 분할된 영역을 쉽게 조정할 수 있도록 합니다.
22
+ </p>
23
+ <p>
24
+ <strong>사용 방법:</strong>
25
+ <ul style="list-style: none; padding: 0; text-align: left;">
26
+ <li>"이미지 업로드" 버튼을 클릭하여 이미지를 업로드하거나 "(또는 예시 사용)"으로 샘플 이미지를 사용할 수 있습니다.</li>
27
+ <li>마우스 왼쪽 클릭으로 포함할 영역을, 오른쪽 클릭으로 제외할 영역을 정의합니다.</li>
28
+ <li>"이미지 재설정" 버튼을 사용하여 이미지를 초기화하고, "점수 초기화"로 정의된 모든 포인트를 제거할 수 있습니다.</li>
29
+ <li>분할이 완료되면 "이미지 다운로드" 버튼을 사용하여 분할된 이미지를 다운로드할 수 있습니다.</li>
30
+ </ul>
31
+ </p>
32
+ </div>
33
 
34
+ <!-- Image Upload and Display Container -->
35
+ <div id="container">
36
+ <label id="upload-button" for="upload">
37
+ <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
38
+ <path fill="#000"
39
+ d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
40
+ </path>
41
+ </svg>
42
+ 이미지 업로드
43
+ <label id="example">(또는 예시 사용)</label>
44
+ </label>
45
+ <canvas id="mask-output"></canvas>
46
+ </div>
47
 
48
+ <!-- Status Label -->
49
+ <label id="status"></label>
50
 
51
+ <!-- Control Buttons -->
52
+ <div id="controls" style="margin-top: 1rem;">
53
+ <button id="reset-image">이미지 재설정</button>
54
+ <button id="clear-points">점수 초기화</button>
55
+ <button id="cut-mask" disabled>이미지 다운로드</button>
56
+ </div>
57
 
58
+ <!-- Information -->
59
+ <p id="information" style="margin-top: 0.5rem;">
60
+ 좌측 클릭 = 수집 영역, 우측 클릭 = 수집 제외 영역
61
+ </p>
62
 
63
+ <!-- Hidden File Input -->
64
+ <input id="upload" type="file" accept="image/*" />
65
+ </div>
66
  </body>
67
 
68
  </html>