ChatGPT Clone with Map

;\n}\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [userLocation, setUserLocation] = useState({ lat: 0, lng: 0 });\n const [locationError, setLocationError] = useState(null);\n const [mapMarkers, setMapMarkers] = useState([]);\n\n useEffect(() => {\n if (\"geolocation\" in navigator) {\n navigator.geolocation.getCurrentPosition(\n (position) => {\n setUserLocation({\n lat: position.coords.latitude,\n lng: position.coords.longitude\n });\n },\n (error) => {\n console.error(\"Error getting location:\", error);\n setLocationError(\"Unable to retrieve your location. Using default.\");\n }\n );\n } else {\n setLocationError(\"Geolocation is not supported by your browser. Using default.\");\n }\n }, []);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n const userMessage = { role: \"user\", content: input };\n setMessages((prevMessages) => [...prevMessages, userMessage]);\n setInput(\"\");\n setIsLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n messages: [...messages, userMessage],\n location: userLocation\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to get response\");\n }\n\n const data = await response.json();\n setMessages((prevMessages) => [...prevMessages, data.message]);\n \n // Update map markers if provided\n if (data.mapMarkers) {\n setMapMarkers(data.mapMarkers);\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(error.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((message, index) => (\n

\n {message.content}\n

\n ))}\n {isLoading &&

Thinking...

}\n {error &&

{error}

}\n

\n {locationError &&

{locationError}

}\n \n

\n );\n}\n\nfunction client() {\n const script = document.createElement('script');\n script.src = `https://maps.googleapis.com/maps/api/js?key=${window.GOOGLE_MAPS_API_KEY}`;\n script.async = true;\n script.defer = true;\n script.onload = () => {\n createRoot(document.getElementById(\"root\")).render();\n };\n document.head.appendChild(script);\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function makeGoogleMapsApiCall(endpoint, params) {\n const baseUrl = \"https://maps.googleapis.com/maps/api\";\n const url = new URL(`${baseUrl}${endpoint}`);\n url.searchParams.append(\"key\", Deno.env.get(\"GOOGLE_MAPS_API_KEY\"));\n \n for (const [key, value] of Object.entries(params)) {\n url.searchParams.append(key, value);\n }\n\n const response = await fetch(url.toString());\n if (!response.ok) {\n throw new Error(`Google Maps API error: ${response.statusText}`);\n }\n return await response.json();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { messages, location } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n const client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\",\n });\n\n try {\n // Add location information to the messages\n const messagesWithLocation = [\n ...messages,\n {\n role: \"system\",\n content: `The user's current location is: Latitude ${location.lat}, Longitude ${location.lng}. You can use this information to provide location-specific responses. You can also request Google Maps data by responding with a JSON object in the format: {\"action\": \"maps_api\", \"endpoint\": \"/maps/api/place/nearbysearch/json\", \"params\": {\"location\": \"${location.lat},${location.lng}\", \"radius\": \"1500\", \"type\": \"restaurant\"}}`\n }\n ];\n\n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: messagesWithLocation,\n });\n\n const generatedMessage = response.choices[0].message;\n\n // Check if the response contains a Google Maps API request\n let mapData = null;\n try {\n const jsonResponse = JSON.parse(generatedMessage.content);\n if (jsonResponse.action === \"maps_api\") {\n mapData = await makeGoogleMapsApiCall(jsonResponse.endpoint, jsonResponse.params);\n \n // Process map data and create markers\n const mapMarkers = mapData.results.map(place => ({\n position: place.geometry.location,\n title: place.name\n }));\n\n return Response.json({ \n message: { role: \"assistant\", content: `Here are some places I found:\\n${mapMarkers.map(m => m.title).join('\\n')}` },\n mapMarkers \n });\n }\n } catch (e) {\n // Not a JSON response, continue with normal processing\n }\n\n return Response.json({ message: generatedMessage });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n\n if (error.status === 429) {\n return Response.json({ error: \"Cerebras API rate limit reached. Please try again later.\" }, { status: 429 });\n } else {\n return Response.json({ error: `API Error: ${error.message}` }, { status: 500 });\n }\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n ChatGPT Clone with Map\n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n height: 100vh;\n background-color: #f0f0f0;\n}\n\n.app-container {\n display: flex;\n height: 100vh;\n}\n\n.chat-container {\n width: 20%;\n min-width: 400px;\n max-width: calc(100% - 300px);\n height: 100%;\n display: flex;\n flex-direction: column;\n border-right: 1px solid #ccc;\n overflow: hidden;\n background-color: white;\n}\n\n.map-container {\n flex: 1;\n min-width: 300px;\n height: 100%;\n position: relative;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 10px;\n}\n\n.message {\n margin-bottom: 8px;\n padding: 8px;\n border-radius: 8px;\n max-width: 90%;\n font-size: 0.9em;\n}\n\n.user {\n background-color: #007bff;\n color: white;\n align-self: flex-end;\n margin-left: auto;\n}\n\n.assistant {\n background-color: #f1f1f1;\n color: black;\n align-self: flex-start;\n}\n\n.error-message {\n background-color: #ffcccc;\n color: #cc0000;\n padding: 8px;\n border-radius: 8px;\n margin-bottom: 8px;\n text-align: center;\n font-size: 0.9em;\n}\n\n.chat-input-form {\n display: flex;\n padding: 8px;\n border-top: 1px solid #ccc;\n}\n\ninput {\n flex-grow: 1;\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 8px;\n font-size: 0.9em;\n}\n\nbutton {\n padding: 8px 16px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9em;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.source-link {\n text-align: center;\n padding: 8px;\n font-size: 0.7em;\n}\n\n.source-link a {\n color: #007bff;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n\n.map-container .error-message {\n position: absolute;\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1000;\n background-color: rgba(255, 204, 204, 0.9);\n padding: 10px;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n@media (max-width: 1000px) {\n .app-container {\n flex-direction: column;\n }\n\n .chat-container {\n width: 100%;\n max-width: 100%;\n height: 50%;\n min-height: 400px;\n border-right: none;\n border-bottom: 1px solid #ccc;\n }\n\n .map-container {\n width: 100%;\n height: 50%;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/vawogbemi/Tourist/code/main.tsx","extension","actionData","errors"]