845 lines
46 KiB
HTML
845 lines
46 KiB
HTML
<!DOCTYPE>
|
||
<!--解决idea thymeleaf 表达式模板报红波浪线-->
|
||
<!--suppress ALL -->
|
||
<html xmlns:th="http://www.thymeleaf.org" lang="en">
|
||
|
||
<head>
|
||
<title>欢迎{{openId}}</title>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||
<!-- jquery在线版本 -->
|
||
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||
<script src="../extensions/ComfyUI_Lam/static/js/qn-rtplayer-web.js"></script>
|
||
<!--引入样式-->
|
||
<link rel="stylesheet" href="../extensions/ComfyUI_Lam/static/css/app.css" />
|
||
<style>
|
||
:where(.css-3m4nqy).ant-select-single .ant-select-selector .ant-select-selection-search {
|
||
position: absolute;
|
||
top: 0;
|
||
inset-inline-start: 11px px;
|
||
inset-inline-end: 11px;
|
||
bottom: 0;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||
width: 100%;
|
||
height: 32px;
|
||
padding: 0 11px;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
||
position: relative;
|
||
background-color: #ffffff;
|
||
border: 1px solid #d9d9d9;
|
||
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-select-single .ant-select-selector {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
font-size: 14px;
|
||
line-height: 1.5714285714285714;
|
||
list-style: none;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||
display: flex;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
:where(.css-3m4nqy)[class^="ant-select"] [class^="ant-select"],
|
||
:where(.css-3m4nqy)[class*=" ant-select"] [class^="ant-select"],
|
||
:where(.css-3m4nqy)[class^="ant-select"] [class*=" ant-select"],
|
||
:where(.css-3m4nqy)[class*=" ant-select"] [class*=" ant-select"] {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-select-dropdown .ant-select-item {
|
||
position: relative;
|
||
display: block;
|
||
min-height: 32px;
|
||
padding: 5px 12px;
|
||
color: rgba(250, 250, 250, 0.88);
|
||
font-weight: normal;
|
||
font-size: 14px;
|
||
line-height: 1.5714285714285714;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
transition: background 0.3s ease;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
:where(.css-3m4nqy)[class^="ant-input"] [class^="ant-input"],
|
||
:where(.css-3m4nqy)[class*=" ant-input"] [class^="ant-input"],
|
||
:where(.css-3m4nqy)[class^="ant-input"] [class*=" ant-input"],
|
||
:where(.css-3m4nqy)[class*=" ant-input"] [class*=" ant-input"] {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-input-number .ant-input-number-input {
|
||
width: 100%;
|
||
height: 30px;
|
||
padding: 0 11px;
|
||
text-align: start;
|
||
background-color: transparent;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
outline: 0;
|
||
transition: all 0.2s linear;
|
||
appearance: textfield;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
font-size: inherit;
|
||
vertical-align: top;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-select .ant-select-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
color: rgba(0, 0, 0, 0.25);
|
||
font-style: normal;
|
||
line-height: 1;
|
||
text-align: center;
|
||
text-transform: none;
|
||
vertical-align: -0.125em;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
position: absolute;
|
||
top: 50%;
|
||
inset-inline-start: auto;
|
||
inset-inline-end: 11px;
|
||
height: 12px;
|
||
margin-top: -6px;
|
||
font-size: 12px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:where(.css-3m4nqy)[class^="ant-select"] [class^="ant-select"],
|
||
:where(.css-3m4nqy)[class*=" ant-select"] [class^="ant-select"],
|
||
:where(.css-3m4nqy)[class^="ant-select"] [class*=" ant-select"],
|
||
:where(.css-3m4nqy)[class*=" ant-select"] [class*=" ant-select"] {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:where(.css-3m4nqy).ant-popover {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
font-size: 14px;
|
||
line-height: 1.5714285714285714;
|
||
list-style: none;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1030;
|
||
font-weight: normal;
|
||
white-space: normal;
|
||
text-align: start;
|
||
cursor: auto;
|
||
user-select: text;
|
||
--antd-arrow-background-color: #ffffff;
|
||
}
|
||
.disable {
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" data-v-app="">
|
||
<section class="aigc-layout">
|
||
<div class="aigc-head">
|
||
<div style="color: aliceblue;font-size: x-large;">降维AI|创作平台</div>
|
||
<div class="aigc-head__left-block"></div>
|
||
<div class="aigc-head__right-block">
|
||
<div style="color: aliceblue;" id="contact_administrator"
|
||
class="aigc-head__right-block--qun aigc-head__right-block--commonbtn aigc-head__right-block--hover">
|
||
联系管理员 </div><!---->
|
||
<div class="aigc-head__right-block--avatarbox"><img class="aigc-head__right-block--avatar"
|
||
src="https://himg.bdimg.com/sys/portraith/item/public.1.e8294af1.YF07P1v3sOMXm56wbOMh9w">
|
||
</div><!---->
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div><!---->
|
||
<div class="ant-popover pop-com soci css-3m4nqy ant-popover-placement-bottomRight"
|
||
style="left: 968px; top: 43px; transform-origin: 203px 0px;display: none;" id="contact_administrator_popover">
|
||
<div class="ant-popover-content">
|
||
<div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div>
|
||
<div class="ant-popover-inner" role="tooltip"><!---->
|
||
<div class="ant-popover-inner-content">
|
||
<div class="add-soci">
|
||
<div class="add-text">扫码添加管理员微信</div><img class="qr-code"
|
||
src="/lam/getImage?type=wechat&&name=admin_qr_code.jpg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div data-v-ada5c28e="" class="aigc-tab" style="--688ac256: 0px;" id="comand_div_id">
|
||
<!-- 功能菜单 -->
|
||
</div>
|
||
<section data-v-d1097eb1="" class="aigc-main">
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content">
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content--top-wrap">
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content--top-left" id="upload_image_div_id"
|
||
style="display: none;">
|
||
<div data-v-23e1e235="" data-v-d1097eb1="" class="aigc-upload step_1"><!---->
|
||
<span data-v-23e1e235="" class="ant-upload-wrapper aigc-upload__ant-upload css-3m4nqy"
|
||
id="upload_image_btn_parent_id">
|
||
<div class="ant-upload ant-upload-drag aigc-upload__ant-upload css-3m4nqy"
|
||
style="padding-top: 150px;" id="upload_image_btn_id"><span
|
||
class="ant-upload ant-upload-btn" role="button" tabindex="0">
|
||
<input type="file" accept="" id="upload_image_input_id"
|
||
style="display: none;">
|
||
<div data-v-23e1e235="" class="aigc-upload__not-upload"
|
||
onclick="clickUpload()">
|
||
<div data-v-23e1e235="" style="color: aliceblue;"
|
||
class="aigc-upload__icon-coll--guide-btn">上传图片
|
||
</div>
|
||
</div>
|
||
</span>
|
||
</div><!---->
|
||
<div class="aigc-loading aigc-main__left-content--loading"
|
||
id="upload_image_loading_id" style="display: none;">
|
||
<div data-v-e4fb7b31="" class="aigc-loading__mask">
|
||
<div data-v-e4fb7b31="" role="progressbar"
|
||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-24 css-3m4nqy">
|
||
<div class="ant-progress-inner"
|
||
style="width: 24px; height: 24px; font-size: 9.6px;"><svg
|
||
class="ant-progress-circle" viewBox="0 0 100 100"><!---->
|
||
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92"
|
||
stroke="#d8d8d8" stroke-linecap="round" stroke-width="8"
|
||
fill-opacity="0" class="ant-progress-circle-trail"
|
||
style="stroke: rgb(216, 216, 216); stroke-dasharray: 289.027px, 289.027px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s;">
|
||
</path>
|
||
</svg><!---->
|
||
</div>
|
||
</div><!---->
|
||
<div data-v-e4fb7b31="" class="aigc-loading__describe">上传中</div>
|
||
</div>
|
||
</div>
|
||
</span>
|
||
<section data-v-e19f253b="" data-v-23e1e235="" class="aigc-preview"
|
||
id="upload_image_preview_parend_id" style="display: none;">
|
||
<div data-v-e19f253b="" onclick="clickUpload()" class="aigc-preview__img"
|
||
id="upload_image_preview_id"
|
||
style="background-image: url("../view?filename=ComfyUI_00819_.png&type=input&subfolder=&rand=0.9293840121020174");">
|
||
<!----><!----><!---->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content--top-right step_5 step_7">
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content--nodata" id="no_add_task_div">
|
||
<p data-v-d1097eb1="">生成预览区</p>
|
||
</div><!---->
|
||
<div data-v-e4fb7b31="" data-v-d1097eb1=""
|
||
class="aigc-loading aigc-main__left-content--loading" style="display: none;" id="yes_add_task_div">
|
||
<div data-v-e4fb7b31="" class="aigc-loading__mask">
|
||
<div data-v-e4fb7b31="" role="progressbar"
|
||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-24 css-3m4nqy">
|
||
<div class="ant-progress-inner"
|
||
style="width: 24px; height: 24px; font-size: 9.6px;"><svg
|
||
class="ant-progress-circle" viewBox="0 0 100 100"><!---->
|
||
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92"
|
||
stroke="#d8d8d8" stroke-linecap="round" stroke-width="8"
|
||
fill-opacity="0" class="ant-progress-circle-trail"
|
||
style="stroke: rgb(216, 216, 216); stroke-dasharray: 289.027px, 289.027px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s;">
|
||
</path>
|
||
</svg><!---->
|
||
</div>
|
||
</div><!---->
|
||
<div data-v-e4fb7b31="" id="loading_text_id" class="aigc-loading__describe">排队中请等待</div>
|
||
</div>
|
||
</div>
|
||
<section data-v-e19f253b="" data-v-d1097eb1="" class="aigc-preview" style="display: none;" id="wcomplete_add_task_div">
|
||
<div data-v-e19f253b="" onclick="openViewNow(this)" class="aigc-preview__img" id="wcomplete_add_task_img_div"
|
||
style="background-image: url("https://pcsdata.baidu.com/thumbnail/6a9bc2ee8fb8cf53f0d23d6fa4b31143?fid=3878105166-16051585-1026667930322733&time=1713502800&rt=pr&sign=FDTAER-yUdy3dSFZ0SVxtzShv1zcMqd-oTE9DBFqjwgK6eAiBoZIZhTdKU0%3D&expires=48h&chkv=0&chkbd=0&chkpc=&dp-logid=235267649399325916&dp-callid=0&size=c1600_u1600&quality=100&vuk=&ft=video&imgtimes=1713505888030");">
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div data-v-d1097eb1="" class="aigc-main__left-content--bottom-wrap step_2_empty">
|
||
<div data-v-622eff0c="" data-v-d1097eb1="" class="aigc-container">
|
||
<div data-v-622eff0c="" class="aigc-container__formula">
|
||
<div data-v-622eff0c="" class="aigc-container__tabs-box">
|
||
<div data-v-622eff0c="" class="aigc-container__sub-tab active-sub-tab">历史记录</div>
|
||
</div>
|
||
<div data-v-622eff0c="" class="aigc-container__recomm-fml" id="historys_div_id">
|
||
|
||
</div><!---->
|
||
</div><!----><!----><!----><!---->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div data-v-d1097eb1="" class="aigc-main__right-params">
|
||
<div data-v-fe0dcf7c="" data-v-d1097eb1="" class="aigc-layright step_3" id="rightBoxRef">
|
||
<div data-v-fe0dcf7c="" class="aigc-layright__top">
|
||
<div data-v-d25ec045="" data-v-fe0dcf7c="" class="aigc-top">
|
||
<div id="select_container_div">
|
||
|
||
</div>
|
||
<div class="aigc-prompt" id="prompt-container" style="display: none;">
|
||
<div class="aigc-prompt__head">
|
||
<div class="aigc-prompt__head--text">正向提示词</div>
|
||
<div class="aigc-prompt__head--clear"
|
||
onclick="$('#prompt').html('');userParams['prompt']='';$('#prompt').attr('placeholder',$('#prompt').html().length>0?'':'输入中文或英文提示词');"> 清除 </div>
|
||
</div>
|
||
<div class="aigc-prompt__base--textarea">
|
||
<div class="textarea" id="prompt" contenteditable="true"
|
||
oninput="userParams['prompt']=$(event.target).html();$(event.target).attr('placeholder',$(event.target).html().length>0?'':'输入中文或英文提示词');"
|
||
placeholder="输入中文或英文提示词" style="height: 130px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="aigc-prompt" id="negative-container" style="display: none;">
|
||
<div class="aigc-prompt__head">
|
||
<div class="aigc-prompt__head--text">反向提示词</div>
|
||
<div class="aigc-prompt__head--clear"
|
||
onclick="$('#negative').html('');userParams['negative']='';$('#negative').attr('placeholder',$('#negative').html().length>0?'':'输入中文或英文提示词');"> 清除
|
||
</div>
|
||
</div>
|
||
<div class="aigc-prompt__base--textarea">
|
||
<div class="textarea" id="negative" contenteditable="true"
|
||
oninput="userParams['negative']=$(event.target).html();$(event.target).attr('placeholder',$(event.target).html().length>0?'':'输入中文或英文提示词');"
|
||
placeholder="输入中文或英文提示词" style="height: 130px;"></div>
|
||
</div>
|
||
</div>
|
||
<div data-v-fe0dcf7c="" class="aigc-layright__bottom" id="other_params_parent_div"
|
||
style="display: none;">
|
||
<div data-v-fea6429a="" data-v-fe0dcf7c="" class="aigc-advanced">
|
||
<div data-v-fea6429a="" class="aigc-advanced__mid--text"
|
||
style="font-weight: bold;"> 其他参数 </div>
|
||
<div data-v-fea6429a="" class="aigc-advanced__midexpend"
|
||
id="other_params_div_id">
|
||
<div data-v-fea6429a="" class="aigc-advanced__midexpend--process"> 生成步数 <div
|
||
data-v-fea6429a=""
|
||
class="ant-input-number aigc-advanced__midexpend--input css-3m4nqy">
|
||
<div class="ant-input-number-input-wrap"><input autocomplete="off"
|
||
role="spinbutton" aria-valuenow="30" step="1" type="number"
|
||
value="30" class="ant-input-number-input"></div>
|
||
</div>
|
||
</div>
|
||
<div data-v-fea6429a="" class="aigc-advanced__midexpend--process"> 提示词引导系数
|
||
<div data-v-fea6429a=""
|
||
class="ant-input-number aigc-advanced__midexpend--inputshort css-3m4nqy"
|
||
style="margin-left: 16px;">
|
||
<div class="ant-input-number-input-wrap"><input autocomplete="off"
|
||
role="spinbutton" aria-valuemin="1" aria-valuemax="20"
|
||
aria-valuenow="7" step="1" type="number" value="0"
|
||
class="ant-input-number-input"></div>
|
||
</div>
|
||
</div>
|
||
<div data-v-fea6429a="" style="white-space: nowrap;"
|
||
class="aigc-advanced__midexpend--process"> 随机种子
|
||
<input data-v-fea6429a="" type="text"
|
||
class="ant-input css-3m4nqy aigc-advanced__midexpend--input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div data-v-d1097eb1="" class="aigc-main__btn-box step_4">
|
||
<div data-v-d1097eb1="" class="aigc-main__btn-box--merge" id="add_task_btn_id" onclick="addTask()"><!---->
|
||
<div data-v-d1097eb1="" class="text"><span data-v-d1097eb1="" class="upper">立即生成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!---->
|
||
<div data-v-51fd3d7a="" data-v-d1097eb1="" class="modal" style="display:none;" id="pop_frame_div_parent_id">
|
||
<div data-v-51fd3d7a="" class="content-wrap">
|
||
<img data-v-51fd3d7a="" class="cross-icon" id="pop_frame_div_id" onclick="$('#pop_frame_div_parent_id').hide()"
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGkSURBVHgB7dptbcNADMZxQyiEQCqEMBiEjcHGYGMSCIUQCIHgXaRY8rSmeff5zs9fivrtbP1UVY0SIoQQQgghhBBCCAWJmd/T1aXrO10NOSvtdEvX17TjG1mWBn7y33pPSOMu0066D7IqDRv4fy6QZnDGBrIqDXvw87IivcAZe5BVadid5+tzIC3gjN3JsjSw9YK0AqelHHlAcoujFsyG5B5HyoFUDI5kiVQcjmSBVCyOdCVS8TjSFUjV4EhnIlWHI52BVC2OdASpehxpD1IYHGkLUjgcaQ1SWBxpBVIfFkdaQIqNI21EailiK5Faihov/yCPDwcaitgKHKkPh7QBJx7SDpw4SCtwWnb0tMQ03vAPORwS77h9CIPEB+6tqkc6gqPOqBPpDBx1Vl1IZ+KoM+tAugJHnV020pU4akaZSBY4alZZSJY4amYZSDlw1GzfSDlx1A4+kTzgqF18IXnCUTv5QUrDfjzhqL1eIXVkFT9/kTwrjtptDsn0RfLOI440g2T6DdK/QYMnHGlCkh3Hz4asm6Bu5Dj2euuBEEIIIYQQitwvJD8kAp6CtMQAAAAASUVORK5CYII=">
|
||
<div data-v-d1097eb1="" class="title" id="pop_frame_div_title_id"></div>
|
||
<div data-v-d1097eb1="" class="desc" id="pop_frame_div_desc_id">
|
||
</div>
|
||
<div data-v-51fd3d7a="" class="bottom-box" id="pop_frame_div_btn_id">
|
||
<div data-v-51fd3d7a="" class="cancel-btn btn" id="pop_frame_div_btn_cancel_id">取消</div>
|
||
<div data-v-51fd3d7a="" class="confirm-btn btn" id="pop_frame_div_btn_ok_id">确认</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section><!---->
|
||
</section>
|
||
</div>
|
||
</body>
|
||
<script src="../extensions/ComfyUI_Lam/static/js/app.js"></script>
|
||
<script>
|
||
var openId = '{{openId}}';
|
||
var websocket = null;
|
||
|
||
// 判断当前浏览器是否支持WebSocket, springboot是项目名
|
||
if ('WebSocket' in window) {
|
||
var host = window.location.host;
|
||
websocket = new WebSocket("ws://" + host + '/ws?clientId=' + openId);
|
||
} else {
|
||
console.error("不支持WebSocket");
|
||
}
|
||
|
||
// 连接发生错误的回调方法
|
||
websocket.onerror = function (e) {
|
||
console.error("WebSocket连接发生错误");
|
||
};
|
||
|
||
// 连接成功建立的回调方法
|
||
websocket.onopen = function () {
|
||
// 获取所有在线用户
|
||
console.log("WebSocket连接成功");
|
||
//var username = randomString(10);
|
||
//sendIssue({ "userName": username, "comType": "login" });
|
||
//$("#talks").html(username);
|
||
}
|
||
|
||
// 接收到消息的回调方法
|
||
websocket.onmessage = async function (event) {
|
||
if (event.data == null || event.data == "" || event.data instanceof Blob) {
|
||
return;
|
||
}
|
||
var messageJson = eval("(" + event.data + ")");
|
||
if(messageJson['type']=='executing' && !messageJson['data']['node']){
|
||
userParams['status']='wcomplete'
|
||
$("#add_task_btn_id").removeClass("disable");
|
||
getHistorys()
|
||
}else if(messageJson['type']=='progress' || messageJson['type']=='executing'){
|
||
if($("#loading_text_id").attr('lineup')=='true'){
|
||
$("#loading_text_id").attr('lineup','false')
|
||
$("#loading_text_id").html('效果绘制中...')
|
||
}else{
|
||
var html=$("#loading_text_id").html()
|
||
var str=html.substring(0,1);
|
||
html=html.substring(1)+str;
|
||
$("#loading_text_id").html(html)
|
||
}
|
||
}else{
|
||
var html=$("#loading_text_id").html()
|
||
var str=html.substring(0,1);
|
||
html=html.substring(1)+str;
|
||
$("#loading_text_id").html(html)
|
||
|
||
}
|
||
console.log(new Date().format("yyyy-MM-dd hh:mm:ss"), messageJson);
|
||
|
||
}
|
||
|
||
// 连接关闭的回调方法
|
||
websocket.onclose = function () {
|
||
// alert("WebSocket连接关闭");
|
||
}
|
||
|
||
// 发送消息
|
||
function sendIssue(msg) {
|
||
websocket.send(JSON.stringify(msg));
|
||
}
|
||
var userParams = {}
|
||
var comands = {}
|
||
$(function () {
|
||
$('#contact_administrator').mouseenter(function(event) {
|
||
var mouseX = event.pageX; // 鼠标相对于页面的X坐标
|
||
var mouseY = event.pageY; // 鼠标相对于页面的Y坐标
|
||
mouseX=mouseX-$('#contact_administrator_popover').width()
|
||
$('#contact_administrator_popover').css({
|
||
'top': mouseY + 'px',
|
||
'left': mouseX + 'px'
|
||
});
|
||
$('#contact_administrator_popover').show()
|
||
}).mouseleave(function() {
|
||
// 鼠标离开时的操作
|
||
$('#contact_administrator_popover').hide()
|
||
});
|
||
$.get('../wechatauth/getCommands', {}, function (res) {
|
||
comands = res;
|
||
$("#comand_div_id").html('')
|
||
for (var key of Object.keys(res)) {
|
||
$("#comand_div_id").append('<div id="'+btoa(encodeURIComponent(key))+'" data-v-ada5c28e="" class="aigc-tab__item " onclick="setComand(\'' + key + '\')"><span data-v-ada5c28e="">' + key + '</span></div>')
|
||
}
|
||
if (Object.keys(res).length > 0) {
|
||
$("#comand_div_id").children().eq(0).click()
|
||
}
|
||
})
|
||
getHistorys()
|
||
})
|
||
var historyObj={}
|
||
function getHistorys(){
|
||
$.get('../wechatauth/getHistorys', {'openId':openId}, function (res) {
|
||
console.log(res)
|
||
var historyHtml='';
|
||
for(var i = 0; i < res.length; i++){
|
||
var command=JSON.parse(res[i][2])
|
||
if (res[i][4] == 'waiting'){
|
||
setComand(command['command'],command)
|
||
continue
|
||
}else if(res[i][4]=='wcomplete'){
|
||
command['status']='wcomplete'
|
||
}
|
||
var outputs=JSON.parse(res[i][7])
|
||
|
||
historyObj[command['prompt_id']]=command
|
||
for(var node_id of Object.keys(outputs)){
|
||
var node_output = outputs[node_id]
|
||
if(Object.keys(node_output).indexOf("images") >= 0){
|
||
for(var j = 0; j < node_output.images.length; j++){
|
||
var img=node_output.images[j]
|
||
var url = '../view?filename=' + img.filename + '&type=' + img.type + '&subfolder='+ img.subfolder
|
||
historyHtml+=`<div data-v-ae8b2cf0="" data-v-622eff0c="" onclick="openView('image','`+url+`','`+command['prompt_id']+`')"
|
||
class="item-box step_2 aigc-container__fml-item"><img data-v-ae8b2cf0=""
|
||
class="cover-img"
|
||
src="`+url+`">
|
||
<div data-v-ae8b2cf0="" class="bottom">
|
||
<div data-v-ae8b2cf0="" title="`+command['command']+`" class="title">`+command['command']+`</div>
|
||
</div>
|
||
</div>`
|
||
if(userParams['prompt_id']==command['prompt_id']){
|
||
$("#no_add_task_div").hide()
|
||
$("#yes_add_task_div").hide()
|
||
$("#wcomplete_add_task_img_div").css("background-image", "url(" + url + ")")
|
||
$("#wcomplete_add_task_img_div").html('');
|
||
$("#wcomplete_add_task_img_div").attr('url',url);
|
||
$("#wcomplete_add_task_img_div").attr('type','image');
|
||
$("#wcomplete_add_task_div").show()
|
||
}
|
||
}
|
||
}else if(Object.keys(node_output).indexOf("gifs") >= 0){
|
||
for(var j = 0; j < node_output.gifs.length; j++){
|
||
var video=node_output.gifs[j]
|
||
var url = '../view?filename=' + video.filename + '&type=' + video.type + '&subfolder='+ video.subfolder
|
||
var imgUrl='../lam/getImage?type=wechat&&name=video_play.jpeg'
|
||
var backgroundImg=''
|
||
if(Object.keys(command).indexOf('image')>=0){
|
||
if(command['image'].indexOf('view?filename')>=0){
|
||
backgroundImg='../view?'+command['image'].split('?')[1]
|
||
}
|
||
}
|
||
if(userParams['prompt_id']==command['prompt_id']){
|
||
$("#no_add_task_div").hide()
|
||
$("#yes_add_task_div").hide()
|
||
//修改背景图片
|
||
$("#wcomplete_add_task_img_div").css("background-image", "url(" + backgroundImg + ")")
|
||
$("#wcomplete_add_task_img_div").html('<img src="'+imgUrl+'" style="width: auto;height: 100%;">')
|
||
$("#wcomplete_add_task_img_div").attr('url',url);
|
||
$("#wcomplete_add_task_img_div").attr('type','video');
|
||
$("#wcomplete_add_task_div").show()
|
||
}
|
||
historyHtml+=`<div data-v-ae8b2cf0="" data-v-622eff0c="" style="background-image: url("`+backgroundImg+`");background-size: cover;background-position: center;"
|
||
class="item-box step_2 aigc-container__fml-item" onclick="openView('video','`+url+`','`+command['prompt_id']+`')" ><img data-v-ae8b2cf0=""
|
||
class="cover-img" data-video="`+url+`"
|
||
src="`+imgUrl+`">
|
||
<div data-v-ae8b2cf0="" class="bottom">
|
||
<div data-v-ae8b2cf0="" title="`+command['command']+`" class="title">`+command['command']+`</div>
|
||
</div>
|
||
</div>`
|
||
}
|
||
}
|
||
}
|
||
}
|
||
$("#historys_div_id").html(historyHtml);
|
||
})
|
||
}
|
||
function setComand(name,comand) {
|
||
userParams = comand?comand:{ 'openId': openId,'status': 'prepare'}
|
||
userParams['command'] = name
|
||
if(userParams['status']=='waiting'){
|
||
$("#loading_text_id").attr('lineup','true')
|
||
$("#loading_text_id").html('排队中请等待')
|
||
$("#add_task_btn_id").addClass('disable');
|
||
$("#no_add_task_div").hide()
|
||
$("#wcomplete_add_task_div").hide()
|
||
$("#yes_add_task_div").show()
|
||
}
|
||
$("#"+btoa(encodeURIComponent(name))).addClass("active").siblings().removeClass("active")
|
||
if ("prompt" in comands[name].params) {
|
||
if(comand &&'prompt' in comand){
|
||
$("#prompt").html(comand['prompt'])
|
||
}else{
|
||
userParams['prompt'] = ''
|
||
}
|
||
$('#prompt').attr('placeholder',$('#prompt').html().length>0?'':'输入中文或英文提示词');
|
||
$("#prompt-container").show()
|
||
} else {
|
||
$("#prompt-container").hide()
|
||
}
|
||
if ("negative" in comands[name].params) {
|
||
if(comand &&'negative' in comand){
|
||
$("#negative").html(comand['negative'])
|
||
}else{
|
||
userParams['negative'] = ''
|
||
}
|
||
$('#negative').attr('placeholder',$('#negative').html().length>0?'':'输入中文或英文提示词');
|
||
$("#negative-container").show()
|
||
} else {
|
||
$("#negative-container").hide()
|
||
}
|
||
if ('image' in comands[name].params) {
|
||
if(comand &&'image' in comand){
|
||
if(comand['image'].indexOf('view?filename')>=0){
|
||
url='../view?'+comand['image'].split('?')[1]
|
||
$("#upload_image_btn_parent_id").hide()
|
||
$("#upload_image_preview_parend_id").show()
|
||
//修改div的背景图片
|
||
$("#upload_image_preview_id").css("background-image", "url(" + url + ")")
|
||
var host = window.location.host;
|
||
imageUrl = 'http://' + host + url
|
||
userParams['image'] = imageUrl
|
||
}else{
|
||
userParams['image'] = ''
|
||
}
|
||
}else{
|
||
userParams['image'] = ''
|
||
}
|
||
$("#upload_image_div_id").show()
|
||
} else {
|
||
$("#upload_image_div_id").hide()
|
||
}
|
||
var comandHtml = ''
|
||
var otherHtml = ''
|
||
console.log(comands[name].params)
|
||
var paichuKeys = ['prompt', 'negative', 'image']
|
||
for (var key of Object.keys(comands[name].params)) {
|
||
if (paichuKeys.indexOf(key) >= 0) {
|
||
continue
|
||
}
|
||
if ('options' in comands[name].params[key]) {
|
||
var selName=''
|
||
if(comand && key in comand){
|
||
selName= Object.keys(comands[name].params[key]["options"]).find(opName => comands[name].params[key]["options"][opName] == comand[key]);
|
||
}else{
|
||
selName= Object.keys(comands[name].params[key]["options"])[0]
|
||
userParams[key] = comands[name].params[key]['options'][selName]
|
||
}
|
||
comandHtml += `<div data-v-d25ec045="" class="aigc-top__base">
|
||
<div data-v-d25ec045="" class="aigc-top__base--text" style="font-weight: bold;">
|
||
`+ comands[name].params[key]['zhName'] + ` </div>
|
||
<div data-v-d25ec045=""
|
||
class="ant-select css-3m4nqy aigc-top__base--select ant-select-single ant-select-show-arrow"
|
||
style="width: 100%;"><!---->
|
||
<div class="ant-select-selector" onclick="$('#params_`+ key + `_options').toggle()">
|
||
<span class="ant-select-selection-search" style="position: unset;" id="params_`+ key + `" >
|
||
`+ selName + `
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div><!---->
|
||
<div class="ant-select-dropdown css-3m4nqy ant-select-dropdown-placement-bottomLeft"
|
||
style="min-width: 268px; width: 268px; left: 0px; top: 36px;display: none;" id="params_`+ key + `_options">
|
||
<div>
|
||
<div class="rc-virtual-list" style="position: relative;">
|
||
<div class="rc-virtual-list-holder"
|
||
style="max-height: 256px; overflow-y: hidden; overflow-anchor: none;">
|
||
<div><div class="rc-virtual-list-holder-inner"
|
||
style="display: flex; flex-direction: column;">`
|
||
|
||
for (var option of Object.keys(comands[name].params[key]["options"])) {
|
||
classStr = comands[name].params[key]["options"][option] == userParams[key] ? 'ant-select-item-option-selected' : ''
|
||
comandHtml += `<div aria-selected="true"
|
||
class="ant-select-item ant-select-item-option `+ classStr + `" onclick="setOption(this,'` + comands[name].params[key]['options'][option] + `','` + key + `','` + option + `')">
|
||
<div class="ant-select-item-option-content">
|
||
<div data-v-d25ec045="">`+ option + `</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
comandHtml += ` </div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
} else if ('type' in comands[name].params[key]) {
|
||
if (comands[name].params[key]['type'] == 'number') {
|
||
if(!comand||!(key in comand)){
|
||
userParams[key] = comands[name].params[key]['default']
|
||
}
|
||
otherHtml += `
|
||
<div data-v-fea6429a="" class="aigc-advanced__midexpend--process">`+ comands[name].params[key]['zhName'] + `<div
|
||
data-v-fea6429a=""
|
||
class="ant-input-number aigc-advanced__midexpend--input css-3m4nqy">
|
||
<div class="ant-input-number-input-wrap">
|
||
<input autocomplete="off" oninput="userParams['`+ key + `']=event.target.value"
|
||
role="spinbutton" step="1" type="number" aria-valuemin="`+ comands[name].params[key]['min'] + `" aria-valuemax="` + comands[name].params[key]['max'] + `"
|
||
value="`+ userParams[key] + `" class="ant-input-number-input"></div>
|
||
</div>
|
||
</div>
|
||
`
|
||
} else {
|
||
if(!comand||!(key in comand)){
|
||
userParams[key] = comands[name].params[key]['default']
|
||
}
|
||
otherHtml += `
|
||
<div data-v-fea6429a="" style="white-space: nowrap;" class="aigc-advanced__midexpend--process"> `+ comands[name].params[key]['zhName'] + `
|
||
<input data-v-fea6429a="" type="text" value="`+ userParams[key] + `"
|
||
oninput="userParams['`+ key + `']=event.target.value" class="ant-input css-3m4nqy aigc-advanced__midexpend--input">
|
||
</div>
|
||
`
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
$("#select_container_div").html(comandHtml)
|
||
if (otherHtml != '') {
|
||
$("#other_params_div_id").html(otherHtml)
|
||
$("#other_params_parent_div").show();
|
||
} else {
|
||
$("#other_params_parent_div").hide()
|
||
}
|
||
|
||
//console.log(comands[name].params)
|
||
}
|
||
function setOption(thi,val, key, option) {
|
||
userParams[key] = val
|
||
$("#params_" + key).html(option)
|
||
$(thi).addClass("ant-select-item-option-selected").siblings().removeClass("ant-select-item-option-selected")
|
||
$("#params_" + key + "_options").hide()
|
||
}
|
||
function clickUpload() {
|
||
const myFile = $("#upload_image_input_id")
|
||
// 触发
|
||
myFile.click()
|
||
// 监听change事件
|
||
myFile[0].addEventListener('change', function (e) {
|
||
var filesList = document.querySelector('#upload_image_input_id').files;
|
||
if (filesList.length == 0) { //如果取消上传,则上传文件的长度为0
|
||
console.log("没有上传任何文件");
|
||
return;
|
||
} else {
|
||
//判断div是否显示
|
||
$("#upload_image_btn_parent_id").show()
|
||
$("#upload_image_btn_id").hide()
|
||
$("#upload_image_loading_id").show()
|
||
//如果有文件上传,这在这里面进行
|
||
uploadImage(filesList[0])
|
||
}
|
||
});
|
||
}
|
||
function uploadImage(image) {
|
||
//上传文件
|
||
let formData = new FormData();
|
||
formData.append("image", image, image.name);
|
||
formData.append("overwrite", "true");
|
||
formData.append("type", "input");
|
||
|
||
//发起jquery ajax请求
|
||
$.ajax({
|
||
method: 'post',
|
||
url: '/upload/image',
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
success: function (res) {
|
||
$("#upload_image_btn_parent_id").hide()
|
||
$("#upload_image_preview_parend_id").show()
|
||
//修改div的背景图片
|
||
var url = '../view?filename=' + res.name + '&type=' + res.type + '&subfolder='
|
||
$("#upload_image_preview_id").css("background-image", "url(" + url + ")")
|
||
var host = window.location.host;
|
||
imageUrl = 'http://' + host + url
|
||
userParams['image'] = imageUrl
|
||
console.log(imageUrl);
|
||
}
|
||
})
|
||
}
|
||
function openViewNow(thi){
|
||
var url=$(thi).attr('url')
|
||
var type=$(thi).attr('type')
|
||
var options={'url':url}
|
||
alertWindow(type,options)
|
||
}
|
||
function openView(type,url,prompt_id){
|
||
var options={'url':url,'okName':'应用参数'}
|
||
alertWindow(type,options,function(){
|
||
if(prompt_id){
|
||
if(userParams['status']=='waiting'){
|
||
alertWindow('confirm',{'title':'提示','desc':'任务在队列中请稍候再试。','okName':'确定'})
|
||
}else{
|
||
setComand(historyObj[prompt_id]['command'],historyObj[prompt_id])
|
||
}
|
||
//getHistorys()
|
||
}
|
||
})
|
||
}
|
||
function alertWindow(type,options,okFun,cancelFun){
|
||
$("#pop_frame_div_title_id").html('')
|
||
$("#pop_frame_div_desc_id").html('')
|
||
if(type=='image'){
|
||
$("#pop_frame_div_desc_id").html('<img src="'+options.url+'" style="max-height:500px;">')
|
||
}else if(type=='video'){
|
||
$("#pop_frame_div_desc_id").html('<video src="'+options.url+'" style="width:100%;height:100%;" controls="controls"></video>')
|
||
}else if(type=='confirm'){
|
||
$("#pop_frame_div_title_id").html(options.title)
|
||
$("#pop_frame_div_desc_id").html(options.desc)
|
||
}
|
||
if('okName' in options){
|
||
$("#pop_frame_div_btn_ok_id").html(options.okName)
|
||
$("#pop_frame_div_btn_ok_id").show();
|
||
$("#pop_frame_div_btn_ok_id").click(function(){
|
||
$("#pop_frame_div_parent_id").hide();
|
||
if(okFun){
|
||
okFun();
|
||
}
|
||
})
|
||
}else{
|
||
$("#pop_frame_div_btn_ok_id").hide();
|
||
}
|
||
if('cancelName' in options){
|
||
$("#pop_frame_div_btn_cancel_id").html(options.cancelName)
|
||
$("#pop_frame_div_btn_cancel_id").show();
|
||
$("#pop_frame_div_btn_cancel_id").click(function(){
|
||
$("#pop_frame_div_parent_id").hide();
|
||
if(cancelFun){
|
||
cancelFun();
|
||
}
|
||
})
|
||
}else{
|
||
$("#pop_frame_div_btn_cancel_id").hide();
|
||
}
|
||
$("#pop_frame_div_parent_id").show();
|
||
}
|
||
function addTask(){ //提交任务
|
||
$("#add_task_btn_id").addClass('disable');
|
||
let formData = new FormData();
|
||
for (const key in userParams) {
|
||
if (Object.hasOwnProperty.call(userParams, key)) {
|
||
const element = userParams[key];
|
||
if(element){
|
||
formData.append(key, element)
|
||
}
|
||
}
|
||
}
|
||
$.ajax({
|
||
method: 'post',
|
||
url: '../wechatauth/addTask',
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
success: function (res) {
|
||
console.log(res)
|
||
if(res.success){
|
||
userParams['prompt_id']=res.prompt_id
|
||
userParams['status']='waiting'
|
||
$("#loading_text_id").attr('lineup','true')
|
||
$("#loading_text_id").html('排队中请等待')
|
||
$("#no_add_task_div").hide()
|
||
$("#wcomplete_add_task_div").hide()
|
||
$("#yes_add_task_div").show()
|
||
}
|
||
alertWindow('confirm',{'title':'提示','desc':res.msg,'okName':'确定'})
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |