Update app.py

app.py

@@ -167,9 +167,7 @@ Examples:
         except Exception as e:
             print(f"Gemini global title parsing error: {e}")
             return None
-    
     def extract_person_from_description_with_gemini(self, description: str) -> Optional[str]:
-        """Extract a person's name from the description using Gemini (global, priority 2)"""
         if not description or len(description.strip()) < 10 or not model:
             return None
             
@@ -703,104 +701,29 @@ Note: Do not restrict by nationality, era, or field. Consider notable people wor
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Recent Videos - {time_range_text}</title>
             <style>
-                body {{ font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }}
-                .container {{ max-width: 1200px; margin: 0 auto; }}
-                h1 {{ color: #333; text-align: center; margin-bottom: 30px; }}
-                .stats-info {{ 
-                    background: #e3f2fd; 
-                    padding: 15px; 
-                    border-radius: 8px; 
-                    margin-bottom: 20px; 
-                    text-align: center;
-                    font-size: 16px;
-                    color: #1976d2;
-                }}
-                .video-item {{ 
-                    display: flex; 
-                    align-items: flex-start; 
-                    background: white; 
-                    margin-bottom: 15px; 
-                    padding: 15px; 
-                    border-radius: 8px; 
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                    border-left: 4px solid #ccc;
-                }}
-                .video-item.Critical {{ border-left-color: #f44336; background-color: #ffebee; }}
-                .video-item.Important {{ border-left-color: #ff9800; background-color: #fff3e0; }}
-                .thumbnail {{ 
-                    width: 160px; 
-                    height: 90px; 
-                    object-fit: cover; 
-                    margin-right: 15px; 
-                    border-radius: 4px; 
-                    flex-shrink: 0; 
-                }}
-                .video-info {{ flex: 1; }}
-                .video-title {{ 
-                    font-weight: bold; 
-                    margin-bottom: 8px; 
-                    font-size: 16px; 
-                    line-height: 1.4;
-                }}
-                .video-meta {{ 
-                    color: #666; 
-                    font-size: 14px; 
-                    line-height: 1.6; 
-                    margin-bottom: 5px;
-                }}
-                .channel-info {{ 
-                    display: flex; 
-                    align-items: center; 
-                    margin-bottom: 8px;
-                }}
-                .channel-icon {{ 
-                    width: 24px; 
-                    height: 24px; 
-                    border-radius: 50%; 
-                    margin-right: 8px;
-                }}
-                .stats {{ color: #2196f3; font-weight: bold; }}
-                .importance-badge {{ 
-                    display: inline-block; 
-                    padding: 2px 8px; 
-                    border-radius: 12px; 
-                    font-size: 12px; 
-                    font-weight: bold; 
-                    margin-left: 10px;
-                }}
-                .importance-badge.Critical {{ background: #f44336; color: white; }}
-                .importance-badge.Important {{ background: #ff9800; color: white; }}
-                .importance-badge.Normal {{ background: #4caf50; color: white; }}
-                .detection-badge {{
-                    display: inline-block;
-                    padding: 2px 6px;
-                    border-radius: 8px;
-                    font-size: 11px;
-                    background: #2196f3;
-                    color: white;
-                    margin-left: 5px;
-                }}
-                .video-links {{ margin-top: 8px; }}
-                .video-links a {{ 
-                    display: inline-block; 
-                    margin-right: 15px; 
-                    color: #1976d2; 
-                    text-decoration: none; 
-                    font-size: 14px;
-                    padding: 4px 8px;
-                    border: 1px solid #1976d2;
-                    border-radius: 4px;
-                    transition: background-color 0.3s;
-                }}
-                .video-links a:hover {{ 
-                    background-color: #e3f2fd; 
-                }}
-                .no-videos {{
-                    text-align: center;
-                    padding: 40px;
-                    color: #666;
-                    font-size: 16px;
-                }}
+                body {{ font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #000000 !important; color: #ffffff !important; }}
+                .container {{ max-width: 1200px; margin: 0 auto; background-color: transparent !important; }}
+                h1 {{ color: #ffffff !important; text-align: center; margin-bottom: 30px; }}
+                .stats-info {{ background: rgba(255,255,255,0.03) !important; padding: 15px !important; border-radius: 8px !important; margin-bottom: 20px !important; text-align: center !important; font-size: 16px !important; color: #bcdffb !important; }}
+                .video-item {{ display: flex !important; align-items: flex-start !important; background: #0b0b0b !important; margin-bottom: 15px !important; padding: 15px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important; border-left: 4px solid #222 !important; }}
+                .video-item.Critical {{ border-left-color: #b71c1c !important; background-color: #120202 !important; }}
+                .video-item.Important {{ border-left-color: #bf360c !important; background-color: #241100 !important; }}
+                .thumbnail {{ width: 160px !important; height: 90px !important; object-fit: cover !important; margin-right: 15px !important; border-radius: 4px !important; flex-shrink: 0 !important; }}
+                .video-info {{ flex: 1 !important; }}
+                .video-title {{ font-weight: bold !important; margin-bottom: 8px !important; font-size: 16px !important; line-height: 1.4 !important; color: #ffffff !important; }}
+                .video-meta {{ color: #cfcfcf !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 5px !important; }}
+                .channel-info {{ display: flex !important; align-items: center !important; margin-bottom: 8px !important; }}
+                .channel-icon {{ width: 24px !important; height: 24px !important; border-radius: 50% !important; margin-right: 8px !important; }}
+                .stats {{ color: #64b5f6 !important; font-weight: bold !important; }}
+                .importance-badge {{ display: inline-block !important; padding: 2px 8px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: bold !important; margin-left: 10px !important; }}
+                .importance-badge.Critical {{ background: #b71c1c !important; color: white !important; }}
+                .importance-badge.Important {{ background: #bf360c !important; color: white !important; }}
+                .importance-badge.Normal {{ background: #2e7d32 !important; color: white !important; }}
+                .detection-badge {{ display: inline-block !important; padding: 2px 6px !important; border-radius: 8px !important; font-size: 11px !important; background: #1976d2 !important; color: white !important; margin-left: 5px !important; }}
+                .video-links {{ margin-top: 8px !important; }}
+                .video-links a {{ display: inline-block !important; margin-right: 15px !important; color: #90caf9 !important; text-decoration: none !important; font-size: 14px !important; padding: 4px 8px !important; border: 1px solid #263238 !important; border-radius: 4px !important; transition: background-color 0.3s !important; }}
+                .video-links a:hover {{ background-color: rgba(227,242,253,0.04) !important; }}
+                .no-videos {{ text-align: center !important; padding: 40px !important; color: #bdbdbd !important; font-size: 16px !important; }}
             </style>
         </head>
         <body>
@@ -896,57 +819,30 @@ Note: Do not restrict by nationality, era, or field. Consider notable people wor
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>YouTube Competitor Analysis Dashboard (Global)</title>
             <style>
-                body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
-                .container { max-width: 1200px; margin: 0 auto; }
-                h1 { color: #333; text-align: center; margin-bottom: 30px; }
-                h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; }
-                .section { background: white; margin-bottom: 30px; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-                .trend-item { border: 1px solid #ddd; margin-bottom: 15px; padding: 15px; border-radius: 5px; background: #fafafa; }
-                .trend-title { font-size: 18px; font-weight: bold; color: #d32f2f; margin-bottom: 10px; }
-                .trend-meta { font-size: 14px; color: #666; margin-bottom: 5px; }
-                .video-item { display: flex; align-items: flex-start; margin-bottom: 15px; padding: 10px; border-left: 4px solid #ccc; }
-                .video-item.Critical { border-left-color: #f44336; background-color: #ffebee; }
-                .video-item.Important { border-left-color: #ff9800; background-color: #fff3e0; }
-                .thumbnail { width: 160px; height: 90px; object-fit: cover; margin-right: 15px; border-radius: 4px; flex-shrink: 0; }
-                .video-info { flex: 1; }
-                .video-title { font-weight: bold; margin-bottom: 5px; font-size: 16px; }
-                .video-meta { color: #666; font-size: 14px; line-height: 1.6; }
-                .importance-badge { 
-                    display: inline-block; 
-                    padding: 2px 8px; 
-                    border-radius: 12px; 
-                    font-size: 12px; 
-                    font-weight: bold; 
-                    margin-left: 10px;
-                }
-                .importance-badge.Critical { background: #f44336; color: white; }
-                .importance-badge.Important { background: #ff9800; color: white; }
-                .importance-badge.Normal { background: #4caf50; color: white; }
-                .detection-badge {
-                    display: inline-block;
-                    padding: 2px 6px;
-                    border-radius: 8px;
-                    font-size: 11px;
-                    background: #2196f3;
-                    color: white;
-                    margin-left: 5px;
-                }
-                .stats { color: #2196f3; font-weight: bold; }
-                .video-links { margin-top: 8px; }
-                .video-links a { 
-                    display: inline-block; 
-                    margin-right: 15px; 
-                    color: #1976d2; 
-                    text-decoration: none; 
-                    font-size: 14px;
-                    padding: 4px 8px;
-                    border: 1px solid #1976d2;
-                    border-radius: 4px;
-                    transition: background-color 0.3s;
-                }
-                .video-links a:hover { 
-                    background-color: #e3f2fd; 
-                }
+                body {{ font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #000000 !important; color: #ffffff !important; }}
+                .container {{ max-width: 1200px; margin: 0 auto; background-color: transparent !important; }}
+                h1 {{ color: #ffffff !important; text-align: center; margin-bottom: 30px; }}
+                h2 {{ border-bottom: 2px solid rgba(255,255,255,0.06) !important; padding-bottom: 10px !important; }}
+                .section {{ background: #070707 !important; margin-bottom: 30px !important; padding: 20px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important; }}
+                .trend-item {{ border: 1px solid #1f1f1f !important; margin-bottom: 15px !important; padding: 15px !important; border-radius: 5px !important; background: #0b0b0b !important; }}
+                .trend-title {{ font-size: 18px !important; font-weight: bold !important; color: #ff8a80 !important; margin-bottom: 10px !important; }}
+                .trend-meta {{ font-size: 14px !important; color: #bdbdbd !important; margin-bottom: 5px !important; }}
+                .video-item {{ display: flex !important; align-items: flex-start !important; margin-bottom: 15px !important; padding: 10px !important; border-left: 4px solid #222 !important; }}
+                .video-item.Critical {{ border-left-color: #b71c1c !important; background-color: #120202 !important; }}
+                .video-item.Important {{ border-left-color: #bf360c !important; background-color: #241100 !important; }}
+                .thumbnail {{ width: 160px !important; height: 90px !important; object-fit: cover !important; margin-right: 15px !important; border-radius: 4px !important; flex-shrink: 0 !important; }}
+                .video-info {{ flex: 1 !important; }}
+                .video-title {{ font-weight: bold !important; margin-bottom: 5px !important; font-size: 16px !important; color: #ffffff !important; }}
+                .video-meta {{ color: #cfcfcf !important; font-size: 14px !important; line-height: 1.6 !important; }}
+                .importance-badge {{ display: inline-block !important; padding: 2px 8px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: bold !important; margin-left: 10px !important; }}
+                .importance-badge.Critical {{ background: #b71c1c !important; color: white !important; }}
+                .importance-badge.Important {{ background: #bf360c !important; color: white !important; }}
+                .importance-badge.Normal {{ background: #2e7d32 !important; color: white !important; }}
+                .detection-badge {{ display: inline-block !important; padding: 2px 6px !important; border-radius: 8px !important; font-size: 11px !important; background: #1976d2 !important; color: white !important; margin-left: 5px !important; }}
+                .stats {{ color: #64b5f6 !important; font-weight: bold !important; }}
+                .video-links {{ margin-top: 8px !important; }}
+                .video-links a {{ display: inline-block !important; margin-right: 15px !important; color: #90caf9 !important; text-decoration: none !important; font-size: 14px !important; padding: 4px 8px !important; border: 1px solid #263238 !important; border-radius: 4px !important; transition: background-color 0.3s !important; }}
+                .video-links a:hover {{ background-color: rgba(227,242,253,0.04) !important; }}
             </style>
         </head>
         <body>
@@ -1031,42 +927,19 @@ Note: Do not restrict by nationality, era, or field. Consider notable people wor
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Channel Management (Global)</title>
             <style>
-                body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
-                .container { max-width: 800px; margin: 0 auto; }
-                h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; }
-                .channel-item { 
-                    display: flex; 
-                    align-items: center; 
-                    background: white; 
-                    margin-bottom: 15px; 
-                    padding: 15px; 
-                    border-radius: 8px; 
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                }
-                .channel-icon { 
-                    width: 48px; 
-                    height: 48px; 
-                    border-radius: 50%; 
-                    margin-right: 15px; 
-                    object-fit: cover;
-                }
-                .channel-info { flex: 1; }
-                .channel-name { font-weight: bold; font-size: 16px; margin-bottom: 5px; }
-                .channel-meta { color: #666; font-size: 14px; }
-                .channel-actions { display: flex; gap: 10px; }
-                .btn { 
-                    padding: 6px 12px; 
-                    border: none; 
-                    border-radius: 4px; 
-                    cursor: pointer; 
-                    font-size: 12px;
-                    text-decoration: none;
-                    display: inline-block;
-                    transition: opacity 0.3s;
-                }
-                .btn-edit { background: #2196f3; color: white; }
-                .btn-delete { background: #f44336; color: white; }
-                .btn:hover { opacity: 0.8; }
+                body {{ font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background-color: #000000 !important; color: #ffffff !important; }}
+                .container {{ max-width: 800px; margin: 0 auto; background-color: transparent !important; }}
+                h2 {{ border-bottom: 2px solid rgba(255,255,255,0.06) !important; padding-bottom: 10px !important; }}
+                .channel-item {{ display: flex !important; align-items: center !important; background: #0b0b0b !important; margin-bottom: 15px !important; padding: 15px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important; }}
+                .channel-icon {{ width: 48px !important; height: 48px !important; border-radius: 50% !important; margin-right: 15px !important; object-fit: cover !important; }}
+                .channel-info {{ flex: 1 !important; }}
+                .channel-name {{ font-weight: bold !important; font-size: 16px !important; margin-bottom: 5px !important; color: #ffffff !important; }}
+                .channel-meta {{ color: #bdbdbd !important; font-size: 14px !important; }}
+                .channel-actions {{ display: flex !important; gap: 10px !important; }}
+                .btn {{ padding: 6px 12px !important; border: none !important; border-radius: 4px !important; cursor: pointer !important; font-size: 12px !important; text-decoration: none !important; display: inline-block !important; transition: opacity 0.3s !important; }}
+                .btn-edit {{ background: #1976d2 !important; color: white !important; border: 1px solid #263238 !important; }}
+                .btn-delete {{ background: #b71c1c !important; color: white !important; border: 1px solid #331111 !important; }}
+                .btn:hover {{ opacity: 0.9 !important; }}
             </style>
         </head>
         <body>
@@ -1125,6 +998,42 @@ Note: Do not restrict by nationality, era, or field. Consider notable people wor
 # アプリのインスタンスを作成
 analyzer = YouTubeCompetitorAnalyzer()
 
+# Strong global dark CSS to force dark mode even if hosting injects light styles.
+# Uses high-specificity selectors and !important to override Hugging Face Spaces' theme.
+DARK_THEME_CSS = """
+:root, html, body, .gradio-container {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+    color-scheme: dark !important;
+}
+.gradio-container, .gradio-container * {
+    background-color: transparent !important;
+    color: #ffffff !important;
+    border-color: #333333 !important;
+}
+/* Inputs, buttons and textareas */
+button, .gr-button, input, textarea, select, .gradio-textbox, .gradio-file, .gradio-dropdown, .gradio-button {
+    background-color: #0b0b0b !important;
+    color: #ffffff !important;
+    border: 1px solid #333333 !important;
+}
+input::placeholder, textarea::placeholder {
+    color: #bfbfbf !important;
+}
+.gradio-markdown, .gradio-html, .gradio-label, .gradio-textbox, .gradio-output {
+    color: #ffffff !important;
+}
+/* Ensure components that Gradio or Spaces might wrap still show dark backgrounds */
+.gradio-container .container, .gradio-container .section, .gradio-container .card {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+}
+/* Give high contrast to borders and badges */
+.importance-badge, .detection-badge {
+    color: #ffffff !important;
+}
+"""
+
 # Gradio インターface
 def add_channel_interface(channel_ids_text):
     """Interface function that supports adding multiple channel IDs"""
@@ -1187,7 +1096,7 @@ def show_recent_videos_interface(hours_selection, limit_selection):
     return analyzer.generate_recent_videos_html(hours, limit)
 
 # Gradioアプリの構築
-with gr.Blocks(title="YouTube Competitor Analysis (Global)", theme=gr.themes.Soft()) as app:
+with gr.Blocks(title="YouTube Competitor Analysis (Global)", theme=gr.themes.Dark(), css=DARK_THEME_CSS) as app:
     gr.Markdown("# 🌍 YouTube Competitor Analysis App (Global)")
     gr.Markdown("Analyze competitor channel uploads and detect global clustered trends using **Gemini 2.5 Flash**.")