tag\n const titleMatch = htmlContent.match(/<title>(.*?)<\\/title>/i);\n if (titleMatch && titleMatch[1]) {\n extractedTitle = titleMatch[1].trim();\n }\n\n // If no title found, try to extract from first <h1> tag\n if (!extractedTitle) {\n const h1Match = htmlContent.match(/<h1[^>]*>(.*?)<\\/h1>/i);\n if (h1Match && h1Match[1]) {\n // Remove any HTML tags inside the h1\n extractedTitle = h1Match[1].replace(/<[^>]*>/g, \"\").trim();\n }\n }\n\n // Save the generated blog to the database with images JSON\n await updateGeneratedBlog(blogId, {\n summary,\n originalUrl,\n ageRange,\n htmlContent,\n blog_title: extractedTitle,\n });\n\n // Log successful save to database\n console.log(`Successfully saved blog with ID: ${blogId}`);\n\n return {\n id: blogId,\n html: htmlContent,\n };\n } catch (error) {\n console.error(\"Error generating HTML blog:\", JSON.stringify(error));\n return generateFallbackHtml(summary, originalUrl, ageRange, blogId);\n }\n}\n\n/**\n * Creates a prompt for HTML generation\n * @param {string} summary - The summarized content\n * @param {string} originalUrl - The original article URL\n * @param {string} ageRange - The age range of the child\n * @param {Array<string>} images - Array of image URLs from the original article\n * @returns {string} - The prompt for HTML generation\n */\nfunction createHtmlGenerationPrompt(\n summary,\n originalUrl,\n ageRange,\n images = [],\n blogId,\n) {\n // Format the images as a string if there are any\n const imagesSection = images.length > 0\n ? `\\nImages from the original article (use these in your HTML):\\n${images.join(\"\\n\")}`\n : \"\\nNo images available from the original article.\";\n\n const navigationSection = `\n <ul class=\"flex justify-between gap-2 pl-16 pr-16 pt-10\">\n <li>\n <a\n href=\"/\"\n class=\"rounded hover:bg-purple-900 text-blue-300 hover:text-white transition-colors\"\n >\n Home\n </a>\n </li>\n <li>\n <a\n href=\"/documentation\"\n class=\"rounded hover:bg-purple-900 text-blue-300 hover:text-white transition-colors\"\n >\n Doc's\n </a>\n </li>\n <li>\n <a\n href=\"/blogs\"\n class=\"rounded hover:bg-purple-900 text-blue-300 hover:text-white transition-colors\"\n >\n Saved Blogs\n </a>\n </li>\n <li>\n <a\n href=\"https://www.val.town/x/smirfolio/petitPrince\"\n target=\"_blank\"\n className=\" rounded hover:bg-purple-900 text-blue-300 hover:text-white transition-colors\"\n >\n Fork me on val.town\n </a>\n </li>\n </ul>\n `;\n const siteBaniere = `\n <header class=\"flex flex-col items-center justify-center py-12\">\n <div class=\"hero-image mb-6\">\n <img\n src=\"/static/petitprince3.svg\"\n style=\"max-width: 600px; margin: auto\"\n alt=\"Petit Prince\"\n class=\"w-64 h-auto mx-auto\"\n />\n </div>\n <h1 class=\"text-5xl font-bold mb-6 text-center w-full\">\n Petit Prince\n </h1>\n <p class=\"text-3xl text-blue-200 text-center w-full mx-auto max-w-2xl\">\n A child-friendly article summarizer\n </p>\n </header>\n `;\n return `Generate a complete HTML page for a child-friendly blog post based on this summarized article.\n The blog should be visually appealing for children in the \" ${ageRange}\" age range.\n Include all necessary HTML, CSS, and JavaScript in a single complete HTML file.\n Use a dark theme with blue and purple colors.\n Make the design fun and engaging for children.\n Include the Petit Prince theme in the design.\n \n Original Article URL: ${originalUrl}\n Content:\n ${summary}\n ${imagesSection}\n\n by analyzing the bellow content of the original article. find a undestandable title for the blog.\n The HTML should include:\n 1. A responsive, child-friendly design starting with a navigation ul section : ${navigationSection} then the site banniere : ${siteBaniere}, then a h2 undestandable title for the article\n 2. an hero section with appended images that was extracted from the original article, don\\'t use images that are too height and not sweetable for hero\n 3. Use the full markdown content to generate the blog html page, don't summarize or even troncate the <Content> \n 4. a well centred contend easy to read by a kids\n 5. Appropriate font sizes 20px and colors for children using the google font : Ysabeau Infant Regular 400 at 32px\n 6. A share button at the bottom well centred in the footer page\n 7. THE SHARE BUTTON MUST BE : <a href=\"fb-messenger://share/?link=https://petitprince.val.run/b/${blogId}&app_id=123456789\">Share in messenger</a> use responsive design with tailwindcss\n 8. A link to the original article centred in the footer as well with a nice font and color <a href=\"${originalUrl}\">Read Original Article</a> use responsive design with tailwindcss\n 9. The Petit Prince theme throughout the design\n 10. never put wihte background in any content or section\n 11. img tags images must have no more than 800px width \n 12. add the footer <div class=\"footer\"><p>Made with ❤️ for curious young minds</p> <p>© 2025 <a href=\"https://petitprince.val.run/\">Petit prince summarizer AI</a> All rights reserved.</p></div> at the end of each generated page\n \n Wrap your code in a single \\`\\`\\`html code fence.`;\n}\n\n/**\n * Calls the Llama model to generate HTML\n * @param {string} prompt - The prompt for HTML generation\n * @returns {Promise<string>} - The generated HTML\n */\nasync function callLlamaModelForHtml(prompt) {\n try {\n const chatCompletion = await client.chatCompletion({\n provider: \"cerebras\",\n model: \"meta-llama/Llama-4-Scout-17B-16E-Instruct\",\n messages: [\n {\n role: \"system\",\n content: `You are an advanced AI coding assistant that generates websites for children.\n Include all necessary HTML, CSS, and JavaScript in a single complete HTML file.\n Make the app look like a polished, pretty, full website for children.\n Use a dark theme with blue and purple colors.\n Include the Petit Prince theme in the design.\n Keep the chatter to an absolute minimum.\n Only respond with the HTML code, nothing else.`,\n },\n {\n role: \"user\",\n content: prompt,\n },\n ],\n max_tokens: 2000,\n temperature: 0.7,\n top_p: 0.95,\n });\n\n // Extract HTML from the response\n return extractHtmlFromResponse(chatCompletion.choices[0].message.content);\n } catch (error) {\n console.error(\"Error calling Llama model for HTML:\", JSON.stringify(error));\n throw error;\n }\n}\n\n/**\n * Extracts HTML from the model response\n * @param {string} response - The model's response\n * @returns {string} - The extracted HTML\n */\nfunction extractHtmlFromResponse(response) {\n console.log(\"Extracting HTML from model response\");\n\n // Try to extract HTML from code fence\n const htmlMatch = response.match(/```html\\n([\\s\\S]*?)\\n```/);\n if (htmlMatch) {\n console.log(\"Found HTML in code fence\");\n return htmlMatch[1].trim();\n }\n\n // If no code fence, try to extract just the HTML\n const htmlStartIndex = response.indexOf(\"<!DOCTYPE html>\");\n if (htmlStartIndex !== -1) {\n console.log(\"Found HTML starting with DOCTYPE\");\n return response.substring(htmlStartIndex);\n }\n\n // Check for other HTML indicators\n if (response.includes(\"<html\") || response.includes(\"<body\")) {\n console.log(\"Found HTML tags but no DOCTYPE\");\n // Try to construct a proper HTML document\n if (!response.includes(\"<!DOCTYPE html>\")) {\n return `<!DOCTYPE html>\\n${response}`;\n }\n return response;\n }\n\n // If all else fails, return the whole response\n console.log(\"No HTML structure found, returning raw response\");\n return response;\n}\n\n/**\n * Generates a fallback HTML page when the model fails\n * @param {string} summary - The summarized content\n * @param {string} originalUrl - The original article URL\n * @param {string} ageRange - The age range of the child\n * @returns {string} - The fallback HTML\n */\nfunction generateFallbackHtml(summary, originalUrl, ageRange, blogId) {\n const paragraphs = summary\n .split(\"\\n\")\n .filter((para) => para.trim() !== \"\")\n .map((para) => `<p>${para}</p>`)\n .join(\"\");\n\n return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Petit Prince

Key	Description
CEREBRAS_KEY_HF_API	Cerebras apikey
HUGGINGFACE_API_KEY	HaggingFace inferenc api

smirfolio

petitPrince

Environment variables