script.js

// AI工具数据
// 注意：请按照以下步骤下载官方logo并替换本地图片：
// 1. 访问每个工具的官方网站
// 2. 找到并下载官方logo（建议使用PNG或SVG格式）
// 3. 将图片重命名为以下文件名并保存到images目录
// 4. 刷新网站查看效果
const aiTools = [
    {
        id: 1,
        name: "ChatGPT",
        description: "OpenAI开发的强大对话助手，能够进行自然语言交互、回答问题、生成内容等。",
        category: "chat",
        url: "https://chat.openai.com",
        image: "images/chatgpt.png"
    },
    {
        id: 2,
        name: "MidJourney",
        description: "强大的AI图像生成工具，能够根据文本描述创建高质量的图像和艺术作品。",
        category: "image",
        url: "https://www.midjourney.com",
        image: "images/midjourney.png"
    },
    {
        id: 3,
        name: "DALL·E 3",
        description: "OpenAI开发的图像生成模型，能够根据详细的文本描述创建逼真的图像。",
        category: "image",
        url: "https://labs.openai.com",
        image: "images/dalle3.png"
    },
    {
        id: 4,
        name: "RunwayML",
        description: "AI视频编辑工具，提供文本到视频、视频修复、风格转换等功能。",
        category: "video",
        url: "https://runwayml.com",
        image: "images/runwayml.png"
    },
    {
        id: 5,
        name: "Descript",
        description: "AI音频和视频编辑工具，提供自动转录、语音克隆、智能编辑等功能。",
        category: "audio",
        url: "https://www.descript.com",
        image: "images/descript.png"
    },
    {
        id: 6,
        name: "GitHub Copilot",
        description: "AI代码助手，能够根据上下文生成代码、提供代码建议和自动补全。",
        category: "code",
        url: "https://github.com/features/copilot",
        image: "images/github-copilot.png"
    },
    {
        id: 7,
        name: "Claude",
        description: "Anthropic开发的AI助手，注重安全性和准确性，能够处理复杂任务，包括代码生成和分析。",
        category: "code",
        url: "https://www.anthropic.com/claude",
        image: "images/claude.png"
    },
    {
        id: 8,
        name: "ElevenLabs",
        description: "AI语音合成工具，能够生成自然、逼真的语音和语音克隆。",
        category: "audio",
        url: "https://elevenlabs.io",
        image: "images/elevenlabs.png"
    },
    {
        id: 9,
        name: "Notion AI",
        description: "Notion集成的AI助手，能够帮助生成内容、总结文档、回答问题等。",
        category: "productivity",
        url: "https://www.notion.so/ai",
        image: "images/notion-ai.png"
    },
    {
        id: 10,
        name: "Figma AI",
        description: "Figma集成的AI设计助手，能够帮助生成设计、提供设计建议等。",
        category: "productivity",
        url: "https://www.figma.com/ai",
        image: "images/figma-ai.png"
    },
    {
        id: 11,
        name: "Codeium",
        description: "AI代码编辑器助手，提供实时代码补全、智能建议和代码搜索功能。",
        category: "code",
        url: "https://codeium.com",
        image: "images/codeium.png"
    },
    {
        id: 12,
        name: "Synthesia",
        description: "AI视频生成工具，能够创建AI驱动的视频内容，包括虚拟主播。",
        category: "video",
        url: "https://www.synthesia.io",
        image: "images/synthesia.png"
    },
    // 中国AI工具
    {
        id: 13,
        name: "百度文心一言",
        description: "百度开发的生成式AI对话助手，支持多轮对话、内容创作、知识问答等功能。",
        category: "chat",
        url: "https://yiyan.baidu.com",
        image: "images/ernie.png"
    },
    {
        id: 14,
        name: "阿里通义千问",
        description: "阿里巴巴开发的智能对话助手，能够理解和生成自然语言，支持多领域知识问答。",
        category: "chat",
        url: "https://tongyi.aliyun.com",
        image: "images/tongyi.png"
    },
    {
        id: 15,
        name: "腾讯混元助手",
        description: "腾讯开发的AI对话助手，集成了腾讯生态优势，支持多模态交互和智能问答。",
        category: "chat",
        url: "https://hunyuan.tencent.com",
        image: "images/hunyuan.png"
    },
    {
        id: 16,
        name: "字节跳动豆包",
        description: "字节跳动开发的智能对话助手，支持多轮对话、内容创作、知识问答等多种功能。",
        category: "chat",
        url: "https://www.doubao.com",
        image: "images/doubao.png"
    },
    {
        id: 17,
        name: "华为盘古大模型",
        description: "华为开发的通用人工智能大模型，支持自然语言处理、计算机视觉等多种任务。",
        category: "chat",
        url: "https://www.huaweicloud.com/product/pangu.html",
        image: "images/pangu.png"
    },
    {
        id: 18,
        name: "讯飞星火认知大模型",
        description: "科大讯飞开发的认知智能大模型，支持多轮对话、知识推理、内容创作等功能。",
        category: "chat",
        url: "https://xinghuo.xfyun.cn",
        image: "images/xinghuo.png"
    }
];

// DOM元素
const toolsContainer = document.getElementById('tools-container');
const categoryItems = document.querySelectorAll('.category-item');
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');

// 当前筛选状态
let currentCategory = 'all';
let currentSearch = '';

// 初始化页面
function init() {
    renderTools();
    setupEventListeners();
}

// 设置事件监听器
function setupEventListeners() {
    // 分类筛选
    categoryItems.forEach(item => {
        item.addEventListener('click', () => {
            // 更新选中状态
            categoryItems.forEach(i => i.classList.remove('active'));
            item.classList.add('active');
            
            // 更新当前分类
            currentCategory = item.dataset.category;
            renderTools();
        });
    });
    
    // 搜索功能
    searchBtn.addEventListener('click', () => {
        currentSearch = searchInput.value.trim().toLowerCase();
        renderTools();
    });
    
    // 回车键搜索
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            searchBtn.click();
        }
    });
}

// 筛选工具
function filterTools() {
    return aiTools.filter(tool => {
        const matchesCategory = currentCategory === 'all' || tool.category === currentCategory;
        const matchesSearch = currentSearch === '' || 
            tool.name.toLowerCase().includes(currentSearch) || 
            tool.description.toLowerCase().includes(currentSearch);
        return matchesCategory && matchesSearch;
    });
}

// 渲染工具卡片
function renderTools() {
    const filteredTools = filterTools();
    
    if (filteredTools.length === 0) {
        toolsContainer.innerHTML = `
            <div class="empty-state">
                <h3>没有找到匹配的AI工具</h3>
                <p>请尝试调整搜索关键词或分类</p>
            </div>
        `;
        return;
    }
    
    toolsContainer.innerHTML = filteredTools.map(tool => `
        <div class="tool-card">
            <img src="${tool.image}" alt="${tool.name}">
            <div class="tool-info">
                <h3 class="tool-name">${tool.name}</h3>
                <p class="tool-description">${tool.description}</p>
                <span class="tool-category">${getCategoryName(tool.category)}</span>
                <a href="${tool.url}" target="_blank" class="tool-link">访问工具</a>
            </div>
        </div>
    `).join('');
}

// 获取分类名称
function getCategoryName(category) {
    const categoryMap = {
        'chat': '聊天助手',
        'image': '图像生成',
        'video': '视频处理',
        'audio': '音频处理',
        'code': '代码工具',
        'productivity': '生产力'
    };
    return categoryMap[category] || category;
}

// 启动应用
init();