1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* 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 resp
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 (
<div className="container">
<h1>Knowledge Explorer</h1>
{!content ? (
<>
<form onSubmit={handleSubmit}>
<input
type="text"
value={topic}
onChange={(e) => setTopic(e.target.value)}
placeholder="Enter a topic"
/>
<button type="submit">Explore</button>
</form>
<div className="suggestions">
{SUGGESTIONS.map((suggestion, index) => (
<button key={index} onClick={() => setTopic(suggestion)}>
{suggestion}
</button>
))}
</div>