Update app.py

app.py

@@ -599,9 +599,10 @@ def create_interface():
             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 = """
@@ -616,75 +617,35 @@ def create_interface():
         """
     
     # HTML5 Audio Player 템플릿
+    main_image_html = """
+     <div class="main-image-container">
+        <img src="data:image/png;base64,{main_image}" alt="디지털 굿판 메인 이미지" class="main-image">
+     </div>
+            """
     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 controls class="audio-player">
+            <source src="/assets/main_music.mp3" type="audio/mpeg">
+            브라우저가 오디오 태그를 지원하지 않습니다.
         </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%;
+            max-width: 800px;
+            margin: 20px auto;
             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);
+        .audio-player {
+            width: 100%;
+            max-width: 300px;
+            margin: 0 auto;
         }
         @media (max-width: 600px) {
-            .custom-audio-button {
+            .audio-player {
                 width: 100%;
             }
         }
-    </style>
     """
 
     css = """
@@ -863,11 +824,7 @@ def create_interface():
         with gr.Tabs(selected=0) as tabs:
             # 입장 탭 (축원 포함)
             with gr.TabItem("입장") as tab_entrance:
-                gr.HTML("""
-                    <div class="main-image-container">
-                        <img src="static/main-image.png" alt="디지털 굿판 메인 이미지" class="main-image">
-                    </div>
-                """)
+                gr.HTML(main_image_html) 
                 # 1단계: 첫 화면
                 welcome_section = gr.Column(visible=True)
                 with welcome_section:
@@ -935,12 +892,7 @@ def create_interface():
                 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>
-                    """)
+                    gr.HTML(AUDIO_PLAYER_HTML)
                 
                 with gr.Column():
                     reflection_input = gr.Textbox(
@@ -1023,11 +975,7 @@ def create_interface():
                     wrap=True
                 )
             with gr.TabItem("프로젝트 소개") as tab_intro:
-                gr.HTML("""
-                    <div class="main-image-container">
-                        <img src="static/main-image.png" alt="디지털 굿판 메인 이미지" class="main-image">
-                    </div>
-                """)
+                gr.HTML(main_image_html)
                 gr.Markdown("""
                 # 디지털 굿판 프로젝트
                 ‘디지털 굿판’은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.