Spaces:

lnyan
/

stablediffusion-infinity

Runtime error

App Files Files Community

stablediffusion-infinity / index.html

lnyan

Fix upload

cf9f7d8 over 1 year ago

raw history blame

No virus

6.48 kB

	<html>
	<head>
	<title>Stablediffusion Infinity</title>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="./favicon.png">
	<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
	<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
	<style>
	#container {
	position: relative;
	margin:auto;
	}
	#container > canvas {
	position: absolute;
	top: 0;
	left: 0;
	}
	.control {
	display: none;
	}
	</style>

	</head>
	<body>
	<div>
	<button type="button" class="control" id="export">Export</button>
	<button type="button" class="control" id="outpaint">Outpaint</button>
	<button type="button" class="control" id="undo">Undo</button>
	<button type="button" class="control" id="commit">Commit</button>
	<button type="button" class="control" id="transfer">Transfer</button>
	<button type="button" class="control" id="upload">Upload</button>
	<button type="button" class="control" id="draw">Draw</button>
	<input type="text" id="mode" value="✥" class="control">
	<input type="text" id="setup" value="0" class="control">
	<textarea rows="1" id="selbuffer" name="selbuffer" class="control"></textarea>
	<fieldset class="control">
	<div>
	<input type="radio" id="mode0" name="mode" value="0" checked>
	<label for="mode0">SelBox</label>
	</div>
	<div>
	<input type="radio" id="mode1" name="mode" value="1">
	<label for="mode1">Image</label>
	</div>
	<div>
	<input type="radio" id="mode2" name="mode" value="2">
	<label for="mode2">Brush</label>
	</div>
	</fieldset>
	</div>
	<div>
	<div id = "container">
	<canvas id = "canvas0"></canvas>
	<canvas id = "canvas1"></canvas>
	<canvas id = "canvas2"></canvas>
	<canvas id = "canvas3"></canvas>
	<canvas id = "canvas4"></canvas>
	</div>
	</div>
	<py-env>
	- numpy
	- Pillow
	- paths:
	- ./canvas.py
	</py-env>

	<py-script>
	from pyodide import to_js, create_proxy
	from PIL import Image
	import io
	import time
	import base64
	import numpy as np
	from js import (
	console,
	document,
	parent,
	devicePixelRatio,
	ImageData,
	Uint8ClampedArray,
	CanvasRenderingContext2D as Context2d,
	requestAnimationFrame,
	window
	)


	from canvas import InfCanvas



	base_lst = [None]
	async def draw_canvas() -> None:
	width=1500
	height=600
	canvas=InfCanvas(1500,600)
	document.querySelector("#container").style.width = f"{width}px"
	canvas.setup_mouse()
	canvas.clear_background()
	canvas.draw_buffer()
	canvas.draw_selection_box()
	base_lst[0]=canvas

	async def draw_canvas_func(event):
	try:
	width=parent.document.querySelector("gradio-app").querySelector("#canvas_width input").value
	height=parent.document.querySelector("gradio-app").querySelector("#canvas_height input").value
	selection_size=parent.document.querySelector("gradio-app").querySelector("#selection_size input").value
	except:
	width=1024
	height=768
	selection_size=384
	document.querySelector("#container").style.width = f"{width}px"
	canvas=InfCanvas(int(width),int(height),selection_size=int(selection_size))
	canvas.setup_mouse()
	canvas.clear_background()
	canvas.draw_buffer()
	canvas.draw_selection_box()
	base_lst[0]=canvas

	async def export_func(event):
	base=base_lst[0]
	arr=base.export()
	base64_str = base.numpy_to_base64(arr)
	time_str = time.strftime("%Y%m%d_%H%M%S")
	console.log(f"Canvas saved to outpaint_{time_str}.png")
	link = document.createElement("a")
	link.download = f"outpaint_{time_str}.png"
	link.href = "data:image/png;base64,"+base64_str
	link.click()

	async def outpaint_func(event):
	base=base_lst[0]
	base64_str=event.data[1]
	arr=base.base64_to_numpy(base64_str)
	base.fill_selection(arr)
	base.draw_selection_box()

	async def undo_func(event):
	base=base_lst[0]
	if base.sel_dirty:
	base.canvas[2].clear()
	base.sel_buffer = base.sel_buffer_bak.copy()
	base.sel_dirty = False

	async def commit_func(event):
	base=base_lst[0]
	if base.sel_dirty:
	base.write_selection_to_buffer()

	async def transfer_func(event):
	base=base_lst[0]
	base.read_selection_from_buffer()
	sel_buffer=base.sel_buffer
	sel_buffer_str=base.numpy_to_base64(sel_buffer)
	parent.postMessage(to_js(["transfer",str(sel_buffer_str)]),"*")

	async def upload_func(event):
	base=base_lst[0]
	base64_str=event.data[1]
	arr=base.base64_to_numpy(base64_str)
	h,w,_=arr.shape
	yo=(base.height-h)//2
	xo=(base.width-w)//2
	if base.sel_dirty:
	base.canvas[2].clear()
	base.sel_buffer = base.sel_buffer_bak.copy()
	base.sel_dirty = False
	base.buffer_dirty=True
	base.buffer*=0
	base.buffer[yo:yo+h,xo:xo+w,0:3]=arr[:,:,0:3]
	base.buffer[yo:yo+h,xo:xo+w,-1]=arr[:,:,-1]
	base.draw_buffer()



	document.querySelector("#export").addEventListener("click",create_proxy(export_func))
	document.querySelector("#undo").addEventListener("click",create_proxy(undo_func))
	document.querySelector("#commit").addEventListener("click",create_proxy(commit_func))
	document.querySelector("#outpaint").addEventListener("click",create_proxy(outpaint_func))
	document.querySelector("#upload").addEventListener("click",create_proxy(upload_func))

	document.querySelector("#transfer").addEventListener("click",create_proxy(transfer_func))
	document.querySelector("#draw").addEventListener("click",create_proxy(draw_canvas_func))

	async def setup_func():
	document.querySelector("#setup").value="1"

	async def message_func(event):
	if event.data[0]=="click":
	if event.data[1]=="export":
	await export_func(event)
	elif event.data[1]=="commit":
	await commit_func(event)
	elif event.data[1]=="undo":
	await undo_func(event)
	elif event.data[0]=="upload":
	await upload_func(event)
	elif event.data[0]=="outpaint":
	await outpaint_func(event)
	elif event.data[0]=="mode":
	document.querySelector("#mode").value=event.data[1]
	elif event.data[0]=="transfer":
	await transfer_func(event)

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

	_ = await asyncio.gather(
	setup_func(),draw_canvas()
	)
	</py-script>

	</body>
	</html>