draw.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html><html lang="en"><head>
  2. <meta charset="UTF-8">
  3. <base href="https://jamesfengcao.codeberg.page/en/searchurl/bingAI/">
  4. <title id="docTitle">Draw</title>
  5. <link rel="stylesheet" href="./css/DrawImg.css">
  6. <script>
  7. function getMagicUrl() {
  8. let v = localStorage.GoGoUrl;
  9. if(v && v.startsWith("http")) return v;
  10. return "https://mybing2.xn--xyza.top/";
  11. }
  12. const magicUrl = getMagicUrl();
  13. </script>
  14. <script type="text/javascript" src="./js/generateImages.js"></script>
  15. </head>
  16. <body>
  17. <div id="DrawDiv">
  18. <div id="DrawInputDiv">
  19. <textarea id="inputDraw" placeholder="Describe your image" ></textarea>
  20. <input id="startDraw" type="button" value="Draw" onClick="draw()">
  21. </div>
  22. <div id="imgs">
  23. </div>
  24. </div>
  25. <script>
  26. const inputDraw = document.getElementById('inputDraw');
  27. const imgsDiv = document.getElementById('imgs');
  28. async function draw() {
  29. let text = inputDraw.value;
  30. try {
  31. imgsDiv.innerText = `正在生成'${text}'图片,请稍等..`;
  32. imgs = await generateImages(text,undefined,(v)=>{
  33. imgsDiv.innerText = `正在生成'${text}'图片,请稍等..${v}`;
  34. });
  35. }catch (error){}
  36. imgsDiv.innerHTML = '';
  37. imgs.forEach((v)=>{
  38. let img = document.createElement('img');
  39. img.src = v.mImg;
  40. imgsDiv.appendChild(img);
  41. img.onclick = ()=>{
  42. window.open(v.img);
  43. }
  44. //在低分辨率图片加载完成后替换成高分辨率图片
  45. img.onload = ()=>{
  46. img.onload = undefined;
  47. img.src = v.img;
  48. }
  49. });
  50. }
  51. </script>
  52. </body>
  53. </html>