add tool call example

assets/js/index.js

@@ -16,7 +16,7 @@ mujianSdk.init().then(() => {
 	});
 
 	$("#text-completion-button").click(async () => {
-        $("#text-completion-result").html("");
+		$("#text-completion-result").html("");
 		const res = await mujianSdk.ai.openai.completions.create({
 			prompt: "Hello, world!",
 		});
@@ -25,7 +25,7 @@ mujianSdk.init().then(() => {
 	});
 
 	$("#chat-completion-button").click(async () => {
-        $("#chat-completion-result").html("");
+		$("#chat-completion-result").html("");
 		const res = await mujianSdk.ai.openai.chat.completions.create({
 			messages: [{ role: "user", content: "Hello, world!" }],
 		});
@@ -35,7 +35,7 @@ mujianSdk.init().then(() => {
 
 	// 文字补全流式
 	$("#text-completion-stream-button").click(async () => {
-        $("#text-completion-stream-result").html("");
+		$("#text-completion-stream-result").html("");
 		const res = await mujianSdk.ai.openai.completions.create(
 			{
 				prompt: "给我讲个100字的故事",
@@ -51,7 +51,7 @@ mujianSdk.init().then(() => {
 
 	// 对话补全流式
 	$("#chat-completion-stream-button").click(async () => {
-        $("#chat-completion-stream-result").html("");
+		$("#chat-completion-stream-result").html("");
 		const res = await mujianSdk.ai.openai.chat.completions.create(
 			{
 				messages: [{ role: "user", content: "给我讲个100字的故事" }],
@@ -69,7 +69,7 @@ mujianSdk.init().then(() => {
 
 	// Responses 非流式
 	$("#responses-button").click(async () => {
-        $("#responses-result").html("");
+		$("#responses-result").html("");
 		const res = await mujianSdk.ai.openai.responses.create({
 			input: [
 				{
@@ -90,7 +90,7 @@ mujianSdk.init().then(() => {
 
 	// Responses 流式
 	$("#responses-stream-button").click(async () => {
-        $("#responses-stream-result").html("");
+		$("#responses-stream-result").html("");
 		const res = await mujianSdk.ai.openai.responses.create(
 			{
 				input: [
@@ -116,7 +116,7 @@ mujianSdk.init().then(() => {
 	});
 
 	$("#image-generation-button").click(async () => {
-        $("#image-generation-result").html("");
+		$("#image-generation-result").html("");
 		const res = await mujianSdk.ai.openai.images.generate({
 			prompt: "A beautiful sunset over a calm ocean",
 		});
@@ -129,7 +129,7 @@ mujianSdk.init().then(() => {
 	});
 
 	$("#image-generation-stream-button").click(async () => {
-        $("#image-generation-stream-result").html("");
+		$("#image-generation-stream-result").html("");
 		await mujianSdk.ai.openai.images.generate(
 			{
 				prompt:
@@ -147,4 +147,71 @@ mujianSdk.init().then(() => {
 			},
 		);
 	});
+
+	$("#tool-call-button").click(async () => {
+		$("#tool-call-result").html("");
+
+		const weatherTool = {
+			type: "function",
+			function: {
+				name: "get_weather",
+				description: "Get the current weather in a location",
+				parameters: {
+					type: "object",
+					properties: {
+						location: {
+							type: "string",
+							description: "The city and state, e.g. San Francisco, CA",
+						},
+						unit: {
+							type: "string",
+							enum: ["celsius", "fahrenheit"],
+							description: "The unit of temperature, e.g. celsius, fahrenheit",
+							default: "celsius",
+						},
+					},
+					required: ["location"],
+				},
+			},
+		};
+
+		const get_weather = async (location, unit) => {
+			console.log("get_weather", location, unit);
+			return {
+				weather: "sunny",
+				temperature: 20,
+				unit: unit,
+			};
+		};
+
+		const TOOL_MAPPING = {
+			get_weather,
+		};
+
+		const res = await mujianSdk.ai.openai.chat.completions.create({
+			messages: [
+				{
+					role: "system",
+					content: "You are a helpful assistant.",
+				},
+				{
+					role: "user",
+					content: "What is the weather in San Francisco? in fahrenheit",
+				},
+			],
+			tools: [weatherTool],
+			tool_choice: "auto",
+			max_output_tokens: 9000,
+		});
+		console.log("tool call success", res);
+		$("#tool-call-result").html(JSON.stringify(res));
+		const msg = res.choices[0].message;
+
+		for (const toolCall of msg?.tool_calls || []) {
+			const toolName = toolCall.function.name;
+			const { location, unit } = JSON.parse(toolCall.function.arguments);
+			const toolResponse = await TOOL_MAPPING[toolName](location, unit);
+			console.log("tool response", toolResponse);
+		}
+	});
 });

index.html

@@ -136,6 +136,14 @@
     </h4>
     <div id="image-generation-stream-result"></div>
 
+    <h4>
+      Tool call 示例（非流式）
+      <button class="ui-button ui-widget ui-corner-all" id="tool-call-button">
+        触发Tool call
+      </button>
+    </h4>
+    <div id="tool-call-result"></div>
+
     <!-- 幕间官方SDK -->
     <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.45/dist/umd/index.js"></script>
     <!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->