WordPress.org
Get WordPress

Making WordPress.org

Changeset 12511


Ignore:
Timestamp:
03/29/2023 02:13:09 PM (3 years ago)
Author:
amieiro
Message:

Translate: Add the backend items to support OpenAI and DeepL

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php

    r12406 r12511  
    3232    [ 'gp-editor', 'autosize' ],
    3333    filemtime( __DIR__ . '/js/editor.js' )
     34);
     35
     36wp_localize_script(
     37    'wporg-translate-editor',
     38    'wporgEditorSettings',
     39    array(
     40        'nonce' => wp_create_nonce( 'wporg-editor-settings' ),
     41    )
    3442);
    3543

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js

    r11732 r12511  
    22    var $html = $( 'html' );
    33    var $document = $( document );
     4    var $openAITranslationsUsed = [];
     5    var $deeplTranslationsUsed = [];
    46
    57    function checkStorage() {
    … …  
    6870
    6971        autosize( $textarea );
     72    }
     73
     74    /**
     75     * Adds the suggestion to the translation in an array, and removes the previous suggestions, so
     76     * we only store the last one in the database, using the saveExternalSuggestions() function.
     77     *
     78     * @return {void}
     79     */
     80    function addSuggestion() {
     81        var $row = $( this );
     82        var $originalId = $row.closest( 'tr' ).attr( 'id' ).substring( 7 );
     83        var $CSSclass = $row.attr( 'class' );
     84        if ( $CSSclass.indexOf( 'openai' ) > -1 ) {
     85            $openAITranslationsUsed[ $originalId ] = $row.find( '.translation-suggestion__translation' ).text();
     86            $deeplTranslationsUsed.splice( $originalId, 1 );
     87        } else if ( $CSSclass.indexOf( 'deepl' ) > -1 ) {
     88            $deeplTranslationsUsed[ $originalId ] = $row.find( '.translation-suggestion__translation' ).text();
     89            $openAITranslationsUsed.splice( $originalId, 1 );
     90        }
     91    }
     92
     93    /**
     94     * Saves the number of external suggestions used and used without modification.
     95     *
     96     * @return {void}
     97     **/
     98    function saveExternalSuggestions() {
     99        var $button = $( this );
     100        var $row = $button.closest( 'tr.editor' );
     101        var $originalId = $row.attr( 'id' ).substring( 7 );
     102        var $translation = $row.find( 'textarea' ).val();
     103        var $data = {
     104            nonce: wporgEditorSettings.nonce,
     105            translation: $translation,
     106            openAITranslationsUsed: $openAITranslationsUsed[$originalId],
     107            deeplTranslationsUsed: $deeplTranslationsUsed[$originalId]
     108        };
     109        $.ajax({
     110            url: '/-save-external-suggestions',
     111            type: 'POST',
     112            data: $data,
     113        });
    70114    }
    71115
    … …  
    277321                .on( 'click', 'button.translation-actions__copy', $gp.editor.hooks.copy )
    278322                .on( 'click', 'button.translation-actions__insert-tab', $gp.editor.hooks.tab )
     323                .on( 'click', 'button.translation-actions__save', saveExternalSuggestions )
    279324                .on( 'click', 'button.translation-actions__save', $gp.editor.hooks.ok )
    280325                .on( 'click', 'button.translation-actions__help', openHelpModal )
    … …  
    283328                .on( 'focus', 'textarea', textareaAutosize )
    284329                .on( 'click', 'summary', toggleDetails )
    285                 .on( 'click', 'button.button-menu__toggle', toggleLinkMenu );
     330                .on( 'click', 'button.button-menu__toggle', toggleLinkMenu )
     331                .on( 'click', '.translation-suggestion.with-tooltip.openai', addSuggestion )
     332                .on( 'click', '.translation-suggestion.with-tooltip.deepl', addSuggestion );
    286333        }
    287334    })( $gp.editor.install_hooks );

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/settings-edit.php

    r11837 r12511  
    2323    );
    2424}
     25
     26$gp_external_translations = get_user_option( 'gp_external_translations' );
    2527?>
    2628
    2729<table class="form-table">
    2830    <tr>
    29         <th><label for="per_page"><?php _e( 'Number of items per page:', 'glotpress' ); ?></label></th>
     31        <th><label for="per_page"><?php esc_html_e( 'Number of items per page:', 'glotpress' ); ?></label></th>
    3032        <td><input type="number" id="per_page" name="per_page" value="<?php echo esc_attr( $gp_per_page ); ?>"/></td>
    3133    </tr>
    3234    <tr>
    33         <th><label for="default_sort[by]"><?php _e( 'Default Sort By:', 'glotpress' ); ?></label></th>
     35        <th><label for="default_sort[by]"><?php esc_html_e( 'Default Sort By:', 'glotpress' ); ?></label></th>
    3436        <td>
    3537            <?php
    … …  
    4143    </tr>
    4244    <tr>
    43         <th><label for="default_sort[how]"><?php _e( 'Default Sort Order:', 'glotpress' ); ?></label></th>
     45        <th><label for="default_sort[how]"><?php esc_html_e( 'Default Sort Order:', 'glotpress' ); ?></label></th>
    4446        <td>
    4547            <?php
    … …  
    6163         and I have to modify the GlotPress core to add a new configuration item. -->
    6264    <tr>
    63         <th><label for="default_sort[notifications_optin]"><?php _e( 'I want to receive notifications of discussions:', 'glotpress' ); ?></label></th>
     65        <th><label for="default_sort[notifications_optin]"><?php esc_html_e( 'I want to receive notifications of discussions:', 'glotpress' ); ?></label></th>
    6466        <td><input type="checkbox" id="default_sort[notifications_optin]" name="default_sort[notifications_optin]" <?php gp_checked( 'on' == gp_array_get( $gp_default_sort, 'notifications_optin', 'off' ) ); ?> /></td>
    6567    </tr>
     68    <tr>
     69        <th>
     70            <h4><?php esc_html_e( 'External translating services', 'glotpress' ); ?></h4>
     71        </th>
     72    </tr>
     73    <tr>
     74        <th><label for="default_sort[external_services_exclude_some_status]"><?php esc_html_e( 'Don\'t use OpenAI and DeepL with translations in current, rejected or old status.', 'glotpress' ); ?></label></th>
     75        <td><input type="checkbox" id="default_sort[external_services_exclude_some_status]" name="default_sort[external_services_exclude_some_status]" <?php gp_checked( 'on' == gp_array_get( $gp_default_sort, 'external_services_exclude_some_status', 'off' ) ); ?> /></td>
     76    </tr>
     77    <tr>
     78        <th>
     79            <h4><?php esc_html_e( 'OpenAI (ChatGPT) settings', 'glotpress' ); ?></h4>
     80        </th>
     81    </tr>
     82    <tr>
     83        <th><label for="default_sort[openai_api_key]">
     84                <?php esc_html_e( 'OpenAI API Key', 'glotpress' ); ?>
     85            </label>
     86                    <?php
     87                    if ( gp_array_get( $gp_external_translations, 'openai_translations_used', 0 ) > 0 ) {
     88                        echo '<br>';
     89                        echo '<small>';
     90                        /* translators: Number of OpenAI translations used. */
     91                        echo esc_html( sprintf( _n( '%s OpenAI translation used:', '%s OpenAI translations used:', 'glotpress' ), number_format_i18n( gp_array_get( $gp_external_translations, 'openai_translations_used', 0 ) ) ) );
     92                        if ( gp_array_get( $gp_external_translations, 'openai_same_translations_used', 0 ) > 0 ) {
     93                            echo ' ' . esc_html(
     94                                sprintf(
     95                                /* translators: 1: Number of OpenAI translations used with modifications. 2: Number of OpenAI translations used without modifications. */
     96                                    __( '%1$s with modifications and %2$s without modifications.', 'glotpress' ),
     97                                    number_format_i18n( gp_array_get( $gp_external_translations, 'openai_translations_used', 0 ) - gp_array_get( $gp_external_translations, 'openai_same_translations_used', 0 ) ),
     98                                    number_format_i18n( gp_array_get( $gp_external_translations, 'openai_same_translations_used', 0 ) ),
     99                                )
     100                            );
     101                        }
     102                        echo '</small>';
     103                    }
     104                    ?>
     105                <br>
     106                <a href="https://platform.openai.com/account/usage" target="_blank"><small>
     107                    <?php
     108                    $openai_tokens_used = gp_array_get( $gp_external_translations, 'openai_tokens_used', 0 );
     109                    if ( $openai_tokens_used > 0 ) {
     110                        /* translators: Number of OpenAI tokens used. */
     111                        echo esc_html( sprintf( __( 'OpenAI tokens used: %s', 'glotpress' ), number_format_i18n( $openai_tokens_used ) ) );
     112                    }
     113                    ?>
     114                </small></a>
     115                <br>
     116                <br>
     117            </th>
     118        <td><input type="text" class="openai_api_key" id="default_sort[openai_api_key]" name="default_sort[openai_api_key]" value="<?php echo esc_html( gp_array_get( $gp_default_sort, 'openai_api_key', '' ) ); ?>" placeholder="Enter your OpenAI API key" /></td>
     119    </tr>
     120    <tr>
     121        <th><label for="default_sort[openai_custom_prompt]"><?php esc_html_e( 'Custom Prompt', 'glotpress' ); ?></label></th>
     122        <td><textarea class="openai_custom_prompt" id="default_sort[openai_custom_prompt]" name="default_sort[openai_custom_prompt]" placeholder="Enter your custom prompt for ChatGPT translation suggestions"><?php echo esc_html( gp_array_get( $gp_default_sort, 'openai_custom_prompt', '' ) ); ?></textarea></td>
     123    </tr>
     124    <tr>
     125        <th><label for="default_sort[openai_temperature]"><?php esc_html_e( 'Temperature', 'glotpress' ); ?></label></th>
     126        <td><input type="number" min="0" max="2" step=".1" class="openai_temperature" id="default_sort[openai_temperature]" name="default_sort[openai_temperature]" value="<?php echo esc_html( gp_array_get( $gp_default_sort, 'openai_temperature', 0 ) ); ?>" placeholder="Enter your OpenAI key" /></td>
     127    </tr>
     128    <tr>
     129        <th>
     130            <h4><?php esc_html_e( 'DeepL settings', 'glotpress' ); ?></h4>
     131        </th>
     132    </tr>
     133    <tr>
     134        <th><label for="default_sort[deepl_api_key]">
     135                <?php esc_html_e( 'DeepL Free API Key', 'glotpress' ); ?>
     136            </label>
     137                    <?php
     138                    if ( gp_array_get( $gp_external_translations, 'deepl_translations_used', 0 ) > 0 ) {
     139                        echo '<br>';
     140                        echo '<small>';
     141                        /* translators: Number of DeepL translations used. */
     142                        echo esc_html( sprintf( _n( '%s DeepL translation used:', '%s DeepL translations used:', 'glotpress' ), number_format_i18n( gp_array_get( $gp_external_translations, 'deepl_translations_used', 0 ) ) ) );
     143                        if ( gp_array_get( $gp_external_translations, 'deepl_same_translations_used', 0 ) > 0 ) {
     144                            echo ' ' . esc_html(
     145                                sprintf(
     146                                /* translators: 1: Number of DeepL translations used with modifications. 2: Number of DeepL translations used without modifications. */
     147                                    __( '%1$s with modifications and %2$s without modifications.', 'glotpress' ),
     148                                    number_format_i18n( gp_array_get( $gp_external_translations, 'deepl_translations_used', 0 ) - gp_array_get( $gp_external_translations, 'deepl_same_translations_used', 0 ) ),
     149                                    number_format_i18n( gp_array_get( $gp_external_translations, 'deepl_same_translations_used', 0 ) ),
     150                                )
     151                            );
     152                        }
     153                        echo '</small>';
     154                    }
     155                    ?>
     156                <br>
     157                <a href="https://www.deepl.com/account/usage" target="_blank"><small>
     158                        <?php
     159                        $deepl_chars_used = gp_array_get( $gp_external_translations, 'deepl_chars_used', 0 );
     160                        if ( $deepl_chars_used > 0 ) {
     161                            /* translators: Number of chars translated with DeepL. */
     162                            echo esc_html( sprintf( __( 'Chars translated with DeepL: %s', 'glotpress' ), number_format_i18n( $deepl_chars_used ) ) );
     163                        }
     164                        ?>
     165                    </small></a>
     166            </th>
     167        <td><input type="text" class="deepl_api_key" id="default_sort[deepl_api_key]" name="default_sort[deepl_api_key]" value="<?php echo esc_html( gp_array_get( $gp_default_sort, 'deepl_api_key' ) ); ?>" placeholder="Enter your DeepL API key" /></td>
     168    </tr>
    66169</table>

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

    r12451 r12511  
    153153    box-shadow: none;
    154154    background: var( --gp-color-btn-bg );
     155}
     156
     157.gp-content .openai_api_key, .gp-content .deepl_api_key {
     158    width: auto;
     159}
     160
     161.gp-content .openai_custom_prompt {
     162    width: auto;
     163    border: #7e7e7e thin solid !important;
     164    border-radius: 3px;
     165    height: 8rem;
     166}
     167
     168@media screen and (min-width: 750px) {
     169    .gp-content .openai_api_key, .gp-content .deepl_api_key  {
     170        width: 30rem;
     171    }
     172
     173    .gp-content .openai_custom_prompt {
     174        width: 30rem;
     175    }
    155176}
    156177
Note: See TracChangeset for help on using the changeset viewer.