Update app.py

app.py

@@ -77,7 +77,7 @@ def parse_endpoint():
     except Exception as e:
         return jsonify({'error': f'Failed to parse: {e}'}), 500
 
-# --- HTML & PNG BUILDER (Unchanged but correct logic) ---
+# --- HTML & PNG BUILDER (Unchanged) ---
 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
@@ -97,8 +97,6 @@ def build_full_html(markdown_text, styles, include_fontawesome):
             font-family: {font_family}; font-size: {styles.get('font_size', '16')}px;
             color: {styles.get('text_color', '#333')}; background-color: {styles.get('background_color', '#fff')};
         }}
-        /* ... other scoped styles ... */
-        
         {wrapper_id} table {{ border-collapse: collapse; width: 100%; }}
         {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
         {wrapper_id} th {{ background-color: #f2f2f2; }}
@@ -127,7 +125,7 @@ def build_full_html(markdown_text, styles, include_fontawesome):
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
     data = request.json
-    temp_html_path = None # Initialize path
+    temp_html_path = None
     try:
         full_html = build_full_html(
             markdown_text=data.get('markdown_text', ''),
@@ -135,10 +133,14 @@ def convert_endpoint():
             include_fontawesome=data.get('include_fontawesome', False)
         )
         
-        # Define options for wkhtmltoimage, removing the unsupported --no-cache
-        options = {"quiet": "", 'encoding': "UTF-8"}
+        # *** THIS IS THE ONLY CHANGE IN THIS FILE ***
+        # Add the 'xvfb' option to tell imgkit to use the virtual display.
+        options = {
+            "quiet": "", 
+            'encoding': "UTF-8",
+            'xvfb': ''
+        }
 
-        # --- REQUIRED CHANGE 2: Manually create and use a temporary file ---
         temp_html_path = os.path.join(TEMP_DIR, f"{uuid.uuid4()}.html")
         with open(temp_html_path, "w", encoding="utf-8") as f:
             f.write(full_html)
@@ -148,11 +150,9 @@ def convert_endpoint():
             if download_type == 'html':
                 return send_file(BytesIO(full_html.encode("utf-8")), as_attachment=True, download_name="output.html", mimetype="text/html")
             else:
-                # Use from_file instead of from_string
                 png_bytes = imgkit.from_file(temp_html_path, False, options=options)
                 return send_file(BytesIO(png_bytes), as_attachment=True, download_name="output.png", mimetype="image/png")
         else:
-            # Use from_file instead of from_string
             png_bytes = imgkit.from_file(temp_html_path, False, options=options)
             png_base64 = base64.b64encode(png_bytes).decode('utf-8')
             return jsonify({'preview_html': full_html, 'preview_png_base64': png_base64})
@@ -161,11 +161,10 @@ def convert_endpoint():
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
     finally:
-        # --- REQUIRED CHANGE 3: Clean up the temporary file ---
         if temp_html_path and os.path.exists(temp_html_path):
             os.remove(temp_html_path)
 
-# --- MAIN PAGE RENDERER (with corrected CSS) ---
+# --- MAIN PAGE RENDERER (Unchanged) ---
 @app.route('/')
 def index():
     highlight_styles = sorted(list(get_all_styles()))
@@ -197,14 +196,13 @@ def index():
             .component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
             .component-container { border: 1px solid #e0e0e0; border-radius: 5px; background: #fafafa; }
             .component-header { background: #f1f1f1; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 10px; }
-            .component-content textarea { height: 150px; } /* <-- FIXED: Taller text area */
+            .component-content textarea { height: 150px; }
             .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
     </head>
     <body>
         <h1>Intelligent Markdown Converter</h1>
         <form id="main-form" onsubmit="return false;">
-            <!-- Input and Styling sections -->
             <fieldset><legend>1. Load Content</legend><div id="info-box" class="info"></div><textarea id="markdown-text-input" name="markdown_text" rows="8"></textarea><div style="margin-top: 10px; display: flex; align-items: center; gap: 10px;"><label for="markdown-file-input">Or upload a file:</label><input type="file" id="markdown-file-input" name="markdown_file" accept=".md,.txt,text/markdown"></div><div style="margin-top: 15px;"><button type="button" id="load-btn" class="action-btn">Load & Analyze</button></div></fieldset>
             <fieldset id="components-fieldset" style="display:none;"><legend>2. Select Components</legend><div class="selection-controls"><button type="button" onclick="toggleAllComponents(true)">Select All</button><button type="button" onclick="toggleAllComponents(false)">Deselect All</button></div><div id="components-container" class="component-grid"></div></fieldset>
             <fieldset><legend>3. Configure Styles</legend><div class="style-grid"><div><label>Font Family:</label><select id="font_family"><optgroup label="Sans-Serif"><option value="'Arial', sans-serif">Arial</option><option value="'Roboto', sans-serif">Roboto</option></optgroup><optgroup label="Serif"><option value="'Times New Roman', serif">Times New Roman</option><option value="'Georgia', serif">Georgia</option></optgroup></select></div><div><label>Font Size (px):</label><input type="number" id="font_size" value="16"></div><div><label>Highlight Theme:</label><select id="highlight_theme"><option value="none">None</option>{% for style in highlight_styles %}<option value="{{ style }}" {% if style == 'default' %}selected{% endif %}>{{ style }}</option>{% endfor %}</select></div><div><label>Text Color:</label><input type="color" id="text_color" value="#333333"></div><div><label>Background Color:</label><input type="color" id="background_color" value="#ffffff"></div><div><label>Code Padding (px):</label><input type="number" id="code_padding" value="15"></div></div><div><input type="checkbox" id="include_fontawesome"><label for="include_fontawesome">Include Font Awesome</label></div><div><label for="custom_css">Custom CSS:</label><textarea id="custom_css" rows="3"></textarea></div></fieldset>
@@ -227,8 +225,6 @@ def index():
             <div id="png-preview-container" class="preview-container"></div>
         </div>
         <script>
-            // --- All JavaScript is unchanged from the previous correct version ---
-            // It correctly gathers style info without modifying the parent page.
             const loadBtn = document.getElementById('load-btn'), generateBtn = document.getElementById('generate-btn'),
                   downloadHtmlBtn = document.getElementById('download-html-btn'), downloadPngBtn = document.getElementById('download-png-btn'),
                   markdownTextInput = document.getElementById('markdown-text-input'), markdownFileInput = document.getElementById('markdown-file-input'),
@@ -258,7 +254,6 @@ def index():
                     include_fontawesome: document.getElementById('include_fontawesome').checked,
                 };
             }
-            loadBtn.addEventListener('click', async () => { /* Logic unchanged */ });
             generateBtn.addEventListener('click', async () => {
                 generateBtn.textContent = 'Generating...'; generateBtn.disabled = true; errorBox.style.display = 'none';
                 const payload = buildPayload();
@@ -318,6 +313,4 @@ def index():
     """, highlight_styles=highlight_styles)
 
 if __name__ == "__main__":
-    # Ensure you have installed the required libraries:
-    # pip install Flask markdown imgkit pygments
     app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))