基本PWA功能 & 修改图标

😘 icon by @MZhao-ouo

Co-authored-by: mzlegion <[email protected]>

modules/webui.py

@@ -56,11 +56,24 @@ def reload_javascript():
     js += '<script async type="module" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
     js += '<script async type="module" src="http://spin.js.org/spin.umd.js"></script><link type="text/css" href="https://spin.js.org/spin.css" rel="stylesheet" />'
     
+    meta = """
+        <meta name="apple-mobile-web-app-title" content="川虎 Chat">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="application-name" content="川虎 Chat">
+        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover'>
+        <meta name="theme-color" content="#ffffff">
+
+        <link rel="apple-touch-icon-precomposed" href="/file=web_assets/icon/mask-icon-512.png" >
+        <link rel="apple-touch-icon" href="/file=web_assets/icon/mask-icon-512.png" >
+        
+        <link rel="manifest" href="/file=web_assets/manifest.json" crossorigin="use-credentials">
+    """
     css = css_html()
 
     def template_response(*args, **kwargs):
         res = GradioTemplateResponseOriginal(*args, **kwargs)
-        res.body = res.body.replace(b'</head>', f'{js}</head>'.encode("utf8"))
+        res.body = res.body.replace(b'</head>', f'{meta}{js}</head>'.encode("utf8"))
+        # res.body = res.body.replace(b'</head>', f'{js}</head>'.encode("utf8"))
         res.body = res.body.replace(b'</body>', f'{css}</body>'.encode("utf8"))
         res.init_headers()
         return res

web_assets/javascript/ChuanhuChat.js

@@ -222,9 +222,11 @@ function checkModel() {
 function toggleDarkMode(isEnabled) {
     if (isEnabled) {
         document.body.classList.add("dark");
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#171717');
         document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
     } else {
         document.body.classList.remove("dark");
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff');
         document.body.style.backgroundColor = "";
     }
 }

web_assets/manifest.json

@@ -0,0 +1,22 @@
+{
+    "name": "川虎Chat",
+    "short_name": "川虎Chat",
+    "description": "川虎Chat - 为ChatGPT等多种LLM提供了一个轻快好用的Web图形界面和众多附加功能 \nChuanhu Chat - Lightweight and User-friendly Web-UI for LLMs including ChatGPT/ChatGLM/LLaMA ",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/file=web_assets/icon/any-icon-512.png",
+            "type": "image/png",
+            "sizes": "512x512",
+            "purpose": "any"
+        },
+        {
+            "src": "/file=web_assets/icon/mask-icon-512.png",
+            "type": "image/png",
+            "sizes": "512x512",
+            "purpose": "maskable"
+        }
+    ]
+}