Update app.py

app.py

@@ -4,46 +4,83 @@ import imgkit
 import os
 import traceback
 from io import BytesIO
+import re
 
 app = Flask(__name__)
 
-# Use a directory within the app's working directory to avoid permission issues.
-# This makes it more compatible with various deployment environments.
+# Configure a temporary directory for file operations
 TEMP_DIR = os.path.join(os.getcwd(), "temp")
+os.makedirs(TEMP_DIR, exist_ok=True)
 
-# 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.
+# 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", # Default padding for code blocks
+    "code_padding": "15",
     "custom_css": ""
 }
 
-@app.route("/", methods=["GET", "POST"])
-def index():
+def parse_markdown(text):
     """
-    Main route to handle form submission, Markdown processing, and rendering.
+    Parses markdown text to separate code blocks from base text.
+    Returns a list of dictionaries, each representing a part of the document.
     """
+    # 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
+            components.append({
+                'type': 'text',
+                'id': i,
+                'content': part
+            })
+            
+    return components
+
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+    """Main route to handle file uploads, component selection, and conversion."""
+    # Initialize variables
     preview_html = None
     download_available = False
     error_message = None
+    components = []
 
-    # On POST, process the form data. On GET, use defaults.
+    # 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":
-        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.
+        # 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"]),
@@ -54,146 +91,102 @@ def index():
             "custom_css": request.form.get("custom_css", DEFAULT_STYLES["custom_css"])
         }
         include_fontawesome = "include_fontawesome" in request.form
+        download_type = request.form.get("download_type", "png")
+        final_markdown_to_render = ""
 
-    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 using python-markdown library.
-            # Extensions for tables and fenced code blocks are enabled.
-            html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables'])
-
-            # 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">'
+        # --- 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
+            final_markdown_parts = []
+            for i in range(len(request.form) // 2): # Approx number of components
+                comp_type = request.form.get(f'comp_type_{i}')
+                if not comp_type: continue
 
-            # 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 */
-                }}
-                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;
-                }}
+                # 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
+                        final_markdown_parts.append(content)
+            
+            final_markdown_to_render = "".join(final_markdown_parts)
 
-                /* --- Enhanced Code Block Styling --- */
+            # 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
+                    })
 
-                /* Style for the code block container */
-                pre {{
-                    background: {styles['code_bg_color']};
-                    padding: {styles['code_padding']}px;
-                    border-radius: 5px;
-                    white-space: pre-wrap;   /* Wrap long lines of code */
-                    word-wrap: break-word;   /* Break long words if necessary */
-                }}
+        # --- CASE 3: Simple text area input (fallback) ---
+        else:
+            final_markdown_to_render = request.form.get("markdown_text", "")
+            markdown_text = final_markdown_to_render
 
-                /* Style for inline `code` snippets */
-                code {{
-                    background: {styles['code_bg_color']};
-                    padding: 0.2em 0.4em;
-                    margin: 0;
-                    font-size: 85%;
-                    border-radius: 3px;
-                }}
 
-                /* Reset styling for <code> inside <pre> to avoid double-styling */
-                pre > code {{
-                    padding: 0;
-                    margin: 0;
-                    font-size: inherit;
-                    background: transparent;
-                    border-radius: 0;
-                }}
+        # --- HTML & PNG GENERATION LOGIC ---
+        if final_markdown_to_render:
+            try:
+                html_content = markdown.markdown(final_markdown_to_render, extensions=['fenced_code', 'tables'])
                 
-                /* User-defined custom CSS */
-                {styles['custom_css']}
-            </style>
-            """
-
-            # Combine everything into a full HTML document.
-            full_html = f"""
-            <!DOCTYPE html>
-            <html>
-            <head>
-                <meta charset="UTF-8">
-                {fontawesome_link}
-                {style_block}
-            </head>
-            <body>
-                {html_content}
-            </body>
-            </html>
-            """
-
-            # Set flags and content for the frontend preview.
-            preview_html = full_html
-            download_available = True
+                # ... (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; }}
+                    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>'
 
-            # 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(
-                        BytesIO(full_html.encode("utf-8")),
-                        as_attachment=True,
-                        download_name="output.html",
-                        mimetype="text/html"
-                    )
-                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"})
+                preview_html = full_html
+                download_available = True
 
-                    return send_file(
-                        png_path,
-                        as_attachment=True,
-                        download_name="output.png",
-                        mimetype="image/png"
-                    )
+                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:
-            # 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()}")
+            except Exception as e:
+                error_message = f"An error occurred during conversion: {e}"
+                print(f"Error: {traceback.format_exc()}")
 
-    # Render the main page template with all the necessary variables.
+    # --- RENDER THE MAIN TEMPLATE ---
     return render_template_string("""
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <title>Advanced Markdown to PNG/HTML Converter</title>
+        <title>Advanced Markdown Converter & Composer</title>
         <style>
             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; }
+            h1, h2 { text-align: center; color: #333; }
+            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; }
@@ -201,110 +194,114 @@ def index():
             .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"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
+            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; }
-            .generate-btn { background-color: #007BFF; color: white; }
-            .generate-btn:hover { background-color: #0056b3; }
+            .action-btn { background-color: #007BFF; color: white; }
+            .action-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; }
+            /* Component Selection Styles */
+            .component-container { border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 15px; 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; }
         </style>
+        <script>
+            function toggleAllComponents(checked) {
+                const checkboxes = document.querySelectorAll('.component-checkbox');
+                checkboxes.forEach(cb => cb.checked = checked);
+            }
+        </script>
     </head>
     <body>
-        <h1>Advanced Markdown to PNG/HTML Converter</h1>
-        <form method="post">
-            <textarea name="markdown_text" placeholder="Paste your Markdown here...">{{ 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>
+        <h1>Advanced Markdown Converter & Composer</h1>
+
+        <!-- Uploader and Composer Form -->
+        <form method="post" enctype="multipart/form-data">
+            {% if not components %}
+                <fieldset>
+                    <legend>Option 1: Paste Markdown</legend>
+                    <textarea name="markdown_text" rows="10" placeholder="Paste your Markdown here...">{{ markdown_text }}</textarea>
+                </fieldset>
+                <h2 style="font-size: 1.2em;">OR</h2>
+                <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>
+            {% endif %}
+
+            <!-- This section is shown only after a file is uploaded and parsed -->
+            {% if components %}
+                <input type="hidden" name="generate_from_components" value="true">
+                <fieldset>
+                    <legend>Detected Components</legend>
+                    <div class="info">Select the components to include in the final output.</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>
+                            <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 %}
+                </fieldset>
+            {% endif %}
 
+            <!-- Styling and Generation controls are always visible -->
             <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>
-                        <label for="code_padding">Code Padding (px):</label>
-                        <input type="number" id="code_padding" name="code_padding" value="{{ styles.code_padding }}">
-                    </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>
+                    <!-- 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_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>
+                <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 %}
+                    <button type="submit" class="action-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">
-                {{ preview_html | safe }}
-            </div>
-        {% endif %}
+        {% 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>
     </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
-    )
+    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__":
-    # 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)))