pulp-image 0.1.0

package/ui/assets/pulp-logo-white.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415.5 529.41">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path class="cls-1" d="M346.12.2c.09,0,.59.93,1.5.98,8.97.51,17.82.1,26.76,2.26,3.07.74,5.89,2.08,6.6,5.48.48,2.29-1.61,10.51-2.35,13.3-15.83,59.86-73.32,98.41-134.93,89.91-3.05-.42-15.78-2.89-17.12-4.87-.93-1.42-.52-2.61.07-4.03,1.14-2.77,5.14-8.21,7.06-10.94,16.47-23.4,41.79-40.55,67.43-52.57l35.99-13.5c-27.66,1.78-55.6,10.61-78.92,25.57-11.6,7.44-22.26,17.3-31.6,27.4-2.09,2.26-6.52,9.56-9.1,9.93-2.37.31-3.07-4.87-3.17-6.68-.47-9.22,4.41-22.53,8.97-30.55C244.01,15.44,290.08,2.36,329.12.2c5.28-.29,11.7-.25,17,0ZM236.12,139.2c-.44,1.76.71,1.99,1.51,2.99,6.47,8.14,10.76,12.8,13.76,23.24,20.13,70.09-70.75,135.08-43.3,213.3,10.63,30.27,40.78,50.54,71.94,54.56,3.47,5-15.64,37.18-17.68,44.66-4.76,17.46-2.34,40.2,16.08,48.45s40.84-1.35,46.23-21.15c7.8-28.71-21.02-46.43-23.54-73.04,30.03-3.73,57.04-28.7,70.76-54.75,26.54-50.42,12.41-116.46-14.56-163.94-19.88-35-62.31-70.52-103.69-74.31-5.6-.51-11.82.37-17.5,0ZM358.34,285.49c5.45,10.48,2.86,25.11-9.19,29.24-18.38,6.3-29.57-16.02-19.48-30.48,2.57-3.68,7.51-7.59,12.13-7.76,5.86-.22,13.76,3.65,16.54,9ZM260.32,296.5c8.15,17.41-7.68,38.08-25.55,26.55-12.48-8.05-6.87-32.62,7.04-35.65,7.36-1.6,15.37,2.4,18.51,9.1ZM285.56,321.24c7.46,6.86,21.49,2.68,22.64-7.95,7.43-1.19,7.86,8.25,4.41,12.9-7.09,9.58-31.38,9.45-34.3-3.68-1.09-4.88,2.18-7.18,5.57-4.05.58.54.76,1.93,1.68,2.78ZM369.04,339.63c-5.49,4.34-14.1,4.49-19.46-.39-7.32-6.67.1-17.6,9.29-18.81,10.66-1.41,19.61,11.74,10.16,19.21ZM249.92,346.47c-1.67,10.61-16.91,13.77-24.75,8.18-11.05-7.87-2.42-22.59,10.36-21.41,2.85.27,10.46,3.18,12.34,5.21,1.64,1.76,2.44,5.61,2.06,8.02ZM288.18,502.64c1.39,1.02,4.07.79,4.79,3.22,2.24,7.59-8.97,9.33-14.36,5.35-11.73-8.67-7.4-30.05-2.76-41.78.5-1.26.54-2.95,2.26-3.23-2.68,11.06.38,29.34,10.07,36.44ZM204.12,402.7c-23.47-29.48-18.59-68.41-6.77-101.77,12.67-35.75,46.36-88.62,39.7-126.16-6.17-34.78-41.3-44.54-72.45-42.6-87.53,5.47-147.03,90.74-123.99,175.04,15.31,55.98,66.55,94.1,122.27,104.73,15.04,2.87,32.57,4.01,47.24-.76.47-3.88-3.84-5.79-6-8.49ZM62.35,309.47c-29.47-73.43,26.13-156.25,104.25-160.3,18.91-.98,41.86,6.02,48.56,25.49,11.42,33.16-22.28,84.52-34.54,115.54-12.19,30.85-19.88,67.05-7.5,98.99-47.6-4.67-92.69-34.67-110.77-79.72ZM118.43,130.01c15.23-6.54,31.01-7.87,45.94-13.06,5.85-2.04,10.06-6.62,6.22-12.71-2.56-4.05-11.56-3.38-15.99-3.06-24.6,1.76-52.08,12.13-72.79,25.21-108.78,68.66-108.48,216.91-2.63,288.26,37.1,25.01,94.65,42.97,139.37,37.48,9.21-1.13,24.79-2.97,21.09-15.95-.62-1.21-4.83-3.49-6.21-3.78-7.93-1.67-21.92.28-30.83-.17-50.09-2.56-99.61-20.78-134.78-56.73C-10.12,295.86,17.33,173.43,118.43,130.01ZM404.15,231.68c-21-59.08-73.99-107.51-138.5-110.5-8.77-.41-17.03,1.18-25.53,3.03-.61,2.07,1,2.49,2.71,2.76,4.57.73,9.81.68,14.53,1.49,95.18,16.3,146.01,124.63,138.78,213.27-.62,7.57-2.07,15.24-2.76,22.81.62,2.1.93,5.04,3.73,4.66,23.81-41.16,22.66-93.59,7.04-137.53ZM165.43,29.01c-4.24,1.88-19.1,8.81-20.81,12.18-.7,1.38-.78,2.89-.34,4.35.55,1.83,11.51,11.51,13.85,14.16,10.67,12.09,23.99,30.99,30.19,45.81,3.16,7.55,3.11,19.14,14.07,17.49,4.15-.63,5.27-2.83,6.48-6.56,2.15-6.61.99-15.68.19-22.67-2.1-18.27-8.73-42.06-18.11-57.89-3.07-5.18-7.21-12.58-14.09-11.48-2.58.41-8.62,3.37-11.42,4.61ZM337.79,297.03c12.47,3.73,11.35-14.91,1.03-12.65-6.02,1.32-6.37,11.05-1.03,12.65ZM240.62,297.2c-3.9,7.86,5.96,13.74,11.24,7.75,5.89-6.67-7.21-15.88-11.24-7.75ZM95.57,218.26c3.78,18.96,35.06,30.62,52.12,31.88,2.98.22,5.64.27,7.96-1.89,2.82-4.29-2.73-13.98-5.11-17.96-7.94-13.3-25.44-33.84-42.71-30.85-9.08,1.57-14.04,9.92-12.27,18.83ZM81.67,266.25c-6.34,8.85-1.34,20.85,8.45,24.45,9.35,3.44,17.63,2.64,27.01.01,5.12-1.43,27.93-11.55,28.94-16.11-.14-1.88-2.21-3.21-3.61-4.24-10.98-8.11-29.98-14.57-43.59-12.89-5.89.73-13.65,3.82-17.21,8.79ZM152.2,194.63c1.42,12.47,14.84,31.12,25.58,37.42,3.93,2.3,6.8,4.14,8.63-1.05,3.71-10.53,5.31-27.14,2.25-37.83-2.63-9.19-11.4-19.49-21.78-18.76-10.92.76-15.83,10.17-14.69,20.23ZM115.67,312.25c-10.58,14.93,6.07,33.06,19.82,24.82,6.92-4.15,16.38-19.04,19.4-26.6,1.68-4.19,6.16-17.75,3.78-21.33-1.55-1.53-3.89-1.05-5.84-.73-12.03,2.02-30.14,13.92-37.17,23.83Z"/>
+  </g>
+</svg>

package/ui/index.html

@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pulp Image - Browser UI</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div class="brand">
+        <img src="/assets/pulp-logo-white.svg" alt="Pulp Image logo" class="logo">
+        <div class="brand-text">
+          <h1>Pulp Image</h1>
+          <p class="brand-subtitle">by Rebellion Geeks <span class="version" id="version">v0.1.0</span></p>
+        </div>
+      </div>
+    </header>
+
+    <main class="main-content">
+      <div class="tabs">
+        <button class="tab-button active" data-tab="process">Process Images</button>
+        <button class="tab-button" data-tab="help">Help & CLI Reference</button>
+      </div>
+
+      <!-- Process Tab -->
+      <div class="tab-content active" id="process-tab">
+        <form id="process-form" class="process-form">
+          <!-- Input Source -->
+          <div class="form-group">
+            <label class="form-label">
+              Input Source <span class="required">*</span>
+            </label>
+            
+            <!-- Input Mode Switch -->
+            <div class="input-mode-switch">
+              <label class="radio-label">
+                <input type="radio" name="input-mode" value="files" checked>
+                <span>Files</span>
+              </label>
+              <label class="radio-label">
+                <input type="radio" name="input-mode" value="folder">
+                <span>Folder</span>
+              </label>
+            </div>
+            
+            <!-- Files Input -->
+            <input type="file" id="input-source-files" class="file-input" multiple accept="image/png,image/jpeg,image/webp,image/avif" style="display: block;">
+            
+            <!-- Folder Input -->
+            <input type="file" id="input-source-folder" class="file-input" webkitdirectory directory multiple style="display: none;">
+            
+            <div class="input-helper" id="input-helper">
+              Select one or more image files. Supports PNG, JPG, WebP, AVIF. Multiple files will be processed as a batch.
+            </div>
+            
+            <!-- Folder mode privacy notice -->
+            <div id="folder-privacy-notice" class="privacy-notice" style="display: none;">
+              <div class="privacy-notice-content">
+                <strong>Privacy note:</strong> Files are processed locally on your computer. Browsers may show a security prompt when selecting folders. No files are uploaded to the internet.
+              </div>
+              <div class="privacy-notice-browser" style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">
+                Your browser may ask for permission to access this folder.
+              </div>
+            </div>
+            
+            <!-- File List Preview -->
+            <div id="input-preview" class="input-preview">
+              <div class="file-list-summary">
+                <span id="file-list-summary-text">No files selected</span>
+                <button type="button" id="toggle-file-list" class="toggle-file-list-btn" style="display: none;">Show files</button>
+              </div>
+              <div id="file-list-detail" class="file-list-detail" style="display: none;">
+                <!-- File list will be populated here -->
+              </div>
+              <div style="margin-top: 0.5rem;">
+                <button type="button" id="toggle-ignored-files" class="toggle-file-list-btn toggle-file-list-btn-secondary" style="display: none;">Show ignored files</button>
+              </div>
+              <div id="ignored-files-list" class="file-list-detail ignored-files-list" style="display: none;">
+                <!-- Ignored files will be populated here -->
+              </div>
+            </div>
+          </div>
+
+          <!-- Output Directory -->
+          <div class="form-group">
+            <label for="output-dir" class="form-label">
+              Output Directory
+            </label>
+            <input type="text" id="output-dir" class="text-input" readonly>
+            <div class="input-helper" id="output-dir-helper">
+              Files will be saved in a new folder inside your home directory.
+            </div>
+            
+            <!-- Advanced Output Options -->
+            <details class="advanced-options">
+              <summary class="advanced-options-summary">Advanced output options</summary>
+              <div class="advanced-options-content">
+                <label class="checkbox-label">
+                  <input type="checkbox" id="use-custom-output">
+                  <span class="checkbox-text">Use custom output directory</span>
+                </label>
+                <div class="input-helper">
+                  When enabled, you can specify a custom output directory. Use ~ for home directory.
+                </div>
+              </div>
+            </details>
+            
+            <div class="form-actions-inline" style="margin-top: 0.5rem;">
+              <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <button type="button" id="open-results-folder" class="button button-secondary" style="display: none;">
+                  Open results folder
+                </button>
+                <div id="open-results-folder-helper" class="button-helper-text" style="display: none;"></div>
+                <div id="open-results-folder-fallback" class="folder-open-fallback" style="display: none;">
+                  <div class="folder-open-fallback-message"></div>
+                  <div class="folder-open-fallback-path"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Format -->
+          <div class="form-group">
+            <label for="format" class="form-label">Output Format</label>
+            <select id="format" class="select-input">
+              <option value="">Keep original format</option>
+              <option value="png">PNG - Lossless, supports transparency</option>
+              <option value="jpg">JPG - Lossy, best for photos, no transparency</option>
+              <option value="webp">WebP - Modern format, good compression</option>
+              <option value="avif">AVIF - Best compression, modern browsers</option>
+            </select>
+            <div class="input-helper" id="format-helper">
+              Select output format or keep original.
+            </div>
+          </div>
+
+          <!-- Width & Height -->
+          <div class="form-row">
+            <div class="form-group">
+              <label for="width" class="form-label">Width (px)</label>
+              <input type="number" id="width" class="number-input" min="1" placeholder="Auto">
+              <div class="input-helper">Leave empty to preserve aspect ratio</div>
+            </div>
+            <div class="form-group">
+              <label for="height" class="form-label">Height (px)</label>
+              <input type="number" id="height" class="number-input" min="1" placeholder="Auto">
+              <div class="input-helper">Leave empty to preserve aspect ratio</div>
+            </div>
+          </div>
+
+          <!-- Quality -->
+          <div class="form-group">
+            <label for="quality" class="form-label">
+              Quality <span id="quality-value" class="value-display">80</span>
+            </label>
+            <input type="range" id="quality" class="slider-input" min="1" max="100" value="80">
+            <div class="input-helper" id="quality-helper">
+              Quality for lossy formats (1-100). Higher = better quality but larger file.
+            </div>
+          </div>
+
+          <!-- Lossless -->
+          <div class="form-group">
+            <label class="toggle-label">
+              <input type="checkbox" id="lossless" class="toggle-input">
+              <span class="toggle-slider"></span>
+              <span class="toggle-text">Lossless Compression</span>
+            </label>
+            <div class="input-helper" id="lossless-helper">
+              Use lossless compression where supported (PNG, WebP, AVIF). PNG is always lossless.
+            </div>
+          </div>
+
+          <!-- Alpha Mode -->
+          <div class="form-group">
+            <label class="form-label">Alpha (Transparency) Handling</label>
+            <div class="radio-group">
+              <label class="radio-label">
+                <input type="radio" name="alpha-mode" value="flatten" checked>
+                <span>Flatten</span>
+              </label>
+              <label class="radio-label">
+                <input type="radio" name="alpha-mode" value="error">
+                <span>Error</span>
+              </label>
+            </div>
+            <div class="input-helper">
+              Flatten: Composite transparency onto background color. Error: Fail if transparency is present.
+            </div>
+          </div>
+
+          <!-- Background Color -->
+          <div class="form-group">
+            <label for="background" class="form-label">Background Color</label>
+            <div class="color-input-wrapper">
+              <input type="color" id="background" class="color-input" value="#ffffff">
+              <input type="text" id="background-text" class="color-text-input" value="#ffffff" readonly>
+            </div>
+            <div class="input-helper">
+              Background color for flattening transparency (used when converting to formats without transparency).
+            </div>
+          </div>
+
+          <!-- Rename Pattern -->
+          <div class="form-group">
+            <label for="rename-pattern" class="form-label">Rename Pattern (optional)</label>
+            <input type="text" id="rename-pattern" class="text-input" placeholder="e.g., {name}-optimized.{ext}">
+            <div class="input-helper">
+              Supported tokens: <code>{name}</code> (original basename), <code>{ext}</code> (output extension), <code>{index}</code> (1-based index). 
+              The rename pattern fully controls the output filename. <code>{name}</code> is optional and can be omitted.
+              <br><br>
+              <strong>Example:</strong> <code>{index}-cute-animal.{ext}</code><br>
+              → <code>1-cute-animal.webp</code>, <code>2-cute-animal.webp</code>, <code>3-cute-animal.webp</code>
+            </div>
+            <div id="rename-preview" class="preview-text"></div>
+          </div>
+
+          <!-- Suffix (Legacy - keep for backward compatibility but deprecate) -->
+          <div class="form-group" style="display: none;">
+            <label for="suffix" class="form-label">Custom Suffix</label>
+            <input type="text" id="suffix" class="text-input" placeholder="e.g., optimized">
+            <div class="input-helper">
+              Custom suffix to add before file extension. Example: "optimized" creates "image-optimized.png"
+            </div>
+            <div id="suffix-preview" class="preview-text"></div>
+          </div>
+
+          <!-- Auto Suffix -->
+          <div class="form-group">
+            <label class="toggle-label">
+              <input type="checkbox" id="auto-suffix" class="toggle-input">
+              <span class="toggle-slider"></span>
+              <span class="toggle-text">Auto Suffix</span>
+            </label>
+            <div class="input-helper">
+              Automatically add size-based suffix: -800w (width), -600h (height), -800x600 (both).
+            </div>
+            <div id="auto-suffix-preview" class="preview-text"></div>
+          </div>
+
+          <!-- Overwrite -->
+          <div class="form-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="overwrite" class="checkbox-input">
+              <span class="checkbox-text">Overwrite Existing Files</span>
+            </label>
+            <div class="input-helper warning-text" id="overwrite-warning" style="display: none;">
+              ⚠️ Warning: This will overwrite existing output files.
+            </div>
+          </div>
+
+          <!-- Submit Button -->
+          <div class="form-actions">
+            <button type="submit" id="process-button" class="button button-primary">
+              Process Images
+            </button>
+            <button type="button" id="reset-button" class="button button-secondary">
+              Reset Form
+            </button>
+          </div>
+        </form>
+
+        <!-- Results Section -->
+        <div id="results-section" class="results-section" style="display: none;">
+          <div style="margin-bottom: 1rem;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+              <h2 class="results-title" style="margin: 0;">Processing Results</h2>
+              <button type="button" id="open-results-folder-results" class="button button-secondary" style="display: none;">
+                Open results folder
+              </button>
+            </div>
+            <div id="open-results-folder-results-helper" class="button-helper-text" style="display: none; text-align: right;"></div>
+            <div id="open-results-folder-results-fallback" class="folder-open-fallback" style="display: none; text-align: right;">
+              <div class="folder-open-fallback-message"></div>
+              <div class="folder-open-fallback-path"></div>
+            </div>
+          </div>
+          <div id="results-content"></div>
+        </div>
+      </div>
+
+      <!-- Help Tab -->
+      <div class="tab-content" id="help-tab">
+        <div class="help-content">
+          <div class="help-info" style="background: var(--orange-bg-light); padding: 1rem; border-radius: var(--border-radius); margin-bottom: 2rem;">
+            <h2 style="margin-top: 0;">Welcome to Pulp Image by Rebellion Geeks</h2>
+            <p><strong>You do NOT need the CLI to use Pulp Image.</strong> The browser UI you're using right now works fully offline and is the easiest way to process your images. The CLI (command line interface) is optional and only needed for advanced workflows.</p>
+          </div>
+
+          <div class="help-info">
+            <h3>Why use the CLI?</h3>
+            <p>The browser UI works fully offline and is easiest for most users. The CLI exists for advanced workflows such as:</p>
+            <ul>
+              <li><strong>Deleting original files after processing</strong> - Due to browser security rules, some filesystem actions (like deleting original files) are only possible when using the CLI.</li>
+              <li>Automation and scripts - Running Pulp Image from other programs or scripts</li>
+              <li>Power-user batch workflows - Processing thousands of images with custom automation</li>
+            </ul>
+            <p><em>If you're happy using this browser interface, you don't need to install the CLI at all!</em></p>
+          </div>
+
+          <div class="help-info">
+            <h3>Using the CLI (Advanced / Optional)</h3>
+            <p>If you want to use the command line interface, follow these steps:</p>
+            
+            <h4>Step 1: Install Node.js</h4>
+            <p>Pulp Image's CLI requires Node.js, which includes npm (Node Package Manager).</p>
+            <ul>
+              <li>Go to: <a href="https://nodejs.org" target="_blank" rel="noopener">https://nodejs.org</a></li>
+              <li>Download the LTS (Long Term Support) version</li>
+              <li>Install it like a normal app (double-click the installer and follow the prompts)</li>
+              <li>Restart your computer after installation</li>
+            </ul>
+
+            <h4>Step 2: Open a terminal</h4>
+            <p>You'll need to open a terminal (also called command prompt or command line) to run CLI commands:</p>
+            <ul>
+              <li><strong>macOS:</strong> Open Spotlight (press <kbd>Cmd + Space</kbd>), type "Terminal", then press Enter</li>
+              <li><strong>Windows:</strong> Press the Start button, type "Command Prompt" or "PowerShell", then open it</li>
+              <li><strong>Linux:</strong> Open your terminal application (usually found in your applications menu)</li>
+            </ul>
+
+            <h4>Step 3: Install Pulp Image CLI</h4>
+            <p>In the terminal, type this command and press Enter:</p>
+            <div class="example-block">
+              <code>npm install -g pulp-image</code>
+            </div>
+            <p>This installs Pulp Image globally (meaning it works from anywhere on your computer).</p>
+            <p><em>This may take a minute. If you see errors about permissions, consult npm's documentation or ask for help.</em></p>
+
+            <h4>Step 4: Verify installation</h4>
+            <p>Type this command to check if Pulp Image is installed correctly:</p>
+            <div class="example-block">
+              <code>pulp --help</code>
+            </div>
+            <p>You should see a list of available commands and options. If you see an error, the installation may not have completed successfully.</p>
+
+            <h4>Step 5: Run Pulp on your images</h4>
+            <p>Commands run in the folder where your images are located. Here's how to use it:</p>
+            <div class="example-block">
+              <code>cd Desktop/photos<br>pulp .</code>
+            </div>
+            <p>Explanation:</p>
+            <ul>
+              <li><code>cd</code> changes directory (folder) - replace "Desktop/photos" with the path to your images</li>
+              <li><code>.</code> means "current folder" - this processes all supported images in that folder</li>
+            </ul>
+            <p>You can also process a single file:</p>
+            <div class="example-block">
+              <code>pulp image.png --format webp</code>
+            </div>
+          </div>
+
+          <h2>CLI Reference</h2>
+          <p>This UI maps directly to CLI commands. Here's how each option translates:</p>
+          
+          <div class="help-mapping">
+            <h3>UI Option → CLI Flag</h3>
+            <table class="help-table">
+              <tr><td><strong>Input Source</strong></td><td><code>pulp [input]</code></td></tr>
+              <tr><td><strong>Output Directory</strong></td><td><code>--out &lt;dir&gt;</code></td></tr>
+              <tr><td><strong>Format</strong></td><td><code>--format &lt;format&gt;</code></td></tr>
+              <tr><td><strong>Width</strong></td><td><code>--width &lt;number&gt;</code></td></tr>
+              <tr><td><strong>Height</strong></td><td><code>--height &lt;number&gt;</code></td></tr>
+              <tr><td><strong>Quality</strong></td><td><code>--quality &lt;number&gt;</code></td></tr>
+              <tr><td><strong>Lossless</strong></td><td><code>--lossless</code></td></tr>
+              <tr><td><strong>Alpha Mode</strong></td><td><code>--alpha-mode &lt;mode&gt;</code></td></tr>
+              <tr><td><strong>Background Color</strong></td><td><code>--background &lt;color&gt;</code></td></tr>
+              <tr><td><strong>Rename Pattern</strong></td><td><code>--rename-pattern &lt;pattern&gt;</code> (UI only)</td></tr>
+              <tr><td><strong>Custom Suffix</strong></td><td><code>--suffix &lt;text&gt;</code></td></tr>
+              <tr><td><strong>Auto Suffix</strong></td><td><code>--auto-suffix</code></td></tr>
+              <tr><td><strong>Overwrite</strong></td><td><code>--overwrite</code></td></tr>
+              <tr><td><strong>Delete Original</strong></td><td><code>--delete-original</code> (CLI only)</td></tr>
+            </table>
+          </div>
+
+          <div class="help-examples">
+            <h3>CLI Examples</h3>
+            <div class="example-block">
+              <code>pulp image.png --format webp --quality 95</code>
+              <p>Convert PNG to WebP with high quality</p>
+            </div>
+            <div class="example-block">
+              <code>pulp image.png --width 800</code>
+              <p>Resize to 800px width (preserves aspect ratio)</p>
+            </div>
+            <div class="example-block">
+              <code>pulp image.png --format webp --out ./output</code>
+              <p>Convert and save to custom output directory</p>
+            </div>
+            <div class="example-block">
+              <code>pulp image.png --width 800 --height 600 --auto-suffix</code>
+              <p>Resize to exact dimensions with auto suffix</p>
+            </div>
+            <div class="example-block">
+              <code>pulp ./images --format webp --out ./output --verbose</code>
+              <p>Process entire directory with verbose output</p>
+            </div>
+            <div class="example-block">
+              <code>pulp image.png --format jpg --background "#ff0000"</code>
+              <p>Convert PNG with transparency to JPG with red background</p>
+            </div>
+            <div class="example-block">
+              <code>pulp image.png --format avif --quality 70</code>
+              <p>Convert to AVIF with custom quality</p>
+            </div>
+            <div class="example-block">
+              <code>pulp ./images --width 800 --auto-suffix --suffix "thumb" --out ./pulp-image-results</code>
+              <p>Process directory with resize, auto suffix, and custom suffix</p>
+            </div>
+          </div>
+
+          <div class="help-info">
+            <h3>When to Use CLI vs UI</h3>
+            <p><strong>Use CLI when:</strong></p>
+            <ul>
+              <li>Automating workflows or scripts</li>
+              <li>Processing large batches from command line</li>
+              <li>Integrating with other tools</li>
+              <li>You need to delete original files after processing (CLI only)</li>
+              <li>You're comfortable with command line</li>
+            </ul>
+            <p><strong>Use UI when:</strong></p>
+            <ul>
+              <li>You're new to the tool</li>
+              <li>You want visual feedback and guidance</li>
+              <li>You need to understand option combinations</li>
+              <li>You want to keep your original files safe (UI processes copies)</li>
+              <li>You prefer point-and-click interfaces</li>
+            </ul>
+          </div>
+
+          <div class="help-info">
+            <h3>Rename Patterns</h3>
+            <p>The UI supports rename patterns for flexible output filename generation. This is a UI helper feature that maps to output naming.</p>
+            <p>The rename pattern fully controls the output filename. <code>{name}</code> is optional and can be omitted.</p>
+            <p><strong>Supported tokens:</strong></p>
+            <ul>
+              <li><code>{name}</code> - Original basename (without extension)</li>
+              <li><code>{ext}</code> - Output extension (without leading dot)</li>
+              <li><code>{index}</code> - 1-based index in batch (useful for sequential naming)</li>
+            </ul>
+            <p><strong>Examples:</strong></p>
+            <ul>
+              <li><code>{name}-optimized.{ext}</code> - Adds "-optimized" suffix</li>
+              <li><code>{index}-{name}.{ext}</code> - Prefixes with sequential number</li>
+              <li><code>thumb-{name}.{ext}</code> - Prefixes all files with "thumb-"</li>
+              <li><code>{name}_web.{ext}</code> - Adds "_web" suffix</li>
+            </ul>
+            <p><strong>Full filename replacement example:</strong></p>
+            <p><code>{index}-cute-animal.{ext}</code><br>
+            → <code>1-cute-animal.webp</code>, <code>2-cute-animal.webp</code>, <code>3-cute-animal.webp</code></p>
+            <p><em>Note: If no extension is included in the pattern, the output extension will be automatically appended.</em></p>
+          </div>
+
+          <div class="help-info">
+            <h3>Compression Behavior</h3>
+            <ul>
+              <li><strong>PNG:</strong> Always lossless (no quality setting)</li>
+              <li><strong>JPG:</strong> Always lossy, default quality 80 (does not support lossless)</li>
+              <li><strong>WebP:</strong> Lossy by default (quality 80), use lossless for lossless</li>
+              <li><strong>AVIF:</strong> Lossy by default (quality 50), use lossless for lossless</li>
+            </ul>
+            <p><em>Note: Resize does not affect compression - it only changes dimensions.</em></p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
+