Vue

<script src="https://sdk.zavilo.app/v1/zavilo.js"></script>

<template>
  <div>
    <input type="file" accept="image/*" @change="onFileChange">
    <img v-if="previewUrl" :src="previewUrl" style="max-width:600px">
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";

const client = ref(null);
const previewUrl = ref("");

onMounted(async () => {
  client.value = await window.Zavilo.init({
    publicKey: "pk_live_xxxxx"
  });
});

onBeforeUnmount(() => {
  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
});

async function onFileChange(event) {
  const file = event.target.files?.[0];
  if (!file || !client.value) return;

  const result = await client.value.run("image-enhancer", {
    file,
    options: {
      preset: "balanced",
      auto: true,
      format: "jpg",
      quality: 0.92
    }
  });

  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
  previewUrl.value = URL.createObjectURL(result.files[0]);
}
</script>

The example keeps the SDK as a browser script, so no Zavilo npm package is required.