1. 准备工作

前提条件

• 已阅读 Ray 新手村任务，了解 Ray 框架的基础知识。
• 已阅读 使用 Ray 开发万能面板，了解 Ray 面板开发的基础知识。
• AI 图像增强功能模板使用 智能设备模型（Smart Device Model，SDM） 开发，了解 SDM 相关请查看 智能设备模型。

开发环境

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

2. 需求分析

• 在某些场景下，设备拍摄的图像会出现昏暗、曝光等问题。可利用 AI 技术识别并增强优化，以提高图像的清晰度。
• 许多设备的摄像头是广角摄像头，可利用 AI 技术进行畸变校正，以消除图像的畸变。

功能拆分

• 基本交互功能：
  • 查看图像增强优化前后对比。
  • 查看图像畸变校正前后对比。
• AI 处理功能：
  • 对原始图像进行清晰度增强。
  • 对图像进行畸变校正。

3. 创建项目

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

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

详细操作步骤，请参考 创建面板小程序。

IDE 基于示例模板创建项目工程

登录 Tuya MiniApp IDE，创建一个基于 AI 图像增强功能模板 的面板小程序项目。

详细操作步骤，请参考 初始化项目工程。

4. 工程目录

完成以上步骤后，一个面板小程序的开发模板初始化完成。以下为工程目录的介绍：

src/
├── api/                          # API 接口层
├── components/                   # 公共组件
│   ├── icon-font/
│   ├── preview-image/
├── pages/                        # 页面
│   └── home/                     # 首页
├── redux/                        # Redux 状态管理
│   ├── modules/
├── hooks/                        # 自定义 Hooks
├── i18n/                         # 国际化
├── devices/                      # 设备相关
├── res/                          # 静态资源
├── styles/                       # 全局样式
├── utils/                        # 工具函数
├── constant/                     # 常量定义
├── app.config.ts                 # 应用配置
├── app.less                      # 全局样式
├── app.tsx                       # 应用入口
├── composeLayout.tsx             # 布局组件
├── global.config.ts              # 全局配置
├── routes.config.ts              # 路由配置
├── theme.json                    # 主题配置
└── variables.less                # 样式变量

5. 关键能力依赖

• 区域：全区可用
• App 版本：涂鸦 App、智能生活 App v6.9.0 及以上版本
• Kit 依赖：
  • BaseKit：v3.0.6
  • MiniKit：v3.0.1
  • DeviceKit：v4.0.8
  • BizKit：v4.2.0
  • AIKit：v1.4.4
  • baseversion：v2.26.7
• 组件依赖：
  • @ray-js/panel-sdk: "^1.13.1"
  • @ray-js/ray: "^1.7.37"
  • @ray-js/ray-error-catch: "^0.0.25"
  • @ray-js/smart-ui: "^2.1.5"
  • @ray-js/cli: "^1.6.1"

6. 基本交互功能

图像导入及选择

功能介绍

模板中提供默认图像列表，用户可直接对列表中的图像进行处理。同时模板中提供了方法，支持用户通过选取相册内容或拍照获取图像。

相关代码段

import { chooseImage } from "@ray-js/ray";

// 用于保证用户选择的图像
const [list, setList] = React.useState<string[]>([]);
const handleSelectImage = useCallback(() => {
  // 选择图片
  chooseImage({
    success: res => {
      console.log('chooseCropImage success', res);
      setList(prev => [...prev, ...res.tempFilePaths]);
    },
    fail: error => {
      console.error('chooseCropImage fail', error);
    },
  });

7. AI 图像处理

 

功能介绍

通过对图像进行增强优化及畸变校正，改善 C 端用户浏览图像时的体验。

关键 API 代码段

import { ai, env } from "@ray-js/ray";

/**
 * 目前相关的能力 API 只支持单图像处理，如需处理多张图片，请采用队列方式依次调用
 */
const enhanceImages = [];
let doEnhance = false;

/**
 * 摄像头畸变参数
 * 注意：不同摄像头畸变参数不同，需根据实际摄像头参数进行调整
 */
const distortionOptions = {
  interpolationType: 2,
  ratio: 100,
  fCx: 3.108605878126431e2,
  fCy: 6.257166314880553e2,
  fFx: 7.084082701155164e2,
  fFy: 7.065142640307738e2,
  fK1: -0.291356681546637,
  fK2: 0.083781361060513,
  fK3: -0.011253071088971,
  fP1: 3.256053844769221e-4,
  fP2: 4.136029216106517e-4,
};

/**
 * 处理增强图像
 * @param data
 * @returns
 */
const handleEnhance = (data) => {
  if (doEnhance) {
    return;
  }
  doEnhance = true;
  ai.enhanceClarityForImage({
    inputImagePath: data.src,
    outputImagePath: `${env.USER_DATA_PATH}/ai_enhanced_image`,
    enhanceType: 5,
    success: (res) => {
      // 优化图像清晰度完成，这里判断是否需要做畸变校正
      if (data.type === "correct") {
        ai.enhanceCalibrationForImage({
          inputImagePath: res.outputImagePath,
          outputImagePath: `${env.USER_DATA_PATH}/ai_enhanced_image`,
          ...distortionOptions,
          success: (res1) => {
            // AI 畸变校正图片成功
            data.resolve(res1.outputImagePath);
          },
          fail: (error) => {
            // AI 畸变校正图片失败
            data.reject(error);
          },
          complete: () => {
            doEnhance = false;
            if (enhanceImages.length > 0) {
              handleEnhance(enhanceImages.shift());
            }
          },
        });
      } else {
        data.resolve(res.outputImagePath);
        doEnhance = false;
        if (enhanceImages.length > 0) {
          handleEnhance(enhanceImages.shift());
        }
      }
    },
    fail: (error) => {
      // AI 处理图片失败
      data.reject(error);
      doEnhance = false;
      if (enhanceImages.length > 0) {
        handleEnhance(enhanceImages.shift());
      }
    },
  });
};

/**
 * 增强图像
 * @param src
 * @param type
 * @returns
 */
export const enhanceImage = (src, type) => {
  return (
    new Promise() <
    string >
    ((resolve, reject) => {
      enhanceImages.push({
        src,
        type,
        resolve,
        reject,
      });
      if (!doEnhance) {
        handleEnhance(enhanceImages.shift());
      }
    })
  );
};

• 具体 AI 技术方案介绍，请参考 图片解决方案 > 图像增强优化方案。
• 具体 API 相关介绍：

imageEnhanceCreate

功能描述

图像增强实例初始化

需引入AIKit，且在>=1.4.3版本才可使用

使用

Ray 中使用

import { ai } from '@ray-js/ray'
const { imageEnhanceCreate } = ai
imageEnhanceCreate({ ... })

原生小程序中使用

const { imageEnhanceCreate } = ty.ai
imageEnhanceCreate({ ... })

请求参数

Object object

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

返回结果

success

void

fail

属性	类型	说明
errorMsg	string	插件错误信息
errorCode	string	错误码

8. 结束

• 恭喜你 🎉 完成了本教程的学习！
• 有任何问题可以提交工单咨询。