Youzu Magic Background

The Youzu Magic Background Component enhances product images by adding appropriate backgrounds.

Basic Usage

Add the <youzu-magic-background> tag in place of a standard <img> element:

<youzu-magic-background
  src="https://example.com/product.jpg"
  alt="Product Image"
  mode="auto"
  style-preset="modern"
  width="100%">
</youzu-magic-background>

Demo

Usage Options

<youzu-magic-background
  src="https://example.com/product.jpg"
  alt="Product Image"
  mode="auto"
  style-preset="modern"
  width="100%">
</youzu-magic-background>

const magicBackground = document.querySelector('youzu-magic-background');

// Listen for background changes
magicBackground.addEventListener('backgroundChange', event => {
  console.log('Background changed:', event.detail);
});

// Apply background manually in manual mode
async function applyBackground() {
  try {
    await magicBackground.applyBackground({
      stylePreset: 'modern'
    });
    console.log('Background applied');
  } catch (error) {
    console.error('Error applying background:', error);
  }
}

// Generate a magic background using an image URL
const imageData = {
  image_url: 'https://example.com/product.jpg'
};

fetch('https://platform-api.youzu.ai/v1/generation/magic-background', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'x-client-id': 'YOUR_CLIENT_ID',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(imageData)
})
.then(response => response.json())
.then(data => {
  console.log('Magic background generation completed:', data);
  // Display the generated image using data.image_url
})
.catch(error => {
  console.error('Error:', error);
});

import requests
import json

# Generate a magic background using an image URL
image_data = {
    'image_url': 'https://example.com/product.jpg'
}

headers = {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'x-client-id': 'YOUR_CLIENT_ID',
    'Content-Type': 'application/json'
}

response = requests.post(
    'https://platform-api.youzu.ai/v1/generation/magic-background',
    headers=headers,
    data=json.dumps(image_data)
)

if response.status_code == 200:
    generation = response.json()
    print('Magic background generation completed:', generation)
    # Display the generated image using generation['image_url']
else:
    print('Error:', response.status_code, response.text)

curl -X POST https://platform-api.youzu.ai/v1/generation/magic-background \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "x-client-id: YOUR_CLIENT_ID" \
  -H "Content-Type: application/json" \
  -d '{
    "image_url": "https://example.com/product.jpg"
  }'

Props

Property	Attribute	Description	Type	Default
`alt`	`alt`	The alt text for the image	string	`''`
`apiEndpoint`	`api-endpoint`	The API endpoint for background processing	string	`'/api/background'`
`height`	`height`	The height of the image	string	`undefined`
`hideLoading`	`hide-loading`	Whether to disable the loading indicator	boolean	`false`
`mode`	`mode`	The mode to control background application behavior - auto: Ask server if background is needed, add if necessary - always: Always add a background - manual: No automatic requests, use applyBackground() method	`"always"	"auto"
`showLoader`	`show-loader`	Manually control the loading state (for demo purposes)	boolean	`false`
`src`	`src`	The source URL of the image	string	`undefined`
`stylePreset`	`style-preset`	The style preset to use for the background Default is 'modern'	string	`'modern'`
`width`	`width`	The width of the image	string	`undefined`

Events

Event	Description	Type
`backgroundChange`	Event emitted when a background is applied or removed	`CustomEvent<BackgroundChangeEventData>`

Methods

Method	Parameters	Return Type	Description
`applyBackground`	`options?: BackgroundOptions`	`Promise<string>`	Public method to manually apply a background Can be called in manual mode

Manual Mode Example

<div style="width: 400px;">
  <youzu-magic-background
    id="manualBackground"
    src="https://example.com/product.jpg"
    alt="Product example"
    mode="manual"
    width="400px">
  </youzu-magic-background>

  <div style="margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
    <button id="applyBtn" style="padding: 8px 16px; background-color: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer;">Apply Background</button>
    <button id="resetBtn" style="padding: 8px 16px; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer;">Reset Image</button>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const background = document.getElementById('manualBackground');
    const applyBtn = document.getElementById('applyBtn');
    const resetBtn = document.getElementById('resetBtn');

    if (background && applyBtn && resetBtn) {
      // Apply background button
      applyBtn.addEventListener('click', async () => {
        try {
          applyBtn.textContent = 'Applying...';
          applyBtn.disabled = true;

          // Use the applyBackground method
          await background.applyBackground({
            stylePreset: 'modern',
            demoMode: true,
            demoDelay: 2000,
          });

          applyBtn.textContent = 'Apply Background';
          applyBtn.disabled = false;
        } catch (error) {
          console.error('Error applying background:', error);
          applyBtn.textContent = 'Apply Background';
          applyBtn.disabled = false;
        }
      });

      // Reset button
      resetBtn.addEventListener('click', async () => {
        try {
          resetBtn.textContent = 'Resetting...';
          resetBtn.disabled = true;

          // Simply reset the src to the original image
          background.setAttribute('src', background.getAttribute('src'));

          resetBtn.textContent = 'Reset Image';
          resetBtn.disabled = false;
        } catch (error) {
          console.error('Error resetting image:', error);
          resetBtn.textContent = 'Reset Image';
          resetBtn.disabled = false;
        }
      });
    }
  });
</script>