HTKhan AI Search

\n );\n}\n\n// Main App Component\nfunction App() {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState(null);\n const [loading, setLoading] = useState(false);\n const [currentDateTime, setCurrentDateTime] = useState(new Date());\n\n useEffect(() => {\n const timer = setInterval(() => {\n setCurrentDateTime(new Date());\n }, 1000);\n return () => clearInterval(timer);\n }, []);\n\n const handleSearch = async (e) => {\n e.preventDefault();\n if (!query.trim()) return;\n setLoading(true);\n setResults(null);\n try {\n const response = await fetch(\"/search\", {\n method: \"POST\",\n body: JSON.stringify({ query }),\n });\n const data = await response.json();\n setResults(data);\n } catch (error) {\n console.error(\"Search failed\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDate = (date) => {\n return date.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n };\n\n return (\n

\n HTKhan AI\n

\n {formatDate(currentDateTime)}\n

\n\n

\n setQuery(e.target.value)}\n placeholder=\"Ask anything, get instant insights...\"\n style={styles.searchInput}\n />\n \n {loading\n ? (\n

\n )\n : (\n \n \n \n \n )}\n \n \n\n {loading && }\n\n {results && (\n

\n {/* AI Insights Section */}\n

🤖 AI Summary

\n {results.summary}\n

\n\n {/* Web Results Section */}\n {results.webResults && (\n

🌐 Web Results

\n {results.webResults.map((result, index) => (\n

\n \n

\n {result.title === \"Google Search\"\n ? \"🔍\"\n : result.title === \"YouTube\"\n ? \"▶️\"\n : result.title === \"Wikipedia\"\n ? \"📚\"\n : \"🌐\"}\n

{result.title}

{result.description}

\n \n

\n ))}\n

\n )}\n\n {/* Images Section */}\n {results.images && results.images.length > 0 && (\n

📸 Images

\n {results.images.map((image, index) => (\n

\n \n \n \n

\n ))}\n

\n )}\n\n {/* Videos Section */}\n {results.videos && results.videos.length > 0 && (\n

🎥 Videos

\n {results.videos.map((video, index) => (\n

\n \n \n

{video.title}

\n \n

\n ))}\n

\n )}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side handler\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const body = await request.json();\n const { query } = body;\n\n try {\n const summaryCompletion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are an AI assistant created by Huzaifa Taif Khan from Team HTKhan that provides comprehensive yet concise summaries.Use Easiest way to explain any topic and Generate a summary that is informative and detailed,but dont give very large detailed answer until user tell you always give answer small and normal size and Use Headings and points and Focus on key points, main ideas, and essential information. and use *Heading* and points by using this symbol (•) and Avoid unnecessary elaboration while ensuring the summary captures the core essence of the topic.\",\n },\n {\n role: \"user\",\n content: `Provide a comprehensive summary of: ${query}. Ensure the summary is informative, clear.`,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 600,\n });\n\n const summary = summaryCompletion.choices[0].message.content;\n\n return new Response(\n JSON.stringify({\n summary,\n webResults: [\n {\n title: \"Google Search\",\n url: `https://www.google.com/search?q=${encodeURIComponent(query)}`,\n description: \"Comprehensive web search results\",\n },\n {\n title: \"YouTube\",\n url: `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`,\n description: \"Video content related to your query\",\n },\n {\n title: \"Wikipedia\",\n url: `https://en.wikipedia.org/wiki/Special:Search?search=${encodeURIComponent(query)}`,\n description: \"Encyclopedia and reference information\",\n },\n ],\n images: [\n {\n title: \"Image 1\",\n thumbnailUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}-1`,\n sourceUrl: `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(query)}`,\n },\n {\n title: \"Image 2\",\n thumbnailUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}-2`,\n sourceUrl: `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(query)}`,\n },\n ],\n videos: [\n {\n title: \"YouTube Video\",\n url: `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`,\n thumbnailUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}-video1`,\n },\n {\n title: \"TikTok Video\",\n url: `https://www.tiktok.com/search?q=${encodeURIComponent(query)}`,\n thumbnailUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}-video2`,\n },\n ],\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Search failed\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // HTML response for initial page load\n return new Response(\n `\n \n \n HTKhan AI Search\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/Htkhan6/HTKhanAISearch/code/main.tsx","extension","actionData","errors"]