# โปรเจคแชท โปรเจคแชทนี้แสดงวิธีการสร้างผู้ช่วยแชทโดยใช้ GitHub Models นี่คือลักษณะของโปรเจคที่เสร็จสมบูรณ์:  ข้อมูลเบื้องต้น การสร้างผู้ช่วยแชทโดยใช้ Generative AI เป็นวิธีที่ดีในการเริ่มเรียนรู้เกี่ยวกับ AI สิ่งที่คุณจะได้เรียนรู้คือการผสาน Generative AI เข้ากับเว็บแอปตลอดบทเรียนนี้ มาเริ่มกันเลย ## การเชื่อมต่อกับ Generative AI สำหรับ Backend เราใช้ GitHub Models ซึ่งเป็นบริการที่ยอดเยี่ยมที่ช่วยให้คุณใช้ AI ได้ฟรี ไปที่ Playground ของมันและดึงโค้ดที่ตรงกับภาษาของ Backend ที่คุณเลือก นี่คือลักษณะของมันที่ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)  ดังที่กล่าวไว้ เลือกแท็บ "Code" และ Runtime ที่คุณเลือก  ### การใช้ Python ในกรณีนี้เราเลือก Python ซึ่งหมายความว่าเราจะเลือกโค้ดนี้: ```python """Run this model in Python > pip install openai """ import os from openai import OpenAI # To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. # Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens client = OpenAI( base_url="https://models.github.ai/inference", api_key=os.environ["GITHUB_TOKEN"], ) response = client.chat.completions.create( messages=[ { "role": "system", "content": "", }, { "role": "user", "content": "What is the capital of France?", } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) print(response.choices[0].message.content) ``` มาทำความสะอาดโค้ดนี้เล็กน้อยเพื่อให้สามารถนำกลับมาใช้ใหม่ได้: ```python def call_llm(prompt: str, system_message: str): response = client.chat.completions.create( messages=[ { "role": "system", "content": system_message, }, { "role": "user", "content": prompt, } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) return response.choices[0].message.content ``` ด้วยฟังก์ชัน `call_llm` นี้ เราสามารถนำ Prompt และ System Prompt มาใช้ และฟังก์ชันจะคืนค่าผลลัพธ์ ### ปรับแต่งผู้ช่วย AI หากคุณต้องการปรับแต่งผู้ช่วย 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 ได้อย่างไร สำหรับ Web API เราเลือกใช้ Flask แต่ Framework เว็บใด ๆ ก็สามารถใช้ได้ มาดูโค้ดกัน: ### การใช้ Python ```python # api.py from flask import Flask, request, jsonify from llm import call_llm from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com @app.route("/", methods=["GET"]) def index(): return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload" @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` ที่นี่ เราสร้าง Flask API และกำหนด Route เริ่มต้น "/" และ "/chat" โดย Route หลังนี้ถูกออกแบบมาให้ Frontend ของเราส่งคำถามเข้ามา เพื่อผสาน *llm.py* นี่คือสิ่งที่เราต้องทำ: - นำเข้า `call_llm` ฟังก์ชัน: ```python from llm import call_llm from flask import Flask, request ``` - เรียกใช้จาก Route "/chat": ```python @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) ``` ที่นี่เราวิเคราะห์คำขอที่เข้ามาเพื่อดึงคุณสมบัติ `message` จาก JSON body หลังจากนั้นเราเรียก LLM ด้วยการเรียกนี้: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` เยี่ยม ตอนนี้เราทำสิ่งที่จำเป็นเสร็จแล้ว ## ตั้งค่า Cors เราควรกล่าวถึงว่าเราได้ตั้งค่า Cors หรือ Cross-Origin Resource Sharing ซึ่งหมายความว่าเนื่องจาก Backend และ Frontend ของเราจะทำงานบนพอร์ตที่ต่างกัน เราจำเป็นต้องอนุญาตให้ Frontend เรียก Backend ได้ ### การใช้ Python มีโค้ดใน *api.py* ที่ตั้งค่านี้: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` ตอนนี้มันถูกตั้งค่าให้อนุญาต "*" ซึ่งหมายถึงทุก Origin และนั่นไม่ปลอดภัยนัก เราควรจำกัดมันเมื่อเราไปสู่ Production ## รันโปรเจคของคุณ ในการรันโปรเจคของคุณ คุณต้องเริ่ม Backend ก่อนแล้วจึง Frontend ### การใช้ Python โอเค เรามี *llm.py* และ *api.py* แล้ว เราจะทำให้มันทำงานกับ Backend ได้อย่างไร? มีสองสิ่งที่เราต้องทำ: - ติดตั้ง Dependencies: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - เริ่ม API ```sh python api.py ``` หากคุณอยู่ใน Codespaces คุณต้องไปที่ Ports ในส่วนล่างของ Editor คลิกขวาและเลือก "Port Visibility" และเลือก "Public" ### ทำงานกับ Frontend ตอนนี้เรามี API ที่ทำงานแล้ว มาสร้าง Frontend สำหรับมันกัน Frontend ขั้นต่ำที่เราจะปรับปรุงทีละขั้นตอน ในโฟลเดอร์ *frontend* สร้างสิ่งต่อไปนี้: ```text backend/ frontend/ index.html app.js styles.css ``` เริ่มต้นด้วย **index.html**: ```html

Send