实现一个自动语言检测的翻译工具

在现代的Web应用程序中，提供自动语言检测功能可以显著提升用户体验。本文将介绍如何实现一个具有自动语言检测功能的翻译工具，使用Vue.js和Element UI构建前端界面，并结合后端API完成翻译任务。

项目背景
在开发一个翻译工具时，我们希望用户在输入文本时，系统能够自动检测输入的语言，并自动设置源语言。这样可以避免用户手动选择源语言，提高翻译的便捷性和效率。

技术栈

• 前端：Vue.js+Element UI
• 后端：.NET Framework Web API
• 语言检测库：Lang.js

功能实现

1.自动语言检测
我们使用了lang.js库来实现自动语言检测功能。lang.js是一个轻量级的JavaScript库，可以检测文本的语言。

首先，你需要从GitHub下载lang.js库：

• GitHub仓库地址：[Lang.js GitHub]()

将lang.js文件放在项目的Assets/js目录下，并在HTML文件中引入它：

<script src="/Assets/js/lang.min.js"></script>

2.前端代码
以下是完整的前端代码，包括自动检测输入文本的语言并更新源语言选择框：

@{
    ViewBag.Title = "翻译工具";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="AppContainer" class="main-info">
    <el-row :gutter="10">
        <el-col :span="24">
            <div class="logo-container">
                <img src="/Assets/img/logo.png" alt="Logo" class="mb-2 logo-image" style="width: 135px;">
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="12">
            <el-select v-model="sourceLanguage" placeholder="请选择源语言">
                <el-option v-for="item in languages" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="12">
            <el-select v-model="targetLanguage" placeholder="请选择目标语言">
                <el-option v-for="item in languages" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-3">
        <el-col :span="24">
            <el-input type="textarea" v-model="sourceText" placeholder="请输入需要翻译的内容" rows="5" @input="detectLanguage"></el-input>
        </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-3">
        <el-col :span="24">
            <el-button type="primary" @@click="translateText" :loading="loading">翻译</el-button>
        </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-3">
        <el-col :span="24">
            <el-input type="textarea" v-model="translatedText" placeholder="翻译结果将显示在这里" rows="5" readonly></el-input>
        </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-3">
        <el-col :span="24">
            <el-table :data="translationHistory" border fit stripe header-cell-class-name="yf-table-header" cell-class-name="yf-table-cell" style="width: 100%;">
                <el-table-column prop="sourceText" label="原文"></el-table-column>
                <el-table-column prop="translatedText" label="翻译结果"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="danger" size="small" @@click="deleteTranslation(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</div>
@section Scripts {
    <script src="/Assets/js/lang.min.js"></script>
    <script type="text/javascript">
        const { createApp, ref } = Vue;
        const app = createApp({
            data() {
                return {
                    sourceLanguage: '英语', // 源语言
                    targetLanguage: '中文', // 目标语言
                    sourceText: '', // 源文本
                    translatedText: '', // 翻译后的文本
                    translationHistory: [], // 翻译历史记录
                    loading: false, // 加载状态
                    languages: [ // 支持的语言列表
                        { label: '英语', value: 'en' },
                        { label: '中文', value: 'zh' },
                        { label: '日语', value: 'ja' },
                        { label: '韩语', value: 'ko' },
                        { label: '法语', value: 'fr' },
                        { label: '德语', value: 'de' },
                        { label: '西班牙语', value: 'es' },
                        { label: '俄语', value: 'ru' }
                    ]
                };
            },
            methods: {
                detectLanguage() {
                    if (this.sourceText) {
                        const lang = Lang.detect(this.sourceText);
                        this.sourceLanguage = this.languages.find(l => l.value === lang) || 'en';
                    }
                },
                translateText() {
                    const self = this;
                    if (!this.sourceText) {
                        this.$message.warning("请输入需要翻译的内容！");
                        return;
                    }
                    // 设置加载状态
                    this.loading = true;
                    // 调用后端翻译接口
                    $.ajax({
                        url: '/api/Translation/Translate', // 后台翻译接口
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            sourceLanguage: this.sourceLanguage,
                            targetLanguage: this.targetLanguage,
                            sourceText: this.sourceText
                        }),
                        success: function (response) {
                            self.translatedText = response.translatedText;
                            // 将翻译结果添加到历史记录
                            self.translationHistory.push({
                                sourceText: self.sourceText,
                                translatedText: self.translatedText
                            });
                            // 清空输入框
                            self.sourceText = '';
                            // 关闭加载状态
                            self.loading = false;
                        },
                        error: function (err) {
                            self.$message.error("翻译失败：" + err.responseText);
                            // 关闭加载状态
                            self.loading = false;
                        }
                    });
                },
                deleteTranslation(index) {
                    this.translationHistory.splice(index, 1);
                }
            }
        });
        app.use(ElementPlus).mount('#AppContainer');
    </script>
}

3.后端代码
后端代码使用.NET Framework Web API实现翻译接口，调用百度翻译API完成翻译任务。以下是后端代码示例：

using System;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using System.Security.Cryptography;
using System.Text;
using System.Collections.Generic;

public class TranslationRequest
{
public string SourceLanguage { get; set; }
public string TargetLanguage { get; set; }
public string SourceText { get; set; }
}

public class TranslationResult
{
public List TransResult { get; set; }
}

public class TransResultItem
{
public string Src { get; set; }
public string Dst { get; set; }
}

public class TranslationController : ApiController
{
[HttpPost]
[Route("api/Translation/Translate")]
public IHttpActionResult Translate([FromBody] TranslationRequest request)
{
try
{
string translatedText = TranslateWithAI(request.SourceLanguage, request.TargetLanguage, request.SourceText);
return Ok(new { translatedText });
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
private string TranslateWithAI(string sourceLanguage, string targetLanguage, string sourceText)
{
    string apiKey = "your_baidu_translate_api_key";
    string apiSecret = "your_baidu_translate_api_secret";
    string endpoint = "http://api.fanyi.baidu.com/api/trans/vip/translate";

    string from = sourceLanguage;
    string to = targetLanguage;
    string query = sourceText;

    string salt = new Random().Next(100000).ToString();
    string sign = MD5Hash(apiKey + query + salt + apiSecret);

    var client = new HttpClient();
    var requestUri = $"{endpoint}?q={Uri.EscapeDataString(query)}&from={from}&to={to}&appid={apiKey}&salt={salt}&sign={sign}";

        var responseContent = response.Content.ReadAsStringAsync().Result;

        var result = JsonConvert.DeserializeObject<TranslationResult>(responseContent);
        return result.TransResult[0].Dst;
    }

    private string MD5Hash(string input)
    {
        using (var md5 = MD5.Create())
        {
            byte[] inputBytes = Encoding.UTF8.GetBytes(input);
            byte[] hashBytes = md5.ComputeHash(inputBytes);

            StringBuilder sb = new StringBuilder();
            foreach (var b in hashBytes)
            {
                sb.Append(b.ToString("x2"));
            }
            return sb.ToString();
        }
    }
}