Label Studio 前端指南

仲嘉煊

于 2024-08-16 09:21:13 发布

阅读量815

点赞数 26

本文链接：https://blog.csdn.net/gitblog_01009/article/details/141247109

版权

Label Studio 前端指南

label-studio-frontendData labeling react app that is backend agnostic and can be embedded into your applications — distributed as an NPM package项目地址:https://gitcode.com/gh_mirrors/la/label-studio-frontend

1. 项目介绍

Label Studio Frontend 是一款基于React和mobx-state-tree开发的数据标注工具前端库，旨在提供一个可配置的数据标注解决方案。作为一个NPM包，它允许开发者轻松地将其集成到自己的应用程序中，从而为终端用户提供数据标注功能。此项目强调高度定制性和扩展性，支持用户根据具体需求调整界面与功能。

2. 快速启动

要迅速开始使用Label Studio前端，您需先确保您的开发环境已准备妥当，包括Node.js和npm。以下是基本步骤：

安装依赖

在您的项目中通过npm安装Label Studio Frontend库：

npm install @heartexlabs/label-studio

集成到项目

使用Webpack时的引入方式：

import LabelStudio from '@heartexlabs/label-studio';
import 'label-studio/build/static/css/main.css';

<div id="label-studio"></div>

<script>
var labelStudio = new LabelStudio('label-studio', {
    config: `
        <View>
            <Image name="img" value="$image"/>
            <RectangleLabels name="tag" toName="img">
                <Label value="Hello"/>
                <Label value="World"/>
            </RectangleLabels>
        </View>
    `,
    // 其他配置选项...
});
</script>

如果您不使用构建系统，可以通过UNPKG直接在HTML中添加CSS和JS资源。