Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, render_template_string, send_file
+from flask import Flask, request, render_template_string, send_file, jsonify
 import markdown
 import imgkit
 import os
@@ -12,25 +12,14 @@ app = Flask(__name__)
 TEMP_DIR = os.path.join(os.getcwd(), "temp")
 os.makedirs(TEMP_DIR, exist_ok=True)
 
-# Define default values for styling options
-DEFAULT_STYLES = {
-    "font_family": "'Arial', sans-serif",
-    "font_size": "16",
-    "text_color": "#333333",
-    "background_color": "#ffffff",
-    "code_bg_color": "#f4f4f4",
-    "code_padding": "15",
-    "custom_css": ""
-}
+# --- UTILITY FUNCTIONS (Back-end) ---
 
 def is_repo2markdown_format(text):
     """Detects if the text is in the Repo2Markdown format."""
     return "## File Structure" in text and text.count("### File:") > 0
 
 def parse_repo2markdown(text):
-    """
-    Parses Repo2Markdown text, extracts files, and cleans content for display.
-    """
+    """Parses Repo2Markdown text, extracts files, and prepares them for the UI."""
     components = []
     # Regex to find sections starting with '### File:'
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
@@ -39,133 +28,118 @@ def parse_repo2markdown(text):
     if first_match:
         intro_text = text[:first_match.start()].strip()
         if intro_text:
-            components.append({'type': 'intro', 'filename': 'Introduction', 'content': intro_text, 'is_code_block': False, 'language': ''})
+            components.append({
+                'type': 'intro', 
+                'filename': 'Introduction', 
+                'content': intro_text, 
+                'is_code_block': False, 
+                'language': ''
+            })
 
     for match in pattern.finditer(text):
         filename = match.group(1).strip()
         raw_content = match.group(2).strip()
         
-        # Check if the entire content is a single fenced code block
+        # Check if the content is a single fenced code block and extract its parts
         code_match = re.search(r'^```(\w*)\s*\n([\s\S]*?)\s*```$', raw_content, re.DOTALL)
         
         if code_match:
-            # It's a code block; store the inner content and language
             language = code_match.group(1)
             inner_content = code_match.group(2).strip()
-            components.append({'type': 'file', 'filename': filename, 'content': inner_content, 'is_code_block': True, 'language': language})
+            components.append({
+                'type': 'file', 
+                'filename': filename, 
+                'content': inner_content, 
+                'is_code_block': True, 
+                'language': language
+            })
         else:
             # It's plain text (e.g., binary file notification)
-            components.append({'type': 'file', 'filename': filename, 'content': raw_content, 'is_code_block': False, 'language': ''})
+            components.append({
+                'type': 'file', 
+                'filename': filename, 
+                'content': raw_content, 
+                'is_code_block': False, 
+                'language': ''
+            })
             
     return components
 
-@app.route("/", methods=["GET", "POST"])
-def index():
-    """Main route to handle parsing, component selection, and conversion."""
-    preview_html = None
-    download_available = False
-    error_message = None
-    components = []
-    final_markdown_to_render = ""
+# --- API ENDPOINTS (Back-end) ---
 
-    # Set defaults for a GET request
-    markdown_text = ""
-    download_type = "png"
-    styles = DEFAULT_STYLES.copy()
-    include_fontawesome = False
-    
-    if request.method == "POST":
-        # Always update styles and settings from the form on any POST
-        styles = {key: request.form.get(key, default) for key, default in DEFAULT_STYLES.items()}
-        include_fontawesome = "include_fontawesome" in request.form
-        download_type = request.form.get("download_type", "png")
-
-        # --- TEXT PROCESSING LOGIC ---
-        # Prioritize new text/file upload. This is the source of truth for parsing.
-        new_markdown_text = request.form.get("markdown_text", "")
-        uploaded_file = request.files.get("markdown_file")
-        
-        if uploaded_file and uploaded_file.filename != '':
-            try:
-                markdown_text = uploaded_file.read().decode("utf-8")
-            except Exception as e:
-                error_message = f"Error reading file: {e}"
-                markdown_text = "" # Clear text on error
-        else:
-            markdown_text = new_markdown_text
+@app.route('/parse', methods=['POST'])
+def parse_endpoint():
+    """Receives markdown text and returns parsed components as JSON."""
+    if 'markdown_file' in request.files and request.files['markdown_file'].filename != '':
+        file = request.files['markdown_file']
+        text = file.read().decode('utf-8')
+    else:
+        text = request.form.get('markdown_text', '')
+
+    if not text:
+        return jsonify({'error': 'No text or file provided.'}), 400
+
+    if is_repo2markdown_format(text):
+        try:
+            components = parse_repo2markdown(text)
+            return jsonify(components)
+        except Exception as e:
+            return jsonify({'error': f'Failed to parse Repo2Markdown: {str(e)}'}), 500
+    else:
+        # If not the special format, return it as a single "text" component
+        return jsonify([{'type': 'text', 'filename': 'Full Text', 'content': text}])
+
+@app.route('/convert', methods=['POST'])
+def convert_endpoint():
+    """Receives final markdown and styles, returns HTML preview or PNG file."""
+    data = request.json
+    markdown_text = data.get('markdown_text', '')
+    styles = data.get('styles', {})
+    include_fontawesome = data.get('include_fontawesome', False)
+    download_type = data.get('download_type', 'png')
+    is_download_request = data.get('download', False)
+
+    if not markdown_text:
+        return jsonify({'error': 'No markdown content to convert.'}), 400
+
+    try:
+        html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables'])
         
-        # --- PARSING & COMPONENT BUILDING ---
-        if markdown_text and is_repo2markdown_format(markdown_text):
-            try:
-                # Always re-parse the source text to generate fresh components
-                parsed_components = parse_repo2markdown(markdown_text)
-                final_markdown_parts = []
-                
-                # Check for user selections and reconstruct both the component list for the UI
-                # and the final markdown for rendering.
-                for i, comp_data in enumerate(parsed_components):
-                    is_selected = f'include_comp_{i}' in request.form
-                    
-                    # Update component with selection status for re-rendering the UI
-                    comp_data['is_selected'] = is_selected
-                    components.append(comp_data)
-
-                    # If selected, add it to the list for the final document
-                    if is_selected:
-                        if comp_data['type'] == 'intro':
-                            final_markdown_parts.append(comp_data['content'])
-                        else: # It's a file
-                            reconstructed_content = ""
-                            if comp_data['is_code_block']:
-                                # Re-add the fences for rendering
-                                reconstructed_content = f"```{comp_data['language']}\n{comp_data['content']}\n```"
-                            else:
-                                reconstructed_content = comp_data['content']
-                            final_markdown_parts.append(f"### File: {comp_data['filename']}\n{reconstructed_content}")
-
-                final_markdown_to_render = "\n\n---\n\n".join(final_markdown_parts)
-
-            except Exception as e:
-                error_message = f"Error processing Repo2Markdown: {e}"
+        fontawesome_link = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">' if include_fontawesome else ""
+        style_block = f"""<style>
+            body {{ font-family: {styles.get('font_family', 'Arial, sans-serif')}; font-size: {styles.get('font_size', '16')}px; color: {styles.get('text_color', '#333')}; background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block; }}
+            h3 {{ border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: 2em; }}
+            table {{ border-collapse: collapse; width: 100%; }}
+            th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
+            th {{ background-color: #f2f2f2; }}
+            img {{ max-width: 100%; height: auto; }}
+            pre {{ background: {styles.get('code_bg_color', '#f4f4f4')}; padding: {styles.get('code_padding', '15')}px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }}
+            code {{ background: {styles.get('code_bg_color', '#f4f4f4')}; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 3px; }}
+            pre > code {{ padding: 0; margin: 0; font-size: inherit; background: transparent; border-radius: 0; }}
+            {styles.get('custom_css', '')}
+        </style>"""
+        full_html = f'<!DOCTYPE html><html><head><meta charset="UTF-8">{fontawesome_link}{style_block}</head><body>{html_content}</body></html>'
+
+        if is_download_request:
+            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
+                png_path = os.path.join(TEMP_DIR, "output.png")
+                imgkit.from_string(full_html, png_path, options={"quiet": "", 'encoding': "UTF-8"})
+                return send_file(png_path, as_attachment=True, download_name="output.png", mimetype="image/png")
         else:
-            # If not Repo2Markdown format, just treat it as plain markdown
-            final_markdown_to_render = markdown_text
+            # Return HTML for preview
+            return jsonify({'preview_html': full_html})
 
-        # --- HTML & PNG Conversion Logic ---
-        if final_markdown_to_render:
-            try:
-                html_content = markdown.markdown(final_markdown_to_render, extensions=['fenced_code', 'tables'])
-                
-                fontawesome_link = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">' if include_fontawesome else ""
-                style_block = f"""<style>
-                    body {{ font-family: {styles['font_family']}; font-size: {styles['font_size']}px; color: {styles['text_color']}; background-color: {styles['background_color']}; padding: 25px; display: inline-block; }}
-                    h3 {{ border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: 2em; }}
-                    table {{ border-collapse: collapse; width: 100%; }}
-                    th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
-                    th {{ background-color: #f2f2f2; }}
-                    img {{ max-width: 100%; height: auto; }}
-                    pre {{ background: {styles['code_bg_color']}; padding: {styles['code_padding']}px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }}
-                    code {{ background: {styles['code_bg_color']}; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 3px; }}
-                    pre > code {{ padding: 0; margin: 0; font-size: inherit; background: transparent; border-radius: 0; }}
-                    {styles['custom_css']}
-                </style>"""
-                full_html = f'<!DOCTYPE html><html><head><meta charset="UTF-8">{fontawesome_link}{style_block}</head><body>{html_content}</body></html>'
-
-                preview_html = full_html
-                download_available = True
-
-                if "download" in request.form:
-                    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_path = os.path.join(TEMP_DIR, "output.png")
-                        imgkit.from_string(full_html, png_path, options={"quiet": "", 'encoding': "UTF-8"})
-                        return send_file(png_path, as_attachment=True, download_name="output.png", mimetype="image/png")
-
-            except Exception as e:
-                error_message = f"An error occurred during conversion: {e}"
-                print(f"Error: {traceback.format_exc()}")
-    
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
+
+# --- MAIN PAGE (Front-end) ---
+
+@app.route('/')
+def index():
+    """Serves the main HTML page with all the client-side JavaScript."""
     return render_template_string("""
     <!DOCTYPE html>
     <html lang="en">
@@ -178,22 +152,21 @@ def index():
             h1 { text-align: center; }
             form { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
             textarea { width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; }
-            .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
-            .main-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
             fieldset { border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-top: 20px; }
             legend { font-weight: bold; color: #555; padding: 0 10px; }
-            .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
-            .style-grid > div { display: flex; flex-direction: column; }
-            label { margin-bottom: 5px; color: #666; font-size: 14px; }
-            select, input[type="number"], input[type="color"], input[type="text"], input[type="file"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
             button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }
             .action-btn { background-color: #007BFF; color: white; font-size: 16px; padding: 12px 20px;}
             .action-btn:hover { background-color: #0056b3; }
-            .download-btn { background-color: #28a745; color: white; }
+            .generate-btn { background-color: #5a32a3; color: white; font-size: 16px; padding: 12px 20px; }
+            .generate-btn:hover { background-color: #4a298a; }
+            .download-btn { background-color: #28a745; color: white; display: none; } /* Hidden by default */
             .download-btn:hover { background-color: #218838; }
-            .preview { border: 1px solid #ddd; padding: 20px; margin-top: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-            .error { color: #D8000C; background-color: #FFD2D2; padding: 10px; border-radius: 5px; margin-top: 15px; }
+            .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
+            .main-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
+            .preview-container { border: 1px solid #ddd; padding: 20px; margin-top: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-height: 100px; }
+            .error { color: #D8000C; background-color: #FFD2D2; padding: 10px; border-radius: 5px; margin-top: 15px; display: none; }
             .info { color: #00529B; background-color: #BDE5F8; padding: 10px; border-radius: 5px; margin: 10px 0; }
+            /* Component Selection 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; }
@@ -203,79 +176,235 @@ def index():
             .component-content textarea { height: 150px; }
             .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
-        <script>
-            function toggleAllComponents(checked) {
-                const checkboxes = document.querySelectorAll('.component-checkbox');
-                checkboxes.forEach(cb => cb.checked = checked);
-            }
-        </script>
     </head>
     <body>
         <h1>Advanced Markdown Converter & Composer</h1>
-        <form method="post" enctype="multipart/form-data">
+        <form id="main-form">
             <fieldset>
-                <legend>Source Content</legend>
-                <div class="info">Paste your content below, or upload a file. If Repo2Markdown format is detected, component selection will appear.</div>
-                <textarea name="markdown_text" rows="8" placeholder="Paste your Markdown here...">{{ markdown_text }}</textarea>
+                <legend>1. Load Content</legend>
+                <div class="info">Paste content or upload a file, then click "Load & Analyze".</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" style="margin-bottom:0;">Or upload a file:</label>
-                    <input type="file" name="markdown_file" id="markdown_file" accept=".md,.txt,text/markdown">
+                    <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>
 
-            {% if components %}
-                <fieldset>
-                    <legend>Detected File 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 class="component-grid">
-                        {% for comp in components %}
-                            <div class="component-container">
-                                <div class="component-header">
-                                    <input type="checkbox" name="include_comp_{{ loop.index0 }}" id="include_comp_{{ loop.index0 }}" class="component-checkbox" {% if comp.is_selected %}checked{% else %}checked{% endif %}>
-                                    <label for="include_comp_{{ loop.index0 }}">{{ comp.filename }}</label>
-                                </div>
-                                <div class="component-content">
-                                    <textarea readonly>{{ comp.content }}</textarea>
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </div>
-                </fieldset>
-            {% endif %}
-
+            <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>Styling Options</legend>
+                <legend>3. Configure Styles</legend>
                 <div class="style-grid">
-                    <div><label for="font_family">Font Family:</label><select id="font_family" name="font_family"><option value="'Arial', sans-serif" {% if styles.font_family == "'Arial', sans-serif" %}selected{% endif %}>Arial</option><option value="'Georgia', serif" {% if styles.font_family == "'Georgia', serif" %}selected{% endif %}>Georgia</option><option value="'Times New Roman', serif" {% if styles.font_family == "'Times New Roman', serif" %}selected{% endif %}>Times New Roman</option><option value="'Verdana', sans-serif" {% if styles.font_family == "'Verdana', sans-serif" %}selected{% endif %}>Verdana</option><option value="'Courier New', monospace" {% if styles.font_family == "'Courier New', monospace" %}selected{% endif %}>Courier New</option></select></div>
-                    <div><label for="font_size">Font Size (px):</label><input type="number" id="font_size" name="font_size" value="{{ styles.font_size }}"></div>
-                    <div><label for="text_color">Text Color:</label><input type="color" id="text_color" name="text_color" value="{{ styles.text_color }}"></div>
-                    <div><label for="background_color">Background Color:</label><input type="color" id="background_color" name="background_color" value="{{ styles.background_color }}"></div>
-                    <div><label for="code_bg_color">Code BG Color:</label><input type="color" id="code_bg_color" name="code_bg_color" value="{{ styles.code_bg_color }}"></div>
-                    <div><label for="code_padding">Code Padding (px):</label><input type="number" id="code_padding" name="code_padding" value="{{ styles.code_padding }}"></div>
+                    <div><label>Font Family:</label><select id="font_family"><option value="'Arial', sans-serif">Arial</option><option value="'Georgia', serif">Georgia</option><option value="'Times New Roman', serif">Times New Roman</option></select></div>
+                    <div><label>Font Size (px):</label><input type="number" id="font_size" value="16"></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 BG Color:</label><input type="color" id="code_bg_color" value="#f4f4f4"></div>
+                    <div><label>Code Padding (px):</label><input type="number" id="code_padding" value="15"></div>
                 </div>
-                <div><input type="checkbox" id="include_fontawesome" name="include_fontawesome" {% if include_fontawesome %}checked{% endif %}><label for="include_fontawesome">Include Font Awesome (for icons)</label></div>
-                <div><label for="custom_css">Custom CSS:</label><textarea id="custom_css" name="custom_css" rows="4" placeholder="e.g., h1 { color: blue; }">{{ styles.custom_css }}</textarea></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="controls">
                 <div class="main-actions">
-                    <button type="submit" class="action-btn">Generate / Update Preview</button>
-                    <div><label for="download_type">Output format:</label><select id="download_type" name="download_type"><option value="png" {% if download_type == 'png' %}selected{% endif %}>PNG</option><option value="html" {% if download_type == 'html' %}selected{% endif %}>HTML</option></select></div>
-                    {% if download_available %}<button type="submit" name="download" value="true" class="download-btn">Download {{ download_type.upper() }}</button>{% endif %}
+                    <button type="button" id="generate-btn" class="generate-btn">Generate Preview</button>
+                    <div><label>Output format:</label><select id="download_type"><option value="png">PNG</option><option value="html">HTML</option></select></div>
+                    <button type="button" id="download-btn" class="download-btn">Download</button>
                 </div>
             </div>
         </form>
         
-        {% if error_message %}<p class="error">{{ error_message }}</p>{% endif %}
-        {% if preview_html %}<h2>Preview</h2><div class="preview">{{ preview_html | safe }}</div>{% endif %}
+        <div id="error-box" class="error"></div>
+        
+        <h2>Preview</h2>
+        <div id="preview-container" class="preview-container"></div>
+
+        <script>
+            // --- DOM Elements ---
+            const loadBtn = document.getElementById('load-btn');
+            const generateBtn = document.getElementById('generate-btn');
+            const downloadBtn = document.getElementById('download-btn');
+            const markdownTextInput = document.getElementById('markdown-text-input');
+            const markdownFileInput = document.getElementById('markdown-file-input');
+            const componentsFieldset = document.getElementById('components-fieldset');
+            const componentsContainer = document.getElementById('components-container');
+            const previewContainer = document.getElementById('preview-container');
+            const errorBox = document.getElementById('error-box');
+
+            // --- Client-Side Functions ---
+            function toggleAllComponents(checked) {
+                componentsContainer.querySelectorAll('.component-checkbox').forEach(cb => cb.checked = checked);
+            }
+
+            function displayError(message) {
+                errorBox.textContent = message;
+                errorBox.style.display = 'block';
+                previewContainer.innerHTML = '';
+            }
+
+            // --- Event Listeners ---
+            loadBtn.addEventListener('click', async () => {
+                loadBtn.textContent = 'Loading...';
+                errorBox.style.display = 'none';
+
+                const formData = new FormData();
+                if (markdownFileInput.files.length > 0) {
+                    formData.append('markdown_file', markdownFileInput.files[0]);
+                } else {
+                    formData.append('markdown_text', markdownTextInput.value);
+                }
+
+                try {
+                    const response = await fetch('/parse', { method: 'POST', body: formData });
+                    const components = await response.json();
+
+                    if (components.error) {
+                        throw new Error(components.error);
+                    }
+                    
+                    // Clear previous components
+                    componentsContainer.innerHTML = '';
+
+                    if (components.length > 1 || components[0]?.type !== 'text') {
+                        componentsFieldset.style.display = 'block';
+                        components.forEach((comp, index) => {
+                            const div = document.createElement('div');
+                            div.className = 'component-container';
+                            div.dataset.filename = comp.filename;
+                            div.dataset.type = comp.type;
+                            div.dataset.isCodeBlock = comp.is_code_block;
+                            div.dataset.language = comp.language;
+                            // Store content in a hidden div to avoid issues with textarea rendering
+                            const contentHolder = document.createElement('div');
+                            contentHolder.style.display = 'none';
+                            contentHolder.textContent = comp.content;
+                            div.appendChild(contentHolder);
+
+                            div.innerHTML += `
+                                <div class="component-header">
+                                    <input type="checkbox" id="comp-check-${index}" class="component-checkbox" checked>
+                                    <label for="comp-check-${index}">${comp.filename}</label>
+                                </div>
+                                <div class="component-content">
+                                    <textarea readonly>${comp.content}</textarea>
+                                </div>`;
+                            componentsContainer.appendChild(div);
+                        });
+                    } else {
+                        // Not Repo2Markdown format, hide the component selector
+                        componentsFieldset.style.display = 'none';
+                    }
+                    // Populate the text area if a file was uploaded
+                    if(markdownFileInput.files.length > 0) {
+                         markdownTextInput.value = await markdownFileInput.files[0].text();
+                    }
+
+
+                } catch (err) {
+                    displayError('Error parsing content: ' + err.message);
+                } finally {
+                    loadBtn.textContent = 'Load & Analyze';
+                }
+            });
+
+            async function handleGeneration(isDownload = false) {
+                const buttonToUpdate = isDownload ? downloadBtn : generateBtn;
+                buttonToUpdate.textContent = 'Generating...';
+                errorBox.style.display = 'none';
+                
+                let finalMarkdown = "";
+                // If components are visible, compose from them. Otherwise, use the text area.
+                if (componentsFieldset.style.display === 'block') {
+                    const parts = [];
+                    const componentDivs = componentsContainer.querySelectorAll('.component-container');
+                    componentDivs.forEach(div => {
+                        if (div.querySelector('.component-checkbox').checked) {
+                            const content = div.querySelector('div').textContent; // Get content from hidden holder
+                            let partContent = content;
+                            if (div.dataset.isCodeBlock === 'true') {
+                                partContent = "```" + div.dataset.language + "\\n" + content + "\\n```";
+                            }
+                            
+                            if (div.dataset.type === 'intro') {
+                                parts.push(partContent);
+                            } else {
+                                parts.push(`### File: ${div.dataset.filename}\\n${partContent}`);
+                            }
+                        }
+                    });
+                    finalMarkdown = parts.join('\\n\\n---\\n\\n');
+                } else {
+                    finalMarkdown = markdownTextInput.value;
+                }
+
+                const payload = {
+                    markdown_text: finalMarkdown,
+                    styles: {
+                        font_family: document.getElementById('font_family').value,
+                        font_size: document.getElementById('font_size').value,
+                        text_color: document.getElementById('text_color').value,
+                        background_color: document.getElementById('background_color').value,
+                        code_bg_color: document.getElementById('code_bg_color').value,
+                        code_padding: document.getElementById('code_padding').value,
+                        custom_css: document.getElementById('custom_css').value
+                    },
+                    include_fontawesome: document.getElementById('include_fontawesome').checked,
+                    download_type: document.getElementById('download_type').value,
+                    download: isDownload
+                };
+
+                try {
+                    const response = await fetch('/convert', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                    
+                    if (isDownload) {
+                        if (!response.ok) throw new Error(`Download failed: ${response.statusText}`);
+                        const blob = await response.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = url;
+                        a.download = 'output.' + payload.download_type;
+                        document.body.appendChild(a);
+                        a.click();
+                        window.URL.revokeObjectURL(url);
+                        a.remove();
+                    } else {
+                        const result = await response.json();
+                        if (result.error) throw new Error(result.error);
+                        previewContainer.innerHTML = result.preview_html;
+                        downloadBtn.style.display = 'inline-block'; // Show download button after a successful preview
+                    }
+
+                } catch (err) {
+                    displayError('Error generating output: ' + err.message);
+                } finally {
+                    generateBtn.textContent = 'Generate Preview';
+                    downloadBtn.textContent = 'Download';
+                }
+            }
+
+            generateBtn.addEventListener('click', () => handleGeneration(false));
+            downloadBtn.addEventListener('click', () => handleGeneration(true));
+
+        </script>
     </body>
     </html>
-    """,
-    styles=styles, markdown_text=markdown_text, download_type=download_type, include_fontawesome=include_fontawesome,
-    download_available=download_available, preview_html=preview_html, error_message=error_message, components=components)
+    """)
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))