Spaces:

dschandra
/

Image_compress

Sleeping

App Files Files Community

dschandra commited on 23 days ago

Commit

6a8513b

verified ·

1 Parent(s): c1362e6

Create app.py

Browse files

Files changed (1) hide show

app.py +590 -0

app.py ADDED Viewed

	@@ -0,0 +1,590 @@

+import os
+import io
+import math
+from flask import Flask, request, jsonify, send_file, render_template_string
+from PIL import Image
+from werkzeug.utils import secure_filename
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 50 * 1024 * 1024  # 50MB max upload
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'webp'}
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+def get_file_size_label(size_bytes):
+    if size_bytes < 1024 * 1024:
+        return f"{size_bytes / 1024:.1f} KB"
+    return f"{size_bytes / (1024 * 1024):.2f} MB"
+def compress_to_target(img, fmt, target_bytes, original_bytes):
+    """
+    Smart compression: reduce file size to target_bytes without visible quality loss.
+    Strategy:
+      1. Try lossless/near-lossless optimization first (subsampling, optimize flags).
+      2. If still too large, gently reduce quality in steps.
+      3. Never go below quality=75 to avoid visible degradation.
+    """
+    buf = io.BytesIO()
+    # ---- PNG path (lossless format) ----
+    if fmt == "PNG":
+        # PNG compression level 0-9; higher = smaller but slower
+        for level in range(1, 10):
+            buf = io.BytesIO()
+            img.save(buf, format="PNG", optimize=True, compress_level=level)
+            if buf.tell() <= target_bytes:
+                buf.seek(0)
+                return buf, buf.tell(), "PNG"
+        # If PNG can't reach target, convert to WebP lossless
+        buf = io.BytesIO()
+        img.save(buf, format="WEBP", lossless=True, quality=100)
+        if buf.tell() <= target_bytes:
+            buf.seek(0)
+            return buf, buf.tell(), "WEBP"
+        # Last resort: lossy WebP but keep quality high (>=80)
+        for q in range(95, 79, -5):
+            buf = io.BytesIO()
+            img.save(buf, format="WEBP", quality=q, method=6)
+            if buf.tell() <= target_bytes:
+                buf.seek(0)
+                return buf, buf.tell(), "WEBP"
+        buf.seek(0)
+        return buf, buf.tell(), "WEBP"
+    # ---- JPEG / WEBP path (lossy formats) ----
+    save_fmt = "JPEG" if fmt in ("JPEG", "JPG") else "WEBP"
+    # First pass: high quality with optimize
+    for q in range(95, 74, -2):
+        buf = io.BytesIO()
+        if save_fmt == "JPEG":
+            img.save(buf, format="JPEG", quality=q, optimize=True,
+                     subsampling=0 if q >= 85 else 2)
+        else:
+            img.save(buf, format="WEBP", quality=q, method=6)
+        if buf.tell() <= target_bytes:
+            buf.seek(0)
+            return buf, buf.tell(), save_fmt
+    # Reached minimum quality — return best effort
+    buf.seek(0)
+    return buf, buf.tell(), save_fmt
+HTML_PAGE = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>ImagePress — Smart Compressor</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap" rel="stylesheet"/>
+<style>
+  :root {
+    --bg: #0a0a0f;
+    --surface: #111118;
+    --card: #16161f;
+    --border: #2a2a3a;
+    --accent: #7fff6e;
+    --accent2: #6ebaff;
+    --text: #e8e8f0;
+    --muted: #6b6b80;
+    --danger: #ff6b6b;
+    --radius: 14px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'DM Mono', monospace;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 20px 80px;
+  }
+  header {
+    text-align: center;
+    margin-bottom: 48px;
+  }
+  header h1 {
+    font-family: 'Syne', sans-serif;
+    font-size: clamp(2.4rem, 6vw, 4rem);
+    font-weight: 800;
+    letter-spacing: -1px;
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  header p {
+    color: var(--muted);
+    font-size: 0.85rem;
+    margin-top: 8px;
+    letter-spacing: 0.05em;
+  }
+  .card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 32px;
+    width: 100%;
+    max-width: 640px;
+  }
+  /* Drop zone */
+  #drop-zone {
+    border: 2px dashed var(--border);
+    border-radius: 10px;
+    padding: 48px 24px;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color .2s, background .2s;
+    position: relative;
+  }
+  #drop-zone.dragover {
+    border-color: var(--accent);
+    background: rgba(127,255,110,.05);
+  }
+  #drop-zone .icon { font-size: 2.8rem; margin-bottom: 12px; }
+  #drop-zone p { color: var(--muted); font-size: 0.8rem; line-height: 1.6; }
+  #drop-zone strong { color: var(--text); }
+  #file-input { display: none; }
+  /* Preview */
+  #preview-wrap {
+    display: none;
+    margin-top: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    position: relative;
+  }
+  #preview-wrap img {
+    width: 100%;
+    max-height: 260px;
+    object-fit: contain;
+    display: block;
+    background: #0d0d14;
+  }
+  #preview-meta {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 14px;
+    font-size: 0.75rem;
+    color: var(--muted);
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+  }
+  /* Controls */
+  .controls { margin-top: 28px; }
+  label.field-label {
+    display: block;
+    font-size: 0.72rem;
+    color: var(--muted);
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .target-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .target-row input[type="number"] {
+    flex: 1;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 14px;
+    color: var(--text);
+    font-family: 'DM Mono', monospace;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color .2s;
+  }
+  .target-row input[type="number"]:focus { border-color: var(--accent); }
+  .unit-toggle {
+    display: flex;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .unit-toggle button {
+    padding: 10px 18px;
+    background: var(--surface);
+    border: none;
+    color: var(--muted);
+    font-family: 'DM Mono', monospace;
+    font-size: 0.82rem;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+  }
+  .unit-toggle button.active {
+    background: var(--accent);
+    color: #000;
+    font-weight: 600;
+  }
+  /* Compress button */
+  #compress-btn {
+    margin-top: 24px;
+    width: 100%;
+    padding: 15px;
+    border: none;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--accent), var(--accent2));
+    color: #000;
+    font-family: 'Syne', sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: opacity .2s, transform .1s;
+    letter-spacing: .02em;
+  }
+  #compress-btn:hover { opacity: .88; }
+  #compress-btn:active { transform: scale(.98); }
+  #compress-btn:disabled { opacity: .35; cursor: not-allowed; }
+  /* Spinner */
+  #spinner {
+    display: none;
+    text-align: center;
+    margin-top: 20px;
+    color: var(--muted);
+    font-size: 0.8rem;
+  }
+  .dot-loader span {
+    display: inline-block;
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--accent);
+    margin: 0 3px;
+    animation: bounce 1s infinite;
+  }
+  .dot-loader span:nth-child(2) { animation-delay: .15s; }
+  .dot-loader span:nth-child(3) { animation-delay: .3s; }
+  @keyframes bounce {
+    0%,80%,100% { transform: translateY(0); }
+    40% { transform: translateY(-8px); }
+  }
+  /* Result */
+  #result-card {
+    display: none;
+    margin-top: 28px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  .result-header {
+    background: var(--surface);
+    padding: 14px 20px;
+    font-family: 'Syne', sans-serif;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: .05em;
+    border-bottom: 1px solid var(--border);
+  }
+  .stat-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1px;
+    background: var(--border);
+  }
+  .stat {
+    background: var(--card);
+    padding: 18px 16px;
+    text-align: center;
+  }
+  .stat .val {
+    font-family: 'Syne', sans-serif;
+    font-size: 1.3rem;
+    font-weight: 800;
+  }
+  .stat .lbl { color: var(--muted); font-size: 0.68rem; margin-top: 4px; letter-spacing: .06em; }
+  .stat.saving .val { color: var(--accent); }
+  #download-btn {
+    display: block;
+    width: calc(100% - 32px);
+    margin: 16px;
+    padding: 13px;
+    border: 1px solid var(--accent);
+    border-radius: 9px;
+    background: transparent;
+    color: var(--accent);
+    font-family: 'Syne', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 700;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    transition: background .2s, color .2s;
+    letter-spacing: .04em;
+  }
+  #download-btn:hover { background: var(--accent); color: #000; }
+  #error-msg {
+    display: none;
+    margin-top: 16px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: rgba(255,107,107,.1);
+    border: 1px solid var(--danger);
+    color: var(--danger);
+    font-size: 0.78rem;
+  }
+</style>
+</head>
+<body>
+<header>
+  <h1>ImagePress</h1>
+  <p>// compress without the blur · target any file size · zero quality loss</p>
+</header>
+<div class="card">
+  <!-- Drop zone -->
+  <div id="drop-zone">
+    <div class="icon">🗜️</div>
+    <p><strong>Drop your image here</strong><br/>or click to browse<br/><span style="font-size:.72rem">PNG · JPG · JPEG · WEBP &nbsp;|&nbsp; up to 50 MB</span></p>
+    <input type="file" id="file-input" accept=".png,.jpg,.jpeg,.webp"/>
+  </div>
+  <!-- Preview -->
+  <div id="preview-wrap">
+    <img id="preview-img" src="" alt="preview"/>
+    <div id="preview-meta">
+      <span id="meta-name">—</span>
+      <span id="meta-size">—</span>
+      <span id="meta-dim">—</span>
+    </div>
+  </div>
+  <!-- Controls -->
+  <div class="controls">
+    <label class="field-label">Target file size</label>
+    <div class="target-row">
+      <input type="number" id="target-val" min="1" placeholder="e.g. 200" value="200"/>
+      <div class="unit-toggle">
+        <button id="btn-kb" class="active" onclick="setUnit('KB')">KB</button>
+        <button id="btn-mb" onclick="setUnit('MB')">MB</button>
+      </div>
+    </div>
+  </div>
+  <button id="compress-btn" disabled onclick="compress()">⚡ Compress Image</button>
+  <div id="spinner">
+    <div class="dot-loader"><span></span><span></span><span></span></div>
+    <p style="margin-top:10px">Compressing without touching quality…</p>
+  </div>
+  <div id="error-msg"></div>
+</div>
+<!-- Result -->
+<div class="card" style="margin-top:20px; max-width:640px; width:100%;">
+  <div id="result-card">
+    <div class="result-header">✅ COMPRESSION RESULT</div>
+    <div class="stat-grid">
+      <div class="stat">
+        <div class="val" id="r-original">—</div>
+        <div class="lbl">ORIGINAL</div>
+      </div>
+      <div class="stat">
+        <div class="val" id="r-compressed">—</div>
+        <div class="lbl">COMPRESSED</div>
+      </div>
+      <div class="stat saving">
+        <div class="val" id="r-saving">—</div>
+        <div class="lbl">SAVED</div>
+      </div>
+    </div>
+    <a id="download-btn" href="#" download>⬇ Download Compressed Image</a>
+  </div>
+</div>
+<script>
+  let selectedFile = null;
+  let currentUnit = 'KB';
+  let downloadUrl = null;
+  const dropZone = document.getElementById('drop-zone');
+  const fileInput = document.getElementById('file-input');
+  dropZone.addEventListener('click', () => fileInput.click());
+  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
+  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+  dropZone.addEventListener('drop', e => {
+    e.preventDefault();
+    dropZone.classList.remove('dragover');
+    if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
+  });
+  fileInput.addEventListener('change', () => { if (fileInput.files[0]) handleFile(fileInput.files[0]); });
+  function handleFile(file) {
+    selectedFile = file;
+    const reader = new FileReader();
+    reader.onload = ev => {
+      document.getElementById('preview-img').src = ev.target.result;
+      document.getElementById('preview-wrap').style.display = 'block';
+    };
+    reader.readAsDataURL(file);
+    const img = new window.Image();
+    img.onload = () => {
+      document.getElementById('meta-dim').textContent = img.width + ' × ' + img.height;
+    };
+    img.src = URL.createObjectURL(file);
+    document.getElementById('meta-name').textContent = file.name;
+    document.getElementById('meta-size').textContent = formatBytes(file.size);
+    document.getElementById('compress-btn').disabled = false;
+    document.getElementById('result-card').style.display = 'none';
+    document.getElementById('error-msg').style.display = 'none';
+    if (downloadUrl) { URL.revokeObjectURL(downloadUrl); downloadUrl = null; }
+  }
+  function setUnit(u) {
+    currentUnit = u;
+    document.getElementById('btn-kb').classList.toggle('active', u === 'KB');
+    document.getElementById('btn-mb').classList.toggle('active', u === 'MB');
+  }
+  function formatBytes(b) {
+    return b < 1048576 ? (b/1024).toFixed(1)+' KB' : (b/1048576).toFixed(2)+' MB';
+  }
+  async function compress() {
+    if (!selectedFile) return;
+    const val = parseFloat(document.getElementById('target-val').value);
+    if (!val || val <= 0) { showError('Please enter a valid target size.'); return; }
+    const targetBytes = currentUnit === 'KB' ? val * 1024 : val * 1024 * 1024;
+    document.getElementById('compress-btn').disabled = true;
+    document.getElementById('spinner').style.display = 'block';
+    document.getElementById('result-card').style.display = 'none';
+    document.getElementById('error-msg').style.display = 'none';
+    const fd = new FormData();
+    fd.append('image', selectedFile);
+    fd.append('target_bytes', Math.round(targetBytes));
+    try {
+      const res = await fetch('/compress', { method: 'POST', body: fd });
+      if (!res.ok) {
+        const j = await res.json().catch(() => ({}));
+        throw new Error(j.error || 'Server error');
+      }
+      const blob = await res.blob();
+      const origSize = selectedFile.size;
+      const compSize = blob.size;
+      const saved = Math.max(0, origSize - compSize);
+      const pct = ((saved / origSize) * 100).toFixed(1);
+      document.getElementById('r-original').textContent = formatBytes(origSize);
+      document.getElementById('r-compressed').textContent = formatBytes(compSize);
+      document.getElementById('r-saving').textContent = pct + '%';
+      if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+      downloadUrl = URL.createObjectURL(blob);
+      const ext = res.headers.get('X-Output-Format') || 'jpg';
+      const baseName = selectedFile.name.replace(/\.[^.]+$/, '');
+      const dlBtn = document.getElementById('download-btn');
+      dlBtn.href = downloadUrl;
+      dlBtn.download = baseName + '_compressed.' + ext.toLowerCase();
+      document.getElementById('result-card').style.display = 'block';
+    } catch(err) {
+      showError(err.message || 'Compression failed. Please try again.');
+    } finally {
+      document.getElementById('compress-btn').disabled = false;
+      document.getElementById('spinner').style.display = 'none';
+    }
+  }
+  function showError(msg) {
+    const el = document.getElementById('error-msg');
+    el.textContent = '⚠ ' + msg;
+    el.style.display = 'block';
+  }
+</script>
+</body>
+</html>
+"""
+@app.route('/')
+def index():
+    return render_template_string(HTML_PAGE)
+@app.route('/compress', methods=['POST'])
+def compress():
+    if 'image' not in request.files:
+        return jsonify({'error': 'No image uploaded'}), 400
+    file = request.files['image']
+    if file.filename == '' or not allowed_file(file.filename):
+        return jsonify({'error': 'Unsupported file type. Use PNG, JPG, JPEG, or WEBP.'}), 400
+    try:
+        target_bytes = int(request.form.get('target_bytes', 0))
+    except ValueError:
+        return jsonify({'error': 'Invalid target size'}), 400
+    if target_bytes <= 0:
+        return jsonify({'error': 'Target size must be greater than zero'}), 400
+    try:
+        img_data = file.read()
+        original_size = len(img_data)
+        img = Image.open(io.BytesIO(img_data))
+        # Normalize mode
+        fmt = img.format or 'JPEG'
+        if img.mode in ('RGBA', 'LA', 'P'):
+            if fmt == 'JPEG':
+                # JPEG can't handle alpha; convert to RGB
+                background = Image.new('RGB', img.size, (255, 255, 255))
+                if img.mode == 'P':
+                    img = img.convert('RGBA')
+                background.paste(img, mask=img.split()[-1] if img.mode in ('RGBA', 'LA') else None)
+                img = background
+        elif img.mode not in ('RGB', 'L'):
+            img = img.convert('RGB')
+        if target_bytes >= original_size:
+            # Already within target — return optimized original
+            buf = io.BytesIO()
+            save_fmt = 'PNG' if fmt == 'PNG' else 'JPEG'
+            img.save(buf, format=save_fmt, optimize=True, quality=95)
+            buf.seek(0)
+            out_ext = 'png' if save_fmt == 'PNG' else 'jpg'
+            response = send_file(buf, mimetype=f'image/{out_ext}',
+                                 as_attachment=False,
+                                 download_name=f'compressed.{out_ext}')
+            response.headers['X-Output-Format'] = out_ext
+            return response
+        buf, final_size, out_fmt = compress_to_target(img, fmt, target_bytes, original_size)
+        out_ext = 'webp' if out_fmt == 'WEBP' else ('png' if out_fmt == 'PNG' else 'jpg')
+        mime = f'image/{out_ext}'
+        response = send_file(buf, mimetype=mime, as_attachment=False,
+                             download_name=f'compressed.{out_ext}')
+        response.headers['X-Output-Format'] = out_ext
+        return response
+    except Exception as e:
+        return jsonify({'error': f'Processing failed: {str(e)}'}), 500
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)