LLM-powered Geocoder Widget

/** * This code creates a geocoder widget similar to the Google Maps API search widget. * It uses React for the frontend, the Cerebras API for LLM-based geocoding, * and Leaflet for displaying the map. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import debounce from "https://esm.sh/lodash.debounce"; function App() { const [query, setQuery] = useState(""); const [suggestions, setSuggestions] = useState([]); const [isLoading, setIsLoading] = useState(false); const [selectedLocation, setSelectedLocation] = useState(null); const suggestionCache = useRef({}); const mapRef = useRef(null); useEffect(() => { if (typeof window !== "undefined") { import("https://esm.sh/leaflet@1.9.4").then((L) => { if (!mapRef.current) { mapRef.current = L.map('map').setView([0, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mapRef.current); } }); } }, []); useEffect(() => { if (selectedLocation && mapRef.current) { const { lat, lon } = selectedLocation; mapRef.current.setView([lat, lon], 13); L.marker([lat, lon]).addTo(mapRef.current); } }, [selectedLocation]); const fetchSuggestions = async (input) => { if (suggestionCache.current[input]) { setSuggestions(suggestionCache.current[input]); return; } setIsLoading(true); try { const response = await fetch("/geocode", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: input }), }); if (!response.ok) throw new Error("Failed to fetch suggestions"); const data = await response.json(); setSuggestions(data); suggestionCache.current[input] = data; } catch (error) { console.error("Error fetching suggestions:", error); setSuggestions([]); } finally { setIsLoading(false); } }; const debouncedFetchSuggestions = useRef( debounce(fetchSuggestions, 300) ).current; useEffect(() => { if (query.length > 2) { debouncedFetchSuggestions(query); } else { setSuggestions([]); } }, [query]); const handleSuggestionClick = (suggestion) => { setQuery(suggestion.name); setSelectedLocation({ lat: parseFloat(suggestion.latitude), lon: parseFloat(suggestion.longitude) }); setSuggestions([]); }; return (

setQuery(e.target.value)} placeholder="Enter a location" /> {isLoading &&

}

{suggestions.length > 0 && (

handleSuggestionClick(suggestion)}> {suggestion.name}
{suggestion.address}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/geocode") { const { query } = await request.json(); const prompt = `You are a geocoding API. Return up to 5 possible matches. Respond with only the completions, separated by newlines.`; try { const response = await fetch("https://api.cerebras.ai/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${Deno.env.get("CEREBRAS_API_KEY")}`, }, body: JSON.stringify({ model: "llama3.1-70b", messages: [ { role: "system", content: prompt }, { role: "user", content: query }, ], temperature: 0.3, max_tokens: 300, }), }); if (!response.ok) { throw new Error("Failed to fetch from Cerebras API"); } const data = await response.json(); console.log(data.choices[0].message.content) const suggestions = data.choices[0].message.content.split("\n").filter(Boolean).slice(0, 5); return new Response(JSON.stringify(suggestions), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error calling Cerebras API:", error); return new Response(JSON.stringify({ error: "Failed to fetch suggestions" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response(` LLM-powered Geocoder Widget

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; padding: 20px; background-color: #f0f0f0; } .geocoder-container { width: 100%; max-width: 600px; } .search-box { position: relative; margin-bottom: 10px; } input { width: 100%; padding: 10px 40px 10px 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); outline: none; } input:focus { border-color: #4285f4; } .suggestions { list-style-type: none; padding: 0; margin: 0; background-color: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 2px 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .suggestions li { padding: 10px; cursor: pointer; transition: background-color 0.3s; } .suggestions li:hover { background-color: #f5f5f5; } .suggestions li strong { font-size: 14px; } .suggestions li small { color: #666; font-size: 12px; } .loader { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } .source-link { margin-top: 20px; font-size: 12px; text-align: center; } .source-link a { color: #4285f4; text-decoration: none; } .source-link a:hover { text-decoration: underline; } `; export default server;