Spaces:

jeongkee
/

text-to-svg-workflow-tutorial

Running

App Files Files Community

jeongkee commited on Sep 18, 2025

Commit

3b87d60

verified ·

1 Parent(s): cb22146

Create index.html

Browse files

Files changed (1) hide show

index.html +991 -19

index.html CHANGED Viewed

@@ -1,19 +1,991 @@
-<!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>Text to SVG 워크플로우 마스터 - 허깅페이스 스페이스</title>
+    <meta name="description" content="텍스트 문서를 맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화로 자동 변환하는 완전 가이드">
+    <meta name="keywords" content="Text to SVG, 워크플로우, 비즈니스 시각화, 교육, 튜토리얼">
+    <!-- Open Graph meta tags for social sharing -->
+    <meta property="og:title" content="Text to SVG 워크플로우 마스터">
+    <meta property="og:description" content="텍스트 문서를 전문적인 비즈니스 시각화로 자동 변환하는 인터랙티브 학습 플랫폼">
+    <meta property="og:type" content="website">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            font-size: clamp(2rem, 5vw, 3rem);
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: clamp(1rem, 3vw, 1.2rem);
+            opacity: 0.9;
+        }
+        .huggingface-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255,255,255,0.1);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            margin-top: 20px;
+            font-size: 0.9rem;
+            backdrop-filter: blur(10px);
+        }
+        .workflow-container {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+            margin-bottom: 40px;
+        }
+        .workflow-steps {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 20px;
+            align-items: center;
+            margin-bottom: 60px;
+        }
+        .step {
+            text-align: center;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            padding: 20px 10px;
+        }
+        .step:hover {
+            transform: translateY(-5px);
+        }
+        .step.active {
+            background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
+            border-radius: 15px;
+            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
+        }
+        .step-number {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #3b82f6, #1d4ed8);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin: 0 auto 15px;
+            position: relative;
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+        }
+        .step.completed .step-number {
+            background: linear-gradient(145deg, #22c55e, #16a34a);
+        }
+        .step.active .step-number {
+            background: linear-gradient(145deg, #f59e0b, #d97706);
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
+            50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.6); }
+            100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
+        }
+        .step-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 8px;
+        }
+        .step-desc {
+            font-size: 0.875rem;
+            color: #6b7280;
+            line-height: 1.4;
+        }
+        .content-area {
+            background: #f8fafc;
+            border-radius: 15px;
+            padding: 30px;
+            min-height: 500px;
+        }
+        .step-content {
+            display: none;
+        }
+        .step-content.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .demo-input {
+            background: white;
+            border: 2px solid #e5e7eb;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            overflow-x: auto;
+        }
+        .demo-output {
+            background: #111827;
+            color: #f9fafb;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 12px;
+            line-height: 1.5;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+        .analysis-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .analysis-card {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            border-left: 4px solid #3b82f6;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .analysis-card h4 {
+            color: #1f2937;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+        .analysis-card ul {
+            list-style: none;
+            color: #6b7280;
+        }
+        .analysis-card li {
+            padding: 5px 0;
+            position: relative;
+            padding-left: 20px;
+        }
+        .analysis-card li:before {
+            content: "•";
+            color: #3b82f6;
+            font-weight: bold;
+            position: absolute;
+            left: 0;
+        }
+        .doc-type-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .doc-type-card {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            border: 2px solid #e5e7eb;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .doc-type-card:hover {
+            border-color: #3b82f6;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
+        }
+        .doc-type-card.selected {
+            border-color: #22c55e;
+            background: #f0fdf4;
+        }
+        .doc-type-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 10px;
+        }
+        .doc-type-desc {
+            color: #6b7280;
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+        .svg-preview {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            border: 2px solid #e5e7eb;
+            min-height: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-top: 30px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .btn {
+            padding: 12px 24px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background: linear-gradient(145deg, #3b82f6, #1d4ed8);
+            color: white;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+        }
+        .btn-secondary {
+            background: #f3f4f6;
+            color: #374151;
+            border: 2px solid #e5e7eb;
+        }
+        .btn-secondary:hover {
+            background: #e5e7eb;
+        }
+        .progress-bar {
+            height: 6px;
+            background: #e5e7eb;
+            border-radius: 3px;
+            margin: 20px 0;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #3b82f6, #22c55e);
+            transition: width 0.5s ease;
+            border-radius: 3px;
+        }
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .feature-card {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+        .feature-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 15px;
+            font-size: 1.5rem;
+        }
+        .footer-info {
+            background: rgba(255,255,255,0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            color: white;
+            text-align: center;
+            margin-top: 40px;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .footer-link {
+            color: white;
+            text-decoration: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            background: rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+            font-size: 0.9rem;
+        }
+        .footer-link:hover {
+            background: rgba(255,255,255,0.2);
+            transform: translateY(-2px);
+        }
+        /* 반응형 디자인 */
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            .workflow-container {
+                padding: 20px;
+            }
+            .controls {
+                flex-direction: column;
+                align-items: center;
+            }
+            .btn {
+                width: 100%;
+                max-width: 200px;
+                justify-content: center;
+            }
+        }
+        /* 다크모드 지원 */
+        @media (prefers-color-scheme: dark) {
+            .workflow-container {
+                background: #1f2937;
+                color: #f9fafb;
+            }
+            .content-area {
+                background: #374151;
+            }
+            .step-title {
+                color: #f9fafb;
+            }
+            .analysis-card {
+                background: #374151;
+                color: #f9fafb;
+            }
+            .doc-type-card {
+                background: #374151;
+                color: #f9fafb;
+                border-color: #4b5563;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>📊 Text to SVG 워크플로우 마스터</h1>
+            <p>텍스트 문서를 맥킨지/딜로이트 수준의 전문적인 비즈니스 시각화로 자동 변환하는 완전 가이드</p>
+            <div class="huggingface-badge">
+                🤗 Hugging Face Space에서 호스팅
+            </div>
+        </div>
+        <div class="workflow-container">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressBar" style="width: 16.67%"></div>
+            </div>
+            <div class="workflow-steps">
+                <div class="step active" data-step="1">
+                    <div class="step-number">1</div>
+                    <div class="step-title">문서 입력</div>
+                    <div class="step-desc">텍스트 문서 업로드 및 전처리</div>
+                </div>
+                <div class="step" data-step="2">
+                    <div class="step-number">2</div>
+                    <div class="step-title">토픽 분석</div>
+                    <div class="step-desc">키워드 추출 및 의도 파악</div>
+                </div>
+                <div class="step" data-step="3">
+                    <div class="step-number">3</div>
+                    <div class="step-title">문서 분류</div>
+                    <div class="step-desc">A계열/B계열 타입 매핑</div>
+                </div>
+                <div class="step" data-step="4">
+                    <div class="step-number">4</div>
+                    <div class="step-title">SVG 가이드라인</div>
+                    <div class="step-desc">레이아웃 및 스타일 규칙</div>
+                </div>
+                <div class="step" data-step="5">
+                    <div class="step-number">5</div>
+                    <div class="step-title">프롬프트 생성</div>
+                    <div class="step-desc">LLM 최적화 프롬프트</div>
+                </div>
+                <div class="step" data-step="6">
+                    <div class="step-number">6</div>
+                    <div class="step-title">SVG 출력</div>
+                    <div class="step-desc">최종 시각화 생성</div>
+                </div>
+            </div>
+            <div class="content-area">
+                <!-- Step 1: 문서 입력 -->
+                <div class="step-content active" id="step1">
+                    <h2>🔄 STEP 1: 문서 입력 및 전처리</h2>
+                    <p>다양한 형태의 텍스트 문서를 입력받아 분석 가능한 형태로 전처리합니다.</p>
+                    <h3>📄 예시 입력 문서</h3>
+                    <div class="demo-input" id="sampleInput">2024년 3분기 경영 성과 요약
+주요 KPI:
+- 매출액: 12.3조원 (목표: 11.5조, YoY +8.2%)
+- 영업이익: 1.8조원 (목표: 1.6조, YoY +12.5%)
+- 순이익: 1.2조원 (목표: 1.1조, YoY +9.1%)
+- ROE: 14.2% (목표: 13.0%, YoY +1.8%p)
+월별 실적 추이:
+7월: 매출 4.1조, 영업이익 0.6조
+8월: 매출 4.0조, 영업이익 0.5조
+9월: 매출 4.2조, 영업이익 0.7조
+핵심 인사이트:
+- 프리미엄 제품 판매 증가로 수익성 개선
+- 디지털 채널 매출 비중 35% 달성
+- 해외 사업 확장으로 신규 고객 확보</div>
+                    <div class="feature-grid">
+                        <div class="feature-card">
+                            <div class="feature-icon">📝</div>
+                            <h4>지원 포맷</h4>
+                            <p>.txt, .docx, .pdf, .md</p>
+                        </div>
+                        <div class="feature-card">
+                            <div class="feature-icon">🔍</div>
+                            <h4>자동 인식</h4>
+                            <p>제목, 리스트, 데이터 패턴</p>
+                        </div>
+                        <div class="feature-card">
+                            <div class="feature-icon">⚡</div>
+                            <h4>실시간 처리</h4>
+                            <p>즉시 분석 및 피드백</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 2: 토픽 분석 -->
+                <div class="step-content" id="step2">
+                    <h2>🧠 STEP 2: 토픽 분석 및 키워드 추출</h2>
+                    <p>문서 내용을 분석하여 핵심 키워드와 의도를 파악합니다.</p>
+                    <div class="analysis-grid">
+                        <div class="analysis-card">
+                            <h4>🔑 추출된 키워드</h4>
+                            <ul>
+                                <li>KPI, 경영, 성과</li>
+                                <li>목표, 실적, YoY</li>
+                                <li>매출, 영업이익</li>
+                                <li>디지털, 해외사업</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>📊 데이터 패턴</h4>
+                            <ul>
+                                <li>금액: 조원 단위</li>
+                                <li>비율: 백분율</li>
+                                <li>증감: YoY 비교</li>
+                                <li>시계열: 월별 추이</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>👥 타겟 청중</h4>
+                            <ul>
+                                <li>경영진 대상</li>
+                                <li>의사결정 지원</li>
+                                <li>요약 보고 형태</li>
+                                <li>액션 아이템 필요</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>⏰ 시간 특성</h4>
+                            <ul>
+                                <li>분기별 정기 보고</li>
+                                <li>실시간 모니터링</li>
+                                <li>목표 대비 추적</li>
+                                <li>트렌드 분석</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 3: 문서 분류 -->
+                <div class="step-content" id="step3">
+                    <h2>🎯 STEP 3: 문서 타입 분류</h2>
+                    <p>분석 결과를 바탕으로 최적의 문서 타입을 선택합니다.</p>
+                    <div class="doc-type-grid">
+                        <div class="doc-type-card selected">
+                            <div class="doc-type-title">A1-1: 경영진 KPI 대시보드</div>
+                            <div class="doc-type-desc">
+                                <strong>매칭 점수: 95%</strong><br>
+                                • KPI 중심 구성<br>
+                                • 목표 대비 실적<br>
+                                • 경영진 타겟<br>
+                                • 의사결정 지원
+                            </div>
+                        </div>
+                        <div class="doc-type-card">
+                            <div class="doc-type-title">A1-2: 재무 성과 대시보드</div>
+                            <div class="doc-type-desc">
+                                <strong>매칭 점수: 78%</strong><br>
+                                • 재무 지표 포함<br>
+                                • 수익성 분석<br>
+                                • 폭포차트 적합<br>
+                                • 비용 구조 누락
+                            </div>
+                        </div>
+                        <div class="doc-type-card">
+                            <div class="doc-type-title">A3-1: IR 요약 자료</div>
+                            <div class="doc-type-desc">
+                                <strong>매칭 점수: 65%</strong><br>
+                                • 성장 지표 있음<br>
+                                • 투자자 관점 부족<br>
+                                • 전망 정보 없음<br>
+                                • 스토리 부족
+                            </div>
+                        </div>
+                        <div class="doc-type-card">
+                            <div class="doc-type-title">B1-1: 사업계획서</div>
+                            <div class="doc-type-desc">
+                                <strong>매칭 점수: 35%</strong><br>
+                                • 현황 보고 형태<br>
+                                • 계획 요소 없음<br>
+                                • 전략 내용 부족<br>
+                                • 실행 계획 없음
+                            </div>
+                        </div>
+                    </div>
+                    <div class="demo-output">분류 결과: A1-1 (경영진 KPI 대시보드)
+매칭 이유:
+✓ KPI 키워드 다수 발견 (매출, 영업이익, ROE)
+✓ 목표 대비 실적 비교 구조
+✓ 경영진 대상 요약 보고 형태
+✓ YoY 증감 분석 포함
+✓ 액션 가능한 인사이트 제시
+레이아웃 권장사항:
+→ 좌측: KPI 카드 2×2 배치
+→ 우측: 월별 콤보차트
+→ 하단: 인사이트 콜아웃</div>
+                </div>
+                <!-- Step 4: SVG 가이드라인 -->
+                <div class="step-content" id="step4">
+                    <h2>🎨 STEP 4: SVG 가이드라인 적용</h2>
+                    <p>A1-1 타입에 최적화된 레이아웃과 스타일 규칙을 적용합니다.</p>
+                    <div class="analysis-grid">
+                        <div class="analysis-card">
+                            <h4>📐 레이아웃 스펙</h4>
+                            <ul>
+                                <li>캔버스: 1600×900px</li>
+                                <li>안전여백: 상하60, 좌우80</li>
+                                <li>12-컬럼 그리드</li>
+                                <li>헤더 120px 고정</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>🎯 구성 요소</h4>
+                            <ul>
+                                <li>KPI 카드: 280×140px</li>
+                                <li>콤보차트: 860×520px</li>
+                                <li>콜아웃: 260×80px</li>
+                                <li>푸터: 100px</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>📝 타이포그래피</h4>
+                            <ul>
+                                <li>H1: 48px (제목)</li>
+                                <li>H2: 32px (KPI 값)</li>
+                                <li>Body: 18px (설명)</li>
+                                <li>Label: 14px (라벨)</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>🎨 컬러 시스템</h4>
+                            <ul>
+                                <li>Positive: #22C55E</li>
+                                <li>Neutral: #3B82F6</li>
+                                <li>Warning: #F59E0B</li>
+                                <li>Negative: #EF4444</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="svg-preview">
+                        <svg viewBox="0 0 800 450" style="border: 1px solid #e5e7eb; width: 100%; max-width: 800px;">
+                            <!-- 헤더 -->
+                            <text x="40" y="50" font-size="24" font-weight="bold" fill="#111827">2024년 3분기 경영 성과 대시보드</text>
+                            <text x="40" y="70" font-size="12" fill="#6b7280">2024년 9월 기준</text>
+                            <!-- KPI 카드들 -->
+                            <g transform="translate(40, 90)">
+                                <rect width="140" height="70" rx="4" fill="#f9fafb" stroke="#e5e7eb"/>
+                                <text x="8" y="16" font-size="8" fill="#6b7280">매출액</text>
+                                <text x="8" y="34" font-size="16" font-weight="bold" fill="#111827">₩12.3조</text>
+                                <text x="8" y="46" font-size="8" fill="#22c55e">▲ 8.2% YoY</text>
+                            </g>
+                            <g transform="translate(190, 90)">
+                                <rect width="140" height="70" rx="4" fill="#f9fafb" stroke="#e5e7eb"/>
+                                <text x="8" y="16" font-size="8" fill="#6b7280">영업이익</text>
+                                <text x="8" y="34" font-size="16" font-weight="bold" fill="#111827">₩1.8조</text>
+                                <text x="8" y="46" font-size="8" fill="#22c55e">▲ 12.5% YoY</text>
+                            </g>
+                            <!-- 차트 영역 -->
+                            <g transform="translate(350, 90)">
+                                <rect width="400" height="250" rx="4" fill="#f8fafc" stroke="#e5e7eb"/>
+                                <text x="200" y="20" font-size="12" font-weight="bold" text-anchor="middle" fill="#111827">월별 실적 추이</text>
+                                <!-- 막대 차트 -->
+                                <rect x="50" y="180" width="30" height="60" fill="#3b82f6"/>
+                                <rect x="120" y="190" width="30" height="50" fill="#3b82f6"/>
+                                <rect x="190" y="170" width="30" height="70" fill="#3b82f6"/>
+                                <!-- 라벨 -->
+                                <text x="65" y="255" font-size="8" text-anchor="middle" fill="#6b7280">7월</text>
+                                <text x="135" y="255" font-size="8" text-anchor="middle" fill="#6b7280">8월</text>
+                                <text x="205" y="255" font-size="8" text-anchor="middle" fill="#6b7280">9월</text>
+                            </g>
+                            <!-- 인사이트 콜아웃 -->
+                            <g transform="translate(40, 370)">
+                                <rect width="240" height="30" rx="4" fill="#f0fdf4" stroke="#22c55e"/>
+                                <text x="8" y="12" font-size="7" fill="#15803d">주요 성과</text>
+                                <text x="8" y="22" font-size="8" fill="#111827">프리미엄 제품 판매 증가로 수익성 개선</text>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <!-- Step 5: 프롬프트 생성 -->
+                <div class="step-content" id="step5">
+                    <h2>⚡ STEP 5: 프롬프트 엔지니어링</h2>
+                    <p>LLM이 최적의 SVG를 생성할 수 있도록 정교한 프롬프트를 구성합니다.</p>
+                    <div class="demo-output">다음 데이터로 경영진 KPI 대시보드(A1-1)를 생성하세요:
+**레이아웃 요구사항:**
+- viewBox: 0 0 1600 900
+- 헤더(120px): 제목 "2024년 3분기 경영 성과 대시보드" + "2024년 9월 기준"
+- 좌측 L4: KPI 카드 2×2 (각 280×140px)
+- 우측 L8: 월별 콤보차트 (860×520px)
+- 하단: 인사이트 콜아웃 3개
+**KPI 카드 스펙:**
+1. 매출액: ₩12.3조, 목표 대비 +7%, YoY +8.2% (녹색 ▲)
+2. 영업이익: ₩1.8조, 목표 대비 +13%, YoY +12.5% (녹색 ▲)
+3. 순이익: ₩1.2조, 목표 대비 +9%, YoY +9.1% (녹색 ▲)
+4. ROE: 14.2%, 목표 대비 +1.2%p, YoY +1.8%p (녹색 ▲)
+**콤보차트 데이터:**
+- 7월: 매출 ₩4.1조, 영업이익 ₩0.6조
+- 8월: 매출 ₩4.0조, 영업이익 ₩0.5조
+- 9월: 매출 ₩4.2조, 영업이익 ₩0.7조
+**색상 가이드라인:**
+- 양수/목표초과: #22C55E (녹색)
+- 중립/기본: #3B82F6 (파랑)
+- 배경/테두리: #F9FAFB/#E5E7EB
+SVG를 생성하세요.</div>
+                    <div class="analysis-grid">
+                        <div class="analysis-card">
+                            <h4>🎯 프롬프트 최적화</h4>
+                            <ul>
+                                <li>구체적 픽셀 값 명시</li>
+                                <li>색상 코드 정확 지정</li>
+                                <li>데이터 구조화</li>
+                                <li>검증 규칙 포함</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>🔍 Few-Shot Learning</h4>
+                            <ul>
+                                <li>우수 사례 예제</li>
+                                <li>실패 사례 방지</li>
+                                <li>단계별 사고과정</li>
+                                <li>반복 개선 로직</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 6: SVG 출력 -->
+                <div class="step-content" id="step6">
+                    <h2>🎉 STEP 6: 최종 SVG 생성 및 검증</h2>
+                    <p>LLM이 생성한 SVG를 검증하고 파워포인트로 변환합니다.</p>
+                    <div class="analysis-grid">
+                        <div class="analysis-card">
+                            <h4>✅ 품질 검증</h4>
+                            <ul>
+                                <li>XML 구문 유효성</li>
+                                <li>viewBox 형식 확인</li>
+                                <li>그리드 정렬 검사</li>
+                                <li>색상 준수 확인</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>🔄 자동 수정</h4>
+                            <ul>
+                                <li>접근성 개선</li>
+                                <li>브랜드 가이드 적용</li>
+                                <li>데이터 무결성 검증</li>
+                                <li>반복 개선</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>📊 파워포인트 변환</h4>
+                            <ul>
+                                <li>고해상도 PNG 변환</li>
+                                <li>편집 가능 요소 추출</li>
+                                <li>스피커 노트 생성</li>
+                                <li>애니메이션 추가</li>
+                            </ul>
+                        </div>
+                        <div class="analysis-card">
+                            <h4>🚀 배포 준비</h4>
+                            <ul>
+                                <li>템플릿 저장</li>
+                                <li>데이터 연동 설정</li>
+                                <li>자동화 스크립트</li>
+                                <li>품질 모니터링</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="svg-preview">
+                        <div style="text-align: center; color: #22c55e; font-size: 3rem; margin: 50px 0;">
+                            ✅
+                        </div>
+                        <div style="text-align: center;">
+                            <h3 style="color: #1f2937; margin-bottom: 10px;">SVG 생성 완료!</h3>
+                            <p style="color: #6b7280;">맥킨지/딜로이트 수준의 전문적인 대시보드가 생성되었습니다.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="controls">
+                <button class="btn btn-secondary" id="prevBtn" onclick="previousStep()">← 이전</button>
+                <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">다음 →</button>
+                <button class="btn btn-primary" id="startOver" onclick="startOver()" style="display: none;">🔄 처음부터</button>
+            </div>
+        </div>
+        <!-- 하단 정보 -->
+        <div class="workflow-container">
+            <div class="feature-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">🎯</div>
+                    <h4>정확한 분류</h4>
+                    <p>25가지 문서 타입 자동 매핑</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">⚡</div>
+                    <h4>빠른 생성</h4>
+                    <p>30초 내 전문 시각화 완성</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🎨</div>
+                    <h4>일관된 디자인</h4>
+                    <p>맥킨지/딜로이트 수준 품질</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🔧</div>
+                    <h4>편집 용이</h4>
+                    <p>파워포인트 완벽 호환</p>
+                </div>
+            </div>
+        </div>
+        <!-- 푸터 정보 -->
+        <div class="footer-info">
+            <h3>🚀 추가 리소스</h3>
+            <p>Text to SVG 워크플로우를 완전히 마스터하는 데 필요한 모든 자료들</p>
+            <div class="footer-links">
+                <a href="#" class="footer-link">📄 상세 교육자료</a>
+                <a href="#" class="footer-link">💻 Jupyter Notebook</a>
+                <a href="#" class="footer-link">📊 파워포인트 자료</a>
+                <a href="#" class="footer-link">🤗 GitHub 저장소</a>
+            </div>
+            <p style="margin-top: 20px; font-size: 0.9rem; opacity: 0.8;">
+                © 2024 Text to SVG 워크플로우 마스터 | Hugging Face Space에서 호스팅
+            </p>
+        </div>
+    </div>
+    <script>
+        let currentStep = 1;
+        const totalSteps = 6;
+        function updateProgress() {
+            const progressPercent = (currentStep / totalSteps) * 100;
+            document.getElementById('progressBar').style.width = progressPercent + '%';
+        }
+        function updateStepDisplay() {
+            // 모든 단계 비활성화
+            document.querySelectorAll('.step').forEach(step => {
+                step.classList.remove('active', 'completed');
+            });
+            document.querySelectorAll('.step-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            // 현재 단계 활성화
+            document.querySelector(`[data-step="${currentStep}"]`).classList.add('active');
+            document.getElementById(`step${currentStep}`).classList.add('active');
+            // 완료된 단계 표시
+            for (let i = 1; i < currentStep; i++) {
+                document.querySelector(`[data-step="${i}"]`).classList.add('completed');
+            }
+            // 버튼 상태 업데이트
+            document.getElementById('prevBtn').style.display = currentStep === 1 ? 'none' : 'inline-flex';
+            document.getElementById('nextBtn').style.display = currentStep === totalSteps ? 'none' : 'inline-flex';
+            document.getElementById('startOver').style.display = currentStep === totalSteps ? 'inline-flex' : 'none';
+            updateProgress();
+        }
+        function nextStep() {
+            if (currentStep < totalSteps) {
+                currentStep++;
+                updateStepDisplay();
+            }
+        }
+        function previousStep() {
+            if (currentStep > 1) {
+                currentStep--;
+                updateStepDisplay();
+            }
+        }
+        function startOver() {
+            currentStep = 1;
+            updateStepDisplay();
+        }
+        // 단계 클릭 이벤트
+        document.querySelectorAll('.step').forEach(step => {
+            step.addEventListener('click', function() {
+                const stepNumber = parseInt(this.getAttribute('data-step'));
+                if (stepNumber <= currentStep + 1) { // 다음 단계까지만 허용
+                    currentStep = stepNumber;
+                    updateStepDisplay();
+                }
+            });
+        });
+        // 키보드 네비게이션
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'ArrowRight' && currentStep < totalSteps) {
+                nextStep();
+            } else if (event.key === 'ArrowLeft' && currentStep > 1) {
+                previousStep();
+            }
+        });
+        // 초기 설정
+        updateStepDisplay();
+        // 페이지 로드 시 환영 메시지
+        window.addEventListener('load', function() {
+            console.log('🤗 Hugging Face Space에서 Text to SVG 워크플로우 마스터를 시작합니다!');
+        });
+    </script>
+</body>
+</html>