[{"_1":2,"_733":-5,"_734":-5},"loaderData",{"_3":4,"_91":92,"_720":721,"_732":-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,"_715":-5,"_716":-5,"_717":718,"_131":132,"_139":140,"_100":101,"_98":99,"_118":-7,"_50":51,"_719":26},"type","val","author","418c1e39-eb48-4f2f-8c97-122ece94631c",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":117,"_118":119,"_120":26,"_121":122,"_123":124,"_125":31,"_126":31,"_127":31,"_128":31,"_129":-5,"_20":130,"_135":-5,"_136":-7,"_137":138,"_139":140,"_141":142},"name","valTownChatGPT","valNameId","b130da20-2418-11ef-a00e-cab58f78796a","parentFolderId","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

","valType","http","currentVersion","5f9f2f1a-28f3-11ef-a92b-cab58f78796a","legacyPrivate","id","code","/** @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;","createdAt",["D",1718221121819],"version",143,"currentUserHasLiked","likeCount",3,"forkCount",7,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_131":132,"_133":134},"handle","maxm","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9","forkedVal","interval","slug","maxm/valTownChatGPT","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. ","versions",[143,146,150,154,158,162,166,170,174,178,182,187,191,195,199,203,207,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,690,694,698,702,705,708,712],{"_118":119,"_144":-5,"_116":145,"_113":111},"prId",["D",1718221121819],{"_118":147,"_144":-5,"_116":148,"_113":149},142,["D",1718221120183],"5ea596ee-28f3-11ef-b188-cab58f78796a",{"_118":151,"_144":-5,"_116":152,"_113":153},141,["D",1718220737277],"7a6ac51c-28f2-11ef-a818-cab58f78796a",{"_118":155,"_144":-5,"_116":156,"_113":157},140,["D",1718220682317],"59a882c4-28f2-11ef-9602-cab58f78796a",{"_118":159,"_144":-5,"_116":160,"_113":161},139,["D",1718220674375],"54ecaf44-28f2-11ef-99b3-cab58f78796a",{"_118":163,"_144":-5,"_116":164,"_113":165},138,["D",1718220673479],"5463f7c6-28f2-11ef-a3f4-cab58f78796a",{"_118":167,"_144":-5,"_116":168,"_113":169},137,["D",1718220665226],"4f78bada-28f2-11ef-91cf-cab58f78796a",{"_118":171,"_144":-5,"_116":172,"_113":173},136,["D",1718220618364],"3389ec04-28f2-11ef-9af1-cab58f78796a",{"_118":175,"_144":-5,"_116":176,"_113":177},135,["D",1718220306291],"798772b8-28f1-11ef-9ff7-cab58f78796a",{"_118":179,"_144":-5,"_116":180,"_113":181},134,["D",1717787183324],"081fae90-2501-11ef-9362-cab58f78796a",{"_118":183,"_144":184,"_116":185,"_113":186},133,"9c7e6a46-2442-11ef-bb13-cab58f78796a",["D",1717715301452],"ab3065e6-2459-11ef-8520-cab58f78796a",{"_118":188,"_144":-5,"_116":189,"_113":190},132,["D",1717704806584],"3bc2713a-2441-11ef-8e8c-cab58f78796a",{"_118":192,"_144":-5,"_116":193,"_113":194},131,["D",1717704743030],"15e0f8f6-2441-11ef-9247-cab58f78796a",{"_118":196,"_144":-5,"_116":197,"_113":198},130,["D",1717704662646],"e5f74ac8-2440-11ef-952a-cab58f78796a",{"_118":200,"_144":-5,"_116":201,"_113":202},129,["D",1717704638166],"d760057c-2440-11ef-a0ba-cab58f78796a",{"_118":204,"_144":-5,"_116":205,"_113":206},128,["D",1717704581006],"b54e20d6-2440-11ef-8e8c-cab58f78796a",{"_118":208,"_144":-5,"_116":209,"_113":210},127,["D",1717704574535],"b172982a-2440-11ef-831f-cab58f78796a",{"_118":212,"_144":-5,"_116":213,"_113":214},126,["D",1717704318811],"19064a28-2440-11ef-a7d3-cab58f78796a",{"_118":216,"_144":-5,"_116":217,"_113":218},125,["D",1717702780539],"842496b0-243c-11ef-95d6-cab58f78796a",{"_118":220,"_144":-5,"_116":221,"_113":222},124,["D",1717702671923],"43670d88-243c-11ef-9aa5-cab58f78796a",{"_118":224,"_144":-5,"_116":225,"_113":226},123,["D",1717702668302],"413e87ca-243c-11ef-8f01-cab58f78796a",{"_118":228,"_144":-5,"_116":229,"_113":230},122,["D",1717702610759],"1ef24ada-243c-11ef-9aa5-cab58f78796a",{"_118":232,"_144":-5,"_116":233,"_113":234},121,["D",1717702594269],"151e0c1a-243c-11ef-95d6-cab58f78796a",{"_118":236,"_144":-5,"_116":237,"_113":238},120,["D",1717702517447],"e753defe-243b-11ef-8b1f-cab58f78796a",{"_118":240,"_144":-5,"_116":241,"_113":242},119,["D",1717702511941],"e40bc68a-243b-11ef-badb-cab58f78796a",{"_118":244,"_144":-5,"_116":245,"_113":246},118,["D",1717702342839],"7f40edca-243b-11ef-9d91-cab58f78796a",{"_118":248,"_144":-5,"_116":249,"_113":250},117,["D",1717702312352],"6d14e0fc-243b-11ef-91d0-cab58f78796a",{"_118":252,"_144":-5,"_116":253,"_113":254},116,["D",1717702303216],"67a2dd4a-243b-11ef-bb68-cab58f78796a",{"_118":256,"_144":-5,"_116":257,"_113":258},115,["D",1717702291614],"60b88246-243b-11ef-8f01-cab58f78796a",{"_118":260,"_144":-5,"_116":261,"_113":262},114,["D",1717702250116],"47fc8bf8-243b-11ef-95d6-cab58f78796a",{"_118":264,"_144":-5,"_116":265,"_113":266},113,["D",1717702228011],"3acf7e18-243b-11ef-a4b9-cab58f78796a",{"_118":268,"_144":-5,"_116":269,"_113":270},112,["D",1717702181971],"1f5e6220-243b-11ef-ab21-cab58f78796a",{"_118":272,"_144":-5,"_116":273,"_113":274},111,["D",1717702114331],"f70d5f56-243a-11ef-bfdb-cab58f78796a",{"_118":276,"_144":-5,"_116":277,"_113":278},110,["D",1717702107572],"f305ef04-243a-11ef-ab21-cab58f78796a",{"_118":280,"_144":-5,"_116":281,"_113":282},109,["D",1717702101136],"ef2fe362-243a-11ef-9d91-cab58f78796a",{"_118":284,"_144":-5,"_116":285,"_113":286},108,["D",1717702094727],"eb5dff3a-243a-11ef-bce8-cab58f78796a",{"_118":288,"_144":-5,"_116":289,"_113":290},107,["D",1717702075150],"dfb2b4e6-243a-11ef-bfdb-cab58f78796a",{"_118":292,"_144":-5,"_116":293,"_113":294},106,["D",1717702028360],"c3cf3984-243a-11ef-bfdb-cab58f78796a",{"_118":296,"_144":-5,"_116":297,"_113":298},105,["D",1717702001227],"b3a2fe9c-243a-11ef-8481-cab58f78796a",{"_118":300,"_144":-5,"_116":301,"_113":302},104,["D",1717701931059],"89d04516-243a-11ef-8fae-cab58f78796a",{"_118":304,"_144":-5,"_116":305,"_113":306},103,["D",1717701906131],"7af47cce-243a-11ef-8a76-cab58f78796a",{"_118":308,"_144":-5,"_116":309,"_113":310},102,["D",1717701897662],"75e83a90-243a-11ef-b62b-cab58f78796a",{"_118":312,"_144":-5,"_116":313,"_113":314},101,["D",1717701889371],"70f7328e-243a-11ef-bf83-cab58f78796a",{"_118":316,"_144":-5,"_116":317,"_113":318},100,["D",1717701824450],"4a44ff4a-243a-11ef-ab1c-cab58f78796a",{"_118":320,"_144":-5,"_116":321,"_113":322},99,["D",1717701628693],"d596d038-2439-11ef-a41c-cab58f78796a",{"_118":324,"_144":-5,"_116":325,"_113":326},98,["D",1717701615927],"cdfaead0-2439-11ef-8692-cab58f78796a",{"_118":328,"_144":-5,"_116":329,"_113":330},97,["D",1717701581435],"b96be5ec-2439-11ef-89df-cab58f78796a",{"_118":332,"_144":-5,"_116":333,"_113":334},96,["D",1717701498391],"87ec4804-2439-11ef-9724-cab58f78796a",{"_118":336,"_144":-5,"_116":337,"_113":338},95,["D",1717701481372],"7dc75c24-2439-11ef-a71b-cab58f78796a",{"_118":340,"_144":-5,"_116":341,"_113":342},94,["D",1717701396926],"4b7209b8-2439-11ef-9277-cab58f78796a",{"_118":344,"_144":-5,"_116":345,"_113":346},93,["D",1717701373766],"3da41632-2439-11ef-8996-cab58f78796a",{"_118":348,"_144":-5,"_116":349,"_113":350},92,["D",1717701251453],"f4bc98cc-2438-11ef-bfcb-cab58f78796a",{"_118":352,"_144":-5,"_116":353,"_113":354},91,["D",1717701247376],"f24e6e80-2438-11ef-bfcb-cab58f78796a",{"_118":356,"_144":-5,"_116":357,"_113":358},90,["D",1717701225319],"e528e140-2438-11ef-b80f-cab58f78796a",{"_118":360,"_144":-5,"_116":361,"_113":362},89,["D",1717701212774],"ddae943c-2438-11ef-9277-cab58f78796a",{"_118":364,"_144":-5,"_116":365,"_113":366},88,["D",1717701205929],"d99a21ae-2438-11ef-a43d-cab58f78796a",{"_118":368,"_144":-5,"_116":369,"_113":370},87,["D",1717701203848],"d85c99d4-2438-11ef-b3e1-cab58f78796a",{"_118":372,"_144":-5,"_116":373,"_113":374},86,["D",1717701150074],"b84f6c8e-2438-11ef-b3e1-cab58f78796a",{"_118":376,"_144":-5,"_116":377,"_113":378},85,["D",1717701135261],"af7b22e2-2438-11ef-a108-cab58f78796a",{"_118":380,"_144":-5,"_116":381,"_113":382},84,["D",1717701095327],"97ad9e24-2438-11ef-a950-cab58f78796a",{"_118":384,"_144":-5,"_116":385,"_113":386},83,["D",1717701060692],"8308c084-2438-11ef-84fd-cab58f78796a",{"_118":388,"_144":-5,"_116":389,"_113":390},82,["D",1717701046616],"7aa4dbd0-2438-11ef-8f38-cab58f78796a",{"_118":392,"_144":-5,"_116":393,"_113":394},81,["D",1717701003359],"60dc5caa-2438-11ef-9c51-cab58f78796a",{"_118":396,"_144":-5,"_116":397,"_113":398},80,["D",1717700948754],"405075e8-2438-11ef-a950-cab58f78796a",{"_118":400,"_144":-5,"_116":401,"_113":402},79,["D",1717700943426],"3d236d4e-2438-11ef-93cb-cab58f78796a",{"_118":404,"_144":-5,"_116":405,"_113":406},78,["D",1717700939433],"3ac21654-2438-11ef-93cb-cab58f78796a",{"_118":408,"_144":-5,"_116":409,"_113":410},77,["D",1717700915982],"2cc7bd6a-2438-11ef-a468-cab58f78796a",{"_118":412,"_144":-5,"_116":413,"_113":414},76,["D",1717700887993],"1c19024e-2438-11ef-b173-cab58f78796a",{"_118":416,"_144":-5,"_116":417,"_113":418},75,["D",1717700845967],"030c58a0-2438-11ef-8f38-cab58f78796a",{"_118":420,"_144":-5,"_116":421,"_113":422},74,["D",1717700833724],"fbc033aa-2437-11ef-81af-cab58f78796a",{"_118":424,"_144":-5,"_116":425,"_113":426},73,["D",1717700827714],"f82b266e-2437-11ef-a108-cab58f78796a",{"_118":428,"_144":-5,"_116":429,"_113":430},72,["D",1717700819468],"f340d9b4-2437-11ef-8946-cab58f78796a",{"_118":432,"_144":-5,"_116":433,"_113":434},71,["D",1717700787610],"e043cb8c-2437-11ef-8f38-cab58f78796a",{"_118":436,"_144":-5,"_116":437,"_113":438},70,["D",1717700753379],"cbdc7144-2437-11ef-81af-cab58f78796a",{"_118":440,"_144":-5,"_116":441,"_113":442},69,["D",1717700729496],"bda045ec-2437-11ef-bdb5-cab58f78796a",{"_118":444,"_144":-5,"_116":445,"_113":446},68,["D",1717700458648],"1c3019da-2437-11ef-9a35-cab58f78796a",{"_118":448,"_144":-5,"_116":449,"_113":450},67,["D",1717700440918],"119ec5d4-2437-11ef-8a92-cab58f78796a",{"_118":452,"_144":-5,"_116":453,"_113":454},66,["D",1717700421104],"05cf668c-2437-11ef-9a35-cab58f78796a",{"_118":456,"_144":-5,"_116":457,"_113":458},65,["D",1717700364294],"e3f2d580-2436-11ef-9529-cab58f78796a",{"_118":460,"_144":-5,"_116":461,"_113":462},64,["D",1717700002913],"0c8c6dea-2436-11ef-a24d-cab58f78796a",{"_118":464,"_144":-5,"_116":465,"_113":466},63,["D",1717699989238],"0465e9b6-2436-11ef-acf3-cab58f78796a",{"_118":468,"_144":-5,"_116":469,"_113":470},62,["D",1717699878135],"c22cdbf4-2435-11ef-a4ab-cab58f78796a",{"_118":472,"_144":-5,"_116":473,"_113":474},61,["D",1717699875446],"c0929edc-2435-11ef-9839-cab58f78796a",{"_118":476,"_144":-5,"_116":477,"_113":478},60,["D",1717699855089],"b470598c-2435-11ef-94b1-cab58f78796a",{"_118":480,"_144":-5,"_116":481,"_113":482},59,["D",1717699833897],"a7cecdd0-2435-11ef-94b1-cab58f78796a",{"_118":484,"_144":-5,"_116":485,"_113":486},58,["D",1717699802472],"9513aa62-2435-11ef-89e9-cab58f78796a",{"_118":488,"_144":-5,"_116":489,"_113":490},57,["D",1717699709218],"5d7e4846-2435-11ef-9f52-cab58f78796a",{"_118":492,"_144":-5,"_116":493,"_113":494},56,["D",1717699652377],"3b9ceb56-2435-11ef-a9a8-cab58f78796a",{"_118":496,"_144":-5,"_116":497,"_113":498},55,["D",1717699588370],"157658ae-2435-11ef-9603-cab58f78796a",{"_118":500,"_144":-5,"_116":501,"_113":502},54,["D",1717699566529],"087190d8-2435-11ef-a590-cab58f78796a",{"_118":504,"_144":-5,"_116":505,"_113":506},53,["D",1717699553259],"0088b766-2435-11ef-a3b8-cab58f78796a",{"_118":508,"_144":-5,"_116":509,"_113":510},52,["D",1717699496776],"dede0f6c-2434-11ef-8c59-cab58f78796a",{"_118":512,"_144":-5,"_116":513,"_113":514},51,["D",1717699369342],"92e9400e-2434-11ef-8c59-cab58f78796a",{"_118":516,"_144":-5,"_116":517,"_113":518},50,["D",1717699346088],"850d08d0-2434-11ef-a4ab-cab58f78796a",{"_118":520,"_144":-5,"_116":521,"_113":522},49,["D",1717699325168],"7894e99c-2434-11ef-9963-cab58f78796a",{"_118":524,"_144":-5,"_116":525,"_113":526},48,["D",1717699084392],"e911529c-2433-11ef-baa7-cab58f78796a",{"_118":528,"_144":-5,"_116":529,"_113":530},47,["D",1717699074811],"e35b6ac2-2433-11ef-9a40-cab58f78796a",{"_118":532,"_144":-5,"_116":533,"_113":534},46,["D",1717697568084],"61470c60-2430-11ef-a6ce-cab58f78796a",{"_118":536,"_144":-5,"_116":537,"_113":538},45,["D",1717697534592],"4d508e70-2430-11ef-bd25-cab58f78796a",{"_118":540,"_144":-5,"_116":541,"_113":542},44,["D",1717697485855],"3043f092-2430-11ef-bd25-cab58f78796a",{"_118":544,"_144":-5,"_116":545,"_113":546},43,["D",1717697410489],"03581b3a-2430-11ef-8201-cab58f78796a",{"_118":548,"_144":-5,"_116":549,"_113":550},42,["D",1717697387716],"f5c51c66-242f-11ef-9019-cab58f78796a",{"_118":552,"_144":-5,"_116":553,"_113":554},41,["D",1717697010721],"1510517c-242f-11ef-95ad-cab58f78796a",{"_118":556,"_144":-5,"_116":557,"_113":558},40,["D",1717696994804],"0b93886c-242f-11ef-8b89-cab58f78796a",{"_118":560,"_144":-5,"_116":561,"_113":562},39,["D",1717696993189],"0a9d29a4-242f-11ef-bd25-cab58f78796a",{"_118":564,"_144":-5,"_116":565,"_113":566},38,["D",1717696987175],"07075dfa-242f-11ef-8b89-cab58f78796a",{"_118":568,"_144":-5,"_116":569,"_113":570},37,["D",1717696945087],"edf15a50-242e-11ef-a84c-cab58f78796a",{"_118":572,"_144":-5,"_116":573,"_113":574},36,["D",1717696938842],"ea38637c-242e-11ef-8b89-cab58f78796a",{"_118":576,"_144":-5,"_116":577,"_113":578},35,["D",1717696933186],"e6d9491c-242e-11ef-8c5e-cab58f78796a",{"_118":580,"_144":-5,"_116":581,"_113":582},34,["D",1717696928565],"e41826bc-242e-11ef-83a9-cab58f78796a",{"_118":584,"_144":-5,"_116":585,"_113":586},33,["D",1717696919456],"deaa4f3e-242e-11ef-befe-cab58f78796a",{"_118":588,"_144":-5,"_116":589,"_113":590},32,["D",1717696878987],"c68b4566-242e-11ef-bd25-cab58f78796a",{"_118":592,"_144":-5,"_116":593,"_113":594},31,["D",1717696849900],"b534f7bc-242e-11ef-b2b7-cab58f78796a",{"_118":596,"_144":-5,"_116":597,"_113":598},30,["D",1717696801064],"98192dba-242e-11ef-a076-cab58f78796a",{"_118":600,"_144":-5,"_116":601,"_113":602},29,["D",1717696773273],"87889116-242e-11ef-83a9-cab58f78796a",{"_118":604,"_144":-5,"_116":605,"_113":606},28,["D",1717696762284],"80fbd182-242e-11ef-993b-cab58f78796a",{"_118":608,"_144":-5,"_116":609,"_113":610},27,["D",1717696682839],"51a16460-242e-11ef-bf0f-cab58f78796a",{"_118":612,"_144":-5,"_116":613,"_113":614},26,["D",1717696625592],"2f824836-242e-11ef-a9b5-cab58f78796a",{"_118":616,"_144":-5,"_116":617,"_113":618},25,["D",1717696584709],"1723e4ca-242e-11ef-8f04-cab58f78796a",{"_118":620,"_144":-5,"_116":621,"_113":622},24,["D",1717696576797],"126cb254-242e-11ef-8dd9-cab58f78796a",{"_118":624,"_144":-5,"_116":625,"_113":626},23,["D",1717695846911],"5f60f6da-242c-11ef-82b3-cab58f78796a",{"_118":628,"_144":-5,"_116":629,"_113":630},22,["D",1717695835171],"58619c18-242c-11ef-a10f-cab58f78796a",{"_118":632,"_144":-5,"_116":633,"_113":634},21,["D",1717695673688],"f8213a5c-242b-11ef-a830-cab58f78796a",{"_118":636,"_144":-5,"_116":637,"_113":638},20,["D",1717695662531],"f17ac5f6-242b-11ef-a2d7-cab58f78796a",{"_118":640,"_144":-5,"_116":641,"_113":642},19,["D",1717695625842],"db9c7e5a-242b-11ef-90fe-cab58f78796a",{"_118":644,"_144":-5,"_116":645,"_113":646},18,["D",1717695601578],"cd2616e2-242b-11ef-a751-cab58f78796a",{"_118":648,"_144":-5,"_116":649,"_113":650},17,["D",1717695555312],"b1926ed0-242b-11ef-9921-cab58f78796a",{"_118":652,"_144":-5,"_116":653,"_113":654},16,["D",1717695501388],"916e38fa-242b-11ef-a751-cab58f78796a",{"_118":656,"_144":-5,"_116":657,"_113":658},15,["D",1717695494513],"8d553692-242b-11ef-9206-cab58f78796a",{"_118":660,"_144":-5,"_116":661,"_113":662},14,["D",1717695479396],"845284be-242b-11ef-9206-cab58f78796a",{"_118":664,"_144":-5,"_116":665,"_113":666},13,["D",1717695465571],"7c15160e-242b-11ef-af1e-cab58f78796a",{"_118":668,"_144":-5,"_116":669,"_113":670},12,["D",1717695453019],"7499c46a-242b-11ef-b3d0-cab58f78796a",{"_118":672,"_144":-5,"_116":673,"_113":674},11,["D",1717695414048],"5d5f4cf2-242b-11ef-a524-cab58f78796a",{"_118":676,"_144":-5,"_116":677,"_113":678},10,["D",1717695387456],"4d859304-242b-11ef-b7c5-cab58f78796a",{"_118":680,"_144":-5,"_116":681,"_113":682},9,["D",1717687953743],"feaf1aa4-2419-11ef-b3a0-cab58f78796a",{"_118":684,"_144":-5,"_116":685,"_113":686},8,["D",1717687620251],"37e82960-2419-11ef-9998-cab58f78796a",{"_118":124,"_144":-5,"_116":688,"_113":689},["D",1717687611170],"327e948c-2419-11ef-ab87-cab58f78796a",{"_118":691,"_144":-5,"_116":692,"_113":693},6,["D",1717687552878],"0fbffc56-2419-11ef-919d-cab58f78796a",{"_118":695,"_144":-5,"_116":696,"_113":697},5,["D",1717687539465],"07c1488e-2419-11ef-9cc6-cab58f78796a",{"_118":699,"_144":-5,"_116":700,"_113":701},4,["D",1717687531199],"02d40582-2419-11ef-919d-cab58f78796a",{"_118":122,"_144":-5,"_116":703,"_113":704},["D",1717687513788],"f8732cbc-2418-11ef-ba1a-cab58f78796a",{"_118":90,"_144":-5,"_116":706,"_113":707},["D",1717687449640],"d2371fa4-2418-11ef-afa8-cab58f78796a",{"_118":709,"_144":-5,"_116":710,"_113":711},1,["D",1717687437916],"cb3a307e-2418-11ef-b011-cab58f78796a",{"_118":31,"_144":-5,"_116":713,"_113":714},["D",1717687394241],"b131e2ee-2418-11ef-a00e-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":722,"_723":724,"_94":725},"single","redirect","/v/maxm/valTownChatGPT/versions",{"_113":173,"_114":726,"_118":171,"_116":727,"_728":99,"_100":101,"_108":109,"_131":132,"_11":96,"_729":-5,"_730":-5,"_731":-5,"_719":26,"_137":138},"/** @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 // Post the message so we can deal with large text data.\n await fetch(\"/post-message\", { method: \"post\", body: msgDiv.textContent });\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 input = document.getElementById(\"input\");\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.get(\"/post-message\", async (c) => {\n let message = await c.req.text();\n\n await openai.beta.threads.messages.create(\n c.req.query(\"threadId\"),\n { role: \"user\", content: message },\n );\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;",["D",1718220618364],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

valTownChatGPT

Version 136