From f28f566473d1087afa4fc1b8a51c0a811060b125 Mon Sep 17 00:00:00 2001 From: codetorso Date: Wed, 19 Jun 2024 02:12:47 -0600 Subject: [PATCH] Improve code, failed attempt at Streaming text --- apps/cf-ai-backend/src/index.ts | 9 +-- apps/web/app/(dash)/chat/chatWindow.tsx | 3 - .../app/(editor)/components/aigenerate.tsx | 68 ++++++++++++++----- apps/web/app/api/editorai/route.ts | 13 ++-- 4 files changed, 64 insertions(+), 29 deletions(-) diff --git a/apps/cf-ai-backend/src/index.ts b/apps/cf-ai-backend/src/index.ts index effdf517..26a9fa48 100644 --- a/apps/cf-ai-backend/src/index.ts +++ b/apps/cf-ai-backend/src/index.ts @@ -338,12 +338,13 @@ app.get('/api/editorai', zValidator( }), ), async (c)=> { const { context, request } = c.req.valid("query"); - const { model } = await initQuery(c); - const {text} = await generateText({ model, prompt: `${request}-${context}`, maxTokens: 224 }); - - return c.json({completion: text}); + const response = await streamText({ model, prompt: `${request}-${context}`, maxTokens: 224 }); + + const r = response.toTextStreamResponse(); + + return r; }) export default app; diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx index 17c415e9..6189b874 100644 --- a/apps/web/app/(dash)/chat/chatWindow.tsx +++ b/apps/web/app/(dash)/chat/chatWindow.tsx @@ -121,7 +121,6 @@ function ChatWindow({ const reader = resp.body?.getReader(); let done = false; - let result = ""; while (!done && reader) { const { value, done: d } = await reader.read(); done = d; @@ -134,8 +133,6 @@ function ChatWindow({ return newChatHistory; }); } - - console.log(result); }; useEffect(() => { diff --git a/apps/web/app/(editor)/components/aigenerate.tsx b/apps/web/app/(editor)/components/aigenerate.tsx index f27fd50f..c5f6f2c1 100644 --- a/apps/web/app/(editor)/components/aigenerate.tsx +++ b/apps/web/app/(editor)/components/aigenerate.tsx @@ -97,7 +97,7 @@ function ToolBar({ onClick={() => AigenerateContent({ idx, editor, setGeneratingfn }) } - className="absolute select-none inset-0 block h-full w-full rounded-xl bg-background-light" + className="absolute select-none inset-0 block h-full w-full rounded-xl bg-[#33393D]" layoutId="hoverBackground" initial={{ opacity: 0 }} animate={{ @@ -140,30 +140,66 @@ async function AigenerateContent({ "Translate to hindi written in english, do not write anything else", "change tone, improve the way be more formal", "ask, answer the question", - "continue this, maximum 30 characters, do not repeat just continue don't use ... to denote start", + "continue this, minimum 80 characters, do not repeat just continue don't use ... to denote start", ] - const res = await fetch("/api/editorai", { + const resp = await fetch("/api/editorai", { method: "POST", body: JSON.stringify({ context: text, request: request[idx], }), - }) - 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(); + 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 = 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("Stream complete"); + + + // const reader = resp.body?.getReader(); + // let done = false; + // let position = from; + // while (!done && reader) { + // const { value, done: d } = await reader.read(); + // done = d; + + // 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); } diff --git a/apps/web/app/api/editorai/route.ts b/apps/web/app/api/editorai/route.ts index 6ee0aed2..43d8eb64 100644 --- a/apps/web/app/api/editorai/route.ts +++ b/apps/web/app/api/editorai/route.ts @@ -4,16 +4,17 @@ import { ensureAuth } from "../ensureAuth"; export const runtime = "edge"; export async function POST(request: NextRequest) { - const d = await ensureAuth(request); - if (!d) { - return new Response("Unauthorized", { status: 401 }); - } + // const d = await ensureAuth(request); + // if (!d) { + // return new Response("Unauthorized", { status: 401 }); + // } 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}`); - const result = await response.json(); - return new Response(JSON.stringify(result)); + return new Response(response.body, { status: 200 }); + // const result = await response.json(); + // return new Response(JSON.stringify(result)); } catch (error) { return new Response(`Error, ${error}`) }