Spaces:

dltmdgus
/

GreenDriverOptimizer

Configuration error

App Files Files Community

dltmdgus commited on 28 days ago

Commit

d2bcb48

verified ·

1 Parent(s): 33248d9

Upload 4 files

Browse files

Files changed (5) hide show

.gitattributes +2 -0
README.md +36 -10
index.html +130 -18
라이거_대표이미지.png +3 -0
라이거_데모영상.mp4 +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+라이거_대표이미지.png filter=lfs diff=lfs merge=lfs -text
+라이거_데모영상.mp4 filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,10 +1,36 @@
----
-title: GreenDriverOptimizer
-emoji: 💻
-colorFrom: purple
-colorTo: purple
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# Liger Showcase Page Deployment Guide
+이 폴더(`liger_showcase`)에는 Hugging Face Spaces에 배포할 수 있는 웹사이트 파일들이 모두 포함되어 있습니다.
+## 🚀 Hugging Face Spaces 배포 방법
+1. **Hugging Face 접속 및 로그인**: [huggingface.co](https://huggingface.co/)에 접속합니다.
+2. **New Space 생성**:
+   - 우측 상단 프로필 클릭 -> **New Space** 선택.
+   - **Space Name**: `liger-showcase` (원하는 이름 입력).
+   - **License**: `mit` (선택 사항).
+   - **Space SDK**: **Static**을 선택하세요 (가장 중요!).
+   - **Visibility**: Public (공개) 또는 Private.
+   - **Create Space** 클릭.
+3. **파일 업로드**:
+   - 생성된 Space 페이지에서 **Files** 탭으로 이동합니다.
+   - **Add file** -> **Upload files**를 클릭합니다.
+   - 이 폴더(`liger_showcase`) 안에 있는 **모든 파일**(`index.html`, `style.css`, `.mp4`, `.png`)을 드래그하여 업로드합니다.
+   - 아래 **Commit changes to main** 버튼을 클릭하여 저장합니다.
+4. **배포 확인**:
+   - 잠시 후 **App** 탭으로 이동하면 웹사이트가 배포된 것을 확인할 수 있습니다.
+## 📝 수정 사항 (선택)
+### 1. PPT/발표 자료 업로드
+현재 PPT 섹션은 예시로 되어 있습니다. 발표 자료를 보여주려면:
+1. 발표 자료를 PDF로 변환하여 함께 업로드하세요 (예: `presentation.pdf`).
+2. `index.html` 파일을 열고 80번째 줄 근처의 `<div class="ppt-container glass-card">` 안쪽을 수정하여 `iframe`이나 다운로드 링크를 연결하세요.
+   **PDF 바로 보여주기 예시:**
+   ```html
+   <embed src="presentation.pdf" type="application/pdf" width="100%" height="600px" />
+   ```
+### 2. n8n 워크플로우 연결
+n8n 워크플로우를 직접 보여주거나 실행하게 하려면, n8n 인스턴스의 Webhook URL이나 공개 링크를 `index.html`의 워크플로우 섹션 버튼에 연결하면 됩니다.

index.html CHANGED Viewed

@@ -1,19 +1,131 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liger - Green-Drive Optimizer</title>
+    <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=Outfit:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <meta name="description" content="Liger: 친환경 주행 경로 최적화 및 충전소 추천 솔루션">
+</head>
+<body>
+    <div class="background-glob"></div>
+    <nav class="navbar">
+        <div class="logo">LIGER</div>
+        <div class="nav-links">
+            <a href="#demo">Demo</a>
+            <a href="#presentation">Presentation</a>
+            <a href="#workflow">Workflow</a>
+        </div>
+    </nav>
+    <header class="hero">
+        <div class="hero-content">
+            <span class="badge">Green-Drive Optimizer</span>
+            <h1>스마트한 전기차 라이프의 시작,<br> <span class="gradient-text">LIGER</span></h1>
+            <p>최적의 경로와 충전소를 찾아주는 당신만의 AI 드라이빙 파트너</p>
+            <div class="cta-group">
+                <a href="#demo" class="btn primary">데모 영상 보기</a>
+                <a href="#workflow" class="btn secondary">워크플로우 확인하기</a>
+            </div>
+        </div>
+        <div class="hero-image">
+            <img src="라이거_대표이미지.png" alt="Liger Dashboard Preview" class="glass-card">
+        </div>
+    </header>
+    <main>
+        <section id="demo" class="section">
+            <div class="section-header">
+                <h2>Demo Video</h2>
+                <p>Liger가 어떻게 작동하는지 확인해보세요</p>
+            </div>
+            <div class="video-container glass-card">
+                <video controls poster="라이거_대표이미지.png">
+                    <source src="라이거_데모영상.mp4" type="video/mp4">
+                    브라우저가 비디오 태그를 지원하지 않습니다.
+                </video>
+            </div>
+        </section>
+        <section id="presentation" class="section">
+            <div class="section-header">
+                <h2>Presentation</h2>
+                <p>프로젝트 상세 소개 및 기술 스택</p>
+            </div>
+            <div class="ppt-container glass-card">
+                <!-- PDF 파일을 여기에 업로드하거나 Google Slides embed 코드를 넣으세요 -->
+                <div class="placeholder-ppt">
+                    <div class="icon-box">📊</div>
+                    <h3>발표 자료 (PPT/PDF)</h3>
+                    <p>PDF 파일을 레포지토리에 업로드하고, <br><code>embed</code> 태그나 링크로 연결해주세요.</p>
+                    <a href="#" class="btn secondary small">PDF 다운로드 (예시)</a>
+                </div>
+            </div>
+        </section>
+        <section id="workflow" class="section">
+            <div class="section-header">
+                <h2>n8n Workflow</h2>
+                <p>자동화 로직과 데이터 흐름을 한눈에</p>
+            </div>
+            <div class="workflow-container glass-card">
+                <div class="workflow-info">
+                    <h3>Core Logic</h3>
+                    <p>유저 입력 → 경로 최적화 → 충전소 추천 → 결과 리포트 생성</p>
+                </div>
+                <div class="workflow-viz">
+                    <!-- n8n 워크플로우 이미지나 iframe을 넣을 수 있습니다 -->
+                    <div class="code-block">
+                        <pre><code>
+// n8n Workflow JSON Viewer Link or Image
+[User Input] --> [Tmap API] --> [Filtering] --> [Map Map] --> [Response]
+                        </code></pre>
+                    </div>
+                    <a href="https://huggingface.co/dltmdgus" target="_blank" class="btn primary">Hugging Face 프로필 방문</a>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 Liger Team. All rights reserved.</p>
+        <div class="socials">
+            <a href="https://huggingface.co/dltmdgus" target="_blank">Hugging Face</a>
+        </div>
+    </footer>
+    <script>
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Simple intersection observer for fade-in animations
+        const observerOptions = {
+            threshold: 0.1
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('.section, .hero').forEach(el => {
+            el.classList.add('fade-in-section');
+            observer.observe(el);
+        });
+    </script>
+</body>
 </html>

라이거_대표이미지.png ADDED Viewed

Git LFS Details

SHA256: 837078f8b8f6a070e2e77472976865506b3d0629c2aa155344f4500942ae4ccd
Pointer size: 131 Bytes
Size of remote file: 700 kB

라이거_데모영상.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:04a6612b7c9fba784330cc96c02bd01ad690e7d7ff0e2fb22826a54d153c1307
+size 4318328