Update app.py

app.py

@@ -9,6 +9,150 @@ from dotenv import load_dotenv
 import gradio as gr
 import base64
 from io import BytesIO
+import html
+
+# Quill.js Editor Implementation
+class QuillEditor(gr.components.Component):
+    """Custom Quill.js rich text editor component"""
+    
+    def __init__(self, value="", **kwargs):
+        super().__init__(value=value, **kwargs)
+    
+    def get_config(self):
+        return {
+            "value": self.value,
+            **super().get_config()
+        }
+    
+    @staticmethod
+    def update(value=None, **kwargs):
+        return gr.update(value=value, **kwargs)
+
+# Quill.js HTML template
+quill_template = """
+<div id="quill-editor-{id}" style="height: 500px; border: 2px solid #3B82F6; border-radius: 10px;"></div>
+<input type="hidden" id="quill-input-{id}" name="{id}" value="{value}">
+
+<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
+<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
+
+<script>
+// Initialize Quill editor
+var quill = new Quill('#quill-editor-{id}', {
+    theme: 'snow',
+    modules: {
+        toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ 'header': 1 }, { 'header': 2 }],
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+            [{ 'script': 'sub'}, { 'script': 'super' }],
+            [{ 'indent': '-1'}, { 'indent': '+1' }],
+            [{ 'direction': 'rtl' }],
+            [{ 'size': ['small', false, 'large', 'huge'] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'font': [] }],
+            [{ 'align': [] }],
+            ['clean'],
+            ['link', 'image', 'video', 'formula']
+        ]
+    },
+    placeholder: 'Paste your Gemini content here...'
+});
+
+// Set initial content
+quill.root.innerHTML = `{value}`;
+
+// Update hidden input on change
+quill.on('text-change', function() {
+    document.getElementById('quill-input-{id}').value = quill.root.innerHTML;
+});
+
+// Handle paste events to preserve Word formatting
+quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta) {
+    // Preserve tables from Word
+    if (node.tagName === 'TABLE') {
+        let tableHTML = node.outerHTML;
+        return new Quill.imports.delta().insert(tableHTML, { 'html': true });
+    }
+    // Preserve lists
+    if (node.tagName === 'UL' || node.tagName === 'OL') {
+        let listHTML = node.outerHTML;
+        return new Quill.imports.delta().insert(listHTML, { 'html': true });
+    }
+    return delta;
+});
+</script>
+"""
+
+# ========== HTML TO TEXT CONVERSION ==========
+def html_to_text(html_content):
+    """Convert HTML from Quill editor to plain text for parsing"""
+    if not html_content:
+        return ""
+    
+    # Decode HTML entities
+    text = html.unescape(html_content)
+    
+    # Remove HTML tags but preserve structure
+    # Replace common HTML tags with appropriate line breaks
+    text = re.sub(r'<br\s*/?>', '\n', text)
+    text = re.sub(r'<p[^>]*>', '', text)
+    text = re.sub(r'</p>', '\n', text)
+    text = re.sub(r'<div[^>]*>', '', text)
+    text = re.sub(r'</div>', '\n', text)
+    text = re.sub(r'<h[1-6][^>]*>', '', text)
+    text = re.sub(r'</h[1-6]>', '\n', text)
+    text = re.sub(r'<strong[^>]*>', '', text)
+    text = re.sub(r'</strong>', '', text)
+    text = re.sub(r'<b[^>]*>', '', text)
+    text = re.sub(r'</b>', '', text)
+    text = re.sub(r'<em[^>]*>', '', text)
+    text = re.sub(r'</em>', '', text)
+    text = re.sub(r'<i[^>]*>', '', text)
+    text = re.sub(r'</i>', '', text)
+    text = re.sub(r'<u[^>]*>', '', text)
+    text = re.sub(r'</u>', '', text)
+    
+    # Remove all remaining HTML tags
+    text = re.sub(r'<[^>]+>', '', text)
+    
+    # Normalize whitespace
+    text = re.sub(r'\n\s*\n', '\n\n', text)
+    text = text.strip()
+    
+    return text
+
+# Alternative: Use BeautifulSoup for better HTML parsing
+def html_to_text_bs4(html_content):
+    """Convert HTML to text using BeautifulSoup (more robust)"""
+    try:
+        from bs4 import BeautifulSoup
+        soup = BeautifulSoup(html_content, 'html.parser')
+        
+        # Replace <br> with newlines
+        for br in soup.find_all('br'):
+            br.replace_with('\n')
+        
+        # Replace <p> with newlines
+        for p in soup.find_all('p'):
+            p.append('\n')
+        
+        # Replace <div> with newlines
+        for div in soup.find_all('div'):
+            if div.text.strip():
+                div.append('\n')
+        
+        # Get text and clean up
+        text = soup.get_text()
+        text = re.sub(r'\n\s*\n', '\n\n', text)
+        text = text.strip()
+        
+        return text
+    except ImportError:
+        # Fallback to regex method
+        return html_to_text(html_content)
 
 # ========== LOAD ENVIRONMENT VARIABLES ==========
 def load_environment_variables():
@@ -31,7 +175,10 @@ def load_environment_variables():
 
 # ========== FUNCTIONS ==========
 def parse_gemini_content(content, post_status='draft'):
-    """Parse Gemini content for cdgarment.com with Rank Math"""
+    """Parse Gemini content from Quill HTML editor"""
+    # Convert HTML to plain text first
+    plain_text = html_to_text_bs4(content) if '<' in content else content
+    
     data = {
         'seo_title': '',
         'primary_keyword': '',
@@ -44,35 +191,67 @@ def parse_gemini_content(content, post_status='draft'):
     }
     
     try:
-        # Extract SEO Title
-        seo_title_match = re.search(r'SEO Title:\s*(.+?)(?=\n)', content)
+        # ===== SEO TITLE =====
+        # Handle both "SEO Title:" and "SEO Title" (without colon) patterns
+        seo_title_match = re.search(r'SEO\s*Title\s*:?\s*(.+?)(?=\n|$)', plain_text, re.IGNORECASE | re.DOTALL)
         if seo_title_match:
             data['seo_title'] = seo_title_match.group(1).strip()
         
-        # Extract Primary Keyword
-        keyword_match = re.search(r'Primary Keyword:\s*(.+?)(?=\n)', content)
+        # ===== PRIMARY KEYWORD =====
+        keyword_match = re.search(r'Primary\s*Keyword\s*:?\s*(.+?)(?=\n|$)', plain_text, re.IGNORECASE | re.DOTALL)
         if keyword_match:
             data['primary_keyword'] = keyword_match.group(1).strip()
         
-        # Extract Meta Description
-        meta_match = re.search(r'Meta Description:\s*(.+?)(?=\n)', content)
+        # ===== META DESCRIPTION =====
+        # Look for Meta Description (can be multi-line)
+        meta_match = re.search(r'Meta\s*Description\s*:?\s*(.+?)(?=\n\s*\n|\nCharacter|\nTags|\n---|$)', plain_text, re.IGNORECASE | re.DOTALL)
         if meta_match:
             data['meta_description'] = meta_match.group(1).strip()
         
-        # Extract Tags
-        tags_match = re.search(r'Tags:\s*(.+?)(?=\n\|📝)', content)
-        if tags_match:
-            tags_str = tags_match.group(1).strip()
-            data['tags'] = [tag.strip() for tag in re.split(r'[,;]', tags_str) if tag.strip()]
-        
-        # Extract Article Content
-        article_match = re.search(r'(?:📝\|▶\|●\|◆).*?(?:Article\|Content)[:\-]?\s*(.+)', content, re.DOTALL)
-        if article_match:
-            full_content = article_match.group(1).strip()
-            lines = full_content.split('\n')
-            if lines:
-                data['article_title'] = lines[0].strip()
-                data['content'] = '\n'.join(lines[1:])
+        # ===== TAGS - Updated for Quill HTML =====
+        # Handle various tag formats in HTML
+        tags_patterns = [
+            r'Tags\s*:?\s*(.+?)(?=\n\s*\n|\n---|\n##|\n📝|$)',  # Tags: on same line
+            r'<strong>Tags?</strong>\s*:?\s*(.+?)(?=\n|$)',  # <strong>Tags</strong>: format
+            r'Tags?\s*\n(.+?)(?=\n\s*\n|\n---|\n##|$)'  # Tags on one line, tags on next
+        ]
+        
+        tags_str = ""
+        for pattern in tags_patterns:
+            tags_match = re.search(pattern, plain_text, re.IGNORECASE | re.DOTALL)
+            if tags_match:
+                tags_str = tags_match.group(1).strip()
+                break
+        
+        if tags_str:
+            # Clean and split tags - handle commas, semicolons, or newlines
+            tags_list = []
+            for tag in re.split(r'[,;\n]', tags_str):
+                cleaned_tag = tag.strip()
+                # Remove any HTML tags that might remain
+                cleaned_tag = re.sub(r'<[^>]+>', '', cleaned_tag)
+                if cleaned_tag and cleaned_tag.lower() not in ['', 'tags', 'tags:']:
+                    tags_list.append(cleaned_tag)
+            data['tags'] = tags_list
+        
+        # ===== ARTICLE CONTENT =====
+        # Extract content after markers (handle both --- and emoji markers)
+        content_patterns = [
+            r'---\s*\n(.+?)(?=\n##\s|\n###\s|\nConclusion:|$)',  # After ---
+            r'📝\s*Article[^\n]*\n(.+?)(?=\n##\s|\n###\s|\nConclusion:|$)',  # After emoji
+            r'##\s+(.+?)(?=\n##\s|\n###\s|\nConclusion:|$)'  # After heading
+        ]
+        
+        for pattern in content_patterns:
+            article_match = re.search(pattern, plain_text, re.DOTALL)
+            if article_match:
+                full_content = article_match.group(1).strip()
+                # Get the first line as title, rest as content
+                lines = full_content.split('\n')
+                if lines:
+                    data['article_title'] = lines[0].strip()
+                    data['content'] = '\n'.join(lines[1:])
+                break
         
         # Generate URL slug
         if data['seo_title']:
@@ -85,7 +264,7 @@ def parse_gemini_content(content, post_status='draft'):
         if not data['seo_title'] and data['article_title']:
             data['seo_title'] = data['article_title']
         
-        # Prepare Rank Math meta fields (based on your screenshot)
+        # Prepare Rank Math meta fields
         data['rank_math_meta'] = {
             'rank_math_title': data['seo_title'],
             'rank_math_description': data['meta_description'],
@@ -98,13 +277,14 @@ def parse_gemini_content(content, post_status='draft'):
             'rank_math_canonical_url': '',
         }
         
-        # If we have primary keyword, add it (though not in your screenshot)
+        # Add primary keyword if available
         if data['primary_keyword']:
             data['rank_math_meta']['rank_math_focus_keyword'] = data['primary_keyword']
         
         return data
         
     except Exception as e:
+        print(f"Error parsing: {str(e)}")
         return {'error': f"Error parsing: {str(e)}"}
 
 def upload_image_to_wordpress(image_file, wp_config, filename_slug):
@@ -229,37 +409,52 @@ def create_wordpress_post(parsed_data, wp_config, media_id=None, post_status='dr
         return None
 
 # ========== GRADIO UI FUNCTIONS ==========
-def parse_content(gemini_content, post_status):
-    """Parse Gemini content and return preview"""
-    if not gemini_content.strip():
-        return "Please paste content first", "", "", "", "", "", {}
+def parse_content(html_content, post_status):
+    """Parse content from Quill editor (HTML)"""
+    if not html_content or not html_content.strip():
+        return "Please paste content first", "", "", "", "", "", "", {}
+    
+    # If content is HTML (contains tags), convert to text first
+    if '<' in html_content:
+        plain_text = html_to_text_bs4(html_content)
+    else:
+        plain_text = html_content
     
-    parsed = parse_gemini_content(gemini_content, post_status)
+    parsed = parse_gemini_content(plain_text, post_status)
     
     if 'error' in parsed:
-        return parsed['error'], "", "", "", "", "", {}
+        return parsed['error'], "", "", "", "", "", "", {}
     
-    # Format tags for display - FIXED: Handle empty tags list
-    if parsed.get('tags') and len(parsed['tags']) > 0:
-        tags_display = ", ".join(parsed['tags'][:6])  # Show first 6 tags
+    # Ensure all fields exist
+    parsed.setdefault('seo_title', 'No title')
+    parsed.setdefault('meta_description', '')
+    parsed.setdefault('primary_keyword', '')
+    parsed.setdefault('tags', [])
+    parsed.setdefault('content', '')
+    parsed.setdefault('url_slug', '')
+    
+    # Format tags for display
+    if parsed['tags'] and len(parsed['tags']) > 0:
+        tags_display = ", ".join(parsed['tags'][:8])
     else:
-        tags_display = "No tags found"
+        tags_display = "No tags found in content"
     
     # Format meta description preview
-    meta_preview = parsed['meta_description'][:100] + "..." if len(parsed['meta_description']) > 100 else parsed['meta_description']
-    
-    # Create rank math preview text
-    rank_math_preview = "\n".join([f"{key}: {value}" for key, value in parsed['rank_math_meta'].items()][:5])
+    if parsed['meta_description']:
+        meta_preview = parsed['meta_description'][:120] + "..." if len(parsed['meta_description']) > 120 else parsed['meta_description']
+    else:
+        meta_preview = "No meta description found"
     
-    return (
-        f"✅ Parsed: {parsed['seo_title']}",
-        parsed['seo_title'],
-        parsed['url_slug'],
+    result_tuple = (
+        f"✅ Parsed: {parsed['seo_title'][:50]}..." if len(parsed['seo_title']) > 50 else f"✅ Parsed: {parsed['seo_title']}",
+        parsed['seo_title'] or "No title extracted",
+        parsed['url_slug'] or "No slug generated",
         meta_preview,
-        parsed['primary_keyword'],
+        parsed['primary_keyword'] or "No primary keyword",
         tags_display,
-        f"Content Length: {len(parsed['content'])} chars"
-    ), parsed
+        f"Content Length: {len(parsed['content'])} characters"
+    )
+    return result_tuple, parsed
 
 def publish_post(parsed_data, wp_config, image_file, post_status, wp_url, wp_username, wp_password):
     """Publish post to WordPress"""
@@ -338,7 +533,7 @@ def publish_post(parsed_data, wp_config, image_file, post_status, wp_url, wp_use
 def clear_all():
     """Clear all inputs"""
     return (
-        "",  # gemini_content
+        "",  # quill_content
         None,  # image
         "https://cdgarment.com",  # wp_url
         "",  # wp_username
@@ -355,10 +550,40 @@ def clear_all():
         None,  # download_file
     )
 
-# ========== GRADIO UI ==========
-with gr.Blocks(
-    title="CdGarment WordPress Publisher"
-) as demo:
+# ========== CREATE GRADIO INTERFACE ==========
+with gr.Blocks(title="CdGarment WordPress Publisher", css="""
+    .gradio-container { max-width: 1400px !important; }
+    .quill-container { 
+        border: 2px solid #3B82F6;
+        border-radius: 10px;
+        padding: 15px;
+        background-color: #F8FAFC;
+        min-height: 500px;
+    }
+    .header { text-align: center; margin: 20px 0; }
+    .header h1 {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2.5rem;
+        font-weight: 800;
+        margin-bottom: 10px;
+    }
+    .badge {
+        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+        color: #991B1B;
+        padding: 8px 16px;
+        border-radius: 20px;
+        font-weight: 600;
+        display: inline-block;
+        margin-bottom: 20px;
+    }
+    .status-indicator { padding: 6px 12px; border-radius: 12px; font-weight: 600; margin: 0 4px; }
+    .status-indicator.success { background-color: #D1FAE5; color: #065F46; }
+    .status-indicator.warning { background-color: #FEF3C7; color: #92400E; }
+    .status-indicator.error { background-color: #FEE2E2; color: #991B1B; }
+    .status-indicator.info { background-color: #DBEAFE; color: #1E40AF; }
+""") as demo:
     
     # State variables
     parsed_data_state = gr.State(None)
@@ -375,33 +600,153 @@ with gr.Blocks(
     # Two main columns
     with gr.Row():
         with gr.Column(scale=2):
-            with gr.Group():
-                gr.Markdown("### 📋 Paste Gemini Content")
-                gr.Markdown("Include SEO package and article")
-                
-                # Example content
-                example_content = """SEO Toolkit: Article #20
-Element Suggestion
-Primary Keyword: Apparel ODM Design Services
-SEO Title: The Creative Engine: Inside CdGarment's Powerful R&D Team for ODM Success
-Meta Description: Elevate your brand with CdGarment's R&D team. We provide expert ODM services, from trend analysis to prototype development, ensuring your vision becomes reality.
-Tags: apparel ODM partner, fashion R&D team, original design manufacturer, garment prototype development, CdGarment R&D, fashion trend development
-📝 Article #20: Full Content
-The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
-
-[Paste your complete Gemini output here]"""
-                
-                gemini_content = gr.Textbox(
-                    label="Gemini Content",
-                    value=example_content,
-                    lines=20,
-                    placeholder="Paste your complete Gemini output here with all formatting",
-                    elem_classes="paste-box"
-                )
-                
-                with gr.Row():
-                    parse_btn = gr.Button("🔍 Parse Content", variant="primary", scale=2)
-                    clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
+            gr.Markdown("### 📋 Paste Gemini Content")
+            gr.Markdown("Paste directly from Gemini - formatting preserved!")
+            
+            # ========== QUILL.JS RICH TEXT EDITOR ==========
+            def create_quill_editor():
+                """Create an editable Quill editor using a stable approach"""
+                return gr.HTML("""
+                <div style="width: 100%;">
+                    <div id="editor-container" style="height: 400px; border: 2px solid #3B82F6; border-radius: 10px; padding: 15px; background-color: #F8FAFC;">
+                        <div id="quill-editor"></div>
+                    </div>
+                    
+                    <textarea id="html-output" style="display: none;"></textarea>
+                    
+                    <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
+                    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
+                    
+                    <script>
+                    // Wait for the container to be ready
+                    function initEditor() {
+                        if (!document.getElementById('quill-editor')) {
+                            setTimeout(initEditor, 100);
+                            return;
+                        }
+                        
+                        // Initialize Quill as global variable
+                        window.quill = new Quill('#quill-editor', {
+                            theme: 'snow',
+                            modules: {
+                                toolbar: [
+                                    ['bold', 'italic', 'underline'],
+                                    [{ 'header': [1, 2, 3, false] }],
+                                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                                    ['link', 'clean']
+                                ]
+                            },
+                            placeholder: 'Paste your Gemini content here...'
+                        });
+                        
+                        // Make it focusable and editable
+                        const editorEl = document.getElementById('quill-editor');
+                        if (editorEl) {
+                            editorEl.style.minHeight = '400px';
+                            editorEl.setAttribute('contenteditable', 'true');
+                        }
+                        
+                        // Set initial content
+                        const initialContent = `<h2>SEO Toolkit: Article #21</h2>
+            <p><strong>Element</strong><br>Suggestion</p>
+            <p><strong>Primary Keyword</strong><br>Garment Supply Chain Security</p>
+            <p><strong>SEO Title</strong><br>Guaranteed Delivery: How CdGarment Solves the Global Sourcing Lead-Time Crisis</p>
+            <p><strong>Meta Description</strong><br>Eliminate delivery risks with CdGarment. Our advanced automated facilities and "In-Time" communication guarantee reliable lead times and supply chain security.</p>
+            <p><strong>Character Count</strong><br>156 Characters</p>
+            <p><strong>Tags</strong><br>reliable garment supplier, apparel lead time management, secure supply chain fashion, automated apparel production, CdGarment delivery guarantee</p>
+            <hr>
+            <h2>Guaranteed Delivery: Solving the Lead-Time Crisis Through Automation</h2>
+            <p>In 2026, the greatest risk to a fashion brand isn't design—it's <strong>delivery</strong>.</p>`;
+                        
+                        quill.root.innerHTML = initialContent;
+                        document.getElementById('html-output').value = initialContent;
+                        
+                        // Update output on change
+                        quill.on('text-change', function() {
+                            const html = quill.root.innerHTML;
+                            document.getElementById('html-output').value = html;
+                            
+                            // Dispatch event for Gradio to detect changes
+                            const event = new Event('input', { bubbles: true });
+                            document.getElementById('html-output').dispatchEvent(event);
+                        });
+                        
+                        // Handle paste events
+                        quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta) {
+                            if (node.tagName === 'TABLE') {
+                                // Convert tables to text
+                                let tableText = '';
+                                node.querySelectorAll('tr').forEach(row => {
+                                    const cells = [];
+                                    row.querySelectorAll('td, th').forEach(cell => {
+                                        cells.push(cell.textContent);
+                                    });
+                                    tableText += cells.join(' | ') + '\n';
+                                });
+                                return new Quill.imports.delta().insert(tableText);
+                            }
+                            return delta;
+                        });
+                    }
+                    
+                    // Initialize when page loads
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initEditor);
+                    } else {
+                        initEditor();
+                    }
+                    </script>
+                </div>
+                """)
+            
+            # Create the editor
+            editor_html = create_quill_editor()
+            
+            # Hidden textarea to capture content
+            quill_content = gr.Textbox(
+                elem_id="html-output",
+                visible=False,
+                label="Editor Content"
+            )
+            
+            with gr.Row():
+                parse_btn = gr.Button("🔍 Parse Content", variant="primary", size="lg")
+                clear_editor_btn = gr.Button("🗑️ Clear Editor")
+                clear_all_btn = gr.Button("🗑️ Clear All")
+            
+            # Clear editor button handler
+            def clear_editor_content():
+                return ""
+            
+            clear_editor_btn.click(
+                clear_editor_content,
+                outputs=[quill_content],
+            )
+            
+            # Add JavaScript to clear the Quill editor visually
+            gr.HTML("""
+            <script>
+            function clearQuillEditor() {
+                if (typeof quill !== 'undefined') {
+                    quill.root.innerHTML = '';
+                    // Also update the hidden input
+                    document.getElementById('html-output').value = '';
+                }
+            }
+            
+            // Add click event to clear button
+            document.addEventListener('DOMContentLoaded', function() {
+                setTimeout(function() {
+                    const clearBtns = document.querySelectorAll('button');
+                    clearBtns.forEach(btn => {
+                        if (btn.textContent.includes('Clear Editor')) {
+                            btn.addEventListener('click', clearQuillEditor);
+                        }
+                    });
+                }, 1000); // Wait for buttons to be rendered
+            });
+            </script>
+            """)
         
         with gr.Column(scale=1):
             # Image upload section
@@ -513,8 +858,9 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
         return gr.update(visible=False), False
     
     # Parse button handler
-    def on_parse_click(gemini_content_val, post_status_val):
-        if not gemini_content_val.strip():
+    def on_parse_click(html_content, post_status_val):
+        """Handle parse button click with Quill HTML input"""
+        if not html_content or not html_content.strip():
             return (
                 gr.update(value="Please paste content first", visible=True),
                 gr.update(visible=False),
@@ -523,10 +869,11 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
                 *update_status_indicators(False, False, False, post_status_val)
             )
         
-        result, parsed = parse_content(gemini_content_val, post_status_val)
+        result, parsed = parse_content(html_content, post_status_val)
         
         if isinstance(result, tuple):
-            parse_status_val, seo_title_val, url_slug_val, meta_desc_val, keyword_val, tags_val, content_len_val = result
+            parse_status_val, seo_title_val, url_slug_val, meta_desc_val, keyword_val, tags_val, content_len_val = result[:7]
+            
             return (
                 gr.update(value=parse_status_val, visible=True),
                 gr.update(visible=True),
@@ -615,8 +962,8 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
                 )
     
     # Update status indicators when inputs change
-    def update_indicators_on_change(gemini_content_val, image_file, wp_url_val, wp_username_val, wp_password_val, post_status_val, parsed_data):
-        has_content = bool(parsed_data) or bool(gemini_content_val and gemini_content_val.strip())
+    def update_indicators_on_change(quill_content_val, image_file, wp_url_val, wp_username_val, wp_password_val, post_status_val, parsed_data):
+        has_content = bool(parsed_data) or bool(quill_content_val and quill_content_val.strip())
         has_image = bool(image_file)
         has_wp = check_wp_config(wp_url_val, wp_username_val, wp_password_val)
         return update_status_indicators(has_content, has_image, has_wp, post_status_val)
@@ -633,7 +980,7 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
     # Parse button
     parse_btn.click(
         on_parse_click,
-        inputs=[gemini_content, post_status],
+        inputs=[quill_content, post_status],
         outputs=[
             parse_status,
             preview_row,
@@ -665,11 +1012,11 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
         outputs=[publish_status, download_file, content_status, image_status, wp_status, status_indicator]
     )
     
-    # Clear button
-    clear_btn.click(
+    # Clear all button
+    clear_all_btn.click(
         clear_all,
         outputs=[
-            gemini_content,
+            quill_content,
             image_input,
             wp_url,
             wp_username,
@@ -688,19 +1035,48 @@ The Creative Engine: How CdGarment's R&D Team Powers Global ODM Success...
     )
     
     # Update status indicators on input changes
-    for input_component in [gemini_content, image_input, wp_url, wp_username, wp_password, post_status]:
+    for input_component in [quill_content, image_input, wp_url, wp_username, wp_password, post_status]:
         input_component.change(
             update_indicators_on_change,
-            inputs=[gemini_content, image_input, wp_url, wp_username, wp_password, post_status, parsed_data_state],
+            inputs=[quill_content, image_input, wp_url, wp_username, wp_password, post_status, parsed_data_state],
             outputs=[content_status, image_status, wp_status, status_indicator]
         )
 
+def test_quill_parsing():
+    """Test that Quill HTML content parses correctly"""
+    html_content = """
+    <h2>SEO Toolkit: Article #21</h2>
+    <p><strong>Element</strong><br>Suggestion</p>
+    <p><strong>Primary Keyword</strong><br>Garment Supply Chain Security</p>
+    <p><strong>SEO Title</strong><br>Guaranteed Delivery: How CdGarment Solves the Global Sourcing Lead-Time Crisis</p>
+    <p><strong>Meta Description</strong><br>Eliminate delivery risks with CdGarment. Our advanced automated facilities and "In-Time" communication guarantee reliable lead times and supply chain security.</p>
+    <p><strong>Character Count</strong><br>156 Characters</p>
+    <p><strong>Tags</strong><br>reliable garment supplier, apparel lead time management, secure supply chain fashion, automated apparel production, CdGarment delivery guarantee</p>
+    <hr>
+    <h2>Guaranteed Delivery: Solving the Lead-Time Crisis Through Automation</h2>
+    <p>In 2026, the greatest risk to a fashion brand isn't design—it's <strong>delivery</strong>.</p>
+    """
+    
+    parsed = parse_gemini_content(html_content, 'draft')
+    print(f"SEO Title: {parsed.get('seo_title')}")
+    print(f"Tags: {parsed.get('tags')}")
+    print(f"Tags count: {len(parsed.get('tags', []))}")
+    
+    return parsed
+
 # Launch the Gradio app
 if __name__ == "__main__":
+    test_result = test_quill_parsing()
+    print("\nTest Result:")
+    for key, value in test_result.items():
+        if key != 'rank_math_meta':
+            print(f"{key}: {value}")
+    
+    print("\nLaunching Gradio app...")
     demo.launch(
         server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
+        server_port=7862,
+        share=True,
         debug=True,
         theme=gr.themes.Soft(
             primary_hue="purple",