تمرين - استدعاء خدمة Translator
من خلال جاهزية خدمة Translator في كمبيوتر الخادم التي تم إنشاؤها على Azure والمتغيرات المخزنة للعمل، دعنا نوجه انتباهنا إلى إضافة المنطق والقالب اللازمين إلى تطبيقنا لترجمة النص. سنعمل من خلال الخطوات التالية:
- إضافة تعليمة برمجية لاستدعاء الخدمة
- إنشاء القالب لعرض النتائج
- اختبار تطبيقنا
إضافة تعليمة برمجية لاستدعاء الخدمة
يحتوي app.py على منطق لتطبيقنا. سنضيف بضع عمليات استيراد مطلوبة للمكتبات التي سنستخدمها، متبوعًا بالمسار الجديد للرد على المستخدم.
في أعلىapp.py، أضف الأسطر التالية من التعليمات البرمجية:
import requests, os, uuid, json from dotenv import load_dotenv load_dotenv()
سيستورد السطر العلوي المكتبات التي سنستخدمها لاحقًا، عند استدعاء خدمة Translator. كما سنقوم أيضاً باستيراد load_dotenv من dotenv وتنفيذ الدالة، والتي ستقوم بتحميل القيم من .env.
في الجزء السفلي من app.py، أضف الأسطر التالية من التعليمات البرمجية لإنشاء المسار والمنطق لترجمة النص:
@app.route('/', methods=['POST']) def index_post(): # Read the values from the form original_text = request.form['text'] target_language = request.form['language'] # Load the values from .env key = os.environ['KEY'] endpoint = os.environ['ENDPOINT'] location = os.environ['LOCATION'] # Indicate that we want to translate and the API version (3.0) and the target language path = '/translate?api-version=3.0' # Add the target language parameter target_language_parameter = '&to=' + target_language # Create the full URL constructed_url = endpoint + path + target_language_parameter # Set up the header information, which includes our subscription key headers = { 'Ocp-Apim-Subscription-Key': key, 'Ocp-Apim-Subscription-Region': location, 'Content-type': 'application/json', 'X-ClientTraceId': str(uuid.uuid4()) } # Create the body of the request with the text to be translated body = [{ 'text': original_text }] # Make the call using post translator_request = requests.post(constructed_url, headers=headers, json=body) # Retrieve the JSON response translator_response = translator_request.json() # Retrieve the translation translated_text = translator_response[0]['translations'][0]['text'] # Call render template, passing the translated text, # original text, and target language to the template return render_template( 'results.html', translated_text=translated_text, original_text=original_text, target_language=target_language )
يتم تعليق التعليمات البرمجية لوصف الخطوات التي يتم اتخاذها. على مستوى عالٍ، إليك ما تفعله التعليمات البرمجية لدينا:
- قراءة النص الذي أدخله المستخدم واللغة التي حددها في النموذج
- يقرأ المتغيرات البيئية التي أنشأناها سابقا من ملف .env
- إنشاء المسار الضروري لاستدعاء خدمة Translator، والتي تتضمن اللغة المستهدفة (يتم الكشف عن اللغة المصدر تلقائيًا)
- إنشاء معلومات العنوان، التي تتضمن مفتاح خدمة Translator وموقع الخدمة ومعرف عشوائي للترجمة
- إنشاء نص الطلب، والذي يتضمن النص الذي نريد ترجمته
requestsاستدعاءpostللاتصال بخدمة المترجم- استرداد استجابة JSON من الخادم، والتي تتضمن النص المترجم
- استرداد النص المترجم (انظر الملاحظة التالية)
- المكالمات
render_templateلعرض صفحة الاستجابة
إشعار
عند استدعاء خدمة Translator، من الممكن أن يتم ترجمة عدة عبارات إلى عدة لغات في استدعاء واحد. نتيجة لذلك، يحتوي JSON الذي أرجعته الخدمة على الكثير من المعلومات، والتي نحتاج فقط إلى جزء صغير منها. ونتيجة لذلك، نحن بحاجة إلى التنحي عن عدة مستويات للحصول على النص المترجم.
على وجه التحديد، نحن بحاجة إلى قراءة النتيجة الأولى، ثم إلى مجموعة translations، والترجمة الأولى، ثم إلى text. يتم ذلك عن طريق المكالمة: translator_response[0]['translations'][0]['text']
[
{
"detectedLanguage": {
"language": "en",
"score": 1.0
},
"translations": [
{
"text": "これはテストです",
"to": "ja"
}
]
}
]
إنشاء القالب لعرض النتائج
دعنا ننشئ قالب HTML لصفحة النتائج.
أنشئ ملفا جديدا في القوالب عن طريق تحديد قوالب في أداة Explorer في Visual Studio Code. ثم حدد ملف جديد
قم بتسمية الملف results.html
إضافة HTML التالي إلى results.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Result</title> </head> <body> <div class="container"> <h2>Results</h2> <div> <strong>Original text:</strong> {{ original_text }} </div> <div> <strong>Translated text:</strong> {{ translated_text }} </div> <div> <strong>Target language code:</strong> {{ target_language }} </div> <div> <a href="{{ url_for('index') }}">Try another one!</a> </div> </div> </body> </html>
ستلاحظ أننا نقوم بالوصول إلى original_textو translated_textو target_languageوالتي قمنا بتمريرها كمعلمات مسماة في render_template باستخدام {{ }}. تطلب هذه العملية من Flask تقديم المحتويات كنص عادي. نحن نستخدم url_for('index') أيضا لإنشاء ارتباط مرة أخرى إلى الصفحة الافتراضية. بينما يمكننا، من الناحية الفنية، كتابة المسار إلى الصفحة الأصلية، باستخدام url_for يخبر Flask بقراءة مسار الدالة بالاسم الذي نقدمه (index في هذه الحالة). إذا أعدنا ترتيب موقعنا، فإن عنوان URL الذي تم إنشاؤه للارتباط سيكون صالحًا دائمًا.
اختبر الصفحة
العودة إلى terminal المتكامل في تعليمة Visual Studio البرمجية (أو إعادة فتحه باستخدام Ctrl- أو Cmd- على Mac). إذا كان الموقع قيد التشغيل حاليًا، فسنحتاج إلى التوقف وإعادة تشغيله بحيث يقرأ التطبيق المتغيرات البيئية.
استخدام Ctrl-C لإيقاف تطبيق Flask
تنفيذ الأمر
flask runلإعادة تشغيل الخدمةاستعرض لاختبار http://localhost:5000 التطبيق الخاص بك
أدخل النص في منطقة النص، واختر لغة، وحدد ترجمة
سترى النتائج!
تهانينا
لقد قمت الآن بإنشاء موقع ويب بنجاح يستخدم Translator لإجراء عمليات الترجمة! نظرًا إلى أن اللغة والتواصل يعتمدان على السياق، وهو أمر غير واضح دائمًا للكمبيوتر، فقد تلاحظ أن النتائج ليست مثالية. ومع ذلك، فإنها عادةً ما تكون دقيقة أو قريبة بدرجة كافية للتواصل الفعال، وهذا هو الهدف!
يمكن دمج الرمز الذي قدمناه هنا في أي تطبيق حسبما ترغب. يمكنك الاستمرار في البناء على موقع الويب الذي أنشأناه، أو حتى نشره في Azure App Services!