recommend/static/js/analysis.js

// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ܽű<DCBD>

let currentUserId = null;

// DOMԪ<4D><D4AA>
const loginSection = document.getElementById('loginSection');
const requestSection = document.getElementById('requestSection');
const analysisSection = document.getElementById('analysisSection');
const messageArea = document.getElementById('messageArea');

const loginBtn = document.getElementById('loginBtn');
const userIdInput = document.getElementById('userId');
const analyzeBtn = document.getElementById('analyzeBtn');
const mealDataTextarea = document.getElementById('mealData');
const analysisResult = document.getElementById('analysisResult');

// <20><>ʾ<EFBFBD><CABE>Ϣ
function showMessage(message, type = 'info') {
    messageArea.textContent = message;
    messageArea.className = `message-area ${type}`;
    setTimeout(() => {
        messageArea.className = 'message-area';
        messageArea.style.display = 'none';
    }, 3000);
}

// <20>û<EFBFBD><C3BB><EFBFBD>¼
loginBtn.addEventListener('click', async () => {
    const userId = userIdInput.value.trim();
    
    if (!userId) {
        showMessage('<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>û<EFBFBD>ID', 'error');
        return;
    }
    
    loginBtn.disabled = true;
    loginBtn.textContent = '<27><>¼<EFBFBD><C2BC>...';
    
    try {
        const response = await fetch('/api/user/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify({
                user_id: userId
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentUserId = userId;
            loginSection.style.display = 'none';
            requestSection.style.display = 'block';
            showMessage(`<EFBFBD><EFBFBD>ӭ<EFBFBD><EFBFBD>${data.name || userId}<EFBFBD><EFBFBD>`, 'success');
        } else {
            showMessage(data.message || '<27><>¼ʧ<C2BC><CAA7>', 'error');
        }
    } catch (error) {
        console.error('<27><>¼ʧ<C2BC><CAA7>:', error);
        showMessage('<27><>¼ʧ<C2BC>ܣ<EFBFBD><DCA3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'error');
    } finally {
        loginBtn.disabled = false;
        loginBtn.textContent = '<27><>¼';
    }
});

// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>
analyzeBtn.addEventListener('click', async () => {
    const mealDataText = mealDataTextarea.value.trim();
    
    if (!mealDataText) {
        showMessage('<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʳ<EFBFBD><CAB3>Ϣ', 'error');
        return;
    }
    
    analyzeBtn.disabled = true;
    analyzeBtn.textContent = '<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>...';
    
    try {
        const response = await fetch('/api/analysis/nutrition', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify({
                user_id: currentUserId,
                meal_data: {
                    text: mealDataText
                }
            })
        });
        
        const data = await response.json();
        
        if (data.success && data.analysis) {
            displayAnalysis(data.analysis);
            analysisSection.style.display = 'block';
            showMessage('<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɣ<EFBFBD>', 'success');
        } else {
            showMessage(data.message || '<27><><EFBFBD><EFBFBD>ʧ<EFBFBD><CAA7>', 'error');
        }
    } catch (error) {
        console.error('<27><><EFBFBD><EFBFBD>ʧ<EFBFBD><CAA7>:', error);
        showMessage('<27><><EFBFBD><EFBFBD>ʧ<EFBFBD>ܣ<EFBFBD><DCA3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'error');
    } finally {
        analyzeBtn.disabled = false;
        analyzeBtn.textContent = '<27><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>';
    }
});

// <20><>ʾ<EFBFBD><CABE><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
function displayAnalysis(analysis) {
    analysisResult.innerHTML = '';
    
    if (typeof analysis === 'string') {
        // <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ַ<EFBFBD><D6B7><EFBFBD><EFBFBD><EFBFBD>ֱ<EFBFBD><D6B1><EFBFBD><EFBFBD>ʾ
        analysisResult.innerHTML = `<div class="analysis-section"><p>${analysis.replace(/\n/g, '<br>')}</p></div>`;
    } else if (analysis.analysis) {
        // <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>analysis<69>ֶ<EFBFBD>
        analysisResult.innerHTML = `<div class="analysis-section"><h4><3E><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></h4><p>${analysis.analysis.replace(/\n/g, '<br>')}</p></div>`;
    } else {
        // <20><><EFBFBD><EFBFBD><EFBFBD>Ƕ<EFBFBD><C7B6>󣬸<EFBFBD>ʽ<EFBFBD><CABD><EFBFBD><EFBFBD>ʾ
        for (const [key, value] of Object.entries(analysis)) {
            const section = document.createElement('div');
            section.className = 'analysis-section';
            section.innerHTML = `<h4>${key}</h4><p>${typeof value === 'string' ? value.replace(/\n/g, '<br>') : JSON.stringify(value, null, 2)}</p>`;
            analysisResult.appendChild(section);
        }
    }
}