Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@shadowcz007
shadowcz007 committed Aug 11, 2024
1 parent 164791c commit b8f7c31
Showing 1 changed file with 105 additions and 28 deletions.
133 changes: 105 additions & 28 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -159,6 +159,7 @@

.app .panel {
flex: none;
width: 66%;
}

.max_view {
Expand Down Expand Up @@ -285,7 +286,8 @@
font-size: 12px;
margin-top: 4px;
}
.detail .content{

.detail .content {
margin-top: 6px;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -658,6 +710,22 @@
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'


const uploadImageIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7 10 12 5 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="5" x2="12" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`;
const clipboardIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="3" width="14" height="18" rx="2" ry="2"/>
<path d="M9 3h6a2 2 0 0 1 2 2v1H7V5a2 2 0 0 1 2-2z"/>
</svg>`
const editIcon = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9"/>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19H4v-3L16.5 3.5z"/>
</svg>
`
//给load image to batch节点使用的输入
function createBase64ImageForLoadImageToBatch(imageElement, nodeId, bs) {
let im = new Image()
Expand Down Expand Up @@ -1437,23 +1505,32 @@

// 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"
actionDiv.appendChild(uploadImageInput);
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 = '<?xml version="1.0" ?><svg version="1.1" style="width: 24px;" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_1_"><path d="M18.293,31.707h6.414l24-24l-6.414-6.414l-24,24V31.707z M45.879,7.707l-3.586,3.586l-3.586-3.586l3.586-3.586 L45.879,7.707z M20.293,26.121l17-17l3.586,3.586l-17,17h-3.586V26.121z"/><polygon points="43.293,19.707 41.293,19.707 41.293,46.707 3.293,46.707 3.293,8.707 31.293,8.707 31.293,6.707 1.293,6.707 1.293,48.707 43.293,48.707 "/></g></svg>'

btnForImageEdit.className = "icon_btn";
btnForImageEdit.innerHTML = editIcon;
// mask有输出，才有编辑mask功能
if (!isVideoUpload
&& !isBase64Upload
Expand Down Expand Up @@ -2505,7 +2582,7 @@

const promptButton = document.createElement('button');
promptButton.textContent = 'Create';
promptButton.className = 'run_btn'
promptButton.className = 'main_btn'

submitDiv.appendChild(promptButton);

Expand Down

0 comments on commit b8f7c31

Please sign in to comment.