AUTOMATIC ANIMATION OF VISUAL CONTENT

Abstract

Several disclosed embodiments relate to the automatic animation of visual content. In particular, some embodiments first receive a design document. Subsequently, some embodiments generate a rendered image of the design document. Then, some embodiments generate a mask that specifies one or more areas of visual importance in the image. Furthermore, some embodiments generate a scene graph from the design document. Some embodiments recognize one or more key elements based at least partially on the mask, the filtering of the scene graph, clustering, and / or one or more key element rules. Additionally or alternatively, some embodiments determine one or more animation rules based on salience data and / or the recognition of key elements to generate an animation sequence or output.

Description

CROSS-REFERENCE TO RELATED REGISTRATIONS

[0001] This application claims priority over the preliminary US patent application No. 63 / 699,643 entitled “AUTO-ANIMATE EXPRESS DESIGN DOCUMENTS USING SALIENCY DETECTION AND HEURISTIC PROGRAMMING”, filed on September 26, 2024, which is hereby incorporated in its entirety by reference. BACKGROUND

[0002] Established media design technologies allow users to create a wide variety of visual content, including digital posters, digital greeting cards, slides, infographics, and the like. These tools offer useful features for creating static designs with a range of templates, design elements, and customization options, making it easier for users to create visually appealing graphics. However, significant technical challenges arise when transforming these static designs into compelling animations. The process of animating static content typically requires manual adjustments, extensive expertise in animation techniques, a considerable investment of time, and excessive consumption of computer resources, among other challenges. SUMMARY

[0003] One or more embodiments relate to the automatic animation of visual content. In particular, some embodiments first receive a design document (for example, a digital brochure, a digital poster, a website draft, or a slide presentation). Some embodiments then generate a rendered image of the design document. For example, some embodiments combine all the visual elements and layers of the design document into a single, flattened image that shows the final appearance according to the design document. Some embodiments then generate a mask that indicates one or more areas of visual importance in the image.For example, some embodiments generate a salience mask by providing a representation of the rendered image as input to a salience model, where the salience mask specifies one or more areas that are likely to attract human attention.

[0004] Some implementations further generate a scene graph from the design document. A scene graph represents each element of the design document in a hierarchical structure, with each node in the scene graph corresponding to an element or group of elements in the design document. For example, a scene graph can organize elements in a tree-like hierarchy, with each node representing an element (or object) in the scene. Some implementations identify one or more key elements based at least partially on the scene graph mask, filtering, clustering, and / or one or more key element rules. A key element is a central or visually prominent component within a design document or scene that is important to the overall message, user interaction, or visual hierarchy.Key elements typically attract the most attention and are highlighted in animations or visual presentations due to their importance. These elements can include main headings, primary images, and / or important calls to action that are essential to the design's purpose. For example, some implementations overlay the salience data of a salience mask onto the scene graph to determine which specific elements correspond to the areas of high salience identified in the rendered image.

[0005] Some implementations additionally or alternatively determine one or more animation rules based on salience data and / or the recognition of key elements. For example, a salience map might indicate high salience for the headline text and product image, moderate salience for the call-to-action button, and low salience for decorative snowflakes. Based on the salience data and / or the elements identified as key, various implementations use heuristic animation rules to decide how each element should be animated. For example, a rule might specify "apply dynamic animations to high-salience elements to immediately capture the viewer's attention." Since the headline text and product image have high salience, the rule specifies using dynamic animations for these elements.Animation is the process of creating movement or the appearance of movement and change (for example, by rapidly switching between a series of still images or frames). In the context of digital design, animation encompasses the application of movement, transitions, or effects to visual elements (such as text, images, or shapes) to make them appear dynamic or interactive. For example, an image of a ball seemingly bouncing up and down when a sequence of frames showing the ball in different positions is played back in rapid succession is an animation. For example, in a presentation slide, an animation sequence might first cause the title to fade in, then a slide-in image from the left, and finally the animated sequential appearance of a bulleted list (one item at a time).

[0006] Various embodiments of the present disclosure achieve diverse technical effects and improvements over prior art media design technologies. For example, some technical effects include improved user interfaces, enhanced user experiences (for example, by eliminating the need for in-depth animation knowledge), and reduced consumption of computer resources (for example, reduced computer input / output (I / O), lower memory consumption, etc.), as described in more detail herein. BRIEF DESCRIPTION OF THE DRAWINGS

[0007] The patent or application documents contain at least one drawing in color. Copies of this patent or patent application publication with color drawings are provided by the Office upon request and payment of the required fee. The present invention is described in detail below with reference to the accompanying drawing figures, in which: Fig. 1 shows a block diagram of an exemplary computer system architecture suitable for implementing some embodiments of the disclosure; Fig. Figure 2 illustrates an exemplary pipeline for generating an output animation according to some embodiments; Fig. Figure 3 illustrates an exemplary pipeline of a salience model according to some embodiments; Fig. 4A is a screenshot of a user interface page showing a static design document prior to a request to generate an animation, according to some embodiments; Fig. 4B is a screenshot of the user interface page from Fig. 4A, which shows an initial step of a “waterfall” animation style in response to a user request to generate a corresponding animation sequence, according to some embodiments; Fig. 4C is a screenshot of the user interface page from Fig. 4A, which is an intermediate step in the Fig. 4B shows the “Waterfall” animation style sequence introduced, according to some embodiments; Fig. 4D is a screenshot of the user interface page from Fig. 4A, which is a final step of the in Fig. 4C continues the “Waterfall” animation style sequence, according to some embodiments; Fig. Figure 5 is a flowchart of an example process for filtering a scene graph according to some embodiments; Fig. Figure 6 is a flowchart of an example process for identifying one or more groups of key elements according to some embodiments; Fig. Figure 7 is a flowchart of an example process for training a machine learning model to generate a salience mask according to some embodiments; Fig. Figure 8 is a flowchart of an example process for generating an animation sequence according to some embodiments; Fig. Figure 9 shows an exemplary computer environment in which aspects of the present disclosure are implemented according to some embodiments; and Fig. Figure 10 is a block diagram of a computing device in which aspects of the present disclosure are implemented according to some embodiments. DETAILED DESCRIPTION Overview

[0008] As described above, the process of animating static content presents technical challenges, typically requiring manual adjustments, in-depth knowledge of animation techniques, significant time investment, and excessive consumption of computing resources. For example, manual adjustments typically necessitate excessive tweaking of the user interface. Animating static content often requires users to make numerous manual adjustments, such as setting keyframes, adjusting timing, or modifying the properties of individual elements (e.g., position, opacity, rotation). Each of these actions typically requires navigating through multiple menus, panels, or layers within the software, which can be cumbersome and time-consuming.For example, a user has to select an object, then "drill into" its properties to adjust the timing of an animation, and repeat this process for every element on the page, resulting in a repetitive and labor-intensive workflow.

[0009] Furthermore, these technologies require in-depth knowledge of animation techniques. Animation techniques encompass principles such as timing, easing, motion paths, and layering, which dictate how an object moves, changes, or interacts over time. To create fluid and visually appealing animations, users typically need to understand these principles and know how to apply them effectively. This often requires specialized knowledge that goes beyond basic design skills. For example, a user needs to know how to set appropriate keyframes to control the start and end points of an animation and how to use easing features to create natural motion (for example, an object smoothly accelerating or decelerating). Without this knowledge, animations may appear jerky and unprofessional or fail to convey the intended message.

[0010] Even with software that provides animation capabilities, manually animating each element can be a slow and labor-intensive process, especially with complex designs containing multiple animated components. Creating animations typically involves a great deal of detailed work, including designing motion paths, setting keyframes, and fine-tuning animations to ensure they look correct. For example, a user animating a slide with multiple blocks of text and images could spend hours setting up individual animations for each element, adjusting timings to synchronize animations, and repeatedly previewing the results to ensure everything appears coherent—a task that is simply too tedious for most users.

[0011] Prior art technologies are also associated with increased consumption of computing resources, such as increased input / output (I / O) activity. I / O operations refer to reading and writing data to and from storage devices or rendering animations on the screen. Excessive I / O operations cause wear and tear on storage devices (for example, hard drives) due to excessive mechanical movement. As described above, users typically navigate manually through various panels, layers, and properties in the user interface to set up animations. Every click, drag, or adjustment requires the software to read data from memory (input) and update the interface (output). For example, if a user adjusts the position of an object frame by frame, the software must load the data of the current frame, apply the changes, and then save or render the new state.This cycle of loading, modifying, and saving repeatedly increases I / O operations, leading to unnecessary wear and tear on memory components. Furthermore, every time a user changes a parameter (such as position, scale, rotation, or opacity), the software must read the current state of the element, process the change, and write the updated state back to memory or disk. This is especially true for applications that frequently save changes to prevent data loss. For example, if a user is animating a complex scene with multiple keyframes, each adjustment—whether adding, deleting, or modifying keyframes—results in multiple excessive read / write operations. The system reads the current data, updates it with new keyframe information, and writes it back to memory.

[0012] Technologies known from the prior art are also associated with increased memory consumption. When a user interacts with a complex animation software interface, especially by drilling through multiple layers and properties, the software must load all relevant data for each element. This includes metadata, visual properties, animation states, and more. All this information is typically stored in RAM for fast access, which increases memory consumption. Many animation tools maintain a history of user actions to support undo / redo functions. Every user input that changes the project's state is recorded, which requires memory. If users make numerous adjustments (excessive "drilling"), the memory requirement to store these states increases, especially in complex projects with multiple layers and elements.

[0013] Embodiments of the present disclosure provide one or more technical solutions to one or more of the technical problems described herein. Various aspects are directed toward the automatic animation of an image. Specifically, some embodiments first receive a design document. A design document is a file created in graphic design or layout software. Digital design documents contain structured visual elements and are used to create a variety of visual content. For example, a design document may include a digital brochure, a digital poster, a digital business card, a website mockup, a social media graphic, an infographic, a slide presentation, a UI design, a digital logo, a branding guide, or a digital magazine layout.

[0014] Some implementations then generate a rendered image of the design document. For example, a Painter's Algorithm can be used to combine all the visual elements and layers of the design document into a single flat image that shows the final appearance as specified in the design document. Some implementations then generate a mask that specifies one or more areas of visual importance in the image. For example, some implementations generate a salience mask by providing a representation of the rendered image as input to a salience model, with the salience mask specifying one or more areas that are expected to attract human attention.

[0015] Some implementations further generate a scene graph from the design document. A scene graph represents each element of the design document in a hierarchical structure, where each node in the scene graph corresponds to an element or group of elements in the design document. For example, the scene graph can organize elements in a tree-like hierarchy, with each node representing an element (or object) in the scene. Nodes can have parent / child relationships that specify how elements are grouped and positioned relative to each other. Some implementations filter the scene graph by selecting or discarding certain elements from it according to predefined criteria. For example, an element's position in the design could be one such criterion.Elements in prominent positions (such as in the center or at the top of the design) can be prioritized, while those in less conspicuous areas (such as at the corners or edges) could be discarded.

[0016] Some embodiments detect one or more key elements, at least partially, based on the mask, scene graph filtering, clustering, and / or one or more key element rules. The one or more key elements specify one or more areas of visual importance. For example, some embodiments overlay the salience data of a salience mask on the scene graph to determine which specific elements correspond to the high-salience areas identified in the rendered image. Various embodiments additionally apply key element rules. Such rules are predefined strategies or guidelines that consider visual salience and / or contextual importance to identify key elements. For example, these rules might include: elements that overlap with high-salience regions in the salience mask are considered visually more important.Or, certain element types (such as headings, key images, or buttons) are prioritized based on their role in the design. Alternatively, elements that are larger or centrally positioned could be prioritized as potential key elements. Using the combined information from the salience mask and key element rules applied to the scene graph, different implementations subsequently identify or recognize key elements. These are the elements deemed important for the visual and communicative impact of the design.

[0017] Regarding clustering for identifying key elements, some embodiments group elements that are physically close to each other (for example, using Euclidean distance) into clusters (for example, using agglomerative clustering). This ensures that closely located elements are treated as belonging together, thus preserving the spatial organization of the design. Additionally or alternatively, some embodiments group elements that share similar visual characteristics, such as color, size, or shape. This helps create a coherent visual experience by treating similar elements uniformly. Additionally or alternatively, some embodiments group elements that overlap with or are located near areas of high salience in the salience map. This step focuses on grouping elements that are visually important based on salience analysis.Once the elements have been grouped into clusters, key element rules are applied to determine which clusters (or elements within clusters) contain key elements. For example, a cluster that includes a large, centrally positioned headline text and a key image in a high-salience area might be identified as containing key elements because these components are visually and contextually significant.

[0018] Some implementations additionally or alternatively determine one or more animation rules based on salience data and / or the recognition of key elements. For example, a salience map might indicate high salience for the headline text and product image, medium salience for the call-to-action button, and low salience for the decorative snowflakes. Based on the salience data and / or the elements identified as key, various implementations use heuristic animation rules to decide how to animate each element. For example, a rule might state: "Apply dynamic animations to high-salience elements to immediately capture the viewer's attention." Since the headline text and product image have high salience, the rule specifies that dynamic animations should be used for these elements.

[0019] For example, some implementations use a "zoom-in" animation for the headline text and a "slide-in" from the left for the product image. Both animations would have a short duration (for example, 1 second) with an "ease-out" function to create a quick, attention-grabbing effect. Animation is the process of creating the illusion of movement and change by displaying a series of still images / frames in rapid succession. In the context of digital design, animation includes applying movement, transitions, or effects to visual elements (such as text, images, or shapes) to make them appear dynamic or interactive. For example, an image of a ball seemingly bouncing up and down when a sequence of frames showing the ball in different positions is played back quickly is an animation.An animation sequence is a specific series of frames or steps that define the movement or change of visual elements over time within an animation. It establishes the order in which animations occur, including the timing, duration, and transitions of each element's movement or effect. An animation sequence can include multiple elements and effects that work together to create a coordinated animation. For example, in a presentation slide, an animation sequence might include first the fading in of the title text, then the sliding in of an image from the left, and finally the point-by-point appearance of a bulleted list.

[0020] Aspects of this disclosure employ various technical solutions that produce technical effects. For example, one technical solution is to generate an animated output or sequence by generating a mask (for example, a salience mask) and / or recognizing one or more key elements to determine which elements are visually and contextually most important. Such functionality is characteristic of automatic animation. This reduces the need for manual adjustments, the drilling described above, and minimizes user interaction with complex interfaces. Various implementations intelligently decide on the animation parameters for each element based on predefined animation rules and visual salience, thereby significantly reducing the time and effort required to set up animations.

[0021] Some implementations eliminate the need for extensive animation expertise by automatically applying animation parameters or rules that take into account the importance of visual elements. This approach ensures that animations are both effective and visually coherent without requiring the user to understand or manually apply complex animation principles. The system effectively handles the intricacies of animation, such as setting keyframes and applying easing functions, making the animation process accessible to users without specialized knowledge.

[0022] Several implementations further streamline the animation process by automating the selection and animation of elements based on their salience and / or relevance. Instead of manually animating each element, these implementations automatically detect which elements require animation (key elements) and apply predefined animation rules to them. This significantly reduces the time and effort required to create animations, enabling users to achieve professional results quickly and with less manual intervention in user interfaces.

[0023] Various implementations reduce I / O operations by automating the animation process, minimizing the need for repeated manual adjustments and frequent updates of project data. By automatically applying animations based on the generation of a mask (for example, a salience mask), the detection of key elements, and / or animation rules, the system reduces the number of read / write accesses to memory. This reduces the overall I / O load of the system, decreases wear on memory components, and improves performance. Additionally or alternatively, various implementations reduce memory consumption by automating the animation process, as smaller amounts of data need to be held in memory for manual processing and adjustments.By determining animations based on animation rules, recognizing key elements, and / or generating a mask (for example, a salience mask), the system can manage memory efficiently by loading only the necessary elements and properties for each animation iteration. Furthermore, memory consumption can be reduced because the process relies less on storing extensive undo / redo histories of manual actions. Exemplary system

[0024] With reference to Fig. Figure 1 shows a block diagram illustrating aspects of an exemplary computer system architecture suitable for implementing some embodiments of the disclosure, commonly referred to as System 100, according to some embodiments. System 100 represents only one example of a suitable computer system architecture. Other arrangements and elements may be used in addition to or instead of those shown, and some elements may be omitted entirely for clarity. Furthermore, many of the elements described herein are functional units that can be implemented as separate or distributed components, or in conjunction with other components, in any suitable combination and location. For example, some or all of the system's components may be contained within a single computing device (for example, the computing device 1000 from [reference]). Fig. 10) Alternatively, some or all components can be distributed across different computing devices, such as in a distributed cloud computing environment. In some embodiments, System 100 and each of the components reside within the server and / or the user device. Fig. 9, as described in more detail herein.

[0025] System 100 comprises network(s) 110, which are connected to Fig. 9 are described and the components of System 100 communicate with each other, including a scene graph generator 102, a rendered document image generator 104, an animation preset generator 106, a scene graph filter component 108, a salience model 114, a key element component 112, an animation heuristic component 120, an animation generator 122, a user interface and integration layer 124, and a memory 105. The components of System 100 can be in the form of a set of compiled computer instructions or functions, program modules, computer software services, logic gates, hardware accelerators, or an arrangement of processes that run on one or more computer systems. System 100 is generally used to produce an animated output or sequence from a single image or document.

[0026] The Scene Graph Generator 102 is generally responsible for generating a data structure that represents one or more elements in a design document, for example, a scene graph, which is a hierarchical representation of all elements in a design document, including their properties and relationships. In a website design, for instance, the Scene Graph Generator organizes elements such as text, images, and buttons into a structured format that shows how each element is positioned and related to others.

[0027] In some implementations, Scene Graph Generator 102 creates a scene graph by parsing the design document to identify all individual elements and their properties. This involves reading the file format and extracting information about each element, including its type (for example, text, image, and shape), position, size, color, layer order, and / or other attributes. Scene Graph Generator 102 analyzes the spatial and logical relationships between elements to determine their hierarchy. Elements are organized in parent / child relationships based on their grouping and nesting within the design document. For example, a combined text box with an image might form a parent node, with the text box and image being its child nodes. For each identified element, Scene Graph Generator 102 creates a node in the scene graph.Each node represents a single element or a group of elements and contains data about its properties and its relationship to other nodes. This data includes transformation information (for example, translation, rotation, scaling) and other attributes such as opacity and blend modes. Nodes are connected to form a tree-like structure in which each parent node represents a group of elements, and the child nodes represent the elements within that group. This hierarchical structure reflects the organization of elements in the design document. For example, if a button consists of text and a shape, the button would be a parent node, and the text and shape would be its children. The Scene Graph Generator 102 then calculates the transformations (such as position, rotation, and scaling) for each node based on its parent node.This means that any transformation applied to a parent node is also applied to its child nodes, enabling efficient manipulation of grouped elements. For example, moving a group node containing multiple elements causes all child elements to move accordingly. After the hierarchical structure is built, Scene Graph Generator 102 optimizes the scene graph for efficient processing. This can include removing redundant nodes, merging similar nodes, or optimizing transformations. The final scene graph is then stored in memory (for example, memory location 105) and is ready for rendering, animation, or further processing.

[0028] The Rendered Document Image Generator 104 is generally responsible for creating a flat, visual representation of the entire design document by rendering all elements from the scene graph. For example, it generates a visual preview of a flyer by combining all the text, images, and graphics into a single image that shows exactly how the flyer will look when viewed. In an illustrative example, the Rendered Document Image Generator 104 traverses the scene graph from the root node, rendering each element in the order determined by hierarchy and layer order, and applying transformations such as scaling, rotation, and translation, as well as visual properties such as color, opacity, and effects.As each element is rendered, it is composed onto a canvas, taking into account depth order and blending modes, to produce a single, flat image that visually represents the entire design document as intended, displaying all elements combined in their final layout. Additionally or alternatively, in some implementations, the Rendered Document Images Generator 1004 produces any suitable image, for example, a digital image (such as a photograph) with pixel data or raster graphic data.

[0029] The Animation Preset Generator 106 is generally responsible for defining initial animation presets, such as types, timing, and effects, to be applied to elements in the design document. An "animation preset" refers to a predefined set of parameters, characteristics, or configurations that can be applied to animate elements. For example, an animation preset for a marketing banner might include standard animation effects such as "fade in" for text and "slide in" for images, with a duration of 2 seconds. Animation presets are automatically provided by the system (as built-in options) and / or created by users (for custom requirements). Users can create their own animation presets by specifying a particular combination of animation parameters (such as keyframes, timing, motion paths, easing curves, etc.).) set up and save these configurations for reuse. This process allows users to develop personalized animations tailored to specific project requirements or creative style.

[0030] Scene graph filter component 108 is generally responsible for selecting and / or discarding elements from the scene graph based on predefined criteria, focusing on those most relevant to the animation. For example, in some implementations, scene graph filter component 108 filters out background elements for animation and selects key text and images for animation in an advertising flyer. Scene graph filter component 108 is described in more detail below.

[0031] The Salience Mask Generator 114 is generally responsible for generating one or more masks that indicate areas of visual importance and / or areas likely to attract human attention. For example, in some implementations, a salience model generates the salience mask. A salience model is a computational model designed to predict which parts of an image are likely to capture human attention. It generates a salience mask by analyzing various visual features such as color, contrast, intensity, and / or spatial frequency to identify regions that stand out from their surroundings. These regions are assigned higher salience values, creating a salience map that highlights the most attention-grabbing areas in an image.The model can be based on traditional approaches with handcrafted features or on deep learning techniques that learn to predict salience from large datasets with images and eye-tracking data.

[0032] Although salience models are specifically designed to predict visual salience, other model types, particularly those using deep learning techniques, can also generate attention maps or masks that highlight important regions in an image. Examples include convolutional neural networks (CNNs), transformer models, object detection and segmentation models (such as YOLO and SSD), and vision transformers (ViTs). ViTs can generate attention maps. In ViTs, attention weights are calculated for each token (image patch) based on its relationship to other tokens. These attention weights can be visualized as maps showing which parts of the image are being focused on, effectively serving as a form of salience map.

[0033] The Key Element Component 112 identifies and prioritizes essential design elements (key elements) for animation using the generated salience map(s), the cluster module 118, and / or the key element rules 119. For example, the Key Element Component 112 uses the salience model to highlight visually prominent areas in a poster and identifies the main headline text and the product image as key elements to emphasize.

[0034] Key Element Component 112 comprises a Cluster Module 118, Key Element Rules 119, and a Key Element Detector 116. The Cluster Module 118 is generally responsible for grouping design elements into clusters based on predefined criteria such as spatial proximity, visual similarity, and / or their assignment to areas of high visual salience in salience maps. It analyzes the scene graph to identify elements that are positioned close to each other, share similar visual characteristics (such as color, size, or style), and / or lie within areas of high salience. By grouping these elements into clusters, the module allows the system to treat related elements as a single unit, facilitating coordinated animation and improving the visual coherence of the design.In a website design, the cluster module could, for example, group a headline, a subheading, and a product image into one cluster because they are spatially close and visually related in terms of both color and thematic content. Another cluster could consist of a set of social media icons in the footer. Through clustering, the system can ensure that the headline and product image appear simultaneously and synchronously, while the social media icons are animated more subtly—thus maintaining a coherent and visually appealing layout.

[0035] Key Element Rules 119 are heuristic-based guidelines used to identify or determine key elements that should be prioritized for animation based on their visual and / or contextual importance. These rules are determined by analyzing the salience map generated from the rendered document image, which highlights visually prominent areas, and / or by evaluating properties within the scene graph (for example, element type, size, position, and relevance to the design's message). Key Element Detector 116 uses these rules to decide which elements are most critical to conveying the design's main message and should therefore receive the most attention during the animation process.In a marketing flyer, for example, the key element rules might prioritize a large, bold headline and a central product image that appear in high-salience areas. The rule could stipulate that elements with the highest visual salience and those occupying central positions in the design should be identified as key elements. Consequently, the system would select the headline and product image as key elements and apply eye-catching animations, such as zoom-in or slide-in effects, to effectively draw attention to these key components.

[0036] The Key Element Detector 116 is generally responsible for identifying key elements by analyzing the clusters generated by the Cluster Module 118 and applying the Key Element Rules 119. It evaluates each cluster to determine if it contains elements that meet the criteria established by the Key Element Rules 119, such as high visual salience, central positioning, or significant size. By examining both the visual prominence of the elements within each cluster and their contextual importance according to the Key Element Rules 119, the Key Element Detector 116 selects specific elements or entire clusters as key elements and prioritizes them for animation to enhance the overall impact of the design.

[0037] The Animation Heuristics component 120 generates and / or applies predefined animation rules to determine how key elements and other components should be animated (for example, based on their salience and importance). These rules consider factors such as the visual significance of elements (as determined by the Key Element Detector 116), their spatial relationships, and / or the overall context of the design to decide on the most effective animation type, timing, duration, and / or style. The component dynamically adjusts these animation parameters to the content and layout of the design, ensuring that each animation supports the visual focus and contributes to a coherent and engaging presentation.For example, the animation heuristic component uses 120 rules to animate a key element, such as a central product image, with a "zoom-in" effect to attract attention, while applying more subtle animations to secondary elements.

[0038] The Animation Generator 122 produces the final animated output by applying animation presets and / or rules (for example, to the elements selected in the scene graph). The Animation Generator 122 processes parameters or presets—such as animation type, duration, start time, easing, and paths—by interpreting the hierarchical and relational data of the scene graph to animate elements according to the specified sequences and effects. In some implementations, the Generator 122 uses keyframing and interpolation techniques to create smooth transitions and movements, rendering each frame sequentially to produce a final animated output that aligns with the visual and contextual goals of the design and ensures synchronicity and visual coherence across all animated elements.Keyframing involves placing specific "keyframes" at key points in an animation, where the properties of an element (such as position, rotation, scale, or opacity) are explicitly defined. Animation Generator 122 then fills the frames between these keyframes to create the illusion of movement or change. Interpolation techniques (for example, linear or Bézier interpolation) are algorithms used to calculate the intermediate frames between keyframes. In an illustrative example, Animation Generator 122 combines animations such as "slide in" for text and "fade in" for images to create a coherent animated display.

[0039] The user interface and integration layer 124 provides the interface through which users interact and integrates all components in System 200 into a seamless animation workflow. For example, layer 124 allows users to preview the animated design in an intuitive interface within an animation software program, adjust parameters / presets, and finalize the animation.

[0040] Memory 105 generally stores information including data (for example, design documents, scene graphs, images, etc.), generative text, computer instructions (for example, software program instructions, routines, or services), data structures, and / or models (for example, salience models) used in embodiments of the technologies described herein. Each of these components can be accessed via any suitable component of System 100. In some embodiments, Memory 105 represents any suitable data repository or device, such as a database, data warehouse, RAM, cache, hard disk, RAID, and / or a storage network (for example, a storage area network (SAN)).

[0041] Fig. Figure 2 illustrates an exemplary pipeline 200 for generating an output animation according to some embodiments. In some embodiments, the scene graph filter component 208 represents the scene graph filter component 108 from Fig. 1, the salience and key element component 212 represents the salience mask generator 114 and the key element component 112 from Fig. 1, and the heuristic-based generator 222 represents the animation generator 122 from Fig. 1.

[0042] Initially, the scene graph filter component 208 receives the scene graph 202 as input to generate filtered elements 210. In other words, the output of the scene graph filter component 208 is a filtered scene graph containing only the design elements selected based on predefined criteria. This filtered scene graph includes elements deemed relevant or important for the animation and discards elements not essential to the animation process. For example, in an e-commerce website design, the scene graph filter component 208 outputs a filtered scene graph by selecting only the key elements for animation, such as the headline text "Flash Sale - 50% Off!", the product image of shoes, and the "Buy Now" call-to-action button, based on criteria like visual prominence and importance.Decorative background shapes and footer text are discarded as they are considered less relevant for the animation, allowing the system to focus on animating the most impactful elements.

[0043] The salience and key element component 212 takes the filtered elements 210 and / or the rendered document image 204 as input to generate groups (for example, clusters) of key elements. For example, in the e-commerce website design, the scene graph filter component 208 outputs a filtered scene graph by selecting only the key elements for animation, such as the headline text "Flash Sale - 50% Off!", the product image of the shoes, and the "Buy Now" button, based on criteria such as visual prominence and importance. Decorative background shapes and footer text are discarded because they are considered less relevant for the animation, allowing the system to focus on animating the most impactful elements. In response, the key element component 112 identifies key elements.For example, in the e-commerce example, after the salience model generates a salience mask that highlights visually prominent areas such as the headline text and the product image, the Key Elements component 112 identifies key elements by analyzing this salience data along with the filtered scene graph in 210. The component applies heuristic rules to determine which elements within the high-salience regions are most important for conveying the design's message. For example, it might identify the headline text "Flash Sale - 50% Off!" and the product image of the shoes as key elements because they are both visually prominent and central to the design's goal of promoting a sale, and it ensures that these elements are prioritized for animation.

[0044] The heuristic-based generator 222 then takes the animation presets 206 and / or the group(s) of key elements 214 as input to generate an output animation 214. In the e-commerce example, after the key element component 112 has recognized key elements such as the headline text "Flash Sale - 50% Off!" and the product image of the shoes, the animation generator 222 creates the output animation by applying one or more (for example, a subset) suitable animation presets 206 and / or animation rules to these elements. For example, the animation generator 222 takes the predefined animation presets and adjusts them based on the importance and visual prominence of the recognized key elements so that these key elements are effectively highlighted.For example, he could apply a dynamic “zoom-in” effect to the headline text and a “fade in” effect to the product image to create an appealing animation sequence that draws attention to the most critical elements of the design.

[0045] Fig. Figure 3 shows an exemplary pipeline 300 of a salience model according to some embodiments. In some embodiments, the pipeline 300 represents the functionality provided by the salience mask generator 114. Fig. 1 executes. In some embodiments, Pipeline 300 represents the architecture of a Unified Model of Saliency and Importance (UMSI). This model is designed to analyze visual content to predict both salience (for example, where people are likely to look) and importance (which parts of the content are most significant).

[0046] Initially, the encoder 304 takes the image 392 (for example, a rendered document image) as input to generate one or more feature maps 306. The encoder 304 thus processes the input image (an image of a poster) to extract feature maps. These feature maps 306 capture essential details about the visual content, such as edges, textures, colors, and shapes. In some embodiments, the encoder comprises several layers representing different stages of feature extraction, for example, through convolutional neural networks (CNNs). Each subsequent layer captures more complex features.For example, the encoder 304 generates feature cards that highlight the edges of the headline text “Flash Sale - 50% Off!” and the outline of the product image, thus providing detailed visual data to help the model understand which areas of the design are visually significant and should be considered for salience and importance.

[0047] The Atrous Spatial Pyramid Pooling (ASPP) module 312 takes the feature maps 306 generated by the encoder 304 and applies several atrous (dilated) convolutions at different rates. This technique enables the salience model to capture information at multiple scales and effectively understand both fine details and broader contextual information in the image. The ASPP module 312 outputs a set of feature maps 314 that have been processed to accommodate different spatial scales. By employing dilated convolutions, the ASPP module 312 effectively increases the receptive field without reducing the resolution, thus making it possible to extract features at various scales.This enables module 312 to recognize both fine details and broader patterns within an image, which is useful for accurately identifying elements of different sizes and importance in tasks such as semantic segmentation or - in the context of the e-commerce example - in determining the visual salience of different design components such as text and images.

[0048] The concatenation layer 316 is responsible for generating concatenated features 318. Following the ASPP module 312, the feature maps 314 are concatenated (combined) along the depth axis. This step aggregates the multiscale features into a single, unified representation that contains information from all processed scales. For example, the ASPP module 312 might generate multiple sets of feature maps 314 with varying levels of detail using different dilation rates. One set of feature maps 314 might capture fine details such as the sharp edges of the text "Flash Sale - 50% Off!", while another set might capture broader patterns such as the overall shape and color of the product image. The concatenation layer 316 takes these multiple sets of feature maps and combines them into a single output tensor 318 by stacking them along the channel dimension.This unified output now contains comprehensive information from all feature maps and enables the model to analyze the image with both fine and broad contextual understanding.

[0049] The Decoder Module 320 takes the concatenated features 318 and transforms them back into a spatial representation, ultimately outputting a salience map 322. This salience map visually highlights the areas of the input image that are most likely to attract human attention (for example, indicated by bright areas in the output image). For instance, in e-commerce website design, the Decoder 320 begins with the high-dimensional, multi-scale feature maps 314 generated by the Encoder and ASPP Module 312, which contain detailed information about the visual content, including headline text and product images. The Decoder 320 then applies transposition or upsampling operations to incrementally increase the resolution of these feature maps 314, refining and reconstructing the details to produce a final output, such as a salience map.

[0050] In parallel to the salience path, the salience model also includes a classification module 308. In some embodiments, the classification module 308 applies a series of fully connected layers or 1×1 folds to the feature maps 306 to generate a probability distribution over predefined classes, for example, "important" or "not important." This probability distribution provides a preliminary assessment of the importance of different regions in the image. The classification module 308 outputs a probability distribution indicating the likelihood that each region will attract the viewer's attention.This distribution is then used by Decoder 320 to focus on areas with higher probabilities and guides the refinement process to generate a precise salience map 322, which highlights key elements such as the headline text and product image, deemed to be the most visually important. The output 310 of Classification Module 308 is thus fed into Decoder 320, which uses this information to guide the upsampling and refinement processes and ultimately generate the detailed salience map 322, highlighting the most visually important areas in the image, such as the headline text and product image in the e-commerce example.

[0051] Although that in Fig. Since the salience model described in section 3 is represented as a CNN-based architecture, it should be understood that any suitable architecture can be used to generate a salience mask. For example, Vision Transformers (ViTs), Graph Neural Networks (GNNs), or Recurrent Neural Networks (RNNs) with attention mechanisms are architectures that can be used alternatively or additionally to generate a salience mask.

[0052] Visual attention models (ViTs) are transformer-based models that use self-attention mechanisms to process image data. They divide an image into patches, encode these patches, and learn the relationships between them to understand visual importance. ViTs can generate salience masks by using the attention maps generated during the classification or prediction process. The self-attention weights highlight which parts of the image contribute most to the model's decision. These weights can be aggregated to create salience maps that show visually important regions. The initial attention values ​​serve as an importance measure that can be transformed into a salience mask, emphasizing areas of high visual focus.

[0053] Generative neural networks (GNNs) operate on graph-structured data and are suitable for modeling relationships between different components of an image, such as pixels, regions, or object parts. In the context of salience, GNNs can be used to model spatial relationships between image regions by treating each pixel or patch as a node in a graph. The model can learn to propagate importance signals through the graph based on connectivity and feature similarity. By aggregating these signals, the GNN can highlight the most relevant nodes (pixels), thus forming a salience mask that emphasizes key areas.

[0054] RNNs, typically used for sequence data, can be combined with attention mechanisms to focus on specific parts of an input sequence, which in the case of images can be sequences of pixels or regions. When applied to images, attentional RNNs can process patches or rows of pixels sequentially, using attentional weights to determine which parts of the image are most important at each step. The attentional values ​​can then be aggregated to create a salience mask that highlights the most attended regions.

[0055] Reinforcement learning (RL) models can be trained to focus on regions of an image that are rewarded as important based on a predefined criterion (for example, visual salience). RL agents can learn strategies that scan an image and assign higher attention scores to areas that yield higher rewards due to their visual features. Over time, the agent learns to map the image to a salience mask that highlights these key areas.

[0056] Attention-enhanced convolutional models are hybrid models that combine CNNs with attentional mechanisms and enhance the model's ability to focus on specific regions of an image by learning spatial attentional maps. The attentional modules learn to weight different regions of the feature maps generated by the CNN, effectively creating a spatial focus that can be directly interpreted as a salience mask. Other examples include transformer models as well as object detection and segmentation models (for example, YOLO and SSD), as described herein.

[0057] Fig. Figure 4A is a screenshot of a user interface page 400 showing a static design document 420 before a requirement is made to generate an animation, according to some embodiments. Page 400 includes a left-hand panel containing user interface elements 402, 404, 406, 408, and 410, each corresponding to animation presets (for example, generated by the Animation Preset Generator 106) or different styles of animation sequences. The static design document 420 comprises several elements 420, 422, 42, 426, 428, and 430, which together form the design document 420.

[0058] The "Fade All" animation style (corresponding to 402) involves a smooth fade of all elements from complete transparency (invisible) to full opacity (fully visible) simultaneously. This effect creates a gentle, gradual reveal of all elements on the screen, which can provide a subtle and elegant introduction to the design. This effect can be used in presentations or slide decks where a calm and cohesive appearance of the elements is desired, without drawing attention to individual components. The "Popping" animation style (corresponding to 404) makes elements appear to "pop up" by rapidly scaling from a smaller size to their full size. This effect is characterized by a rapid upward scaling that gives the impression that elements suddenly "burst" into view.This style is ideal for highlighting certain elements or creating a dynamic, energetic feel in the design, often used in advertisements or engaging slide sets to quickly capture the viewer's attention.

[0059] The "Slide All" animation style (corresponding to 406) moves all elements from off-screen positions to their final positions on the screen, usually from the left, right, top, or bottom. All elements slide in together, maintaining their relative positions throughout the animation. This effect can be used to introduce content in a structured way and is suitable for slide decks or user interfaces where a clean, organized presentation is needed. The "Sunrise" animation style (corresponding to 408) gradually lifts elements from below the screen to the top, mimicking the natural movement of a sunrise. Elements begin off-screen at the bottom and slowly rise to their intended positions, often accompanied by a fade-in effect.This style is used to create a calm, uplifting animation sequence and is suitable for presentations or designs that aim to convey warmth, optimism, or a new beginning.

[0060] The "Waterfall" animation style (corresponding to 410) staggers the appearance of elements one after another, as if they were cascading down a waterfall. Each element appears or moves sequentially, creating a smooth, sequential animation that draws attention downward or across the design. This effect can be used in infographics or tutorials where the step-by-step or hierarchical presentation of information enhances understanding and interaction.

[0061] Fig. 4B is a screenshot of user interface page 400 from Fig. 4A, which displays an initial step of a "Waterfall" animation style in response to a user's request to generate a corresponding animation sequence, according to some embodiments. In some embodiments, in response to receiving a notification that the user has selected the user interface element 410 (according to the "Waterfall" animation style), element 422 is presented at a first time point and as part of a first animation step in an animation sequence, followed by a second step in the animation sequence in which element 426 is presented in the "Waterfall" style.

[0062] In particular, in some embodiments, in response to receiving the indication that the user has selected the user interface element 410, the rendered document image generator 104 converts the design document 400 into an image, the scene graph filter component 108 then filters the corresponding scene graph, the salience mask generator 114 responds by generating a corresponding mask indicating which of the elements in the rendered document image of the design document 400 are likely to attract human attention, the key element component 112 detects key element(s), the animation heuristic component 120 determines one or more animation rules, and the animation generator 122 begins the waterfall animation sequence process, as shown in Fig. 4B shown. As in Fig. Figure 4B also presents a user interface element, 440, which illustrates the different levels (i.e., steps in the animation sequence) and the timing. The start times determine the order and timing of the animation effect. For example, important elements should appear first, and text should be displayed in a left-to-right and top-to-bottom order.

[0063] Fig. 4C is a screenshot of the user interface page 400 from Fig. 4A, which is an intermediate step in the Fig. 4B, the “Waterfall” animation style sequence introduced, shows, according to some embodiments. As in Fig. 4C is shown after the first two steps of the waterfall animation sequence, in which elements 422 and 426 are presented (also in Fig. 4B), presents a third element 424, which corresponds to a third step in the Waterfall animation sequence.

[0064] Fig. 4D is a screenshot of the user interface page 400 from Fig. 4A, which represents the final step in the process Fig. 4C continues the "Waterfall" animation style sequence, according to some embodiments. As in Fig. Displayed in 4D, after the third element 424, which corresponds to the third step in the waterfall animation sequence (which in Fig. 4C is shown), a fourth element 428 is presented, which corresponds to a fourth step in the waterfall animation sequence, followed by a fifth element 430, which corresponds to a fifth step in the waterfall animation sequence. Example flowcharts

[0065] Fig. Figure 5 is a flowchart of an example process 500 for filtering a scene graph according to some embodiments. In some embodiments, process 500 represents the functionality performed by the scene graph filter component 108. Process 500 (and / or any of the functionalities described herein, such as processes 600, 700, 800, and 900) may be executed by processing logic comprising hardware (for example, circuits, dedicated logic, programmable logic, microcode, etc.), software (for example, instructions executed on a processor to perform a hardware simulation), firmware, or a combination thereof. Although certain blocks are referenced in this disclosure in a particular order and quantity, it is to be understood that each block may occur substantially in parallel with, before, or after any other block. Furthermore, there may be more (or fewer) blocks than shown.Added blocks can include blocks that embody any functionality described herein (for example, as in relation to ). Fig. 1 to Fig. 11). The computer-implemented method, the system (comprising at least a computing device with at least one processor and at least one computer-readable storage medium) and / or the computer-readable medium, as described herein, can execute or cause to execute Process 500 or any other functionality described herein.

[0066] According to Block 502, some embodiments first receive a scene graph. According to Block 504, some embodiments detect one or more background elements in the scene graph and discard them for animation. For example, when the scene graph filter component 108 analyzes the scene graph, it calculates the bounding box area for each element. If an element's bounding box occupies more than 80% (or some other threshold-related value) of the canvas area, the scene graph filter component 108 classifies it as a background element. This is because such a large element is likely intended as a background rather than a focal point. Identifying background elements is useful to ensure that the main content (foreground elements) is appropriately highlighted or animated without being obscured by the background.

[0067] In an illustrative example for Block 504, the Scene Graph Filter Component 108 determines the rectangular boundary that completely encloses the element in the design document (and / or scene graph). It identifies the element's position, width, and height on the canvas, typically by analyzing the element's coordinates in the scene graph or its placement in the design. The Scene Graph Filter Component 108 then calculates the area of ​​the boundary box by multiplying its width and height. This calculation is performed for each element to determine its size relative to the total canvas area, which helps classify elements as background or foreground based on predefined criteria—such as whether the boundary box area exceeds 80% of the canvas. Some implementations then discard the background area.“Discard” here means: masking (for example, creating a mask that hides the background), tagging (for example, tagging background elements to instruct them to be ignored during animation), complete deletion from the graph / design document, and / or layer separation.

[0068] According to Block 506, some implementations subsequently recognize certain parent elements with child elements and discard the child elements for animation. In design documents, for example, icons often consist of several smaller shapes grouped into a coherent symbol or graphic. A star icon, for instance, might consist of several smaller polygons or lines. Animating each of these small, individual child elements can be computationally intensive and lead to animation artifacts—unintended visual glitches or irregularities in the animation. These artifacts can occur because animating many closely spaced, detailed elements results in overlaps, jerky movements, or unexpected interactions between shapes.To avoid these problems, the scene graph filter component 108 identifies the top-level group representing the entire icon (or other specific parent), rather than its individual components. This top-level group is a single parent node encompassing all of the icon's child shapes. Animating this group as a whole—instead of the individual shapes—makes the animation smoother and more coherent, and reduces the risk of artifacts.

[0069] Scene Graph Filter Component 108 begins traversing the scene graph from its root node. The scene graph contains nodes representing all elements in the design, including their grouping and nesting. Each node corresponds to an element or group of elements and contains information about its parent and child nodes. During the traversal, Scene Graph Filter Component 108 identifies nodes marked as groups. A group node is one that contains child nodes representing multiple elements combined into a single unit. In vector graphics, for example, icons are often stored as group nodes that encapsulate all the individual parts of the icon.

[0070] Scene graph filter component 108 checks each group node to see if it contains child nodes representing shapes or smaller elements. If a group node has child nodes representing the various parts of an icon (such as paths, lines, or polygons), this group is considered a potential top-level group for the icon. Scene graph filter component 108 evaluates the characteristics of these group nodes, such as their size, position, and relationship to other elements in the design. If a group node contains multiple child shapes (or another threshold-based number) that form a coherent symbol, and it has no parent group node, it is identified as the top-level group representing the icon. Scene graph filter component 108 selects this group node as the top-level group for the icon.All animations are applied to this node, and the child elements (individual shapes within the icon) are discarded from the animation process to avoid unnecessary complexity and animation artifacts.

[0071] In an illustrative example, a design document contains a house icon composed of several shapes: a rectangle for the main body of the house, a triangle for the roof, and small rectangles for windows and doors. Certain implementations traverse the scene graph and find a group node labeled "House Icon." They verify that this "House Icon" group node contains child nodes representing the rectangle (body), the triangle (roof), and the small rectangles (windows and doors). Because all these child shapes are part of a coherent symbol (the house icon) and are grouped together under the "House Icon" node, certain implementations identify this node as the top-level group for the house icon. Certain implementations select the "House Icon" group node for animation and discard the child nodes (individual shapes) from the animation process.By animating the "House Icon" group as a whole, the Scene Graph Filter Component 108 ensures smooth animation of the entire icon and avoids the complexity and potential artifacts that could result from animating each individual shape.

[0072] According to Block 508, certain implementations recognize rotated group(s) and apply animations to the group(s) as a whole. A "rotated group" is a set of elements that have been grouped as a unit and then rotated as a unit. This group can be any combination of elements, such as multiple shapes or images that are transformed together. An example is a cropped image within a group that has been rotated to fit a design layout, which is considered a rotated group. When a group is rotated, applying animations to individual child elements (such as moving or fading in each element separately) can cause problems. In particular, incorrect animation start times and directions may occur because the transformations (such as rotation) affect how the animation of each child element should be interpreted.This can lead to animations that are misaligned, appear at the wrong time, or move in unintended directions. To control this, some implementations track top-level groups that have been rotated. A top-level group is the main node in the scene graph that encompasses all child elements. By identifying these groups, the system ensures that animations are correctly applied to the entire group and not just to individual children.

[0073] Some implementations assign an animation preset to the rotated top-level group as a whole, controlling how the group is animated. This might involve applying a specific animation type (such as fade in or slide in) to the entire group, thus maintaining the group's visual coherence despite its rotation. Some implementations additionally or alternatively assign animation start times to all child elements within the group. This means that while the group as a whole is animated based on its preset, each child element still has its own specific start time for its animation, relative to the overall animation of the group. This approach ensures that animations are synchronized and correctly aligned, taking the group's rotation into account and maintaining visual consistency.

[0074] In an illustrative example for Block 508, a design document for a digital presentation slide contains a rotated group of elements that constitutes a rotated photo collage. The group consists of the following elements: Image 1: a square-cropped landscape image; Image 2: a circular crop of a person; Image 3: a hexagonal image of a building; and a background shape: a decorative triangle behind the images. All of these elements are grouped and rotated 45 degrees to create a dynamic, tilted collage effect on the slide. The designer groups these images and the background shape into a single top-level group called "Photo Collage." The entire "Photo Collage" group is then rotated 45 degrees clockwise to create a visually interesting tilted effect.If embodiments were to animate each image and the background shape individually, without taking rotation into account, this could lead to incorrect animation start times and directions. For example, if image 1 (the landscape image) is animated to slide in from the left without considering the group's rotation, it might not follow the correct angular path and could appear out of sync with the rest of the group. Several embodiments identify "Photo Collage" as a rotated top group because it has been rotated by 45 degrees. They note that this group requires special handling to ensure that all animations are correctly synchronized and aligned. Some embodiments therefore assign an animation preset to the entire "Photo Collage" group.For example, a “fade in” effect could be applied to the entire group, so that the collage appears together as a single, rotated unit.

[0075] While the entire group is animated using the "Fade In" preset, each child element (Image 1, Image 2, Image 3, and the background shape) receives specific animation start times. For example, Image 1 might fade in first, followed by Image 2 and Image 3 with slight delays in between. The background shape might appear last to complete the effect. By treating the "Photo Collage" as a rotated top-level group and applying a uniform animation preset while managing the start times for each child element, the animations are ensured to be visually coherent and synchronized. The group fades in together, and each image appears in sequence, maintaining the correct rotation and creating a coherent, dynamic animation that enhances the overall presentation slide.

[0076] Fig. Figure 6 is a flowchart of an example process 600 for identifying one or more groups of key elements according to some embodiments. In some embodiments, process 600 represents the functionality of the key element component 112 from Fig. 1. Starting with the filtered elements from a scene graph, certain implementations identify groups of key elements. Key element recognition allows for the writing of custom animation rules to improve the quality of animation outputs. According to Block 603, some implementations first receive a rendered image (for example, one generated by the Rendered Document Image Generator 104). Fig. 1 generated rendered document image). According to Block 605, some embodiments derive a salience mask by applying a salience model to the rendered image. As in Fig. As illustrated in Figure 3, a salience model takes the image 302 to produce the final salience map 322.

[0077] According to Block 607, some embodiments convert the salience mask into a binary image using a threshold value X (for example, 0.5). For example, certain embodiments have a threshold of 0.5 for the salience mask and execute connected components on the output to identify blob(s) of high-salience regions. In some embodiments, the salience mask / map is a grayscale image where the intensity of each pixel represents the salience value, indicating how likely a pixel is to attract human attention based on visual features. Thresholding involves converting the grayscale salience map into a binary image where pixels are classified, for example, into two categories: high salience and low salience.A threshold of 0.5 means that each pixel with a salience value greater than 0.5 (on a scale of 0 to 1) is considered part of a high-salience region and set to 1 (white in the binary image), while pixels with a value of 0.5 or less are considered low-salience and set to 0 (black in the binary image). Performing connected components on the output is a process for identifying and labeling clusters of connected pixels in a binary image. In this context, it identifies sets or groups of white pixels (or other pixels with the same value) that are connected horizontally, vertically, and / or diagonally. By performing connected components analysis on the thresholded binary image, different implementations can identify different "blobs" or clusters of high-salience pixels.Each blob represents a region of the image where pixels are close together and all exceed the salience threshold, indicating an area of ​​high salience.

[0078] In an exemplary illustration of block 607, the salience map M is first analyzed to apply a threshold of 0.5 and convert it into a binary image that highlights areas of high salience. Subsequently, certain embodiments perform connected-component analysis on this binary image to group all adjacent high-salience pixels into blobs or regions. This process helps segment the image into visually prominent regions that can then be further analyzed or used in subsequent steps of the animation process, for example, to determine which areas or elements should be highlighted or animated.

[0079] According to Block 609, some embodiments combine similar elements from a filtered scene graph that are within a threshold distance of each other into group(s) (for example, clusters) using the binary image. For example, some embodiments (for example, Cluster Module 118) perform an agglomerative clustering algorithm on the filtered scene graph elements. Agglomerative clustering is a hierarchical clustering method that begins by treating each element as its own cluster and then progressively merges them based on their similarity until a desired number of clusters is reached. Some embodiments set the maximum desired number of clusters to the same number of salience blobs extracted in Block 607. Various embodiments then compute the pairwise distance matrix for clustering using the evaluation function below.The pairwise distance matrix measures the distances or dissimilarities between each pair of elements to be clustered. This matrix is ​​based on the evaluation function, which quantifies how similar or different the elements are according to several criteria.

[0080] The scoring function is designed to group elements that are (1) spatially close, (2) of the same type, and (3) overlap the same salience regions. In other words, the scoring function used in the clustering process is specifically designed to group elements that are spatially close, of the same type (for example, group text elements or image elements), and overlap the same salience regions as identified in the salience map. This helps to group elements that are visually and contextually related. A mathematical representation of the scoring function follows: D[i,j]=iOU(i,j)+saliencyDiff(i,j)+distanceDIff(i,j)+typeDiff(i,j), where D[i,j] is the distance between element i and element j, iOU is the intersection over union between the bounding boxes of elements i and j, saliencyDiff is the absolute difference between the mean salience values ​​of elements i and j, distanceDiff is calculated by taking the exponential function of the L2 distance between the centers of the bounding boxes of elements i and j, and typeDiff is 0.5 if both elements are of type Text, or alternatively 0.0 (for example, if both elements are of type Image). Accordingly, the equation is an evaluation function for calculating the distance or dissimilarity between two elements i and j in the clustering process.

[0081] In some embodiments, while the binary image created in block 607 is not directly used in the agglomerative clustering algorithm in step 609, the salience blobs extracted from the binary image are still useful. The number of clusters in the agglomerative clustering algorithm is set to correspond to the number of identified salience blobs. Furthermore, the salience information influences the clustering process via the `saliencyDiff` component of the distance metric. The output of block 609 is a group(s) of key elements.

[0082] Fig. Figure 7 is a flowchart of an example process for training a machine learning model to generate a salience mask, according to some embodiments. According to Block 702, some embodiments receive input-(image)-output-(importance feature(s)) pairs. In other words, certain embodiments collect a set of images (for example, rendered design document images) that is used as the training dataset. Various embodiments receive ground-truth salience maps for each image, created, for example, by human annotators or derived from eye-tracking data. These salience maps serve as the target output for the model. Eye-tracking data refers to information gathered by tracking and recording the movement and position of a person's eyes while viewing various stimuli such as images, text, or user interfaces.This data typically includes details such as fixation points (where the gaze is focused), saccades (rapid eye movements between fixations), gaze duration, and the sequence of visual exploration, which indicates areas likely to attract human attention.

[0083] According to Block 704, some embodiments initialize model parameters. For example, some embodiments initialize the network's weights and / or biases. Weights can be set randomly or using a specific strategy such as Xavier or He initialization. According to Block 706, some embodiments then generate a predicted salience map for each image in the dataset. Thus, different embodiments feed the image into the model. The image passes through several layers of the network, such as convolutional layers, activation functions, pooling layers, and / or, if applicable, fully connected layers, depending on the architecture. The model outputs a predicted salience map representing areas of the image on which attention is expected to focus. This is the raw output of the network's final layer, for example, a sigmoid or softmax activation for probability maps.

[0084] According to Block 708, some embodiments then calculate the loss using a loss function. In other words, some embodiments use a suitable loss function to compare the predicted salience map with the ground-truth salience map to quantify the difference, that is, how much the predicted salience map deviates from the ground-truth salience map. For example, some embodiments calculate a binary cross-entropy loss for pixel-wise classification problems or the mean squared error (MSE) for regression outputs. For example, some embodiments calculate the loss by calculating:

[0085] According to Block 710, some embodiments calculate the gradients of the loss function. For example, some embodiments calculate the gradients of the loss function with respect to each parameter in the model (weights and biases). In some embodiments, this is done using the chain rule to propagate the error backward through the network layers. Some embodiments also perform backpropagation, which adjusts the network weights to minimize the loss. The gradient of each weight is used to determine how much the weight needs to be changed to reduce the error.

[0086] According to Block 712, some embodiments adjust the model parameters based on the calculated gradients and an optimization algorithm. For example, some embodiments use an optimizer (such as Stochastic Gradient Descent (SGD), Adam, or RMSprop) to update the model parameters. The optimizer adjusts the weights using the gradients calculated during backpropagation. Some embodiments additionally adjust the learning rate during training to improve convergence, often by decreasing it over time as the model begins to converge.

[0087] According to Block 714, some embodiments determine whether a minimum convergence threshold has been reached. Convergence is achieved when the model's parameters (such as weights and biases) are adjusted by backpropagation and gradient descent so that the loss function steadily decreases and eventually stabilizes around the minimum value. At convergence, the model's predictions (for example, Block 706) are close to the ground-truth salience maps, indicating that the model has learned to reliably identify visually important areas of an image. When a model converges, it means that further training is not expected to significantly improve the model's ability to predict salience maps. This indicates that the model has learned the optimal representations and patterns required for effective task performance.Achieving convergence is helpful to ensure that the model generalizes new, previously unknown images well and consistently produces high-quality salience maps.

[0088] If the minimum convergence threshold is not reached, block 706 is repeated to perform another pass / epoch and generate another salience map (for example, from a different input / output pair). Blocks 710, 712, and 714 are also repeated until the minimum convergence threshold is reached; then process 700 ends. The above steps (from generating a salience map (forward pass) to optimization) are repeated for each batch of images in the dataset. Batches are processed sequentially in each epoch. The entire training set is processed multiple times (epochs) so that the model can learn and generalize. Each epoch consists of passing all training batches through the network.

[0089] Fig. Figure 8 is a flowchart of an example process 800 for generating an animation sequence, according to some embodiments. According to Block 802, some embodiments receive an image or a file containing one or more elements. In some embodiments, the image is representative of any suitable image, for example, a digital photograph or a video frame. In some embodiments, the image is representative of a rendered document image (for example, the rendered document image 204 from Fig. 2) The rendered document image is a visual representation of a design document (for example, design document 420 from Fig. 4A). In some embodiments, the design document is the file in block 802, which was created in graphic design or layout software. For example, some embodiments first receive a design document and then generate a rendered image of the design document (for example, as with respect to the Rendered Document Image Generator 104 from Fig. 1 described). Some embodiments generate a scene graph from the design document, which represents each element in the design document in a hierarchical structure, with each node in the scene graph corresponding to an element or group of elements in the design document, as for example with regard to the scene graph generator 102 from Fig. 1 described.

[0090] According to Block 804, some embodiments generate a mask that indicates one or more areas of visual importance in the image or file (for example, automatically, at least partially, in response to receiving the image or file). For example, in some embodiments, Block 804 includes the functionality described in relation to the salience mask generator 114 from Fig. 1 is described. A “mask” is any suitable data structure and / or technique used to control which parts of an image, file object, or surface are affected by certain operations or transformations. Masks are used in graphics and image processing to selectively hide or show parts of an image, enabling more precise and localized adjustments. In an illustrative example for Block 804, some embodiments generate a salience mask (for example, the salience map 322 from Fig. 3) by providing a representation (for example, a preprocessed version such as a matrix, a vector, or a grayscale variant) of the rendered image as input to a salience model. The salience mask specifies one or more areas of visual importance within the rendered image. For example, in some embodiments, the salience mask is a grayscale image or a heatmap that indicates which pixels of the one or more areas are likely to attract human attention. In some embodiments, the generation of the mask is based on training a machine learning model on a dataset of images with labeled areas of visual importance, as for example, with respect to training process 700 from Fig. 7 described.

[0091] Salience refers to how likely a particular area of ​​an image or file is to stand out and attract human attention. Salient regions are typically those that exhibit striking colors, textures, edges, or contrasts compared to their surroundings. In a grayscale image, the salience mask is an image where the intensity of each pixel (from black to white) indicates the salience level. Higher intensity (closer to white or a white threshold) means the region is more likely to attract attention, while lower intensity (closer to black or a black threshold) indicates lower salience. A heatmap is a color representation that uses colors (for example, red, yellow, blue, etc.) to indicate the salience level.Typically, warmer colors (such as red and yellow) represent areas of higher salience, while cooler colors (such as blue) represent areas of lower salience. The purpose of a salience mask is to predict or identify which parts of an image or file are most likely to attract the viewer's attention. This is based on various visual characteristics such as contrast, color, edges, and / or texture. The regions highlighted by the salience mask are those that stand out and are therefore most likely to be noticed first by a viewer.

[0092] According to Block 806, some embodiments determine one or more animation rules at least partially based on the mask. In some embodiments, Block 806 includes the functionality described in relation to the animation heuristic component 120 from Fig. As described in section 1. In an illustrative example for Block 806, if a salience mask indicates that a particular character's face is likely to attract the viewer's attention, the animation rules could ensure that the character's facial expressions are more pronounced and dynamic. Furthermore, different implementations use softer or more emphatic movements for this character to maintain attention and direct the viewer's focus according to the salience data. This approach allows the animation to adapt dynamically by emphasizing the most attention-grabbing elements in the scene.

[0093] In some embodiments, Block 806 additionally or alternatively includes specifying one or more animation parameters. An "animation parameter" is one or more features (for example, animation presets) that are associated with the animated output and / or the animation rules specified in Block 806 and that specify how the animated output is to be applied to different elements within the file or image. For example, an animation preset might include the duration of the animation, the delay before the animation begins, the type of movement / animated output (such as fade in, slide in, or zoom in), and the easing function (how the speed of the animation changes over time, for example, ease-in or ease-out).When an animation preset is set to "Fade In," the animation parameters might specify that the fade-in takes 2 seconds, begins 0.5 seconds after the element appears on screen, and uses an ease-out function to create a smooth, gradual appearance. These parameters ensure that the animation behaves consistently across different elements when the preset is applied. In some implementations, each animation parameter includes a name for the animation preset (for example, "Spin," "Tumble," "Fade") and / or a set of parameters such as duration, character, or direction.

[0094] In some embodiments, block 806 additionally or alternatively includes determining animation presets that contain a set of predefined animation styles that can be selected by a user. Thus, determining the animation rules includes specifying how the animation presets are applied or modified, and the generation of the animation sequence is based on how the animation presets are applied or modified. Various embodiments therefore provide animation presets that contain predefined sets of animation styles and effects from which users can choose. Examples of this are found with respect to UI elements 402, 404, 406, 408, and 410 from [reference missing]. Fig. Described in section 4A, these presets simplify the animation process by providing a variety of pre-configured animation options (such as "fade in" or "slide in left") that users can easily apply to different elements within a design. Different implementations then determine how these selected animation presets are implemented or modified based on specific criteria or user input. This includes adjusting the preset parameters, such as timing, duration, or sequence, to suit the specific needs or context of the design and ensure that the animation achieves the desired visual outcome.

[0095] According to Block 808, some embodiments—at least partially based on the animation rule(s)—generate an animation sequence of the elements of the image or file by applying at least the animation rules. Alternatively or additionally, Block 808 represents generating animated output associated with the image or file, at least partially based on recognizing the key elements. Alternatively or additionally, Block 808 represents generating animated output by applying at least the animation parameters (see above) to the design document, at least partially based on the salience mask.

[0096] Generating the animated output transforms the design document into an animated design document. An "animation sequence" is a series of steps that defines how animations unfold over time, specifying the order and timing in which different elements are animated. Each step in the sequence can involve applying various animation effects (such as fade-in, slide-in, or zoom-in) to one or more elements, often with specific parameters like duration and delay to control the animation's progression. For example, in a presentation slide, an animation sequence might begin with a step that fades in the title text, followed by a second step in which an image slides in from the left, and finally a last step in which bullet points appear sequentially with a pop-up effect.

[0097] In some embodiments, "animated output" comprises an animation sequence. In some embodiments, "animated output" additionally or alternatively refers to only a single step or effect (for example, in a series of steps / effects). In some embodiments, "animated output" additionally or alternatively is the final, rendered result of the animation process, encompassing all applied animation effects, transitions, and sequences. It represents the complete visual presentation after the animation steps have been executed and may be a video file, an interactive web animation, or a series of animated frames.For example, the animated output after creating and applying an animation sequence to elements in a design document (for example, fading in text and sliding in images) is the final video or interactive content that the viewer sees, which displays the intended smooth transitions and animations.

[0098] In some implementations, the generation of the animation sequence in Block 808 is based on a single user input, which is a request to convert the image or file into the animation sequence. Such a "single user input" represents a "one-click" solution, so no further user input is required to animate a document—unlike existing technologies. For example, with regard to Fig. 4A to Fig. 4D certain implementations automatically execute all steps of the waterfall animation, which Fig. 4B, Fig. 4C and Fig. 4D corresponds, in response to receiving the notification that the user has selected UI element 410 (the "Waterfall" style), without the user having to manually intervene or provide any further input to complete the Waterfall animation sequence.

[0099] In some embodiments, the generation of the animation sequence of one or more elements is further based on filtering the scene graph by selecting or discarding specific elements from the scene graph based on predefined criteria. For example, some embodiments filter a representation (for example, a scene graph that specifies the one or more design elements of the image) based on predefined criteria. Examples of such filtering are found in Process 500. Fig. 5 and the scene graph filter component 108 from Fig. 1 described.

[0100] Some implementations convert a mask using a threshold value (for example, as in relation to block 607 from Fig. 6 described) into a binary image and combine elements of a scene graph that are within a threshold distance of each other into one or more clusters using the binary image (for example, as with respect to block 609 from Fig. 6 described). In this way, the generation of the animation sequence is additionally based on conversion and combination.

[0101] Some embodiments detect one or more key elements in a scene graph by analyzing the overlap between one or more design elements in the scene graph and one or more areas of high salience in the mask, with the generation of the animation sequence additionally based on the detection of these one or more key elements. In some embodiments, this process includes thresholding the salience map to highlight the visually most important areas, identifying contiguous regions (blobs) of high salience (for example, as in Block 605 and / or Block 607 from [reference missing]). Fig. 6) and the clustering of design elements based on their spatial and visual relationships to these regions (for example, as in relation to Block 609 from Fig. 6 described). The generation of the animation sequence is then further tailored based on these identified key elements to ensure that they are prominently highlighted in the final animation. Exemplary operating environments

[0102] With reference to Fig. Figure 9 schematically illustrates an exemplary computer environment 900 for recommending one or more color values ​​for application to an input image, in which some embodiments of the present invention can be employed. It should be understood that this and other arrangements described herein serve only as examples. Other arrangements and elements (for example, machines, interfaces, functions, sequences, groupings of functions, etc.) can be used in addition to or instead of those shown, and some elements can be omitted entirely. Furthermore, many of the elements described herein are functional units that can be implemented as separate or distributed components or in conjunction with other components, in any suitable combination and arrangement. For example, there can be multiple servers 910 representing nodes in a cloud computing network.Various functions described herein as being performed by one or more units can be implemented by hardware, firmware, and / or software. For example, various functions can be performed by a processor executing instructions stored in memory.

[0103] The surrounding area 900 in Fig. Environment 9 comprises a prediction server (“server”) 910, which is connected to network 110. Environment 900 further comprises a client device (“client”) 920, which is also connected to network 110. Among other things, client 920 can communicate with server 910 via network 110 and transmit a request to server 910 to animate an image and / or a design document. In various embodiments, client 920 is implemented in a computing device, referred to herein as the client device or user device (as with respect to computing device 1000 from Fig. 10 described).

[0104] In some embodiments, each component is made of Fig. 1 is included in the Server 910 or the Client Device 920. Alternatively, in some configurations, the components from Fig. 1 distributed between the server 910 and the client device 920.

[0105] Server 910 can receive the request transmitted by Client 920 and search for relevant data across any number of data repositories accessible to Server 910—whether remote or local. A data repository can comprise one or more local or remote computing devices, each directly or indirectly accessible to Server 910 via Network 110. According to some embodiments described herein, a data repository can comprise one or more remote servers, each node (for example, a computing device) in a distributed multitude of nodes (such as those typically used to operate a distributed ledger (for example, a blockchain)), or each remote server that is coupled to or communicates with any node in a distributed multitude of nodes.Each of the aforementioned data repositories can be associated with one of several data storage entities, which may or may not be interconnected. As described herein, a data storage entity can be any entity (for example, retailer, manufacturer, e-commerce platform, social media platform, web host) that stores data (for example, names, demographics, purchases, browsing history, location, addresses) related to its customers, clients, sales, relationships, website visitors, or other subjects of interest to the entity. It is intended that each data repository is generally associated with a different data storage entity, although some data storage entities may be associated with multiple data repositories, and some data repositories may be associated with multiple data storage entities. In various embodiments, Server 910 is implemented as a computing device, as described in relation to Computing Device 1000. Fig. 10 described.

[0106] Following the description of embodiments of the present invention, an exemplary embodiment environment is described below to provide a general context for various aspects of the present invention. Referring first to Fig. Figure 10 shows an exemplary implementation environment for embodiments of the present invention, which is generally referred to as the computing device 1000. The computing device 1000 is only an example of a suitable computing environment and is not intended to indicate any limitation with respect to the scope or functionality of the invention. Likewise, the computing device 1000 should not be interpreted as implying a dependency or requirement on a specific combination of the components shown.

[0107] With regard to Fig. The computing device 1000 comprises a bus 10 that directly or indirectly connects the following devices: memory 12, one or more processors 14, one or more presentation components 16, input / output (I / O) ports 18, input / output (I / O) components 20, and an exemplary power supply 22. The bus 10 may represent one or more buses (such as an address bus, data bus, or a combination thereof). Although the various blocks in Fig. Although the components are represented by lines for clarity, the boundaries between them are not so clear in reality – figuratively speaking, the lines would be more gray and blurred. For example, a presentation component like a display device could also be considered an I / O component. Furthermore, processors have memory. The inventor acknowledges that this is inherent to the technology and emphasizes that the diagram in Fig. 10 is merely an illustrative representation of a suitable computing device that can be used in conjunction with one or more embodiments of the present invention. No distinction is made between categories such as "workstation", "server", "laptop", "handheld device", etc., since all within the scope of Fig. 10 and are included under the term "computing device".

[0108] The Computing Device 1000 typically includes a variety of computer-readable media. Computer-readable media can be any media that the Computing Device 1000 can access, and includes both volatile and non-volatile media, as well as removable and non-removable media. For example, without limitation, computer-readable media can include computer storage media and communication media. Computer storage media includes both volatile and non-volatile, removable and non-removable media implemented by any method or technology for storing information such as computer-readable instructions, data structures, program modules, or other data.Computer storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other storage technologies, CD-ROM, Digital Versatile Discs (DVDs) or other optical storage media, magnetic cartridges, magnetic tape, magnetic hard disk storage or other magnetic storage devices—or any other medium that can be used to store the desired information and that the computing device 1000 can access. Computer storage media do not include signals as such. Communication media typically embody computer-readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism and include any media used for transmitting information. The term "modulated data signal" means a signal whose one or more properties have been set or modified to encode information within the signal.For example, without limitation, communication media include wired media such as a wired network or a direct connection, as well as wireless media such as acoustic, RF, infrared, and other wireless media. Combinations of the aforementioned media should also be considered to fall within the scope of computer-readable media. In various embodiments, the computing device 1000 represents the client device 920 and / or the server 910. Fig. 9.

[0109] Memory 12 contains computer storage media in the form of volatile and / or non-volatile memory. Memory can be removable, non-removable, or a combination thereof. Examples of hardware storage devices include solid-state storage, hard disk drives, optical drives, etc. Computing device 1000 comprises one or more processors that read data from various units such as memory 12 or I / O components 20. Presentation components 16 present data indications to a user or another device. Examples of presentation components include display devices, speakers, printing components, vibration components, etc.In some embodiments, the memory contains program instructions which, when executed by one or more processors, cause the processor(s) to perform each of the functions described herein, for example, processes 500, 600, 700, 800 and / or 900, or any functionality relating to . Fig. 1 to Fig. 9 was described.

[0110] The 18 I / O ports allow the Computing Device 1000 to be logically connected to other devices, including 20 I / O components, some of which may be integrated. Illustrative components include a microphone, joystick, gamepad, satellite dish, scanner, printer, wireless device, etc. The 20 I / O components can provide a Natural User Interface (NUI) that processes air gestures, speech, or other physiological inputs generated by a user. In some cases, inputs can be transmitted to an appropriate network element for further processing. An NUI can implement any combination of speech recognition, pen recognition, facial recognition, biometric recognition, gesture recognition both on and around the screen, air gestures, head and gaze tracking, and touch recognition (as described in more detail below) associated with a display of the Computing Device 1000.The Computing Device 1000 can be equipped with depth cameras, such as stereoscopic, infrared, or RGB camera systems, touchscreen technology, and combinations thereof, for gesture recognition. Additionally, the Computing Device 1000 can be equipped with accelerometers or gyroscopes to detect movement. The output from the accelerometers or gyroscopes can be fed to the Computing Device 1000's display to enable immersive augmented reality or virtual reality.

[0111] As is understandable, embodiments of the present invention offer, among other things, the generation of verification and attestation service notifications corresponding to a specific determination of the veracity of a claim. The present invention has been described with respect to certain embodiments, which are in every respect illustrative and non-limiting. Variations will be apparent to those skilled in the field to which the present invention relates, without altering the scope of protection.

[0112] It is evident from the foregoing that this invention is suitable for achieving all the objectives and purposes set out above, together with further advantages that are obvious and inherent to the system and method. It is understood that certain features and subcombinations are useful and can be employed independently of other features and subcombinations. This is intended and falls within the scope of the claims.

[0113] The subject matter of the present invention is described herein with specificity to satisfy legal requirements. However, the description itself is not intended to limit the scope of protection of this patent. Rather, the inventors have considered that the claimed subject matter may also be embodied in other ways—including different steps or combinations of steps similar to those described in this document, in conjunction with other present or future technologies. Furthermore, the terms “step” and / or “block,” although used herein to denote different elements of the methods used herein, should not be interpreted as implying a particular sequence between the various disclosed steps, except and only to the extent that the sequence of the individual steps is explicitly described.

[0114] In light of the foregoing, further aspects and embodiments of the subject matter of the present invention are described by the following list of numbered clauses: 1. System, comprehensive: a storage component; and a processing device coupled to the storage component, wherein the processing device is configured to perform the following operations: Receiving an image or a file containing one or more elements; Generating a mask that specifies one or more areas of visual importance in the image or file; based at least partially on the mask, determining one or more animation rules; and Generating an animation sequence of one or more elements of the image or file by applying at least one or more animation rules. 2. The system according to clause 1, wherein the mask is a salience mask and wherein the automatic generation of the mask comprises the automatic generation of the salience mask using a salience model, and wherein the salience mask is a grayscale image or a heatmap indicating which pixels of one or more areas are likely to attract human attention. 3. The system according to clause 1, wherein the generation of the animation sequence is further based on a single user input representing a request to convert the image or file into the animation sequence. 4. The system according to clause 1, wherein the image is a rendered document image, wherein the rendered document image is a visual representation of a design document, wherein the design document is the file created in graphic design or layout software, and wherein the operations further comprise: Generate, from the design document, a scene graph that represents each element in the design document in a hierarchical structure, where each node in the scene graph corresponds to an element or group of elements in the design document. 5. The system according to clause 4, wherein the generation of the animation sequence of one or more elements is further based on filtering the scene graph by selecting or discarding specific elements from the scene graph based on predefined criteria. 6. The system according to clause 1, wherein the operations further include the following: Converting the mask into a binary image using a threshold; and Combining elements of a scene graph that lie within a threshold distance of each other into one or more clusters based on the binary image, with the generation of the animation sequence further based on conversion and combination. 7. The system according to clause 1, wherein the generation of the mask is based on the machine learning model being provided with a representation of the image as input and the machine learning model being trained on a dataset of images with marked areas of visual importance. 8. The system according to clause 1, wherein the operations further include the following: Identifying one or more key elements in a scene graph by analyzing the overlap between one or more design elements in the scene graph and one or more areas of high salience in the mask, and furthermore based on the identification of the one or more key elements. 9. The system according to clause 1, wherein the operations further include the following: Setting animation presets that include a set of predefined animation styles selectable by a user, and wherein determining one or more animation rules includes specifying how the animation presets are applied or modified, and wherein generating the animation sequence is based on how the animation presets are applied or modified. 10. A comprehensive procedure: Receiving a design document; Generating a rendered image of the design document; Generate, via a machine learning model, a salience mask by providing a representation of the rendered image as input to the machine learning model, wherein the salience mask specifies one or more areas of visual importance within the rendered image; Determining one or more animation parameters; and based at least partially on the salience mask, generating an animated output by applying at least one or more animation parameters to the design document, wherein generating the animated output transforms the design document into an animated design document. 11. The procedure according to clause 10, wherein the one or more animation parameters comprise at least one of the following components: one or more properties associated with the animated output, or one or more animation rules that specify how the animated output should be applied to different elements within a design document. 12. The procedure according to clause 10, wherein the generation of the animated output is further based on a single user input representing a request to convert the design document into the animated output. 13. The procedure under clause 10, furthermore comprehensively: Generate, from the design document, a scene graph that represents each element in the design document in a hierarchical structure, where each node in the scene graph corresponds to an element or group of elements in the design document. 14. The procedure according to clause 13, wherein the generation of the animated output is further based on filtering the scene graph by selecting or discarding certain elements from the scene graph based on predefined criteria. 15. The procedure under clause 10, furthermore comprehensively: Converting the salience mask into a binary image using a threshold; and Combining elements of a scene graph that lie within a threshold distance of each other into one or more clusters using the binary image, with the generation of the animated output further based on conversion and combination. 16. The procedure according to clause 10, wherein the generation of the salience mask is based on the salience model being trained on a dataset of images with marked areas of visual importance. 17. The procedure under clause 10, furthermore comprehensively: Identifying one or more key elements in a scene graph by analyzing the overlap between one or more design elements in the scene graph and one or more areas of high salience in the salience mask, with the generation of the animated output further based on the identification of the one or more key elements. 18. The procedure under clause 10, furthermore comprehensively: Setting animation presets that include a set of predefined animation styles selectable by a user, including determining one or more animation parameters, specifying how the animation presets are applied or modified, and generating the animated output based on how the animation presets are applied or modified. 19. A transitory or non-transitory computer-readable medium that stores executable instructions which, when executed by a processing device, cause the processing device to perform operations that include: Generate, using a machine learning model, a mask that specifies one or more sections of an image that are likely to attract people's attention, where the image includes one or more design elements; Filtering a representation of one or more design elements of the image based on predetermined criteria; Identifying one or more key elements from the filtered representation of the one or more design elements based at least partially on the mask and filtering, wherein the one or more key elements indicate one or more areas of visual importance; and Generating an animated output associated with the image, based at least partially on the recognition of one or more key elements. 20. The computer-readable medium according to clause 19, wherein the processes further include the following: Grouping the filtered representation of the one or more design elements into one or more clusters to identify the one or more key elements, wherein the generation of the animated output is further based on grouping the filtered representation of the one or more design elements into one or more clusters. QUOTES INCLUDED IN THE DESCRIPTION

[0000] This list of documents cited by the applicant was automatically generated and is included solely for the reader's convenience. The list is not part of the German patent or utility model application. The DPMA accepts no liability for any errors or omissions. Cited patent literature

[0000] US 63 / 699,643

[0001]

Claims

[1] Procedure, encompassing: Receiving a design document; Generating a rendered image of the design document; Generating, by means of a machine learning model, a salience mask by providing a representation of the rendered image as input to the machine learning model, wherein the salience mask specifies one or more areas of visual importance within the rendered image; Determining one or more animation parameters; and based at least partially on the salience mask, generating an animated output by applying at least one or more animation parameters to the design document, wherein generating the animated output transforms the design document into an animated design document. [2] Method according to claim 1, wherein the one or more animation parameters comprise at least one of the following components: one or more properties associated with the animated output, or one or more animation rules that specify how the animated output should be applied to different elements within a design document. [3] Method according to claim 1 or 2, wherein the generation of the animated output is further based on a single user input representing a request to convert the design document into the animated output. [4] Method according to any of the foregoing claims, further comprising: Generate, from the design document, a scene graph that represents each element in the design document in a hierarchical structure, where each node in the scene graph corresponds to an element or group of elements in the design document. [5] Method according to claim 4, wherein the generation of the animated output is further based on filtering the scene graph by selecting or discarding specific elements from the scene graph based on predefined criteria. [6] Method according to any of the foregoing claims, further comprising: Converting the salience mask into a binary image using a threshold; and Combining elements of a scene graph that lie within a threshold distance of each other into one or more clusters based on the binary image, with the generation of the animated output further based on conversion and combination. [7] Method according to one of the preceding claims, wherein the generation of the salience mask is based on training the machine learning model with a data set of images with marked areas of visual importance. [8] Method according to any of the foregoing claims, further comprising: Identifying one or more hero or key elements in a scene graph by analyzing the overlap between one or more design elements in the scene graph and one or more areas of high salience in the salience mask, with the generation of the animated output further based on the identification of the one or more hero or key elements. [9] Method according to any of the foregoing claims, further comprising: Determining animation presets that comprise a set of predefined animation styles selectable by a user, wherein determining one or more animation parameters includes specifying how the animation presets are applied or modified, and wherein generating the animated output is based on how the animation presets are applied or modified. [10] System, comprising: a storage component; and a processing device coupled to the storage component, wherein the processing device is configured to perform operations that include the following: Receiving an image or a file containing one or more elements; Generating a mask that specifies one or more areas of visual importance in the image or file; based at least partially on the mask, determining one or more animation rules; and Generating an animation sequence of one or more elements of the image or file by applying at least one or more animation rules. [11] System according to claim 10, wherein the mask is a salience mask and wherein the automatic generation of the mask comprises the automatic generation of the salience mask using a salience model, and wherein the salience mask is a grayscale image or a heatmap indicating which pixels of one or more areas are likely to attract the attention of people. [12] System according to claim 10 or 11, wherein the generation of the animation sequence is further based on a single user input representing a request to convert the image or file into the animation sequence. [13] System according to any one of claims 10 to 12, wherein the image is a rendered document image, wherein the rendered document image is a visual representation of a design document, wherein the design document is the file created in graphic design or layout software, and wherein the operations further comprise: Generate, from the design document, a scene graph that represents each element in the design document in a hierarchical structure, where each node in the scene graph corresponds to an element or group of elements in the design document. [14] System according to claim 13, wherein the generation of the animation sequence of the one or more elements is further based on filtering the scene graph by selecting or discarding certain elements from the scene graph based on predefined criteria. [15] System according to any one of claims 10 to 14, wherein the processes further comprise: Converting the mask into a binary image using a threshold; and Combining elements of a scene graph that lie within a threshold distance of each other into one or more clusters based on the binary image, with the generation of the animation sequence further based on conversion and combination. [16] System according to one of claims 10 to 15, wherein the generation of the mask is based on the fact that a representation of the image is provided to the machine learning model as input and the machine learning model is trained on a data set of images with marked areas of visual importance. [17] System according to any one of claims 10 to 16, wherein the processes further comprise: Identifying one or more hero or key elements in a scene graph by analyzing the overlap between one or more design elements in the scene graph and one or more areas of high salience in the mask, and furthermore based on the identification of the one or more hero or key elements. [18] System according to any one of claims 10 to 17, wherein the processes further comprise: Setting animation presets that include a set of predefined animation styles selectable by a user, and wherein determining one or more animation rules includes specifying how the animation presets are applied or modified, and wherein generating the animation sequence is based on how the animation presets are applied or modified. [19] Transitory or non-transitory computer-readable medium that stores executable instructions which, when executed by a processing device, cause the processing device to perform operations that include: Generate, using a machine learning model, a mask that specifies one or more sections of an image that are likely to attract people's attention, where the image includes one or more design elements; Filtering a display or representation of one or more design elements of the image based on predetermined criteria; Identifying one or more hero or key elements from the filtered representation of the one or more design elements based at least partially on the mask and filtering, wherein the one or more hero or key elements indicate one or more areas of visual importance; and Generating an animated output associated with the image, based at least partially on the recognition of one or more hero or key elements. [20] Computer-readable medium according to claim 19, wherein the processes further comprise: Grouping the filtered representation of the one or more design elements into one or more clusters to identify the one or more hero or key elements, wherein the generation of the animated output is further based on grouping the filtered representation of the one or more design elements into one or more clusters.

Images