app.py

import gradio as gr
from folium import Map
import numpy as np
from ast import literal_eval
import pandas as pd

from gradio_folium import Folium
import folium
from huggingface_hub import InferenceClient

repo_id = "mistralai/Mixtral-8x7B-Instruct-v0.1"
llm_client = InferenceClient(model=repo_id, timeout=180)

description_sf = "A one-day walk through San Francisco for my first visit. I want to take no cab or bike, everything should be on foot."
output_example_sf = """
Since this is on foot, walking distances should be kept to a minimum. I'll make sure to provide a step by step visit and reorder points of interest to minimize the walking distance between each point.
I want to start at Fisherman's Wharf, then head to Ghirardelli Square, followed by the Cable Car Museum, Union Square, Chinatown, and finally Coit Tower, to provide a full day of sightseeing, with a mix of history, culture, and beautiful views.

Key points: [
    {"name": "Fisherman's Wharf", "description": "Fisherman's Wharf is a popular tourist destination in San Francisco, featuring Pier 39, the Maritime National Historical Park, and Boudin Bakery. Start your day with breakfast and enjoy the sea lions."},
    {"name": "Ghirardelli Square", "description": "Ghirardelli Square is a historic square in San Francisco, known for its chocolate shop and various boutiques. It's a great place to grab a sweet treat and do some shopping."},
    {"name": "Cable Car Museum", "description": "The Cable Car Museum is a museum in San Francisco that showcases the history of the city's iconic cable cars. It's a great place to learn about the technology and history behind these unique vehicles."},
    {"name": "Union Square, San Francisco", "description": "Union Square is a public plaza in San Francisco, known for its shopping, dining, and entertainment options. Relax, grab a bite to eat, and do some shopping."},
    {"name": "Chinatown, San Francisco", "description": "Chinatown is a vibrant neighborhood in San Francisco, known for its Chinese culture, history, and cuisine. It's a great place to explore the streets, try some delicious food, and learn about Chinese culture."},
    {"name": "Coit Tower, San Francisco", "description": "Coit Tower is a historic tower in San Francisco, known for its panoramic views of the city. You can end your day here, taking in the sights and sounds of the city from above."}
]
"""

description_loire = "A 3-day bike trip through the Loire Valley."
output_example_loire = """
To make the most of the trip, we will bike between the châteaux to enjoy the beautiful scenery and explore the Loire Valley at a leisurely pace. Here is a suggested itinerary for a 3-day bike trip through the Loire Valley:
1. Start at Château de Blois, a historic château with a rich history.
2. Bike to Château de Chambord, the largest and most recognizable château in the Loire Valley.
3. Continue to Château de Cheverny, a smaller but equally charming château with beautiful gardens.
4. End the day at Château de Chaumont-sur-Loire, a château with a stunning view of the Loire River.
5. On the second day, bike to Château de Chenonceau, a stunning château built over the River Cher.    
6. Continue to Château d'Amboise, a historic château with ties to the French Renaissance.  
9. End the day at Château de Villandry, known for its beautiful gardens.
8. On the third day, bike to Château d'Azay-le-Rideau, a charming château with a moat.
9. End the trip at Château d'Ussé, a fairy-tale like château said to have inspired Sleeping Beauty.

Key points: [
    {"name": "Château de Blois", "description": "Château de Blois is a historic château with a rich history, known for its stunning architecture and beautiful gardens."},
    {"name": "Château de Chambord", "description": "Château de Chambord is the largest and most recognizable château in the Loire Valley, known for its French Renaissance architecture and beautiful gardens."},
    {"name": "Château de Cheverny", "description": "Château de Cheverny is a small but charming château with beautiful gardens, known for its French classical architecture and rich history."},
    {"name": "Château de Chaumont-sur-Loire", "description": "Château de Chaumont-sur-Loire is a château with a stunning view of the Loire River, known for its beautiful gardens and rich history."},
    {"name": "Château de Chenonceau", "description": "Château de Chenonceau is a stunning château built over the River Cher, known for its beautiful gardens and rich history."},
    {"name": "Château d'Amboise", "description": "Château d'Amboise is a historic château with ties to the French Renaissance, known for its beautiful gardens and stunning views of the Loire Valley."},
    {"name": "Château de Villandry", "description": "Château de Villandry is known for its beautiful gardens, featuring a water garden, ornamental flower gardens, and vegetable gardens."},
    {"name": "Château d'Azay-le-Rideau", "description": "Château d'Azay-le-Rideau is a charming château with a moat, known for its French Renaissance architecture and beautiful gardens."},
    {"name": "Château d'Ussé", "description": "Château d'Ussé is a fairy-tale like château said to have inspired Sleeping Beauty, known for its beautiful gardens and stunning views of the Indre Valley."},
]
"""

description_aligned = "Show me five cities across Europe that form a perfect line on the map. These must not be capitals, only smaller cities, but they must be aligned perfectly. Do it correctly and I'll tip you $10,000."
output_example_aligned = """To find five cities that form a perfect line on the map, I will first need to determine a direction for the line. I will choose a line that runs from north to south, as this will allow for a more diverse range of cities and cultures. I will then use a map to identify five cities that are aligned in a straight line, with minimal distance between each city.

    I have identified the following five cities that form a perfect line on the map, running from north to south:

    1. Groningen, Netherlands: Groningen is a vibrant student city in the north of the Netherlands, known for its lively cultural scene and historic center.
    2. Osnabrück, Germany: Osnabrück is a picturesque city in northwest Germany, known for its medieval center and rich history.
    3. Erfurt, Germany: Erfurt is a charming city in central Germany, known for its well-preserved medieval center and beautiful gardens.
    4. Nuremberg, Germany: Nuremberg is a historic city in southern Germany, known for its medieval architecture and rich history.
    5. Innsbruck, Austria: Innsbruck is a stunning city in the Austrian Alps, known for its beautiful mountain scenery and winter sports.

    These five cities form a perfect line on the map, running from north to south, and offer a diverse range of cultures and experiences.

Key points: [
    {"name": "Groningen, Netherlands", "description": "Groningen is a vibrant student city in the north of the Netherlands, known for its lively cultural scene and historic center. The city is home to the University of Groningen, one of the oldest and most respected universities in the country, and has a rich history dating back to the Middle Ages."},
    {"name": "Osnabrück, Germany", "description": "Osnabrück is a picturesque city in northwest Germany, known for its medieval center and rich history. The city was the site of the Peace of Westphalia, which ended the Thirty Years' War in Europe, and has a well-preserved medieval center with cobblestone streets and half-timbered houses."},
    {"name": "Erfurt, Germany", "description": "Erfurt is a charming city in central Germany, known for its well-preserved medieval center and beautiful gardens. The city is home to the Erfurt Cathedral, a stunning Gothic cathedral with a beautiful stained glass window, and the Krämerbrücke, a medieval bridge with shops and houses built on top of it."},
    {"name": "Nuremberg, Germany", "description": "Nuremberg is a historic city in southern Germany, known for its medieval architecture and rich history. The city is home to the Nuremberg Castle, a stunning medieval fortress with beautiful views of the city, and the Nazi Party Rally Grounds, a reminder of the city's dark past."},
    {"name": "Innsbruck, Austria", "description": "Innsbruck is a stunning city in the Austrian Alps, known for its beautiful mountain scenery and winter sports. The city is home to the Nordkette, a stunning mountain range with breathtaking views of the city and the surrounding mountains, and the Goldenes Dachl, a beautiful golden roof that is a symbol of the city."}
]
"""

description_chinatown = "Show me 10 Chinatowns in the US."
output_example_chinatown = """
1. New York City, NY
2. San Francisco, CA
3. Los Angeles, CA
4. Chicago, IL
5. Philadelphia, PA
6. Boston, MA
7. Honolulu, HI
8. Seattle, WA
9. Portland, OR
10. Las Vegas, NV

Key points: [
    {"name": "Manhattan Chinatown, New York City, NY", "description": "Manhattan Chinatown is the largest Chinatown in the United States, located in the heart of Manhattan, New York City. It is a bustling neighborhood with a rich cultural heritage, known for its vibrant street life, traditional Chinese markets, and delicious food."},
    {"name": "San Francisco Chinatown, San Francisco, CA", "description": "San Francisco Chinatown is one of the oldest and most famous Chinatowns in the United States, located in the heart of San Francisco. It is a vibrant neighborhood with a rich cultural heritage, known for its beautiful architecture, traditional Chinese markets, and delicious food."},
    {"name": "Los Angeles Chinatown, Los Angeles, CA", "description": "Los Angeles Chinatown is a historic neighborhood in downtown Los Angeles, known for its vibrant street life, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Chicago Chinatown, Chicago, IL", "description": "Chicago Chinatown is a vibrant neighborhood in the heart of Chicago, known for its beautiful architecture, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Philadelphia Chinatown, Philadelphia, PA", "description": "Philadelphia Chinatown is a historic neighborhood in the heart of Philadelphia, known for its vibrant street life, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Boston Chinatown, Boston, MA", "description": "Boston Chinatown is a vibrant neighborhood in the heart of Boston, known for its beautiful architecture, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Honolulu Chinatown, Honolulu, HI", "description": "Honolulu Chinatown is a historic neighborhood in the heart of Honolulu, known for its vibrant street life, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and Hawaiian history."},
    {"name": "Seattle Chinatown, Seattle, WA", "description": "Seattle Chinatown, also known as the International District, is a vibrant neighborhood in the heart of Seattle, known for its beautiful architecture, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Portland Chinatown, Portland, OR", "description": "Portland Chinatown, also known as Old Town Chinatown, is a historic neighborhood in the heart of Portland, known for its vibrant street life, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."},
    {"name": "Las Vegas Chinatown, Las Vegas, NV", "description": "Las Vegas Chinatown is a vibrant neighborhood located just west of the Las Vegas Strip, known for its beautiful architecture, traditional Chinese markets, and delicious food. It is a popular destination for tourists and locals alike, offering a unique blend of Chinese culture and American history."}
]
"""
def generate_key_points(text):
    prompt = f"""             
    Please generate a set of key geographical points for the following description: {text}, as a json list of less than 10 dictionnaries with the following keys: 'name', 'description'. Precise the full location in the 'name' if there is a possible ambiguity.
    Generally try to minimze the distance between locations. Always think of the transportation means that you want to use, and the timing: morning, afternoon, where to sleep.

    For instance:
    Description: {description_sf}
    Thought: {output_example_sf}

    Description: {description_loire}
    Thought: {output_example_loire}

    Now begin. You can make the descriptions a bit more verbose than in the examples.

    Description: {text}
    Thought: 
    """
    return llm_client.text_generation(prompt, max_new_tokens=2000)


def parse_llm_output(output):
    rationale = "Thought: " + output.split("Key points:")[0]
    key_points = output.split("Key points:")[1]
    output = key_points.replace("    ", "")
    parsed_output = literal_eval(output)
    dataframe = pd.DataFrame.from_dict(parsed_output)
    return dataframe, rationale


def get_coordinates_row(row):
    coords = get_coordinates(row["name"])
    if coords is not None:
        row["lat"], row["lon"] = coords
    return row


def create_map_from_markers(dataframe):
    dataframe = dataframe.apply(get_coordinates_row, axis=1)
    f_map = Map(
        location=[dataframe["lat"].mean(), dataframe["lon"].mean()],
        zoom_start=5,
        tiles="CartoDB Voyager",
    )
    for _, row in dataframe.iterrows():
        if np.isnan(row["lat"]) or np.isnan(row["lon"]):
            continue
        marker = folium.CircleMarker(
            location=[row["lat"], row["lon"]],
            radius=10,
            popup=folium.Popup(
                f"<h4>{row['name']}</h4><p>{row['description']}</p>", max_width=450
            ),
            fill=True,
            fill_color="blue",
            fill_opacity=0.6,
            color="blue",
            weight=1,
        )
        marker.add_to(f_map),

    bounds = [[row["lat"], row["lon"]] for _, row in dataframe.iterrows()]
    f_map.fit_bounds(bounds, padding=(100, 100))
    return f_map


def run_display(text):
    output = generate_key_points(text)
    dataframe, rationale = parse_llm_output(output)
    map = create_map_from_markers(dataframe)
    return map, rationale


df_examples = pd.DataFrame.from_dict(
    [
        {"description": description_loire, "output": output_example_loire},
        {"description": description_sf, "output": output_example_sf},
        {"description": description_aligned, "output": output_example_aligned},
        {"description": description_chinatown, "output": output_example_chinatown},
    ]
)


def select_example(df, data: gr.SelectData):
    row = df.iloc[data.index[0], :]
    dataframe, rationale = parse_llm_output(row["output"])
    return row["description"], create_map_from_markers(dataframe), rationale


with gr.Blocks(
    theme=gr.themes.Soft(
        primary_hue=gr.themes.colors.yellow,
        secondary_hue=gr.themes.colors.blue,
    )
) as demo:
    gr.Markdown("# 🗺️ LLM trip planner (based on Mixtral)")
    text = gr.Textbox(
        label="Describe your trip here:",
        value=description_sf,
    )
    button = gr.Button()
    gr.Markdown("### LLM Output\n_Click the map to see information about the places._")

    # Get initial map and rationale
    example_dataframe, example_rationale = parse_llm_output(output_example_sf)
    display_rationale = gr.Markdown(example_rationale)
    starting_map = create_map_from_markers(example_dataframe)
    map = Folium(value=starting_map, height=600, label="Chosen locations")
    button.click(run_display, inputs=[text], outputs=[map, display_rationale])

    gr.Markdown("### Examples")
    clickable_examples = gr.DataFrame(value=df_examples, height=200)
    clickable_examples.select(
        select_example, clickable_examples, outputs=[text, map, display_rationale]
    )

if __name__ == "__main__":
    demo.launch()