diff --git a/web/index.html b/web/index.html
index 36e82e0..1b9e91c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -93,15 +93,15 @@
min-width: none !important;
}
- .apps{
+ .apps {
margin: 20px !important;
- padding:0 !important;
+ padding: 0 !important;
}
.panel {
- min-width: 100%!important;
- margin: 12px 0!important;
- width: fit-content!important;
+ min-width: 100% !important;
+ margin: 12px 0 !important;
+ width: fit-content !important;
}
.apps .card,
@@ -120,10 +120,10 @@
margin: 8px 0;
}
- .run_btn {
- width: 100%;
- max-width: none;
- margin-top: 12px;
+ .main_btn {
+ width: 100% !important;
+ max-width: none !important;
+ margin-top: 12px !important;
}
.status {
@@ -159,6 +159,7 @@
.app .panel {
flex: none;
+ width: 66%;
}
.max_view {
@@ -285,7 +286,8 @@
font-size: 12px;
margin-top: 4px;
}
- .detail .content{
+
+ .detail .content {
margin-top: 6px;
}
@@ -434,21 +436,62 @@
justify-content: space-between;
}
- .run_btn {
- background: black;
- color: white;
- /* width: calc(50% - 100px); */
- min-width: 200px;
- max-width: 460px;
- height: 48px;
- border-radius: 8px;
+
+ /* icon_btn样式 */
+ .icon_btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 56px !important;
+ min-width: 56px !important;
+ height: 40px !important;
+ /* 可根据需要调整高度 */
+ background-color: transparent !important;
+ /* 透明背景色 */
+ color: black !important;
+ /* 按钮文字或图标颜色 */
+ border: none !important;
+ /* 圆角 */
cursor: pointer;
- border: 3px solid;
+ /* 鼠标悬停时显示手型光标 */
+ transition: background-color 0.3s, color 0.3s;
+ /* 背景色和颜色过渡效果 */
+ }
+
+ .icon_btn:hover {
+ background-color: rgb(234, 235, 152) !important;
+ /* 悬浮时的背景色 */
+ color: black !important;
+ /* 悬浮时的图标颜色 */
+ }
+
+ .icon_btn svg {
+ fill: none;
+ /* 无填充色 */
+ stroke: currentColor;
+ /* 使用当前文本颜色描边 */
+ width: 24px;
+ /* SVG宽度 */
+ height: 24px;
+ /* SVG高度 */
}
- .run_btn:hover {
+
+ .main_btn {
+ background: black !important;
+ color: white !important;
+ /* width: calc(50% - 100px); */
+ min-width: 200px !important;
+ max-width: 460px !important;
+ height: 48px !important;
+ border-radius: 8px !important;
+ cursor: pointer !important;
+ border: 3px solid !important;
+ }
+
+ .main_btn:hover {
border-color: yellow !important;
- cursor: pointer;
+ cursor: pointer !important;
}
#author {
@@ -518,6 +561,15 @@
font-weight: 300;
}
+ label {
+ margin-bottom: 12px;
+ font-weight: 300;
+ background: #fcfcd3;
+ width: fit-content;
+ padding: 0 12px;
+ font-size: 12px;
+ }
+
label::after {
content: attr(data-content);
/* Set the initial content using the data-content attribute */
@@ -658,6 +710,22 @@
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
+ const uploadImageIcon = `
+`;
+ const clipboardIcon = ``
+ const editIcon = `
+
+`
//给load image to batch节点使用的输入
function createBase64ImageForLoadImageToBatch(imageElement, nodeId, bs) {
let im = new Image()
@@ -1437,8 +1505,13 @@
// Create an input field for the image name
const uploadImageInput = document.createElement("button");
- uploadImageInput.style = `width: 88px;`;
- uploadImageInput.innerText = 'upload'
+ uploadImageInput.style = `width: 56px; min-width: 56px !important`;
+ uploadImageInput.title = 'Upload image'; // 悬浮提示
+ uploadImageInput.className = "icon_btn";
+
+ // 添加 SVG 图标
+ uploadImageInput.innerHTML = uploadImageIcon;
+
const uploadImageInputHide = document.createElement('input');
uploadImageInputHide.type = "file";
uploadImageInputHide.style.display = "none"
@@ -1446,14 +1519,18 @@
actionDiv.appendChild(uploadImageInputHide);
const btnFromClipboard = document.createElement("button");
- btnFromClipboard.style = `width: 156px; margin-left: 18px;`
- btnFromClipboard.innerText = 'paste from clipboard'
+ btnFromClipboard.style = `width: 56px;min-width:56px!important; margin-left: 12px;`
+ btnFromClipboard.title = 'Paste from clipboard'; // 悬浮提示
+ btnFromClipboard.className = "icon_btn";
+ btnFromClipboard.innerHTML = clipboardIcon;
+
+
if (!isVideoUpload) actionDiv.appendChild(btnFromClipboard);
const btnForImageEdit = document.createElement("button");
btnForImageEdit.style = ` width: 32px; background: none;margin-left: 18px;`
- btnForImageEdit.innerHTML = ''
-
+ btnForImageEdit.className = "icon_btn";
+ btnForImageEdit.innerHTML = editIcon;
// mask有输出，才有编辑mask功能
if (!isVideoUpload
&& !isBase64Upload
@@ -2505,7 +2582,7 @@
const promptButton = document.createElement('button');
promptButton.textContent = 'Create';
- promptButton.className = 'run_btn'
+ promptButton.className = 'main_btn'
submitDiv.appendChild(promptButton);