Update app.py

app.py

@@ -694,6 +694,23 @@ def create_interface():
     </div>
     """
 
+    # 모바일 및 데스크톱용 위치 이미지를 Base64로 인코딩
+    location_image_mobile = encode_image_to_base64("static/location.png")
+    location_image_desktop = encode_image_to_base64("static/location_w.png")
+    
+    # location_html 정의
+    if not location_image_mobile or not location_image_desktop:
+        location_html = """
+            <div style="text-align: center; padding: 20px;">
+                <h2>위치 안내</h2>
+            </div>
+        """
+    else:
+        location_html = f"""
+            <img class="location-image-mobile" src="data:image/png;base64,{location_image_mobile}" alt="위치 안내 이미지 (모바일)">
+            <img class="location-image-desktop" src="data:image/png;base64,{location_image_desktop}" alt="위치 안내 이미지 (데스크톱)">
+        """
+
     css = """
         /* 전체 컨테이너 width 제한 */
         .gradio-container {
@@ -704,6 +721,14 @@ def create_interface():
 
         /* 모바일 뷰 */
         @media (max-width: 600px) {
+            .location-image-mobile { 
+                display: none !important; 
+            }
+            .location-image-desktop {
+                display: block !important;
+                width: 100%;
+                height: auto;
+            }
             .mobile-logo { 
                 display: none !important; 
             }
@@ -740,6 +765,14 @@ def create_interface():
         
         /* 데스크톱 뷰 (601px 이상) */
         @media (min-width: 601px) {
+            .location-image-desktop { 
+                display: none !important; 
+            }
+            .location-image-mobile {
+                display: block !important;
+                width: 100%;
+                height: auto;
+            }
             .main-image {
                 width: 600px;
                 max-width: 600px;
@@ -763,10 +796,6 @@ def create_interface():
                 overflow-x: auto !important;
                 max-width: 100% !important;
             }
-        }
-        
-        /* 데스크톱 뷰 */
-        @media (min-width: 601px) {
             .logo-container { 
                 padding: 20px 0;
                 width: 100%;
@@ -1093,7 +1122,8 @@ def create_interface():
         /* 이미지 컨테이너 스타일 */
         .location-image-container {
             width: 100%;
-            margin: 1rem 0;
+            max-width: 800px;
+            margin: 20px auto;
             text-align: center;
         }
         
@@ -1196,17 +1226,8 @@ def create_interface():
                 본격적인 의식을 시작하기 전, 마음을 정화하고 감각을 열어 경험에 몰입할 준비를 마치세요
                 """)
                 location_image = encode_image_to_base64("static/location.png")
-                gr.HTML("""
-                <div class="location-image-container">
-                    <picture>
-                        <!-- 모바일 이미지 -->
-                        <source media="(max-width: 600px)" srcset="static/location.png">
-                        <!-- 데스크톱 이미지 -->
-                        <source media="(min-width: 601px)" srcset="static/location_w.png">
-                        <img src="static/location.png" alt="위치 안내 이미지" class="location-image">
-                    </picture>
-                </div>
-                """)
+                with gr.Column():
+                    gr.HTML(location_html)
                 gr.Markdown("""
                 **보다 몰입된 경험을 위해**  
                 이 경험은 부산 동래구 온천장역에서 시작하여, 금정구 장전역까지 온천천을 따라 신화적 공간과 연결될 수 있도록 설계되었습니다.