Update app.py

app.py

@@ -839,7 +839,8 @@ class MarkdownToPDFAgent:
             
             return output_files
 
-# Gradio Interface for Hugging Face
+
+# Helper functions for the Gradio interface
 def load_sample():
     """Load a sample markdown document."""
     return """# Sample Markdown Document
@@ -870,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.
     
@@ -895,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
@@ -921,106 +924,393 @@ def process_markdown(markdown_text, page_size, font_size, font_name,
         os.unlink(temp_md_path)
         
         if output_file:
-            return output_file
+            return output_file, "✅ PDF generated successfully!"
         else:
-            return None
+            return None, "❌ Error generating PDF. Please check your markdown syntax."
     except Exception as e:
         logger.error(f"Error processing markdown: {e}")
-        return None
+        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", theme=gr.themes.Soft()) as app:
-    gr.Markdown(
-        """
-        # 📝 MarkdownMuse
-        
-        Transform your Markdown files into beautifully formatted PDFs with ease.
-        """
-    )
+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.Row():
+        # Input Section
         with gr.Column(scale=1):
-            gr.Markdown("### 📝 Input")
+            gr.Markdown("## 📄 Input", elem_id="section-title")
             
             markdown_input = gr.TextArea(
                 placeholder="Enter your markdown content here...", 
                 label="Markdown Content",
-                lines=15
+                lines=15,
+                elem_id="markdown-input"
             )
             
-            sample_btn = gr.Button("📋 Load Sample")
+            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.Accordion("⚙️ PDF Settings", open=False):
-                page_size = gr.Radio(
-                    ["A4", "Letter"], 
-                    label="Page Size",
-                    value="A4"
-                )
-                
-                font_size = gr.Slider(
-                    minimum=8, 
-                    maximum=14, 
-                    value=10, 
-                    step=1, 
-                    label="Base Font Size (pt)"
-                )
-                
-                font_name = gr.Dropdown(
-                    ["Helvetica", "Times-Roman", "Courier"], 
-                    label="Font Family",
-                    value="Helvetica"
-                )
-                
-                margin_size = gr.Slider(
-                    minimum=0.5, 
-                    maximum=2.0, 
-                    value=0.75, 
-                    step=0.25, 
-                    label="Margins (inches)"
-                )
-                
-                include_toc = gr.Checkbox(
-                    value=True, 
-                    label="Include Table of Contents"
-                )
-                
-            with gr.Accordion("🧠 AI Enhancement", open=False):
-                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",
-                    visible=True
-                )
-                
-                enhancement_instructions = gr.TextArea(
-                    placeholder="Optional: Provide specific instructions for how the AI should enhance your markdown...",
-                    label="Enhancement Instructions",
-                    lines=3,
-                    visible=True
-                )
-            
-            convert_btn = gr.Button("🔄 Convert to PDF", variant="primary")
+            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"
+                            )
+                        
+                        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")
+            gr.Markdown("## 📑 Output", elem_id="section-title")
             
-            output_pdf = gr.File(label="Generated PDF")
+            status = gr.Markdown("✨ Ready to convert your markdown to PDF.", elem_id="status")
+            output_pdf = gr.File(label="Generated PDF", elem_id="output-pdf")
+            
+            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>
+                
+                <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>
+                
+                <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>
+                    
+                    <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>
+                    
+                    <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)
     
-    # Add visibility toggle for API key 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,
         inputs=[
@@ -1031,22 +1321,21 @@ with gr.Blocks(title="MarkdownMuse", theme=gr.themes.Soft()) as app:
             margin_size,
             include_toc,
             use_ai,
-            api_key,
             enhancement_instructions
         ],
-        outputs=output_pdf
-    )
-    
-    gr.Markdown(
-        """
-        ### 📚 About MarkdownMuse
-        
-        This tool allows you to convert Markdown documents to beautifully formatted PDFs. Use the options to customize your output.
-        
-        Made with ❤️ using Gradio and ReportLab | © 2024
-        """
+        outputs=[
+            output_pdf,
+            status
+        ]
     )
 
 # 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()