Update app.py

app.py

@@ -3,55 +3,94 @@ import json
 import numpy as np
 import librosa
 from datetime import datetime
-from flask import Flask, send_from_directory, render_template
 import gradio as gr
 from transformers import pipeline
 import requests
+import base64
 from dotenv import load_dotenv
 
 # 환경변수 로드
 load_dotenv()
 
+# 필요한 디렉토리 생성
+REQUIRED_DIRS = ['static', 'assets', 'data', 'generated_images', 'templates']
+for directory in REQUIRED_DIRS:
+    os.makedirs(directory, exist_ok=True)
+
+# 필요한 파일 경로 정의
+REQUIRED_FILES = {
+    'static/main-image.png': '메인 이미지',
+    'static/DIGITAL_GUTPAN_LOGO_m.png': '모바일 로고',
+    'static/DIGITAL_GUTPAN_LOGO_w.png': '데스크톱 로고',
+    'assets/main_music.mp3': '배경 음악'
+}
+
+# 파일 체크 함수
+def check_required_files():
+    missing_files = []
+    for file_path, description in REQUIRED_FILES.items():
+        if not os.path.exists(file_path):
+            missing_files.append(f"{description} ({file_path})")
+    return missing_files
+
+# AI 모델 초기화
+try:
+    speech_recognizer = pipeline(
+        "automatic-speech-recognition",
+        model="kresnik/wav2vec2-large-xlsr-korean"
+    )
+    text_analyzer = pipeline(
+        "sentiment-analysis",
+        model="nlptown/bert-base-multilingual-uncased-sentiment"
+    )
+    print("✅ AI 모델 초기화 성공")
+except Exception as e:
+    print(f"❌ AI 모델 초기화 실패: {e}")
+    speech_recognizer = None
+    text_analyzer = None
+
+# API 설정
+HF_API_TOKEN = os.getenv("roots", "")
+if not HF_API_TOKEN:
+    print("Warning: HuggingFace API token not found. Some features may be limited.")
+
+API_URL = "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0"
+headers = {"Authorization": f"Bearer {HF_API_TOKEN}"} if HF_API_TOKEN else {}
+
 # 상수 정의
 WELCOME_MESSAGE = """
 # 디지털 굿판에 오신 것을 환영합니다
 
 이곳은 현대 도시 속에서 잊혀진 전통 굿의 정수를 담아낸 디지털 의례의 공간입니다. 
 이곳에서는 사람들의 목소리와 감정을 통해 영적 교감을 나누고, 자연과 도시의 에너지가 연결됩니다.
-
 """
 
 ONCHEON_STORY = """
-## 생명의 공간 ‘온천천’ 🌌
-
-온천천의 물줄기는 신성한 금샘에서 시작됩니다. 금샘은 생명과 창조의 원천이며, 천상의 생명이 지상에서 숨을 틔우는 자리입니다. 
+## 생명의 공간 '온천천' 🌌
 
-도시의 소음 속에서도 신성한 생명력을 느껴보세요. 이곳에서 영적인 교감을 경험하며, 자연과 하나 되는 순간을 맞이해 보시기 바랍니다
- 
-이 프로젝트는 부산광역시 동래구 ‘온천장역’ 에서 금정구 ‘장전역’을 잇는 구간의 온천천 산책로의 사운드 스케이프를  기반으로 제작 되었습니다.
+온천천의 물줄기는 신성한 금샘에서 시작됩니다. 금샘은 생명과 창조의 원천이며, 
+천상의 생명이 지상에서 숨을 틔우는 자리입니다. 
 
-산책로를 따라 걸으며 본 프로젝트 체험 시 보다 몰입된 경험이 가능합니다.  
-"""
+도시의 소음 속에서도 신성한 생명력을 느껴보세요. 이곳에서 영적인 교감을 경험하며, 
+자연과 하나 되는 순간을 맞이해 보시기 바랍니다.
 
-# Flask 앱 초기화
-app = Flask(__name__)
+이 프로젝트는 부산광역시 동래구 '온천장역'에서 금정구 '장전역'을 잇는 구간의 
+온천천 산책로의 사운드스케이프를 기반으로 제작되었습니다.
 
-# 환경변수 로드
-load_dotenv()
-
-# Flask 라우트
-@app.route('/static/<path:path>')
-def serve_static(path):
-    return send_from_directory('static', path)
-
-@app.route('/assets/<path:path>')
-def serve_assets(path):
-    return send_from_directory('assets', path)
-
-@app.route('/wishes/<path:path>')
-def serve_wishes(path):
-    return send_from_directory('data/wishes', path)
+산책로를 따라 걸으며 본 프로젝트 체험 시 보다 몰입된 경험이 가능합니다.
+"""
 
+# 초기 상태 정의
+INITIAL_STATE = {
+    "user_name": "",
+    "baseline_features": None,
+    "reflections": [],
+    "wish": None,
+    "final_prompt": "",
+    "image_path": None,
+    "current_tab": 0,
+    "audio_playing": False
+}
 
 class SimpleDB:
     def __init__(self, reflections_path="data/reflections.json", wishes_path="data/wishes.json"):
@@ -75,14 +114,12 @@ class SimpleDB:
     def save_reflection(self, name, reflection, sentiment, timestamp=None):
         if timestamp is None:
             timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-        
         reflection_data = {
             "timestamp": timestamp,
             "name": name,
             "reflection": reflection,
             "sentiment": sentiment
         }
-        
         self.reflections.append(reflection_data)
         self._save_json(self.reflections_path, self.reflections)
         return True
@@ -113,35 +150,8 @@ class SimpleDB:
         return sorted(self.reflections, key=lambda x: x["timestamp"], reverse=True)
 
     def get_all_wishes(self):
-        return self.wishes
-
-# API 설정
-HF_API_TOKEN = os.getenv("roots", "")
-if not HF_API_TOKEN:
-    print("Warning: HuggingFace API token not found. Some features may be limited.")
-
-API_URL = "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0"
-headers = {"Authorization": f"Bearer {HF_API_TOKEN}"} if HF_API_TOKEN else {}
-
-# AI 모델 초기화
-try:
-    speech_recognizer = pipeline(
-        "automatic-speech-recognition",
-        model="kresnik/wav2vec2-large-xlsr-korean"
-    )
-    text_analyzer = pipeline(
-        "sentiment-analysis",
-        model="nlptown/bert-base-multilingual-uncased-sentiment"
-    )
-except Exception as e:
-    print(f"Error initializing AI models: {e}")
-    speech_recognizer = None
-    text_analyzer = None
+        return sorted(self.wishes, key=lambda x: x["timestamp"], reverse=True)
 
-# 필요한 디렉토리 생성
-os.makedirs("generated_images", exist_ok=True)
-
-# 음성 분석 관련 함수들
 def calculate_baseline_features(audio_data):
     try:
         if isinstance(audio_data, tuple):
@@ -203,7 +213,6 @@ def map_acoustic_to_emotion(features, baseline_features=None):
         "characteristics": []
     }
 
-    # 감정 매핑 로직
     if energy_norm > 70:
         if tempo_norm > 0.6:
             emotions["primary"] = "기쁨/열정"
@@ -262,6 +271,7 @@ def analyze_voice(audio_data, state):
             return state, "음성 분석에 실패했습니다.", "", "", ""
 
         # 음성 인식
+        text = "음성 인식 모델을 불러올 수 없습니다."
         if speech_recognizer:
             try:
                 transcription = speech_recognizer({"sampling_rate": sr, "raw": y.astype(np.float32)})
@@ -269,24 +279,20 @@ def analyze_voice(audio_data, state):
             except Exception as e:
                 print(f"Speech recognition error: {e}")
                 text = "음성 인식 실패"
-        else:
-            text = "음성 인식 모델을 불러올 수 없습니다."
 
         # 음성 감정 분석
         voice_emotion = map_acoustic_to_emotion(acoustic_features, state.get("baseline_features"))
 
         # 텍스트 감정 분석
+        text_sentiment = {"label": "unknown", "score": 0.0}
+        text_result = "텍스트 감정 분석을 수행할 수 없습니다."
         if text_analyzer and text:
             try:
                 text_sentiment = text_analyzer(text)[0]
                 text_result = f"텍스트 감정 분석: {text_sentiment['label']} (점수: {text_sentiment['score']:.2f})"
             except Exception as e:
                 print(f"Text analysis error: {e}")
-                text_sentiment = {"label": "unknown", "score": 0.0}
                 text_result = "텍스트 감정 분석 실패"
-        else:
-            text_sentiment = {"label": "unknown", "score": 0.0}
-            text_result = "텍스트 감정 분석을 수행할 수 없습니다."
 
         voice_result = (
             f"음성 감정: {voice_emotion['primary']} "
@@ -309,7 +315,6 @@ def analyze_voice(audio_data, state):
         print(f"Error in analyze_voice: {str(e)}")
         return state, f"오류 발생: {str(e)}", "", "", ""
 
-
 def generate_detailed_prompt(text, emotions, text_sentiment):
     emotion_colors = {
         "기쁨/열정": "밝은 노랑과 따뜻한 주황색",
@@ -333,13 +338,15 @@ def generate_detailed_prompt(text, emotions, text_sentiment):
         "차분/진지": "균형잡힌 수직선과 안정적인 구조"
     }
 
-    prompt = f"minimalistic abstract art, {emotion_colors.get(emotions['primary'], '자연스러운 색상')} color scheme, "
-    prompt += f"{abstract_elements.get(emotions['primary'], '유기적 형태')}, "
-    prompt += "korean traditional patterns, ethereal atmosphere, sacred geometry, "
-    prompt += "flowing energy, mystical aura, no human figures, no faces, "
-    prompt += "digital art, high detail, luminescent effects. "
-    prompt += "negative prompt: photorealistic, human, face, figurative, text, letters, "
-    prompt += "--ar 2:3 --s 750 --q 2"
+    prompt = (
+        f"minimalistic abstract art, {emotion_colors.get(emotions['primary'], '자연스러운 색상')} color scheme, "
+        f"{abstract_elements.get(emotions['primary'], '유기적 형태')}, "
+        "korean traditional patterns, ethereal atmosphere, sacred geometry, "
+        "flowing energy, mystical aura, no human figures, no faces, "
+        "digital art, high detail, luminescent effects. "
+        "negative prompt: photorealistic, human, face, figurative, text, letters, "
+        "--ar 2:3 --s 750 --q 2"
+    )
 
     return prompt
 
@@ -378,453 +385,362 @@ def generate_image_from_prompt(prompt):
     except Exception as e:
         print(f"Error generating image: {str(e)}")
         return None
-        
-def create_pwa_files():
-    """PWA 필요 파일들 생성"""
-    # manifest.json 생성
-    manifest_path = 'static/manifest.json'
-    if not os.path.exists(manifest_path):
-        manifest_data = {
-            "name": "디지털 굿판",
-            "short_name": "디지털 굿판",
-            "description": "현대 도시 속 디지털 의례 공간",
-            "start_url": "/",
-            "display": "standalone",
-            "background_color": "#ffffff",
-            "theme_color": "#000000",
-            "orientation": "portrait",
-            "icons": [
-                {
-                    "src": "/static/icons/icon-72x72.png",
-                    "sizes": "72x72",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-96x96.png",
-                    "sizes": "96x96",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-128x128.png",
-                    "sizes": "128x128",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-144x144.png",
-                    "sizes": "144x144",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-152x152.png",
-                    "sizes": "152x152",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-192x192.png",
-                    "sizes": "192x192",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-384x384.png",
-                    "sizes": "384x384",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                },
-                {
-                    "src": "/static/icons/icon-512x512.png",
-                    "sizes": "512x512",
-                    "type": "image/png",
-                    "purpose": "any maskable"
-                }
-            ]
-        }
-        with open(manifest_path, 'w', encoding='utf-8') as f:
-            json.dump(manifest_data, f, ensure_ascii=False, indent=2)
-
-    # service-worker.js 생성
-    sw_path = 'static/service-worker.js'
-    if not os.path.exists(sw_path):
-        with open(sw_path, 'w', encoding='utf-8') as f:
-            f.write('''
-// 캐시 이름 설정
-const CACHE_NAME = 'digital-gutpan-v1';
-
-// 캐시할 파일 목록
-const urlsToCache = [
-  '/',
-  '/static/icons/icon-72x72.png',
-  '/static/icons/icon-96x96.png',
-  '/static/icons/icon-128x128.png',
-  '/static/icons/icon-144x144.png',
-  '/static/icons/icon-152x152.png',
-  '/static/icons/icon-192x192.png',
-  '/static/icons/icon-384x384.png',
-  '/static/icons/icon-512x512.png',
-  '/assets/main_music.mp3'
-];
-
-// 서비스 워커 설치 시
-self.addEventListener('install', event => {
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(cache => cache.addAll(urlsToCache))
-      .then(() => self.skipWaiting())
-  );
-});
-
-// 서비스 워커 활성화 시
-self.addEventListener('activate', event => {
-  event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames.map(cacheName => {
-          if (cacheName !== CACHE_NAME) {
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    }).then(() => self.clients.claim())
-  );
-});
-
-// 네트워크 요청 처리
-self.addEventListener('fetch', event => {
-  event.respondWith(
-    caches.match(event.request)
-      .then(response => {
-        if (response) {
-          return response;
-        }
-        return fetch(event.request);
-      })
-  );
-});
-            '''.strip())
-
-    # index.html 파일에 화면 꺼짐 방지 스크립트 추가
-    index_path = 'templates/index.html'
-    if not os.path.exists(index_path):
-        with open(index_path, 'w', encoding='utf-8') as f:
-            f.write('''<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>디지털 굿판</title>
-    <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#000000">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="디지털 굿판">
-    <link rel="apple-touch-icon" href="/static/icons/icon-152x152.png">
-    <script>
-        // 화면 꺼짐 방지
-        async function preventSleep() {
-            try {
-                if ('wakeLock' in navigator) {
-                    const wakeLock = await navigator.wakeLock.request('screen');
-                    console.log('화면 켜짐 유지 ��성화');
-                    
-                    document.addEventListener('visibilitychange', async () => {
-                        if (document.visibilityState === 'visible') {
-                            await preventSleep();
-                        }
-                    });
-                }
-            } catch (err) {
-                console.log('화면 켜짐 유지 실패:', err);
-            }
-        }
 
-        // 서비스 워커 등록
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', async () => {
-                try {
-                    const registration = await navigator.serviceWorker.register('/service-worker.js');
-                    console.log('ServiceWorker 등록 성공:', registration.scope);
-                    await preventSleep();
-                } catch (err) {
-                    console.log('ServiceWorker 등록 실패:', err);
-                }
-            });
-        }
-    </script>
-</head>
-<body>
-    <div id="gradio-app"></div>
-</body>
-</html>''')
-
-def safe_state_update(state, updates):
+def encode_image_to_base64(image_path):
     try:
-        new_state = {**state, **updates}
-        # 중요 상태값 검증
-        if "user_name" in updates:
-            new_state["user_name"] = str(updates["user_name"]).strip() or "익명"
-        if "baseline_features" in updates:
-            if updates["baseline_features"] is None:
-                return state  # baseline이 None이면 상태 업데이트 하지 않음
-        return new_state
-    except Exception as e:
-        print(f"State update error: {e}")
-        return state
-
-def create_interface():
-    db = SimpleDB()  # DB 객체 초기화 추가
-    import base64
-    
-    # initial_state 정의
-    initial_state = {
-        "user_name": "",
-        "baseline_features": None,
-        "reflections": [],
-        "wish": None,
-        "final_prompt": "",
-        "image_path": None,
-        "current_tab": 0,
-        "audio_playing": False
-    }
-    
-    def encode_image_to_base64(image_path):
-        try:
-            with open(image_path, "rb") as img_file:
-                return base64.b64encode(img_file.read()).decode()
-        except Exception as e:
-            print(f"이미지 로딩 에러 ({image_path}): {e}")
+        if not os.path.exists(image_path):
+            print(f"Warning: Image file not found at {image_path}")
             return ""
-    
-    # 이미지 인코딩
-    mobile_logo = encode_image_to_base64("static/DIGITAL_GUTPAN_LOGO_m.png")
-    desktop_logo = encode_image_to_base64("static/DIGITAL_GUTPAN_LOGO_w.png")
-    main_image = encode_image_to_base64("static/main-image.png")
+        with open(image_path, "rb") as img_file:
+            return base64.b64encode(img_file.read()).decode()
+    except Exception as e:
+        print(f"Error encoding image {image_path}: {e}")
+        return ""
+
+def create_html_templates(mobile_logo, desktop_logo, main_image):    
+    logo_html = f"""
+    <div class="logo-container">
+        <img class="mobile-logo" src="data:image/png;base64,{mobile_logo}" alt="디지털 굿판 로고 모바일">
+        <img class="desktop-logo" src="data:image/png;base64,{desktop_logo}" alt="디지털 굿판 로고 데스크톱">
+    </div>
+    """
 
-    if not mobile_logo or not desktop_logo:
-        logo_html = """
-            <div style="text-align: center; padding: 20px;">
-                <h1 style="font-size: 24px;">디지털 굿판</h1>
-            </div>
-        """
-    else:
-        logo_html = f"""
-            <img class="mobile-logo" src="data:image/png;base64,{mobile_logo}" alt="디지털 굿판 로고 모바일">
-            <img class="desktop-logo" src="data:image/png;base64,{desktop_logo}" alt="디지털 굿판 로고 데스크톱">
-        """
-    
-    # HTML5 Audio Player 템플릿
-    main_image_html = """
-     <div class="main-image-container">
+    main_image_html = f"""
+    <div class="main-image-container">
         <img src="data:image/png;base64,{main_image}" alt="디지털 굿판 메인 이미지" class="main-image">
-     </div>
-            """
-    AUDIO_PLAYER_HTML = """
+    </div>
+    """
+
+    audio_player_html = """
     <div class="audio-player-container">
         <audio controls class="audio-player">
             <source src="/assets/main_music.mp3" type="audio/mpeg">
             브라우저가 오디오 태그를 지원하지 않습니다.
         </audio>
     </div>
-    <style>
-        .audio-player-container {
-            width: 100%;
-            max-width: 800px;
-            margin: 20px auto;
-            text-align: center;
-        }
-        .audio-player {
-            width: 100%;
-            max-width: 300px;
-            margin: 0 auto;
-        }
-        @media (max-width: 600px) {
-            .audio-player {
-                width: 100%;
-            }
-        }
     """
 
-    css = """
-        /* 전체 컨테이너 width 제한 */
-        .gradio-container {
-            margin: 0 auto !important;
-            max-width: 800px !important;
-            padding: 1rem !important;
-        }
+    return logo_html, main_image_html, audio_player_html
+
+
+# CSS 스타일 정의
+STYLE_CSS = """
+/* 기본 컨테이너 스타일링 */
+.gradio-container {
+    margin: 0 auto !important;
+    max-width: 800px !important;
+    padding: 1rem !important;
+}
+
+/* 이미지 컨테이너 스타일링 */
+.main-image-container {
+    width: 100%;
+    margin: 0 auto 2rem auto;
+    text-align: center;
+}
+
+.main-image {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
+}
+
+/* 로고 스타일링 */
+.logo-container { 
+    padding: 20px 0;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+/* 오디오 플레이어 스타일링 */
+.audio-player-container {
+    width: 100%;
+    max-width: 800px;
+    margin: 20px auto;
+    text-align: center;
+}
+
+.audio-player {
+    width: 100%;
+    max-width: 300px;
+    margin: 0 auto;
+    border-radius: 8px;
+}
+
+/* 상태 메시지 박스 스타일링 */
+.blessing-status-box {
+    min-height: 200px !important;
+    max-height: 300px !important;
+    overflow-y: auto !important;
+    padding: 15px !important;
+    border: 1px solid #ddd !important;
+    border-radius: 8px !important;
+    background-color: #f8f9fa !important;
+    margin: 10px 0 !important;
+}
+
+.blessing-status-box p {
+    margin: 0 0 10px 0 !important;
+    line-height: 1.5 !important;
+}
+
+/* 버튼 스타일링 */
+.gradio-button {
+    transition: all 0.3s ease;
+    border-radius: 8px !important;
+    width: 100% !important;
+    margin: 5px 0 !important;
+    min-height: 44px !important;
+}
+
+.gradio-button:active {
+    transform: scale(0.98);
+}
+
+/* 데이터프레임 스타일링 */
+.gradio-dataframe {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* 모바일 뷰 (600px 이하) */
+@media (max-width: 600px) {
+    .mobile-logo { 
+        display: none !important; 
+    }
+    .desktop-logo {
+        display: block !important;
+        width: 100%;
+        height: auto;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    .main-image {
+        width: 100%;
+        max-width: 100%;
+    }
+    .container { 
+        padding: 10px !important; 
+    }
+    .gradio-row { 
+        flex-direction: column !important;
+        gap: 10px !important;
+    }
+    .audio-player {
+        width: 100%;
+    }
+}
 
-        /* 모바일 뷰 */
-        @media (max-width: 600px) {
-            .mobile-logo { 
-                display: none !important; 
-            }
-            .desktop-logo {
-                display: block !important;
-                width: 100%;
-                height: auto;
-                max-width: 800px;
-                margin: 0 auto;
-            }
-            .main-image {
-                width: 100%;
-                max-width: 100%;
-            }
-        }
-        
-        /* 데스크톱 뷰 (601px 이상) */
-        @media (min-width: 601px) {
-            .main-image {
-                width: 600px;
-                max-width: 600px;
-            }
-            .container { padding: 10px !important; }
-            .gradio-row { 
-                flex-direction: column !important;
-                gap: 10px !important;
-            }
-            .gradio-button { 
-                width: 100% !important; 
-                margin: 5px 0 !important;
-                min-height: 44px !important;
-            }
-            .gradio-textbox { width: 100% !important; }
-            .gradio-audio { width: 100% !important; }
-            .gradio-image { width: 100% !important; }
-            #audio-recorder { width: 100% !important; }
-            #result-image { width: 100% !important; }
-            .gradio-dataframe {
-                overflow-x: auto !important;
-                max-width: 100% !important;
-            }
-        }
+/* 데스크톱 뷰 (601px 이상) */
+@media (min-width: 601px) {
+    .desktop-logo { 
+        display: none !important; 
+    }
+    .mobile-logo {
+        display: block !important;
+        width: 100% !important;
+        height: auto !important;
+        max-width: 300px !important;
+        margin: 0 auto !important;
+    }
+    .main-image {
+        width: 600px;
+        max-width: 600px;
+    }
+    .gradio-row {
+        gap: 20px !important;
+    }
+    .gradio-row > .gradio-column {
+        flex: 1 !important;
+        min-width: 0 !important;
+    }
+}
+
+/* 컴포넌트 간격 조정 */
+.gradio-column > *:not(:last-child) {
+    margin-bottom: 1rem !important;
+}
+"""
+
+def create_interface():
+    # DB 초기화
+    db = SimpleDB()
+    
+    # 이미지 인코딩
+    mobile_logo = encode_image_to_base64("static/DIGITAL_GUTPAN_LOGO_m.png")
+    desktop_logo = encode_image_to_base64("static/DIGITAL_GUTPAN_LOGO_w.png")
+    main_image = encode_image_to_base64("static/main-image.png")
+    
+    # HTML 템플릿 생성
+    logo_html, main_image_html, audio_player_html = create_html_templates(
+        mobile_logo, desktop_logo, main_image
+    )
+
+    # 이벤트 핸들러들
+    def handle_name_submit(name, state):
+        if not name.strip():
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                state
+            )
+        state = safe_state_update(state, {"user_name": name})
+        return (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            state
+        )
+
+    def handle_continue():
+        return (
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(visible=False)
+        )
+    
+    def handle_blessing_complete(audio, state):
+        if audio is None:
+            return state, "음성을 먼저 녹음해주세요.", gr.update(visible=True), gr.update(visible=False)
         
-        /* 데스크톱 뷰 */
-        @media (min-width: 601px) {
-            .logo-container { 
-                padding: 20px 0;
-                width: 100%;
-                max-width: 800px;
-                margin: 0 auto;
-            }
-            .desktop-logo { 
-                display: none !important; 
-            }
-            .mobile-logo {
-                display: block !important;
-                width: 100% !important;
-                height: auto !important;
-                max-width: 300px !important;
-                margin: 0 auto !important;
-            }
-            /* 데스크탑에서 2단 컬럼 레이아웃 보완 */
-            .gradio-row {
-                gap: 20px !important;
-            }
-            .gradio-row > .gradio-column {
-                flex: 1 !important;
-                min-width: 0 !important;
-            }
-            .main-image-container {
-                width: 100%;
-                margin: 0 auto 2rem auto;
-                text-align: center;
-            }
+        try:
+            sr, y = audio
+            features = calculate_baseline_features((sr, y))
             
-            .main-image {
-                width: 100%;
-                height: auto;
-                max-width: 100%;
-                display: block;
-                margin: 0 auto;
-            }
-        }
+            if features:
+                state = safe_state_update(state, {"baseline_features": features})
+                return (
+                    state,
+                    "분석이 완료되었습니다. 다음 단계로 진행해주세요.",
+                    gr.update(visible=False),
+                    gr.update(visible=True)
+                )
+            
+            return (
+                state,
+                "분석에 실패했습니다. 다시 시도해주세요.",
+                gr.update(visible=True),
+                gr.update(visible=False)
+            )
+            
+        except Exception as e:
+            return state, f"오류 발생: {str(e)}", gr.update(visible=True), gr.update(visible=False)
     
-        /* 전반적인 UI 개선 */
-        .gradio-button {
-            transition: all 0.3s ease;
-            border-radius: 8px !important;
-        }
-        .gradio-button:active {
-            transform: scale(0.98);
-        }
-        
-        /* 컴포넌트 간격 조정 */
-        .gradio-column > *:not(:last-child) {
-            margin-bottom: 1rem !important;
-        }
-        
-        /* 데이터프레임 스타일링 */
-        .gradio-dataframe {
-            border: 1px solid #e0e0e0;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        
-        /* 오디오 플레이어 컨테이너 */
-        .audio-player-container {
-            max-width: 800px;
-            margin: 20px auto;
-            padding: 0 1rem;
-        }
-        .audio-player {
-            margin: 20px auto;
-            width: 100%;
-            max-width: 300px;
-        
-        /* 탭 스타일링 */
-        .tabs {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        
-        /* 마크다운 컨텐츠 */
-        .markdown-content {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 0 1rem;
-        }
+    def handle_enter():
+        return gr.update(selected=1)
+
+    def handle_save_reflection(text, state):
+        if not text.strip():
+            return state, []
         
-        /* 이미지 컨테이너 */
-        .gradio-image {
-            border-radius: 8px;
-            overflow: hidden;
-            max-width: 800px;
-            margin: 0 auto;
-        }
+        try:
+            current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+            name = state.get("user_name", "익명")
+            
+            if text_analyzer:
+                sentiment = text_analyzer(text)[0]
+                sentiment_text = f"{sentiment['label']} ({sentiment['score']:.2f})"
+            else:
+                sentiment_text = "분석 불가"
+    
+            db.save_reflection(name, text, sentiment_text)
+            return state, [[current_time, text, sentiment_text]]
+                
+        except Exception as e:
+            print(f"Error saving reflection: {e}")
+            return state, []
 
-        .blessing-status-box {
-            min-height: 200px !important;
-            max-height: 300px !important;
-            overflow-y: auto !important;
-            padding: 15px !important;
-            border: 1px solid #ddd !important;
-            border-radius: 8px !important;
-            background-color: #f8f9fa !important;
-            margin: 10px 0 !important;
-        }
+    def handle_save_wish(text, state):
+        if not text.strip():
+            return "소원을 입력해주세요.", []
         
-        .blessing-status-box p {
-            margin: 0 0 10px 0 !important;
-            line-height: 1.5 !important;
-        }
-    """
+        try:
+            name = state.get("user_name", "익명")
+            db.save_wish(name, text)
+            wishes = db.get_all_wishes()
+            wish_display_data = [
+                [wish["timestamp"], wish["wish"], wish["name"]]
+                for wish in wishes
+            ]
+            return "소원이 저장되었습니다.", wish_display_data
+        except Exception as e:
+            print(f"Error saving wish: {e}")
+            return "오류가 발생했습니다.", []
+
+    def safe_analyze_voice(audio_data, state):
+        if audio_data is None:
+            return (
+                state,
+                "음성을 먼저 녹음해주세요.",
+                "",
+                "",
+                "",
+                "분석 준비 중..."
+            )
+    
+        try:
+            status_msg = "음성 분석 중..."
+            sr, y = audio_data
+            
+            if len(y) == 0:
+                return (
+                    state,
+                    "음성이 감지되지 않았습니다.",
+                    "",
+                    "",
+                    "",
+                    "분석 실패"
+                )
+    
+            acoustic_features = calculate_baseline_features((sr, y))
+            new_state, text, voice_result, text_result, prompt = analyze_voice(audio_data, state)
+    
+            return (
+                new_state,
+                text,
+                voice_result,
+                text_result,
+                prompt,
+                "분석 완료"
+            )
+    
+        except Exception as e:
+            print(f"Voice analysis error: {str(e)}")
+            return (
+                state,
+                "음성 분석 중 오류가 발생했습니다. 다시 시도해주세요.",
+                "",
+                "",
+                "",
+                "분석 실패"
+            )
 
-    with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
-        state = gr.State(value=initial_state)
+    # Gradio 인터페이스 구성
+    with gr.Blocks(theme=gr.themes.Soft(), css=STYLE_CSS) as app:
+        # 상태 관리
+        state = gr.State(value=INITIAL_STATE)
         processing_status = gr.State("")   
+
+        # 로고 영역
         with gr.Column(elem_classes="logo-container"):
-            gr.HTML(f"""
-                <img class="mobile-logo" src="data:image/png;base64,{mobile_logo}" alt="디지털 굿판 로고 모바일">
-                <img class="desktop-logo" src="data:image/png;base64,{desktop_logo}" alt="디지털 굿판 로고 데스크톱">
-            """)
+            gr.HTML(logo_html)
 
+        # 탭 구성
         with gr.Tabs(selected=0) as tabs:
-            # 입장 탭 (축원 포함)
+            # 입장 탭
             with gr.TabItem("입장") as tab_entrance:
-                gr.HTML(main_image_html) 
+                # 메인 이미지 표시
+                gr.HTML(main_image_html)
+                
                 # 1단계: 첫 화면
                 welcome_section = gr.Column(visible=True)
                 with welcome_section:
@@ -848,7 +764,6 @@ def create_interface():
                     gr.Markdown("### 축원의식을 시작하겠습니다")
                     gr.Markdown("'명짐 복짐 짊어지고 안가태평하시기를 비도발원 축원 드립니다'")
                     
-                    # 축원 문장 녹음하기
                     baseline_audio = gr.Audio(
                         label="축원 문장 녹음하기",
                         sources=["microphone"],
@@ -856,18 +771,15 @@ def create_interface():
                         streaming=False
                     )
                     
-                    # elem_classes를 사용하여 스타일 적용
                     blessing_status = gr.Markdown(
                         "분석 결과가 여기에 표시됩니다.", 
                         elem_id="blessing-status",
                         elem_classes="blessing-status-box"
                     )
                     
-                    # 상태 분석 및 결과창 구분
                     set_baseline_btn = gr.Button("축원문 분석하기", variant="primary")
                     send_blessing_btn = gr.Button("축원 보내기", variant="secondary", visible=False)
 
-
                 # 4단계: 굿판 입장 안내
                 entry_guide_section = gr.Column(visible=False)
                 with entry_guide_section:
@@ -879,6 +791,7 @@ def create_interface():
                     """)
                     enter_btn = gr.Button("청신 의식 시작하기", variant="primary")
 
+            # 청신 탭
             with gr.TabItem("청신") as tab_listen:
                 gr.Markdown("## 청신 - 소리로 정화하기")
                 gr.Markdown("""
@@ -888,11 +801,8 @@ def create_interface():
                 온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                 """)
                 
-                # 커스텀 오디오 플레이어
-                with gr.Blocks(css=css) as demo:
-                    gr.Markdown("## 온천천의 소리를 들어보세요")
-                    # HTML로 오디오 플레이어를 직접 삽입
-                    gr.HTML(AUDIO_PLAYER_HTML)
+                gr.Markdown("## 온천천의 소리를 들어보세요")
+                gr.HTML(audio_player_html)
                 
                 with gr.Column():
                     reflection_input = gr.Textbox(
@@ -913,7 +823,7 @@ def create_interface():
             # 기원 탭
             with gr.TabItem("기원") as tab_wish:
                 gr.Markdown("## 기원 - 소원을 전해보세요")
-                status_display = gr.Markdown("", visible=False)  # 상태 표시용 컴포넌트
+                status_display = gr.Markdown("", visible=False)
                 
                 with gr.Row():
                     with gr.Column():
@@ -922,7 +832,7 @@ def create_interface():
                             sources=["microphone"],
                             type="numpy",
                             streaming=False,
-                            elem_id="voice-input"  # elem_id 추가
+                            elem_id="voice-input"
                         )
                         with gr.Row():
                             clear_btn = gr.Button("녹음 지우기", variant="secondary")
@@ -955,7 +865,7 @@ def create_interface():
                     label="생성된 이미지",
                     show_download_button=True
                 )
-            
+                
                 gr.Markdown("## 온천천에 전하고 싶은 소원을 남겨주세요")
                 final_reflection = gr.Textbox(
                     label="소원",
@@ -964,9 +874,9 @@ def create_interface():
                 )
                 save_final_btn = gr.Button("소원 전하기", variant="primary")
                 gr.Markdown("""
-💫 여러분의 소원은 11월 25일 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
-따뜻한 마음을 담아 작성해주세요.
-""")
+                💫 여러분의 소원은 11월 25일 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
+                따뜻한 마음을 담아 작성해주세요.
+                """)
                 wishes_display = gr.Dataframe(
                     headers=["시간", "소원", "이름"],
                     label="기록된 소원들",
@@ -974,11 +884,13 @@ def create_interface():
                     interactive=False,
                     wrap=True
                 )
+
+            # 프로젝트 소개 탭
             with gr.TabItem("프로젝트 소개") as tab_intro:
                 gr.HTML(main_image_html)
                 gr.Markdown("""
                 # 디지털 굿판 프로젝트
-                ‘디지털 굿판’은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.
+                '디지털 굿판'은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.
                 
                 본 사업은 전통 굿의 요소와 현대 기술을 결합해 참여자들이 자연과 깊이 연결되며 내면을 탐색하고 치유하는 경험을 제공합니다.
                 
@@ -988,204 +900,15 @@ def create_interface():
                 
                 이 프로젝트는 현대 사회의 삶에 대한 근본적인 질문을 던지며 새로운 문화적 지향점을 모색합니다.
 
-                본 프로젝트에서 기록된 정보 중 ‘송신’ 단계의 ‘소원전하기’를  제외한 모든 과정의 정보는(목소리,감상 등) 별도로 저장되지 않으며 AI 학습이나 외부 공유에 사용되지 않습니다.
+                본 프로젝트에서 기록된 정보 중 '송신' 단계의 '소원전하기'를 제외한 모든 과정의 정보는(목소리,감상 등) 별도로 저장되지 않으며 AI 학습이나 외부 공유에 사용되지 않습니다.
 
                 ## ��레딧
                 - **기획**: 루츠리딤, 전승아
                 - **음악**: 루츠리딤 (이광혁)
                 - **미디어아트**: 송지훈
-                """)                
-
-        # 이벤트 핸들러들
-        def handle_name_submit(name, state):
-            if not name.strip():
-                return (
-                    gr.update(visible=True),
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    state
-                )
-            state = safe_state_update(state, {"user_name": name})
-            return (
-                gr.update(visible=False),
-                gr.update(visible=True),
-                gr.update(visible=False),
-                gr.update(visible=False),
-                state
-            )
-        
-        def handle_continue():
-            return (
-                gr.update(visible=False),
-                gr.update(visible=False),
-                gr.update(visible=True),
-                gr.update(visible=False)
-            )
-        
-        def handle_blessing_complete(audio, state):
-            if audio is None:
-                return state, "음성을 먼저 녹음해주세요.", gr.update(visible=True), gr.update(visible=False)
-        
-            try:
-                status_msg = "축원문 분석 중..."
-                sr, y = audio
-                features = calculate_baseline_features((sr, y))
-                
-                if features:
-                    state = safe_state_update(state, {"baseline_features": features})
-                    status_msg = "분석 완료되었습니다. 축원을 보내세요."
-                    return state, status_msg, gr.update(visible=False), gr.update(visible=True)
-                
-                return state, "분석에 실패했습니다. 다시 시도해주세요.", gr.update(visible=True), gr.update(visible=False)
-            
-            except Exception as e:
-                return state, f"오류 발생: {str(e)}", gr.update(visible=True), gr.update(visible=False)
-        
-        def handle_enter():
-            return gr.update(selected=1)  # 청신 탭으로 이동
-
-        def handle_start():
-            return gr.update(visible=False), gr.update(visible=True)
-
-        def handle_baseline(audio, current_state):
-            if audio is None:
-                return current_state, "음성을 먼저 녹음해주세요.", gr.update(selected=0)
-            
-            try:
-                sr, y = audio
-                y = y.astype(np.float32)
-                features = calculate_baseline_features((sr, y))
-                if features:
-                    current_state = safe_state_update(current_state, {
-                        "baseline_features": features,
-                        "current_tab": 1
-                    })
-                    return current_state, "기준점이 설정되었습니다. 청신 탭으로 이동합니다.", gr.update(selected=1)
-                return current_state, "기준점 설정에 실패했습니다. 다시 시도해주세요.", gr.update(selected=0)
-            except Exception as e:
-                print(f"Baseline error: {str(e)}")
-                return current_state, "오류가 발생했습니다. 다시 시도해주세요.", gr.update(selected=0)
-
-        def handle_save_reflection(text, state):
-            if not text.strip():
-                return state, []
-            
-            try:
-                current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-                name = state.get("user_name", "익명")
-                
-                if text_analyzer:
-                    sentiment = text_analyzer(text)[0]
-                    sentiment_text = f"{sentiment['label']} ({sentiment['score']:.2f})"
-                else:
-                    sentiment_text = "분석 불가"
-        
-                # DB에 저장
-                db.save_reflection(name, text, sentiment_text)
-                
-                # 화면에는 현재 사용자의 입력만 표시
-                return state, [[current_time, text, sentiment_text]]
-        
-            except Exception as e:
-                print(f"Error saving reflection: {e}")
-                return state, []
-
-        def save_reflection_fixed(text, state):
-            if not text.strip():
-                return state, []
-            
-            try:
-                current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-                name = state.get("user_name", "익명")
-                
-                if text_analyzer:
-                    sentiment = text_analyzer(text)[0]
-                    sentiment_text = f"{sentiment['label']} ({sentiment['score']:.2f})"
-                else:
-                    sentiment_text = "분석 불가"
-        
-                # DB에 저장
-                db.save_reflection(name, text, sentiment_text)
-                
-                # 현재 사용자의 감상만 표시
-                return state, [[current_time, text, sentiment_text]]
-                
-            except Exception as e:
-                print(f"Error saving reflection: {e}")
-                return state, []
+                """)
 
-        def handle_save_wish(text, state):
-            if not text.strip():
-                return "소원을 입력해주세요.", []
-            
-            try:
-                name = state.get("user_name", "익명")
-                db.save_wish(name, text)
-                wishes = db.get_all_wishes()
-                wish_display_data = [
-                    [wish["timestamp"], wish["wish"], wish["name"]]
-                    for wish in wishes
-                ]
-                return "소원이 저장되었습니다.", wish_display_data
-            except Exception as e:
-                print(f"Error saving wish: {e}")
-                return "오류가 발생했습니다.", []
-                
-        def safe_analyze_voice(audio_data, state):
-            if audio_data is None:
-                return (
-                    state,
-                    "음성을 먼저 녹음해주세요.",
-                    "",
-                    "",
-                    "",
-                    "분석 준비 중..."
-                )
-        
-            try:
-                # 상태 업데이트
-                status_msg = "음성 분석 중..."
-        
-                # 음성 데이터 전처리
-                sr, y = audio_data
-                if len(y) == 0:
-                    return (
-                        state,
-                        "음성이 감지되지 않았습니다.",
-                        "",
-                        "",
-                        "",
-                        "분석 실패"
-                    )
-        
-                status_msg = "음성 특성 분석 중..."
-                acoustic_features = calculate_baseline_features((sr, y))
-        
-                status_msg = "음성 인식 중..."
-                new_state, text, voice_result, text_result, prompt = analyze_voice(audio_data, state)
-        
-                status_msg = "분석 완료"
-                return (
-                    new_state,
-                    text,
-                    voice_result,
-                    text_result,
-                    prompt,
-                    status_msg
-                )
-        
-            except Exception as e:
-                print(f"Voice analysis error: {str(e)}")
-                return (
-                    state,
-                    "음성 분석 중 오류가 발생했습니다. 다시 시도해주세요.",
-                    "",
-                    "",
-                    "",
-                    "분석 실패"
-                )
-        # 이벤트 연결
+# 이벤트 연결
         name_submit_btn.click(
             fn=handle_name_submit,
             inputs=[name_input, state],
@@ -1200,7 +923,7 @@ def create_interface():
         set_baseline_btn.click(
             fn=handle_blessing_complete,
             inputs=[baseline_audio, state],
-            outputs=[state, blessing_status, blessing_section, entry_guide_section]  # baseline_status -> blessing_status
+            outputs=[state, blessing_status, blessing_section, entry_guide_section]
         )
 
         enter_btn.click(
@@ -1209,7 +932,7 @@ def create_interface():
         )
 
         save_btn.click(
-            fn=save_reflection_fixed,
+            fn=handle_save_reflection,
             inputs=[reflection_input, state],
             outputs=[state, reflections_display]
         )
@@ -1234,86 +957,42 @@ def create_interface():
         save_final_btn.click(
             fn=handle_save_wish,
             inputs=[final_reflection, state],
-            outputs=[blessing_status, wishes_display]  # baseline_status -> blessing_status
+            outputs=[blessing_status, wishes_display]
         )
-        
+
     return app
 
 if __name__ == "__main__":
-    # 서비스 워커 캐시 설정 강화
-    sw_content = """
-    const CACHE_NAME = 'digital-gutpan-v2';
-    const urlsToCache = [
-        '/',
-        '/assets/main_music.mp3',
-        '/static/icons/icon-72x72.png',
-        '/static/icons/icon-96x96.png',
-        '/static/icons/icon-128x128.png',
-        '/static/icons/icon-144x144.png',
-        '/static/icons/icon-152x152.png',
-        '/static/icons/icon-192x192.png',
-        '/static/icons/icon-384x384.png',
-        '/static/icons/icon-512x512.png'
-    ];
-
-    self.addEventListener('install', event => {
-        event.waitUntil(
-            caches.open(CACHE_NAME)
-                .then(cache => {
-                    console.log('Opened cache');
-                    return cache.addAll(urlsToCache);
-                })
-                .then(() => self.skipWaiting())
-        );
-    });
-
-    self.addEventListener('activate', event => {
-        event.waitUntil(
-            caches.keys().then(cacheNames => {
-                return Promise.all(
-                    cacheNames.map(cacheName => {
-                        if (cacheName !== CACHE_NAME) {
-                            return caches.delete(cacheName);
-                        }
-                    })
-                );
-            }).then(() => self.clients.claim())
-        );
-    });
-
-    self.addEventListener('fetch', event => {
-        event.respondWith(
-            caches.match(event.request)
-                .then(response => {
-                    if (response) {
-                        return response;
-                    }
-                    
-                    return fetch(event.request).then(
-                        response => {
-                            if(!response || response.status !== 200 || response.type !== 'basic') {
-                                return response;
-                            }
-                            
-                            const responseToCache = response.clone();
-                            
-                            caches.open(CACHE_NAME)
-                                .then(cache => {
-                                    cache.put(event.request, responseToCache);
-                                });
-                                
-                            return response;
-                        }
-                    );
-                })
-        );
-    });
-    """
+    # 필요한 디렉토리 생성
+    for directory in REQUIRED_DIRS:
+        os.makedirs(directory, exist_ok=True)
+    
+    # 파일 경로 체크
+    print("\n🔍 파일 경로 확인 중...")
+    missing_files = []
+    for file_path, description in REQUIRED_PATHS.items():
+        if not os.path.exists(file_path):
+            missing_files.append(f"{description} ({file_path})")
     
-    # 서비스 워커 파일 생성
-    with open('static/service-worker.js', 'w') as f:
-        f.write(sw_content)
+    if missing_files:
+        print("\n❌ 누락된 파일들:")
+        for file in missing_files:
+            print(f"- {file}")
+    else:
+        print("\n✅ 모든 필요 파일이 존재합니다.")
 
+    # PWA 설정 파일 생성
+    create_pwa_files()
+    
+    print("\n🎵 음악 파일 접근성 확인...")
+    if os.path.exists("assets/main_music.mp3"):
+        print("✅ 음악 파일 확인됨")
+        print(f"📂 절대 경로: {os.path.abspath('assets/main_music.mp3')}")
+    else:
+        print("❌ 음악 파일이 없습니다")
+
+    print("\n🚀 서버 시작...")
+    
     # Gradio 앱 실행
     demo = create_interface()
     demo.queue().launch(
@@ -1324,4 +1003,5 @@ if __name__ == "__main__":
         show_error=True,
         height=None,
         width="100%"
-    )
+    )
+