Update app.py

app.py

@@ -577,7 +577,7 @@ def safe_state_update(state, updates):
 def create_interface():
     import base64
     
-    # initial_state 정의 추가
+    # initial_state 정의
     initial_state = {
         "user_name": "",
         "baseline_features": None,
@@ -585,63 +585,106 @@ def create_interface():
         "wish": None,
         "final_prompt": "",
         "image_path": None,
-        "current_tab": 0
+        "current_tab": 0,
+        "audio_playing": False  # 오디오 상태 추가
     }
     
-    def get_image_base64(image_path):
-        with open(image_path, "rb") as img_file:
-            return base64.b64encode(img_file.read()).decode()
-    
-    # 모바일/데스크톱 로고 미리 인코딩
-    try:
-        mobile_logo = get_image_base64("static/DIGITAL_GUTPAN_LOGO_m.png")
-        desktop_logo = get_image_base64("static/DIGITAL_GUTPAN_LOGO_w.png")
-    except Exception as e:
-        print(f"로고 로딩 에러: {e}")
-        mobile_logo = ""
-        desktop_logo = ""  # Ensure an empty string is assigned to desktop_logo in case of error
-
+    # HTML5 Audio Player 템플릿
+    AUDIO_PLAYER_HTML = """
+    <div class="audio-player-container">
+        <audio id="mainAudio" preload="auto" style="width: 100%;">
+            <source src="/assets/main_music.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+        <button id="playButton" onclick="togglePlay()" class="custom-audio-button">
+            재생/일시정지
+        </button>
+    </div>
+    <script>
+        let audioElement = document.getElementById('mainAudio');
+        let isPlaying = false;
         
-    css = """
-        /* 모바일 뷰 */
-        @media (max-width: 600px) {
-            .logo-container { 
-                padding: 20px 10px !important;
-                width: 100% !important;
-            }
-            .desktop-logo { display: none !important; }
-            .mobile-logo {
-                width: 100% !important;
-                height: auto !important;
-                max-width: 300px !important;
-                margin: 0 auto !important;
-                display: block !important;
+        function togglePlay() {
+            if (!isPlaying) {
+                audioElement.play()
+                .then(() => {
+                    isPlaying = true;
+                })
+                .catch(error => {
+                    console.error("Audio playback failed:", error);
+                    alert("음악 재생에 실패했습니다. 다시 시도해주세요.");
+                });
+            } else {
+                audioElement.pause();
+                isPlaying = false;
             }
         }
         
-        /* 데스크톱 뷰 */
-        @media (min-width: 601px) {
-            .logo-container { 
-                padding: 20px 0;
-                width: 100%;
-                max-width: 800px;
-                margin: 0 auto;
-            }
-            .mobile-logo { display: none !important; }
-            .desktop-logo {
-                width: 100%;
-                height: auto;
-                max-width: 800px;
-                margin: 0 auto;
-                display: block;
+        // 페이지 벗어날 때 오디오 정지
+        window.addEventListener('beforeunload', function() {
+            if (audioElement) {
+                audioElement.pause();
+                audioElement.currentTime = 0;
             }
+        });
+        
+        // 오디오 로딩 에러 처리
+        audioElement.addEventListener('error', function(e) {
+            console.error("Audio error:", e);
+            alert("음악 파일을 불러오는데 실패했습니다. 페이지를 새로고침해주세요.");
+        });
+    </script>
+    <style>
+        .custom-audio-button {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            background-color: #4a90e2;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .custom-audio-button:active {
+            background-color: #357abd;
+        }
+        .audio-player-container {
+            margin: 20px 0;
+            width: 100%;
+        }
+    </style>
+    """
+
+    css = """
+        /* 기존 CSS 유지 */
+        .gradio-container {
+            max-width: 100% !important;
+            padding: 0 !important;
+        }
+        
+        .audio-container {
+            margin: 20px 0;
+            width: 100%;
         }
         
-        /* 공통 스타일 */
-        .logo-container {
-            background: transparent !important;
-            text-align: center;
-            margin-bottom: 20px;
+        /* 모바일 최적화 */
+        @media (max-width: 600px) {
+            .gradio-button {
+                min-height: 44px !important;  /* iOS 터치 타겟 사이즈 */
+                margin: 10px 0 !important;
+            }
+            
+            .container {
+                padding: 10px !important;
+            }
+            
+            /* 입력 필드 최적화 */
+            input[type="text"], 
+            textarea {
+                font-size: 16px !important;  /* iOS auto-zoom 방지 */
+                padding: 12px !important;
+            }
         }
     """
 
@@ -712,35 +755,33 @@ def create_interface():
                 💫 이 앱은 온천천의 사운드스케이프를 녹음하여 제작되었으며,
                 온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                 """)
-                play_music_btn = gr.Button("온천천의 소리 듣기", variant="secondary")
-                with gr.Row():
-                    audio = gr.Audio(
-                        value="assets/main_music.mp3",
-                        type="filepath",
-                        label="온천천의 소리",
+                
+                # 커스텀 오디오 플레이어로 교체
+                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,
-                        show_download_button=True,
-                        visible=True
+                        wrap=True,
+                        row_count=(5, "dynamic")
                     )
-                    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("## 기원 - 소원을 전해보세요")
+                
+                # 상태 표시 추가
+                processing_status = gr.Markdown("", visible=False)
+                
                 with gr.Row():
                     with gr.Column():
                         voice_input = gr.Audio(
@@ -944,7 +985,29 @@ def create_interface():
             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, "음성을 먼저 녹음해주세요.", "", "", "", gr.update(visible=False)
+            
+            try:
+                processing_status.update(value="분석 중입니다...", visible=True)
+                result = analyze_voice(audio_data, state)
+                processing_status.update(value="", visible=False)
+                return (*result, gr.update(visible=False))
+            except Exception as e:
+                print(f"Voice analysis error: {str(e)}")
+                return (
+                    state,
+                    "음성 분석 중 오류가 발생했습니다. 다시 시도해주세요.",
+                    "",
+                    "",
+                    "",
+                    gr.update(visible=False)
+                )
 
+            
         # 이벤트 연결
         name_submit_btn.click(
             fn=handle_name_submit,
@@ -985,9 +1048,9 @@ def create_interface():
         )
 
         analyze_btn.click(
-            fn=analyze_voice,
+            fn=safe_analyze_voice,
             inputs=[voice_input, state],
-            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt]
+            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, processing_status]
         )
 
         generate_btn.click(
@@ -1004,16 +1067,83 @@ def create_interface():
     return app
 
 if __name__ == "__main__":
-    # 필요한 디렉토리 생성
-    for directory in ['static/icons', 'assets', 'templates', 'data', 'generated_images']:
-        os.makedirs(directory, exist_ok=True)
-
-    # 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;
+                        }
+                    );
+                })
+        );
+    });
+    """
+    
+    # 서비스 워커 파일 생성
+    with open('static/service-worker.js', 'w') as f:
+        f.write(sw_content)
 
-    # Gradio 인터페이스 생성 및 실행
+    # Gradio 앱 실행
     demo = create_interface()
-    demo.launch(
+    demo.queue(concurrency_count=4).launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=True,