open-index/open-npm huggingface dataset:
npm package: @infinite-canvas-tutorial/chat
Description: Use chatbox with canvas
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/chat

[Reference]

## Getting started

Add this plugin with configuration (similar to tiptap's plugin system):

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { ChatPlugin } from '@infinite-canvas-tutorial/chat';

const app = new App().addPlugins(...DefaultPlugins, UIPlugin, ChatPlugin);
app.run();
```

[Reference]: https://infinitecanvas.cc/reference/chat
npm package: @infinite-canvas-tutorial/d2
Description: Use d2
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/d2

## Getting started

```ts
import { parseD2ToSerializedNodes } from '@infinite-canvas-tutorial/d2';

const nodes = await parseD2ToSerializedNodes('x -> y: hello world');
api.runAtNextTick(() => {
    api.updateNodes(nodes);
});
```
npm package: @infinite-canvas-tutorial/drawio
Description: Use d2
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/drawio

## Getting started

```ts
import { parseDrawioToSerializedNodes } from '@infinite-canvas-tutorial/drawio';
const nodes = await parseDrawioToSerializedNodes('xml');
api.runAtNextTick(() => {
    api.updateNodes(nodes);
});
```
npm package: @infinite-canvas-tutorial/eraser
Description: Use eraser
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/eraser

## Getting started

Add this plugin with configuration (similar to tiptap's plugin system):

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { EraserPlugin } from '@infinite-canvas-tutorial/eraser';

const app = new App().addPlugins(...DefaultPlugins, UIPlugin, EraserPlugin);
app.run();
```

Then import the Spectrum UI like this:

```ts
import '@infinite-canvas-tutorial/eraser/spectrum';
```

And declare this penbar item in HTML like this:

```html
<ic-spectrum-canvas>
    <ic-spectrum-penbar-eraser slot="penbar-item"><ic-spectrum-penbar-eraser />
</ic-spectrum-canvas>
```
npm package: @infinite-canvas-tutorial/fal-ai
Description: Use fal.ai in client side
Author: xiaoiver
Latest version: 0.0.8

# @infinite-canvas-tutorial/fal-ai

Use [fal.ai] to implement AI interfaces like `createOrEditImage`. [Reference]

> Notice: This package will expose your fal public key on the client side.

## Getting started

Add this plugin with configuration (similar to tiptap's plugin system):

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { FalAIPlugin } from '@infinite-canvas-tutorial/fal-ai';

const app = new App().addPlugins(
    ...DefaultPlugins,
    UIPlugin,
    FalAIPlugin.configure({
        credentials: 'your-fal-ai-credentials-here',
    }),
);
app.run();
```

The plugin accepts configuration options through the `configure` method, allowing you to pass initialization parameters like your fal.ai credentials.

[fal.ai]: https://fal.ai/
[Reference]: https://infinitecanvas.cc/reference/sam
npm package: @infinite-canvas-tutorial/lama
Description: Use LaMa in client side
Author: xiaoiver
Latest version: 0.0.8

# @infinite-canvas-tutorial/lama

[Client-Side Image Inpainting with ONNX and Next.js]

## Getting Started

```ts
import { LaMaPlugin } from '@infinite-canvas-tutorial/lama';

new App().addPlugins(...DefaultPlugins, UIPlugin, LaMaPlugin).run();
```

ONNX provides a web-based runtime, enabling real-time inference directly in the browser without consuming any tokens. For details, see:
[How to add machine learning to your web application with ONNX Runtime]

## Build

We use the following syntax so that vite will build webworker correctly.

```ts
import workerUrl from './worker.js?worker&url';
```

[AI API]: /reference/ai
[How to add machine learning to your web application with ONNX Runtime]: https://onnxruntime.ai/docs/tutorials/web/
[Client-Side Image Inpainting with ONNX and Next.js]: https://medium.com/@geronimo7/client-side-image-inpainting-with-onnx-and-next-js-3d9508dfd059
[ORT model format]: https://onnxruntime.ai/docs/performance/model-optimizations/ort-format-models.html
[Using the WebGPU Execution Provider]: https://onnxruntime.ai/docs/tutorials/web/ep-webgpu.html
npm package: @infinite-canvas-tutorial/laser-pointer
Description: Use laser pointer
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/laser-pointer

## Getting started

Add this plugin with configuration (similar to tiptap's plugin system):

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { LaserPointerPlugin } from '@infinite-canvas-tutorial/laser-pointer';

const app = new App().addPlugins(
    ...DefaultPlugins,
    UIPlugin,
    LaserPointerPlugin,
);
app.run();
```

Then import the Spectrum UI like this:

```ts
import '@infinite-canvas-tutorial/laser-pointer/spectrum';
```

And declare this penbar item in HTML like this:

```html
<ic-spectrum-canvas>
    <ic-spectrum-penbar-laser-pointer slot="penbar-item"><ic-spectrum-penbar-laser-pointer />
</ic-spectrum-canvas>
```
npm package: @infinite-canvas-tutorial/lasso
Description: Use lasso selection tool
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/lasso

## Getting started

Add this plugin with configuration (similar to tiptap's plugin system):

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { LassoPlugin } from '@infinite-canvas-tutorial/lasso';

const app = new App().addPlugins(...DefaultPlugins, UIPlugin, LassoPlugin);
app.run();
```

Then import the Spectrum UI like this:

```ts
import '@infinite-canvas-tutorial/lasso/spectrum';
```

And declare this penbar item in HTML like this:

```html
<ic-spectrum-canvas>
    <ic-spectrum-penbar-lasso slot="penbar-item"><ic-spectrum-penbar-lasso />
</ic-spectrum-canvas>
```
npm package: @infinite-canvas-tutorial/mermaid
Description: Use mermaid
Author: xiaoiver
Latest version: 0.0.10

# @infinite-canvas-tutorial/mermaid

## Getting started

```ts
import { parseMermaidToSerializedNodes } from '@infinite-canvas-tutorial/mermaid';
const nodes = await parseMermaidToSerializedNodes('flowchart LR\n start-->stop');
api.runAtNextTick(() => {
    api.updateNodes(nodes);
});
```
npm package: @infinite-canvas-tutorial/sam
Description: Use Segment Anything Model in client side
Author: xiaoiver
Latest version: 0.0.8

# @infinite-canvas-tutorial/sam

Use ONNX WebGPU runtime for SAM to implement [AI API]

## Getting Started

```ts
import { SAMPlugin } from '@infinite-canvas-tutorial/sam';

new App().addPlugins(...DefaultPlugins, UIPlugin, SAMPlugin).run();
```

ONNX provides a web-based runtime, enabling real-time inference directly in the browser without consuming any tokens. For details, see:
[How to add machine learning to your web application with ONNX Runtime]

We have implemented the following optimizations:

-   Utilized the [ORT model format] to reduce the size of downloaded models during runtime
-   Employed WebGPU for faster inference speeds. For details, see: [Using the WebGPU Execution Provider]
-   Executed within WebWorkers to avoid blocking the main thread

The encoder and decoder can be downloaded from:

```ts
const ENCODER_URL =
    'https://huggingface.co/g-ronimo/sam2-tiny/resolve/main/sam2_hiera_tiny_encoder.with_runtime_opt.ort';
const DECODER_URL =
    'https://huggingface.co/g-ronimo/sam2-tiny/resolve/main/sam2_hiera_tiny_decoder_pr1.onnx';
```

## Build

We use the following syntax so that vite will build webworker correctly.

```ts
import workerUrl from './worker.js?worker&url';
```

[AI API]: /reference/ai
[How to add machine learning to your web application with ONNX Runtime]: https://onnxruntime.ai/docs/tutorials/web/
[ORT model format]: https://onnxruntime.ai/docs/performance/model-optimizations/ort-format-models.html
[Using the WebGPU Execution Provider]: https://onnxruntime.ai/docs/tutorials/web/ep-webgpu.html
npm package: @infinite-canvas-tutorial/upscaler
Description: Use UpscalerJS in client side
Author: xiaoiver
Latest version: 0.0.8

# @infinite-canvas-tutorial/upscaler

Use [upscalerjs] to implement `upscaleImage` in [AI API]

-   Running in WebWorker with tensorflow.js
-   Choose @upscalerjs/esrgan-medium 4x by default

## Getting Started

```ts
import { UpscalerPlugin } from '@infinite-canvas-tutorial/upscaler';

new App().addPlugins(...DefaultPlugins, UIPlugin, UpscalerPlugin).run();
```

## Build

We use the following syntax so that vite will build webworker correctly.

```ts
import workerUrl from './worker.js?worker&url';
```

[AI API]: /reference/ai
[upscalerjs]: https://upscalerjs.com/
npm package: @infinite-canvas-tutorial/vello
Description: Use Vello for rendering
Author: xiaoiver
Latest version: 0.0.3

# @infinite-canvas-tutorial/vello

## Getting Started

Replace default render pipeline with vello.

```ts
import {
    RendererPlugin,
    DefaultRendererPlugin,
    DefaultPlugins,
} from '@infinite-canvas-tutorial/ecs';
import { VelloPipeline } from '@infinite-canvas-tutorial/vello';

const VelloRendererPlugin = RendererPlugin.configure({
    rendererSystemCtor: VelloPipeline,
});
DefaultPlugins.splice(
    DefaultPlugins.indexOf(DefaultRendererPlugin),
    1,
    VelloRendererPlugin,
);

new App().addPlugins(...DefaultPlugins, UIPlugin).run();
```
npm package: @infinite-debugger/axios-api-adapter
Description: API adapter for javascript client applications
Author: Ronald M. Kasendwa
Latest version: 0.1.0-alpha.22

<h1 align="center">infinite-debugger/axios-api-adapter</h1>

## Installation

infinite-debugger/axios-api-adapter is available as an [npm package](https://www.npmjs.com/package/@infinite-debugger/axios-api-adapter).

```sh
// with npm
npm install @infinite-debugger/axios-api-adapter

// with yarn
yarn add @infinite-debugger/axios-api-adapter
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```ts
import { get } from '@infinite-debugger/axios-api-adapter';

get('/users', { label: 'Loading users' });
```

## Contributing

Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to the utility library.

## Changelog

If you have recently updated, please read the [changelog](https://github.com/rmkasendwa/axios-api-adapter/releases) for details of what has changed.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @infinite-debugger/react-mui
Description: RMK React MUI is a React UI library of utility components, hooks and contexts
Author: Ronald M. Kasendwa
Latest version: 0.9.37

<h1 align="center">infinite-debugger/react-mui</h1>

## Installation

infinite-debugger/react-mui is available as an [npm package](https://www.npmjs.com/package/@infinite-debugger/react-mui).

```sh
// with npm
npm install @infinite-debugger/react-mui @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @infinite-debugger/react-mui @mui/material @emotion/react @emotion/styled
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FileUploader } from '@infinite-debugger/react-mui';

function App() {
  return <FileUploader />;
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

## Contributing

Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.

## Changelog

If you have recently updated, please read the [changelog](https://github.com/rmkasendwa/rmk-react-mui/releases) for details of what has changed.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @infinite-debugger/rmk-js-extensions
Description: RMK Utils is a library of utility functions
Author: Ronald M. Kasendwa
Latest version: 0.1.0-alpha.28

<h1 align="center">infinite-debugger/rmk-js-extensions</h1>

## Installation

infinite-debugger/rmk-js-extensions is available as an [npm package](https://www.npmjs.com/package/@infinite-debugger/rmk-js-extensions).

```sh
// with npm
npm install @infinite-debugger/rmk-js-extensions

// with yarn
yarn add @infinite-debugger/rmk-js-extensions
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```ts
import '@infinite-debugger/rmk-js-extensions/String';
```

## Contributing

Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to the utility library.

## Changelog

If you have recently updated, please read the [changelog](https://github.com/rmkasendwa/rmk-utils/releases) for details of what has changed.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @infinite-debugger/rmk-utils
Description: RMK Utils is a library of utility functions
Author: Ronald M. Kasendwa
Latest version: 0.1.0-alpha.29

<h1 align="center">infinite-debugger/rmk-utils</h1>

## Installation

infinite-debugger/rmk-utils is available as an [npm package](https://www.npmjs.com/package/@infinite-debugger/rmk-utils).

```sh
// with npm
npm install @infinite-debugger/rmk-utils

// with yarn
yarn add @infinite-debugger/rmk-utils
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```ts
import { getInterpolatedPath } from '@infinite-debugger/rmk-utils/paths';

getInterpolatedPath("/users/:userId", { userId: 123 }); // -> "/users/123"
```

## Contributing

Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to the utility library.

## Changelog

If you have recently updated, please read the [changelog](https://github.com/rmkasendwa/rmk-utils/releases) for details of what has changed.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @infinite-industries/widget
Description: Widget for embedding events from the Infinite Industries platform on a website.
Author: Infinite Crew
Latest version: 0.0.5

# Infinite Industries Widget

[![npm version](https://badgen.net/npm/v/@infinite-industries/widget)](https://www.npmjs.com/package/@infinite-industries/widget)
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@infinite-industries/widget/badge)](https://www.jsdelivr.com/package/npm/@infinite-industries/widget)

Widget for embedding events from the Infinite Industries platform on a website.

## Installation

- Add one or more `div`s or other elements with id `infinite-widget` to your main template where you want to place the widget.
  (note that while duplicate IDs on elements are usually frowned on, the widget has been set up to support it)
- Add these (optional) attributes to the container element(s):
  - `data-widget-title`
  - `data-cards-per-page` (controls the number of events that will appear at a time; use `*` to compute based on the size of the window)
  - `data-rows-per-page` (when using `data-cards-per-page="*"`, controls the number of rows that will be rendered on a page; has no effect when `data-cards-per-page` is a number)
  - `data-event-id` (if set to a valid event ID, will cause the widget to display a single card for that event only)
- Add this script, replacing `1.0` with the version you want to use:

  ```html
  <script src="https://cdn.jsdelivr.net/npm/@infinite-industries/widget@1.0/dist/main.js"></script>
  ```

  and this stylesheet:

  ```html
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@infinite-industries/widget@1.0/dist/main.css">
  ```

## Development

The widget source lives in main Infinite Industries repo.

```bash
git clone https://github.com/infinite-industries/infinite.git
cd infinite/widget
npm install
```

`npm run start` runs a webpack dev server with hot reloading, serving at [localhost:8080](http://localhost:8080/). The test page uses the `data-mode` attribute to make the widget pull from the staging API instead of production; you can also set it to `local` to pull from a locally-running API server.

`npm run test` runs the unit tests

`npm run build` to build for production

## License

MIT