uweb/en/searchurl/bingAI/draw.html
2023-05-09 21:56:08 +08:00

45 lines
1.3 KiB
HTML

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title id="docTitle">Draw</title>
<link rel="stylesheet" href="./css/DrawImg.css">
</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>
<script type="module">
import generateImages from "./js/module/generateImages.js";
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>