# taustat käännökset Pt. 3

<datetime class="hidden">2024-08-25T03:20</datetime>

<!--category-- EasyNMT, ASP.NET, WebAPI, Alpine.js, HTMX -->
# Esitys

Edellä mainituissa artikloissa, olemme keskustelleet käännöksen merkityksestä web-sovellusten yhteydessä . Olemme myös tutkineet EasyNMT-kirjaston käyttöä käännösten suorittamiseen ASP:ssa.NET Core -sovellusessaM SK3 Tässä artikkelissa aion käsitellä sitä, miten olen lisännyt taustapalvelun hakemukseen, jonka avulla voitte esittää käännöshakemuksen.

Jälleen kerran, voitte nähdä tämän koko lähdekoodin [GitHub](https://github.com/scottgal/mostlylucidweb) sivu.

## Edellinen artikkeli

- [taustat käännökset Pt. 1](/blog/backgroundtranslationspt1)
- [taustat käännökset Pt. 2](/blog/backgroundtranslationspt2)

Siihen lisätään pieni väline, joka toimittaa kädentakaiset työt palvelulle, jota olemme yksityisttäneet osittain.2. Tämä väline on yksinkertainen lomake, jonka avulla voitte jättää käännöshakemuksen palveluun.

[TOC]

Tämä lisää toiminnallisuutta, kun valittaessa 'newM SK1 asiakirjaa voidaan kääntää se.

![Esittelijä](neweditor.gif?a)

# käännöslaki

## Tulkkauslähettiläs

Markdown-editorisivuillemme lisäsin muutaman koodin, joka sisältää pienen laskun (in `_LanguageDropDown.cshtml`), jonka avulla voidaan valita kieli, jota haluatte kääntää

```razor
        @if (Model.IsNew)
                {
                    var translationHidden = Model.TranslationTasks.Any() ? "" : "hidden";
              
                    <p class="text-blue-dark dark:text-blue-light inline-flex  items-center justify-center space-x-2">
                        <partial name="_LanguageDropDown" for="Languages"/>
                        <button class="btn btn-outline btn-sm mt-1" x-on:click="window.mostlylucid.translations.submitTranslation"><i class='bx bx-send'></i>Translate</button>
                    </p>
                    <div id="translations" class="@translationHidden">
                        <partial name="_GetTranslations" model="Model.TranslationTasks" />
                    </div>
                    <div id="translatedcontent" class="hidden">
                        <textarea class="hidden" id="translatedcontentarea"></textarea>
                    </div>
                }
```

#### _LanguageDropDown -kieli

Meidän `_LanguageDropDown` osittainen näkemys on yksinkertainen pudotus, jonka avulla voidaan valita kieli, jota haluatte kääntää .-kieleen. `Languages` mallin omaisuus.

Voitte nähdä, että se käyttää Alpine-järjestelmää.js:tä laskun käsittelemiseen ja valitsemansa kielen ja lipun asettamiseen päävalinnan kohdassa.

Alpingin käyttö merkitsee sitä, että säilytämme vähimmäismäärän, paikallisesti viittaavan JavaScript-koodin näkemyksissämme . Tämä on erinomainen tapa pitää näkemyksenne puhtaina ja helppolukuisina

```razor
@using Mostlylucid.Helpers
@model List<string>

<div id="LanguageDropDown" x-data="{ 
    open: false, 
    selectedLanguage: 'Select Language', 
    selectedFlag: '' ,
    selectedShortCode:''
}" class="relative inline-block mt-3">
    <!-- Dropdown Button -->
    <button x-on:click="open = !open" class="btn btn-sm btn-outline flex items-center space-x-2">
        <!-- Dynamically Show the Flag Icon -->
        <template x-if="selectedFlag">
            <img :src="selectedFlag" class="h-4 w-4 rounded outline outline-1  outline-green-dark dark:outline-white" alt="Selected Language Flag">
        </template>
        <span x-text="selectedLanguage"></span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div x-show="open" x-on:click.away="open = false"
         class="absolute left-0 mt-2 w-64 rounded-md shadow-lg dark:bg-custom-dark-bg bg-white ring-1 ring-black ring-opacity-5 z-50">
        <ul class="p-2">
            @foreach (var language in Model)
            {
            <li>
                <a href="#"
                   x-on:click.prevent="selectedLanguage = '@(language.ConvertCodeToLanguage())'; selectedFlag = '/img/flags/@(language).svg'; selectedShortCode='@language'; open = false"
                   class="flex dark:text-white text-black items-center p-2 hover:bg-gray-100">
                    <img src="/img/flags/@(language).svg" asp-append-version="true" class="ml-2 h-4 w-4 mr-4 rounded outline outline-1  outline-green-dark dark:outline-white" alt="@language"> @language.ConvertCodeToLanguage()
                </a>
            </li>
            }
        </ul>
    </div>
</div>
```

### Esityskäännöksi

Huomaatte, että tässä on Apline-koodi, joka kutsuu meidän `window.mostlylucid.translations.submitTranslation` function. Funktio määritellään `translations.js` asiakirja, joka sisältyy `_Layout.cshtml` asiakirja.

```javascript
export function submitTranslation() {
    const languageDropDown = document.getElementById('LanguageDropDown');

    // Access Alpine.js data using Apline.$data (Alpine.js internal structure)
    const alpineData = Alpine.$data(languageDropDown);
const shortCode = alpineData.selectedShortCode;
const markdown = simplemde.value();
if (shortCode === '' || markdown === '') return;
    
    // Create the data object that matches your model
    const model = {
        Language: shortCode,
        OriginalMarkdown: markdown
    };

// Perform the fetch request to start the translation using POST
    fetch('/api/translate/start-translation', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'  // The content type should be JSON
        },
        body: JSON.stringify(model)  // Send the data object as JSON
    })
        .then(function(response) {
            if (response.ok) {
                // Process the returned task ID
                return response.json();  // Parse the JSON response (assuming the task ID is returned in JSON)
            } else {
                console.error('Failed to start the translation');
            }
        })
        .then(function(taskId) {
            if (taskId) {
                console.log("Task ID:", taskId);

                // Trigger an HTMX request to get the translations after saving
                htmx.ajax('get', "/editor/get-translations", {
                    target: '#translations',  // Update this element with the response
                    swap: 'innerHTML',        // Replace the content inside the target
                }).then(function () {
                    // Remove the hidden class after the content is updated
                    document.getElementById('translations').classList.remove('hidden');
                });
            }
        })
        .catch(function(error) {
            // Handle any errors that occur during the fetch
            console.error('An error occurred:', error);
        });
```

#### Jatkodiagrammi

Tämä koodi on kuvattu seuraavassa järjestyssuunnitelmassa:

```mermaid
sequenceDiagram
    autonumber
    actor User
    participant JS as Client JS
    participant Alpine as Alpine.js
    participant FetchAPI as Fetch API
    participant HTMX as HTMX

    User->>JS: Trigger submitTranslation()
    JS->>Alpine: Access data from LanguageDropDown via Alpine.js
    Alpine-->>JS: Return selectedShortCode and markdown
    JS->>JS: Check if shortCode and markdown are not empty
    alt shortCode or markdown is empty
        JS->>User: Do nothing
    else
        JS->>FetchAPI: Send POST request with model {Language, OriginalMarkdown}
        FetchAPI-->>JS: Return taskId in JSON response
        alt response is ok
            JS->>HTMX: Send GET request to /editor/get-translations via HTMX
            HTMX-->>JS: Return updated translations
            JS->>DOM: Remove 'hidden' class from translations element
        else
            JS->>Console: Log "Failed to start the translation"
        end
    end
    JS->>Console: Handle any fetch errors

```

Vaikka tämä näyttääkin paljon kodilta, se on itse asiassa varsin yksinkertainen.

1. Lähetämme serverille POST-pyynnön, johon sisältyy kieli ja merkitsevä sisältö. `start-translation` joka on määritelty `TranslationAPI`. Tämä aloittaa käännöstehtävän ja lisää tehtävän tämän käyttäjän Cache-tietokantaan

2. Server vastaa tehtävän numerolla (, joka tallennetaan mutta jota ei käytetä.

3. Sen jälkeen lähetämme GET-pyynnön palvelimelle saadaksemme käännökset. Tämä tehdään käyttämällä HTMX-libraaria, joka antaa mahdollisuuden päivittää sivun osia ilman koko sivun päivittämistäM SK1 Tämä on erittäin tehokas väline ja sitä käytetään monissa kohdissa tässä sovelluksessa.

### Aloituskäännöksen loppupiste

Kyseessä on WebAPI-ohjaaja, joka ottaa pyynnöt, jotka sisältävät merkitsemisen ja kielenkoodin.
(Onnistin ValidateAntiForgeryToken -属性ta toistaiseksi, koska en käytä sitä.

```csharp
    [HttpPost("start-translation")]
   // [ValidateAntiForgeryToken]
    public async Task<Results<Ok<string>, BadRequest<string>>> StartTranslation([FromBody] MarkdownTranslationModel model)
    {
        if(ModelState.IsValid == false)
        {
            return TypedResults.BadRequest("Invalid model");
        }
        if(!backgroundTranslateService.TranslationServiceUp)
        {
            return TypedResults.BadRequest("Translation service is down");
        }
        // Create a unique identifier for this translation task
        var taskId = Guid.NewGuid().ToString("N");
        var userId = Request.GetUserId(Response);
       
        // Trigger translation and store the associated task
        var translationTask = await backgroundTranslateService.Translate(model);
    
        var translateTask = new TranslateTask(taskId, DateTime.Now,  model.Language, translationTask);
        translateCacheService.AddTask(userId, translateTask);

        // Return the task ID to the client
        return TypedResults.Ok(taskId);
    }

```

## Tulkkausten saattaminen loppupisteessä

Tämä on pyydetty käyttämällä HTMX-järjestelmää ja palauttaa käännökset nykyiselle käyttäjälle. Tämä on yksinkertainen loppupiste, joka saa käännöt cachesta ja palaa ne clientille

```csharp
    [HttpGet]
    [Route("get-translations")]
    public IActionResult GetTranslations()
    {
        var userId = Request.GetUserId(Response);
        var tasks = translateCacheService.GetTasks(userId);
        var translations = tasks.Select(x=> new TranslateResultTask(x, false)).ToList();
        return PartialView("_GetTranslations", translations);
    }
    
```

### Osittainen katsaus käännöksiin

Tämä on yksinkertainen näkemys, jossa käytetään HTMX-järjestelmää verkon arvioimiseksi joka 5 sekunti saadakseen nykyisen käyttäjän käännökset.

Siinä on myös käsiteltävä, kun kaikki käännökset ovat valmiita pysäyttämään äänestys ( asettamalla lähtölaukaus `none`). Ja vaihtoehtoisen viestin näyttäminen, jos käännöksiä ei ole

Käytän myös Humanizer-kirjastoa kuvatakseni, kuinka kauan on kulunut käännöksen loppuun saattamiseen inhimillisessä luettavissa olevassa muodossa.

Tämä johtaa tähän näkemykseen:

![käännökset](translatedtable.png?width=800&format=webp&quality=40)

```razor
@using Humanizer
@using Mostlylucid.Helpers
@model List<Mostlylucid.MarkdownTranslator.Models.TranslateResultTask>

@{
    var allCompleted = Model.All(x => x.Completed);
    var noTranslations = Model.Count == 0;
    var trigger = allCompleted ? "none" : "every 5s";
    if (noTranslations)
    {
        <div class="alert alert-info" role="alert">
            No translations have been requested yet.
        </div>
    }
    else
    {
        <div class="translationpoller" hx-controller="Editor" hx-action="GetTranslations" hx-get hx-swap="outerHTML" hx-trigger="@trigger">
            <table class="table">
                <thead>
                <th>
                  
                    @Html.DisplayNameFor(model => model[0].TaskId)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model[0].Completed)
                </th>
                <th >
                    @Html.DisplayNameFor(model => model[0].Language)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model[0].TotalMilliseconds)
                </th>
                </thead>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>  <a href="#" x-on:click.prevent="window.mostlylucid.translations.viewTranslation('@item.TaskId')">View</a></td>
                        <td>@if (item.Completed)
                            {
                                <i class='bx bx-check text-green'></i>
                            }
                            else
                            {
                                <i class='bx bx-loader-alt animate-spin dark:text-white text-black'></i>
                            }
                            </td>
                        <td>
                            <p class="flex items-center">
                                <img src="/img/flags/@(item.Language).svg" asp-append-version="true" class="ml-2 h-4 w-4 mr-4 rounded outline outline-1 outline-green-dark dark:outline-white" alt="@item.Language">
                                @item.Language.ConvertCodeToLanguage()
                            </p>

                        </td>
                        <td>@(TimeSpan.FromMilliseconds(item.TotalMilliseconds).Humanize())</td>
                    </tr>
                }
            </table>
        </div>
    }
}
```

## Näkemyksen käännöstoiminta

Kuten näette edellä esitetyssä kuvauksessa, kutsumme pieneen Alping-osoitteeseen ja katsomme käännöksen.

```razor
 <a href="#" x-on:click.prevent="window.mostlylucid.translations.viewTranslation('@item.TaskId')">View</a>
```

Se kutsuu tähän. Kaikki, mitä se tekee, on saada vastaanotettu transaltio serveristä ja esittää sen sivussa

```javascript

export function viewTranslation(taskId) {
    // Construct the URL with the query parameters
    const url = `/api/translate/get-translation/${taskId}`;

    // Fetch call to the API endpoint
    fetch(url, {
        method: 'GET',
        headers: {
            'Accept': 'application/json'  // Indicate that we expect a JSON response
        }
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(data =>

        {
            let translatedContentArea = document.getElementById("translatedcontent")
            translatedContentArea.classList.remove("hidden");
            let textArea = document.getElementById('translatedcontentarea');
            textArea.classList.remove('hidden');
            textArea.value = data.originalMarkdown;
            simplemde.value(data.translatedMarkdown);
        })  // Log the successful response data
        .catch(error => console.error('Error:', error));  // Handle any errors
}

```

## Tulkkauksen saattaminen loppupisteessä

Tämä on samanlainen kuin aikaisempi menetelmä saada käännösten luetteloa lukuun ottamatta sitä, että se saa yhden käännöksen `OriginalMarkdown` ja `TranslatedMarkdown` populated:

```csharp
    [HttpGet]
    [Route("get-translation/{taskId}")]
    public Results<JsonHttpResult<TranslateResultTask>, BadRequest<string>> GetTranslation(string taskId)
    {
        var userId = Request.GetUserId(Response);
        var tasks = translateCacheService.GetTasks(userId);
        var translationTask = tasks.FirstOrDefault(t => t.TaskId == taskId);
        if (translationTask == null) return TypedResults.BadRequest("Task not found");
        var result = new TranslateResultTask(translationTask, true);
        return TypedResults.Json(result);
    }
```

## Päätelmissä

Kaiken tämän seurauksena voitte nyt toimittaa käännöshakemuksen ja nähdä käännöksen tilanteen kääntäjässä sen jälkeen.

Minulla on enemmän, mitä haluan tehdä täällä muun muassa uudelleen-tarkastella Render Markdown-virtaa käännettyjen sisältöjen jne. osaltaM SK1 mutta se;' on tämän sivuston hauskaaMSC3 kaikki ei ole täysin poltettu vaan se ' kaikki reaalikoodi, jonka kanssa voitte leikkiä, kun laadin sen ulkopuolelle
Jälleen kerran, voitte nähdä tämän koko lähdekoodin [GitHub](https://github.com/scottgal/mostlylucidweb) sivu. Olkaa hyvä ja katsokaa sitä, jos haluatte nähdä enemmänM SK1