Spaces:

broadfield-dev
/

markdown2png

Paused

App Files Files Community

broadfield-dev commited on Aug 21, 2025

Commit

0cf906b

verified ·

1 Parent(s): c6f9d3d

Update app.py

Browse files

Files changed (1) hide show

app.py +3 -18

app.py CHANGED Viewed

@@ -13,10 +13,10 @@ from pygments.styles import get_all_styles
 app = Flask(__name__)
-TEMP_DIR = os.path.join(os.getcwd(), "temp")
 os.makedirs(TEMP_DIR, exist_ok=True)
-# --- FORMAT PARSING AND DETECTION (Unchanged) ---
 def parse_repo2markdown(text):
     components = []
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
@@ -55,7 +55,6 @@ def parse_changelog(text):
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
     text = request.form.get('markdown_text', '')
@@ -76,7 +75,6 @@ def parse_endpoint():
     except Exception as e:
         return jsonify({'error': f'Failed to parse: {e}'}), 500
-# --- HTML & PNG BUILDER (Unchanged but correct logic) ---
 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
@@ -96,8 +94,6 @@ def build_full_html(markdown_text, styles, include_fontawesome):
             font-family: {font_family}; font-size: {styles.get('font_size', '16')}px;
             color: {styles.get('text_color', '#333')}; background-color: {styles.get('background_color', '#fff')};
         }}
-        /* ... other scoped styles ... */
         {wrapper_id} table {{ border-collapse: collapse; width: 100%; }}
         {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
         {wrapper_id} th {{ background-color: #f2f2f2; }}
@@ -122,7 +118,6 @@ def build_full_html(markdown_text, styles, include_fontawesome):
     return full_html
-# --- API ENDPOINT for Conversion (CHANGED) ---
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
     data = request.json
@@ -132,7 +127,6 @@ def convert_endpoint():
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
-        # Define options here to avoid repetition and add the required fix
         options = {"quiet": "", 'encoding': "UTF-8", "--no-cache": ""}
         if data.get('download', False):
@@ -150,7 +144,6 @@ def convert_endpoint():
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
-# --- MAIN PAGE RENDERER (with corrected CSS) ---
 @app.route('/')
 def index():
     highlight_styles = sorted(list(get_all_styles()))
@@ -182,22 +175,19 @@ def index():
             .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-content textarea { height: 150px; } /* <-- FIXED: Taller text area */
             .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
     </head>
     <body>
         <h1>Intelligent Markdown Converter</h1>
         <form id="main-form" onsubmit="return false;">
-            <!-- Input and Styling sections -->
             <fieldset><legend>1. Load Content</legend><div id="info-box" class="info"></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-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>
             <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>3. Configure Styles</legend><div class="style-grid"><div><label>Font Family:</label><select id="font_family"><optgroup label="Sans-Serif"><option value="'Arial', sans-serif">Arial</option><option value="'Roboto', sans-serif">Roboto</option></optgroup><optgroup label="Serif"><option value="'Times New Roman', serif">Times New Roman</option><option value="'Georgia', serif">Georgia</option></optgroup></select></div><div><label>Font Size (px):</label><input type="number" id="font_size" value="16"></div><div><label>Highlight Theme:</label><select id="highlight_theme"><option value="none">None</option>{% for style in highlight_styles %}<option value="{{ style }}" {% if style == 'default' %}selected{% endif %}>{{ style }}</option>{% endfor %}</select></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 Padding (px):</label><input type="number" id="code_padding" value="15"></div></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="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">
             <h2>Preview</h2>
             <div class="preview-header">
@@ -212,8 +202,6 @@ def index():
             <div id="png-preview-container" class="preview-container"></div>
         </div>
         <script>
-            // --- All JavaScript is unchanged from the previous correct version ---
-            // It correctly gathers style info without modifying the parent page.
             const loadBtn = document.getElementById('load-btn'), generateBtn = document.getElementById('generate-btn'),
                   downloadHtmlBtn = document.getElementById('download-html-btn'), downloadPngBtn = document.getElementById('download-png-btn'),
                   markdownTextInput = document.getElementById('markdown-text-input'), markdownFileInput = document.getElementById('markdown-file-input'),
@@ -243,7 +231,6 @@ def index():
                     include_fontawesome: document.getElementById('include_fontawesome').checked,
                 };
             }
-            loadBtn.addEventListener('click', async () => { /* Logic unchanged */ });
             generateBtn.addEventListener('click', async () => {
                 generateBtn.textContent = 'Generating...'; generateBtn.disabled = true; errorBox.style.display = 'none';
                 const payload = buildPayload();
@@ -303,6 +290,4 @@ def index():
     """, highlight_styles=highlight_styles)
 if __name__ == "__main__":
-    # Ensure you have installed the required libraries:
-    # pip install Flask markdown imgkit pygments
     app.run(host="0.0.0.0", port=7860)

 app = Flask(__name__)
+# Corrected line to use the universally writable /tmp directory
+TEMP_DIR = "/tmp/markdown_temp"
 os.makedirs(TEMP_DIR, exist_ok=True)
 def parse_repo2markdown(text):
     components = []
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
         components.append({'type': 'version', 'filename': parts[i].replace('##', '').strip(), 'content': parts[i+1].strip()})
     return components
 @app.route('/parse', methods=['POST'])
 def parse_endpoint():
     text = request.form.get('markdown_text', '')
     except Exception as e:
         return jsonify({'error': f'Failed to parse: {e}'}), 500
 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
             font-family: {font_family}; font-size: {styles.get('font_size', '16')}px;
             color: {styles.get('text_color', '#333')}; background-color: {styles.get('background_color', '#fff')};
         }}
         {wrapper_id} table {{ border-collapse: collapse; width: 100%; }}
         {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
         {wrapper_id} th {{ background-color: #f2f2f2; }}
     return full_html
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
     data = request.json
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
         options = {"quiet": "", 'encoding': "UTF-8", "--no-cache": ""}
         if data.get('download', False):
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
 @app.route('/')
 def index():
     highlight_styles = sorted(list(get_all_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; }
+            .component-content textarea { height: 150px; }
             .selection-controls { margin: 15px 0; display: flex; gap: 10px; }
         </style>
     </head>
     <body>
         <h1>Intelligent Markdown Converter</h1>
         <form id="main-form" onsubmit="return false;">
             <fieldset><legend>1. Load Content</legend><div id="info-box" class="info"></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-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>
             <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>3. Configure Styles</legend><div class="style-grid"><div><label>Font Family:</label><select id="font_family"><optgroup label="Sans-Serif"><option value="'Arial', sans-serif">Arial</option><option value="'Roboto', sans-serif">Roboto</option></optgroup><optgroup label="Serif"><option value="'Times New Roman', serif">Times New Roman</option><option value="'Georgia', serif">Georgia</option></optgroup></select></div><div><label>Font Size (px):</label><input type="number" id="font_size" value="16"></div><div><label>Highlight Theme:</label><select id="highlight_theme"><option value="none">None</option>{% for style in highlight_styles %}<option value="{{ style }}" {% if style == 'default' %}selected{% endif %}>{{ style }}</option>{% endfor %}</select></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 Padding (px):</label><input type="number" id="code_padding" value="15"></div></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="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">
             <h2>Preview</h2>
             <div class="preview-header">
             <div id="png-preview-container" class="preview-container"></div>
         </div>
         <script>
             const loadBtn = document.getElementById('load-btn'), generateBtn = document.getElementById('generate-btn'),
                   downloadHtmlBtn = document.getElementById('download-html-btn'), downloadPngBtn = document.getElementById('download-png-btn'),
                   markdownTextInput = document.getElementById('markdown-text-input'), markdownFileInput = document.getElementById('markdown-file-input'),
                     include_fontawesome: document.getElementById('include_fontawesome').checked,
                 };
             }
             generateBtn.addEventListener('click', async () => {
                 generateBtn.textContent = 'Generating...'; generateBtn.disabled = true; errorBox.style.display = 'none';
                 const payload = buildPayload();
     """, highlight_styles=highlight_styles)
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)