{"slug":"cutout-studio","name":"CutOut Studio","icon":"🎭","category":"AI Apps","color":"#ec4899","description":"AI ลบพื้นหลัง · 14 advanced controls","tags":["ai","image","bg-removal"],"tech_stack":["imgly","ONNX"],"created_at":"2026-07-08","live_url":"https://codehub.sj88ai.com/cutout-studio/","repo_url":"","versions":["v1.4","v1.3","v1.2","v1.1","v1.0"],"latest_version":"v1.4","total_files":5,"total_lines":1242,"version_count":5,"versions_full":[{"version":"v1.4","date":"2026-07-08","title":"CutOut Studio","status":"released","user_cmd":"ทำอะไรเพิ่มดีต่อจาก 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)\"]"],"files_changed":1,"lines_added":0,"screenshots":["01-hero.png","02-after-process.png","03-advanced-panel.png","04-watermark.png","05-smart-crop-9x16.png","06-bg-blur-12.png","07-multi-size-chips.png","08-compare-slider.png","09-refine-brush.png","10-history-modal.png","11-presets.png","12-all-features.png"],"screenshot_files":["01-hero.png","02-after-process.png","03-advanced-panel.png","04-watermark.png","05-smart-crop-9x16.png","06-bg-blur-12.png","07-multi-size-chips.png","08-compare-slider.png","09-refine-brush.png","10-history-modal.png","11-presets.png","12-all-features.png"],"deployed_url":"https://codehub.sj88ai.com/cutout-studio/","category":"AI Apps","has_ai_instructions":false,"code_files":["index.html"],"code_file_count":1},{"version":"v1.3","date":"2026-07-08","title":"CutOut Studio","status":"released","user_cmd":"ทำให้หมดเลย 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\"]"],"files_changed":1,"lines_added":0,"screenshots":[],"screenshot_files":[],"deployed_url":"https://codehub.sj88ai.com/cutout-studio/","category":"AI Apps","has_ai_instructions":false,"code_files":["index.html"],"code_file_count":1},{"version":"v1.2","date":"2026-07-08","title":"CutOut Studio","status":"released","user_cmd":"เพิ่ม 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)\"]"],"files_changed":1,"lines_added":0,"screenshots":[],"screenshot_files":[],"deployed_url":"https://codehub.sj88ai.com/cutout-studio/","category":"AI Apps","has_ai_instructions":false,"code_files":["index.html"],"code_file_count":1},{"version":"v1.1","date":"2026-07-08","title":"CutOut Studio","status":"released","user_cmd":"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\"]"],"files_changed":1,"lines_added":0,"screenshots":["01-uploaded.png"],"screenshot_files":["01-uploaded.png"],"deployed_url":"https://codehub.sj88ai.com/cutout-studio/","category":"AI Apps","has_ai_instructions":false,"code_files":["index.html"],"code_file_count":1},{"version":"v1.0","date":"2026-07-08","title":"CutOut Studio v1.0 — 🎉 Initial Release — Browser-side AI BG Remover","status":"released","user_cmd":"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 (พื้นหลังใส)"],"files_changed":1,"lines_added":1242,"screenshots":["01-uploaded.png"],"screenshot_files":["01-uploaded.png"],"deployed_url":"http://178.83.121.75:53000/","category":"AI Apps","has_ai_instructions":false,"code_files":["index.html"],"code_file_count":1}]}