Update app.py

app.py

@@ -71,18 +71,30 @@ def find_fastest_route(G, start_node, end_node, weight='travel_time'):
         return None, None
 
 def plot_route_on_map(G, route, start_point, end_point):
-    """Отрисовывает один маршрут на стильной карте, как в скриншоте."""
-    m = folium.Map(tiles="CartoDB positron", attr='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>')
+    """Отрисовывает один маршрут на большой цветной карте со стильными маркерами."""
+    # Возвращаем цветную карту OpenStreetMap
+    m = folium.Map(tiles="OpenStreetMap")
 
     if route:
         points = [(G.nodes[node]['y'], G.nodes[node]['x']) for node in route]
-        main_line = folium.PolyLine(points, color="#007FFF", weight=5, opacity=0.9)
+        
+        # Белая "подложка" для контраста и лучшей видимости
+        folium.PolyLine(points, color="white", weight=10, opacity=0.8).add_to(m)
+        # Основная линия маршрута - яркий, приятный синий цвет
+        main_line = folium.PolyLine(points, color="#3b82f6", weight=5, opacity=1, tooltip="Оптимальный маршрут")
         main_line.add_to(m)
+
         m.fit_bounds(main_line.get_bounds(), padding=(30, 30))
 
-    # Маркеры, как в скриншоте: красный - старт, зеленый - финиш
-    folium.Marker(location=start_point, popup="<b>Старт</b>", icon=folium.Icon(color="red")).add_to(m)
-    folium.Marker(location=end_point, popup="<b>Финиш</b>", icon=folium.Icon(color="green")).add_to(m)
+    # Новые, более стильные маркеры с использованием иконок Font Awesome
+    folium.Marker(
+        location=start_point, popup="<b>Точка А (Старт)</b>",
+        icon=folium.Icon(color="blue", icon="play-circle", prefix='fa')
+    ).add_to(m)
+    folium.Marker(
+        location=end_point, popup="<b>Точка Б (Финиш)</b>",
+        icon=folium.Icon(color="red", icon="flag-checkered", prefix='fa')
+    ).add_to(m)
 
     return m
 
@@ -93,7 +105,7 @@ print("✅ Вспомогательные функции готовы.")
 # ==============================================================================
 print("\n🚀 Шаг 5: Настройка и запуск веб-интерфейса Gradio...")
 
-geolocator = Nominatim(user_agent="bishkek_navigator_app_v4")
+geolocator = Nominatim(user_agent="bishkek_navigator_app_v5")
 geocode = RateLimiter(geolocator.geocode, min_delay_seconds=1)
 
 def find_and_plot_route_by_address(start_address, end_address, day_of_week, hour, minute):
@@ -128,73 +140,62 @@ def find_and_plot_route_by_address(start_address, end_address, day_of_week, hour
         
         final_map = plot_route_on_map(G, route, start_point, end_point)
         
-        # Форматирование вывода в Markdown, как на скриншоте
+        # Форматирование вывода в Markdown с новой цветовой схемой
         output_md = f"""
-        **✅ Маршрут построен!**
-
-        *   Время в пути: ~{total_time_min:.1f} мин.
-        *   Расстояние: {distance_km:.2f} км
-        *   Светофоров на пути: {signals_on_route}
+        ### ✅ Маршрут построен!
+        - **Время в пути:** <span style="font-size: 1.1em; color: #3b82f6;">**~{total_time_min:.1f} мин.**</span>
+        - **Расстояние:** **{distance_km:.2f} км**
+        - **Светофоров на пути:** **{signals_on_route}**
         """
-        return final_map._repr_html_(), output_md.replace("    *", "*") # Убираем лишние отступы для Markdown
+        return final_map._repr_html_(), output_md
         
     except Exception as e:
         return None, f"### 💥 Произошла внутренняя ошибка:\n`{e}`"
 
-# CSS для стилизации интерфейса под дизайн со скриншота
+# CSS для новой сине-голубой темы
 css = """
-body, .gradio-container { background-color: #f0fdfa; font-family: 'Inter', sans-serif; }
-.gradio-container { max-width: 1200px !important; margin: auto !important; padding-top: 1.5rem; }
-/* Стили для карты */
-#map-output { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
-/* Стили для кнопки */
+body { font-family: 'Inter', sans-serif; }
+.gradio-container { max-width: 100% !important; }
+/* Кнопка */
 .gr-button-primary { 
-    background-color: #14b8a6; color: white; font-weight: bold; border-radius: 0.75rem; border: none;
-    box-shadow: 0 4px 6px rgba(20, 184, 166, 0.2); transition: all 0.2s ease; padding: 12px 0;
-}
-.gr-button-primary:hover { background-color: #0d9488; box-shadow: 0 7px 10px rgba(20, 184, 166, 0.3); transform: translateY(-2px); }
-/* Стили для информационного блока с результатом */
-#info-box { background-color: white; padding: 1.5rem !important; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
-/* Стили для меток (Откуда?, Куда?, и т.д.) */
-.gradio-container .form .gr-label span {
-    background-color: #ccfbf1; color: #134e4a; padding: 5px 12px;
-    border-radius: 9999px; font-size: 0.8em; font-weight: 600;
-    display: inline-block; margin-bottom: 6px;
-}
-/* Стили для полей ввода */
-.gradio-container .gr-input-text, .gradio-container .gr-dropdown {
-    border-radius: 0.75rem !important; border-color: #cbd5e1 !important;
+    background: linear-gradient(to right, #60a5fa, #3b82f6);
+    color: white; font-weight: bold; border: none; transition: all 0.3s ease;
+    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
 }
-.gradio-container .gr-input-text:focus, .gradio-container .gr-dropdown:focus {
-    border-color: #14b8a6 !important; box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3) !important;
+.gr-button-primary:hover {
+    background: linear-gradient(to right, #3b82f6, #2563eb);
+    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.45); transform: translateY(-1px);
 }
+/* Информационный блок */
+#info-box { background-color: #f9fafb; padding: 1.5rem !important; border-radius: 0.75rem; border: 1px solid #e5e7eb;}
 """
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="teal", secondary_hue="gray", font=gr.themes.GoogleFont("Inter")), css=css) as demo:
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="blue", font=gr.themes.GoogleFont("Inter")), css=css) as demo:
     gr.Markdown(
         """
-        <div style="text-align: center; margin-bottom: 2rem;">
-            <h1 style="font-size: 2.5rem; font-weight: 700; color: #0f766e;">🗺️ Умный навигатор по Бишкеку</h1>
-            <p style="color: #0d9488; font-size: 1.1rem;">Постройте оптимальный маршрут с учётом прогноза пробок</p>
+        <div style="text-align: center;">
+            <h1 style="font-size: 2.5rem; font-weight: 700;">🗺️ Умный навигатор по Бишкеку</h1>
+            <p style="color: #4b5563; font-size: 1.1rem;">Постройте оптимальный маршрут с учётом прогноза пробок</p>
         </div>
         """
     )
     with gr.Row(equal_height=False):
         with gr.Column(scale=1):
             with gr.Group():
-                start_address_input = gr.Textbox(label="Откуда?", placeholder="7 микрорайон")
-                end_address_input = gr.Textbox(label="Куда?", placeholder="Ошский рынок")
+                start_address_input = gr.Textbox(label="Откуда?", placeholder="Например, ЦУМ")
+                end_address_input = gr.Textbox(label="Куда?", placeholder="Например, парк Ата-Тюрк")
                 
-                with gr.Accordion("🗓️ Указать время и дату", open=False):
-                    day_dropdown = gr.Dropdown(label="День недели", choices=["Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота", "Воскресенье"], value="Понедельник", type="index")
-                    current_time = datetime.datetime.now()
-                    hour_slider = gr.Slider(label="Час", minimum=0, maximum=23, step=1, value=current_time.hour)
-                    minute_slider = gr.Slider(label="Минута", minimum=0, maximum=59, step=1, value=current_time.minute)
+                # Убрали Accordion, теперь настройки времени всегда видны
+                gr.Markdown("#### 🗓️ Укажите время и дату")
+                day_dropdown = gr.Dropdown(label="День недели", choices=["Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота", "Воскресенье"], value="Понедельник", type="index")
+                current_time = datetime.datetime.now()
+                hour_slider = gr.Slider(label="Час", minimum=0, maximum=23, step=1, value=current_time.hour)
+                minute_slider = gr.Slider(label="Минута", minimum=0, maximum=59, step=1, value=current_time.minute)
             
             build_btn = gr.Button("🚀 Найти лучший маршрут", variant="primary")
             output_info = gr.Markdown(label="Информация о маршруте", elem_id="info-box")
 
-        with gr.Column(scale=2):
+        with gr.Column(scale=3): # Увеличили масштаб для карты, чтобы она была больше
             output_map_html = gr.HTML(label="Карта с маршрутом", elem_id="map-output")
 
     build_btn.click(