Machine-Learning Infographic Reflow for Legible Mobile Display
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing systems struggle to effectively display infographic images on mobile devices without requiring users to manually zoom in or out, as conventional resizing methods often render text illegible.
Innovation Solution
A digital design system that uses machine learning models to extract components and determine the reading order of infographic images, then reflows them into a linear layout suitable for mobile devices, using object detection and image segmentation algorithms to identify and rearrange elements like text, images, and icons.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Area of moving object
If the infographic image is resized to fit the mobile device viewing window, then the image fits the display area, but the text becomes illegible
Solution Approach 1:
The system segments the infographic image into multiple components (text elements, images, icons) using object detection and image segmentation algorithms. Each component is independently processed and repositioned in the reflowed layout, allowing text to maintain its original size and legibility while the overall layout adapts to the mobile device viewing window.
Solution Approach 2:
The system transforms the two-dimensional infographic layout into a reflowed layout that optimizes for mobile device dimensions. By detecting the reading order and rearranging components vertically and horizontally based on device specifications, the system maintains text legibility while fitting the content within the mobile viewing window area.
2Measurement precision
If manual zooming is used to read text in the infographic, then text legibility is improved, but user operation complexity increases
Solution Approach 1:
The system automatically performs the reflowing process without requiring user intervention. The machine learning models detect components, determine reading order, and generate the reflowed layout autonomously based on the input infographic and device specifications, eliminating the need for users to manually zoom or navigate through the infographic.
3Adaptability or versatility
If conventional resizing methods are used for infographic display, then device compatibility is improved, but content quality deteriorates
Solution Approach 1:
The system dynamically adapts the infographic layout based on device specifications such as screen size, orientation, and viewing window dimensions. The reflowed layout is generated in real-time for each device, maintaining content quality and text legibility while ensuring compatibility across different mobile devices and viewing conditions.
Data Source
AI summary
Embodiments are disclosed for reflowing an infographic image for display in a mobile device using machine learning models. In particular, in one or more embodiments, the method may include receiving a document for display in a user device, the document including an infographic image. The method may further include identifying, using a convolutional neural network, visual components of the infographic image. The method may further include determining, using an encoder-decoder network, an ordered sequence of the identified visual components. A generative adversarial network then generates a modified visual representation of the infographic image based on the identified visual components and the determined ordered sequence of the identified visual components. The modified visual of representation of the infographic image is then presented for display in a viewing pane of a user device in place of the infographic image.