mirror of
https://github.com/torappinfo/uweb.git
synced 2024-08-14 23:54:59 +00:00
46 lines
1.3 KiB
HTML
46 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>
|