Search Engine Prototype

\n setQuery(e.target.value)}\n placeholder=\"Start typing to search...\"\n />\n {isLoading &&

}\n

\n {error &&

{error}

}\n {!error && suggestions.length > 0 && (\n

setQuery(suggestion)}>\n {suggestion}\n

\n )}\n

\n View Source\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 === \"/suggestions\") {\n const { query } = await request.json();\n const apiKey = Deno.env.get(\"CEREBRAS_API_KEY\");\n const initialSuggestions: string[] = [];\n\n if (!apiKey) {\n return new Response(JSON.stringify({ error: \"API key not found\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const response = await fetch(\"https://api.cerebras.ai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n model: \"llama3.1-70b\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a search engine autocomplete assistant. Provide 5 search completions based on the user's input. Account for spelling mistakes. Respond with only the completions, separated by newlines.\",\n },\n { role: \"user\", content: query },\n ],\n temperature: 0.3,\n max_tokens: 500,\n }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch from Cerebras API\");\n }\n\n const data = await response.json();\n initialSuggestions.push(...data.choices[0].message.content.split(\"\\n\").filter(Boolean));\n\n console.log(\"Initial suggestions:\", initialSuggestions);\n\n // Second LLM call to filter suggestions\n const filterResponse = await fetch(\"https://api.cerebras.ai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n model: \"llama3.1-70b\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a filter for search suggestions. Review the following suggestions and return only those that are sensible and appropriate. Respond with only the approved suggestions (you can modify them), separated by newlines, without any introductory text or numbering.\",\n },\n { role: \"user\", content: initialSuggestions.join(\"\\n\") },\n ],\n temperature: 0.1,\n max_tokens: 500,\n }),\n });\n\n if (!filterResponse.ok) {\n throw new Error(\"Failed to filter suggestions\");\n }\n\n const filterData = await filterResponse.json();\n const filteredSuggestions = filterData.choices[0].message.content\n .split(\"\\n\")\n .filter(Boolean)\n .map(suggestion => suggestion.trim());\n\n console.log(\"Filtered suggestions:\", filteredSuggestions);\n\n // Limit to 5 suggestions\n const suggestions = filteredSuggestions.slice(0, 5);\n\n console.log(\"Query:\", query);\n console.log(\"Final suggestions:\", suggestions);\n\n return new Response(JSON.stringify(suggestions), {\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 fetch\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Search Engine Prototype\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n.search-container {\n width: 100%;\n max-width: 600px;\n text-align: center;\n}\n\nh1 {\n color: #333;\n}\n\n.search-box {\n position: relative;\n margin-bottom: 20px;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n border: 2px solid #ddd;\n border-radius: 24px;\n outline: none;\n}\n\ninput:focus {\n border-color: #4285f4;\n}\n\n.suggestions {\n list-style-type: none;\n padding: 0;\n margin: 0;\n text-align: left;\n border: 1px solid #ddd;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.suggestions li {\n padding: 10px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.suggestions li:hover {\n background-color: #f5f5f5;\n}\n\n.loader {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n border: 2px solid #f3f3f3;\n border-top: 2px solid #3498db;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: translateY(-50%) rotate(0deg); }\n 100% { transform: translateY(-50%) rotate(360deg); }\n}\n\n.error {\n color: #d32f2f;\n font-weight: bold;\n}\n\n.source-link {\n margin-top: 20px;\n font-size: 12px;\n}\n\n.source-link a {\n color: #4285f4;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/sharanbabu/legitimateTanTiger/code/main.tsx","extension","actionData","errors"]