<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-zh="Nameyn 官方文档" data-en="Nameyn Official Documentation">Nameyn 官方文档</title>
    <style>
        :root {
            /* 基础色调：清爽、通透 */
            --bg-color: #f8f9fc;
            --text-primary: #1a1c20;
            --text-secondary: #5e6472;
            --text-tertiary: #8890a0;
            
            /* 品牌色：使用更高级的靛蓝和珊瑚色 */
            --brand-primary: #4361ee;
            --brand-secondary: #3f37c9;
            --accent-coral: #f72585;
            --accent-cyan: #4cc9f0;
            
            /* 玻璃拟态与卡片 */
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.8);
            --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
            --card-bg: #ffffff;
            --card-hover-shadow: 0 12px 40px rgba(67, 97, 238, 0.1);
            
            /* 辅助色 */
            --success-bg: #d1fae5;
            --success-text: #065f46;
            --code-bg: #f1f3f7;
            --border-light: #e2e8f0;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.7;
            color: var(--text-primary);
            background-color: var(--bg-color);
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(247, 37, 133, 0.05) 0%, transparent 40%);
            display: flex;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* 动态背景装饰 */
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234361ee' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            z-index: -1;
            pointer-events: none;
        }

        /* 侧边栏 */
        .sidebar {
            width: 260px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-right: 1px solid var(--border-light);
            padding: 30px 20px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            display: flex;
            flex-direction: column;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 12px;
            letter-spacing: -0.5px;
        }
        
        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--brand-primary), var(--accent-coral));
            border-radius: 8px;
            display: grid;
            place-items: center;
            color: white;
            font-size: 1.2rem;
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        .nav-group { margin-bottom: 20px; }
        
        .nav-group-header {
            padding: 12px 16px;
            font-size: 0.9rem;
            text-transform: uppercase;
            color: var(--text-tertiary);
            letter-spacing: 1px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
            transition: color 0.2s;
            background: var(--bg-color);
            border-radius: 10px;
            margin-bottom: 8px;
        }

        .nav-group-header:hover { color: var(--text-primary); }

        .nav-group-header::after {
            content: '';
            width: 6px;
            height: 6px;
            border-right: 2px solid var(--text-tertiary);
            border-bottom: 2px solid var(--text-tertiary);
            transform: rotate(45deg);
            transition: transform 0.3s;
            margin-right: 5px;
        }

        .nav-group.active .nav-group-header::after {
            transform: rotate(-135deg);
        }

        .nav-links {
            display: none;
            padding-top: 5px;
            animation: slideDown 0.3s ease-out;
        }

        .nav-group.active .nav-links { display: block; }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 1rem;
            border-radius: 10px;
            transition: all 0.2s ease;
            margin-bottom: 4px;
            font-weight: 500;
        }

        .nav-link:hover {
            background: rgba(67, 97, 238, 0.05);
            color: var(--brand-primary);
        }

        .nav-link.active {
            background: var(--brand-primary);
            color: white;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 260px;
            padding: 60px 80px;
            max-width: 1000px;
        }

        h1 {
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 10px;
            background: linear-gradient(120deg, var(--text-primary), var(--brand-primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h2 {
            font-size: 1.8rem;
            margin-top: 60px;
            margin-bottom: 25px;
            color: var(--text-primary);
            position: relative;
            padding-left: 15px;
        }
        
        h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: var(--brand-primary);
            border-radius: 2px;
        }

        h3 { 
            font-size: 1.3rem; 
            margin-top: 30px; 
            margin-bottom: 15px; 
            color: var(--text-primary); 
            font-weight: 600;
        }
        
        h4 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--text-primary);
        }

        p { 
            color: var(--text-secondary); 
            margin-bottom: 16px; 
            font-size: 1.05rem;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: var(--text-tertiary);
            margin-bottom: 40px;
            font-weight: 300;
        }

        /* 语言切换器 */
        .lang-switcher {
            position: fixed;
            top: 20px;
            right: 40px;
            z-index: 200;
            background: white;
            padding: 4px;
            border-radius: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
            border: 1px solid var(--border-light);
        }

        .lang-btn {
            padding: 6px 16px;
            border-radius: 20px;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .lang-btn.active {
            background: var(--text-primary);
            color: white;
        }

        /* 卡片风格 */
        .card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 25px;
            border: 1px solid var(--border-light);
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(67, 97, 238, 0.3);
        }

        /* 特色链接卡片 */
        .featured-link {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 30px;
            background: white;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin: 30px 0;
            position: relative;
            overflow: hidden;
        }

        .featured-link::before {
            content: '';
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 4px;
            background: var(--brand-primary);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .featured-link:hover {
            transform: translateX(5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        .featured-link:hover::before { opacity: 1; }

        .featured-link-icon {
            font-size: 2.5rem;
            filter: grayscale(100%);
            transition: filter 0.3s;
        }

        .featured-link:hover .featured-link-icon { filter: grayscale(0%); }

        .featured-link-title {
            color: var(--text-primary);
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        /* 步骤卡片 */
        .step-list {
            counter-reset: step;
            display: grid;
            gap: 20px;
        }

        .step-card {
            position: relative;
            padding: 25px 25px 25px 80px;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--border-light);
        }

        .step-card::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            left: 25px;
            top: 25px;
            width: 36px;
            height: 36px;
            background: var(--bg-color);
            color: var(--brand-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            border: 2px solid rgba(67, 97, 238, 0.1);
        }

        /* 代码块 */
        .code-block {
            background: var(--text-primary);
            border-radius: 12px;
            overflow: hidden;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .code-header {
            background: rgba(255,255,255,0.05);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .code-lang {
            color: #fff;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .copy-btn {
            background: rgba(255,255,255,0.1);
            border: none;
            color: #fff;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: 0.2s;
        }

        .copy-btn:hover { background: rgba(255,255,255,0.2); }

        pre {
            padding: 20px;
            overflow-x: auto;
            margin: 0;
        }

        code {
            font-family: 'JetBrains Mono', Consolas, monospace;
            color: #e2e8f0;
            font-size: 0.9rem;
        }

        p code, li code {
            background: var(--code-bg);
            color: var(--brand-secondary);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: inherit;
            font-weight: 600;
            font-size: 0.9em;
        }

        /* 配置项 */
        .config-item {
            display: flex;
            align-items: center;
            background: white;
            border: 1px solid var(--border-light);
            padding: 15px 20px;
            border-radius: 12px;
            margin: 10px 0;
        }

        .config-label {
            font-weight: 600;
            color: var(--text-secondary);
            margin-right: 15px;
            min-width: 80px;
        }

        .config-value {
            flex: 1;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-primary);
            background: var(--bg-color);
            padding: 6px 12px;
            border-radius: 6px;
        }
        
        .config-copy {
            margin-left: 10px;
            border: none;
            background: white;
            color: var(--brand-primary);
            font-weight: 600;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        
        .config-copy:hover {
            background: var(--brand-primary);
            color: white;
        }

        /* 视频和网站链接样式 - 整个边框可点击 */
        a.clickable-box,
        .clickable-box {
            display: flex;
            align-items: center;
            text-decoration: none;
            background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 50%, #ebebef 100%);
            border: 3px solid #1a1c20;
            padding: 15px 20px;
            border-radius: 12px;
            margin: 10px 0;
            transition: border-color 0.2s ease;
            cursor: pointer;
        }
        
        a.clickable-box:hover,
        .clickable-box:hover {
            border-color: var(--brand-primary);
            background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ec 50%, #dedee4 100%);
        }
        
        a.clickable-box .box-label,
        .clickable-box .box-label {
            font-weight: 700;
            color: #1a1c20;
            margin-right: 15px;
            min-width: 80px;
            font-size: 1.1rem;
        }
        
        a.clickable-box .box-value,
        .clickable-box .box-value {
            flex: 1;
            font-family: 'JetBrains Mono', monospace;
            color: #1a1c20;
            font-weight: 700;
            font-size: 1.1rem;
        }

        /* 视频模态框样式 */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .video-modal.active {
            display: flex;
        }

        .video-modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .video-modal-close {
            position: absolute;
            top: -45px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .video-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .video-modal video {
            width: 100%;
            max-height: 80vh;
            display: block;
        }

        .video-play-icon {
            margin-left: auto;
            font-size: 1.2rem;
            color: var(--brand-primary);
        }

        /* 旧的link-border-item保留兼容 */
        .link-border-item {
            border: 2px solid #1a1c20;
            transition: all 0.2s ease;
        }
        
        .link-border-item:hover {
            border-color: var(--brand-primary);
        }

        /* 快捷入口网格 - 2x2 布局 */
        .quick-links {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 30px 0;
        }

        .quick-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 30px 20px;
            background: white;
            border-radius: 16px;
            text-decoration: none;
            color: var(--text-primary);
            border: 1px solid var(--border-light);
            transition: all 0.3s;
            text-align: center;
        }

        .quick-link-icon {
            font-size: 2rem;
            margin-bottom: 5px;
        }

        .quick-link:hover {
            border-color: var(--brand-primary);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.1);
        }

        /* 表格 */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 25px 0;
            background: white;
            border-radius: 12px;
            border: 1px solid var(--border-light);
            overflow: hidden;
        }

        th {
            background: var(--bg-color);
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: var(--text-tertiary);
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        td {
            padding: 15px 20px;
            border-top: 1px solid var(--border-light);
            color: var(--text-secondary);
        }
        
        /* 标签 */
        .tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .tag-auto { background: #e0f2fe; color: #0369a1; }
        .tag-claude { background: #f3e8ff; color: #7e22ce; }
        .tag-aws { background: #ffedd5; color: #c2410c; }
        .tag-azure { background: #ecfeff; color: #0e7490; }
        .tag-gemini { background: #dcfce7; color: #15803d; }
        .tag-deepseek { background: #dbeafe; color: #1e40af; }
        .tag-gpt { background: #d1d5db; color: #111827; }

        /* 警告框 */
        .alert {
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            border-left: 4px solid;
        }

        .alert-info {
            background: #eff6ff;
            border-color: var(--brand-primary);
            color: #1e3a8a;
        }
        
        .alert-success {
            background: #f0fdf4;
            border-color: #22c55e;
            color: #14532d;
        }
        
        .alert strong { display: block; margin-bottom: 5px; color: inherit; }
        .alert a { color: inherit; text-decoration: underline; }

        /* 页脚 */
        footer {
            margin-top: 80px;
            padding-top: 40px;
            border-top: 1px solid var(--border-light);
            text-align: center;
            color: var(--text-tertiary);
            font-size: 0.9rem;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            margin: 0 10px;
            font-weight: 500;
        }

        .footer-links a:hover { color: var(--brand-primary); }

        /* 多语言控制 */
        [data-lang-zh], [data-lang-en] { display: none; }
        body.lang-zh [data-lang-zh] { display: initial; }
        body.lang-en [data-lang-en] { display: initial; }
        body.lang-zh span[data-lang-zh] { display: inline; }
        body.lang-en span[data-lang-en] { display: inline; }
        
        /* 针对块级元素的显隐 */
        body.lang-zh div[data-lang-zh], body.lang-zh p[data-lang-zh], body.lang-zh li[data-lang-zh],
        body.lang-zh h1[data-lang-zh], body.lang-zh h2[data-lang-zh], body.lang-zh h3[data-lang-zh],
        body.lang-zh h4[data-lang-zh], body.lang-zh h5[data-lang-zh], body.lang-zh ul[data-lang-zh] { display: block; }
        
        body.lang-en div[data-lang-en], body.lang-en p[data-lang-en], body.lang-en li[data-lang-en],
        body.lang-en h1[data-lang-en], body.lang-en h2[data-lang-en], body.lang-en h3[data-lang-en],
        body.lang-en h4[data-lang-en], body.lang-en h5[data-lang-en], body.lang-en ul[data-lang-en] { display: block; }

        /* 响应式 */
        @media (max-width: 768px) {
            .sidebar { 
                width: 260px;
                height: 100%;
                transform: translateX(-100%); 
                transition: transform 0.3s;
            }
            .sidebar.open { transform: translateX(0); }
            .main-content { margin-left: 0; padding: 80px 20px; }
            
            .mobile-menu-btn {
                display: block;
                position: fixed;
                top: 15px; left: 15px;
                z-index: 201;
                background: white;
                border: 1px solid var(--border-light);
                padding: 14px;
                border-radius: 10px;
            }
            
            .mobile-menu-btn svg {
                width: 32px;
                height: 32px;
            }
            
            .lang-switcher {
                top: 15px;
                right: 15px;
                padding: 6px;
            }
            
            .lang-btn {
                padding: 10px 20px;
                font-size: 1rem;
            }
            
            /* 手机端侧边栏 Logo 调整 */
            .sidebar .logo {
                margin-top: 60px;
                font-size: 1.6rem;
            }
            
            .sidebar-overlay {
                position: fixed; top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(0,0,0,0.5); z-index: 99;
                display: none;
            }
            .sidebar-overlay.open { display: block; }
        }
        
        @media (min-width: 769px) {
            .mobile-menu-btn, .sidebar-overlay { display: none; }
        }
        
        /* 选项卡 */
        .tabs { display: flex; gap: 10px; margin-bottom: 10px; }
        .tab-btn {
            background: transparent;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            color: var(--text-secondary);
            font-weight: 600;
            border-bottom: 2px solid transparent;
        }
        .tab-btn.active {
            color: var(--brand-primary);
            border-bottom-color: var(--brand-primary);
        }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        /* 图片展示 - 响应式纵向排列 */
        .tutorial-images {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin: 20px 0;
        }

        .tutorial-image {
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-light);
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .tutorial-image:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            border-color: var(--brand-primary);
        }

        .tutorial-image img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* 电脑端：限制图片最大宽度 */
        @media (min-width: 769px) {
            .tutorial-image {
                max-width: 550px;
            }
        }

        /* 手机端：图片全宽显示 */
        @media (max-width: 768px) {
            .tutorial-images {
                gap: 12px;
                margin: 15px 0;
            }
            
            .tutorial-image {
                border-radius: 8px;
            }
        }

        /* 图片查看模态框样式 */
        .image-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            z-index: 10001;
            flex-direction: column;
        }

        .image-modal.active {
            display: flex;
        }

        .image-modal-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2;
        }

        .image-modal-btn {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: white;
            font-size: 1.1rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .image-modal-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .image-zoom-level {
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            min-width: 50px;
            text-align: center;
        }

        .image-modal-body {
            flex: 1;
            overflow: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
        }

        .image-modal-body:active {
            cursor: grabbing;
        }

        .image-modal-body img {
            max-width: 90%;
            max-height: 85vh;
            object-fit: contain;
            transition: transform 0.2s ease;
            border-radius: 4px;
            user-select: none;
        }

        /* 让教程图片可点击 */
        .tutorial-image {
            cursor: pointer;
        }

        /* 醒目的教学视频框动画 */
        @keyframes pulse-border {
            0%, 100% {
                box-shadow: 0 8px 25px rgba(247, 37, 133, 0.3);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 12px 35px rgba(247, 37, 133, 0.5);
                transform: scale(1.02);
            }
        }

    </style>
</head>
<body class="lang-zh">

    <!-- 图片查看模态框 -->
    <div class="image-modal" id="imageModal" onclick="closeImageModal(event)">
        <div class="image-modal-controls">
            <button class="image-modal-btn" onclick="zoomImage(-0.2)" title="缩小">➖</button>
            <span class="image-zoom-level" id="zoomLevel">100%</span>
            <button class="image-modal-btn" onclick="zoomImage(0.2)" title="放大">➕</button>
            <button class="image-modal-btn" onclick="resetZoom()" title="重置">🔄</button>
            <button class="image-modal-btn" onclick="closeImageModal()" title="关闭">✕</button>
        </div>
        <div class="image-modal-body" id="imageModalBody" onclick="closeImageModal(event)">
            <img id="modalImage" src="" alt="" draggable="false" onclick="event.stopPropagation()">
        </div>
    </div>

    <!-- 视频播放模态框 -->
    <div class="video-modal" id="videoModal" onclick="closeVideoModal(event)">
        <div class="video-modal-content" onclick="event.stopPropagation()">
            <button class="video-modal-close" onclick="closeVideoModal()">✕</button>
            <video id="modalVideo" controls>
                <source src="" type="video/mp4">
                您的浏览器不支持视频播放
            </video>
        </div>
    </div>

    <!-- 移动端菜单按钮 -->
    <button class="mobile-menu-btn" onclick="toggleSidebar()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
    </button>
    <div class="sidebar-overlay" onclick="toggleSidebar()"></div>

    <!-- 侧边栏 -->
    <nav class="sidebar" id="sidebar">
        <div class="logo">
            <div class="logo-icon">N</div>
            Nameyn
        </div>

        <div class="nav-group">
            <div class="nav-group-header" onclick="toggleGroup(this)">
                <div>
                    <span data-lang-zh>快速开始</span>
                    <span data-lang-en>Start</span>
                </div>
            </div>
            <div class="nav-links">
                <a href="#intro" class="nav-link">
                    <span data-lang-zh>简介与地址</span>
                    <span data-lang-en>Introduction</span>
                </a>
                <a href="#register" class="nav-link">
                    <span data-lang-zh>注册账号</span>
                    <span data-lang-en>Registration</span>
                </a>
            </div>
        </div>

            <div class="nav-group">
            <div class="nav-group-header" onclick="toggleGroup(this)">
                <div>
                    <span data-lang-zh>接口示例</span>
                    <span data-lang-en>API Examples</span>
                </div>
            </div>
            <div class="nav-links">
                <a href="#api-usage" class="nav-link">
                    <span data-lang-zh>接口示例</span>
                    <span data-lang-en>API Examples</span>
                </a>
            </div>
        </div>

        <div class="nav-group">
            <div class="nav-group-header" onclick="toggleGroup(this)">
                <div>
                    <span data-lang-zh>获取令牌</span>
                    <span data-lang-en>Get Token</span>
                </div>
            </div>
            <div class="nav-links">
                <a href="#get-token" class="nav-link">
                    <span data-lang-zh>令牌教程</span>
                    <span data-lang-en>Token Tutorial</span>
                </a>
            </div>
        </div>

        <div class="nav-group">
            <div class="nav-group-header" onclick="toggleGroup(this)">
                <div>
                    <span data-lang-zh>代码类配置教程</span>
                    <span data-lang-en>Code Tutorials</span>
                </div>
            </div>
            <div class="nav-links">
                <a href="#tutorial-claudecode" class="nav-link">Claude Code</a>
                <a href="#tutorial-ccswitch" class="nav-link">CC Switch</a>
                <a href="#tutorial-gemini" class="nav-link">Gemini CLI</a>
                <a href="#tutorial-codex" class="nav-link">CodeX CLI</a>
                <a href="#tutorial-codex-cc" class="nav-link">Codex CC</a>
                <a href="#tutorial-cline" class="nav-link">VS Code (Cline)</a>
                <a href="#tutorial-openclaw" class="nav-link">OpenClaw</a>
                <a href="#tutorial-opencode" class="nav-link">OpenCode</a>
                <a href="#tutorial-copaw" class="nav-link">Copaw</a>
                <a href="#tutorial-dify" class="nav-link">Dify</a>
                <a href="#tutorial-n8n" class="nav-link">n8n</a>
                <a href="#tutorial-easydict" class="nav-link">Easydict</a>
                <a href="#tutorial-python" class="nav-link">Python SDK</a>
                <a href="#tutorial-cursor" class="nav-link">Cursor</a>
                <a href="#tutorial-cursor-cline" class="nav-link">Cursor (Cline)</a>
                <a href="#tutorial-trae-cline" class="nav-link">Trae (Cline)</a>
                <a href="#tutorial-trae" class="nav-link">Trae</a>
                <a href="#tutorial-roocode" class="nav-link">Roo Code</a>
                <a href="#tutorial-qwenpaw" class="nav-link">QwenPaw</a>
                <a href="#tutorial-workbuddy" class="nav-link">WorkBuddy</a>
                <a href="#tutorial-ccswitch-gpt" class="nav-link">Claude Code (GPT)</a>
                <a href="#tutorial-hermes-agent" class="nav-link">Hermes Agent</a>
                <a href="#tutorial-astrbot" class="nav-link">AstrBot</a>
                <a href="#app-kelivo" class="nav-link">Kelivo</a>
                <a href="#tutorial-opencowork" class="nav-link">OpenCowork</a>
                <a href="#tutorial-zotero" class="nav-link">Zotero 翻译文献</a>
            </div>
        </div>

        <div class="nav-group">
            <div class="nav-group-header" onclick="toggleGroup(this)">
                <div>
                    <span data-lang-zh>客户端配置教程</span>
                    <span data-lang-en>Client Tutorials</span>
                </div>
            </div>
            <div class="nav-links">
                <a href="#chatbox" class="nav-link">Chatbox</a>
                <a href="#cherry" class="nav-link">Cherry Studio</a>
                <a href="#cherry-image" class="nav-link">Cherry Studio (Image)</a>
                <a href="#tutorial-sillytavern" class="nav-link">SillyTavern</a>
                <a href="#tutorial-android-sillytavern" class="nav-link">安卓 SillyTavern</a>
                <a href="#app-lovemo" class="nav-link">Lovemo</a>
                <a href="#app-omate" class="nav-link">Omate</a>
                <a href="#app-rikkahub" class="nav-link">Rikkahub</a>
                <a href="#app-tavo" class="nav-link">Tavo</a>
                <a href="#app-lifekline" class="nav-link">LifeKline</a>
                <a href="#app-promptopt" class="nav-link">提示词优化器</a>
                <a href="#app-xiaoyi" class="nav-link">小懿 (XiaoYi)</a>
                <a href="#app-smallphone" class="nav-link">小手机 (SmallPhone)</a>
            </div>
        </div>
    </nav>

    <!-- 语言切换 -->
    <div class="lang-switcher">
        <button class="lang-btn active" id="langZh" onclick="switchLanguage('zh')">简</button>
        <button class="lang-btn" id="langEn" onclick="switchLanguage('en')">EN</button>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
        
        <section id="intro">
            <h1 data-lang-zh>Nameyn 官方指南</h1>
            <h1 data-lang-en>Nameyn Guide</h1>
            
            <p class="subtitle">
                <span data-lang-zh>新一代 AI 中转服务 · 极速 · 稳定 · 便捷</span>
                <span data-lang-en>Next-Gen AI Relay · Fast · Stable · Easy</span>
            </p>

            <a href="#get-token" class="featured-link">
                <div class="featured-link-icon">📖</div>
                <div style="flex:1">
                    <div class="featured-link-title">
                        <span data-lang-zh>图文详细教程</span>
                        <span data-lang-en>Detailed Tutorial</span>
                    </div>
                    <div style="color:var(--text-secondary); font-size:0.9rem;">
                        <span data-lang-zh>新手强烈推荐阅读，包含完整注册与配置流程</span>
                        <span data-lang-en>Recommended for beginners, includes full setup guide</span>
                    </div>
                </div>
                <div style="font-size:1.5rem; color:var(--brand-primary)">→</div>
            </a>

            <div class="alert alert-info">
                <strong>
                    <span data-lang-zh>📢 官方访问地址</span>
                    <span data-lang-en>📢 Official URLs</span>
                </strong>
                <div style="margin-top:10px; display:grid; gap:8px;">
                    <div style="font-size:1.1rem; font-weight:600;"><span data-lang-zh>官方网站：</span><span data-lang-en>Official Site: </span><a href="https://nameyn.shop" target="_blank">https://nameyn.shop---(只能用于进网站！！！不能拿来当api主机\baseurl ！！！)</a></div>
                    <div><span data-lang-zh>亚太加速：</span><span data-lang-en>Asia-Pacific Acceleration: </span><a href="https://api.nameyn.shop" target="_blank">https://api.nameyn.shop</a></div>
                    <div style="font-size:1.1rem; font-weight:600;"><span data-lang-zh>API 接口地址：</span><span data-lang-en>API Endpoint: </span><span>https://nameyn.shop/v1---(api主机\baseurl用这个！！！)</span></div>
                    <div><span data-lang-zh>备用API接口：</span><span data-lang-en>Backup API: </span><span>https://api.nameyn.shop/v1</span></div>
                </div>
            </div>

            <h3 data-lang-zh>快捷入口</h3>
            <h3 data-lang-en>Quick Links</h3>
            <div class="quick-links">
                <a href="https://nameyn.shop/console/token" target="_blank" class="quick-link">
                    <div class="quick-link-icon">🔑</div>
                    <div>
                        <span data-lang-zh>令牌管理</span>
                        <span data-lang-en>Tokens</span>
                    </div>
                </a>
                <a href="https://nameyn.shop/console/personal" target="_blank" class="quick-link">
                    <div class="quick-link-icon">👤</div>
                    <div>
                        <span data-lang-zh>个人中心</span>
                        <span data-lang-en>Profile</span>
                    </div>
                </a>
                <a href="https://nameyn.shop/console/topup" target="_blank" class="quick-link">
                    <div class="quick-link-icon">💰</div>
                    <div>
                        <span data-lang-zh>充值</span>
                        <span data-lang-en">Top Up</span>
                    </div>
                </a>
                <a href="https://nameyn.shop/pricing" target="_blank" class="quick-link">
                    <div class="quick-link-icon">📊</div>
                    <div>
                        <span data-lang-zh>价格表</span>
                        <span data-lang-en">Pricing</span>
                    </div>
                </a>
            </section>

        <section id="register">
            <h2 style="display: flex; align-items: center; gap: 15px;">
                <span data-lang-zh>注册账号</span>
                <span data-lang-en>Registration</span>
                <a href="#" onclick="smartOpen('/console/personal'); return false;" style="font-size: 0.9rem; font-weight: 500; color: var(--brand-primary); text-decoration: none; background: rgba(67, 97, 238, 0.1); padding: 6px 14px; border-radius: 20px;">
                    <span data-lang-zh>👉 点击注册</span>
                    <span data-lang-en>👉 Register Now</span>
                </a>
            </h2>
            
            <div class="tutorial-images" style="margin-top:20px;">
                <div class="tutorial-image">
                    <img src="教程图片/注册账号教程图片/1.png" alt="注册教程" loading="lazy">
                </div>
            </div>
        </section>

        <section id="api-usage">
            <h2 data-lang-zh>接口示例</h2>
            <h2 data-lang-en>API Examples</h2>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>添加自定义 Provider（关键步骤）</h4>
                    <h4 data-lang-en>Add Custom Provider (Key Step)</h4>
                    <p>
                        <span data-lang-zh>在配置文件中，将以下 JSON 代码片段加入到 <code>models.providers</code> 块中：</span>
                        <span data-lang-en>Add the following JSON to <code>models.providers</code> block:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>"models": {
  "providers": {
    "claude": {
      "baseUrl": "https://nameyn.shop",
      "apiKey": "sk-xxxxxx你的网站获取的秘钥",
      "api": "anthropic-messages",
      "models": [
        {
          "id": "claude-opus-4-6",
          "name": "claude-opus-4-6",
          "reasoning": false,
          "input": ["text"],
          "cost": {
            "input": 0,
            "output": 0,
            "cacheRead": 0,
            "cacheWrite": 0
          },
          "contextWindow": 200000,
          "maxTokens": 8192
        }
      ]
    }
  }
}</code></pre>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>cURL 示例</h3>
            <h3 data-lang-en>cURL Example</h3>
            <div class="code-block">
                <div class="code-header">
                    <span class="code-lang">BASH</span>
                    <button class="copy-btn" onclick="copyCode(this)">COPY</button>
                </div>
                <pre><code>curl https://nameyn.shop/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-xxxxxxxx" \
  -d '{
    "model": "gemini-3-pro-preview",
    "messages": [{"role": "user", "content": "Hi!"}]
  }'</code></pre>
            </div>
            
            <h3 data-lang-zh>Python 示例</h3>
            <h3 data-lang-en>Python Example</h3>
            <div class="code-block">
                <div class="code-header">
                    <span class="code-lang">PYTHON</span>
                    <button class="copy-btn" onclick="copyCode(this)">COPY</button>
                </div>
                <pre><code>from openai import OpenAI

client = OpenAI(
    api_key="sk-xxxxxxxx",
    base_url="https://nameyn.shop/v1"
)

response = client.chat.completions.create(
    model="gemini-3-pro-preview",
    messages=[{"role": "user", "content": "Hi!"}]
)</code></pre>
            </div>
        </section>

        <section id="get-token">
            <h2 data-lang-zh>获取 API 令牌</h2>
            <h2 data-lang-en>Get API Token</h2>
            
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 令牌配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/密钥配置.mp4" type="video/mp4">
                </video>
            </div>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>点击令牌管理</h4>
                    <h4 data-lang-en>Click Token Management</h4>
                    <p>
                        <span data-lang-zh>显示操作项，选择<b>添加令牌</b></span>
                        <span data-lang-en>Show options, select <b>Add Token</b></span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/2.png" alt="令牌管理" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="step-card">
                    <h4 data-lang-zh>输入名称并选择分组</h4>
                    <h4 data-lang-en>Enter Name and Select Group</h4>
                    <p>
                        <span data-lang-zh>名称任意输入，点击下滑栏按需求选择<b>令牌分组</b></span>
                        <span data-lang-en>Enter any name, select <b>Token Group</b> from dropdown</span>
                    </p>
                    <p style="font-size: 1.8rem; font-weight: 800; color: #1a1c20; margin: 15px 0; text-align: center;">
                        <span data-lang-zh>一定要选择模型对应的分组！</span>
                        <span data-lang-en>Make sure to select the corresponding model group!</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/3.png" alt="输入名称" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/4.png" alt="选择分组" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="step-card">
                    <h4 data-lang-zh>设置过期时间和数量</h4>
                    <h4 data-lang-en>Set Expiration and Quantity</h4>
                    <p>
                        <span data-lang-zh>过期时间选择<b>永不过期</b>，新建数量选择<b>一个</b></span>
                        <span data-lang-en>Set expiration to <b>Never</b>, quantity to <b>1</b></span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/5.png" alt="设置过期时间" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="step-card">
                    <h4 data-lang-zh>设置令牌额度</h4>
                    <h4 data-lang-en>Set Token Quota</h4>
                    <p>
                        <span data-lang-zh>令牌额度选择<b>无限额度</b></span>
                        <span data-lang-en>Select <b>Unlimited Quota</b></span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/6.png" alt="令牌额度" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="step-card">
                    <h4 data-lang-zh>模型限制（可选）</h4>
                    <h4 data-lang-en>Model Restrictions (Optional)</h4>
                    <p>
                        <span data-lang-zh>模型限制列表默认不做选择</span>
                        <span data-lang-en>Leave model restrictions empty by default</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/7.png" alt="模型限制" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="step-card">
                    <h4 data-lang-zh>复制密钥</h4>
                    <h4 data-lang-en>Copy Key</h4>
                    <p>
                        <span data-lang-zh>生成的密钥选择小眼睛旁边的<b>点击复制</b>即可</span>
                        <span data-lang-en>Click <b>Copy</b> button next to the generated key</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/获取令牌/8.png" alt="复制密钥" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="tutorial-claudecode">
            <h2 data-lang-zh>Claude Code 配置指南</h2>
            <h2 data-lang-en>Claude Code Setup</h2>
            
            <a href="https://github.com/farion1231/cc-switch/releases/tag/v3.11.1" target="_blank" class="clickable-box">
                <span class="box-label">GitHub</span>
                <span class="box-value">farion1231/cc-switch v3.11.1（单击跳转！）</span>
            </a>
            
            <h3 data-lang-zh>安装步骤</h3>
            <h3 data-lang-en>Installation Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 安装 Node.js</h4>
                    <h4 data-lang-en">1. Install Node.js</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://nodejs.org/" target="_blank" style="color:var(--brand-primary)">Node.js 官网</a>，建议下载左侧的 LTS 版本，它是长期支持版，更加稳定。</span>
                        <span data-lang-en">Visit <a href="https://nodejs.org/" target="_blank" style="color:var(--brand-primary)">Node.js official website</a>, download the LTS version on the left for better stability.</span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 安装 Git</h4>
                    <h4 data-lang-en">2. Install Git</h4>
                    <p>
                        <span data-lang-zh">访问 <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">Git 官网</a>，页面会自动推荐适合你操作系统的版本，点击按钮即可下载。</span>
                        <span data-lang-en">Visit <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">Git official website</a>, the page will automatically recommend the version for your OS.</span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 安装 Claude Code</h4>
                    <h4 data-lang-en">3. Install Claude Code</h4>
                    <p>
                        <span data-lang-zh>打开 cmd 命令行，通过 npm 安装 claude-code：</span>
                        <span data-lang-en">Open cmd and install claude-code via npm:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>npm install -g @anthropic-ai/claude-code</code></pre>
                    </div>
                </div>
            </div>
            
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Claude Code 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/claude code.mp4" type="video/mp4">
                </video>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 配置 API 信息</h4>
                    <h4 data-lang-en>1. Configure API Info</h4>
                    <p>
                        <span data-lang-zh>启动 Claude Code 后，配置以下 API 信息：</span>
                        <span data-lang-en>After launching Claude Code, configure the following API info:</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API URL</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>API URL</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥 <code>sk-xxxx</code></span>
                            <span data-lang-en><b>API Key</b>: Site token <code>sk-xxxx</code></span></li>
                        <li><span data-lang-zh><b>API 格式</b>：anthropic-messages</span>
                            <span data-lang-en><b>API Format</b>: anthropic-messages</span></li>
                        <li><span data-lang-zh><b>模型</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Model</b>: <code>claude-opus-4-6</code></span></li>
                    </ul>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 启动</h4>
                    <h4 data-lang-en>2. Start</h4>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>claude</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <section id="tutorial-ccswitch">
            <h2 data-lang-zh>CC Switch 配置教程</h2>
            <h2 data-lang-en>CC Switch Configuration</h2>
            
            <a href="https://github.com/farion1231/cc-switch/releases/tag/v3.11.1" target="_blank" class="clickable-box">
                <span class="box-label">GitHub</span>
                <span class="box-value">farion1231/cc-switch v3.11.1（单击跳转下载！）</span>
            </a>
            
            <div class="alert alert-info">
                <strong><span data-lang-zh>📌 关于 CC Switch</span><span data-lang-en>📌 About CC Switch</span></strong>
                <span data-lang-zh">CC Switch 是一个强大的 API 切换工具，支持多种 AI 服务配置。以下是针对不同插件的详细配置教程。</span>
                <span data-lang-en">CC Switch is a powerful API switching tool that supports multiple AI service configurations. Below are detailed tutorials for different plugins.</span>
            </div>
            
            <h3 data-lang-zh>1. Claude 配置</h3>
            <h3 data-lang-en>1. Claude Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>打开 cc switch 并选择 Claude</h4>
                    <h4 data-lang-en>Open cc switch and select Claude</h4>
                    <p>
                        <span data-lang-zh>启动 cc switch，根据所使用插件进行配置，选择 Claude。</span>
                        <span data-lang-en>Launch cc switch and select Claude based on your plugin.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/9.png" alt="打开cc switch" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/10.png" alt="选择Claude插件" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>点击右上角加号添加配置</h4>
                    <h4 data-lang-en">Click Plus to Add Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>供应商名称</b>：随意填写</span>
                            <span data-lang-en><b>Provider Name</b>: Any name</span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥</span>
                            <span data-lang-en><b>API Key</b>: Site token</span></li>
                        <li><span data-lang-zh><b>请求地址</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>Request URL</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>API 格式</b>：anthropic messages（原生）</span>
                            <span data-lang-en><b>API Format</b>: anthropic messages (native)</span></li>
                        <li><span data-lang-zh><b>主模型</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Main Model</b>: <code>claude-opus-4-6</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/11.png" alt="点击加号" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/12.png" alt="填入配置信息" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>2. Gemini 配置</h3>
            <h3 data-lang-en>2. Gemini Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>打开 cc switch 并选择 Gemini</h4>
                    <h4 data-lang-en>Open cc switch and select Gemini</h4>
                    <p>
                        <span data-lang-zh>在 cc switch 中选择 Gemini 插件。</span>
                        <span data-lang-en>Select Gemini plugin in cc switch.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/13.png" alt="选择Gemini" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/14.png" alt="Gemini配置1" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>点击右上角加号添加配置</h4>
                    <h4 data-lang-en">Click Plus to Add Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>供应商名称</b>：随意填写</span>
                            <span data-lang-en><b>Provider Name</b>: Any name</span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥</span>
                            <span data-lang-en><b>API Key</b>: Site token</span></li>
                        <li><span data-lang-zh><b>请求地址</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>Request URL</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>主模型</b>：<code>[次]gemini-3.1-pro-preview</code></span>
                            <span data-lang-en><b>Main Model</b>: <code>[次]gemini-3.1-pro-preview</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/15.png" alt="Gemini配置2" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>3. OpenCode 配置</h3>
            <h3 data-lang-en>3. OpenCode Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>打开 cc switch 并选择 OpenCode</h4>
                    <h4 data-lang-en>Open cc switch and select OpenCode</h4>
                    <p>
                        <span data-lang-zh>在 cc switch 中选择 OpenCode 插件。</span>
                        <span data-lang-en>Select OpenCode plugin in cc switch.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/16.png" alt="选择OpenCode" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/17.png" alt="OpenCode配置1" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>点击右上角加号添加配置</h4>
                    <h4 data-lang-en">Click Plus to Add Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>供应商标识</b>：claude</span>
                            <span data-lang-en><b>Provider ID</b>: claude</span></li>
                        <li><span data-lang-zh><b>供应商名称</b>：随意填写</span>
                            <span data-lang-en><b>Provider Name</b>: Any name</span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥</span>
                            <span data-lang-en><b>API Key</b>: Site token</span></li>
                        <li><span data-lang-zh><b>请求地址</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>Request URL</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>主模型</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Main Model</b>: <code>claude-opus-4-6</code></span></li>
                        <li><span data-lang-zh><b>显示名称</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Display Name</b>: <code>claude-opus-4-6</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/18.png" alt="OpenCode配置2" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>4. OpenClaw 配置</h3>
            <h3 data-lang-en>4. OpenClaw Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>选择 OpenClaw 界面</h4>
                    <h4 data-lang-en>Select OpenClaw Interface</h4>
                    <p>
                        <span data-lang-zh>在 cc switch 中选择 OpenClaw 插件界面。</span>
                        <span data-lang-en>Select OpenClaw plugin interface in cc switch.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/19.png" alt="选择OpenClaw" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/20.png" alt="OpenClaw配置1" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>点击右上角加号添加配置</h4>
                    <h4 data-lang-en">Click Plus to Add Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>供应商标识</b>：claude</span>
                            <span data-lang-en><b>Provider ID</b>: claude</span></li>
                        <li><span data-lang-zh><b>供应商名称</b>：Nameyn</span>
                            <span data-lang-en><b>Provider Name</b>: Nameyn</span></li>
                        <li><span data-lang-zh><b>API 协议</b>：anthropic messages</span>
                            <span data-lang-en><b>API Protocol</b>: anthropic messages</span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥</span>
                            <span data-lang-en><b>API Key</b>: Site token</span></li>
                        <li><span data-lang-zh><b>API 端点</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>API Endpoint</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>模型 ID</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Model ID</b>: <code>claude-opus-4-6</code></span></li>
                        <li><span data-lang-zh><b>模型名称</b>：<code>claude-opus-4-6</code></span>
                            <span data-lang-en><b>Model Name</b>: <code>claude-opus-4-6</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cc switch使用教程/21.png" alt="OpenClaw配置2" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh">所有配置都使用 <b>auto</b> 分组的令牌。配置完成后即可在对应的插件中使用 Nameyn 服务。如需更详细的图文教程，请参考上方视频或在 QQ群：753915287 中咨询管理员。</span>
                <span data-lang-en>Use tokens from <b>auto</b> group for all configurations. After setup, you can use Nameyn service in the corresponding plugins. For more detailed tutorials, please refer to the video above or contact administrators in the QQ group.</span>
            </div>
        </section>

        <section id="tutorial-gemini">
            <h2 data-lang-zh>Gemini CLI 配置指南</h2>
            <h2 data-lang-en>Gemini CLI Setup</h2>
            
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Gemini CLI 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/gemini cli教程.mp4" type="video/mp4">
                </video>
            </div>
            
            <h3 data-lang-zh>安装步骤</h3>
            <h3 data-lang-en>Installation Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 安装 Node.js</h4>
                    <h4 data-lang-en">1. Install Node.js</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://nodejs.org/" target="_blank" style="color:var(--brand-primary)">Node.js 官网</a>，建议下载左侧的 LTS 版本，它是长期支持版，更加稳定。</span>
                        <span data-lang-en">Visit <a href="https://nodejs.org/" target="_blank" style="color:var(--brand-primary)">Node.js official website</a>, download the LTS version on the left for better stability.</span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 安装 Git</h4>
                    <h4 data-lang-en">2. Install Git</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">Git 官网</a>，页面会自动推荐适合你操作系统的版本，点击按钮即可下载。</span>
                        <span data-lang-en">Visit <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">Git official website</a>, the page will automatically recommend the version for your OS.</span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 安装 Gemini CLI</h4>
                    <h4 data-lang-en">3. Install Gemini CLI</h4>
                    <p>
                        <span data-lang-zh>打开 cmd 命令行，通过 npm 安装 gemini-cli：</span>
                        <span data-lang-en">Open cmd and install gemini-cli via npm:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>npm install -g @google/gemini-cli</code></pre>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置 (.env)</h4>
                    <h4 data-lang-en>Configure (.env)</h4>
                    <p>
                        <span data-lang-zh>创建配置文件 (Windows: <code>%USERPROFILE%\.gemini\.env</code>, Mac/Linux: <code>~/.gemini/.env</code>)</span>
                        <span data-lang-en">Create config file at <code>~/.gemini/.env</code></span>
                    </p>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">.ENV</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>GOOGLE_GEMINI_BASE_URL=https://nameyn.shop
GEMINI_API_KEY=sk-xxxxxxxx
GEMINI_MODEL=gemini-2.5-pro</code></pre>
                    </div>
                    <div class="alert alert-info" style="margin-top:15px; padding:10px;">
                        <small>
                            <span data-lang-zh>注意：API Key 请使用 <b>Gemini/Vertex</b> 分组的令牌。</span>
                            <span data-lang-en">Note: Use token from <b>Gemini/Vertex</b> group.</span>
                        </small>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>启动</h4>
                    <h4 data-lang-en">Start</h4>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>gemini</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <section id="tutorial-codex">
            <h2 data-lang-zh>CodeX CLI 配置指南</h2>
            <h2 data-lang-en>CodeX CLI Setup</h2>
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>添加 agents.defaults（关键步骤）</h4>
                    <h4 data-lang-en>Add agents.defaults (Key Step)</h4>
                    <p>
                        <span data-lang-zh>还需要告知 OpenClaw 优先使用该节点：</span>
                        <span data-lang-en>Tell OpenClaw to use this provider by default:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>"agents": {
  "defaults": {
    "model": {
      "primary": "claude/claude-opus-4-6"
    },
    "models": {
      "claude/claude-opus-4-6": {
        "alias": "claude-opus-4-6"
      }
    }
  }
}</code></pre>
                    </div>
                </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 启动</h4>
                    <h4 data-lang-en>4. Start</h4>
                    <div class="code-block" style="margin: 10px 0;">
                        <pre><code>codex</code></pre>
                    </section>

        <section id="tutorial-codex-cc">
            <h2 data-lang-zh>Codex CC 配置指南</h2>
            <h2 data-lang-en>Codex CC Setup</h2>
            
            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>
                    <span data-lang-zh>📌 关于 Codex CC</span>
                    <span data-lang-en>📌 About Codex CC</span>
                </strong>
                <span data-lang-zh>Codex CC 是一款强大的 AI 编码助手工具，支持通过自定义 API 接入 Nameyn 服务。</span>
                <span data-lang-en>Codex CC is a powerful AI coding assistant tool that supports connecting to Nameyn services through custom API.</span>
            </div>
            
            <h3 data-lang-zh>示例调用参数</h3>
            <h3 data-lang-en>Example Call Parameters</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 获取 API Key</h4>
                    <h4 data-lang-en>1. Get API Key</h4>
                    <p>
                        <span data-lang-zh>进入站点控制台 → 令牌管理 → 复制令牌秘钥。</span>
                        <span data-lang-en>Go to Site Console → Token Management → Copy Token Key.</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">Api Key</span>
                        <span class="config-value">站点控制台 → 令牌管理 → 复制令牌秘钥</span>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 填写请求地址</h4>
                    <h4 data-lang-en>2. Enter Request URL</h4>
                    <p>
                        <span data-lang-zh>将请求地址设置为 Nameyn 的 API 接入点：</span>
                        <span data-lang-en>Set the request URL to Nameyn's API endpoint:</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">请求地址</span>
                        <span class="config-value">https://nameyn.shop/v1</span>
                        <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 选择模型</h4>
                    <h4 data-lang-en>3. Select Model</h4>
                    <p>
                        <span data-lang-zh>模型名称填写：</span>
                        <span data-lang-en>Enter model name:</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">模型名称</span>
                        <span class="config-value">gpt-5.4</span>
                        <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>配置截图</h3>
            <h3 data-lang-en>Configuration Screenshots</h3>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/codex-cc配置教程/22.jpg" alt="Codex CC 配置步骤1" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/codex-cc配置教程/23.png" alt="Codex CC 配置步骤2" loading="lazy">
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后即可在 Codex CC 中使用 Nameyn 的 API 服务。</span>
                <span data-lang-en>Use token from <b>auto</b> group. After configuration, you can use Nameyn's API service in Codex CC.</span>
            </div>
        </section>

        <section id="tutorial-cline">
            <h2>VS Code (Cline)</h2>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Cline 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/cline.mp4" type="video/mp4">
                </video>
            </div>
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>安装 <b>Cline</b> 插件。</span></li>
                        <li><span data-lang-zh>API Provider: <b>OpenAI Compatible</b></span></li>
                        <li><span data-lang-zh>Base URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>Model ID: <code>[次]gemini-2.5-pro</code></span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/vscode配置cline插件/24.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/vscode配置cline插件/25.jpg" alt="image3.jpg" loading="lazy">
                </div>
            </div>
</section>

        <section id="tutorial-openclaw">
            <h2 data-lang-zh>OpenClaw 配置指南</h2>
            <h2 data-lang-en>OpenClaw Setup</h2>
            
            <a href="https://openclaw.ai/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://openclaw.ai/（官网单击跳转！）</span>
            </a>
            <a href="https://github.com/openclaw/openclaw" target="_blank" class="clickable-box">
                <span class="box-label">GitHub</span>
                <span class="box-value">openclaw/openclaw（GitHub 仓库）</span>
            </a>
            
            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>⚠️ 注意</strong>
                <span data-lang-zh>因为 Clawdbot 改名，有些插件 SDK 安装的时候注意如果安装失败，注意要改成 OpenClaw</span>
                <span data-lang-en">Due to Clawdbot renaming, if SDK installation fails, try using OpenClaw instead</span>
            </div>
            
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 OpenClaw 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/openclaw.mp4" type="video/mp4">
                </video>
            </div>
            
            <h3 data-lang-zh>配置文件下载</h3>
            <h3 data-lang-en>Configuration File Download</h3>
            
            <a href="json/openclaw.json" download="openclaw.json" class="clickable-box" style="margin: 15px 0;" onclick="downloadFile('json/openclaw.json', 'openclaw.json'); return false;">
                <span class="box-value">openclaw.json（点击下载完整配置文件 - Windows版）</span>
            </a>
            <a href="json/openclaw（mac版本）.json" download="openclaw（mac版本）.json" class="clickable-box" style="margin: 15px 0;" onclick="downloadFile('json/openclaw（mac版本）.json', 'openclaw（mac版本）.json'); return false;">
                <span class="box-value">openclaw.json（点击下载完整配置文件 - Mac版）</span>
            </a>
            
            <h3 data-lang-zh>阿里云配置教程</h3>
            <h3 data-lang-en>Alibaba Cloud Configuration</h3>
            
            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>📖 官方文档</strong>
                <span data-lang-zh">阿里云官方配置教程：</span>
                <span data-lang-en">Official Alibaba Cloud tutorial: </span>
                <a href="https://help.aliyun.com/zh/model-studio/openclaw#f5bd07065ejo3" target="_blank" style="color:var(--brand-primary)">https://help.aliyun.com/zh/model-studio/openclaw</a>
            </div>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置 JSON 文件</h4>
                    <h4 data-lang-en>Configure JSON File</h4>
                    <p>
                        <span data-lang-zh">使用以下 JSON 配置模板，替换教程中的文本为下方文本，并替换自己的密钥：</span>
                        <span data-lang-en">Use the following JSON configuration template, replace the tutorial text with the content below, and replace with your own API key:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>"models": {
  "providers": {
    "claude": {
      "baseUrl": "https://nameyn.shop",
      "apiKey": "sk-xxxxxxx秘钥",
      "api": "anthropic-messages",
      "models": [
        {
          "id": "claude-opus-4-6",
          "name": "claude-opus-4-6",
          "reasoning": false,
          "input": ["text"],
          "cost": {
            "input": 0,
            "output": 0,
            "cacheRead": 0,
            "cacheWrite": 0
          },
          "contextWindow": 200000,
          "maxTokens": 8192
        }
      ]
    }
  }
},
"agents": {
  "defaults": {
    "model": {
      "primary": "claude/claude-opus-4-6"
    },
    "models": {
      "claude/claude-opus-4-6": {
        "alias": "claude-opus-4-6"
      }
    }
  }
}</code></pre>
                    </div>
                    <div class="alert alert-info" style="margin-top:10px;">
                        <span data-lang-zh"><b>配置说明：</b></span>
                        <span data-lang-en"><b>Configuration Notes:</b></span>
                        <ul style="padding-left:20px; margin-top:10px;">
                            <li><span data-lang-zh">将 <code>sk-xxxxxxx秘钥</code> 替换为您从 Nameyn 网站获取的实际令牌</span>
                                <span data-lang-en">Replace <code>sk-xxxxxxx秘钥</code> with your actual token from Nameyn</span></li>
                            <li><span data-lang-zh">baseUrl 使用 <code>https://nameyn.shop</code></span>
                                <span data-lang-en">Use <code>https://nameyn.shop</code> as baseUrl</span></li>
                            <li><span data-lang-zh">api 协议选择 <code>anthropic-messages</code></span>
                                <span data-lang-en">Use <code>anthropic-messages</code> as API protocol</span></li>
                            <li><span data-lang-zh">模型使用 <code>claude-opus-4-6</code></span>
                                <span data-lang-en">Use <code>claude-opus-4-6</code> model</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>腾讯云配置教程</h3>
            <h3 data-lang-en">Tencent Cloud Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>在自定义服务器里面选择自定义模型配置</h4>
                    <h4 data-lang-en>Select Custom Model Configuration in Custom Server</h4>
                    <p>
                        <span data-lang-zh>打开 OpenClaw，进入自定义服务器设置，选择自定义模型配置选项。</span>
                        <span data-lang-en>Open OpenClaw, go to custom server settings, and select custom model configuration.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/openclaw腾讯云配置教程/26.png" alt="选择自定义模型配置" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>配置自定义 JSON 文件</h4>
                    <h4 data-lang-en>Configure Custom JSON File</h4>
                    <p>
                        <span data-lang-zh>使用以下 JSON 配置模板：</span>
                        <span data-lang-en">Use the following JSON configuration template:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>{
  "provider": "openai",
  "base_url": "https://nameyn.shop",
  "api": "anthropic-messages",
  "api_key": "sk-xxxxxxxxx",
  "model": {
    "id": "claude-opus-4-6",
    "name": "claude-opus-4-6"
  }
}</code></pre>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>通用配置模板</h4>
                    <h4 data-lang-en>Universal Configuration Template</h4>
                    <p>
                        <span data-lang-zh">如果需要其他模型，可以使用以下通用模板接入任何兼容 OpenAI/Anthropic (openai-completions/anthropic-messages) 协议的模型：</span>
                        <span data-lang-en>For other models, use this universal template to connect any OpenAI/Anthropic compatible model:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>{
  "provider": "openai",
  "base_url": "https://nameyn.shop",
  "api": "anthropic-messages",
  "api_key": "sk-xxxxxxxxx",
  "model": {
    "id": "claude-opus-4-6",
    "name": "claude-opus-4-6"
  }
}</code></pre>
                    </div>
                    <div class="alert alert-info" style="margin-top:10px;">
                        <span data-lang-zh><b>参数说明：</b></span>
                        <span data-lang-en"><b>Parameter Description:</b></span>
                        <ul style="padding-left:20px; margin-top:10px;">
                            <li><span data-lang-zh><b>provider</b>: 提供商名称（可自定义）</span>
                                <span data-lang-en><b>provider</b>: Provider name (customizable)</span></li>
                            <li><span data-lang-zh><b>base_url</b>: API 接入点</span>
                                <span data-lang-en><b>base_url</b>: API endpoint</span></li>
                            <li><span data-lang-zh><b>api</b>: API 协议类型（openai-completions 或 anthropic-messages）</span>
                                <span data-lang-en><b>api</b>: API protocol type (openai-completions or anthropic-messages)</span></li>
                            <li><span data-lang-zh><b>api_key</b>: 您的 Nameyn 令牌</span>
                                <span data-lang-en><b>api_key</b>: Your Nameyn token</span></li>
                            <li><span data-lang-zh><b>model.id</b>: 模型标识符</span>
                                <span data-lang-en><b>model.id</b>: Model identifier</span></li>
                            <li><span data-lang-zh><b>model.name</b>: 模型显示名称</span>
                                <span data-lang-en><b>model.name</b>: Model display name</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>一、本地部署</h3>
            <h3 data-lang-en>1. Local Deployment</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>安装 Node.js</h4>
                    <h4 data-lang-en>Install Node.js</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://nodejs.org" target="_blank" style="color:var(--brand-primary)">nodejs.org</a> 下载 LTS 长期支持版（稳定性强，适合开发/生产环境）。页面会自动识别你的系统，直接点下载按钮就行。</span>
                        <span data-lang-en">Visit <a href="https://nodejs.org" target="_blank" style="color:var(--brand-primary)">nodejs.org</a> to download LTS version.</span>
                    </p>
                    <div class="alert alert-info" style="margin-top:10px; padding:10px;">
                        <small>💡 Node.js 安装包自带 npm（包管理器），不用单独下载。</small>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>安装 Git</h4>
                    <h4 data-lang-en>Install Git</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">git-scm.com</a> 下载安装。Windows 建议选 64 位版本，安装时默认选项基本够用。</span>
                        <span data-lang-en">Visit <a href="https://git-scm.com/" target="_blank" style="color:var(--brand-primary)">git-scm.com</a> to download and install.</span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>验证安装</h4>
                    <h4 data-lang-en>Verify Installation</h4>
                    <p>
                        <span data-lang-zh>安装完成后，打开命令行（Windows 用 CMD/PowerShell，Mac/Linux 用终端），分别输入以下命令，能显示版本号就是安装成功：</span>
                        <span data-lang-en">After installation, open terminal and run these commands to verify:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>node -v
npm -v</code></pre>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>安装 OpenClaw</h4>
                    <h4 data-lang-en">Install OpenClaw</h4>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>npm i -g openclaw</code></pre>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>二、核心配置流程</h3>
            <h3 data-lang-en>2. Core Configuration</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>定位配置文件</h4>
                    <h4 data-lang-en">Locate Config File</h4>
                    <p>
                        <span data-lang-zh>OpenClaw 的配置在 <code>openclaw.json</code> 中。请根据您的操作系统找到它：</span>
                        <span data-lang-en">OpenClaw config is in <code>openclaw.json</code>. Find it based on your OS:</span>
                    </p>
                    <table style="margin-top:15px;">
                        <thead>
                            <tr>
                                <th>操作系统</th>
                                <th>默认路径</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Windows</td>
                                <td><code>C:\Users\&lt;Your_Username&gt;\.openclaw\openclaw.json</code></td>
                            </tr>
                            <tr>
                                <td>macOS / Linux</td>
                                <td><code>~/.openclaw/openclaw.json</code></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>添加自定义 Provider（关键步骤）</h4>
                    <h4 data-lang-en>Add Custom Provider (Key Step)</h4>
                    <p>
                        <span data-lang-zh>在配置文件中，将以下 JSON 代码片段加入到 <code>models.providers</code> 块中。根据您的需求选择配置：</span>
                        <span data-lang-en>Add the following JSON to <code>models.providers</code> block. Choose based on your needs:</span>
                    </p>
                    
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>"models": {
  "providers": {
    "claude": {
      "baseUrl": "https://nameyn.shop",
      "apiKey": "sk-xxxxxx你的网站获取的秘钥",
      "api": "anthropic-messages",
      "models": [
        {
          "id": "claude-opus-4-6",
          "name": "claude-opus-4-6",
          "reasoning": false,
          "input": ["text"],
          "cost": {
            "input": 0,
            "output": 0,
            "cacheRead": 0,
            "cacheWrite": 0
          },
          "contextWindow": 200000,
          "maxTokens": 8192
        }
      ]
    }
  }
}</code></pre>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>添加 agents.defaults（关键步骤）</h4>
                    <h4 data-lang-en>Add agents.defaults (Key Step)</h4>
                    <p>
                        <span data-lang-zh>还需要告知 OpenClaw 优先使用该节点。根据上面选择的 Provider 配置对应的 defaults：</span>
                        <span data-lang-en>Tell OpenClaw to use this provider by default. Configure based on your chosen provider:</span>
                    </p>
                    
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>"agents": {
  "defaults": {
    "model": {
      "primary": "claude/claude-opus-4-6"
    },
    "models": {
      "claude/claude-opus-4-6": {
        "alias": "claude-opus-4-6"
      }
    }
  }
}</code></pre>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>配置文件下载</h3>
            <h3 data-lang-en>Configuration File Download</h3>
                    <p>
                        <span data-lang-zh>在配置文件中，将以下 JSON 代码片段加入到 <code>models.providers</code> 块中：</span>
                        <span data-lang-en>Add the following JSON to <code>models.providers</code> block:</span>
                    </p>
            <a href="json/openclaw.json" download="openclaw.json" class="clickable-box" style="margin: 15px 0;" onclick="downloadFile('json/openclaw.json', 'openclaw.json'); return false;">
                <span class="box-label">📦</span>
                <span class="box-value">openclaw.json（点击下载完整配置文件 - Windows版）</span>
            </a>
            <a href="json/openclaw（mac版本）.json" download="openclaw（mac版本）.json" class="clickable-box" style="margin: 15px 0;" onclick="downloadFile('json/openclaw（mac版本）.json', 'openclaw（mac版本）.json'); return false;">
                <span class="box-label">📦</span>
                <span class="box-value">openclaw.json（点击下载完整配置文件 - Mac版）</span>
            </a>
            
            <h3 data-lang-zh>三、启动服务</h3>
            <h3 data-lang-en">3. Start Service</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>启动网关服务</h4>
                    <h4 data-lang-en">Start Gateway Service</h4>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>openclaw gateway</code></pre>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>打开链接</h4>
                    <h4 data-lang-en">Open Link</h4>
                    <p>
                        <span data-lang-zh>还需要告知 OpenClaw 优先使用该节点：</span>
                        <span data-lang-en>Tell OpenClaw to use this provider by default:</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">URL</span>
                        <span class="config-value">http://localhost:18789</span>
                        <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en">💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。详细配置步骤请观看上方视频教程。</span>
                <span data-lang-en">Use token from <b>auto</b> group. Watch the video tutorial above for detailed configuration steps.</span>
            </div>
        </section>

        <section id="tutorial-opencode">
            <h2 data-lang-zh>OpenCode 配置指南</h2>
            <h2 data-lang-en>OpenCode Setup</h2>
            <a href="https://opencode.ai" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://opencode.ai（单击跳转！）</span>
            </a>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 OpenCode 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/opencode.mp4" type="video/mp4">
                </video>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>创建配置文件</h4>
                    <h4 data-lang-en>Create Config File</h4>
                    <p>
                        <span data-lang-zh>在项目根目录创建 <code>opencode.json</code> 配置文件：</span>
                        <span data-lang-en>Create <code>opencode.json</code> config file in project root:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">JSON</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>{
  "$schema": "https://opencode.ai/config.json",
  "theme": "opencode",
  "provider": {
    "google": {
      "options": {
        "apiKey": "YOUR_API_KEY_HERE",
        "baseURL": "https://nameyn.shop/v1"
      }
    }
  },
  "model": "google/gemini-3-pro-preview",
  "autoupdate": true
}</code></pre>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>配置说明</h4>
                    <h4 data-lang-en">Configuration Details</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>apiKey</b>：将 <code>YOUR_API_KEY_HERE</code> 替换为您的 Nameyn 令牌</span>
                            <span data-lang-en><b>apiKey</b>: Replace <code>YOUR_API_KEY_HERE</code> with your Nameyn token</span></li>
                        <li><span data-lang-zh><b>baseURL</b>：API 接入点 <code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en><b>baseURL</b>: API endpoint <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh><b>model</b>：使用 <code>google/gemini-3-pro-preview</code> 模型</span>
                            <span data-lang-en><b>model</b>: Use <code>google/gemini-3-pro-preview</code> model</span></li>
                    </ul>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后，OpenCode 将自动使用 Nameyn 的 API 服务。</span>
                <span data-lang-en">Use token from <b>auto</b> group. After configuration, OpenCode will automatically use Nameyn's API service.</span>
            </div>
        </section>

        <section id="tutorial-copaw">
            <h2 data-lang-zh>Copaw 配置指南</h2>
            <h2 data-lang-en>Copaw Setup</h2>
            
            <a href="https://copaw.agentscope.io/docs/quickstart" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://copaw.agentscope.io/docs/quickstart（配置安装教程）</span>
            </a>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 选择模型添加供应商</h4>
                    <h4 data-lang-en">1. Select Model and Add Provider</h4>
                    <p>
                        <span data-lang-zh">在 Copaw 中选择模型，然后添加供应商配置。</span>
                        <span data-lang-en">Select a model in Copaw and add provider configuration.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/27.png" alt="选择模型添加供应商" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">2. 新建并添加模型</h4>
                    <h4 data-lang-en">2. Create and Add Model</h4>
                    <p>
                        <span data-lang-zh">创建新的模型配置，填写从 Nameyn 网站模型广场复制的模型名称（按量模型）。</span>
                        <span data-lang-en">Create new model configuration and enter the model name copied from Nameyn model marketplace (pay-per-use model).</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/28.png" alt="新建并添加模型" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">3. 配置 API 信息</h4>
                    <h4 data-lang-en">3. Configure API Information</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh">API 地址: <code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en">API URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh">API Key: 填入您的 Nameyn 令牌</span>
                            <span data-lang-en">API Key: Enter your Nameyn token</span></li>
                        <li><span data-lang-zh">模型名称: 从模型广场复制的按量模型名称</span>
                            <span data-lang-en">Model Name: Pay-per-use model name from marketplace</span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/29.png" alt="配置API信息" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">4. 保存设置</h4>
                    <h4 data-lang-en">4. Save Settings</h4>
                    <p>
                        <span data-lang-zh">保存配置后即可开始使用 Copaw 进行聊天。</span>
                        <span data-lang-en">After saving the configuration, you can start chatting with Copaw.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/30.png" alt="保存设置" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/31.png" alt="配置完成" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/copaw配置教程/32.png" alt="配置完成" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh">💡 提示</span><span data-lang-en">💡 Tip</span></strong>
                <span data-lang-zh">请使用 <b>auto</b> 分组的令牌。配置完成后，Copaw 将自动使用 Nameyn 的 API 服务。建议选择按量计费的模型以获得更好的性价比。</span>
                <span data-lang-en">Use token from <b>auto</b> group. After configuration, Copaw will automatically use Nameyn's API service. Pay-per-use models are recommended for better cost efficiency.</span>
            </div>
        </section>

        <section id="tutorial-dify">
            <h2>Dify</h2>
            <div class="config-item">
                <span class="config-label">URL</span>
                <span class="config-value">https://cloud.dify.ai</span>
            </div>
            <div class="step-list" style="margin-top:20px;">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>设置 -> 模型供应商 -> <b>OpenAI-API-compatible</b></span></li>
                        <li><span data-lang-zh>URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>Model: <code>[次]gemini-2.5-pro</code></span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/33.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/34.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/35.png" alt="image4.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/36.png" alt="image5.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/37.png" alt="image6.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/dify使用指南/38.png" alt="image7.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="tutorial-n8n">
            <h2>n8n</h2>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 n8n 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/n8n.mp45" type="video/mp4">
                </video>
            </div>
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>添加 <b>OpenAI</b> 模块 -> <b>Message a model</b></span></li>
                        <li><span data-lang-zh>Credential: Create New -> <b>Custom</b></span></li>
                        <li><span data-lang-zh>URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>Model: <code>[次]gemini-2.5-pro</code></span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/39.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/40.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/41.png" alt="image4.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/42.png" alt="image5.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/43.png" alt="image6.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/n8n配置教程/44.png" alt="image7.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="tutorial-easydict">
            <h2>Easydict (macOS)</h2>
            <div class="config-item">
                <span class="config-label">GitHub</span>
                <a href="https://github.com/tisfeng/Easydict" target="_blank" class="config-value">tisfeng/Easydict</a>
            </div>
            <div class="step-list" style="margin-top:20px;">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>服务: <b>OpenAI 翻译</b></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>完整地址 (Full URL): <code>https://nameyn.shop/v1/chat/completions</code></span></li>
                        <li><span data-lang-zh>Model: <code>[次]gemini-2.5-pro</code></span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/Easydict翻译教程macos/45.png" alt="image2.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="tutorial-python">
            <h2>Python SDK</h2>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Python SDK 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/python.mp4" type="video/mp4">
                </video>
            </div>
            <div class="code-block" style="margin-bottom: 20px;">
                <div class="code-header"><span class="code-lang">PYTHON - 基础调用示例</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code>from openai import OpenAI

# 初始化客户端
client = OpenAI(
    api_key="sk-xxxxxxxx",              # 填入您的令牌
    base_url="https://nameyn.shop/v1" # API 接入点
)

# 发送请求
response = client.chat.completions.create(
    model="[次]gemini-2.5-pro",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "Hello!"}
    ],
    stream=False
)

print(response.choices[0].message.content)</code></pre>
            </div>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Python 分析视频教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/python分析视频.mp4" type="video/mp4">
                </video>
            </div>
            <div class="code-block" style="margin-bottom: 20px;">
                <div class="code-header"><span class="code-lang">PYTHON - 视频分析代码</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code>import cv2
import base64
import requests
import os
import math

class VideoAnalyzer:
    def __init__(self, video_path):
        self.video_path = video_path
        if not os.path.exists(video_path):
            raise FileNotFoundError(f"❌ 找不到视频文件: {video_path}")
        
    def get_metadata(self):
        """1. 获取视频基础技术参数"""
        cap = cv2.VideoCapture(self.video_path)
        
        if not cap.isOpened():
            return None

        fps = cap.get(cv2.CAP_PROP_FPS)
        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
        width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
        height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
        duration = frame_count / fps if fps > 0 else 0
        
        cap.release()
        
        return {
            "width": width,
            "height": height,
            "fps": round(fps, 2),
            "frame_count": frame_count,
            "duration_sec": round(duration, 2),
            "file_size_mb": round(os.path.getsize(self.video_path) / (1024 * 1024), 2)
        }

    def extract_keyframes(self, max_frames=5, target_width=512):
        """2. 抽取关键帧用于AI分析"""
        print("📸 正在抽取关键帧...")
        cap = cv2.VideoCapture(self.video_path)
        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
        
        if total_frames == 0:
            return []
            
        interval = max(1, total_frames // max_frames)
        base64_frames = []
        
        for i in range(0, total_frames, interval):
            if len(base64_frames) >= max_frames:
                break
                
            cap.set(cv2.CAP_PROP_POS_FRAMES, i)
            ret, frame = cap.read()
            
            if ret:
                h, w, _ = frame.shape
                aspect_ratio = h / w
                new_height = int(target_width * aspect_ratio)
                resized_frame = cv2.resize(frame, (target_width, new_height))
                
                _, buffer = cv2.imencode('.jpg', resized_frame)
                
                base64_str = base64.b64encode(buffer).decode('utf-8')
                base64_frames.append(base64_str)
        
        cap.release()
        print(f"✅ 成功抽取 {len(base64_frames)} 帧关键画面")
        return base64_frames

    def analyze_content_with_ai(self, api_key, base64_frames):
        """3. 调用视觉大模型解析视频内容"""
        print("🧠 正在请求 AI 分析视频内容...")
        
        url = "https://nameyn.shop/v1/chat/completions"
        
        content_payload = [
            {"type": "text", "text": "这是同一个视频中按时间顺序抽取的几帧画面。请详细描述这个视频里发生了什么？包括场景、人物动作、氛围和主要事件。"}
        ]
        
        for b64 in base64_frames:
            content_payload.append({
                "type": "image_url",
                "image_url": {
                    "url": f"data:image/jpeg;base64,{b64}",
                    "detail": "low"
                }
            })

        payload = {
            "model": "[次]gemini-3-pro-preview", 
            "messages": [{"role": "user", "content": content_payload}],
            "max_tokens": 1000,
            "stream": True
        }

        try:
            response = requests.post(url, headers={"Authorization": f"Bearer {api_key}"}, json=payload, stream=True)
            
            print("\n📝 视频分析报告:\n" + "="*30)
            full_analysis = ""
            
            for line in response.iter_lines():
                if line:
                    decoded = line.decode('utf-8')
                    if decoded.startswith('data: ') and decoded != 'data: [DONE]':
                        try:
                            chunk = decoded[6:]
                            import json
                            delta = json.loads(chunk)['choices'][0]['delta'].get('content', '')
                            print(delta, end='', flush=True)
                            full_analysis += delta
                        except:
                            pass
            
            print("\n" + "="*30)
            return full_analysis
            
        except Exception as e:
            print(f"❌ 分析失败: {e}")
            return None

# 使用示例
if __name__ == "__main__":
    video_file = r"你的视频文件路径.mp4"  # 替换为你的视频文件路径
    my_api_key = "sk-xxxxxxxx"  # 替换为你的API Key
    
    if not os.path.exists(video_file):
        print(f"⚠️ 未找到 {video_file}，请先准备一个视频文件。")
    else:
        analyzer = VideoAnalyzer(video_file)
        meta = analyzer.get_metadata()
        print(f"\n📊 视频元数据: {meta}")
        frames = analyzer.extract_keyframes(max_frames=5)
        if frames:
            analyzer.analyze_content_with_ai(my_api_key, frames)</code></pre>
            </div>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Python 分析图片教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/python分析图片.mp4" type="video/mp4">
                </video>
            </div>
            <div class="code-block" style="margin-bottom: 20px;">
                <div class="code-header"><span class="code-lang">PYTHON - 图片分析代码</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code>import requests, json, base64

API_URL = "https://nameyn.shop/v1/chat/completions"
API_KEY = "Bearer sk-xxxxxxxx"  # 替换为你的API Key

def analyze_image(img_path):
    """分析图片"""
    with open(img_path, "rb") as f:
        img_base64 = base64.b64encode(f.read()).decode()
    
    payload = {
        "model": "[次]gemini-3-pro-preview",  # 模型名称
        "messages": [{
            "role": "user",
            "content": [
                {"type": "text", "text": "请描述这张图片"},
                {
                    "type": "image_url",
                    "image_url": {"url": f"data:image/jpeg;base64,{img_base64}"}
                }
            ]
        }],
        "stream": True
    }
    
    headers = {
        "Content-Type": "application/json",
        "Authorization": API_KEY
    }
    
    response = requests.post(API_URL, json=payload, headers=headers, stream=True)
    for line in response.iter_lines():
        if line:
            line = line.decode('utf-8').replace('data: ', '')
            if line.strip() == '[DONE]': break
            try:
                data = json.loads(line)
                if content := data['choices'][0]['delta'].get('content'):
                    print(content, end="", flush=True)
            except:
                continue
    print()

# 使用示例
analyze_image(r"你的图片路径.jpg")  # 替换为实际图片路径</code></pre>
            </div>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Python 视频生成教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/python视频生成.mp4" type="video/mp4">
                </video>
            </div>
            <div class="code-block" style="margin-bottom: 20px;">
                <div class="code-header"><span class="code-lang">PYTHON - 视频生成代码</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code>import requests
import time
import json
import os

def generate_video_stream_with_retry(prompt, api_key, max_retries=3):
    """带重试机制的流式视频生成指令获取函数"""
    base_url = "https://nameyn.shop/v1/chat/completions"
    
    headers = {
        "Authorization": f"Bearer {api_key}",
        "Content-Type": "application/json"
    }

    payload = {
        "model": "veo_3_1",
        "messages": [
            {
                "role": "user",
                "content": f"请帮我生成一个视频，描述是：{prompt}。请告诉我视频生成的步骤或直接提供视频链接。"
            }
        ],
        "max_tokens": 5000,
        "temperature": 0.7,
        "stream": True
    }

    for attempt in range(max_retries):
        print(f"\n🔄 尝试 {attempt + 1}/{max_retries}...")
        full_content = ""
        
        try:
            response = requests.post(base_url, headers=headers, json=payload, timeout=120, stream=True)
            
            if response.status_code != 200:
                print(f"❌ 请求失败，状态码: {response.status_code}")
                if 500 <= response.status_code < 600:
                    print("⏳ 服务器端错误，等待后重试...")
                    time.sleep(5)
                    continue
                else:
                    return None

            print("✅ 连接成功，开始接收数据流...\n")
            print("-" * 30)

            for line in response.iter_lines():
                if line:
                    decoded_line = line.decode('utf-8')
                    if decoded_line.startswith('data: '):
                        data_str = decoded_line[6:]
                        if data_str.strip() == '[DONE]':
                            print("\n" + "-" * 30)
                            print("\n✅ 流式传输结束")
                            break
                        try:
                            data_json = json.loads(data_str)
                            delta = data_json['choices'][0]['delta'].get('content', '')
                            if delta:
                                print(delta, end='', flush=True)
                                full_content += delta
                        except json.JSONDecodeError:
                            continue
            
            if full_content:
                with open("ai_response.txt", "w", encoding="utf-8") as f:
                    f.write(full_content)
                print(f"📝 完整回复已保存到 ai_response.txt")
                return full_content
            else:
                print("⚠️ 未接收到任何内容")
                return None

        except requests.exceptions.Timeout:
            print("⏰ 连接超时")
            time.sleep(5)
            continue
        except Exception as e:
            print(f"❌ 未知错误: {e}")
            return None

    print(f"😞 经过 {max_retries} 次尝试后仍然失败")
    return None

# 使用示例
if __name__ == "__main__":
    my_api_key = "sk-xxxxxxxx"  # 替换为你的API Key
    
    result = generate_video_stream_with_retry(
        prompt="在海上冲浪的狗",
        api_key=my_api_key,
        max_retries=5
    )
    
    if result:
        print("\n🎬 任务完成")
    else:
        print("\n❌ 任务失败")</code></pre>
            </div>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Python 图片生成教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/python图片生成.mp4" type="video/mp4">
                </video>
            </div>
            <div class="code-block" style="margin-bottom: 20px;">
                <div class="code-header"><span class="code-lang">PYTHON - 图片生成代码</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code>import requests
import json
import os
import re
from datetime import datetime
from pathlib import Path
from typing import Optional, Dict, Any, List
from urllib.parse import urlparse

class ImageGenerator:
    def __init__(self):
        self.api_key = "sk-xxxxxxxx"  # 替换为你的API密钥
        self.api_url = "https://nameyn.shop/v1/chat/completions"
        self.model = "nano-banana"
        self.headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json"
        }
        
    def generate_image(self, prompt: str, save_dir: str = "./generated_images") -> Dict[str, Any]:
        """生成图像并返回图片链接"""
        Path(save_dir).mkdir(parents=True, exist_ok=True)
        
        payload = {
            "model": self.model,
            "messages": [{"role": "user", "content": f"Generate an image based on this prompt: {prompt}"}],
            "max_tokens": 1000
        }
        
        print(f"正在生成图像...")
        print(f"提示词: {prompt}")
        
        try:
            response = requests.post(self.api_url, headers=self.headers, json=payload, timeout=600)
            
            if response.status_code == 200:
                return self._process_response(response, prompt, save_dir)
            else:
                print(f"API请求失败: {response.status_code}")
                return {"success": False, "error": f"HTTP {response.status_code}", "image_links": []}
                
        except requests.exceptions.RequestException as e:
            print(f"请求异常: {e}")
            return {"success": False, "error": str(e), "image_links": []}
    
    def _process_response(self, response, prompt, save_dir):
        result = {"success": False, "image_links": [], "content": "", "error": None}
        
        try:
            response_data = response.json()
            if "choices" in response_data and response_data["choices"]:
                content = response_data["choices"][0]["message"]["content"]
                result["content"] = content
                print(f"API响应内容: {content}")
                
                # 提取图片链接
                url_patterns = [
                    r'https?://[^\s]+?\.(?:jpg|jpeg|png|gif|bmp|webp)',
                    r'https?://[^\s]+?/image/[^\s]+',
                ]
                
                found_links = []
                for pattern in url_patterns:
                    matches = re.findall(pattern, content, re.IGNORECASE)
                    found_links.extend(matches)
                
                if found_links:
                    result["success"] = True
                    result["image_links"] = found_links
                    print(f"找到图片链接: {found_links}")
                else:
                    result["success"] = True
                    result["note"] = "API返回的是文本描述，未找到图片链接"
                    
        except Exception as e:
            result["error"] = f"处理响应失败: {e}"
        
        return result

def main():
    print("🎨 图像生成脚本")
    print("-" * 50)
    
    generator = ImageGenerator()
    prompt = "一只可爱的小狗在花园里玩耍"  # 修改这里的prompt内容
    
    result = generator.generate_image(prompt=prompt, save_dir="./test_images")
    
    print("\n" + "=" * 50)
    if result.get("success", False):
        print("✅ 请求成功!")
        if result.get("image_links"):
            print(f"\n📷 找到 {len(result['image_links'])} 个图片链接:")
            for i, link in enumerate(result["image_links"], 1):
                print(f"  {i}. {link}")
    else:
        print(f"❌ 生成失败: {result.get('error', '未知错误')}")

if __name__ == "__main__":
    main()</code></pre>
            </div>
            <div class="alert alert-info">
                <strong><span data-lang-zh>图片识别</span><span data-lang-en>Vision Support</span></strong>
                <span data-lang-zh>如果需要发送图片，请使用模型 <span>gemini-2.5-flash-image-preview</span> 并参考标准 OpenAI Vision 格式。</span>
            </div>
        </section>


        <section id="tutorial-cursor">
            <h2>Cursor</h2>
            <a href="https://cursor.com/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://cursor.com/（单击跳转下载！）</span>
            </a>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Cursor 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/cuosor.mp4" type="video/mp4">
                </video>
            </div>
            
            <h3 data-lang-zh>配置指南</h3>
            <h3 data-lang-en>Configuration Guide</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>打开设置</h4>
                    <h4 data-lang-en>Open Settings</h4>
                    <p>
                        <span data-lang-zh>点击右上角的齿轮图标 ⚙️，选择 <b>Models</b> 选项</span>
                        <span data-lang-en>Click the gear icon ⚙️ in the top right corner, select <b>Models</b></span>
                    </p>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>配置 API</h4>
                    <h4 data-lang-en>Configure API</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>OpenAI API Key</b>：输入您的 API 密钥（直接用默认令牌即可）</span>
                            <span data-lang-en><b>OpenAI API Key</b>: Enter your API key (use default token)</span></li>
                        <li><span data-lang-zh"><b>Override OpenAI Base URL</b>：勾选并输入 <code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en><b>Override OpenAI Base URL</b>: Check and enter <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>点击 <b>Verify</b> 验证配置</span>
                            <span data-lang-en>Click <b>Verify</b> to validate configuration</span></li>
                        <li><span data-lang-zh>输入模型名称：<code>gemini-2.5-pro</code></span>
                            <span data-lang-en>Enter model name: <code>gemini-2.5-pro</code></span></li>
                    </ul>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>⚠️ 重要提示</span><span data-lang-en>⚠️ Important Note</span></strong>
                <span data-lang-zh>Cursor 目前不支持 Agent 模式，只能使用 Chat 聊天对话模式。您可以在对话过程中让 AI 生成代码，然后手动应用到实际代码中。如果您是新手并且非常依赖 Agent 模式进行 Vibe Coding，建议使用 VS Code 的 <b>RooCode</b> 或 <b>Cline</b> 插件（支持 Agent 模式）作为替代方案。</span>
                <span data-lang-en>Cursor currently does not support Agent mode, only Chat mode is available. You can ask AI to generate code during conversation and manually apply it. If you're a beginner relying on Agent mode for Vibe Coding, consider using VS Code with <b>RooCode</b> or <b>Cline</b> plugins (which support Agent mode) as alternatives.</span>
            </div>
        </section>

        <section id="tutorial-cursor-cline">
            <h2 data-lang-zh>Cursor 配置 Cline 插件教程</h2>
            <h2 data-lang-en>Cursor Cline Plugin Setup</h2>
            
            <a href="https://cursor.com" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://cursor.com（单击跳转下载！）</span>
            </a>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en">Configuration Steps</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>点击扩展按钮搜索 <b>cline</b> 插件</span>
                            <span data-lang-en>Click extensions and search for <b>cline</b> plugin</span></li>
                        <li><span data-lang-zh>配置 URL: <code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en>Configure URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>密钥：nova 网站令牌管理下面密钥复制</span>
                            <span data-lang-en>API Key: Copy from Nova token management</span></li>
                        <li><span data-lang-zh>模型名称：<code>[次]gemini-3.1-pro-preview-thinking</code></span>
                            <span data-lang-en>Model: <code>[次]gemini-3.1-pro-preview-thinking</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cursor配置cline插件教程/46.png" alt="CursorCline配置1" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cursor配置cline插件教程/47.png" alt="CursorCline配置2" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/cursor配置cline插件教程/48.png" alt="CursorCline配置3" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后即可在 Cursor 中使用 Cline 插件。</span>
                <span data-lang-en>Use token from <b>auto</b> group. After configuration, you can use Cline plugin in Cursor.</span>
            </div>
        </section>

        <section id="tutorial-trae-cline">
            <h2 data-lang-zh>Trae 配置 Cline 插件教程</h2>
            <h2 data-lang-en>Trae Cline Plugin Setup</h2>
            
            <a href="https://www.trae.ai" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://www.trae.ai（单击跳转下载！）</span>
            </a>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en">Configuration Steps</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>点击扩展按钮搜索 <b>cline</b> 插件</span>
                            <span data-lang-en>Click extensions and search for <b>cline</b> plugin</span></li>
                        <li><span data-lang-zh>配置 URL: <code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en>Configure URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>密钥：nova 网站令牌管理下面密钥复制</span>
                            <span data-lang-en>API Key: Copy from Nova token management</span></li>
                        <li><span data-lang-zh>模型名称：<code>[次]gemini-3.1-pro-preview-thinking</code></span>
                            <span data-lang-en>Model: <code>[次]gemini-3.1-pro-preview-thinking</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置cline插件教程/49.png" alt="TraeCline配置1" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置cline插件教程/50.png" alt="TraeCline配置2" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置cline插件教程/51.png" alt="TraeCline配置3" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh">💡 提示</span><span data-lang-en">💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后即可在 Trae 中使用 Cline 插件。</span>
                <span data-lang-en">Use token from <b>auto</b> group. After configuration, you can use Cline plugin in Trae.</span>
            </div>
        </section>

        <section id="tutorial-trae">
            <h2 data-lang-zh>Trae 配置教程</h2>
            <h2 data-lang-en>Trae Setup</h2>

            <a href="https://www.trae.ai" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://www.trae.ai（单击跳转下载！）</span>
            </a>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 打开 Trae 后点击设置</h4>
                    <h4 data-lang-en>1. Open Trae and Click Settings</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/52.png" alt="打开设置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 点击"模型"</h4>
                    <h4 data-lang-en>2. Click "Models"</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/53.png" alt="点击模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 点击"添加模型"</h4>
                    <h4 data-lang-en>3. Click "Add Model"</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/54.png" alt="添加模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 填入 API 信息</h4>
                    <h4 data-lang-en>4. Fill in API Info</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>供应商</b>：OpenAI</span><span data-lang-en><b>Provider</b>: OpenAI</span></li>
                        <li><span data-lang-zh><b>模型</b>：自定义模型</span><span data-lang-en><b>Model</b>: Custom Model</span></li>
                        <li><span data-lang-zh><b>模型 ID</b>：<code>gemini-3.1-pro-preview</code>（可从模型广场挑选）</span><span data-lang-en><b>Model ID</b>: <code>gemini-3.1-pro-preview</code> (pick from marketplace)</span></li>
                        <li><span data-lang-zh><b>API 秘钥</b>：sk-秘钥（在令牌管理界面获取）</span><span data-lang-en><b>API Key</b>: sk-key from Token Management</span></li>
                        <li><span data-lang-zh><b>自定义请求地址</b>：<code>https://nameyn.shop/v1/chat/completions</code></span><span data-lang-en><b>Custom URL</b>: <code>https://nameyn.shop/v1/chat/completions</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/55.png" alt="填入API信息" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>5. 确认保存并开启"自定义"</h4>
                    <h4 data-lang-en>5. Save and Enable "Custom"</h4>
                    <p>
                        <span data-lang-zh>点击确认保存后打开"自定义"，然后开启刚刚配置的模型。</span>
                        <span data-lang-en>Click confirm to save, then enable the configured model under "Custom".</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/56.png" alt="保存并开启自定义" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>6. 点击"AI 侧边栏"</h4>
                    <h4 data-lang-en>6. Click "AI Sidebar"</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/57.png" alt="AI侧边栏" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>7. 切换至配置好的模型</h4>
                    <h4 data-lang-en>7. Switch to Configured Model</h4>
                    <p>
                        <span data-lang-zh>点击模型列表，切换到刚刚配置好的模型。</span>
                        <span data-lang-en>Click model list and switch to the configured model.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/58.png" alt="切换模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>8. 配置完成，开始使用</h4>
                    <h4 data-lang-en>8. Configuration Complete</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/trae配置教程/59.png" alt="开始使用" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong>💡</strong>
                <span data-lang-zh>请将"教程图片/trae配置教程/"目录下放入对应的截图（图片1.png ~ 图片8.png）。</span>
                <span data-lang-en>Please place screenshots in "教程图片/trae配置教程/" (图片1.png ~ 图片8.png).</span>
            </div>
        </section>

        <section id="tutorial-roocode">
            <h2 data-lang-zh>Roo Code 配置教程</h2>
            <h2 data-lang-en>Roo Code Setup</h2>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 安装完 Roo Code 后点击 "use without an account"</h4>
                    <h4 data-lang-en>1. After Install, Click "Use Without an Account"</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/roo code配置教程/60.png" alt="无账号使用" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 选择第三方供应商</h4>
                    <h4 data-lang-en>2. Select Third-Party Provider</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/roo code配置教程/61.png" alt="第三方供应商" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 填入 Nameyn 配置信息</h4>
                    <h4 data-lang-en>3. Fill in Nameyn Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API 供应商</b>：OpenAI Completions</span><span data-lang-en><b>API Provider</b>: OpenAI Completions</span></li>
                        <li><span data-lang-zh><b>OpenAI 基础 URL</b>：<code>https://nameyn.shop/v1</code></span><span data-lang-en><b>OpenAI Base URL</b>: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh><b>API 秘钥</b>：sk-站点令牌秘钥</span><span data-lang-en><b>API Key</b>: sk-your token</span></li>
                        <li><span data-lang-zh>模型输入完之后即可获取并选择使用</span><span data-lang-en>Models can be fetched and selected after input</span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/roo code配置教程/62.png" alt="填入配置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 配置完成即可使用</h4>
                    <h4 data-lang-en>4. Ready to Use After Configuration</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/roo code配置教程/63.png" alt="配置完成" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong>💡</strong>
                <span data-lang-zh>请将"教程图片/roo code配置教程/"目录下放入对应的截图（图片1.png ~ 图片4.png）。</span>
                <span data-lang-en>Please place screenshots in "教程图片/roo code配置教程/" (图片1.png ~ 图片4.png).</span>
            </div>
        </section>

        <section id="tutorial-qwenpaw">
            <h2 data-lang-zh>QwenPaw 配置教程</h2>
            <h2 data-lang-en>QwenPaw Setup</h2>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 进入 QwenPaw 页面后点击 Model 选项</h4>
                    <h4 data-lang-en>1. Open QwenPaw and Click Model</h4>
                    <p>
                        <span data-lang-zh>点击 model 选项进入供应商配置界面。</span>
                        <span data-lang-en>Click "model" to enter provider configuration.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/64.png" alt="Model页面" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 点击 Add Provider 添加供应商</h4>
                    <h4 data-lang-en>2. Click Add Provider</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/65.png" alt="添加供应商" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 填入 API 信息</h4>
                    <h4 data-lang-en>3. Fill in API Info</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>Provider ID</b>：openai</span></li>
                        <li><span data-lang-zh><b>Display Name</b>：Nameyn</span></li>
                        <li><span data-lang-zh><b>Default Base URL</b>：<code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh><b>Protocol</b>：OpenAI-completions (Chat Completions)</span></li>
                    </ul>
                    <p>
                        <span data-lang-zh>填入信息后点击 create 按钮。</span>
                        <span data-lang-en>Click "create" after filling in the info.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/66.png" alt="填入API信息" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 搜索并配置 Nameyn</h4>
                    <h4 data-lang-en>4. Search and Configure Nameyn</h4>
                    <p>
                        <span data-lang-zh>添加完成后在搜索框搜索 Nameyn，点击 Models 按钮添加模型。</span>
                        <span data-lang-en>After adding, search "Nameyn" and click Models to add models.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/67.png" alt="搜索Nameyn" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/68.png" alt="点击Models" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>5. 添加模型</h4>
                    <h4 data-lang-en>5. Add Model</h4>
                    <p>
                        <span data-lang-zh>点击 Add Model，输入 Model ID 和 Model Name（要与模型广场一致），例如 <code>qwen-3.5-plus</code>、<code>[次]gemini-3.1-pro-preview</code> 等。</span>
                        <span data-lang-en>Click Add Model, enter Model ID and Name (must match model marketplace), e.g., <code>qwen-3.5-plus</code>, <code>[次]gemini-3.1-pro-preview</code>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/69.png" alt="Add Model" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/70.png" alt="输入模型信息" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>6. 测试模型</h4>
                    <h4 data-lang-en>6. Test Model</h4>
                    <p>
                        <span data-lang-zh>添加之后可以点击测试按钮测试模型可用性，还可以测试多模态。</span>
                        <span data-lang-en>Click the test button to verify availability, including multimodal capability.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/71.png" alt="测试模型" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/72.png" alt="测试多模态" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>7. 回到对话页面使用</h4>
                    <h4 data-lang-en>7. Use in Chat</h4>
                    <p>
                        <span data-lang-zh>测试成功后点击 chat 按钮回到对话页面，在对话界面右上角选择 Nameyn 供应商和模型即可。</span>
                        <span data-lang-en>After testing, click chat to return. Select Nameyn provider and model in the top right.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/73.png" alt="回到chat" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/74.png" alt="选择模型" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/QwenPaw配置教程/75.png" alt="对话测试" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong>💡</strong>
                <span data-lang-zh>请将"教程图片/QwenPaw配置教程/"目录下放入对应的截图（图片1.png ~ 图片12.png）。</span>
                <span data-lang-en>Please place screenshots in "教程图片/QwenPaw配置教程/" (图片1.png ~ 图片12.png).</span>
            </div>
        </section>

        <section id="tutorial-workbuddy">
            <h2 data-lang-zh>WorkBuddy 配置教程</h2>
            <h2 data-lang-en>WorkBuddy Setup</h2>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 点击模型选择</h4>
                    <h4 data-lang-en>1. Click Model Selection</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/76.png" alt="模型选择" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 配置自定义模型</h4>
                    <h4 data-lang-en>2. Configure Custom Model</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/77.png" alt="自定义模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 选择自定义供应商</h4>
                    <h4 data-lang-en>3. Select Custom Provider</h4>
                    <p>
                        <span data-lang-zh>点击供应商类别，把供应商换成自定义供应商。</span>
                        <span data-lang-en>Click provider category and switch to custom provider.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/78.png" alt="自定义供应商" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 配置 API 信息</h4>
                    <h4 data-lang-en>4. Configure API Info</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API key</b>：令牌管理界面的令牌秘钥</span><span data-lang-en><b>API Key</b>: From Token Management</span></li>
                        <li><span data-lang-zh><b>接口地址</b>：<code>https://nameyn.shop/v1/chat/completions</code></span></li>
                        <li><span data-lang-zh><b>模型名称</b>：<code>qwen-3.5-plus</code></span></li>
                        <li><span data-lang-zh><b>输入</b>：1000000，<b>输出</b>：64k</span><span data-lang-en><b>Input</b>: 1000000, <b>Output</b>: 64k</span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/79.png" alt="API信息" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>5. 保存并重启软件</h4>
                    <h4 data-lang-en>5. Save and Restart</h4>
                    <p>
                        <span data-lang-zh>保存之后重启软件，然后在模型选择中选取自定义模型。</span>
                        <span data-lang-en>Save and restart the software, then select your custom model.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/80.png" alt="选取自定义模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>6. 配置完后即可使用</h4>
                    <h4 data-lang-en>6. Ready to Use</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/WorkBuddy配置教程/81.png" alt="使用" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong>💡</strong>
                <span data-lang-zh>请将"教程图片/WorkBuddy配置教程/"目录下放入对应的截图（图片1.png ~ 图片6.png）。</span>
                <span data-lang-en>Please place screenshots in "教程图片/WorkBuddy配置教程/" (图片1.png ~ 图片6.png).</span>
            </div>
        </section>

        <section id="tutorial-ccswitch-gpt">
            <h2 data-lang-zh>Claude Code 配置 GPT 模型 (CC Switch)</h2>
            <h2 data-lang-en>Claude Code Configuring GPT Model (CC Switch)</h2>

            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>📌</strong>
                <span data-lang-zh>使用 CC Switch 让 Claude Code 调用 GPT/OpenAI 系列模型，需要将 API 格式换成 OpenAI Chat Completions。</span>
                <span data-lang-en>To use Claude Code with GPT/OpenAI models via CC Switch, switch the API format to OpenAI Chat Completions.</span>
            </div>

            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 在 CC Switch 中配置</h4>
                    <h4 data-lang-en>1. Configure in CC Switch</h4>
                    <p>
                        <span data-lang-zh>打开 CC Switch，要把 <b>API 格式</b>换成 <b>OpenAI Chat Completions</b>。</span>
                        <span data-lang-en>Open CC Switch and switch <b>API Format</b> to <b>OpenAI Chat Completions</b>.</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API 格式</b>：OpenAI Chat Completions</span></li>
                        <li><span data-lang-zh><b>请求地址</b>：<code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh><b>API Key</b>：站点令牌秘钥</span></li>
                        <li><span data-lang-zh><b>模型</b>：例如 <code>gpt-5.4</code> 等 GPT 系列模型</span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/claude code配置gpt模型/82.png" alt="CC Switch 配置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 调用案例</h4>
                    <h4 data-lang-en>2. Usage Example</h4>
                    <p>
                        <span data-lang-zh>配置完成后，即可在 Claude Code 中正常调用 GPT/OpenAI 模型。</span>
                        <span data-lang-en>After configuration, you can call GPT/OpenAI models directly in Claude Code.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/claude code配置gpt模型/83.png" alt="调用案例" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong>💡</strong>
                <span data-lang-zh>请将"教程图片/claude code配置gpt模型/"目录下放入对应的截图。</span>
                <span data-lang-en>Please place screenshots in "教程图片/claude code配置gpt模型/".</span>
            </div>
        </section>

        <section id="tutorial-hermes-agent">
            <h2 data-lang-zh>Hermes Agent 配置指南</h2>
            <h2 data-lang-en>Hermes Agent Setup</h2>
            
            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>
                    <span data-lang-zh>📌 关于 Hermes Agent</span>
                    <span data-lang-en>📌 About Hermes Agent</span>
                </strong>
                <span data-lang-zh>Hermes Agent 是一款 AI 代理工具，通过修改 <code>.env</code> 配置文件即可接入 Nameyn 服务。</span>
                <span data-lang-en>Hermes Agent is an AI agent tool that can connect to Nameyn services by modifying the <code>.env</code> configuration file.</span>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <p>
                <span data-lang-zh>更改 <code>hermes-agent</code> 文件夹下的 <code>.env</code> 文件：</span>
                <span data-lang-en>Modify the <code>.env</code> file in the <code>hermes-agent</code> folder:</span>
            </p>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 找到 LLM PROVIDER (OpenRouter) 部分</h4>
                    <h4 data-lang-en>1. Find LLM PROVIDER (OpenRouter) Section</h4>
                    <p>
                        <span data-lang-zh>在 <code>.env</code> 文件中搜索找到 <b>LLM PROVIDER (OpenRouter)</b> 部分。</span>
                        <span data-lang-en>Search for the <b>LLM PROVIDER (OpenRouter)</b> section in the <code>.env</code> file.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/hermesAgent配置教程/84.png" alt="找到LLM PROVIDER" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 更改 OPENROUTER_BASE_URL 路径并添加 API Key</h4>
                    <h4 data-lang-en>2. Change OPENROUTER_BASE_URL and Add API Key</h4>
                    <p>
                        <span data-lang-zh>将 <code>OPENROUTER_BASE_URL</code> 改为以下地址，并且把前面的 <code>#</code> 号删掉（取消注释）：</span>
                        <span data-lang-en>Change <code>OPENROUTER_BASE_URL</code> to the following URL and remove the <code>#</code> prefix (uncomment):</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">.ENV</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>OPENROUTER_BASE_URL=https://nameyn.shop</code></pre>
                    </div>
                    <p>
                        <span data-lang-zh>然后在 <code>OPENROUTER_BASE_URL</code> 下方添加一条新指令：</span>
                        <span data-lang-en>Then add a new line below <code>OPENROUTER_BASE_URL</code>:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">.ENV</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>OPENROUTER_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxx</code></pre>
                    </div>
                    <p>
                        <span data-lang-zh>将 <code>sk-xxxxxxxxxxxxxxxxxxxxxxx</code> 替换为您从 Nameyn 网站获取的实际令牌秘钥。</span>
                        <span data-lang-en>Replace <code>sk-xxxxxxxxxxxxxxxxxxxxxxx</code> with your actual token from Nameyn.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/hermesAgent配置教程/85.png" alt="更改BASE_URL和添加API_KEY" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 更改 LLM_MODEL</h4>
                    <h4 data-lang-en>3. Change LLM_MODEL</h4>
                    <p>
                        <span data-lang-zh>找到 <code>LLM_MODEL</code> 配置项，把前面的 <code>#</code> 号删掉（取消注释），并将值改为：</span>
                        <span data-lang-en>Find the <code>LLM_MODEL</code> configuration, remove the <code>#</code> prefix (uncomment), and change the value to:</span>
                    </p>
                    <div class="code-block" style="margin: 10px 0;">
                        <div class="code-header"><span class="code-lang">.ENV</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>LLM_MODEL=anthropic/claude-opus-4.6</code></pre>
                    </div>
                </div>
            </div>
            
            <h3 data-lang-zh>完整配置示例</h3>
            <h3 data-lang-en>Complete Configuration Example</h3>
            
            <div class="code-block">
                <div class="code-header"><span class="code-lang">.ENV</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                <pre><code># LLM PROVIDER (OpenRouter)
OPENROUTER_BASE_URL=https://nameyn.shop
OPENROUTER_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxx

LLM_MODEL=anthropic/claude-opus-4.6</code></pre>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 模型命名规则提示</span><span data-lang-en>💡 Model Naming Convention</span></strong>
                <span data-lang-zh><code>anthropic/claude-opus-4.6</code> 是模型名称。不同厂商的模型有统一的前缀命名规则：</span>
                <span data-lang-en><code>anthropic/claude-opus-4.6</code> is the model name. Different providers follow a unified prefix naming convention:</span>
                <ul style="padding-left:20px; margin-top:10px;">
                    <li><span data-lang-zh><b>Claude 系列</b>：使用 <code>anthropic/</code> 开头，例如 <code>anthropic/claude-opus-4.6</code></span>
                        <span data-lang-en><b>Claude models</b>: Use <code>anthropic/</code> prefix, e.g., <code>anthropic/claude-opus-4.6</code></span></li>
                    <li><span data-lang-zh><b>Gemini 系列</b>：使用 <code>google/</code> 开头，例如 <code>google/gemini-2.5-pro</code></span>
                        <span data-lang-en><b>Gemini models</b>: Use <code>google/</code> prefix, e.g., <code>google/gemini-2.5-pro</code></span></li>
                    <li><span data-lang-zh><b>GPT 系列</b>：使用 <code>openai/</code> 开头，例如 <code>openai/gpt-4o</code></span>
                        <span data-lang-en><b>GPT models</b>: Use <code>openai/</code> prefix, e.g., <code>openai/gpt-4o</code></span></li>
                </ul>
            </div>
        </section>

        <section id="tutorial-astrbot">
            <h2 data-lang-zh>AstrBot 配置指南</h2>
            <h2 data-lang-en>AstrBot Setup</h2>
            
            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>
                    <span data-lang-zh>📌 关于 AstrBot</span>
                    <span data-lang-en>📌 About AstrBot</span>
                </strong>
                <span data-lang-zh>AstrBot 是一款 AI 机器人平台，支持通过 OpenAI Compatible API 接入 Nameyn 服务。</span>
                <span data-lang-en>AstrBot is an AI bot platform that supports connecting to Nameyn services through OpenAI Compatible API.</span>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 首次登录后点击配置 API</h4>
                    <h4 data-lang-en>1. Click Configure API After First Login</h4>
                    <p>
                        <span data-lang-zh>首次登录 AstrBot 之后，点击<b>配置 API</b>按钮。</span>
                        <span data-lang-en>After first login to AstrBot, click the <b>Configure API</b> button.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/86.png" alt="配置API" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 点击新增按钮</h4>
                    <h4 data-lang-en>2. Click Add Button</h4>
                    <p>
                        <span data-lang-zh>点击<b>新增</b>按钮来添加新的 API 配置。</span>
                        <span data-lang-en>Click the <b>Add</b> button to create a new API configuration.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/87.png" alt="点击新增" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 选择 OpenAI Compatible</h4>
                    <h4 data-lang-en>3. Select OpenAI Compatible</h4>
                    <p>
                        <span data-lang-zh>在 API 类型中选择 <b>OpenAI Compatible</b>。</span>
                        <span data-lang-en>Select <b>OpenAI Compatible</b> as the API type.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/88.png" alt="选择OpenAI Compatible" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>4. 填入配置信息并保存</h4>
                    <h4 data-lang-en>4. Fill in Configuration and Save</h4>
                    <p>
                        <span data-lang-zh>填入 ID、API Key、API Base URL 后点击<b>保存配置</b>，然后点击<b>获取模型</b>。</span>
                        <span data-lang-en>Enter ID, API Key, API Base URL, then click <b>Save Configuration</b> and <b>Get Models</b>.</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API Key</b>：填入您的 Nameyn 令牌秘钥</span>
                            <span data-lang-en><b>API Key</b>: Enter your Nameyn token</span></li>
                        <li><span data-lang-zh><b>API Base URL</b>：<code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en><b>API Base URL</b>: <code>https://nameyn.shop/v1</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/89.png" alt="填入配置信息" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>5. 获取模型列表</h4>
                    <h4 data-lang-en>5. Get Model List</h4>
                    <p>
                        <span data-lang-zh>保存配置后可以看到获取到站点所有的模型。</span>
                        <span data-lang-en>After saving, you can see all available models from the site.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/90.png" alt="获取模型列表" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>6. 搜索并选择模型</h4>
                    <h4 data-lang-en>6. Search and Select Model</h4>
                    <p>
                        <span data-lang-zh>可以通过搜索栏搜索模型，例如选用按次计费的 <code>gemini-3.1-pro-preview</code>。</span>
                        <span data-lang-en>You can search for models via the search bar, e.g., select pay-per-use <code>gemini-3.1-pro-preview</code>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/91.png" alt="搜索模型" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>7. 选用 Chat 模式</h4>
                    <h4 data-lang-en>7. Select Chat Mode</h4>
                    <p>
                        <span data-lang-zh>选用 <b>Chat</b> 聊天模式。</span>
                        <span data-lang-en>Select <b>Chat</b> mode.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/92.png" alt="选用Chat" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>8. 选择配置好的模型</h4>
                    <h4 data-lang-en>8. Select Configured Model</h4>
                    <p>
                        <span data-lang-zh>点击 <b>Model</b> 按钮，选用刚刚配置好的模型。</span>
                        <span data-lang-en>Click the <b>Model</b> button and select the model you just configured.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/93.png" alt="点击Model按钮" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>9. 开始使用</h4>
                    <h4 data-lang-en>9. Start Using</h4>
                    <p>
                        <span data-lang-zh>配置完成后，就可以通过对话来使用模型了。</span>
                        <span data-lang-en>After configuration, you can start using the model through conversations.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/94.png" alt="选择模型" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>10. 开始对话</h4>
                    <h4 data-lang-en>10. Start Chatting</h4>
                    <p>
                        <span data-lang-zh>配置完成后，就可以通过对话来使用模型了。</span>
                        <span data-lang-en>After configuration, you can start using the model through conversations.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/astrbot配置教程/95.png" alt="开始对话" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后即可在 AstrBot 中使用 Nameyn 的所有模型。</span>
                <span data-lang-en>Use token from <b>auto</b> group. After configuration, you can use all Nameyn models in AstrBot.</span>
            </div>
        </section>

        <section id="app-kelivo">
            <h2>Kelivo</h2>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 打开设置</h4>
                    <h4 data-lang-en>1. Open Settings</h4>
                    <p>
                        <span data-lang-zh>打开 Kelivo 后，点击左下角的<b>设置</b>按钮。</span>
                        <span data-lang-en>After opening Kelivo, click the <b>Settings</b> button in the bottom left corner.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/Kelivo配置教程/96.png" alt="打开设置" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>2. 选择供应商并填写 API 信息</h4>
                    <h4 data-lang-en>2. Select Provider and Fill in API Info</h4>
                    <p>
                        <span data-lang-zh>选用 <b>OpenAI</b> 供应商，然后填入相应 API 信息：</span>
                        <span data-lang-en>Select <b>OpenAI</b> provider, then fill in the API information:</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">API Key</span>
                        <span class="config-value">令牌管理中令牌的 sk 秘钥</span>
                    </div>
                    <div class="config-item">
                        <span class="config-label">API Base URL</span>
                        <span class="config-value">https://nameyn.shop/v1</span>
                        <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/Kelivo配置教程/97.png" alt="填写API信息" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>3. 完成配置</h4>
                    <h4 data-lang-en>3. Complete Configuration</h4>
                    <p>
                        <span data-lang-zh>配置后即可正常使用 Kelivo。</span>
                        <span data-lang-en>After configuration, you can use Kelivo normally.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/Kelivo配置教程/98.png" alt="完成配置" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>API Key 请在站内<b>令牌管理</b>页面获取 sk 开头的秘钥。请使用 <b>auto</b> 分组的令牌。</span>
                <span data-lang-en>Get your API Key (starts with sk) from the <b>Token Management</b> page. Use token from <b>auto</b> group.</span>
            </div>
        </section>

        <section id="tutorial-opencowork">
            <h2 data-lang-zh>OpenCowork 配置教程</h2>
            <h2 data-lang-en>OpenCowork Setup</h2>

            <div class="alert alert-info" style="margin-bottom: 20px;">
                <strong>
                    <span data-lang-zh>📌 关于 OpenCowork</span>
                    <span data-lang-en>📌 About OpenCowork</span>
                </strong>
                <span data-lang-zh>OpenCowork 是一款支持自定义 API 的 AI 协作工具，可通过简单配置接入 Nameyn 服务。</span>
                <span data-lang-en>OpenCowork is an AI collaboration tool that supports custom APIs, easily configurable to use Nameyn services.</span>
            </div>

            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 点击设置按钮</h4>
                    <h4 data-lang-en>1. Click Settings Button</h4>
                    <p>
                        <span data-lang-zh>在 OpenCowork 界面点击设置按钮（左下角齿轮）。</span>
                        <span data-lang-en>Click the settings button (gear icon in the bottom left) on the OpenCowork interface.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/99.png" alt="点击设置按钮" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 进入 API 设置</h4>
                    <h4 data-lang-en>2. Enter API Settings</h4>
                    <p>
                        <span data-lang-zh>进入设置页面之后选择 <b>API 设置</b>。</span>
                        <span data-lang-en>After entering the settings page, select <b>API Settings</b>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/100.png" alt="进入API设置" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/101.png" alt="API设置界面" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 配置 API 信息</h4>
                    <h4 data-lang-en>3. Configure API Info</h4>
                    <p>
                        <span data-lang-zh>进入 API 设置界面之后填写以下信息：</span>
                        <span data-lang-en>After entering the API settings interface, fill in the following information:</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>API 供应商</b>：选择"更多模型"</span>
                            <span data-lang-en><b>API Provider</b>: Select "More Models"</span></li>
                        <li><span data-lang-zh><b>API 秘钥</b>：站点令牌秘钥 <code>sk-xxxx</code>（在站点令牌管理界面获取）</span>
                            <span data-lang-en><b>API Key</b>: Site token <code>sk-xxxx</code> (from Token Management)</span></li>
                        <li><span data-lang-zh><b>协议</b>：OpenAI</span>
                            <span data-lang-en><b>Protocol</b>: OpenAI</span></li>
                        <li><span data-lang-zh><b>基础 URL</b>：<code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en><b>Base URL</b>: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh><b>模型</b>：<code>[次]gemini-3.1-pro-preview</code></span>
                            <span data-lang-en><b>Model</b>: <code>[次]gemini-3.1-pro-preview</code></span></li>
                    </ul>
                    <p style="margin-top:10px;">
                        <span data-lang-zh>填完信息后点击<b>保存设置</b>。</span>
                        <span data-lang-en>After filling in the information, click <b>Save Settings</b>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/102.png" alt="API设置1" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/103.png" alt="API设置2" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/104.png" alt="保存设置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 返回对话页面使用</h4>
                    <h4 data-lang-en>4. Return to Chat and Use</h4>
                    <p>
                        <span data-lang-zh>设置完后返回对话页面即可正常使用。</span>
                        <span data-lang-en>After setting up, return to the chat page to start using.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/OpenCowork配置教程/105.png" alt="开始使用" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。请将对应的截图放入"教程图片/OpenCowork配置教程/"目录下（图片1.png ~ 图片7.png）。</span>
                <span data-lang-en>Use token from <b>auto</b> group. Please place screenshots in "教程图片/OpenCowork配置教程/" (图片1.png ~ 图片7.png).</span>
            </div>
        </section>

        <section id="tutorial-zotero">
            <h2 data-lang-zh>Zotero 翻译文献教程</h2>
            <h2 data-lang-en>Zotero Translation Tutorial</h2>

            <a href="https://www.zotero.org/download/" target="_blank" class="clickable-box">
                <span class="box-label">下载</span>
                <span class="box-value">https://www.zotero.org/download/（Zotero 官方下载，单击跳转！）</span>
            </a>

            <a href="https://zotero-chinese.com/plugins/" target="_blank" class="clickable-box">
                <span class="box-label">插件</span>
                <span class="box-value">Zotero 插件商店 | Zotero 中文社区（Awesome GPT 插件，单击跳转！）</span>
            </a>

            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 安装 Zotero 与 Awesome GPT 插件</h4>
                    <h4 data-lang-en>1. Install Zotero and Awesome GPT Plugin</h4>
                    <p>
                        <span data-lang-zh>访问 <a href="https://www.zotero.org/download/" target="_blank" style="color:var(--brand-primary)">Zotero 官网</a> 下载并安装 Zotero，然后在 <a href="https://zotero-chinese.com/plugins/" target="_blank" style="color:var(--brand-primary)">Zotero 中文社区插件商店</a> 中下载 <b>Awesome GPT</b> 插件并安装。</span>
                        <span data-lang-en>Download and install Zotero, then install the <b>Awesome GPT</b> plugin from the Zotero Chinese community plugin store.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/106.png" alt="Zotero教程图片1" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/107.png" alt="Zotero教程图片2" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 配置 Awesome GPT 插件</h4>
                    <h4 data-lang-en>2. Configure Awesome GPT Plugin</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh><b>配置 URL</b>：<code>https://nameyn.shop</code></span>
                            <span data-lang-en><b>Config URL</b>: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh><b>密钥</b>：从 Nova 网站令牌管理下方复制 sk- 开头的密钥</span>
                            <span data-lang-en><b>API Key</b>: Copy sk- key from Nova Token Management</span></li>
                        <li><span data-lang-zh><b>模型名称</b>：<code>[次]gemini-3.1-pro-preview-thinking</code></span>
                            <span data-lang-en><b>Model</b>: <code>[次]gemini-3.1-pro-preview-thinking</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/108.png" alt="Zotero教程图片3" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/109.png" alt="Zotero教程图片4" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/110.png" alt="Zotero教程图片5" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/zotero翻译文献教程/111.png" alt="Zotero教程图片6" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。配置完成后即可在 Zotero 中通过 Awesome GPT 插件实现文献翻译功能。</span>
                <span data-lang-en>Use token from <b>auto</b> group. After configuration, you can translate literature through the Awesome GPT plugin in Zotero.</span>
            </div>
        </section>

        <section id="chatbox">
            <h2>Chatbox</h2>
            <a href="https://chatboxai.app" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://chatboxai.app（单击跳转！）</span>
            </a>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Chatbox 电脑端配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/chat box.mp4" type="video/mp4">
                </video>
            </div>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Chatbox 手机端配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/chatbox手机版.mp4" type="video/mp4">
                </video>
            </div>
            <div class="step-list" style="margin-top:20px;">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>设置 -> 模型提供方 -> <b>手动添加配置 (Custom)</b></span></li>
                        <li><span data-lang-zh>API 模式：<b>OpenAI API 兼容</b></span></li>
                        <li><span data-lang-zh>API Host: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>模型 (Model): <code>[次]gemini-2.5-pro</code></span></li>
                        <li><span data-lang-zh>注意：勾选所有模型能力，开启"改善网络兼容性"。</span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/112.png" alt="image5.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/113.png" alt="image6.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/114.png" alt="image7.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/115.jpg" alt="image8.jpg" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/116.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/117.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Chatbox设置教程/118.png" alt="image4.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="cherry">
            <h2>Cherry Studio</h2>
            <a href="https://www.cherry-ai.com/download" target="_blank" class="clickable-box">
                <span class="box-label">Download</span>
                <span class="box-value">https://www.cherry-ai.com/download（单击跳转下载！）</span>
            </a>
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 Cherry Studio 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/cherry studio.mp4" type="video/mp4">
                </video>
            </div>
            
            <div class="step-list" style="margin-top:20px;">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>访问 <a href="https://www.cherry-ai.com/download" target="_blank" style="color:var(--brand-primary)">Cherry Studio 官网</a> 下载并安装客户端</span>
                            <span data-lang-en>Visit <a href="https://www.cherry-ai.com/download" target="_blank" style="color:var(--brand-primary)">Cherry Studio official website</a> to download and install</span></li>
                        <li><span data-lang-zh>打开 Cherry Studio 后选择<b>其他供应商</b></span>
                            <span data-lang-en>After opening Cherry Studio, select <b>Other Provider</b></span></li>
                        <li><span data-lang-zh>点击下方<b>添加</b>按钮，新建供应商配置</span>
                            <span data-lang-en>Click <b>Add</b> button to create a new provider</span></li>
                        <li><span data-lang-zh>填入<b>供应商名称</b>（如：Nameyn）和<b>类型</b>后点击<b>确定</b></span>
                            <span data-lang-en>Fill in <b>Provider Name</b> (e.g., Nameyn) and <b>Type</b>, click <b>OK</b></span></li>
                        <li><span data-lang-zh>API 地址: <code>https://nameyn.shop</code></span>
                            <span data-lang-en>API URL: <code>https://nameyn.shop</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span>
                            <span data-lang-en>API Key: Enter your token</span></li>
                        <li><span data-lang-zh>点击<b>获取模型列表</b>获得所有可用模型</span>
                            <span data-lang-en>Click <b>Get Model List</b> to get all available models</span></li>
                        <li><span data-lang-zh>点击<b>确定</b>后选用<b>默认模型</b>、<b>快速模型</b>和<b>翻译模型</b></span>
                            <span data-lang-en>Click <b>OK</b> then select <b>Default Model</b>, <b>Quick Model</b>, and <b>Translation Model</b></span></li>
                        <li><span data-lang-zh>注意：Cherry Studio 不需要在末尾加 <code>/v1</code>。</span>
                            <span data-lang-en>Note: Cherry Studio does not need <code>/v1</code> at the end.</span></li>
                    </ul>
                
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/119.png" alt="图片1.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/120.png" alt="图片2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/121.png" alt="图片3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/122.png" alt="图片4.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/123.png" alt="图片5.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/124.png" alt="图片6.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/125.png" alt="图片7.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/ChrryStudio设置教程/126.png" alt="图片8.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="cherry-image">
            <h2 data-lang-zh>Cherry Studio 绘图配置教程</h2>
            <h2 data-lang-en>Cherry Studio Image Generation Setup</h2>

            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>

            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 点击左上角加号</h4>
                    <h4 data-lang-en>1. Click the Plus Icon in Top Left</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/127.png" alt="点击加号" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>2. 选择绘画</h4>
                    <h4 data-lang-en>2. Select Drawing</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/128.png" alt="选择绘画" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>3. 供应商选择 New API</h4>
                    <h4 data-lang-en>3. Select New API as Provider</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/129.png" alt="选择供应商" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>4. 点击设置按钮配置模型</h4>
                    <h4 data-lang-en>4. Click Settings to Configure Model</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/130.png" alt="点击设置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>5. 配置 API 秘钥 + API 地址，获取模型</h4>
                    <h4 data-lang-en>5. Configure API Key + URL, Get Models</h4>
                    <p>
                        <span data-lang-zh>填入 API 秘钥和 API 地址后，点击<b>获取模型</b>，然后搜索 <code>gpt-image-2</code>。</span>
                        <span data-lang-en>Enter API Key and URL, click <b>Get Models</b>, then search for <code>gpt-image-2</code>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/131.png" alt="配置API并获取模型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>6. 点击模型旁边的小齿轮设置按钮</h4>
                    <h4 data-lang-en>6. Click the Gear Icon Next to Model</h4>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/132.png" alt="点击齿轮设置" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>7. 终点类型换成"图像生成(OpenAI)"并保存</h4>
                    <h4 data-lang-en>7. Change Endpoint Type to "Image Generation (OpenAI)" and Save</h4>
                    <p>
                        <span data-lang-zh>把终点类型换成<b>图像生成(OpenAI)</b>，然后点击<b>保存</b>。</span>
                        <span data-lang-en>Switch endpoint type to <b>Image Generation (OpenAI)</b>, then click <b>Save</b>.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/133.png" alt="更改终点类型" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>8. 返回绘图界面即可使用</h4>
                    <h4 data-lang-en>8. Return to Drawing Interface to Use</h4>
                    <p>
                        <span data-lang-zh>返回绘图界面之后即可调用使用。</span>
                        <span data-lang-en>Return to the drawing interface and start using it.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/cherry studio配置绘图/134.png" alt="开始使用" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh>请使用 <b>auto</b> 分组的令牌。模型选择 <code>gpt-image-2</code>，终点类型务必设置为<b>图像生成(OpenAI)</b>。</span>
                <span data-lang-en>Use token from <b>auto</b> group. Select <code>gpt-image-2</code> model and make sure endpoint type is set to <b>Image Generation (OpenAI)</b>.</span>
            </div>
        </section>

        <section id="tutorial-sillytavern">
            <h2 data-lang-zh>酒馆 (SillyTavern)</h2>
            <h2 data-lang-en>SillyTavern</h2>
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>配置步骤</h4>
                    <h4 data-lang-en>Configuration</h4>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>API 来源: <b>Custom (OpenAI Compatible)</b></span></li>
                        <li><span data-lang-zh>API Endpoint: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API Key: 填入您的令牌</span></li>
                        <li><span data-lang-zh>Model: <code>[次]gemini-2.5-pro</code></span></li>
                    </ul>
                    <div class="alert alert-info" style="margin-top:10px;">
                        <span data-lang-zh>提示：如果遇到 "socket hang up" 或 "No candidates returned"，请尝试更换预设或检查网络。</span>
                        <span data-lang-en>Tip: Check network or preset if errors occur.</span>
                    
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/酒馆SillyTavern的配置及使用/135.jpg" alt="image2.jpg" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/酒馆SillyTavern的配置及使用/136.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/酒馆SillyTavern的配置及使用/137.png" alt="image4.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/酒馆SillyTavern的配置及使用/138.png" alt="image5.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="tutorial-android-sillytavern">
            <h2 data-lang-zh>安卓 SillyTavern 酒馆安装教程</h2>
            <h2 data-lang-en>Android SillyTavern Installation</h2>
            
            <div style="border: 3px solid #1a1c20; background: white; padding: 15px; border-radius: 12px; margin: 10px 0;">
                <p style="font-weight: 700; color: #1a1c20; margin-bottom: 10px;">🎬 安卓 SillyTavern 配置教程</p>
                <video controls style="width: 100%; border-radius: 8px;">
                    <source src="视频/an sillytavern.mp4" type="video/mp4">
                </video>
            </div>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>安装 Termux</h4>
                    <h4 data-lang-en>Install Termux</h4>
                    <p>
                        <span data-lang-zh>从 F-Droid 或 GitHub 下载并安装 Termux。</span>
                        <span data-lang-en">Download and install Termux from F-Droid or GitHub.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/139.png" alt="安装Termux" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/140.png" alt="Termux界面" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>更新软件包</h4>
                    <h4 data-lang-en>Update Packages</h4>
                    <p>
                        <span data-lang-zh>在 Termux 中更新软件包：</span>
                        <span data-lang-en>Update packages in Termux:</span>
                    </p>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>pkg update && pkg upgrade</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/141.png" alt="更新软件包" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/142.png" alt="更新完成" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh>安装 Git</h4>
                    <h4 data-lang-en>Install Git</h4>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>pkg install git</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/143.png" alt="安装Git" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>克隆酒馆仓库</h4>
                    <h4 data-lang-en>Clone SillyTavern</h4>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>git clone https://github.com/SillyTavern/SillyTavern -b release</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/144.png" alt="克隆酒馆" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>进入目录并安装 Node.js</h4>
                    <h4 data-lang-en>Enter Directory and Install Node.js</h4>
                    <p>
                        <span data-lang-zh>进入 SillyTavern 目录并安装 Node.js：</span>
                        <span data-lang-en>Enter SillyTavern directory and install Node.js:</span>
                    </p>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>cd SillyTavern</code></pre>
                    </div>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>pkg install nodejs</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/145.png" alt="进入目录" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/146.png" alt="安装nodejs" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>安装依赖</h4>
                    <h4 data-lang-en>Install Dependencies</h4>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>npm install</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/147.png" alt="npm install" loading="lazy">
                        </div>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>运行酒馆</h4>
                    <h4 data-lang-en>Run SillyTavern</h4>
                    <p>
                        <span data-lang-zh>如果已在 SillyTavern 文件夹下，直接运行启动脚本：</span>
                        <span data-lang-en>If already in SillyTavern folder, run the start script:</span>
                    </p>
                    <div class="code-block">
                        <div class="code-header"><span class="code-lang">BASH</span><button class="copy-btn" onclick="copyCode(this)">COPY</button></div>
                        <pre><code>cd SillyTavern
./start.sh</code></pre>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/148.png" alt="运行酒馆" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/149.png" alt="酒馆启动" loading="lazy">
                        </div>
                    </div>
                    <div class="alert alert-info" style="margin-top:10px;">
                        <span data-lang-zh>如果无法跳转或乱码，请在浏览器中打开：<code>http://127.0.0.1:8000</code></span>
                        <span data-lang-en>If redirect fails, open in browser: <code>http://127.0.0.1:8000</code></span>
                    </div>
                </div>

                <div class="step-card">
                    <h4 data-lang-zh>配置 API</h4>
                    <h4 data-lang-en>Configure API</h4>
                    <p>
                        <span data-lang-zh>在 SillyTavern 中配置 Nameyn：</span>
                        <span data-lang-en>Configure Nameyn in SillyTavern:</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh>点击设置，聊天补全来源选择 <b>自定义（兼容 OpenAI 协议）</b></span></li>
                        <li><span data-lang-zh>自定义端点 URL: <code>https://nameyn.shop/v1</code></span></li>
                        <li><span data-lang-zh>API 密钥: 填入您的令牌</span></li>
                        <li><span data-lang-zh>模型名称: <code>[次]gemini-2.5-pro</code></span></li>
                        <li><span data-lang-zh>点击"获取可用模型"验证配置</span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/150.png" alt="配置步骤1" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/151.png" alt="配置步骤2" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/152.png" alt="配置步骤3" loading="lazy">
                        </div>
                        <div class="tutorial-image">
                            <img src="教程图片/安卓SillyTavern/153.png" alt="配置步骤4" loading="lazy">
                        </div>
                    </div>
                    <div class="alert alert-info" style="margin-top:10px;">
                        <strong><span data-lang-zh>⚠️ 注意</span><span data-lang-en>⚠️ Note</span></strong>
                        <span data-lang-zh>检查配置时不要出现末尾空格！</span>
                        <span data-lang-en>Make sure there are no trailing spaces in the configuration!</span>
                    </div>
                </div>
            </div>
        </section>

        <section id="app-lovemo">
            <h2>Lovemo</h2>
            <a href="https://www.lovemo.app/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">lovemo.app（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/lovemo使用指南/154.png" alt="image2.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-omate">
            <h2>Omate</h2>
            <a href="https://omate.org/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">omate.org（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/omate使用指南/155.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/omate使用指南/156.png" alt="image3.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-rikkahub">
            <h2>Rikkahub</h2>
            <a href="https://docs.rikka-ai.com/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">rikka-ai.com（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/Rikkahub使用指南/157.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Rikkahub使用指南/158.png" alt="image3.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-tavo">
            <h2>Tavo</h2>
            <a href="https://tavoai.dev/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">tavoai.dev（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/Tavo 使用指南/159.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Tavo 使用指南/160.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/Tavo 使用指南/161.png" alt="image4.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-lifekline">
            <h2>LifeKline</h2>
            <a href="https://lifekline.0xsakura.me/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">lifekline（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-3-pro-preview</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem; color:var(--brand-primary);">
                    注意：此应用使用 <b>gemini-3-pro-preview</b> 模型。
                </p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/人生K线    lifekline 配置教程文档/162.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/人生K线    lifekline 配置教程文档/163.png" alt="image3.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-promptopt">
            <h2 data-lang-zh>提示词优化器配置教程</h2>
            <h2 data-lang-en">Prompt Optimizer Configuration</h2>
            
            <a href="https://prompt.always200.com/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">https://prompt.always200.com/（单击跳转！）</span>
            </a>
            
            <div class="alert alert-info" style="margin: 20px 0;">
                <strong>
                    <span data-lang-zh">📌 关于提示词优化器</span>
                    <span data-lang-en">📌 About Prompt Optimizer</span>
                </strong>
                <span data-lang-zh">提示词优化器是一个强大的工具，可以帮助你优化和改进 AI 提示词，提升对话质量。</span>
                <span data-lang-en">Prompt Optimizer is a powerful tool that helps you optimize and improve AI prompts for better conversation quality.</span>
            </div>
            
            <h3 data-lang-zh>配置步骤</h3>
            <h3 data-lang-en>Configuration Steps</h3>
            
            <div class="step-list">
                <div class="step-card">
                    <h4 data-lang-zh>1. 点击网页右上角的模型管理</h4>
                    <h4 data-lang-en">1. Click Model Management in Top Right</h4>
                    <p>
                        <span data-lang-zh">打开提示词优化器网站后，点击页面右上角的"模型管理"按钮。</span>
                        <span data-lang-en">After opening the Prompt Optimizer website, click the "Model Management" button in the top right corner.</span>
                    </p>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/提示词优化器配置文档/164.png" alt="点击模型管理" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">2. 配置 API 信息</h4>
                    <h4 data-lang-en">2. Configure API Information</h4>
                    <p>
                        <span data-lang-zh">在模型管理页面中，按照以下信息进行配置：</span>
                        <span data-lang-en">In the Model Management page, configure with the following information:</span>
                    </p>
                    <ul style="padding-left:20px; color:var(--text-secondary); margin-top:10px;">
                        <li><span data-lang-zh"><b>提供商</b>：选择 <code>openai</code></span>
                            <span data-lang-en><b>Provider</b>: Select <code>openai</code></span></li>
                        <li><span data-lang-zh><b>API 密钥</b>：填入您从 Nameyn 网站获取的令牌</span>
                            <span data-lang-en><b>API Key</b>: Enter your token from Nameyn</span></li>
                        <li><span data-lang-zh><b>API 地址</b>：<code>https://nameyn.shop/v1</code></span>
                            <span data-lang-en><b>API URL</b>: <code>https://nameyn.shop/v1</code></span></li>
                    </ul>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/提示词优化器配置文档/165.png" alt="配置API信息" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">3. 选择模型</h4>
                    <h4 data-lang-en">3. Select Model</h4>
                    <p>
                        <span data-lang-zh>在模型选择中，选择 <code>[次]gemini-2.5-pro</code> 模型。</span>
                        <span data-lang-en>In model selection, choose <code>[次]gemini-2.5-pro</code> model.</span>
                    </p>
                    <div class="config-item" style="margin-top:10px;">
                        <span class="config-label">Model</span>
                        <span class="config-value">[次]gemini-2.5-pro</span>
                        <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                    </div>
                    <div class="tutorial-images" style="margin-top:15px;">
                        <div class="tutorial-image">
                            <img src="教程图片/提示词优化器配置文档/166.png" alt="选择模型" loading="lazy">
                        </div>
                    </div>
                </div>
                
                <div class="step-card">
                    <h4 data-lang-zh">4. 开始使用</h4>
                    <h4 data-lang-en">4. Start Using</h4>
                    <p>
                        <span data-lang-zh>配置完成后，选择刚才配置的模型进行对话即可。提示词优化器将帮助你优化和改进你的 AI 提示词。</span>
                        <span data-lang-en">After configuration, select the configured model to start chatting. The Prompt Optimizer will help you optimize and improve your AI prompts.</span>
                    </p>
                </div>
            </div>
            
            <div class="alert alert-info" style="margin-top:20px;">
                <strong><span data-lang-zh>💡 提示</span><span data-lang-en>💡 Tip</span></strong>
                <span data-lang-zh">请使用 <b>auto</b> 分组的令牌。配置完成后，你可以使用提示词优化器来改进你的 AI 对话提示词，获得更好的对话效果。</span>
                <span data-lang-en">Use token from <b>auto</b> group. After configuration, you can use the Prompt Optimizer to improve your AI conversation prompts for better results.</span>
            </div>
</section>

        <section id="app-xiaoyi">
            <h2>小懿 (XiaoYi)</h2>
            <a href="https://xiaoyi.ink/" target="_blank" class="clickable-box">
                <span class="box-label">Website</span>
                <span class="box-value">xiaoyi.ink（单击跳转！）</span>
            </a>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/167.png" alt="image1.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/168.png" alt="image2.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/169.png" alt="image3.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/170.png" alt="image4.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/171.png" alt="image5.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/172.png" alt="image6.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/173.png" alt="image7.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/174.png" alt="image8.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/175.png" alt="image9.png" loading="lazy">
                </div>
                <div class="tutorial-image">
                    <img src="教程图片/小懿使用指南/176.png" alt="image10.png" loading="lazy">
                </div>
            </div>
</section>

        <section id="app-smallphone">
            <h2>小手机 (SmallPhone)</h2>
            <div class="card">
                <div class="config-item">
                    <span class="config-label">API URL</span>
                    <span class="config-value">https://nameyn.shop/v1</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <div class="config-item">
                    <span class="config-label">Model</span>
                    <span class="config-value">[次]gemini-2.5-pro</span>
                    <button class="config-copy" onclick="copyConfig(this)">Copy</button>
                </div>
                <p style="margin-top:10px; font-size:0.9rem;">API 来源: <b>Custom (OpenAI Compatible)</b></p>
            
            <div class="tutorial-images">
                <div class="tutorial-image">
                    <img src="教程图片/小手机使用指南/177.png" alt="image2.png" loading="lazy">
                </div>
            </div>
</section>

        <footer>
            <div class="footer-links">
                <a href="#">Home</a>
                <a href="#">Tokens</a>
                <a href="#">Pricing</a>
            </div>
            <p style="margin-top:15px;">© 2026 Nameyn</p>
        </footer>

    </div>

    <script>
        // 语言切换逻辑
        function detectLanguage() {
            const saved = localStorage.getItem('nova-lang');
            if (saved) return saved;
            return navigator.language.startsWith('zh') ? 'zh' : 'en';
        }

        function switchLanguage(lang) {
            document.body.classList.remove('lang-zh', 'lang-en');
            document.body.classList.add('lang-' + lang);
            localStorage.setItem('nova-lang', lang);
            
            document.getElementById('langZh').classList.toggle('active', lang === 'zh');
            document.getElementById('langEn').classList.toggle('active', lang === 'en');
        }

        // 侧边栏折叠逻辑
        function toggleGroup(header) {
            const group = header.parentElement;
            group.classList.toggle('active');
        }

        // 选项卡逻辑
        function openTab(evt, tabName) {
            const container = evt.currentTarget.closest('section');
            container.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            container.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            
            container.querySelector('#' + tabName).classList.add('active');
            evt.currentTarget.classList.add('active');
        }

        // 复制功能
        function copyCode(btn) {
            const code = btn.closest('.code-block').querySelector('code').textContent;
            navigator.clipboard.writeText(code).then(() => {
                const originalText = btn.textContent;
                btn.textContent = 'OK';
                setTimeout(() => btn.textContent = originalText, 2000);
            });
        }
        
        function copyConfig(btn) {
            const val = btn.closest('.config-item').querySelector('.config-value').textContent;
            navigator.clipboard.writeText(val).then(() => {
                const originalText = btn.textContent;
                btn.textContent = 'OK';
                setTimeout(() => btn.textContent = originalText, 2000);
            });
        }

        // 移动端侧边栏
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
            document.querySelector('.sidebar-overlay').classList.toggle('open');
        }

        // 导航高亮
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('.nav-link');

        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (pageYOffset >= sectionTop - 150) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                const href = link.getAttribute('href');
                if (href === '#' + current) {
                    link.classList.add('active');
                }
            });
        });

        document.addEventListener('DOMContentLoaded', () => {
            switchLanguage(detectLanguage());
            
            // 移动端默认打开导航栏（不限制屏幕宽度）
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            if (isMobile) {
                const sidebar = document.getElementById('sidebar');
                const overlay = document.querySelector('.sidebar-overlay');
                sidebar.classList.add('open');
                overlay.classList.add('open');
            }
        });

        // 智能域名切换 - 自动重试多个域名
        const DOMAINS = [
            'https://nameyn.shop',
            'https://twob.pp.ua',
            'https://nameyn.shop'
        ];

        async function checkDomain(domain, timeout = 3000) {
            try {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), timeout);
                
                const response = await fetch(domain + '/favicon.ico', {
                    method: 'HEAD',
                    mode: 'no-cors',
                    signal: controller.signal
                });
                clearTimeout(timeoutId);
                return true;
            } catch (e) {
                return false;
            }
        }

        async function smartOpen(path) {
            // 显示加载提示
            const loadingMsg = document.createElement('div');
            loadingMsg.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px 40px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.15);z-index:9999;font-weight:600;';
            loadingMsg.innerHTML = '<span data-lang-zh>正在连接服务器...</span><span data-lang-en>Connecting...</span>';
            document.body.appendChild(loadingMsg);
            
            // 依次尝试每个域名
            for (let i = 0; i < DOMAINS.length; i++) {
                const domain = DOMAINS[i];
                loadingMsg.innerHTML = `<span data-lang-zh>尝试连接 ${domain.replace('https://','')}...</span><span data-lang-en>Trying ${domain.replace('https://','')}...</span>`;
                
                const isAvailable = await checkDomain(domain);
                if (isAvailable) {
                    document.body.removeChild(loadingMsg);
                    window.open(domain + path, '_blank');
                    return;
                }
            }
            
            // 所有域名都失败，显示提示
            document.body.removeChild(loadingMsg);
            alert('如是网址进不去，请在QQ群：753915287里询问管理员');
        }

        // 视频播放功能
        function playVideo(videoSrc) {
            const modal = document.getElementById('videoModal');
            const video = document.getElementById('modalVideo');
            
            // 设置视频源
            video.querySelector('source').src = videoSrc;
            video.load();
            
            // 显示模态框
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
            
            // 自动播放
            video.play().catch(e => console.log('自动播放被阻止'));
        }

        function closeVideoModal(event) {
            // 如果点击的是模态框背景或关闭按钮
            if (!event || event.target === document.getElementById('videoModal') || event.target.classList.contains('video-modal-close')) {
                const modal = document.getElementById('videoModal');
                const video = document.getElementById('modalVideo');
                
                // 暂停视频
                video.pause();
                video.currentTime = 0;
                
                // 隐藏模态框
                modal.classList.remove('active');
                document.body.style.overflow = '';
            }
        }

        // ESC 键关闭视频
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeVideoModal();
            }
        });

        // 图片查看模态框功能
        let currentZoom = 1;
        
        function openImageModal(imgSrc) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modalImg.src = imgSrc;
            currentZoom = 1;
            modalImg.style.transform = 'scale(1)';
            document.getElementById('zoomLevel').textContent = '100%';
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        function closeImageModal(event) {
            if (!event || event.target === document.getElementById('imageModalBody') || event.target === document.getElementById('imageModal')) {
                document.getElementById('imageModal').classList.remove('active');
                document.body.style.overflow = '';
            }
        }
        
        function zoomImage(delta) {
            currentZoom = Math.max(0.2, Math.min(5, currentZoom + delta));
            document.getElementById('modalImage').style.transform = 'scale(' + currentZoom + ')';
            document.getElementById('zoomLevel').textContent = Math.round(currentZoom * 100) + '%';
        }
        
        function resetZoom() {
            currentZoom = 1;
            document.getElementById('modalImage').style.transform = 'scale(1)';
            document.getElementById('zoomLevel').textContent = '100%';
        }
        
        // 为所有教程图片绑定点击事件
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.tutorial-image img').forEach(function(img) {
                img.style.cursor = 'pointer';
                img.addEventListener('click', function() {
                    openImageModal(this.src);
                });
            });
        });

        // 鼠标滚轮缩放
        document.addEventListener('DOMContentLoaded', function() {
            var modalBody = document.getElementById('imageModalBody');
            if (modalBody) {
                modalBody.addEventListener('wheel', function(e) {
                    if (document.getElementById('imageModal').classList.contains('active')) {
                        e.preventDefault();
                        zoomImage(e.deltaY > 0 ? -0.1 : 0.1);
                    }
                }, { passive: false });
            }
        });

        // ESC 键也关闭图片模态框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && document.getElementById('imageModal').classList.contains('active')) {
                document.getElementById('imageModal').classList.remove('active');
                document.body.style.overflow = '';
            }
        });

        // 文件下载功能
        function downloadFile(filePath, fileName) {
            fetch(filePath)
                .then(response => response.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                })
                .catch(err => {
                    console.error('下载失败:', err);
                    // 如果 fetch 失败，尝试直接打开链接
                    window.open(filePath, '_blank');
                });
        }
    </script>
</body>
</html>
