基于Google Cloud Translation API实现网页内容动态翻译的技术求助

核心思路 #

由于直接在前端调用Google Cloud Translation API的方式即将弃用（仅非盈利场景可用），且为了避免API密钥泄露，必须通过C#后端代理API请求，前端仅负责收集待翻译内容、展示语言选择器，以及将翻译结果渲染到页面。

1. 后端C# API实现 #

首先通过NuGet安装Google Cloud Translation SDK，然后编写API控制器处理翻译请求：

步骤1：安装依赖包 #

在项目中执行NuGet命令：

Install-Package Google.Cloud.Translation.V2

步骤2：编写翻译控制器 #

using Google.Cloud.Translation.V2;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/translate")]
public class TranslationController : ControllerBase
{
    private readonly TranslationClient _translationClient;

    // 建议从配置文件或环境变量读取API密钥，避免硬编码
    public TranslationController(IConfiguration config)
    {
        var apiKey = config["GoogleCloud:TranslationApiKey"];
        _translationClient = TranslationClient.CreateFromApiKey(apiKey);
    }

    [HttpPost]
    public async Task<IActionResult> BatchTranslate([FromBody] BatchTranslationRequest request)
    {
        if (request.Texts == null || !request.Texts.Any() || string.IsNullOrEmpty(request.TargetLanguage))
        {
            return BadRequest("待翻译文本和目标语言不能为空");
        }

        try
        {
            // 批量翻译文本
            var responses = await _translationClient.TranslateTextAsync(
                request.Texts, 
                request.TargetLanguage, 
                sourceLanguage: request.SourceLanguage);

            var translatedTexts = responses.Select(r => r.TranslatedText).ToList();
            return Ok(new { TranslatedTexts = translatedTexts });
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"翻译服务异常: {ex.Message}");
        }
    }
}

// 请求模型
public class BatchTranslationRequest
{
    public List<string> Texts { get; set; }
    public string SourceLanguage { get; set; }
    public string TargetLanguage { get; set; }
}

2. 前端语言选择器与翻译逻辑 #

在HTML中添加语言下拉菜单，通过JavaScript收集页面中标记为可翻译的元素，调用后端接口完成翻译并更新页面：

前端HTML代码 #

<!-- 语言选择下拉框 -->
<select id="langSelector" class="translate-control">
    <option value="">选择翻译语言</option>
    <option value="zh-CN">简体中文</option>
    <option value="en">English</option>
    <option value="ja">日本語</option>
    <option value="ko">한국어</option>
    <!-- 按需添加更多Google支持的语言代码 -->
</select>

<!-- 示例可翻译内容，统一添加translateable类 -->
<header>
    <h1 class="translateable">Welcome to Our Platform</h1>
    <p class="translateable">Your one-stop solution for all needs</p>
</header>
<main>
    <section>
        <h2 class="translateable">About Us</h2>
        <p class="translateable">We have been serving users for over 10 years...</p>
    </section>
</main>

前端JavaScript代码 #

const langSelector = document.getElementById('langSelector');
// 监听语言选择变化
langSelector.addEventListener('change', async () => {
    const targetLang = langSelector.value;
    if (!targetLang) return;

    // 收集所有带translateable类的元素
    const translateElements = document.querySelectorAll('.translateable');
    // 提取原始文本并记录元素引用
    const textMap = Array.from(translateElements).map(el => ({
        element: el,
        originalText: el.textContent.trim()
    }));
    const texts = textMap.map(item => item.originalText);
    // 可根据当前页面语言设置源语言，或留空让API自动检测
    const sourceLang = 'en';

    try {
        // 调用后端翻译接口
        const response = await fetch('/api/translate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                Texts: texts,
                SourceLanguage: sourceLang,
                TargetLanguage: targetLang
            })
        });

        if (!response.ok) throw new Error('翻译请求失败');

        const result = await response.json();
        // 将翻译结果回填到对应元素
        textMap.forEach((item, index) => {
            item.element.textContent = result.TranslatedTexts[index] || item.originalText;
        });
    } catch (err) {
        console.error('翻译出错:', err);
        alert('翻译失败，请稍后重试');
    }
});

3. 关键注意事项 #

• 密钥安全：绝对禁止在前端代码中硬编码Google Cloud API密钥，必须通过后端代理请求，防止密钥被盗用产生不必要的费用。
• 批量翻译优化：采用批量请求减少API调用次数，既降低成本也提升响应速度。
• 语言代码规范：使用Google Cloud Translation API官方支持的标准语言代码，确保翻译请求有效。
• 缓存机制：可在后端添加缓存（如Redis），对相同文本+语言组合的翻译结果进行缓存，进一步减少API调用。
• 错误处理：前后端都需完善异常捕获逻辑，比如网络超时、API配额耗尽等场景，给用户明确提示。

内容的提问来源于stack exchange，提问作者Paulino