DevChoco_Web/index.html at main · DevChoco/DevChoco_Web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 글꼴 참고 -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

  <link rel="icon" href="public\img\devchoco_logo.png">

  <!-- 인코딩-->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <!-- 메인 제목-->
  <title>DevChoco</title>
  <link rel="stylesheet" href="public/ac_aboutdev_style.css"/>
</head>

<body id="body">
  <!-- <header class="hero">
    <nav class="navbar">
      <div class="nav-buttons">
        <button onclick="location.href='/main'">Home</button>
      </div>
    </nav>
  </header> -->

  <main>
    <div class="logo-container" id="team_name">
      <h1>DevChoco</h1>
    </div>
  </main>

  <!-- about devchoco -->
  <section class="content fade-in">
    <img src="public/img/devchoco_logo.png" alt="우리 팀 이미지" class="section-banner-img1" />
    <div class="section-text">
      <h2>About Us | 팀 DevChoco를 소개합니다!</h2>
      <p id="ab" class="ani_text"><strong>DevChoco</strong>저희 팀은 컴퓨터 비전 기술을 기반으로, 영상과 이미지 속에 존재하는 객체를 정확하게 탐지하고 정밀하게 분리/합성 하는 기술을 연구하고 있습니다.<br>이를 통해 사물의 생성, 수정, 편집 과 같은 고차원적 처리가 가능한 알고리즘을 개발하며, 실제 산업 현장에 적용 가능한 지능형 시각 처리 시스템 구축을 목표로 합니다.
      </p>
      <p id="ab" class="ani_text"><em>Our team conducts research based on computer vision technologies, focusing on the precise detection and fine-grained segmentation of objects within images and videos.Through this, we aim to develop advanced algorithms capable of object generation, modification, and editing, ultimately building intelligent visual processing systems that can be applied to real-world industrial settings.
</em></p>
    </div>
  </section>

  <!-- about team -->
  <section class="content">
    <div class="section-text">
        <h2> Introduce DevChoco</h2>
    </div>
    <div class="team-container">
      <div class="team">
        <div class="member" onclick="location.href='https://github.com/kimsehyun-34'">
          <img src="public/img/team/김세현.png" alt="김세현">
          <h3>Sehyun Kim | 김세현</h3>
          <ul>
              <li>3D Object Detection</li>
              <li>3D Point Cloud Registration</li>
              <li>Generative Image Model</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section-text">
        <h2>Alumni</h2>
    </div>
    <div class="team-container">
      <div class="team">
        <div class="member" onclick="location.href='https://github.com/Sonny997'">
          <img src="public/img/team/김민수.jpg" alt="김민수">
          <h3>Minsoo Kim | 김민수</h3>
          <h3>Current : KHU</h3>
          <ul>
              <li>Generative Image Model</li>
          </ul>
        </div>
        <div class="member" onclick="location.href='https://github.com/jiwo-lee'">
          <img src="public/img/team/이지우.jpg" alt="이지우">
          <h3>Jiwoo Lee | 이지우</h3>
          <h3>Current : </h3>
          <ul>
              <li>Data Parsing</li>
          </ul>
        </div>
        <div class="member" onclick="location.href='https://github.com/lee123-jun'">
          <img src="public/img/team/이혜준.jpg" alt="이혜준">
          <h3>Hye jun Lee | 이혜준</h3>
          <h3>Current : KOSPO</h3>
          <ul>
              <li>ML</li>
              <li>Data Parsing</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

    <!-- 기술 및 비전 -->
    <!-- <section class="content">
      <img src="public/img/fitverse_app_img.png" alt="우리 팀 이미지" class="section-banner-img2" />
      <div class="section-text">
        <h2>Our Vision & Technology | 비전과 기술</h2>
        <p id="ab" class="ani_text">우리는 컴퓨터 비전과 딥러닝을 활용하여 영상과 이미지 속 객체를 정밀하게 분석하고, 현실감 있는 옷 입히기 기술을 연구합니다.<br>
          이를 통해 패션 산업, 커머스, AR/VR 등 실제 산업에 적용 가능한 지능형 시각 시스템을 구현하는 것이 우리의 목표입니다.
        </p>
        <p id="ab" class="ani_text"><em>We leverage computer vision and deep learning to analyze and simulate garments on human images with high precision.<br>
          Our goal is to build intelligent visual systems applicable to real-world fashion, commerce, and immersive technologies.</em></p>
      </div>
    </section> -->

    <!-- Publications Section -->
    <section class="content publications-section">
      <div class="section-text">
        <h2>Publications</h2>
        <p class="section-subtitle">Research Papers</p>
      </div>

      <!-- Paper 2: SpinalLine Detection -->
      <div class="paper-card">
        <div class="paper-header">
          <span class="paper-badge">Applied Sciences 2026</span>
          <h3>Spinal Line Detection for Posture Evaluation through Training-free 3D Human Body Reconstruction with 2D Depth Images</h3>
          <p class="paper-title-kr">자동 척추선 탐지 기법</p>
        </div>
        <div class="paper-content">
          <p class="paper-abstract">Depth 이미지에서 척추선을 자동으로 탐지하고, 척추 관련 질환 진단을 보조하는 알고리즘 연구</p>
          <div class="paper-images">
            <div class="paper-img-item">
              <img src="public/img/paper/SpinalLine Detection_mdpi_1.png" alt="SpinalLine Detection Figure 1">
            </div>
            <div class="paper-img-item">
              <img src="public/img/paper/SpinalLine Detection_mdpi_2.png" alt="SpinalLine Detection Figure 2">
            </div>
            <div class="paper-img-item">
              <img src="public/img/paper/SpinalLine Detection_mdpi_3.png" alt="SpinalLine Detection Figure 3">
            </div>
          </div>
          <div class="paper-links">
            <a href="https://doi.org/10.3390/app16021096" target="_blank" rel="noopener noreferrer" class="paper-link-btn">
              View Paper →
            </a>
          </div>
          <div class="paper-citation">
            <p>Kim, S., Lee, H.-J., Lee, J., Kim, C., & Lee, T.</p>
          </div>
        </div>
      </div>

      <!-- Paper 1: CAP-VTON -->
      <div class="paper-card">
        <div class="paper-header">
          <span class="paper-badge">Electronics 2025</span>
          <h3>CAP-VTON: Clothing Agnostic Pre-inpainting Virtual Try-ON</h3>
          <p class="paper-title-kr">기존 의류에 독립적인 전처리 인페인팅 기반 가상피팅 기법</p>
        </div>
        <div class="paper-content">
          <p class="paper-abstract">이미지 속 객체를 정밀하게 분석하고, 현실감 있는 가상피팅 기술을 제안</p>
          <div class="paper-images">
            <div class="paper-img-item">
              <img src="public/img/paper/CAP-VTON_mdpi1.png" alt="CAP-VTON Figure 1">
            </div>
            <div class="paper-img-item">
              <img src="public/img/paper/CAP-VTON_mdpi2.png" alt="CAP-VTON Figure 2">
            </div>
            <div class="paper-img-item">
              <img src="public/img/paper/CAP-VTON_mdpi3.png" alt="CAP-VTON Figure 3">
            </div>
          </div>
          <div class="paper-links">
            <a href="https://doi.org/10.3390/electronics14234710" target="_blank" rel="noopener noreferrer" class="paper-link-btn">
              View Paper →
            </a>
          </div>
          <div class="paper-citation">
            <p>Kim, S., Lee, H. J., Lee, J., & Lee, T. (2025).</p>
          </div>
        </div>
      </div>
    </section>

    <!-- <button class="home_btn" onclick="location.href='/main'">Home</button> -->

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        // id="ab"를 가진 모든 요소 선택
        const abElements = document.querySelectorAll("#ab");

        // IntersectionObserver 설정
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                entry.target.classList.add("ani_text_bf"); // 애니메이션 클래스 추가
              } else {
                entry.target.classList.remove("ani_text_bf"); // 애니메이션 클래스 제거
              }
            });
          },
          {
            threshold: 0.5, // 요소가 50% 보일 때 트리거
          }
        );

        abElements.forEach((el) => observer.observe(el));
      });

      const body = document.getElementById("body");

      window.scroll({
        top: 0,
        left: 100,
        behavior: "smooth",
        wrapperSpeed: 0.065,
      });

      const nameSection = document.getElementById("team_name");

      let zoom = 4;
      const ZOOM_SPEED = 3;

      // 휠 이벤트 처리
      document.addEventListener("wheel", function (e) {
        if (zoom < 70) {
          if (e.deltaY > 0) {
            zoom += ZOOM_SPEED;
            nameSection.style.transform = `scale(${zoom})`;
          }
        } else if (zoom >= 70) {
          nameSection.classList.add("zoomed");
        }
      });

      let zoom_m = 1;
      const ZOOM_SPEED_m = 4.5;

      // 모바일 터치 이벤트 처리
      let touchStartY = 0;
      let touchEndY = 0;

      document.addEventListener("touchstart", function (e) {
        touchStartY = e.touches[0].clientY;
      });

      document.addEventListener("touchmove", function (e) {
        touchEndY = e.touches[0].clientY;

        if (zoom_m < 90) {
          if (touchStartY > touchEndY) {
            zoom_m += ZOOM_SPEED_m;
            nameSection.style.transform = `scale(${zoom_m})`;
          }
        } else if (zoom_m >= 90) {
          nameSection.classList.add("zoomed");
        }
      });
    </script>
</body>
</html>