基于谷歌提供的免费大模型获取文章摘要

准备工作

  1. 注册谷歌账号获取 API_KEY，使用手机号即可(国内也是可以) apikey获取地址
  2. 创建一个 API_KEY ，注意这个 KEY 只会出现一次，要保存一下，后面会用到

创建API_KEY
创建API_KEY

部署 API

  1. fork 仓库

  2. 修改 vercel.json 中的跨域配置 为自己的域名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
        "headers": [
            {
                "source": "/(.*)",
                "headers": [
                    {
                        "key": "Access-Control-Allow-Origin",
                        "value": "https://blog.keyiqingxin.cn" // 修改为自己的域名
                    },
                    {
                        "key": "Access-Control-Allow-Headers",
                        "value": "content-type"
                    },
                    {
                        "key": "Access-Control-Allow-Methods",
                        "value": "DELETE,PUT,POST,GET,OPTIONS"
                    }
                ]
            }
        ]
    }

  3. 使用 vercel 导入你的 github 项目

  4. 设置你的环境变量 GOOGLE_API_KEY 为你获取到的 openai 的 API_KEY
    设置环境变量

部署到博客

  1. 该摘要AI前端完全使用 tianli_gpt 项目

  2. 在 themes/butterfly/source/js/ 目录下创建 tianli-gpt.js

  3. 在 themes/butterfly/source/css/ 目录下创建 tianli-gpt.css

  4. 在 butterfly 主题的配置文件 _config.butterfly.yml.yml 中添加以下代码

    1
    2
    3
    4
    5
    inject:
        head: 
            - <link rel="stylesheet" href="/css/tianli-gpt.css" />
        bottom:
            - <script defer src="/js/tianli-gpt.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
// tianli-gpt.js
var tianliGPTIsRunning = false;

function insertAIDiv(selector) {
  // 首先移除现有的 "post-TianliGPT" 类元素（如果有的话）
  removeExistingAIDiv();
  
  // 获取目标元素
  const targetElement = document.querySelector(selector);

  // 如果没有找到目标元素，不执行任何操作
  if (!targetElement) {
    return;
  }

  // 创建要插入的HTML元素
  const aiDiv = document.createElement('div');
  aiDiv.className = 'post-TianliGPT';

  const aiTitleDiv = document.createElement('div');
  aiTitleDiv.className = 'tianliGPT-title';
  aiDiv.appendChild(aiTitleDiv);

  const aiIcon = document.createElement('i');
  aiIcon.className = 'tianliGPT-title-icon';
  aiTitleDiv.appendChild(aiIcon);

  // 插入 SVG 图标
  aiIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48">
  <title>机器人</title>
  <g id="&#x673A;&#x5668;&#x4EBA;" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M34.717885,5.03561087 C36.12744,5.27055371 37.079755,6.60373651 36.84481,8.0132786 L35.7944,14.3153359 L38.375,14.3153359 C43.138415,14.3153359 47,18.1768855 47,22.9402569 L47,34.4401516 C47,39.203523 43.138415,43.0650727 38.375,43.0650727 L9.625,43.0650727 C4.861585,43.0650727 1,39.203523 1,34.4401516 L1,22.9402569 C1,18.1768855 4.861585,14.3153359 9.625,14.3153359 L12.2056,14.3153359 L11.15519,8.0132786 C10.920245,6.60373651 11.87256,5.27055371 13.282115,5.03561087 C14.69167,4.80066802 16.024865,5.7529743 16.25981,7.16251639 L17.40981,14.0624532 C17.423955,14.1470924 17.43373,14.2315017 17.43948,14.3153359 L30.56052,14.3153359 C30.56627,14.2313867 30.576045,14.1470924 30.59019,14.0624532 L31.74019,7.16251639 C31.975135,5.7529743 33.30833,4.80066802 34.717885,5.03561087 Z M38.375,19.4902885 L9.625,19.4902885 C7.719565,19.4902885 6.175,21.0348394 6.175,22.9402569 L6.175,34.4401516 C6.175,36.3455692 7.719565,37.89012 9.625,37.89012 L38.375,37.89012 C40.280435,37.89012 41.825,36.3455692 41.825,34.4401516 L41.825,22.9402569 C41.825,21.0348394 40.280435,19.4902885 38.375,19.4902885 Z M14.8575,23.802749 C16.28649,23.802749 17.445,24.9612484 17.445,26.3902253 L17.445,28.6902043 C17.445,30.1191812 16.28649,31.2776806 14.8575,31.2776806 C13.42851,31.2776806 12.27,30.1191812 12.27,28.6902043 L12.27,26.3902253 C12.27,24.9612484 13.42851,23.802749 14.8575,23.802749 Z M33.1425,23.802749 C34.57149,23.802749 35.73,24.9612484 35.73,26.3902253 L35.73,28.6902043 C35.73,30.1191812 34.57149,31.2776806 33.1425,31.2776806 C31.71351,31.2776806 30.555,30.1191812 30.555,28.6902043 L30.555,26.3902253 C30.555,24.9612484 31.71351,23.802749 33.1425,23.802749 Z" id="&#x5F62;&#x72B6;&#x7ED3;&#x5408;" fill="#444444" fill-rule="nonzero"></path>
  </g>
  </svg>`

  const aiTitleTextDiv = document.createElement('div');
  aiTitleTextDiv.className = 'tianliGPT-title-text';
  aiTitleTextDiv.textContent = 'AI摘要';
  aiTitleDiv.appendChild(aiTitleTextDiv);

  const aiTagDiv = document.createElement('div');
  aiTagDiv.className = 'tianliGPT-tag';
  aiTagDiv.id = 'tianliGPT-tag';
  aiTagDiv.textContent = 'AIGPT';
  aiTitleDiv.appendChild(aiTagDiv);

  const aiExplanationDiv = document.createElement('div');
  aiExplanationDiv.className = 'tianliGPT-explanation';
  aiExplanationDiv.innerHTML = '生成中...' + '<span class="blinking-cursor"></span>';
  aiDiv.appendChild(aiExplanationDiv); // 将 tianliGPT-explanation 插入到 aiDiv，而不是 aiTitleDiv

  // 将创建的元素插入到目标元素的顶部
  targetElement.insertBefore(aiDiv, targetElement.firstChild);
}

function removeExistingAIDiv() {
  // 查找具有 "post-TianliGPT" 类的元素
  const existingAIDiv = document.querySelector(".post-TianliGPT");

  // 如果找到了这个元素，就从其父元素中删除它
  if (existingAIDiv) {
    existingAIDiv.parentElement.removeChild(existingAIDiv);
  }
}

var tianliGPT = {
  //读取文章中的所有文本
  getTitleAndContent: function() {
    try {
      const title = document.title;
      const container = document.querySelector(tianliGPT_postSelector);
      if (!container) {
        console.warn('TianliGPT：找不到文章容器。请尝试将引入的代码放入到文章容器之后。如果本身没有打算使用摘要功能可以忽略此提示。');
        return '';
      }
      const paragraphs = container.getElementsByTagName('p');
      const headings = container.querySelectorAll('h1, h2, h3, h4, h5');
      let content = '';
  
      for (let h of headings) {
        content += h.innerText + ' ';
      }
  
      for (let p of paragraphs) {
        // 移除包含'http'的链接
        const filteredText = p.innerText.replace(/https?:\/\/[^\s]+/g, '');
        content += filteredText;
      }
  
      const combinedText = title + ' ' + content;
      let wordLimit = 1000;
      if (typeof tianliGPT_wordLimit !== "undefined") {
        wordLimit = tianliGPT_wordLimit;
      }
      const truncatedText = combinedText.slice(0, wordLimit);
      return truncatedText;
    } catch (e) {
      console.error('TianliGPT错误：可能由于一个或多个错误导致没有正常运行，原因出在获取文章容器中的内容失败，或者可能是在文章转换过程中失败。', e);
      return '';
    }
  },
  
  fetchTianliGPT: async function() {
    // if (!tianliGPT_key) {
    //   return "没有获取到key，代码可能没有安装正确。如果你需要在tianli_gpt文件引用前定义tianliGPT_key变量。详细请查看文档。";
    // }

    // if (tianliGPT_key === "5Q5mpqRK5DkwT1X9Gi5e") {
    //   return "请购买 key 使用，如果你能看到此条内容，则说明代码安装正确。";
    // }
    var url = window.location.href;
    const apiUrl = `https://ai.keyiqingxin.cn/api?url=${encodeURIComponent(url)}`;
    const timeout = 20000; // 设置超时时间（毫秒）
  
    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), timeout);
        const response = await fetch(apiUrl, { signal: controller.signal });
        if (response.ok) {
            const data = await response.json();
            return data.summary;
        } else {
            if (response.status === 402) {
                document.querySelectorAll('.post-TianliGPT').forEach(el => {
                    el.style.display = 'none';
                });
            }
            throw new Error('TianliGPT：余额不足，请充值后请求新的文章');
        }
    } catch (error) {
        if (error.name === 'AbortError') {
            if (window.location.hostname === 'localhost') {
                console.warn('警告：请勿在本地主机上测试 API 密钥。');
                return '获取文章摘要超时。请勿在本地主机上测试 API 密钥。';
            } else {
                console.error('请求超时');
                return '获取文章摘要超时。当你出现这个问题时，可能是key或者绑定的域名不正确。也可能是因为文章过长导致的 AI 运算量过大，您可以稍等一下然后刷新页面重试。';
            }
        } else {
            console.error('请求失败：', error);
            return '获取文章摘要失败，请稍后再试。';
        }
    }
  },

  aiShowAnimation: function (text) {
    const element = document.querySelector(".tianliGPT-explanation");
    if (!element) {
      return;
    }

    if (tianliGPTIsRunning) {
      return;
    }
    tianliGPTIsRunning = true;
    const typingDelay = 25;
    const waitingTime = 1000;
    const punctuationDelayMultiplier = 6;

    element.style.display = "block";
    element.innerHTML = "生成中..." + '<span class="blinking-cursor"></span>';

    let animationRunning = true;
    let currentIndex = 0;
    let initialAnimation = true;
    let lastUpdateTime = performance.now();

    const animate = () => {
      if (currentIndex < text.length && animationRunning) {
        const currentTime = performance.now();
        const timeDiff = currentTime - lastUpdateTime;

        const letter = text.slice(currentIndex, currentIndex + 1);
        const isPunctuation = /[，。！、？,.!?]/.test(letter);
        const delay = isPunctuation ? typingDelay * punctuationDelayMultiplier : typingDelay;

        if (timeDiff >= delay) {
          element.innerText = text.slice(0, currentIndex + 1);
          lastUpdateTime = currentTime;
          currentIndex++;

          if (currentIndex < text.length) {
            element.innerHTML =
              text.slice(0, currentIndex) +
              '<span class="blinking-cursor"></span>';
          } else {
            element.innerHTML = text;
            element.style.display = "block";
            tianliGPTIsRunning = false;
            observer.disconnect();// 暂停监听
          }
        }
        requestAnimationFrame(animate);
      }
    }

    // 使用IntersectionObserver对象优化ai离开视口后暂停的业务逻辑，提高性能
    const observer = new IntersectionObserver((entries) => {
      let isVisible = entries[0].isIntersecting;
      animationRunning = isVisible; // 标志变量更新
      if (animationRunning && initialAnimation) {
        setTimeout(() => {
          requestAnimationFrame(animate);
        }, 200);
      }
    }, { threshold: 0 });
    let post_ai = document.querySelector('.post-TianliGPT');
    observer.observe(post_ai);//启动新监听

  },
}

function runTianliGPT() {
  insertAIDiv(tianliGPT_postSelector);
  tianliGPT.fetchTianliGPT().then(summary => {
    tianliGPT.aiShowAnimation(summary);
  })
}

function checkURLAndRun() {
  if (typeof tianliGPT_postURL === "undefined") {
    runTianliGPT(); // 如果没有设置自定义 URL，则直接执行 runTianliGPT() 函数
    return;
  }

  try {
    const wildcardToRegExp = (s) => {
      return new RegExp('^' + s.split(/\*+/).map(regExpEscape).join('.*') + '$');
    };

    const regExpEscape = (s) => {
      return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
    };

    const urlPattern = wildcardToRegExp(tianliGPT_postURL);
    const currentURL = window.location.href;

    if (urlPattern.test(currentURL)) {
      runTianliGPT(); // 如果当前 URL 符合用户设置的 URL，则执行 runTianliGPT() 函数
    } else {
      console.log("TianliGPT：因为不符合自定义的链接规则，我决定不执行摘要功能。");
    }
  } catch (error) {
    console.error("TianliGPT：我没有看懂你编写的自定义链接规则，所以我决定不执行摘要功能", error);
  }
}

checkURLAndRun();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
:root {
  --heo-white: #fff;
  --heo-white-op: rgba(255, 255, 255, 0.2);
  --heo-black: #000;
  --heo-black-op: rgba(0, 0, 0, 0.2);
  --heo-none: #00000000;
  --heo-gray: #999999;
  --heo-gray-op: #9999992b;
  --heo-vip: #e5a80d;
  --heo-main: var(--heo-theme);
  --heo-main-op: var(--heo-theme-op);
  --heo-main-op-deep: var(--heo-theme-op-deep);
  --heo-main-none: var(--heo-theme-none);
  --heo-shadow-theme: 0 8px 12px -3px var(--heo-theme-op);
  --heo-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, .15);
  --heo-shadow-main: 0 8px 12px -3px var(--heo-main-op);
  --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
  --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
  --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .05);
  --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
  --heo-shadow-red: 0 8px 12px -3px #ee7d7936;
  --heo-shadow-green: 0 8px 12px -3px #87ee7936;
  --heo-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
  --heo-snackbar-time: 5s;
  --heo-theme: #425AEF;
  --heo-theme-op: #4259ef23;
  --heo-theme-op-deep: #4259efdd;
  --heo-theme-none: #4259ef01;
  --heo-blue: #425AEF;
  --heo-red: #f04a63;
  --heo-pink: #FF7C7C;
  --heo-green: #57bd6a;
  --heo-yellow: #c28b00;
  --heo-yellow-op: #d99c001a;
  --heo-orange: #e38100;
  --heo-fontcolor: #363636;
  --heo-background: #f7f9fe;
  --heo-reverse: #000;
  --heo-maskbg: rgba(255, 255, 255, 0.6);
  --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
  --heo-hovertext: var(--heo-main);
  --heo-ahoverbg: #F7F7FA;
  --heo-lighttext: var(--heo-main);
  --heo-secondtext: rgba(60, 60, 67, 0.8);
  --heo-scrollbar: rgba(60, 60, 67, 0.4);
  --heo-card-btn-bg: #edf0f7;
  --heo-post-blockquote-bg: #fafcff;
  --heo-post-tabs-bg: #f2f5f8;
  --heo-secondbg: #f1f3f8;
  --heo-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --heo-card-bg: #fff;
  --heo-card-bg-op: var(--heo-black-op);
  --heo-card-bg-none: rgba(255, 255, 255, 0);
  --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-card-border: #e3e8f7;
  --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
  --style-border: 1px solid var(--heo-card-border);
  --style-border-always: 1px solid var(--heo-card-border);
  --style-border-hover: 1px solid var(--heo-main);
  --style-border-hover-always: 1px solid var(--heo-main);
  --style-border-dashed: 1px dashed var(--heo-theme-op);
  --style-border-forever: 2px solid var(--heo-main);
}

[data-theme=light] {
  --heo-theme: #425AEF;
  --heo-theme-op: #4259ef23;
  --heo-theme-op-deep: #4259efdd;
  --heo-theme-none: #4259ef01;
  --heo-blue: #425AEF;
  --heo-red: #f04a63;
  --heo-pink: #FF7C7C;
  --heo-green: #57bd6a;
  --heo-yellow: #c28b00;
  --heo-yellow-op: #d99c001a;
  --heo-orange: #e38100;
  --heo-fontcolor: #363636;
  --heo-background: #f7f9fe;
  --heo-reverse: #000;
  --heo-maskbg: rgba(255, 255, 255, 0.6);
  --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
  --heo-hovertext: var(--heo-main);
  --heo-ahoverbg: #F7F7FA;
  --heo-lighttext: var(--heo-main);
  --heo-secondtext: rgba(60, 60, 67, 0.8);
  --heo-scrollbar: rgba(60, 60, 67, 0.4);
  --heo-card-btn-bg: #edf0f7;
  --heo-post-blockquote-bg: #fafcff;
  --heo-post-tabs-bg: #f2f5f8;
  --heo-secondbg: #f1f3f8;
  --heo-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --heo-card-bg: #fff;
  --heo-card-bg-op: var(--heo-black-op);
  --heo-card-bg-none: rgba(255, 255, 255, 0);
  --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-card-border: #e3e8f7;
  --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
  --style-border: 1px solid var(--heo-card-border);
  --style-border-always: 1px solid var(--heo-card-border);
  --style-border-hover: 1px solid var(--heo-main);
  --style-border-hover-always: 1px solid var(--heo-main);
  --style-border-dashed: 1px dashed var(--heo-theme-op);
  --style-border-forever: 2px solid var(--heo-main);
}

[data-theme=dark] {
  --heo-theme: #f2b94b;
  --heo-theme-op: #f2b94b23;
  --heo-theme-op-deep: #f2b94bdd;
  --heo-theme-none: #f2b94b00;
  --heo-blue: #0084FF;
  --heo-red: #FF3842;
  --heo-pink: #d44040;
  --heo-green: #3e9f50;
  --heo-yellow: #ffc93e;
  --heo-yellow-op: #ffc93e30;
  --heo-orange: #ff953e;
  --heo-fontcolor: #F7F7FA;
  --heo-background: #18171d;
  --heo-reverse: #fff;
  --heo-maskbg: rgba(0, 0, 0, 0.6);
  --heo-maskbgdeep: rgba(0, 0, 0, 0.85);
  --heo-hovertext: #0A84FF;
  --heo-ahoverbg: #fff;
  --heo-lighttext: var(--heo-theme);
  --heo-secondtext: #a1a2b8;
  --heo-scrollbar: rgba(200, 200, 223, 0.4);
  --heo-card-btn-bg: #30343f;
  --heo-post-blockquote-bg: #000;
  --heo-post-tabs-bg: #121212;
  --heo-secondbg: #30343f;
  --heo-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
  --heo-card-bg: #1d1e22;
  --heo-card-bg-op: var(--heo-white-op);
  --heo-card-bg-none: #1d1b2600;
  --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
  --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
  --heo-card-border: #3d3d3f;
  --heo-shadow-border: 0 8px 16px -4px #00000050;
  --style-border: 1px solid var(--heo-card-border);
  --style-border-always: 1px solid var(--heo-card-border);
  --style-border-hover: 1px solid var(--heo-theme);
  --style-border-hover-always: 1px solid var(--heo-theme);
  --style-border-dashed: 1px dashed var(--heo-theme-op);
  --style-border-forever: 2px solid var(--heo-lighttext);
}

/* AI */
.post-TianliGPT {
  background: var(--heo-secondbg);
  border-radius: 12px;
  padding: 12px;
  line-height: 1.3;
  border: var(--style-border-always);
  margin-top: 16px;
}

@media screen and (max-width: 768px) {
  .post-TianliGPT {
    margin-top: 22px;
  }
}

.tianliGPT-title {
  display: flex;
  color: var(--heo-lighttext);
  border-radius: 8px;
  align-items: center;
  padding: 0 12px;
  cursor: default;
  user-select: none;
}

.tianliGPT-title-text {
  font-weight: bold;
  margin-left: 8px;
  line-height: 1;
}

.tianliGPT-explanation {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--heo-card-bg);
  border-radius: 8px;
  border: var(--style-border-always);
  font-size: 15px;
  line-height: 1.4;
  display: flex;
}

.tianliGPT-suggestions {
  display: flex;
  flex-wrap: wrap;
}

.tianliGPT-suggestions .tianliGPT-suggestions-item {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--heo-card-bg);
  border-radius: 8px 8px 8px 0;
  border: var(--style-border-always);
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  width: fit-content;
  margin-right: 12px;
  cursor: pointer;
  transition: 0.3s;
}

.tianliGPT-suggestions .tianliGPT-suggestions-item:hover {
  background: var(--heo-main);
  color: var(--heo-white);
}

.blinking-cursor {
  background-color: var(--heo-main);
  width: 10px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: blinking-cursor 0.5s infinite;
  -webkit-animation: blinking-cursor 0.5s infinite;
  margin-left: 4px;
}

@keyframes blinking-cursor {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.tianliGPT-tag {
  font-size: 12px;
  background-color: var(--heo-lighttext);
  color: var(--heo-card-bg);
  font-weight: bold;
  border-radius: 4px;
  margin-left: auto;
  line-height: 1;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}

.tianliGPT-tag:hover {
  background: var(--heo-fontcolor);
  color: var(--heo-card-bg);
}

ins.adsbygoogle {
  margin: 16px 0;
  background: var(--heo-card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: var(--style-border-always);
}

#tianliGPT-Toggle {
  font-size: 12px;
  background: var(--heo-lighttext);
  color: var(--heo-card-bg);
  padding: 4px;
  border-radius: 4px;
  margin-left: 6px;
  transform: scale(0.8);
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
}

#tianliGPT-Toggle:hover {
  background: var(--heo-fontcolor);
  color: var(--heo-card-bg);
}

.tianliGPT-title-icon {
  width: 20px;
  height: 20px;
}

.tianliGPT-title-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--heo-main);
}

.tianliGPT-title-icon svg path {
  fill: var(--heo-main);
}