// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model, // and display them on a big calendar. We'll use react-big-calendar for the calendar component, // and pdf.js for PDF parsing. The server will handle PDF processing and event extraction. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar"; import { createEvents } from "https://esm.sh/ics@3.1.0"; import moment from "https://esm.sh/moment"; // Set up the localizer for react-big-calendar const localizer = momentLocalizer(moment); function App() { const [events, setEvents] = useState([]); const [isLoading, setIsLoading] = useState(false); const [fileContext, setFileContext] = useState(''); const handleFileUpload = async (e) => { const file = e.target.files[0]; if (file) { setIsLoading(true); const formData = new FormData(); formData.append('pdf', file); formData.append('context', fileContext); try { const response = await fetch('/upload', { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (Array.isArray(data)) { setEvents(data.map(event => ({ ...event, start: new Date(event.start), end: new Date(event.end), }))); } else { throw new Error('Unexpected data format received from server'); } } catch (error) { console.error('Error uploading file:', error); // Use a more user-friendly error message setEvents([]); alert('There was an error processing your file. Please try again or use a different PDF.'); } finally { setIsLoading(false); } } }; const exportToICS = () => { const icsEvents = events.map(event => ({ start: moment(event.start).format('YYYY-M-D-H-m').split("-"), end: moment(event.end).format('YYYY-M-D-H-m').split("-"), title: event.title, description: event.title })); createEvents(icsEvents, (error, value) => { if (error) { console.error(error); alert('Error creating ICS file'); return; } const blob = new Blob([value], { type: 'text/calendar;charset=utf-8' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'calendar_events.ics'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); }; const hasEvents = events.length > 0; return (

Calendar Event Extractor

setFileContext(e.target.value)} placeholder="Enter context for the PDF (e.g., 'Work Schedule', 'Class Timetable')" />

{isLoading &&

Processing PDF and extracting events...

} {hasEvents && }

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { OpenAI } = await import("https://esm.town/v/std/openai"); const pdfExtractText = await import("https://esm.town/v/pdebieamzn/pdfExtractText"); if (request.method === 'POST' && new URL(request.url).pathname === '/upload') { const formData = await request.formData(); const pdfFile = formData.get('pdf') as File; const context = formData.get('context') as string; if (!pdfFile) { return new Response('No file uploaded', { status: 400 }); } const arrayBuffer = await pdfFile.arrayBuffer(); const fullText = await pdfExtractText.default(arrayBuffer); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { 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. Consider the provided context when extracting events." }, { role: "user", content: `Context: ${context}\n\nPDF Content: ${fullText}` }, ], model: "gpt-4-mini", }); let events; try { let content = completion.choices[0].message.content.trim(); // Remove markdown code fences if present if (content.startsWith('```') && content.endsWith('```')) { content = content.slice(3, -3).trim(); } // Remove "json" label if present if (content.startsWith('json')) { content = content.slice(4).trim(); } events = JSON.parse(content); } catch (error) { console.error('Error parsing OpenAI response:', error); console.log('Raw response:', completion.choices[0].message.content); return new Response(JSON.stringify({ error: 'Error processing events' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } if (!Array.isArray(events)) { console.error('Unexpected response format from OpenAI'); return new Response(JSON.stringify({ error: 'Unexpected response format' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } return new Response(JSON.stringify(events), { headers: { 'Content-Type': 'application/json' }, }); } return new Response(` Calendar Event Extractor

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; padding: 20px; } h1 { margin-bottom: 20px; } input[type="file"] { margin-bottom: 20px; } input[type="text"] { width: 300px; margin-right: 10px; } button { padding: 10px; margin-bottom: 20px; cursor: pointer; } `; export default server;