Image to WebP Converter

\n \n {imageUrl && (\n

\n $\"Original\"$ \n

Original Size: {originalSize}

\n \n

\n )}\n {webpUrl && (\n

\n $\"WebP\"$ \n

WebP Size: {webpSize}

\n Download WebP\n

\n )}\n {(imageUrl || webpUrl) && (\n \n )}\n

\n View source on Val Town\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Image to WebP Converter\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 font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\ninput[type=\"file\"] {\n margin-bottom: 20px;\n}\nbutton, .download-btn {\n background-color: #4CAF50;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n text-decoration: none;\n display: inline-block;\n margin-top: 10px;\n margin-right: 10px;\n}\nbutton:hover, .download-btn:hover {\n background-color: #45a049;\n}\n.delete-btn {\n background-color: #f44336;\n}\n.delete-btn:hover {\n background-color: #d32f2f;\n}\n.preview {\n max-width: 100%;\n max-height: 300px;\n margin-top: 20px;\n}\n.footer {\n margin-top: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n}\n`;","createdAt",["D",1740189703104],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_127":128,"_129":130},"handle","AIWB","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycU91M051U0JoMFZtclVEaFY2MDNCUmlFbTYifQ","forkedVal",{"_112":133,"_127":134,"_98":99,"_117":135,"_136":-5},"b06984f2-87a0-11ef-adab-de64eea55b61","eligosmlytics",1,"prDisabledHint","interval","slug","AIWB/imageToWebPConverter","description","@jsxImportSource https://esm.sh/react","versions",[144],{"_117":31,"_145":-5,"_115":146,"_112":110},"prId",["D",1740189703104],"recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":154,"_127":128,"_140":141,"_98":99,"_161":31,"_162":31,"_50":51,"_163":164},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":66,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":155,"_117":31,"_118":26,"_119":31,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":-5,"_20":156,"_131":157,"_137":-7,"_138":139,"_140":141,"_142":158},["D",1740189703104],{"_127":128,"_129":130},{"_112":133,"_127":134,"_98":99,"_117":135,"_136":-5},[159],{"_117":31,"_145":-5,"_115":160,"_112":110},["D",1740189703104],"page","count","prs",[],"routes/_app","actionData","errors"]