Update app.py

app.py

@@ -126,22 +126,81 @@ WRITING STYLE:
 - Write in {pov} person consistently
 - Maintain {tone.lower()} tone throughout
 
-TECHNICAL SEO ELEMENTS:
-- Include relevant HTML tags (H1, H2, H3, strong, em)
-- Use bullet points and numbered lists for readability
-- Include natural keyword density (1-2%)
-- Add semantic keywords and LSI terms
-- Structure for featured snippets
+HTML STRUCTURE & TECHNICAL REQUIREMENTS:
+CRITICAL: Follow these HTML best practices exactly:
+
+1. **Clean HTML Structure:**
+   - Use semantic HTML5 elements: <section>, <article>, <header>
+   - Wrap major content sections in <section> tags
+   - No placeholder text for images/videos - use HTML comments instead
+   - Clean, professional code structure
+
+2. **Schema Markup:**
+   - Complete FAQPage schema with proper opening/closing divs
+   - Include at least 5-8 FAQ items with full schema markup
+   - Ensure all schema containers are properly closed
+
+3. **Content Organization:**
+   - No inline questions within list items
+   - Separate Q&A content into dedicated paragraphs or FAQ section
+   - Use proper paragraph structure for readability
+
+4. **Media Placeholders:**
+   - Replace "(Include photos here)" with: <!-- Step-by-step photos go here -->
+   - Replace "(Embed video)" with: <!-- Video tutorial embed -->
+   - Use commented HTML examples for future media
+
+5. **Links and References:**
+   - Use real, working links when possible
+   - If using example.com, make it clear it's a placeholder
+   - Include rel="noopener" for external links
+
+6. **Accessibility:**
+   - Include lang="en" in html tag
+   - Prepare alt text suggestions in comments for images
+   - Use semantic heading hierarchy
+
+EXAMPLE HTML STRUCTURE TO FOLLOW:
+```html
+<section>
+  <h2>Section Title</h2>
+  <p>Content here...</p>
+  
+  <h3>Subsection</h3>
+  <ol>
+    <li>Step one</li>
+    <li>Step two</li>
+  </ol>
+  
+  <p><strong>Common Question:</strong> Answer here...</p>
+  <!-- Step-by-step photos go here -->
+  <!-- <img src="path/image.jpg" alt="Description"> -->
+</section>
+
+<section>
+  <h2>FAQ Section</h2>
+  <div itemscope itemtype="https://schema.org/FAQPage">
+    <div itemscope itemtype="https://schema.org/Question">
+      <h3 itemprop="name">Question?</h3>
+      <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
+        <p itemprop="text">Answer here.</p>
+      </div>
+    </div>
+    <!-- Add 5-8 more FAQ items -->
+  </div> <!-- Close FAQPage -->
+</section>
+```
 
 OUTPUT FORMAT:
 Provide the complete article with:
 1. Meta title and description at the top
-2. Full HTML-formatted article with proper heading tags
-3. Natural integration of provided internal links
-4. FAQ section with schema-friendly format
-5. Conclusion with engagement elements
+2. Full HTML-formatted article with proper semantic structure
+3. Complete FAQ section with 6-8 questions and proper schema
+4. Clean, professional HTML with no placeholder text
+5. Commented placeholders for media elements
+6. Natural integration of provided internal links
 
-Generate the article now, ensuring it's comprehensive, valuable, and optimized for 2025 SEO standards in the fermentation niche.
+Generate the article now, ensuring it follows all HTML best practices and is optimized for 2025 SEO standards.
 """
         return prompt
     
@@ -228,20 +287,33 @@ Format as a numbered list.
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Generated SEO Article</title>
+    <meta name="description" content="Generated fermentation SEO article optimized for 2025 standards">
     <style>
-        body {{ font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #333; }}
-        h1 {{ color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }}
-        h2 {{ color: #34495e; margin-top: 30px; }}
-        h3 {{ color: #7f8c8d; }}
-        .meta {{ background: #ecf0f1; padding: 15px; margin: 20px 0; border-radius: 5px; }}
-        .readability {{ background: #e8f5e8; padding: 15px; margin: 20px 0; border-radius: 5px; }}
-        .titles {{ background: #fff3cd; padding: 15px; margin: 20px 0; border-radius: 5px; }}
-        ul, ol {{ margin: 15px 0; }}
-        li {{ margin: 5px 0; }}
+        body {{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; line-height: 1.7; color: #333; background: #fafafa; }}
+        .container {{ background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }}
+        h1 {{ color: #2c3e50; border-bottom: 3px solid #27ae60; padding-bottom: 15px; font-size: 2.2em; }}
+        h2 {{ color: #34495e; margin-top: 35px; margin-bottom: 15px; font-size: 1.6em; border-left: 4px solid #27ae60; padding-left: 15px; }}
+        h3 {{ color: #7f8c8d; margin-top: 25px; font-size: 1.3em; }}
+        section {{ margin: 30px 0; padding: 20px 0; border-bottom: 1px solid #eee; }}
+        section:last-child {{ border-bottom: none; }}
+        .meta-info {{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; margin: 20px 0; border-radius: 8px; }}
+        .readability {{ background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; padding: 20px; margin: 20px 0; border-radius: 8px; }}
+        .titles {{ background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); padding: 20px; margin: 20px 0; border-radius: 8px; }}
+        ul, ol {{ margin: 20px 0; padding-left: 25px; }}
+        li {{ margin: 8px 0; }}
+        .faq-section {{ background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; }}
+        .faq-item {{ margin: 15px 0; }}
+        a {{ color: #27ae60; text-decoration: none; font-weight: 500; }}
+        a:hover {{ text-decoration: underline; }}
+        code {{ background: #f1f2f6; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; }}
+        .highlight {{ background: #fff3cd; padding: 2px 6px; border-radius: 3px; }}
+        .schema-markup {{ background: #e3f2fd; border-left: 4px solid #2196f3; padding: 15px; margin: 15px 0; }}
     </style>
 </head>
 <body>
-    {final_output.replace(chr(10), '<br>').replace('**', '<strong>').replace('*', '<em>')}
+    <div class="container">
+        {final_output}
+    </div>
 </body>
 </html>
 """
@@ -408,14 +480,21 @@ def create_interface():
         
         gr.Markdown("""
         ---
-        ### 💡 Tips for Best Results:
+        ### 💡 **Updated for Clean HTML Generation:**
+        - ✅ **Semantic HTML5** - Uses proper `<section>` tags and structure
+        - ✅ **Complete Schema Markup** - Properly closed FAQ schema with 6-8 questions
+        - ✅ **No Placeholder Text** - Clean HTML comments for media placeholders
+        - ✅ **Accessibility Ready** - Proper lang attributes and semantic structure
+        - ✅ **Professional Code** - No inline Q&A in lists, clean paragraph structure
+        
+        ### 🎯 **Tips for Best Results:**
         - Use specific fermentation-related keywords in your SEO plan
-        - Include 2-4 internal links with relevant anchor text
-        - Add 5-10 related keywords for semantic SEO
+        - Include 2-4 internal links with relevant anchor text (keyword:link format)
+        - Add 5-10 related keywords for semantic SEO enhancement
         - Longer content typically performs better for competitive keywords
-        - Review the readability score and adjust if needed for your audience
+        - Generated HTML is production-ready with proper schema markup
         
-        **Powered by Gemini 1.5 Pro API** | Built for Fermentation Content Creators
+        **Powered by Gemini 1.5 Pro API** | Built for Professional Fermentation Content
         """)
     
     return app
@@ -427,5 +506,5 @@ if __name__ == "__main__":
         #server_name="0.0.0.0",
         #server_port=7860,
         #share=True,
-        show_error=True
+        #show_error=True
     )