Cerebras Searcher

\n setQuery(e.target.value)}\n placeholder=\"Ask anything...\"\n className=\"search-input\"\n />\n \n \n

\n {DEFAULT_SEARCHES.map((searchQuery, index) => (\n handleSearch(searchQuery)}\n className=\"suggestion-button\"\n disabled={searchLoading || summaryLoading}\n >\n {searchQuery}\n \n ))}\n

\n\n {searchLoading &&

Searching for relevant information...

}\n {summaryLoading &&

Analyzing search results...

}\n\n {response && (\n

{response}

\n {sources.length > 0 && (\n

Sources:

\n setShowRawResults(!showRawResults)}\n className=\"toggle-button\"\n >\n {showRawResults ? \"Hide Raw Results\" : \"Show Raw Results\"}\n \n {showRawResults && searchResults && (\n

Raw Search Results:

{JSON.stringify(searchResults, null, 2)}

\n )}\n

\n
\n \n {source.snippet}\n \n
\n {source.date &&
{source.date}
}\n

\n )}\n

\n )}\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n if (req.method === \"POST\") {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/search\") {\n const { query } = await req.json();\n\n // Search using SerpApi\n try {\n const searchResponse = await fetch(\n `https://serpapi.com/search.json?q=${encodeURIComponent(query)}&api_key=${Deno.env.get(\"SERP_API_KEY\")}`,\n );\n const searchData = await searchResponse.json();\n const sources = searchData.organic_results.map(result => ({\n link: result.link,\n snippet: result.snippet,\n date: result.date || result.published_date || null,\n }));\n\n return new Response(\n JSON.stringify({ sources }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(error);\n return new Response(\n JSON.stringify({\n sources: [{\n link: \"\",\n snippet: \"Sorry, the SerpAPI is not working. Maybe you need to set your SerpAPI or buy more credits\",\n date: new Date(),\n }],\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n if (url.pathname === \"/api/summarize\") {\n const { query, searchData } = await req.json();\n const sources = searchData.sources;\n\n // Extract relevant content from search results\n const context = sources\n .map((result) =>\n `Link: ${result.link}\\nDescription: ${result.snippet}${result.date ? `\\nDate: ${result.date}` : \"\"}`\n )\n .join(\"\\n\\n\");\n\n // Use Cerebras chat completion\n const { Cerebras } = await import(\"https://esm.sh/@cerebras/cerebras_cloud_sdk\");\n const client = new Cerebras();\n\n const completion = await client.chat.completions.create({\n messages: [{\n role: \"user\",\n content:\n `Based on the following search results, please provide a comprehensive answer to the question: \"${query}\"\\n\\nSearch Results:\\n${context}`,\n }],\n model: \"llama3.1-70b\",\n });\n\n return new Response(\n JSON.stringify({ answer: completion?.choices[0]?.message?.content }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n Cerebras Searcher\n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n .container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n font-family: system-ui, -apple-system, sans-serif;\n }\n\n .search-form {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .default-searches {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 1.5rem;\n }\n\n .suggestion-button {\n padding: 0.5rem 1rem;\n background: #f0f0f0;\n color: #333;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 0.9rem;\n }\n\n .suggestion-button:hover {\n background: #e0e0e0;\n transform: translateY(-1px);\n }\n\n .suggestion-button:disabled {\n background: #ccc;\n cursor: not-allowed;\n transform: none;\n }\n\n .search-input {\n flex-grow: 1;\n padding: 0.75rem;\n font-size: 1rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n transition: border-color 0.2s ease;\n }\n\n .search-input:focus {\n outline: none;\n border-color: #0066ff;\n }\n\n button {\n padding: 0.75rem 1.5rem;\n background: #0066ff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n button:hover:not(:disabled) {\n background: #0052cc;\n transform: translateY(-1px);\n }\n\n button:disabled {\n background: #ccc;\n cursor: not-allowed;\n transform: none;\n }\n\n .toggle-button {\n margin: 1rem 0;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n background: #f0f0f0;\n color: #333;\n border: 1px solid #ddd;\n }\n\n .loading {\n margin: 1rem 0;\n color: #666;\n }\n\n .raw-results {\n margin-top: 1rem;\n padding: 1rem;\n background: #f5f5f5;\n border-radius: 4px;\n overflow-x: auto;\n }\n\n .raw-results pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .response {\n margin-top: 2rem;\n padding: 1.5rem;\n background: #f8f9fa;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n }\n\n .answer {\n white-space: pre-wrap;\n margin-bottom: 1rem;\n line-height: 1.5;\n }\n\n .sources {\n border-top: 1px solid #ddd;\n padding-top: 1rem;\n }\n\n .sources ul {\n padding-left: 1.5rem;\n }\n\n .sources li {\n margin-bottom: 1rem;\n }\n\n .sources a {\n color: #0066ff;\n text-decoration: none;\n }\n\n .sources a:hover {\n text-decoration: underline;\n }\n\n .source-date {\n font-size: 0.875rem;\n color: #666;\n margin-top: 0.25rem;\n }\n\n footer {\n margin-top: 2rem;\n text-align: center;\n font-size: 0.875rem;\n }\n\n footer a {\n color: #0066ff;\n text-decoration: none;\n }\n\n footer a:hover {\n text-decoration: underline;\n }\n`;","deleted","subdomain",[102],"permalink","https://www.val.town/x/stevekrouse/cerebras_searcher/code/main.tsx","extension","routes/embed","actionData","errors"]