Update app.py

app.py

@@ -90,15 +90,17 @@ def display_channel_statistics(statistics):
         return statistics["error"]
     return f"""
     <div style='text-align: center;'>
-        <img src='{statistics["Cover"]}' style='width: 100%; max-width: 300px; height: auto; text-align: center;'><br>
-        <a href='{statistics["URL"]}'>{statistics["Title"]}</a><br>
-        Subscribers: {statistics["Subscribers"]}<br>
-        Views: {statistics["Views"]}<br>
-        Total videos: {statistics["Total videos"]}
+        <img src='{statistics["Cover"]}' style='width: 100%; max-width: 300px; height: auto; margin-bottom: 15px;'><br>
+        <a href='{statistics["URL"]}' style='font-size: 1.5em; font-weight: bold; color: #2c3e50;'>{statistics["Title"]}</a><br>
+        <div style='font-size: 1.1em; color: #7f8c8d;'>
+            Subscribers: {statistics["Subscribers"]}<br>
+            Views: {statistics["Views"]}<br>
+            Total videos: {statistics["Total videos"]}
+        </div>
     </div>
     """
 
-# Format and display video data as HTML table
+# Format and display video data as HTML table with enhanced CSS
 def display_video_data(video_data):
     if "error" in video_data:
         return video_data["error"]
@@ -107,10 +109,50 @@ def display_video_data(video_data):
     video_data['Video'] = video_data.apply(
         lambda row: f'<a href="{row["Video"]}" target="_blank">{row["Title"]}</a><br>{row["PublishedAt"]}', axis=1
     )
-    video_data['Thumbnail'] = video_data['Thumbnail'].apply(lambda x: f'<img src="{x}" style="width: 100%; max-width: 100px; height: auto;"><br>')
+    video_data['Thumbnail'] = video_data['Thumbnail'].apply(lambda x: f'<img src="{x}" style="width: 100%; max-width: 100px; height: auto; margin: 5px 0;"><br>')
     video_data['Video'] = video_data['Thumbnail'] + video_data['Video']
     video_data = video_data.drop(['Thumbnail', 'Title', 'PublishedAt'], axis=1)
-    return video_data.to_html(escape=False, index=False).replace('text-align: right;', 'text-align: center;')
+    
+    # Custom CSS for table styling
+    custom_css = """
+    <style>
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 25px 0;
+        font-size: 1em;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+        border-radius: 10px;
+        overflow: hidden;
+    }
+    th, td {
+        padding: 15px;
+        background-color: #ffffff;
+        color: #333333;
+    }
+    th {
+        background-color: #f8f9fa;
+        font-weight: bold;
+        text-align: center;
+        border-bottom: 2px solid #e9ecef;
+    }
+    tr {
+        border-bottom: 1px solid #e9ecef;
+    }
+    tr:nth-of-type(even) {
+        background-color: #f8f9fa;
+    }
+    tr:last-of-type {
+        border-bottom: none;
+    }
+    tr:hover {
+        background-color: #f1f1f1;
+    }
+    </style>
+    """
+    
+    return custom_css + video_data.to_html(escape=False, index=False).replace('text-align: right;', 'text-align: center;')
 
 # Load API key from environment variable
 api_key = os.getenv('API_KEY')
@@ -131,18 +173,60 @@ def fetch_data(selected_category, platform):
         return statistics_display, video_data_display
 
 # Define and launch Gradio interface
+css = """
+<style>
+  @media (max-width: 600px) {
+    .fixed-top {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 999;
+        background: white;
+        padding: 10px 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    body {
+        padding-top: 70px; /* Adjust based on the height of the fixed element */
+    }
+  }
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f3f4f6;
+    color: #333333;
+  }
+  .gradio-container {
+    padding: 20px;
+  }
+  .gr-inputs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  .gr-inputs > div {
+    margin: 0 10px;
+  }
+  .gr-output {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+</style>
+"""
+
 gr_interface = gr.Interface(
     fn=fetch_data,
     inputs=[
-        gr.Dropdown(choices=list(scheme.keys()), label="Select Channel"),
-        gr.Dropdown(choices=list(next(iter(scheme.values())).keys()), label="Select Platform")
+        gr.Dropdown(choices=list(scheme.keys()), label="Select Channel", elem_classes=["fixed-top"]),
+        gr.Dropdown(choices=list(next(iter(scheme.values())).keys()), label="Select Platform", elem_classes=["fixed-top"])
     ],
     outputs=[
         gr.HTML(label="General Channel Statistics"),
         gr.HTML(label="Video Data")
     ],
     title="Social Media Analytics",
-    description="Select a channel and platform to fetch analytics data."
+    description="Select a channel and platform to fetch analytics data.",
+    css=css
 )
 
 gr_interface.launch()