From 7f07b3c7bda7cdecd9f54c556c15b1850150f424 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <17683872107czx>
Date: Thu, 10 Aug 2023 17:59:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E7=AB=A0=20AI=20?=
 =?UTF-8?q?=E6=91=98=E8=A6=81=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/assets/libs/gpt/post-ai.js | 72 +++++++++++++++++++++++-----
 templates/modules/head.html          | 15 ++----
 templates/post.html                  | 36 +++++---------
 3 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/templates/assets/libs/gpt/post-ai.js b/templates/assets/libs/gpt/post-ai.js
index 13151e4f..5d8d9e93 100644
--- a/templates/assets/libs/gpt/post-ai.js
+++ b/templates/assets/libs/gpt/post-ai.js
@@ -1,15 +1,59 @@
-(function () {
+function HaoPostAI(AI_option) {
 
-    let ai =  GLOBAL_CONFIG.source.postAi.ai;
-    let randomNum = GLOBAL_CONFIG.source.postAi.randomNum; //按钮最大的随机次数，也就是一篇文章最大随机出来几种
-    let basicWordCount = GLOBAL_CONFIG.source.postAi.basicWordCount; // 最低获取字符数, 最小1000, 最大1999
-    let btnLink = GLOBAL_CONFIG.source.postAi.btnLink;
-    let gptName = GLOBAL_CONFIG.source.postAi.gptName;
-    let modeName = GLOBAL_CONFIG.source.postAi.modeName;
-    let switchBtn = GLOBAL_CONFIG.source.postAi.switchBtn //# 可以配置是否显示切换按钮 以切换tianli/local
-    let keys = GLOBAL_CONFIG.source.postAi.keys;
-    let Referers = GLOBAL_CONFIG.source.postAi.Referers;
+    // 获取挂载元素，即文章内容所在的容器元素
+    let targetElement = document.querySelector('#post #article-container');
+    // 若el配置不存在则自动获取，如果auto_mount配置为真也自动获取
+    if (!targetElement) {
+        return;
+    };
 
+    let ai = AI_option.ai;
+    let randomNum = AI_option.randomNum; //按钮最大的随机次数，也就是一篇文章最大随机出来几种
+    let basicWordCount = AI_option.basicWordCount; // 最低获取字符数, 最小1000, 最大1999
+    let btnLink = AI_option.btnLink;
+    let gptName = AI_option.gptName;
+    let modeName = AI_option.modeName;
+    let switchBtn = AI_option.switchBtn //# 可以配置是否显示切换按钮 以切换tianli/local
+    let keys = AI_option.keys;
+    let Referers = AI_option.Referers;
+
+    let post = document.querySelector('#post')
+    const interface = {
+        name: "AI-摘要",
+        aiToggle: "切换",
+        version: "Tianli GPT",
+        button: ["介绍自己", "生成本文简介", "推荐相关文章", "前往主页"],
+    }
+    // 插入html结构
+    const post_ai_box = document.createElement('div');
+    post_ai_box.className = 'post-ai';
+    post.insertBefore(post_ai_box, post.firstChild);
+
+    var PostAI =   `
+    <div class="ai-title">
+    <i class="haofont hao-icon-bilibili"></i>
+    <div class="ai-title-text">${interface.name}</div>`
+    if(switchBtn){
+        PostAI =  PostAI+  `<div  id="ai-Toggle">${interface.aiToggle}</div> `;
+    }
+    PostAI =  PostAI+  `<i class="haofont hao-icon-arrow-rotate-right"></i> `;
+    if(modeName == 'local'){
+        PostAI =  PostAI+  `<div class="ai-tag" id="ai-tag">${gptName} GPT</div>`;
+    }else{
+        PostAI =  PostAI+  `<div class="ai-tag" id="ai-tag">${interface.version}</div>     `;
+    }
+    PostAI =  PostAI+  ` 
+    </div>
+    <div class="ai-explanation" style="display: block;">AI初始化中...</div>
+    <div class="ai-btn-box">
+      <div class="ai-btn-item">${interface.button[0]}</div>
+      <div class="ai-btn-item">${interface.button[1]}</div>
+      <div class="ai-btn-item">${interface.button[2]}</div>
+      <div class="ai-btn-item">${interface.button[3]}</div>
+      <div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
+    </div>`;
+
+    post_ai_box.innerHTML =PostAI;
     // 当前随机到的ai摘要到index
     let lastAiRandomIndex = -1;
     let animationRunning = true; // 标志变量，控制动画函数的运行
@@ -119,8 +163,10 @@
                 Referer: Referers
             };
 
-            const truncateDescription =  getTitleAndContent(num);
-            const queryParams = `key=${options.key}&content=${truncateDescription}`;
+            var url = window.location.href;
+            const title = document.title;
+            const truncateDescription = getTitleAndContent(num);
+            const queryParams = `key=${options.key}&content=${truncateDescription}&url=${url}&title=${title}`;
             const requestOptions = {
                 method: "GET",
                 headers: {
@@ -371,4 +417,4 @@
 
     aiAbstract();
     showAiBtn()
-})()
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/templates/modules/head.html b/templates/modules/head.html
index c33c1d2a..c2e5576c 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -177,6 +177,10 @@
                 th:src="${assets_link + '/libs/welcome/welcome.js' + theme_version}"></script>
     </th:block>
 
+    <!-- 文章ai摘要 -->
+    <script data-pjax th:if="${theme.config.post.aiDescription.aiDescriptionEnable}"
+            th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>
+
     <!-- icon图标 -->
     <link rel="stylesheet" th:href="'https://npm.onmicrosoft.cn/hao-theme-static@'+${theme.spec.version}+'/icon/iconfont.css'">
 
@@ -233,17 +237,6 @@
                     locationLng: [[${theme.config.sidebar.welcome.locationLng}]],
                     locationLat: [[${theme.config.sidebar.welcome.locationLat}]],
                 },
-                postAi:{
-                    ai : '[(${post.status.excerpt})]',
-                    randomNum : [[${theme.config.post.aiDescription.randomNum}]], //按钮最大的随机次数，也就是一篇文章最大随机出来几种
-                    basicWordCount : [[${theme.config.post.aiDescription.basicWordCount}]], // 最低获取字符数, 最小1000, 最大1999
-                    btnLink : "[(${theme.config.post.aiDescription.btnLink})]",
-                    gptName : "[(${theme.config.post.aiDescription.gptName})]",
-                    modeName : [[${theme.config.post.aiDescription.mode}]],
-                    switchBtn : [[${theme.config.post.aiDescription.switchBtn}]],  //# 可以配置是否显示切换按钮 以切换tianli/local
-                    keys : "[(${theme.config.post.aiDescription.key})]",
-                    Referers : "[(${theme.config.post.aiDescription.Referer})]",
-                }
             },
             date_suffix: {
                 just: '刚刚',
diff --git a/templates/post.html b/templates/post.html
index 0a48a65f..ad655373 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -97,34 +97,24 @@
         <main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
             <div id="post">
 
-
-                <!-- 文章ai摘要 -->
-                <div class="post-ai" th:if="${theme.config.post.aiDescription.aiDescriptionEnable}">
-                    <div class="ai-title"><i class="haofont hao-icon-bilibili"></i>
-                        <div class="ai-title-text">AI-摘要</div>
-                        <div th:if="${theme.config.post.aiDescription.switchBtn}" id="ai-Toggle">切换</div>
-                        <i class="haofont hao-icon-arrow-rotate-right"></i>
-
-                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'local')}" class="ai-tag" id="ai-tag">[[${theme.config.post.aiDescription.gptName}]] GPT</div>
-                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'tianli')}" class="ai-tag" id="ai-tag">Tianli GPT</div>
-                    </div>
-                    <div class="ai-explanation" style="display: block;">AI初始化中...</div>
-                    <div class="ai-btn-box">
-                        <div class="ai-btn-item">介绍自己</div>
-                        <div class="ai-btn-item">生成本文简介</div>
-                        <div class="ai-btn-item">推荐相关文章</div>
-                        <div class="ai-btn-item">前往主页</div>
-                        <div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
-                    </div>
-                </div>
-
                 <!-- 文章内容 -->
                 <article th:class="'post-content  '+${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
                 </article>
 
                 <!-- 文章ai摘要 -->
-                <script  data-pjax th:if="${theme.config.post.aiDescription.aiDescriptionEnable}"
-                         th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>
+                <script th:if="${theme.config.post.aiDescription.aiDescriptionEnable}" data-pjax defer>
+                    new HaoPostAI({
+                        ai: '[(${post.status.excerpt})]',
+                        randomNum: [[${ theme.config.post.aiDescription.randomNum }]], //按钮最大的随机次数，也就是一篇文章最大随机出来几种
+                        basicWordCount: [[${ theme.config.post.aiDescription.basicWordCount }]], // 最低获取字符数, 最小1000, 最大1999
+                        btnLink: "[(${theme.config.post.aiDescription.btnLink})]",
+                        gptName: "[(${theme.config.post.aiDescription.gptName})]",
+                        modeName: "[[${ theme.config.post.aiDescription.mode }]]",
+                        switchBtn: [[${ theme.config.post.aiDescription.switchBtn }]],  //# 可以配置是否显示切换按钮 以切换tianli/local
+                        keys: "[(${theme.config.post.aiDescription.key})]",
+                        Referers: "[(${theme.config.post.aiDescription.Referer})]"
+                    })
+                </script>
 
                 <!-- 版权声明 -->
                 <th:block th:replace="~{modules/post/copyright :: copyright}"></th:block>