diff --git a/.agents/logs/ai_changelog.md b/.agents/logs/ai_changelog.md index d35d764..5b03d17 100644 --- a/.agents/logs/ai_changelog.md +++ b/.agents/logs/ai_changelog.md @@ -347,3 +347,8 @@ - `python_embeded/python.exe -m py_compile api/__init__.py api/models.py api/recipes.py api/recipe_packages.py` - Advanced recipe locale-key smoke check passed - `git diff --check` + +## [2026-08-03] UI 重构与架构精简 +- **Recipe UI 现代化**: 合并了冗杂的 Tabs，将 模型与复现 和 参数 合并进入 概览 面板，并将底层参数收入折叠组件，极大减轻了信息噪音。 +- **配方卡片列表降噪**: 移除了原配方列表卡片上的全量参数展示，仅保留封面图、标题、标签与模型徽章，并重构了操作按钮布局。 +- **交互逻辑修复**: 废弃了极易出 Bug 的 Quick Queue 逻辑，统一了『打开到画布』与『追加到画布』的逻辑封装。 diff --git a/.agents/logs/ai_lessons.md b/.agents/logs/ai_lessons.md index ac87670..a12c4b9 100644 --- a/.agents/logs/ai_lessons.md +++ b/.agents/logs/ai_lessons.md @@ -395,3 +395,9 @@ This document serves as an architectural retrospective and UX diagnostic log for (瀵煎叆閰嶆柟鍙兘寮曠敤鏈満涓嶅瓨鍦ㄧ殑妯″瀷璺緞銆傝嫢鎶婃枃浠跺悕鎴栭瑙堝懡涓洿鎺ュ綋鎴愭潈濞佷緷鎹紝灏变細闈欓粯鏀瑰啓宸ヤ綔娴佹ā鍨嬭緭鍏ワ紝鎴栨妸瑙嗚鍛戒腑閿欒鎻愬崌涓哄凡楠岃瘉韬唤銆) **The Solution (鏂规)**: Keep the saved workflow path and stored identity immutable during lazy matching. Use the existing explicit hash/size/category resolver only after the user requests a match; attach the current local model descriptor transiently for preview and browser navigation, while leaving identity status and workflow content unchanged. (寤惰繜鍖归厤鏈熼棿淇濇寔宸蹭繚瀛樺伐浣滄祦璺緞鍜岃韩浠借褰曚笉鍙樸傚彧鏈夌敤鎴锋槑纭姹傚悗鎵嶈皟鐢ㄧ幇鏈夊搱甯/澶у皬/绫诲埆瑙ｆ瀽鍣紱鏈湴妯″瀷鎻忚堪鍙复鏃剁敤浜庨瑙堝拰璺宠浆锛屼笉鏀瑰彉韬唤鐘舵佹垨宸ヤ綔娴佸唴瀹广) + +## 55. Recipe Detail UI Refactoring: Consolidate Information and Guard State Transitions (鍚堝苟淇℃伅鍣煶涓庣姸鎬佸垏鎹㈠畧鍗) +**The Problem (闂)**: The Recipe Detail UI originally had too many tabs separating 'Overview', 'Models', and 'Parameters', causing unnecessary cognitive load. The Quick Queue feature was also highly prone to state bugs due to bypassing the canvas. During refactoring, removing the separate 'Models' tab and injecting them into the 'Overview' caused the preview loading mechanism (which was tied to checking `activeTab === 'models'`) to break. +(Recipe 璇︽儏椤靛師鏈垎浜嗗お澶氱殑 Tab锛堟瑙堛佹ā鍨嬨佸弬鏁帮級锛屽鑷翠俊鎭繃浜庡垎鏁ｃ佽鐭ヨ礋鎷呰繃閲嶃傚悓鏃 Quick Queue 鍔熻兘鐢变簬缁曡繃浜嗙敾甯冿紝鏋佹槗浜х敓鐘舵 Bug銆傚湪閲嶆瀯鏃讹紝鎶婃ā鍨嬪拰鍙傛暟鍏ㄥ杩涙瑙堥〉鍚庯紝鍘熸湰缁戝畾鍦ㄢ滃綋澶勪簬妯″瀷 Tab 鏃舵墠鍔犺浇棰勮鍥锯濈殑鏈哄埗鏂锛屽鑷存ā鍨嬪皝闈㈡棤娉曟樉绀恒) +**The Solution (鏂规)**: Consolidate noisy parameters into a `
` fold inside the Overview, simplifying the UI visually. Strip out Quick Queue and standardize on Open/Append logic. Most importantly, when changing Tab semantic structures, carefully audit and update any conditional logic tying background fetching (like preview loading) to active Tab state. +(灏嗘潅涔辩殑鍙傛暟鏀剁撼杩涜鎯呴〉鐨 `
` 鎶樺彔缁勪欢涓紝鏋佸ぇ闄嶄綆瑙嗚鍣煶銆傚交搴曞垹闄 Quick Queue 閫昏緫骞剁粺涓涓哄湪鐢诲竷涓搷浣溿傛渶閲嶈鐨勬槸锛屽湪鏀瑰彉 Tab 缁撴瀯鏃讹紝蹇呴』浠旂粏瀹¤骞舵洿鏂伴偅浜涗緷璧 Tab 鐘舵佺殑鍚庡彴鍔犺浇閫昏緫锛堝妯″瀷灏侀潰棰勫姞杞斤級锛屼繚璇佷粠鍗＄墖鍒拌鎯呴潰鏉跨殑蹇冩祦涓庢暟鎹祦涓鑷淬) diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 0df45d9..73d6a0d 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -106,9 +106,9 @@ Instead of fragmenting the class scope and losing context, we extracted all UI p * **Detail Panel (`anomalous-detail-panel`)**: Slides out when a specific model is clicked. * **Gallery Viewer (`ui_gallery.js`)**: A fullscreen modal for viewing images. * **Prompt Notes (`ui_notebooks.js`, legacy internal name)**: A specialized editor for composing prompts and drag-dropping LoRA/model nodes. Its shared user-facing surface is **Workspace / 鍒涗綔宸ヤ綔鍙**, with **Prompt Notes / 鎻愮ず璇嶇瑪璁** and **Workflow Recipes / 宸ヤ綔娴侀厤鏂** as its two sections. This presentation rename intentionally leaves notebook routes, storage, and internal property names stable for compatibility. -* **Workflow Recipes (`ui_recipes.js`, `ui_recipe_detail.js`)**: A second section inside the shared Workspace modal, not a separate top-level navigation surface. Recipes save the complete serialized graph and add two summary layers: adapters for common model/LoRA/prompt/sampling semantics, plus bounded generic widget summaries for every node (including third-party nodes). Save captures the serialized graph exactly once before the dialog; that snapshot, not a later live-canvas serialization, is the workflow sent to the API. Schema v3 introduced a canonical SHA-256 workflow fingerprint and explicit model-reference identity records; schema v4 adds optional recipe-owned model-preview snapshot descriptors. The card API stays light; the full graph and history are fetched only after edit, restore, or 鈥淰iew details.鈥 The detail panel owns Overview, Models & reproducibility, Parameters, and Versions tabs with one vertical scroll region. Opening Models & reproducibility resolves current previews through `/anomalous/resolve_paths_to_previews` using `exact_only: true` and a category folder boundary, so it never launches a recursive model scan. Its availability refresh also accepts only bounded exact references and never computes a full-file hash. The save dialog may pin any safe JSON-serializable widget, restores only pins still present on a canvas update, bind an output cover, and explicitly retain bounded model-preview snapshots. The edit dialog resolves safe primitive values from the full workflow by node ID/widget index before updating the matching serialized slot; bounded summaries are never the edit source. Structural edits are explicitly loaded onto the canvas and saved back through the same update path. Every update archives the previous full recipe locally (bounded to 20 versions). Missing-node preflight also reads authoritative workflow node types. `recipe_parser.js` never mutates the live canvas; an unfamiliar custom node may have a less detailed card but must never block saving. Restoring a graph or historical version requires explicit confirmation because it replaces user state. -* **Recipe interaction extensions (`recipe_diff.js`, `recipe_actions.js`)**: Recipe cards filter only lightweight name/notes/tags metadata. Version comparison fetches one validated historical JSON and returns bounded semantic changes without instantiating or mutating either graph. Append clones serialized nodes into the live graph with collision-free IDs, transactional link remapping, placement, selection, and rollback. Card and detail actions use a shared busy/restore discipline so a network or canvas failure cannot leave a button permanently disabled or trigger duplicate mutations. Open/Append UI actions share the same exported handlers from `ui_recipe_detail.js`, including dirty-canvas confirmation, missing-node warning, error feedback, and Workspace closure after success. -* **Recipe detail presentation**: Copy actions use visible temporary success/failure feedback. Name, notes, and tags can be edited inline from the loaded detail view and are persisted through the existing full-recipe update contract, preserving the serialized workflow and history behavior. Workflow fingerprints and model SHA-256 values are advanced information shown only inside collapsed disclosure panels; card and detail surfaces use bounded glass-style cards, responsive grids, and restrained hover transitions. Model references are rendered as independent responsive cards rather than one dense shared row, so each reference keeps its preview, status, and actions together. The Overview separates base model and each LoRA into one full-width composition block; sampling values remain in a compact key-value grid. +* **Workflow Recipes (`ui_recipes.js`, `ui_recipe_detail.js`)**: A second section inside the shared Workspace modal, not a separate top-level navigation surface. Recipes save the complete serialized graph and add two summary layers: adapters for common model/LoRA/prompt/sampling semantics, plus bounded generic widget summaries for every node (including third-party nodes). Save captures the serialized graph exactly once before the dialog; that snapshot, not a later live-canvas serialization, is the workflow sent to the API. Schema v3 introduced a canonical SHA-256 workflow fingerprint and explicit model-reference identity records; schema v4 adds optional recipe-owned model-preview snapshot descriptors. The card API stays light; the full graph and history are fetched only after edit, restore, or 鈥淰iew details.鈥 The detail panel owns Overview and Versions tabs. The 'Models' and 'Parameters' tabs were consolidated into the Overview (with Parameters neatly folded into `
`) to reduce cognitive load and avoid state desyncs. The save dialog may pin any safe JSON-serializable widget, restores only pins still present on a canvas update, bind an output cover, and explicitly retain bounded model-preview snapshots. The edit dialog resolves safe primitive values from the full workflow by node ID/widget index before updating the matching serialized slot; bounded summaries are never the edit source. Structural edits are explicitly loaded onto the canvas and saved back through the same update path. Every update archives the previous full recipe locally (bounded to 20 versions). Missing-node preflight also reads authoritative workflow node types. `recipe_parser.js` never mutates the live canvas. +* **Recipe interaction extensions (`recipe_diff.js`, `recipe_actions.js`)**: Recipe cards filter only lightweight name/notes/tags metadata. Version comparison fetches one validated historical JSON and returns bounded semantic changes without instantiating or mutating either graph. Append clones serialized nodes into the live graph with collision-free IDs, transactional link remapping, placement, selection, and rollback. Card and detail actions use a shared busy/restore discipline so a network or canvas failure cannot leave a button permanently disabled or trigger duplicate mutations. Open/Append UI actions share the same exported handlers from `ui_recipe_detail.js`. All Quick Queue functionality was removed to enforce a single execution path through the canvas. +* **Recipe detail presentation**: Copy actions use visible temporary success/failure feedback. Name, notes, and tags can be edited inline from the loaded detail view and are persisted through the existing full-recipe update contract, preserving the serialized workflow and history behavior. Workflow fingerprints and model SHA-256 values are advanced information shown only inside collapsed disclosure panels; card and detail surfaces use bounded glass-style cards, responsive grids, and restrained hover transitions. The Overview separates base model and each LoRA into one full-width composition block; sampling values remain in a compact key-value grid. * **Doctor Panel (`ui_doctor.js`)**: Diagnoses model health for individual nodes or the entire workflow. Includes "View Profile" functionality. ### NON-NEGOTIABLE: Recipe Presentation & Model Preview Boundaries / 閰嶆柟灞曠ず涓庢ā鍨嬮瑙堣竟鐣