Update app.py

app.py

@@ -23,129 +23,129 @@ DEFAULT_STYLES = {
     "custom_css": ""
 }
 
-def parse_markdown(text):
+def is_repo2markdown_format(text):
+    """Detects if the text is in the Repo2Markdown format."""
+    return "## File Structure" in text and text.count("### File:") > 1
+
+def parse_repo2markdown(text):
     """
-    Parses markdown text to separate code blocks from base text.
-    Returns a list of dictionaries, each representing a part of the document.
+    Parses Repo2Markdown text to extract individual files.
+    Returns a list of dictionaries, each representing a file.
     """
-    # Regex to find fenced code blocks and capture them, including the fences and language
-    # This regex is non-greedy `([\s\S]*?)` to handle multiple blocks correctly.
-    parts = re.split(r'(```[\s\S]*?```)', text)
-    
     components = []
-    code_block_counter = 0
-    for i, part in enumerate(parts):
-        if not part:
-            continue
-        
-        # Check if the part is a fenced code block
-        if part.startswith('```'):
-            # Extract language and content from the block
-            # The first line is ` ```language `, the last line is ` ``` `
-            lines = part.strip().split('\n')
-            language = lines[3:].strip()
-            content = '\n'.join(lines[1:-1])
-            components.append({
-                'type': 'code',
-                'id': code_block_counter,
-                'language': language or 'plaintext',
-                'content': content
-            })
-            code_block_counter += 1
-        else:
-            # This is a standard text part
+    # Regex to find sections starting with '### File:'
+    # It captures the filename and all content until the next '### File:' or the end of the string.
+    pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
+    
+    # Find the introductory text before the first file.
+    first_match = pattern.search(text)
+    if first_match:
+        intro_text = text[:first_match.start()].strip()
+        if intro_text:
             components.append({
-                'type': 'text',
-                'id': i,
-                'content': part
+                'type': 'intro',
+                'filename': 'Introduction',
+                'content': intro_text,
+                'is_selected': True
             })
-            
-    return components
 
+    # Find all file sections
+    for match in pattern.finditer(text):
+        filename = match.group(1).strip()
+        content = match.group(2).strip()
+        components.append({
+            'type': 'file',
+            'filename': filename,
+            'content': content,
+            'is_selected': True # Default to selected
+        })
+        
+    return components
 
 @app.route("/", methods=["GET", "POST"])
 def index():
-    """Main route to handle file uploads, component selection, and conversion."""
+    """Main route to handle parsing, component selection, and conversion."""
     # Initialize variables
     preview_html = None
     download_available = False
     error_message = None
     components = []
-
+    
     # Set default values on GET request
     markdown_text = ""
     download_type = "png"
     styles = DEFAULT_STYLES.copy()
     include_fontawesome = False
     
-    # --- FORM SUBMISSION LOGIC ---
     if request.method == "POST":
-        # Get styling options from the form, preserving them across submissions
-        styles = {
-            "font_family": request.form.get("font_family", DEFAULT_STYLES["font_family"]),
-            "font_size": request.form.get("font_size", DEFAULT_STYLES["font_size"]),
-            "text_color": request.form.get("text_color", DEFAULT_STYLES["text_color"]),
-            "background_color": request.form.get("background_color", DEFAULT_STYLES["background_color"]),
-            "code_bg_color": request.form.get("code_bg_color", DEFAULT_STYLES["code_bg_color"]),
-            "code_padding": request.form.get("code_padding", DEFAULT_STYLES["code_padding"]),
-            "custom_css": request.form.get("custom_css", DEFAULT_STYLES["custom_css"])
-        }
+        # Preserve styling options across all POST requests
+        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")
+        
         final_markdown_to_render = ""
-
-        # --- CASE 1: File is being uploaded for parsing ---
-        uploaded_file = request.files.get("markdown_file")
-        if uploaded_file and uploaded_file.filename != '':
-            try:
-                markdown_text = uploaded_file.read().decode("utf-8")
-                components = parse_markdown(markdown_text)
-            except Exception as e:
-                error_message = f"Error reading or parsing file: {e}"
         
-        # --- CASE 2: User is generating a preview/download from components ---
-        elif 'generate_from_components' in request.form:
-            # Reconstruct the markdown from the selected components
+        # Determine the action based on the button/data submitted
+        action = "parse"
+        if 'generate_from_components' in request.form:
+            action = "generate"
+
+        # --- ACTION 1: PARSE uploaded text or file ---
+        if action == "parse":
+            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}"
+            
+            if markdown_text and is_repo2markdown_format(markdown_text):
+                try:
+                    components = parse_repo2markdown(markdown_text)
+                    if not components:
+                        error_message = "Repo2Markdown format detected, but no file components could be parsed."
+                except Exception as e:
+                    error_message = f"Error parsing Repo2Markdown format: {e}"
+            else:
+                final_markdown_to_render = markdown_text
+
+        # --- ACTION 2: GENERATE from selected components ---
+        elif action == "generate":
             final_markdown_parts = []
-            for i in range(len(request.form) // 2): # Approx number of components
+            
+            # Re-read component data from hidden form fields to reconstruct the UI
+            comp_count = int(request.form.get('component_count', 0))
+            for i in range(comp_count):
                 comp_type = request.form.get(f'comp_type_{i}')
                 if not comp_type: continue
+                
+                is_selected = f'include_comp_{i}' in request.form
+                filename = request.form.get(f'comp_filename_{i}')
+                content = request.form.get(f'comp_content_{i}')
 
-                # Check if the component was selected
-                if f'include_comp_{i}' in request.form:
-                    content = request.form.get(f'comp_content_{i}', '')
-                    if comp_type == 'code':
-                        lang = request.form.get(f'comp_lang_{i}', '')
-                        final_markdown_parts.append(f"```{lang}\n{content}\n```")
-                    else: # text
+                # Re-add to components list to maintain UI state
+                components.append({
+                    'type': comp_type,
+                    'filename': filename,
+                    'content': content,
+                    'is_selected': is_selected
+                })
+                
+                # If selected, add it to the final document to be rendered
+                if is_selected:
+                    if comp_type == 'intro':
                         final_markdown_parts.append(content)
-            
-            final_markdown_to_render = "".join(final_markdown_parts)
+                    else: # file
+                        final_markdown_parts.append(f"### File: {filename}\n{content}")
 
-            # Pass the reconstructed components back to the template to preserve the UI state
-            components = []
-            for i in range(len(request.form) // 2):
-                if request.form.get(f'comp_type_{i}'):
-                    components.append({
-                        'type': request.form.get(f'comp_type_{i}'),
-                        'id': i,
-                        'language': request.form.get(f'comp_lang_{i}'),
-                        'content': request.form.get(f'comp_content_{i}'),
-                        'is_selected': f'include_comp_{i}' in request.form
-                    })
-
-        # --- CASE 3: Simple text area input (fallback) ---
-        else:
-            final_markdown_to_render = request.form.get("markdown_text", "")
-            markdown_text = final_markdown_to_render
-
-
-        # --- HTML & PNG GENERATION LOGIC ---
+            final_markdown_to_render = "\n\n---\n\n".join(final_markdown_parts)
+            
+        # --- HTML & PNG Conversion Logic ---
         if final_markdown_to_render:
             try:
                 html_content = markdown.markdown(final_markdown_to_render, extensions=['fenced_code', 'tables'])
                 
-                # ... (The HTML and CSS generation logic remains the same) ...
                 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; }}
@@ -174,7 +174,7 @@ def index():
             except Exception as e:
                 error_message = f"An error occurred during conversion: {e}"
                 print(f"Error: {traceback.format_exc()}")
-
+    
     # --- RENDER THE MAIN TEMPLATE ---
     return render_template_string("""
     <!DOCTYPE html>
@@ -195,8 +195,8 @@ def index():
             .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: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; }
-            .action-btn { background-color: #007BFF; color: white; }
+            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; }
             .download-btn:hover { background-color: #218838; }
@@ -204,14 +204,14 @@ def index():
             .error { color: #D8000C; background-color: #FFD2D2; padding: 10px; border-radius: 5px; margin-top: 15px; }
             .info { color: #00529B; background-color: #BDE5F8; padding: 10px; border-radius: 5px; margin: 10px 0; }
             /* Component Selection Styles */
-            .component-container { border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 15px; background: #fafafa; }
+            .component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
+            .component-container { border: 1px solid #e0e0e0; border-radius: 5px; background: #fafafa; }
             .component-header { background: #f1f1f1; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 10px; }
             .component-header input[type="checkbox"] { width: 18px; height: 18px; }
             .component-header label { margin-bottom: 0; font-weight: bold; }
-            .component-header .lang-tag { background: #007BFF; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; }
             .component-content { padding: 10px; }
             .component-content textarea { height: 150px; }
-            .selection-controls { margin-bottom: 15px; }
+            .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
         <script>
             function toggleAllComponents(checked) {
@@ -223,8 +223,8 @@ def index():
     <body>
         <h1>Advanced Markdown Converter & Composer</h1>
 
-        <!-- Uploader and Composer Form -->
         <form method="post" enctype="multipart/form-data">
+            <!-- This section is shown if no components are parsed yet -->
             {% if not components %}
                 <fieldset>
                     <legend>Option 1: Paste Markdown</legend>
@@ -234,48 +234,46 @@ def index():
                 <fieldset>
                     <legend>Option 2: Upload a Markdown File</legend>
                     <input type="file" name="markdown_file" accept=".md,.txt,text/markdown">
-                    <button type="submit" class="action-btn" style="margin-top:10px;">Upload and Analyze</button>
                 </fieldset>
+                <div class="controls"><button type="submit" class="action-btn">Parse and Preview</button></div>
             {% endif %}
-
-            <!-- This section is shown only after a file is uploaded and parsed -->
+            
+            <!-- This section is shown only after a Repo2Markdown file is parsed -->
             {% if components %}
                 <input type="hidden" name="generate_from_components" value="true">
+                <input type="hidden" name="component_count" value="{{ components|length }}">
                 <fieldset>
-                    <legend>Detected Components</legend>
-                    <div class="info">Select the components to include in the final output.</div>
+                    <legend>Detected File Components</legend>
+                    <div class="info">Repo2Markdown format detected. Select the files to include in the final document.</div>
                     <div class="selection-controls">
                         <button type="button" onclick="toggleAllComponents(true)">Select All</button>
                         <button type="button" onclick="toggleAllComponents(false)">Deselect All</button>
                     </div>
-                    {% 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 is not defined or comp.is_selected %}checked{% endif %}>
-                                {% if comp.type == 'code' %}
-                                    <label for="include_comp_{{ loop.index0 }}">Code Block <span class="lang-tag">{{ comp.language }}</span></label>
-                                {% else %}
-                                    <label for="include_comp_{{ loop.index0 }}">Base Text</label>
-                                {% endif %}
+                    <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{% endif %}>
+                                    <label for="include_comp_{{ loop.index0 }}">{{ comp.filename }}</label>
+                                </div>
+                                <div class="component-content">
+                                    <textarea readonly>{{ comp.content }}</textarea>
+                                </div>
                             </div>
-                            <div class="component-content">
-                                <textarea readonly>{{ comp.content }}</textarea>
-                            </div>
-                        </div>
-                        <!-- Hidden fields to preserve data on next post -->
-                        <input type="hidden" name="comp_type_{{ loop.index0 }}" value="{{ comp.type }}">
-                        <input type="hidden" name="comp_content_{{ loop.index0 }}" value="{{ comp.content }}">
-                        <input type="hidden" name="comp_lang_{{ loop.index0 }}" value="{{ comp.language or '' }}">
-                    {% endfor %}
+                            <!-- Hidden fields to preserve data on next post -->
+                            <input type="hidden" name="comp_type_{{ loop.index0 }}" value="{{ comp.type }}">
+                            <input type="hidden" name="comp_filename_{{ loop.index0 }}" value="{{ comp.filename }}">
+                            <input type="hidden" name="comp_content_{{ loop.index0 }}" value="{{ comp.content }}">
+                        {% endfor %}
+                    </div>
                 </fieldset>
             {% endif %}
 
-            <!-- Styling and Generation controls are always visible -->
+            <!-- Styling and Generation controls -->
             <fieldset>
                 <legend>Styling Options</legend>
                 <div class="style-grid">
-                    <!-- Font, Size, Color inputs... -->
-                     <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_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>
@@ -288,13 +286,15 @@ def index():
 
             <div class="controls">
                 <div class="main-actions">
-                    <button type="submit" class="action-btn">Generate Preview</button>
+                    <button type="submit" class="action-btn">
+                        {% if components %}Re-Generate Preview{% else %}Generate Preview{% endif %}
+                    </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 %}
                 </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 %}
     </body>