Update app.py

app.py

@@ -221,8 +221,13 @@ 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)
                     
-                    # 새로 추가된 부분: 임베디드 Space iframe
-                    embedded_space = gr.HTML(label="Embedded Space", elem_id="embedded-space")
+                    # 웹 컴포넌트를 위한 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>
+                        """
+                    )
                     
                     update_trigger = gr.Button("Update Screenshot", visible=False)
 
@@ -236,11 +241,16 @@ def create_ui():
                         inputs=[url_state, last_url_state],
                         outputs=[screenshot_output, last_url_state]
                     ).then(
-                        lambda url: f'<iframe src="{url}" id="embedded-space"></iframe>',
+                        lambda url: f"""
+                        <script>
+                            document.getElementById('embedded-gradio-app').setAttribute('src', '{url}');
+                        </script>
+                        """,
                         inputs=[url_state],
                         outputs=[embedded_space]
                     )
 
+
                 def refresh_screenshot(url, last_url):
                     print(f"Refresh button clicked. URL: {url}, Last URL: {last_url}")
                     return update_screenshot(url, last_url)