Merge pull request #1503 from microsoft/update-translations

🌐 Update translations via Co-op Translator
softchris-patch-6
chris 4 days ago committed by GitHub
commit b6d3060d66
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -1,15 +1,15 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-28T15:56:03+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:19:42+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "ar"
}
-->
# مشروع الدردشة
هذا المشروع يوضح كيفية بناء مساعد دردشة باستخدام نماذج GitHub.
يُظهر هذا المشروع كيفية بناء مساعد دردشة باستخدام نماذج GitHub.
إليك كيف يبدو المشروع النهائي:
@ -17,23 +17,25 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/screenshot.png" alt="تطبيق الدردشة" width="600">
</div>
بعض السياق، بناء مساعدي دردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، لنبدأ.
بعض السياق، بناء مساعدي الدردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هنا هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، فلنبدأ.
## الاتصال بالذكاء الاصطناعي التوليدي
بالنسبة للجزء الخلفي، نحن نستخدم نماذج 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)
<div>
<img src="./assets/playground.png" alt="منطقة تجربة نماذج GitHub AI" with="600">
<img src="./assets/playground.png" alt="بيئة تجربة نماذج GitHub AI" with="600">
</div>
كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي اخترتها.
كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي تفضلها.
<div>
<img src="./assets/playground-choice.png" alt="اختيار منطقة التجربة" with="600">
<img src="./assets/playground-choice.png" alt="اختيار بيئة التجربة" with="600">
</div>
في هذه الحالة، اخترنا Python، مما يعني أننا سنختار هذا الكود:
### استخدام Python
في هذه الحالة، نختار Python، مما يعني أننا نختار هذا الكود:
```python
"""Run this model in Python
@ -94,11 +96,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")
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## عرضه عبر واجهة برمجة تطبيقات ويب
رائع، لقد انتهينا من جزء الذكاء الاصطناعي، دعونا نرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنرى الكود الخاص بذلك:
رائع، لقد انتهينا من جزء الذكاء الاصطناعي، لنرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنلقِ نظرة على الكود:
### استخدام Python
```python
# api.py
@ -137,9 +141,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
هنا، نقوم بإنشاء واجهة برمجة تطبيقات Flask ونحدد المسار الافتراضي "/" و "/chat". المسار الأخير مخصص لاستخدامه من قبل الواجهة الأمامية لتمرير الأسئلة إليه.
هنا، نقوم بإنشاء واجهة برمجة تطبيقات باستخدام Flask ونحدد المسار الافتراضي "/" و "/chat". المسار الأخير مخصص لاستخدام الواجهة الأمامية لتمرير الأسئلة إليه.
لدمج *llm.py* إليك ما نحتاج إلى القيام به:
لدمج *llm.py* إليك ما نحتاج إلى فعله:
- استيراد دالة `call_llm`:
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
رائع، الآن قمنا بما نحتاج إليه.
رائع، الآن انتهينا مما نحتاج إليه.
## إعداد Cors
### إعداد Cors
يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، وهو مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الواجهة الخلفية والواجهة الأمامية ستعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالواجهة الخلفية.
يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الجزء الخلفي والواجهة الأمامية سيعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالجزء الخلفي. هناك قطعة من الكود في *api.py* تقوم بإعداد هذا:
### استخدام Python
هناك جزء من الكود في *api.py* يقوم بإعداد هذا:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
حاليًا تم إعدادها للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب أن نقوم بتقييده بمجرد الانتقال إلى الإنتاج.
حاليًا تم إعداده للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب تقييده بمجرد الانتقال إلى الإنتاج.
## تشغيل مشروعك
## تشغيل المشروع
لتشغيل مشروعك، تحتاج إلى تشغيل الواجهة الخلفية أولاً ثم الواجهة الأمامية.
حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع الجزء الخلفي؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما:
### استخدام Python
حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع واجهة خلفية؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما:
- تثبيت التبعيات:
@ -209,11 +221,11 @@ CORS(app) # * example.com
python api.py
```
إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن فوقه وانقر على "Port Visibility" واختر "Public".
إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن عليها واختر "Port Visibility" وحدد "Public".
### العمل على واجهة أمامية
الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، دعونا ننشئ واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي:
الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، لنقم بإنشاء واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي:
```text
backend/
@ -241,7 +253,7 @@ styles.css
</html>
```
ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، ومدخل لكتابة الرسالة وزر لإرسال رسالتك إلى الجزء الخلفي. دعونا نلقي نظرة على JavaScript بعد ذلك في *app.js*
ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، وحقل إدخال لكتابة الرسالة، وزر لإرسال رسالتك إلى الواجهة الخلفية. لنلقِ نظرة على JavaScript بعد ذلك في *app.js*
**app.js**
@ -298,14 +310,14 @@ styles.css
})();
```
لنقم بمراجعة الكود حسب القسم:
لنقم بمراجعة الكود لكل قسم:
- 1) هنا نحصل على مرجع لجميع العناصر التي سنشير إليها لاحقًا في الكود.
- 2) في هذا القسم، ننشئ دالة تستخدم طريقة `fetch` المدمجة التي تستدعي الجزء الخلفي.
- 2) في هذا القسم، ننشئ دالة تستخدم الطريقة المدمجة `fetch` التي تستدعي واجهتنا الخلفية.
- 3) `appendMessage` تساعد في إضافة الردود وكذلك ما تكتبه كمستخدم.
- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، وضع رسالة المستخدم في منطقة النص، استدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص.
- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، ووضع رسالة المستخدم في منطقة النص، واستدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص.
دعونا نلقي نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا حقًا وتجعلها تبدو كما تريد، ولكن إليك بعض الاقتراحات:
لنلقِ نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا وتجعله يبدو كما تريد، ولكن إليك بعض الاقتراحات:
**styles.css**
@ -326,14 +338,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".
## المهمة
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
انسخ المحتوى مما تم توجيهه أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك.
انسخ المحتوى من التعليمات أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك.
## الحل
@ -358,17 +369,23 @@ project/
## إضافي
حاول تغيير شخصية مساعد الذكاء الاصطناعي. عندما تستدعي `call_llm` في *api.py* يمكنك تغيير الوسيطة الثانية إلى ما تريد، على سبيل المثال:
حاول تغيير شخصية مساعد الذكاء الاصطناعي.
### بالنسبة لـ Python
عند استدعاء `call_llm` في *api.py* يمكنك تغيير الوسيط الثاني إلى ما تريد، على سبيل المثال:
```python
call_llm(message, "You are Captain Picard")
```
قم أيضًا بتغيير CSS والنص حسب رغبتك، لذا قم بإجراء تغييرات في *index.html* و *styles.css*.
### الواجهة الأمامية
قم أيضًا بتغيير CSS والنصوص حسب رغبتك، لذا قم بإجراء تغييرات في *index.html* و *styles.css*.
## الملخص
رائع، لقد تعلمت من البداية كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، جزء خلفي بلغة Python وواجهة أمامية بـ HTML، CSS و JavaScript.
رائع، لقد تعلمت من الصفر كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، واجهة خلفية بلغة Python وواجهة أمامية باستخدام HTML وCSS وJavaScript.
## الإعداد باستخدام Codespaces
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حساسة أو هامة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-28T15:57:13+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:20:07+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "ar"
}
-->
# تشغيل الكود
# تشغيل الحل
## الإعداد
إنشاء بيئة افتراضية
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## تثبيت التبعيات
```sh
pip install openai flask flask-cors
```
## تشغيل واجهة برمجة التطبيقات (API)
```sh
python api.py
```
## تشغيل الواجهة الأمامية
تأكد من أنك في مجلد الواجهة الأمامية
ابحث عن *app.js*، وقم بتغيير `BASE_URL` إلى عنوان URL الخاص بواجهة برمجة التطبيقات الخلفية لديك
قم بتشغيله
```
npx http-server -p 8000
```
حاول كتابة رسالة في الدردشة، يجب أن ترى استجابة (بشرط أنك تقوم بتشغيل هذا في Codespace أو قمت بإعداد رمز وصول).
## إعداد رمز الوصول (إذا لم تقم بتشغيل هذا في Codespace)
راجع [إعداد PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. قم بتشغيل [الخلفية](./backend/README.md)
1. الآن قم بتشغيل [الواجهة الأمامية](./frontend/README.md)
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:11+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "ar"
}
-->
اختر بيئة التشغيل
- [Python](./python/README.md)
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:49+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "ar"
}
-->
# تشغيل الكود
## الإعداد
إنشاء بيئة افتراضية
```sh
python -m venv venv
source ./venv/bin/activate
```
## تثبيت التبعيات
```sh
pip install openai flask flask-cors
```
## تشغيل واجهة برمجة التطبيقات (API)
```sh
python api.py
```
## تشغيل الواجهة الأمامية
تأكد من أنك في مجلد الواجهة الأمامية
ابحث عن *app.js*، وقم بتغيير `BASE_URL` إلى عنوان URL الخاص بالخادم الخلفي لديك
قم بتشغيله
```
npx http-server -p 8000
```
حاول كتابة رسالة في الدردشة، يجب أن ترى استجابة (بشرط أن تكون تعمل في Codespace أو قد قمت بإعداد رمز الوصول).
## إعداد رمز الوصول (إذا لم تكن تعمل في Codespace)
راجع [إعداد PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**إخلاء المسؤولية**:
تم ترجمة هذه الوثيقة باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار الوثيقة الأصلية بلغتها الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:50:55+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "ar"
}
-->
# تشغيل الكود
```sh
npx http-server -p 3000
```
ابحث عن `BASE_URL` في `app.js` وقم بتغييره ليطابق عنوان URL الخاص بالخادم الخلفي.
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T13:02:46+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:38:25+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "bg"
}
@ -14,7 +14,7 @@ CO_OP_TRANSLATOR_METADATA:
Ето как изглежда завършеният проект:
<div>
<img src="./assets/screenshot.png" alt="Чат приложение" width="600">
<img src="./assets/screenshot.png" alt="Chat app" width="600">
</div>
Малко контекст: създаването на чат асистенти с помощта на генеративен AI е чудесен начин да започнете да учите за AI. В този урок ще научите как да интегрирате генеративен AI в уеб приложение. Да започваме.
@ -33,6 +33,8 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
### Използване на Python
В този случай избираме Python, което означава, че ще използваме този код:
```python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Нека почистим този код малко, за да бъде по-удобен за повторна употреба:
Нека почистим този код малко, за да бъде по-удобен за повторно използване:
```python
def call_llm(prompt: str, system_message: str):
@ -108,6 +110,8 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
Страхотно, завършихме AI частта, нека видим как можем да я интегрираме в Web API. За Web API избираме Flask, но всяка уеб рамка би била подходяща. Ето кода за това:
### Използване на Python
```python
# api.py
from flask import Flask, request, jsonify
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Вторият е предназначен за използване от нашия фронтенд, за да предава въпроси към него.
Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Последният е предназначен за използване от нашия фронтенд, за да предава въпроси.
За да интегрираме *llm.py*, ето какво трябва да направим:
@ -176,9 +180,13 @@ if __name__ == "__main__":
Страхотно, вече сме готови.
### Конфигуриране на Cors
## Конфигуриране на Cors
Трябва да отбележим, че настройваме нещо като CORS, споделяне на ресурси между различни произходи. Това означава, че тъй като нашият бекенд и фронтенд ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда.
Трябва да отбележим, че настройваме нещо като CORS (споделяне на ресурси между различни произходи). Това означава, че тъй като нашият бекенд и фронтенд ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда. Има парче код в *api.py*, което настройва това:
### Използване на Python
Има парче код в *api.py*, което настройва това:
```python
from flask_cors import CORS
@ -191,7 +199,11 @@ CORS(app) # * example.com
## Стартиране на проекта
Добре, имаме *llm.py* и *api.py*, как можем да ги накараме да работят с бекенд? Ето какво трябва да направим:
За да стартирате проекта, първо трябва да стартирате бекенда, а след това фронтенда.
### Използване на Python
Добре, имаме *llm.py* и *api.py*, как можем да ги направим да работят с бекенд? Ето какво трябва да направим:
- Инсталирайте зависимости:
@ -209,11 +221,11 @@ CORS(app) # * example.com
python api.py
```
Ако сте в Codespaces, трябва да отидете в Ports в долната част на редактора, да кликнете с десния бутон върху него и да изберете "Port Visibility" и след това "Public".
Ако сте в Codespaces, трябва да отидете в Ports в долната част на редактора, да кликнете с десния бутон върху него, да изберете "Port Visibility" и да изберете "Public".
### Работа върху фронтенд
Сега, когато имаме работещ API, нека създадем фронтенд за него. Минимален фронтенд, който ще подобрим постепенно. В папка *frontend* създайте следното:
Сега, когато имаме работещ API, нека създадем фронтенд за него. Минимален фронтенд, който ще подобряваме стъпка по стъпка. В папка *frontend* създайте следното:
```text
backend/
@ -302,10 +314,10 @@ styles.css
- 1) Тук получаваме референция към всички елементи, които ще използваме по-късно в кода.
- 2) В тази секция създаваме функция, която използва вградения метод `fetch`, за да извика нашия бекенд.
- 3) `appendMessage` помага да добавим отговори, както и това, което въвеждате като потребител.
- 3) `appendMessage` помага да добавим отговори, както и съобщенията, които потребителят въвежда.
- 4) Тук слушаме събитието за изпращане и четем полето за въвеждане, поставяме съобщението на потребителя в текстовото поле, извикваме API и показваме отговора в текстовото поле.
Нека разгледаме стилизирането, тук можете да бъдете креативни и да го направите както искате, но ето някои предложения:
Нека разгледаме стилизирането, ето къде можете да бъдете креативни и да го направите както искате, но ето някои предложения:
**styles.css**
@ -330,7 +342,7 @@ styles.css
### Промяна на Base Url
Има едно нещо, което не зададохме, и това е `BASE_URL`. Това не е известно, докато вашият бекенд не бъде стартиран. За да го зададете:
Има едно нещо, което не зададохме, и това е `BASE_URL`. Това не е известно, докато бекендът не бъде стартиран. За да го зададете:
- Ако стартирате API локално, трябва да бъде зададено на нещо като `http://localhost:5000`.
- Ако го стартирате в Codespaces, трябва да изглежда нещо като "[name]app.github.dev".
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Копирайте съдържанието от инструкциите по-горе, но не се колебайте да го персонализирате според вашите предпочитания.
Копирайте съдържанието от инструкциите по-горе, но се чувствайте свободни да го персонализирате според вашите предпочитания.
## Решение
@ -358,17 +369,23 @@ project/
## Бонус
Опитайте да промените личността на AI асистента. Когато извиквате `call_llm` в *api.py*, можете да промените втория аргумент на каквото искате, например:
Опитайте да промените личността на AI асистента.
### За Python
Когато извиквате `call_llm` в *api.py*, можете да промените втория аргумент на каквото искате, например:
```python
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
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T13:05:04+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:38:49+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "bg"
}
-->
# Стартиране на код
# Стартиране на решение
## Настройка
Създайте виртуална среда
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Инсталирайте зависимости
```sh
pip install openai flask flask-cors
```
## Стартирайте API
```sh
python api.py
```
## Стартирайте фронтенда
Уверете се, че сте в папката на фронтенда
Намерете *app.js*, променете `BASE_URL` на URL адреса на вашия бекенд
Стартирайте го
```
npx http-server -p 8000
```
Опитайте да напишете съобщение в чата, трябва да видите отговор (ако го стартирате в Codespace или сте настроили токен за достъп).
## Настройка на токен за достъп (ако не го стартирате в Codespace)
Вижте [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Стартирайте [backend](./backend/README.md)
1. Сега стартирайте [frontend](./frontend/README.md)
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:46+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "bg"
}
-->
Изберете вашата среда за изпълнение
- [Python](./python/README.md)
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:49:47+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "bg"
}
-->
# Стартиране на код
## Настройка
Създайте виртуална среда
```sh
python -m venv venv
source ./venv/bin/activate
```
## Инсталирайте зависимости
```sh
pip install openai flask flask-cors
```
## Стартирайте API
```sh
python api.py
```
## Стартирайте фронтенда
Уверете се, че се намирате в папката на фронтенда
Намерете *app.js*, променете `BASE_URL` на URL адреса на вашия бекенд
Стартирайте го
```
npx http-server -p 8000
```
Опитайте да напишете съобщение в чата, трябва да видите отговор (ако го стартирате в Codespace или сте настроили access token).
## Настройка на access token (ако не го стартирате в Codespace)
Вижте [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:53:40+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "bg"
}
-->
# Стартирайте кода
```sh
npx http-server -p 3000
```
Намерете `BASE_URL` в `app.js` и го променете така, че да съответства на URL адреса на бекенда.
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T01:24:22+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:25:13+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "bn"
}
@ -21,19 +21,21 @@ CO_OP_TRANSLATOR_METADATA:
## জেনারেটিভ 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)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
</div>
যেমন বলা হয়েছে, "Code" ট্যাব এবং আপনার পছন্দের রানটাইম নির্বাচন করুন।
যেমনটি আমরা বলেছি, "Code" ট্যাব এবং আপনার পছন্দের রানটাইম নির্বাচন করুন।
<div>
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
এই ক্ষেত্রে আমরা Python নির্বাচন করি, যার অর্থ আমরা এই কোডটি বেছে নেব:
### পাইথন ব্যবহার করা
এই ক্ষেত্রে আমরা পাইথন নির্বাচন করি, যার অর্থ আমরা এই কোডটি বেছে নেব:
```python
"""Run this model in Python
@ -94,19 +96,21 @@ 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 ব্যবহার করছি, তবে যেকোনো ওয়েব ফ্রেমওয়ার্কই ভালো হবে। এর কোডটি এখানে দেখুন:
### পাইথন ব্যবহার করা
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
এখানে, আমরা একটি Flask API তৈরি করি এবং "/" এবং "/chat" নামে দুটি রুট সংজ্ঞায়িত করি। দ্বিতীয়টি আমাদের ফ্রন্টএন্ডের মাধ্যমে প্রশ্ন পাঠানোর জন্য ব্যবহৃত হয়।
এখানে, আমরা একটি Flask API তৈরি করি এবং একটি ডিফল্ট রুট "/" এবং "/chat" সংজ্ঞায়িত করি। পরেরটি আমাদের ফ্রন্টএন্ড থেকে প্রশ্ন পাঠানোর জন্য ব্যবহৃত হয়।
*llm.py* সংযুক্ত করতে আমাদের যা করতে হবে তা হলো:
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
চমৎকার, এখন আমরা যা দরকার তা সম্পন্ন করেছি।
চমৎকার, এখন আমরা যা প্রয়োজন তা সম্পন্ন করেছি।
## Cors কনফিগার করুন
### Cors কনফিগার করুন
আমরা উল্লেখ করতে চাই যে আমরা CORS (cross-origin resource sharing) সেট আপ করেছি। এর মানে হলো আমাদের ব্যাকএন্ড এবং ফ্রন্টএন্ড ভিন্ন পোর্টে চলবে, তাই আমাদের ফ্রন্টএন্ডকে ব্যাকএন্ডে কল করার অনুমতি দিতে হবে।
আমাদের উল্লেখ করা উচিত যে আমরা Cors, অর্থাৎ ক্রস-অরিজিন রিসোর্স শেয়ারিং সেট আপ করেছি। এর মানে হলো আমাদের ব্যাকএন্ড এবং ফ্রন্টএন্ড আলাদা পোর্টে চলবে, তাই আমাদের ব্যাকএন্ডে ফ্রন্টএন্ড কল করার অনুমতি দিতে হবে। *api.py* ফাইলের একটি কোড অংশ এটি সেট আপ করে:
### পাইথন ব্যবহার করা
*api.py* ফাইলে একটি কোড অংশ রয়েছে যা এটি সেট আপ করে:
```python
from flask_cors import CORS
@ -187,13 +195,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
এখন এটি "*" অর্থাৎ সব অরিজিনের জন্য সেট করা হয়েছে, যা কিছুটা অনিরাপদ। প্রোডাকশনে যাওয়ার সময় এটি সীমাবদ্ধ করা উচিত।
এখন এটি "*" অর্থাৎ সব উৎসের জন্য সেট করা হয়েছে, যা কিছুটা অনিরাপদ। প্রোডাকশনে যাওয়ার সময় এটি সীমাবদ্ধ করা উচিত।
## আপনার প্রকল্প চালান
ঠিক আছে, আমাদের *llm.py* এবং *api.py* আছে, কীভাবে আমরা এটি ব্যাকএন্ডের সাথে কাজ করব? দুটি জিনিস করতে হবে:
আপনার প্রকল্প চালানোর জন্য, প্রথমে আপনার ব্যাকএন্ড এবং তারপর আপনার ফ্রন্টএন্ড চালু করতে হবে।
### পাইথন ব্যবহার করা
- ডিপেনডেন্সি ইনস্টল করুন:
ঠিক আছে, আমাদের কাছে *llm.py* এবং *api.py* রয়েছে, কীভাবে আমরা এটি একটি ব্যাকএন্ডের সাথে কাজ করব? এখানে দুটি জিনিস করতে হবে:
- ডিপেন্ডেন্সি ইনস্টল করুন:
```sh
cd backend
@ -213,7 +225,7 @@ CORS(app) # * example.com
### ফ্রন্টএন্ডে কাজ করুন
এখন আমাদের API চালু এবং চলমান, চলুন এর জন্য একটি ফ্রন্টএন্ড তৈরি করি। একটি ন্যূনতম ফ্রন্টএন্ড যা আমরা ধাপে ধাপে উন্নত করব। একটি *frontend* ফোল্ডারে নিম্নলিখিত তৈরি করুন:
এখন যেহেতু আমাদের API চালু এবং চলমান, আসুন এর জন্য একটি ফ্রন্টএন্ড তৈরি করি। একটি ন্যূনতম ফ্রন্টএন্ড যা আমরা ধাপে ধাপে উন্নত করব। একটি *frontend* ফোল্ডারে নিম্নলিখিত তৈরি করুন:
```text
backend/
@ -223,7 +235,7 @@ app.js
styles.css
```
চলুন শুরু করি **index.html** দিয়ে:
চলুন **index.html** দিয়ে শুরু করি:
```html
<html>
@ -241,7 +253,7 @@ styles.css
</html>
```
উপরেরটি একটি চ্যাট উইন্ডো সমর্থন করার জন্য প্রয়োজনীয় ন্যূনতম জিনিস, কারণ এটি একটি textarea নিয়ে গঠিত যেখানে বার্তাগুলি রেন্ডার করা হবে, একটি ইনপুট যেখানে বার্তা টাইপ করা হবে এবং একটি বোতাম যা আপনার বার্তাটি ব্যাকএন্ডে পাঠাবে। চলুন *app.js* এ JavaScript দেখি
উপরেরটি একটি চ্যাট উইন্ডো সমর্থন করার জন্য প্রয়োজনীয় ন্যূনতম জিনিস, কারণ এটি একটি টেক্সট এরিয়া নিয়ে গঠিত যেখানে বার্তাগুলি রেন্ডার করা হবে, একটি ইনপুট যেখানে বার্তা টাইপ করা হবে এবং একটি বোতাম যা আপনার বার্তাটি ব্যাকএন্ডে পাঠাবে। পরবর্তীটি *app.js* এ জাভাস্ক্রিপ্ট দেখুন
**app.js**
@ -298,14 +310,14 @@ styles.css
})();
```
চলুন কোডটি বিভাগ অনুযায়ী দেখি:
চলুন কোডটি প্রতিটি অংশে বিশ্লেষণ করি:
- ১) এখানে আমরা আমাদের সমস্ত এলিমেন্টের রেফারেন্স পাই যা আমরা পরে কোডে উল্লেখ করব।
- ১) এখানে আমরা আমাদের সমস্ত উপাদানের রেফারেন্স পাই যা আমরা পরে কোডে উল্লেখ করব।
- ২) এই অংশে, আমরা একটি ফাংশন তৈরি করি যা বিল্ট-ইন `fetch` মেথড ব্যবহার করে আমাদের ব্যাকএন্ডে কল করে।
- ৩) `appendMessage` ব্যবহারকারীর টাইপ করা বার্তা এবং রেসপন্স যোগ করতে সাহায্য করে।
- ) এখানে আমরা submit ইভেন্টটি শুনি এবং ইনপুট ফিল্ডটি পড়ি, ব্যবহারকারীর বার্তাটি textarea-তে রাখি, API-তে কল করি এবং রেসপন্সটি textarea-তে রেন্ডার করি।
- ) এখানে আমরা সাবমিট ইভেন্টটি শুনি এবং ইনপুট ফিল্ডটি পড়ি, ব্যবহারকারীর বার্তাটি টেক্সট এরিয়াতে রাখি, API কল করি এবং সেই রেসপন্সটি টেক্সট এরিয়াতে রেন্ডার করি।
চলুন স্টাইলিং দেখি, এখানে আপনি আপনার ইচ্ছামতো ডিজাইন করতে পারেন, তবে কিছু পরামর্শ এখানে দেওয়া হলো:
চলুন স্টাইলিং দেখি, এখানে আপনি আপনার ইচ্ছামতো ডিজাইন করতে পারেন, তবে এখানে কিছু পরামর্শ দেওয়া হলো:
**styles.css**
@ -326,18 +338,18 @@ styles.css
}
```
এই তিনটি ক্লাসের মাধ্যমে আপনি বার্তাগুলিকে স্টাইল করতে পারেন, এটি অ্যাসিস্ট্যান্ট বা ব্যবহারকারীর কাছ থেকে এসেছে কিনা তার উপর নির্ভর করে। অনুপ্রাণিত হতে চাইল`solution/frontend/styles.css` ফোল্ডারটি দেখুন।
এই তিনটি ক্লাসের মাধ্যমে আপনি বার্তাগুলিকে আলাদাভাবে স্টাইল করতে পারেন, এটি অ্যাসিস্ট্যান্ট বা ব্যবহারকারীর কাছ থেকে এসেছে কিনা তার উপর ভিত্তি করে। যদি আপনি অনুপ্রাণিত হতে চান, তব`solution/frontend/styles.css` ফোল্ডারটি দেখুন।
### Base Url পরিবর্তন করুন
### বেস URL পরিবর্তন করুন
এখানে একটি জিনিস আমরা সেট করিনি, সেটি হলো `BASE_URL`, এটি আপনার ব্যাকএন্ড শুরু না হওয়া পর্যন্ত জানা যায় না। এটি সেট করতে:
এখানে একটি জিনিস আমরা সেট করিনি এবং তা হলো `BASE_URL`, এটি আপনার ব্যাকএন্ড শুরু না হওয়া পর্যন্ত জানা যায় না। এটি সেট করতে:
- যদি আপনি API লোকালভাবে চালান, এটি কিছুটা এরকম হওয়া উচিত: `http://localhost:5000`
- যদি Codespaces-এ চালান, এটি কিছুটা এরকম দেখাবে: "[name]app.github.dev"।
## অ্যাসাইনমেন্ট
আপনার নিজস্ব *project* ফোল্ডার তৈরি করুন যার কন্টেন্ট এরকম:
আপনার নিজের *project* ফোল্ডার তৈরি করুন যার কন্টেন্ট নিম্নরূপ:
```text
project/
@ -346,38 +358,43 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
উপরের নির্দেশনা থেকে কন্টেন্ট কপি করুন, তবে আপনার ইচ্ছামতো কাস্টমাইজ করতে পারেন।
উপরের নির্দেশনা থেকে কন্টেন্ট কপি করুন তবে আপনার পছন্দমতো কাস্টমাইজ করতে পারেন।
## সমাধান
[Solution](./solution/README.md)
[সমাধান](./solution/README.md)
## বোনাস
AI অ্যাসিস্ট্যান্টের ব্যক্তিত্ব পরিবর্তন করার চেষ্টা করুন। যখন আপনি *api.py*-তে `call_llm` কল করেন, তখন দ্বিতীয় আর্গুমেন্টটি আপনার ইচ্ছামতো পরিবর্তন করতে পারেন, যেমন:
AI অ্যাসিস্ট্যান্টের ব্যক্তিত্ব পরিবর্তন করার চেষ্টা করুন।
### পাইথনের জন্য
যখন আপনি *api.py*`call_llm` কল করেন, তখন আপনি দ্বিতীয় আর্গুমেন্টটি আপনার ইচ্ছামতো পরিবর্তন করতে পারেন, উদাহরণস্বরূপ:
```python
call_llm(message, "You are Captain Picard")
```
*index.html* এবং *styles.css*-এ পরিবর্তন করে CSS এবং টেক্সটও আপনার ইচ্ছামতো পরিবর্তন করুন।
### ফ্রন্টএন্ড
CSS এবং টেক্সটও আপনার ইচ্ছামতো পরিবর্তন করুন, তাই *index.html* এবং *styles.css* এ পরিবর্তন করুন।
## সারসংক্ষেপ
চমৎকার, আপনি শূন্য থেকে শিখেছেন কীভাবে AI ব্যবহার করে একটি ব্যক্তিগত অ্যাসিস্ট্যান্ট তৈরি করতে হয়। আমরা এটি করেছি GitHub Models, Python ব্যাকএন্ড এবং HTML, CSS এবং JavaScript ফ্রন্টএন্ড ব্যবহার করে।
চমৎকার, আপনি শিখেছেন কীভাবে শুরু থেকে একটি ব্যক্তিগত অ্যাসিস্ট্যান্ট তৈরি করতে হয়। আমরা এটি করেছি GitHub Models, পাইথনে একটি ব্যাকএন্ড এবং HTML, CSS এবং জাভাস্ক্রিপ্টে একটি ফ্রন্টএন্ড ব্যবহার করে।
## Codespaces দিয়ে সেট আপ করুন
- নেভিগেট করুন: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- টেমপ্লেট থেকে তৈরি করুন (নিশ্চিত করুন আপনি GitHub-এ লগ ইন করেছেন) উপরের ডানদিকে:
- এখানে যান: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- একটি টেমপ্লেট থেকে তৈরি করুন (নিশ্চিত করুন আপনি GitHub-এ লগ ইন করেছেন) উপরের ডানদিকে:
![টেমপ্লেট থেকে তৈরি করুন](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bn.png)
- আপনার রিপোতে গেলে, একটি Codespace তৈরি করুন:
- একবার আপনার রিপোতে গেলে, একটি Codespace তৈরি করুন:
![Codespace তৈরি করুন](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bn.png)
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T01:27:59+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:25:42+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "bn"
}
-->
# কোড চালানো
# সমাধান চালান
## সেটআপ
ভার্চুয়াল এনভায়রনমেন্ট তৈরি করুন
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## নির্ভরশীলতাগুলি ইনস্টল করুন
```sh
pip install openai flask flask-cors
```
## এপিআই চালান
```sh
python api.py
```
## ফ্রন্টএন্ড চালান
নিশ্চিত করুন যে আপনি ফ্রন্টএন্ড ফোল্ডারে অবস্থান করছেন
*app.js* ফাইলটি খুঁজুন, `BASE_URL`-কে আপনার ব্যাকএন্ড URL-এ পরিবর্তন করুন
এটি চালান
```
npx http-server -p 8000
```
চ্যাটে একটি বার্তা টাইপ করার চেষ্টা করুন, আপনি একটি উত্তর দেখতে পাবেন (যদি আপনি এটি Codespace-এ চালাচ্ছেন বা একটি অ্যাক্সেস টোকেন সেটআপ করেছেন)।
## অ্যাক্সেস টোকেন সেটআপ করুন (যদি আপনি এটি Codespace-এ চালাচ্ছেন না)
[ব্যক্তিগত অ্যাক্সেস টোকেন সেটআপ](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) দেখুন
1. [ব্যাকএন্ড](./backend/README.md) চালু করুন
1. এখন [ফ্রন্টএন্ড](./frontend/README.md) চালু করুন
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় রচিত সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:52+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "bn"
}
-->
আপনার রানটাইম নির্বাচন করুন
- [Python](./python/README.md)
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় লেখা সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ ব্যবহার করার পরামর্শ দেওয়া হচ্ছে। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:46:54+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "bn"
}
-->
# কোড চালান
## সেট আপ
ভার্চুয়াল এনভায়রনমেন্ট তৈরি করুন
```sh
python -m venv venv
source ./venv/bin/activate
```
## নির্ভরশীলতা ইনস্টল করুন
```sh
pip install openai flask flask-cors
```
## এপিআই চালান
```sh
python api.py
```
## ফ্রন্টএন্ড চালান
নিশ্চিত করুন যে আপনি ফ্রন্টএন্ড ফোল্ডারে অবস্থান করছেন
*app.js* ফাইলটি খুঁজুন, `BASE_URL` পরিবর্তন করে আপনার ব্যাকএন্ড URL দিন
এটি চালান
```
npx http-server -p 8000
```
চ্যাটে একটি বার্তা টাইপ করার চেষ্টা করুন, আপনি একটি প্রতিক্রিয়া দেখতে পাবেন (যদি আপনি এটি Codespace-এ চালাচ্ছেন বা একটি অ্যাক্সেস টোকেন সেট আপ করেছেন)।
## অ্যাক্সেস টোকেন সেট আপ করুন (যদি আপনি এটি Codespace-এ চালাচ্ছেন না)
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) দেখুন
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:51:39+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "bn"
}
-->
# কোড চালান
```sh
npx http-server -p 3000
```
`app.js`-এ `BASE_URL` খুঁজুন এবং এটি ব্যাকএন্ডের URL-এর সাথে মিলিয়ে পরিবর্তন করুন।
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T01:25:36+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:28:25+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "br"
}
@ -17,14 +17,14 @@ Aqui está como o projeto finalizado se parece:
<img src="./assets/screenshot.png" alt="Aplicativo de Chat" width="600">
</div>
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á nesta lição é como integrar IA generativa em um aplicativo web. Vamos começar.
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-se à IA generativa
## Conectando à 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. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
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).
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" width="600">
<img src="./assets/playground.png" alt="Playground de IA dos Modelos do GitHub" width="600">
</div>
Como mencionado, selecione a aba "Code" e o runtime escolhido.
@ -33,6 +33,8 @@ Como mencionado, selecione a aba "Code" e o runtime escolhido.
<img src="./assets/playground-choice.png" alt="Escolha no playground" width="600">
</div>
### Usando Python
Neste caso, selecionamos Python, o que significa que escolhemos este código:
```python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Vamos limpar este código um pouco para torná-lo reutilizável:
Vamos limpar um pouco esse código para torná-lo reutilizável:
```python
def call_llm(prompt: str, system_message: str):
@ -94,19 +96,21 @@ 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 prompt de sistema, e a função retorna o resultado.
Com esta função `call_llm`, agora podemos passar um prompt e um system prompt, 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 prompt de sistema assim:
Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o system prompt assim:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Exponha via uma API Web
## Exponha-o 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 integrá-la em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código:
### Usando Python
```python
# api.py
@ -137,7 +141,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 ao uso pelo frontend para enviar perguntas.
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.
Para integrar o *llm.py*, aqui está o que precisamos fazer:
@ -176,9 +180,13 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer:
Ótimo, agora fizemos o que era necessário.
### Configurar Cors
## 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. Há um trecho de código em *api.py* que configura isso:
### Usando Python
Há um trecho de código em *api.py* que configura isso:
```python
from flask_cors import CORS
@ -191,6 +199,10 @@ Atualmente, está configurado para permitir "*" (todas as origens), o que é um
## Execute seu projeto
Para executar seu projeto, você precisa iniciar primeiro o backend e depois o frontend.
### Usando Python
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:
@ -209,11 +221,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, vá para Ports na parte inferior do editor, clique com o botão direito sobre ele, selecione "Port Visibility" e escolha "Public".
### Trabalhar em um frontend
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:
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:
```text
backend/
@ -241,7 +253,7 @@ Vamos começar com **index.html**:
</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 seguida, no arquivo *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 *app.js*.
**app.js**
@ -302,10 +314,10 @@ 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.
- 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ê, como usuário, digita.
- 3) `appendMessage` ajuda a adicionar respostas, bem como o que você digita como usuário.
- 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 fazer com que pareça como quiser, mas aqui estão algumas sugestões:
Agora vamos olhar o estilo. Aqui você pode ser criativo e personalizar como quiser, mas aqui estão algumas sugestões:
**styles.css**
@ -326,18 +338,18 @@ Agora vamos olhar o estilo. Aqui você pode ser criativo e fazer com que pareça
}
```
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`.
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`.
### Alterar Base Url
### Alterar a Base Url
uma coisa que não configuramos: `BASE_URL`. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo:
algo que não configuramos: `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 estiver rodando em Codespaces, deve ser algo como "[name]app.github.dev".
- Se estiver usando Codespaces, deve ser algo como "[nome]app.github.dev".
## Tarefa
Crie sua própria pasta *project* com o conteúdo assim:
Crie sua própria pasta *project* com o seguinte conteúdo:
```text
project/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Copie o conteúdo do que foi instruído acima, mas sinta-se à vontade para personalizar como preferir.
Copie o conteúdo das instruções acima, mas sinta-se à vontade para personalizar como preferir.
## Solução
@ -358,12 +369,18 @@ Copie o conteúdo do que foi instruído acima, mas sinta-se à vontade para pers
## Bônus
Tente mudar a personalidade do assistente de IA. Quando você chamar `call_llm` em *api.py*, pode alterar o segundo argumento para o que quiser, por exemplo:
Tente alterar a personalidade do assistente de IA.
### Para Python
Ao chamar `call_llm` em *api.py*, você pode alterar o segundo argumento para o que quiser, por exemplo:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html* e *styles.css*.
## Resumo
@ -386,4 +403,4 @@ Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html*
---
**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 realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
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.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T01:28:19+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:28:49+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "br"
}
-->
# Executar o código
# Executar solução
## Configuração
Crie um ambiente virtual
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Instale as dependências
```sh
pip install openai flask flask-cors
```
## Execute a API
```sh
python api.py
```
## Execute o frontend
Certifique-se de estar na pasta do frontend
Localize o arquivo *app.js* e altere `BASE_URL` para a URL do seu backend
Execute o frontend
```
npx http-server -p 8000
```
Tente digitar uma mensagem no chat, você deverá ver uma resposta (desde que esteja executando isso em um Codespace ou tenha configurado um token de acesso).
## Configure o token de acesso (caso não esteja executando isso em um Codespace)
Veja [Configurar PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Inicie o [backend](./backend/README.md)
1. Agora inicie o [frontend](./frontend/README.md)
---
**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 equivocadas decorrentes do uso desta tradução.
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.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:43:15+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "br"
}
-->
Escolha seu ambiente de execução
- [Python](./python/README.md)
---
**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 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.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:47:31+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "br"
}
-->
# Executar código
## Configuração
Crie um ambiente virtual
```sh
python -m venv venv
source ./venv/bin/activate
```
## Instalar dependências
```sh
pip install openai flask flask-cors
```
## Executar API
```sh
python api.py
```
## Executar frontend
Certifique-se de estar na pasta do frontend
Localize *app.js*, altere `BASE_URL` para a URL do seu backend
Execute
```
npx http-server -p 8000
```
Tente digitar uma mensagem no chat, você deve ver uma resposta (desde que esteja executando isso em um Codespace ou tenha configurado um token de acesso).
## Configurar token de acesso (se você não estiver executando isso em um Codespace)
Veja [Configurar PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**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 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.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:03+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "br"
}
-->
# Execute o código
```sh
npx http-server -p 3000
```
Localize o `BASE_URL` em `app.js` e altere para corresponder ao URL do backend.
---
**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 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.

@ -1,15 +1,15 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T13:01:29+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:37:08+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "cs"
}
-->
# Chat projekt
Tento chat projekt ukazuje, jak vytvořit Chat Asistenta pomocí GitHub Models.
Tento chat projekt ukazuje, jak vytvořit Chat Assistenta pomocí GitHub Models.
Takto vypadá hotový projekt:
@ -17,9 +17,9 @@ Takto vypadá hotový projekt:
<img src="./assets/screenshot.png" alt="Chat app" width="600">
</div>
Trocha 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.
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.
## Připojení ke generativní AI
## Připojení k 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)
@ -33,6 +33,8 @@ Jak jsme zmínili, vyberte záložku "Code" a svůj zvolený runtime.
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
### Použití Pythonu
V tomto případě vybereme Python, což znamená, že použijeme tento kód:
```python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Trochu tento kód upravíme, aby byl znovu použitelný:
Trochu upravme tento kód, aby byl znovu použitelný:
```python
def call_llm(prompt: str, system_message: str):
@ -106,7 +108,9 @@ 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 vhodný. Podívejme se na kód:
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:
### Použití Pythonu
```python
# api.py
@ -139,7 +143,7 @@ if __name__ == "__main__":
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.
Pro integraci *llm.py* je třeba udělat následující:
Pro integraci *llm.py* potřebujeme udělat následující:
- Importovat funkci `call_llm`:
@ -176,9 +180,13 @@ Pro integraci *llm.py* je třeba udělat následující:
Skvělé, nyní máme hotovo, co jsme potřebovali.
### Nastavení Cors
## 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 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. V *api.py* je kód, který to nastavuje:
### Použití Pythonu
V *api.py* je kód, který to nastavuje:
```python
from flask_cors import CORS
@ -191,7 +199,11 @@ Momentálně je nastaveno na povolení "*" což znamená všechny originy, což
## Spuštění projektu
Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Jsou dvě věci, které musíme udělat:
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:
- Nainstalovat závislosti:
@ -213,7 +225,7 @@ Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Jsou
### Práce na frontendu
Nyní, když máme API spuštěné, vytvoříme frontend pro tento projekt. 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. Minimální frontend, který budeme postupně vylepšovat. Ve složce *frontend* vytvořte následující:
```text
backend/
@ -330,10 +342,10 @@ S těmito třemi třídami budete stylovat zprávy různě podle toho, odkud poc
### Změna Base Url
Jedna věc, kterou jsme zde nenastavili, je `BASE_URL`, která není známa, dokud není backend spuštěn. Nastavte ji takto:
Jedna věc, kterou jsme zde nenastavili, byla `BASE_URL`, která 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 něco jako "[name]app.github.dev".
- Pokud běží v Codespaces, mělo by vypadat jako "[name]app.github.dev".
## Úkol
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Zkopírujte obsah z toho, co bylo uvedeno výše, ale klidně si jej přizpůsobte podle svých představ.
@ -358,32 +369,38 @@ Zkopírujte obsah z toho, co bylo uvedeno výše, ale klidně si jej přizpůsob
## Bonus
Zkuste změnit osobnost AI asistenta. Když voláte `call_llm` v *api.py*, můžete změnit druhý argument na cokoli chcete, například:
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:
```python
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*.
## Shrnutí
Skvělé, naučili jste se od základů, 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 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.
## 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řit ze šablony](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.cs.png)
![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.cs.png)
- Jakmile budete ve svém repozitáři, vytvořte Codespace:
- Jakmile jste ve svém repozitáři, vytvořte Codespace:
![Vytvořit codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.cs.png)
![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.cs.png)
To by mělo spustit prostředí, se kterým nyní můžete pracovat.
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší 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 závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
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.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T13:04:41+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:37:28+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "cs"
}
-->
# Spuštění kódu
# Spuštění řešení
## Nastavení
Vytvořte virtuální prostředí
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Instalace závislostí
```sh
pip install openai flask flask-cors
```
## Spuštění API
```sh
python api.py
```
## Spuštění frontendové části
Ujistěte se, že se nacházíte ve složce frontend
Najděte *app.js*, změňte `BASE_URL` na URL vašeho backendu
Spusťte to
```
npx http-server -p 8000
```
Zkuste napsat zprávu do chatu, měli byste vidět odpověď (za předpokladu, že to spouštíte v Codespace nebo máte nastavený přístupový token).
## Nastavení přístupového tokenu (pokud to nespouštíte v Codespace)
Viz [Nastavení PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Spusťte [backend](./backend/README.md)
1. Nyní spusťte [frontend](./frontend/README.md)
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když 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 závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
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.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:32+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "cs"
}
-->
Vyberte svůj runtime
- [Python](./python/README.md)
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když 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 závazný 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.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:49:26+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "cs"
}
-->
# Spuštění kódu
## Nastavení
Vytvořte virtuální prostředí
```sh
python -m venv venv
source ./venv/bin/activate
```
## Instalace závislostí
```sh
pip install openai flask flask-cors
```
## Spuštění API
```sh
python api.py
```
## Spuštění frontendové části
Ujistěte se, že se nacházíte ve složce frontend
Najděte *app.js*, změňte `BASE_URL` na URL vašeho backendu
Spusťte aplikaci
```
npx http-server -p 8000
```
Zkuste napsat zprávu do chatu, měli byste vidět odpověď (za předpokladu, že to spouštíte v Codespace nebo máte nastavený přístupový token).
## Nastavení přístupového tokenu (pokud to nespouštíte v Codespace)
Podívejte se na [Nastavení PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Prohlášení**:
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 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 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.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:53:26+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "cs"
}
-->
# Spusťte kód
```sh
npx http-server -p 3000
```
Najděte `BASE_URL` v `app.js` a změňte jej tak, aby odpovídal URL backendu.
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte 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.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T09:46:31+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:31:50+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "da"
}
@ -21,7 +21,7 @@ Lidt kontekst: At bygge chatassistenter ved hjælp af generativ AI er en fantast
## Forbindelse til generativ AI
Til backend bruger vi GitHub Models. Det er en fremragende tjeneste, der giver dig mulighed for at bruge AI gratis. Gå til dens playground og hent kode, der svarer til det backend-sprog, du har valgt. Her ser det sådan ud på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Til backend bruger vi GitHub Models. Det er en fantastisk tjeneste, der giver dig mulighed for at bruge AI gratis. Gå til dens playground og hent kode, der svarer til det valgte backend-sprog. Her er, hvordan det ser ud på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -33,6 +33,8 @@ Som nævnt skal du vælge fanen "Code" og din valgte runtime.
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
### Brug af Python
I dette tilfælde vælger vi Python, hvilket betyder, at vi vælger denne kode:
```python
@ -96,9 +98,9 @@ def call_llm(prompt: str, system_message: str):
Med denne funktion `call_llm` kan vi nu tage en prompt og en systemprompt, og funktionen returnerer resultatet.
### Tilpas AI Assistenten
### Tilpas AI Assistent
Hvis du vil tilpasse AI-assistenten, kan du specificere, hvordan du vil have den til at opføre sig, ved at udfylde systemprompten som vist her:
Hvis du vil tilpasse AI-assistenten, kan du specificere, hvordan du vil have den til at opføre sig ved at udfylde systemprompten som følger:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Eksponér det via en Web API
Fantastisk, vi har AI-delen klar. Lad os se, hvordan vi kan integrere det i en Web API. Til Web API vælger vi Flask, men enhver webframework burde fungere. Her er koden:
Fantastisk, vi har AI-delen klar, lad os se, hvordan vi kan integrere det i en Web API. Til Web API vælger vi Flask, men enhver webframework burde fungere. Lad os se koden for det:
### Brug af Python
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Her opretter vi en Flask API og definerer en standardrute "/" og "/chat". Sidstnævnte er beregnet til at blive brugt af vores frontend til at sende spørgsmål til den.
Her opretter vi en Flask API og definerer en standardroute "/" og "/chat". Sidstnævnte er beregnet til at blive brugt af vores frontend til at sende spørgsmål til den.
For at integrere *llm.py* skal vi gøre følgende:
@ -148,7 +152,7 @@ For at integrere *llm.py* skal vi gøre følgende:
from flask import Flask, request
```
- Kalde den fra "/chat"-ruten:
- Kalde den fra "/chat"-routen:
```python
@app.route("/hello", methods=["POST"])
@ -163,7 +167,7 @@ For at integrere *llm.py* skal vi gøre følgende:
})
```
Her parser vi den indkommende anmodning for at hente egenskaben `message` fra JSON-bodyen. Derefter kalder vi LLM med dette kald:
Her parser vi den indkommende anmodning for at hente `message`-egenskaben fra JSON-bodyen. Derefter kalder vi LLM med dette kald:
```python
response = call_llm(message, "You are a helpful assistant")
@ -176,9 +180,13 @@ For at integrere *llm.py* skal vi gøre følgende:
Fantastisk, nu har vi gjort, hvad der er nødvendigt.
### Konfigurer Cors
## Konfigurer Cors
Vi bør nævne, at vi opsætter noget som CORS, cross-origin resource sharing. Det betyder, at fordi vores backend og frontend vil køre på forskellige porte, skal vi tillade frontenden at kalde ind i backenden.
Vi bør nævne, at vi opsætter noget som CORS, cross-origin resource sharing. Det betyder, at fordi vores backend og frontend vil køre på forskellige porte, skal vi tillade frontenden at kalde backend. Der er et stykke kode i *api.py*, der opsætter dette:
### Brug af Python
Der er et stykke kode i *api.py*, der opsætter dette:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Lige nu er det sat op til at tillade "*", hvilket er alle oprindelser, og det er lidt usikkert. Vi bør begrænse det, når vi går i produktion.
Lige nu er det opsat til at tillade "*", hvilket er alle oprindelser, og det er lidt usikkert. Vi bør begrænse det, når vi går i produktion.
## Kør dit projekt
Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til at fungere med en backend? Der er to ting, vi skal gøre:
For at køre dit projekt skal du først starte din backend og derefter din frontend.
### Brug af Python
Ok, så vi har *llm.py* og *api.py*, hvordan kan vi få dette til at fungere med en backend? Der er to ting, vi skal gøre:
- Installere afhængigheder:
@ -203,17 +215,17 @@ Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til at fungere med
pip install openai flask flask-cors openai
```
- Starte API'en:
- Starte API'en
```sh
python api.py
```
Hvis du er i Codespaces, skal du gå til Ports nederst i editoren, højreklikke på det og klikke på "Port Visibility" og vælge "Public".
Hvis du er i Codespaces, skal du gå til Ports i den nederste del af editoren, højreklikke på det og klikke på "Port Visibility" og vælge "Public".
### Arbejd på en frontend
Nu hvor vi har en API oppe at køre, lad os oprette en frontend til dette. En helt basal frontend, som vi vil forbedre trinvis. I en *frontend*-mappe skal du oprette følgende:
Nu hvor vi har en API oppe og køre, lad os oprette en frontend til dette. En helt basal frontend, som vi vil forbedre trinvis. I en *frontend*-mappe skal du oprette følgende:
```text
backend/
@ -241,7 +253,7 @@ Lad os starte med **index.html**:
</html>
```
Ovenstående er det absolut minimum, du har brug for til at understøtte et chatvindue, da det består af en textarea, hvor beskeder vil blive vist, et inputfelt til at skrive beskeder og en knap til at sende beskeden til backend. Lad os se på JavaScript i *app.js*.
Ovenstående er det absolut minimum, du har brug for for at understøtte et chatvindue, da det består af en textarea, hvor beskeder vil blive vist, et inputfelt til at skrive beskeden og en knap til at sende din besked til backenden. Lad os se på JavaScript næste i *app.js*
**app.js**
@ -303,9 +315,9 @@ Lad os gennemgå koden sektion for sektion:
- 1) Her får vi en reference til alle vores elementer, som vi vil referere til senere i koden.
- 2) I denne sektion opretter vi en funktion, der bruger den indbyggede `fetch`-metode til at kalde vores backend.
- 3) `appendMessage` hjælper med at tilføje svar samt det, du som bruger skriver.
- 4) Her lytter vi til submit-eventet, og vi ender med at læse inputfeltet, placere brugerens besked i textarea, kalde API'en og vise svaret i textarea.
- 4) Her lytter vi til submit-eventet, og vi ender med at læse inputfeltet, placere brugerens besked i tekstområdet, kalde API'en og vise svaret i tekstområdet.
Lad os se på styling næste gang. Her kan du virkelig gå amok og få det til at se ud, som du vil, men her er nogle forslag:
Lad os se på styling næste. Her kan du virkelig gå amok og få det til at se ud, som du vil, men her er nogle forslag:
**styles.css**
@ -326,9 +338,9 @@ Lad os se på styling næste gang. Her kan du virkelig gå amok og få det til a
}
```
Med disse tre klasser vil du style beskeder forskelligt afhængigt af, om de kommer fra assistenten eller dig som bruger. Hvis du vil have inspiration, kan du tjekke `solution/frontend/styles.css`-mappen.
Med disse tre klasser vil du style beskeder forskelligt afhængigt af, om de kommer fra assistenten eller dig som bruger. Hvis du vil inspireres, kan du tjekke `solution/frontend/styles.css`-mappen.
### Skift Base Url
### Ændring af Base Url
Der var én ting, vi ikke satte, og det var `BASE_URL`. Dette er ikke kendt, før din backend er startet. For at sætte det:
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Kopier indholdet fra det, der blev instrueret ovenfor, men føl dig fri til at tilpasse det efter din smag.
@ -358,12 +369,18 @@ Kopier indholdet fra det, der blev instrueret ovenfor, men føl dig fri til at t
## Bonus
Prøv at ændre personligheden af AI-assistenten. Når du kalder `call_llm` i *api.py*, kan du ændre det andet argument til det, du ønsker, for eksempel:
Prøv at ændre personligheden af AI-assistenten.
### For Python
Når du kalder `call_llm` i *api.py*, kan du ændre det andet argument til det, du ønsker, for eksempel:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
Ændr også CSS og tekst efter din smag, så lav ændringer i *index.html* og *styles.css*.
## Opsummering
@ -386,4 +403,4 @@ Fantastisk, du har lært fra bunden, hvordan man opretter en personlig assistent
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T09:48:56+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:32:12+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "da"
}
-->
# Kør kode
# Kør løsning
## Opsætning
Opret virtuelt miljø
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Installer afhængigheder
```sh
pip install openai flask flask-cors
```
## Kør API
```sh
python api.py
```
## Kør frontend
Sørg for, at du står i frontend-mappen
Find *app.js*, og ændr `BASE_URL` til URL'en for din backend
Kør det
```
npx http-server -p 8000
```
Prøv at skrive en besked i chatten, du bør se et svar (forudsat at du kører dette i en Codespace eller har opsat en adgangstoken).
## Opsæt adgangstoken (hvis du ikke kører dette i en Codespace)
Se [Opsæt PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Start [backend](./backend/README.md)
1. Start derefter [frontend](./frontend/README.md)
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:43:45+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "da"
}
-->
Vælg din runtime
- [Python](./python/README.md)
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:48:15+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "da"
}
-->
# Kør kode
## Opsætning
Opret virtuelt miljø
```sh
python -m venv venv
source ./venv/bin/activate
```
## Installer afhængigheder
```sh
pip install openai flask flask-cors
```
## Kør API
```sh
python api.py
```
## Kør frontend
Sørg for, at du står i frontend-mappen
Find *app.js*, og ændr `BASE_URL` til URL'en for din backend
Kør det
```
npx http-server -p 8000
```
Prøv at skrive en besked i chatten, du bør se et svar (forudsat at du kører dette i en Codespace eller har opsat en adgangstoken).
## Opsæt adgangstoken (hvis du ikke kører dette i en Codespace)
Se [Opsæt PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:36+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "da"
}
-->
# Kør koden
```sh
npx http-server -p 3000
```
Find `BASE_URL` i `app.js` og ændr det, så det matcher URL'en til backend.
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:03:38+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:18:49+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "de"
}
@ -19,9 +19,9 @@ So sieht das fertige Projekt aus:
Ein wenig Kontext: Chat-Assistenten mit generativer KI zu erstellen, ist eine großartige Möglichkeit, um mit KI zu beginnen. In dieser Lektion lernst du, generative KI in eine Web-App zu integrieren. Lass uns anfangen.
## Verbindung zu generativer KI herstellen
## Verbindung zur generativen KI
Für das Backend verwenden wir GitHub Models. Es ist ein großartiger Dienst, der es ermöglicht, KI kostenlos zu nutzen. Gehe zu seinem Playground und hole dir den Code, der zu deiner bevorzugten Backend-Sprache passt. So sieht es im [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) aus:
Für das Backend verwenden wir GitHub Models. Es ist ein großartiger Dienst, der es ermöglicht, KI kostenlos zu nutzen. Gehe zum Playground und hole dir den Code, der zu deiner bevorzugten Backend-Sprache passt. So sieht es im [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) aus:
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" width="600">
@ -33,6 +33,8 @@ Wie gesagt, wähle den Tab "Code" und deine bevorzugte Laufzeitumgebung.
<img src="./assets/playground-choice.png" alt="Playground-Auswahl" width="600">
</div>
### Verwendung von Python
In diesem Fall wählen wir Python, was bedeutet, dass wir diesen Code verwenden:
```python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Lass uns diesen Code ein wenig bereinigen, damit er wiederverwendbar ist:
Lass uns den Code ein wenig bereinigen, damit er wiederverwendbar ist:
```python
def call_llm(prompt: str, system_message: str):
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Über eine Web-API bereitstellen
Super, wir haben den KI-Teil fertiggestellt. Schauen wir uns an, wie wir das in eine Web-API integrieren können. Für die Web-API verwenden wir Flask, aber jedes Web-Framework sollte geeignet sein. Hier ist der Code dafür:
Super, wir haben den KI-Teil fertiggestellt. Schauen wir uns an, wie wir ihn in eine Web-API integrieren können. Für die Web-API verwenden wir Flask, aber jedes Web-Framework sollte geeignet sein. Hier ist der Code dazu:
### Verwendung von Python
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Hier erstellen wir eine Flask-API und definieren eine Standardroute "/" und "/chat". Letztere soll von unserem Frontend verwendet werden, um Fragen an die API zu übermitteln.
Hier erstellen wir eine Flask-API und definieren eine Standardroute "/" und "/chat". Letztere soll von unserem Frontend verwendet werden, um Fragen an das Backend zu übermitteln.
Um *llm.py* zu integrieren, müssen wir Folgendes tun:
@ -176,9 +180,13 @@ Um *llm.py* zu integrieren, müssen wir Folgendes tun:
Super, jetzt haben wir alles erledigt, was wir brauchen.
### Cors konfigurieren
## Cors konfigurieren
Wir sollten erwähnen, dass wir etwas wie CORS eingerichtet haben, also Cross-Origin Resource Sharing. Das bedeutet, dass unser Backend und Frontend auf unterschiedlichen Ports laufen werden, und wir müssen dem Frontend erlauben, das Backend aufzurufen.
Wir sollten erwähnen, dass wir etwas wie CORS eingerichtet haben, also Cross-Origin Resource Sharing. Das bedeutet, dass unser Backend und Frontend auf unterschiedlichen Ports laufen werden, und wir müssen dem Frontend erlauben, das Backend aufzurufen. Es gibt einen Codeabschnitt in *api.py*, der dies einrichtet:
### Verwendung von Python
Es gibt ein Stück Code in *api.py*, das dies einrichtet:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Momentan ist es so eingerichtet, dass alle Ursprünge ("*") erlaubt sind, was etwas unsicher ist. Wir sollten dies einschränken, sobald wir in die Produktion gehen.
Momentan ist es so eingerichtet, dass "*" erlaubt ist, also alle Ursprünge. Das ist etwas unsicher, und wir sollten es einschränken, sobald wir in die Produktion gehen.
## Projekt ausführen
Okay, wir haben *llm.py* und *api.py*. Wie können wir das mit einem Backend zum Laufen bringen? Es gibt zwei Dinge, die wir tun müssen:
Um dein Projekt auszuführen, musst du zuerst dein Backend und dann dein Frontend starten.
### Verwendung von Python
Ok, wir haben *llm.py* und *api.py*. Wie können wir das mit einem Backend zum Laufen bringen? Es gibt zwei Dinge, die wir tun müssen:
- Abhängigkeiten installieren:
@ -209,7 +221,7 @@ Okay, wir haben *llm.py* und *api.py*. Wie können wir das mit einem Backend zum
python api.py
```
Wenn du in Codespaces arbeitest, musst du im unteren Teil des Editors zu "Ports" gehen, mit der rechten Maustaste darauf klicken und "Port Visibility" auswählen und "Public" auswählen.
Wenn du in Codespaces arbeitest, musst du im unteren Teil des Editors zu Ports gehen, mit der rechten Maustaste darauf klicken und "Port Visibility" auswählen und "Public" auswählen.
### Am Frontend arbeiten
@ -298,12 +310,12 @@ Das oben Genannte ist das absolute Minimum, das du benötigst, um ein Chat-Fenst
})();
```
Lass uns den Code Abschnitt für Abschnitt durchgehen:
Gehen wir den Code Abschnitt für Abschnitt durch:
- 1) Hier holen wir uns eine Referenz zu allen Elementen, auf die wir später im Code zugreifen werden.
- 1) Hier holen wir uns Referenzen zu allen Elementen, auf die wir später im Code zugreifen werden.
- 2) In diesem Abschnitt erstellen wir eine Funktion, die die eingebaute `fetch`-Methode verwendet, um unser Backend aufzurufen.
- 3) `appendMessage` hilft dabei, Antworten sowie die vom Benutzer eingegebenen Nachrichten hinzuzufügen.
- 4) Hier hören wir auf das Submit-Ereignis, lesen das Eingabefeld aus, platzieren die Nachricht des Benutzers im Textbereich, rufen die API auf und rendern die Antwort im Textbereich.
- 3) `appendMessage` hilft dabei, sowohl Antworten als auch die vom Benutzer eingegebenen Nachrichten hinzuzufügen.
- 4) Hier hören wir auf das Submit-Event, lesen das Eingabefeld aus, platzieren die Nachricht des Benutzers im Textbereich, rufen die API auf und zeigen die Antwort im Textbereich an.
Schauen wir uns als Nächstes das Styling an. Hier kannst du deiner Kreativität freien Lauf lassen und es so gestalten, wie du möchtest. Hier sind einige Vorschläge:
@ -326,11 +338,11 @@ Schauen wir uns als Nächstes das Styling an. Hier kannst du deiner Kreativität
}
```
Mit diesen drei Klassen kannst du Nachrichten unterschiedlich stylen, je nachdem, ob sie vom Assistenten oder vom Benutzer stammen. Wenn du Inspiration suchst, schau dir den Ordner `solution/frontend/styles.css` an.
Mit diesen drei Klassen kannst du Nachrichten unterschiedlich gestalten, je nachdem, ob sie vom Assistenten oder vom Benutzer stammen. Wenn du Inspiration suchst, schau dir den Ordner `solution/frontend/styles.css` an.
### Basis-URL ändern
Es gibt eine Sache, die wir hier noch nicht festgelegt haben, und das ist `BASE_URL`. Diese ist erst bekannt, wenn dein Backend gestartet ist. Um sie festzulegen:
Es gibt eine Sache, die wir hier noch nicht festgelegt haben, und das ist die `BASE_URL`. Diese ist erst bekannt, wenn dein Backend gestartet ist. Um sie festzulegen:
- Wenn du die API lokal ausführst, sollte sie etwa auf `http://localhost:5000` gesetzt werden.
- Wenn du sie in Codespaces ausführst, sollte sie etwa so aussehen: "[name]app.github.dev".
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Kopiere den Inhalt aus den oben genannten Anweisungen, aber passe ihn gerne nach deinen Wünschen an.
@ -358,13 +369,19 @@ Kopiere den Inhalt aus den oben genannten Anweisungen, aber passe ihn gerne nach
## Bonus
Versuche, die Persönlichkeit des KI-Assistenten zu ändern. Wenn du `call_llm` in *api.py* aufrufst, kannst du das zweite Argument nach Belieben ändern, zum Beispiel:
Versuche, die Persönlichkeit des KI-Assistenten zu ändern.
### Für Python
Wenn du `call_llm` in *api.py* aufrufst, kannst du das zweite Argument ändern, um es nach deinen Wünschen anzupassen, zum Beispiel:
```python
call_llm(message, "You are Captain Picard")
```
Ändere auch das CSS und den Text nach deinen Wünschen, also mache Änderungen in *index.html* und *styles.css*.
### Frontend
Ändere auch das CSS und den Text nach deinen Wünschen, also nimm Änderungen in *index.html* und *styles.css* vor.
## Zusammenfassung

@ -1,53 +1,16 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:07:51+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:19:11+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "de"
}
-->
# Code ausführen
# Lösung ausführen
## Einrichtung
Virtuelle Umgebung erstellen
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Abhängigkeiten installieren
```sh
pip install openai flask flask-cors
```
## API starten
```sh
python api.py
```
## Frontend starten
Stelle sicher, dass du dich im Frontend-Ordner befindest.
Finde *app.js* und ändere `BASE_URL` auf die URL deines Backends.
Starte es
```
npx http-server -p 8000
```
Versuche, eine Nachricht im Chat einzugeben. Du solltest eine Antwort sehen (vorausgesetzt, du führst dies in einem Codespace aus oder hast ein Zugriffstoken eingerichtet).
## Zugriffstoken einrichten (falls du dies nicht in einem Codespace ausführst)
Siehe [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Starte das [Backend](./backend/README.md)
1. Starte nun das [Frontend](./frontend/README.md)
---

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:03+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "de"
}
-->
Wählen Sie Ihre Laufzeitumgebung
- [Python](./python/README.md)
---
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:38+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "de"
}
-->
# Code ausführen
## Einrichtung
Virtuelle Umgebung erstellen
```sh
python -m venv venv
source ./venv/bin/activate
```
## Abhängigkeiten installieren
```sh
pip install openai flask flask-cors
```
## API starten
```sh
python api.py
```
## Frontend starten
Stelle sicher, dass du dich im Frontend-Ordner befindest.
Suche *app.js* und ändere `BASE_URL` auf die URL deines Backends.
Starte es
```
npx http-server -p 8000
```
Versuche, eine Nachricht im Chat einzugeben. Du solltest eine Antwort sehen (vorausgesetzt, du führst dies in einem Codespace aus oder hast ein Zugriffstoken eingerichtet).
## Zugriffstoken einrichten (falls du dies nicht in einem Codespace ausführst)
Siehe [PAT einrichten](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:50:46+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "de"
}
-->
# Code ausführen
```sh
npx http-server -p 3000
```
Suchen Sie die `BASE_URL` in `app.js` und ändern Sie sie so, dass sie der URL des Backends entspricht.
---
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T09:44:48+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:30:24+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "el"
}
@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/screenshot.png" alt="Εφαρμογή συνομιλίας" width="600">
</div>
Λίγα λόγια για το πλαίσιο: η δημιουργία βοηθών συνομιλίας με τη χρήση γενετικής AI είναι ένας εξαιρετικός τρόπος για να ξεκινήσετε να μαθαίνετε για την AI. Σε αυτό το μάθημα, θα μάθετε πώς να ενσωματώνετε γενετική AI σε μια εφαρμογή ιστού. Ας ξεκινήσουμε.
Λίγο πλαίσιο: η δημιουργία βοηθών συνομιλίας με τη χρήση γενετικής AI είναι ένας εξαιρετικός τρόπος για να ξεκινήσετε να μαθαίνετε για την AI. Σε αυτό το μάθημα, θα μάθετε πώς να ενσωματώνετε γενετική AI σε μια εφαρμογή ιστού. Ας ξεκινήσουμε.
## Σύνδεση με γενετική AI
@ -33,7 +33,9 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
Σε αυτή την περίπτωση, επιλέγουμε Python, που σημαίνει ότι θα πάρουμε τον εξής κώδικα:
### Χρήση Python
Σε αυτή την περίπτωση, επιλέγουμε Python, που σημαίνει ότι παίρνουμε τον εξής κώδικα:
```python
"""Run this model in Python
@ -94,7 +96,7 @@ 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
@ -106,7 +108,9 @@ 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
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και "/chat". Η δεύτερη προορίζεται για χρήση από το frontend μας, ώστε να περνάει ερωτήσεις σε αυτό.
Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και μια "/chat". Η δεύτερη προορίζεται για χρήση από το frontend μας για να στέλνει ερωτήσεις.
Για να ενσωματώσουμε το *llm.py*, πρέπει να κάνουμε τα εξής:
@ -163,7 +167,7 @@ if __name__ == "__main__":
})
```
Εδώ αναλύουμε το εισερχόμενο αίτημα για να ανακτήσουμε την ιδιότητα `message` από το σώμα JSON. Στη συνέχεια, καλούμε το LLM με την εξής κλήση:
Εδώ αναλύουμε το εισερχόμενο αίτημα για να ανακτήσουμε την ιδιότητα `message` από το σώμα του JSON. Στη συνέχεια, καλούμε το LLM με την εξής κλήση:
```python
response = call_llm(message, "You are a helpful assistant")
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
Ωραία, τώρα έχουμε ολοκληρώσει ό,τι χρειαζόμαστε.
Τέλεια, τώρα έχουμε ολοκληρώσει ό,τι χρειαζόμαστε.
## Ρύθμιση Cors
### Ρύθμιση Cors
Πρέπει να αναφέρουμε ότι ρυθμίσαμε κάτι σαν το CORS (cross-origin resource sharing). Αυτό σημαίνει ότι, επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend.
Πρέπει να αναφέρουμε ότι ρυθμίσαμε κάτι σαν το CORS (cross-origin resource sharing). Αυτό σημαίνει ότι, επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend. Υπάρχει ένα κομμάτι κώδικα στο *api.py* που το ρυθμίζει:
### Χρήση Python
Υπάρχει ένα κομμάτι κώδικα στο *api.py* που το ρυθμίζει:
```python
from flask_cors import CORS
@ -187,10 +195,14 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" (όλες τις προελεύσεις), κάτι που είναι λίγο ανασφαλές. Πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή.
Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" (όλες τις προελεύσεις), κάτι που είναι λίγο ανασφαλές. Θα πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή.
## Εκτέλεση του έργου σας
Για να εκτελέσετε το έργο σας, πρέπει πρώτα να ξεκινήσετε το backend και μετά το frontend.
### Χρήση Python
Εντάξει, έχουμε τα *llm.py* και *api.py*. Πώς μπορούμε να τα κάνουμε να λειτουργήσουν με ένα backend; Υπάρχουν δύο πράγματα που πρέπει να κάνουμε:
- Εγκατάσταση εξαρτήσεων:
@ -211,7 +223,7 @@ CORS(app) # * example.com
Αν βρίσκεστε σε Codespaces, πρέπει να μεταβείτε στις Θύρες στο κάτω μέρος του επεξεργαστή, να κάνετε δεξί κλικ και να επιλέξετε "Port Visibility" και να επιλέξετε "Public".
### Δημιουργία frontend
### Εργασία σε ένα frontend
Τώρα που έχουμε ένα API σε λειτουργία, ας δημιουργήσουμε ένα frontend για αυτό. Ένα ελάχιστο frontend που θα βελτιώσουμε σταδιακά. Στον φάκελο *frontend*, δημιουργήστε τα εξής:
@ -328,12 +340,12 @@ styles.css
Με αυτές τις τρεις κλάσεις, θα στυλιζάρετε τα μηνύματα διαφορετικά ανάλογα με το αν προέρχονται από τον βοηθό ή από εσάς ως χρήστη. Αν θέλετε έμπνευση, δείτε τον φάκελο `solution/frontend/styles.css`.
### Αλλαγή της Βασικής Διεύθυνσης URL
### Αλλαγή Base Url
Υπάρχει κάτι που δεν ρυθμίσαμε, και αυτό είναι το `BASE_URL`. Αυτό δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ρυθμίσετε:
Υπάρχει κάτι που δεν ορίσαμε εδώ και αυτό είναι το `BASE_URL`. Αυτό δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ορίσετε:
- Αν τρέχετε το API τοπικά, θα πρέπει να είναι κάτι σαν `http://localhost:5000`.
- Αν τρέχετε σε Codespaces, θα πρέπει να μοιάζει με "[name]app.github.dev".
- Αν εκτελείτε το API τοπικά, θα πρέπει να οριστεί σε κάτι σαν `http://localhost:5000`.
- Αν εκτελείται σε Codespaces, θα πρέπει να μοιάζει με "[name]app.github.dev".
## Εργασία
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Αντιγράψτε το περιεχόμενο από ό,τι περιγράφηκε παραπάνω, αλλά προσαρμόστε το όπως θέλετε.
Αντιγράψτε το περιεχόμενο από ό,τι σας δόθηκε παραπάνω, αλλά προσαρμόστε το όπως θέλετε.
## Λύση
@ -358,17 +369,23 @@ project/
## Bonus
Δοκιμάστε να αλλάξετε την προσωπικότητα του βοηθού AI. Όταν καλείτε τη `call_llm` στο *api.py*, μπορείτε να αλλάξετε το δεύτερο όρισμα όπως θέλετε, για παράδειγμα:
Δοκιμάστε να αλλάξετε την προσωπικότητα του βοηθού AI.
### Για Python
Όταν καλείτε τη `call_llm` στο *api.py*, μπορείτε να αλλάξετε το δεύτερο όρισμα σε ό,τι θέλετε, για παράδειγμα:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
Αλλάξτε επίσης το CSS και το κείμενο όπως θέλετε, κάνοντας αλλαγές στα *index.html* και *styles.css*.
## Περίληψη
Ωραία, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε αυτό χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript.
Τέλεια, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε αυτό χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript.
## Ρύθμιση με Codespaces
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T09:48:32+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:30:55+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "el"
}
-->
# Εκτέλεση κώδικα
# Εκτέλεση λύσης
## Ρύθμιση
Δημιουργήστε εικονικό περιβάλλον
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Εγκατάσταση εξαρτήσεων
```sh
pip install openai flask flask-cors
```
## Εκτέλεση API
```sh
python api.py
```
## Εκτέλεση frontend
Βεβαιωθείτε ότι βρίσκεστε στον φάκελο του frontend
Εντοπίστε το *app.js*, αλλάξτε το `BASE_URL` στη διεύθυνση URL του backend σας
Εκτελέστε το
```
npx http-server -p 8000
```
Δοκιμάστε να πληκτρολογήσετε ένα μήνυμα στη συνομιλία, θα πρέπει να δείτε μια απάντηση (υπό την προϋπόθεση ότι το εκτελείτε σε ένα Codespace ή έχετε ρυθμίσει ένα access token).
## Ρύθμιση access token (αν δεν το εκτελείτε σε ένα Codespace)
Δείτε [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Ξεκινήστε το [backend](./backend/README.md)
1. Τώρα ξεκινήστε το [frontend](./frontend/README.md)
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε κάθε προσπάθεια για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:43:32+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "el"
}
-->
Επιλέξτε το περιβάλλον εκτέλεσης
- [Python](./python/README.md)
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:47:55+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "el"
}
-->
# Εκτέλεση κώδικα
## Ρύθμιση
Δημιουργήστε εικονικό περιβάλλον
```sh
python -m venv venv
source ./venv/bin/activate
```
## Εγκατάσταση εξαρτήσεων
```sh
pip install openai flask flask-cors
```
## Εκτέλεση API
```sh
python api.py
```
## Εκτέλεση frontend
Βεβαιωθείτε ότι βρίσκεστε στον φάκελο του frontend
Εντοπίστε το *app.js*, αλλάξτε το `BASE_URL` στη διεύθυνση URL του backend σας
Εκτελέστε το
```
npx http-server -p 8000
```
Δοκιμάστε να πληκτρολογήσετε ένα μήνυμα στη συνομιλία, θα πρέπει να δείτε μια απάντηση (υπό την προϋπόθεση ότι το εκτελείτε σε ένα Codespace ή έχετε ρυθμίσει ένα access token).
## Ρύθμιση access token (αν δεν το εκτελείτε σε Codespace)
Δείτε [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:22+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "el"
}
-->
# Εκτελέστε τον κώδικα
```sh
npx http-server -p 3000
```
Βρείτε το `BASE_URL` στο `app.js` και αλλάξτε το ώστε να ταιριάζει με το URL του backend.
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:02:40+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:17:31+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "en"
}
@ -17,11 +17,11 @@ Here's what the completed project looks like:
<img src="./assets/screenshot.png" alt="Chat app" width="600">
</div>
To give 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 application. Let's get started.
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
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 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).
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).
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" width="600">
@ -33,7 +33,9 @@ As mentioned, select the "Code" tab and choose your runtime.
<img src="./assets/playground-choice.png" alt="playground choice" width="600">
</div>
In this example, we select Python, which means we'll use the following code:
### Using Python
In this example, we select Python, which means we use the following code:
```python
"""Run this model in Python
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Expose it via a Web API
Great, we've completed the AI part. Now let's integrate it into a Web API. For the Web API, we'll use Flask, but any web framework should work. Here's the code:
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:
### Using Python
```python
# api.py
@ -139,7 +143,7 @@ if __name__ == "__main__":
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.
To integrate *llm.py*, here's what we need to do:
To integrate *llm.py*, follow these steps:
- Import the `call_llm` function:
@ -163,7 +167,7 @@ To integrate *llm.py*, here's what we need to do:
})
```
In this step, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM using this function:
Here, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM using this function:
```python
response = call_llm(message, "You are a helpful assistant")
@ -174,11 +178,15 @@ To integrate *llm.py*, here's what we need to do:
})
```
That's it! We've completed the backend setup.
That's it! The integration is complete.
## Configure Cors
### Configure 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 the backend and frontend will run on different ports, we need to allow the frontend to communicate with the backend. Here's the code in *api.py* that handles this:
### Using Python
In *api.py*, there's a piece of code that configures CORS:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Currently, it's configured to allow all origins ("*"), which is not secure. Make sure to restrict it when deploying to production.
Currently, it's set to allow all origins ("*"), which is not secure. Make sure to restrict it when deploying to production.
## Run your project
Now that we have *llm.py* and *api.py*, here's how to run the backend:
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:
- Install dependencies:
@ -213,7 +225,7 @@ Now that we have *llm.py* and *api.py*, here's how to run the backend:
### Work on a frontend
With the API up and running, let's create a frontend. We'll start with a basic frontend and improve it step by step. In a *frontend* folder, create the following:
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:
```text
backend/
@ -302,10 +314,10 @@ 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 the assistant's responses and the user's messages 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 assistant's response in the textarea.
3. The `appendMessage` function adds both user messages and assistant 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 get creative here, but here are some suggestions:
Now, let's move on to styling. You can customize the design as much as you like, but here are some suggestions:
**styles.css**
@ -333,7 +345,7 @@ These three classes style messages differently depending on whether they come fr
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 something like "[name]app.github.dev".
- If you're using Codespaces, it will look like "[name]app.github.dev".
## Assignment
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Copy the content from the instructions above, but feel free to customize it to your liking.
@ -358,13 +369,19 @@ Copy the content from the instructions above, but feel free to customize it to y
## Bonus
Try changing the personality of the AI assistant. In *api.py*, you can modify the second argument in the `call_llm` function to define a different personality, for example:
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:
```python
call_llm(message, "You are Captain Picard")
```
Also, customize the CSS and text to your liking by editing *index.html* and *styles.css*.
### Frontend
Customize the CSS and text to your liking by editing *index.html* and *styles.css*.
## Summary
@ -377,7 +394,7 @@ Congratulations! You've learned how to create a personal assistant using AI from
![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png)
- Once you're in your repository, create a Codespace:
- Once your repository is ready, create a Codespace:
![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png)

@ -1,53 +1,16 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:07:33+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:17:50+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "en"
}
-->
# Run code
# Run solution
## Set up
Create a virtual environment
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Install dependencies
```sh
pip install openai flask flask-cors
```
## Run API
```sh
python api.py
```
## Run frontend
Make sure you're in the frontend folder
Find *app.js*, and update `BASE_URL` to match your backend URL
Run the application
```
npx http-server -p 8000
```
Try typing a message in the chat; you should see a response (assuming you're running this in a Codespace or have set up an access token).
## Set up access token (if you're not running this in a Codespace)
Refer to [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Start the [backend](./backend/README.md)
1. Then start the [frontend](./frontend/README.md)
---

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:41:51+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "en"
}
-->
Choose your runtime
- [Python](./python/README.md)
---
**Disclaimer**:
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:19+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "en"
}
-->
# Run code
## Set up
Create a virtual environment
```sh
python -m venv venv
source ./venv/bin/activate
```
## Install dependencies
```sh
pip install openai flask flask-cors
```
## Run API
```sh
python api.py
```
## Run frontend
Make sure you're in the frontend folder.
Find *app.js* and update `BASE_URL` to match your backend URL.
Run the application.
```
npx http-server -p 8000
```
Try typing a message in the chat; you should see a response (as long as you're running this in a Codespace or have set up an access token).
## Set up access token (if you're not running this in a Codespace)
Refer to [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Disclaimer**:
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:50:34+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "en"
}
-->
# Run the code
```sh
npx http-server -p 3000
```
Find the `BASE_URL` in `app.js` and update it to match the backend URL.
---
**Disclaimer**:
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.

@ -1,15 +1,15 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:03:14+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:18:23+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "es"
}
-->
# Proyecto de Chat
Este proyecto de chat muestra cómo construir un Asistente de Chat utilizando los Modelos de GitHub.
Este proyecto de chat muestra cómo construir un Asistente de Chat utilizando GitHub Models.
Así es como se ve el proyecto terminado:
@ -17,11 +17,11 @@ Así es como se ve el proyecto terminado:
<img src="./assets/screenshot.png" alt="Aplicación de chat" width="600">
</div>
Un poco de contexto: construir asistentes de chat utilizando IA generativa es una excelente manera de comenzar a aprender sobre IA. Lo que aprenderás es a integrar IA generativa en una aplicación web a lo largo de esta lección. ¡Comencemos!
Un poco de contexto: construir asistentes de chat utilizando IA generativa es una excelente manera de comenzar a aprender sobre IA. Lo que aprenderás es cómo integrar IA generativa en una aplicación web a lo largo de esta lección. ¡Comencemos!
## Conectando con IA generativa
Para el backend, estamos utilizando los Modelos de GitHub. Es un gran servicio que te permite usar IA de forma gratuita. Ve a su playground y obtén el código que corresponde a tu lenguaje de backend elegido. Así es como se ve en [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Para el backend, estamos utilizando GitHub Models. Es un excelente servicio que te permite usar IA de forma gratuita. Ve a su playground y obtén el código que corresponde al lenguaje de backend que elijas. Así es como se ve en [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -33,6 +33,8 @@ Como mencionamos, selecciona la pestaña "Code" y tu entorno de ejecución prefe
<img src="./assets/playground-choice.png" alt="Elección en el playground" with="600">
</div>
### Usando Python
En este caso, seleccionamos Python, lo que significa que elegimos este código:
```python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Vamos a limpiar este código un poco para que sea reutilizable:
Limpiemos un poco este código para que sea reutilizable:
```python
def call_llm(prompt: str, system_message: str):
@ -94,7 +96,7 @@ def call_llm(prompt: str, system_message: str):
return response.choices[0].message.content
```
Con esta función `call_llm`, ahora podemos tomar un prompt y un prompt del sistema, y la función devolverá el resultado.
Con esta función `call_llm` ahora podemos tomar un prompt y un prompt del sistema, y la función termina devolviendo el resultado.
### Personalizar el Asistente de IA
@ -108,6 +110,8 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
Genial, ya tenemos la parte de IA lista. Veamos cómo podemos integrarla en una API Web. Para la API Web, elegimos usar Flask, pero cualquier framework web debería funcionar. Veamos el código:
### Usando Python
```python
# api.py
from flask import Flask, request, jsonify
@ -174,11 +178,15 @@ Para integrar *llm.py*, esto es lo que necesitamos hacer:
})
```
Genial, ahora hemos hecho lo necesario.
Genial, ahora hemos hecho lo que necesitamos.
## Configurar Cors
### Configurar Cors
Debemos mencionar que configuramos algo como CORS, intercambio de recursos de origen cruzado. Esto significa que, dado que nuestro backend y frontend se ejecutarán en diferentes puertos, necesitamos permitir que el frontend llame al backend.
Debemos mencionar que configuramos algo como CORS, intercambio de recursos de origen cruzado. Esto significa que, dado que nuestro backend y frontend se ejecutarán en diferentes puertos, necesitamos permitir que el frontend llame al backend. Hay un fragmento de código en *api.py* que configura esto:
### Usando Python
Hay un fragmento de código en *api.py* que configura esto:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
En este momento, está configurado para permitir "*", que son todos los orígenes, y eso es un poco inseguro. Deberíamos restringirlo una vez que pasemos a producción.
Actualmente está configurado para permitir "*", que son todos los orígenes, y eso es un poco inseguro. Deberíamos restringirlo una vez que pasemos a producción.
## Ejecutar tu proyecto
Bien, ya tenemos *llm.py* y *api.py*. ¿Cómo podemos hacer que esto funcione con un backend? Bueno, hay dos cosas que necesitamos hacer:
Para ejecutar tu proyecto, primero necesitas iniciar tu backend y luego tu frontend.
### Usando Python
Bien, tenemos *llm.py* y *api.py*. ¿Cómo podemos hacer que esto funcione con un backend? Bueno, hay dos cosas que necesitamos hacer:
- Instalar dependencias:
@ -209,7 +221,7 @@ Bien, ya tenemos *llm.py* y *api.py*. ¿Cómo podemos hacer que esto funcione co
python api.py
```
Si estás en Codespaces, necesitas ir a Puertos en la parte inferior del editor, hacer clic derecho sobre él y seleccionar "Port Visibility" y luego "Public".
Si estás en Codespaces, necesitas ir a Puertos en la parte inferior del editor, hacer clic derecho sobre él y seleccionar "Port Visibility" y elegir "Public".
### Trabajar en un frontend
@ -241,7 +253,7 @@ Comencemos con **index.html**:
</html>
```
Lo anterior es lo mínimo necesario para soportar una ventana de chat, ya que consiste en un área de texto donde se renderizarán los mensajes, un campo de entrada para escribir el mensaje y un botón para enviarlo al backend. Veamos el JavaScript a continuación en *app.js*.
Lo anterior es lo mínimo absoluto que necesitas para soportar una ventana de chat, ya que consiste en un área de texto donde se renderizarán los mensajes, un campo de entrada para escribir el mensaje y un botón para enviar tu mensaje al backend. Veamos el JavaScript a continuación en *app.js*
**app.js**
@ -300,12 +312,12 @@ Lo anterior es lo mínimo necesario para soportar una ventana de chat, ya que co
Analicemos el código por sección:
- 1) Aquí obtenemos una referencia a todos nuestros elementos que usaremos más adelante en el código.
- 1) Aquí obtenemos una referencia a todos nuestros elementos que utilizaremos más adelante en el código.
- 2) En esta sección, creamos una función que utiliza el método `fetch` incorporado para llamar a nuestro backend.
- 3) `appendMessage` ayuda a agregar respuestas, así como lo que escribes como usuario.
- 3) `appendMessage` ayuda a agregar respuestas, así como lo que tú como usuario escribes.
- 4) Aquí escuchamos el evento de envío, leemos el campo de entrada, colocamos el mensaje del usuario en el área de texto, llamamos a la API y renderizamos la respuesta en el área de texto.
Veamos el estilo a continuación. Aquí puedes ser muy creativo y hacerlo como quieras, pero aquí tienes algunas sugerencias:
Veamos el estilo a continuación. Aquí es donde puedes ser realmente creativo y hacer que se vea como quieras, pero aquí hay algunas sugerencias:
**styles.css**
@ -326,11 +338,11 @@ Veamos el estilo a continuación. Aquí puedes ser muy creativo y hacerlo como q
}
```
Con estas tres clases, puedes estilizar los mensajes de manera diferente dependiendo de si provienen del asistente o de ti como usuario. Si necesitas inspiración, revisa la carpeta `solution/frontend/styles.css`.
Con estas tres clases, estilizarás los mensajes de manera diferente dependiendo de si provienen del asistente o de ti como usuario. Si quieres inspirarte, revisa la carpeta `solution/frontend/styles.css`.
### Cambiar la URL Base
Hay algo que no configuramos aquí, y es `BASE_URL`. Esto no se conoce hasta que tu backend esté iniciado. Para configurarlo:
Hay una cosa que no configuramos aquí y fue `BASE_URL`. Esto no se conoce hasta que tu backend esté iniciado. Para configurarlo:
- Si ejecutas la API localmente, debería configurarse como algo como `http://localhost:5000`.
- Si se ejecuta en Codespaces, debería verse algo como "[name]app.github.dev".
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Copia el contenido de lo que se indicó anteriormente, pero siéntete libre de personalizarlo a tu gusto.
@ -358,22 +369,28 @@ Copia el contenido de lo que se indicó anteriormente, pero siéntete libre de p
## Bonus
Intenta cambiar la personalidad del asistente de IA. Cuando llames a `call_llm` en *api.py*, puedes cambiar el segundo argumento a lo que desees, por ejemplo:
Intenta cambiar la personalidad del asistente de IA.
### Para Python
Cuando llames a `call_llm` en *api.py*, puedes cambiar el segundo argumento a lo que desees, por ejemplo:
```python
call_llm(message, "You are Captain Picard")
```
Cambia también el CSS y el texto a tu gusto, haciendo cambios en *index.html* y *styles.css*.
### Frontend
Cambia también el CSS y el texto a tu gusto, realiza cambios en *index.html* y *styles.css*.
## Resumen
¡Genial! Has aprendido desde cero cómo crear un asistente personal utilizando IA. Lo hemos hecho utilizando los Modelos de GitHub, un backend en Python y un frontend en HTML, CSS y JavaScript.
Genial, has aprendido desde cero cómo crear un asistente personal utilizando IA. Lo hemos hecho utilizando GitHub Models, un backend en Python y un frontend en HTML, CSS y JavaScript.
## Configuración con Codespaces
- Navega a: [Repositorio Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Crea desde una plantilla (asegúrate de haber iniciado sesión en GitHub) en la esquina superior derecha:
- Navega a: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Crea desde una plantilla (asegúrate de estar conectado a GitHub) en la esquina superior derecha:
![Crear desde plantilla](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.es.png)

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:07:46+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:18:45+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "es"
}
-->
# Ejecutar el código
# Ejecutar solución
## Configuración
Crear un entorno virtual
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Instalar dependencias
```sh
pip install openai flask flask-cors
```
## Ejecutar la API
```sh
python api.py
```
## Ejecutar el frontend
Asegúrate de estar en la carpeta del frontend.
Ubica *app.js* y cambia `BASE_URL` a la URL de tu backend.
Ejecuta el frontend
```
npx http-server -p 8000
```
Intenta escribir un mensaje en el chat; deberías ver una respuesta (siempre que estés ejecutando esto en un Codespace o hayas configurado un token de acceso).
## Configurar el token de acceso (si no estás ejecutando esto en un Codespace)
Consulta [Configurar PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Inicia el [backend](./backend/README.md)
1. Ahora inicia el [frontend](./frontend/README.md)
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:41:59+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "es"
}
-->
Elige tu entorno de ejecución
- [Python](./python/README.md)
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:31+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "es"
}
-->
# Ejecutar el código
## Configuración
Crea un entorno virtual
```sh
python -m venv venv
source ./venv/bin/activate
```
## Instalar dependencias
```sh
pip install openai flask flask-cors
```
## Ejecutar la API
```sh
python api.py
```
## Ejecutar el frontend
Asegúrate de estar en la carpeta del frontend.
Ubica *app.js* y cambia `BASE_URL` a la URL de tu backend.
Ejecuta el frontend
```
npx http-server -p 8000
```
Intenta escribir un mensaje en el chat; deberías ver una respuesta (siempre y cuando estés ejecutando esto en un Codespace o hayas configurado un token de acceso).
## Configurar el token de acceso (si no estás ejecutando esto en un Codespace)
Consulta [Configurar PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:50:42+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "es"
}
-->
# Ejecutar el código
```sh
npx http-server -p 3000
```
Ubica el `BASE_URL` en `app.js` y cámbialo para que coincida con la URL del backend.
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:03:57+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:20:12+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "fa"
}
@ -11,17 +11,17 @@ CO_OP_TRANSLATOR_METADATA:
این پروژه چت نشان می‌دهد که چگونه می‌توان یک دستیار چت با استفاده از مدل‌های GitHub ساخت.
این چیزی است که پروژه نهایی شبیه آن خواهد بود:
این چیزی است که پروژه نهایی به این شکل خواهد بود:
<div>
<img src="./assets/screenshot.png" alt="برنامه چت" width="600">
</div>
کمی توضیح: ساخت دستیارهای چت با استفاده از هوش مصنوعی مولد یک راه عالی برای شروع یادگیری درباره هوش مصنوعی است. در این درس یاد می‌گیرید که چگونه هوش مصنوعی مولد را در یک برنامه وب ادغام کنید. بیایید شروع کنیم.
ساخت دستیارهای چت با استفاده از هوش مصنوعی مولد یک روش عالی برای شروع یادگیری درباره هوش مصنوعی است. در این درس یاد می‌گیرید که چگونه هوش مصنوعی مولد را در یک برنامه وب ادغام کنید. بیایید شروع کنیم.
## اتصال به هوش مصنوعی مولد
برای بخش بک‌اند، ما از مدل‌های 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) خواهید دید.
<div>
<img src="./assets/playground.png" alt="محیط آزمایشی هوش مصنوعی GitHub Models" with="600">
@ -33,7 +33,9 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/playground-choice.png" alt="انتخاب محیط آزمایشی" with="600">
</div>
در این مثال، ما Python را انتخاب می‌کنیم، که به این معناست که این کد را انتخاب می‌کنیم:
### استفاده از پایتون
در این مثال، ما پایتون را انتخاب می‌کنیم، که به این معنی است که این کد را انتخاب می‌کنیم:
```python
"""Run this model in Python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
بیایید این کد را کمی مرتب کنیم تا قابل استفاده مجدد باشد:
بیایید این کد را کمی تمیز کنیم تا قابل استفاده مجدد باشد:
```python
def call_llm(prompt: str, system_message: str):
@ -94,19 +96,21 @@ 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")
```
## ارائه از طریق یک Web API
## ارائه از طریق یک وب API
عالی است، ما بخش هوش مصنوعی را انجام دادیم، حالا ببینیم چگونه می‌توانیم آن را در یک وب API ادغام کنیم. برای وب API، ما Flask را انتخاب می‌کنیم، اما هر فریم‌ورک وب دیگری نیز مناسب است. بیایید کد آن را ببینیم:
عالی، بخش هوش مصنوعی را انجام دادیم، حالا ببینیم چگونه می‌توانیم آن را در یک Web API ادغام کنیم. برای Web API، ما Flask را انتخاب می‌کنیم، اما هر فریم‌ورک وب دیگری هم مناسب است. بیایید کد آن را ببینیم:
### استفاده از پایتون
```python
# api.py
@ -137,18 +141,18 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
اینجا، ما یک API با Flask ایجاد می‌کنیم و یک مسیر پیش‌فرض "/" و "/chat" تعریف می‌کنیم. مسیر دوم برای استفاده فرانت‌اند ما برای ارسال سوالات به آن طراحی شده است.
در اینجا، ما یک API با Flask ایجاد می‌کنیم و یک مسیر پیش‌فرض "/" و "/chat" تعریف می‌کنیم. مسیر دوم برای استفاده فرانت‌اند ما برای ارسال سوالات به آن طراحی شده است.
برای ادغام *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"])
@ -163,7 +167,7 @@ if __name__ == "__main__":
})
```
در اینجا درخواست ورودی را تجزیه می‌کنیم تا ویژگی `message` را از بدنه JSON بازیابی کنیم. سپس با این فراخوانی، LLM را صدا می‌زنیم:
در اینجا، درخواست ورودی را تجزیه می‌کنیم تا ویژگی `message` را از بدنه JSON دریافت کنیم. سپس با این فراخوانی، LLM را صدا می‌زنیم:
```python
response = call_llm(message, "You are a helpful assistant")
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
عالی، حالا کارهایی که نیاز داشتیم را انجام دادیم.
عالی است، حالا کارهایی که لازم بود انجام دادیم.
## تنظیم Cors
### پیکربندی Cors
باید اشاره کنیم که چیزی مانند CORS، اشتراک منابع بین مبداها، تنظیم شده است. این به این معنی است که چون بک‌اند و فرانت‌اند ما روی پورت‌های مختلف اجرا می‌شوند، باید اجازه دهیم فرانت‌اند به بک‌اند دسترسی داشته باشد.
باید اشاره کنیم که چیزی مثل CORS (اشتراک منابع بین مبدا) را تنظیم کردیم. این به این معناست که چون بک‌اند و فرانت‌اند ما روی پورت‌های مختلف اجرا می‌شوند، باید به فرانت‌اند اجازه دهیم که به بک‌اند دسترسی داشته باشد. یک قطعه کد در *api.py* وجود دارد که این کار را انجام می‌دهد:
### استفاده از پایتون
یک قطعه کد در *api.py* وجود دارد که این کار را انجام می‌دهد:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
در حال حاضر، این به گونه‌ای تنظیم شده که "*" یا همه مبداها را مجاز می‌کند و این کمی ناامن است. باید زمانی که به تولید می‌رویم آن را محدود کنیم.
در حال حاضر، این تنظیم شده است تا "*" را که به معنای همه مبداها است، مجاز کند و این کمی ناامن است. باید آن را زمانی که به تولید می‌رویم محدود کنیم.
## اجرای پروژه
خب، حالا که *llm.py* و *api.py* را داریم، چگونه می‌توانیم این را با یک بک‌اند کار کنیم؟ دو کار باید انجام دهیم:
برای اجرای پروژه، ابتدا باید بک‌اند و سپس فرانت‌اند خود را راه‌اندازی کنید.
### استفاده از پایتون
خب، ما *llm.py* و *api.py* را داریم، چگونه می‌توانیم این را با بک‌اند کار کنیم؟ دو کار باید انجام دهیم:
- نصب وابستگی‌ها:
@ -209,11 +221,11 @@ CORS(app) # * example.com
python api.py
```
اگر در Codespaces هستید، باید به بخش Ports در پایین ویرایشگر بروید، روی آن راست‌کلیک کنید و "Port Visibility" را انتخاب کرده و "Public" را انتخاب کنید.
اگر در Codespaces هستید، باید به بخش Ports در پایین ویرایشگر بروید، روی آن کلیک راست کنید و "Port Visibility" را انتخاب کنید و "Public" را انتخاب کنید.
### کار روی فرانت‌اند
حالا که یک API در حال اجرا داریم، بیایید یک فرانت‌اند برای آن ایجاد کنیم. یک فرانت‌اند حداقلی که به تدریج بهبود خواهیم داد. در یک پوشه *frontend*، موارد زیر را ایجاد کنید:
حالا که یک API در حال اجرا داریم، بیایید یک فرانت‌اند برای آن ایجاد کنیم. یک فرانت‌اند حداقلی که به تدریج آن را بهبود خواهیم داد. در یک پوشه *frontend*، موارد زیر را ایجاد کنید:
```text
backend/
@ -241,7 +253,7 @@ styles.css
</html>
```
این حداقل چیزی است که برای پشتیبانی از یک پنجره چت نیاز دارید، زیرا شامل یک textarea برای نمایش پیام‌ها، یک ورودی برای تایپ پیام و یک دکمه برای ارسال پیام به بک‌اند است. حالا بیایید به جاوااسکریپت در *app.js* نگاه کنیم.
این حداقل چیزی است که برای پشتیبانی از یک پنجره چت نیاز دارید، زیرا شامل یک textarea برای نمایش پیام‌ها، یک ورودی برای تایپ پیام و یک دکمه برای ارسال پیام به بک‌اند است. حالا به جاوااسکریپت در *app.js* نگاه کنیم.
**app.js**
@ -300,12 +312,12 @@ styles.css
بیایید کد را بخش به بخش بررسی کنیم:
- 1) در اینجا به تمام عناصر خود که بعداً در کد به آنها ارجاع خواهیم داد، دسترسی می‌گیریم.
- 1) در اینجا، ما به تمام عناصر خود که بعداً در کد به آنها ارجاع خواهیم داد، دسترسی می‌گیریم.
- 2) در این بخش، یک تابع ایجاد می‌کنیم که از متد داخلی `fetch` برای فراخوانی بک‌اند استفاده می‌کند.
- 3) `appendMessage` به اضافه کردن پاسخ‌ها و همچنین چیزی که شما به عنوان کاربر تایپ می‌کنید کمک می‌کند.
- 4) در اینجا به رویداد submit گوش می‌دهیم و در نهایت فیلد ورودی را می‌خوانیم، پیام کاربر را در textarea قرار می‌دهیم، API را فراخوانی می‌کنیم و پاسخ را در textarea نمایش می‌دهیم.
- 3) `appendMessage` به اضافه کردن پاسخ‌ها و همچنین پیام‌هایی که شما به عنوان کاربر تایپ می‌کنید کمک می‌کند.
- 4) در اینجا، به رویداد ارسال گوش می‌دهیم و در نهایت فیلد ورودی را می‌خوانیم، پیام کاربر را در textarea قرار می‌دهیم، API را فراخوانی می‌کنیم و پاسخ را در textarea نمایش می‌دهیم.
حالا بیایید به استایل‌دهی نگاه کنیم. اینجا جایی است که می‌توانید خلاقیت به خرج دهید و ظاهر را به دلخواه خود طراحی کنید، اما در اینجا چند پیشنهاد داریم:
حالا به استایل‌ها نگاه کنیم، اینجا جایی است که می‌توانید خلاقیت به خرج دهید و ظاهر آن را به دلخواه خود تغییر دهید، اما در اینجا چند پیشنهاد داریم:
**styles.css**
@ -326,18 +338,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/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
محتوا را از دستورالعمل‌های بالا کپی کنید، اما در صورت تمایل آن را به دلخواه خود شخصی‌سازی کنید.
محتوای دستورالعمل‌های بالا را کپی کنید، اما در صورت تمایل آن را به دلخواه خود سفارشی کنید.
## راه‌حل
@ -358,22 +369,28 @@ project/
## نکته اضافی
سعی کنید شخصیت دستیار هوش مصنوعی را تغییر دهید. وقتی `call_llm` را در *api.py* فراخوانی می‌کنید، می‌توانید آرگومان دوم را به چیزی که می‌خواهید تغییر دهید، برای مثال:
شخصیت دستیار هوش مصنوعی را تغییر دهید.
### برای پایتون
وقتی `call_llm` را در *api.py* فراخوانی می‌کنید، می‌توانید آرگومان دوم را به چیزی که می‌خواهید تغییر دهید، برای مثال:
```python
call_llm(message, "You are Captain Picard")
```
### فرانت‌اند
همچنین CSS و متن را به دلخواه خود تغییر دهید، بنابراین تغییراتی در *index.html* و *styles.css* ایجاد کنید.
## خلاصه
عالی، شما از ابتدا یاد گرفتید که چگونه یک دستیار شخصی با استفاده از هوش مصنوعی ایجاد کنید. ما این کار را با استفاده از مدل‌های GitHub، یک بک‌اند در Python و یک فرانت‌اند در HTML، CSS و JavaScript انجام دادیم.
عالی است، شما از ابتدا یاد گرفتید که چگونه یک دستیار شخصی با استفاده از هوش مصنوعی ایجاد کنید. ما این کار را با استفاده از مدل‌های GitHub، یک بک‌اند در پایتون و یک فرانت‌اند در HTML، CSS و جاوااسکریپت انجام دادیم.
## راه‌اندازی با Codespaces
## تنظیم با Codespaces
- به اینجا بروید: [مخزن Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- از یک قالب ایجاد کنید (مطمئن شوید که وارد GitHub شده‌اید) در گوشه بالا سمت راست:
- از یک قالب ایجاد کنید (مطمئن شوید که در GitHub وارد شده‌اید) در گوشه بالا سمت راست:
![ایجاد از قالب](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fa.png)
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:07:57+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:20:45+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "fa"
}
-->
# اجرای کد
# اجرای راه‌حل
## تنظیمات
ایجاد محیط مجازی
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## نصب وابستگی‌ها
```sh
pip install openai flask flask-cors
```
## اجرای API
```sh
python api.py
```
## اجرای رابط کاربری
اطمینان حاصل کنید که در پوشه رابط کاربری قرار دارید
فایل *app.js* را پیدا کنید، مقدار `BASE_URL` را به آدرس URL بک‌اند خود تغییر دهید
آن را اجرا کنید
```
npx http-server -p 8000
```
سعی کنید یک پیام در چت تایپ کنید، باید پاسخی دریافت کنید (به شرطی که این را در Codespace اجرا کنید یا یک توکن دسترسی تنظیم کرده باشید).
## تنظیم توکن دسترسی (اگر این را در Codespace اجرا نمی‌کنید)
به [تنظیم PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) مراجعه کنید
1. [بک‌اند](./backend/README.md) را راه‌اندازی کنید
1. حالا [فرانت‌اند](./frontend/README.md) را راه‌اندازی کنید
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادقتی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:15+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "fa"
}
-->
انتخاب محیط اجرایی
- [Python](./python/README.md)
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:55+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "fa"
}
-->
# اجرای کد
## آماده‌سازی
ایجاد محیط مجازی
```sh
python -m venv venv
source ./venv/bin/activate
```
## نصب وابستگی‌ها
```sh
pip install openai flask flask-cors
```
## اجرای API
```sh
python api.py
```
## اجرای رابط کاربری (Frontend)
اطمینان حاصل کنید که در پوشه‌ی frontend قرار دارید.
فایل *app.js* را پیدا کنید و مقدار `BASE_URL` را به آدرس URL مربوط به backend خود تغییر دهید.
آن را اجرا کنید.
```
npx http-server -p 8000
```
سعی کنید یک پیام در چت تایپ کنید، باید پاسخی دریافت کنید (به شرطی که این کار را در یک Codespace اجرا می‌کنید یا یک توکن دسترسی تنظیم کرده‌اید).
## تنظیم توکن دسترسی (اگر این کار را در Codespace اجرا نمی‌کنید)
به [تنظیم PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) مراجعه کنید.
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:51:00+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "fa"
}
-->
# اجرای کد
```sh
npx http-server -p 3000
```
`BASE_URL` را در فایل `app.js` پیدا کنید و آن را به آدرس URL بک‌اند تغییر دهید.
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T01:26:43+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:32:42+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "fi"
}
@ -17,11 +17,11 @@ Tältä valmis projekti näyttää:
<img src="./assets/screenshot.png" alt="Chat-sovellus" width="600">
</div>
Hieman taustaa: Chat-avustajien rakentaminen generatiivisen tekoälyn avulla on loistava tapa aloittaa tekoälyn opiskelu. Tässä oppitunnissa opit integroimaan generatiivisen tekoälyn verkkosovellukseen. Aloitetaan!
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!
## Yhteys generatiiviseen tekoälyyn
Taustajärjestelmässä käytämme GitHub-malleja. Se on erinomainen 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)
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.
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -30,10 +30,12 @@ Taustajärjestelmässä käytämme GitHub-malleja. Se on erinomainen palvelu, jo
Kuten mainittiin, valitse "Code"-välilehti ja haluamasi ajonaikainen ympäristö.
<div>
<img src="./assets/playground-choice.png" alt="playground-valinta" with="600">
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
Tässä tapauksessa valitsemme Pythonin, mikä tarkoittaa, että valitsemme tämän koodin:
### Pythonin käyttö
Tässä tapauksessa valitsemme Pythonin, mikä tarkoittaa, että käytämme tätä koodia:
```python
"""Run this model in Python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Siistitään koodia hieman, jotta se on uudelleenkäytettävä:
Siistitään koodi hieman, jotta se on uudelleenkäytettävä:
```python
def call_llm(prompt: str, system_message: str):
@ -96,17 +98,19 @@ def call_llm(prompt: str, system_message: str):
Tällä `call_llm`-funktiolla voimme nyt ottaa kehotteen ja järjestelmäkehotteen, ja funktio palauttaa tuloksen.
### Mukauta AI-avustajaa
### AI-avustajan muokkaaminen
Jos haluat mukauttaa AI-avustajaa, voit määrittää, miten haluat sen käyttäytyvän täyttämällä järjestelmäkehotteen seuraavasti:
Jos haluat muokata AI-avustajaa, 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")
```
## Julkaise se Web API:n kautta
## Julkaisu 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, tekoälyosa on valmis. Katsotaan, kuinka voimme integroida sen Web API:iin. Web API:lle valitsemme Flaskin, mutta mikä tahansa verkkokehys käy. Tässä koodi:
### Pythonin käyttö
```python
# api.py
@ -139,7 +143,7 @@ if __name__ == "__main__":
Tässä luomme Flask-API:n ja määrittelemme oletusreitin "/" ja "/chat". Jälkimmäistä käytetään frontendissä kysymysten välittämiseen.
Integrointi *llm.py*-tiedostoon vaatii seuraavat toimenpiteet:
Integroitaaksesi *llm.py*:n, tee seuraavat:
- Tuo `call_llm`-funktio:
@ -176,9 +180,13 @@ Integrointi *llm.py*-tiedostoon vaatii seuraavat toimenpiteet:
Hienoa, nyt olemme tehneet tarvittavat toimenpiteet.
### Määritä Cors
## Corsin konfigurointi
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ä asetamme jotain kuten CORS (cross-origin resource sharing). Tämä tarkoittaa, että koska taustajärjestelmä ja käyttöliittymä toimivat eri porteilla, meidän täytyy sallia käyttöliittymän kutsut taustajärjestelmään. *api.py*-tiedostossa on koodinpätkä, joka asettaa tämän:
### Pythonin käyttö
*api.py*-tiedostossa on koodinpätkä, joka asettaa tämän:
```python
from flask_cors import CORS
@ -189,9 +197,13 @@ 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.
## Käynnistä projektisi
## Projektin käynnistäminen
Projektin käynnistämiseksi sinun täytyy ensin käynnistää taustajärjestelmä ja sitten käyttöliittymä.
Ok, meillä on *llm.py* ja *api.py*. Kuinka voimme saada tämän toimimaan taustajärjestelmän kanssa? Tarvitsemme kaksi asiaa:
### Pythonin käyttö
Ok, meillä on *llm.py* ja *api.py*. Kuinka saamme tämän toimimaan taustajärjestelmän kanssa? Tarvitsemme kaksi asiaa:
- Asenna riippuvuudet:
@ -203,15 +215,15 @@ Ok, meillä on *llm.py* ja *api.py*. Kuinka voimme saada tämän toimimaan taust
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ä hiiren oikealla ja valita "Port Visibility" ja valita "Public".
Jos käytät Codespacesia, sinun täytyy mennä editorin alaosassa Ports-osioon, napsauttaa sitä oikealla ja valita "Port Visibility" ja valita "Public".
### Työskentele käyttöliittymän parissa
### Työskentely 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:
@ -241,7 +253,7 @@ Aloitetaan **index.html**-tiedostosta:
</html>
```
Tämä on ehdoton minimivaatimus chat-ikkunan tukemiseksi, sillä se sisältää tekstialueen, jossa viestit näytetään, syöttökentän viestin kirjoittamista varten ja painikkeen viestin lähettämiseksi taustajärjestelmään. Katsotaan seuraavaksi JavaScript-koodia *app.js*-tiedostossa.
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*.
**app.js**
@ -300,12 +312,12 @@ Tämä on ehdoton minimivaatimus chat-ikkunan tukemiseksi, sillä se sisältää
Käydään koodi läpi osittain:
- 1) Tässä haetaan viittaukset kaikkiin elementteihin, joita käytetään myöhemmin koodissa.
- 2) Tässä osiossa luodaan funktio, joka käyttää sisäänrakennettua `fetch`-metodia taustajärjestelmän kutsumiseen.
- 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ä kuunnellaan submit-tapahtumaa, luetaan syöttökenttä, lisätään käyttäjän viesti tekstialueeseen, kutsutaan API:ta ja näytetään vastaus tekstialueessa.
- 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.
Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta haluamasi, mutta tässä muutamia ehdotuksia:
Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta haluamasi, mutta tässä muutama ehdotus:
**styles.css**
@ -326,9 +338,9 @@ Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta halua
}
```
Näillä kolmella luokalla voit tyylitellä 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 muotoilla viestit eri tavalla riippuen siitä, tulevatko ne avustajalta vai käyttäjältä. Jos haluat inspiraatiota, katso `solution/frontend/styles.css`-kansio.
### Muuta Base Url
### Perus-URL:n muuttaminen
Yksi asia, jota emme vielä asettaneet, on `BASE_URL`. Tämä ei ole tiedossa ennen kuin taustajärjestelmä käynnistetään. Aseta se seuraavasti:
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Kopioi sisältö yllä olevista ohjeista, mutta voit mukauttaa sitä haluamallasi tavalla.
Kopioi sisältö yllä olevista ohjeista, mutta muokkaa sitä haluamallasi tavalla.
## Ratkaisu
@ -358,19 +369,25 @@ Kopioi sisältö yllä olevista ohjeista, mutta voit mukauttaa sitä haluamallas
## Bonus
Kokeile muuttaa AI-avustajan persoonallisuutta. Kun kutsut `call_llm`-funktiota *api.py*-tiedostossa, voit muuttaa toista argumenttia haluamaksesi, esimerkiksi:
Kokeile muuttaa AI-avustajan persoonallisuutta.
### Pythonille
Kun kutsut `call_llm`-funktiota *api.py*-tiedostossa, voit muuttaa toista argumenttia haluamaksesi, esimerkiksi:
```python
call_llm(message, "You are Captain Picard")
```
Muuta myös CSS ja teksti haluamallasi tavalla, eli tee muutoksia *index.html*- ja *styles.css*-tiedostoihin.
### Käyttöliittymä
Muuta myös CSS:ää ja tekstiä 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ä.
## Asennus Codespacesilla
## Codespacesin käyttö
- Siirry: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Luo mallista (varmista, että olet kirjautunut GitHubiin) oikeassa yläkulmassa:
@ -386,4 +403,4 @@ Hienoa, olet oppinut alusta alkaen, kuinka luoda henkilökohtainen avustaja teko
---
**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). Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinkäsityksistä tai virhetulkinnoista.
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ä.

@ -1,53 +1,16 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T01:28:43+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:33:05+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "fi"
}
-->
# Suorita koodi
# Käynnistä ratkaisu
## Asetukset
Luo virtuaaliympäristö
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Asenna riippuvuudet
```sh
pip install openai flask flask-cors
```
## Käynnistä API
```sh
python api.py
```
## Käynnistä frontend
Varmista, että olet frontend-kansiossa
Etsi *app.js*, muuta `BASE_URL` vastaamaan backend-URL-osoitettasi
Käynnistä se
```
npx http-server -p 8000
```
Kokeile kirjoittaa viesti chattiin, sinun pitäisi nähdä vastaus (edellyttäen, että suoritat tätä Codespacessa tai olet asettanut käyttöoikeustunnuksen).
## Aseta käyttöoikeustunnus (jos et suorita tätä Codespacessa)
Katso [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Käynnistä [taustajärjestelmä](./backend/README.md)
1. Käynnistä nyt [käyttöliittymä](./frontend/README.md)
---

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:43:54+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "fi"
}
-->
Valitse suoritusympäristösi
- [Python](./python/README.md)
---
**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ä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ä.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:48:28+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "fi"
}
-->
# Suorita koodi
## Aseta ympäristö
Luo virtuaalinen ympäristö
```sh
python -m venv venv
source ./venv/bin/activate
```
## Asenna riippuvuudet
```sh
pip install openai flask flask-cors
```
## Käynnistä API
```sh
python api.py
```
## Käynnistä käyttöliittymä
Varmista, että olet käyttöliittymän kansiossa
Etsi *app.js*, muuta `BASE_URL` vastaamaan taustapalvelimesi URL-osoitetta
Käynnistä se
```
npx http-server -p 8000
```
Kokeile kirjoittaa viesti chatissa, sinun pitäisi nähdä vastaus (edellyttäen, että suoritat tätä Codespacessa tai olet asettanut käyttöoikeustunnuksen).
## Aseta käyttöoikeustunnus (jos et suorita tätä Codespacessa)
Katso [Aseta PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**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äistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:45+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "fi"
}
-->
# Suorita koodi
```sh
npx http-server -p 3000
```
Etsi `BASE_URL` tiedostosta `app.js` ja muuta se vastaamaan backendin URL-osoitetta.
---
**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ä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ä.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:02:56+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:17:54+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "fr"
}
@ -11,29 +11,31 @@ CO_OP_TRANSLATOR_METADATA:
Ce projet de chat montre comment créer un assistant conversationnel en utilisant les modèles GitHub.
Voici à quoi ressemble le projet final :
Voici à quoi ressemble le projet finalisé :
<div>
<img src="./assets/screenshot.png" alt="Application de chat" width="600">
</div>
Pour donner un peu de contexte, créer des assistants conversationnels avec 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.
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.
## 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 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)
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)
<div>
<img src="./assets/playground.png" alt="Espace de test GitHub Models AI" width="600">
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
</div>
Comme mentionné, sélectionnez l'onglet "Code" et votre environnement d'exécution préféré.
Comme mentionné, sélectionnez l'onglet "Code" et votre runtime préféré.
<div>
<img src="./assets/playground-choice.png" alt="Choix dans l'espace de test" width="600">
<img src="./assets/playground-choice.png" alt="choix du playground" with="600">
</div>
Dans ce cas, nous choisissons Python, ce qui signifie que nous utilisons ce code :
### Utilisation de Python
Dans ce cas, nous sélectionnons Python, ce qui signifie que nous choisissons ce code :
```python
"""Run this model in Python
@ -98,15 +100,17 @@ 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 ceci :
Si vous souhaitez personnaliser l'assistant IA, vous pouvez spécifier son comportement en remplissant le prompt système comme suit :
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Exposer via une API Web
## L'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
```python
# api.py
@ -176,9 +180,13 @@ Pour intégrer *llm.py*, voici ce que nous devons faire :
Super, nous avons fait ce qu'il fallait.
### Configurer Cors
## 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 des ressources entre origines. Cela signifie que, puisque notre backend et notre frontend fonctionneront sur des ports différents, nous devons autoriser le frontend à appeler le backend. Voici un extrait de code dans *api.py* qui configure cela :
### Utilisation de Python
Il y a un morceau de code dans *api.py* qui configure cela :
```python
from flask_cors import CORS
@ -191,7 +199,11 @@ Actuellement, il est configuré pour autoriser "*" (toutes les origines), ce qui
## Exécuter votre projet
Ok, nous avons *llm.py* et *api.py*, comment pouvons-nous faire fonctionner cela avec un backend ? Eh bien, il y a deux choses à faire :
Pour exécuter votre projet, vous devez d'abord démarrer votre backend, puis votre frontend.
### 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 :
- Installer les dépendances :
@ -213,7 +225,7 @@ Ok, nous avons *llm.py* et *api.py*, comment pouvons-nous faire fonctionner cela
### Travailler sur un frontend
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 :
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 :
```text
backend/
@ -298,7 +310,7 @@ Ce qui précède est le strict minimum nécessaire pour prendre en charge une fe
})();
```
Analysons le code section par section :
Analysons le code 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.
@ -326,18 +338,18 @@ Passons au style maintenant. Voici où vous pouvez vraiment vous amuser et perso
}
```
Avec ces trois classes, vous pouvez styliser 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`.
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`.
### Modifier l'URL de base
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 :
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 :
- 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 à quelque chose comme "[nom]app.github.dev".
- 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".
## Exercice
## Devoir
Créez votre propre dossier *project* avec un contenu comme ceci :
Créez votre propre dossier *project* avec un contenu comme suit :
```text
project/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à le personnaliser selon vos préférences.
Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à personnaliser selon vos préférences.
## Solution
@ -358,28 +369,34 @@ Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à le personna
## Bonus
Essayez de changer la personnalité de l'assistant IA. Lorsque vous appelez `call_llm` dans *api.py*, vous pouvez modifier le deuxième argument selon vos envies, par exemple :
Essayez de changer 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 :
```python
call_llm(message, "You are Captain Picard")
```
Modifiez également le CSS et le texte selon vos préférences, donc apportez des changements dans *index.html* et *styles.css*.
### Frontend
Changez également le CSS et le texte selon vos préférences, en modifiant *index.html* et *styles.css*.
## Résumé
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.
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.
## Configuration avec Codespaces
- Accédez à : [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Rendez-vous sur : [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.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:07:39+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:18:19+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "fr"
}
-->
# Exécuter le code
# Exécuter la solution
## Configuration
Créer un environnement virtuel
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Installer les dépendances
```sh
pip install openai flask flask-cors
```
## Lancer l'API
```sh
python api.py
```
## Lancer le frontend
Assurez-vous de vous placer dans le dossier frontend.
Trouvez *app.js*, changez `BASE_URL` pour correspondre à l'URL de votre backend.
Lancez-le
```
npx http-server -p 8000
```
Essayez de taper un message dans le chat, vous devriez voir une réponse (à condition que vous exécutiez cela dans un Codespace ou que vous ayez configuré un jeton d'accès).
## Configurer un jeton d'accès (si vous n'exécutez pas cela dans un Codespace)
Voir [Configurer un PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Démarrez le [backend](./backend/README.md)
1. Ensuite, démarrez le [frontend](./frontend/README.md)
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l'utilisation de cette traduction.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:41:55+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "fr"
}
-->
Choisissez votre environnement d'exécution
- [Python](./python/README.md)
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:45:24+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "fr"
}
-->
# Exécuter le code
## Configuration
Créer un environnement virtuel
```sh
python -m venv venv
source ./venv/bin/activate
```
## Installer les dépendances
```sh
pip install openai flask flask-cors
```
## Lancer l'API
```sh
python api.py
```
## Lancer le frontend
Assurez-vous d'être dans le dossier frontend.
Localisez *app.js*, changez `BASE_URL` pour l'URL de votre backend.
Lancez-le
```
npx http-server -p 8000
```
Essayez de taper un message dans le chat, vous devriez voir une réponse (à condition que vous exécutiez cela dans un Codespace ou que vous ayez configuré un jeton d'accès).
## Configurer un jeton d'accès (si vous n'exécutez pas cela dans un Codespace)
Voir [Configurer un PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:50:37+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "fr"
}
-->
# Exécuter le code
```sh
npx http-server -p 3000
```
Repérez le `BASE_URL` dans `app.js` et modifiez-le pour qu'il corresponde à l'URL du backend.
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction professionnelle humaine. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T01:27:35+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:33:40+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "he"
}
@ -33,7 +33,9 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/playground-choice.png" alt="בחירת playground" with="600">
</div>
במקרה הזה אנחנו בוחרים ב-Python, מה שאומר שנבחר את הקוד הזה:
### שימוש ב-Python
במקרה הזה נבחר Python, מה שאומר שנבחר את הקוד הזה:
```python
"""Run this model in Python
@ -94,7 +96,7 @@ 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
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## חשיפה דרך Web API
מצוין, סיימנו את חלק ה-AI, בואו נראה איך אפשר לשלב אותו ב-Web API. עבור ה-Web API, אנחנו בוחרים להשתמש ב-Flask, אבל כל framework ווב יהיה טוב. הנה הקוד:
מצוין, סיימנו את חלק ה-AI, עכשיו נראה איך אפשר לשלב אותו ב-Web API. עבור ה-Web API, אנחנו בוחרים להשתמש ב-Flask, אבל כל framework ווב יהיה טוב. הנה הקוד:
### שימוש ב-Python
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
כאן אנחנו יוצרים API עם Flask ומגדירים נתיב ברירת מחדל "/" ונתיב "/chat". הנתיב השני מיועד לשימוש על ידי ה-frontend שלנו כדי להעביר שאלות.
כאן אנחנו יוצרים API עם Flask ומגדירים נתיב ברירת מחדל "/" ונתיב "/chat". הנתיב השני מיועד לשימוש על ידי ה-frontend שלנו כדי להעביר שאלות אליו.
כדי לשלב את *llm.py* הנה מה שצריך לעשות:
@ -176,9 +180,13 @@ if __name__ == "__main__":
מצוין, עכשיו סיימנו את מה שצריך.
### הגדרת Cors
## הגדרת Cors
חשוב לציין שהגדרנו משהו כמו CORS, שיתוף משאבים בין מקורות. זה אומר שכיוון שה-backend וה-frontend שלנו ירוצו על פורטים שונים, אנחנו צריכים לאפשר ל-frontend לקרוא ל-backend.
חשוב לציין שהגדרנו משהו כמו CORS, שיתוף משאבים בין מקורות. זה אומר שכיוון שה-backend וה-frontend שלנו ירוצו על פורטים שונים, אנחנו צריכים לאפשר ל-frontend לקרוא ל-backend. יש קטע קוד ב-*api.py* שמגדיר את זה:
### שימוש ב-Python
יש קטע קוד ב-*api.py* שמגדיר את זה:
```python
from flask_cors import CORS
@ -187,13 +195,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
כרגע זה מוגדר לאפשר "*", כלומר כל המקורות, וזה קצת לא בטוח. כדאי להגביל את זה כשנעבור לייצור.
כרגע זה מוגדר לאפשר "*" שזה כל המקורות, וזה קצת לא בטוח. כדאי להגביל את זה כשנעבור לייצור.
## הרצת הפרויקט
כדי להריץ את הפרויקט, צריך להפעיל קודם את ה-backend ואז את ה-frontend.
### שימוש ב-Python
אוקיי, יש לנו *llm.py* ו-*api.py*, איך אפשר לגרום לזה לעבוד עם backend? יש שני דברים שצריך לעשות:
- התקנת תלותים:
- להתקין תלותים:
```sh
cd backend
@ -203,13 +215,13 @@ 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".
### עבודה על ה-frontend
@ -241,7 +253,7 @@ styles.css
</html>
```
הקוד למעלה הוא המינימום הדרוש כדי לתמוך בחלון צ'אט, שכן הוא כולל textarea שבו יוצגו ההודעות, input שבו תכתבו את ההודעה וכפתור לשליחת ההודעה ל-backend. בואו נסתכל על ה-JavaScript הבא ב-*app.js*
הקוד למעלה הוא המינימום הנדרש כדי לתמוך בחלון צ'אט, שכן הוא כולל textarea שבו יוצגו ההודעות, input שבו תכתבו את ההודעה וכפתור לשליחת ההודעה ל-backend. עכשיו נסתכל על ה-JavaScript ב-*app.js*
**app.js**
@ -303,9 +315,9 @@ styles.css
- 1) כאן אנחנו מקבלים הפניה לכל האלמנטים שנשתמש בהם בהמשך הקוד.
- 2) בחלק הזה אנחנו יוצרים פונקציה שמשתמשת ב-`fetch` המובנה כדי לקרוא ל-backend שלנו.
- 3) `appendMessage` עוזרת להוסיף תגובות וגם את מה שאתם כמשתמשים כותבים.
- 4) כאן אנחנו מאזינים לאירוע submit, קוראים את שדה הקלט, מציבים את הודעת המשתמש ב-textarea, קוראים ל-API, ומציגים את התגובה ב-textarea.
- 4) כאן אנחנו מאזינים לאירוע submit, קוראים את שדה הקלט, מציבים את הודעת המשתמש ב-textarea, קוראים ל-API ומציגים את התגובה ב-textarea.
בואו נסתכל על עיצוב, כאן אפשר להשתגע ולעצב איך שרוצים, אבל הנה כמה הצעות:
עכשיו נסתכל על עיצוב, כאן אפשר להשתגע ולעצב איך שרוצים, אבל הנה כמה הצעות:
**styles.css**
@ -326,7 +338,7 @@ styles.css
}
```
עם שלושת המחלקות האלה, תוכלו לעצב הודעות בצורה שונה בהתאם למקור שלהן - עוזר או אתם כמשתמשים. אם אתם רוצים השראה, בדקו את התיקייה `solution/frontend/styles.css`.
עם שלושת המחלקות האלה, תוכלו לעצב הודעות בצורה שונה בהתאם למקור שלהן - עוזר או משתמש. אם אתם רוצים השראה, בדקו את התיקייה `solution/frontend/styles.css`.
### שינוי Base Url
@ -337,7 +349,7 @@ styles.css
## משימה
צרו תיקייה משלכם *project* עם תוכן כזה:
צרו תיקייה משלכם *project* עם תוכן כמו כך:
```text
project/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
העתיקו את התוכן מההוראות למעלה, אבל הרגישו חופשיים להתאים אותו לטעמכם.
העתיקו את התוכן מההוראות למעלה אבל הרגישו חופשיים להתאים אותו לטעמכם.
## פתרון
@ -358,12 +369,18 @@ project/
## בונוס
נסו לשנות את האישיות של עוזר ה-AI. כשאתם קוראים ל-`call_llm` ב-*api.py* תוכלו לשנות את הפרמטר השני למה שתרצו, לדוגמה:
נסו לשנות את האישיות של עוזר ה-AI.
### עבור Python
כשאתם קוראים ל-`call_llm` ב-*api.py* תוכלו לשנות את הפרמטר השני למה שתרצו, לדוגמה:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
שנו גם את ה-CSS והטקסט לטעמכם, כך שתעשו שינויים ב-*index.html* וב-*styles.css*.
## סיכום
@ -372,7 +389,7 @@ call_llm(message, "You are Captain Picard")
## הגדרה עם Codespaces
- נווטו ל-[Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- נווטו ל: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- צרו מתוך תבנית (ודאו שאתם מחוברים ל-GitHub) בפינה הימנית העליונה:
![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.he.png)
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T01:28:56+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:34:02+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "he"
}
-->
# הפעלת קוד
# הפעלת הפתרון
## הגדרות
צור סביבה וירטואלית
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## התקנת תלותים
```sh
pip install openai flask flask-cors
```
## הפעלת API
```sh
python api.py
```
## הפעלת ממשק קדמי
וודא שאתה נמצא בתיקיית ה-frontend
מצא את *app.js*, שנה את `BASE_URL` לכתובת ה-URL של ה-backend שלך
הפעל את זה
```
npx http-server -p 8000
```
נסה להקליד הודעה בצ'אט, אתה אמור לראות תגובה (בתנאי שאתה מפעיל את זה ב-Codespace או שהגדרת אסימון גישה).
## הגדרת אסימון גישה (אם אינך מפעיל את זה ב-Codespace)
ראה [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. הפעל את [החלק האחורי](./backend/README.md)
1. עכשיו הפעל את [החלק הקדמי](./frontend/README.md)
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:02+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "he"
}
-->
בחר את סביבת הריצה שלך
- [Python](./python/README.md)
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:48:41+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "he"
}
-->
# הפעלת קוד
## הגדרה
צור סביבת עבודה וירטואלית
```sh
python -m venv venv
source ./venv/bin/activate
```
## התקנת תלותים
```sh
pip install openai flask flask-cors
```
## הפעלת API
```sh
python api.py
```
## הפעלת ממשק קדמי
וודא שאתה נמצא בתיקיית ה-frontend
מצא את *app.js*, שנה את `BASE_URL` לכתובת ה-URL של ה-backend שלך
הפעל את זה
```
npx http-server -p 8000
```
נסה להקליד הודעה בצ'אט, אתה אמור לראות תגובה (בתנאי שאתה מפעיל את זה ב-Codespace או שהגדרת אסימון גישה).
## הגדרת אסימון גישה (אם אינך מפעיל את זה ב-Codespace)
ראה [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:54+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "he"
}
-->
# הפעל את הקוד
```sh
npx http-server -p 3000
```
אתרו את `BASE_URL` ב-`app.js` ושנו אותו כך שיתאים לכתובת ה-URL של השרת האחורי.
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:05:56+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:24:31+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "hi"
}
@ -11,29 +11,31 @@ CO_OP_TRANSLATOR_METADATA:
यह चैट प्रोजेक्ट दिखाता है कि GitHub Models का उपयोग करके एक चैट असिस्टेंट कैसे बनाया जा सकता है।
यहाँ पर तैयार प्रोजेक्ट कुछ ऐसा दिखता है:
यहाँ पर तैयार प्रोजेक्ट ऐसा दिखता है:
<div>
<img src="./assets/screenshot.png" alt="चैट ऐप" width="600">
</div>
थोड़ा संदर्भ: जनरेटिव 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) पर ऐसा दिखता है:
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
</div>
जैसा कि हमने कहा, "Code" टैब और अपनी चुनी हुई रनटाइम का चयन करें।
जैसा कि हमने कहा, "Code" टैब और अपने चुने हुए रनटाइम को चुनें।
<div>
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
इस मामले में, हम Python का चयन करते हैं, जिसका मतलब है कि हम इस कोड को चुनेंगे:
### Python का उपयोग करना
इस मामले में, हम Python चुनते हैं, जिसका मतलब है कि हम इस कोड को चुनेंगे:
```python
"""Run this model in Python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
आइए इस कोड को थोड़ा साफ करें ताकि यह पुन: उपयोग योग्य हो:
आइए इस कोड को थोड़ा साफ करें ताकि यह पुन: उपयोग योग्य हो जाए:
```python
def call_llm(prompt: str, system_message: str):
@ -98,7 +100,7 @@ def call_llm(prompt: str, system_message: str):
### 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")
@ -106,7 +108,9 @@ 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 का उपयोग करना
```python
# api.py
@ -137,9 +141,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
यहाँ, हम एक Flask API बनाते हैं और "/" और "/chat" नामक डिफ़ॉल्ट रूट परिभाषित करते हैं। "/chat" रूट का उपयोग हमारे फ्रंटएंड द्वारा प्रश्नों को पास करने के लिए किया जाता है।
यहाँ, हम एक Flask API बनाते हैं और "/" और "/chat" नामक डिफ़ॉल्ट रूट को परिभाषित करते हैं। दूसरा रूट हमारे फ्रंटएंड द्वारा प्रश्नों को पास करने के लिए उपयोग किया जाता है।
*llm.py* को इंटीग्रेट करने के लिए हमें यह करना होगा:
*llm.py* को इंटीग्रेट करने के लिए हमें निम्नलिखित करना होगा:
- `call_llm` फंक्शन को इंपोर्ट करें:
@ -148,7 +152,7 @@ if __name__ == "__main__":
from flask import Flask, request
```
- "/chat" रूट से इसे कॉल करें:
- इसे "/chat" रूट से कॉल करें:
```python
@app.route("/hello", methods=["POST"])
@ -163,7 +167,7 @@ if __name__ == "__main__":
})
```
यहाँ हम इनकमिंग रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद, हम इस कॉल के साथ LLM को कॉल करते हैं:
यहाँ हम आने वाले रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद हम LLM को इस कॉल के साथ कॉल करते हैं:
```python
response = call_llm(message, "You are a helpful assistant")
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
बहुत बढ़िया, अब हमने वह कर लिया जो हमें चाहिए था।
बहुत अच्छा, अब हमने वह कर लिया जो हमें चाहिए था।
## Cors को कॉन्फ़िगर करें
### Cors को कॉन्फ़िगर करें
हमें यह बताना चाहिए कि हमने कुछ ऐसा सेटअप किया है जिसे CORS कहते हैं, यानी क्रॉस-ओरिजिन रिसोर्स शेयरिंग। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट्स पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी।
हमें यह बताना चाहिए कि हमने CORS (Cross-Origin Resource Sharing) सेटअप किया है। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट्स पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी। *api.py* में इसका सेटअप करने के लिए कोड का एक हिस्सा है:
### Python का उपयोग करना
*api.py* में एक कोड का टुकड़ा है जो इसे सेट करता है:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
अभी यह "*" पर सेट है, जो सभी ओरिजिन्स को अनुमति देता है, और यह थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने से पहले प्रतिबंधित करना चाहिए।
अभी इसे "*" यानी सभी ओरिजिन्स की अनुमति देने के लिए सेट किया गया है, जो थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने पर प्रतिबंधित करना चाहिए।
## अपना प्रोजेक्ट चलाएं
ठीक है, तो हमारे पास *llm.py* और *api.py* है। अब इसे बैकएंड के साथ काम करने के लिए कैसे सेट करें? इसके लिए हमें दो चीजें करनी होंगी:
अपने प्रोजेक्ट को चलाने के लिए, आपको पहले अपना बैकएंड और फिर अपना फ्रंटएंड शुरू करना होगा।
### Python का उपयोग करना
ठीक है, हमारे पास *llm.py* और *api.py* है। इसे बैकएंड के साथ कैसे काम में लाया जाए? इसके लिए हमें दो चीजें करनी होंगी:
- डिपेंडेंसीज़ इंस्टॉल करें:
@ -213,7 +225,7 @@ CORS(app) # * example.com
### फ्रंटएंड पर काम करें
अब जब हमारे पास API चल रही है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं:
अब जब हमारा API चल रहा है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं:
```text
backend/
@ -223,7 +235,7 @@ app.js
styles.css
```
चल **index.html** से शुरू करते हैं:
चलिए **index.html** से शुरू करते हैं:
```html
<html>
@ -241,7 +253,7 @@ styles.css
</html>
```
ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है, क्योंकि इसमें एक टेक्स्टएरिया है जहाँ संदेश रेंडर होंगे, एक इनपुट है जहाँ संदेश टाइप किया जाएगा, और एक बटन है जो आपके संदेश को बैकएंड पर भेजेगा। अब *app.js* में JavaScript को देखें:
ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है। इसमें एक टेक्स्ट एरिया है जहाँ संदेश रेंडर किए जाएंगे, एक इनपुट है जहाँ संदेश टाइप किया जाएगा, और एक बटन है जो आपके संदेश को बैकएंड पर भेजता है। अब *app.js* में JavaScript को देखें:
**app.js**
@ -300,12 +312,12 @@ styles.css
आइए कोड को सेक्शन के अनुसार समझें:
- 1) यहाँ हम उन सभी एलिमेंट्स का रेफरेंस प्राप्त करते हैं जिनका उपयोग हम बाद में कोड में करेंगे।
- 1) यहाँ हम उन सभी एलिमेंट्स का रेफरेंस प्राप्त करते हैं जिन्हें हम बाद में कोड में उपयोग करेंगे।
- 2) इस सेक्शन में, हम एक फंक्शन बनाते हैं जो बिल्ट-इन `fetch` मेथड का उपयोग करता है और हमारे बैकएंड को कॉल करता है।
- 3) `appendMessage` उपयोगकर्ता द्वारा टाइप किए गए संदेश और असिस्टेंट के उत्तर को जोड़ने में मदद करता है।
- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्टएरिया में डालते हैं, API को कॉल करते हैं, और टेक्स्टएरिया में उत्तर रेंडर करते हैं।
- 3) `appendMessage` उपयोगकर्ता द्वारा टाइप किए गए संदेशों और असिस्टेंट के उत्तरों को जोड़ने में मदद करता है।
- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्ट एरिया में रखते हैं, API को कॉल करते हैं, और टेक्स्ट एरिया में उत्तर रेंडर करते हैं।
अब स्टाइलिंग पर नज़र डालते हैं। यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव इस प्रकार हैं:
अब स्टाइलिंग को देखें। यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव दिए गए हैं:
**styles.css**
@ -326,14 +338,14 @@ styles.css
}
```
इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह इस पर निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर देखें।
इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर को देखें।
### बेस URL बदलें
यहाँ एक चीज़ है जिसे हमने सेट नहीं किया और वह है `BASE_URL`। यह तब तक ज्ञात नहीं होगा जब तक आपका बैकएंड शुरू नहीं हो जाता। इसे सेट करने के लिए:
यहाँ एक चीज़ है जिसे हमने सेट नहीं किया और वह है `BASE_URL`, यह तब तक ज्ञात नहीं होता जब तक आपका बैकएंड शुरू नहीं होता। इसे सेट करने के लिए:
- यदि आप API को लोकली चलाते हैं, तो इसे `http://localhost:5000` जैसा कुछ सेट करना चाहिए।
- यदि Codespaces में चलाते हैं, तो यह कुछ इस तरह दिखेगा: "[name]app.github.dev"।
- यदि Codespaces में चलाते हैं, तो यह कुछ ऐसा दिखना चाहिए: "[name]app.github.dev"।
## असाइनमेंट
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
ऊपर दिए गए निर्देशों से सामग्री कॉपी करें, लेकिन अपनी पसंद के अनुसार इसे कस्टमाइज़ करें।
ऊपर दिए गए निर्देशों से सामग्री कॉपी करें, लेकिन इसे अपनी पसंद के अनुसार कस्टमाइज़ करें।
## समाधान
@ -358,32 +369,38 @@ project/
## बोनस
AI असिस्टेंट की पर्सनालिटी बदलने की कोशिश करें। जब आप *api.py* में `call_llm` को कॉल करते हैं, तो आप दूसरे आर्गुमेंट को अपनी पसंद के अनुसार बदल सकते हैं, जैसे:
AI असिस्टेंट की पर्सनैलिटी बदलने की कोशिश करें।
### Python के लिए
जब आप *api.py* में `call_llm` को कॉल करते हैं, तो आप दूसरे आर्ग्युमेंट को अपनी पसंद के अनुसार बदल सकते हैं, उदाहरण के लिए:
```python
call_llm(message, "You are Captain Picard")
```
### फ्रंटएंड
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)
- टॉप-राइट कॉर्नर में "Create from template" पर क्लिक करें (सुनिश्चित करें कि आप GitHub में लॉग इन हैं):
- टॉप-राइट कॉर्नर में टेम्पलेट से क्रिएट करें (सुनिश्चित करें कि आप GitHub में लॉग इन हैं):
![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hi.png)
![टेम्पलेट से क्रिएट करें](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hi.png)
- एक बार अपने रिपोजिटरी में, Codespace बनाएं:
- एक बार अपने रिपो में, Codespace बनाएं:
![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hi.png)
![Codespace बनाएं](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hi.png)
यह एक ऐसा वातावरण शुरू करेगा जिसमें आप अब काम कर सकते हैं।
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल दस्तावेज़, जो इसकी मूल भाषा में है, को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:08:29+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:25:08+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "hi"
}
-->
# कोड चलाएं
# समाधान चलाएं
## सेटअप
वर्चुअल एनवायरनमेंट बनाएं
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## डिपेंडेंसीज़ इंस्टॉल करें
```sh
pip install openai flask flask-cors
```
## API चलाएं
```sh
python api.py
```
## फ्रंटएंड चलाएं
सुनिश्चित करें कि आप फ्रंटएंड फोल्डर में खड़े हैं
*app.js* ढूंढें, `BASE_URL` को अपने बैकएंड URL में बदलें
इसे चलाएं
```
npx http-server -p 8000
```
चैट में एक संदेश टाइप करने की कोशिश करें, आपको एक प्रतिक्रिया दिखनी चाहिए (यदि आप इसे Codespace में चला रहे हैं या आपने एक्सेस टोकन सेट किया है)।
## एक्सेस टोकन सेट करें (यदि आप इसे Codespace में नहीं चला रहे हैं)
[व्यक्तिगत एक्सेस टोकन सेट करें](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) देखें
1. [बैकएंड](./backend/README.md) शुरू करें
1. अब [फ्रंटएंड](./frontend/README.md) शुरू करें
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:47+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "hi"
}
-->
अपना रनटाइम चुनें
- [Python](./python/README.md)
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:46:47+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "hi"
}
-->
# कोड चलाएं
## सेटअप
वर्चुअल एनवायरनमेंट बनाएं
```sh
python -m venv venv
source ./venv/bin/activate
```
## डिपेंडेंसीज़ इंस्टॉल करें
```sh
pip install openai flask flask-cors
```
## एपीआई चलाएं
```sh
python api.py
```
## फ्रंटएंड चलाएं
सुनिश्चित करें कि आप फ्रंटएंड फोल्डर में खड़े हैं
*app.js* को ढूंढें, `BASE_URL` को अपने बैकएंड URL में बदलें
इसे चलाएं
```
npx http-server -p 8000
```
चैट में एक संदेश टाइप करने की कोशिश करें, आपको एक प्रतिक्रिया दिखनी चाहिए (यदि आप इसे Codespace में चला रहे हैं या आपने एक्सेस टोकन सेट किया है)।
## एक्सेस टोकन सेट करें (यदि आप इसे Codespace में नहीं चला रहे हैं)
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) देखें
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:51:34+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "hi"
}
-->
# कोड चलाएं
```sh
npx http-server -p 3000
```
`app.js` में `BASE_URL` को ढूंढें और इसे बैकएंड के URL से मेल खाने के लिए बदलें।
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।

@ -1,15 +1,15 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T17:04:41+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:22:34+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "hk"
}
-->
# 聊天項目
這個聊天項目展示了如何使用 GitHub Models 建一個聊天助手。
這個聊天項目展示了如何使用 GitHub Models 建一個聊天助手。
以下是完成後的項目樣子:
@ -17,11 +17,11 @@ CO_OP_TRANSLATOR_METADATA:
<img src="./assets/screenshot.png" alt="聊天應用程式" width="600">
</div>
一些背景資訊,使用生成式 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) 的樣子:
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -30,10 +30,12 @@ CO_OP_TRANSLATOR_METADATA:
如我們所說,選擇 "Code" 標籤和你選擇的運行環境。
<div>
<img src="./assets/playground-choice.png" alt="playground 選擇" with="600">
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
在這個例子中,我們選擇 Python這意味著我們會選擇以下代碼
### 使用 Python
在這個例子中,我們選擇 Python這意味著我們選擇以下代碼
```python
"""Run this model in Python
@ -94,19 +96,21 @@ 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
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
在這裡,我們創建了一個 Flask API並定義了默認路由 "/" 和 "/chat"。後者是供我們的前端用來向後端傳遞問題的。
在這裡,我們創建了一個 Flask API並定義了默認路由 "/" 和 "/chat"。後者是供前端用來向後端傳遞問題的。
要整合 *llm.py*,我們需要做以下幾件事:
@ -163,7 +167,7 @@ if __name__ == "__main__":
})
```
在這裡,我們解析傳入的請求,從 JSON 主體中檢索 `message` 屬性。然後,我們通過以下調用來調用 LLM
在這裡,我們解析傳入的請求,從 JSON 主體中檢索 `message` 屬性。然後我們使用以下調用來調用 LLM
```python
response = call_llm(message, "You are a helpful assistant")
@ -174,11 +178,15 @@ if __name__ == "__main__":
})
```
很好,現在我們已經完成了所需的部分。
很好,現在我們已完成所需的部分。
## 配置 Cors
### 配置 CORS
我們需要設置像 CORS跨來源資源共享這樣的東西。這意味著由於我們的後端和前端將運行在不同的端口我們需要允許前端調用後端。
我們需要提到的是,我們設置了類似 CORS跨來源資源共享的東西。這意味著由於我們的後端和前端將在不同的端口運行我們需要允許前端調用後端。在 *api.py* 中有一段代碼設置了這個功能:
### 使用 Python
*api.py* 中有一段代碼設置了這個功能:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
目前它被設置為允許 "*",即所有來源,這有點不安全,我們應該在進入生產環境時進行限制。
目前它被設置為允許 "*",即所有來源,這有點不安全,應該在進入生產環境時進行限制。
## 運行你的項目
好了,我們有了 *llm.py**api.py*,如何讓它與後端一起工作呢?我們需要做兩件事:
要運行你的項目,你需要先啟動後端,然後啟動前端。
### 使用 Python
好的,我們有 *llm.py**api.py*,如何讓它們在後端運行?我們需要做以下兩件事:
- 安裝依賴項:
@ -203,17 +215,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/
@ -223,7 +235,7 @@ app.js
styles.css
```
讓我們從 **index.html** 開始
首先是 **index.html**
```html
<html>
@ -241,7 +253,7 @@ styles.css
</html>
```
以上是支持聊天窗口所需的最低限度內容,包括一個用於顯示消息的文本區域、一個輸入框用於輸入消息,以及一個按鈕用於將消息發送到後端。接下來,讓我們看看 *app.js* 中的 JavaScript
以上是支持聊天窗口所需的最低限度,包括一個用於顯示消息的文本區域、一個輸入框用於輸入消息,以及一個按鈕用於將消息發送到後端。接下來看看 *app.js* 中的 JavaScript。
**app.js**
@ -300,12 +312,12 @@ styles.css
讓我們逐段解析代碼:
- 1) 在這裡,我們獲取所有稍後會在代碼中引用的元素的引用。
- 2) 在這部分,我們創建了一個函數,使用內建的 `fetch` 方法調用後端。
- 3) `appendMessage` 幫助添加應以及用戶輸入的消息。
- 4) 在這裡,我們監聽提交事件,讀取輸入字段,將用戶的消息放入文本區域,調用 API並將響應渲染到文本區域中
- 1) 在這裡,我們獲取所有稍後會引用的元素的引用。
- 2) 在這部分,我們創建了一個函數,使用內建的 `fetch` 方法調用後端。
- 3) `appendMessage` 幫助添加助手的回應以及用戶輸入的消息。
- 4) 在這裡,我們監聽提交事件,讀取輸入框的內容,將用戶的消息放入文本區域,調用 API並將回應渲染到文本區域
接下來讓我們看看樣式設計,這裡你可以自由發揮,讓它看起來像你想要的樣子,但以下是一些建議:
接下來看看樣式,這裡你可以自由發揮,讓它看起來像你想要的樣子,但以下是一些建議:
**styles.css**
@ -326,18 +338,18 @@ styles.css
}
```
通過這三個類,你可以根據消息的來源(助手或用戶)來設計不同的樣式。如果你需要靈感,可以查看 `solution/frontend/styles.css` 文件夾。
有了這三個類,你可以根據消息的來源(助手或用戶)來區分樣式。如果需要靈感,可以查看 `solution/frontend/styles.css` 文件夾。
### 更改 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/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
複製上述指導中的內容,但可以根據的喜好進行自定義。
複製上述指導中的內容,但可以根據自己的喜好進行自定義。
## 解決方案
@ -358,26 +369,32 @@ project/
## 額外挑戰
嘗試更改 AI 助手的個性。在 *api.py* 中調用 `call_llm` 時,可以將第二個參數更改為你想要的內容,例如:
嘗試更改 AI 助手的個性。
### 對於 Python
*api.py* 中調用 `call_llm` 時,可以更改第二個參數為你想要的內容,例如:
```python
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)
- 進入你的倉庫後,創建一個 Codespace
- 一旦進入你的 repo,創建一個 Codespace
![創建 Codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png)
@ -386,4 +403,4 @@ call_llm(message, "You are Captain Picard")
---
**免責聲明**
此文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊,建議使用專業的人類翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。
此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於關鍵資訊,建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤詮釋概不負責。

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T17:08:09+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:22:57+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "hk"
}
-->
# 執行程式碼
# 執行解決方案
## 設置
建立虛擬環境
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## 安裝依賴項
```sh
pip install openai flask flask-cors
```
## 執行 API
```sh
python api.py
```
## 執行前端
確保你位於前端資料夾
找到 *app.js*,將 `BASE_URL` 更改為你的後端 URL
執行它
```
npx http-server -p 8000
```
嘗試在聊天中輸入訊息,你應該會看到回應(前提是你在 Codespace 中執行此操作或已設置存取權杖)。
## 設置存取權杖(如果你不是在 Codespace 中執行)
請參閱 [設置 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. 啟動 [backend](./backend/README.md)
1. 現在啟動 [frontend](./frontend/README.md)
---
**免責聲明**
文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊,建議使用專業的人工作翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:42:31+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "hk"
}
-->
選擇您的執行環境
- [Python](./python/README.md)
---
**免責聲明**
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:46:21+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "hk"
}
-->
# 執行程式碼
## 設置
建立虛擬環境
```sh
python -m venv venv
source ./venv/bin/activate
```
## 安裝依賴項
```sh
pip install openai flask flask-cors
```
## 啟動 API
```sh
python api.py
```
## 啟動前端
確保你位於 frontend 資料夾內
找到 *app.js*,將 `BASE_URL` 更改為你的後端 URL
執行
```
npx http-server -p 8000
```
嘗試在聊天框中輸入訊息,你應該會看到回應(前提是你在 Codespace 中運行,或者已經設置了存取權杖)。
## 設置存取權杖(如果你不是在 Codespace 中運行)
請參閱 [設置 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**免責聲明**
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯,請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:51:18+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "hk"
}
-->
# 執行程式碼
```sh
npx http-server -p 3000
```
找到 `app.js` 中的 `BASE_URL`,並將其更改為與後端的 URL 相匹配。
---
**免責聲明**
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。

@ -1,15 +1,15 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T13:03:34+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:39:23+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "hr"
}
-->
# Projekt za chat
# Chat projekt
Ovaj projekt za chat pokazuje kako izraditi Chat asistenta koristeći GitHub Models.
Ovaj chat projekt pokazuje kako izraditi Chat Asistenta koristeći GitHub modele.
Evo kako izgleda gotov projekt:
@ -17,23 +17,25 @@ Evo kako izgleda gotov projekt:
<img src="./assets/screenshot.png" alt="Chat aplikacija" width="600">
</div>
Malo konteksta: izrada chat asistenata pomoću generativne AI tehnologije odličan je način za početak učenja o umjetnoj inteligenciji. Tijekom ove lekcije naučit ćete kako integrirati generativnu AI u web aplikaciju. Krenimo!
Malo konteksta, izrada chat asistenata pomoću generativne umjetne inteligencije odličan je način za početak učenja o AI-ju. Tijekom ove lekcije naučit ćete kako integrirati generativnu AI u web aplikaciju. Krenimo.
## Povezivanje s generativnom AI
Za backend koristimo GitHub Models. To je odlična usluga koja omogućuje besplatno korištenje AI. Posjetite njihov playground i preuzmite kod koji odgovara vašem odabranom jeziku za backend. Evo kako to izgleda na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Za backend koristimo GitHub modele. To je odlična usluga koja vam omogućuje korištenje AI-ja besplatno. Posjetite njihov playground i preuzmite kod koji odgovara vašem odabranom jeziku za backend. Evo kako to izgleda na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
</div>
Kao što smo rekli, odaberite karticu "Code" i vaš odabrani runtime.
Kao što smo rekli, odaberite karticu "Code" i svoj runtime.
<div>
<img src="./assets/playground-choice.png" alt="playground izbor" with="600">
<img src="./assets/playground-choice.png" alt="playground choice" with="600">
</div>
U ovom slučaju odabiremo Python, što znači da biramo ovaj kod:
### Korištenje Pythona
U ovom slučaju odabiremo Python, što znači da ćemo koristiti ovaj kod:
```python
"""Run this model in Python
@ -70,7 +72,7 @@ response = client.chat.completions.create(
print(response.choices[0].message.content)
```
Očistimo ovaj kod malo kako bi bio ponovno upotrebljiv:
Očistimo ovaj kod kako bi bio ponovno upotrebljiv:
```python
def call_llm(prompt: str, system_message: str):
@ -94,7 +96,7 @@ def call_llm(prompt: str, system_message: str):
return response.choices[0].message.content
```
S ovom funkcijom `call_llm` sada možemo uzeti prompt i sistemski prompt, a funkcija vraća rezultat.
S ovom funkcijom `call_llm` sada možemo uzeti prompt i sistemski prompt, a funkcija će vratiti rezultat.
### Prilagodba AI asistenta
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Izlaganje putem Web API-ja
Odlično, završili smo AI dio, sada pogledajmo kako ga možemo integrirati u Web API. Za Web API odabiremo Flask, ali bilo koji web framework bi trebao biti dobar. Pogledajmo kod za to:
Odlično, završili smo AI dio, sada pogledajmo kako to možemo integrirati u Web API. Za Web API koristimo Flask, ali bilo koji web framework bi trebao biti dobar. Pogledajmo kod za to:
### Korištenje Pythona
```python
# api.py
@ -137,11 +141,11 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Ovdje kreiramo Flask API i definiramo zadanu rutu "/" i "/chat". Potonja ruta namijenjena je za korištenje od strane našeg frontenda za slanje pitanja.
Ovdje kreiramo Flask API i definiramo zadanu rutu "/" i "/chat". Potonja je namijenjena za korištenje od strane našeg frontenda za slanje pitanja.
Za integraciju *llm.py* trebamo učiniti sljedeće:
- Importirati funkciju `call_llm`:
- Uvesti funkciju `call_llm`:
```python
from llm import call_llm
@ -174,11 +178,15 @@ Za integraciju *llm.py* trebamo učiniti sljedeće:
})
```
Odlično, sada smo napravili što je potrebno.
Odlično, sada smo završili što je potrebno.
## Konfiguriranje CORS-a
### Konfiguracija Cors
Trebamo napomenuti da smo postavili nešto poput CORS-a, dijeljenja resursa između različitih izvora. To znači da, budući da će naš backend i frontend raditi na različitim portovima, moramo omogućiti frontendu da poziva backend.
Treba napomenuti da postavljamo nešto poput CORS-a, dijeljenja resursa između različitih izvora. To znači da, budući da će naš backend i frontend raditi na različitim portovima, moramo omogućiti frontendu da poziva backend. Postoji dio koda u *api.py* koji to postavlja:
### Korištenje Pythona
Postoji dio koda u *api.py* koji to postavlja:
```python
from flask_cors import CORS
@ -191,6 +199,10 @@ Trenutno je postavljeno da dopušta "*" što znači sve izvore, što je pomalo n
## Pokretanje projekta
Za pokretanje projekta prvo trebate pokrenuti backend, a zatim frontend.
### Korištenje Pythona
Ok, imamo *llm.py* i *api.py*, kako to možemo pokrenuti s backendom? Postoje dvije stvari koje trebamo učiniti:
- Instalirati ovisnosti:
@ -209,7 +221,7 @@ Ok, imamo *llm.py* i *api.py*, kako to možemo pokrenuti s backendom? Postoje dv
python api.py
```
Ako ste u Codespaces, trebate otići na Ports u donjem dijelu uređivača, desnim klikom odabrati "Port Visibility" i odabrati "Public".
Ako koristite Codespaces, trebate otići na Ports u donjem dijelu uređivača, desnim klikom odabrati "Port Visibility" i odabrati "Public".
### Rad na frontendu
@ -223,7 +235,7 @@ app.js
styles.css
```
Krenimo s **index.html**:
Počnimo s **index.html**:
```html
<html>
@ -241,7 +253,7 @@ Krenimo s **index.html**:
</html>
```
Ovo gore je apsolutni minimum potreban za podršku prozoru za chat, jer se sastoji od tekstualnog područja gdje će se prikazivati poruke, polja za unos gdje se upisuje poruka i gumba za slanje poruke na backend. Pogledajmo sljedeće JavaScript u *app.js*
Ovo gore je apsolutni minimum potreban za podršku chat prozoru, jer se sastoji od tekstualnog područja gdje će se prikazivati poruke, unosa za upisivanje poruke i gumba za slanje poruke na backend. Pogledajmo sljedeće JavaScript u *app.js*
**app.js**
@ -302,10 +314,10 @@ Prođimo kroz kod po sekcijama:
- 1) Ovdje dobivamo referencu na sve elemente koje ćemo kasnije koristiti u kodu.
- 2) U ovom dijelu kreiramo funkciju koja koristi ugrađenu metodu `fetch` za pozivanje našeg backenda.
- 3) `appendMessage` pomaže dodati odgovore kao i ono što korisnik upisuje.
- 3) `appendMessage` pomaže dodati odgovore kao i ono što vi kao korisnik upišete.
- 4) Ovdje slušamo događaj submit i na kraju čitamo polje za unos, stavljamo korisnikovu poruku u tekstualno područje, pozivamo API i prikazujemo odgovor u tekstualnom području.
Pogledajmo sljedeće stiliziranje, ovdje možete biti kreativni i napraviti izgled kakav želite, ali evo nekih prijedloga:
Pogledajmo sljedeće stiliziranje, ovdje možete biti kreativni i napraviti da izgleda kako želite, ali evo nekih prijedloga:
**styles.css**
@ -326,18 +338,18 @@ Pogledajmo sljedeće stiliziranje, ovdje možete biti kreativni i napraviti izgl
}
```
S ove tri klase stilizirat ćete poruke različito ovisno o tome dolaze li od asistenta ili od korisnika. Ako želite inspiraciju, pogledajte mapu `solution/frontend/styles.css`.
S ove tri klase stilizirat ćete poruke različito ovisno o tome dolaze li od asistenta ili od vas kao korisnika. Ako želite inspiraciju, pogledajte mapu `solution/frontend/styles.css`.
### Promjena osnovnog URL-a
Postoji jedna stvar koju ovdje nismo postavili, a to je `BASE_URL`. To nije poznato dok vaš backend ne bude pokrenut. Za postavljanje:
Postoji jedna stvar koju ovdje nismo postavili, a to je `BASE_URL`. Ovo nije poznato dok vaš backend ne bude pokrenut. Da biste ga postavili:
- Ako pokrećete API lokalno, treba ga postaviti na nešto poput `http://localhost:5000`.
- Ako ga pokrećete u Codespaces, trebao bi izgledati nešto poput "[name]app.github.dev".
- Ako pokrećete API lokalno, trebao bi biti postavljen na nešto poput `http://localhost:5000`.
- Ako ga pokrećete u Codespaces, trebao bi izgledati otprilike ovako: "[name]app.github.dev".
## Zadatak
Kreirajte vlastitu mapu *project* sa sadržajem poput ovoga:
Kreirajte vlastitu mapu *project* sa sadržajem poput ovog:
```text
project/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Kopirajte sadržaj iz gore navedenih uputa, ali slobodno ga prilagodite prema vlastitim željama.
Kopirajte sadržaj iz gore navedenih uputa, ali slobodno prilagodite prema vlastitim željama.
## Rješenje
@ -358,22 +369,28 @@ Kopirajte sadržaj iz gore navedenih uputa, ali slobodno ga prilagodite prema vl
## Bonus
Pokušajte promijeniti osobnost AI asistenta. Kada pozivate `call_llm` u *api.py*, možete promijeniti drugi argument u ono što želite, na primjer:
Pokušajte promijeniti osobnost AI asistenta.
### Za Python
Kada pozivate `call_llm` u *api.py*, možete promijeniti drugi argument u ono što želite, na primjer:
```python
call_llm(message, "You are Captain Picard")
```
Promijenite također CSS i tekst prema vlastitim željama, napravite promjene u *index.html* i *styles.css*.
### Frontend
Promijenite također CSS i tekst prema vlastitim željama, tako da napravite izmjene u *index.html* i *styles.css*.
## Sažetak
Odlično, naučili ste od početka kako kreirati osobnog asistenta koristeći AI. To smo učinili koristeći GitHub Models, backend u Pythonu i frontend u HTML-u, CSS-u i JavaScriptu.
Odlično, naučili ste od nule kako kreirati osobnog asistenta koristeći AI. To smo učinili koristeći GitHub modele, backend u Pythonu i frontend u HTML-u, CSS-u i JavaScriptu.
## Postavljanje s Codespaces
- Navigirajte na: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Kreirajte iz predloška (pobrinite se da ste prijavljeni na GitHub) u gornjem desnom kutu:
- Kreirajte iz predloška (provjerite jeste li prijavljeni na GitHub) u gornjem desnom kutu:
![Kreiraj iz predloška](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hr.png)
@ -386,4 +403,4 @@ Odlično, naučili ste od početka kako kreirati osobnog asistenta koristeći AI
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizle iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T13:05:18+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:39:48+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "hr"
}
-->
# Pokreni kod
# Pokreni rješenje
## Postavljanje
Kreiraj virtualno okruženje
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Instaliraj ovisnosti
```sh
pip install openai flask flask-cors
```
## Pokreni API
```sh
python api.py
```
## Pokreni frontend
Provjeri da se nalaziš u mapi frontend
Pronađi *app.js*, promijeni `BASE_URL` na URL svog backend-a
Pokreni ga
```
npx http-server -p 8000
```
Pokušaj upisati poruku u chat, trebao bi vidjeti odgovor (pod uvjetom da ovo pokrećeš u Codespaceu ili da si postavio pristupni token).
## Postavljanje pristupnog tokena (ako ovo ne pokrećeš u Codespaceu)
Pogledaj [Postavljanje PAT-a](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Pokreni [backend](./backend/README.md)
1. Zatim pokreni [frontend](./frontend/README.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati mjerodavnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane stručnjaka. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije proizle iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:55+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "hr"
}
-->
Odaberi svoje okruženje za izvršavanje
- [Python](./python/README.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:50:00+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "hr"
}
-->
# Pokreni kod
## Postavljanje
Kreiraj virtualno okruženje
```sh
python -m venv venv
source ./venv/bin/activate
```
## Instaliraj ovisnosti
```sh
pip install openai flask flask-cors
```
## Pokreni API
```sh
python api.py
```
## Pokreni frontend
Provjeri da se nalaziš u mapi frontend
Pronađi *app.js*, promijeni `BASE_URL` na URL svog backend-a
Pokreni ga
```
npx http-server -p 8000
```
Pokušaj upisati poruku u chat, trebala bi se pojaviti odgovarajuća reakcija (pod uvjetom da ovo pokrećeš u Codespace-u ili si postavio pristupni token).
## Postavi pristupni token (ako ovo ne pokrećeš u Codespace-u)
Pogledaj [Postavljanje PAT-a](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva pogrešna tumačenja ili nesporazume koji mogu proizaći iz korištenja ovog prijevoda.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:53:50+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "hr"
}
-->
# Pokreni kod
```sh
npx http-server -p 3000
```
Pronađite `BASE_URL` u `app.js` i promijenite ga tako da odgovara URL-u backend-a.
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T13:00:57+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:36:32+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "hu"
}
@ -17,14 +17,14 @@ Ez a chat projekt bemutatja, hogyan lehet egy Chat Asszisztenst létrehozni GitH
<img src="./assets/screenshot.png" alt="Chat alkalmazás" width="600">
</div>
Egy kis háttérinformáció: generatív AI 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 AI-t egy webalkalmazásba. Kezdjük is el!
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!
## Kapcsolódás a generatív AI-hoz
## Kapcsolódás a generatív MI-hez
A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi, hogy ingyenesen használj AI-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, 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):
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
<img src="./assets/playground.png" alt="GitHub Models MI Playground" with="600">
</div>
Ahogy említettük, válaszd ki a "Code" fület és a preferált futtatási környezetet.
@ -33,7 +33,9 @@ Ahogy említettük, válaszd ki a "Code" fület és a preferált futtatási kör
<img src="./assets/playground-choice.png" alt="playground választás" with="600">
</div>
Ebben az esetben a Python-t választjuk, ami azt jelenti, hogy ezt a kódot használjuk:
### Python használata
Ebben az esetben a Python-t választjuk, ami azt jelenti, hogy ezt a kódot választjuk:
```python
"""Run this model in Python
@ -96,9 +98,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.
### AI Asszisztens testreszabása
### MI Asszisztens testreszabása
Ha testre szeretnéd szabni az AI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így:
Ha testre szeretnéd szabni az MI 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")
@ -106,7 +108,9 @@ 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 AI 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:
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:
### Python használata
```python
# api.py
@ -174,11 +178,15 @@ Az *llm.py* integrálásához a következőket kell tennünk:
})
```
Szuper, most már mindent elvégeztünk, amire szükség volt.
Szuper, most már készen vagyunk.
## Cors konfigurálása
### 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í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 küldhessen a backendnek. Az *api.py*-ban van egy kódrészlet, amely ezt beállítja:
### Python használata
Az *api.py*-ban van egy kódrészlet, amely ezt beállítja:
```python
from flask_cors import CORS
@ -189,9 +197,13 @@ 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.
## A projekt futtatása
## Projekt futtatása
A projekt futtatásához először a backendet, majd a frontendet kell elindítanod.
Rendben, tehát megvan az *llm.py* és az *api.py*. Hogyan működtethetjük ezt a backenden? Két dolgot kell tennünk:
### 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:
- Függőségek telepítése:
@ -203,7 +215,7 @@ Rendben, tehát megvan az *llm.py* és az *api.py*. Hogyan működtethetjük ezt
pip install openai flask flask-cors openai
```
- Az API indítása:
- API indítása:
```sh
python api.py
@ -213,7 +225,7 @@ Rendben, tehát megvan az *llm.py* és az *api.py*. Hogyan működtethetjük ezt
### Frontend fejlesztése
Most, hogy az API működik, hozzunk létre egy frontendet hozzá. Egy minimális frontenddel kezdünk, amit lépésről lépésre fejlesztünk tovább. A *frontend* mappában hozz létre a következőket:
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:
```text
backend/
@ -241,7 +253,7 @@ Kezdjük az **index.html**-lel:
</html>
```
A fenti a minimális szükséges kód egy chat ablak támogatásához. Tartalmaz egy textarea-t, ahol az üzenetek megjelennek, egy input mezőt az üzenetek beírásához, és egy gombot az üzenetek backendre küldéséhez. Nézzük meg a JavaScript kódot az *app.js*-ben.
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.
**app.js**
@ -330,14 +342,14 @@ Ezzel a három osztállyal különbözőképpen formázhatod az üzeneteket att
### Alap URL módosítása
Van itt egy dolog, amit még nem állítottunk be, ez pedig a `BASE_URL`. Ez addig nem ismert, amíg a backend el nem indul. Az alap URL beállí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:
- Ha az API-t helyileg futtatod, valami ilyesminek kell lennie: `http://localhost:5000`.
- Ha Codespaces-ben futtatod, valami ilyesminek kell kinéznie: "[name]app.github.dev".
- Ha Codespaces-ben futtatod, valami ilyesmi lesz: "[név]app.github.dev".
## Feladat
Hozz létre egy saját *project* mappát a következő tartalommal:
Hozz létre egy saját *project* mappát az alábbi tartalommal:
```text
project/
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Másold be a fentiekben ismertetett tartalmat, de nyugodtan testreszabhatod az ízlésed szerint.
Másold be a fentiekben ismertetett tartalmat, de szabadon testreszabhatod az ízlésed szerint.
## Megoldás
@ -358,22 +369,28 @@ Másold be a fentiekben ismertetett tartalmat, de nyugodtan testreszabhatod az
## Bónusz
Próbáld megváltoztatni az AI asszisztens személyiségét. Amikor az *api.py*-ban meghívod a `call_llm` függvényt, megváltoztathatod a második argumentumot arra, amit szeretnél, például:
Próbáld megváltoztatni az MI 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:
```python
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.
## Összefoglalás
Szuper, most már tudod, hogyan hozz létre egy személyes asszisztenst AI segítségével a semmiből. Ezt GitHub Modellek, egy Python backend, valamint HTML, CSS és JavaScript frontend használatával valósítottuk meg.
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.
## 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-ba) a jobb felső sarokban:
- 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)
@ -385,5 +402,5 @@ Szuper, most már tudod, hogyan hozz létre egy személyes asszisztenst AI segí
---
**Felelősségkizárás**:
Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. 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. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
**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.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T13:04:32+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:37:03+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "hu"
}
-->
# Kód futtatása
# Megoldás futtatása
## Beállítás
Hozz létre egy virtuális környezetet
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Függőségek telepítése
```sh
pip install openai flask flask-cors
```
## API futtatása
```sh
python api.py
```
## Frontend futtatása
Győződj meg róla, hogy a frontend mappában állsz
Keresd meg az *app.js* fájlt, és változtasd meg a `BASE_URL` értékét a backend URL-edre
Indítsd el
```
npx http-server -p 8000
```
Próbálj meg beírni egy üzenetet a csevegésbe, és látnod kell egy választ (feltéve, hogy Codespace-ben futtatod, vagy beállítottál egy hozzáférési tokent).
## Hozzáférési token beállítása (ha nem Codespace-ben futtatod)
Lásd: [Személyes hozzáférési token beállítása](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Indítsd el a [backendet](./backend/README.md)
1. Most indítsd el a [frontendet](./frontend/README.md)
---
**Felelősségkizárás**:
Ezt a dokumentumot az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével fordítottuk le. 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. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.
**Felelősség kizárása**:
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. Kritikus 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.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:28+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "hu"
}
-->
Válassza ki a futtatási környezetet
- [Python](./python/README.md)
---
**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. Kritikus 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.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:49:19+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "hu"
}
-->
# Kód futtatása
## Beállítás
Hozz létre egy virtuális környezetet
```sh
python -m venv venv
source ./venv/bin/activate
```
## Függőségek telepítése
```sh
pip install openai flask flask-cors
```
## API futtatása
```sh
python api.py
```
## Frontend futtatása
Győződj meg róla, hogy a frontend mappában állsz
Keresd meg az *app.js*-t, változtasd meg a `BASE_URL` értékét a backend URL-edre
Futtasd
```
npx http-server -p 8000
```
Próbálj meg beírni egy üzenetet a chatbe, válaszokat kellene látnod (feltéve, hogy Codespace-ben futtatod, vagy beállítottál egy hozzáférési tokent).
## Hozzáférési token beállítása (ha nem Codespace-ben futtatod)
Lásd: [Hozzáférési token beállítása](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Felelősség kizárása**:
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.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:53:20+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "hu"
}
-->
# Futtasd a kódot
```sh
npx http-server -p 3000
```
Keresse meg a `BASE_URL` értékét az `app.js` fájlban, és módosítsa úgy, hogy megegyezzen a backend URL-jével.
---
**Felelősség kizárása**:
Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás 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. Kritikus 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.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T09:47:44+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:34:35+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "id"
}
@ -21,7 +21,7 @@ Sebagai konteks, membangun asisten chat menggunakan AI generatif adalah cara yan
## Menghubungkan ke AI Generatif
Untuk backend, kita menggunakan GitHub Models. Ini adalah layanan hebat yang memungkinkan Anda menggunakan AI secara gratis. Kunjungi playground-nya dan ambil kode yang sesuai dengan bahasa backend pilihan Anda. Berikut adalah tampilan [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
Untuk backend, kita menggunakan GitHub Models. Ini adalah layanan hebat yang memungkinkan Anda menggunakan AI secara gratis. Kunjungi playground-nya dan ambil kode yang sesuai dengan bahasa backend pilihan Anda. Berikut adalah tampilannya di [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -33,6 +33,8 @@ Seperti yang disebutkan, pilih tab "Code" dan runtime pilihan Anda.
<img src="./assets/playground-choice.png" alt="pilihan playground" with="600">
</div>
### Menggunakan Python
Dalam kasus ini, kita memilih Python, yang berarti kita akan menggunakan kode berikut:
```python
@ -98,7 +100,7 @@ Dengan fungsi `call_llm` ini, kita dapat mengambil prompt dan sistem prompt, lal
### Kustomisasi Asisten AI
Jika Anda ingin menyesuaikan asisten AI, Anda dapat menentukan bagaimana ia harus berperilaku dengan mengisi sistem prompt seperti ini:
Jika Anda ingin menyesuaikan asisten AI, Anda dapat menentukan bagaimana perilakunya dengan mengisi sistem prompt seperti ini:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Mengeksposnya melalui Web API
Bagus, kita telah menyelesaikan bagian AI, sekarang mari kita lihat bagaimana kita dapat mengintegrasikannya ke dalam Web API. Untuk Web API, kita memilih menggunakan Flask, tetapi framework web lainnya juga bisa digunakan. Berikut adalah kodenya:
Bagus, bagian AI sudah selesai. Sekarang mari kita lihat bagaimana kita dapat mengintegrasikannya ke dalam Web API. Untuk Web API, kita memilih menggunakan Flask, tetapi framework web apa pun seharusnya bisa digunakan. Berikut adalah kodenya:
### Menggunakan Python
```python
# api.py
@ -137,7 +141,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Di sini, kita membuat API Flask dan mendefinisikan rute default "/" dan "/chat". Rute "/chat" dimaksudkan untuk digunakan oleh frontend kita untuk mengirimkan pertanyaan.
Di sini, kita membuat API Flask dan mendefinisikan rute default "/" dan "/chat". Rute yang terakhir dimaksudkan untuk digunakan oleh frontend kita untuk mengirimkan pertanyaan.
Untuk mengintegrasikan *llm.py*, berikut yang perlu kita lakukan:
@ -174,11 +178,15 @@ Untuk mengintegrasikan *llm.py*, berikut yang perlu kita lakukan:
})
```
Bagus, sekarang kita telah menyelesaikan apa yang diperlukan.
Bagus, sekarang kita sudah menyelesaikan apa yang diperlukan.
## Konfigurasi Cors
### Konfigurasi Cors
Kita perlu menyebutkan bahwa kita mengatur sesuatu seperti CORS, cross-origin resource sharing. Ini berarti karena backend dan frontend kita akan berjalan di port yang berbeda, kita perlu mengizinkan frontend untuk memanggil backend.
Kita perlu menyebutkan bahwa kita mengatur sesuatu seperti CORS (Cross-Origin Resource Sharing). Ini berarti bahwa karena backend dan frontend kita akan berjalan di port yang berbeda, kita perlu mengizinkan frontend untuk memanggil backend. Ada potongan kode di *api.py* yang mengatur ini:
### Menggunakan Python
Ada potongan kode di *api.py* yang mengatur ini:
```python
from flask_cors import CORS
@ -187,11 +195,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Saat ini, pengaturan ini mengizinkan "*" yang berarti semua origin, dan ini agak tidak aman. Kita harus membatasinya saat masuk ke produksi.
Saat ini, pengaturannya memungkinkan "*" yang berarti semua origin, dan ini agak tidak aman. Kita harus membatasinya saat masuk ke produksi.
## Menjalankan Proyek Anda
Oke, jadi kita memiliki *llm.py* dan *api.py*, bagaimana kita bisa membuat ini bekerja dengan backend? Ada dua hal yang perlu kita lakukan:
Untuk menjalankan proyek Anda, Anda perlu memulai backend terlebih dahulu, lalu frontend Anda.
### Menggunakan Python
Baik, jadi kita memiliki *llm.py* dan *api.py*. Bagaimana kita membuat ini bekerja dengan backend? Ada dua hal yang perlu kita lakukan:
- Instal dependensi:
@ -209,11 +221,11 @@ Oke, jadi kita memiliki *llm.py* dan *api.py*, bagaimana kita bisa membuat ini b
python api.py
```
Jika Anda menggunakan Codespaces, Anda perlu pergi ke bagian Ports di bagian bawah editor, klik kanan di atasnya, lalu klik "Port Visibility" dan pilih "Public".
Jika Anda menggunakan Codespaces, Anda perlu pergi ke Ports di bagian bawah editor, klik kanan di atasnya, lalu klik "Port Visibility" dan pilih "Public".
### Mengerjakan Frontend
Sekarang kita memiliki API yang berjalan, mari kita buat frontend untuk ini. Frontend minimal yang akan kita tingkatkan secara bertahap. Di folder *frontend*, buat file berikut:
Sekarang kita memiliki API yang berjalan, mari kita buat frontend untuk ini. Frontend minimum yang akan kita tingkatkan secara bertahap. Di folder *frontend*, buat file berikut:
```text
backend/
@ -241,7 +253,7 @@ Mari kita mulai dengan **index.html**:
</html>
```
Di atas adalah kebutuhan minimum untuk mendukung jendela chat, yang terdiri dari textarea tempat pesan akan ditampilkan, input untuk mengetik pesan, dan tombol untuk mengirim pesan ke backend. Selanjutnya, mari kita lihat JavaScript di *app.js*.
Di atas adalah minimum absolut yang Anda butuhkan untuk mendukung jendela chat, karena terdiri dari textarea tempat pesan akan dirender, input untuk mengetik pesan, dan tombol untuk mengirim pesan Anda ke backend. Selanjutnya, mari kita lihat JavaScript di *app.js*
**app.js**
@ -300,12 +312,12 @@ Di atas adalah kebutuhan minimum untuk mendukung jendela chat, yang terdiri dari
Mari kita bahas kode ini per bagian:
- 1) Di sini kita mendapatkan referensi ke semua elemen yang akan kita gunakan nanti di kode.
- 1) Di sini kita mendapatkan referensi ke semua elemen yang akan kita gunakan nanti dalam kode.
- 2) Pada bagian ini, kita membuat fungsi yang menggunakan metode bawaan `fetch` untuk memanggil backend kita.
- 3) `appendMessage` membantu menambahkan respons serta apa yang Anda ketik sebagai pengguna.
- 4) Di sini kita mendengarkan event submit, membaca input field, menempatkan pesan pengguna di textarea, memanggil API, dan menampilkan respons di textarea.
- 4) Di sini kita mendengarkan event submit, membaca input field, menempatkan pesan pengguna di textarea, memanggil API, dan merender respons di textarea.
Selanjutnya, mari kita lihat styling. Di sini Anda bisa berkreasi sesuka hati, tetapi berikut adalah beberapa saran:
Selanjutnya, mari kita lihat styling. Di sinilah Anda bisa berkreasi dan membuatnya terlihat seperti yang Anda inginkan, tetapi berikut adalah beberapa saran:
**styles.css**
@ -326,14 +338,14 @@ Selanjutnya, mari kita lihat styling. Di sini Anda bisa berkreasi sesuka hati, t
}
```
Dengan tiga kelas ini, Anda dapat menata pesan secara berbeda tergantung dari mana asalnya, apakah dari asisten atau dari Anda sebagai pengguna. Jika Anda ingin mendapatkan inspirasi, lihat folder `solution/frontend/styles.css`.
Dengan tiga kelas ini, Anda akan menata pesan secara berbeda tergantung dari mana asalnya, apakah dari asisten atau Anda sebagai pengguna. Jika Anda ingin terinspirasi, lihat folder `solution/frontend/styles.css`.
### Mengubah Base URL
### Ubah Base Url
Ada satu hal yang belum kita atur, yaitu `BASE_URL`. Ini tidak diketahui sampai backend Anda berjalan. Untuk mengaturnya:
Ada satu hal yang belum kita atur, yaitu `BASE_URL`. Ini tidak diketahui sampai backend Anda dijalankan. Untuk mengaturnya:
- Jika Anda menjalankan API secara lokal, atur ke sesuatu seperti `http://localhost:5000`.
- Jika dijalankan di Codespaces, URL-nya akan terlihat seperti "[name]app.github.dev".
- Jika Anda menjalankan API secara lokal, itu harus diatur ke sesuatu seperti `http://localhost:5000`.
- Jika dijalankan di Codespaces, itu akan terlihat seperti "[name]app.github.dev".
## Tugas
@ -346,8 +358,7 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Salin konten dari instruksi di atas, tetapi jangan ragu untuk menyesuaikannya sesuai keinginan Anda.
@ -358,12 +369,18 @@ Salin konten dari instruksi di atas, tetapi jangan ragu untuk menyesuaikannya se
## Bonus
Cobalah mengubah kepribadian asisten AI. Saat Anda memanggil `call_llm` di *api.py*, Anda dapat mengubah argumen kedua sesuai keinginan Anda, misalnya:
Cobalah mengubah kepribadian asisten AI.
### Untuk Python
Saat Anda memanggil `call_llm` di *api.py*, Anda dapat mengubah argumen kedua sesuai keinginan Anda, misalnya:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
Ubah juga CSS dan teks sesuai keinginan Anda, jadi lakukan perubahan di *index.html* dan *styles.css*.
## Ringkasan
@ -372,7 +389,7 @@ Bagus, Anda telah belajar dari awal cara membuat asisten pribadi menggunakan AI.
## Pengaturan dengan Codespaces
- Arahkan ke: [Repo Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Navigasikan ke: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Buat dari template (pastikan Anda sudah login ke GitHub) di pojok kanan atas:
![Buat dari template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.id.png)

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T09:49:16+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:34:56+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "id"
}
-->
# Jalankan kode
# Jalankan solusi
## Persiapan
Buat lingkungan virtual
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Instal dependensi
```sh
pip install openai flask flask-cors
```
## Jalankan API
```sh
python api.py
```
## Jalankan frontend
Pastikan Anda berada di folder frontend
Temukan *app.js*, ubah `BASE_URL` ke URL backend Anda
Jalankan
```
npx http-server -p 8000
```
Coba ketikkan pesan di chat, Anda seharusnya melihat respons (dengan catatan Anda menjalankan ini di Codespace atau telah mengatur token akses).
## Atur token akses (jika Anda tidak menjalankan ini di Codespace)
Lihat [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Mulai [backend](./backend/README.md)
1. Sekarang mulai [frontend](./frontend/README.md)
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:44:11+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "id"
}
-->
Pilih runtime Anda
- [Python](./python/README.md)
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:48:54+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "id"
}
-->
# Jalankan kode
## Persiapan
Buat lingkungan virtual
```sh
python -m venv venv
source ./venv/bin/activate
```
## Instal dependensi
```sh
pip install openai flask flask-cors
```
## Jalankan API
```sh
python api.py
```
## Jalankan frontend
Pastikan Anda berada di folder frontend
Temukan *app.js*, ubah `BASE_URL` ke URL backend Anda
Jalankan
```
npx http-server -p 8000
```
Cobalah mengetik pesan di chat, Anda seharusnya melihat respons (dengan catatan Anda menjalankan ini di Codespace atau telah mengatur token akses).
## Atur token akses (jika Anda tidak menjalankan ini di Codespace)
Lihat [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:53:03+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "id"
}
-->
# Jalankan kode
```sh
npx http-server -p 3000
```
Temukan `BASE_URL` di `app.js` dan ubah agar sesuai dengan URL backend.
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cf15ff7770c5a484349383bb27d1131f",
"translation_date": "2025-08-29T01:25:57+00:00",
"original_hash": "002304ffe0059e55b33e2ee5283788ad",
"translation_date": "2025-09-01T15:28:54+00:00",
"source_file": "9-chat-project/README.md",
"language_code": "it"
}
@ -19,9 +19,9 @@ Ecco come appare il progetto finito:
Un po' di contesto: costruire assistenti chat utilizzando l'AI generativa è un ottimo modo per iniziare a imparare sull'AI. In questa lezione imparerai a integrare l'AI generativa in un'app web. Iniziamo!
## Connessione all'AI generativa
## Collegarsi all'AI generativa
Per il backend, utilizziamo i Modelli di GitHub. È un ottimo servizio che ti permette di usare l'AI gratuitamente. Vai al playground e prendi il codice corrispondente al linguaggio backend che hai scelto. Ecco come appare il [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
Per il backend, utilizziamo i Modelli di GitHub. È un ottimo servizio che ti permette di utilizzare l'AI gratuitamente. Vai al suo playground e prendi il codice corrispondente al linguaggio backend che hai scelto. Ecco come appare il [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<img src="./assets/playground.png" alt="GitHub Models AI Playground" with="600">
@ -30,9 +30,11 @@ Per il backend, utilizziamo i Modelli di GitHub. È un ottimo servizio che ti pe
Come detto, seleziona la scheda "Code" e il runtime che preferisci.
<div>
<img src="./assets/playground-choice.png" alt="Scelta del playground" with="600">
<img src="./assets/playground-choice.png" alt="scelta del playground" with="600">
</div>
### Utilizzo di Python
In questo caso selezioniamo Python, il che significa che scegliamo questo codice:
```python
@ -96,7 +98,7 @@ def call_llm(prompt: str, system_message: str):
Con questa funzione `call_llm` possiamo ora prendere un prompt e un system prompt, e la funzione restituirà il risultato.
### Personalizza l'Assistente AI
### Personalizzare l'Assistente AI
Se vuoi personalizzare l'assistente AI, puoi specificare come vuoi che si comporti popolando il system prompt in questo modo:
@ -106,7 +108,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Esponilo tramite una Web API
Perfetto, abbiamo completato la parte AI. Vediamo ora come possiamo integrarla in una Web API. Per la Web API, scegliamo di usare Flask, ma qualsiasi framework web andrà bene. Ecco il codice:
Ottimo, abbiamo completato la parte AI. Vediamo ora come possiamo integrarla in una Web API. Per la Web API, scegliamo di utilizzare Flask, ma qualsiasi framework web andrà bene. Ecco il codice:
### Utilizzo di Python
```python
# api.py
@ -174,11 +178,15 @@ Per integrare *llm.py*, ecco cosa dobbiamo fare:
})
```
Perfetto, ora abbiamo fatto ciò che serve.
Ottimo, ora abbiamo fatto ciò che era necessario.
## Configurare Cors
### Configura Cors
Dobbiamo sottolineare che abbiamo configurato qualcosa come CORS, ovvero il cross-origin resource sharing. Questo significa che, poiché il nostro backend e frontend gireranno su porte diverse, dobbiamo consentire al frontend di chiamare il backend.
Dobbiamo sottolineare che abbiamo configurato qualcosa come CORS, ovvero il cross-origin resource sharing. Questo significa che, poiché il nostro backend e frontend gireranno su porte diverse, dobbiamo permettere al frontend di chiamare il backend. C'è un pezzo di codice in *api.py* che lo configura:
### Utilizzo di Python
C'è un pezzo di codice in *api.py* che lo configura:
```python
from flask_cors import CORS
@ -187,10 +195,14 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Al momento è configurato per consentire "*" (tutte le origini), il che è un po' insicuro. Dovremmo restringerlo quando andiamo in produzione.
Al momento è configurato per consentire "*" (tutte le origini), il che è un po' insicuro. Dovremmo restringerlo una volta che andiamo in produzione.
## Esegui il tuo progetto
Per eseguire il tuo progetto, devi prima avviare il backend e poi il frontend.
### Utilizzo di Python
Ok, abbiamo *llm.py* e *api.py*. Come possiamo far funzionare tutto con un backend? Ci sono due cose da fare:
- Installare le dipendenze:
@ -209,11 +221,11 @@ Ok, abbiamo *llm.py* e *api.py*. Come possiamo far funzionare tutto con un backe
python api.py
```
Se stai usando Codespaces, devi andare su Ports nella parte inferiore dell'editor, fare clic destro su di esso, selezionare "Port Visibility" e scegliere "Public".
Se stai utilizzando Codespaces, devi andare su Ports nella parte inferiore dell'editor, fare clic destro su di esso, selezionare "Port Visibility" e scegliere "Public".
### Lavora su un frontend
### Lavorare su un frontend
Ora che abbiamo un'API funzionante, creiamo un frontend per questa. Un frontend minimo che miglioreremo passo dopo passo. Nella cartella *frontend*, crea quanto segue:
Ora che abbiamo un'API funzionante, creiamo un frontend per essa. Un frontend minimo che miglioreremo passo dopo passo. Nella cartella *frontend*, crea quanto segue:
```text
backend/
@ -241,7 +253,7 @@ Iniziamo con **index.html**:
</html>
```
Quanto sopra è il minimo indispensabile per supportare una finestra di chat, composta da una textarea dove verranno visualizzati i messaggi, un input per scrivere il messaggio e un pulsante per inviarlo al backend. Passiamo ora al JavaScript in *app.js*.
Quanto sopra è il minimo indispensabile per supportare una finestra di chat, poiché consiste in una textarea dove verranno visualizzati i messaggi, un input per digitare il messaggio e un pulsante per inviare il messaggio al backend. Passiamo ora al JavaScript in *app.js*.
**app.js**
@ -301,11 +313,11 @@ Quanto sopra è il minimo indispensabile per supportare una finestra di chat, co
Analizziamo il codice per sezioni:
- 1) Qui otteniamo un riferimento a tutti gli elementi che utilizzeremo nel codice.
- 2) In questa sezione, creiamo una funzione che utilizza il metodo integrato `fetch` per chiamare il nostro backend.
- 3) `appendMessage` aiuta ad aggiungere le risposte e ciò che l'utente digita.
- 2) In questa sezione, creiamo una funzione che utilizza il metodo `fetch` integrato per chiamare il nostro backend.
- 3) `appendMessage` aiuta ad aggiungere le risposte e ciò che digiti come utente.
- 4) Qui ascoltiamo l'evento di submit, leggiamo il campo di input, posizioniamo il messaggio dell'utente nella textarea, chiamiamo l'API e visualizziamo la risposta nella textarea.
Passiamo ora allo stile. Qui puoi sbizzarrirti per farlo apparire come preferisci, ma ecco alcuni suggerimenti:
Passiamo ora allo stile. Qui puoi sbizzarrirti e personalizzarlo come preferisci, ma ecco alcuni suggerimenti:
**styles.css**
@ -328,12 +340,12 @@ Passiamo ora allo stile. Qui puoi sbizzarrirti per farlo apparire come preferisc
Con queste tre classi, puoi stilizzare i messaggi in modo diverso a seconda che provengano dall'assistente o dall'utente. Se vuoi ispirarti, dai un'occhiata alla cartella `solution/frontend/styles.css`.
### Cambia Base Url
### Cambiare la Base Url
C'è una cosa che non abbiamo impostato: `BASE_URL`. Questo non è noto finché il backend non è avviato. Per impostarlo:
C'è una cosa che non abbiamo impostato: `BASE_URL`. Questo valore non è noto finché il backend non è avviato. Per impostarlo:
- Se esegui l'API localmente, dovrebbe essere qualcosa come `http://localhost:5000`.
- Se esegui in Codespaces, dovrebbe essere qualcosa come "[name]app.github.dev".
- Se esegui in un Codespaces, dovrebbe essere qualcosa come "[name]app.github.dev".
## Compito
@ -346,11 +358,10 @@ project/
app.js
styles.css
backend/
api.py
llm.py
...
```
Copia il contenuto delle istruzioni sopra, ma sentiti libero di personalizzarlo come preferisci.
Copia il contenuto delle istruzioni sopra, ma sentiti libero di personalizzarlo a tuo piacimento.
## Soluzione
@ -358,13 +369,19 @@ Copia il contenuto delle istruzioni sopra, ma sentiti libero di personalizzarlo
## Bonus
Prova a cambiare la personalità dell'assistente AI. Quando chiami `call_llm` in *api.py*, puoi cambiare il secondo argomento come preferisci, ad esempio:
Prova a cambiare la personalità dell'assistente AI.
### Per Python
Quando chiami `call_llm` in *api.py*, puoi cambiare il secondo argomento come preferisci, ad esempio:
```python
call_llm(message, "You are Captain Picard")
```
Cambia anche il CSS e il testo come preferisci, quindi apporta modifiche a *index.html* e *styles.css*.
### Frontend
Cambia anche il CSS e il testo a tuo piacimento, quindi modifica *index.html* e *styles.css*.
## Riepilogo
@ -381,9 +398,9 @@ Ottimo, hai imparato da zero come creare un assistente personale utilizzando l'A
![Crea codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.it.png)
Questo avvierà un ambiente con cui puoi ora lavorare.
Questo avvierà un ambiente con cui puoi lavorare.
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un esperto umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

@ -1,55 +1,18 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a7b7f54b13f9e6683a844d173ffdd766",
"translation_date": "2025-08-29T01:28:25+00:00",
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
"translation_date": "2025-09-01T15:29:20+00:00",
"source_file": "9-chat-project/solution/README.md",
"language_code": "it"
}
-->
# Esegui il codice
# Esegui la soluzione
## Configurazione
Crea un ambiente virtuale
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
```
## Installa le dipendenze
```sh
pip install openai flask flask-cors
```
## Avvia l'API
```sh
python api.py
```
## Avvia il frontend
Assicurati di trovarti nella cartella del frontend
Trova *app.js*, cambia `BASE_URL` con l'URL del tuo backend
Eseguilo
```
npx http-server -p 8000
```
Prova a digitare un messaggio nella chat, dovresti vedere una risposta (a condizione che tu stia eseguendo questo in un Codespace o abbia configurato un token di accesso).
## Configura il token di accesso (se non stai eseguendo questo in un Codespace)
Consulta [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
1. Avvia il [backend](./backend/README.md)
1. Ora avvia il [frontend](./frontend/README.md)
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatizzate possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un esperto umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

@ -0,0 +1,17 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
"translation_date": "2025-09-01T15:43:19+00:00",
"source_file": "9-chat-project/solution/backend/README.md",
"language_code": "it"
}
-->
Scegli il tuo runtime
- [Python](./python/README.md)
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un esperto umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

@ -0,0 +1,54 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:47:37+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "it"
}
-->
# Esegui il codice
## Configurazione
Crea un ambiente virtuale
```sh
python -m venv venv
source ./venv/bin/activate
```
## Installa le dipendenze
```sh
pip install openai flask flask-cors
```
## Esegui l'API
```sh
python api.py
```
## Esegui il frontend
Assicurati di trovarti nella cartella del frontend
Trova *app.js*, modifica `BASE_URL` con l'URL del tuo backend
Eseguilo
```
npx http-server -p 8000
```
Prova a digitare un messaggio nella chat, dovresti vedere una risposta (a condizione che tu stia eseguendo questo in un Codespace o abbia configurato un token di accesso).
## Configura il token di accesso (se non stai eseguendo questo in un Codespace)
Consulta [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.

@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
"translation_date": "2025-09-01T15:52:08+00:00",
"source_file": "9-chat-project/solution/frontend/README.md",
"language_code": "it"
}
-->
# Esegui il codice
```sh
npx http-server -p 3000
```
Individua `BASE_URL` in `app.js` e modificalo per corrispondere all'URL del backend.
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save