Update app.py

app.py

@@ -2,8 +2,10 @@ import gradio as gr
 import requests
 import pandas as pd
 import plotly.graph_objects as go
-from datetime import datetime, timedelta
-import time
+from datetime import datetime
+import os
+
+HF_TOKEN = os.getenv('HF_TOKEN')
 
 # 관심 스페이스 URL 리스트와 정보
 target_spaces = {
@@ -44,8 +46,8 @@ def get_trending_spaces():
     try:
         url = "https://huggingface.co/api/spaces/sort/trending"
         headers = {
-            'Accept': 'application/json',
-            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+            'Authorization': f'Bearer {HF_TOKEN}',
+            'Accept': 'application/json'
         }
         response = requests.get(url, headers=headers)
         
@@ -62,7 +64,7 @@ def get_trending_spaces():
 def create_error_plot():
     fig = go.Figure()
     fig.add_annotation(
-        text="데이터를 불러올 수 없습니다.\n잠시 후 다시 시도해주세요.",
+        text="데이터를 불러올 수 없습니다.\n(API 인증이 필요합니다)",
         xref="paper",
         yref="paper",
         x=0.5,
@@ -93,6 +95,9 @@ def create_trend_visualization(spaces_data):
                 'likes': space.get('likes', 0)
             })
     
+    if not ranks:
+        return create_error_plot()
+    
     # 순위별로 정렬
     ranks.sort(key=lambda x: x['rank'])
     
@@ -101,21 +106,30 @@ def create_trend_visualization(spaces_data):
     rank_values = [r['rank'] for r in ranks]
     likes = [r['likes'] for r in ranks]
     
+    # 막대 그래프 생성
     fig.add_trace(go.Bar(
         x=ids,
         y=rank_values,
-        text=likes,
+        text=[f"Rank: {r}<br>Likes: {l}" for r, l in zip(rank_values, likes)],
         textposition='auto',
-        name='Rank'
+        marker_color='rgb(158,202,225)',
+        opacity=0.8
     ))
     
     fig.update_layout(
-        title='Current Trending Ranks',
+        title={
+            'text': 'Current Trending Ranks',
+            'y':0.95,
+            'x':0.5,
+            'xanchor': 'center',
+            'yanchor': 'top'
+        },
         xaxis_title='Space ID',
         yaxis_title='Rank',
         yaxis_autorange='reversed',
         height=600,
-        showlegend=False
+        showlegend=False,
+        template='plotly_white'
     )
     
     return fig
@@ -124,23 +138,46 @@ def create_space_info_html(spaces_data):
     if not spaces_data:
         return "<div style='padding: 20px;'><h2>데이터를 불러오는데 실패했습니다.</h2></div>"
     
-    html_content = "<div style='padding: 20px;'>"
-    html_content += "<h2>Current Rankings</h2>"
+    html_content = """
+    <div style='padding: 20px;'>
+    <h2 style='color: #2c3e50;'>Current Rankings</h2>
+    <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
+    """
     
     for idx, space in enumerate(spaces_data, 1):
         space_id = space.get('id', '')
         if space_id in target_spaces:
             html_content += f"""
-            <div style='margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 8px;'>
-                <h3>#{idx} - {space_id}</h3>
-                <p>👍 Likes: {space.get('likes', 'N/A')}</p>
-                <p>📝 {space.get('title', 'N/A')}</p>
-                <p>{space.get('description', 'N/A')[:100]}...</p>
-                <a href='{target_spaces[space_id]}' target='_blank' style='color: blue;'>Visit Space 🔗</a>
+            <div style='
+                background: white;
+                padding: 20px;
+                border-radius: 10px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                transition: transform 0.2s;
+                hover: transform: translateY(-5px);
+            '>
+                <h3 style='color: #34495e;'>#{idx} - {space_id}</h3>
+                <p style='color: #7f8c8d;'>👍 Likes: {space.get('likes', 'N/A')}</p>
+                <p style='color: #2c3e50;'>{space.get('title', 'N/A')}</p>
+                <p style='color: #7f8c8d; font-size: 0.9em;'>{space.get('description', 'N/A')[:100]}...</p>
+                <a href='{target_spaces[space_id]}' 
+                   target='_blank' 
+                   style='
+                    display: inline-block;
+                    padding: 8px 16px;
+                    background: #3498db;
+                    color: white;
+                    text-decoration: none;
+                    border-radius: 5px;
+                    transition: background 0.3s;
+                    hover: background: #2980b9;
+                   '>
+                   Visit Space 🔗
+                </a>
             </div>
             """
     
-    html_content += "</div>"
+    html_content += "</div></div>"
     return html_content
 
 def create_data_table(spaces_data):
@@ -169,11 +206,14 @@ def refresh_data():
         df = create_data_table(spaces_data)
         return plot, info, df
     else:
-        return create_error_plot(), "<div>데이터를 불러오는데 실패했습니다.</div>", pd.DataFrame()
+        return create_error_plot(), "<div>API 인증이 필요합니다.</div>", pd.DataFrame()
 
 # Gradio 인터페이스 생성
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🤗 HuggingFace Spaces Trending Analysis")
+    gr.Markdown("""
+    # 🤗 HuggingFace Spaces Trending Analysis
+    실시간으로 Hugging Face Spaces의 트렌딩 순위를 분석합니다.
+    """)
     
     with gr.Tab("Trending Analysis"):
         plot_output = gr.Plot()
@@ -182,7 +222,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     with gr.Tab("Export Data"):
         df_output = gr.DataFrame()
     
-    refresh_btn = gr.Button("Refresh Data")
+    refresh_btn = gr.Button("🔄 Refresh Data", variant="primary")
     refresh_btn.click(
         refresh_data,
         outputs=[plot_output, info_output, df_output]