Spaces:

haepada
/

roots

Running

App Files Files Community

haepada commited on Nov 8, 2024

Commit

8101c4f

verified ·

1 Parent(s): e8f1811

Update app.py

Browse files

Files changed (1) hide show

app.py +142 -31

app.py CHANGED Viewed

@@ -525,12 +525,12 @@ self.addEventListener('fetch', event => {
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>디지털 굿판</title>
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#0b0f19">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-title" content="디지털 굿판">
     <link rel="apple-touch-icon" href="/static/icons/icon-152x152.png">
     <style>
@@ -549,13 +549,13 @@ self.addEventListener('fetch', event => {
             background: black;
             z-index: 1000;
         }
-       #gradio-app {
             background: #0b0f19 !important;
     </style>
     <script>
         // 페이지 로드 시 상단으로 스크롤
         window.addEventListener('load', function() {
-            // 약간의 지연을 주어 컨텐츠가 모두 로드된 후 스크롤
             setTimeout(() => {
                 window.scrollTo(0, 0);
             }, 100);
@@ -579,32 +579,41 @@ self.addEventListener('fetch', event => {
             }
         }
-        // PWA 설치 관련
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', function() {
-                setTimeout(() => {
-                    window.scrollTo(0, 0);
-                }, 100);
-            });
-        // 화면 꺼짐 방지
-        async function preventSleep() {
-            try {
-                if ('wakeLock' in navigator) {
-                    const wakeLock = await navigator.wakeLock.request('screen');
-                    console.log('화면 켜짐 유지 활성화');
-                    document.addEventListener('visibilitychange', async () => {
-                        if (document.visibilityState === 'visible') {
-                            await preventSleep();
-                        }
-                    });
-                }
-            } catch (err) {
-                console.log('화면 켜짐 유지 실패:', err);
             }
         }
-        // 서비스 워커 등록
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', async () => {
                 try {
@@ -944,8 +953,9 @@ def create_interface():
             color: #4a90e2 !important;
         }
         }
      /* Hugging Face 로고 숨기기 */
-        div.gr-header {
             display: none !important;
         }
@@ -1037,6 +1047,65 @@ def create_interface():
                 background: #000000;
             }
         }
     """
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
@@ -1113,12 +1182,26 @@ def create_interface():
             with gr.TabItem("청신") as tab_listen:
                 gr.Markdown("## 청신 - 신을 부르기 위한 정화 의식")
                 gr.Markdown("""
                 **청신(淸神)** 단계는 신을 부르는 의식으로, 정화와 연결의 의미를 담고 있습니다.
                 이 단계에서는 참여자가 도시의 번잡함에서 벗어나 내면의 고요함을 찾고 신성과의 교감을 시작하게 됩니다.
                 본격적인 의식을 시작하기 전, 마음을 정화하고 감각을 열어 경험에 몰입할 준비를 마치세요
                 **보다 몰입된 경험을 위해**
                 이 경험은 부산 동래구 온천장역에서 시작하여, 금정구 장전역까지 온천천을 따라 신화적 공간과 연결될 수 있도록 설계되었습니다.
                 특히 이곳에서 시작하면 온천천의 자연스러운 소리와 금샘의 생명력을 더욱 깊이 느낄 수 있습니다.
@@ -1572,13 +1655,41 @@ def create_interface():
         analyze_btn.click(
             fn=safe_analyze_voice,
             inputs=[voice_input, state],
-            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, status_display]
         )
         generate_btn.click(
             fn=generate_image_from_prompt,
             inputs=[final_prompt],
-            outputs=[result_image]
         )
         save_final_btn.click(

 <html lang="ko">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>디지털 굿판</title>
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#0b0f19">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="디지털 굿판">
     <link rel="apple-touch-icon" href="/static/icons/icon-152x152.png">
     <style>
             background: black;
             z-index: 1000;
         }
+        #gradio-app {
             background: #0b0f19 !important;
+        }
     </style>
     <script>
         // 페이지 로드 시 상단으로 스크롤
         window.addEventListener('load', function() {
             setTimeout(() => {
                 window.scrollTo(0, 0);
             }, 100);
             }
         }
+        // 로딩 상태 관리 함수들
+        function showLoading(buttonId, loadingText) {
+            // 버튼 비활성화
+            const button = document.getElementById(buttonId);
+            if (button) {
+                button.disabled = true;
+                button.innerHTML = loadingText;
+            }
+            // 로딩 오버레이 표시
+            const overlay = document.createElement('div');
+            overlay.className = 'processing-overlay';
+            overlay.innerHTML = `
+                <div class="loading-spinner"></div>
+                <div class="loading-text">${loadingText}</div>
+            `;
+            document.body.appendChild(overlay);
+        }
+        function hideLoading(buttonId, originalText) {
+            // 버튼 활성화
+            const button = document.getElementById(buttonId);
+            if (button) {
+                button.disabled = false;
+                button.innerHTML = originalText;
+            }
+            // 로딩 오버레이 제거
+            const overlay = document.querySelector('.processing-overlay');
+            if (overlay) {
+                overlay.remove();
             }
         }
+        // PWA 설치 관련
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', async () => {
                 try {
             color: #4a90e2 !important;
         }
         }
      /* Hugging Face 로고 숨기기 */
+        .div.gr-header {
             display: none !important;
         }
                 background: #000000;
             }
         }
+            /* 로딩 상태 표시 */
+        .processing-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(11, 15, 25, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .loading-spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #4a90e2;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        .loading-text {
+            position: absolute;
+            top: 60%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 18px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* 버튼 비활성화 스타일 */
+        .gradio-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        /* 이미지 컨테이너 스타일 */
+        .location-image-container,
+        .oncheon-image-container {
+            width: 100%;
+            margin: 1rem 0;
+            text-align: center;
+        }
+        .location-image,
+        .oncheon-image {
+            width: 100%;
+            max-width: 600px;
+            height: auto;
+            border-radius: 12px;
+            margin: 0 auto;
+        }
     """
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
             with gr.TabItem("청신") as tab_listen:
                 gr.Markdown("## 청신 - 신을 부르기 위한 정화 의식")
+                # 온천 이미지 추가
+                oncheon_image = encode_image_to_base64("static/oncheon.png")
+                gr.HTML(f"""
+                <div class="oncheon-image-container">
+                    <img src="data:image/png;base64,{oncheon_image}" alt="온천천 이미지" class="oncheon-image">
+                </div>
+                """)
                 gr.Markdown("""
                 **청신(淸神)** 단계는 신을 부르는 의식으로, 정화와 연결의 의미를 담고 있습니다.
                 이 단계에서는 참여자가 도시의 번잡함에서 벗어나 내면의 고요함을 찾고 신성과의 교감을 시작하게 됩니다.
                 본격적인 의식을 시작하기 전, 마음을 정화하고 감각을 열어 경험에 몰입할 준비를 마치세요
+                """)
+                location_image = encode_image_to_base64("static/location.png")
+                gr.HTML(f"""
+                <div class="location-image-container">
+                    <img src="data:image/png;base64,{location_image}" alt="위치 안내 이미지" class="location-image">
+                </div>
+                """)
+                gr.Markdown("""
                 **보다 몰입된 경험을 위해**
                 이 경험은 부산 동래구 온천장역에서 시작하여, 금정구 장전역까지 온천천을 따라 신화적 공간과 연결될 수 있도록 설계되었습니다.
                 특히 이곳에서 시작하면 온천천의 자연스러운 소리와 금샘의 생명력을 더욱 깊이 느낄 수 있습니다.
         analyze_btn.click(
             fn=safe_analyze_voice,
             inputs=[voice_input, state],
+            outputs=[state, transcribed_text, voice_emotion, text_emotion, final_prompt, status_display],
+            _js=f"""
+            async (voice_input, state) => {{
+                if (!voice_input) {{
+                    return;
+                }}
+                showLoading('analyze-btn', '분석 중...');
+                try {{
+                    const result = await original_fn(voice_input, state);
+                    return result;
+                }} finally {{
+                    hideLoading('analyze-btn', '소원 분석하기');
+                }}
+            }}
+            """
         )
         generate_btn.click(
             fn=generate_image_from_prompt,
             inputs=[final_prompt],
+            outputs=[result_image],
+            _js=f"""
+            async (prompt) => {{
+                if (!prompt) {{
+                    return;
+                }}
+                showLoading('generate-btn', '그림 생성 중...');
+                try {{
+                    const result = await original_fn(prompt);
+                    return result;
+                }} finally {{
+                    hideLoading('generate-btn', '마음의 그림 그리기');
+                }}
+            }}
+            """
         )
         save_final_btn.click(