Add PWA support and reading preview panel

app.py

@@ -7,12 +7,104 @@ from huggingface_hub import HfApi, hf_hub_download
 from datetime import datetime
 import shutil
 from pathlib import Path
+from fastapi.responses import Response
 
 # --- 配置 (优先从环境变量读取) ---
 DATASET_REPO_ID = os.environ.get("DATASET_REPO_ID", "mingyang22/huggingface-notes")
 HF_TOKEN = os.environ.get("HF_TOKEN") # 必须在 Space 设置中配置
 REMOTE_NOTES_PATH = "db/notes.json"
 
+APP_MANIFEST = {
+    "name": "HF 笔记",
+    "short_name": "HF笔记",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#0f172a",
+    "theme_color": "#2563eb",
+    "description": "Hugging Face 云端同步笔记（PWA）",
+    "icons": [
+        {
+            "src": "/pwa-icon.svg",
+            "sizes": "any",
+            "type": "image/svg+xml",
+            "purpose": "any maskable"
+        }
+    ],
+}
+
+PWA_ICON_SVG = """<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'>
+<rect width='128' height='128' rx='24' fill='#1d4ed8'/>
+<path d='M34 28h60a6 6 0 0 1 6 6v60a6 6 0 0 1-6 6H34a6 6 0 0 1-6-6V34a6 6 0 0 1 6-6z' fill='#fff' opacity='0.95'/>
+<path d='M44 48h40M44 64h40M44 80h26' stroke='#1d4ed8' stroke-width='6' stroke-linecap='round'/>
+</svg>"""
+
+PWA_SW_JS = """
+const CACHE_NAME = 'hf-notes-pwa-v1';
+const CORE_ASSETS = ['/', '/manifest.webmanifest', '/pwa-icon.svg'];
+self.addEventListener('install', (event) => {
+  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CORE_ASSETS)));
+  self.skipWaiting();
+});
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+  if (req.mode === 'navigate') {
+    event.respondWith(
+      fetch(req).then((res) => {
+        const copy = res.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(req, copy));
+        return res;
+      }).catch(() => caches.match(req).then((res) => res || caches.match('/')))
+    );
+    return;
+  }
+  event.respondWith(caches.match(req).then((cached) => cached || fetch(req)));
+});
+"""
+
+PWA_HEAD = """
+<link rel="manifest" href="/manifest.webmanifest" />
+<meta name="theme-color" content="#2563eb" />
+<script>
+(() => {
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
+  }
+  const DRAFT_KEY = 'hf_notes_web_draft_v1';
+  function readDraft() {
+    try { return JSON.parse(localStorage.getItem(DRAFT_KEY) || '{}'); } catch (_) { return {}; }
+  }
+  function writeDraft(data) {
+    try { localStorage.setItem(DRAFT_KEY, JSON.stringify(data || {})); } catch (_) {}
+  }
+  function bindDraftPersistence() {
+    const titleInput = document.querySelector('#note_title textarea, #note_title input');
+    const contentInput = document.querySelector('#note_content textarea');
+    const draft = readDraft();
+    if (titleInput && !titleInput.value && draft.title) titleInput.value = draft.title;
+    if (contentInput && !contentInput.value && draft.content) contentInput.value = draft.content;
+    if (titleInput) {
+      titleInput.addEventListener('input', () => writeDraft({ title: titleInput.value, content: contentInput ? contentInput.value : '' }));
+    }
+    if (contentInput) {
+      contentInput.addEventListener('input', () => writeDraft({ title: titleInput ? titleInput.value : '', content: contentInput.value }));
+    }
+  }
+  window.addEventListener('load', () => setTimeout(bindDraftPersistence, 800));
+})();
+</script>
+"""
+
 def get_default_data_dir():
     custom_dir = os.environ.get("HF_NOTES_DATA_DIR")
     if custom_dir:
@@ -212,16 +304,23 @@ def delete_note(note_id):
     write_notes(notes)
     backup_msg = sync_manager.push()
     return f"🗑️ 笔记已删除 | {backup_msg}", load_notes_list()
-
-# --- Gradio UI 界面 ---
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
-    gr.Markdown("# 📓 Hugging Face 个人笔记云端版")
-    gr.Markdown("实时同步本地 Quicker 动作数据。数据由私有 Dataset 承载，安全、持久、版本可追溯。")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            note_list = gr.Dataframe(
-                headers=["ID", "标题", "最后修改"],
+
+def render_preview_md(title, content):
+    t = (title or "").strip()
+    c = content or ""
+    if not t and not c:
+        return "## 预览\n\n暂无内容。"
+    return f"## {t or '未命名笔记'}\n\n{c}"
+
+# --- Gradio UI 界面 ---
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), head=PWA_HEAD) as demo:
+    gr.Markdown("# 📓 Hugging Face 个人笔记云端版")
+    gr.Markdown("实时同步本地 Quicker 动作数据。支持 PWA 安装与离线壳缓存，方便长期查看与编辑。")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            note_list = gr.Dataframe(
+                headers=["ID", "标题", "最后修改"],
                 datatype=["str", "str", "str"],
                 value=load_notes_list(),
                 interactive=False,
@@ -231,36 +330,58 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
             status_output = gr.Markdown("系统就绪")
             
         with gr.Column(scale=2):
-            with gr.Group():
-                target_id = gr.Textbox(visible=False)
-                in_title = gr.Textbox(label="标题", placeholder="输入笔记标题...")
-                in_content = gr.TextArea(label="正文内容", lines=15, placeholder="记录您的想法...")
-                
-                with gr.Row():
-                    btn_save = gr.Button("💾 保存并推送到云端", variant="primary")
-                    btn_new = gr.Button("➕ 新建笔记")
-                    btn_del = gr.Button("🗑️ 删除笔记", variant="stop")
+            with gr.Group():
+                target_id = gr.Textbox(visible=False)
+                in_title = gr.Textbox(label="标题", placeholder="输入笔记标题...", elem_id="note_title")
+                in_content = gr.TextArea(label="正文内容", lines=15, placeholder="记录您的想法...", elem_id="note_content")
+                preview = gr.Markdown(value="## 预览\n\n暂无内容。", label="阅读预览")
+                
+                with gr.Row():
+                    btn_save = gr.Button("💾 保存并推送到云端", variant="primary")
+                    btn_new = gr.Button("➕ 新建笔记")
+                    btn_del = gr.Button("🗑️ 删除笔记", variant="stop")
 
     # 事件绑定
-    def on_select(evt: gr.SelectData):
-        # evt.index[0] 是行号
-        df = load_notes_list()
-        selected_id = df[evt.index[0]][0]
-        title, content = get_note_content(selected_id)
-        return selected_id, title, content
-
-    note_list.select(on_select, None, [target_id, in_title, in_content])
-    
-    btn_save.click(save_note, [target_id, in_title, in_content], [status_output, note_list])
-    
-    btn_new.click(lambda: (None, "新笔记", ""), None, [target_id, in_title, in_content])
-    
-    btn_del.click(delete_note, [target_id], [status_output, note_list])
-    
-    btn_refresh.click(lambda: (sync_manager.pull(), load_notes_list()), None, [status_output, note_list])
-
-    # 启动时自动从云端拉取
-    demo.load(lambda: (sync_manager.pull(), load_notes_list()), None, [status_output, note_list])
-
-if __name__ == "__main__":
-    demo.launch()
+    def on_select(evt: gr.SelectData):
+        # evt.index[0] 是行号
+        df = load_notes_list()
+        selected_id = df[evt.index[0]][0]
+        title, content = get_note_content(selected_id)
+        return selected_id, title, content, render_preview_md(title, content)
+
+    note_list.select(on_select, None, [target_id, in_title, in_content, preview])
+    
+    btn_save.click(save_note, [target_id, in_title, in_content], [status_output, note_list]).then(
+        render_preview_md, [in_title, in_content], [preview]
+    )
+    
+    btn_new.click(lambda: (None, "新笔记", "", render_preview_md("新笔记", "")), None, [target_id, in_title, in_content, preview])
+    
+    btn_del.click(delete_note, [target_id], [status_output, note_list]).then(
+        lambda: ("", "", "## 预览\n\n暂无内容。"), None, [in_title, in_content, preview]
+    )
+    
+    btn_refresh.click(lambda: (sync_manager.pull(), load_notes_list()), None, [status_output, note_list])
+    in_content.change(render_preview_md, [in_title, in_content], [preview], queue=False)
+    in_title.change(render_preview_md, [in_title, in_content], [preview], queue=False)
+
+    # 启动时自动从云端拉取
+    demo.load(lambda: (sync_manager.pull(), load_notes_list(), "## 预览\n\n暂无内容。"), None, [status_output, note_list, preview])
+
+@demo.app.get("/manifest.webmanifest")
+def pwa_manifest():
+    return Response(
+        content=json.dumps(APP_MANIFEST, ensure_ascii=False),
+        media_type="application/manifest+json"
+    )
+
+@demo.app.get("/sw.js")
+def pwa_service_worker():
+    return Response(content=PWA_SW_JS, media_type="application/javascript")
+
+@demo.app.get("/pwa-icon.svg")
+def pwa_icon():
+    return Response(content=PWA_ICON_SVG, media_type="image/svg+xml")
+
+if __name__ == "__main__":
+    demo.launch()