Another Failed Attempt at streaming

This commit is contained in:
codetorso 2024-06-19 08:37:30 -06:00
parent f28f566473
commit a7cca293a6
3 changed files with 48 additions and 39 deletions

View file

@ -330,6 +330,7 @@ app.delete(
},
);
// ERROR #1 - this is the api that the editor uses, it is just a scrape off of /api/chat so you may check that out
app.get('/api/editorai', zValidator(
"query",
z.object({
@ -342,9 +343,7 @@ app.get('/api/editorai', zValidator(
const response = await streamText({ model, prompt: `${request}-${context}`, maxTokens: 224 });
const r = response.toTextStreamResponse();
return r;
return response.toTextStreamResponse();
})
export default app;

View file

@ -8,6 +8,8 @@ import Autocompletesvg from "./ui/autocompletesvg";
import { motion, AnimatePresence } from "framer-motion";
import type { Editor } from "@tiptap/core";
import { useEditor } from "novel";
import { NodeSelection } from 'prosemirror-state'
function Aigenerate() {
const [visible, setVisible] = useState(false);
@ -143,6 +145,7 @@ async function AigenerateContent({
"continue this, minimum 80 characters, do not repeat just continue don't use ... to denote start",
]
// ERROR #3 - This is where we call the ai generate api
const resp = await fetch("/api/editorai", {
method: "POST",
body: JSON.stringify({
@ -151,30 +154,41 @@ async function AigenerateContent({
}),
});
if (!resp.body) {
console.error("No response body");
return;
}
const reader = resp.body.getReader();
// const decoder = new TextDecoder();
// this is the exact replica of your chatwindow code, I have
// 2 more versions of these code commented below, but they also dont work
const reader = resp.body?.getReader();
let done = false;
let position = to;
while (!done && reader) {
const { value, done: d } = await reader.read();
done = d;
while (!done) {
const { value, done: readerDone } = await reader.read();
done = readerDone;
if (value) {
const chunk = new TextDecoder().decode(value)
// decoder.decode(value, { stream: true });
console.log(chunk);
// editor.chain().focus().insertContentAt(position + 1, chunk).run();
position += chunk.length
}
console.log(new TextDecoder().decode(value))
}
console.log("Stream complete");
// 2nd Method
// if (!resp.body) {
// console.error("No response body");
// return;
// }
// const reader = resp.body.getReader();
// const decoder = new TextDecoder();
// let done = false;
// let position = to;
// while (!done) {
// const { value, done: readerDone } = await reader.read();
// done = readerDone;
// if (value) {
// const chunk = decoder.decode(value, { stream: true });
// console.log(chunk);
// editor.chain().focus().insertContentAt(position + 1, chunk).run();
// position += chunk.length;
// }
// }
// console.log("Stream complete");
// 3rd method
// const reader = resp.body?.getReader();
// let done = false;
// let position = from;
@ -184,22 +198,9 @@ async function AigenerateContent({
// const cont = new TextDecoder().decode(value)
// console.log(cont);
//
// }
// const {completion}: {completion: string} = await res.json();
// console.log(completion)
// if (idx === 0 || idx === 1){
// const selectionLength = completion.length + from
// editor.chain().focus()
// .insertContentAt({from, to}, completion).setTextSelection({from, to: selectionLength})
// .run();
// } else {
// const selectionLength = completion.length + to + 1
// editor.chain().focus()
// .insertContentAt(to+1, completion).setTextSelection({from, to: selectionLength})
// .run();
// }
setGeneratingfn(false);
}

View file

@ -3,6 +3,8 @@ import { ensureAuth } from "../ensureAuth";
export const runtime = "edge";
// ERROR #2 - This the the next function that calls the backend, I sometimes think this is redundency, but whatever
// I have commented the auth code, It should not work in development, but it still does sometimes
export async function POST(request: NextRequest) {
// const d = await ensureAuth(request);
// if (!d) {
@ -11,10 +13,17 @@ export async function POST(request: NextRequest) {
const res : {context: string, request: string} = await request.json()
try {
const response = await fetch(`${process.env.BACKEND_BASE_URL}/api/editorai?context=${res.context}&request=${res.request}`);
return new Response(response.body, { status: 200 });
// const result = await response.json();
// return new Response(JSON.stringify(result));
const resp = await fetch(`${process.env.BACKEND_BASE_URL}/api/editorai?context=${res.context}&request=${res.request}`);
// this just checks if there are erros I am keeping it commented for you to better understand the important pieces
// if (resp.status !== 200 || !resp.ok) {
// const errorData = await resp.text();
// console.log(errorData);
// return new Response(
// JSON.stringify({ message: "Error in CF function", error: errorData }),
// { status: resp.status },
// );
// }
return new Response(resp.body, { status: 200 });
} catch (error) {
return new Response(`Error, ${error}`)
}