From Wife's Gift to HDC 2026: Building an AI Bead Art App with HarmonyOS
A developer couple created 'Love Bean AI Blueprint,' a HarmonyOS app that generates bead art patterns from photos using AI, built with a Cangjie/ArkTS/C++ architecture and AI-assisted migration tools, earning a spot at HDC 2026 Star Avenue.
Origin: A Personal Gift Turned HDC 2026 Selection
The authors, a programmer and his designer wife, built the HarmonyOS app "爱豆 AI 图纸" (Love Bean AI Blueprint) to solve her difficulty finding bead art patterns for their pet. The app uses AI to generate printable bead patterns from photos. It was selected for the HDC 2026 Star Avenue, a showcase for outstanding HarmonyOS applications.
App Overview: Love Bean AI Blueprint
The app (version 1.1.0) adopts a three-language architecture: ArkTS for UI and business logic, Cangjie for image and physics algorithms, and C++ for 3D rendering and AR reconstruction. They are bridged via HarmonyOS NAPI and Cangjie's ark_interop. The goal is to let every idea become a tangible handmade piece, with future plans to add origami and other crafts.
Pixel Workshop: AI-Driven End-to-End Pattern Generation
The pipeline transforms a user photo into an executable bead pattern:
Upload photo → invoke the Xiaoyi intelligent agent "小维像素化" ( @kit.AgentFrameworkKit) to convert the photo into pixel art style via natural language.
Professional editor for subject extraction, pixel parsing, and size compression.
Generate printable pattern based on bead board dimensions and color parameters.
Subject extraction integrates Huawei's Visual Subject Segmentation service ( @hms.ai.vision.subjectSegmentation). Core algorithms (pixel parsing, palette mapping, image compression) are implemented in Cangjie, exposed as a dynamic library via ark_interop with both synchronous and spawn asynchronous modes. Cangjie's native performance delivers near-C++ execution efficiency on mobile with safer memory management.
Creation Hub: Professional Editor Matrix Beyond Bead Art
The app includes a full editing toolkit:
Pattern reversal : converts existing bead patterns back into editable pixel art.
Professional image editor : built on RenderNode + NodeController custom drawing pipeline for high-frame-rate pixel-level rendering.
Desktop-grade tools on mobile : Magic Wand (Cangjie tolerance flood-fill + connected-component algorithm), Paint Bucket (TaskPool multi-threaded concurrency).
3D step-by-step preview : uses @kit.ArkGraphics3D Component3D + Scene to guide users through physical assembly, reducing errors.
Dynamic Vision: Native HarmonyOS Capabilities Reshaping Interaction
The team leveraged HarmonyOS-specific features instead of merely porting a web app:
One-stroke shaping : integrates @kit.Penkit InstantShapeGenerator to smooth shaky finger input into straight lines.
Smart grip awareness : parameter controls automatically reposition for left/right-handed grip.
Tap-to-share & AirDrop : via @kit.ShareKit harmonyShare for near-field sharing. Sharing is treated as part of the creation workflow, not an afterthought.
Voxel Workshop: From Real Objects to Handmade Works
The new voxel branch explores AR spatial reconstruction for crafts:
C++ layer builds a 3D rendering pipeline on OpenGL ES 3.0, integrating Poisson Surface Reconstruction and Marching Cubes algorithms.
NAPI exposes AR capabilities to ArkTS for real-object 3D scanning and voxelization — users scan a small object to generate a layer-by-layer voxel pattern.
Introduced bgfx4cj (a Cangjie port of the cross-platform rendering library bgfx) to prepare for migrating the 3D pipeline to Cangjie.
Development Phases
Phase 1: AI-Accelerated Web-to-HarmonyOS Migration
The project started as a web app. Browser memory/performance limits caused rendering failures for complex patterns. HarmonyOS native processing, cross-thread parallelism, and algorithmic optimizations raised the ceiling. Using AI tools — CangjieSkills , ArkTS Syntax Assistant , HarmonyOS Agent Skills — they migrated HTML/CSS/JS to ArkTS and Cangjie rapidly. These tools form an AI-driven migration toolchain: understand web UI/logic, retrieve docs, learn Cangjie/ArkTS on the fly, generate native code, compile and debug.
Phase 2: Months of Polishing from "Runnable" to "Usable"
Post-migration, months were spent on feature additions and HarmonyOS feature adaptation. Architecture decision: Cangjie handles compute-intensive image processing (auto cutout, magic wand, physics analysis, pixelization, pattern reversal, color mapping) using user-space threads for high concurrency; C++ handles deep 3D algorithms (image depth processing, mesh reconstruction, model optimization, semantic dense reconstruction); ArkTS handles UI/UX and calls Cangjie/C++ via NAPI. DevEco Testing quickly identified performance bottlenecks; moving heavy pixel logic to Cangjie solved large-image crashes and freezes.
Phase 3: Voxel Art — New Chapter for the Voxel Branch
Version 1.1.0 perfected 2D design; the voxel branch tackles what 2D cannot. Voxels are 3D pixels — scanning real objects into 3D models, then converting to printable, foldable paper patterns. The full pipeline is operational: AR engine scans object → point cloud → triangle mesh → voxel grid → unfolded paper patterns. Example: scan a cup, get a printable paper model in minutes.
Summary: From One Bead to a Paper Model
Love Bean AI Blueprint started with bead art but aims to expand to origami, paper cutting, and more. Short term: refine AI workflow and pattern plaza. Long term: make it easier for users to turn ideas into physical works. The journey — web code → HarmonyOS app, AI-assisted migration → voxel exploration — shows how a small team can ship a practical product using AI and the HarmonyOS ecosystem. In the AI era, feasible ideas can be landed quickly; the authors invite others to team up with AI and join the HarmonyOS ecosystem.
Links to the AI tools used:
Cangjie Skills : https://gitcode.com/Cangjie-SIG/CangjieSkills ArkTS Syntax Assistant : https://github.com/SummerKaze/skill-arkts-syntax-assistant HarmonyOS Agent Skills :
https://gitcode.com/HarmonyOS_Skills/harmonyos-agent-skillsSigned-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
HarmonyOS Developer Technology
HarmonyOS developers provide key technology analysis, version updates, Codelabs practice, and event information for HarmonyOS. Welcome developers to join the HarmonyOS ecosystem and create infinite possibilities together!
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
