open-index/open-npm huggingface dataset:
npm package: @labelu/audio-react
Description: labelu audio annotation component for react
Author: gary
Latest version: 1.6.0

# @labelu/audio-react

[![npm](https://img.shields.io/npm/v/%40labelu/audio-react.svg)](https://www.npmjs.com/package/@labelu/audio-react)

## 安装

```bash
npm install @labelu/audio-react
```

## 使用

> [example](./src/example)

```tsx
import React from 'react';
import Audio from '@labelu/audio-react';

function App() {
  const [annotations, setAnnotations] = useState([]);
  return (
    <AudioAnnotator
      editingLabel="abc"
      src="https://exmaple/audio.mp3"
      editingType="segment"
      annotations={annotations}
      toolConfig={{
        segment: [
          {
            type: 'segment',
            attributes: [
              {
                color: '#ff0000',
                type: 'string',
                key: 'label',
                value: 'abc',
              },
            ],
          },
        ],
      }}
      onChange={setAnnotations}
    />
  );
}
```

## API

[Documentation](https://opendatalab.github.io/labelU-Kit/)
npm package: @labelu/formatter
Description: A collection of universal data formatting functions.
Latest version: 1.0.2

# `@labelu/formatter`

A formatter set for sinan.

## Usage

```bash
npm install @labelu/formatter
# or
yarn add @labelu/formatter
```

## basename

```typescript
import formatter from '@labelu/formatter';

formatter.format('basename', 'foo/bar/baz/asdf/quux.html');
// => 'quux.html'
```

## fileSize

> See more options in [filesize.js](https://github.com/avoidwork/filesize.js).

```typescript
import formatter from '@labelu/formatter';

formatter.format('fileSize', 265318);
// => '259.1 KB'
```

## date

> See more options in [dayjs](https://github.com/iamkun/dayjs).

```typescript
import formatter from '@labelu/formatter';

formatter.format('date', 1670916924956, {
  style: 'YYYY-MM-DD HH:mm',
});
// => '2022-12-13 15:36'
```

## extension

```typescript
import formatter from '@labelu/formatter';

formatter.format('extension', 'foo/bar/baz/asdf/quux.html');
// => 'html'
```

### Add Your Own Formatter

```typescript
import formatter from '@labelu/formatter';

formatter.add('foo', (value: string) => {
  return value + 'foo';
});
```
npm package: @labelu/i18n
Description: i18n for labelu and components
Author: garyshen
Latest version: 1.1.0

# @labelu/i18n [![npm](https://img.shields.io/npm/v/%40labelu/i18n.svg)](https://www.npmjs.com/package/@labelu/i18n)

## Description

Internationalization (i18n) package for LabelU.
npm package: @labelu/image
Description: Image annotation tool for labelU
Author: GaryShen
Latest version: 1.5.0

# `@labelu/image`

[![npm](https://img.shields.io/npm/v/%40labelu/image.svg)](https://www.npmjs.com/package/@labelu/image)

Image annotation engine for LabelU

Try it out at [opendatalab.github.io/labelU-Kit/](https://opendatalab.github.io/labelU-Kit/#/image)

## Usage

```bash
npm install @labelu/image
```
npm package: @labelu/image-annotator-react
Description: image annotator for react
Author: gary-shen
Latest version: 2.5.0

# @labelu/image-annotator-react

[![npm](https://img.shields.io/npm/v/%40labelu/image-annotator-react.svg)](https://www.npmjs.com/package/@labelu/image-annotator-react)

## Installation

```bash
npm install @labelu/image-annotator-react
```

## Usage

see [example](https://opendatalab.github.io/labelU-Kit/)
npm package: @labelu/interface
Description: typescript interfaces for labelu annotations
Author: gary
Latest version: 1.3.1

[English](./readme_en-US.md) | 简体中文

# @labelu/interface

[![npm](https://img.shields.io/npm/v/%40labelu/interface.svg)](https://www.npmjs.com/package/@labelu/interface)

包含标注工具的 TypeScript 接口定义。

## 标注工具

- [2d](./src/annotation/graphic/index.ts)
- 点云（TODO）
- [音频](./src/annotation/audio/index.ts)
- [视频](./src/annotation/video/index.ts)
- [文本描述和标签](./src/annotation/others/index.ts)
- [Enums](./src/enums/index.ts)

## 标注工具配置

- 2d （TODO）
- 点云 （TODO）
- [音频](./src/annotation/audio/index.ts)
- [视频](./src/annotation/video/index.ts)
- [标签和属性](./src/annotation/attributes/index.ts)
npm package: @labelu/utils
Description: utils for label-bee
Author: Glenfiddish
Latest version: 1.1.1

# `@labelu/utils`

> deprecated

## Usage

```
const lbUtils = require('@labelu/utils');

// TODO: DEMONSTRATE API
```

### ToolStyleConverter

```ts
import { toolStyleConverter } from '@labelu/utils';

interface IToolStyle {
  stroke: string;
  fill: string;
}

const styleConfig = {
  borderOpacity: 1, // range: [0,1]
  fillOpacity: 0.2, // range: [0,1]
  colorIndex: 0, // range: 0 1 2 3 4
};

// Basic Pattern
const result1 = {};
const rectConfig1 = {};

const data1: IToolStyle = toolStyleConverter.getColorFromConfig(
  result1
  rectConfig1,
  styleConfig,
);

// Attribute
const result2 = {
  attribute: 'value1',
};

const rectConfig2 = {
  attributeConfigurable: true,
  attributeList: [
    { key: 'key1', value: 'value1' },
    { key: 'key2', value: 'value2' },
  ]
};

const data2: IToolStyle = toolStyleConverter.getColorFromConfig(
  result2
  rectConfig2,
  styleConfig,
);

// MultiColor
const result3 = {};

const rectConfig3 = {};

const multiColorIndex = 0; // CurrentResultIndex

const data3: IToolStyle = toolStyleConverter.getColorFromConfig(
  result3
  rectConfig3,
  styleConfig,
  {
    multiColorIndex
  }
);

// invalid
const result4 = {
  valid: false
};
const rectConfig4 = {};

const data4: IToolStyle = toolStyleConverter.getColorFromConfig(
  result4
  rectConfig4,
  styleConfig,
);

// hover / selected
const result4 = {};
const rectConfig4 = {};

const status = {
  hover: true,
  // selected: true,
}

const data4: IToolStyle = toolStyleConverter.getColorFromConfig(
  result4
  rectConfig4,
  styleConfig,
  status
);
```