system
A system converts presentation software designs into HTML, CSS, and JavaScript code, allowing users to create professional web pages without programming knowledge, addressing inefficiencies in web design and cost.
Patent Information
- Authority / Receiving Office
- JP · JP
- Patent Type
- Applications
- Current Assignee / Owner
- SOFTBANK GROUP CORP
- Filing Date
- 2024-12-06
- Publication Date
- 2026-06-18
AI Technical Summary
Creating professional web pages requires specialized programming knowledge, which is a barrier for individuals and small to medium-sized businesses, leading to inefficiencies in time and cost due to the difficulty in designing and manually coding web pages.
A system that allows users to create designs using presentation software, save them as electronic files, and upload them for automatic conversion into HTML, CSS, and JavaScript code, enabling professional web page generation without programming expertise.
Enables users to quickly and efficiently create professional web pages by analyzing design elements and generating corresponding code, eliminating the need for specialized knowledge.
Smart Images

Figure 2026099314000001_ABST
Abstract
Description
Technical Field
[0001] The technology of the present disclosure relates to a system.
Background Art
[0002] Patent Document 1 discloses a method for controlling a persona chatbot, which is performed by at least one processor, including steps of receiving a user utterance, adding the user utterance to a prompt including an instruction sentence related to an explanation of a 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
Summary of the Invention
Problems to be Solved by the Invention
[0004] Conventionally, creating a web page requires specialized programming knowledge, and many individuals and small and medium-sized businesses have felt restricted in web page design. Also, it has been difficult to create a professional design in a short time, which has been inefficient in terms of cost and time. To solve such problems, there is a need for a system that can easily create a web page without programming knowledge.
Means for Solving the Problems
[0005] This invention provides a system that allows users to save a design image created using presentation software as an electronic file on their device and upload it via a submission interface. The server then analyzes the file and automatically generates HTML, CSS, and JavaScript® code. Users can receive this generated code and display it as a web page, enabling them to create professional web pages quickly without specialized knowledge.
[0006] A "presentation creation tool" is a software tool that allows users to create the design and layout of content, and to arrange information in a slide format.
[0007] An "electronic file" is a collection of information stored as digital data, and is stored in a file system in a specific format.
[0008] A "submission interface" is a point of contact for users to provide electronic files to the system, and includes upload functionality and a user interface.
[0009] "Analysis means" refers to a processing system that uses technologies and algorithms to interpret input data and identify the characteristics of each element.
[0010] A "generation method" is a function that automatically generates program code based on analyzed data, producing structured output in a specific format.
[0011] A "user" refers to an individual or legal entity that uses this system to create a webpage, and is responsible for providing input data and utilizing the generated results. [Brief explanation of the drawing]
[0012] [Figure 1]This is a conceptual diagram showing an example of the configuration of a data processing system according to the first embodiment. [Figure 2] This is a conceptual diagram showing an example of the essential functions of a data processing device and a smart device according to the first embodiment. [Figure 3] This is a conceptual diagram showing an example of the configuration of a data processing system according to the second embodiment. [Figure 4] This is a conceptual diagram showing an example of the main functions of a data processing device and smart glasses according to the second embodiment. [Figure 5] This is a conceptual diagram showing an example of the configuration of a data processing system according to the third embodiment. [Figure 6] This is a conceptual diagram showing an example of the main functions of a data processing device and a headset-type terminal according to the third embodiment. [Figure 7] This is a conceptual diagram showing an example of the configuration of a data processing system according to the fourth embodiment. [Figure 8] This is a conceptual diagram showing an example of the main functions of a data processing device and a robot according to the fourth embodiment. [Figure 9] This shows an emotion map where multiple emotions are mapped. [Figure 10] This shows an emotion map where multiple emotions are mapped. [Figure 11] This is a sequence diagram showing the processing flow of the data processing system in Example 1. [Figure 12] This is a sequence diagram showing the processing flow of the data processing system in Application Example 1. [Figure 13] This is a sequence diagram showing the processing flow of the data processing system in Example 2, which incorporates an emotion engine. [Figure 14] This is a sequence diagram showing the processing flow of the data processing system in Application Example 2, which combines an emotion engine. [Modes for carrying out the invention]
[0013] Hereinafter, an example of an embodiment of the system relating to the technology of this disclosure will be described with reference to the attached drawings.
[0014] First, the terms used in the following description will be explained.
[0015] In the following embodiments, a labeled processor (hereinafter simply referred to as "processor") may be a single arithmetic unit or a combination of multiple arithmetic units. Also, the processor may be a single type of arithmetic unit or a combination of multiple types of arithmetic units. Examples of arithmetic units include a CPU (Central Processing Unit), a GPU (Graphics Processing Unit), a GPGPU (General-Purpose computing on Graphics Processing Units), an APU (Accelerated Processing Unit), and the like.
[0016] In the following embodiments, a labeled RAM (Random Access Memory) is a memory in which information is temporarily stored and is used as a work memory by the processor.
[0017] In the following embodiments, a labeled storage is one or more non-volatile storage devices that store various programs and various parameters, etc. Examples of non-volatile storage devices include flash memory (SSD (Solid State Drive)), magnetic disks (e.g., hard disks), or magnetic tapes, and the like.
[0018] In the following embodiments, a labeled communication I / F (Interface) is an interface including a communication processor and 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), or Bluetooth (registered trademark), and the like.
[0019] In the following embodiments, "A and / or B" is synonymous with "at least one of A and B." That is, "A and / or B" means that it may be A alone, or B alone, or a combination of A and B. Furthermore, in this specification, the same concept as "A and / or B" applies when expressing three or more things linked by "and / or."
[0020] [First Embodiment]
[0021] Figure 1 shows an example of the configuration of the data processing system 10 according to the first embodiment.
[0022] As shown in Figure 1, the 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.
[0023] The data processing device 12 comprises a computer 22, a database 24, and a communication interface 26. The computer 22 is an example of a "computer" related to the technology of this disclosure. The computer 22 comprises a processor 28, RAM 30, and storage 32. The processor 28, RAM 30, and storage 32 are connected to a bus 34. The database 24 and the communication interface 26 are also connected to the bus 34. The communication interface 26 is connected to a network 54. An example of the network 54 is a WAN (Wide Area Network) and / or a LAN (Local Area Network).
[0024] The smart device 14 comprises a computer 36, a reception device 38, an output device 40, a camera 42, and a communication interface 44. The computer 36 comprises a processor 46, RAM 48, and storage 50. The processor 46, RAM 48, and storage 50 are connected to a bus 52. The reception device 38, output device 40, and camera 42 are also connected to the bus 52.
[0025] The reception device 38 is equipped with a touch panel 38A and a microphone 38B, etc., and receives user input. The touch panel 38A receives user input by detecting contact with an object (e.g., a pen or finger). The microphone 38B receives user input by detecting the user's voice. The control unit 46A transmits data indicating the user input received by the touch panel 38A and 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.
[0026] 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 perceptible to the user 20 (e.g., audio and / or text). The display 40A displays visible information such as text and images according to instructions from the processor 46. The speaker 40B outputs audio according to instructions from the processor 46. The camera 42 is a small digital camera equipped with an optical system such as a lens, aperture, and shutter, and an image sensor such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor.
[0027] Communication interface 44 is connected to network 54. Communication interfaces 44 and 26 are responsible for the exchange of various types of information between processor 46 and processor 28 via network 54.
[0028] Figure 2 shows an example of the main functions of the data processing device 12 and the smart device 14.
[0029] As shown in Figure 2, in the data processing device 12, a specific processing 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" related to the technology of this 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 according to the specific processing program 56 executed on the RAM 30.
[0030] The storage 32 stores the data generation model 58 and the emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.
[0031] In the smart device 14, the processor 46 performs the reception output processing. The storage 50 stores the reception output program 60. The reception output program 60 is used in conjunction with a 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 processing is realized by the processor 46 operating as a control unit 46A according to the reception output program 60 executed on the RAM 48.
[0032] Next, the specific processing performed by the specific processing unit 290 of the data processing device 12 will be described. In the following description, the data processing device 12 will be referred to as the "server" and the smart device 14 as the "terminal".
[0033] This invention relates to a system that automatically generates web pages based on designs created with presentation software. This system primarily functions through the collaboration of three parties: a server, a terminal, and a user. The specific operations of each party are described below.
[0034] Users first design the web page using presentation software. This design includes text, images, shapes, colors, and font styles. Once the design is complete, users save it in a recommended electronic file format and upload the file through the system's submission interface.
[0035] The terminal receives electronic files uploaded by the user. While sending these files to the server, the terminal performs appropriate auxiliary processing if file format conversion is required. The user interface provided by the terminal notifies the user of the progress and completion of the file upload.
[0036] The server receives the design file sent from the terminal and analyzes its contents using analysis tools. The analysis identifies the elements of each slide and extracts text, shapes, and images as constituent elements. Next, the server uses generation tools to automatically generate HTML, CSS, and JavaScript code based on the analyzed design information. This allows the user-specified design to be reproduced as a web page.
[0037] To give a concrete example, if a user creates a slide with the title "Company Overview," the server will use the title text. <h1>Define it as a tag and specify the style information with CSS. Also, the image files placed in the slide are It is embedded within HTML code using tags, and its necessary styling is adjusted using CSS.
[0038] Finally, the server returns the generated code to the terminal. The user opens the code in a browser and confirms that the design is displayed as intended. As a result, professional web pages can be created without specialized programming knowledge.
[0039] The following describes the processing flow.
[0040] Step 1:
[0041] Users create web page designs using presentation software and save them in electronic file format.
[0042] Step 2:
[0043] Users upload the created electronic files to their terminals using the system's submission interface.
[0044] Step 3:
[0045] The terminal receives the uploaded file, converts the file format if necessary, and sends the file to the server.
[0046] Step 4:
[0047] The server analyzes the files sent from the terminal using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0048] Step 5:
[0049] The server automatically generates HTML, CSS, and JavaScript program code using a generation method based on the analysis results.
[0050] Step 6:
[0051] The server packages the generated code, returns it to the terminal, and sends it back.
[0052] Step 7:
[0053] The terminal displays a code received from the server to the user and provides a download link.
[0054] Step 8:
[0055] The user runs the generated code in their browser and verifies that the webpage is displayed as designed.
[0056] (Example 1)
[0057] Next, we will describe Example 1. In the following description, the data processing device 12 will be referred to as the "server," and the smart device 14 will be referred to as the "terminal."
[0058] In today's information society, quickly and easily realizing individual designs as web pages is crucial, but many people lack specialized programming knowledge, making this process difficult. Furthermore, manual coding is time-consuming, laborious, and inefficient. To solve this, a system is needed that can generate designs as web pages simply and efficiently.
[0059] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 1 is realized by the following means.
[0060] In this invention, the server includes means for creating an information display configuration using an information creation device, means for analyzing transmitted design data and automatically generating markup language and stylesheets, and means for identifying visual elements using optical character recognition technology and generating appropriate program code. This makes it possible for users without specialized coding knowledge to efficiently and automatically generate professional web pages.
[0061] "Information creation device" refers to software or hardware used to design presentations and configurations.
[0062] "Electronic data" refers to information files stored in a format that can be processed by a computer.
[0063] A "data exchange device for submission" refers to a device or system for sending data from a user to a server.
[0064] A "markup language" refers to a language used to describe the structure and meaning of a document, such as HTML.
[0065] A "stylesheet" refers to languages such as CSS used to manage the layout and appearance of web pages.
[0066] "Optical character recognition technology" refers to the technology that identifies and extracts text information from images or scanned documents.
[0067] "Visual elements" refer to the constituent elements such as text, images, and shapes that are displayed on a web page.
[0068] "Program code" refers to the descriptions of HTML, CSS, JavaScript, and other elements used to construct web pages.
[0069] A "computer system" refers to a collection of hardware and software configured to input, process, and output information.
[0070] This invention is a system that automatically generates web pages based on designs created with presentation software. This system is primarily built through the collaboration of a server, terminals, and users.
[0071] First, the user constructs the web page design using software intended as an information creation device, such as presentation software. This design includes text, images, shapes, colors, font styles, etc. Once the design is complete, the user saves this configuration as electronic data in a recommended data format, such as PDF. Then, they upload the design data via a submission data exchange device.
[0072] The terminal receives electronic data uploaded by the user. The terminal performs preprocessing, such as format conversion, as needed. This includes, for example, converting a specific image format to a general-purpose image format. The terminal also provides an interface to notify the user of the upload progress.
[0073] The server analyzes the design data received from the terminal. Using specialized analysis software, the content is broken down into visual elements, and text, shapes, and images are identified as appropriate. Optical character recognition technology is used in this analysis, and text contained within images can also be extracted. Subsequently, a generative AI model is used to automatically generate markup language, stylesheets, and scripts as needed, based on the analyzed design information. This enables a consistent representation as a web page.
[0074] For example, if a user designs a slide for "Company Overview," the server will process that text.< / h1> <h1>Wrap it with tags and define the style with CSS. Also, the company logos and graphs on the slides are Tags and <svg>It is incorporated using tags and adjusted with CSS, including any necessary styling settings.
[0075] Finally, the server sends the generated code back to the terminal. The user receives this code via the terminal and checks the rendering in a web browser. This makes it possible for users to easily create professional web pages without requiring specialized programming skills.
[0076] An example of a prompt might be: "Automatically generate a website based on a company introduction slide design created using presentation software. The slides should include a company overview, product information, and contact details."
[0077] The flow of the specific processing in Example 1 will be explained using Figure 11.
[0078] Step 1:
[0079] The user creates a web page design using presentation software. This design includes text, images, shapes, colors, and font styles. As input, the user creates the design in slide format, and as output, saves this design as electronic data such as PDF.
[0080] Step 2:
[0081] Users upload saved electronic data via the system's data exchange device for submission. The input is electronic data, and the output is data sent to the terminal. Specifically, the user clicks the upload button and transfers the selected files to the system.
[0082] Step 3:
[0083] The terminal receives electronic data from the user. Input is data from the user, and output is data ready for transfer to the server. Specific actions performed by the terminal include data format verification and, if necessary, format conversion. It also sends a notification to the user upon completion of the upload.
[0084] Step 4:
[0085] The server receives electronic data sent from the terminal and begins analysis. The input is data from the terminal, and the output is data classified by visual element. Specifically, the server uses optical character recognition technology to extract text from the image and identifies each element from the presentation software.
[0086] Step 5:
[0087] The server uses a generative AI model based on the analyzed information to generate markup language and stylesheets. The input is the analyzed design information, and the output is HTML, CSS, and JavaScript code. Specifically, the server operates based on the analysis results. <h1>Tags and Generate code that includes tags, and add necessary interactive elements using JavaScript.
[0088] Step 6:
[0089] The server sends the generated code back to the terminal. The input is the generated web code, and the output is the status indicating that the transmission to the terminal is complete. Specifically, the server performs the code transfer and logs the result.
[0090] Step 7:
[0091] The user verifies the code received from the server via their terminal and displays it in a web browser. The input is the code from the server, and the output is the completed web page displayed in the browser. The user visually verifies that each section is displayed and functions correctly.
[0092] (Application Example 1)
[0093] Next, we will explain Application Example 1. In the following explanation, the data processing device 12 will be referred to as the "server," and the smart device 14 will be referred to as the "terminal."
[0094] When operating a store online, users without specialized programming knowledge face the challenge of easily designing visual layouts in real time and quickly publishing those designs online. To solve this problem, a system is needed that possesses both an intuitive design interface and automatic web page generation capabilities.
[0095] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 1 is realized by the following means.
[0096] In this invention, the server includes means for creating information display designs using presentation creation means, means for saving them as electronic data and uploading them via a submission interface, processing means for analyzing the design data and automatically generating HTML, CSS, and JavaScript code, and means for designing store simulations in real time using a smart device and immediately publishing them online. This enables users to efficiently and quickly publish professional web pages.
[0097] A "presentation creation tool" is a tool for easily creating information display designs, enabling users to visually design the layout.
[0098] "Electronic data" refers to a collection of information stored in a format that can be read by a computer, and includes digital data such as designs and text.
[0099] The "submission interface" is an interface for users to upload their designs to the system, and it acts as an intermediate device to facilitate smooth data transfer.
[0100] "Analysis" is the process of breaking down design data and identifying each component, preparing the data to generate program code from the design.
[0101] A "smart device" refers to a mobile device with internet connectivity that allows users to operate and design in real time.
[0102] "Real-time" refers to processing and data transmission occurring instantly without delay, and possessing the property of responding to user operations instantaneously.
[0103] "Store simulation" refers to the creation of designs aimed at virtually reproducing product placement and store layout, and is a means of supporting store operations in a virtual space.
[0104] "Instant online publication" refers to the immediate public release of designed information via the internet, making user-created content readily available on the web.
[0105] The system for implementing this invention primarily functions through the collaboration of three parties: a server, a terminal, and a user. The user can design store layouts using presentation software on a smart device. This design includes product images, descriptions, and pricing information. Once the design is complete, the user saves it as electronic data and uploads it to the system via a submission interface.
[0106] The terminal receives the design data uploaded by the user, converts the data format as needed, and then sends it to the server. During this process, the terminal notifies the user of the upload status, allowing them to confirm that the data has been sent correctly.
[0107] The server receives design data sent from the terminal. The server uses a powerful analysis engine to analyze the data, identifying and extracting each component. This analysis reveals elements such as text, images, and shapes, and automatically generates corresponding HTML, CSS, and JavaScript code. The generated code is previewed in real time on smart devices and terminals.
[0108] As a concrete example, let's say a user designs a virtual store for a new T-shirt collection. The user designs a layout of the products on their smartphone, and that design is immediately analyzed by a server and converted into a webpage where the T-shirts are actually displayed online. An example of a prompt to input into the generating AI model would be, "Please tell me how to create a virtual store design for a new T-shirt collection using a smartphone app and automatically generate a webpage based on that design." Through this procedure, the user can quickly build a professional online shop without any specialized knowledge.
[0109] The flow of a specific process in Application Example 1 will be explained using Figure 12.
[0110] Step 1:
[0111] Users design store layouts using presentation software on their smart devices. They input visual elements such as product images, descriptions, and pricing information. Once the design is complete, this information is saved as electronic data. The output is electronic data that reflects the user's design intent.
[0112] Step 2:
[0113] Users upload saved design data to the system via a submission interface. This interface receives the design data, checks its integrity, and converts the data format if necessary. As output, it generates a formatted upload file.
[0114] Step 3:
[0115] The terminal verifies the uploaded design data and sends it to the server. The terminal notifies the user of the data transfer status and confirms that the upload was successful. The input is the formatted design data, and the output is the data sent to the server.
[0116] Step 4:
[0117] The server receives design data from the terminal. Using a powerful analysis engine, the server analyzes the data in detail, identifying text and images and extracting constituent elements. This analysis automatically generates appropriate HTML, CSS, and JavaScript code from the input design data to form a web page. The output is the completed program code.
[0118] Step 5:
[0119] The server sends the generated code back to the terminal. The returned code is previewed on the user's smart device or terminal. The input is the generated program code, and the output is a previewable web page display.
[0120] Step 6:
[0121] Users verify that the design is correctly reflected through the provided preview and make corrections as needed. After final confirmation, it can be immediately published online. This step includes user quality assurance verification. The output is a publishable web page.
[0122] Furthermore, an emotion engine that estimates the user's emotions may be incorporated. That is, the identification processing unit 290 may use the emotion identification model 59 to estimate the user's emotions and perform identification processing using the user's emotions.
[0123] This invention achieves more personalized designs by incorporating an emotion engine that recognizes user emotions into an automated web page generation system based on designs created with presentation software. This system primarily functions through the collaborative efforts of three parties: the server, the terminal, and the user.
[0124] First, the user creates the layout and design of the web page using presentation software. This design is saved as an electronic file and uploaded to the system through a submission interface. Here, the terminal receives the file and sends it to the server.
[0125] The server incorporates analysis tools and an emotion engine. It analyzes received files and infers the user's emotions from user input and recorded interactions. The analysis tools identify each element within the file and automatically generate HTML, CSS, and JavaScript code based on that information. Meanwhile, the emotion engine customizes the color scheme and layout based on the user's emotional information.
[0126] For example, suppose a user uploads a presentation with a calm color scheme, and the emotion engine recognizes the user's current emotional state as "relaxed." The server then adjusts the generated webpage to match the user's emotion by adding warmer background colors, adopting rounded button styles, and so on. As a result, a webpage that visually reflects the user's emotional state is generated, providing a more intuitive and engaging user experience.
[0127] Finally, the server returns the adjusted code to the terminal, and the user checks the result through their browser. A major feature of this invention is that personalization using an emotion engine makes it easy to create a design that is optimal for each individual user.
[0128] The following describes the processing flow.
[0129] Step 1:
[0130] Users create web page designs using presentation software. These designs include elements such as layout, text, images, and colors.
[0131] Step 2:
[0132] Users save their created designs as electronic files and upload them to their devices via a submission interface.
[0133] Step 3:
[0134] The terminal receives files uploaded by the user and sends those files to the server.
[0135] Step 4:
[0136] The server analyzes the file using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0137] Step 5:
[0138] The server's emotion engine infers the user's emotional state based on the user's past interaction data and current input data.
[0139] Step 6:
[0140] The server generates HTML, CSS, and JavaScript code based on the analyzed design information and inferred sentiment information, customizing the layout and color scheme to match the sentiment.
[0141] Step 7:
[0142] The server packages the generated code and sends it to the terminal.
[0143] Step 8:
[0144] The terminal displays a code sent from the server to the user and provides a download link.
[0145] Step 9:
[0146] The user executes the code generated through their browser and confirms that a customized webpage tailored to their emotions is displayed.
[0147] (Example 2)
[0148] Next, we will describe Example 2. In the following description, the data processing device 12 will be referred to as the "server" and the smart device 14 as the "terminal".
[0149] Traditional web page generation systems struggle to personalize designs that take user emotions into account, resulting in a lack of a truly intuitive user experience. Furthermore, the process of generating code from presentation designs is cumbersome, making it difficult to quickly provide user-optimized designs.
[0150] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 2 is realized by the following means.
[0151] In this invention, the server includes means for creating display information designs using application tools for creating graphic designs for information display, customization means for analyzing emotional states and optimizing the color scheme and placement of code based on those states, and means for analyzing visual information in design data and displaying the information in a network page format. This enables the rapid generation of personalized web page designs that respond to the user's emotions, thereby improving the user experience.
[0152] "Graphic design for information display" refers to a design layout that includes visual components created on a computer, and is intended to organize and clearly communicate visual information.
[0153] An "application tool" is a software program used to perform a specific function or purpose, providing an environment in which users can create and edit digital content.
[0154] A "digital format" is a form in which information is electronically represented in a way that a computer can recognize, making interaction and processing easy.
[0155] A "transmission interface" is a means of transferring digital data, providing a point of contact for sending and receiving data between different computer systems.
[0156] A "system" is a whole composed of different elements or components working together to provide a specific function or service.
[0157] "Standard Markup Language Code" is a language used to describe the structure and content of web pages, defining the logical organization of information.
[0158] "Stylesheet code" refers to code used to control the display and layout of a web page, providing rules for managing the appearance of elements.
[0159] "Script code" refers to program code used to automate various operations and actions on a computer, and it has the function of dynamically generating content.
[0160] A "personal device" refers to an electronic device used by individual users to input or receive information, and includes mobile phones, computers, and other similar devices.
[0161] "Network Page Format" refers to pages where information is organized in a way that makes it accessible on the internet, and which are viewed through a web browser.
[0162] "Emotion inference methods" refer to technologies or methods that determine a user's emotional state based on user input information and past data, and may sometimes utilize AI.
[0163] "Optimization customization methods" refer to methods for adjusting a system or design configuration according to specific purposes or conditions to achieve the most effective state.
[0164] This invention is a system that enables users to generate visually and emotionally personalized web pages. This system essentially functions by combining the user's terminal, a server, and sentiment analysis technology.
[0165] First, the user creates a graphic design for information display using an application tool. This tool is a commonly used software application (e.g., presentation software) that can save the design elements in digital format. The saved file is uploaded to the system via a transmission interface.
[0166] The terminal's role is to receive design files sent by the user and transfer them to the server. These files contain visual information and are ready for analysis.
[0167] The server incorporates analysis and sentiment prediction tools. The analysis tool examines the received design file and extracts the information necessary to generate standard markup language code (HTML), stylesheet code (CSS), and script code (JavaScript). The sentiment prediction tool uses a generative AI model to predict the user's emotional state and adjusts the design's color scheme and layout based on that information.
[0168] For example, if a user uploads a design that evokes a calming impression, the server might use a generative AI model to recognize the emotional state as "relaxed." Based on this, customizations such as a warm-toned background and rounded buttons might be implemented. In this example, the prompt could be: "Automatically generate a webpage from the user's uploaded presentation, adjusting the design to reflect the user's emotions."
[0169] Finally, the adjusted webpage code is sent to the device and viewed by the user through their browser. Personalized design that responds to emotions makes the user experience more intuitive and engaging.
[0170] The flow of the specific processing in Example 2 will be explained using Figure 13.
[0171] Step 1:
[0172] Users create graphic designs for information display using application tools. The input is the layout and design created by the user, and the output is a file that saves this design in digital format. Specifically, the user places text boxes, images, shapes, etc. in presentation software and exports it in PDF or PPTX format.
[0173] Step 2:
[0174] The terminal receives design files saved by the user and transfers them to the server. The input is a digital design file, and the output is the operation of sending that file to the server. Specifically, the file is uploaded via the user interface and securely transferred to the server over the network.
[0175] Step 3:
[0176] The server receives the transmitted file and extracts visual information using analysis tools. The input is a design file, and the output is the extracted layout, text, and image data. Specifically, it uses Python scripts and OCR technology to analyze the internal structure of the file and extract the necessary information.
[0177] Step 4:
[0178] The server generates standard markup language code, stylesheet code, and script code based on visual information. The input is extracted data, and the output is a set of code. Specifically, it uses a template engine to automatically generate HTML tags and CSS styles, and incorporates interactive elements using JavaScript.
[0179] Step 5:
[0180] The server has an emotion prediction system that uses a generative AI model to predict the user's emotional state. Based on this emotion information, it customizes the design code. The input consists of visual information and past user data, and the output is customized code corresponding to the emotion. Specifically, it runs an emotion analysis algorithm to modify elements such as color scheme and layout.
[0181] Step 6:
[0182] The server sends the generated customized code to the terminal. The input is the final design code, and the output is what is sent to the terminal. Specifically, the code is sent using a secure communication protocol, allowing the user to view the results in their browser.
[0183] Step 7:
[0184] The user reviews the received webpage through their browser and verifies its display. The input is the webpage code provided by the server, and the output is a visualized webpage. Specifically, the user checks the page's content and usability and provides feedback as needed.
[0185] (Application Example 2)
[0186] Next, we will explain application example 2. In the following explanation, the data processing device 12 will be referred to as a "server" and the smart device 14 as a "terminal".
[0187] Conventional information display systems have a problem in that they cannot provide personalized information based on the user's emotions. In particular, in the customer experience at physical stores, there is a need to provide appropriate information that is tailored to each customer's emotions and preferences. However, existing technologies have limitations in customizing for individual customers, making it difficult to improve customer satisfaction.
[0188] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means.
[0189] In this invention, the server includes means for creating an information display design using presentation creation means, means for recognizing the user's emotional state and customizing a code generated based on the emotional information, and means for sending a code adapted to the generated emotion to the user and displaying the information in web page format. This makes it possible to present personalized information adapted to the customer's emotions in a physical store.
[0190] "Presentation creation means" refers to software or equipment used to create designs for displaying information.
[0191] An "electronic file" is a file that stores data in a digital format and can be manipulated on a computer.
[0192] The "submission interface" is part of a system that provides a point of contact for users to upload design files.
[0193] "Analysis means" refers to a device or software for interpreting the content of a design and converting it into the required format.
[0194] "Emotional state" refers to information that indicates the user's psychological or emotional state.
[0195] "Means of customization" refers to functions that allow for the adjustment, modification, or optimization of information and functions according to specific conditions.
[0196] A "web page format" is a format for displaying information on the internet, and it is written using HTML, CSS, and JavaScript.
[0197] A "physical store" is a retail environment that exists in a physical location and provides goods or services.
[0198] The server receives information display designs created by users using presentation creation tools. These designs are saved as electronic files and uploaded through a submission interface. The server analyzes the uploaded design files and automatically generates HTML, CSS, and JavaScript code. This process utilizes a technology that identifies visual elements within the file using analysis tools. Image recognition technology is used as the analysis technique.
[0199] Furthermore, the server incorporates an emotion recognition engine that recognizes the user's emotional state, allowing it to infer emotions from the user's gaze and facial expressions. Based on this emotional information, the generated web page code is customized. Specifically, the design, layout, and color scheme of the web page are changed according to the user's current emotions, personalizing the visual elements.
[0200] The terminal receives a coordinated code from the server and displays the information via a screen in the physical store environment. This allows users to experience information displayed in a way that matches their emotional state, resulting in a more engaging and intuitive user experience.
[0201] For example, if a user is wearing smart glasses in a physical store, the glasses' camera captures their facial expressions and sends them to a server. The server analyzes the emotions and displays the generated code on the store's screen, showing information and recommendations about new products that align with the user's emotions.
[0202] Examples of prompt statements to input into the generative AI model are as follows:
[0203] Optimize the product introduction videos displayed on in-store screens to suit a customer's relaxed state. Choose colors and music that promote relaxation.
[0204] The flow of a specific process in Application Example 2 will be explained using Figure 14.
[0205] Step 1:
[0206] Users create information display designs using presentation software and save them as electronic files. These files are then uploaded to the server via a submission interface. The input is the design file, and the output is the electronic file sent to the server.
[0207] Step 2:
[0208] The server receives uploaded design files and analyzes their content using analytical tools. The input is an electronic file, and the output is data converted into HTML, CSS, and JavaScript code. This analysis process uses image recognition technology to identify visual elements and automatically generates corresponding web program code.
[0209] Step 3:
[0210] The server captures the user's gaze and facial expressions using a camera and analyzes their emotional state via an emotion recognition engine. The input in this process is video data from the camera, and the output is information about the user's emotional state.
[0211] Step 4:
[0212] The server uses emotional state information to customize the code of the generated web page. Here, the input is emotional state data and generated code, and the output is customized HTML, CSS, and JavaScript code. The design, layout, and color scheme are adjusted to match the user's emotions.
[0213] Step 5:
[0214] The server sends a customized code to the user's device, and the information is displayed on a screen in the physical store environment. In this process, the code is entered into the device and output as a display. Users can visually experience personalized information that responds to their emotions.
[0215] 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 user input for the result of the specific processing. The control unit 46A transmits the audio data indicating 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.
[0216] Data generation model 58 is a so-called generative AI (Artificial Intelligence). An example of data generation model 58 is ChatGPT (registered trademark) (Internet search).<URL: https: / / openai.com / blog / chatgpt> ), Gemini (registered trademark) (Internet search) <url: https: gemini.google.com ?hl="ja">Examples of generative AI include the following. The data generation model 58 is obtained by performing deep learning on a neural network. The data generation model 58 is input with prompts containing instructions, and with inference data such as audio data representing speech, text data representing text, and image data representing images. The data generation model 58 infers from the input inference data according to the instructions indicated by the prompts, and outputs the inference results in data formats such as audio data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.
[0217] In the above embodiment, an example was given in which specific processing is performed by the data processing device 12, but the technology of this disclosure is not limited thereto, and the specific processing may also be performed by the smart device 14.
[0218] [Second Embodiment]
[0219] Figure 3 shows an example of the configuration of the data processing system 210 according to the second embodiment.
[0220] As shown in Figure 3, the data processing system 210 includes a data processing device 12 and smart glasses 214. An example of the data processing device 12 is a server.
[0221] The data processing device 12 comprises a computer 22, a database 24, and a communication interface 26. The computer 22 is an example of a "computer" related to the technology of this disclosure. The computer 22 comprises a processor 28, RAM 30, and storage 32. The processor 28, RAM 30, and storage 32 are connected to a bus 34. The database 24 and the communication interface 26 are also connected to the bus 34. The communication interface 26 is connected to a network 54. An example of the network 54 is a WAN (Wide Area Network) and / or a LAN (Local Area Network).
[0222] The smart glasses 214 include a computer 36, a microphone 238, a speaker 240, a camera 42, and a communication interface 44. The computer 36 includes a processor 46, RAM 48, and storage 50. The processor 46, RAM 48, and storage 50 are connected to a bus 52. The microphone 238, speaker 240, and camera 42 are also connected to the bus 52.
[0223] The microphone 238 receives voice signals from the user 20 and receives instructions from the user 20. The microphone 238 captures the voice signals from the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio according to the instructions from the processor 46.
[0224] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an image sensor such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the area around the user 20 (for example, an imaging range defined by a field of view equivalent to the width of a typical healthy person's field of vision).
[0225] Communication interface 44 is connected to network 54. Communication interfaces 44 and 26 are responsible for the exchange of various information between processor 46 and processor 28 via network 54. The exchange of various information between processor 46 and processor 28 using communication interfaces 44 and 26 is performed in a secure manner.
[0226] Figure 4 shows an example of the main functions of the data processing device 12 and the smart glasses 214. As shown in Figure 4, the data processing device 12 performs specific processing using the processor 28. The storage 32 stores the specific processing program 56.
[0227] The specific processing program 56 is an example of a "program" relating to the technology of this 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.
[0228] The storage 32 stores the data generation model 58 and the emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.
[0229] In the smart glasses 214, the processor 46 performs the reception output processing. The storage 50 stores the reception output program 60. 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 processing is realized by the processor 46 operating as a control unit 46A according to the reception output program 60 executed on the RAM 48.
[0230] Next, the identification processing performed by the identification processing unit 290 of the data processing device 12 will be described. 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".
[0231] This invention relates to a system that automatically generates web pages based on designs created with presentation software. This system primarily functions through the collaboration of three parties: a server, a terminal, and a user. The specific operations of each party are described below.
[0232] Users first design the web page using presentation software. This design includes text, images, shapes, colors, and font styles. Once the design is complete, users save it in a recommended electronic file format and upload the file through the system's submission interface.
[0233] The terminal receives electronic files uploaded by the user. While sending these files to the server, the terminal performs appropriate auxiliary processing if file format conversion is required. The user interface provided by the terminal notifies the user of the progress and completion of the file upload.
[0234] The server receives the design file sent from the terminal and analyzes its contents using analysis tools. The analysis identifies the elements of each slide and extracts text, shapes, and images as constituent elements. Next, the server uses generation tools to automatically generate HTML, CSS, and JavaScript code based on the analyzed design information. This allows the user-specified design to be reproduced as a web page.
[0235] To give a concrete example, if a user creates a slide with the title "Company Overview," the server will use the title text. <h1>Define it as a tag and specify the style information with CSS. Also, the image files placed in the slide are It is embedded within HTML code using tags, and its necessary styling is adjusted using CSS.
[0236] Finally, the server returns the generated code to the terminal. The user opens the code in a browser and confirms that the design is displayed as intended. As a result, professional web pages can be created without specialized programming knowledge.
[0237] The following describes the processing flow.
[0238] Step 1:
[0239] Users create web page designs using presentation software and save them in electronic file format.
[0240] Step 2:
[0241] Users upload the created electronic files to their terminals using the system's submission interface.
[0242] Step 3:
[0243] The terminal receives the uploaded file, converts the file format if necessary, and sends the file to the server.
[0244] Step 4:
[0245] The server analyzes the files sent from the terminal using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0246] Step 5:
[0247] The server automatically generates HTML, CSS, and JavaScript program code using a generation method based on the analysis results.
[0248] Step 6:
[0249] The server packages the generated code, returns it to the terminal, and sends it back.
[0250] Step 7:
[0251] The terminal displays a code received from the server to the user and provides a download link.
[0252] Step 8:
[0253] The user runs the generated code in their browser and verifies that the webpage is displayed as designed.
[0254] (Example 1)
[0255] Next, we will describe Example 1. 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."
[0256] In today's information society, quickly and easily realizing individual designs as web pages is crucial, but many people lack specialized programming knowledge, making this process difficult. Furthermore, manual coding is time-consuming, laborious, and inefficient. To solve this, a system is needed that can generate designs as web pages simply and efficiently.
[0257] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 1 is realized by the following means.
[0258] In this invention, the server includes means for creating an information display configuration using an information creation device, means for analyzing transmitted design data and automatically generating markup language and stylesheets, and means for identifying visual elements using optical character recognition technology and generating appropriate program code. This makes it possible for users without specialized coding knowledge to efficiently and automatically generate professional web pages.
[0259] "Information creation device" refers to software or hardware used to design presentations and configurations.
[0260] "Electronic data" refers to information files stored in a format that can be processed by a computer.
[0261] A "data exchange device for submission" refers to a device or system for sending data from a user to a server.
[0262] A "markup language" refers to a language used to describe the structure and meaning of a document, such as HTML.
[0263] A "stylesheet" refers to languages such as CSS used to manage the layout and appearance of web pages.
[0264] "Optical character recognition technology" refers to the technology that identifies and extracts text information from images or scanned documents.
[0265] "Visual elements" refer to the constituent elements such as text, images, and shapes that are displayed on a web page.
[0266] "Program code" refers to the descriptions of HTML, CSS, JavaScript, and other elements used to construct web pages.
[0267] A "computer system" refers to a collection of hardware and software configured to input, process, and output information.
[0268] This invention is a system that automatically generates web pages based on designs created with presentation software. This system is primarily built through the collaboration of a server, terminals, and users.
[0269] First, the user constructs the web page design using software intended as an information creation device, such as presentation software. This design includes text, images, shapes, colors, font styles, etc. Once the design is complete, the user saves this configuration as electronic data in a recommended data format, such as PDF. Then, they upload the design data via a submission data exchange device.
[0270] The terminal receives electronic data uploaded by the user. The terminal performs preprocessing, such as format conversion, as needed. This includes, for example, converting a specific image format to a general-purpose image format. The terminal also provides an interface to notify the user of the upload progress.
[0271] The server analyzes the design data received from the terminal. Using specialized analysis software, the content is broken down into visual elements, and text, shapes, and images are identified as appropriate. Optical character recognition technology is used in this analysis, and text contained within images can also be extracted. Subsequently, a generative AI model is used to automatically generate markup language, stylesheets, and scripts as needed, based on the analyzed design information. This enables a consistent representation as a web page.
[0272] For example, if a user designs a slide for "Company Overview," the server will process that text.< / h1> <h1>Wrap it with tags and define the style with CSS. Also, the company logos and graphs on the slides are Tags and <svg>It is incorporated using tags and adjusted with CSS, including any necessary styling settings.
[0273] Finally, the server sends the generated code back to the terminal. The user receives this code via the terminal and checks the rendering in a web browser. This makes it possible for users to easily create professional web pages without requiring specialized programming skills.
[0274] An example of a prompt might be: "Automatically generate a website based on a company introduction slide design created using presentation software. The slides should include a company overview, product information, and contact details."
[0275] The flow of the specific processing in Example 1 will be explained using Figure 11.
[0276] Step 1:
[0277] The user creates a web page design using presentation software. This design includes text, images, shapes, colors, and font styles. As input, the user creates the design in slide format, and as output, saves this design as electronic data such as PDF.
[0278] Step 2:
[0279] Users upload saved electronic data via the system's data exchange device for submission. The input is electronic data, and the output is data sent to the terminal. Specifically, the user clicks the upload button and transfers the selected files to the system.
[0280] Step 3:
[0281] The terminal receives the electronic data received from the user. The input is the data from the user, and the output is the data ready for transfer to the server. Specific operations performed by the terminal include verification of the data format and format conversion as required. Also, a completion notice of the upload is sent to the user.
[0282] Step 4:
[0283] The server accepts the electronic data sent from the terminal and starts analysis. The input is the data from the terminal, and the output is the data classified for each visual element. As specific operations, the server extracts the text in the image using optical character recognition technology and identifies each element from the presentation software.
[0284] Step 5:
[0285] The server generates a markup language and a style sheet using the AI model generated based on the analyzed information. The input is the analyzed design information, and the output is HTML, CSS, and JavaScript code. Specific operations of the server include <h1>Tags and Generate code that includes tags, and add necessary interactive elements using JavaScript.
[0286] Step 6:
[0287] The server sends the generated code back to the terminal. The input is the generated web code, and the output is the status indicating that the transmission to the terminal is complete. Specifically, the server performs the code transfer and logs the result.
[0288] Step 7:
[0289] The user verifies the code received from the server via their terminal and displays it in a web browser. The input is the code from the server, and the output is the completed web page displayed in the browser. The user visually verifies that each section is displayed and functions correctly.
[0290] (Application Example 1)
[0291] Next, we will explain Application Example 1. In the following explanation, the data processing device 12 will be referred to as the "server," and the smart glasses 214 will be referred to as the "terminal."
[0292] When operating a store online, users without specialized programming knowledge face the challenge of easily designing visual layouts in real time and quickly publishing those designs online. To solve this problem, a system is needed that possesses both an intuitive design interface and automatic web page generation capabilities.
[0293] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 1 is realized by the following means.
[0294] In this invention, the server includes means for creating information display designs using presentation creation means, means for saving them as electronic data and uploading them via a submission interface, processing means for analyzing the design data and automatically generating HTML, CSS, and JavaScript code, and means for designing store simulations in real time using a smart device and immediately publishing them online. This enables users to efficiently and quickly publish professional web pages.
[0295] A "presentation creation tool" is a tool for easily creating information display designs, enabling users to visually design the layout.
[0296] "Electronic data" refers to a collection of information stored in a format that can be read by a computer, and includes digital data such as designs and text.
[0297] The "submission interface" is an interface for users to upload their designs to the system, and it acts as an intermediate device to facilitate smooth data transfer.
[0298] "Analysis" is the process of breaking down design data and identifying each component, preparing the data to generate program code from the design.
[0299] A "smart device" refers to a mobile device with internet connectivity that allows users to operate and design in real time.
[0300] "Real-time" refers to processing and data transmission occurring instantly without delay, and possessing the property of responding to user operations instantaneously.
[0301] "Store simulation" is design creation aimed at virtually reproducing product placement and store layout, and is a means to support store operations in a virtual space.
[0302] "Immediate online publication" refers to immediately making the designed information publicly available via the Internet, enabling the content created by users to be quickly made available on the web.
[0303] The system for implementing this invention mainly functions through the cooperation of three parties: the server, the terminal, and the user. The user can design the store layout using presentation creation software on a smart device. This design includes product images, descriptions, price information, etc. When the design is completed, the user saves it as electronic data and uploads it to the system via the submission interface.
[0304] The terminal receives the design data uploaded by the user, converts the data format if necessary, and then sends it to the server. At this time, the terminal can confirm that the data has been correctly transmitted by notifying the user of the upload status.
[0305] The server accepts the design data sent by the terminal. The server uses a powerful analysis engine to analyze the data and identify and extract each component. Through this analysis, elements such as text, images, and graphics become clear, and the corresponding HTML, CSS, and JavaScript codes are automatically generated. The generated codes are previewed in real time on smart devices or terminals.
[0306] As a concrete example, let's say a user designs a virtual store for a new T-shirt collection. The user designs a layout of the products on their smartphone, and that design is immediately analyzed by a server and converted into a webpage where the T-shirts are actually displayed online. An example of a prompt to input into the generating AI model would be, "Please tell me how to create a virtual store design for a new T-shirt collection using a smartphone app and automatically generate a webpage based on that design." Through this procedure, the user can quickly build a professional online shop without any specialized knowledge.
[0307] The flow of a specific process in Application Example 1 will be explained using Figure 12.
[0308] Step 1:
[0309] Users design store layouts using presentation software on their smart devices. They input visual elements such as product images, descriptions, and pricing information. Once the design is complete, this information is saved as electronic data. The output is electronic data that reflects the user's design intent.
[0310] Step 2:
[0311] Users upload saved design data to the system via a submission interface. This interface receives the design data, checks its integrity, and converts the data format if necessary. As output, it generates a formatted upload file.
[0312] Step 3:
[0313] The terminal verifies the uploaded design data and sends it to the server. The terminal notifies the user of the data transfer status and confirms that the upload was successful. The input is the formatted design data, and the output is the data sent to the server.
[0314] Step 4:
[0315] The server receives design data from the terminal. Using a powerful analysis engine, the server analyzes the data in detail, identifying text and images and extracting constituent elements. This analysis automatically generates appropriate HTML, CSS, and JavaScript code from the input design data to form a web page. The output is the completed program code.
[0316] Step 5:
[0317] The server sends the generated code back to the terminal. The returned code is previewed on the user's smart device or terminal. The input is the generated program code, and the output is a previewable web page display.
[0318] Step 6:
[0319] Users verify that the design is correctly reflected through the provided preview and make corrections as needed. After final confirmation, it can be immediately published online. This step includes user quality assurance verification. The output is a publishable web page.
[0320] Furthermore, an emotion engine that estimates the user's emotions may be incorporated. That is, the identification processing unit 290 may use the emotion identification model 59 to estimate the user's emotions and perform identification processing using the user's emotions.
[0321] This invention achieves more personalized designs by incorporating an emotion engine that recognizes user emotions into an automated web page generation system based on designs created with presentation software. This system primarily functions through the collaborative efforts of three parties: the server, the terminal, and the user.
[0322] First, the user creates the layout and design of the web page using presentation software. This design is saved as an electronic file and uploaded to the system through a submission interface. Here, the terminal receives the file and sends it to the server.
[0323] The server incorporates analysis tools and an emotion engine. It analyzes received files and infers the user's emotions from user input and recorded interactions. The analysis tools identify each element within the file and automatically generate HTML, CSS, and JavaScript code based on that information. Meanwhile, the emotion engine customizes the color scheme and layout based on the user's emotional information.
[0324] For example, suppose a user uploads a presentation with a calm color scheme, and the emotion engine recognizes the user's current emotional state as "relaxed." The server then adjusts the generated webpage to match the user's emotion by adding warmer background colors, adopting rounded button styles, and so on. As a result, a webpage that visually reflects the user's emotional state is generated, providing a more intuitive and engaging user experience.
[0325] Finally, the server returns the adjusted code to the terminal, and the user checks the result through their browser. A major feature of this invention is that personalization using an emotion engine makes it easy to create a design that is optimal for each individual user.
[0326] The following describes the processing flow.
[0327] Step 1:
[0328] Users create web page designs using presentation software. These designs include elements such as layout, text, images, and colors.
[0329] Step 2:
[0330] Users save their created designs as electronic files and upload them to their devices via a submission interface.
[0331] Step 3:
[0332] The terminal receives files uploaded by the user and sends those files to the server.
[0333] Step 4:
[0334] The server analyzes the file using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0335] Step 5:
[0336] The server's emotion engine infers the user's emotional state based on the user's past interaction data and current input data.
[0337] Step 6:
[0338] The server generates HTML, CSS, and JavaScript code based on the analyzed design information and inferred sentiment information, customizing the layout and color scheme to match the sentiment.
[0339] Step 7:
[0340] The server packages the generated code and sends it to the terminal.
[0341] Step 8:
[0342] The terminal displays a code sent from the server to the user and provides a download link.
[0343] Step 9:
[0344] The user executes the code generated through their browser and confirms that a customized webpage tailored to their emotions is displayed.
[0345] (Example 2)
[0346] Next, we will describe Example 2. 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".
[0347] Traditional web page generation systems struggle to personalize designs that take user emotions into account, resulting in a lack of a truly intuitive user experience. Furthermore, the process of generating code from presentation designs is cumbersome, making it difficult to quickly provide user-optimized designs.
[0348] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 2 is realized by the following means.
[0349] In this invention, the server includes means for creating display information designs using application tools for creating graphic designs for information display, customization means for analyzing emotional states and optimizing the color scheme and placement of code based on those states, and means for analyzing visual information in design data and displaying the information in a network page format. This enables the rapid generation of personalized web page designs that respond to the user's emotions, thereby improving the user experience.
[0350] "Graphic design for information display" refers to a design layout that includes visual components created on a computer, and is intended to organize and clearly communicate visual information.
[0351] An "application tool" is a software program used to perform a specific function or purpose, providing an environment in which users can create and edit digital content.
[0352] A "digital format" is a form in which information is electronically represented in a way that a computer can recognize, making interaction and processing easy.
[0353] A "transmission interface" is a means of transferring digital data, providing a point of contact for sending and receiving data between different computer systems.
[0354] A "system" is a whole composed of different elements or components working together to provide a specific function or service.
[0355] "Standard Markup Language Code" is a language used to describe the structure and content of web pages, defining the logical organization of information.
[0356] "Stylesheet code" refers to code used to control the display and layout of a web page, providing rules for managing the appearance of elements.
[0357] "Script code" refers to program code used to automate various operations and actions on a computer, and it has the function of dynamically generating content.
[0358] A "personal device" refers to an electronic device used by individual users to input or receive information, and includes mobile phones, computers, and other similar devices.
[0359] "Network Page Format" refers to pages where information is organized in a way that makes it accessible on the internet, and which are viewed through a web browser.
[0360] "Emotion inference methods" refer to technologies or methods that determine a user's emotional state based on user input information and past data, and may sometimes utilize AI.
[0361] "Optimization customization methods" refer to methods for adjusting a system or design configuration according to specific purposes or conditions to achieve the most effective state.
[0362] This invention is a system that enables users to generate visually and emotionally personalized web pages. This system essentially functions by combining the user's terminal, a server, and sentiment analysis technology.
[0363] First, the user creates a graphic design for information display using an application tool. This tool is a commonly used software application (e.g., presentation software) that can save the design elements in digital format. The saved file is uploaded to the system via a transmission interface.
[0364] The terminal's role is to receive design files sent by the user and transfer them to the server. These files contain visual information and are ready for analysis.
[0365] The server incorporates analysis and sentiment prediction tools. The analysis tool examines the received design file and extracts the information necessary to generate standard markup language code (HTML), stylesheet code (CSS), and script code (JavaScript). The sentiment prediction tool uses a generative AI model to predict the user's emotional state and adjusts the design's color scheme and layout based on that information.
[0366] For example, if a user uploads a design that evokes a calming impression, the server might use a generative AI model to recognize the emotional state as "relaxed." Based on this, customizations such as a warm-toned background and rounded buttons might be implemented. In this example, the prompt could be: "Automatically generate a webpage from the user's uploaded presentation, adjusting the design to reflect the user's emotions."
[0367] Finally, the adjusted webpage code is sent to the device and viewed by the user through their browser. Personalized design that responds to emotions makes the user experience more intuitive and engaging.
[0368] The flow of the specific processing in Example 2 will be explained using Figure 13.
[0369] Step 1:
[0370] Users create graphic designs for information display using application tools. The input is the layout and design created by the user, and the output is a file that saves this design in digital format. Specifically, the user places text boxes, images, shapes, etc. in presentation software and exports it in PDF or PPTX format.
[0371] Step 2:
[0372] The terminal receives design files saved by the user and transfers them to the server. The input is a digital design file, and the output is the operation of sending that file to the server. Specifically, the file is uploaded via the user interface and securely transferred to the server over the network.
[0373] Step 3:
[0374] The server receives the transmitted file and extracts visual information using analysis tools. The input is a design file, and the output is the extracted layout, text, and image data. Specifically, it uses Python scripts and OCR technology to analyze the internal structure of the file and extract the necessary information.
[0375] Step 4:
[0376] The server generates standard markup language code, stylesheet code, and script code based on visual information. The input is extracted data, and the output is a set of code. Specifically, it uses a template engine to automatically generate HTML tags and CSS styles, and incorporates interactive elements using JavaScript.
[0377] Step 5:
[0378] The server has an emotion prediction system that uses a generative AI model to predict the user's emotional state. Based on this emotion information, it customizes the design code. The input consists of visual information and past user data, and the output is customized code corresponding to the emotion. Specifically, it runs an emotion analysis algorithm to modify elements such as color scheme and layout.
[0379] Step 6:
[0380] The server sends the generated customized code to the terminal. The input is the final design code, and the output is what is sent to the terminal. Specifically, the code is sent using a secure communication protocol, allowing the user to view the results in their browser.
[0381] Step 7:
[0382] The user reviews the received webpage through their browser and verifies its display. The input is the webpage code provided by the server, and the output is a visualized webpage. Specifically, the user checks the page's content and usability and provides feedback as needed.
[0383] (Application Example 2)
[0384] Next, we will explain application example 2. In the following explanation, the data processing device 12 will be referred to as the "server" and the smart glasses 214 as the "terminal".
[0385] Conventional information display systems have a problem in that they cannot provide personalized information based on the user's emotions. In particular, in the customer experience at physical stores, there is a need to provide appropriate information that is tailored to each customer's emotions and preferences. However, existing technologies have limitations in customizing for individual customers, making it difficult to improve customer satisfaction.
[0386] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means.
[0387] In this invention, the server includes means for creating an information display design using presentation creation means, means for recognizing the user's emotional state and customizing a code generated based on the emotional information, and means for sending a code adapted to the generated emotion to the user and displaying the information in web page format. This makes it possible to present personalized information adapted to the customer's emotions in a physical store.
[0388] "Presentation creation means" refers to software or equipment used to create designs for displaying information.
[0389] An "electronic file" is a file that stores data in a digital format and can be manipulated on a computer.
[0390] The "submission interface" is part of a system that provides a point of contact for users to upload design files.
[0391] "Analysis means" refers to a device or software for interpreting the content of a design and converting it into the required format.
[0392] "Emotional state" refers to information that indicates the user's psychological or emotional state.
[0393] "Means of customization" refers to functions that allow for the adjustment, modification, or optimization of information and functions according to specific conditions.
[0394] A "web page format" is a format for displaying information on the internet, and it is written using HTML, CSS, and JavaScript.
[0395] A "physical store" is a retail environment that exists in a physical location and provides goods or services.
[0396] The server receives information display designs created by users using presentation creation tools. These designs are saved as electronic files and uploaded through a submission interface. The server analyzes the uploaded design files and automatically generates HTML, CSS, and JavaScript code. This process utilizes a technology that identifies visual elements within the file using analysis tools. Image recognition technology is used as the analysis technique.
[0397] Furthermore, the server incorporates an emotion recognition engine that recognizes the user's emotional state, allowing it to infer emotions from the user's gaze and facial expressions. Based on this emotional information, the generated web page code is customized. Specifically, the design, layout, and color scheme of the web page are changed according to the user's current emotions, personalizing the visual elements.
[0398] The terminal receives a coordinated code from the server and displays the information via a screen in the physical store environment. This allows users to experience information displayed in a way that matches their emotional state, resulting in a more engaging and intuitive user experience.
[0399] For example, if a user is wearing smart glasses in a physical store, the glasses' camera captures their facial expressions and sends them to a server. The server analyzes the emotions and displays the generated code on the store's screen, showing information and recommendations about new products that align with the user's emotions.
[0400] Examples of prompt statements to input into the generative AI model are as follows:
[0401] Optimize the product introduction videos displayed on in-store screens to suit a customer's relaxed state. Choose colors and music that promote relaxation.
[0402] The flow of a specific process in Application Example 2 will be explained using Figure 14.
[0403] Step 1:
[0404] Users create information display designs using presentation software and save them as electronic files. These files are then uploaded to the server via a submission interface. The input is the design file, and the output is the electronic file sent to the server.
[0405] Step 2:
[0406] The server receives uploaded design files and analyzes their content using analytical tools. The input is an electronic file, and the output is data converted into HTML, CSS, and JavaScript code. This analysis process uses image recognition technology to identify visual elements and automatically generates corresponding web program code.
[0407] Step 3:
[0408] The server captures the user's gaze and facial expressions using a camera and analyzes their emotional state via an emotion recognition engine. The input in this process is video data from the camera, and the output is information about the user's emotional state.
[0409] Step 4:
[0410] The server uses emotional state information to customize the code of the generated web page. Here, the input is emotional state data and generated code, and the output is customized HTML, CSS, and JavaScript code. The design, layout, and color scheme are adjusted to match the user's emotions.
[0411] Step 5:
[0412] The server sends a customized code to the user's device, and the information is displayed on a screen in the physical store environment. In this process, the code is entered into the device and output as a display. Users can visually experience personalized information that responds to their emotions.
[0413] 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 user input for the result of the specific processing. The control unit 46A transmits the audio data indicating user input acquired by the microphone 238 to the data processing unit 12. In the data processing unit 12, the specific processing unit 290 acquires the audio data.
[0414] Data generation model 58 is a type of so-called generative AI (Artificial Intelligence). One example of data generation model 58 is ChatGPT (Internet search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search) <url: https: gemini.google.com ?hl="ja">Examples of generative AI include the following. The data generation model 58 is obtained by performing deep learning on a neural network. The data generation model 58 is input with prompts containing instructions, and with inference data such as audio data representing speech, text data representing text, and image data representing images. The data generation model 58 infers from the input inference data according to the instructions indicated by the prompts, and outputs the inference results in data formats such as audio data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.
[0415] In the above embodiment, an example was given in which specific processing is performed by the data processing device 12, but the technology of this disclosure is not limited thereto, and the specific processing may also be performed by the smart glasses 214.
[0416] [Third Embodiment]
[0417] Figure 5 shows an example of the configuration of the data processing system 310 according to the third embodiment.
[0418] As shown in Figure 5, the data processing system 310 includes a data processing device 12 and a headset terminal 314. An example of the data processing device 12 is a server.
[0419] The data processing device 12 comprises a computer 22, a database 24, and a communication interface 26. The computer 22 is an example of a "computer" related to the technology of this disclosure. The computer 22 comprises a processor 28, RAM 30, and storage 32. The processor 28, RAM 30, and storage 32 are connected to a bus 34. The database 24 and the communication interface 26 are also connected to the bus 34. The communication interface 26 is connected to a network 54. An example of the network 54 is a WAN (Wide Area Network) and / or a LAN (Local Area Network).
[0420] The headset terminal 314 includes a computer 36, a microphone 238, a speaker 240, a camera 42, a communication interface 44, and a display 343. The computer 36 includes a processor 46, RAM 48, and storage 50. The processor 46, RAM 48, and storage 50 are connected to a bus 52. The microphone 238, speaker 240, camera 42, and display 343 are also connected to the bus 52.
[0421] The microphone 238 receives voice signals from the user 20 and receives instructions from the user 20. The microphone 238 captures the voice signals from the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio according to the instructions from the processor 46.
[0422] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an image sensor such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the area around the user 20 (for example, an imaging range defined by a field of view equivalent to the width of a typical healthy person's field of vision).
[0423] Communication interface 44 is connected to network 54. Communication interfaces 44 and 26 are responsible for the exchange of various information between processor 46 and processor 28 via network 54. The exchange of various information between processor 46 and processor 28 using communication interfaces 44 and 26 is performed in a secure manner.
[0424] Figure 6 shows an example of the main functions of the data processing device 12 and the headset terminal 314. As shown in Figure 6, the data processing device 12 performs specific processing using the processor 28. The storage 32 stores the specific processing program 56.
[0425] The specific processing program 56 is an example of a "program" relating to the technology of this 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.
[0426] The storage 32 stores the data generation model 58 and the emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.
[0427] In the headset terminal 314, the processor 46 performs the reception output processing. The storage 50 stores the reception output program 60. 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 processing is realized by the processor 46 operating as a control unit 46A according to the reception output program 60 executed on the RAM 48.
[0428] Next, the specific processing performed by the specific processing unit 290 of the data processing device 12 will be described. In the following description, the data processing device 12 will be referred to as the "server" and the headset terminal 314 will be referred to as the "terminal".
[0429] This invention relates to a system that automatically generates web pages based on designs created with presentation software. This system primarily functions through the collaboration of three parties: a server, a terminal, and a user. The specific operations of each party are described below.
[0430] Users first design the web page using presentation software. This design includes text, images, shapes, colors, and font styles. Once the design is complete, users save it in a recommended electronic file format and upload the file through the system's submission interface.
[0431] The terminal receives electronic files uploaded by the user. While sending these files to the server, the terminal performs appropriate auxiliary processing if file format conversion is required. The user interface provided by the terminal notifies the user of the progress and completion of the file upload.
[0432] The server receives the design file sent from the terminal and analyzes its contents using analysis tools. The analysis identifies the elements of each slide and extracts text, shapes, and images as constituent elements. Next, the server uses generation tools to automatically generate HTML, CSS, and JavaScript code based on the analyzed design information. This allows the user-specified design to be reproduced as a web page.
[0433] To give a concrete example, if a user creates a slide with the title "Company Overview," the server will use the title text. <h1>Define it as a tag and specify the style information with CSS. Also, the image files placed in the slide are It is embedded within HTML code using tags, and its necessary styling is adjusted using CSS.
[0434] Finally, the server returns the generated code to the terminal. The user opens the code in a browser and confirms that the design is displayed as intended. As a result, professional web pages can be created without specialized programming knowledge.
[0435] The following describes the processing flow.
[0436] Step 1:
[0437] Users create web page designs using presentation software and save them in electronic file format.
[0438] Step 2:
[0439] Users upload the created electronic files to their terminals using the system's submission interface.
[0440] Step 3:
[0441] The terminal receives the uploaded file, converts the file format if necessary, and sends the file to the server.
[0442] Step 4:
[0443] The server analyzes the files sent from the terminal using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0444] Step 5:
[0445] The server automatically generates HTML, CSS, and JavaScript program code using a generation method based on the analysis results.
[0446] Step 6:
[0447] The server packages the generated code, returns it to the terminal, and sends it back.
[0448] Step 7:
[0449] The terminal displays a code received from the server to the user and provides a download link.
[0450] Step 8:
[0451] The user runs the generated code in their browser and verifies that the webpage is displayed as designed.
[0452] (Example 1)
[0453] Next, we will describe Example 1. 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."
[0454] In today's information society, quickly and easily realizing individual designs as web pages is crucial, but many people lack specialized programming knowledge, making this process difficult. Furthermore, manual coding is time-consuming, laborious, and inefficient. To solve this, a system is needed that can generate designs as web pages simply and efficiently.
[0455] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 1 is realized by the following means.
[0456] In this invention, the server includes means for creating an information display configuration using an information creation device, means for analyzing transmitted design data and automatically generating markup language and stylesheets, and means for identifying visual elements using optical character recognition technology and generating appropriate program code. This makes it possible for users without specialized coding knowledge to efficiently and automatically generate professional web pages.
[0457] "Information creation device" refers to software or hardware used to design presentations and configurations.
[0458] "Electronic data" refers to information files stored in a format that can be processed by a computer.
[0459] A "data exchange device for submission" refers to a device or system for sending data from a user to a server.
[0460] A "markup language" refers to a language used to describe the structure and meaning of a document, such as HTML.
[0461] A "stylesheet" refers to languages such as CSS used to manage the layout and appearance of web pages.
[0462] "Optical character recognition technology" refers to the technology that identifies and extracts text information from images or scanned documents.
[0463] "Visual elements" refer to the constituent elements such as text, images, and shapes that are displayed on a web page.
[0464] "Program code" refers to the descriptions of HTML, CSS, JavaScript, and other elements used to construct web pages.
[0465] A "computer system" refers to a collection of hardware and software configured to input, process, and output information.
[0466] This invention is a system that automatically generates web pages based on designs created with presentation software. This system is primarily built through the collaboration of a server, terminals, and users.
[0467] First, the user constructs the web page design using software intended as an information creation device, such as presentation software. This design includes text, images, shapes, colors, font styles, etc. Once the design is complete, the user saves this configuration as electronic data in a recommended data format, such as PDF. Then, they upload the design data via a submission data exchange device.
[0468] The terminal receives electronic data uploaded by the user. The terminal performs preprocessing, such as format conversion, as needed. This includes, for example, converting a specific image format to a general-purpose image format. The terminal also provides an interface to notify the user of the upload progress.
[0469] The server analyzes the design data received from the terminal. Using specialized analysis software, the content is broken down into visual elements, and text, shapes, and images are identified as appropriate. Optical character recognition technology is used in this analysis, and text contained within images can also be extracted. Subsequently, a generative AI model is used to automatically generate markup language, stylesheets, and scripts as needed, based on the analyzed design information. This enables a consistent representation as a web page.
[0470] For example, if a user designs a slide for "Company Overview," the server will process that text.< / h1> <h1>Wrap it with tags and define the style with CSS. Also, the company logos and graphs on the slides are Tags and <svg>It is incorporated using tags and adjusted with CSS, including any necessary styling settings.
[0471] Finally, the server sends the generated code back to the terminal. The user receives this code via the terminal and checks the rendering in a web browser. This makes it possible for users to easily create professional web pages without requiring specialized programming skills.
[0472] An example of a prompt might be: "Automatically generate a website based on a company introduction slide design created using presentation software. The slides should include a company overview, product information, and contact details."
[0473] The flow of the specific processing in Example 1 will be explained using Figure 11.
[0474] Step 1:
[0475] The user creates a web page design using presentation software. This design includes text, images, shapes, colors, and font styles. As input, the user creates the design in slide format, and as output, saves this design as electronic data such as PDF.
[0476] Step 2:
[0477] Users upload saved electronic data via the system's data exchange device for submission. The input is electronic data, and the output is data sent to the terminal. Specifically, the user clicks the upload button and transfers the selected files to the system.
[0478] Step 3:
[0479] The terminal receives electronic data from the user. Input is data from the user, and output is data ready for transfer to the server. Specific actions performed by the terminal include data format verification and, if necessary, format conversion. It also sends a notification to the user upon completion of the upload.
[0480] Step 4:
[0481] The server receives electronic data sent from the terminal and begins analysis. The input is data from the terminal, and the output is data classified by visual element. Specifically, the server uses optical character recognition technology to extract text from the image and identifies each element from the presentation software.
[0482] Step 5:
[0483] The server uses a generative AI model based on the analyzed information to generate markup language and stylesheets. The input is the analyzed design information, and the output is HTML, CSS, and JavaScript code. Specifically, the server operates based on the analysis results. <h1>Tags and Generate code that includes tags, and add necessary interactive elements using JavaScript.
[0484] Step 6:
[0485] The server sends the generated code back to the terminal. The input is the generated web code, and the output is the status indicating that the transmission to the terminal is complete. Specifically, the server performs the code transfer and logs the result.
[0486] Step 7:
[0487] The user verifies the code received from the server via their terminal and displays it in a web browser. The input is the code from the server, and the output is the completed web page displayed in the browser. The user visually verifies that each section is displayed and functions correctly.
[0488] (Application Example 1)
[0489] Next, we will explain Application Example 1. In the following explanation, 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."
[0490] When operating a store online, users without specialized programming knowledge face the challenge of easily designing visual layouts in real time and quickly publishing those designs online. To solve this problem, a system is needed that possesses both an intuitive design interface and automatic web page generation capabilities.
[0491] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 1 is realized by the following means.
[0492] In this invention, the server includes means for creating information display designs using presentation creation means, means for saving them as electronic data and uploading them via a submission interface, processing means for analyzing the design data and automatically generating HTML, CSS, and JavaScript code, and means for designing store simulations in real time using a smart device and immediately publishing them online. This enables users to efficiently and quickly publish professional web pages.
[0493] A "presentation creation tool" is a tool for easily creating information display designs, enabling users to visually design the layout.
[0494] "Electronic data" refers to a collection of information stored in a format that can be read by a computer, and includes digital data such as designs and text.
[0495] The "submission interface" is an interface for users to upload their designs to the system, and it acts as an intermediate device to facilitate smooth data transfer.
[0496] "Analysis" is the process of breaking down design data and identifying each component, preparing the data to generate program code from the design.
[0497] A "smart device" refers to a mobile device with internet connectivity that allows users to operate and design in real time.
[0498] "Real-time" refers to processing and data transmission occurring instantly without delay, and possessing the property of responding to user operations instantaneously.
[0499] "Store simulation" refers to the creation of designs aimed at virtually reproducing product placement and store layout, and is a means of supporting store operations in a virtual space.
[0500] "Instant online publication" refers to the immediate public release of designed information via the internet, making user-created content readily available on the web.
[0501] The system for implementing this invention primarily functions through the collaboration of three parties: a server, a terminal, and a user. The user can design store layouts using presentation software on a smart device. This design includes product images, descriptions, and pricing information. Once the design is complete, the user saves it as electronic data and uploads it to the system via a submission interface.
[0502] The terminal receives the design data uploaded by the user, converts the data format as needed, and then sends it to the server. During this process, the terminal notifies the user of the upload status, allowing them to confirm that the data has been sent correctly.
[0503] The server receives design data sent from the terminal. The server uses a powerful analysis engine to analyze the data, identifying and extracting each component. This analysis reveals elements such as text, images, and shapes, and automatically generates corresponding HTML, CSS, and JavaScript code. The generated code is previewed in real time on smart devices and terminals.
[0504] As a concrete example, let's say a user designs a virtual store for a new T-shirt collection. The user designs a layout of the products on their smartphone, and that design is immediately analyzed by a server and converted into a webpage where the T-shirts are actually displayed online. An example of a prompt to input into the generating AI model would be, "Please tell me how to create a virtual store design for a new T-shirt collection using a smartphone app and automatically generate a webpage based on that design." Through this procedure, the user can quickly build a professional online shop without any specialized knowledge.
[0505] The flow of a specific process in Application Example 1 will be explained using Figure 12.
[0506] Step 1:
[0507] Users design store layouts using presentation software on their smart devices. They input visual elements such as product images, descriptions, and pricing information. Once the design is complete, this information is saved as electronic data. The output is electronic data that reflects the user's design intent.
[0508] Step 2:
[0509] Users upload saved design data to the system via a submission interface. This interface receives the design data, checks its integrity, and converts the data format if necessary. As output, it generates a formatted upload file.
[0510] Step 3:
[0511] The terminal verifies the uploaded design data and sends it to the server. The terminal notifies the user of the data transfer status and confirms that the upload was successful. The input is the formatted design data, and the output is the data sent to the server.
[0512] Step 4:
[0513] The server receives design data from the terminal. Using a powerful analysis engine, the server analyzes the data in detail, identifying text and images and extracting constituent elements. This analysis automatically generates appropriate HTML, CSS, and JavaScript code from the input design data to form a web page. The output is the completed program code.
[0514] Step 5:
[0515] The server sends the generated code back to the terminal. The returned code is previewed on the user's smart device or terminal. The input is the generated program code, and the output is a previewable web page display.
[0516] Step 6:
[0517] Users verify that the design is correctly reflected through the provided preview and make corrections as needed. After final confirmation, it can be immediately published online. This step includes user quality assurance verification. The output is a publishable web page.
[0518] Furthermore, an emotion engine that estimates the user's emotions may be incorporated. That is, the identification processing unit 290 may use the emotion identification model 59 to estimate the user's emotions and perform identification processing using the user's emotions.
[0519] This invention achieves more personalized designs by incorporating an emotion engine that recognizes user emotions into an automated web page generation system based on designs created with presentation software. This system primarily functions through the collaborative efforts of three parties: the server, the terminal, and the user.
[0520] First, the user creates the layout and design of the web page using presentation software. This design is saved as an electronic file and uploaded to the system through a submission interface. Here, the terminal receives the file and sends it to the server.
[0521] The server incorporates analysis tools and an emotion engine. It analyzes received files and infers the user's emotions from user input and recorded interactions. The analysis tools identify each element within the file and automatically generate HTML, CSS, and JavaScript code based on that information. Meanwhile, the emotion engine customizes the color scheme and layout based on the user's emotional information.
[0522] For example, suppose a user uploads a presentation with a calm color scheme, and the emotion engine recognizes the user's current emotional state as "relaxed." The server then adjusts the generated webpage to match the user's emotion by adding warmer background colors, adopting rounded button styles, and so on. As a result, a webpage that visually reflects the user's emotional state is generated, providing a more intuitive and engaging user experience.
[0523] Finally, the server returns the adjusted code to the terminal, and the user checks the result through their browser. A major feature of this invention is that personalization using an emotion engine makes it easy to create a design that is optimal for each individual user.
[0524] The following describes the processing flow.
[0525] Step 1:
[0526] Users create web page designs using presentation software. These designs include elements such as layout, text, images, and colors.
[0527] Step 2:
[0528] Users save their created designs as electronic files and upload them to their devices via a submission interface.
[0529] Step 3:
[0530] The terminal receives files uploaded by the user and sends those files to the server.
[0531] Step 4:
[0532] The server analyzes the file using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0533] Step 5:
[0534] The server's emotion engine infers the user's emotional state based on the user's past interaction data and current input data.
[0535] Step 6:
[0536] The server generates HTML, CSS, and JavaScript code based on the analyzed design information and inferred sentiment information, customizing the layout and color scheme to match the sentiment.
[0537] Step 7:
[0538] The server packages the generated code and sends it to the terminal.
[0539] Step 8:
[0540] The terminal displays a code sent from the server to the user and provides a download link.
[0541] Step 9:
[0542] The user executes the code generated through their browser and confirms that a customized webpage tailored to their emotions is displayed.
[0543] (Example 2)
[0544] Next, we will describe Example 2. 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."
[0545] Traditional web page generation systems struggle to personalize designs that take user emotions into account, resulting in a lack of a truly intuitive user experience. Furthermore, the process of generating code from presentation designs is cumbersome, making it difficult to quickly provide user-optimized designs.
[0546] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 2 is realized by the following means.
[0547] In this invention, the server includes means for creating display information designs using application tools for creating graphic designs for information display, customization means for analyzing emotional states and optimizing the color scheme and placement of code based on those states, and means for analyzing visual information in design data and displaying the information in a network page format. This enables the rapid generation of personalized web page designs that respond to the user's emotions, thereby improving the user experience.
[0548] "Graphic design for information display" refers to a design layout that includes visual components created on a computer, and is intended to organize and clearly communicate visual information.
[0549] An "application tool" is a software program used to perform a specific function or purpose, providing an environment in which users can create and edit digital content.
[0550] A "digital format" is a form in which information is electronically represented in a way that a computer can recognize, making interaction and processing easy.
[0551] A "transmission interface" is a means of transferring digital data, providing a point of contact for sending and receiving data between different computer systems.
[0552] A "system" is a whole composed of different elements or components working together to provide a specific function or service.
[0553] "Standard Markup Language Code" is a language used to describe the structure and content of web pages, defining the logical organization of information.
[0554] "Stylesheet code" refers to code used to control the display and layout of a web page, providing rules for managing the appearance of elements.
[0555] "Script code" refers to program code used to automate various operations and actions on a computer, and it has the function of dynamically generating content.
[0556] A "personal device" refers to an electronic device used by individual users to input or receive information, and includes mobile phones, computers, and other similar devices.
[0557] "Network Page Format" refers to pages where information is organized in a way that makes it accessible on the internet, and which are viewed through a web browser.
[0558] "Emotion inference methods" refer to technologies or methods that determine a user's emotional state based on user input information and past data, and may sometimes utilize AI.
[0559] "Optimization customization methods" refer to methods for adjusting a system or design configuration according to specific purposes or conditions to achieve the most effective state.
[0560] This invention is a system that enables users to generate visually and emotionally personalized web pages. This system essentially functions by combining the user's terminal, a server, and sentiment analysis technology.
[0561] First, the user creates a graphic design for information display using an application tool. This tool is a commonly used software application (e.g., presentation software) that can save the design elements in digital format. The saved file is uploaded to the system via a transmission interface.
[0562] The terminal's role is to receive design files sent by the user and transfer them to the server. These files contain visual information and are ready for analysis.
[0563] The server incorporates analysis and sentiment prediction tools. The analysis tool examines the received design file and extracts the information necessary to generate standard markup language code (HTML), stylesheet code (CSS), and script code (JavaScript). The sentiment prediction tool uses a generative AI model to predict the user's emotional state and adjusts the design's color scheme and layout based on that information.
[0564] For example, if a user uploads a design that evokes a calming impression, the server might use a generative AI model to recognize the emotional state as "relaxed." Based on this, customizations such as a warm-toned background and rounded buttons might be implemented. In this example, the prompt could be: "Automatically generate a webpage from the user's uploaded presentation, adjusting the design to reflect the user's emotions."
[0565] Finally, the adjusted webpage code is sent to the device and viewed by the user through their browser. Personalized design that responds to emotions makes the user experience more intuitive and engaging.
[0566] The flow of the specific processing in Example 2 will be explained using Figure 13.
[0567] Step 1:
[0568] Users create graphic designs for information display using application tools. The input is the layout and design created by the user, and the output is a file that saves this design in digital format. Specifically, the user places text boxes, images, shapes, etc. in presentation software and exports it in PDF or PPTX format.
[0569] Step 2:
[0570] The terminal receives design files saved by the user and transfers them to the server. The input is a digital design file, and the output is the operation of sending that file to the server. Specifically, the file is uploaded via the user interface and securely transferred to the server over the network.
[0571] Step 3:
[0572] The server receives the transmitted file and extracts visual information using analysis tools. The input is a design file, and the output is the extracted layout, text, and image data. Specifically, it uses Python scripts and OCR technology to analyze the internal structure of the file and extract the necessary information.
[0573] Step 4:
[0574] The server generates standard markup language code, stylesheet code, and script code based on visual information. The input is extracted data, and the output is a set of code. Specifically, it uses a template engine to automatically generate HTML tags and CSS styles, and incorporates interactive elements using JavaScript.
[0575] Step 5:
[0576] The server has an emotion prediction system that uses a generative AI model to predict the user's emotional state. Based on this emotion information, it customizes the design code. The input consists of visual information and past user data, and the output is customized code corresponding to the emotion. Specifically, it runs an emotion analysis algorithm to modify elements such as color scheme and layout.
[0577] Step 6:
[0578] The server sends the generated customized code to the terminal. The input is the final design code, and the output is what is sent to the terminal. Specifically, the code is sent using a secure communication protocol, allowing the user to view the results in their browser.
[0579] Step 7:
[0580] The user reviews the received webpage through their browser and verifies its display. The input is the webpage code provided by the server, and the output is a visualized webpage. Specifically, the user checks the page's content and usability and provides feedback as needed.
[0581] (Application Example 2)
[0582] Next, we will explain application example 2. In the following explanation, 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."
[0583] Conventional information display systems have a problem in that they cannot provide personalized information based on the user's emotions. In particular, in the customer experience at physical stores, there is a need to provide appropriate information that is tailored to each customer's emotions and preferences. However, existing technologies have limitations in customizing for individual customers, making it difficult to improve customer satisfaction.
[0584] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means.
[0585] In this invention, the server includes means for creating an information display design using presentation creation means, means for recognizing the user's emotional state and customizing a code generated based on the emotional information, and means for sending a code adapted to the generated emotion to the user and displaying the information in web page format. This makes it possible to present personalized information adapted to the customer's emotions in a physical store.
[0586] "Presentation creation means" refers to software or equipment used to create designs for displaying information.
[0587] An "electronic file" is a file that stores data in a digital format and can be manipulated on a computer.
[0588] The "submission interface" is part of a system that provides a point of contact for users to upload design files.
[0589] "Analysis means" refers to a device or software for interpreting the content of a design and converting it into the required format.
[0590] "Emotional state" refers to information that indicates the user's psychological or emotional state.
[0591] "Means of customization" refers to functions that allow for the adjustment, modification, or optimization of information and functions according to specific conditions.
[0592] A "web page format" is a format for displaying information on the internet, and it is written using HTML, CSS, and JavaScript.
[0593] A "physical store" is a retail environment that exists in a physical location and provides goods or services.
[0594] The server receives information display designs created by users using presentation creation tools. These designs are saved as electronic files and uploaded through a submission interface. The server analyzes the uploaded design files and automatically generates HTML, CSS, and JavaScript code. This process utilizes a technology that identifies visual elements within the file using analysis tools. Image recognition technology is used as the analysis technique.
[0595] Furthermore, the server incorporates an emotion recognition engine that recognizes the user's emotional state, allowing it to infer emotions from the user's gaze and facial expressions. Based on this emotional information, the generated web page code is customized. Specifically, the design, layout, and color scheme of the web page are changed according to the user's current emotions, personalizing the visual elements.
[0596] The terminal receives a coordinated code from the server and displays the information via a screen in the physical store environment. This allows users to experience information displayed in a way that matches their emotional state, resulting in a more engaging and intuitive user experience.
[0597] For example, if a user is wearing smart glasses in a physical store, the glasses' camera captures their facial expressions and sends them to a server. The server analyzes the emotions and displays the generated code on the store's screen, showing information and recommendations about new products that align with the user's emotions.
[0598] Examples of prompt statements to input into the generative AI model are as follows:
[0599] Optimize the product introduction videos displayed on in-store screens to suit a customer's relaxed state. Choose colors and music that promote relaxation.
[0600] The flow of a specific process in Application Example 2 will be explained using Figure 14.
[0601] Step 1:
[0602] Users create information display designs using presentation software and save them as electronic files. These files are then uploaded to the server via a submission interface. The input is the design file, and the output is the electronic file sent to the server.
[0603] Step 2:
[0604] The server receives uploaded design files and analyzes their content using analytical tools. The input is an electronic file, and the output is data converted into HTML, CSS, and JavaScript code. This analysis process uses image recognition technology to identify visual elements and automatically generates corresponding web program code.
[0605] Step 3:
[0606] The server captures the user's gaze and facial expressions using a camera and analyzes their emotional state via an emotion recognition engine. The input in this process is video data from the camera, and the output is information about the user's emotional state.
[0607] Step 4:
[0608] The server uses emotional state information to customize the code of the generated web page. Here, the input is emotional state data and generated code, and the output is customized HTML, CSS, and JavaScript code. The design, layout, and color scheme are adjusted to match the user's emotions.
[0609] Step 5:
[0610] The server sends a customized code to the user's device, and the information is displayed on a screen in the physical store environment. In this process, the code is entered into the device and output as a display. Users can visually experience personalized information that responds to their emotions.
[0611] The specific processing unit 290 transmits the result of the specific processing to the headset terminal 314. In the headset terminal 314, the control unit 46A causes the speaker 240 and display 343 to output the result of the specific processing. The microphone 238 acquires audio indicating user input for the result of the specific processing. The control unit 46A transmits the audio data indicating user input acquired by the microphone 238 to the data processing unit 12. In the data processing unit 12, the specific processing unit 290 acquires the audio data.
[0612] Data generation model 58 is a type of so-called generative AI (Artificial Intelligence). One example of data generation model 58 is ChatGPT (Internet search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search) <url: https: gemini.google.com ?hl="ja">Examples of generative AI include the following. The data generation model 58 is obtained by performing deep learning on a neural network. The data generation model 58 is input with prompts containing instructions, and with inference data such as audio data representing speech, text data representing text, and image data representing images. The data generation model 58 infers from the input inference data according to the instructions indicated by the prompts, and outputs the inference results in data formats such as audio data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.
[0613] In the above embodiment, an example was given in which specific processing is performed by the data processing device 12, but the technology of this disclosure is not limited thereto, and specific processing may also be performed by the headset terminal 314.
[0614] [Fourth Embodiment]
[0615] Figure 7 shows an example of the configuration of the data processing system 410 according to the fourth embodiment.
[0616] As shown in Figure 7, the 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.
[0617] The data processing device 12 comprises a computer 22, a database 24, and a communication interface 26. The computer 22 is an example of a "computer" related to the technology of this disclosure. The computer 22 comprises a processor 28, RAM 30, and storage 32. The processor 28, RAM 30, and storage 32 are connected to a bus 34. The database 24 and the communication interface 26 are also connected to the bus 34. The communication interface 26 is connected to a network 54. An example of the network 54 is a WAN (Wide Area Network) and / or a LAN (Local Area Network).
[0618] The robot 414 includes a computer 36, a microphone 238, a speaker 240, a camera 42, a communication interface 44, and a controlled object 443. The computer 36 includes a processor 46, RAM 48, and storage 50. The processor 46, RAM 48, and storage 50 are connected to a bus 52. The microphone 238, speaker 240, camera 42, and controlled object 443 are also connected to the bus 52.
[0619] The microphone 238 receives voice signals from the user 20 and receives instructions from the user 20. The microphone 238 captures the voice signals from the user 20, converts the captured voice into audio data, and outputs it to the processor 46. The speaker 240 outputs audio according to the instructions from the processor 46.
[0620] Camera 42 is a small digital camera equipped with an optical system including a lens, aperture, and shutter, and an image sensor such as a CMOS (Complementary Metal-Oxide-Semiconductor) image sensor or a CCD (Charge Coupled Device) image sensor, and captures images of the area around the user 20 (for example, an imaging range defined by a field of view equivalent to the width of a typical healthy person's field of vision).
[0621] Communication interface 44 is connected to network 54. Communication interfaces 44 and 26 are responsible for the exchange of various information between processor 46 and processor 28 via network 54. The exchange of various information between processor 46 and processor 28 using communication interfaces 44 and 26 is performed in a secure manner.
[0622] The controlled object 443 includes a display device, LEDs in the eyes, and motors that drive 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 robot 414's emotions can be expressed by controlling these motors. Furthermore, the robot 414's facial expressions can also be expressed by controlling the illumination state of the LEDs in its eyes.
[0623] Figure 8 shows an example of the main functions of the data processing device 12 and the robot 414. As shown in Figure 8, the data processing device 12 performs specific processing using the processor 28. The storage 32 stores the specific processing program 56.
[0624] The specific processing program 56 is an example of a "program" relating to the technology of this 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.
[0625] The storage 32 stores the data generation model 58 and the emotion identification model 59. The data generation model 58 and the emotion identification model 59 are used by the identification processing unit 290.
[0626] In robot 414, the processor 46 performs the reception output processing. The storage 50 stores the reception output program 60. 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 processing is realized by the processor 46 operating as a control unit 46A according to the reception output program 60 executed on the RAM 48.
[0627] Next, the specific processing performed by the specific processing unit 290 of the data processing device 12 will be described. In the following description, the data processing device 12 will be referred to as the "server" and the robot 414 as the "terminal".
[0628] This invention relates to a system that automatically generates web pages based on designs created with presentation software. This system primarily functions through the collaboration of three parties: a server, a terminal, and a user. The specific operations of each party are described below.
[0629] Users first design the web page using presentation software. This design includes text, images, shapes, colors, and font styles. Once the design is complete, users save it in a recommended electronic file format and upload the file through the system's submission interface.
[0630] The terminal receives electronic files uploaded by the user. While sending these files to the server, the terminal performs appropriate auxiliary processing if file format conversion is required. The user interface provided by the terminal notifies the user of the progress and completion of the file upload.
[0631] The server receives the design file sent from the terminal and analyzes its contents using analysis tools. The analysis identifies the elements of each slide and extracts text, shapes, and images as constituent elements. Next, the server uses generation tools to automatically generate HTML, CSS, and JavaScript code based on the analyzed design information. This allows the user-specified design to be reproduced as a web page.
[0632] To give a concrete example, if a user creates a slide with the title "Company Overview," the server will use the title text. <h1>Define it as a tag and specify the style information with CSS. Also, the image files placed in the slide are It is embedded within HTML code using tags, and its necessary styling is adjusted using CSS.
[0633] Finally, the server returns the generated code to the terminal. The user opens the code in a browser and confirms that the design is displayed as intended. As a result, professional web pages can be created without specialized programming knowledge.
[0634] The following describes the processing flow.
[0635] Step 1:
[0636] Users create web page designs using presentation software and save them in electronic file format.
[0637] Step 2:
[0638] Users upload the created electronic files to their terminals using the system's submission interface.
[0639] Step 3:
[0640] The terminal receives the uploaded file, converts the file format if necessary, and sends the file to the server.
[0641] Step 4:
[0642] The server analyzes the files sent from the terminal using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0643] Step 5:
[0644] The server automatically generates HTML, CSS, and JavaScript program code using a generation method based on the analysis results.
[0645] Step 6:
[0646] The server packages the generated code, returns it to the terminal, and sends it back.
[0647] Step 7:
[0648] The terminal displays a code received from the server to the user and provides a download link.
[0649] Step 8:
[0650] The user runs the generated code in their browser and verifies that the webpage is displayed as designed.
[0651] (Example 1)
[0652] Next, we will describe Example 1. In the following description, the data processing device 12 will be referred to as the "server" and the robot 414 as the "terminal".
[0653] In today's information society, quickly and easily realizing individual designs as web pages is crucial, but many people lack specialized programming knowledge, making this process difficult. Furthermore, manual coding is time-consuming, laborious, and inefficient. To solve this, a system is needed that can generate designs as web pages simply and efficiently.
[0654] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 1 is realized by the following means.
[0655] In this invention, the server includes means for creating an information display configuration using an information creation device, means for analyzing transmitted design data and automatically generating markup language and stylesheets, and means for identifying visual elements using optical character recognition technology and generating appropriate program code. This makes it possible for users without specialized coding knowledge to efficiently and automatically generate professional web pages.
[0656] "Information creation device" refers to software or hardware used to design presentations and configurations.
[0657] "Electronic data" refers to information files stored in a format that can be processed by a computer.
[0658] A "data exchange device for submission" refers to a device or system for sending data from a user to a server.
[0659] A "markup language" refers to a language used to describe the structure and meaning of a document, such as HTML.
[0660] A "stylesheet" refers to languages such as CSS used to manage the layout and appearance of web pages.
[0661] "Optical character recognition technology" refers to the technology that identifies and extracts text information from images or scanned documents.
[0662] "Visual elements" refer to the constituent elements such as text, images, and shapes that are displayed on a web page.
[0663] "Program code" refers to the descriptions of HTML, CSS, JavaScript, and other elements used to construct web pages.
[0664] A "computer system" refers to a collection of hardware and software configured to input, process, and output information.
[0665] This invention is a system that automatically generates web pages based on designs created with presentation software. This system is primarily built through the collaboration of a server, terminals, and users.
[0666] First, the user constructs the web page design using software intended as an information creation device, such as presentation software. This design includes text, images, shapes, colors, font styles, etc. Once the design is complete, the user saves this configuration as electronic data in a recommended data format, such as PDF. Then, they upload the design data via a submission data exchange device.
[0667] The terminal receives electronic data uploaded by the user. The terminal performs preprocessing, such as format conversion, as needed. This includes, for example, converting a specific image format to a general-purpose image format. The terminal also provides an interface to notify the user of the upload progress.
[0668] The server analyzes the design data received from the terminal. Using specialized analysis software, the content is broken down into visual elements, and text, shapes, and images are identified as appropriate. Optical character recognition technology is used in this analysis, and text contained within images can also be extracted. Subsequently, a generative AI model is used to automatically generate markup language, stylesheets, and scripts as needed, based on the analyzed design information. This enables a consistent representation as a web page.
[0669] For example, if a user designs a slide for "Company Overview," the server will process that text.< / h1> <h1>Wrap it with tags and define the style with CSS. Also, the company logos and graphs on the slides are Tags and <svg>It is incorporated using tags and adjusted with CSS, including any necessary styling settings.
[0670] Finally, the server sends the generated code back to the terminal. The user receives this code via the terminal and checks the rendering in a web browser. This makes it possible for users to easily create professional web pages without requiring specialized programming skills.
[0671] An example of a prompt might be: "Automatically generate a website based on a company introduction slide design created using presentation software. The slides should include a company overview, product information, and contact details."
[0672] The flow of the specific processing in Example 1 will be explained using Figure 11.
[0673] Step 1:
[0674] The user creates a web page design using presentation software. This design includes text, images, shapes, colors, and font styles. As input, the user creates the design in slide format, and as output, saves this design as electronic data such as PDF.
[0675] Step 2:
[0676] Users upload saved electronic data via the system's data exchange device for submission. The input is electronic data, and the output is data sent to the terminal. Specifically, the user clicks the upload button and transfers the selected files to the system.
[0677] Step 3:
[0678] The terminal receives electronic data from the user. Input is data from the user, and output is data ready for transfer to the server. Specific actions performed by the terminal include data format verification and, if necessary, format conversion. It also sends a notification to the user upon completion of the upload.
[0679] Step 4:
[0680] The server receives electronic data sent from the terminal and begins analysis. The input is data from the terminal, and the output is data classified by visual element. Specifically, the server uses optical character recognition technology to extract text from the image and identifies each element from the presentation software.
[0681] Step 5:
[0682] The server uses a generative AI model based on the analyzed information to generate markup language and stylesheets. The input is the analyzed design information, and the output is HTML, CSS, and JavaScript code. Specifically, the server operates based on the analysis results. <h1>Tags and Generate code that includes tags, and add necessary interactive elements using JavaScript.
[0683] Step 6:
[0684] The server sends the generated code back to the terminal. The input is the generated web code, and the output is the status indicating that the transmission to the terminal is complete. Specifically, the server performs the code transfer and logs the result.
[0685] Step 7:
[0686] The user verifies the code received from the server via their terminal and displays it in a web browser. The input is the code from the server, and the output is the completed web page displayed in the browser. The user visually verifies that each section is displayed and functions correctly.
[0687] (Application Example 1)
[0688] Next, we will explain Application Example 1. In the following explanation, the data processing device 12 will be referred to as the "server" and the robot 414 as the "terminal".
[0689] When operating a store online, users without specialized programming knowledge face the challenge of easily designing visual layouts in real time and quickly publishing those designs online. To solve this problem, a system is needed that possesses both an intuitive design interface and automatic web page generation capabilities.
[0690] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 1 is realized by the following means.
[0691] In this invention, the server includes means for creating information display designs using presentation creation means, means for saving them as electronic data and uploading them via a submission interface, processing means for analyzing the design data and automatically generating HTML, CSS, and JavaScript code, and means for designing store simulations in real time using a smart device and immediately publishing them online. This enables users to efficiently and quickly publish professional web pages.
[0692] A "presentation creation tool" is a tool for easily creating information display designs, enabling users to visually design the layout.
[0693] "Electronic data" refers to a collection of information stored in a format that can be read by a computer, and includes digital data such as designs and text.
[0694] The "submission interface" is an interface for users to upload their designs to the system, and it acts as an intermediate device to facilitate smooth data transfer.
[0695] "Analysis" is the process of breaking down design data and identifying each component, preparing the data to generate program code from the design.
[0696] A "smart device" refers to a mobile device with internet connectivity that allows users to operate and design in real time.
[0697] "Real-time" refers to processing and data transmission occurring instantly without delay, and possessing the property of responding to user operations instantaneously.
[0698] "Store simulation" refers to the creation of designs aimed at virtually reproducing product placement and store layout, and is a means of supporting store operations in a virtual space.
[0699] "Instant online publication" refers to the immediate public release of designed information via the internet, making user-created content readily available on the web.
[0700] The system for implementing this invention primarily functions through the collaboration of three parties: a server, a terminal, and a user. The user can design store layouts using presentation software on a smart device. This design includes product images, descriptions, and pricing information. Once the design is complete, the user saves it as electronic data and uploads it to the system via a submission interface.
[0701] The terminal receives the design data uploaded by the user, converts the data format as needed, and then sends it to the server. During this process, the terminal notifies the user of the upload status, allowing them to confirm that the data has been sent correctly.
[0702] The server receives design data sent from the terminal. The server uses a powerful analysis engine to analyze the data, identifying and extracting each component. This analysis reveals elements such as text, images, and shapes, and automatically generates corresponding HTML, CSS, and JavaScript code. The generated code is previewed in real time on smart devices and terminals.
[0703] As a concrete example, let's say a user designs a virtual store for a new T-shirt collection. The user designs a layout of the products on their smartphone, and that design is immediately analyzed by a server and converted into a webpage where the T-shirts are actually displayed online. An example of a prompt to input into the generating AI model would be, "Please tell me how to create a virtual store design for a new T-shirt collection using a smartphone app and automatically generate a webpage based on that design." Through this procedure, the user can quickly build a professional online shop without any specialized knowledge.
[0704] The flow of a specific process in Application Example 1 will be explained using Figure 12.
[0705] Step 1:
[0706] Users design store layouts using presentation software on their smart devices. They input visual elements such as product images, descriptions, and pricing information. Once the design is complete, this information is saved as electronic data. The output is electronic data that reflects the user's design intent.
[0707] Step 2:
[0708] Users upload saved design data to the system via a submission interface. This interface receives the design data, checks its integrity, and converts the data format if necessary. As output, it generates a formatted upload file.
[0709] Step 3:
[0710] The terminal verifies the uploaded design data and sends it to the server. The terminal notifies the user of the data transfer status and confirms that the upload was successful. The input is the formatted design data, and the output is the data sent to the server.
[0711] Step 4:
[0712] The server receives design data from the terminal. Using a powerful analysis engine, the server analyzes the data in detail, identifying text and images and extracting constituent elements. This analysis automatically generates appropriate HTML, CSS, and JavaScript code from the input design data to form a web page. The output is the completed program code.
[0713] Step 5:
[0714] The server sends the generated code back to the terminal. The returned code is previewed on the user's smart device or terminal. The input is the generated program code, and the output is a previewable web page display.
[0715] Step 6:
[0716] Users verify that the design is correctly reflected through the provided preview and make corrections as needed. After final confirmation, it can be immediately published online. This step includes user quality assurance verification. The output is a publishable web page.
[0717] Furthermore, an emotion engine that estimates the user's emotions may be incorporated. That is, the identification processing unit 290 may use the emotion identification model 59 to estimate the user's emotions and perform identification processing using the user's emotions.
[0718] This invention achieves more personalized designs by incorporating an emotion engine that recognizes user emotions into an automated web page generation system based on designs created with presentation software. This system primarily functions through the collaborative efforts of three parties: the server, the terminal, and the user.
[0719] First, the user creates the layout and design of the web page using presentation software. This design is saved as an electronic file and uploaded to the system through a submission interface. Here, the terminal receives the file and sends it to the server.
[0720] The server incorporates analysis tools and an emotion engine. It analyzes received files and infers the user's emotions from user input and recorded interactions. The analysis tools identify each element within the file and automatically generate HTML, CSS, and JavaScript code based on that information. Meanwhile, the emotion engine customizes the color scheme and layout based on the user's emotional information.
[0721] For example, suppose a user uploads a presentation with a calm color scheme, and the emotion engine recognizes the user's current emotional state as "relaxed." The server then adjusts the generated webpage to match the user's emotion by adding warmer background colors, adopting rounded button styles, and so on. As a result, a webpage that visually reflects the user's emotional state is generated, providing a more intuitive and engaging user experience.
[0722] Finally, the server returns the adjusted code to the terminal, and the user checks the result through their browser. A major feature of this invention is that personalization using an emotion engine makes it easy to create a design that is optimal for each individual user.
[0723] The following describes the processing flow.
[0724] Step 1:
[0725] Users create web page designs using presentation software. These designs include elements such as layout, text, images, and colors.
[0726] Step 2:
[0727] Users save their created designs as electronic files and upload them to their devices via a submission interface.
[0728] Step 3:
[0729] The terminal receives files uploaded by the user and sends those files to the server.
[0730] Step 4:
[0731] The server analyzes the file using analysis tools and identifies elements such as text, images, and shapes within the slides.
[0732] Step 5:
[0733] The server's emotion engine infers the user's emotional state based on the user's past interaction data and current input data.
[0734] Step 6:
[0735] The server generates HTML, CSS, and JavaScript code based on the analyzed design information and inferred sentiment information, customizing the layout and color scheme to match the sentiment.
[0736] Step 7:
[0737] The server packages the generated code and sends it to the terminal.
[0738] Step 8:
[0739] The terminal displays a code sent from the server to the user and provides a download link.
[0740] Step 9:
[0741] The user executes the code generated through their browser and confirms that a customized webpage tailored to their emotions is displayed.
[0742] (Example 2)
[0743] Next, we will describe Example 2. In the following description, the data processing device 12 will be referred to as the "server" and the robot 414 as the "terminal".
[0744] Traditional web page generation systems struggle to personalize designs that take user emotions into account, resulting in a lack of a truly intuitive user experience. Furthermore, the process of generating code from presentation designs is cumbersome, making it difficult to quickly provide user-optimized designs.
[0745] The identification process performed by the identification processing unit 290 of the data processing device 12 in Example 2 is realized by the following means.
[0746] In this invention, the server includes means for creating display information designs using application tools for creating graphic designs for information display, customization means for analyzing emotional states and optimizing the color scheme and placement of code based on those states, and means for analyzing visual information in design data and displaying the information in a network page format. This enables the rapid generation of personalized web page designs that respond to the user's emotions, thereby improving the user experience.
[0747] "Graphic design for information display" refers to a design layout that includes visual components created on a computer, and is intended to organize and clearly communicate visual information.
[0748] An "application tool" is a software program used to perform a specific function or purpose, providing an environment in which users can create and edit digital content.
[0749] A "digital format" is a form in which information is electronically represented in a way that a computer can recognize, making interaction and processing easy.
[0750] A "transmission interface" is a means of transferring digital data, providing a point of contact for sending and receiving data between different computer systems.
[0751] A "system" is a whole composed of different elements or components working together to provide a specific function or service.
[0752] "Standard Markup Language Code" is a language used to describe the structure and content of web pages, defining the logical organization of information.
[0753] "Stylesheet code" refers to code used to control the display and layout of a web page, providing rules for managing the appearance of elements.
[0754] "Script code" refers to program code used to automate various operations and actions on a computer, and it has the function of dynamically generating content.
[0755] A "personal device" refers to an electronic device used by individual users to input or receive information, and includes mobile phones, computers, and other similar devices.
[0756] "Network Page Format" refers to pages where information is organized in a way that makes it accessible on the internet, and which are viewed through a web browser.
[0757] "Emotion inference methods" refer to technologies or methods that determine a user's emotional state based on user input information and past data, and may sometimes utilize AI.
[0758] "Optimization customization methods" refer to methods for adjusting a system or design configuration according to specific purposes or conditions to achieve the most effective state.
[0759] This invention is a system that enables users to generate visually and emotionally personalized web pages. This system essentially functions by combining the user's terminal, a server, and sentiment analysis technology.
[0760] First, the user creates a graphic design for information display using an application tool. This tool is a commonly used software application (e.g., presentation software) that can save the design elements in digital format. The saved file is uploaded to the system via a transmission interface.
[0761] The terminal's role is to receive design files sent by the user and transfer them to the server. These files contain visual information and are ready for analysis.
[0762] The server incorporates analysis and sentiment prediction tools. The analysis tool examines the received design file and extracts the information necessary to generate standard markup language code (HTML), stylesheet code (CSS), and script code (JavaScript). The sentiment prediction tool uses a generative AI model to predict the user's emotional state and adjusts the design's color scheme and layout based on that information.
[0763] For example, if a user uploads a design that evokes a calming impression, the server might use a generative AI model to recognize the emotional state as "relaxed." Based on this, customizations such as a warm-toned background and rounded buttons might be implemented. In this example, the prompt could be: "Automatically generate a webpage from the user's uploaded presentation, adjusting the design to reflect the user's emotions."
[0764] Finally, the adjusted webpage code is sent to the device and viewed by the user through their browser. Personalized design that responds to emotions makes the user experience more intuitive and engaging.
[0765] The flow of the specific processing in Example 2 will be explained using Figure 13.
[0766] Step 1:
[0767] Users create graphic designs for information display using application tools. The input is the layout and design created by the user, and the output is a file that saves this design in digital format. Specifically, the user places text boxes, images, shapes, etc. in presentation software and exports it in PDF or PPTX format.
[0768] Step 2:
[0769] The terminal receives design files saved by the user and transfers them to the server. The input is a digital design file, and the output is the operation of sending that file to the server. Specifically, the file is uploaded via the user interface and securely transferred to the server over the network.
[0770] Step 3:
[0771] The server receives the transmitted file and extracts visual information using analysis tools. The input is a design file, and the output is the extracted layout, text, and image data. Specifically, it uses Python scripts and OCR technology to analyze the internal structure of the file and extract the necessary information.
[0772] Step 4:
[0773] The server generates standard markup language code, stylesheet code, and script code based on visual information. The input is extracted data, and the output is a set of code. Specifically, it uses a template engine to automatically generate HTML tags and CSS styles, and incorporates interactive elements using JavaScript.
[0774] Step 5:
[0775] The server has an emotion prediction system that uses a generative AI model to predict the user's emotional state. Based on this emotion information, it customizes the design code. The input consists of visual information and past user data, and the output is customized code corresponding to the emotion. Specifically, it runs an emotion analysis algorithm to modify elements such as color scheme and layout.
[0776] Step 6:
[0777] The server sends the generated customized code to the terminal. The input is the final design code, and the output is what is sent to the terminal. Specifically, the code is sent using a secure communication protocol, allowing the user to view the results in their browser.
[0778] Step 7:
[0779] The user reviews the received webpage through their browser and verifies its display. The input is the webpage code provided by the server, and the output is a visualized webpage. Specifically, the user checks the page's content and usability and provides feedback as needed.
[0780] (Application Example 2)
[0781] Next, we will explain application example 2. In the following explanation, the data processing device 12 will be referred to as the "server" and the robot 414 as the "terminal".
[0782] Conventional information display systems have a problem in that they cannot provide personalized information based on the user's emotions. In particular, in the customer experience at physical stores, there is a need to provide appropriate information that is tailored to each customer's emotions and preferences. However, existing technologies have limitations in customizing for individual customers, making it difficult to improve customer satisfaction.
[0783] The specific processing performed by the specific processing unit 290 of the data processing device 12 in Application Example 2 is realized by the following means.
[0784] In this invention, the server includes means for creating an information display design using presentation creation means, means for recognizing the user's emotional state and customizing a code generated based on the emotional information, and means for sending a code adapted to the generated emotion to the user and displaying the information in web page format. This makes it possible to present personalized information adapted to the customer's emotions in a physical store.
[0785] "Presentation creation means" refers to software or equipment used to create designs for displaying information.
[0786] An "electronic file" is a file that stores data in a digital format and can be manipulated on a computer.
[0787] The "submission interface" is part of a system that provides a point of contact for users to upload design files.
[0788] "Analysis means" refers to a device or software for interpreting the content of a design and converting it into the required format.
[0789] "Emotional state" refers to information that indicates the user's psychological or emotional state.
[0790] "Means of customization" refers to functions that allow for the adjustment, modification, or optimization of information and functions according to specific conditions.
[0791] A "web page format" is a format for displaying information on the internet, and it is written using HTML, CSS, and JavaScript.
[0792] A "physical store" is a retail environment that exists in a physical location and provides goods or services.
[0793] The server receives information display designs created by users using presentation creation tools. These designs are saved as electronic files and uploaded through a submission interface. The server analyzes the uploaded design files and automatically generates HTML, CSS, and JavaScript code. This process utilizes a technology that identifies visual elements within the file using analysis tools. Image recognition technology is used as the analysis technique.
[0794] Furthermore, the server incorporates an emotion recognition engine that recognizes the user's emotional state, allowing it to infer emotions from the user's gaze and facial expressions. Based on this emotional information, the generated web page code is customized. Specifically, the design, layout, and color scheme of the web page are changed according to the user's current emotions, personalizing the visual elements.
[0795] The terminal receives a coordinated code from the server and displays the information via a screen in the physical store environment. This allows users to experience information displayed in a way that matches their emotional state, resulting in a more engaging and intuitive user experience.
[0796] For example, if a user is wearing smart glasses in a physical store, the glasses' camera captures their facial expressions and sends them to a server. The server analyzes the emotions and displays the generated code on the store's screen, showing information and recommendations about new products that align with the user's emotions.
[0797] Examples of prompt statements to input into the generative AI model are as follows:
[0798] Optimize the product introduction videos displayed on in-store screens to suit a customer's relaxed state. Choose colors and music that promote relaxation.
[0799] The flow of a specific process in Application Example 2 will be explained using Figure 14.
[0800] Step 1:
[0801] Users create information display designs using presentation software and save them as electronic files. These files are then uploaded to the server via a submission interface. The input is the design file, and the output is the electronic file sent to the server.
[0802] Step 2:
[0803] The server receives uploaded design files and analyzes their content using analytical tools. The input is an electronic file, and the output is data converted into HTML, CSS, and JavaScript code. This analysis process uses image recognition technology to identify visual elements and automatically generates corresponding web program code.
[0804] Step 3:
[0805] The server captures the user's gaze and facial expressions using a camera and analyzes their emotional state via an emotion recognition engine. The input in this process is video data from the camera, and the output is information about the user's emotional state.
[0806] Step 4:
[0807] The server uses emotional state information to customize the code of the generated web page. Here, the input is emotional state data and generated code, and the output is customized HTML, CSS, and JavaScript code. The design, layout, and color scheme are adjusted to match the user's emotions.
[0808] Step 5:
[0809] The server sends a customized code to the user's device, and the information is displayed on a screen in the physical store environment. In this process, the code is entered into the device and output as a display. Users can visually experience personalized information that responds to their emotions.
[0810] 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 controlled object 443 to output the result of the specific processing. The microphone 238 acquires audio indicating user input for the result of the specific processing. The control unit 46A transmits the audio data indicating user input acquired by the microphone 238 to the data processing unit 12. In the data processing unit 12, the specific processing unit 290 acquires the audio data.
[0811] Data generation model 58 is a type of so-called generative AI (Artificial Intelligence). One example of data generation model 58 is ChatGPT (Internet search<URL: https: / / openai.com / blog / chatgpt> ), Gemini (Internet search) <url: https: gemini.google.com ?hl="ja">Examples of generative AI include the following. The data generation model 58 is obtained by performing deep learning on a neural network. The data generation model 58 is input with prompts containing instructions, and with inference data such as audio data representing speech, text data representing text, and image data representing images. The data generation model 58 infers from the input inference data according to the instructions indicated by the prompts, and outputs the inference results in data formats such as audio data and text data. Here, inference refers to, for example, analysis, classification, prediction, and / or summarization.
[0812] 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 this disclosure is not limited thereto, and the specific processing may also be performed by the robot 414.
[0813] Furthermore, the emotion identification model 59, acting 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 a specific mapping, which is an emotion map (see Figure 9). Similarly, the emotion identification model 59 may also determine the robot's emotion, and the identification processing unit 290 may perform identification processing using the robot's emotion.
[0814] Figure 9 shows an emotion map 400 in which multiple emotions are mapped. In the emotion map 400, emotions are arranged in concentric circles radiating from the center. The closer to the center of the concentric circles, the more primitive the emotions are located. Further out of the concentric circles, emotions representing states and actions arising from mental states are located. Emotion is a concept that includes feelings and mental states. On the left side of the concentric circles, emotions that are generally generated from reactions occurring in the brain are located. On the right side of the concentric circles, emotions that are generally induced by situational judgment are located. Above and below the concentric circles, emotions that are generally generated from reactions occurring in the brain and induced by situational judgment are located. In addition, the emotion of "pleasure" is located on the upper side of the concentric circles, and the emotion of "displeasure" is located on the lower side. Thus, in the emotion map 400, multiple emotions are mapped based on the structure in which emotions arise, and emotions that are likely to occur simultaneously are mapped close together.
[0815] These emotions are distributed at the 3 o'clock position on the Emotion Map 400, and usually fluctuate between feelings of security and anxiety. In the right half of the Emotion Map 400, situational awareness takes precedence over internal feelings, resulting in a calm impression.
[0816] The inside of the Emotion Map 400 represents inner thoughts, while the outside represents actions. Therefore, the further you go from the outside of the Emotion Map 400, the more visible (expressed in actions) your emotions become.
[0817] Here, human emotions are based on various balances, such as posture and blood sugar levels. When these balances deviate from the ideal, it results in discomfort, and when they approach the ideal, it results in pleasure. Similarly, in robots, cars, motorcycles, etc., emotions can be created based on various balances, such as posture and battery level. When these balances deviate from the ideal, it results in discomfort, and when they approach the ideal, it results in pleasure. The emotion map can be generated, for example, based on Dr. Mitsuyoshi's emotion map (Research on a system for analyzing brain physiological signals of speech emotion recognition and emotion, Tokushima University, doctoral dissertation: https: / / ci.nii.ac.jp / naid / 500000375379). The left half of the emotion map contains emotions belonging to a region called "response," where sensation is dominant. The right half of the emotion map contains emotions belonging to a region called "situation," where situational awareness is dominant.
[0818] The emotion map defines two emotions that promote learning. One is the emotion around the middle of the negative "repentance" and "reflection" on the situation side. In other words, it is 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 the emotion around the positive "desire" on the reaction side. In other words, it is when the robot has positive feelings such as "I want more" or "I want to know more."
[0819] The emotion identification model 59 inputs user input into a pre-trained neural network, obtains emotion values representing each emotion shown in the emotion map 400, and determines the user's emotion. This neural network is pre-trained based on multiple training data sets, which are combinations of user input and emotion values representing each emotion shown in the emotion map 400. Furthermore, this neural network is trained so that emotions located close together have similar values, as shown in the emotion map 900 in Figure 10. Figure 10 shows an example where multiple emotions such as "reassured," "calm," and "confident" have similar emotion values.
[0820] The above description primarily focuses on the functions of the data processing device 12 in relation to this disclosure. However, the system related to this disclosure is not necessarily implemented on a server. The system related to this disclosure may be implemented as a general information processing system. This disclosure may be implemented, for example, as a software program that runs on a personal computer or as an application that runs on a smartphone. The method related to this disclosure may be provided to users in SaaS (Software as a Service) format.
[0821] In the above embodiment, an example was given in which a specific process is performed by a single computer 22. However, the technology of this disclosure is not limited thereto, and a distributed processing of the specific process may be performed by multiple computers, including computer 22. For example, a data generation model 58 may be provided in an external device of the data processing device 12, and the external device may generate data according to the input data.
[0822] In the above embodiment, an example was given in which the specific processing program 56 is stored in the storage 32, but the technology of this disclosure is not limited thereto. For example, the specific processing program 56 may be stored in a portable, computer-readable, non-temporary storage medium such as a USB (Universal Serial Bus) memory. The specific processing program 56 stored in the non-temporary storage medium is installed in the computer 22 of the data processing device 12. The processor 28 executes specific processing according to the specific processing program 56.
[0823] 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.
[0824] Furthermore, it is not necessary to store the entirety 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 the entirety of the specific processing program 56 in the storage 32; it is acceptable to store only a portion of the specific processing program 56.
[0825] The following types of processors can be used as hardware resources to perform specific processing. Examples of processors include a CPU, a general-purpose processor that functions as a hardware resource to perform specific processing by executing software, i.e., a program. Other examples of processors include dedicated electrical circuits, such as FPGAs (Field-Programmable Gate Arrays), PLDs (Programmable Logic Devices), or ASICs (Application Specific Integrated Circuits), which have circuit configurations specifically designed to perform specific processing. All of these processors have built-in or connected memory, and all of them perform specific processing by using memory.
[0826] The hardware resource that performs a specific process may consist of one of these various processors, or it may consist of 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). Alternatively, the hardware resource that performs a specific process may consist of a single processor.
[0827] Examples of configurations using a single processor include, firstly, a configuration in which one or more CPUs and software are combined to form a single processor, and this processor functions as a hardware resource that performs a specific process. Secondly, there is a configuration using a processor that realizes the functions of the entire system, including multiple hardware resources that perform a specific process, on a single IC chip, as exemplified by SoCs (System-on-a-chip). In this way, a specific process is realized using one or more of the above types of processors as hardware resources.
[0828] Furthermore, the hardware structure of these various processors can more specifically utilize electrical circuits that combine circuit elements such as semiconductor devices. Also, the specific processing described above is merely an example. Therefore, it goes without saying that unnecessary steps can be deleted, new steps added, or the processing order rearranged, as long as it does not deviate from the main purpose.
[0829] The descriptions and illustrations presented above are detailed explanations of the technical aspects of this disclosure and are merely examples of the technical aspects. For example, the above descriptions of the structure, function, operation, and effect are examples of the structure, function, operation, and effect of the technical aspects of this disclosure. Therefore, it goes without saying that you may delete unnecessary parts, add new elements, or replace elements in the descriptions and illustrations presented above, as long as you do not deviate from the essence of the technical aspects of this disclosure. Furthermore, in order to avoid confusion and facilitate understanding of the technical aspects of this disclosure, explanations of common technical knowledge and the like that do not require special explanation to enable the implementation of the technical aspects of this disclosure have been omitted from the descriptions and illustrations presented above.
[0830] All documents, patent applications, and technical standards described herein are incorporated by reference to the same extent as if each individual document, patent application, and technical standard were specifically and individually noted to be incorporated by reference.
[0831] The following is further disclosed regarding the embodiments described above.
[0832] (Claim 1)
[0833] A means of creating an information display design using a presentation creation tool,
[0834] A means of saving the aforementioned design as an electronic file and uploading it via a submission interface,
[0835] A processing method that analyzes uploaded design files and automatically generates HTML, CSS, and JavaScript code,
[0836] A means of sending the generated code to the user and displaying the information in web page format,
[0837] A system that includes this.
[0838] (Claim 2)
[0839] The system according to claim 1, which analyzes visual information in a design file and generates corresponding web program code for each display element.
[0840] (Claim 3)
[0841] The system according to claim 1, which identifies visual elements of text and shapes using at least image recognition technology and automatically generates appropriate design code based on the identified elements.
[0842] "Example 1"
[0843] (Claim 1)
[0844] A means for creating an information display configuration using an information creation device,
[0845] Means for saving the above configuration as electronic data and transmitting it via a data exchange device for submission,
[0846] A processing means for analyzing the submitted design data and automatically generating markup language and stylesheets,
[0847] A means for identifying visual elements using optical character recognition technology during the analysis and generation process and generating appropriate program code,
[0848] A means of returning the generated code to the user and making the information verifiable on a display device,
[0849] A computer system including a computer system.
[0850] (Claim 2)
[0851] The computer system according to claim 1, which analyzes visual information in design data and generates a corresponding web configuration code for each visual element.
[0852] (Claim 3)
[0853] The computer system according to claim 1, which automatically generates code for internet display from design information analyzed using a generative machine learning model.
[0854] "Application Example 1"
[0855] (Claim 1)
[0856] A means of creating an information display design using a presentation creation tool,
[0857] A means of saving the aforementioned design as electronic data and uploading it via a submission interface,
[0858] A processing method that analyzes uploaded design data and automatically generates HTML, CSS, and JavaScript code,
[0859] A means of sending the generated code to the user and displaying the information in website format,
[0860] A method for designing store simulations in real time using smart devices and immediately publishing them online,
[0861] A system that includes this.
[0862] (Claim 2)
[0863] The system according to claim 1, which analyzes visual information in design data and generates corresponding web program code for each display element.
[0864] (Claim 3)
[0865] The system according to claim 1, which identifies visual elements of text and shapes using at least image recognition technology and automatically generates appropriate design code based on the identified elements.
[0866] "Example 2 of combining an emotion engine"
[0867] (Claim 1)
[0868] A means of creating display information designs using application tools for creating graphic designs for information display,
[0869] Means for saving the aforementioned design in digital format and transferring it to a system via a transmission interface,
[0870] A processing means for analyzing transferred design data and automatically generating standard markup language code, stylesheet code, and script code,
[0871] A means of sending the generated code to a personal device and displaying the information in network page format,
[0872] A means for predicting the user's emotional state, and a means for customizing the code's color scheme and layout based on this emotional information.
[0873] A system that includes this.
[0874] (Claim 2)
[0875] The system according to claim 1, which analyzes visual information in design data, generates corresponding web program code for each display element, and further optimizes it individually based on the user's emotional information.
[0876] (Claim 3)
[0877] The system according to claim 1, which identifies visual elements and emotional states using at least image recognition technology and an emotion analysis model, and automatically generates appropriate design code based on the identified information.
[0878] "Application example 2 when combining with an emotional engine"
[0879] (Claim 1)
[0880] A means of creating an information display design using a presentation creation tool,
[0881] A means of saving the aforementioned design as an electronic file and uploading it via a submission interface,
[0882] A processing method that analyzes uploaded design files and automatically generates HTML, CSS, and JavaScript code,
[0883] A means of recognizing the user's emotional state and customizing the code generated based on that emotional information,
[0884] A means of sending a code adapted to the generated emotion to the user and displaying the information in web page format,
[0885] A system that includes this.
[0886] (Claim 2)
[0887] The system according to claim 1, which analyzes visual information during information display based on emotion recognition technology and generates web program code adapted to emotion for each display element.
[0888] (Claim 3)
[0889] The system according to claim 1, which identifies emotions from a user's facial expression using at least image recognition technology, automatically generates appropriate design code based on the identified emotional elements, and optimizes information display in a physical store. [Explanation of symbols]
[0890] 10, 210, 310, 410 Data Processing Systems 12 Data Processing Devices 14 Smart Devices 214 Smart Glasses 314 Headset-type terminal 414 Robots< / url:> < / h1> < / svg> < / h1> < / url:> < / h1> < / svg> < / h1> < / url:> < / h1> < / svg> < / h1> < / url:> < / h1> < / svg> < / h1>
Claims
1. A means of creating an information display design using a presentation creation tool, A means of saving the aforementioned design as an electronic file and uploading it via a submission interface, A processing method that analyzes uploaded design files and automatically generates HTML, CSS, and JavaScript code, A means of sending the generated code to the user and displaying the information in web page format, A system that includes this.
2. The system according to claim 1, which analyzes visual information in a design file and generates corresponding web program code for each display element.
3. The system according to claim 1, which identifies visual elements of text and figures using at least image recognition technology and automatically generates appropriate design code based on the identified elements.