Designing a Scalable Template Algorithm for Automated Advertising Creative Generation

Many small advertisers on the Sohu ad platform lack design resources, prompting the creation of a tool that generates creative ad images with minimal user input—just the ad title and product image.

The generation pipeline works as follows: the user submits required data, a Node.js service launches a headless Chrome instance via Puppeteer, which runs a JavaScript canvas program. The program selects the most suitable template based on the target dimensions, applies colors, backgrounds, and decorative elements, and finally renders the image on an HTML canvas. The rendered canvas is then screenshot‑captured by Puppeteer to produce the final image.

Ad image sizes are grouped into seven ratio categories (square, normal horizontal, middle horizontal, long horizontal, normal vertical, middle vertical, long vertical) using simple formulas such as Math.abs(width-height) < Math.min(width, height)/3 or width>height && width . Templates are designed for each ratio class.

Each template consists of three layers: background, canvas, and element layers. All positions and sizes are expressed as percentages of the final image width ( wrapWidth ) and height ( wrapHeight ) and use absolute positioning to ensure proportional scaling.

Template selection considers four factors: the composition of elements (e.g., 2 texts, 1 image, 1 button), element constraint rules, template style (e.g., fresh, classic), and template industry suitability. The algorithm first tries exact matches, then excludes unsuitable templates, and finally falls back to generic ones.

Element rendering is performed in three passes: (1) compute each element’s dimensions, font size, line height, etc.; (2) compute positional values (left, top) using previously calculated attributes; (3) compute additional properties such as maximum text rows, line‑height, and box model settings. Only after all calculations are complete is the actual rendering performed.

Special handling is described for text blanks (ensuring text fills its container without overflow) and ultra‑small fonts: when the required font size falls below 12 px, the system scales the entire layout, renders, then downsamples the image to the original size.

Images maintain aspect ratio by retrieving their original width ( originWidth ) and height ( originHeight ) and using these values in template calculations.

When themeMode is set to auto , the system extracts the dominant color from product images, clusters similar colors, and generates a coordinated color scheme (main, primary, secondary, and their opposite colors) for use throughout the template.

The color scheme, background selection, and decorative elements (both background and element decorations) are combined to produce a rich variety of templates. Massive template generation is achieved by mixing structural designs with different colors/backgrounds, automatically adapting a base template to the seven size ratios, and extracting reusable templates from existing ad images.