Update app.py

app.py

@@ -2,160 +2,29 @@ import requests
 import re
 import json
 from datetime import datetime
-from PIL import Image
-import io
 import os
-from dotenv import load_dotenv
 import gradio as gr
-import base64
-from io import BytesIO
-import html
+from dotenv import load_dotenv
 
-# 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):
+# ========== LOAD ENVIRONMENT VARIABLES ==========
+def load_environment_variables():
+    """Load environment variables for both local and Hugging Face"""
+    # For Hugging Face Spaces (use environment variables)
+    huggingface_url = os.environ.get('WORDPRESS_URL')
+    huggingface_username = os.environ.get('WORDPRESS_USERNAME')
+    huggingface_password = os.environ.get('WORDPRESS_APP_PASSWORD')
+    huggingface_status = os.environ.get('DEFAULT_STATUS')
+    
+    # If Hugging Face env vars exist, use them
+    if huggingface_url and huggingface_username:
         return {
-            "value": self.value,
-            **super().get_config()
+            'url': huggingface_url,
+            'username': huggingface_username,
+            'password': huggingface_password or '',
+            'status': huggingface_status or 'draft'
         }
     
-    @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():
+    # Fallback to local .env file for development
     try:
         load_dotenv(dotenv_path='rank_cd.env')
         return {
@@ -175,10 +44,7 @@ def load_environment_variables():
 
 # ========== FUNCTIONS ==========
 def parse_gemini_content(content, post_status='draft'):
-    """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
-    
+    """Parse Gemini content for cdgarment.com with Rank Math"""
     data = {
         'seo_title': '',
         'primary_keyword': '',
@@ -191,51 +57,48 @@ def parse_gemini_content(content, post_status='draft'):
     }
     
     try:
-        # ===== 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)
+        # Clean content
+        content = re.sub(r'\r\n', '\n', content)
+        content = re.sub(r'\n\s*\n', '\n\n', content)
+        
+        # Extract SEO Title
+        seo_title_match = re.search(r'SEO\s*Title\s*:?\s*(.+?)(?=\n|$)', content, re.IGNORECASE | re.DOTALL)
         if seo_title_match:
             data['seo_title'] = seo_title_match.group(1).strip()
         
-        # ===== PRIMARY KEYWORD =====
-        keyword_match = re.search(r'Primary\s*Keyword\s*:?\s*(.+?)(?=\n|$)', plain_text, re.IGNORECASE | re.DOTALL)
+        # Extract Primary Keyword
+        keyword_match = re.search(r'Primary\s*Keyword\s*:?\s*(.+?)(?=\n|$)', content, re.IGNORECASE | re.DOTALL)
         if keyword_match:
             data['primary_keyword'] = keyword_match.group(1).strip()
         
-        # ===== 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)
+        # Extract Meta Description
+        meta_match = re.search(r'Meta\s*Description\s*:?\s*(.+?)(?=\n\s*\n|\nCharacter|\nTags|\n---|$)', content, re.IGNORECASE | re.DOTALL)
         if meta_match:
             data['meta_description'] = meta_match.group(1).strip()
         
-        # ===== TAGS - Updated for Quill HTML =====
-        # Handle various tag formats in HTML
+        # Extract Tags
         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
+            r'Tags\s*\n(.+?)(?=\n\s*\n|\n---|\n##|$)'  # Tags on one line, actual tags on next
         ]
         
         tags_str = ""
         for pattern in tags_patterns:
-            tags_match = re.search(pattern, plain_text, re.IGNORECASE | re.DOTALL)
+            tags_match = re.search(pattern, content, 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
+            # Clean and split tags
             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)
+        # Extract Article Content
         content_patterns = [
             r'---\s*\n(.+?)(?=\n##\s|\n###\s|\nConclusion:|$)',  # After ---
             r'📝\s*Article[^\n]*\n(.+?)(?=\n##\s|\n###\s|\nConclusion:|$)',  # After emoji
@@ -243,13 +106,15 @@ def parse_gemini_content(content, post_status='draft'):
         ]
         
         for pattern in content_patterns:
-            article_match = re.search(pattern, plain_text, re.DOTALL)
+            article_match = re.search(pattern, content, 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()
+                    # Remove markdown heading markers if present
+                    title = lines[0].strip()
+                    title = re.sub(r'^#+\s*', '', title)
+                    data['article_title'] = title
                     data['content'] = '\n'.join(lines[1:])
                 break
         
@@ -290,16 +155,15 @@ def parse_gemini_content(content, post_status='draft'):
 def upload_image_to_wordpress(image_file, wp_config, filename_slug):
     """Upload image to WordPress with auto-naming"""
     try:
-        # Handle Gradio image input (can be PIL Image or path)
-        if hasattr(image_file, 'name'):  # It's a file object
-            file_extension = image_file.name.split('.')[-1].lower()
-            image_data = image_file.read()
-        elif isinstance(image_file, str):  # It's a file path
-            file_extension = image_file.split('.')[-1].lower()
+        # Handle file path from Gradio
+        if isinstance(image_file, str):
             with open(image_file, 'rb') as f:
                 image_data = f.read()
-        else:  # Assume it's already bytes
-            image_data = image_file
+            file_extension = image_file.split('.')[-1].lower()
+        else:
+            # Handle file object
+            image_data = image_file.read()
+            file_extension = image_file.name.split('.')[-1].lower()
         
         # Generate filename from slug
         filename = f"{filename_slug}.{file_extension}"
@@ -334,6 +198,7 @@ def upload_image_to_wordpress(image_file, wp_config, filename_slug):
             
             return media_data['id']
         else:
+            print(f"Image upload failed: {response.text}")
             return None
             
     except Exception as e:
@@ -402,6 +267,7 @@ def create_wordpress_post(parsed_data, wp_config, media_id=None, post_status='dr
             
             return post_result
         else:
+            print(f"Post creation failed: {response.text}")
             return None
             
     except Exception as e:
@@ -409,18 +275,12 @@ def create_wordpress_post(parsed_data, wp_config, media_id=None, post_status='dr
         return None
 
 # ========== GRADIO UI FUNCTIONS ==========
-def parse_content(html_content, post_status):
-    """Parse content from Quill editor (HTML)"""
-    if not html_content or not html_content.strip():
+def parse_content(gemini_content, post_status):
+    """Parse Gemini content and return preview"""
+    if not gemini_content or not gemini_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(plain_text, post_status)
+    parsed = parse_gemini_content(gemini_content, post_status)
     
     if 'error' in parsed:
         return parsed['error'], "", "", "", "", "", "", {}
@@ -445,21 +305,22 @@ def parse_content(html_content, post_status):
     else:
         meta_preview = "No meta description found"
     
-    result_tuple = (
+    return (
         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'] or "No primary keyword",
         tags_display,
-        f"Content Length: {len(parsed['content'])} characters"
+        f"Content Length: {len(parsed['content'])} characters",
+        parsed
     )
-    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"""
     if not parsed_data:
-        return "❌ No parsed content available. Please parse content first.", None
+        yield "❌ No parsed content available. Please parse content first.", None
+        return
     
     # Use stored config or provided inputs
     if not wp_config:
@@ -472,7 +333,8 @@ def publish_post(parsed_data, wp_config, image_file, post_status, wp_url, wp_use
     
     # Validate config
     if not all([wp_config['url'], wp_config['username'], wp_config['password']]):
-        return "❌ WordPress configuration incomplete. Please provide URL, username, and password.", None
+        yield "❌ WordPress configuration incomplete. Please provide URL, username, and password.", None
+        return
     
     try:
         yield "🖼️ Uploading image to WordPress...", None
@@ -533,7 +395,7 @@ def publish_post(parsed_data, wp_config, image_file, post_status, wp_url, wp_use
 def clear_all():
     """Clear all inputs"""
     return (
-        "",  # quill_content
+        "",  # gemini_content
         None,  # image
         "https://cdgarment.com",  # wp_url
         "",  # wp_username
@@ -551,39 +413,7 @@ def clear_all():
     )
 
 # ========== 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:
+with gr.Blocks(title="CdGarment WordPress Publisher") as demo:
     
     # State variables
     parsed_data_state = gr.State(None)
@@ -591,162 +421,151 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
     
     # Header
     gr.HTML("""
-    <div class="header">
-        <h1>🏭 CdGarment WordPress Publisher</h1>
-        <div class="badge">✓ Optimized for Rank Math SEO</div>
+    <div style="text-align: center; margin: 20px 0;">
+        <h1 style="
+            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;
+        ">🏭 CdGarment WordPress Publisher</h1>
+        <div style="
+            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;
+        ">✓ Optimized for Rank Math SEO</div>
     </div>
     """)
     
     # Two main columns
     with gr.Row():
         with gr.Column(scale=2):
-            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">
+            with gr.Group():
+                gr.Markdown("### 📋 Paste Gemini Content")
+                gr.Markdown("Include SEO package and article. Formatting preserved!")
+                
+                # Formatting toolbar
+                gr.HTML("""
+                <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px; border: 1px solid #e9ecef;">
+                    <strong>Formatting:</strong>
+                    <button class="format-btn" onclick="formatText('# ', 'H1')" style="background: white; border: 1px solid #dee2e6; padding: 5px 10px; margin-right: 5px; border-radius: 4px; cursor: pointer;">H1</button>
+                    <button class="format-btn" onclick="formatText('## ', 'H2')" style="background: white; border: 1px solid #dee2e6; padding: 5px 10px; margin-right: 5px; border-radius: 4px; cursor: pointer;">H2</button>
+                    <button class="format-btn" onclick="formatText('**', 'Bold')" style="background: white; border: 1px solid #dee2e6; padding: 5px 10px; margin-right: 5px; border-radius: 4px; cursor: pointer; font-weight: bold;">B</button>
+                    <button class="format-btn" onclick="formatText('*', 'Italic')" style="background: white; border: 1px solid #dee2e6; padding: 5px 10px; margin-right: 5px; border-radius: 4px; cursor: pointer; font-style: italic;">I</button>
+                    <button class="format-btn" onclick="formatText('- ', 'List')" style="background: white; border: 1px solid #dee2e6; padding: 5px 10px; margin-right: 5px; border-radius: 4px; cursor: pointer;">• List</button>
+                </div>
+                
+                <script>
+                function formatText(wrapText, type) {
+                    const textarea = document.querySelector('textarea[aria-label="Gemini Content"]');
+                    if (!textarea) return;
                     
-                    <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;
-                        });
-                    }
+                    const start = textarea.selectionStart;
+                    const end = textarea.selectionEnd;
+                    const selected = textarea.value.substring(start, end);
                     
-                    // Initialize when page loads
-                    if (document.readyState === 'loading') {
-                        document.addEventListener('DOMContentLoaded', initEditor);
+                    if (selected) {
+                        textarea.value = textarea.value.substring(0, start) + wrapText + selected + wrapText + textarea.value.substring(end);
+                        textarea.selectionStart = start + wrapText.length;
+                        textarea.selectionEnd = end + wrapText.length;
                     } else {
-                        initEditor();
+                        textarea.value = textarea.value.substring(0, start) + wrapText + type + wrapText + textarea.value.substring(end);
+                        textarea.selectionStart = textarea.selectionEnd = start + wrapText.length + type.length;
                     }
-                    </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 = '';
+                    textarea.focus();
+                    
+                    const event = new Event('input', { bubbles: true });
+                    textarea.dispatchEvent(event);
                 }
-            }
-            
-            // 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);
-                        }
+                
+                document.addEventListener('DOMContentLoaded', function() {
+                    const buttons = document.querySelectorAll('.format-btn');
+                    buttons.forEach(btn => {
+                        btn.addEventListener('click', function(e) {
+                            e.preventDefault();
+                            const wrap = this.getAttribute('onclick').match(/formatText\('([^']*)'/)[1];
+                            const type = this.getAttribute('onclick').match(/formatText\('[^']*', '([^']*)'/)[1];
+                            formatText(wrap, type);
+                        });
                     });
-                }, 1000); // Wait for buttons to be rendered
-            });
-            </script>
-            """)
+                });
+                </script>
+                """)
+                
+                # Markdown editor
+                example_content = """SEO Toolkit: Article #21
+
+Element
+Suggestion
+
+Primary Keyword
+Garment Supply Chain Security
+
+SEO Title
+Guaranteed Delivery: How CdGarment Solves the Global Sourcing Lead-Time Crisis
+
+Meta Description
+Eliminate delivery risks with CdGarment. Our advanced automated facilities and "In-Time" communication guarantee reliable lead times and supply chain security.
+
+Character Count
+156 Characters
+
+Tags
+reliable garment supplier, apparel lead time management, secure supply chain fashion, automated apparel production, CdGarment delivery guarantee
+
+---
+
+## Guaranteed Delivery: Solving the Lead-Time Crisis Through Automation
+
+In 2026, the greatest risk to a fashion brand isn't design—it's **delivery**. Port delays, labor shortages, and manual production bottlenecks have made traditional "medium" manufacturers unreliable.
+
+CdGarment has solved this by rebuilding the manufacturing process around **Security and Stability**. When we commit to a date, our automated ecosystem ensures we meet it.
+
+### 1. Automation = Predictability
+
+Manual factories suffer from "human variance." If a worker is sick or a bundle is lost, the whole line stops.
+
+- **The Hanging System Advantage**: Our automated system ensures a continuous flow.
+- **Buffer Management**: Our integrated bases allow us to shift production loads.
+
+### 2. Real-Time Supply Chain Visibility
+
+Supply chain security comes from knowing, not guessing.
+
+- **Digital Tracking**: Every order is logged in our system.
+- **Proactive Logistics**: Our logistics team monitors global shipping lanes.
+
+### 3. Financial and Compliance Security
+
+A secure supplier is a compliant supplier. CdGarment maintains all global certifications."""
+
+                gemini_content = gr.Textbox(
+                    label="Gemini Content",
+                    value=example_content,
+                    lines=25,
+                    placeholder="""Paste your Gemini output here...
+
+Example format:
+SEO Title: Your Title Here
+Primary Keyword: Your Keyword
+Meta Description: Your description
+Tags: tag1, tag2, tag3
+
+--- (or 📝 Article)
+
+## Article Title
+Your article content here...""",
+                    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)
         
         with gr.Column(scale=1):
             # Image upload section
@@ -821,10 +640,10 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
     
     # Status indicators
     with gr.Row():
-        content_status = gr.HTML("<span class='status-indicator warning'>❌ Content</span>")
-        image_status = gr.HTML("<span class='status-indicator warning'>⚠️ Image Optional</span>")
-        wp_status = gr.HTML("<span class='status-indicator warning'>❌ WordPress</span>")
-        status_indicator = gr.HTML("<span class='status-indicator'>📊 Status: DRAFT</span>")
+        content_status = gr.HTML("<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: #fee2e2; color: #991b1b;'>❌ Content</span>")
+        image_status = gr.HTML("<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: #fef3c7; color: #92400e;'>⚠️ Image Optional</span>")
+        wp_status = gr.HTML("<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: #fee2e2; color: #991b1b;'>❌ WordPress</span>")
+        status_indicator = gr.HTML("<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: #e5e7eb;'>📊 Status: DRAFT</span>")
     
     publish_btn = gr.Button("🚀 PUSH TO WORDPRESS", variant="primary", size="lg")
     
@@ -840,10 +659,19 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
     
     def update_status_indicators(has_content, has_image, has_wp_config, post_status_value):
         """Update status indicators"""
-        content_html = f"<span class='status-indicator success'>✅ Content</span>" if has_content else f"<span class='status-indicator error'>❌ Content</span>"
-        image_html = f"<span class='status-indicator success'>✅ Image</span>" if has_image else f"<span class='status-indicator warning'>⚠️ Image Optional</span>"
-        wp_html = f"<span class='status-indicator success'>✅ WordPress</span>" if has_wp_config else f"<span class='status-indicator error'>❌ WordPress</span>"
-        status_html = f"<span class='status-indicator'>📊 Status: {post_status_value.upper()}</span>"
+        content_color = "#d1fae5" if has_content else "#fee2e2"
+        content_text = "✅ Content" if has_content else "❌ Content"
+        content_html = f"<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: {content_color}; color: #065f46;'>{content_text}</span>"
+        
+        image_color = "#d1fae5" if has_image else "#fef3c7"
+        image_text = "✅ Image" if has_image else "⚠️ Image Optional"
+        image_html = f"<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: {image_color}; color: #92400e;'>{image_text}</span>"
+        
+        wp_color = "#d1fae5" if has_wp_config else "#fee2e2"
+        wp_text = "✅ WordPress" if has_wp_config else "❌ WordPress"
+        wp_html = f"<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: {wp_color}; color: #065f46;'>{wp_text}</span>"
+        
+        status_html = f"<span style='padding: 5px 10px; border-radius: 5px; font-weight: bold; margin: 2px; background-color: #e5e7eb;'>📊 Status: {post_status_value.upper()}</span>"
         
         return content_html, image_html, wp_html, status_html
     
@@ -858,9 +686,8 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
         return gr.update(visible=False), False
     
     # Parse button handler
-    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():
+    def on_parse_click(gemini_content_val, post_status_val):
+        if not gemini_content_val or not gemini_content_val.strip():
             return (
                 gr.update(value="Please paste content first", visible=True),
                 gr.update(visible=False),
@@ -869,11 +696,15 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
                 *update_status_indicators(False, False, False, post_status_val)
             )
         
-        result, parsed = parse_content(html_content, post_status_val)
+        result, parsed = parse_content(gemini_content_val, 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[:7]
             
+            # Debug output
+            print(f"DEBUG - Parsed tags: {parsed.get('tags', [])}")
+            print(f"DEBUG - Tags display: {tags_val}")
+            
             return (
                 gr.update(value=parse_status_val, visible=True),
                 gr.update(visible=True),
@@ -881,7 +712,7 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
                 url_slug_val,
                 meta_desc_val,
                 keyword_val,
-                tags_val,
+                tags_val if tags_val else "No tags extracted",
                 content_len_val,
                 parsed,
                 *update_status_indicators(True, False, False, post_status_val)
@@ -939,15 +770,8 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
             *update_status_indicators(True, bool(image_file), True, post_status_val)
         )
         
-        # Simulate progress (Gradio doesn't have built-in progress bars for streaming)
-        import time
-        time.sleep(1)
-        
         # Call the publish function
-        publish_result = list(publish_post(parsed_data, wp_config_to_use, image_file, post_status_val, wp_url_val, wp_username_val, wp_password_val))
-        
-        if len(publish_result) > 1:
-            status_msg, download_file_val = publish_result[-1]
+        for status_msg, download_file_val in publish_post(parsed_data, wp_config_to_use, image_file, post_status_val, wp_url_val, wp_username_val, wp_password_val):
             if download_file_val:
                 yield (
                     gr.update(value=status_msg),
@@ -960,10 +784,11 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
                     gr.update(visible=False),
                     *update_status_indicators(True, bool(image_file), True, post_status_val)
                 )
+            break
     
     # Update status indicators when inputs change
-    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())
+    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())
         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)
@@ -980,7 +805,7 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
     # Parse button
     parse_btn.click(
         on_parse_click,
-        inputs=[quill_content, post_status],
+        inputs=[gemini_content, post_status],
         outputs=[
             parse_status,
             preview_row,
@@ -1012,11 +837,11 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
         outputs=[publish_status, download_file, content_status, image_status, wp_status, status_indicator]
     )
     
-    # Clear all button
-    clear_all_btn.click(
+    # Clear button
+    clear_btn.click(
         clear_all,
         outputs=[
-            quill_content,
+            gemini_content,
             image_input,
             wp_url,
             wp_username,
@@ -1035,113 +860,26 @@ with gr.Blocks(title="CdGarment WordPress Publisher", css="""
     )
     
     # Update status indicators on input changes
-    for input_component in [quill_content, image_input, wp_url, wp_username, wp_password, post_status]:
+    for input_component in [gemini_content, image_input, wp_url, wp_username, wp_password, post_status]:
         input_component.change(
             update_indicators_on_change,
-            inputs=[quill_content, image_input, wp_url, wp_username, wp_password, post_status, parsed_data_state],
+            inputs=[gemini_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
+# ========== LAUNCH THE 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=7862,
         share=True,
         debug=True,
-        theme=gr.themes.Soft(
-            primary_hue="purple",
-            secondary_hue="green",
-        ),
         css="""
-        .gradio-container {
-            max-width: 1400px !important;
-        }
-        .container {
-            padding: 20px;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .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;
-        }
-        .paste-box {
-            border: 2px solid #3B82F6;
-            border-radius: 10px;
-            padding: 20px;
-            background-color: #F8FAFC;
-            min-height: 500px;
-        }
-        .preview-box {
-            background-color: #f8f9fa;
-            border-radius: 10px;
-            padding: 15px;
-            margin: 10px 0;
-        }
-        .status-indicator {
-            display: inline-block;
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-weight: bold;
-            margin: 2px;
-        }
-        .success {
-            background-color: #d1fae5;
-            color: #065f46;
-        }
-        .warning {
-            background-color: #fef3c7;
-            color: #92400e;
-        }
-        .error {
-            background-color: #fee2e2;
-            color: #991b1b;
+        .gradio-container { max-width: 1400px !important; }
+        .paste-box textarea { 
+            font-family: 'Courier New', monospace !important;
+            font-size: 14px !important;
+            line-height: 1.5 !important;
         }
-        """,
-        ssr_mode=False
+        """
     )