Update app.py

app.py

@@ -17,18 +17,16 @@ os.makedirs(TEMP_DIR, exist_ok=True)
 
 def parse_repo2markdown(text):
     components = []
-    # Pattern to capture file sections
-    pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
-    
     # 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()
         content = match.group(2).strip()
-        # Strip wrapping code fences if they encompass the whole file
         code_match = re.search(r'^```(?:\w*)\s*\n([\s\S]*?)\s*```$', content, re.DOTALL)
         final_content = code_match.group(1).strip() if code_match else content
         components.append({'type': 'file', 'filename': filename, 'content': final_content})
@@ -38,7 +36,7 @@ def parse_standard_readme(text):
     components = []
     parts = re.split(r'^(## .*?)$', text, flags=re.MULTILINE)
     if parts[0].strip():
-        components.append({'type': 'intro', 'filename': 'Intro', 'content': parts[0].strip()})
+        components.append({'type': 'intro', 'filename': 'Header/Intro', 'content': parts[0].strip()})
     for i in range(1, len(parts), 2):
         components.append({'type': 'section', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
@@ -47,7 +45,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
@@ -84,7 +82,10 @@ def build_full_html(markdown_text, styles, include_fontawesome):
             background-color: {styles.get('background_color', '#fff')};
             padding: {styles.get('page_padding', '40')}px;
         }}
+        {wrapper_id} table {{ border-collapse: collapse; width: 100%; margin-bottom: 1em; }}
+        {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 12px; text-align: left; }}
         {wrapper_id} pre {{ padding: {styles.get('code_padding', '15')}px; border-radius: 8px; overflow-x: auto; }}
+        {wrapper_id} h1, {wrapper_id} h2, {wrapper_id} h3 {{ border-bottom: 1px solid #eee; padding-bottom: 5px; }}
         {pygments_css}
         {styles.get('custom_css', '')}
     """
@@ -96,16 +97,12 @@ def build_full_html(markdown_text, styles, include_fontawesome):
 def parse_endpoint():
     text = request.form.get('markdown_text', '')
     try:
-        # Detect Repo2Markdown (Checking for '## File Structure' as primary key)
         if "## File Structure" in text and "### File:" in text:
             format_name, components = "Repo2Markdown", parse_repo2markdown(text)
-        # Detect Agent Action (Strict anchor check for action keyword)
         elif re.search(r'^### HF_ACTION:', text, flags=re.MULTILINE):
             format_name, components = "Agent Action", parse_agent_action(text)
-        # Detect Changelog
         elif re.search(r'^## \[\d+\.\d+\.\d+.*?\].*?$', text, flags=re.MULTILINE):
             format_name, components = "Changelog", parse_changelog(text)
-        # Detect Standard README
         elif re.search(r'^# ', text, flags=re.MULTILINE) and re.search(r'^## ', text, flags=re.MULTILINE):
             format_name, components = "Standard README", parse_standard_readme(text)
         else:
@@ -118,11 +115,22 @@ 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', False))
+        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')})
+        return jsonify({
+            'preview_html': full_html, 
+            '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('/')
@@ -131,93 +139,201 @@ def index():
     <!DOCTYPE html>
     <html lang="en">
     <head>
-        <meta charset="UTF-8"><title>Intelligent Markdown</title>
+        <meta charset="UTF-8"><title>Intelligent Markdown Converter</title>
         <style>
-            :root { --bg: #f4f7f6; --text: #333; --card: #fff; --border: #ddd; }
+            :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: 1100px; margin: 0 auto; padding: 20px; background: var(--bg); color: var(--text); }
-            fieldset { border: 1px solid var(--border); background: var(--card); padding: 15px; margin-bottom: 20px; border-radius: 8px; }
-            textarea { width: 100%; border-radius: 4px; padding: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: monospace; box-sizing: border-box; }
-            .format-banner { background: #5a32a3; color: white; padding: 5px 15px; border-radius: 20px; font-size: 12px; display: inline-block; margin-bottom: 10px; }
-            .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 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: 10px; border-radius: 4px; }
-            .comp-card textarea { height: 50px; font-size: 10px; margin-top: 5px; opacity: 0.7; pointer-events: none; }
-            button { padding: 10px 20px; cursor: pointer; border: none; border-radius: 4px; font-weight: bold; }
-            .btn-primary { background: #5a32a3; color: #fff; }
-            .btn-dark { background: #333; color: #fff; border: 1px solid #555; }
-            .preview-container { background: #fff; border: 1px solid #ddd; margin-top: 20px; padding: 15px; color: #333; }
+            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>
-        <div style="display:flex; justify-content:space-between; align-items:center;">
-            <h1>Markdown Tool</h1>
-            <button onclick="document.body.classList.toggle('dark-mode')" class="btn-dark">🌓 Toggle Dark</button>
+        <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>
+
         <fieldset>
-            <legend>1. Input Markdown</legend>
-            <textarea id="md-input" rows="8"></textarea>
-            <div style="margin-top:10px;"><button onclick="load()" class="btn-primary" id="load-btn">Analyze & Parse</button></div>
+            <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>
+
         <div id="comp-section" style="display:none;">
             <div id="detected-format" class="format-banner"></div>
             <fieldset>
-                <legend>2. Components</legend>
-                <div id="comp-list" class="comp-grid"></div>
+                <legend>2. Component Selection</legend>
+                <div class="comp-grid" id="comp-list"></div>
             </fieldset>
         </div>
+
         <fieldset>
-            <legend>3. Export Settings</legend>
+            <legend>3. Visual Styling</legend>
             <div class="style-grid">
-                <div><label>Font</label><select id="f_family">
-                    <option value="'Inter', sans-serif">Inter</option>
-                    <option value="'Fira Code', monospace">Fira Code</option>
-                </select></div>
-                <div><label>Text Color</label><input type="color" id="t_color" value="#333333"></div>
-                <div><label>BG Color</label><input type="color" id="b_color" value="#ffffff"></div>
-                <div><label>Pygments Theme</label><select id="h_theme">
-                    {% for s in styles %}<option value="{{s}}">{{s}}</option>{% endfor %}
-                </select></div>
+                <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>
-        <button onclick="generate()" class="btn-primary" style="width:100%; height:50px; font-size:18px;">GENERATE AS IMAGE</button>
-        <div id="preview-area" style="display:none; margin-top:30px;">
-            <h3>Generated Output</h3>
-            <div id="png-prev"></div>
+
+        <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 load() {
-                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 = "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">
-                        <input type="checkbox" checked class="c-check" data-name="${c.filename}" data-content="${safe}"> 
-                        <b>${c.filename}</b><br><textarea>${c.content.substring(0,80)}</textarea>
-                    </div>`;
-                });
-                document.getElementById('comp-section').style.display = 'block';
+            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 generate() {
-                let text = "";
-                document.querySelectorAll('.c-check').forEach(c => {
-                    if(c.checked) text += "### " + c.dataset.name + "\\n" + decodeURIComponent(escape(atob(c.dataset.content))) + "\\n\\n";
-                });
+
+            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: text || document.getElementById('md-input').value,
+                    markdown_text: finalMarkdown,
+                    download: action === 'download',
+                    download_type: type,
                     styles: {
-                        font_family: document.getElementById('f_family').value, text_color: document.getElementById('t_color').value,
-                        background_color: document.getElementById('b_color').value, highlight_theme: document.getElementById('h_theme').value,
-                        font_size: 16, line_height: 1.6, page_padding: 40, code_padding: 15
+                        font_family: document.getElementById('f_family').value,
+                        font_size: document.getElementById('f_size').value,
+                        line_height: document.getElementById('l_height').value,
+                        text_color: document.getElementById('t_color').value,
+                        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
                     }
                 };
-                const res = await fetch('/convert', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)});
-                const data = await res.json();
-                document.getElementById('preview-area').style.display = 'block';
-                document.getElementById('png-prev').innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}" style="width:100%; border:1px solid #ccc;">`;
+
+                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>