Enhance model selection and demo management

- Updated server.py to include help information for registered models in the argument parser.
- Adjusted max_token_length for local_mps in runtime_config.py to improve performance.
- Added char surprisal histogram support in compare.ts, including rendering and updating logic.
- Refactored demo file handling in start.ts and serverDemoController.ts to streamline filename management.
- Updated demo resource loading to use a new identifier format in demoResourceLoader.ts.
- Improved highlight functionality for char surprisal in highlightUtils.ts.
- Enhanced app state management to track current file names across various components.

backend/runtime_config.py

@@ -59,7 +59,7 @@ RUNTIME_CONFIGS = {
         },
         # 本地 Apple Silicon（保守）
         "local_mps": {
-            "max_token_length": 5000,
+            "max_token_length": 2000,
             "chunk_size": 512
         }
     },
@@ -70,7 +70,7 @@ RUNTIME_CONFIGS = {
             "chunk_size": 256
         },
         "local_mps": {
-            "max_token_length": 1000,
+            "max_token_length": 2000,
             "chunk_size": 128
         }
     },

client/src/ts/compare.ts

@@ -110,6 +110,7 @@ type DemoColumnData = {
     lmfInstance?: GLTR_Text_Box;  // LMF实例引用（对比模式下使用）
     histograms: {
         stats_frac: Histogram | null;
+        stats_char_frac: Histogram | null;
         stats_surprisal_progress: ScatterPlot | null;
     };
 };
@@ -218,6 +219,7 @@ window.onload = () => {
         const metricsId = `text_metrics_${safeId}`;
         const errorId = `error_${safeId}`;
         const statsFracId = `stats_frac_${safeId}`;
+        const statsCharFracId = `stats_char_frac_${safeId}`;
         const statsProgressId = `stats_surprisal_progress_${safeId}`;
         const textRenderId = `text_render_${safeId}`;
 
@@ -251,6 +253,10 @@ window.onload = () => {
                         <div>token surprisal histogram</div>
                         <svg id="${statsFracId}"></svg>
                     </div>
+                    <div style="display:block;text-align: center;margin-bottom: 20px;">
+                        <div id="char_histogram_title_${safeId}">char surprisal histogram</div>
+                        <svg id="${statsCharFracId}"></svg>
+                    </div>
                     <div style="display:block;text-align: center;margin-bottom: 20px;">
                         <div>surprisal vs token progress</div>
                         <svg id="${statsProgressId}"></svg>
@@ -309,7 +315,7 @@ window.onload = () => {
 
     // 为单个列渲染统计图表（使用ID）
     const renderStatsForColumn = (id: string, columnData: DemoColumnData) => {
-        if (!columnData.stats || !columnData.histograms.stats_frac || !columnData.histograms.stats_surprisal_progress) {
+        if (!columnData.stats || !columnData.histograms.stats_frac || !columnData.histograms.stats_char_frac || !columnData.histograms.stats_surprisal_progress) {
             return;
         }
 
@@ -317,7 +323,7 @@ window.onload = () => {
         const isDiffColumn = compareMode && columnData.diffStats && !isBaseColumn(id);
         const safeId = toSafeId(id);
 
-        // 更新 token surprisal histogram（保持不变）
+        // 更新 token surprisal histogram（保持不变，不显示差分）
         columnData.histograms.stats_frac.update({
             data: stats.tokenSurprisals,
             label: "surprisal",
@@ -328,6 +334,56 @@ window.onload = () => {
             averageLabel: 'bits/token'
         });
 
+        // 更新 char surprisal histogram（Diff列显示差分）
+        if (isDiffColumn && columnData.diffStats) {
+            // Diff列：显示Δchar surprisal histogram
+            const deltaCharSurprisals = columnData.diffStats.deltaCharSurprisals;
+            
+            // 使用统一的差分颜色配置
+            const deltaColorScale = createDiffColorScale();
+            const D = DIFF_CONFIG.THRESHOLD;
+            
+            // 计算平均差分
+            const deltaAverage = deltaCharSurprisals.length > 0
+                ? deltaCharSurprisals.reduce((sum, val) => sum + val, 0) / deltaCharSurprisals.length
+                : 0;
+            
+            const label = "Δchar surprisal histogram";
+            columnData.histograms.stats_char_frac.update({
+                data: deltaCharSurprisals,
+                label: label,
+                no_bins: 20,
+                extent: [-D, D],
+                colorScale: deltaColorScale,
+                averageValue: deltaAverage,
+                averageLabel: 'Δ bits/char'
+            });
+            
+            // 更新标题文本
+            const titleElement = document.getElementById(`char_histogram_title_${safeId}`);
+            if (titleElement) {
+                titleElement.textContent = label;
+            }
+        } else {
+            // Base列或非对比模式：显示原始char surprisal histogram
+            const label = "char surprisal histogram";
+            columnData.histograms.stats_char_frac.update({
+                data: stats.charSurprisals,
+                label: label,
+                no_bins: 20,
+                extent: [0, 20],
+                colorScale: surprisalColorScale,
+                averageValue: stats.charAverage ?? undefined,
+                averageLabel: 'bits/char'
+            });
+            
+            // 更新标题文本
+            const titleElement = document.getElementById(`char_histogram_title_${safeId}`);
+            if (titleElement) {
+                titleElement.textContent = label;
+            }
+        }
+
         // 更新 surprisal progress scatter plot（保持不变）
         if (stats.tokenSurprisals && stats.tokenSurprisals.length > 0) {
             columnData.histograms.stats_surprisal_progress.update({
@@ -511,6 +567,7 @@ window.onload = () => {
     const initializeColumnVisualizations = (id: string, columnData: DemoColumnData): void => {
         const safeId = toSafeId(id);
         const statsFracId = `#stats_frac_${safeId}`;
+        const statsCharFracId = `#stats_char_frac_${safeId}`;
         const statsProgressId = `#stats_surprisal_progress_${safeId}`;
 
         // 创建 Histogram 实例
@@ -520,6 +577,12 @@ window.onload = () => {
             { width: 400, height: 200 }
         );
 
+        columnData.histograms.stats_char_frac = new Histogram(
+            d3.select(statsCharFracId),
+            eventHandler,
+            { width: 400, height: 200 }
+        );
+
         // 创建 ScatterPlot 实例
         columnData.histograms.stats_surprisal_progress = new ScatterPlot(
             d3.select(statsProgressId),
@@ -579,13 +642,19 @@ window.onload = () => {
     };
 
     // 根据 histogram source 解析出列的 safeId 和直方图类型
-    const parseHistogramSource = (source?: string): { safeId: string; histogramType: 'token' } | null => {
+    const parseHistogramSource = (source?: string): { safeId: string; histogramType: 'token' | 'char' } | null => {
         if (!source) {
             return null;
         }
 
+        const charPrefix = 'stats_char_frac';
         const tokenPrefix = 'stats_frac';
 
+        if (source.startsWith(charPrefix)) {
+            const safeId = source.substring(charPrefix.length).replace(/^_/, '');
+            return safeId ? { safeId, histogramType: 'char' } : null;
+        }
+
         if (source.startsWith(tokenPrefix)) {
             const safeId = source.substring(tokenPrefix.length).replace(/^_/, '');
             return safeId ? { safeId, histogramType: 'token' } : null;
@@ -628,7 +697,7 @@ window.onload = () => {
             return;
         }
 
-        const { stats_frac } = columnData.histograms;
+        const { stats_frac, stats_char_frac } = columnData.histograms;
 
         let enhancedResult = columnData.enhancedResult;
         if (!enhancedResult && columnData.data) {
@@ -643,12 +712,17 @@ window.onload = () => {
         // binIndex 为 -1 表示取消高亮
         if (ev.binIndex === -1) {
             stats_frac?.clearSelection();
+            stats_char_frac?.clearSelection();
             columnData.lmfInstance.clearHighlight();
             return;
         }
 
-        // 只有 token 直方图
-        stats_frac?.clearSelection();
+        // 同一列内仅保持一个直方图的选中状态
+        if (parsed.histogramType === 'char') {
+            stats_frac?.clearSelection();
+        } else {
+            stats_char_frac?.clearSelection();
+        }
 
         // 使用通用的高亮计算函数
         const { x0, x1 } = ev;
@@ -942,6 +1016,7 @@ window.onload = () => {
             lmfInstance: undefined,
             histograms: {
                 stats_frac: null,
+                stats_char_frac: null,
                 stats_surprisal_progress: null
             }
         };
@@ -1278,13 +1353,23 @@ window.onload = () => {
         if (compareMode) {
             recalculateAllDiffStats();
             
-            // 重新渲染所有列的统计图表和指标
+            // 重新渲染所有列的统计图表和指标，并更新 LMF 实例的差分模式
             columnsData.forEach((columnData, id) => {
                 if (columnData.stats) {
                     const resultModel = columnData.data?.request?.model || null;
                     updateMetricsForColumn(id, columnData.stats, resultModel);
                     renderStatsForColumn(id, columnData);
                 }
+                
+                // 更新 LMF 实例的差分模式（如果存在）
+                if (columnData.lmfInstance) {
+                    const isDiffColumn = columnData.diffStats && !isBaseColumn(id);
+                    if (isDiffColumn && columnData.diffStats) {
+                        columnData.lmfInstance.setDiffMode(true, columnData.diffStats.deltaCharSurprisals);
+                    } else {
+                        columnData.lmfInstance.setDiffMode(false, []);
+                    }
+                }
             });
         }
     };

client/src/ts/controllers/serverDemoController.ts

@@ -107,6 +107,10 @@ export type ServerDemoSaveOptions = {
      * 如果不提供，将创建新的存储实例
      */
     serverStorage?: IDemoStorage;
+    /**
+     * 当前文件名（如果有，将作为默认文件名）
+     */
+    currentFileName?: string | null;
     onSaveStart: () => void;
     onSaveSuccess: (name: string) => void;
     onSaveError: (error: Error) => void;
@@ -128,6 +132,7 @@ export const handleServerDemoSave = async (options: ServerDemoSaveOptions): Prom
         presetSaveInfo = null,
         showSuccessToast = true,
         serverStorage: providedStorage,
+        currentFileName = null,
         onSaveStart,
         onSaveSuccess,
         onSaveError,
@@ -152,7 +157,7 @@ export const handleServerDemoSave = async (options: ServerDemoSaveOptions): Prom
             localStorage.setItem(LAST_SAVE_PATH_KEY, normalizedPath);
         }
     } else {
-        const defaultName = getDefaultDemoName(currentData, textFieldValue);
+        const defaultName = getDefaultDemoName(currentData, textFieldValue, currentFileName);
         result = await showDemoNameInput(api, defaultName);
     }
 

client/src/ts/start.ts

@@ -270,14 +270,9 @@ window.onload = () => {
         currentFilename?: string,
         textValue?: string
     ): Promise<void> => {
-        // 生成文件名：如果已经有本地文件名，使用它；否则使用统一的文件名生成函数
-        let filename: string;
-        if (currentFilename && currentFilename !== '未选择文件') {
-            filename = currentFilename;
-        } else {
-            const defaultName = getDefaultDemoName(data, textValue || '');
-            filename = ensureJsonExtension(defaultName);
-        }
+        // 生成文件名：使用统一的文件名生成函数（会自动处理现有文件名）
+        const defaultName = getDefaultDemoName(data, textValue || '', currentFilename);
+        const filename = ensureJsonExtension(defaultName);
 
         appStateManager.setGlobalLoading(true);
         appStateManager.updateState({ isSaving: true });
@@ -387,9 +382,9 @@ window.onload = () => {
             containerSelector: '.demos',
             loaderSelector: '#demos_loading',
             refreshSelector: '#refresh_demo_btn',
-            onDemoLoaded: (data, disableAnimation, isNewDemo = false) => {
-                // 使用统一渲染函数
-                demoBusinessLogic.renderDemo(data, 'server', undefined, { disableAnimation, isNewDemo });
+            onDemoLoaded: (data, disableAnimation, isNewDemo = false, path?: string) => {
+                // 使用统一渲染函数，传递路径以便提取文件名
+                demoBusinessLogic.renderDemo(data, 'server', path, { disableAnimation, isNewDemo });
             },
             onTextPrefill: (text) => {
                 textInputController.setTextValue(text);
@@ -408,42 +403,47 @@ window.onload = () => {
                     hasProcessedUrlDemo = true;
                     const urlDemoPath = URLHandler.parameters['demo'];
                     if (urlDemoPath && typeof urlDemoPath === 'string') {
-                        // 使用统一的资源加载器处理所有 URL 恢复
                         appStateManager.setGlobalLoading(true);
                         try {
-                            const result = await demoResourceLoader.load(urlDemoPath);
-                            
-                            if (result.success && result.data) {
-                                // 判断资源类型并渲染
-                                if (DemoResourceLoader.isLocalResource(urlDemoPath)) {
-                                    // 本地资源：从 URL 提取文件名和哈希
+                            // 判断资源类型
+                            if (DemoResourceLoader.isLocalResource(urlDemoPath)) {
+                                // 本地资源：加载并渲染（不需要导航）
+                                const result = await demoResourceLoader.load(urlDemoPath);
+                                if (result.success && result.data) {
                                     try {
                                         const localInfo = DemoResourceLoader.extractLocalInfo(urlDemoPath);
-                                        demoBusinessLogic.renderDemo(result.data, 'local', localInfo.filename, { disableAnimation: true, isNewDemo: true });
-                                        showToast(`已从缓存恢复: ${localInfo.filename}`, 'success');
+                                        demoBusinessLogic.renderDemo(result.data, 'local', localInfo.filename, { 
+                                            disableAnimation: true, 
+                                            isNewDemo: true 
+                                        });
                                     } catch (error) {
-                                        // URL 格式无效（缺少哈希或格式错误）
                                         const errorMessage = extractErrorMessage(error, 'URL格式无效');
                                         console.error('解析本地资源标识符失败:', error);
                                         handleLoadFailure(urlDemoPath, errorMessage);
                                     }
                                 } else {
-                                    // 服务器资源
-                                    demoBusinessLogic.renderDemo(result.data, 'server', undefined, { disableAnimation: true, isNewDemo: true });
-                                    // 高亮对应的 demo
+                                    handleLoadFailure(urlDemoPath, result.message || '加载失败');
+                                }
+                            } else {
+                                // 服务器资源：统一使用 DemoResourceLoader 加载，然后导航并高亮
+                                const result = await demoResourceLoader.load(urlDemoPath);
+                                if (result.success && result.data) {
+                                    demoBusinessLogic.renderDemo(result.data, 'server', urlDemoPath, { 
+                                        disableAnimation: true, 
+                                        isNewDemo: true 
+                                    });
+                                    // 导航到demo所在文件夹并高亮
                                     if (demoManager) {
-                                        demoManager.highlightDemo(urlDemoPath);
+                                        await demoManager.navigateToDemoAndHighlight(urlDemoPath);
                                     }
+                                } else {
+                                    handleLoadFailure(urlDemoPath, result.message || '加载失败');
                                 }
-                            } else {
-                                // 加载失败，统一处理
-                                console.warn('加载失败:', result.message);
-                                handleLoadFailure(urlDemoPath, result.message || '加载失败');
                             }
                         } catch (error) {
-                            console.error('加载失败:', error);
-                            const message = extractErrorMessage(error, '加载失败');
-                            handleLoadFailure(urlDemoPath, message);
+                            const errorMessage = extractErrorMessage(error, '恢复失败');
+                            console.error('从URL恢复demo失败:', error);
+                            handleLoadFailure(urlDemoPath, errorMessage);
                         } finally {
                             appStateManager.setGlobalLoading(false);
                         }
@@ -591,6 +591,7 @@ window.onload = () => {
     // Save按钮点击事件（使用 serverDemoController）
     saveBtn.on('click', async () => {
         try {
+            const state = appStateManager.getState();
             await handleServerDemoSave({
                 api,
                 currentData: visualizationUpdater.getCurrentData(),
@@ -599,6 +600,7 @@ window.onload = () => {
                 enableDemo: current.demo,
                 demoManager: demoManager || null,
                 serverStorage,
+                currentFileName: state.currentFileName,
                 onSaveStart: () => {
                     appStateManager.updateState({ isSaving: true });
                 },
@@ -627,9 +629,12 @@ window.onload = () => {
             return;
         }
 
+        // 使用 AppState 中的文件名（单一真相来源）
+        const state = appStateManager.getState();
+
         await handleLocalDemoSave(
             rawApiResponse,
-            openLocalFilename.text(),
+            state.currentFileName || undefined,
             textInputController.getTextValue()
         );
     });

client/src/ts/storage/demoResourceLoader.ts

@@ -19,8 +19,8 @@ export type ResourceIdentifier = string; // "/path/file.json" 或 "local://file.
 
 /**
  * 解析资源标识符
- * 本地资源格式: local://filename.json#hash
- * 使用最后一个 # 作为分隔符，解决文件名中包含 # 的冲突
+ * 本地资源格式: local://filename.json~hash
+ * 使用最后一个 ~ 作为分隔符，解决文件名中包含 ~ 的冲突
  */
 function parseResourceIdentifier(identifier: ResourceIdentifier): {
     type: 'server' | 'local';
@@ -30,8 +30,8 @@ function parseResourceIdentifier(identifier: ResourceIdentifier): {
 } {
     if (identifier.startsWith('local://')) {
         const rest = identifier.substring('local://'.length);
-        // 使用最后一个 # 作为分隔符，解决文件名中包含 # 的冲突
-        const hashIndex = rest.lastIndexOf('#');
+        // 使用最后一个 ~ 作为分隔符，解决文件名中包含 ~ 的冲突
+        const hashIndex = rest.lastIndexOf('~');
         
         if (hashIndex >= 0) {
             const filename = rest.substring(0, hashIndex);
@@ -51,7 +51,7 @@ function parseResourceIdentifier(identifier: ResourceIdentifier): {
         }
         
         // 没有 hash，视为无效（不再兼容）
-        throw new Error(`本地资源标识符缺少哈希值: "${identifier}"，格式应为 local://filename.json#hash`);
+        throw new Error(`本地资源标识符缺少哈希值: "${identifier}"，格式应为 local://filename.json~hash`);
     }
     
     return {
@@ -75,7 +75,7 @@ export class DemoResourceLoader {
 
     /**
      * 加载资源（统一入口，包含验证）
-     * @param identifier 资源标识符（"/path/file.json" 或 "local://file.json#hash"）
+     * @param identifier 资源标识符（"/path/file.json" 或 "local://file.json~hash"）
      */
     async load(identifier: ResourceIdentifier): Promise<LoadResult> {
         const { type, path, hash, filename } = parseResourceIdentifier(identifier);
@@ -84,10 +84,10 @@ export class DemoResourceLoader {
             ? this.localDemoCache 
             : this.serverStorage;
 
-        // 对于本地资源，构造完整的 key: filename#hash
+        // 对于本地资源，构造完整的 key: filename~hash
         // 如果解析失败（缺少 hash 或格式无效），parseResourceIdentifier 会抛出错误
         const loadKey = type === 'local' && filename && hash 
-            ? `${filename}#${hash}` 
+            ? `${filename}~${hash}` 
             : path;
 
         // 调用底层存储加载数据
@@ -138,7 +138,7 @@ export class DemoResourceLoader {
      */
     static createLocalIdentifier(filename: string, hash: string): ResourceIdentifier {
         const name = ensureJsonExtension(filename);
-        return `local://${name}#${hash}`;
+        return `local://${name}~${hash}`;
     }
 
     /**

client/src/ts/storage/localDemoCache.ts

@@ -82,7 +82,7 @@ export class LocalDemoCache implements IDemoStorage {
             const store = transaction.objectStore(STORE_NAME);
 
             const filename = ensureJsonExtension(options.name);
-            const key = `${filename}#${hash}`; // 使用 filename#hash 作为 key
+            const key = `${filename}~${hash}`; // 使用 filename~hash 作为 key
 
             const record = {
                 key,
@@ -138,7 +138,7 @@ export class LocalDemoCache implements IDemoStorage {
 
     /**
      * 从缓存加载 demo
-     * @param key 完整的 key，格式为 "filename#hash"
+     * @param key 完整的 key，格式为 "filename~hash"
      */
     async load(key?: string): Promise<LoadResult> {
         if (!key) {
@@ -189,7 +189,7 @@ export class LocalDemoCache implements IDemoStorage {
 
     /**
      * 删除指定的 demo
-     * @param key 完整的 key，格式为 "filename#hash"
+     * @param key 完整的 key，格式为 "filename~hash"
      */
     async delete(key: string): Promise<boolean> {
         try {

client/src/ts/ui/demoManager.ts

@@ -18,7 +18,7 @@ export type DemoManagerOptions = {
     containerSelector: string;
     loaderSelector: string;
     refreshSelector: string;
-    onDemoLoaded: (data: AnalyzeResponse, disableAnimation: boolean, isNewDemo?: boolean) => void;
+    onDemoLoaded: (data: AnalyzeResponse, disableAnimation: boolean, isNewDemo?: boolean, path?: string) => void;
     onTextPrefill?: (text: string) => void;
     onDemoLoading?: (loading: boolean) => void;
     onRefreshStart?: () => void;
@@ -32,6 +32,7 @@ export type DemoManagerOptions = {
 export type DemoManager = {
     refresh: () => Promise<void>;
     highlightDemo: (fullPath: string | null) => void;
+    navigateToDemoAndHighlight: (fullPath: string) => Promise<void>; // 导航到demo所在文件夹并高亮（不加载数据）
     loadDemoByPath: (fullPath: string) => Promise<boolean>;
     getSelectedPaths: () => string[]; // 获取选中的demo路径
 };
@@ -71,6 +72,7 @@ export function initDemoManager(options: DemoManagerOptions): DemoManager {
         return {
             refresh: () => Promise.resolve(),
             highlightDemo: () => {},
+            navigateToDemoAndHighlight: () => Promise.resolve(),
             loadDemoByPath: () => Promise.resolve(false),
             getSelectedPaths: () => [],
         };
@@ -216,6 +218,44 @@ export function initDemoManager(options: DemoManagerOptions): DemoManager {
         applyActiveState();
     };
 
+    // ============ 辅助函数：路径提取和导航 ============
+    
+    // 从完整路径中提取文件夹路径
+    const extractFolderPath = (fullPath: string): string => {
+        const pathParts = fullPath.split('/').filter(p => p);
+        if (pathParts.length <= 1) {
+            return '/';
+        }
+        return '/' + pathParts.slice(0, -1).join('/');
+    };
+
+    // 导航到指定文件夹并刷新列表（如果当前不在该文件夹）
+    const navigateToFolder = async (targetFolderPath: string): Promise<void> => {
+        if (currentPath !== targetFolderPath) {
+            currentPath = targetFolderPath;
+            if (pathNavigator) {
+                pathNavigator.update(targetFolderPath);
+            }
+            await fetchDemoList();
+        }
+    };
+
+    // 导航到demo所在文件夹并高亮（不加载数据，用于URL恢复等场景）
+    const navigateToDemoAndHighlight = async (fullPath: string): Promise<void> => {
+        const normalizedPath = normalizeFullPath(fullPath);
+        if (!normalizedPath) {
+            return;
+        }
+
+        try {
+            const targetFolderPath = extractFolderPath(normalizedPath);
+            await navigateToFolder(targetFolderPath);
+            highlightDemo(normalizedPath);
+        } catch (error) {
+            console.error('导航到demo失败:', error);
+        }
+    };
+
     const setActiveDemo = (fullPath: string | null) => {
         highlightDemo(fullPath);
         
@@ -542,11 +582,11 @@ export function initDemoManager(options: DemoManagerOptions): DemoManager {
         }
         
         onTextPrefill?.(data.request.text);
-        onDemoLoaded(data, true, isNewDemo);
+        onDemoLoaded(data, true, isNewDemo, demoPath);
         setActiveDemo(demoPath);
     };
 
-    // 根据完整路径加载demo（用于URL参数自动加载）
+    // 根据完整路径加载demo（用于保存后重新加载等场景）
     const loadDemoByPath = async (fullPath: string): Promise<boolean> => {
         const normalizedPath = normalizeFullPath(fullPath);
         if (!normalizedPath) {
@@ -554,37 +594,9 @@ export function initDemoManager(options: DemoManagerOptions): DemoManager {
         }
 
         try {
-            // 从完整路径中提取文件夹路径和文件名
-            // 例如：/文件夹名/文件名.json -> 文件夹路径: /文件夹名, 文件名: 文件名.json
-            // 例如：/文件名.json -> 文件夹路径: /, 文件名: 文件名.json
-            const pathParts = normalizedPath.split('/').filter(p => p);
-            let targetFolderPath = '/';
-            let targetFileName = '';
-
-            if (pathParts.length === 0) {
-                return false;
-            }
-
-            // 最后一个部分是文件名（可能包含.json）
-            targetFileName = pathParts[pathParts.length - 1];
-            // 如果文件名没有.json后缀，添加它
-            if (!targetFileName.endsWith('.json')) {
-                targetFileName += '.json';
-            }
-
-            // 前面的部分是文件夹路径
-            if (pathParts.length > 1) {
-                targetFolderPath = '/' + pathParts.slice(0, -1).join('/');
-            }
-
-            // 如果当前路径不匹配，先切换到正确的路径并加载列表
-            if (currentPath !== targetFolderPath) {
-                currentPath = targetFolderPath;
-                if (pathNavigator) {
-                    pathNavigator.update(targetFolderPath);
-                }
-                await fetchDemoList();
-            }
+            // 使用辅助函数：导航到文件夹
+            const targetFolderPath = extractFolderPath(normalizedPath);
+            await navigateToFolder(targetFolderPath);
 
             // 在当前列表中查找匹配的文件
             const result = await api.list_demos(currentPath);
@@ -629,6 +641,7 @@ export function initDemoManager(options: DemoManagerOptions): DemoManager {
     return {
         refresh: fetchDemoList,
         highlightDemo: highlightDemo,
+        navigateToDemoAndHighlight: navigateToDemoAndHighlight,
         loadDemoByPath: loadDemoByPath,
         getSelectedPaths: () => multiSelect ? multiSelect.getSelectedPaths() : [],
     };

client/src/ts/utils/analyzeFlow.ts

@@ -104,11 +104,12 @@ export class AnalyzeFlowManager {
         // 分析前滚动到顶部
         this.scrollToTop();
 
-        // 重置为新分析状态（数据来源为null，保存标志为false）
+        // 重置为新分析状态（数据来源为null，保存标志为false，清除文件名）
         this.deps.appStateManager.updateState({
             dataSource: null,
             isSavedToLocal: false,
-            isSavedToServer: false
+            isSavedToServer: false,
+            currentFileName: null
         });
 
         this.deps.appStateManager.setIsAnalyzing(true);

client/src/ts/utils/appStateManager.ts

@@ -17,6 +17,7 @@ export interface AppState {
     dataSource: 'local' | 'server' | null;  // 数据来源：null表示新分析的内容
     isSavedToLocal: boolean;  // 是否已保存到本地
     isSavedToServer: boolean;  // 是否已保存到服务器
+    currentFileName: string | null;  // 当前文件名（本地或服务器）
 }
 
 /**
@@ -45,7 +46,8 @@ export class AppStateManager {
             hasValidData: false,
             dataSource: null,
             isSavedToLocal: false,
-            isSavedToServer: false
+            isSavedToServer: false,
+            currentFileName: null
         };
         this.deps = deps;
     }

client/src/ts/utils/demoBusinessLogic.ts

@@ -9,6 +9,7 @@ import type { DemoManager } from '../ui/demoManager';
 import type { AppState } from './appStateManager';
 import { LocalDemoCache } from '../storage/localDemoCache';
 import URLHandler from './URLHandler';
+import { getDemoName } from './pathUtils';
 
 /**
  * Demo 渲染选项
@@ -75,7 +76,7 @@ export class DemoBusinessLogic {
      * 
      * @param data 要渲染的数据
      * @param source 数据来源：'local' | 'server'（用于判断是否需要显示文件名等本地文件特殊处理）
-     * @param filename 文件名（仅本地需要）
+     * @param filename 文件名（本地文件）或路径（服务器文件，用于提取文件名）
      * @param options 渲染选项
      */
     renderDemo(
@@ -91,20 +92,28 @@ export class DemoBusinessLogic {
         // 2. 然后设置文本值（匹配分析结果的文本填入，不会清除hasValidData）
         this.deps.textInputController.setTextValue(data.request.text, true);
 
-        // 3. 更新数据来源状态并重置保存标志
-        this.deps.updateAppState({
-            dataSource: source,
-            isSavedToLocal: false,
-            isSavedToServer: false
-        });
-
-        // 4. 本地文件特殊处理
+        // 3. 提取并保存文件名
+        let currentFileName: string | null = null;
         if (source === 'local' && filename) {
+            // 本地文件：直接使用文件名
+            currentFileName = filename;
             this.deps.updateFileNameDisplay(filename);
             // 清除 demo 高亮（本地文件不在 demo 列表中）
             this.deps.demoManager?.highlightDemo(null);
+        } else if (source === 'server' && filename) {
+            // 服务器文件：使用工具函数提取文件名（不含扩展名），并添加 .json
+            const name = getDemoName(filename);
+            currentFileName = `${name}.json`;
         }
 
+        // 4. 更新数据来源状态并重置保存标志，同时保存文件名
+        this.deps.updateAppState({
+            dataSource: source,
+            isSavedToLocal: false,
+            isSavedToServer: false,
+            currentFileName
+        });
+
         // 5. 确保系统已启动
         this.deps.ensureSystemStarted();
 

client/src/ts/utils/demoPathUtils.ts

@@ -93,13 +93,31 @@ export const validateFileName = (fileName: string): { valid: boolean; message?:
 };
 
 /**
- * 生成 demo 默认名称：取分析文本第一行的前50个字符
+ * 生成 demo 默认名称：优先使用现有文件名，否则取分析文本第一行的前50个字符
  * 
  * @param currentData 当前分析数据
  * @param textFieldValue 文本输入框的值
+ * @param existingFileName 可选的现有文件名（如果提供且有效，则优先使用）
  * @returns 默认名称
  */
-export const getDefaultDemoName = (currentData: AnalyzeResponse | null, textFieldValue: string): string => {
+export const getDefaultDemoName = (
+    currentData: AnalyzeResponse | null, 
+    textFieldValue: string,
+    existingFileName?: string | null
+): string => {
+    // 如果提供了现有文件名且有效，则使用它（去掉 .json 后缀）
+    if (existingFileName && existingFileName.trim() && existingFileName !== '未选择文件') {
+        const trimmed = existingFileName.trim();
+        // 去掉 .json 后缀（如果存在）
+        const nameWithoutExt = trimmed.toLowerCase().endsWith('.json') 
+            ? trimmed.slice(0, -5) 
+            : trimmed;
+        if (nameWithoutExt) {
+            return nameWithoutExt;
+        }
+    }
+    
+    // 否则，使用第一行逻辑
     const rawText = (currentData?.request?.text || textFieldValue || '').trim();
     if (!rawText) {
         return '新Demo';

client/src/ts/utils/highlightUtils.ts

@@ -1,5 +1,5 @@
 import type { FrontendAnalyzeResult } from '../api/GLTR_API';
-import { calculateSurprisal } from './Util';
+import { calculateSurprisal, calculateSurprisalPerCharacter } from './Util';
 import { extractRealTopkFromTokens } from './tokenUtils';
 
 /**
@@ -40,10 +40,44 @@ export function calculateTokenSurprisalHighlights(
     return highlightedIndices;
 }
 
+/**
+ * 根据直方图 bin 的范围计算需要高亮的 token 索引集合（基于 char surprisal）
+ * @param x0 bin 起始值
+ * @param x1 bin 结束值
+ * @param result 前端分析结果（包含 mergedTokens）
+ * @returns 需要高亮的 merged token 索引集合
+ */
+export function calculateCharSurprisalHighlights(
+    x0: number,
+    x1: number,
+    result: FrontendAnalyzeResult
+): Set<number> {
+    const highlightedIndices = new Set<number>();
+    const mergedTokens = result.mergedTokens;
+    const mergedRealTopk = extractRealTopkFromTokens(mergedTokens);
+    
+    // 判断是否为最后一个 bin（[19, 20]）
+    const isLastBin = Math.abs(x0 - 19) < 0.001 && Math.abs(x1 - 20) < 0.001;
+
+    // 遍历 merged token，找到 char surprisal 在范围内的 token
+    for (let i = 0; i < mergedTokens.length; i++) {
+        const surprisal = calculateSurprisal(mergedRealTopk[i]?.[1] ?? 0);
+        const tokenText = mergedTokens[i]?.raw || '';
+        const charSurprisal = calculateSurprisalPerCharacter(surprisal, tokenText);
+        const inRange = isLastBin ? charSurprisal >= 19 : (charSurprisal >= x0 && charSurprisal < x1);
+        
+        if (inRange) {
+            highlightedIndices.add(i);
+        }
+    }
+
+    return highlightedIndices;
+}
+
 /**
  * 直方图类型
  */
-export type HistogramType = 'token';
+export type HistogramType = 'token' | 'char';
 
 /**
  * 根据直方图类型和 bin 范围计算需要高亮的 token 索引集合
@@ -59,9 +93,16 @@ export function calculateHighlights(
     x1: number,
     result: FrontendAnalyzeResult
 ): { indices: Set<number>; style: 'border' | 'underline' } {
-    return {
-        indices: calculateTokenSurprisalHighlights(x0, x1, result),
-        style: 'border'
-    };
+    if (histogramType === 'char') {
+        return {
+            indices: calculateCharSurprisalHighlights(x0, x1, result),
+            style: 'underline'
+        };
+    } else {
+        return {
+            indices: calculateTokenSurprisalHighlights(x0, x1, result),
+            style: 'border'
+        };
+    }
 }
 

server.py

@@ -90,10 +90,16 @@ app.add_api('server.yaml')
 parser = argparse.ArgumentParser()
 # 导入默认模型配置（在参数解析后导入以避免循环依赖）
 from backend.model_manager import DEFAULT_MODEL
+from backend import REGISTERED_MODELS
+
+# 获取已注册的模型列表用于help信息
+registered_models_list = sorted(REGISTERED_MODELS.keys())
+models_help = f"模型名称 (默认: {DEFAULT_MODEL})。可用模型: {', '.join(registered_models_list)}"
+
 parser.add_argument("--force-cpu", action='store_true', help='强制使用 CPU 模式')
 parser.add_argument("--cpu-force-bfloat16", action='store_true', 
                     help='强制 CPU 使用 bfloat16（需确认硬件支持 AVX-512_BF16 或 AMX，否则可能极慢）')
-parser.add_argument("--model", default=DEFAULT_MODEL)
+parser.add_argument("--model", default=DEFAULT_MODEL, help=models_help)
 parser.add_argument("--address",
                     default="0.0.0.0")  # 0.0.0.0 for nonlocal use (accessible from LAN)
 parser.add_argument("--port", default="5001")