HomeProjectsCutOut Studio

🎭 CutOut Studio

AI ลบพื้นหลัง · 14 advanced controls

📂 AI Apps 📦 5 versions 📅 started 2026-07-08 🌐 https://codehub.sj88ai.com/cutout-studio/
aiimagebg-removalimglyONNX

📖 Overview

AI ลบพื้นหลัง · 14 advanced controls

🛠️ Tech Stack

  • imgly
  • ONNX

🏷️ Tags

  • ai
  • image
  • bg-removal
v1.4

CutOut Studio

released 2026-07-08

🗣️ User Command

ทำอะไรเพิ่มดีต่อจาก cutout-studio

🤖 AI Response

เพิ่ม 4 features ใน v1.4: (1) History/Undo — snapshot ทุกครั้งที่ reapply เก็บไว้ localStorage (max 20 snapshots per file) · ปุ่ม 🕐 History ในการ์ดเปิด modal คลิกเพื่อ undo · (2) Halo Removal — detect semi-transparent edge pixels (alpha 5-200) แล้วลด alpha ตาม strength slider · แก้ปัญหาขอบขาว/halo รอบ subject · (3) BG Blur — slider 0-20px apply กับ BG layer ก่อน draw cutout · เหมาะทำ bokeh background · (4) Multi-size Export — เลือก 1+ aspect ratios (1:1/4:5/9:16/16:9/3:4/2:3/3:2/original) → ZIP จะมีทุกขนาด · ใช้สำหรับ social media multi-platform · รวม 14 advanced features ใน Advanced panel · File: 110KB → 135KB · JS: 48KB → 57KB

✅ What Changed

  • ["\ud83d\ude80 v1.4 \u2014 Recovery & Social Pack (4 new features!)", "\ud83d\udd50 History / Undo \u2014 snapshot \u0e17\u0e38\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07 reapply \u0e40\u0e01\u0e47\u0e1a\u0e43\u0e19 file.history (max 20) \u00b7 modal \ud83d\udd50 History \u0e04\u0e25\u0e34\u0e01\u0e22\u0e49\u0e2d\u0e19\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19 \u00b7 \u0e1b\u0e38\u0e48\u0e21 \u21b6 Undo 1-click", "\ud83c\udf1f Halo Removal \u2014 \u0e15\u0e23\u0e27\u0e08 semi-transparent edge pixels (alpha 5-200) \u0e1c\u0e48\u0e32\u0e19 ImageData loop \u0e41\u0e25\u0e49\u0e27\u0e25\u0e14 alpha \u0e15\u0e32\u0e21 strength (0-100%) \u00b7 \u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32 white/dark halo \u0e23\u0e2d\u0e1a subject \u0e08\u0e32\u0e01 AI", "\ud83c\udf2b\ufe0f BG Blur \u2014 slider 0-20px apply \u0e01\u0e31\u0e1a BG layer (canvas.filter blur) \u0e01\u0e48\u0e2d\u0e19 draw cutout \u00b7 \u0e2a\u0e23\u0e49\u0e32\u0e07 bokeh effect \u0e43\u0e2b\u0e49 product shots", "\ud83c\udfaf Multi-size Export \u2014 \u0e40\u0e25\u0e37\u0e2d\u0e01 1+ ratios (1:1/4:5/9:16/16:9/3:4/2:3/3:2/original) \u00b7 renderAtRatio() function crop center \u0e41\u0e25\u0e49\u0e27\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e43\u0e19 ZIP \u00b7 1 \u0e20\u0e32\u0e1e\u0e2d\u0e2d\u0e01 4-5 \u0e02\u0e19\u0e32\u0e14", "\ud83d\udcca Total features: 10 (v1.3) \u2192 14 (v1.4)", "\ud83d\udcca File: 110KB \u2192 135KB (+25KB) \u00b7 JS: 48KB \u2192 57KB (+9KB)"]
v1.4 screenshot
v1.4 screenshot
v1.4 screenshot
v1.4 screenshot
v1.4 screenshot
v1.4 screenshot
📁 1 files 📝 +0 lines 🖼️ 10 screenshots 🚀 Live → https://codehub.sj88ai.com/cutout-studio/
v1.3

CutOut Studio

released 2026-07-08

🗣️ User Command

ทำให้หมดเลย 10 features

🤖 AI Response

เพิ่ม 10 features ใน v1.3

✅ What Changed

  • ["\ud83d\ude80 v1.3 \u2014 Power User Edition (10 new features!)", "\u2728 Feather slider (0-10px)", "\ud83d\udd0d Erode/Grow slider (-5 to +5px)", "\ud83c\udfaf Detection confidence (0-100%)", "\ud83d\udcd0 Smart Crop presets (1:1/4:5/9:16/16:9/3:4/2:3/3:2)", "\ud83c\udd8e Watermark text + position + opacity", "\ud83d\udca7 Auto-Enhance brightness/contrast/saturation", "\ud83e\ude84 Foreground Shadow generator", "\ud83c\udfad Alpha Mask export", "\u2194\ufe0f Compare Slider drag-to-compare", "\ud83d\udd8c\ufe0f Refinement Brush add/erase strokes", "\ud83c\udfaf Bulk Apply button"]
📁 1 files 📝 +0 lines 🖼️ 0 screenshots 🚀 Live → https://codehub.sj88ai.com/cutout-studio/
v1.2

CutOut Studio

released 2026-07-08

🗣️ User Command

เพิ่ม feature ใหม่ v1.2: paste, auto-crop, presets, custom BG image

🤖 AI Response

เพิ่ม 4 features ใหม่ลงใน CutOut Studio · (1) รองรับ custom background image (เลือก 🖼️ รูป + upload) · (2) Auto-crop to content — หลังลบพื้นหลัง trim transparent edges อัตโนมัติ (canvas getImageData scan alpha<10) · (3) Clipboard paste — global paste listener รับ Ctrl+V anywhere + ปุ่ม 📋 วาง · (4) Presets — localStorage-based combo memory (mode+bg+color+format+fx) โหลดได้ทันทีด้วย 1 คลิก · ขนาดไฟล์ 45KB → 58KB (เพิ่มขึ้น ~13KB) · JS 28KB · ไม่กระทบ performance

✅ What Changed

  • ["\ud83c\udf89 v1.2 \u2014 Productivity Boost (paste + auto-crop + presets)", "\ud83d\uddbc\ufe0f Custom Background Image \u2014 upload \u0e23\u0e39\u0e1b\u0e21\u0e32\u0e40\u0e1b\u0e47\u0e19 BG \u0e44\u0e14\u0e49 (cover-fit \u0e40\u0e15\u0e47\u0e21 canvas) \u00b7 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a product shots, brand backgrounds", "\u2702\ufe0f Auto-crop to content \u2014 \u0e2b\u0e25\u0e31\u0e07\u0e25\u0e1a BG \u0e15\u0e31\u0e14\u0e02\u0e2d\u0e1a transparent \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 (\u0e17\u0e33\u0e07\u0e32\u0e19\u0e01\u0e31\u0e1a transparent mode) \u00b7 \u0e25\u0e14\u0e02\u0e19\u0e32\u0e14\u0e44\u0e1f\u0e25\u0e4c + \u0e14\u0e39\u0e40\u0e23\u0e35\u0e22\u0e27\u0e23\u0e49\u0e2d\u0e22\u0e02\u0e36\u0e49\u0e19 \u00b7 toggle \u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49", "\ud83d\udccb Clipboard Paste \u2014 \u0e01\u0e14 Ctrl+V \u0e17\u0e35\u0e48\u0e44\u0e2b\u0e19\u0e01\u0e47\u0e44\u0e14\u0e49\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21 \ud83d\udccb \u0e27\u0e32\u0e07 \u00b7 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e20\u0e32\u0e1e\u0e08\u0e32\u0e01 screenshot \u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35 \u00b7 \u0e43\u0e0a\u0e49 navigator.clipboard API + paste event", "\ud83d\udcbe Presets \u2014 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 combo (mode + bg + color + format + fx) \u0e44\u0e27\u0e49\u0e43\u0e19 localStorage \u00b7 \u0e42\u0e2b\u0e25\u0e14\u0e01\u0e25\u0e31\u0e1a\u0e14\u0e49\u0e27\u0e22 1 \u0e04\u0e25\u0e34\u0e01 \u00b7 \u0e40\u0e01\u0e47\u0e1a\u0e44\u0e14\u0e49\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14 20 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u00b7 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a workflow \u0e0b\u0e49\u0e33\u0e46 (IG Reel, Profile pic, Product shot)", "\ud83c\udfa8 \u0e40\u0e1e\u0e34\u0e48\u0e21 6th background mode \u2014 bg=image \u00b7 \u0e43\u0e0a\u0e49 state.options.bgImage \u0e40\u0e01\u0e47\u0e1a data URL", "\u26a1 Performance \u2014 trimTransparent \u0e43\u0e0a\u0e49 ImageData scan alpha threshold 10 (\u0e40\u0e23\u0e47\u0e27\u0e01\u0e27\u0e48\u0e32 pixel-by-pixel)", "\ud83e\uddf9 Clean state sync \u2014 loadPreset \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15 UI \u0e17\u0e38\u0e01 chip + color picker + autoCrop \u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a preset", "\ud83d\udce6 Size: 45KB \u2192 58KB (+13KB)"]
📁 1 files 📝 +0 lines 🖼️ 0 screenshots 🚀 Live → https://codehub.sj88ai.com/cutout-studio/
v1.1

CutOut Studio

released 2026-07-08

🗣️ User Command

App ลบพื้นหลัง auto จากรูป ไดคัตออนไลน์ รองรับแนบไฟล์เยอะๆ เน้นไดคัตคน

🤖 AI Response

vanilla HTML+JS single-file (45KB) · ใช้ @imgly/background-removal v1.7 (ISNet, person segmentation) · รัน AI ในเบราว์เซอร์ (WASM/ONNX) · 100% private · batch + ZIP · multi-format export (PNG/JPG/WEBP)

✅ What Changed

  • ["\ud83c\udf89 v1.1 \u2014 Multi-format Export", "- Browser-side AI segmentation (@imgly/background-removal v1.7 / ISNet, person-optimized)", "- Drag-drop multi-file + sequential queue + retry", "- 5 background modes: transparent / white / black / solid color (7 swatches) / gradient", "- Shadow + outline FX toggles", "- Before/After toggle per card", "- \ud83c\udd95 Multi-format export: PNG (transparent) / JPG (white bg) / WEBP (smaller)", "- Quality control (default 92%) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a JPG/WEBP", "- Batch ZIP download (DEFLATE level 6)", "- Verified e2e: \u0e23\u0e39\u0e1b\u0e04\u0e19\u0e08\u0e23\u0e34\u0e07 2 \u0e43\u0e1a \u2192 cutout PNG 865KB, alpha center=254, alpha corner=0"]
📁 1 files 📝 +0 lines 🖼️ 0 screenshots 🚀 Live → https://codehub.sj88ai.com/cutout-studio/
v1.0

CutOut Studio v1.0 — 🎉 Initial Release — Browser-side AI BG Remover

released 2026-07-08

🗣️ User Command

App ลบพื้นหลัง auto จากรูป ไดคัตออนไลน์ รองรับแนบไฟล์เยอะๆ เน้นไดคัตคน

🤖 AI Response

vanilla HTML+JS single-file · @imgly/background-removal v1.7 (WASM/ONNX) · batch + ZIP + multi-format

✅ What Changed

  • 🎉 v1.0 initial release (backfilled with full metadata)
  • - Browser-side AI segmentation (@imgly/background-removal v1.7 / ISNet)
  • - Drag-drop multi-file + sequential queue
  • - 5 background modes: transparent / white / black / solid color / gradient
  • - 7-color palette for solid bg
  • - Shadow + outline FX toggles
  • - Before/After toggle per card
  • - Batch ZIP download (DEFLATE level 6)
  • - 100% private — รูปไม่ออกจากเครื่อง
  • - Verified e2e: รูปคนจริง 2 ใบ → cutout PNG 865KB, alpha center=254 (คน), alpha corner=0 (พื้นหลังใส)
v1.0 screenshot
📁 1 files 📝 +1,242 lines 🖼️ 1 screenshots 🚀 Live → http://178.83.121.75:53000/
📚 CodeHub - version-controlled code, screens & AI instructions
Storage: /mnt/16tb/codehub/ · SSL: Let's Encrypt · Server: nginx · Built: 2026-07-09 15:28 UTC