Spaces:
Paused
Paused
File size: 3,865 Bytes
834cad6 9f076f8 b0c21fa 054d282 9f076f8 328552e 9285db9 054d282 9f076f8 f616dbf e772681 f616dbf e772681 ecb5f4b 7a6cf6a 3514880 8e0db75 a4ebd61 3514880 a4ebd61 3514880 a4ebd61 3514880 8e0db75 ecb5f4b eef247f f616dbf ecb5f4b f616dbf 3514880 7a6cf6a eef247f ac695ee 054d282 916e00a a9e1c12 916e00a 054d282 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
"use client"
import { useEffect, useState } from "react";
import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'
export default function WebSearchPage({ searchParams }) {
const [aiResponse, setAiResponse] = useState("");
const [searchTerm, setSearchTerm] = useState()
useEffect(() => {
setSearchTerm(searchParams.searchTerm)
}, [searchParams])
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
async function fetchData() {
const response = await fetch('/api/llm', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question: searchTerm || "Seattle activities this weekend" }),
signal,
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
const reader = response.body.getReader();
const decoder = new TextDecoder();
let text = '';
while (true) {
const { value, done } = await reader.read();
if (value) {
text += decoder.decode(value, {stream: true});
let boundary = text.indexOf('\n');
while (boundary !== -1) {
const jsonStr = text.slice(0, boundary);
text = text.slice(boundary + 1);
try {
const json = JSON.parse(jsonStr);
console.log(json);
setAiResponse(prevResponse => [...prevResponse, json]);
} catch (error) {
console.error("Failed to parse JSON", error);
}
boundary = text.indexOf('\n');
}
}
if (done) {
console.log("Stream complete");
break;
}
}
}
}
fetchData().catch(error => {
console.error('Fetch failed: ', error);
});
return () => controller.abort();
}, [searchParams, searchTerm]);
console.log(aiResponse);
return (
<div className="flex flex-row">
<MemoizedReactMarkdown
className="prose dark:prose-invert flex-1"
components={{
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return <span className="animate-pulse cursor-default mt-1">▍</span>
}
children[0] = (children[0]).replace("`▍`", "▍")
}
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
table({ children }) {
return (
<table className="border-collapse border border-black px-3 py-1 dark:border-white">
{children}
</table>
);
},
th({ children }) {
return (
<th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
{children}
</th>
);
},
td({ children }) {
return (
<td className="break-words border border-black px-3 py-1 dark:border-white">
{children}
</td>
);
},
}}
>
{JSON.stringify(aiResponse)}
</MemoizedReactMarkdown>
</div>
);
}
|