Update app.py

app.py

@@ -56,55 +56,6 @@ def create_trend_chart(space_id, daily_ranks_df):
         print(f"Error creating chart: {e}")
         return None
 
-def create_space_card(space_info):
-    # 순위에 따른 파스텔 색상 계산
-    hue = 210  # 파란색 계열
-    saturation = max(30, 90 - (space_info['rank'] / 100 * 60))  # 순위가 높을수록 더 선명한 색상
-    lightness = min(97, 85 + (space_info['rank'] / 100 * 10))  # 순위가 높을수록 더 밝은 색상
-    
-    return f"""
-    <div class="space-card" 
-         data-space-id="{space_info['id']}"
-         style="
-        border: 1px solid #e5e7eb;
-        border-radius: 8px;
-        padding: 16px;
-        margin: 8px;
-        background-color: hsl({hue}, {saturation}%, {lightness}%);
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        display: inline-block;
-        width: 250px;
-        vertical-align: top;
-        cursor: pointer;
-        transition: all 0.2s;
-    "
-    onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';"
-    onmouseout="this.style.transform='none';this.style.boxShadow='0 1px 3px rgba(0,0,0,0.1)';"
-    >
-        <div style="font-size: 1.2em; font-weight: bold; margin-bottom: 8px;">
-            #{int(space_info['rank'])}
-        </div>
-        <div style="margin-bottom: 8px;">
-            {space_info['id']}
-        </div>
-        <div style="color: #666; margin-bottom: 12px;">
-            Score: {space_info['trendingScore']:.2f}
-        </div>
-        <div style="display: flex; gap: 8px;">
-            <a href="https://huggingface.co/spaces/{space_info['id']}" 
-               target="_blank" 
-               style="padding: 6px 12px; background-color: white; color: #2563eb; text-decoration: none; border-radius: 4px; font-size: 0.9em; border: 1px solid #2563eb;"
-               onclick="event.stopPropagation();">
-                View Space ↗
-            </a>
-            <button onclick="event.stopPropagation(); document.querySelector('input[type=\'radio\'][value=\'{space_info['id']}\']').click();"
-                    style="padding: 6px 12px; background-color: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em;">
-                View Trend
-            </button>
-        </div>
-    </div>
-    """
-
 def update_display(selection):
     global daily_ranks_df
     
@@ -196,7 +147,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             with gr.Row(variant="panel"):
                 trend_plot = gr.Plot(
                     label="Daily Rank Trend",
-                    container=True
+                    container=True,
                 )
             
             with gr.Row():
@@ -204,18 +155,76 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     value="<div style='text-align: center; padding: 20px; color: #666;'>Select a space to view details</div>"
                 )
             
+            # 라디오 버튼을 먼저 정의
+            space_selection = gr.Radio(
+                choices=[row['id'] for _, row in top_100_spaces.iterrows()],
+                value=None,
+                visible=False
+            )
+            
+            # HTML에서 JavaScript 이벤트를 직접 처리
+            html_content = """
+            <div style='display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;'>
+            """ + "".join([
+                f"""
+                <div class="space-card" 
+                     data-space-id="{row['id']}"
+                     style="
+                    border: 1px solid #e5e7eb;
+                    border-radius: 8px;
+                    padding: 16px;
+                    margin: 8px;
+                    background-color: hsl(210, {max(30, 90 - (row['rank'] / 100 * 60))}%, {min(97, 85 + (row['rank'] / 100 * 10))}%);
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    display: inline-block;
+                    width: 250px;
+                    vertical-align: top;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                "
+                onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';"
+                onmouseout="this.style.transform='none';this.style.boxShadow='0 1px 3px rgba(0,0,0,0.1)';"
+                >
+                    <div style="font-size: 1.2em; font-weight: bold; margin-bottom: 8px;">
+                        #{int(row['rank'])}
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        {row['id']}
+                    </div>
+                    <div style="color: #666; margin-bottom: 12px;">
+                        Score: {row['trendingScore']:.2f}
+                    </div>
+                    <div style="display: flex; gap: 8px;">
+                        <a href="https://huggingface.co/spaces/{row['id']}" 
+                           target="_blank" 
+                           style="padding: 6px 12px; background-color: white; color: #2563eb; text-decoration: none; border-radius: 4px; font-size: 0.9em; border: 1px solid #2563eb;"
+                           onclick="event.stopPropagation();">
+                            View Space ↗
+                        </a>
+                        <button onclick="event.preventDefault(); gradioEvent('{row['id']}');"
+                                style="padding: 6px 12px; background-color: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em;">
+                            View Trend
+                        </button>
+                    </div>
+                </div>
+                """
+                for _, row in top_100_spaces.iterrows()
+            ]) + """
+            </div>
+            <script>
+            function gradioEvent(spaceId) {
+                const radio = document.querySelector(`input[type="radio"][value="${spaceId}"]`);
+                if (radio) {
+                    radio.checked = true;
+                    const event = new Event('change');
+                    radio.dispatchEvent(event);
+                }
+            }
+            </script>
+            """
+            
             with gr.Row():
-                space_grid = gr.HTML(
-                    value="<div style='display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;'>" +
-                          "".join([create_space_card(row) for _, row in top_100_spaces.iterrows()]) +
-                          "</div>"
-                )
-                
-                space_selection = gr.Radio(
-                    choices=[row['id'] for _, row in top_100_spaces.iterrows()],
-                    value=None,
-                    visible=False
-                )
+                space_grid = gr.HTML(value=html_content)
         
         with gr.Tab("About"):
             gr.Markdown("""
@@ -246,23 +255,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             Experience the pulse of the AI community through our daily updated rankings and discover what's making waves in the world of practical AI applications.
             """)
     
-    # JavaScript 이벤트 처리
-    space_grid.click(
-        None,
-        None,
-        None,
-        js="""async (event) => {
-            if (event.target.closest('.space-card')) {
-                const spaceId = event.target.closest('.space-card').dataset.spaceId;
-                document.querySelector(`input[type="radio"][value="${spaceId}"]`).click();
-            }
-        }"""
-    )
-    
+    # 라디오 버튼 변경 이벤트 연결
     space_selection.change(
         fn=update_display,
         inputs=[space_selection],
-        outputs=[trend_plot, info_box]
+        outputs=[trend_plot, info_box],
+        api_name="update_display"
     )
 
 if __name__ == "__main__":