Random Image Placement

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label","children",[],[155],{"_104":175,"_95":176,"_156":177,"_158":-5,"_159":141,"_160":178,"_162":118,"_106":179,"_100":180,"_165":181,"_167":182,"_169":22,"_170":-5,"_171":183,"_98":184},"965cda56-e56e-11ef-911b-e6cdfca9ef9f","constants","1f18dcba-e56e-11ef-ad4e-e6cdfca9ef9f",11,["D",1738944860352],4,"script","export const DATABASE_TABLENAME = \"VALENTINES_DAY_CARD_IMGS\";",[],[176],{"_104":186,"_95":187,"_156":188,"_158":-5,"_159":141,"_160":189,"_162":22,"_106":190,"_100":191,"_165":181,"_167":192,"_169":22,"_170":-5,"_171":193,"_98":194},"902355aa-e593-11ef-a349-e6cdfca9ef9f","frontend_card","f809273e-e585-11ef-971f-e6cdfca9ef9f",86,["D",1738960741288],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction RandomPositionImage({ imageUrl = \"https://maxm-imggenurl.web.val.run/random-colorful-abstract-shape\" }) {\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n useEffect(() => {\n const maxWidth = window.innerWidth - 300;\n const maxHeight = window.innerHeight - 300;\n setPosition({\n top: Math.random() * maxHeight,\n left: Math.random() * maxWidth,\n });\n }, []);\n\n return (\n \n \n \n );\n}\n\nfunction App() {\n const getUrls = async () => {\n try {\n const response = await fetch(\"/image\", {\n method: \"GET\",\n });\n const urlResponse = await response.json();\n console.log(\"urlresponse\", urlResponse);\n return urlResponse.urls;\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n const [urls, setUrls] = useState([]);\n\n useEffect(() => {\n getUrls().then(urls => setUrls(urls || []));\n }, []);\n\n // return (\n // \n // \n // \n // View Source\n // \n // \n // );\n return (\n

\n {urls.map((url, index) => )}\n

\n );\n}\n\n// createRoot(document.getElementById(\"root\")).render();",[],[187],{"_104":196,"_95":197,"_156":198,"_158":-5,"_159":141,"_160":199,"_162":22,"_106":200,"_100":201,"_165":181,"_167":202,"_169":22,"_170":-5,"_171":203,"_98":204},"71fe9314-e67e-11ef-bc25-e6cdfca9ef9f","get_images","0b8c1ee6-e56e-11ef-b8df-e6cdfca9ef9f",97,["D",1739061622449],32,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nexport async function getImages(type: string, count: number): Promise {\n // Query to select random rows of the specified type\n const result = await sqlite.execute(\n `\n SELECT path \n FROM ${DATABASE_TABLENAME} \n WHERE type = ? \n ORDER BY RANDOM() \n LIMIT ?\n `,\n [type, count],\n );\n\n let images: string[] = [];\n console.log(result.rows);\n for (const row of result.rows) {\n const blobUrl = await blob.get(row[\"path\"] as string);\n images.push(blobUrl.url);\n }\n\n return images;\n}\n\nconsole.log(await getImages(\"image\", 10));",[],[197],{"_104":206,"_95":99,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":207,"_100":208,"_165":166,"_167":209,"_169":22,"_170":-5,"_171":210,"_98":211},"f8c28fbc-e67f-11ef-9d46-e6cdfca9ef9f",["D",1739062278031],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(`__public/${filename}`, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://shouser-blob_admin.web.val.run/api/public/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, publicUrl],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",[],[99],"files",[153,174,185,195,205],"counts",{"_216":217,"_218":219,"_220":217,"_221":222},"pulls",1,"branches",3,"forks","envVars",{"_223":32,"_224":32},"count","emptyCount","contents",[],"file",{"_104":206,"_95":99,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":229,"_100":208,"_165":166,"_167":209,"_169":22,"_170":-5,"_98":230},["D",1739062278031],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":239,"_151":244,"_212":260,"_227":261,"_225":263,"_264":-5,"_265":-5,"_266":-5,"_267":-5,"_268":269},{"_104":105,"_95":96,"_106":240,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":118,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":241,"_135":242,"_138":243,"_150":22},["D",1738944347583],{"_93":94,"_133":134},{"_93":94,"_137":134,"_14":114},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[245,248,251,254,257],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":22,"_106":163,"_100":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":246,"_98":247},[],[155],{"_104":175,"_95":176,"_156":177,"_158":-5,"_159":141,"_160":178,"_162":118,"_106":179,"_100":180,"_165":181,"_167":182,"_169":22,"_170":-5,"_171":249,"_98":250},[],[176],{"_104":186,"_95":187,"_156":188,"_158":-5,"_159":141,"_160":189,"_162":22,"_106":190,"_100":191,"_165":181,"_167":192,"_169":22,"_170":-5,"_171":252,"_98":253},[],[187],{"_104":196,"_95":197,"_156":198,"_158":-5,"_159":141,"_160":199,"_162":22,"_106":200,"_100":201,"_165":181,"_167":202,"_169":22,"_170":-5,"_171":255,"_98":256},[],[197],{"_104":206,"_95":99,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":207,"_100":208,"_165":166,"_167":209,"_169":22,"_170":-5,"_171":258,"_98":259},[],[99],[245,248,251,254,257],{"_104":206,"_95":99,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":229,"_100":208,"_165":166,"_167":209,"_169":22,"_170":-5,"_98":262},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

shouser

valentines_day_card_generator