Update app.py

app.py

@@ -269,9 +269,10 @@ def create_ui():
                 with gr.Column(scale=1):
                     search_input = gr.Textbox(label="Search Spaces", placeholder="Enter search query...")
                     space_list = gr.HTML()
+                    space_state = gr.State(formatted_spaces)
 
-                    def update_space_list(query):
-                        filtered_spaces = search_spaces(query, formatted_spaces) if query else formatted_spaces
+                    def update_space_list(query, spaces):
+                        filtered_spaces = search_spaces(query, spaces) if query else spaces
                         html = "<div class='space-list'>"
                         for i, space in enumerate(filtered_spaces):
                             html += f"""
@@ -283,7 +284,7 @@ def create_ui():
                         html += "</div>"
                         return html, filtered_spaces
 
-                    search_input.change(update_space_list, inputs=[search_input], outputs=[space_list, gr.State()])
+                    search_input.change(update_space_list, inputs=[search_input, space_state], outputs=[space_list, space_state])
 
                 with gr.Column(scale=2):
                     with gr.Tabs():
@@ -313,7 +314,8 @@ def create_ui():
                     
                     update_trigger = gr.Button("Update Screenshot", visible=False)
 
-            def on_select_with_link(space):
+            def on_select_with_link(space_index, spaces):
+                space = spaces[space_index]
                 info, app_content, url, tree, list_structure = on_select(space)
                 info += f"\n\n선택한 Space URL: {url}"
                 return info, app_content, url, tree, list_structure
@@ -353,27 +355,30 @@ def create_ui():
                 outputs=[screenshot_output, last_url_state]
             )
 
-        # JavaScript 코드를 추가하기 위해 js 함수를 사용합니다.
-        demo.load(js="""
-        function selectSpace(index) {
-            var spaces = document.querySelector('#space-list-state').textContent;
-            var spaceData = JSON.parse(spaces)[index];
-            gradioApp().querySelector('#info-output textarea').value = "로딩 중...";
-            gradioApp().querySelector('#app-py-content textarea').value = "로딩 중...";
-            gradioApp().querySelector('#tree-view textarea').value = "로딩 중...";
-            gradioApp().querySelector('#list-view textarea').value = "로딩 중...";
-            
-            // Gradio 함수 호출
-            var onSelectWithLink = gradioApp().querySelector('gradio-app').shadowRoot.querySelector('#on_select_with_link');
-            onSelectWithLink.props.action_fn(spaceData);
-        }
-        """)
+            # JavaScript 코드를 추가하기 위해 js 함수를 사용합니다.
+            demo.load(js="""
+            function selectSpace(index) {
+                document.querySelector('#space-index').value = index;
+                document.querySelector('#select-space-trigger').click();
+            }
+            """)
+
+            # Hidden elements for space selection
+            space_index = gr.Textbox(elem_id="space-index", visible=False)
+            select_space_trigger = gr.Button("Hidden Select Trigger", visible=False, elem_id="select-space-trigger")
+
+            select_space_trigger.click(
+                on_select_with_link,
+                inputs=[space_index, space_state],
+                outputs=[info_output, app_py_content, url_state, tree_view, list_view]
+            ).then(
+                update_screenshot,
+                inputs=[url_state, last_url_state],
+                outputs=[screenshot_output, last_url_state]
+            )
 
         demo.queue()
 
-        # Gradio 인터페이스에 Python 함수 연결
-        demo.load(on_select_with_link, inputs="state", outputs=[info_output, app_py_content, url_state, tree_view, list_view])
-
         # Start a background thread to trigger updates
         def trigger_updates():
             while True:
@@ -395,4 +400,4 @@ if __name__ == "__main__":
         demo.launch()
     except Exception as e:
         print(f"Error in main: {str(e)}")
-        print(traceback.format_exc())                                                
+        print(traceback.format_exc())