Changeset 12633

Timestamp:

06/08/2023 03:07:08 AM (3 years ago)

Author:

akirk

Message:

Translate: Use the streaming review response from ChatGPT

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers

Files:

• includes/class-gp-translation-helpers.php (modified) (1 diff)
• js/editor.js (modified) (17 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/includes/class-gp-translation-helpers.php

@@ -402 +402 @@
             '$gp_comment_feedback_settings',
             array(
-                'url'             => admin_url( 'admin-ajax.php' ),
-                'nonce'           => wp_create_nonce( 'gp_comment_feedback' ),
-                'locale_slug'     => $translation_set['locale_slug'],
-                'language'        => $gp_locale ? $gp_locale->english_name : 'Unknown',
-                'has_openai_key'  => !! apply_filters( 'gp_get_openai_key', null ),
-                'comment_reasons' => Helper_Translation_Discussion::get_comment_reasons( $translation_set['locale_slug'] ),
+                'url'                => admin_url( 'admin-ajax.php' ),
+                'nonce'              => wp_create_nonce( 'gp_comment_feedback' ),
+                'locale_slug'        => $translation_set['locale_slug'],
+                'language'           => $gp_locale ? $gp_locale->english_name : 'Unknown',
+                'openai_key'         => apply_filters( 'gp_get_openai_key', null ),
+                'openai_temperature' => apply_filters( 'gp_get_openai_temperature', 0.8 ),
+                'comment_reasons'    => Helper_Translation_Discussion::get_comment_reasons( $translation_set['locale_slug'] ),
             )
         );

sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js

@@ -1 @@
-/* global $gp, $gp_translation_helpers_editor, wpApiSettings, $gp_comment_feedback_settings, console, $gp_editor_options  */
+/* global $gp, $gp_translation_helpers_editor, wpApiSettings, $gp_comment_feedback_settings, console, $gp_editor_options, EventSource */
 /* eslint camelcase: "off" */
 jQuery( function( $ ) {
-    var focusedRowId = '';
+    let focusedRowId = '';
     // When a user clicks on a sidebar tab, the visible tab and div changes.
     $gp.editor.table.on( 'click', '.sidebar-tabs li', function() {
-        var tab = $( this );
-        var tabId = tab.attr( 'data-tab' );
-        var divId = tabId.replace( 'tab', 'div' );
-        var originalId = tabId.replace( /[^\d-]/g, '' ).replace( /^-+/g, '' );
+        const tab = $( this );
+        const tabId = tab.attr( 'data-tab' );
+        const divId = tabId.replace( 'tab', 'div' );
+        const originalId = tabId.replace( /[^\d-]/g, '' ).replace( /^-+/g, '' );
         change_visible_tab( tab );
         change_visible_div( divId, originalId );
@@ -17 +17 @@
     // divs with the content) for the right sidebar are updated.
     $gp.editor.table.on( 'focus', 'tr.editor textarea.foreign-text', function() {
-        var tr = $( this ).closest( 'tr.editor' );
-        var rowId = tr.attr( 'row' );
-        var translation_status = tr.find( '.panel-header' ).find( 'span' ).html();
+        const tr = $( this ).closest( 'tr.editor' );
+        const rowId = tr.attr( 'row' );
+        const translation_status = tr.find( '.panel-header' ).find( 'span' ).html();
 
         if ( focusedRowId === rowId ) {
@@ -26 +26 @@
         focusedRowId = rowId;
         loadTabsAndDivs( tr );
-        if ( $gp_comment_feedback_settings.has_openai_key && $gp_editor_options.can_approve && ( 'waiting' === translation_status || 'fuzzy' === translation_status ) ) {
+        if ( $gp_comment_feedback_settings.openai_key && $gp_editor_options.can_approve && ( 'waiting' === translation_status || 'fuzzy' === translation_status ) ) {
             fetchOpenAIReviewResponse( rowId, tr, false );
         } else {
@@ -34 +34 @@
 
     $gp.editor.table.on( 'click', 'a.retry-auto-review', function( event ) {
-        var tr = $( this ).closest( 'tr.editor' );
-        var rowId = tr.attr( 'row' );
+        const tr = $( this ).closest( 'tr.editor' );
+        const rowId = tr.attr( 'row' );
         event.preventDefault();
         tr.find( '.openai-review .auto-review-result' ).html( '' );
@@ -44 +44 @@
     // Shows/hides the reply form for a comment in the discussion.
     $gp.editor.table.on( 'click', 'a.comment-reply-link', function( event ) {
-        var commentId = $( this ).attr( 'data-commentid' );
+        const commentId = $( this ).attr( 'data-commentid' );
         event.preventDefault();
         $( '#comment-reply-' + commentId ).toggle().find( 'textarea' ).focus();
@@ -58 +58 @@
     // to avoid creating empty posts (without comments).
     function createShadowPost( formdata, submitComment ) {
-        var data = {
+        const data = {
             action: 'create_shadow_post',
             data: formdata,
@@ -68 +68 @@
                 type: 'POST',
                 url: wpApiSettings.admin_ajax_url,
-                data: data,
+                data,
             }
         ).done(
@@ -80 +80 @@
     // Sends the new comment or the reply to an existing comment.
     $gp.editor.table.on( 'submit', '.meta.discussion .comment-form', function( e ) {
-        var $commentform = $( e.target );
-        var postId = $commentform.attr( 'id' ).split( '-' )[ 1 ];
-        var divDiscussion = $commentform.closest( '.meta.discussion' );
-        var rowId = divDiscussion.attr( 'data-row-id' );
-        var requestUrl = $gp_translation_helpers_editor.translation_helper_url + rowId + '?nohc';
-
-        var submitComment = function( formdata ) {
+        const $commentform = $( e.target );
+        const postId = $commentform.attr( 'id' ).split( '-' )[ 1 ];
+        const divDiscussion = $commentform.closest( '.meta.discussion' );
+        const rowId = divDiscussion.attr( 'data-row-id' );
+        const requestUrl = $gp_translation_helpers_editor.translation_helper_url + rowId + '?nohc';
+
+        const submitComment = function( formdata ) {
             $.ajax( {
                 url: wpApiSettings.root + 'wp/v2/comments',
                 method: 'POST',
-                beforeSend: function( xhr ) {
+                beforeSend( xhr ) {
                     xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
                 },
@@ -108 +108 @@
         };
 
-        var formdata = {
+        const formdata = {
             content: $commentform.find( 'textarea[name=comment]' ).val(),
             parent: $commentform.find( 'input[name=comment_parent]' ).val(),
@@ -148 +148 @@
     // Copies the translation from another language to the current translation.
     $gp.editor.table.on( 'click', 'button.sidebar-other-locales', function() {
-        var textToCopy = $( this ).closest( 'li' ).find( 'a' ).text();
-        var textareaToPaste = $( this ).closest( '.editor' ).find( 'textarea.foreign-text' );
-        var selectionStart = textareaToPaste.get( 0 ).selectionStart;
-        var selectionEnd = textareaToPaste.get( 0 ).selectionEnd;
-        var textToCopyLength = textToCopy.length;
+        const textToCopy = $( this ).closest( 'li' ).find( 'a' ).text();
+        const textareaToPaste = $( this ).closest( '.editor' ).find( 'textarea.foreign-text' );
+        let selectionStart = textareaToPaste.get( 0 ).selectionStart;
+        let selectionEnd = textareaToPaste.get( 0 ).selectionEnd;
+        const textToCopyLength = textToCopy.length;
         textareaToPaste.val( textareaToPaste.val().substring( 0, selectionStart ) +
             textToCopy +
@@ -168 +168 @@
     // table has only one, so with the double click we load the content sidebar.
     // eslint-disable-next-line vars-on-top
-    var previewRows = $gp.editor.table.find( 'tr.preview' );
+    const previewRows = $gp.editor.table.find( 'tr.preview' );
     if ( 1 === previewRows.length ) {
         $( 'tr.preview td' ).trigger( 'dblclick' );
@@ -179 +179 @@
      */
     function change_visible_tab( tab ) {
-        var tabId = tab.attr( 'data-tab' );
+        const tabId = tab.attr( 'data-tab' );
         tab.siblings().removeClass( 'current' );
         tab.parents( '.sidebar-tabs ' ).find( '.helper' ).removeClass( 'current' );
@@ -207 +207 @@
      */
     function add_copy_button( sidebarDiv ) {
-        var lis = $( sidebarDiv + ' .other-locales li' );
+        const lis = $( sidebarDiv + ' .other-locales li' );
         lis.each( function() {
-            var html = $( this ).html();
+            let html = $( this ).html();
             html += '<button class="sidebar-other-locales button is-small copy-suggestion"> Copy </button>';
             $( this ).html( html );
@@ -221 +221 @@
      */
     function loadTabsAndDivs( element ) {
-        var originalId = element.closest( 'tr' ).attr( 'id' ).substring( 7 );
-        var requestUrl = $gp_translation_helpers_editor.translation_helper_url + originalId + '?nohc';
+        const originalId = element.closest( 'tr' ).attr( 'id' ).substring( 7 );
+        const requestUrl = $gp_translation_helpers_editor.translation_helper_url + originalId + '?nohc';
         $.getJSON( requestUrl, function( data ) {
             $( '[data-tab="sidebar-tab-discussion-' + originalId + '"]' ).html( 'Discussion&nbsp;(' + data[ 'helper-translation-discussion-' + originalId ].count + ')' );
@@ -234 +234 @@
     }
 
+    function EventStreamParser( onParse ) {
+        // npm eventsource-parser
+        // MIT License
+        // Copyright (c) 2023 Espen Hovlandsdal <espen@hovlandsdal.com>
+
+        // Processing state
+        let isFirstChunk;
+        let buffer;
+        let startingPosition;
+        let startingFieldLength;
+
+        // Event state
+        let eventId;
+        let eventName;
+        let data;
+
+        reset();
+        return { feed, reset };
+
+        function reset() {
+            isFirstChunk = true;
+            buffer = '';
+            startingPosition = 0;
+            startingFieldLength = -1;
+
+            eventId = undefined;
+            eventName = undefined;
+            data = '';
+        }
+
+        function feed( chunk ) {
+            buffer = buffer ? buffer + chunk : chunk;
+
+            // Strip any UTF8 byte order mark (BOM) at the start of the stream.
+            // Note that we do not strip any non - UTF8 BOM, as eventsource streams are
+            // always decoded as UTF8 as per the specification.
+            if ( isFirstChunk && hasBom( buffer ) ) {
+                buffer = buffer.slice( 3 );
+            }
+
+            isFirstChunk = false;
+
+            // Set up chunk-specific processing state
+            const length = buffer.length;
+            let position = 0;
+            let discardTrailingNewline = false;
+
+            // Read the current buffer byte by byte
+            while ( position < length ) {
+                // EventSource allows for carriage return + line feed, which means we
+                // need to ignore a linefeed character if the previous character was a
+                // carriage return
+                // @todo refactor to reduce nesting, consider checking previous byte?
+                // @todo but consider multiple chunks etc
+                if ( discardTrailingNewline ) {
+                    if ( buffer[ position ] === '\n' ) {
+                        ++position;
+                    }
+                    discardTrailingNewline = false;
+                }
+
+                let lineLength = -1;
+                let fieldLength = startingFieldLength;
+                let character;
+
+                for ( let index = startingPosition; lineLength < 0 && index < length; ++index ) {
+                    character = buffer[ index ];
+                    if ( character === ':' && fieldLength < 0 ) {
+                        fieldLength = index - position;
+                    } else if ( character === '\r' ) {
+                        discardTrailingNewline = true;
+                        lineLength = index - position;
+                    } else if ( character === '\n' ) {
+                        lineLength = index - position;
+                    }
+                }
+
+                if ( lineLength < 0 ) {
+                    startingPosition = length - position;
+                    startingFieldLength = fieldLength;
+                    break;
+                } else {
+                    startingPosition = 0;
+                    startingFieldLength = -1;
+                }
+
+                parseEventStreamLine( buffer, position, fieldLength, lineLength );
+
+                position += lineLength + 1;
+            }
+
+            if ( position === length ) {
+                // If we consumed the entire buffer to read the event, reset the buffer
+                buffer = '';
+            } else if ( position > 0 ) {
+                // If there are bytes left to process, set the buffer to the unprocessed
+                // portion of the buffer only
+                buffer = buffer.slice( position );
+            }
+        }
+
+        function parseEventStreamLine(
+            lineBuffer,
+            index,
+            fieldLength,
+            lineLength
+        ) {
+            if ( lineLength === 0 ) {
+                // We reached the last line of this event
+                if ( data.length > 0 ) {
+                    onParse( {
+                        type: 'event',
+                        id: eventId,
+                        event: eventName || undefined,
+                        data: data.slice( 0, -1 ), // remove trailing newline
+                    } );
+
+                    data = '';
+                    eventId = undefined;
+                }
+                eventName = undefined;
+                return;
+            }
+
+            const noValue = fieldLength < 0;
+            const field = lineBuffer.slice( index, index + ( noValue ? lineLength : fieldLength ) );
+            let step = 0;
+
+            if ( noValue ) {
+                step = lineLength;
+            } else if ( lineBuffer[ index + fieldLength + 1 ] === ' ' ) {
+                step = fieldLength + 2;
+            } else {
+                step = fieldLength + 1;
+            }
+
+            const position = index + step;
+            const valueLength = lineLength - step;
+            const value = lineBuffer.slice( position, position + valueLength ).toString();
+
+            if ( field === 'data' ) {
+                data += value ? `${ value }\n` : '\n';
+            } else if ( field === 'event' ) {
+                eventName = value;
+            } else if ( field === 'id' && ! value.includes( '\u0000' ) ) {
+                eventId = value;
+            } else if ( field === 'retry' ) {
+                const retry = parseInt( value, 10 );
+                if ( ! Number.isNaN( retry ) ) {
+                    onParse( { type: 'reconnect-interval', value: retry } );
+                }
+            }
+        }
+        function hasBom( b ) {
+            return [ 239, 187, 191 ].every( ( charCode, index ) => b.charCodeAt( index ) === charCode );
+        }
+    }
+
+    async function invokeChatGPT( prompt, response_span ) {
+        const request = {
+            model: 'gpt-3.5-turbo',
+            messages: prompt,
+            temperature: parseFloat( $gp_comment_feedback_settings.openai_temperature ),
+            stream: true,
+        };
+        let result = '';
+        const parser = EventStreamParser( function( event ) {
+            if ( event.type === 'event' ) {
+                if ( event.data !== '[DONE]' ) {
+                    result += JSON.parse( event.data ).choices[ 0 ].delta.content || '';
+                    response_span.text( result );
+                }
+            } else if ( event.type === 'invalid_request_error' ) {
+                response_span.text( event.value );
+            } else if ( event.type === 'reconnect-interval' ) {
+                console.log( 'We should set reconnect interval to %d milliseconds', event.value );
+            }
+        } );
+
+        let response = await fetch(
+            'https://api.openai.com/v1/chat/completions',
+            {
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${ $gp_comment_feedback_settings.openai_key }`,
+                },
+                method: 'POST',
+                body: JSON.stringify( request ),
+            }
+        );
+
+        for await (const value of response.body?.pipeThrough(new TextDecoderStream())) {
+            parser.feed(value)
+        }
+    }
+
     /**
      * Fetch translation review from OpenAI.
@@ -239 +435 @@
      * @param {string}  rowId      The row-id attribute of the current row.
      * @param {string}  currentRow The current row.
-     * @param {boolean} isRetry    The current row.
      */
     function fetchOpenAIReviewResponse( rowId, currentRow, isRetry ) {
-        var payload = {};
-        var data = {};
-        var original_str = currentRow.find( '.original' );
-        var glossary_prompt = '';
-        var translation = currentRow.find( '.foreign-text:first' ).val();
+        const messages = [];
+        const original_str = currentRow.find( '.original' );
+        let glossary_prompt = '';
+        let result = '';
 
         $.each( $( original_str ).find( '.glossary-word' ), function( k, word ) {
@@ -259 +453 @@
 
         if ( '' !== glossary_prompt ) {
-            glossary_prompt = 'You are required to follow these rules, ' + glossary_prompt + 'for words found in the English text you are translating.';
-        }
-        payload.language = $gp_comment_feedback_settings.language;
-        payload.original = currentRow.find( '.original-raw' ).text();
-        payload.translation = translation;
-        payload.glossary_query = glossary_prompt;
-        payload.is_retry = isRetry;
-
-        data = {
-            action: 'fetch_openai_review',
-            data: payload,
-            _ajax_nonce: $gp_comment_feedback_settings.nonce,
-        };
-
-        $.ajax(
-            {
-                type: 'POST',
-                url: typeof window.useThinFetch !== 'undefined' && window.useThinFetch ? '/wp-content/plugins/wporg-gp-translation-suggestions/ajax-fetch-openai-review.php' : $gp_comment_feedback_settings.url,
-                data: data,
-            }
-        ).done(
-            function( response ) {
-                currentRow.find( '.openai-review .suggestions__loading-indicator' ).hide();
-                if ( response.success ) {
-                    currentRow.find( '.openai-review .auto-review-result' ).html( '<h4>Review by ChatGPT' ).append( $( '<span/>' ).text( response.data.review + ' (' + response.data.time_taken.toFixed( 2 ) + 's)' ) );
-                } else if ( 404 === response.data.status ) {
-                    currentRow.find( '.openai-review' ).hide();
-                    return;
-                } else {
-                    currentRow.find( '.openai-review .auto-review-result' ).text( 'Error ' + response.data.status + ' : ' + response.data.error );
-                }
-                currentRow.find( '.openai-review .auto-review-result' ).append( ' <a href="#" class="retry-auto-review">Retry</a>' );
-            }
-        ).fail(
-            function( xhr, msg ) {
-                /* eslint no-console: ["error", { allow: ["error"] }] */
-                console.error( data );
-            }
-        );
+            messages.push( {
+                role: 'system',
+                content: 'You are required to follow these rules, ' + glossary_prompt + 'for words found in the English text you are translating.',
+            } );
+        }
+        messages.push( {
+            role: 'system',
+            content: ( isRetry ? 'Are you sure that ' : '' ) + 'For the english text  "' + currentRow.find( '.original-raw' ).text() + '", is "' + currentRow.find( '.foreign-text:first' ).val() + '" a correct translation in ' + $gp_comment_feedback_settings.language + '? Don\'t repeat the translation if it is correct and point out differences if there are any.',
+        } );
+
+        currentRow.find( '.openai-review .suggestions__loading-indicator' ).hide();
+        currentRow.find( '.openai-review .auto-review-result' ).html( '<h4>Review by ChatGPT' ).append( '<span style="white-space: pre-line">' );
+        invokeChatGPT( messages, currentRow.find( '.openai-review .auto-review-result span' ) ).then(()=>currentRow.find( '.openai-review .auto-review-result' ).append( ' <a href="#" class="retry-auto-review">Retry</a>' ));
     }
 } );