How Kuaishou’s Vision Platform Guarantees High‑Quality Animation Assets with Automated Detection

1. Introduction

Kuaishou’s Vision platform addresses animation resource delivery problems by implementing admission and egress detection mechanisms. By analyzing pain points in the existing delivery process, the platform adds static and dynamic detection services to ensure animation quality and performance, successfully preventing multiple online incidents and improving stability and efficiency.

2. Analysis and Thoughts

2.1 Animation Delivery Process Analysis

Previously, delivery relied heavily on designers recording assets in Docs and uploading attachments, with updates done manually, lacking systematic workflow and quality control. Frequent back‑and‑forth communication caused delays.

2.2 Platform Improvements

Vision introduced a resource admission and egress detection pipeline. During preview, resources that fail detection are forcibly reported. Delivery shifts from Docs‑based to a platform‑wide solution with unified detection and synchronization.

3. Specific Solution

3.1 Static Detection SDK

The platform supports various animation formats such as Lottie, APNG, WebP, video sequences, static images, and CSS. Static detection involves resource acquisition, decoding, rule setting, feature detection, and report generation.

Decoding uses different decoders per format. For Lottie, over 40 rules are evaluated, which can cause exponential load when processing many assets. The SDK caches decoded data and uses plug‑ins for efficient rule traversal.

<code>// Browser detection example
const hasAlphaChannel = (imageSrc, callback) => {
  const img = new Image();
  img.src = imageSrc;
  img.onload = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);
    const imageData = context.getImageData(0, 0, img.width, img.height).data;
    for (let i = 3; i < imageData.length; i += 4) {
      if (imageData[i] < 255) { callback(true); return; }
    }
    callback(false);
  };
  img.onerror = () => { console.error('Image load failed'); callback(false); };
};</code>

Image Efficiency Analysis

Designers often export oversized PNGs with large transparent areas, inflating memory usage. Detecting such images involves scanning pixel alpha values in the browser or using Sharp on the server for faster processing.

<code>const sharp = require('sharp');
const calculateTrimEfficiency = async (input, output, thresholdPercentage) => {
  const image = await sharp(input).metadata();
  const { info } = await sharp(input).trim().toFile(output);
  const originalArea = image.width * image.height;
  const trimmedArea = info.width * info.height;
  const efficiency = (trimmedArea / originalArea) * 100;
  console.log(`Trimmed area: ${trimmedArea}`);
  console.log(`Original area: ${originalArea}`);
  console.log(`Efficiency: ${efficiency.toFixed(2)}%`);
  const isAccept = efficiency >= thresholdPercentage;
  if (isAccept) console.log('Trimmed image meets requirements.');
  else console.log('Trimmed image does not meet requirements.');
  return isAccept;
};</code>

Similar efficiency checks apply to sequence‑frame animations (APNG, WebP) by analyzing each frame’s bounding box.

3.2 Dynamic Detection Service

After static checks, the platform runs performance tests on cloud real‑device farms, measuring CPU, memory, FPS, and temperature. Results are compared against predefined thresholds, and failing assets are blocked from release.

3.3 Detection Standards

Based on extensive practice in Kuaishou’s CNY and daily activities, a temporary detection standard was defined, covering common dynamic formats and multiple quality dimensions to evaluate compliance and efficiency.

3.4 Platform Detection Flow

Two flows exist: a regular flow where failed static checks generate warnings but do not block usage, and a strict flow where resources must be manually approved before developers can download them.

4. Implementation and Benefits

4.1 Deployment

The admission and egress detection have been integrated into the platform, providing visual reports for both stages.

4.2 Open SDK/API

The detection services are packaged as an Open SDK and API, already integrated into several core Kuaishou products.

4.3 Benefits

In Q3 2024, the detection system prevented tens of potential client crashes, recalling over ten thousand problematic assets and significantly improving overall stability.

5. Conclusion

The article details Vision’s approach to solving animation resource quality issues through systematic detection, performance testing, and open tooling, offering practical insights for developers and platform engineers.