@desert-ant-labs/shapes

中文文档
4.3.0发布于 2026/11/06SEE LICENSE IN LICENSE.mdTypeScriptES Module近 30 天下载 7623

On-device single-stroke shape recognition for JavaScript. Runs in the browser (WebAssembly + LiteRT.js) and server-side in Node (native), from one import.

原始使用文档
文档目录5 节
  1. Shapes
  2. Loading the model
  3. Bundlers and SSR
  4. Platforms
  5. License

@desert-ant-labs/shapes

Shapes turns a hand-drawn stroke into a clean shape, connector, or arrow, in the browser and in Node. Shapes recognizes 13 kinds: a straight or curved connector, an arrow, a rectangle, an ellipse, a triangle, a diamond, a pentagon, a hexagon, a star, a heart, a cloud, and a scribble, which your app can use as an erase gesture. For any other stroke, such as handwriting, recognize returns null, so you can keep that stroke as ink. The stroke never leaves the device.

A small model scores each kind and marks the points that belong to an arrowhead. A geometric fitter then computes the clean shape. Shapes accepts a stroke only if the model's confidence and the fit both clear that kind's calibrated thresholds. By default, Shapes snaps lines and edges to the axes, near-circles to circles, near-squares to squares, near-regular polygons to regular ones, and rotations to 15° steps.

Two entries share one Shapes API:

  • @desert-ant-labs/shapes (default): a WebAssembly pipeline with LiteRT.js inference, for the browser. It has no native dependencies, so a single import builds cleanly for every target of a multi-target bundler (Next.js, Remix, SvelteKit, Nuxt), including the browser bundle and the Client-Component SSR pass those frameworks render in Node. It is safe to import during server-side rendering, but LiteRT.js needs a browser (or Web Worker) to initialize, so Shapes.load() runs inference only in the browser; calling it in plain Node throws an actionable error pointing you to /native.
  • @desert-ant-labs/shapes/native: a prebuilt native core, Core ML on macOS and LiteRT on Linux, for server-side inference in Node. No @litertjs/core, no build tools, no flags. Import it from server-only code (API routes, server actions, plain Node scripts). Do not import it from a component that also renders in the browser.
# Browser (default entry):
npm i @desert-ant-labs/shapes @litertjs/core

# Server-side inference in Node (/native entry) needs no extra install:
npm i @desert-ant-labs/shapes

The model is downloaded from Hugging Face on first use at the SDK's pinned tag, then cached. Nothing model-sized is shipped in the npm tarball.

import { Shapes } from "@desert-ant-labs/shapes";

const shapes = await Shapes.load();
const shape = await shapes.recognize(points);   // [{x, y}, ...] or [x0, y0, ...]
// { kind: "ellipse", center: {x, y}, semiMajor, semiMinor, rotation, outline: [...] }

shapes.dispose(); // release the model (both builds)

Server-only code that wants the native core imports the same API from the /native subpath:

import { Shapes } from "@desert-ant-labs/shapes/native"; // server only

Shapes

recognize returns null when the stroke isn't a shape. Otherwise recognize returns one of these objects, discriminated by kind. Every shape also has outline, a polyline you can draw. A closed shape's outline doesn't repeat its first point, and an arrow's outline is its shaft.

  • line - from, to
  • curve - from, control1, control2, to (a cubic Bezier)
  • arrow - from, control1, control2, to, startHead, endHead. arrowheads(shape, length) returns the heads as [barb, tip, barb] polylines.
  • rectangle - corners, four points around the perimeter
  • ellipse - center, semiMajor, semiMinor, rotation (radians)
  • triangle, diamond, pentagon, hexagon - vertices, around the perimeter
  • star - center, outerRadius, innerRadius, rotation (radians, 0 puts a tip straight up), pointCount
  • heart - center, width, height
  • cloud - outline only
  • scribble - hull, the convex hull of the scribble. Delete the content inside the hull.

The kinds and field names are identical in Swift and Kotlin, so a stroke recognized on one platform describes itself the same way on every other.

recognize(points, options) takes three options:

  • rotation: "snapped" is the default. It rounds a shape's rotation to 15° steps and snaps lines and edges within 5° of horizontal or vertical onto the axis. "upright" removes rotation. "free" keeps the shape as drawn and skips the snapping to circles, squares, and regular polygons.
  • kinds: the kinds Shapes recognizes, all 13 by default. Leave out "scribble" if your app has no erase gesture.
  • minimumConfidence: the lowest classifier confidence Shapes accepts, on top of each kind's calibrated threshold. The default 0 applies only the calibrated thresholds.

Loading the model

By default Shapes.load() downloads the model files from Hugging Face (desert-ant-labs/shapes) at the SDK's pinned tag, verifies them, and caches them. The browser build fetches the .tflite for LiteRT.js and caches it in the browser. The native build (/native) fetches the .tflite on Linux or the .mlmodelc/ on macOS and caches it under the OS cache dir.

To self-host or run fully offline, skip the Hugging Face download:

  • directory: an explicit model directory (native build, or the browser build under Node). Files already there are used offline, otherwise the model is downloaded into it.
  • modelBaseUrl: a base URL you serve the model files from, for example "/assets/shapes/" (browser build).

Shapes.load() also accepts:

  • cacheRoot: base directory for the managed on-disk cache, default ~/.cache (native build, or the browser build under Node).
  • onProgress: load or download progress callback, fraction in [0, 1].

Browser-build-only options:

  • litert: a bring-your-own @litertjs/core module.
  • litertWasmDir: URL or path to the LiteRT.js Wasm directory.
  • accelerator: one of "wasm", "webgpu", or "webnn".

Bundlers and SSR

The default @desert-ant-labs/shapes import is safe to use directly in components: it is pure JavaScript + WebAssembly with no native modules, so bundlers can build it for the browser and for the Node SSR pass from the same module graph with no configuration.

The @desert-ant-labs/shapes/native subpath loads a native addon (via koffi) and is for server-only code. If you import it inside a framework that bundles server code (for example a Next.js Route Handler or Server Action), mark it external so the bundler does not try to bundle the native binary. In Next.js:

// next.config.js
module.exports = { serverExternalPackages: ["@desert-ant-labs/shapes"] };

Platforms

The native server build (/native) ships for linux-x64, linux-arm64, and darwin-arm64. Other Node platforms throw a clear error at load(); use the default WebAssembly build, the Swift package, or a browser for those.

License

Desert Ant Labs Source-Available License. Free for most apps, and a commercial license is required at scale. Full terms are at the link. Licensing: [email protected].

Third-party notices for the SDK: THIRD_PARTY_NOTICES.md.

Third-party notices for the weights: THIRD_PARTY_NOTICES.md.

版本与发布记录

@desert-ant-labs/shapes 共发布 35 个版本,首次发布于 2026/06/26;过去 12 个月发布了 35 个版本。

版本发布日期距今
4.3.0latest2026/11/066 天前
4.2.32026/10/3112 天前
4.2.22026/10/3112 天前
4.2.12026/10/2815 天前
4.2.02026/10/2716 天前
4.1.02026/10/2023 天前

关于 @desert-ant-labs/shapes 的常见问题

@desert-ant-labs/shapes 是什么?

On-device single-stroke shape recognition for JavaScript. Runs in the browser (WebAssembly + LiteRT.js) and server-side in Node (native), from one import.

如何安装 @desert-ant-labs/shapes?

在项目目录运行 npm install @desert-ant-labs/shapes,或使用 pnpm add / yarn add / bun add。

@desert-ant-labs/shapes 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@desert-ant-labs/shapes 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@desert-ant-labs/shapes 可以商用吗?

@desert-ant-labs/shapes 使用 SEE LICENSE IN LICENSE.md 许可。许可条款写在包内的独立文件中,请阅读该文件确认可否商用。以上为概括,不构成法律意见,请以许可原文为准。

@desert-ant-labs/shapes 的下载量有多少?

根据 npm 官方下载统计,@desert-ant-labs/shapes 在 2026/10/12 – 2026/11/10 这 30 天内被下载 7,623 次,日均约 254 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@desert-ant-labs/shapes 还在维护吗?

最新版本 4.3.0 发布于 2026/11/06(6 天前);至今共发布 35 个版本,其中过去 12 个月发布了 35 个;首次发布于 2026/06/26。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。