वेब / HTML API इंटीग्रेशन

अनुशंसित इंटीग्रेशन प्रक्रिया

अधिकतम सुरक्षा के लिए, आपकी API Key को कभी भी सीधे फ्रंटएंड JavaScript कोड में प्रदर्शित नहीं किया जाना चाहिए।

HTML अपलोड फ़ॉर्म

एक सरल अपलोड इंटरफ़ेस बनाएं जो उपयोगकर्ताओं को इमेज चुनने और अपलोड करने की अनुमति देता है।

<input type="file" id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

फ्रंटएंड JavaScript

JavaScript Fetch अनुरोधों का उपयोग करके अपलोड की गई इमेज को सुरक्षित रूप से अपने बैकएंड Endpoint पर भेजें।

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){
        alert("Select image");
        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML = "Processing...";

    const response = await fetch(
        "/web/remove-bg",
        {
            method:"POST",
            body:formData
        }
    );

    if(!response.ok){

        result.innerHTML =
        "Something went wrong";

        return;
    }

    const blob =
    await response.blob();

    const url =
    URL.createObjectURL(blob);

    result.innerHTML = `
        <img src="${url}">
    `;
}

बैकएंड की जिम्मेदारियाँ

• API Keys को सर्वर पर सुरक्षित रूप से संग्रहीत करें।
• अपलोड की गई इमेज फ़ाइलों का सही तरीके से सत्यापन करें।
• ByByBG सर्वरों को सुरक्षित API अनुरोध भेजें।
• प्रोसेस की गई पारदर्शी PNG इमेज लौटाएँ।
• API त्रुटियों और अमान्य अनुरोधों को सही ढंग से संभालें।

महत्वपूर्ण सुरक्षा नियम

• सुरक्षित बैकएंड प्रॉक्सी Endpoints का उपयोग करें।
• API Keys को Environment Variables में संग्रहीत करें।
• सर्वर साइड पर अपलोड का सत्यापन करें।
• सुरक्षा के लिए अपलोड आकार की सीमा लागू करें।
• Rate Limiting सिस्टम का उपयोग करके दुरुपयोग को रोकें।

सामान्य API त्रुटियाँ