Tool to convert HTML to blocks

.gitignore

@@ -1 +1,2 @@
-instructions.md
+instructions.md
+.DS_Store

app.py

@@ -10,6 +10,7 @@ from tools.wordpress_post import WordPressPostTool
 from tools.blog_generator import BlogGeneratorTool
 from tools.visit_webpage import VisitWebpageTool
 from tools.web_search import DuckDuckGoSearchTool
+from tools.html_to_wp_blocks import HTMLToWPBlocksTool
 
 from Gradio_UI import GradioUI
 
@@ -156,6 +157,7 @@ with open("prompts.yaml", 'r') as stream:
 # Initialize WordPress tools
 wordpress_post = WordPressPostTool(wordpress_credentials)
 blog_generator = BlogGeneratorTool(model=model)
+html_to_blocks = HTMLToWPBlocksTool()
 
 agent = CodeAgent(
     model=model,
@@ -167,6 +169,7 @@ agent = CodeAgent(
         # get_weather,
         wordpress_post,
         blog_generator,
+        html_to_blocks,
         visit_webpage,
         web_search
     ],
@@ -185,15 +188,18 @@ prompt_templates["system_prompt"] += """
 You are also capable of managing a WordPress blog through the following tools:
 - wordpress_post: Publishes posts to WordPress
 - blog_generator: Generates AI-written blog posts
+- html_to_blocks: Converts HTML content to WordPress Gutenberg blocks format
 
 Always check credentials before attempting to post content.
 
 Example WordPress workflow:
 1. Set credentials (first time only)
 2. Generate blog content
-3. Publish to WordPress
+3. Convert HTML content to WordPress blocks format
+4. Publish blocks-formatted content to WordPress
 
 Remember to:
+- ALWAYS convert HTML content to WordPress blocks format before publishing
 - Validate WordPress credentials before posting
 - Generate high-quality, relevant content
 - Handle errors gracefully

requirements.txt

@@ -4,6 +4,7 @@ requests>=2.31.0
 duckduckgo_search>=4.1.0
 pandas>=2.0.0
 pytz>=2024.1
-pyyaml>=6.0.1
+pyyaml>=6.0.7
 gradio>=5.15.0
-python-dotenv>=1.0.0
+python-dotenv>=1.0.0
+beautifulsoup4>=4.12.0

tools/html_to_wp_blocks.py

@@ -0,0 +1,111 @@
+from bs4 import BeautifulSoup
+import json
+from typing import Dict, List, Optional
+from smolagents.tools import Tool
+
+
+class HTMLToWPBlocksTool(Tool):
+    name = "html_to_wp_blocks"
+    description = "Transforms HTML content into WordPress Gutenberg blocks"
+    inputs = {
+        'html_content': {'type': 'string', 'description': 'The HTML content to transform'},
+        'preserve_classes': {
+            'type': 'boolean',
+            'description': 'Whether to preserve HTML class attributes as block attributes',
+            'nullable': True
+        }
+    }
+    output_type = "string"
+
+    # Mapping of HTML elements to WordPress block names
+    BLOCK_MAPPINGS = {
+        'p': 'core/paragraph',
+        'h1': 'core/heading',
+        'h2': 'core/heading',
+        'h3': 'core/heading',
+        'h4': 'core/heading',
+        'h5': 'core/heading',
+        'h6': 'core/heading',
+        'ul': 'core/list',
+        'ol': 'core/list',
+        'li': 'core/list-item',
+        'img': 'core/image',
+        'figure': 'core/image',
+        'blockquote': 'core/quote',
+        'pre': 'core/code',
+        'code': 'core/code',
+        'table': 'core/table',
+    }
+
+    def __init__(self):
+        super().__init__()
+
+    def _get_block_attributes(self, element) -> Dict:
+        """Extract relevant attributes from HTML element for block attributes."""
+        attrs = {}
+
+        # Handle heading levels
+        if element.name.startswith('h') and element.name[1].isdigit():
+            attrs['level'] = int(element.name[1])
+
+        # Handle alignment
+        if 'class' in element.attrs:
+            classes = element['class']
+            alignments = ['alignleft', 'alignright',
+                          'aligncenter', 'alignwide', 'alignfull']
+            for align in alignments:
+                if align in classes:
+                    attrs['align'] = align.replace('align', '')
+
+        # Handle images
+        if element.name == 'img':
+            attrs['url'] = element.get('src', '')
+            if element.get('alt'):
+                attrs['alt'] = element['alt']
+
+        return attrs
+
+    def _element_to_block(self, element, preserve_classes: bool = False) -> str:
+        """Convert a single HTML element to a WordPress block."""
+        if element.name not in self.BLOCK_MAPPINGS:
+            return str(element)
+
+        block_name = self.BLOCK_MAPPINGS[element.name]
+        attrs = self._get_block_attributes(element)
+
+        if preserve_classes and 'class' in element.attrs:
+            attrs['className'] = ' '.join(element['class'])
+
+        # Handle nested content
+        inner_content = element.decode_contents().strip() if element.contents else ""
+
+        # Create block comment wrapper
+        block_start = f'<!-- wp:{block_name}'
+        if attrs:
+            block_start += f' {json.dumps(attrs)}'
+        block_start += ' -->'
+
+        block_end = f'<!-- /wp:{block_name} -->'
+
+        return f'{block_start}\n{inner_content}\n{block_end}'
+
+    def forward(self, html_content: str, preserve_classes: bool = False) -> str:
+        """Transform HTML content into WordPress blocks
+
+        Args:
+            html_content: The HTML content to transform
+            preserve_classes: Whether to preserve HTML class attributes
+
+        Returns:
+            String containing the WordPress block representation
+        """
+        soup = BeautifulSoup(html_content, 'html.parser')
+        blocks = []
+
+        # Process each top-level element
+        for element in soup.find_all(recursive=False):
+            if element.name:  # Skip NavigableString objects
+                block = self._element_to_block(element, preserve_classes)
+                blocks.append(block)
+
+        return '\n\n'.join(blocks)