ChatGPT Clone with Map

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; function Map({ center, zoom, markers }) { const ref = useRef(); const [map, setMap] = useState(null); const [mapMarkers, setMapMarkers] = useState([]); useEffect(() => { if (!map) { const newMap = new window.google.maps.Map(ref.current, { center, zoom, }); setMap(newMap); } else { map.setCenter(center); map.setZoom(zoom); } }, [center, zoom]); useEffect(() => { if (map) { // Clear existing markers mapMarkers.forEach(marker => marker.setMap(null)); // Add new markers const newMarkers = markers.map(markerInfo => { return new window.google.maps.Marker({ position: markerInfo.position, map: map, title: markerInfo.title }); }); setMapMarkers(newMarkers); } }, [map, markers]); return

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

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

{message.content}

))} {isLoading &&

Thinking...

} {error &&

{error}

}

View Source

{locationError &&

{locationError}

}

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

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

Tourist

Version 7