h5-boilerplate/assets/js/index.js

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 =
			`<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);
		// 支持 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(
				`<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;" />`,
					);
				}
			},
		);
	});
});