Webpage translation method, electronic device, storage medium and program product

Abstract

Embodiments of the present application provide a webpage translation method, an electronic device, a storage medium and a program product, relating to the technical field of computer, and the method comprises: determining a target display area where a user gazes according to eye movement information of the user, wherein the target display area is used to display a target content block of a target webpage; identifying a source object node corresponding to the target content block from an object node tree of the target webpage, wherein the object node tree is obtained by analyzing a source code file of the target webpage; parsing the source object node to obtain source language information in the target content block; and displaying target language information corresponding to the source language information in the target display area. The translation method can ensure accurate extraction of translated content in the webpage translation scene of dynamic and complex layout, thereby improving translation accuracy and translation speed.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a web page translation method, electronic device, storage medium, and program product. Background Technology

[0002] Many browsers can automatically translate full-text web page content, but this method has certain drawbacks, such as long translation time, high resource consumption, and a poor user experience. Furthermore, some browsers' word-sliding translation functions require users to manually select the content to be translated and then translate it via keyboard shortcuts or a floating window, making the process rather complicated. Summary of the Invention

[0003] This application provides a web page translation method, electronic device, storage medium, and program product to alleviate or solve one or more technical problems existing in the prior art.

[0004] In a first aspect, embodiments of this application provide a webpage translation method, comprising: determining a target display area that the user is looking at based on the user's eye movement information, wherein the target display area is used to display a target content block of a target webpage; identifying a source object node corresponding to the target display area from an object node tree of the target webpage, wherein the object node tree is obtained by parsing the source code file of the target webpage; parsing the source object node to obtain source language information in the target content block; and displaying target language information corresponding to the source language information in the target display area.

[0005] Secondly, embodiments of this application provide an electronic device, including a memory, a processor, and a computer program stored in the memory, wherein the processor implements any of the methods of embodiments of this application when executing the computer program.

[0006] Thirdly, embodiments of this application provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the method of any one of the embodiments of this application.

[0007] Fourthly, embodiments of this application provide a computer program product, including a computer program, which, when executed by a processor, implements any of the methods described in the embodiments of this application.

[0008] The webpage translation method provided in this application first utilizes eye movement to locate the target display area being viewed by the user and automatically triggers partial translation of the webpage content. Users do not need to manually select the content to be translated; they can see the translation result instantly while browsing the webpage. This not only avoids the resource waste of full-page translation and the tedious operation of word-by-word translation, improving translation speed, but also enhances the fluency and comfort of user reading, thereby improving the user experience. Furthermore, the object node tree provides structured data support for the target webpage. By parsing the source object nodes corresponding to the target content blocks of the target webpage from the object node tree, the source language information in the target content blocks can be obtained. This ensures accurate extraction of translated content in dynamic and complex webpage translation scenarios, thereby improving the accuracy of the translation results.

[0009] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application, it can be implemented according to the contents of the specification. In order to make the above and other objects, features and advantages of this application more obvious and understandable, specific embodiments of this application are given below. Attached Figure Description

[0010] In the accompanying drawings, unless otherwise specified, the same reference numerals throughout the various drawings denote the same or similar parts or elements. These drawings are not necessarily drawn to scale. It should be understood that these drawings depict only some embodiments according to this application and should not be construed as limiting the scope of this application.

[0011] Figure 1 This illustration shows an application scenario diagram of the webpage translation method provided in the embodiments of this application;

[0012] Figure 2 A flowchart illustrating a webpage translation method according to an embodiment of this application;

[0013] Figure 3 An exemplary flowchart illustrating a webpage translation method according to an embodiment of this application is shown;

[0014] Figure 4 A block diagram showing a webpage translation apparatus according to an embodiment of this application;

[0015] Figure 5 A block diagram of an electronic device provided in an embodiment of this application is shown. Detailed Implementation

[0016] In the following description, only certain exemplary embodiments are briefly described. As those skilled in the art will recognize, the described embodiments can be modified in various ways without departing from the concept or scope of this application. Therefore, the drawings and description are considered to be exemplary in nature and not restrictive.

[0017] To facilitate understanding of the technical solutions of the embodiments of this application, the relevant technologies of the embodiments of this application are described below. The following relevant technologies are optional solutions and can be combined with the technical solutions of the embodiments of this application in any way, and all of them fall within the protection scope of the embodiments of this application.

[0018] The following terms will be used below.

[0019] Eye-tracking technology: Using cameras and sensors on electronic devices, it accurately measures and records the movement trajectory and position of the eyes, thereby detecting the user's attention distribution and visual behavior when observing different objects.

[0020] Hypertext Markup Language (HTML) is a standard markup language used to create and structure web page content. HTML uses tags to define various elements of a web page, such as headings, paragraphs, links, and images. It not only provides structure for web pages but also gives web page elements unique semantics and behaviors, enabling browsers to correctly render and display page content.

[0021] The Document Object Model (DOM) is a programming interface for HTML and eXtensible Markup Language (XML) documents, providing a structured way to represent documents. Through the DOM, developers can access and manipulate the content and structure of HTML and XML documents using programming languages ​​such as JavaScript. The DOM represents each element of a webpage (such as tags, attributes, and content) as an object node, enabling developers to dynamically change the content, structure, and style of webpages.

[0022] Large Language Models (LLMs) are natural language processing models built using deep learning techniques. They have a large number of parameters and complex neural network architectures. These models, trained on massive amounts of text data, are able to understand and generate natural language.

[0023] Cascading Style Sheets (CSS) is a style language used to describe the appearance of web page content. It defines how elements in an HTML or XML document are rendered, and can control visual effects such as element color, font, layout, and spacing.

[0024] Application scenarios

[0025] Many browsers can automatically translate full-text web page content, but this method has certain drawbacks, such as long translation time, high resource consumption, and a poor user experience. Furthermore, some browsers' word-sliding translation functions require users to manually select the content to be translated and then translate it via keyboard shortcuts or a floating window, making the process rather complicated.

[0026] One related technology offers a voice command translation system, where users can select webpage content to be translated via voice commands, and the system translates based on the user's voice input. This method avoids the hassle of manually selecting content, but requires accurate voice recognition technology. A gesture recognition translation system uses a camera to capture the user's gestures, allowing the user to select the content to be translated through specific gestures, and the system translates in real time. This method requires accurate gesture recognition technology, and its immediacy and translation fluency are relatively poor. Augmented Reality (AR) translation systems use AR devices (such as smart glasses) to translate webpage content within the user's field of vision in real time. This method can provide an immersive translation experience, but it requires additional hardware and is costly.

[0027] Figure 1 This diagram illustrates an application scenario of the webpage translation method provided in this application. For example... Figure 1 As shown, this application provides an electronic device 100, which includes a processor 101 and a display 102.

[0028] For example, electronic device 100 may be a mobile phone, personal computer, tablet computer, wearable device or other terminal device. Electronic device 100 has software programs installed on it, such as a browser. The browser is run by processor 101 and the user can browse web pages through the display interface provided by display 102.

[0029] During web browsing, the eye-tracking device 102 can collect the user's eye movement information and provide it to the processor 101. The eye-tracking device 102 can be, for example, an eye-tracking sensor or a camera. An eye-tracking sensor can combine an infrared light source and a sensor to accurately track eye movements by detecting light reflected from the eyes, providing high-precision eye positioning under different lighting conditions. A camera records a scene by capturing visual images and combines this with software algorithms to identify and track eye movements. Exemplarily, the eye-tracking device 102 can be mounted on an electronic device 100, such as a display 102, to facilitate tracking the target display area 104 that the user is looking at.

[0030] The processor 101 can translate the source language information in the target display area 104 that the user is looking at into the corresponding target language information based on the user's eye movement information, and automatically display it in the target display area 104.

[0031] Based on this, by detecting the target display area that the user is looking at in real time, the web page content in the target display area is translated instantly and dynamically, without having to be displayed after the entire web page has been translated. This improves translation efficiency. Furthermore, users do not need to manually select the web page content to be translated, thus simplifying the translation process and enhancing the user experience.

[0032] It should be noted that the application scenarios or examples provided in the embodiments of this application are for ease of understanding, and the embodiments of this application do not specifically limit the application of the technical solutions. In addition, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0033] The technical solution of this application and how it solves the aforementioned technical problems are described in detail below with specific embodiments. The listed specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will be described in detail below with reference to the accompanying drawings.

[0034] Example

[0035] Figure 2 A flowchart illustrating a webpage translation method according to an embodiment of this application is provided. This method can be applied to... Figure 1 In the illustrated electronic device 100, for example, it is executed by a processor 101. Figure 2 As shown, the method may include steps S201, S202, S203 and S204.

[0036] Step S201: Based on the user's eye movement information, determine the target display area that the user is looking at, wherein the target display area is used to display the target content block of the target webpage.

[0037] The target webpage is the page currently displayed on the browser's interface. For example, while the user is browsing the target webpage, the eye-tracking device can collect eye movement information in real time. This eye movement information includes, but is not limited to, eye position and gaze direction. Eye position refers to the specific location and angle of the eye, describing its coordinates; gaze direction refers to the specific direction the user is looking, i.e., the orientation of the eyes.

[0038] The target display area is located within the display interface of the target webpage; it is a visible area of ​​the page in the browser. Specifically, the target display area is used to display the target content block of the target webpage. For example, the target display area is the display area for the target content block (a paragraph, image, etc.). Based on the user's eye movement information, the target display area that the user is looking at can be determined.

[0039] In one example, the user's gaze point, i.e., the intersection between the user's line of sight and the display screen, can be determined by the eye position and gaze direction. Then, the coordinate data of the gaze point is converted into the screen coordinate system of the display screen. Based on the converted coordinate data, the position coordinates of the area of ​​the gaze point in the display interface of the target webpage are calculated. This area size and position coordinates are used to represent the target display area that the user is gazing at.

[0040] In another example, after determining the gaze points, cluster analysis can be performed on multiple gaze points within a preset time range. Spatial distribution features are then extracted from one or more gaze points resulting from the clustering process. This allows for the filtering of gaze points whose spatial distribution conforms to a preset range, while excluding gaze points that are spatially distant (e.g., exceeding a preset distance threshold), thus filtering out non-gaze behaviors such as saccades. The coordinate data of the filtered gaze points are then converted into the screen coordinate system of the display screen, and the position coordinates of the one or more gaze points within the displayed area of ​​the target webpage are calculated based on the converted coordinate data.

[0041] In another example, eye movement information may also include gaze duration, which refers to the length of time a user stays on a certain display area. If the user's gaze duration exceeds a preset duration threshold (e.g., 2 seconds), the target display area being gazed at is further determined; if the user's gaze duration does not exceed the preset duration threshold, the next frame of eye movement information is obtained, and the process returns to step S201. Based on this, non-gaze behaviors such as blinking can be filtered out.

[0042] Step S202: Identify the source object node corresponding to the target content block from the object node tree, wherein the object node tree is obtained by parsing the source code file of the target webpage.

[0043] The object node tree is also known as the DOM tree. A DOM tree is a tree-like structure where each DOM node represents a part of the source code file. The source code file of the target webpage can be an HTML document or an XML document. Through the DOM interface, each element (such as tags, attributes, and content) of the target webpage within the source code file can be represented as an object node (i.e., a DOM node), resulting in the DOM tree. The DOM node corresponding to the target display area is the source object node.

[0044] For example, the DOM node corresponding to the location information of the target display area can be obtained as the source object node using the DOM interface's retrieval function. Alternatively, the DOM tree of the target webpage can be traversed, and the DOM node whose display position matches the target display area can be selected as the source object node.

[0045] Step S203: Parse the source object node to obtain the source language information in the target content block.

[0046] DOM nodes include: element nodes, which correspond to tags in HTML or XML documents, such as... 、 、 etc.; Text Node, a node containing actual text content, located inside element nodes, such as Hello In the example, "Hello" is a text node; an attribute node represents the attributes of elements in an HTML or XML document, such as... <input type＝"text"> The `type="text"` attribute in the HTML document represents a comment node, which represents a comment in the HTML document. The `document` node represents the root node of the HTML or XML document.

[0047] A source object node, as a type of DOM node, can be an element node, text node, attribute node, comment node, document node, etc., based on its node type. There can be multiple source object nodes, and their node attributes can also be varied. Parsing a source object node involves identifying text nodes within it and extracting their text content as source language information.

[0048] For example, the language to be translated can be preset. If the text content obtained by parsing the source object node includes information belonging to the language to be translated, then this part of the information is used as the source language information; if it does not include information belonging to the language to be translated, then the eye movement information of the next frame is obtained and the process returns to step S201.

[0049] Step S204: In the target display area, display the target language information corresponding to the source language information.

[0050] For example, a target language can be preset, and the source language information can be translated into the target language information. For instance, an embedded translation function module can be used to translate the source language information into the target language information; alternatively, the source language information and the target language information can be sent to an LLM, which then translates the source language information into the target language information.

[0051] Furthermore, target language information is displayed in the target display area. For example, the target language information is displayed in the area near the source language information, or the source language information is replaced with the target language information.

[0052] The webpage translation method provided in this application first utilizes eye movement to locate the target display area that the user is looking at, and automatically triggers partial translation of the webpage content. Users do not need to manually select the content to be translated; they can see the translation result instantly while browsing the webpage. This not only avoids the resource waste of full-page translation and the tedious operation of word-by-word translation, improving translation speed, but also enhances the fluency and comfort of user reading, thereby improving the user experience. Furthermore, DOM nodes, as the basic units of webpage content, provide structured data support. By parsing DOM nodes and obtaining source language information from the target content block, accurate extraction of translated content can be ensured in dynamic and complex layout webpage translation scenarios, thereby improving the accuracy of the translation results.

[0053] In one implementation, in step S203, parsing the source object node to obtain the source language information in the target content block may include: determining the element type of the target content block based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; and extracting the source language information from the source object node based on the element type.

[0054] Here, element tags refer to the tag names in an HTML or XML document, such as... , , Element types include, but are not limited to, paragraphs (text), images, links, tables, etc. Element tags can be used to determine the element type, for example... This represents a paragraph element, which typically contains plain text, and its corresponding element type is text. This represents an image element, and the corresponding element type is image.

[0055] As mentioned above, node attributes can be element nodes, text nodes, attribute nodes, comment nodes, document nodes, etc. Node attributes can be used to determine the element type. For example, if the source object node's node attribute is "element node," we can continue to parse the node attributes of its child nodes to see if they contain text nodes. If they do, the element type is determined to be text. Similarly, if the source object node's node attribute is "text node," the element type can be determined to be text.

[0056] For example, the element type of the source object node is determined based on its element tag and node attributes. The element type of the source object node is then the element type of the target content block. For instance, if the source object node's node attribute is "element node" and its element tag is... If the source object node's node attribute is an element node, then the element type is an image; if the source object node's node attribute is an element node, then the element tag is... or If the element type is text, then the element type is text.

[0057] Furthermore, after determining the element type, source language information can be extracted from the source object node based on the element type. For example, if the element type is text, the text is directly extracted from the source object node, and the source language information is determined from the text. Similarly, if the element type is an image, the image is extracted from the source object node, and an Optical Character Recognition (OCR) algorithm is used to recognize text from the extracted image, and the source language information is determined from the text.

[0058] Based on this, source language information can be identified in a targeted manner according to element type. In other words, the embodiments of this application can provide a multimodal source language information extraction method to adapt to complex and ever-changing web page content.

[0059] In one implementation, in step S204, displaying the target language information corresponding to the source language information in the target display area includes: determining the element type of the target content block based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; determining the display method of the target language information based on the element type; and displaying the target language information in the target display area according to the display method.

[0060] As mentioned above, element types include, but are not limited to, paragraphs (which are text), images, links, tables, etc., and the element type can be determined using any of the methods described in the examples above.

[0061] In this embodiment, different display methods can be used for different types of elements. For example, if the element type is a word (belonging to text), the target language information can be displayed above or below the text box containing the source language information (original word); if the element type is a paragraph, the target language information can be displayed within a preset range of the source language information (original paragraph). Exemplarily, the display method can be preset specifically according to the element type.

[0062] Based on this, different display methods can be used to display target language information according to the different element types of the source object node, thereby adaptively adjusting the display method in a complex and ever-changing web page content environment to improve user experience.

[0063] In one implementation, in response to an element type of text, the display mode is determined to be a replacement display mode that replaces the source language information with the target language information. That is, if the source object node's element type is text, then within the target display area, the source language information is replaced with the target language information. For example, this can be done using operation functions provided by the DOM interface within the target display area.

[0064] Based on this, dynamic replacement of text content can be achieved, allowing users to not only see the translation results instantly, but also maintain the original layout of the webpage, thus improving the user experience.

[0065] In one implementation, if the element type is text, the display mode is a replacement display mode. Then, according to the display mode, displaying the target language information in the target display area may include: inserting the target language information into the newly created text container node; or replacing the source object node with the text container node.

[0066] The text container node is a type of DOM node used to insert and display target language information. For example, the element tag of the text container node is first determined, such as... 、 、 Then, JavaScript can be used to create element nodes for the text container nodes, and the text content of these nodes can be set to the target language information. These text nodes become child nodes of the element nodes, thus inserting the target language information into the newly created text container nodes. Additionally, the text container nodes are set to have the same display position and size as the source object nodes. Further, the source object node is traversed in the DOM tree corresponding to the target webpage, and within that DOM tree, the source object node is deleted, and a text container node is inserted, thereby replacing the source object node with the text container node. This achieves the replacement of the source language information with the target language information in the target display area.

[0067] By replacing the source object node with a text container node, the source language information can be replaced with the target language information within the target display area. This not only effectively handles complex web page content replacement scenarios and improves user experience, but also enhances the usability of web page functionality due to its high code reusability, ease of maintenance and expansion.

[0068] In one example, before replacing the source object node with a text container node, it may include: setting a first display style for the source object node during the replacement process, and a second display style for the text container node during the replacement process, wherein the second display style and the first display style have matching display effects.

[0069] For example, the first display style of the source object node is extracted, including the computed style attributes of the source object node, such as size, position, color, etc.; the computed style attributes of the source object node are applied to the newly created text container node as the second display style of the text container node, so as to ensure that the second display style and the first display style have a matching display effect.

[0070] Based on this, the newly created text container node can accurately inherit the appearance and layout characteristics of the source object node, ensuring the consistency and stability of the page's visual effects. This not only improves the user experience but also makes the content replacement process smoother and more natural, without causing abrupt changes or inconsistencies in the page layout.

[0071] In yet another example, before replacing the source object node with a text container node, it may include: setting a first animation style for the source object node during the replacement process, and a second animation style for the text container node during the replacement process, wherein the second animation style and the first animation style have matching animation effects.

[0072] The first animation style is defined, for example, an animation effect such as a fade-out effect is defined for the source object node, and the second animation style is defined, for example, a matching animation effect such as a fade-in effect is defined for the text container node, so as to realize that the source language information gradually disappears and the target language information gradually appears.

[0073] Based on this, a smooth and natural transition effect can be achieved, so that users will not feel a sudden change in the translation result, and it can also guide the user's attention and improve the overall user experience.

[0074] In one implementation, in response to an element type being an image, the display mode is determined to be an overlay display mode where the target language information overlays the source language information. That is, if the source object node's element type is an image, then within the target display area, the layer of the source language information overlays the layer of the target language information. For example, this can be achieved using operation functions provided by the DOM interface to overlay the layer of the source language information over the layer of the target language information within the target display area.

[0075] Based on this, the translation results in the image can be dynamically updated, allowing users to see the translation results instantly while maintaining the original layout of the webpage, thus improving the user experience.

[0076] In one implementation, if the element type is an image, the display method is an overlay display method. Then, displaying the target language information in the target display area according to the display method may include: inserting the target language information into a newly created layer container node, wherein the style of the layer container node includes the target display position and target display size of the target language information on the target webpage, and the target display position and target display size are determined based on the first display position and first display size of the image element in the source object node on the target webpage, and the second display position and second display size of the source language information in the image element; and inserting the layer container node above the image element in the source object node.

[0077] Layer container nodes are a special type of DOM node used to overlay additional content or effects on top of existing content. To ensure that the target language information in the layer container node is aligned with the source language information in the image element, the first display position and the first display size are obtained, i.e., the position and size of the image element within its parent node. Then, the second display position and the second display size of the source language information within the image element are obtained. For example, when extracting source language information based on OCR, the position and size of the text box containing the source language information can be obtained. Then, by calculating the first and second display positions, the target display position is determined, i.e., the display position of the target language information on the target webpage. By calculating the first and second display sizes, the target display position and the display size of the target language information on the target webpage are determined, thus obtaining the global coordinates of the target language information on the target webpage.

[0078] Furthermore, a text node containing the target language information is inserted into the layer container node, and the style properties of the layer container node are set to the target display position and target display size. For example, the style parameters of the layer container node can be further set to a semi-transparent background or a blur effect, and the style parameters of the text node containing the target language information can be set to a bold font or other highlighting style, thereby ensuring that the translation result is clearly visible.

[0079] Based on this, the source language information can be overlaid with the target language information in the target display area while maintaining a consistent visual effect. This not only improves the user experience but also makes the content replacement process smoother and more natural, without causing abrupt changes or inconsistencies in the page layout.

[0080] In one application example, such as Figure 3 As shown, the web page translation method of this application embodiment may include: (1) starting, for example, starting a software program for implementing the web page translation method of this application embodiment, the software program may be a plugin embedded in a browser; (2) receiving rendered web page content, that is, generating a corresponding DOM tree according to the HTML document or XML document of the target web page, thereby displaying the target web page in the display interface of the browser; (3) capturing eyeballs through a camera peripheral, that is, using a camera peripheral as an eye tracking device to collect the eye movement information of the operator (user), wherein the eye movement information may be reflected in the captured image information; (4) analyzing and calculating the screen area (i.e., the target display area) that the operator is focused on (i.e., looking at) through the captured image information, for example, the eye movement information can be parsed according to the captured image information, and the screen area that the operator is looking at can be determined by the method in step S201; (5) detecting the area content, that is, detecting the web page content in the target display area, for example, the method in step S202 can be used to identify the DOM nodes in the target display area, obtain the source object node, and determine the source object node according to the element tags and / or Node attributes determine the element type of the source object node, where the element type includes text or image; (6) If the webpage content is an image, i.e. the element type is an image, then proceed to step (7); if the webpage content is text, i.e. the element type is text, then proceed to step (8); (7) OCR text extraction, i.e., extract the image from the source object node and identify the text from the extracted image through the OCR algorithm; (8) Detect whether there is source language information, i.e., detect whether there is source language information in the text; if there is, then proceed to step (9); if there is not, then return to step (4) to analyze the image information of the next frame; (9) Use a translation model to translate the source language information into the target language information, such as using a large language model to translate the source language information into the target language information; (10) Replace the source language information of the webpage with the target language information. For example, if the element type is text, then use the replacement display method of replacing the source language information with the target language information and display it in the target display area; or if the element type is an image, then use the overlay display method of the target language information overlaying the source language information and display it in the target display area.

[0081] Corresponding to the application scenarios and methods provided in the embodiments of this application, the embodiments of this application also provide a webpage translation device, such as... Figure 4 As shown, the webpage translation device includes: a target display area determination module 401, used to determine the target display area that the user is looking at based on the user's eye movement information, wherein the target display area is used to display the target content block of the target webpage; a source object node identification module 402, used to identify the source object node corresponding to the target content block from the object node tree of the target webpage, wherein the object node tree is obtained by parsing the source code file of the target webpage; a source object node parsing module 403, used to parse the source object node to obtain the source language information in the target display area; and a target language information display module 304, used to display the target language information corresponding to the source language information in the target display area.

[0082] In one implementation, the source object node parsing module 403 is specifically used to: determine the element type of the target content block based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; and extract the source language information from the source object node based on the element type.

[0083] In one embodiment, the target language information display module 304 is specifically configured to: determine the element type of the target content block based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; determine the display method of the target language information based on the element type; and display the target language information in the target display area according to the display method.

[0084] In one implementation, the target language information display module 304 is specifically configured to: in response to the element type being text, determine the display mode as a replacement display mode that replaces the source language information with the target language information; or, in response to the element type being an image, determine the display mode as an overlay display mode that overlays the source language information with the target language information.

[0085] In one embodiment, the target language information display module 304 is specifically used to: insert the target language information into a newly created text container node; wherein the text container node has the same display position and display size as the source object node; and replace the source object node with the text container node in the object node tree.

[0086] In one embodiment, the target language information display module 304 is specifically configured to: before replacing the source object node with the text container node: set a first display style for the source object node during the replacement process and a second display style for the text container node during the replacement process, wherein the second display style and the first display style have matching display effects; or, set a first animation style for the source object node during the replacement process and a second animation style for the text container node during the replacement process, wherein the second animation style and the first animation style have matching animation effects.

[0087] In one embodiment, the display mode is the overlay display mode, and the target language information display module 304 is specifically used to: insert the target language information into a newly created layer container node, wherein the style of the layer container node includes the target display position and target display size of the target language information in the target webpage, the target display position and target display size are determined based on the first display position and first display size of the image element in the source object node in the target webpage, and the second display position and second display size of the source language information in the image element; and insert the layer container node above the image element in the source object node.

[0088] The functions of each module in each device in the embodiments of this application can be found in the corresponding description in the above method, and they have corresponding beneficial effects, which will not be repeated here.

[0089] Figure 5 This is a block diagram of an electronic device used to implement embodiments of this application. For example... Figure 5 As shown, the electronic device includes a memory 501 and a processor 502. The memory 501 stores a computer program that can run on the processor 502. When the processor 502 executes the computer program, it implements the method described in the above embodiments. The number of memories 501 and processors 502 can be one or more. In a specific implementation, the electronic device may also include a communication interface 503 for communicating with external devices and exchanging data.

[0090] For example, the electronic device may be Figure 1 The electronic device 100 shown, the processor 501 can be connected to Figure 1 The processor 101 shown has the same or similar structure and functions.

[0091] In practical implementation, if the memory 501, processor 502, and communication interface 503 are implemented independently, they can be interconnected via a bus to communicate with each other. This bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. This bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 5 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0092] Optionally, in a specific implementation, if the memory 501, processor 502 and communication interface 503 are integrated on a single chip, the memory 501, processor 502 and communication interface 503 can communicate with each other through an internal interface.

[0093] This application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method provided in this application.

[0094] This application provides a computer program product, including a computer program that, when executed by a processor, implements the method provided in this application.

[0095] This application also provides a chip including a processor for calling and executing instructions stored in a memory, causing a communication device with the chip installed to perform the method provided in this application.

[0096] This application also provides a chip, including: an input interface, an output interface, a processor, and a memory. The input interface, output interface, processor, and memory are connected through an internal connection path. The processor is used to execute code in the memory. When the code is executed, the processor is used to execute the method provided in the application embodiment.

[0097] It should be understood that the aforementioned processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. General-purpose processors can be microprocessors or any conventional processor. It is worth noting that the processor can be a processor supporting Advanced Reduced Instruction Set Machines (ARM) architecture.

[0098] Further, optionally, the aforementioned memory may include read-only memory and random access memory. The memory may be volatile memory or non-volatile memory, or may include both. Non-volatile memory may include read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory may include random access memory (RAM), which serves as an external cache. By way of example, but not limitation, many forms of RAM are available. Examples include Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDR SDRAM), Enhanced Synchronous DRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), and Direct Rambus RAM (DR RAM).

[0099] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions according to this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transferred from one computer-readable storage medium to another.

[0100] In the description of this specification, references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of those different embodiments or examples.

[0101] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "a plurality of" means two or more, unless otherwise explicitly specified.

[0102] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing a particular logical function or process. Furthermore, the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functionality involved.

[0103] The logic and / or steps described in the flowchart or otherwise herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus or device (such as a computer-based system, a processor-included system or other system that can fetch and execute instructions from, an instruction execution system, apparatus or device).

[0104] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. All or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware, the program being stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiments.

[0105] Furthermore, the functional units in the various embodiments of this application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. This storage medium can be a read-only memory, a disk, or an optical disk, etc.

[0106] The above description is merely an exemplary embodiment of this application, but the scope of protection of this application is not limited thereto. Any person skilled in the art can easily conceive of various variations or substitutions within the technical scope described in this application, and these should all be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A webpage translation method, comprising: Based on the user's eye movement information, the target display area that the user is looking at is determined, wherein the target display area is used to display the target content block of the target webpage; From the object node tree of the target webpage, identify the source object node corresponding to the target content block, wherein the object node tree is obtained by parsing the source code file of the target webpage; Parse the source object node to obtain the source language information in the target content block; The target language information corresponding to the source language information is displayed in the target display area.

2. The method according to claim 1, wherein, The process of parsing the source object node to obtain the source language information in the target content block includes: The element type of the target content block is determined based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; The source language information is extracted from the source object node based on the element type.

3. The method according to claim 1, wherein, The step of displaying the target language information corresponding to the source language information in the target display area includes: The element type of the target content block is determined based on the element tags and / or node attributes of the source object node, wherein the element type includes text or image; Based on the element type, determine the display method of the target language information; The target language information is displayed in the target display area according to the described display method.

4. The method according to claim 3, wherein, The step of determining the display method of the target language information based on the element type includes: In response to the element type being text, the display mode is determined to be a replacement display mode that replaces the source language information with the target language information; or... In response to the element type being an image, the display mode is determined to be an overlay display mode that overlays the source language information with the target language information.

5. The method according to claim 4, wherein, The display method is the alternative display method, and the step of displaying the target language information in the target display area according to the display method includes: Insert the target language information into the newly created text container node; wherein the text container node has the same display position and display size as the source object node; In the object node tree, the source object node is replaced with the text container node.

6. The method according to claim 5, wherein, The step of displaying the target language information in the target display area according to the aforementioned display method further includes: before replacing the source object node with the text container node: Set a first display style for the source object node during the replacement process, and a second display style for the text container node during the replacement process, wherein the second display style and the first display style have a matching display effect; or, Set a first animation style for the source object node during the replacement process, and a second animation style for the text container node during the replacement process, wherein the second animation style and the first animation style have matching animation effects.

7. The method according to claim 4, wherein, The display method is the overlay display method, and the step of displaying the target language information in the target display area according to the display method includes: Insert the target language information into the newly created layer container node, wherein the style of the layer container node includes the target display position and target display size of the target language information in the target webpage, and the target display position and target display size are determined based on the first display position and first display size of the image element in the source object node in the target webpage, and the second display position and second display size of the source language information in the image element; In the source object node, insert the layer container node above the image element.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory, wherein the processor, when executing the computer program, implements the method of any one of claims 1 to 7.

9. The electronic device according to claim 8, further comprising: An eye-tracking device for collecting information about a user's eye movements.

10. A computer-readable storage medium storing a computer program that, when executed by a processor, implements the method of any one of claims 1 to 7.

11. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1 to 7.

Images