Update app.py

app.py

@@ -377,16 +377,94 @@ def safe_state_update(state, updates):
         return state
         
 def create_gradio_interface():
-    # ... (기존 Gradio 인터페이스 코드)
+    css = """
+        @media (max-width: 600px) {
+            .container { padding: 10px !important; }
+            .gradio-row { 
+                flex-direction: column !important;
+                gap: 10px !important;
+            }
+            .gradio-button { 
+                width: 100% !important; 
+                margin: 5px 0 !important;
+                min-height: 44px !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;
+            }
+            .container { 
+                padding: 10px !important; 
+                overflow-x: hidden !important;
+            }
+            .gradio-row { 
+                flex-direction: column !important;
+                gap: 10px !important;
+            }
+            .gradio-button { 
+                width: 100% !important; 
+                margin: 5px 0 !important;
+                min-height: 44px !important;
+                touch-action: manipulation !important;
+                user-select: none !important;
+            }
+        }
+        
+        /* 전반적인 UI 개선 */
+        .gradio-button {
+            transition: all 0.3s ease;
+        }
+        .gradio-button:active {
+            transform: scale(0.98);
+        }
+        
+        /* 모바일 최적화 */
+        * {
+            -webkit-tap-highlight-color: transparent;
+            -webkit-touch-callout: none;
+        }
+        
+        .record-button {
+            position: relative !important;
+            touch-action: manipulation !important;
+        }
+    """
+    
     with gr.Blocks(
         theme=gr.themes.Soft(),
         css=css,
         analytics_enabled=False,
         title="디지털 굿판"
     ) as demo:
-        # ... (기존 인터페이스 코드)
+        demo = create_interface()
         return demo
 
+# 실행 코드 수정
+if __name__ == "__main__":
+    # 필요한 디렉토리 생성
+    for directory in ['static/icons', 'assets', 'templates', 'data', 'generated_images']:
+        os.makedirs(directory, exist_ok=True)
+
+    # PWA 파일 존재 확인 및 생성 (기존 코드 유지)
+
+    # Gradio 앱 생성
+    demo = create_gradio_interface()
+    
+    # Flask 앱에 Gradio 마운트
+    app = gr.mount_gradio_app(app, demo, path="/gradio")
+    
+    # Flask 서버 실행
+    app.run(
+        host="0.0.0.0",
+        port=7860,
+        debug=True
+    )
+
 # Gradio 앱 생성
 demo = create_gradio_interface()