Update app.py

app.py

@@ -1,4 +1,3 @@
-import streamlit as st
 import requests
 import re
 import json
@@ -7,115 +6,179 @@ 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
 
-# ========== PAGE CONFIGURATION ==========
-st.set_page_config(
-    page_title="CdGarment WordPress Publisher",
-    page_icon="🏭",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
+# 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)
 
-# ========== CUSTOM CSS ==========
-st.markdown("""
-<style>
-    .main {
-        padding: 2rem;
-    }
-    .main-header {
-        font-size: 2.8rem;
-        font-weight: 800;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        text-align: center;
-        margin-bottom: 0.5rem;
-    }
-    .paste-box {
-        border: 2px solid #3B82F6;
-        border-radius: 10px;
-        padding: 1.5rem;
-        background-color: #F8FAFC;
-        height: 500px;
-    }
-    .image-preview {
-        border-radius: 10px;
-        overflow: hidden;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        border: 2px solid #E5E7EB;
-        max-height: 200px;
-        width: 100%;
-        object-fit: cover;
-    }
-    .publish-btn {
-        background: linear-gradient(135deg, #059669 0%, #10B981 100%);
-        color: white;
-        font-size: 1.5rem;
-        font-weight: 700;
-        padding: 1.2rem;
-        border: none;
-        border-radius: 12px;
-        width: 100%;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
-        margin-top: 1.5rem;
-    }
-    .publish-btn:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
-    }
-    .publish-btn:disabled {
-        background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
-        cursor: not-allowed;
-        transform: none;
-        box-shadow: none;
+# 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 });
     }
-    .rank-math-badge {
-        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-        color: #991B1B;
-        padding: 0.5rem 1rem;
-        border-radius: 20px;
-        font-weight: 600;
-        display: inline-block;
-        margin-bottom: 1rem;
+    // Preserve lists
+    if (node.tagName === 'UL' || node.tagName === 'OL') {
+        let listHTML = node.outerHTML;
+        return new Quill.imports.delta().insert(listHTML, { 'html': true });
     }
-</style>
-""", unsafe_allow_html=True)
+    return delta;
+});
+</script>
+"""
 
-# ========== INITIALIZE SESSION STATE ==========
-for key in ['parsed_data', 'uploaded_image', 'wp_config', 'post_status', 'wp_config_locked', 'env_loaded']:
-    if key not in st.session_state:
-        if key == 'wp_config_locked':
-            st.session_state[key] = False
-        elif key == 'env_loaded':
-            st.session_state[key] = False
-        elif key == 'wp_config':
-            st.session_state[key] = {}
-        elif key == 'post_status':
-            st.session_state[key] = 'draft'
-        else:
-            st.session_state[key] = None
+# ========== 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 ==========
-if not st.session_state.env_loaded:
+def load_environment_variables():
     try:
         load_dotenv(dotenv_path='rank_cd.env')
-        # Initialize wp_config from env if not already set
-        if not st.session_state.wp_config:
-            st.session_state.wp_config = {
-                'url': os.getenv('WORDPRESS_URL', 'https://cdgarment.com'),
-                'username': os.getenv('WORDPRESS_USERNAME', ''),
-                'password': os.getenv('WORDPRESS_APP_PASSWORD', ''),
-                'status': os.getenv('DEFAULT_STATUS', 'draft')
-            }
-        st.session_state.env_loaded = True
+        return {
+            'url': os.getenv('WORDPRESS_URL', 'https://cdgarment.com'),
+            'username': os.getenv('WORDPRESS_USERNAME', ''),
+            'password': os.getenv('WORDPRESS_APP_PASSWORD', ''),
+            'status': os.getenv('DEFAULT_STATUS', 'draft')
+        }
     except Exception as e:
-        st.warning(f"Could not load rank_cd.env: {str(e)}")
+        print(f"Could not load rank_cd.env: {str(e)}")
+        return {
+            'url': 'https://cdgarment.com',
+            'username': '',
+            'password': '',
+            'status': 'draft'
+        }
 
 # ========== FUNCTIONS ==========
-def parse_gemini_content(content):
-    """Parse Gemini content for cdgarment.com with Rank Math"""
+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
+    
     data = {
         'seo_title': '',
         'primary_keyword': '',
@@ -128,35 +191,67 @@ def parse_gemini_content(content):
     }
     
     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']:
@@ -169,11 +264,11 @@ def parse_gemini_content(content):
         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'],
-            'rank_math_robots': ['index'] if st.session_state.post_status == 'publish' else ['noindex'],
+            'rank_math_robots': ['index'] if post_status == 'publish' else ['noindex'],
             'rank_math_news_sitemap_robots': 'index',
             'rank_math_facebook_title': data['seo_title'],
             'rank_math_facebook_description': data['meta_description'],
@@ -182,26 +277,36 @@ def parse_gemini_content(content):
             '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:
-        st.error(f"Error parsing: {str(e)}")
-        return None
+        print(f"Error parsing: {str(e)}")
+        return {'error': f"Error parsing: {str(e)}"}
 
 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()
+            with open(image_file, 'rb') as f:
+                image_data = f.read()
+        else:  # Assume it's already bytes
+            image_data = image_file
+        
         # Generate filename from slug
-        file_extension = image_file.name.split('.')[-1].lower()
         filename = f"{filename_slug}.{file_extension}"
         
         # Prepare image data
         files = {
-            'file': (filename, image_file.getvalue(), f'image/{file_extension}')
+            'file': (filename, image_data, f'image/{file_extension}')
         }
         
         auth = (wp_config['username'], wp_config['password'])
@@ -229,14 +334,13 @@ def upload_image_to_wordpress(image_file, wp_config, filename_slug):
             
             return media_data['id']
         else:
-            st.error(f"Image upload failed: {response.text}")
             return None
             
     except Exception as e:
-        st.error(f"Error uploading image: {str(e)}")
+        print(f"Error uploading image: {str(e)}")
         return None
 
-def create_wordpress_post(parsed_data, wp_config, media_id=None):
+def create_wordpress_post(parsed_data, wp_config, media_id=None, post_status='draft'):
     """Create WordPress post with Rank Math meta"""
     try:
         # Base post data
@@ -244,7 +348,7 @@ def create_wordpress_post(parsed_data, wp_config, media_id=None):
             'title': parsed_data['seo_title'],
             'content': parsed_data['content'],
             'slug': parsed_data['url_slug'],
-            'status': st.session_state.post_status,
+            'status': post_status,
             'meta': parsed_data['rank_math_meta']
         }
         
@@ -301,315 +405,99 @@ def create_wordpress_post(parsed_data, wp_config, media_id=None):
             return None
             
     except Exception as e:
-        st.error(f"Error creating post: {str(e)}")
+        print(f"Error creating post: {str(e)}")
         return None
 
-# ========== STREAMLIT UI ==========
-# Header
-st.markdown('<h1 class="main-header">🏭 CdGarment WordPress Publisher</h1>', unsafe_allow_html=True)
-st.markdown('<div class="rank-math-badge">✓ Optimized for Rank Math SEO</div>', unsafe_allow_html=True)
-
-# Two main columns
-col1, col2 = st.columns([2, 1], gap="large")
-
-# ========== LEFT COLUMN: CONTENT ==========
-with col1:
-    st.markdown('<div class="paste-box">', unsafe_allow_html=True)
-    
-    st.markdown("### 📋 Paste Gemini Content")
-    st.caption("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]"""
+# ========== 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():
+        return "Please paste content first", "", "", "", "", "", "", {}
     
-    gemini_content = st.text_area(
-        "Paste your Gemini output below:",
-        height=350,
-        value=example_content,
-        label_visibility="collapsed",
-        placeholder="Paste your complete Gemini output here with all formatting",
-        help="Formatting will be preserved exactly as pasted"
-    )
-    
-    # Parse button
-    if st.button("🔍 Parse Content", type="primary", use_container_width=True):
-        if gemini_content.strip():
-            with st.spinner("Parsing content and preparing Rank Math meta..."):
-                parsed = parse_gemini_content(gemini_content)
-                if parsed:
-                    st.session_state.parsed_data = parsed
-                    st.success(f"✅ Parsed: {parsed['seo_title']}")
-                else:
-                    st.error("❌ Could not parse content")
-        else:
-            st.warning("Please paste content first")
-    
-    st.markdown('</div>', unsafe_allow_html=True)
-
-# ========== RIGHT COLUMN: IMAGE & SETTINGS ==========
-with col2:
-    st.markdown("### 🖼️ Image & Upload")
-    
-    # Image preview box (always visible, empty when no image)
-    st.markdown("**📷 Image Preview**")
-    
-    # Empty preview area with border
-    if 'uploaded_image' not in st.session_state or not st.session_state.uploaded_image:
-        # Show empty preview box
-        st.markdown(
-            '<div style="border: 2px dashed #8B5CF6; border-radius: 10px; padding: 2rem; text-align: center; background-color: #FAF5FF;">'
-            '<div style="font-size: 3rem; margin-bottom: 1rem;">📁</div>'
-            '<div style="color: #6B7280;">No image uploaded yet</div>'
-            '</div>',
-            unsafe_allow_html=True
-        )
+    # If content is HTML (contains tags), convert to text first
+    if '<' in html_content:
+        plain_text = html_to_text_bs4(html_content)
     else:
-        # Show image preview
-        st.image(
-            st.session_state.uploaded_image,
-            width=200,
-            use_column_width=False
-        )
-    
-    # Image upload button
-    uploaded_image = st.file_uploader(
-        "Upload image",
-        type=['jpg', 'jpeg', 'png', 'gif', 'webp'],
-        help="Image will be automatically named and added to post",
-        label_visibility="collapsed"
-    )
+        plain_text = html_content
     
-    # Handle image upload
-    if uploaded_image:
-        st.session_state.uploaded_image = uploaded_image
-        st.rerun()  # Refresh to show the preview
-    
-    # Image description field
-    st.markdown("**🖋️ Image Description**")
-    image_description = st.text_area(
-        "Image description",
-        height=100,
-        placeholder="Auto-generated description will appear here",
-        label_visibility="collapsed"
-    )
+    parsed = parse_gemini_content(plain_text, post_status)
     
-    st.markdown("---")
-    st.markdown("### ⚙️ WordPress Settings")
+    if 'error' in parsed:
+        return parsed['error'], "", "", "", "", "", "", {}
     
-    # Get current values from session state
-    current_config = st.session_state.wp_config or {
-        'url': 'https://cdgarment.com',
-        'username': '',
-        'password': '',
-        'status': 'draft'
-    }
+    # 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', '')
     
-    # Lock/Unlock toggle
-    col_lock, col_spacer = st.columns([1, 4])
-    with col_lock:
-        st.session_state.wp_config_locked = st.toggle(
-            "🔒",
-            value=st.session_state.wp_config_locked,
-            help="Lock/Unlock configuration"
-        )
-    
-    # WordPress configuration
-    wp_url = st.text_input(
-        "WordPress URL",
-        value=current_config['url'],
-        help="Your WordPress site URL",
-        disabled=st.session_state.wp_config_locked
-    )
-    
-    wp_username = st.text_input(
-        "Username",
-        value=current_config['username'],
-        placeholder="admin",
-        help="WordPress username",
-        disabled=st.session_state.wp_config_locked
-    )
+    # Format tags for display
+    if parsed['tags'] and len(parsed['tags']) > 0:
+        tags_display = ", ".join(parsed['tags'][:8])
+    else:
+        tags_display = "No tags found in content"
     
-    wp_password = st.text_input(
-        "Application Password",
-        value=current_config['password'],
-        type="password",
-        placeholder="••••••••",
-        help="From WordPress: Users → Profile → Application Passwords",
-        disabled=st.session_state.wp_config_locked
-    )
+    # Format meta description preview
+    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"
     
-    # Post status
-    post_status = st.selectbox(
-        "Post Status",
-        options=["draft", "publish"],
-        index=0 if current_config.get('status') == 'draft' else 1,
-        help="Set whether the post should be a draft or immediately published"
+    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'] or "No primary keyword",
+        tags_display,
+        f"Content Length: {len(parsed['content'])} characters"
     )
-    st.session_state.post_status = post_status
-    
-    # Save button
-    if not st.session_state.wp_config_locked:
-        if st.button("💾 Save Configuration", use_container_width=True):
-            st.session_state.wp_config = {
-                'url': wp_url,
-                'username': wp_username,
-                'password': wp_password,
-                'status': post_status
-            }
-            st.success("Configuration saved!")
+    return result_tuple, parsed
 
-# ========== PREVIEW SECTION ==========
-if st.session_state.parsed_data:
-    st.markdown("---")
-    st.markdown("### 👁️ Preview")
-    
-    parsed = st.session_state.parsed_data
-    
-    # Show extracted data
-    col_pre1, col_pre2, col_pre3 = st.columns(3)
-    
-    with col_pre1:
-        st.markdown("**SEO Title**")
-        st.info(parsed['seo_title'])
-        
-        st.markdown("**URL Slug**")
-        st.code(parsed['url_slug'])
+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
     
-    with col_pre2:
-        st.markdown("**Meta Description**")
-        st.text(parsed['meta_description'][:100] + "..." if len(parsed['meta_description']) > 100 else parsed['meta_description'])
-        
-        st.markdown("**Primary Keyword**")
-        st.success(parsed['primary_keyword'])
-    
-    with col_pre3:
-        st.markdown("**Tags**")
-        tags_html = ""
-        for tag in parsed['tags'][:4]:
-            tags_html += f'<span style="background:#E5E7EB; padding:0.25rem 0.75rem; border-radius:12px; margin-right:0.5rem; font-size:0.9rem;">{tag}</span>'
-        st.markdown(tags_html, unsafe_allow_html=True)
-        
-        st.markdown(f"**Content Length:** {len(parsed['content'])} chars")
+    # Use stored config or provided inputs
+    if not wp_config:
+        wp_config = {
+            'url': wp_url.rstrip('/') if wp_url else '',
+            'username': wp_username,
+            'password': wp_password,
+            'status': post_status
+        }
     
-    # Rank Math meta preview
-    with st.expander("🔴 Rank Math Meta Fields (Will be set)"):
-        for key, value in parsed['rank_math_meta'].items():
-            st.write(f"**{key}:**")
-            st.code(str(value)[:200] + "..." if len(str(value)) > 200 else str(value))
-
-# ========== PUBLISH SECTION ==========
-st.markdown("---")
-st.markdown("### 🚀 Ready to Publish")
-
-# Status indicators
-status_cols = st.columns(4)
-
-with status_cols[0]:
-    status_content = "✅ Content" if st.session_state.parsed_data else "❌ Content"
-    st.markdown(f"**{status_content}**")
-
-with status_cols[1]:
-    status_image = "✅ Image" if st.session_state.uploaded_image else "⚠️ Image Optional"
-    st.markdown(f"**{status_image}**")
-
-# Check config status using stored config or current inputs
-config_ready = False
-if st.session_state.wp_config:
-    config_ready = all([
-        st.session_state.wp_config.get('url'),
-        st.session_state.wp_config.get('username'),
-        st.session_state.wp_config.get('password')
-    ])
-else:
-    config_ready = all([wp_url, wp_username, wp_password])
-
-with status_cols[2]:
-    status_wp = "✅ WordPress" if config_ready else "❌ WordPress"
-    st.markdown(f"**{status_wp}**")
-
-with status_cols[3]:
-    st.markdown(f"**📊 Status: {post_status.upper()}**")
-
-# Main publish button
-publish_disabled = not (st.session_state.parsed_data and config_ready)
-
-if st.button(
-    "🚀 PUSH TO WORDPRESS",
-    disabled=publish_disabled,
-    key="publish_button",
-    use_container_width=True
-):
-    # Show progress
-    progress_bar = st.progress(0)
-    status_text = st.empty()
+    # 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
     
     try:
-        # Use stored config or create from current inputs
-        if st.session_state.wp_config and all([
-            st.session_state.wp_config.get('url'),
-            st.session_state.wp_config.get('username'),
-            st.session_state.wp_config.get('password')
-        ]):
-            # Use existing stored config
-            pass
-        else:
-            # Save new config from current inputs
-            st.session_state.wp_config = {
-                'url': wp_url.rstrip('/'),
-                'username': wp_username,
-                'password': wp_password
-            }
+        yield "🖼️ Uploading image to WordPress...", None
         
         # Step 1: Upload image
         media_id = None
-        if uploaded_image:
-            status_text.text("🖼️ Uploading image to WordPress...")
+        if image_file:
             media_id = upload_image_to_wordpress(
-                uploaded_image,
-                st.session_state.wp_config,
-                st.session_state.parsed_data['url_slug']
+                image_file,
+                wp_config,
+                parsed_data['url_slug']
             )
-            progress_bar.progress(40)
+        
+        yield "📤 Creating post with Rank Math meta...", None
         
         # Step 2: Create post
-        status_text.text("📤 Creating post with Rank Math meta...")
         result = create_wordpress_post(
-            st.session_state.parsed_data,
-            st.session_state.wp_config,
-            media_id
+            parsed_data,
+            wp_config,
+            media_id,
+            post_status
         )
-        progress_bar.progress(80)
-        
-        # Step 3: Complete
-        progress_bar.progress(100)
-        status_text.text("✅ Complete!")
         
         if result:
-            # Success
-            st.balloons()
-            st.success(f"✅ Post published successfully! (ID: {result['id']})")
-            
-            # Show results
-            col_result = st.columns(2)
-            
-            with col_result[0]:
-                st.metric("Post ID", result['id'])
-                st.metric("Status", result['status'])
-            
-            with col_result[1]:
-                st.metric("Date", result['date'][:10])
-                st.link_button("View Post", result['link'])
-            
-            # Export data
+            # Create download data
             export_data = {
                 'post_id': result['id'],
                 'title': result['title']['rendered'],
@@ -619,27 +507,493 @@ if st.button(
                 'published_at': datetime.now().isoformat()
             }
             
-            st.download_button(
-                "📥 Download Post Data",
-                data=json.dumps(export_data, indent=2),
-                file_name=f"post_{result['id']}.json",
-                mime="application/json",
-                use_container_width=True
-            )
+            # Save JSON to file
+            json_file = f"post_{result['id']}.json"
+            with open(json_file, 'w') as f:
+                json.dump(export_data, f, indent=2)
             
-            # Clear button for new post
-            if st.button("🔄 Create Another Post", use_container_width=True):
-                st.session_state.parsed_data = None
-                st.session_state.uploaded_image = None
-                st.rerun()
-                
+            success_msg = f"""
+            ✅ Post published successfully!
+            
+            Post ID: {result['id']}
+            Status: {result['status']}
+            Date: {result['date'][:10]}
+            Link: {result['link']}
+            
+            Click the download button to get post data.
+            """
+            
+            yield success_msg, json_file
         else:
-            st.error("❌ Failed to publish post")
+            yield "❌ Failed to publish post. Check WordPress configuration and try again.", None
             
     except Exception as e:
-        st.error(f"Error: {str(e)}")
+        yield f"❌ Error: {str(e)}", None
+
+def clear_all():
+    """Clear all inputs"""
+    return (
+        "",  # gemini_content
+        None,  # image
+        "https://cdgarment.com",  # wp_url
+        "",  # wp_username
+        "",  # wp_password
+        "draft",  # post_status
+        "",  # parse_status
+        "",  # seo_title
+        "",  # url_slug
+        "",  # meta_description
+        "",  # primary_keyword
+        "",  # tags
+        "",  # content_length
+        "",  # publish_status
+        None,  # download_file
+    )
 
-# ========== FOOTER ==========
-st.markdown("---")
-st.caption(f"CdGarment WordPress Publisher • {datetime.now().year}")
+# ========== GRADIO UI ==========
+with gr.Blocks(
+    title="CdGarment WordPress Publisher"
+) as demo:
+    
+    # State variables
+    parsed_data_state = gr.State(None)
+    wp_config_state = gr.State(None)
+    
+    # Header
+    gr.HTML("""
+    <div class="header">
+        <h1>🏭 CdGarment WordPress Publisher</h1>
+        <div class="badge">✓ Optimized for Rank Math SEO</div>
+    </div>
+    """)
+    
+    # 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]"""
+                
+                # Custom Quill editor
+                editor_html = gr.HTML(
+                    value=quill_template.format(
+                        id="gemini_editor",
+                        value=example_content
+                    )
+                )
+                
+                # Hidden input to capture editor content
+                gemini_content = gr.Textbox(visible=False)
+                
+                # JavaScript to sync editor with hidden input
+                sync_script = gr.HTML("""
+                <script>
+                function getEditorContent() {
+                    const quill = document.querySelector('.ql-editor').__quill;
+                    if (quill) {
+                        return quill.root.innerHTML;
+                    }
+                    return document.querySelector('.ql-editor').innerHTML;
+                }
+                
+                // Add event listener to parse button
+                document.addEventListener('DOMContentLoaded', function() {
+                    const parseBtn = document.querySelector('button:contains("Parse Content")') || document.querySelector('button:contains("🔍 Parse Content")');
+                    if (parseBtn) {
+                        parseBtn.addEventListener('click', function() {
+                            const content = getEditorContent();
+                            const hiddenInput = document.getElementById('gemini_editor');
+                            if (hiddenInput) {
+                                hiddenInput.value = content;
+                            }
+                        });
+                    }
+                });
+                </script>
+                """)
+                
+                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
+            with gr.Group():
+                gr.Markdown("### 🖼️ Image & Upload")
+                image_input = gr.File(
+                    label="Upload Image",
+                    file_types=["image"],
+                    type="filepath"
+                )
+                image_preview = gr.Image(
+                    label="Image Preview",
+                    height=200,
+                    visible=False
+                )
+                image_description = gr.Textbox(
+                    label="Image Description",
+                    placeholder="Auto-generated description will appear here",
+                    lines=3
+                )
+            
+            # WordPress settings section
+            with gr.Group():
+                gr.Markdown("### ⚙️ WordPress Settings")
+                
+                # Load environment variables
+                env_config = load_environment_variables()
+                
+                wp_url = gr.Textbox(
+                    label="WordPress URL",
+                    value=env_config['url'],
+                    placeholder="https://cdgarment.com"
+                )
+                wp_username = gr.Textbox(
+                    label="Username",
+                    value=env_config['username'],
+                    placeholder="admin"
+                )
+                wp_password = gr.Textbox(
+                    label="Application Password",
+                    value=env_config['password'],
+                    type="password",
+                    placeholder="••••••••"
+                )
+                post_status = gr.Radio(
+                    label="Post Status",
+                    choices=["draft", "publish"],
+                    value=env_config['status']
+                )
+                
+                save_config_btn = gr.Button("💾 Save Configuration", variant="secondary")
+    
+    # Parse status and preview
+    parse_status = gr.Textbox(label="Parse Status", visible=False)
+    
+    with gr.Row(visible=False) as preview_row:
+        with gr.Column():
+            seo_title = gr.Textbox(label="SEO Title")
+            url_slug = gr.Textbox(label="URL Slug")
+        
+        with gr.Column():
+            meta_description = gr.Textbox(label="Meta Description")
+            primary_keyword = gr.Textbox(label="Primary Keyword")
+        
+        with gr.Column():
+            tags = gr.Textbox(label="Tags")
+            content_length = gr.Textbox(label="Content Length")
+    
+    # Publish section
+    gr.Markdown("---")
+    gr.Markdown("### 🚀 Ready to Publish")
+    
+    # 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>")
+    
+    publish_btn = gr.Button("🚀 PUSH TO WORDPRESS", variant="primary", size="lg")
+    
+    # Publish results
+    publish_status = gr.Textbox(label="Publish Status", lines=5)
+    download_file = gr.File(label="Download Post Data", visible=False)
+    
+    # Footer
+    gr.Markdown("---")
+    gr.Markdown(f"CdGarment WordPress Publisher • {datetime.now().year}")
+    
+    # ========== EVENT HANDLERS ==========
+    
+    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>"
+        
+        return content_html, image_html, wp_html, status_html
+    
+    def check_wp_config(wp_url_val, wp_username_val, wp_password_val):
+        """Check if WordPress config is complete"""
+        return all([wp_url_val, wp_username_val, wp_password_val])
+    
+    # Image upload handler
+    def update_image_preview(image_file):
+        if image_file:
+            return gr.update(visible=True, value=image_file), True
+        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():
+            return (
+                gr.update(value="Please paste content first", visible=True),
+                gr.update(visible=False),
+                "", "", "", "", "",
+                None,
+                *update_status_indicators(False, False, False, 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[:7]
+            
+            return (
+                gr.update(value=parse_status_val, visible=True),
+                gr.update(visible=True),
+                seo_title_val,
+                url_slug_val,
+                meta_desc_val,
+                keyword_val,
+                tags_val,
+                content_len_val,
+                parsed,
+                *update_status_indicators(True, False, False, post_status_val)
+            )
+        else:
+            return (
+                gr.update(value=result, visible=True),
+                gr.update(visible=False),
+                "", "", "", "", "",
+                None,
+                *update_status_indicators(False, False, False, post_status_val)
+            )
+    
+    # Save config handler
+    def on_save_config(wp_url_val, wp_username_val, wp_password_val, post_status_val):
+        if all([wp_url_val, wp_username_val, wp_password_val]):
+            wp_config = {
+                'url': wp_url_val.rstrip('/'),
+                'username': wp_username_val,
+                'password': wp_password_val,
+                'status': post_status_val
+            }
+            return (
+                gr.update(value="✅ Configuration saved!"),
+                wp_config,
+                *update_status_indicators(False, False, True, post_status_val)
+            )
+        return (
+            gr.update(value="⚠️ Please fill all WordPress configuration fields"),
+            None,
+            *update_status_indicators(False, False, False, post_status_val)
+        )
+    
+    # Publish button handler
+    def on_publish_click(parsed_data, wp_config, image_file, post_status_val, wp_url_val, wp_username_val, wp_password_val):
+        if not parsed_data:
+            yield (
+                gr.update(value="❌ No parsed content available. Please parse content first"),
+                gr.update(visible=False),
+                *update_status_indicators(False, bool(image_file), bool(wp_config), post_status_val)
+            )
+            return
+        
+        wp_config_to_use = wp_config or {
+            'url': wp_url_val.rstrip('/') if wp_url_val else '',
+            'username': wp_username_val,
+            'password': wp_password_val,
+            'status': post_status_val
+        }
+        
+        # Update status during processing
+        yield (
+            gr.update(value="🖼️ Uploading image to WordPress..."),
+            gr.update(visible=False),
+            *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]
+            if download_file_val:
+                yield (
+                    gr.update(value=status_msg),
+                    gr.update(value=download_file_val, visible=True),
+                    *update_status_indicators(True, bool(image_file), True, post_status_val)
+                )
+            else:
+                yield (
+                    gr.update(value=status_msg),
+                    gr.update(visible=False),
+                    *update_status_indicators(True, bool(image_file), True, post_status_val)
+                )
+    
+    # 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())
+        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)
+    
+    # ========== BIND EVENT HANDLERS ==========
+    
+    # Image upload
+    image_input.change(
+        update_image_preview,
+        inputs=[image_input],
+        outputs=[image_preview, image_status]
+    )
+    
+    # Parse button
+    parse_btn.click(
+        on_parse_click,
+        inputs=[gemini_content, post_status],
+        outputs=[
+            parse_status,
+            preview_row,
+            seo_title,
+            url_slug,
+            meta_description,
+            primary_keyword,
+            tags,
+            content_length,
+            parsed_data_state,
+            content_status,
+            image_status,
+            wp_status,
+            status_indicator
+        ]
+    )
+    
+    # Save config button
+    save_config_btn.click(
+        on_save_config,
+        inputs=[wp_url, wp_username, wp_password, post_status],
+        outputs=[parse_status, wp_config_state, content_status, image_status, wp_status, status_indicator]
+    )
+    
+    # Publish button
+    publish_btn.click(
+        on_publish_click,
+        inputs=[parsed_data_state, wp_config_state, image_input, post_status, wp_url, wp_username, wp_password],
+        outputs=[publish_status, download_file, content_status, image_status, wp_status, status_indicator]
+    )
+    
+    # Clear button
+    clear_btn.click(
+        clear_all,
+        outputs=[
+            gemini_content,
+            image_input,
+            wp_url,
+            wp_username,
+            wp_password,
+            post_status,
+            parse_status,
+            seo_title,
+            url_slug,
+            meta_description,
+            primary_keyword,
+            tags,
+            content_length,
+            publish_status,
+            download_file
+        ]
+    )
+    
+    # Update status indicators on input changes
+    for input_component in [gemini_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],
+            outputs=[content_status, image_status, wp_status, status_indicator]
+        )
+
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7861,
+        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;
+        }
+        """,
+        ssr_mode=False
+    )