React

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

import { useEffect, useState } from "react";

export default function ZaviloImageEnhancer() {
  const [client, setClient] = useState(null);
  const [previewUrl, setPreviewUrl] = useState("");

  useEffect(() => {
    let active = true;

    async function init() {
      const sdk = await window.Zavilo.init({
        publicKey: "pk_live_xxxxx"
      });

      if (active) setClient(sdk);
    }

    init();

    return () => {
      active = false;
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    };
  }, []);

  async function onFileChange(event) {
    if (!client) return;

    const file = event.target.files?.[0];
    if (!file) return;

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

    const url = URL.createObjectURL(result.files[0]);
    setPreviewUrl((oldUrl) => {
      if (oldUrl) URL.revokeObjectURL(oldUrl);
      return url;
    });
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={onFileChange} />
      {previewUrl && (
        <img src={previewUrl} alt="Result" style={{ maxWidth: 600 }} />
      )}
    </div>
  );
}

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