Hugging Face's logo

Spaces:
dltmdgus
/
liger-showcase
Running

App Files Community
dltmdgus commited on
Commit
2f87c2c
·
verified ·
1 Parent(s): 544a97a

Upload folder using huggingface_hub

Browse files
Files changed (12) hide show
  1. .gitattributes +4 -0
  2. README.md +36 -10
  3. index.html +130 -18
  4. style.css +307 -17
  5. upload_stage/.gitattributes +35 -0
  6. upload_stage/README.md +36 -0
  7. upload_stage/index.html +131 -0
  8. upload_stage/style.css +318 -0
  9. upload_stage/라이거_대표이미지.png +3 -0
  10. upload_stage/라이거_데모영상.mp4 +3 -0
  11. 라이거_대표이미지.png +3 -0
  12. 라이거_데모영상.mp4 +3 -0
.gitattributes CHANGED
@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
 
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ upload_stage/라이거_대표이미지.png filter=lfs diff=lfs merge=lfs -text
37
+ upload_stage/라이거_데모영상.mp4 filter=lfs diff=lfs merge=lfs -text
38
+ 라이거_대표이미지.png filter=lfs diff=lfs merge=lfs -text
39
+ 라이거_데모영상.mp4 filter=lfs diff=lfs merge=lfs -text
README.md CHANGED
@@ -1,10 +1,36 @@
1
- ---
2
- title: Liger Showcase
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: pink
6
- sdk: static
7
- pinned: false
8
- ---
9
-
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Liger Showcase Page Deployment Guide
2
+
3
+ 이 폴더(`liger_showcase`)에는 Hugging Face Spaces에 배포할 수 있는 웹사이트 파일들이 모두 포함되어 있습니다.
4
+
5
+ ## 🚀 Hugging Face Spaces 배포 방법
6
+
7
+ 1. **Hugging Face 접속 및 로그인**: [huggingface.co](https://huggingface.co/)에 접속합니다.
8
+ 2. **New Space 생성**:
9
+ - 우측 상단 프로필 클릭 -> **New Space** 선택.
10
+ - **Space Name**: `liger-showcase` (원하는 이름 입력).
11
+ - **License**: `mit` (선택 사항).
12
+ - **Space SDK**: **Static**을 선택하세요 (가장 중요!).
13
+ - **Visibility**: Public (공개) 또는 Private.
14
+ - **Create Space** 클릭.
15
+ 3. **파일 업로드**:
16
+ - 생성된 Space 페이지에서 **Files** 탭으로 이동합니다.
17
+ - **Add file** -> **Upload files**를 클릭합니다.
18
+ - 이 폴더(`liger_showcase`) 안에 있는 **모든 파일**(`index.html`, `style.css`, `.mp4`, `.png`)을 드래그하여 업로드합니다.
19
+ - 아래 **Commit changes to main** 버튼을 클릭하여 저장합니다.
20
+ 4. **배포 확인**:
21
+ - 잠시 후 **App** 탭으로 이동하면 웹사이트가 배포된 것을 확인할 수 있습니다.
22
+
23
+ ## 📝 수정 사항 (선택)
24
+
25
+ ### 1. PPT/발표 자료 업로드
26
+ 현재 PPT 섹션은 예시로 되어 있습니다. 발표 자료를 보여주려면:
27
+ 1. 발표 자료를 PDF로 변환하여 함께 업로드하세요 (예: `presentation.pdf`).
28
+ 2. `index.html` 파일을 열고 80번째 줄 근처의 `<div class="ppt-container glass-card">` 안쪽을 수정하여 `iframe`이나 다운로드 링크를 연결하세요.
29
+
30
+ **PDF 바로 보여주기 예시:**
31
+ ```html
32
+ <embed src="presentation.pdf" type="application/pdf" width="100%" height="600px" />
33
+ ```
34
+
35
+ ### 2. n8n 워크플로우 연결
36
+ n8n 워크플로우를 직접 보여주거나 실행하게 하려면, n8n 인스턴스의 Webhook URL이나 공개 링크를 `index.html`의 워크플로우 섹션 버튼에 연결하면 됩니다.
index.html CHANGED
@@ -1,19 +1,131 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Liger - Green-Drive Optimizer</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="style.css">
11
+ <meta name="description" content="Liger: 친환경 주행 경로 최적화 및 충전소 추천 솔루션">
12
+ </head>
13
+ <body>
14
+ <div class="background-glob"></div>
15
+
16
+ <nav class="navbar">
17
+ <div class="logo">LIGER</div>
18
+ <div class="nav-links">
19
+ <a href="#demo">Demo</a>
20
+ <a href="#presentation">Presentation</a>
21
+ <a href="#workflow">Workflow</a>
22
+ </div>
23
+ </nav>
24
+
25
+ <header class="hero">
26
+ <div class="hero-content">
27
+ <span class="badge">Green-Drive Optimizer</span>
28
+ <h1>스마트한 전기차 라이프의 시작,<br> <span class="gradient-text">LIGER</span></h1>
29
+ <p>최적의 경로와 충전소를 찾아주는 당신만의 AI 드라이빙 파트너</p>
30
+ <div class="cta-group">
31
+ <a href="#demo" class="btn primary">데모 영상 보기</a>
32
+ <a href="#workflow" class="btn secondary">워크플로우 확인하기</a>
33
+ </div>
34
+ </div>
35
+ <div class="hero-image">
36
+ <img src="라이거_대표이미지.png" alt="Liger Dashboard Preview" class="glass-card">
37
+ </div>
38
+ </header>
39
+
40
+ <main>
41
+ <section id="demo" class="section">
42
+ <div class="section-header">
43
+ <h2>Demo Video</h2>
44
+ <p>Liger가 어떻게 작동하는지 확인해보세요</p>
45
+ </div>
46
+ <div class="video-container glass-card">
47
+ <video controls poster="라이거_대표이미지.png">
48
+ <source src="라이거_데모영상.mp4" type="video/mp4">
49
+ 브라우저가 비디오 태그를 지원하지 않습니다.
50
+ </video>
51
+ </div>
52
+ </section>
53
+
54
+ <section id="presentation" class="section">
55
+ <div class="section-header">
56
+ <h2>Presentation</h2>
57
+ <p>프로젝트 상세 소개 및 기술 스택</p>
58
+ </div>
59
+ <div class="ppt-container glass-card">
60
+ <!-- PDF 파일을 여기에 업로드하거나 Google Slides embed 코드를 넣으세요 -->
61
+ <div class="placeholder-ppt">
62
+ <div class="icon-box">📊</div>
63
+ <h3>발표 자료 (PPT/PDF)</h3>
64
+ <p>PDF 파일을 레포지토리에 업로드하고, <br><code>embed</code> 태그나 링크로 연결해주세요.</p>
65
+ <a href="#" class="btn secondary small">PDF 다운로드 (예시)</a>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <section id="workflow" class="section">
71
+ <div class="section-header">
72
+ <h2>n8n Workflow</h2>
73
+ <p>자동화 로직과 데이터 흐름을 한눈에</p>
74
+ </div>
75
+ <div class="workflow-container glass-card">
76
+ <div class="workflow-info">
77
+ <h3>Core Logic</h3>
78
+ <p>유저 입력 → 경로 최적화 → 충전소 추천 → 결과 리포트 생성</p>
79
+ </div>
80
+ <div class="workflow-viz">
81
+ <!-- n8n 워크플로우 이미지나 iframe을 넣을 수 있습니다 -->
82
+ <div class="code-block">
83
+ <pre><code>
84
+ // n8n Workflow JSON Viewer Link or Image
85
+ [User Input] --> [Tmap API] --> [Filtering] --> [Map Map] --> [Response]
86
+ </code></pre>
87
+ </div>
88
+ <a href="https://huggingface.co/dltmdgus" target="_blank" class="btn primary">Hugging Face 프로필 방문</a>
89
+ </div>
90
+ </div>
91
+ </section>
92
+ </main>
93
+
94
+ <footer>
95
+ <p>&copy; 2024 Liger Team. All rights reserved.</p>
96
+ <div class="socials">
97
+ <a href="https://huggingface.co/dltmdgus" target="_blank">Hugging Face</a>
98
+ </div>
99
+ </footer>
100
+
101
+ <script>
102
+ // Smooth scroll for anchor links
103
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
104
+ anchor.addEventListener('click', function (e) {
105
+ e.preventDefault();
106
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
107
+ behavior: 'smooth'
108
+ });
109
+ });
110
+ });
111
+
112
+ // Simple intersection observer for fade-in animations
113
+ const observerOptions = {
114
+ threshold: 0.1
115
+ };
116
+
117
+ const observer = new IntersectionObserver((entries) => {
118
+ entries.forEach(entry => {
119
+ if (entry.isIntersecting) {
120
+ entry.target.classList.add('visible');
121
+ }
122
+ });
123
+ }, observerOptions);
124
+
125
+ document.querySelectorAll('.section, .hero').forEach(el => {
126
+ el.classList.add('fade-in-section');
127
+ observer.observe(el);
128
+ });
129
+ </script>
130
+ </body>
131
  </html>
style.css CHANGED
@@ -1,28 +1,318 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ :root {
2
+ --bg-color: #0f1115;
3
+ --card-bg: rgba(255, 255, 255, 0.05);
4
+ --primary-color: #00ff88;
5
+ --primary-dim: rgba(0, 255, 136, 0.1);
6
+ --secondary-color: #60a5fa;
7
+ --text-main: #ffffff;
8
+ --text-muted: #9ca3af;
9
+ --gradient-main: linear-gradient(135deg, #00ff88 0%, #60a5fa 100%);
10
+ --font-heading: 'Outfit', sans-serif;
11
+ --font-body: 'Noto Sans KR', sans-serif;
12
+ --glass-border: 1px solid rgba(255, 255, 255, 0.1);
13
+ }
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
  body {
22
+ background-color: var(--bg-color);
23
+ color: var(--text-main);
24
+ font-family: var(--font-body);
25
+ line-height: 1.6;
26
+ overflow-x: hidden;
27
+ }
28
+
29
+ /* Background Glob Effect */
30
+ .background-glob {
31
+ position: fixed;
32
+ top: -20%;
33
+ right: -10%;
34
+ width: 600px;
35
+ height: 600px;
36
+ background: radial-gradient(circle, rgba(0, 255, 136, 0.15) 0%, transparent 70%);
37
+ filter: blur(80px);
38
+ z-index: -1;
39
+ animation: blob-bounce 10s infinite alternate;
40
+ }
41
+
42
+ @keyframes blob-bounce {
43
+ 0% { transform: translate(0, 0); }
44
+ 100% { transform: translate(-50px, 50px); }
45
+ }
46
+
47
+ /* Navbar */
48
+ .navbar {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ padding: 1.5rem 5%;
53
+ position: fixed;
54
+ width: 100%;
55
+ top: 0;
56
+ backdrop-filter: blur(10px);
57
+ border-bottom: var(--glass-border);
58
+ z-index: 1000;
59
+ }
60
+
61
+ .logo {
62
+ font-family: var(--font-heading);
63
+ font-weight: 700;
64
+ font-size: 1.5rem;
65
+ background: var(--gradient-main);
66
+ -webkit-background-clip: text;
67
+ -webkit-text-fill-color: transparent;
68
+ letter-spacing: 1px;
69
+ }
70
+
71
+ .nav-links a {
72
+ color: var(--text-muted);
73
+ text-decoration: none;
74
+ margin-left: 2rem;
75
+ font-weight: 500;
76
+ transition: color 0.3s;
77
+ }
78
+
79
+ .nav-links a:hover {
80
+ color: var(--primary-color);
81
+ }
82
+
83
+ /* Hero Section */
84
+ .hero {
85
+ min-height: 100vh;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: space-between;
89
+ padding: 0 10%;
90
+ padding-top: 80px; /* Navbar height */
91
+ gap: 2rem;
92
+ }
93
+
94
+ .hero-content {
95
+ flex: 1;
96
+ max-width: 600px;
97
+ }
98
+
99
+ .badge {
100
+ background: var(--primary-dim);
101
+ color: var(--primary-color);
102
+ padding: 0.5rem 1rem;
103
+ border-radius: 50px;
104
+ font-size: 0.9rem;
105
+ font-weight: 600;
106
+ display: inline-block;
107
+ margin-bottom: 1.5rem;
108
  }
109
 
110
  h1 {
111
+ font-family: var(--font-heading);
112
+ font-size: 3.5rem;
113
+ line-height: 1.1;
114
+ margin-bottom: 1.5rem;
115
+ }
116
+
117
+ .gradient-text {
118
+ background: var(--gradient-main);
119
+ -webkit-background-clip: text;
120
+ -webkit-text-fill-color: transparent;
121
+ }
122
+
123
+ .hero p {
124
+ color: var(--text-muted);
125
+ font-size: 1.2rem;
126
+ margin-bottom: 2.5rem;
127
+ }
128
+
129
+ .cta-group {
130
+ display: flex;
131
+ gap: 1rem;
132
+ }
133
+
134
+ .btn {
135
+ padding: 1rem 2rem;
136
+ border-radius: 8px;
137
+ font-weight: 600;
138
+ text-decoration: none;
139
+ transition: transform 0.2s, box-shadow 0.2s;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ }
144
+
145
+ .btn.primary {
146
+ background: var(--gradient-main);
147
+ color: #000;
148
+ border: none;
149
+ }
150
+
151
+ .btn.primary:hover {
152
+ transform: translateY(-2px);
153
+ box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
154
+ }
155
+
156
+ .btn.secondary {
157
+ background: rgba(255, 255, 255, 0.1);
158
+ color: white;
159
+ border: var(--glass-border);
160
+ }
161
+
162
+ .btn.secondary:hover {
163
+ background: rgba(255, 255, 255, 0.2);
164
  }
165
 
166
+ .hero-image {
167
+ flex: 1;
168
+ display: flex;
169
+ justify-content: center;
 
170
  }
171
 
172
+ .hero-image img {
173
+ max-width: 100%;
174
+ border-radius: 12px;
175
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
176
+ border: var(--glass-border);
 
177
  }
178
 
179
+ /* Sections */
180
+ .section {
181
+ padding: 6rem 10%;
182
+ opacity: 0;
183
+ transform: translateY(20px);
184
+ transition: opacity 0.8s ease-out, transform 0.8s ease-out;
185
+ }
186
+
187
+ .section.visible {
188
+ opacity: 1;
189
+ transform: translateY(0);
190
+ }
191
+
192
+ .section-header {
193
+ text-align: center;
194
+ margin-bottom: 3rem;
195
+ }
196
+
197
+ .section-header h2 {
198
+ font-family: var(--font-heading);
199
+ font-size: 2.5rem;
200
+ margin-bottom: 0.5rem;
201
+ }
202
+
203
+ .section-header p {
204
+ color: var(--text-muted);
205
+ }
206
+
207
+ /* Glass Card */
208
+ .glass-card {
209
+ background: var(--card-bg);
210
+ backdrop-filter: blur(12px);
211
+ -webkit-backdrop-filter: blur(12px);
212
+ border: var(--glass-border);
213
+ border-radius: 16px;
214
+ padding: 2rem;
215
+ overflow: hidden;
216
+ }
217
+
218
+ /* Video */
219
+ .video-container video {
220
+ width: 100%;
221
+ border-radius: 8px;
222
+ display: block;
223
+ }
224
+
225
+ /* PPT Placeholder */
226
+ .ppt-container {
227
+ min-height: 400px;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ text-align: center;
232
+ }
233
+
234
+ .icon-box {
235
+ font-size: 3rem;
236
+ margin-bottom: 1rem;
237
+ }
238
+
239
+ .placeholder-ppt h3 {
240
+ margin-bottom: 1rem;
241
+ }
242
+
243
+ .placeholder-ppt p {
244
+ color: var(--text-muted);
245
+ margin-bottom: 2rem;
246
+ }
247
+
248
+ /* Workflow */
249
+ .workflow-container {
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: 2rem;
253
+ }
254
+
255
+ .workflow-info {
256
+ text-align: center;
257
+ }
258
+
259
+ .workflow-viz {
260
+ background: rgba(0,0,0,0.3);
261
+ border-radius: 8px;
262
+ padding: 2rem;
263
+ text-align: center;
264
+ }
265
+
266
+ .code-block {
267
+ text-align: left;
268
+ background: #000;
269
+ padding: 1rem;
270
+ border-radius: 8px;
271
+ overflow-x: auto;
272
+ font-family: 'Fira Code', monospace;
273
+ font-size: 0.9rem;
274
+ margin-bottom: 2rem;
275
+ border: 1px solid #333;
276
+ }
277
+
278
+ /* Footer */
279
+ footer {
280
+ padding: 2rem 10%;
281
+ text-align: center;
282
+ border-top: var(--glass-border);
283
+ margin-top: 4rem;
284
+ color: var(--text-muted);
285
+ display: flex;
286
+ justify-content: space-between;
287
+ align-items: center;
288
+ }
289
+
290
+ footer a {
291
+ color: var(--text-main);
292
+ text-decoration: none;
293
+ }
294
+
295
+ @media (max-width: 768px) {
296
+ .navbar {
297
+ padding: 1rem 5%;
298
+ }
299
+
300
+ .hero {
301
+ flex-direction: column;
302
+ text-align: center;
303
+ padding-top: 120px;
304
+ }
305
+
306
+ .cta-group {
307
+ justify-content: center;
308
+ }
309
+
310
+ .hero-content {
311
+ margin-bottom: 3rem;
312
+ }
313
+
314
+ footer {
315
+ flex-direction: column;
316
+ gap: 1rem;
317
+ }
318
  }
upload_stage/.gitattributes ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tar filter=lfs diff=lfs merge=lfs -text
29
+ *.tflite filter=lfs diff=lfs merge=lfs -text
30
+ *.tgz filter=lfs diff=lfs merge=lfs -text
31
+ *.wasm filter=lfs diff=lfs merge=lfs -text
32
+ *.xz filter=lfs diff=lfs merge=lfs -text
33
+ *.zip filter=lfs diff=lfs merge=lfs -text
34
+ *.zst filter=lfs diff=lfs merge=lfs -text
35
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
upload_stage/README.md ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Liger Showcase Page Deployment Guide
2
+
3
+ 이 폴더(`liger_showcase`)에는 Hugging Face Spaces에 배포할 수 있는 웹사이트 파일들이 모두 포함되어 있습니다.
4
+
5
+ ## 🚀 Hugging Face Spaces 배포 방법
6
+
7
+ 1. **Hugging Face 접속 및 로그인**: [huggingface.co](https://huggingface.co/)에 접속합니다.
8
+ 2. **New Space 생성**:
9
+ - 우측 상단 프로필 클릭 -> **New Space** 선택.
10
+ - **Space Name**: `liger-showcase` (원하는 이름 입력).
11
+ - **License**: `mit` (선택 사항).
12
+ - **Space SDK**: **Static**을 선택하세요 (가장 중요!).
13
+ - **Visibility**: Public (공개) 또는 Private.
14
+ - **Create Space** 클릭.
15
+ 3. **파일 업로드**:
16
+ - 생성된 Space 페이지에서 **Files** 탭으로 이동합니다.
17
+ - **Add file** -> **Upload files**를 클릭합니다.
18
+ - 이 폴더(`liger_showcase`) 안에 있는 **모든 파일**(`index.html`, `style.css`, `.mp4`, `.png`)을 드래그하여 업로드합니다.
19
+ - 아래 **Commit changes to main** 버튼을 클릭하여 저장합니다.
20
+ 4. **배포 확인**:
21
+ - 잠시 후 **App** 탭으로 이동하면 웹사이트가 배포된 것을 확인할 수 있습니다.
22
+
23
+ ## 📝 수정 사항 (선택)
24
+
25
+ ### 1. PPT/발표 자료 업로드
26
+ 현재 PPT 섹션은 예시로 되어 있습니다. 발표 자료를 보여주려면:
27
+ 1. 발표 자료를 PDF로 변환하여 함께 업로드하세요 (예: `presentation.pdf`).
28
+ 2. `index.html` 파일을 열고 80번째 줄 근처의 `<div class="ppt-container glass-card">` 안쪽을 수정하여 `iframe`이나 다운로드 링크를 연결하세요.
29
+
30
+ **PDF 바로 보여주기 예시:**
31
+ ```html
32
+ <embed src="presentation.pdf" type="application/pdf" width="100%" height="600px" />
33
+ ```
34
+
35
+ ### 2. n8n 워크플로우 연결
36
+ n8n 워크플로우를 직접 보여주거나 실행하게 하려면, n8n 인스턴스의 Webhook URL이나 공개 링크를 `index.html`의 워크플로우 섹션 버튼에 연결하면 됩니다.
upload_stage/index.html ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Liger - Green-Drive Optimizer</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="style.css">
11
+ <meta name="description" content="Liger: 친환경 주행 경로 최적화 및 충전소 추천 솔루션">
12
+ </head>
13
+ <body>
14
+ <div class="background-glob"></div>
15
+
16
+ <nav class="navbar">
17
+ <div class="logo">LIGER</div>
18
+ <div class="nav-links">
19
+ <a href="#demo">Demo</a>
20
+ <a href="#presentation">Presentation</a>
21
+ <a href="#workflow">Workflow</a>
22
+ </div>
23
+ </nav>
24
+
25
+ <header class="hero">
26
+ <div class="hero-content">
27
+ <span class="badge">Green-Drive Optimizer</span>
28
+ <h1>스마트한 전기차 라이프의 시작,<br> <span class="gradient-text">LIGER</span></h1>
29
+ <p>최적의 경로와 충전소를 찾아주는 당신만의 AI 드라이빙 파트너</p>
30
+ <div class="cta-group">
31
+ <a href="#demo" class="btn primary">데모 영상 보기</a>
32
+ <a href="#workflow" class="btn secondary">워크플로우 확인하기</a>
33
+ </div>
34
+ </div>
35
+ <div class="hero-image">
36
+ <img src="라이거_대표이미지.png" alt="Liger Dashboard Preview" class="glass-card">
37
+ </div>
38
+ </header>
39
+
40
+ <main>
41
+ <section id="demo" class="section">
42
+ <div class="section-header">
43
+ <h2>Demo Video</h2>
44
+ <p>Liger가 어떻게 작동하는지 확인해보세요</p>
45
+ </div>
46
+ <div class="video-container glass-card">
47
+ <video controls poster="라이거_대표이미지.png">
48
+ <source src="라이거_데모영상.mp4" type="video/mp4">
49
+ 브라우저가 비디오 태그를 지원하지 않습니다.
50
+ </video>
51
+ </div>
52
+ </section>
53
+
54
+ <section id="presentation" class="section">
55
+ <div class="section-header">
56
+ <h2>Presentation</h2>
57
+ <p>프로젝트 상세 소개 및 기술 스택</p>
58
+ </div>
59
+ <div class="ppt-container glass-card">
60
+ <!-- PDF 파일을 여기에 업로드하거나 Google Slides embed 코드를 넣으세요 -->
61
+ <div class="placeholder-ppt">
62
+ <div class="icon-box">📊</div>
63
+ <h3>발표 자료 (PPT/PDF)</h3>
64
+ <p>PDF 파일을 레포지토리에 업로드하고, <br><code>embed</code> 태그나 링크로 연결해주세요.</p>
65
+ <a href="#" class="btn secondary small">PDF 다운로드 (예시)</a>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <section id="workflow" class="section">
71
+ <div class="section-header">
72
+ <h2>n8n Workflow</h2>
73
+ <p>자동화 로직과 데이터 흐름을 한눈에</p>
74
+ </div>
75
+ <div class="workflow-container glass-card">
76
+ <div class="workflow-info">
77
+ <h3>Core Logic</h3>
78
+ <p>유저 입력 → 경로 최적화 → 충전소 추천 → 결과 리포트 생성</p>
79
+ </div>
80
+ <div class="workflow-viz">
81
+ <!-- n8n 워크플로우 이미지나 iframe을 넣을 수 있습니다 -->
82
+ <div class="code-block">
83
+ <pre><code>
84
+ // n8n Workflow JSON Viewer Link or Image
85
+ [User Input] --> [Tmap API] --> [Filtering] --> [Map Map] --> [Response]
86
+ </code></pre>
87
+ </div>
88
+ <a href="https://huggingface.co/dltmdgus" target="_blank" class="btn primary">Hugging Face 프로필 방문</a>
89
+ </div>
90
+ </div>
91
+ </section>
92
+ </main>
93
+
94
+ <footer>
95
+ <p>&copy; 2024 Liger Team. All rights reserved.</p>
96
+ <div class="socials">
97
+ <a href="https://huggingface.co/dltmdgus" target="_blank">Hugging Face</a>
98
+ </div>
99
+ </footer>
100
+
101
+ <script>
102
+ // Smooth scroll for anchor links
103
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
104
+ anchor.addEventListener('click', function (e) {
105
+ e.preventDefault();
106
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
107
+ behavior: 'smooth'
108
+ });
109
+ });
110
+ });
111
+
112
+ // Simple intersection observer for fade-in animations
113
+ const observerOptions = {
114
+ threshold: 0.1
115
+ };
116
+
117
+ const observer = new IntersectionObserver((entries) => {
118
+ entries.forEach(entry => {
119
+ if (entry.isIntersecting) {
120
+ entry.target.classList.add('visible');
121
+ }
122
+ });
123
+ }, observerOptions);
124
+
125
+ document.querySelectorAll('.section, .hero').forEach(el => {
126
+ el.classList.add('fade-in-section');
127
+ observer.observe(el);
128
+ });
129
+ </script>
130
+ </body>
131
+ </html>
upload_stage/style.css ADDED
@@ -0,0 +1,318 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --bg-color: #0f1115;
3
+ --card-bg: rgba(255, 255, 255, 0.05);
4
+ --primary-color: #00ff88;
5
+ --primary-dim: rgba(0, 255, 136, 0.1);
6
+ --secondary-color: #60a5fa;
7
+ --text-main: #ffffff;
8
+ --text-muted: #9ca3af;
9
+ --gradient-main: linear-gradient(135deg, #00ff88 0%, #60a5fa 100%);
10
+ --font-heading: 'Outfit', sans-serif;
11
+ --font-body: 'Noto Sans KR', sans-serif;
12
+ --glass-border: 1px solid rgba(255, 255, 255, 0.1);
13
+ }
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ body {
22
+ background-color: var(--bg-color);
23
+ color: var(--text-main);
24
+ font-family: var(--font-body);
25
+ line-height: 1.6;
26
+ overflow-x: hidden;
27
+ }
28
+
29
+ /* Background Glob Effect */
30
+ .background-glob {
31
+ position: fixed;
32
+ top: -20%;
33
+ right: -10%;
34
+ width: 600px;
35
+ height: 600px;
36
+ background: radial-gradient(circle, rgba(0, 255, 136, 0.15) 0%, transparent 70%);
37
+ filter: blur(80px);
38
+ z-index: -1;
39
+ animation: blob-bounce 10s infinite alternate;
40
+ }
41
+
42
+ @keyframes blob-bounce {
43
+ 0% { transform: translate(0, 0); }
44
+ 100% { transform: translate(-50px, 50px); }
45
+ }
46
+
47
+ /* Navbar */
48
+ .navbar {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ padding: 1.5rem 5%;
53
+ position: fixed;
54
+ width: 100%;
55
+ top: 0;
56
+ backdrop-filter: blur(10px);
57
+ border-bottom: var(--glass-border);
58
+ z-index: 1000;
59
+ }
60
+
61
+ .logo {
62
+ font-family: var(--font-heading);
63
+ font-weight: 700;
64
+ font-size: 1.5rem;
65
+ background: var(--gradient-main);
66
+ -webkit-background-clip: text;
67
+ -webkit-text-fill-color: transparent;
68
+ letter-spacing: 1px;
69
+ }
70
+
71
+ .nav-links a {
72
+ color: var(--text-muted);
73
+ text-decoration: none;
74
+ margin-left: 2rem;
75
+ font-weight: 500;
76
+ transition: color 0.3s;
77
+ }
78
+
79
+ .nav-links a:hover {
80
+ color: var(--primary-color);
81
+ }
82
+
83
+ /* Hero Section */
84
+ .hero {
85
+ min-height: 100vh;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: space-between;
89
+ padding: 0 10%;
90
+ padding-top: 80px; /* Navbar height */
91
+ gap: 2rem;
92
+ }
93
+
94
+ .hero-content {
95
+ flex: 1;
96
+ max-width: 600px;
97
+ }
98
+
99
+ .badge {
100
+ background: var(--primary-dim);
101
+ color: var(--primary-color);
102
+ padding: 0.5rem 1rem;
103
+ border-radius: 50px;
104
+ font-size: 0.9rem;
105
+ font-weight: 600;
106
+ display: inline-block;
107
+ margin-bottom: 1.5rem;
108
+ }
109
+
110
+ h1 {
111
+ font-family: var(--font-heading);
112
+ font-size: 3.5rem;
113
+ line-height: 1.1;
114
+ margin-bottom: 1.5rem;
115
+ }
116
+
117
+ .gradient-text {
118
+ background: var(--gradient-main);
119
+ -webkit-background-clip: text;
120
+ -webkit-text-fill-color: transparent;
121
+ }
122
+
123
+ .hero p {
124
+ color: var(--text-muted);
125
+ font-size: 1.2rem;
126
+ margin-bottom: 2.5rem;
127
+ }
128
+
129
+ .cta-group {
130
+ display: flex;
131
+ gap: 1rem;
132
+ }
133
+
134
+ .btn {
135
+ padding: 1rem 2rem;
136
+ border-radius: 8px;
137
+ font-weight: 600;
138
+ text-decoration: none;
139
+ transition: transform 0.2s, box-shadow 0.2s;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ }
144
+
145
+ .btn.primary {
146
+ background: var(--gradient-main);
147
+ color: #000;
148
+ border: none;
149
+ }
150
+
151
+ .btn.primary:hover {
152
+ transform: translateY(-2px);
153
+ box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
154
+ }
155
+
156
+ .btn.secondary {
157
+ background: rgba(255, 255, 255, 0.1);
158
+ color: white;
159
+ border: var(--glass-border);
160
+ }
161
+
162
+ .btn.secondary:hover {
163
+ background: rgba(255, 255, 255, 0.2);
164
+ }
165
+
166
+ .hero-image {
167
+ flex: 1;
168
+ display: flex;
169
+ justify-content: center;
170
+ }
171
+
172
+ .hero-image img {
173
+ max-width: 100%;
174
+ border-radius: 12px;
175
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
176
+ border: var(--glass-border);
177
+ }
178
+
179
+ /* Sections */
180
+ .section {
181
+ padding: 6rem 10%;
182
+ opacity: 0;
183
+ transform: translateY(20px);
184
+ transition: opacity 0.8s ease-out, transform 0.8s ease-out;
185
+ }
186
+
187
+ .section.visible {
188
+ opacity: 1;
189
+ transform: translateY(0);
190
+ }
191
+
192
+ .section-header {
193
+ text-align: center;
194
+ margin-bottom: 3rem;
195
+ }
196
+
197
+ .section-header h2 {
198
+ font-family: var(--font-heading);
199
+ font-size: 2.5rem;
200
+ margin-bottom: 0.5rem;
201
+ }
202
+
203
+ .section-header p {
204
+ color: var(--text-muted);
205
+ }
206
+
207
+ /* Glass Card */
208
+ .glass-card {
209
+ background: var(--card-bg);
210
+ backdrop-filter: blur(12px);
211
+ -webkit-backdrop-filter: blur(12px);
212
+ border: var(--glass-border);
213
+ border-radius: 16px;
214
+ padding: 2rem;
215
+ overflow: hidden;
216
+ }
217
+
218
+ /* Video */
219
+ .video-container video {
220
+ width: 100%;
221
+ border-radius: 8px;
222
+ display: block;
223
+ }
224
+
225
+ /* PPT Placeholder */
226
+ .ppt-container {
227
+ min-height: 400px;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ text-align: center;
232
+ }
233
+
234
+ .icon-box {
235
+ font-size: 3rem;
236
+ margin-bottom: 1rem;
237
+ }
238
+
239
+ .placeholder-ppt h3 {
240
+ margin-bottom: 1rem;
241
+ }
242
+
243
+ .placeholder-ppt p {
244
+ color: var(--text-muted);
245
+ margin-bottom: 2rem;
246
+ }
247
+
248
+ /* Workflow */
249
+ .workflow-container {
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: 2rem;
253
+ }
254
+
255
+ .workflow-info {
256
+ text-align: center;
257
+ }
258
+
259
+ .workflow-viz {
260
+ background: rgba(0,0,0,0.3);
261
+ border-radius: 8px;
262
+ padding: 2rem;
263
+ text-align: center;
264
+ }
265
+
266
+ .code-block {
267
+ text-align: left;
268
+ background: #000;
269
+ padding: 1rem;
270
+ border-radius: 8px;
271
+ overflow-x: auto;
272
+ font-family: 'Fira Code', monospace;
273
+ font-size: 0.9rem;
274
+ margin-bottom: 2rem;
275
+ border: 1px solid #333;
276
+ }
277
+
278
+ /* Footer */
279
+ footer {
280
+ padding: 2rem 10%;
281
+ text-align: center;
282
+ border-top: var(--glass-border);
283
+ margin-top: 4rem;
284
+ color: var(--text-muted);
285
+ display: flex;
286
+ justify-content: space-between;
287
+ align-items: center;
288
+ }
289
+
290
+ footer a {
291
+ color: var(--text-main);
292
+ text-decoration: none;
293
+ }
294
+
295
+ @media (max-width: 768px) {
296
+ .navbar {
297
+ padding: 1rem 5%;
298
+ }
299
+
300
+ .hero {
301
+ flex-direction: column;
302
+ text-align: center;
303
+ padding-top: 120px;
304
+ }
305
+
306
+ .cta-group {
307
+ justify-content: center;
308
+ }
309
+
310
+ .hero-content {
311
+ margin-bottom: 3rem;
312
+ }
313
+
314
+ footer {
315
+ flex-direction: column;
316
+ gap: 1rem;
317
+ }
318
+ }
upload_stage/라이거_대표이미지.png ADDED

Git LFS Details

  • SHA256: 837078f8b8f6a070e2e77472976865506b3d0629c2aa155344f4500942ae4ccd
  • Pointer size: 131 Bytes
  • Size of remote file: 700 kB
upload_stage/라이거_데모영상.mp4 ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:04a6612b7c9fba784330cc96c02bd01ad690e7d7ff0e2fb22826a54d153c1307
3
+ size 4318328
라이거_대표이미지.png ADDED

Git LFS Details

  • SHA256: 837078f8b8f6a070e2e77472976865506b3d0629c2aa155344f4500942ae4ccd
  • Pointer size: 131 Bytes
  • Size of remote file: 700 kB
라이거_데모영상.mp4 ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:04a6612b7c9fba784330cc96c02bd01ad690e7d7ff0e2fb22826a54d153c1307
3
+ size 4318328