基于 Flask 的网页翻译系统,用户可以在页面中输入需要翻译的文本,并选择翻译语言,系统将通过有道智云API返回翻译结果。
系统应该支持多种语言的翻译,能够准确地翻译文本,并将翻译结果返回给用户。用户应该能够在界面中看到翻译的结果,并可以进行复制或分享。
index.html
<!DOCTYPE html>
<html>
<head>
<title>基于flask&有道智云API在线翻译</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 36px;
}
form {
margin-top: 30px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
}
textarea {
width: 100%;
margin-top: 5px;
margin-bottom: 15px;
border-radius: 5px;
padding: 5px;
}
select {
margin-top: 5px;
margin-bottom: 15px;
border-radius: 5px;
padding: 5px;
}
input[type="submit"] {
display: block;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
background-color: #4CAF50;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="submit"]:hover {
background-color: #3E8E41;
}
h2 {
margin-top: 30px;
font-size: 24px;
}
p {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
background-color: #D5F5E3;
padding: 10px;
border-radius: 5px;
border: 1px solid #4CAF50;
}
m {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>基于flask&有道智云API在线翻译</h1>
<form method="post" action="/">
<label for="input_text">需要翻译的文本:</label><br>
<textarea id="input_text" name="input_text" rows="5" cols="40">{% if input_text %}{{ input_text }}{% endif %}</textarea><br>
<label for="target_language">需要翻译的语言:</label><br>
<select id="target_language" name="target_language">
<option value="zh-CHS" {% if target_language == "zh-CHS" %}selected{% endif %}>Chinese Simplified</option>
<option value="zh-CHT" {% if target_language == "zh-CHT" %}selected{% endif %}>Chinese Traditional</option>
<option value="en" {% if target_language == "en" %}selected{% endif %}>English</option>
<option value="ja" {% if target_language == "ja" %}selected{% endif %}>Japanese</option>
<option value="ko" {% if target_language == "ko" %}selected{% endif %}>Korean</option>
<option value="fr" {% if target_language == "fr" %}selected{% endif %}>French</option>
<option value="es" {% if target_language == "es" %}selected{% endif %}>Spanish</option>
<option value="pt" {% if target_language == "pt" %}selected{% endif %}>Portuguese</option>
<option value="it" {% if target_language == "it" %}selected{% endif %}>Italian</option>
<option value="ru" {% if target_language == "ru" %}selected{% endif %}>Russian</option>
<option value="vi" {% if target_language == "vi" %}selected{% endif %}>Vietnamese</option>
<option value="de" {% if target_language == "de" %}selected{% endif %}>German</option>
<option value="ar" {% if target_language == "ar" %}selected{% endif %}>Arabic</option>
<option value="id" {% if target_language == "id" %}selected{% endif %}>Indonesian</option>
<option value="af" {% if target_language == "af" %}selected{% endif %}>Afrikaans</option>
<option value="bs" {% if target_language == "bs" %}selected{% endif %}>Bosnian</option>
<option value="bg" {% if target_language == "bg" %}selected{% endif %}>Bulgarian</option>
<option value="yue" {% if target_language == "yue" %}selected{% endif %}>Cantonese</option>
<option value="ca" {% if target_language == "ca" %}selected{% endif %}>Catalan</option>
<option value="hr" {% if target_language == "hr" %}selected{% endif %}>Croatian</option>
<option value="cs" {% if target_language == "cs" %}selected{% endif %}>Czech</option>
<option value="da" {% if target_language == "da" %}selected{% endif %}>Danish</option>
<option value="nl" {% if target_language == "nl" %}selected{% endif %}>Dutch</option>
<option value="et" {% if target_language == "et" %}selected{% endif %}>Estonian</option>
<option value="fj" {% if target_language == "fj" %}selected{% endif %}>Fijian</option>
<option value="fi" {% if target_language == "fi" %}selected{% endif %}>Finnish</option>
<option value="el" {% if target_language == "el" %}selected{% endif %}>Greek</option>
<option value="ht" {% if target_language == "ht" %}selected{% endif %}>Haitian Creole</option>
<option value="he" {% if target_language == "he" %}selected{% endif %}>Hebrew</option>
<option value="hi" {% if target_language == "hi" %}selected{% endif %}>Hindi</option>
<option value="mww" {% if target_language == "mww" %}selected{% endif %}>Hmong Daw</option>
<option value="hu" {% if target_language == "hu" %}selected{% endif %}>Hungarian</option>
<option value="sw" {% if target_language == "sw" %}selected{% endif %}>Swahili</option>
<option value="tlh" {% if target_language == "tlh" %}selected{% endif %}>Klingon</option>
<option value="lv" {% if target_language == "lv" %}selected{% endif %}>Latvian</option>
<option value="lt" {% if target_language == "lt" %}selected{% endif %}>Lithuanian</option>
<option value="ms" {% if target_language == "ms" %}selected{% endif %}>Malay</option>
<option value="mt" {% if target_language == "mt" %}selected{% endif %}>Maltese</option>
<option value="no" {% if target_language == "no" %}selected{% endif %}>Norwegian</option>
<option value="fa" {% if target_language == "fa" %}selected{% endif %}>Persian</option>
<option value="pl" {% if target_language == "pl" %}selected{% endif %}>Polish</option>
<option value="otq" {% if target_language == "otq" %}selected{% endif %}>Queretaro Otomi</option>
<option value="ro" {% if target_language == "ro" %}selected{% endif %}>Romanian</option>
<option value="sr-Cyrl" {% if target_language == "sr-Cyrl" %}selected{% endif %}>Serbian (Cyrillic)</option>
<option value="sr-Latn" {% if target_language == "sr-Latn" %}selected{% endif %}>Serbian (Latin)</option>
<option value="sk" {% if target_language == "sk" %}selected{% endif %}>Slovak</option>
<option value="sl" {% if target_language == "sl" %}selected{% endif %}>Slovenian</option>
<option value="sv" {% if target_language == "sv" %}selected{% endif %}>Swedish</option>
<option value="ty" {% if target_language == "ty" %}selected{% endif %}>Tahitian</option>
<option value="th" {% if target_language == "th" %}selected{% endif %}>Thai</option>
<option value="to" {% if target_language == "to" %}selected{% endif %}>Tongan</option>
<option value="tr" {% if target_language == "tr" %}selected{% endif %}>Turkish</option>
<option value="uk" {% if target_language == "uk" %}selected{% endif %}>Ukrainian</option>
<option value="ur" {% if target_language == "ur" %}selected{% endif %}>Urdu</option>
<option value="cy" {% if target_language == "cy" %}selected{% endif %}>Welsh</option>
<option value="yua" {% if target_language == "yua" %}selected{% endif %}>Yucatec Maya</option>
<option value="sq" {% if target_language == "sq" %}selected{% endif %}>Albanian</option>
<option value="am" {% if target_language == "am" %}selected{% endif %}>Amharic</option>
<option value="hy" {% if target_language == "hy" %}selected{% endif %}>Armenian</option>
<option value="az" {% if target_language == "az" %}selected{% endif %}>Azerbaijani</option>
<option value="bn" {% if target_language == "bn" %}selected{% endif %}>Bengali</option>
<option value="eu" {% if target_language == "eu" %}selected{% endif %}>Basque</option>
<option value="be" {% if target_language == "be" %}selected{% endif %}>Belarusian</option>
<option value="ceb" {% if target_language == "ceb" %}selected{% endif %}>Cebuano</option>
<option value="co" {% if target_language == "co" %}selected{% endif %}>Corsican</option>
<option value="eo" {% if target_language == "eo" %}selected{% endif %}>Esperanto</option>
<option value="tl" {% if target_language == "tl" %}selected{% endif %}>Filipino</option>
<option value="fy" {% if target_language == "fy" %}selected{% endif %}>Frisian</option>
<option value="gl" {% if target_language == "gl" %}selected{% endif %}>Galician</option>
<option value="ka" {% if target_language == "ka" %}selected{% endif %}>Georgian</option>
<option value="gu" {% if target_language == "gu" %}selected{% endif %}>Gujarati</option>
<option value="ha" {% if target_language == "ha" %}selected{% endif %}>Hausa</option>
<option value="haw" {% if target_language == "haw" %}selected{% endif %}>Hawaiian</option>
<option value="is" {% if target_language == "is" %}selected{% endif %}>Icelandic</option>
<option value="ig" {% if target_language == "ig" %}selected{% endif %}>Igbo</option>
<option value="ga" {% if target_language == "ga" %}selected{% endif %}>Irish</option>
<option value="jw" {% if target_language == "jw" %}selected{% endif %}>Javanese</option>
<option value="kn" {% if target_language == "kn" %}selected{% endif %}>Kannada</option>
<option value="kk" {% if target_language == "kk" %}selected{% endif %}>Kazakh</option>
<option value="km" {% if target_language == "km" %}selected{% endif %}>Khmer</option>
<option value="ku" {% if target_language == "ku" %}selected{% endif %}>Kurdish</option>
<option value="ky" {% if target_language == "ky" %}selected{% endif %}>Kyrgyz</option>
<option value="lo" {% if target_language == "lo" %}selected{% endif %}>Lao</option>
<option value="la" {% if target_language == "la" %}selected{% endif %}>Latin</option>
<option value="lb" {% if target_language == "lb" %}selected{% endif %}>Luxembourgish</option>
<option value="mk" {% if target_language == "mk" %}selected{% endif %}>Macedonian</option>
<option value="mg" {% if target_language == "mg" %}selected{% endif %}>Malagasy</option>
<option value="ml" {% if target_language == "ml" %}selected{% endif %}>Malayalam</option>
<option value="mi" {% if target_language == "mi" %}selected{% endif %}>Maori</option>
<option value="mr" {% if target_language == "mr" %}selected{% endif %}>Marathi</option>
<option value="mn" {% if target_language == "mn" %}selected{% endif %}>Mongolian</option>
<option value="my" {% if target_language == "my" %}selected{% endif %}>Burmese</option>
<option value="ne" {% if target_language == "ne" %}selected{% endif %}>Nepali</option>
<option value="ny" {% if target_language == "ny" %}selected{% endif %}>Chichewa</option>
<option value="ps" {% if target_language == "ps" %}selected{% endif %}>Pashto</option>
<option value="pa" {% if target_language == "pa" %}selected{% endif %}>Punjabi</option>
<option value="sm" {% if target_language == "sm" %}selected{% endif %}>Samoan</option>
<option value="gd" {% if target_language == "gd" %}selected{% endif %}>Scots Gaelic</option>
<option value="st" {% if target_language == "st" %}selected{% endif %}>Sesotho</option>
<option value="sn" {% if target_language == "sn" %}selected{% endif %}>Shona</option>
<option value="sd" {% if target_language == "sd" %}selected{% endif %}>Sindhi</option>
<option value="si" {% if target_language == "si" %}selected{% endif %}>Sinhala</option>
<option value="so" {% if target_language == "so" %}selected{% endif %}>Somali</option>
<option value="su" {% if target_language == "su" %}selected{% endif %}>Sundanese</option>
<option value="tg" {% if target_language == "tg" %}selected{% endif %}>Tajik</option>
<option value="ta" {% if target_language == "ta" %}selected{% endif %}>Tamil</option>
<option value="te" {% if target_language == "te" %}selected{% endif %}>Telugu</option>
<option value="auto" {% if target_language == "auto" %}selected{% endif %}> auto</option>
</select><br>
<input type="submit" value="翻译">
</form>
{% if translated_text %}
<div class="out">
<m>原始文本:</m>
<p>{{ input_text }}</p>
<m>翻译语言:</m>
<p>{{ target_language }}</p>
<m>翻译结果:</m>
<p>{{ translated_text }}</p>
</div>
{% endif %}
</body>
</html>
main.py
from flask import Flask, render_template, request
import requests
import json
import hashlib
import random
import time
app = Flask(__name__)
app.config['SECRET_KEY'] = 'dev'
# 有道翻译 API 服务器端点,需要先申请App Key和App Secret
api_endpoint = "https://openapi.youdao.com/api"
app_key = "自己获取"
app_secret = "自己获取"
def generate_sign_params(query):
"""
使用app_key和app_secret生成有道翻译API请求参数中的sign参数
"""
salt = str(random.randint(1, 65536))
sign_param = app_key + query + salt + app_secret
md5 = hashlib.md5()
md5.update(sign_param.encode('utf-8'))
sign = md5.hexdigest()
return {'sign': sign, 'salt': salt}
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
# 处理表单提交请求
input_text = request.form['input_text']
target_language = request.form['target_language']
# 检测输入语言
detect_params = generate_sign_params(input_text)
detect_params.update({
'q': input_text,
'from': 'auto',
'to': 'auto',
'appKey': app_key
})
detect_response = requests.get(api_endpoint, params=detect_params)
if detect_response.status_code != 200:
# 如果响应状态码不是200,则说明请求出错
return 'Error: Could not retrieve language.'
detected_language = detect_response.json().get('lang')
print(str(detected_language))
# 调用翻译 API 进行翻译
translate_params = generate_sign_params(input_text)
translate_params.update({
'q': input_text,
'from': detected_language,
'to': target_language,
'appKey': app_key
})
translate_response = requests.get(api_endpoint, params=translate_params)
if translate_response.status_code != 200:
# 如果响应状态码不是200,则说明请求出错
return 'Error: Could not translate the text.'
# 处理翻译结果并返回
translated_text = translate_response.json().get('translation')[0]
return render_template('index.html', input_text=input_text,target_language=target_language,translated_text=translated_text)
# 渲染首页
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)