diff --git a/translations/ar/9-chat-project/README.md b/translations/ar/9-chat-project/README.md index acee6f91..f316d302 100644 --- a/translations/ar/9-chat-project/README.md +++ b/translations/ar/9-chat-project/README.md @@ -1,41 +1,35 @@ # مشروع الدردشة -يُظهر هذا المشروع كيفية بناء مساعد دردشة باستخدام نماذج GitHub. +هذا المشروع يوضح كيفية بناء مساعد دردشة باستخدام نماذج GitHub. إليك كيف يبدو المشروع النهائي: -
- تطبيق الدردشة -
+![تطبيق الدردشة](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ar.png) -بعض السياق، بناء مساعدي الدردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هنا هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، فلنبدأ. +بعض السياق، بناء مساعدي دردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، لنبدأ. ## الاتصال بالذكاء الاصطناعي التوليدي -بالنسبة للواجهة الخلفية، نستخدم نماذج GitHub. إنها خدمة رائعة تتيح لك استخدام الذكاء الاصطناعي مجانًا. انتقل إلى بيئة التجربة الخاصة بها واحصل على الكود الذي يتوافق مع لغة الواجهة الخلفية التي اخترتها. إليك كيف تبدو في [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +بالنسبة للجزء الخلفي، نحن نستخدم نماذج GitHub. إنها خدمة رائعة تمكنك من استخدام الذكاء الاصطناعي مجانًا. انتقل إلى منطقة التجربة الخاصة بها واحصل على الكود الذي يتوافق مع لغة الجزء الخلفي التي اخترتها. إليك كيف يبدو ذلك في [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- بيئة تجربة نماذج GitHub AI -
+![منطقة تجربة نماذج GitHub](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ar.png) -كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي تفضلها. +كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي اخترتها. -
- اختيار بيئة التجربة -
+![اختيار منطقة التجربة](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ar.png) -### استخدام Python +### استخدام بايثون -في هذه الحالة، نختار Python، مما يعني أننا نختار هذا الكود: +في هذه الحالة، نختار بايثون، مما يعني أننا نختار هذا الكود: ```python """Run this model in Python @@ -96,11 +90,11 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -مع هذه الدالة `call_llm` يمكننا الآن إدخال موجه ونظام موجه، وستعيد الدالة النتيجة. +مع هذه الوظيفة `call_llm` يمكننا الآن أخذ نص الإدخال ونص النظام، وستعيد الوظيفة النتيجة. ### تخصيص مساعد الذكاء الاصطناعي -إذا كنت ترغب في تخصيص مساعد الذكاء الاصطناعي، يمكنك تحديد كيفية تصرفه عن طريق ملء نظام الموجه كما يلي: +إذا كنت ترغب في تخصيص مساعد الذكاء الاصطناعي، يمكنك تحديد كيفية تصرفه عن طريق ملء نص النظام كما يلي: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## عرضه عبر واجهة برمجة تطبيقات ويب -رائع، لقد انتهينا من جزء الذكاء الاصطناعي، لنرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنلقِ نظرة على الكود: +رائع، لقد انتهينا من جزء الذكاء الاصطناعي، دعونا نرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنرى الكود الخاص بذلك: -### استخدام Python +### استخدام بايثون ```python # api.py @@ -141,11 +135,11 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -هنا، نقوم بإنشاء واجهة برمجة تطبيقات باستخدام Flask ونحدد المسار الافتراضي "/" و "/chat". المسار الأخير مخصص لاستخدام الواجهة الأمامية لتمرير الأسئلة إليه. +هنا، نقوم بإنشاء واجهة برمجة تطبيقات Flask ونحدد مسارًا افتراضيًا "/" و "/chat". المسار الأخير مخصص لاستخدامه من قبل الواجهة الأمامية لتمرير الأسئلة إليه. -لدمج *llm.py* إليك ما نحتاج إلى فعله: +لدمج *llm.py* إليك ما نحتاج إلى القيام به: -- استيراد دالة `call_llm`: +- استيراد وظيفة `call_llm`: ```python from llm import call_llm @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -رائع، الآن انتهينا مما نحتاج إليه. +رائع، الآن قمنا بما نحتاج إليه. ## إعداد Cors -يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، وهو مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الواجهة الخلفية والواجهة الأمامية ستعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالواجهة الخلفية. +يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الجزء الخلفي والواجهة الأمامية سيعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالجزء الخلفي. -### استخدام Python +### استخدام بايثون -هناك جزء من الكود في *api.py* يقوم بإعداد هذا: +هناك قطعة من الكود في *api.py* تقوم بإعداد هذا: ```python from flask_cors import CORS @@ -195,15 +189,15 @@ app = Flask(__name__) CORS(app) # * example.com ``` -حاليًا تم إعداده للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب تقييده بمجرد الانتقال إلى الإنتاج. +حاليًا تم إعدادها للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب أن نقوم بتقييده بمجرد الانتقال إلى الإنتاج. -## تشغيل مشروعك +## تشغيل المشروع -لتشغيل مشروعك، تحتاج إلى تشغيل الواجهة الخلفية أولاً ثم الواجهة الأمامية. +لتشغيل المشروع، تحتاج إلى تشغيل الجزء الخلفي أولاً ثم الواجهة الأمامية. -### استخدام Python +### استخدام بايثون -حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع واجهة خلفية؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما: +حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع الجزء الخلفي؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما: - تثبيت التبعيات: @@ -221,11 +215,11 @@ CORS(app) # * example.com python api.py ``` - إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن عليها واختر "Port Visibility" وحدد "Public". + إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن فوقه وانقر على "Port Visibility" واختر "Public". ### العمل على واجهة أمامية -الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، لنقم بإنشاء واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي: +الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، دعونا ننشئ واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، وحقل إدخال لكتابة الرسالة، وزر لإرسال رسالتك إلى الواجهة الخلفية. لنلقِ نظرة على JavaScript بعد ذلك في *app.js* +ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، ومدخل لكتابة الرسالة وزر لإرسال رسالتك إلى الجزء الخلفي. دعونا نلقي نظرة على JavaScript بعد ذلك في *app.js* **app.js** @@ -313,11 +307,11 @@ styles.css لنقم بمراجعة الكود لكل قسم: - 1) هنا نحصل على مرجع لجميع العناصر التي سنشير إليها لاحقًا في الكود. -- 2) في هذا القسم، ننشئ دالة تستخدم الطريقة المدمجة `fetch` التي تستدعي واجهتنا الخلفية. +- 2) في هذا القسم، نقوم بإنشاء وظيفة تستخدم طريقة `fetch` المدمجة التي تستدعي الجزء الخلفي. - 3) `appendMessage` تساعد في إضافة الردود وكذلك ما تكتبه كمستخدم. -- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، ووضع رسالة المستخدم في منطقة النص، واستدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص. +- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، وضع رسالة المستخدم في منطقة النص، استدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص. -لنلقِ نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا وتجعله يبدو كما تريد، ولكن إليك بعض الاقتراحات: +دعونا نلقي نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا حقًا وتجعلها تبدو كما تريد، ولكن إليك بعض الاقتراحات: **styles.css** @@ -338,14 +332,14 @@ styles.css } ``` -مع هذه الفئات الثلاث، ستقوم بتنسيق الرسائل بشكل مختلف بناءً على مصدرها، سواء من المساعد أو منك كمستخدم. إذا كنت بحاجة إلى الإلهام، تحقق من مجلد `solution/frontend/styles.css`. +مع هذه الفئات الثلاث، ستقوم بتنسيق الرسائل بشكل مختلف بناءً على مصدرها سواء من المساعد أو منك كمستخدم. إذا كنت تريد الإلهام، تحقق من مجلد `solution/frontend/styles.css`. ### تغيير عنوان URL الأساسي -كان هناك شيء واحد لم نقم بتعيينه هنا وهو `BASE_URL`، هذا غير معروف حتى يتم تشغيل الواجهة الخلفية. لتعيينه: +كان هناك شيء هنا لم نقم بتعيينه وهو `BASE_URL`، هذا غير معروف حتى يتم تشغيل الجزء الخلفي الخاص بك. لتعيينه: -- إذا كنت تشغل واجهة برمجة التطبيقات محليًا، يجب تعيينه إلى شيء مثل `http://localhost:5000`. -- إذا كنت تشغلها في Codespaces، يجب أن يبدو مثل "[name]app.github.dev". +- إذا كنت تشغل واجهة برمجة التطبيقات محليًا، يجب أن يتم تعيينه إلى شيء مثل `http://localhost:5000`. +- إذا كنت تشغلها في Codespaces، يجب أن تبدو مثل "[name]app.github.dev". ## المهمة @@ -361,7 +355,7 @@ project/ ... ``` -انسخ المحتوى من التعليمات أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك. +انسخ المحتوى من ما تم توجيهه أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك. ## الحل @@ -371,7 +365,7 @@ project/ حاول تغيير شخصية مساعد الذكاء الاصطناعي. -### بالنسبة لـ Python +### بالنسبة لبايثون عند استدعاء `call_llm` في *api.py* يمكنك تغيير الوسيط الثاني إلى ما تريد، على سبيل المثال: @@ -385,16 +379,16 @@ call_llm(message, "You are Captain Picard") ## الملخص -رائع، لقد تعلمت من الصفر كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، واجهة خلفية بلغة Python وواجهة أمامية باستخدام HTML وCSS وJavaScript. +رائع، لقد تعلمت من البداية كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، جزء خلفي في بايثون وواجهة أمامية في HTML، CSS و JavaScript. ## الإعداد باستخدام Codespaces - انتقل إلى: [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) -- قم بإنشاء من قالب (تأكد من تسجيل الدخول إلى GitHub) في الزاوية العلوية اليمنى: +- قم بإنشاء من قالب (تأكد من أنك مسجل الدخول إلى GitHub) في الزاوية العلوية اليمنى: ![إنشاء من قالب](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ar.png) -- بمجرد أن تكون في مستودعك، قم بإنشاء Codespace: +- بمجرد أن تكون في المستودع الخاص بك، قم بإنشاء Codespace: ![إنشاء Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ar.png) @@ -403,4 +397,4 @@ call_llm(message, "You are Captain Picard") --- **إخلاء المسؤولية**: -تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة. \ No newline at end of file +تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة. \ No newline at end of file diff --git a/translations/bg/9-chat-project/README.md b/translations/bg/9-chat-project/README.md index 0abc0e3f..cd11eb3d 100644 --- a/translations/bg/9-chat-project/README.md +++ b/translations/bg/9-chat-project/README.md @@ -1,37 +1,31 @@ -# Проект за чат +# Чат проект -Този проект за чат показва как да създадете Чат Асистент, използвайки GitHub Models. +Този чат проект показва как да създадете Чат Асистент, използвайки GitHub Models. Ето как изглежда завършеният проект: -
- Chat app -
+![Чат приложение](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.bg.png) Малко контекст: създаването на чат асистенти с помощта на генеративен AI е чудесен начин да започнете да учите за AI. В този урок ще научите как да интегрирате генеративен AI в уеб приложение. Да започваме. ## Свързване с генеративен AI -За бекенда използваме GitHub Models. Това е страхотна услуга, която ви позволява да използвате AI безплатно. Отидете в нейния playground и вземете кода, който съответства на избрания от вас език за бекенд. Ето как изглежда [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +За бекенда използваме GitHub Models. Това е страхотна услуга, която ви позволява да използвате AI безплатно. Отидете в неговия playground и вземете кода, който съответства на избрания от вас език за бекенд. Ето как изглежда [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.bg.png) -Както казахме, изберете таба "Code" и вашата избрана среда за изпълнение. +Както казахме, изберете таба "Code" и вашата предпочитана среда за изпълнение. -
- playground choice -
+![Избор в Playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.bg.png) ### Използване на Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Нека почистим този код малко, за да бъде по-удобен за повторно използване: +Нека почистим този код малко, за да бъде по-удобен за повторна употреба: ```python def call_llm(prompt: str, system_message: str): @@ -96,11 +90,11 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -С тази функция `call_llm` можем да вземем prompt и системен prompt, а функцията ще върне резултата. +С тази функция `call_llm` можем да подаваме prompt и системен prompt, а функцията ще връща резултата. ### Персонализиране на AI Асистента -Ако искате да персонализирате AI асистента, можете да зададете как искате да се държи, като попълните системния prompt по следния начин: +Ако искате да персонализирате AI асистента, можете да зададете как да се държи, като попълните системния prompt по следния начин: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## Излагане чрез Web API -Страхотно, завършихме AI частта, нека видим как можем да я интегрираме в Web API. За Web API избираме Flask, но всяка уеб рамка би била подходяща. Ето кода за това: +Чудесно, завършихме AI частта, нека видим как можем да я интегрираме в Web API. За Web API избираме Flask, но всяка уеб рамка би свършила работа. Нека видим кода за това: ### Използване на Python @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Последният е предназначен за използване от нашия фронтенд, за да предава въпроси. +Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Последният е предназначен за използване от фронтенда, за да предава въпроси към него. За да интегрираме *llm.py*, ето какво трябва да направим: @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -Страхотно, вече сме готови. +Чудесно, сега сме готови. ## Конфигуриране на Cors -Трябва да отбележим, че настройваме нещо като CORS, споделяне на ресурси между различни произходи. Това означава, че тъй като нашият бекенд и фронтенд ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда. +Трябва да отбележим, че настройваме нещо като CORS (споделяне на ресурси между различни източници). Това означава, че тъй като бекендът и фронтендът ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда. ### Използване на Python -Има парче код в *api.py*, което настройва това: +Има част от кода в *api.py*, която настройва това: ```python from flask_cors import CORS @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -В момента е настроено да позволява "*" (всички произходи), което е малко небезопасно. Трябва да го ограничим, когато преминем към продукция. +В момента е настроено да позволява "*" (всички източници), което е малко несигурно. Трябва да го ограничим, когато преминем към продукция. ## Стартиране на проекта @@ -203,9 +197,9 @@ CORS(app) # * example.com ### Използване на Python -Добре, имаме *llm.py* и *api.py*, как можем да ги направим да работят с бекенд? Ето какво трябва да направим: +Добре, имаме *llm.py* и *api.py*. Как можем да ги накараме да работят заедно? Има две неща, които трябва да направим: -- Инсталирайте зависимости: +- Инсталирайте зависимостите: ```sh cd backend @@ -215,17 +209,17 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- Стартирайте API +- Стартирайте API-то: ```sh python api.py ``` - Ако сте в Codespaces, трябва да отидете в Ports в долната част на редактора, да кликнете с десния бутон върху него, да изберете "Port Visibility" и да изберете "Public". + Ако сте в Codespaces, трябва да отидете в "Ports" в долната част на редактора, да кликнете с десния бутон върху него, да изберете "Port Visibility" и да изберете "Public". ### Работа върху фронтенд -Сега, когато имаме работещ API, нека създадем фронтенд за него. Минимален фронтенд, който ще подобряваме стъпка по стъпка. В папка *frontend* създайте следното: +Сега, когато имаме работещо API, нека създадем фронтенд за него. Ще започнем с минимален фронтенд, който ще подобряваме стъпка по стъпка. В папка *frontend* създайте следното: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -Горният код е абсолютният минимум, който ви е необходим за поддръжка на чат прозорец, тъй като се състои от текстово поле, където ще се показват съобщенията, поле за въвеждане на съобщението и бутон за изпращане на съобщението към бекенда. Нека разгледаме JavaScript в *app.js*. +Горният код е абсолютният минимум, необходим за поддръжка на чат прозорец. Състои се от текстово поле, където ще се показват съобщенията, поле за въвеждане на съобщения и бутон за изпращане на съобщението към бекенда. Нека разгледаме JavaScript в *app.js*. **app.js** @@ -312,12 +306,12 @@ styles.css Нека разгледаме кода по секции: -- 1) Тук получаваме референция към всички елементи, които ще използваме по-късно в кода. +- 1) Тук получаваме референции към всички елементи, които ще използваме по-късно в кода. - 2) В тази секция създаваме функция, която използва вградения метод `fetch`, за да извика нашия бекенд. -- 3) `appendMessage` помага да добавим отговори, както и съобщенията, които потребителят въвежда. -- 4) Тук слушаме събитието за изпращане и четем полето за въвеждане, поставяме съобщението на потребителя в текстовото поле, извикваме API и показваме отговора в текстовото поле. +- 3) `appendMessage` помага да добавяме отговори, както и съобщенията, които въвеждате като потребител. +- 4) Тук слушаме събитието за изпращане, четем полето за въвеждане, поставяме съобщението на потребителя в текстовото поле, извикваме API-то и показваме отговора в текстовото поле. -Нека разгледаме стилизирането, ето къде можете да бъдете креативни и да го направите както искате, но ето някои предложения: +Нека разгледаме стилизирането. Тук можете да бъдете креативни и да го направите както искате, но ето някои предложения: **styles.css** @@ -342,14 +336,14 @@ styles.css ### Промяна на Base Url -Има едно нещо, което не зададохме, и това е `BASE_URL`. Това не е известно, докато бекендът не бъде стартиран. За да го зададете: +Има едно нещо, което не зададохме, и това е `BASE_URL`. Това не е известно, докато бекендът ви не бъде стартиран. За да го зададете: -- Ако стартирате API локално, трябва да бъде зададено на нещо като `http://localhost:5000`. +- Ако стартирате API локално, трябва да бъде нещо като `http://localhost:5000`. - Ако го стартирате в Codespaces, трябва да изглежда нещо като "[name]app.github.dev". ## Задача -Създайте собствена папка *project* със съдържание като следното: +Създайте своя собствена папка *project* със съдържание, както е описано по-горе: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Копирайте съдържанието от инструкциите по-горе, но се чувствайте свободни да го персонализирате според вашите предпочитания. +Копирайте съдържанието от инструкциите по-горе, но не се колебайте да го персонализирате според вашите предпочитания. ## Решение @@ -385,22 +379,22 @@ call_llm(message, "You are Captain Picard") ## Обобщение -Страхотно, научихте от нулата как да създадете личен асистент с помощта на AI. Направихме това, използвайки GitHub Models, бекенд на Python и фронтенд на HTML, CSS и JavaScript. +Чудесно, научихте как от нулата да създадете личен асистент, използвайки AI. Направихме това с помощта на GitHub Models, бекенд на Python и фронтенд с HTML, CSS и JavaScript. ## Настройка с Codespaces - Навигирайте до: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) - Създайте от шаблон (уверете се, че сте влезли в GitHub) в горния десен ъгъл: - ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bg.png) + ![Създаване от шаблон](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bg.png) -- След като сте в репото си, създайте Codespace: +- След като сте в своето хранилище, създайте Codespace: - ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bg.png) + ![Създаване на Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bg.png) - Това трябва да стартира среда, с която можете да работите. + Това ще стартира среда, с която можете да работите. --- **Отказ от отговорност**: -Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file +Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file diff --git a/translations/bn/9-chat-project/README.md b/translations/bn/9-chat-project/README.md index 024497cd..2e852839 100644 --- a/translations/bn/9-chat-project/README.md +++ b/translations/bn/9-chat-project/README.md @@ -1,8 +1,8 @@ # Projeto de Chat -Este projeto de chat mostra como criar um Assistente de Chat usando os Modelos do GitHub. +Este projeto de chat mostra como construir um Assistente de Chat usando GitHub Models. Aqui está como o projeto finalizado se parece: -
- Aplicativo de Chat -
+![App de Chat](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.br.png) Um pouco de contexto: construir assistentes de chat usando IA generativa é uma ótima maneira de começar a aprender sobre IA. O que você aprenderá aqui é como integrar IA generativa em um aplicativo web ao longo desta lição. Vamos começar. -## Conectando à IA generativa +## Conectando-se à IA generativa -Para o backend, estamos usando os Modelos do GitHub. É um ótimo serviço que permite usar IA gratuitamente. Acesse o playground e copie o código correspondente à linguagem de backend escolhida. Veja como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +Para o backend, estamos usando GitHub Models. É um ótimo serviço que permite usar IA gratuitamente. Acesse o playground e copie o código que corresponde à linguagem de backend escolhida. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- Playground de IA dos Modelos do GitHub -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.br.png) Como mencionado, selecione a aba "Code" e o runtime escolhido. -
- Escolha no playground -
+![Escolha no Playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.br.png) ### Usando Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Vamos limpar um pouco esse código para torná-lo reutilizável: +Vamos limpar este código um pouco para que seja reutilizável: ```python def call_llm(prompt: str, system_message: str): @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -Com esta função `call_llm`, agora podemos passar um prompt e um system prompt, e a função retorna o resultado. +Com esta função `call_llm`, agora podemos passar um prompt e um prompt de sistema, e a função retorna o resultado. ### Personalizar o Assistente de IA -Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o system prompt assim: +Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o prompt de sistema assim: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Exponha-o via uma API Web +## Exponha via uma API Web -Ótimo, já concluímos a parte de IA. Agora, vamos ver como podemos integrá-la em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código: +Ótimo, já concluímos a parte de IA. Agora vamos ver como podemos integrar isso em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código: ### Usando Python @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo nosso frontend para enviar perguntas. +Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo frontend para enviar perguntas. Para integrar o *llm.py*, aqui está o que precisamos fazer: @@ -182,7 +176,7 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer: ## Configurar Cors -Devemos destacar que configuramos algo como CORS, compartilhamento de recursos entre origens. Isso significa que, como nosso backend e frontend serão executados em portas diferentes, precisamos permitir que o frontend se comunique com o backend. +Devemos mencionar que configuramos algo como CORS, compartilhamento de recursos entre origens. Isso significa que, como nosso backend e frontend rodarão em portas diferentes, precisamos permitir que o frontend chame o backend. ### Usando Python @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Atualmente, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringi-lo quando formos para produção. +No momento, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringir isso quando formos para produção. ## Execute seu projeto @@ -203,7 +197,7 @@ Para executar seu projeto, você precisa iniciar primeiro o backend e depois o f ### Usando Python -Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer: +Ok, então temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer: - Instalar dependências: @@ -221,11 +215,11 @@ Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? python api.py ``` - Se você estiver usando Codespaces, vá para Ports na parte inferior do editor, clique com o botão direito sobre ele, selecione "Port Visibility" e escolha "Public". + Se você estiver usando Codespaces, precisa ir até Ports na parte inferior do editor, clicar com o botão direito sobre ele, selecionar "Port Visibility" e escolher "Public". -### Trabalhar em um frontend +### Trabalhar no frontend -Agora que temos uma API em funcionamento, vamos criar um frontend para isso. Um frontend mínimo que melhoraremos passo a passo. Em uma pasta *frontend*, crie o seguinte: +Agora que temos uma API funcionando, vamos criar um frontend para isso. Um frontend mínimo que iremos melhorar gradualmente. Na pasta *frontend*, crie o seguinte: ```text backend/ @@ -253,7 +247,7 @@ Vamos começar com **index.html**: ``` -O código acima é o mínimo necessário para suportar uma janela de chat, consistindo em uma área de texto onde as mensagens serão exibidas, um campo de entrada para digitar a mensagem e um botão para enviar sua mensagem ao backend. Vamos olhar o JavaScript em *app.js*. +O código acima é o mínimo necessário para suportar uma janela de chat, consistindo em uma área de texto onde as mensagens serão exibidas, um campo de entrada para digitar a mensagem e um botão para enviar sua mensagem ao backend. Vamos olhar o JavaScript em seguida, no arquivo *app.js*. **app.js** @@ -312,12 +306,12 @@ O código acima é o mínimo necessário para suportar uma janela de chat, consi Vamos analisar o código por seção: -- 1) Aqui obtemos uma referência a todos os elementos que usaremos mais tarde no código. +- 1) Aqui obtemos uma referência a todos os elementos que usaremos no código. - 2) Nesta seção, criamos uma função que usa o método embutido `fetch` para chamar nosso backend. -- 3) `appendMessage` ajuda a adicionar respostas, bem como o que você digita como usuário. +- 3) `appendMessage` ajuda a adicionar respostas, bem como o que você, como usuário, digita. - 4) Aqui ouvimos o evento de envio, lemos o campo de entrada, colocamos a mensagem do usuário na área de texto, chamamos a API e renderizamos a resposta na área de texto. -Agora vamos olhar o estilo. Aqui você pode ser criativo e personalizar como quiser, mas aqui estão algumas sugestões: +Agora vamos olhar o estilo. Aqui você pode ser criativo e fazer com que pareça como quiser, mas aqui estão algumas sugestões: **styles.css** @@ -338,18 +332,18 @@ Agora vamos olhar o estilo. Aqui você pode ser criativo e personalizar como qui } ``` -Com essas três classes, você estilizará as mensagens de forma diferente dependendo de sua origem: do assistente ou do usuário. Se quiser se inspirar, confira a pasta `solution/frontend/styles.css`. +Com essas três classes, você estilizará as mensagens de forma diferente dependendo de onde elas vêm: do assistente ou de você como usuário. Se quiser se inspirar, confira a pasta `solution/frontend/styles.css`. -### Alterar a Base Url +### Alterar Base Url -Há algo que não configuramos: `BASE_URL`. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo: +Há uma coisa que não configuramos aqui: `BASE_URL`. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo: -- Se você executar a API localmente, deve ser algo como `http://localhost:5000`. +- Se você executar a API localmente, deve configurá-lo como algo como `http://localhost:5000`. - Se estiver usando Codespaces, deve ser algo como "[nome]app.github.dev". ## Tarefa -Crie sua própria pasta *project* com o seguinte conteúdo: +Crie sua própria pasta *project* com o conteúdo como descrito: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Copie o conteúdo das instruções acima, mas sinta-se à vontade para personalizar como preferir. +Copie o conteúdo do que foi instruído acima, mas sinta-se à vontade para personalizar como preferir. ## Solução @@ -385,22 +379,22 @@ Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html* ## Resumo -Ótimo, você aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso usando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript. +Ótimo, você aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso usando GitHub Models, um backend em Python e um frontend em HTML, CSS e JavaScript. ## Configuração com Codespaces - Navegue até: [Repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - Crie a partir de um template (certifique-se de estar logado no GitHub) no canto superior direito: - ![Criar a partir de um template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png) + ![Criar a partir de template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png) - Uma vez no seu repositório, crie um Codespace: ![Criar codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.br.png) - Isso deve iniciar um ambiente com o qual você pode trabalhar agora. + Isso deve iniciar um ambiente no qual você pode trabalhar agora. --- **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. \ No newline at end of file +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. \ No newline at end of file diff --git a/translations/cs/9-chat-project/README.md b/translations/cs/9-chat-project/README.md index ffa93136..d5a1ac6c 100644 --- a/translations/cs/9-chat-project/README.md +++ b/translations/cs/9-chat-project/README.md @@ -1,37 +1,31 @@ # Chat projekt -Tento chat projekt ukazuje, jak vytvořit Chat Assistenta pomocí GitHub Models. +Tento chat projekt ukazuje, jak vytvořit Chat Asistenta pomocí GitHub Models. Takto vypadá hotový projekt: -
- Chat app -
+![Chat aplikace](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.cs.png) -Trochu kontextu: vytváření chatovacích asistentů pomocí generativní AI je skvělý způsob, jak začít učit se o AI. V této lekci se naučíte, jak integrovat generativní AI do webové aplikace. Pojďme začít. +Trocha kontextu: vytváření chatovacích asistentů pomocí generativní AI je skvělý způsob, jak začít s učením o AI. V této lekci se naučíte, jak integrovat generativní AI do webové aplikace. Pojďme začít. -## Připojení k generativní AI +## Připojení ke generativní AI -Pro backend používáme GitHub Models. Je to skvělá služba, která vám umožňuje používat AI zdarma. Přejděte na její playground a získejte kód odpovídající vašemu zvolenému backendovému jazyku. Takto to vypadá na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Pro backend používáme GitHub Models. Je to skvělá služba, která vám umožňuje používat AI zdarma. Přejděte na její playground a získejte kód odpovídající vašemu zvolenému backendovému jazyku. Takto vypadá [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.cs.png) -Jak jsme zmínili, vyberte záložku "Code" a svůj zvolený runtime. +Jak jsme zmínili, vyberte záložku "Code" a váš zvolený runtime. -
- playground choice -
+![Výběr v playgroundu](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.cs.png) ### Použití Pythonu @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Trochu upravme tento kód, aby byl znovu použitelný: +Trochu tento kód upravíme, aby byl znovu použitelný: ```python def call_llm(prompt: str, system_message: str): @@ -96,7 +90,7 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -S touto funkcí `call_llm` nyní můžeme vzít prompt a systémový prompt a funkce vrátí výsledek. +S touto funkcí `call_llm` nyní můžeme zadat prompt a systémový prompt a funkce vrátí výsledek. ### Přizpůsobení AI asistenta @@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## Zpřístupnění přes Web API -Skvělé, máme hotovou AI část, podívejme se, jak ji můžeme integrovat do Web API. Pro Web API jsme se rozhodli použít Flask, ale jakýkoli webový framework by měl být v pořádku. Podívejme se na kód: +Skvělé, AI část máme hotovou, podívejme se, jak ji můžeme integrovat do Web API. Pro Web API jsme zvolili Flask, ale jakýkoli webový framework by měl být v pořádku. Podívejme se na kód: ### Použití Pythonu @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Zde vytvoříme Flask API a definujeme výchozí trasu "/" a "/chat". Druhá je určena pro použití naším frontendem k předávání otázek. +Zde vytvoříme Flask API a definujeme výchozí trasu "/" a "/chat". Druhá trasa je určena pro použití naším frontendem k předávání otázek. -Pro integraci *llm.py* potřebujeme udělat následující: +Pro integraci *llm.py* je třeba udělat následující: - Importovat funkci `call_llm`: @@ -167,7 +161,7 @@ Pro integraci *llm.py* potřebujeme udělat následující: }) ``` - Zde analyzujeme příchozí požadavek, abychom získali vlastnost `message` z JSON těla. Poté zavoláme LLM tímto způsobem: + Zde zpracujeme příchozí požadavek, abychom získali vlastnost `message` z JSON těla. Poté zavoláme LLM tímto způsobem: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ Pro integraci *llm.py* potřebujeme udělat následující: }) ``` -Skvělé, nyní máme hotovo, co jsme potřebovali. +Skvělé, nyní máme vše, co potřebujeme. ## Nastavení Cors -Je třeba zmínit, že jsme nastavili něco jako CORS, sdílení zdrojů mezi různými originy. To znamená, že protože náš backend a frontend budou běžet na různých portech, musíme umožnit frontendu volat backend. +Je třeba zmínit, že jsme nastavili něco jako CORS, sdílení zdrojů mezi různými doménami. To znamená, že protože náš backend a frontend poběží na různých portech, musíme povolit frontendu volat backend. ### Použití Pythonu -V *api.py* je kód, který to nastavuje: +V souboru *api.py* je kód, který toto nastavuje: ```python from flask_cors import CORS @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Momentálně je nastaveno na povolení "*" což znamená všechny originy, což je trochu nebezpečné. Měli bychom to omezit, jakmile půjdeme do produkce. +Momentálně je nastaveno povolení pro všechny domény "*", což je trochu nebezpečné. Měli bychom to omezit, jakmile přejdeme do produkce. ## Spuštění projektu @@ -203,7 +197,7 @@ Pro spuštění projektu je třeba nejprve spustit backend a poté frontend. ### Použití Pythonu -Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Potřebujeme udělat dvě věci: +Dobře, máme *llm.py* a *api.py*. Jak to můžeme zprovoznit s backendem? Potřebujeme udělat dvě věci: - Nainstalovat závislosti: @@ -215,17 +209,17 @@ Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Potř pip install openai flask flask-cors openai ``` -- Spustit API +- Spustit API: ```sh python api.py ``` - Pokud jste v Codespaces, musíte přejít na Ports v dolní části editoru, kliknout pravým tlačítkem na něj a vybrat "Port Visibility" a zvolit "Public". + Pokud jste v Codespaces, musíte přejít do sekce Ports v dolní části editoru, kliknout pravým tlačítkem a vybrat "Port Visibility" a zvolit "Public". ### Práce na frontendu -Nyní, když máme API spuštěné, vytvoříme frontend. Minimální frontend, který budeme postupně vylepšovat. Ve složce *frontend* vytvořte následující: +Nyní, když máme API spuštěné, vytvoříme frontend. Začneme s minimálním frontendem, který budeme postupně vylepšovat. Ve složce *frontend* vytvořte následující: ```text backend/ @@ -253,7 +247,7 @@ Začněme s **index.html**: ``` -Toto je absolutní minimum, které potřebujete k podpoře chatovacího okna, protože obsahuje textové pole, kde se budou zobrazovat zprávy, vstupní pole pro psaní zprávy a tlačítko pro odeslání zprávy na backend. Podívejme se na JavaScript v *app.js* +Toto je absolutní minimum potřebné pro podporu chatovacího okna. Obsahuje textové pole, kde se zobrazují zprávy, vstupní pole pro psaní zpráv a tlačítko pro odeslání zprávy na backend. Podívejme se nyní na JavaScript v *app.js*. **app.js** @@ -310,14 +304,14 @@ Toto je absolutní minimum, které potřebujete k podpoře chatovacího okna, pr })(); ``` -Projděme si kód po sekcích: +Projděme si kód po částech: -- 1) Zde získáme referenci na všechny naše prvky, na které budeme později odkazovat v kódu. -- 2) V této sekci vytvoříme funkci, která používá vestavěnou metodu `fetch` pro volání našeho backendu. -- 3) `appendMessage` pomáhá přidávat odpovědi i to, co jako uživatel napíšete. -- 4) Zde posloucháme událost submit, čteme vstupní pole, umístíme zprávu uživatele do textového pole, zavoláme API a zobrazíme odpověď v textovém poli. +- 1) Získáme referenci na všechny prvky, které budeme později v kódu používat. +- 2) Vytvoříme funkci, která pomocí vestavěné metody `fetch` volá náš backend. +- 3) `appendMessage` pomáhá přidávat odpovědi i zprávy, které uživatel napíše. +- 4) Posloucháme událost odeslání, přečteme vstupní pole, umístíme uživatelovu zprávu do textového pole, zavoláme API a zobrazíme odpověď v textovém poli. -Podívejme se na stylování, zde můžete být opravdu kreativní a vytvořit vzhled podle svých představ, ale zde jsou některé návrhy: +Podívejme se na stylování, kde se můžete opravdu vyřádit. Zde je několik návrhů: **styles.css** @@ -338,18 +332,18 @@ Podívejme se na stylování, zde můžete být opravdu kreativní a vytvořit v } ``` -S těmito třemi třídami budete stylovat zprávy různě podle toho, odkud pocházejí – od asistenta nebo od vás jako uživatele. Pokud chcete inspiraci, podívejte se do složky `solution/frontend/styles.css`. +S těmito třemi třídami budete stylovat zprávy odlišně podle toho, zda pocházejí od asistenta nebo od uživatele. Pokud hledáte inspiraci, podívejte se do složky `solution/frontend/styles.css`. -### Změna Base Url +### Změna Base URL -Jedna věc, kterou jsme zde nenastavili, byla `BASE_URL`, která není známa, dokud není backend spuštěn. Pro nastavení: +Jedna věc, kterou jsme zde nenastavili, je `BASE_URL`. Ta není známa, dokud není backend spuštěn. Pro nastavení: - Pokud spouštíte API lokálně, mělo by být nastaveno na něco jako `http://localhost:5000`. - Pokud běží v Codespaces, mělo by vypadat jako "[name]app.github.dev". -## Úkol +## Zadání -Vytvořte vlastní složku *project* s obsahem takto: +Vytvořte si vlastní složku *project* s obsahem takto: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Zkopírujte obsah z toho, co bylo uvedeno výše, ale klidně si jej přizpůsobte podle svých představ. +Zkopírujte obsah podle výše uvedených pokynů, ale klidně si jej přizpůsobte podle svého. ## Řešení @@ -373,7 +367,7 @@ Zkuste změnit osobnost AI asistenta. ### Pro Python -Když voláte `call_llm` v *api.py*, můžete změnit druhý argument na to, co chcete, například: +Když voláte `call_llm` v *api.py*, můžete změnit druhý argument na cokoli chcete, například: ```python call_llm(message, "You are Captain Picard") @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### Frontend -Změňte také CSS a text podle svých představ, tedy proveďte změny v *index.html* a *styles.css*. +Změňte také CSS a text podle svého vkusu, tedy proveďte změny v *index.html* a *styles.css*. ## Shrnutí -Skvělé, naučili jste se od začátku, jak vytvořit osobního asistenta pomocí AI. Udělali jsme to pomocí GitHub Models, backendu v Pythonu a frontendu v HTML, CSS a JavaScriptu. +Skvělé, naučili jste se od základů, jak vytvořit osobního asistenta pomocí AI. Použili jsme GitHub Models, backend v Pythonu a frontend v HTML, CSS a JavaScriptu. ## Nastavení s Codespaces - Přejděte na: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Vytvořte z šablony (ujistěte se, že jste přihlášeni na GitHub) v pravém horním rohu: +- Vytvořte z šablony (ujistěte se, že jste přihlášeni do GitHubu) v pravém horním rohu: - ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.cs.png) + ![Vytvořit ze šablony](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.cs.png) - Jakmile jste ve svém repozitáři, vytvořte Codespace: - ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.cs.png) + ![Vytvořit Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.cs.png) - To by mělo spustit prostředí, se kterým nyní můžete pracovat. + Tím se spustí prostředí, se kterým nyní můžete pracovat. --- **Prohlášení**: -Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu. \ No newline at end of file +Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu. \ No newline at end of file diff --git a/translations/da/9-chat-project/README.md b/translations/da/9-chat-project/README.md index 10a00ce3..6c74bc46 100644 --- a/translations/da/9-chat-project/README.md +++ b/translations/da/9-chat-project/README.md @@ -1,8 +1,8 @@ -# Έργο Συνομιλίας +# Chat project Αυτό το έργο συνομιλίας δείχνει πώς να δημιουργήσετε έναν Βοηθό Συνομιλίας χρησιμοποιώντας τα GitHub Models. -Δείτε πώς μοιάζει το τελικό έργο: +Δείτε πώς φαίνεται το τελικό έργο: -
- Εφαρμογή συνομιλίας -
+![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.el.png) -Λίγο πλαίσιο: η δημιουργία βοηθών συνομιλίας με τη χρήση γενετικής AI είναι ένας εξαιρετικός τρόπος για να ξεκινήσετε να μαθαίνετε για την AI. Σε αυτό το μάθημα, θα μάθετε πώς να ενσωματώνετε γενετική AI σε μια εφαρμογή ιστού. Ας ξεκινήσουμε. +Λίγο πλαίσιο, η δημιουργία βοηθών συνομιλίας χρησιμοποιώντας γενετική AI είναι ένας εξαιρετικός τρόπος για να ξεκινήσετε να μαθαίνετε για την AI. Αυτό που θα μάθετε είναι πώς να ενσωματώσετε γενετική AI σε μια εφαρμογή ιστού κατά τη διάρκεια αυτού του μαθήματος. Ας ξεκινήσουμε. ## Σύνδεση με γενετική AI -Για το backend, χρησιμοποιούμε τα GitHub Models. Είναι μια εξαιρετική υπηρεσία που σας επιτρέπει να χρησιμοποιείτε AI δωρεάν. Μεταβείτε στο playground της και πάρτε τον κώδικα που αντιστοιχεί στη γλώσσα backend που επιλέξατε. Δείτε πώς φαίνεται στο [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Για το backend, χρησιμοποιούμε τα GitHub Models. Είναι μια εξαιρετική υπηρεσία που σας επιτρέπει να χρησιμοποιείτε AI δωρεάν. Μεταβείτε στο playground και πάρτε τον κώδικα που αντιστοιχεί στη γλώσσα backend που έχετε επιλέξει. Δείτε πώς φαίνεται στο [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.el.png) -Όπως είπαμε, επιλέξτε την καρτέλα "Code" και το runtime που προτιμάτε. +Όπως είπαμε, επιλέξτε την καρτέλα "Code" και το runtime που έχετε επιλέξει. -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.el.png) ### Χρήση Python -Σε αυτή την περίπτωση, επιλέγουμε Python, που σημαίνει ότι παίρνουμε τον εξής κώδικα: +Σε αυτή την περίπτωση επιλέγουμε Python, που σημαίνει ότι παίρνουμε αυτόν τον κώδικα: ```python """Run this model in Python @@ -96,11 +90,11 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -Με αυτή τη συνάρτηση `call_llm`, μπορούμε τώρα να πάρουμε ένα prompt και ένα system prompt, και η συνάρτηση επιστρέφει το αποτέλεσμα. +Με αυτή τη συνάρτηση `call_llm` μπορούμε τώρα να πάρουμε ένα prompt και ένα system prompt και η συνάρτηση επιστρέφει το αποτέλεσμα. ### Προσαρμογή του Βοηθού AI -Αν θέλετε να προσαρμόσετε τον βοηθό AI, μπορείτε να καθορίσετε πώς θέλετε να συμπεριφέρεται, γεμίζοντας το system prompt όπως παρακάτω: +Αν θέλετε να προσαρμόσετε τον Βοηθό AI, μπορείτε να καθορίσετε πώς θέλετε να συμπεριφέρεται, γεμίζοντας το system prompt όπως παρακάτω: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## Έκθεση μέσω Web API -Τέλεια, ολοκληρώσαμε το μέρος της AI. Ας δούμε πώς μπορούμε να το ενσωματώσουμε σε ένα Web API. Για το Web API, επιλέγουμε να χρησιμοποιήσουμε Flask, αλλά οποιοδήποτε web framework θα ήταν καλό. Ας δούμε τον κώδικα: +Τέλεια, έχουμε ολοκληρώσει το μέρος της AI, ας δούμε πώς μπορούμε να το ενσωματώσουμε σε ένα Web API. Για το Web API, επιλέγουμε να χρησιμοποιήσουμε Flask, αλλά οποιοδήποτε web framework θα ήταν καλό. Ας δούμε τον κώδικα: ### Χρήση Python @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και μια "/chat". Η δεύτερη προορίζεται για χρήση από το frontend μας για να στέλνει ερωτήσεις. +Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και "/chat". Η τελευταία προορίζεται να χρησιμοποιηθεί από το frontend μας για να στείλει ερωτήσεις. -Για να ενσωματώσουμε το *llm.py*, πρέπει να κάνουμε τα εξής: +Για να ενσωματώσουμε το *llm.py*, εδώ είναι τι πρέπει να κάνουμε: - Εισαγωγή της συνάρτησης `call_llm`: @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - Εδώ αναλύουμε το εισερχόμενο αίτημα για να ανακτήσουμε την ιδιότητα `message` από το σώμα του JSON. Στη συνέχεια, καλούμε το LLM με την εξής κλήση: + Εδώ αναλύουμε το εισερχόμενο αίτημα για να ανακτήσουμε την ιδιότητα `message` από το JSON σώμα. Στη συνέχεια, καλούμε το LLM με αυτή την κλήση: ```python response = call_llm(message, "You are a helpful assistant") @@ -182,7 +176,7 @@ if __name__ == "__main__": ## Ρύθμιση Cors -Πρέπει να αναφέρουμε ότι ρυθμίσαμε κάτι σαν το CORS (cross-origin resource sharing). Αυτό σημαίνει ότι, επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend. +Πρέπει να αναφέρουμε ότι ρυθμίζουμε κάτι σαν CORS, cross-origin resource sharing. Αυτό σημαίνει ότι επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend. ### Χρήση Python @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" (όλες τις προελεύσεις), κάτι που είναι λίγο ανασφαλές. Θα πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή. +Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" που είναι όλες οι προελεύσεις και αυτό είναι λίγο ανασφαλές. Πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή. ## Εκτέλεση του έργου σας @@ -203,7 +197,7 @@ CORS(app) # * example.com ### Χρήση Python -Εντάξει, έχουμε τα *llm.py* και *api.py*. Πώς μπορούμε να τα κάνουμε να λειτουργήσουν με ένα backend; Υπάρχουν δύο πράγματα που πρέπει να κάνουμε: +Εντάξει, έχουμε *llm.py* και *api.py*, πώς μπορούμε να τα κάνουμε να λειτουργήσουν με ένα backend; Λοιπόν, υπάρχουν δύο πράγματα που πρέπει να κάνουμε: - Εγκατάσταση εξαρτήσεων: @@ -215,17 +209,17 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- Εκκίνηση του API: +- Εκκίνηση του API ```sh python api.py ``` - Αν βρίσκεστε σε Codespaces, πρέπει να μεταβείτε στις Θύρες στο κάτω μέρος του επεξεργαστή, να κάνετε δεξί κλικ και να επιλέξετε "Port Visibility" και να επιλέξετε "Public". + Αν βρίσκεστε σε Codespaces, πρέπει να μεταβείτε στις Θύρες στο κάτω μέρος του επεξεργαστή, να κάνετε δεξί κλικ πάνω τους και να επιλέξετε "Port Visibility" και να επιλέξετε "Public". -### Εργασία σε ένα frontend +### Εργασία σε frontend -Τώρα που έχουμε ένα API σε λειτουργία, ας δημιουργήσουμε ένα frontend για αυτό. Ένα ελάχιστο frontend που θα βελτιώσουμε σταδιακά. Στον φάκελο *frontend*, δημιουργήστε τα εξής: +Τώρα που έχουμε ένα API που λειτουργεί, ας δημιουργήσουμε ένα frontend για αυτό. Ένα ελάχιστο frontend που θα βελτιώσουμε βήμα προς βήμα. Σε έναν φάκελο *frontend*, δημιουργήστε τα εξής: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -Το παραπάνω είναι το απολύτως ελάχιστο που χρειάζεστε για να υποστηρίξετε ένα παράθυρο συνομιλίας, καθώς αποτελείται από ένα textarea όπου θα εμφανίζονται τα μηνύματα, ένα input για να πληκτρολογείτε το μήνυμα και ένα κουμπί για να στέλνετε το μήνυμά σας στο backend. Ας δούμε τον JavaScript κώδικα στο *app.js*. +Αυτό είναι το απόλυτο ελάχιστο που χρειάζεστε για να υποστηρίξετε ένα παράθυρο συνομιλίας, καθώς αποτελείται από ένα textarea όπου θα εμφανίζονται τα μηνύματα, ένα input για να πληκτρολογείτε το μήνυμα και ένα κουμπί για να στέλνετε το μήνυμα στο backend. Ας δούμε τον JavaScript κώδικα στο *app.js* **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -Ας δούμε τον κώδικα ανά ενότητα: +Ας δούμε τον κώδικα ανά τμήμα: -- 1) Εδώ παίρνουμε αναφορές σε όλα τα στοιχεία που θα χρησιμοποιήσουμε αργότερα στον κώδικα. -- 2) Σε αυτή την ενότητα, δημιουργούμε μια συνάρτηση που χρησιμοποιεί τη μέθοδο `fetch` για να καλεί το backend μας. -- 3) Η `appendMessage` βοηθά στην προσθήκη απαντήσεων καθώς και των μηνυμάτων που πληκτρολογεί ο χρήστης. -- 4) Εδώ ακούμε το γεγονός υποβολής και διαβάζουμε το πεδίο εισόδου, τοποθετούμε το μήνυμα του χρήστη στο textarea, καλούμε το API και εμφανίζουμε την απάντηση στο textarea. +- 1) Εδώ παίρνουμε μια αναφορά σε όλα τα στοιχεία που θα αναφερόμαστε αργότερα στον κώδικα. +- 2) Σε αυτό το τμήμα, δημιουργούμε μια συνάρτηση που χρησιμοποιεί τη μέθοδο `fetch` για να καλεί το backend μας. +- 3) Η `appendMessage` βοηθά να προσθέσετε απαντήσεις καθώς και ό,τι πληκτρολογείτε ως χρήστης. +- 4) Εδώ ακούμε το συμβάν υποβολής και τελικά διαβάζουμε το πεδίο εισόδου, τοποθετούμε το μήνυμα του χρήστη στο textarea, καλούμε το API και εμφανίζουμε την απάντηση στο textarea. -Ας δούμε το styling στη συνέχεια. Εδώ μπορείτε να γίνετε δημιουργικοί και να το κάνετε να μοιάζει όπως θέλετε, αλλά εδώ είναι μερικές προτάσεις: +Ας δούμε το styling στη συνέχεια, εδώ μπορείτε να γίνετε πολύ δημιουργικοί και να το κάνετε να φαίνεται όπως θέλετε, αλλά εδώ είναι μερικές προτάσεις: **styles.css** @@ -342,9 +336,9 @@ styles.css ### Αλλαγή Base Url -Υπάρχει κάτι που δεν ορίσαμε εδώ και αυτό είναι το `BASE_URL`. Αυτό δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ορίσετε: +Υπήρχε κάτι εδώ που δεν ρυθμίσαμε και αυτό ήταν το `BASE_URL`, το οποίο δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ρυθμίσετε: -- Αν εκτελείτε το API τοπικά, θα πρέπει να οριστεί σε κάτι σαν `http://localhost:5000`. +- Αν εκτελείτε το API τοπικά, θα πρέπει να ρυθμιστεί σε κάτι σαν `http://localhost:5000`. - Αν εκτελείται σε Codespaces, θα πρέπει να μοιάζει με "[name]app.github.dev". ## Εργασία @@ -361,15 +355,15 @@ project/ ... ``` -Αντιγράψτε το περιεχόμενο από ό,τι σας δόθηκε παραπάνω, αλλά προσαρμόστε το όπως θέλετε. +Αντιγράψτε το περιεχόμενο από ό,τι σας δόθηκε παραπάνω, αλλά μη διστάσετε να το προσαρμόσετε όπως θέλετε. ## Λύση -[Λύση](./solution/README.md) +[Solution](./solution/README.md) ## Bonus -Δοκιμάστε να αλλάξετε την προσωπικότητα του βοηθού AI. +Δοκιμάστε να αλλάξετε την προσωπικότητα του Βοηθού AI. ### Για Python @@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard") ### Frontend -Αλλάξτε επίσης το CSS και το κείμενο όπως θέλετε, κάνοντας αλλαγές στα *index.html* και *styles.css*. +Αλλάξτε επίσης το CSS και το κείμενο όπως θέλετε, κάνοντας αλλαγές στο *index.html* και *styles.css*. ## Περίληψη -Τέλεια, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε αυτό χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript. +Τέλεια, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript. ## Ρύθμιση με Codespaces @@ -394,7 +388,7 @@ call_llm(message, "You are Captain Picard") ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.el.png) -- Μόλις βρεθείτε στο αποθετήριό σας, δημιουργήστε ένα Codespace: +- Μόλις βρεθείτε στο repo σας, δημιουργήστε ένα Codespace: ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.el.png) diff --git a/translations/en/9-chat-project/README.md b/translations/en/9-chat-project/README.md index e3ff68d8..c8292367 100644 --- a/translations/en/9-chat-project/README.md +++ b/translations/en/9-chat-project/README.md @@ -1,37 +1,31 @@ -# Chat project +# Chat Project This chat project demonstrates how to build a Chat Assistant using GitHub Models. Here's what the completed project looks like: -
- Chat app -
+![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.en.png) -Building Chat assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started. +To provide some context, building Chat Assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started. -## Connecting to generative AI +## Connecting to Generative AI -For the backend, we're using GitHub Models. It's a fantastic service that lets you use AI for free. Visit its playground and grab the code for your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +For the backend, we're using GitHub Models. It's a fantastic service that allows you to use AI for free. Visit its playground and grab the code corresponding to your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.en.png) -As mentioned, select the "Code" tab and choose your runtime. +As mentioned, select the "Code" tab and your preferred runtime. -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.en.png) ### Using Python @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -With the `call_llm` function, we can now pass a prompt and a system prompt, and the function will return the result. +With this `call_llm` function, we can now pass a prompt and a system prompt, and the function will return the result. -### Customize AI Assistant +### Customizing the AI Assistant -To customize the AI assistant, you can define its behavior by setting the system prompt like this: +To customize the AI assistant, you can define its behavior by modifying the system prompt like this: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Expose it via a Web API +## Exposing It via a Web API -Now that the AI part is done, let's integrate it into a Web API. For the Web API, we'll use Flask, but any web framework will work. Here's the code: +Great, we've completed the AI part. Now, let's see how to integrate it into a Web API. For the Web API, we'll use Flask, but any web framework should work. Here's the code: ### Using Python @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -In this code, we create a Flask API and define two routes: "/" and "/chat". The "/chat" route is intended for the frontend to send questions to the backend. +In this code, we create a Flask API and define two routes: the default route "/" and "/chat". The "/chat" route is intended for the frontend to send questions to the backend. -To integrate *llm.py*, follow these steps: +To integrate *llm.py*, here's what we need to do: - Import the `call_llm` function: @@ -167,7 +161,7 @@ To integrate *llm.py*, follow these steps: }) ``` - Here, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM using this function: + In this step, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM with this: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ To integrate *llm.py*, follow these steps: }) ``` -That's it! The integration is complete. +Great, now we've completed the necessary steps. -## Configure Cors +## Configuring CORS -It's important to set up CORS (Cross-Origin Resource Sharing). Since the backend and frontend will run on different ports, we need to allow the frontend to communicate with the backend. +It's important to set up CORS (Cross-Origin Resource Sharing). Since our backend and frontend will run on different ports, we need to allow the frontend to communicate with the backend. ### Using Python -In *api.py*, there's a piece of code that configures CORS: +Here's a piece of code in *api.py* that sets this up: ```python from flask_cors import CORS @@ -195,15 +189,15 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Currently, it's set to allow all origins ("*"), which is not secure. Make sure to restrict it when deploying to production. +Currently, it's configured to allow all origins ("*"), which is not secure. This should be restricted when moving to production. -## Run your project +## Running Your Project To run your project, start the backend first, followed by the frontend. ### Using Python -With *llm.py* and *api.py* ready, here's how to get the backend running: +Now that we have *llm.py* and *api.py*, how do we make the backend work? There are two steps: - Install dependencies: @@ -221,11 +215,11 @@ With *llm.py* and *api.py* ready, here's how to get the backend running: python api.py ``` - If you're using Codespaces, go to the Ports section at the bottom of the editor, right-click on the port, select "Port Visibility," and choose "Public." + If you're using Codespaces, go to the Ports section at the bottom of the editor, right-click on it, select "Port Visibility," and choose "Public." -### Work on a frontend +### Working on the Frontend -Now that the API is running, let's create a basic frontend that we'll improve step by step. In a *frontend* folder, create the following: +Now that the API is up and running, let's create a frontend for it. We'll start with a basic frontend and improve it step by step. In a *frontend* folder, create the following: ```text backend/ @@ -235,7 +229,7 @@ app.js styles.css ``` -Start with **index.html**: +Let's begin with **index.html**: ```html @@ -253,7 +247,7 @@ Start with **index.html**: ``` -This is the bare minimum needed for a chat window. It includes a textarea for displaying messages, an input field for typing messages, and a button for sending messages to the backend. Next, let's look at the JavaScript in *app.js*. +The above code is the bare minimum needed to support a chat window. It includes a textarea for displaying messages, an input field for typing messages, and a button to send messages to the backend. Next, let's look at the JavaScript in *app.js*. **app.js** @@ -313,11 +307,11 @@ This is the bare minimum needed for a chat window. It includes a textarea for di Here's a breakdown of the code: 1. We get references to all the elements we'll use later in the code. -2. This section defines a function that uses the built-in `fetch` method to call the backend. -3. The `appendMessage` function adds both user messages and assistant responses to the textarea. +2. This section defines a function that uses the built-in `fetch` method to call our backend. +3. The `appendMessage` function adds both the user's messages and the assistant's responses to the textarea. 4. We listen for the submit event, read the input field, display the user's message in the textarea, call the API, and render the response in the textarea. -Now, let's move on to styling. You can customize the design as much as you like, but here are some suggestions: +Next, let's look at styling. You can get creative here, but here are some suggestions: **styles.css** @@ -340,16 +334,16 @@ Now, let's move on to styling. You can customize the design as much as you like, These three classes style messages differently depending on whether they come from the assistant or the user. For inspiration, check out the `solution/frontend/styles.css` folder. -### Change Base URL +### Changing the Base URL One thing we haven't set yet is the `BASE_URL`. This depends on where your backend is running. To set it: -- If you're running the API locally, use something like `http://localhost:5000`. -- If you're using Codespaces, it will look like "[name]app.github.dev". +- If you're running the API locally, it should be something like `http://localhost:5000`. +- If you're using Codespaces, it will look something like "[name]app.github.dev". ## Assignment -Create your own folder *project* with the following structure: +Create your own folder named *project* with the following structure: ```text project/ @@ -373,7 +367,7 @@ Try changing the personality of the AI assistant. ### For Python -In *api.py*, when calling `call_llm`, you can modify the second argument to define the assistant's personality. For example: +When calling `call_llm` in *api.py*, you can modify the second argument to customize the assistant's behavior. For example: ```python call_llm(message, "You are Captain Picard") @@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard") ### Frontend -Customize the CSS and text to your liking by editing *index.html* and *styles.css*. +You can also customize the CSS and text to your liking by editing *index.html* and *styles.css*. ## Summary -Congratulations! You've learned how to create a personal assistant using AI from scratch. We used GitHub Models for the backend, Python for the API, and HTML, CSS, and JavaScript for the frontend. +Congratulations! You've learned how to create a personal assistant using AI from scratch. We accomplished this using GitHub Models, a Python backend, and a frontend built with HTML, CSS, and JavaScript. -## Set up with Codespaces +## Setting Up with Codespaces - Navigate to: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners). -- Create a repository from the template (make sure you're logged into GitHub) using the button in the top-right corner: +- Create a new repository from the template (make sure you're logged into GitHub) by clicking the button in the top-right corner: ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png) -- Once your repository is ready, create a Codespace: +- Once you're in your repository, create a Codespace: ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png) diff --git a/translations/es/9-chat-project/README.md b/translations/es/9-chat-project/README.md index 6c051b58..7229633b 100644 --- a/translations/es/9-chat-project/README.md +++ b/translations/es/9-chat-project/README.md @@ -1,8 +1,8 @@ # Chat-projekti -Tämä chat-projekti näyttää, kuinka rakentaa Chat-avustaja käyttämällä GitHub-malleja. +Tämä chat-projekti näyttää, kuinka rakentaa Chat Assistant GitHub Models -mallien avulla. Tältä valmis projekti näyttää: -
- Chat-sovellus -
+![Chat-sovellus](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fi.png) -Hieman taustaa: Chat-avustajien rakentaminen generatiivisen tekoälyn avulla on erinomainen tapa aloittaa tekoälyn opiskelu. Tässä oppitunnissa opit integroimaan generatiivisen tekoälyn verkkosovellukseen. Aloitetaan! +Hieman taustaa: Chat-assistenttien rakentaminen generatiivisen tekoälyn avulla on loistava tapa aloittaa tekoälyyn tutustuminen. Tässä oppitunnissa opit integroimaan generatiivisen tekoälyn verkkosovellukseen. Aloitetaan. ## Yhteys generatiiviseen tekoälyyn -Taustajärjestelmässä käytämme GitHub-malleja. Se on loistava palvelu, joka mahdollistaa tekoälyn käytön ilmaiseksi. Mene sen kokeiluympäristöön ja kopioi koodi, joka vastaa valitsemaasi taustajärjestelmän kieltä. Tältä se näyttää [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)-sivustolla. +Taustajärjestelmässä käytämme GitHub Models -malleja. Tämä on loistava palvelu, joka mahdollistaa tekoälyn käytön ilmaiseksi. Mene sen kokeiluympäristöön ja kopioi koodi, joka vastaa valitsemaasi taustakielen ympäristöä. Näin se näyttää [GitHub Models Playgroundissa](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fi.png) -Kuten mainittiin, valitse "Code"-välilehti ja haluamasi ajonaikainen ympäristö. +Kuten mainitsimme, valitse "Code"-välilehti ja haluamasi ajonaikainen ympäristö. -
- playground choice -
+![Playground-valinta](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fi.png) ### Pythonin käyttö @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Siistitään koodi hieman, jotta se on uudelleenkäytettävä: +Siistitään koodia hieman, jotta se on uudelleenkäytettävä: ```python def call_llm(prompt: str, system_message: str): @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -Tällä `call_llm`-funktiolla voimme nyt ottaa kehotteen ja järjestelmäkehotteen, ja funktio palauttaa tuloksen. +Tällä `call_llm`-funktiolla voimme nyt antaa kehotteen ja järjestelmäkehotteen, ja funktio palauttaa tuloksen. -### AI-avustajan muokkaaminen +### Mukauta AI-assistenttia -Jos haluat muokata AI-avustajaa, voit määrittää sen käyttäytymisen täyttämällä järjestelmäkehotteen seuraavasti: +Jos haluat mukauttaa AI-assistenttia, voit määrittää sen käyttäytymisen täyttämällä järjestelmäkehotteen seuraavasti: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Julkaisu Web API:n kautta +## Julkaise se Web API:n kautta -Hienoa, tekoälyosa on valmis. Katsotaan, kuinka voimme integroida sen Web API:iin. Web API:lle valitsemme Flaskin, mutta mikä tahansa verkkokehys käy. Katsotaan koodi: +Hienoa, AI-osuus on valmis. Katsotaanpa, kuinka voimme integroida sen Web API:in. Web API:ksi valitsemme Flaskin, mutta mikä tahansa verkkokehys käy. Tässä on koodi: ### Pythonin käyttö @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Tässä luomme Flask-API:n ja määrittelemme oletusreitin "/" ja "/chat". Jälkimmäistä käytetään frontendissä kysymysten välittämiseen. +Tässä luomme Flask-API:n ja määrittelemme oletusreitin "/" ja "/chat". Jälkimmäistä käytetään frontendin kautta kysymysten välittämiseen. -Integroitaaksesi *llm.py*:n, tee seuraavat: +Integroitaessa *llm.py*-tiedostoa meidän täytyy tehdä seuraavat asiat: - Tuo `call_llm`-funktio: @@ -167,7 +161,7 @@ Integroitaaksesi *llm.py*:n, tee seuraavat: }) ``` - Tässä jäsennämme saapuvan pyynnön saadaksemme `message`-ominaisuuden JSON-runko-osasta. Sen jälkeen kutsumme LLM:ää tällä tavalla: + Tässä jäsennämme saapuvan pyynnön saadaksemme `message`-ominaisuuden JSON-rungosta. Sen jälkeen kutsumme LLM:ää seuraavasti: ```python response = call_llm(message, "You are a helpful assistant") @@ -180,13 +174,13 @@ Integroitaaksesi *llm.py*:n, tee seuraavat: Hienoa, nyt olemme tehneet tarvittavat toimenpiteet. -## Corsin konfigurointi +## Määritä Cors -On syytä mainita, että asetamme jotain kuten CORS (Cross-Origin Resource Sharing). Tämä tarkoittaa, että koska taustajärjestelmä ja käyttöliittymä toimivat eri porteissa, meidän täytyy sallia käyttöliittymän kutsut taustajärjestelmään. +On tärkeää huomioida, että meidän täytyy määrittää CORS (Cross-Origin Resource Sharing). Tämä johtuu siitä, että taustajärjestelmä ja käyttöliittymä toimivat eri porteissa, joten meidän täytyy sallia käyttöliittymän kutsut taustajärjestelmään. ### Pythonin käyttö -*api.py*-tiedostossa on koodinpätkä, joka asettaa tämän: +*api.py*-tiedostossa on koodinpätkä, joka hoitaa tämän: ```python from flask_cors import CORS @@ -195,15 +189,15 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Tällä hetkellä se on asetettu sallimaan "*", eli kaikki alkuperät, mikä on hieman turvatonta. Tämä tulisi rajoittaa, kun siirrytään tuotantoon. +Tällä hetkellä se on asetettu sallimaan kaikki alkuperät ("*"), mikä on hieman turvatonta. Tämä tulisi rajoittaa tuotantoympäristössä. -## Projektin käynnistäminen +## Aja projektisi -Projektin käynnistämiseksi sinun täytyy ensin käynnistää taustajärjestelmä ja sitten käyttöliittymä. +Projektin ajamiseksi sinun täytyy ensin käynnistää taustajärjestelmä ja sen jälkeen käyttöliittymä. ### Pythonin käyttö -Ok, meillä on *llm.py* ja *api.py*. Kuinka saamme tämän toimimaan taustajärjestelmän kanssa? Tarvitsemme kaksi asiaa: +Meillä on nyt *llm.py* ja *api.py*. Kuinka saamme nämä toimimaan taustajärjestelmän kanssa? Meidän täytyy tehdä kaksi asiaa: - Asenna riippuvuudet: @@ -215,17 +209,17 @@ Ok, meillä on *llm.py* ja *api.py*. Kuinka saamme tämän toimimaan taustajärj pip install openai flask flask-cors openai ``` -- Käynnistä API +- Käynnistä API: ```sh python api.py ``` - Jos käytät Codespacesia, sinun täytyy mennä editorin alaosassa Ports-osioon, napsauttaa sitä oikealla ja valita "Port Visibility" ja valita "Public". + Jos käytät Codespacesia, mene editorin alaosassa Ports-osioon, napsauta sitä hiiren oikealla painikkeella ja valitse "Port Visibility" ja valitse "Public". -### Työskentely käyttöliittymän parissa +### Työskentele käyttöliittymän parissa -Nyt kun meillä on API käynnissä, luodaan käyttöliittymä. Aloitetaan yksinkertaisimmalla käyttöliittymällä, jota parannamme vaiheittain. Luo *frontend*-kansioon seuraavat: +Nyt kun meillä on API käynnissä, luodaan käyttöliittymä. Aloitetaan yksinkertaisimmasta mahdollisesta käyttöliittymästä, jota parannamme vaiheittain. Luo *frontend*-kansioon seuraavat tiedostot: ```text backend/ @@ -253,7 +247,7 @@ Aloitetaan **index.html**-tiedostosta: ``` -Tämä on ehdoton minimi, joka tarvitaan chat-ikkunan tukemiseen. Se sisältää tekstialueen, jossa viestit näytetään, syöttökentän viestin kirjoittamista varten ja painikkeen viestin lähettämiseen taustajärjestelmään. Katsotaan seuraavaksi JavaScriptiä tiedostossa *app.js*. +Yllä oleva on minimivaatimus chat-ikkunan tukemiseksi. Se sisältää tekstialueen viestien näyttämiseen, syötekentän viestin kirjoittamista varten ja painikkeen viestin lähettämiseen taustajärjestelmään. Katsotaan seuraavaksi JavaScriptiä tiedostossa *app.js*. **app.js** @@ -310,14 +304,14 @@ Tämä on ehdoton minimi, joka tarvitaan chat-ikkunan tukemiseen. Se sisältää })(); ``` -Käydään koodi läpi osittain: +Käydään koodi läpi osioittain: - 1) Tässä haemme viittaukset kaikkiin elementteihin, joita käytämme myöhemmin koodissa. - 2) Tässä osiossa luomme funktion, joka käyttää sisäänrakennettua `fetch`-metodia taustajärjestelmän kutsumiseen. - 3) `appendMessage` auttaa lisäämään vastaukset sekä käyttäjän kirjoittamat viestit. -- 4) Tässä kuuntelemme submit-tapahtumaa, luemme syöttökentän, lisäämme käyttäjän viestin tekstialueelle, kutsumme API:a ja näytämme vastauksen tekstialueella. +- 4) Tässä kuuntelemme submit-tapahtumaa, luemme syötekentän, lisäämme käyttäjän viestin tekstialueelle, kutsumme API:a ja näytämme vastauksen tekstialueella. -Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta haluamasi, mutta tässä muutama ehdotus: +Katsotaan seuraavaksi tyylitiedostoa. Tässä voit käyttää luovuuttasi ja tehdä siitä haluamasi näköisen, mutta tässä on joitakin ehdotuksia: **styles.css** @@ -338,14 +332,14 @@ Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta halua } ``` -Näillä kolmella luokalla voit muotoilla viestit eri tavalla riippuen siitä, tulevatko ne avustajalta vai käyttäjältä. Jos haluat inspiraatiota, katso `solution/frontend/styles.css`-kansio. +Näillä kolmella luokalla voit tyylitellä viestit eri tavalla riippuen siitä, tulevatko ne assistentilta vai käyttäjältä. Jos kaipaat inspiraatiota, katso `solution/frontend/styles.css`-kansiota. -### Perus-URL:n muuttaminen +### Muuta Base URL -Yksi asia, jota emme vielä asettaneet, on `BASE_URL`. Tämä ei ole tiedossa ennen kuin taustajärjestelmä käynnistetään. Aseta se seuraavasti: +Yksi asia, jota emme vielä asettaneet, on `BASE_URL`. Tätä ei tiedetä ennen kuin taustajärjestelmä on käynnistetty. Aseta se seuraavasti: -- Jos API toimii paikallisesti, sen pitäisi olla jotain kuten `http://localhost:5000`. -- Jos käytät Codespacesia, sen pitäisi näyttää jotain kuten "[name]app.github.dev". +- Jos ajat API:a paikallisesti, sen pitäisi olla jotain kuten `http://localhost:5000`. +- Jos käytät Codespacesia, se näyttää jotain tällaista: "[name]app.github.dev". ## Tehtävä @@ -361,7 +355,7 @@ project/ ... ``` -Kopioi sisältö yllä olevista ohjeista, mutta muokkaa sitä haluamallasi tavalla. +Kopioi sisältö yllä olevista ohjeista, mutta voit mukauttaa sitä haluamallasi tavalla. ## Ratkaisu @@ -369,7 +363,7 @@ Kopioi sisältö yllä olevista ohjeista, mutta muokkaa sitä haluamallasi taval ## Bonus -Kokeile muuttaa AI-avustajan persoonallisuutta. +Kokeile muuttaa AI-assistentin persoonallisuutta. ### Pythonille @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### Käyttöliittymä -Muuta myös CSS:ää ja tekstiä haluamallasi tavalla, eli tee muutoksia *index.html*- ja *styles.css*-tiedostoihin. +Muuta myös CSS-tyylejä ja tekstejä haluamallasi tavalla, eli tee muutoksia *index.html*- ja *styles.css*-tiedostoihin. ## Yhteenveto -Hienoa, olet oppinut alusta alkaen, kuinka luoda henkilökohtainen avustaja tekoälyn avulla. Teimme sen käyttämällä GitHub-malleja, taustajärjestelmää Pythonilla ja käyttöliittymää HTML:llä, CSS:llä ja JavaScriptillä. +Hienoa, olet oppinut alusta alkaen, kuinka luoda henkilökohtainen assistentti tekoälyn avulla. Teimme sen GitHub Models -mallien, Python-taustajärjestelmän sekä HTML-, CSS- ja JavaScript-käyttöliittymän avulla. -## Codespacesin käyttö +## Käyttöönotto Codespacesilla -- Siirry: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Luo mallista (varmista, että olet kirjautunut GitHubiin) oikeassa yläkulmassa: +- Siirry: [Web Dev For Beginners -repo](https://github.com/microsoft/Web-Dev-For-Beginners) +- Luo uusi repositorio mallista (varmista, että olet kirjautunut GitHubiin) oikeasta yläkulmasta: ![Luo mallista](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fi.png) -- Kun olet omassa repossasi, luo Codespace: +- Kun olet omassa repositoriossasi, luo Codespace: - ![Luo codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png) + ![Luo Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fi.png) Tämä käynnistää ympäristön, jossa voit nyt työskennellä. --- **Vastuuvapauslauseke**: -Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä. \ No newline at end of file +Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä. \ No newline at end of file diff --git a/translations/fr/9-chat-project/README.md b/translations/fr/9-chat-project/README.md index 5874fb0b..e585a662 100644 --- a/translations/fr/9-chat-project/README.md +++ b/translations/fr/9-chat-project/README.md @@ -1,37 +1,31 @@ # Projet de Chat -Ce projet de chat montre comment créer un assistant conversationnel en utilisant les modèles GitHub. +Ce projet de chat montre comment créer un assistant de chat en utilisant les modèles GitHub. -Voici à quoi ressemble le projet finalisé : +Voici à quoi ressemble le projet final : -
- Application de chat -
+![Application de chat](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fr.png) -Un peu de contexte : construire des assistants conversationnels avec l'IA générative est une excellente manière de commencer à apprendre sur l'IA. Ce que vous apprendrez ici, c'est à intégrer l'IA générative dans une application web tout au long de cette leçon. Commençons. +Pour donner un peu de contexte, créer des assistants de chat en utilisant l'IA générative est une excellente manière de commencer à apprendre sur l'IA. Ce que vous allez apprendre ici, c'est comment intégrer l'IA générative dans une application web tout au long de cette leçon. Commençons. ## Connexion à l'IA générative -Pour le backend, nous utilisons les modèles GitHub. C'est un excellent service qui vous permet d'utiliser l'IA gratuitement. Rendez-vous sur son playground et récupérez le code correspondant au langage backend de votre choix. Voici à quoi cela ressemble sur [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Pour le backend, nous utilisons les modèles GitHub. C'est un excellent service qui vous permet d'utiliser l'IA gratuitement. Rendez-vous sur son espace de test et récupérez le code correspondant au langage backend de votre choix. Voici à quoi cela ressemble sur [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![Espace de test GitHub Models AI](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fr.png) -Comme mentionné, sélectionnez l'onglet "Code" et votre runtime préféré. +Comme mentionné, sélectionnez l'onglet "Code" et votre environnement d'exécution préféré. -
- choix du playground -
+![Choix dans l'espace de test](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fr.png) ### Utilisation de Python @@ -100,15 +94,15 @@ Avec cette fonction `call_llm`, nous pouvons maintenant prendre un prompt et un ### Personnaliser l'assistant IA -Si vous souhaitez personnaliser l'assistant IA, vous pouvez spécifier son comportement en remplissant le prompt système comme suit : +Si vous souhaitez personnaliser l'assistant IA, vous pouvez spécifier son comportement en remplissant le prompt système comme ceci : ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## L'exposer via une API Web +## Exposer via une API Web -Super, nous avons terminé la partie IA. Voyons maintenant comment l'intégrer dans une API Web. Pour l'API Web, nous choisissons Flask, mais tout autre framework web devrait convenir. Voici le code correspondant : +Super, nous avons terminé la partie IA. Voyons maintenant comment l'intégrer dans une API Web. Pour l'API Web, nous avons choisi Flask, mais tout framework web devrait convenir. Voici le code : ### Utilisation de Python @@ -182,7 +176,7 @@ Super, nous avons fait ce qu'il fallait. ## Configurer Cors -Nous devons mentionner que nous configurons quelque chose comme CORS (partage des ressources entre origines multiples). Cela signifie que, comme notre backend et notre frontend fonctionneront sur des ports différents, nous devons autoriser le frontend à appeler le backend. +Nous devons mentionner que nous avons configuré quelque chose comme CORS, le partage de ressources entre origines. Cela signifie que, puisque notre backend et notre frontend fonctionneront sur des ports différents, nous devons permettre au frontend d'appeler le backend. ### Utilisation de Python @@ -203,7 +197,7 @@ Pour exécuter votre projet, vous devez d'abord démarrer votre backend, puis vo ### Utilisation de Python -D'accord, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec un backend ? Eh bien, il y a deux choses à faire : +Ok, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec un backend ? Eh bien, il y a deux choses à faire : - Installer les dépendances : @@ -225,7 +219,7 @@ D'accord, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec u ### Travailler sur un frontend -Maintenant que nous avons une API opérationnelle, créons un frontend pour cela. Un frontend minimaliste que nous améliorerons progressivement. Dans un dossier *frontend*, créez ce qui suit : +Maintenant que nous avons une API opérationnelle, créons un frontend pour cela. Un frontend minimal que nous améliorerons progressivement. Dans un dossier *frontend*, créez ce qui suit : ```text backend/ @@ -310,7 +304,7 @@ Ce qui précède est le strict minimum nécessaire pour prendre en charge une fe })(); ``` -Analysons le code par section : +Analysons le code section par section : - 1) Ici, nous obtenons une référence à tous nos éléments que nous utiliserons plus tard dans le code. - 2) Dans cette section, nous créons une fonction qui utilise la méthode intégrée `fetch` pour appeler notre backend. @@ -338,18 +332,18 @@ Passons au style maintenant. Voici où vous pouvez vraiment vous amuser et perso } ``` -Avec ces trois classes, vous stylerez les messages différemment selon qu'ils proviennent de l'assistant ou de vous en tant qu'utilisateur. Si vous cherchez de l'inspiration, consultez le dossier `solution/frontend/styles.css`. +Avec ces trois classes, vous styliserez les messages différemment selon qu'ils proviennent de l'assistant ou de vous en tant qu'utilisateur. Si vous voulez vous inspirer, consultez le dossier `solution/frontend/styles.css`. ### Modifier l'URL de base -Il y a une chose que nous n'avons pas encore définie : `BASE_URL`. Celle-ci n'est pas connue tant que votre backend n'est pas démarré. Pour la définir : +Il y a une chose que nous n'avons pas configurée ici, c'est `BASE_URL`. Elle n'est pas connue tant que votre backend n'est pas démarré. Pour la configurer : -- Si vous exécutez l'API localement, elle devrait ressembler à quelque chose comme `http://localhost:5000`. -- Si vous l'exécutez dans Codespaces, elle devrait ressembler à quelque chose comme "[name]app.github.dev". +- Si vous exécutez l'API localement, elle devrait être configurée comme `http://localhost:5000`. +- Si vous l'exécutez dans Codespaces, elle devrait ressembler à "[nom]app.github.dev". -## Devoir +## Exercice -Créez votre propre dossier *project* avec un contenu comme suit : +Créez votre propre dossier *project* avec le contenu suivant : ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à personnaliser selon vos préférences. +Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à le personnaliser selon vos préférences. ## Solution @@ -369,11 +363,11 @@ Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à personnalis ## Bonus -Essayez de changer la personnalité de l'assistant IA. +Essayez de modifier la personnalité de l'assistant IA. ### Pour Python -Lorsque vous appelez `call_llm` dans *api.py*, vous pouvez modifier le deuxième argument selon vos envies, par exemple : +Lorsque vous appelez `call_llm` dans *api.py*, vous pouvez modifier le deuxième argument selon vos préférences, par exemple : ```python call_llm(message, "You are Captain Picard") @@ -381,22 +375,22 @@ call_llm(message, "You are Captain Picard") ### Frontend -Changez également le CSS et le texte selon vos préférences, en modifiant *index.html* et *styles.css*. +Modifiez également le CSS et le texte selon vos goûts, donc apportez des changements dans *index.html* et *styles.css*. ## Résumé -Félicitations, vous avez appris à créer un assistant personnel à partir de zéro en utilisant l'IA. Nous avons utilisé les modèles GitHub, un backend en Python et un frontend en HTML, CSS et JavaScript. +Super, vous avez appris à créer un assistant personnel en utilisant l'IA, depuis zéro. Nous l'avons fait en utilisant les modèles GitHub, un backend en Python et un frontend en HTML, CSS et JavaScript. ## Configuration avec Codespaces -- Rendez-vous sur : [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) +- Accédez à : [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) - Créez à partir d'un modèle (assurez-vous d'être connecté à GitHub) dans le coin supérieur droit : ![Créer à partir d'un modèle](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fr.png) - Une fois dans votre dépôt, créez un Codespace : - ![Créer un codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fr.png) + ![Créer un Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fr.png) Cela devrait démarrer un environnement avec lequel vous pouvez maintenant travailler. diff --git a/translations/he/9-chat-project/README.md b/translations/he/9-chat-project/README.md index 7d1eeaa3..0ae1392c 100644 --- a/translations/he/9-chat-project/README.md +++ b/translations/he/9-chat-project/README.md @@ -1,8 +1,8 @@ # चैट प्रोजेक्ट -यह चैट प्रोजेक्ट दिखाता है कि GitHub Models का उपयोग करके एक चैट असिस्टेंट कैसे बनाया जा सकता है। +यह चैट प्रोजेक्ट दिखाता है कि GitHub Models का उपयोग करके एक चैट असिस्टेंट कैसे बनाया जाए। यहाँ पर तैयार प्रोजेक्ट ऐसा दिखता है: -
- चैट ऐप -
+![चैट ऐप](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hi.png) -कुछ संदर्भ: जनरेटिव AI का उपयोग करके चैट असिस्टेंट बनाना AI के बारे में सीखने की शुरुआत करने का एक शानदार तरीका है। इस पाठ में आप सीखेंगे कि जनरेटिव AI को एक वेब ऐप में कैसे इंटीग्रेट किया जाए। चलिए शुरू करते हैं। +कुछ संदर्भ, जनरेटिव AI का उपयोग करके चैट असिस्टेंट बनाना AI के बारे में सीखने का एक शानदार तरीका है। इस पाठ में आप सीखेंगे कि जनरेटिव AI को एक वेब ऐप में कैसे इंटीग्रेट किया जाए। चलिए शुरू करते हैं। ## जनरेटिव AI से कनेक्ट करना -बैकएंड के लिए, हम GitHub Models का उपयोग कर रहे हैं। यह एक शानदार सेवा है जो आपको मुफ्त में AI का उपयोग करने की सुविधा देती है। इसके प्लेग्राउंड पर जाएं और उस कोड को प्राप्त करें जो आपके चुने हुए बैकएंड भाषा के अनुरूप हो। यह [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) पर ऐसा दिखता है: +बैकएंड के लिए, हम GitHub Models का उपयोग कर रहे हैं। यह एक शानदार सेवा है जो आपको मुफ्त में AI का उपयोग करने की अनुमति देती है। इसके प्लेग्राउंड पर जाएं और उस कोड को प्राप्त करें जो आपके चुने हुए बैकएंड भाषा के अनुरूप हो। यह [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) पर ऐसा दिखता है: -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hi.png) -जैसा कि हमने कहा, "Code" टैब और अपने चुने हुए रनटाइम को चुनें। +जैसा कि हमने कहा, "Code" टैब और अपनी चुनी हुई रनटाइम का चयन करें। -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hi.png) ### Python का उपयोग करना -इस मामले में, हम Python चुनते हैं, जिसका मतलब है कि हम इस कोड को चुनेंगे: +इस मामले में हम Python का चयन करते हैं, जिसका मतलब है कि हम इस कोड को चुनेंगे: ```python """Run this model in Python @@ -96,7 +90,7 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -इस `call_llm` फंक्शन के साथ, अब हम एक प्रॉम्प्ट और एक सिस्टम प्रॉम्प्ट ले सकते हैं, और फंक्शन परिणाम लौटाता है। +इस `call_llm` फंक्शन के साथ, अब हम एक प्रॉम्प्ट और एक सिस्टम प्रॉम्प्ट ले सकते हैं और फंक्शन अंततः परिणाम लौटाता है। ### AI असिस्टेंट को कस्टमाइज़ करें @@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## इसे वेब API के माध्यम से एक्सपोज़ करें -बहुत अच्छा, हमने AI भाग पूरा कर लिया है। अब देखते हैं कि इसे वेब API में कैसे इंटीग्रेट किया जा सकता है। वेब API के लिए, हम Flask का उपयोग कर रहे हैं, लेकिन कोई भी वेब फ्रेमवर्क अच्छा होगा। इसका कोड देखें: +बहुत बढ़िया, हमने AI भाग पूरा कर लिया है, अब देखते हैं कि इसे वेब API में कैसे इंटीग्रेट किया जा सकता है। वेब API के लिए, हम Flask का उपयोग कर रहे हैं, लेकिन कोई भी वेब फ्रेमवर्क अच्छा होगा। इसका कोड देखें: ### Python का उपयोग करना @@ -143,7 +137,7 @@ if __name__ == "__main__": यहाँ, हम एक Flask API बनाते हैं और "/" और "/chat" नामक डिफ़ॉल्ट रूट को परिभाषित करते हैं। दूसरा रूट हमारे फ्रंटएंड द्वारा प्रश्नों को पास करने के लिए उपयोग किया जाता है। -*llm.py* को इंटीग्रेट करने के लिए हमें निम्नलिखित करना होगा: +*llm.py* को इंटीग्रेट करने के लिए हमें यह करना होगा: - `call_llm` फंक्शन को इंपोर्ट करें: @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - यहाँ हम आने वाले रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद हम LLM को इस कॉल के साथ कॉल करते हैं: + यहाँ हम इनकमिंग रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद हम LLM को इस कॉल के साथ कॉल करते हैं: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,11 +172,11 @@ if __name__ == "__main__": }) ``` -बहुत अच्छा, अब हमने वह कर लिया जो हमें चाहिए था। +बहुत बढ़िया, अब हमने जो चाहिए था वह पूरा कर लिया। ## Cors को कॉन्फ़िगर करें -हमें यह बताना चाहिए कि हमने कुछ ऐसा सेटअप किया है जिसे CORS कहते हैं, यानी क्रॉस-ओरिजिन रिसोर्स शेयरिंग। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट्स पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी। +हमें यह बताना चाहिए कि हमने कुछ ऐसा सेटअप किया है जिसे CORS, क्रॉस-ओरिजिन रिसोर्स शेयरिंग कहते हैं। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी। ### Python का उपयोग करना @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -अभी इसे "*" यानी सभी ओरिजिन्स की अनुमति देने के लिए सेट किया गया है, जो थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने पर प्रतिबंधित करना चाहिए। +अभी यह "*" पर सेट किया गया है, जो सभी ओरिजिन को अनुमति देता है और यह थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने पर प्रतिबंधित करना चाहिए। ## अपना प्रोजेक्ट चलाएं @@ -203,7 +197,7 @@ CORS(app) # * example.com ### Python का उपयोग करना -ठीक है, हमारे पास *llm.py* और *api.py* है। इसे बैकएंड के साथ कैसे काम में लाया जाए? इसके लिए हमें दो चीजें करनी होंगी: +ठीक है, हमारे पास *llm.py* और *api.py* है, इसे बैकएंड के साथ कैसे काम में लाया जाए? खैर, हमें दो चीजें करनी होंगी: - डिपेंडेंसीज़ इंस्टॉल करें: @@ -221,11 +215,11 @@ CORS(app) # * example.com python api.py ``` - यदि आप Codespaces में हैं, तो आपको एडिटर के निचले हिस्से में Ports पर जाना होगा, उस पर राइट-क्लिक करना होगा और "Port Visibility" पर क्लिक करके "Public" चुनना होगा। + यदि आप Codespaces में हैं, तो आपको एडिटर के निचले हिस्से में Ports पर जाना होगा, उस पर राइट-क्लिक करें और "Port Visibility" पर क्लिक करें और "Public" चुनें। ### फ्रंटएंड पर काम करें -अब जब हमारा API चल रहा है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं: +अब जब हमारे पास API चल रहा है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं: ```text backend/ @@ -235,7 +229,7 @@ app.js styles.css ``` -चलिए **index.html** से शुरू करते हैं: +चलो **index.html** से शुरू करते हैं: ```html @@ -253,7 +247,7 @@ styles.css ``` -ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है। इसमें एक टेक्स्ट एरिया है जहाँ संदेश रेंडर किए जाएंगे, एक इनपुट है जहाँ संदेश टाइप किया जाएगा, और एक बटन है जो आपके संदेश को बैकएंड पर भेजता है। अब *app.js* में JavaScript को देखें: +ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है, क्योंकि इसमें एक टेक्स्टएरिया है जहां संदेश रेंडर किए जाएंगे, एक इनपुट जहां संदेश टाइप किया जाएगा और एक बटन जो आपके संदेश को बैकएंड में भेजेगा। चलिए *app.js* में JavaScript को देखते हैं। **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -आइए कोड को सेक्शन के अनुसार समझें: +आइए कोड को सेक्शन के अनुसार समझते हैं: - 1) यहाँ हम उन सभी एलिमेंट्स का रेफरेंस प्राप्त करते हैं जिन्हें हम बाद में कोड में उपयोग करेंगे। -- 2) इस सेक्शन में, हम एक फंक्शन बनाते हैं जो बिल्ट-इन `fetch` मेथड का उपयोग करता है और हमारे बैकएंड को कॉल करता है। +- 2) इस सेक्शन में, हम एक फंक्शन बनाते हैं जो बिल्ट-इन `fetch` मेथड का उपयोग करता है जो हमारे बैकएंड को कॉल करता है। - 3) `appendMessage` उपयोगकर्ता द्वारा टाइप किए गए संदेशों और असिस्टेंट के उत्तरों को जोड़ने में मदद करता है। -- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्ट एरिया में रखते हैं, API को कॉल करते हैं, और टेक्स्ट एरिया में उत्तर रेंडर करते हैं। +- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्टएरिया में रखते हैं, API को कॉल करते हैं और टेक्स्टएरिया में उत्तर रेंडर करते हैं। -अब स्टाइलिंग को देखें। यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव दिए गए हैं: +अब स्टाइलिंग को देखते हैं, यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव हैं: **styles.css** @@ -338,18 +332,18 @@ styles.css } ``` -इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर को देखें। +इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह इस पर निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर देखें। ### बेस URL बदलें -यहाँ एक चीज़ है जिसे हमने सेट नहीं किया और वह है `BASE_URL`, यह तब तक ज्ञात नहीं होता जब तक आपका बैकएंड शुरू नहीं होता। इसे सेट करने के लिए: +यहाँ एक चीज़ थी जिसे हमने सेट नहीं किया और वह थी `BASE_URL`, यह तब तक ज्ञात नहीं होता जब तक आपका बैकएंड शुरू नहीं होता। इसे सेट करने के लिए: -- यदि आप API को लोकली चलाते हैं, तो इसे `http://localhost:5000` जैसा कुछ सेट करना चाहिए। -- यदि Codespaces में चलाते हैं, तो यह कुछ ऐसा दिखना चाहिए: "[name]app.github.dev"। +- यदि आप API को लोकली चलाते हैं, तो इसे कुछ इस तरह सेट किया जाना चाहिए: `http://localhost:5000`। +- यदि Codespaces में चलाते हैं, तो यह कुछ इस तरह दिखेगा: "[name]app.github.dev"। ## असाइनमेंट -अपना खुद का *project* फोल्डर बनाएं जिसमें निम्नलिखित सामग्री हो: +अपना खुद का *project* फोल्डर बनाएं जिसमें इस तरह की सामग्री हो: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -ऊपर दिए गए निर्देशों से सामग्री कॉपी करें, लेकिन इसे अपनी पसंद के अनुसार कस्टमाइज़ करें। +ऊपर दिए गए निर्देशों से सामग्री कॉपी करें लेकिन इसे अपनी पसंद के अनुसार कस्टमाइज़ करें। ## समाधान @@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard") ### फ्रंटएंड -CSS और टेक्स्ट को भी अपनी पसंद के अनुसार बदलें, इसलिए *index.html* और *styles.css* में बदलाव करें। +CSS और टेक्स्ट को अपनी पसंद के अनुसार बदलें, इसलिए *index.html* और *styles.css* में बदलाव करें। ## सारांश -बहुत अच्छा, आपने शुरुआत से सीख लिया कि AI का उपयोग करके एक पर्सनल असिस्टेंट कैसे बनाया जाए। हमने इसे GitHub Models, Python में बैकएंड और HTML, CSS और JavaScript में फ्रंटएंड का उपयोग करके किया। +बहुत बढ़िया, आपने शुरुआत से सीख लिया कि AI का उपयोग करके एक पर्सनल असिस्टेंट कैसे बनाया जाए। हमने इसे GitHub Models, Python में बैकएंड और HTML, CSS और JavaScript में फ्रंटएंड का उपयोग करके किया। ## Codespaces के साथ सेटअप करें @@ -403,4 +397,4 @@ CSS और टेक्स्ट को भी अपनी पसंद के --- **अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। \ No newline at end of file diff --git a/translations/hk/9-chat-project/README.md b/translations/hk/9-chat-project/README.md index a17e557a..c546029f 100644 --- a/translations/hk/9-chat-project/README.md +++ b/translations/hk/9-chat-project/README.md @@ -1,41 +1,35 @@ # 聊天項目 -這個聊天項目展示了如何使用 GitHub Models 建立一個聊天助手。 +這個聊天項目展示了如何使用 GitHub Models 構建一個聊天助手。 以下是完成後的項目樣子： -
- 聊天應用程式 -
+![聊天應用](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hk.png) -一些背景資訊，使用生成式 AI 建立聊天助手是一個很好的方式來開始學習 AI。在這堂課中，你將學習如何將生成式 AI 整合到網頁應用程式中，讓我們開始吧。 +一些背景資訊，使用生成式 AI 構建聊天助手是一個學習 AI 的好方法。在這節課中，你將學會如何將生成式 AI 整合到網頁應用中，讓我們開始吧。 ## 連接生成式 AI -在後端部分，我們使用 GitHub Models。這是一個很棒的服務，讓你可以免費使用 AI。前往它的 playground，並獲取與你選擇的後端語言相對應的代碼。以下是 [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 的樣子： +在後端，我們使用 GitHub Models。這是一個很棒的服務，可以免費使用 AI。前往它的 Playground，獲取與你選擇的後端語言對應的代碼。以下是 [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 的樣子： -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hk.png) -如我們所說，選擇 "Code" 標籤和你選擇的運行環境。 +如我們所說，選擇 "Code" 標籤和你選擇的運行時環境。 -
- playground choice -
+![Playground 選擇](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hk.png) ### 使用 Python -在這個例子中，我們選擇 Python，這意味著我們選擇以下代碼： +在這個例子中，我們選擇 Python，這意味著我們會選擇以下代碼： ```python """Run this model in Python @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -有了這個函數 `call_llm`，我們現在可以接收一個提示和一個系統提示，並返回結果。 +通過這個函數 `call_llm`，我們現在可以傳入一個提示和一個系統提示，函數最終會返回結果。 ### 自定義 AI 助手 -如果你想自定義 AI 助手的行為，可以像下面這樣填充系統提示： +如果你想自定義 AI 助手的行為，可以像這樣填充系統提示： ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## 通過 Web API 暴露功能 +## 通過 Web API 暴露 -很好，我們已完成 AI 部分，現在看看如何將其整合到 Web API 中。對於 Web API，我們選擇使用 Flask，但任何網頁框架都可以。以下是代碼： +很好，我們已經完成了 AI 部分，現在來看看如何將其整合到 Web API 中。對於 Web API，我們選擇使用 Flask，但任何網絡框架都可以。以下是代碼： ### 使用 Python @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -在這裡，我們創建了一個 Flask API，並定義了默認路由 "/" 和 "/chat"。後者是供前端用來向後端傳遞問題的。 +在這裡，我們創建了一個 Flask API，並定義了默認路由 "/" 和 "/chat"。後者是為了讓前端傳遞問題給後端。 要整合 *llm.py*，我們需要做以下幾件事： @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - 在這裡，我們解析傳入的請求，從 JSON 主體中檢索 `message` 屬性。然後我們使用以下調用來調用 LLM： + 在這裡，我們解析傳入的請求，從 JSON 主體中檢索 `message` 屬性。然後，我們通過以下調用來調用 LLM： ```python response = call_llm(message, "You are a helpful assistant") @@ -178,11 +172,11 @@ if __name__ == "__main__": }) ``` -很好，現在我們已完成所需的部分。 +很好，現在我們已經完成了所需的部分。 ## 配置 Cors -我們需要設置像 CORS（跨來源資源共享）這樣的東西。這意味著，由於我們的後端和前端將運行在不同的端口，我們需要允許前端調用後端。 +我們需要提到的是，我們設置了類似 CORS（跨域資源共享）的東西。這意味著，由於我們的後端和前端將在不同的端口運行，我們需要允許前端調用後端。 ### 使用 Python @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -目前它被設置為允許 "*"，即所有來源，這有點不安全，應該在進入生產環境時進行限制。 +目前，它被設置為允許 "*"，即所有來源，這有點不安全，我們應該在進入生產環境時進行限制。 ## 運行你的項目 @@ -203,7 +197,7 @@ CORS(app) # * example.com ### 使用 Python -好的，我們有 *llm.py* 和 *api.py*，如何讓它們在後端運行？我們需要做以下兩件事： +好的，我們有 *llm.py* 和 *api.py*，如何讓它們與後端一起工作呢？我們需要做兩件事： - 安裝依賴項： @@ -215,17 +209,17 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- 啟動 API +- 啟動 API： ```sh python api.py ``` - 如果你在 Codespaces 中運行，需要在編輯器底部的 Ports 部分，右鍵點擊並選擇 "Port Visibility"，然後選擇 "Public"。 + 如果你在 Codespaces 中，請前往編輯器底部的 Ports，右鍵點擊它，選擇 "Port Visibility"，然後選擇 "Public"。 ### 開發前端 -現在我們的 API 已經運行起來了，讓我們為它創建一個前端。以下是一個最低限度的前端，我們將逐步改進它。在 *frontend* 文件夾中，創建以下內容： +現在我們的 API 已經運行起來了，讓我們為此創建一個前端。這是一個最低限度的前端，我們將逐步改進它。在 *frontend* 文件夾中，創建以下內容： ```text backend/ @@ -235,7 +229,7 @@ app.js styles.css ``` -首先是 **index.html**： +讓我們從 **index.html** 開始： ```html @@ -253,7 +247,7 @@ styles.css ``` -以上是支持聊天窗口所需的最低限度，它包括一個用於顯示消息的文本區域、一個輸入框用於輸入消息，以及一個按鈕用於將消息發送到後端。接下來看看 *app.js* 中的 JavaScript。 +以上是支持聊天窗口所需的最低限度，包含一個用於顯示消息的文本區域、一個輸入框用於輸入消息，以及一個按鈕用於將消息發送到後端。接下來讓我們看看 *app.js* 中的 JavaScript： **app.js** @@ -312,12 +306,12 @@ styles.css 讓我們逐段解析代碼： -- 1) 在這裡，我們獲取所有稍後會引用的元素的引用。 -- 2) 在這部分，我們創建了一個函數，使用內建的 `fetch` 方法調用後端。 -- 3) `appendMessage` 幫助添加助手的回應以及用戶輸入的消息。 -- 4) 在這裡，我們監聽提交事件，讀取輸入框的內容，將用戶的消息放入文本區域，調用 API，並將回應渲染到文本區域。 +- 1) 在這裡，我們獲取所有稍後會在代碼中引用的元素。 +- 2) 在這部分，我們創建了一個函數，使用內建的 `fetch` 方法來調用後端。 +- 3) `appendMessage` 幫助添加響應以及用戶輸入的消息。 +- 4) 在這裡，我們監聽提交事件，讀取輸入字段，將用戶的消息放入文本區域，調用 API，並將響應渲染到文本區域中。 -接下來看看樣式，這裡你可以自由發揮，讓它看起來像你想要的樣子，但以下是一些建議： +接下來讓我們看看樣式設置，這裡你可以自由發揮，讓它看起來像你想要的樣子，但以下是一些建議： **styles.css** @@ -338,7 +332,7 @@ styles.css } ``` -有了這三個類，你可以根據消息的來源（助手或用戶）來區分樣式。如果需要靈感，可以查看 `solution/frontend/styles.css` 文件夾。 +通過這三個類，你可以根據消息的來源（助手或用戶）來設置不同的樣式。如果你需要靈感，可以查看 `solution/frontend/styles.css` 文件夾。 ### 更改 Base Url @@ -349,7 +343,7 @@ styles.css ## 作業 -創建自己的文件夾 *project*，內容如下： +創建你自己的文件夾 *project*，內容如下： ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -複製上述指導中的內容，但可以根據自己的喜好進行自定義。 +複製上述指導中的內容，但可以根據你的喜好進行自定義。 ## 解決方案 @@ -373,7 +367,7 @@ project/ ### 對於 Python -在 *api.py* 中調用 `call_llm` 時，可以更改第二個參數為你想要的內容，例如： +當你在 *api.py* 中調用 `call_llm` 時，可以將第二個參數更改為你想要的內容，例如： ```python call_llm(message, "You are Captain Picard") @@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard") ### 前端 -同時更改 CSS 和文本，使其符合你的喜好，因此需要修改 *index.html* 和 *styles.css*。 +同時更改 CSS 和文本，對 *index.html* 和 *styles.css* 進行修改。 ## 總結 -很好，你已經從零開始學習如何使用 AI 創建個人助手。我們使用了 GitHub Models、Python 後端以及 HTML、CSS 和 JavaScript 前端完成了這項工作。 +太棒了，你已經從零開始學會了如何使用 AI 創建一個個人助手。我們使用了 GitHub Models，後端使用 Python，前端使用 HTML、CSS 和 JavaScript。 ## 使用 Codespaces 設置 - 前往：[Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- 從模板創建（確保你已登錄 GitHub）在右上角： +- 從模板創建（確保你已登錄 GitHub），在右上角： ![從模板創建](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hk.png) -- 一旦進入你的 repo，創建一個 Codespace： +- 進入你的倉庫後，創建一個 Codespace： ![創建 Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png) @@ -403,4 +397,4 @@ call_llm(message, "You are Captain Picard") --- **免責聲明**： -此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤詮釋概不負責。 \ No newline at end of file +本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。 \ No newline at end of file diff --git a/translations/hr/9-chat-project/README.md b/translations/hr/9-chat-project/README.md index 574ab3c4..3bb56b59 100644 --- a/translations/hr/9-chat-project/README.md +++ b/translations/hr/9-chat-project/README.md @@ -1,8 +1,8 @@ # Chat projekt -Ez a chat projekt bemutatja, hogyan lehet egy Chat Asszisztenst létrehozni GitHub Modellek segítségével. +Ez a chat projekt bemutatja, hogyan lehet Chat Asszisztenst építeni GitHub Modellek segítségével. Így néz ki a kész projekt: -
- Chat alkalmazás -
+![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hu.png) -Egy kis háttérinformáció: generatív MI használatával chat asszisztensek építése remek módja annak, hogy elkezdjünk ismerkedni a mesterséges intelligenciával. Ebben a leckében megtanulhatod, hogyan integrálj generatív MI-t egy webalkalmazásba. Kezdjük is! +Néhány háttérinformáció: generatív AI használatával chat asszisztensek építése remek módja annak, hogy elkezdjünk tanulni az AI-ról. Ebben a leckében megtanulhatod, hogyan integrálj generatív AI-t egy webalkalmazásba. Kezdjük! -## Kapcsolódás a generatív MI-hez +## Kapcsolódás a generatív AI-hoz -A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi, hogy ingyenesen használj mesterséges intelligenciát. Látogass el a playground oldalára, és szerezd meg a kódot, amely megfelel a választott backend nyelvednek. Így néz ki a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground): +A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi az AI ingyenes használatát. Látogass el a playgroundjára, és szerezd meg a kódot, amely megfelel a választott backend nyelvednek. Így néz ki a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). -
- GitHub Models MI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hu.png) -Ahogy említettük, válaszd ki a "Code" fület és a preferált futtatási környezetet. +Ahogy mondtuk, válaszd ki a "Code" fület és a kívánt futtatási környezetet. -
- playground választás -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hu.png) ### Python használata @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Tisztítsuk meg egy kicsit ezt a kódot, hogy újrahasznosítható legyen: +Tisztítsuk meg ezt a kódot, hogy újrahasználható legyen: ```python def call_llm(prompt: str, system_message: str): @@ -98,9 +92,9 @@ def call_llm(prompt: str, system_message: str): Ezzel a `call_llm` függvénnyel most már megadhatunk egy promptot és egy rendszerpromptot, és a függvény visszaadja az eredményt. -### MI Asszisztens testreszabása +### AI Asszisztens testreszabása -Ha testre szeretnéd szabni az MI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így: +Ha testre szeretnéd szabni az AI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## Web API-n keresztüli elérés -Szuper, az MI rész készen van, nézzük meg, hogyan integrálhatjuk ezt egy Web API-ba. A Web API-hoz a Flask-et választjuk, de bármelyik webes keretrendszer megfelelő lehet. Íme a kód: +Nagyszerű, az AI rész kész, nézzük meg, hogyan integrálhatjuk ezt egy Web API-ba. A Web API-hoz a Flask-et választjuk, de bármelyik webes keretrendszer megfelelő lehet. Nézzük meg a kódot: ### Python használata @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Itt létrehozunk egy Flask API-t, és definiálunk egy alapértelmezett útvonalat ("/") és egy "/chat" útvonalat. Az utóbbi arra szolgál, hogy a frontend kérdéseket küldjön a backendnek. +Itt létrehozunk egy Flask API-t, és definiálunk egy alapértelmezett útvonalat "/" és "/chat". Az utóbbi arra szolgál, hogy a frontendünk kérdéseket küldjön a backendnek. Az *llm.py* integrálásához a következőket kell tennünk: @@ -167,7 +161,7 @@ Az *llm.py* integrálásához a következőket kell tennünk: }) ``` - Itt az érkező kérést elemezzük, hogy kinyerjük a JSON törzsből a `message` tulajdonságot. Ezután meghívjuk az LLM-et ezzel a hívással: + Itt feldolgozzuk a bejövő kérést, hogy kinyerjük a JSON törzsből a `message` tulajdonságot. Ezután az LLM-et így hívjuk meg: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ Az *llm.py* integrálásához a következőket kell tennünk: }) ``` -Szuper, most már készen vagyunk. +Nagyszerű, most már készen vagyunk. ## Cors konfigurálása -Fontos megemlíteni, hogy beállítottunk valamit, amit CORS-nak (cross-origin resource sharing) hívnak. Ez azt jelenti, hogy mivel a backend és a frontend különböző portokon fog futni, engedélyeznünk kell, hogy a frontend hívásokat kezdeményezzen a backend felé. +Fontos megemlíteni, hogy beállítunk valamit, amit CORS-nak, azaz cross-origin resource sharing-nek hívnak. Ez azt jelenti, hogy mivel a backendünk és a frontendünk különböző portokon fog futni, engedélyeznünk kell, hogy a frontend hívja a backendet. ### Python használata -Az *api.py*-ban van egy kódrészlet, amely ezt beállítja: +Van egy kódrészlet az *api.py*-ban, amely ezt beállítja: ```python from flask_cors import CORS @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Jelenleg úgy van beállítva, hogy minden eredetet ("*") engedélyezzen, ami nem túl biztonságos. Ezt szigorítani kell, amikor éles környezetbe kerül a projekt. +Jelenleg úgy van beállítva, hogy "*" legyen, ami minden eredetet engedélyez, és ez egy kicsit nem biztonságos. Ezt korlátozni kell, amikor produkcióba kerülünk. ## Projekt futtatása @@ -203,7 +197,7 @@ A projekt futtatásához először a backendet, majd a frontendet kell elindíta ### Python használata -Oké, tehát van *llm.py* és *api.py* fájlunk. Hogyan működtethetjük ezeket a backenddel? Két dolgot kell tennünk: +Oké, tehát van *llm.py* és *api.py*, hogyan működtethetjük ezeket a backenddel? Két dolgot kell tennünk: - Függőségek telepítése: @@ -221,11 +215,11 @@ Oké, tehát van *llm.py* és *api.py* fájlunk. Hogyan működtethetjük ezeket python api.py ``` - Ha Codespaces-ben dolgozol, menj az alsó szerkesztői részben a Ports-ra, kattints jobb gombbal, válaszd a "Port Visibility"-t, majd állítsd "Public"-ra. + Ha Codespaces-ben dolgozol, menj az editor alsó részén található Ports részhez, kattints rá jobb gombbal, válaszd a "Port Visibility"-t, majd válaszd a "Public" opciót. ### Frontend fejlesztése -Most, hogy az API működik, hozzunk létre egy frontendet. Egy minimális frontenddel kezdünk, amit lépésről lépésre fejlesztünk. A *frontend* mappában hozz létre a következőket: +Most, hogy az API működik, hozzunk létre egy frontendet ehhez. Egy minimális frontendet, amelyet lépésről lépésre fejlesztünk tovább. A *frontend* mappában hozz létre a következőket: ```text backend/ @@ -253,7 +247,7 @@ Kezdjük az **index.html**-lel: ``` -Ez a minimális szükséges kód egy chatablak támogatásához: egy textarea az üzenetek megjelenítéséhez, egy input mező az üzenet beírásához, és egy gomb az üzenet backendhez küldéséhez. Nézzük meg a JavaScript kódot az *app.js*-ben. +Ez a minimum, amire szükséged van egy chat ablak támogatásához, mivel tartalmaz egy textarea-t, ahol az üzenetek megjelennek, egy input mezőt, ahová az üzenetet beírhatod, és egy gombot, amely elküldi az üzenetet a backendnek. Nézzük meg a JavaScriptet a *app.js*-ben. **app.js** @@ -312,12 +306,12 @@ Ez a minimális szükséges kód egy chatablak támogatásához: egy textarea az Nézzük át a kódot szakaszonként: -- 1) Itt hivatkozást szerzünk az összes elemre, amelyet később használni fogunk a kódban. +- 1) Itt hivatkozást kapunk az összes elemre, amelyre később hivatkozunk a kódban. - 2) Ebben a szakaszban létrehozunk egy függvényt, amely a beépített `fetch` metódust használja a backend hívására. -- 3) Az `appendMessage` segít hozzáadni a válaszokat, valamint a felhasználó által beírt üzeneteket. -- 4) Itt figyeljük a submit eseményt, beolvassuk az input mezőt, elhelyezzük a felhasználó üzenetét a textarea-ban, meghívjuk az API-t, és megjelenítjük a választ a textarea-ban. +- 3) Az `appendMessage` segít hozzáadni a válaszokat, valamint azt, amit te, mint felhasználó írsz. +- 4) Itt figyelünk a submit eseményre, és végül kiolvassuk az input mezőt, elhelyezzük a felhasználó üzenetét a textarea-ban, meghívjuk az API-t, és megjelenítjük a választ a textarea-ban. -Nézzük meg a stílusokat, itt igazán kreatív lehetsz, de íme néhány javaslat: +Nézzük meg a stílusokat, itt igazán kreatív lehetsz, és úgy alakíthatod, ahogy szeretnéd, de itt van néhány javaslat: **styles.css** @@ -338,18 +332,18 @@ Nézzük meg a stílusokat, itt igazán kreatív lehetsz, de íme néhány javas } ``` -Ezzel a három osztállyal különbözőképpen formázhatod az üzeneteket attól függően, hogy az asszisztenstől vagy a felhasználótól származnak. Ha inspirációra van szükséged, nézd meg a `solution/frontend/styles.css` mappát. +Ezzel a három osztállyal különbözőképpen fogod formázni az üzeneteket attól függően, hogy az asszisztenstől vagy tőled, mint felhasználótól származnak. Ha inspirációt keresel, nézd meg a `solution/frontend/styles.css` mappát. ### Alap URL módosítása -Egy dolgot még nem állítottunk be, ez pedig a `BASE_URL`. Ez csak akkor ismert, ha a backend már fut. Beállításához: +Van itt egy dolog, amit nem állítottunk be, és ez a `BASE_URL`. Ez nem ismert, amíg a backend el nem indul. Beállításához: -- Ha az API-t helyileg futtatod, valami ilyesminek kell lennie: `http://localhost:5000`. -- Ha Codespaces-ben futtatod, valami ilyesmi lesz: "[név]app.github.dev". +- Ha az API-t helyben futtatod, valami ilyesminek kell lennie: `http://localhost:5000`. +- Ha Codespaces-ben futtatod, valami ilyesminek kell kinéznie: "[name]app.github.dev". ## Feladat -Hozz létre egy saját *project* mappát az alábbi tartalommal: +Hozz létre egy saját *project* mappát, amelynek tartalma a következő: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Másold be a fentiekben ismertetett tartalmat, de szabadon testreszabhatod az ízlésed szerint. +Másold át a fentiekben leírt tartalmat, de nyugodtan testreszabhatod saját ízlésed szerint. ## Megoldás @@ -369,11 +363,11 @@ Másold be a fentiekben ismertetett tartalmat, de szabadon testreszabhatod az í ## Bónusz -Próbáld megváltoztatni az MI asszisztens személyiségét. +Próbáld meg megváltoztatni az AI asszisztens személyiségét. ### Python esetén -Amikor a *api.py*-ban meghívod a `call_llm` függvényt, megváltoztathatod a második argumentumot, például: +Amikor meghívod a `call_llm` függvényt az *api.py*-ban, megváltoztathatod a második argumentumot arra, amit szeretnél, például: ```python call_llm(message, "You are Captain Picard") @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### Frontend -Változtasd meg a CSS-t és a szöveget is az ízlésed szerint, tehát végezz módosításokat az *index.html*-ben és a *styles.css*-ben. +Változtasd meg a CSS-t és a szöveget is saját ízlésed szerint, tehát végezz módosításokat az *index.html*-ben és a *styles.css*-ben. -## Összefoglalás +## Összefoglaló -Szuper, most már tudod, hogyan készíts egy személyes asszisztenst a semmiből mesterséges intelligencia segítségével. Ezt GitHub Modellek, egy Python backend, valamint HTML, CSS és JavaScript frontend használatával valósítottuk meg. +Nagyszerű, megtanultad, hogyan hozhatsz létre egy személyes asszisztenst AI segítségével. Ezt GitHub Modellek, egy Python backend és egy HTML, CSS és JavaScript frontend segítségével valósítottuk meg. ## Beállítás Codespaces-szel - Navigálj ide: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) - Hozz létre egy sablonból (győződj meg róla, hogy be vagy jelentkezve a GitHub-ra) a jobb felső sarokban: - ![Sablon létrehozása](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hu.png) + ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hu.png) -- Miután a saját repódba kerültél, hozz létre egy Codespace-et: +- Miután a saját repódban vagy, hozz létre egy Codespace-t: - ![Codespace létrehozása](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hu.png) + ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hu.png) Ez elindít egy környezetet, amelyben most már dolgozhatsz. --- **Felelősség kizárása**: -Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet. \ No newline at end of file +Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet. \ No newline at end of file diff --git a/translations/id/9-chat-project/README.md b/translations/id/9-chat-project/README.md index c7776522..51bbb800 100644 --- a/translations/id/9-chat-project/README.md +++ b/translations/id/9-chat-project/README.md @@ -1,8 +1,8 @@ # Chat project -ဒီ chat project က GitHub Models ကို အသုံးပြုပြီး Chat Assistant တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမလဲဆိုတာ ပြသပေးမှာဖြစ်ပါတယ်။ +ဒီ chat project က GitHub Models ကို အသုံးပြုပြီး Chat Assistant တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမလဲဆိုတာ ပြသပေးပါတယ်။ -ဒီ project ရဲ့ အဆုံးသတ်ပုံက ဒီလိုပါ: +အဆုံးသတ် project ရဲ့ ရုပ်ပုံက ဒီလိုပဲဖြစ်ပါတယ်: -
- Chat app -
+![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.my.png) -အနည်းငယ်ရှင်းပြရမယ်ဆိုရင်၊ generative AI ကို အသုံးပြုပြီး Chat assistants တစ်ခုတည်ဆောက်တာက AI ကို စတင်လေ့လာဖို့အတွက် အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ ဒီသင်ခန်းစာတစ်ခုလုံးအတွင်းမှာ generative AI ကို web app ထဲမှာ ဘယ်လိုပေါင်းစည်းရမလဲဆိုတာကို သင်လေ့လာရမှာဖြစ်ပါတယ်။ စလိုက်ကြရအောင်။ +အနည်းငယ် context ပေးရမယ်ဆိုရင်၊ generative AI ကို အသုံးပြုပြီး Chat assistants တစ်ခုကို တည်ဆောက်တာက AI ကို စတင်လေ့လာဖို့အတွက် အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ ဒီသင်ခန်းစာတစ်ခုလုံးအတွင်းမှာ generative AI ကို web app အတွင်းမှာ ပေါင်းစည်းအသုံးပြုနည်းကို သင်ယူရမှာဖြစ်ပါတယ်။ စတင်လိုက်ကြစို့။ -## Generative AI နဲ့ ချိတ်ဆက်ခြင်း +## Generative AI ကို ချိတ်ဆက်ခြင်း -Backend အတွက်တော့ GitHub Models ကို အသုံးပြုထားပါတယ်။ ဒါက AI ကို အခမဲ့အသုံးပြုနိုင်စေတဲ့ ဝန်ဆောင်မှုကောင်းတစ်ခုဖြစ်ပါတယ်။ သူ့ရဲ့ playground ကို သွားပြီး သင့်ရဲ့ backend language နဲ့ ကိုက်ညီတဲ့ code ကို ရယူပါ။ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) မှာ ဒီလိုပုံစံနဲ့ တွေ့ရပါမယ်။ +Backend အတွက် GitHub Models ကို အသုံးပြုထားပါတယ်။ AI ကို အခမဲ့အသုံးပြုနိုင်တဲ့ အကောင်းဆုံးဝန်ဆောင်မှုတစ်ခုဖြစ်ပါတယ်။ သူ့ရဲ့ playground ကို သွားပြီး သင့်ရဲ့ backend language ရွေးချယ်မှုနဲ့ ကိုက်ညီတဲ့ code ကို ရယူပါ။ GitHub Models Playground မှာ ဒီလိုပုံစံဖြစ်ပါတယ် [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.my.png) -"Code" tab နဲ့ သင့်ရဲ့ runtime ကို ရွေးချယ်ပါ။ +အဆိုပါ "Code" tab ကို ရွေးချယ်ပြီး သင့်ရဲ့ runtime ကို ရွေးပါ။ -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.my.png) ### Python ကို အသုံးပြုခြင်း -ဒီအခါမှာတော့ Python ကို ရွေးချယ်ပြီး ဒီ code ကို ရယူပါ: +ဒီအခါမှာ Python ကို ရွေးချယ်ပြီး ဒီ code ကို ရွေးပါ: ```python """Run this model in Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -ဒီ code ကို နည်းနည်းသန့်ရှင်းအောင် ပြင်ဆင်ပြီး အသုံးပြုနိုင်အောင်လုပ်ပါ: +ဒီ code ကို အသုံးပြုနိုင်အောင် နည်းနည်းသန့်စင်လိုက်ရအောင်: ```python def call_llm(prompt: str, system_message: str): @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -`call_llm` ဆိုတဲ့ function နဲ့ prompt တစ်ခုနဲ့ system prompt တစ်ခုကို ထည့်ပြီး ရလဒ်ကို ပြန်ပေးနိုင်ပါပြီ။ +ဒီ `call_llm` function နဲ့ prompt တစ်ခုနဲ့ system prompt တစ်ခုကို ထည့်ပြီး function က အဖြေကို ပြန်ပေးပါလိမ့်မယ်။ ### AI Assistant ကို Customize လုပ်ခြင်း -AI assistant ကို သင့်လိုအပ်ချက်အတိုင်း ပြင်ဆင်ချင်ရင် system prompt ကို ဒီလိုဖြည့်စွက်နိုင်ပါတယ်: +AI assistant ကို သင့်လိုအပ်ချက်အတိုင်း ပြင်ဆင်ချင်ရင် system prompt ကို ဒီလိုပုံစံဖြင့် ဖြည့်စွက်နိုင်ပါတယ်: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Web API မှတစ်ဆင့် ထုတ်ဖော်ခြင်း +## Web API မှတဆင့် ထုတ်ဖော်ခြင်း -AI အပိုင်းကို ပြီးဆုံးသွားပြီဆိုရင်၊ Web API ထဲမှာ ဘယ်လိုပေါင်းစည်းရမလဲဆိုတာ ကြည့်ကြရအောင်။ Web API အတွက် Flask ကို အသုံးပြုထားပေမယ့်၊ ဘယ် web framework မဆို အသုံးပြုနိုင်ပါတယ်။ Code ကို ကြည့်ကြရအောင်: +အကောင်းဆုံးပါပြီ၊ AI အပိုင်းကို ပြီးမြောက်သွားပြီ၊ အခု Web API အတွင်းမှာ ပေါင်းစည်းပေးရအောင်။ Web API အတွက် Flask ကို ရွေးချယ်ထားပါတယ်၊ ဒါပေမယ့် ဘယ် web framework မဆို အသုံးပြုနိုင်ပါတယ်။ ဒီ code ကို ကြည့်လိုက်ရအောင်: ### Python ကို အသုံးပြုခြင်း @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -ဒီမှာ Flask API တစ်ခုကို ဖန်တီးပြီး "/" နဲ့ "/chat" ဆိုတဲ့ route နှစ်ခုကို သတ်မှတ်ထားပါတယ်။ "/chat" ကတော့ frontend ကနေ မေးခွန်းတွေကို ပေးပို့ဖို့အတွက် ဖြစ်ပါတယ်။ +ဒီမှာ flask API တစ်ခုကို ဖန်တီးပြီး "/" နဲ့ "/chat" ဆိုတဲ့ default route ကို သတ်မှတ်ထားပါတယ်။ နောက်ဆုံး route က frontend ကနေ backend ကို မေးခွန်းတွေ ပေးပို့ဖို့အတွက် ဖြစ်ပါတယ်။ *llm.py* ကို ပေါင်းစည်းဖို့ ဒီလိုလုပ်ရပါမယ်: @@ -152,7 +146,7 @@ if __name__ == "__main__": from flask import Flask, request ``` -- "/chat" route ထဲမှာ ခေါ်ပါ: +- "/chat" route မှာ function ကို ခေါ်ပါ: ```python @app.route("/hello", methods=["POST"]) @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - ဒီမှာ incoming request ကို parse လုပ်ပြီး JSON body ထဲက `message` property ကို ရယူပါတယ်။ ထို့နောက် LLM ကို ဒီလိုခေါ်ပါတယ်: + ဒီမှာ JSON body မှ message property ကို ရယူဖို့ incoming request ကို parse လုပ်ပါတယ်။ ထို့နောက် LLM ကို ဒီလိုခေါ်ပါတယ်: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -အိုကေ၊ အခုတော့ လိုအပ်တာတွေ ပြီးဆုံးသွားပါပြီ။ +အကောင်းဆုံးပါပြီ၊ လိုအပ်တာတွေ ပြီးမြောက်သွားပါပြီ။ -## Cors ကို Configure လုပ်ခြင်း +## Cors ကို Configure လုပ်ပါ -Backend နဲ့ frontend က အခြားအခြား port တွေမှာ run ဖြစ်နေမယ်ဆိုတော့ CORS (cross-origin resource sharing) ကို သတ်မှတ်ဖို့ လိုအပ်ပါတယ်။ +Cors, cross-origin resource sharing ကို စီစဉ်ထားတာကို ပြောပြရမယ်။ ဒါက backend နဲ့ frontend က အခြား port တွေမှာ run ဖြစ်နေတဲ့အတွက် frontend က backend ကို ခေါ်နိုင်ဖို့ လိုအပ်ပါတယ်။ ### Python ကို အသုံးပြုခြင်း -*api.py* ထဲမှာ ဒီလို code တစ်ခုရှိပါတယ်: +*api.py* မှာ ဒီကို စီစဉ်ထားတဲ့ code တစ်ခုရှိပါတယ်: ```python from flask_cors import CORS @@ -195,15 +189,15 @@ app = Flask(__name__) CORS(app) # * example.com ``` -အခု "*" ဆိုတာအားလုံးကို ခွင့်ပြုထားတာဖြစ်ပြီး၊ production မှာသွားတဲ့အခါမှာတော့ အကန့်အသတ်ထားဖို့ လိုအပ်ပါတယ်။ +အခု "*" ဆိုတဲ့ all origins ကို ခွင့်ပြုထားပါတယ်၊ ဒါက production မှာ သွားရောက်တဲ့အခါမှာ အန္တရာယ်ရှိနိုင်ပါတယ်၊ ထို့ကြောင့် ထိန်းချုပ်ထားသင့်ပါတယ်။ -## Project ကို Run လုပ်ခြင်း +## Project ကို Run လုပ်ပါ -Project ကို run လုပ်ဖို့အတွက် backend ကို စတင်ပြီးနောက် frontend ကို စတင်ရပါမယ်။ +Project ကို run လုပ်ဖို့ backend ကို အရင်စတင်ပြီး frontend ကို စတင်ရပါမယ်။ ### Python ကို အသုံးပြုခြင်း -အိုကေ၊ *llm.py* နဲ့ *api.py* ကို ဘယ်လို backend နဲ့ အလုပ်လုပ်စေမလဲဆိုတာ ကြည့်ကြရအောင်: +အခု *llm.py* နဲ့ *api.py* ရှိပြီး backend နဲ့ အလုပ်လုပ်ဖို့ ဘာလုပ်ရမလဲ? အခုလုပ်ရမယ့်အရာနှစ်ခုရှိပါတယ်: - Dependencies တွေကို Install လုပ်ပါ: @@ -221,11 +215,11 @@ Project ကို run လုပ်ဖို့အတွက် backend ကို python api.py ``` - Codespaces မှာဆိုရင် Ports ကို editor ရဲ့ အောက်ခြေမှာ သွားပြီး right-click လုပ်ပြီး "Port Visibility" ကို နှိပ်ပြီး "Public" ကို ရွေးချယ်ပါ။ + Codespaces မှာ run လုပ်ရင် editor ရဲ့ အောက်ပိုင်းမှာ Ports ကို သွားပြီး right-click လုပ်ပါ၊ "Port Visibility" ကို click လုပ်ပြီး "Public" ကို ရွေးပါ။ -### Frontend အပေါ် အလုပ်လုပ်ခြင်း +### Frontend အပေါ်မှာ အလုပ်လုပ်ပါ -API ကို run လုပ်ပြီးပြီဆိုရင်၊ frontend တစ်ခုကို ဖန်တီးရပါမယ်။ အနည်းဆုံး frontend တစ်ခုကို ဖန်တီးပြီး အဆင့်ဆင့် တိုးတက်အောင်လုပ်ပါမယ်။ *frontend* folder ထဲမှာ ဒီလိုဖိုင်တွေ ဖန်တီးပါ: +API run ဖြစ်ပြီးသားဖြစ်တဲ့အခါ frontend တစ်ခုကို ဖန်တီးရအောင်။ အနည်းဆုံး frontend တစ်ခုကို ဖန်တီးပြီး အဆင့်ဆင့်တိုးတက်အောင်လုပ်ပါမယ်။ *frontend* folder တစ်ခုမှာ ဒီလိုဖိုင်တွေ ဖန်တီးပါ: ```text backend/ @@ -235,7 +229,7 @@ app.js styles.css ``` -**index.html** ကို စတင်ကြည့်ကြရအောင်: +အရင်ဆုံး **index.html** ကို စတင်ကြည့်ပါ: ```html @@ -253,7 +247,7 @@ styles.css ``` -အထက်မှာပါတဲ့ code က chat window ကို အနည်းဆုံး support လုပ်ဖို့ လိုအပ်တဲ့အရာတွေပါ။ textarea တစ်ခုမှာ message တွေကို ပြသပြီး၊ input တစ်ခုမှာ message ကို ရိုက်ထည့်နိုင်ပြီး၊ button တစ်ခုက message ကို backend ဆီပို့နိုင်စေပါတယ်။ နောက်တစ်ခုကတော့ *app.js* ထဲမှာ JavaScript ကို ကြည့်ကြရအောင်: +အထက်မှာ chat window ကို ပံ့ပိုးဖို့အတွက် လိုအပ်တဲ့ အနည်းဆုံးအရာတွေပါဝင်ပါတယ်၊ textarea တစ်ခုမှာ message တွေကို ပြသပေးပြီး input တစ်ခုမှာ message ကို ရိုက်ထည့်နိုင်ပါတယ်၊ button တစ်ခုက message ကို backend ကို ပေးပို့ဖို့အတွက် ဖြစ်ပါတယ်။ နောက်တစ်ခု JavaScript ကို *app.js* မှာ ကြည့်လိုက်ရအောင်။ **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -Code ကို အပိုင်းလိုက်ရှင်းပြရမယ်ဆိုရင်: +Code ကို အပိုင်းလိုက်ကြည့်ရအောင်: -- 1) Element တွေကို reference လုပ်ထားတာ -- 2) Backend ကို ခေါ်ဖို့ `fetch` method ကို အသုံးပြုထားတာ -- 3) `appendMessage` က user ရဲ့ message နဲ့ assistant ရဲ့ response ကို textarea ထဲမှာ ထည့်ပေးတာ -- 4) Submit event ကို နားထောင်ပြီး input field ထဲက message ကို ဖတ်ပြီး textarea ထဲမှာ ပြသတာ +- 1) ဒီမှာ element တွေကို reference လုပ်ပြီး နောက် code မှာ အသုံးပြုမယ့်အတွက် ရယူထားပါတယ်။ +- 2) ဒီအပိုင်းမှာ built-in `fetch` method ကို အသုံးပြုပြီး backend ကို ခေါ်တဲ့ function တစ်ခုကို ဖန်တီးထားပါတယ်။ +- 3) `appendMessage` က assistant response တွေကို user ရဲ့ message နဲ့အတူ textarea မှာ ထည့်ပေးပါတယ်။ +- 4) submit event ကို နားထောင်ပြီး input field ကို ဖတ်ပြီး user ရဲ့ message ကို textarea မှာ ထည့်ပေးပြီး API ကို ခေါ်ပြီး response ကို textarea မှာ ပြသပေးပါတယ်။ -Styling ကို ကြည့်ကြရအောင်၊ ဒီမှာ သင့်စိတ်ကြိုက် ပြင်ဆင်နိုင်ပါတယ်၊ ဒါပေမယ့် အောက်မှာ အကြံပြုထားတာတွေပါ: +Styling ကို ကြည့်လိုက်ရအောင်၊ ဒီမှာ သင့်စိတ်ကြိုက် ပြင်ဆင်နိုင်ပါတယ်၊ ဒါပေမယ့် အောက်ပါအတိုင်း အကြံပေးထားပါတယ်: **styles.css** @@ -338,18 +332,18 @@ Styling ကို ကြည့်ကြရအောင်၊ ဒီမှာ သ } ``` -ဒီ class သုံးခုနဲ့ assistant နဲ့ user ရဲ့ message တွေကို မတူညီအောင် style လုပ်နိုင်ပါတယ်။ အခြား design အတွက် `solution/frontend/styles.css` folder ကို ကြည့်ပါ။ +ဒီ classes သုံးခုနဲ့ message တွေကို assistant ကနေလာတာလား user ကနေလာတာလားဆိုတာကို ခွဲခြားပြီး style လုပ်နိုင်ပါတယ်။ အခြား design အတွက် `solution/frontend/styles.css` folder ကို ကြည့်ပါ။ -### Base Url ကို ပြောင်းလဲခြင်း +### Base Url ကို ပြောင်းပါ -ဒီမှာ `BASE_URL` ကို သတ်မှတ်ထားခြင်းမရှိသေးပါဘူး၊ backend ကို စတင်ပြီးမှ သိနိုင်ပါတယ်။ သတ်မှတ်ဖို့: +ဒီမှာ မသတ်မှတ်ထားတဲ့အရာတစ်ခုရှိပါတယ်၊ အဲဒါက `BASE_URL` ဖြစ်ပါတယ်၊ backend စတင်ပြီးမှ သိနိုင်ပါတယ်။ သတ်မှတ်ဖို့: -- API ကို locally run လုပ်ရင် `http://localhost:5000` လိုမျိုးဖြစ်ရမယ်။ -- Codespaces မှာ run လုပ်ရင် "[name]app.github.dev" လိုမျိုးဖြစ်ရမယ်။ +- API ကို locally run လုပ်ရင် `http://localhost:5000` လိုမျိုး သတ်မှတ်ပါ။ +- Codespaces မှာ run လုပ်ရင် "[name]app.github.dev" လိုမျိုး ဖြစ်ပါတယ်။ ## Assignment -*project* ဆိုတဲ့ folder တစ်ခု ဖန်တီးပြီး အောက်ပါအတိုင်း ဖိုင်တွေ ထည့်ပါ: +*project* folder တစ်ခု ဖန်တီးပြီး အောက်ပါအတိုင်း content ထည့်ပါ: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -အထက်မှာ ပြောထားတဲ့အတိုင်း content တွေကို ကူးယူပြီး သင့်စိတ်ကြိုက် ပြင်ဆင်နိုင်ပါတယ်။ +အထက်မှာ ပြောထားတဲ့အတိုင်း content ကို ကူးယူပြီး သင့်စိတ်ကြိုက် ပြင်ဆင်နိုင်ပါတယ်။ ## Solution @@ -369,11 +363,11 @@ project/ ## Bonus -AI assistant ရဲ့ personality ကို ပြောင်းလဲကြည့်ပါ။ +AI assistant ရဲ့ personality ကို ပြောင်းကြည့်ပါ။ ### Python အတွက် -*api.py* ထဲမှာ `call_llm` ကို ခေါ်တဲ့အခါ ဒုတိယ argument ကို သင့်လိုအပ်ချက်အတိုင်း ပြောင်းလဲနိုင်ပါတယ်၊ ဥပမာ: +*api.py* မှာ `call_llm` ကို ခေါ်တဲ့အခါ ဒုတိယ argument ကို သင့်လိုအပ်ချက်အတိုင်း ပြောင်းနိုင်ပါတယ်၊ ဥပမာ: ```python call_llm(message, "You are Captain Picard") @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### Frontend -CSS နဲ့ text တွေကို သင့်စိတ်ကြိုက် ပြောင်းလဲပါ၊ *index.html* နဲ့ *styles.css* ထဲမှာ ပြင်ဆင်ပါ။ +CSS နဲ့ text ကို သင့်စိတ်ကြိုက် ပြောင်းပါ၊ *index.html* နဲ့ *styles.css* မှာ ပြင်ဆင်ပါ။ ## Summary -အိုကေ၊ AI ကို အသုံးပြုပြီး ကိုယ်ပိုင် personal assistant တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမလဲဆိုတာ အစမှ အဆုံး သင်ယူပြီးဖြစ်ပါပြီ။ GitHub Models, Python backend, HTML, CSS, JavaScript frontend တို့ကို အသုံးပြုပြီး လုပ်ဆောင်ခဲ့ပါတယ်။ +အကောင်းဆုံးပါပြီ၊ AI ကို အသုံးပြုပြီး personal assistant တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမလဲဆိုတာ အခြေခံကနေ သင်ယူပြီးပြီ။ GitHub Models ကို အသုံးပြုပြီး Python backend နဲ့ HTML, CSS, JavaScript frontend ကို အသုံးပြုထားပါတယ်။ -## Codespaces နဲ့ တည်ဆောက်ခြင်း +## Codespaces နဲ့ Set up လုပ်ပါ -- ဒီနေရာကို သွားပါ: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Template မှာ Create လုပ်ပါ (GitHub မှာ login လုပ်ထားဖို့ လိုအပ်ပါတယ်): +- သွားပါ: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) +- Template မှာ Create လုပ်ပါ (GitHub မှာ login လုပ်ထားတာ သေချာပါစေ) အပေါ်ညာဘက်မှာ: ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.my.png) -- သင့် repo ထဲမှာ Codespace တစ်ခု ဖန်တီးပါ: +- သင့် repo မှာ Codespace တစ်ခု ဖန်တီးပါ: ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.my.png) - အခုတော့ သင့်အတွက် အလုပ်လုပ်နိုင်တဲ့ environment တစ်ခု စတင်ထားပါပြီ။ + ဒီမှာ သင့်အလုပ်လုပ်နိုင်တဲ့ environment တစ်ခု စတင်ပါလိမ့်မယ်။ --- **အကြောင်းကြားချက်**: -ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါရှိနိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ \ No newline at end of file +ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူရင်းဘာသာစကားဖြင့် အာဏာတရားရှိသော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုမှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ \ No newline at end of file diff --git a/translations/ne/9-chat-project/README.md b/translations/ne/9-chat-project/README.md index a7bc470e..ec7d65df 100644 --- a/translations/ne/9-chat-project/README.md +++ b/translations/ne/9-chat-project/README.md @@ -1,41 +1,35 @@ # च्याट प्रोजेक्ट -यो च्याट प्रोजेक्टले GitHub Models प्रयोग गरेर च्याट असिस्टेन्ट कसरी बनाउने भनेर देखाउँछ। +यो च्याट प्रोजेक्टले GitHub Models प्रयोग गरेर च्याट सहायक कसरी निर्माण गर्ने देखाउँछ। -तपाईंले तयार प्रोजेक्ट यसरी देख्नुहुनेछ: +तपाईंले तयार प्रोजेक्ट यस्तो देखिनेछ: -
- च्याट एप -
+![च्याट एप](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ne.png) -थप सन्दर्भका लागि, जेनेरेटिभ एआई प्रयोग गरेर च्याट असिस्टेन्ट बनाउनु एआई सिक्न सुरु गर्नको लागि उत्कृष्ट तरिका हो। यस पाठक्रममा, तपाईंले जेनेरेटिभ एआईलाई वेब एपमा कसरी एकीकृत गर्ने भनेर सिक्नुहुनेछ। सुरु गरौं। +थप सन्दर्भको लागि, जेनेरेटिभ एआई प्रयोग गरेर च्याट सहायक निर्माण गर्नु एआई सिक्न सुरु गर्ने उत्कृष्ट तरिका हो। यस पाठको क्रममा, तपाईंले जेनेरेटिभ एआईलाई वेब एपमा कसरी एकीकृत गर्ने सिक्नुहुनेछ। सुरु गरौं। ## जेनेरेटिभ एआईसँग जडान गर्नुहोस् -ब्याकएन्डको लागि, हामी GitHub Models प्रयोग गर्दैछौं। यो एक उत्कृष्ट सेवा हो जसले तपाईंलाई निःशुल्क एआई प्रयोग गर्न सक्षम बनाउँछ। यसको प्लेग्राउन्डमा जानुहोस् र तपाईंको रोजाइको ब्याकएन्ड भाषासँग मेल खाने कोड लिनुहोस्। यो यसरी देखिन्छ: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +ब्याकएन्डको लागि, हामी GitHub Models प्रयोग गर्दैछौं। यो एक उत्कृष्ट सेवा हो जसले तपाईंलाई निःशुल्क एआई प्रयोग गर्न सक्षम बनाउँछ। यसको प्लेग्राउन्डमा जानुहोस् र तपाईंले रोजेको ब्याकएन्ड भाषासँग मेल खाने कोड प्राप्त गर्नुहोस्। यो [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) मा यस्तो देखिन्छ। -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ne.png) -जसरी भनिएको छ, "Code" ट्याब र तपाईंको रोजाइको रनटाइम चयन गर्नुहोस्। +जसरी भनिएको थियो, "Code" ट्याब र तपाईंले रोजेको रनटाइम चयन गर्नुहोस्। -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ne.png) ### Python प्रयोग गर्दै -यस अवस्थामा, हामी Python चयन गर्छौं, जसले गर्दा हामीले यो कोड लिन्छौं: +यस अवस्थामा हामी Python चयन गर्छौं, जसले हामीलाई यो कोड चयन गर्नुपर्ने हुन्छ: ```python """Run this model in Python @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -`call_llm` नामक यो फङ्सनले अब एउटा प्रम्प्ट र सिस्टम प्रम्प्ट लिन्छ र परिणाम फर्काउँछ। +यो `call_llm` फङ्सनको साथमा हामीले अब एक प्रम्प्ट र सिस्टम प्रम्प्ट लिन सक्छौं र फङ्सनले नतिजा फर्काउँछ। -### एआई असिस्टेन्टलाई अनुकूलन गर्नुहोस् +### एआई सहायकलाई अनुकूलित गर्नुहोस् -यदि तपाईं एआई असिस्टेन्टलाई अनुकूलन गर्न चाहनुहुन्छ भने, तपाईं यसलाई कसरी व्यवहार गर्न चाहनुहुन्छ भनेर सिस्टम प्रम्प्टमा यसरी निर्दिष्ट गर्न सक्नुहुन्छ: +यदि तपाईं एआई सहायकलाई अनुकूलित गर्न चाहनुहुन्छ भने, तपाईंले सिस्टम प्रम्प्टलाई यसरी भरिदिएर यसको व्यवहार निर्दिष्ट गर्न सक्नुहुन्छ: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## यसलाई वेब एपीआई मार्फत सार्वजनिक गर्नुहोस् +## वेब एपीआई मार्फत यसलाई सार्वजनिक गर्नुहोस् -उत्तम, हामीले एआई भाग पूरा गर्यौं, अब यसलाई वेब एपीआईमा कसरी एकीकृत गर्न सकिन्छ हेरौं। वेब एपीआईको लागि, हामी Flask प्रयोग गर्दैछौं, तर कुनै पनि वेब फ्रेमवर्क राम्रो हुन सक्छ। यसको कोड यसरी देखिन्छ: +उत्तम, हामीले एआई भाग पूरा गर्यौं, अब हेर्नुहोस् कि हामी यसलाई वेब एपीआईमा कसरी एकीकृत गर्न सक्छौं। वेब एपीआईको लागि, हामी Flask प्रयोग गर्दैछौं, तर कुनै पनि वेब फ्रेमवर्क राम्रो हुनेछ। यसको कोड हेर्नुहोस्: ### Python प्रयोग गर्दै @@ -141,11 +135,11 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -यहाँ, हामीले एउटा Flask API बनायौं र "/" र "/chat" नामक दुई रुट परिभाषित गर्यौं। दोस्रो रुट हाम्रो फ्रन्टएन्डले प्रश्नहरू पठाउन प्रयोग गर्ने उद्देश्यले बनाइएको हो। +यहाँ, हामीले एक फ्लास्क एपीआई सिर्जना गर्छौं र "/" र "/chat" नामक डिफल्ट रुट परिभाषित गर्छौं। पछिल्लो रुट हाम्रो फ्रन्टएन्डले प्रश्नहरू पठाउन प्रयोग गर्न सकिन्छ। -*llm.py* लाई एकीकृत गर्नका लागि, हामीले निम्न गर्नुपर्छ: +*llm.py* लाई एकीकृत गर्नका लागि हामीले निम्न गर्नुपर्छ: -- `call_llm` फङ्सन इम्पोर्ट गर्नुहोस्: +- `call_llm` फङ्सनलाई इम्पोर्ट गर्नुहोस्: ```python from llm import call_llm @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - यहाँ हामी इनकमिङ अनुरोधलाई पार्स गरेर JSON बडीबाट `message` प्रोपर्टी निकाल्छौं। त्यसपछि हामी LLM लाई यसरी कल गर्छौं: + यहाँ हामीले आउने अनुरोधलाई पार्स गरेर JSON बडीबाट `message` प्रोपर्टी प्राप्त गर्छौं। त्यसपछि हामीले LLMलाई यसरी कल गर्छौं: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -उत्तम, अब हामीले आवश्यक सबै काम गरिसक्यौं। +उत्तम, अब हामीले आवश्यक सबै काम गर्यौं। ## Cors कन्फिगर गर्नुहोस् -हामीले CORS, अर्थात् क्रस-ओरिजिन रिसोर्स सेयरिङ सेटअप गरेको कुरा उल्लेख गर्नुपर्छ। यसको मतलब हाम्रो ब्याकएन्ड र फ्रन्टएन्ड फरक पोर्टमा चल्ने भएकाले, हामीले फ्रन्टएन्डलाई ब्याकएन्डमा कल गर्न अनुमति दिनुपर्छ। +हामीले Cors, अर्थात् क्रस-ओरिजिन रिसोर्स सेयरिङ सेटअप गरेको कुरा उल्लेख गर्नुपर्छ। यसको मतलब हाम्रो ब्याकएन्ड र फ्रन्टएन्ड फरक पोर्टमा चल्ने भएकाले, हामीले फ्रन्टएन्डलाई ब्याकएन्डमा कल गर्न अनुमति दिनुपर्छ। ### Python प्रयोग गर्दै -*api.py* मा यो सेटअप गर्ने कोडको टुक्रा छ: +*api.py* मा यस्तो कोड छ जसले यसलाई सेटअप गर्छ: ```python from flask_cors import CORS @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -हाल यो "*" अर्थात् सबै ओरिजिनलाई अनुमति दिन सेट गरिएको छ, जुन अलि असुरक्षित छ। उत्पादनमा जाँदा यसलाई सीमित गर्नुपर्छ। +हाल "*", अर्थात् सबै ओरिजिनलाई अनुमति दिइएको छ, जुन अलि असुरक्षित छ। हामीले यो उत्पादनमा जाँदा सीमित गर्नुपर्छ। -## तपाईंको प्रोजेक्ट चलाउनुहोस् +## आफ्नो प्रोजेक्ट चलाउनुहोस् -तपाईंको प्रोजेक्ट चलाउन, पहिले ब्याकएन्ड र त्यसपछि फ्रन्टएन्ड सुरु गर्नुपर्छ। +आफ्नो प्रोजेक्ट चलाउन, तपाईंले पहिले आफ्नो ब्याकएन्ड सुरु गर्नुपर्छ र त्यसपछि फ्रन्टएन्ड। ### Python प्रयोग गर्दै ठिक छ, हामीसँग *llm.py* र *api.py* छ, अब ब्याकएन्डसँग यो कसरी काम गर्ने बनाउने? दुई कुरा गर्नुपर्छ: -- निर्भरता इन्स्टल गर्नुहोस्: +- डिपेन्डेन्सीहरू इन्स्टल गर्नुहोस्: ```sh cd backend @@ -221,11 +215,11 @@ CORS(app) # * example.com python api.py ``` - यदि तपाईं Codespaces मा हुनुहुन्छ भने, सम्पादकको तल्लो भागमा रहेको पोर्टमा जानुहोस्, त्यसमा दायाँ-क्लिक गर्नुहोस् र "Port Visibility" मा क्लिक गरेर "Public" चयन गर्नुहोस्। + यदि तपाईं Codespaces मा हुनुहुन्छ भने, तपाईंले एडिटरको तल्लो भागमा Ports मा जानुपर्छ, त्यसमा राइट-क्लिक गरेर "Port Visibility" मा क्लिक गर्नुहोस् र "Public" चयन गर्नुहोस्। ### फ्रन्टएन्डमा काम गर्नुहोस् -अब हामीसँग एपीआई चलिरहेको छ, यसका लागि फ्रन्टएन्ड बनाऔं। एक न्यूनतम फ्रन्टएन्ड जसलाई हामी क्रमशः सुधार गर्नेछौं। *frontend* फोल्डरमा निम्न बनाउनुहोस्: +अब हामीसँग एपीआई चलिरहेको छ, यसका लागि फ्रन्टएन्ड बनाउँ। एक न्यूनतम फ्रन्टएन्ड जसलाई हामी क्रमिक रूपमा सुधार गर्नेछौं। *frontend* फोल्डरमा निम्न सिर्जना गर्नुहोस्: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -माथिको कोडले च्याट विन्डोलाई समर्थन गर्न आवश्यक न्यूनतम कुरा समावेश गर्दछ। यसमा सन्देशहरू देखाउनका लागि एउटा textarea, सन्देश टाइप गर्नका लागि इनपुट र ब्याकएन्डमा सन्देश पठाउनका लागि बटन छ। अब *app.js* मा JavaScript हेरौं: +माथिको कोड च्याट विन्डोलाई समर्थन गर्न आवश्यक न्यूनतम हो। यसमा टेक्स्ट एरिया छ जहाँ सन्देशहरू देखिन्छन्, इनपुट छ जहाँ सन्देश टाइप गर्न सकिन्छ, र बटन छ जसले सन्देशलाई ब्याकएन्डमा पठाउँछ। अब *app.js* मा JavaScript हेर्नुहोस्। **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -कोडलाई खण्ड अनुसार हेरौं: +कोडलाई खण्ड अनुसार हेर्नुहोस्: -- 1) यहाँ हामीले सबै तत्वहरूको रेफरेन्स लिन्छौं जसलाई पछि कोडमा प्रयोग गरिन्छ। -- 2) यस खण्डमा, हामीले `fetch` विधि प्रयोग गरेर ब्याकएन्डलाई कल गर्ने फङ्सन बनाउँछौं। -- 3) `appendMessage` ले प्रयोगकर्ताले टाइप गरेको र असिस्टेन्टको प्रतिक्रिया दुवै थप्न मद्दत गर्छ। -- 4) यहाँ हामीले submit इभेन्टलाई सुन्छौं र इनपुट फिल्ड पढ्छौं, प्रयोगकर्ताको सन्देशलाई textarea मा राख्छौं, एपीआईलाई कल गर्छौं, र प्रतिक्रिया textarea मा देखाउँछौं। +- १) यहाँ हामीले सबै एलिमेन्टहरूको रेफरेन्स लिन्छौं जसलाई पछि कोडमा प्रयोग गरिन्छ। +- २) यस खण्डमा, हामीले एक फङ्सन बनाउँछौं जसले बिल्ट-इन `fetch` मेथड प्रयोग गरेर हाम्रो ब्याकएन्डलाई कल गर्छ। +- ३) `appendMessage` ले प्रतिक्रियाहरू र प्रयोगकर्ताले टाइप गरेको सन्देश थप्न मद्दत गर्छ। +- ४) यहाँ हामीले सबमिट इभेन्टलाई सुन्छौं र इनपुट फिल्ड पढ्छौं, प्रयोगकर्ताको सन्देश टेक्स्ट एरियामा राख्छौं, एपीआईलाई कल गर्छौं, र प्रतिक्रियालाई टेक्स्ट एरियामा देखाउँछौं। -अब स्टाइलिङ हेरौं, यहाँ तपाईंले आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, तर केही सुझावहरू यस्ता छन्: +अब स्टाइलिङ हेर्नुहोस्, यहाँ तपाईंले आफ्नो इच्छाअनुसार डिजाइन गर्न सक्नुहुन्छ, तर केही सुझावहरू यहाँ छन्: **styles.css** @@ -338,18 +332,18 @@ styles.css } ``` -यी तीन कक्षाहरूले सन्देशहरूलाई स्रोत अनुसार फरक तरिकाले स्टाइल गर्छन्, चाहे त्यो असिस्टेन्टबाट होस् वा प्रयोगकर्ताबाट। प्रेरणाका लागि, `solution/frontend/styles.css` फोल्डर हेर्नुहोस्। +यी तीन क्लासहरूले सन्देशलाई सहायकबाट आएको हो वा प्रयोगकर्ताबाट आएको हो भनेर फरक देखाउन स्टाइल गर्छ। प्रेरित हुन चाहनुहुन्छ भने `solution/frontend/styles.css` फोल्डर हेर्नुहोस्। -### बेस युआरएल परिवर्तन गर्नुहोस् +### Base Url परिवर्तन गर्नुहोस् -यहाँ एउटा कुरा सेट गरिएको थिएन, त्यो हो `BASE_URL`, जुन ब्याकएन्ड सुरु नभएसम्म थाहा हुँदैन। यसलाई सेट गर्न: +यहाँ एउटा कुरा सेट गरिएको थिएन, त्यो हो `BASE_URL`, यो ब्याकएन्ड सुरु नभएसम्म थाहा हुँदैन। यसलाई सेट गर्न: -- यदि तपाईंले एपीआई स्थानीय रूपमा चलाउनुहुन्छ भने, यो `http://localhost:5000` जस्तो हुनुपर्छ। +- यदि तपाईंले एपीआई स्थानीय रूपमा चलाउनुहुन्छ भने, यसलाई `http://localhost:5000` जस्तो सेट गर्नुपर्छ। - यदि Codespaces मा चलाउनुहुन्छ भने, यो "[name]app.github.dev" जस्तो देखिन्छ। ## असाइनमेन्ट -तपाईंको आफ्नै *project* फोल्डर बनाउनुहोस् जसमा निम्न सामग्री होस्: +आफ्नै *project* फोल्डर बनाउनुहोस् जसको सामग्री यस प्रकार हो: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -माथि दिइएको निर्देशनबाट सामग्री प्रतिलिपि गर्नुहोस् तर तपाईंको इच्छाअनुसार अनुकूलन गर्न स्वतन्त्र महसुस गर्नुहोस्। +माथि उल्लेख गरिएको सामग्रीलाई प्रतिलिपि गर्नुहोस् तर आफ्नो इच्छाअनुसार अनुकूलित गर्न स्वतन्त्र हुनुहोस्। ## समाधान @@ -369,11 +363,11 @@ project/ ## बोनस -एआई असिस्टेन्टको व्यक्तित्व परिवर्तन गर्ने प्रयास गर्नुहोस्। +एआई सहायकको व्यक्तित्व परिवर्तन गर्न प्रयास गर्नुहोस्। ### Python को लागि -जब तपाईं *api.py* मा `call_llm` कल गर्नुहुन्छ, तपाईं दोस्रो आर्गुमेन्टलाई आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, जस्तै: +जब तपाईं *api.py* मा `call_llm` कल गर्नुहुन्छ, तपाईंले दोस्रो आर्गुमेन्टलाई आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, उदाहरणका लागि: ```python call_llm(message, "You are Captain Picard") @@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard") ### फ्रन्टएन्ड -CSS र पाठलाई पनि आफ्नो इच्छाअनुसार परिवर्तन गर्नुहोस्, त्यसैले *index.html* र *styles.css* मा परिवर्तन गर्नुहोस्। +CSS र टेक्स्टलाई पनि आफ्नो इच्छाअनुसार परिवर्तन गर्नुहोस्, त्यसैले *index.html* र *styles.css* मा परिवर्तन गर्नुहोस्। -## संक्षेप +## सारांश -उत्तम, तपाईंले एआई प्रयोग गरेर व्यक्तिगत असिस्टेन्ट कसरी बनाउने भनेर सुरुबाट सिक्नुभयो। हामीले GitHub Models, Python मा ब्याकएन्ड, र HTML, CSS, JavaScript मा फ्रन्टएन्ड प्रयोग गरेर यो गरेका छौं। +उत्तम, तपाईंले एआई प्रयोग गरेर व्यक्तिगत सहायक कसरी बनाउने भन्ने कुरा सुरुबाट सिक्नुभयो। हामीले GitHub Models, Python मा ब्याकएन्ड, र HTML, CSS, JavaScript मा फ्रन्टएन्ड प्रयोग गरेर यो गरेका छौं। ## Codespaces सेटअप गर्नुहोस् - यहाँ जानुहोस्: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- टेम्प्लेटबाट सिर्जना गर्नुहोस् (GitHub मा लगइन भएको सुनिश्चित गर्नुहोस्) माथिल्लो दायाँ कुनामा: +- टेम्प्लेटबाट सिर्जना गर्नुहोस् (GitHub मा लगइन भएको सुनिश्चित गर्नुहोस्) माथि-दायाँ कुनामा: ![टेम्प्लेटबाट सिर्जना गर्नुहोस्](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ne.png) @@ -398,7 +392,7 @@ CSS र पाठलाई पनि आफ्नो इच्छाअनुस ![Codespace सिर्जना गर्नुहोस्](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ne.png) - यसले तपाईंलाई काम गर्न मिल्ने वातावरण सुरु गर्नेछ। + यसले तपाईंलाई काम गर्न सक्ने वातावरण सुरु गर्नुपर्छ। --- diff --git a/translations/nl/9-chat-project/README.md b/translations/nl/9-chat-project/README.md index 134eb39a..c06ed1ad 100644 --- a/translations/nl/9-chat-project/README.md +++ b/translations/nl/9-chat-project/README.md @@ -1,8 +1,8 @@ # Chat-prosjekt -Dette chat-prosjektet viser hvordan man kan bygge en Chat-assistent ved hjelp av GitHub Models. +Dette chat-prosjektet viser hvordan du kan bygge en Chat-assistent ved hjelp av GitHub Models. Slik ser det ferdige prosjektet ut: -
- Chat-app -
+![Chat-app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.no.png) -Litt kontekst: Å bygge chat-assistenter ved hjelp av generativ AI er en flott måte å begynne å lære om AI. Det du vil lære her er hvordan du integrerer generativ AI i en webapplikasjon gjennom denne leksjonen. La oss komme i gang. +Litt kontekst: Å bygge chat-assistenter ved hjelp av generativ AI er en flott måte å begynne å lære om AI på. Det du vil lære her, er hvordan du integrerer generativ AI i en webapplikasjon gjennom denne leksjonen. La oss starte. ## Koble til generativ AI -For backend bruker vi GitHub Models. Det er en flott tjeneste som lar deg bruke AI gratis. Gå til lekeplassen deres og hent kode som tilsvarer ditt valgte backend-språk. Slik ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +For backend bruker vi GitHub Models. Det er en flott tjeneste som lar deg bruke AI gratis. Gå til deres playground og hent koden som tilsvarer ditt valgte backend-språk. Slik ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.no.png) -Som nevnt, velg fanen "Code" og din valgte runtime. +Som vi nevnte, velg fanen "Code" og ditt valgte runtime. -
- playground choice -
+![Playground-valg](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.no.png) ### Bruke Python -I dette tilfellet velger vi Python, som betyr at vi bruker denne koden: +I dette tilfellet velger vi Python, noe som betyr at vi velger denne koden: ```python """Run this model in Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -La oss rydde opp i denne koden litt slik at den blir gjenbrukbar: +La oss rydde opp i denne koden litt slik at den kan gjenbrukes: ```python def call_llm(prompt: str, system_message: str): @@ -106,9 +100,9 @@ Hvis du vil tilpasse AI-assistenten, kan du spesifisere hvordan du vil at den sk call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Eksponere det via en Web API +## Eksponere det via et Web API -Flott, vi har gjort AI-delen ferdig. La oss se hvordan vi kan integrere dette i en Web API. For Web API velger vi å bruke Flask, men enhver webrammeverk bør fungere. La oss se koden for det: +Flott, vi har AI-delen ferdig. La oss se hvordan vi kan integrere dette i et Web API. For Web API velger vi å bruke Flask, men hvilket som helst web-rammeverk burde fungere. La oss se koden for det: ### Bruke Python @@ -141,18 +135,18 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Her oppretter vi en Flask-API og definerer en standardrute "/" og "/chat". Den siste er ment å brukes av frontend for å sende spørsmål til den. +Her oppretter vi et Flask-API og definerer en standardrute "/" og "/chat". Den siste er ment å brukes av frontend for å sende spørsmål til det. -For å integrere *llm.py* trenger vi å gjøre følgende: +For å integrere *llm.py*, her er hva vi må gjøre: -- Importere funksjonen `call_llm`: +- Importer funksjonen `call_llm`: ```python from llm import call_llm from flask import Flask, request ``` -- Kalle den fra "/chat"-ruten: +- Kall den fra "/chat"-ruten: ```python @app.route("/hello", methods=["POST"]) @@ -167,7 +161,7 @@ For å integrere *llm.py* trenger vi å gjøre følgende: }) ``` - Her analyserer vi den innkommende forespørselen for å hente `message`-egenskapen fra JSON-body. Deretter kaller vi LLM med denne kallet: + Her parser vi den innkommende forespørselen for å hente `message`-egenskapen fra JSON-bodyen. Deretter kaller vi LLM med dette kallet: ```python response = call_llm(message, "You are a helpful assistant") @@ -186,7 +180,7 @@ Vi bør nevne at vi setter opp noe som CORS, cross-origin resource sharing. Dett ### Bruke Python -Det finnes et kodebit i *api.py* som setter dette opp: +Det er en kodebit i *api.py* som setter dette opp: ```python from flask_cors import CORS @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Akkurat nå er det satt opp til å tillate "*" som er alle opprinnelser, og det er litt usikkert. Vi bør begrense det når vi går til produksjon. +Akkurat nå er det satt opp til å tillate "*" som er alle opprinnelser, og det er litt usikkert. Vi bør begrense det når vi går i produksjon. ## Kjør prosjektet ditt -For å kjøre prosjektet ditt, må du starte opp backend først og deretter frontend. +For å kjøre prosjektet ditt må du starte opp backend først og deretter frontend. ### Bruke Python Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til å fungere med en backend? Vel, det er to ting vi må gjøre: -- Installere avhengigheter: +- Installer avhengigheter: ```sh cd backend @@ -215,17 +209,17 @@ Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til å fungere med pip install openai flask flask-cors openai ``` -- Starte API-en +- Start API-et ```sh python api.py ``` - Hvis du er i Codespaces, må du gå til Ports nederst i editoren, høyreklikke på den og klikke "Port Visibility" og velge "Public". + Hvis du er i Codespaces, må du gå til Ports nederst i editoren, høyreklikke på det og klikke "Port Visibility" og velge "Public". ### Jobbe med en frontend -Nå som vi har en API oppe og kjører, la oss lage en frontend for dette. En helt enkel frontend som vi vil forbedre stegvis. I en *frontend*-mappe, opprett følgende: +Nå som vi har et API oppe og kjører, la oss lage en frontend for dette. En helt grunnleggende frontend som vi vil forbedre trinnvis. I en *frontend*-mappe, opprett følgende: ```text backend/ @@ -253,7 +247,7 @@ La oss starte med **index.html**: ``` -Dette er det absolutt minimum du trenger for å støtte et chat-vindu, da det består av en tekstboks hvor meldinger vil bli vist, et input-felt for å skrive meldingen og en knapp for å sende meldingen til backend. La oss se på JavaScript neste i *app.js* +Dette er det absolutt minste du trenger for å støtte et chat-vindu, da det består av en tekstboks hvor meldinger vil bli vist, et input-felt for å skrive meldingen og en knapp for å sende meldingen til backend. La oss se på JavaScript i *app.js*. **app.js** @@ -310,12 +304,12 @@ Dette er det absolutt minimum du trenger for å støtte et chat-vindu, da det be })(); ``` -La oss gå gjennom koden per seksjon: +La oss gå gjennom koden seksjon for seksjon: - 1) Her får vi en referanse til alle elementene vi vil referere til senere i koden. -- 2) I denne seksjonen oppretter vi en funksjon som bruker den innebygde `fetch`-metoden for å kalle backend. +- 2) I denne delen oppretter vi en funksjon som bruker den innebygde `fetch`-metoden for å kalle backend. - 3) `appendMessage` hjelper med å legge til svar samt det du som bruker skriver. -- 4) Her lytter vi til submit-hendelsen, leser input-feltet, plasserer brukerens melding i tekstboksen, kaller API-en og viser svaret i tekstboksen. +- 4) Her lytter vi til submit-hendelsen, leser input-feltet, plasserer brukerens melding i tekstboksen, kaller API-et og viser svaret i tekstboksen. La oss se på styling neste. Her kan du virkelig være kreativ og få det til å se ut som du vil, men her er noen forslag: @@ -340,16 +334,16 @@ La oss se på styling neste. Her kan du virkelig være kreativ og få det til å Med disse tre klassene vil du style meldinger forskjellig avhengig av om de kommer fra assistenten eller deg som bruker. Hvis du vil bli inspirert, sjekk ut `solution/frontend/styles.css`-mappen. -### Endre Base Url +### Endre Base URL Det var én ting vi ikke satte her, og det var `BASE_URL`. Dette er ikke kjent før backend er startet. For å sette det: - Hvis du kjører API lokalt, bør det settes til noe som `http://localhost:5000`. -- Hvis det kjøres i Codespaces, bør det se ut som "[name]app.github.dev". +- Hvis du kjører i Codespaces, bør det se ut som "[name]app.github.dev". ## Oppgave -Opprett din egen mappe *project* med innhold som følger: +Lag din egen mappe *project* med innhold som dette: ```text project/ @@ -385,20 +379,20 @@ Endre også CSS og tekst etter eget ønske, så gjør endringer i *index.html* o ## Oppsummering -Flott, du har lært fra bunnen av hvordan du lager en personlig assistent ved hjelp av AI. Vi har gjort det ved hjelp av GitHub Models, en backend i Python og en frontend i HTML, CSS og JavaScript. +Flott, du har lært fra bunnen av hvordan du lager en personlig assistent ved hjelp av AI. Vi har gjort dette ved hjelp av GitHub Models, en backend i Python og en frontend i HTML, CSS og JavaScript. ## Sett opp med Codespaces - Naviger til: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Opprett fra en mal (sørg for at du er logget inn på GitHub) øverst til høyre: +- Opprett fra en mal (sørg for at du er logget inn på GitHub) i øvre høyre hjørne: ![Opprett fra mal](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.no.png) -- Når du er i ditt repo, opprett en Codespace: +- Når du er i repoet ditt, opprett en Codespace: ![Opprett codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.no.png) - Dette bør starte et miljø du nå kan jobbe med. + Dette skal starte et miljø du nå kan jobbe med. --- diff --git a/translations/pa/9-chat-project/README.md b/translations/pa/9-chat-project/README.md index 12c7b560..86bf2799 100644 --- a/translations/pa/9-chat-project/README.md +++ b/translations/pa/9-chat-project/README.md @@ -1,41 +1,35 @@ # ਚੈਟ ਪ੍ਰੋਜੈਕਟ -ਇਹ ਚੈਟ ਪ੍ਰੋਜੈਕਟ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਚੈਟ ਅਸਿਸਟੈਂਟ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। +ਇਹ ਚੈਟ ਪ੍ਰੋਜੈਕਟ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਗਿਟਹੱਬ ਮਾਡਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਚੈਟ ਅਸਿਸਟੈਂਟ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। -ਇਹ ਹੈ ਕਿ ਅੰਤਮ ਪ੍ਰੋਜੈਕਟ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ: +ਇਹ ਹੈ ਕਿ ਤਿਆਰ ਪ੍ਰੋਜੈਕਟ ਕਿਵੇਂ ਲੱਗਦਾ ਹੈ: -
- ਚੈਟ ਐਪ -
+![ਚੈਟ ਐਪ](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pa.png) -ਕੁਝ ਸੰਦਰਭ, ਜਨਰੇਟਿਵ AI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਉਣਾ AI ਬਾਰੇ ਸਿੱਖਣ ਦੀ ਸ਼ੁਰੂਆਤ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ। ਇਸ ਪਾਠ ਦੌਰਾਨ ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਜਨਰੇਟਿਵ AI ਨੂੰ ਇੱਕ ਵੈੱਬ ਐਪ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ। +ਕੁਝ ਸੰਦਰਭ, ਜਨਰੇਟਿਵ AI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਉਣਾ AI ਬਾਰੇ ਸਿੱਖਣ ਦੀ ਸ਼ੁਰੂਆਤ ਕਰਨ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਹੈ। ਇਸ ਪਾਠ ਦੌਰਾਨ ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਜਨਰੇਟਿਵ AI ਨੂੰ ਵੈੱਬ ਐਪ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ। ## ਜਨਰੇਟਿਵ AI ਨਾਲ ਕਨੈਕਟ ਕਰਨਾ -ਬੈਕਐਂਡ ਲਈ, ਅਸੀਂ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਇੱਕ ਵਧੀਆ ਸੇਵਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਮੁਫ਼ਤ ਵਿੱਚ AI ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਇਸਦੇ ਪਲੇਗ੍ਰਾਊਂਡ 'ਤੇ ਜਾਓ ਅਤੇ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਬੈਕਐਂਡ ਭਾਸ਼ਾ ਦੇ ਅਨੁਸਾਰ ਕੋਡ ਲਵੋ। ਇਹ [GitHub ਮਾਡਲ ਪਲੇਗ੍ਰਾਊਂਡ](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 'ਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। +ਬੈਕਐਂਡ ਲਈ, ਅਸੀਂ ਗਿਟਹੱਬ ਮਾਡਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸੇਵਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਮੁਫ਼ਤ ਵਿੱਚ AI ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਇਸਦੇ ਪਲੇਗ੍ਰਾਊਂਡ 'ਤੇ ਜਾਓ ਅਤੇ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਬੈਕਐਂਡ ਭਾਸ਼ਾ ਦੇ ਅਨੁਸਾਰ ਕੋਡ ਲਵੋ। ਇਹ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 'ਤੇ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗਦਾ ਹੈ। -
- GitHub ਮਾਡਲ AI ਪਲੇਗ੍ਰਾਊਂਡ -
+![GitHub ਮਾਡਲਜ਼ AI ਪਲੇਗ੍ਰਾਊਂਡ](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pa.png) -ਜਿਵੇਂ ਅਸੀਂ ਕਿਹਾ, "Code" ਟੈਬ ਅਤੇ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਰਨਟਾਈਮ ਚੁਣੋ। +ਜਿਵੇਂ ਅਸੀਂ ਕਿਹਾ ਸੀ, "ਕੋਡ" ਟੈਬ ਅਤੇ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਰਨਟਾਈਮ ਚੁਣੋ। -
- ਪਲੇਗ੍ਰਾਊਂਡ ਚੋਣ -
+![ਪਲੇਗ੍ਰਾਊਂਡ ਚੋਣ](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pa.png) ### ਪਾਇਥਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ -ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਅਸੀਂ ਪਾਇਥਨ ਚੁਣਦੇ ਹਾਂ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਇਹ ਕੋਡ ਚੁਣਦੇ ਹਾਂ: +ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਅਸੀਂ ਪਾਇਥਨ ਚੁਣਦੇ ਹਾਂ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਇਹ ਕੋਡ ਚੁਣਾਂਗੇ: ```python """Run this model in Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -ਆਓ ਇਸ ਕੋਡ ਨੂੰ ਕੁਝ ਸਾਫ਼ ਕਰੀਏ ਤਾਂ ਜੋ ਇਹ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਹੋ ਸਕੇ: +ਆਓ ਇਸ ਕੋਡ ਨੂੰ ਕੁਝ ਸਾਫ ਕਰੀਏ ਤਾਂ ਜੋ ਇਹ ਦੁਬਾਰਾ ਵਰਤਣ ਯੋਗ ਹੋਵੇ: ```python def call_llm(prompt: str, system_message: str): @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -ਇਸ ਫੰਕਸ਼ਨ `call_llm` ਨਾਲ ਹੁਣ ਅਸੀਂ ਇੱਕ ਪ੍ਰੋੰਪਟ ਅਤੇ ਇੱਕ ਸਿਸਟਮ ਪ੍ਰੋੰਪਟ ਲੈ ਸਕਦੇ ਹਾਂ ਅਤੇ ਫੰਕਸ਼ਨ ਅੰਤ ਵਿੱਚ ਨਤੀਜਾ ਵਾਪਸ ਕਰਦਾ ਹੈ। +ਇਸ ਫੰਕਸ਼ਨ `call_llm` ਨਾਲ ਹੁਣ ਅਸੀਂ ਇੱਕ ਪ੍ਰੌਮਪਟ ਅਤੇ ਇੱਕ ਸਿਸਟਮ ਪ੍ਰੌਮਪਟ ਲੈ ਸਕਦੇ ਹਾਂ ਅਤੇ ਫੰਕਸ਼ਨ ਨਤੀਜਾ ਵਾਪਸ ਕਰਦਾ ਹੈ। ### AI ਅਸਿਸਟੈਂਟ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰੋ -ਜੇ ਤੁਸੀਂ AI ਅਸਿਸਟੈਂਟ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਸਿਸਟਮ ਪ੍ਰੋੰਪਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਭਰ ਕੇ ਇਸਦੀ ਵਿਵਹਾਰਤਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ: +ਜੇ ਤੁਸੀਂ AI ਅਸਿਸਟੈਂਟ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਸਿਸਟਮ ਪ੍ਰੌਮਪਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਭਰ ਕੇ ਇਸਦੀ ਵਰਤਾਰਾ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## ਇਸਨੂੰ ਵੈੱਬ API ਰਾਹੀਂ ਉਜਾਗਰ ਕਰੋ +## ਇਸਨੂੰ ਵੈੱਬ API ਰਾਹੀਂ ਐਕਸਪੋਜ਼ ਕਰੋ -ਵਧੀਆ, ਅਸੀਂ AI ਭਾਗ ਪੂਰਾ ਕਰ ਲਿਆ ਹੈ, ਆਓ ਵੇਖੀਏ ਕਿ ਅਸੀਂ ਇਸਨੂੰ ਵੈੱਬ API ਵਿੱਚ ਕਿਵੇਂ ਜੋੜ ਸਕਦੇ ਹਾਂ। ਵੈੱਬ API ਲਈ, ਅਸੀਂ Flask ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ, ਪਰ ਕੋਈ ਵੀ ਵੈੱਬ ਫਰੇਮਵਰਕ ਚੰਗਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਆਓ ਇਸਦਾ ਕੋਡ ਵੇਖੀਏ: +ਵਧੀਆ, ਸਾਡੇ ਕੋਲ AI ਭਾਗ ਤਿਆਰ ਹੈ, ਆਓ ਵੇਖੀਏ ਕਿ ਅਸੀਂ ਇਸਨੂੰ ਵੈੱਬ API ਵਿੱਚ ਕਿਵੇਂ ਜੋੜ ਸਕਦੇ ਹਾਂ। ਵੈੱਬ API ਲਈ, ਅਸੀਂ Flask ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ, ਪਰ ਕੋਈ ਵੀ ਵੈੱਬ ਫਰੇਮਵਰਕ ਚੰਗਾ ਹੋਵੇਗਾ। ਆਓ ਇਸ ਲਈ ਕੋਡ ਵੇਖੀਏ: ### ਪਾਇਥਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -ਇਥੇ, ਅਸੀਂ ਇੱਕ Flask API ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਇੱਕ ਡਿਫਾਲਟ ਰੂਟ "/" ਅਤੇ "/chat" ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ। ਦੂਜਾ ਰੂਟ ਸਾਡੇ ਫਰੰਟਐਂਡ ਦੁਆਰਾ ਇਸਨੂੰ ਸਵਾਲ ਭੇਜਣ ਲਈ ਵਰਤਿਆ ਜਾਣਾ ਹੈ। +ਇੱਥੇ, ਅਸੀਂ ਇੱਕ ਫਲਾਸਕ API ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਇੱਕ ਡਿਫਾਲਟ ਰੂਟ "/" ਅਤੇ "/chat" ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ। ਦੂਜਾ ਰੂਟ ਸਾਡੇ ਫਰੰਟਐਂਡ ਦੁਆਰਾ ਪ੍ਰਸ਼ਨ ਭੇਜਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। -*llm.py* ਨੂੰ ਜੋੜਨ ਲਈ, ਇਹ ਹੈ ਜੋ ਅਸੀਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: +*llm.py* ਨੂੰ ਜੋੜਨ ਲਈ, ਅਸੀਂ ਇਹ ਕਰਨਾ ਹੈ: - `call_llm` ਫੰਕਸ਼ਨ ਨੂੰ ਇੰਪੋਰਟ ਕਰੋ: @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - ਇਥੇ ਅਸੀਂ ਆਉਣ ਵਾਲੀ ਬੇਨਤੀ ਨੂੰ ਪਾਰਸ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ JSON ਬਾਡੀ ਤੋਂ `message` ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕੇ। ਇਸ ਤੋਂ ਬਾਅਦ ਅਸੀਂ LLM ਨੂੰ ਇਸ ਕਾਲ ਨਾਲ ਕਾਲ ਕਰਦੇ ਹਾਂ: + ਇੱਥੇ ਅਸੀਂ ਆਉਣ ਵਾਲੀ ਰਿਕਵੈਸਟ ਨੂੰ ਪਾਰਸ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ JSON ਬਾਡੀ ਤੋਂ `message` ਪ੍ਰਾਪਰਟੀ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾ ਸਕੇ। ਇਸ ਤੋਂ ਬਾਅਦ ਅਸੀਂ LLM ਨੂੰ ਇਸ ਕਾਲ ਨਾਲ ਕਾਲ ਕਰਦੇ ਹਾਂ: ```python response = call_llm(message, "You are a helpful assistant") @@ -182,11 +176,11 @@ if __name__ == "__main__": ## Cors ਕਨਫਿਗਰ ਕਰੋ -ਅਸੀਂ ਇਹ ਗੱਲ ਦੱਸਣੀ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਕੁਝ Cors ਸੈਟਅਪ ਕੀਤਾ ਹੈ, ਕ੍ਰਾਸ-ਓਰਿਜਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕਿਉਂਕਿ ਸਾਡਾ ਬੈਕਐਂਡ ਅਤੇ ਫਰੰਟਐਂਡ ਵੱਖ-ਵੱਖ ਪੋਰਟਾਂ 'ਤੇ ਚੱਲੇਗਾ, ਸਾਨੂੰ ਫਰੰਟਐਂਡ ਨੂੰ ਬੈਕਐਂਡ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣੀ ਪਵੇਗੀ। +ਸਾਨੂੰ ਇਹ ਗੱਲ ਦੱਸਣੀ ਚਾਹੀਦੀ ਹੈ ਕਿ ਅਸੀਂ ਕੁਝ CORS (ਕਰਾਸ-ਓਰਿਜਿਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ) ਸੈਟਅੱਪ ਕੀਤਾ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕਿਉਂਕਿ ਸਾਡਾ ਬੈਕਐਂਡ ਅਤੇ ਫਰੰਟਐਂਡ ਵੱਖ-ਵੱਖ ਪੋਰਟਾਂ 'ਤੇ ਚੱਲਣਗੇ, ਸਾਨੂੰ ਫਰੰਟਐਂਡ ਨੂੰ ਬੈਕਐਂਡ ਵਿੱਚ ਕਾਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣੀ ਪਵੇਗੀ। ### ਪਾਇਥਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ -*api.py* ਵਿੱਚ ਇੱਕ ਕੋਡ ਦਾ ਟੁਕੜਾ ਹੈ ਜੋ ਇਸਨੂੰ ਸੈਟਅਪ ਕਰਦਾ ਹੈ: +*api.py* ਵਿੱਚ ਇੱਕ ਕੋਡ ਦਾ ਟੁਕੜਾ ਹੈ ਜੋ ਇਸਨੂੰ ਸੈਟਅੱਪ ਕਰਦਾ ਹੈ: ```python from flask_cors import CORS @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -ਇਸ ਸਮੇਂ ਇਹ "*" ਨੂੰ ਆਗਿਆ ਦੇਣ ਲਈ ਸੈਟਅਪ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਸਾਰੇ ਔਰਿਜਿਨ ਹਨ ਅਤੇ ਇਹ ਕੁਝ ਅਸੁਰੱਖਿਅਤ ਹੈ। ਜਦੋਂ ਅਸੀਂ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਜਾਂਦੇ ਹਾਂ ਤਾਂ ਇਸਨੂੰ ਸੀਮਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। +ਇਸ ਸਮੇਂ ਇਹ "*" ਲਈ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ ਸਾਰੇ ਓਰਿਜਿਨਜ਼ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਅਤੇ ਇਹ ਕੁਝ ਅਸੁਰੱਖਿਅਤ ਹੈ। ਜਦੋਂ ਅਸੀਂ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਜਾਵਾਂਗੇ ਤਾਂ ਇਸਨੂੰ ਸੀਮਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ## ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਚਲਾਓ -ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਆਪਣਾ ਬੈਕਐਂਡ ਅਤੇ ਫਿਰ ਆਪਣਾ ਫਰੰਟਐਂਡ ਸ਼ੁਰੂ ਕਰਨਾ ਪਵੇਗਾ। +ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਆਪਣਾ ਬੈਕਐਂਡ ਅਤੇ ਫਿਰ ਆਪਣਾ ਫਰੰਟਐਂਡ ਸ਼ੁਰੂ ਕਰਨਾ ਪਵੇਗਾ। ### ਪਾਇਥਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ -ਠੀਕ ਹੈ, ਤਾਂ ਸਾਡੇ ਕੋਲ *llm.py* ਅਤੇ *api.py* ਹੈ, ਅਸੀਂ ਇਸਨੂੰ ਬੈਕਐਂਡ ਨਾਲ ਕਿਵੇਂ ਚਲਾਉਂਦੇ ਹਾਂ? ਖੈਰ, ਦੋ ਚੀਜ਼ਾਂ ਹਨ ਜੋ ਅਸੀਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: +ਠੀਕ ਹੈ, ਸਾਡੇ ਕੋਲ *llm.py* ਅਤੇ *api.py* ਹੈ, ਅਸੀਂ ਇਸਨੂੰ ਬੈਕਐਂਡ ਨਾਲ ਕਿਵੇਂ ਚਲਾਉਂਦੇ ਹਾਂ? ਖੈਰ, ਦੋ ਚੀਜ਼ਾਂ ਕਰਨੀਆਂ ਪੈਣਗੀਆਂ: -- Dependencies ਇੰਸਟਾਲ ਕਰੋ: +- ਡਿਪੈਂਡੈਂਸੀਜ਼ ਇੰਸਟਾਲ ਕਰੋ: ```sh cd backend @@ -215,17 +209,17 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- API ਸ਼ੁਰੂ ਕਰੋ +- API ਸ਼ੁਰੂ ਕਰੋ: ```sh python api.py ``` - ਜੇ ਤੁਸੀਂ Codespaces ਵਿੱਚ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਐਡੀਟਰ ਦੇ ਹੇਠਲੇ ਭਾਗ ਵਿੱਚ ਪੋਰਟਸ 'ਤੇ ਜਾਣ ਦੀ ਲੋੜ ਹੈ, ਇਸ 'ਤੇ ਰਾਈਟ-ਕਲਿਕ ਕਰੋ ਅਤੇ "Port Visibility" 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ "Public" ਚੁਣੋ। + ਜੇ ਤੁਸੀਂ ਕੋਡਸਪੇਸ ਵਿੱਚ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਐਡੀਟਰ ਦੇ ਹੇਠਲੇ ਹਿੱਸੇ ਵਿੱਚ ਪੋਰਟਸ 'ਤੇ ਜਾਣਾ ਪਵੇਗਾ, ਇਸ 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ ਅਤੇ "ਪੋਰਟ ਵਿਜ਼ਿਬਿਲਿਟੀ" 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ "ਪਬਲਿਕ" ਚੁਣੋ। ### ਫਰੰਟਐਂਡ 'ਤੇ ਕੰਮ ਕਰੋ -ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ API ਚਲ ਰਹੀ ਹੈ, ਆਓ ਇਸ ਲਈ ਇੱਕ ਫਰੰਟਐਂਡ ਬਣਾਈਏ। ਇੱਕ ਬੇਅਰ ਮਿਨੀਮਮ ਫਰੰਟਐਂਡ ਜਿਸਨੂੰ ਅਸੀਂ ਕਦਮ-ਦਰ-ਕਦਮ ਸੁਧਾਰਾਂਗੇ। *frontend* ਫੋਲਡਰ ਵਿੱਚ, ਹੇਠਾਂ ਦਿੱਤੇ ਨੂੰ ਬਣਾਓ: +ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ API ਚਲ ਰਹੀ ਹੈ, ਆਓ ਇਸ ਲਈ ਇੱਕ ਫਰੰਟਐਂਡ ਬਣਾਈਏ। ਇੱਕ ਬੇਸਿਕ ਫਰੰਟਐਂਡ ਜੋ ਅਸੀਂ ਕਦਮ-ਦਰ-ਕਦਮ ਸੁਧਾਰਾਂਗੇ। ਇੱਕ *frontend* ਫੋਲਡਰ ਵਿੱਚ, ਇਹ ਬਣਾਓ: ```text backend/ @@ -235,7 +229,7 @@ app.js styles.css ``` -ਆਓ **index.html** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ: +**index.html** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ: ```html @@ -253,7 +247,7 @@ styles.css ``` -ਉਪਰੋਕਤ ਚੈਟ ਵਿੰਡੋ ਨੂੰ ਸਹਾਇਕ ਕਰਨ ਲਈ ਬਿਲਕੁਲ ਘੱਟੋ-ਘੱਟ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ ਇੱਕ ਟੈਕਸਟਏਰੀਆ ਸ਼ਾਮਲ ਹੈ ਜਿੱਥੇ ਸੁਨੇਹੇ ਰੇਂਡਰ ਕੀਤੇ ਜਾਣਗੇ, ਇੱਕ ਇਨਪੁਟ ਜਿੱਥੇ ਸੁਨੇਹਾ ਟਾਈਪ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਇੱਕ ਬਟਨ ਜੋ ਤੁਹਾਡੇ ਸੁਨੇਹੇ ਨੂੰ ਬੈਕਐਂਡ ਨੂੰ ਭੇਜਣ ਲਈ ਹੈ। ਆਓ *app.js* ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਕੋਡ ਨੂੰ ਵੇਖੀਏ। +ਉਪਰੋਕਤ ਘੱਟੋ-ਘੱਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਚੈਟ ਵਿੰਡੋ ਨੂੰ ਸਹਾਇਕ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ ਇੱਕ ਟੈਕਸਟਏਰੀਆ ਹੈ ਜਿੱਥੇ ਸੁਨੇਹੇ ਰੈਂਡਰ ਕੀਤੇ ਜਾਣਗੇ, ਇੱਕ ਇਨਪੁਟ ਜਿੱਥੇ ਸੁਨੇਹਾ ਲਿਖਿਆ ਜਾਵੇਗਾ ਅਤੇ ਇੱਕ ਬਟਨ ਜੋ ਤੁਹਾਡੇ ਸੁਨੇਹੇ ਨੂੰ ਬੈਕਐਂਡ ਨੂੰ ਭੇਜੇਗਾ। ਆਓ ਅਗਲੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਵੇਖੀਏ *app.js* ਵਿੱਚ। **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -ਆਓ ਕੋਡ ਨੂੰ ਹਰੇਕ ਸੈਕਸ਼ਨ ਦੇ ਅਨੁਸਾਰ ਸਮਝੀਏ: +ਆਓ ਕੋਡ ਨੂੰ ਹਰੇਕ ਭਾਗ ਵਿੱਚ ਵੇਖੀਏ: -- 1) ਇਥੇ ਅਸੀਂ ਆਪਣੇ ਸਾਰੇ ਐਲੀਮੈਂਟਸ ਦਾ ਰਿਫਰੈਂਸ ਲੈਂਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ ਕੋਡ ਵਿੱਚ ਰਿਫਰ ਕਰਾਂਗੇ। -- 2) ਇਸ ਸੈਕਸ਼ਨ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਬਿਲਟ-ਇਨ `fetch` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਸਾਡੇ ਬੈਕਐਂਡ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। -- 3) `appendMessage` ਸਹਾਇਕ ਹੈ ਜਵਾਬਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਵਿੱਚ ਅਤੇ ਜੋ ਤੁਸੀਂ ਇੱਕ ਯੂਜ਼ਰ ਵਜੋਂ ਟਾਈਪ ਕਰਦੇ ਹੋ। -- 4) ਇਥੇ ਅਸੀਂ submit ਇਵੈਂਟ ਨੂੰ ਸੁਣਦੇ ਹਾਂ ਅਤੇ ਅਸੀਂ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਪੜ੍ਹਦੇ ਹਾਂ, ਯੂਜ਼ਰ ਦਾ ਸੁਨੇਹਾ ਟੈਕਸਟਏਰੀਆ ਵਿੱਚ ਰੱਖਦੇ ਹਾਂ, API ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਟੈਕਸਟਏਰੀਆ ਵਿੱਚ ਜਵਾਬ ਰੇਂਡਰ ਕਰਦੇ ਹਾਂ। +- 1) ਇੱਥੇ ਅਸੀਂ ਸਾਰੇ ਐਲੀਮੈਂਟਸ ਦਾ ਹਵਾਲਾ ਲੈਂਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ ਕੋਡ ਵਿੱਚ ਵਰਤਾਂਗੇ। +- 2) ਇਸ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਬਿਲਟ-ਇਨ `fetch` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਸਾਡੇ ਬੈਕਐਂਡ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। +- 3) `appendMessage` ਸਹਾਇਕ ਹੈ ਜਵਾਬਾਂ ਅਤੇ ਜੋ ਤੁਸੀਂ ਯੂਜ਼ਰ ਵਜੋਂ ਲਿਖਦੇ ਹੋ, ਦੋਹਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ। +- 4) ਇੱਥੇ ਅਸੀਂ ਸਬਮਿਟ ਇਵੈਂਟ ਨੂੰ ਸੁਣਦੇ ਹਾਂ ਅਤੇ ਅਸੀਂ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਪੜ੍ਹਦੇ ਹਾਂ, ਯੂਜ਼ਰ ਦਾ ਸੁਨੇਹਾ ਟੈਕਸਟਏਰੀਆ ਵਿੱਚ ਰੱਖਦੇ ਹਾਂ, API ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਉਸ ਜਵਾਬ ਨੂੰ ਟੈਕਸਟਏਰੀਆ ਵਿੱਚ ਰੈਂਡਰ ਕਰਦੇ ਹਾਂ। -ਆਓ ਅਗਲੇ ਸਟਾਈਲਿੰਗ ਨੂੰ ਵੇਖੀਏ, ਇਥੇ ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੀ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਬਣਾਉਣ ਲਈ ਪੂਰੀ ਛੂਟ ਹੈ, ਪਰ ਇਥੇ ਕੁਝ ਸੁਝਾਅ ਹਨ: +ਆਓ ਅਗਲੇ ਸਟਾਈਲਿੰਗ ਨੂੰ ਵੇਖੀਏ, ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਬਹੁਤ ਕੁਝ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਇੱਥੇ ਕੁਝ ਸੁਝਾਅ ਹਨ: **styles.css** @@ -338,18 +332,18 @@ styles.css } ``` -ਇਹ ਤਿੰਨ ਕਲਾਸਾਂ ਨਾਲ, ਤੁਸੀਂ ਸੁਨੇਹਿਆਂ ਨੂੰ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ ਇਸਦੇ ਆਧਾਰ 'ਤੇ ਕਿ ਇਹ ਸਹਾਇਕ ਤੋਂ ਆਉਂਦੇ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਵਜੋਂ ਯੂਜ਼ਰ। ਜੇ ਤੁਸੀਂ ਪ੍ਰੇਰਿਤ ਹੋਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ `solution/frontend/styles.css` ਫੋਲਡਰ ਨੂੰ ਵੇਖੋ। +ਇਹ ਤਿੰਨ ਕਲਾਸਾਂ ਨਾਲ, ਤੁਸੀਂ ਸੁਨੇਹਿਆਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ ਇਸ ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ ਕਿ ਉਹ ਅਸਿਸਟੈਂਟ ਤੋਂ ਆ ਰਹੇ ਹਨ ਜਾਂ ਯੂਜ਼ਰ ਵਜੋਂ ਤੁਹਾਡੇ ਤੋਂ। ਜੇ ਤੁਸੀਂ ਪ੍ਰੇਰਿਤ ਹੋਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ `solution/frontend/styles.css` ਫੋਲਡਰ ਨੂੰ ਵੇਖੋ। ### ਬੇਸ URL ਬਦਲੋ -ਇਥੇ ਇੱਕ ਚੀਜ਼ ਸੀ ਜੋ ਅਸੀਂ ਸੈਟ ਨਹੀਂ ਕੀਤੀ ਸੀ ਅਤੇ ਉਹ ਸੀ `BASE_URL`, ਇਹ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਸ਼ੁਰੂ ਹੋਣ ਤੱਕ ਪਤਾ ਨਹੀਂ ਹੁੰਦੀ। ਇਸਨੂੰ ਸੈਟ ਕਰਨ ਲਈ: +ਇੱਥੇ ਇੱਕ ਚੀਜ਼ ਸੀ ਜੋ ਅਸੀਂ ਸੈਟ ਨਹੀਂ ਕੀਤੀ ਸੀ ਅਤੇ ਉਹ ਸੀ `BASE_URL`, ਇਹ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੱਕ ਪਤਾ ਨਹੀਂ ਹੁੰਦੀ। ਇਸਨੂੰ ਸੈਟ ਕਰਨ ਲਈ: - ਜੇ ਤੁਸੀਂ API ਨੂੰ ਲੋਕਲ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ `http://localhost:5000`। -- ਜੇ Codespaces ਵਿੱਚ ਚਲਾਇਆ ਜਾਵੇ, ਤਾਂ ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ "[name]app.github.dev"। +- ਜੇ ਕੋਡਸਪੇਸ ਵਿੱਚ ਚਲਾਇਆ ਜਾਵੇ, ਤਾਂ ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗੇਗਾ "[name]app.github.dev"। ## ਅਸਾਈਨਮੈਂਟ -ਆਪਣਾ ਫੋਲਡਰ *project* ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਤਰ੍ਹਾਂ ਸਮੱਗਰੀ ਹੋਵੇ: +ਆਪਣਾ ਇੱਕ ਫੋਲਡਰ *project* ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਸਮੱਗਰੀ ਹੋਵੇ: ```text project/ @@ -361,19 +355,19 @@ project/ ... ``` -ਉਪਰੋਕਤ ਤੋਂ ਦਿੱਤੇ ਨਿਰਦੇਸ਼ਾਂ ਤੋਂ ਸਮੱਗਰੀ ਕਾਪੀ ਕਰੋ ਪਰ ਆਪਣੀ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਲਈ ਮੁਫ਼ਤ ਮਹਿਸੂਸ ਕਰੋ। +ਉਪਰੋਕਤ ਤੋਂ ਦੱਸਿਆ ਗਿਆ ਸਮੱਗਰੀ ਕਾਪੀ ਕਰੋ ਪਰ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਲਈ ਮੁਫ਼ਤ ਮਹਿਸੂਸ ਕਰੋ। ## ਹੱਲ -[Solution](./solution/README.md) +[ਹੱਲ](./solution/README.md) ## ਬੋਨਸ -AI ਅਸਿਸਟੈਂਟ ਦੀ ਪर्सਨਾਲਿਟੀ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। +AI ਅਸਿਸਟੈਂਟ ਦੀ ਪਸੰਸ਼ਾ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ### ਪਾਇਥਨ ਲਈ -ਜਦੋਂ ਤੁਸੀਂ *api.py* ਵਿੱਚ `call_llm` ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਦੂਜੇ ਆਰਗੂਮੈਂਟ ਨੂੰ ਆਪਣੀ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਬਦਲ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ: +ਜਦੋਂ ਤੁਸੀਂ *api.py* ਵਿੱਚ `call_llm` ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦੂਜੇ ਆਰਗੂਮੈਂਟ ਨੂੰ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਬਦਲ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਣ ਲਈ: ```python call_llm(message, "You are Captain Picard") @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### ਫਰੰਟਐਂਡ -CSS ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਆਪਣੀ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਬਦਲੋ, ਇਸ ਲਈ *index.html* ਅਤੇ *styles.css* ਵਿੱਚ ਬਦਲਾਅ ਕਰੋ। +CSS ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਵੀ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਬਦਲੋ, ਇਸ ਲਈ *index.html* ਅਤੇ *styles.css* ਵਿੱਚ ਬਦਲਾਅ ਕਰੋ। ## ਸਾਰ -ਵਧੀਆ, ਤੁਸੀਂ ਸ਼ੁਰੂ ਤੋਂ ਸਿੱਖਿਆ ਕਿ AI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪर्सਨਲ ਅਸਿਸਟੈਂਟ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਅਸੀਂ ਇਹ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਪਾਇਥਨ ਵਿੱਚ ਬੈਕਐਂਡ ਅਤੇ HTML, CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਫਰੰਟਐਂਡ ਨਾਲ ਕੀਤਾ। +ਵਧੀਆ, ਤੁਸੀਂ ਸ਼ੁਰੂ ਤੋਂ ਸਿੱਖਿਆ ਕਿ AI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਿੱਜੀ ਅਸਿਸਟੈਂਟ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਅਸੀਂ ਇਹ ਗਿਟਹੱਬ ਮਾਡਲਜ਼, ਪਾਇਥਨ ਵਿੱਚ ਬੈਕਐਂਡ ਅਤੇ HTML, CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਫਰੰਟਐਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੀਤਾ। -## Codespaces ਨਾਲ ਸੈਟਅਪ ਕਰੋ +## ਕੋਡਸਪੇਸ ਨਾਲ ਸੈਟਅੱਪ ਕਰੋ -- ਜਾਓ: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- ਟੈਮਪਲੇਟ ਤੋਂ ਬਣਾਓ (ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਤੁਸੀਂ GitHub ਵਿੱਚ ਲੌਗਇਨ ਹੋ): +- ਜਾਓ: [ਵੈੱਬ ਡੈਵ ਫਾਰ ਬਿਗਿਨਰਜ਼ ਰਿਪੋ](https://github.com/microsoft/Web-Dev-For-Beginners) +- ਇੱਕ ਟੈਮਪਲੇਟ ਤੋਂ ਬਣਾਓ (ਪੱਕਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਗਿਟਹੱਬ ਵਿੱਚ ਲੌਗਇਨ ਹੋ): ![ਟੈਮਪਲੇਟ ਤੋਂ ਬਣਾਓ](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pa.png) -- ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਰਿਪੋ ਵਿੱਚ ਹੋ, ਇੱਕ Codespace ਬਣਾਓ: +- ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਰਿਪੋ ਵਿੱਚ ਹੋ, ਇੱਕ ਕੋਡਸਪੇਸ ਬਣਾਓ: - ![Codespace ਬਣਾਓ](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pa.png) + ![ਕੋਡਸਪੇਸ ਬਣਾਓ](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pa.png) - ਇਹ ਇੱਕ ਵਾਤਾਵਰਣ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਹੁਣ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। + ਇਹ ਇੱਕ ਐਨਵਾਇਰਨਮੈਂਟ ਸ਼ੁਰੂ ਕਰੇਗਾ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਹੁਣ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। --- -**ਅਸਵੀਕਰਤਾ**: -ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਨਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file +**ਅਸਵੀਕਤੀ**: +ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file diff --git a/translations/pl/9-chat-project/README.md b/translations/pl/9-chat-project/README.md index c117374f..dc4dbad3 100644 --- a/translations/pl/9-chat-project/README.md +++ b/translations/pl/9-chat-project/README.md @@ -1,41 +1,35 @@ # Projekt czatu -Ten projekt czatu pokazuje, jak zbudować Asystenta Czatu korzystając z GitHub Models. +Ten projekt czatu pokazuje, jak zbudować Asystenta Czatu przy użyciu GitHub Models. -Tak wygląda ukończony projekt: +Oto jak wygląda ukończony projekt: -
- Aplikacja czatu -
+![Aplikacja czatu](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pl.png) -Kilka słów wstępu: budowanie asystentów czatu przy użyciu generatywnej AI to świetny sposób na rozpoczęcie nauki o sztucznej inteligencji. W trakcie tej lekcji nauczysz się, jak zintegrować generatywną AI z aplikacją internetową. Zaczynajmy! +Kilka słów wstępu: budowanie asystentów czatu z wykorzystaniem generatywnej AI to świetny sposób na rozpoczęcie nauki o sztucznej inteligencji. W tej lekcji nauczysz się, jak zintegrować generatywną AI z aplikacją webową. Zaczynajmy! ## Połączenie z generatywną AI -Na backendzie używamy GitHub Models. To świetna usługa, która pozwala korzystać z AI za darmo. Przejdź do jej playground i pobierz kod odpowiadający wybranemu przez Ciebie językowi backendu. Tak wygląda [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +Na backendzie używamy GitHub Models. To świetna usługa, która pozwala korzystać z AI za darmo. Przejdź do jej playground i skopiuj kod odpowiadający wybranemu językowi backendu. Oto jak wygląda [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground): -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pl.png) Jak wspomniano, wybierz zakładkę "Code" i swój preferowany runtime. -
- Wybór playground -
+![Wybór w playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pl.png) -### Korzystanie z Pythona +### Użycie Pythona -W tym przypadku wybieramy Python, co oznacza, że wybieramy ten kod: +W tym przypadku wybieramy Pythona, co oznacza, że wybieramy ten kod: ```python """Run this model in Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Oczyśćmy ten kod, aby był bardziej użyteczny: +Oczyśćmy ten kod, aby był bardziej uniwersalny: ```python def call_llm(prompt: str, system_message: str): @@ -96,11 +90,11 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -Dzięki funkcji `call_llm` możemy teraz podać prompt i system prompt, a funkcja zwróci wynik. +Dzięki tej funkcji `call_llm` możemy teraz podać prompt i system prompt, a funkcja zwróci wynik. -### Personalizacja Asystenta AI +### Dostosowanie Asystenta AI -Jeśli chcesz dostosować zachowanie Asystenta AI, możesz określić, jak ma się zachowywać, wypełniając system prompt w ten sposób: +Jeśli chcesz dostosować asystenta AI, możesz określić, jak ma się zachowywać, wypełniając system prompt w ten sposób: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## Udostępnienie przez Web API -Świetnie, mamy część AI gotową, zobaczmy, jak możemy zintegrować ją z Web API. Dla Web API wybieramy Flask, ale każdy framework webowy powinien być odpowiedni. Oto kod: +Świetnie, mamy część AI gotową, zobaczmy, jak możemy zintegrować ją z Web API. W przypadku Web API wybieramy Flask, ale każdy framework webowy będzie odpowiedni. Oto kod: -### Korzystanie z Pythona +### Użycie Pythona ```python # api.py @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Tutaj tworzymy API Flask i definiujemy domyślną trasę "/" oraz "/chat". Ta ostatnia jest przeznaczona dla naszego frontend, aby przesyłać pytania. +Tutaj tworzymy API we Flasku i definiujemy domyślną trasę "/" oraz "/chat". Ta druga jest przeznaczona do komunikacji z frontendem, aby przesyłać pytania. Aby zintegrować *llm.py*, musimy zrobić następujące kroki: @@ -152,7 +146,7 @@ Aby zintegrować *llm.py*, musimy zrobić następujące kroki: from flask import Flask, request ``` -- Wywołać ją z trasy "/chat": +- Wywołać ją w trasie "/chat": ```python @app.route("/hello", methods=["POST"]) @@ -167,7 +161,7 @@ Aby zintegrować *llm.py*, musimy zrobić następujące kroki: }) ``` - Tutaj analizujemy przychodzące żądanie, aby pobrać właściwość `message` z ciała JSON. Następnie wywołujemy LLM za pomocą tego wywołania: + Tutaj analizujemy przychodzące żądanie, aby pobrać właściwość `message` z ciała JSON. Następnie wywołujemy LLM w ten sposób: ```python response = call_llm(message, "You are a helpful assistant") @@ -182,11 +176,11 @@ Aby zintegrować *llm.py*, musimy zrobić następujące kroki: ## Konfiguracja Cors -Warto wspomnieć, że ustawiamy coś takiego jak CORS, czyli cross-origin resource sharing. Oznacza to, że ponieważ nasz backend i frontend będą działać na różnych portach, musimy pozwolić frontendowi na wywoływanie backendu. +Warto wspomnieć, że ustawiliśmy coś takiego jak CORS, czyli współdzielenie zasobów między różnymi domenami. Oznacza to, że ponieważ nasz backend i frontend będą działać na różnych portach, musimy pozwolić frontendowi na komunikację z backendem. -### Korzystanie z Pythona +### Użycie Pythona -W pliku *api.py* znajduje się kod, który to ustawia: +W pliku *api.py* znajduje się fragment kodu, który to ustawia: ```python from flask_cors import CORS @@ -195,15 +189,15 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Obecnie jest ustawiony na "*" (wszystkie źródła), co jest trochę niebezpieczne. Powinniśmy to ograniczyć, gdy przejdziemy do produkcji. +Obecnie jest ustawione na "*" (wszystkie domeny), co jest nieco niebezpieczne. Powinniśmy to ograniczyć, gdy przejdziemy do produkcji. ## Uruchomienie projektu Aby uruchomić projekt, najpierw musisz uruchomić backend, a potem frontend. -### Korzystanie z Pythona +### Użycie Pythona -Ok, mamy *llm.py* i *api.py*. Jak sprawić, żeby działały z backendem? Są dwa kroki: +Mamy *llm.py* i *api.py*, jak to uruchomić na backendzie? Są dwa kroki: - Zainstaluj zależności: @@ -221,7 +215,7 @@ Ok, mamy *llm.py* i *api.py*. Jak sprawić, żeby działały z backendem? Są dw python api.py ``` - Jeśli korzystasz z Codespaces, musisz przejść do sekcji Ports w dolnej części edytora, kliknąć prawym przyciskiem myszy i wybrać "Port Visibility", a następnie "Public". + Jeśli korzystasz z Codespaces, przejdź do sekcji Ports w dolnej części edytora, kliknij prawym przyciskiem myszy i wybierz "Port Visibility", a następnie "Public". ### Praca nad frontendem @@ -253,7 +247,7 @@ Zacznijmy od **index.html**: ``` -Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa się z pola tekstowego, w którym będą wyświetlane wiadomości, pola wejściowego do wpisywania wiadomości oraz przycisku do wysyłania wiadomości do backendu. Teraz przejdźmy do JavaScript w pliku *app.js*. +Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa się z pola tekstowego, w którym będą wyświetlane wiadomości, pola wejściowego do wpisywania wiadomości oraz przycisku do wysyłania wiadomości do backendu. Teraz spójrzmy na JavaScript w pliku *app.js*. **app.js** @@ -312,8 +306,8 @@ Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa si Omówmy kod sekcja po sekcji: -- 1) Tutaj uzyskujemy referencje do wszystkich elementów, które będziemy później używać w kodzie. -- 2) W tej sekcji tworzymy funkcję, która korzysta z wbudowanej metody `fetch` do wywoływania naszego backendu. +- 1) Tutaj uzyskujemy referencje do wszystkich elementów, których będziemy używać w kodzie. +- 2) W tej sekcji tworzymy funkcję, która korzysta z wbudowanej metody `fetch`, aby wywołać nasze API. - 3) `appendMessage` pomaga dodawać odpowiedzi oraz wiadomości wpisane przez użytkownika. - 4) Tutaj nasłuchujemy zdarzenia submit, odczytujemy pole wejściowe, umieszczamy wiadomość użytkownika w polu tekstowym, wywołujemy API i renderujemy odpowiedź w polu tekstowym. @@ -338,18 +332,18 @@ Teraz przejdźmy do stylizacji. Możesz tutaj zaszaleć i dostosować wygląd we } ``` -Dzięki tym trzem klasom możesz stylizować wiadomości w zależności od ich pochodzenia – od asystenta lub od użytkownika. Jeśli potrzebujesz inspiracji, zajrzyj do folderu `solution/frontend/styles.css`. +Dzięki tym trzem klasom możesz stylizować wiadomości w zależności od tego, czy pochodzą od asystenta, czy od użytkownika. Jeśli potrzebujesz inspiracji, zajrzyj do folderu `solution/frontend/styles.css`. ### Zmiana Base Url -Jest jedna rzecz, której tutaj nie ustawiliśmy, a mianowicie `BASE_URL`. Nie jest ona znana, dopóki backend nie zostanie uruchomiony. Aby ją ustawić: +Jest jedna rzecz, której jeszcze nie ustawiliśmy, a mianowicie `BASE_URL`. Nie jest ona znana, dopóki backend nie zostanie uruchomiony. Aby ją ustawić: -- Jeśli uruchamiasz API lokalnie, powinno być ustawione na coś w rodzaju `http://localhost:5000`. -- Jeśli uruchamiasz w Codespaces, powinno wyglądać jak "[name]app.github.dev". +- Jeśli uruchamiasz API lokalnie, powinna być ustawiona na coś w stylu `http://localhost:5000`. +- Jeśli uruchamiasz w Codespaces, powinna wyglądać mniej więcej tak: "[name]app.github.dev". ## Zadanie -Stwórz własny folder *project* z zawartością jak poniżej: +Utwórz własny folder *project* z zawartością jak poniżej: ```text project/ @@ -361,15 +355,15 @@ project/ ... ``` -Skopiuj zawartość zgodnie z instrukcjami powyżej, ale możesz dostosować ją według własnych upodobań. +Skopiuj zawartość zgodnie z powyższymi instrukcjami, ale możesz dostosować ją według własnych upodobań. ## Rozwiązanie -[Rozwiązanie](./solution/README.md) +[Solution](./solution/README.md) ## Bonus -Spróbuj zmienić osobowość Asystenta AI. +Spróbuj zmienić osobowość asystenta AI. ### Dla Pythona @@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard") ### Frontend -Zmień również CSS i tekst według własnych upodobań, dokonując zmian w *index.html* i *styles.css*. +Zmień również CSS i tekst według własnych upodobań, wprowadzając zmiany w *index.html* i *styles.css*. ## Podsumowanie -Świetnie, nauczyłeś się od podstaw, jak stworzyć osobistego asystenta korzystając z AI. Zrobiliśmy to używając GitHub Models, backendu w Pythonie oraz frontendu w HTML, CSS i JavaScript. +Świetnie, nauczyłeś się od podstaw, jak stworzyć osobistego asystenta z wykorzystaniem AI. Zrobiliśmy to przy użyciu GitHub Models, backendu w Pythonie oraz frontendu w HTML, CSS i JavaScript. -## Konfiguracja z Codespaces +## Konfiguracja w Codespaces - Przejdź do: [Repozytorium Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) -- Utwórz z szablonu (upewnij się, że jesteś zalogowany na GitHub) w prawym górnym rogu: +- Utwórz repozytorium z szablonu (upewnij się, że jesteś zalogowany na GitHubie) w prawym górnym rogu: ![Utwórz z szablonu](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pl.png) -- Po przejściu do swojego repozytorium, utwórz Codespace: +- Po wejściu do repozytorium utwórz Codespace: ![Utwórz Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pl.png) diff --git a/translations/pt/9-chat-project/README.md b/translations/pt/9-chat-project/README.md index 7495ca5f..98916fce 100644 --- a/translations/pt/9-chat-project/README.md +++ b/translations/pt/9-chat-project/README.md @@ -1,39 +1,33 @@ # Projeto de Chat -Este projeto de chat mostra como criar um Assistente de Chat utilizando os Modelos do GitHub. +Este projeto de chat mostra como construir um Assistente de Chat utilizando os Modelos do GitHub. Aqui está como o projeto finalizado se parece: -
- Aplicação de Chat -
+![Aplicação de Chat](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pt.png) -Para contextualizar, criar assistentes de chat utilizando IA generativa é uma ótima forma de começar a aprender sobre IA. O que vais aprender é como integrar IA generativa numa aplicação web ao longo desta lição. Vamos começar. +Para contextualizar, construir assistentes de chat usando IA generativa é uma ótima maneira de começar a aprender sobre IA. O que você aprenderá nesta lição é como integrar IA generativa em uma aplicação web. Vamos começar. -## Conectar à IA generativa +## Conectando à IA generativa -Para o backend, estamos a usar os Modelos do GitHub. É um excelente serviço que permite usar IA gratuitamente. Vai ao playground e obtém o código que corresponde à linguagem de backend escolhida. Aqui está como se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Para o backend, estamos a usar os Modelos do GitHub. É um ótimo serviço que permite usar IA gratuitamente. Aceda ao playground e copie o código correspondente à linguagem de backend que escolheu. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![Playground de IA dos Modelos do GitHub](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pt.png) -Como mencionado, seleciona o separador "Code" e o runtime escolhido. +Como mencionado, selecione o separador "Code" e o runtime que escolheu. -
- Escolha no playground -
+![Escolha no Playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pt.png) -### Usar Python +### Usando Python Neste caso, selecionamos Python, o que significa que escolhemos este código: @@ -100,7 +94,7 @@ Com esta função `call_llm`, agora podemos passar um prompt e um prompt de sist ### Personalizar o Assistente de IA -Se quiseres personalizar o assistente de IA, podes especificar como queres que ele se comporte preenchendo o prompt de sistema desta forma: +Se quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o prompt de sistema desta forma: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -110,7 +104,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i Ótimo, já temos a parte de IA concluída. Vamos ver como podemos integrá-la numa API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código: -### Usar Python +### Usando Python ```python # api.py @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo frontend para enviar perguntas. +Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última será usada pelo nosso frontend para enviar perguntas. Para integrar o *llm.py*, aqui está o que precisamos fazer: @@ -167,7 +161,7 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer: }) ``` - Aqui analisamos a solicitação recebida para obter a propriedade `message` do corpo JSON. Depois disso, chamamos o LLM com esta chamada: + Aqui analisamos o pedido recebido para obter a propriedade `message` do corpo JSON. Em seguida, chamamos o LLM com esta chamada: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,13 +172,13 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer: }) ``` -Ótimo, agora fizemos o que era necessário. +Ótimo, agora temos tudo o que precisamos. ## Configurar Cors -Devemos mencionar que configuramos algo como CORS, partilha de recursos entre origens. Isto significa que, como o nosso backend e frontend vão correr em portas diferentes, precisamos permitir que o frontend aceda ao backend. +Devemos mencionar que configuramos algo como CORS, ou partilha de recursos entre origens. Isto significa que, como o nosso backend e frontend irão correr em portas diferentes, precisamos permitir que o frontend aceda ao backend. -### Usar Python +### Usando Python Há um trecho de código em *api.py* que configura isto: @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Neste momento, está configurado para permitir "*" que são todas as origens, e isso é um pouco inseguro. Devemos restringir isto quando formos para produção. +Atualmente, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringi-lo quando formos para produção. ## Executar o projeto -Para executar o projeto, precisas iniciar primeiro o backend e depois o frontend. +Para executar o projeto, primeiro precisa iniciar o backend e depois o frontend. -### Usar Python +### Usando Python -Ok, então temos *llm.py* e *api.py*. Como podemos fazer isto funcionar com um backend? Bem, há duas coisas que precisamos fazer: +Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer: -- Instalar dependências: +- Instalar as dependências: ```sh cd backend @@ -221,11 +215,11 @@ Ok, então temos *llm.py* e *api.py*. Como podemos fazer isto funcionar com um b python api.py ``` - Se estiveres a usar Codespaces, precisas ir a Ports na parte inferior do editor, clicar com o botão direito e selecionar "Port Visibility" e escolher "Public". + Se estiver a usar Codespaces, precisa ir a Ports na parte inferior do editor, clicar com o botão direito e selecionar "Port Visibility" e escolher "Public". ### Trabalhar num frontend -Agora que temos uma API a funcionar, vamos criar um frontend para isto. Um frontend mínimo que iremos melhorar passo a passo. Na pasta *frontend*, cria o seguinte: +Agora que temos uma API a funcionar, vamos criar um frontend para ela. Um frontend mínimo que iremos melhorar gradualmente. Na pasta *frontend*, crie o seguinte: ```text backend/ @@ -253,7 +247,7 @@ Vamos começar com **index.html**: ``` -O acima é o mínimo absoluto necessário para suportar uma janela de chat, pois consiste num textarea onde as mensagens serão renderizadas, um campo de entrada para digitar a mensagem e um botão para enviar a mensagem ao backend. Vamos ver o JavaScript a seguir em *app.js*. +O código acima é o mínimo necessário para suportar uma janela de chat, consistindo numa área de texto onde as mensagens serão exibidas, um campo de entrada para digitar mensagens e um botão para enviar a mensagem ao backend. Vamos olhar para o JavaScript a seguir em *app.js*. **app.js** @@ -313,11 +307,11 @@ O acima é o mínimo absoluto necessário para suportar uma janela de chat, pois Vamos analisar o código por secção: - 1) Aqui obtemos uma referência a todos os elementos que iremos usar mais tarde no código. -- 2) Nesta secção, criamos uma função que utiliza o método `fetch` embutido para chamar o nosso backend. -- 3) `appendMessage` ajuda a adicionar respostas, bem como o que tu, como utilizador, digitas. -- 4) Aqui ouvimos o evento de envio e acabamos por ler o campo de entrada, colocar a mensagem do utilizador no textarea, chamar a API e renderizar a resposta no textarea. +- 2) Nesta secção, criamos uma função que usa o método `fetch` embutido para chamar o nosso backend. +- 3) `appendMessage` ajuda a adicionar respostas, bem como o que o utilizador digita. +- 4) Aqui ouvimos o evento de envio, lemos o campo de entrada, colocamos a mensagem do utilizador na área de texto, chamamos a API e exibimos a resposta na área de texto. -Vamos ver o estilo a seguir. Aqui podes ser criativo e fazer com que pareça como quiseres, mas aqui estão algumas sugestões: +Agora vamos ver o estilo. Aqui pode ser criativo e personalizar como quiser, mas aqui estão algumas sugestões: **styles.css** @@ -338,18 +332,18 @@ Vamos ver o estilo a seguir. Aqui podes ser criativo e fazer com que pareça com } ``` -Com estas três classes, vais estilizar as mensagens de forma diferente dependendo de onde vêm, do assistente ou de ti como utilizador. Se quiseres inspiração, consulta a pasta `solution/frontend/styles.css`. +Com estas três classes, pode estilizar as mensagens de forma diferente dependendo de quem as enviou: o assistente ou o utilizador. Se precisar de inspiração, veja a pasta `solution/frontend/styles.css`. -### Alterar Base Url +### Alterar a Base URL -Há uma coisa que não configurámos aqui, que foi o `BASE_URL`. Isto não é conhecido até o backend ser iniciado. Para configurá-lo: +Há um detalhe que ainda não configurámos: a `BASE_URL`. Isto só será conhecido quando o backend estiver em execução. Para configurá-la: -- Se executares a API localmente, deve ser algo como `http://localhost:5000`. -- Se executares em Codespaces, deve ser algo como "[name]app.github.dev". +- Se estiver a executar a API localmente, deve ser algo como `http://localhost:5000`. +- Se estiver a usar Codespaces, será algo como "[name]app.github.dev". ## Tarefa -Cria a tua própria pasta *project* com conteúdo como este: +Crie a sua própria pasta *project* com o seguinte conteúdo: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Copia o conteúdo do que foi instruído acima, mas sente-te à vontade para personalizar como quiseres. +Copie o conteúdo das instruções acima, mas sinta-se à vontade para personalizar como preferir. ## Solução @@ -369,11 +363,11 @@ Copia o conteúdo do que foi instruído acima, mas sente-te à vontade para pers ## Bónus -Experimenta alterar a personalidade do assistente de IA. +Experimente alterar a personalidade do assistente de IA. ### Para Python -Quando chamas `call_llm` em *api.py*, podes alterar o segundo argumento para o que quiseres, por exemplo: +Quando chamar `call_llm` em *api.py*, pode alterar o segundo argumento para o que quiser, por exemplo: ```python call_llm(message, "You are Captain Picard") @@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard") ### Frontend -Altera também o CSS e o texto como preferires, fazendo mudanças em *index.html* e *styles.css*. +Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html* e *styles.css*. ## Resumo -Ótimo, aprendeste do zero como criar um assistente pessoal utilizando IA. Fizemos isso usando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript. +Ótimo, aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso utilizando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript. ## Configurar com Codespaces -- Navega para: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Cria a partir de um template (certifica-te de que estás autenticado no GitHub) no canto superior direito: +- Navegue para: [Repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) +- Crie a partir de um template (certifique-se de que está autenticado no GitHub) no canto superior direito: ![Criar a partir de template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pt.png) -- Uma vez no teu repositório, cria um Codespace: +- Uma vez no seu repositório, crie um Codespace: ![Criar codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pt.png) - Isto deve iniciar um ambiente com o qual podes trabalhar agora. + Isto deve iniciar um ambiente com o qual pode trabalhar. --- **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução. \ No newline at end of file +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução. \ No newline at end of file diff --git a/translations/ro/9-chat-project/README.md b/translations/ro/9-chat-project/README.md index ee362d42..c894ef6a 100644 --- a/translations/ro/9-chat-project/README.md +++ b/translations/ro/9-chat-project/README.md @@ -1,8 +1,8 @@ # Проект чата -Этот проект чата демонстрирует, как создать чат-ассистента, используя GitHub Models. +Этот проект демонстрирует, как создать чат-ассистента с использованием GitHub Models. Вот как выглядит готовый проект: -
- Приложение чата -
+![Приложение чата](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ru.png) Немного контекста: создание чат-ассистентов с использованием генеративного ИИ — отличный способ начать изучение ИИ. В этом уроке вы научитесь интегрировать генеративный ИИ в веб-приложение. Давайте начнем. @@ -23,15 +21,11 @@ CO_OP_TRANSLATOR_METADATA: Для бэкенда мы используем GitHub Models. Это отличный сервис, который позволяет использовать ИИ бесплатно. Перейдите в его playground и возьмите код, соответствующий выбранному вами языку бэкенда. Вот как это выглядит: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ru.png) -Как мы уже сказали, выберите вкладку "Code" и ваш runtime. +Как мы уже сказали, выберите вкладку "Code" и ваш предпочитаемый runtime. -
- Выбор playground -
+![Выбор в Playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ru.png) ### Использование Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Давайте немного очистим этот код, чтобы он был более удобным для повторного использования: +Давайте немного очистим этот код, чтобы он был более универсальным: ```python def call_llm(prompt: str, system_message: str): @@ -98,9 +92,9 @@ def call_llm(prompt: str, system_message: str): С помощью этой функции `call_llm` мы можем передать подсказку и системную подсказку, а функция вернет результат. -### Настройка чат-ассистента +### Настройка AI-ассистента -Если вы хотите настроить чат-ассистента, вы можете указать, как он должен себя вести, заполнив системную подсказку следующим образом: +Если вы хотите настроить AI-ассистента, вы можете указать, как он должен себя вести, заполнив системную подсказку следующим образом: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -143,7 +137,7 @@ if __name__ == "__main__": Здесь мы создаем API на Flask и определяем маршруты "/" и "/chat". Последний предназначен для использования нашим фронтендом для передачи вопросов. -Чтобы интегрировать *llm.py*, нам нужно сделать следующее: +Чтобы интегрировать *llm.py*, нужно сделать следующее: - Импортировать функцию `call_llm`: @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - Здесь мы анализируем входящий запрос, чтобы извлечь свойство `message` из JSON-тела. Затем мы вызываем LLM следующим образом: + Здесь мы разбираем входящий запрос, чтобы получить свойство `message` из JSON-тела. Затем мы вызываем LLM следующим образом: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -Отлично, теперь мы сделали все необходимое. +Отлично, теперь у нас все готово. ## Настройка Cors -Стоит отметить, что мы настроили CORS (совместное использование ресурсов между источниками). Это означает, что поскольку наш бэкенд и фронтенд будут работать на разных портах, нам нужно разрешить фронтенду обращаться к бэкенду. +Стоит отметить, что мы настроили CORS (разделение ресурсов между источниками). Это необходимо, так как наш бэкенд и фронтенд будут работать на разных портах, и нужно разрешить фронтенду обращаться к бэкенду. ### Использование Python -В *api.py* есть кусок кода, который это настраивает: +В файле *api.py* есть код, который это настраивает: ```python from flask_cors import CORS @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Сейчас он настроен на разрешение "*" (все источники), что небезопасно. Мы должны ограничить это перед переходом в продакшн. +Сейчас он настроен на разрешение для всех источников ("*"), что небезопасно. Это нужно ограничить перед переходом в продакшн. ## Запуск проекта @@ -203,7 +197,7 @@ CORS(app) # * example.com ### Использование Python -Итак, у нас есть *llm.py* и *api.py*. Как заставить это работать с бэкендом? Нужно сделать два шага: +Итак, у нас есть *llm.py* и *api.py*. Как это запустить? Нужно сделать две вещи: - Установить зависимости: @@ -221,11 +215,11 @@ CORS(app) # * example.com python api.py ``` - Если вы используете Codespaces, вам нужно перейти в раздел Ports в нижней части редактора, щелкнуть правой кнопкой мыши и выбрать "Port Visibility", затем выбрать "Public". + Если вы используете Codespaces, перейдите в раздел Ports в нижней части редактора, щелкните правой кнопкой мыши и выберите "Port Visibility", затем "Public". ### Работа над фронтендом -Теперь, когда у нас есть работающий API, давайте создадим фронтенд. Минимальный фронтенд, который мы будем улучшать шаг за шагом. В папке *frontend* создайте следующее: +Теперь, когда у нас есть работающий API, создадим фронтенд. Это будет минимальный фронтенд, который мы будем улучшать поэтапно. В папке *frontend* создайте следующее: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -Этот код — абсолютный минимум, необходимый для поддержки окна чата. Он состоит из текстовой области, где будут отображаться сообщения, поля ввода для ввода сообщения и кнопки для отправки сообщения на бэкенд. Теперь посмотрим на JavaScript в *app.js*. +Это минимально необходимое для поддержки окна чата: текстовая область для отображения сообщений, поле ввода для ввода сообщения и кнопка для отправки сообщения на бэкенд. Теперь посмотрим на JavaScript в *app.js*. **app.js** @@ -310,14 +304,14 @@ styles.css })(); ``` -Разберем код по разделам: +Разберем код по секциям: - 1) Здесь мы получаем ссылки на все элементы, которые будем использовать в коде. - 2) В этом разделе мы создаем функцию, которая использует встроенный метод `fetch` для вызова нашего бэкенда. -- 3) `appendMessage` помогает добавлять ответы, а также то, что вводит пользователь. -- 4) Здесь мы слушаем событие submit, читаем поле ввода, помещаем сообщение пользователя в текстовую область, вызываем API и отображаем ответ в текстовой области. +- 3) `appendMessage` помогает добавлять ответы, а также сообщения, которые вы вводите как пользователь. +- 4) Здесь мы слушаем событие отправки, читаем поле ввода, добавляем сообщение пользователя в текстовую область, вызываем API и отображаем ответ в текстовой области. -Теперь посмотрим на стили. Здесь можно проявить фантазию и сделать так, как вам нравится, но вот несколько предложений: +Теперь перейдем к стилям. Здесь вы можете проявить фантазию, но вот несколько предложений: **styles.css** @@ -338,18 +332,18 @@ styles.css } ``` -С помощью этих трех классов вы сможете стилизовать сообщения в зависимости от их источника — ассистент или пользователь. Если хотите вдохновиться, загляните в папку `solution/frontend/styles.css`. +С помощью этих трех классов вы сможете стилизовать сообщения в зависимости от того, откуда они поступают: от ассистента или от пользователя. Если хотите вдохновиться, посмотрите папку `solution/frontend/styles.css`. ### Изменение Base Url -Есть одна вещь, которую мы не настроили — это `BASE_URL`. Она неизвестна до запуска вашего бэкенда. Чтобы ее настроить: +Есть одна вещь, которую мы еще не настроили, — это `BASE_URL`. Она становится известной только после запуска бэкенда. Чтобы ее настроить: -- Если вы запускаете API локально, она должна быть чем-то вроде `http://localhost:5000`. -- Если запускаете в Codespaces, она будет выглядеть примерно как "[name]app.github.dev". +- Если вы запускаете API локально, установите что-то вроде `http://localhost:5000`. +- Если запускаете в Codespaces, это будет что-то вроде "[name]app.github.dev". ## Задание -Создайте свою папку *project* с содержимым, как указано ниже: +Создайте свою папку *project* с таким содержимым: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Скопируйте содержимое из инструкций выше, но не стесняйтесь настраивать его по своему усмотрению. +Скопируйте содержимое из инструкций выше, но при желании настройте под себя. ## Решение @@ -369,11 +363,11 @@ project/ ## Бонус -Попробуйте изменить личность чат-ассистента. +Попробуйте изменить личность AI-ассистента. ### Для Python -Когда вы вызываете `call_llm` в *api.py*, вы можете изменить второй аргумент на то, что вам нужно, например: +Когда вы вызываете `call_llm` в *api.py*, вы можете изменить второй аргумент на любой, например: ```python call_llm(message, "You are Captain Picard") @@ -385,11 +379,11 @@ call_llm(message, "You are Captain Picard") ## Итог -Отлично, вы научились с нуля создавать персонального ассистента с использованием ИИ. Мы сделали это, используя GitHub Models, бэкенд на Python и фронтенд на HTML, CSS и JavaScript. +Отлично, вы с нуля научились создавать персонального ассистента с использованием ИИ. Мы сделали это с помощью GitHub Models, бэкенда на Python и фронтенда на HTML, CSS и JavaScript. ## Настройка с Codespaces -- Перейдите в: [репозиторий Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) +- Перейдите в: [Репозиторий Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - Создайте из шаблона (убедитесь, что вы вошли в GitHub) в правом верхнем углу: ![Создать из шаблона](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ru.png) @@ -398,9 +392,9 @@ call_llm(message, "You are Captain Picard") ![Создать Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ru.png) - Это должно запустить среду, с которой вы можете работать. + Это запустит среду, с которой вы сможете работать. --- **Отказ от ответственности**: -Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. \ No newline at end of file +Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия по обеспечению точности, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. \ No newline at end of file diff --git a/translations/sk/9-chat-project/README.md b/translations/sk/9-chat-project/README.md index 11165336..afe8b892 100644 --- a/translations/sk/9-chat-project/README.md +++ b/translations/sk/9-chat-project/README.md @@ -1,8 +1,8 @@ -# Пројекат за чет +# Чет пројекат -Овај пројекат за чет показује како да направите асистента за чет користећи GitHub Models. +Овај чет пројекат показује како направити Чет Асистента користећи GitHub Моделе. Ево како изгледа завршени пројекат: -
- Апликација за чет -
+![Чет апликација](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.sr.png) -Мало контекста, прављење асистената за чет користећи генеративну вештачку интелигенцију је одличан начин да започнете учење о вештачкој интелигенцији. Оно што ћете научити је како да интегришете генеративну вештачку интелигенцију у веб апликацију током ове лекције, хајде да почнемо. +Мало контекста, прављење чет асистената уз помоћ генеративне вештачке интелигенције је одличан начин да почнете са учењем о вештачкој интелигенцији. Оно што ћете научити је како интегрисати генеративну вештачку интелигенцију у веб апликацију током ове лекције, хајде да почнемо. ## Повезивање са генеративном вештачком интелигенцијом -За позадину користимо GitHub Models. То је одлична услуга која вам омогућава да користите вештачку интелигенцију бесплатно. Идите на њен playground и преузмите код који одговара вашем изабраном језику за позадину. Ево како изгледа [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). +За позадину користимо GitHub Моделе. То је одлична услуга која вам омогућава да користите вештачку интелигенцију бесплатно. Идите на њихов playground и преузмите код који одговара вашем изабраном језику за позадину. Ево како изгледа на [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.sr.png) -Као што смо рекли, изаберите картицу "Code" и ваш изабрани runtime. +Као што смо рекли, изаберите картицу "Code" и ваш изабрани runtime. -
- playground choice -
+![Playground избор](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.sr.png) ### Коришћење Python-а -У овом случају бирамо Python, што значи да узимамо овај код: +У овом случају бирамо Python, што значи да ћемо узети овај код: ```python """Run this model in Python @@ -98,17 +92,17 @@ def call_llm(prompt: str, system_message: str): Са овом функцијом `call_llm` сада можемо узети упит и системски упит, а функција ће на крају вратити резултат. -### Прилагођавање асистента за вештачку интелигенцију +### Прилагођавање AI Асистента -Ако желите да прилагодите асистента за вештачку интелигенцију, можете одредити како желите да се понаша попуњавањем системског упита овако: +Ако желите да прилагодите AI асистента, можете одредити како желите да се понаша попуњавањем системског упита на следећи начин: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Излагање преко веб API-ја +## Излагање преко Web API-ја -Одлично, завршили смо део са вештачком интелигенцијом, хајде да видимо како можемо да интегришемо то у веб API. За веб API бирамо Flask, али било који веб оквир би требало да буде добар. Хајде да видимо код за то: +Одлично, завршили смо део са вештачком интелигенцијом, хајде да видимо како можемо то интегрисати у Web API. За Web API бирамо да користимо Flask, али било који веб оквир би требало да буде добар. Хајде да видимо код за то: ### Коришћење Python-а @@ -141,18 +135,18 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Овде креирамо Flask API и дефинишемо подразумевану руту "/" и "/chat". Ова друга је намењена да је користи наш frontend за прослеђивање питања. +Овде креирамо Flask API и дефинишемо подразумевану руту "/" и "/chat". Ова друга је намењена да је користи наш frontend за слање питања. Да бисмо интегрисали *llm.py*, ево шта треба да урадимо: -- Увоз функције `call_llm`: +- Увезите функцију `call_llm`: ```python from llm import call_llm from flask import Flask, request ``` -- Позивање из руте "/chat": +- Позовите је из руте "/chat": ```python @app.route("/hello", methods=["POST"]) @@ -167,7 +161,7 @@ if __name__ == "__main__": }) ``` - Овде анализирамо долазни захтев да бисмо преузели својство `message` из JSON тела. Након тога позивамо LLM са овим позивом: + Овде анализирамо долазни захтев како бисмо преузели својство `message` из JSON тела. Након тога позивамо LLM са овим позивом: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ if __name__ == "__main__": }) ``` -Одлично, сада смо урадили оно што је потребно. +Одлично, сада смо завршили шта је потребно. ## Конфигурисање Cors-а -Треба да напоменемо да смо поставили нешто попут CORS-а, дељења ресурса између различитих порекла. То значи да, пошто ће наша позадина и предњи део радити на различитим портовима, морамо дозволити предњем делу да позива позадину. +Треба да напоменемо да смо подесили нешто попут CORS-а, дељење ресурса између различитих порекла. То значи да, пошто ће наша позадина и предњи крај радити на различитим портовима, морамо дозволити предњем крају да позива позадину. ### Коришћење Python-а -Постоји део кода у *api.py* који то поставља: +Постоји део кода у *api.py* који ово подешава: ```python from flask_cors import CORS @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Тренутно је постављено да дозвољава "*" што значи сва порекла, и то је мало небезбедно, требало би да ограничимо када идемо у продукцију. +Тренутно је подешено да дозвољава "*" што значи сва порекла, и то је мало небезбедно, требало би да ограничимо када идемо у продукцију. -## Покретање пројекта +## Покрените свој пројекат -Да бисте покренули свој пројекат, прво треба да покренете позадину, а затим предњи део. +Да бисте покренули свој пројекат, прво морате покренути позадину, а затим предњи крај. ### Коришћење Python-а -Добро, имамо *llm.py* и *api.py*, како можемо да ово функционише са позадином? Па, постоје две ствари које треба да урадимо: +У реду, имамо *llm.py* и *api.py*, како можемо ово учинити функционалним са позадином? Па, постоје две ствари које треба да урадимо: -- Инсталирање зависности: +- Инсталирајте зависности: ```sh cd backend @@ -215,17 +209,17 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- Покретање API-ја +- Покрените API ```sh python api.py ``` - Ако сте у Codespaces-у, треба да одете на Ports у доњем делу уређивача, десним кликом на њега и кликнете "Port Visibility" и изаберете "Public". + Ако сте у Codespaces-у, потребно је да одете на Ports у доњем делу уређивача, десним кликом кликнете на њега и изаберете "Port Visibility" и изаберете "Public". -### Рад на предњем делу +### Рад на предњем крају -Сада када имамо API који ради, хајде да направимо предњи део за ово. Минимални предњи део који ћемо побољшавати корак по корак. У *frontend* фасцикли, креирајте следеће: +Сада када имамо API који ради, хајде да направимо предњи крај за ово. Минимални предњи крај који ћемо побољшавати корак по корак. Унутар фасцикле *frontend*, креирајте следеће: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -Ово изнад је апсолутни минимум који вам је потребан за подршку прозору за чет, јер се састоји од текстуалног поља где ће се поруке приказивати, уноса где се куца порука и дугмета за слање поруке позадини. Хајде да погледамо JavaScript следеће у *app.js*. +Ово изнад је апсолутни минимум који вам је потребан за подршку чет прозору, јер се састоји од текстуалног поља где ће се поруке приказивати, уноса за куцање поруке и дугмета за слање поруке позадини. Хајде да погледамо JavaScript у *app.js* **app.js** @@ -312,12 +306,12 @@ styles.css Хајде да прођемо кроз код по секцијама: -- 1) Овде добијамо референцу на све наше елементе које ћемо касније користити у коду. -- 2) У овом делу креирамо функцију која користи уграђени метод `fetch` за позивање наше позадине. -- 3) `appendMessage` помаже у додавању одговора као и онога што ви као корисник куцате. +- 1) Овде добијамо референцу на све наше елементе које ћемо касније користити у коду +- 2) У овом делу креирамо функцију која користи уграђени метод `fetch` који позива нашу позадину +- 3) `appendMessage` помаже у додавању одговора као и онога што ви као корисник укуцате. - 4) Овде слушамо догађај submit и на крају читамо поље за унос, постављамо корисничку поруку у текстуално поље, позивамо API, приказујемо одговор у текстуалном пољу. -Хајде да погледамо стилизовање следеће, овде можете бити веома креативни и направити да изгледа како желите, али ево неких предлога: +Хајде да погледамо стилизовање следеће, овде можете бити креативни и направити да изгледа како желите, али ево неких предлога: **styles.css** @@ -338,18 +332,18 @@ styles.css } ``` -Са ове три класе, стилизоваћете поруке различито у зависности од тога да ли долазе од асистента или од вас као корисника. Ако желите инспирацију, погледајте `solution/frontend/styles.css` фасциклу. +Са ове три класе, стилизоваћете поруке различито у зависности од тога да ли долазе од асистента или од вас као корисника. Ако желите инспирацију, погледајте фасциклу `solution/frontend/styles.css`. -### Промена основног URL-а +### Промените Base Url -Постоји једна ствар коју овде нисмо поставили, а то је `BASE_URL`, ово није познато док ваша позадина не буде покренута. Да бисте га поставили: +Постојала је једна ствар коју овде нисмо подесили, а то је `BASE_URL`, ово није познато док ваша позадина не буде покренута. Да бисте га подесили: -- Ако локално покрећете API, требало би да буде постављен на нешто попут `http://localhost:5000`. -- Ако га покрећете у Codespaces-у, требало би да изгледа нешто попут "[name]app.github.dev". +- Ако локално покрећете API, требало би да буде подешен на нешто попут `http://localhost:5000`. +- Ако покрећете у Codespaces-у, требало би да изгледа нешто попут "[name]app.github.dev". ## Задатак -Креирајте своју фасциклу *project* са садржајем као што је наведено: +Креирајте своју фасциклу *project* са садржајем као што је: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Копирајте садржај из онога што је горе наведено, али слободно га прилагодите по вашем укусу. +Копирајте садржај из онога што је горе наведено, али слободно га прилагодите по свом укусу. ## Решење @@ -369,7 +363,7 @@ project/ ## Бонус -Покушајте да промените личност асистента за вештачку интелигенцију. +Покушајте да промените личност AI асистента. ### За Python @@ -379,24 +373,24 @@ project/ call_llm(message, "You are Captain Picard") ``` -### Предњи део +### Предњи крај -Промените такође CSS и текст по вашем укусу, па урадите измене у *index.html* и *styles.css*. +Промените такође CSS и текст по свом укусу, дакле унесите измене у *index.html* и *styles.css*. ## Резиме -Одлично, научили сте од почетка како да направите личног асистента користећи вештачку интелигенцију. Урадили смо то користећи GitHub Models, позадину у Python-у и предњи део у HTML-у, CSS-у и JavaScript-у. +Одлично, научили сте од почетка како да направите личног асистента користећи вештачку интелигенцију. То смо урадили користећи GitHub Моделе, позадину у Python-у и предњи крај у HTML-у, CSS-у и JavaScript-у. -## Постављање у Codespaces +## Подешавање са Codespaces-ом -- Идите на: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) +- Идите на: [Web Dev For Beginners репозиторијум](https://github.com/microsoft/Web-Dev-For-Beginners) - Креирајте из шаблона (уверите се да сте пријављени на GitHub) у горњем десном углу: - ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.sr.png) + ![Креирај из шаблона](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.sr.png) -- Када сте у вашем репозиторијуму, креирајте Codespace: +- Када сте у свом репозиторијуму, креирајте Codespace: - ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.sr.png) + ![Креирај Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.sr.png) Ово би требало да покрене окружење са којим сада можете радити. diff --git a/translations/sv/9-chat-project/README.md b/translations/sv/9-chat-project/README.md index e3d672f9..dcb33749 100644 --- a/translations/sv/9-chat-project/README.md +++ b/translations/sv/9-chat-project/README.md @@ -1,41 +1,35 @@ -# Chatprojekt +# Chattprojekt -Det här chatprojektet visar hur man bygger en chattassistent med hjälp av GitHub Models. +Detta chattprojekt visar hur man bygger en Chattassistent med hjälp av GitHub Models. Så här ser det färdiga projektet ut: -
- Chat app -
+![Chattapp](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.sv.png) -Lite bakgrund, att bygga chattassistenter med generativ AI är ett utmärkt sätt att börja lära sig om AI. Det du kommer att lära dig är att integrera generativ AI i en webbapplikation under denna lektion, låt oss börja. +Lite bakgrund, att bygga chattassistenter med generativ AI är ett utmärkt sätt att börja lära sig om AI. Det du kommer att lära dig är att integrera generativ AI i en webbapp under denna lektion, låt oss börja. -## Anslutning till generativ AI +## Ansluta till generativ AI -För backend använder vi GitHub Models. Det är en fantastisk tjänst som gör det möjligt att använda AI gratis. Gå till dess playground och hämta kod som motsvarar ditt valda backend-språk. Så här ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +För backend använder vi GitHub Models. Det är en fantastisk tjänst som låter dig använda AI gratis. Gå till dess playground och hämta koden som motsvarar ditt valda backend-språk. Så här ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.sv.png) -Som vi nämnde, välj fliken "Code" och din valda runtime. +Som vi nämnde, välj fliken "Code" och din valda runtime. -
- playground choice -
+![Playground-val](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.sv.png) ### Använda Python -I det här fallet väljer vi Python, vilket innebär att vi använder denna kod: +I detta fall väljer vi Python, vilket innebär att vi väljer denna kod: ```python """Run this model in Python @@ -106,9 +100,9 @@ Om du vill anpassa AI-assistenten kan du specificera hur du vill att den ska bet call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Exponera det via ett webb-API +## Exponera det via ett Web API -Bra, vi har gjort AI-delen, låt oss se hur vi kan integrera det i ett webb-API. För webb-API:t väljer vi Flask, men vilken webbframework som helst borde fungera. Låt oss se koden för det: +Bra, vi har gjort AI-delen, låt oss se hur vi kan integrera det i ett Web API. För Web API väljer vi att använda Flask, men vilket webbframework som helst borde fungera. Låt oss titta på koden för det: ### Använda Python @@ -141,7 +135,7 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Här skapar vi ett Flask-API och definierar en standardroute "/" och "/chat". Den senare är tänkt att användas av vår frontend för att skicka frågor till den. +Här skapar vi ett Flask-API och definierar en standardrutt "/" och "/chat". Den senare är tänkt att användas av vår frontend för att skicka frågor till den. För att integrera *llm.py* behöver vi göra följande: @@ -152,7 +146,7 @@ För att integrera *llm.py* behöver vi göra följande: from flask import Flask, request ``` -- Anropa den från "/chat"-route: +- Anropa den från "/chat"-rutten: ```python @app.route("/hello", methods=["POST"]) @@ -182,7 +176,7 @@ Bra, nu har vi gjort det vi behöver. ## Konfigurera Cors -Vi bör nämna att vi ställer in något som CORS, cross-origin resource sharing. Detta innebär att eftersom vår backend och frontend kommer att köras på olika portar, måste vi tillåta att frontenden kan anropa backend. +Vi bör nämna att vi ställer in något som CORS, cross-origin resource sharing. Detta innebär att eftersom vår backend och frontend kommer att köras på olika portar, måste vi tillåta frontenden att anropa backenden. ### Använda Python @@ -199,7 +193,7 @@ Just nu är det inställt att tillåta "*" vilket är alla ursprung, och det är ## Kör ditt projekt -För att köra ditt projekt behöver du starta upp din backend först och sedan din frontend. +För att köra ditt projekt behöver du starta din backend först och sedan din frontend. ### Använda Python @@ -223,7 +217,7 @@ Ok, så vi har *llm.py* och *api.py*, hur kan vi få detta att fungera med en ba Om du är i Codespaces behöver du gå till Ports längst ner i redigeraren, högerklicka på det och klicka på "Port Visibility" och välj "Public". -### Arbeta med en frontend +### Arbeta på en frontend Nu när vi har ett API igång, låt oss skapa en frontend för detta. En minimal frontend som vi kommer att förbättra stegvis. I en *frontend*-mapp, skapa följande: @@ -253,7 +247,7 @@ Låt oss börja med **index.html**: ``` -Ovan är det absolut minsta du behöver för att stödja ett chattfönster, eftersom det består av en textarea där meddelanden kommer att visas, ett inputfält för att skriva meddelandet och en knapp för att skicka ditt meddelande till backend. Låt oss titta på JavaScript i *app.js*. +Ovanstående är det absolut minsta du behöver för att stödja ett chattfönster, eftersom det består av en textarea där meddelanden kommer att visas, ett inputfält för att skriva meddelanden och en knapp för att skicka ditt meddelande till backenden. Låt oss titta på JavaScript i *app.js*. **app.js** @@ -310,12 +304,12 @@ Ovan är det absolut minsta du behöver för att stödja ett chattfönster, efte })(); ``` -Låt oss gå igenom koden per sektion: +Låt oss gå igenom koden sektion för sektion: - 1) Här hämtar vi en referens till alla våra element som vi kommer att referera till senare i koden. - 2) I denna sektion skapar vi en funktion som använder den inbyggda metoden `fetch` för att anropa vår backend. -- 3) `appendMessage` hjälper till att lägga till svar samt det du som användare skriver. -- 4) Här lyssnar vi på submit-händelsen och läser inputfältet, placerar användarens meddelande i textarean, anropar API:t och renderar svaret i textarean. +- 3) `appendMessage` hjälper till att lägga till svar samt vad du som användare skriver. +- 4) Här lyssnar vi på submit-händelsen och läser inmatningsfältet, placerar användarens meddelande i textområdet, anropar API:t och renderar svaret i textområdet. Låt oss titta på styling härnäst, här kan du verkligen gå loss och få det att se ut som du vill, men här är några förslag: @@ -338,14 +332,14 @@ Låt oss titta på styling härnäst, här kan du verkligen gå loss och få det } ``` -Med dessa tre klasser kommer du att styla meddelanden olika beroende på om de kommer från en assistent eller dig som användare. Om du vill bli inspirerad, kolla in `solution/frontend/styles.css`-mappen. +Med dessa tre klasser kommer du att styla meddelanden olika beroende på om de kommer från assistenten eller dig som användare. Om du vill bli inspirerad, kolla in `solution/frontend/styles.css`-mappen. -### Ändra Base Url +### Ändra Bas-URL -Det var en sak här vi inte satte och det var `BASE_URL`, detta är inte känt förrän din backend är startad. För att ställa in det: +Det var en sak vi inte satte här och det var `BASE_URL`, detta är inte känt förrän din backend är startad. För att ställa in det: -- Om du kör API:t lokalt, bör det ställas in till något som `http://localhost:5000`. -- Om det körs i Codespaces, bör det se ut som "[name]app.github.dev". +- Om du kör API:t lokalt bör det ställas in till något som `http://localhost:5000`. +- Om det körs i Codespaces bör det se ut som "[name]app.github.dev". ## Uppgift @@ -361,7 +355,7 @@ project/ ... ``` -Kopiera innehållet från det som instruerades ovan men känn dig fri att anpassa det efter dina önskemål. +Kopiera innehållet från det som instruerades ovan men känn dig fri att anpassa det efter din smak. ## Lösning @@ -369,7 +363,7 @@ Kopiera innehållet från det som instruerades ovan men känn dig fri att anpass ## Bonus -Prova att ändra personligheten hos AI-assistenten. +Försök att ändra AI-assistentens personlighet. ### För Python @@ -381,13 +375,13 @@ call_llm(message, "You are Captain Picard") ### Frontend -Ändra också CSS och text efter dina önskemål, så gör ändringar i *index.html* och *styles.css*. +Ändra också CSS och text efter din smak, så gör ändringar i *index.html* och *styles.css*. ## Sammanfattning Bra, du har lärt dig från grunden hur man skapar en personlig assistent med hjälp av AI. Vi har gjort det med hjälp av GitHub Models, en backend i Python och en frontend i HTML, CSS och JavaScript. -## Sätt upp med Codespaces +## Ställ in med Codespaces - Navigera till: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) - Skapa från en mall (se till att du är inloggad på GitHub) i det övre högra hörnet: @@ -403,4 +397,4 @@ Bra, du har lärt dig från grunden hur man skapar en personlig assistent med hj --- **Ansvarsfriskrivning**: -Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som kan uppstå vid användning av denna översättning. \ No newline at end of file +Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning. \ No newline at end of file diff --git a/translations/sw/9-chat-project/README.md b/translations/sw/9-chat-project/README.md index 226aff0b..771ce04c 100644 --- a/translations/sw/9-chat-project/README.md +++ b/translations/sw/9-chat-project/README.md @@ -1,8 +1,8 @@ # Chat project -Ang proyektong ito ay nagpapakita kung paano bumuo ng isang Chat Assistant gamit ang GitHub Models. +Ang proyektong ito ay nagpapakita kung paano bumuo ng Chat Assistant gamit ang GitHub Models. -Ganito ang magiging hitsura ng natapos na proyekto: +Ganito ang itsura ng natapos na proyekto: -
- Chat app -
+![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tl.png) -Kaunting konteksto, ang paggawa ng Chat assistants gamit ang generative AI ay isang mahusay na paraan upang magsimulang matuto tungkol sa AI. Sa araling ito, matututuhan mong isama ang generative AI sa isang web app. Simulan na natin. +Kaunting konteksto, ang paggawa ng Chat assistants gamit ang generative AI ay isang mahusay na paraan upang magsimula sa pag-aaral tungkol sa AI. Ang matututunan mo ay kung paano i-integrate ang generative AI sa isang web app sa buong aralin na ito, simulan na natin. ## Pagkonekta sa generative AI -Para sa backend, gagamit tayo ng GitHub Models. Isa itong mahusay na serbisyo na nagbibigay-daan sa iyo na gumamit ng AI nang libre. Pumunta sa playground nito at kunin ang code na tumutugma sa napili mong backend na wika. Ganito ang itsura nito sa [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Para sa backend, ginagamit natin ang GitHub Models. Isa itong mahusay na serbisyo na nagbibigay-daan sa iyo na gumamit ng AI nang libre. Pumunta sa playground nito at kunin ang code na tumutugma sa napili mong backend na wika. Ganito ang itsura nito sa [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- GitHub Models AI Playground -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tl.png) -Tulad ng nabanggit, piliin ang tab na "Code" at ang runtime na gusto mo. +Tulad ng nabanggit, piliin ang tab na "Code" at ang runtime na napili mo. -
- playground choice -
+![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tl.png) -### Gamit ang Python +### Paggamit ng Python -Sa kasong ito, pipiliin natin ang Python, kaya't ito ang code na gagamitin: +Sa kasong ito, pinili natin ang Python, na nangangahulugan na kukunin natin ang code na ito: ```python """Run this model in Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Linisin natin ang code na ito upang magamit muli: +Linisin natin ang code na ito nang kaunti upang magamit muli: ```python def call_llm(prompt: str, system_message: str): @@ -100,7 +94,7 @@ Sa pamamagitan ng function na `call_llm`, maaari na nating kunin ang isang promp ### I-customize ang AI Assistant -Kung nais mong i-customize ang AI assistant, maaari mong tukuyin kung paano ito dapat kumilos sa pamamagitan ng paglalagay ng system prompt tulad nito: +Kung nais mong i-customize ang AI assistant, maaari mong tukuyin kung paano mo nais itong kumilos sa pamamagitan ng paglalagay ng system prompt tulad nito: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i ## I-expose ito sa pamamagitan ng Web API -Magaling, tapos na natin ang AI na bahagi. Tingnan natin kung paano natin ito maisasama sa isang Web API. Para sa Web API, gagamit tayo ng Flask, ngunit anumang web framework ay maaaring gamitin. Narito ang code para dito: +Mahusay, tapos na natin ang bahagi ng AI, tingnan natin kung paano natin ito ma-integrate sa isang Web API. Para sa Web API, pinili natin ang Flask, ngunit anumang web framework ay maaaring gamitin. Tingnan natin ang code para dito: -### Gamit ang Python +### Paggamit ng Python ```python # api.py @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Dito, lumikha tayo ng isang Flask API at nagtakda ng default na ruta na "/" at "/chat". Ang huli ay gagamitin ng ating frontend upang maipasa ang mga tanong dito. +Dito, gumawa tayo ng flask API at nagtakda ng default na ruta "/" at "/chat". Ang huli ay para magamit ng ating frontend upang maipasa ang mga tanong dito. -Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin: +Upang i-integrate ang *llm.py*, narito ang kailangan nating gawin: - I-import ang function na `call_llm`: @@ -167,7 +161,7 @@ Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin: }) ``` - Dito, ini-parse natin ang papasok na request upang makuha ang property na `message` mula sa JSON body. Pagkatapos, tatawagin natin ang LLM gamit ang tawag na ito: + Dito, ina-parse natin ang papasok na request upang makuha ang property na `message` mula sa JSON body. Pagkatapos, tinatawag natin ang LLM gamit ang tawag na ito: ```python response = call_llm(message, "You are a helpful assistant") @@ -178,15 +172,15 @@ Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin: }) ``` -Magaling, natapos na natin ang kailangan. +Mahusay, natapos na natin ang kailangan. ## I-configure ang Cors -Dapat nating banggitin na nag-set up tayo ng isang bagay tulad ng CORS, o cross-origin resource sharing. Nangangahulugan ito na dahil ang ating backend at frontend ay tatakbo sa magkaibang ports, kailangan nating payagan ang frontend na tumawag sa backend. +Dapat nating banggitin na nag-set up tayo ng isang bagay tulad ng CORS, cross-origin resource sharing. Nangangahulugan ito na dahil ang ating backend at frontend ay tatakbo sa magkaibang ports, kailangan nating payagan ang frontend na tumawag sa backend. -### Gamit ang Python +### Paggamit ng Python -Narito ang isang piraso ng code sa *api.py* na nagse-set up nito: +Mayroong piraso ng code sa *api.py* na nagse-set up nito: ```python from flask_cors import CORS @@ -195,17 +189,17 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Sa kasalukuyan, naka-set up ito upang payagan ang "*" o lahat ng origins, ngunit hindi ito ligtas. Dapat natin itong limitahan kapag nasa production na. +Sa ngayon, naka-set up ito upang payagan ang "*" na nangangahulugang lahat ng origins, ngunit medyo hindi ito ligtas. Dapat natin itong limitahan kapag nasa production na. ## Patakbuhin ang iyong proyekto Upang patakbuhin ang iyong proyekto, kailangan mong simulan muna ang iyong backend at pagkatapos ang iyong frontend. -### Gamit ang Python +### Paggamit ng Python -Ok, mayroon tayong *llm.py* at *api.py*. Paano natin ito mapapagana sa backend? Narito ang dalawang hakbang: +Ok, mayroon tayong *llm.py* at *api.py*, paano natin ito mapapagana sa backend? May dalawang bagay na kailangan nating gawin: -- I-install ang mga dependencies: +- I-install ang dependencies: ```sh cd backend @@ -215,17 +209,17 @@ Ok, mayroon tayong *llm.py* at *api.py*. Paano natin ito mapapagana sa backend? pip install openai flask flask-cors openai ``` -- Simulan ang API: +- Simulan ang API ```sh python api.py ``` - Kung nasa Codespaces ka, pumunta sa Ports sa ibabang bahagi ng editor, i-right-click ito at i-click ang "Port Visibility" at piliin ang "Public". + Kung nasa Codespaces ka, kailangan mong pumunta sa Ports sa ibabang bahagi ng editor, i-right-click ito at i-click ang "Port Visibility" at piliin ang "Public". ### Gumawa ng frontend -Ngayon na may API na tayong tumatakbo, gumawa tayo ng frontend para dito. Isang pinakasimpleng frontend na unti-unti nating pagagandahin. Sa isang *frontend* folder, gumawa ng mga sumusunod: +Ngayon na mayroon na tayong API na tumatakbo, gumawa tayo ng frontend para dito. Isang pinakasimpleng frontend na ating pagagandahin nang paunti-unti. Sa isang *frontend* folder, gumawa ng sumusunod: ```text backend/ @@ -253,7 +247,7 @@ Simulan natin sa **index.html**: ``` -Ang nasa itaas ay ang pinakapayak na kailangan mo upang suportahan ang isang chat window. Binubuo ito ng isang textarea kung saan irerender ang mga mensahe, isang input para sa pag-type ng mensahe, at isang button para ipadala ang iyong mensahe sa backend. Tingnan natin ang JavaScript sa *app.js*. +Ang nasa itaas ay ang pinakasimple na kailangan mo upang suportahan ang isang chat window, dahil binubuo ito ng isang textarea kung saan irerender ang mga mensahe, isang input kung saan magta-type ng mensahe, at isang button para ipadala ang iyong mensahe sa backend. Tingnan natin ang JavaScript sa *app.js* **app.js** @@ -310,14 +304,14 @@ Ang nasa itaas ay ang pinakapayak na kailangan mo upang suportahan ang isang cha })(); ``` -Tingnan natin ang code bawat seksyon: +Tingnan natin ang code per section: - 1) Dito, kinukuha natin ang reference sa lahat ng mga elemento na gagamitin natin sa code. -- 2) Sa seksyong ito, lumikha tayo ng function na gumagamit ng built-in na `fetch` method upang tawagin ang ating backend. -- 3) Ang `appendMessage` ay tumutulong magdagdag ng mga sagot pati na rin ang mga mensaheng tina-type ng user. -- 4) Dito, nakikinig tayo sa submit event, binabasa ang input field, inilalagay ang mensahe ng user sa textarea, tinatawag ang API, at irerender ang sagot sa textarea. +- 2) Sa seksyong ito, gumawa tayo ng function na gumagamit ng built-in na `fetch` method upang tawagin ang ating backend. +- 3) Ang `appendMessage` ay tumutulong magdagdag ng mga sagot pati na rin ang mga mensahe na tina-type ng user. +- 4) Dito, nakikinig tayo sa submit event at binabasa ang input field, inilalagay ang mensahe ng user sa textarea, tinatawag ang API, at irerender ang sagot sa textarea. -Tingnan natin ang styling, narito kung saan maaari kang maging malikhain at gawing ayon sa gusto mo. Narito ang ilang mungkahi: +Tingnan natin ang styling, dito maaari kang maging malikhain at gawing maganda ang itsura, ngunit narito ang ilang mungkahi: **styles.css** @@ -338,18 +332,18 @@ Tingnan natin ang styling, narito kung saan maaari kang maging malikhain at gawi } ``` -Sa tatlong klase na ito, iba-iba ang istilo ng mga mensahe depende kung galing ito sa assistant o sa user. Kung nais mong ma-inspire, tingnan ang `solution/frontend/styles.css` folder. +Sa tatlong klase na ito, maistyle mo ang mga mensahe depende kung saan ito nanggaling, mula sa assistant o sa user. Kung nais mong ma-inspire, tingnan ang `solution/frontend/styles.css` folder. ### Baguhin ang Base Url -May isang bagay dito na hindi pa natin na-set, at iyon ay ang `BASE_URL`. Hindi ito malalaman hanggang sa magsimula ang iyong backend. Upang i-set ito: +May isang bagay dito na hindi natin na-set, at iyon ay ang `BASE_URL`. Hindi ito malalaman hanggang magsimula ang iyong backend. Upang i-set ito: -- Kung ang API ay tumatakbo nang lokal, dapat itong i-set sa `http://localhost:5000`. +- Kung tumatakbo ang API nang lokal, dapat itong i-set sa `http://localhost:5000`. - Kung tumatakbo sa Codespaces, dapat itong magmukhang "[name]app.github.dev". -## Gawain +## Assignment -Gumawa ng sarili mong folder na *project* na may nilalaman tulad nito: +Gumawa ng sarili mong folder *project* na may nilalaman tulad nito: ```text project/ @@ -363,9 +357,9 @@ project/ Kopyahin ang nilalaman mula sa mga itinuro sa itaas ngunit malaya kang i-customize ayon sa gusto mo. -## Solusyon +## Solution -[Solusyon](./solution/README.md) +[Solution](./solution/README.md) ## Bonus @@ -373,7 +367,7 @@ Subukang baguhin ang personalidad ng AI assistant. ### Para sa Python -Kapag tinawag mo ang `call_llm` sa *api.py*, maaari mong baguhin ang pangalawang argumento ayon sa gusto mo, halimbawa: +Kapag tinawag mo ang `call_llm` sa *api.py*, maaari mong baguhin ang pangalawang argumento sa gusto mo, halimbawa: ```python call_llm(message, "You are Captain Picard") @@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard") ### Frontend -Baguhin din ang CSS at teksto ayon sa gusto mo, kaya't gumawa ng mga pagbabago sa *index.html* at *styles.css*. +Baguhin din ang CSS at teksto ayon sa gusto mo, kaya gumawa ng mga pagbabago sa *index.html* at *styles.css*. ## Buod -Magaling, natutunan mo mula sa simula kung paano gumawa ng personal assistant gamit ang AI. Ginawa natin ito gamit ang GitHub Models, isang backend sa Python, at isang frontend sa HTML, CSS, at JavaScript. +Mahusay, natutunan mo mula sa simula kung paano gumawa ng personal assistant gamit ang AI. Ginawa natin ito gamit ang GitHub Models, isang backend sa Python, at isang frontend sa HTML, CSS, at JavaScript. -## I-set up gamit ang Codespaces +## Set up gamit ang Codespaces - Pumunta sa: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Gumawa mula sa isang template (siguraduhing naka-log in ka sa GitHub) sa kanang itaas na bahagi: +- Gumawa mula sa template (siguraduhing naka-login ka sa GitHub) sa kanang itaas na bahagi: ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tl.png) @@ -398,9 +392,9 @@ Magaling, natutunan mo mula sa simula kung paano gumawa ng personal assistant ga ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tl.png) - Dapat nitong simulan ang isang environment na maaari mo nang gamitin. + Dapat itong magsimula ng environment na maaari mo nang gamitin. --- **Paunawa**: -Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito. \ No newline at end of file +Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. \ No newline at end of file diff --git a/translations/tr/9-chat-project/README.md b/translations/tr/9-chat-project/README.md index 7c48e8e3..d3d720a6 100644 --- a/translations/tr/9-chat-project/README.md +++ b/translations/tr/9-chat-project/README.md @@ -1,41 +1,35 @@ # Sohbet Projesi -Bu sohbet projesi, GitHub Modellerini kullanarak bir Sohbet Asistanı oluşturmayı gösterir. +Bu sohbet projesi, GitHub Modelleri kullanarak bir Sohbet Asistanı oluşturmayı gösterir. -İşte bitmiş projenin nasıl göründüğü: +İşte tamamlanmış projenin görünümü: -
- Sohbet uygulaması -
+![Sohbet uygulaması](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tr.png) -Biraz bağlam vermek gerekirse, üretken yapay zeka kullanarak Sohbet Asistanları oluşturmak, yapay zeka hakkında öğrenmeye başlamak için harika bir yoldur. Bu derste, üretken yapay zekayı bir web uygulamasına entegre etmeyi öğreneceksiniz. Hadi başlayalım. +Biraz bağlam: Üretken yapay zeka kullanarak Sohbet asistanları oluşturmak, yapay zeka hakkında öğrenmeye başlamak için harika bir yoldur. Bu derste, üretken yapay zekayı bir web uygulamasına entegre etmeyi öğreneceksiniz. Haydi başlayalım. ## Üretken Yapay Zekaya Bağlanma -Backend için GitHub Modellerini kullanıyoruz. Bu, yapay zekayı ücretsiz olarak kullanmanıza olanak tanıyan harika bir hizmettir. Playground'a gidin ve seçtiğiniz backend diline karşılık gelen kodu alın. İşte [GitHub Modelleri Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) adresinde nasıl göründüğü: +Backend için GitHub Modelleri kullanıyoruz. Bu, yapay zekayı ücretsiz olarak kullanmanıza olanak tanıyan harika bir hizmettir. Playground'a gidin ve seçtiğiniz backend diline karşılık gelen kodu alın. İşte [GitHub Modelleri Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) görünümü: -
- GitHub Modelleri AI Playground -
+![GitHub Modelleri AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tr.png) Dediğimiz gibi, "Code" sekmesini ve seçtiğiniz çalışma zamanını seçin. -
- playground seçimi -
+![Playground seçimi](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tr.png) ### Python Kullanımı -Bu durumda Python'u seçiyoruz, bu da şu kodu seçmemiz gerektiği anlamına geliyor: +Bu durumda Python'u seçiyoruz, bu da şu kodu seçmemiz anlamına geliyor: ```python """Run this model in Python @@ -96,19 +90,19 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -Bu `call_llm` fonksiyonu ile artık bir prompt ve bir sistem prompt alabilir ve fonksiyon sonucu döndürebilir. +Bu `call_llm` fonksiyonu ile artık bir prompt ve bir sistem prompt alabiliriz ve fonksiyon sonuç döndürür. ### Yapay Zeka Asistanını Özelleştirme -Yapay zeka asistanını özelleştirmek isterseniz, sistem promptunu şu şekilde doldurarak nasıl davranmasını istediğinizi belirtebilirsiniz: +Yapay zeka asistanını özelleştirmek istiyorsanız, sistem prompt'u şu şekilde doldurarak nasıl davranmasını istediğinizi belirtebilirsiniz: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` -## Bir Web API Üzerinden Sunma +## Web API Üzerinden Sunma -Harika, yapay zeka kısmını tamamladık, şimdi bunu bir Web API'ye nasıl entegre edebileceğimize bakalım. Web API için Flask kullanmayı seçiyoruz, ancak herhangi bir web çerçevesi uygun olacaktır. İşte bunun için kod: +Harika, yapay zeka kısmını tamamladık, şimdi bunu bir Web API'ye nasıl entegre edebileceğimize bakalım. Web API için Flask kullanmayı seçiyoruz, ancak herhangi bir web framework uygun olacaktır. Koduna bakalım: ### Python Kullanımı @@ -141,9 +135,9 @@ if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` -Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlıyoruz. İkincisi, frontendimizin soruları backend'e iletmesi için kullanılır. +Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki varsayılan route tanımlıyoruz. İkincisi, frontendimizin soruları backend'e iletmesi için tasarlanmıştır. -*llm.py* dosyasını entegre etmek için şunları yapmamız gerekiyor: +*llm.py* dosyasını entegre etmek için yapmamız gerekenler: - `call_llm` fonksiyonunu içe aktarın: @@ -152,7 +146,7 @@ Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlı from flask import Flask, request ``` -- "/chat" rotasında çağırın: +- "/chat" route'undan çağırın: ```python @app.route("/hello", methods=["POST"]) @@ -167,7 +161,7 @@ Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlı }) ``` - Burada gelen isteği ayrıştırarak JSON gövdesindeki `message` özelliğini alıyoruz. Daha sonra LLM'yi şu şekilde çağırıyoruz: + Burada gelen isteği ayrıştırarak JSON gövdesinden `message` özelliğini alıyoruz. Daha sonra LLM'i şu şekilde çağırıyoruz: ```python response = call_llm(message, "You are a helpful assistant") @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Şu anda "*" yani tüm kökenlere izin verecek şekilde ayarlanmış durumda ve bu biraz güvensizdir. Üretime geçtiğimizde bunu kısıtlamalıyız. +Şu anda "*" yani tüm kaynaklara izin verecek şekilde ayarlandı ve bu biraz güvensiz. Üretime geçtiğimizde bunu kısıtlamalıyız. ## Projenizi Çalıştırma @@ -203,7 +197,7 @@ Projenizi çalıştırmak için önce backend'i, ardından frontend'i başlatman ### Python Kullanımı -Tamam, elimizde *llm.py* ve *api.py* var, bunu bir backend ile nasıl çalıştırabiliriz? İki şey yapmamız gerekiyor: +Tamam, elimizde *llm.py* ve *api.py* var, backend ile bunu nasıl çalıştırabiliriz? İki şey yapmamız gerekiyor: - Bağımlılıkları yükleyin: @@ -221,7 +215,7 @@ Tamam, elimizde *llm.py* ve *api.py* var, bunu bir backend ile nasıl çalışt python api.py ``` - Codespaces kullanıyorsanız, editörün alt kısmındaki Ports bölümüne gidin, sağ tıklayın ve "Port Visibility" seçeneğini seçerek "Public" yapın. + Codespaces kullanıyorsanız, editörün alt kısmındaki Ports bölümüne gidin, üzerine sağ tıklayın ve "Port Visibility" seçeneğini seçerek "Public" yapın. ### Frontend Üzerinde Çalışma @@ -253,7 +247,7 @@ styles.css ``` -Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken mutlak minimumdur. Bir textarea, bir input ve bir gönderme butonundan oluşur. Şimdi *app.js* içindeki JavaScript'e bakalım. +Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken minimum kodu içerir. Bir textarea, mesajların görüntüleneceği bir alan, bir input alanı ve mesajınızı backend'e göndermek için bir buton içerir. Şimdi *app.js* dosyasındaki JavaScript'e bakalım. **app.js** @@ -310,14 +304,14 @@ Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken mutlak minimum })(); ``` -Kodu bölüm bölüm inceleyelim: +Kodun bölümlerini inceleyelim: -- 1) Burada daha sonra kodda başvuracağımız tüm öğelere referans alıyoruz. +- 1) Burada daha sonra kodda referans alacağımız tüm öğelere bir referans alıyoruz. - 2) Bu bölümde, yerleşik `fetch` metodunu kullanarak backend'e çağrı yapan bir fonksiyon oluşturuyoruz. - 3) `appendMessage`, yanıtları ve kullanıcı olarak yazdığınız mesajları eklemeye yardımcı olur. -- 4) Burada submit olayını dinliyoruz ve input alanını okuyarak, kullanıcının mesajını textarea'ya yerleştiriyoruz, API'yi çağırıyoruz ve yanıtı textarea'da gösteriyoruz. +- 4) Burada submit olayını dinliyoruz ve input alanını okuyarak, kullanıcının mesajını textarea'ya yerleştiriyoruz, API'yi çağırıyoruz ve yanıtı textarea'da görüntülüyoruz. -Şimdi stil kısmına bakalım, burada tamamen özgürsünüz, ancak işte bazı öneriler: +Şimdi stil kısmına bakalım, burada istediğiniz gibi tasarım yapabilirsiniz, ancak işte bazı öneriler: **styles.css** @@ -338,18 +332,18 @@ Kodu bölüm bölüm inceleyelim: } ``` -Bu üç sınıf ile mesajları, asistan veya kullanıcıdan gelmesine bağlı olarak farklı şekilde stillendirebilirsiniz. İlham almak isterseniz, `solution/frontend/styles.css` klasörüne göz atabilirsiniz. +Bu üç sınıf ile mesajları, bir asistandan mı yoksa kullanıcıdan mı geldiğine bağlı olarak farklı şekilde stilize edebilirsiniz. İlham almak isterseniz, `solution/frontend/styles.css` klasörüne göz atabilirsiniz. -### Base Url'i Değiştirme +### Base Url'yi Değiştirme -Burada ayarlamadığımız bir şey vardı, o da `BASE_URL`. Bu, backend başlatılana kadar bilinmez. Ayarlamak için: +Burada ayarlamadığımız bir şey vardı, o da `BASE_URL`. Backend başlatılana kadar bu bilinmez. Ayarlamak için: - API'yi yerel olarak çalıştırıyorsanız, `http://localhost:5000` gibi bir şey olmalıdır. -- Codespaces'te çalıştırıyorsanız, "[name]app.github.dev" gibi bir şey olmalıdır. +- Codespaces'de çalıştırıyorsanız, "[name]app.github.dev" gibi bir şey olmalıdır. ## Ödev -*project* adında bir klasör oluşturun ve şu şekilde içerik ekleyin: +*project* adında kendi klasörünüzü oluşturun ve içeriği şu şekilde düzenleyin: ```text project/ @@ -361,7 +355,7 @@ project/ ... ``` -Yukarıda talimat verilen içeriği kopyalayın, ancak istediğiniz gibi özelleştirmekten çekinmeyin. +Yukarıda anlatılanlardan içeriği kopyalayın, ancak istediğiniz gibi özelleştirmekten çekinmeyin. ## Çözüm @@ -381,7 +375,7 @@ call_llm(message, "You are Captain Picard") ### Frontend -Ayrıca CSS ve metni de istediğiniz gibi değiştirin, bu nedenle *index.html* ve *styles.css* dosyalarında değişiklik yapın. +CSS ve metni de istediğiniz gibi değiştirin, yani *index.html* ve *styles.css* dosyalarında değişiklik yapın. ## Özet @@ -390,17 +384,17 @@ Harika, sıfırdan bir yapay zeka kullanarak kişisel bir asistan oluşturmayı ## Codespaces ile Kurulum - Şuraya gidin: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners) -- Bir şablondan oluşturun (GitHub'da oturum açtığınızdan emin olun) sağ üst köşede: +- Şablondan oluşturun (GitHub'da oturum açtığınızdan emin olun) sağ üst köşede: ![Şablondan oluştur](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tr.png) -- Depo içindeyken bir Codespace oluşturun: +- Kendi repo'nuzdayken bir Codespace oluşturun: ![Codespace oluştur](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tr.png) - Bu, artık çalışabileceğiniz bir ortam başlatmalıdır. + Bu, artık üzerinde çalışabileceğiniz bir ortam başlatmalıdır. --- **Feragatname**: -Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğu sağlamak için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz. \ No newline at end of file +Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğu sağlamak için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz. \ No newline at end of file diff --git a/translations/tw/9-chat-project/README.md b/translations/tw/9-chat-project/README.md index 3d944c5b..3fdb6cb8 100644 --- a/translations/tw/9-chat-project/README.md +++ b/translations/tw/9-chat-project/README.md @@ -1,8 +1,8 @@ # Проєкт чату -Цей проєкт чату демонструє, як створити чат-асистента, використовуючи моделі GitHub. +Цей проєкт чату демонструє, як створити чат-асистента, використовуючи GitHub Models. Ось як виглядає готовий проєкт: -
- Додаток чату -
+![Додаток чату](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png) Трохи контексту: створення чат-асистентів за допомогою генеративного штучного інтелекту — чудовий спосіб почати вивчати AI. У цьому уроці ви навчитеся інтегрувати генеративний AI у веб-додаток. Почнемо. ## Підключення до генеративного AI -Для бекенду ми використовуємо моделі GitHub. Це чудовий сервіс, який дозволяє використовувати AI безкоштовно. Перейдіть до його "пісочниці" та отримайте код, який відповідає вашій вибраній мові бекенду. Ось як це виглядає: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) +Для бекенду ми використовуємо GitHub Models. Це чудовий сервіс, який дозволяє використовувати AI безкоштовно. Перейдіть до його playground і скопіюйте код, який відповідає вашій обраній мові бекенду. Ось як це виглядає: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) -
- Пісочниця GitHub Models AI -
+![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png) -Як ми вже казали, виберіть вкладку "Code" та ваш середовище виконання. +Як ми вже казали, виберіть вкладку "Code" і ваш runtime. -
- вибір пісочниці -
+![Вибір у playground](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png) ### Використання Python @@ -72,7 +66,7 @@ response = client.chat.completions.create( print(response.choices[0].message.content) ``` -Давайте трохи очистимо цей код, щоб він був більш універсальним: +Давайте трохи очистимо цей код, щоб він був зручним для повторного використання: ```python def call_llm(prompt: str, system_message: str): @@ -96,11 +90,11 @@ def call_llm(prompt: str, system_message: str): return response.choices[0].message.content ``` -З цією функцією `call_llm` ми тепер можемо взяти запит і системний запит, а функція поверне результат. +З цією функцією `call_llm` ми можемо взяти підказку та системну підказку, і функція поверне результат. ### Налаштування AI-асистента -Якщо ви хочете налаштувати AI-асистента, ви можете визначити, як він має поводитися, заповнивши системний запит ось так: +Якщо ви хочете налаштувати AI-асистента, ви можете вказати, як він має поводитися, заповнивши системну підказку ось так: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") @@ -195,7 +189,7 @@ app = Flask(__name__) CORS(app) # * example.com ``` -Зараз це налаштовано на дозвіл "*" — тобто всі джерела, і це трохи небезпечно. Ми повинні обмежити це, коли перейдемо до продакшну. +Зараз це налаштовано для дозволу "*" — тобто всіх джерел, що трохи небезпечно. Ми повинні обмежити це, коли перейдемо до продакшну. ## Запуск проєкту @@ -203,7 +197,7 @@ CORS(app) # * example.com ### Використання Python -Отже, у нас є *llm.py* і *api.py*. Як ми можемо змусити це працювати з бекендом? Є дві речі, які потрібно зробити: +Отже, у нас є *llm.py* і *api.py*. Як це запустити з бекендом? Є дві речі, які потрібно зробити: - Встановити залежності: @@ -215,7 +209,7 @@ CORS(app) # * example.com pip install openai flask flask-cors openai ``` -- Запустити API +- Запустити API: ```sh python api.py @@ -225,7 +219,7 @@ CORS(app) # * example.com ### Робота над фронтендом -Тепер, коли у нас є API, давайте створимо фронтенд для цього. Мінімальний фронтенд, який ми будемо покращувати поступово. У папці *frontend* створіть наступне: +Тепер, коли наш API працює, давайте створимо фронтенд. Мінімальний фронтенд, який ми будемо покращувати поступово. У папці *frontend* створіть наступне: ```text backend/ @@ -253,7 +247,7 @@ styles.css ``` -Це мінімум, який вам потрібен для підтримки вікна чату, оскільки він складається з текстової області, де будуть відображатися повідомлення, поля введення для введення повідомлення та кнопки для надсилання вашого повідомлення на бекенд. Давайте подивимося на JavaScript у файлі *app.js*. +Це мінімум, який потрібен для підтримки вікна чату, оскільки він складається з текстової області, де будуть відображатися повідомлення, поля вводу для введення повідомлення та кнопки для надсилання повідомлення на бекенд. Тепер розглянемо JavaScript у *app.js*. **app.js** @@ -312,12 +306,12 @@ styles.css Розглянемо код по секціях: -- 1) Тут ми отримуємо посилання на всі елементи, до яких будемо звертатися пізніше в коді. +- 1) Тут ми отримуємо посилання на всі елементи, які будемо використовувати в коді. - 2) У цьому розділі ми створюємо функцію, яка використовує вбудований метод `fetch` для виклику нашого бекенду. - 3) `appendMessage` допомагає додавати відповіді, а також те, що ви вводите як користувач. -- 4) Тут ми слухаємо подію submit, читаємо поле введення, додаємо повідомлення користувача в текстову область, викликаємо API, відображаємо відповідь у текстовій області. +- 4) Тут ми слухаємо подію submit, читаємо поле вводу, додаємо повідомлення користувача в текстову область, викликаємо API і відображаємо відповідь у текстовій області. -Давайте подивимося на стилі, тут ви можете проявити фантазію і зробити вигляд таким, як вам подобається, але ось кілька пропозицій: +Тепер розглянемо стилі. Тут можна проявити креативність і зробити вигляд таким, як вам подобається, але ось кілька пропозицій: **styles.css** @@ -338,13 +332,13 @@ styles.css } ``` -З цими трьома класами ви будете стилізувати повідомлення залежно від того, звідки вони надходять — від асистента чи від вас як користувача. Якщо хочете надихнутися, перегляньте папку `solution/frontend/styles.css`. +З цими трьома класами ви зможете стилізувати повідомлення залежно від того, звідки вони надходять — від асистента чи від вас як користувача. Якщо хочете надихнутися, перегляньте папку `solution/frontend/styles.css`. ### Зміна базового URL -Є одна річ, яку ми тут не встановили — це `BASE_URL`. Його не буде відомо, поки ваш бекенд не запуститься. Щоб встановити: +Є одна річ, яку ми тут не налаштували — це `BASE_URL`. Його не буде відомо, поки ваш бекенд не запуститься. Щоб налаштувати: -- Якщо ви запускаєте API локально, він має бути встановлений як `http://localhost:5000`. +- Якщо ви запускаєте API локально, він має бути налаштований на щось на зразок `http://localhost:5000`. - Якщо запускаєте в Codespaces, він має виглядати приблизно як "[name]app.github.dev". ## Завдання @@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard") ### Фронтенд -Також змініть CSS і текст на свій смак, внесіть зміни у *index.html* і *styles.css*. +Також змініть CSS і текст на свій смак, внесіть зміни в *index.html* і *styles.css*. ## Підсумок -Чудово, ви навчилися з нуля створювати персонального асистента за допомогою AI. Ми зробили це, використовуючи моделі GitHub, бекенд на Python і фронтенд на HTML, CSS та JavaScript. +Чудово, ви навчилися з нуля створювати персонального асистента за допомогою AI. Ми зробили це, використовуючи GitHub Models, бекенд на Python і фронтенд на HTML, CSS і JavaScript. ## Налаштування з Codespaces @@ -403,4 +397,4 @@ call_llm(message, "You are Captain Picard") --- **Відмова від відповідальності**: -Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу. \ No newline at end of file +Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу. \ No newline at end of file diff --git a/translations/ur/9-chat-project/README.md b/translations/ur/9-chat-project/README.md index 2e89402e..1fec1cf6 100644 --- a/translations/ur/9-chat-project/README.md +++ b/translations/ur/9-chat-project/README.md @@ -1,8 +1,8 @@