Update app.py

app.py

@@ -3,94 +3,55 @@ 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 = """
-## 생명의 공간 '온천천' 🌌
-
-온천천의 물줄기는 신성한 금샘에서 시작됩니다. 금샘은 생명과 창조의 원천이며, 
-천상의 생명이 지상에서 숨을 틔우는 자리입니다. 
+## 생명의 공간 ‘온천천’ 🌌
 
-도시의 소음 속에서도 신성한 생명력을 느껴보세요. 이곳에서 영적인 교감을 경험하며, 
-자연과 하나 되는 순간을 맞이해 보시기 바랍니다.
+온천천의 물줄기는 신성한 금샘에서 시작됩니다. 금샘은 생명과 창조의 원천이며, 천상의 생명이 지상에서 숨을 틔우는 자리입니다. 
 
-이 프로젝트는 부산광역시 동래구 '온천장역'에서 금정구 '장전역'을 잇는 구간의 
-온천천 산책로의 사운드스케이프를 기반으로 제작되었습니다.
+도시의 소음 속에서도 신성한 생명력을 느껴보세요. 이곳에서 영적인 교감을 경험하며, 자연과 하나 되는 순간을 맞이해 보시기 바랍니다
+ 
+이 프로젝트는 부산광역시 동래구 ‘온천장역’ 에서 금정구 ‘장전역’을 잇는 구간의 온천천 산책로의 사운드 스케이프를  기반으로 제작 되었습니다.
 
-산책로를 따라 걸으며 본 프로젝트 체험 시 보다 몰입된 경험이 가능합니다.
+산책로를 따라 걸으며 본 프로젝트 체험 시 보다 몰입된 경험이 가능합니다.  
 """
 
-# 초기 상태 정의
-INITIAL_STATE = {
-    "user_name": "",
-    "baseline_features": None,
-    "reflections": [],
-    "wish": None,
-    "final_prompt": "",
-    "image_path": None,
-    "current_tab": 0,
-    "audio_playing": False
-}
+# 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)
+
 
 class SimpleDB:
     def __init__(self, reflections_path="data/reflections.json", wishes_path="data/wishes.json"):
@@ -114,12 +75,14 @@ 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
@@ -150,8 +113,35 @@ class SimpleDB:
         return sorted(self.reflections, key=lambda x: x["timestamp"], reverse=True)
 
     def get_all_wishes(self):
-        return sorted(self.wishes, key=lambda x: x["timestamp"], reverse=True)
+        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
+
+# 필요한 디렉토리 생성
+os.makedirs("generated_images", exist_ok=True)
+
+# 음성 분석 관련 함수들
 def calculate_baseline_features(audio_data):
     try:
         if isinstance(audio_data, tuple):
@@ -213,6 +203,7 @@ def map_acoustic_to_emotion(features, baseline_features=None):
         "characteristics": []
     }
 
+    # 감정 매핑 로직
     if energy_norm > 70:
         if tempo_norm > 0.6:
             emotions["primary"] = "기쁨/열정"
@@ -271,7 +262,6 @@ def analyze_voice(audio_data, state):
             return state, "음성 분석에 실패했습니다.", "", "", ""
 
         # 음성 인식
-        text = "음성 인식 모델을 불러올 수 없습니다."
         if speech_recognizer:
             try:
                 transcription = speech_recognizer({"sampling_rate": sr, "raw": y.astype(np.float32)})
@@ -279,20 +269,24 @@ 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']} "
@@ -315,6 +309,7 @@ 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 = {
         "기쁨/열정": "밝은 노랑과 따뜻한 주황색",
@@ -338,15 +333,13 @@ def generate_detailed_prompt(text, emotions, text_sentiment):
         "차분/진지": "균형잡힌 수직선과 안정적인 구조"
     }
 
-    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"
-    )
+    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"
 
     return prompt
 
@@ -385,464 +378,501 @@ 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)
 
-def encode_image_to_base64(image_path):
+    # 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):
     try:
-        if not os.path.exists(image_path):
-            print(f"Warning: Image file not found at {image_path}")
-            return ""
-        with open(image_path, "rb") as img_file:
-            return base64.b64encode(img_file.read()).decode()
+        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"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>
-    """
+        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}")
+            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")
+
+    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="디지털 굿판 로고 데스크톱">
+        """
 
     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 = """
+    
+    # HTML5 Audio Player 템플릿
+    AUDIO_PLAYER_HTML = """
     <div class="audio-player-container">
-        <audio controls class="audio-player">
-            <source src="/assets/main_music.mp3" type="audio/mpeg">
-            브라우저가 오디오 태그를 지원하지 않습니다.
+        <audio id="mainAudio" preload="auto" style="display:none;">
+            <source src="/assets/main_music.mp3" type="audio/mp3">
         </audio>
+        <button id="playButton" onclick="toggleAudio()" class="custom-audio-button">
+            <span id="playButtonText">재생</span>
+        </button>
     </div>
-    """
-
-    return logo_html, main_image_html, audio_player_html
-    
-def create_pwa_files():
-    """필요한 PWA 파일들을 생성하는 함수"""
-    # manifest.json 생성
-    manifest_path = 'static/manifest.json'
-    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-192x192.png",
-                "sizes": "192x192",
-                "type": "image/png",
-                "purpose": "any maskable"
-            },
-            {
-                "src": "/static/icons/icon-512x512.png",
-                "sizes": "512x512",
-                "type": "image/png",
-                "purpose": "any maskable"
+    <script>
+        let audio = document.getElementById('mainAudio');
+        let playButton = document.getElementById('playButton');
+        let playButtonText = document.getElementById('playButtonText');
+        
+        function toggleAudio() {
+            if (audio.paused) {
+                audio.play().then(() => {
+                    playButtonText.textContent = '일시정지';
+                }).catch(error => {
+                    console.error('Audio playback failed:', error);
+                    alert('음악 재생에 실패했습니다. 다시 시도해주세요.');
+                });
+            } else {
+                audio.pause();
+                playButtonText.textContent = '재생';
             }
-        ]
-    }
-    os.makedirs('static', exist_ok=True)
-    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'
-    with open(sw_path, 'w', encoding='utf-8') as f:
-        f.write('''
-        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-192x192.png',
-            '/static/icons/icon-512x512.png'
-        ];
-
-        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())
-            );
+        }
+        
+        audio.addEventListener('ended', () => {
+            playButtonText.textContent = '재생';
         });
-
-        self.addEventListener('fetch', event => {
-            event.respondWith(
-                caches.match(event.request)
-                    .then(response => response || fetch(event.request))
-            );
+        
+        audio.addEventListener('error', (e) => {
+            console.error('Audio error:', e);
+            alert('음악 파일을 불러오는데 실패했습니다.');
         });
-        '''.strip())
-
-
-# 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%;
-    }
-}
-
-/* 데스크톱 뷰 (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;
-    }
-}
+    </script>
+    <style>
+        .audio-player-container {
+            margin: 20px 0;
+            width: 100%;
+            text-align: center;
+        }
+        .custom-audio-button {
+            width: 200px;
+            padding: 12px 24px;
+            margin: 10px 0;
+            background-color: #4a90e2;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            transition: background-color 0.3s ease;
+        }
+        .custom-audio-button:hover {
+            background-color: #357abd;
+        }
+        .custom-audio-button:active {
+            background-color: #2a5d8f;
+            transform: scale(0.98);
+        }
+        @media (max-width: 600px) {
+            .custom-audio-button {
+                width: 100%;
+            }
+        }
+    </style>
+    """
 
-/* 컴포넌트 간격 조정 */
-.gradio-column > *:not(:last-child) {
-    margin-bottom: 1rem !important;
-}
-"""
+    css = """
+        /* 전체 컨테이너 width 제한 */
+        .gradio-container {
+            margin: 0 auto !important;
+            max-width: 800px !important;
+            padding: 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")
+        /* 모바일 뷰 */
+        @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;
+            }
+        }
+        
+        /* 데스크톱 뷰 */
+        @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;
+            }
+        }
     
-    # HTML 템플릿 생성
-    logo_html, main_image_html, audio_player_html = create_html_templates(
-        mobile_logo, desktop_logo, main_image
-    )
+        /* 전반적인 UI 개선 */
+        .gradio-button {
+            transition: all 0.3s ease;
+            border-radius: 8px !important;
+        }
+       .main-image-container {
+            width: 100%;
+             margin: 0 auto 2rem auto;
+            text-align: center;
+        }
 
-    # 이벤트 핸들러들
-    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
-        )
+        .main-image {
+            width: 100%;
+            height: auto;
+             max-width: 100%;
+            display: block;
+            margin: 0 auto;
+         }
 
-    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)
+        .gradio-button:active {
+            transform: scale(0.98);
+        }
         
-        try:
-            sr, y = audio
-            features = calculate_baseline_features((sr, y))
-            
-            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)
-    
-    def handle_enter():
-        return gr.update(selected=1)
-
-    def handle_save_reflection(text, state):
-        if not text.strip():
-            return state, []
+        /* 컴포넌트 간격 조정 */
+        .gradio-column > *:not(:last-child) {
+            margin-bottom: 1rem !important;
+        }
         
-        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, []
-
-    def handle_save_wish(text, state):
-        if not text.strip():
-            return "소원을 입력해주세요.", []
+        /* 데이터프레임 스타일링 */
+        .gradio-dataframe {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
         
-        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 "오류가 발생했습니다.", []
+        /* 오디오 플레이어 컨테이너 */
+        .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;
+        }
+        
+        /* 이미지 컨테이너 */
+        .gradio-image {
+            border-radius: 8px;
+            overflow: hidden;
+            max-width: 800px;
+            margin: 0 auto;
+        }
 
-    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,
-                "음성 분석 중 오류가 발생했습니다. 다시 시도해주세요.",
-                "",
-                "",
-                "",
-                "분석 실패"
-            )
+        .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 인터페이스 구성
-    with gr.Blocks(theme=gr.themes.Soft(), css=STYLE_CSS) as app:
-        # 상태 관리
-        state = gr.State(value=INITIAL_STATE)
+    with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
+        state = gr.State(value=initial_state)
         processing_status = gr.State("")   
-
-        # 로고 영역
         with gr.Column(elem_classes="logo-container"):
-            gr.HTML(logo_html)
+            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="디지털 굿판 로고 데스크톱">
+            """)
 
-        # 탭 구성
         with gr.Tabs(selected=0) as tabs:
-            # 입장 탭
+            # 입장 탭 (축원 포함)
             with gr.TabItem("입장") as tab_entrance:
-                # 메인 이미지 표시
                 gr.HTML(main_image_html)
-                
+
                 # 1단계: 첫 화면
                 welcome_section = gr.Column(visible=True)
                 with welcome_section:
@@ -866,6 +896,7 @@ def create_interface():
                     gr.Markdown("### 축원의식을 시작하겠습니다")
                     gr.Markdown("'명짐 복짐 짊어지고 안가태평하시기를 비도발원 축원 드립니다'")
                     
+                    # 축원 문장 녹음하기
                     baseline_audio = gr.Audio(
                         label="축원 문장 녹음하기",
                         sources=["microphone"],
@@ -873,15 +904,18 @@ 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:
@@ -893,7 +927,6 @@ def create_interface():
                     """)
                     enter_btn = gr.Button("청신 의식 시작하기", variant="primary")
 
-            # 청신 탭
             with gr.TabItem("청신") as tab_listen:
                 gr.Markdown("## 청신 - 소리로 정화하기")
                 gr.Markdown("""
@@ -903,8 +936,16 @@ def create_interface():
                 온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                 """)
                 
-                gr.Markdown("## 온천천의 소리를 들어보세요")
-                gr.HTML(audio_player_html)
+                # 커스텀 오디오 플레이어
+                with gr.Blocks(css=css) as demo:
+                    gr.Markdown("## 온천천의 소리를 들어보세요")
+                    # HTML로 오디오 플레이어를 직접 삽입
+                    gr.HTML("""
+                    <audio controls class="audio-player">
+                        <source src="/assets/main_music.mp3" type="audio/mpeg">
+                        브라우저가 오디오 태그를 지원하지 않습니다.
+                    </audio>
+                    """)
                 
                 with gr.Column():
                     reflection_input = gr.Textbox(
@@ -925,7 +966,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():
@@ -934,7 +975,7 @@ def create_interface():
                             sources=["microphone"],
                             type="numpy",
                             streaming=False,
-                            elem_id="voice-input"
+                            elem_id="voice-input"  # elem_id 추가
                         )
                         with gr.Row():
                             clear_btn = gr.Button("녹음 지우기", variant="secondary")
@@ -967,7 +1008,7 @@ def create_interface():
                     label="생성된 이미지",
                     show_download_button=True
                 )
-                
+            
                 gr.Markdown("## 온천천에 전하고 싶은 소원을 남겨주세요")
                 final_reflection = gr.Textbox(
                     label="소원",
@@ -976,9 +1017,9 @@ def create_interface():
                 )
                 save_final_btn = gr.Button("소원 전하기", variant="primary")
                 gr.Markdown("""
-                💫 여러분의 소원은 11월 25일 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
-                따뜻한 마음을 담아 작성해주세요.
-                """)
+💫 여러분의 소원은 11월 25일 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
+따뜻한 마음을 담아 작성해주세요.
+""")
                 wishes_display = gr.Dataframe(
                     headers=["시간", "소원", "이름"],
                     label="기록된 소원들",
@@ -986,13 +1027,11 @@ def create_interface():
                     interactive=False,
                     wrap=True
                 )
-
-            # 프로젝트 소개 탭
             with gr.TabItem("프로젝트 소개") as tab_intro:
                 gr.HTML(main_image_html)
                 gr.Markdown("""
                 # 디지털 굿판 프로젝트
-                '디지털 굿판'은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.
+                ‘디지털 굿판’은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.
                 
                 본 사업은 전통 굿의 요소와 현대 기술을 결합해 참여자들이 자연과 깊이 연결되며 내면을 탐색하고 치유하는 경험을 제공합니다.
                 
@@ -1002,15 +1041,204 @@ 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],
@@ -1025,7 +1253,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]
+            outputs=[state, blessing_status, blessing_section, entry_guide_section]  # baseline_status -> blessing_status
         )
 
         enter_btn.click(
@@ -1034,7 +1262,7 @@ def create_interface():
         )
 
         save_btn.click(
-            fn=handle_save_reflection,
+            fn=save_reflection_fixed,
             inputs=[reflection_input, state],
             outputs=[state, reflections_display]
         )
@@ -1059,42 +1287,86 @@ def create_interface():
         save_final_btn.click(
             fn=handle_save_wish,
             inputs=[final_reflection, state],
-            outputs=[blessing_status, wishes_display]
+            outputs=[blessing_status, wishes_display]  # baseline_status -> blessing_status
         )
-
+        
     return app
 
 if __name__ == "__main__":
-    # 필요한 디렉토리 생성
-    for directory in REQUIRED_DIRS:
-        os.makedirs(directory, exist_ok=True)
-    
-    # 파일 경로 체크
-    print("\n🔍 파일 경로 확인 중...")
-    missing_files = []
-    for file_path, description in REQUIRED_FILES.items():  # REQUIRED_PATHS 대신 REQUIRED_FILES 사용
-        if not os.path.exists(file_path):
-            missing_files.append(f"{description} ({file_path})")
-    
-    if missing_files:
-        print("\n❌ 누락된 파일들:")
-        for file in missing_files:
-            print(f"- {file}")
-    else:
-        print("\n✅ 모든 필요 파일이 존재합니다.")
-
-    # PWA 설정 파일 생성
-    create_pwa_files()
+    # 서비스 워커 캐시 설정 강화
+    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;
+                        }
+                    );
+                })
+        );
+    });
+    """
     
-    print("\n🎵 음악 파일 접근성 확인...")
-    if os.path.exists("assets/main_music.mp3"):
-        print("✅ 음악 파일 확인됨")
-        print(f"📂 절대 경로: {os.path.abspath('assets/main_music.mp3')}")
-    else:
-        print("❌ 음악 파일이 없습니다")
+    # 서비스 워커 파일 생성
+    with open('static/service-worker.js', 'w') as f:
+        f.write(sw_content)
 
-    print("\n🚀 서버 시작...")
-    
     # Gradio 앱 실행
     demo = create_interface()
     demo.queue().launch(
@@ -1105,5 +1377,4 @@ if __name__ == "__main__":
         show_error=True,
         height=None,
         width="100%"
-    )
-    
+    )