team-H3B1.github.io/index.html at main · team-H3B1/team-H3B1.github.io · 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
<!DOCTYPE html>
<htm>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.png" type="image/png">
    <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+Pen+Script&display=swap" rel="stylesheet">
    <title>h3b1.</title>
  </head>
  <body>
    <p style="display: none;" class="e">저희 팀 H3B1은 벌점을 먹고싶지 않습니다. 정상적인 페이지를 보려면 <button onclick="document.getElementsByTagName('style')[0].remove()">이 버튼을</button> 눌러주세요 :)</p>

    <div class="b">
      <h1>Team H3B1</h1>
      <p>안녕하세요. AI로 세상을 이롭게 만드는 팀 <u>H3B1</u>입니다</p>

      <h2>프로젝트 개요</h2>
      <h3>프로젝트 주제 및 선정 배경</h3>
      <p>저희 <i>안녕, 내일의 나.</i> 프로젝트는 고독사가 늘어나고 있는 요즘 위험 상황 탐지 AI를 통해 사회적 취약 계층인 독거노인들을 보호하는 프로젝트입니다.</p>

      <h3>개발 및 수행 목표</h3>
      <ul>
        <li>위험 감지 CV 모델 제작</li>
        <li>ChatGPT 및 STT, TTS 기술 등을 활용하여 음성 대화 가능한 AI 제작</li>
        <li>보호자가 일정을 관리하고 위험 감지 상황을 볼 수 있도록 대시보드 제작</li>
      </ul>

      <h2>팀 소개</h2>
      <table>
        <tr>
          <th><img width="200" height="200" src="/lth.jpeg"></th>
          <th><img width="200" height="200" src="/pmh.png"></th>
          <th><img width="200" height="200" src="/chc.jpg"></th>
        </tr>
        <tr>
          <td>임태현</td>
          <td>박민혁</td>
          <td>최홍찬</td>
        </tr>
        <tr>
          <td>noeulnight.mail@gmail.com</td>
          <td>pmh_only@pmh.codes</td>
          <td>choihc8511@gmail.com</td>
        </tr>
        <tr>
          <td>임베디드, TTS</td>
          <td>백엔드, 프롬포트 엔지니어링</td>
          <td>프론트엔드, CV, STT</td>
        </tr>
        <tr>
          <td><a href="https://github.com/noeulnight">깃허브</a></td>
          <td><a href="https://github.com/pmh-only">깃허브</a></td>
          <td><a href="https://github.com/Sichu0725">깃허브</a></td>
        </tr>
      </table>

      <h2>사용 기술</h2>
      <h3>개발에 사용한 기술</h3>
      <ul>
        <li>백엔드: Nest.js (Node.js, TypeScript)</li>
        <li>프론트엔드: React.js (Carbon design system)</li>
        <li>AI: YoloV5, KNN, Mediapipe, Deepsort</li>
        <li>STT: OpenAI Whisper</li>
        <li>TTS: SCE-TTS</li>
        <li>생성형 AI: OpenAI GPT3.5</li>
        <li>Infra: AWS</li>
      </ul>

      <h3>개발에 소요된 물품 및 준비물</h3>
      <ul>
        <li>인형</li>
        <li>아두이노 우노 보드</li>
      </ul>

      <h2>프로젝트 진행 과정 (월별 진행상황)</h2>
      <ul>
        <li>4월: DB 테이블 구상 및 구현 계획</li>
        <li>5월: YoloV5 트레이닝 시작. 백엔드 완성</li>
        <li>6월: ChatGPT 프롬포트 엔지니어링 및 STT 완성</li>
        <li>7월: 프로젝트 마무리</li>
      </ul>

      <h2>프로젝트 상세 소개</h2>
      <h3>레이아웃 세부 설명</h3>
      <a href="https://www.figma.com/file/e3Mtw8vtNUSBdKZTIkN5Ds/%EC%95%88%EB%85%95%2C-%EB%82%B4%EC%9D%BC%EC%9D%98-%EB%82%98">Figma 참고</a>

      <h3>데이터베이스 / 데이터플로우 / 시스템 구조</h3>
      <a href="https://www.erdcloud.com/d/qttGa2pK7kP84GsR9">ERD 참고</a>

      <h3>사용자 수행에 따른 세부 동작 과정</h3>
      <a href="/sheets.pdf">PDF 참고</a>

      <h2>프로젝트 추진 결과</h2>
      <h3>수행 과정 및 결과 분석</h3>
      <p>초기 계획 발표때 발표한 일정대로 성실히 진행되었다. 이는 매우 좋은 결과를 나타내었다.</p>

      <h3>유지 보수 계획</h3>
      <p>1회성 프러덕트가 나오는 프로젝트로 유지 보수 계획은 없다.</p>
    </div>

    <img style="display: none;" src="/bono.png" class="a">
    <img style="display: none;" src="/clipy.webp" class="c">

    <style>
      * {
        font-family: 'Nanum Pen Script', cursive;
        font-size: 95px;
        background: linear-gradient(90deg, Red, Orange, Yellow, Green, Blue, Indigo,Violet);
        color: white;
        animation: b 1s infinite cubic-bezier(0.85, 0, 0.15, 1);
      }

      html, body {
        width: 100%;
        height: 100%;
      }

      u {
        display: inline-block;
        rotate: 10deg;
      }

      .b {
        width: 100vw;
        height: 100vh;
        padding: 0;
        rotate: 2deg;
        transform: skew(10deg);
      }

      .a {
        display: block !important;
        position: fixed;
        bottom: 0;
        width: 300px;
        background: none;
        animation: a 5s infinite cubic-bezier(0.85, 0, 0.15, 1);
      }

      .c {
        display: block !important;
        position: fixed;
        bottom: 0;
        right: 0;
        width: 150px;
      }

      .e button {
        background: gray;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        cursor: pointer;
      }

      .e {
        display: inline-block !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        width: 100%;
        background: black;
        position: fixed;
        z-index: 10;
        top: -25px;
        left: 0;
      }

      @keyframes a {
        0% { rotate: 0deg; }
        100% { rotate: 230deg; }
      }

      @keyframes b {
        0% { background-position: 120px; }
        100% { background-position: 10px; }
      }
    </style>
  </body>
</html>