Small refactor of the Tour Guide UI

example/assets/js/components/TourGuide/TourGuide.tsx

@@ -1,21 +1,31 @@
-import "@mantine/core/styles.css";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import {
-  Container,
-  TextInput,
   Button,
-  LoadingOverlay,
+  Card,
+  Container,
+  Flex,
   Group,
+  LoadingOverlay,
+  Text,
+  TextInput,
+  Title,
 } from "@mantine/core";
-import { useEffect, useState } from "react";
 import { notifications } from "@mantine/notifications";
-import { Link } from "react-router-dom";
+import { IconLocation, IconMap2 } from "@tabler/icons-react";
+
+interface Attraction {
+  name: string;
+  description: string;
+  url: string;
+}
 
 export function TourGuide() {
   const [showLoginNotification, setShowLoginNotification] =
     useState<boolean>(false);
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
-  const [attractions, setAttractions] = useState([]);
+  const [attractions, setAttractions] = useState<Attraction[]>([]);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -34,14 +44,16 @@ export function TourGuide() {
     }
 
     setLoading(true);
-    const response = await fetch(`/tour-guide/?coordinate=${latitude},${longitude}`);
+    const response = await fetch(
+      `/tour-guide/?coordinate=${latitude},${longitude}`
+    );
     const data = await response.json();
     if (data.error) {
       setShowLoginNotification(true);
     } else {
       setAttractions(data.nearby_attractions);
     }
-    setLoading(false)
+    setLoading(false);
   }
 
   useEffect(() => {
@@ -67,7 +79,12 @@ export function TourGuide() {
   return (
     <Container>
       <LoadingOverlay visible={loading} />
-      <Group justify="left" align="flex-end">
+
+      <Title mt="md" order={2}>
+        Tour Guide
+      </Title>
+
+      <Group justify="left" align="flex-end" mb="xl">
         <TextInput
           required
           label="Latitude"
@@ -80,33 +97,43 @@ export function TourGuide() {
           value={longitude}
           onChange={(e) => setLongitude(e.target.value)}
         />
-        <Button onClick={findAttractions}>Guide Me!</Button>
+        <Button
+          leftSection={<IconMap2 size={18} stroke={1.5} />}
+          onClick={findAttractions}
+        >
+          Guide Me!
+        </Button>
       </Group>
-      {loading ? <h3>Loading</h3> : null}
-      <div>
-        {attractions.map((item, i) => (
-          <div key={i}>
-            <h2>
-              {item.attraction_url ? (
-                <a href={item.attraction_url} target="_blank">
-                  {item.attraction_name}
-                </a>
-              ) : (
-                item.attraction_name
-              )}
-            </h2>
-            <span>{item.attraction_description}</span>
-            <div>
-              <a
-                href={`https://www.google.com/maps?q=${item.attraction_name}`}
-                target="_blank"
-              >
-                Open in Google Maps
-              </a>
-            </div>
-          </div>
+
+      <Flex gap="md" align="flex-start" direction="row" wrap="wrap" miw={460}>
+        {attractions.map((attraction, index) => (
+          <Card
+            key={index}
+            w={280}
+            shadow="sm"
+            padding="lg"
+            radius="md"
+            withBorder
+          >
+            <Text fw={500} size="lg" mt="md" mb="xs">
+              {attraction.name}
+            </Text>
+            <Text size="sm" c="dimmed" mb="md">
+              {attraction.description}
+            </Text>
+            <Button
+              component="a"
+              href={`https://www.google.com/maps/search/?api=1&query=${attraction.name}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="light"
+              leftSection={<IconLocation size={18} stroke={1.5} />}
+            >
+              View on Google Maps
+            </Button>
+          </Card>
         ))}
-      </div>
+      </Flex>
     </Container>
   );
 }

example/tour_guide/ai_assistants.py

@@ -9,11 +9,11 @@
 
 
 class Attraction(BaseModel):
-    attraction_name: str = Field(description="The name of the attraction in english")
-    attraction_description: str = Field(
+    name: str = Field(description="The name of the attraction in english")
+    description: str = Field(
         description="The description of the attraction, provide information in an entertaining way"
     )
-    attraction_url: str = Field(
+    url: str = Field(
         description="The URL of the attraction, keep empty if you don't have this information"
     )
 
@@ -31,7 +31,7 @@ class TourGuideAIAssistant(AIAssistant):
         "Only include in your response the items that are relevant to a tourist visiting the area. "
         "Only call the find_nearby_attractions tool once. "
     )
-    model = "gpt-4o-2024-08-06"
+    model = "gpt-4o-mini"
     structured_output = TourGuide
 
     def get_instructions(self):