鸿蒙跨端智能购物清单系统：基于图像识别的多设备实时同步方案原创

进修的泡芙

发布于 2025-6-22 16:37

浏览

0收藏

鸿蒙跨端智能购物清单系统：基于图像识别的多设备实时同步方案

一、项目概述

本系统基于HarmonyOS 5的分布式能力和AI技术，实现以下核心功能：
智能识别商品：通过摄像头拍照自动识别商品并生成购物清单

实时多端同步：购物清单在手机、平板、智慧屏等多设备实时同步

协同编辑管理：家庭成员可跨设备共同编辑购物清单

二、技术架构

!https://example.com/harmonyos-shopping-list-arch.png

采用三层架构：
采集层：摄像头图像采集

AI层：商品识别与清单生成

同步层：分布式数据管理

三、核心代码实现
商品识别模块

// ProductDetector.ts
import image from ‘@ohos.multimedia.image’;
import imageClassification from ‘@ohos.ai.imageClassification’;

export class ProductDetector {
private classifier: imageClassification.ImageClassifier;

async init() {
try {
this.classifier = await imageClassification.createImageClassifier();
const config: imageClassification.Config = {
model: ‘shopping-model’,
device: ‘GPU’,
classificationThreshold: 0.7
};
await this.classifier.init(config);
console.info(‘商品识别模型初始化成功’);
catch (err) {

  console.error(初始化失败: {err.code}, {err.message});

}

async detectProducts(image: image.Image): Promise<ShoppingItem[]> {
const classificationResult = await this.classifier.classify(image);
return this.filterTopProducts(classificationResult);
private filterTopProducts(result: imageClassification.ClassificationResult): ShoppingItem[] {

// 过滤置信度高于阈值的结果并按置信度排序
return result.results
  .filter(item => item.confidence >= 0.7)
  .sort((a, b) => b.confidence - a.confidence)
  .map(item => ({
    name: item.name,
    category: this.mapCategory(item.name),
    confidence: item.confidence
  }));

private mapCategory(productName: string): string {

// 简单商品分类逻辑
const categoryMap: Record<string, string[]> = {
  'drinks': ['可乐', '果汁', '矿泉水'],
  'snacks': ['薯片', '饼干', '巧克力'],
  'dairy': ['牛奶', '奶酪', '酸奶']
};

for (const [category, products] of Object.entries(categoryMap)) {
  if (products.includes(productName)) {
    return category;

}

return 'others';

}

interface ShoppingItem {
name: string;
category: string;
confidence: number;

分布式清单管理

// ShoppingListSync.ts
import distributedData from ‘@ohos.data.distributedData’;
import deviceManager from ‘@ohos.distributedHardware.deviceManager’;

interface ShoppingList {
listId: string;
items: ShoppingItem[];
lastModified: number;
modifiedBy: string;
export class ShoppingListSync {

private kvManager: distributedData.KVManager;
private kvStore: distributedData.KVStore;
private currentDeviceId: string;

async init() {
const context = getContext(this);
this.kvManager = distributedData.createKVManager({ context });

const options = {
  createIfMissing: true,
  encrypt: true,
  autoSync: true,
  kvStoreType: distributedData.KVStoreType.SINGLE_VERSION
};

this.kvStore = await this.kvManager.getKVStore('shopping_lists', options);
this.currentDeviceId = await this.getDeviceId();
this.setupSyncListener();

private async getDeviceId(): Promise<string> {

const devices = await deviceManager.getTrustedDeviceListSync();
return devices.find(d => d.isLocalDevice)?.deviceId || 'unknown';

private setupSyncListener() {

this.kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_REMOTE, 
  (changedItems) => {
    changedItems.forEach(({ key, value }) => {
      this.handleListUpdate(key, value);
    });
  });

async createOrUpdateList(listId: string, items: ShoppingItem[]) {

const list: ShoppingList = {
  listId,
  items,
  lastModified: Date.now(),
  modifiedBy: this.currentDeviceId
};

try {
  await this.kvStore.put(listId, list);
  console.info('购物清单同步成功');

catch (err) {

  console.error(同步失败: {err.code}, {err.message});

}

async getList(listId: string): Promise<ShoppingList | undefined> {
try {
return await this.kvStore.get(listId);
catch (err) {

  console.error(获取清单失败: {err.code}, {err.message});
  return undefined;

}

private handleListUpdate(listId: string, newList: ShoppingList) {
if (newList.modifiedBy !== this.currentDeviceId) {
console.info(收到清单{listId}更新，来自设备{newList.modifiedBy});
// 触发UI更新
updateShoppingListUI(newList);
}

主页面实现（ArkUI）

// ShoppingList.ets
import { ProductDetector } from ‘./ProductDetector’;
import { ShoppingListSync } from ‘./ShoppingListSync’;

@Entry
@Component
struct ShoppingListApp {
@State currentList: ShoppingItem[] = [];
@State recognizedItems: ShoppingItem[] = [];

private productDetector = new ProductDetector();
private listSync = new ShoppingListSync();
private cameraController?: CameraController;
private readonly FAMILY_LIST_ID = ‘family_shopping_list’;

async aboutToAppear() {
await this.productDetector.init();
await this.listSync.init();
this.loadExistingList();
async loadExistingList() {

const list = await this.listSync.getList(this.FAMILY_LIST_ID);
if (list) {
  this.currentList = list.items;

}

startProductScan() {
this.cameraController = new CameraController({
onFrame: async (image: image.Image) => {
this.recognizedItems = await this.productDetector.detectProducts(image);
});

this.cameraController.start();

async addToShoppingList(item: ShoppingItem) {

const newList = [...this.currentList, item];
this.currentList = newList;
await this.listSync.createOrUpdateList(this.FAMILY_LIST_ID, newList);

build() {

Column() {
  // 商品识别区域
  RecognizedProducts({
    items: this.recognizedItems,
    onAdd: (item) => this.addToShoppingList(item)
  })
  
  // 当前购物清单
  CurrentShoppingList({
    items: this.currentList
  })
  
  // 操作按钮
  Row() {
    Button('开始扫描商品')
      .onClick(() => this.startProductScan())
    
    Button('清空清单')
      .onClick(() => {
        this.currentList = [];
        this.listSync.createOrUpdateList(this.FAMILY_LIST_ID, []);
      })

.margin(10)

}

@Component

struct RecognizedProducts {
@Prop items: ShoppingItem[];
@Param onAdd: (item: ShoppingItem) => void;

build() {
Column() {
Text(‘识别到的商品:’)
.fontSize(18)
.margin(5)

  List({ space: 10 }) {
    ForEach(this.items, (item) => {
      ListItem() {
        Row() {
          Text(item.name)
            .fontSize(16)
          
          Text(${Math.round(item.confidence * 100)}%)
            .fontSize(14)
            .fontColor('#666666')
          
          Button('+')
            .onClick(() => this.onAdd(item))

.width(‘100%’)

        .justifyContent(FlexAlign.SpaceBetween)

})

.height(‘30%’)

.border({ width: 1, color: ‘#CCCCCC’ })

.margin(10)

}

@Component
struct CurrentShoppingList {
@Prop items: ShoppingItem[];

build() {
Column() {
Text(‘当前购物清单:’)
.fontSize(18)
.margin(5)

  List({ space: 5 }) {
    ForEach(this.items, (item) => {
      ListItem() {
        Text(item.name)
          .fontSize(16)

})

.height(‘50%’)

.border({ width: 1, color: ‘#CCCCCC’ })

.margin(10)

}

四、跨设备同步关键实现
实时冲突解决机制

// 在ShoppingListSync类中添加
async mergeLists(listId: string, localList: ShoppingItem[], remoteList: ShoppingItem[]): Promise<ShoppingItem[]> {
// 基于时间戳的简单合并策略
const localTime = localList[localList.length - 1]?.timestamp || 0;
const remoteTime = remoteList[remoteList.length - 1]?.timestamp || 0;

if (localTime > remoteTime) {
// 保留本地修改
return localList;
else {

// 合并不重复的项目
const merged = [...localList];
remoteList.forEach(remoteItem => {
  if (!merged.some(localItem => localItem.name === remoteItem.name)) {
    merged.push(remoteItem);

});

return merged;

}

设备间数据同步优化

// 添加差异同步方法
async syncListChanges(listId: string, changes: ShoppingItem[]) {
const currentList = await this.getList(listId) || { items: [] };
const newItems = changes.filter(change =>
!currentList.items.some(item => item.name === change.name)
);

if (newItems.length > 0) {
const updatedList = {
…currentList,
items: […currentList.items, …newItems],
lastModified: Date.now(),
modifiedBy: this.currentDeviceId
};

await this.kvStore.put(listId, updatedList);

}

分布式设备管理增强

// 添加设备状态监控
private monitorDeviceConnection() {
deviceManager.on(‘deviceOffline’, (deviceId) => {
console.info(设备${deviceId}离线，尝试重新连接);
this.retryConnection(deviceId);
});
private async retryConnection(deviceId: string) {

let retries = 3;
while (retries > 0) {
try {
await deviceManager.connectDevice(deviceId);
break;
catch (err) {

  retries--;
  await new Promise(resolve => setTimeout(resolve, 1000));

}

五、性能优化方案
图像处理优化：

// 修改detectProducts方法
async detectProducts(image: image.Image): Promise<ShoppingItem[]> {
// 缩小图像尺寸提高处理速度
const smallImage = await image.createPixelMap({
desiredSize: {
width: 640,
height: 480
});

const classificationResult = await this.classifier.classify(smallImage);
return this.filterTopProducts(classificationResult);

数据同步节流：

// 在主页面添加同步控制
private lastSyncTime = 0;
private readonly SYNC_THROTTLE = 1000; // 1秒

async addToShoppingList(item: ShoppingItem) {
const now = Date.now();
if (now - this.lastSyncTime < this.SYNC_THROTTLE) {
this.currentList = […this.currentList, item];
return;
const newList = […this.currentList, item];

this.currentList = newList;
await this.listSync.createOrUpdateList(this.FAMILY_LIST_ID, newList);
this.lastSyncTime = now;

本地缓存策略：

// 添加清单缓存
private listCache = new Map<string, ShoppingList>();

async getCachedList(listId: string): Promise<ShoppingList | undefined> {
if (this.listCache.has(listId)) {
const cached = this.listCache.get(listId);
if (Date.now() - cached.lastModified < 60000) { // 1分钟缓存
return cached;
}

const freshList = await this.kvStore.get(listId);
if (freshList) {
this.listCache.set(listId, freshList);
return freshList;

六、应用场景扩展
智能推荐系统：

class ShoppingRecommender {
recommendRelatedItems(currentList: ShoppingItem[]): ShoppingItem[] {
// 基于当前清单推荐相关商品
}

价格比较功能：

class PriceComparator {
async comparePrices(itemName: string): Promise<PriceInfo[]> {
// 查询不同商家的价格
}

家庭成员分配：

class TaskAssigner {
assignItemsToMembers(items: ShoppingItem[], members: FamilyMember[]) {
// 分配购买任务给家庭成员
}

历史购买记录：

class PurchaseHistory {
analyzeShoppingHabits(listId: string): ShoppingHabitsReport {
// 分析购物习惯
}

本方案充分利用了HarmonyOS 5的分布式数据管理和AI能力，实现了智能化的跨设备购物清单管理。系统具有以下特点：
实时性强：毫秒级的多设备数据同步

识别准确：基于深度学习的高精度商品识别

扩展性好：可轻松集成推荐、比价等增值功能