\n {hearts.map(heart => (\n \n ❤️\n

\n ))}\n \n );\n};\n\n// Sample Preview Component\nconst SamplePreview = () => {\n const [showLetter, setShowLetter] = useState(false);\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n

Preview Our Templates

\n\n

\n Love Counter\n

\n 365 Days of Love ❤️\n

\n\n

\n Love Letter\n

\n setShowLetter(!showLetter)}\n className=\"bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600 transition\"\n >\n {showLetter ? \"Hide Letter\" : \"Read Letter\"}\n \n {showLetter && (\n

\n My dearest love, every moment with you feels like a beautiful dream...\n

\n )}\n

\n\n

\n Photo Memories\n

\n {[1, 2, 3, 4, 5, 6].map(num => (\n \n ))}\n

\n\n

\n Our Song\n

\n setIsPlaying(!isPlaying)}\n className=\"bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600 transition\"\n >\n {isPlaying ? \"🎵 Pause\" : \"🎶 Play\"}\n \n

\n );\n};\n\n// Feedback Form Component\nconst FeedbackSection = () => (\n

Share Your Love 💌

Help us make your love story even more special

\n \n Give Feedback\n \n

\n);\n\nconst extractYoutubeThumbnail = (url: string) => {\n try {\n const videoId = url.split(\"v=\")[1]?.split(\"&\")[0]\n || url.split(\"youtu.be/\")[1]?.split(\"?\")[0];\n return videoId\n ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\n : null;\n } catch (error) {\n console.error(\"Invalid YouTube URL\", error);\n return null;\n }\n};\n// Main App Component\nfunction App() {\n const [view, setView] = useState(\"home\");\n const [selectedTemplate, setSelectedTemplate] = useState(null);\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n partnerName: \"\",\n startDate: \"\",\n loveLetter: \"\",\n musicUrl: \"\",\n musicThumbnail: \"\",\n images: [],\n });\n const [generatedUrl, setGeneratedUrl] = useState(null);\n const musicUrlRef = useRef(null);\n\n const handleTemplateSelect = (template) => {\n setSelectedTemplate(template);\n setView(\"create\");\n };\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n const handleMusicUrlBlur = async () => {\n if (musicUrlRef.current?.value) {\n try {\n const thumbnail = extractYoutubeThumbnail(musicUrlRef.current.value);\n if (thumbnail) {\n setFormData(prev => ({\n ...prev,\n musicUrl: musicUrlRef.current.value,\n musicThumbnail: thumbnail,\n }));\n }\n } catch (error) {\n console.error(\"Error extracting thumbnail\", error);\n }\n }\n };\n const handleImageUpload = async (e) => {\n const files = Array.from(e.target.files);\n\n if (files.length > 6) {\n alert(\"Maximum 6 images allowed\");\n return;\n }\n\n try {\n const base64Images = await Promise.all(files.map(fileToBase64));\n\n setFormData(prev => ({\n ...prev,\n images: base64Images,\n }));\n } catch (error) {\n console.error(\"Image upload error\", error);\n alert(\"Failed to upload images\");\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const shareableId = nanoid(12);\n setLoading(true);\n\n try {\n const response = await fetch(\"/api/love-template\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n ...formData,\n shareableId,\n template: selectedTemplate.id,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n console.error(\"💔 API Error:\", data.error);\n alert(data.error); // Show the fun error message\n return;\n }\n\n if (!data.shareableId) {\n console.error(\"❌ API did not return a shareableId:\", data);\n alert(\"Unexpected error! Try again later. 🚀\");\n return;\n }\n\n setGeneratedUrl(`/love/${data.shareableId}`);\n setView(\"success\");\n } catch (error) {\n console.error(\"🔥 Unexpected error:\", error);\n alert(\"Oh no! Something crazy happened. Try again in a moment. 🌍\");\n } finally {\n setLoading(false);\n }\n };\n\n // Render Home View with enhanced landing page\n const renderHomeView = () => (\n

\n Create Your Eternal Love Story 💑\n

\n Express your love in a unique and beautiful way\n

\n\n \n

\n Choose Any Theme to Create! 🎉\n

\n\n

\n {LOVE_TEMPLATES.map(template => (\n handleTemplateSelect(template)}\n >\n \n

\n {template.name}\n

{template.description}

\n {template.features.map(feature => (\n \n {feature}\n \n ))}\n

\n ))}\n

\n\n \n \n );\n // Render Create View\n const renderCreateView = () => (\n

\n \n

\n Create Your Love Story: {selectedTemplate.name}\n

\n );\n\n // Render Success View\n const renderSuccessView = () => (\n

\n Love Story Created Successfully! 🎉\n

\n Your unique love story is now live!\n

\n {generatedUrl && (\n

\n \n {\n navigator.clipboard.writeText(`https://${window.location.host}${generatedUrl}`);\n alert(\"Link copied to clipboard!\");\n }}\n className=\"mt-2 w-full bg-pink-600 text-white py-3 rounded-md hover:bg-pink-700 transition-colors\"\n >\n Copy Shareable Link\n \n

\n )}\n

\n );\n\n return (\n

\n \n {view === \"home\" && renderHomeView()}\n {view === \"create\" && renderCreateView()}\n {view === \"success\" && renderSuccessView()}\n

\n );\n}\n\n// Client-side rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// Server response handling different routes\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 3;\n\n // Initialize Love Templates Table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_love_templates_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n shareable_id TEXT UNIQUE NOT NULL,\n partner_name TEXT NOT NULL,\n start_date TEXT NOT NULL,\n love_letter TEXT NOT NULL,\n music_url TEXT,\n music_thumbnail TEXT,\n template_type TEXT NOT NULL,\n images TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(request.url);\n\n // API: Create Love Template\n if (url.pathname === \"/api/love-template\" && request.method === \"POST\") {\n try {\n const payload = await request.json();\n const {\n partnerName,\n startDate,\n loveLetter,\n musicUrl,\n musicThumbnail,\n images,\n shareableId,\n template,\n } = payload;\n\n // Check required fields\n if (!shareableId || !partnerName || !startDate || !loveLetter || !template) {\n console.error(\"❌ Missing required fields!\", payload);\n return Response.json({\n error: \"Oops! Your love isn't strong enough! Try filling all fields with love. 💖\",\n }, { status: 400 });\n }\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_love_templates_${SCHEMA_VERSION} \n (shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images) \n VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n shareableId,\n partnerName,\n startDate,\n loveLetter,\n musicUrl || \"\",\n musicThumbnail || \"\",\n template,\n JSON.stringify(images),\n ],\n );\n\n return Response.json({\n message: \"Love story successfully crafted! 💕\",\n shareableId, // Make sure shareableId is returned correctly\n });\n } catch (error) {\n console.error(\"🔥 API Error:\", error);\n\n // Fun error messages\n const funnyErrors = [\n \"🚨 Love energy too low! Try again after hugging your partner. 🤗\",\n \"💔 Oh no! Cupid missed the shot. Try again later! 🏹\",\n \"🌹 Your love needs more passion! Whisper 'I love you' to the screen and try again. 😘\",\n \"😱 API fell in love with your request and froze! Try again soon. 💘\",\n \"✨ Oops! The romance overload broke our database. Give it a sec. ⏳\",\n ];\n\n // Pick a random funny message\n const randomMessage = funnyErrors[Math.floor(Math.random() * funnyErrors.length)];\n\n return Response.json({ error: randomMessage }, { status: 500 });\n }\n }\n\n // API: Get Love Template\n if (url.pathname.startsWith(\"/love/\")) {\n const shareableId = url.pathname.split(\"/\").pop();\n\n try {\n const result = await sqlite.execute(\n `\n SELECT * FROM ${KEY}_love_templates_${SCHEMA_VERSION} \n WHERE shareable_id = ?\n `,\n [shareableId],\n );\n\n if (result.rows.length === 0) {\n return new Response(\"Love Website Not Found\", { status: 404 });\n }\n\n const websiteData = result.rows[0];\n const parsedImages = JSON.parse(websiteData.images);\n\n return new Response(\n `\n \n \n ${websiteData.partner_name}'s Love Story\n \n \n \n \n\n \n

\n ${\n Array(15).fill(0).map(() => `\n

❤️

\n `).join(\"\")\n }\n

\n\n \n

\n \n

💖 ${websiteData.partner_name}'s Love Story 💖

Together Since: ${websiteData.start_date}

\n\n \n

\n\n \n ${\n websiteData.music_thumbnail\n ? `\n

Our Song 🎶

\n \n ▶ Listen Now\n \n

\n `\n : \"\"\n }\n\n \n

Love Letter 💌

${websiteData.love_letter}

\n\n \n ${\n parsedImages.length > 0\n ? `\n

Our Memories 📸

\n ${\n parsedImages.map(img => `\n

\n `).join(\"\")\n }\n

\n `\n : \"\"\n }\n

\n\n \n\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n } catch (error) {\n console.error(\"Error fetching love template:\", error);\n return new Response(\"Internal Server Error\", { status: 500 });\n }\n }\n // API: Get All Love Templates (Posts)\n if (url.pathname === \"/api/love-templates\" && request.method === \"GET\") {\n try {\n // Parse query parameters for pagination\n const params = new URLSearchParams(url.search);\n const page = parseInt(params.get(\"page\")) || 1; // Default to page 1\n const limit = parseInt(params.get(\"limit\")) || 10; // Default to 10 items per page\n const offset = (page - 1) * limit;\n\n // Get total count of records\n const countResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${KEY}_love_templates_${SCHEMA_VERSION}\n `);\n const total = countResult.rows[0].total;\n const totalPages = Math.ceil(total / limit);\n\n // Fetch paginated records\n const result = await sqlite.execute(`\n SELECT shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images, created_at \n FROM ${KEY}_love_templates_${SCHEMA_VERSION} \n ORDER BY created_at DESC \n LIMIT ${limit} OFFSET ${offset}\n `);\n\n // Build HTML response\n let html = `\n \n \n \n \n \n Love Templates\n \n \n \n

Love Templates

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `;\n\n result.rows.forEach(row => {\n html += `\n \n \n \n \n \n \n \n \n \n \n `;\n });\n\n html += `\n \n

Shareable ID	Partner Name	Start Date	Love Letter	Music URL	Music Thumbnail	Template Type	Images	Created At
${row.shareable_id}	${row.partner_name}	${row.start_date}	${row.love_letter}	Music	$\"Thumbnail\"$	${row.template_type}	${row.images ? `` : \"No Image\"}	${row.created_at}

`;\n\n for (let i = 1; i <= totalPages; i++) {\n html += `${i}`;\n }\n\n html += `\n

\n \n `;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n console.error(\"Error fetching love templates:\", error);\n return new Response(\"

Internal Server Error

\", {\n status: 500,\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // Default homepage\n return new Response(\n `\n \n \n Valentine -Rose Day\n \n \n \n 🌹\">\n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1739183843235],"version",36,"currentUserHasLiked","likeCount","referenceCount","dependencyCount",1,"commentCount","forkCount","prCount","mergedPr",{"_133":134,"_135":136},"handle","imankii01","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yckxGT1p0V1JYeEgxU2dmTzhQSnpSZ1VIRkMifQ","forkedVal","interval","description","@jsxImportSource https://esm.sh/react@18.2.0","latestEvaluation","slug","imankii01/rosylove","versions",[146,150,154,158,162,166,170,174,178,182],{"_119":147,"_121":122,"_148":149},["D",1739183843235],"n","1",{"_119":151,"_121":152,"_148":153},["D",1739183843111],35,"2",{"_119":155,"_121":156,"_148":157},["D",1739183630199],34,"3",{"_119":159,"_121":160,"_148":161},["D",1739183629938],33,"4",{"_119":163,"_121":164,"_148":165},["D",1739183421582],32,"5",{"_119":167,"_121":168,"_148":169},["D",1739183419068],31,"6",{"_119":171,"_121":172,"_148":173},["D",1738932801983],30,"7",{"_119":175,"_121":176,"_148":177},["D",1738925304891],29,"8",{"_119":179,"_121":180,"_148":181},["D",1738925304606],28,"9",{"_119":183,"_121":184,"_148":185},["D",1738925283833],27,"10",{"_98":187,"_100":188},"dcd6b8ac-ba91-11ee-b89b-325518e2651b",{"_102":189,"_104":190,"_98":187,"_106":-5,"_107":-5,"_108":109,"_110":-5,"_111":191,"_113":192,"_115":26,"_116":192,"_117":193,"_119":194,"_121":195,"_123":26,"_124":32,"_125":32,"_126":127,"_128":32,"_129":32,"_130":32,"_131":-5,"_20":196,"_137":-5,"_138":-7,"_139":199,"_141":-5,"_142":200,"_144":201},"untitled_violetOctopus","da75a979-9f85-49c5-8c1a-d838e8f4f5a6","email","fc3fb7bc-baa9-11ee-af94-325518e2651b","const output = await replicate.run(\n \"sczhou/codeformer:7de2ea26c616d5bf2245ad0d5e24f0ff9a6204578a5c876db53142edd9d2cd56\",\n {\n input: {\n image: \"https://replicate.delivery/pbxt/IngEkQmZiZ3whtbkNAiOIdCsYAWVMkmoIBJnw7t2TPgvJn5S/photo.jpg\",\n upscale: 1,\n face_upsample: true,\n background_enhance: true,\n codeformer_fidelity: 0.7\n }\n }\n);\nconsole.log(output);",["D",1706094973933],4,{"_133":197,"_135":198},"miazien99","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYk9GN0F1Y05hOEVDcGxJclJranVKY3BHTTgifQ","An interactive, runnable TypeScript val by miazien99","miazien99/untitled_violetOctopus",[202,204,207,209,211],{"_119":203,"_121":195,"_148":149},["D",1706094973933],{"_119":205,"_121":206,"_148":153},["D",1706084911368],3,{"_119":208,"_121":91,"_148":157},["D",1706084852609],{"_119":210,"_121":127,"_148":161},["D",1706084641643],{"_119":212,"_121":32,"_148":165},["D",1706084613318],{"_98":214,"_100":215},"28335263-7005-4b92-9a43-43ee823d4d43",{"_102":216,"_104":217,"_98":214,"_106":-5,"_107":-5,"_108":109,"_110":-5,"_111":138,"_113":218,"_115":26,"_116":218,"_117":219,"_119":220,"_121":195,"_123":26,"_124":32,"_125":32,"_126":127,"_128":32,"_129":32,"_130":32,"_131":-5,"_20":221,"_137":-5,"_138":-7,"_139":224,"_141":-5,"_142":225,"_144":226},"untitled_cyanOctopus","73c240af-48ad-4351-95f9-2584ec7b9fae","a068d2d2-1fda-4ce0-bfbc-c1213d651df1","import { email } from \"https://esm.town/v/std/email?v=9\";\n\n// Fetches a random joke.\nasync function fetchRandomJoke() {\n const response = await fetch(\n \"https://official-joke-api.appspot.com/random_joke\",\n );\n return response.json();\n}\n\nconst randomJoke = await fetchRandomJoke();\nconst setup = randomJoke.setup;\nconst punchline = randomJoke.punchline;\n\n// Sends an email with the joke.\nexport const emailRandomJoke = email({\n text: punchline,\n subject: setup,\n});",["D",1700721994332],{"_133":222,"_135":223},"shreyagarwal7924","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWVo1NkFsZ3I1OXlwd0dicXZ4dDZ2NDBLVFcifQ","// Fetches a random joke.","shreyagarwal7924/untitled_cyanOctopus",[227,229,231,233,235],{"_119":228,"_121":195,"_148":149},["D",1700721994332],{"_119":230,"_121":206,"_148":153},["D",1700721769058],{"_119":232,"_121":91,"_148":157},["D",1700720671400],{"_119":234,"_121":127,"_148":161},["D",1700720516260],{"_119":236,"_121":32,"_148":165},["D",1700720104700],"valCount","appName","Octopus Energy","routes/_app","routes/_app.examples","actionData","errors"]

Octopus Energy API examples & templates