Quickstart

Integración mínima en tres pasos: incluir el bundle, llamar init y llamar start.

1. HTML

<div id="vto"></div>
<script src="https://tu-cdn/vto-sdk.js"></script>

El contenedor recibe el canvas del SDK. Ponle dimensiones con CSS.

2. init

const vto = await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
  moduleConfig: {
    'hair-color': {
      modelUrl: 'https://pub-82f76ad983d04297adf7a07dc63b9efb.r2.dev/models/hair-seg-kazuhito.onnx',
      wasmPaths: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.27.0/dist/',
    },
  },
})

OBVto.init carga los módulos y devuelve un VtoEngine. Sin licenseKey ni configEndpoint, el SDK usa la licencia de desarrollo (permisiva; ver 09-licenciamiento.md).

3. start

await vto.start({
  module: 'hair-color',
  colors: [
    { id: 'cobrizo', name: 'Cobrizo Rubí', h: 358, s: 82, l: 46 },
    { id: 'neon-verde', name: 'Neón Verde', h: 110, s: 100, l: 50 },
  ],
  onAddToCart: (color) => { /* integra tu carrito */ },
})

start abre la cámara (por defecto) y aplica el primer tono de la lista.

Ejemplo completo

<div id="vto" style="width:100%;max-width:480px;aspect-ratio:3/4"></div>
<script src="https://tu-cdn/vto-sdk.js"></script>
<script type="module">
  const vto = await OBVto.init({
    modules: ['hair-color'],
    container: '#vto',
    moduleConfig: {
      'hair-color': {
        modelUrl: 'https://pub-82f76ad983d04297adf7a07dc63b9efb.r2.dev/models/hair-seg-kazuhito.onnx',
        wasmPaths: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.27.0/dist/',
      },
    },
  })

  await vto.start({
    module: 'hair-color',
    colors: [
      { id: 'cobrizo',   name: 'Cobrizo Rubí', h: 358, s: 82,  l: 46 },
      { id: 'neon-verde', name: 'Neón Verde',   h: 110, s: 100, l: 50 },
    ],
    onAddToCart: (color) => console.log('al carrito', color.id),
  })
</script>

Notas

Rango HSL. h va de 0 a 360; s y l de 0 a 100. No uses valores de CSS (donde s/l llevan %).

Ids neon-*. Los ids que empiezan con neon- reciben un preset vívido automáticamente (saturación aumentada + efecto glow). El id neon-verde del ejemplo lo activa.

Sin ui, el SDK es headless. No aparece ninguna barra ni chrome. El host controla la paleta y las acciones. Para montar la UI del visor (barra, card de producto, favoritos) ve a 02-init-y-arranque.md y páginas siguientes.