[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_58":126,"_16":-7,"_17":127,"_128":129,"_26":130,"_19":131,"_21":132,"_133":-5,"_134":-5,"_135":-5,"_136":33,"_137":138,"_139":33},"routes/_app.x.$handle.$name._index",{"_11":12,"_13":14,"_15":-7,"_16":-7,"_17":18,"_19":20,"_21":22,"_23":-7,"_24":-5,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":33,"_34":33},"handle","sharanbabu","name","legitimateTanTiger","branchName","version","project",{"_35":75,"_13":14,"_47":76,"_77":-5,"_78":46,"_79":80,"_81":-5,"_82":-5,"_83":84,"_85":39,"_86":46,"_87":-5,"_88":-5,"_89":64,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":97,"_99":100,"_101":100,"_102":100,"_103":97,"_104":97,"_105":106,"_107":108,"_109":110,"_111":33},"counts",{"_63":64,"_65":66,"_67":66,"_68":69,"_70":71},"contents",[60],"readme","upstream","pull","files",[29],"preview",{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_56":57,"_58":59},"ahead","behind","showHomeCustomizationHint",false,"showHTTPPreviewSettingsHint","id","e62a15fc-27a5-11f0-9edc-569c3dd06744","main.tsx","fileId","e3f5e694-27a5-11f0-9edc-569c3dd06744","parentId","branchId","e3f33246-27a5-11f0-9edc-569c3dd06744","branchVersion",95,"latest",true,"createdAt",["D",1725053909235],94,"fileType","http","content","/**\n * This code creates a search engine prototype with autocomplete functionality using the Cerebras LLM API.\n * It uses React for the frontend and the Cerebras API for generating autocomplete suggestions.\n * The suggestions are cached in the browser to reduce API calls.\n * It implements a two-step LLM process: first to get initial suggestions, then to filter them for sensibility and ethics.\n * If the second LLM call fails, it displays \"Failed to fetch\" instead of showing results.\n */\n\n/** @jsxImportSource https://esm.sh/react */\nimport debounce from \"https://esm.sh/lodash.debounce\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [query, setQuery] = useState(\"\");\n const [suggestions, setSuggestions] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const suggestionCache = useRef({});\n\n const fetchSuggestions = async (input) => {\n if (suggestionCache.current[input]) {\n setSuggestions(suggestionCache.current[input]);\n return;\n }\n\n setIsLoading(true);\n setError(\"\");\n try {\n const response = await fetch(\"/suggestions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ query: input }),\n });\n if (!response.ok) throw new Error(\"Failed to fetch suggestions\");\n const data = await response.json();\n if (data.error) {\n setError(data.error);\n setSuggestions([]);\n } else {\n setSuggestions(data);\n suggestionCache.current[input] = data;\n }\n } catch (error) {\n console.error(\"Error fetching suggestions:\", error);\n setError(\"Failed to fetch\");\n setSuggestions([]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const debouncedFetchSuggestions = useRef(\n debounce(fetchSuggestions, 300),\n ).current;\n\n useEffect(() => {\n if (query.length > 2) {\n debouncedFetchSuggestions(query);\n } else {\n setSuggestions([]);\n setError(\"\");\n }\n }, [query]);\n\n return (\n

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","children",[],"path",[37],{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":61,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_58":62},["D",1725053909235],[37],"pulls",0,"branches",1,"forks","envVars",{"_72":64,"_74":64},"connections",{"_72":64,"_73":64},"count","unfilledCount","emptyCount","e3f2eac0-27a5-11f0-9edc-569c3dd06744",["D",1746225389590],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","userId","cc836aa6-5e86-4b60-be8d-b45c31ab12ba","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","36537c90-0421-44d1-85d0-d21d4a7d87d5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_125":122},"org",{"_11":12,"_121":122,"_83":84,"_123":124},"branch",{"_16":44,"_13":112,"_35":42,"_113":75,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ya3lSNkNFTkdMVlVibTVyY0VQUVBQbGdxQW8ifQ","tier","free","profileImageUrl","",{"_35":75,"_13":14,"_47":147,"_77":-5,"_78":46,"_79":80,"_81":-5,"_82":-5,"_83":84,"_85":39,"_86":46,"_87":-5,"_88":-5,"_89":64,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":97,"_99":100,"_101":100,"_102":100,"_103":97,"_104":97,"_105":148,"_107":149,"_109":150,"_111":33},"tree",[144],[144],{"_63":64,"_65":66,"_67":66,"_68":142,"_70":143},[140],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"navCollapsed",{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":61,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_58":141},[37],{"_72":64,"_74":64},{"_72":64,"_73":64},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_56":145,"_58":146},[],[37],["D",1746225389590],{"_11":12,"_125":122},{"_11":12,"_121":122,"_83":84,"_123":124},{"_16":44,"_13":112,"_35":42,"_113":75,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_105":-5,"_184":185,"_186":187,"_188":33,"_189":33,"_190":33,"_191":-5,"_192":-7,"_193":-7,"_194":64,"_195":33,"_196":33,"_197":-5,"_198":33,"_199":33},"ENV",{"_155":156,"_157":158,"_159":160,"_161":112,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","f1316bb1ce3ad41ce227a17bcad7725ad044419f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","API_URL","https://api.val.town","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier"]