/** * This val creates a modern, stylish knowledge explorer using the Cerebras LLM API. * It allows users to enter a topic or select from suggestions, displays information in a centered card, * and enables exploration of related topics or deeper dives using arrow keys or buttons. */ /** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const SUGGESTIONS = ["Quantum Computing", "Renaissance Art", "Climate Change", "Artificial Intelligence", "Space Exploration"]; function App() { const [topic, setTopic] = useState(""); const [content, setContent] = useState(""); const [title, setTitle] = useState(""); const [loading, setLoading] = useState(false); const [activeButton, setActiveButton] = useState(null); const fetchContent = useCallback(async (prompt, direction) => { setLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic, prompt, direction }), }); const data = await response.json(); const [newTitle, newContent] = data.content.split('\n\n'); setTitle(newTitle.replace('Title: ', '').replace(/[*"]/g, '').trim()); setContent(newContent); } catch (error) { console.error("Error fetching content:", error); setContent("An error occurred while fetching content."); } setLoading(false); }, [topic]); const handleSubmit = (e) => { e.preventDefault(); if (topic) { fetchContent(`Provide a concise overview of ${topic} in about 3-4 sentences. Focus on key points and interesting facts. Format your response as follows: Title: [A short, catchy title for the topic] [Your 3-4 sentence overview here]`, "initial"); } }; const handleKeyDown = useCallback((e) => { if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); // Prevent default scroll behavior if (e.key === "ArrowRight") { setActiveButton("right"); setTimeout(() => setActiveButton(null), 300); fetchContent(`Based on the topic "${title}" and the following information: "${content}", explore a semantically related topic. Provide a brief overview of this new topic, highlighting its connection to ${title}. Format your response as follows: Title: [A short, catchy title for the new related topic] [Your brief overview here]`, "horizontal"); } else if (e.key === "ArrowDown") { setActiveButton("down"); setTimeout(() => setActiveButton(null), 300); fetchContent(`Given the overview of ${title}: "${content}", choose a directly related subtopic or aspect of ${title}. Provide a detailed explanation of this subtopic, focusing on its significance and relationship to the main topic. Format your response as follows: Title: [A short, catchy title for the subtopic] [Your detailed explanation here]`, "vertical"); } } }, [fetchContent, title, content]); useEffect(() => { window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [handleKeyDown]); const resetExploration = () => { setTopic(""); setContent(""); setTitle(""); }; return (

Knowledge Explorer

{!content ? ( <>

{SUGGESTIONS.map((suggestion, index) => ( ))}

) : (

{title}

{content}

Tip: You can also use ➡️ and ⬇️ arrow keys!

)} {loading &&

}

); } 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 === "/generate") { const { topic, prompt, direction } = await request.json(); const Cerebras = (await import("https://esm.sh/@cerebras/cerebras_cloud_sdk")).default; const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY"), }); try { const completion = await client.chat.completions.create({ messages: [ { role: "system", content: "You are a knowledgeable assistant providing concise, engaging information about various topics. Your responses should be informative and spark curiosity." }, { role: "user", content: prompt } ], model: "llama3.1-8b", max_tokens: 150, }); return new Response(JSON.stringify({ content: completion.choices[0].message.content }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error calling Cerebras API:", error); return new Response(JSON.stringify({ error: "Failed to generate content" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response(` Knowledge Explorer

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` :root { --primary-color: #3498db; --secondary-color: #2ecc71; --background-color: #f5f7fa; --text-color: #2c3e50; --card-background: #ffffff; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 2rem; text-align: center; } form { display: flex; width: 100%; max-width: 600px; margin-bottom: 2rem; } input[type="text"] { flex-grow: 1; padding: 0.75rem 1rem; border: 2px solid var(--primary-color); border-radius: 25px 0 0 25px; font-size: 1rem; outline: none; } button { padding: 0.75rem 1.5rem; background-color: var(--primary-color); color: white; border: none; cursor: pointer; font-size: 1rem; font-weight: bold; transition: background-color 0.3s ease; } form button { border-radius: 0 25px 25px 0; } button:hover { background-color: #2980b9; } .suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .suggestions button { background-color: var(--secondary-color); border-radius: 25px; } .suggestions button:hover { background-color: #27ae60; } .exploration-container { width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: center; } .card { background-color: var(--card-background); border-radius: 10px; padding: 2rem; margin-bottom: 2rem; width: 100%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .card h2 { color: var(--primary-color); margin-top: 0; } .navigation { display: flex; justify-content: space-between; width: 100%; } .right-button, .down-button, .home-button { padding: 0.75rem 1.5rem; border-radius: 25px; } .right-button { background-color: var(--secondary-color); } .right-button:hover { background-color: #27ae60; } .home-button { background-color: #e74c3c; } .home-button:hover { background-color: #c0392b; } .hint { margin-top: 1.5rem; font-style: italic; color: #7f8c8d; text-align: center; } .loading { margin-top: 1.5rem; font-style: italic; color: var(--primary-color); text-align: center; } footer { margin-top: 2rem; text-align: center; } footer a { color: var(--primary-color); text-decoration: none; } footer a:hover { text-decoration: underline; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .right-button.active, .down-button.active { animation: pulse 0.3s ease-in-out; } @media (max-width: 768px) { .navigation { flex-direction: column; align-items: center; } .right-button, .down-button, .home-button { width: 100%; margin-top: 1rem; } } `; export default server;

knowledgeExplorer