Update app.py

app.py

@@ -607,6 +607,7 @@ def create_interface():
             .gradio-dataframe {
                 overflow-x: auto !important;
                 max-width: 100% !important;
+            
             }
         }
     
@@ -617,12 +618,44 @@ def create_interface():
         .gradio-button:active {
             transform: scale(0.98);
         }
+        #intro-section {
+            text-align: center;
+            padding: 0;
+            margin: 0;
+        }
+        /* 로고 이미지 스타일 */
+        .logo-container {
+            text-align: center;
+            margin-top: 20px;
+        }
+        
+        .logo-image {
+            width: 150px; /* 로고 크기 */
+            margin: 0 auto;
+            display: block;
+        }
+        
+        /* 메인 이미지 스타일 */
+        .main-image-container {
+            text-align: center;
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+        
+        .main-image {
+            width: 100%; /* 화면 폭에 맞춤 */
+            max-width: 100%; /* 모바일 화면에도 맞추기 */
+            height: auto; /* 비율 유지 */
+            margin: 0 auto;
+            display: block;
+            border-radius: 8px; /* 모서리 둥글게 */
+        }
     """
 
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
         state = gr.State(value=initial_state)
         
-        gr.Markdown("# 디지털 굿판")
+        gr.Markdown("![디지털 굿판 로고](static/DIGITAL_GUTPAN_LOGO.png)"
         gr.Markdown("""
         1. 입장 → 2. 청신 → 3. 기원 → 4. 송신 
         순서대로 진행해주세요.
@@ -632,8 +665,17 @@ def create_interface():
             # 입장 탭 (축원 포함)
             with gr.TabItem("입장") as tab_entrance:
                 # 1단계: 첫 화면
-                welcome_section = gr.Column(visible=True)
-                with welcome_section:
+                with gr.Column(visible=True) as welcome_section:
+                    # 로고 이미지 추가
+                    gr.Image(
+                        value="static/main-image.png",  # 이미지 경로를 설정합니다.
+                        label=None,
+                        show_label=False,
+                        interactive=False,
+                        elem_id="main-image"  # CSS 스타일을 지정하기 위해 ID 설정
+                    )
+        
+                    # 기존 텍스트 및 다른 요소들
                     gr.Markdown(WELCOME_MESSAGE)
                     name_input = gr.Textbox(
                         label="이름을 알려주세요",
@@ -641,7 +683,7 @@ def create_interface():
                         interactive=True
                     )
                     name_submit_btn = gr.Button("굿판 시작하기", variant="primary")
-            
+
                 # 2단계: 세계관 설명
                 story_section = gr.Column(visible=False)
                 with story_section: