DBpedia Entity Search

// This tool uses the DBpedia Lookup API and SPARQL endpoint to find entities and their details, including images. // It provides a web interface and a JSON API endpoint for entity search, including hero images. // Helper function to strip HTML tags and decode HTML entities function sanitizeHtml(html: string): string { const decoded = html.replace(/"/g, '"') .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/'/g, "'"); return decoded.replace(/<[^>]*>/g, ''); } import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); const urlQuery = urlParams.get("query"); if (urlQuery) { setQuery(urlQuery); fetchResults(urlQuery); } }, []); const fetchResults = async (searchQuery) => { const response = await fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`); const data = await response.json(); setResults(data); }; const handleSubmit = (e) => { e.preventDefault(); if (query) { window.history.pushState({}, "", `?query=${encodeURIComponent(query)}`); fetchResults(query); } }; return React.createElement( "div", { className: "container mx-auto px-4 py-8" }, React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"), React.createElement( "form", { onSubmit: handleSubmit, className: "flex mb-8" }, React.createElement("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Enter your search query", className: "flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" }), React.createElement( "button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 transition duration-300" }, "Search" ) ), results.length > 0 && React.createElement( "div", { className: "bg-white shadow-md rounded-md p-6" }, React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Results:"), React.createElement( "div", { className: "grid gap-6" }, results.map((result, index) => React.createElement( "div", { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0 flex" }, result.image && React.createElement( "div", { className: "mr-4 flex-shrink-0" }, React.createElement("img", { src: result.image, alt: result.label, className: "w-32 h-32 object-cover rounded" }) ), React.createElement( "div", { className: "flex-grow" }, React.createElement( "a", { href: result.uri, target: "_blank", rel: "noopener noreferrer", className: "text-xl font-medium text-blue-600 hover:underline" }, result.label ), React.createElement("p", { className: "mt-2 text-gray-600" }, result.description), React.createElement("pre", { className: "mt-2 bg-gray-100 p-2 rounded text-sm overflow-x-auto" }, JSON.stringify(result, null, 2)) ) ) ) ) ), React.createElement( "footer", { className: "mt-8 text-center text-sm text-gray-600" }, React.createElement( "a", { href: import.meta.url.replace("esm.town", "val.town"), target: "_blank", rel: "noopener noreferrer", className: "hover:underline" }, "View Source" ) ), React.createElement( "div", { className: "mt-8 bg-gray-100 p-4 rounded-md" }, React.createElement("h3", { className: "text-lg font-semibold mb-2" }, "cURL Example:"), React.createElement( "pre", { className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" }, `curl 'https://ejfox-dbpedia.web.val.run/api/search${query ? `?query=${encodeURIComponent(query)}` : ''}'` ) ) ); } function client() { createRoot(document.getElementById("root")).render(React.createElement(App)); } if (typeof document !== "undefined") { client(); } async function fetchDBpediaResults(query: string) { const lookupResponse = await fetch( `https://lookup.dbpedia.org/api/search?query=${encodeURIComponent(query)}&format=json&maxResults=5`, ); const lookupData = await lookupResponse.json(); const results = await Promise.all(lookupData.docs.map(async (doc) => { const uri = doc.resource[0]; const sparqlQuery = ` SELECT ?abstract ?image WHERE { <${uri}> dbo:abstract ?abstract . OPTIONAL { <${uri}> dbo:thumbnail ?image } FILTER (lang(?abstract) = "en") } LIMIT 1 `; const sparqlResponse = await fetch( `https://dbpedia.org/sparql?query=${encodeURIComponent(sparqlQuery)}&format=json`, ); const sparqlData = await sparqlResponse.json(); const bindings = sparqlData.results.bindings[0]; return { uri: uri, label: sanitizeHtml(doc.label[0]), description: bindings?.abstract?.value ? sanitizeHtml(bindings.abstract.value) : "No description available", image: bindings?.image?.value || null, }; })); return results; } async function server(request: Request): Promise { const url = new URL(request.url); const path = url.pathname; if (path === "/api/search") { const query = url.searchParams.get("query"); if (!query) { return new Response("Query parameter is required", { status: 400 }); } const results = await fetchDBpediaResults(query); return new Response(JSON.stringify(results), { headers: { "Content-Type": "application/json" }, }); } const html = ` DBpedia Entity Search

`; return new Response(html, { headers: { "Content-Type": "text/html" } }); } export default server;