E-commerce landing page intelligent generation method and system
By acquiring multimodal data of target products, constructing a directed graph structure, and using a cluster search algorithm to generate e-commerce landing pages, the problem of low generation efficiency and mismatch between visual style and semantic logic in existing technologies is solved, achieving efficient and high-quality intelligent generation.
Patent Information
- Application Number
- CN202610184931.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-02-09
- Publication Date
- 2026-05-05
AI Technical Summary
Existing methods for generating e-commerce landing pages suffer from low generation efficiency, mismatch between visual style and semantic logic, and the inability of the generated pages to achieve global optimization.
By acquiring multimodal data of the target product, feature extraction is performed, a directed graph structure design space is constructed, and the optimal path is found under the guidance of visual and semantic feature matching degree using the bundle search algorithm to generate the target e-commerce landing page.
It automates the acquisition of product characteristics, breaks the rigid pattern of fixed templates, and generates high-quality landing pages that are highly consistent with product characteristics, significantly improving generation efficiency and quality.
Smart Images

Figure CN121979526A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of data processing. More specifically, this invention relates to a method and system for intelligently generating e-commerce landing pages. Background Technology
[0002] With the booming development of mobile internet and e-commerce, e-commerce landing pages have become the core carrier connecting advertising traffic and product conversion. In large-scale e-commerce marketing campaigns, facing a massive number of products, how to quickly generate high-quality landing pages has become an urgent problem to be solved.
[0003] Existing methods for generating e-commerce landing pages mainly fall into two categories: manual design and development, and template-based automated generation. While manual methods offer high flexibility, they suffer from low productivity and cannot meet the demands of high-concurrency marketing. Therefore, template-based automated generation systems have become the mainstream. These systems typically predefine several fixed page templates and use "slot filling" technology to populate product information into these templates.
[0004] However, this existing technology still has the following technical limitations in practical applications: First, the data preparation phase relies heavily on manual intervention, making the process tedious and prone to errors. Although template generation itself is automated, operational staff typically still need to manually prepare materials before generation. Operators must download images, copy text descriptions, and enter attribute parameters one by one from the e-commerce backend or product detail pages, and then upload them to the corresponding slots in the generation system. This data preparation process, which relies on manual input and transfer, is extremely cumbersome and time-consuming, severely hindering the scalable production efficiency of landing pages. Furthermore, manual operation inevitably introduces errors. In the high-intensity repetitive work, problems such as incorrect image pasting, price parameter input discrepancies, or omissions of key attributes are highly likely to occur, leading to inconsistencies between the information displayed on the landing page and the actual product data, resulting in user complaints or transaction disputes.
[0005] Secondly, the rigid page topology fails to adapt to the diverse multimodal characteristics of products. In existing technologies, the component arrangement order of templates (i.e., the page topology) is usually preset and fixed. However, different product categories exhibit vastly different multimodal data characteristics (such as the dominant color tone of images, texture complexity, and the sentiment of text). Templates with fixed structures cannot dynamically adjust the connection relationships of components based on the input product characteristics. For example, forcibly fitting highly information-dense digital products into a beauty template primarily featuring large images will result in incomplete information display or a disorganized layout, causing a mismatch between visual style and semantic logic.
[0006] Secondly, there is a lack of a global optimization mechanism based on feature matching. Existing generation methods typically employ random selection or local splicing based on simple rules, severing the overall correlation between page components. The system cannot quantitatively evaluate which combination scheme best matches the characteristics of the current product within a vast design combination space, often generating only "usable" but not "optimal" solutions, resulting in mediocre performance in terms of final page appeal and conversion guidance.
[0007] In summary, existing e-commerce landing page generation methods suffer from low generation efficiency, mismatch between visual style and semantic logic, and the inability of the generated pages to achieve global optimization in both visual style and semantic logic. Summary of the Invention
[0008] To address the technical problems of low efficiency in generating e-commerce landing pages, mismatch between visual style and semantic logic, and the inability of generated pages to achieve global optimization in terms of visual style and semantic logic in existing e-commerce landing page generation methods, this invention provides solutions in the following aspects.
[0009] In a first aspect, the present invention provides a method for intelligently generating e-commerce landing pages, comprising: Obtain the Uniform Resource Locator (URL) of the target product, and collect multimodal data of the target product based on the URL. The multimodal data includes a list of product images, text descriptions, and attribute parameters. Feature extraction is performed on the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors; Construct a design space for the landing page generation and model the design space as a directed graph structure, where nodes represent page component modules and edges represent the connection relationships between adjacent component modules; A beam search algorithm is used to perform path search in the directed graph structure to obtain the optimal design scheme, and a target e-commerce landing page is generated based on the optimal design scheme. The path search includes: Initialize the candidate path set, expand the next possible page component module for the current candidate path in each iteration, calculate the matching degree between the visual and semantic features of the expanded path and the structured style feature data to obtain the score of the expanded path. The path score is positively correlated with the matching degree, and retain the K paths with the highest scores as the updated candidate path set until the preset depth is reached. The path with the highest score in the updated candidate path set is selected, and the optimal design scheme is parsed based on the path with the highest score. The optimal design scheme includes a sequence of page component modules arranged in order.
[0010] Preferably, the step of extracting features from the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors specifically includes: extracting the main image from the product image list, performing cluster analysis on the main image in a perceptually uniform color space using image processing algorithms, extracting the distribution of the main color and auxiliary color, and forming color features; The product image list is input into a pre-trained visual analysis model to identify the texture and material features and scene type labels of the images, forming high-level visual features; the color features are combined with the high-level visual features to form the visual feature vector. The text description and attribute parameters are input into a natural language processing model to extract function words and attribute words to obtain a candidate word set. The words in the candidate word set are prioritized and sorted in conjunction with historical click conversion data to construct the semantic feature vector. The visual feature vector and the semantic feature vector are combined to form the structured style feature data in JSON format.
[0011] Preferably, the image processing algorithm employs the K-means clustering algorithm.
[0012] Preferably, the score calculation expression for the expanded path is: ; In the formula, This is the estimated conversion rate output by a conversion rate prediction model trained based on historical data. Visual and semantic features representing the current path Structured style feature data of the target product Cosine similarity between them This metric represents the difference between the current path and the historical success case database. This represents a readability assessment metric based on visual saliency maps. , , and These are the corresponding weighting coefficients.
[0013] Preferably, the edge weights in the directed graph structure are derived statistically from historical transformation data, and the step of performing path search in the directed graph structure using a bundle search algorithm further includes: Calculate the similarity between the longest common subsequence of the current candidate path and the ideal narrative sequence, and use it as a narrative coherence score; Define the information density value of each page component module and calculate the density change rate between adjacent page component modules. When the density change rate is within a preset reward range, increase the path score. The narrative coherence score and the density change rate-based score are included in the path score.
[0014] Preferably, generating the target e-commerce landing page based on the optimal design scheme specifically includes: A large language model is used to generate multiple candidate code implementations for each page component module in the optimal design scheme; the candidate code implementations include Hypertext Markup Language code and Cascading Style Sheets code. Static analysis is performed on the multiple candidate code implementations to calculate cyclomatic complexity and readability metrics, and code compliance is checked. The code snippet with the highest overall performance among the multiple candidate code implementations is selected and combined. The comprehensive index of candidate code is calculated based on the normalized values of cyclomatic complexity, readability, and code standardization. The comprehensive index is positively correlated with the normalized values of readability and code standardization, and negatively correlated with the normalized value of cyclomatic complexity. The code snippet with the highest overall performance among the multiple candidate code implementations is selected and combined. The abstract syntax tree tool is used to analyze and rewrite the combined code, unify variable naming and merge duplicate styles to generate a landing page code package.
[0015] Preferably, the method further includes performance optimization of the landing page code package, including: The Hypertext Markup Language code is analyzed for document structure, the key Cascading Style Sheet code required for the first screen rendering is extracted and inlined into the document header, and the script code not in the first screen is marked as lazy loading; Iterate through the image resources in the code package, convert the images located in the first screen area to WebP format and add a preload tag, convert the images located in the non-first screen area to AVIF format and add a lazy loading attribute, and generate a responsive image set adapted to different screen resolutions; Dependency analysis is performed on the script code in the code package, unreferenced code is removed using the tree-shaking optimization algorithm, the scripts are packaged into code blocks that are loaded on demand, and the remaining code is compressed and obfuscated. Calculate the content hash value of the static resource files in the code package and rename the files according to the content hash value.
[0016] Preferably, after generating the target e-commerce landing page based on the optimal design scheme, the method further includes: The landing page code package is rendered using a browser environment to obtain a visual page; The document object model structure and visual layout of the visualized page are analyzed using an artificial intelligence model to plan a sequence of test actions to simulate user behavior; The test action sequence is executed on the visualization page. The test action sequence includes clicking, scrolling, and input commands. Interaction response data and runtime error logs are collected during the execution process. Capture a rendered screenshot of the visualization page and extract the structured visual specification data defined in the optimal design scheme. The structured visual specification data includes at least color codes, module layout coordinates, and visual hierarchy definitions. The rendered screenshot and the structured visual specification data are input into a pre-trained visual analysis model for consistency comparison. If the consistency score obtained from the comparison is lower than a preset threshold, a test report containing annotations of the problem areas is generated.
[0017] Preferably, the method further includes a cross-device adaptive stitching step, comprising: Identify the device type of the target publishing terminal, including personal computer, mobile device, and tablet; If the device type is a personal computer, then the beam search algorithm adopts a framework constraint of horizontal comparison and multi-column layout. If the device type is a mobile device, then the cluster search algorithm adopts a framework constraint of vertical story flow and single column layout, and splits or merges some page component modules. Ensure that the generated results from different device types maintain consistency in color, font, and brand elements.
[0018] In a second aspect, the present invention provides an intelligent e-commerce landing page generation system, including a processor and a memory, wherein the memory stores computer program instructions, and when the computer program instructions are executed by the processor, the intelligent e-commerce landing page generation method of the present invention is implemented.
[0019] The beneficial effects of this invention are as follows: By acquiring the Uniform Resource Locator (URL) of the target product and collecting multimodal data, the core features of the product can be automatically obtained from the source, avoiding the tediousness and errors of manual data entry. By constructing a directed graph structure for the landing page design space and modeling the generation of the design scheme as a path search problem in the graph structure, the optimal path is found using the Beam Search algorithm guided by visual and semantic feature matching. This method breaks away from the rigid mode of traditional fixed template filling and achieves... Intelligent generation where "content determines form" This ensures that the generated landing pages are highly consistent with the product characteristics in terms of visual style and semantic logic. At the same time, through path search based on matching degree, it can quickly locate the design scheme with the best estimated effect from a massive number of design combinations, which significantly improves the efficiency and quality of landing page generation. Attached Figure Description
[0020] Figure 1 This is a schematic flowchart illustrating an e-commerce landing page intelligent generation method according to an embodiment of the present invention; Figure 2 This is a schematic diagram illustrating the structure of an e-commerce landing page intelligent generation system according to an embodiment of the present invention. Detailed Implementation
[0021] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0022] The specific embodiments of the present invention will now be described in detail with reference to the accompanying drawings.
[0023] Example of an intelligent e-commerce landing page generation method: like Figure 1 As shown, the intelligent e-commerce landing page generation method of the present invention includes: S101. Collect multimodal data of the target product, specifically: obtain the Uniform Resource Locator (URL) of the target product, and collect multimodal data of the target product based on the URL, wherein the multimodal data includes a list of product images, text descriptions, and attribute parameters; In this embodiment, collecting multimodal data of the target product based on the Uniform Resource Locator includes: (1) URL feature parsing and platform rule matching.
[0024] The system first receives the Uniform Resource Locator (URL) of the target product, then uses regular expressions to parse the URL and extract its domain features. Next, it matches the extracted domain features against a pre-stored "platform-resolution rule mapping table." This mapping table stores the correspondence between different e-commerce platforms (such as Taobao, JD.com, and Amazon) and specific platform adapters. Through this matching step, the system determines the target e-commerce platform type of the product and retrieves the corresponding platform adapter accordingly.
[0025] (2) Data collection task packaging and distribution.
[0026] After determining the target e-commerce platform type and its corresponding platform adapter, the system encapsulates the target URL and the request strategy defined in the platform adapter (including User-Agent configuration, Cookie pool strategy, request frequency limits, etc.) into a standardized data collection task. This task is then pushed to a distributed message queue (such as Kafka or a Redis List). Multiple crawler work units deployed on distributed network nodes monitor this message queue in real time. Once a new task is detected, an idle crawler work unit actively retrieves and processes it.
[0027] (3) Page rendering and source code acquisition.
[0028] After receiving a data collection task, the crawler unit initiates a network request to the target URL according to the request strategy encapsulated in the task. During the request process, the crawler unit determines whether the target page depends on client-side rendering based on the platform adapter configuration: if it is a static page, it directly obtains the HTML source code of the server response; if it is a dynamically loaded page, it launches a headless browser environment to load the URL, simulates user browsing behavior (such as scrolling the page to trigger lazy loading), and waits for the page's document object model (DOM) tree to be fully constructed and asynchronous data (such as dynamic prices and high-resolution images) to be loaded, thereby obtaining the complete front-end source code of the page.
[0029] (4) Multimodal extraction based on adaptation rules.
[0030] After obtaining the front-end source code of the page, the system calls the predefined DOM parsing logic (such as specific XPath paths or CSS selectors) in the platform adapter determined in step (1) to parse the source code in parallel and extract visual data, semantic data and attribute data.
[0031] The method for extracting visual data is as follows: locate the main image container and the detail image container on the page, extract the src attribute value of each image node, complete the links, and generate a list of product images; The method for extracting semantic data is as follows: locate the title tag, the selling point description area and the user review module, extract the plain text content and remove HTML tag noise to generate text description; The method for extracting attribute data is as follows: locate the specification parameter table or the attribute key-value pair list, parse and map it into a standardized key-value pair structure, and generate attribute parameters.
[0032] S102. Perform feature extraction on the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors; S103. Construct the design space for landing page generation, specifically: construct the design space for landing page generation, and model the design space as a directed graph structure, where nodes represent page component modules and edges represent the connection relationship between adjacent component modules; In this embodiment, the page component module includes a Banner component, a product display component, a selling point area component, an activity area component, a social verification component, a parameter table component, and a CTA component. The Banner component, located at the top of the page, is responsible for visual impact; a banner refers to a banner ad on the online store page and is the most direct display of the store's style. The product display component is used to display product images or videos. The selling point area component displays detailed product features and selling point text. The activity area component displays information such as promotional activities and price discounts. The social verification component displays trust endorsement information such as user reviews and ratings. The parameter table component displays the specific technical parameters or specifications of the product. The CTA component is an interactive module used to guide users to make a purchase or click.
[0033] S104. Generate the target e-commerce landing page, specifically by: using a beam search algorithm to perform path search in the directed graph structure to obtain the optimal design scheme, and generating the target e-commerce landing page based on the optimal design scheme. The path search includes: (1) Initialize the candidate path set, expand the next possible page component module for the current candidate path in each iteration, calculate the matching degree between the visual and semantic features of the expanded path and the structured style feature data to obtain the score of the expanded path. The path score is positively correlated with the matching degree, and retain the K paths with the highest scores as the updated candidate path set until the preset depth is reached. Initializing the candidate path set typically means adding the starting node to the set before the search begins. It's equivalent to telling the algorithm "where to start."
[0034] In this embodiment, the score calculation expression for the expanded path is: ; In the formula, This is the estimated conversion rate output by a conversion rate prediction model trained based on historical data. Visual and semantic features representing the current path Structured style feature data of the target product Cosine similarity between them This metric represents the difference between the current path and the historical success case database. This represents a readability assessment metric based on visual saliency maps. , , and These are the corresponding weighting coefficients.
[0035] In this embodiment, , , and The values are 40%, 30%, 20% and 10%.
[0036] This embodiment proposes a multi-objective scoring function that integrates estimated conversion rate, style similarity, novelty difference, and readability metrics. This formula considers not only business objectives (conversion rate) but also design aesthetics (similarity), resistance to aesthetic fatigue (novelty), and user experience (readability). This multi-dimensional evaluation mechanism guides the algorithm to avoid locally optimal solutions such as "high conversion rate but ugly design" or "beautiful design but low information delivery efficiency," thereby generating the landing page design scheme with the best overall performance.
[0037] (2) Select the path with the highest score in the updated candidate path set, and parse the optimal design scheme based on the path with the highest score. The optimal design scheme includes a sequence of page component modules arranged in order.
[0038] For example: Suppose the candidate path is from page component module A to page component module B to page component module C, then the page component module sequence is page component module A, page component module B, page component module C.
[0039] This embodiment's method, by acquiring the Uniform Resource Locator (URL) of the target product and collecting multimodal data, can automatically extract the core features of the product from the source, avoiding the tediousness and errors of manual data entry. By constructing a directed graph structure for the landing page generation design space and modeling the generation of design schemes as a path search problem within the graph structure, the optimal path is found using a beam search algorithm guided by visual and semantic feature matching. This method breaks away from the rigid mode of traditional fixed template filling, achieving intelligent generation where "content determines form." It ensures that the generated landing page is highly consistent with the product features in terms of visual style and semantic logic. Furthermore, through path search based on matching degree, it can quickly locate the design scheme with the best predicted effect from a massive number of design combinations, significantly improving the efficiency and quality of landing page generation.
[0040] In one embodiment, the step of extracting features from the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors specifically includes: S201. Extract the main image from the product image list, and use an image processing algorithm to perform cluster analysis on the main image in a perceptual uniform color space to extract the distribution of the main color and auxiliary color, thus forming color features. S202. Input the product image list into a pre-trained visual analysis model to identify the texture and material features and scene type labels of the images to form high-level visual features; combine the color features with the high-level visual features to form the visual feature vector. In this embodiment, the image processing algorithm may employ the K-means clustering algorithm.
[0041] The LBP model or GLCM model can be used to identify the texture and material features of goods in images. The types of texture and material features of goods in images include metal, fabric, and glass material features.
[0042] The ResNet model or the ViT model can be used to identify the scene type label of the image.
[0043] Scene type tags include scene type and atmosphere tags, where scene type includes: indoor, outdoor, nature, and urban.
[0044] S203. Input the text description and attribute parameters into the natural language processing model, extract function words and attribute words to obtain a candidate word set, and combine historical click conversion data to prioritize the words in the candidate word set and construct the semantic feature vector. In this embodiment, the natural language processing model can be either the TextRank model or the KeyBERT model.
[0045] By combining historical click-through conversion data, the words in the candidate word set are prioritized to form the semantic feature vector, including: (1) Vectorize each function word and attribute word respectively, specifically including: using a pre-trained word embedding model to map each candidate word in the candidate word set into a high-dimensional dense vector.
[0046] Word embedding models can be CLIP Text Encoder or BERT.
[0047] (2) Priority ranking based on LTR, specifically including: constructing a Learning-to-Rank (LTR) ranking model (e.g., LambdaMART or RankNet), which takes the text features of candidate words and the historical click-to-conversion data (CTR / CVR) of the product as input, and outputs the relevance scores of all candidate words or directly outputs the sorted ordered list. The system sorts all candidate words in descending order according to the output results to obtain the priority ranking results.
[0048] (3) Weight calculation and normalization based on sorting position, specifically including: using the position decay algorithm to assign importance weights to each word in the priority sorting result.
[0049] Specifically, for the word at position k in the ranking, its original weight score Calculated based on a preset attenuation function (e.g.) This ensures that the higher the ranking of a selling point, the greater its numerical weight.
[0050] Subsequently, the system normalizes the original weight scores of all candidate words to ensure that the sum of all weights is 1. The normalized weights are shown below. The calculation expression is: ; In the formula, N represents the total number of words in the priority ranking result. This represents the original weight score of the word in the i-th position in the ranking.
[0051] (4) Weighted aggregation of semantic feature vectors, specifically including: using normalized weights to perform weighted summation of the word embedding vectors of each candidate word to generate the final semantic feature vector V, the calculation expression is: .
[0052] S204. Combine the visual feature vector and the semantic feature vector to form the structured style feature data in JSON format.
[0053] By extracting refined features from both visual and semantic data, structured style feature data is constructed. Specifically, visual features are broken down into color (based on clustering) and advanced visual features (based on model-recognized textures / scenes), and semantic features are prioritized based on historical conversion data. This allows the computer to "understand" the product like a professional designer. Consequently, the generated landing pages not only harmonize with the main product image in terms of color scheme but also accurately highlight the core selling points with high conversion potential, solving the technical problems of traditional automatic generation methods that result in a cluttered feel and a lack of focus.
[0054] In one embodiment, it also includes: S301. Extract the arrangement sequence information of the page component modules contained in the optimal design scheme and the visual style parameter information in the structured style feature data, and generate the unique identifier information of the optimal design scheme based on the arrangement sequence information and the visual style parameter information. S302. Deploy the landing page code package to the online environment and collect the business performance data generated during online operation. The business performance data includes click-through rate, conversion rate, bounce rate and page dwell time. S303. Based on the unique identifier information, map the business performance data back to the path strategy that generates the optimal design scheme; S304. The business performance data is weighted and calculated to obtain the overall performance score of the optimal design scheme; S305. Perform feature importance analysis on the path strategies for different comprehensive performance scores, and identify the scoring dimensions that contribute the most to the comprehensive performance scores. S306. Using the gradient descent method, adjust the weight coefficients in the multi-objective scoring function according to the contribution. , , and The algorithm is updated and the bundle search algorithm is reused to perform path search in the directed graph structure, and the target e-commerce landing page is regenerated.
[0055] In one embodiment, the edge weights in the directed graph structure are derived based on historical transformation data statistics, and the step of performing path search in the directed graph structure using a beam search algorithm further includes: S401. Calculate the similarity between the longest common subsequence of the current candidate path and the ideal narrative sequence, and use it as a narrative coherence score. S402. Define the information density value of each page component module and calculate the density change rate between adjacent page component modules. When the density change rate is within a preset reward range, increase the path score. S403. The narrative coherence score and the score based on density change rate are included in the path score.
[0056] This embodiment introduces the Longest Common Subsequence (LCS) method to calculate narrative coherence and monitors the rate of change in information density. This technically simulates human narrative logic, ensuring that the arrangement of page components conforms to the cognitive pattern of "introduction-development-climax-transition," avoiding abrupt component splicing. Simultaneously, by controlling information density, it avoids page information overload or excessive emptiness, thereby reducing the user's cognitive load and improving page reading fluency and retention rate.
[0057] In one embodiment, generating the target e-commerce landing page based on the optimal design scheme specifically includes: S501. Using a large language model, generate multiple candidate code implementations for each page component module in the optimal design scheme; the candidate code implementations include Hypertext Markup Language code and Cascading Style Sheets code; S502. Perform static analysis on the multiple candidate code implementations, calculate the cyclomatic complexity index and readability index, and check the code standardization. S503. Calculate the comprehensive index of candidate code based on the normalized values of cyclomatic complexity index, readability index, and code standardization. The comprehensive index is positively correlated with the normalized values of readability index and code standardization, and negatively correlated with the normalized value of cyclomatic complexity index. In this embodiment, the comprehensive index calculation expression for candidate codes is: ; In the formula, A comprehensive indicator representing candidate codes. This represents the normalized value of the readability metric. Normalized values representing code compliance This represents the normalized value of the cyclomatic complexity index. , and All are weighting coefficients.
[0058] S504. Select the code segment with the highest comprehensive index from the multiple candidate code implementations and combine them; S505. Use the abstract syntax tree tool to analyze and rewrite the combined code, unify variable naming and merge duplicate styles to generate a landing page code package.
[0059] This embodiment utilizes a large language model to generate code, and combines multiple filtering mechanisms such as static analysis, cyclomatic complexity calculation, readability metrics, and code style checks. Finally, it rewrites the code using an Abstract Syntax Tree (AST). This entire process solves the problems of illusion, logical redundancy, chaotic variable naming, and difficulty in maintenance that often exist when directly generating code from a large model. It ensures that the final output code package is not only functional but also conforms to engineering standards, with high readability and low maintenance costs.
[0060] In one embodiment, the method further includes performance optimization of the landing page code package, including: S601. Perform document structure analysis on the hypertext markup language code, extract the key cascading style sheet code required for the first screen rendering and inline it into the document header, while marking the script code that is not on the first screen as lazy loading; S602. Traverse the image resources in the code package, convert the images located in the first screen area to WebP format and add a preload tag, convert the images located in the non-first screen area to AVIF format and add a lazy loading attribute, and generate a responsive image set adapted to different screen resolutions. S603. Perform dependency analysis on the script code in the code package, remove unreferenced code using the tree-shaking optimization algorithm, package the script into code blocks that are loaded on demand, and compress and obfuscate the remaining code; S604. Calculate the content hash value of the static resource file in the code package and rename the file according to the content hash value.
[0061] This embodiment significantly reduces the number of HTTP requests and the file size of the landing page by employing a series of performance optimization techniques, including inline key cascading stylesheet code, lazy loading of non-first-screen scripts, tiered image processing (WebP / AVIF and preloading / lazy loading), tree-shaking optimization, and hash-based naming caching strategies. This optimizes the critical rendering path, enabling the landing page to achieve first-screen loading within seconds and maintain a good user experience even in weak network conditions, thereby directly improving the page's SEO ranking and user conversion rate.
[0062] In one embodiment, after generating the target e-commerce landing page based on the optimal design scheme, the method further includes: S701. Render the landing page code package using the browser environment to obtain a visual page; S702. Analyze the document object model structure and visual layout of the visualized page using an artificial intelligence model, and plan a sequence of test actions to simulate user behavior; S703. Execute the test action sequence on the visualization page. The test action sequence includes clicking, scrolling, and inputting commands. Collect interactive response data and runtime error logs during the execution process. S704. Capture a rendered screenshot of the visualization page and extract the structured visual specification data defined in the optimal design scheme. The structured visual specification data includes at least color codes, module layout coordinates, and visual hierarchy definitions. S705. Input the rendered screenshot and the structured visual specification data into the pre-trained visual analysis model for consistency comparison. If the consistency score obtained from the comparison is lower than a preset threshold, generate a test report containing annotations of the problem areas.
[0063] An automated testing loop based on comparing rendered screenshots with structured visual specifications was constructed. By simulating user behavior to collect runtime data and using a visual analysis model for consistency comparison, issues such as page rendering misalignment, missing styles, or interaction failures can be automatically detected. This "what you see is what you get" automated verification mechanism replaces manual testing, significantly reducing the risk of problematic pages going live due to generation errors.
[0064] In one embodiment, the method further includes a cross-device adaptive stitching step, comprising: S801. Identify the device type of the target publishing terminal, wherein the device type includes personal computer terminal, mobile terminal and tablet terminal; S802. If the device type is a personal computer, then the beam search algorithm adopts a framework constraint of horizontal comparison and multi-column layout. S803. If the device type is a mobile terminal, then the cluster search algorithm adopts the framework constraints of vertical story flow and single column layout, and splits or merges some page component modules. The method described in this embodiment can ensure that the generated results from different device types remain consistent in terms of color, font, and brand element characteristics.
[0065] Example of an intelligent e-commerce landing page generation system: This invention also provides an intelligent e-commerce landing page generation system. For example... Figure 2 As shown, the e-commerce landing page intelligent generation system includes a processor and a memory. The memory stores computer program instructions, which, when executed by the processor, implement an e-commerce landing page intelligent generation method according to the first aspect of the present invention.
[0066] The e-commerce landing page intelligent generation system also includes other components well known to those skilled in the art, such as communication buses and communication interfaces. Their settings and functions are known in the art, and therefore will not be described in detail here.
[0067] While this specification has shown and described numerous embodiments of the invention, it will be apparent to those skilled in the art that such embodiments are provided by way of example only. Many modifications, alterations, and alternatives will occur to those skilled in the art without departing from the spirit and essence of the invention. It should be understood that various alternatives to the embodiments of the invention described herein may be employed in the practice of this invention.
Claims
1. A method for intelligently generating e-commerce landing pages, characterized in that, include: Obtain the Uniform Resource Locator (URL) of the target product, and collect multimodal data of the target product based on the URL. The multimodal data includes a list of product images, text descriptions, and attribute parameters. Feature extraction is performed on the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors; Construct a design space for the landing page generation and model the design space as a directed graph structure, where nodes represent page component modules and edges represent the connection relationships between adjacent component modules; The beam search algorithm is used to perform path search in the directed graph structure to obtain the optimal design scheme, and the target e-commerce landing page is generated based on the optimal design scheme; The path search includes: Initialize the candidate path set, expand the next possible page component module for the current candidate path in each iteration, calculate the matching degree between the visual and semantic features of the expanded path and the structured style feature data to obtain the score of the expanded path. The path score is positively correlated with the matching degree, and retain the K paths with the highest scores as the updated candidate path set until the preset depth is reached. The path with the highest score in the updated candidate path set is selected, and the optimal design scheme is parsed based on the path with the highest score. The optimal design scheme includes a sequence of page component modules arranged in order.
2. The intelligent e-commerce landing page generation method as described in claim 1, characterized in that, The step of extracting features from the multimodal data to obtain structured style feature data containing visual feature vectors and semantic feature vectors specifically includes: extracting the main image from the product image list, performing cluster analysis on the main image in a perceptually uniform color space using image processing algorithms, extracting the distribution of the main color and auxiliary color, and forming color features; The product image list is input into a pre-trained visual analysis model to identify the texture and material features and scene type labels of the images, forming high-level visual features; the color features are combined with the high-level visual features to form the visual feature vector. The text description and attribute parameters are input into a natural language processing model to extract function words and attribute words to obtain a candidate word set. The words in the candidate word set are prioritized and sorted in conjunction with historical click conversion data to construct the semantic feature vector. The visual feature vector and the semantic feature vector are combined to form the structured style feature data in JSON format.
3. The e-commerce landing page intelligent generation method as described in claim 2, characterized in that, The image processing algorithm uses the K-means clustering algorithm.
4. The e-commerce landing page intelligent generation method as described in claim 1, characterized in that, The score calculation expression for the expanded path is as follows: ; In the formula, This is the estimated conversion rate output by a conversion rate prediction model trained based on historical data. Visual and semantic features representing the current path Structured style feature data of the target product Cosine similarity between them This metric represents the difference between the current path and the historical success case database. This represents a readability assessment metric based on visual saliency maps. , , and These are the corresponding weighting coefficients.
5. The intelligent e-commerce landing page generation method as described in claim 1, characterized in that, The edge weights in the directed graph structure are derived from historical transformation data statistics. The method of using the cluster search algorithm to perform path search in the directed graph structure further includes: calculating the similarity between the longest common subsequence of the current candidate path and the ideal narrative sequence, as a narrative coherence score. Define the information density value of each page component module and calculate the density change rate between adjacent page component modules. When the density change rate is within a preset reward range, increase the path score. The narrative coherence score and the density change rate-based score are included in the path score.
6. The intelligent e-commerce landing page generation method as described in claim 1, characterized in that, The step of generating the target e-commerce landing page based on the optimal design scheme specifically includes: using a large language model to generate multiple candidate code implementations for each page component module in the optimal design scheme; the candidate code implementations include Hypertext Markup Language code and Cascading Style Sheets code; Static analysis is performed on the multiple candidate code implementations to calculate cyclomatic complexity and readability metrics, and code compliance is checked. The code snippet with the highest overall performance among the multiple candidate code implementations is selected and combined. The comprehensive index of candidate code is calculated based on the normalized values of cyclomatic complexity, readability, and code standardization. The comprehensive index is positively correlated with the normalized values of readability and code standardization, and negatively correlated with the normalized value of cyclomatic complexity. The code snippet with the highest overall performance among the multiple candidate code implementations is selected and combined. The combined code is analyzed and rewritten using an abstract syntax tree tool, variable naming is standardized and duplicate styles are merged, generating the corresponding Hypertext Markup Language (HTML) code and Cascading Style Sheets (CSS) code, which are then assembled into a landing page code package.
7. The e-commerce landing page intelligent generation method as described in claim 6, characterized in that, It also includes performance optimization of the landing page code package, including: performing document structure analysis on the hypertext markup language code, extracting the key cascading style sheet code required for the first screen rendering and inlining it into the document header, while marking the script code that is not on the first screen as lazy loading; Iterate through the image resources in the code package, convert the images located in the first screen area to WebP format and add a preload tag, convert the images located in the non-first screen area to AVIF format and add a lazy loading attribute, and generate a responsive image set adapted to different screen resolutions; Dependency analysis is performed on the script code in the code package, unreferenced code is removed using the tree-shaking optimization algorithm, the scripts are packaged into code blocks that are loaded on demand, and the remaining code is compressed and obfuscated. Calculate the content hash value of the static resource files in the code package and rename the files according to the content hash value.
8. The intelligent e-commerce landing page generation method as described in claim 1, characterized in that, After generating the target e-commerce landing page based on the optimal design scheme, the method further includes: rendering the landing page code package using a browser environment to obtain a visual page; The document object model structure and visual layout of the visualized page are analyzed using an artificial intelligence model to plan a sequence of test actions to simulate user behavior; The test action sequence is executed on the visualization page. The test action sequence includes clicking, scrolling, and input commands. Interaction response data and runtime error logs are collected during the execution process. Capture a rendered screenshot of the visualization page and extract the structured visual specification data defined in the optimal design scheme. The structured visual specification data includes at least color codes, module layout coordinates, and visual hierarchy definitions. The rendered screenshot and the structured visual specification data are input into a pre-trained visual analysis model for consistency comparison. If the consistency score obtained from the comparison is lower than a preset threshold, a test report containing annotations of the problem areas is generated.
9. The e-commerce landing page intelligent generation method according to any one of claims 1 to 8, characterized in that, The method further includes a cross-device adaptive stitching step, including: identifying the device type of the target publishing terminal, wherein the device type includes personal computer terminal, mobile terminal and tablet terminal; If the device type is a personal computer, then the beam search algorithm adopts a framework constraint of horizontal comparison and multi-column layout. If the device type is a mobile device, then the cluster search algorithm adopts a framework constraint of vertical story flow and single column layout, and splits or merges some page component modules. Ensure that the generated results from different device types maintain consistency in color, font, and brand elements.
10. An intelligent e-commerce landing page generation system, comprising a processor and a memory, wherein the memory stores computer program instructions, characterized in that, When the computer program instructions are executed by the processor, the e-commerce landing page intelligent generation method according to any one of claims 1 to 9 is implemented.