remove-background-webgpu

Running

App Files Files Community

itembox commited on Aug 5

Commit

8598ee5

•

1 Parent(s): 5392854

Update index.html

Browse files

Files changed (1) hide show

index.html +91 -4

index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
   <meta charset="UTF-8" />
@@ -7,9 +7,94 @@
   <title>Transformers.js - WebGPU Background Removal</title>
   <script type="module" crossorigin src="/assets/index-17_Va4sS.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-SojaDS6z.css">
 </head>
 <body>
   <div id="container">
     <label id="upload-button" for="upload">
       <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -21,10 +106,12 @@
       <label id="example">(또는 예시 확인)</label>
     </label>
   </div>
-  <label id="status"></label>
-  <input id="upload" type="file" accept="image/*" />
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="ko">
 <head>
   <meta charset="UTF-8" />
   <title>Transformers.js - WebGPU Background Removal</title>
   <script type="module" crossorigin src="/assets/index-17_Va4sS.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-SojaDS6z.css">
+  <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 16px 32px;
+      box-sizing: border-box;
+      margin: 0;
+      font-family: sans-serif;
+    }
+    #description {
+      max-width: 640px;
+      margin-bottom: 20px;
+      padding: 20px;
+      background-color: #f3f4f6;
+      border-radius: 0.75rem;
+      text-align: center;
+    }
+    #container {
+      position: relative;
+      width: 640px;
+      height: 420px;
+      max-width: 100%;
+      max-height: 100%;
+      border: 2px dashed #D1D5DB;
+      border-radius: 0.75rem;
+      overflow: hidden;
+      cursor: pointer;
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    #upload-button {
+      gap: 0.4rem;
+      font-size: 18px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    #upload {
+      display: none;
+    }
+    svg {
+      pointer-events: none;
+    }
+    #example {
+      font-size: 14px;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    #example:hover {
+      color: #2563eb;
+    }
+  </style>
 </head>
 <body>
+  <!-- 설명 영역 -->
+  <div id="description">
+    <p>
+      이 애플리케이션은 이미지를 업로드하면 자동으로 배경을 삭제해주는 기능을 제공합니다.
+      WebGPU 기술을 활용하여 브라우저에서 실시간으로 이미지를 처리하고 배경을 제거합니다.
+      사용자는 업로드한 이미지의 주요 객체를 쉽게 분리할 수 있으며, 결과 이미지를 다른 용도로 활용할 수 있습니다.
+    </p>
+    <p>
+      <strong>사용 방법:</strong>
+    </p>
+    <ul style="list-style: none; padding: 0; text-align: left;">
+      <li>클릭하여 이미지를 업로드하거나 "(또는 예시 확인)"으로 샘플 이미지를 사용할 수 있습니다.</li>
+      <li>이미지가 업로드되면 자동으로 배경이 제거됩니다.</li>
+      <li>처리된 이미지를 다운로드하거나 다른 작업에 사용할 수 있습니다.</li>
+    </ul>
+  </div>
+  <!-- 이미지 업로드 컨테이너 -->
   <div id="container">
     <label id="upload-button" for="upload">
       <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <label id="example">(또는 예시 확인)</label>
     </label>
   </div>
+  <!-- 상태 레이블 -->
+  <label id="status"></label>
+  <!-- 숨겨진 파일 입력 -->
+  <input id="upload" type="file" accept="image/*" />
 </body>
+</html>