📘 תיעוד 213

קריאה לפונקציות של OpenAI GPT עם JavaScript ו-Cloudflare Workers

במדריך הזה תבנו פרויקט שמשתמש ביכולת קריאה לפונקציות של OpenAI ↗︎, הזמינה במודלים העדכניים של Chat Completions API של OpenAI.

יכולת הקריאה לפונקציות מאפשרת למודל הבינה המלאכותית להחליט בצורה חכמה מתי לקרוא לפונקציה לפי הקלט, ולהשיב בפורמט JSON שמתאים לחתימת הפונקציה. תשתמשו ביכולת הקריאה לפונקציות כדי לבקש מהמודל לקבוע כתובת אתר שמכילה מידע רלוונטי להודעה מהמשתמש, לאחזר את תוכן הטקסט של האתר, ולבסוף להחזיר תשובה סופית מהמודל שמבוססת על נתוני רשת בזמן אמת.

#מה תלמדו

• איך להשתמש ביכולת הקריאה לפונקציות של OpenAI.
• שילוב ה-API של OpenAI ב-Cloudflare Worker.
• אחזור ועיבוד של תוכן אתר באמצעות Cheerio.
• טיפול בתשובות API ובקריאות לפונקציות ב-JavaScript.
• שמירת מפתחות API כסודות עם Wrangler.

#לפני שמתחילים

כל המדריכים מניחים שכבר השלמתם את מדריך תחילת העבודה, שמגדיר לכם חשבון Cloudflare Workers, C3 ↗︎, ו-Wrangler.

#1. יצירת פרויקט Worker חדש

צרו פרויקט Worker בשורת הפקודה:

npm:

npm create cloudflare@latest -- openai-function-calling-workers

yarn:

yarn create cloudflare openai-function-calling-workers

pnpm:

pnpm create cloudflare@latest openai-function-calling-workers

להגדרה, בחרו באפשרויות הבאות:

• עבור What would you like to start with?, בחרו Hello World example.
• עבור Which template would you like to use?, בחרו Worker only.
• עבור Which language do you want to use?, בחרו JavaScript.
• עבור Do you want to use git for version control?, בחרו Yes.
• עבור Do you want to add an AGENTS.md file to help AI coding tools understand Cloudflare APIs?, בחרו Yes.
• עבור Do you want to deploy your application?, בחרו No (נבצע כמה שינויים לפני הפריסה).

עברו לפרויקט Worker החדש openai-function-calling-workers:

cd openai-function-calling-workers

בתוך התיקייה החדשה openai-function-calling-workers, מצאו את הקובץ src/index.js. תגדירו את הקובץ הזה ברוב המדריך.

תצטרכו גם חשבון OpenAI ומפתח API למדריך הזה. אם אין לכם, צרו חשבון OpenAI חדש ↗︎ ו-צרו מפתח API ↗︎ כדי להמשיך במדריך. ודאו שאתם שומרים את מפתח ה-API שלכם במקום בטוח כדי שתוכלו להשתמש בו בהמשך.

#2. שליחת בקשה ל-OpenAI

אחרי שיצרתם את פרויקט ה-Worker, שלחו את הבקשה הראשונה ל-OpenAI. תשתמשו בספריית node של OpenAI כדי לתקשר עם ה-API של OpenAI. בפרויקט הזה תשתמשו גם בספריית Cheerio כדי לטפל בעיבוד תוכן ה-HTML של אתרים.

npm:

npm i openai cheerio

yarn:

yarn add openai cheerio

pnpm:

pnpm add openai cheerio

bun:

bun add openai cheerio

עכשיו, הגדירו את המבנה של ה-Worker ב-index.js:

export default {
	async fetch(request, env, ctx) {
		// Initialize OpenAI API
		// Handle incoming requests
		return new Response("Hello World!");
	},
};

מעל export default, הוסיפו את הייבוא של openai ושל cheerio:

import OpenAI from "openai";
import * as cheerio from "cheerio";

בתוך פונקציית fetch, צרו מופע של לקוח OpenAI:

async fetch(request, env, ctx) {
  const openai = new OpenAI({
    apiKey: env.OPENAI_API_KEY,
  });

  // Handle incoming requests
  return new Response('Hello World!');
},

השתמשו ב-wrangler secret put כדי להגדיר את OPENAI_API_KEY. הערך של הסוד הזה הוא מפתח ה-API שיצרתם קודם בלוח הבקרה של OpenAI:

npx wrangler secret put <OPENAI_API_KEY>

לפיתוח מקומי, צרו קובץ חדש .dev.vars בפרויקט ה-Worker והוסיפו את השורה הזו. ודאו שאתם מחליפים את OPENAI_API_KEY במפתח ה-API שלכם מ-OpenAI:

OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY>"

עכשיו, שלחו בקשה ל-Chat Completions API ↗︎ של OpenAI:

export default {
	async fetch(request, env, ctx) {
		const openai = new OpenAI({
			apiKey: env.OPENAI_API_KEY,
		});

		const url = new URL(request.url);
		const message = url.searchParams.get("message");

		const messages = [
			{
				role: "user",
				content: message ? message : "What's in the news today?",
			},
		];

		const tools = [
			{
				type: "function",
				function: {
					name: "read_website_content",
					description: "Read the content on a given website",
					parameters: {
						type: "object",
						properties: {
							url: {
								type: "string",
								description: "The URL to the website to read",
							},
						},
						required: ["url"],
					},
				},
			},
		];

		const chatCompletion = await openai.chat.completions.create({
			model: "gpt-4o-mini",
			messages: messages,
			tools: tools,
			tool_choice: "auto",
		});

		const assistantMessage = chatCompletion.choices[0].message;
		console.log(assistantMessage);

		//Later you will continue handling the assistant's response here
		return new Response(assistantMessage.content);
	},
};

סקרו את הארגומנטים שאתם מעבירים ל-OpenAI:

• model: זה המודל שאתם רוצים ש-OpenAI ישתמש בו לבקשה. במקרה הזה אתם משתמשים ב-gpt-4o-mini.
• messages: זה מערך שמכיל את כל ההודעות שהן חלק מהשיחה. בהתחלה אתם מספקים הודעה מהמשתמש, ובהמשך מוסיפים את התשובה מהמודל. התוכן של הודעת המשתמש הוא פרמטר השאילתה message מכתובת הבקשה, או ברירת המחדל "What's in the news today?".
• tools: מערך שמכיל את הפעולות הזמינות למודל הבינה המלאכותית. בדוגמה הזו יש לכם כלי אחד בלבד, read_website_content, שקורא את התוכן באתר נתון.
  • name: השם של הפונקציה. במקרה הזה, זה read_website_content.
  • description: תיאור קצר שמודיע למודל את מטרת הפונקציה. זה אופציונלי, אבל עוזר למודל לדעת מתי לבחור בכלי.
  • parameters: אובייקט JSON Schema שמתאר את הפונקציה. במקרה הזה מבקשים תשובה שמכילה אובייקט עם המאפיין הנדרש url.
• tool_choice: הארגומנט הזה אופציונלי מבחינה טכנית, כי auto הוא ברירת המחדל. הארגומנט הזה מציין ש-OpenAI יכול להחזיר קריאה לפונקציה או תשובת הודעה רגילה.

#3. בניית הפונקציה read_website_content()

עכשיו תצטרכו להגדיר את הפונקציה read_website_content, שאליה יש הפניה במערך tools. הפונקציה read_website_content מאחזרת את התוכן של כתובת נתונה ומחלצת את הטקסט מתגיות <p> באמצעות הספרייה cheerio:

הוסיפו את הקוד הזה מעל הבלוק export default בקובץ index.js:

async function read_website_content(url) {
	console.log("reading website content");

	const response = await fetch(url);
	const body = await response.text();
	let cheerioBody = cheerio.load(body);
	const resp = {
		website_body: cheerioBody("p").text(),
		url: url,
	};
	return JSON.stringify(resp);
}

בפונקציה הזו אתם לוקחים את הכתובת שקיבלתם מ-OpenAI ומשתמשים ב-Fetch API ↗︎ של JavaScript כדי למשוך את תוכן האתר ולחלץ את טקסט הפסקאות. עכשיו צריך לקבוע מתי לקרוא לפונקציה הזו.

#4. עיבוד ההודעות של העוזר

בהמשך, צריך לעבד את התשובה מה-API של OpenAI כדי לבדוק אם היא כוללת קריאות לפונקציות. אם קיימת קריאה לפונקציה, יש להריץ את הפונקציה המתאימה ב-Worker. שימו לב שהעוזר עשוי לבקש כמה קריאות לפונקציות.

שנו את מתודת fetch בתוך הבלוק export default כך:

// ... your previous code ...

if (assistantMessage.tool_calls) {
	for (const toolCall of assistantMessage.tool_calls) {
		if (toolCall.function.name === "read_website_content") {
			const url = JSON.parse(toolCall.function.arguments).url;
			const websiteContent = await read_website_content(url);
			messages.push({
				role: "tool",
				tool_call_id: toolCall.id,
				name: toolCall.function.name,
				content: websiteContent,
			});
		}
	}

	const secondChatCompletion = await openai.chat.completions.create({
		model: "gpt-4o-mini",
		messages: messages,
	});

	return new Response(secondChatCompletion.choices[0].message.content);
} else {
	// this is your existing return statement
	return new Response(assistantMessage.content);
}

בדקו אם הודעת העוזר מכילה קריאות לפונקציות על ידי בדיקת המאפיין tool_calls. מכיוון שמודל הבינה המלאכותית יכול לקרוא לכמה פונקציות כברירת מחדל, צריך לעבור בלולאה על כל קריאות הפונקציות האפשריות ולהוסיף אותן למערך messages. כל קריאה ל-read_website_content תפעיל את הפונקציה read_website_content שהגדרתם קודם ותעביר כארגומנט את הכתובת ש-OpenAI יצר.

secondChatCompletion נדרש כדי לספק תשובה שמבוססת על הנתונים שאחזרתם מכל קריאה לפונקציה. עכשיו, השלב האחרון הוא לפרוס את ה-Worker.

בדקו את הקוד על ידי הרצת npx wrangler dev ופתחו את הכתובת שסופקה בדפדפן. זה יציג לכם את התשובה של OpenAI באמצעות מידע בזמן אמת מנתוני הרשת שאוחזרו.

#5. פריסת יישום ה-Worker

כדי לפרוס את היישום, הריצו את הפקודה npx wrangler deploy כדי לפרוס את יישום ה-Worker:

npx wrangler deploy

עכשיו אפשר לצפות בתצוגה מקדימה של ה-Worker בכתובת <YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev. מעבר לכתובת הזו יציג את התשובה מ-OpenAI. אפשר, אם רוצים, להוסיף את פרמטר הכתובת message כדי לכתוב הודעה מותאמת אישית: לדוגמה, https://<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?message=What is the weather in NYC today?.

#6. הצעדים הבאים

עיינו ב-קוד המוגמר של המדריך הזה ב-GitHub ↗︎.

כדי להמשיך לעבוד עם Workers ועם בינה מלאכותית, עיינו ב-מדריך על שימוש ב-LangChain וב-Cloudflare Workers יחד ↗︎ או ב-איך לבנות תוסף ChatGPT עם Cloudflare Workers ↗︎.

אם יש לכם שאלות, אתם צריכים עזרה, או שתרצו לשתף את הפרויקט, הצטרפו לקהילת המפתחים של Cloudflare ב-Discord ↗︎ כדי להתחבר למפתחים אחרים ולצוות Cloudflare.