System

Abstract

A system is provided.SOLUTION: A system comprising: input means for allowing a user to designate a function, an input item, a display content, and a priority necessary for a screen; transmission means for transmitting the designated input content to a server; analysis / generation means for analyzing the input content received by the server and generating a plurality of wire frame patterns; display means for presenting the generated wire frame patterns to the user; and selection means for allowing the user to select an optimal wire frame pattern from the presented wire frame patterns.SELECTED DRAWING: Figure 1

Description

[Technical Field]

[0001] The technology of the present disclosure relates to a system. [Background technology]

[0002] Patent document 1 discloses a persona chatbot control method performed by at least one processor, the method including the steps of receiving a user utterance, adding the user utterance to a prompt including an instruction sentence related to a description of the chatbot character, encoding the prompt, and inputting the encoded prompt into a language model to generate a chatbot utterance in response to the user utterance. [Prior art documents] [Patent documents]

[0003] [Patent Document 1] Japanese Patent Publication No. 2022-180282 Summary of the Invention [Problem to be solved by the invention]

[0004] Creating existing wireframes takes a lot of time and effort, slowing down the planning process. Communication with designers can also be challenging, and the intended design may not be accurately reflected. This results in project delays and reduced efficiency. [Means for solving the problem]

[0005] The present invention provides a system that includes an input means for the user to specify the functions, input items, display content, and priority required for the screen, a transmission means for transmitting the specified input content to a server, an analysis / generation means for analyzing the input content received by the server and generating multiple wireframe patterns, a display means for presenting the generated wireframe patterns to the user, and a selection means for the user to select the most appropriate one from the presented wireframe patterns, thereby significantly reducing the amount of work required to create wireframes and enabling projects to be progressed quickly and efficiently.

[0006] "Input means" refers to a device or interface that allows a user to specify the functions, input items, display content, and priority required on the screen.

[0007] The "transmission means" is a communication interface or function for transmitting the specified input contents to the server.

[0008] The "analysis and generation means" refers to an algorithm or program that analyzes the input content received by the server and generates multiple wireframe patterns.

[0009] A "display means" is a device or interface for presenting the generated wireframe pattern to a user.

[0010] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0011] A "server" is a computer system that receives input from a user and performs analysis and generates wireframe patterns.

[0012] "User" means an individual or entity that uses the System to specify and select wireframes.

[0013] A "wireframe" is a framework that visually shows the components and layout of a screen.

[0014] A "layout pattern" is a design format of multiple wireframes in which specified elements are arranged in different ways.

[0015] "Priority" is an index that indicates the importance of an input item or function, and is used to determine the layout of screen elements based on this. [Brief explanation of the drawings]

[0016] [Figure 1] 1 is a conceptual diagram showing an example of the configuration of a data processing system according to a first embodiment. [Figure 2] 1 is a conceptual diagram showing an example of main functions of a data processing device and a smart device according to a first embodiment. [Figure 3] FIG. 10 is a conceptual diagram showing an example of the configuration of a data processing system according to a second embodiment. [Figure 4] FIG. 10 is a conceptual diagram showing an example of main functions of a data processing device and smart glasses according to a second embodiment. [Figure 5] FIG. 10 is a conceptual diagram showing an example of the configuration of a data processing system according to a third embodiment. [Figure 6] FIG. 11 is a conceptual diagram showing an example of main functions of a data processing device and a headset-type terminal according to a third embodiment. [Figure 7] FIG. 10 is a conceptual diagram showing an example of the configuration of a data processing system according to a fourth embodiment. [Figure 8] FIG. 10 is a conceptual diagram showing an example of main functions of a data processing device and a robot according to a fourth embodiment. [Figure 9] 1 shows an emotion map onto which multiple emotions are mapped. [Figure 10] 1 shows an emotion map onto which multiple emotions are mapped. [Figure 11] FIG. 3 is a sequence diagram showing a processing flow of the data processing system according to the first embodiment. [Figure 12]FIG. 10 is a sequence diagram showing the flow of processing in the data processing system in Application Example 1. [Figure 13] FIG. 10 is a sequence diagram showing the flow of processing in the data processing system according to the second embodiment when an emotion engine is combined. [Figure 14] FIG. 10 is a sequence diagram showing the flow of processing in the data processing system in Application Example 2 when an emotion engine is combined. DETAILED DESCRIPTION OF THE INVENTION

[0017] An example of an embodiment of a system according to the technology of the present disclosure will be described below with reference to the accompanying drawings.

[0018] First, the terms used in the following description will be explained.

[0019] In the following embodiments, a coded processor (hereinafter simply referred to as a "processor") may be a single arithmetic device or a combination of multiple arithmetic devices. Furthermore, a processor may be a single type of arithmetic device or a combination of multiple types of arithmetic devices. Examples of arithmetic devices include a CPU (Central Processing Unit), a GPU (Graphics Processing Unit), a GPGPU (General-Purpose computing on Graphics Processing Units), and an APU (Accelerated Processing Unit).

[0020] In the following embodiments, a coded RAM (Random Access Memory) is a memory in which information is temporarily stored and is used as a working memory by a processor.

[0021] In the following embodiments, the coded storage is one or more non-volatile storage devices that store various programs, various parameters, etc. Examples of non-volatile storage devices include flash memory (SSD (Solid State Drive)), magnetic disks (e.g., hard disks), and magnetic tapes.

[0022] In the following embodiments, a communication I / F (Interface) with a symbol is an interface including a communication processor, an antenna, etc. The communication I / F controls communication between multiple computers. Examples of communication standards applied to the communication I / F include wireless communication standards including 5G (5th Generation Mobile Communication System), Wi-Fi (registered trademark), Bluetooth (registered trademark), etc.

[0023] In the following embodiments, "A and / or B" is synonymous with "at least one of A and B." In other words, "A and / or B" means that it may be only A, only B, or a combination of A and B. Furthermore, in this specification, the same concept as "A and / or B" is also applied when three or more things are expressed connected by "and / or."

[0024] [First embodiment]

[0025] FIG. 1 shows an example of the configuration of a data processing system 10 according to the first embodiment.

[0026] 1, a data processing system 10 includes a data processing device 12 and a smart device 14. An example of the data processing device 12 is a server.

[0027] The data processing device 12 includes a computer 22, a database 24, and a communication I / F 26. The computer 22 is an example of a "computer" according to the technology of the present disclosure. The computer 22 includes a processor 28, a RAM 30, and a storage 32. The processor 28, the RAM 30, and the storage 32 are connected to a bus 34. The database 24 and the communication I / F 26 are also connected to the bus 34. The communication I / F 26 is connected to a network 54. Examples of the network 54 include a WAN (Wide Area Network) and / or a LAN (Local Area Network).

[0028] The smart device 14 includes a computer 36, a reception device 38, an output device 40, a camera 42, and a communication I / F 44. The computer 36 includes a processor 46, a RAM 48, and a storage 50. The processor 46, the RAM 48, and the storage 50 are connected to a bus 52. The reception device 38, the output device 40, and the camera 42 are also connected to the bus 52.

[0029] The reception device 38 includes a touch panel 38A, a microphone 38B, and the like, and receives user input. The touch panel 38A detects contact with an indicator (for example, a pen or a finger) to receive user input by the touch of the indicator. The microphone 38B detects the user's voice to receive user input by voice. The control unit 46A transmits data indicating the user input received by the touch panel 38A and the microphone 38B to the data processing device 12. In the data processing device 12, the specific processing unit 290 acquires the data indicating the user input.

[0030] The output device 40 includes a display 40A and a speaker 40B, and presents data to the user 20 by outputting the data in a form of expression that the user 20 can perceive (for example, audio and / or text). The display 40A displays visible information such as text and images in accordance with instructions from the processor 46. The speaker 40B outputs audio in accordance with instructions from the processor 46. The camera 42 is a compact digital camera equipped with an optical system including a lens, aperture, and shutter, and an imaging element such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor.

[0031] The communication I / F 44 is connected to a network 54. The communication I / Fs 44 and 26 control the exchange of various information between the processor 46 and the processor 28 via the network 54.

[0032] FIG. 2 shows an example of the main functions of the data processing device 12 and the smart device 14.

[0033] 2, in the data processing device 12, a specific process is performed by the processor 28. A specific processing program 56 is stored in the storage 32. The specific processing program 56 is an example of a "program" according to the technology of the present disclosure. The processor 28 reads the specific processing program 56 from the storage 32 and executes the read specific processing program 56 on the RAM 30. The specific process is realized by the processor 28 operating as a specific processing unit 290 in accordance with the specific processing program 56 executed on the RAM 30.

[0034] The storage 32 stores a data generation model 58 and an emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.

[0035] In the smart device 14, the processor 46 performs the reception output process. The storage 50 stores a reception output program 60. The reception output program 60 is used in conjunction with the specific processing program 56 by the data processing system 10. The processor 46 reads the reception output program 60 from the storage 50 and executes the read reception output program 60 on the RAM 48. The reception output process is realized by the processor 46 operating as the control unit 46A in accordance with the reception output program 60 executed on the RAM 48.

[0036] Next, a description will be given of the specific processing performed by the specific processing unit 290 of the data processing device 12. In the following description, the data processing device 12 will be referred to as a "server" and the smart device 14 will be referred to as a "terminal."

[0037] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0038] System configuration

[0039] The system mainly consists of the following components:

[0040] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[0041] 2. Transmission means: A communication interface that transmits input contents to the server.

[0042] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[0043] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[0044] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[0045] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[0046] Program processing explanation

[0047] User Input and Data Submission

[0048] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0049] The terminal sends the user's input to the server. This sent data includes all the specified items and their priorities.

[0050] Data analysis and wireframe generation

[0051] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0052] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0053] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0054] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0055] Wireframe presentation and selection

[0056] The server transmits the generated wireframe patterns to the terminal.

[0057] The device displays these wireframe patterns to the user, who then sees a preview of each pattern.

[0058] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0059] Specific examples

[0060] For example, to generate wireframes for a new user registration screen:

[0061] The user enters the following:

[0062] Required features: "Register" button, Cancel button

[0063] Input fields: Text field "User name", text field "Email address", text field "Password"

[0064] Display: "User Registration" heading, link to Terms of Use

[0065] Priority: Register button (high), Cancel button (low)

[0066] The device sends this data to a server, which generates multiple wireframe patterns, presents them to the user, and the user can select the most suitable pattern to quickly and efficiently create a wireframe.

[0067] This system reduces the amount of work required to create wireframes, improves the speed and efficiency of project progress, and also facilitates smoother communication with designers, improving the overall design quality.

[0068] The processing flow will be explained below.

[0069] Step 1:

[0070] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[0071] Step 2:

[0072] The user specifies the following inputs on the project creation screen:

[0073] Required functionality (e.g. "Register" button, Cancel button)

[0074] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[0075] Display content (e.g., "User Registration" heading, link to Terms of Use)

[0076] Priority (e.g., Register button (high), Cancel button (low))

[0077] Step 3:

[0078] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[0079] Step 4:

[0080] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[0081] Step 5:

[0082] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[0083] Step 6:

[0084] The server follows basic layout rules to properly arrange the necessary functions and input fields. At this stage, adjustments are also made to position the main elements in prominent positions according to priority.

[0085] Step 7:

[0086] The server generates multiple layout patterns (e.g. vertical layout, horizontal layout, grid layout), which provides multiple options to the user.

[0087] Step 8:

[0088] The server transmits the generated wireframe patterns to the terminal.

[0089] Step 9:

[0090] The device displays the received wireframe patterns to the user, with a preview of each pattern displayed as a thumbnail on the screen.

[0091] Step 10:

[0092] The user selects the wireframe pattern that they feel is best, and then tweaks and customizes the selected pattern as needed.

[0093] Step 11:

[0094] The device sends the user's final design to the server and requests that the project be saved, which officially saves the project.

[0095] This series of steps allows users to efficiently generate wireframes, progress projects quickly and effectively, and improve communication with designers, improving overall design quality.

[0096] Example 1

[0097] Next, a description will be given of Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the smart device 14 will be referred to as a "terminal."

[0098] In modern user interface design, it is important to generate wireframes efficiently and quickly. However, traditional manual wireframe creation requires time and effort, which can hinder improvements in usability and design quality. Furthermore, there are limited means to automatically generate multiple wireframe patterns based on user requests and streamline the process of selecting the optimal pattern. Therefore, a wireframe generation system that takes usability into consideration is needed.

[0099] The specific processing by the specific processing unit 290 of the data processing device 12 in the first embodiment is realized by the following means.

[0100] In this invention, the server includes an interface means for the user to specify the functions, input fields, display content, and priority required for the information terminal, a communication means for transmitting the specified input information to the computer system, and an algorithm means for the computer system to analyze the received input information and generate multiple wireframe layouts. This makes it possible to quickly generate wireframes that take usability into consideration based on the user's requests and select the optimal one from the multiple patterns presented.

[0101] "Interface means" refers to the means by which a user specifies the functions, input fields, display contents, and priorities required for an information terminal.

[0102] "Communication means" refers to a means for transmitting designated input information to a computer system.

[0103] An "algorithmic means" is a means by which a computer system analyzes input information it receives and generates multiple wireframe layouts.

[0104] The "screen display means" is a means for displaying the generated wireframe layout to the user.

[0105] The "selection method" is a method by which the user selects the most suitable one from the displayed wireframe layouts.

[0106] A "computer system" is a computer system that analyzes input user information and generates wireframes.

[0107] A "wireframe layout" is a structural mock-up of a design used in designing a user interface, showing the placement of functions, input fields, and display content.

[0108] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0109] System configuration

[0110] The system mainly consists of the following components:

[0111] 1. Interface means: A means by which a user specifies the functions, input fields, display content, and priorities required for an information terminal. Specifically, it uses a form or wizard-style interface that runs on a web browser.

[0112] 2. Communication method: A method for sending specified input information to a computer system. Specifically, data communication using an HTTP POST request corresponds to this method.

[0113] 3. Algorithmic means: A computer system analyzes the input information it receives and generates multiple wireframe layouts using a generative AI model implemented in a programming language such as Python.

[0114] 4. Screen display method: This is the method for displaying the generated wireframe layout to the user. It is dynamically rendered on a web page using JavaScript and HTML.

[0115] 5. Selection tool: A tool that allows users to select the best layout from the displayed wireframe layouts. This interface also runs on a web browser.

[0116] Program processing explanation

[0117] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0118] The device sends the user's input to the server, including all the specified items and their priorities. The data is packaged in JSON format and sent to the server using an HTTP POST request.

[0119] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0120] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0121] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0122] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0123] The server sends the generated wireframe patterns to the terminal, which displays them to the user, allowing the user to see a preview of each pattern.

[0124] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0125] Specific examples

[0126] For example, to generate a wireframe for a new user registration screen: the user enters the following:

[0127] Required features: "Register" button, Cancel button

[0128] Input fields: Text field "User name", text field "Email address", text field "Password"

[0129] Display: "User Registration" heading, link to Terms of Use

[0130] Priority: Register button (high), Cancel button (low)

[0131] This data is sent to a server, which generates multiple wireframe patterns and presents them to the user, who can then choose the best one and make fine adjustments.

[0132] Prompt Sentence Examples

[0133] "To create a new user registration screen, generate a wireframe that includes the following elements: 'Register' and 'Cancel' buttons, text fields for username, email address, and password, a 'Register' heading, and a link to the Terms of Use. The Register button has high priority, and the Cancel button has low priority."

[0134] The flow of the identification process in the first embodiment will be described with reference to FIG.

[0135] Step 1: User Input

[0136] A user logs into the system. After successful login, they select "New Project" and proceed to the project creation screen. Here, the user enters the following:

[0137] Required functionality (e.g., "Register" button)

[0138] Input field (e.g., text field "User name", text field "Email address")

[0139] Display content (e.g., "User Registration" heading)

[0140] Priority (e.g., the register button has high priority)

[0141] Input: Functions, input fields, display content, and priority are entered by the user into the form.

[0142] Output: The input data is temporarily stored in the device's memory.

[0143] Step 2: Send data

[0144] The device converts the information entered by the user into packets of data, organizes them by data field, packages the data in JSON format, and sends it to the server using an HTTP POST request.

[0145] Input: Data entered by the user into the form.

[0146] Output: JSON formatted data sent to the server as an HTTP POST request.

[0147] Step 3: Data analysis

[0148] The server deserializes the received data and converts it into an internal data structure. The server analyzes the data and prepares it to arrange the necessary functions and input fields in an appropriate layout.

[0149] Input: JSON formatted data.

[0150] Output: The parsed data is stored in the server's memory as an internal data structure.

[0151] Step 4: Wireframe generation

[0152] The server's analysis and generation process runs the algorithm to generate multiple wireframe patterns using a generative AI model, as follows:

[0153] 1. Apply layout rules based on data analysis results.

[0154] 2. Place each element in the appropriate position based on priority.

[0155] 3. Try different patterns such as vertical layout, horizontal layout, grid layout, etc. and generate variations of each.

[0156] Input: Parsed internal data structure.

[0157] Output: Multiple wireframe patterns are generated and prepared for sending to the terminal.

[0158] Step 5: Wireframe Presentation

[0159] The server generates multiple wireframe patterns and sends them to the device. The device deserializes the received data and displays it in the user interface. JavaScript is used to render multiple wireframe patterns as previews.

[0160] Input: Generated wireframe pattern (data in JSON format).

[0161] Output: Multiple wireframe patterns displayed on a web page.

[0162] Step 6: Wireframe Selection

[0163] The user selects the best wireframe pattern from the displayed ones, checks each pattern, clicks the "Select" button, and makes fine adjustments as needed.

[0164] Input: User interaction to select and fine-tune each wireframe pattern.

[0165] Output: The optimal wireframe pattern and its fine-tuning information are saved as final data on the device.

[0166] Step 7: Save Requests and Project Saving

[0167] The device sends the selected wireframe pattern and fine-tuning information to the server. As a save request, the data is sent to the server again in JSON format using an HTTP POST request.

[0168] The server saves the received data and stores it in the database as the final design for the project. The server establishes a database connection and inserts the data into the appropriate tables.

[0169] Input: JSON formatted data of the final design.

[0170] Output: The final design of the project is saved in the database.

[0171] (Application example 1)

[0172] Next, a description will be given of Application Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the smart device 14 will be referred to as a "terminal."

[0173] With conventional wireframe generation systems, generating wireframes based on the functions, input fields, display content, and priorities specified by the user requires time and effort, making it difficult to quickly design optimal web pages or application screens.In addition, it is often difficult for users to determine whether the pages they have designed themselves are optimal, which often results in a lot of effort being required to create the final design.

[0174] Furthermore, on online shopping sites, the design of product detail pages has a significant impact on purchasing motivation, so page optimization is important, but there was a lack of efficient systems that could meet such needs.

[0175] The specific processing by the specific processing unit 290 of the data processing device 12 in the application example 1 is realized by the following means.

[0176] In this invention, the server includes input means for a user to specify the functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the received input content and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, and means for performing data analysis and layout generation using a generative AI model. This enables users to efficiently generate optimal wireframes and quickly design product detail pages, category list pages, etc., particularly for online shopping sites.

[0177] "User" refers to an individual or organization that specifies the functions, input fields, display content, and priorities required for the screen and instructs the generation of the wireframe.

[0178] "Input means" refers to the interface that allows the user to specify screen functions, input items, display content, and priority.

[0179] "Transmission means" refers to a communication interface for transmitting input contents designated by the user to the server.

[0180] "Analysis and generation means" refers to the algorithms and programs that analyze the input received by the server and generate multiple wireframe patterns.

[0181] "Display means" refers to an interface for presenting the generated multiple wireframe patterns to the user.

[0182] "Selection means" refers to an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0183] "Generative AI Model" refers to an artificial intelligence model used to perform data analysis and layout generation.

[0184] A "wireframe pattern" refers to a drawing or template that shows the basic design of a screen layout.

[0185] "E-commerce Site" means a website where products are sold and purchased online.

[0186] "Priority" refers to the importance of each function, input field, and display content specified by the user.

[0187] "Layout" refers to the arrangement and structure of functions, input fields, and display content on the screen.

[0188] This invention relates to a system that automatically generates multiple wireframe patterns based on user-specified functions, input items, display content, and priority levels required for a screen. The following describes an embodiment of this invention.

[0189] System configuration

[0190] The system mainly consists of the following components:

[0191] 1. Input method: An interface that allows users to input screen functions, input items, display content, and priorities on a smartphone. For example, using a smartphone's touch screen.

[0192] 2. Transmission means: A communication interface that allows the smartphone to transmit the specified input content to the server. For example, it uses the smartphone's internet connection.

[0193] 3. Analysis and generation method: An algorithm that analyzes the input received by the server and generates multiple wireframe patterns. For generation, a generative AI model such as TensorFlow is used.

[0194] 4. Display: An interface for displaying the generated wireframe pattern on a smartphone. For example, a user interface using React Native.

[0195] 5. Selection method: An interface that allows users to select the most suitable one from the displayed wireframe patterns. This also uses touch operations on a smartphone.

[0196] Hardware and software examples

[0197] Hardware: Smartphone (iOS or Android)

[0198] Software: React Native (front-end application framework), Node.js + Express (back-end server), MongoDB (database), TensorFlow (generative AI model)

[0199] Program processing flow

[0200] 1. User Input

[0201] The user launches the app on their smartphone and enters the new page creation mode, where they specify the required functions, input fields, display content, and priority.

[0202] 2. Data Transmission

[0203] The smartphone sends the entered data to the backend server.

[0204] 3. Data analysis and wireframe generation

[0205] The server analyzes the received data using a TensorFlow model and generates a layout. Each element is placed based on priority, and multiple wireframe patterns are automatically generated.

[0206] 4. Wireframe Presentation and Selection

[0207] The server generates multiple wireframes and sends them to the smartphone, where the app displays them to the user, who then selects the best layout, and the final layout is saved on the server.

[0208] Specific examples

[0209] For example, to create a detail page for a new product, the user enters the following:

[0210] Required features: Buy button, Add to cart button, product image gallery, review section

[0211] Input fields: Text field "Product name", text field "Price", text field "Description"

[0212] Display content: "Product Details" heading, list of related products

[0213] Priority: Product image gallery (high), review section (medium), related product listings (low)

[0214] This data is sent to a server, which generates multiple wireframe patterns, which are then presented to the user, who can select the most suitable pattern to quickly and efficiently create a product detail page.

[0215] Prompt Sentence Examples

[0216] Here are some example prompts to input to the generative AI model:

[0217] Generate a wireframe for your new product detail page based on the following inputs:

[0218] Required features: Buy button, Add to cart button, product image gallery, review section

[0219] Input fields: Text field "Product name", text field "Price", text field "Description"

[0220] Display content: "Product Details" heading, list of related products

[0221] Priority: Product image gallery (high), review section (medium), related product listings (low)

[0222] Generate multiple wireframe patterns (e.g. vertical layout, grid layout).

[0223] This invention enables users to efficiently generate optimal wireframes and quickly design product detail pages and category list pages, particularly for online shopping sites.

[0224] The flow of the specific processing in the application example 1 will be described with reference to FIG.

[0225] Step 1:

[0226] The user starts the smartphone application and enters new page creation mode, where they specify the required functions, input fields, display content, and priority using touch input.

[0227] Input: User-specified functions (e.g., buy button, add to cart button, etc.), input fields (e.g., product name, price, description, etc.), display content (e.g., headline, related products, etc.), priority (e.g., high, medium, low).

[0228] Output: The specified data is saved in the smartphone.

[0229] Step 2:

[0230] The device sends the inputs you provide to the server over your internet connection.

[0231] Input: Data provided by the user in step 1.

[0232] Output: The input data arrives at the server.

[0233] Step 3:

[0234] The server analyzes the received data, including the specified functions, input fields, display content, and priority. This data is used for pre-processing to generate wireframes.

[0235] Input: Data sent from the terminal.

[0236] Output: Analysis results and data organization. Specifically, this includes an assessment of the importance and priority of each input item and function.

[0237] Step 4:

[0238] The server uses a generative AI model (e.g., TensorFlow) to generate multiple wireframe patterns based on the analysis results. The generative AI model then proposes the optimal layout based on the acquired data.

[0239] Input: Parsed data, prompt sentence for the generative AI model.

[0240] Output: Multiple wireframe patterns (e.g. vertical layout, grid layout).

[0241] Step 5:

[0242] The server transmits the generated wireframe patterns to the terminal.

[0243] Input: The generated wireframe pattern.

[0244] Output: The wireframe pattern arrives at the terminal.

[0245] Step 6:

[0246] The device displays the received wireframe patterns to the user, who then reviews the presented wireframe patterns and selects the most suitable one.

[0247] Input: Wireframe pattern sent from the server.

[0248] Output: The wireframe pattern presented to the user.

[0249] Step 7:

[0250] The user selects the optimal wireframe pattern, makes fine adjustments as necessary, and determines the final design. The user's selection and fine-tuning results are sent from the device to the server and stored on the server.

[0251] Input: User selected final wireframe pattern and refined design data.

[0252] Output: The final design is saved to the server.

[0253] By following the above steps, users can efficiently generate optimal designs, and can quickly design product detail pages and category list pages, especially for online shopping sites.

[0254] Furthermore, an emotion engine that estimates the user's emotion may be combined. That is, the identification processing unit 290 may estimate the user's emotion using the emotion identification model 59 and perform identification processing using the user's emotion.

[0255] The present invention relates to a system in which a user specifies the functions, input items, display content, and priority required for the screen, and based on this, multiple wireframe patterns are automatically generated, and furthermore, an emotion engine that recognizes the user's emotions is combined.

[0256] System configuration

[0257] The system mainly consists of the following components:

[0258] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[0259] 2. Transmission means: A communication interface that transmits input contents to the server.

[0260] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[0261] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[0262] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[0263] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[0264] 7. Emotion Engine: An engine that recognizes user emotions and presents or adjusts wireframes based on those emotions.

[0265] Program processing explanation

[0266] User Input and Data Submission

[0267] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0268] The device collects the user's input and sends it to the server. The data sent includes all the specified items and their priorities.

[0269] Data analysis and wireframe generation

[0270] The server analyzes the received data and checks the required functions and input fields. An initial analysis is performed for this purpose. Next, the analysis and generation means in the server initializes the algorithm and arranges the required functions and input fields appropriately as a screen layout. Based on priority, the main elements are placed in prominent positions and different layout patterns (vertical layout, horizontal layout, grid layout) are generated.

[0271] Coordination using emotion engine

[0272] The emotion engine recognizes the user's emotions in real time and prioritizes the most appropriate wireframe patterns based on their emotional state. The emotion engine analyzes the user's emotional data and adjusts the wireframe based on that data. To achieve this, the emotion engine also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[0273] Wireframe presentation and selection

[0274] The server transmits the generated wireframe patterns to the terminal.

[0275] The device displays the received wireframe patterns to the user, who can then preview each pattern. The patterns are prioritized by the emotion engine, allowing the user to quickly find the pattern that best suits their emotional state.

[0276] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends the final design to the server and requests that the project be saved.

[0277] Specific examples

[0278] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[0279] Users specify the required functions, input fields, display content, and priority. The emotion engine recognizes the user's emotions when entering information and adjusts the placement of registration buttons and input fields to optimize visibility and operability. For example, if the user is relaxed, the layout will be arranged with an emphasis on consistency and unity. On the other hand, if the user is stressed, important functions and fields will be emphasized and a simpler layout will be suggested.

[0280] The device sends this data to the server, which generates multiple wireframe patterns. The generated patterns are presented to the user, who can then select the most suitable pattern with the help of the emotion engine, allowing them to quickly and efficiently create wireframes.

[0281] This system reduces the man-hours required for creating wireframes, makes project progress faster and more efficient, and facilitates smoother communication with designers. Furthermore, by taking user emotions into consideration, it is possible to propose designs that will achieve high user satisfaction.

[0282] The processing flow will be explained below.

[0283] Step 1:

[0284] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[0285] Step 2:

[0286] The user specifies the following inputs on the project creation screen:

[0287] Required functionality (e.g. "Register" button, Cancel button)

[0288] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[0289] Display content (e.g., "User Registration" heading, link to Terms of Use)

[0290] Priority (e.g., Register button (high), Cancel button (low))

[0291] Step 3:

[0292] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[0293] Step 4:

[0294] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[0295] Step 5:

[0296] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[0297] Step 6:

[0298] The server follows basic layout rules to properly position the necessary functions and input fields, and also adjusts the placement of key elements in prominent positions according to priority.

[0299] Step 7:

[0300] The emotion engine recognizes the user's emotions in real time and adjusts the layout based on their emotional state. For example, if the user is stressed, important features will be placed more prominently.

[0301] Step 8:

[0302] The emotion engine accumulates past emotion data and uses it to improve future suggestions. The learning function understands the user's emotional patterns and suggests more appropriate wireframes.

[0303] Step 9:

[0304] The server generates multiple layout patterns (e.g., vertical layout, horizontal layout, grid layout), including patterns adjusted by the emotion engine.

[0305] Step 10:

[0306] The server transmits the generated wireframe patterns to the terminal.

[0307] Step 11:

[0308] The device displays the received wireframe patterns to the user, with a preview screen showing thumbnails of each pattern.

[0309] Step 12:

[0310] Users can select the wireframe pattern they feel is best. This makes the selection easy as it includes patterns prioritized by the emotion engine.

[0311] Step 13:

[0312] Make any desired tweaks to the wireframe pattern you have selected, such as adjusting the position of buttons or the size of input fields.

[0313] Step 14:

[0314] The device sends the final design to the server and makes a save request, which the server receives and officially saves the project.

[0315] This process allows users to efficiently generate wireframes, enabling projects to proceed quickly and effectively. The emotional engine also suggests optimal wireframes based on the user's emotional state, increasing satisfaction.

[0316] Example 2

[0317] Next, a description will be given of Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the smart device 14 will be referred to as a "terminal."

[0318] Conventional wireframe generation systems lack the ability to consider user emotions when generating screen layouts based on user input. This makes it difficult to quickly select the optimal layout when users feel stressed or anxious. Furthermore, conventional systems do not adequately automate appropriate layouts based on usability and priorities. This results in a poor user experience and impacts satisfaction with the final design.

[0319] The specific processing by the specific processing unit 290 of the data processing device 12 in the second embodiment is realized by the following means.

[0320] In this invention, the server includes input means for a user to specify functions, input items, display content, and priorities required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the most appropriate one from the presented wireframe patterns, and emotion recognition means for recognizing the emotional state of the user and adjusting the wireframe based on that emotion. This makes it possible to automatically generate wireframes based on priorities and present an appropriate layout based on them, while taking the user's emotions into consideration.

[0321] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[0322] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[0323] The "analysis and generation means" refers to an algorithm or processing device that analyzes the input content received by the server and generates multiple wireframe patterns.

[0324] The "display means" is an interface for presenting the generated wireframe pattern to the user.

[0325] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0326] An "emotion recognizer" is a mechanism for recognizing the user's emotional state and adjusting the wireframe based on that emotion.

[0327] "Priority" is an element that indicates the importance of each function or input item designated by the user.

[0328] "Wireframe" refers to a basic layout plan for screen design.

[0329] "Layout patterns" refer to multiple ways of structuring and arranging wireframes.

[0330] The present invention relates to a system that automatically generates multiple wireframe patterns based on a user's specification of the functions, input items, display content, and priority required for the screen, and further combines this with an emotion engine that recognizes the user's emotions. Specific methods for carrying out the invention are described below.

[0331] 1. System Configuration

[0332] The system mainly consists of the following components:

[0333] Input means: The interface through which the user specifies screen functions, input items, etc. This includes keyboards, mice, and touchscreen devices.

[0334] Transmission means: A communication interface that transmits input contents to the server. This can be an internet connection or a local network.

[0335] Server: Analyzes the received input and generates multiple wireframe patterns. The server requires a high-performance CPU and a large amount of memory.

[0336] Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server. Specifically, machine learning models and rule-based algorithms are used.

[0337] Display method: An interface that displays the generated multiple wireframe patterns to the user. This can be a browser or a dedicated application.

[0338] Selection tool: An interface that allows the user to select the best wireframe pattern from the presented ones.

[0339] Emotion recognition engine: An engine that recognizes the user's emotions in real time and presents and adjusts wireframes based on those emotions. It can use facial recognition and voice analysis technologies.

[0340] 2. Program processing explanation

[0341] User Input and Data Submission

[0342] A user logs in to the system and creates a "new project." On the project creation screen, the user enters the functions required for the screen (e.g., a "Register" button), input items (e.g., user name, email address), display content (e.g., a "User Registration" heading), and priority. The device collects the user's input and sends it to the server via a communication interface. The transmitted data includes all specified items, their priorities, and data indicating the user's emotional state.

[0343] Data analysis and wireframe generation

[0344] The server analyzes the received data and checks the required functions and input fields. In the initial stage of data analysis, the consistency of the input data is checked. After that, the algorithm that serves as the analysis and generation means within the server is initialized, and the main elements are automatically placed in prominent positions based on priority. Different layout patterns (vertical layout, horizontal layout, grid layout) are also generated simultaneously.

[0345] Coordination using emotion engine

[0346] The emotion recognition means recognizes the user's emotions in real time and selects and prioritizes appropriate wireframe patterns based on that emotional state. The emotion engine analyzes the user's facial recognition data and voice data to detect their emotional state. It also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[0347] 3. Specific Examples

[0348] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[0349] The user specifies the required functions (such as a "Register" button), input fields (such as "User name" and "Email address"), display content (such as a "User Registration" heading), and priority. The emotion recognition means recognizes the user's emotions when entering information and adjusts the placement of the registration button and input fields. For example, if the user is relaxed, the layout is arranged with an emphasis on consistency and unity. On the other hand, if the user is feeling stressed, important functions and fields are emphasized and a simple layout is suggested.

[0350] The device sends this data to a server, which generates multiple wireframe patterns. The patterns are presented to the user, who, with the help of emotion recognition tools, selects the best one. After selection, the final design is sent to the server and a request is made to save the project.

[0351] Prompt Sentence Examples

[0352] In practice, when using a generative AI model, the prompt might look something like this:

[0353] "Generate a wireframe for a new user registration screen. The required functions are a 'Register' button, the input fields are 'Username' and 'Email address', the display content is the 'User Registration' heading, and all are set to high priority."

[0354] The flow of the identification process in the second embodiment will be described with reference to FIG.

[0355] Step 1:

[0356] A user logs into the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority. The user-specified functions, input fields, display content, and priority are collected as input data. The terminal collects this data and prepares it for transmission via the communication interface. Specifically, the user enters information into the form and clicks the save button, which saves the data to the terminal.

[0357] Step 2:

[0358] The device sends the user's input data to the server by pressing the send button. The sent data includes all specified items, their priorities, and the user's emotional state (data collected by the camera and microphone). An encrypted communication channel is used for transmission. Specifically, when the send button is clicked, the data is sent to the server in the form of a POST request.

[0359] Step 3:

[0360] The server analyzes the data it receives. It checks the data for consistency (checking required fields and removing invalid data formats) and sends the received data to the analysis and generation means. During analysis, the data is also preprocessed so that each function and input item is properly understood. The input is the data sent from the terminal, and the output is analyzed data. Specifically, the data is saved in a database and passed to the analysis algorithm.

[0361] Step 4:

[0362] The analysis and generation means generates multiple wireframe patterns based on the analyzed data. An algorithm is used for generation, placing important items in prominent positions based on the priorities specified by the user. Specifically, different patterns such as vertical layout, horizontal layout, and grid layout are generated. The input is the analyzed data, and the output is multiple wireframe patterns. Specifically, the selected algorithm performs calculations and generates the pattern generation results.

[0363] Step 5:

[0364] The emotion recognition means analyzes the user's emotions in real time and adjusts the generated wireframe pattern based on that information. Emotional data from the camera and microphone is input, which is analyzed to output the emotional state. The layout and design of the generated wireframe are fine-tuned based on this emotional state. Specific operations include a process of analyzing emotions from real-time video and audio data and reflecting them in the wireframe.

[0365] Step 6:

[0366] The server sends the generated and adjusted multiple wireframe patterns to the terminal. The adjusted wireframe patterns are sent to the terminal as output data. Specifically, the generated patterns are packaged in JSON or XML format and sent to the terminal as an HTTP response.

[0367] Step 7:

[0368] The terminal displays the received wireframe patterns to the user. The user can preview each pattern and select and fine-tune the most suitable one. The input is the adjusted wireframe pattern, and the output is the user's selected and fine-tuned data. Specific operations involve the user selecting a pattern through the interface, dragging and dropping, and adjusting input fields.

[0369] Step 8:

[0370] The user selects the optimal wireframe pattern, and the device sends the final design to the server. A request to save the project is made. The input is the design data selected and fine-tuned by the user, and the output is the final design data saved on the server. The specific operation is that the user clicks the save button, and the data is sent to the server again.

[0371] Step 9:

[0372] The server saves the final design and updates the project data. The saved data is recorded in a database and managed as a project. The input is the final design data, and the output is the saved project data. Specifically, the server executes database transactions and permanently saves the data.

[0373] (Application example 2)

[0374] Next, a description will be given of Application Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the smart device 14 will be referred to as a "terminal."

[0375] In conventional wireframe generation systems, users specify the necessary functions and input fields, and wireframes are generated based on those, but this does not take into account the user's emotional state, which results in a problem of insufficient usability improvement. Additionally, it is difficult to provide optimal wireframes in real time that correspond to the user's emotions.

[0376] The specific processing by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means. In this invention, the server includes input means for the user to specify functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, emotion recognition means for recognizing the user's emotion, and means for adjusting the wireframe based on emotion data acquired from the emotion recognition means. This makes it possible to provide the optimal wireframe according to the user's emotional state in real time, thereby improving usability.

[0377] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[0378] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[0379] "Analysis and generation means" means a means including an algorithm for analyzing input content received by the server and generating a plurality of wireframe patterns.

[0380] The "display means" is an interface that presents the generated wireframe pattern to the user.

[0381] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0382] "Emotion recognition means" is a technology that recognizes the user's emotions and adjusts the wireframe based on those emotions.

[0383] The "adjustment means" is a means for adjusting the wireframe based on the emotion data acquired from the emotion recognition means.

[0384] This invention is a system that automatically generates multiple wireframe patterns based on the screen functions, input items, display content, and priority specified by the user, and further adjusts the optimal wireframe through emotion recognition. This system is particularly effective for generating product detail pages on online shopping sites.

[0385] An embodiment of the system is as follows.

[0386] Input and Data Transmission

[0387] Users use their smartphones to specify input items on the product detail page (such as the "Add to Cart" button, "Product Image," "Price Tag," "Product Description," and "User Reviews") and their priorities. The smartphone's touch interface is used as the input method.

[0388] The terminal sends the input content specified by the user to the server, using a request via the HTTP protocol as the communication interface.

[0389] Data analysis and wireframe generation

[0390] The server analyzes the received data and identifies the required functions and input fields. This analysis is performed using an initial analysis algorithm. Next, the analysis and generation function on the server generates multiple wireframe patterns (vertical layout, horizontal layout, grid layout) based on the specified priority.

[0391] Emotion Recognition and Regulation

[0392] The emotion recognition means collects user emotional data in real time via the smartphone camera, which is then analyzed by the dedicated EmotionEngine library.

[0393] Based on the emotional data obtained from the emotion recognition system, the server adjusts the wireframe, suggesting a consistent layout for relaxed users and a concise layout that highlights important information for stressed users.

[0394] Wireframe presentation and selection

[0395] The server sends the generated wireframe patterns to the smartphone, and the user can preview each pattern using the display means.

[0396] The user selects the most suitable wireframe pattern from the ones presented preferentially by the emotion recognition system using a touch interface.

[0397] Examples and prompts

[0398] Consider a specific example where a product detail page is generated when a new product "XYZ Smartphone" is released. In this case, the user inputs the following prompt sentence:

[0399] "Generate a detail page for a new product, "XYZ Smartphone." Required features include an "Add to Cart" button, "Product Image," and "Price Tag." Display content includes a "Product Description" and "User Reviews." Use emotion recognition to suggest the optimal layout for the user's state."

[0400] This allows users to quickly and efficiently select the optimal wireframe for their emotional state. The required hardware is a smartphone and its camera, and the software requires the EmotionEngine library and HTTP communication library.

[0401] The flow of the specific processing in the application example 2 will be described with reference to FIG.

[0402] Step 1:

[0403] A user logs into the system and creates a "New Project." Here, the user inputs the features required for the product detail page ("Add to Cart" button, "Product Image," "Price Tag"), display content ("Product Description," "User Reviews"), and priority. The input data is collected through the smartphone's touch interface. The input includes data on each feature specified by the user and its priority. The device collects this input data.

[0404] Step 2:

[0405] The terminal sends the collected input data to the server. The communication interface uses the HTTP protocol, and the transmitted data is in JSON format. During this process, the input data is properly encoded and sent to the server. The server receives the received data and analyzes its contents.

[0406] Step 3:

[0407] The server analyzes the received data and checks the required functions and display content. It then executes an initial analysis algorithm and processes the data. As a result of the analysis, the specified items and their priorities are confirmed. This generates a list of required functions and display items.

[0408] Step 4:

[0409] The analysis and generation means in the server initializes the algorithm and generates multiple wireframe patterns. The generation algorithm creates different layout patterns such as vertical layout, horizontal layout, and grid layout. Each layout is based on the priority specified by the user, with the most important items placed in prominent positions. The multiple generated wireframe patterns are created as output.

[0410] Step 5:

[0411] The device's camera is used to collect user emotion data, which is then analyzed in real time by the EmotionEngine library to identify the user's emotional state (e.g., relaxed, stressed, etc.). The input is video data from the camera, and the output is the analyzed emotion data.

[0412] Step 6:

[0413] The server adjusts the generated wireframe pattern based on the emotional data. The emotion recognition means prioritizes a consistent layout when the user is relaxed, and a concise layout that emphasizes important information when the user is stressed. This allows the server to select the optimal wireframe according to the user's emotional state.

[0414] Step 7:

[0415] The server transmits the adjusted wireframe patterns to the terminal, and the transmitted data includes the adjusted wireframe patterns. The wireframe patterns are displayed to the user via the display means.

[0416] Step 8:

[0417] The user previews the presented wireframe patterns and selects the best one using the touch interface. The user's selection is recorded by the device, and the selected wireframe is sent to the server as the final design. The final transmitted data includes the selected wireframe.

[0418] Step 9:

[0419] The server stores the final design selected by the user, confirming project completion, and serves as a reference for future project creation.

[0420] The specific processing unit 290 transmits the result of the specific processing to the smart device 14. In the smart device 14, the control unit 46A causes the output device 40 to output the result of the specific processing. The microphone 38B acquires audio indicating a user input regarding the result of the specific processing. The control unit 46A transmits audio data indicating the user input acquired by the microphone 38B to the data processing device 12. In the data processing device 12, the specific processing unit 290 acquires the audio data.

[0421] The data generation model 58 is a so-called generative AI (Artificial Intelligence). An example of the data generation model 58 is ChatGPT (Internet Search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search <url: https: gemini.google.com ?hl="ja">) and other generation AIs. The data generation model 58 is obtained by performing deep learning on a neural network. A prompt including an instruction is input to the data generation model 58, and inference data such as voice data indicating voice, text data indicating text, and image data indicating an image is also input. The data generation model 58 performs inference on the input inference data in accordance with the instruction indicated by the prompt, and outputs the inference result in a data format such as voice data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.

[0422] In the above embodiment, an example in which the specific process is performed by the data processing device 12 has been given, but the technology of the present disclosure is not limited to this, and the specific process may be performed by the smart device 14.

[0423] [Second embodiment]

[0424] FIG. 3 shows an example of the configuration of a data processing system 210 according to the second embodiment.

[0425] 3, the data processing system 210 includes the data processing device 12 and smart glasses 214. An example of the data processing device 12 is a server.

[0426] The data processing device 12 includes a computer 22, a database 24, and a communication I / F 26. The computer 22 is an example of a "computer" according to the technology of the present disclosure. The computer 22 includes a processor 28, a RAM 30, and a storage 32. The processor 28, the RAM 30, and the storage 32 are connected to a bus 34. The database 24 and the communication I / F 26 are also connected to the bus 34. The communication I / F 26 is connected to a network 54. Examples of the network 54 include a WAN (Wide Area Network) and / or a LAN (Local Area Network).

[0427] The smart glasses 214 include a computer 36, a microphone 238, a speaker 240, a camera 42, and a communication I / F 44. The computer 36 includes a processor 46, a RAM 48, and a storage 50. The processor 46, the RAM 48, and the storage 50 are connected to a bus 52. The microphone 238, the speaker 240, and the camera 42 are also connected to the bus 52.

[0428] The microphone 238 receives instructions and the like from the user 20 by receiving voice uttered by the user 20. The microphone 238 captures the voice uttered by the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio in accordance with instructions from the processor 46.

[0429] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an imaging element such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the surroundings of user 20 (for example, an imaging range defined by an angle of view equivalent to the field of vision of a typical healthy person).

[0430] The communication I / F 44 is connected to a network 54. The communication I / Fs 44 and 26 control the exchange of various information between the processor 46 and the processor 28 via the network 54. The exchange of various information between the processor 46 and the processor 28 using the communication I / Fs 44 and 26 is carried out in a secure state.

[0431] Fig. 4 shows an example of the main functions of the data processing device 12 and the smart glasses 214. As shown in Fig. 4, in the data processing device 12, a specific process is performed by the processor 28. A specific process program 56 is stored in the storage 32.

[0432] The specific processing program 56 is an example of a "program" according to the technology of the present disclosure. The processor 28 reads the specific processing program 56 from the storage 32 and executes the read specific processing program 56 on the RAM 30. The specific processing is realized by the processor 28 operating as a specific processing unit 290 in accordance with the specific processing program 56 executed on the RAM 30.

[0433] The storage 32 stores a data generation model 58 and an emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.

[0434] In the smart glasses 214, the processor 46 performs the reception output process. A reception output program 60 is stored in the storage 50. The processor 46 reads the reception output program 60 from the storage 50 and executes the read reception output program 60 on the RAM 48. The reception output process is realized by the processor 46 operating as the control unit 46A in accordance with the reception output program 60 executed on the RAM 48.

[0435] Next, a description will be given of the identification process performed by the identification processing unit 290 of the data processing device 12. In the following description, the data processing device 12 will be referred to as the "server" and the smart glasses 214 will be referred to as the "terminal."

[0436] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0437] System configuration

[0438] The system mainly consists of the following components:

[0439] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[0440] 2. Transmission means: A communication interface that transmits input contents to the server.

[0441] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[0442] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[0443] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[0444] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[0445] Program processing explanation

[0446] User Input and Data Submission

[0447] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0448] The terminal sends the user's input to the server. This sent data includes all the specified items and their priorities.

[0449] Data analysis and wireframe generation

[0450] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0451] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0452] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0453] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0454] Wireframe presentation and selection

[0455] The server transmits the generated wireframe patterns to the terminal.

[0456] The device displays these wireframe patterns to the user, who then sees a preview of each pattern.

[0457] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0458] Specific examples

[0459] For example, to generate wireframes for a new user registration screen:

[0460] The user enters the following:

[0461] Required features: "Register" button, Cancel button

[0462] Input fields: Text field "User name", text field "Email address", text field "Password"

[0463] Display: "User Registration" heading, link to Terms of Use

[0464] Priority: Register button (high), Cancel button (low)

[0465] The device sends this data to a server, which generates multiple wireframe patterns, presents them to the user, and the user can select the most suitable pattern to quickly and efficiently create a wireframe.

[0466] This system reduces the amount of work required to create wireframes, improves the speed and efficiency of project progress, and also facilitates smoother communication with designers, improving the overall design quality.

[0467] The processing flow will be explained below.

[0468] Step 1:

[0469] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[0470] Step 2:

[0471] The user specifies the following inputs on the project creation screen:

[0472] Required functionality (e.g. "Register" button, Cancel button)

[0473] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[0474] Display content (e.g., "User Registration" heading, link to Terms of Use)

[0475] Priority (e.g., Register button (high), Cancel button (low))

[0476] Step 3:

[0477] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[0478] Step 4:

[0479] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[0480] Step 5:

[0481] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[0482] Step 6:

[0483] The server follows basic layout rules to properly arrange the necessary functions and input fields. At this stage, adjustments are also made to position the main elements in prominent positions according to priority.

[0484] Step 7:

[0485] The server generates multiple layout patterns (e.g. vertical layout, horizontal layout, grid layout), which provides multiple options to the user.

[0486] Step 8:

[0487] The server transmits the generated wireframe patterns to the terminal.

[0488] Step 9:

[0489] The device displays the received wireframe patterns to the user, with a preview of each pattern displayed as a thumbnail on the screen.

[0490] Step 10:

[0491] The user selects the wireframe pattern that they feel is best, and then tweaks and customizes the selected pattern as needed.

[0492] Step 11:

[0493] The device sends the user's final design to the server and requests that the project be saved, which officially saves the project.

[0494] This series of steps allows users to efficiently generate wireframes, progress projects quickly and effectively, and improve communication with designers, improving overall design quality.

[0495] Example 1

[0496] Next, a description will be given of Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the smart glasses 214 will be referred to as a "terminal."

[0497] In modern user interface design, it is important to generate wireframes efficiently and quickly. However, traditional manual wireframe creation requires time and effort, which can hinder improvements in usability and design quality. Furthermore, there are limited means to automatically generate multiple wireframe patterns based on user requests and streamline the process of selecting the optimal pattern. Therefore, a wireframe generation system that takes usability into consideration is needed.

[0498] The specific processing by the specific processing unit 290 of the data processing device 12 in the first embodiment is realized by the following means.

[0499] In this invention, the server includes an interface means for the user to specify the functions, input fields, display content, and priority required for the information terminal, a communication means for transmitting the specified input information to the computer system, and an algorithm means for the computer system to analyze the received input information and generate multiple wireframe layouts. This makes it possible to quickly generate wireframes that take usability into consideration based on the user's requests and select the optimal one from the multiple patterns presented.

[0500] "Interface means" refers to the means by which a user specifies the functions, input fields, display contents, and priorities required for an information terminal.

[0501] "Communication means" refers to a means for transmitting designated input information to a computer system.

[0502] An "algorithmic means" is a means by which a computer system analyzes input information it receives and generates multiple wireframe layouts.

[0503] The "screen display means" is a means for displaying the generated wireframe layout to the user.

[0504] The "selection method" is a method by which the user selects the most suitable one from the displayed wireframe layouts.

[0505] A "computer system" is a computer system that analyzes input user information and generates wireframes.

[0506] A "wireframe layout" is a structural mock-up of a design used in designing a user interface, showing the placement of functions, input fields, and display content.

[0507] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0508] System configuration

[0509] The system mainly consists of the following components:

[0510] 1. Interface means: A means by which a user specifies the functions, input fields, display content, and priorities required for an information terminal. Specifically, it uses a form or wizard-style interface that runs on a web browser.

[0511] 2. Communication method: A method for sending specified input information to a computer system. Specifically, data communication using an HTTP POST request corresponds to this method.

[0512] 3. Algorithmic means: A computer system analyzes the input information it receives and generates multiple wireframe layouts using a generative AI model implemented in a programming language such as Python.

[0513] 4. Screen display method: This is the method for displaying the generated wireframe layout to the user. It is dynamically rendered on a web page using JavaScript and HTML.

[0514] 5. Selection tool: A tool that allows users to select the best layout from the displayed wireframe layouts. This interface also runs on a web browser.

[0515] Program processing explanation

[0516] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0517] The device sends the user's input to the server, including all the specified items and their priorities. The data is packaged in JSON format and sent to the server using an HTTP POST request.

[0518] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0519] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0520] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0521] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0522] The server sends the generated wireframe patterns to the terminal, which displays them to the user, allowing the user to see a preview of each pattern.

[0523] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0524] Specific examples

[0525] For example, to generate a wireframe for a new user registration screen: the user enters the following:

[0526] Required features: "Register" button, Cancel button

[0527] Input fields: Text field "User name", text field "Email address", text field "Password"

[0528] Display: "User Registration" heading, link to Terms of Use

[0529] Priority: Register button (high), Cancel button (low)

[0530] This data is sent to a server, which generates multiple wireframe patterns and presents them to the user, who can then choose the best one and make fine adjustments.

[0531] Prompt Sentence Examples

[0532] "To create a new user registration screen, generate a wireframe that includes the following elements: 'Register' and 'Cancel' buttons, text fields for username, email address, and password, a 'Register' heading, and a link to the Terms of Use. The Register button has high priority, and the Cancel button has low priority."

[0533] The flow of the identification process in the first embodiment will be described with reference to FIG.

[0534] Step 1: User Input

[0535] A user logs into the system. After successful login, they select "New Project" and proceed to the project creation screen. Here, the user enters the following:

[0536] Required functionality (e.g., "Register" button)

[0537] Input field (e.g., text field "User name", text field "Email address")

[0538] Display content (e.g., "User Registration" heading)

[0539] Priority (e.g., the register button has high priority)

[0540] Input: Functions, input fields, display content, and priority are entered by the user into the form.

[0541] Output: The input data is temporarily stored in the device's memory.

[0542] Step 2: Send data

[0543] The device converts the information entered by the user into packets of data, organizes them by data field, packages the data in JSON format, and sends it to the server using an HTTP POST request.

[0544] Input: Data entered by the user into the form.

[0545] Output: JSON formatted data sent to the server as an HTTP POST request.

[0546] Step 3: Data analysis

[0547] The server deserializes the received data and converts it into an internal data structure. The server analyzes the data and prepares it to arrange the necessary functions and input fields in an appropriate layout.

[0548] Input: JSON formatted data.

[0549] Output: The parsed data is stored in the server's memory as an internal data structure.

[0550] Step 4: Wireframe generation

[0551] The server's analysis and generation process runs the algorithm to generate multiple wireframe patterns using a generative AI model, as follows:

[0552] 1. Apply layout rules based on data analysis results.

[0553] 2. Place each element in the appropriate position based on priority.

[0554] 3. Try different patterns such as vertical layout, horizontal layout, grid layout, etc. and generate variations of each.

[0555] Input: Parsed internal data structure.

[0556] Output: Multiple wireframe patterns are generated and prepared for sending to the terminal.

[0557] Step 5: Wireframe Presentation

[0558] The server generates multiple wireframe patterns and sends them to the device. The device deserializes the received data and displays it in the user interface. JavaScript is used to render multiple wireframe patterns as previews.

[0559] Input: Generated wireframe pattern (data in JSON format).

[0560] Output: Multiple wireframe patterns displayed on a web page.

[0561] Step 6: Wireframe Selection

[0562] The user selects the best wireframe pattern from the displayed ones, checks each pattern, clicks the "Select" button, and makes fine adjustments as needed.

[0563] Input: User interaction to select and fine-tune each wireframe pattern.

[0564] Output: The optimal wireframe pattern and its fine-tuning information are saved as final data on the device.

[0565] Step 7: Save Requests and Project Saving

[0566] The device sends the selected wireframe pattern and fine-tuning information to the server. As a save request, the data is sent to the server again in JSON format using an HTTP POST request.

[0567] The server saves the received data and stores it in the database as the final design for the project. The server establishes a database connection and inserts the data into the appropriate tables.

[0568] Input: JSON formatted data of the final design.

[0569] Output: The final design of the project is saved in the database.

[0570] (Application example 1)

[0571] Next, a description will be given of Application Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the smart glasses 214 will be referred to as a "terminal."

[0572] With conventional wireframe generation systems, generating wireframes based on the functions, input fields, display content, and priorities specified by the user requires time and effort, making it difficult to quickly design optimal web pages or application screens.In addition, it is often difficult for users to determine whether the pages they have designed themselves are optimal, which often results in a lot of effort being required to create the final design.

[0573] Furthermore, on online shopping sites, the design of product detail pages has a significant impact on purchasing motivation, so page optimization is important, but there was a lack of efficient systems that could meet such needs.

[0574] The specific processing by the specific processing unit 290 of the data processing device 12 in the application example 1 is realized by the following means.

[0575] In this invention, the server includes input means for a user to specify the functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the received input content and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, and means for performing data analysis and layout generation using a generative AI model. This enables users to efficiently generate optimal wireframes and quickly design product detail pages, category list pages, etc., particularly for online shopping sites.

[0576] "User" refers to an individual or organization that specifies the functions, input fields, display content, and priorities required for the screen and instructs the generation of the wireframe.

[0577] "Input means" refers to the interface that allows the user to specify screen functions, input items, display content, and priority.

[0578] "Transmission means" refers to a communication interface for transmitting input contents designated by the user to the server.

[0579] "Analysis and generation means" refers to the algorithms and programs that analyze the input received by the server and generate multiple wireframe patterns.

[0580] "Display means" refers to an interface for presenting the generated multiple wireframe patterns to the user.

[0581] "Selection means" refers to an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0582] "Generative AI Model" refers to an artificial intelligence model used to perform data analysis and layout generation.

[0583] A "wireframe pattern" refers to a drawing or template that shows the basic design of a screen layout.

[0584] "E-commerce Site" means a website where products are sold and purchased online.

[0585] "Priority" refers to the importance of each function, input field, and display content specified by the user.

[0586] "Layout" refers to the arrangement and structure of functions, input fields, and display content on the screen.

[0587] This invention relates to a system that automatically generates multiple wireframe patterns based on user-specified functions, input items, display content, and priority levels required for a screen. The following describes an embodiment of this invention.

[0588] System configuration

[0589] The system mainly consists of the following components:

[0590] 1. Input method: An interface that allows users to input screen functions, input items, display content, and priorities on a smartphone. For example, using a smartphone's touch screen.

[0591] 2. Transmission means: A communication interface that allows the smartphone to transmit the specified input content to the server. For example, it uses the smartphone's internet connection.

[0592] 3. Analysis and generation method: An algorithm that analyzes the input received by the server and generates multiple wireframe patterns. For generation, a generative AI model such as TensorFlow is used.

[0593] 4. Display: An interface for displaying the generated wireframe pattern on a smartphone. For example, a user interface using React Native.

[0594] 5. Selection method: An interface that allows users to select the most suitable one from the displayed wireframe patterns. This also uses touch operations on a smartphone.

[0595] Hardware and software examples

[0596] Hardware: Smartphone (iOS or Android)

[0597] Software: React Native (front-end application framework), Node.js + Express (back-end server), MongoDB (database), TensorFlow (generative AI model)

[0598] Program processing flow

[0599] 1. User Input

[0600] The user launches the app on their smartphone and enters the new page creation mode, where they specify the required functions, input fields, display content, and priority.

[0601] 2. Data Transmission

[0602] The smartphone sends the entered data to the backend server.

[0603] 3. Data analysis and wireframe generation

[0604] The server analyzes the received data using a TensorFlow model and generates a layout. Each element is placed based on priority, and multiple wireframe patterns are automatically generated.

[0605] 4. Wireframe Presentation and Selection

[0606] The server generates multiple wireframes and sends them to the smartphone, where the app displays them to the user, who then selects the best layout, and the final layout is saved on the server.

[0607] Specific examples

[0608] For example, to create a detail page for a new product, the user enters the following:

[0609] Required features: Buy button, Add to cart button, product image gallery, review section

[0610] Input fields: Text field "Product name", text field "Price", text field "Description"

[0611] Display content: "Product Details" heading, list of related products

[0612] Priority: Product image gallery (high), review section (medium), related product listings (low)

[0613] This data is sent to a server, which generates multiple wireframe patterns, which are then presented to the user, who can select the most suitable pattern to quickly and efficiently create a product detail page.

[0614] Prompt Sentence Examples

[0615] Here are some example prompts to input to the generative AI model:

[0616] Generate a wireframe for your new product detail page based on the following inputs:

[0617] Required features: Buy button, Add to cart button, product image gallery, review section

[0618] Input fields: Text field "Product name", text field "Price", text field "Description"

[0619] Display content: "Product Details" heading, list of related products

[0620] Priority: Product image gallery (high), review section (medium), related product listings (low)

[0621] Generate multiple wireframe patterns (e.g. vertical layout, grid layout).

[0622] This invention enables users to efficiently generate optimal wireframes and quickly design product detail pages and category list pages, particularly for online shopping sites.

[0623] The flow of the specific processing in the application example 1 will be described with reference to FIG.

[0624] Step 1:

[0625] The user starts the smartphone application and enters new page creation mode, where they specify the required functions, input fields, display content, and priority using touch input.

[0626] Input: User-specified functions (e.g., buy button, add to cart button, etc.), input fields (e.g., product name, price, description, etc.), display content (e.g., headline, related products, etc.), priority (e.g., high, medium, low).

[0627] Output: The specified data is saved in the smartphone.

[0628] Step 2:

[0629] The device sends the inputs you provide to the server over your internet connection.

[0630] Input: Data provided by the user in step 1.

[0631] Output: The input data arrives at the server.

[0632] Step 3:

[0633] The server analyzes the received data, including the specified functions, input fields, display content, and priority. This data is used for pre-processing to generate wireframes.

[0634] Input: Data sent from the terminal.

[0635] Output: Analysis results and data organization. Specifically, this includes an assessment of the importance and priority of each input item and function.

[0636] Step 4:

[0637] The server uses a generative AI model (e.g., TensorFlow) to generate multiple wireframe patterns based on the analysis results. The generative AI model then proposes the optimal layout based on the acquired data.

[0638] Input: Parsed data, prompt sentence for the generative AI model.

[0639] Output: Multiple wireframe patterns (e.g. vertical layout, grid layout).

[0640] Step 5:

[0641] The server transmits the generated wireframe patterns to the terminal.

[0642] Input: The generated wireframe pattern.

[0643] Output: The wireframe pattern arrives at the terminal.

[0644] Step 6:

[0645] The device displays the received wireframe patterns to the user, who then reviews the presented wireframe patterns and selects the most suitable one.

[0646] Input: Wireframe pattern sent from the server.

[0647] Output: The wireframe pattern presented to the user.

[0648] Step 7:

[0649] The user selects the optimal wireframe pattern, makes fine adjustments as necessary, and determines the final design. The user's selection and fine-tuning results are sent from the device to the server and stored on the server.

[0650] Input: User selected final wireframe pattern and refined design data.

[0651] Output: The final design is saved to the server.

[0652] By following the above steps, users can efficiently generate optimal designs, and can quickly design product detail pages and category list pages, especially for online shopping sites.

[0653] Furthermore, an emotion engine that estimates the user's emotion may be further combined. That is, the identification processing unit 290 may estimate the user's emotion using the emotion identification model 59, and perform identification processing using the user's emotion.

[0654] The present invention relates to a system in which a user specifies the functions, input items, display content, and priority required for the screen, and based on this, multiple wireframe patterns are automatically generated, and furthermore, an emotion engine that recognizes the user's emotions is combined.

[0655] System configuration

[0656] The system mainly consists of the following components:

[0657] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[0658] 2. Transmission means: A communication interface that transmits input contents to the server.

[0659] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[0660] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[0661] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[0662] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[0663] 7. Emotion Engine: An engine that recognizes user emotions and presents or adjusts wireframes based on those emotions.

[0664] Program processing explanation

[0665] User Input and Data Submission

[0666] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0667] The device collects the user's input and sends it to the server. The data sent includes all the specified items and their priorities.

[0668] Data analysis and wireframe generation

[0669] The server analyzes the received data and checks the required functions and input fields. An initial analysis is performed for this purpose. Next, the analysis and generation means in the server initializes the algorithm and arranges the required functions and input fields appropriately as a screen layout. Based on priority, the main elements are placed in prominent positions and different layout patterns (vertical layout, horizontal layout, grid layout) are generated.

[0670] Coordination using emotion engine

[0671] The emotion engine recognizes the user's emotions in real time and prioritizes the most appropriate wireframe patterns based on their emotional state. The emotion engine analyzes the user's emotional data and adjusts the wireframe based on that data. To achieve this, the emotion engine also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[0672] Wireframe presentation and selection

[0673] The server transmits the generated wireframe patterns to the terminal.

[0674] The device displays the received wireframe patterns to the user, who can then preview each pattern. The patterns are prioritized by the emotion engine, allowing the user to quickly find the pattern that best suits their emotional state.

[0675] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends the final design to the server and requests that the project be saved.

[0676] Specific examples

[0677] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[0678] Users specify the required functions, input fields, display content, and priority. The emotion engine recognizes the user's emotions when entering information and adjusts the placement of registration buttons and input fields to optimize visibility and operability. For example, if the user is relaxed, the layout will be arranged with an emphasis on consistency and unity. On the other hand, if the user is stressed, important functions and fields will be emphasized and a simpler layout will be suggested.

[0679] The device sends this data to the server, which generates multiple wireframe patterns. The generated patterns are presented to the user, who can then select the most suitable pattern with the help of the emotion engine, allowing them to quickly and efficiently create wireframes.

[0680] This system reduces the man-hours required for creating wireframes, makes project progress faster and more efficient, and facilitates smoother communication with designers. Furthermore, by taking user emotions into consideration, it is possible to propose designs that will achieve high user satisfaction.

[0681] The processing flow will be explained below.

[0682] Step 1:

[0683] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[0684] Step 2:

[0685] The user specifies the following inputs on the project creation screen:

[0686] Required functionality (e.g. "Register" button, Cancel button)

[0687] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[0688] Display content (e.g., "User Registration" heading, link to Terms of Use)

[0689] Priority (e.g., Register button (high), Cancel button (low))

[0690] Step 3:

[0691] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[0692] Step 4:

[0693] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[0694] Step 5:

[0695] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[0696] Step 6:

[0697] The server follows basic layout rules to properly position the necessary functions and input fields, and also adjusts the placement of key elements in prominent positions according to priority.

[0698] Step 7:

[0699] The emotion engine recognizes the user's emotions in real time and adjusts the layout based on their emotional state. For example, if the user is stressed, important features will be placed more prominently.

[0700] Step 8:

[0701] The emotion engine accumulates past emotion data and uses it to improve future suggestions. The learning function understands the user's emotional patterns and suggests more appropriate wireframes.

[0702] Step 9:

[0703] The server generates multiple layout patterns (e.g., vertical layout, horizontal layout, grid layout), including patterns adjusted by the emotion engine.

[0704] Step 10:

[0705] The server transmits the generated wireframe patterns to the terminal.

[0706] Step 11:

[0707] The device displays the received wireframe patterns to the user, with a preview screen showing thumbnails of each pattern.

[0708] Step 12:

[0709] Users can select the wireframe pattern they feel is best. This makes the selection easy as it includes patterns prioritized by the emotion engine.

[0710] Step 13:

[0711] Make any desired tweaks to the wireframe pattern you have selected, such as adjusting the position of buttons or the size of input fields.

[0712] Step 14:

[0713] The device sends the final design to the server and makes a save request, which the server receives and officially saves the project.

[0714] This process allows users to efficiently generate wireframes, enabling projects to proceed quickly and effectively. The emotional engine also suggests optimal wireframes based on the user's emotional state, increasing satisfaction.

[0715] Example 2

[0716] Next, a description will be given of Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the smart glasses 214 will be referred to as a "terminal."

[0717] Conventional wireframe generation systems lack the ability to consider user emotions when generating screen layouts based on user input. This makes it difficult to quickly select the optimal layout when users feel stressed or anxious. Furthermore, conventional systems do not adequately automate appropriate layouts based on usability and priorities. This results in a poor user experience and impacts satisfaction with the final design.

[0718] The specific processing by the specific processing unit 290 of the data processing device 12 in the second embodiment is realized by the following means.

[0719] In this invention, the server includes input means for a user to specify functions, input items, display content, and priorities required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the most appropriate one from the presented wireframe patterns, and emotion recognition means for recognizing the emotional state of the user and adjusting the wireframe based on that emotion. This makes it possible to automatically generate wireframes based on priorities and present an appropriate layout based on them, while taking the user's emotions into consideration.

[0720] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[0721] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[0722] The "analysis and generation means" refers to an algorithm or processing device that analyzes the input content received by the server and generates multiple wireframe patterns.

[0723] The "display means" is an interface for presenting the generated wireframe pattern to the user.

[0724] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0725] An "emotion recognizer" is a mechanism for recognizing the user's emotional state and adjusting the wireframe based on that emotion.

[0726] "Priority" is an element that indicates the importance of each function or input item designated by the user.

[0727] "Wireframe" refers to a basic layout plan for screen design.

[0728] "Layout patterns" refer to multiple ways of structuring and arranging wireframes.

[0729] The present invention relates to a system that automatically generates multiple wireframe patterns based on a user's specification of the functions, input items, display content, and priority required for the screen, and further combines this with an emotion engine that recognizes the user's emotions. Specific methods for carrying out the invention are described below.

[0730] 1. System Configuration

[0731] The system mainly consists of the following components:

[0732] Input means: The interface through which the user specifies screen functions, input items, etc. This includes keyboards, mice, and touchscreen devices.

[0733] Transmission means: A communication interface that transmits input contents to the server. This can be an internet connection or a local network.

[0734] Server: Analyzes the received input and generates multiple wireframe patterns. The server requires a high-performance CPU and a large amount of memory.

[0735] Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server. Specifically, machine learning models and rule-based algorithms are used.

[0736] Display method: An interface that displays the generated multiple wireframe patterns to the user. This can be a browser or a dedicated application.

[0737] Selection tool: An interface that allows the user to select the best wireframe pattern from the presented ones.

[0738] Emotion recognition engine: An engine that recognizes the user's emotions in real time and presents and adjusts wireframes based on those emotions. It can use facial recognition and voice analysis technologies.

[0739] 2. Program processing explanation

[0740] User Input and Data Submission

[0741] A user logs in to the system and creates a "new project." On the project creation screen, the user enters the functions required for the screen (e.g., a "Register" button), input items (e.g., user name, email address), display content (e.g., a "User Registration" heading), and priority. The device collects the user's input and sends it to the server via a communication interface. The transmitted data includes all specified items, their priorities, and data indicating the user's emotional state.

[0742] Data analysis and wireframe generation

[0743] The server analyzes the received data and checks the required functions and input fields. In the initial stage of data analysis, the consistency of the input data is checked. After that, the algorithm that serves as the analysis and generation means within the server is initialized, and the main elements are automatically placed in prominent positions based on priority. Different layout patterns (vertical layout, horizontal layout, grid layout) are also generated simultaneously.

[0744] Coordination using emotion engine

[0745] The emotion recognition means recognizes the user's emotions in real time and selects and prioritizes appropriate wireframe patterns based on that emotional state. The emotion engine analyzes the user's facial recognition data and voice data to detect their emotional state. It also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[0746] 3. Specific Examples

[0747] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[0748] The user specifies the required functions (such as a "Register" button), input fields (such as "User name" and "Email address"), display content (such as a "User Registration" heading), and priority. The emotion recognition means recognizes the user's emotions when entering information and adjusts the placement of the registration button and input fields. For example, if the user is relaxed, the layout is arranged with an emphasis on consistency and unity. On the other hand, if the user is feeling stressed, important functions and fields are emphasized and a simple layout is suggested.

[0749] The device sends this data to a server, which generates multiple wireframe patterns. The patterns are presented to the user, who, with the help of emotion recognition tools, selects the best one. After selection, the final design is sent to the server and a request is made to save the project.

[0750] Prompt Sentence Examples

[0751] In practice, when using a generative AI model, the prompt might look something like this:

[0752] "Generate a wireframe for a new user registration screen. The required functions are a 'Register' button, the input fields are 'Username' and 'Email address', the display content is the 'User Registration' heading, and all are set to high priority."

[0753] The flow of the identification process in the second embodiment will be described with reference to FIG.

[0754] Step 1:

[0755] A user logs into the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority. The user-specified functions, input fields, display content, and priority are collected as input data. The terminal collects this data and prepares it for transmission via the communication interface. Specifically, the user enters information into the form and clicks the save button, which saves the data to the terminal.

[0756] Step 2:

[0757] The device sends the user's input data to the server by pressing the send button. The sent data includes all specified items, their priorities, and the user's emotional state (data collected by the camera and microphone). An encrypted communication channel is used for transmission. Specifically, when the send button is clicked, the data is sent to the server in the form of a POST request.

[0758] Step 3:

[0759] The server analyzes the data it receives. It checks the data for consistency (checking required fields and removing invalid data formats) and sends the received data to the analysis and generation means. During analysis, the data is also preprocessed so that each function and input item is properly understood. The input is the data sent from the terminal, and the output is analyzed data. Specifically, the data is saved in a database and passed to the analysis algorithm.

[0760] Step 4:

[0761] The analysis and generation means generates multiple wireframe patterns based on the analyzed data. An algorithm is used for generation, placing important items in prominent positions based on the priorities specified by the user. Specifically, different patterns such as vertical layout, horizontal layout, and grid layout are generated. The input is the analyzed data, and the output is multiple wireframe patterns. Specifically, the selected algorithm performs calculations and generates the pattern generation results.

[0762] Step 5:

[0763] The emotion recognition means analyzes the user's emotions in real time and adjusts the generated wireframe pattern based on that information. Emotional data from the camera and microphone is input, which is analyzed to output the emotional state. The layout and design of the generated wireframe are fine-tuned based on this emotional state. Specific operations include a process of analyzing emotions from real-time video and audio data and reflecting them in the wireframe.

[0764] Step 6:

[0765] The server sends the generated and adjusted multiple wireframe patterns to the terminal. The adjusted wireframe patterns are sent to the terminal as output data. Specifically, the generated patterns are packaged in JSON or XML format and sent to the terminal as an HTTP response.

[0766] Step 7:

[0767] The terminal displays the received wireframe patterns to the user. The user can preview each pattern and select and fine-tune the most suitable one. The input is the adjusted wireframe pattern, and the output is the user's selected and fine-tuned data. Specific operations involve the user selecting a pattern through the interface, dragging and dropping, and adjusting input fields.

[0768] Step 8:

[0769] The user selects the optimal wireframe pattern, and the device sends the final design to the server. A request to save the project is made. The input is the design data selected and fine-tuned by the user, and the output is the final design data saved on the server. The specific operation is that the user clicks the save button, and the data is sent to the server again.

[0770] Step 9:

[0771] The server saves the final design and updates the project data. The saved data is recorded in a database and managed as a project. The input is the final design data, and the output is the saved project data. Specifically, the server executes database transactions and permanently saves the data.

[0772] (Application example 2)

[0773] Next, a description will be given of Application Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the smart glasses 214 will be referred to as a "terminal."

[0774] In conventional wireframe generation systems, users specify the necessary functions and input fields, and wireframes are generated based on those, but this does not take into account the user's emotional state, which results in a problem of insufficient usability improvement. Additionally, it is difficult to provide optimal wireframes in real time that correspond to the user's emotions.

[0775] The specific processing by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means. In this invention, the server includes input means for the user to specify functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, emotion recognition means for recognizing the user's emotion, and means for adjusting the wireframe based on emotion data acquired from the emotion recognition means. This makes it possible to provide the optimal wireframe according to the user's emotional state in real time, thereby improving usability.

[0776] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[0777] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[0778] "Analysis and generation means" means a means including an algorithm for analyzing input content received by the server and generating a plurality of wireframe patterns.

[0779] The "display means" is an interface that presents the generated wireframe pattern to the user.

[0780] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0781] "Emotion recognition means" is a technology that recognizes the user's emotions and adjusts the wireframe based on those emotions.

[0782] The "adjustment means" is a means for adjusting the wireframe based on the emotion data acquired from the emotion recognition means.

[0783] This invention is a system that automatically generates multiple wireframe patterns based on the screen functions, input items, display content, and priority specified by the user, and further adjusts the optimal wireframe through emotion recognition. This system is particularly effective for generating product detail pages on online shopping sites.

[0784] An embodiment of the system is as follows.

[0785] Input and Data Transmission

[0786] Users use their smartphones to specify input items on the product detail page (such as the "Add to Cart" button, "Product Image," "Price Tag," "Product Description," and "User Reviews") and their priorities. The smartphone's touch interface is used as the input method.

[0787] The terminal sends the input content specified by the user to the server, using a request via the HTTP protocol as the communication interface.

[0788] Data analysis and wireframe generation

[0789] The server analyzes the received data and identifies the required functions and input fields. This analysis is performed using an initial analysis algorithm. Next, the analysis and generation function on the server generates multiple wireframe patterns (vertical layout, horizontal layout, grid layout) based on the specified priority.

[0790] Emotion Recognition and Regulation

[0791] The emotion recognition means collects user emotional data in real time via the smartphone camera, which is then analyzed by the dedicated EmotionEngine library.

[0792] Based on the emotional data obtained from the emotion recognition system, the server adjusts the wireframe, suggesting a consistent layout for relaxed users and a concise layout that highlights important information for stressed users.

[0793] Wireframe presentation and selection

[0794] The server sends the generated wireframe patterns to the smartphone, and the user can preview each pattern using the display means.

[0795] The user selects the most suitable wireframe pattern from the ones presented preferentially by the emotion recognition system using a touch interface.

[0796] Examples and prompts

[0797] Consider a specific example where a product detail page is generated when a new product "XYZ Smartphone" is released. In this case, the user inputs the following prompt sentence:

[0798] "Generate a detail page for a new product, "XYZ Smartphone." Required features include an "Add to Cart" button, "Product Image," and "Price Tag." Display content includes a "Product Description" and "User Reviews." Use emotion recognition to suggest the optimal layout for the user's state."

[0799] This allows users to quickly and efficiently select the optimal wireframe for their emotional state. The required hardware is a smartphone and its camera, and the software requires the EmotionEngine library and HTTP communication library.

[0800] The flow of the specific processing in the application example 2 will be described with reference to FIG.

[0801] Step 1:

[0802] A user logs into the system and creates a "New Project." Here, the user inputs the features required for the product detail page ("Add to Cart" button, "Product Image," "Price Tag"), display content ("Product Description," "User Reviews"), and priority. The input data is collected through the smartphone's touch interface. The input includes data on each feature specified by the user and its priority. The device collects this input data.

[0803] Step 2:

[0804] The terminal sends the collected input data to the server. The communication interface uses the HTTP protocol, and the transmitted data is in JSON format. During this process, the input data is properly encoded and sent to the server. The server receives the received data and analyzes its contents.

[0805] Step 3:

[0806] The server analyzes the received data and checks the required functions and display content. It then executes an initial analysis algorithm and processes the data. As a result of the analysis, the specified items and their priorities are confirmed. This generates a list of required functions and display items.

[0807] Step 4:

[0808] The analysis and generation means in the server initializes the algorithm and generates multiple wireframe patterns. The generation algorithm creates different layout patterns such as vertical layout, horizontal layout, and grid layout. Each layout is based on the priority specified by the user, with the most important items placed in prominent positions. The multiple generated wireframe patterns are created as output.

[0809] Step 5:

[0810] The device's camera is used to collect user emotion data, which is then analyzed in real time by the EmotionEngine library to identify the user's emotional state (e.g., relaxed, stressed, etc.). The input is video data from the camera, and the output is the analyzed emotion data.

[0811] Step 6:

[0812] The server adjusts the generated wireframe pattern based on the emotional data. The emotion recognition means prioritizes a consistent layout when the user is relaxed, and a concise layout that emphasizes important information when the user is stressed. This allows the server to select the optimal wireframe according to the user's emotional state.

[0813] Step 7:

[0814] The server transmits the adjusted wireframe patterns to the terminal, and the transmitted data includes the adjusted wireframe patterns. The wireframe patterns are displayed to the user via the display means.

[0815] Step 8:

[0816] The user previews the presented wireframe patterns and selects the best one using the touch interface. The user's selection is recorded by the device, and the selected wireframe is sent to the server as the final design. The final transmitted data includes the selected wireframe.

[0817] Step 9:

[0818] The server stores the final design selected by the user, confirming project completion, and serves as a reference for future project creation.

[0819] The specific processing unit 290 transmits the result of the specific processing to the smart glasses 214. In the smart glasses 214, the control unit 46A causes the speaker 240 to output the result of the specific processing. The microphone 238 acquires audio indicating a user input regarding the result of the specific processing. The control unit 46A transmits audio data indicating the user input acquired by the microphone 238 to the data processing device 12. In the data processing device 12, the specific processing unit 290 acquires the audio data.

[0820] The data generation model 58 is a so-called generative AI (Artificial Intelligence). An example of the data generation model 58 is ChatGPT (Internet Search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search <url: https: gemini.google.com ?hl="ja">) and other generation AIs. The data generation model 58 is obtained by performing deep learning on a neural network. A prompt including an instruction is input to the data generation model 58, and inference data such as voice data indicating voice, text data indicating text, and image data indicating an image is also input. The data generation model 58 performs inference on the input inference data in accordance with the instruction indicated by the prompt, and outputs the inference result in a data format such as voice data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.

[0821] In the above embodiment, an example in which the specific processing is performed by the data processing device 12 has been given, but the technology of the present disclosure is not limited to this, and the specific processing may be performed by the smart glasses 214.

[0822] [Third embodiment]

[0823] FIG. 5 shows an example of the configuration of a data processing system 310 according to the third embodiment.

[0824] 5, the data processing system 310 includes the data processing device 12 and a headset type terminal 314. An example of the data processing device 12 is a server.

[0825] The data processing device 12 includes a computer 22, a database 24, and a communication I / F 26. The computer 22 is an example of a "computer" according to the technology of the present disclosure. The computer 22 includes a processor 28, a RAM 30, and a storage 32. The processor 28, the RAM 30, and the storage 32 are connected to a bus 34. The database 24 and the communication I / F 26 are also connected to the bus 34. The communication I / F 26 is connected to a network 54. Examples of the network 54 include a WAN (Wide Area Network) and / or a LAN (Local Area Network).

[0826] The headset type terminal 314 includes a computer 36, a microphone 238, a speaker 240, a camera 42, a communication I / F 44, and a display 343. The computer 36 includes a processor 46, a RAM 48, and a storage 50. The processor 46, the RAM 48, and the storage 50 are connected to a bus 52. The microphone 238, the speaker 240, the camera 42, and the display 343 are also connected to the bus 52.

[0827] The microphone 238 receives instructions and the like from the user 20 by receiving voice uttered by the user 20. The microphone 238 captures the voice uttered by the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio in accordance with instructions from the processor 46.

[0828] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an imaging element such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the surroundings of user 20 (for example, an imaging range defined by an angle of view equivalent to the field of vision of a typical healthy person).

[0829] The communication I / F 44 is connected to a network 54. The communication I / Fs 44 and 26 control the exchange of various information between the processor 46 and the processor 28 via the network 54. The exchange of various information between the processor 46 and the processor 28 using the communication I / Fs 44 and 26 is carried out in a secure state.

[0830] Fig. 6 shows an example of the main functions of the data processing device 12 and the headset type terminal 314. As shown in Fig. 6, in the data processing device 12, a specific process is performed by the processor 28. A specific process program 56 is stored in the storage 32.

[0831] The specific processing program 56 is an example of a "program" according to the technology of the present disclosure. The processor 28 reads the specific processing program 56 from the storage 32 and executes the read specific processing program 56 on the RAM 30. The specific processing is realized by the processor 28 operating as a specific processing unit 290 in accordance with the specific processing program 56 executed on the RAM 30.

[0832] The storage 32 stores a data generation model 58 and an emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.

[0833] In the headset type terminal 314, a reception output process is performed by the processor 46. A reception output program 60 is stored in the storage 50. The processor 46 reads the reception output program 60 from the storage 50 and executes the read reception output program 60 on the RAM 48. The reception output process is realized by the processor 46 operating as the control unit 46A in accordance with the reception output program 60 executed on the RAM 48.

[0834] Next, a description will be given of the identification process performed by the identification processing unit 290 of the data processing device 12. In the following description, the data processing device 12 will be referred to as the "server" and the headset type terminal 314 will be referred to as the "terminal."

[0835] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0836] System configuration

[0837] The system mainly consists of the following components:

[0838] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[0839] 2. Transmission means: A communication interface that transmits input contents to the server.

[0840] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[0841] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[0842] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[0843] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[0844] Program processing explanation

[0845] User Input and Data Submission

[0846] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input items (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0847] The terminal sends the user's input to the server. This sent data includes all the specified items and their priorities.

[0848] Data analysis and wireframe generation

[0849] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0850] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0851] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0852] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0853] Wireframe presentation and selection

[0854] The server transmits the generated wireframe patterns to the terminal.

[0855] The device displays these wireframe patterns to the user, who then sees a preview of each pattern.

[0856] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0857] Specific examples

[0858] For example, to generate wireframes for a new user registration screen:

[0859] The user enters the following:

[0860] Required features: "Register" button, Cancel button

[0861] Input fields: Text field "User name", text field "Email address", text field "Password"

[0862] Display: "User Registration" heading, link to Terms of Use

[0863] Priority: Register button (high), Cancel button (low)

[0864] The device sends this data to a server, which generates multiple wireframe patterns, presents them to the user, and the user can select the most suitable pattern to quickly and efficiently create a wireframe.

[0865] This system reduces the amount of work required to create wireframes, improves the speed and efficiency of project progress, and also facilitates smoother communication with designers, improving the overall design quality.

[0866] The processing flow will be explained below.

[0867] Step 1:

[0868] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[0869] Step 2:

[0870] The user specifies the following inputs on the project creation screen:

[0871] Required functionality (e.g. "Register" button, Cancel button)

[0872] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[0873] Display content (e.g., "User Registration" heading, link to Terms of Use)

[0874] Priority (e.g., Register button (high), Cancel button (low))

[0875] Step 3:

[0876] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[0877] Step 4:

[0878] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[0879] Step 5:

[0880] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[0881] Step 6:

[0882] The server follows basic layout rules to properly arrange the necessary functions and input fields. At this stage, it also adjusts the placement of key elements in prominent positions according to priority.

[0883] Step 7:

[0884] The server generates multiple layout patterns (e.g. vertical layout, horizontal layout, grid layout), which provides multiple options to the user.

[0885] Step 8:

[0886] The server transmits the generated wireframe patterns to the terminal.

[0887] Step 9:

[0888] The device displays the received wireframe patterns to the user, with a preview of each pattern displayed as a thumbnail on the screen.

[0889] Step 10:

[0890] The user selects the wireframe pattern that they feel is best, and then tweaks and customizes the selected pattern as needed.

[0891] Step 11:

[0892] The device sends the user's final design to the server and requests that the project be saved, which officially saves the project.

[0893] This series of steps allows users to efficiently generate wireframes, progress projects quickly and effectively, and improve communication with designers, improving overall design quality.

[0894] Example 1

[0895] Next, a description will be given of Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the headset type terminal 314 will be referred to as a "terminal."

[0896] In modern user interface design, it is important to generate wireframes efficiently and quickly. However, traditional manual wireframe creation requires time and effort, which can hinder improvements in usability and design quality. Furthermore, there are limited means to automatically generate multiple wireframe patterns based on user requests and streamline the process of selecting the optimal pattern. Therefore, a wireframe generation system that takes usability into consideration is needed.

[0897] The specific processing by the specific processing unit 290 of the data processing device 12 in the first embodiment is realized by the following means.

[0898] In this invention, the server includes an interface means for the user to specify the functions, input fields, display content, and priority required for the information terminal, a communication means for transmitting the specified input information to the computer system, and an algorithm means for the computer system to analyze the received input information and generate multiple wireframe layouts. This makes it possible to quickly generate wireframes that take usability into consideration based on the user's requests and select the optimal one from the multiple patterns presented.

[0899] "Interface means" refers to the means by which a user specifies the functions, input fields, display contents, and priorities required for an information terminal.

[0900] "Communication means" refers to a means for transmitting designated input information to a computer system.

[0901] An "algorithmic means" is a means by which a computer system analyzes input information it receives and generates multiple wireframe layouts.

[0902] The "screen display means" is a means for displaying the generated wireframe layout to the user.

[0903] The "selection method" is a method by which the user selects the most suitable one from the displayed wireframe layouts.

[0904] A "computer system" is a computer system that analyzes input user information and generates wireframes.

[0905] A "wireframe layout" is a structural mockup of a design used in designing a user interface, showing the placement of functions, input fields, and display content.

[0906] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[0907] System configuration

[0908] The system mainly consists of the following components:

[0909] 1. Interface means: A means by which a user specifies the functions, input fields, display content, and priorities required for an information terminal. Specifically, it uses a form or wizard-style interface that runs on a web browser.

[0910] 2. Communication method: A method for sending specified input information to a computer system. Specifically, data communication using an HTTP POST request corresponds to this.

[0911] 3. Algorithmic means: A computer system analyzes the input information it receives and generates multiple wireframe layouts using a generative AI model implemented in a programming language such as Python.

[0912] 4. Screen display method: This is the method for displaying the generated wireframe layout to the user. It is dynamically rendered on a web page using JavaScript and HTML.

[0913] 5. Selection tool: This is the tool that allows the user to select the best one from the displayed wireframe layouts. This interface also runs on a web browser.

[0914] Program processing explanation

[0915] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input items (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[0916] The device sends the user's input to the server, including all the specified items and their priorities. The data is packaged in JSON format and sent to the server using an HTTP POST request.

[0917] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[0918] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[0919] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[0920] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[0921] The server sends the generated wireframe patterns to the terminal, which displays them to the user, allowing the user to see a preview of each pattern.

[0922] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[0923] Specific examples

[0924] For example, to generate a wireframe for a new user registration screen: the user enters the following:

[0925] Required features: "Register" button, Cancel button

[0926] Input fields: Text field "User name", text field "Email address", text field "Password"

[0927] Display: "User Registration" heading, link to Terms of Use

[0928] Priority: Register button (high), Cancel button (low)

[0929] This data is sent to a server, which generates multiple wireframe patterns and presents them to the user, who can then choose the best one and make fine adjustments.

[0930] Prompt Sentence Examples

[0931] "To create a new user registration screen, generate a wireframe that includes the following elements: 'Register' and 'Cancel' buttons, text fields for username, email address, and password, a 'Register' heading, and a link to the Terms of Use. The Register button has high priority, and the Cancel button has low priority."

[0932] The flow of the identification process in the first embodiment will be described with reference to FIG.

[0933] Step 1: User Input

[0934] A user logs into the system. After successful login, they select "New Project" and proceed to the project creation screen. Here, the user enters the following:

[0935] Required functionality (e.g., "Register" button)

[0936] Input field (e.g., text field "User name", text field "Email address")

[0937] Display content (e.g., "User Registration" heading)

[0938] Priority (e.g., the register button has high priority)

[0939] Input: Functions, input fields, display content, and priority are entered by the user into the form.

[0940] Output: The input data is temporarily stored in the device's memory.

[0941] Step 2: Send data

[0942] The device converts the information entered by the user into packets of data, organizes them by data field, packages the data in JSON format, and sends it to the server using an HTTP POST request.

[0943] Input: Data entered by the user into the form.

[0944] Output: JSON formatted data sent to the server as an HTTP POST request.

[0945] Step 3: Data analysis

[0946] The server deserializes the received data and converts it into an internal data structure. The server analyzes the data and prepares it to arrange the necessary functions and input fields in an appropriate layout.

[0947] Input: JSON formatted data.

[0948] Output: The parsed data is stored in the server's memory as an internal data structure.

[0949] Step 4: Wireframe generation

[0950] The server's analysis and generation process runs the algorithm to generate multiple wireframe patterns using a generative AI model, as follows:

[0951] 1. Apply layout rules based on data analysis results.

[0952] 2. Place each element in the appropriate position based on priority.

[0953] 3. Try different patterns such as vertical layout, horizontal layout, grid layout, etc. and generate variations of each.

[0954] Input: Parsed internal data structure.

[0955] Output: Multiple wireframe patterns are generated and prepared for sending to the terminal.

[0956] Step 5: Wireframe Presentation

[0957] The server generates multiple wireframe patterns and sends them to the device. The device deserializes the received data and displays it in the user interface. JavaScript is used to render multiple wireframe patterns as previews.

[0958] Input: Generated wireframe pattern (data in JSON format).

[0959] Output: Multiple wireframe patterns displayed on a web page.

[0960] Step 6: Wireframe Selection

[0961] The user selects the best wireframe pattern from the displayed ones, checks each pattern, clicks the "Select" button, and makes fine adjustments as needed.

[0962] Input: User interaction to select and fine-tune each wireframe pattern.

[0963] Output: The optimal wireframe pattern and its fine-tuning information are saved as final data on the device.

[0964] Step 7: Save Requests and Project Saving

[0965] The device sends the selected wireframe pattern and fine-tuning information to the server. As a save request, the data is sent to the server again in JSON format using an HTTP POST request.

[0966] The server saves the received data and stores it in the database as the final design for the project. The server establishes a database connection and inserts the data into the appropriate tables.

[0967] Input: JSON formatted data of the final design.

[0968] Output: The final design of the project is saved in the database.

[0969] (Application example 1)

[0970] Next, a description will be given of Application Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the headset type terminal 314 will be referred to as a "terminal."

[0971] With conventional wireframe generation systems, generating wireframes based on the functions, input fields, display content, and priorities specified by the user requires time and effort, making it difficult to quickly design optimal web pages or application screens.In addition, it is often difficult for users to determine whether the pages they have designed themselves are optimal, which often results in a lot of effort being required to create the final design.

[0972] Furthermore, on online shopping sites, the design of product detail pages has a significant impact on purchasing motivation, so page optimization is important, but there was a lack of efficient systems that could meet such needs.

[0973] The specific processing by the specific processing unit 290 of the data processing device 12 in the application example 1 is realized by the following means.

[0974] In this invention, the server includes input means for a user to specify the functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the received input content and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, and means for performing data analysis and layout generation using a generative AI model. This enables users to efficiently generate optimal wireframes and quickly design product detail pages, category list pages, etc., particularly for online shopping sites.

[0975] "User" refers to an individual or organization that specifies the functions, input fields, display content, and priorities required for the screen and instructs the generation of the wireframe.

[0976] "Input means" refers to the interface that allows the user to specify screen functions, input items, display content, and priority.

[0977] "Transmission means" refers to a communication interface for transmitting input contents designated by the user to the server.

[0978] "Analysis and generation means" refers to the algorithms and programs that analyze the input received by the server and generate multiple wireframe patterns.

[0979] "Display means" refers to an interface for presenting the generated multiple wireframe patterns to the user.

[0980] "Selection means" refers to an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[0981] "Generative AI Model" refers to an artificial intelligence model used to perform data analysis and layout generation.

[0982] A "wireframe pattern" refers to a drawing or template that shows the basic design of a screen layout.

[0983] "E-commerce Site" means a website where products are sold and purchased online.

[0984] "Priority" refers to the importance of each function, input field, and display content specified by the user.

[0985] "Layout" refers to the arrangement and structure of functions, input fields, and display content on the screen.

[0986] This invention relates to a system that automatically generates multiple wireframe patterns based on user-specified functions, input items, display content, and priority levels required for a screen. The following describes an embodiment of this invention.

[0987] System configuration

[0988] The system mainly consists of the following components:

[0989] 1. Input method: An interface that allows users to input screen functions, input items, display content, and priorities on a smartphone. For example, using a smartphone's touch screen.

[0990] 2. Transmission means: A communication interface that allows the smartphone to transmit the specified input content to the server. For example, it uses the smartphone's internet connection.

[0991] 3. Analysis and generation method: An algorithm that analyzes the input received by the server and generates multiple wireframe patterns. For generation, a generative AI model such as TensorFlow is used.

[0992] 4. Display: An interface for displaying the generated wireframe pattern on a smartphone. For example, a user interface using React Native.

[0993] 5. Selection method: An interface that allows users to select the most suitable one from the displayed wireframe patterns. This also uses touch operations on a smartphone.

[0994] Hardware and software examples

[0995] Hardware: Smartphone (iOS or Android)

[0996] Software: React Native (front-end application framework), Node.js + Express (back-end server), MongoDB (database), TensorFlow (generative AI model)

[0997] Program processing flow

[0998] 1. User Input

[0999] The user launches the app on their smartphone and enters the new page creation mode, where they specify the required functions, input fields, display content, and priority.

[1000] 2. Data Transmission

[1001] The smartphone sends the entered data to the backend server.

[1002] 3. Data analysis and wireframe generation

[1003] The server analyzes the received data using a TensorFlow model and generates a layout. Each element is placed based on priority, and multiple wireframe patterns are automatically generated.

[1004] 4. Wireframe Presentation and Selection

[1005] The server generates multiple wireframes and sends them to the smartphone, where the app displays them to the user, who then selects the best layout, and the final layout is saved on the server.

[1006] Specific examples

[1007] For example, to create a detail page for a new product, the user enters the following:

[1008] Required features: Buy button, Add to cart button, product image gallery, review section

[1009] Input fields: Text field "Product name", text field "Price", text field "Description"

[1010] Display content: "Product Details" heading, list of related products

[1011] Priority: Product image gallery (high), review section (medium), related product listings (low)

[1012] This data is sent to a server, which generates multiple wireframe patterns, which are then presented to the user, who can select the most suitable pattern to quickly and efficiently create a product detail page.

[1013] Prompt Sentence Examples

[1014] Here are some example prompts to input to the generative AI model:

[1015] Generate a wireframe for your new product detail page based on the following inputs:

[1016] Required features: Buy button, Add to cart button, product image gallery, review section

[1017] Input fields: Text field "Product name", text field "Price", text field "Description"

[1018] Display content: "Product Details" heading, list of related products

[1019] Priority: Product image gallery (high), review section (medium), related product listings (low)

[1020] Generate multiple wireframe patterns (e.g. vertical layout, grid layout).

[1021] This invention enables users to efficiently generate optimal wireframes and quickly design product detail pages and category list pages, particularly for online shopping sites.

[1022] The flow of the specific processing in the application example 1 will be described with reference to FIG.

[1023] Step 1:

[1024] The user starts the smartphone application and enters new page creation mode, where they specify the required functions, input fields, display content, and priority using touch input.

[1025] Input: User-specified functions (e.g., buy button, add to cart button, etc.), input fields (e.g., product name, price, description, etc.), display content (e.g., headline, related products, etc.), priority (e.g., high, medium, low).

[1026] Output: The specified data is saved in the smartphone.

[1027] Step 2:

[1028] The device sends the inputs you provide to the server over your internet connection.

[1029] Input: Data provided by the user in step 1.

[1030] Output: The input data arrives at the server.

[1031] Step 3:

[1032] The server analyzes the received data, including the specified functions, input fields, display content, and priority. This data is used for pre-processing to generate wireframes.

[1033] Input: Data sent from the terminal.

[1034] Output: Analysis results and data organization. Specifically, this includes an assessment of the importance and priority of each input item and function.

[1035] Step 4:

[1036] The server uses a generative AI model (e.g., TensorFlow) to generate multiple wireframe patterns based on the analysis results. The generative AI model then proposes the optimal layout based on the acquired data.

[1037] Input: Parsed data, prompt sentence for the generative AI model.

[1038] Output: Multiple wireframe patterns (e.g. vertical layout, grid layout).

[1039] Step 5:

[1040] The server transmits the generated wireframe patterns to the terminal.

[1041] Input: The generated wireframe pattern.

[1042] Output: The wireframe pattern arrives at the terminal.

[1043] Step 6:

[1044] The device displays the received wireframe patterns to the user, who then reviews the presented wireframe patterns and selects the most suitable one.

[1045] Input: Wireframe pattern sent from the server.

[1046] Output: The wireframe pattern presented to the user.

[1047] Step 7:

[1048] The user selects the optimal wireframe pattern, makes fine adjustments as necessary, and determines the final design. The user's selection and fine-tuning results are sent from the device to the server and stored on the server.

[1049] Input: User selected final wireframe pattern and refined design data.

[1050] Output: The final design is saved to the server.

[1051] By following the above steps, users can efficiently generate optimal designs, and can quickly design product detail pages and category list pages, especially for online shopping sites.

[1052] Furthermore, an emotion engine that estimates the user's emotion may be further combined. That is, the identification processing unit 290 may estimate the user's emotion using the emotion identification model 59, and perform identification processing using the user's emotion.

[1053] The present invention relates to a system in which a user specifies the functions, input items, display content, and priority required for the screen, and based on this, multiple wireframe patterns are automatically generated, and furthermore, an emotion engine that recognizes the user's emotions is combined.

[1054] System configuration

[1055] The system mainly consists of the following components:

[1056] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[1057] 2. Transmission means: A communication interface that transmits input contents to the server.

[1058] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[1059] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[1060] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[1061] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[1062] 7. Emotion Engine: An engine that recognizes user emotions and presents or adjusts wireframes based on those emotions.

[1063] Program processing explanation

[1064] User Input and Data Submission

[1065] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[1066] The device collects the user's input and sends it to the server. The data sent includes all the specified items and their priorities.

[1067] Data analysis and wireframe generation

[1068] The server analyzes the received data and checks the required functions and input fields. An initial analysis is performed for this purpose. Next, the analysis and generation means in the server initializes the algorithm and arranges the required functions and input fields appropriately as a screen layout. Based on priority, the main elements are placed in prominent positions and different layout patterns (vertical layout, horizontal layout, grid layout) are generated.

[1069] Coordination using emotion engine

[1070] The emotion engine recognizes the user's emotions in real time and prioritizes the most appropriate wireframe patterns based on their emotional state. The emotion engine analyzes the user's emotional data and adjusts the wireframe based on that data. To achieve this, the emotion engine also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[1071] Wireframe presentation and selection

[1072] The server transmits the generated wireframe patterns to the terminal.

[1073] The device displays the received wireframe patterns to the user, who can then preview each pattern. The patterns are prioritized by the emotion engine, allowing the user to quickly find the pattern that best suits their emotional state.

[1074] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends the final design to the server and requests that the project be saved.

[1075] Specific examples

[1076] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[1077] Users specify the required functions, input fields, display content, and priority. The emotion engine recognizes the user's emotions when entering information and adjusts the placement of registration buttons and input fields to optimize visibility and operability. For example, if the user is relaxed, the layout will be arranged with an emphasis on consistency and unity. On the other hand, if the user is stressed, important functions and fields will be emphasized and a simpler layout will be suggested.

[1078] The device sends this data to the server, which generates multiple wireframe patterns. The generated patterns are presented to the user, who can then select the most suitable pattern with the help of the emotion engine, allowing them to quickly and efficiently create wireframes.

[1079] This system reduces the man-hours required for creating wireframes, makes project progress faster and more efficient, and facilitates smoother communication with designers. Furthermore, by taking user emotions into consideration, it is possible to propose designs that will achieve high user satisfaction.

[1080] The processing flow will be explained below.

[1081] Step 1:

[1082] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[1083] Step 2:

[1084] The user specifies the following inputs on the project creation screen:

[1085] Required functionality (e.g. "Register" button, Cancel button)

[1086] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[1087] Display content (e.g., "User Registration" heading, link to Terms of Use)

[1088] Priority (e.g., Register button (high), Cancel button (low))

[1089] Step 3:

[1090] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[1091] Step 4:

[1092] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[1093] Step 5:

[1094] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[1095] Step 6:

[1096] The server follows basic layout rules to properly position the necessary functions and input fields, and also adjusts the placement of key elements in prominent positions according to priority.

[1097] Step 7:

[1098] The emotion engine recognizes the user's emotions in real time and adjusts the layout based on their emotional state. For example, if the user is stressed, important features will be placed more prominently.

[1099] Step 8:

[1100] The emotion engine accumulates past emotion data and uses it to improve future suggestions. The learning function understands the user's emotional patterns and suggests more appropriate wireframes.

[1101] Step 9:

[1102] The server generates multiple layout patterns (e.g., vertical layout, horizontal layout, grid layout), including patterns adjusted by the emotion engine.

[1103] Step 10:

[1104] The server transmits the generated wireframe patterns to the terminal.

[1105] Step 11:

[1106] The device displays the received wireframe patterns to the user, with a preview screen showing thumbnails of each pattern.

[1107] Step 12:

[1108] Users can select the wireframe pattern they feel is best. This makes the selection easy as it includes patterns prioritized by the emotion engine.

[1109] Step 13:

[1110] Make any desired tweaks to the wireframe pattern you have selected, such as adjusting the position of buttons or the size of input fields.

[1111] Step 14:

[1112] The device sends the final design to the server and makes a save request, which the server receives and officially saves the project.

[1113] This process allows users to efficiently generate wireframes, enabling projects to proceed quickly and effectively. The emotional engine also suggests optimal wireframes based on the user's emotional state, increasing satisfaction.

[1114] Example 2

[1115] Next, a description will be given of Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the headset type terminal 314 will be referred to as a "terminal."

[1116] Conventional wireframe generation systems lack the ability to consider user emotions when generating screen layouts based on user input. This makes it difficult to quickly select the optimal layout when users feel stressed or anxious. Furthermore, conventional systems do not adequately automate appropriate layouts based on usability and priorities. This results in a poor user experience and impacts satisfaction with the final design.

[1117] The specific processing by the specific processing unit 290 of the data processing device 12 in the second embodiment is realized by the following means.

[1118] In this invention, the server includes input means for a user to specify functions, input items, display content, and priorities required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the most appropriate one from the presented wireframe patterns, and emotion recognition means for recognizing the emotional state of the user and adjusting the wireframe based on that emotion. This makes it possible to automatically generate wireframes based on priorities and present an appropriate layout based on them, while taking the user's emotions into consideration.

[1119] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[1120] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[1121] The "analysis and generation means" refers to an algorithm or processing device that analyzes the input content received by the server and generates multiple wireframe patterns.

[1122] The "display means" is an interface for presenting the generated wireframe pattern to the user.

[1123] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[1124] An "emotion recognizer" is a mechanism for recognizing the user's emotional state and adjusting the wireframe based on that emotion.

[1125] "Priority" is an element that indicates the importance of each function or input item designated by the user.

[1126] "Wireframe" refers to a basic layout plan for screen design.

[1127] "Layout patterns" refer to multiple ways of structuring and arranging wireframes.

[1128] The present invention relates to a system that automatically generates multiple wireframe patterns based on a user's specification of the functions, input items, display content, and priority required for the screen, and further combines this with an emotion engine that recognizes the user's emotions. Specific methods for carrying out the invention are described below.

[1129] 1. System Configuration

[1130] The system mainly consists of the following components:

[1131] Input means: The interface through which the user specifies screen functions, input items, etc. This includes keyboards, mice, and touchscreen devices.

[1132] Transmission means: A communication interface that transmits input contents to the server. This can be an internet connection or a local network.

[1133] Server: Analyzes the received input and generates multiple wireframe patterns. The server requires a high-performance CPU and a large amount of memory.

[1134] Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server. Specifically, machine learning models and rule-based algorithms are used.

[1135] Display method: An interface that displays the generated multiple wireframe patterns to the user. This can be a browser or a dedicated application.

[1136] Selection tool: An interface that allows the user to select the best wireframe pattern from the presented ones.

[1137] Emotion recognition engine: An engine that recognizes the user's emotions in real time and presents and adjusts wireframes based on those emotions. It can use facial recognition and voice analysis technologies.

[1138] 2. Program processing explanation

[1139] User Input and Data Submission

[1140] A user logs in to the system and creates a "new project." On the project creation screen, the user enters the functions required for the screen (e.g., a "Register" button), input items (e.g., user name, email address), display content (e.g., a "User Registration" heading), and priority. The device collects the user's input and sends it to the server via a communication interface. The transmitted data includes all specified items, their priorities, and data indicating the user's emotional state.

[1141] Data analysis and wireframe generation

[1142] The server analyzes the received data and checks the required functions and input fields. In the initial stage of data analysis, the consistency of the input data is checked. After that, the algorithm that serves as the analysis and generation means within the server is initialized, and the main elements are automatically placed in prominent positions based on priority. Different layout patterns (vertical layout, horizontal layout, grid layout) are also generated simultaneously.

[1143] Coordination using emotion engine

[1144] The emotion recognition means recognizes the user's emotions in real time and selects and prioritizes appropriate wireframe patterns based on that emotional state. The emotion engine analyzes the user's facial recognition data and voice data to detect their emotional state. It also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[1145] 3. Specific Examples

[1146] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[1147] The user specifies the required functions (such as a "Register" button), input fields (such as "User name" and "Email address"), display content (such as a "User Registration" heading), and priority. The emotion recognition means recognizes the user's emotions when entering information and adjusts the placement of the registration button and input fields. For example, if the user is relaxed, the layout is arranged with an emphasis on consistency and unity. On the other hand, if the user is feeling stressed, important functions and fields are emphasized and a simple layout is suggested.

[1148] The device sends this data to a server, which generates multiple wireframe patterns. The patterns are presented to the user, who, with the help of emotion recognition tools, selects the best one. After selection, the final design is sent to the server and a request is made to save the project.

[1149] Prompt Sentence Examples

[1150] In practice, when using a generative AI model, the prompt might look something like this:

[1151] "Generate a wireframe for a new user registration screen. The required functions are a 'Register' button, the input fields are 'Username' and 'Email address', the display content is the 'User Registration' heading, and all are set to high priority."

[1152] The flow of the identification process in the second embodiment will be described with reference to FIG.

[1153] Step 1:

[1154] A user logs into the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority. The user-specified functions, input fields, display content, and priority are collected as input data. The terminal collects this data and prepares it for transmission via the communication interface. Specifically, the user enters information into the form and clicks the save button, which saves the data to the terminal.

[1155] Step 2:

[1156] The device sends the user's input data to the server by pressing the send button. The sent data includes all specified items, their priorities, and the user's emotional state (data collected by the camera and microphone). An encrypted communication channel is used for transmission. Specifically, when the send button is clicked, the data is sent to the server in the form of a POST request.

[1157] Step 3:

[1158] The server analyzes the data it receives. It checks the data for consistency (checking required fields and removing invalid data formats) and sends the received data to the analysis and generation means. During analysis, the data is also preprocessed so that each function and input item is properly understood. The input is the data sent from the terminal, and the output is analyzed data. Specifically, the data is saved in a database and passed to the analysis algorithm.

[1159] Step 4:

[1160] The analysis and generation means generates multiple wireframe patterns based on the analyzed data. An algorithm is used for generation, placing important items in prominent positions based on the priorities specified by the user. Specifically, different patterns such as vertical layout, horizontal layout, and grid layout are generated. The input is the analyzed data, and the output is multiple wireframe patterns. Specifically, the selected algorithm performs calculations and generates the pattern generation results.

[1161] Step 5:

[1162] The emotion recognition means analyzes the user's emotions in real time and adjusts the generated wireframe pattern based on that information. Emotional data from the camera and microphone is input, which is analyzed to output the emotional state. The layout and design of the generated wireframe are fine-tuned based on this emotional state. Specific operations include a process of analyzing emotions from real-time video and audio data and reflecting them in the wireframe.

[1163] Step 6:

[1164] The server sends the generated and adjusted multiple wireframe patterns to the terminal. The adjusted wireframe patterns are sent to the terminal as output data. Specifically, the generated patterns are packaged in JSON or XML format and sent to the terminal as an HTTP response.

[1165] Step 7:

[1166] The terminal displays the received wireframe patterns to the user. The user can preview each pattern and select and fine-tune the most suitable one. The input is the adjusted wireframe pattern, and the output is the user's selected and fine-tuned data. Specific operations involve the user selecting a pattern through the interface, dragging and dropping, and adjusting input fields.

[1167] Step 8:

[1168] The user selects the optimal wireframe pattern, and the device sends the final design to the server. A request to save the project is made. The input is the design data selected and fine-tuned by the user, and the output is the final design data saved on the server. The specific operation is that the user clicks the save button, and the data is sent to the server again.

[1169] Step 9:

[1170] The server saves the final design and updates the project data. The saved data is recorded in a database and managed as a project. The input is the final design data, and the output is the saved project data. Specifically, the server executes database transactions and permanently saves the data.

[1171] (Application example 2)

[1172] Next, a description will be given of Application Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the headset type terminal 314 will be referred to as a "terminal."

[1173] In conventional wireframe generation systems, users specify the necessary functions and input fields, and wireframes are generated based on those, but this does not take into account the user's emotional state, which results in a problem of insufficient usability improvement. Additionally, it is difficult to provide optimal wireframes in real time that correspond to the user's emotions.

[1174] The specific processing by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means. In this invention, the server includes input means for the user to specify functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, emotion recognition means for recognizing the user's emotion, and means for adjusting the wireframe based on emotion data acquired from the emotion recognition means. This makes it possible to provide the optimal wireframe according to the user's emotional state in real time, thereby improving usability.

[1175] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[1176] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[1177] "Analysis and generation means" means a means including an algorithm for analyzing input content received by the server and generating a plurality of wireframe patterns.

[1178] The "display means" is an interface that presents the generated wireframe pattern to the user.

[1179] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[1180] "Emotion recognition means" is a technology that recognizes the user's emotions and adjusts the wireframe based on those emotions.

[1181] The "adjustment means" is a means for adjusting the wireframe based on the emotion data acquired from the emotion recognition means.

[1182] This invention is a system that automatically generates multiple wireframe patterns based on the screen functions, input items, display content, and priority specified by the user, and further adjusts the optimal wireframe through emotion recognition. This system is particularly effective for generating product detail pages on online shopping sites.

[1183] An embodiment of the system is as follows.

[1184] Input and Data Transmission

[1185] Users use their smartphones to specify input items on the product detail page (such as the "Add to Cart" button, "Product Image," "Price Tag," "Product Description," and "User Reviews") and their priorities. The smartphone's touch interface is used as the input method.

[1186] The terminal sends the input content specified by the user to the server, using a request via the HTTP protocol as the communication interface.

[1187] Data analysis and wireframe generation

[1188] The server analyzes the received data and identifies the required functions and input fields. This analysis is performed using an initial analysis algorithm. Next, the analysis and generation function on the server generates multiple wireframe patterns (vertical layout, horizontal layout, grid layout) based on the specified priority.

[1189] Emotion Recognition and Regulation

[1190] The emotion recognition means collects user emotional data in real time via the smartphone camera, which is then analyzed by the dedicated EmotionEngine library.

[1191] Based on the emotional data obtained from the emotion recognition system, the server adjusts the wireframe, suggesting a consistent layout for relaxed users and a concise layout that highlights important information for stressed users.

[1192] Wireframe presentation and selection

[1193] The server sends the generated wireframe patterns to the smartphone, and the user can preview each pattern using the display means.

[1194] The user selects the most suitable wireframe pattern from the ones presented preferentially by the emotion recognition system using a touch interface.

[1195] Examples and prompts

[1196] Consider a specific example where a product detail page is generated when a new product "XYZ Smartphone" is released. In this case, the user inputs the following prompt sentence:

[1197] "Generate a detail page for a new product, "XYZ Smartphone." Required features include an "Add to Cart" button, "Product Image," and "Price Tag." Display content includes a "Product Description" and "User Reviews." Use emotion recognition to suggest the optimal layout for the user's state."

[1198] This allows users to quickly and efficiently select the optimal wireframe for their emotional state. The required hardware is a smartphone and its camera, and the software requires the EmotionEngine library and HTTP communication library.

[1199] The flow of the specific processing in the application example 2 will be described with reference to FIG.

[1200] Step 1:

[1201] A user logs into the system and creates a "New Project." Here, the user inputs the features required for the product detail page ("Add to Cart" button, "Product Image," "Price Tag"), display content ("Product Description," "User Reviews"), and priority. The input data is collected through the smartphone's touch interface. The input includes data on each feature specified by the user and its priority. The device collects this input data.

[1202] Step 2:

[1203] The terminal sends the collected input data to the server. The communication interface uses the HTTP protocol, and the transmitted data is in JSON format. During this process, the input data is properly encoded and sent to the server. The server receives the received data and analyzes its contents.

[1204] Step 3:

[1205] The server analyzes the received data and checks the required functions and display content. It then executes an initial analysis algorithm and processes the data. As a result of the analysis, the specified items and their priorities are confirmed. This generates a list of required functions and display items.

[1206] Step 4:

[1207] The analysis and generation means in the server initializes the algorithm and generates multiple wireframe patterns. The generation algorithm creates different layout patterns such as vertical layout, horizontal layout, and grid layout. Each layout is based on the priority specified by the user, with the most important items placed in prominent positions. The multiple generated wireframe patterns are created as output.

[1208] Step 5:

[1209] The device's camera is used to collect user emotion data, which is then analyzed in real time by the EmotionEngine library to identify the user's emotional state (e.g., relaxed, stressed, etc.). The input is video data from the camera, and the output is the analyzed emotion data.

[1210] Step 6:

[1211] The server adjusts the generated wireframe pattern based on the emotional data. The emotion recognition means prioritizes a consistent layout when the user is relaxed, and a concise layout that emphasizes important information when the user is stressed. This allows the server to select the optimal wireframe according to the user's emotional state.

[1212] Step 7:

[1213] The server transmits the adjusted wireframe patterns to the terminal, and the transmitted data includes the adjusted wireframe patterns. The wireframe patterns are displayed to the user via the display means.

[1214] Step 8:

[1215] The user previews the presented wireframe patterns and selects the best one using the touch interface. The user's selection is recorded by the device, and the selected wireframe is sent to the server as the final design. The final transmitted data includes the selected wireframe.

[1216] Step 9:

[1217] The server stores the final design selected by the user, confirming project completion, and serves as a reference for future project creation.

[1218] The specific processing unit 290 transmits the result of the specific processing to the headset type terminal 314. In the headset type terminal 314, the control unit 46A causes the speaker 240 and the display 343 to output the result of the specific processing. The microphone 238 acquires audio indicating a user input regarding the result of the specific processing. The control unit 46A transmits audio data indicating the user input acquired by the microphone 238 to the data processing device 12. In the data processing device 12, the specific processing unit 290 acquires the audio data.

[1219] The data generation model 58 is a so-called generative AI (Artificial Intelligence). An example of the data generation model 58 is ChatGPT (Internet Search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search <url: https: gemini.google.com ?hl="ja">) and other generation AIs. The data generation model 58 is obtained by performing deep learning on a neural network. A prompt including an instruction is input to the data generation model 58, and inference data such as voice data indicating voice, text data indicating text, and image data indicating an image is also input. The data generation model 58 performs inference on the input inference data in accordance with the instruction indicated by the prompt, and outputs the inference result in a data format such as voice data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.

[1220] In the above embodiment, an example was given in which the specific processing is performed by the data processing device 12, but the technology of the present disclosure is not limited to this, and the specific processing may be performed by the headset type terminal 314.

[1221] [Fourth embodiment]

[1222] FIG. 7 shows an example of the configuration of a data processing system 410 according to the fourth embodiment.

[1223] 7, a data processing system 410 includes a data processing device 12 and a robot 414. An example of the data processing device 12 is a server.

[1224] The data processing device 12 includes a computer 22, a database 24, and a communication I / F 26. The computer 22 is an example of a "computer" according to the technology of the present disclosure. The computer 22 includes a processor 28, a RAM 30, and a storage 32. The processor 28, the RAM 30, and the storage 32 are connected to a bus 34. The database 24 and the communication I / F 26 are also connected to the bus 34. The communication I / F 26 is connected to a network 54. Examples of the network 54 include a WAN (Wide Area Network) and / or a LAN (Local Area Network).

[1225] The robot 414 includes a computer 36, a microphone 238, a speaker 240, a camera 42, a communication I / F 44, and a control target 443. The computer 36 includes a processor 46, a RAM 48, and a storage 50. The processor 46, the RAM 48, and the storage 50 are connected to a bus 52. The microphone 238, the speaker 240, the camera 42, and the control target 443 are also connected to the bus 52.

[1226] The microphone 238 receives instructions and the like from the user 20 by receiving voice uttered by the user 20. The microphone 238 captures the voice uttered by the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio in accordance with instructions from the processor 46.

[1227] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an imaging element such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the surroundings of user 20 (for example, an imaging range defined by an angle of view equivalent to the field of vision of a typical healthy person).

[1228] The communication I / F 44 is connected to a network 54. The communication I / Fs 44 and 26 control the exchange of various information between the processor 46 and the processor 28 via the network 54. The exchange of various information between the processor 46 and the processor 28 using the communication I / Fs 44 and 26 is carried out in a secure state.

[1229] The control object 443 includes a display device, LEDs in the eyes, and motors for driving the arms, hands, and feet. The posture and gestures of the robot 414 are controlled by controlling the motors of the arms, hands, and feet. Some of the emotions of the robot 414 can be expressed by controlling these motors. In addition, the facial expressions of the robot 414 can also be expressed by controlling the light emission state of the LEDs in the eyes of the robot 414.

[1230] Fig. 8 shows an example of the main functions of the data processing device 12 and the robot 414. As shown in Fig. 8, in the data processing device 12, a specific process is performed by the processor 28. A specific process program 56 is stored in the storage 32.

[1231] The specific processing program 56 is an example of a "program" according to the technology of the present disclosure. The processor 28 reads the specific processing program 56 from the storage 32 and executes the read specific processing program 56 on the RAM 30. The specific processing is realized by the processor 28 operating as a specific processing unit 290 in accordance with the specific processing program 56 executed on the RAM 30.

[1232] The storage 32 stores a data generation model 58 and an emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.

[1233] In the robot 414, the processor 46 performs the reception output process. A reception output program 60 is stored in the storage 50. The processor 46 reads the reception output program 60 from the storage 50 and executes the read reception output program 60 on the RAM 48. The reception output process is realized by the processor 46 operating as the control unit 46A in accordance with the reception output program 60 executed on the RAM 48.

[1234] Next, a description will be given of the specific processing performed by the specific processing unit 290 of the data processing device 12. In the following description, the data processing device 12 will be referred to as a "server" and the robot 414 will be referred to as a "terminal."

[1235] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[1236] System configuration

[1237] The system mainly consists of the following components:

[1238] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[1239] 2. Transmission means: A communication interface that transmits input contents to the server.

[1240] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[1241] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[1242] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[1243] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[1244] Program processing explanation

[1245] User Input and Data Submission

[1246] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input items (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[1247] The terminal sends the user's input to the server. This sent data includes all the specified items and their priorities.

[1248] Data analysis and wireframe generation

[1249] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[1250] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[1251] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[1252] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[1253] Wireframe presentation and selection

[1254] The server transmits the generated wireframe patterns to the terminal.

[1255] The device displays these wireframe patterns to the user, who then sees a preview of each pattern.

[1256] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[1257] Specific examples

[1258] For example, to generate wireframes for a new user registration screen:

[1259] The user enters the following:

[1260] Required features: "Register" button, Cancel button

[1261] Input fields: Text field "User name", text field "Email address", text field "Password"

[1262] Display: "User Registration" heading, link to Terms of Use

[1263] Priority: Register button (high), Cancel button (low)

[1264] The device sends this data to a server, which generates multiple wireframe patterns, presents them to the user, and the user can select the most suitable pattern to quickly and efficiently create a wireframe.

[1265] This system reduces the amount of work required to create wireframes, improves the speed and efficiency of project progress, and also facilitates smoother communication with designers, improving the overall design quality.

[1266] The processing flow will be explained below.

[1267] Step 1:

[1268] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[1269] Step 2:

[1270] The user specifies the following inputs on the project creation screen:

[1271] Required functionality (e.g. "Register" button, Cancel button)

[1272] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[1273] Display content (e.g., "User Registration" heading, link to Terms of Use)

[1274] Priority (e.g., Register button (high), Cancel button (low))

[1275] Step 3:

[1276] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[1277] Step 4:

[1278] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[1279] Step 5:

[1280] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[1281] Step 6:

[1282] The server follows basic layout rules to properly arrange the necessary functions and input fields. At this stage, it also adjusts the placement of key elements in prominent positions according to priority.

[1283] Step 7:

[1284] The server generates multiple layout patterns (e.g. vertical layout, horizontal layout, grid layout), which provides multiple options to the user.

[1285] Step 8:

[1286] The server transmits the generated wireframe patterns to the terminal.

[1287] Step 9:

[1288] The device displays the received wireframe patterns to the user, with a preview of each pattern displayed as a thumbnail on the screen.

[1289] Step 10:

[1290] The user selects the wireframe pattern that they feel is best, and then tweaks and customizes the selected pattern as needed.

[1291] Step 11:

[1292] The device sends the user's final design to the server and requests that the project be saved, which officially saves the project.

[1293] This series of steps allows users to efficiently generate wireframes, progress projects quickly and effectively, and improve communication with designers, improving overall design quality.

[1294] Example 1

[1295] Next, a description will be given of Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the robot 414 will be referred to as a "terminal."

[1296] In modern user interface design, it is important to generate wireframes efficiently and quickly. However, traditional manual wireframe creation requires time and effort, which can hinder improvements in usability and design quality. Furthermore, there are limited means to automatically generate multiple wireframe patterns based on user requests and streamline the process of selecting the optimal pattern. Therefore, a wireframe generation system that takes usability into consideration is needed.

[1297] The specific processing by the specific processing unit 290 of the data processing device 12 in the first embodiment is realized by the following means.

[1298] In this invention, the server includes an interface means for the user to specify the functions, input fields, display content, and priority required for the information terminal, a communication means for transmitting the specified input information to the computer system, and an algorithm means for the computer system to analyze the received input information and generate multiple wireframe layouts. This makes it possible to quickly generate wireframes that take usability into consideration based on the user's requests and select the optimal one from the multiple patterns presented.

[1299] "Interface means" refers to the means by which a user specifies the functions, input fields, display contents, and priorities required for an information terminal.

[1300] "Communication means" refers to a means for transmitting designated input information to a computer system.

[1301] An "algorithmic means" is a means by which a computer system analyzes input information it receives and generates multiple wireframe layouts.

[1302] The "screen display means" is a means for displaying the generated wireframe layout to the user.

[1303] The "selection method" is a method by which the user selects the most suitable one from the displayed wireframe layouts.

[1304] A "computer system" is a computer system that analyzes input user information and generates wireframes.

[1305] A "wireframe layout" is a structural mockup of a design used in designing a user interface, showing the placement of functions, input fields, and display content.

[1306] The present invention relates to a system that automatically generates a plurality of wireframe patterns based on a user's designation of functions, input items, display contents, and priorities required for a screen.

[1307] System configuration

[1308] The system mainly consists of the following components:

[1309] 1. Interface means: A means by which a user specifies the functions, input fields, display content, and priorities required for an information terminal. Specifically, it uses a form or wizard-style interface that runs on a web browser.

[1310] 2. Communication method: A method for sending specified input information to a computer system. Specifically, data communication using an HTTP POST request corresponds to this.

[1311] 3. Algorithmic means: A computer system analyzes the input information it receives and generates multiple wireframe layouts using a generative AI model implemented in a programming language such as Python.

[1312] 4. Screen display method: This is the method for displaying the generated wireframe layout to the user. It is dynamically rendered on a web page using JavaScript and HTML.

[1313] 5. Selection tool: This is the tool that allows the user to select the best one from the displayed wireframe layouts. This interface also runs on a web browser.

[1314] Program processing explanation

[1315] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input items (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[1316] The device sends the user's input to the server, including all the specified items and their priorities. The data is packaged in JSON format and sent to the server using an HTTP POST request.

[1317] The server analyzes the received data and arranges the necessary functions and input fields in an appropriate screen layout. The analysis and generation means in the server processes the data based on the following algorithm:

[1318] 1. Data analysis: Analyzes the specified functions and items and applies basic layout rules.

[1319] 2. Priority-based placement: Arrangements are made to place high-priority items in prominent positions.

[1320] 3. Multiple pattern generation: Try vertical layout, horizontal layout, grid layout, etc. to generate multiple patterns.

[1321] The server sends the generated wireframe patterns to the terminal, which displays them to the user, allowing the user to see a preview of each pattern.

[1322] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends a save request to the server with the final design, officially saving the project.

[1323] Specific examples

[1324] For example, to generate a wireframe for a new user registration screen: the user enters the following:

[1325] Required features: "Register" button, Cancel button

[1326] Input fields: Text field "User name", text field "Email address", text field "Password"

[1327] Display: "User Registration" heading, link to Terms of Use

[1328] Priority: Register button (high), Cancel button (low)

[1329] This data is sent to a server, which generates multiple wireframe patterns and presents them to the user, who can then choose the best one and make fine adjustments.

[1330] Prompt Sentence Examples

[1331] "To create a new user registration screen, generate a wireframe that includes the following elements: 'Register' and 'Cancel' buttons, text fields for username, email address, and password, a 'Register' heading, and a link to the Terms of Use. The Register button has high priority, and the Cancel button has low priority."

[1332] The flow of the identification process in the first embodiment will be described with reference to FIG.

[1333] Step 1: User Input

[1334] A user logs into the system. After successful login, they select "New Project" and proceed to the project creation screen. Here, the user enters the following:

[1335] Required functionality (e.g., "Register" button)

[1336] Input field (e.g., text field "User name", text field "Email address")

[1337] Display content (e.g., "User Registration" heading)

[1338] Priority (e.g., the register button has high priority)

[1339] Input: Functions, input fields, display content, and priority are entered by the user into the form.

[1340] Output: The input data is temporarily stored in the device's memory.

[1341] Step 2: Send data

[1342] The device converts the information entered by the user into packets of data, organizes them by data field, packages the data in JSON format, and sends it to the server using an HTTP POST request.

[1343] Input: Data entered by the user into the form.

[1344] Output: JSON formatted data sent to the server as an HTTP POST request.

[1345] Step 3: Data analysis

[1346] The server deserializes the received data and converts it into an internal data structure. The server analyzes the data and prepares it to arrange the necessary functions and input fields in an appropriate layout.

[1347] Input: JSON formatted data.

[1348] Output: The parsed data is stored in the server's memory as an internal data structure.

[1349] Step 4: Wireframe generation

[1350] The server's analysis and generation process runs the algorithm to generate multiple wireframe patterns using a generative AI model, as follows:

[1351] 1. Apply layout rules based on data analysis results.

[1352] 2. Place each element in the appropriate position based on priority.

[1353] 3. Try different patterns such as vertical layout, horizontal layout, grid layout, etc. and generate variations of each.

[1354] Input: Parsed internal data structure.

[1355] Output: Multiple wireframe patterns are generated and prepared for sending to the terminal.

[1356] Step 5: Wireframe Presentation

[1357] The server generates multiple wireframe patterns and sends them to the device. The device deserializes the received data and displays it in the user interface. JavaScript is used to render multiple wireframe patterns as previews.

[1358] Input: Generated wireframe pattern (data in JSON format).

[1359] Output: Multiple wireframe patterns displayed on a web page.

[1360] Step 6: Wireframe Selection

[1361] The user selects the best wireframe pattern from the displayed ones, checks each pattern, clicks the "Select" button, and makes fine adjustments as needed.

[1362] Input: User interaction to select and fine-tune each wireframe pattern.

[1363] Output: The optimal wireframe pattern and its fine-tuning information are saved as final data on the device.

[1364] Step 7: Save Requests and Saving the Project

[1365] The device sends the selected wireframe pattern and fine-tuning information to the server. As a save request, the data is sent to the server again in JSON format using an HTTP POST request.

[1366] The server saves the received data and stores it in the database as the final design for the project. The server establishes a database connection and inserts the data into the appropriate tables.

[1367] Input: JSON formatted data of the final design.

[1368] Output: The final design of the project is saved in the database.

[1369] (Application example 1)

[1370] Next, a description will be given of Application Example 1. In the following description, the data processing device 12 will be referred to as a "server" and the robot 414 will be referred to as a "terminal."

[1371] With conventional wireframe generation systems, generating wireframes based on the functions, input fields, display content, and priorities specified by the user requires time and effort, making it difficult to quickly design optimal web pages or application screens.In addition, it is often difficult for users to determine whether the pages they have designed themselves are optimal, which often results in a lot of effort being required to create the final design.

[1372] Furthermore, on online shopping sites, the design of product detail pages has a significant impact on purchasing motivation, so page optimization is important, but there was a lack of efficient systems that could meet such needs.

[1373] The specific processing by the specific processing unit 290 of the data processing device 12 in the application example 1 is realized by the following means.

[1374] In this invention, the server includes input means for a user to specify the functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the received input content and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, and means for performing data analysis and layout generation using a generative AI model. This enables users to efficiently generate optimal wireframes and quickly design product detail pages, category list pages, etc., particularly for online shopping sites.

[1375] "User" refers to an individual or organization that specifies the functions, input fields, display content, and priorities required for the screen and instructs the generation of the wireframe.

[1376] "Input means" refers to the interface that allows the user to specify screen functions, input items, display content, and priority.

[1377] "Transmission means" refers to a communication interface for transmitting input contents designated by the user to the server.

[1378] "Analysis and generation means" refers to the algorithms and programs that analyze the input content received by the server and generate multiple wireframe patterns.

[1379] "Display means" refers to an interface for presenting the generated multiple wireframe patterns to the user.

[1380] "Selection means" refers to an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[1381] "Generative AI Model" refers to an artificial intelligence model used to perform data analysis and layout generation.

[1382] A "wireframe pattern" refers to a drawing or template that shows the basic design of a screen layout.

[1383] "Online Shopping Site" means a website where products are sold and purchased online.

[1384] "Priority" refers to the importance of each function, input field, and display content specified by the user.

[1385] "Layout" refers to the arrangement and structure of functions, input fields, and display content on the screen.

[1386] This invention relates to a system that automatically generates multiple wireframe patterns based on user-specified functions, input items, display content, and priority levels required for a screen. The following describes an embodiment of this invention.

[1387] System configuration

[1388] The system mainly consists of the following components:

[1389] 1. Input method: An interface that allows users to input screen functions, input items, display content, and priorities on a smartphone. For example, using a smartphone's touch screen.

[1390] 2. Transmission means: A communication interface that allows the smartphone to transmit the specified input content to the server. For example, it uses the smartphone's internet connection.

[1391] 3. Analysis and generation method: An algorithm that analyzes the input received by the server and generates multiple wireframe patterns. For generation, a generative AI model such as TensorFlow is used.

[1392] 4. Display: An interface for displaying the generated wireframe pattern on a smartphone. For example, a user interface using React Native.

[1393] 5. Selection method: An interface that allows users to select the most suitable one from the displayed wireframe patterns. This also uses touch operation on a smartphone.

[1394] Hardware and software examples

[1395] Hardware: Smartphone (iOS or Android)

[1396] Software: React Native (front-end application framework), Node.js + Express (back-end server), MongoDB (database), TensorFlow (generative AI model)

[1397] Program processing flow

[1398] 1. User Input

[1399] The user launches the app on their smartphone and enters the new page creation mode, where they specify the required functions, input fields, display content, and priority.

[1400] 2. Data Transmission

[1401] The smartphone sends the entered data to the backend server.

[1402] 3. Data analysis and wireframe generation

[1403] The server analyzes the received data using a TensorFlow model and generates a layout. Each element is placed based on priority, and multiple wireframe patterns are automatically generated.

[1404] 4. Wireframe Presentation and Selection

[1405] The server generates multiple wireframes and sends them to the smartphone, where the app displays them to the user, who then selects the best layout, and the final layout is saved on the server.

[1406] Specific examples

[1407] For example, to create a detail page for a new product, the user enters the following:

[1408] Required features: Buy button, Add to cart button, product image gallery, review section

[1409] Input fields: Text field "Product name", text field "Price", text field "Description"

[1410] Display content: "Product Details" heading, list of related products

[1411] Priority: Product image gallery (high), review section (medium), related product listings (low)

[1412] This data is sent to a server, which generates multiple wireframe patterns, which are then presented to the user, who can select the most suitable pattern to quickly and efficiently create a product detail page.

[1413] Prompt Sentence Examples

[1414] Here are some example prompts to input to the generative AI model:

[1415] Generate a wireframe for your new product detail page based on the following inputs:

[1416] Required features: Buy button, Add to cart button, product image gallery, review section

[1417] Input fields: Text field "Product name", text field "Price", text field "Description"

[1418] Display content: "Product Details" heading, list of related products

[1419] Priority: Product image gallery (high), review section (medium), related product listings (low)

[1420] Generate multiple wireframe patterns (e.g. vertical layout, grid layout).

[1421] This invention enables users to efficiently generate optimal wireframes and quickly design product detail pages and category list pages, particularly for online shopping sites.

[1422] The flow of the specific processing in the application example 1 will be described with reference to FIG.

[1423] Step 1:

[1424] The user starts the smartphone application and enters new page creation mode, where they specify the required functions, input fields, display content, and priority using touch input.

[1425] Input: User-specified functions (e.g., buy button, add to cart button, etc.), input fields (e.g., product name, price, description, etc.), display content (e.g., headline, related products, etc.), priority (e.g., high, medium, low).

[1426] Output: The specified data is saved in the smartphone.

[1427] Step 2:

[1428] The device sends the inputs you provide to the server over your internet connection.

[1429] Input: Data provided by the user in step 1.

[1430] Output: The input data arrives at the server.

[1431] Step 3:

[1432] The server analyzes the received data, including the specified functions, input fields, display content, and priority. This data is used for pre-processing to generate wireframes.

[1433] Input: Data sent from the terminal.

[1434] Output: Analysis results and data organization. Specifically, this includes an assessment of the importance and priority of each input item and function.

[1435] Step 4:

[1436] The server uses a generative AI model (e.g., TensorFlow) to generate multiple wireframe patterns based on the analysis results. The generative AI model then proposes the optimal layout based on the acquired data.

[1437] Input: Parsed data, prompt sentence for the generative AI model.

[1438] Output: Multiple wireframe patterns (e.g. vertical layout, grid layout).

[1439] Step 5:

[1440] The server transmits the generated wireframe patterns to the terminal.

[1441] Input: The generated wireframe pattern.

[1442] Output: The wireframe pattern arrives at the terminal.

[1443] Step 6:

[1444] The device displays the received wireframe patterns to the user, who then reviews the presented wireframe patterns and selects the most suitable one.

[1445] Input: Wireframe pattern sent from the server.

[1446] Output: The wireframe pattern presented to the user.

[1447] Step 7:

[1448] The user selects the most suitable wireframe pattern, makes fine adjustments as necessary, and decides on the final design. The user's selection and fine-tuning results are sent from the device to the server and stored on the server.

[1449] Input: User selected final wireframe pattern and refined design data.

[1450] Output: The final design is saved to the server.

[1451] By following the above steps, users can efficiently generate optimal designs, and can quickly design product detail pages and category list pages, especially for online shopping sites.

[1452] Furthermore, an emotion engine that estimates the user's emotion may be further combined. That is, the identification processing unit 290 may estimate the user's emotion using the emotion identification model 59, and perform identification processing using the user's emotion.

[1453] The present invention relates to a system in which a user specifies the functions, input items, display content, and priority required for the screen, and based on this, multiple wireframe patterns are automatically generated, and furthermore, an emotion engine that recognizes the user's emotions is combined.

[1454] System configuration

[1455] The system mainly consists of the following components:

[1456] 1. Input means: An interface that allows the user to specify screen functions, input items, etc.

[1457] 2. Transmission means: A communication interface that transmits input contents to the server.

[1458] 3. Server: Analyzes the received input and generates multiple wireframe patterns.

[1459] 4. Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server.

[1460] 5. Display means: An interface that presents the generated multiple wireframe patterns to the user.

[1461] 6. Selection tool: An interface that allows the user to select the best one from the presented wireframe patterns.

[1462] 7. Emotion Engine: An engine that recognizes user emotions and presents or adjusts wireframes based on those emotions.

[1463] Program processing explanation

[1464] User Input and Data Submission

[1465] A user logs in to the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input items (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority.

[1466] The device collects the user's input and sends it to the server. The data sent includes all the specified items and their priorities.

[1467] Data analysis and wireframe generation

[1468] The server analyzes the received data and checks the required functions and input fields. An initial analysis is performed for this purpose. Next, the analysis and generation means in the server initializes the algorithm and arranges the required functions and input fields appropriately as a screen layout. Based on priority, the main elements are placed in prominent positions and different layout patterns (vertical layout, horizontal layout, grid layout) are generated.

[1469] Coordination using emotion engine

[1470] The emotion engine recognizes the user's emotions in real time and prioritizes the most appropriate wireframe patterns based on their emotional state. The emotion engine analyzes the user's emotional data and adjusts the wireframe based on that data. To achieve this, the emotion engine also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[1471] Wireframe presentation and selection

[1472] The server transmits the generated wireframe patterns to the terminal.

[1473] The device displays the received wireframe patterns to the user, who can then preview each pattern. The patterns are prioritized by the emotion engine, allowing the user to quickly find the pattern that best suits their emotional state.

[1474] The user selects the most suitable wireframe pattern, tweaks and customizes it as needed, and then the device sends the final design to the server and requests that the project be saved.

[1475] Specific examples

[1476] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[1477] Users specify the required functions, input fields, display content, and priority. The emotion engine recognizes the user's emotions when entering information and adjusts the placement of registration buttons and input fields to optimize visibility and operability. For example, if the user is relaxed, the layout will be arranged with an emphasis on consistency and unity. On the other hand, if the user is stressed, important functions and fields will be emphasized and a simpler layout will be suggested.

[1478] The device sends this data to the server, which generates multiple wireframe patterns. The generated patterns are presented to the user, who can then select the most suitable pattern with the help of an emotion engine, allowing them to quickly and efficiently create wireframes.

[1479] This system reduces the man-hours required for creating wireframes, makes project progress faster and more efficient, and facilitates smoother communication with designers. Furthermore, by taking user emotions into consideration, it is possible to propose designs that will achieve high user satisfaction.

[1480] The processing flow will be explained below.

[1481] Step 1:

[1482] A user logs into the system and selects "New Project" from the dashboard, which brings up the project creation screen.

[1483] Step 2:

[1484] The user specifies the following inputs on the project creation screen:

[1485] Required functionality (e.g. "Register" button, Cancel button)

[1486] Input field (e.g., text field "Username", text field "Email address", text field "Password")

[1487] Display content (e.g., "User Registration" heading, link to Terms of Use)

[1488] Priority (e.g., Register button (high), Cancel button (low))

[1489] Step 3:

[1490] The terminal collects the user's input data and sends it to the server, including all the specified items and their priorities.

[1491] Step 4:

[1492] The server analyzes the received data and checks the required functions and input items. An initial analysis is performed for this purpose.

[1493] Step 5:

[1494] The server initiates the algorithms used to generate wireframes based on the parsed data, including template-based and heuristic methods.

[1495] Step 6:

[1496] The server follows basic layout rules to properly position the necessary functions and input fields, and also adjusts the placement of key elements in prominent positions according to priority.

[1497] Step 7:

[1498] The emotion engine recognizes the user's emotions in real time and adjusts the layout based on their emotional state. For example, if the user is stressed, important features will be placed more prominently.

[1499] Step 8:

[1500] The emotion engine accumulates past emotion data and uses it to improve future suggestions. The learning function understands the user's emotional patterns and suggests more appropriate wireframes.

[1501] Step 9:

[1502] The server generates multiple layout patterns (e.g., vertical layout, horizontal layout, grid layout), including patterns adjusted by the emotion engine.

[1503] Step 10:

[1504] The server transmits the generated wireframe patterns to the terminal.

[1505] Step 11:

[1506] The device displays the received wireframe patterns to the user, with a preview screen showing thumbnails of each pattern.

[1507] Step 12:

[1508] Users can select the wireframe pattern they feel is best. This makes it easy to select, as it includes patterns prioritized by the emotion engine.

[1509] Step 13:

[1510] Make any desired tweaks to the wireframe pattern you have selected, such as adjusting the position of buttons or the size of input fields.

[1511] Step 14:

[1512] The device sends the final design to the server and makes a save request, which the server receives and officially saves the project.

[1513] This process allows users to efficiently generate wireframes, enabling projects to proceed quickly and effectively. The emotional engine also suggests optimal wireframes based on the user's emotional state, increasing satisfaction.

[1514] Example 2

[1515] Next, a description will be given of Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the robot 414 will be referred to as a "terminal."

[1516] Conventional wireframe generation systems lack the ability to consider user emotions when generating screen layouts based on user input. This makes it difficult to quickly select the optimal layout when users feel stressed or anxious. Furthermore, conventional systems do not adequately automate appropriate layouts based on usability and priorities. This results in a poor user experience and impacts satisfaction with the final design.

[1517] The specific processing by the specific processing unit 290 of the data processing device 12 in the second embodiment is realized by the following means.

[1518] In this invention, the server includes input means for a user to specify functions, input items, display content, and priorities required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the most appropriate one from the presented wireframe patterns, and emotion recognition means for recognizing the emotional state of the user and adjusting the wireframe based on that emotion. This makes it possible to automatically generate wireframes based on priorities and present an appropriate layout based on them, while taking the user's emotions into consideration.

[1519] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[1520] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[1521] The "analysis and generation means" refers to an algorithm or processing device that analyzes the input content received by the server and generates multiple wireframe patterns.

[1522] The "display means" is an interface for presenting the generated wireframe pattern to the user.

[1523] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[1524] An "emotion recognizer" is a mechanism for recognizing the user's emotional state and adjusting the wireframe based on that emotion.

[1525] "Priority" is an element that indicates the importance of each function or input item designated by the user.

[1526] "Wireframe" refers to a basic layout plan for screen design.

[1527] "Layout patterns" refer to multiple ways of structuring and arranging wireframes.

[1528] The present invention relates to a system that automatically generates multiple wireframe patterns based on a user's specification of the functions, input items, display content, and priority required for the screen, and further combines this with an emotion engine that recognizes the user's emotions. Specific methods for carrying out the invention are described below.

[1529] 1. System Configuration

[1530] The system mainly consists of the following components:

[1531] Input means: The interface through which the user specifies screen functions, input items, etc. This includes keyboards, mice, and touchscreen devices.

[1532] Transmission means: A communication interface that transmits input contents to the server. This can be an internet connection or a local network.

[1533] Server: Analyzes the received input and generates multiple wireframe patterns. The server requires a high-performance CPU and a large amount of memory.

[1534] Analysis and generation method: An algorithm that analyzes the received data and generates wireframes within the server. Specifically, machine learning models and rule-based algorithms are used.

[1535] Display method: An interface that displays the generated multiple wireframe patterns to the user. This can be a browser or a dedicated application.

[1536] Selection tool: An interface that allows the user to select the best wireframe pattern from the presented ones.

[1537] Emotion recognition engine: An engine that recognizes the user's emotions in real time and presents and adjusts wireframes based on those emotions. It can use facial recognition and voice analysis technologies.

[1538] 2. Program processing explanation

[1539] User Input and Data Submission

[1540] A user logs in to the system and creates a "new project." On the project creation screen, the user enters the functions required for the screen (e.g., a "Register" button), input items (e.g., user name, email address), display content (e.g., a "User Registration" heading), and priority. The device collects the user's input and sends it to the server via a communication interface. The transmitted data includes all specified items, their priorities, and data indicating the user's emotional state.

[1541] Data analysis and wireframe generation

[1542] The server analyzes the received data and checks the required functions and input fields. In the initial stage of data analysis, the consistency of the input data is checked. After that, the algorithm that serves as the analysis and generation means within the server is initialized, and the main elements are automatically placed in prominent positions based on priority. Different layout patterns (vertical layout, horizontal layout, grid layout) are also generated simultaneously.

[1543] Coordination using emotion engine

[1544] The emotion recognition means recognizes the user's emotions in real time and selects and prioritizes appropriate wireframe patterns based on that emotional state. The emotion engine analyzes the user's facial recognition data and voice data to detect their emotional state. It also has a learning function that accumulates past emotional data and uses this data to improve future wireframe suggestions.

[1545] 3. Specific Examples

[1546] For example, to generate a wireframe for a new user registration screen, the following steps are performed:

[1547] The user specifies the required functions (such as a "Register" button), input fields (such as "User name" and "Email address"), display content (such as a "User Registration" heading), and priority. The emotion recognition means recognizes the user's emotions when entering information and adjusts the placement of the registration button and input fields. For example, if the user is relaxed, the layout is arranged with an emphasis on consistency and unity. On the other hand, if the user is feeling stressed, important functions and fields are emphasized and a simple layout is suggested.

[1548] The device sends this data to a server, which generates multiple wireframe patterns. The patterns are presented to the user, who, with the help of emotion recognition tools, selects the best one. After selection, the final design is sent to the server and a request is made to save the project.

[1549] Prompt Sentence Examples

[1550] In practice, when using a generative AI model, the prompt might look something like this:

[1551] "Generate a wireframe for a new user registration screen. The required functions are a 'Register' button, the input fields are 'User name' and 'Email address', the display content is the 'User Registration' heading, and all are set to high priority."

[1552] The flow of the identification process in the second embodiment will be described with reference to FIG.

[1553] Step 1:

[1554] A user logs into the system and creates a "New Project." On the project creation screen, the user enters the functions required for the screen (e.g., "Register" button), input fields (e.g., user name, email address), display content (e.g., "User Registration" heading), and priority. The user-specified functions, input fields, display content, and priority are collected as input data. The terminal collects this data and prepares it for transmission via the communication interface. Specifically, the user enters information into the form and clicks the save button, which saves the data to the terminal.

[1555] Step 2:

[1556] The device sends the user's input data to the server by pressing the send button. The sent data includes all specified items, their priorities, and the user's emotional state (data collected by the camera and microphone). An encrypted communication channel is used for transmission. Specifically, when the send button is clicked, the data is sent to the server in the form of a POST request.

[1557] Step 3:

[1558] The server analyzes the data it receives. It checks the data for consistency (checking required fields and removing invalid data formats) and sends the received data to the analysis and generation means. During analysis, the data is also preprocessed so that each function and input item is properly understood. The input is the data sent from the terminal, and the output is analyzed data. Specifically, the data is saved in a database and passed to the analysis algorithm.

[1559] Step 4:

[1560] The analysis and generation means generates multiple wireframe patterns based on the analyzed data. An algorithm is used for generation, placing important items in prominent positions based on the priorities specified by the user. Specifically, different patterns such as vertical layout, horizontal layout, and grid layout are generated. The input is the analyzed data, and the output is multiple wireframe patterns. Specifically, the selected algorithm performs calculations and generates the pattern generation results.

[1561] Step 5:

[1562] The emotion recognition means analyzes the user's emotions in real time and adjusts the generated wireframe pattern based on that information. Emotional data from the camera and microphone is input, which is analyzed to output the emotional state. The layout and design of the generated wireframe are fine-tuned based on this emotional state. Specific operations include a process of analyzing emotions from real-time video and audio data and reflecting them in the wireframe.

[1563] Step 6:

[1564] The server sends the generated and adjusted multiple wireframe patterns to the terminal. The adjusted wireframe patterns are sent to the terminal as output data. Specifically, the generated patterns are packaged in JSON or XML format and sent to the terminal as an HTTP response.

[1565] Step 7:

[1566] The terminal displays the received wireframe patterns to the user. The user can preview each pattern and select and fine-tune the most suitable one. The input is the adjusted wireframe pattern, and the output is the user's selected and fine-tuned data. Specific operations involve the user selecting a pattern through the interface, dragging and dropping, and adjusting input fields.

[1567] Step 8:

[1568] The user selects the optimal wireframe pattern, and the device sends the final design to the server. A request to save the project is made. The input is the design data selected and fine-tuned by the user, and the output is the final design data saved on the server. The specific operation is that the user clicks the save button, and the data is sent to the server again.

[1569] Step 9:

[1570] The server saves the final design and updates the project data. The saved data is recorded in a database and managed as a project. The input is the final design data, and the output is the saved project data. Specifically, the server executes database transactions and permanently saves the data.

[1571] (Application example 2)

[1572] Next, a description will be given of Application Example 2. In the following description, the data processing device 12 will be referred to as a "server" and the robot 414 will be referred to as a "terminal."

[1573] In conventional wireframe generation systems, users specify the necessary functions and input fields, and wireframes are generated based on those, but this does not take into account the user's emotional state, which results in a problem of insufficient usability improvement. Additionally, it is difficult to provide optimal wireframes in real time that correspond to the user's emotions.

[1574] The specific processing by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means. In this invention, the server includes input means for the user to specify functions, input items, display content, and priority required for the screen, transmission means for transmitting the specified input content to the server, analysis and generation means for analyzing the input content received by the server and generating multiple wireframe patterns, display means for presenting the generated wireframe patterns to the user, selection means for the user to select the optimal one from the presented wireframe patterns, emotion recognition means for recognizing the user's emotion, and means for adjusting the wireframe based on emotion data acquired from the emotion recognition means. This makes it possible to provide the optimal wireframe according to the user's emotional state in real time, thereby improving usability.

[1575] "Input means" refers to an interface that allows the user to specify the functions, input items, display content, and priority required on the screen.

[1576] The "transmission means" is a communication interface that transmits the specified input contents to the server.

[1577] "Analysis and generation means" means a means including an algorithm for analyzing input content received by the server and generating a plurality of wireframe patterns.

[1578] The "display means" is an interface that presents the generated wireframe pattern to the user.

[1579] The "selection means" is an interface that allows the user to select the most suitable one from the presented wireframe patterns.

[1580] "Emotion recognition means" is a technology that recognizes the user's emotions and adjusts the wireframe based on those emotions.

[1581] The "adjustment means" is a means for adjusting the wireframe based on the emotion data acquired from the emotion recognition means.

[1582] This invention is a system that automatically generates multiple wireframe patterns based on the screen functions, input items, display content, and priority specified by the user, and further adjusts the optimal wireframe through emotion recognition. This system is particularly effective for generating product detail pages on online shopping sites.

[1583] An embodiment of the system is as follows.

[1584] Input and Data Transmission

[1585] Users use their smartphones to specify input items on the product detail page (such as the "Add to Cart" button, "Product Image," "Price Tag," "Product Description," and "User Reviews") and their priorities. The smartphone's touch interface is used as the input method.

[1586] The terminal sends the input content specified by the user to the server, using a request via the HTTP protocol as the communication interface.

[1587] Data analysis and wireframe generation

[1588] The server analyzes the received data and identifies the required functions and input fields. This analysis is performed using an initial analysis algorithm. Next, the analysis and generation function on the server generates multiple wireframe patterns (vertical layout, horizontal layout, grid layout) based on the specified priority.

[1589] Emotion Recognition and Regulation

[1590] The emotion recognition means collects user emotional data in real time via the smartphone camera, which is then analyzed by the dedicated EmotionEngine library.

[1591] Based on the emotional data obtained from the emotion recognition system, the server adjusts the wireframe: if the user is relaxed, it keeps the layout consistent; if the user is stressed, it suggests a simple layout that highlights important information.

[1592] Wireframe presentation and selection

[1593] The server sends the generated wireframe patterns to the smartphone, and the user can preview each pattern using the display means.

[1594] The user selects the most suitable wireframe pattern from the ones presented by the emotion recognition system using a touch interface.

[1595] Examples and prompts

[1596] Consider a specific example where a product detail page is generated when a new product "XYZ Smartphone" is released. In this case, the user inputs the following prompt sentence:

[1597] "Generate a detail page for a new product, "XYZ Smartphone." Required features include an "Add to Cart" button, "Product Image," and "Price Tag." Display content includes a "Product Description" and "User Reviews." Use emotion recognition to suggest the optimal layout for the user's state."

[1598] This allows users to quickly and efficiently select the optimal wireframe for their emotional state. The required hardware is a smartphone and its camera, and the software requires the EmotionEngine library and HTTP communication library.

[1599] The flow of the specific processing in the application example 2 will be described with reference to FIG.

[1600] Step 1:

[1601] A user logs into the system and creates a "New Project." Here, the user inputs the features required for the product detail page ("Add to Cart" button, "Product Image," "Price Tag"), display content ("Product Description," "User Reviews"), and priority. The input data is collected through the smartphone's touch interface. The input includes data on each feature specified by the user and its priority. The device collects this input data.

[1602] Step 2:

[1603] The terminal sends the collected input data to the server. The communication interface uses the HTTP protocol, and the transmitted data is in JSON format. During this process, the input data is properly encoded and sent to the server. The server receives the received data and analyzes its contents.

[1604] Step 3:

[1605] The server analyzes the received data and checks the required functions and display content. It then executes an initial analysis algorithm and processes the data. As a result of the analysis, the specified items and their priorities are confirmed. This generates a list of required functions and display items.

[1606] Step 4:

[1607] The analysis and generation means in the server initializes the algorithm and generates multiple wireframe patterns. The generation algorithm creates different layout patterns such as vertical layout, horizontal layout, and grid layout. Each layout is based on the priority specified by the user, with the most important items placed in prominent positions. The multiple generated wireframe patterns are created as output.

[1608] Step 5:

[1609] The device's camera is used to collect user emotion data, which is then analyzed in real time by the EmotionEngine library to identify the user's emotional state (e.g., relaxed, stressed, etc.). The input is video data from the camera, and the output is the analyzed emotion data.

[1610] Step 6:

[1611] The server adjusts the generated wireframe pattern based on the emotional data. The emotion recognition means prioritizes a consistent layout when the user is relaxed, and a concise layout that emphasizes important information when the user is stressed. This allows the server to select the optimal wireframe according to the user's emotional state.

[1612] Step 7:

[1613] The server transmits the adjusted wireframe patterns to the terminal, and the transmitted data includes the adjusted wireframe patterns. The wireframe patterns are displayed to the user via the display means.

[1614] Step 8:

[1615] The user previews the presented wireframe patterns and selects the best one using the touch interface. The user's selection is recorded by the device, and the selected wireframe is sent to the server as the final design. The final transmitted data includes the selected wireframe.

[1616] Step 9:

[1617] The server stores the final design selected by the user, confirming project completion, and serves as a reference for future project creation.

[1618] The specific processing unit 290 transmits the result of the specific processing to the robot 414. In the robot 414, the control unit 46A causes the speaker 240 and the control target 443 to output the result of the specific processing. The microphone 238 acquires voice indicating a user input regarding the result of the specific processing. The control unit 46A transmits voice data indicating the user input acquired by the microphone 238 to the data processing device 12. In the data processing device 12, the specific processing unit 290 acquires the voice data.

[1619] The data generation model 58 is a so-called generative AI (Artificial Intelligence). An example of the data generation model 58 is ChatGPT (Internet Search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search <url: https: gemini.google.com ?hl="ja">) and other generation AIs. The data generation model 58 is obtained by performing deep learning on a neural network. A prompt including an instruction is input to the data generation model 58, and inference data such as voice data indicating voice, text data indicating text, and image data indicating an image is also input. The data generation model 58 performs inference on the input inference data in accordance with the instruction indicated by the prompt, and outputs the inference result in a data format such as voice data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.

[1620] In the above embodiment, an example was given in which the specific processing is performed by the data processing device 12, but the technology of the present disclosure is not limited to this, and the specific processing may be performed by the robot 414.

[1621] The emotion identification model 59 as an emotion engine may determine the user's emotion according to a specific mapping. Specifically, the emotion identification model 59 may determine the user's emotion according to an emotion map (see FIG. 9), which is a specific mapping. Similarly, the emotion identification model 59 may determine the robot's emotion, and the identification processing unit 290 may perform identification processing using the robot's emotion.

[1622] FIG. 9 is a diagram illustrating an emotion map 400 on which multiple emotions are mapped. In the emotion map 400, emotions are arranged in concentric circles radiating from the center. Emotions closer to the center of the concentric circles are more primitive. Emotions representing states and actions arising from a state of mind are arranged on the outer edges of the concentric circles. The concept of emotion includes both affect and mental states. Emotions generally generated from reactions occurring in the brain are arranged on the left side of the concentric circles. Emotions generally induced by situational judgment are arranged on the right side of the concentric circles. Emotions generally generated from reactions occurring in the brain and induced by situational judgment are arranged on the upper and lower sides of the concentric circles. Furthermore, the emotion of "pleasure" is arranged on the upper side of the concentric circles, and the emotion of "discomfort" is arranged on the lower side. In this way, in the emotion map 400, multiple emotions are mapped based on the structure by which emotions are generated, and emotions that tend to occur simultaneously are mapped close to each other.

[1623] These emotions are distributed in the 3 o'clock direction on emotion map 400, and typically fluctuate between relief and anxiety. In the right half of emotion map 400, situational awareness dominates over internal sensations, resulting in a sense of calm.

[1624] The inside of emotion map 400 represents what is going on in the mind, and the outside of emotion map 400 represents behavior, so the further you go outside emotion map 400, the more visible the emotions become (the more they are expressed in behavior).

[1625] Human emotions are based on various balances, such as posture and blood sugar levels. When these balances deviate from the ideal, a state of discomfort is indicated, and when they approach the ideal, a state of pleasure is indicated. Emotions can also be created for robots, automobiles, and motorcycles, based on various balances, such as posture and remaining battery life. When these balances deviate from the ideal, a state of discomfort is indicated, and when they approach the ideal, a state of pleasure is indicated. An emotion map can be generated, for example, based on Dr. Mitsuyoshi's emotion map (Research on Voice Emotion Recognition and Emotional Brain Physiological Signal Analysis Systems, Tokushima University, Doctoral Dissertation: https: / / ci.nii.ac.jp / naid / 500000375379). The left half of the emotion map lists emotions belonging to the "reaction" domain, where sensation is dominant. The right half of the emotion map lists emotions belonging to the "situation" domain, where situational awareness is dominant.

[1626] The emotion map defines two emotions that promote learning. One is a negative emotion on the situation side, around the middle of "repentance" or "reflection." In other words, this occurs when the robot experiences negative emotions such as "I never want to feel this way again" or "I don't want to be scolded again." The other is a positive emotion on the response side, around "desire." In other words, this occurs when the robot experiences positive feelings such as "I want more" or "I want to know more."

[1627] The emotion identification model 59 inputs user input into a pre-trained neural network, obtains emotion values ​​indicating each emotion shown in the emotion map 400, and determines the user's emotion. This neural network is pre-trained based on multiple pieces of training data that are combinations of user input and emotion values ​​indicating each emotion shown in the emotion map 400. Furthermore, this neural network is trained so that emotions that are located close to each other have similar values, as in the emotion map 900 shown in FIG. 10. FIG. 10 shows an example in which multiple emotions, "relieved," "calm," and "reassuring," have similar emotion values.

[1628] The system according to the present disclosure has been described above mainly with respect to the functions of the data processing device 12, but the system according to the present disclosure is not necessarily implemented on a server. The system according to the present disclosure may be implemented as a general information processing system. The present disclosure may be implemented, for example, as a software program running on a personal computer or an application running on a smartphone, etc. The method according to the present disclosure may be provided to users in the form of SaaS (Software as a Service).

[1629] In the above embodiment, an example was given in which the specific processing is performed by one computer 22, but the technology of the present disclosure is not limited to this, and the specific processing may be distributed and performed by a plurality of computers including the computer 22. For example, the data generation model 58 may be provided in an external device of the data processing device 12, and data may be generated in the external device in accordance with input data.

[1630] In the above embodiment, an example in which the specific processing program 56 is stored in the storage 32 has been described, but the technology of the present disclosure is not limited to this. For example, the specific processing program 56 may be stored in a portable, computer-readable, non-transitory storage medium such as a USB (Universal Serial Bus) memory. The specific processing program 56 stored in the non-transitory storage medium is installed in the computer 22 of the data processing device 12. The processor 28 executes the specific processing in accordance with the specific processing program 56.

[1631] Alternatively, the specific processing program 56 may be stored in a storage device such as a server connected to the data processing device 12 via the network 54, and the specific processing program 56 may be downloaded and installed on the computer 22 in response to a request from the data processing device 12.

[1632] It is not necessary to store all of the specific processing program 56 in a storage device such as a server connected to the data processing device 12 via the network 54, or to store all of the specific processing program 56 in the storage 32; only a portion of the specific processing program 56 may be stored.

[1633] The hardware resource for executing a specific process can be any of the following processors: An example of a processor is a CPU, which is a general-purpose processor that functions as a hardware resource for executing a specific process by executing software, i.e., a program. Another example of a processor is a dedicated electrical circuit, such as an FPGA (Field-Programmable Gate Array), a PLD (Programmable Logic Device), or an ASIC (Application Specific Integrated Circuit), which is a processor with a circuit configuration designed specifically for executing a specific process. Each processor has built-in or connected memory, and each processor uses the memory to execute the specific process.

[1634] The hardware resource that executes the specific processing may be configured with one of these various processors, or may be configured with a combination of two or more processors of the same or different types (for example, a combination of multiple FPGAs, or a combination of a CPU and an FPGA). Also, the hardware resource that executes the specific processing may be a single processor.

[1635] As an example of a system configured with a single processor, first, one processor is configured by combining one or more CPUs and software, and this processor functions as a hardware resource that executes a specific process. Second, there is a system that uses a processor that realizes the functions of an entire system including multiple hardware resources that execute a specific process on a single IC chip, as typified by SoC (System-on-a-chip). In this way, a specific process is realized using one or more of the above-mentioned various processors as hardware resources.

[1636] Furthermore, the hardware structure of these various processors can be, more specifically, an electric circuit that combines circuit elements such as semiconductor devices. The specific processing described above is merely an example. Therefore, it goes without saying that unnecessary steps may be deleted, new steps may be added, or the processing order may be rearranged, without departing from the spirit of the invention.

[1637] The above-described description and illustrations are a detailed explanation of the parts related to the technology of the present disclosure and are merely an example of the technology of the present disclosure. For example, the above description of the configuration, functions, actions, and effects is an explanation of an example of the configuration, functions, actions, and effects of the parts related to the technology of the present disclosure. Therefore, it goes without saying that unnecessary parts may be deleted, new elements may be added, or replacements may be made to the above-described description and illustrations within the scope of the gist of the technology of the present disclosure. Furthermore, to avoid confusion and facilitate understanding of the parts related to the technology of the present disclosure, the above-described description and illustrations omit explanations of common technical knowledge that do not require particular explanation to enable the implementation of the technology of the present disclosure.

[1638] All publications, patent applications, and technical standards mentioned in this specification are herein incorporated by reference to the same extent as if each individual publication, patent application, or technical standard was specifically and individually indicated to be incorporated by reference.

[1639] The following is further disclosed regarding the above embodiment.

[1640] (Claim 1)

[1641] An input means for the user to specify the functions, input items, display content, and priority required for the screen;

[1642] a transmission means for transmitting the specified input content to a server;

[1643] an analysis and generation means for analyzing input content received by the server and generating a plurality of wireframe patterns;

[1644] a display means for presenting the generated wireframe pattern to a user;

[1645] A selection means for allowing a user to select the best wireframe pattern from the presented wireframe patterns;

[1646] A system including:

[1647] (Claim 2)

[1648] 2. The system according to claim 1, wherein the server arranges the plurality of layout patterns in consideration of usability when generating the plurality of layout patterns.

[1649] (Claim 3)

[1650] 2. The system according to claim 1, wherein the server places items of high importance in prominent positions based on the priority specified by the user.

[1651] "Example 1"

[1652] (Claim 1)

[1653] an interface means for a user to specify functions, input fields, display contents, and priorities required for the information terminal;

[1654] a communication means for transmitting the specified input information to a computer system;

[1655] algorithmic means for analyzing input information received by the computer system and generating a plurality of wireframe layouts;

[1656] a screen display means for displaying the generated wireframe layout to a user;

[1657] A selection method for users to select the best wireframe layout from the displayed layouts;

[1658] A system including:

[1659] (Claim 2)

[1660] 2. The system according to claim 1, wherein the computer system generates a plurality of layout patterns by taking usability into consideration.

[1661] (Claim 3)

[1662] 2. The system according to claim 1, wherein the computer system places highly important information in a prominent position based on a priority designated by the user.

[1663] "Application Example 1"

[1664] (Claim 1)

[1665] An input means for the user to specify the functions, input items, display content, and priority required for the screen;

[1666] a transmission means for transmitting the specified input content to a server;

[1667] an analysis and generation means for analyzing input content received by the server and generating a plurality of wireframe patterns;

[1668] a display means for presenting the generated wireframe pattern to a user;

[1669] A selection means for allowing a user to select the best wireframe pattern from the presented wireframe patterns;

[1670] a means for analyzing data and generating layouts using a generative AI model;

[1671] A system including:

[1672] (Claim 2)

[1673] 2. The system according to claim 1, wherein the server arranges the plurality of layout patterns in consideration of usability when generating the plurality of layout patterns.

[1674] (Claim 3)

[1675] 2. The system according to claim 1, wherein the server places items of high importance in prominent positions based on the priority specified by the user.

[1676] "Example 2: Combining Emotion Engines"

[1677] (Claim 1)

[1678] An input means for the user to specify the functions, input items, display content, and priority required for the screen;

[1679] a transmission means for transmitting the specified input content to a server;

[1680] an analysis and generation means for analyzing input content received by the server and generating a plurality of wireframe patterns;

[1681] a display means for presenting the generated wireframe pattern to a user;

[1682] A selection means for allowing a user to select the best wireframe pattern from the presented wireframe patterns;

[1683] an emotion recognition means for recognizing an emotional state of a user and adjusting the wireframe based on the emotion;

[1684] A system including:

[1685] (Claim 2)

[1686] 2. The system according to claim 1, wherein the server arranges the plurality of layout patterns in consideration of usability when generating the plurality of layout patterns.

[1687] (Claim 3)

[1688] 2. The system according to claim 1, wherein the server places items of high importance in prominent positions based on the priority specified by the user.

[1689] "Application example 2 when combining emotion engines"

[1690] (Claim 1)

[1691] An input means for the user to specify the functions, input items, display content, and priority required for the screen;

[1692] a transmission means for transmitting the specified input content to a server;

[1693] an analysis and generation means for analyzing input content received by the server and generating a plurality of wireframe patterns;

[1694] a display means for presenting the generated wireframe pattern to a user;

[1695] A selection means for allowing a user to select the best wireframe pattern from the presented wireframe patterns;

[1696] an emotion recognition means for recognizing an emotion of a user;

[1697] means for adjusting the wireframe based on emotion data obtained from the emotion recognition means;

[1698] A system including:

[1699] (Claim 2)

[1700] 2. The system according to claim 1, wherein the server arranges the plurality of layout patterns in consideration of usability when generating the plurality of layout patterns.

[1701] (Claim 3)

[1702] 2. The system according to claim 1, wherein the server places items of high importance in prominent positions based on the priority specified by the user.

[1703] (Claim 4)

[1704] 2. The system according to claim 1, wherein the emotion recognition means analyzes the user's emotions in real time and adjusts the generated wireframe pattern. [Explanation of symbols]

[1705] 10, 210, 310, 410 Data Processing Systems 12 Data Processing Device 14 Smart Devices 214 Smart Glasses 314 Headset-type terminal 414 Robot< / url:> < / url:> < / url:> < / url:>

Claims

1. An input means for the user to specify the functions, input items, display content, and priority required for the screen; a transmission means for transmitting the specified input content to a server; an analysis and generation means for analyzing input content received by the server and generating a plurality of wireframe patterns; a display means for presenting the generated wireframe pattern to a user; A selection means for allowing a user to select the best wireframe pattern from the presented wireframe patterns; A system including:

2. 2. The system according to claim 1, wherein the server performs layout taking usability into consideration when generating a plurality of layout patterns.

3. 2. The system according to claim 1, wherein the server places items of high importance in prominent positions based on the priority designated by the user.

Images