From 14b4d3cdf47a0d5ab51876ba6f903f88031d5fb0 Mon Sep 17 00:00:00 2001
From: ikechan8370 <geyinchibuaa@gmail.com>
Date: Sat, 1 Apr 2023 22:42:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bing=E7=BB=98=E5=9B=BE=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/help/help.html | 96 ++++++++++++++++++++++++++++++++--------
 utils/BingDraw.js        |  5 +++
 2 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/resources/help/help.html b/resources/help/help.html
index b595d2d..85e8b60 100644
--- a/resources/help/help.html
+++ b/resources/help/help.html
@@ -10,23 +10,40 @@
     ChatGPT-Plugin v2.4.9 帮助
   </div>
   <div class="chart" id="chart">
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
-    <div class="block"></div>
+    <div class="chart-category">
+      聊天
+    </div>
+    <div class="chart-right" id="chart-right">
+      <div class="block">
+        <div class="icon">
+          <img src="../img/icon/chat.png">
+        </div>
+        <div class="block-title">
+          与机器人聊天
+        </div>
+        <div class="block-content">
+          @机器人进行聊天，或者使用前缀#chat
+        </div>
+
+      </div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+      <div class="block"></div>
+    </div>
+
   </div>
 </div>
 </body>
 </html>
 <style>
   .container {
-    width: 700px;
+    width: 830px;
     background: #6B84FF;
     border-radius: 5px;
     background: url("../img/icon/chatgpt.png");
@@ -46,12 +63,12 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 30px;
-
   }
   .chart {
+    display: flex;
     border-radius: 5px;
-    width: 620px;
-    margin-left: 45px;
+    width: 675px;
+    margin-left: 75px;
     background: inherit;
     min-height: 800px;
     overflow: hidden;
@@ -59,14 +76,31 @@
     box-shadow: 0 0 15px 15px #d8e1ff;
     /*filter: blur(10px);*/
   }
+  .chart-category {
+    width: 60px;
+    font-size: 20px;
+    color: #ffffff;
+    text-align: center;
+    height: 317px;
+    font-weight: bold;
+    border-bottom: #b7c7ff solid 2px;
+    /*border-right: #b7c7ff solid 2px;*/
+    padding-top: 290px;
+    /*box-shadow: 0 0 3px 3px #d8e1ff;*/
+  }
+  .chart-right {
+    width: 620px;
+    position: absolute;
+    left: 60px;
+  }
   .chart:before {
     border-radius: 5px;
     content: '';
-    width: 630px;
+    width: 6360px;
     height: 100%;
     background: inherit;
     position: absolute;
-    left: 35px;
+    left: 75px;
     /*right: 0;*/
     top: 100px;
     /*bottom: 0;*/
@@ -79,12 +113,38 @@
     height: 200px;
     border: #b7c7ff solid 2px;
     position: absolute;
-    box-shadow: 0 0 3px 3px #d8e1ff;
+    /*box-shadow: 0 0 3px 3px #d8e1ff;*/
     /*border-radius: 2px;*/
   }
+
+  .icon {
+    width: 50px;
+    text-align: center;
+    margin: auto;
+    padding-top: 20px;
+  }
+  .icon img {
+    width: 50px;
+  }
+  .block-title {
+    font-size: 18px;
+    text-align: center;
+    color: #ffffff;
+    margin-top: 10px;
+    font-weight: bold;
+  }
+  .block-content {
+    font-weight: bold;
+    color: #ffffff;
+    padding-top: 10px;
+    width: 90%;
+    margin: auto;
+    font-size: 14px;
+    text-align: center;
+  }
 </style>
 <script>
-  const chart = document.getElementById('chart');
+  const chart = document.getElementById('chart-right');
   const block = chart.querySelectorAll('.block');
 
   const chartWidth = chart.offsetWidth;
diff --git a/utils/BingDraw.js b/utils/BingDraw.js
index 02df1d4..38578c7 100644
--- a/utils/BingDraw.js
+++ b/utils/BingDraw.js
@@ -66,7 +66,11 @@ export default class BingDrawClient {
     logger.info({ pollingUrl })
     logger.info('waiting for bing draw results...')
     let timeoutTimes = 50
+    let found = false
     let timer = setInterval(async () => {
+      if (found) {
+        return
+      }
       let r = await fetch(pollingUrl, {
         headers: {
           accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
@@ -83,6 +87,7 @@ export default class BingDrawClient {
       if (rText) {
         // logger.info(rText)
         logger.info('got bing draw results!')
+        found = true
         let regex = /src="([^"]+)"/g
         let imageLinks = rText.match(regex)
         if (!imageLinks || imageLinks.length === 0) {