AI Live Dialogue Stream - Zipper Edition

\n Topic\n \n

\n Persona A (Left Side)\n \n

\n Persona B (Right Side)\n \n

\n \n

Persona A

STREAM INTAKE

Persona B

\n\n\n\n`;\n}\n\n// Backend function remains the same as the previous turn.\n// It correctly streams data which the new frontend can visualize.\nexport default async function(req: Request) {\n const url = new URL(req.url);\n\n if (req.method === \"POST\") {\n try {\n const openai = new OpenAI();\n const { topic, personaA, personaB } = await req.json();\n\n if (!topic || !personaA || !personaB) {\n return new Response(JSON.stringify({ error: \"Missing topic or personas\" }), { status: 400 });\n }\n\n const user_prompt = `Topic: ${topic}\\n[PERSONA_A]: ${personaA}\\n[PERSONA_B]: ${personaB}`;\n const encoder = new TextEncoder();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const completionStream = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: STREAMING_DEBATE_PROMPT },\n { role: \"user\", content: user_prompt },\n ],\n stream: true,\n });\n\n for await (const chunk of completionStream) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(encoder.encode(content));\n }\n }\n } catch (error) {\n console.error(\"Error during OpenAI stream:\", error);\n const errorMessage = `[STREAM_ERROR]: ${error.message}`;\n controller.enqueue(encoder.encode(errorMessage));\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n } catch (error) {\n console.error(\"Stream setup Error:\", error);\n return new Response(JSON.stringify({ error: error.message || \"An unknown error occurred.\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve the main HTML page for GET requests\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/join/interpolated/code/main.tsx","extension","actionData","errors"]