此存储库已弃用

此存储库已被弃用，转而使用 https://github.com/HumanSignal/label-studio/tree/develop/web/libs/editor

现在它是只读的。请将所有问题和拉取请求提交到 https://github.com/HumanSignal/label-studio/。

Label Studio 前端 ·

GitHub release · :sunny:

网站 • 文档 • Twitter • 加入 Slack 社区 <img src="https://go.heartex.net/docs/images/slack-mini.png" width="18px"/>

Label Studio 是一个开源的、可配置的数据标注工具。:v:

前端，顾名思义，是使用 React 和 mobx-state-tree 开发的前端库，作为 NPM 包分发。您可以将其包含在您的应用程序中，为用户提供数据标注支持。它可以进行细粒度的自定义和扩展。

安装

npm install @heartexlabs/label-studio

使用方法

使用 Webpack

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

使用 UNPKG.com

<!-- 引入 Label Studio 样式表 -->
<link href="https://unpkg.com/@heartexlabs/label-studio@1.8.0/build/static/css/main.css" rel="stylesheet">

<!-- 创建 Label Studio 容器 -->
<div id="label-studio"></div>

<!-- 引入 Label Studio 库 -->
<script src="https://unpkg.com/@heartexlabs/label-studio@1.8.0/build/static/js/main.js"></script>

初始化

<!-- 初始化 Label Studio -->
<script>
  var labelStudio = new LabelStudio('label-studio', {
    config: `
      <View>
        <Image name="img" value="$image"></Image>
        <RectangleLabels name="tag" toName="img">
          <Label value="Hello"></Label>
          <Label value="World"></Label>
        </RectangleLabels>
      </View>
    `,

    interfaces: [
      "panel",
      "update",
      "submit",
      "controls",
      "side-column",
      "annotations:menu",
      "annotations:add-new",
      "annotations:delete",
      "predictions:menu",
    ],

    user: {
      pk: 1,
      firstName: "James",
      lastName: "Dean"
    },

    task: {
      annotations: [],
      predictions: [],
      id: 1,
      data: {
        image: "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
      }
    },

    onLabelStudioLoad: function(LS) {
      var c = LS.annotationStore.addAnnotation({
        userGenerate: true
      });
      LS.annotationStore.selectAnnotation(c.id);
    }
  });
</script>

开发

克隆仓库

git clone git@github.com:heartexlabs/label-studio-frontend.git
# 或：git clone https://github.com/heartexlabs/label-studio-frontend.git
cd label-studio-frontend

安装所需依赖
```
npm install
```
启动开发服务器
```
npm run start
```
在 src/env/development.js 中查看不同的方式来初始化开发服务器配置和任务数据，修改 data 变量是一个好的开始。
在进行更改并准备在生产环境中使用后，您需要创建生产构建
```
npm run build-bundle
```
现在您在 build/static/ 目录中有一个 .js 文件和一个 .css 文件

面向团队、初创公司和企业的 Label Studio :office:

Label Studio for Teams 是我们的企业版（云端和本地部署），包括数据管理器、高质量的基线模型、主动学习、协作者支持等。请访问网站了解更多信息。

生态系统

项目	描述
label-studio	服务器部分，作为 pip 包分发
label-studio-frontend	前端部分，使用 JavaScript 和 React 编写，可嵌入到您的应用程序中
label-studio-converter	将标签编码为您喜欢的机器学习库的格式
label-studio-transformers	连接并配置为与 Label Studio 一起使用的 Transformers 库