diff --git a/docs/fix/css/styles.css b/docs/fix/css/styles.css
new file mode 100644
index 0000000..aa01d80
--- /dev/null
+++ b/docs/fix/css/styles.css
@@ -0,0 +1,522 @@
+.container {
+    background-color: var(--container-bg);
+    color: var(--text-color);
+    padding: 20px;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin: 0 auto;
+    max-width: 800px;
+}
+.file-input {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 20px 0;
+}
+.file-input input[type="file"] {
+    display: none;
+}
+.file-input label {
+    display: block;
+    margin-bottom: 10px;
+    color: var(--text-color);
+}
+.file-input label:hover {
+    background-color: var(--hover-bg);
+}
+button {
+    background-color: var(--button-bg);
+    color: var(--button-text);
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 5px;
+}
+button:hover:not(:disabled) {
+    background-color: var(--button-hover);
+}
+button:disabled {
+    background-color: var(--border-color);
+    cursor: not-allowed;
+}
+.error {
+    color: var(--error-color);
+    margin: 10px 0;
+}
+.success {
+    color: var(--success-color);
+    margin: 10px 0;
+}
+.file-name {
+    margin: 10px 0;
+    color: var(--text-color);
+}
+
+/* 更新语言切换按钮样式 */
+.lang-switch {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 100;
+}
+
+.lang-btn {
+    background-color: rgba(0, 0, 0, 0.6);  /* 深色半透明背景 */
+    color: #FFFFFF;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+.lang-btn:hover {
+    background-color: rgba(0, 0, 0, 0.8);  /* 悬停时更深的背景色 */
+    border-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  /* 悬停时增强阴影 */
+}
+
+/* 添加下拉菜单样式 */
+.fix-type-select {
+    margin: 20px 0;
+    width: 100%;
+}
+
+select {
+    width: 100%;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    background-color: var(--dropzone-bg);
+    color: var(--text-color);
+    font-size: 16px;
+}
+
+select:focus {
+    outline: none;
+    border-color: var(--button-bg);
+}
+
+/* 添加路径转换选项样式 */
+.path-options {
+    margin: 15px 0;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    display: none;  /* 默认隐藏 */
+    background-color: var(--container-bg);
+}
+
+.path-options.show {
+    display: block;
+}
+
+.path-option {
+    margin: 10px 0;
+}
+
+.path-option label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 20px;
+}
+
+.path-option input[type="radio"] {
+    margin-right: 8px;
+}
+
+/* 修改头图容器样式 */
+.header-image {
+    text-align: center;
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 8px;    /* 添加6像素的填充 */
+    position: relative;
+}
+
+.header-image img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
+    transition: opacity 0.3s ease;
+}
+
+.header-image a {
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.header-image a:hover img {
+    opacity: 0.9;
+    transition: opacity 0.3s ease;
+}
+
+/* 整体包装容器 */
+.wrapper {
+    position: relative;
+    background-color: var(--container-bg);
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* 更新拖拽区域样式 */
+.file-drop-zone {
+    order: 1;  /* 设置顺序为1 */
+    border: 2px dashed #4CAF50;
+    border-radius: 4px;
+    padding: 30px;
+    text-align: center;
+    background-color: rgba(76, 175, 80, 0.1);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: var(--text-color);
+}
+
+.file-drop-zone:hover {
+    border-color: #45a049;  /* 深一点的绿色 */
+    background-color: rgba(76, 175, 80, 0.2);  /* 更深的浅绿色 */
+}
+
+.file-drop-zone.dragover {
+    border-color: #45a049;
+    background-color: rgba(76, 175, 80, 0.25);  /* 拖拽时的背景色 */
+    transform: scale(1.01);  /* 轻微放大效果 */
+}
+
+#dragText {
+    font-size: 16px;
+    color: var(--text-color);
+    margin: 0;
+}
+
+/* 按钮容器样式 */
+.button-container {
+    order: 2;  /* 设置顺序为2 */
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 10px 0;
+}
+
+/* 文件列表容器样式 */
+.selected-files {
+    order: 3;
+    margin-top: 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--dropzone-bg);
+    overflow-y: auto;
+}
+
+/* 文件项样式 */
+.file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--file-item-bg);
+    height: 44px; /* 设置固定高度 */
+    box-sizing: border-box; /* 确保padding包含在高度内 */
+}
+
+.file-item:last-child {
+    border-bottom: none;
+}
+
+.file-name {
+    flex-grow: 1;
+    margin-right: 10px;
+}
+
+.delete-btn {
+    cursor: pointer;
+    color: var(--text-color);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.delete-btn:hover {
+    color: var(--error-color);
+    background-color: rgba(255, 68, 68, 0.1);
+}
+
+/* 添加平滑过渡效果 */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* 版本号基础样式 */
+.version-tag {
+    position: absolute;
+    bottom: 20px;
+    right: 40px;
+    color: #FFFFFF;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-weight: 300;
+    font-size: 1.8em;
+    letter-spacing: 1px;
+    opacity: 0.8;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+/* 添加移动端适配 */
+@media screen and (max-width: 768px) {
+    .version-tag {
+        bottom: 16px;  /* 仅上移10像素 */
+        right: 20px;   /* 减小右侧间距 */
+        font-size: 1.2em;   /* 减小字体大小 */
+    }
+}
+
+/* 适配更小屏幕的设备 */
+@media screen and (max-width: 480px) {
+    .version-tag {
+        bottom: 16px;  /* 保持与平板端相同的上移距离 */
+        right: 15px;   /* 稍微减小右侧间距 */
+        font-size: 1em;    /* 进一步减小字体大小 */
+    }
+}
+
+/* 更新勾选框容器样式 */
+.zip-option {
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;  /* 垂直居中对齐 */
+}
+
+.zip-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    vertical-align: middle;  /* 垂直居中对齐 */
+    margin: 0;  /* 移除默认边距 */
+    position: relative;
+    top: -1px;  /* 微调位置 */
+}
+
+.zip-label {
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;  /* 垂直居中对齐 */
+    margin-left: 4px;  /* 添加文字间距 */
+}
+
+/* 添加清除按钮样式 */
+.clear-btn {
+    background-color: var(--error-color);
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 5px;
+    transition: all 0.3s ease;
+}
+
+.clear-btn:hover {
+    background-color: #ff6666;  /* 稍微亮一点的红色 */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.clear-btn:disabled {
+    background-color: var(--border-color);
+    cursor: not-allowed;
+}
+
+/* 主题切换按钮样式 */
+.theme-switch {
+    position: absolute;
+    top: 40px;
+    right: 85px;  /* 位于语言按钮左侧 */
+    z-index: 100;
+}
+
+.theme-btn {
+    background-color: var(--button-bg);
+    color: var(--button-text);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+.theme-btn:hover {
+    background-color: var(--button-hover);
+    border-color: var(--border-color);
+}
+
+.theme-btn svg {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
+}
+
+.theme-btn:hover svg {
+    transform: rotate(15deg);
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+    .theme-switch {
+        top: 30px;
+        right: 70px;
+    }
+    
+    .theme-btn {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .theme-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/* 统一头部按钮样式 */
+.header-controls {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    z-index: 100;
+}
+
+.header-btn {
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #FFFFFF;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+/* 主题切换按钮特定样式 */
+.theme-btn {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 语言切换按钮特定样式 */
+.lang-btn {
+    padding: 8px 16px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+}
+
+/* 统一悬停效果 */
+.header-btn:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* 图标样式 */
+.theme-icon {
+    width: 20px;
+    height: 20px;
+    stroke: currentColor;
+    stroke-width: 2;
+    fill: none;
+    display: none;
+}
+
+.theme-icon.active {
+    display: block;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+    .header-controls {
+        top: 12px;    
+        right: 12px;
+        gap: 8px;
+    }
+    
+    .theme-btn {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .lang-btn {
+        height: 32px;
+        padding: 6px 12px;
+    }
+    
+    .theme-icon {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/* 更小屏幕的适配 */
+@media screen and (max-width: 480px) {
+    .header-controls {
+        top: 20px;    /* 保持与平板相同 */
+        right: 20px;  /* 保持与平板相同 */
+        gap: 6px;     /* 进一步减小间距 */
+    }
+}
+
+/* 当文件列表超过10项时显示滚动条 */
+.selected-files {
+    max-height: 440px;  /* 44px * 10项 = 440px */
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--button-bg) var(--container-bg);
+}
+
+/* 当文件数量少于等于10项时，取消最大高度限制 */
+.selected-files.no-scroll {
+    max-height: none;
+    overflow-y: visible;
+}
+
+/* Webkit浏览器的滚动条样式 */
+.selected-files::-webkit-scrollbar {
+    width: 8px;
+}
+
+.selected-files::-webkit-scrollbar-track {
+    background: var(--container-bg);
+    border-radius: 4px;
+}
+
+.selected-files::-webkit-scrollbar-thumb {
+    background-color: var(--button-bg);
+    border-radius: 4px;
+    border: 2px solid var(--container-bg);
+}
+
+.selected-files::-webkit-scrollbar-thumb:hover {
+    background-color: var(--button-hover);
+}
\ No newline at end of file
diff --git a/docs/fix/js/main.js b/docs/fix/js/main.js
new file mode 100644
index 0000000..2c69886
--- /dev/null
+++ b/docs/fix/js/main.js
@@ -0,0 +1,292 @@
+// 语言配置
+const translations = {
+    en: {
+        title: "ComfyUI Workflow Fixer",
+        description: {
+            namespace: "This tool helps fix old workflow JSON files by adding the PaintingCoder namespace to node types.",
+            path: "This tool helps convert path separators between Windows (\\) and Unix-style (Linux/Mac) (/) formats."
+        },
+        dragText: "Choose Workflow File or drag and drop file here",
+        fixButton: "Fix & Download",
+        selectedFile: "Selected file: ",
+        errorSelectFile: "Please select a file first.",
+        successMessage: "File fixed and saved as ",
+        switchLang: "中文", 
+        fixTypeNamespace: "Fix PaintingCoder old version (<0.3.0) workflow",
+        fixTypePath: "Fix Path Separator",
+        pathOptions: {
+            auto: "Auto Detect",
+            toWindows: "To Windows Format (\\)",
+            toUnix: "To Unix Format (Linux/Mac) (/)"
+        },
+        errorJsonFile: "Please select a JSON file.",
+        selectedFiles: "Selected files:",
+        noFilesSelected: "No files selected",
+        removeFile: "Remove",
+        zipOption: "Download as ZIP",
+        processingFiles: "Processing {0}/{1} files...",
+        successMultipleFiles: "Successfully processed {0} files",
+        clearButton: "Clear All"
+    },
+    zh: {
+        title: "ComfyUI 工作流修复工具",
+        description: {
+            namespace: "此工具可以通过添加 PaintingCoder 命名空间来修复旧的工作流 JSON 文件。",
+            path: "此工具可以在 Windows (\\) 和 Unix (Linux/Mac) (/) 格式之间转换路径分隔符。"
+        },
+        dragText: "选择工作流文件或将文件拖放到此处",
+        fixButton: "修复并下载",
+        selectedFile: "已选择文件：",
+        errorSelectFile: "请先选择一个文件。",
+        successMessage: "文件已修复并保存为 ",
+        switchLang: "English",
+        fixTypeNamespace: "修复PaintingCoder旧版本（<0.3.0）工作流",
+        fixTypePath: "修复路径分隔符",
+        pathOptions: {
+            auto: "自动检测",
+            toWindows: "转换为 Windows 格式 (\\)",
+            toUnix: "转换为 Unix 格式 (Linux/Mac) (/)"
+        },
+        errorJsonFile: "请选择JSON文件。",
+        selectedFiles: "已选择文件：",
+        noFilesSelected: "未选择文件",
+        removeFile: "移除",
+        zipOption: "以ZIP格式下载",
+        processingFiles: "正在处理 {0}/{1} 个文件...",
+        successMultipleFiles: "成功处理 {0} 个文件",
+        clearButton: "清除全部"
+    }
+};
+
+// 全局变量
+let currentLanguage = 'en';
+let currentTheme = localStorage.getItem('theme') || 'light';
+let selectedFiles = [];
+
+// 页面加载完成后的初始化
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+    setTheme(currentTheme);
+    setupEventListeners();
+    updateHeaderImage();
+    initializePathOptions();
+});
+
+// 添加路径选项初始化函数
+function initializePathOptions() {
+    const t = translations[currentLanguage];
+    
+    // 初始化自动检测选项
+    const autoLabel = document.getElementById('autoLabel');
+    if (autoLabel) {
+        autoLabel.textContent = t.pathOptions.auto;
+    }
+    
+    // 初始化Windows格式选项
+    const toWindowsLabel = document.getElementById('toWindowsLabel');
+    if (toWindowsLabel) {
+        toWindowsLabel.textContent = t.pathOptions.toWindows;
+    }
+    
+    // 初始化Unix格式选项
+    const toUnixLabel = document.getElementById('toUnixLabel');
+    if (toUnixLabel) {
+        toUnixLabel.textContent = t.pathOptions.toUnix;
+    }
+}
+
+// 初始化应用
+function initializeApp() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const lang = urlParams.get('lang');
+    
+    if (lang && (lang === 'zh' || lang === 'en')) {
+        currentLanguage = lang;
+        updateLanguage();
+    } else {
+        const url = new URL(window.location.href);
+        url.searchParams.set('lang', currentLanguage);
+        window.history.replaceState({}, '', url.toString());
+    }
+}
+
+// 设置事件监听器
+function setupEventListeners() {
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    
+    dropZone.addEventListener('dragover', handleDragOver);
+    dropZone.addEventListener('dragleave', handleDragLeave);
+    dropZone.addEventListener('drop', handleDrop);
+    dropZone.addEventListener('click', () => fileInput.click());
+}
+
+// 主题切换相关函数
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    
+    const moonIcon = document.querySelector('.moon-icon');
+    const sunIcon = document.querySelector('.sun-icon');
+    
+    if (theme === 'dark') {
+        moonIcon.classList.remove('active');
+        sunIcon.classList.add('active');
+    } else {
+        moonIcon.classList.add('active');
+        sunIcon.classList.remove('active');
+    }
+}
+
+function toggleTheme() {
+    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setTheme(currentTheme);
+}
+
+// 语言切换相关函数
+function toggleLanguage() {
+    currentLanguage = currentLanguage === 'en' ? 'zh' : 'en';
+    
+    const url = new URL(window.location.href);
+    url.searchParams.set('lang', currentLanguage);
+    window.history.replaceState({}, '', url.toString());
+    
+    updateLanguage();
+    updateHeaderImage();
+}
+
+function updateLanguage() {
+    const t = translations[currentLanguage];
+    
+    // 更新所有文本内容
+    document.getElementById('title').textContent = t.title;
+    document.getElementById('dragText').textContent = t.dragText;
+    document.getElementById('fixButton').textContent = t.fixButton;
+    document.getElementById('langBtn').textContent = t.switchLang;
+    document.getElementById('clearButton').textContent = t.clearButton;
+    document.getElementById('zipLabel').textContent = t.zipOption;
+    
+    // 更新下拉选项
+    const fixTypeSelect = document.getElementById('fixType');
+    if (fixTypeSelect) {
+        const options = fixTypeSelect.options;
+        options[0].textContent = t.fixTypeNamespace;
+        options[1].textContent = t.fixTypePath;
+    }
+    
+    // 更新路径选项
+    initializePathOptions();
+    
+    updateDescription();
+    updateFileList();
+}
+
+// 添加头图切换函数
+function updateHeaderImage() {
+    const headerImg = document.querySelector('.header-image img');
+    if (headerImg) {
+        const imageName = currentLanguage === 'en' ? 
+            'workflow_fix_top_banner01.jpg' : 
+            'workflow_fix_top_banner02.jpg';
+        headerImg.src = `../images/${imageName}`;
+    }
+}
+
+// 文件处理相关函数
+function handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    document.getElementById('dropZone').classList.add('dragover');
+}
+
+function handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    document.getElementById('dropZone').classList.remove('dragover');
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const dropZone = document.getElementById('dropZone');
+    dropZone.classList.remove('dragover');
+    
+    const files = e.dataTransfer.files;
+    handleFiles(files);
+}
+
+function handleFileSelect(event) {
+    handleFiles(event.target.files);
+    event.target.value = '';
+}
+
+function handleFiles(files) {
+    for (let file of files) {
+        if (file.name.endsWith('.json')) {
+            if (!selectedFiles.some(f => f.name === file.name)) {
+                selectedFiles.push(file);
+            }
+        } else {
+            const t = translations[currentLanguage];
+            document.getElementById('error').textContent = t.errorJsonFile;
+        }
+    }
+    updateFileList();
+}
+
+function updateFileList() {
+    const filesContainer = document.getElementById('selectedFiles');
+    const t = translations[currentLanguage];
+    const clearButton = document.getElementById('clearButton');
+    
+    if (selectedFiles.length === 0) {
+        filesContainer.innerHTML = `<div class="file-item"><span class="file-name">${t.noFilesSelected}</span></div>`;
+        clearButton.disabled = true;
+        document.getElementById('fixButton').disabled = true;
+        filesContainer.classList.add('no-scroll');
+        return;
+    }
+    
+    filesContainer.innerHTML = selectedFiles.map((file, index) => `
+        <div class="file-item">
+            <span class="file-name">${file.name}</span>
+            <span class="delete-btn" onclick="removeFile(${index})">×</span>
+        </div>
+    `).join('');
+    
+    // 根据文件数量控制滚动条
+    if (selectedFiles.length <= 10) {
+        filesContainer.classList.add('no-scroll');
+    } else {
+        filesContainer.classList.remove('no-scroll');
+    }
+    
+    clearButton.disabled = false;
+    document.getElementById('fixButton').disabled = false;
+}
+
+function removeFile(index) {
+    selectedFiles.splice(index, 1);
+    updateFileList();
+}
+
+function clearFiles() {
+    selectedFiles = [];
+    updateFileList();
+    document.getElementById('fileInput').value = '';
+    document.getElementById('error').textContent = '';
+    document.getElementById('success').textContent = '';
+}
+
+// UI更新函数
+function updateDescription() {
+    const fixType = document.getElementById('fixType').value;
+    const t = translations[currentLanguage];
+    document.getElementById('description').textContent = t.description[fixType];
+}
+
+function updateUI() {
+    const fixType = document.getElementById('fixType').value;
+    updateDescription();
+    document.getElementById('pathOptions').classList.toggle('show', fixType === 'path');
+} 
\ No newline at end of file
diff --git a/docs/fix/workflow_fixer.html b/docs/fix/workflow_fixer.html
index 4aaaa34..aaa4a98 100644
--- a/docs/fix/workflow_fixer.html
+++ b/docs/fix/workflow_fixer.html
@@ -3,7 +3,28 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Workflow Fixer</title>
+    
+    <!-- SEO Meta Tags (English & Chinese) -->
+    <title>ComfyUI Workflow Fixer - AI Workflow Migration Tool | AI工作流修复工具</title>
+    <meta name="description" content="Free online tool for fixing and converting ComfyUI workflows. Supports AI workflow migration and compatibility fixes. | 免费在线AI工作流修复和转换工具，支持ComfyUI工作流迁移和兼容性修复。">
+    <meta name="keywords" content="ComfyUI, workflow, AI workflow, PaintingCoder, workflow fixer, AI tools, workflow migration, workflow converter, AI image generation, stable diffusion workflow, 人工智能工作流, 工作流修复, AI绘画工作流, 稳定扩散工作流, 工作流转换器, AI工具, 工作流迁移, ComfyUI工作流, AI模型工具, 智能绘画工作流">
+    
+    <!-- Open Graph / Social Media Meta Tags -->
+    <meta property="og:title" content="ComfyUI Workflow Fixer - AI Workflow Migration Tool | AI工作流修复工具">
+    <meta property="og:description" content="Free online tool for fixing and converting ComfyUI workflows. Perfect for AI workflow migration and compatibility fixes. | 免费在线AI工作流修复和转换工具，完美支持工作流迁移和兼容性修复。">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="../images/workflow_fix_top_banner01.jpg">
+    
+    <!-- Additional Meta Tags -->
+    <meta name="author" content="PaintingCoder">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="English, Chinese">
+    <meta name="revisit-after" content="7 days">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://github.com/jammyfu/ComfyUI_PaintingCoderUtils">
+    <link rel="stylesheet" href="css/styles.css">
+    
     <style>
         /* 添加主题变量 */
         :root {
@@ -49,484 +70,7 @@
             margin: 0 auto;
             padding: 20px;
         }
-        .container {
-            background-color: var(--container-bg);
-            color: var(--text-color);
-            padding: 20px;
-            border-radius: 0 0 8px 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin: 0 auto;
-            max-width: 800px;
-        }
-        .file-input {
-            margin: 20px 0;
-        }
-        .file-input input[type="file"] {
-            display: none;
-        }
-        .file-input label {
-            display: block;
-            margin-bottom: 10px;
-            color: var(--text-color);
-        }
-        .file-input label:hover {
-            background-color: var(--hover-bg);
-        }
-        button {
-            background-color: var(--button-bg);
-            color: var(--button-text);
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            margin: 5px;
-        }
-        button:hover:not(:disabled) {
-            background-color: var(--button-hover);
-        }
-        button:disabled {
-            background-color: var(--border-color);
-            cursor: not-allowed;
-        }
-        .error {
-            color: var(--error-color);
-            margin: 10px 0;
-        }
-        .success {
-            color: var(--success-color);
-            margin: 10px 0;
-        }
-        .file-name {
-            margin: 10px 0;
-            color: var(--text-color);
-        }
-        
-        /* 更新语言切换按钮样式 */
-        .lang-switch {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            z-index: 100;
-        }
-        
-        .lang-btn {
-            background-color: rgba(0, 0, 0, 0.6);  /* 深色半透明背景 */
-            color: #FFFFFF;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 4px;
-            padding: 8px 16px;
-            font-size: 0.9em;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(4px);
-            -webkit-backdrop-filter: blur(4px);
-        }
-        
-        .lang-btn:hover {
-            background-color: rgba(0, 0, 0, 0.8);  /* 悬停时更深的背景色 */
-            border-color: rgba(255, 255, 255, 0.5);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  /* 悬停时增强阴影 */
-        }
-        
-        /* 添加下拉菜单样式 */
-        .fix-type-select {
-            margin: 20px 0;
-            width: 100%;
-        }
-        
-        select {
-            width: 100%;
-            padding: 10px;
-            border-radius: 4px;
-            border: 1px solid var(--border-color);
-            background-color: var(--dropzone-bg);
-            color: var(--text-color);
-            font-size: 16px;
-        }
-        
-        select:focus {
-            outline: none;
-            border-color: var(--button-bg);
-        }
-        
-        /* 添加路径转换选项样式 */
-        .path-options {
-            margin: 15px 0;
-            padding: 10px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            display: none;  /* 默认隐藏 */
-            background-color: var(--container-bg);
-        }
-        
-        .path-options.show {
-            display: block;
-        }
-        
-        .path-option {
-            margin: 10px 0;
-        }
-        
-        .path-option label {
-            display: inline-flex;
-            align-items: center;
-            cursor: pointer;
-            margin-right: 20px;
-        }
-        
-        .path-option input[type="radio"] {
-            margin-right: 8px;
-        }
-        
-        /* 修改头图容器样式 */
-        .header-image {
-            text-align: center;
-            margin: 0 auto;
-            max-width: 800px;
-            padding: 8px;    /* 添加6像素的填充 */
-            position: relative;
-        }
-        
-        .header-image img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px 8px 0 0;
-            box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
-            transition: opacity 0.3s ease;
-        }
-        
-        .header-image a {
-            display: block;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        
-        .header-image a:hover img {
-            opacity: 0.9;
-            transition: opacity 0.3s ease;
-        }
-        
-        /* 整体包装容器 */
-        .wrapper {
-            position: relative;
-            background-color: var(--container-bg);
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        
-        /* 更新拖拽区域样式 */
-        .file-drop-zone {
-            border: 2px dashed #4CAF50;  /* 绿色边框 */
-            border-radius: 4px;
-            padding: 30px;
-            text-align: center;
-            background-color: rgba(76, 175, 80, 0.1);  /* 浅绿色背景 */
-            cursor: pointer;
-            transition: all 0.3s ease;
-            color: var(--text-color);
-        }
-        
-        .file-drop-zone:hover {
-            border-color: #45a049;  /* 深一点的绿色 */
-            background-color: rgba(76, 175, 80, 0.2);  /* 更深的浅绿色 */
-        }
-        
-        .file-drop-zone.dragover {
-            border-color: #45a049;
-            background-color: rgba(76, 175, 80, 0.25);  /* 拖拽时的背景色 */
-            transform: scale(1.01);  /* 轻微放大效果 */
-        }
-        
-        #dragText {
-            font-size: 16px;
-            color: var(--text-color);
-            margin: 0;
-        }
-        
-        .selected-files {
-            margin: 10px 0;
-        }
-        
-        .file-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 8px;
-            margin: 5px 0;
-            background-color: var(--file-item-bg);
-            border-radius: 4px;
-            transition: all 0.3s ease;
-            color: var(--text-color);
-            border: 1px solid var(--border-color);
-        }
-        
-        .file-item:hover {
-            background-color: var(--hover-bg);
-        }
-        
-        .file-name {
-            flex-grow: 1;
-            margin-right: 10px;
-        }
-        
-        .delete-btn {
-            cursor: pointer;
-            color: var(--text-color);
-            padding: 4px 8px;
-            border-radius: 4px;
-            transition: all 0.2s ease;
-        }
-        
-        .delete-btn:hover {
-            color: var(--error-color);
-            background-color: rgba(255, 68, 68, 0.1);
-        }
-
-        /* 添加平滑过渡效果 */
-        * {
-            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-        }
-
-        /* 版本号基础样式 */
-        .version-tag {
-            position: absolute;
-            bottom: 20px;
-            right: 40px;
-            color: #FFFFFF;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            font-style: italic;
-            font-weight: 300;
-            font-size: 1.8em;
-            letter-spacing: 1px;
-            opacity: 0.8;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-        }
-
-        /* 添加移动端适配 */
-        @media screen and (max-width: 768px) {
-            .version-tag {
-                bottom: 16px;  /* 仅上移10像素 */
-                right: 20px;   /* 减小右侧间距 */
-                font-size: 1.2em;   /* 减小字体大小 */
-            }
-        }
-
-        /* 适配更小屏幕的设备 */
-        @media screen and (max-width: 480px) {
-            .version-tag {
-                bottom: 16px;  /* 保持与平板端相同的上移距离 */
-                right: 15px;   /* 稍微减小右侧间距 */
-                font-size: 1em;    /* 进一步减小字体大小 */
-            }
-        }
-
-        /* 更新勾选框容器样式 */
-        .zip-option {
-            display: inline-block;
-            margin-left: 10px;
-            vertical-align: middle;  /* 垂直居中对齐 */
-        }
-
-        .zip-checkbox {
-            width: 16px;
-            height: 16px;
-            cursor: pointer;
-            vertical-align: middle;  /* 垂直居中对齐 */
-            margin: 0;  /* 移除默认边距 */
-            position: relative;
-            top: -1px;  /* 微调位置 */
-        }
-
-        .zip-label {
-            color: var(--text-color);
-            cursor: pointer;
-            user-select: none;
-            vertical-align: middle;  /* 垂直居中对齐 */
-            margin-left: 4px;  /* 添加文字间距 */
-        }
-
-        /* 添加清除按钮样式 */
-        .clear-btn {
-            background-color: var(--error-color);
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            margin: 5px;
-            transition: all 0.3s ease;
-        }
-
-        .clear-btn:hover {
-            background-color: #ff6666;  /* 稍微亮一点的红色 */
-            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-
-        .clear-btn:disabled {
-            background-color: var(--border-color);
-            cursor: not-allowed;
-        }
-
-        /* 按钮容器样式 */
-        .button-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin: 10px 0;
-        }
-
-        /* 主题切换按钮样式 */
-        .theme-switch {
-            position: absolute;
-            top: 40px;
-            right: 85px;  /* 位于语言按钮左侧 */
-            z-index: 100;
-        }
-
-        .theme-btn {
-            background-color: var(--button-bg);
-            color: var(--button-text);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            width: 36px;
-            height: 36px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(4px);
-            -webkit-backdrop-filter: blur(4px);
-        }
-
-        .theme-btn:hover {
-            background-color: var(--button-hover);
-            border-color: var(--border-color);
-        }
-
-        .theme-btn svg {
-            width: 20px;
-            height: 20px;
-            transition: transform 0.3s ease;
-        }
-
-        .theme-btn:hover svg {
-            transform: rotate(15deg);
-        }
-
-        /* 移动端适配 */
-        @media screen and (max-width: 768px) {
-            .theme-switch {
-                top: 30px;
-                right: 70px;
-            }
-            
-            .theme-btn {
-                width: 32px;
-                height: 32px;
-            }
-            
-            .theme-btn svg {
-                width: 16px;
-                height: 16px;
-            }
-        }
-
-        /* 统一头部按钮样式 */
-        .header-controls {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            z-index: 100;
-        }
-
-        .header-btn {
-            background-color: rgba(0, 0, 0, 0.6);
-            color: #FFFFFF;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(4px);
-            -webkit-backdrop-filter: blur(4px);
-        }
-
-        /* 主题切换按钮特定样式 */
-        .theme-btn {
-            width: 36px;
-            height: 36px;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        /* 语言切换按钮特定样式 */
-        .lang-btn {
-            padding: 8px 16px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-        }
-
-        /* 统一悬停效果 */
-        .header-btn:hover {
-            background-color: rgba(0, 0, 0, 0.8);
-            border-color: rgba(255, 255, 255, 0.5);
-        }
-
-        /* 图标样式 */
-        .theme-icon {
-            width: 20px;
-            height: 20px;
-            stroke: currentColor;
-            stroke-width: 2;
-            fill: none;
-            display: none;
-        }
-
-        .theme-icon.active {
-            display: block;
-        }
-
-        /* 移动端适配 */
-        @media screen and (max-width: 768px) {
-            .header-controls {
-                top: 12px;    
-                right: 12px;
-                gap: 8px;
-            }
-            
-            .theme-btn {
-                width: 32px;
-                height: 32px;
-            }
-            
-            .lang-btn {
-                height: 32px;
-                padding: 6px 12px;
-            }
-            
-            .theme-icon {
-                width: 16px;
-                height: 16px;
-            }
-        }
-
-        /* 更小屏幕的适配 */
-        @media screen and (max-width: 480px) {
-            .header-controls {
-                top: 20px;    /* 保持与平板相同 */
-                right: 20px;  /* 保持与平板相同 */
-                gap: 6px;     /* 进一步减小间距 */
-            }
-        }
+ 
     </style>
 </head>
 <body>
@@ -536,7 +80,7 @@
             <a href="https://github.com/jammyfu/ComfyUI_PaintingCoderUtils" target="_blank" title="Visit PaintingCoder on GitHub">
                 <img src="../images/workflow_fix_top_banner01.jpg" alt="Painting Coder Logo">
             </a>
-            <span class="version-tag">version 0.2.2</span>
+            <span class="version-tag">Version 0.2.2</span>
             <div class="header-controls">
                 <button class="header-btn theme-btn" onclick="toggleTheme()" title="Toggle theme">
                     <!-- 月亮图标 -->
@@ -554,7 +98,7 @@
         
         <!-- 主内容容器 -->
         <div class="container">
-            <h1 id="title">PaintingCoder Workflow Fixer</h1>
+            <h1 id="title">ComfyUI Workflow Fixer</h1>
             <p id="description">This tool helps fix old workflow JSON files by adding the PaintingCoder namespace to node types.</p>
             
             <!-- 添加功能选择下拉菜单 -->
@@ -574,11 +118,11 @@
                     </label>
                     <label>
                         <input type="radio" name="pathType" value="toWindows">
-                        <span id="toWindowsLabel">To Windows Format</span>
+                        <span id="toWindowsLabel">To Windows Format (\)</span>
                     </label>
                     <label>
                         <input type="radio" name="pathType" value="toUnix">
-                        <span id="toUnixLabel">To Unix Format (Linux/Mac)</span>
+                        <span id="toUnixLabel">To Unix Format (Linux/Mac) (/)</span>
                     </label>
                 </div>
             </div>
@@ -588,7 +132,6 @@
                     <div id="dragText">Choose Workflow File or drag and drop file here</div>
                     <input type="file" id="fileInput" accept=".json" multiple onchange="handleFileSelect(event)">
                 </div>
-                <div id="selectedFiles" class="selected-files"></div>
             </div>
             
             <div class="button-container">
@@ -600,6 +143,8 @@
                 </div>
             </div>
             
+            <div id="selectedFiles" class="selected-files"></div>
+            
             <div id="error" class="error"></div>
             <div id="success" class="success"></div>
         </div>
@@ -610,632 +155,8 @@
         <p style="margin-bottom: 5px;">© 2025 jammyfu. All rights reserved.</p>
     </footer>
 
+    <!-- 引入外部JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
-    <script>
-        // 在现有代码前添加
-        window.onload = function() {
-            // 获取URL参数
-            const urlParams = new URLSearchParams(window.location.search);
-            const lang = urlParams.get('lang');
-            
-            // 如果有语言参数，设置对应语言
-            if (lang && (lang === 'zh' || lang === 'en')) {
-                currentLanguage = lang;
-                updateLanguage();
-            } else {
-                // 如果没有语言参数，根据当前语言设置URL
-                const url = new URL(window.location.href);
-                url.searchParams.set('lang', currentLanguage);
-                window.history.replaceState({}, '', url.toString());
-            }
-        }
-
-        // 语言配置
-        const translations = {
-            en: {
-                title: "PaintingCoder Workflow Fixer",
-                description: {
-                    namespace: "This tool helps fix old workflow JSON files by adding the PaintingCoder namespace to node types.",
-                    path: "This tool helps convert path separators between Windows (\\) and Unix-style (Linux/Mac) (/) formats."
-                },
-                dragText: "Choose Workflow File or drag and drop file here",
-                fixButton: "Fix & Download",
-                selectedFile: "Selected file: ",
-                errorSelectFile: "Please select a file first.",
-                successMessage: "File fixed and saved as ",
-                switchLang: "中文", 
-                fixTypeNamespace: "Fix PaintingCoder old version (<0.3.0) workflow",
-                fixTypePath: "Fix Path Separator",
-                pathOptions: {
-                    auto: "Auto Detect",
-                    toWindows: "To Windows Format (\\)",
-                    toUnix: "To Unix Format (Linux/Mac)"
-                },
-                errorJsonFile: "Please select a JSON file.",
-                selectedFiles: "Selected files:",
-                noFilesSelected: "No files selected",
-                removeFile: "Remove",
-                zipOption: "Download as ZIP",
-                processingFiles: "Processing {0}/{1} files...",
-                successMultipleFiles: "Successfully processed {0} files",
-                clearButton: "Clear All"
-            },
-            zh: {
-                title: "PaintingCoder 工作流修复工具",
-                description: {
-                    namespace: "此工具可以通过添加 PaintingCoder 命名空间来修复旧的工作流 JSON 文件。",
-                    path: "此工具可以在 Windows (\\) 和 Unix (Linux/Mac) (/) 格式之间转换路径分隔符。"
-                },
-                dragText: "选择工作流文件或将文件拖放到此处",
-                fixButton: "修复并下载",
-                selectedFile: "已选择文件：",
-                errorSelectFile: "请先选择一个文件。",
-                successMessage: "文件已修复并保存为 ",
-                switchLang: "English",
-                fixTypeNamespace: "修复PaintingCoder旧版本（<0.3.0）工作流",
-                fixTypePath: "修复路径分隔符",
-                pathOptions: {
-                    auto: "自动检测",
-                    toWindows: "转换为 Windows 格式 (\\)",
-                    toUnix: "转换为 Unix 格式 (Linux/Mac) (/)"
-                },
-                errorJsonFile: "请选择JSON文件。",
-                selectedFiles: "已选择文件：",
-                noFilesSelected: "未选择文件",
-                removeFile: "移除",
-                zipOption: "以ZIP格式下载",
-                processingFiles: "正在处理 {0}/{1} 个文件...",
-                successMultipleFiles: "成功处理 {0} 个文件",
-                clearButton: "清除全部"
-            }
-        };
-
-        let currentLanguage = 'en';
-
-        function toggleLanguage() {
-            // 切换语言
-            currentLanguage = currentLanguage === 'en' ? 'zh' : 'en';
-            
-            // 更新 URL 参数
-            const url = new URL(window.location.href);
-            url.searchParams.set('lang', currentLanguage);
-            window.history.replaceState({}, '', url.toString());
-            
-            // 更新页面语言
-            updateLanguage();
-        }
-
-        function updateLanguage() {
-            const t = translations[currentLanguage];
-            
-            document.getElementById('title').textContent = t.title;
-            updateDescription();
-            document.getElementById('dragText').textContent = t.dragText;
-            document.getElementById('fixButton').textContent = t.fixButton;
-            document.getElementById('langBtn').textContent = t.switchLang;
-            
-            // 更新下拉菜单选项
-            const select = document.getElementById('fixType');
-            select.options[0].text = t.fixTypeNamespace;
-            select.options[1].text = t.fixTypePath;
-            
-            // 更新动态内容
-            if (currentFile) {
-                document.getElementById('fileName').textContent = 
-                    `${t.selectedFile}${currentFile.name}`;
-            }
-            
-            // 更新错误和成功消息
-            const errorEl = document.getElementById('error');
-            if (errorEl.textContent === translations.en.errorSelectFile) {
-                errorEl.textContent = t.errorSelectFile;
-            } else if (errorEl.textContent === translations.en.errorJsonFile) {
-                errorEl.textContent = t.errorJsonFile;
-            }
-            
-            const successEl = document.getElementById('success');
-            if (successEl.textContent.startsWith(translations.en.successMessage)) {
-                const fileName = successEl.textContent.replace(translations.en.successMessage, '');
-                successEl.textContent = t.successMessage + fileName;
-            }
-            
-            // 更新路径选项文本
-            document.getElementById('autoLabel').textContent = t.pathOptions.auto;
-            document.getElementById('toWindowsLabel').textContent = t.pathOptions.toWindows;
-            document.getElementById('toUnixLabel').textContent = t.pathOptions.toUnix;
-            
-            updateFileList();  // 更新文件列表的语言
-
-            // 更新头图
-            const headerImage = document.querySelector('.header-image img');
-            if (currentLanguage === 'zh') {
-                headerImage.src = "../images/workflow_fix_top_banner02.jpg";
-            } else {
-                headerImage.src = "../images/workflow_fix_top_banner01.jpg";
-            }
-
-            document.getElementById('zipLabel').textContent = t.zipOption;
-            document.getElementById('clearButton').textContent = t.clearButton;
-        }
-
-        // 更新节点映射
-        const nodeMapping = {
-            // 原有的映射
-            "MaskPreview": "PaintingCoder::MaskPreview",
-            "ImageSizeCreator": "PaintingCoder::ImageSizeCreator",
-            "ImageToBase64": "PaintingCoder::ImageToBase64",
-            "ImageLatentCreator": "PaintingCoder::ImageLatentCreator",
-            "DynamicImageCombiner": "PaintingCoder::DynamicImageCombiner",
-            "DynamicMaskCombiner": "PaintingCoder::DynamicMaskCombiner",
-            "ImageResolutionAdjuster": "PaintingCoder::ImageResolutionAdjuster",
-            "TextCombiner": "PaintingCoder::TextCombiner",
-            "ShowTextPlus": "PaintingCoder::ShowTextPlus",
-            "SimpleTextInput": "PaintingCoder::SimpleTextInput",
-            "MultilineTextInput": "PaintingCoder::MultilineTextInput",
-            "RemoveEmptyLinesAndLeadingSpaces": "PaintingCoder::RemoveEmptyLinesAndLeadingSpaces",
-            "ImageSwitch": "PaintingCoder::ImageSwitch",
-            "TextSwitch": "PaintingCoder::TextSwitch",
-            "MaskSwitch": "PaintingCoder::MaskSwitch",
-            "LatentSwitch": "PaintingCoder::LatentSwitch",
-            "WebImageLoader": "PaintingCoder::WebImageLoader",
-            
-            // 添加新的映射
-            "MaskPreview+": "PaintingCoder::MaskPreview",
-
-        };
-
-        let currentFile = null;
-        let selectedFiles = [];  // 存储选中的文件
-
-        // 添加拖拽相关函数
-        const dropZone = document.getElementById('dropZone');
-        const dragText = document.getElementById('dragText');
-        
-        // 添加拖拽事件处理
-        function handleDragOver(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            dropZone.classList.add('dragover');
-        }
-        
-        function handleDragLeave(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            dropZone.classList.remove('dragover');
-        }
-        
-        function handleDrop(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            dropZone.classList.remove('dragover');
-            
-            const files = e.dataTransfer.files;
-            for (let file of files) {
-                if (file.name.endsWith('.json')) {
-                    // 检查是否已存在相同文件
-                    if (!selectedFiles.some(f => f.name === file.name)) {
-                        selectedFiles.push(file);
-                    }
-                } else {
-                    const t = translations[currentLanguage];
-                    document.getElementById('error').textContent = t.errorJsonFile;
-                }
-            }
-            updateFileList();
-        }
-        
-        // 统一处理文件的函数
-        function handleFile(file) {
-            currentFile = file;
-            const t = translations[currentLanguage];
-            document.getElementById('fileName').textContent = `${t.selectedFile}${file.name}`;
-            document.getElementById('fixButton').disabled = false;
-            document.getElementById('error').textContent = '';
-            document.getElementById('success').textContent = '';
-        }
-        
-        // 修改文件选择处理函数
-        function handleFileSelect(event) {
-            const files = event.target.files;
-            for (let file of files) {
-                if (file.name.endsWith('.json')) {
-                    // 检查是否已存在相同文件
-                    if (!selectedFiles.some(f => f.name === file.name)) {
-                        selectedFiles.push(file);
-                    }
-                } else {
-                    const t = translations[currentLanguage];
-                    document.getElementById('error').textContent = t.errorJsonFile;
-                }
-            }
-            updateFileList();
-            event.target.value = ''; // 清空input，允许重复选择相同文件
-        }
-        
-        // 修改点击事件处理
-        document.addEventListener('DOMContentLoaded', function() {
-            const dropZone = document.getElementById('dropZone');
-            const fileInput = document.getElementById('fileInput');
-            
-            // 整个虚线框区域点击触发文件选择
-            dropZone.addEventListener('click', function() {
-                fileInput.click();
-            });
-            
-            // 拖拽事件监听
-            dropZone.addEventListener('dragover', handleDragOver);
-            dropZone.addEventListener('dragleave', handleDragLeave);
-            dropZone.addEventListener('drop', handleDrop);
-            
-            updateFileList();
-        });
-
-        function updateDescription() {
-            const fixType = document.getElementById('fixType').value;
-            const t = translations[currentLanguage];
-            document.getElementById('description').textContent = t.description[fixType];
-        }
-
-        function updateUI() {
-            const fixType = document.getElementById('fixType').value;
-            updateDescription();
-            
-            // 显示/隐藏路径选项
-            const pathOptions = document.getElementById('pathOptions');
-            pathOptions.classList.toggle('show', fixType === 'path');
-        }
-
-        function updateFileList() {
-            const filesContainer = document.getElementById('selectedFiles');
-            const t = translations[currentLanguage];
-            const clearButton = document.getElementById('clearButton');
-            
-            if (selectedFiles.length === 0) {
-                filesContainer.innerHTML = `<div class="file-item"><span class="file-name">${t.noFilesSelected}</span></div>`;
-                clearButton.disabled = true;
-                document.getElementById('fixButton').disabled = true;
-                return;
-            }
-            
-            filesContainer.innerHTML = selectedFiles.map((file, index) => `
-                <div class="file-item">
-                    <span class="file-name">${file.name}</span>
-                    <span class="delete-btn" onclick="removeFile(${index})">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M18 6L6 18M6 6l12 12"/>
-                        </svg>
-                    </span>
-                </div>
-            `).join('');
-            
-            clearButton.disabled = false;
-            document.getElementById('fixButton').disabled = false;
-        }
-        
-        function removeFile(index) {
-            selectedFiles.splice(index, 1);
-            updateFileList();
-        }
-
-        // 添加清除功能
-        function clearFiles() {
-            selectedFiles = [];
-            updateFileList();
-            document.getElementById('fileInput').value = '';
-            document.getElementById('error').textContent = '';
-            document.getElementById('success').textContent = '';
-            document.getElementById('clearButton').disabled = true;
-            document.getElementById('fixButton').disabled = true;
-        }
-
-        // 定义需要进行路径转换的节点类型
-        const PATH_CONVERSION_NODES = new Set([
-            "CheckpointLoaderSimple",
-            "LoraLoader",
-            "ControlNetLoader",
-            "UNETLoader",
-            "VAELoader",
-            "CLIPLoader",
-            "DiffControlNetLoader",
-            "ModelLoader",
-            "LoadDiffusionModel",
-            "CheckpointLoader",
-            "DiffusersLoader",
-            "LoraLoaderModelOnly",
-            "VAEDecode",
-            "VAEEncode",
-            "CLIPVisionLoader",
-            "StyleModelLoader",
-            "UpscaleModelLoader",
-            "Load LoRA",
-            "Lora List",
-            "LoRA Stacker",
-            "GridLoras",
-            "CheckpointLoader|pysssss",
-            "LoraLoader|pysssss",
-            "LoraSave",
-            "LoraLoader",
-            "DualCLIPLoader",
-            "DualUNETLoader",
-            "DualVAELoader",
-            "DualCLIPVisionLoader",
-            "DualStyleModelLoader",
-            "DualUpscaleModelLoader",
-            "LoraLoader|pysssss",
-            "LoraSave|pysssss",
-            "LoraSave",
-            "LoraList",
-            "LoRA Stacker",
-            "GridLoras",
-            "LoraSave|pysssss",
-            "LoraList|pysssss",
-            "LoRA Stacker|pysssss",
-            "GridLoras|pysssss"
-        ]);
-
-        function isMarkdownOrBase64File(filename) {
-            return filename.endsWith('.md') || 
-                   filename.endsWith('.markdown') || 
-                   filename.includes('base64') ||
-                   filename.includes('data:image');
-        }
-
-        function detectPathFormat(workflow) {
-            let unixCount = 0;
-            let windowsCount = 0;
-
-            Object.keys(workflow.nodes).forEach(nodeId => {
-                const node = workflow.nodes[nodeId];
-                const nodeType = node.type || node.class_type;
-                
-                if (PATH_CONVERSION_NODES.has(nodeType) && node.widgets_values) {
-                    node.widgets_values.forEach(value => {
-                        if (typeof value === 'string' && !value.includes('base64')) {
-                            const unixSlashes = (value.match(/\//g) || []).length;
-                            const windowsSlashes = (value.match(/\\/g) || []).length;
-                            
-                            if (unixSlashes > windowsSlashes) {
-                                unixCount++;
-                            } else if (windowsSlashes > unixSlashes) {
-                                windowsCount++;
-                            }
-                        } else if (typeof value === 'object' && value?.content) {
-                            if (!value.content.includes('base64')) {
-                                const path = value.content;
-                                const unixSlashes = (path.match(/\//g) || []).length;
-                                const windowsSlashes = (path.match(/\\/g) || []).length;
-                                
-                                if (unixSlashes > windowsSlashes) {
-                                    unixCount++;
-                                } else if (windowsSlashes > unixSlashes) {
-                                    windowsCount++;
-                                }
-                            }
-                        }
-                    });
-                }
-            });
-
-            if (unixCount > windowsCount) {
-                return 'unix';
-            } else if (windowsCount > unixCount) {
-                return 'windows';
-            }
-            return null;
-        }
-
-        function fixAndDownload() {
-            const t = translations[currentLanguage];
-            if (selectedFiles.length === 0) {
-                document.getElementById('error').textContent = t.errorSelectFile;
-                return;
-            }
-
-            const useZip = document.getElementById('zipDownload').checked;
-            const fixedFiles = [];
-            let processedCount = 0;
-            const totalFiles = selectedFiles.length;
-
-            // 处理进度提示
-            const successEl = document.getElementById('success');
-            const errorEl = document.getElementById('error');
-            successEl.textContent = `Processing 0/${totalFiles} files...`;
-            errorEl.textContent = '';
-
-            selectedFiles.forEach((file, index) => {
-                if (isMarkdownOrBase64File(file.name)) {
-                    console.log(`Skipping file: ${file.name} (markdown or base64)`);
-                    processedCount++;
-                    successEl.textContent = `Processing ${processedCount}/${totalFiles} files...`;
-                    return;
-                }
-
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    try {
-                        const workflow = JSON.parse(e.target.result);
-                        const fixType = document.getElementById('fixType').value;
-                        let conversionDirection = '';
-                        
-                        if (fixType === 'path') {
-                            const selectedPathType = document.querySelector('input[name="pathType"]:checked');
-                            conversionDirection = selectedPathType ? selectedPathType.value : 'auto';
-                            
-                            if (conversionDirection === 'auto') {
-                                const currentFormat = detectPathFormat(workflow);
-                                if (currentFormat === 'unix') {
-                                    conversionDirection = 'windows';
-                                } else if (currentFormat === 'windows') {
-                                    conversionDirection = 'unix';
-                                } else {
-                                    conversionDirection = 'unix';
-                                }
-                            } else if (conversionDirection === 'toWindows') {
-                                conversionDirection = 'windows';
-                            } else if (conversionDirection === 'toUnix') {
-                                conversionDirection = 'unix';
-                            }
-                        }
-                        
-                        const fixedWorkflow = fixWorkflow(workflow, fixType, conversionDirection);
-                        
-                        let newFileName = file.name;
-                        if (fixType === 'namespace') {
-                            newFileName = file.name.replace('.json', '_fixed.json');
-                        } else if (fixType === 'path') {
-                            newFileName = file.name.replace('.json', `_${conversionDirection}.json`);
-                        }
-
-                        if (useZip) {
-                            // 收集文件用于ZIP打包
-                            fixedFiles.push({
-                                name: newFileName,
-                                content: JSON.stringify(fixedWorkflow, null, 2)
-                            });
-                        } else {
-                            // 直接下载单个文件
-                            const blob = new Blob([JSON.stringify(fixedWorkflow, null, 2)], {type: 'application/json'});
-                            const url = URL.createObjectURL(blob);
-                            const a = document.createElement('a');
-                            a.href = url;
-                            a.download = newFileName;
-                            document.body.appendChild(a);
-                            a.click();
-                            document.body.removeChild(a);
-                            URL.revokeObjectURL(url);
-                        }
-
-                        processedCount++;
-                        successEl.textContent = `Processing ${processedCount}/${totalFiles} files...`;
-                        
-                        // 当所有文件处理完成后
-                        if (processedCount === totalFiles) {
-                            if (useZip && fixedFiles.length > 0) {
-                                createAndDownloadZip(fixedFiles);
-                                successEl.textContent = t.successMessage + 'workflows.zip';
-                            } else if (!useZip) {
-                                successEl.textContent = t.successMessage + 
-                                    (totalFiles > 1 ? `${totalFiles} files` : newFileName);
-                            }
-                        }
-                    } catch (e) {
-                        errorEl.textContent = `Error processing ${file.name}: ${e.message}`;
-                        console.error(e);
-                        processedCount++;
-                    }
-                };
-                reader.readAsText(file);
-            });
-        }
-
-        // 添加ZIP创建和下载函数
-        async function createAndDownloadZip(files) {
-            // 动态加载 JSZip 库
-            if (typeof JSZip === 'undefined') {
-                const script = document.createElement('script');
-                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
-                document.head.appendChild(script);
-                await new Promise(resolve => script.onload = resolve);
-            }
-
-            const zip = new JSZip();
-            files.forEach(file => {
-                zip.file(file.name, file.content);
-            });
-
-            const blob = await zip.generateAsync({type: 'blob'});
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'workflows.zip';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        }
-
-        // 主题切换功能
-        let currentTheme = localStorage.getItem('theme') || 'light';
-        
-        function setTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem('theme', theme);
-            
-            // 更新图标显示
-            const moonIcon = document.querySelector('.moon-icon');
-            const sunIcon = document.querySelector('.sun-icon');
-            
-            if (theme === 'dark') {
-                moonIcon.classList.remove('active');
-                sunIcon.classList.add('active');
-            } else {
-                moonIcon.classList.add('active');
-                sunIcon.classList.remove('active');
-            }
-        }
-
-        function toggleTheme() {
-            currentTheme = currentTheme === 'light' ? 'dark' : 'light';
-            setTheme(currentTheme);
-        }
-
-        // 页面加载时初始化主题
-        document.addEventListener('DOMContentLoaded', () => {
-            setTheme(currentTheme);
-        });
-
-        function fixWorkflow(workflow, fixType, conversionDirection) {
-            if (fixType === 'namespace') {
-                // 深拷贝工作流
-                const fixedWorkflow = JSON.parse(JSON.stringify(workflow));
-                
-                // 遍历所有节点
-                if (fixedWorkflow.nodes) {
-                    fixedWorkflow.nodes.forEach(node => {
-                        // 检查节点类型是否需要添加命名空间
-                        if (node.type && nodeMapping[node.type]) {
-                            // 检查是否已经有命名空间前缀
-                            if (!node.type.startsWith('PaintingCoder::')) {
-                                node.type = nodeMapping[node.type];
-                            }
-                        }
-                    });
-                }
-                return fixedWorkflow;
-            } else if (fixType === 'path') {
-                Object.keys(workflow.nodes).forEach(nodeId => {
-                    const node = workflow.nodes[nodeId];
-                    const nodeType = node.type || node.class_type;
-                    
-                    // 如果是需要处理的节点类型
-                    if (PATH_CONVERSION_NODES.has(nodeType)) {
-                        // 处理 widgets_values 数组中的所有值
-                        if (node.widgets_values && Array.isArray(node.widgets_values)) {
-                            node.widgets_values = node.widgets_values.map(value => {
-                                if (typeof value === 'string' && !value.includes('base64')) {
-                                    // 转换路径分隔符
-                                    if (conversionDirection === 'unix') {
-                                        return value.replace(/\\/g, '/');
-                                    } else if (conversionDirection === 'windows') {
-                                        return value.replace(/\//g, '\\');
-                                    }
-                                } else if (typeof value === 'object' && value?.content) {
-                                    // 处理 pysssss 节点的特殊格式
-                                    if (!value.content.includes('base64')) {
-                                        const newContent = conversionDirection === 'unix' 
-                                            ? value.content.replace(/\\/g, '/') 
-                                            : value.content.replace(/\//g, '\\');
-                                        return { ...value, content: newContent };
-                                    }
-                                }
-                                return value;
-                            });
-                        }
-                    }
-                });
-            }
-            return workflow;
-        }
-    </script>
+    <script src="js/main.js"></script>
 </body>
 </html> 
\ No newline at end of file