{title}

\n \n {items.map((item, index) =>

{item}

)}\n \n

\n );\n}\n\nfunction AdditionalInfoSection({ info }) {\n return (\n

📝 Additional Information

\n {Object.entries(info).map(([key, value]) => (\n

\n {key}: {value}\n

\n ))}\n

\n );\n}\n\nfunction UploadedImage({ imageUrl, fileName }) {\n return (\n

📸 Uploaded Image

\n \n

{fileName}

\n );\n}\n\nfunction App() {\n const [recipe, setRecipe] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [selectedFileName, setSelectedFileName] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(null);\n\n const handleImageUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n // Validate file size (limit to 10MB)\n if (file.size > 10 * 1024 * 1024) {\n setError(\"File is too large. Maximum file size is 10MB.\");\n return;\n }\n\n // Create object URL for image preview\n const objectUrl = URL.createObjectURL(file);\n setImageUrl(objectUrl);\n\n setSelectedFileName(file.name);\n setIsLoading(true);\n setError(null);\n\n const formData = new FormData();\n formData.append(\"image\", file);\n\n try {\n const response = await fetch(\"/extract-recipe\", {\n method: \"POST\",\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(\"Recipe extraction failed\");\n }\n\n const recipeData = await response.json();\n setRecipe(recipeData);\n } catch (err) {\n setError(err.message);\n // Clean up object URL if there's an error\n URL.revokeObjectURL(objectUrl);\n setImageUrl(null);\n } finally {\n setIsLoading(false);\n }\n };\n\n // Clean up object URL when component unmounts or image changes\n React.useEffect(() => {\n return () => {\n if (imageUrl) {\n URL.revokeObjectURL(imageUrl);\n }\n };\n }, [imageUrl]);\n\n return (\n

🍽️ Recipe Image Extractor

Upload an image of a recipe to extract its details (max 10MB)

\n\n

\n \n \n {selectedFileName || \"Choose Image\"}\n \n

\n\n {isLoading && (\n

\n \n

Extracting recipe... 🔍

\n )}\n\n {error && (\n

\n ❌ {error}\n

\n )}\n\n {(recipe || imageUrl) && (\n <>\n <>\n {imageUrl && (\n \n )}\n \n

\n {recipe && (\n <>\n

{recipe.title}

\n {Object.entries(recipe.sections).map(([sectionName, sectionData]) => (\n \n ))}\n

\n\n {recipe.additionalInfo && Object.keys(recipe.additionalInfo).length > 0 && (\n \n )}\n

\n \n )}\n

\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) {\n const app = new Hono();\n\n app.post(\"/extract-recipe\", async (c) => {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const formData = await c.req.formData();\n const imageFile = formData.get(\"image\");\n\n if (!imageFile || !(imageFile instanceof File)) {\n return c.json({ error: \"No image uploaded\" }, 400);\n }\n\n // Additional file size validation on server\n if (imageFile.size > 10 * 1024 * 1024) {\n return c.json({ error: \"File is too large. Maximum file size is 10MB.\" }, 400);\n }\n\n const imageBytes = await imageFile.arrayBuffer();\n const imageType = getImageType(new Uint8Array(imageBytes));\n\n if (!imageType) {\n return c.json({ error: \"Unsupported image format\" }, 400);\n }\n\n // Use a more memory-efficient base64 conversion\n const base64Image = arrayBufferToBase64(imageBytes);\n\n try {\n const response = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: `Extract the recipe from this image with comprehensive details. \n IMPORTANT INSTRUCTIONS FOR RESPONSE FORMAT:\n - Start with the recipe title\n - For EACH section (Ingredients, Instructions, etc.), use the format:\n SECTION_NAME||| item1 ||| item2 ||| item3\n - Use ||| as a strict delimiter between section name and items\n - Use ||| to separate individual items within a section\n - ADDITIONAL CONTEXT SECTION: Extract and summarize any extra information\n not directly part of the recipe sections. Use the format:\n ADDITIONAL_INFO||| Key1: Value1 ||| Key2: Value2\n - Possible additional info to extract:\n * Cooking time\n * Preparation time\n * Difficulty level\n * Serving size\n * Cuisine type\n * Dietary information\n * Chef/Source notes\n * Storage instructions\n * Variations or tips\n - Be concise, precise, and comprehensive\n Example format:\n Chocolate Chip Cookies\n Ingredients||| Flour ||| Sugar ||| Chocolate Chips\n Instructions||| Mix dry ingredients ||| Add wet ingredients ||| Bake at 350°F\n ADDITIONAL_INFO||| Prep Time: 15 mins ||| Cook Time: 12 mins ||| Servings: 24 cookies`,\n },\n {\n type: \"image_url\",\n image_url: { url: `data:image/${imageType};base64,${base64Image}` },\n },\n ],\n },\n ],\n max_tokens: 1000,\n });\n\n const recipeText = response.choices[0].message.content;\n const parsedRecipe = parseRecipe(recipeText);\n\n return c.json(parsedRecipe);\n } catch (error) {\n console.error(\"Recipe extraction error:\", error);\n return c.json({ error: \"Failed to extract recipe\" }, 500);\n }\n });\n\n app.get(\"/\", (c) => {\n return c.html(`\n \n \n Recipe Image Extractor\n \n \n \n \n

\n \n \n \n \n `);\n });\n\n return app.fetch(request);\n}\n\n// More memory-efficient base64 conversion\nfunction arrayBufferToBase64(buffer: ArrayBuffer): string {\n const uint8Array = new Uint8Array(buffer);\n const chunks = [];\n const chunkSize = 0x8000; // Chunk size to prevent stack overflow\n\n for (let i = 0; i < uint8Array.length; i += chunkSize) {\n chunks.push(String.fromCharCode.apply(null, uint8Array.subarray(i, i + chunkSize)));\n }\n\n return btoa(chunks.join(\"\"));\n}\n\nfunction getImageType(bytes: Uint8Array): string | null {\n // JPEG signature\n if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) {\n return \"jpeg\";\n }\n\n // PNG signature\n if (\n bytes[0] === 0x89\n && bytes[1] === 0x50\n && bytes[2] === 0x4E\n && bytes[3] === 0x47\n && bytes[4] === 0x0D\n && bytes[5] === 0x0A\n && bytes[6] === 0x1A\n && bytes[7] === 0x0A\n ) {\n return \"png\";\n }\n\n // GIF signatures\n if (\n (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38\n && (bytes[4] === 0x37 || bytes[4] === 0x39) && bytes[5] === 0x61)\n ) {\n return \"gif\";\n }\n\n // WebP signature\n if (\n bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46\n && bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50\n ) {\n return \"webp\";\n }\n\n return null;\n}\n\nfunction parseRecipe(recipeText: string) {\n // Split the text into lines\n const lines = recipeText.split(\"\\n\").filter(line => line.trim() !== \"\");\n\n // First line is the title\n const title = lines[0].trim();\n\n // Initialize sections and additional info objects\n const sections = {};\n const additionalInfo = {};\n\n // Process remaining lines\n for (let i = 1; i < lines.length; i++) {\n const line = lines[i].trim();\n\n // Check if the line contains a section delimiter\n if (line.includes(\"|||\")) {\n const [sectionName, ...sectionItems] = line.split(\"|||\").map(item => item.trim());\n\n // Check if it's the additional info section\n if (sectionName === \"ADDITIONAL_INFO\") {\n sectionItems.forEach(infoItem => {\n const [key, value] = infoItem.split(\":\").map(item => item.trim());\n if (key && value) {\n additionalInfo[key] = value;\n }\n });\n } else {\n // Remove any empty items and clean up\n const cleanedItems = sectionItems\n .filter(item => item.trim() !== \"\")\n .map(item => item.trim());\n\n if (cleanedItems.length > 0) {\n sections[sectionName] = cleanedItems;\n }\n }\n }\n }\n\n // Fallback if no sections found\n if (Object.keys(sections).length === 0) {\n sections[\"Details\"] = lines.slice(1);\n }\n\n return {\n title,\n sections,\n additionalInfo,\n };\n}\n\nconst css = `\nh1, h2 {\n text-align: center;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.file-input-label {\n display: block;\n width: 100%;\n padding: 10px;\n text-align: center;\n background-color: var(--primary);\n color: white;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.file-input-label:hover {\n background-color: var(--primary-hover);\n}\n\n.loading {\n text-align: center;\n margin: 20px 0;\n}\n\n.error {\n color: var(--del-color);\n text-align: center;\n margin: 20px 0;\n}\n\n.recipe-content {\n display: block;\n}\n\n.uploaded-image-container {\n background-color: var(--background-color);\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n text-align: center;\n}\n\n.uploaded-image {\n max-width: 100%;\n max-height: 500px;\n object-fit: contain;\n border-radius: 8px;\n margin-bottom: 10px;\n}\n\n.image-filename {\n font-size: 0.9em;\n color: var(--muted-color);\n}\n\n.recipe-details {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n}\n\n.recipe-sections {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.recipe-section {\n background-color: var(--background-color);\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.recipe-section h3 {\n margin-bottom: 10px;\n border-bottom: 2px solid var(--primary);\n padding-bottom: 5px;\n}\n\n.additional-info-section {\n background-color: var(--background-color);\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n margin-top: 20px;\n}\n\n.additional-info-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n}\n\n.additional-info-item {\n background-color: var(--card-background-color);\n padding: 10px;\n border-radius: 5px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: var(--muted-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .recipe-content {\n grid-template-columns: 1fr;\n }\n\n .recipe-sections, .additional-info-content {\n grid-template-columns: 1fr;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Skeye/extractRecipeAI/code/main.tsx","extension","actionData","errors"]