Hugging Face's logo

Spaces:
jamnif
/
chronos-zero-shot
Sleeping

App Files Community
chronos-zero-shot
File size: 4,815 Bytes
4b89406
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!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&#10;๋˜๋Š” ํ•œ ์ค„์— ํ•˜๋‚˜์”ฉ"></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>