Update app.py

app.py

@@ -81,7 +81,7 @@ UI_LANG = {
 }
 
 # ============================================
-# 🎨 CSS - Hide HF Elements + Comic Theme
+# 🎨 CSS
 # ============================================
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
@@ -167,7 +167,7 @@ label { color: #1F2937 !important; font-family: 'Comic Neue', cursive !important
 ::-webkit-scrollbar-thumb { background: #3B82F6; border: 2px solid #1F2937; }
 ::selection { background: #FACC15; color: #1F2937; }
 
-/* LLM Result box - 녹색 글자 on 검정 배경 */
+/* LLM Result box */
 .llm-result textarea {
     background: #1F2937 !important;
     color: #10B981 !important;
@@ -360,12 +360,12 @@ def use_trending_keyword(kw):
     return kw if kw else ""
 
 # ============================================
-# 🔍 Main Search Function with WORKING SORT
+# 🔍 Main Search Function
 # ============================================
 def search_videos(keyword, country, language, sort_by, date_filter, max_results, ui_lang):
     L = UI_LANG.get(ui_lang, UI_LANG["en"])
     if not keyword or not keyword.strip():
-        return f"⚠️ {L['no_keyword']}", ""
+        return f"⚠️ {L['no_keyword']}", "📊 DB: -"
     
     max_results = int(max_results)
     all_items, next_page = [], None
@@ -388,7 +388,7 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
         try:
             resp = youtube.search().list(**params).execute()
         except Exception as e:
-            return f"API Error: {e}", ""
+            return f"API Error: {e}", "📊 DB: Error"
         items = resp.get("items", [])
         if not items: break
         all_items.extend(items)
@@ -396,7 +396,7 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
         if not next_page: break
     
     if not all_items:
-        return f"{L['no_results']}", ""
+        return f"{L['no_results']}", "📊 DB: -"
     
     video_ids = [item["id"]["videoId"] for item in all_items]
     channel_ids = list(set([item["snippet"]["channelId"] for item in all_items]))
@@ -432,7 +432,6 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
     ai_ratings = get_ai_pick_rating(videos_data)
     save_to_db(videos_data, channel_subs_raw, keyword, country, language, sort_by)
     
-    # 고유 ID
     uid = str(uuid.uuid4()).replace("-", "")[:8]
     
     html = f'''
@@ -440,11 +439,11 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
         #tbl_{uid} {{ width:100%; border-collapse:collapse; font-family:'Comic Neue',cursive; }}
         #tbl_{uid} th {{ 
             background:#EF4444; color:#fff; padding:12px 6px; border:2px solid #1F2937;
-            font-family:'Bangers',cursive; cursor:pointer; user-select:none; position:relative;
+            font-family:'Bangers',cursive; cursor:pointer; user-select:none;
         }}
         #tbl_{uid} th:hover {{ background:#DC2626; }}
-        #tbl_{uid} th.asc::after {{ content:" ▲"; color:#FACC15; }}
-        #tbl_{uid} th.desc::after {{ content:" ▼"; color:#FACC15; }}
+        #tbl_{uid} th.sort-asc::after {{ content:" ▲"; color:#FACC15; }}
+        #tbl_{uid} th.sort-desc::after {{ content:" ▼"; color:#FACC15; }}
         #tbl_{uid} td {{ padding:8px 6px; border-bottom:2px solid #1F2937; background:#FFF; vertical-align:middle; }}
         #tbl_{uid} tr:hover td {{ background:#FEF9C3; }}
         #tbl_{uid} img {{ border-radius:4px; border:2px solid #1F2937; }}
@@ -460,28 +459,28 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
         🎬 {L["total"]} <b>{len(videos_data)}</b> {L["results"]} | 🔍 "{keyword}" | 🌍 {country}
         <br><span style="font-size:0.85rem">🤖 AI Pick: ♥ ⭐ ⭐⭐ ⭐⭐⭐ | 💡 {"헤더 클릭 = 정렬" if ui_lang=="ko" else "Click header to sort"}</span>
         <div style="margin-top:10px">
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(4)">{L["subs"]}</button>
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(5)">{L["views"]}</button>
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(6)">{L["likes"]}</button>
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(7)">{L["comments"]}</button>
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(8)">AI</button>
-            <button class="sortbtn_{uid}" onclick="doSort_{uid}(9)">{L["date"]}</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(4,'n')">{L["subs"]}</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(5,'n')">{L["views"]}</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(6,'n')">{L["likes"]}</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(7,'n')">{L["comments"]}</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(8,'n')">AI</button>
+            <button class="sortbtn_{uid}" onclick="doSort_{uid}(9,'s')">{L["date"]}</button>
         </div>
     </div>
     
     <div style="max-height:700px; overflow-y:auto; border:3px solid #1F2937; border-radius:8px;">
     <table id="tbl_{uid}">
         <thead><tr>
-            <th data-col="0" data-type="n" style="width:45px">{L["rank"]}</th>
+            <th style="width:45px">{L["rank"]}</th>
             <th style="width:120px">{L["thumb"]}</th>
-            <th data-col="2" data-type="s">{L["title_col"]}</th>
-            <th data-col="3" data-type="s" style="width:100px">{L["channel"]}</th>
-            <th data-col="4" data-type="n" style="width:70px">{L["subs"]}</th>
-            <th data-col="5" data-type="n" style="width:75px">{L["views"]}</th>
-            <th data-col="6" data-type="n" style="width:60px">{L["likes"]}</th>
-            <th data-col="7" data-type="n" style="width:55px">{L["comments"]}</th>
-            <th data-col="8" data-type="n" style="width:65px">{L["ai_pick_col"]}</th>
-            <th data-col="9" data-type="s" style="width:90px">{L["date"]}</th>
+            <th>{L["title_col"]}</th>
+            <th style="width:100px">{L["channel"]}</th>
+            <th onclick="doSort_{uid}(4,'n')" style="width:70px;cursor:pointer">{L["subs"]}</th>
+            <th onclick="doSort_{uid}(5,'n')" style="width:75px;cursor:pointer">{L["views"]}</th>
+            <th onclick="doSort_{uid}(6,'n')" style="width:60px;cursor:pointer">{L["likes"]}</th>
+            <th onclick="doSort_{uid}(7,'n')" style="width:55px;cursor:pointer">{L["comments"]}</th>
+            <th onclick="doSort_{uid}(8,'n')" style="width:65px;cursor:pointer">{L["ai_pick_col"]}</th>
+            <th onclick="doSort_{uid}(9,'s')" style="width:90px;cursor:pointer">{L["date"]}</th>
         </tr></thead>
         <tbody>
     '''
@@ -507,7 +506,6 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
             <td data-v="{v['published_at'][:10]}">{v['published_at'][:10]}</td>
         </tr>'''
     
-    # JavaScript 정렬 - 즉시 실행
     html += f'''
         </tbody>
     </table>
@@ -515,22 +513,22 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
     
     <script>
     (function() {{
-        var tbl = document.getElementById('tbl_{uid}');
-        if (!tbl) return;
+        var sortState_{uid} = {{}};
         
-        var sortState = {{}};
-        
-        function sortTable(colIdx, type) {{
+        window.doSort_{uid} = function(colIdx, type) {{
+            var tbl = document.getElementById('tbl_{uid}');
+            if (!tbl) return;
+            
             var tbody = tbl.querySelector('tbody');
             var rows = Array.from(tbody.querySelectorAll('tr'));
             var headers = tbl.querySelectorAll('th');
             
-            var asc = sortState[colIdx] !== 'asc';
-            sortState = {{}};
-            sortState[colIdx] = asc ? 'asc' : 'desc';
+            var asc = sortState_{uid}[colIdx] !== 'asc';
+            sortState_{uid} = {{}};
+            sortState_{uid}[colIdx] = asc ? 'asc' : 'desc';
             
-            headers.forEach(function(h) {{ h.classList.remove('asc', 'desc'); }});
-            if (headers[colIdx]) headers[colIdx].classList.add(asc ? 'asc' : 'desc');
+            headers.forEach(function(h) {{ h.classList.remove('sort-asc', 'sort-desc'); }});
+            if (headers[colIdx]) headers[colIdx].classList.add(asc ? 'sort-asc' : 'sort-desc');
             
             rows.sort(function(a, b) {{
                 var aCell = a.cells[colIdx];
@@ -550,21 +548,6 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
             }});
             
             rows.forEach(function(row) {{ tbody.appendChild(row); }});
-        }}
-        
-        // 헤더 클릭 이벤트
-        tbl.querySelectorAll('th[data-col]').forEach(function(th) {{
-            th.addEventListener('click', function() {{
-                var col = parseInt(this.getAttribute('data-col'));
-                var type = this.getAttribute('data-type');
-                sortTable(col, type);
-            }});
-        }});
-        
-        // 전역 정렬 함수
-        window.doSort_{uid} = function(col) {{
-            var type = (col >= 4 && col <= 8) ? 'n' : 's';
-            sortTable(col, type);
         }};
     }})();
     </script>
@@ -574,7 +557,7 @@ def search_videos(keyword, country, language, sort_by, date_filter, max_results,
     return html, f"📊 DB: Videos {stats['videos']} | Records {stats['stats']} | Channels {stats['channels']} | Searches {stats['searches']}"
 
 # ============================================
-# 🔥 Trending Alerts (20%+ Surge)
+# 🔥 Trending Alerts
 # ============================================
 def show_trending_alerts(ui_lang):
     is_ko = ui_lang == "ko"
@@ -629,7 +612,7 @@ def show_trending_alerts(ui_lang):
     return html + '</div>'
 
 # ============================================
-# 📈 Top Growing (48h Growth Rate)
+# 📈 Top Growing
 # ============================================
 def show_top_growing(ui_lang):
     is_ko = ui_lang == "ko"
@@ -694,7 +677,7 @@ def show_top_growing(ui_lang):
     return html + '</div>'
 
 # ============================================
-# ⭐ AI Pick (Fixed colors)
+# ⭐ AI Pick
 # ============================================
 def show_ai_picks(ui_lang):
     is_ko = ui_lang == "ko"
@@ -710,7 +693,6 @@ def show_ai_picks(ui_lang):
     top_picks = [(i, v, ratings.get(i, 0)) for i, v in enumerate(videos) if ratings.get(i, 0) >= 3]
     top_picks.sort(key=lambda x: (-x[2], -x[1]['views']))
     
-    # AI 분석 - 색상 수정됨
     analysis_html = ""
     if groq_client and top_picks:
         info = "\n".join([f"- {v['title'][:50]} (Views:{format_count(v['views'])})" for _, v, _ in top_picks[:5]])
@@ -726,7 +708,7 @@ def show_ai_picks(ui_lang):
     <div style="background:linear-gradient(135deg,#FACC15,#F59E0B);padding:20px;border:3px solid #1F2937;border-radius:8px;margin-bottom:15px">
         <h2 style="font-family:'Bangers',cursive;color:#1F2937;margin:0;text-shadow:2px 2px 0 #FFF;font-size:2rem">⭐ {"AI 추천 - TOP 영상" if is_ko else "AI PICK - TOP RECOMMENDATIONS"}</h2>
         <p style="color:#1F2937;margin:10px 0 0;font-family:'Comic Neue',cursive;font-weight:700;font-size:15px">
-            {"⭐⭐ 이상 등급 영상" if is_ko else "⭐⭐+ rated videos"}: <b>{len(top_picks)}</b>{"개" if is_ko else " videos"} | {"마지막 업데이트" if is_ko else "Last updated"}: {ai_pick_storage.get("timestamp", "")[:16].replace("T"," ")}
+            {"⭐⭐ 이상 등급 영상" if is_ko else "⭐⭐+ rated videos"}: <b>{len(top_picks)}</b>{"개" if is_ko else " videos"}
         </p>
     </div>
     {analysis_html}
@@ -822,8 +804,8 @@ def show_search_history(ui_lang):
         html += f'''<tr style="background:#FFF;border-bottom:2px solid #1F2937">
             <td style="padding:12px;font-weight:700;color:#1F2937">{kw}</td>
             <td style="padding:12px;color:#1F2937">{country}</td>
-            <td style="padding:12px;color:#1F2937">{lang[:10]}</td>
-            <td style="padding:12px;color:#1F2937">{sort_by[:10]}</td>
+            <td style="padding:12px;color:#1F2937">{lang[:10] if lang else "-"}</td>
+            <td style="padding:12px;color:#1F2937">{sort_by[:10] if sort_by else "-"}</td>
             <td style="padding:12px;color:#3B82F6;font-weight:700">{cnt}</td>
             <td style="padding:12px;font-size:12px;color:#666">{searched[:16].replace("T"," ")}</td>
         </tr>'''
@@ -856,9 +838,9 @@ def switch_ui_language(ui_lang):
 initial_trending = get_real_trending_keywords("US", "en")
 
 # ============================================
-# 🎨 Gradio UI
+# 🎨 Gradio UI (Gradio 6.0 Compatible)
 # ============================================
-with gr.Blocks(css=css, title="YouTube Trend Analyzer") as demo:
+with gr.Blocks(title="YouTube Trend Analyzer") as demo:
     ui_lang_state = gr.State("en")
     
     gr.HTML('''<div style="text-align:center;margin:20px 0">
@@ -866,11 +848,13 @@ with gr.Blocks(css=css, title="YouTube Trend Analyzer") as demo:
             <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge">
         </a></div>''')
     
-    gr.Markdown("# 🎬 YOUTUBE TREND ANALYZER 📊", elem_classes="header-text")
+    gr.Markdown("# 🎬 YOUTUBE TREND ANALYZER 📊", elem_classes=["header-text"])
     
     with gr.Row():
-        db_stats = gr.Markdown("📊 Loading...", scale=4)
-        ui_lang_dropdown = gr.Dropdown(choices=["English", "한국어"], value="English", label="🌐 UI Language", scale=1, interactive=True)
+        with gr.Column(scale=4):
+            db_stats = gr.Markdown("📊 Loading...")
+        with gr.Column(scale=1):
+            ui_lang_dropdown = gr.Dropdown(choices=["English", "한국어"], value="English", label="🌐 UI Language", interactive=True)
     
     with gr.Tabs():
         with gr.Tab("🔍 Search"):
@@ -909,29 +893,29 @@ with gr.Blocks(css=css, title="YouTube Trend Analyzer") as demo:
                 with gr.Tab("🏷️ Keyword Suggest"):
                     kw_input = gr.Textbox(label="Enter base keyword", placeholder="e.g., Python tutorial")
                     kw_btn = gr.Button("🔍 Generate Keywords", variant="primary")
-                    kw_output = gr.Textbox(label="Suggested Keywords", lines=20, elem_classes="llm-result")
+                    kw_output = gr.Textbox(label="Suggested Keywords", lines=20, elem_classes=["llm-result"])
                 
                 with gr.Tab("🔮 Trend Prediction"):
                     tp_input = gr.Textbox(label="Enter topic", placeholder="e.g., AI tools")
                     tp_btn = gr.Button("🔮 Predict Trend", variant="primary")
-                    tp_output = gr.Textbox(label="Trend Analysis", lines=20, elem_classes="llm-result")
+                    tp_output = gr.Textbox(label="Trend Analysis", lines=20, elem_classes=["llm-result"])
                 
                 with gr.Tab("💡 Content Ideas"):
                     ci_input = gr.Textbox(label="Enter topic", placeholder="e.g., Home workout")
                     ci_btn = gr.Button("💡 Generate Ideas", variant="primary")
-                    ci_output = gr.Textbox(label="Content Ideas", lines=25, elem_classes="llm-result")
+                    ci_output = gr.Textbox(label="Content Ideas", lines=25, elem_classes=["llm-result"])
                 
                 with gr.Tab("📊 Channel Analysis"):
                     ca_input = gr.Textbox(label="Enter channel/niche", placeholder="e.g., Tech reviews")
                     ca_btn = gr.Button("📊 Analyze", variant="primary")
-                    ca_output = gr.Textbox(label="Analysis", lines=25, elem_classes="llm-result")
+                    ca_output = gr.Textbox(label="Analysis", lines=25, elem_classes=["llm-result"])
                 
                 with gr.Tab("⚔️ Competitor"):
                     with gr.Row():
                         comp_my = gr.Textbox(label="Your Channel", placeholder="My channel")
                         comp_rival = gr.Textbox(label="Competitor", placeholder="Competitor")
                     comp_btn = gr.Button("⚔️ Compare", variant="primary")
-                    comp_output = gr.Textbox(label="Analysis", lines=25, elem_classes="llm-result")
+                    comp_output = gr.Textbox(label="Analysis", lines=25, elem_classes=["llm-result"])
         
         with gr.Tab("🕐 History"):
             history_btn = gr.Button("🔄 Refresh", variant="primary")
@@ -960,4 +944,6 @@ with gr.Blocks(css=css, title="YouTube Trend Analyzer") as demo:
     ca_btn.click(analyze_channel, [ca_input, ui_lang_state], ca_output)
     comp_btn.click(analyze_competitor, [comp_my, comp_rival, ui_lang_state], comp_output)
 
-demo.launch()
+# Launch with CSS (Gradio 6.0 style)
+demo.launch(css=css)
+