function MainComponent({ handleSubmit, timelineEntries }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-[900px] mx-auto py-10 px-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Diary App"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-3", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "photoUpload", className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Upload Photos:"), /*#__PURE__*/ React.createElement("input", { id: "photoUpload", name: "photoUpload", type: "file", className: "w-full text-sm text-grey-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100", multiple: true, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-6 rounded-full bg-violet-600 text-white hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Analyze"))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-10 mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Diary Entries"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, timelineEntries.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border-2 rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Date/Time: ", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal", __source: { fileName: "", lineNumber: 20, columnNumber: 51 }, __self: this }, entry.dateTime)), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Category: ", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal", __source: { fileName: "", lineNumber: 21, columnNumber: 50 }, __self: this }, entry.category)), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Diary Content: ", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal", __source: { fileName: "", lineNumber: 22, columnNumber: 55 }, __self: this }, entry.content)))))); } function StoryComponent() { const handleSubmit = async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const photos = formData.getAll('photoUpload'); const timelineEntries = []; for (let photo of photos){ const base64 = await convertToBase64(photo); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": [ { "type": "text", "text": "our goal is analyzing user photos to create diary content in our app. Your task is returning following information for each photos." }, { "type": "image_url", "image_url": { "url": base64 } } ] } ] }) }); const data = await response.json(); const content = data.choices[0].message.content; const category = content.toLowerCase().includes("holiday") || content.toLowerCase().includes("vacation") ? "Holiday" : "Work"; timelineEntries.push({ dateTime: new Date().toLocaleString(), category, content }); } console.log(timelineEntries); }; async function convertToBase64(file) { return new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.onload = ()=>resolve(reader.result); reader.onerror = (error)=>reject(error); reader.readAsDataURL(file); }); } const timelineEntries = [ { dateTime: "2023-04-01 10:00", category: "Work", content: "Completed project X." }, { dateTime: "2023-04-02 20:00", category: "Holiday", content: "Started vacation." } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { handleSubmit: handleSubmit, timelineEntries: timelineEntries, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); }