Add face alignment example

.gitignore

@@ -1,2 +1,2 @@
-/zig-cache/
-/zig-out/
+zig-cache/
+zig-out/

examples/Makefile

@@ -0,0 +1,44 @@
+zig = zig
+zig_version != $(zig) version
+
+.PHONY: clean zig-version
+
+default: debug
+
+zig-version:
+	@echo zig-$(zig_version)
+
+all: wasm linux macos windows
+
+debug: zig-version
+	$(zig) build -Doptimize=Debug
+
+native: zig-version
+	$(zig) build -Doptimize=ReleaseFast
+
+wasm: zig-version
+	$(zig) build -Dtarget=wasm32-freestanding -Doptimize=ReleaseSmall
+
+wasm-debug: zig-version
+	$(zig) build -Dtarget=wasm32-freestanding -Doptimize=Debug
+
+linux: zig-version
+	$(zig) build -Dtarget=x86_64-linux-gnu -Doptimize=ReleaseFast
+
+macos: zig-version
+	$(zig) build -Dtarget=aarch64-macos-none -Doptimize=ReleaseFast
+
+windows: zig-version
+	$(zig) build -Dtarget=x86_64-windows-msvc -Doptimize=ReleaseFast
+
+test: zig-version
+	$(zig) build test --summary all
+
+clean:
+	rm -rf zig-out zig-cache
+
+serve: wasm
+	python -m http.server 8000 -b 127.0.0.1 -d zig-out
+
+serve-debug: wasm-debug
+	python -m http.server 8000 -b 127.0.0.1 -d zig-out

examples/build.zig

@@ -0,0 +1,77 @@
+const std = @import("std");
+
+pub fn build(b: *std.Build) void {
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});
+    _ = buildModule(b, "face_alignment", target, optimize);
+
+    const fmt_step = b.step("fmt", "Run zig fmt");
+    const fmt = b.addFmt(.{
+        .paths = &.{ "src", "build.zig", "build.zig.zon" },
+        .check = true,
+    });
+    fmt_step.dependOn(&fmt.step);
+    b.default_step.dependOn(fmt_step);
+}
+
+fn buildModule(
+    b: *std.Build,
+    name: []const u8,
+    target: std.Build.ResolvedTarget,
+    optimize: std.builtin.OptimizeMode,
+) *std.Build.Step.Compile {
+    const zignal = b.dependency("zignal", .{ .target = target, .optimize = optimize });
+    var module: *std.Build.Step.Compile = undefined;
+
+    if (target.result.isWasm()) {
+        module = b.addExecutable(.{
+            .name = name,
+            .root_source_file = .{ .path = b.fmt("src/{s}.zig", .{name}) },
+            .optimize = optimize,
+            .target = b.resolveTargetQuery(.{
+                .cpu_arch = .wasm32,
+                .os_tag = .freestanding,
+                .cpu_features_add = std.Target.wasm.featureSet(&.{
+                    .atomics,
+                    .bulk_memory,
+                    // .extended_const, not supported by Safari
+                    .multivalue,
+                    .mutable_globals,
+                    .nontrapping_fptoint,
+                    .reference_types,
+                    //.relaxed_simd, not supported by Firefox or Safari
+                    .sign_ext,
+                    .simd128,
+                    // .tail_call, not supported by Safari
+                }),
+            }),
+        });
+        module.entry = .disabled;
+        module.use_llvm = true;
+        module.use_lld = true;
+        // Install files in the .prefix (zig-out) directory
+        b.getInstallStep().dependOn(
+            &b.addInstallFile(
+                module.getEmittedBin(),
+                b.fmt("{s}.wasm", .{name}),
+            ).step,
+        );
+        b.installDirectory(.{
+            .source_dir = .{ .path = "lib" },
+            .install_dir = .prefix,
+            .install_subdir = "",
+        });
+    } else {
+        module = b.addSharedLibrary(.{
+            .name = name,
+            .root_source_file = .{ .path = b.fmt("src/{s}.zig", .{name}) },
+            .target = target,
+            .optimize = optimize,
+        });
+        module.root_module.strip = optimize != .Debug and target.result.os.tag != .windows;
+        b.installArtifact(module);
+    }
+    module.rdynamic = true;
+    module.root_module.addImport("zignal", zignal.module("zignal"));
+    return module;
+}

examples/build.zig.zon

@@ -0,0 +1,18 @@
+.{
+    .name = "zignal-examples",
+    .version = "0.0.0",
+
+    .dependencies = .{
+        .zignal = .{
+            .url = "https://github.com/bfactory-ai/zignal/archive/7cd7e70415dec093eb1b096218d2286d9f829360.tar.gz",
+            .hash = "1220140e8744befa3cfe2c844d73e62376425eb6dd54140787218b4a480001219433",
+        },
+    },
+
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "src",
+        "lib",
+    },
+}

examples/lib/face-alignment.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>
+    Face Alignment
+  </title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div id="image-container">
+    <video id="video" width="1" height="1"></video>
+    <canvas id="canvas1" width="640" height="480"></canvas>
+    <fieldset class="settings-container">
+      <legend style="color:black;font-weight:bold;font-family:sans-serif;">Click start or drop an image</legend>
+      <div id="form">
+        <canvas id="canvas2" width="256" height="256"></canvas>
+        <div id="buttons-container">
+          <button id="toggle-button">Start</button>
+          <button id="align-button">Align</button>
+          <div class="padding-slider">
+            <label for="padding-range">padding:</label>
+            <input type="range" min="0" max="100" value="25" class="slider" name="padding-range">
+            <label for="padding-range"><code><span name="padding"></span></code></label>
+          </div>
+        </div>
+        <p id="size"></p>
+        <p id="time"></p>
+      </div>
+    </fieldset>
+    <script src="./face-alignment.js"></script>
+  </div>
+</body>
+
+</html>