Spaces:

Girlz
/

TokenTrace

Running

App Files Files Community

cccmmd commited on Jun 29

Commit

f25ae00

1 Parent(s): 9d0d4e9

chore: rename project to TokenTrace and set default language to Chinese

Browse files

Files changed (13) hide show

client/src/analysis.html +13 -17
client/src/assets/content/page-meta.json +13 -3
client/src/attribution.html +24 -14
client/src/branch_tree.html +12 -14
client/src/causal_flow.html +12 -15
client/src/chat.html +13 -15
client/src/compare.html +14 -21
client/src/index.html +4 -33
client/src/integrated.html +144 -0
client/src/logit_lens.html +22 -23
client/src/partials/app-header-analysis.html +33 -0
client/src/partials/app-header.html +30 -0
client/src/shared/lang/translations.ts +35 -2

client/src/analysis.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -15,21 +15,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <a href="compare.html?showTextRender=1&demos=/quick-start-1.json,/quick-start-2.json" target="_blank" class="compare-link" style="display: none;" title="Compare analysis results" data-i18n="text,title">Compare results</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-analysis.html -->
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <!-- 首页介绍内容容器（由 JS 动态加载） -->
                 <section id="home-intro-content" class="intro-section">
@@ -67,7 +53,7 @@
                         </div>
                     </div>
                     <div class="textarea-wrapper">
-                        <textarea id="test_text"></textarea>
                         <div class="button-group">
                             <div class="button-left">
                                 <div class="button-left-stack">
@@ -176,6 +162,16 @@
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
             <div id="results">
                 <div id="major_tooltip" class="tooltip">
                     <div class="currentToken"></div>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header-analysis.html -->
                 <!-- 首页介绍内容容器（由 JS 动态加载） -->
                 <section id="home-intro-content" class="intro-section">
                         </div>
                     </div>
                     <div class="textarea-wrapper">
+                        <textarea id="test_text" data-typewriter></textarea>
                         <div class="button-group">
                             <div class="button-left">
                                 <div class="button-left-stack">
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div class="empty-state empty-state-dashed">
+                <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <rect x="6" y="14" width="36" height="22" rx="0"/>
+                    <line x1="12" y1="20" x2="30" y2="20"/>
+                    <line x1="12" y1="26" x2="36" y2="26"/>
+                    <line x1="12" y1="32" x2="24" y2="32"/>
+                </svg>
+                <div class="empty-state-title" data-i18n>No analysis yet</div>
+                <div class="empty-state-description" data-i18n>Paste text on the left, then click Analyze to see token-level information density.</div>
+            </div>
             <div id="results">
                 <div id="major_tooltip" class="tooltip">
                     <div class="currentToken"></div>

client/src/assets/content/page-meta.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
-  "navPageKeys": ["causalFlow", "analysis", "attribution", "logitLens", "branchTree", "chat"],
   "pages": {
     "home": {
-      "title": "INNERSCOPE",
       "subtitle": "A toolbox for looking inside language models",
       "heartline": "",
       "formula": ""
@@ -29,13 +29,23 @@
     },
     "logitLens": {
       "title": "Logit Lens",
-      "subtitle": "Watch how the model's confidence builds layer by layer",
       "href": "logit_lens.html"
     },
     "branchTree": {
       "title": "Branch Tree",
       "subtitle": "Type a prefix and explore what the model might say next",
       "href": "branch_tree.html"
     }
   }
 }

 {
+  "navPageKeys": ["causalFlow", "analysis", "attribution", "logitLens", "branchTree", "chat", "integrated"],
   "pages": {
     "home": {
+      "title": "TokenTrace",
       "subtitle": "A toolbox for looking inside language models",
       "heartline": "",
       "formula": ""
     },
     "logitLens": {
       "title": "Logit Lens",
+      "subtitle": "Watch confidence build layer by layer, with AI-explained activations",
       "href": "logit_lens.html"
     },
     "branchTree": {
       "title": "Branch Tree",
       "subtitle": "Type a prefix and explore what the model might say next",
       "href": "branch_tree.html"
+    },
+    "compare": {
+      "title": "Info Highlight",
+      "subtitle": "Compare",
+      "href": "compare.html"
+    },
+    "integrated": {
+      "title": "Integrated Lab",
+      "subtitle": "All six lenses in one unified workflow",
+      "href": "integrated.html"
     }
   }
 }

client/src/attribution.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,19 +13,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <div class="chat-cached-history-bar">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
@@ -155,6 +143,15 @@
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
             <div class="attribution-method-panels">
                 <div class="attribution-gradient-panel">
                     <div class="attribution-panel-label" data-i18n>Gradient</div>
@@ -199,6 +196,19 @@
                 </span>
             </div>
             <div id="attribution_consistency_readout" class="attribution-consistency-readout"></div>
         </section>
     </main>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
                 <div class="chat-cached-history-bar">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div class="empty-state empty-state-dashed">
+                <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="24" cy="24" r="16"/>
+                    <path d="M24 8 L24 40 M8 24 L40 24"/>
+                    <circle cx="24" cy="24" r="6"/>
+                </svg>
+                <div class="empty-state-title" data-i18n>No attribution yet</div>
+                <div class="empty-state-description" data-i18n>Enter context and target text on the left, then click Analyze to see which words drive the prediction.</div>
+            </div>
             <div class="attribution-method-panels">
                 <div class="attribution-gradient-panel">
                     <div class="attribution-panel-label" data-i18n>Gradient</div>
                 </span>
             </div>
             <div id="attribution_consistency_readout" class="attribution-consistency-readout"></div>
+            <div class="attr-ae-panel" id="attr_ae_panel" style="display:none;">
+                <div class="attribution-panel-label" data-i18n>Activation Explainer</div>
+                <div class="ae-trigger-row">
+                    <span class="ae-trigger-hint" data-i18n>Click a context token above, then explain its activation</span>
+                    <button type="button" id="attr_ae_trigger" class="text-action-btn" disabled data-i18n>Explain activation</button>
+                </div>
+                <div id="attr_ae_loading" class="ae-loading" style="display:none" data-i18n>Loading activation explanation…</div>
+                <div id="attr_ae_result" class="ae-result" style="display:none">
+                    <div class="ae-field"><span class="ae-label" data-i18n>Explanation</span><span id="attr_ae_explanation" class="ae-value"></span></div>
+                    <div class="ae-field"><span class="ae-label" data-i18n>Confidence</span><span id="attr_ae_cosine" class="ae-cosine"></span><span>&nbsp;(roundtrip cosine)</span></div>
+                </div>
+                <div id="attr_ae_error" class="ae-error" style="display:none"></div>
+            </div>
         </section>
     </main>

client/src/branch_tree.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,19 +13,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <section id="branch_tree_examples" class="page-examples-section"></section>
@@ -63,6 +51,16 @@
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
             <div id="branch_tree_container" class="branch-tree-container">
                 <div id="branch_tree_surface" class="branch-tree-surface"></div>
                 <div id="branch_tree_limit_message" class="branch-tree-limit-message"></div>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
                 <section id="branch_tree_examples" class="page-examples-section"></section>
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div class="empty-state empty-state-dashed">
+                <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="4"/>
+                    <circle cx="36" cy="20" r="4"/>
+                    <circle cx="24" cy="36" r="4"/>
+                    <path d="M12 16 L12 24 L20 24 M20 24 L28 30 M28 30 L24 32 M20 24 L32 20"/>
+                </svg>
+                <div class="empty-state-title" data-i18n>No branch tree yet</div>
+                <div class="empty-state-description" data-i18n>Type a prefix on the left, then click Generate to explore what the model might say next.</div>
+            </div>
             <div id="branch_tree_container" class="branch-tree-container">
                 <div id="branch_tree_surface" class="branch-tree-surface"></div>
                 <div id="branch_tree_limit_message" class="branch-tree-limit-message"></div>

client/src/causal_flow.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,19 +13,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <div class="chat-cached-history-bar chat-cached-history-bar--dual">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper gen-attr-cached-demos-wrap">
@@ -450,7 +438,16 @@
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
-            <div id="results" class="attribution-inspector-surface gen-attr-results-surface LMF"></div>
         </section>
     </main>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
                 <div class="chat-cached-history-bar chat-cached-history-bar--dual">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper gen-attr-cached-demos-wrap">
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div id="results" class="attribution-inspector-surface gen-attr-results-surface LMF">
+                <div class="empty-state empty-state-dashed" id="causal_flow_empty">
+                    <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <circle cx="24" cy="24" r="20"/>
+                        <path d="M8 24 L16 24 L20 14 L28 34 L32 24 L40 24"/>
+                    </svg>
+                    <div class="empty-state-title" data-i18n>No attribution data yet</div>
+                    <div class="empty-state-description" data-i18n>Enter a prompt on the left, then click Analyze to see the causal flow DAG.</div>
+                </div>
+            </div>
         </section>
     </main>

client/src/chat.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,19 +13,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <div class="chat-cached-history-bar">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
@@ -100,7 +88,7 @@
                             </div>
                             <div class="textarea-wrapper chat-prompt-textarea-block">
                                 <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
-                                    <textarea id="chat_user_text"></textarea>
                                     <ul id="chat_user_prompt_history_dropdown" class="semantic-search-history-dropdown"></ul>
                                 </div>
                             </div>
@@ -177,6 +165,16 @@
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
             <div class="chat-right-stack">
                 <div class="chat-readout-body">
                     <div id="chat_segments_container" class="chat-segments-container"></div>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
                 <div class="chat-cached-history-bar">
                     <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
                             </div>
                             <div class="textarea-wrapper chat-prompt-textarea-block">
                                 <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
+                                    <textarea id="chat_user_text" data-typewriter></textarea>
                                     <ul id="chat_user_prompt_history_dropdown" class="semantic-search-history-dropdown"></ul>
                                 </div>
                             </div>
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div class="empty-state empty-state-dashed">
+                <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M8 12 L40 12 L40 36 L8 36 Z"/>
+                    <line x1="14" y1="20" x2="34" y2="20"/>
+                    <line x1="14" y1="26" x2="28" y2="26"/>
+                    <line x1="14" y1="32" x2="32" y2="32"/>
+                </svg>
+                <div class="empty-state-title" data-i18n>No conversation yet</div>
+                <div class="empty-state-description" data-i18n>Type your message on the left, then click Send to chat and inspect every token the model produces.</div>
+            </div>
             <div class="chat-right-stack">
                 <div class="chat-readout-body">
                     <div id="chat_segments_container" class="chat-segments-container"></div>

client/src/compare.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -15,26 +15,19 @@
     <div class="main_frame">
         <!-- Grid 容器包裹工具栏和内容区 -->
         <div class="compare-wrapper">
-            <!-- 顶部工具栏 -->
-            <div class="app-page-toolbar">
-                <h1 class="compare-toolbar-title">
-                    <span class="compare-toolbar-title-app" data-i18n>Info Highlight</span>
-                    <span class="compare-toolbar-title-sep" aria-hidden="true">/</span>
-                    <span class="compare-toolbar-title-page" data-i18n>Compare</span>
-                </h1>
-                <div class="app-page-toolbar-actions">
-                    <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
-                        <input type="checkbox" id="show_text_render_toggle">
-                        <span data-i18n>Show Text Rendering</span>
-                    </label>
-                    <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
-                        <input type="checkbox" id="model_diff_mode_toggle">
-                        <span data-i18n>Diff Mode</span>
-                    </label>
-                    <button id="edit_mode_toggle" data-i18n>Edit</button>
-                    <button id="clear_demos_btn" data-i18n>Clear</button>
-                    <button id="add_demos_btn" data-i18n>Add</button>
-                </div>
             </div>
             <!-- 对比结果展示区 -->

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <div class="main_frame">
         <!-- Grid 容器包裹工具栏和内容区 -->
         <div class="compare-wrapper">
+            <!-- INCLUDE partials/app-header.html -->
+            <div class="app-header-extra compare-header-extra">
+                <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
+                    <input type="checkbox" id="show_text_render_toggle">
+                    <span data-i18n>Show Text Rendering</span>
+                </label>
+                <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
+                    <input type="checkbox" id="model_diff_mode_toggle">
+                    <span data-i18n>Diff Mode</span>
+                </label>
+                <button id="edit_mode_toggle" data-i18n>Edit</button>
+                <button id="clear_demos_btn" data-i18n>Clear</button>
+                <button id="add_demos_btn" data-i18n>Add</button>
             </div>
             <!-- 对比结果展示区 -->

client/src/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -12,42 +12,13 @@
 <body class="nav-landing-page">
-    <div class="nav-landing-settings settings-menu-wrapper">
-        <!-- INCLUDE partials/settings-toolbar-controls.html -->
-        <div id="settings_menu" class="settings-menu" style="display: none;">
-            <!-- INCLUDE partials/settings-menu-common-mid.html -->
-            <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-        </div>
-    </div>
     <main class="nav-landing-main">
-        <!-- Hero Section -->
-        <header class="nav-landing-hero">
-            <div class="nav-landing-hero-grid">
-                <div class="nav-landing-hero-text">
-                    <h1 class="nav-landing-title" data-page-title data-i18n></h1>
-                    <p class="nav-landing-subtitle" data-page-subtitle data-i18n></p>
-                </div>
-                <div class="nav-landing-hero-lens">
-                    <!-- InfoLens Aperture SVG -->
-                    <svg class="lens-aperture" viewBox="0 0 120 120" aria-hidden="true">
-                        <circle cx="60" cy="60" r="55" class="lens-aperture-blade"/>
-                        <circle cx="60" cy="60" r="40" class="lens-aperture-blade"/>
-                        <circle cx="60" cy="60" r="25" class="lens-aperture-blade"/>
-                        <circle cx="60" cy="60" r="48" class="lens-aperture-ring"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3" transform="rotate(60 60 60)"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3" transform="rotate(120 60 60)"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3" transform="rotate(180 60 60)"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3" transform="rotate(240 60 60)"/>
-                        <path d="M60,5 L63,25 L57,25 Z" class="lens-aperture-blade" opacity="0.3" transform="rotate(300 60 60)"/>
-                    </svg>
-                </div>
-            </div>
-        </header>
-        <!-- Module Grid -->
         <nav class="nav-landing-module-grid" aria-label="App pages">
             <a class="nav-landing-module-cell" href="causal_flow.html" target="_blank" rel="noopener" data-nav-page="causalFlow" data-i18n="title"></a>
             <a class="nav-landing-module-cell" href="analysis.html" target="_blank" rel="noopener" data-nav-page="analysis" data-i18n="title"></a>
             <a class="nav-landing-module-cell" href="attribution.html" target="_blank" rel="noopener" data-nav-page="attribution" data-i18n="title"></a>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
 <body class="nav-landing-page">
+    <!-- INCLUDE partials/app-header.html -->
     <main class="nav-landing-main">
+        <p class="nav-landing-slogan" data-page-subtitle data-i18n></p>
         <nav class="nav-landing-module-grid" aria-label="App pages">
+            <a class="nav-landing-module-cell" href="integrated.html" target="_blank" rel="noopener" data-nav-page="integrated" data-i18n="title"></a>
             <a class="nav-landing-module-cell" href="causal_flow.html" target="_blank" rel="noopener" data-nav-page="causalFlow" data-i18n="title"></a>
             <a class="nav-landing-module-cell" href="analysis.html" target="_blank" rel="noopener" data-nav-page="analysis" data-i18n="title"></a>
             <a class="nav-landing-module-cell" href="attribution.html" target="_blank" rel="noopener" data-nav-page="attribution" data-i18n="title"></a>

client/src/integrated.html ADDED Viewed

	@@ -0,0 +1,144 @@

+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title data-i18n>Integrated Lab - All six lenses in one unified workflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="integrated.css">
+</head>
+<body class="integrated-page gen-attribute-page">
+    <main class="main_frame integrated-frame">
+        <section class="left_panel integrated-left">
+            <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
+                <section class="input-section">
+                    <div class="input-header">
+                        <span class="semantic-submode-label" data-i18n>Prompt</span>
+                        <div class="text-action-buttons-top">
+                            <div class="textarea-counter" id="integrated_text_count_display">
+                                <span id="integrated_text_count_value">0</span>
+                                <span data-i18n>chars</span>
+                            </div>
+                            <button type="button" id="integrated_clear_btn"
+                                    class="text-action-btn" data-i18n>Clear</button>
+                        </div>
+                    </div>
+                    <div class="textarea-wrapper chat-prompt-textarea-block">
+                        <textarea id="integrated_prompt_text" data-typewriter></textarea>
+                    </div>
+                    <!-- Model + max tokens -->
+                    <div class="semantic-submode-row" id="integrated_options_row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label" for="integrated_model_select">Model</label>
+                            <select id="integrated_model_select" class="semantic-submode-control"></select>
+                        </span>
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label" for="integrated_max_tokens_input">Max tokens</label>
+                            <input type="number" id="integrated_max_tokens_input" class="semantic-submode-control gen-attr-dag-measure-width-input" value="30" min="1" max="200" />
+                        </span>
+                    </div>
+                    <div class="textarea-wrapper chat-prompt-actions-row">
+                        <div class="button-group">
+                            <div class="button-left">
+                                <div class="button-left-primary">
+                                    <button type="button" id="integrated_submit_btn"
+                                            class="primary-btn inactive" disabled data-i18n>Start</button>
+                                    <div class="generation-status-slot loader-small-container">
+                                        <div class="loadersmall"></div>
+                                        <span id="integrated_complete_reason"
+                                              class="generation-end-reason"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </section>
+        <div class="resizer" id="resizer_left"></div>
+        <section class="center_panel integrated-center">
+            <div id="integrated_dag_results" class="attribution-inspector-surface gen-attr-results-surface LMF">
+                <div class="empty-state empty-state-dashed" id="integrated_empty">
+                    <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none"
+                         stroke="currentColor" stroke-width="1" stroke-linecap="round"
+                         stroke-linejoin="round" aria-hidden="true">
+                        <circle cx="24" cy="24" r="20"/>
+                        <path d="M8 24 L16 24 L20 14 L28 34 L32 24 L40 24"/>
+                    </svg>
+                    <div class="empty-state-title" data-i18n>No attribution data yet</div>
+                    <div class="empty-state-description" data-i18n>Enter a prompt on the left, then click Start to generate the causal flow DAG. Click any node to explore all six lenses.</div>
+                </div>
+            </div>
+        </section>
+        <div class="resizer" id="resizer_right"></div>
+        <section class="right_panel integrated-right">
+            <nav class="integrated-panel-tabs" id="integrated_panel_tabs">
+                <button type="button" class="integrated-tab-btn is-active"
+                        data-panel="highlight" data-i18n>Highlight</button>
+                <button type="button" class="integrated-tab-btn"
+                        data-panel="attribution" data-i18n>Attribution</button>
+                <button type="button" class="integrated-tab-btn"
+                        data-panel="logit" data-i18n>Logit Lens</button>
+                <button type="button" class="integrated-tab-btn"
+                        data-panel="branch" data-i18n>Branch</button>
+                <button type="button" class="integrated-tab-btn"
+                        data-panel="activation" data-i18n>Activation</button>
+            </nav>
+            <div class="integrated-panel-body">
+                <div class="integrated-panel-placeholder" id="integrated_panel_placeholder">
+                    <div class="empty-state-title" data-i18n>Select a token</div>
+                    <div class="empty-state-description" data-i18n>Click a node in the DAG to inspect it with all six lenses.</div>
+                </div>
+                <div class="integrated-panel-content" id="integrated_highlight_panel" hidden>
+                    <div class="attribution-panel-label" data-i18n>Info Highlight</div>
+                    <div id="integrated_highlight_surface" class="integrated-highlight-surface"></div>
+                </div>
+                <div class="integrated-panel-content" id="integrated_attribution_panel" hidden>
+                    <div class="attribution-panel-label" data-i18n>Context Attribution</div>
+                    <div id="integrated_attribution_surface" class="attribution-inspector-surface LMF"></div>
+                </div>
+                <div class="integrated-panel-content" id="integrated_logit_panel" hidden>
+                    <div class="attribution-panel-label" data-i18n>Logit Lens</div>
+                    <div id="integrated_logit_heatmap" class="logit-lens-heatmap"></div>
+                    <div id="integrated_logit_trajectory" class="logit-lens-trajectory" style="height:auto;min-height:0"></div>
+                </div>
+                <div class="integrated-panel-content" id="integrated_branch_panel" hidden>
+                    <div class="attribution-panel-label" data-i18n>Branch Tree</div>
+                    <div id="integrated_branch_surface" class="branch-tree-surface"></div>
+                </div>
+                <div class="integrated-panel-content" id="integrated_activation_panel" hidden>
+                    <div class="attribution-panel-label" data-i18n>Activation Explainer</div>
+                    <div id="integrated_ae_loading" class="ae-loading" style="display:none" data-i18n>Loading activation explanation…</div>
+                    <div id="integrated_ae_result" class="ae-result" style="display:none">
+                        <div class="ae-field"><span class="ae-label" data-i18n>Explanation</span><span id="integrated_ae_explanation" class="ae-value"></span></div>
+                        <div class="ae-field"><span class="ae-label" data-i18n>Confidence</span><span id="integrated_ae_cosine" class="ae-cosine"></span></div>
+                    </div>
+                    <div id="integrated_ae_error" class="ae-error" style="display:none"></div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <div id="toast" class="toast"></div>
+    <script src="vendor.js"></script>
+    <script src="integrated.js"></script>
+</body>
+</html>

client/src/logit_lens.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,19 +13,7 @@
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
-                <header class="app-page-toolbar app-page-toolbar--bleed">
-                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
-                    <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="INNERSCOPE" data-i18n="text,title">INNERSCOPE</a>
-                        <div class="settings-menu-wrapper">
-                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
-                            <div id="settings_menu" class="settings-menu" style="display: none;">
-                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
-                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
-                            </div>
-                        </div>
-                    </div>
-                </header>
                 <section id="logit_lens_examples" class="page-examples-section"></section>
@@ -85,20 +73,31 @@
                 </section>
             </div>
-            <div class="logit-lens-panel" id="ae_panel" style="display:none;">
-                <div class="attribution-panel-label">Activation Explainer / 激活解释</div>
-                <div id="ae_loading" class="ae-loading" style="display:none">🧠 正在推理... 激活解释需要较长时间（约 5-15 秒）</div>
-                <div id="ae_result" class="ae-result" style="display:none">
-                    <div class="ae-field"><span class="ae-label">解释</span><span id="ae_explanation" class="ae-value"></span></div>
-                    <div class="ae-field"><span class="ae-label">可信度</span><span id="ae_cosine" class="ae-cosine"></span><span>&nbsp;(roundtrip cosine)</span></div>
-                </div>
-                <div id="ae_error" class="ae-error" style="display:none"></div>
-            </div>
         </section>
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
             <div class="logit-lens-panel" id="logit_lens_panel" style="display:none;">
                 <div class="attribution-panel-label" data-i18n>Logit Lens</div>
                 <div class="logit-lens-chart-hint" data-i18n>点击折线上的点，查看该层的候选词分布</div>

 <!DOCTYPE html>
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <main class="main_frame">
         <section class="left_panel">
             <div class="floating_content">
+                <!-- INCLUDE partials/app-header.html -->
                 <section id="logit_lens_examples" class="page-examples-section"></section>
                 </section>
             </div>
         </section>
         <div class="resizer" id="resizer"></div>
         <section class="right_panel">
+            <div class="empty-state empty-state-dashed">
+                <svg class="empty-state-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M8 32 L16 28 L24 20 L32 12 L40 8"/>
+                    <circle cx="16" cy="28" r="3"/>
+                    <circle cx="24" cy="20" r="3"/>
+                    <circle cx="32" cy="12" r="3"/>
+                    <circle cx="40" cy="8" r="3"/>
+                </svg>
+                <div class="empty-state-title" data-i18n>No logit lens yet</div>
+                <div class="empty-state-description" data-i18n>Enter text on the left, then click Analyze to see how the model's confidence builds layer by layer.</div>
+            </div>
+            <div class="logit-lens-panel" id="ae_panel" style="display:none;">
+                <div class="attribution-panel-label" data-i18n>Activation Explainer</div>
+                <div id="ae_loading" class="ae-loading" style="display:none" data-i18n>Loading activation explanation…</div>
+                <div id="ae_result" class="ae-result" style="display:none">
+                    <div class="ae-field"><span class="ae-label" data-i18n>Explanation</span><span id="ae_explanation" class="ae-value"></span></div>
+                    <div class="ae-field"><span class="ae-label" data-i18n>Confidence</span><span id="ae_cosine" class="ae-cosine"></span><span>&nbsp;(roundtrip cosine)</span></div>
+                </div>
+                <div id="ae_error" class="ae-error" style="display:none"></div>
+            </div>
             <div class="logit-lens-panel" id="logit_lens_panel" style="display:none;">
                 <div class="attribution-panel-label" data-i18n>Logit Lens</div>
                 <div class="logit-lens-chart-hint" data-i18n>点击折线上的点，查看该层的候选词分布</div>

client/src/partials/app-header-analysis.html ADDED Viewed

	@@ -0,0 +1,33 @@

+<header class="app-header">
+    <div class="app-header-brand">
+        <a href="index.html" class="app-header-logo" title="TokenTrace" aria-label="TokenTrace" data-i18n="title">
+            <svg class="app-header-logo-aperture" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="11" class="lens-aperture-blade"/>
+                <circle cx="12" cy="12" r="7" class="lens-aperture-blade"/>
+                <circle cx="12" cy="12" r="9.5" class="lens-aperture-ring"/>
+            </svg>
+            <span class="app-header-logo-text" data-i18n>TokenTrace</span>
+        </a>
+    </div>
+    <div class="app-header-title-block">
+        <h1 class="page-toolbar-title">
+            <span class="title-main-line">
+                <span data-page-title data-i18n></span>
+                <span class="title-tagline" data-page-subtitle data-i18n></span>
+            </span>
+        </h1>
+    </div>
+    <div class="app-header-extra">
+        <a href="compare.html?showTextRender=1&demos=/quick-start-1.json,/quick-start-2.json" target="_blank" class="compare-link" style="display: none;" title="Compare analysis results" data-i18n="text,title">Compare results</a>
+    </div>
+    <div class="app-header-actions">
+        <div class="settings-menu-wrapper">
+            <!-- INCLUDE partials/settings-toolbar-controls.html -->
+            <div id="settings_menu" class="settings-menu" style="display: none;">
+                <!-- INCLUDE partials/settings-menu-analysis.html -->
+                <!-- INCLUDE partials/settings-menu-common-mid.html -->
+                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
+            </div>
+        </div>
+    </div>
+</header>

client/src/partials/app-header.html ADDED Viewed

	@@ -0,0 +1,30 @@

+<header class="app-header">
+    <div class="app-header-brand">
+        <a href="index.html" class="app-header-logo" title="TokenTrace" aria-label="TokenTrace" data-i18n="title">
+            <svg class="app-header-logo-aperture" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="11" class="lens-aperture-blade"/>
+                <circle cx="12" cy="12" r="7" class="lens-aperture-blade"/>
+                <circle cx="12" cy="12" r="9.5" class="lens-aperture-ring"/>
+            </svg>
+            <span class="app-header-logo-text" data-i18n>TokenTrace</span>
+        </a>
+    </div>
+    <div class="app-header-title-block">
+        <h1 class="page-toolbar-title">
+            <span class="title-main-line">
+                <span data-page-title data-i18n></span>
+                <span class="title-tagline" data-page-subtitle data-i18n></span>
+            </span>
+        </h1>
+    </div>
+    <div class="app-header-extra"></div>
+    <div class="app-header-actions">
+        <div class="settings-menu-wrapper">
+            <!-- INCLUDE partials/settings-toolbar-controls.html -->
+            <div id="settings_menu" class="settings-menu" style="display: none;">
+                <!-- INCLUDE partials/settings-menu-common-mid.html -->
+                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
+            </div>
+        </div>
+    </div>
+</header>

client/src/shared/lang/translations.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export const translations: Translations = {
         // - client/src/content/home.en.html
         // - client/src/content/home.zh.html
         // 由 contentLoader.ts 动态加载
-        'INNERSCOPE': 'INNERSCOPE 信息透镜',
         'Info Lens': 'Info Lens 信息透镜',
         'A toolbox for looking inside language models': '探索大模型内部的可视化工具箱',
         'A toolbox for exploring the informational nature of LLMs and language': '探索大模型内部的可视化工具箱',
@@ -39,7 +39,7 @@ export const translations: Translations = {
         'Trace how information travels through the model': '输入一段话，生成信息流图，追踪信息如何在模型中传递',
         '- explore the context-attribution DAG': '输入一段话，生成归因图追踪信息传播路径',
         // 合成标题串（<title>）：英文 key 与 injectPageMeta documentTitleEn 拼接一致
-        'INNERSCOPE - A toolbox for looking inside language models': 'INNERSCOPE 信息透镜 - 探索大模型内部的可视化工具箱',
         'Info Lens - A toolbox for exploring the informational nature of LLMs and language': '信息透镜 - 探索大模型内部的可视化工具箱',
         'Info Highlight - Paste text to see which words surprise the model most': '信息高亮 - 粘贴一段文字，看模型认为哪些词最"意外"',
         "Info Highlight - highlight the 'informative' parts": '信息高亮 - 粘贴任意文本，模型自动标出预测难度大的词汇',
@@ -50,10 +50,13 @@ export const translations: Translations = {
         'Causal Flow - Trace how information travels through the model': '因果流 - 输入一段话，生成信息流图，追踪信息如何在模型中传递',
         'LLM Causal Flow - explore the context-attribution DAG': '因果流 - 输入一段话，生成归因图追踪信息传播路径',
         'Context Attribution - attribute a predicted token to its context (Gradient & Ablation)': '上下文归因 - 输入上下文与目标词，量化每个来源的贡献份额',
         "Logit Lens - Watch how the model's confidence builds layer by layer": '逐层解码 - 输入句子，看模型在每一层怎么逐步确定每个词',
         'Logit Lens - per-layer prediction trajectory': '逐层解码 - 输入句子，逐层追踪模型对每个词的预测信心',
         'Branch Tree - Type a prefix and explore what the model might say next': '分支树 - 输入开头，看模型接下来可能接哪些词',
         'Branch Tree - explore next-token candidates': '分支树 - 输入前缀，展开模型预测的 top-k 候选分支',
         'New': '新功能',
         'New: Ablation attribution': '新增：消融归因',
         'Gradient': '梯度',
@@ -517,5 +520,35 @@ export const translations: Translations = {
         'Activation Explainer': '激活解释',
         'Activation explain failed': '激活解释失败',
         'Loading activation explanation…': '正在推理激活解释…',
     }
 };

         // - client/src/content/home.en.html
         // - client/src/content/home.zh.html
         // 由 contentLoader.ts 动态加载
+        'TokenTrace': 'TokenTrace 信息透镜',
         'Info Lens': 'Info Lens 信息透镜',
         'A toolbox for looking inside language models': '探索大模型内部的可视化工具箱',
         'A toolbox for exploring the informational nature of LLMs and language': '探索大模型内部的可视化工具箱',
         'Trace how information travels through the model': '输入一段话，生成信息流图，追踪信息如何在模型中传递',
         '- explore the context-attribution DAG': '输入一段话，生成归因图追踪信息传播路径',
         // 合成标题串（<title>）：英文 key 与 injectPageMeta documentTitleEn 拼接一致
+        'TokenTrace - A toolbox for looking inside language models': 'TokenTrace 信息透镜 - 探索大模型内部的可视化工具箱',
         'Info Lens - A toolbox for exploring the informational nature of LLMs and language': '信息透镜 - 探索大模型内部的可视化工具箱',
         'Info Highlight - Paste text to see which words surprise the model most': '信息高亮 - 粘贴一段文字，看模型认为哪些词最"意外"',
         "Info Highlight - highlight the 'informative' parts": '信息高亮 - 粘贴任意文本，模型自动标出预测难度大的词汇',
         'Causal Flow - Trace how information travels through the model': '因果流 - 输入一段话，生成信息流图，追踪信息如何在模型中传递',
         'LLM Causal Flow - explore the context-attribution DAG': '因果流 - 输入一段话，生成归因图追踪信息传播路径',
         'Context Attribution - attribute a predicted token to its context (Gradient & Ablation)': '上下文归因 - 输入上下文与目标词，量化每个来源的贡献份额',
+        'Watch confidence build layer by layer, with AI-explained activations': '逐层观察预测信心如何成型，并配 AI 激活解释',
         "Logit Lens - Watch how the model's confidence builds layer by layer": '逐层解码 - 输入句子，看模型在每一层怎么逐步确定每个词',
+        'Logit Lens - Watch confidence build layer by layer, with AI-explained activations': '逐层解码 - 逐层观察预测信心如何成型，并配 AI 激活解释',
         'Logit Lens - per-layer prediction trajectory': '逐层解码 - 输入句子，逐层追踪模型对每个词的预测信心',
         'Branch Tree - Type a prefix and explore what the model might say next': '分支树 - 输入开头，看模型接下来可能接哪些词',
         'Branch Tree - explore next-token candidates': '分支树 - 输入前缀，展开模型预测的 top-k 候选分支',
+        'Info Highlight - Compare': '信息高亮 - 对比',
         'New': '新功能',
         'New: Ablation attribution': '新增：消融归因',
         'Gradient': '梯度',
         'Activation Explainer': '激活解释',
         'Activation explain failed': '激活解释失败',
         'Loading activation explanation…': '正在推理激活解释…',
+        'Explanation': '解释',
+        'Confidence': '可信度',
+        'Click a context token above, then explain its activation': '点击上方的上下文 token，然后解释其激活',
+        'Explain activation': '解释激活',
+        'No attribution data yet': '暂无归因数据',
+        'Enter a prompt on the left, then click Analyze to see the causal flow DAG.': '在左侧输入提示词，然后点击分析以查看因果流 DAG 图。',
+        'No analysis yet': '暂无分析结果',
+        'Paste text on the left, then click Analyze to see token-level information density.': '在左侧粘贴文本，然后点击分析查看 token 级信息密度。',
+        'No attribution yet': '暂无归因结果',
+        'Enter context and target text on the left, then click Analyze to see which words drive the prediction.': '在左侧输入上下文和目标文本，然后点击分析查看哪些词驱动了预测。',
+        'No logit lens yet': '暂无逐层解码结果',
+        'Enter text on the left, then click Analyze to see how the model\'s confidence builds layer by layer.': '在左侧输入文本，然后点击分析查看模型的置信度如何逐层累积。',
+        'No branch tree yet': '暂无分支树',
+        'Type a prefix on the left, then click Generate to explore what the model might say next.': '在左侧输入前缀，然后点击生成探索模型可能输出的后续内容。',
+        'No conversation yet': '暂无对话',
+        'Type your message on the left, then click Send to chat and inspect every token the model produces.': '在左侧输入消息，然后点击发送开始对话并检查模型生成的每个 token。',
+        'Integrated Lab': '集成实验室',
+        'All six lenses in one unified workflow': '六大功能集成工作流',
+        'Integrated Lab - All six lenses in one unified workflow': '集成实验室 - 六大功能集成工作流',
+        'Highlight': '信息高亮',
+        'Branch': '分叉树',
+        'Activation': '激活解释',
+        'Start': '开始',
+        'Prompt': '提示词',
+        'Model': '模型',
+        'Max tokens': '最大 token 数',
+        'Select a token': '选择一个 token',
+        'Click a node in the DAG to inspect it with all six lenses.': '点击 DAG 中的节点，用六种视角检视它。',
+        'Enter a prompt on the left, then click Start to generate the causal flow DAG. Click any node to explore all six lenses.': '在左侧输入提示词，点击开始生成因果流 DAG。点击任意节点即可用六种视角探索。',
+        'Conversation': '对话',
     }
 };