Compare commits
7 Commits
2c543f689c
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
d86244b534 | ||
|
|
6bf1ac8c9d | ||
|
|
ac2771d2dd | ||
|
|
9701641f18 | ||
|
|
44bc902d15 | ||
|
|
cf81b21cbb | ||
|
|
2a98b05972 |
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
// "mujian": {
|
||||
// "command": "npx",
|
||||
// "args": ["-y", "@mujian/mcp-docs-server"]
|
||||
// }
|
||||
"mujian-js-sdk": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@mujian/mcp-docs-server"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 目录里的文件或者文件夹，严禁修改其他文件或者文件夹！
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
!src/**
|
||||
!public/**
|
||||
8
.trae/mcp.json
Normal file
8
.trae/mcp.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"mujian-js-sdk": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@mujian/mcp-docs-server"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
# 你是一个游戏开发Agent，在本工程中，你需要协助我开发一个原生 HTML 游戏
|
||||
|
||||
## 本工程介绍
|
||||
|
||||
- 这是一个模版工程，开发者会基于这个工程进行拓展开发
|
||||
|
||||
## 你需要遵循的规则
|
||||
|
||||
- 入口 HTML 文件必须是 `index.html`
|
||||
- Always respond in 中文
|
||||
|
||||
14
README.md
Normal file
14
README.md
Normal file
@@ -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
|
||||
```
|
||||
@@ -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) => {
|
||||
console.log('getProjectInfo success', res);
|
||||
window.document.getElementById('project-info').innerHTML = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
|
||||
window.document.getElementById('project-info-img').src = res.coverImageUrl;
|
||||
console.log("getProjectInfo success", res);
|
||||
window.document.getElementById("project-info").innerHTML =
|
||||
`<pre>${JSON.stringify(res, null, 2)}</pre>`;
|
||||
window.document.getElementById("project-info-img").src = res.coverImageUrl;
|
||||
});
|
||||
|
||||
mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
|
||||
console.log('getPersonaInfo success', res);
|
||||
console.log("getPersonaInfo success", res);
|
||||
// 支持 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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控件 -->
|
||||
|
||||
125
index.html
125
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>
|
||||
<button class="ui-button ui-widget ui-corner-all" onclick="window.location.href = '/chat'">前往Chat示例</button>
|
||||
<h4>获取当前人设</h4>
|
||||
<div id="persona-info" class="text-sm"></div>
|
||||
|
||||
|
||||
<h3>获取当前人设</h3>
|
||||
<div id="persona-info"></div>
|
||||
|
||||
|
||||
<h3>三方库示例</h3>
|
||||
<h4>三方库示例</h4>
|
||||
<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控件 -->
|
||||
|
||||
Reference in New Issue
Block a user