بعض السياق، بناء مساعدي الدردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هنا هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، فلنبدأ.
بعض السياق، بناء مساعدي دردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، لنبدأ.
## الاتصال بالذكاء الاصطناعي التوليدي
بالنسبة للواجهة الخلفية، نستخدم نماذج 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>
<imgsrc="./assets/playground.png"alt="بيئة تجربة نماذج GitHub AI"with="600">
</div>
كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي تفضلها.
كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي اخترتها.
مع هذه الدالة `call_llm` يمكننا الآن إدخال موجه ونظام موجه، وستعيد الدالة النتيجة.
مع هذه الوظيفة `call_llm` يمكننا الآن أخذ نص الإدخال ونص النظام، وستعيد الوظيفة النتيجة.
### تخصيص مساعد الذكاء الاصطناعي
إذا كنت ترغب في تخصيص مساعد الذكاء الاصطناعي، يمكنك تحديد كيفية تصرفه عن طريق ملء نظام الموجه كما يلي:
إذا كنت ترغب في تخصيص مساعد الذكاء الاصطناعي، يمكنك تحديد كيفية تصرفه عن طريق ملء نص النظام كما يلي:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## عرضه عبر واجهة برمجة تطبيقات ويب
رائع، لقد انتهينا من جزء الذكاء الاصطناعي، لنرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنلقِ نظرة على الكود:
رائع، لقد انتهينا من جزء الذكاء الاصطناعي، دعونا نرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنرى الكود الخاص بذلك:
### استخدام Python
### استخدام بايثون
```python
# api.py
@ -141,11 +135,11 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
هنا، نقوم بإنشاء واجهة برمجة تطبيقات باستخدام Flask ونحدد المسار الافتراضي "/" و "/chat". المسار الأخير مخصص لاستخدام الواجهة الأمامية لتمرير الأسئلة إليه.
هنا، نقوم بإنشاء واجهة برمجة تطبيقات Flask ونحدد مسارًا افتراضيًا "/" و "/chat". المسار الأخير مخصص لاستخدامه من قبل الواجهة الأمامية لتمرير الأسئلة إليه.
لدمج *llm.py* إليك ما نحتاج إلى فعله:
لدمج *llm.py* إليك ما نحتاج إلى القيام به:
- استيراد دالة `call_llm`:
- استيراد وظيفة `call_llm`:
```python
from llm import call_llm
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
رائع، الآن انتهينا مما نحتاج إليه.
رائع، الآن قمنا بما نحتاج إليه.
## إعداد Cors
يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، وهو مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الواجهة الخلفية والواجهة الأمامية ستعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالواجهة الخلفية.
يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الجزء الخلفي والواجهة الأمامية سيعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالجزء الخلفي.
### استخدام Python
### استخدام بايثون
هناك جزء من الكود في *api.py* يقوم بإعداد هذا:
هناك قطعة من الكود في *api.py* تقوم بإعداد هذا:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
حاليًا تم إعداده للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب تقييده بمجرد الانتقال إلى الإنتاج.
حاليًا تم إعدادها للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب أن نقوم بتقييده بمجرد الانتقال إلى الإنتاج.
## تشغيل مشروعك
## تشغيل المشروع
لتشغيل مشروعك، تحتاج إلى تشغيل الواجهة الخلفية أولاً ثم الواجهة الأمامية.
لتشغيل المشروع، تحتاج إلى تشغيل الجزء الخلفي أولاً ثم الواجهة الأمامية.
### استخدام Python
### استخدام بايثون
حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع واجهة خلفية؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما:
حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع الجزء الخلفي؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما:
- تثبيت التبعيات:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن عليها واختر "Port Visibility" وحدد "Public".
إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن فوقه وانقر على "Port Visibility" واختر "Public".
### العمل على واجهة أمامية
الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، لنقم بإنشاء واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي:
الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، دعونا ننشئ واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، وحقل إدخال لكتابة الرسالة، وزر لإرسال رسالتك إلى الواجهة الخلفية. لنلقِ نظرة على JavaScript بعد ذلك في *app.js*
ما سبق هو الحد الأدنى المطلق الذي تحتاجه لدعم نافذة دردشة، حيث يتكون من منطقة نصية يتم فيها عرض الرسائل، ومدخل لكتابة الرسالة وزر لإرسال رسالتك إلى الجزء الخلفي. دعونا نلقي نظرة على JavaScript بعد ذلك في *app.js*
**app.js**
@ -313,11 +307,11 @@ styles.css
لنقم بمراجعة الكود لكل قسم:
- 1) هنا نحصل على مرجع لجميع العناصر التي سنشير إليها لاحقًا في الكود.
- 2) في هذا القسم، ننشئ دالة تستخدم الطريقة المدمجة `fetch` التي تستدعي واجهتنا الخلفية.
- 2) في هذا القسم، نقوم بإنشاء وظيفة تستخدم طريقة `fetch` المدمجة التي تستدعي الجزء الخلفي.
- 3) `appendMessage` تساعد في إضافة الردود وكذلك ما تكتبه كمستخدم.
- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، ووضع رسالة المستخدم في منطقة النص، واستدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص.
- 4) هنا نستمع إلى حدث الإرسال وننتهي بقراءة حقل الإدخال، وضع رسالة المستخدم في منطقة النص، استدعاء واجهة برمجة التطبيقات، وعرض الرد في منطقة النص.
لنلقِ نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا وتجعله يبدو كما تريد، ولكن إليك بعض الاقتراحات:
دعونا نلقي نظرة على التنسيق بعد ذلك، هنا يمكنك أن تكون مبدعًا حقًا وتجعلها تبدو كما تريد، ولكن إليك بعض الاقتراحات:
**styles.css**
@ -338,14 +332,14 @@ styles.css
}
```
مع هذه الفئات الثلاث، ستقوم بتنسيق الرسائل بشكل مختلف بناءً على مصدرها، سواء من المساعد أو منك كمستخدم. إذا كنت بحاجة إلى الإلهام، تحقق من مجلد `solution/frontend/styles.css`.
مع هذه الفئات الثلاث، ستقوم بتنسيق الرسائل بشكل مختلف بناءً على مصدرها سواء من المساعد أو منك كمستخدم. إذا كنت تريد الإلهام، تحقق من مجلد `solution/frontend/styles.css`.
### تغيير عنوان URL الأساسي
كان هناك شيء واحد لم نقم بتعيينه هنا وهو `BASE_URL`، هذا غير معروف حتى يتم تشغيل الواجهة الخلفية. لتعيينه:
كان هناك شيء هنا لم نقم بتعيينه وهو `BASE_URL`، هذا غير معروف حتى يتم تشغيل الجزء الخلفي الخاص بك. لتعيينه:
- إذا كنت تشغل واجهة برمجة التطبيقات محليًا، يجب تعيينه إلى شيء مثل `http://localhost:5000`.
- إذا كنت تشغلها في Codespaces، يجب أن يبدو مثل "[name]app.github.dev".
- إذا كنت تشغل واجهة برمجة التطبيقات محليًا، يجب أن يتم تعيينه إلى شيء مثل `http://localhost:5000`.
- إذا كنت تشغلها في Codespaces، يجب أن تبدو مثل "[name]app.github.dev".
## المهمة
@ -361,7 +355,7 @@ project/
...
```
انسخ المحتوى من التعليمات أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك.
انسخ المحتوى من ما تم توجيهه أعلاه ولكن لا تتردد في تخصيصه حسب رغبتك.
## الحل
@ -371,7 +365,7 @@ project/
حاول تغيير شخصية مساعد الذكاء الاصطناعي.
### بالنسبة لـ Python
### بالنسبة لبايثون
عند استدعاء `call_llm` في *api.py* يمكنك تغيير الوسيط الثاني إلى ما تريد، على سبيل المثال:
@ -385,16 +379,16 @@ call_llm(message, "You are Captain Picard")
## الملخص
رائع، لقد تعلمت من الصفر كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، واجهة خلفية بلغة Python وواجهة أمامية باستخدام HTML وCSS وJavaScript.
رائع، لقد تعلمت من البداية كيفية إنشاء مساعد شخصي باستخدام الذكاء الاصطناعي. قمنا بذلك باستخدام نماذج GitHub، جزء خلفي في بايثون وواجهة أمامية في HTML، CSS و JavaScript.
## الإعداد باستخدام Codespaces
- انتقل إلى: [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- قم بإنشاء من قالب (تأكد من تسجيل الدخول إلى GitHub) في الزاوية العلوية اليمنى:
- قم بإنشاء من قالب (تأكد من أنك مسجل الدخول إلى GitHub) في الزاوية العلوية اليمنى:
- بمجرد أن تكون في مستودعك، قم بإنشاء Codespace:
- بمجرد أن تكون في المستودع الخاص بك، قم بإنشاء Codespace:
@ -403,4 +397,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). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
Малко контекст: създаването на чат асистенти с помощта на генеративен 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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Както казахме, изберете таба "Code" и вашата избрана среда за изпълнение.
Както казахме, изберете таба "Code" и вашата предпочитана среда за изпълнение.
С тази функция `call_llm` можем да вземем prompt и системен prompt, а функцията ще върне резултата.
С тази функция `call_llm` можем да подаваме prompt и системен prompt, а функцията ще връща резултата.
### Персонализиране на AI Асистента
Ако искате да персонализирате AI асистента, можете да зададете как искате да се държи, като попълните системния prompt по следния начин:
Ако искате да персонализирате AI асистента, можете да зададете как да се държи, като попълните системния prompt по следния начин:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Излагане чрез Web API
Страхотно, завършихме AI частта, нека видим как можем да я интегрираме в Web API. За Web API избираме Flask, но всяка уеб рамка би била подходяща. Ето кода за това:
Чудесно, завършихме AI частта, нека видим как можем да я интегрираме в Web API. За Web API избираме Flask, но всяка уеб рамка би свършила работа. Нека видим кода за това:
### Използване на Python
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Последният е предназначен за използване от нашия фронтенд, за да предава въпроси.
Тук създаваме Flask API и дефинираме основен маршрут "/" и "/chat". Последният е предназначен за използване от фронтенда, за да предава въпроси към него.
За да интегрираме *llm.py*, ето какво трябва да направим:
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
Страхотно, вече сме готови.
Чудесно, сега сме готови.
## Конфигуриране на Cors
Трябва да отбележим, че настройваме нещо като CORS, споделяне на ресурси между различни произходи. Това означава, че тъй като нашият бекенд и фронтенд ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда.
Трябва да отбележим, че настройваме нещо като CORS (споделяне на ресурси между различни източници). Това означава, че тъй като бекендът и фронтендът ще работят на различни портове, трябва да позволим на фронтенда да се свързва с бекенда.
### Използване на Python
Има парче код в *api.py*, което настройва това:
Има част от кода в *api.py*, която настройва това:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
В момента е настроено да позволява "*" (всички произходи), което е малко небезопасно. Трябва да го ограничим, когато преминем към продукция.
В момента е настроено да позволява "*" (всички източници), което е малко несигурно. Трябва да го ограничим, когато преминем към продукция.
## Стартиране на проекта
@ -203,9 +197,9 @@ CORS(app) # * example.com
### Използване на Python
Добре, имаме *llm.py* и *api.py*, как можем да ги направим да работят с бекенд? Ето какво трябва да направим:
Добре, имаме *llm.py* и *api.py*. Как можем да ги накараме да работят заедно? Има две неща, които трябва да направим:
- Инсталирайте зависимости:
- Инсталирайте зависимостите:
```sh
cd backend
@ -215,17 +209,17 @@ CORS(app) # * example.com
pip install openai flask flask-cors openai
```
- Стартирайте API
- Стартирайте API-то:
```sh
python api.py
```
Ако сте в Codespaces, трябва да отидете в Ports в долната част на редактора, да кликнете с десния бутон върху него, да изберете "Port Visibility" и да изберете "Public".
Ако сте в Codespaces, трябва да отидете в "Ports" в долната част на редактора, да кликнете с десния бутон върху него, да изберете "Port Visibility" и да изберете "Public".
### Работа върху фронтенд
Сега, когато имаме работещ API, нека създадем фронтенд за него. Минимален фронтенд, който ще подобряваме стъпка по стъпка. В папка *frontend* създайте следното:
Сега, когато имаме работещо API, нека създадем фронтенд за него. Ще започнем с минимален фронтенд, който ще подобряваме стъпка по стъпка. В папка *frontend* създайте следното:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
Горният код е абсолютният минимум, който ви енеобходим за поддръжка на чат прозорец, тъй като се състои от текстово поле, където ще се показват съобщенията, поле за въвеждане на съобщението и бутон за изпращане на съобщението към бекенда. Нека разгледаме JavaScript в *app.js*.
Горният код е абсолютният минимум, необходим за поддръжка на чат прозорец. Състои се от текстово поле, където ще се показват съобщенията, поле за въвеждане на съобщения и бутон за изпращане на съобщението към бекенда. Нека разгледаме JavaScript в *app.js*.
**app.js**
@ -312,12 +306,12 @@ styles.css
Нека разгледаме кода по секции:
- 1) Тук получаваме референция към всички елементи, които ще използваме по-късно в кода.
- 1) Тук получаваме референции към всички елементи, които ще използваме по-късно в кода.
- 2) В тази секция създаваме функция, която използва вградения метод `fetch`, за да извика нашия бекенд.
- 3) `appendMessage` помага да добавим отговори, както и съобщенията, които потребителят въвежда.
- 4) Тук слушаме събитието за изпращане и четем полето за въвеждане, поставяме съобщението на потребителя в текстовото поле, извикваме API и показваме отговора в текстовото поле.
- 3) `appendMessage` помага да добавяме отговори, както и съобщенията, които въвеждате като потребител.
- 4) Тук слушаме събитието за изпращане, четем полето за въвеждане, поставяме съобщението на потребителя в текстовото поле, извикваме API-то и показваме отговора в текстовото поле.
Нека разгледаме стилизирането, ето къде можете да бъдете креативни и да го направите както искате, но ето някои предложения:
Нека разгледаме стилизирането. Тук можете да бъдете креативни и да го направите както искате, но ето някои предложения:
**styles.css**
@ -342,14 +336,14 @@ styles.css
### Промяна на Base Url
Има едно нещо, което не зададохме, и това е`BASE_URL`. Това не е известно, докато бекендът не бъде стартиран. За да го зададете:
Има едно нещо, което не зададохме, и това е`BASE_URL`. Това не е известно, докато бекендът ви не бъде стартиран. За да го зададете:
- Ако стартирате API локално, трябва да бъде зададено на нещо като `http://localhost:5000`.
- Ако стартирате API локално, трябва да бъде нещо като `http://localhost:5000`.
- Ако го стартирате в Codespaces, трябва да изглежда нещо като "[name]app.github.dev".
## Задача
Създайте собствена папка *project* със съдържание като следното:
Създайте своя собствена папка *project* със съдържание, както е описано по-горе:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Копирайте съдържанието от инструкциите по-горе, но се чувствайте свободни да го персонализирате според вашите предпочитания.
Копирайте съдържанието от инструкциите по-горе, но не се колебайте да го персонализирате според вашите предпочитания.
## Решение
@ -385,22 +379,22 @@ call_llm(message, "You are Captain Picard")
## Обобщение
Страхотно, научихте от нулата как да създадете личен асистент с помощта на AI. Направихме това, използвайки GitHub Models, бекенд на Python и фронтенд на HTML, CSS и JavaScript.
Чудесно, научихте как от нулата да създадете личен асистент, използвайки AI. Направихме това с помощта на GitHub Models, бекенд на Python и фронтенд с HTML, CSS и JavaScript.
## Настройка с Codespaces
- Навигирайте до: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Създайте от шаблон (уверете се, че сте влезли в GitHub) в горния десен ъгъл:
- След като сте в репото си, създайте Codespace:
- След като сте в своето хранилище, създайте Codespace:
Това трябва да стартира среда, с която можете да работите.
Това ще стартира среда, с която можете да работите.
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
কিছু প্রেক্ষাপট, জেনারেটিভ AI ব্যবহার করে চ্যাট অ্যাসিস্ট্যান্ট তৈরি করা 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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
যেমনটি আমরা বলেছি, "Code" ট্যাব এবং আপনার পছন্দের রানটাইম নির্বাচন করুন।
যেমন বলা হয়েছে, "Code" ট্যাব এবং আপনার পছন্দের রানটাইম নির্বাচন করুন।
এই `call_llm` ফাংশনের মাধ্যমে আমরা এখন একটি প্রম্পট এবং একটি সিস্টেম প্রম্পট নিতে পারি এবং ফাংশনটি ফলাফল ফেরত দেয়।
এই `call_llm` ফাংশনটি ব্যবহার করে আমরা এখন একটি প্রম্পট এবং একটি সিস্টেম প্রম্পট নিতে পারি এবং ফাংশনটি ফলাফল ফেরত দেয়।
### AI অ্যাসিস্ট্যান্ট কাস্টমাইজ করুন
আপনি যদি AI অ্যাসিস্ট্যান্ট কাস্টমাইজ করতে চান তবে আপনি সিস্টেম প্রম্পটটি এইভাবে পূরণ করে এর আচরণ নির্ধারণ করতে পারেন:
আপনি যদি AI অ্যাসিস্ট্যান্ট কাস্টমাইজ করতে চান, তাহলে সিস্টেম প্রম্পটটি এভাবে পূরণ করে তার আচরণ নির্ধারণ করতে পারেন:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## এটি একটি ওয়েব API এর মাধ্যমে উন্মুক্ত করুন
## এটি একটি ওয়েব API এর মাধ্যমে প্রকাশ করুন
চমৎকার, আমরা AI অংশটি সম্পন্ন করেছি, এখন দেখি কীভাবে এটি একটি ওয়েব API-তে সংযুক্ত করা যায়। ওয়েব API এর জন্য, আমরা Flask ব্যবহার করছি, তবে যেকোনো ওয়েব ফ্রেমওয়ার্কই ভালো হবে। এর জন্য কোডটি দেখি:
চমৎকার, আমরা AI অংশটি সম্পন্ন করেছি, এখন দেখি কীভাবে এটি একটি ওয়েব API এর সাথে ইন্টিগ্রেট করা যায়। ওয়েব API এর জন্য, আমরা Flask ব্যবহার করছি, তবে যেকোনো ওয়েব ফ্রেমওয়ার্কই ভালো হবে। এর কোডটি দেখি:
### পাইথন ব্যবহার করা
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
এখানে, আমরা একটি Flask API তৈরি করি এবং একটি ডিফল্ট রুট "/" এবং "/chat" সংজ্ঞায়িত করি। পরেরটি আমাদের ফ্রন্টএন্ড থেকে প্রশ্ন পাঠানোর জন্য ব্যবহৃত হয়।
এখানে, আমরা একটি Flask API তৈরি করি এবং একটি ডিফল্ট রুট "/" এবং "/chat" সংজ্ঞায়িত করি। পরেরটি আমাদের ফ্রন্টএন্ড দ্বারা প্রশ্ন পাঠানোর জন্য ব্যবহৃত হয়।
*llm.py* সংযুক্ত করতে আমাদের যা করতে হবে তা হলো:
*llm.py* ইন্টিগ্রেট করতে আমাদের যা করতে হবে তা এখানে:
- `call_llm` ফাংশনটি ইমপোর্ট করুন:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
এখানে আমরা ইনকামিং রিকোয়েস্টটি পার্স করি এবং JSON বডি থেকে `message` প্রপার্টি পুনরুদ্ধার করি। এরপর আমরা এই কল দিয়ে LLM-কে কল করি:
এখানে আমরা ইনকামিং রিকোয়েস্টটি পার্স করি এবং JSON বডি থেকে `message` প্রপার্টি পুনরুদ্ধার করি। এরপর আমরা এই কল দিয়ে LLM কল করি:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
চমৎকার, এখন আমরা যা প্রয়োজন তা সম্পন্ন করেছি।
চমৎকার, এখন আমরা যা দরকার তা সম্পন্ন করেছি।
## Cors কনফিগার করুন
আমরা উল্লেখ করতে চাই যে আমরা CORS (cross-origin resource sharing) সেট আপ করেছি। এর মানে হলো আমাদের ব্যাকএন্ড এবং ফ্রন্টএন্ড ভিন্ন পোর্টে চলবে, তাই আমাদের ফ্রন্টএন্ডকে ব্যাকএন্ডে কল করার অনুমতি দিতে হবে।
আমাদের উল্লেখ করা উচিত যে আমরা Cors, ক্রস-অরিজিন রিসোর্স শেয়ারিং সেট আপ করেছি। এর মানে হল যে আমাদের ব্যাকএন্ড এবং ফ্রন্টএন্ড আলাদা পোর্টে চলবে, আমাদের ব্যাকএন্ডে ফ্রন্টএন্ড কল করার অনুমতি দিতে হবে।
### পাইথন ব্যবহার করা
*api.py* ফাইলে একটি কোড অংশ রয়েছে যা এটি সেট আপ করে:
*api.py* এ একটি কোড রয়েছে যা এটি সেট আপ করে:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
এখন এটি "*" অর্থাৎ সব উৎসের জন্য সেট করা হয়েছে, যা কিছুটা অনিরাপদ। প্রোডাকশনে যাওয়ার সময় এটি সীমাবদ্ধ করা উচিত।
এখন এটি "*" অর্থাৎ সব অরিজিনের জন্য সেট করা হয়েছে, যা কিছুটা অনিরাপদ। প্রোডাকশনে যাওয়ার সময় এটি সীমাবদ্ধ করা উচিত।
## আপনার প্রকল্প চালান
@ -203,9 +197,9 @@ CORS(app) # * example.com
### পাইথন ব্যবহার করা
ঠিক আছে, আমাদের কাছে *llm.py* এবং *api.py* রয়েছে, কীভাবে আমরা এটি একটি ব্যাকএন্ডের সাথে কাজ করব? এখানে দুটি জিনিস করতে হবে:
ঠিক আছে, আমাদের কাছে *llm.py* এবং *api.py* রয়েছে, কীভাবে আমরা এটি একটি ব্যাকএন্ড দিয়ে কাজ করব? এখানে দুটি জিনিস করতে হবে:
- ডিপেন্ডেন্সি ইনস্টল করুন:
- ডিপেনডেন্সি ইনস্টল করুন:
```sh
cd backend
@ -215,17 +209,17 @@ CORS(app) # * example.com
pip install openai flask flask-cors openai
```
- API চালু করুন:
- API চালু করুন
```sh
python api.py
```
যদি আপনি Codespaces-এ থাকেন, তাহলে আপনাকে এডিটরের নিচের অংশে Ports-এ যেতে হবে, সেখানে রাইট-ক্লিক করে "Port Visibility" নির্বাচন করতে হবে এবং "Public" নির্বাচন করতে হবে।
যদি আপনি Codespacesএ থাকেন, তাহলে আপনাকে এডিটরের নিচের অংশে Ports এ যেতে হবে, ডান-ক্লিক করতে হবে এবং "Port Visibility" এ ক্লিক করে "Public" নির্বাচন করতে হবে।
### ফ্রন্টএন্ডে কাজ করুন
এখন যেহেতু আমাদের API চালু এবং চলমান, আসুন এর জন্য একটি ফ্রন্টএন্ড তৈরি করি। একটি ন্যূনতম ফ্রন্টএন্ড যা আমরা ধাপে ধাপে উন্নত করব। একটি *frontend* ফোল্ডারে নিম্নলিখিত তৈরি করুন:
এখন আমাদের API চালু এবং চলমান, চলুন এর জন্য একটি ফ্রন্টএন্ড তৈরি করি। একটি ন্যূনতম ফ্রন্টএন্ড যা আমরা ধাপে ধাপে উন্নত করব। একটি *frontend* ফোল্ডারে নিম্নলিখিত তৈরি করুন:
```text
backend/
@ -235,7 +229,7 @@ app.js
styles.css
```
চলুন **index.html** দিয়ে শুরু করি:
চলুন শুরু করি **index.html** দিয়ে:
```html
<html>
@ -253,7 +247,7 @@ styles.css
</html>
```
উপরেরটি একটি চ্যাট উইন্ডো সমর্থন করার জন্য প্রয়োজনীয় ন্যূনতম জিনিস, কারণ এটি একটি টেক্সট এরিয়া নিয়ে গঠিত যেখানে বার্তাগুলি রেন্ডার করা হবে, একটি ইনপুট যেখানে বার্তা টাইপ করা হবে এবং একটি বোতাম যা আপনার বার্তাটি ব্যাকএন্ডে পাঠাবে। পরবর্তীটি *app.js* এ জাভাস্ক্রিপ্ট দেখুন।
উপরেরটি একটি চ্যাট উইন্ডো সমর্থন করার জন্য প্রয়োজনীয় ন্যূনতম জিনিস, কারণ এটি একটি টেক্সট এরিয়া নিয়ে গঠিত যেখানে বার্তাগুলি রেন্ডার করা হবে, একটি ইনপুট যেখানে বার্তা টাইপ করা হবে এবং একটি বোতাম যা আপনার বার্তাটি ব্যাকএন্ডে পাঠাবে। চলুন *app.js* এ জাভাস্ক্রিপ্ট দেখি।
**app.js**
@ -310,14 +304,14 @@ styles.css
})();
```
চলুন কোডটি প্রতিটি অংশে বিশ্লেষণ করি:
চলুন কোডটি প্রতিটি অংশে দেখি:
- ১) এখানে আমরা আমাদের সমস্ত উপাদানের রেফারেন্স পাই যা আমরা পরে কোডে উল্লেখ করব।
- ১) এখানে আমরা আমাদের সমস্ত এলিমেন্টের রেফারেন্স পাই যা আমরা পরে কোডে উল্লেখ করব।
- ২) এই অংশে, আমরা একটি ফাংশন তৈরি করি যা বিল্ট-ইন `fetch` মেথড ব্যবহার করে আমাদের ব্যাকএন্ডে কল করে।
- ৩) `appendMessage` ব্যবহারকারীর টাইপ করা বার্তা এবং রেসপন্স যোগ করতে সাহায্য করে।
- ৪) এখানে আমরা সাবমিট ইভেন্টটি শুনি এবং ইনপুট ফিল্ডটি পড়ি, ব্যবহারকারীর বার্তাটি টেক্সট এরিয়াতে রাখি, API কল করি এবং সেই রেসপন্সটি টেক্সট এরিয়াতে রেন্ডার করি।
- ৪) এখানে আমরা সাবমিট ইভেন্টে শুনি এবং ইনপুট ফিল্ডটি পড়ি, ব্যবহারকারীর বার্তাটি টেক্সট এরিয়াতে রাখি, API কল করি এবং রেসপন্সটি টেক্সট এরিয়াতে রেন্ডার করি।
চলুন স্টাইলিং দেখি, এখানে আপনি আপনার ইচ্ছামতো ডিজাইন করতে পারেন, তবে এখানে কিছু পরামর্শ দেওয়া হলো:
চলুন স্টাইলিং দেখি, এখানে আপনি আপনার ইচ্ছামতো ডিজাইন করতে পারেন, তবে কিছু পরামর্শ এখানে:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
এই তিনটি ক্লাসের মাধ্যমে আপনি বার্তাগুলিকে আলাদাভাবে স্টাইল করতে পারবেন, এটি অ্যাসিস্ট্যান্ট বা ব্যবহারকারীর কাছ থেকে এসেছে কিনা তার উপর ভিত্তি করে। যদি আপনি অনুপ্রাণিত হতে চান, তবে `solution/frontend/styles.css` ফোল্ডারটি দেখুন।
এই তিনটি ক্লাস দিয়ে আপনি বার্তাগুলিকে স্টাইল করতে পারেন, এটি অ্যাসিস্ট্যান্ট বা ব্যবহারকারীর কাছ থেকে এসেছে কিনা তার উপর নির্ভর করে। অনুপ্রাণিত হতে চাইলে `solution/frontend/styles.css` ফোল্ডারটি দেখুন।
### বেস URL পরিবর্তন করুন
এখানে একটি জিনিস আমরা সেট করিনি এবং তা হলো `BASE_URL`, এটি আপনার ব্যাকএন্ড শুরু না হওয়া পর্যন্ত জানা যায় না। এটি সেট করতে:
এখানে একটি জিনিস আমরা সেট করিনি, সেটি হল `BASE_URL`, এটি আপনার ব্যাকএন্ড চালু না হওয়া পর্যন্ত জানা যায় না। এটি সেট করতে:
- যদি আপনি API লোকালভাবে চালান, এটি কিছুটা এরকম হওয়া উচিত: `http://localhost:5000`।
- যদি Codespaces-এ চালান, এটি কিছুটা এরকম দেখাবে: "[name]app.github.dev"।
- যদি আপনি API লোকালি চালান, এটি কিছুটা `http://localhost:5000` এর মতো হওয়া উচিত।
- যদি Codespaces এ চালান, এটি কিছুটা "[name]app.github.dev" এর মতো দেখাবে।
## অ্যাসাইনমেন্ট
আপনার নিজের *project* ফোল্ডার তৈরি করুন যার কন্টেন্ট নিম্নরূপ:
আপনার নিজের *project* ফোল্ডার তৈরি করুন যার কন্টেন্ট এভাবে থাকবে:
```text
project/
@ -365,7 +359,7 @@ project/
## সমাধান
[সমাধান](./solution/README.md)
[Solution](./solution/README.md)
## বোনাস
@ -373,7 +367,7 @@ AI অ্যাসিস্ট্যান্টের ব্যক্তিত
### পাইথনের জন্য
যখন আপনি *api.py* এ `call_llm` কল করেন, তখন আপনি দ্বিতীয় আর্গুমেন্টটি আপনার ইচ্ছামতো পরিবর্তন করতে পারেন, উদাহরণস্বরূপ:
যখন আপনি *api.py* এ `call_llm` কল করেন, তখন দ্বিতীয় আর্গুমেন্টটি আপনার ইচ্ছামতো পরিবর্তন করতে পারেন, উদাহরণস্বরূপ:
```python
call_llm(message, "You are Captain Picard")
@ -385,16 +379,16 @@ CSS এবং টেক্সটও আপনার ইচ্ছামতো প
## সারসংক্ষেপ
চমৎকার, আপনি শিখেছেন কীভাবে শুরু থেকে একটি ব্যক্তিগত অ্যাসিস্ট্যান্ট তৈরি করতে হয়। আমরা এটি করেছি GitHub Models, পাইথনে একটি ব্যাকএন্ড এবং HTML, CSS এবং জাভাস্ক্রিপ্টে একটি ফ্রন্টএন্ড ব্যবহার করে।
চমৎকার, আপনি শিখেছেন কীভাবে AI ব্যবহার করে একটি ব্যক্তিগত অ্যাসিস্ট্যান্ট তৈরি করতে হয়। আমরা এটি করেছি 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 এ লগ ইন করেছেন) উপরের ডান কোণে:
- একবার আপনার রিপোতে গেলে, একটি Codespace তৈরি করুন:
- আপনার রিপোতে গেলে, একটি Codespace তৈরি করুন:
@ -403,4 +397,4 @@ CSS এবং টেক্সটও আপনার ইচ্ছামতো প
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
Este projeto de chat mostra como criar um Assistente de Chat usando os Modelos do GitHub.
Este projeto de chat mostra como construir um Assistente de Chat usando GitHub Models.
Aqui está como o projeto finalizado se parece:
<div>
<imgsrc="./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á aqui é como integrar IA generativa em um aplicativo web ao longo desta lição. Vamos começar.
## Conectando à IA generativa
## Conectando-se à IA generativa
Para o backend, estamos usando os Modelos do GitHub. É um ótimo serviço que permite usar IA gratuitamente. Acesse o playground e copie o código correspondente à linguagem de backend escolhida. Veja como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
Para o backend, estamos usando GitHub Models. É um ótimo serviço que permite usar IA gratuitamente. Acesse o playground e copie o código que corresponde à linguagem de backend escolhida. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="Playground de IA dos Modelos do GitHub"width="600">
</div>
Como mencionado, selecione a aba "Code" e o runtime escolhido.
<div>
<imgsrc="./assets/playground-choice.png"alt="Escolha no playground"width="600">
</div>
Com esta função `call_llm`, agora podemos passar um prompt e um system prompt, e a função retorna o resultado.
Com esta função `call_llm`, agora podemos passar um prompt e um prompt de sistema, e a função retorna o resultado.
### Personalizar o Assistente de IA
Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o system prompt assim:
Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o prompt de sistema assim:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Exponha-o via uma API Web
## Exponha via uma API Web
Ótimo, já concluímos a parte de IA. Agora, vamos ver como podemos integrá-la em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código:
Ótimo, já concluímos a parte de IA. Agora vamos ver como podemos integrar isso em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código:
### Usando Python
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo nosso frontend para enviar perguntas.
Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo frontend para enviar perguntas.
Para integrar o *llm.py*, aqui está o que precisamos fazer:
@ -182,7 +176,7 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer:
## Configurar Cors
Devemos destacar que configuramos algo como CORS, compartilhamento de recursos entre origens. Isso significa que, como nosso backend e frontend serão executados em portas diferentes, precisamos permitir que o frontend se comunique com o backend.
Devemos mencionar que configuramos algo como CORS, compartilhamento de recursos entre origens. Isso significa que, como nosso backend e frontend rodarão em portas diferentes, precisamos permitir que o frontend chame o backend.
### Usando Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Atualmente, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringi-lo quando formos para produção.
No momento, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringir isso quando formos para produção.
## Execute seu projeto
@ -203,7 +197,7 @@ Para executar seu projeto, você precisa iniciar primeiro o backend e depois o f
### Usando Python
Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer:
Ok, então temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer:
- Instalar dependências:
@ -221,11 +215,11 @@ Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend?
python api.py
```
Se você estiver usando Codespaces, vá para Ports na parte inferior do editor, clique com o botão direito sobre ele, selecione "Port Visibility" e escolha "Public".
Se você estiver usando Codespaces, precisa ir até Ports na parte inferior do editor, clicar com o botão direito sobre ele, selecionar "Port Visibility" e escolher "Public".
### Trabalhar em um frontend
### Trabalhar no frontend
Agora que temos uma API em funcionamento, vamos criar um frontend para isso. Um frontend mínimo que melhoraremos passo a passo. Em uma pasta *frontend*, crie o seguinte:
Agora que temos uma API funcionando, vamos criar um frontend para isso. Um frontend mínimo que iremos melhorar gradualmente. Na pasta *frontend*, crie o seguinte:
```text
backend/
@ -253,7 +247,7 @@ Vamos começar com **index.html**:
</html>
```
O código acima é o mínimo necessário para suportar uma janela de chat, consistindo em uma área de texto onde as mensagens serão exibidas, um campo de entrada para digitar a mensagem e um botão para enviar sua mensagem ao backend. Vamos olhar o JavaScript em *app.js*.
O código acima é o mínimo necessário para suportar uma janela de chat, consistindo em uma área de texto onde as mensagens serão exibidas, um campo de entrada para digitar a mensagem e um botão para enviar sua mensagem ao backend. Vamos olhar o JavaScript em seguida, no arquivo *app.js*.
**app.js**
@ -312,12 +306,12 @@ O código acima é o mínimo necessário para suportar uma janela de chat, consi
Vamos analisar o código por seção:
- 1) Aqui obtemos uma referência a todos os elementos que usaremos mais tarde no código.
- 1) Aqui obtemos uma referência a todos os elementos que usaremos no código.
- 2) Nesta seção, criamos uma função que usa o método embutido `fetch` para chamar nosso backend.
- 3) `appendMessage` ajuda a adicionar respostas, bem como o que você digita como usuário.
- 3) `appendMessage` ajuda a adicionar respostas, bem como o que você, como usuário, digita.
- 4) Aqui ouvimos o evento de envio, lemos o campo de entrada, colocamos a mensagem do usuário na área de texto, chamamos a API e renderizamos a resposta na área de texto.
Agora vamos olhar o estilo. Aqui você pode ser criativo e personalizar como quiser, mas aqui estão algumas sugestões:
Agora vamos olhar o estilo. Aqui você pode ser criativo e fazer com que pareça como quiser, mas aqui estão algumas sugestões:
**styles.css**
@ -338,18 +332,18 @@ Agora vamos olhar o estilo. Aqui você pode ser criativo e personalizar como qui
}
```
Com essas três classes, você estilizará as mensagens de forma diferente dependendo de sua origem: do assistente ou do usuário. Se quiser se inspirar, confira a pasta `solution/frontend/styles.css`.
Com essas três classes, você estilizará as mensagens de forma diferente dependendo de onde elas vêm: do assistente ou de você como usuário. Se quiser se inspirar, confira a pasta `solution/frontend/styles.css`.
### Alterar a Base Url
### Alterar Base Url
Há algo que não configuramos: `BASE_URL`. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo:
Há uma coisa que não configuramos aqui: `BASE_URL`. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo:
- Se você executar a API localmente, deve ser algo como `http://localhost:5000`.
- Se você executar a API localmente, deve configurá-lo como algo como `http://localhost:5000`.
- Se estiver usando Codespaces, deve ser algo como "[nome]app.github.dev".
## Tarefa
Crie sua própria pasta *project* com o seguinte conteúdo:
Crie sua própria pasta *project* com o conteúdo como descrito:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Copie o conteúdo das instruções acima, mas sinta-se à vontade para personalizar como preferir.
Copie o conteúdo do que foi instruído acima, mas sinta-se à vontade para personalizar como preferir.
## Solução
@ -385,22 +379,22 @@ Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html*
## Resumo
Ótimo, você aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso usando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript.
Ótimo, você aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso usando GitHub Models, um backend em Python e um frontend em HTML, CSS e JavaScript.
## Configuração com Codespaces
- Navegue até: [Repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Crie a partir de um template (certifique-se de estar logado no GitHub) no canto superior direito:
Isso deve iniciar um ambiente com o qual você pode trabalhar agora.
Isso deve iniciar um ambiente no qual você pode trabalhar agora.
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
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.
Trochu kontextu: vytváření chatovacích asistentů pomocí generativní AI je skvělý způsob, jak začít učit se o AI. V této lekci se naučíte, jak integrovat generativní AI do webové aplikace. Pojďme začít.
Trocha kontextu: vytváření chatovacích asistentů pomocí generativní AI je skvělý způsob, jak začít s učením o AI. V této lekci se naučíte, jak integrovat generativní AI do webové aplikace. Pojďme začít.
## Připojení k generativní AI
## Připojení ke generativní AI
Pro backend používáme GitHub Models. Je to skvělá služba, která vám umožňuje používat AI zdarma. Přejděte na její playground a získejte kód odpovídající vašemu zvolenému backendovému jazyku. Takto to vypadá na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Pro backend používáme GitHub Models. Je to skvělá služba, která vám umožňuje používat AI zdarma. Přejděte na její playground a získejte kód odpovídající vašemu zvolenému backendovému jazyku. Takto vypadá [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Jak jsme zmínili, vyberte záložku "Code" a svůj zvolený runtime.
Jak jsme zmínili, vyberte záložku "Code" a váš zvolený runtime.
S touto funkcí `call_llm` nyní můžeme vzít prompt a systémový prompt a funkce vrátí výsledek.
S touto funkcí `call_llm` nyní můžeme zadat prompt a systémový prompt a funkce vrátí výsledek.
### Přizpůsobení AI asistenta
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Zpřístupnění přes Web API
Skvělé, máme hotovou AI část, podívejme se, jak ji můžeme integrovat do Web API. Pro Web API jsme se rozhodli použít Flask, ale jakýkoli webový framework by měl být v pořádku. Podívejme se na kód:
Skvělé, AI část máme hotovou, podívejme se, jak ji můžeme integrovat do Web API. Pro Web API jsme zvolili Flask, ale jakýkoli webový framework by měl být v pořádku. Podívejme se na kód:
### Použití Pythonu
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Zde vytvoříme Flask API a definujeme výchozí trasu "/" a "/chat". Druhá je určena pro použití naším frontendem k předávání otázek.
Zde vytvoříme Flask API a definujeme výchozí trasu "/" a "/chat". Druhá trasa je určena pro použití naším frontendem k předávání otázek.
Pro integraci *llm.py*potřebujeme udělat následující:
Pro integraci *llm.py*je třeba udělat následující:
- Importovat funkci `call_llm`:
@ -167,7 +161,7 @@ Pro integraci *llm.py* potřebujeme udělat následující:
})
```
Zde analyzujeme příchozí požadavek, abychom získali vlastnost `message` z JSON těla. Poté zavoláme LLM tímto způsobem:
Zde zpracujeme příchozí požadavek, abychom získali vlastnost `message` z JSON těla. Poté zavoláme LLM tímto způsobem:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ Pro integraci *llm.py* potřebujeme udělat následující:
})
```
Skvělé, nyní máme hotovo, co jsme potřebovali.
Skvělé, nyní máme vše, co potřebujeme.
## Nastavení Cors
Je třeba zmínit, že jsme nastavili něco jako CORS, sdílení zdrojů mezi různými originy. To znamená, že protože náš backend a frontend budou běžet na různých portech, musíme umožnit frontendu volat backend.
Je třeba zmínit, že jsme nastavili něco jako CORS, sdílení zdrojů mezi různými doménami. To znamená, že protože náš backend a frontend poběží na různých portech, musíme povolit frontendu volat backend.
### Použití Pythonu
V *api.py* je kód, který to nastavuje:
V souboru *api.py* je kód, který toto nastavuje:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Momentálně je nastaveno na povolení "*" což znamená všechny originy, což je trochu nebezpečné. Měli bychom to omezit, jakmile půjdeme do produkce.
Momentálně je nastaveno povolení pro všechny domény "*", což je trochu nebezpečné. Měli bychom to omezit, jakmile přejdeme do produkce.
## Spuštění projektu
@ -203,7 +197,7 @@ Pro spuštění projektu je třeba nejprve spustit backend a poté frontend.
### Použití Pythonu
Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Potřebujeme udělat dvě věci:
Dobře, máme *llm.py* a *api.py*. Jak to můžeme zprovoznit s backendem? Potřebujeme udělat dvě věci:
- Nainstalovat závislosti:
@ -215,17 +209,17 @@ Dobře, máme *llm.py* a *api.py*, jak to můžeme zprovoznit s backendem? Potř
pip install openai flask flask-cors openai
```
- Spustit API
- Spustit API:
```sh
python api.py
```
Pokud jste v Codespaces, musíte přejít na Ports v dolní části editoru, kliknout pravým tlačítkem na něj a vybrat "Port Visibility" a zvolit "Public".
Pokud jste v Codespaces, musíte přejít do sekce Ports v dolní části editoru, kliknout pravým tlačítkem a vybrat "Port Visibility" a zvolit "Public".
### Práce na frontendu
Nyní, když máme API spuštěné, vytvoříme frontend. Minimální frontend, který budeme postupně vylepšovat. Ve složce *frontend* vytvořte následující:
Nyní, když máme API spuštěné, vytvoříme frontend. Začneme s minimálním frontendem, který budeme postupně vylepšovat. Ve složce *frontend* vytvořte následující:
```text
backend/
@ -253,7 +247,7 @@ Začněme s **index.html**:
</html>
```
Toto je absolutní minimum, které potřebujete k podpoře chatovacího okna, protože obsahuje textové pole, kde se budou zobrazovat zprávy, vstupní pole pro psaní zprávy a tlačítko pro odeslání zprávy na backend. Podívejme se na JavaScript v *app.js*
Toto je absolutní minimum potřebné pro podporu chatovacího okna. Obsahuje textové pole, kde se zobrazují zprávy, vstupní pole pro psaní zpráv a tlačítko pro odeslání zprávy na backend. Podívejme se nyní na JavaScript v *app.js*.
**app.js**
@ -310,14 +304,14 @@ Toto je absolutní minimum, které potřebujete k podpoře chatovacího okna, pr
})();
```
Projděme si kód po sekcích:
Projděme si kód po částech:
- 1) Zde získáme referenci na všechny naše prvky, na které budeme později odkazovat v kódu.
- 2) V této sekci vytvoříme funkci, která používá vestavěnou metodu `fetch` pro volání našeho backendu.
- 3) `appendMessage` pomáhá přidávat odpovědi i to, co jako uživatel napíšete.
- 4) Zde posloucháme událost submit, čteme vstupní pole, umístíme zprávu uživatele do textového pole, zavoláme API a zobrazíme odpověď v textovém poli.
- 1) Získáme referenci na všechny prvky, které budeme později v kódu používat.
- 2) Vytvoříme funkci, která pomocí vestavěné metody `fetch` volá náš backend.
- 3) `appendMessage` pomáhá přidávat odpovědi i zprávy, které uživatel napíše.
- 4) Posloucháme událost odeslání, přečteme vstupní pole, umístíme uživatelovu zprávu do textového pole, zavoláme API a zobrazíme odpověď v textovém poli.
Podívejme se na stylování, zde můžete být opravdu kreativní a vytvořit vzhled podle svých představ, ale zde jsou některé návrhy:
Podívejme se na stylování, kde se můžete opravdu vyřádit. Zde je několik návrhů:
**styles.css**
@ -338,18 +332,18 @@ Podívejme se na stylování, zde můžete být opravdu kreativní a vytvořit v
}
```
S těmito třemi třídami budete stylovat zprávy různě podle toho, odkud pocházejí – od asistenta nebo od vás jako uživatele. Pokud chcete inspiraci, podívejte se do složky `solution/frontend/styles.css`.
S těmito třemi třídami budete stylovat zprávy odlišně podle toho, zda pocházejí od asistenta nebo od uživatele. Pokud hledáte inspiraci, podívejte se do složky `solution/frontend/styles.css`.
### Změna Base Url
### Změna Base URL
Jedna věc, kterou jsme zde nenastavili, byla `BASE_URL`, která není známa, dokud není backend spuštěn. Pro nastavení:
Jedna věc, kterou jsme zde nenastavili, je `BASE_URL`. Ta není známa, dokud není backend spuštěn. Pro nastavení:
- Pokud spouštíte API lokálně, mělo by být nastaveno na něco jako `http://localhost:5000`.
- Pokud běží v Codespaces, mělo by vypadat jako "[name]app.github.dev".
## Úkol
## Zadání
Vytvořte vlastní složku *project* s obsahem takto:
Vytvořte si vlastní složku *project* s obsahem takto:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Zkopírujte obsah z toho, co bylo uvedeno výše, ale klidně si jej přizpůsobte podle svých představ.
Zkopírujte obsah podle výše uvedených pokynů, ale klidně si jej přizpůsobte podle svého.
## Řešení
@ -373,7 +367,7 @@ Zkuste změnit osobnost AI asistenta.
### Pro Python
Když voláte `call_llm` v *api.py*, můžete změnit druhý argument na to, co chcete, například:
Když voláte `call_llm` v *api.py*, můžete změnit druhý argument na cokoli chcete, například:
```python
call_llm(message, "You are Captain Picard")
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### Frontend
Změňte také CSS a text podle svých představ, tedy proveďte změny v *index.html* a *styles.css*.
Změňte také CSS a text podle svého vkusu, tedy proveďte změny v *index.html* a *styles.css*.
## Shrnutí
Skvělé, naučili jste se od začátku, jak vytvořit osobního asistenta pomocí AI. Udělali jsme to pomocí GitHub Models, backendu v Pythonu a frontendu v HTML, CSS a JavaScriptu.
Skvělé, naučili jste se od základů, jak vytvořit osobního asistenta pomocí AI. Použili jsme GitHub Models, backend v Pythonu a frontend v HTML, CSS a JavaScriptu.
## Nastavení s Codespaces
- Přejděte na: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Vytvořte z šablony (ujistěte se, že jste přihlášeni na GitHub) v pravém horním rohu:
- Vytvořte z šablony (ujistěte se, že jste přihlášeni do GitHubu) v pravém horním rohu:
- Jakmile jste ve svém repozitáři, vytvořte Codespace:
To by mělo spustit prostředí, se kterým nyní můžete pracovat.
Tím se spustí prostředí, se kterým nyní můžete pracovat.
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby AI pro překlady [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.
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.
Lidt kontekst: At bygge chatassistenter ved hjælp af generativ AI er en fantastisk måde at begynde at lære om AI. Det, du vil lære, er at integrere generativ AI i en webapp gennem denne lektion. Lad os komme i gang.
## Forbindelse til generativ AI
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)
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 dit valgte backend-sprog. Her ser det sådan ud på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Som nævnt skal du vælge fanen "Code" og din valgte runtime.
@ -108,7 +102,7 @@ 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. Lad os se koden for det:
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:
### Brug af Python
@ -141,18 +135,18 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
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.
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.
For at integrere *llm.py* skal vi gøre følgende:
- Importere funktionen `call_llm`:
- Importér funktionen `call_llm`:
```python
from llm import call_llm
from flask import Flask, request
```
- Kalde den fra "/chat"-routen:
- Kald den fra "/chat"-ruten:
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ For at integrere *llm.py* skal vi gøre følgende:
})
```
Her parser vi den indkommende anmodning for at hente `message`-egenskaben fra JSON-bodyen. Derefter kalder vi LLM med dette kald:
Her parser vi den indkommende anmodning for at hente egenskaben `message` fra JSON-bodyen. Derefter kalder vi LLM med dette kald:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,11 +172,11 @@ For at integrere *llm.py* skal vi gøre følgende:
})
```
Fantastisk, nu har vi gjort, hvad der er nødvendigt.
Fantastisk, nu har vi gjort, hvad vi skal.
## 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.
### Brug af Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
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.
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.
## Kør dit projekt
@ -203,9 +197,9 @@ For at køre dit projekt skal du først starte din backend og derefter din front
### 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:
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:
- Installér afhængigheder:
```sh
cd backend
@ -215,17 +209,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
- Start API'en
```sh
python api.py
```
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".
Hvis du er i Codespaces, skal du gå til Ports i den nederste del af editoren, højreklikke på den og klikke på "Port Visibility" og vælge "Public".
### Arbejd på en frontend
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:
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 trin for trin. I en *frontend*-mappe skal du oprette følgende:
```text
backend/
@ -253,7 +247,7 @@ Lad os starte med **index.html**:
</html>
```
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*
Ovenstående er det absolut minimum, du har brug for for at understøtte et chatvindue, da det består af en tekstarea, hvor beskeder vil blive vist, et inputfelt til at skrive beskeden og en knap til at sende din besked til backend. Lad os se på JavaScript næste i *app.js*
**app.js**
@ -340,9 +334,9 @@ Lad os se på styling næste. Her kan du virkelig gå amok og få det til at se
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.
### Ændring af Base Url
### Skift 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:
Der var én ting her, vi ikke satte, og det var `BASE_URL`. Dette er ikke kendt, før din backend er startet. For at sætte det:
- Hvis du kører API'en lokalt, skal det sættes til noget som `http://localhost:5000`.
- Hvis det kører i Codespaces, skal det se ud som "[name]app.github.dev".
@ -403,4 +397,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å 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.
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 ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
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.
Ein bisschen 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 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 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:
Für das Backend verwenden wir GitHub Models. Es ist ein großartiger Dienst, der es dir ermöglicht, KI kostenlos zu nutzen. Gehe zu seinem Playground und hole dir den Code, der zu deiner gewählten Backend-Sprache passt. So sieht es im [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) aus:
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"width="600">
</div>
Wie gesagt, wähle den Tab "Code" und deine bevorzugte Laufzeitumgebung.
Lass uns den Code ein wenig bereinigen, damit er wiederverwendbar ist:
Lass uns diesen Code ein wenig bereinigen, damit er wiederverwendbar ist:
```python
def call_llm(prompt: str, system_message: str):
@ -108,7 +102,7 @@ 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 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:
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 dazu:
### Verwendung von Python
@ -141,7 +135,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 das Backend zu übermitteln.
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.
Um *llm.py* zu integrieren, müssen wir Folgendes tun:
@ -178,11 +172,11 @@ Um *llm.py* zu integrieren, müssen wir Folgendes tun:
})
```
Super, jetzt haben wir alles erledigt, was wir brauchen.
Super, jetzt haben wir alles erledigt.
## 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 (Cross-Origin Resource Sharing) einrichten. Das bedeutet, dass unser Backend und Frontend auf unterschiedlichen Ports laufen werden, und wir müssen dem Frontend erlauben, auf das Backend zuzugreifen.
### Verwendung von Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
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.
Momentan ist es so konfiguriert, dass alle Ursprünge ("*") erlaubt sind, was etwas unsicher ist. Wir sollten dies einschränken, sobald wir in die Produktion gehen.
## Projekt ausführen
@ -221,11 +215,11 @@ Ok, wir haben *llm.py* und *api.py*. Wie können wir das mit einem Backend zum L
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, "Port Visibility" auswählen und "Public" auswählen.
### Am Frontend arbeiten
Jetzt, da wir eine API am Laufen haben, erstellen wir ein Frontend dafür. Ein minimalistisches Frontend, das wir schrittweise verbessern werden. Erstelle im Ordner *frontend* Folgendes:
Jetzt, da wir eine API am Laufen haben, erstellen wir ein Frontend dafür. Ein minimales Frontend, das wir schrittweise verbessern werden. Erstelle im Ordner *frontend* Folgendes:
```text
backend/
@ -253,7 +247,7 @@ Beginnen wir mit **index.html**:
</html>
```
Das oben Genannte ist das absolute Minimum, das du benötigst, um ein Chat-Fenster zu unterstützen. Es besteht aus einem Textbereich, in dem Nachrichten angezeigt werden, einem Eingabefeld, in das die Nachricht eingegeben wird, und einem Button, um die Nachricht an das Backend zu senden. Schauen wir uns als Nächstes das JavaScript in *app.js* an.
Das oben Gezeigte ist das absolute Minimum, das du benötigst, um ein Chat-Fenster zu unterstützen. Es besteht aus einem Textbereich, in dem Nachrichten angezeigt werden, einem Eingabefeld, in das die Nachricht eingegeben wird, und einem Button, um die Nachricht an das Backend zu senden. Schauen wir uns als Nächstes das JavaScript in *app.js* an.
**app.js**
@ -314,7 +308,7 @@ Gehen wir den Code Abschnitt für Abschnitt durch:
- 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, sowohl Antworten als auch die vom Benutzer eingegebenen Nachrichten hinzuzufügen.
- 3) `appendMessage` hilft dabei, sowohl die 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:
@ -342,9 +336,9 @@ Mit diesen drei Klassen kannst du Nachrichten unterschiedlich gestalten, je nach
### Basis-URL ändern
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:
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:
- Wenn du die API lokal ausführst, sollte sie etwa auf`http://localhost:5000` gesetzt werden.
- Wenn du die API lokal ausführst, sollte sie auf etwas wie`http://localhost:5000` gesetzt werden.
- Wenn du sie in Codespaces ausführst, sollte sie etwa so aussehen: "[name]app.github.dev".
Λίγο πλαίσιο: η δημιουργία βοηθών συνομιλίας με τη χρήση γενετικής AI είναι ένας εξαιρετικός τρόπος γιανα ξεκινήσετε να μαθαίνετε για την AI. Σε αυτό το μάθημα, θα μάθετε πώς να ενσωματώνετε γενετική AI σε μια εφαρμογή ιστού. Ας ξεκινήσουμε.
Λίγο πλαίσιο, η δημιουργία βοηθών συνομιλίας χρησιμοποιώντας γενετική AI είναι ένας εξαιρετικός τρόπος γιανα ξεκινήσετε να μαθαίνετε για την AI. Αυτό που θα μάθετε είναι πώς να ενσωματώσετε γενετική AI σε μια εφαρμογή ιστού κατά τη διάρκεια αυτού του μαθήματος. Ας ξεκινήσουμε.
## Σύνδεση με γενετική AI
Για το backend, χρησιμοποιούμε τα GitHub Models. Είναι μια εξαιρετική υπηρεσία που σας επιτρέπει να χρησιμοποιείτε AI δωρεάν. Μεταβείτε στο playground της και πάρτε τον κώδικα που αντιστοιχεί στη γλώσσα backend που επιλέξατε. Δείτε πώς φαίνεται στο [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Για το backend, χρησιμοποιούμε τα GitHub Models. Είναι μια εξαιρετική υπηρεσία που σας επιτρέπει να χρησιμοποιείτε AI δωρεάν. Μεταβείτε στο playground και πάρτε τον κώδικα που αντιστοιχεί στη γλώσσα backend που έχετε επιλέξει. Δείτε πώς φαίνεται στο [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Όπως είπαμε, επιλέξτε την καρτέλα "Code" και το runtime που προτιμάτε.
Όπως είπαμε, επιλέξτε την καρτέλα "Code" και το runtime που έχετε επιλέξει.
Με αυτή τη συνάρτηση `call_llm`, μπορούμε τώρα να πάρουμε ένα prompt και ένα system prompt, και η συνάρτηση επιστρέφει το αποτέλεσμα.
Με αυτή τη συνάρτηση `call_llm` μπορούμε τώρα να πάρουμε ένα prompt και ένα system prompt και η συνάρτηση επιστρέφει το αποτέλεσμα.
### Προσαρμογή του Βοηθού AI
Αν θέλετε να προσαρμόσετε τον βοηθό AI, μπορείτε να καθορίσετε πώς θέλετε να συμπεριφέρεται, γεμίζοντας το system prompt όπως παρακάτω:
Αν θέλετε να προσαρμόσετε τον Βοηθό AI, μπορείτε να καθορίσετε πώς θέλετε να συμπεριφέρεται, γεμίζοντας το system prompt όπως παρακάτω:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Έκθεση μέσω Web API
Τέλεια, ολοκληρώσαμε το μέρος της AI. Ας δούμε πώς μπορούμε να το ενσωματώσουμε σε ένα Web API. Για το Web API, επιλέγουμε να χρησιμοποιήσουμε Flask, αλλά οποιοδήποτε web framework θα ήταν καλό. Ας δούμε τον κώδικα:
Τέλεια, έχουμε ολοκληρώσει το μέρος της AI, ας δούμε πώς μπορούμε να το ενσωματώσουμε σε ένα Web API. Για το Web API, επιλέγουμε να χρησιμοποιήσουμε Flask, αλλά οποιοδήποτε web framework θα ήταν καλό. Ας δούμε τον κώδικα:
### Χρήση Python
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και μια "/chat". Η δεύτερη προορίζεται για χρήση από το frontend μας γιανα στέλνει ερωτήσεις.
Εδώ, δημιουργούμε ένα API με Flask και ορίζουμε μια προεπιλεγμένη διαδρομή "/" και "/chat". Η τελευταία προορίζεται να χρησιμοποιηθεί από το frontend μας γιανα στείλει ερωτήσεις.
Για να ενσωματώσουμε το *llm.py*, πρέπει να κάνουμε τα εξής:
Για να ενσωματώσουμε το *llm.py*, εδώ είναι τι πρέπει να κάνουμε:
- Εισαγωγή της συνάρτησης `call_llm`:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
Εδώ αναλύουμε το εισερχόμενο αίτημα γιανα ανακτήσουμε την ιδιότητα `message` από το σώμα του JSON. Στη συνέχεια, καλούμε το LLM με την εξής κλήση:
Εδώ αναλύουμε το εισερχόμενο αίτημα γιανα ανακτήσουμε την ιδιότητα `message` από το JSON σώμα. Στη συνέχεια, καλούμε το LLM με αυτή την κλήση:
```python
response = call_llm(message, "You are a helpful assistant")
@ -182,7 +176,7 @@ if __name__ == "__main__":
## Ρύθμιση Cors
Πρέπει να αναφέρουμε ότι ρυθμίσαμε κάτι σαν το CORS (cross-origin resource sharing). Αυτό σημαίνει ότι, επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend.
Πρέπει να αναφέρουμε ότι ρυθμίζουμε κάτι σαν CORS, cross-origin resource sharing. Αυτό σημαίνει ότι επειδή το backend και το frontend μας θα τρέχουν σε διαφορετικές θύρες, πρέπει να επιτρέψουμε στο frontend να καλεί το backend.
### Χρήση Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" (όλες τις προελεύσεις), κάτι που είναι λίγο ανασφαλές. Θα πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή.
Αυτή τη στιγμή έχει ρυθμιστεί να επιτρέπει "*" που είναι όλες οι προελεύσεις και αυτό είναι λίγο ανασφαλές. Πρέπει να το περιορίσουμε όταν πάμε σε παραγωγή.
## Εκτέλεση του έργου σας
@ -203,7 +197,7 @@ CORS(app) # * example.com
### Χρήση Python
Εντάξει, έχουμε τα *llm.py* και *api.py*. Πώς μπορούμε να τα κάνουμε να λειτουργήσουν με ένα backend; Υπάρχουν δύο πράγματα που πρέπει να κάνουμε:
Εντάξει, έχουμε *llm.py* και *api.py*, πώς μπορούμε να τα κάνουμε να λειτουργήσουν με ένα backend; Λοιπόν, υπάρχουν δύο πράγματα που πρέπει να κάνουμε:
- Εγκατάσταση εξαρτήσεων:
@ -215,17 +209,17 @@ CORS(app) # * example.com
pip install openai flask flask-cors openai
```
- Εκκίνηση του API:
- Εκκίνηση του API
```sh
python api.py
```
Αν βρίσκεστε σε Codespaces, πρέπει να μεταβείτε στις Θύρες στο κάτω μέρος του επεξεργαστή, να κάνετε δεξί κλικ και να επιλέξετε "Port Visibility" και να επιλέξετε "Public".
Αν βρίσκεστε σε Codespaces, πρέπει να μεταβείτε στις Θύρες στο κάτω μέρος του επεξεργαστή, να κάνετε δεξί κλικ πάνω τους και να επιλέξετε "Port Visibility" και να επιλέξετε "Public".
### Εργασία σε ένα frontend
### Εργασία σε frontend
Τώρα που έχουμε ένα API σε λειτουργία, ας δημιουργήσουμε ένα frontend για αυτό. Ένα ελάχιστο frontend που θα βελτιώσουμε σταδιακά. Στον φάκελο *frontend*, δημιουργήστε τα εξής:
Τώρα που έχουμε ένα API που λειτουργεί, ας δημιουργήσουμε ένα frontend για αυτό. Ένα ελάχιστο frontend που θα βελτιώσουμε βήμα προς βήμα. Σε έναν φάκελο *frontend*, δημιουργήστε τα εξής:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
Το παραπάνω είναι το απολύτως ελάχιστο που χρειάζεστε γιανα υποστηρίξετε ένα παράθυρο συνομιλίας, καθώς αποτελείται από ένα textarea όπου θα εμφανίζονται τα μηνύματα, ένα input γιανα πληκτρολογείτε το μήνυμα και ένα κουμπί γιανα στέλνετε το μήνυμά σας στο backend. Ας δούμε τον JavaScript κώδικα στο *app.js*.
Αυτό είναι το απόλυτο ελάχιστο που χρειάζεστε γιανα υποστηρίξετε ένα παράθυρο συνομιλίας, καθώς αποτελείται από ένα textarea όπου θα εμφανίζονται τα μηνύματα, ένα input γιανα πληκτρολογείτε το μήνυμα και ένα κουμπί γιανα στέλνετε το μήνυμα στο backend. Ας δούμε τον JavaScript κώδικα στο *app.js*
**app.js**
@ -310,14 +304,14 @@ styles.css
})();
```
Ας δούμε τον κώδικα ανά ενότητα:
Ας δούμε τον κώδικα ανά τμήμα:
- 1) Εδώ παίρνουμε αναφορές σε όλα τα στοιχεία που θα χρησιμοποιήσουμε αργότερα στον κώδικα.
- 2) Σε αυτή την ενότητα, δημιουργούμε μια συνάρτηση που χρησιμοποιεί τη μέθοδο `fetch`γιανα καλεί το backend μας.
- 3) Η`appendMessage` βοηθά στην προσθήκη απαντήσεων καθώς και των μηνυμάτων που πληκτρολογεί ο χρήστης.
- 4) Εδώ ακούμε το γεγονός υποβολής και διαβάζουμε το πεδίο εισόδου, τοποθετούμε το μήνυμα του χρήστη στο textarea, καλούμε το API και εμφανίζουμε την απάντηση στο textarea.
- 1) Εδώ παίρνουμε μια αναφορά σε όλα τα στοιχεία που θα αναφερόμαστε αργότερα στον κώδικα.
- 2) Σε αυτό το τμήμα, δημιουργούμε μια συνάρτηση που χρησιμοποιεί τη μέθοδο `fetch`γιανα καλεί το backend μας.
- 3) Η`appendMessage` βοηθά να προσθέσετε απαντήσεις καθώς και ό,τι πληκτρολογείτε ως χρήστης.
- 4) Εδώ ακούμε το συμβάν υποβολής και τελικά διαβάζουμε το πεδίο εισόδου, τοποθετούμε το μήνυμα του χρήστη στο textarea, καλούμε το API και εμφανίζουμε την απάντηση στο textarea.
Ας δούμε το styling στη συνέχεια. Εδώ μπορείτε να γίνετε δημιουργικοί και να το κάνετε να μοιάζει όπως θέλετε, αλλά εδώ είναι μερικές προτάσεις:
Ας δούμε το styling στη συνέχεια, εδώ μπορείτε να γίνετε πολύ δημιουργικοί και να το κάνετε να φαίνεται όπως θέλετε, αλλά εδώ είναι μερικές προτάσεις:
**styles.css**
@ -342,9 +336,9 @@ styles.css
### Αλλαγή Base Url
Υπάρχει κάτι που δεν ορίσαμε εδώ και αυτό είναι το `BASE_URL`. Αυτό δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ορίσετε:
Υπήρχε κάτι εδώ που δεν ρυθμίσαμε και αυτό ήταν το `BASE_URL`, το οποίο δεν είναι γνωστό μέχρι να ξεκινήσει το backend σας. Για να το ρυθμίσετε:
- Αν εκτελείτε το API τοπικά, θα πρέπει ναοριστεί σε κάτι σαν`http://localhost:5000`.
- Αν εκτελείτε το API τοπικά, θα πρέπει ναρυθμιστεί σε κάτι σαν`http://localhost:5000`.
- Αν εκτελείται σε Codespaces, θα πρέπει να μοιάζει με "[name]app.github.dev".
## Εργασία
@ -361,15 +355,15 @@ project/
...
```
Αντιγράψτε το περιεχόμενο από ό,τι σας δόθηκε παραπάνω, αλλά προσαρμόστε το όπως θέλετε.
Αντιγράψτε το περιεχόμενο από ό,τι σας δόθηκε παραπάνω, αλλά μη διστάσετε να το προσαρμόσετε όπως θέλετε.
## Λύση
[Λύση](./solution/README.md)
[Solution](./solution/README.md)
## Bonus
Δοκιμάστε να αλλάξετε την προσωπικότητα του βοηθού AI.
Δοκιμάστε να αλλάξετε την προσωπικότητα του Βοηθού AI.
### Για Python
@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard")
### Frontend
Αλλάξτε επίσης το CSS και το κείμενο όπως θέλετε, κάνοντας αλλαγές στα*index.html* και *styles.css*.
Αλλάξτε επίσης το CSS και το κείμενο όπως θέλετε, κάνοντας αλλαγές στο*index.html* και *styles.css*.
## Περίληψη
Τέλεια, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε αυτό χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript.
Τέλεια, μάθατε από την αρχή πώς να δημιουργήσετε έναν προσωπικό βοηθό χρησιμοποιώντας AI. Το κάναμε χρησιμοποιώντας τα GitHub Models, ένα backend σε Python και ένα frontend σε HTML, CSS και JavaScript.
## Ρύθμιση με Codespaces
@ -394,7 +388,7 @@ call_llm(message, "You are Captain Picard")
- Μόλις βρεθείτε στο αποθετήριό σας, δημιουργήστε ένα Codespace:
- Μόλις βρεθείτε στο repo σας, δημιουργήστε ένα Codespace:
Building Chat assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started.
To provide some context, building Chat Assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started.
## Connecting to generative AI
## Connecting to Generative AI
For the backend, we're using GitHub Models. It's a fantastic service that lets you use AI for free. Visit its playground and grab the code for your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
For the backend, we're using GitHub Models. It's a fantastic service that allows you to use AI for free. Visit its playground and grab the code corresponding to your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"width="600">
</div>
As mentioned, select the "Code" tab and choose your runtime.
As mentioned, select the "Code" tab and your preferred runtime.
With the`call_llm` function, we can now pass a prompt and a system prompt, and the function will return the result.
With this`call_llm` function, we can now pass a prompt and a system prompt, and the function will return the result.
### Customize AI Assistant
### Customizing the AI Assistant
To customize the AI assistant, you can define its behavior by setting the system prompt like this:
To customize the AI assistant, you can define its behavior by modifying the system prompt like this:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Expose it via a Web API
## Exposing It via a Web API
Now that the AI part is done, let's integrate it into a Web API. For the Web API, we'll use Flask, but any web framework will work. Here's the code:
Great, we've completed the AI part. Now, let's see how to integrate it into a Web API. For the Web API, we'll use Flask, but any web framework should work. Here's the code:
### Using Python
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
In this code, we create a Flask API and define two routes: "/" and "/chat". The "/chat" route is intended for the frontend to send questions to the backend.
In this code, we create a Flask API and define two routes: the default route "/" and "/chat". The "/chat" route is intended for the frontend to send questions to the backend.
To integrate *llm.py*, follow these steps:
To integrate *llm.py*, here's what we need to do:
- Import the `call_llm` function:
@ -167,7 +161,7 @@ To integrate *llm.py*, follow these steps:
})
```
Here, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM using this function:
In this step, we parse the incoming request to extract the `message` property from the JSON body. Then, we call the LLM with this:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ To integrate *llm.py*, follow these steps:
})
```
That's it! The integration is complete.
Great, now we've completed the necessary steps.
## Configure Cors
## Configuring CORS
It's important to set up CORS (Cross-Origin Resource Sharing). Since the backend and frontend will run on different ports, we need to allow the frontend to communicate with the backend.
It's important to set up CORS (Cross-Origin Resource Sharing). Since our backend and frontend will run on different ports, we need to allow the frontend to communicate with the backend.
### Using Python
In *api.py*, there's a piece of code that configures CORS:
Here's a piece of code in *api.py* that sets this up:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Currently, it's set to allow all origins ("*"), which is not secure. Make sure to restrict it when deploying to production.
Currently, it's configured to allow all origins ("*"), which is not secure. This should be restricted when moving to production.
## Run your project
## Running Your Project
To run your project, start the backend first, followed by the frontend.
### Using Python
With *llm.py* and *api.py* ready, here's how to get the backend running:
Now that we have *llm.py* and *api.py*, how do we make the backend work? There are two steps:
- Install dependencies:
@ -221,11 +215,11 @@ With *llm.py* and *api.py* ready, here's how to get the backend running:
python api.py
```
If you're using Codespaces, go to the Ports section at the bottom of the editor, right-click on the port, select "Port Visibility," and choose "Public."
If you're using Codespaces, go to the Ports section at the bottom of the editor, right-click on it, select "Port Visibility," and choose "Public."
### Work on a frontend
### Working on the Frontend
Now that the API is running, let's create a basic frontend that we'll improve step by step. In a *frontend* folder, create the following:
Now that the API is up and running, let's create a frontend for it. We'll start with a basic frontend and improve it step by step. In a *frontend* folder, create the following:
```text
backend/
@ -235,7 +229,7 @@ app.js
styles.css
```
Start with **index.html**:
Let's begin with **index.html**:
```html
<html>
@ -253,7 +247,7 @@ Start with **index.html**:
</html>
```
This is the bare minimum needed for a chat window. It includes a textarea for displaying messages, an input field for typing messages, and a button for sending messages to the backend. Next, let's look at the JavaScript in *app.js*.
The above code is the bare minimum needed to support a chat window. It includes a textarea for displaying messages, an input field for typing messages, and a button to send messages to the backend. Next, let's look at the JavaScript in *app.js*.
**app.js**
@ -313,11 +307,11 @@ This is the bare minimum needed for a chat window. It includes a textarea for di
Here's a breakdown of the code:
1. We get references to all the elements we'll use later in the code.
2. This section defines a function that uses the built-in `fetch` method to call the backend.
3. The `appendMessage` function adds both user messages and assistant responses to the textarea.
2. This section defines a function that uses the built-in `fetch` method to call our backend.
3. The `appendMessage` function adds both the user's messages and the assistant's responses to the textarea.
4. We listen for the submit event, read the input field, display the user's message in the textarea, call the API, and render the response in the textarea.
Now, let's move on to styling. You can customize the design as much as you like, but here are some suggestions:
Next, let's look at styling. You can get creative here, but here are some suggestions:
**styles.css**
@ -340,16 +334,16 @@ Now, let's move on to styling. You can customize the design as much as you like,
These three classes style messages differently depending on whether they come from the assistant or the user. For inspiration, check out the `solution/frontend/styles.css` folder.
### Change Base URL
### Changing the Base URL
One thing we haven't set yet is the `BASE_URL`. This depends on where your backend is running. To set it:
- If you're running the API locally, use something like `http://localhost:5000`.
- If you're using Codespaces, it will look like "[name]app.github.dev".
- If you're running the API locally, it should be something like `http://localhost:5000`.
- If you're using Codespaces, it will look something like "[name]app.github.dev".
## Assignment
Create your own folder *project* with the following structure:
Create your own folder named *project* with the following structure:
```text
project/
@ -373,7 +367,7 @@ Try changing the personality of the AI assistant.
### For Python
In *api.py*, when calling `call_llm`, you can modify the second argument to define the assistant's personality. For example:
When calling `call_llm` in *api.py*, you can modify the second argument to customize the assistant's behavior. For example:
```python
call_llm(message, "You are Captain Picard")
@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard")
### Frontend
Customize the CSS and text to your liking by editing *index.html* and *styles.css*.
You can also customize the CSS and text to your liking by editing *index.html* and *styles.css*.
## Summary
Congratulations! You've learned how to create a personal assistant using AI from scratch. We used GitHub Models for the backend, Python for the API, and HTML, CSS, and JavaScript for the frontend.
Congratulations! You've learned how to create a personal assistant using AI from scratch. We accomplished this using GitHub Models, a Python backend, and a frontend built with HTML, CSS, and JavaScript.
## Set up with Codespaces
## Setting Up with Codespaces
- Navigate to: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners).
- Create a repository from the template (make sure you're logged into GitHub) using the button in the top-right corner:
- Create a new repository from the template (make sure you're logged into GitHub) by clicking the button in the top-right corner:
- Once your repository is ready, create a Codespace:
- Once you're in your repository, create a Codespace:
@ -13,25 +13,19 @@ Este proyecto de chat muestra cómo construir un Asistente de Chat utilizando Gi
Así es como se ve el proyecto terminado:
<div>
<imgsrc="./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 cómo integrar IA generativa en una aplicación web a lo largo de esta lección. ¡Comencemos!
## Conectando con IA generativa
## Conexión con IA generativa
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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Como mencionamos, selecciona la pestaña "Code" y tu entorno de ejecución preferido.
<div>
<imgsrc="./assets/playground-choice.png"alt="Elección en el playground"with="600">
</div>
Con esta función `call_llm` ahora podemos tomar un prompt y un prompt del sistema, y la función termina devolviendo el resultado.
Con esta función `call_llm` ahora podemos tomar un prompt y un prompt del sistema, y la función devuelve el resultado.
### Personalizar el Asistente de IA
@ -182,7 +176,7 @@ Genial, ahora hemos hecho lo que necesitamos.
## 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, el 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.
### Usando Python
@ -221,7 +215,7 @@ Bien, tenemos *llm.py* y *api.py*. ¿Cómo podemos hacer que esto funcione con u
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 elegir "Public".
Si estás en Codespaces, necesitas ir a Puertos en la parte inferior del editor, hacer clic derecho sobre él, seleccionar "Port Visibility" y elegir "Public".
### Trabajar en un frontend
@ -253,7 +247,7 @@ Comencemos con **index.html**:
</html>
```
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*
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 enviar tu mensaje al backend. Veamos el JavaScript a continuación en *app.js*.
**app.js**
@ -310,14 +304,14 @@ Lo anterior es lo mínimo absoluto que necesitas para soportar una ventana de ch
})();
```
Analicemos el código por sección:
Repasemos el código por sección:
- 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 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í es donde puedes ser realmente creativo y hacer que se vea como quieras, pero aquí hay algunas sugerencias:
Veamos el estilo a continuación. Aquí puedes ser realmente creativo y hacer que se vea como quieras, pero aquí hay algunas sugerencias:
**styles.css**
@ -389,8 +383,8 @@ Genial, has aprendido desde cero cómo crear un asistente personal utilizando IA
## Configuración con Codespaces
- 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:
- 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:
ساخت دستیارهای چت با استفاده از هوش مصنوعی مولد یک روش عالی برای شروع یادگیری درباره هوش مصنوعی است. در این درس یاد میگیرید که چگونه هوش مصنوعی مولد را در یک برنامه وب ادغام کنید. بیایید شروع کنیم.
کمی زمینه: ساخت دستیارهای چت با استفاده از هوش مصنوعی مولد یک روش عالی برای شروع یادگیری درباره هوش مصنوعی است. در این درس یاد خواهید گرفت که چگونه هوش مصنوعی مولد را در یک برنامه وب ادغام کنید. بیایید شروع کنیم.
## اتصال به هوش مصنوعی مولد
برای بخش بکاند، ما از مدلهای 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) به نظر میرسد.
با این تابع `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")
```
## ارائه از طریق یک وب API
## ارائه از طریق یک API وب
عالی است، ما بخش هوش مصنوعی را انجام دادیم، حالا ببینیم چگونه میتوانیم آن را در یک وب API ادغام کنیم. برای وب API، ما Flask را انتخاب میکنیم، اما هر فریمورک وب دیگری نیز مناسب است. بیایید کد آن را ببینیم:
عالی، بخش هوش مصنوعی را انجام دادیم، حالا ببینیم چگونه میتوانیم آن را در یک API وب ادغام کنیم. برای API وب، ما Flask را انتخاب میکنیم، اما هر فریمورک وب دیگری نیز مناسب است. بیایید کد آن را ببینیم:
### استفاده از پایتون
### استفاده از Python
```python
# api.py
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
در اینجا، ما یک API با Flask ایجاد میکنیم و یک مسیر پیشفرض "/" و "/chat" تعریف میکنیم. مسیر دوم برای استفاده فرانتاند ما برای ارسال سوالات به آن طراحی شده است.
اینجا، ما یک API Flask ایجاد میکنیم و یک مسیر پیشفرض "/" و "/chat" تعریف میکنیم. مسیر دوم برای استفاده توسط فرانتاند ما برای ارسال سوالات به آن طراحی شده است.
برای ادغام *llm.py*باید این کارها را انجام دهیم:
برای ادغام *llm.py*این کاری است که باید انجام دهیم:
- تابع `call_llm` را وارد کنید:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
در اینجا، درخواست ورودی را تجزیه میکنیم تا ویژگی `message` را از بدنه JSON دریافت کنیم. سپس با این فراخوانی، LLM را صدا میزنیم:
در اینجا درخواست ورودی را تجزیه میکنیم تا ویژگی `message` را از بدنه JSON دریافت کنیم. سپس با این فراخوانی LLM را فراخوانی میکنیم:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
عالی است، حالا کارهایی که لازم بود انجام دادیم.
عالی، حالا کاری که لازم بود انجام دادیم.
## تنظیم Cors
باید اشاره کنیم که چیزی مانند CORS، اشتراک منابع بین مبداها، تنظیم شده است. این به این معنی است که چون بکاند و فرانتاند ما روی پورتهای مختلف اجرا میشوند، باید اجازه دهیم فرانتاند به بکاند دسترسی داشته باشد.
باید اشاره کنیم که چیزی مانند CORS، اشتراک منابع بین مبدا، تنظیم کردیم. این به این معناست که چون بکاند و فرانتاند ما روی پورتهای مختلف اجرا میشوند، باید اجازه دهیم فرانتاند به بکاند دسترسی پیدا کند.
### استفاده از پایتون
### استفاده از Python
یک قطعه کد در *api.py* وجود دارد که این کار را انجام میدهد:
یک قطعه کد در *api.py* وجود دارد که این را تنظیم میکند:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
در حال حاضر، این تنظیم شده است تا "*" را که به معنای همه مبداها است، مجاز کند و این کمی ناامن است. باید آن را زمانی که به تولید میرویم محدود کنیم.
در حال حاضر تنظیم شده است تا "*" را که همه مبداها هستند، اجازه دهد و این کمی ناامن است. باید آن را زمانی که به تولید میرویم محدود کنیم.
## اجرای پروژه
برای اجرای پروژه، ابتدا باید بکاند و سپس فرانتاند خود را راهاندازی کنید.
### استفاده از پایتون
### استفاده از Python
خب، ما *llm.py* و *api.py*را داریم، چگونه میتوانیم این را با بکاند کار کنیم؟ دو کار باید انجام دهیم:
خب، ما *llm.py* و *api.py* داریم، چگونه میتوانیم این را با یک بکاند کار کنیم؟ خب، دو کار باید انجام دهیم:
- نصب وابستگیها:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
اگر در Codespaces هستید، باید به بخش Ports در پایین ویرایشگر بروید، روی آن کلیک راست کنید و "Port Visibility" را انتخاب کنید و "Public" را انتخاب کنید.
اگر در Codespaces هستید، باید به بخش Ports در پایین ویرایشگر بروید، روی آن کلیک راست کنید و گزینه "Port Visibility" را انتخاب کنید و "Public" را انتخاب کنید.
### کار روی فرانتاند
حالا که یک API در حال اجرا داریم، بیایید یک فرانتاند برای آن ایجاد کنیم. یک فرانتاند حداقلی که به تدریج آن را بهبود خواهیم داد. در یک پوشه *frontend*، موارد زیر را ایجاد کنید:
حالا که یک API در حال اجرا داریم، بیایید یک فرانتاند برای آن ایجاد کنیم. یک فرانتاند حداقلی که به تدریج آن را بهبود خواهیم داد. در یک پوشه *frontend* موارد زیر را ایجاد کنید:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
این حداقل چیزی است که برای پشتیبانی از یک پنجره چت نیاز دارید، زیرا شامل یک textarea برای نمایش پیامها، یک ورودی برای تایپ پیام و یک دکمه برای ارسال پیام به بکاند است. حالا به جاوااسکریپت در *app.js* نگاه کنیم.
این حداقل چیزی است که برای پشتیبانی از یک پنجره چت نیاز دارید، زیرا شامل یک textarea برای نمایش پیامها، یک ورودی برای تایپ پیام و یک دکمه برای ارسال پیام به بکاند است. بیایید به JavaScript در *app.js* نگاه کنیم.
**app.js**
@ -312,12 +306,12 @@ styles.css
بیایید کد را بخش به بخش بررسی کنیم:
- 1) در اینجا، ما به تمام عناصر خود که بعداً در کد به آنها ارجاع خواهیم داد، دسترسی میگیریم.
- 1) در اینجا ما به همه عناصر خود که بعداً در کد به آنها ارجاع خواهیم داد، دسترسی پیدا میکنیم.
- 2) در این بخش، یک تابع ایجاد میکنیم که از متد داخلی `fetch` برای فراخوانی بکاند استفاده میکند.
- 3) `appendMessage`به اضافه کردن پاسخها و همچنین پیامهایی که شما به عنوان کاربر تایپ میکنید کمک میکند.
- 4) در اینجا، به رویداد ارسال گوش میدهیم و در نهایت فیلد ورودی را میخوانیم، پیام کاربر را در textarea قرار میدهیم، API را فراخوانی میکنیم و پاسخ را در textarea نمایش میدهیم.
- 3) `appendMessage`کمک میکند تا پاسخها و همچنین پیامهایی که شما به عنوان کاربر تایپ میکنید، اضافه شوند.
- 4) در اینجا به رویداد submit گوش میدهیم و در نهایت فیلد ورودی را میخوانیم، پیام کاربر را در textarea قرار میدهیم، API را فراخوانی میکنیم و پاسخ را در textarea نمایش میدهیم.
حالا به استایلها نگاه کنیم، اینجا جایی است که میتوانید خلاقیت به خرج دهید و ظاهر آن را به دلخواه خود تغییر دهید، اما در اینجا چند پیشنهاد داریم:
بیایید به استایلدهی نگاه کنیم، اینجا جایی است که میتوانید واقعاً خلاق باشید و آن را به دلخواه خود طراحی کنید، اما اینجا چند پیشنهاد داریم:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
با این سه کلاس، پیامها را بسته به اینکه از طرف دستیار یا شما به عنوان کاربر هستند، متفاوت استایل میدهید. اگر میخواهید الهام بگیرید، به پوشه `solution/frontend/styles.css` نگاهی بیندازید.
با این سه کلاس، پیامها را بسته به اینکه از دستیار یا شما به عنوان کاربر آمدهاند، متفاوت طراحی خواهید کرد. اگر میخواهید الهام بگیرید، به پوشه `solution/frontend/styles.css` نگاهی بیندازید.
### تغییر Base Url
یک مورد اینجا تنظیم نشده بود و آن `BASE_URL` بود، این مقدار تا زمانی که بکاند شما راهاندازی نشود مشخص نیست. برای تنظیم آن:
یک مورد اینجا تنظیم نشده بود و آن `BASE_URL` بود، این تا زمانی که بکاند شما راهاندازی شود مشخص نیست. برای تنظیم آن:
- اگر API را به صورت محلی اجرا میکنید، باید چیزی شبیه به `http://localhost:5000` تنظیم شود.
- اگر در Codespaces اجرا میشود، باید چیزی شبیه به "[name]app.github.dev" باشد.
## تمرین
## تکلیف
یک پوشه *project* با محتوای زیر ایجاد کنید:
پوشهای به نام *project* ایجاد کنید با محتوایی مشابه زیر:
```text
project/
@ -361,17 +355,17 @@ project/
...
```
محتوای دستورالعملهای بالا را کپی کنید، اما در صورت تمایل آن را به دلخواه خود سفارشی کنید.
محتوای دستورالعملهای بالا را کپی کنید اما آزادانه آن را به دلخواه خود شخصیسازی کنید.
## راهحل
[راهحل](./solution/README.md)
## نکته اضافی
## امتیاز اضافی
شخصیت دستیار هوش مصنوعی را تغییر دهید.
سعی کنید شخصیت دستیار هوش مصنوعی را تغییر دهید.
### برای پایتون
### برای Python
وقتی `call_llm` را در *api.py* فراخوانی میکنید، میتوانید آرگومان دوم را به چیزی که میخواهید تغییر دهید، برای مثال:
@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard")
### فرانتاند
همچنین CSS و متن را به دلخواه خود تغییر دهید، بنابراین تغییراتی در *index.html* و *styles.css* ایجاد کنید.
همچنین CSS و متن را به دلخواه خود تغییر دهید، بنابراین تغییرات را در *index.html* و *styles.css* انجام دهید.
## خلاصه
عالی است، شما از ابتدا یاد گرفتید که چگونه یک دستیار شخصی با استفاده از هوش مصنوعی ایجاد کنید. ما این کار را با استفاده از مدلهای GitHub، یک بکاند در پایتون و یک فرانتاند در HTML، CSS و جاوااسکریپت انجام دادیم.
عالی، شما از ابتدا یاد گرفتید که چگونه یک دستیار شخصی با استفاده از هوش مصنوعی ایجاد کنید. این کار را با استفاده از مدلهای GitHub، یک بکاند در Python و یک فرانتاند در HTML، CSS و JavaScript انجام دادیم.
## تنظیم با Codespaces
- به اینجا بروید: [مخزن Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- از یک قالب ایجاد کنید (مطمئن شوید که در GitHub وارد شدهاید) در گوشه بالا سمت راست:
- از یک قالب ایجاد کنید (مطمئن شوید که وارد GitHub شدهاید) در گوشه بالا سمت راست:
@ -403,4 +397,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) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه حرفهای انسانی استفاده کنید. ما مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
Hieman taustaa: Chat-avustajien rakentaminen generatiivisen tekoälyn avulla on erinomainen tapa aloittaa tekoälyn opiskelu. Tässä oppitunnissa opit integroimaan generatiivisen tekoälyn verkkosovellukseen. Aloitetaan!
Hieman taustaa: Chat-assistenttien rakentaminen generatiivisen tekoälyn avulla on loistava tapa aloittaa tekoälyyn tutustuminen. Tässä oppitunnissa opit integroimaan generatiivisen tekoälyn verkkosovellukseen. Aloitetaan.
## Yhteys generatiiviseen tekoälyyn
Taustajärjestelmässä käytämme GitHub-malleja. Se on loistava palvelu, joka mahdollistaa tekoälyn käytön ilmaiseksi. Mene sen kokeiluympäristöön ja kopioi koodi, joka vastaa valitsemaasi taustajärjestelmän kieltä. Tältä se näyttää [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)-sivustolla.
Taustajärjestelmässä käytämme GitHub Models -malleja. Tämä on loistava palvelu, joka mahdollistaa tekoälyn käytön ilmaiseksi. Mene sen kokeiluympäristöön ja kopioi koodi, joka vastaa valitsemaasi taustakielen ympäristöä. Näin se näyttää [GitHub Models Playgroundissa](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Kuten mainittiin, valitse "Code"-välilehti ja haluamasi ajonaikainen ympäristö.
Kuten mainitsimme, valitse "Code"-välilehti ja haluamasi ajonaikainen ympäristö.
Tällä `call_llm`-funktiolla voimme nyt ottaa kehotteen ja järjestelmäkehotteen, ja funktio palauttaa tuloksen.
Tällä `call_llm`-funktiolla voimme nyt antaa kehotteen ja järjestelmäkehotteen, ja funktio palauttaa tuloksen.
### AI-avustajan muokkaaminen
### Mukauta AI-assistenttia
Jos haluat muokata AI-avustajaa, voit määrittää sen käyttäytymisen täyttämällä järjestelmäkehotteen seuraavasti:
Jos haluat mukauttaa AI-assistenttia, voit määrittää sen käyttäytymisen täyttämällä järjestelmäkehotteen seuraavasti:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Julkaisu Web API:n kautta
## Julkaise se Web API:n kautta
Hienoa, tekoälyosa on valmis. Katsotaan, kuinka voimme integroida sen Web API:iin. Web API:lle valitsemme Flaskin, mutta mikä tahansa verkkokehys käy. Katsotaan koodi:
Hienoa, AI-osuus on valmis. Katsotaanpa, kuinka voimme integroida sen Web API:in. Web API:ksi valitsemme Flaskin, mutta mikä tahansa verkkokehys käy. Tässä on koodi:
### Pythonin käyttö
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Tässä luomme Flask-API:n ja määrittelemme oletusreitin "/" ja "/chat". Jälkimmäistä käytetään frontendissä kysymysten välittämiseen.
Tässä luomme Flask-API:n ja määrittelemme oletusreitin "/" ja "/chat". Jälkimmäistä käytetään frontendin kautta kysymysten välittämiseen.
Integroitaaksesi *llm.py*:n, tee seuraavat:
Integroitaessa *llm.py*-tiedostoa meidän täytyy tehdä seuraavat asiat:
- Tuo `call_llm`-funktio:
@ -167,7 +161,7 @@ Integroitaaksesi *llm.py*:n, tee seuraavat:
})
```
Tässä jäsennämme saapuvan pyynnön saadaksemme `message`-ominaisuuden JSON-runko-osasta. Sen jälkeen kutsumme LLM:ää tällä tavalla:
Tässä jäsennämme saapuvan pyynnön saadaksemme `message`-ominaisuuden JSON-rungosta. Sen jälkeen kutsumme LLM:ää seuraavasti:
```python
response = call_llm(message, "You are a helpful assistant")
@ -180,13 +174,13 @@ Integroitaaksesi *llm.py*:n, tee seuraavat:
Hienoa, nyt olemme tehneet tarvittavat toimenpiteet.
## Corsin konfigurointi
## Määritä Cors
On syytä mainita, että asetamme jotain kuten CORS (Cross-Origin Resource Sharing). Tämä tarkoittaa, että koska taustajärjestelmä ja käyttöliittymä toimivat eri porteissa, meidän täytyy sallia käyttöliittymän kutsut taustajärjestelmään.
On tärkeää huomioida, että meidän täytyy määrittää CORS (Cross-Origin Resource Sharing). Tämä johtuu siitä, että taustajärjestelmä ja käyttöliittymä toimivat eri porteissa, joten meidän täytyy sallia käyttöliittymän kutsut taustajärjestelmään.
### Pythonin käyttö
*api.py*-tiedostossa on koodinpätkä, joka asettaa tämän:
*api.py*-tiedostossa on koodinpätkä, joka hoitaa tämän:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Tällä hetkellä se on asetettu sallimaan "*", eli kaikki alkuperät, mikä on hieman turvatonta. Tämä tulisi rajoittaa, kun siirrytään tuotantoon.
Tällä hetkellä se on asetettu sallimaan kaikki alkuperät ("*"), mikä on hieman turvatonta. Tämä tulisi rajoittaa tuotantoympäristössä.
## Projektin käynnistäminen
## Aja projektisi
Projektin käynnistämiseksi sinun täytyy ensin käynnistää taustajärjestelmä ja sitten käyttöliittymä.
Projektin ajamiseksi sinun täytyy ensin käynnistää taustajärjestelmä ja sen jälkeen käyttöliittymä.
### Pythonin käyttö
Ok, meillä on *llm.py* ja *api.py*. Kuinka saamme tämän toimimaan taustajärjestelmän kanssa? Tarvitsemme kaksi asiaa:
Meillä on nyt *llm.py* ja *api.py*. Kuinka saamme nämä toimimaan taustajärjestelmän kanssa? Meidän täytyy tehdä kaksi asiaa:
- Asenna riippuvuudet:
@ -215,17 +209,17 @@ Ok, meillä on *llm.py* ja *api.py*. Kuinka saamme tämän toimimaan taustajärj
pip install openai flask flask-cors openai
```
- Käynnistä API
- Käynnistä API:
```sh
python api.py
```
Jos käytät Codespacesia, sinun täytyy mennä editorin alaosassa Ports-osioon, napsauttaa sitä oikealla ja valita "Port Visibility" ja valita "Public".
Jos käytät Codespacesia, mene editorin alaosassa Ports-osioon, napsauta sitä hiiren oikealla painikkeella ja valitse "Port Visibility" ja valitse "Public".
### Työskentely käyttöliittymän parissa
### Työskentele käyttöliittymän parissa
Nyt kun meillä on API käynnissä, luodaan käyttöliittymä. Aloitetaan yksinkertaisimmalla käyttöliittymällä, jota parannamme vaiheittain. Luo *frontend*-kansioon seuraavat:
Nyt kun meillä on API käynnissä, luodaan käyttöliittymä. Aloitetaan yksinkertaisimmasta mahdollisesta käyttöliittymästä, jota parannamme vaiheittain. Luo *frontend*-kansioon seuraavat tiedostot:
Tämä on ehdoton minimi, joka tarvitaan chat-ikkunan tukemiseen. Se sisältää tekstialueen, jossa viestit näytetään, syöttökentän viestin kirjoittamista varten ja painikkeen viestin lähettämiseen taustajärjestelmään. Katsotaan seuraavaksi JavaScriptiä tiedostossa *app.js*.
Yllä oleva on minimivaatimus chat-ikkunan tukemiseksi. Se sisältää tekstialueen viestien näyttämiseen, syötekentän viestin kirjoittamista varten ja painikkeen viestin lähettämiseen taustajärjestelmään. Katsotaan seuraavaksi JavaScriptiä tiedostossa *app.js*.
**app.js**
@ -310,14 +304,14 @@ Tämä on ehdoton minimi, joka tarvitaan chat-ikkunan tukemiseen. Se sisältää
})();
```
Käydään koodi läpi osittain:
Käydään koodi läpi osioittain:
- 1) Tässä haemme viittaukset kaikkiin elementteihin, joita käytämme myöhemmin koodissa.
- 2) Tässä osiossa luomme funktion, joka käyttää sisäänrakennettua `fetch`-metodia taustajärjestelmän kutsumiseen.
- 3) `appendMessage` auttaa lisäämään vastaukset sekä käyttäjän kirjoittamat viestit.
- 4) Tässä kuuntelemme submit-tapahtumaa, luemme syöttökentän, lisäämme käyttäjän viestin tekstialueelle, kutsumme API:a ja näytämme vastauksen tekstialueella.
- 4) Tässä kuuntelemme submit-tapahtumaa, luemme syötekentän, lisäämme käyttäjän viestin tekstialueelle, kutsumme API:a ja näytämme vastauksen tekstialueella.
Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta haluamasi, mutta tässä muutama ehdotus:
Katsotaan seuraavaksi tyylitiedostoa. Tässä voit käyttää luovuuttasi ja tehdä siitä haluamasi näköisen, mutta tässä on joitakin ehdotuksia:
**styles.css**
@ -338,14 +332,14 @@ Katsotaan seuraavaksi tyylit. Tässä voit olla luova ja tehdä ulkoasusta halua
}
```
Näillä kolmella luokalla voit muotoilla viestit eri tavalla riippuen siitä, tulevatko ne avustajalta vai käyttäjältä. Jos haluat inspiraatiota, katso `solution/frontend/styles.css`-kansio.
Näillä kolmella luokalla voit tyylitellä viestit eri tavalla riippuen siitä, tulevatko ne assistentilta vai käyttäjältä. Jos kaipaat inspiraatiota, katso `solution/frontend/styles.css`-kansiota.
### Perus-URL:n muuttaminen
### Muuta Base URL
Yksi asia, jota emme vielä asettaneet, on `BASE_URL`. Tämä ei ole tiedossa ennen kuin taustajärjestelmä käynnistetään. Aseta se seuraavasti:
Yksi asia, jota emme vielä asettaneet, on `BASE_URL`. Tätä ei tiedetä ennen kuin taustajärjestelmä on käynnistetty. Aseta se seuraavasti:
- Jos API toimii paikallisesti, sen pitäisi olla jotain kuten `http://localhost:5000`.
- Jos käytät Codespacesia, sen pitäisi näyttää jotain kuten "[name]app.github.dev".
- Jos ajat API:a paikallisesti, sen pitäisi olla jotain kuten `http://localhost:5000`.
- Jos käytät Codespacesia, se näyttää jotain tällaista: "[name]app.github.dev".
## Tehtävä
@ -361,7 +355,7 @@ project/
...
```
Kopioi sisältö yllä olevista ohjeista, mutta muokkaa sitä haluamallasi tavalla.
Kopioi sisältö yllä olevista ohjeista, mutta voit mukauttaa sitä haluamallasi tavalla.
## Ratkaisu
@ -369,7 +363,7 @@ Kopioi sisältö yllä olevista ohjeista, mutta muokkaa sitä haluamallasi taval
## Bonus
Kokeile muuttaa AI-avustajan persoonallisuutta.
Kokeile muuttaa AI-assistentin persoonallisuutta.
### Pythonille
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### Käyttöliittymä
Muuta myös CSS:ää ja tekstiä haluamallasi tavalla, eli tee muutoksia *index.html*- ja *styles.css*-tiedostoihin.
Muuta myös CSS-tyylejä ja tekstejä haluamallasi tavalla, eli tee muutoksia *index.html*- ja *styles.css*-tiedostoihin.
## Yhteenveto
Hienoa, olet oppinut alusta alkaen, kuinka luoda henkilökohtainen avustaja tekoälyn avulla. Teimme sen käyttämällä GitHub-malleja, taustajärjestelmää Pythonilla ja käyttöliittymää HTML:llä, CSS:llä ja JavaScriptillä.
Hienoa, olet oppinut alusta alkaen, kuinka luoda henkilökohtainen assistentti tekoälyn avulla. Teimme sen GitHub Models -mallien, Python-taustajärjestelmän sekä HTML-, CSS- ja JavaScript-käyttöliittymän avulla.
## Codespacesin käyttö
## Käyttöönotto Codespacesilla
- Siirry: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Luo mallista (varmista, että olet kirjautunut GitHubiin) oikeassa yläkulmassa:
- Siirry: [Web Dev For Beginners -repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Luo uusi repositorio mallista (varmista, että olet kirjautunut GitHubiin) oikeasta yläkulmasta:
Tämä käynnistää ympäristön, jossa voit nyt työskennellä.
---
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
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ä.
Ce projet de chat montre comment créer un assistant conversationnel en utilisant les modèles GitHub.
Ce projet de chat montre comment créer un assistant de chat en utilisant les modèles GitHub.
Voici à quoi ressemble le projet finalisé :
Voici à quoi ressemble le projet final :
<div>
<imgsrc="./assets/screenshot.png"alt="Application de chat"width="600">
</div>
Un peu de contexte : construire des assistants conversationnels avec l'IA générative est une excellente manière de commencer à apprendre sur l'IA. Ce que vous apprendrez ici, c'est à intégrer l'IA générative dans une application web tout au long de cette leçon. Commençons.
Pour donner un peu de contexte, créer des assistants de chat en utilisant l'IA générative est une excellente manière de commencer à apprendre sur l'IA. Ce que vous allez apprendre ici, c'est comment intégrer l'IA générative dans une application web tout au long de cette leçon. Commençons.
## Connexion à l'IA générative
Pour le backend, nous utilisons les modèles GitHub. C'est un excellent service qui vous permet d'utiliser l'IA gratuitement. Rendez-vous sur son playground et récupérez le code correspondant au langage backend de votre choix. Voici à quoi cela ressemble sur [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Pour le backend, nous utilisons les modèles GitHub. C'est un excellent service qui vous permet d'utiliser l'IA gratuitement. Rendez-vous sur son espace de test et récupérez le code correspondant au langage backend de votre choix. Voici à quoi cela ressemble sur [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Comme mentionné, sélectionnez l'onglet "Code" et votre runtime préféré.
Comme mentionné, sélectionnez l'onglet "Code" et votre environnement d'exécution préféré.
<div>
<imgsrc="./assets/playground-choice.png"alt="choix du playground"with="600">
</div>
### Utilisation de Python
@ -100,15 +94,15 @@ Avec cette fonction `call_llm`, nous pouvons maintenant prendre un prompt et un
### Personnaliser l'assistant IA
Si vous souhaitez personnaliser l'assistant IA, vous pouvez spécifier son comportement en remplissant le prompt système comme suit :
Si vous souhaitez personnaliser l'assistant IA, vous pouvez spécifier son comportement en remplissant le prompt système comme ceci :
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## L'exposer via une API Web
## Exposer via une API Web
Super, nous avons terminé la partie IA. Voyons maintenant comment l'intégrer dans une API Web. Pour l'API Web, nous choisissons Flask, mais tout autre framework web devrait convenir. Voici le code correspondant :
Super, nous avons terminé la partie IA. Voyons maintenant comment l'intégrer dans une API Web. Pour l'API Web, nous avons choisi Flask, mais tout framework web devrait convenir. Voici le code :
### Utilisation de Python
@ -182,7 +176,7 @@ Super, nous avons fait ce qu'il fallait.
## Configurer Cors
Nous devons mentionner que nous configurons quelque chose comme CORS (partage des ressources entre origines multiples). Cela signifie que, comme notre backend et notre frontend fonctionneront sur des ports différents, nous devons autoriser le frontend à appeler le backend.
Nous devons mentionner que nous avons configuré quelque chose comme CORS, le partage de ressources entre origines. Cela signifie que, puisque notre backend et notre frontend fonctionneront sur des ports différents, nous devons permettre au frontend d'appeler le backend.
### Utilisation de Python
@ -203,7 +197,7 @@ Pour exécuter votre projet, vous devez d'abord démarrer votre backend, puis vo
### Utilisation de Python
D'accord, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec un backend ? Eh bien, il y a deux choses à faire :
Ok, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec un backend ? Eh bien, il y a deux choses à faire :
- Installer les dépendances :
@ -225,7 +219,7 @@ D'accord, nous avons *llm.py* et *api.py*. Comment faire fonctionner cela avec u
### Travailler sur un frontend
Maintenant que nous avons une API opérationnelle, créons un frontend pour cela. Un frontend minimaliste que nous améliorerons progressivement. Dans un dossier *frontend*, créez ce qui suit :
Maintenant que nous avons une API opérationnelle, créons un frontend pour cela. Un frontend minimal que nous améliorerons progressivement. Dans un dossier *frontend*, créez ce qui suit :
```text
backend/
@ -310,7 +304,7 @@ Ce qui précède est le strict minimum nécessaire pour prendre en charge une fe
})();
```
Analysons le code par section :
Analysons le code section par section :
- 1) Ici, nous obtenons une référence à tous nos éléments que nous utiliserons plus tard dans le code.
- 2) Dans cette section, nous créons une fonction qui utilise la méthode intégrée `fetch` pour appeler notre backend.
@ -338,18 +332,18 @@ Passons au style maintenant. Voici où vous pouvez vraiment vous amuser et perso
}
```
Avec ces trois classes, vous stylerez les messages différemment selon qu'ils proviennent de l'assistant ou de vous en tant qu'utilisateur. Si vous cherchez de l'inspiration, consultez le dossier `solution/frontend/styles.css`.
Avec ces trois classes, vous styliserez les messages différemment selon qu'ils proviennent de l'assistant ou de vous en tant qu'utilisateur. Si vous voulez vous inspirer, consultez le dossier `solution/frontend/styles.css`.
### Modifier l'URL de base
Il y a une chose que nous n'avons pas encore définie : `BASE_URL`. Celle-ci n'est pas connue tant que votre backend n'est pas démarré. Pour la définir :
Il y a une chose que nous n'avons pas configurée ici, c'est `BASE_URL`. Elle n'est pas connue tant que votre backend n'est pas démarré. Pour la configurer :
- Si vous exécutez l'API localement, elle devrait ressembler à quelque chose comme `http://localhost:5000`.
- Si vous l'exécutez dans Codespaces, elle devrait ressembler à quelque chose comme "[name]app.github.dev".
- Si vous exécutez l'API localement, elle devrait être configurée comme `http://localhost:5000`.
- Si vous l'exécutez dans Codespaces, elle devrait ressembler à "[nom]app.github.dev".
## Devoir
## Exercice
Créez votre propre dossier *project* avec un contenu comme suit :
Créez votre propre dossier *project* avec le contenu suivant :
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à personnaliser selon vos préférences.
Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à le personnaliser selon vos préférences.
## Solution
@ -369,11 +363,11 @@ Copiez le contenu des instructions ci-dessus, mais n'hésitez pas à personnalis
## Bonus
Essayez de changer la personnalité de l'assistant IA.
Essayez de modifier la personnalité de l'assistant IA.
### Pour Python
Lorsque vous appelez `call_llm` dans *api.py*, vous pouvez modifier le deuxième argument selon vos envies, par exemple :
Lorsque vous appelez `call_llm` dans *api.py*, vous pouvez modifier le deuxième argument selon vos préférences, par exemple :
```python
call_llm(message, "You are Captain Picard")
@ -381,22 +375,22 @@ call_llm(message, "You are Captain Picard")
### Frontend
Changez également le CSS et le texte selon vos préférences, en modifiant*index.html* et *styles.css*.
Modifiez également le CSS et le texte selon vos goûts, donc apportez des changements dans*index.html* et *styles.css*.
## Résumé
Félicitations, vous avez appris à créer un assistant personnel à partir de zéro en utilisant l'IA. Nous avons utilisé les modèles GitHub, un backend en Python et un frontend en HTML, CSS et JavaScript.
Super, vous avez appris à créer un assistant personnel en utilisant l'IA, depuis zéro. Nous l'avons fait en utilisant les modèles GitHub, un backend en Python et un frontend en HTML, CSS et JavaScript.
## Configuration avec Codespaces
- Rendez-vous sur : [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Accédez à : [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Créez à partir d'un modèle (assurez-vous d'être connecté à GitHub) dans le coin supérieur droit :
- Une fois dans votre dépôt, créez un Codespace :
Cela devrait démarrer un environnement avec lequel vous pouvez maintenant travailler.
קצת רקע, בניית עוזרי צ'אט באמצעות AI גנרטיבי היא דרך מצוינת להתחיל ללמוד על AI. במהלך השיעור הזה תלמדו כיצד לשלב AI גנרטיבי באפליקציית ווב. בואו נתחיל.
קצת רקע, בניית עוזרי צ'אט באמצעות AI גנרטיבי היא דרך מצוינת להתחיל ללמוד על בינה מלאכותית. במהלך השיעור הזה תלמדו לשלב AI גנרטיבי באפליקציית ווב. בואו נתחיל.
## התחברות ל-AI גנרטיבי
## חיבור ל-AI גנרטיבי
בצד השרת, אנחנו משתמשים ב-GitHub Models. זהו שירות נהדר שמאפשר לכם להשתמש ב-AI בחינם. גשו ל-playground שלו וקחו את הקוד שמתאים לשפת ה-backend שבחרתם. כך זה נראה ב-[GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
בצד השרת, אנחנו משתמשים ב-GitHub Models. זהו שירות נהדר שמאפשר להשתמש בבינה מלאכותית בחינם. גשו ל-playground שלו וקחו את הקוד שמתאים לשפת התכנות שבחרתם. כך זה נראה ב-[GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
כפי שאמרנו, בחרו בלשונית "Code" וב-runtime שבחרתם.
כפי שאמרנו, בחרו בלשונית "Code" ואת סביבת הריצה שלכם.
עם הפונקציה `call_llm` עכשיו נוכל לקחת prompt ו-system prompt, והפונקציה תחזיר את התוצאה.
עם הפונקציה `call_llm`נוכל עכשיו לקחת prompt ו-system prompt, והפונקציה תחזיר את התוצאה.
### התאמת עוזר ה-AI
אם אתם רוצים להתאים את עוזר ה-AI, תוכלו להגדיר כיצד אתם רוצים שהוא יתנהג על ידי מילוי ה-system prompt כך:
אם תרצו להתאים את עוזר ה-AI, תוכלו להגדיר כיצד הוא יתנהג על ידי מילוי ה-system prompt כך:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## חשיפה דרך Web API
## חשיפת ה-AI דרך Web API
מצוין, סיימנו את חלק ה-AI, עכשיו נראה איך אפשר לשלב אותו ב-Web API. עבור ה-Web API, אנחנו בוחרים להשתמש ב-Flask, אבל כל framework ווב יהיה טוב. הנה הקוד:
מעולה, סיימנו את חלק ה-AI, עכשיו נראה איך לשלב אותו ב-Web API. עבור ה-Web API, נבחר להשתמש ב-Flask, אבל כל פריימוורק ווב אחר יתאים. הנה הקוד:
### שימוש ב-Python
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
כאן אנחנו יוצרים API עם Flask ומגדירים נתיב ברירת מחדל "/" ונתיב "/chat". הנתיב השני מיועד לשימוש על ידי ה-frontend שלנו כדי להעביר שאלות אליו.
כאן אנחנו יוצרים API עם Flask ומגדירים נתיב ברירת מחדל "/" ונתיב "/chat". הנתיב השני מיועד לשימוש על ידי ה-frontend שלנו כדי להעביר שאלות.
כדי לשלב את *llm.py* הנה מה שצריך לעשות:
כדי לשלב את *llm.py*, הנה מה שצריך לעשות:
- לייבא את הפונקציה `call_llm`:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
כאן אנחנו מנתחים את הבקשה הנכנסת כדי לשלוף את המאפיין `message` מתוך גוף ה-JSON. לאחר מכן אנחנו קוראים ל-LLM עם הקריאה הזו:
כאן אנחנו מנתחים את הבקשה הנכנסת כדי לשלוף את המאפיין `message` מגוף ה-JSON. לאחר מכן, אנחנו קוראים ל-LLM עם הקריאה הזו:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
מצוין, עכשיו סיימנו את מה שצריך.
מעולה, עכשיו סיימנו את מה שצריך.
## הגדרת Cors
חשוב לציין שהגדרנו משהו כמו CORS, שיתוף משאבים בין מקורות. זה אומר שכיוון שה-backend וה-frontend שלנו ירוצו על פורטים שונים, אנחנו צריכים לאפשר ל-frontend לקרוא ל-backend.
חשוב לציין שהגדרנו משהו כמו CORS, שיתוף משאבים בין מקורות שונים. המשמעותהיא שכיוון שה-backend וה-frontend שלנו ירוצו על פורטים שונים, נצטרך לאפשר ל-frontend לקרוא ל-backend.
### שימוש ב-Python
יש קטע קוד ב-*api.py* שמגדיר את זה:
יש קטע קוד ב-*api.py* שמגדיר זאת:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
כרגע זה מוגדר לאפשר "*" שזה כל המקורות, וזה קצת לא בטוח. כדאי להגביל את זה כשנעבור לייצור.
כרגע זה מוגדר לאפשר "*" שזה כל המקורות, וזה קצת לא בטוח. כדאי להגביל זאת כשנעבור לפרודקשן.
## הרצת הפרויקט
@ -203,7 +197,7 @@ CORS(app) # * example.com
### שימוש ב-Python
אוקיי, יש לנו *llm.py*ו-*api.py*, איך אפשר לגרום לזה לעבוד עם backend? יש שני דברים שצריך לעשות:
אוקיי, אז יש לנו את *llm.py* ואת *api.py*, איך נגרום לזה לעבוד עם backend? יש שני דברים שצריך לעשות:
- להתקין תלותים:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
אם אתם ב-Codespaces, צריך לגשת ל-Ports בחלק התחתון של העורך, ללחוץ לחיצה ימנית עליו ולבחור "Port Visibility" ואז לבחור "Public".
אם אתם ב-Codespaces, גשו ל-Ports בחלק התחתון של העורך, לחצו לחיצה ימנית עליו ובחרו "Port Visibility" ואז "Public".
### עבודה על ה-frontend
עכשיו שיש לנו API פעיל, בואו ניצור frontend עבורו. frontend מינימלי שנשפר בהדרגה. בתיקיית *frontend*, צרו את הדברים הבאים:
עכשיו שיש לנו API פועל, בואו ניצור frontend עבורו. נתחיל עם frontend בסיסי שנשפר בהדרגה. בתיקיית *frontend*, צרו את הקבצים הבאים:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
הקוד למעלה הוא המינימום הנדרש כדי לתמוך בחלון צ'אט, שכן הוא כולל textarea שבו יוצגו ההודעות, input שבו תכתבו את ההודעה וכפתור לשליחת ההודעה ל-backend. עכשיו נסתכל על ה-JavaScript ב-*app.js*
הקוד למעלה הוא המינימום הנדרש לתמיכה בחלון צ'אט, הכולל textarea שבו יוצגו ההודעות, input להקלדת ההודעה וכפתור לשליחת ההודעה ל-backend. עכשיו נעבור ל-JavaScript ב-*app.js*.
**app.js**
@ -312,12 +306,12 @@ styles.css
בואו נעבור על הקוד לפי חלקים:
- 1) כאן אנחנו מקבלים הפניה לכל האלמנטים שנשתמש בהם בהמשך הקוד.
- 2) בחלק הזה אנחנו יוצרים פונקציה שמשתמשת ב-`fetch` המובנה כדי לקרוא ל-backend שלנו.
- 3) `appendMessage` עוזרת להוסיף תגובות וגם את מה שאתם כמשתמשים כותבים.
- 4) כאן אנחנו מאזינים לאירוע submit, קוראים את שדה הקלט, מציבים את הודעת המשתמש ב-textarea, קוראים ל-API ומציגים את התגובה ב-textarea.
- 1) כאן אנחנו מקבלים הפניות לכל האלמנטים שנשתמש בהם בהמשך הקוד.
- 2) בחלק הזה, אנחנו יוצרים פונקציה שמשתמשת ב-`fetch` המובנה כדי לקרוא ל-backend שלנו.
- 3) `appendMessage` עוזרת להוסיף תגובות וגם את מה שאתם כמשתמשים מקלידים.
- 4) כאן אנחנו מאזינים לאירוע submit, קוראים את שדה הקלט, מציגים את הודעת המשתמש ב-textarea, קוראים ל-API ומציגים את התגובה ב-textarea.
עכשיו נסתכל על עיצוב, כאן אפשר להשתגע ולעצב איך שרוצים, אבל הנה כמה הצעות:
נעבור לעיצוב, כאן אפשר להשתגע ולעצב איך שרוצים, אבל הנה כמה הצעות:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
עם שלושת המחלקות האלה, תוכלו לעצב הודעות בצורה שונה בהתאם למקור שלהן - עוזר או משתמש. אם אתם רוצים השראה, בדקו את התיקייה `solution/frontend/styles.css`.
עם שלוש המחלקות האלו, תוכלו לעצב הודעות בצורה שונה בהתאם למקור שלהן - עוזר או משתמש. אם אתם מחפשים השראה, בדקו את התיקייה `solution/frontend/styles.css`.
### שינוי Base Url
יש דבר אחד שלא הגדרנו כאן וזה `BASE_URL`, שלא ידוע עד שה-backend מופעל. כדי להגדיר אותו:
יש דבר אחד שלא הגדרנו וזה `BASE_URL`, שלא ידוע עד שה-backend מופעל. כדי להגדיר זאת:
- אם אתם מריצים את ה-API מקומית, זה צריך להיות משהו כמו `http://localhost:5000`.
- אם אתם מריצים ב-Codespaces, זה צריך להיראות כמו "[name]app.github.dev".
- אם אתם מריצים ב-Codespaces, זה ייראה כמו "[name]app.github.dev".
## משימה
צרו תיקייה משלכם *project* עם תוכן כמו כך:
צרו תיקייה משלכם בשם *project* עם תוכן כזה:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
העתיקו את התוכן מההוראות למעלה אבל הרגישו חופשיים להתאים אותו לטעמכם.
העתיקו את התוכן מההוראות למעלה, אבל הרגישו חופשיים להתאים אותו לטעמכם.
## פתרון
@ -373,7 +367,7 @@ project/
### עבור Python
כשאתם קוראים ל-`call_llm` ב-*api.py* תוכלו לשנות את הפרמטר השני למה שתרצו, לדוגמה:
כשאתם קוראים ל-`call_llm` ב-*api.py*, תוכלו לשנות את הפרמטר השני למה שתרצו, לדוגמה:
```python
call_llm(message, "You are Captain Picard")
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### Frontend
שנו גם את ה-CSS והטקסט לטעמכם, כך שתעשו שינויים ב-*index.html* וב-*styles.css*.
שנו גם את ה-CSS והטקסט לטעמכם, כך שתבצעו שינויים ב-*index.html* וב-*styles.css*.
## סיכום
מצוין, למדתם מאפס איך ליצור עוזר אישי באמצעות AI. עשינו זאת באמצעות GitHub Models, backend ב-Python ו-frontend ב-HTML, CSS ו-JavaScript.
מעולה, למדתם מאפס איך ליצור עוזר אישי באמצעות AI. עשינו זאת באמצעות GitHub Models, backend ב-Python ו-frontend ב-HTML, CSS ו-JavaScript.
## הגדרה עם Codespaces
- נווטו ל: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
कुछ संदर्भ: जनरेटिव 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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
जैसा कि हमने कहा, "Code" टैब और अपने चुने हुए रनटाइम को चुनें।
जैसा कि हमने कहा, "Code" टैब और अपनी चुनी हुई रनटाइम का चयन करें।
इस `call_llm` फंक्शन के साथ, अब हम एक प्रॉम्प्ट और एक सिस्टम प्रॉम्प्ट ले सकते हैं, और फंक्शन परिणाम लौटाता है।
इस `call_llm` फंक्शन के साथ, अब हम एक प्रॉम्प्ट और एक सिस्टम प्रॉम्प्ट ले सकते हैं और फंक्शन अंततः परिणाम लौटाता है।
### AI असिस्टेंट को कस्टमाइज़ करें
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## इसे वेब API के माध्यम से एक्सपोज़ करें
बहुत अच्छा, हमने AI भाग पूरा कर लिया है। अब देखते हैं कि इसे वेब API में कैसे इंटीग्रेट किया जा सकता है। वेब API के लिए, हम Flask का उपयोग कर रहे हैं, लेकिन कोई भी वेब फ्रेमवर्क अच्छा होगा। इसका कोड देखें:
बहुत बढ़िया, हमने AI भाग पूरा कर लिया है, अब देखते हैं कि इसे वेब API में कैसे इंटीग्रेट किया जा सकता है। वेब API के लिए, हम Flask का उपयोग कर रहे हैं, लेकिन कोई भी वेब फ्रेमवर्क अच्छा होगा। इसका कोड देखें:
### Python का उपयोग करना
@ -143,7 +137,7 @@ if __name__ == "__main__":
यहाँ, हम एक Flask API बनाते हैं और "/" और "/chat" नामक डिफ़ॉल्ट रूट को परिभाषित करते हैं। दूसरा रूट हमारे फ्रंटएंड द्वारा प्रश्नों को पास करने के लिए उपयोग किया जाता है।
*llm.py* को इंटीग्रेट करने के लिए हमें निम्नलिखित करना होगा:
*llm.py* को इंटीग्रेट करने के लिए हमें यह करना होगा:
- `call_llm` फंक्शन को इंपोर्ट करें:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
यहाँ हम आने वाले रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद हम LLM को इस कॉल के साथ कॉल करते हैं:
यहाँ हम इनकमिंग रिक्वेस्ट को पार्स करते हैं ताकि JSON बॉडी से `message` प्रॉपर्टी को प्राप्त किया जा सके। इसके बाद हम LLM को इस कॉल के साथ कॉल करते हैं:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,11 +172,11 @@ if __name__ == "__main__":
})
```
बहुत अच्छा, अब हमने वह कर लिया जो हमें चाहिए था।
बहुत बढ़िया, अब हमने जो चाहिए था वह पूरा कर लिया।
## Cors को कॉन्फ़िगर करें
हमें यह बताना चाहिए कि हमने कुछ ऐसा सेटअप किया है जिसे CORS कहते हैं, यानी क्रॉस-ओरिजिन रिसोर्स शेयरिंग। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट्स पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी।
हमें यह बताना चाहिए कि हमने कुछ ऐसा सेटअप किया है जिसे CORS, क्रॉस-ओरिजिन रिसोर्स शेयरिंग कहते हैं। इसका मतलब है कि क्योंकि हमारा बैकएंड और फ्रंटएंड अलग-अलग पोर्ट पर चलेंगे, हमें फ्रंटएंड को बैकएंड को कॉल करने की अनुमति देनी होगी।
### Python का उपयोग करना
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
अभी इसे "*" यानी सभी ओरिजिन्स की अनुमति देने के लिए सेट किया गया है, जो थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने पर प्रतिबंधित करना चाहिए।
अभी यह "*" पर सेट किया गया है, जो सभी ओरिजिन को अनुमति देता है और यह थोड़ा असुरक्षित है। हमें इसे प्रोडक्शन में जाने पर प्रतिबंधित करना चाहिए।
## अपना प्रोजेक्ट चलाएं
@ -203,7 +197,7 @@ CORS(app) # * example.com
### Python का उपयोग करना
ठीक है, हमारे पास *llm.py* और *api.py* है। इसे बैकएंड के साथ कैसे काम में लाया जाए? इसके लिए हमें दो चीजें करनी होंगी:
ठीक है, हमारे पास *llm.py* और *api.py* है, इसे बैकएंड के साथ कैसे काम में लाया जाए? खैर, हमें दो चीजें करनी होंगी:
- डिपेंडेंसीज़ इंस्टॉल करें:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
यदि आप Codespaces में हैं, तो आपको एडिटर के निचले हिस्से में Ports पर जाना होगा, उस पर राइट-क्लिक करना होगा और "Port Visibility" पर क्लिक करके "Public" चुनना होगा।
यदि आप Codespaces में हैं, तो आपको एडिटर के निचले हिस्से में Ports पर जाना होगा, उस पर राइट-क्लिक करें और "Port Visibility" पर क्लिक करें और "Public" चुनें।
### फ्रंटएंड पर काम करें
अब जब हमारा API चल रहा है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं:
अब जब हमारे पास API चल रहा है, तो चलिए इसके लिए एक फ्रंटएंड बनाते हैं। एक न्यूनतम फ्रंटएंड जिसे हम चरणबद्ध तरीके से सुधारेंगे। *frontend* फोल्डर में निम्नलिखित बनाएं:
```text
backend/
@ -235,7 +229,7 @@ app.js
styles.css
```
चलिए**index.html** से शुरू करते हैं:
चलो**index.html** से शुरू करते हैं:
```html
<html>
@ -253,7 +247,7 @@ styles.css
</html>
```
ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है। इसमें एक टेक्स्ट एरिया है जहाँ संदेश रेंडर किए जाएंगे, एक इनपुट है जहाँ संदेश टाइप किया जाएगा, और एक बटन है जो आपके संदेश को बैकएंड पर भेजता है। अब *app.js* में JavaScript को देखें:
ऊपर दिया गया कोड चैट विंडो को सपोर्ट करने के लिए न्यूनतम आवश्यक है, क्योंकि इसमें एक टेक्स्टएरिया है जहां संदेश रेंडर किए जाएंगे, एक इनपुट जहां संदेश टाइप किया जाएगा और एक बटन जो आपके संदेश को बैकएंड में भेजेगा। चलिए *app.js* में JavaScript को देखते हैं।
**app.js**
@ -310,14 +304,14 @@ styles.css
})();
```
आइए कोड को सेक्शन के अनुसार समझें:
आइए कोड को सेक्शन के अनुसार समझते हैं:
- 1) यहाँ हम उन सभी एलिमेंट्स का रेफरेंस प्राप्त करते हैं जिन्हें हम बाद में कोड में उपयोग करेंगे।
- 2) इस सेक्शन में, हम एक फंक्शन बनाते हैं जो बिल्ट-इन `fetch` मेथड का उपयोग करता है और हमारे बैकएंड को कॉल करता है।
- 2) इस सेक्शन में, हम एक फंक्शन बनाते हैं जो बिल्ट-इन `fetch` मेथड का उपयोग करता है जो हमारे बैकएंड को कॉल करता है।
- 3) `appendMessage` उपयोगकर्ता द्वारा टाइप किए गए संदेशों और असिस्टेंट के उत्तरों को जोड़ने में मदद करता है।
- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्टएरिया में रखते हैं, API को कॉल करते हैं, और टेक्स्टएरिया में उत्तर रेंडर करते हैं।
- 4) यहाँ हम सबमिट इवेंट को सुनते हैं और इनपुट फील्ड को पढ़ते हैं, उपयोगकर्ता का संदेश टेक्स्टएरिया में रखते हैं, API को कॉल करते हैं और टेक्स्टएरिया में उत्तर रेंडर करते हैं।
अब स्टाइलिंग को देखें। यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव दिए गए हैं:
अब स्टाइलिंग को देखते हैं, यहाँ आप इसे अपनी पसंद के अनुसार डिज़ाइन कर सकते हैं, लेकिन कुछ सुझाव हैं:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर को देखें।
इन तीन क्लासेस के साथ, आप संदेशों को अलग-अलग स्टाइल कर सकते हैं, यह इस पर निर्भर करता है कि वे असिस्टेंट से आए हैं या उपयोगकर्ता से। यदि आप प्रेरणा लेना चाहते हैं, तो `solution/frontend/styles.css` फोल्डर देखें।
### बेस URL बदलें
यहाँ एक चीज़ है जिसे हमने सेट नहीं किया और वह है`BASE_URL`, यह तब तक ज्ञात नहीं होता जब तक आपका बैकएंड शुरू नहीं होता। इसे सेट करने के लिए:
यहाँ एक चीज़ थी जिसे हमने सेट नहीं किया और वह थी`BASE_URL`, यह तब तक ज्ञात नहीं होता जब तक आपका बैकएंड शुरू नहीं होता। इसे सेट करने के लिए:
- यदि आप API को लोकली चलाते हैं, तो इसे `http://localhost:5000` जैसा कुछ सेट करना चाहिए।
- यदि Codespaces में चलाते हैं, तो यह कुछ ऐसा दिखना चाहिए: "[name]app.github.dev"।
- यदि आप API को लोकली चलाते हैं, तो इसे कुछ इस तरह सेट किया जाना चाहिए: `http://localhost:5000`।
- यदि Codespaces में चलाते हैं, तो यह कुछ इस तरह दिखेगा: "[name]app.github.dev"।
## असाइनमेंट
अपना खुद का *project* फोल्डर बनाएं जिसमें निम्नलिखित सामग्री हो:
अपना खुद का *project* फोल्डर बनाएं जिसमें इस तरह की सामग्री हो:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
ऊपर दिए गए निर्देशों से सामग्री कॉपी करें, लेकिन इसे अपनी पसंद के अनुसार कस्टमाइज़ करें।
ऊपर दिए गए निर्देशों से सामग्री कॉपी करें लेकिन इसे अपनी पसंद के अनुसार कस्टमाइज़ करें।
## समाधान
@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard")
### फ्रंटएंड
CSS और टेक्स्ट को भी अपनी पसंद के अनुसार बदलें, इसलिए *index.html* और *styles.css* में बदलाव करें।
CSS और टेक्स्ट को अपनी पसंद के अनुसार बदलें, इसलिए *index.html* और *styles.css* में बदलाव करें।
## सारांश
बहुत अच्छा, आपने शुरुआत से सीख लिया कि AI का उपयोग करके एक पर्सनल असिस्टेंट कैसे बनाया जाए। हमने इसे GitHub Models, Python में बैकएंड और HTML, CSS और JavaScript में फ्रंटएंड का उपयोग करके किया।
बहुत बढ़िया, आपने शुरुआत से सीख लिया कि AI का उपयोग करके एक पर्सनल असिस्टेंट कैसे बनाया जाए। हमने इसे GitHub Models, Python में बैकएंड और HTML, CSS और JavaScript में फ्रंटएंड का उपयोग करके किया।
## Codespaces के साथ सेटअप करें
@ -403,4 +397,4 @@ CSS और टेक्स्ट को भी अपनी पसंद के
---
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
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.
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, pa krenimo.
## Povezivanje s generativnom AI
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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Kao što smo rekli, odaberite karticu "Code" i svoj runtime.
Kao što smo rekli, odaberite karticu "Code" i svoj odabrani runtime.
Očistimo ovaj kod kako bi bio ponovno upotrebljiv:
Očistimo ovaj kod malo kako bi bio ponovno upotrebljiv:
```python
def call_llm(prompt: str, system_message: str):
@ -108,7 +102,7 @@ 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 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:
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 okvir bi trebao biti dobar. Pogledajmo kod za to:
### Korištenje Pythona
@ -145,7 +139,7 @@ Ovdje kreiramo Flask API i definiramo zadanu rutu "/" i "/chat". Potonja je nami
Za integraciju *llm.py* trebamo učiniti sljedeće:
- Uvesti funkciju `call_llm`:
- Importirati funkciju `call_llm`:
```python
from llm import call_llm
@ -167,7 +161,7 @@ Za integraciju *llm.py* trebamo učiniti sljedeće:
})
```
Ovdje parsiramo dolazni zahtjev kako bismo dohvatili svojstvo `message` iz JSON tijela. Nakon toga pozivamo LLM s ovim pozivom:
Ovdje analiziramo dolazni zahtjev kako bismo dohvatili svojstvo `message` iz JSON tijela. Nakon toga pozivamo LLM s ovim pozivom:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,7 +172,7 @@ Za integraciju *llm.py* trebamo učiniti sljedeće:
})
```
Odlično, sada smo završili što je potrebno.
Odlično, sada smo napravili što je potrebno.
## Konfiguriranje CORS-a
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Trenutno je postavljeno da dopušta "*" što znači sve izvore, što je pomalo nesigurno. Trebali bismo to ograničiti kada idemo u produkciju.
Trenutno je postavljeno da dopušta "*" što znači sve izvore, a to nije baš sigurno. Trebali bismo to ograničiti kada idemo u produkciju.
## Pokretanje projekta
@ -253,7 +247,7 @@ Počnimo s **index.html**:
</html>
```
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*
Ovo gore je apsolutni minimum potreban za podršku chat prozora, jer se sastoji od tekstualnog područja gdje će se prikazivati poruke, polja za unos gdje ćete upisivati poruku i gumba za slanje poruke na backend. Pogledajmo JavaScript u *app.js*
**app.js**
@ -317,7 +311,7 @@ Prođimo kroz kod po sekcijama:
- 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 da izgleda kako želite, ali evo nekih prijedloga:
Pogledajmo sada stiliziranje, ovdje možete biti kreativni i napraviti izgled kakav želite, ali evo nekih prijedloga:
**styles.css**
@ -338,14 +332,14 @@ Pogledajmo sljedeće stiliziranje, ovdje možete biti kreativni i napraviti da i
}
```
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`.
S ove tri klase stilizirat ćete poruke različito ovisno o tome dolaze li od asistenta ili od vas kao korisnika. Ako trebate inspiraciju, pogledajte mapu `solution/frontend/styles.css`.
### Promjena osnovnog URL-a
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, 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".
- Ako pokrećete API lokalno, treba biti postavljen na nešto poput `http://localhost:5000`.
- Ako pokrećete u Codespaces, treba izgledati nešto poput "[name]app.github.dev".
## Zadatak
@ -361,7 +355,7 @@ project/
...
```
Kopirajte sadržaj iz gore navedenih uputa, ali slobodno prilagodite prema vlastitim željama.
Kopirajte sadržaj prema gore navedenim uputama, ali slobodno prilagodite prema vlastitim željama.
## Rješenje
@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard")
### Frontend
Promijenite također CSS i tekst prema vlastitim željama, tako da napravite izmjene u *index.html* i *styles.css*.
Promijenite također CSS i tekst prema vlastitim željama, napravite promjene u *index.html* i *styles.css*.
## Sažetak
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.
Odlično, naučili ste od nule kako stvoriti 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
@ -403,4 +397,4 @@ Odlično, naučili ste od nule kako kreirati osobnog asistenta koristeći AI. To
---
**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 bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze 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 nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
Egy kis háttérinformáció: generatív MI használatával chat asszisztensek építése remek módja annak, hogy elkezdjünk ismerkedni a mesterséges intelligenciával. Ebben a leckében megtanulhatod, hogyan integrálj generatív MI-t egy webalkalmazásba. Kezdjük is!
Néhány háttérinformáció: generatív AI használatával chat asszisztensek építése remek módja annak, hogy elkezdjünk tanulni az AI-ról. Ebben a leckében megtanulhatod, hogyan integrálj generatív AI-t egy webalkalmazásba. Kezdjük!
## Kapcsolódás a generatív MI-hez
## Kapcsolódás a generatív AI-hoz
A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi, hogy ingyenesen használj mesterséges intelligenciát. Látogass el a playground oldalára, és szerezd meg a kódot, amely megfelel a választott backend nyelvednek. Így néz ki a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground):
A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi az AI ingyenes használatát. Látogass el a playgroundjára, és szerezd meg a kódot, amely megfelel a választott backend nyelvednek. Így néz ki a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
<div>
<imgsrc="./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.
Ahogy mondtuk, válaszd ki a "Code" fület és a kívánt futtatási környezetet.
Ezzel a `call_llm` függvénnyel most már megadhatunk egy promptot és egy rendszerpromptot, és a függvény visszaadja az eredményt.
### MI Asszisztens testreszabása
### AI Asszisztens testreszabása
Ha testre szeretnéd szabni az MI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így:
Ha testre szeretnéd szabni az AI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Web API-n keresztüli elérés
Szuper, az MI rész készen van, nézzük meg, hogyan integrálhatjuk ezt egy Web API-ba. A Web API-hoz a Flask-et választjuk, de bármelyik webes keretrendszer megfelelő lehet. Íme a kód:
Nagyszerű, az AI rész kész, nézzük meg, hogyan integrálhatjuk ezt egy Web API-ba. A Web API-hoz a Flask-et választjuk, de bármelyik webes keretrendszer megfelelő lehet. Nézzük meg a kódot:
### Python használata
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Itt létrehozunk egy Flask API-t, és definiálunk egy alapértelmezett útvonalat ("/") és egy "/chat" útvonalat. Az utóbbi arra szolgál, hogy a frontend kérdéseket küldjön a backendnek.
Itt létrehozunk egy Flask API-t, és definiálunk egy alapértelmezett útvonalat "/" és "/chat". Az utóbbi arra szolgál, hogy a frontendünk kérdéseket küldjön a backendnek.
Az *llm.py* integrálásához a következőket kell tennünk:
@ -167,7 +161,7 @@ Az *llm.py* integrálásához a következőket kell tennünk:
})
```
Itt az érkező kérést elemezzük, hogy kinyerjük a JSON törzsből a `message` tulajdonságot. Ezután meghívjuk az LLM-et ezzel a hívással:
Itt feldolgozzuk a bejövő kérést, hogy kinyerjük a JSON törzsből a `message` tulajdonságot. Ezután az LLM-et így hívjuk meg:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ Az *llm.py* integrálásához a következőket kell tennünk:
})
```
Szuper, most már készen vagyunk.
Nagyszerű, most már készen vagyunk.
## Cors konfigurálása
Fontos megemlíteni, hogy beállítottunk valamit, amit CORS-nak (cross-origin resource sharing) hívnak. Ez azt jelenti, hogy mivel a backend és a frontend különböző portokon fog futni, engedélyeznünk kell, hogy a frontend hívásokat kezdeményezzen a backend felé.
Fontos megemlíteni, hogy beállítunk valamit, amit CORS-nak, azaz cross-origin resource sharing-nek hívnak. Ez azt jelenti, hogy mivel a backendünk és a frontendünk különböző portokon fog futni, engedélyeznünk kell, hogy a frontend hívja a backendet.
### Python használata
Az *api.py*-ban van egy kódrészlet, amely ezt beállítja:
Van egy kódrészlet az *api.py*-ban, amely ezt beállítja:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Jelenleg úgy van beállítva, hogy minden eredetet ("*") engedélyezzen, ami nem túl biztonságos. Ezt szigorítani kell, amikor éles környezetbe kerül a projekt.
Jelenleg úgy van beállítva, hogy "*" legyen, ami minden eredetet engedélyez, és ez egy kicsit nem biztonságos. Ezt korlátozni kell, amikor produkcióba kerülünk.
## Projekt futtatása
@ -203,7 +197,7 @@ A projekt futtatásához először a backendet, majd a frontendet kell elindíta
### Python használata
Oké, tehát van *llm.py* és *api.py* fájlunk. Hogyan működtethetjük ezeket a backenddel? Két dolgot kell tennünk:
Oké, tehát van *llm.py* és *api.py*, hogyan működtethetjük ezeket a backenddel? Két dolgot kell tennünk:
- Függőségek telepítése:
@ -221,11 +215,11 @@ Oké, tehát van *llm.py* és *api.py* fájlunk. Hogyan működtethetjük ezeket
python api.py
```
Ha Codespaces-ben dolgozol, menj az alsó szerkesztői részben a Ports-ra, kattints jobb gombbal, válaszd a "Port Visibility"-t, majd állítsd "Public"-ra.
Ha Codespaces-ben dolgozol, menj az editor alsó részén található Ports részhez, kattints rá jobb gombbal, válaszd a "Port Visibility"-t, majd válaszd a "Public" opciót.
### Frontend fejlesztése
Most, hogy az API működik, hozzunk létre egy frontendet. Egy minimális frontenddel kezdünk, amit lépésről lépésre fejlesztünk. A *frontend* mappában hozz létre a következőket:
Most, hogy az API működik, hozzunk létre egy frontendet ehhez. Egy minimális frontendet, amelyet lépésről lépésre fejlesztünk tovább. A *frontend* mappában hozz létre a következőket:
```text
backend/
@ -253,7 +247,7 @@ Kezdjük az **index.html**-lel:
</html>
```
Ez a minimális szükséges kód egy chatablak támogatásához: egy textarea az üzenetek megjelenítéséhez, egy input mező az üzenet beírásához, és egy gomb az üzenet backendhez küldéséhez. Nézzük meg a JavaScript kódot az*app.js*-ben.
Ez a minimum, amire szükséged van egy chat ablak támogatásához, mivel tartalmaz egy textarea-t, ahol az üzenetek megjelennek, egy input mezőt, ahová az üzenetet beírhatod, és egy gombot, amely elküldi az üzenetet a backendnek. Nézzük meg a JavaScriptet a*app.js*-ben.
**app.js**
@ -312,12 +306,12 @@ Ez a minimális szükséges kód egy chatablak támogatásához: egy textarea az
Nézzük át a kódot szakaszonként:
- 1) Itt hivatkozást szerzünk az összes elemre, amelyet később használni fogunk a kódban.
- 1) Itt hivatkozást kapunk az összes elemre, amelyre később hivatkozunk a kódban.
- 2) Ebben a szakaszban létrehozunk egy függvényt, amely a beépített `fetch` metódust használja a backend hívására.
- 3) Az `appendMessage` segít hozzáadni a válaszokat, valamint a felhasználó által beírt üzeneteket.
- 4) Itt figyeljük a submit eseményt, beolvassuk az input mezőt, elhelyezzük a felhasználó üzenetét a textarea-ban, meghívjuk az API-t, és megjelenítjük a választ a textarea-ban.
- 3) Az `appendMessage` segít hozzáadni a válaszokat, valamint azt, amit te, mint felhasználó írsz.
- 4) Itt figyelünk a submit eseményre, és végül kiolvassuk az input mezőt, elhelyezzük a felhasználó üzenetét a textarea-ban, meghívjuk az API-t, és megjelenítjük a választ a textarea-ban.
Nézzük meg a stílusokat, itt igazán kreatív lehetsz, de íme néhány javaslat:
Nézzük meg a stílusokat, itt igazán kreatív lehetsz, és úgy alakíthatod, ahogy szeretnéd, de itt van néhány javaslat:
**styles.css**
@ -338,18 +332,18 @@ Nézzük meg a stílusokat, itt igazán kreatív lehetsz, de íme néhány javas
}
```
Ezzel a három osztállyal különbözőképpen formázhatod az üzeneteket attól függően, hogy az asszisztenstől vagy a felhasználótól származnak. Ha inspirációra van szükséged, nézd meg a `solution/frontend/styles.css` mappát.
Ezzel a három osztállyal különbözőképpen fogod formázni az üzeneteket attól függően, hogy az asszisztenstől vagy tőled, mint felhasználótól származnak. Ha inspirációt keresel, nézd meg a `solution/frontend/styles.css` mappát.
### Alap URL módosítása
Egy dolgot még nem állítottunk be, ez pedig a `BASE_URL`. Ez csak akkor ismert, ha a backend már fut. Beállításához:
Van itt egy dolog, amit nem állítottunk be, és ez a `BASE_URL`. Ez nem ismert, amíg a backend el nem indul. Beállításához:
- Ha az API-t helyileg futtatod, valami ilyesminek kell lennie: `http://localhost:5000`.
- Ha Codespaces-ben futtatod, valami ilyesmi lesz: "[név]app.github.dev".
- Ha az API-t helyben futtatod, valami ilyesminek kell lennie: `http://localhost:5000`.
- Ha Codespaces-ben futtatod, valami ilyesminek kell kinéznie: "[name]app.github.dev".
## Feladat
Hozz létre egy saját *project* mappát az alábbi tartalommal:
Hozz létre egy saját *project* mappát, amelynek tartalma a következő:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Másold be a fentiekben ismertetett tartalmat, de szabadon testreszabhatod az ízlésed szerint.
Másold át a fentiekben leírt tartalmat, de nyugodtan testreszabhatod saját ízlésed szerint.
## Megoldás
@ -369,11 +363,11 @@ Másold be a fentiekben ismertetett tartalmat, de szabadon testreszabhatod az í
## Bónusz
Próbáld megváltoztatni az MI asszisztens személyiségét.
Próbáld meg megváltoztatni az AI asszisztens személyiségét.
### Python esetén
Amikor a *api.py*-ban meghívod a `call_llm` függvényt, megváltoztathatod a második argumentumot, például:
Amikor meghívod a `call_llm` függvényt az *api.py*-ban, megváltoztathatod a második argumentumot arra, amit szeretnél, például:
```python
call_llm(message, "You are Captain Picard")
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### Frontend
Változtasd meg a CSS-t és a szöveget is az ízlésed szerint, tehát végezz módosításokat az *index.html*-ben és a *styles.css*-ben.
Változtasd meg a CSS-t és a szöveget is saját ízlésed szerint, tehát végezz módosításokat az *index.html*-ben és a *styles.css*-ben.
## Összefoglalás
## Összefoglaló
Szuper, most már tudod, hogyan készíts egy személyes asszisztenst a semmiből mesterséges intelligencia segítségével. Ezt GitHub Modellek, egy Python backend, valamint HTML, CSS és JavaScript frontend használatával valósítottuk meg.
Nagyszerű, megtanultad, hogyan hozhatsz létre egy személyes asszisztenst AI segítségével. Ezt GitHub Modellek, egy Python backend és egy HTML, CSS és JavaScript frontend segítségével valósítottuk meg.
## Beállítás Codespaces-szel
- Navigálj ide: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Hozz létre egy sablonból (győződj meg róla, hogy be vagy jelentkezve a GitHub-ra) a jobb felső sarokban:
Ez elindít egy környezetet, amelyben most már dolgozhatsz.
---
**Felelősség kizárása**:
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
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.
Sebagai konteks, membangun asisten chat menggunakan AI generatif adalah cara yang bagus untuk mulai belajar tentang AI. Dalam pelajaran ini, Anda akan belajar cara mengintegrasikan AI generatif ke dalam aplikasi web. Mari kita mulai.
## 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 tampilannya di [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Untuk backend, kita menggunakan GitHub Models. Ini adalah layanan yang luar biasa 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).
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Seperti yang disebutkan, pilih tab "Code" dan runtime pilihan Anda.
Dalam kasus ini, kita memilih Python, yang berarti kita akan menggunakan kode berikut:
Dalam kasus ini, kita memilih Python, yang berarti kita menggunakan kode berikut:
```python
"""Run this model in Python
@ -100,7 +94,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 perilakunya dengan mengisi sistem prompt seperti ini:
Jika Anda ingin mengkustomisasi asisten AI, Anda dapat menentukan bagaimana Anda ingin asisten tersebut berperilaku 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")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Mengeksposnya melalui Web API
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:
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 lainnya juga bisa digunakan. Berikut adalah kode untuk itu:
### Menggunakan Python
@ -141,7 +135,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 yang terakhir dimaksudkan untuk digunakan oleh frontend kita untuk mengirimkan pertanyaan.
Di sini, kita membuat API Flask dan mendefinisikan rute default "/" dan "/chat". Rute "/chat" dimaksudkan untuk digunakan oleh frontend kita untuk mengirimkan pertanyaan.
Untuk mengintegrasikan *llm.py*, berikut yang perlu kita lakukan:
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Saat ini, pengaturannya memungkinkan "*" yang berarti semua origin, dan ini agak tidak aman. Kita harus membatasinya saat masuk ke produksi.
Saat ini, pengaturan ini memungkinkan "*" yang berarti semua asal, dan ini agak tidak aman. Kita harus membatasinya saat masuk ke produksi.
## Menjalankan Proyek Anda
@ -203,7 +197,7 @@ Untuk menjalankan proyek Anda, Anda perlu memulai backend terlebih dahulu, lalu
### 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:
Baik, kita memiliki *llm.py* dan *api.py*. Bagaimana kita membuat ini bekerja dengan backend? Ada dua hal yang perlu kita lakukan:
- Instal dependensi:
@ -215,7 +209,7 @@ Baik, jadi kita memiliki *llm.py* dan *api.py*. Bagaimana kita membuat ini beker
pip install openai flask flask-cors openai
```
- Jalankan API
- Mulai API
```sh
python api.py
@ -225,7 +219,7 @@ Baik, jadi kita memiliki *llm.py* dan *api.py*. Bagaimana kita membuat ini beker
### Mengerjakan Frontend
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:
Sekarang kita memiliki API yang berjalan, mari kita buat frontend untuk ini. Frontend minimum yang akan kita tingkatkan secara bertahap. Di folder *frontend*, buat hal berikut:
```text
backend/
@ -253,7 +247,7 @@ Mari kita mulai dengan **index.html**:
</html>
```
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*
Di atas adalah minimum absolut yang Anda butuhkan untuk mendukung jendela chat, karena terdiri dari textarea tempat pesan akan ditampilkan, input untuk mengetik pesan, dan tombol untuk mengirim pesan Anda ke backend. Selanjutnya, mari kita lihat JavaScript di *app.js*.
**app.js**
@ -310,14 +304,14 @@ Di atas adalah minimum absolut yang Anda butuhkan untuk mendukung jendela chat,
})();
```
Mari kita bahas kode ini per bagian:
Mari kita bahas kode per bagian:
- 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.
- 2) Di 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 merender respons di textarea.
- 4) Di sini kita mendengarkan event submit, membaca input field, menempatkan pesan pengguna di textarea, memanggil API, dan menampilkan respons di textarea.
Selanjutnya, mari kita lihat styling. Di sinilah Anda bisa berkreasi dan membuatnya terlihat seperti yang Anda inginkan, tetapi berikut adalah beberapa saran:
Selanjutnya, mari kita lihat styling. Di sini Anda bisa berkreasi dan membuatnya sesuai keinginan Anda, tetapi berikut adalah beberapa saran:
**styles.css**
@ -342,10 +336,10 @@ Dengan tiga kelas ini, Anda akan menata pesan secara berbeda tergantung dari man
### Ubah Base Url
Ada satu hal yang belum kita atur, yaitu `BASE_URL`. Ini tidak diketahui sampai backend Anda dijalankan. Untuk mengaturnya:
Ada satu hal yang belum kita atur, yaitu `BASE_URL`. Ini tidak diketahui sampai backend Anda berjalan. Untuk mengaturnya:
- 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".
- Jika dijalankan di Codespaces, itu harus terlihat seperti "[name]app.github.dev".
## Tugas
@ -389,7 +383,7 @@ Bagus, Anda telah belajar dari awal cara membuat asisten pribadi menggunakan AI.
## Pengaturan dengan Codespaces
- Navigasikan ke: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Navigasikan ke: [Repo Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Buat dari template (pastikan Anda sudah login ke GitHub) di pojok kanan atas:
@ -403,4 +397,4 @@ Bagus, Anda telah belajar dari awal cara membuat asisten pribadi menggunakan AI.
---
**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.
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.
@ -13,25 +13,19 @@ Questo progetto di chat mostra come costruire un Assistente Chat utilizzando i M
Ecco come appare il progetto finito:
<div>
<imgsrc="./assets/screenshot.png"alt="App di chat"width="600">
</div>
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!
Un po' di contesto: costruire assistenti chat utilizzando l'IA generativa è un ottimo modo per iniziare a imparare sull'IA. In questa lezione imparerai a integrare l'IA generativa in un'app web. Iniziamo.
## Collegarsi all'AI generativa
## Connessione all'IA generativa
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)
Per il backend, utilizziamo i Modelli di GitHub. È un ottimo servizio che ti consente di utilizzare l'IA 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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Come detto, seleziona la scheda "Code" e il runtime che preferisci.
<div>
<imgsrc="./assets/playground-choice.png"alt="scelta del playground"with="600">
</div>
Con questa funzione `call_llm` possiamo ora prendere un prompt e un system prompt, e la funzione restituirà il risultato.
### Personalizzare l'Assistente AI
### Personalizza l'Assistente AI
Se vuoi personalizzare l'assistente AI, puoi specificare come vuoi che si comporti popolando il system prompt in questo modo:
Se vuoi personalizzare l'assistente AI, puoi specificare come desideri che si comporti popolando il system prompt in questo modo:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Esponilo tramite una Web API
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:
Perfetto, abbiamo completato la parte relativa all'IA. 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
@ -178,7 +172,7 @@ Per integrare *llm.py*, ecco cosa dobbiamo fare:
})
```
Ottimo, ora abbiamo fatto ciò che era necessario.
Perfetto, ora abbiamo fatto ciò che serve.
## Configurare Cors
@ -203,7 +197,7 @@ 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:
Ok, abbiamo *llm.py* e *api.py*. Come possiamo far funzionare tutto con un backend? Ci sono due cose che dobbiamo fare:
- Installare le dipendenze:
@ -223,9 +217,9 @@ Ok, abbiamo *llm.py* e *api.py*. Come possiamo far funzionare tutto con un backe
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".
### Lavorare su un frontend
### Lavora su un frontend
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:
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:
```text
backend/
@ -338,18 +332,18 @@ Passiamo ora allo stile. Qui puoi sbizzarrirti e personalizzarlo come preferisci
}
```
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`.
Con queste tre classi, puoi stilizzare i messaggi in modo diverso a seconda che provengano dall'assistente o da te come utente. Se vuoi ispirarti, dai un'occhiata alla cartella `solution/frontend/styles.css`.
### Cambiare la Base Url
### Cambia Base Url
C'è una cosa che non abbiamo impostato: `BASE_URL`. Questo valore non è noto finché il backend non è avviato. Per impostarlo:
C'è una cosa che non abbiamo impostato: `BASE_URL`. Questo non è noto fino a quando il backend non è avviato. Per impostarlo:
- Se esegui l'API localmente, dovrebbe essere qualcosa come `http://localhost:5000`.
- Se esegui in un Codespaces, dovrebbe essere qualcosa come "[name]app.github.dev".
- Se esegui in Codespaces, dovrebbe essere qualcosa come "[name]app.github.dev".
## Compito
Crea la tua cartella *project* con il contenuto seguente:
Crea la tua cartella *project* con il contenuto come segue:
```text
project/
@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard")
### Frontend
Cambia anche il CSS e il testo a tuo piacimento, quindi modifica*index.html* e *styles.css*.
Cambia anche il CSS e il testo a tuo piacimento, quindi apporta modifiche in*index.html* e *styles.css*.
## Riepilogo
Ottimo, hai imparato da zero come creare un assistente personale utilizzando l'AI. Lo abbiamo fatto utilizzando i Modelli di GitHub, un backend in Python e un frontend in HTML, CSS e JavaScript.
Ottimo, hai imparato da zero come creare un assistente personale utilizzando l'IA. Lo abbiamo fatto utilizzando i Modelli di GitHub, un backend in Python e un frontend in HTML, CSS e JavaScript.
## Configurazione con Codespaces
@ -403,4 +397,4 @@ Ottimo, hai imparato da zero come creare un assistente personale utilizzando l'A
---
**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.
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.
생성형 AI를 사용하여 채팅 어시스턴트를 만드는 것은 AI를 배우는 훌륭한 시작점입니다. 이번 레슨에서는 생성형 AI를 웹 앱에 통합하는 방법을 배울 것입니다. 시작해봅시다.
생성형 AI를 사용하여 채팅 어시스턴트를 만드는 것은 AI를 배우기 시작하는 훌륭한 방법입니다. 이번 레슨에서는 생성형 AI를 웹 앱에 통합하는 방법을 배울 것입니다. 시작해봅시다.
## 생성형 AI 연결하기
백엔드로는 GitHub Models를 사용합니다. 이 서비스는 무료로 AI를 사용할 수 있게 해주는 훌륭한 도구입니다. GitHub Models Playground로 이동하여 선택한 백엔드 언어에 해당하는 코드를 가져오세요. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)에서 확인할 수 있습니다.
백엔드로는 GitHub Models를 사용합니다. 이 서비스는 무료로 AI를 사용할 수 있게 해주는 훌륭한 도구입니다. GitHub Models Playground에 접속하여 선택한 백엔드 언어에 해당하는 코드를 가져오세요. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)에서 확인할 수 있습니다.
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
@ -403,4 +397,4 @@ CSS와 텍스트도 원하는 대로 변경하세요. *index.html*과 *styles.cs
---
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 신뢰할 수 있는 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.
Šiek tiek konteksto: kurti pokalbių asistentus naudojant generatyvinį AI yra puikus būdas pradėti mokytis apie dirbtinį intelektą. Šioje pamokoje išmoksite integruoti generatyvinį AI į internetinę programą. Pradėkime.
Šiek tiek konteksto: kurti pokalbių asistentus naudojant generatyvųjį AI yra puikus būdas pradėti mokytis apie dirbtinį intelektą. Šioje pamokoje išmoksite integruoti generatyvųjį AI į internetinę programą. Pradėkime.
## Prisijungimas prie generatyvinio AI
## Prisijungimas prie generatyviojo AI
Backend dalyje naudojame GitHub Models. Tai puiki paslauga, leidžianti nemokamai naudoti AI. Eikite į jos „playground“ ir paimkite kodą, atitinkantį jūsų pasirinktą backend kalbą. Štai kaip tai atrodo [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Kaip minėjome, pasirinkite „Code“ skirtuką ir savo pasirinktą vykdymo aplinką.
Su šia funkcija `call_llm` dabar galime pateikti užklausą ir sistemos užklausą, o funkcija grąžins rezultatą.
Naudodami funkciją `call_llm`, dabar galime pateikti užklausą ir sistemos užklausą, o funkcija grąžins rezultatą.
### AI asistento pritaikymas
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Čia sukuriame Flask API ir apibrėžiame numatytąjį maršrutą "/" ir "/chat". Pastarasis skirtas mūsų frontendui perduoti klausimus.
Čia sukuriame Flask API ir apibrėžiame numatytąjį maršrutą „/“ ir „/chat“. Pastarasis skirtas mūsų frontendui perduoti klausimus.
Norėdami integruoti *llm.py*, turime atlikti šiuos veiksmus:
@ -152,7 +146,7 @@ Norėdami integruoti *llm.py*, turime atlikti šiuos veiksmus:
from flask import Flask, request
```
- Iškvietimas iš "/chat" maršruto:
- Iškviesti ją iš „/chat“ maršruto:
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ Norėdami integruoti *llm.py*, turime atlikti šiuos veiksmus:
})
```
Čia analizuojame gaunamą užklausą, kad gautume `message` savybę iš JSON kūno. Po to iškviečiame LLM su šiuo skambučiu:
Čia analizuojame gaunamą užklausą, kad gautume `message` savybę iš JSON kūno. Tada iškviečiame LLM su šiuo skambučiu:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ Norėdami integruoti *llm.py*, turime atlikti šiuos veiksmus:
})
```
Puiku, dabar turime tai, ko reikia.
Puiku, dabar turime viską, ko reikia.
## Cors konfigūracija
## Cors konfigūravimas
Reikėtų paminėti, kad nustatėme kažką panašaus į CORS – išteklių dalijimąsi tarp skirtingų kilmių. Tai reiškia, kad kadangi mūsų backend ir frontend veiks skirtinguose portuose, turime leisti frontendui kreiptis į backend.
Reikėtų paminėti, kad nustatėme kažką panašaus į CORS –kryžminį išteklių dalijimąsi. Tai reiškia, kad kadangi mūsų backend ir frontend veiks skirtinguose portuose, turime leisti frontendui kreiptis į backend.
### Naudojant Python
Štai kodas *api.py*, kuris tai nustato:
*api.py* faile yra kodo dalis, kuri tai nustato:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Šiuo metu nustatyta leisti "*" – visas kilmes, tačiau tai nėra saugu. Turėtume tai apriboti, kai pereisime į gamybą.
Šiuo metu nustatyta, kad leidžiama „*“, tai yra visi šaltiniai, ir tai nėra labai saugu. Turėtume tai apriboti, kai pereisime į gamybą.
## Projekto paleidimas
@ -225,7 +219,7 @@ Gerai, turime *llm.py* ir *api.py*. Kaip tai padaryti, kad veiktų su backend?
### Darbas su frontend
Dabar, kai API veikia, sukurkime frontend. Minimalų frontend, kurį tobulinsime palaipsniui. Kataloge *frontend* sukurkite šiuos failus:
Dabar, kai API veikia, sukurkime frontend. Minimalų frontend, kurį tobulinsime palaipsniui. *frontend* aplanke sukurkite šiuos failus:
```text
backend/
@ -253,7 +247,7 @@ Pradėkime nuo **index.html**:
</html>
```
Tai yra absoliutus minimumas, kurio reikia pokalbių langui palaikyti, nes jis susideda iš teksto srities, kur bus rodomos žinutės, įvesties laukelio, kur rašyti žinutę, ir mygtuko, kuris siunčia jūsų žinutę į backend. Pažiūrėkime į JavaScript failą *app.js*.
Tai yra absoliutus minimumas, kurio reikia pokalbių langui palaikyti, nes jis susideda iš teksto srities, kurioje bus rodomi pranešimai, įvesties lauko, kuriame rašysite pranešimą, ir mygtuko, kuris siunčia jūsų pranešimą į backend. Pažiūrėkime į JavaScript failą *app.js*.
**app.js**
@ -312,12 +306,12 @@ Tai yra absoliutus minimumas, kurio reikia pokalbių langui palaikyti, nes jis s
Paaiškinkime kodą pagal sekcijas:
- 1) Čia gauname nuorodas į visus elementus, kuriuos naudosime vėliau kode.
- 2) Šioje sekcijoje sukuriame funkciją, kuri naudoja įmontuotą `fetch` metodą, kad kreiptųsi į mūsų backend.
- 3) `appendMessage` padeda pridėti atsakymus, taip pat tai, ką įvedate kaip vartotojas.
- 4) Čia klausomės „submit“ įvykio, skaitome įvesties laukelį, dedame vartotojo žinutę į teksto sritį, iškviečiame API, o atsakymą pateikiame teksto srityje.
- 1) Čia gauname nuorodą į visus elementus, kuriuos naudosime vėliau kode.
- 2) Šioje sekcijoje sukuriame funkciją, kuri naudoja įmontuotą `fetch` metodą, kad iškviestų mūsų backend.
- 3) `appendMessage` padeda pridėti atsakymus, taip pat tai, ką jūs kaip vartotojas įvedate.
- 4) Čia klausomės „submit“ įvykio, skaitome įvesties lauką, dedame vartotojo pranešimą į teksto sritį, iškviečiame API, o atsakymą pateikiame teksto srityje.
Pažiūrėkime į stilių, čia galite būti kūrybingi ir sukurti, kaip norite, bet štai keletas pasiūlymų:
Pažiūrėkime į stilių, čia galite būti kūrybingi ir sukurti tai, kas jums patinka, bet štai keletas pasiūlymų:
**styles.css**
@ -338,18 +332,18 @@ Pažiūrėkime į stilių, čia galite būti kūrybingi ir sukurti, kaip norite,
}
```
Su šiomis trimis klasėmis galite stiliuoti žinutes skirtingai, priklausomai nuo to, iš kur jos ateina – iš asistento ar iš jūsų kaip vartotojo. Jei norite įkvėpimo, pažiūrėkite į `solution/frontend/styles.css`katalogą.
Su šiomis trimis klasėmis galite stilizuoti pranešimus skirtingai, priklausomai nuo to, iš kur jie ateina – iš asistento ar iš jūsų kaip vartotojo. Jei norite įkvėpimo, pažiūrėkite į `solution/frontend/styles.css`aplanką.
### Pagrindinio URL keitimas
Čia buvo vienas dalykas, kurio nenustatėme –`BASE_URL`. Jis nežinomas, kol backend nepradėtas. Norėdami jį nustatyti:
Yra vienas dalykas, kurio dar nenustatėme – tai `BASE_URL`. Jis nežinomas, kol backend nėra paleistas. Norėdami jį nustatyti:
- Jei API paleidžiate lokaliai, jis turėtų būti nustatytas kaip `http://localhost:5000`.
- Jei paleidžiate Codespaces, jis turėtų atrodyti kaip "[name]app.github.dev".
- Jei paleidžiate Codespaces, jis turėtų atrodyti maždaug taip: "[name]app.github.dev".
## Užduotis
Sukurkite savo katalogą *project* su turiniu, kaip nurodyta:
Sukurkite savo aplanką *project* su turiniu, kaip nurodyta aukščiau:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Nukopijuokite turinį iš aukščiau pateiktų nurodymų, bet drąsiai pritaikykite pagal savo poreikius.
Nukopijuokite turinį iš to, kas buvo nurodyta aukščiau, bet drąsiai pritaikykite pagal savo norus.
## Sprendimas
@ -373,7 +367,7 @@ Pabandykite pakeisti AI asistento asmenybę.
### Naudojant Python
Kai iškviečiate `call_llm`*api.py*, galite pakeisti antrą argumentą į tai, ką norite, pavyzdžiui:
Kai iškviečiate `call_llm`*api.py* faile, galite pakeisti antrą argumentą į tai, ką norite, pavyzdžiui:
```python
call_llm(message, "You are Captain Picard")
@ -381,9 +375,9 @@ call_llm(message, "You are Captain Picard")
### Frontend
Taip pat pakeiskite CSS ir tekstą pagal savo poreikius, atlikite pakeitimus *index.html* ir *styles.css*.
Taip pat pakeiskite CSS ir tekstą pagal savo norus, atlikite pakeitimus *index.html* ir *styles.css*.
## Santrauka
## Apibendrinimas
Puiku, jūs išmokote nuo nulio sukurti asmeninį asistentą naudojant AI. Tai padarėme naudodami GitHub Models, backend su Python ir frontend su HTML, CSS ir JavaScript.
@ -396,7 +390,7 @@ Puiku, jūs išmokote nuo nulio sukurti asmeninį asistentą naudojant AI. Tai p
- Kai būsite savo repozitorijoje, sukurkite Codespace:
थोडक्यात, जनरेटिव्ह AI वापरून चॅट असिस्टंट तयार करणे AI शिकण्याची उत्तम सुरुवात आहे. या धड्यादरम्यान तुम्ही जनरेटिव्ह AI वेब अॅपमध्ये कसे समाकलित करायचे ते शिकाल. चला सुरुवात करूया.
थोडक्यात, जनरेटिव AI वापरून चॅट असिस्टंट तयार करणे हे AI शिकण्याची उत्तम सुरुवात आहे. या धड्यात तुम्ही जनरेटिव AI वेब अॅपमध्ये कसे समाकलित करायचे ते शिकाल. चला सुरुवात करूया.
## जनरेटिव्ह AI शी कनेक्ट करणे
## जनरेटिव AI शी कनेक्ट करणे
बॅकएंडसाठी, आम्ही GitHub Models वापरत आहोत. ही एक उत्कृष्ट सेवा आहे जी तुम्हाला AI विनामूल्य वापरण्याची परवानगी देते. त्याच्या प्लेग्राउंडवर जा आणि तुमच्या निवडलेल्या बॅकएंड भाषेशी संबंधित कोड मिळवा. GitHub Models Playground येथे कसे दिसते ते येथे आहे: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
जसे सांगितले, "Code" टॅब आणि तुमचा निवडलेला रनटाइम निवडा.
जर तुम्हाला AI असिस्टंट सानुकूलित करायचा असेल तर तुम्ही सिस्टम प्रॉम्प्ट भरून त्याचे वर्तन कसे असावे हे निर्दिष्ट करू शकता:
जर तुम्हाला AI असिस्टंट सानुकूलित करायचा असेल तर तुम्ही सिस्टम प्रॉम्प्ट भरून त्याचे वर्तन कसे असावे ते निर्दिष्ट करू शकता:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## वेब API द्वारे एक्सपोज करा
छान, आपला AI भाग पूर्ण झाला आहे, आता आपण वेब API मध्ये ते कसे समाकलित करू शकतो ते पाहूया. वेब API साठी, आम्ही Flask वापरण्याचा निर्णय घेतला आहे, परंतु कोणताही वेब फ्रेमवर्क चांगला असावा. त्यासाठी कोड पाहूया:
छान, आपला AI भाग पूर्ण झाला आहे, आता आपण वेब API मध्ये ते कसे समाकलित करू शकतो ते पाहूया. वेब API साठी, आम्ही Flask वापरण्याचा निर्णय घेतला आहे, परंतु कोणतेही वेब फ्रेमवर्क चांगले असावे. त्यासाठी कोड पाहूया:
### Python वापरणे
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
येथे, आम्ही एक Flask API तयार करतो आणि "/" आणि "/chat" नावाचे डिफॉल्ट रूट परिभाषित करतो. दुसरे रूट आमच्या फ्रंटएंडद्वारे प्रश्न पाठवण्यासाठी वापरले जाते.
येथे, आम्ही एक Flask API तयार करतो आणि "/" आणि "/chat" या डिफॉल्ट रूट्स परिभाषित करतो. दुसरा रूट आमच्या फ्रंटएंडद्वारे प्रश्न पाठवण्यासाठी वापरला जातो.
*llm.py* समाकलित करण्यासाठी आपल्याला हे करणे आवश्यक आहे:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
येथे आम्ही येणाऱ्या विनंतीचे विश्लेषण करून JSON बॉडीमधील `message` प्रॉपर्टी मिळवतो. त्यानंतर आम्ही LLM कॉल करतो:
येथे आम्ही येणाऱ्या विनंतीचे JSON बॉडीमधील `message` प्रॉपर्टी मिळवण्यासाठी पार्सिंग करतो. त्यानंतर आम्ही LLM ला कॉल करतो:
```python
response = call_llm(message, "You are a helpful assistant")
@ -182,11 +176,11 @@ if __name__ == "__main__":
## Cors कॉन्फिगर करा
आम्ही असे सांगावे की आम्ही Cors, क्रॉस-ऑरिजिन रिसोर्स शेअरिंग सेट केले आहे. याचा अर्थ असा की आमचा बॅकएंड आणि फ्रंटएंड वेगवेगळ्या पोर्टवर चालणार असल्यामुळे, आम्हाला फ्रंटएंडला बॅकएंडमध्ये कॉल करण्याची परवानगी द्यावी लागेल.
आपण असे सांगावे की आपण Cors सेट केले आहे, म्हणजे क्रॉस-ओरिजिन रिसोर्स शेअरिंग. याचा अर्थ असा की आमचा बॅकएंड आणि फ्रंटएंड वेगवेगळ्या पोर्टवर चालणार असल्यामुळे, आम्हाला फ्रंटएंडला बॅकएंडमध्ये कॉल करण्याची परवानगी द्यावी लागेल.
### Python वापरणे
*api.py* मध्ये एक कोड आहे जो हे सेट करतो:
*api.py* मध्ये Cors सेट करण्यासाठी कोड आहे:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
सध्या हे "*" म्हणजे सर्व ऑरिजिनसाठी सेट केले आहे आणि ते थोडे असुरक्षित आहे, उत्पादनात जाताना आम्ही ते मर्यादित केले पाहिजे.
सध्या हे "*" म्हणजे सर्व ओरिजिनसाठी सेट केले आहे, जे थोडे असुरक्षित आहे. उत्पादनात जाताना आपण ते मर्यादित करावे.
## तुमचा प्रोजेक्ट चालवा
@ -203,7 +197,7 @@ CORS(app) # * example.com
### Python वापरणे
ठीक आहे, आमच्याकडे *llm.py* आणि *api.py* आहे, बॅकएंडसह हे कसे कार्य करू शकते? बरं, दोन गोष्टी कराव्या लागतील:
ठीक आहे, आपल्याकडे *llm.py* आणि *api.py* आहे, बॅकएंडसह हे कसे कार्य करावे? दोन गोष्टी कराव्या लागतील:
- डिपेंडन्सी इंस्टॉल करा:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
जर तुम्ही Codespaces मध्ये असाल तर तुम्हाला एडिटरच्या खालच्या भागात पोर्ट्सवर जावे लागेल, त्यावर राईट-क्लिक करा आणि "Port Visibility" वर क्लिक करा आणि "Public" निवडा.
जर तुम्ही Codespaces मध्ये असाल तर तुम्हाला एडिटरच्या खालच्या भागात पोर्ट्समध्ये जावे लागेल, त्यावर राईट-क्लिक करा आणि "Port Visibility" वर क्लिक करा आणि "Public" निवडा.
### फ्रंटएंडवर काम करा
आता आमच्याकडे API चालू आहे, चला यासाठी फ्रंटएंड तयार करूया. एक साधा फ्रंटएंड जो आम्ही टप्प्याटप्प्याने सुधारू. *frontend* फोल्डरमध्ये खालील तयार करा:
आता आपल्याकडे API चालू आहे, चला यासाठी फ्रंटएंड तयार करूया. एक साधा फ्रंटएंड जो आपण हळूहळू सुधारू. *frontend* फोल्डरमध्ये खालील तयार करा:
```text
backend/
@ -310,14 +304,14 @@ styles.css
})();
```
कोडच्या प्रत्येक विभागावरून जाऊया:
कोडचे विभागवार स्पष्टीकरण:
- 1) येथे आम्ही आमच्या सर्व घटकांचा संदर्भ घेतो ज्याचा आम्ही नंतर कोडमध्ये संदर्भ घेऊ.
- 1) येथे आम्ही आमच्या सर्व घटकांचा संदर्भ घेतो ज्याचा आम्ही नंतर कोडमध्ये उल्लेख करू.
- 2) या विभागात, आम्ही एक फंक्शन तयार करतो जे बिल्ट-इन `fetch` पद्धत वापरते जी आमच्या बॅकएंडला कॉल करते.
- 3) `appendMessage`प्रतिसाद तसेच वापरकर्ता म्हणून तुम्ही टाइप करता ते जोडण्यास मदत करते.
- 4) येथे आम्ही सबमिट इव्हेंट ऐकतो आणि आम्ही इनपुट फील्ड वाचतो, वापरकर्त्याचा संदेश टेक्स्टएरियामध्ये ठेवतो, API कॉल करतो आणि टेक्स्टएरियामध्ये प्रतिसाद रेंडर करतो.
- 3) `appendMessage`वापरकर्त्याने टाइप केलेले तसेच असिस्टंटचे प्रतिसाद जोडण्यास मदत करते.
- 4) येथे आम्ही सबमिट इव्हेंट ऐकतो आणि इनपुट फील्ड वाचतो, वापरकर्त्याचा संदेश टेक्स्टएरियामध्ये ठेवतो, API कॉल करतो आणि टेक्स्टएरियामध्ये प्रतिसाद रेंडर करतो.
आता स्टाइलिंग पाहूया, येथे तुम्ही खूप क्रिएटिव्ह होऊ शकता आणि तुम्हाला हवे तसे दिसायला लावू शकता, परंतु येथे काही सूचना आहेत:
आता स्टाइलिंग पाहूया, येथे तुम्ही तुमच्या आवडीनुसार डिझाइन करू शकता, परंतु काही सूचना येथे आहेत:
**styles.css**
@ -338,14 +332,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" सारखे दिसेल.
- जर तुम्ही API स्थानिकपणे चालवत असाल, तर ते `http://localhost:5000` सारखे असावे.
- जर Codespaces मध्ये चालवत असाल, तर ते "[name]app.github.dev" सारखे दिसेल.
## असाइनमेंट
@ -361,19 +355,19 @@ project/
...
```
वरील दिलेल्या सूचनांमधून सामग्री कॉपी करा परंतु तुमच्या आवडीनुसार सानुकूलित करा.
वरील सूचनांमधून सामग्री कॉपी करा, परंतु तुमच्या आवडीनुसार सानुकूलित करा.
## सोल्यूशन
[Solution](./solution/README.md)
[सोल्यूशन](./solution/README.md)
## बोनस
AI असिस्टंटचा व्यक्तिमत्व बदलण्याचा प्रयत्न करा.
AI असिस्टंटचे व्यक्तिमत्व बदलून पहा.
### Python साठी
जेव्हा तुम्ही *api.py* मध्ये `call_llm` कॉल करता तेव्हा तुम्ही दुसरा आर्ग्युमेंट तुमच्या इच्छेनुसार बदलू शकता, उदाहरणार्थ:
जेव्हा तुम्ही *api.py* मध्ये `call_llm` कॉल करता, तेव्हा तुम्ही दुसरा आर्ग्युमेंट तुमच्या आवडीनुसार बदलू शकता, उदाहरणार्थ:
```python
call_llm(message, "You are Captain Picard")
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### फ्रंटएंड
CSS आणि टेक्स्ट देखील तुमच्या आवडीनुसार बदला, त्यामुळे *index.html* आणि *styles.css* मध्ये बदल करा.
CSS आणि टेक्स्ट देखील तुमच्या आवडीनुसार बदला, म्हणजे *index.html* आणि *styles.css* मध्ये बदल करा.
## सारांश
छान, तुम्ही AI वापरून वैयक्तिक असिस्टंट कसे तयार करायचे ते शून्यापासून शिकले. आम्ही GitHub 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 मध्ये लॉग इन असल्याची खात्री करा) वरच्या उजव्या कोपऱ्यात:
यामुळे तुम्ही आता काम करू शकता असे वातावरण सुरू होईल.
---
**अस्वीकरण**:
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) चा वापर करून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
Sedikit konteks, membina pembantu chat menggunakan AI generatif adalah cara yang hebat untuk mula belajar tentang AI. Apa yang akan anda pelajari ialah cara mengintegrasikan AI generatif ke dalam aplikasi web sepanjang pelajaran ini, mari kita mulakan.
## Menyambung ke AI Generatif
Untuk bahagian backend, kami menggunakan Model GitHub. Ia adalah perkhidmatan hebat yang membolehkan anda menggunakan AI secara percuma. Pergi ke ruang mainannya dan ambil kod yang sepadan dengan bahasa backend pilihan anda. Berikut adalah rupa ruang mainan tersebut di [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Untuk bahagian backend, kami menggunakan Model GitHub. Ia adalah perkhidmatan hebat yang membolehkan anda menggunakan AI secara percuma. Pergi ke ruang mainannya dan ambil kod yang sepadan dengan bahasa backend pilihan anda. Berikut adalah rupa ruang mainan di [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Seperti yang dinyatakan, pilih tab "Code" dan runtime pilihan anda.
Dengan fungsi `call_llm` ini, kita kini boleh mengambil prompt dan sistem prompt, dan fungsi ini akan mengembalikan hasilnya.
### Menyesuaikan Pembantu AI
### Sesuaikan Pembantu AI
Jika anda ingin menyesuaikan pembantu AI, anda boleh menentukan bagaimana anda mahu ia berkelakuan dengan mengisi sistem prompt seperti berikut:
@ -106,9 +100,9 @@ Jika anda ingin menyesuaikan pembantu AI, anda boleh menentukan bagaimana anda m
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Dedahkan melalui API Web
## Dedahkan melalui Web API
Hebat, bahagian AI telah selesai, mari kita lihat bagaimana kita boleh mengintegrasikannya ke dalam API Web. Untuk API Web, kami memilih untuk menggunakan Flask, tetapi mana-mana rangka kerja web juga boleh digunakan. Mari lihat kodnya:
Hebat, kita telah menyelesaikan bahagian AI, mari kita lihat bagaimana kita boleh mengintegrasikannya ke dalam Web API. Untuk Web API, kami memilih untuk menggunakan Flask, tetapi mana-mana rangka kerja web sepatutnya berfungsi. Mari lihat kodnya:
### Menggunakan Python
@ -143,7 +137,7 @@ if __name__ == "__main__":
Di sini, kami mencipta API Flask dan mentakrifkan laluan lalai "/" dan "/chat". Laluan kedua ini bertujuan untuk digunakan oleh frontend kami untuk menghantar soalan kepadanya.
Untuk mengintegrasikan *llm.py*, berikut adalah apa yang perlu dilakukan:
Untuk mengintegrasikan *llm.py*, berikut adalah apa yang perlu kita lakukan:
- Import fungsi `call_llm`:
@ -203,7 +197,7 @@ Untuk menjalankan projek anda, anda perlu memulakan backend terlebih dahulu dan
### Menggunakan Python
Baiklah, jadi kita ada *llm.py* dan *api.py*, bagaimana kita boleh membuat ini berfungsi dengan backend? Ada dua perkara yang perlu dilakukan:
Baiklah, jadi kita ada *llm.py* dan *api.py*, bagaimana kita boleh membuat ini berfungsi dengan backend? Ada dua perkara yang perlu kita lakukan:
- Pasang kebergantungan:
@ -221,7 +215,7 @@ Baiklah, jadi kita ada *llm.py* dan *api.py*, bagaimana kita boleh membuat ini b
python api.py
```
Jika anda berada dalam Codespaces, anda perlu pergi ke Ports di bahagian bawah editor, klik kanan padanya dan klik "Port Visibility" dan pilih "Public".
Jika anda berada dalam Codespaces, anda perlu pergi ke Ports di bahagian bawah editor, klik kanan di atasnya dan klik "Port Visibility" dan pilih "Public".
### Kerja pada Frontend
@ -253,7 +247,7 @@ Mari mulakan dengan **index.html**:
</html>
```
Di atas adalah minimum yang diperlukan untuk menyokong tetingkap chat, kerana ia terdiri daripada textarea di mana mesej akan dipaparkan, input untuk menaip mesej, dan butang untuk menghantar mesej anda ke backend. Mari lihat JavaScript seterusnya dalam *app.js*
Di atas adalah minimum mutlak yang anda perlukan untuk menyokong tetingkap chat, kerana ia terdiri daripada textarea di mana mesej akan dipaparkan, input untuk menaip mesej, dan butang untuk menghantar mesej anda ke backend. Mari lihat JavaScript seterusnya dalam *app.js*
**app.js**
@ -312,12 +306,12 @@ Di atas adalah minimum yang diperlukan untuk menyokong tetingkap chat, kerana ia
Mari kita lihat kod ini mengikut bahagian:
- 1) Di sini kita mendapatkan rujukan kepada semua elemen yang akan dirujuk kemudian dalam kod.
- 2) Dalam bahagian ini, kita mencipta fungsi yang menggunakan kaedah terbina dalam`fetch` untuk memanggil backend kita.
- 1) Di sini kita mendapatkan rujukan kepada semua elemen yang akan kita rujuk kemudian dalam kod.
- 2) Dalam bahagian ini, kita mencipta fungsi yang menggunakan kaedah `fetch`terbina dalam untuk memanggil backend kita.
- 3) `appendMessage` membantu menambah respons serta apa yang anda taip sebagai pengguna.
- 4) Di sini kita mendengar acara submit dan akhirnya membaca medan input, meletakkan mesej pengguna dalam textarea, memanggil API, dan memaparkan respons dalam textarea.
Mari lihat gaya seterusnya, di sini anda boleh menjadi kreatif dan membuatnya kelihatan seperti yang anda mahukan, tetapi berikut adalah beberapa cadangan:
Mari lihat gaya seterusnya, di sini anda boleh menjadi kreatif dan membuatnya kelihatan seperti yang anda mahu, tetapi berikut adalah beberapa cadangan:
**styles.css**
@ -338,14 +332,14 @@ Mari lihat gaya seterusnya, di sini anda boleh menjadi kreatif dan membuatnya ke
}
```
Dengan tiga kelas ini, anda akan menggayakan mesej secara berbeza bergantung pada asalnya, sama ada dari pembantu atau anda sebagai pengguna. Jika anda ingin mendapatkan inspirasi, lihat folder `solution/frontend/styles.css`.
Dengan tiga kelas ini, anda akan menggayakan mesej secara berbeza bergantung pada asalnya, sama ada daripada pembantu atau anda sebagai pengguna. Jika anda ingin mendapatkan inspirasi, lihat folder `solution/frontend/styles.css`.
### Tukar Base Url
Ada satu perkara di sini yang belum kita tetapkan iaitu `BASE_URL`, ini tidak diketahui sehingga backend anda dimulakan. Untuk menetapkannya:
- Jika anda menjalankan API secara tempatan, ia harus ditetapkan kepada sesuatu seperti `http://localhost:5000`.
- Jika dijalankan dalam Codespaces, ia mungkin kelihatan seperti "[name]app.github.dev".
- Jika anda menjalankan API secara tempatan, ia sepatutnya ditetapkan kepada sesuatu seperti `http://localhost:5000`.
- Jika dijalankan dalam Codespaces, ia sepatutnya kelihatan seperti "[name]app.github.dev".
## Tugasan
@ -373,7 +367,7 @@ Cuba ubah personaliti pembantu AI.
### Untuk Python
Apabila anda memanggil `call_llm` dalam *api.py*, anda boleh menukar argumen kedua kepada apa sahaja yang anda mahu, contohnya:
Apabila anda memanggil `call_llm` dalam *api.py*, anda boleh menukar argumen kedua kepada apa yang anda mahu, contohnya:
```python
call_llm(message, "You are Captain Picard")
@ -387,7 +381,7 @@ Ubah juga CSS dan teks mengikut kesukaan anda, jadi buat perubahan dalam *index.
Hebat, anda telah belajar dari awal cara mencipta pembantu peribadi menggunakan AI. Kami telah melakukannya menggunakan Model GitHub, backend dalam Python, dan frontend dalam HTML, CSS, dan JavaScript.
## Tetapkan dengan Codespaces
## Sediakan dengan Codespaces
- Navigasi ke: [Repo Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Cipta daripada templat (pastikan anda log masuk ke GitHub) di sudut kanan atas:
@ -398,9 +392,9 @@ Hebat, anda telah belajar dari awal cara mencipta pembantu peribadi menggunakan
Ini akan memulakan persekitaran yang kini boleh anda gunakan.
Ini sepatutnya memulakan persekitaran yang kini boleh anda gunakan.
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
`call_llm` ဆိုတဲ့ function နဲ့ prompt တစ်ခုနဲ့ system prompt တစ်ခုကို ထည့်ပြီး ရလဒ်ကို ပြန်ပေးနိုင်ပါပြီ။
ဒီ `call_llm` function နဲ့ prompt တစ်ခုနဲ့ system prompt တစ်ခုကို ထည့်ပြီး function က အဖြေကို ပြန်ပေးပါလိမ့်မယ်။
### AI Assistant ကို Customize လုပ်ခြင်း
AI assistant ကို သင့်လိုအပ်ချက်အတိုင်း ပြင်ဆင်ချင်ရင် system prompt ကို ဒီလိုဖြည့်စွက်နိုင်ပါတယ်:
AI assistant ကို သင့်လိုအပ်ချက်အတိုင်း ပြင်ဆင်ချင်ရင် system prompt ကို ဒီလိုပုံစံဖြင့် ဖြည့်စွက်နိုင်ပါတယ်:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Web API မှတစ်ဆင့် ထုတ်ဖော်ခြင်း
## Web API မှတဆင့် ထုတ်ဖော်ခြင်း
AI အပိုင်းကို ပြီးဆုံးသွားပြီဆိုရင်၊ Web API ထဲမှာ ဘယ်လိုပေါင်းစည်းရမလဲဆိုတာ ကြည့်ကြရအောင်။ Web API အတွက် Flask ကို အသုံးပြုထားပေမယ့်၊ ဘယ် web framework မဆို အသုံးပြုနိုင်ပါတယ်။ Code ကို ကြည့်ကြရအောင်:
အကောင်းဆုံးပါပြီ၊ AI အပိုင်းကို ပြီးမြောက်သွားပြီ၊ အခု Web API အတွင်းမှာ ပေါင်းစည်းပေးရအောင်။ Web API အတွက် Flask ကို ရွေးချယ်ထားပါတယ်၊ ဒါပေမယ့် ဘယ် web framework မဆို အသုံးပြုနိုင်ပါတယ်။ ဒီ code ကို ကြည့်လိုက်ရအောင်:
थप सन्दर्भका लागि, जेनेरेटिभ एआई प्रयोग गरेर च्याट असिस्टेन्ट बनाउनु एआई सिक्न सुरु गर्नको लागि उत्कृष्ट तरिका हो। यस पाठक्रममा, तपाईंले जेनेरेटिभ एआईलाई वेब एपमा कसरी एकीकृत गर्ने भनेर सिक्नुहुनेछ। सुरु गरौं।
थप सन्दर्भको लागि, जेनेरेटिभ एआई प्रयोग गरेर च्याट सहायक निर्माण गर्नु एआई सिक्न सुरु गर्ने उत्कृष्ट तरिका हो। यस पाठको क्रममा, तपाईंले जेनेरेटिभ एआईलाई वेब एपमा कसरी एकीकृत गर्ने सिक्नुहुनेछ। सुरु गरौं।
## जेनेरेटिभ एआईसँग जडान गर्नुहोस्
ब्याकएन्डको लागि, हामी GitHub Models प्रयोग गर्दैछौं। यो एक उत्कृष्ट सेवा हो जसले तपाईंलाई निःशुल्क एआई प्रयोग गर्न सक्षम बनाउँछ। यसको प्लेग्राउन्डमा जानुहोस् र तपाईंको रोजाइको ब्याकएन्ड भाषासँग मेल खाने कोड लिनुहोस्। यो यसरी देखिन्छ: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
ब्याकएन्डको लागि, हामी GitHub Models प्रयोग गर्दैछौं। यो एक उत्कृष्ट सेवा हो जसले तपाईंलाई निःशुल्क एआई प्रयोग गर्न सक्षम बनाउँछ। यसको प्लेग्राउन्डमा जानुहोस् र तपाईंले रोजेको ब्याकएन्ड भाषासँग मेल खाने कोड प्राप्त गर्नुहोस्। यो [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) मा यस्तो देखिन्छ।
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
जसरी भनिएको छ, "Code" ट्याब र तपाईंको रोजाइको रनटाइम चयन गर्नुहोस्।
जसरी भनिएको थियो, "Code" ट्याब र तपाईंले रोजेको रनटाइम चयन गर्नुहोस्।
`call_llm` नामक यो फङ्सनले अब एउटा प्रम्प्ट र सिस्टम प्रम्प्ट लिन्छ र परिणाम फर्काउँछ।
यो `call_llm` फङ्सनको साथमा हामीले अब एक प्रम्प्ट र सिस्टम प्रम्प्ट लिन सक्छौं र फङ्सनले नतिजा फर्काउँछ।
### एआई असिस्टेन्टलाई अनुकूलन गर्नुहोस्
### एआई सहायकलाई अनुकूलित गर्नुहोस्
यदि तपाईं एआई असिस्टेन्टलाई अनुकूलन गर्न चाहनुहुन्छ भने, तपाईं यसलाई कसरी व्यवहार गर्न चाहनुहुन्छ भनेर सिस्टम प्रम्प्टमा यसरी निर्दिष्ट गर्न सक्नुहुन्छ:
यदि तपाईं एआई सहायकलाई अनुकूलित गर्न चाहनुहुन्छ भने, तपाईंले सिस्टम प्रम्प्टलाई यसरी भरिदिएर यसको व्यवहार निर्दिष्ट गर्न सक्नुहुन्छ:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## यसलाई वेब एपीआई मार्फत सार्वजनिक गर्नुहोस्
## वेब एपीआई मार्फत यसलाई सार्वजनिक गर्नुहोस्
उत्तम, हामीले एआई भाग पूरा गर्यौं, अब यसलाई वेब एपीआईमा कसरी एकीकृत गर्न सकिन्छ हेरौं। वेब एपीआईको लागि, हामी Flask प्रयोग गर्दैछौं, तर कुनै पनि वेब फ्रेमवर्क राम्रो हुन सक्छ। यसको कोड यसरी देखिन्छ:
उत्तम, हामीले एआई भाग पूरा गर्यौं, अब हेर्नुहोस् कि हामी यसलाई वेब एपीआईमा कसरी एकीकृत गर्न सक्छौं। वेब एपीआईको लागि, हामी Flask प्रयोग गर्दैछौं, तर कुनै पनि वेब फ्रेमवर्क राम्रो हुनेछ। यसको कोड हेर्नुहोस्:
### Python प्रयोग गर्दै
@ -141,11 +135,11 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
यहाँ, हामीले एउटा Flask API बनायौं र "/" र "/chat" नामक दुई रुट परिभाषित गर्यौं। दोस्रो रुट हाम्रो फ्रन्टएन्डले प्रश्नहरू पठाउन प्रयोग गर्ने उद्देश्यले बनाइएको हो।
यहाँ, हामीले एक फ्लास्क एपीआई सिर्जना गर्छौं र "/" र "/chat" नामक डिफल्ट रुट परिभाषित गर्छौं। पछिल्लो रुट हाम्रो फ्रन्टएन्डले प्रश्नहरू पठाउन प्रयोग गर्न सकिन्छ।
*llm.py* लाई एकीकृत गर्नका लागि, हामीले निम्न गर्नुपर्छ:
*llm.py* लाई एकीकृत गर्नका लागि हामीले निम्न गर्नुपर्छ:
- `call_llm` फङ्सन इम्पोर्ट गर्नुहोस्:
- `call_llm` फङ्सनलाई इम्पोर्ट गर्नुहोस्:
```python
from llm import call_llm
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
यहाँ हामी इनकमिङ अनुरोधलाई पार्स गरेर JSON बडीबाट `message` प्रोपर्टी निकाल्छौं। त्यसपछि हामी LLMलाई यसरी कल गर्छौं:
यहाँ हामीले आउने अनुरोधलाई पार्स गरेर JSON बडीबाट `message` प्रोपर्टी प्राप्त गर्छौं। त्यसपछि हामीले LLMलाई यसरी कल गर्छौं:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
उत्तम, अब हामीले आवश्यक सबै काम गरिसक्यौं।
उत्तम, अब हामीले आवश्यक सबै काम गर्यौं।
## Cors कन्फिगर गर्नुहोस्
हामीले CORS, अर्थात् क्रस-ओरिजिन रिसोर्स सेयरिङ सेटअप गरेको कुरा उल्लेख गर्नुपर्छ। यसको मतलब हाम्रो ब्याकएन्ड र फ्रन्टएन्ड फरक पोर्टमा चल्ने भएकाले, हामीले फ्रन्टएन्डलाई ब्याकएन्डमा कल गर्न अनुमति दिनुपर्छ।
हामीले Cors, अर्थात् क्रस-ओरिजिन रिसोर्स सेयरिङ सेटअप गरेको कुरा उल्लेख गर्नुपर्छ। यसको मतलब हाम्रो ब्याकएन्ड र फ्रन्टएन्ड फरक पोर्टमा चल्ने भएकाले, हामीले फ्रन्टएन्डलाई ब्याकएन्डमा कल गर्न अनुमति दिनुपर्छ।
### Python प्रयोग गर्दै
*api.py* मा यो सेटअप गर्ने कोडको टुक्रा छ:
*api.py* मा यस्तो कोड छ जसले यसलाई सेटअप गर्छ:
```python
from flask_cors import CORS
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
हाल यो "*" अर्थात् सबै ओरिजिनलाई अनुमति दिन सेट गरिएको छ, जुन अलि असुरक्षित छ। उत्पादनमा जाँदा यसलाई सीमित गर्नुपर्छ।
हाल "*", अर्थात् सबै ओरिजिनलाई अनुमति दिइएको छ, जुन अलि असुरक्षित छ। हामीले यो उत्पादनमा जाँदा सीमित गर्नुपर्छ।
## तपाईंको प्रोजेक्ट चलाउनुहोस्
## आफ्नो प्रोजेक्ट चलाउनुहोस्
तपाईंको प्रोजेक्ट चलाउन, पहिले ब्याकएन्ड र त्यसपछि फ्रन्टएन्ड सुरु गर्नुपर्छ।
आफ्नो प्रोजेक्ट चलाउन, तपाईंले पहिले आफ्नो ब्याकएन्ड सुरु गर्नुपर्छ र त्यसपछि फ्रन्टएन्ड।
### Python प्रयोग गर्दै
ठिक छ, हामीसँग *llm.py* र *api.py* छ, अब ब्याकएन्डसँग यो कसरी काम गर्ने बनाउने? दुई कुरा गर्नुपर्छ:
- निर्भरता इन्स्टल गर्नुहोस्:
- डिपेन्डेन्सीहरू इन्स्टल गर्नुहोस्:
```sh
cd backend
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
यदि तपाईं Codespaces मा हुनुहुन्छ भने, सम्पादकको तल्लो भागमा रहेको पोर्टमा जानुहोस्, त्यसमा दायाँ-क्लिक गर्नुहोस् र "Port Visibility" मा क्लिक गरेर "Public" चयन गर्नुहोस्।
यदि तपाईं Codespaces मा हुनुहुन्छ भने, तपाईंले एडिटरको तल्लो भागमा Ports मा जानुपर्छ, त्यसमा राइट-क्लिक गरेर "Port Visibility" मा क्लिक गर्नुहोस् र "Public" चयन गर्नुहोस्।
### फ्रन्टएन्डमा काम गर्नुहोस्
अब हामीसँग एपीआई चलिरहेको छ, यसका लागि फ्रन्टएन्ड बनाऔं। एक न्यूनतम फ्रन्टएन्ड जसलाई हामी क्रमशः सुधार गर्नेछौं। *frontend* फोल्डरमा निम्न बनाउनुहोस्:
अब हामीसँग एपीआई चलिरहेको छ, यसका लागि फ्रन्टएन्ड बनाउँ। एक न्यूनतम फ्रन्टएन्ड जसलाई हामी क्रमिक रूपमा सुधार गर्नेछौं। *frontend* फोल्डरमा निम्न सिर्जना गर्नुहोस्:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
माथिको कोडले च्याट विन्डोलाई समर्थन गर्न आवश्यक न्यूनतम कुरा समावेश गर्दछ। यसमा सन्देशहरू देखाउनका लागि एउटा textarea, सन्देश टाइप गर्नका लागि इनपुट र ब्याकएन्डमा सन्देश पठाउनका लागि बटन छ। अब *app.js* मा JavaScript हेरौं:
माथिको कोड च्याट विन्डोलाई समर्थन गर्न आवश्यक न्यूनतम हो। यसमा टेक्स्ट एरिया छ जहाँ सन्देशहरू देखिन्छन्, इनपुट छ जहाँ सन्देश टाइप गर्न सकिन्छ, र बटन छ जसले सन्देशलाई ब्याकएन्डमा पठाउँछ। अब *app.js* मा JavaScript हेर्नुहोस्।
**app.js**
@ -310,14 +304,14 @@ styles.css
})();
```
कोडलाई खण्ड अनुसार हेरौं:
कोडलाई खण्ड अनुसार हेर्नुहोस्:
- 1) यहाँ हामीले सबै तत्वहरूको रेफरेन्स लिन्छौं जसलाई पछि कोडमा प्रयोग गरिन्छ।
- 2) यस खण्डमा, हामीले `fetch` विधि प्रयोग गरेर ब्याकएन्डलाई कल गर्ने फङ्सन बनाउँछौं।
- 3) `appendMessage` ले प्रयोगकर्ताले टाइप गरेको र असिस्टेन्टको प्रतिक्रिया दुवै थप्न मद्दत गर्छ।
- 4) यहाँ हामीले submit इभेन्टलाई सुन्छौं र इनपुट फिल्ड पढ्छौं, प्रयोगकर्ताको सन्देशलाई textarea मा राख्छौं, एपीआईलाई कल गर्छौं, र प्रतिक्रिया textarea मा देखाउँछौं।
- १) यहाँ हामीले सबै एलिमेन्टहरूको रेफरेन्स लिन्छौं जसलाई पछि कोडमा प्रयोग गरिन्छ।
- २) यस खण्डमा, हामीले एक फङ्सन बनाउँछौं जसले बिल्ट-इन `fetch` मेथड प्रयोग गरेर हाम्रो ब्याकएन्डलाई कल गर्छ।
- ३) `appendMessage` ले प्रतिक्रियाहरू र प्रयोगकर्ताले टाइप गरेको सन्देश थप्न मद्दत गर्छ।
- ४) यहाँ हामीले सबमिट इभेन्टलाई सुन्छौं र इनपुट फिल्ड पढ्छौं, प्रयोगकर्ताको सन्देश टेक्स्ट एरियामा राख्छौं, एपीआईलाई कल गर्छौं, र प्रतिक्रियालाई टेक्स्ट एरियामा देखाउँछौं।
अब स्टाइलिङ हेरौं, यहाँ तपाईंले आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, तर केही सुझावहरू यस्ता छन्:
अब स्टाइलिङ हेर्नुहोस्, यहाँ तपाईंले आफ्नो इच्छाअनुसार डिजाइन गर्न सक्नुहुन्छ, तर केही सुझावहरू यहाँ छन्:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
यी तीन कक्षाहरूले सन्देशहरूलाई स्रोत अनुसार फरक तरिकाले स्टाइल गर्छन्, चाहे त्यो असिस्टेन्टबाट होस् वा प्रयोगकर्ताबाट। प्रेरणाका लागि,`solution/frontend/styles.css` फोल्डर हेर्नुहोस्।
यी तीन क्लासहरूले सन्देशलाई सहायकबाट आएको हो वा प्रयोगकर्ताबाट आएको हो भनेर फरक देखाउन स्टाइल गर्छ। प्रेरित हुन चाहनुहुन्छ भने`solution/frontend/styles.css` फोल्डर हेर्नुहोस्।
### बेस युआरएल परिवर्तन गर्नुहोस्
### Base Url परिवर्तन गर्नुहोस्
यहाँ एउटा कुरा सेट गरिएको थिएन, त्यो हो `BASE_URL`, जुन ब्याकएन्ड सुरु नभएसम्म थाहा हुँदैन। यसलाई सेट गर्न:
यहाँ एउटा कुरा सेट गरिएको थिएन, त्यो हो `BASE_URL`, यो ब्याकएन्ड सुरु नभएसम्म थाहा हुँदैन। यसलाई सेट गर्न:
- यदि तपाईंले एपीआई स्थानीय रूपमा चलाउनुहुन्छ भने, यो `http://localhost:5000` जस्तो हुनुपर्छ।
- यदि तपाईंले एपीआई स्थानीय रूपमा चलाउनुहुन्छ भने, यसलाई `http://localhost:5000` जस्तो सेट गर्नुपर्छ।
- यदि Codespaces मा चलाउनुहुन्छ भने, यो "[name]app.github.dev" जस्तो देखिन्छ।
## असाइनमेन्ट
तपाईंको आफ्नै *project* फोल्डर बनाउनुहोस् जसमा निम्न सामग्री होस्:
आफ्नै *project* फोल्डर बनाउनुहोस् जसको सामग्री यस प्रकार हो:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
माथि दिइएको निर्देशनबाट सामग्री प्रतिलिपि गर्नुहोस् तर तपाईंको इच्छाअनुसार अनुकूलन गर्न स्वतन्त्र महसुस गर्नुहोस्।
माथि उल्लेख गरिएको सामग्रीलाई प्रतिलिपि गर्नुहोस् तर आफ्नो इच्छाअनुसार अनुकूलित गर्न स्वतन्त्र हुनुहोस्।
## समाधान
@ -369,11 +363,11 @@ project/
## बोनस
एआई असिस्टेन्टको व्यक्तित्व परिवर्तन गर्ने प्रयास गर्नुहोस्।
एआई सहायकको व्यक्तित्व परिवर्तन गर्न प्रयास गर्नुहोस्।
### Python को लागि
जब तपाईं *api.py* मा `call_llm` कल गर्नुहुन्छ, तपाईं दोस्रो आर्गुमेन्टलाई आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, जस्तै:
जब तपाईं *api.py* मा `call_llm` कल गर्नुहुन्छ, तपाईंले दोस्रो आर्गुमेन्टलाई आफ्नो इच्छाअनुसार परिवर्तन गर्न सक्नुहुन्छ, उदाहरणका लागि:
```python
call_llm(message, "You are Captain Picard")
@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard")
### फ्रन्टएन्ड
CSS र पाठलाई पनि आफ्नो इच्छाअनुसार परिवर्तन गर्नुहोस्, त्यसैले *index.html* र *styles.css* मा परिवर्तन गर्नुहोस्।
CSS र टेक्स्टलाई पनि आफ्नो इच्छाअनुसार परिवर्तन गर्नुहोस्, त्यसैले *index.html* र *styles.css* मा परिवर्तन गर्नुहोस्।
## संक्षेप
## सारांश
उत्तम, तपाईंले एआई प्रयोग गरेर व्यक्तिगत असिस्टेन्ट कसरी बनाउने भनेर सुरुबाट सिक्नुभयो। हामीले GitHub Models, Python मा ब्याकएन्ड, र HTML, CSS, JavaScript मा फ्रन्टएन्ड प्रयोग गरेर यो गरेका छौं।
उत्तम, तपाईंले एआई प्रयोग गरेर व्यक्तिगत सहायक कसरी बनाउने भन्ने कुरा सुरुबाट सिक्नुभयो। हामीले GitHub Models, Python मा ब्याकएन्ड, र HTML, CSS, JavaScript मा फ्रन्टएन्ड प्रयोग गरेर यो गरेका छौं।
## Codespaces सेटअप गर्नुहोस्
- यहाँ जानुहोस्: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- टेम्प्लेटबाट सिर्जना गर्नुहोस् (GitHub मा लगइन भएको सुनिश्चित गर्नुहोस्) माथिल्लो दायाँ कुनामा:
- टेम्प्लेटबाट सिर्जना गर्नुहोस् (GitHub मा लगइन भएको सुनिश्चित गर्नुहोस्) माथि-दायाँ कुनामा:
Wat context: het bouwen van chatassistenten met generatieve AI is een geweldige manier om te beginnen met leren over AI. In deze les leer je hoe je generatieve AI integreert in een webapplicatie. Laten we beginnen.
## Verbinden met generatieve AI
Voor de backend gebruiken we GitHub Models. Dit is een geweldige dienst waarmee je gratis AI kunt gebruiken. Ga naar de playground en haal de code op die overeenkomt met de door jou gekozen backend-taal. Hier is hoe het eruitziet op [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Voor de backend gebruiken we GitHub Models. Dit is een geweldige service waarmee je gratis AI kunt gebruiken. Ga naar de playground en haal de code op die overeenkomt met de door jou gekozen backend-taal. Hier is hoe het eruitziet op [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Zoals gezegd, selecteer het tabblad "Code" en kies je runtime.
Zoals gezegd, selecteer het tabblad "Code" en jouw gekozen runtime.
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Exposeer het via een Web API
Geweldig, we hebben het AI-gedeelte klaar. Laten we nu kijken hoe we dit kunnen integreren in een Web API. Voor de Web API kiezen we Flask, maar elk webframework zou geschikt moeten zijn. Hier is de code:
Geweldig, we hebben het AI-gedeelte klaar. Laten we nu kijken hoe we dit kunnen integreren in een Web API. Voor de Web API kiezen we Flask, maar elk webframework zou goed moeten werken. Hier is de code:
### Gebruik van Python
@ -152,7 +146,7 @@ Om *llm.py* te integreren, moeten we het volgende doen:
from flask import Flask, request
```
- Roep het aan vanuit de "/chat"route:
- Roep het aan vanuit de "/chat"-route:
```python
@app.route("/hello", methods=["POST"])
@ -182,7 +176,7 @@ Geweldig, nu hebben we gedaan wat nodig is.
## Cors configureren
We moeten vermelden dat we iets als CORS hebben ingesteld, oftewel cross-origin resource sharing. Dit betekent dat, omdat onze backend en frontend op verschillende poorten draaien, we de frontend toegang moeten geven tot de backend.
We moeten vermelden dat we iets zoals CORS hebben ingesteld, oftewel cross-origin resource sharing. Dit betekent dat, omdat onze backend en frontend op verschillende poorten draaien, we de frontend toegang moeten geven tot de backend.
### Gebruik van Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Op dit moment is het ingesteld om "*" toe te staan, wat alle origins betekent, en dat is een beetje onveilig. We zouden dit moeten beperken zodra we naar productie gaan.
Op dit moment is het ingesteld om "*" toe te staan, wat alle origins betekent, en dat is een beetje onveilig. We moeten dit beperken zodra we naar productie gaan.
## Voer je project uit
@ -221,11 +215,11 @@ Oké, we hebben *llm.py* en *api.py*. Hoe kunnen we dit laten werken met een bac
python api.py
```
Als je in Codespaces werkt, moet je naar Ports gaan in het onderste deel van de editor, er met de rechtermuisknop op klikken en "Port Visibility" selecteren en "Public" kiezen.
Als je in Codespaces werkt, moet je naar Ports gaan in het onderste deel van de editor, er met de rechtermuisknop op klikken, "Port Visibility" selecteren en "Public" kiezen.
### Werk aan een frontend
Nu we een API hebben draaien, laten we een frontend maken. Een minimale frontend die we stap voor stap zullen verbeteren. Maak in een *frontend* map het volgende:
Nu we een API hebben draaien, laten we een frontend maken. Een minimale frontend die we stap voor stap zullen verbeteren. Maak in een *frontend*-map het volgende aan:
```text
backend/
@ -253,7 +247,7 @@ Laten we beginnen met **index.html**:
</html>
```
Bovenstaande is het absolute minimum dat je nodig hebt om een chatvenster te ondersteunen. Het bestaat uit een tekstgebied waar berichten worden weergegeven, een invoerveld om berichten te typen en een knop om je bericht naar de backend te sturen. Laten we nu naar de JavaScript kijken in *app.js*.
Het bovenstaande is het absolute minimum dat je nodig hebt om een chatvenster te ondersteunen. Het bestaat uit een tekstgebied waar berichten worden weergegeven, een invoerveld om berichten te typen en een knop om je bericht naar de backend te sturen. Laten we nu naar de JavaScript kijken in *app.js*.
**app.js**
@ -314,10 +308,10 @@ Laten we de code per sectie doornemen:
- 1) Hier halen we een referentie op naar alle elementen die we later in de code zullen gebruiken.
- 2) In deze sectie maken we een functie die de ingebouwde `fetch`-methode gebruikt om onze backend aan te roepen.
- 3) `appendMessage` helpt bij het toevoegen van reacties en wat jij als gebruiker typt.
- 4) Hier luisteren we naar het submit-event, lezen we het invoerveld, plaatsen we het bericht van de gebruiker in het tekstgebied, roepen we de API aan en renderen we de reactie in het tekstgebied.
- 3) `appendMessage` helpt om zowel de antwoorden als wat jij als gebruiker typt toe te voegen.
- 4) Hier luisteren we naar het submit-event, lezen we het invoerveld, plaatsen we het bericht van de gebruiker in het tekstgebied, roepen we de API aan en renderen we het antwoord in het tekstgebied.
Laten we nu naar de styling kijken. Hier kun je helemaal losgaan en het eruit laten zien zoals je wilt, maar hier zijn enkele suggesties:
Laten we nu naar de styling kijken. Hier kun je echt creatief zijn en het eruit laten zien zoals je wilt, maar hier zijn enkele suggesties:
**styles.css**
@ -338,14 +332,14 @@ Laten we nu naar de styling kijken. Hier kun je helemaal losgaan en het eruit la
}
```
Met deze drie klassen kun je berichten verschillend stylen, afhankelijk van of ze van de assistent of van jou als gebruiker komen. Als je inspiratie wilt, bekijk dan de map `solution/frontend/styles.css`.
Met deze drie klassen kun je berichten anders stylen, afhankelijk van of ze van de assistent of van jou als gebruiker komen. Als je inspiratie wilt, bekijk dan de map `solution/frontend/styles.css`.
### Basis-URL wijzigen
Er is één ding dat we hier niet hebben ingesteld, en dat is `BASE_URL`. Dit is niet bekend totdat je backend is gestart. Om dit in te stellen:
- Als je de API lokaal uitvoert, moet het iets zijn als `http://localhost:5000`.
- Als je het in Codespaces uitvoert, zou het er ongeveer zo uitzien: "[naam]app.github.dev".
- Als je de API lokaal uitvoert, moet het iets zijn zoals `http://localhost:5000`.
- Als je het in Codespaces uitvoert, moet het eruitzien als "[name]app.github.dev".
## Opdracht
@ -361,7 +355,7 @@ project/
...
```
Kopieer de inhoud van wat hierboven is uitgelegd, maar voel je vrij om het naar wens aan te passen.
Kopieer de inhoud van wat hierboven is uitgelegd, maar voel je vrij om het naar eigen wens aan te passen.
## Oplossing
@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard")
### Frontend
Wijzig ook de CSS en tekst naar wens, dus breng wijzigingen aan in *index.html* en *styles.css*.
Verander ook de CSS en tekst naar jouw smaak, dus voer wijzigingen door in *index.html* en *styles.css*.
## Samenvatting
Geweldig, je hebt geleerd hoe je vanaf nul een persoonlijke assistent kunt maken met behulp van AI. We hebben dit gedaan met GitHub Models, een backend in Python en een frontend in HTML, CSS en JavaScript.
Geweldig, je hebt geleerd hoe je vanaf nul een persoonlijke assistent kunt maken met AI. We hebben dit gedaan met behulp van GitHub Models, een backend in Python en een frontend in HTML, CSS en JavaScript.
## Instellen met Codespaces
- Navigeer naar: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Maak een nieuwe repo van een template (zorg ervoor dat je bent ingelogd op GitHub) in de rechterbovenhoek:
- Maak een template (zorg ervoor dat je bent ingelogd op GitHub) in de rechterbovenhoek:
- Zodra je in je repo bent, maak je een Codespace:
- Zodra je in je repo bent, maak je een Codespace aan:
@ -403,4 +397,4 @@ Geweldig, je hebt geleerd hoe je vanaf nul een persoonlijke assistent kunt maken
---
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Litt kontekst: Å bygge chat-assistenter ved hjelp av generativ AI er en flott måte å begynne å lære om AI. Det du vil lære her er hvordan du integrerer generativ AI i en webapplikasjon gjennom denne leksjonen. La oss komme i gang.
Litt kontekst: Å bygge chat-assistenter ved hjelp av generativ AI er en flott måte å begynne å lære om AI på. Det du vil lære her, er hvordan du integrerer generativ AI i en webapplikasjon gjennom denne leksjonen. La oss starte.
## Koble til generativ AI
For backend bruker vi GitHub Models. Det er en flott tjeneste som lar deg bruke AI gratis. Gå til lekeplassen deres og hent kode som tilsvarer ditt valgte backend-språk. Slik ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
For backend bruker vi GitHub Models. Det er en flott tjeneste som lar deg bruke AI gratis. Gå til deres playground og hent koden som tilsvarer ditt valgte backend-språk. Slik ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Som nevnt, velg fanen "Code" og din valgte runtime.
Som vi nevnte, velg fanen "Code" og ditt valgte runtime.
La oss rydde opp i denne koden litt slik at den blir gjenbrukbar:
La oss rydde opp i denne koden litt slik at den kan gjenbrukes:
```python
def call_llm(prompt: str, system_message: str):
@ -106,9 +100,9 @@ Hvis du vil tilpasse AI-assistenten, kan du spesifisere hvordan du vil at den sk
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Eksponere det via en Web API
## Eksponere det via et Web API
Flott, vi har gjort AI-delen ferdig. La oss se hvordan vi kan integrere dette i en Web API. For Web API velger vi å bruke Flask, men enhver webrammeverk bør fungere. La oss se koden for det:
Flott, vi har AI-delen ferdig. La oss se hvordan vi kan integrere dette i et Web API. For Web API velger vi å bruke Flask, men hvilket som helst web-rammeverk burde fungere. La oss se koden for det:
### Bruke Python
@ -141,18 +135,18 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Her oppretter vi en Flask-API og definerer en standardrute "/" og "/chat". Den siste er ment å brukes av frontend for å sende spørsmål til den.
Her oppretter vi et Flask-API og definerer en standardrute "/" og "/chat". Den siste er ment å brukes av frontend for å sende spørsmål til det.
For å integrere *llm.py* trenger vi å gjøre følgende:
For å integrere *llm.py*, her er hva vi må gjøre:
- Importere funksjonen `call_llm`:
- Importer funksjonen `call_llm`:
```python
from llm import call_llm
from flask import Flask, request
```
- Kalle den fra "/chat"-ruten:
- Kall den fra "/chat"-ruten:
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ For å integrere *llm.py* trenger vi å gjøre følgende:
})
```
Her analyserer vi den innkommende forespørselen for å hente `message`-egenskapen fra JSON-body. Deretter kaller vi LLM med denne kallet:
Her parser vi den innkommende forespørselen for å hente `message`-egenskapen fra JSON-bodyen. Deretter kaller vi LLM med dette kallet:
```python
response = call_llm(message, "You are a helpful assistant")
@ -186,7 +180,7 @@ Vi bør nevne at vi setter opp noe som CORS, cross-origin resource sharing. Dett
### Bruke Python
Det finnes et kodebit i *api.py* som setter dette opp:
Det er en kodebit i *api.py* som setter dette opp:
```python
from flask_cors import CORS
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Akkurat nå er det satt opp til å tillate "*" som er alle opprinnelser, og det er litt usikkert. Vi bør begrense det når vi går til produksjon.
Akkurat nå er det satt opp til å tillate "*" som er alle opprinnelser, og det er litt usikkert. Vi bør begrense det når vi går i produksjon.
## Kjør prosjektet ditt
For å kjøre prosjektet ditt, må du starte opp backend først og deretter frontend.
For å kjøre prosjektet ditt må du starte opp backend først og deretter frontend.
### Bruke Python
Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til å fungere med en backend? Vel, det er to ting vi må gjøre:
- Installere avhengigheter:
- Installer avhengigheter:
```sh
cd backend
@ -215,17 +209,17 @@ Ok, så vi har *llm.py* og *api.py*. Hvordan kan vi få dette til å fungere med
pip install openai flask flask-cors openai
```
- Starte API-en
- Start API-et
```sh
python api.py
```
Hvis du er i Codespaces, må du gå til Ports nederst i editoren, høyreklikke på den og klikke "Port Visibility" og velge "Public".
Hvis du er i Codespaces, må du gå til Ports nederst i editoren, høyreklikke på det og klikke "Port Visibility" og velge "Public".
### Jobbe med en frontend
Nå som vi har en API oppe og kjører, la oss lage en frontend for dette. En helt enkel frontend som vi vil forbedre stegvis. I en *frontend*-mappe, opprett følgende:
Nå som vi har et API oppe og kjører, la oss lage en frontend for dette. En helt grunnleggende frontend som vi vil forbedre trinnvis. I en *frontend*-mappe, opprett følgende:
```text
backend/
@ -253,7 +247,7 @@ La oss starte med **index.html**:
</html>
```
Dette er det absolutt minimum du trenger for å støtte et chat-vindu, da det består av en tekstboks hvor meldinger vil bli vist, et input-felt for å skrive meldingen og en knapp for å sende meldingen til backend. La oss se på JavaScript neste i *app.js*
Dette er det absolutt minste du trenger for å støtte et chat-vindu, da det består av en tekstboks hvor meldinger vil bli vist, et input-felt for å skrive meldingen og en knapp for å sende meldingen til backend. La oss se på JavaScript i *app.js*.
**app.js**
@ -310,12 +304,12 @@ Dette er det absolutt minimum du trenger for å støtte et chat-vindu, da det be
})();
```
La oss gå gjennom koden per seksjon:
La oss gå gjennom koden seksjon for seksjon:
- 1) Her får vi en referanse til alle elementene vi vil referere til senere i koden.
- 2) I denne seksjonen oppretter vi en funksjon som bruker den innebygde `fetch`-metoden for å kalle backend.
- 2) I denne delen oppretter vi en funksjon som bruker den innebygde `fetch`-metoden for å kalle backend.
- 3) `appendMessage` hjelper med å legge til svar samt det du som bruker skriver.
- 4) Her lytter vi til submit-hendelsen, leser input-feltet, plasserer brukerens melding i tekstboksen, kaller API-en og viser svaret i tekstboksen.
- 4) Her lytter vi til submit-hendelsen, leser input-feltet, plasserer brukerens melding i tekstboksen, kaller API-et og viser svaret i tekstboksen.
La oss se på styling neste. Her kan du virkelig være kreativ og få det til å se ut som du vil, men her er noen forslag:
@ -340,16 +334,16 @@ La oss se på styling neste. Her kan du virkelig være kreativ og få det til å
Med disse tre klassene vil du style meldinger forskjellig avhengig av om de kommer fra assistenten eller deg som bruker. Hvis du vil bli inspirert, sjekk ut `solution/frontend/styles.css`-mappen.
### Endre Base Url
### Endre Base URL
Det var én ting vi ikke satte her, og det var `BASE_URL`. Dette er ikke kjent før backend er startet. For å sette det:
- Hvis du kjører API lokalt, bør det settes til noe som `http://localhost:5000`.
- Hvis det kjøres i Codespaces, bør det se ut som "[name]app.github.dev".
- Hvis du kjører i Codespaces, bør det se ut som "[name]app.github.dev".
## Oppgave
Opprett din egen mappe *project* med innhold som følger:
Lag din egen mappe *project* med innhold som dette:
```text
project/
@ -385,20 +379,20 @@ Endre også CSS og tekst etter eget ønske, så gjør endringer i *index.html* o
## Oppsummering
Flott, du har lært fra bunnen av hvordan du lager en personlig assistent ved hjelp av AI. Vi har gjort det ved hjelp av GitHub Models, en backend i Python og en frontend i HTML, CSS og JavaScript.
Flott, du har lært fra bunnen av hvordan du lager en personlig assistent ved hjelp av AI. Vi har gjort dette ved hjelp av GitHub Models, en backend i Python og en frontend i HTML, CSS og JavaScript.
## Sett opp med Codespaces
- Naviger til: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Opprett fra en mal (sørg for at du er logget inn på GitHub) øverst til høyre:
- Opprett fra en mal (sørg for at du er logget inn på GitHub) i øvre høyre hjørne:
Kilka słów wstępu: budowanie asystentów czatu przy użyciu generatywnej AI to świetny sposób na rozpoczęcie nauki o sztucznej inteligencji. W trakcie tej lekcji nauczysz się, jak zintegrować generatywną AI z aplikacją internetową. Zaczynajmy!
Kilka słów wstępu: budowanie asystentów czatu z wykorzystaniem generatywnej AI to świetny sposób na rozpoczęcie nauki o sztucznej inteligencji. W tej lekcji nauczysz się, jak zintegrować generatywną AI z aplikacją webową. Zaczynajmy!
## Połączenie z generatywną AI
Na backendzie używamy GitHub Models. To świetna usługa, która pozwala korzystać z AI za darmo. Przejdź do jej playground i pobierz kod odpowiadający wybranemu przez Ciebie językowi backendu. Tak wygląda [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
Na backendzie używamy GitHub Models. To świetna usługa, która pozwala korzystać z AI za darmo. Przejdź do jej playground i skopiuj kod odpowiadający wybranemu językowi backendu. Oto jak wygląda [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground):
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Jak wspomniano, wybierz zakładkę "Code" i swój preferowany runtime.
Dzięki funkcji `call_llm` możemy teraz podać prompt i system prompt, a funkcja zwróci wynik.
Dzięki tej funkcji `call_llm` możemy teraz podać prompt i system prompt, a funkcja zwróci wynik.
### Personalizacja Asystenta AI
### Dostosowanie Asystenta AI
Jeśli chcesz dostosować zachowanie Asystenta AI, możesz określić, jak ma się zachowywać, wypełniając system prompt w ten sposób:
Jeśli chcesz dostosować asystenta AI, możesz określić, jak ma się zachowywać, wypełniając system prompt w ten sposób:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Udostępnienie przez Web API
Świetnie, mamy część AI gotową, zobaczmy, jak możemy zintegrować ją z Web API. Dla Web API wybieramy Flask, ale każdy framework webowy powinien być odpowiedni. Oto kod:
Świetnie, mamy część AI gotową, zobaczmy, jak możemy zintegrować ją z Web API. W przypadku Web API wybieramy Flask, ale każdy framework webowy będzie odpowiedni. Oto kod:
### Korzystanie z Pythona
### Użycie Pythona
```python
# api.py
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Tutaj tworzymy API Flask i definiujemy domyślną trasę "/" oraz "/chat". Ta ostatnia jest przeznaczona dla naszego frontend, aby przesyłać pytania.
Tutaj tworzymy API we Flasku i definiujemy domyślną trasę "/" oraz "/chat". Ta druga jest przeznaczona do komunikacji z frontendem, aby przesyłać pytania.
Aby zintegrować *llm.py*, musimy zrobić następujące kroki:
Warto wspomnieć, że ustawiamy coś takiego jak CORS, czyli cross-origin resource sharing. Oznacza to, że ponieważ nasz backend i frontend będą działać na różnych portach, musimy pozwolić frontendowi na wywoływanie backendu.
Warto wspomnieć, że ustawiliśmy coś takiego jak CORS, czyli współdzielenie zasobów między różnymi domenami. Oznacza to, że ponieważ nasz backend i frontend będą działać na różnych portach, musimy pozwolić frontendowi na komunikację z backendem.
### Korzystanie z Pythona
### Użycie Pythona
W pliku *api.py* znajduje się kod, który to ustawia:
W pliku *api.py* znajduje się fragment kodu, który to ustawia:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Obecnie jest ustawiony na "*" (wszystkie źródła), co jest trochę niebezpieczne. Powinniśmy to ograniczyć, gdy przejdziemy do produkcji.
Obecnie jest ustawione na "*" (wszystkie domeny), co jest nieco niebezpieczne. Powinniśmy to ograniczyć, gdy przejdziemy do produkcji.
## Uruchomienie projektu
Aby uruchomić projekt, najpierw musisz uruchomić backend, a potem frontend.
### Korzystanie z Pythona
### Użycie Pythona
Ok, mamy *llm.py* i *api.py*. Jak sprawić, żeby działały z backendem? Są dwa kroki:
Mamy *llm.py* i *api.py*, jak to uruchomić na backendzie? Są dwa kroki:
- Zainstaluj zależności:
@ -221,7 +215,7 @@ Ok, mamy *llm.py* i *api.py*. Jak sprawić, żeby działały z backendem? Są dw
python api.py
```
Jeśli korzystasz z Codespaces, musisz przejść do sekcji Ports w dolnej części edytora, kliknąć prawym przyciskiem myszy i wybrać "Port Visibility", a następnie "Public".
Jeśli korzystasz z Codespaces, przejdź do sekcji Ports w dolnej części edytora, kliknij prawym przyciskiem myszy i wybierz "Port Visibility", a następnie "Public".
### Praca nad frontendem
@ -253,7 +247,7 @@ Zacznijmy od **index.html**:
</html>
```
Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa się z pola tekstowego, w którym będą wyświetlane wiadomości, pola wejściowego do wpisywania wiadomości oraz przycisku do wysyłania wiadomości do backendu. Teraz przejdźmy do JavaScript w pliku *app.js*.
Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa się z pola tekstowego, w którym będą wyświetlane wiadomości, pola wejściowego do wpisywania wiadomości oraz przycisku do wysyłania wiadomości do backendu. Teraz spójrzmy na JavaScript w pliku *app.js*.
**app.js**
@ -312,8 +306,8 @@ Powyższy kod to absolutne minimum potrzebne do obsługi okna czatu. Składa si
Omówmy kod sekcja po sekcji:
- 1) Tutaj uzyskujemy referencje do wszystkich elementów, które będziemy później używać w kodzie.
- 2) W tej sekcji tworzymy funkcję, która korzysta z wbudowanej metody `fetch` do wywoływania naszego backendu.
- 1) Tutaj uzyskujemy referencje do wszystkich elementów, których będziemy używać w kodzie.
- 2) W tej sekcji tworzymy funkcję, która korzysta z wbudowanej metody `fetch`, aby wywołać nasze API.
- 3) `appendMessage` pomaga dodawać odpowiedzi oraz wiadomości wpisane przez użytkownika.
- 4) Tutaj nasłuchujemy zdarzenia submit, odczytujemy pole wejściowe, umieszczamy wiadomość użytkownika w polu tekstowym, wywołujemy API i renderujemy odpowiedź w polu tekstowym.
@ -338,18 +332,18 @@ Teraz przejdźmy do stylizacji. Możesz tutaj zaszaleć i dostosować wygląd we
}
```
Dzięki tym trzem klasom możesz stylizować wiadomości w zależności od ich pochodzenia – od asystenta lub od użytkownika. Jeśli potrzebujesz inspiracji, zajrzyj do folderu `solution/frontend/styles.css`.
Dzięki tym trzem klasom możesz stylizować wiadomości w zależności od tego, czy pochodzą od asystenta, czy od użytkownika. Jeśli potrzebujesz inspiracji, zajrzyj do folderu `solution/frontend/styles.css`.
### Zmiana Base Url
Jest jedna rzecz, której tutaj nie ustawiliśmy, a mianowicie `BASE_URL`. Nie jest ona znana, dopóki backend nie zostanie uruchomiony. Aby ją ustawić:
Jest jedna rzecz, której jeszcze nie ustawiliśmy, a mianowicie `BASE_URL`. Nie jest ona znana, dopóki backend nie zostanie uruchomiony. Aby ją ustawić:
- Jeśli uruchamiasz API lokalnie, powinno być ustawione na coś w rodzaju `http://localhost:5000`.
- Jeśli uruchamiasz w Codespaces, powinno wyglądać jak "[name]app.github.dev".
- Jeśli uruchamiasz API lokalnie, powinna być ustawiona na coś w stylu `http://localhost:5000`.
- Jeśli uruchamiasz w Codespaces, powinna wyglądać mniej więcej tak: "[name]app.github.dev".
## Zadanie
Stwórz własny folder *project* z zawartością jak poniżej:
Utwórz własny folder *project* z zawartością jak poniżej:
```text
project/
@ -361,15 +355,15 @@ project/
...
```
Skopiuj zawartość zgodnie z instrukcjami powyżej, ale możesz dostosować ją według własnych upodobań.
Skopiuj zawartość zgodnie z powyższymi instrukcjami, ale możesz dostosować ją według własnych upodobań.
## Rozwiązanie
[Rozwiązanie](./solution/README.md)
[Solution](./solution/README.md)
## Bonus
Spróbuj zmienić osobowość Asystenta AI.
Spróbuj zmienić osobowość asystenta AI.
### Dla Pythona
@ -381,20 +375,20 @@ call_llm(message, "You are Captain Picard")
### Frontend
Zmień również CSS i tekst według własnych upodobań, dokonując zmian w *index.html* i *styles.css*.
Zmień również CSS i tekst według własnych upodobań, wprowadzając zmiany w *index.html* i *styles.css*.
## Podsumowanie
Świetnie, nauczyłeś się od podstaw, jak stworzyć osobistego asystenta korzystając z AI. Zrobiliśmy to używając GitHub Models, backendu w Pythonie oraz frontendu w HTML, CSS i JavaScript.
Świetnie, nauczyłeś się od podstaw, jak stworzyć osobistego asystenta z wykorzystaniem AI. Zrobiliśmy to przy użyciu GitHub Models, backendu w Pythonie oraz frontendu w HTML, CSS i JavaScript.
## Konfiguracja z Codespaces
## Konfiguracja w Codespaces
- Przejdź do: [Repozytorium Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Utwórz z szablonu (upewnij się, że jesteś zalogowany na GitHub) w prawym górnym rogu:
- Utwórz repozytorium z szablonu (upewnij się, że jesteś zalogowany na GitHubie) w prawym górnym rogu:
- Po przejściu do swojego repozytorium, utwórz Codespace:
Este projeto de chat mostra como criar um Assistente de Chat utilizando os Modelos do GitHub.
Este projeto de chat mostra como construir um Assistente de Chat utilizando os Modelos do GitHub.
Aqui está como o projeto finalizado se parece:
<div>
<imgsrc="./assets/screenshot.png"alt="Aplicação de Chat"width="600">
</div>
Para contextualizar, criar assistentes de chat utilizando IA generativa é uma ótima forma de começar a aprender sobre IA. O que vais aprender é como integrar IA generativa numa aplicação web ao longo desta lição. Vamos começar.
Para contextualizar, construir assistentes de chat usando IA generativa é uma ótima maneira de começar a aprender sobre IA. O que você aprenderá nesta lição é como integrar IA generativa em uma aplicação web. Vamos começar.
## Conectar à IA generativa
## Conectando à IA generativa
Para o backend, estamos a usar os Modelos do GitHub. É um excelente serviço que permite usar IA gratuitamente. Vai ao playground e obtém o código que corresponde à linguagem de backend escolhida. Aqui está como se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Para o backend, estamos a usar os Modelos do GitHub. É um ótimo serviço que permite usar IA gratuitamente. Aceda ao playground e copie o código correspondente à linguagem de backend que escolheu. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Como mencionado, seleciona o separador "Code" e o runtime escolhido.
Como mencionado, selecione o separador "Code" e o runtime que escolheu.
<div>
<imgsrc="./assets/playground-choice.png"alt="Escolha no playground"with="600">
</div>
### Usar Python
### Usando Python
Neste caso, selecionamos Python, o que significa que escolhemos este código:
@ -100,7 +94,7 @@ Com esta função `call_llm`, agora podemos passar um prompt e um prompt de sist
### Personalizar o Assistente de IA
Se quiseres personalizar o assistente de IA, podes especificar como queres que ele se comporte preenchendo o prompt de sistema desta forma:
Se quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o prompt de sistema desta forma:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -110,7 +104,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
Ótimo, já temos a parte de IA concluída. Vamos ver como podemos integrá-la numa API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código:
### Usar Python
### Usando Python
```python
# api.py
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo frontend para enviar perguntas.
Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última será usada pelo nosso frontend para enviar perguntas.
Para integrar o *llm.py*, aqui está o que precisamos fazer:
@ -167,7 +161,7 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer:
})
```
Aqui analisamos a solicitação recebida para obter a propriedade `message` do corpo JSON. Depois disso, chamamos o LLM com esta chamada:
Aqui analisamos o pedido recebido para obter a propriedade `message` do corpo JSON. Em seguida, chamamos o LLM com esta chamada:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,13 +172,13 @@ Para integrar o *llm.py*, aqui está o que precisamos fazer:
})
```
Ótimo, agora fizemos o que era necessário.
Ótimo, agora temos tudo o que precisamos.
## Configurar Cors
Devemos mencionar que configuramos algo como CORS, partilha de recursos entre origens. Isto significa que, como o nosso backend e frontend vão correr em portas diferentes, precisamos permitir que o frontend aceda ao backend.
Devemos mencionar que configuramos algo como CORS, ou partilha de recursos entre origens. Isto significa que, como o nosso backend e frontend irão correr em portas diferentes, precisamos permitir que o frontend aceda ao backend.
### Usar Python
### Usando Python
Há um trecho de código em *api.py* que configura isto:
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Neste momento, está configurado para permitir "*" que são todas as origens, e isso é um pouco inseguro. Devemos restringir isto quando formos para produção.
Atualmente, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringi-lo quando formos para produção.
## Executar o projeto
Para executar o projeto, precisas iniciar primeiro o backend e depois o frontend.
Para executar o projeto, primeiro precisa iniciar o backend e depois o frontend.
### Usar Python
### Usando Python
Ok, então temos *llm.py* e *api.py*. Como podemos fazer isto funcionar com um backend? Bem, há duas coisas que precisamos fazer:
Ok, temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer:
- Instalar dependências:
- Instalar as dependências:
```sh
cd backend
@ -221,11 +215,11 @@ Ok, então temos *llm.py* e *api.py*. Como podemos fazer isto funcionar com um b
python api.py
```
Se estiveres a usar Codespaces, precisas ir a Ports na parte inferior do editor, clicar com o botão direito e selecionar "Port Visibility" e escolher "Public".
Se estiver a usar Codespaces, precisa ir a Ports na parte inferior do editor, clicar com o botão direito e selecionar "Port Visibility" e escolher "Public".
### Trabalhar num frontend
Agora que temos uma API a funcionar, vamos criar um frontend para isto. Um frontend mínimo que iremos melhorar passo a passo. Na pasta *frontend*, cria o seguinte:
Agora que temos uma API a funcionar, vamos criar um frontend para ela. Um frontend mínimo que iremos melhorar gradualmente. Na pasta *frontend*, crie o seguinte:
```text
backend/
@ -253,7 +247,7 @@ Vamos começar com **index.html**:
</html>
```
O acima é o mínimo absoluto necessário para suportar uma janela de chat, pois consiste num textarea onde as mensagens serão renderizadas, um campo de entrada para digitar a mensagem e um botão para enviar a mensagem ao backend. Vamos ver o JavaScript a seguir em *app.js*.
O código acima é o mínimo necessário para suportar uma janela de chat, consistindo numa área de texto onde as mensagens serão exibidas, um campo de entrada para digitar mensagens e um botão para enviar a mensagem ao backend. Vamos olhar para o JavaScript a seguir em *app.js*.
**app.js**
@ -313,11 +307,11 @@ O acima é o mínimo absoluto necessário para suportar uma janela de chat, pois
Vamos analisar o código por secção:
- 1) Aqui obtemos uma referência a todos os elementos que iremos usar mais tarde no código.
- 2) Nesta secção, criamos uma função que utiliza o método `fetch` embutido para chamar o nosso backend.
- 3) `appendMessage` ajuda a adicionar respostas, bem como o que tu, como utilizador, digitas.
- 4) Aqui ouvimos o evento de envio e acabamos por ler o campo de entrada, colocar a mensagem do utilizador no textarea, chamar a API e renderizar a resposta no textarea.
- 2) Nesta secção, criamos uma função que usa o método `fetch` embutido para chamar o nosso backend.
- 3) `appendMessage` ajuda a adicionar respostas, bem como o que o utilizador digita.
- 4) Aqui ouvimos o evento de envio, lemos o campo de entrada, colocamos a mensagem do utilizador na área de texto, chamamos a API e exibimos a resposta na área de texto.
Vamos ver o estilo a seguir. Aqui podes ser criativo e fazer com que pareça como quiseres, mas aqui estão algumas sugestões:
Agora vamos ver o estilo. Aqui pode ser criativo e personalizar como quiser, mas aqui estão algumas sugestões:
**styles.css**
@ -338,18 +332,18 @@ Vamos ver o estilo a seguir. Aqui podes ser criativo e fazer com que pareça com
}
```
Com estas três classes, vais estilizar as mensagens de forma diferente dependendo de onde vêm, do assistente ou de ti como utilizador. Se quiseres inspiração, consulta a pasta `solution/frontend/styles.css`.
Com estas três classes, pode estilizar as mensagens de forma diferente dependendo de quem as enviou: o assistente ou o utilizador. Se precisar de inspiração, veja a pasta `solution/frontend/styles.css`.
### Alterar Base Url
### Alterar a Base URL
Há uma coisa que não configurámos aqui, que foi o `BASE_URL`. Isto não é conhecido até o backend ser iniciado. Para configurá-lo:
Há um detalhe que ainda não configurámos: a `BASE_URL`. Isto só será conhecido quando o backend estiver em execução. Para configurá-la:
- Se executares a API localmente, deve ser algo como `http://localhost:5000`.
- Se executares em Codespaces, deve ser algo como "[name]app.github.dev".
- Se estiver a executar a API localmente, deve ser algo como `http://localhost:5000`.
- Se estiver a usar Codespaces, será algo como "[name]app.github.dev".
## Tarefa
Cria a tua própria pasta *project* com conteúdo como este:
Crie a sua própria pasta *project* com o seguinte conteúdo:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Copia o conteúdo do que foi instruído acima, mas sente-te à vontade para personalizar como quiseres.
Copie o conteúdo das instruções acima, mas sinta-se à vontade para personalizar como preferir.
## Solução
@ -369,11 +363,11 @@ Copia o conteúdo do que foi instruído acima, mas sente-te à vontade para pers
## Bónus
Experimenta alterar a personalidade do assistente de IA.
Experimente alterar a personalidade do assistente de IA.
### Para Python
Quando chamas `call_llm` em *api.py*, podes alterar o segundo argumento para o que quiseres, por exemplo:
Quando chamar `call_llm` em *api.py*, pode alterar o segundo argumento para o que quiser, por exemplo:
```python
call_llm(message, "You are Captain Picard")
@ -381,26 +375,26 @@ call_llm(message, "You are Captain Picard")
### Frontend
Altera também o CSS e o texto como preferires, fazendo mudanças em *index.html* e *styles.css*.
Altere também o CSS e o texto como preferir, fazendo mudanças em *index.html* e *styles.css*.
## Resumo
Ótimo, aprendeste do zero como criar um assistente pessoal utilizando IA. Fizemos isso usando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript.
Ótimo, aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso utilizando os Modelos do GitHub, um backend em Python e um frontend em HTML, CSS e JavaScript.
## Configurar com Codespaces
- Navega para: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Cria a partir de um template (certifica-te de que estás autenticado no GitHub) no canto superior direito:
- Navegue para: [Repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Crie a partir de um template (certifique-se de que está autenticado no GitHub) no canto superior direito:
Isto deve iniciar um ambiente com o qual podes trabalhar agora.
Isto deve iniciar um ambiente com o qual pode trabalhar.
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
Un pic de context: construirea asistenților de chat folosind AI generativ este o modalitate excelentă de a începe să înveți despre AI. Ce vei învăța este cum să integrezi AI generativ într-o aplicație web pe parcursul acestei lecții. Să începem.
Un pic de context: construirea asistenților de chat folosind AI generativ este o modalitate excelentă de a începe să înveți despre inteligența artificială. Ce vei învăța este cum să integrezi AI generativ într-o aplicație web pe parcursul acestei lecții. Să începem.
## Conectarea la AI generativ
Pentru backend, folosim Modelele GitHub. Este un serviciu excelent care îți permite să folosești AI gratuit. Accesează playground-ul său și obține codul corespunzător limbajului backend ales. Iată cum arată la [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Pentru partea de backend, folosim Modelele GitHub. Este un serviciu excelent care îți permite să folosești AI gratuit. Accesează playground-ul său și obține codul corespunzător limbajului de backend ales. Iată cum arată la [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Așa cum am spus, selectează fila "Code" și runtime-ul ales.
### Utilizarea Python
@ -106,9 +100,9 @@ Dacă dorești să personalizezi asistentul AI, poți specifica cum vrei să se
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Expunerea printr-un Web API
## Expunerea printr-un API Web
Excelent, am terminat partea AI, să vedem cum putem integra aceasta într-un Web API. Pentru Web API, alegem să folosim Flask, dar orice framework web ar trebui să fie bun. Să vedem codul pentru aceasta:
Excelent, am terminat partea de AI, să vedem cum putem integra aceasta într-un API Web. Pentru API-ul Web, alegem să folosim Flask, dar orice framework web ar trebui să fie bun. Să vedem codul pentru aceasta:
### Utilizarea Python
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Aici, creăm un API Flask și definim o rută implicită "/" și "/chat". Ultima este destinată să fie utilizată de frontend-ul nostru pentru a transmite întrebări.
Aici, creăm un API Flask și definim o rută implicită "/" și "/chat". Ultima este destinată să fie utilizată de frontend-ul nostru pentru a transmite întrebări către backend.
Pentru a integra *llm.py*, iată ce trebuie să facem:
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
În prezent, este configurat să permită "*" adică toate originile, ceea ce este puțin nesigur. Ar trebui să restricționăm acest lucru odată ce trecem la producție.
În prezent, este configurat să permită "*" ceea ce înseamnă toate originile, și asta este puțin nesigur. Ar trebui să restricționăm acest lucru odată ce trecem la producție.
## Rulează proiectul
@ -253,7 +247,7 @@ Să începem cu **index.html**:
</html>
```
Acesta este minimul absolut necesar pentru a susține o fereastră de chat, deoarece constă dintr-un textarea unde mesajele vor fi afișate, un input pentru a scrie mesajul și un buton pentru a trimite mesajul către backend. Să vedem următorul cod JavaScript în *app.js*
Acesta este minimul absolut necesar pentru a susține o fereastră de chat, deoarece constă într-un textarea unde mesajele vor fi afișate, un input pentru a scrie mesajul și un buton pentru a trimite mesajul către backend. Să vedem următorul cod JavaScript în *app.js*
**app.js**
@ -338,7 +332,7 @@ Să vedem stilizarea, unde poți fi creativ și să faci să arate cum dorești,
}
```
Cu aceste trei clase, vei stiliza mesajele diferit, în funcție de sursa lor: asistent sau utilizator. Dacă vrei să te inspiri, verifică folderul `solution/frontend/styles.css`.
Cu aceste trei clase, vei stiliza mesajele diferit în funcție de sursa lor: asistent sau utilizator. Dacă vrei să te inspiri, verifică folderul `solution/frontend/styles.css`.
### Schimbă URL-ul de bază
@ -381,7 +375,7 @@ call_llm(message, "You are Captain Picard")
### Frontend
Schimbă și CSS-ul și textul după preferințe, fă modificări în *index.html* și *styles.css*.
Schimbă și CSS-ul și textul după preferințe, astfel încât să faci modificări în *index.html* și *styles.css*.
## Rezumat
@ -389,7 +383,7 @@ Excelent, ai învățat de la zero cum să creezi un asistent personal folosind
## Configurare cu Codespaces
- Navighează la: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Navighează la: [Repo Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Creează dintr-un template (asigură-te că ești autentificat în GitHub) în colțul din dreapta sus:
@ -403,4 +397,4 @@ Excelent, ai învățat de la zero cum să creezi un asistent personal folosind
---
**Declinare de responsabilitate**:
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
Немного контекста: создание чат-ассистентов с использованием генеративного ИИ — отличный способ начать изучение ИИ. В этом уроке вы научитесь интегрировать генеративный ИИ в веб-приложение. Давайте начнем.
@ -23,15 +21,11 @@ CO_OP_TRANSLATOR_METADATA:
Для бэкенда мы используем GitHub Models. Это отличный сервис, который позволяет использовать ИИ бесплатно. Перейдите в его playground и возьмите код, соответствующий выбранному вами языку бэкенда. Вот как это выглядит: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Как мы уже сказали, выберите вкладку "Code" и ваш runtime.
Как мы уже сказали, выберите вкладку "Code" и ваш предпочитаемый runtime.
С помощью этой функции `call_llm` мы можем передать подсказку и системную подсказку, а функция вернет результат.
### Настройка чат-ассистента
### Настройка AI-ассистента
Если вы хотите настроить чат-ассистента, вы можете указать, как он должен себя вести, заполнив системную подсказку следующим образом:
Если вы хотите настроить AI-ассистента, вы можете указать, как он должен себя вести, заполнив системную подсказку следующим образом:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -143,7 +137,7 @@ if __name__ == "__main__":
Здесь мы создаем API на Flask и определяем маршруты "/" и "/chat". Последний предназначен для использования нашим фронтендом для передачи вопросов.
Чтобы интегрировать *llm.py*, нам нужно сделать следующее:
Чтобы интегрировать *llm.py*, нужно сделать следующее:
- Импортировать функцию `call_llm`:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
Здесь мы анализируем входящий запрос, чтобы извлечь свойство `message` из JSON-тела. Затем мы вызываем LLM следующим образом:
Здесь мы разбираем входящий запрос, чтобы получить свойство `message` из JSON-тела. Затем мы вызываем LLM следующим образом:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
Отлично, теперь мы сделали все необходимое.
Отлично, теперь у нас все готово.
## Настройка Cors
Стоит отметить, что мы настроили CORS (совместное использование ресурсов между источниками). Это означает, что поскольку наш бэкенд и фронтенд будут работать на разных портах, нам нужно разрешить фронтенду обращаться к бэкенду.
Стоит отметить, что мы настроили CORS (разделение ресурсов между источниками). Это необходимо, так как наш бэкенд и фронтенд будут работать на разных портах, и нужно разрешить фронтенду обращаться к бэкенду.
### Использование Python
В*api.py* есть кусок кода, который это настраивает:
Вфайле *api.py* есть код, который это настраивает:
```python
from flask_cors import CORS
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Сейчас он настроен на разрешение "*" (все источники), что небезопасно. Мы должны ограничить это перед переходом в продакшн.
Сейчас он настроен на разрешение для всех источников ("*"), что небезопасно. Это нужно ограничить перед переходом в продакшн.
## Запуск проекта
@ -203,7 +197,7 @@ CORS(app) # * example.com
### Использование Python
Итак, у нас есть *llm.py* и *api.py*. Как заставить это работать с бэкендом? Нужно сделать два шага:
Итак, у нас есть *llm.py* и *api.py*. Как это запустить? Нужно сделать две вещи:
- Установить зависимости:
@ -221,11 +215,11 @@ CORS(app) # * example.com
python api.py
```
Если вы используете Codespaces, вам нужно перейти в раздел Ports в нижней части редактора, щелкнуть правой кнопкой мыши и выбрать "Port Visibility", затем выбрать "Public".
Если вы используете Codespaces, перейдите в раздел Ports в нижней части редактора, щелкните правой кнопкой мыши и выберите "Port Visibility", затем "Public".
### Работа над фронтендом
Теперь, когда у нас есть работающий API, давайте создадим фронтенд. Минимальный фронтенд, который мы будем улучшать шаг за шагом. В папке *frontend* создайте следующее:
Теперь, когда у нас есть работающий API, создадим фронтенд. Это будет минимальный фронтенд, который мы будем улучшать поэтапно. В папке *frontend* создайте следующее:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
Этот код — абсолютный минимум, необходимый для поддержки окна чата. Он состоит из текстовой области, где будут отображаться сообщения, поля ввода для ввода сообщения и кнопки для отправки сообщения на бэкенд. Теперь посмотрим на JavaScript в *app.js*.
Это минимально необходимое для поддержки окна чата: текстовая область для отображения сообщений, поле ввода для ввода сообщения и кнопка для отправки сообщения на бэкенд. Теперь посмотрим на JavaScript в *app.js*.
**app.js**
@ -310,14 +304,14 @@ styles.css
})();
```
Разберем код по разделам:
Разберем код по секциям:
- 1) Здесь мы получаем ссылки на все элементы, которые будем использовать в коде.
- 2) В этом разделе мы создаем функцию, которая использует встроенный метод `fetch` для вызова нашего бэкенда.
- 3) `appendMessage` помогает добавлять ответы, а также то, что вводит пользователь.
- 4) Здесь мы слушаем событие submit, читаем поле ввода, помещаем сообщение пользователя в текстовую область, вызываем API и отображаем ответ в текстовой области.
- 3) `appendMessage` помогает добавлять ответы, а также сообщения, которые вы вводите как пользователь.
- 4) Здесь мы слушаем событие отправки, читаем поле ввода, добавляем сообщение пользователя в текстовую область, вызываем API и отображаем ответ в текстовой области.
Теперь посмотрим на стили. Здесь можно проявить фантазию и сделать так, как вам нравится, но вот несколько предложений:
Теперь перейдем к стилям. Здесь вы можете проявить фантазию, но вот несколько предложений:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
С помощью этих трех классов вы сможете стилизовать сообщения в зависимости от их источника — ассистент или пользователь. Если хотите вдохновиться, загляните в папку `solution/frontend/styles.css`.
С помощью этих трех классов вы сможете стилизовать сообщения в зависимости от того, откуда они поступают: от ассистента или от пользователя. Если хотите вдохновиться, посмотрите папку `solution/frontend/styles.css`.
### Изменение Base Url
Есть одна вещь, которую мы не настроили — это `BASE_URL`. Она неизвестна до запуска вашего бэкенда. Чтобы ее настроить:
Есть одна вещь, которую мы еще не настроили, — это `BASE_URL`. Она становится известной только после запуска бэкенда. Чтобы ее настроить:
- Если вы запускаете API локально, она должна быть чем-то вроде `http://localhost:5000`.
- Если запускаете в Codespaces, она будет выглядеть примерно как "[name]app.github.dev".
- Если вы запускаете API локально, установите что-то вроде `http://localhost:5000`.
- Если запускаете в Codespaces, это будет что-то вроде "[name]app.github.dev".
## Задание
Создайте свою папку *project*с содержимым, как указано ниже:
Создайте свою папку *project*стаким содержимым:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Скопируйте содержимое из инструкций выше, но не стесняйтесь настраивать его по своему усмотрению.
Скопируйте содержимое из инструкций выше, но при желании настройте под себя.
## Решение
@ -369,11 +363,11 @@ project/
## Бонус
Попробуйте изменить личность чат-ассистента.
Попробуйте изменить личность AI-ассистента.
### Для Python
Когда вы вызываете `call_llm` в *api.py*, вы можете изменить второй аргумент на то, что вам нужно, например:
Когда вы вызываете `call_llm` в *api.py*, вы можете изменить второй аргумент на любой, например:
```python
call_llm(message, "You are Captain Picard")
@ -385,11 +379,11 @@ call_llm(message, "You are Captain Picard")
## Итог
Отлично, вы научилисьс нуля создавать персонального ассистента с использованием ИИ. Мы сделали это, используя GitHub Models, бэкенд на Python и фронтенд на HTML, CSS и JavaScript.
Отлично, вы с нуля научились создавать персонального ассистента с использованием ИИ. Мы сделали этос помощью GitHub Models, бэкенда на Python и фронтенда на HTML, CSS и JavaScript.
## Настройка с Codespaces
- Перейдите в: [репозиторий Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Перейдите в: [Репозиторий Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Создайте из шаблона (убедитесь, что вы вошли в GitHub) в правом верхнем углу:
@ -398,9 +392,9 @@ 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). Несмотря на наши усилия по обеспечению точности, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на егородном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Trochu kontextu: vytváranie chat asistentov pomocou generatívnej AI je skvelý spôsob, ako začať učiť sa o AI. V tejto lekcii sa naučíte, ako integrovať generatívnu AI do webovej aplikácie. Poďme na to.
Trochu kontextu: vytváranie chat asistentov pomocou generatívnej AI je skvelý spôsob, ako začať s učením o AI. V tejto lekcii sa naučíte, ako integrovať generatívnu AI do webovej aplikácie. Poďme na to.
## Pripojenie ku generatívnej AI
Na backend používame GitHub Models. Je to skvelá služba, ktorá vám umožňuje používať AI zadarmo. Prejdite na jej playground a získajte kód, ktorý zodpovedá vášmu zvolenému backend jazyku. Takto to vyzerá na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Na backend používame GitHub Models. Je to skvelá služba, ktorá vám umožňuje používať AI zadarmo. Prejdite na jej playground a získajte kód, ktorý zodpovedá vášmu zvolenému backendovému jazyku. Takto to vyzerá na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Ako sme povedali, vyberte kartu "Code" a váš zvolený runtime.
Ako sme povedali, vyberte kartu "Code" a váš preferovaný runtime.
S touto funkciou `call_llm` môžeme teraz zadať prompt a systémový prompt a funkcia nám vráti výsledok.
S touto funkciou `call_llm`teraz môžeme zadať prompt a systémový prompt a funkcia nám vráti výsledok.
### Prispôsobenie AI asistenta
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Zverejnenie cez Web API
Skvelé, máme hotovú AI časť, teraz sa pozrime, ako ju môžeme integrovať do Web API. Pre Web API sme si vybrali Flask, ale akýkoľvek webový framework by mal byť vhodný. Pozrime sa na kód:
Skvelé, AI časť máme hotovú, pozrime sa, ako ju môžeme integrovať do Web API. Pre Web API sme si vybrali Flask, ale akýkoľvek webový framework by mal byť vhodný. Pozrime sa na kód:
### Použitie Pythonu
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Tu vytvárame Flask API a definujeme predvolenú trasu "/" a "/chat". Tá druhá je určená na použitie naším frontendom na odosielanie otázok.
Tu vytvárame Flask API a definujeme predvolenú trasu "/" a "/chat". Druhá je určená na použitie naším frontendom na odosielanie otázok.
Na integráciu *llm.py* potrebujeme urobiť nasledovné:
@ -167,7 +161,7 @@ Na integráciu *llm.py* potrebujeme urobiť nasledovné:
})
```
Tu analyzujeme prichádzajúcu požiadavku, aby sme získali vlastnosť `message` z JSON tela. Následne zavoláme LLM pomocou tohto volania:
Tu analyzujeme prichádzajúcu požiadavku, aby sme získali vlastnosť `message` z JSON tela. Následne zavoláme LLM týmto spôsobom:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,11 +172,11 @@ Na integráciu *llm.py* potrebujeme urobiť nasledovné:
})
```
Skvelé, teraz máme hotovo, čo sme potrebovali.
Skvelé, teraz máme všetko, čo potrebujeme.
## Nastavenie Cors
Mali by sme spomenúť, že sme nastavili niečo ako CORS, zdieľanie zdrojov medzi rôznymi doménami. To znamená, že keďže náš backend a frontend budú bežať na rôznych portoch, musíme povoliť frontendu, aby mohol volať backend.
Mali by sme spomenúť, že sme nastavili niečo ako CORS, teda zdieľanie zdrojov medzi rôznymi doménami. To znamená, že keďže náš backend a frontend budú bežať na rôznych portoch, musíme povoliť frontendu volať backend.
### Použitie Pythonu
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Momentálne je nastavený na povolenie "*" čo znamená všetky domény, čo je trochu nebezpečné. Mali by sme to obmedziť, keď prejdeme do produkcie.
Momentálne je nastavené povolenie pre všetky domény "*", čo je trochu nebezpečné. Mali by sme to obmedziť, keď prejdeme do produkcie.
## Spustenie projektu
Na spustenie projektu musíte najskôr spustiť backend a potom frontend.
Na spustenie projektu musíte najprv spustiť backend a potom frontend.
### Použitie Pythonu
Ok, máme *llm.py* a *api.py*, ako to môžeme spustiť s backendom? Potrebujeme urobiť dve veci:
Dobre, máme *llm.py* a *api.py*, ako to môžeme rozbehnúť s backendom? Potrebujeme urobiť dve veci:
- Nainštalovať závislosti:
@ -221,11 +215,11 @@ Ok, máme *llm.py* a *api.py*, ako to môžeme spustiť s backendom? Potrebujeme
python api.py
```
Ak ste v Codespaces, musíte prejsť na Ports v spodnej časti editora, kliknúť pravým tlačidlom myši na port a vybrať "Port Visibility" a zvoliť "Public".
Ak ste v Codespaces, musíte prejsť na Ports v dolnej časti editora, kliknúť pravým tlačidlom a vybrať "Port Visibility" a zvoliť "Public".
### Práca na fronte
### Práca na frontende
Teraz, keď máme API spustené, vytvorme frontend pre tento projekt. Minimálny frontend, ktorý budeme postupne vylepšovať. V priečinku *frontend* vytvorte nasledovné:
Teraz, keď máme API spustené, vytvorme frontend. Začneme s minimálnym frontendom, ktorý budeme postupne vylepšovať. V priečinku *frontend* vytvorte nasledujúce:
```text
backend/
@ -253,7 +247,7 @@ Začnime s **index.html**:
</html>
```
Toto je absolútne minimum, ktoré potrebujete na podporu chatovacieho okna, pretože obsahuje textové pole, kde sa budú zobrazovať správy, vstupné pole na písanie správ a tlačidlo na odoslanie správy na backend. Pozrime sa na JavaScript v *app.js*
Toto je absolútne minimum potrebné na podporu chatovacieho okna. Obsahuje textové pole, kde sa budú zobrazovať správy, vstupné pole na písanie správ a tlačidlo na odoslanie správy na backend. Pozrime sa teraz na JavaScript v *app.js*.
**app.js**
@ -312,12 +306,12 @@ Toto je absolútne minimum, ktoré potrebujete na podporu chatovacieho okna, pre
Prejdime si kód po sekciách:
- 1) Tu získavame referencie na všetky naše prvky, ktoré budeme neskôr používať v kóde.
- 2) V tejto sekcii vytvárame funkciu, ktorá používa zabudovanú metódu `fetch` na volanie nášho backendu.
- 3) `appendMessage` pomáha pridávať odpovede, ako aj to, čo napíšete ako používateľ.
- 4) Tu počúvame udalosť submit, čítame vstupné pole, umiestňujeme správu používateľa do textového poľa, voláme API a zobrazujeme odpoveď v textovom poli.
- 1) Tu získavame referencie na všetky prvky, ktoré budeme neskôr v kóde používať.
- 2) V tejto sekcii vytvárame funkciu, ktorá používa vstavanú metódu `fetch` na volanie nášho backendu.
- 3) `appendMessage` pomáha pridávať odpovede aj správy, ktoré píšete ako používateľ.
- 4) Tu počúvame na udalosť submit, čítame vstupné pole, umiestňujeme správu používateľa do textového poľa, voláme API a zobrazujeme odpoveď v textovom poli.
Pozrime sa na štýlovanie, tu môžete byť naozaj kreatívni a upraviť vzhľad podľa svojich predstáv, ale tu sú niektoré návrhy:
Pozrime sa na štýlovanie, tu môžete byť kreatívni a prispôsobiť si vzhľad podľa seba, ale tu sú niektoré návrhy:
**styles.css**
@ -338,18 +332,18 @@ Pozrime sa na štýlovanie, tu môžete byť naozaj kreatívni a upraviť vzhľa
}
```
S týmito tromi triedami budete štýlovať správy rôzne v závislosti od toho, či pochádzajú od asistenta alebo od vás ako používateľa. Ak chcete inšpiráciu, pozrite si priečinok`solution/frontend/styles.css`.
S týmito tromi triedami budete štýlovať správy rôzne podľa toho, či pochádzajú od asistenta alebo od používateľa. Ak chcete inšpiráciu, pozrite sa do priečinka`solution/frontend/styles.css`.
### Zmena Base Url
### Zmena základnej URL
Jedna vec, ktorú sme tu nenastavili, bola `BASE_URL`, ktorá nie je známa, kým váš backend nie je spustený. Na nastavenie:
Jedna vec, ktorú sme tu nenastavili, bola `BASE_URL`. Táto hodnota nie je známa, kým backend nie je spustený. Na jej nastavenie:
- Ak spúšťate API lokálne, malo by byť nastavené na niečo ako `http://localhost:5000`.
- Ak spúšťate v Codespaces, malo by vyzerať ako "[name]app.github.dev".
- Ak spúšťate API lokálne, mala by byť nastavená na niečo ako `http://localhost:5000`.
- Ak spúšťate v Codespaces, mala by vyzerať ako "[name]app.github.dev".
## Zadanie
Vytvorte vlastný priečinok *project* s obsahom takto:
Vytvorte si vlastný priečinok *project* s obsahom, ako je uvedené vyššie:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Skopírujte obsah z toho, čo bolo uvedené vyššie, ale pokojne si ho prispôsobte podľa svojich predstáv.
Skopírujte obsah podľa inštrukcií vyššie, ale pokojne si ho prispôsobte podľa seba.
## Riešenie
@ -381,7 +375,7 @@ call_llm(message, "You are Captain Picard")
### Frontend
Zmeňte tiež CSS a text podľa svojich predstáv, teda urobte zmeny v*index.html* a *styles.css*.
Zmeňte tiež CSS a text podľa seba, teda upravte*index.html* a *styles.css*.
## Zhrnutie
@ -390,17 +384,17 @@ Skvelé, naučili ste sa od základov, ako vytvoriť osobného asistenta pomocou
## Nastavenie s Codespaces
- Prejdite na: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Vytvorte z template (uistite sa, že ste prihlásení do GitHub) v pravom hornom rohu:
- Vytvorte z template (uistite sa, že ste prihlásený do GitHubu) v pravom hornom rohu:
- Keď ste vo svojom repozitári, vytvorte Codespace:
Toto by malo spustiť prostredie, s ktorým teraz môžete pracovať.
Toto by malo spustiť prostredie, s ktorým môžete teraz pracovať.
---
**Upozornenie**:
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
Ta projekt klepeta prikazuje, kako zgraditi klepetalnega asistenta z uporabo GitHub Modelov.
Tako izgleda končan projekt:
Tako izgleda končni projekt:
<div>
<imgsrc="./assets/screenshot.png"alt="Aplikacija za klepet"width="600">
</div>
Nekaj konteksta: gradnja klepetalnih asistentov z uporabo generativne umetne inteligence je odličen način za začetek učenja o AI. V tej lekciji se boste naučili, kako integrirati generativno AI v spletno aplikacijo. Začnimo.
Nekaj konteksta: gradnja klepetalnih asistentov z generativno umetno inteligenco je odličen način za začetek učenja o umetni inteligenci. V tej lekciji se boste naučili, kako integrirati generativno umetno inteligenco v spletno aplikacijo. Začnimo.
## Povezovanje z generativno AI
## Povezovanje z generativno umetno inteligenco
Za zaledje uporabljamo GitHub Model. To je odlična storitev, ki omogoča brezplačno uporabo AI. Obiščite njihov "playground" in pridobite kodo, ki ustreza vašemu izbranemu jeziku za zaledje. Tukaj je primer, kako to izgleda na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
Za zaledje uporabljamo GitHub Modele. To je odlična storitev, ki omogoča uporabo umetne inteligence brezplačno. Obiščite njihov "playground" in pridobite kodo, ki ustreza vašemu izbranemu jeziku za zaledje. Tako izgleda na [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"width="600">
</div>
Kot smo omenili, izberite zavihek "Code" in vaš izbrani runtime.
Kot smo rekli, izberite zavihek "Code" in vaš izbrani runtime.
<div>
<imgsrc="./assets/playground-choice.png"alt="Izbira v playgroundu"width="600">
</div>
### Uporaba Pythona
@ -100,15 +94,15 @@ S funkcijo `call_llm` lahko zdaj podamo poziv in sistemski poziv, funkcija pa vr
### Prilagoditev AI asistenta
Če želite prilagoditi AI asistenta, lahko določite, kako naj se obnaša, tako da izpolnite sistemski poziv, kot je prikazano tukaj:
Če želite prilagoditi AI asistenta, lahko določite, kako naj se obnaša, tako da izpolnite sistemski poziv, kot je prikazano:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Izpostavitev prek spletnega API-ja
## Izpostavite ga prek spletnega API-ja
Odlično, AI del je končan, poglejmo, kako ga lahko integriramo v spletni API. Za spletni API smo izbrali Flask, vendar je primeren katerikoli spletni okvir. Tukaj je koda:
Odlično, AI del je končan, poglejmo, kako ga lahko integriramo v spletni API. Za spletni API smo izbrali Flask, vendar je primeren katerikoli spletni okvir. Tukaj je koda:
### Uporaba Pythona
@ -141,18 +135,18 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Tukaj ustvarimo Flask API in definiramo privzeto pot "/" ter "/chat". Slednja je namenjena uporabi s strani našega sprednjega dela za posredovanje vprašanj.
Tukaj ustvarimo Flask API in definiramo privzeto pot "/" ter "/chat". Slednja je namenjena naši sprednji strani, da ji posreduje vprašanja.
Za integracijo *llm.py*moramo narediti naslednje:
Za integracijo *llm.py*potrebujemo naslednje:
- Uvoziti funkcijo`call_llm`:
- Uvoz funkcije`call_llm`:
```python
from llm import call_llm
from flask import Flask, request
```
- Poklicati jo iz poti "/chat":
- Klic funkcije iz poti "/chat":
```python
@app.route("/hello", methods=["POST"])
@ -180,9 +174,9 @@ Za integracijo *llm.py* moramo narediti naslednje:
Odlično, zdaj smo naredili, kar je potrebno.
## Konfiguracija Cors
## Konfigurirajte Cors
Omeniti moramo, da nastavimo nekaj, kot je CORS (cross-origin resource sharing). To pomeni, da ker bosta naše zaledje in sprednji del delovala na različnih vratih, moramo omogočiti sprednjemu delu, da kliče zaledje.
Omeniti moramo, da smo nastavili nekaj, kot je CORS (deljenje virov med različnimi izvorami). To pomeni, da ker bosta naše zaledje in sprednje strani delovali na različnih vratih, moramo omogočiti sprednji strani, da kliče zaledje.
### Uporaba Pythona
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Trenutno je nastavljeno, da dovoljuje "*", kar pomeni vse izvorne naslove, kar je nekoliko nevarno. To bi morali omejiti, ko gremo v produkcijo.
Trenutno je nastavljeno, da dovoljuje "*", kar pomeni vse izvore, kar je nekoliko nevarno. To bi morali omejiti, ko gremo v produkcijo.
## Zagon projekta
## Zaženite svoj projekt
Za zagon projekta morate najprej zagnati zaledje in nato sprednji del.
Za zagon projekta morate najprej zagnati zaledje in nato sprednjo stran.
### Uporaba Pythona
Imamo *llm.py* in *api.py*, kako lahko to deluje z zaledjem? Tukaj sta dve stvari, ki ju moramo narediti:
- Namestiti odvisnosti:
- Namestite odvisnosti:
```sh
cd backend
@ -215,17 +209,17 @@ Imamo *llm.py* in *api.py*, kako lahko to deluje z zaledjem? Tukaj sta dve stvar
pip install openai flask flask-cors openai
```
- Zagnati API:
- Zaženite API
```sh
python api.py
```
Če ste v Codespaces, morate iti na "Ports" v spodnjem delu urejevalnika, desno klikniti nanj, izbrati "Port Visibility" in izbrati "Public".
Če ste v Codespaces, morate iti na "Ports" v spodnjem delu urejevalnika, klikniti z desno tipko miške in izbrati "Port Visibility" ter nato "Public".
### Delo na sprednjem delu
### Delo na sprednji strani
Zdaj, ko imamo API, ki deluje, ustvarimo sprednji del za to. Minimalni sprednji del, ki ga bomo postopoma izboljšali. V mapi *frontend* ustvarite naslednje:
Zdaj, ko imamo API, ki deluje, ustvarimo sprednjo stran za to. Minimalno sprednjo stran bomo postopoma izboljšali. V mapi *frontend* ustvarite naslednje:
```text
backend/
@ -253,7 +247,7 @@ Začnimo z **index.html**:
</html>
```
Zgornje je absolutni minimum, ki ga potrebujete za podporo oknu za klepet, saj vsebuje besedilno polje, kjer se bodo prikazovala sporočila, vnosno polje za vnos sporočila in gumb za pošiljanje sporočila zaledju. Poglejmo naslednji JavaScript v *app.js*.
Zgornje je absolutni minimum, ki ga potrebujete za podporo oknu za klepet, saj vsebuje besedilno polje, kjer bodo prikazana sporočila, vnosno polje za vnos sporočila in gumb za pošiljanje sporočila zaledju. Poglejmo JavaScript v datoteki*app.js*.
**app.js**
@ -310,12 +304,12 @@ Zgornje je absolutni minimum, ki ga potrebujete za podporo oknu za klepet, saj v
})();
```
Pojdimo skozi kodo po delih:
Pojdimo skozi kodo po odsekih:
- 1) Tukaj dobimo referenco na vse elemente, ki jih bomo kasneje uporabljali v kodi.
- 2) V tem delu ustvarimo funkcijo, ki uporablja vgrajeno metodo `fetch` za klic našega zaledja.
- 1) Tukaj pridobimo referenco na vse elemente, na katere se bomo kasneje sklicevali v kodi.
- 2) V tem odseku ustvarimo funkcijo, ki uporablja vgrajeno metodo `fetch` za klic našega zaledja.
- 3) `appendMessage` pomaga dodajati odgovore, kot tudi sporočila, ki jih vnesete kot uporabnik.
- 4) Tukaj poslušamo dogodek "submit" in preberemo vnosno polje, postavimo uporabnikovo sporočilo v besedilno polje, pokličemo API in prikažemo odgovor v besedilnem polju.
- 4) Tukaj poslušamo dogodek "submit", preberemo vnosno polje, postavimo uporabnikovo sporočilo v besedilno polje, pokličemo API in prikažemo odgovor v besedilnem polju.
Poglejmo še oblikovanje, tukaj lahko resnično ustvarite videz po svoji želji, vendar tukaj so nekateri predlogi:
@ -342,10 +336,10 @@ S temi tremi razredi boste oblikovali sporočila različno, odvisno od tega, ali
### Sprememba osnovnega URL-ja
Obstaja ena stvar, ki je tukaj nismo nastavili, in to je `BASE_URL`. Ta ni znan, dokler vaše zaledje ni zagnano. Za nastavitev:
Tukaj je ena stvar, ki je nismo nastavili, in to je `BASE_URL`. Ta ni znan, dokler vaše zaledje ni zagnano. Za nastavitev:
- Če API deluje lokalno, ga nastavite na nekaj, kot je `http://localhost:5000`.
- Če deluje v Codespaces, bo videti nekaj takega: "[name]app.github.dev".
- Če API zaženete lokalno, bi moral biti nastavljen na nekaj, kot je `http://localhost:5000`.
- Če ga zaženete v Codespaces, bi moral izgledati nekaj, kot je "[name]app.github.dev".
## Naloga
@ -361,7 +355,7 @@ project/
...
```
Kopirajte vsebino iz zgoraj navedenih navodil, vendar jo prilagodite po svoji želji.
Kopirajte vsebino iz zgoraj navedenih navodil, vendar jo po želji prilagodite.
## Rešitev
@ -373,34 +367,34 @@ Poskusite spremeniti osebnost AI asistenta.
### Za Python
Ko pokličete `call_llm` v *api.py*, lahko spremenite drugi argument v kar koli želite, na primer:
Ko kličete `call_llm` v *api.py*, lahko spremenite drugi argument v kar želite, na primer:
```python
call_llm(message, "You are Captain Picard")
```
### Sprednji del
### Sprednja stran
Spremenite tudi CSS in besedilo po svoji želji, torej naredite spremembe v *index.html* in *styles.css*.
## Povzetek
Odlično, naučili ste se, kako od začetka ustvariti osebnega asistenta z uporabo AI. To smo naredili z uporabo GitHub Modelov, zaledja v Pythonu in sprednjega dela v HTML, CSS in JavaScript.
Odlično, naučili ste se, kako od začetka ustvariti osebnega asistenta z uporabo umetne inteligence. To smo storili z uporabo GitHub Modelov, zaledja v Pythonu in sprednje strani v HTML, CSS in JavaScript.
## Nastavitev s Codespaces
- Pojdite na: [Repozitorij Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Ustvarite iz predloge (prepričajte se, da ste prijavljeni v GitHub) v zgornjem desnem kotu:
- Ko ste v svojem repozitoriju, ustvarite Codespace:
To bi moralo zagnati okolje, s katerim lahko zdaj delate.
---
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
Мало контекста, прављење асистената за чет користећи генеративну вештачку интелигенцију је одличан начин да започнете учењео вештачкој интелигенцији. Оно што ћете научити је како да интегришете генеративну вештачку интелигенцију у веб апликацију током ове лекције, хајде да почнемо.
Мало контекста, прављење чет асистената уз помоћ генеративне вештачке интелигенције је одличан начин да почнете са учењем о вештачкој интелигенцији. Оно што ћете научити је како интегрисати генеративну вештачку интелигенцију у веб апликацију током ове лекције, хајде да почнемо.
## Повезивање са генеративном вештачком интелигенцијом
За позадину користимо GitHub Models. Тоје одлична услуга која вам омогућава да користите вештачку интелигенцију бесплатно. Идите на њен playground и преузмите код који одговара вашем изабраном језику за позадину. Ево како изгледа [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
За позадину користимо GitHub Моделе. Тоје одлична услуга која вам омогућава да користите вештачку интелигенцију бесплатно. Идите на њихов playground и преузмите код који одговара вашем изабраном језику за позадину. Ево како изгледа на [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Као што смо рекли, изаберите картицу "Code" и ваш изабрани runtime.
Као што смо рекли, изаберите картицу "Code" и ваш изабрани runtime.
Са овом функцијом `call_llm` сада можемо узети упит и системски упит, а функција ће на крају вратити резултат.
### Прилагођавање асистента за вештачку интелигенцију
### Прилагођавање AI Асистента
Ако желите да прилагодите асистента за вештачку интелигенцију, можете одредити како желите да се понаша попуњавањем системског упита овако:
Ако желите да прилагодите AI асистента, можете одредити како желите да се понаша попуњавањем системског упита на следећи начин:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Излагање преко веб API-ја
## Излагање преко Web API-ја
Одлично, завршили смо део са вештачком интелигенцијом, хајде да видимо како можемо да интегришемо то у веб API. За веб API бирамо Flask, али било који веб оквир би требало да буде добар. Хајде да видимо код за то:
Одлично, завршили смо део са вештачком интелигенцијом, хајде да видимо како можемо то интегрисати у Web API. За Web API бирамо да користимо Flask, али било који веб оквир би требало да буде добар. Хајде да видимо код за то:
### Коришћење Python-а
@ -141,18 +135,18 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Овде креирамо Flask API и дефинишемо подразумевану руту "/" и "/chat". Ова друга је намењена да је користи наш frontend за прослеђивање питања.
Овде креирамо Flask API и дефинишемо подразумевану руту "/" и "/chat". Ова друга је намењена да је користи наш frontend за слање питања.
Да бисмо интегрисали *llm.py*, ево шта треба да урадимо:
- Увоз функције`call_llm`:
- Увезите функцију`call_llm`:
```python
from llm import call_llm
from flask import Flask, request
```
- Позивање из руте "/chat":
- Позовите је из руте "/chat":
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
Овде анализирамо долазни захтев да бисмо преузели својство `message` из JSON тела. Након тога позивамо LLM са овим позивом:
Овде анализирамо долазни захтев како бисмо преузели својство `message` из JSON тела. Након тога позивамо LLM са овим позивом:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ if __name__ == "__main__":
})
```
Одлично, сада смо урадили оно штоје потребно.
Одлично, сада смо завршили штаје потребно.
## Конфигурисање Cors-а
Треба да напоменемо да смо поставили нешто попут CORS-а, дељењаресурса између различитих порекла. То значи да, пошто ће наша позадина и предњи део радити на различитим портовима, морамо дозволити предњем делу да позива позадину.
Треба да напоменемо да смо подесили нешто попут CORS-а, дељењересурса између различитих порекла. То значи да, пошто ће наша позадина и предњи крај радити на различитим портовима, морамо дозволити предњем крају да позива позадину.
### Коришћење Python-а
Постоји део кода у*api.py* који то поставља:
Постоји део кода у*api.py* који ово подешава:
```python
from flask_cors import CORS
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Тренутно је постављено да дозвољава "*" што значи сва порекла, и то је мало небезбедно, требало би да ограничимо када идемо у продукцију.
Тренутно је подешено да дозвољава "*" што значи сва порекла, и то је мало небезбедно, требало би да ограничимо када идемо у продукцију.
## Покретање пројекта
## Покрените свој пројекат
Да бисте покренули свој пројекат, прво треба да покренете позадину, а затим предњи део.
Да бисте покренули свој пројекат, прво морате покренути позадину, а затим предњи крај.
### Коришћење Python-а
Добро, имамо *llm.py* и *api.py*, како можемо да ово функционишеса позадином? Па, постоје две ствари које треба да урадимо:
У реду, имамо *llm.py* и *api.py*, како можемо ово учинити функционалнимса позадином? Па, постоје две ствари које треба да урадимо:
- Инсталирање зависности:
- Инсталирајте зависности:
```sh
cd backend
@ -215,17 +209,17 @@ CORS(app) # * example.com
pip install openai flask flask-cors openai
```
- Покретање API-ја
- Покрените API
```sh
python api.py
```
Ако сте у Codespaces-у, треба да одете на Ports у доњем делу уређивача, десним кликом на њега и кликнете "Port Visibility" и изаберете "Public".
Ако сте у Codespaces-у, потребно је да одете на Ports у доњем делу уређивача, десним кликом кликнете на њега и изаберете "Port Visibility" и изаберете "Public".
### Рад на предњем делу
### Рад на предњем крају
Сада када имамо API који ради, хајде да направимо предњи део за ово. Минимални предњи део који ћемо побољшавати корак по корак. У*frontend* фасцикли, креирајте следеће:
Сада када имамо API који ради, хајде да направимо предњи крај за ово. Минимални предњи крај који ћемо побољшавати корак по корак. Унутар фасцикле*frontend*, креирајте следеће:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
Ово изнад је апсолутни минимум који вам је потребан за подршку прозору за чет, јерсе састоји од текстуалног поља где ће се поруке приказивати, уноса где се куца порука и дугмета за слање поруке позадини. Хајде да погледамо JavaScript следеће у*app.js*.
Ово изнад је апсолутни минимум који вам је потребан за подршку чет прозору, јерсе састоји од текстуалног поља где ће се поруке приказивати, уноса за куцање поруке и дугмета за слање поруке позадини. Хајде да погледамо JavaScript у *app.js*
**app.js**
@ -312,12 +306,12 @@ styles.css
Хајде да прођемо кроз код по секцијама:
- 1) Овде добијамо референцу на све наше елементе које ћемо касније користити у коду.
- 2) У овом делу креирамо функцију која користи уграђени метод `fetch`за позивање наше позадине.
- 3) `appendMessage` помаже у додавању одговора као и онога што ви као корисник куцате.
- 1) Овде добијамо референцу на све наше елементе које ћемо касније користити у коду
- 2) У овом делу креирамо функцију која користи уграђени метод `fetch`који позива нашу позадину
- 3) `appendMessage` помаже у додавању одговора као и онога што ви као корисник укуцате.
- 4) Овде слушамо догађај submit и на крају читамо поље за унос, постављамо корисничку поруку у текстуално поље, позивамо API, приказујемо одговор у текстуалном пољу.
Хајде да погледамо стилизовање следеће, овде можете бити веома креативни и направити да изгледа како желите, али ево неких предлога:
Хајде да погледамо стилизовање следеће, овде можете бити креативни и направити да изгледа како желите, али ево неких предлога:
**styles.css**
@ -338,18 +332,18 @@ styles.css
}
```
Са ове три класе, стилизоваћете поруке различито у зависности од тога да ли долазе од асистента или од вас као корисника. Ако желите инспирацију, погледајте `solution/frontend/styles.css` фасциклу.
Са ове три класе, стилизоваћете поруке различито у зависности од тога да ли долазе од асистента или од вас као корисника. Ако желите инспирацију, погледајте фасциклу `solution/frontend/styles.css`.
### Промена основног URL-а
### Промените Base Url
Постоји једна ствар коју овде нисмо поставили, а то је`BASE_URL`, ово није познато док ваша позадина не буде покренута. Да бисте га поставили:
Постојала је једна ствар коју овде нисмо подесили, а то је`BASE_URL`, ово није познато док ваша позадина не буде покренута. Да бисте га подесили:
- Ако локално покрећете API, требало би да буде постављен на нешто попут `http://localhost:5000`.
- Ако гапокрећете у Codespaces-у, требало би да изгледа нешто попут "[name]app.github.dev".
- Ако локално покрећете API, требало би да буде подешен на нешто попут `http://localhost:5000`.
- Ако покрећете у Codespaces-у, требало би да изгледа нешто попут "[name]app.github.dev".
## Задатак
Креирајте своју фасциклу *project*са садржајем као што је наведено:
Креирајте своју фасциклу *project*са садржајем као што је:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Копирајте садржај из онога што јегоре наведено, али слободно га прилагодите по вашем укусу.
Копирајте садржај из онога што јегоре наведено, али слободно га прилагодите по свом укусу.
## Решење
@ -369,7 +363,7 @@ project/
## Бонус
Покушајте да промените личност асистента за вештачку интелигенцију.
Покушајте да промените личност AI асистента.
### За Python
@ -379,24 +373,24 @@ project/
call_llm(message, "You are Captain Picard")
```
### Предњи део
### Предњи крај
Промените такође CSS и текст по вашем укусу, па урадите измене у*index.html* и *styles.css*.
Промените такође CSS и текст по свом укусу, дакле унесите измене у*index.html* и *styles.css*.
## Резиме
Одлично, научили сте од почетка како да направите личног асистента користећи вештачку интелигенцију. Урадили смо то користећи GitHub Models, позадину у Python-у и предњи деоу HTML-у, CSS-у и JavaScript-у.
Одлично, научили сте од почетка како да направите личног асистента користећи вештачку интелигенцију. То смо урадили користећи GitHub Моделе, позадину у Python-у и предњи крају HTML-у, CSS-у и JavaScript-у.
## Постављање у Codespaces
## Подешавање са Codespaces-ом
- Идите на: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Идите на: [Web Dev For Beginners репозиторијум](https://github.com/microsoft/Web-Dev-For-Beginners)
- Креирајте из шаблона (уверите се да сте пријављени на GitHub) у горњем десном углу:
- Када сте увашем репозиторијуму, креирајте Codespace:
- Када сте усвом репозиторијуму, креирајте Codespace:
Lite bakgrund, att bygga chattassistenter med generativ AI är ett utmärkt sätt att börja lära sig om AI. Det du kommer att lära dig är att integrera generativ AI i en webbapplikation under denna lektion, låt oss börja.
Lite bakgrund, att bygga chattassistenter med generativ AI är ett utmärkt sätt att börja lära sig om AI. Det du kommer att lära dig är att integrera generativ AI i en webbapp under denna lektion, låt oss börja.
## Anslutning till generativ AI
## Ansluta till generativ AI
För backend använder vi GitHub Models. Det är en fantastisk tjänst som gör det möjligt att använda AI gratis. Gå till dess playground och hämta kod som motsvarar ditt valda backend-språk. Så här ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
För backend använder vi GitHub Models. Det är en fantastisk tjänst som låter dig använda AI gratis. Gå till dess playground och hämta koden som motsvarar ditt valda backend-språk. Så här ser det ut på [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Som vi nämnde, välj fliken "Code" och din valda runtime.
Som vi nämnde, välj fliken "Code" och din valda runtime.
I det här fallet väljer vi Python, vilket innebär att vi använder denna kod:
I detta fall väljer vi Python, vilket innebär att vi väljer denna kod:
```python
"""Run this model in Python
@ -106,9 +100,9 @@ Om du vill anpassa AI-assistenten kan du specificera hur du vill att den ska bet
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Exponera det via ett webb-API
## Exponera det via ett Web API
Bra, vi har gjort AI-delen, låt oss se hur vi kan integrera det i ett webb-API. För webb-API:t väljer vi Flask, men vilken webbframework som helst borde fungera. Låt oss se koden för det:
Bra, vi har gjort AI-delen, låt oss se hur vi kan integrera det i ett Web API. För Web API väljer vi att använda Flask, men vilket webbframework som helst borde fungera. Låt oss titta på koden för det:
### Använda Python
@ -141,7 +135,7 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Här skapar vi ett Flask-API och definierar en standardroute "/" och "/chat". Den senare är tänkt att användas av vår frontend för att skicka frågor till den.
Här skapar vi ett Flask-API och definierar en standardrutt "/" och "/chat". Den senare är tänkt att användas av vår frontend för att skicka frågor till den.
För att integrera *llm.py* behöver vi göra följande:
@ -152,7 +146,7 @@ För att integrera *llm.py* behöver vi göra följande:
from flask import Flask, request
```
- Anropa den från "/chat"-route:
- Anropa den från "/chat"-rutten:
```python
@app.route("/hello", methods=["POST"])
@ -182,7 +176,7 @@ Bra, nu har vi gjort det vi behöver.
## Konfigurera Cors
Vi bör nämna att vi ställer in något som CORS, cross-origin resource sharing. Detta innebär att eftersom vår backend och frontend kommer att köras på olika portar, måste vi tillåta att frontenden kan anropa backend.
Vi bör nämna att vi ställer in något som CORS, cross-origin resource sharing. Detta innebär att eftersom vår backend och frontend kommer att köras på olika portar, måste vi tillåta frontenden att anropa backenden.
### Använda Python
@ -199,7 +193,7 @@ Just nu är det inställt att tillåta "*" vilket är alla ursprung, och det är
## Kör ditt projekt
För att köra ditt projekt behöver du starta upp din backend först och sedan din frontend.
För att köra ditt projekt behöver du starta din backend först och sedan din frontend.
### Använda Python
@ -223,7 +217,7 @@ Ok, så vi har *llm.py* och *api.py*, hur kan vi få detta att fungera med en ba
Om du är i Codespaces behöver du gå till Ports längst ner i redigeraren, högerklicka på det och klicka på "Port Visibility" och välj "Public".
### Arbeta med en frontend
### Arbeta på en frontend
Nu när vi har ett API igång, låt oss skapa en frontend för detta. En minimal frontend som vi kommer att förbättra stegvis. I en *frontend*-mapp, skapa följande:
@ -253,7 +247,7 @@ Låt oss börja med **index.html**:
</html>
```
Ovan är det absolut minsta du behöver för att stödja ett chattfönster, eftersom det består av en textarea där meddelanden kommer att visas, ett inputfält för att skriva meddelandet och en knapp för att skicka ditt meddelande till backend. Låt oss titta på JavaScript i *app.js*.
Ovanstående är det absolut minsta du behöver för att stödja ett chattfönster, eftersom det består av en textarea där meddelanden kommer att visas, ett inputfält för att skriva meddelanden och en knapp för att skicka ditt meddelande till backenden. Låt oss titta på JavaScript i *app.js*.
**app.js**
@ -310,12 +304,12 @@ Ovan är det absolut minsta du behöver för att stödja ett chattfönster, efte
})();
```
Låt oss gå igenom koden per sektion:
Låt oss gå igenom koden sektion för sektion:
- 1) Här hämtar vi en referens till alla våra element som vi kommer att referera till senare i koden.
- 2) I denna sektion skapar vi en funktion som använder den inbyggda metoden `fetch` för att anropa vår backend.
- 3) `appendMessage` hjälper till att lägga till svar samt det du som användare skriver.
- 4) Här lyssnar vi på submit-händelsen och läser inputfältet, placerar användarens meddelande i textarean, anropar API:t och renderar svaret i textarean.
- 3) `appendMessage` hjälper till att lägga till svar samt vad du som användare skriver.
- 4) Här lyssnar vi på submit-händelsen och läser inmatningsfältet, placerar användarens meddelande i textområdet, anropar API:t och renderar svaret i textområdet.
Låt oss titta på styling härnäst, här kan du verkligen gå loss och få det att se ut som du vill, men här är några förslag:
@ -338,14 +332,14 @@ Låt oss titta på styling härnäst, här kan du verkligen gå loss och få det
}
```
Med dessa tre klasser kommer du att styla meddelanden olika beroende på om de kommer från en assistent eller dig som användare. Om du vill bli inspirerad, kolla in `solution/frontend/styles.css`-mappen.
Med dessa tre klasser kommer du att styla meddelanden olika beroende på om de kommer från assistenten eller dig som användare. Om du vill bli inspirerad, kolla in `solution/frontend/styles.css`-mappen.
### Ändra Base Url
### Ändra Bas-URL
Det var en sak här vi inte satte och det var `BASE_URL`, detta är inte känt förrän din backend är startad. För att ställa in det:
Det var en sak vi inte satte här och det var `BASE_URL`, detta är inte känt förrän din backend är startad. För att ställa in det:
- Om du kör API:t lokalt, bör det ställas in till något som `http://localhost:5000`.
- Om det körs i Codespaces, bör det se ut som "[name]app.github.dev".
- Om du kör API:t lokalt bör det ställas in till något som `http://localhost:5000`.
- Om det körs i Codespaces bör det se ut som "[name]app.github.dev".
## Uppgift
@ -361,7 +355,7 @@ project/
...
```
Kopiera innehållet från det som instruerades ovan men känn dig fri att anpassa det efter dinaönskemål.
Kopiera innehållet från det som instruerades ovan men känn dig fri att anpassa det efter din smak.
## Lösning
@ -369,7 +363,7 @@ Kopiera innehållet från det som instruerades ovan men känn dig fri att anpass
## Bonus
Prova att ändra personligheten hos AI-assistenten.
Försök att ändra AI-assistentens personlighet.
### För Python
@ -381,13 +375,13 @@ call_llm(message, "You are Captain Picard")
### Frontend
Ändra också CSS och text efter dinaönskemål, så gör ändringar i *index.html* och *styles.css*.
Ändra också CSS och text efter din smak, så gör ändringar i *index.html* och *styles.css*.
## Sammanfattning
Bra, du har lärt dig från grunden hur man skapar en personlig assistent med hjälp av AI. Vi har gjort det med hjälp av GitHub Models, en backend i Python och en frontend i HTML, CSS och JavaScript.
## Sätt upp med Codespaces
## Ställ in med Codespaces
- Navigera till: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Skapa från en mall (se till att du är inloggad på GitHub) i det övre högra hörnet:
@ -403,4 +397,4 @@ Bra, du har lärt dig från grunden hur man skapar en personlig assistent med hj
---
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som kan uppstå vid användning av denna översättning.
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
@ -13,25 +13,19 @@ Mradi huu wa gumzo unaonyesha jinsi ya kujenga Msaidizi wa Gumzo kwa kutumia Git
Hivi ndivyo mradi uliokamilika unavyoonekana:
<div>
<imgsrc="./assets/screenshot.png"alt="App ya Gumzo"width="600">
</div>
Kwa muktadha, kujenga wasaidizi wa gumzo kwa kutumia AI ya kizazi ni njia nzuri ya kuanza kujifunza kuhusu AI. Kile utakachojifunza ni jinsi ya kuunganisha AI ya kizazi kwenye programu ya wavuti katika somo hili, hebu tuanze.
## Kuunganisha na AI ya kizazi
Kwa upande wa backend, tunatumia GitHub Models. Ni huduma nzuri inayokuwezesha kutumia AI bila malipo. Nenda kwenye uwanja wake wa majaribio na uchukue msimbo unaolingana na lugha ya backend unayochagua. Hivi ndivyo inavyoonekana kwenye [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Kwa upande wa nyuma (backend), tunatumia GitHub Models. Ni huduma nzuri inayokuwezesha kutumia AI bila malipo. Nenda kwenye uwanja wake wa majaribio na chukua msimbo unaolingana na lugha ya nyuma unayochagua. Hivi ndivyo inavyoonekana kwenye [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Kama tulivyosema, chagua kichupo cha "Code" na runtime unayochagua.
Kama tulivyosema, chagua kichupo cha "Code" na mazingira unayopendelea.
<div>
<imgsrc="./assets/playground-choice.png"alt="uchaguzi wa uwanja wa majaribio"with="600">
</div>
Kwa kutumia kazi hii `call_llm` sasa tunaweza kuchukua maelekezo na maelekezo ya mfumo, na kazi hiyo itarudisha matokeo.
Kwa kutumia kazi hii `call_llm` sasa tunaweza kuchukua maelezo ya awali na maelezo ya mfumo, na kazi hii itarudisha matokeo.
### Kubinafsisha Msaidizi wa AI
Ikiwa unataka kubinafsisha msaidizi wa AI unaweza kubainisha jinsi unavyotaka awe kwa kujaza maelekezo ya mfumo kama ifuatavyo:
Ikiwa unataka kubinafsisha msaidizi wa AI unaweza kubainisha jinsi unavyotaka awe kwa kujaza maelezo ya mfumo kama hivi:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Hapa, tunaunda API ya flask na kufafanua njia ya msingi "/" na "/chat". Ya mwisho inakusudiwa kutumiwa na frontend yetu kupitisha maswali kwake.
Hapa, tunaunda API ya Flask na kufafanua njia ya msingi "/" na "/chat". Njia ya pili imekusudiwa kutumiwa na sehemu ya mbele (frontend) kupitisha maswali kwake.
Kuunganisha *llm.py* tunachohitaji kufanya ni:
Ili kuunganisha *llm.py* tunachohitaji kufanya ni:
- Kuingiza kazi ya `call_llm`:
@ -152,7 +146,7 @@ Kuunganisha *llm.py* tunachohitaji kufanya ni:
from flask import Flask, request
```
- Kuiita kutoka njia ya "/chat":
- Kuiita kutoka kwenye njia ya "/chat":
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ Kuunganisha *llm.py* tunachohitaji kufanya ni:
})
```
Hapa tunachambua ombi linalokuja ili kupata mali ya `message` kutoka kwa mwili wa JSON. Baadaye tunaita LLM kwa simu hii:
Hapa tunachambua ombi linalokuja ili kupata mali ya `message` kutoka kwa mwili wa JSON. Baadaye tunaita LLM kwa mwito huu:
```python
response = call_llm(message, "You are a helpful assistant")
@ -182,7 +176,7 @@ Nzuri, sasa tumemaliza kile tunachohitaji.
## Kuseti Cors
Tunapaswa kutaja kwamba tunaseti kitu kama CORS, kushiriki rasilimali za asili tofauti. Hii inamaanisha kwamba kwa sababu backend yetu na frontend zitaendesha kwenye bandari tofauti, tunahitaji kuruhusu frontend kupiga simu kwenye backend.
Tunapaswa kutaja kwamba tunaseti kitu kama CORS, kushiriki rasilimali kati ya asili tofauti. Hii inamaanisha kwamba kwa sababu sehemu yetu ya nyuma na ya mbele zitakimbia kwenye bandari tofauti, tunahitaji kuruhusu sehemu ya mbele kupiga simu kwenye sehemu ya nyuma.
### Kutumia Python
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Kwa sasa kimesetiwa kuruhusu "*" ambayo ni asili zote, na hiyo si salama sana, tunapaswa kuibana mara tu tunapofika kwenye uzalishaji.
Kwa sasa kimeseti kuruhusu "*" ambayo ni asili zote, na hiyo si salama sana, tunapaswa kuibana mara tu tunapofika kwenye uzalishaji.
## Endesha mradi wako
Kuendesha mradi wako, unahitaji kuanzisha backend yako kwanza na kisha frontend yako.
Ili kuendesha mradi wako, unahitaji kuanza sehemu ya nyuma kwanza na kisha sehemu ya mbele.
### Kutumia Python
Sawa, kwa hivyo tuna *llm.py* na *api.py*, tunawezaje kufanya hii ifanye kazi na backend? Naam, kuna mambo mawili tunahitaji kufanya:
Sawa, kwa hivyo tuna *llm.py* na *api.py*, tunawezaje kufanya kazi hii na sehemu ya nyuma? Naam, kuna mambo mawili tunahitaji kufanya:
- Sakinisha utegemezi:
@ -223,9 +217,9 @@ Sawa, kwa hivyo tuna *llm.py* na *api.py*, tunawezaje kufanya hii ifanye kazi na
Ikiwa uko kwenye Codespaces unahitaji kwenda kwenye Ports katika sehemu ya chini ya mhariri, bofya kulia juu yake na bonyeza "Port Visibility" na uchague "Public".
### Fanya kazi kwenye frontend
### Fanya kazi kwenye sehemu ya mbele
Sasa kwa kuwa tuna API inayofanya kazi, hebu tuunde frontend kwa ajili ya hii. Frontend ya kiwango cha chini kabisa ambayo tutaboresha hatua kwa hatua. Katika folda ya *frontend*, unda yafuatayo:
Sasa kwa kuwa tuna API inayofanya kazi, hebu tuunde sehemu ya mbele kwa ajili ya hii. Sehemu ya mbele ya kiwango cha chini kabisa ambayo tutaboresha hatua kwa hatua. Katika folda ya *frontend*, unda yafuatayo:
```text
backend/
@ -253,7 +247,7 @@ Hebu tuanze na **index.html**:
</html>
```
Hii hapo juu ni kiwango cha chini kabisa unachohitaji ili kusaidia dirisha la gumzo, kwani linajumuisha eneo la maandishi ambapo ujumbe utaonyeshwa, ingizo la mahali pa kuandika ujumbe na kitufe cha kutuma ujumbe wako kwa backend. Hebu tuangalie JavaScript inayofuata katika *app.js*
Hii hapo juu ni kiwango cha chini kabisa unachohitaji ili kusaidia dirisha la gumzo, kwani lina sehemu ya maandishi ambapo ujumbe utaonyeshwa, sehemu ya kuingiza ambapo utaandika ujumbe, na kitufe cha kutuma ujumbe wako kwa sehemu ya nyuma. Hebu tuangalie JavaScript inayofuata katika *app.js*
**app.js**
@ -312,12 +306,12 @@ Hii hapo juu ni kiwango cha chini kabisa unachohitaji ili kusaidia dirisha la gu
Hebu tuende kupitia msimbo kwa kila sehemu:
- 1) Hapa tunapata rejeleo kwa vipengele vyote ambavyo tutarejelea baadaye katika msimbo
- 2) Katika sehemu hii, tunaunda kazi inayotumia njia ya kujengwa ya `fetch` inayopiga simu backend yetu
- 1) Hapa tunapata rejeleo kwa vipengele vyote tutakavyorejelea baadaye katika msimbo
- 2) Katika sehemu hii, tunaunda kazi inayotumia njia ya kujengwa ya `fetch` inayopiga simu sehemu ya nyuma
- 3) `appendMessage` husaidia kuongeza majibu pamoja na kile unachotype kama mtumiaji.
- 4) Hapa tunasikiliza tukio la submit na tunasoma uwanja wa ingizo, kuweka ujumbe wa mtumiaji katika eneo la maandishi, kupiga API, na kuonyesha jibu hilo katika eneo la maandishi.
- 4) Hapa tunasikiliza tukio la kuwasilisha na tunasoma sehemu ya kuingiza, kuweka ujumbe wa mtumiaji kwenye sehemu ya maandishi, kupiga simu API, na kuonyesha jibu hilo kwenye sehemu ya maandishi.
Hebu tuangalie mitindo inayofuata, hapa ndipo unaweza kwenda mbali na kuifanya ionekane unavyotaka, lakini hapa kuna mapendekezo:
Hebu tuangalie mitindo inayofuata, hapa ndipo unaweza kuwa mbunifu na kuifanya ionekane unavyotaka, lakini hapa kuna mapendekezo:
**styles.css**
@ -338,18 +332,18 @@ Hebu tuangalie mitindo inayofuata, hapa ndipo unaweza kwenda mbali na kuifanya i
}
```
Kwa darasa hizi tatu, utapanga ujumbe tofauti kulingana na mahali zinapotoka, msaidizi au wewe kama mtumiaji. Ikiwa unataka kupata msukumo, angalia folda ya `solution/frontend/styles.css`.
Kwa darasa hizi tatu, utaweza kutengeneza mitindo tofauti kulingana na mahali ujumbe unatoka, msaidizi au wewe kama mtumiaji. Ikiwa unataka kupata msukumo, angalia folda ya `solution/frontend/styles.css`.
### Badilisha Base Url
Kuna jambo moja hapa hatukuseti, nalo ni `BASE_URL`, hili halijulikani hadi backend yako ianze. Ili kuiseti:
Kuna jambo moja hapa hatukuseti, nalo ni `BASE_URL`, hili halijulikani hadi sehemu ya nyuma ianze. Ili kuiseti:
- Ikiwa unaendesha API kwa ndani, inapaswa kusetiwa kwa kitu kama `http://localhost:5000`.
- Ikiwa unaendesha API kwa ndani, inapaswa kusetiwa kama `http://localhost:5000`.
- Ikiwa unaendesha kwenye Codespaces, inapaswa kuonekana kama "[name]app.github.dev".
## Kazi
Unda folda yako mwenyewe *project* yenye maudhui kama ifuatavyo:
Unda folda yako mwenyewe *project* yenye maudhui kama hivi:
```text
project/
@ -365,7 +359,7 @@ Nakili maudhui kutoka kwa yale yaliyoelekezwa hapo juu lakini jisikie huru kubin
## Suluhisho
[Solution](./solution/README.md)
[Suluhisho](./solution/README.md)
## Ziada
@ -373,19 +367,19 @@ Jaribu kubadilisha tabia ya msaidizi wa AI.
### Kwa Python
Unapopiga `call_llm` katika *api.py* unaweza kubadilisha hoja ya pili kwa unachotaka, kwa mfano:
Unapopiga `call_llm` katika *api.py* unaweza kubadilisha hoja ya pili kwa unavyotaka, kwa mfano:
```python
call_llm(message, "You are Captain Picard")
```
### Frontend
### Sehemu ya mbele
Badilisha pia CSS na maandishi unavyopenda, kwa hivyo fanya mabadiliko katika *index.html* na *styles.css*.
## Muhtasari
Nzuri, umejifunza kutoka mwanzo jinsi ya kuunda msaidizi wa kibinafsi kwa kutumia AI. Tumefanya hivyo kwa kutumia GitHub Models, backend katika Python na frontend katika HTML, CSS na JavaScript.
Nzuri, umejifunza kutoka mwanzo jinsi ya kuunda msaidizi wa kibinafsi kwa kutumia AI. Tumefanya hivyo kwa kutumia GitHub Models, sehemu ya nyuma katika Python na sehemu ya mbele katika HTML, CSS na JavaScript.
## Kuseti na Codespaces
@ -398,9 +392,9 @@ Nzuri, umejifunza kutoka mwanzo jinsi ya kuunda msaidizi wa kibinafsi kwa kutumi
Hii inapaswa kuanzisha mazingira ambayo sasa unaweza kufanya kazi nayo.
Hii inapaswa kuanzisha mazingira unayoweza kufanya kazi nayo sasa.
---
**Kanusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya kiasili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
ข้อมูลเบื้องต้น การสร้างผู้ช่วยแชทโดยใช้ Generative AI เป็นวิธีที่ดีในการเริ่มเรียนรู้เกี่ยวกับ AI สิ่งที่คุณจะได้เรียนรู้คือการผสาน Generative AI เข้ากับเว็บแอปตลอดบทเรียนนี้ มาเริ่มกันเลย
หากคุณต้องการปรับแต่งผู้ช่วย AI คุณสามารถกำหนดวิธีการที่คุณต้องการให้มันทำงานโดยการเติม System Prompt ดังนี้:
หากคุณต้องการปรับแต่งผู้ช่วย AI คุณสามารถระบุวิธีที่คุณต้องการให้มันทำงานโดยการเติม System Prompt เช่นนี้:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## เปิดใช้งานผ่าน Web API
เยี่ยม เราได้ทำส่วน AI เสร็จแล้ว มาดูกันว่าเราจะผสานมันเข้ากับ Web API ได้อย่างไร สำหรับ Web API เราเลือกใช้ Flask แต่ Framework เว็บใด ๆ ก็น่าจะใช้ได้ มาดูโค้ดกัน:
เยี่ยม เราได้ทำส่วน AI เสร็จแล้ว มาดูกันว่าเราจะผสานมันเข้ากับ Web API ได้อย่างไร สำหรับ Web API เราเลือกใช้ Flask แต่ Framework เว็บใด ๆ ก็สามารถใช้ได้ มาดูโค้ดกัน:
Kaunting konteksto, ang paggawa ng Chat assistants gamit ang generative AI ay isang mahusay na paraan upang magsimulang matuto tungkol sa AI. Sa araling ito, matututuhan mong isama ang generative AI sa isang web app. Simulan na natin.
Kaunting konteksto, ang paggawa ng Chat assistants gamit ang generative AI ay isang mahusay na paraan upang magsimula sa pag-aaral tungkol sa AI. Ang matututunan mo ay kung paano i-integrate ang generative AI sa isang web app sa buong aralin na ito, simulan na natin.
## Pagkonekta sa generative AI
Para sa backend, gagamit tayo ng GitHub Models. Isa itong mahusay na serbisyo na nagbibigay-daan sa iyo na gumamit ng AI nang libre. Pumunta sa playground nito at kunin ang code na tumutugma sa napili mong backend na wika. Ganito ang itsura nito sa [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Para sa backend, ginagamit natin ang GitHub Models. Isa itong mahusay na serbisyo na nagbibigay-daan sa iyo na gumamit ng AI nang libre. Pumunta sa playground nito at kunin ang code na tumutugma sa napili mong backend na wika. Ganito ang itsura nito sa [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
Tulad ng nabanggit, piliin ang tab na "Code" at ang runtime na gusto mo.
Tulad ng nabanggit, piliin ang tab na "Code" at ang runtime na napili mo.
Linisin natin ang code na ito nang kaunti upang magamit muli:
```python
def call_llm(prompt: str, system_message: str):
@ -100,7 +94,7 @@ Sa pamamagitan ng function na `call_llm`, maaari na nating kunin ang isang promp
### I-customize ang AI Assistant
Kung nais mong i-customize ang AI assistant, maaari mong tukuyin kung paano ito dapat kumilos sa pamamagitan ng paglalagay ng system prompt tulad nito:
Kung nais mong i-customize ang AI assistant, maaari mong tukuyin kung paano mo nais itong kumilos sa pamamagitan ng paglalagay ng system prompt tulad nito:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,9 +102,9 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## I-expose ito sa pamamagitan ng Web API
Magaling, tapos na natin ang AI na bahagi. Tingnan natin kung paano natin ito maisasama sa isang Web API. Para sa Web API, gagamit tayo ng Flask, ngunit anumang web framework ay maaaring gamitin. Narito ang code para dito:
Mahusay, tapos na natin ang bahagi ng AI, tingnan natin kung paano natin ito ma-integrate sa isang Web API. Para sa Web API, pinili natin ang Flask, ngunit anumang web framework ay maaaring gamitin. Tingnan natin ang code para dito:
### Gamit ang Python
### Paggamit ng Python
```python
# api.py
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Dito, lumikha tayo ng isang Flask API at nagtakda ng default na ruta na "/" at "/chat". Ang huli ay gagamitin ng ating frontend upang maipasa ang mga tanong dito.
Dito, gumawa tayo ng flask API at nagtakda ng default na ruta "/" at "/chat". Ang huli ay para magamit ng ating frontend upang maipasa ang mga tanong dito.
Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin:
Upang i-integrate ang *llm.py*, narito ang kailangan nating gawin:
- I-import ang function na `call_llm`:
@ -167,7 +161,7 @@ Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin:
})
```
Dito, ini-parse natin ang papasok na request upang makuha ang property na `message` mula sa JSON body. Pagkatapos, tatawagin natin ang LLM gamit ang tawag na ito:
Dito, ina-parse natin ang papasok na request upang makuha ang property na `message` mula sa JSON body. Pagkatapos, tinatawag natin ang LLM gamit ang tawag na ito:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,15 +172,15 @@ Upang maisama ang *llm.py*, narito ang mga hakbang na kailangan gawin:
})
```
Magaling, natapos na natin ang kailangan.
Mahusay, natapos na natin ang kailangan.
## I-configure ang Cors
Dapat nating banggitin na nag-set up tayo ng isang bagay tulad ng CORS, o cross-origin resource sharing. Nangangahulugan ito na dahil ang ating backend at frontend ay tatakbo sa magkaibang ports, kailangan nating payagan ang frontend na tumawag sa backend.
Dapat nating banggitin na nag-set up tayo ng isang bagay tulad ng CORS, cross-origin resource sharing. Nangangahulugan ito na dahil ang ating backend at frontend ay tatakbo sa magkaibang ports, kailangan nating payagan ang frontend na tumawag sa backend.
### Gamit ang Python
### Paggamit ng Python
Narito ang isang piraso ng code sa *api.py* na nagse-set up nito:
Mayroong piraso ng code sa *api.py* na nagse-set up nito:
```python
from flask_cors import CORS
@ -195,17 +189,17 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Sa kasalukuyan, naka-set up ito upang payagan ang "*" o lahat ng origins, ngunit hindi ito ligtas. Dapat natin itong limitahan kapag nasa production na.
Sa ngayon, naka-set up ito upang payagan ang "*" na nangangahulugang lahat ng origins, ngunit medyo hindi ito ligtas. Dapat natin itong limitahan kapag nasa production na.
## Patakbuhin ang iyong proyekto
Upang patakbuhin ang iyong proyekto, kailangan mong simulan muna ang iyong backend at pagkatapos ang iyong frontend.
### Gamit ang Python
### Paggamit ng Python
Ok, mayroon tayong *llm.py* at *api.py*. Paano natin ito mapapagana sa backend? Narito ang dalawang hakbang:
Ok, mayroon tayong *llm.py* at *api.py*, paano natin ito mapapagana sa backend? May dalawang bagay na kailangan nating gawin:
- I-install ang mga dependencies:
- I-install ang dependencies:
```sh
cd backend
@ -215,17 +209,17 @@ Ok, mayroon tayong *llm.py* at *api.py*. Paano natin ito mapapagana sa backend?
pip install openai flask flask-cors openai
```
- Simulan ang API:
- Simulan ang API
```sh
python api.py
```
Kung nasa Codespaces ka, pumunta sa Ports sa ibabang bahagi ng editor, i-right-click ito at i-click ang "Port Visibility" at piliin ang "Public".
Kung nasa Codespaces ka, kailangan mong pumunta sa Ports sa ibabang bahagi ng editor, i-right-click ito at i-click ang "Port Visibility" at piliin ang "Public".
### Gumawa ng frontend
Ngayon na may API na tayong tumatakbo, gumawa tayo ng frontend para dito. Isang pinakasimpleng frontend na unti-unti nating pagagandahin. Sa isang *frontend* folder, gumawa ng mga sumusunod:
Ngayon na mayroon na tayong API na tumatakbo, gumawa tayo ng frontend para dito. Isang pinakasimpleng frontend na ating pagagandahin nang paunti-unti. Sa isang *frontend* folder, gumawa ng sumusunod:
```text
backend/
@ -253,7 +247,7 @@ Simulan natin sa **index.html**:
</html>
```
Ang nasa itaas ay ang pinakapayak na kailangan mo upang suportahan ang isang chat window. Binubuo ito ng isang textarea kung saan irerender ang mga mensahe, isang input para sa pag-type ng mensahe, at isang button para ipadala ang iyong mensahe sa backend. Tingnan natin ang JavaScript sa *app.js*.
Ang nasa itaas ay ang pinakasimple na kailangan mo upang suportahan ang isang chat window, dahil binubuo ito ng isang textarea kung saan irerender ang mga mensahe, isang input kung saan magta-type ng mensahe, at isang button para ipadala ang iyong mensahe sa backend. Tingnan natin ang JavaScript sa *app.js*
**app.js**
@ -310,14 +304,14 @@ Ang nasa itaas ay ang pinakapayak na kailangan mo upang suportahan ang isang cha
})();
```
Tingnan natin ang code bawat seksyon:
Tingnan natin ang code per section:
- 1) Dito, kinukuha natin ang reference sa lahat ng mga elemento na gagamitin natin sa code.
- 2) Sa seksyong ito, lumikha tayo ng function na gumagamit ng built-in na `fetch` method upang tawagin ang ating backend.
- 3) Ang `appendMessage` ay tumutulong magdagdag ng mga sagot pati na rin ang mga mensaheng tina-type ng user.
- 4) Dito, nakikinig tayo sa submit event, binabasa ang input field, inilalagay ang mensahe ng user sa textarea, tinatawag ang API, at irerender ang sagot sa textarea.
- 2) Sa seksyong ito, gumawa tayo ng function na gumagamit ng built-in na `fetch` method upang tawagin ang ating backend.
- 3) Ang `appendMessage` ay tumutulong magdagdag ng mga sagot pati na rin ang mga mensahe na tina-type ng user.
- 4) Dito, nakikinig tayo sa submit event at binabasa ang input field, inilalagay ang mensahe ng user sa textarea, tinatawag ang API, at irerender ang sagot sa textarea.
Tingnan natin ang styling, narito kung saan maaari kang maging malikhain at gawing ayon sa gusto mo. Narito ang ilang mungkahi:
Tingnan natin ang styling, dito maaari kang maging malikhain at gawing maganda ang itsura, ngunit narito ang ilang mungkahi:
**styles.css**
@ -338,18 +332,18 @@ Tingnan natin ang styling, narito kung saan maaari kang maging malikhain at gawi
}
```
Sa tatlong klase na ito, iba-iba ang istilo ng mga mensahe depende kung galing ito sa assistant o sa user. Kung nais mong ma-inspire, tingnan ang `solution/frontend/styles.css` folder.
Sa tatlong klase na ito, maistyle mo ang mga mensahe depende kung saan ito nanggaling, mula sa assistant o sa user. Kung nais mong ma-inspire, tingnan ang `solution/frontend/styles.css` folder.
### Baguhin ang Base Url
May isang bagay dito na hindi pa natin na-set, at iyon ay ang `BASE_URL`. Hindi ito malalaman hanggang sa magsimula ang iyong backend. Upang i-set ito:
May isang bagay dito na hindi natin na-set, at iyon ay ang `BASE_URL`. Hindi ito malalaman hanggang magsimula ang iyong backend. Upang i-set ito:
- Kung ang API ay tumatakbo nang lokal, dapat itong i-set sa `http://localhost:5000`.
- Kung tumatakbo ang API nang lokal, dapat itong i-set sa `http://localhost:5000`.
- Kung tumatakbo sa Codespaces, dapat itong magmukhang "[name]app.github.dev".
## Gawain
## Assignment
Gumawa ng sarili mong folder na *project* na may nilalaman tulad nito:
Gumawa ng sarili mong folder *project* na may nilalaman tulad nito:
```text
project/
@ -363,9 +357,9 @@ project/
Kopyahin ang nilalaman mula sa mga itinuro sa itaas ngunit malaya kang i-customize ayon sa gusto mo.
## Solusyon
## Solution
[Solusyon](./solution/README.md)
[Solution](./solution/README.md)
## Bonus
@ -373,7 +367,7 @@ Subukang baguhin ang personalidad ng AI assistant.
### Para sa Python
Kapag tinawag mo ang `call_llm` sa *api.py*, maaari mong baguhin ang pangalawang argumento ayon sa gusto mo, halimbawa:
Kapag tinawag mo ang `call_llm` sa *api.py*, maaari mong baguhin ang pangalawang argumento sa gusto mo, halimbawa:
```python
call_llm(message, "You are Captain Picard")
@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard")
### Frontend
Baguhin din ang CSS at teksto ayon sa gusto mo, kaya't gumawa ng mga pagbabago sa *index.html* at *styles.css*.
Baguhin din ang CSS at teksto ayon sa gusto mo, kaya gumawa ng mga pagbabago sa *index.html* at *styles.css*.
## Buod
Magaling, natutunan mo mula sa simula kung paano gumawa ng personal assistant gamit ang AI. Ginawa natin ito gamit ang GitHub Models, isang backend sa Python, at isang frontend sa HTML, CSS, at JavaScript.
Mahusay, natutunan mo mula sa simula kung paano gumawa ng personal assistant gamit ang AI. Ginawa natin ito gamit ang GitHub Models, isang backend sa Python, at isang frontend sa HTML, CSS, at JavaScript.
## I-set up gamit ang Codespaces
## Set up gamit ang Codespaces
- Pumunta sa: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Gumawa mula sa isang template (siguraduhing naka-login ka sa GitHub) sa kanang itaas na bahagi:
- Gumawa mula sa template (siguraduhing naka-login ka sa GitHub) sa kanang itaas na bahagi:
@ -398,9 +392,9 @@ Magaling, natutunan mo mula sa simula kung paano gumawa ng personal assistant ga
Dapat nitong simulanang isang environment na maaari mo nang gamitin.
Dapat itong magsimula ng environment na maaari mo nang gamitin.
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
Biraz bağlam vermek gerekirse, üretken yapay zeka kullanarak Sohbet Asistanları oluşturmak, yapay zeka hakkında öğrenmeye başlamak için harika bir yoldur. Bu derste, üretken yapay zekayı bir web uygulamasına entegre etmeyi öğreneceksiniz. Hadi başlayalım.
Biraz bağlam: Üretken yapay zeka kullanarak Sohbet asistanları oluşturmak, yapay zeka hakkında öğrenmeye başlamak için harika bir yoldur. Bu derste, üretken yapay zekayı bir web uygulamasına entegre etmeyi öğreneceksiniz. Haydi başlayalım.
## Üretken Yapay Zekaya Bağlanma
Backend için GitHub Modellerini kullanıyoruz. Bu, yapay zekayı ücretsiz olarak kullanmanıza olanak tanıyan harika bir hizmettir. Playground'a gidin ve seçtiğiniz backend diline karşılık gelen kodu alın. İşte [GitHub Modelleri Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) adresinde nasıl göründüğü:
Backend için GitHub Modelleri kullanıyoruz. Bu, yapay zekayı ücretsiz olarak kullanmanıza olanak tanıyan harika bir hizmettir. Playground'a gidin ve seçtiğiniz backend diline karşılık gelen kodu alın. İşte [GitHub Modelleri Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) görünümü:
<div>
<imgsrc="./assets/playground.png"alt="GitHub Modelleri AI Playground"with="600">
</div>
Dediğimiz gibi, "Code" sekmesini ve seçtiğiniz çalışma zamanını seçin.
Bu `call_llm` fonksiyonu ile artık bir prompt ve bir sistem prompt alabilir ve fonksiyon sonucu döndürebilir.
Bu `call_llm` fonksiyonu ile artık bir prompt ve bir sistem prompt alabiliriz ve fonksiyon sonuç döndürür.
### Yapay Zeka Asistanını Özelleştirme
Yapay zeka asistanını özelleştirmek isterseniz, sistem promptunu şu şekilde doldurarak nasıl davranmasını istediğinizi belirtebilirsiniz:
Yapay zeka asistanını özelleştirmek istiyorsanız, sistem prompt'u şu şekilde doldurarak nasıl davranmasını istediğinizi belirtebilirsiniz:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Bir Web API Üzerinden Sunma
## Web API Üzerinden Sunma
Harika, yapay zeka kısmını tamamladık, şimdi bunu bir Web API'ye nasıl entegre edebileceğimize bakalım. Web API için Flask kullanmayı seçiyoruz, ancak herhangi bir web çerçevesi uygun olacaktır. İşte bunun için kod:
Harika, yapay zeka kısmını tamamladık, şimdi bunu bir Web API'ye nasıl entegre edebileceğimize bakalım. Web API için Flask kullanmayı seçiyoruz, ancak herhangi bir web framework uygun olacaktır. Koduna bakalım:
### Python Kullanımı
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlıyoruz. İkincisi, frontendimizin soruları backend'e iletmesi için kullanılır.
Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki varsayılan route tanımlıyoruz. İkincisi, frontendimizin soruları backend'e iletmesi için tasarlanmıştır.
*llm.py* dosyasını entegre etmek için şunları yapmamız gerekiyor:
*llm.py* dosyasını entegre etmek için yapmamız gerekenler:
- `call_llm` fonksiyonunu içe aktarın:
@ -152,7 +146,7 @@ Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlı
from flask import Flask, request
```
- "/chat" rotasında çağırın:
- "/chat" route'undan çağırın:
```python
@app.route("/hello", methods=["POST"])
@ -167,7 +161,7 @@ Burada bir Flask API oluşturuyoruz ve "/" ve "/chat" adında iki rota tanımlı
})
```
Burada gelen isteği ayrıştırarak JSON gövdesindeki`message` özelliğini alıyoruz. Daha sonra LLM'yi şu şekilde çağırıyoruz:
Burada gelen isteği ayrıştırarak JSON gövdesinden`message` özelliğini alıyoruz. Daha sonra LLM'i şu şekilde çağırıyoruz:
```python
response = call_llm(message, "You are a helpful assistant")
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Şu anda "*" yani tüm kökenlere izin verecek şekilde ayarlanmış durumda ve bu biraz güvensizdir. Üretime geçtiğimizde bunu kısıtlamalıyız.
Şu anda "*" yani tüm kaynaklara izin verecek şekilde ayarlandı ve bu biraz güvensiz. Üretime geçtiğimizde bunu kısıtlamalıyız.
## Projenizi Çalıştırma
@ -203,7 +197,7 @@ Projenizi çalıştırmak için önce backend'i, ardından frontend'i başlatman
### Python Kullanımı
Tamam, elimizde *llm.py* ve *api.py* var, bunu bir backend ile nasıl çalıştırabiliriz? İki şey yapmamız gerekiyor:
Tamam, elimizde *llm.py* ve *api.py* var, backend ile bunu nasıl çalıştırabiliriz? İki şey yapmamız gerekiyor:
- Bağımlılıkları yükleyin:
@ -221,7 +215,7 @@ Tamam, elimizde *llm.py* ve *api.py* var, bunu bir backend ile nasıl çalışt
python api.py
```
Codespaces kullanıyorsanız, editörün alt kısmındaki Ports bölümüne gidin, sağ tıklayın ve "Port Visibility" seçeneğini seçerek "Public" yapın.
Codespaces kullanıyorsanız, editörün alt kısmındaki Ports bölümüne gidin, üzerine sağ tıklayın ve "Port Visibility" seçeneğini seçerek "Public" yapın.
### Frontend Üzerinde Çalışma
@ -253,7 +247,7 @@ styles.css
</html>
```
Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken mutlak minimumdur. Bir textarea, bir input ve bir gönderme butonundan oluşur. Şimdi *app.js* içindeki JavaScript'e bakalım.
Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken minimum kodu içerir. Bir textarea, mesajların görüntüleneceği bir alan, bir input alanı ve mesajınızı backend'e göndermek için bir buton içerir. Şimdi *app.js* dosyasındaki JavaScript'e bakalım.
**app.js**
@ -310,14 +304,14 @@ Yukarıdaki kod, bir sohbet penceresini desteklemek için gereken mutlak minimum
})();
```
Kodu bölüm bölüm inceleyelim:
Kodun bölümlerini inceleyelim:
- 1) Burada daha sonra kodda başvuracağımız tüm öğelere referans alıyoruz.
- 1) Burada daha sonra kodda referans alacağımız tüm öğelere bir referans alıyoruz.
- 2) Bu bölümde, yerleşik `fetch` metodunu kullanarak backend'e çağrı yapan bir fonksiyon oluşturuyoruz.
- 3) `appendMessage`, yanıtları ve kullanıcı olarak yazdığınız mesajları eklemeye yardımcı olur.
- 4) Burada submit olayını dinliyoruz ve input alanını okuyarak, kullanıcının mesajını textarea'ya yerleştiriyoruz, API'yi çağırıyoruz ve yanıtı textarea'da gösteriyoruz.
- 4) Burada submit olayını dinliyoruz ve input alanını okuyarak, kullanıcının mesajını textarea'ya yerleştiriyoruz, API'yi çağırıyoruz ve yanıtı textarea'da görüntülüyoruz.
Şimdi stil kısmına bakalım, burada tamamen özgürsünüz, ancak işte bazı öneriler:
Şimdi stil kısmına bakalım, burada istediğiniz gibi tasarım yapabilirsiniz, ancak işte bazı öneriler:
**styles.css**
@ -338,18 +332,18 @@ Kodu bölüm bölüm inceleyelim:
}
```
Bu üç sınıf ile mesajları, asistan veya kullanıcıdan gelmesine bağlı olarak farklı şekilde stillendirebilirsiniz. İlham almak isterseniz, `solution/frontend/styles.css` klasörüne göz atabilirsiniz.
Bu üç sınıf ile mesajları, bir asistandan mı yoksa kullanıcıdan mı geldiğine bağlı olarak farklı şekilde stilize edebilirsiniz. İlham almak isterseniz, `solution/frontend/styles.css` klasörüne göz atabilirsiniz.
### Base Url'i Değiştirme
### Base Url'yi Değiştirme
Burada ayarlamadığımız bir şey vardı, o da `BASE_URL`. Bu, backend başlatılana kadar bilinmez. Ayarlamak için:
Burada ayarlamadığımız bir şey vardı, o da `BASE_URL`. Backend başlatılana kadar bu bilinmez. Ayarlamak için:
- API'yi yerel olarak çalıştırıyorsanız, `http://localhost:5000` gibi bir şey olmalıdır.
- Codespaces'te çalıştırıyorsanız, "[name]app.github.dev" gibi bir şey olmalıdır.
- Codespaces'de çalıştırıyorsanız, "[name]app.github.dev" gibi bir şey olmalıdır.
## Ödev
*project* adında bir klasör oluşturun ve şu şekilde içerik ekleyin:
*project* adında kendi klasörünüzü oluşturun ve içeriği şu şekilde düzenleyin:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Yukarıda talimat verilen içeriği kopyalayın, ancak istediğiniz gibi özelleştirmekten çekinmeyin.
Yukarıda anlatılanlardan içeriği kopyalayın, ancak istediğiniz gibi özelleştirmekten çekinmeyin.
## Çözüm
@ -381,7 +375,7 @@ call_llm(message, "You are Captain Picard")
### Frontend
Ayrıca CSS ve metni de istediğiniz gibi değiştirin, bu nedenle*index.html* ve *styles.css* dosyalarında değişiklik yapın.
CSS ve metni de istediğiniz gibi değiştirin, yani*index.html* ve *styles.css* dosyalarında değişiklik yapın.
## Özet
@ -390,17 +384,17 @@ Harika, sıfırdan bir yapay zeka kullanarak kişisel bir asistan oluşturmayı
## Codespaces ile Kurulum
- Şuraya gidin: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Bir şablondan oluşturun (GitHub'da oturum açtığınızdan emin olun) sağ üst köşede:
- Şablondan oluşturun (GitHub'da oturum açtığınızdan emin olun) sağ üst köşede:
Bu, artık çalışabileceğiniz bir ortam başlatmalıdır.
Bu, artık üzerinde çalışabileceğiniz bir ortam başlatmalıdır.
---
**Feragatname**:
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğu sağlamak için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğu sağlamak için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
Трохи контексту: створення чат-асистентів за допомогою генеративного штучного інтелекту — чудовий спосіб почати вивчати AI. У цьому уроці ви навчитеся інтегрувати генеративний AI у веб-додаток. Почнемо.
## Підключення до генеративного AI
Для бекенду ми використовуємо моделі GitHub. Це чудовий сервіс, який дозволяє використовувати AI безкоштовно. Перейдіть до його "пісочниці" та отримайте код, який відповідає вашій вибраній мові бекенду. Ось як це виглядає: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Для бекенду ми використовуємо GitHub Models. Це чудовий сервіс, який дозволяє використовувати AI безкоштовно. Перейдіть до його playground і скопіюйте код, який відповідає вашій обраній мові бекенду. Ось як це виглядає: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
З цією функцією `call_llm` ми тепер можемо взяти запит і системний запит, а функція поверне результат.
З цією функцією `call_llm` ми можемо взяти підказку та системну підказку, і функція поверне результат.
### Налаштування AI-асистента
Якщо ви хочете налаштувати AI-асистента, ви можете визначити, як він має поводитися, заповнивши системний запит ось так:
Якщо ви хочете налаштувати AI-асистента, ви можете вказати, як він має поводитися, заповнивши системну підказку ось так:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Зараз це налаштовано на дозвіл "*" — тобто всі джерела, і це трохи небезпечно. Ми повинні обмежити це, коли перейдемо до продакшну.
Зараз це налаштовано для дозволу "*" — тобто всіх джерел, що трохи небезпечно. Ми повинні обмежити це, коли перейдемо до продакшну.
## Запуск проєкту
@ -203,7 +197,7 @@ CORS(app) # * example.com
### Використання Python
Отже, у нас є *llm.py*і*api.py*. Як ми можемо змусити це працювати з бекендом? Є дві речі, які потрібно зробити:
Отже, у нас є *llm.py*і*api.py*. Як це запустити з бекендом? Є дві речі, які потрібно зробити:
- Встановити залежності:
@ -215,7 +209,7 @@ CORS(app) # * example.com
pip install openai flask flask-cors openai
```
- Запустити API
- Запустити API:
```sh
python api.py
@ -225,7 +219,7 @@ CORS(app) # * example.com
### Робота над фронтендом
Тепер, коли у нас є API, давайте створимо фронтенд для цього. Мінімальний фронтенд, який ми будемо покращувати поступово. У папці *frontend* створіть наступне:
Тепер, коли наш API працює, давайте створимо фронтенд. Мінімальний фронтенд, який ми будемо покращувати поступово. У папці *frontend* створіть наступне:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
Це мінімум, який вам потрібен для підтримки вікна чату, оскільки він складається з текстової області, де будуть відображатися повідомлення, поля введення для введення повідомлення та кнопки для надсилання вашого повідомлення на бекенд. Давайте подивимося на JavaScript у файлі*app.js*.
Це мінімум, який потрібен для підтримки вікна чату, оскільки він складається з текстової області, де будуть відображатися повідомлення, поля вводу для введення повідомлення та кнопки для надсилання повідомлення на бекенд. Тепер розглянемо JavaScript у*app.js*.
**app.js**
@ -312,12 +306,12 @@ styles.css
Розглянемо код по секціях:
- 1) Тут ми отримуємо посилання на всі елементи, до яких будемо звертатися пізніше в коді.
- 1) Тут ми отримуємо посилання на всі елементи, які будемо використовувати в коді.
- 2) У цьому розділі ми створюємо функцію, яка використовує вбудований метод `fetch` для виклику нашого бекенду.
- 3) `appendMessage` допомагає додавати відповіді, а також те, що ви вводите як користувач.
- 4) Тут ми слухаємо подію submit, читаємо поле введення, додаємо повідомлення користувача в текстову область, викликаємо API, відображаємо відповідь у текстовій області.
- 4) Тут ми слухаємо подію submit, читаємо поле вводу, додаємо повідомлення користувача в текстову область, викликаємо APIі відображаємо відповідь у текстовій області.
Давайте подивимося на стилі, тут ви можете проявити фантазіюі зробити вигляд таким, як вам подобається, але ось кілька пропозицій:
Тепер розглянемо стилі. Тут можна проявити креативністьі зробити вигляд таким, як вам подобається, але ось кілька пропозицій:
**styles.css**
@ -338,13 +332,13 @@ styles.css
}
```
З цими трьома класами ви будете стилізувати повідомлення залежно від того, звідки вони надходять — від асистента чи від вас як користувача. Якщо хочете надихнутися, перегляньте папку `solution/frontend/styles.css`.
З цими трьома класами ви зможете стилізувати повідомлення залежно від того, звідки вони надходять — від асистента чи від вас як користувача. Якщо хочете надихнутися, перегляньте папку `solution/frontend/styles.css`.
### Зміна базового URL
Є одна річ, яку ми тут не встановили — це `BASE_URL`. Його не буде відомо, поки ваш бекенд не запуститься. Щоб встановити:
Є одна річ, яку ми тут не налаштували — це `BASE_URL`. Його не буде відомо, поки ваш бекенд не запуститься. Щоб налаштувати:
- Якщо ви запускаєте API локально, він має бути встановлений як `http://localhost:5000`.
- Якщо ви запускаєте API локально, він має бути налаштований на щось на зразок `http://localhost:5000`.
- Якщо запускаєте в Codespaces, він має виглядати приблизно як "[name]app.github.dev".
## Завдання
@ -381,11 +375,11 @@ call_llm(message, "You are Captain Picard")
### Фронтенд
Також змініть CSS і текст на свій смак, внесіть зміни у*index.html*і*styles.css*.
Також змініть CSS і текст на свій смак, внесіть зміни в*index.html*і*styles.css*.
## Підсумок
Чудово, ви навчилися з нуля створювати персонального асистента за допомогою AI. Ми зробили це, використовуючи моделі GitHub, бекенд на Python і фронтенд на HTML, CSS та JavaScript.
Чудово, ви навчилися з нуля створювати персонального асистента за допомогою AI. Ми зробили це, використовуючи GitHub Models, бекенд на Python і фронтенд на HTML, CSS і JavaScript.
## Налаштування з Codespaces
@ -403,4 +397,4 @@ call_llm(message, "You are Captain Picard")
---
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
کچھ پس منظر: جنریٹیو AI کا استعمال کرتے ہوئے چیٹ اسسٹنٹس بنانا 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>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"with="600">
</div>
جیسا کہ ہم نے کہا، "Code" ٹیب اور اپنی منتخب کردہ رن ٹائم کو منتخب کریں۔
<div>
<imgsrc="./assets/playground-choice.png"alt="پلے گراؤنڈ کا انتخاب"with="600">
اس فنکشن `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 کا استعمال
### پائتھون کا استعمال
```python
# api.py
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
یہاں، ہم ایک Flask API بناتے ہیں اور ایک ڈیفالٹ روٹ "/" اور "/chat" کی وضاحت کرتے ہیں۔ دوسرا روٹ ہمارے فرنٹ اینڈ کے ذریعے سوالات بھیجنے کے لیے استعمال ہوتا ہے۔
یہاں، ہم ایک Flask API بناتے ہیں اور ایک ڈیفالٹ روٹ "/" اور "/chat" کی وضاحت کرتے ہیں۔ دوسرا روٹ ہمارے فرنٹ اینڈ کے ذریعے سوالات پاس کرنے کے لیے استعمال کیا جاتا ہے۔
*llm.py* کو ضم کرنے کے لیے ہمیں یہ کرنا ہوگا:
*llm.py* کو شامل کرنے کے لیے ہمیں یہ کرنا ہوگا:
- `call_llm` فنکشن کو امپورٹ کریں:
@ -152,7 +146,7 @@ if __name__ == "__main__":
from flask import Flask, request
```
- "/chat" روٹ سے اسے کال کریں:
- اسے "/chat" روٹ سے کال کریں:
```python
@app.route("/hello", methods=["POST"])
@ -182,11 +176,11 @@ if __name__ == "__main__":
## Cors کو ترتیب دیں
یہ بات قابل ذکر ہے کہ ہم نے CORS (cross-origin resource sharing) جیسی چیز ترتیب دی ہے۔ اس کا مطلب یہ ہے کہ چونکہ ہمارا بیک اینڈ اور فرنٹ اینڈ مختلف پورٹس پر چلیں گے، ہمیں فرنٹ اینڈ کو بیک اینڈ سے کال کرنے کی اجازت دینی ہوگی۔
ہمیں یہ بتانا چاہیے کہ ہم نے کچھ ایسا سیٹ اپ کیا ہے جیسے CORS، کراس اوریجن ریسورس شیئرنگ۔ اس کا مطلب یہ ہے کہ چونکہ ہمارا بیک اینڈ اور فرنٹ اینڈ مختلف پورٹس پر چلیں گے، ہمیں فرنٹ اینڈ کو بیک اینڈ کو کال کرنے کی اجازت دینی ہوگی۔
### Python کا استعمال
### پائتھون کا استعمال
*api.py* میں ایک کوڈ کا حصہ ہے جو اسے ترتیب دیتا ہے:
*api.py* میں ایک کوڈ کا حصہ ہے جو اسے سیٹ اپ کرتا ہے:
```python
from flask_cors import CORS
@ -195,15 +189,15 @@ app = Flask(__name__)
CORS(app) # * example.com
```
فی الحال یہ "*" پر سیٹ ہے، جو تمام اوریجنز کو اجازت دیتا ہے، اور یہ تھوڑا غیر محفوظ ہے۔ ہمیں پروڈکشن میں جانے سے پہلے اسے محدود کرنا چاہیے۔
فی الحال یہ "*" پر سیٹ اپ کیا گیا ہے، جو تمام اوریجنز کو اجازت دیتا ہے اور یہ تھوڑا غیر محفوظ ہے، ہمیں پروڈکشن میں جانے کے بعد اسے محدود کرنا چاہیے۔
## اپنا پروجیکٹ چلائیں
اپنا پروجیکٹ چلانے کے لیے، آپ کو پہلے اپنا بیک اینڈ اور پھر اپنا فرنٹ اینڈ شروع کرنا ہوگا۔
### Python کا استعمال
### پائتھون کا استعمال
ٹھیک ہے، تو ہمارے پاس *llm.py* اور *api.py* ہے، ہم بیک اینڈ کے ساتھ اسے کیسے کام میں لائیں؟ دو چیزیں کرنی ہوں گی:
ٹھیک ہے، ہمارے پاس *llm.py* اور *api.py* ہے، ہم اسے بیک اینڈ کے ساتھ کیسے کام کروا سکتے ہیں؟ ٹھیک ہے، ہمیں دو چیزیں کرنے کی ضرورت ہے:
- ڈپینڈنسیز انسٹال کریں:
@ -225,7 +219,7 @@ CORS(app) # * example.com
### فرنٹ اینڈ پر کام کریں
اب جب کہ ہمارے پاس ایک API چل رہا ہے، آئیے اس کے لیے ایک فرنٹ اینڈ بناتے ہیں۔ ایک بنیادی فرنٹ اینڈ جو ہم مرحلہ وار بہتر کریں گے۔ *frontend* فولڈر میں، درج ذیل بنائیں:
اب جب کہ ہمارے پاس API چل رہا ہے، آئیے اس کے لیے ایک فرنٹ اینڈ بناتے ہیں۔ ایک بالکل بنیادی فرنٹ اینڈ جسے ہم مرحلہ وار بہتر کریں گے۔ *frontend* فولڈر میں، درج ذیل بنائیں:
```text
backend/
@ -253,7 +247,7 @@ styles.css
</html>
```
یہ اوپر دی گئی چیز ایک چیٹ ونڈو کو سپورٹ کرنے کے لیے بالکل کم سے کم ہے، کیونکہ اس میں ایک ٹیکسٹ ایریا شامل ہے جہاں پیغامات دکھائے جائیں گے، ایک ان پٹ جہاں پیغام ٹائپ کیا جائے گا، اور ایک بٹن جو آپ کے پیغام کو بیک اینڈ پر بھیجے گا۔ آئیے اگلے *app.js* میں جاوا اسکرپٹ دیکھتے ہیں:
یہ اوپر چیٹ ونڈو کو سپورٹ کرنے کے لیے بالکل کم از کم ہے، کیونکہ اس میں ایک ٹیکسٹ ایریا شامل ہے جہاں پیغامات رینڈر کیے جائیں گے، ایک ان پٹ جہاں پیغام ٹائپ کیا جائے گا اور ایک بٹن جو آپ کے پیغام کو بیک اینڈ پر بھیجے گا۔ آئیے اگلے جاوا اسکرپٹ کو *app.js* میں دیکھتے ہیں۔
**app.js**
@ -312,10 +306,10 @@ styles.css
آئیے کوڈ کو سیکشن کے لحاظ سے دیکھتے ہیں:
- 1) یہاں ہم ان تمام عناصر کا حوالہ حاصل کرتے ہیں جن کا ہم کوڈ میں بعد میں حوالہ دیں گے۔
- 1) یہاں ہم اپنے تمام عناصر کا حوالہ حاصل کرتے ہیں جن کا ہم کوڈ میں بعد میں حوالہ دیں گے۔
- 2) اس سیکشن میں، ہم ایک فنکشن بناتے ہیں جو بلٹ ان `fetch` میتھڈ کا استعمال کرتا ہے جو ہمارے بیک اینڈ کو کال کرتا ہے۔
- 3) `appendMessage` جوابات اور وہ چیزیں جو آپ بطور صارف ٹائپ کرتے ہیں، شامل کرنے میں مدد کرتا ہے۔
- 4) یہاں ہم submit ایونٹ کو سنتے ہیں اور ان پٹ فیلڈ کو پڑھتے ہیں، صارف کا پیغام ٹیکسٹ ایریا میں رکھتے ہیں، API کو کال کرتے ہیں، اور اس کے جواب کو ٹیکسٹ ایریا میں رینڈر کرتے ہیں۔
- 3) `appendMessage`مدد کرتا ہے جوابات شامل کرنے میں اور وہ جو آپ بطور صارف ٹائپ کرتے ہیں۔
- 4) یہاں ہم سبمٹ ایونٹ کو سنتے ہیں اور ان پٹ فیلڈ کو پڑھتے ہیں، صارف کا پیغام ٹیکسٹ ایریا میں رکھتے ہیں، API کو کال کرتے ہیں، اور جواب کو ٹیکسٹ ایریا میں رینڈر کرتے ہیں۔
آئیے اگلے اسٹائلنگ کو دیکھتے ہیں، یہاں آپ واقعی تخلیقی ہو سکتے ہیں اور اسے اپنی مرضی کے مطابق بنا سکتے ہیں، لیکن یہاں کچھ تجاویز ہیں:
@ -338,18 +332,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/
@ -371,9 +365,9 @@ project/
AI اسسٹنٹ کی شخصیت کو تبدیل کرنے کی کوشش کریں۔
### Python کے لیے
### پائتھون کے لیے
جب آپ *api.py* میں `call_llm` کو کال کرتے ہیں، تو آپ دوسرے آرگومنٹ کو اپنی مرضی کے مطابق تبدیل کر سکتے ہیں، مثال کے طور پر:
جب آپ *api.py* میں `call_llm` کو کال کرتے ہیں تو آپ دوسرے آرگیومنٹ کو اپنی مرضی کے مطابق تبدیل کر سکتے ہیں، مثال کے طور پر:
```python
call_llm(message, "You are Captain Picard")
@ -385,22 +379,22 @@ CSS اور متن کو بھی اپنی پسند کے مطابق تبدیل کر
## خلاصہ
زبردست، آپ نے شروع سے سیکھا کہ AI کا استعمال کرتے ہوئے ایک ذاتی اسسٹنٹ کیسے بنایا جائے۔ ہم نے یہ GitHub Models، Python میں بیک اینڈ، اور HTML، CSS، اور JavaScript میں فرنٹ اینڈ کا استعمال کرتے ہوئے کیا۔
زبردست، آپ نے شروع سے سیکھا کہ AI کا استعمال کرتے ہوئے ایک ذاتی اسسٹنٹ کیسے بنایا جائے۔ ہم نے یہ GitHub Models، پائتھون میں بیک اینڈ اور HTML، CSS اور جاوا اسکرپٹ میں فرنٹ اینڈ کا استعمال کرتے ہوئے کیا۔
## 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 میں لاگ ان ہیں) اوپر دائیں کونے میں:
- ایک بار اپنے ریپو میں، ایک Codespace بنائیں:
- ایک بار جب آپ اپنے ریپو میں ہوں، ایک Codespace بنائیں:
یہ ایک ایسا ماحول شروع کرے گا جس پر آپ اب کام کر سکتے ہیں۔
یہ ایک ماحول شروع کرنا چاہیے جس کے ساتھ آپ اب کام کر سکتے ہیں۔
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہیں۔ اصل دستاویز، جو اس کی مقامی زبان میں ہے، کو مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
@ -13,29 +13,23 @@ Dự án chat này hướng dẫn cách xây dựng một Trợ lý Chat sử d
Dưới đây là hình ảnh của dự án hoàn chỉnh:
<div>
<imgsrc="./assets/screenshot.png"alt="Ứng dụng Chat"width="600">
</div>
Một chút bối cảnh, việc xây dựng các trợ lý Chat sử dụng AI tạo sinh là một cách tuyệt vời để bắt đầu học về AI. Trong bài học này, bạn sẽ học cách tích hợp AI tạo sinh vào một ứng dụng web. Hãy bắt đầu nào.
## Kết nối với AI tạo sinh
Ở phần backend, chúng ta sử dụng GitHub Models. Đây là một dịch vụ tuyệt vời cho phép bạn sử dụng AI miễn phí. Hãy truy cập playground của nó và lấy mã tương ứng với ngôn ngữ backend mà bạn chọn. Đây là giao diện tại [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Về phía backend, chúng ta sử dụng GitHub Models. Đây là một dịch vụ tuyệt vời cho phép bạn sử dụng AI miễn phí. Truy cập playground của nó và lấy đoạn mã phù hợp với ngôn ngữ backend mà bạn chọn. Đây là giao diện tại [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
<div>
<imgsrc="./assets/playground.png"alt="GitHub Models AI Playground"width="600">
</div>
Như đã nói, hãy chọn tab "Code" và runtime mà bạn muốn.
Như đã nói, chọn tab "Code" và runtime mà bạn muốn.
Với hàm `call_llm`, chúng ta có thể truyền vào một prompt và một system prompt, và hàm này sẽ trả về kết quả.
Với hàm `call_llm`, giờ đây chúng ta có thể truyền vào một prompt và một system prompt, và hàm này sẽ trả về kết quả.
### Tùy chỉnh Trợ lý AI
Nếu bạn muốn tùy chỉnh Trợ lý AI, bạn có thể chỉ định cách bạn muốn nó hoạt động bằng cách điền vào system prompt như sau:
Nếu bạn muốn tùy chỉnh trợ lý AI, bạn có thể chỉ định cách bạn muốn nó hoạt động bằng cách điền vào system prompt như sau:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
@ -108,7 +102,7 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
## Triển khai qua Web API
Tuyệt vời, chúng ta đã hoàn thành phần AI, giờ hãy xem cách tích hợp nó vào một Web API. Đối với Web API, chúng ta chọn sử dụng Flask, nhưng bất kỳ framework web nào cũng đều phù hợp. Dưới đây là đoạn mã:
Tuyệt vời, chúng ta đã hoàn thành phần AI, giờ hãy xem cách tích hợp nó vào một Web API. Đối với Web API, chúng ta chọn sử dụng Flask, nhưng bất kỳ framework web nào cũng có thể sử dụng được. Dưới đây là đoạn mã:
### Sử dụng Python
@ -141,9 +135,9 @@ if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
Ở đây, chúng ta tạo một API Flask và định nghĩa hai route: "/" và "/chat". Route thứ hai được sử dụng bởi frontend để gửi câu hỏi đến backend.
Ở đây, chúng ta tạo một API Flask và định nghĩa hai route mặc định là "/" và "/chat". Route thứ hai được sử dụng bởi frontend để gửi câu hỏi đến backend.
Để tích hợp *llm.py*, đây là những gì cần làm:
Để tích hợp *llm.py*, chúng ta cần làm như sau:
- Import hàm `call_llm`:
@ -167,7 +161,7 @@ if __name__ == "__main__":
})
```
Ở đây, chúng ta phân tích yêu cầu gửi đến để lấy thuộc tính `message` từ JSON body. Sau đó, chúng ta gọi LLM với lệnh sau:
Ở đây, chúng ta phân tích yêu cầu đến để lấy thuộc tính `message` từ JSON body. Sau đó, chúng ta gọi LLM bằng lệnh sau:
```python
response = call_llm(message, "You are a helpful assistant")
@ -178,11 +172,11 @@ if __name__ == "__main__":
})
```
Tuyệt vời, giờ chúng ta đã hoàn thành phần cần thiết.
Tuyệt vời, giờ chúng ta đã hoàn thành những gì cần thiết.
## Cấu hình Cors
Chúng ta cần thiết lập CORS, chia sẻ tài nguyên giữa các nguồn. Điều này có nghĩa là vì backend và frontend sẽ chạy trên các cổng khác nhau, chúng ta cần cho phép frontend gọi vào backend.
Chúng ta cần thiết lập CORS (chia sẻ tài nguyên giữa các nguồn gốc). Điều này có nghĩa là vì backend và frontend sẽ chạy trên các cổng khác nhau, chúng ta cần cho phép frontend gọi vào backend.
### Sử dụng Python
@ -195,7 +189,7 @@ app = Flask(__name__)
CORS(app) # * example.com
```
Hiện tại, nó được thiết lập để cho phép "*" tức là tất cả các nguồn, điều này không an toàn lắm. Chúng ta nên giới hạn lại khi triển khai sản phẩm.
Hiện tại, nó được thiết lập để cho phép "*" tức là tất cả các nguồn gốc, điều này không an toàn lắm. Chúng ta nên giới hạn lại khi triển khai lên môi trường sản xuất.
## Chạy dự án của bạn
@ -203,7 +197,7 @@ Hiện tại, nó được thiết lập để cho phép "*" tức là tất c
### Sử dụng Python
Ok, chúng ta có *llm.py* và *api.py*, làm thế nào để chạy backend? Có hai bước cần làm:
Ok, chúng ta có *llm.py* và *api.py*, làm thế nào để chạy backend? Có hai bước cần thực hiện:
- Cài đặt các thư viện phụ thuộc:
@ -221,7 +215,7 @@ Ok, chúng ta có *llm.py* và *api.py*, làm thế nào để chạy backend? C
python api.py
```
Nếu bạn đang sử dụng Codespaces, hãy vào phần Ports ở dưới cùng của trình chỉnh sửa, nhấp chuột phải và chọn "Port Visibility", sau đó chọn "Public".
Nếu bạn đang sử dụng Codespaces, hãy vào mục Ports ở phần dưới của trình chỉnh sửa, nhấp chuột phải và chọn "Port Visibility", sau đó chọn "Public".
### Làm việc với frontend
@ -253,7 +247,7 @@ Bắt đầu với **index.html**:
</html>
```
Đoạn mã trên là tối thiểu cần thiết để hỗ trợ một cửa sổ chat, bao gồm một textarea để hiển thị tin nhắn, một input để nhập tin nhắn và một nút để gửi tin nhắn đến backend. Tiếp theo, hãy xem JavaScript trong *app.js*
Đoạn trên là tối thiểu cần thiết để hỗ trợ một cửa sổ chat, bao gồm một textarea để hiển thị tin nhắn, một input để nhập tin nhắn và một nút để gửi tin nhắn đến backend. Tiếp theo, hãy xem JavaScript trong *app.js*.
**app.js**
@ -312,12 +306,12 @@ Bắt đầu với **index.html**:
Hãy đi qua từng phần của đoạn mã:
- 1) Ở đây, chúng ta lấy tham chiếu đến tất cả các phần tử sẽ sử dụng sau này trong mã.
- 1) Ở đây, chúng ta lấy tham chiếu đến tất cả các phần tử sẽ được sử dụng sau này trong mã.
- 2) Trong phần này, chúng ta tạo một hàm sử dụng phương thức `fetch` tích hợp để gọi backend.
- 3) `appendMessage` giúp thêm phản hồi cũng như tin nhắn mà người dùng nhập.
- 4) Ở đây, chúng ta lắng nghe sự kiện submit, đọc trường input, đặt tin nhắn của người dùng vào textarea, gọi API, và hiển thị phản hồi trong textarea.
- 3) Hàm `appendMessage` giúp thêm các phản hồi cũng như tin nhắn mà người dùng nhập.
- 4) Ở đây, chúng ta lắng nghe sự kiện submit, đọc trường input, đặt tin nhắn của người dùng vào textarea, gọi API và hiển thị phản hồi trong textarea.
Tiếp theo, hãy xem phần styling, đây là nơi bạn có thể tùy chỉnh giao diện theo ý thích, nhưng dưới đây là một số gợi ý:
Tiếp theo, hãy xem phần styling. Đây là nơi bạn có thể sáng tạo để giao diện trông như ý muốn, nhưng dưới đây là một số gợi ý:
**styles.css**
@ -338,18 +332,18 @@ Tiếp theo, hãy xem phần styling, đây là nơi bạn có thể tùy chỉn
}
```
Với ba lớp này, bạn sẽ định dạng tin nhắn khác nhau tùy thuộc vào nguồn gốc của chúng, từ trợ lý hoặc từ người dùng. Nếu bạn muốn lấy cảm hứng, hãy xem thư mục `solution/frontend/styles.css`.
Với ba class này, bạn sẽ định dạng tin nhắn khác nhau tùy thuộc vào việc chúng đến từ trợ lý hay từ người dùng. Nếu muốn lấy cảm hứng, hãy xem thư mục `solution/frontend/styles.css`.
### Thay đổi Base Url
Có một điều chúng ta chưa thiết lập, đó là `BASE_URL`. Giá trị này chỉ được biết khi backend của bạn đã khởi động. Để thiết lập:
Có một điều chúng ta chưa thiết lập, đó là `BASE_URL`. Điều này chỉ được biết khi backend của bạn đã khởi động. Để thiết lập:
- Nếu bạn chạy API cục bộ, giá trị sẽ là `http://localhost:5000`.
- Nếu chạy trong Codespaces, giá trị sẽ giống như "[name]app.github.dev".
- Nếu bạn chạy API cục bộ, nó sẽ là `http://localhost:5000`.
- Nếu chạy trong Codespaces, nó sẽ có dạng "[name]app.github.dev".
## Bài tập
Tạo thư mục của riêng bạn *project* với nội dung như sau:
Tạo thư mục riêng của bạn *project* với nội dung như sau:
```text
project/
@ -361,7 +355,7 @@ project/
...
```
Sao chép nội dung từ hướng dẫn ở trên, nhưng bạn có thể tùy chỉnh theo ý thích.
Sao chép nội dung từ hướng dẫn trên, nhưng bạn có thể tùy chỉnh theo ý thích.
## Giải pháp
@ -369,11 +363,11 @@ Sao chép nội dung từ hướng dẫn ở trên, nhưng bạn có thể tùy
## Phần thưởng
Hãy thử thay đổi tính cách của Trợ lý AI.
Hãy thử thay đổi tính cách của trợ lý AI.
### Đối với Python
Khi bạn gọi `call_llm` trong *api.py*, bạn có thể thay đổi tham số thứ hai thành bất kỳ giá trị nào bạn muốn, ví dụ:
Khi bạn gọi `call_llm` trong *api.py*, bạn có thể thay đổi tham số thứ hai thành bất kỳ nội dung nào bạn muốn, ví dụ:
```python
call_llm(message, "You are Captain Picard")
@ -381,16 +375,16 @@ call_llm(message, "You are Captain Picard")
### Frontend
Cũng thay đổi CSS và văn bản theo ý thích, thực hiện các thay đổi trong *index.html* và *styles.css*.
Cũng thay đổi CSS và văn bản theo ý thích của bạn, thực hiện các thay đổi trong *index.html* và *styles.css*.
## Tóm tắt
Tuyệt vời, bạn đã học từ đầu cách tạo một trợ lý cá nhân sử dụng AI. Chúng ta đã thực hiện điều này bằng cách sử dụng GitHub Models, backend bằng Python và frontend bằng HTML, CSS và JavaScript.
Tuyệt vời, bạn đã học từ đầu cách tạo một trợ lý cá nhân sử dụng AI. Chúng ta đã thực hiện điều này bằng cách sử dụng GitHub Models, một backend bằng Python và một frontend bằng HTML, CSS và JavaScript.
## Thiết lập với Codespaces
- Truy cập: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tạo từ template (đảm bảo bạn đã đăng nhập vào GitHub) ở góc trên bên phải:
- Điều hướng đến: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tạo từ template (đảm bảo bạn đã đăng nhập GitHub) ở góc trên bên phải:
softchris
4 days ago
committed by
GitHub