/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [uploadedImage, setUploadedImage] = useState(null); const [generatedImage, setGeneratedImage] = useState(null); const [brightness, setBrightness] = useState(100); const [contrast, setContrast] = useState(100); const canvasRef = useRef(null); const handleImageUpload = async (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = async () => { setUploadedImage(reader.result); await uploadToServer(file); }; reader.readAsDataURL(file); }; const uploadToServer = async (file) => { const formData = new FormData(); formData.append('image', file); const response = await fetch('/upload', { method: 'POST', body: formData }); const result = await response.json(); console.log('Upload result:', result); }; const generateAIImage = async (prompt) => { const response = await fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const result = await response.json(); setGeneratedImage(result.imageUrl); }; const applyImageEffects = () => { if (!uploadedImage) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.filter = `brightness(${brightness}%) contrast(${contrast}%)`; ctx.drawImage(img, 0, 0); }; img.src = uploadedImage; }; return (

🖼️ PhotoMagic

{uploadedImage && (

Image Editor

Brightness: {brightness}% { setBrightness(e.target.value); applyImageEffects(); }} /> Contrast: {contrast}% { setContrast(e.target.value); applyImageEffects(); }} />

)}

AI Image Generation

{ if (e.key === 'Enter') { generateAIImage(e.target.value); } }} />

{generatedImage && (

Generated Image

)} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); if (request.method === 'POST') { const url = new URL(request.url); if (url.pathname === '/upload') { const formData = await request.formData(); const imageFile = formData.get('image'); const arrayBuffer = await imageFile.arrayBuffer(); const key = `image_${Date.now()}.${imageFile.name.split('.').pop()}`; await blob.set(key, new Uint8Array(arrayBuffer)); return new Response(JSON.stringify({ message: 'Upload successful', key }), { headers: { 'Content-Type': 'application/json' } }); } if (url.pathname === '/generate') { const { prompt } = await request.json(); const response = await openai.images.generate({ model: "dall-e-3", prompt: prompt, n: 1, size: "1024x1024" }); const imageUrl = response.data[0].url; return new Response(JSON.stringify({ imageUrl }), { headers: { 'Content-Type': 'application/json' } }); } } return new Response(` PhotoMagic

`, { headers: { 'Content-Type': 'text/html' } }); }

photoEditingAIApp