Update app.py

app.py

@@ -220,6 +220,8 @@ def search_spaces(query: str, spaces: List[Dict]) -> List[Dict]:
            query in space.get('description', '').lower()
     ]
 
+
+
 def create_ui():
     try:
         spaces_list = get_most_liked_spaces()
@@ -271,17 +273,17 @@ def create_ui():
                     def update_space_list(query):
                         filtered_spaces = search_spaces(query, formatted_spaces) if query else formatted_spaces
                         html = "<div class='space-list'>"
-                        for space in filtered_spaces:
+                        for i, space in enumerate(filtered_spaces):
                             html += f"""
                             <div class='space-row'>
                                 <span>{space['name']} by {space['author']} (Likes: {space['likes']})</span>
-                                <button class='select-space' data-space='{json.dumps(space)}'>선택</button>
+                                <button class='select-space' onclick='selectSpace({i})'>선택</button>
                             </div>
                             """
                         html += "</div>"
-                        return html
+                        return html, filtered_spaces
 
-                    search_input.change(update_space_list, inputs=[search_input], outputs=[space_list])
+                    search_input.change(update_space_list, inputs=[search_input], outputs=[space_list, gr.State()])
 
                 with gr.Column(scale=2):
                     with gr.Tabs():
@@ -311,26 +313,11 @@ def create_ui():
                     
                     update_trigger = gr.Button("Update Screenshot", visible=False)
 
-            # Hidden elements to pass data
-            space_data = gr.Textbox(elem_id="space-data", visible=False)
-            on_select_trigger = gr.Button("Hidden Select Trigger", visible=False, elem_id="on-select-function")
-
-            def on_select_with_link(space_json):
-                space = json.loads(space_json)
+            def on_select_with_link(space):
                 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
 
-            on_select_trigger.click(
-                on_select_with_link,
-                inputs=[space_data],
-                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]
-            )
-
             def open_space_in_browser(url):
                 if url:
                     import webbrowser
@@ -368,17 +355,25 @@ def create_ui():
 
         # JavaScript 코드를 추가하기 위해 js 함수를 사용합니다.
         demo.load(js="""
-        function() {
-            document.addEventListener('click', function(e) {
-                if (e.target.classList.contains('select-space')) {
-                    var spaceData = JSON.stringify(JSON.parse(e.target.getAttribute('data-space')));
-                    document.querySelector('#space-data').value = spaceData;
-                    document.querySelector('#on-select-function').click();
-                }
-            });
+        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);
         }
         """)
 
+        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:
@@ -400,4 +395,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())