Knowledge Explorer

\n {!content ? (\n <>\n

\n setTopic(e.target.value)}\n placeholder=\"Enter a topic\"\n />\n \n \n

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

\n \n ) : (\n

{title}

{content}

\n \n \n \n

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

\n )}\n {loading &&

}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate\") {\n const { topic, prompt, direction } = await request.json();\n \n const Cerebras = (await import(\"https://esm.sh/@cerebras/cerebras_cloud_sdk\")).default;\n const client = new Cerebras({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n });\n\n try {\n const completion = await client.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You are a knowledgeable assistant providing concise, engaging information about various topics. Your responses should be informative and spark curiosity.\" },\n { role: \"user\", content: prompt }\n ],\n model: \"llama3.1-8b\",\n max_tokens: 150,\n });\n\n return new Response(JSON.stringify({ content: completion.choices[0].message.content }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n return new Response(JSON.stringify({ error: \"Failed to generate content\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(`\n \n \n Knowledge Explorer\n \n \n \n \n

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