Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update toolbar layout #196

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Update toolbar layout #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5a1a0b
Update toolbar layout
U1coo May 16, 2023
2476474
Update toolbar layout
U1coo May 16, 2023
b5e3c53
Update toolbar layout
U1coo May 16, 2023
28a6454
Update toolbar layout
U1coo May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions css/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#outer_container {
display: flex;
padding: 40px;
}

#toolbar {
width: 220px;
}
15 changes: 9 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/fabric.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/toolbar.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/U1coo/stablediffusion-infinity@0.0.1/js/toolbar.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/U1coo/stablediffusion-infinity@0.0.1/css/toolbar.css">

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Expand All @@ -23,6 +25,7 @@
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.control {
display: none;
Expand Down Expand Up @@ -180,7 +183,7 @@
canvas.draw_buffer()
canvas.draw_selection_box()
base_lst[0]=canvas

async def export_func(event):
base=base_lst[0]
arr=base.export()
Expand Down Expand Up @@ -254,7 +257,7 @@
if state is not None:
base.load(state)
update_undo_redo(*history.check())

async def history_setup_func(event):
base=base_lst[0]
history.undo_lst.clear()
Expand Down Expand Up @@ -306,7 +309,7 @@

async def setup_shortcut_func(event):
setup_shortcut(event.data[1])


document.querySelector("#export").addEventListener("click",create_proxy(export_func))
document.querySelector("#undo").addEventListener("click",create_proxy(undo_func))
Expand All @@ -323,7 +326,7 @@
async def reset_func(event):
base=base_lst[0]
base.reset()

async def load_func(event):
base=base_lst[0]
base.load(event.data[1])
Expand Down Expand Up @@ -468,7 +471,7 @@
await setup_shortcut_func(event)
elif event.data[0]=="resize":
await resize_func(event)

window.addEventListener("message",create_proxy(message_func))

import asyncio
Expand Down
31 changes: 18 additions & 13 deletions js/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,18 +120,21 @@ var toolbar=new w2toolbar({
{ type: "button", id: "load", tooltip: "Load Canvas", icon: "fa-solid fa-file-import" },
{ type: "button", id: "save", tooltip: "Save Canvas", icon: "fa-solid fa-file-export" },
{ type: "button", id: "export", tooltip: "Export Image", icon: "fa-solid fa-floppy-disk" },
{ type: "break" },
{ type: "new-line"},
{ type: "button", id: "upload", text: "Upload Image", icon: "fa-solid fa-upload" },
{ type: "break" },
{ type: "radio", id: "selection", group: "1", tooltip: "Selection", icon: "fa-solid fa-arrows-up-down-left-right", checked: true },
{ type: "new-line"},
{ type: "radio", id: "canvas", group: "1", tooltip: "Canvas", icon: "fa-solid fa-image" },
{ type: "radio", id: "eraser", group: "1", tooltip: "Eraser", icon: "fa-solid fa-eraser" },
{ type: "break" },
{ type: "button", id: "outpaint", text: "Outpaint", tooltip: "Run Outpainting", icon: "fa-solid fa-brush" },
{ type: "new-line"},
{ type: "button", id: "interrogate", text: "Interrogate", tooltip: "Get a prompt with Clip Interrogator ", icon: "fa-solid fa-magnifying-glass" },
{ type: "break" },
{ type: "button", id: "accept", text: "Accept", tooltip: "Accept current result", icon: "fa-solid fa-check", hidden: true, disabled:true,},
{ type: "button", id: "cancel", text: "Cancel", tooltip: "Cancel current outpainting/error", icon: "fa-solid fa-ban", hidden: true},
{ type: "break" },
{ type: "button", id: "retry", text: "Retry", tooltip: "Retry", icon: "fa-solid fa-rotate", hidden: true, disabled:true,},
{ type: "button", id: "prev", tooltip: "Prev Result", icon: "fa-solid fa-caret-left", hidden: true, disabled:true,},
{ type: "html", id: "current", hidden: true, disabled:true,
Expand All @@ -148,11 +151,11 @@ var toolbar=new w2toolbar({
{ type: "button", id: "next", tooltip: "Next Result", icon: "fa-solid fa-caret-right", hidden: true,disabled:true,},
{ type: "button", id: "add_image", text: "Add Image", icon: "fa-solid fa-file-circle-plus", hidden: true,disabled:true,},
{ type: "button", id: "delete_image", text: "Delete Image", icon: "fa-solid fa-trash-can", hidden: true,disabled:true,},
// { type: "button", id: "resize_eraser", tooltip: "Resize Eraser", icon: "fa-solid fa-sliders" },
{ type: "new-line"},
{ type: "button", id: "resize_selection", text: "Resize Selection", tooltip: "Resize Selection", icon: "fa-solid fa-expand" },
{ type: "button", id: "confirm", text: "Confirm", icon: "fa-solid fa-check", hidden: true,disabled:true,},
{ type: "button", id: "cancel_overlay", text: "Cancel", icon: "fa-solid fa-ban", hidden: true,disabled:true,},
{ type: "break" },
{ type: "spacer" },
{ type: "break" },
{ type: "button", id: "eraser_size_btn", tooltip: "Eraser Size", text:"Size", icon: "fa-solid fa-eraser", hidden: true, count: 32},
{ type: "html", id: "eraser_size", hidden: true,
async onRefresh(event) {
Expand All @@ -173,9 +176,7 @@ var toolbar=new w2toolbar({
query(this.box).find("#tb_toolbar_item_eraser_size").append(fragment)
}
},
// { type: "button", id: "resize_eraser", tooltip: "Resize Eraser", icon: "fa-solid fa-sliders" },
{ type: "button", id: "resize_selection", text: "Resize Selection", tooltip: "Resize Selection", icon: "fa-solid fa-expand" },
{ type: "break" },
{ type: "new-line"},
{ type: "html", id: "scale",
async onRefresh(event) {
await event.complete
Expand All @@ -193,17 +194,20 @@ var toolbar=new w2toolbar({
{ type: "button", id: "help", tooltip: "Help", icon: "fa-solid fa-circle-info" },
{ type: "new-line"},
{ type: "button", id: "setting", text: "Canvas Setting", tooltip: "Resize Canvas Here", icon: "fa-solid fa-sliders" },
{ type: "break" },
{ type: "new-line"},
check_button("enable_history","Enable History:",false, "Enable Canvas History"),
{ type: "button", id: "undo", tooltip: "Undo last erasing/last outpainting", icon: "fa-solid fa-rotate-left", disabled: true },
{ type: "button", id: "redo", tooltip: "Redo", icon: "fa-solid fa-rotate-right", disabled: true },
{ type: "break" },
{ type: "new-line"},
check_button("enable_img2img","Enable Img2Img",false),
{ type: "new-line"},
// check_button("use_correction","Photometric Correction",false),
check_button("resize_check","Resize Small Input",true),
{ type: "new-line"},
check_button("enable_safety","Enable Safety Checker",true),
{ type: "new-line"},
check_button("square_selection","Square Selection Only",false),
{type: "break"},
{ type: "new-line"},
check_button("use_seed","Use Seed:",false),
{ type: "html", id: "seed_val",
async onRefresh(event) {
Expand All @@ -218,6 +222,7 @@ var toolbar=new w2toolbar({
query(this.box).find("#tb_toolbar_item_seed_val").append(fragment)
}
},
{ type: "new-line"},
{ type: "button", id: "random_seed", tooltip: "Set a random seed", icon: "fa-solid fa-dice" },
],
onClick(event) {
Expand Down Expand Up @@ -503,7 +508,7 @@ function onObjectMoved(e)
{
let object = e.target;
if(object.isType("rect"))
{
{
let l=Math.max(Math.min(object.left,window.overlay.width-object.width-object.strokeWidth),0);
let t=Math.max(Math.min(object.top,window.overlay.height-object.height-object.strokeWidth),0);
object.set({left:l,top:t});
Expand Down Expand Up @@ -546,7 +551,7 @@ window.adjust_selection=function(x,y,width,height)
left: x,
top: y,
fill: "rgba(0,0,0,0)",
strokeWidth: 3,
strokeWidth: 3,
stroke: "rgba(0,0,0,0.7)",
cornerColor: "red",
cornerStrokeColor: "red",
Expand Down Expand Up @@ -656,4 +661,4 @@ window.update_undo_redo=function(s0,s1)
}
window.undo_redo_state.undo=s0;
window.undo_redo_state.redo=s1;
}
}