Update app.py

app.py

@@ -245,20 +245,95 @@ def fetch_local_news():
 def fetch_local_events():
     api_key = os.environ['SERP_API']
     url = f'https://serpapi.com/search.json?engine=google_events&q=Events+in+Omaha&hl=en&gl=us&api_key={api_key}'
-    
+
     response = requests.get(url)
-    if response.status_code == 200:
+    if response.status_code == 200):
         events_results = response.json().get("events_results", [])
-        events_text = "<h2>Local Events </h2>"
+        events_html = """
+        <h2 style="font-family: 'Georgia', serif; color: #4CAF50; background-color: #f8f8f8; padding: 10px; border-radius: 10px;">Local Events</h2>
+        <style>
+            .event-item {
+                font-family: 'Verdana', sans-serif;
+                color: #333;
+                background-color: #f0f8ff;
+                margin-bottom: 15px;
+                padding: 10px;
+                border: 1px solid #ddd;
+                border-radius: 5px;
+                transition: box-shadow 0.3s ease, background-color 0.3s ease;
+                font-weight: bold;
+            }
+            .event-item:hover {
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                background-color: #e6f7ff;
+            }
+            .event-item a {
+                color: #1E90FF;
+                text-decoration: none;
+                font-weight: bold;
+            }
+            .event-item a:hover {
+                text-decoration: underline;
+            }
+            .event-preview {
+                position: absolute;
+                display: none;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                background-color: white;
+                z-index: 1000;
+                max-width: 300px;
+                padding: 10px;
+                font-family: 'Verdana', sans-serif;
+                color: #333;
+            }
+        </style>
+        <script>
+            function showPreview(event, previewContent) {
+                var previewBox = document.getElementById('event-preview');
+                previewBox.innerHTML = previewContent;
+                previewBox.style.left = event.pageX + 'px';
+                previewBox.style.top = event.pageY + 'px';
+                previewBox.style.display = 'block';
+            }
+            function hidePreview() {
+                var previewBox = document.getElementById('event-preview');
+                previewBox.style.display = 'none';
+            }
+        </script>
+        <div id="event-preview" class="event-preview"></div>
+        """
         for index, event in enumerate(events_results):
             title = event.get("title", "No title")
             date = event.get("date", "No date")
             location = event.get("address", "No location")
             link = event.get("link", "#")
-            events_text += f"<p>{index + 1}. {title}<br>  Date: {date}<br>   Location: {location}<br> <a href='{link}' target='_blank'>Link :</a> <br>"
-        return events_text
+            events_html += f"""
+            <div class="event-item" onmouseover="showPreview(event, 'Date: {date}<br>Location: {location}')" onmouseout="hidePreview()">
+                <a href='{link}' target='_blank'>{index + 1}. {title}</a>
+                <p>Date: {date}<br>Location: {location}</p>
+            </div>
+            """
+        return events_html
     else:
-        return "Failed to fetch local events"
+        return "<p>Failed to fetch local events</p>"
+
+
+    
+    # response = requests.get(url)
+    # if response.status_code == 200:
+    #     events_results = response.json().get("events_results", [])
+    #     events_text = "<h2>Local Events </h2>"
+    #     for index, event in enumerate(events_results):
+    #         title = event.get("title", "No title")
+    #         date = event.get("date", "No date")
+    #         location = event.get("address", "No location")
+    #         link = event.get("link", "#")
+    #         events_text += f"<p>{index + 1}. {title}<br>  Date: {date}<br>   Location: {location}<br> <a href='{link}' target='_blank'>Link :</a> <br>"
+    #     return events_text
+    # else:
+    #     return "Failed to fetch local events"
 
 # Function to fetch local weather
 def fetch_local_weather():
@@ -390,8 +465,8 @@ with gr.Blocks(theme='rawrsor1/Everforest') as demo:
         # with gr.Column():
         #     weather_output = gr.HTML(value=fetch_local_weather())
         
-        # with gr.Column():
-        #     news_output = gr.HTML(value=fetch_local_news())
+        with gr.Column():
+            news_output = gr.HTML(value=fetch_local_news())
 
     def setup_ui():
         state = gr.State()
@@ -425,8 +500,8 @@ with gr.Blocks(theme='rawrsor1/Everforest') as demo:
                 audio_output = gr.Audio()
                 #bot_msg.then(generate_audio_elevenlabs, chatbot, audio_output)
                 bot_msg_audio = bot_msg.then(lambda history: generate_audio_elevenlabs(history[-1][1]), chatbot, audio_output)
-            # with gr.Column():
-            #     news_output = gr.HTML(value=fetch_local_events())
+            with gr.Column():
+                news_output = gr.HTML(value=fetch_local_events())
 
     setup_ui()