import { Hono } from "npm:hono"; import { cors } from 'npm:hono/cors'; import { stream, streamSSE } from "https://deno.land/x/hono@v4.3.11/helper.ts"; import { OpenAI } from "npm:openai"; import { ai } from "https://esm.town/v/yawnxyz/ai"; const app = new Hono(); const openai = new OpenAI(); app.use('*', cors({ origin: '*', allowMethods: ['GET'], allowHeaders: ['Content-Type'], })); const SOURCE_URL = ""; // leave blank for deno deploy / native // in this example we use a custom function instead of htmx's custom sse extension, since it never closes! function getResponse({prompt}) { const outputDiv = document.getElementById('output'); prompt = prompt ||document.getElementById('prompt').value; console.log('getting response...', prompt) const url = "/chat?p=" + encodeURIComponent(prompt); outputDiv.textContent = 'Loading...'; const eventSource = new EventSource(url); let isFirstChunk = true; eventSource.onmessage = (event) => { if (event.data === "[DONE]") { eventSource.close(); } else { const data = JSON.parse(event.data); if (data.error) { outputDiv.textContent = "Error: " + data.error; } else { if (isFirstChunk) { outputDiv.textContent = data.token; isFirstChunk = false; } else { outputDiv.textContent += data.token; } } } }; eventSource.onerror = (error) => { console.error('EventSource error:', error); outputDiv.textContent += 'Error occurred.'; }; eventSource.addEventListener('close', () => { console.log('Connection closed.'); }); } const htmlContent = `

Hono / Htmx / Alpine Streaming + UX Example

Prompt:

`; app.get('/chat', (c) => { const prompt = c.req.query('p') || "Tell me a joke"; c.header('Content-Type', 'text/event-stream'); // Set Content-Type header return stream(c, async (stream) => { try { const result = await ai.gen({ provider: "groq", prompt, streaming: true, max_tokens: 1024 }) for await (const textPart of result.textStream) { stream.write(`data: ${JSON.stringify({ token: textPart })}\n\n`); } stream.write(`data: [DONE]\n\n`); // Send a completion event } catch (error) { stream.write(`data: ${JSON.stringify({ error: error.message })}\n\n`); } }); }); app.get('/', (c) => c.html(htmlContent)); export default app.fetch; // val.town

aiHonoHtmxAlpineStreamingExample