Update app.py

app.py

@@ -586,9 +586,33 @@ def create_interface():
         "final_prompt": "",
         "image_path": None,
         "current_tab": 0,
-        "audio_playing": False  # 오디오 상태 추가
+        "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">
@@ -634,26 +658,6 @@ def create_interface():
             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 = """
@@ -663,29 +667,47 @@ def create_interface():
             padding: 0 !important;
         }
         
-        .audio-container {
-            margin: 20px 0;
-            width: 100%;
-        }
-        
         /* 모바일 최적화 */
         @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;
+            }
             .gradio-button {
-                min-height: 44px !important;  /* iOS 터치 타겟 사이즈 */
+                min-height: 44px !important;
                 margin: 10px 0 !important;
             }
-            
-            .container {
-                padding: 10px !important;
-            }
-            
-            /* 입력 필드 최적화 */
-            input[type="text"], 
-            textarea {
-                font-size: 16px !important;  /* iOS auto-zoom 방지 */
+            input[type="text"], textarea {
+                font-size: 16px !important;
                 padding: 12px !important;
             }
         }
+        
+        /* 데스크톱 뷰 */
+        @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;
+            }
+        }
     """
 
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app: