163 lines
4.4 KiB
HTML
163 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>幕间UGC自定义界面项目模版</title>
|
||
<!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://npm.onmicrosoft.cn/jquery-ui@1.14.1/dist/themes/base/theme.css"
|
||
/>
|
||
|
||
<!-- 你的 CSS 样式代码，都放在这里 -->
|
||
<link rel="stylesheet" href="assets/css/index.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<h3>
|
||
<img
|
||
id="logo"
|
||
src="assets/img/logo.svg"
|
||
alt="幕间UGC模版"
|
||
/>幕间UGC自定义界面项目模版
|
||
</h3>
|
||
|
||
<h4>获取项目信息</h4>
|
||
|
||
<div id="project-info" class="text-sm"></div>
|
||
|
||
<div>
|
||
这是作品封面，你可以获取到
|
||
<img id="project-info-img" src="" alt="封面图" />
|
||
</div>
|
||
|
||
<h4>获取当前人设</h4>
|
||
<div id="persona-info" class="text-sm"></div>
|
||
|
||
<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.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控件 -->
|
||
<script src="https://npm.onmicrosoft.cn/jquery-ui@1.14.1/dist/jquery-ui.min.js"></script>
|
||
<!-- 第三方库：fontawesome - 主要用于提供图标 -->
|
||
<script src="https://npm.onmicrosoft.cn/@fortawesome/fontawesome-free@7.1.0/js/all.min.js"></script>
|
||
|
||
<!-- 你的 JS 代码，都放在这里 -->
|
||
<script src="assets/js/index.js"></script>
|
||
|
||
<!-- 可以把不同功能的代码，拆分到不同文件内，方便管理和修改 -->
|
||
<!-- <script src="assets/js/other.js"></script> -->
|
||
</body>
|
||
</html>
|