Spaces:

broadfield-dev
/

md2html2png

Sleeping

App Files Files Community

broadfield-dev commited on Oct 26

Commit

4414c6c

verified ·

1 Parent(s): 83bea90

Update app.py

Browse files

Files changed (1) hide show

app.py +23 -26

app.py CHANGED Viewed

@@ -1,22 +1,22 @@
 from flask import Flask, request, render_template_string, send_file, jsonify
 import markdown
-import imgkit
 import os
 import traceback
 from io import BytesIO
 import re
 import base64
-from pygments import highlight
 from pygments.lexers import get_lexer_by_name
 from pygments.formatters import HtmlFormatter
 from pygments.styles import get_all_styles
 app = Flask(__name__)
-TEMP_DIR = os.path.join(os.getcwd(), "temp")
 os.makedirs(TEMP_DIR, exist_ok=True)
-# --- FORMAT PARSING AND DETECTION (Unchanged) ---
 def parse_repo2markdown(text):
     components = []
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
@@ -55,7 +55,6 @@ def parse_changelog(text):
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
     text = request.form.get('markdown_text', '')
@@ -76,7 +75,6 @@ def parse_endpoint():
     except Exception as e:
         return jsonify({'error': f'Failed to parse: {e}'}), 500
-# --- HTML & PNG BUILDER (Unchanged but correct logic) ---
 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
@@ -96,8 +94,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; }}
@@ -116,13 +112,13 @@ def build_full_html(markdown_text, styles, include_fontawesome):
     full_html = f"""<!DOCTYPE html>
     <html><head><meta charset="UTF-8">{google_font_link}{fontawesome_link}<style>
-    #ouput-wrapper {{ background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block;}}
     {scoped_css}
     </style></head><body>{final_html_body}</body></html>"""
     return full_html
-# --- API ENDPOINT for Conversion (CHANGED) ---
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
     data = request.json
@@ -132,25 +128,34 @@ def convert_endpoint():
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
-        # Define options here to avoid repetition and add the required fix
-        options = {"quiet": "", 'encoding': "UTF-8", "--no-cache": ""}
         if data.get('download', False):
             download_type = data.get('download_type', 'png')
             if download_type == 'html':
                 return send_file(BytesIO(full_html.encode("utf-8")), as_attachment=True, download_name="output.html", mimetype="text/html")
             else:
-                png_bytes = imgkit.from_string(full_html, False, options=options)
                 return send_file(BytesIO(png_bytes), as_attachment=True, download_name="output.png", mimetype="image/png")
         else:
-            png_bytes = imgkit.from_string(full_html, False, options=options)
             png_base64 = base64.b64encode(png_bytes).decode('utf-8')
             return jsonify({'preview_html': full_html, 'preview_png_base64': png_base64})
     except Exception as e:
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
-# --- MAIN PAGE RENDERER (with corrected CSS) ---
 @app.route('/')
 def index():
     highlight_styles = sorted(list(get_all_styles()))
@@ -182,22 +187,19 @@ 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 */
             .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>
             <div class="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">
             <h2>Preview</h2>
             <div class="preview-header">
@@ -212,8 +214,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'),
@@ -243,7 +243,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();
@@ -303,6 +302,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)))

 from flask import Flask, request, render_template_string, send_file, jsonify
 import markdown
 import os
 import traceback
 from io import BytesIO
 import re
 import base64
 from pygments.lexers import get_lexer_by_name
 from pygments.formatters import HtmlFormatter
 from pygments.styles import get_all_styles
+# New import for the headless browser
+from playwright.sync_api import sync_playwright
 app = Flask(__name__)
+# Corrected line to use the universally writable /tmp directory
+TEMP_DIR = "/tmp/markdown_temp"
 os.makedirs(TEMP_DIR, exist_ok=True)
 def parse_repo2markdown(text):
     components = []
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
     text = request.form.get('markdown_text', '')
     except Exception as e:
         return jsonify({'error': f'Failed to parse: {e}'}), 500
 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
             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')};
         }}
         {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; }}
     full_html = f"""<!DOCTYPE html>
     <html><head><meta charset="UTF-8">{google_font_link}{fontawesome_link}<style>
+    body {{ background-color: transparent; margin: 0; padding: 0; }}
+    #output-wrapper {{ background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block;}}
     {scoped_css}
     </style></head><body>{final_html_body}</body></html>"""
     return full_html
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
     data = request.json
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
+        # --- REPLACEMENT FOR IMGKIT ---
+        with sync_playwright() as p:
+            browser = p.chromium.launch()
+            page = browser.new_page()
+            page.set_content(full_html)
+            # Locate the specific element we want to capture
+            element = page.locator("#output-wrapper")
+            # Take a screenshot of just that element
+            png_bytes = element.screenshot(type="png")
+            browser.close()
+        # --- END REPLACEMENT ---
         if data.get('download', False):
             download_type = data.get('download_type', 'png')
             if download_type == 'html':
                 return send_file(BytesIO(full_html.encode("utf-8")), as_attachment=True, download_name="output.html", mimetype="text/html")
             else:
                 return send_file(BytesIO(png_bytes), as_attachment=True, download_name="output.png", mimetype="image/png")
         else:
             png_base64 = base64.b64encode(png_bytes).decode('utf-8')
             return jsonify({'preview_html': full_html, 'preview_png_base64': png_base64})
     except Exception as e:
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
 @app.route('/')
 def index():
     highlight_styles = sorted(list(get_all_styles()))
             .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; }
             .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
     </head>
     <body>
         <h1>Intelligent Markdown Converter</h1>
         <form id="main-form" onsubmit="return false;">
             <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>
             <div class="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">
             <h2>Preview</h2>
             <div class="preview-header">
             <div id="png-preview-container" class="preview-container"></div>
         </div>
         <script>
             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'),
                     include_fontawesome: document.getElementById('include_fontawesome').checked,
                 };
             }
             generateBtn.addEventListener('click', async () => {
                 generateBtn.textContent = 'Generating...'; generateBtn.disabled = true; errorBox.style.display = 'none';
                 const payload = buildPayload();
     """, highlight_styles=highlight_styles)
 if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)