react-native-autoglm-ui-annotations

用于收集 UI 组件注解的 React Native 包，用于 AutoGLM 手机自动化框架。

安装

npm install react-native-autoglm-ui-annotations
# 或
yarn add react-native-autoglm-ui-annotations

iOS 配置

如果使用 CocoaPods，请在 Podfile 中添加：

pod 'AutoGLMUIAnnotations', :path => '../node_modules/react-native-autoglm-ui-annotations/ios'

然后运行：

cd ios && pod install

Android 配置

Android 无需额外配置（如果使用自动链接，React Native 0.60+ 默认启用）。

使用方法

基础用法

import AutoGLM from 'react-native-autoglm-ui-annotations';

// 获取当前屏幕的 UI 注解
const annotations = await AutoGLM.getUIAnnotations({
  rootComponent: this, // 或你的根组件
  includeText: true,
  includeAccessibility: true,
});

注解组件

你可以手动为组件添加注解以提供描述：

import { registerComponent } from 'react-native-autoglm-ui-annotations';
import { useRef, useEffect } from 'react';

function MyButton() {
  const buttonRef = useRef(null);
  
  useEffect(() => {
    if (buttonRef.current) {
      registerComponent(buttonRef.current, {
        description: '提交按钮，用于发送表单数据',
        type: 'Button',
      });
    }
  }, []);

  return <Button ref={buttonRef} title="Submit" />;
}

使用高阶组件 (HOC)

import { withAutoGLMAnnotation } from 'react-native-autoglm-ui-annotations';

const AnnotatedButton = withAutoGLMAnnotation(
  Button,
  {
    description: '提交按钮，用于发送表单数据',
    type: 'Button',
  }
);

注解格式

每个注解是一个对象，具有以下结构：

{
  id: string;                    // 组件的唯一标识符
  type: string;                  // 组件类型（如 "Button", "TextInput", "Text"）
  bounds: [number, number, number, number]; // [x, y, width, height] 边界框
  description: string;           // 组件功能的可读描述
  text?: string;                 // 文本内容（如果适用）
  accessibilityLabel?: string;   // 无障碍标签（如果可用）
  accessibilityRole?: string;    // 无障碍角色（如果可用）
  enabled?: boolean;             // 组件是否启用
  visible?: boolean;             // 组件是否可见
}

与 AutoGLM Python 框架集成

本包设计用于与 AutoGLM Python 框架配合使用。通过此包收集的注解可以传递给 AutoGLM Agent，以提升 AI 对 UI 的理解能力。

💡 推荐: 对于本地开发（React Native 应用和 Python Agent 在同一设备），建议使用文件方式，无需后端服务器。查看 LOCAL_FILE_GUIDE.md 了解最简单的集成方式。

集成示例（文件方式）：

from phone_agent import PhoneAgent
from phone_agent.agent import AgentConfig
import json
import subprocess

# 从文件读取 UI 注解（React Native 应用保存的文件）
def get_ui_annotations():
    try:
        # 通过 ADB 从设备读取文件
        result = subprocess.run(
            ["adb", "shell", "cat", "/sdcard/autoglm_annotations.json"],
            capture_output=True,
            text=True,
            timeout=2
        )
        if result.returncode == 0:
            return json.loads(result.stdout)
    except:
        pass
    return None  # 失败时返回 None，Agent 会继续使用截图

agent_config = AgentConfig(
    ui_annotation_provider=get_ui_annotations,
)

agent = PhoneAgent(agent_config=agent_config)
agent.run("点击提交按钮")

React Native 端（保存注解到文件）:

import AutoGLM from 'react-native-autoglm-ui-annotations';
import RNFS from 'react-native-fs';

// 每2秒保存一次注解到文件
setInterval(async () => {
  const annotations = await AutoGLM.getUIAnnotations();
  await RNFS.writeFile(
    '/sdcard/autoglm_annotations.json',
    JSON.stringify(annotations),
    'utf8'
  );
}, 2000);

许可证

Apache-2.0