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(() => {
  // 拉取滤镜类型数据
  getAiFilterTemplateData()
    .then(res => {
      console.log('~ getAiFilterTemplateData res ~', res);
      const tempRes = {};
      res.forEach(item => {
        tempRes[item.style] = item.templates;
      });
      console.log('~ getAiFilterTemplateData tempRes ~', tempRes);
      dispatch(initAiFilterData(tempRes));
    })
    .catch(err => {
      console.log('~ getAiFilterTemplateData ~', err);
    });
}, []);

// 选择宠物素材资源
const handleAdd = React.useCallback(
  (type: string) => {
    authorizeAsync({ scope: 'scope.writePhotosAlbum' })
      .then(() => {
        return chooseMediaAsync({
          count: type === 'image' ? MAX_CHOOSE_IMAGE_NUM : MAX_CHOOSE_VIDEO_NUM,
          mediaType: type,
          sourceType: ['album'],
          isFetchVideoFile: false,
          isGetAlbumFileName: true,
        });
      })
      .then(res => {
        showLoading({ title: Strings.getLang('loadingTip') });
        const newPhotos = res.tempFiles.map(d => ({
          ...d,
          fileType: d.fileType as 'image' | 'video',
        }));

        // 筛选出重复照片
        const filterPhotos = newPhotos.filter(d =>
          photos.find(p => p.tempFilePath === d.tempFilePath || p.originUrl === d.tempFilePath)
        );

        if (filterPhotos?.length) {
          showToast({ title: Strings.getLang('samePhotoTip'), icon: 'none' });
        }

        const _newPhotos = newPhotos
          .filter(
            d =>
              !photos.find(
                p => p.tempFilePath === d.tempFilePath || p.originUrl === d.tempFilePath
              )
          )
          .map(d => ({ ...d, originUrl: d.tempFilePath }));

        if (!_newPhotos?.length) {
          hideLoading();
          return;
        }

        if (type === 'image') {
          handleImageCompress(_newPhotos);
          return;
        }

        // 视频不做压缩
        hideLoading();
        dispatch(addPhotosAsync(_newPhotos));
      })
      .catch(err => {
        hideLoading();
        console.log('=== authorizeAsync or chooseMediaAsync err', err);
      });
  },
  [photos, resolution]
);

// 处理图片压缩
const handleImageCompress = (_newPhotos) => {
  const { width, height } = getResolution(resolution);
  const _newPhotosPath = _newPhotos.map(d => d.tempFilePath);

  compressImageAsyncBatch(_newPhotosPath, width, height)
    .then(res => {
      hideLoading();
      const { fileList = [] } = (res || {}) as { fileList: string[] };
      const _newPhotosRes = _newPhotos.map((d, index) => ({
        ...d,
        tempFilePath: fileList[index],
      }));

      dispatch(addPhotosAsync(_newPhotosRes));
      handleImageThumbnail(_newPhotosRes);
    })
    .catch(err => {
      hideLoading();
      console.error('=== compressImageAsyncBatch err', err);
      showToast({ title: Strings.getLang('addImageError'), icon: 'none' });
    });
};

// 处理图片缩略图
const handleImageThumbnail = (_newPhotosRes) => {
  const _imgCheckedList = _newPhotosRes.map((current, i) => {
    const { fileFullName } = getFileNameAndExtension(current?.tempFilePath || '') || {};
    return {
      id: i + 1,
      src: current?.tempFilePath,
      originUrl: current?.originUrl,
      thumbnail: current?.thumbTempFilePath,
      fileName: fileFullName,
      fileType: current?.fileType,
      title: '',
    };
  });

  const _imgCheckedListPath = _imgCheckedList.map(d => d.src);

  fetchImageThumbnailBatch(_imgCheckedListPath, [])
    .then(res => {
      const _imgCheckedListRes = _imgCheckedList.map((d, index) => ({
        ...d,
        thumbnail: (res[index] || '') as string,
      }));
      dispatch(updateImgCheckedList(_imgCheckedListRes));
    })
    .catch(err => {
      console.error('~ fetchImageThumbnailBatch ~', err);
    });
};

// 宠物写真生成
useEffect(() => {
  clearAiFilterEventId();
  createForegroundVideoService();
  return () => {
    destroyForegroundVideoService();
  };
}, []);

// 生成宠物写真
const changeAppAiFilterImg = (url: string, templateCode: string, aiFilter: any) => {
  if (!templateCode) return;

  showLoading({
    title: Strings.getLang('aiAppFilterTip'),
    mask: true,
  });

  processPetForegroundMediaByTemplate({
    templateObject: {
      effect: aiFilter,
      type: 'APP',
      outputType: 'image',
    },
    mediaSource: url,
    success(res) {
      console.log('createForegroundVideoService', res);
      const path = res.outputPath;
      hideLoading();

      const __tempCurrentImg = {
        ...currentImg,
        filterCode: templateCode,
        filterSrc: path,
      };

      updateCurrentImg(__tempCurrentImg);

      if (path?.slice(-4) === '.mp4') {
        fetchVideoThumbnail(path, __tempCurrentImg);
      } else {
        fetchImageThumbnail(path, __tempCurrentImg);
      }
    },
    fail(err) {
      console.log('createForegroundVideoService err', err);
      hideLoading();
      showToast({
        icon: 'error',
        title: Strings.getLang(`aiFilterFailed${Math.abs(err?.innerError?.errorCode) || ''}`),
      });
    },
  });
};

恭喜你 🎉 完成了本教程的学习！
有任何问题可以联系涂鸦智能小程序团队

反馈