bump

.cursor/mcp.json

@@ -1,8 +1,8 @@
 {
 	"mcpServers": {
-		// "mujian": {
+		"mujian-js-sdk": {
-		// 	"command": "npx",
+			"command": "npx",
-		// 	"args": ["-y", "@mujian/mcp-docs-server"]
+			"args": ["-y", "@mujian/mcp-docs-server"]
-		// }
+		}
 	}
 }

.cursor/rules/general.mdc

@@ -3,24 +3,13 @@ description: 工程全局规则
 alwaysApply: true
 ---
 
-你是一个游戏开发Agent，需要在本工程中，协助我开发一个 HTML 游戏。
+# 你是一个游戏开发Agent，在本工程中，你需要协助我开发一个原生 HTML 游戏
 
 ## 本工程介绍
 
 - 这是一个模版工程，开发者会基于这个工程进行拓展开发
-- 本工程采用 Vite + React 框架，是一个React SPA架构的游戏/应用
-- 本工程强烈建议使用如下前端NPM包：
-  - react-router: 用于管理页面和路由
-  - zustand: 用于React状态管理
-  - TailwindCSS: 用于编写样式和管理主题
-  - axios：用于发起http请求。包括上传和SSE场景。
-  - dayjs: 用于处理日期
-  - localforage: 用于管理Storage
-  - react-icons: 用于使用图标
-  - motion: 动效库
-  - loadsh-es: 用于提供一些常用的utils函数
 
 ## 你需要遵循的规则
 
+- 入口 HTML 文件必须是 `index.html`
 - Always respond in 中文
-- 只能新增、修改和删除 src 目录里的文件或者文件夹，严禁修改其他文件或者文件夹！

.trae/.ignore

@@ -1,2 +0,0 @@
-!src/**
-!public/**

.trae/mcp.json

@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"mujian-js-sdk": {
+			"command": "npx",
+			"args": ["-y", "@mujian/mcp-docs-server"]
+		}
+	}
+}

.trae/rules/project_rules.md

@@ -0,0 +1,10 @@
+# 你是一个游戏开发Agent，在本工程中，你需要协助我开发一个原生 HTML 游戏
+
+## 本工程介绍
+
+- 这是一个模版工程，开发者会基于这个工程进行拓展开发
+
+## 你需要遵循的规则
+
+- 入口 HTML 文件必须是 `index.html`
+- Always respond in 中文

README.md

@@ -0,0 +1,14 @@
+# 幕间自定义界面-官方模版-H5 版
+
+- [幕间官网](https://mujian.ai)
+- [幕间文档站](https://docs.mujian.ai)
+- [幕间SDK](https://docs.mujian.ai/creator/sdk/introduction.html)
+- [教程地址](https://docs.mujian.ai/creator/game-dev/quick-start-h5.html)
+- [仓库地址](https://git.mujian.me/mujian/h5-boilerplate)
+
+本地调试
+
+```sh
+pnpm install -g http-server
+http-server -p 5173 --cors -c-1
+```

assets/js/index.js

@@ -1,16 +1,217 @@
 const mujianSdk = new window.MujianUMD.MujianSdk();
 
 mujianSdk.init().then(() => {
-    console.log('init success');
+	console.log("init success");
-    mujianSdk.ai.chat.project.getInfo().then((res) => {
+	mujianSdk.ai.chat.project.getInfo().then((res) => {
-        console.log('getProjectInfo success', res);
+		console.log("getProjectInfo success", res);
-        window.document.getElementById('project-info').innerHTML = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
+		window.document.getElementById("project-info").innerHTML =
-        window.document.getElementById('project-info-img').src = res.coverImageUrl;
+			`<pre>${JSON.stringify(res, null, 2)}</pre>`;
-    });
+		window.document.getElementById("project-info-img").src = res.coverImageUrl;
+	});
 
-    mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
+	mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
-        console.log('getPersonaInfo success', res);
+		console.log("getPersonaInfo success", res);
-        // 支持 JQuery 操作页面元素
+		// 支持 JQuery 操作页面元素
-        $('#persona-info').html(JSON.stringify(res));
+		$("#persona-info").html(JSON.stringify(res));
-    });
+	});
+
+	$("#text-completion-button").click(async () => {
+		$("#text-completion-result").html("");
+		const res = await mujianSdk.ai.openai.completions.create({
+			prompt: "Hello, world!",
+		});
+		console.log("text completion success", res);
+		$("#text-completion-result").html(JSON.stringify(res));
+	});
+
+	$("#chat-completion-button").click(async () => {
+		$("#chat-completion-result").html("");
+		const res = await mujianSdk.ai.openai.chat.completions.create({
+			messages: [{ role: "user", content: "Hello, world!" }],
+		});
+		console.log("chat completion success", res);
+		$("#chat-completion-result").html(JSON.stringify(res));
+	});
+
+	// 文字补全流式
+	$("#text-completion-stream-button").click(async () => {
+		$("#text-completion-stream-result").html("");
+		const res = await mujianSdk.ai.openai.completions.create(
+			{
+				prompt: "给我讲个100字的故事",
+				stream: true,
+			},
+			{},
+			(data) => {
+				console.log("text completion stream data", data);
+				$("#text-completion-stream-result").append(data?.choices?.[0]?.text);
+			},
+		);
+	});
+
+	// 对话补全流式
+	$("#chat-completion-stream-button").click(async () => {
+		$("#chat-completion-stream-result").html("");
+		const res = await mujianSdk.ai.openai.chat.completions.create(
+			{
+				messages: [{ role: "user", content: "给我讲个100字的故事" }],
+				stream: true,
+			},
+			{},
+			(data) => {
+				console.log("chat completion stream data", data);
+				$("#chat-completion-stream-result").append(
+					data?.choices?.[0]?.delta?.content,
+				);
+			},
+		);
+	});
+
+	// Responses 非流式
+	$("#responses-button").click(async () => {
+		$("#responses-result").html("");
+		const res = await mujianSdk.ai.openai.responses.create({
+			input: [
+				{
+					type: "message",
+					role: "user",
+					content: [
+						{
+							type: "input_text",
+							text: "给我讲个100字的故事",
+						},
+					],
+				},
+			],
+		});
+		console.log("responses success", res);
+		$("#responses-result").html(res?.output?.[0]?.content?.[0]?.text);
+	});
+
+	// Responses 流式
+	$("#responses-stream-button").click(async () => {
+		$("#responses-stream-result").html("");
+		const res = await mujianSdk.ai.openai.responses.create(
+			{
+				input: [
+					{
+						type: "message",
+						role: "user",
+						content: [
+							{
+								type: "input_text",
+								text: "给我讲个100字的故事",
+							},
+						],
+					},
+				],
+				stream: true,
+			},
+			{},
+			(data) => {
+				// console.log("responses stream data", data);
+				$("#responses-stream-result").append(data?.delta);
+			},
+		);
+	});
+
+	$("#image-generation-button").click(async () => {
+		$("#image-generation-result").html("");
+		const res = await mujianSdk.ai.openai.images.generate({
+			prompt: "A beautiful sunset over a calm ocean",
+		});
+		console.log("image generation success", res?.choices?.[0]?.images);
+		for (const image of res?.choices?.[0]?.images || []) {
+			$("#image-generation-result").append(
+				`<img src="${image.image_url?.url}" alt="图像生成结果" style="max-width: 100%; height: auto; margin: 10px; border-radius: 8px;" />`,
+			);
+		}
+	});
+
+	$("#image-generation-stream-button").click(async () => {
+		$("#image-generation-stream-result").html("");
+		await mujianSdk.ai.openai.images.generate(
+			{
+				prompt:
+					"Create two images, one is a beautiful sunset over a calm ocean, the other is a beautiful sunrise over a calm ocean",
+				stream: true,
+			},
+			{},
+			(data) => {
+				console.log("image generation stream data", data);
+				if (data?.choices?.[0]?.images) {
+					$("#image-generation-stream-result").append(
+						`<img src="${data?.choices?.[0]?.images?.[0]?.image_url?.url}" alt="图像生成结果" style="max-width: 100%; height: auto; margin: 10px; border-radius: 8px;" />`,
+					);
+				}
+			},
+		);
+	});
+
+	$("#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);
+		}
+	});
 });

chat.html

@@ -27,7 +27,7 @@
     </div>
 
     <!-- 幕间官方SDK -->
-    <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.37/dist/umd/index.js"></script>
+    <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.41/dist/umd/index.js"></script>
     <!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->
     <script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
     <!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->

index.html

@@ -15,38 +15,137 @@
   </head>
 
   <body>
-    <h2>
+    <h3>
       <img
         id="logo"
         src="assets/img/logo.svg"
         alt="幕间UGC模版"
       />幕间UGC自定义界面项目模版
-    </h2>
+    </h3>
 
-    <h3>获取项目信息</h3>
+    <h4>获取项目信息</h4>
 
-    <div id="project-info"></div>
+    <div id="project-info" class="text-sm"></div>
 
     <div>
       这是作品封面，你可以获取到
       <img id="project-info-img" src="" alt="封面图" />
     </div>
 
-    <h3>Chat示例</h3>
+    <h4>获取当前人设</h4>
-    <button class="ui-button ui-widget ui-corner-all" onclick="window.location.href = '/chat'">前往Chat示例</button>
+    <div id="persona-info" class="text-sm"></div>
 
-
+    <h4>三方库示例</h4>
-    <h3>获取当前人设</h3>
-    <div id="persona-info"></div>
-
-
-    <h3>三方库示例</h3>
     <i class="fa-solid fa-user"></i>
     <button class="ui-button ui-widget ui-corner-all">jquery-ui按钮</button>
 
+    <div class="flex gap-2">
+      <h4>
+        Chat示例
+        <button
+          class="ui-button ui-widget ui-corner-all"
+          onclick="window.location.href = '/chat.html'"
+        >
+          前往Chat示例
+        </button>
+      </h4>
+    </div>
+
+    <h4>
+      文字补全 示例 (非流式)
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="text-completion-button"
+      >
+        触发文字补全
+      </button>
+    </h4>
+    <div id="text-completion-result"></div>
+
+    <h4>
+      文字补全 示例 (流式)
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="text-completion-stream-button"
+      >
+        触发文字补全
+      </button>
+    </h4>
+    <div id="text-completion-stream-result"></div>
+
+    <h4>
+      对话补全 示例 (非流式)
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="chat-completion-button"
+      >
+        触发对话补全
+      </button>
+    </h4>
+    <div id="chat-completion-result"></div>
+
+    <h4>
+      对话补全 示例 (流式)
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="chat-completion-stream-button"
+      >
+        触发对话补全
+      </button>
+    </h4>
+    <div id="chat-completion-stream-result"></div>
+
+    <h4>
+      Responses 示例 (非流式)
+      <button class="ui-button ui-widget ui-corner-all" id="responses-button">
+        触发Responses
+      </button>
+    </h4>
+    <div id="responses-result"></div>
+
+    <h4>
+      Responses 示例 (流式)
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="responses-stream-button"
+      >
+        触发Responses
+      </button>
+    </h4>
+    <div id="responses-stream-result"></div>
+
+    <h4>
+      图像生成 示例（非流式）
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="image-generation-button"
+      >
+        触发图像生成
+      </button>
+    </h4>
+    <div id="image-generation-result"></div>
+
+    <h4>
+      图像生成 示例（流式）
+      <button
+        class="ui-button ui-widget ui-corner-all"
+        id="image-generation-stream-button"
+      >
+        触发图像生成
+      </button>
+    </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.35/dist/umd/index.js"></script>
+    <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.45/dist/umd/index.js"></script>
     <!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->
     <script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
     <!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->