AI 宠物面板模版

前提条件

已阅读 Ray 新手村任务，了解 Ray 框架的基础知识。
已阅读使用 Ray 开发万能面板，了解 Ray 面板开发的基础知识。

构建内容

您可以利用面板小程序开发构建出一个基于 Ray 框架的 AI 宠物设备面板。

宠物档案：可在面板上管理宠物信息，包括增、删、改、查，以及上传分析宠物正面照。
多宠识别：监测宠物进食行为，并识别具体是哪只宠物。

所需条件

智能生活 App
Tuya MiniApp IDE
NVM 及 Node 开发环境（建议使用 18.x 系列版本）
Yarn 依赖管理工具

详见面板小程序 > 搭建环境。

首先需要创建一个产品，定义产品有哪些功能点，然后再在面板中一一实现这些功能点。

注册登录涂鸦开发者平台，并在平台创建产品:

单击页面左侧产品 > 产品开发，在 产品开发 页面单击 创建产品。

在 标准类目 下选择 小家电 > 可视宠物喂食器。

选择 智能化方式 和 产品方案，完善产品信息，单击 创建产品。

在 添加标准功能 页面，根据实际需求选择对应的功能点，单击确定。

在产品详情页复制产品对应的 PID，联系您的项目经理，提供该 PID 以配置开启 产品 AI 功能。
确认已开启产品 AI 功能后，可以在 01 功能定义 下看到 产品 AI 功能 页签。

在 面板端智能体 下，单击 新增智能体。

在 新增面板端智能体 页面，点击 选择已创建智能体，勾选 宠物 AI 智能体，单击确定。

在已选择的智能体下，单击详情。

复制智能体对应的 ID，保存备用。

开发者平台创建面板小程序

面板小程序的开发在 小程序开发者 平台上进行操作，首先请前往小程序开发者平台完成平台的注册登录。

详细操作步骤可以参考面板小程序 > 创建面板小程序。

IDE 基于模板创建项目工程

打开 IDE 创建一个基于 AI 宠物面板模版 的面板小程序项目，需要在 Tuya MiniApp IDE 上进行操作。

详细操作步骤可以参考面板小程序 > 初始化项目工程。

App 版本
- 智能生活 v6.8.0 及以上版本
Kit 依赖
- BaseKit: 3.0.0
- MiniKit: 3.1.0
- DeviceKit: 4.6.0
- BizKit: 4.5.1
- IPCKit: 5.18.0
- HomeKit: 3.1.4
- baseversion: 2.27.0
组件依赖
- @ray-js/ray^1.7.12
- @ray-js/components-ty-ipc^2.2.4

在项目内配置您在前面 创建产品 > 步骤 10 中复制的智能体 ID，修改模版文件 /src/constant/index.ts：

// 智能体 ID，修改为产品配置的智能体 ID
const AGENT_ID = "xxx";

添加宠物

使用面板之前要先添加宠物信息，按照引导流程选择宠物类型、品种、性别、活跃度，上传正面照，并填写宠物的昵称、生日、体重等信息。

功能展示

查看宠物详情，更新、删除宠物信息

点击某个宠物可以查看该宠物的详细信息，在详情页面可更新宠物信息、删除宠物记录。

功能展示

相关代码段

// 初始化录音数据
useEffect(() => {
  dispatch(fetchAudios());
}, []);

// Home组件
<PageContainer
  show={showVoices}
  customStyle="backgroundColor: transparent"
  position="bottom"
  overlayStyle="background: rgba(0, 0, 0, 0.5);"
  onLeave={() => setShowVoices(false)}
  onAfterEnter={() => setReady(true)}
  onClickOverlay={() => setShowVoices(false)}
>
  <Voices ready={ready} onClose={() => setShowVoices(false)} />
</PageContainer>;

// 录音流程

  import { getRecorderManager } from '@ray-js/ray';

  const recordManager = useRef(getRecorderManager());
  const recordFile = useRef<string>();

// （1）开始录音
  const handleStart = () => {
    recordManager.current.start({
      frameSize: undefined,
      format: 'wav',
      success: res => {
        recordFile.current = res.tempFilePath;
        setIsRecording(true);
      },
      fail: err => {
        console.log(err);
      },
    });
  };

// （2）结束录音
  const handleFinish = () => {
    recordManager.current.stop({
      success: () => {
        setIsRecording(false);
        onRecorded(recordFile.current);
      },
    });
  };

// （3）试听录音

  import { getRecorderManager } from '@ray-js/ray';

  const audioContext = useRef<ty.CreateInnerAudioContextTask>();
  audioContext.current = createInnerAudioContext();

  const handleListen = () => {
    if (isPlaying) {
      audioContext.current?.stop?.({
        success: () => {
          setIsPlaying(false);
        },
      });
    } else {
      audioContext.current?.play?.({
        src: file,
        autoplay: true,
        loop: false,
        success: () => {
          setIsPlaying(true);
        },
      });
    }
  };

  // （4）保存录音
    const handleSave = async () => {
    try {
      const {
        data: { inputValue },
      } = await DialogInstance.input({
        context: this,
        title: Strings.getLang('dsc_input_audio_name'),
        overlayStyle: { background: 'transparent' },
        value: '',
        cancelButtonText: Strings.getLang('dsc_cancel'),
        confirmButtonText: Strings.getLang('dsc_confirm'),
        selector: '#smart-dialog-voice',
      });

      if (file) {
        try {
          showLoading({
            title: Strings.getLang('dsc_uploading'),
          });

          const { cloudKey } = await uploadAudio(
            file,
            'pet_media-device',
            'application/octet-stream'
          );

          await fileRelationSave(
            {
              objectKey: cloudKey,
              fileName: `${inputValue}_@_${duration}`,
            },
            devId
          );

          await (dispatch as AppDispatch)(fetchAudios()).unwrap();

          onSave();
        } catch (err) {
          showToast({
            title: Strings.getLang('dsc_save_fail'),
            icon: 'fail',
          });
        } finally {
          hideLoading();
        }
      }
    } catch (err) {
      console.log(err);
    }
  };

  // （5）删除录音
  import { showLoading, hideLoading, showToast } from '@ray-js/ray';

  const [edit, setEdit] = useState(false);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const handleEdit = async () => {
    if (audiosTotal === 0) return;
    if (edit) {
      try {
        if (selectedIds.length !== 0) {
          showLoading({
            title: '',
          });

          await (dispatch as AppDispatch)(deleteAudios(selectedIds)).unwrap();
        }
        setEdit(false);
        setSelectedIds([]);
      } catch (err) {
        showToast({
          title: Strings.getLang('dsc_delete_failed'),
          icon: 'fail',
        });
      } finally {
        hideLoading();
      }
    } else {
      setEdit(true);
    }
  };

主要支持用户通过双向语音对讲，陪伴宠物，增强宠物的情感联系。