app.py

import os
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
from dotenv import load_dotenv

# 환경변수 로드
load_dotenv()

# 상수 정의
WELCOME_MESSAGE = """
# 디지털 굿판에 오신 것을 환영합니다

이곳은 현대 도시 속에서 잊혀진 전통 굿의 정수를 담아낸 디지털 의례의 공간입니다. 
이곳에서는 사람들의 목소리와 감정을 통해 영적 교감을 나누고, 자연과 도시의 에너지가 연결됩니다.

‘디지털 굿판’은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.
본 프로젝트에서 기록된 정보 중 ‘송신’ 단계의 ‘소원전하기’를  제외한 모든 과정의 정보는(목소리,감상 등) 별도로 저장되지 않으며 AI 학습이나 외부 공유에 사용되지 않습니다.

"""

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)


class SimpleDB:
    def __init__(self, reflections_path="data/reflections.json", wishes_path="data/wishes.json"):
        self.reflections_path = reflections_path
        self.wishes_path = wishes_path
        os.makedirs('data', exist_ok=True)
        self.reflections = self._load_json(reflections_path)
        self.wishes = self._load_json(wishes_path)

    def _load_json(self, file_path):
        if not os.path.exists(file_path):
            with open(file_path, 'w', encoding='utf-8') as f:
                json.dump([], f, ensure_ascii=False, indent=2)
        try:
            with open(file_path, 'r', encoding='utf-8') as f:
                return json.load(f)
        except Exception as e:
            print(f"Error loading {file_path}: {e}")
            return []

    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

    def save_wish(self, name, wish, emotion_data=None, timestamp=None):
        if timestamp is None:
            timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        wish_data = {
            "name": name,
            "wish": wish,
            "emotion": emotion_data,
            "timestamp": timestamp
        }
        self.wishes.append(wish_data)
        self._save_json(self.wishes_path, self.wishes)
        return True

    def _save_json(self, file_path, data):
        try:
            with open(file_path, 'w', encoding='utf-8') as f:
                json.dump(data, f, ensure_ascii=False, indent=2)
            return True
        except Exception as e:
            print(f"Error saving to {file_path}: {e}")
            return False

    def get_all_reflections(self):
        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

# 필요한 디렉토리 생성
os.makedirs("generated_images", exist_ok=True)

# 음성 분석 관련 함수들
def calculate_baseline_features(audio_data):
    try:
        if isinstance(audio_data, tuple):
            sr, y = audio_data
            y = y.astype(np.float32)
        elif isinstance(audio_data, str):
            y, sr = librosa.load(audio_data, sr=16000)
        else:
            print("Unsupported audio format")
            return None

        if len(y) == 0:
            print("Empty audio data")
            return None

        features = {
            "energy": float(np.mean(librosa.feature.rms(y=y))),
            "tempo": float(librosa.feature.tempo(y=y, sr=sr)[0]),
            "pitch": float(np.mean(librosa.feature.zero_crossing_rate(y=y))),
            "volume": float(np.mean(np.abs(y))),
            "mfcc": librosa.feature.mfcc(y=y, sr=sr, n_mfcc=13).mean(axis=1).tolist()
        }
        return features
    except Exception as e:
        print(f"Error calculating baseline: {str(e)}")
        return None

def map_acoustic_to_emotion(features, baseline_features=None):
    if features is None:
        return {
            "primary": "알 수 없음",
            "intensity": 0,
            "confidence": 0.0,
            "secondary": "",
            "characteristics": ["음성 분석 실패"],
            "details": {
                "energy_level": "0%",
                "speech_rate": "알 수 없음",
                "pitch_variation": "알 수 없음",
                "voice_volume": "알 수 없음"
            }
        }

    energy_norm = min(features["energy"] * 100, 100)
    tempo_norm = min(features["tempo"] / 200, 1)
    pitch_norm = min(features["pitch"] * 2, 1)

    if baseline_features:
        if baseline_features["energy"] > 0 and baseline_features["tempo"] > 0 and baseline_features["pitch"] > 0:
            energy_norm = (features["energy"] / baseline_features["energy"]) * 50
            tempo_norm = (features["tempo"] / baseline_features["tempo"])
            pitch_norm = (features["pitch"] / baseline_features["pitch"])

    emotions = {
        "primary": "",
        "intensity": energy_norm,
        "confidence": 0.0,
        "secondary": "",
        "characteristics": []
    }

    # 감정 매핑 로직
    if energy_norm > 70:
        if tempo_norm > 0.6:
            emotions["primary"] = "기쁨/열정"
            emotions["characteristics"].append("빠르고 활기찬 말하기 패턴")
        else:
            emotions["primary"] = "분노/강조"
            emotions["characteristics"].append("강한 음성 강도")
        emotions["confidence"] = energy_norm / 100
    elif pitch_norm > 0.6:
        if energy_norm > 50:
            emotions["primary"] = "놀람/흥분"
            emotions["characteristics"].append("높은 음고와 강한 강세")
        else:
            emotions["primary"] = "관심/호기심"
            emotions["characteristics"].append("음고 변화가 큼")
        emotions["confidence"] = pitch_norm
    elif energy_norm < 30:
        if tempo_norm < 0.4:
            emotions["primary"] = "슬픔/우울"
            emotions["characteristics"].append("느리고 약한 음성")
        else:
            emotions["primary"] = "피로/무기력"
            emotions["characteristics"].append("낮은 에너지 레벨")
        emotions["confidence"] = (30 - energy_norm) / 30
    else:
        if tempo_norm > 0.5:
            emotions["primary"] = "평온/안정"
            emotions["characteristics"].append("균형잡힌 말하기 패턴")
        else:
            emotions["primary"] = "차분/진지"
            emotions["characteristics"].append("안정적인 음성 특성")
        emotions["confidence"] = 0.5

    emotions["details"] = {
        "energy_level": f"{energy_norm:.1f}%",
        "speech_rate": f"{'빠름' if tempo_norm > 0.6 else '보통' if tempo_norm > 0.4 else '느림'}",
        "pitch_variation": f"{'높음' if pitch_norm > 0.6 else '보통' if pitch_norm > 0.3 else '낮음'}",
        "voice_volume": f"{'큼' if features['volume'] > 0.7 else '보통' if features['volume'] > 0.3 else '작음'}"
    }

    return emotions

def analyze_voice(audio_data, state):
    if audio_data is None:
        return state, "음성을 먼저 녹음해주세요.", "", "", ""

    try:
        sr, y = audio_data
        y = y.astype(np.float32)
        
        if len(y) == 0:
            return state, "음성이 감지되지 않았습니다.", "", "", ""

        acoustic_features = calculate_baseline_features((sr, y))
        if acoustic_features is None:
            return state, "음성 분석에 실패했습니다.", "", "", ""

        # 음성 인식
        if speech_recognizer:
            try:
                transcription = speech_recognizer({"sampling_rate": sr, "raw": y.astype(np.float32)})
                text = transcription["text"]
            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"))

        # 텍스트 감정 분석
        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']} "
            f"(강도: {voice_emotion['intensity']:.1f}%, 신뢰도: {voice_emotion['confidence']:.2f})\n"
            f"특징: {', '.join(voice_emotion['characteristics'])}\n"
            f"상세 분석:\n"
            f"- 에너지 레벨: {voice_emotion['details']['energy_level']}\n"
            f"- 말하기 속도: {voice_emotion['details']['speech_rate']}\n"
            f"- 음높이 변화: {voice_emotion['details']['pitch_variation']}\n"
            f"- 음성 크기: {voice_emotion['details']['voice_volume']}"
        )

        # 프롬프트 생성
        prompt = generate_detailed_prompt(text, voice_emotion, text_sentiment)
        state = {**state, "final_prompt": prompt}

        return state, text, voice_result, text_result, prompt

    except Exception as e:
        print(f"Error in analyze_voice: {str(e)}")
        return state, f"오류 발생: {str(e)}", "", "", ""


def generate_detailed_prompt(text, emotions, text_sentiment):
    emotion_colors = {
        "기쁨/열정": "밝은 노랑과 따뜻한 주황색",
        "분노/강조": "강렬한 빨강과 짙은 검정",
        "놀람/흥분": "선명한 파랑과 밝은 보라",
        "관심/호기심": "연한 하늘색과 민트색",
        "슬픔/우울": "어두운 파랑과 회색",
        "피로/무기력": "탁한 갈색과 짙은 회색",
        "평온/안정": "부드러운 초록과 베이지",
        "차분/진지": "차분한 남색과 깊은 보라"
    }

    abstract_elements = {
        "기쁨/열정": "상승하는 나선형과 빛나는 입자들",
        "분노/강조": "날카로운 지그재그와 폭발하는 형태",
        "놀람/흥분": "물결치는 동심원과 반짝이는 점들",
        "관심/호기심": "부드럽게 흐르는 곡선과 floating shapes",
        "슬픔/우울": "하강하는 흐름과 흐릿한 그림자",
        "피로/무기력": "느리게 흐르는 물결과 흐려지는 형태",
        "평온/안정": "부드러운 원형과 조화로운 기하학적 패턴",
        "차분/진지": "균형잡힌 수직선과 안정적인 구조"
    }

    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

def generate_image_from_prompt(prompt):
    if not prompt:
        print("No prompt provided")
        return None

    try:
        response = requests.post(
            API_URL,
            headers=headers,
            json={
                "inputs": prompt,
                "parameters": {
                    "negative_prompt": "ugly, blurry, poor quality, distorted",
                    "num_inference_steps": 30,
                    "guidance_scale": 7.5
                }
            }
        )

        if response.status_code == 200:
            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
            image_path = f"generated_images/image_{timestamp}.png"
            os.makedirs("generated_images", exist_ok=True)
            
            with open(image_path, "wb") as f:
                f.write(response.content)
            
            return image_path
        else:
            print(f"Error: {response.status_code}")
            print(f"Response: {response.text}")
            return None
    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):
    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}")
            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")

    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 템플릿
    AUDIO_PLAYER_HTML = """
    <div class="audio-player-container">
        <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>
    <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 = '재생';
            }
        }
        
        audio.addEventListener('ended', () => {
            playButtonText.textContent = '재생';
        });
        
        audio.addEventListener('error', (e) => {
            console.error('Audio error:', e);
            alert('음악 파일을 불러오는데 실패했습니다.');
        });
    </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>
    """

    css = """
        /* 전체 컨테이너 width 제한 */
        .gradio-container {
            margin: 0 auto !important;
            max-width: 800px !important;
            padding: 1rem !important;
        }

        /* 모바일 뷰 */
        @media (max-width: 600px) {
            .mobile-logo { 
                display: none !important; 
            }
            .desktop-logo {
                display: block !important;
                width: 100%;
                height: auto;
                max-width: 800px;
                margin: 0 auto;
            }
            .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;
            }
        }
    
        /* 전반적인 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;
        }
        
        /* 탭 스타일링 */
        .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;
        }
    """

    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(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:
                # 1단계: 첫 화면
                welcome_section = gr.Column(visible=True)
                with welcome_section:
                    gr.Markdown(WELCOME_MESSAGE)
                    name_input = gr.Textbox(
                        label="이름을 알려주세요",
                        placeholder="이름을 입력해주세요",
                        interactive=True
                    )
                    name_submit_btn = gr.Button("축원의식 준비하기", variant="primary")
            
                # 2단계: 세계관 설명
                story_section = gr.Column(visible=False)
                with story_section:
                    gr.Markdown(ONCHEON_STORY)
                    continue_btn = gr.Button("축원의식 시작하기", variant="primary")
            
                # 3단계: 축원 의식
                blessing_section = gr.Column(visible=False)
                with blessing_section:
                    gr.Markdown("### 축원의식을 시작하겠습니다")
                    gr.Markdown("'명짐 복짐 짊어지고 안가태평하시기를 비도발원 축원 드립니다'")
                    
                    # 축원 문장 녹음하기
                    baseline_audio = gr.Audio(
                        label="축원 문장 녹음하기",
                        sources=["microphone"],
                        type="numpy",
                        streaming=False
                    )
                    
                    # 상태 표시 (길이 조정 추가)
                    blessing_status = gr.Markdown(
                        "분석 결과가 여기에 표시됩니다.", 
                        elem_id="blessing-status",
                        style={"min-height": "200px"}  # CSS 스타일로 길이를 조정합니다
                    )
                    
                    # 상태 분석 및 결과창 구분
                    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:
                    gr.Markdown("## 굿판으로 입장하기")
                    gr.Markdown("""
                    * 청신 탭으로 이동해 주세요.
                    * 부산광역시 동래구 온천장역에서 시작하면 더욱 깊은 경험을 시작할 수 있습니다.
                    * (본격적인 경험을 시작하기에 앞서 이동을 권장드립니다)
                    """)
                    enter_btn = gr.Button("청신 의식 시작하기", variant="primary")

            with gr.TabItem("청신") as tab_listen:
                gr.Markdown("## 청신 - 소리로 정화하기")
                gr.Markdown("""
                온천천의 소리를 들으며 마음을 정화해보세요.
                
                💫 이 앱은 온천천의 사운드스케이프를 녹음하여 제작되었으며,
                온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                """)
                
                # 커스텀 오디오 플레이어
                gr.HTML(AUDIO_PLAYER_HTML)
                
                with gr.Column():
                    reflection_input = gr.Textbox(
                        label="지금 이 순간의 감상을 자유롭게 적어보세요",
                        lines=3,
                        max_lines=5
                    )
                    save_btn = gr.Button("감상 저장하기", variant="secondary")
                    reflections_display = gr.Dataframe(
                        headers=["시간", "감상", "감정 분석"],
                        label="기록된 감상들",
                        value=[],
                        interactive=False,
                        wrap=True,
                        row_count=(5, "dynamic")
                    )

            # 기원 탭
            with gr.TabItem("기원") as tab_wish:
                gr.Markdown("## 기원 - 소원을 전해보세요")
                status_display = gr.Markdown("", visible=False)  # 상태 표시용 컴포넌트
                
                with gr.Row():
                    with gr.Column():
                        voice_input = gr.Audio(
                            label="소원을 나누고 싶은 마음을 말해주세요",
                            sources=["microphone"],
                            type="numpy",
                            streaming=False,
                            elem_id="voice-input"  # elem_id 추가
                        )
                        with gr.Row():
                            clear_btn = gr.Button("녹음 지우기", variant="secondary")
                            analyze_btn = gr.Button("소원 분석하기", variant="primary")
                    
                    with gr.Column():
                        transcribed_text = gr.Textbox(
                            label="인식된 텍스트",
                            interactive=False
                        )
                        voice_emotion = gr.Textbox(
                            label="음성 감정 분석",
                            interactive=False
                        )
                        text_emotion = gr.Textbox(
                            label="텍스트 감정 분석",
                            interactive=False
                        )

            # 송신 탭
            with gr.TabItem("송신") as tab_send:
                gr.Markdown("## 송신 - 소지(소원지)를 그려 날려 태워봅시다")
                final_prompt = gr.Textbox(
                    label="생성된 프롬프트",
                    interactive=False,
                    lines=3
                )
                generate_btn = gr.Button("마음의 그림 그리기", variant="primary")
                result_image = gr.Image(
                    label="생성된 이미지",
                    show_download_button=True
                )
            
                gr.Markdown("## 온천천에 전하고 싶은 소원을 남겨주세요")
                final_reflection = gr.Textbox(
                    label="소원",
                    placeholder="당신의 소원을 한 줄로 남겨주세요...",
                    max_lines=3
                )
                save_final_btn = gr.Button("소원 전하기", variant="primary")
                gr.Markdown("""
💫 여러분의 소원은 11월 25일 온천천 벽면에 설치될 소원나무에 전시될 예정입니다.
따뜻한 마음을 담아 작성해주세요.
""")
                wishes_display = gr.Dataframe(
                    headers=["시간", "소원", "이름"],
                    label="기록된 소원들",
                    value=[],
                    interactive=False,
                    wrap=True
                )
            with gr.TabItem("프로젝트 소개") as tab_intro:
                gr.Markdown("""
                # 디지털 굿판 프로젝트
                
                본 사업은 전통 굿의 요소와 현대 기술을 결합해 참여자들이 자연과 깊이 연결되며 내면을 탐색하고 치유하는 경험을 제공하는 다원예술 프로젝트입니다.
                
                금샘과 온천천의 생명 창조 신화를 배경으로, 참여자들은 자연의 소리에 귀를 기울이고, 신화에 몰입하며, 감정을 표현하는 과정에서 개인적 및 공동체적 치유의 여정을 걷습니다.
                
                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],
            outputs=[welcome_section, story_section, blessing_section, entry_guide_section, state]
        )

        continue_btn.click(
            fn=handle_continue,
            outputs=[story_section, welcome_section, blessing_section, entry_guide_section]
        )

        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
        )

        enter_btn.click(
            fn=handle_enter,
            outputs=[tabs]
        )

        save_btn.click(
            fn=save_reflection_fixed,
            inputs=[reflection_input, state],
            outputs=[state, reflections_display]
        )

        clear_btn.click(
            fn=lambda: None,
            outputs=[voice_input]
        )

        analyze_btn.click(
            fn=safe_analyze_voice,
            inputs=[voice_input, state],
            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, status_display]
        )

        generate_btn.click(
            fn=generate_image_from_prompt,
            inputs=[final_prompt],
            outputs=[result_image]
        )

        save_final_btn.click(
            fn=handle_save_wish,
            inputs=[final_reflection, state],
            outputs=[blessing_status, wishes_display]  # baseline_status -> blessing_status
        )
        
    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;
                        }
                    );
                })
        );
    });
    """
    
    # 서비스 워커 파일 생성
    with open('static/service-worker.js', 'w') as f:
        f.write(sw_content)

    # Gradio 앱 실행
    demo = create_interface()
    demo.queue().launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=True,
        debug=True,
        show_error=True,
        height=None,
        width="100%"
    )