PaperlayerView exact revision on arXiv

Source-linked AI summary

CommerceVibe: Learning to Design E-Commerce Creatives as Executable Visual Code via Dual-Feedback Reinforcement Learning

Yajiao Xu, Jin Zhang, Jiangbo Ai, Tao Jiang, Mo Xu, Lina Huang, Chengfu Huo

arXiv:2608.27893v1cs.CV

TL;DR

CommerceVibe addresses the difficulty of producing accurate, editable, and verifiable e-commerce creatives from flattened diffusion outputs. It synthesizes executable HTML/CSS and optimizes it with rule-based and VLM-based feedback; on a 1,300-case benchmark, the optimized model reaches 94.0 versus 87.3 for SFT-only, with expert evaluation providing further support.

  • Problem

    Existing diffusion-generated creatives can contain incorrect text or product details and are flattened raster images, making accurate deployment, editing, reuse, and verifiable constraint training difficult.

  • Method

    CommerceVibe formulates e-commerce creative generation as conditional HTML/CSS program synthesis and applies dual-feedback reinforcement learning using rule-based checks and VLM preference feedback.

  • Results

    94.0/100 weighted score versus 87.3 for the SFT-only variant on a 1,300-case benchmark, with CommerceVibe also outperforming external models and receiving independent expert validation.

  • Takeaways & Limitations

    CommerceVibe supports controllable, editable, reusable, and scalable production of e-commerce creatives while satisfying design requirements and maintaining visual quality.

  • Takeaways & Limitations

    The reward path selects rule settings solely by input product-image count, leaving request and product information as conditioning inputs rather than profile selectors.

Abstract

from arXiv · show

High-quality e-commerce creatives are essential for presenting products and conveying marketing messages. Recent diffusion models enable scalable creative generation and produce visually compelling images, but their flattened raster outputs often contain distorted text and inconsistent product details, requiring refinement before deployment. Moreover, without explicit structure, the resulting creatives are difficult to edit and reuse, while complex design requirements remain challenging to encode as verifiable training signals. To address these challenges, we present CommerceVibe, which represents creatives as executable visual code and formulates generation as conditional HTML/CSS program synthesis. Given product images, design requirements, and product information, it produces renderable, editable, and reusable creatives. We further introduce dual-feedback reinforcement learning, in which rule-based feedback evaluates rendered programs for text readability, product visibility, and layout validity, while visual feedback from a vision-language model (VLM) assesses rendered creatives against input specifications across six perceptual and commercial dimensions. Together, these complementary feedback signals improve both constraint satisfaction and perception-dependent quality. We perform supervised fine-tuning (SFT) of Qwen3.5-9B on over 28,000 e-commerce examples, followed by dual-feedback reinforcement learning. On a 1,300-case benchmark, the optimized CommerceVibe model achieves a weighted score of 94.0/100, compared with 87.3 for the SFT-only variant, and outperforms strong external models. Blind evaluations by five e-commerce design experts further validate these improvements. CommerceVibe supports controllable, editable, and scalable e-commerce creative production.

Introduction

CommerceVibe addresses the difficulty of producing reliable, controllable, editable e-commerce creatives by synthesizing executable HTML/CSS from product assets and requirements. Dual-feedback reinforcement learning combines structural checks with learned visual preferences, and benchmark results support its effectiveness.

  • Motivation: Manual production is difficult at catalog and campaign scale, while fixed templates constrain design diversity and diffusion outputs can distort text or product details.Raster outputs also flatten products, text, and backgrounds, making later edits and reuse costly.
  • Training: 28,568 quality-controlled examples are used to fine-tune Qwen3.5-9B before GRPO optimization of compliance and visual quality.The resulting policy generates a complete HTML/CSS creative in one decoding pass.
  • Evaluation: A 1,300-case benchmark compares CommerceVibe with GPT-5.5, Claude Opus 4.8, and Gemini 3.5 Flash under single-pass generation.CommerceVibe achieves the highest weighted score and receives independent support from five e-commerce design experts.
  • Approach: CommerceVibe formulates e-commerce creative generation as conditional HTML/CSS program synthesis, producing editable and executable outputs that reuse supplied assets and represent text natively.Executable structure also exposes visible content, image references, positions, and boundaries for verification.
  • Approach: Dual-feedback reinforcement learning combines rule-based checks for Text, Product, and Layout errors with VLM preference feedback for visual and commercial quality.The complementary signals target explicit structural constraints and qualities that are difficult to encode fully as rules.
  • Positioning: Prior work establishes creative generators, editable visual representations, and rendering-aware feedback, but one-shot executable HTML/CSS optimization for reference-conditioned e-commerce remains underexplored.CommerceVibe combines task-specific localized rule feedback with a fixed VLM Judge for perceptual qualities.

CommerceVibe

CommerceVibe generates complete HTML/CSS documents from normalized requests, product images, and product information, then optimizes them using rendered rule and VLM feedback. Its training and evaluation pipeline makes structural and perceptual properties available as reinforcement-learning signals.

  • HTML/CSS Creative Generation: A fixed preprocessing procedure normalizes free-form requests before the policy receives them with product images and product information.The system instruction fixes the generator role and required output structure.
  • HTML/CSS Creative Generation: The policy generates one complete HTML/CSS document in a single decoding pass, with supplied product images directly referenced rather than regenerated.The document is represented as a token sequence ending with an end-of-turn token.
  • Supervised Fine-Tuning: SFT learns to imitate reference HTML/CSS documents through target-token likelihood, but does not directly optimize rendered-creative properties.Only reference-document tokens and the end-of-turn token are supervised.
  • Rendered Feedback: During reinforcement learning, sampled candidate documents are rendered once in a browser-based procedure, producing DOM data, element boxes, visible text, image references, and screenshots.These rendered outputs support computation of the two feedback signals.
  • Rule-Based Feedback: Rule-based feedback measures Text, Product, and Layout errors, including readability, product visibility, overflow, overlap, occlusion, and out-of-bounds elements.Checks and thresholds are selected according to whether the input is Single or Multi image.
  • VLM Preference Feedback: A fixed Qwen3-VL-Plus Judge scores rendered creatives across six visual and commercial dimensions, aggregating ratings into a normalized preference reward.The Judge receives the screenshot, supplied product images, normalized request, and product information.
  • GRPO Optimization: Three reinforcement-learning variants differ only in using rule-based feedback, VLM preference feedback, or their combination, with rewards standardized into within-group relative advantages.The policy uses the clipped GRPO objective with reference-policy KL regularization.

Experiments

Experiments evaluate CommerceVibe on a 1,300-case benchmark using automatic rule/preference scores, external-model comparisons, expert ratings, qualitative examples, and rule-family ablations. The model achieves the strongest overall automatic and expert performance, while complementary feedback yields larger gains for Multi-image cases.

  • Overall performance: 94.0 overall score is achieved by Rule+Preference RL, exceeding 87.3 after SFT and 70.1 for the base policy.The overall score combines rule and preference components on a 0–100 scale.
  • External comparison: CommerceVibe achieves the strongest results across all three rule families and five of six Judge dimensions, while GPT-5.5 leads in copy faithfulness.Claude Opus 4.8 performs relatively well in Product and Layout, while Gemini 3.5 Flash has comparable rule compliance but lower preference quality.
  • Complementary feedback: 4.8 points on Multi-image cases and 1.2 points on Single-image cases are gained over the stronger single-feedback variant in each setting.The larger Multi-image gain indicates stronger complementarity between the two feedback sources within this benchmark.
  • Expert validation: 90.0 expert score is achieved by CommerceVibe, which ranks first on both Single-image and Multi-image subsets.Five independent e-commerce design experts produced the blind evaluation, with ICC(A, 5) = 0.811 indicating high inter-rater agreement.
  • Qualitative validation: CommerceVibe more consistently preserves required information, presents supplied products clearly, and maintains coherent layouts across qualitative cases.The qualitative comparison audits two Single-image and two Multi-image cases using localized Text, Product, Layout, and VLM feedback overlays.
  • Rule-family ablations: Removing Layout rules causes the largest within-family degradation, while removing Product rules produces a smaller targeted decrease in Product score.The ablation results highlight explicit geometric constraints and show that SFT already establishes strong product-presentation capability.

Conclusion

CommerceVibe generates executable HTML/CSS creatives and optimizes them with dual-feedback reinforcement learning. On a 1,300-case benchmark, it outperforms external models while supporting scalable production, direct editing, and structural verification.

  • CommerceVibe produces executable HTML/CSS documents that enable scalable production, direct editing, and structural verification.
  • Dual-feedback reinforcement learning combines rule-based feedback for Text, Product, and Layout with VLM-based preference feedback.
  • On a 1,300-case benchmark, CommerceVibe outperforms external models and generates creatives that satisfy design requirements while maintaining high visual quality.

Supplementary Material

The supplementary material describes CommerceVibe’s data construction, input normalization, generator constraints, and independently constructed benchmark. It also specifies dataset sizes and the single- versus multi-image distinction used throughout training and evaluation.

  • Data construction: Request normalization converts free-form design requests into structured requirements without adding product facts, and remains fixed across SFT, RL, and evaluation.The procedure is shared by all CommerceVibe variants.
  • Data construction: 28,568 quality-controlled examples form the training split, including 23,726 Single-image and 4,842 Multi-image cases.The validation split contains 3,174 examples, yielding an approximately 9:1 train-to-validation ratio.
  • Generator specification: CommerceVibe conditions generation on product images, normalized requests, product information, and a fixed system instruction, producing one complete HTML/CSS document.Single means |I| = 1, whereas Multi means |I| ≥2, based on input product-image count rather than generated image elements.
  • Evaluation data: The independently constructed benchmark contains 1,300 cases, with 1,140 Single cases and 160 Multi cases, and no product overlap with SFT or RL data.The Multi subset spans cases with 2 through 8 input images.

Partially Conditional Rule Verifier

The verifier is partially conditional: input-image cardinality selects a Single or Multi profile, while rendered-state applicability determines which dimensions contribute. It combines rule families and profile-specific thresholds to evaluate text, products, layout, and visual composition.

  • Rule families: The verifier organizes measurements into Text, Product, and Layout families, with profile-dependent dimensions, weights, critical dimensions, thresholds, and detector settings.The selected profile does not apply one fixed rule vector to every example.
  • Profile routing: The reward path routes cases only by the number of input product images, while request and product information remain conditioning inputs rather than rule-setting selectors.Single and Multi therefore receive different profile configurations based on input cardinality.
  • Profile routing: Multi assigns image occlusion weight 4 directly, whereas Single activates occlusion conditionally and transfers weight from other dimensions while preserving the profile total.Bottom blank is likewise weighted only when applicable.
  • Profile-specific thresholds: Profile-specific settings distinguish Single and Multi evaluation for font size, prominence, visual balance, crop, and bottom-blank thresholds.For example, Multi uses ink-level text geometry, while Single uses text boxes and removes certain decorative backing panels.
  • Rendered-state conditioning: Inapplicable image-dependent detectors are removed from aggregation, and the remaining applicable weights are renormalized to the selected profile’s continuous total.Rendered state determines whether dimensions such as occlusion or bottom blank contribute scores and weights.

Reward Construction and Gates

Reward construction begins with profile- and state-specific weighted rule scores, then applies additive critical-violation penalties and final reward mapping. Malformed outputs, missing visible content, and insufficient product coverage can receive fixed negative rewards before or after rendering.

  • Continuous scoring: The nominal continuous rule score averages applicable dimension scores using profile- and rendered-state-specific weights after renormalization.Dimensions are selected through the routed profile and rendered-state applicability.
  • Ablations and profiles: Disabled dimensions are excluded from both weighted scores and critical-violation penalties, while profile tables define the Single- and Multi-specific rule weights and thresholds.The ablation preserves the original total weight over enabled dimensions.
  • Critical penalties: Critical dimensions are zeroed in weighted aggregation and incur additional additive penalties based on violation counts, without decay or an upper cap.Two text-overflow violations contribute 6 points and one element-bounds violation contributes 3 points, totaling 9 points.
  • Specialized penalties: Image occlusion uses a separate nonlinear penalty based on overlap ratio and the number of violating image pairs.Its penalty is distinct from the additive critical-dimension penalty path.
  • Gates and safeguards: Malformed outputs receive fixed rewards ranging from −1.0 to −0.5, while empty bodies, absent visible images, or required missing product URLs can receive −1.0 after rendering.Visible body text with fewer than 10 characters receives a soft penalty of 25, allowing scoring to continue.

Preference Judge and Combined Reward

The preference Judge scores rendered e-commerce creatives across six visual and commercial dimensions, while combined reinforcement learning blends rule-based and preference rewards after validity and content gates.

  • Preference Judge: The fixed Qwen3-VL-Plus Judge evaluates rendered screenshots against normalized requests, product information, and reference images without receiving rule scores or issues.The Judge remains unchanged during both SFT and reinforcement learning.
  • Preference Judge: The Judge rates visual appeal, product presentation, perceptual readability, marketing relevance, commercial usability, and copy faithfulness on integer scores from 1 to 5.Copy faithfulness receives weight 10, while the other five dimensions receive weight 8.
  • Combined Reward: After shared validity and content gates, Rule-RLVR uses Rrule, Preference-RL uses Rpref, and combined training uses 2Rrule + 1 2Rpref.The combined objective incorporates both rule-based and preference feedback.
  • Preference Judge: The scoring instruction requires one integer score and concise reason for each of six dimensions, based only on the supplied evidence.The evaluator is instructed not to add dimensions or return an overall score.

3. Perceptual readability (perceptual_

Perceptual readability is judged through hierarchy, immediate access to core information, typography, contrast, and orderly image arrangement.

  • 3. Perceptual readability: A top readability rating requires clear hierarchy, an obvious reading path, immediately readable core information, balanced composition, and orderly multi-image arrangement.Lower ratings correspond to increasing hierarchy, type-size, contrast, overlap, overflow, occlusion, or arrangement problems.
  • 3. Perceptual readability: The evaluator returns no Markdown or explanatory text outside the required JSON object.

Training and Evaluation Implementation

The system uses fixed HTML/CSS generation and shared inference settings across policy variants and external models, with rendered outputs supporting reward and evaluation diagnostics.

  • Training settings: SFT updates the full language model, whereas all reinforcement-learning variants use LoRA rank 8 with a frozen vision encoder.The implementation also uses BF16, gradient checkpointing, and DeepSpeed ZeRO-2.
  • Training settings: All reinforcement-learning variants use three independent runs with seeds 42, 25, and 999 under GRPO training.The runs use MS-SWIFT 4.3.0, cosine scheduling, KL coefficient 0.001, and vLLM-accelerated rollouts.
  • Inference settings: Benchmark inference uses the unchanged training prompt, deterministic decoding without temperature or top-p sampling, and a maximum of 8,192 output tokens.These settings are shared by SFT and all reinforcement-learning variants.
  • External-model evaluation: GPT-5.5, Claude Opus 4.8, and Gemini 3.5 Flash are evaluated on all 1,300 benchmark cases with the same normalized inputs and generator instruction.Each external model uses its own model identifier and request header.
  • External-model evaluation: Invalid external-model responses receive at most two retries, without iterative correction or candidate reranking.Images are supplied as base64 data URLs with a maximum pixel count of 100,000.

Expanded Automatic Results

Expanded results report rule and preference breakdowns separately while documenting training diagnostics for the three main reinforcement-learning variants.

  • Expanded Automatic Results: Rule-family scores are provided in Table S7 using the pure-weighted evaluation view.
  • Expanded Automatic Results: Figures S3 and S4 provide fine-grained detector and Judge measurements, separating Single and Multi profiles because detector applicability varies.The VLM breakdown reports the unweighted mean of the original 1–5 ratings across six Judge dimensions.
  • Expanded Automatic Results: Figure S5 visualizes paired changes from the main ablation table, where positive off-family changes reflect redistribution among jointly optimized dimensions.
  • Expanded Automatic Results: Figure S6 reports seed-42 training rewards for three ablation policies, with paired held-out scores provided in the main-paper ablation table.
  • RL diagnostics: Preference-RL has the lowest clipping ratio, while Rule+Preference RL has the largest but still small KL trend.Earlier larger-learning-rate or stronger-KL trials caused more reward hacking and degraded instruction following, suggesting partial forgetting.

Expert Evaluation

The expert evaluation compares anonymized, fixed renders from eight methods on the 1,300-case benchmark using five independent e-commerce design experts. It reports weighted expert scores alongside rule-family, detector-level, and VLM-dimension evaluations, with bootstrap uncertainty and paired statistical comparisons.

  • Evaluation protocol: Five experts rated anonymized fixed renders presented in random order, with method identities and automatic scores withheld.The protocol used one fixed render per method for each case and no candidate selection or reranking.
  • Ratings and aggregation: Expert ratings covered rule-aligned defects and six preference dimensions, using five-point Likert anchors and profile-conditioned active dimensions.Raw ratings were mapped to [0, 1], combined through equally weighted rule-aligned and preference branches, and rescaled to Sexpert ∈[0, 100].
  • Statistical analysis: 0.811 is the reported ICC(A, 5) for inter-rater agreement across the five experts.The statistic uses a two-way random-effects, absolute-agreement, average-measures formulation.
  • Statistical analysis: ρ = 0.612 links automatic and expert scores at the case level, with a 95% confidence interval of [0.562, 0.657].The association uses a 10,000-replicate case-cluster bootstrap while retaining all eight methods for each resampled case.
Loading 2608.27893v1…