Update app.py

app.py

@@ -43,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': 'Header', 'content': 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
@@ -62,8 +62,6 @@ 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("'\"")
@@ -117,7 +115,6 @@ 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)
         
@@ -126,7 +123,7 @@ def convert_endpoint():
             "encoding": "UTF-8",
             "width": 1024,
             "disable-smart-width": "",
-            "load-error-handling": "ignore",  # CRITICAL: Prevents crash on minor network errors
+            "load-error-handling": "ignore",
             "load-media-error-handling": "ignore"
         }
         
@@ -142,7 +139,6 @@ def convert_endpoint():
             'preview_png_base64': base64.b64encode(png_bytes).decode('utf-8')
         })
     except Exception as e:
-        traceback.print_exc()
         return jsonify({'error': str(e)}), 500
 
 @app.route('/')
@@ -155,83 +151,76 @@ def index():
         <style>
             :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); }
+            body { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: var(--bg); color: var(--text); transition: background 0.3s; }
+            fieldset { border: 1px solid var(--border); background: var(--card); padding: 20px; margin-bottom: 25px; border-radius: 12px; }
             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; }
+            .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
+            .comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 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; }
+            .action-bar { display: flex; gap: 15px; margin-top: 20px; }
+            button { padding: 12px 24px; cursor: pointer; border: none; border-radius: 6px; font-weight: bold; }
+            .btn-primary { background: var(--primary); color: #fff; }
             .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-box { background: #fff; border: 1px solid #ddd; border-radius: 8px; height: 600px; display: flex; flex-direction: column; overflow: hidden; }
+            .preview-header { background: #eee; padding: 10px; display: flex; justify-content: space-between; align-items: center; color: #333; font-weight: bold; border-bottom: 1px solid #ddd; }
             .preview-content { flex: 1; overflow: auto; padding: 15px; }
+            img { max-width: 100%; height: auto; border: 1px solid #eee; }
         </style>
     </head>
     <body>
-        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px;">
-            <h1>Intelligent Markdown Converter</h1>
-            <button onclick="document.body.classList.toggle('dark-mode')" class="btn-secondary">🌓 Toggle Dark Mode</button>
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
+            <h1>Markdown Tool</h1>
+            <button onclick="document.body.classList.toggle('dark-mode')" class="btn-secondary">🌓 Dark Mode</button>
         </div>
 
         <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>
+            <legend>1. Input</legend>
+            <textarea id="md-input" rows="8"></textarea>
+            <div class="action-bar"><button onclick="analyze()" class="btn-primary" id="load-btn">Analyze Content</button></div>
         </fieldset>
 
         <div id="comp-section" style="display:none;">
             <div id="detected-format" class="format-banner"></div>
             <fieldset>
-                <legend>2. Component Selection</legend>
+                <legend>2. Components</legend>
                 <div class="comp-grid" id="comp-list"></div>
             </fieldset>
         </div>
 
         <fieldset>
-            <legend>3. Visual Styling</legend>
+            <legend>3. Styles</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><label>Font</label><select id="f_family">
+                    <option value="sans-serif">Sans-Serif</option>
+                    <option value="serif">Serif</option>
+                    <option value="monospace">Monospace</option>
+                </select></div>
+                <div><label>Size</label><input type="number" id="f_size" value="16"></div>
+                <div><label>Height</label><input type="number" id="l_height" value="1.6" step="0.1"></div>
+                <div><label>Text</label><input type="color" id="t_color" value="#333333"></div>
+                <div><label>BG</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>
+            <textarea id="c_css" rows="2" style="margin-top:15px;" placeholder="Custom CSS..."></textarea>
         </fieldset>
 
-        <button onclick="process('preview')" class="btn-primary" id="gen-btn" style="width:100%; height:60px; font-size:20px;">GENERATE PREVIEW</button>
+        <button onclick="process('preview')" class="btn-primary" id="gen-btn" style="width:100%; height:50px;">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 class="preview-header">HTML <button 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 class="preview-header">PNG <button onclick="process('download', 'png')">Download</button></div>
+                    <div id="png-prev" class="preview-content"></div>
                 </div>
             </div>
         </div>
@@ -241,13 +230,13 @@ def index():
                 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;
+                document.getElementById('detected-format').innerText = "Detected: " + 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>
+                        <textarea readonly>${c.content.substring(0,80)}</textarea>
                     </div>`;
                 });
                 document.getElementById('comp-section').style.display = 'block';
@@ -281,17 +270,17 @@ def index():
                     }
                 };
 
-                if(action === 'preview') btn.innerText = "Generating...";
+                if(action === 'preview') btn.innerText = "Processing...";
                 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();
+                    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `export.${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%;">`;
+                    document.getElementById('png-prev').innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}">`;
                     btn.innerText = "GENERATE PREVIEW";
                 }
             }