Update app.py

app.py

@@ -838,7 +838,9 @@ class MarkdownToPDFAgent:
                     output_files.append(processed_file)
             
             return output_files
-    # Helper functions for the Gradio interface
+
+
+# Helper functions for the Gradio interface
 def load_sample():
     """Load a sample markdown document."""
     return """# Sample Markdown Document
@@ -869,7 +871,7 @@ def hello_world():
 """
 
 def process_markdown(markdown_text, page_size, font_size, font_name, 
-                     margin_size, include_toc, use_ai, api_key, enhancement_instructions):
+                     margin_size, include_toc, use_ai, enhancement_instructions):
     """
     Process markdown text and generate a PDF.
     
@@ -894,12 +896,14 @@ def process_markdown(markdown_text, page_size, font_size, font_name,
         include_toc=include_toc
     )
     
+    # Get Gemini API key from environment
+    api_key = os.environ.get('GOOGLE_API_KEY')
+    
     # Setup AI enhancement if requested
     enhance = False
     if use_ai and api_key:
-        if api_key:
-            success = agent.setup_from_gemini(api_key)
-            enhance = success
+        success = agent.setup_from_gemini(api_key)
+        enhance = success
     
     try:
         # Create a temporary file for the markdown content
@@ -927,189 +931,385 @@ def process_markdown(markdown_text, page_size, font_size, font_name,
         logger.error(f"Error processing markdown: {e}")
         return None, f"❌ Error: {str(e)}"
 
+
+# Check if the API key is available in the environment
+has_api_key = bool(os.environ.get('GOOGLE_API_KEY'))
+
+# Custom CSS for styling
+custom_css = """
+<style>
+:root {
+    --primary-color: #6366F1;
+    --secondary-color: #8B5CF6;
+    --accent-color: #4f46e5;
+    --text-color: #1F2937;
+    --light-text: #F9FAFB;
+    --border-color: #E5E7EB;
+    --background-color: #F3F4F6;
+    --card-background: #FFFFFF;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --rounded-sm: 0.375rem;
+    --rounded-md: 0.5rem;
+    --rounded-lg: 0.75rem;
+}
+
+.header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: var(--light-text);
+    padding: 2rem;
+    border-radius: var(--rounded-lg);
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.05),
+        rgba(255, 255, 255, 0.05) 10px,
+        rgba(255, 255, 255, 0) 10px,
+        rgba(255, 255, 255, 0) 20px
+    );
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header p {
+    font-size: 1.25rem;
+    opacity: 0.9;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.card {
+    background: var(--card-background);
+    border-radius: var(--rounded-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.section-title {
+    color: var(--primary-color);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.footer {
+    text-align: center;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: var(--background-color);
+    border-radius: var(--rounded-lg);
+    font-size: 0.9rem;
+    color: var(--text-color);
+    box-shadow: var(--shadow-sm);
+}
+
+.feature-icon {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+    width: 2.5rem;
+    height: 2.5rem;
+    line-height: 2.5rem;
+    text-align: center;
+    border-radius: 50%;
+    margin-right: 0.75rem;
+    font-size: 1.25rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.button-row {
+    display: flex;
+    gap: 0.75rem;
+    margin: 1rem 0;
+}
+
+.primary-btn {
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
+    transition: all 0.3s ease !important;
+    transform: translateY(0);
+    box-shadow: var(--shadow-md) !important;
+    font-weight: 600 !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg) !important;
+}
+
+.secondary-btn {
+    background: var(--background-color) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    font-weight: 500 !important;
+}
+
+.tip-box {
+    background: rgba(99, 102, 241, 0.1);
+    border-left: 4px solid var(--primary-color);
+    padding: 1rem;
+    margin: 1rem 0;
+    border-radius: var(--rounded-sm);
+}
+
+.tip-title {
+    color: var(--primary-color);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+/* Tab styling */
+.tab-active {
+    border-bottom: 3px solid var(--primary-color);
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+/* Customize Gradio components */
+.gr-box {
+    border-radius: var(--rounded-md) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+.gr-button {
+    border-radius: var(--rounded-md) !important;
+}
+
+.gr-form {
+    border-radius: var(--rounded-md) !important;
+    border: 1px solid var(--border-color) !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+.gr-input {
+    border-radius: var(--rounded-md) !important;
+}
+
+.gr-checkbox {
+    border-radius: var(--rounded-sm) !important;
+}
+
+.gr-panel {
+    border-radius: var(--rounded-md) !important;
+}
+
+.gr-accordion {
+    border-radius: var(--rounded-md) !important;
+}
+</style>
+"""
+
 # Define the Gradio interface
-with gr.Blocks(title="MarkdownMuse") as demo:
-    # Custom CSS for enhanced UI
-    demo.load(css="""
-        .header {
-            background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
-            color: white;
-            padding: 20px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
-        
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 15px;
-        }
-        
-        .card {
-            background: white;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            margin-bottom: 20px;
-        }
-        
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding: 15px;
-            background: #f5f5f5;
-            border-radius: 10px;
-            font-size: 14px;
-        }
-        
-        .primary-btn {
-            background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
-        }
-        
-        .icon {
-            vertical-align: middle;
-            margin-right: 5px;
-        }
-        
-        .section-title {
-            border-bottom: 2px solid #f0f0f0;
-            padding-bottom: 10px;
-            margin-bottom: 15px;
-            color: #4B5563;
-        }
-        
-        .tab-active {
-            border-bottom: 3px solid #6366F1;
-        }
+with gr.Blocks(title="MarkdownMuse", theme=gr.themes.Soft()) as demo:
+    # Header with custom styling
+    gr.HTML(custom_css + """
+        <div class="header">
+            <h1>📝 MarkdownMuse</h1>
+            <p>Transform your Markdown files into beautifully formatted PDFs with a single click. 
+               Professional-looking documents made simple.</p>
+        </div>
     """)
     
-    with gr.Column():
-        # Header
-        gr.HTML("""
-            <div class="header">
-                <h1>📝 MarkdownMuse</h1>
-                <p>Transform your Markdown files into beautifully formatted PDFs with ease</p>
-            </div>
-        """)
-        
-        with gr.Row(equal_height=True):
-            # Input Section
-            with gr.Column(scale=1, elem_classes="card"):
-                gr.Markdown("## 📄 Input", elem_classes="section-title")
-                
-                markdown_input = gr.TextArea(
-                    placeholder="Enter your markdown content here...", 
-                    label="Markdown Content",
-                    lines=15,
-                    max_lines=30
-                )
-                
-                with gr.Row():
-                    sample_btn = gr.Button("📋 Load Sample", size="sm")
-                    clear_btn = gr.Button("🗑️ Clear", size="sm")
-                
-                with gr.Tabs():
-                    with gr.TabItem("📝 PDF Settings"):
-                        with gr.Row():
-                            with gr.Column(scale=1):
-                                page_size = gr.Radio(
-                                    ["A4", "Letter"], 
-                                    label="Page Size",
-                                    value="A4"
-                                )
-                                include_toc = gr.Checkbox(
-                                    value=True, 
-                                    label="Include Table of Contents"
-                                )
-                            
-                            with gr.Column(scale=1):
-                                font_name = gr.Dropdown(
-                                    ["Helvetica", "Times-Roman", "Courier"], 
-                                    label="Font Family",
-                                    value="Helvetica"
-                                )
-                                font_size = gr.Slider(
-                                    minimum=8, 
-                                    maximum=14, 
-                                    value=10, 
-                                    step=1, 
-                                    label="Base Font Size (pt)"
-                                )
-                        
-                        margin_size = gr.Slider(
-                            minimum=0.5, 
-                            maximum=2.0, 
-                            value=0.75, 
-                            step=0.25, 
-                            label="Margins (inches)"
-                        )
-                        
-                    with gr.TabItem("🧠 AI Enhancement"):
-                        use_ai = gr.Checkbox(
-                            value=False,
-                            label="Enable AI Enhancement"
-                        )
-                        
-                        api_key = gr.Textbox(
-                            placeholder="Enter your Google Gemini API key...",
-                            label="Google Gemini API Key",
-                            type="password"
-                        )
+    with gr.Row():
+        # Input Section
+        with gr.Column(scale=1):
+            gr.Markdown("## 📄 Input", elem_id="section-title")
+            
+            markdown_input = gr.TextArea(
+                placeholder="Enter your markdown content here...", 
+                label="Markdown Content",
+                lines=15,
+                elem_id="markdown-input"
+            )
+            
+            with gr.Row(elem_id="button-row"):
+                sample_btn = gr.Button("📋 Load Sample", size="sm", elem_classes="secondary-btn")
+                clear_btn = gr.Button("🗑️ Clear", size="sm", elem_classes="secondary-btn")
+            
+            with gr.Tabs():
+                with gr.TabItem("📝 PDF Settings", elem_classes="tab-item"):
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            page_size = gr.Radio(
+                                ["A4", "Letter"], 
+                                label="Page Size",
+                                value="A4",
+                                elem_id="page-size"
+                            )
+                            include_toc = gr.Checkbox(
+                                value=True, 
+                                label="Include Table of Contents",
+                                elem_id="include-toc"
+                            )
                         
-                        enhancement_instructions = gr.TextArea(
-                            placeholder="Optional: Provide specific instructions for how the AI should enhance your markdown...",
-                            label="Enhancement Instructions",
-                            lines=3
-                        )
-                
-                convert_btn = gr.Button("🔄 Convert to PDF", variant="primary", elem_classes="primary-btn")
+                        with gr.Column(scale=1):
+                            font_name = gr.Dropdown(
+                                ["Helvetica", "Times-Roman", "Courier"], 
+                                label="Font Family",
+                                value="Helvetica",
+                                elem_id="font-name"
+                            )
+                            font_size = gr.Slider(
+                                minimum=8, 
+                                maximum=14, 
+                                value=10, 
+                                step=1, 
+                                label="Base Font Size (pt)",
+                                elem_id="font-size"
+                            )
+                    
+                    margin_size = gr.Slider(
+                        minimum=0.5, 
+                        maximum=2.0, 
+                        value=0.75, 
+                        step=0.25, 
+                        label="Margins (inches)",
+                        elem_id="margin-size"
+                    )
+                    
+                with gr.TabItem("🧠 AI Enhancement", elem_classes="tab-item"):
+                    use_ai = gr.Checkbox(
+                        value=has_api_key, 
+                        label="Enable AI Enhancement",
+                        elem_id="use-ai"
+                    )
+                    
+                    # Only show API key message if no key is in environment
+                    if not has_api_key:
+                        gr.Markdown("""
+                        > **Note:** To use AI enhancement, add your Google Gemini API key to the Hugging Face Space secrets as `GOOGLE_API_KEY`.
+                        """, elem_id="api-key-note")
+                    else:
+                        gr.Markdown("""
+                        > **API Key Detected!** AI enhancement is available.
+                        """, elem_id="api-key-success")
+                    
+                    enhancement_instructions = gr.TextArea(
+                        placeholder="Provide specific instructions for how the AI should enhance your markdown... (Optional)",
+                        label="Enhancement Instructions",
+                        lines=3,
+                        elem_id="enhancement-instructions"
+                    )
+            
+            convert_btn = gr.Button("🔄 Convert to PDF", variant="primary", elem_classes="primary-btn")
+        
+        # Output Section
+        with gr.Column(scale=1):
+            gr.Markdown("## 📑 Output", elem_id="section-title")
+            
+            status = gr.Markdown("✨ Ready to convert your markdown to PDF.", elem_id="status")
+            output_pdf = gr.File(label="Generated PDF", elem_id="output-pdf")
             
-            # Output Section
-            with gr.Column(scale=1, elem_classes="card"):
-                gr.Markdown("## 📑 Output", elem_classes="section-title")
+            with gr.Accordion("💡 Markdown Tips", open=False, elem_id="markdown-tips"):
+                gr.HTML("""
+                <div class="tip-box">
+                    <div class="tip-title">✨ Basic Syntax</div>
+                    <ul>
+                        <li><strong>Headings</strong>: Use <code>#</code> for h1, <code>##</code> for h2, etc.</li>
+                        <li><strong>Bold</strong>: Surround text with <code>**double asterisks**</code></li>
+                        <li><strong>Italic</strong>: Surround text with <code>*single asterisks*</code></li>
+                        <li><strong>Lists</strong>: Start lines with <code>-</code> or <code>*</code> for bullets, <code>1.</code> for numbered</li>
+                        <li><strong>Links</strong>: <code>[link text](http://example.com)</code></li>
+                        <li><strong>Images</strong>: <code>![alt text](image.jpg)</code></li>
+                    </ul>
+                </div>
                 
-                status = gr.Markdown("Ready to convert your markdown to PDF.")
-                output_pdf = gr.File(label="Generated PDF")
+                <div class="tip-box">
+                    <div class="tip-title">🔍 Advanced Features</div>
+                    <ul>
+                        <li><strong>Tables</strong>: Use <code>|</code> to separate columns and <code>-</code> for header rows</li>
+                        <li><strong>Code Blocks</strong>: Wrap with triple backticks (<code>```</code> code <code>```</code>)</li>
+                        <li><strong>Blockquotes</strong>: Start lines with <code>></code></li>
+                        <li><strong>Horizontal Rule</strong>: Three dashes <code>---</code></li>
+                    </ul>
+                </div>
                 
-                with gr.Accordion("💡 Markdown Tips", open=False):
-                    gr.Markdown("""
-                    ### Basic Syntax
-                    - **Headings**: Use `#` for h1, `##` for h2, etc.
-                    - **Bold**: Surround text with `**double asterisks**`
-                    - **Italic**: Surround text with `*single asterisks*`
-                    - **Lists**: Start lines with `-` or `*` for bullets, `1.` for numbered
-                    - **Links**: `[link text](http://example.com)`
-                    - **Images**: `![alt text](image.jpg)`
+                <p><a href="https://www.markdownguide.org/basic-syntax/" target="_blank">Learn more about Markdown syntax →</a></p>
+                """)
+            
+            with gr.Accordion("🚀 Features", open=False, elem_id="features"):
+                gr.HTML("""
+                <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem;">
+                    <div style="flex: 1; min-width: 200px;">
+                        <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
+                            <span class="feature-icon">📄</span>
+                            <strong>PDF Conversion</strong>
+                        </div>
+                        <p>Transform any markdown document into a professionally formatted PDF with proper styling.</p>
+                    </div>
                     
-                    ### Advanced Features
-                    - **Tables**: Use `|` to separate columns and `-` for header rows
-                    - **Code Blocks**: Wrap with triple backticks (``` code ```)
-                    - **Blockquotes**: Start lines with `>`
+                    <div style="flex: 1; min-width: 200px;">
+                        <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
+                            <span class="feature-icon">🧠</span>
+                            <strong>AI Enhancement</strong>
+                        </div>
+                        <p>Use AI to improve content formatting, fix grammar, and enhance readability.</p>
+                    </div>
                     
-                    [Learn more about Markdown syntax](https://www.markdownguide.org/basic-syntax/)
-                    """)
-        
-        # Footer
-        gr.HTML("""
-            <div class="footer">
-                <p>MarkdownMuse | A powerful Markdown to PDF converter with AI enhancement capabilities</p>
-                <p>Made with ❤️ using Python, ReportLab, and Gradio | © 2024</p>
-            </div>
-        """)
+                    <div style="flex: 1; min-width: 200px;">
+                        <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
+                            <span class="feature-icon">🎨</span>
+                            <strong>Custom Styling</strong>
+                        </div>
+                        <p>Control fonts, sizes, margins, and other style elements to match your needs.</p>
+                    </div>
+                    
+                    <div style="flex: 1; min-width: 200px;">
+                        <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
+                            <span class="feature-icon">📑</span>
+                            <strong>Table of Contents</strong>
+                        </div>
+                        <p>Automatically generate a structured table of contents from document headings.</p>
+                    </div>
+                </div>
+                """)
+    
+    # Footer
+    gr.HTML("""
+        <div class="footer">
+            <p><strong>MarkdownMuse</strong> | A powerful Markdown to PDF converter with AI enhancement capabilities</p>
+            <p>Made with ❤️ using Python, ReportLab, and Gradio | <a href="https://github.com/your-username/markdownmuse" target="_blank">GitHub</a></p>
+        </div>
+    """)
     
     # Set up event handlers
     sample_btn.click(load_sample, outputs=markdown_input)
     clear_btn.click(lambda: "", outputs=markdown_input)
     
-    # Update visibility of AI options based on checkbox
-    use_ai.change(
-        lambda x: [gr.update(visible=x), gr.update(visible=x)],
-        inputs=[use_ai],
-        outputs=[api_key, enhancement_instructions]
-    )
-    
     # Process markdown and generate PDF
     convert_btn.click(
         process_markdown,
@@ -1121,7 +1321,6 @@ with gr.Blocks(title="MarkdownMuse") as demo:
             margin_size,
             include_toc,
             use_ai,
-            api_key,
             enhancement_instructions
         ],
         outputs=[
@@ -1132,4 +1331,11 @@ with gr.Blocks(title="MarkdownMuse") as demo:
 
 # Launch the app
 if __name__ == "__main__":
-    app.launch()
+    try:
+        print("Starting MarkdownMuse application...")
+        demo.launch(server_name="0.0.0.0", server_port=7860)
+        print("MarkdownMuse application launched successfully!")
+    except Exception as e:
+        print(f"ERROR LAUNCHING APP: {str(e)}")
+        import traceback
+        traceback.print_exc()