vanilla api
This commit is contained in:
rex
@@ -1,16 +1,150 @@
|
|||||||
const mujianSdk = new window.MujianUMD.MujianSdk();
|
const mujianSdk = new window.MujianUMD.MujianSdk();
|
||||||
|
|
||||||
mujianSdk.init().then(() => {
|
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;" />`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
117
index.html
117
index.html
@@ -15,38 +15,129 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h2>
|
<h3>
|
||||||
<img
|
<img
|
||||||
id="logo"
|
id="logo"
|
||||||
src="assets/img/logo.svg"
|
src="assets/img/logo.svg"
|
||||||
alt="幕间UGC模版"
|
alt="幕间UGC模版"
|
||||||
/>幕间UGC自定义界面项目模版
|
/>幕间UGC自定义界面项目模版
|
||||||
</h2>
|
</h3>
|
||||||
|
|
||||||
<h3>获取项目信息</h3>
|
<h4>获取项目信息</h4>
|
||||||
|
|
||||||
<div id="project-info"></div>
|
<div id="project-info" class="text-sm"></div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
这是作品封面，你可以获取到
|
这是作品封面，你可以获取到
|
||||||
<img id="project-info-img" src="" alt="封面图" />
|
<img id="project-info-img" src="" alt="封面图" />
|
||||||
</div>
|
</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>
|
<i class="fa-solid fa-user"></i>
|
||||||
<button class="ui-button ui-widget ui-corner-all">jquery-ui按钮</button>
|
<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>
|
||||||
|
|
||||||
<!-- 幕间官方SDK -->
|
<!-- 幕间官方SDK -->
|
||||||
<script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.41/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 - 主要用于提供便利地操作页面元素的函数 -->
|
<!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->
|
||||||
<script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
|
<script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
|
||||||
<!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->
|
<!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->
|
||||||
|
|||||||
Reference in New Issue
Block a user