# ad-magic-frontend

**Repository Path**: apulisplatform/ad-magic-frontend

## Basic Information

- **Project Name**: ad-magic-frontend
- **Description**: AD Magic Frontend
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: v1.6.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-26
- **Last Updated**: 2022-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AD Magic Frontend

## 目录结构

1. `annot-canvas`

     提供了一个canvas，用于查看，绘制和编辑标注。  用TypeScript语言编写，编译成node.js，供annot-ui项目引用。

    <font color='red'>此项目无需修改。</font>

2. `annot-core`

     包含了annot的核心逻辑，用于管理objects, frames, logs等。  node.js库，供annot-ui项目引用。  中间层，request从这里发出。

   涉及后台接口调用，修改本项目中`annot-core\src\server-proxy.js`相关代码。

3. `annot-data`

   用于实现图片、视频文件的压缩及编码等。  node.js库，供annot-core项目引用。

   <font color='red'>遗留项目，后期会移除。此项目无需修改。</font>

4. `annot-ui`

     admagic ui界面，基于React, Redux和Antd，开发语言ts。

## 本地运行

1. 安装依赖

```bash
cd ../annot-core && npm install && cd - && npm install
```

2. 修改配置

   - annot-ui\package.json

```json
"scripts": {
...
"start": "cross-env REACT_APP_API_URL=http://182.138.104.162:16480 webpack-dev-server --config ./webpack.config.js --mode=development",
...
},
```

   将`REACT_APP_API_URL`修改为联调的后台接口。

   - annot-ui\src\cvat-core-wrapper.ts

   ```tsx
   // development
   cvat.config.backendAPI = '/annotations/api/v1';
   // // production
   // cvat.config.backendAPI =
   //     typeof process.env.REACT_APP_API_URL === 'undefined' ?
   //         '/annotations/api/v1' :
   //         `${process.env.REACT_APP_API_URL}/annotations/api/v1`;
   ```

   屏蔽production部分，打开development部分代码。

3. 运行

```bash
cd annot-ui
npm start
```