Update app.py

app.py

@@ -7,40 +7,115 @@ from io import BytesIO
 
 app = Flask(__name__)
 
-# Use a directory within the app's working directory to avoid permission issues
+# Use a directory within the app's working directory to avoid permission issues.
+# This makes it more compatible with various deployment environments.
 TEMP_DIR = os.path.join(os.getcwd(), "temp")
 
-# Create temporary directory if it doesn't exist
+# Create the temporary directory if it doesn't exist.
 try:
     os.makedirs(TEMP_DIR, exist_ok=True)
 except Exception as e:
+    # Log an error if the directory cannot be created.
     print(f"Error creating temp directory: {e}")
 
+# Define default values for styling options for a cleaner initial state.
+DEFAULT_STYLES = {
+    "font_family": "'Arial', sans-serif",
+    "font_size": "16",
+    "text_color": "#333333",
+    "background_color": "#ffffff",
+    "code_bg_color": "#f4f4f4",
+    "custom_css": ""
+}
+
 @app.route("/", methods=["GET", "POST"])
 def index():
+    """
+    Main route to handle form submission, Markdown processing, and rendering.
+    """
     preview_html = None
     download_available = False
-    download_type = "png"
     error_message = None
-    markdown_text = request.form.get("markdown_text", "") if request.method == "POST" else ""
+
+    # On POST, process the form data. On GET, use defaults.
+    if request.method == "POST":
+        markdown_text = request.form.get("markdown_text", "")
+        download_type = request.form.get("download_type", "png")
+
+        # Get styling options from the form, falling back to defaults.
+        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"]),
+            "custom_css": request.form.get("custom_css", DEFAULT_STYLES["custom_css"])
+        }
+        include_fontawesome = "include_fontawesome" in request.form
+
+    else: # GET request
+        markdown_text = ""
+        download_type = "png"
+        styles = DEFAULT_STYLES.copy()
+        include_fontawesome = False
+
 
     if request.method == "POST" and markdown_text:
         try:
-            # Convert Markdown to HTML
+            # Convert Markdown to HTML using python-markdown library.
+            # Extensions for tables and fenced code blocks are enabled.
             html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables'])
 
-            # Prepare HTML with basic styling
+            # Optional: Include Font Awesome CSS if the user checked the box.
+            fontawesome_link = ""
+            if include_fontawesome:
+                fontawesome_link = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">'
+
+            # Dynamically generate the CSS style block from user options.
+            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; /* Helps imgkit to crop correctly */
+                }}
+                pre, code {{
+                    background: {styles['code_bg_color']};
+                    padding: 10px;
+                    border-radius: 5px;
+                }}
+                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;
+                }}
+                /* User-defined custom CSS */
+                {styles['custom_css']}
+            </style>
+            """
+
+            # Combine everything into a full HTML document.
             full_html = f"""
             <!DOCTYPE html>
             <html>
             <head>
-                <style>
-                    body {{ font-family: Arial, sans-serif; padding: 20px; }}
-                    pre, code {{ background: #f4f4f4; padding: 10px; border-radius: 5px; }}
-                    table {{ border-collapse: collapse; width: 100%; }}
-                    th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
-                    th {{ background-color: #f2f2f2; }}
-                </style>
+                <meta charset="UTF-8">
+                {fontawesome_link}
+                {style_block}
             </head>
             <body>
                 {html_content}
@@ -48,28 +123,26 @@ def index():
             </html>
             """
 
-            # Save HTML to a temporary file
-            html_path = os.path.join(TEMP_DIR, "output.html")
-            with open(html_path, "w", encoding="utf-8") as f:
-                f.write(full_html)
-
-            # Generate preview HTML
+            # Set flags and content for the frontend preview.
             preview_html = full_html
             download_available = True
-            download_type = request.form.get("download_type", "png")
 
+            # If the user clicked the "Download" button.
             if "download" in request.form:
                 if download_type == "html":
+                    # For HTML download, send the generated HTML directly.
                     return send_file(
-                        html_path,
+                        BytesIO(full_html.encode("utf-8")),
                         as_attachment=True,
                         download_name="output.html",
                         mimetype="text/html"
                     )
-                else:  # PNG
-                    # Convert HTML to PNG using imgkit
+                else:  # For PNG download
+                    # Use imgkit to convert the HTML string to a PNG image.
+                    # The 'quiet' option suppresses console output from wkhtmltoimage.
                     png_path = os.path.join(TEMP_DIR, "output.png")
-                    imgkit.from_string(full_html, png_path, options={"quiet": "",'encoding': "UTF-8"})
+                    imgkit.from_string(full_html, png_path, options={"quiet": "", 'encoding': "UTF-8"})
+
                     return send_file(
                         png_path,
                         as_attachment=True,
@@ -78,41 +151,110 @@ def index():
                     )
 
         except Exception as e:
-            error_message = f"Error processing request: {str(e)}"
+            # In case of any error, display a detailed message to the user.
+            error_message = f"An error occurred: {str(e)}"
             print(f"Error: {traceback.format_exc()}")
 
+    # Render the main page template with all the necessary variables.
     return render_template_string("""
     <!DOCTYPE html>
-    <html>
+    <html lang="en">
     <head>
-        <title>Markdown to PNG/HTML Converter</title>
+        <meta charset="UTF-8">
+        <title>Advanced Markdown to PNG/HTML Converter</title>
         <style>
-            body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-            textarea { width: 100%; height: 300px; margin-bottom: 10px; }
-            select, button { padding: 10px; margin: 5px; }
-            .preview { border: 1px solid #ddd; padding: 15px; margin-top: 20px; }
-            .download-btn { background-color: #4CAF50; color: white; border: none; cursor: pointer; }
-            .download-btn:hover { background-color: #45a049; }
-            .error { color: red; margin-top: 10px; }
+            body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; }
+            h1 { text-align: center; color: #333; }
+            form { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+            textarea { width: 100%; height: 300px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; padding: 10px; }
+            .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
+            .main-actions, .style-options { 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; }
+            .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; }
+            select, input[type="number"], input[type="color"], input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
+            button { padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
+            .generate-btn { background-color: #007BFF; color: white; }
+            .generate-btn:hover { background-color: #0056b3; }
+            .download-btn { background-color: #28a745; color: white; }
+            .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; }
+            .info { color: #00529B; background-color: #BDE5F8; padding: 10px; border-radius: 5px; margin: 10px 0; }
         </style>
     </head>
     <body>
-        <h1>Markdown to PNG/HTML Converter</h1>
+        <h1>Advanced Markdown to PNG/HTML Converter</h1>
         <form method="post">
-            <textarea name="markdown_text" placeholder="Paste your Markdown here...">{{ markdown_text }}</textarea><br>
-            <label for="download_type">Output format:</label>
-            <select 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><br>
-            <button type="submit">Generate Preview</button>
-            {% if download_available %}
-                <button type="submit" name="download" value="true" class="download-btn">Download {{ download_type.upper() }}</button>
-            {% endif %}
+            <textarea name="markdown_text" placeholder="Paste your Markdown here...">{{ styles.get('markdown_text', '') }}</textarea>
+            <div class="info">
+                <b>Tip:</b> To include images, use full public URLs (e.g., `https://.../image.png`).
+                To use icons, check "Include Font Awesome" below and use tags like `<i class="fa-solid fa-star"></i>`.
+            </div>
+
+            <fieldset>
+                <legend>Styling Options</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>
+                 <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>
+            </fieldset>
+
+            <div class="controls">
+                <div class="main-actions">
+                    <button type="submit" class="generate-btn">Generate 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 %}
+                </div>
+            </div>
         </form>
+
         {% if error_message %}
             <p class="error">{{ error_message }}</p>
         {% endif %}
+
         {% if preview_html %}
             <h2>Preview</h2>
             <div class="preview">
@@ -121,8 +263,17 @@ def index():
         {% endif %}
     </body>
     </html>
-    """, preview_html=preview_html, download_available=download_available, 
-       download_type=download_type, error_message=error_message, markdown_text=markdown_text)
+    """,
+    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
+    )
 
 if __name__ == "__main__":
+    # It's recommended to run Flask applications using a production-ready WSGI server.
+    # The built-in development server is used here for convenience.
     app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))