Spaces:

dschandra
/

Image_compress

Sleeping

App Files Files Community

dschandra commited on Apr 29

Commit

66096c2

verified ·

1 Parent(s): c201187

Update app.py

Browse files

Files changed (1) hide show

app.py +37 -567

app.py CHANGED Viewed

@@ -1,590 +1,60 @@
-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)

 import io
 from PIL import Image
+import gradio as gr
+def compress_image(file, target_value, unit):
+    if file is None:
+        return None, "Please upload an image"
+    img = Image.open(file)
+    original_bytes_io = io.BytesIO()
+    img.save(original_bytes_io, format="PNG")
+    original_size = original_bytes_io.tell()
+    target_bytes = target_value * 1024 if unit == "KB" else target_value * 1024 * 1024
+    def compress(img, target_bytes):
+        for q in range(95, 74, -2):
             buf = io.BytesIO()
+            img.convert("RGB").save(buf, format="JPEG", quality=q, optimize=True)
             if buf.tell() <= target_bytes:
                 buf.seek(0)
+                return buf
         buf.seek(0)
+        return buf
+    if target_bytes >= original_size:
+        return img, f"Already under target size ({original_size/1024:.1f} KB)"
+    compressed_buf = compress(img, target_bytes)
+    compressed_img = Image.open(compressed_buf)
+    saved = original_size - compressed_buf.getbuffer().nbytes
+    pct = (saved / original_size) * 100
+    msg = f"Original: {original_size/1024:.1f} KB | Compressed: {compressed_buf.getbuffer().nbytes/1024:.1f} KB | Saved: {pct:.1f}%"
+    return compressed_img, msg
+with gr.Blocks() as demo:
+    gr.Markdown("# 🗜️ ImagePress (Hugging Face Version)")
+    with gr.Row():
+        input_img = gr.Image(type="filepath", label="Upload Image")
+        output_img = gr.Image(label="Compressed Image")
+    target = gr.Number(value=200, label="Target Size")
+    unit = gr.Radio(["KB", "MB"], value="KB", label="Unit")
+    btn = gr.Button("⚡ Compress")
+    result = gr.Textbox()
+    btn.click(
+        compress_image,
+        inputs=[input_img, target, unit],
+        outputs=[output_img, result]
+    )
+demo.launch()