add bingAI draw

This commit is contained in:
James Feng Cao 2023-05-09 21:56:08 +08:00
parent e4906dfd26
commit a413b5f1d0
4 changed files with 120 additions and 3 deletions

View file

@ -102,7 +102,7 @@
</div> </div>
<p>Last Modified: 8 May 2023<br> <p>Last Modified: 8 May 2023<br>
supports hosts<br> add gissues<br>
<pre></pre> <pre></pre>
</p> </p>
<script> <script>

View file

@ -0,0 +1,45 @@
<!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>

View file

@ -0,0 +1,72 @@
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
/**
* @param text 生成图像的描述
* @param requestId 请求id如果不是对话生成图片可以为undefined
* @param countF 回调函数获取当前是第几次请求
* @return [...{img:url,mImg:url}...] img:图片url mIng:缩略图url
* */
export default async function generateImages(text,requestId,countF){
let theUrls = new URLSearchParams();
theUrls.append('re', '1');
theUrls.append('showselective', '1');
theUrls.append('sude', '1');
theUrls.append('kseed', '7500');
theUrls.append('SFX', '2');
theUrls.append('q', text);
theUrls.append('iframeid', requestId);
let theUrl = `${window.location.origin}/images/create?${theUrls.toString()}`;
let response = await fetch(theUrl);
let html = (await response.text());
let cookieID = response.headers.get('cookieID');
//如果返回的是有错误的页面
let urr = new RegExp('class="gil_err_mt">([^<>]*)</div>').exec(html);
if(urr && urr[1]){
let error = `<h3>${urr[1]}</h3>`;
urr = new RegExp('class="gil_err_sbt">(([^<>]*<(a|div)[^<>]*>[^<>]*</(a|div)>[^<>]*)*)</div>').exec(html);
if(urr && urr[1]){
error = error+`<p>${urr[1]}</p>`;
}
throw new Error(error);
}
//如果没错误就匹配链接获取图片
urr = new RegExp('"/(images/create/async/results/(\\S*))"').exec(html);
if(!urr || !urr[1]){
console.log(html);
throw new Error("请求图片返回不正确的页面,无法加载图片。");
}
let ur = urr[1];
ur = ur.replaceAll('&amp;','&');
let imgPageHtmlUrl = `${window.location.origin}/${ur}`;
for(let count = 1;count<=20;count++){
if((!!countF)&&(typeof countF =='function')){
countF(count);
}
await sleep(3000);
let imgPageHtml;
try{
imgPageHtml = (await (await fetch(imgPageHtmlUrl,{headers:{"cookieID":cookieID}})).text());
}catch(e){
console.error(e);
}
if(!imgPageHtml){
continue;
}
//用正则找全部图片
let allSrc = imgPageHtml.matchAll(/<img[^<>]*src="([^"]*)"[^<>]*>/g);
let imgs = [];
for(let src;!(src=allSrc.next()).done;){
imgs[imgs.length] = {
img:src.value[1].split('?')[0],
mImg:src.value[1].replaceAll('&amp;','&')
}
}
if(imgs.length>0){
return imgs;
}else{
throw new Error("服务器未正常返回图片!");
}
}
}

View file

@ -41,10 +41,10 @@
attrs.description = descriptionMeta ? descriptionMeta.content : ''; attrs.description = descriptionMeta ? descriptionMeta.content : '';
let ogtitleMeta = document.querySelector("meta[property='og:title'],meta[name='og:title']"); let ogtitleMeta = document.querySelector("meta[property='og:title'],meta[name='og:title']");
attrs['og:title'] = ogtitleMeta ? ogtitleMeta.content : ''; attrs['og:title'] = ogtitleMeta ? ogtitleMeta.content : '';
document.head.insertAdjacentHTML('afterbegin', "<style>.Gissues{position:relative;box-sizing:border-box;width:100%;max-width:760px;margin-left:auto;margin-right:auto;}.Gissues-frame{position:absolute;left:0;right:0;width:1px;min-width:100%;max-width:100%;height:100%;border:0;}</style>"); document.head.insertAdjacentHTML('afterbegin', "<style>.Gissues{position:relative;box-sizing:border-box;width:100%;margin-left:auto;margin-right:auto;}.Gissues-frame{position:absolute;left:0;right:0;width:1px;min-width:100%;max-width:100%;height:100%;border:0;}</style>");
let Origin = "https://gissues.gitee.io"; let Origin = "https://gissues.gitee.io";
let url = Origin + "/Gissues.html"; let url = Origin + "/Gissues.html";
script.insertAdjacentHTML('afterend', "<div class=\"Gissues\">\n <iframe class=\"Gissues-frame\" title=\"Comments\" scrolling=\"no\" src=\"" + url + "?" + (0, param)(attrs) + "\"></iframe>\n </div>"); script.insertAdjacentHTML('afterend', "<div class='Gissues'><iframe class='Gissues-frame' title='Comments' scrolling='no' src='" + url + "?" + (0, param)(attrs) + "'></iframe></div>");
let container = script.nextElementSibling; let container = script.nextElementSibling;
script.parentElement.removeChild(script); script.parentElement.removeChild(script);
addEventListener('message', function (event) { addEventListener('message', function (event) {