concept_handler.js

// 处理概念卡片点击事件
function handleConceptClick(conceptId) {
    // 将点击的概念ID传递给Gradio
    if (typeof gradioApp !== 'undefined') {
        const app = gradioApp();
        const hiddenInput = app.querySelector('#concept-selection');
        if (hiddenInput) {
            hiddenInput.value = conceptId;
            // 触发change事件
            const event = new Event('change');
            hiddenInput.dispatchEvent(event);
        }
    }
}

// 添加点击事件监听器到所有概念卡片
function addConceptCardListeners() {
    const conceptCards = document.querySelectorAll('.concept-card');
    conceptCards.forEach(card => {
        card.addEventListener('click', function() {
            const conceptId = this.getAttribute('data-concept-id');
            if (conceptId) {
                handleConceptClick(conceptId);
                // 添加视觉反馈
                highlightSelectedCard(this);
            }
        });
    });
}

// 高亮选中的卡片
function highlightSelectedCard(selectedCard) {
    // 移除所有卡片的高亮
    document.querySelectorAll('.concept-card').forEach(card => {
        card.classList.remove('selected-card');
    });
    // 添加高亮到选中的卡片
    selectedCard.classList.add('selected-card');
}

// 在知识图谱节点上添加悬停效果
function addGraphNodeHoverEffects() {
    const nodes = document.querySelectorAll('#concept-graph svg .node');
    nodes.forEach(node => {
        node.addEventListener('mouseenter', function() {
            this.classList.add('node-hover');
        });
        node.addEventListener('mouseleave', function() {
            this.classList.remove('node-hover');
        });
    });
}

// 增强图像显示
function enhanceImageDisplay() {
    const graphContainer = document.querySelector('#concept-graph');
    if (graphContainer) {
        const img = graphContainer.querySelector('img');
        if (img) {
            // 确保图像加载完成后应用样式
            img.onload = function() {
                this.style.maxWidth = '100%';
                this.style.height = 'auto';
                this.style.borderRadius = '8px';
                this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
            };
        }
    }
}

// 在DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 知识图谱交互
    const conceptGraph = document.querySelector('#concept-graph');
    if (conceptGraph) {
        const img = conceptGraph.querySelector('img');
        if (img) {
            enhanceImageDisplay();
        }
        
        const nodes = conceptGraph.querySelectorAll('g.node');
        nodes.forEach(node => {
            node.style.cursor = 'pointer';
            node.addEventListener('click', function() {
                const conceptId = this.getAttribute('data-concept-id');
                if (conceptId && conceptId !== 'main') {
                    handleConceptClick(conceptId);
                }
            });
        });
        // 添加悬停效果
        addGraphNodeHoverEffects();
    }
    
    // 概念卡片交互
    addConceptCardListeners();
    
    // 添加CSS样式
    addCustomStyles();
});

// 添加自定义样式
function addCustomStyles() {
    const style = document.createElement('style');
    style.textContent = `
        /* 通用样式设置，支持中文 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        
        /* 概念卡片样式 */
        .concept-card {
            transition: all 0.3s ease;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .concept-card:hover {
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        .selected-card {
            border-color: #2196F3;
            background-color: rgba(33, 150, 243, 0.05);
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
        }
        .concept-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .concept-desc {
            font-size: 0.9em;
            color: #555;
        }
        
        /* 图表节点样式 */
        .node-hover {
            opacity: 0.8;
            transform: scale(1.05);
        }
        
        /* 知识图谱容器样式 */
        #concept-graph img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    `;
    document.head.appendChild(style);
}

// Gradio元素变化时重新添加监听器
// 这是必要的，因为Gradio可能会动态替换DOM元素
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // 检查是否有新的概念卡片添加
            for (let i = 0; i < mutation.addedNodes.length; i++) {
                const node = mutation.addedNodes[i];
                if (node.classList && node.classList.contains('concept-card')) {
                    addConceptCardListeners();
                    break;
                }
            }
            
            // 检查是否有新的知识图谱添加
            const conceptGraph = document.querySelector('#concept-graph');
            if (conceptGraph) {
                addGraphNodeHoverEffects();
                enhanceImageDisplay();
            }
        }
    });
});

// 开始观察DOM变化
window.addEventListener('load', function() {
    const targetNode = document.getElementById('concept-cards');
    if (targetNode) {
        observer.observe(targetNode, { childList: true, subtree: true });
    }
    
    // 也观察知识图谱容器
    const graphContainer = document.getElementById('concept-graph');
    if (graphContainer) {
        observer.observe(graphContainer, { childList: true, subtree: true });
    }
});