Webpage interface development internationalization method and device, equipment, storage medium and program product

Abstract

The invention relates to a webpage interface internationalization development method and device, computer equipment, a computer readable storage medium and a computer program product, relates to the technical field of software development, and can improve the development efficiency of webpage interface internationalization development. The method comprises the steps of displaying a language translation component in response to a selection operation on a target webpage text element; the target webpage element is a webpage element with text content containing an internationalization key; in response to a trigger operation on the language translation component, obtaining first translation content corresponding to the text content according to the internationalization key; obtaining second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface; and obtaining target translation content corresponding to the text content according to the first translation content and the second translation content.

Description

Technical Field

[0001] The present application relates to the field of software development technology, and in particular to a method, apparatus, computer equipment, computer-readable storage medium, and computer program product for internationalizing web page interface development. Background Art

[0002] With the acceleration of globalization, internationalization technology has been introduced in the field of software development technology. This technology is designed to support multilingual and multicultural environments and provide a consistent experience for global users. Its core lies in multilingual support, character encoding processing and localization adaptation, so that applications can be flexibly adjusted according to the needs of different regions. The current internationalization method mainly relies on saving internationalized content in multiple standard local language file formats to store translation content, and pre-defining the translation content in the form of key-value pairs.

[0003] In the traditional method, developers usually maintain separate translation files for each language and load these files at compile time to provide multi-language support. Although this method can achieve basic internationalization requirements, it is time-consuming and laborious to handle dynamic content and context-related translation, making internationalization development inefficient. Summary of the invention

[0004] Based on this, it is necessary to provide a web page interface development internationalization method, apparatus, computer equipment, computer-readable storage medium and computer program product that can improve international development efficiency in response to the above technical problems.

[0005] In a first aspect, the present application provides a method for internationalizing web page interface development, comprising:

[0006] In response to a selection operation on a target webpage text element, a language translation component is displayed; the target webpage element is a webpage element having text content containing an internationalization key;

[0007] In response to a triggering operation on the language translation component, obtaining a first translation content corresponding to the text content according to the internationalization key;

[0008] Obtaining second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;

[0009] According to the first translation content and the second translation content, a target translation content corresponding to the text content is obtained.

[0010] In one of the embodiments, before displaying the language translation component in response to the selection operation on the target web page text element, it also includes: if a mouse pass event on the target web page text element is monitored, it is determined that the selection operation is received; and displaying the language translation component includes: displaying the language translation component according to the position of the target web page text element or the position of the mouse.

[0011] In one of the embodiments, in response to the triggering operation of the language translation component, obtaining the first translation content corresponding to the text content according to the internationalization key includes: in response to the triggering operation of the language translation component, displaying a translation window, and requesting candidate first translation content corresponding to the text content from a server according to the internationalization key; the translation window displays a language translation form corresponding to the internationalization key; the language translation form displays a preset first translation content; and displaying the first translation content in the language translation form according to the candidate first translation content and the preset first translation content.

[0012] In one of the embodiments, displaying the first translation content in the language translation form according to the candidate first translation content and the preset first translation content includes: if the candidate first translation content is empty, displaying the preset first translation content as the first translation content in the language translation form; if the candidate first translation content is not empty, displaying the candidate first translation content as the first translation content in the language translation form.

[0013] In one of the embodiments, the translation window also displays a language input box; before obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, it also includes: after the language translation form displays the first translation content, obtaining part or all of the text content input into the language input box; sending part or all of the text content to the server, so that the server obtains the second translation content corresponding to part or all of the text content through the auxiliary translation interface; after obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, it also includes: displaying the second translation content in the language translation form.

[0014] In one of the embodiments, after obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content, the method further includes: displaying the target translation content in the language translation form; and submitting the language translation form to the server so that the server replaces the text content of the target webpage text element with the target translation content.

[0015] In a second aspect, the present application also provides a web page interface development internationalization device, including:

[0016] A language translation component display module, for displaying a language translation component in response to a selection operation on a target web page text element; the target web page element is a web page element having text content containing an internationalization key;

[0017] A first translation content acquisition module, configured to acquire first translation content corresponding to the text content according to the internationalization key in response to a trigger operation on the language translation component;

[0018] A second translation content acquisition module, used to acquire second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;

[0019] The translation integration module is used to obtain target translation content corresponding to the text content according to the first translation content and the second translation content.

[0020] In a third aspect, the present application further provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

[0021] In response to a selection operation on a target web page text element, a language translation component is displayed; the target web page element is a web page element having text content containing an internationalization key; in response to a trigger operation on the language translation component, a first translation content corresponding to the text content is obtained according to the internationalization key; a second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained; and a target translation content corresponding to the text content is obtained according to the first translation content and the second translation content.

[0022] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the following steps are implemented:

[0023] In response to a selection operation on a target web page text element, a language translation component is displayed; the target web page element is a web page element having text content containing an internationalization key; in response to a trigger operation on the language translation component, a first translation content corresponding to the text content is obtained according to the internationalization key; a second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained; and a target translation content corresponding to the text content is obtained according to the first translation content and the second translation content.

[0024] In a fifth aspect, the present application further provides a computer program product, including a computer program, which implements the following steps when executed by a processor:

[0025] In response to a selection operation on a target web page text element, a language translation component is displayed; the target web page element is a web page element having text content containing an internationalization key; in response to a trigger operation on the language translation component, a first translation content corresponding to the text content is obtained according to the internationalization key; a second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained; and a target translation content corresponding to the text content is obtained according to the first translation content and the second translation content.

[0026] The above-mentioned web page interface development internationalization method, device, computer equipment, computer-readable storage medium and computer program product display a language translation component in response to a selection operation of a target web page text element; the target web page element is a web page element with text content containing an internationalization key; in response to a trigger operation on the language translation component, a first translation content corresponding to the text content is obtained according to the internationalization key; a second translation content corresponding to part or all of the text content obtained through an auxiliary translation interface is obtained; and a target translation content corresponding to the text content is obtained according to the first translation content and the second translation content. In this application, a language translation component is formed through a friendly interactive method, and the translation mode can be directly entered to support other non-developers to participate in the development and maintenance of internationalization; through the internationalization key, the translation entry of the currently selected web page element can be quickly retrieved, which not only ensures the consistency of the translation content, but also reduces the possibility of misoperation; at the same time, through the auxiliary translation interface, real-time dynamic translation results can be generated when needed, ensuring the contextual accuracy and real-time nature of the translation, combining the first translation content with the second translation content to generate the target translation content, making translation management more flexible and personalized, thereby improving the development efficiency of the international development of the web page interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the drawings required for use in the embodiments of the present application or related technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0028] FIG1 is a schematic diagram of a flow chart of a method for internationalizing web page interface development in one embodiment;

[0029] FIG2 is a flow chart of a method for developing an internationalized web page interface based on a debug version in one embodiment;

[0030] FIG3 is a flow chart of a method for internationalizing web page interface development according to another embodiment;

[0031] FIG4 is a structural block diagram of a device for developing internationalization of a web page interface in one embodiment;

[0032] FIG. 5 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0033] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0034] In order to enable those skilled in the art to better understand the present application, the relevant technology is first introduced below.

[0035] Multilingual support refers to allowing applications to provide the same functionality and user experience in different language environments. This involves designing and implementing applications to dynamically adapt to different languages ​​without compromising functionality or usability. Developers can achieve this by using a variety of programming languages ​​and frameworks such as Java, JavaScript, and Vue.js.

[0036] Character encoding refers to different character sets and encoding schemes that are used in different language situations. To ensure that applications can correctly process and display characters in multiple languages, developers need to be familiar with various character encoding standards, such as UTF-8 or UTF-16, and use appropriate encoding methods in their code. Especially when dealing with languages ​​that do not use Latin alphabets, character representation can be more complex.

[0037] Localization refers to the process of adapting an application to a different cultural environment, ensuring that the content is not only translated but also adjusted to the format that conforms to regional habits, such as date format, currency symbol, time format, and number system. To simplify localization work, developers usually rely on localization libraries and tools such as moment.js, ReactIntl, etc., which provide the function of formatting content according to the user's specific locale settings.

[0038] In one embodiment, as shown in FIG. 1 , a method for internationalizing web page interface development is provided. This embodiment uses the method applied to a terminal as an example for illustration. The method includes the following steps:

[0039] Step S102: In response to a selection operation on a target webpage text element, a language translation component is displayed. The target webpage element is a webpage element having text content containing an internationalization key.

[0040] Among them, the target web page text element belongs to the management staff web page element with text content, and its form can be, for example, a button, a title, a menu item, or a paragraph text, etc. The target web page text element is integrated with the internationalization mechanism of the system, and its text content can contain internationalization keys related to specific languages of internationalization.

[0041] Among them, the internationalization key can be used as an identifier for associating the web page text element with multilingual translation content, and can be embedded into an attribute in HyperText Markup Language (HTML), such as "Product Name". The internationalization key data-i18n-key can be used to identify specific language text and associate it with the corresponding translation content. data-i18n-value is the value corresponding to the internationalization key data-i18n-key, and div refers to a block element in HTML.

[0042] Among them, the selection operation can be an operation in which the management staff selects a specific text element when interacting with the web page. This operation can be achieved through touch, keyboard navigation, etc.

[0043] Among them, the language translation component is used to display the translation result of the text content corresponding to the target web page text element, and it can be set to be displayed on the web page due to certain operations being triggered in the web page.

[0044] Exemplarily, the management staff touches and selects a certain web page text element (such as a product description paragraph) on the web page. The terminal detects the selection operation of the management staff, and the language translation component is displayed near, for example, this web page text element.

[0045] Step S104, in response to the trigger operation on the language translation component, obtain the first translation content corresponding to the text content according to the internationalization key.

[0046] Among them, the first translation content can be the standard translation content retrieved by the terminal from the server corresponding to the internationalization key. The first translation content can be a preset default translation, adapted to the language setting of the current page, used as the basic translation result of the terminal to be displayed to the management staff or for the management staff to further edit; it can also be empty, as the first setting of the internationalization key and the standard translation text, for the management staff to further edit.

[0047] Exemplarily, the management staff triggers the translation retrieval process by clicking the language translation component. The terminal locates the corresponding translation language file through the internationalization key of the target web page text element, points to the translation database of the server, and obtains the first translation content corresponding to the text content by the internationalization key.

[0048] Optionally, the terminal can also retrieve the translation content corresponding to the key from the local cache to improve the retrieval efficiency and avoid accessing the remote server for each operation. If there is no corresponding translation entry in the local cache, the terminal automatically initiates a server request to retrieve the first translation content in the remote database.

[0049] Step S106: obtaining second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface.

[0050] Among them, the auxiliary translation interface can be an external translation service or tool for generating real-time translation. The auxiliary translation interface can connect to an online translation service, such as machine translation or language model, to assist in providing translation content corresponding to the text content of the internationalization key. Unlike the preset translation in the system, the translation content generated by the auxiliary translation interface can be real-time and based on the latest data.

[0051] The second translation content is a translation result generated by the auxiliary translation interface. When the translation needs to be generated in real time or the first translation content cannot be obtained, the second translation content can be used to replace or supplement the first translation content. The second translation content can be the result of translating part of the selected text content, or it can be the complete translation result of the complete selected text content.

[0052] Exemplarily, the terminal checks whether the first translation content of the selected text content already exists or meets the requirements of the current language environment. If there is no suitable first translation content, the terminal calls the auxiliary translation interface. The terminal allows the manager to request the auxiliary translation interface to process only part of the text content, or to process the entire text content. After receiving the translation result through the auxiliary translation interface, the second translation content is generated and returned to the terminal.

[0053] Step S108: Obtain target translation content corresponding to the text content according to the first translation content and the second translation content.

[0054] The target translation content is the translation result that is ultimately presented to the management personnel, and can be obtained by comparing, selecting or combining the first translation content and the second translation content. The terminal can automatically or manually determine the target translation content based on logic or management personnel input to ensure that it is accurate, appropriate and meets the needs of the current language environment.

[0055] Exemplarily, the terminal automatically selects the first translation content or the second translation content as the target translation content according to a preset logical rule. For example, when the first translation content exists and is of high quality, the terminal can select the first translation content as the target translation content for final display. When the first translation content is missing, of low quality, or the management personnel explicitly request the use of dynamically generated translation, the terminal can use the second translation content.

[0056] Optionally, the terminal allows the administrator to manually select the target translation content, and by comparing the first translation content with the second translation content, the administrator determines the target translation content that is ultimately applied to the webpage display.

[0057] In the above-mentioned web page interface development internationalization method, by responding to the selection operation of the target web page text element, the language translation component is displayed; the target web page element is a web page element with text content containing an internationalization key; in response to the triggering operation of the language translation component, the first translation content corresponding to the text content is obtained according to the internationalization key; the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface is obtained; according to the first translation content and the second translation content, the target translation content corresponding to the text content is obtained. In this embodiment, a language translation component is formed through a friendly interactive method, and the translation mode can be directly entered to support other non-developers to participate in the development and maintenance of internationalization; through the internationalization key, the translation entry of the currently selected web page element can be quickly retrieved, which not only ensures the consistency of the translation content, but also reduces the possibility of misoperation; at the same time, through the auxiliary translation interface, real-time dynamic translation results can be generated when needed, ensuring the contextual accuracy and real-time nature of the translation, combining the first translation content with the second translation content to generate the target translation content, making the translation management more flexible and personalized, thereby improving the development efficiency of the internationalization development of the web page interface.

[0058] In an exemplary embodiment, in response to a selection operation on a target web page text element, before displaying a language translation component, the method further includes: if a mouse pass event on the target web page text element is monitored, determining that a selection operation has been received; and displaying the language translation component, including: displaying the language translation component according to the position of the target web page text element or the position of the mouse.

[0059] Exemplarily, the terminal first determines the administrator's selection operation through a mouse pass event. Before the administrator performs any operation, the terminal captures the administrator's initial interaction with the target webpage text element by setting a mouse event listener. When the terminal detects that the administrator's mouse is hovering over a target webpage text element, the terminal can determine that the element is "selected" and will display the language translation component (edit icon button) after further confirming the administrator's operation.

[0060] Specifically, when a web page is loaded, the terminal globally monitors all DOM (Document Object Model) elements with internationalization key (data-i18n-key) attributes through the document object. By monitoring the mouseover and mouseout events, it can detect whether the administrator moves the mouse over the target web page text element.

[0061] When the mouse pass event is triggered, the terminal will determine whether the administrator has hovered over the target web page text element for a long time. If the administrator's mouse moves out of the element in a short period of time, the edit icon button will not be displayed to avoid accidental selection. If the mouse stays over the element for more than the preset time, the terminal determines that the target web page text element has been selected, and then calls the showEditButton function to display the edit icon button. In this process, the showEditButton function adjusts the position of the edit icon button according to the current DOM element position information or the position of the mouse pointer.

[0062] When the administrator moves the mouse out of the target web page text element, the terminal automatically hides the edit icon button through the mouseout event to prevent too many interactive elements from interfering with the administrator's operation. The hideEditButton function is responsible for detecting the administrator's mouse out event and removing the edit icon button to ensure a clean interface.

[0063] In this embodiment, the global monitoring mechanism is used to achieve real-time monitoring and intelligent response of the target web page text elements. When the manager's mouse passes over the DOM element containing the internationalization key, the manager's interaction intention can be accurately captured and the edit icon button can be displayed. This mechanism provides a concise translation editing entrance without disturbing the manager, greatly improving the translation management efficiency of multilingual web pages.

[0064] In an exemplary embodiment, in response to a trigger operation on a language translation component, first translation content corresponding to the text content is obtained according to an internationalization key, including: in response to the trigger operation of the language translation component, a translation window is displayed, and candidate first translation content corresponding to the text content is requested from a server according to the internationalization key; the translation window displays a language translation form corresponding to the internationalization key; the language translation form displays a preset first translation content; and the first translation content is displayed in the language translation form according to the candidate first translation content and the preset first translation content.

[0065] The preset first translation content may be predefined and used to display a default translation result to the administrator when the webpage is first loaded. The preset first translation content provides a basic translation for the multilingual text in the webpage and is used to be displayed in the translation form for confirmation or modification by the administrator.

[0066] The candidate first translation content is the translation candidate content related to the internationalization key requested by the system from the server through the Representational State Transfer (RESTful) interface. The candidate first translation content can come from the dynamic update of the server or the translation record associated with the current page, and can include multiple language options to help managers select or refer to the translation content.

[0067] The translation window may be a modal window that pops up after the administrator clicks on the language translation component, and is used to display the translation form.

[0068] The language translation form is a part of the translation window, which is used to display the translation content corresponding to the currently selected target web page text. The language translation form includes but is not limited to the internationalization key, the preset first translation content related to the key, and the candidate first translation content. The administrator can edit, select and submit the translation content in the language translation form to finally determine the target translation content displayed on the page.

[0069] Specifically, when the administrator clicks on the language translation component in the page, the terminal triggers an operation of displaying a modal window.

[0070] After displaying the translation window, the terminal can obtain the multilingual translation content stored on the server through a RESTful interface request (GET). The data returned by the server includes candidate first translation content, which can be the update result of the system or other options in the multilingual version. After receiving the candidate first translation, the terminal fills the candidate first translation content into the translation form. The administrator can select or edit the preset first translation content and the candidate first translation content in the translation window. The terminal allows the administrator to manually modify the text in the translation form based on the candidate first translation content, and finally confirm and save the translation.

[0071] In this embodiment, by requesting the candidate translation content of the server through the RESTful interface, the administrator can be provided with translation options of multiple language versions, and the preset first translation content and the candidate translation content are displayed in the translation form, ensuring that the final translation text is more in line with the language environment and context requirements. At the same time, the display of the candidate translation content provides more references for the administrator, ensures the content consistency and accuracy of the multilingual web pages, and improves the international development efficiency of the web pages.

[0072] In an exemplary embodiment, the first translation content is displayed in a language translation form according to the candidate first translation content and the preset first translation content, including: if the candidate first translation content is empty, the preset first translation content is displayed as the first translation content in the language translation form; if the candidate first translation content is not empty, the candidate first translation content is displayed as the first translation content in the language translation form.

[0073] Specifically, when the administrator clicks on the language translation component and triggers the translation editing window, the terminal can request the candidate first translation content corresponding to the internationalization key (data-i18n-key) from the server through the RESTful interface. The RESTful interface / api / locale_values ​​obtains the candidate first translation content of the key in each language according to the provided data-i18n-key and returns it in JSON format. If some languages ​​have not been translated, the translation content returned by the server will be empty.

[0074] When the terminal receives the candidate first translation content from the server, when rendering the language translation form, the terminal chooses to display the candidate first translation content or the preset first translation content according to different conditions. If the candidate first translation content is empty, the terminal displays the preset first translation content in the language translation form. The preset first translation content can be the default translation defined when the terminal goes online, which is used to ensure the integrity and consistency of the translation content. If the candidate first translation content is not empty, the terminal gives priority to displaying the candidate first translation content returned by the server, indicating that the text has been updated or revised on the server side, and the administrator can view and confirm the candidate translation in the translation form.

[0075] In this embodiment, the final first translation content can be intelligently selected and displayed according to the different situations of the candidate first translation content and the preset first translation content. For the languages ​​that have been translated, the candidate translation content is displayed first; for the languages ​​that have not been translated, the preset first translation content is displayed to ensure the real-time and accuracy of the translation. This method greatly improves the flexibility and efficiency of international development and avoids the problem of incomplete or erroneous translation caused by the lack of candidate translations.

[0076] In an exemplary embodiment, the translation window also displays a language input box; before obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, it also includes: after the language translation form displays the first translation content, obtaining part or all of the text content input into the language input box; sending part or all of the text content to the server, so that the server obtains the second translation content corresponding to part or all of the text content through the auxiliary translation interface; after obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, it also includes: displaying the second translation content in the language translation form.

[0077] The language input box can be an interactive element in the translation window, which is used to receive text content manually input or modified by the administrator. The language input box allows the administrator to make further adjustments based on the existing translation content and provides a direct input operation interface. The administrator can edit the translation content of the currently displayed translation form through the prediction input box, and the system can call the auxiliary translation interface to generate the corresponding translation results based on the administrator's input content.

[0078] Specifically, when the administrator clicks on the language translation component, a translation window pops up on the terminal. The translation window includes a language input box for the administrator to enter or modify part or all of the text content. The administrator manually enters a new translation text in the language input box, or uses the content provided by the language input box for auxiliary translation. After the administrator enters part or all of the text content, the terminal sends the input text content to the server. After receiving the request, the server calls the external auxiliary translation interface to generate the corresponding second translation content. The second translation content is returned to the front end in JSON format. After receiving the translation result, the terminal renders it into a language translation form and displays it in the web page interface.

[0079] In this embodiment, by displaying the language input box, the manager can manually input part or all of the text content and flexibly control the translated text. With the help of the auxiliary translation interface, the terminal can generate the second translation content in real time, improving the translation management ability of multilingual web pages, especially suitable for complex web page environments that need to frequently update the translation content, and effectively reducing the burden of manual translation by introducing automated translation methods.

[0080] In an exemplary embodiment, after obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content, it also includes: displaying the target translation content in a language translation form; submitting the language translation form to the server so that the server replaces the text content of the target web page text element with the target translation content.

[0081] Specifically, after the target translation content is generated, the terminal dynamically displays it in the language translation form in the translation window. The target translation content can be the first translation content, or the second translation content generated by the auxiliary translation interface, or a combination of the two. The translation form not only displays the preset translation content, but also performs typesetting checks on the translation sentences to ensure that the presentation of the text in different languages ​​meets expectations. After confirming the target translation content, the terminal listens to the operation of the administrator submitting the translation form, and submits the confirmed target translation content to the server through the RESTful interface. After the server receives the target translation content, it will update the target translation content to the corresponding language file (such as locales / zh-CN / translations.json and locales / en-US / translations.json) so that the terminal can load new translation content later. When the server successfully receives and saves the target translation content, the terminal will automatically update the corresponding text elements on the web page according to the translation results returned by the server. Through this operation, the administrator can immediately see the presentation effect of the latest translation text on the page to ensure the accuracy of the translation content and the consistency of the context.

[0082] After the target webpage text elements are updated, the terminal provides a checking and verification mechanism to ensure that the submitted target translation content is displayed correctly on the page. Managers can check whether the translation sentences are accurate based on specific application scenarios and contexts, and adjust the text layout, alignment and other details to ensure the adaptability of the translated content in a multilingual environment.

[0083] Once the accuracy of the target translation content is confirmed, the translation files will be synchronized to the development environment and submitted to the version control system. Managers can further review and optimize these translation files in the project.

[0084] In this embodiment, through the RESTful interface, the system can dynamically upload the translation content confirmed by the user to the server and update the corresponding language file, so that the web page can load the latest translation text and present it immediately. This process ensures the accuracy of the translation content, the consistency of the context, and the rationality of the page layout, further improving the efficiency and maintenance capabilities of the international development of the web page interface.

[0085] In an exemplary embodiment, the version control system has two product-based version types, including release and debug. The release version is a formally released version that has been strictly tested and optimized, and does not contain code and functions related to the internationalization of web page development. The debug version contains code and functions for the internationalization of the web page interface development based on the product.

[0086] In a specific embodiment, the debugging process of the debug version by the administrator is shown in FIG2 .

[0087] At the beginning, the administrator needs to install or deploy the corresponding version of the debug type product. After the installation is complete, the administrator opens the web interface and enters the terminal debugging environment. In the debug environment, developers can edit and update the translation content in real time to ensure the correctness of multi-language support.

[0088] When the administrator moves the mouse on the web page and passes over the target web page text element that needs to be translated, the terminal will automatically detect the target web page text element and display an edit icon button. When the administrator's mouse hovers over the element, the terminal captures the administrator's interactive operation through the event listener and displays an editable button. When the administrator clicks the edit icon button, the terminal pops up a language translation window (Modal window).

[0089] In the Modal window, the administrator can see the first translation content corresponding to the internationalization key corresponding to the current target web page text element through the language translation form. In addition, the Modal window can include a language input box for displaying the translated versions of the text in different languages, allowing the administrator to edit.

[0090] Managers can view the second translation content generated through the auxiliary translation interface, such as the Generative Pre-trained Transformer (GPT) model or the online translation API. The terminal automatically generates the second translation content in the corresponding language by calling these translation services and fills it into the corresponding input box of the translation form. According to the first translation content and the second translation content, the target translation content corresponding to the target web page text element is obtained.

[0091] After the target translation content is generated, the manager can check and confirm the target translation content to ensure that the translation result is accurate and consistent with the context of the text. The manager can also directly translate and modify the translation content through auxiliary tools to ensure the rationality of the content and the coherence of the context. This step allows the manager to check and correct the translation content in different languages ​​one by one.

[0092] In this embodiment, by debugging the debug version, managers other than developers (such as designers, products, testers, etc.) can participate in international development and maintenance, so that the international development of the entire web page interface is no longer solely dependent on developers, thereby improving the efficiency of international development.

[0093] In order to enable those skilled in the art to better understand the above steps, the embodiment of the present application is illustrated below by using an example, but it should be understood that the embodiment of the present application is not limited to this.

[0094] In an exemplary embodiment, as shown in Figure 3, first, the terminal defines an international key and a corresponding preset translation value for a text element in a target web page. The international key is a unique identifier for identifying a text element in a specific language, and the preset value is usually the initial translation content of the terminal, which is used as a default display when the language file does not exist or there is no translation content.

[0095] Next, the terminal checks whether there is already a translation corresponding to the internationalized key in the language file (locale file). If the language file does not exist or the translation for the key is missing in the file, the terminal automatically uses the preset translation value.

[0096] After reading the language file, the terminal generates the HTML element in the web page according to the internationalization key and displays it in the page. At this time, a data-i18n-key attribute will be embedded in the HTML element, which is bound to the internationalization key for subsequent translation management operations.

[0097] The terminal sets event listeners for DOM elements with data-i18n-key attributes to capture the administrator's mouse events. When the user hovers over these elements, the terminal will display an edit button, allowing the user to click to modify the current translation content.

[0098] When the user clicks the Edit button, the terminal requests the server through the RESTful interface to obtain a list of all languages ​​supported by the current terminal and render the corresponding translation form. The form will display the translation status of the internationalization key in a multilingual environment and allow users to edit the translation content in different languages.

[0099] The terminal then obtains the translation content related to the internationalization key through the RESTful interface and fills it into the language translation form. Managers can view or modify these translation contents to ensure that the translation of each language meets expectations.

[0100] After the administrator has modified the translation content in the translation form, he can submit the form. After the terminal receives the translation content submitted by the administrator, it will send it to the server through an upload request (POST), and the server will save these updated translation contents to the corresponding language files. After the administrator submits the translation form, the terminal will automatically check and ensure that all translation contents have been successfully saved to the language file. Developers can check the correctness of the language file through the terminal's version control mechanism to ensure that the file content meets the internationalization requirements of the project. After confirmation, the translation file will be synchronously submitted to the code base for use in the next version release.

[0101] In this embodiment, through the RESTful interface, the terminal can dynamically obtain and update the translation content, reducing the complexity of manual management of language files; managers can directly edit the translation content through the translation form and submit the updated translation to the server, reducing the workload of developers; the terminal automatically checks and updates the language files to ensure the accuracy and consistency of the translation content, and synchronizes the modified files to the code library through version control, simplifying the international development process.

[0102] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0103] Based on the same inventive concept, the embodiment of the present application also provides a web page interface development internationalization device for implementing the web page interface development internationalization method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more web page interface development internationalization device embodiments provided below can refer to the limitations of the web page interface development internationalization method above, and will not be repeated here.

[0104] In an exemplary embodiment, as shown in FIG. 4 , a web page interface development internationalization device is provided, including: a language translation component display module 410, a first translation content acquisition module 420, a second translation content acquisition module 430 and a translation integration module 440, wherein:

[0105] The language translation component display module 410 is used to display the language translation component in response to a selection operation on a target web page text element; the target web page element is a web page element having text content containing an internationalization key;

[0106] A first translation content acquisition module 420, configured to acquire first translation content corresponding to the text content according to the internationalization key in response to a trigger operation on the language translation component;

[0107] A second translation content acquisition module 430 is used to acquire a second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface;

[0108] The translation integration module 440 is used to obtain target translation content corresponding to the text content according to the first translation content and the second translation content.

[0109] In an exemplary embodiment, the language translation component display module 410 is further used to determine that the selection operation has been received if a mouse pass event on the target web page text element is monitored; the language translation component display module 410 is used to display the language translation component according to the position of the target web page text element or the position of the mouse.

[0110] In an exemplary embodiment, the first translation content acquisition module 420 is also used to display a translation window in response to a trigger operation of the language translation component, and request the server for candidate first translation content corresponding to the text content according to the internationalization key; the translation window displays a language translation form corresponding to the internationalization key; the language translation form displays a preset first translation content; and the first translation content is displayed in the language translation form according to the candidate first translation content and the preset first translation content.

[0111] In an exemplary embodiment, the first translation content acquisition module 420 is further configured to display the preset first translation content as the first translation content in a language translation form if the candidate first translation content is empty; and display the candidate first translation content as the first translation content in a language translation form if the candidate first translation content is not empty.

[0112] In an exemplary embodiment, the first translation content acquisition module 420 is also used to obtain part or all of the text content input into the language input box after the first translation content is displayed in the language translation form; send part or all of the text content to the server, so that the server can obtain the second translation content corresponding to part or all of the text content through the auxiliary translation interface; the second translation content acquisition module 430 is also used to display the second translation content in the language translation form.

[0113] In an exemplary embodiment, the translation integration module 440 is further configured to display the target translation content in the language translation form; and submit the language translation form to the server so that the server replaces the text content of the target webpage text element with the target translation content.

[0114] Each module in the above-mentioned web page interface development internationalization device can be implemented in whole or in part by software, hardware and their combination. Each of the above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the corresponding operations of each of the above modules.

[0115] In an exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be shown in FIG5. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, the memory, and the input / output interface are connected via a system bus, and the communication interface, the display unit, and the input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner may be implemented through WIFI, a mobile cellular network, near field communication (NFC) or other technologies. When the computer program is executed by the processor, a method for internationalizing the development of a web page interface is implemented. The display unit of the computer device is used to form a visually visible picture, which may be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device shell, or an external keyboard, touchpad or mouse.

[0116] Those skilled in the art will understand that the structure shown in FIG. 5 is merely a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0117] In one embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above-mentioned method embodiments when executing the computer program.

[0118] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0119] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0120] It should be noted that 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 relevant data must comply with relevant regulations.

[0121] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, an artificial intelligence (AI) processor, etc., but are not limited to this.

[0122] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0123] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A method for internationalizing web page interface development, characterized in that: The method comprises: In response to a selection operation on a target webpage text element, a language translation component is displayed; the target webpage element is a webpage element having text content containing an internationalization key; In response to a triggering operation on the language translation component, obtaining a first translation content corresponding to the text content according to the internationalization key; Obtaining second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface; According to the first translation content and the second translation content, a target translation content corresponding to the text content is obtained.

2. The method according to claim 1, characterized in that Before displaying the language translation component in response to the selection operation of the target webpage text element, the method further includes: If a mouse-over event of the target webpage text element is monitored, it is determined that the selection operation is received; The display language translation component comprises: The language translation component is displayed according to the position of the target webpage text element or the position of the mouse.

3. The method according to claim 1, characterized in that The step of obtaining, in response to the triggering operation on the language translation component, first translation content corresponding to the text content according to the internationalization key includes: In response to the triggering operation of the language translation component, a translation window is displayed, and a candidate first translation content corresponding to the text content is requested from a server according to the internationalization key; the translation window displays a language translation form corresponding to the internationalization key; the language translation form displays a preset first translation content; The first translation content is displayed in the language translation form according to the candidate first translation content and the preset first translation content.

4. The method according to claim 3, characterized in that The displaying the first translation content in the language translation form according to the candidate first translation content and the preset first translation content includes: If the candidate first translation content is empty, displaying the preset first translation content as the first translation content in the language translation form; If the candidate first translation content is not empty, the candidate first translation content is displayed in the language translation form as the first translation content.

5. The method according to claim 3, characterized in that: The translation window also displays a language input box; Before obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, the method further includes: After the language translation form displays the first translation content, part or all of the text content input into the language input box is obtained; Sending part or all of the text content to the server, so that the server can obtain the second translation content corresponding to part or all of the text content through the auxiliary translation interface; After obtaining the second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface, the method further includes: The second translation content is displayed in the language translation form.

6. The method according to claim 5, characterized in that After obtaining the target translation content corresponding to the text content according to the first translation content and the second translation content, the method further includes: Displaying the target translation content in the language translation form; The language translation form is submitted to the server so that the server replaces the text content of the target webpage text element with the target translation content.

7. A web page interface development internationalization device, characterized in that: The device comprises: A language translation component display module, for displaying a language translation component in response to a selection operation on a target web page text element; the target web page element is a web page element having text content containing an internationalization key; A first translation content acquisition module, configured to acquire first translation content corresponding to the text content according to the internationalization key in response to a trigger operation on the language translation component; A second translation content acquisition module, used to acquire second translation content corresponding to part or all of the text content obtained through the auxiliary translation interface; The translation integration module is used to obtain target translation content corresponding to the text content according to the first translation content and the second translation content.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images