Araluma ทำงานอย่างไร

คำตอบสั้นๆ

Araluma ใช้ สถาปัตยกรรมแบบผสม (hybrid architecture): เครื่องมือสองตัวทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยไม่มีการอัปโหลด และอีกสองตัวจะส่งคำขอเครือข่ายหนึ่งครั้งผ่านโครงสร้างพื้นฐานของเราเมื่อเบราว์เซอร์ไม่สามารถให้คุณภาพที่เทียบเท่าได้ เราแจ้งให้คุณทราบเสมอว่ากำลังใช้เส้นทางใด ทั้งในแต่ละเครื่องมือและในหน้านี้

เครื่องมือ	งานเกิดขึ้นที่ใด
Circle Crop	100% ในเบราว์เซอร์ของคุณ ผ่าน Canvas API ไม่มีการอัปโหลด ใช้งานออฟไลน์ได้
Compress — ตัวอย่างสไลเดอร์และเปรียบเทียบฟอร์แมต	100% ในเบราว์เซอร์ของคุณ ผ่าน canvas.toBlob ไม่มีการอัปโหลด
Compress — ดาวน์โหลดไฟล์สุดท้าย	ส่งคำขอครั้งเดียวไปยังบริการของเราที่ api.araluma.com (Fastify + sharp + libvips บน VPS ในเยอรมนี)
Remove Background	ส่งคำขอครั้งเดียวไปยัง Cloudflare Worker ซึ่งรัน BiRefNet บน GPU ของ Cloudflare โดยมี WebAssembly fallback ในเบราว์เซอร์ของคุณเมื่อไม่สามารถเชื่อมต่อ cloud ได้

คุณสามารถตรวจสอบข้ออ้างฝั่ง client ได้ในราว 30 วินาที: เปิด DevTools → Network ล้างล็อก แล้วใช้ Circle Crop หรือสไลเดอร์ตัวอย่างของ Compress — คุณจะเห็นว่าไม่มีคำขอใดที่นำไบต์รูปภาพของคุณออกจากหน้าเลย สำหรับเครื่องมือสองตัวที่สัมผัสเซิร์ฟเวอร์ คุณจะเห็นการอัปโหลดหนึ่งครั้งต่อการดำเนินการ ไปยัง endpoint ที่ระบุชื่อไว้ข้างต้น

ทำไมต้องเป็น hybrid

เครื่องมือรูปภาพออนไลน์ส่วนใหญ่อยู่ที่ปลายสุดข้างใดข้างหนึ่ง: อัปโหลดทุกอย่างไปยังเซิร์ฟเวอร์ (คุณต้องรอการเดินทางไปกลับและผู้ให้บริการเก็บไฟล์ของคุณ) หรือประมวลผลทั้งหมดในเบราว์เซอร์ (คุณต้องยอมรับคุณภาพและความเร็วที่ลดลงในขั้นตอนการเข้ารหัสและ AI) ไม่มีปลายสุดใดชนะในทุกกรณี

เราเลือกฝั่ง client ในส่วนที่เบราว์เซอร์ทำได้ดีอยู่แล้ว — องค์ประกอบ <canvas> จัดการการครอบตัด การหมุน และการเข้ารหัสตัวอย่างแบบสูญเสียในรูปแบบ JPG/WebP ได้เป็นอย่างดี — และเลือกฝั่งเซิร์ฟเวอร์ในส่วนที่เบราว์เซอร์ยังด้อยกว่าอย่างชัดเจน:

• การบีบอัดรูปภาพ สำหรับการดาวน์โหลดสุดท้าย sharp + libvips 8.17 ฝั่งเซิร์ฟเวอร์ผลิตไฟล์ที่ เล็กกว่า 10-15% เมื่อเทียบกับตัวเข้ารหัสของเบราว์เซอร์ที่คุณภาพภาพเดียวกัน และให้การเข้าถึงการปรับแต่งความเร็ว/คีย์โครมาของ AVIF และเอาต์พุต JPEG XL ที่เบราว์เซอร์ไม่เปิดเผย สไลเดอร์และตัวอย่างยังคงทำงานในเบราว์เซอร์ของคุณเพื่อให้การปรับแต่งยังรวดเร็ว มีเพียงการแตะ “ดาวน์โหลด” เท่านั้นที่ผ่านบริการของเรา
• การลบพื้นหลังด้วย AI บนเส้นทางเริ่มต้น โมเดล BiRefNet ที่ cf.image.segment ของ Cloudflare รัน (สถาปัตยกรรมเดียวกับ remove.bg) ต้องใช้ GPU จริงเพื่อให้เสร็จภายใน 1-3 วินาที fallback ในเบราว์เซอร์ (ISNet ผ่าน ONNX Runtime + WebAssembly) ทำงานได้ แต่ใช้เวลา 20-40 วินาทีในการรันครั้งแรก และ 2-10 วินาทีในครั้งต่อๆ ไป และให้ผลการตัดออกที่หยาบกว่าอย่างเห็นได้ชัดในส่วนที่เป็นเส้นผม ขนสัตว์ และขอบที่ละเอียด

ต้นทุนที่เรายอมรับจากการใช้ฝั่งเซิร์ฟเวอร์ในสองเส้นทางนั้นคือการเดินทางไปกลับหนึ่งครั้งต่อการดำเนินการ ต้นทุนที่เราหลีกเลี่ยงได้โดยอยู่ฝั่ง client ในส่วนอื่นๆ (Circle Crop, ตัวอย่าง Compress) คือค่าใช้จ่ายการเดินทางไปกลับในส่วนของ workflow ที่ต้องการการปรับแต่งบ่อยที่สุด

ไปป์ไลน์ ทีละขั้นตอน

1. คุณเลือกไฟล์

ผ่านตัวเลือกไฟล์ การลากและวาง หรือการวาง เบราว์เซอร์จะส่งออบเจ็กต์ File ให้กับ JavaScript JavaScript อ่านไบต์โดยใช้ FileReader หรือ Blob.arrayBuffer() ในขั้นตอนนี้ ไฟล์ไม่ถูกส่งผ่านเครือข่ายไม่ว่าจะใช้เครื่องมือใดก็ตาม

2. เบราว์เซอร์ถอดรหัสรูปภาพ

เบราว์เซอร์สมัยใหม่สามารถถอดรหัส JPG, PNG, WebP, GIF และ AVIF ได้โดยตรง เราใช้ createImageBitmap() เพื่อแปลงไบต์ดิบเป็น bitmap ที่ GPU สามารถทำงานด้วยได้ นอกเธรดหลัก สำหรับ HEIC ในเบราว์เซอร์ที่ไม่สามารถถอดรหัสได้โดยตรง เราจะใช้ตัวถอดรหัส WebAssembly ที่ทำงานในเครื่องของคุณแทน

3. เครื่องมือทำงาน — นี่คือจุดที่เส้นทางแยกออกจากกัน

• Circle Crop การแปลงพิกเซล Canvas 2D ด้วยเส้นทางตัดรูปวงกลม Bitmap ถูกวาดใน <canvas> ด้วยการหมุนและซูมที่เลือก ใช้การตัดวงกลม และอ่านส่วนในของวงกลมกลับเป็น ImageData Cropper.js จัดการกรอบครอบตัดแบบโต้ตอบ ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
• Compress — ตัวอย่างและสไลเดอร์ เข้ารหัสใหม่ JPG, PNG, WebP หรือ AVIF โดยใช้ canvas.toBlob เพื่อให้ตัวอย่างแบบเคียงข้างกันอัปเดตตามที่คุณเลื่อนสไลเดอร์คุณภาพ ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ยังไม่มีการอัปโหลด
• Compress — ดาวน์โหลด เมื่อคุณแตะ “ดาวน์โหลด” รูปภาพจะถูกส่งครั้งเดียวไปยัง api.araluma.com (บริการ Fastify ที่ทำงานบน VPS ในเยอรมนีดำเนินการโดย Hostinger, Node 24 + sharp 0.34 + libvips 8.17 ซึ่งเป็นไลบรารี C เดียวกับที่ Squoosh ใช้บนเส้นทางเซิร์ฟเวอร์) รูปภาพจะถูกเข้ารหัสใหม่ด้วยพารามิเตอร์เดียวกับที่คุณตั้งค่าในตัวอย่าง และไบต์จะถูก stream กลับมายังเบราว์เซอร์ของคุณ บริการนี้เก็บ cache ที่แยกตาม tenant โดยใช้ที่อยู่เนื้อหา (hash ของไบต์ input + พารามิเตอร์) จำกัดที่ 500 MB เพื่อให้การดาวน์โหลดรูปภาพเดิมซ้ำด้วยการตั้งค่าเดิมเล่น cache ที่บันทึกไว้ — cache ไม่ได้ถูกจัดทำดัชนีตามตัวคุณ, IP หรือชื่อไฟล์ หากบริการไม่ตอบสนอง เครื่องมือจะใช้ blob ตัวอย่างในเบราว์เซอร์แทน
• Remove Background — เส้นทาง cloud เริ่มต้น รูปภาพจะถูกอัปโหลดครั้งเดียวไปยัง Cloudflare Worker (araluma-bg-remover) จัดเก็บชั่วคราวใน R2 bucket ส่วนตัว (araluma-bg-temp) ประมวลผลโดย cf.image.segment transformation ของ Cloudflare ซึ่งรัน BiRefNet บน GPU ของ Cloudflare และผลการตัดออกจะถูก stream กลับมา ออบเจ็กต์ R2 ที่จัดเก็บชั่วคราวจะถูกลบภายในหนึ่งชั่วโมงโดย R2 lifecycle rule ไม่ว่าผลลัพธ์จะเป็นอย่างไร รูปภาพทั่วไปเสร็จภายใน 1-3 วินาที มีขีดจำกัดต่อ IP รายวันและขีดจำกัดขนาดอัปโหลด 5 MB เพื่อให้ tier ฟรียังคงใช้งานได้อย่างยั่งยืน
• Remove Background — WebAssembly fallback หาก Worker ไม่ตอบสนอง (เครือข่ายของคุณขาดหาย, คุณอยู่หลัง firewall ที่เข้มงวด, โควต้ารายวันเต็ม หรือไฟล์เกินขีดจำกัด 5 MB ของ cloud) เครื่องมือจะสลับไปใช้โมเดล ISNet ที่ทำงานในเครื่องในเบราว์เซอร์ของคุณผ่าน ONNX Runtime Web ด้วย WebAssembly การรันครั้งแรกจะดาวน์โหลดโมเดลขนาด ~80 MB และใช้เวลา 20-40 วินาที การรันครั้งต่อไปใช้เวลา 2-10 วินาที บนเส้นทางนี้ไม่มีการอัปโหลด — คุณสามารถตรวจสอบได้ใน DevTools

4. คุณดาวน์โหลดผลลัพธ์

Bitmap ผลลัพธ์ถูกเข้ารหัสเป็น Blob ห่อด้วย object URL และเสนอให้กล่องโต้ตอบบันทึกไฟล์มาตรฐานของเบราว์เซอร์ ไฟล์ปรากฏบนดิสก์ของคุณ

วิธีตรวจสอบด้วยตัวเอง

เลือกวิธีที่คุณชอบ:

วิธีที่ 1 — ดูแท็บ Network

1. เปิด Araluma ในแท็บใหม่แล้วเปิด DevTools → Network
2. ใช้ Circle Crop หรือ สไลเดอร์ตัวอย่าง Compress คุณจะเห็นคำขอสำหรับ HTML/CSS/JS/font เท่านั้น รวมถึงโมดูล WebAssembly ที่เกี่ยวข้องในการใช้ครั้งแรก ไม่มีคำขอใดที่จะนำไบต์รูปภาพของคุณออกไป
3. ตอนนี้ใช้ Compress → ดาวน์โหลด หรือ Remove Background คุณจะเห็น POST หนึ่งรายการไปยัง api.araluma.com (Compress) หรือไปยัง Remove Background Worker ซึ่งบรรจุรูปภาพของคุณ — และหนึ่งการตอบสนองที่ส่งผลลัพธ์กลับมา วางเมาส์เหนือคำขอใดก็ได้เพื่อดูขนาดและเวลา

คอลัมน์ “Initiator” บอกคุณว่าสคริปต์ใดเรียกใช้คำขอแต่ละรายการ และคอลัมน์ “Type” บอกคุณว่าส่งอะไรไป เราไม่ซ่อนข้อมูลเหล่านี้

วิธีที่ 2 — ใช้เครื่องมือแบบออฟไลน์

1. โหลดหน้าเครื่องมือ Araluma ใดก็ได้ ใช้ Remove Background หนึ่งครั้งกับรูปภาพขนาดเล็กเพื่อให้โมเดล ISNet ในเบราว์เซอร์ถูก cache
2. เปิด DevTools → Network → ทำเครื่องหมายที่ช่อง Offline (หรือปิด Wi-Fi)
3. โหลดหน้าใหม่ ยังคงโหลดได้เพราะ static assets ถูก cache ไว้
4. ลองใช้แต่ละเครื่องมือ:
   • Circle Crop และ ตัวอย่าง Compress ยังคงทำงานได้ — ไม่เคยต้องการเครือข่ายเลย
   • Compress ดาวน์โหลด จะใช้ blob ตัวอย่างในเบราว์เซอร์แทน (การเข้ารหัสมีประสิทธิภาพน้อยกว่าเล็กน้อย แต่ยังคงใช้งานได้)
   • Remove Background จะใช้โมเดล ISNet WebAssembly และทำงานได้โดยไม่มีคำขอขาออก

หากเครื่องมือทั้งสี่ทำงานออฟไลน์ได้ (หนึ่งตัวลดประสิทธิภาพเล็กน้อย สามตัวเหมือนเดิม) โดยนิยามแล้วไม่มีเซิร์ฟเวอร์ใดที่เห็นรูปภาพของคุณ

สิ่งที่เราเห็น — และสิ่งที่เราไม่เห็น

บนเส้นทาง client-side เราไม่เห็นอะไรเกี่ยวกับรูปภาพของคุณเลย ไม่มีคำขอให้ดู ไม่มี cache ให้บันทึก ไม่มีบรรทัด log ให้ค้นหา

บนเส้นทาง server-side:

• Compress ดาวน์โหลด เห็นไบต์รูปภาพตลอดระยะเวลาการเข้ารหัส (โดยปกติไม่กี่ร้อยมิลลิวินาที) เก็บ cache entry ที่อ้างอิงเนื้อหาตาม TTL ของ cache เท่านั้น cache ไม่ได้ถูกจัดทำดัชนีตามผู้ใช้, IP, ชื่อไฟล์ หรือตัวระบุใดที่เราสามารถใช้ค้นหา “รูปภาพของคุณ” ได้ เราไม่บันทึกเนื้อหาของรูปภาพ บริการเข้ารหัสใช้ร่วมกันระหว่าง tenant เดียวกับที่ v1 ให้บริการก่อนการโอนย้าย โดยมี CORS แยกตาม tenant, rate limits และ URL canonical ที่เซ็นด้วย HMAC
• Remove Background เห็นรูปภาพตลอดระยะเวลาการอัปโหลด staging และการเรียก segmentation (โดยปกติรวม 1-3 วินาที) หลังจากนั้น R2 lifecycle rule จะลบสำเนาที่จัดเก็บชั่วคราว เราไม่เคยส่งไบต์ของคุณไปยังผู้ให้บริการโมเดลภายนอก — โมเดล BiRefNet ทำงานภายในโครงสร้างพื้นฐานของ Cloudflare เอง ไม่ใช่ API ภายนอกในรูปแบบ remove.bg / fal.ai / Replicate

บนทุกเส้นทาง ผู้ให้บริการ analytics ของเรา (Cloudflare Web Analytics) บันทึกข้อมูลการดูหน้าแบบรวม — URL, ประเทศ, ตระกูลเบราว์เซอร์, Core Web Vitals ไม่มีคุกกี้ ไม่มีตัวระบุถาวร ไม่มีอะไรที่ผูกกับบุคคล

สำหรับเครื่องมือที่ดาวน์โหลดโมดูล WebAssembly ในการใช้ครั้งแรก (ตัวถอดรหัส HEIC, โมเดล ONNX ของ ISNet) ผู้ให้บริการโฮสต์ของเราเห็นว่ามีคนดึงโมดูลนั้น — เหมือนกับที่เห็นว่ามีคนดึงไฟล์ CSS โมดูลเองไม่มีข้อมูลใดเกี่ยวกับรูปภาพของคุณ

รายการข้อมูลทั้งหมดอยู่ในนโยบายความเป็นส่วนตัวของเรา

สแต็กเทคโนโลยี

สำหรับผู้ที่อยากรู้:

• Astro — ตัวสร้างเว็บไซต์แบบ static ทุกหน้าถูกส่งเป็น HTML ธรรมดา พร้อม JavaScript “islands” แบบ progressive enhancement เฉพาะที่เครื่องมือเชิงโต้ตอบอยู่
• Vanilla CSS พร้อม custom properties — ไม่มี Tailwind ไม่มี CSS-in-JS ระบบออกแบบทั้งหมดคือไฟล์ tokens.css ไฟล์เดียว
• canvas.toBlob / <canvas> — การเข้ารหัส JPEG, PNG, WebP, AVIF (ที่เบราว์เซอร์รองรับ) ในตัวอย่าง Compress และทุกขั้นตอนของ Circle Crop
• Cropper.js — เลเยอร์การโต้ตอบสี่เหลี่ยมครอบตัด
• ONNX Runtime Web — รัน ISNet WebAssembly fallback สำหรับ Remove Background
• Cloudflare Pages — โฮสต์ build แบบ static ให้บริการจาก edge
• Cloudflare Workers + R2 + cf.image.segment (BiRefNet) — ไปป์ไลน์ Remove Background เริ่มต้น
• Fastify + sharp 0.34 + libvips 8.17 บน Node 24 — บริการดาวน์โหลด Compress ที่ api.araluma.com บน Hostinger VPS ในเยอรมนี
• Cloudflare Web Analytics — การนับ pageview แบบรวมโดยไม่มีคุกกี้

การรองรับเบราว์เซอร์

เครื่องมือทั้งหมดทำงานบนเวอร์ชันปัจจุบันและเวอร์ชันก่อนหน้าของ Chrome, Firefox, Safari และ Edge ทั้งบนเดสก์ท็อปและมือถือ เว็บไซต์ใช้ progressive enhancement: ที่ใดที่เบราว์เซอร์รองรับ API ใหม่กว่า (เช่น showSaveFilePicker, OffscreenCanvas) เราจะใช้มัน ที่ใดไม่รองรับ เราจะใช้ตัวเทียบเท่าที่เก่ากว่า ไม่มีกำแพง “เบราว์เซอร์ของคุณไม่รองรับ”

ข้อกำหนดที่แน่วแน่เพียงอย่างเดียวคือ JavaScript (สำหรับเครื่องมือทุกตัว) และการเชื่อมต่อเครือข่าย (เฉพาะเมื่อใช้ Compress ดาวน์โหลด หรือเส้นทาง Remove Background เริ่มต้น — เส้นทางอื่นๆ ทำงานออฟไลน์ได้อย่างสมบูรณ์หลังจากโหลดหน้าครั้งแรก)

คำถาม

มีอะไรที่เราไม่ได้ครอบคลุม? ส่งอีเมลมาที่ support@araluma.com ยินดีรับคำถามทางเทคนิค