2023-05-09 13:56:08 +00:00
|
|
|
<!DOCTYPE html><html lang="en"><head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title id="docTitle">Draw</title>
|
|
|
|
|
<link rel="stylesheet" href="./css/DrawImg.css">
|
2023-05-09 15:00:28 +00:00
|
|
|
<script type="text/javascript" src="./js/generateImages.js"></script>
|
2023-05-09 13:56:08 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="DrawDiv">
|
|
|
|
|
<div id="DrawInputDiv">
|
|
|
|
|
<textarea id="inputDraw" placeholder="Describe your image" ></textarea>
|
|
|
|
|
<input id="startDraw" type="button" value="Draw" onClick="draw()">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="imgs">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-05-09 15:00:28 +00:00
|
|
|
<script>
|
|
|
|
|
async function getMagicUrl() {
|
|
|
|
|
let v = localStorage.GoGoUrl;
|
|
|
|
|
if(v && v.startsWith("http")) return v;
|
|
|
|
|
return "https://mybing2.xn--xyza.top/";
|
|
|
|
|
}
|
|
|
|
|
const magicUrl = getMagicUrl();
|
2023-05-09 13:56:08 +00:00
|
|
|
const inputDraw = document.getElementById('inputDraw');
|
|
|
|
|
const imgsDiv = document.getElementById('imgs');
|
|
|
|
|
async function draw() {
|
|
|
|
|
let text = inputDraw.value;
|
|
|
|
|
try {
|
|
|
|
|
imgsDiv.innerText = `正在生成'${text}'图片，请稍等..`;
|
|
|
|
|
imgs = await generateImages(text,undefined,(v)=>{
|
|
|
|
|
imgsDiv.innerText = `正在生成'${text}'图片，请稍等..${v}`;
|
|
|
|
|
});
|
|
|
|
|
}catch (error){}
|
|
|
|
|
imgsDiv.innerHTML = '';
|
|
|
|
|
imgs.forEach((v)=>{
|
|
|
|
|
let img = document.createElement('img');
|
|
|
|
|
img.src = v.mImg;
|
|
|
|
|
imgsDiv.appendChild(img);
|
|
|
|
|
img.onclick = ()=>{
|
|
|
|
|
window.open(v.img);
|
|
|
|
|
}
|
|
|
|
|
//在低分辨率图片加载完成后替换成高分辨率图片
|
|
|
|
|
img.onload = ()=>{
|
|
|
|
|
img.onload = undefined;
|
|
|
|
|
img.src = v.img;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
