Single File Control

전체 예제

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Zavilo SDK Example</title>
  <script src="https://sdk.zavilo.app/v1/zavilo.js"></script>
</head>
<body>
  <h1>Image Enhancer</h1>

  <input id="file" type="file" accept="image/*">
  <button id="runButton" type="button">Enhance</button>

  <p id="status"></p>
  <img id="preview" style="max-width:600px;display:block">

  <script>
    let client;
    let previewUrl;

    async function init() {
      client = await Zavilo.init({
        publicKey: "pk_live_xxxxx"
      });
      document.getElementById("status").textContent = "Ready";
    }

    async function processImage() {
      const file = document.getElementById("file").files[0];
      if (!file) {
        alert("Choose an image.");
        return;
      }

      document.getElementById("status").textContent = "Processing...";

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

        const output = result.files[0];

        if (previewUrl) URL.revokeObjectURL(previewUrl);
        previewUrl = URL.createObjectURL(output);
        document.getElementById("preview").src = previewUrl;
        document.getElementById("status").textContent =
          "Complete: " + output.name;
      } catch (error) {
        document.getElementById("status").textContent =
          error.code || error.message || String(error);
      }
    }

    document.getElementById("runButton")
      .addEventListener("click", processImage);

    init();
  </script>
</body>
</html>