This is a viewer only at the moment see the article on how this works.
To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk
This is a preview from the server running through my markdig pipeline
在前几篇文章中,我们讨论了网络应用中翻译的重要性。 我们还探索了如何利用“方便NMT”图书馆进行ASP.NET核心应用程序的翻译。 我将介绍我如何在申请中添加背景服务, 以便您能提交翻译请求,
再说一次,你可以看到我所有的源代码 吉特胡布 页。
在此,我们增加一个小工具,向第二部分详述的服务提供后轮工作。 此工具是一个简单的表格, 允许您向服务提交翻译请求 。 然后它被缓存并添加到队列中, 向您提供有关翻译状况的信息 。
[技选委
这将添加功能, 当选择“ 新” 文档时您可以翻译它 。
在我们的 Markdown 编辑器页面上, 我添加了一些代码, 包含一些下调( 在 _LanguageDropDown.cshtml)它允许您选择您要翻译的语言。
@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 部分视图是一个简单的下调视图,允许您选择要翻译的语言。 使用语言列表中输入的语种列表 。 Languages 模型属性。
您可以看到它使用 Alpine.js 来处理下调, 并设置选定语言和旗帜, 在主选择部分显示 。 它还规定了提交翻译请求时所用语文的简短代号。
使用 Alping 意味着我们保持最低, 本地引用 JavaScript 在我们的观点中。 这是一种很好的方式 保持你的观点 干净和容易阅读。
@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>
你会看到这里有一些Apline.js代码 连接到我们的 window.mostlylucid.translations.submitTranslation 函数。 此函数定义于 translations.js 包含在 _Layout.cshtml 文件。
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);
});
本代码在以下序列图中说明:
虽然这看起来有很多代码 但其实很简单
我们向服务器发送 POST 请求, 包含语言和标记内容 。 这通到一个叫"终点"的终点 start-translation 定义在 TranslationAPI.. 这将启动翻译任务, 并将此任务添加到此用户的缓存中 。
服务器响应任务代号( 我们日志但不使用)
然后,我们发送一个Get请求 服务器获得翻译。 这是使用 HTMX 完成的。 HTMX 是一个图书馆, 使您可以在不进行整页刷新的情况下更新页面的部分内容 。 这是一种非常有力的工具,在应用中,许多地方都使用了这一工具。
这是一个WebAPI控制器, 接收含有标记和语言代码的请求 。 然后将请求发送到我们的背景翻译服务器, 将任务再次缓存到 UsepherId( 包含在 cookie 中), 并将任务 Id 返回客户端 。 (我暂时禁用了验证的 AntiforgeryToken 属性, 因为我没有使用它)
[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);
}
请求使用 HTMX 返回当前用户的翻译。 这是一个简单的端点, 从缓存中获取翻译并返回客户端 。
[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);
}
这是一个简单的视图, 使用 HTMX 每5 秒对服务器进行民意测验, 以获得当前用户的翻译 。 它显示一个有链接查看翻译的翻译表格。
在完成所有翻译以停止投票后,它还要处理所有翻译何时完成以停止投票的问题(设置触发点) none) ) 当没有翻译时, 显示其它信息 。
我还利用人文化器图书馆展示用人文可读格式完成翻译所需的时间。
由此得出以下观点:
@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>
}
}
正如您在以上视图中看到的那样,我们请点击一个小阿尔平来查看翻译。 这是一个简单的函数, 从服务器获取翻译并在模式对话框中显示 。
<a href="#" x-on:click.prevent="window.mostlylucid.translations.viewTranslation('@item.TaskId')">View</a>
而这需要它。 它所做的就是从服务器上获取人口传输 并在页面上显示
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
}
此方法类似于先前的获取翻译列表的方法, 但它只能用 OriginalMarkdown 和 TranslatedMarkdown 人口 :
[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);
}
所有这一切的结果是,您现在可以提交翻译请求, 并在翻译完成后在编辑中查看翻译的状况 。 翻译服务如何在下一篇文章中运作,
我还有很多事情要做, 包括重新推出翻译内容的 Render Markdown 流程等。 但是,这是这个网站的乐趣; 不是每个地方都被擦光了, 但它都是真实的代码, 在我建立它的时候,你可以使用它。 再说一次,你可以看到我所有的源代码 吉特胡布 页。 所以,如果你想看更多,请去看看。