Spaces:

jamnif
/

chronos-zero-shot

Running

App Files Files Community

chronos-zero-shot / static /index.html

jamnif

Upload static/index.html with huggingface_hub

4b89406 verified 6 days ago

raw

history blame contribute delete

4.82 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chronos-2 Zero-Shot Demo</title>
	<link rel="stylesheet" href="/static/style.css">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Chronos-2 Zero-Shot Forecasting</h1>
	<p class="tagline">No training. No fine-tuning. Just forecast.</p>
	<p class="desc">입력한 시계열만으로 다음 값을 즉시 예측합니다.</p>
	</header>

	<div class="tabs">
	<button class="tab-btn active" data-tab="forecast">예측</button>
	<button class="tab-btn" data-tab="compare">비교</button>
	</div>

	<main>
	<div id="tab-forecast" class="tab-content active">
	<section class="input-section">
	<div class="input-header">
	<label for="ts-input">시계열 데이터 입력 (쉼표, 공백, 줄바꿈 구분)</label>
	<div class="input-actions">
	<select id="sample-select">
	<option value="">-- 샘플 불러오기 --</option>
	<option value="air_passengers">Air Passengers</option>
	<option value="gfk_sample">GFK Sample</option>
	</select>
	<label class="pred-steps">
	예측 스텝
	<input type="number" id="pred-steps" value="1" min="1" max="24" />
	</label>
	</div>
	</div>
	<textarea id="ts-input" rows="4" placeholder="100, 120, 115, 130 또는 한 줄에 하나씩"></textarea>
	</section>

	<section class="output-section">
	<div class="forecast-display" id="forecast-display">
	<span class="label">다음 예측: </span>
	<span class="value" id="forecast-value">—</span>
	<span class="range" id="forecast-range"></span>
	</div>
	<div class="loading" id="loading" style="display: none;">예측 중...</div>
	<div class="error" id="error" style="display: none;"></div>
	<div class="chart-container">
	<canvas id="chart"></canvas>
	</div>
	<div class="download-row">
	<button type="button" id="download-csv">예측 결과 CSV 다운로드</button>
	</div>
	</section>
	</div>

	<div id="tab-compare" class="tab-content">
	<section class="compare-section">
	<h2>전통 ML vs Chronos Zero-Shot</h2>
	<p class="compare-intro">전통 ML 시계열 예측은 데이터 전처리, 모델 선택, 파라미터 튜닝, 학습 등 여러 단계가 필요합니다. Chronos는 <strong>학습/튜닝 없이</strong> 입력만으로 즉시 예측합니다.</p>

	<div class="pipeline-row">
	<div class="pipeline-block">
	<h3 class="pipeline-label">전통 ML (ARIMA, Prophet 등)</h3>
	<div class="pipeline ml-pipeline">
	<div class="step">데이터 수집</div>
	<div class="arrow">→</div>
	<div class="step">결측치 처리</div>
	<div class="arrow">→</div>
	<div class="step">정상성 검정</div>
	<div class="arrow">→</div>
	<div class="step">차분/변환</div>
	<div class="arrow">→</div>
	<div class="step">계절성 분해</div>
	<div class="arrow">→</div>
	<div class="step">모델 선택</div>
	<div class="arrow">→</div>
	<div class="step">파라미터 튜닝</div>
	<div class="arrow">→</div>
	<div class="step">학습 (fit)</div>
	<div class="arrow">→</div>
	<div class="step">검증/오차 확인</div>
	<div class="arrow">→</div>
	<div class="step">튜닝 반복</div>
	<div class="arrow">→</div>
	<div class="step">예측</div>
	</div>
	</div>
	<div class="pipeline-block">
	<h3 class="pipeline-label">Chronos Zero-Shot</h3>
	<div class="pipeline chronos-pipeline">
	<div class="step highlight">데이터 입력</div>
	<div class="arrow">→</div>
	<div class="step highlight">예측</div>
	</div>
	</div>
	</div>

	<p class="compare-cta">Chronos는 학습 없이 <strong>입력 즉시 예측</strong>합니다.</p>
	</section>
	</div>
	</main>
	</div>
	<script src="/static/app.js"></script>
	</body>
	</html>