Update app.py

app.py

@@ -114,15 +114,15 @@ def create_ui():
         with gr.Row():
             with gr.Column(scale=1):
                 space_table = gr.HTML(create_table_html(formatted_spaces))
+                selected_index = gr.State(-1)
             
             with gr.Column(scale=1):
                 info_output = gr.Textbox(label="Space 정보 및 요약", lines=10)
                 app_py_content = gr.Code(language="python", label="app.py 내용")
 
-        def on_select(space_index):
+        def on_select(index):
             try:
-                space_index = int(space_index)
-                selected_space = formatted_spaces[space_index]
+                selected_space = formatted_spaces[index]
                 summary = summarize_space(selected_space)
                 app_content = get_app_py_content(selected_space['id'])
                 info = f"선택된 Space: {selected_space['name']} (ID: {selected_space['id']})\n"
@@ -136,15 +136,18 @@ def create_ui():
                 print(traceback.format_exc())
                 return f"오류가 발생했습니다: {str(e)}", ""
 
-        demo.load(None, None, None, _js="""
+        # JavaScript to handle button clicks
+        js_code = """
         function selectSpace(index) {
             document.querySelectorAll('button').forEach(btn => btn.classList.remove('selected'));
             event.target.classList.add('selected');
-            gradio('on_select', index);
+            selectedIndex.update(index);
         }
-        """)
+        """
+        demo.load(None, None, None)
+        gr.HTML(f"<script>{js_code}</script>")
 
-        demo.load(on_select, None, [info_output, app_py_content], _js="(x) => selectedIndex")
+        selected_index.change(on_select, inputs=[selected_index], outputs=[info_output, app_py_content])
 
     return demo