最近做了个佛教文献翻译器，纯前端实现，分享下技术细节。

背景

翻译佛经时发现通用翻译器对专业术语处理很差，比如「般若」被翻成 wisdom ，丢失了 Prajñā 的深层含义。于是自己动手做了一个。

在线体验: https://xr843.github.io/Buddhist-AI-Translator GitHub: https://github.com/xr843/Buddhist-AI-Translator

技术栈

• 纯前端: HTML5 + CSS3 + JavaScript ES6+
• AI: DeepSeek API
• 语音: Web Speech API
• 无框架，零依赖

核心实现

1. Prompt 工程

最关键的是让 AI 理解佛学语境，我的 prompt 结构：

function createTranslationPrompt(text, sourceLang, targetLang) {
    let prompt = `将${sourceDesc}翻译为${targetDesc}：\n\n${text}\n\n`;

    if (targetLang === 'zh') {
        prompt += '要求：准确翻译佛教术语，使用现代中文。';
    } else if (targetLang === 'zh-classical') {
        prompt += '要求：翻译为文言文，保持庄严性。';
    } else {
        prompt += '要求：准确翻译，保持佛教术语的正确性。';
    }

    prompt += '\n\n 直接返回翻译结果，无需引号或解释。';
    return prompt;
}

关键点：
- 明确指定目标语言风格
- 要求直接返回结果，减少后处理
- 针对不同语言给不同指令

### 2. 术语数据库

内置了 50+ 佛教术语对照表，作为兜底：

const buddhistTerms = {
    '般若波罗蜜多心经': 'The Heart of the Perfection of Wisdom Sutra / प्रज्ञापारमिताहृदयसूत्र',
    '观自在菩萨': 'Avalokiteshvara Bodhisattva / अवलोकितेश्वर बोधिसत्त्व',
    '涅槃': 'Nirvana / निर्वाण',
    '菩萨': 'Bodhisattva / बोधिसत्त्व',
    // ...
};

当 API 挂掉时，用术语库做基础翻译。

### 3. 缓存策略

为了减少 API 调用和提升响应速度：

const translationCache = new Map();
const MAX_CACHE_SIZE = 100;

function getCacheKey(text, sourceLang, targetLang) {
    return `${sourceLang}->${targetLang}:${text.trim()}`;
}

// LRU 清理
function cleanCache() {
    if (translationCache.size >= MAX_CACHE_SIZE) {
        const firstKey = translationCache.keys().next().value;
        translationCache.delete(firstKey);
    }
}

相同文本+语言对直接返回缓存，秒级响应。

### 4. XSS 防护

AI 返回的内容不可信，必须转义：

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 输出时转义
resultDiv.innerHTML = `<div class="translation-text">${escapeHtml(translationResult)}</div>`;

### 5. API 调用优化

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000);

const response = await fetch(API_CONFIG.baseURL, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_CONFIG.apiKey}`
    },
    body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [...],
        temperature: 0.1,  // 低温度保证一致性
        max_tokens: 800,
        stream: false
    }),
    signal: controller.signal
});

- 15 秒超时，避免长时间等待
- temperature 设 0.1 ，翻译需要稳定输出
- 非流式响应，简化处理逻辑

遇到的坑

1. DeepSeek 返回带引号 - AI 经常把翻译结果用引号包起来，需要后处理去掉
2. 语音合成分段 - 长文本一次性朗读会卡，需要按句子分段
3. 梵文字体 - 部分浏览器不支持 Devanagari ，需要加载 Google Fonts

## 效果

| 指标     | 数据        |
|----------|-------------|
| 首次翻译 | 1-3 秒      |
| 缓存命中 | <100ms      |
| 代码量   | ~1400 行 JS |
| 包大小   | 0 (无依赖)  |

## 总结

纯前端 + LLM API 的组合很适合做这类垂直领域工具：
- 开发快，部署简单 (GitHub Pages 直接托管)
- 用户自带 API Key ，无服务器成本
- Prompt 工程 + 术语库，解决专业领域翻译问题

代码完全开源，欢迎 PR： https://github.com/xr843/Buddhist-AI-Translator

---
有问题欢迎讨论，也欢迎推荐其他需要补充的佛教术语。

---