Skip to content

Commit 56d9f7f

Browse files
edumgtedumgt
authored
Merge pull request #43 from edumgt/copilot/add-stock-investment-examples
Add stock-oriented Transformer-family examples to the webapp learning flow
2 parents 6ceae2f + 09ee5f4 commit 56d9f7f

4 files changed

Lines changed: 157 additions & 10 deletions

File tree

‎docs/04.md‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
## 오늘 열 페이지
4949

5050
- [메인 학습 허브](/)
51+
- [주가 예측 타겟팅 실험실](/predict)
5152
- [호텔-주가 실험실](/hotel-stock)
5253

5354
---
@@ -58,20 +59,33 @@
5859
|---|---|
5960
| 8분 | 이 문서에서 세 모델 차이를 읽습니다. |
6061
| 5분 | [메인 학습 허브](/)에서 `chapter103` 설명을 다시 봅니다. |
61-
| 7분 | [호텔-주가 실험실](/hotel-stock)에서 여러 힌트가 함께 들어가는 화면을 가볍게 구경합니다. |
62+
| 4분 | [주가 예측 타겟팅 실험실](/predict)에서 PatchTST/iTransformer 대응 예시 카드를 읽습니다. |
63+
| 3분 | [호텔-주가 실험실](/hotel-stock)에서 TFT 대응 멀티팩터 예시를 확인합니다. |
6264

6365
---
6466

6567
## 웹앱 따라 하기
6668

6769
1. [메인 학습 허브](/)에서 `chapter103`을 열어 attention 개념을 다시 봅니다.
68-
2. [호텔-주가 실험실](/hotel-stock)로 이동합니다.
69-
3. 화면에서 단순 주가만 보는 것이 아니라 여러 카드와 탭이 있다는 점을 확인합니다.
70-
4. 계절성, 신호, 혼동 행렬 같은 탭 이름을 가볍게 읽어 봅니다.
70+
2. [주가 예측 타겟팅 실험실](/predict)로 이동해 `Transformer 계열 투자 예시 가이드`를 읽습니다.
71+
3. PatchTST는 긴 차트, iTransformer는 여러 종목 비교에 닿아 있다는 설명을 확인합니다.
72+
4. 이어서 [호텔-주가 실험실](/hotel-stock)로 이동해 `Transformer 계열 주식 예시 매핑`을 봅니다.
73+
5. 계절성, 신호, 혼동 행렬 같은 탭 이름을 읽으며 TFT식 멀티팩터 입력을 연결합니다.
7174

7275
오늘은 결과 숫자를 다 외우지 않아도 됩니다.
7376
중요한 것은 **"한 가지 힌트만 보는 문제가 아니구나"**를 느끼는 것입니다.
7477

78+
## 현재 웹앱에 있는 Transformer 계열 예시
79+
80+
현재 웹앱은 PatchTST/TFT/iTransformer를 전용 모델 버튼으로 직접 학습시키지는 않습니다.
81+
대신 아래처럼 **투자 상황 예시**로 연결되어 있습니다.
82+
83+
| 모델 | 현재 웹앱 대응 화면 | 투자 예시 |
84+
|---|---|---|
85+
| PatchTST | [/predict](/predict) | 6~12개월 단일 종목 CSV를 올려 장기 추세, 모멘텀, 변동성 특성이 어떻게 읽히는지 비교 |
86+
| TFT | [/hotel-stock](/hotel-stock) | 실적·레짐·가격 파생 특성을 함께 넣어 외생 변수까지 반영하는 멀티팩터 투자 판단 |
87+
| iTransformer | [/predict](/predict), [/hotel-stock](/hotel-stock) | 여러 종목을 같은 날짜축으로 비교하거나 업종별 반응 차이를 함께 해석 |
88+
7589
---
7690

7791
## 관찰 미션

‎frontend/app.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -345,16 +345,16 @@ const DOC_WEB_GUIDES = {
345345
],
346346
},
347347
"04": {
348-
summary: "PatchTST, TFT, iTransformer 같은 최신 시계열 모델을 소개하는 문서입니다. 웹앱은 이 모델들을 직접 모두 구현하기보다, 다변량 입력과 비교 해석 습관을 익히는 데 초점을 둡니다.",
348+
summary: "PatchTST, TFT, iTransformer 같은 최신 시계열 모델을 소개하는 문서입니다. 웹앱에는 전용 학습 버튼은 없지만 /predict와 /hotel-stock에 투자 상황 대응 예시가 추가되어 있습니다.",
349349
steps: [
350-
"예측 실험실에서 여러 회사를 한 화면에 놓고 비교합니다.",
351-
"모델 비교실에서 시장 레짐과 다수 특성이 함께 쓰이는 구조를 봅니다.",
350+
"/predict에서 Transformer 계열 투자 예시 가이드를 읽고 장기 차트·다중 종목 비교 관점을 잡습니다.",
351+
"/hotel-stock에서 시장 레짐과 다수 특성이 함께 쓰이는 구조를 보며 TFT 대응 예시를 확인합니다.",
352352
"기준선 모델과 비교하며 '최신 모델이 필요한 상황'을 스스로 정리합니다.",
353353
],
354-
inspect: ["다변량 입력", "계절성", "멀티엔터티 비교"],
354+
inspect: ["장기 추세", "다변량 입력", "계절성", "멀티엔터티 비교"],
355355
webapps: [
356-
{ label: "예측 실험실 — 다중 기업 비교", href: "/predict", desc: "여러 회사를 나란히 보며 다변량 시각을 익힙니다." },
357-
{ label: "모델 비교실 — 멀티팩터 데이터", href: "/hotel-stock", desc: "TFT식 사고와 닿아 있는 입력 구조를 봅니다." },
356+
{ label: "예측 실험실 — Transformer 예시 가이드", href: "/predict", desc: "PatchTST/iTransformer에 대응하는 장기 차트·다중 종목 예시를 읽습니다." },
357+
{ label: "모델 비교실 — 멀티팩터 데이터", href: "/hotel-stock", desc: "TFT식 사고와 닿아 있는 입력 구조와 예시 매핑을 봅니다." },
358358
{ label: "주식 AI 실험실 — 기준선 비교", href: "/lab?chapter=chapter112&model=rf&sample=samsung", desc: "최신 모델로 가기 전 기준선 해석을 정리합니다." },
359359
],
360360
},

‎frontend/hotel_stock.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,71 @@ <h1 class="text-base font-semibold text-slate-900 tracking-tight">📊 멀티팩
154154

155155
<main class="max-w-7xl mx-auto px-4 py-8 space-y-8">
156156

157+
<section class="card p-6 space-y-5">
158+
<div class="flex items-center gap-2 text-indigo-500 font-semibold text-sm">
159+
<span class="w-6 h-6 rounded-full bg-indigo-500/10 border border-indigo-500/20
160+
flex items-center justify-center text-xs">T</span>
161+
Transformer 계열 주식 예시 매핑
162+
</div>
163+
<div class="rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm text-slate-700 leading-relaxed">
164+
현재 웹앱은 <b>PatchTST/TFT/iTransformer를 직접 학습시키지는 않지만</b>,
165+
아래처럼 각 모델이 잘 다루는 투자 질문을 멀티팩터 주식 예제로 연결해 보여줍니다.
166+
</div>
167+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
168+
<article class="rounded-2xl border border-sky-200 bg-sky-50 p-4 space-y-3">
169+
<div class="flex items-center justify-between gap-2">
170+
<div>
171+
<p class="text-xs font-semibold text-sky-700">PatchTST 대응 예시</p>
172+
<h2 class="text-lg font-bold text-slate-900">긴 흐름을 조각 내어 읽기</h2>
173+
</div>
174+
<a href="/predict" class="text-[11px] px-2 py-1 rounded-full border border-sky-300 text-sky-700 hover:bg-sky-100 transition">/predict</a>
175+
</div>
176+
<p class="text-slate-700 leading-relaxed">
177+
장기 차트를 여러 구간으로 나눠 읽는 PatchTST 관점은 별도 CSV 업로드 화면에서 더 직접적이고,
178+
이 페이지에서는 3·6·12개월 수익률과 변동성으로 긴 흐름 요약을 해석하는 연습으로 이어집니다.
179+
</p>
180+
<ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
181+
<li>투자 질문: “장기 상승 추세 속 단기 조정은 매수 기회인가?”</li>
182+
<li>관찰 탭: 주가 시뮬레이션, 예측 신호</li>
183+
</ul>
184+
</article>
185+
<article class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 space-y-3">
186+
<div class="flex items-center justify-between gap-2">
187+
<div>
188+
<p class="text-xs font-semibold text-emerald-700">TFT 대응 예시</p>
189+
<h2 class="text-lg font-bold text-slate-900">멀티팩터 투자 판단</h2>
190+
</div>
191+
<span class="text-[11px] px-2 py-1 rounded-full border border-emerald-300 text-emerald-700">핵심 화면</span>
192+
</div>
193+
<p class="text-slate-700 leading-relaxed">
194+
실적 신호, 시장 레짐, 가격 파생 특성을 함께 넣는 현재 화면이 가장 TFT에 가깝습니다.
195+
달력·외생 변수·기업 펀더멘털을 한 번에 읽는 투자 문제를 체감할 수 있습니다.
196+
</p>
197+
<ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
198+
<li>투자 질문: “실적 둔화라도 금리 인하 국면이면 방향이 바뀌는가?”</li>
199+
<li>관찰 탭: 특성 중요도, 혼동 행렬</li>
200+
</ul>
201+
</article>
202+
<article class="rounded-2xl border border-amber-200 bg-amber-50 p-4 space-y-3">
203+
<div class="flex items-center justify-between gap-2">
204+
<div>
205+
<p class="text-xs font-semibold text-amber-700">iTransformer 대응 예시</p>
206+
<h2 class="text-lg font-bold text-slate-900">종목·변수 관계 함께 보기</h2>
207+
</div>
208+
<span class="text-[11px] px-2 py-1 rounded-full border border-amber-300 text-amber-700">상관관계 해석</span>
209+
</div>
210+
<p class="text-slate-700 leading-relaxed">
211+
호텔, 건설, 자동차처럼 다른 업종 종목을 같은 데이터 구조로 비교하면
212+
변수 간 상호작용과 종목별 반응 차이를 동시에 보는 iTransformer식 해석에 가깝습니다.
213+
</p>
214+
<ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
215+
<li>투자 질문: “같은 금리 변화에 업종별로 어떤 특성이 더 민감한가?”</li>
216+
<li>관찰 탭: 예측 신호, 모델 성능</li>
217+
</ul>
218+
</article>
219+
</div>
220+
</section>
221+
157222
<!-- ── ① 데이터셋 정보 ──────────────────────────────────────── -->
158223
<section class="card p-6 space-y-4">
159224
<div class="flex items-center gap-2 text-indigo-400 font-semibold text-sm">

‎frontend/stock_predict.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,74 @@ <h1 class="text-base font-semibold text-white tracking-tight">주가 예측 타
114114

115115
<main class="max-w-6xl mx-auto px-4 py-8 space-y-8">
116116

117+
<section class="card rounded-2xl p-6 space-y-5">
118+
<div class="flex items-center gap-2 text-violet-300 font-semibold text-sm">
119+
<span class="w-6 h-6 rounded-full bg-violet-500/20 border border-violet-500/40
120+
flex items-center justify-center text-xs">T</span>
121+
Transformer 계열 투자 예시 가이드
122+
</div>
123+
<div class="rounded-xl border border-violet-500/20 bg-violet-500/5 px-4 py-3 text-sm text-slate-300 leading-relaxed">
124+
현재 웹앱에는 <b>PatchTST/TFT/iTransformer 전용 학습 버튼은 없습니다.</b>
125+
대신 이 화면과 <a href="/hotel-stock" class="text-violet-300 underline underline-offset-2">멀티팩터 비교실</a>에서
126+
각 모델이 필요로 하는 투자 상황을 비슷한 형태의 예제로 연습할 수 있습니다.
127+
</div>
128+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
129+
<article class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 space-y-3">
130+
<div class="flex items-center justify-between gap-2">
131+
<div>
132+
<p class="text-xs font-semibold text-sky-300">PatchTST 대응 예시</p>
133+
<h2 class="text-lg font-bold text-white">장기 차트 조각 읽기</h2>
134+
</div>
135+
<span class="text-[11px] px-2 py-1 rounded-full border border-sky-400/30 text-sky-300">장기 추세</span>
136+
</div>
137+
<p class="text-slate-300 leading-relaxed">
138+
한 종목의 6~12개월 CSV를 올려 최근 급등락, 이동평균 괴리, 거래량 폭증이 다음 거래일 예측에 어떻게 반영되는지 봅니다.
139+
</p>
140+
<ul class="text-xs text-slate-400 space-y-1.5 list-disc list-inside">
141+
<li>투자 질문: “실적 발표 전후 긴 흐름을 같이 보면 신호가 더 선명한가?”</li>
142+
<li>관찰 포인트: 20일 모멘텀, 변동성, MA20 비율</li>
143+
<li>추천 흐름: 단일 종목 CSV 업로드 → 특성 중요도 → 모델 성능 비교</li>
144+
</ul>
145+
</article>
146+
<article class="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4 space-y-3">
147+
<div class="flex items-center justify-between gap-2">
148+
<div>
149+
<p class="text-xs font-semibold text-emerald-300">TFT 대응 예시</p>
150+
<h2 class="text-lg font-bold text-white">가격+거래량+외생 변수 결합</h2>
151+
</div>
152+
<a href="/hotel-stock" class="text-[11px] px-2 py-1 rounded-full border border-emerald-400/30 text-emerald-300 hover:bg-emerald-500/10 transition">/hotel-stock</a>
153+
</div>
154+
<p class="text-slate-300 leading-relaxed">
155+
TFT는 여러 힌트를 함께 읽는 모델이라서, 이 화면에서는 CSV 기본 특성을 먼저 보고
156+
멀티팩터 비교실로 넘어가 외생 변수까지 붙는 투자 상황을 연결해 보는 것이 좋습니다.
157+
</p>
158+
<ul class="text-xs text-slate-400 space-y-1.5 list-disc list-inside">
159+
<li>투자 질문: “거래량 급증에 계절성과 레짐을 붙이면 판단이 달라질까?”</li>
160+
<li>관찰 포인트: 거래량 비율, RSI, 예측 사유</li>
161+
<li>추천 흐름: CSV 업로드 → 회사별 중요 특성 확인 → /hotel-stock 확장</li>
162+
</ul>
163+
</article>
164+
<article class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 space-y-3">
165+
<div class="flex items-center justify-between gap-2">
166+
<div>
167+
<p class="text-xs font-semibold text-amber-300">iTransformer 대응 예시</p>
168+
<h2 class="text-lg font-bold text-white">여러 종목 동시 비교</h2>
169+
</div>
170+
<span class="text-[11px] px-2 py-1 rounded-full border border-amber-400/30 text-amber-300">멀티엔터티</span>
171+
</div>
172+
<p class="text-slate-300 leading-relaxed">
173+
서로 다른 종목을 같은 날짜축으로 넣어 다음 타겟일 예측을 나란히 비교하면,
174+
변수·종목 관계를 본다는 iTransformer식 질문을 투자 관점으로 연습할 수 있습니다.
175+
</p>
176+
<ul class="text-xs text-slate-400 space-y-1.5 list-disc list-inside">
177+
<li>투자 질문: “반도체·자동차·호텔주를 함께 보면 어느 신호가 공통으로 먹히는가?”</li>
178+
<li>관찰 포인트: 회사별 확률 게이지, 중요 특성 차이, 성능 표</li>
179+
<li>추천 흐름: 3개 이상 종목 CSV 업로드 → 회사 카드 비교 → 성능 탭 확인</li>
180+
</ul>
181+
</article>
182+
</div>
183+
</section>
184+
117185
<!-- ── ① 업로드 & 설정 ───────────────────────────────── -->
118186
<section class="card rounded-2xl p-6 space-y-5">
119187
<div class="flex items-center gap-2 text-indigo-400 font-semibold text-sm">

0 commit comments

Comments
 (0)