A design collaboration platform requirement content intelligent extraction method, device, equipment and medium

Abstract

This invention provides a method, apparatus, device, and medium for intelligent extraction of requirements content for a design collaboration platform. The method includes: simultaneously injecting scripts into the main document and all nested iframes via browser extensions; traversing DOM elements and performing standardized matching with user-configured target colors, automatically filtering out interfering elements; obtaining the absolute coordinates of the matched elements and performing two-dimensional sorting based on vertical coordinates first, followed by horizontal coordinates; spatially grouping the sorted elements based on a vertical distance threshold, grouping text with similar positions into the same functional block; automatically identifying content levels through font weight attributes, distinguishing between titles and detailed descriptions; sending the extracted structured requirements to a large language model, simultaneously completing the requirement table organization and test case generation through dual-task prompts; supporting incremental extraction and automatic session recovery, achieving a one-stop automated conversion from design drafts to structured requirement tables and test cases.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence technology, and in particular to a method, apparatus, device, and medium for intelligent extraction of requirements content for a collaborative design platform. Background Technology

[0002] In the software product development process, product managers typically use design collaboration platforms such as Bluelake to publish UI design drafts. These drafts use specific colors, such as orange and brown, to highlight requirement descriptions. Testers and developers then extract these requirements from the design drafts, compiling them into requirement tables and test cases as the basis for subsequent software testing.

[0003] Current methods for extracting requirements primarily rely on manual operation: testers browse through design drafts page by page, visually identify requirement text highlighted in specific colors, manually copy this text, and then paste it into Word or Excel spreadsheets for categorization. Some technically skilled testers use browser developer tools to check the calculated style color values ​​of page elements to help locate requirement markings, but this still requires manually copying the text text line by line, making batch automated extraction impossible.

[0004] Furthermore, design collaboration platforms typically present design drafts scattered across the main page and multiple nested iframes, making it easy to overlook content within iframes during manual browsing. Long design drafts require scrolling, and it's easy to skip some annotated text during scrolling. Bold text in design drafts usually indicates functional module titles, while text with normal weight indicates detailed explanations; however, this hierarchical relationship is completely lost during manual copy-pasting, requiring manual re-identification and reorganization. The process from requirements extraction to test case writing is two completely independent manual steps, making it impossible to automatically generate corresponding basic test points simultaneously with requirements extraction.

[0005] Therefore, how to improve the efficiency of extracting requirements from design drafts, ensure the completeness and correctness of the extracted content, and automatically identify the hierarchical structure of requirements and generate test cases in conjunction with them are technical problems that urgently need to be solved in this field. Summary of the Invention

[0006] The technical problem to be solved by the present invention is to provide a method, device, equipment and medium for intelligent extraction of requirements content for a design collaboration platform, which realizes one-stop automated conversion from design drafts to structured requirement tables and test cases.

[0007] In a first aspect, the present invention provides a method for intelligent extraction of requirements content for a collaborative design platform, comprising the following steps: Step S1: Through the browser extension's script injection mechanism, execute the content extraction script simultaneously in the main document of the design collaboration platform page and all nested iframes, and set the allFrames parameter to true to ensure that the script runs independently in each execution environment; Step S2: Traverse the DOM elements on the page, obtain the calculated style color value of each element, standardize the format of the target color configured by the user and match it precisely with the calculated style color value, and filter out the preset interference elements by detecting the CSS class name of the parent element. Step S3: Call the getBoundingClientRect method to obtain the position coordinates of the element that is matched by color relative to the viewport, calculate the absolute coordinates of the page in combination with the scroll offset of the current page, and then sort all the matched elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. Step S4: In the sorted element sequence, calculate the vertical distance between adjacent elements in turn. When the vertical distance is less than the first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. Step S5: Call the getComputedStyle method to get the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, mark the element as a title level and add a title mark to the output text. When the font weight value is less than or equal to the second preset threshold, mark it as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and the multi-level structure is output as structured requirement content. Step S6: Match the data-src attribute of all img elements on the page using regular expressions, and extract image elements that conform to the preset image path pattern. The preset image path pattern is the naming pattern of images starting with u followed by numbers and then dot png in the images folder, and the width of the image element is greater than the third preset threshold. Use the alt attribute or file name of the image element as the page title. Step S7: Associate and integrate the page title with the structured requirement content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirement points, and detailed descriptions, form a complete extraction result and output it.

[0008] Secondly, this invention provides an intelligent extraction device for design collaboration platform requirements, comprising: The Frame injection module uses the browser's extended script injection mechanism to execute content extraction scripts simultaneously in the main document and all nested iframes of the design collaboration platform page. Setting the allFrames parameter to true ensures that the script runs independently in each execution environment. The color matching and filtering module iterates through the DOM elements on the page, obtains the calculated style color value of each element, standardizes the target color configured by the user and matches it precisely with the calculated style color value, and filters out preset interference elements by detecting the CSS class name of the parent element. The coordinate sorting module calls the getBoundingClientRect method to obtain the position coordinates of the element relative to the viewport by matching the color. It calculates the absolute coordinates of the page by combining the current page's scroll offset, and then sorts all matching elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. The spatial grouping module calculates the vertical distance between adjacent elements in the sorted element sequence. When the vertical distance is less than a first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. The requirement content construction module calls the getComputedStyle method to obtain the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, the element is marked as a title level and a title mark is added to the output text. When the font weight value is less than or equal to the second preset threshold, it is marked as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and this multi-level structure is output as structured requirement content. The page title construction module uses regular expressions to match the data-src attribute of all img elements on the page, extracts image elements that conform to a preset image path pattern. The preset image path pattern is a naming pattern in the images folder that starts with u followed by numbers and then .png, and the width of the image element is greater than a third preset threshold. The alt attribute or filename of the image element is then used as the page title. The results output module associates and integrates the page title with the structured requirements content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirements, and detailed descriptions, forms and outputs the complete extraction results.

[0009] Thirdly, the present invention provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in the first aspect.

[0010] Fourthly, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.

[0011] One or more technical solutions provided by this invention have at least the following technical effects or advantages: 1. This invention automates the scanning of requirement annotation text in design draft pages through browser extensions, eliminating the need for manual location, selection, copying, and pasting of each text. This reduces the manual extraction work that originally took several hours to just a few minutes, greatly improving the efficiency of requirement analysis for testers.

[0012] 2. This invention, by setting the `allFrames` parameter to `true`, executes the extraction script simultaneously in the main document and all nested iframes, completely resolving the technical problem of easily overlooking required content within iframes during manual browsing. Simultaneously, by detecting the CSS class names of parent elements, it automatically filters out interfering elements such as buttons and icons, preventing the accidental extraction of non-required text.

[0013] 3. This invention obtains the absolute page coordinates of each required text element and adopts a two-dimensional sorting strategy that prioritizes vertical coordinates and then horizontal coordinates. This ensures that the order of the extracted results is completely consistent with the natural visual reading order of the user on the design draft, thus solving the problem of disordered order when manually copying.

[0014] 4. This invention obtains the font weight attribute value of elements, automatically distinguishes between bolded titles and normal weighted detailed descriptions, and constructs a four-level structure of page title, functional modules, requirements, and detailed descriptions, without the need for manual re-identification and reorganization of hierarchical relationships.

[0015] 5. This invention sends the extracted structured requirements to the large language model. Through preset dual-task prompts, the requirements table is organized and test cases are generated simultaneously in one call, realizing one-stop automation from requirements extraction to test preparation and reducing repetitive work for testers.

[0016] 6. This invention supports users to perform extraction operations sequentially on different design draft pages. Multiple extraction results are automatically appended and merged instead of overwriting. Extracted content and user edits are saved to local storage in real time. When the extended window is closed and reopened, the previous working state is automatically restored, ensuring the continuity of the multi-page design draft extraction workflow.

[0017] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and in order to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description

[0018] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0019] Figure 1 This is a flowchart of the method in Embodiment 1 of the present invention; Figure 2 This is a schematic diagram of the device in Embodiment 2 of the present invention. Detailed Implementation

[0020] The overall concept of the technical solution in this application is as follows: This application proposes a method for intelligent extraction of design draft requirements and automatic generation of test cases based on browser extensions, including the following technical points: (1) Multi-Frame Color Matching Extraction Technology By using the Chrome extension's chrome.scripting.executeScript API, the script extraction function is injected into the main document and all iframes of the target design page (allFrames: true). The script then iterates through all iframes on the page. For each element, `window.getComputedStyle` is used to retrieve its computed style color value. The user-configured target color (supporting hexadecimal, RGB, color names, and other formats) is standardized to rgb(r, g, b) format before precise matching. Simultaneously, distracting elements under specific CSS classes (such as the ax_default button) are filtered out to ensure the accuracy of the extracted content.

[0021] (2) Intelligent sorting and grouping algorithm based on DOM position For all matched elements, their viewport coordinates are obtained using `getBoundingClientRect()`, and their absolute page coordinates are calculated using `window.scrollY / scrollX`. A strict two-dimensional sorting strategy is employed: elements are first sorted in ascending order by vertical coordinate (top), and if vertical coordinates are the same, they are sorted in ascending order by horizontal coordinate (left), ensuring that the extracted content is consistent with the visual reading order of the page. After sorting, a proximity grouping algorithm based on a vertical distance threshold (GROUP_DISTANCE=100px) is used to automatically group elements with similar spatial positions into the same functional block.

[0022] (3) Content hierarchy recognition based on font thickness perception The `fontWeight` property value of an element is obtained using `window.getComputedStyle`. When `fontWeight` > 500, it is determined to be bold text and automatically marked as a functional requirement (heading-level content); non-bold text is categorized as detailed information. The page title is intelligently extracted by combining the image path in the page URL (images / design collaboration platform requirement content intelligent extraction x / u*.png mode in the `data-src` attribute), achieving automatic mapping from the raw DOM to a four-level structure of "page title - functional module - requirement - detailed description".

[0023] (4) AI-driven generation of requirement tables and automatic generation of test cases The extracted raw requirement text is sent to a large language model. Through carefully designed prompt engineering, the AI ​​is guided to complete two tasks: ① Organize the unstructured requirement text into a structured Markdown table containing "page title, functional module, functional requirement points, and detailed information," keeping the original text 100% unmodified; ② Based on the detailed information of each requirement, automatically generate basic test cases covering dimensions such as functional verification, rule validation, and interaction testing, listed in points numbered a, b, c. Finally, it supports one-click export to an Excel file (.xlsx format) with merged cells.

[0024] (5) Incremental extraction and edit preservation mechanism It supports incremental extraction across pages, automatically appending and merging results from multiple extractions instead of overwriting them. Extraction results are saved to the browser's local storage (chrome.storage.local) in real time, allowing users to manually edit and correct in the text area before automatic saving. When the extension window is closed and reopened, the last extraction results and screenshots are automatically restored, ensuring workflow continuity.

[0025] Step 1: Inject the script into all frames By using the chrome.scripting.executeScript API of the Chrome extension and setting allFrames:true, the extracted script will execute simultaneously on the main page and in all iframes: / / popup.js - Executes the extraction script in the main page and all frames const results = await chrome.scripting.executeScript({ target: { tabId: tab.id, allFrames: true / / Key: Execute in all frames }, func: extractOrangeContent, args: [config.targetColors] }); Step 2: Color Matching Traverse all pages The element uses `window.getComputedStyle` to obtain the actual rendered color and compares it with the target color. User-input color formats may vary (hexadecimal, RGB, color name), so it's first converted to RGB (r, g, b) format. / / Inside the `extractOrangeContent` function in `popup.js` / / Convert hexadecimal to RGB format function hexToRgb(hex) { hex = hex.replace('#', '').toLowerCase(); if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); return `rgb(${r}, ${g}, ${b})`; } / / Standardize all target colors to RGB format const normalizedTargetColors = targetColors.map(color => { if (color.startsWith('#')) { return hexToRgb(color); } if (color.startsWith('rgb')) { const match = color.match( / rgb\((\d+),\s*(\d+),\s*(\d+)\) / ); if (match) { return `rgb(${match[1]}, ${match[2]}, ${match[3]})`; } } return color; }); / / Scan all span elements and match the target color const spans = Array.from(document.querySelectorAll('span')); const matchedSpans = spans.filter(span => { / / Filter out distracting elements such as buttons let parent = span.parentElement; while (parent) { if (parent.classList && parent.classList.contains('ax_default') && parent.classList.contains('button')) { return false; } parent = parent.parentElement; } / / Get the element's actual rendered color and compare it with the target color. const computedStyle = window.getComputedStyle(span); const color = computedStyle.color; return normalizedTargetColors.some(target => color === target); }); Step 3: Sort by position Obtain the absolute page coordinates (viewport coordinates + scroll offset) of each matched element, strictly sorted by top in ascending order, then by left in ascending order: / / popup.js - Get element absolute coordinates const rect = targetElement.getBoundingClientRect(); const absoluteTop = rect.top + window.scrollY; const absoluteLeft = rect.left + window.scrollX; / / Smart sorting: from top to bottom, from left to right const sorted = items.sort((a, b) => { const topDiff = a.position.top - b.position.top; if (topDiff !== 0) { return topDiff; / / If top values ​​are different, sort by top. } return a.position.left - b.position.left; / / If the top positions are the same, sort by left. }); Step 4: Automatic Grouping After sorting, determine whether adjacent elements belong to the same functional block based on their vertical distance. Elements with a distance less than a threshold (100px) are grouped together. / / popup.js - Grouping based on vertical distance const GROUP_DISTANCE = 100; / / Vertical distance threshold let currentGroup = { items: [items[0]]}; for (let i = 1; i < items.length; i++) { const prevItem = items[i - 1]; const currItem = items[i]; const verticalDistance = Math.abs(currItem.position.top -prevItem.position.top); if (verticalDistance < GROUP_DISTANCE) { / / If the distance is close, add it to the current group currentGroup.items.push(currItem); } else { / / Due to distance, start a new group groups.push(currentGroup); currentGroup = { items: [currItem]}; } } groups.push(currentGroup); / / Add the last group Step 5: Hierarchical Recognition The `fontWeight` property determines whether the text is bold. Bold text is marked as the function title (prefixed with #), while non-bold text is used for detailed descriptions. / / popup.js - Font Weight Sensing const computedStyle = window.getComputedStyle(targetElement); const fontWeight = parseInt(computedStyle.fontWeight) || 400; const isBold = fontWeight > 500; allItems.push({ text: isBold ? `# ${text}` : text, / / Bold text prefixed with # is used to mark a heading isBold: isBold, fontWeight: fontWeight, position: { top: absoluteTop, left: absoluteLeft} }); Step 6: Output and Persistence The extraction results are displayed in the text box and automatically saved to the browser's local storage. Multiple extractions will use append mode, without overwriting previous results. / / popup.js - Append merge mode const existingContent = resultContent.value.trim(); const mergedContent = existingContent `${existingContent}\n\n${rawContent}` / / Append to existing content rawContent; displayResult(mergedContent); / / Save to local storage, close the window and reopen it to restore. chrome.storage.local.set({ lastResult: content}); The operation is now complete.

[0026] Example 1 like Figure 1 As shown, this embodiment provides a method for intelligently extracting requirements from a design collaboration platform, including the following steps: Step S1: Through the browser extension's script injection mechanism, execute the content extraction script simultaneously in the main document of the design collaboration platform page and all nested iframes, and set the allFrames parameter to true to ensure that the script runs independently in each execution environment; Step S2: Traverse the DOM elements on the page, obtain the calculated style color value of each element, standardize the format of the target color configured by the user and match it precisely with the calculated style color value, and filter out the preset interference elements by detecting the CSS class name of the parent element. Step S3: Call the getBoundingClientRect method to obtain the position coordinates of the element that is matched by color relative to the viewport, calculate the absolute coordinates of the page in combination with the scroll offset of the current page, and then sort all the matched elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. Step S4: In the sorted element sequence, calculate the vertical distance between adjacent elements in turn. When the vertical distance is less than the first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. Step S5: Call the getComputedStyle method to get the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, mark the element as a title level and add a title mark to the output text. When the font weight value is less than or equal to the second preset threshold, mark it as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and the multi-level structure is output as structured requirement content. Step S6: Match the data-src attribute of all img elements on the page using regular expressions, and extract image elements that conform to the preset image path pattern. The preset image path pattern is the naming pattern of images starting with u followed by numbers and then dot png in the images folder, and the width of the image element is greater than the third preset threshold. Use the alt attribute or file name of the image element as the page title. Step S7: Associate and integrate the page title with the structured requirement content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirement points, and detailed descriptions, form a complete extraction result and output it.

[0027] In this embodiment, preferably, the target color format standardization in step S2 specifically involves: for hexadecimal input, after removing the # prefix, determining the length of the remaining string; if the length is three digits, repeating each digit once to convert it to six digits; if the length is six digits, leaving it unchanged; parsing the resulting six-digit string into red, green, and blue components and assembling it into an RGB format string; for RGB input, extracting red, green, and blue values ​​using regular expressions and reassembling them into a standard RGB format; for color name input, converting it to the corresponding RGB format using a predefined name-to-value mapping table. The step S2 of filtering preset interference elements by detecting the CSS class name of the parent element specifically involves: traversing the parent element chain of the target element, and when the CSS class name of any parent element contains a predefined combination of button type class names, the current element is determined to be an interference element and is skipped.

[0028] In this embodiment, preferably, the first preset threshold in step S4 is 100 pixels; The second preset threshold in step S5 is preferably a weight level of 500. A font weight value greater than 500 is determined to be bold, and a font weight less than or equal to 500 is determined to be normal.

[0029] In this embodiment, preferably, the page title extraction in step S5 further includes: matching the data-src attribute of all img elements in the page using regular expressions, extracting image elements that conform to a preset image path pattern and whose image width is greater than a preset threshold, and using the alt attribute or filename of the image element as the page title.

[0030] In this embodiment, preferably, it also includes step S8: sending the extraction results and preset prompt words to the large language model, organizing the unstructured requirement text into a structured table containing four columns: page title, functional module, functional requirement point, and detailed information, while strictly retaining the original text content without any modification, and generating test cases covering three dimensions of functional verification, rule verification, and interaction verification based on the content of the detailed information column, and listing them in alphabetical order.

[0031] In this embodiment, preferably, the preset prompts in step S8 include the following elements: setting the role of artificial intelligence as a junior tester, specifying the organization rules of 100% retaining the original text, specifying the rules of intelligently simplifying and extracting functional modules from the functional requirement point titles, specifying that test cases are listed in the format of letters a, b, c followed by periods and spaces, and specifying that the output is a Markdown table containing five columns: page title, functional module, functional requirement point, detailed information, and test cases, and that the same page title and functional module are represented by blank cells to achieve a visual merged cell effect; The large language model call in step S8 is relayed through the background service script of the browser extension: the front-end page sends the request to the background script, the background script selects the multimodal model or plain text model according to whether image data exists, constructs a message body that conforms to the application programming interface specification and sends the request, and returns the response result to the front-end page, thus solving the problem of cross-domain resource sharing restrictions of the front-end page.

[0032] In this embodiment, preferably, it also includes step S9: supporting incremental extraction and session persistence across pages. When a user performs an extraction operation on the first page and obtains the first extraction result, and then switches to the second page to perform the extraction operation again, the extraction result of the second page is appended to the end of the first extraction result with two newline characters as separators, achieving appending and merging rather than overwriting; the extraction result is saved to the browser's local storage in real time; the content manually edited by the user in the text box triggers automatic saving and updating; when the extended window is closed and reopened, the previous extraction result is loaded from local storage to restore the working session; The browser's local storage is implemented by calling the chrome.storage.local application programming interface, and the stored content includes the user-configured target color list, the selection of artificial intelligence service providers, the application programming interface key, custom prompts, extracted results, and screenshot data.

[0033] Based on the same inventive concept, this application also provides an apparatus corresponding to the method in Embodiment 1, as detailed in Embodiment 2.

[0034] Example 2 like Figure 2 As shown, this embodiment provides a device for intelligent extraction of design collaboration platform requirements, including: The Frame injection module uses the browser's extended script injection mechanism to execute content extraction scripts simultaneously in the main document and all nested iframes of the design collaboration platform page. Setting the allFrames parameter to true ensures that the script runs independently in each execution environment. The color matching and filtering module iterates through the DOM elements on the page, obtains the calculated style color value of each element, standardizes the target color configured by the user and matches it precisely with the calculated style color value, and filters out preset interference elements by detecting the CSS class name of the parent element. The coordinate sorting module calls the getBoundingClientRect method to obtain the position coordinates of the element relative to the viewport by matching the color. It calculates the absolute coordinates of the page by combining the current page's scroll offset, and then sorts all matching elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. The spatial grouping module calculates the vertical distance between adjacent elements in the sorted element sequence. When the vertical distance is less than a first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. The requirement content construction module calls the getComputedStyle method to obtain the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, the element is marked as a title level and a title mark is added to the output text. When the font weight value is less than or equal to the second preset threshold, it is marked as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and this multi-level structure is output as structured requirement content. The page title construction module uses regular expressions to match the data-src attribute of all img elements on the page, extracts image elements that conform to a preset image path pattern. The preset image path pattern is a naming pattern in the images folder that starts with u followed by numbers and then .png, and the width of the image element is greater than a third preset threshold. The alt attribute or filename of the image element is then used as the page title. The results output module associates and integrates the page title with the structured requirements content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirements, and detailed descriptions, forms and outputs the complete extraction results.

[0035] In this embodiment, preferably, the standardization of the target color format in the color matching and filtering module is specifically as follows: For hexadecimal input, after removing the # prefix, the length of the remaining string is determined. If the length is three digits, each digit is repeated once to convert it to six digits; if the length is six digits, it remains unchanged. The resulting six-digit string is parsed into red, green, and blue components and then assembled into an RGB format string. For RGB format input, the red, green, and blue values ​​are extracted using regular expressions and then reassembled into a standard RGB format. For color name input, it is converted to the corresponding RGB format using a predefined name-to-value mapping table. The color matching and filtering module filters preset interference elements by detecting the CSS class name of the parent element. Specifically, it iterates through the parent element chain of the target element. When the CSS class name of any parent element contains a predefined combination of button type class names, the current element is determined to be an interference element and is skipped.

[0036] In this embodiment, preferably, the first preset threshold in the spatial grouping module is 100 pixels; The second preset threshold in the content construction module is preferably a weight level of 500. A font weight value greater than 500 is determined to be bold, and a weight less than or equal to 500 is determined to be normal.

[0037] In this embodiment, preferably, the page title extraction in the content construction module further includes: matching the data-src attribute of all img elements on the page using regular expressions, extracting image elements that conform to a preset image path pattern and whose image width is greater than a preset threshold, and using the alt attribute or filename of the image element as the page title.

[0038] In this embodiment, preferably, it also includes a model processing module, which sends the extraction results and preset prompt words to the large language model, organizes the unstructured requirement text into a structured table containing four columns: page title, functional module, functional requirement point, and detailed information, and strictly retains the original text content without any modification, and generates test cases covering three dimensions of functional verification, rule verification, and interaction verification based on the content of the detailed information column, and lists them in alphabetical order.

[0039] In this embodiment, preferably, the preset prompts in the model processing module include the following elements: setting the role of artificial intelligence as a junior tester, specifying the organization rules of 100% retaining the original text, specifying the rules of intelligently simplifying and extracting functional modules from the functional requirement point titles, specifying that test cases are listed in the format of letters a, b, c followed by periods and spaces, and specifying that the output is a Markdown table containing five columns: page title, functional module, functional requirement point, detailed information, and test cases, and that the same page title and functional module are represented by blank cells to achieve a visual merged cell effect; The large language model call in the model processing module is relayed through the browser's extended background service script: the front-end page sends the request to the background script, the background script selects a multimodal model or a plain text model based on whether image data exists, constructs a message body that conforms to the application programming interface specification, sends the request, and returns the response result to the front-end page, thus solving the problem of cross-domain resource sharing restrictions on the front-end page.

[0040] In this embodiment, preferably, it also includes an incremental extraction and session persistence module, which supports incremental extraction and session persistence across pages. When a user performs an extraction operation on the first page and obtains the first extraction result, and then switches to the second page to perform the extraction operation again, the extraction result of the second page is appended to the end of the first extraction result with two newline characters as separators, achieving appending and merging rather than overwriting; the extraction result is saved to the browser's local storage in real time; the content manually edited by the user in the text box triggers automatic saving and updating; when the extended window is closed and reopened, the previous extraction result is loaded from local storage, and the working session is restored. The browser's local storage is implemented by calling the chrome.storage.local application programming interface, and the stored content includes the user-configured target color list, the selection of artificial intelligence service providers, the application programming interface key, custom prompts, extracted results, and screenshot data.

[0041] Since the apparatus described in Embodiment 2 of the present invention is an apparatus used to implement the method of Embodiment 1 of the present invention, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be described again here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of the present invention.

[0042] Based on the same inventive concept, this application provides an electronic device embodiment corresponding to Embodiment 1, as detailed in Embodiment 3.

[0043] Example 3 This embodiment provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it can implement any of the implementation methods in Embodiment 1.

[0044] Since the electronic device described in this embodiment is the device used to implement the method in Embodiment 1 of this application, those skilled in the art can understand the specific implementation method and various variations of the electronic device in this embodiment based on the method described in Embodiment 1 of this application. Therefore, how the electronic device implements the method in the embodiment of this application will not be described in detail here. Any device used by those skilled in the art to implement the method in the embodiment of this application falls within the scope of protection of this application.

[0045] Based on the same inventive concept, this application provides a storage medium corresponding to Embodiment 1, as detailed in Embodiment 4.

[0046] Example 4 This embodiment provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it can implement any of the implementation methods in Embodiment 1.

[0047] Example 5 This example uses the Lanhu Design Collaboration Platform to extract requirements from the software development and testing team of an internet company. The product manager has published the UI design draft for a certain functional module on the Lanhu platform. The design draft contains five pages: login page, registration page, homepage, personal center page, and settings page. Each page uses orange text to annotate the requirements description, with bold orange text indicating the functional module title and normal weight orange text indicating the detailed description of that module.

[0048] Before starting to write test cases, testers need to extract all the requirements highlighted in orange from the design drafts of these five pages, organize them into a structured requirement table, and generate basic test cases for each requirement.

[0049] Testers first opened the first page of the Blue Lake design draft, i.e., the login page, in the Chrome browser, and then clicked the extension icon in the browser toolbar to open the pop-up interface of the Blue Lake requirement extractor provided by this invention.

[0050] Upon first use of this extension, testers need to perform initialization settings in the configuration area of ​​the pop-up interface. In the target color configuration, testers enter the hexadecimal color value of orange, i.e., hash symbol FF6600. The system will automatically normalize this value to RGB format: brackets 255 comma 102 comma 0. In the AI ​​service provider selection, testers select Tongyi Qianwen as the large language model service provider and enter a valid application programming interface key. In the prompt word configuration, testers can use the system default prompt words, which are pre-set to have the AI ​​role of a junior tester, adhere to the rule of 100% preservation of the original text, and require test cases to be listed using the letters a, b, c, and dots.

[0051] After completing the configuration, the tester clicks the "Extract Required Content" button in the pop-up interface, which corresponds to the text extraction mode of this invention.

[0052] At this point, the system of the present invention begins to perform the following operations.

[0053] The background script injects a content extraction script into the current page via Chrome's scripting > executeScript API, setting the allFrames parameter to true. This script executes simultaneously in the main document of the login page and in all nested iframes within the page, ensuring that no required annotations within any iframes are missed.

[0054] The script iterates through all `span` elements on the page, performing a filtering check on each `span` element to remove unwanted elements. It traverses the parent element chain of each `span` element upwards, checking if any parent element has a CSS class name that contains both `ax_default` and `button`. At the bottom of the login page, there's a confirmation button containing the words "Confirm" in orange. Because the button's parent element contains the aforementioned unwanted class name combination, the script correctly identifies the confirmation button text as unnecessary and skips it, preventing accidental extraction.

[0055] For span elements that pass the interference check, the script calls the `window.getComputedStyle` method to obtain the element's computed style and extracts the `color` attribute value. In the login page, one span element contains the login function requirement, and its computed style color is `rgb 255 comma 102 comma 0`, which perfectly matches the user-configured target color. Therefore, this element is successfully matched and added to the extraction set.

[0056] The script continued scanning and matched the other three orange-marked span elements on the login page. Their contents were: username supports both mobile phone number and email address formats, password length must be at least eight characters and must contain letters and numbers, and clicking the login button will redirect to the homepage.

[0057] The script retrieves the absolute coordinates of each of the four matched elements. Taking the login function element as an example, the script calls the element's `getBoundingClientRect` method to obtain its position relative to the viewport, where the `rect` point `top` is 150 pixels and the `rect` point `left` is 200 pixels. Since the current page is not scrolling, the `window` point `scrollY` is 0 pixels, therefore the element's absolute vertical coordinate is 150 pixels and its absolute horizontal coordinate is 200 pixels. The other three elements obtain their respective absolute coordinates using the same method.

[0058] After obtaining the absolute coordinates of all four elements, the script executes a two-dimensional sorting algorithm. The sorting comparator first compares the absolute vertical coordinates of each element. The vertical coordinate of the login function requirement is 150 pixels, the vertical coordinate of the username supporting both mobile phone number and email address formats is 152 pixels, the vertical coordinate of the password length of at least eight characters is 220 pixels, and the vertical coordinate of the element that redirects to the homepage after clicking the login button is 222 pixels. After sorting according to the vertical coordinates in ascending order, the login function requirement and the username supporting both formats have similar vertical coordinates and the difference is less than the sorting tolerance. Therefore, the horizontal coordinates are further compared. The horizontal coordinate of the login function requirement is 200 pixels, and the horizontal coordinate of the username supporting both formats is 202 pixels. Therefore, the login function requirement is ranked first, the username supporting both formats is ranked second, the password length of at least eight characters is ranked third, and the element that redirects to the homepage after clicking the login button is ranked fourth.

[0059] After sorting, the script executes a spatial grouping algorithm based on a vertical distance threshold. The preset vertical distance threshold is 100 pixels. The script iterates from the first element, calculating that the vertical distance between the second and first elements is 2 pixels, less than the threshold of 100 pixels, so the second element is grouped into the same group as the first element. The vertical distance between the third and second elements is 68 pixels, still less than 100 pixels, so the third element is also grouped into the same group. The vertical distance between the fourth and third elements is 2 pixels, also less than 100 pixels, so the fourth element is also grouped into the same group. Since the vertical distances of all four elements are within the threshold range, they are grouped into the same functional block, which corresponds to the overall functional area of ​​the login page.

[0060] Next, the script performs font weight awareness layer recognition for each matching element. It calls `window.getComputedStyle` to retrieve the `fontWeight` attribute value of each element. The element required for the login function has a `fontWeight` value of 700, which is greater than the preset threshold of 500, therefore it is judged as bold text, and the script adds a hash symbol before its text content as a heading marker. The other three elements have a `fontWeight` value of 400, which is less than or equal to 500, therefore they are judged as normal weight descriptions, and the script directly outputs their original text.

[0061] At this point, the script has completed the extraction of the login page requirements. The first structured requirement output is the login function requirement marked with a hash symbol. After a line break, the requirements are: username supports both mobile phone number and email address formats; password length must be at least eight characters and must contain letters and numbers; clicking the login button will redirect to the homepage. Lines starting with hash symbols are marked as heading levels.

[0062] Simultaneously, the script also extracted the page title. It used regular expressions to match the `data-src` attribute of all `img` elements on the page, extracting image elements that conformed to the pattern "images + slash + 'u' + number + dot + 'png'", and filtering out images with a width greater than a preset threshold. The script then used the `alt` attribute of these images as the page title. Since the page title image for the login page had the `alt` attribute value "login page", the script successfully extracted and output the title.

[0063] The script associates and integrates the first structured requirement content with the page title, using the login page as the top-level identifier, and together with the corresponding functional module login function requirements and detailed descriptions, it constitutes the complete extraction result of the login page.

[0064] At this point, the text box in the pop-up window displays the complete extraction result of the login page. The content is a login page with three hash symbols. After a newline, there is the login function requirement with hash symbols. After another newline, there is the username, which supports both mobile phone number and email address formats. After a newline, there is the password, which must be at least eight characters long and contain letters and numbers. After a newline, there is the message that clicking the login button will redirect to the homepage.

[0065] The testers reviewed the extracted results and confirmed they were correct. Since there are still four pages to extract—the registration page, homepage, personal center page, and settings page—the testers do not need to save the results for each page separately.

[0066] The tester switched to the second page of the Blue Lake design draft, the registration page, and clicked the "Extract Requirements Content" button in the pop-up window again. After this extraction operation was completed, the system automatically appended the extraction results from the registration page to the end of the extraction results from the login page, separated by two line breaks, instead of overwriting the previous content. This incremental extraction mechanism allows testers to obtain complete cross-page requirements content at once after extracting all pages.

[0067] The testers then switched to the homepage, personal center page, and settings page in sequence, and clicked the extract button for each page. The extracted results were automatically appended to the end of the text box content each time.

[0068] After extracting all five pages, the text box contains the structured requirements for all pages. Each page is separated by a page title, and below the page title are the titles of the functional modules for that page and detailed descriptions.

[0069] The tester clicked the AI-generated table button in the pop-up interface. The system took the entire content in the text box as input and forwarded it to the large language model application programming interface through the background service script. Since there was no image data in this call, the background script automatically selected the plain text model, qwen-plus. The system then concatenated the preset dual-task prompts with the required content and sent them to the model.

[0070] The prompt for this dual-task task is as follows: You are a junior tester and need to complete two tasks. Task 1: Organize the requirements into a structured table with four columns: page title, functional modules, functional requirements, and detailed information. The table must be 100% original; no modification, summarization, or rewriting is allowed. Task 2: Generate basic test points for each row, focusing on the content in the detailed information column, covering functional verification, rule validation, and interaction verification, using the letters a, b, and c as bullet points. The output should be a Markdown format table with five columns: page title, functional modules, functional requirements, detailed information, and test cases. Identical page titles and functional modules are represented by blank cells.

[0071] After receiving the request, the large language model processes the content according to the prompt and returns the result. The returned result is a Markdown formatted table. The first row of the table is the header, which consists of vertical lines: page title, functional modules, functional requirements, detailed information, and test cases. Starting from the second row, the data rows are as follows: In the data row corresponding to the login page, the page title column is for the login page, the functional modules column is for the login function, the functional requirements column is for the login function requirements, the detailed information column is for the username (supports both mobile phone number and email address formats), and the test cases column is for: a) supporting mobile phone number format login, b) supporting email format login, and c) providing a prompt when the mobile phone number or email address format is incorrect. In the third row, since the page title and functional modules are the same as in the previous row, these two columns are blank. The functional requirements column is also blank. The detailed information column requires the password to be at least eight characters long and must contain letters and numbers. The test cases column is for: a) prompting an error when the password is less than eight characters long, b) prompting an error when the password does not contain letters, and c) prompting an error when the password does not contain numbers. Similarly, the requirements for all pages were organized into a table format.

[0072] After reviewing the AI-generated table content, testers discovered a typo in a detailed description. They could directly edit the original requirement content in the text box. The editing operation triggered automatic saving, and the modified content was saved to the browser's local storage in real time.

[0073] After the testers confirmed that the final content was correct, they clicked the "Download Table" button in the pop-up window. The system then called the SheetJS table processing library to convert the Markdown table data into an XLSX file. During the conversion process, the system parsed the merged cell markers in the original table and applied the corresponding cell merging to the Excel file for identical page titles and functional modules. The system set the width of the page title column to 20 characters, the functional module column to 30 characters, the details column to 40 characters, and the test case column to 40 characters. The filename was automatically generated by taking the page title (login page) from the first row of data plus the current date, for example, May 29, 2026, and filtering out disallowed special characters in the filename, ultimately generating a "loginpage_20260529.xlsx" file for the testers to download and save.

[0074] Testers may close the browser extension window halfway through the process due to other tasks. When the tester reopens the extension window later, the system automatically loads the previously extracted results and screenshot data from the browser's local storage, resumes the work session, and all the original extracted page content in the text box is fully displayed without the need for re-extraction.

[0075] During the above process, if testers encounter a design draft page containing flowcharts or complex graphics with embedded orange-highlighted text, the ordinary text extraction mode cannot scan the text within the image. In this case, testers can use the screenshot analysis mode. Testers click the screenshot button in the pop-up interface, and the system takes a full-page screenshot of the current page. The system then analyzes and identifies the text content from the image using a multimodal visual model (qwen-vl-plus), returning it to the text box.

[0076] As can be seen from the above specific embodiments, the technical solution provided by the present invention can automatically extract the orange-marked requirement text from the Blue Lake design draft, arrange and group it according to the page order, automatically identify the hierarchical relationship between the title and the detailed description, organize the extraction results into a structured table, automatically generate basic test cases, and support cross-page incremental extraction and session persistence, reducing the manual operation that originally required several hours to a few minutes, which is a significant technological advancement.

[0077] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0078] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0079] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0080] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0081] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A method for intelligently extracting requirements content for a collaborative design platform, characterized in that, Includes the following steps: Step S1: Through the browser extension's script injection mechanism, execute the content extraction script simultaneously in the main document of the design collaboration platform page and all nested iframes, and set the allFrames parameter to true to ensure that the script runs independently in each execution environment; Step S2: Traverse the DOM elements on the page, obtain the calculated style color value of each element, standardize the format of the target color configured by the user and match it precisely with the calculated style color value, and filter out the preset interference elements by detecting the CSS class name of the parent element. Step S3: Call the getBoundingClientRect method to obtain the position coordinates of the element that is matched by color relative to the viewport. Combine the scroll offset of the current page to calculate the absolute coordinates of the page. Then sort all the matched elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. Step S4: In the sorted element sequence, calculate the vertical distance between adjacent elements in turn. When the vertical distance is less than the first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. Step S5: Call the getComputedStyle method to get the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, mark the element as a title level and add a title mark to the output text. When the font weight value is less than or equal to the second preset threshold, mark it as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and the multi-level structure is output as structured requirement content. Step S6: Match the data-src attribute of all img elements on the page using regular expressions, and extract image elements that conform to the preset image path pattern. The preset image path pattern is the naming pattern of images starting with u followed by numbers and then dot png in the images folder, and the width of the image element is greater than the third preset threshold. Use the alt attribute or file name of the image element as the page title. Step S7: Associate and integrate the page title with the structured requirement content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirement points, and detailed descriptions, form a complete extraction result and output it.

2. The method according to claim 1, characterized in that, The target color format standardization in step S2 is specifically as follows: For hexadecimal input, after removing the # prefix, the length of the remaining string is determined. If the length is three digits, each digit is repeated once to convert it to six digits. If the length is six digits, it remains unchanged. The resulting six-digit string is parsed into red, green, and blue components and then assembled into an RGB format string. For RGB format input, the red, green, and blue values ​​are extracted using regular expressions and then reassembled into a standard RGB format. For color name input, it is converted to the corresponding RGB format using a predefined name-to-value mapping table. The step S2 of filtering preset interference elements by detecting the CSS class name of the parent element specifically involves: traversing the parent element chain of the target element, and when the CSS class name of any parent element contains a predefined combination of button type class names, the current element is determined to be an interference element and is skipped.

3. The method according to claim 1, characterized in that, The first preset threshold in step S4 is preferably 100 pixels; The second preset threshold in step S5 is preferably a weight level of 500. A font weight value greater than 500 is determined to be bold, and a font weight less than or equal to 500 is determined to be normal.

4. The method according to claim 1, characterized in that, The page title extraction in step S5 further includes: matching the data-src attribute of all img elements on the page using regular expressions, extracting image elements that conform to a preset image path pattern and whose image width is greater than a preset threshold, and using the alt attribute or filename of the image element as the page title.

5. The method according to claim 1, characterized in that, It also includes step S8: sending the extraction results and preset prompt words to the large language model, organizing the unstructured requirement text into a structured table containing four columns: page title, functional module, functional requirement point, and detailed information, while strictly preserving the original text content without any modification, and generating test cases covering three dimensions of functional verification, rule verification, and interaction verification based on the content of the detailed information column, and listing them in alphabetical order.

6. The method according to claim 7, characterized in that, The preset prompts in step S8 include the following elements: setting the role of artificial intelligence as a junior tester, specifying the organization rules of 100% retaining the original text, specifying the rules of intelligently simplifying and extracting functional modules from the functional requirement point titles, specifying that test cases are listed in the format of letters a, b, c followed by periods and spaces, and specifying that the output is a Markdown table containing five columns: page title, functional module, functional requirement point, detailed information, and test cases, and that the same page title and functional module are represented by blank cells to achieve a visual merged cell effect; The large language model call in step S8 is relayed through the background service script of the browser extension: the front-end page sends the request to the background script, the background script selects the multimodal model or plain text model according to whether image data exists, constructs a message body that conforms to the application programming interface specification and sends the request, and returns the response result to the front-end page, thus solving the problem of cross-domain resource sharing restrictions of the front-end page.

7. The method according to claim 1, characterized in that, It also includes step S9: Supporting incremental extraction and session persistence across pages. When a user performs an extraction operation on the first page and obtains the first extraction result, and then switches to the second page to perform the extraction operation again, the extraction result of the second page is appended to the end of the first extraction result with two newline characters as separators, so as to achieve append merging rather than overwriting. Extraction results are saved to the browser's local storage in real time; content manually edited by the user in the text box triggers automatic saving and updating; when the extended window is closed and reopened, the last extraction results are loaded from local storage, resuming the working session; The browser's local storage is implemented by calling the chrome.storage.local application programming interface, and the stored content includes the user-configured target color list, the selection of artificial intelligence service providers, the application programming interface key, custom prompts, extracted results, and screenshot data.

8. A device for intelligently extracting requirements from a collaborative design platform, characterized in that, include: The Frame injection module uses the browser's extended script injection mechanism to execute content extraction scripts simultaneously in the main document and all nested iframes of the design collaboration platform page. Setting the allFrames parameter to true ensures that the script runs independently in each execution environment. The color matching and filtering module iterates through the DOM elements on the page, obtains the calculated style color value of each element, standardizes the target color configured by the user and matches it precisely with the calculated style color value, and filters out preset interference elements by detecting the CSS class name of the parent element. The coordinate sorting module calls the getBoundingClientRect method to obtain the position coordinates of the element relative to the viewport by matching the color. It calculates the absolute coordinates of the page by combining the current page's scroll offset, and then sorts all matching elements in two dimensions according to the rule of vertical coordinates first and horizontal coordinates second. The spatial grouping module calculates the vertical distance between adjacent elements in the sorted element sequence. When the vertical distance is less than a first preset threshold, the adjacent elements are grouped into the same group. When the vertical distance is greater than or equal to the first preset threshold, a new group is created, thereby dividing elements with similar spatial positions into the same functional block. The requirement content construction module calls the getComputedStyle method to obtain the font weight attribute value of each matched element. When the font weight value is greater than the second preset threshold, the element is marked as a title level and a title mark is added to the output text. When the font weight value is less than or equal to the second preset threshold, it is marked as a detailed description level. In this way, a multi-level structure of page title, functional module, requirement point, and detailed description is constructed, and this multi-level structure is output as structured requirement content. The page title construction module uses regular expressions to match the data-src attribute of all img elements on the page, extracts image elements that conform to a preset image path pattern. The preset image path pattern is a naming pattern in the images folder that starts with u followed by numbers and then .png, and the width of the image element is greater than a third preset threshold. The alt attribute or filename of the image element is then used as the page title. The results output module associates and integrates the page title with the structured requirements content, using the page title as the top-level identifier, and together with the corresponding functional modules, requirements, and detailed descriptions, forms and outputs the complete extraction results.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 7.

Images