first demo

b5268c22 · shin · a71098af · b5268c22 · b5268c22 · b5268c22
Commit b5268c22 authored May 27, 2023 by shin
--- a/.DS_Store
+++ b/.DS_Store
--- a/images/.DS_Store
+++ b/images/.DS_Store
--- a/images/man-Dall_E2.png
+++ b/images/man-Dall_E2.png
--- a/images/man-top.jpg
+++ b/images/man-top.jpg
--- a/images/man.jpg
+++ b/images/man.jpg
--- a/images/man_panorama_withFace.png
+++ b/images/man_panorama_withFace.png
--- a/images/removeBgImage.png
+++ b/images/removeBgImage.png
--- a/images/removeBgImage_black.png
+++ b/images/removeBgImage_black.png
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+      crossorigin="anonymous"
+    />
+
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <div class="navbar navbar-dark bg-dark shadow-sm">
+      <div class="container">
+        <a href="#" class="navbar-brand d-flex align-items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            aria-hidden="true"
+            class="me-2"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+            />
+            <circle cx="12" cy="13" r="4" />
+          </svg>
+          <strong>Image processing </strong>
+        </a>
+      </div>
+    </div>
+    <div class="container text-center">
+      <div class="row">
+        <div class="col-lg-6">
+          <img class="img-size" src="./images/man.jpg" alt="" />
+          <p>원본 이미지 525 x 700 px</p>
+        </div>
+        <div class="col-lg-6">
+          <img class="img-size" src="./images/man-Dall_E2.png" alt="" />
+          <p>배경 확장된 이미지 1024 x 1024 px</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <img class="img-size" src="./images/man.jpg" alt="" />
+          <p>Person</p>
+        </div>
+        <div class="col">
+          <img class="img-size" src="./images/man-top.jpg" alt="" />
+          <p>Top</p>
+        </div>
+        <div class="col">
+          <img src="./images/man_panorama_withFace.png" alt="" />
+          <p>panorama_withFace</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <img src="./images/OutputImage2.png" alt="" />
+          <p>배경 삭제된 이미지</p>
+        </div>
+        <div class="col">
+          <img src="./images/OutputImage_black.png" alt="" />
+          <p>배경 검은색</p>
+        </div>
+      </div>
+
+      <button type="button" class="btn btn-primary btn-lg">배경 흰색</button>
+      <button type="button" class="btn btn-secondary btn-lg">
+        배경 검정색
+      </button>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+      crossorigin="anonymous"
+    ></script>
+    <script src="app.js"></script>
+  </body>
+</html>
--- a/main.js
+++ b/main.js
--- a/style.css
+++ b/style.css
+.img-size {
+  max-width: 100%;
+  margin-top: 20px;
+}