/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0"; const Icons = { ChevronDown: "▼", ChevronUp: "▲", Settings: "⚙️", }; const WikiSearch = () => { const [apiKey, setApiKey] = useState(""); const [model, setModel] = useState("claude-3-opus-20240229"); const [query, setQuery] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [status, setStatus] = useState({ message: "", type: "" }); const [isConfigOpen, setIsConfigOpen] = useState(false); const [results, setResults] = useState({ suggestion: "", wikiExtract: "", finalAnswer: "", }); const modelNames = { "claude-3-opus-20240229": "Claude 3 Opus", "claude-3-sonnet-20240229": "Claude 3 Sonnet", "claude-3-haiku-20240307": "Claude 3 Haiku", }; useEffect(() => { const savedApiKey = localStorage.getItem("anthropic_api_key"); const savedModel = localStorage.getItem("anthropic_model"); if (savedApiKey) { setApiKey(savedApiKey); setStatus({ message: "API key loaded", type: "success" }); } if (savedModel) { setModel(savedModel); } }, []); const detectLanguage = (text) => { const hasJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/.test(text); const hasCyrillic = /[\u0400-\u04FF]/.test(text); const hasKorean = /[\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uD7B0-\uD7FF]/.test(text); if (hasJapanese) return "ja"; if (hasCyrillic) return "ru"; if (hasKorean) return "ko"; return "en"; }; const saveApiSettings = (e) => { e.preventDefault(); if (apiKey.trim()) { localStorage.setItem("anthropic_api_key", apiKey); localStorage.setItem("anthropic_model", model); setStatus({ message: "API settings saved successfully", type: "success" }); setIsConfigOpen(false); } else { setStatus({ message: "Please enter an API key", type: "error" }); } }; const callAnthropicAPI = async (prompt) => { const response = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": apiKey, "anthropic-version": "2023-06-01", }, body: JSON.stringify({ model: model, max_tokens: 1024, messages: [{ role: "user", content: prompt }], }), }); if (!response.ok) { const error = await response.text(); throw new Error(`API Error: ${error}`); } const data = await response.json(); return data.content[0].text; }; const searchWikipedia = async (searchQuery, language = "en") => { const apiUrl = `https://${language}.wikipedia.org/w/api.php`; const params = new URLSearchParams({ action: "query", format: "json", prop: "extracts", exintro: true, explaintext: true, titles: searchQuery, origin: "*", }); const response = await fetch(`${apiUrl}?${params}`); const data = await response.json(); const pages = data.query.pages; const pageId = Object.keys(pages)[0]; return pages[pageId].extract || "No extract found"; }; const handleSearch = async (e) => { e.preventDefault(); if (!apiKey) { setStatus({ message: "Please configure your API key first", type: "error" }); setIsConfigOpen(true); return; } setLoading(true); setError(""); setResults({ suggestion: "", wikiExtract: "", finalAnswer: "" }); try { const language = detectLanguage(query); const suggestion = await callAnthropicAPI( `Based on this question: "${query}", tell me exactly what Wikipedia article I should look up. Respond with just the article title, nothing else.`, ); setResults(prev => ({ ...prev, suggestion })); const wikiExtract = await searchWikipedia(suggestion, language); setResults(prev => ({ ...prev, wikiExtract })); const finalAnswer = await callAnthropicAPI( `Question: "${query}" Wikipedia excerpt: "${wikiExtract}" Based on the question and Wikipedia excerpt above, provide a concise, direct answer using only the relevant information from the excerpt. Stick to just the facts that answer the question.`, ); setResults(prev => ({ ...prev, finalAnswer })); } catch (err) { setError(err.message); setStatus({ message: err.message, type: "error" }); } finally { setLoading(false); } }; return (

{/* Header */}

Wikipedia Search with Anthropic API

{Icons.Settings} Using: {modelNames[model]} {!apiKey && ( (API key required) )}

{/* Main content */}

{/* API Configuration */}

{isConfigOpen && (

Anthropic API Key: setApiKey(e.target.value)} className="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your Anthropic API key" />

Select Model:

{status.message && (

{status.type === "error" ? "Error" : "Success"}

{status.message}

)}

{/* Search Form */}

{/* Loading State */} {loading && (

Processing your request...

)} {/* Error State */} {error && (

Error

{error}

)} {/* Results */} {(results.suggestion || results.wikiExtract || results.finalAnswer) && (

{results.suggestion && (

LLM Search Suggestion

{results.suggestion}

)} {results.wikiExtract && (

Wikipedia Extract

{results.wikiExtract}

)} {results.finalAnswer && (

Final Refined Answer

{results.finalAnswer}

)}

); }; export default (req: Request) => { return new Response( renderToString(

, ), { headers: { "Content-Type": "text/html" } }, ); };

zanyCyanHookworm