Update app.py

app.py

@@ -575,6 +575,7 @@ def safe_state_update(state, updates):
         return state
 
 def create_interface():
+    db = SimpleDB()  # DB 객체 초기화 추가
     import base64
     
     # initial_state 정의
@@ -617,7 +618,7 @@ def create_interface():
     AUDIO_PLAYER_HTML = """
     <div class="audio-player-container">
         <audio id="mainAudio" preload="auto">
-            <source src="/assets/main_music.mp3" type="audio/mp3">
+            <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">
@@ -631,6 +632,7 @@ def create_interface():
         
         function togglePlay() {
             if (!isPlaying) {
+                audioElement.load();  // 재생 전 로드 추가
                 audioElement.play()
                 .then(() => {
                     isPlaying = true;
@@ -647,20 +649,17 @@ def create_interface():
             }
         }
         
-        // 페이지 벗어날 때 오디오 정지
-        window.addEventListener('beforeunload', function() {
-            if (audioElement) {
-                audioElement.pause();
-                audioElement.currentTime = 0;
-            }
+        audioElement.addEventListener('ended', function() {
+            isPlaying = false;
+            playButtonText.textContent = '재생';
         });
         
-        // 오디오 로딩 에러 처리
         audioElement.addEventListener('error', function(e) {
             console.error("Audio error:", e);
             alert("음악 파일을 불러오는데 실패했습니다. 페이지를 새로고침해주세요.");
         });
     </script>
+
     <style>
         .audio-player-container {
             margin: 20px 0;
@@ -696,33 +695,33 @@ def create_interface():
     """
 
     css = """
-        /* 기존 CSS 유지 */
+        /* 전체 컨테이너 width 제한 */
         .gradio-container {
-            max-width: 100% !important;
-            padding: 0 !important;
+            margin: 0 auto !important;
+            max-width: 800px !important;
+            padding: 1rem !important;
         }
-        
-        /* 모바일 최적화 */
+
+        /* 모바일 뷰 */
         @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;
+            .container { padding: 10px !important; }
+            .gradio-row { 
+                flex-direction: column !important;
+                gap: 10px !important;
             }
-            .gradio-button {
+            .gradio-button { 
+                width: 100% !important; 
+                margin: 5px 0 !important;
                 min-height: 44px !important;
-                margin: 10px 0 !important;
             }
-            input[type="text"], textarea {
-                font-size: 16px !important;
-                padding: 12px !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;
             }
         }
         
@@ -742,12 +741,69 @@ def create_interface():
                 margin: 0 auto;
                 display: block;
             }
+            /* 데스크탑에서 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="디지털 굿판 로고 모바일">
@@ -835,9 +891,7 @@ def create_interface():
             # 기원 탭
             with gr.TabItem("기원") as tab_wish:
                 gr.Markdown("## 기원 - 소원을 전해보세요")
-                
-                # 상태 표시 추가
-                processing_status = gr.Markdown("", visible=False)
+                status_display = gr.Markdown("", visible=False)  # 상태 표시용 컴포넌트
                 
                 with gr.Row():
                     with gr.Column():
@@ -845,12 +899,13 @@ def create_interface():
                             label="소원을 나누고 싶은 마음을 말해주세요",
                             sources=["microphone"],
                             type="numpy",
-                            streaming=False
+                            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="인식된 텍스트",
@@ -1043,25 +1098,24 @@ def create_interface():
                 print(f"Error saving wish: {e}")
                 return "오류가 발생했습니다.", []
                 
-        def safe_analyze_voice(audio_data, state):
-            """음성 분석 함수에 안전장치 추가"""
+        def safe_analyze_voice(audio_data, current_state):
             if audio_data is None:
-                return state, "음성을 먼저 녹음해주세요.", "", "", "", gr.update(visible=False)
+                return current_state, "음성을 먼저 녹음해주세요.", "", "", "", gr.update(visible=True)
             
             try:
-                processing_status.update(value="분석 중입니다...", visible=True)
-                result = analyze_voice(audio_data, state)
-                processing_status.update(value="", visible=False)
+                status_display.update(value="분석 중입니다...", visible=True)
+                result = analyze_voice(audio_data, current_state)
+                status_display.update(value="", visible=False)
                 return (*result, gr.update(visible=False))
             except Exception as e:
                 print(f"Voice analysis error: {str(e)}")
                 return (
-                    state,
+                    current_state,
                     "음성 분석 중 오류가 발생했습니다. 다시 시도해주세요.",
                     "",
                     "",
                     "",
-                    gr.update(visible=False)
+                    gr.update(visible=True)
                 )
 
             
@@ -1102,7 +1156,7 @@ def create_interface():
         analyze_btn.click(
             fn=safe_analyze_voice,
             inputs=[voice_input, state],
-            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, processing_status]
+            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, status_display]
         )
 
         generate_btn.click(