feat: 加入更新信息窗口

assets/custom.css

@@ -43,6 +43,53 @@ footer {
     position: absolute;
     max-height: 30px;
 }
+#toast-update {
+    position: absolute;
+    display: flex;
+    top: -20px;
+    width: 100%;
+    justify-content: center;
+    z-index: var(--layer-top);
+}
+#check-chuanhu-update {
+    position: absolute;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: var(--size-6) var(--size-4);
+    box-shadow: var(--shadow-drop-lg);
+    border: 1px solid var(--block-label-border-color);
+    border-radius: var(--container-radius);
+    background: var(--background-fill-primary);
+    padding: var(--size-4) var(--size-6);
+    min-width: 400px;
+    max-width: 480px;
+    overflow: hidden;
+    pointer-events: auto;
+}
+.version-info-title {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-align: start;
+    width: 100%;
+}
+#release-note-wrap {
+    width: 100%;
+    max-width: 400px;
+    height: 120px;
+    border: solid 1px var(--border-color-primary);
+    overflow: auto;
+    padding: 0 8px;
+}
+.btn-update-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 72%;
+    width: 100%;
+    padding-top: 10px;
+}
 /* user_info */
 #user_info {
     white-space: nowrap;

assets/custom.js

@@ -85,6 +85,7 @@ function gradioLoaded(mutations) {
             if (chatbotWrap) {
                 if (!historyLoaded) {
                     loadHistoryHtml();
+                    updateLatestVersion();
                 }
                 setChatbotScroll();
             }
@@ -496,6 +497,25 @@ function clearHistoryHtml() {
     }
 }
 
+async function getLatestRelease() {
+    const response = await fetch('https://api.github.com/repos/gaizhenbiao/chuanhuchatgpt/releases/latest');
+    const data = await response.json();
+    return data;
+}
+async function updateLatestVersion() {
+    const latestVersionElement = document.getElementById('latest-version-title');
+    const releaseNoteElement = document.getElementById('release-note-content');
+    try {
+        const data = await getLatestRelease();
+        const latestVersion = data.tag_name;
+        latestVersionElement.textContent = latestVersion;
+        const releaseNote = data.body;
+        releaseNoteElement.innerHTML = marked.parse(releaseNote);
+    } catch (error) {
+        console.error(error);
+    }
+}
+
 // 监视页面内部 DOM 变动
 var observer = new MutationObserver(function (mutations) {
     gradioLoaded(mutations);

assets/html/update.html

@@ -1,9 +1,20 @@
-<div id="check-chuanhu-update">
-    <p style="font-size: 0.5rem;">
-        当前版本: <span id="currentVersion">{current_version}</span>
-    </p>
-    <p style="font-size: 0.5rem;">
-        最新版本: <a href="https://github.com/gaizhenbiao/chuanhuchatgpt/releases" target="_blank"
-                    id="latestVersion">正在获取...</a>
-    </p>
-</div>
+<div id="toast-update">
+    <div id="check-chuanhu-update">
+        <!-- <p style="font-size: 1em;">
+            当前版本: <span id="currentVersion">{current_version}</span>
+        </p> -->
+        <p class="version-info-title">
+            Latest Version: <a href="https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest" target="_blank"
+                id="latest-version-title" style="text-decoration: none;">getting latest version...</a>
+        </p>
+        <div id="release-note-wrap">
+            <div class="release-note-content" id="release-note-content">
+                Release Note...
+            </div>
+        </div>
+        <div class="btn-update-group">
+            <button class="btn-update lg secondary svelte-1ipelgc" id="cancel-button" onclick="cancelUpdate()">Cancel</button>
+            <button class="btn-update lg primary svelte-1ipelgc" id="update-button" onclick="getUpdate()">Update</button>
+        </div>
+    </div>
+</div>

modules/overwrites.py

@@ -80,8 +80,7 @@ with open("./assets/custom.js", "r", encoding="utf-8") as f, \
 def reload_javascript():
     print("Reloading javascript...")
     js = f'<script>{customJS}</script><script async>{externalScripts}</script>'
-    # if render_latex:
-    #     js += """\"""
+    js += '<script async src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
     def template_response(*args, **kwargs):
         res = GradioTemplateResponseOriginal(*args, **kwargs)
         res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))