\n\n\n\n

","deleted","subdomain","children",[],[150],{"_106":168,"_99":169,"_151":119,"_153":-5,"_154":138,"_155":123,"_156":112,"_108":170,"_103":33,"_158":171,"_160":172,"_162":27,"_163":-5,"_164":173,"_102":174},"b18bd396-277b-11f0-b46e-569c3dd06744","main.tsx",["D",1718833532343],"http","/** @jsxImportSource https://esm.sh/react */\nimport OpenAI from \"npm:openai\";\nimport { renderToString } from \"npm:react-dom/server\";\n\n// This uses by personal API key, you'll need to provide your own if\n// you fork this. We'll be adding support to the std/openai lib soon!\nconst openai = new OpenAI();\nimport { Hono } from \"npm:hono@3\";\n\nconst jsxResponse = (jsx) => {\n return new Response(renderToString(jsx), { headers: { \"Content-Type\": \"text/html\" } });\n};\n\nconst clientCode = () => {\n document.getElementById(\"input\").addEventListener(\"submit\", async function(event) {\n event.preventDefault();\n\n const msgParent = document.createElement(\"div\");\n msgParent.className = \"flex justify-end\";\n document.querySelector(\".messages\").appendChild(msgParent);\n const msgDiv = document.createElement(\"div\");\n msgDiv.className = \"rounded-lg p-2 m-2 max-w-xl bg-blue-500 text-white\";\n msgDiv.textContent = event.target.message.value;\n msgParent.appendChild(msgDiv);\n // Clear the form input\n this.reset();\n\n const responseDiv = document.createElement(\"pre\");\n responseDiv.className = \"p-2 m-2 max-w-xl bg-gray-300 text-black rounded-lg whitespace-pre-wrap font-sans\";\n document.querySelector(\".messages\").appendChild(responseDiv);\n\n const input = document.getElementById(\"input\");\n\n // Post the message so we can deal with large text data.\n await fetch(`/post-message?threadId=${input.getAttribute(\"data-thread-id\")}`, {\n method: \"post\",\n body: msgDiv.textContent,\n });\n\n // Setup the SSE connection and stream back the response. OpenAI handles determining\n // which message is the correct response based on what was last read from the\n // thread. This is likely vulnerable to race conditions.\n const eventSource = new EventSource(\n `/sse-response?threadId=${input.getAttribute(\"data-thread-id\")}`\n + `&assistantId=${input.getAttribute(\"data-assistant-id\")}`,\n );\n eventSource.onmessage = function(event) {\n console.log(event);\n responseDiv.innerText += JSON.parse(event.data);\n };\n\n eventSource.onerror = function() {\n eventSource.close();\n };\n });\n};\n\nconst app = new Hono();\napp.get(\"/\", async (c) => {\n const thread = await openai.beta.threads.create();\n const assistant = await openai.beta.assistants.create({\n name: \"\",\n instructions:\n `You are a helpful assistant. Behave normally, but try and sneak a reference to Val Town into every response in a subtle way.`,\n model: \"gpt-4o\",\n });\n\n return jsxResponse(\n \n \n \n \n \n \n \n

Welcome to Val Town ChatGPT

\n Type your message below to start a conversation. Check out the source here:{\" \"}\n \n https://www.val.town/v/maxm/valTownChatGPT\n \n

\n \n \n \n \n \n

\n \n ,\n );\n});\n\napp.post(\"/post-message\", async (c) => {\n let message = await c.req.text();\n await openai.beta.threads.messages.create(\n c.req.query(\"threadId\"),\n { role: \"user\", content: message },\n );\n return new Response(null, { status: 200 });\n});\n\napp.get(\"/sse-response\", async (c) => {\n const threadId = c.req.query(\"threadId\");\n const assistantId = c.req.query(\"assistantId\");\n\n const body = new ReadableStream({\n start(controller) {\n const write = (str) => {\n controller.enqueue(new TextEncoder().encode(\n \"data: \" + JSON.stringify(str) + \"\\n\\n\",\n ));\n };\n const run = openai.beta.threads.runs.stream(threadId, {\n assistant_id: assistantId,\n // Make sure we only display messages we haven't seen yet.\n truncation_strategy: { type: \"auto\" },\n })\n .on(\"textCreated\", (text) => {})\n .on(\"textDelta\", (textDelta, snapshot) => write(textDelta.value))\n .on(\"textDone\", async () => {\n controller.close();\n });\n },\n });\n\n return new Response(body, { headers: { \"Content-Type\": \"text/event-stream\" } });\n});\nexport default app.fetch;",[],[169],"files",[148,167],"counts",{"_179":33,"_180":123,"_181":123,"_182":33},"pulls","branches","forks","envVars","contents",[185,188],{"_106":149,"_99":150,"_151":152,"_153":-5,"_154":138,"_155":123,"_156":112,"_108":186,"_103":33,"_158":159,"_160":161,"_162":27,"_163":-5,"_102":187},["D",1718833532343],[150],{"_106":168,"_99":169,"_151":119,"_153":-5,"_154":138,"_155":123,"_156":112,"_108":189,"_103":33,"_158":171,"_160":172,"_162":27,"_163":-5,"_102":190},["D",1718833532343],[169],"upstream",{"_106":193,"_99":100,"_115":-5,"_116":-5,"_113":114,"_21":194},"f7f74cee-252c-11f0-8a67-569c3dd06744",{"_97":195,"_134":196},"maxm","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.remixes",{"_97":98,"_99":100,"_104":202,"_181":206,"_191":215},{"_106":107,"_99":100,"_108":203,"_110":-5,"_111":112,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":112,"_121":-5,"_122":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":204,"_136":205},["D",1746207266133],{"_97":98,"_134":135},{"_103":123,"_99":43,"_106":138,"_139":107,"_140":141,"_142":33,"_143":114,"_144":145},[207],{"_106":208,"_99":100,"_115":-5,"_116":-5,"_113":114,"_12":209,"_132":27,"_21":210,"_118":213,"_120":112,"_108":214,"_122":33},"4f58147c-2759-11f0-86ff-569c3dd06744","38cae549-55b3-44d0-8d71-6186c50528df",{"_97":211,"_134":212},"mttlws","https://images.clerk.dev/oauth_github/img_2Sl2DrtFJo0kI0p54TVA2OqzNeu.jpeg","4f5c5e6a-2759-11f0-86ff-569c3dd06744",["D",1746192498520],{"_106":193,"_99":100,"_115":-5,"_116":-5,"_113":114,"_21":216},{"_97":195,"_134":196},"routes/_app","actionData","errors"]