diff --git a/assets/js/index.js b/assets/js/index.js
index c8c4b2b..218c146 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,16 +1,150 @@
const mujianSdk = new window.MujianUMD.MujianSdk();
mujianSdk.init().then(() => {
- console.log('init success');
- mujianSdk.ai.chat.project.getInfo().then((res) => {
- console.log('getProjectInfo success', res);
- window.document.getElementById('project-info').innerHTML = `${JSON.stringify(res, null, 2)}`;
- window.document.getElementById('project-info-img').src = res.coverImageUrl;
- });
+ console.log("init success");
+ mujianSdk.ai.chat.project.getInfo().then((res) => {
+ console.log("getProjectInfo success", res);
+ window.document.getElementById("project-info").innerHTML =
+ `${JSON.stringify(res, null, 2)}`;
+ window.document.getElementById("project-info-img").src = res.coverImageUrl;
+ });
- mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
- console.log('getPersonaInfo success', res);
- // 支持 JQuery 操作页面元素
- $('#persona-info').html(JSON.stringify(res));
- });
+ mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
+ console.log("getPersonaInfo success", res);
+ // 支持 JQuery 操作页面元素
+ $("#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(
+ `
`,
+ );
+ }
+ });
+
+ $("#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(
+ `
`,
+ );
+ }
+ },
+ );
+ });
});
diff --git a/index.html b/index.html
index df2e8cd..689d139 100644
--- a/index.html
+++ b/index.html
@@ -15,38 +15,129 @@
-
+
幕间UGC自定义界面项目模版
-
+
- 获取项目信息
+ 获取项目信息
-
+
这是作品封面，你可以获取到
![封面图]()
Chat示例
-
+ 获取当前人设
+
-
- 获取当前人设
-
-
-
- 三方库示例
+ 三方库示例
+
+
+ Chat示例
+
+
+
+
+
+ 文字补全 示例 (非流式)
+
+
+
+
+
+ 文字补全 示例 (流式)
+
+
+
+
+
+ 对话补全 示例 (非流式)
+
+
+
+
+
+ 对话补全 示例 (流式)
+
+
+
+
+
+ Responses 示例 (非流式)
+
+
+
+
+
+ Responses 示例 (流式)
+
+
+
+
+
+ 图像生成 示例（非流式）
+
+
+
+
+
+ 图像生成 示例（流式）
+
+
+
-
+