[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","pdebieamzn","name","calendarEventExtractor","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","66b8f984-2799-11f0-9d52-569c3dd06744","main.tsx","fileId","66a20fe4-2799-11f0-9d52-569c3dd06744","parentId","branchId","669fa6e6-2799-11f0-9d52-569c3dd06744","branchVersion",5,"latest",true,"createdAt",["D",1725372131634],4,"fileType","http","content","// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,\n// and display them on a big calendar. We'll use react-big-calendar for the calendar component,\n// and pdf.js for PDF parsing. The server will handle PDF processing and event extraction.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { Calendar, momentLocalizer } from \"https://esm.sh/react-big-calendar\";\nimport moment from \"https://esm.sh/moment\";\n\n// Set up the localizer for react-big-calendar\nconst localizer = momentLocalizer(moment);\n\nfunction App() {\n const [events, setEvents] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleFileUpload = async (e) => {\n const file = e.target.files[0];\n if (file) {\n setIsLoading(true);\n const formData = new FormData();\n formData.append('pdf', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData,\n });\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n if (Array.isArray(data)) {\n setEvents(data.map(event => ({\n ...event,\n start: new Date(event.start),\n end: new Date(event.end),\n })));\n } else {\n throw new Error('Unexpected data format received from server');\n }\n } catch (error) {\n console.error('Error uploading file:', error);\n // Use a more user-friendly error message\n setEvents([]);\n alert('There was an error processing your file. Please try again or use a different PDF.');\n } finally {\n setIsLoading(false);\n }\n }\n };\n\n return (\n

Calendar Event Extractor

\n \n {isLoading &&

Processing PDF and extracting events...

}\n

\n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const pdfExtractText = await import(\"https://esm.town/v/pdebieamzn/pdfExtractText\");\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n const formData = await request.formData();\n const pdfFile = formData.get('pdf') as File;\n \n if (!pdfFile) {\n return new Response('No file uploaded', { status: 400 });\n }\n\n const arrayBuffer = await pdfFile.arrayBuffer();\n const fullText = await pdfExtractText.default(arrayBuffer);\n\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You are a helpful assistant that extracts event information from text. Extract events with their titles, start times, and end times. Format the response as a valid JSON array of objects with 'title', 'start', and 'end' properties. Use ISO 8601 format for dates. Do not include any explanatory text outside the JSON array. Do not use markdown code fences or JSON labels.\" },\n { role: \"user\", content: fullText },\n ],\n model: \"gpt-4-mini\",\n });\n\n let events;\n try {\n let content = completion.choices[0].message.content.trim();\n // Remove markdown code fences if present\n if (content.startsWith('```') && content.endsWith('```')) {\n content = content.slice(3, -3).trim();\n }\n // Remove \"json\" label if present\n if (content.startsWith('json')) {\n content = content.slice(4).trim();\n }\n events = JSON.parse(content);\n } catch (error) {\n console.error('Error parsing OpenAI response:', error);\n console.log('Raw response:', completion.choices[0].message.content);\n return new Response(JSON.stringify({ error: 'Error processing events' }), { status: 500, headers: { 'Content-Type': 'application/json' } });\n }\n\n if (!Array.isArray(events)) {\n console.error('Unexpected response format from OpenAI');\n return new Response(JSON.stringify({ error: 'Unexpected response format' }), { status: 500, headers: { 'Content-Type': 'application/json' } });\n }\n\n return new Response(JSON.stringify(events), {\n headers: { 'Content-Type': 'application/json' },\n });\n }\n\n return new Response(`\n \n \n Calendar Event Extractor\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n padding: 20px;\n}\nh1 {\n margin-bottom: 20px;\n}\ninput[type=\"file\"] {\n margin-bottom: 20px;\n}\n`;\n\nexport default server;","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1725372131634],"children",[],[35],"669f5b46-2799-11f0-9d52-569c3dd06744",["D",1746220025366],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b6f17238-d5a5-4d05-b964-00373671a0b9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","56af589e-acb5-465e-8de4-1fe39301a35c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybFlxdkVydDVsckFRSlZyanBaWW5tenRLZWIifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":148,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":149,"_95":150,"_97":151,"_99":53},[145],"files",[145],"counts",{"_135":77,"_136":137,"_138":137,"_31":139,"_140":141},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":134},[35],"pulls","branches",1,"forks",{"_142":77,"_144":77},"connections",{"_142":77,"_143":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":146,"_18":147},[],[35],["D",1746220025366],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":185,"_186":187,"_188":189,"_190":53,"_191":53,"_192":53,"_193":44,"_194":-5,"_195":-7,"_196":-7,"_197":77,"_198":53,"_199":53,"_200":-5,"_201":53,"_202":53,"_203":53,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":16,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code