Spaces:

broadfield-dev
/

markdown2png

Paused

App Files Files Community

broadfield-dev commited on Dec 22, 2025

Commit

f6e05b2

verified ·

1 Parent(s): fb80aa3

Update app.py

Browse files

Files changed (1) hide show

app.py +84 -124

app.py CHANGED Viewed

@@ -17,12 +17,10 @@ os.makedirs(TEMP_DIR, exist_ok=True)
 def parse_repo2markdown(text):
     components = []
-    # Extract File Structure specifically
     struct_match = re.search(r'## File Structure\n([\s\S]*?)(?=\n### File:|\Z)', text)
     if struct_match:
         components.append({'type': 'structure', 'filename': 'File Structure', 'content': struct_match.group(1).strip()})
-    # Pattern to capture file sections
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
     for match in pattern.finditer(text):
         filename = match.group(1).strip()
@@ -45,7 +43,7 @@ def parse_changelog(text):
     components = []
     parts = re.split(r'^(## \[\d+\.\d+\.\d+.*?\].*?)$', text, flags=re.MULTILINE)
     if parts[0].strip():
-        components.append({'type': 'intro', 'filename': 'Changelog Header', 'content': parts[0].strip()})
     for i in range(1, len(parts), 2):
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
@@ -60,11 +58,16 @@ def parse_agent_action(text):
         components.append({'type': 'file', 'filename': match.group(1).strip(), 'content': match.group(2).strip()})
     return components
-def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
-    font_family = styles.get('font_family', "'Inter', sans-serif")
-    google_font_name = font_family.split(',')[0].strip("'\"")
-    google_font_link = f'<link href="https://fonts.googleapis.com/css2?family={google_font_name.replace(" ", "+")}:wght@400;700&display=swap" rel="stylesheet">'
     highlight_theme = styles.get('highlight_theme', 'monokai')
     pygments_css = ""
@@ -90,8 +93,7 @@ def build_full_html(markdown_text, styles, include_fontawesome):
         {styles.get('custom_css', '')}
     """
     html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables', 'codehilite', 'nl2br'])
-    fa = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">' if include_fontawesome else ""
-    return f"<!DOCTYPE html><html><head><meta charset='UTF-8'>{google_font_link}{fa}<style>{scoped_css}</style></head><body><div id='output-wrapper'>{html_content}</div></body></html>"
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
@@ -115,18 +117,28 @@ def parse_endpoint():
 def convert_endpoint():
     data = request.json
     try:
-        full_html = build_full_html(data.get('markdown_text', ''), data.get('styles', {}), data.get('include_fontawesome', True))
-        options = {"quiet": "", "encoding": "UTF-8", "width": 1024, "disable-smart-width": ""}
         if data.get('download', False):
             if data.get('download_type') == 'html':
-                return send_file(BytesIO(full_html.encode("utf-8")), as_attachment=True, download_name="output.html", mimetype="text/html")
-            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")
-        png_bytes = imgkit.from_string(full_html, False, options=options)
         return jsonify({
-            'preview_html': full_html,
             'preview_png_base64': base64.b64encode(png_bytes).decode('utf-8')
         })
     except Exception as e:
@@ -144,26 +156,23 @@ def index():
             :root { --bg: #f4f7f6; --text: #333; --card: #fff; --border: #ddd; --primary: #5a32a3; }
             body.dark-mode { --bg: #1a1a1a; --text: #eee; --card: #252525; --border: #444; }
             body { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: var(--bg); color: var(--text); line-height: 1.4; transition: background 0.3s; }
-            h1 { text-align: center; }
             fieldset { border: 1px solid var(--border); background: var(--card); padding: 20px; margin-bottom: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
             legend { font-weight: bold; padding: 0 10px; color: var(--primary); }
             textarea { width: 100%; border-radius: 6px; padding: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: 'Fira Code', monospace; box-sizing: border-box; }
             .format-banner { background: var(--primary); color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; display: inline-block; margin-bottom: 15px; font-weight: bold; }
             .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
             .comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
-            .comp-card { background: var(--card); border: 1px solid var(--border); padding: 12px; border-radius: 8px; position: relative; }
             .comp-card textarea { height: 60px; font-size: 11px; margin-top: 8px; opacity: 0.8; pointer-events: none; resize: none; }
-            .controls { display: flex; flex-direction: column; gap: 8px; }
             .action-bar { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
             button { padding: 12px 24px; cursor: pointer; border: none; border-radius: 6px; font-weight: bold; transition: opacity 0.2s; }
             .btn-primary { background: var(--primary); color: #fff; flex: 1; min-width: 200px; }
             .btn-secondary { background: #333; color: #fff; border: 1px solid #555; }
-            .btn-download { background: #28a745; color: white; }
             .preview-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
-            .preview-box { background: #fff; border: 1px solid #ddd; padding: 0; border-radius: 8px; overflow: hidden; height: 600px; display: flex; flex-direction: column; }
-            .preview-header { background: #eee; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #333; border-bottom: 1px solid #ddd; }
             .preview-content { flex: 1; overflow: auto; padding: 15px; }
-            @media (max-width: 900px) { .preview-section { grid-template-columns: 1fr; } }
         </style>
     </head>
     <body>
@@ -174,7 +183,7 @@ def index():
         <fieldset>
             <legend>1. Input Source</legend>
-            <textarea id="md-input" rows="10" placeholder="Paste your Markdown, Repo2Markdown, or Agent Action text here..."></textarea>
             <div class="action-bar"><button onclick="analyze()" class="btn-primary" id="load-btn">Analyze & Extract Components</button></div>
         </fieldset>
@@ -189,110 +198,75 @@ def index():
         <fieldset>
             <legend>3. Visual Styling</legend>
             <div class="style-grid">
-                <div class="controls"><label>Font Family</label>
                     <select id="f_family">
-                        <option value="'Inter', sans-serif">Inter (Modern)</option>
-                        <option value="'Fira Code', monospace">Fira Code (Monospace)</option>
-                        <option value="'Playfair Display', serif">Playfair (Serif)</option>
-                        <option value="'Roboto', sans-serif">Roboto</option>
                     </select>
                 </div>
-                <div class="controls"><label>Font Size (px)</label><input type="number" id="f_size" value="16"></div>
-                <div class="controls"><label>Line Height</label><input type="number" id="l_height" value="1.6" step="0.1"></div>
-                <div class="controls"><label>Text Color</label><input type="color" id="t_color" value="#333333"></div>
-                <div class="controls"><label>Background</label><input type="color" id="b_color" value="#ffffff"></div>
-                <div class="controls"><label>Syntax Theme</label>
                     <select id="h_theme">
                         {% for s in styles %}<option value="{{s}}" {% if s == 'monokai' %}selected{% endif %}>{{s}}</option>{% endfor %}
                     </select>
                 </div>
             </div>
-            <div style="margin-top:20px;">
                 <label><b>Custom CSS Overrides</b></label>
-                <textarea id="c_css" rows="3" placeholder="#output-wrapper h1 { color: purple; }"></textarea>
             </div>
         </fieldset>
-        <div class="action-bar">
-            <button onclick="process('preview')" class="btn-primary" id="gen-btn">GENERATE PREVIEW</button>
-        </div>
         <div id="preview-area" style="display:none;">
             <div class="preview-section">
                 <div class="preview-box">
-                    <div class="preview-header">
-                        <span>HTML Preview</span>
-                        <button class="btn-download" onclick="process('download', 'html')">Download .html</button>
-                    </div>
                     <div id="html-prev" class="preview-content"></div>
                 </div>
                 <div class="preview-box">
-                    <div class="preview-header">
-                        <span>PNG Preview</span>
-                        <button class="btn-download" onclick="process('download', 'png')">Download .png</button>
-                    </div>
-                    <div id="png-prev" class="preview-content" style="background:#f0f0f0; text-align:center;"></div>
                 </div>
             </div>
         </div>
         <script>
             async function analyze() {
-                const btn = document.getElementById('load-btn');
-                const text = document.getElementById('md-input').value;
-                if(!text) return alert("Please enter some text first.");
-                btn.innerText = "Analyzing...";
-                const fd = new FormData();
-                fd.append('markdown_text', text);
-                try {
-                    const res = await fetch('/parse', {method:'POST', body:fd});
-                    const data = await res.json();
-                    if(data.error) throw new Error(data.error);
-                    document.getElementById('detected-format').innerText = "FORMAT DETECTED: " + data.format;
-                    const list = document.getElementById('comp-list');
-                    list.innerHTML = '';
-                    data.components.forEach((c, i) => {
-                        const safe = btoa(unescape(encodeURIComponent(c.content)));
-                        list.innerHTML += `
-                            <div class="comp-card">
-                                <label style="cursor:pointer; display:block;">
-                                    <input type="checkbox" checked class="c-check" data-name="${c.filename}" data-content="${safe}">
-                                    <strong>${c.filename}</strong>
-                                </label>
-                                <small>${c.type}</small>
-                                <textarea readonly>${c.content.substring(0,120)}...</textarea>
-                            </div>`;
-                    });
-                    document.getElementById('comp-section').style.display = 'block';
-                } catch(e) { alert(e.message); }
-                finally { btn.innerText = "Analyze & Extract Components"; }
             }
             async function process(action, type = null) {
                 const btn = document.getElementById('gen-btn');
-                let finalMarkdown = "";
-                const checks = document.querySelectorAll('.c-check');
-                if(checks.length > 0) {
-                    checks.forEach(c => {
-                        if(c.checked) {
-                            const content = decodeURIComponent(escape(atob(c.dataset.content)));
-                            if(!c.dataset.name.includes("Intro") && !c.dataset.name.includes("Structure")) {
-                                finalMarkdown += "### File: " + c.dataset.name + "\\n";
-                            }
-                            finalMarkdown += content + "\\n\\n";
-                        }
-                    });
-                } else {
-                    finalMarkdown = document.getElementById('md-input').value;
-                }
                 const payload = {
-                    markdown_text: finalMarkdown,
                     download: action === 'download',
                     download_type: type,
                     styles: {
@@ -303,37 +277,23 @@ def index():
                         background_color: document.getElementById('b_color').value,
                         highlight_theme: document.getElementById('h_theme').value,
                         custom_css: document.getElementById('c_css').value,
-                        page_padding: 40,
-                        code_padding: 15
                     }
                 };
-                if(action === 'preview') btn.innerText = "Processing...";
-                try {
-                    const res = await fetch('/convert', {
-                        method: 'POST',
-                        headers: {'Content-Type':'application/json'},
-                        body: JSON.stringify(payload)
-                    });
-                    if(action === 'download') {
-                        const blob = await res.blob();
-                        const url = window.URL.createObjectURL(blob);
-                        const a = document.createElement('a');
-                        a.href = url;
-                        a.download = `output_${new Date().getTime()}.${type}`;
-                        a.click();
-                    } else {
-                        const data = await res.json();
-                        if(data.error) throw new Error(data.error);
-                        document.getElementById('preview-area').style.display = 'block';
-                        document.getElementById('html-prev').innerHTML = data.preview_html;
-                        document.getElementById('png-prev').innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}" style="max-width:100%; box-shadow: 0 0 20px rgba(0,0,0,0.2);">`;
-                        window.scrollTo({ top: document.getElementById('preview-area').offsetTop, behavior: 'smooth' });
-                    }
-                } catch(e) { alert("Error: " + e.message); }
-                finally { if(action === 'preview') btn.innerText = "GENERATE PREVIEW"; }
             }
         </script>
     </body></html>

 def parse_repo2markdown(text):
     components = []
     struct_match = re.search(r'## File Structure\n([\s\S]*?)(?=\n### File:|\Z)', text)
     if struct_match:
         components.append({'type': 'structure', 'filename': 'File Structure', 'content': struct_match.group(1).strip()})
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
     for match in pattern.finditer(text):
         filename = match.group(1).strip()
     components = []
     parts = re.split(r'^(## \[\d+\.\d+\.\d+.*?\].*?)$', text, flags=re.MULTILINE)
     if parts[0].strip():
+        components.append({'type': 'intro', 'filename': 'Header', 'content': parts[0].strip()})
     for i in range(1, len(parts), 2):
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
         components.append({'type': 'file', 'filename': match.group(1).strip(), 'content': match.group(2).strip()})
     return components
+def build_full_html(markdown_text, styles, for_image=False):
     wrapper_id = "#output-wrapper"
+    font_family = styles.get('font_family', "sans-serif")
+    # If rendering for an image, we avoid external network calls to Google Fonts
+    # as wkhtmltoimage often fails on SSL handshakes in Docker.
+    google_font_link = ""
+    if not for_image:
+        google_font_name = font_family.split(',')[0].strip("'\"")
+        google_font_link = f'<link href="https://fonts.googleapis.com/css2?family={google_font_name.replace(" ", "+")}:wght@400;700&display=swap" rel="stylesheet">'
     highlight_theme = styles.get('highlight_theme', 'monokai')
     pygments_css = ""
         {styles.get('custom_css', '')}
     """
     html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables', 'codehilite', 'nl2br'])
+    return f"<!DOCTYPE html><html><head><meta charset='UTF-8'>{google_font_link}<style>{scoped_css}</style></head><body><div id='output-wrapper'>{html_content}</div></body></html>"
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
 def convert_endpoint():
     data = request.json
     try:
+        # Generate two versions: one for UI (with external fonts) and one for Image (clean)
+        preview_html = build_full_html(data.get('markdown_text', ''), data.get('styles', {}), for_image=False)
+        image_html = build_full_html(data.get('markdown_text', ''), data.get('styles', {}), for_image=True)
+        options = {
+            "quiet": "",
+            "encoding": "UTF-8",
+            "width": 1024,
+            "disable-smart-width": "",
+            "load-error-handling": "ignore",  # CRITICAL: Prevents crash on minor network errors
+            "load-media-error-handling": "ignore"
+        }
         if data.get('download', False):
             if data.get('download_type') == 'html':
+                return send_file(BytesIO(preview_html.encode("utf-8")), as_attachment=True, download_name="output.html", mimetype="text/html")
+            png_bytes = imgkit.from_string(image_html, False, options=options)
             return send_file(BytesIO(png_bytes), as_attachment=True, download_name="output.png", mimetype="image/png")
+        png_bytes = imgkit.from_string(image_html, False, options=options)
         return jsonify({
+            'preview_html': preview_html,
             'preview_png_base64': base64.b64encode(png_bytes).decode('utf-8')
         })
     except Exception as e:
             :root { --bg: #f4f7f6; --text: #333; --card: #fff; --border: #ddd; --primary: #5a32a3; }
             body.dark-mode { --bg: #1a1a1a; --text: #eee; --card: #252525; --border: #444; }
             body { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: var(--bg); color: var(--text); line-height: 1.4; transition: background 0.3s; }
             fieldset { border: 1px solid var(--border); background: var(--card); padding: 20px; margin-bottom: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
             legend { font-weight: bold; padding: 0 10px; color: var(--primary); }
             textarea { width: 100%; border-radius: 6px; padding: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: 'Fira Code', monospace; box-sizing: border-box; }
             .format-banner { background: var(--primary); color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; display: inline-block; margin-bottom: 15px; font-weight: bold; }
             .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
             .comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
+            .comp-card { background: var(--card); border: 1px solid var(--border); padding: 12px; border-radius: 8px; }
             .comp-card textarea { height: 60px; font-size: 11px; margin-top: 8px; opacity: 0.8; pointer-events: none; resize: none; }
             .action-bar { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
             button { padding: 12px 24px; cursor: pointer; border: none; border-radius: 6px; font-weight: bold; transition: opacity 0.2s; }
             .btn-primary { background: var(--primary); color: #fff; flex: 1; min-width: 200px; }
             .btn-secondary { background: #333; color: #fff; border: 1px solid #555; }
+            .btn-download { background: #28a745; color: white; font-size: 12px; padding: 5px 10px; }
             .preview-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
+            .preview-box { background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; height: 600px; display: flex; flex-direction: column; }
+            .preview-header { background: #eee; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #333; font-weight:bold; }
             .preview-content { flex: 1; overflow: auto; padding: 15px; }
         </style>
     </head>
     <body>
         <fieldset>
             <legend>1. Input Source</legend>
+            <textarea id="md-input" rows="10" placeholder="Paste Markdown text here..."></textarea>
             <div class="action-bar"><button onclick="analyze()" class="btn-primary" id="load-btn">Analyze & Extract Components</button></div>
         </fieldset>
         <fieldset>
             <legend>3. Visual Styling</legend>
             <div class="style-grid">
+                <div><label>Font</label>
                     <select id="f_family">
+                        <option value="Arial, sans-serif">Arial</option>
+                        <option value="'Courier New', monospace">Courier</option>
+                        <option value="'Times New Roman', serif">Times</option>
                     </select>
                 </div>
+                <div><label>Font Size</label><input type="number" id="f_size" value="16"></div>
+                <div><label>Line Height</label><input type="number" id="l_height" value="1.6" step="0.1"></div>
+                <div><label>Text Color</label><input type="color" id="t_color" value="#333333"></div>
+                <div><label>Background</label><input type="color" id="b_color" value="#ffffff"></div>
+                <div><label>Syntax</label>
                     <select id="h_theme">
                         {% for s in styles %}<option value="{{s}}" {% if s == 'monokai' %}selected{% endif %}>{{s}}</option>{% endfor %}
                     </select>
                 </div>
             </div>
+            <div style="margin-top:15px;">
                 <label><b>Custom CSS Overrides</b></label>
+                <textarea id="c_css" rows="3" placeholder="#output-wrapper h1 { color: red; }"></textarea>
             </div>
         </fieldset>
+        <button onclick="process('preview')" class="btn-primary" id="gen-btn" style="width:100%; height:60px; font-size:20px;">GENERATE PREVIEW</button>
         <div id="preview-area" style="display:none;">
             <div class="preview-section">
                 <div class="preview-box">
+                    <div class="preview-header">HTML Preview <button class="btn-download" onclick="process('download', 'html')">Download</button></div>
                     <div id="html-prev" class="preview-content"></div>
                 </div>
                 <div class="preview-box">
+                    <div class="preview-header">PNG Preview <button class="btn-download" onclick="process('download', 'png')">Download</button></div>
+                    <div id="png-prev" class="preview-content" style="background:#888; display:flex; align-items:center; justify-content:center;"></div>
                 </div>
             </div>
         </div>
         <script>
             async function analyze() {
+                const fd = new FormData(); fd.append('markdown_text', document.getElementById('md-input').value);
+                const res = await fetch('/parse', {method:'POST', body:fd});
+                const data = await res.json();
+                document.getElementById('detected-format').innerText = "FORMAT: " + data.format;
+                const list = document.getElementById('comp-list'); list.innerHTML = '';
+                data.components.forEach(c => {
+                    const safe = btoa(unescape(encodeURIComponent(c.content)));
+                    list.innerHTML += `<div class="comp-card">
+                        <label><input type="checkbox" checked class="c-check" data-name="${c.filename}" data-content="${safe}"> <b>${c.filename}</b></label>
+                        <textarea readonly>${c.content.substring(0,100)}</textarea>
+                    </div>`;
+                });
+                document.getElementById('comp-section').style.display = 'block';
             }
             async function process(action, type = null) {
                 const btn = document.getElementById('gen-btn');
+                let md = "";
+                document.querySelectorAll('.c-check').forEach(c => {
+                    if(c.checked) {
+                        const content = decodeURIComponent(escape(atob(c.dataset.content)));
+                        if(!c.dataset.name.includes("Intro") && !c.dataset.name.includes("Structure")) md += "### File: " + c.dataset.name + "\\n";
+                        md += content + "\\n\\n";
+                    }
+                });
+                if(!md) md = document.getElementById('md-input').value;
                 const payload = {
+                    markdown_text: md,
                     download: action === 'download',
                     download_type: type,
                     styles: {
                         background_color: document.getElementById('b_color').value,
                         highlight_theme: document.getElementById('h_theme').value,
                         custom_css: document.getElementById('c_css').value,
+                        page_padding: 40, code_padding: 15
                     }
                 };
+                if(action === 'preview') btn.innerText = "Generating...";
+                const res = await fetch('/convert', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)});
+                if(action === 'download') {
+                    const blob = await res.blob();
+                    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `file.${type}`; a.click();
+                } else {
+                    const data = await res.json();
+                    document.getElementById('preview-area').style.display = 'block';
+                    document.getElementById('html-prev').innerHTML = data.preview_html;
+                    document.getElementById('png-prev').innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}" style="max-width:100%;">`;
+                    btn.innerText = "GENERATE PREVIEW";
+                }
             }
         </script>
     </body></html>