[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_91":92,"_166":167,"_178":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_161":-5,"_162":-5,"_163":164,"_130":131,"_144":145,"_100":101,"_98":99,"_119":-7,"_50":51,"_165":26},"type","val","author","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":31,"_123":31,"_124":31,"_125":31,"_126":31,"_127":31,"_128":-5,"_20":129,"_134":135,"_141":-7,"_142":143,"_144":145,"_146":147},"name","chatGPT","valNameId","cecd1172-28ee-11ef-b2b7-cab58f78796a","parentFolderId","eecc26b7-476b-4e93-9487-ae8b4988d6e5","isOwned","privacy","public","readme","# ChatGPT Implemented in Val Town\n\nDemonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events.\n\n\n

\n\n\n\n

\n\n**⚠️ Note: Requires your own OpenAI API key to get this to run in a fork**","valType","http","currentVersion","c60be292-28ef-11ef-9740-cab58f78796a","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport { Hono } from \"npm:hono@3\";\nimport OpenAI from \"npm:openai\";\nimport { renderToString } from \"npm:react-dom/server\";\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\", 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-xs 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 // Setup the SSE connection\n const input = document.getElementById(\"input\");\n const eventSource = new EventSource(\n `/sse-response?message=${msgDiv.textContent}`\n + `&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};\nconst openai = new OpenAI();\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.get(\"/sse-response\", async (c) => {\n const threadId = c.req.query(\"threadId\");\n const assistantId = c.req.query(\"assistantId\");\n const message = c.req.query(\"message\");\n\n await openai.beta.threads.messages.create(\n threadId,\n { role: \"user\", content: message },\n );\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;","createdAt",["D",1718219575672],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","forkedVal",{"_114":136,"_130":137,"_98":138,"_119":139,"_140":-5},"081fae90-2501-11ef-9362-cab58f78796a","maxm","valTownChatGPT",134,"prDisabledHint","interval","slug","stevekrouse/chatGPT","description","ChatGPT Implemented in Val Town Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events. ⚠️ Note: Requires your own OpenAI API key to get this to run in a fork","versions",[148,151,154,158],{"_119":120,"_149":-5,"_117":150,"_114":112},"prId",["D",1718219575672],{"_119":90,"_149":-5,"_117":152,"_114":153},["D",1718219570609],"c3076594-28ef-11ef-bb6d-cab58f78796a",{"_119":155,"_149":-5,"_117":156,"_114":157},1,["D",1718219524942],"a7cf2118-28ef-11ef-bb6d-cab58f78796a",{"_119":31,"_149":-5,"_117":159,"_114":160},["D",1718219161079],"ceee0710-28ee-11ef-b2b7-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":168,"_169":170,"_94":171},"single","redirect","/v/stevekrouse/chatGPT/versions",{"_114":157,"_115":172,"_119":155,"_117":173,"_174":99,"_100":101,"_109":110,"_130":131,"_11":96,"_175":-5,"_176":-5,"_177":-5,"_165":26,"_142":143},"/** @jsxImportSource https://esm.sh/react */\nimport OpenAI from \"npm:openai\";\nimport { renderToString } from \"npm:react-dom/server\";\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\", 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-xs 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 // Setup the SSE connection\n const input = document.getElementById(\"input\");\n const eventSource = new EventSource(\n `/sse-response?message=${msgDiv.textContent}`\n + `&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};\nconst openai = new OpenAI();\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

chatGPT

Version 1