Update app.py

app.py

@@ -190,6 +190,35 @@ def create_ui():
             height: 600px;
             border: none;
         }
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 600px;
+            overflow: hidden;
+        }
+        .iframe-container iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .loading-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            z-index: 1000;
+        }
+        .error-message {
+            color: red;
+            font-weight: bold;
+            text-align: center;
+        }
         """
 
         with gr.Blocks(css=css, theme="Nymbo/Nymbo_Theme") as demo:
@@ -221,17 +250,34 @@ def create_ui():
                     with gr.Group(elem_classes="output-group"):
                         app_py_content = gr.Code(language="python", label="메인 소스코드", elem_id="app-py-content", lines=None, max_lines=None)
                     
-                    # 웹 컴포넌트를 위한 HTML 요소
+                    # iframe을 위한 HTML 요소
                     embedded_space = gr.HTML(
                         """
-                        <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.36.1/gradio.js"></script>
-                        <gradio-app id="embedded-gradio-app" style="width:100%;height:600px;"></gradio-app>
+                        <div class="iframe-container">
+                            <div id="loading-overlay" class="loading-overlay">로딩 중...</div>
+                            <iframe id="space-iframe" src="about:blank" onload="hideLoading()"></iframe>
+                        </div>
+                        <div id="error-message" class="error-message"></div>
                         <script>
-                        function updateGradioApp(url) {
-                            const app = document.getElementById('embedded-gradio-app');
-                            if (app) {
-                                app.setAttribute('src', url);
-                            }
+                        function hideLoading() {
+                            document.getElementById('loading-overlay').style.display = 'none';
+                        }
+                        function showLoading() {
+                            document.getElementById('loading-overlay').style.display = 'flex';
+                        }
+                        function updateIframe(url) {
+                            showLoading();
+                            const iframe = document.getElementById('space-iframe');
+                            const errorMessage = document.getElementById('error-message');
+                            iframe.src = url;
+                            iframe.onload = function() {
+                                hideLoading();
+                                errorMessage.textContent = '';
+                            };
+                            iframe.onerror = function() {
+                                hideLoading();
+                                errorMessage.textContent = 'Space를 로드하는 데 실패했습니다. 새 탭에서 열어보세요.';
+                            };
                         }
                         </script>
                         """
@@ -242,7 +288,7 @@ def create_ui():
                 def update_embedded_space(url):
                     return f"""
                     <script>
-                    updateGradioApp("{url}");
+                    updateIframe("{url}");
                     </script>
                     """
 
@@ -262,7 +308,6 @@ def create_ui():
                     )
 
 
-
                 def refresh_screenshot(url, last_url):
                     print(f"Refresh button clicked. URL: {url}, Last URL: {last_url}")
                     return update_screenshot(url, last_url)