${item.alternative ? `
` : ''}
스크리닝 위해 목록
`;
elements.scheduleCardsContainer.appendChild(card);
});
window.toggleCardAccordion = function(index) {
const content = document.getElementById(`accordion-${index}`);
const arrow = document.getElementById(`arrow-${index}`);
if (content && content.classList.contains('expanded')) {
content.classList.remove('expanded');
if (arrow) arrow.classList.remove('rotate-icon');
} else if (content) {
content.classList.add('expanded');
if (arrow) arrow.classList.add('rotate-icon');
}
};
if (elements.scheduleResultView) elements.scheduleResultView.classList.remove('hidden');
}
function initDietVerification() {
if (elements.btnPrevMeal) {
elements.btnPrevMeal.addEventListener('click', () => {
if (state.selectedMealIndex > 0) {
state.selectedMealIndex--;
renderDietVerification();
}
});
}
if (elements.btnNextMeal) {
elements.btnNextMeal.addEventListener('click', () => {
if (state.selectedMealIndex < defaultDiets.length - 1) {
state.selectedMealIndex++;
renderDietVerification();
}
});
}
if (elements.applyAlternativeDietBtn) {
elements.applyAlternativeDietBtn.addEventListener('click', () => {
const diet = defaultDiets[state.selectedMealIndex];
showNotification(`[${diet.alternative.from}]이 [${diet.alternative.to}]으로 안전 대체 적용되었습니다.`);
diet.menu = diet.menu.map(food => {
if (food.name === diet.alternative.from) {
return { name: diet.alternative.to, weight: food.weight };
}
return food;
});
diet.results = diet.results.filter(r => r.type !== '알레르기');
renderDietVerification();
renderDashboard();
});
}
if (elements.vlmOptNormal) {
elements.vlmOptNormal.addEventListener('click', () => {
selectVlmImage('normal');
});
}
if (elements.vlmOptAlternative) {
elements.vlmOptAlternative.addEventListener('click', () => {
selectVlmImage('alternative');
});
}
if (elements.triggerFileBtn) {
elements.triggerFileBtn.addEventListener('click', () => {
if (elements.vlmFileInput) elements.vlmFileInput.click();
});
}
if (elements.vlmFileInput) {
elements.vlmFileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
state.customVlmImageSrc = event.target.result;
selectVlmImage('custom');
};
reader.readAsDataURL(file);
});
}
if (elements.runVlmBtn) {
elements.runVlmBtn.addEventListener('click', async () => {
if (!state.selectedVlmImage) return;
if (elements.vlmEmptyResult) elements.vlmEmptyResult.classList.add('hidden');
if (elements.vlmResultPanel) elements.vlmResultPanel.classList.add('hidden');
if (elements.scannerLaser) {
elements.scannerLaser.style.display = 'block';
elements.scannerLaser.style.animation = 'scan 2s infinite linear';
}
elements.runVlmBtn.disabled = true;
try {
if (apiConfig.key && (state.selectedVlmImage === 'custom' || state.customVlmImageSrc)) {
const visionResult = await callOpenRouterVLM();
setTimeout(() => {
if (elements.scannerLaser) elements.scannerLaser.style.display = 'none';
elements.runVlmBtn.disabled = false;
renderVlmResult(visionResult);
}, 2000);
} else {
setTimeout(() => {
if (elements.scannerLaser) elements.scannerLaser.style.display = 'none';
elements.runVlmBtn.disabled = false;
renderVlmSimulationResult();
}, 2000);
}
} catch (error) {
console.error(error);
showNotification("VLM 모델 응답 지연으로 로컬 인공지능 검증 결과를 표시합니다.");
setTimeout(() => {
if (elements.scannerLaser) elements.scannerLaser.style.display = 'none';
elements.runVlmBtn.disabled = false;
renderVlmSimulationResult();
}, 1000);
}
});
}
}
function selectVlmImage(type) {
state.selectedVlmImage = type;
if (elements.vlmPlaceholder) elements.vlmPlaceholder.classList.add('hidden');
if (elements.vlmTargetImage) elements.vlmTargetImage.classList.remove('hidden');
if (elements.vlmOptNormal) elements.vlmOptNormal.classList.remove('selected');
if (elements.vlmOptAlternative) elements.vlmOptAlternative.classList.remove('selected');
if (type === 'normal') {
if (elements.vlmTargetImage) elements.vlmTargetImage.src = 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400&q=80';
if (elements.vlmOptNormal) elements.vlmOptNormal.classList.add('selected');
} else if (type === 'alternative') {
if (elements.vlmTargetImage) elements.vlmTargetImage.src = 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400&q=80';
if (elements.vlmOptAlternative) elements.vlmOptAlternative.classList.add('selected');
} else if (type === 'custom' && state.customVlmImageSrc) {
if (elements.vlmTargetImage) elements.vlmTargetImage.src = state.customVlmImageSrc;
}
if (elements.runVlmBtn) elements.runVlmBtn.disabled = false;
}
function resetVlmUI() {
state.selectedVlmImage = null;
state.customVlmImageSrc = null;
state.vlmApproved = false;
if (elements.vlmPlaceholder) elements.vlmPlaceholder.classList.remove('hidden');
if (elements.vlmTargetImage) {
elements.vlmTargetImage.classList.add('hidden');
elements.vlmTargetImage.src = '';
}
if (elements.vlmOptNormal) elements.vlmOptNormal.classList.remove('selected');
if (elements.vlmOptAlternative) elements.vlmOptAlternative.classList.remove('selected');
if (elements.vlmEmptyResult) elements.vlmEmptyResult.classList.remove('hidden');
if (elements.vlmResultPanel) elements.vlmResultPanel.classList.add('hidden');
if (elements.runVlmBtn) elements.runVlmBtn.disabled = true;
if (elements.vlmFileInput) elements.vlmFileInput.value = '';
}
async function callOpenRouterVLM() {
const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
const list = state.members[listKey];
const memberProfileStr = list.map(m => `- 이름: ${m.name}, 유형: ${m.type}, 원인물질/질환: ${m.detail}`).join('\n');
const prompt = `
이 식판 사진에서 닭고기, 달걀, 우유 성분이 포함되어 오배식이 일어났는지 감지하고, 아래 JSON 객체 형태 하나만 출력하세요.
[제한 인원 정보]
${memberProfileStr}
JSON Format:
{
"verdict": "PASS" 또는 "REJECT",
"allergen": "발견된 유발 요인 요약 또는 없음",
"portion": "정량 비율 평가",
"reason": "AI Vision 이미지 판별 결과 설명"
}
`;
const base64Image = state.customVlmImageSrc.split(',')[1];
for (let model of freeVLMModels) {
try {
console.log(`Connecting OpenRouter VLM: ${model}`);
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
method: "POST",
headers: {
"Authorization": `Bearer ${apiConfig.key}`,
"Content-Type": "application/json",
"HTTP-Referer": "https://huggingface.co/spaces/HwangJinwook/caretable",
"X-Title": "CareTable Client"
},
body: JSON.stringify({
model: model,
messages: [
{
role: "user",
content: [
{ type: "text", text: prompt },
{ type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }
]
}
]
})
});
if (!res.ok) continue;
const data = await res.json();
let text = data.choices[0].message.content.trim();
if (text.includes("```json")) {
text = text.split("```json")[1].split("```")[0].trim();
} else if (text.includes("```")) {
text = text.split("```")[1].split("```")[0].trim();
}
return JSON.parse(text);
} catch (e) {
console.warn(`Vision Model ${model} failure: `, e);
}
}
throw new Error("VLM Failure");
}
function renderVlmSimulationResult() {
if (elements.vlmResultPanel) elements.vlmResultPanel.classList.remove('hidden');
if (elements.vlmEmptyResult) elements.vlmEmptyResult.classList.add('hidden');
if (state.selectedVlmImage === 'normal') {
if (elements.vlmVerdictBox) elements.vlmVerdictBox.className = 'vlm-verdict-box rejected';
if (elements.verdictIconContainer) elements.verdictIconContainer.innerHTML = '등록된 케어 대상자가 없습니다.
';
return;
}
list.forEach(member => {
const item = document.createElement('div');
const activeClass = state.selectedUserId === member.id ? 'active' : '';
const badgeClass = member.type === '알레르기' ? 'allergy' : member.type === '질환식' ? 'disease' : 'general';
item.className = `user-picker-item ${activeClass}`;
item.innerHTML = `
${state.currentMode === 'family' ? '가정 내 자율 보건 위생 관리와 오배식 방지 수칙에 따른 안심 식단 급지 기록입니다.' : '보건복지부 급식안전 기준 및 한국사회보장정보원 시설 평가 가이드라인에 근거한 당일 배식 현황 보고서입니다.'}
| 작성일자 |
배식 식단 내용 (대체식 포함) |
집중 케어 대상자 |
VLM AI 분석 적합성 |
인증 확인 |
${filteredLogs.length > 0 ? filteredLogs.map(log => `
| ${log.date} |
${log.menu} |
${log.target} |
${log.vlmStatus} (99%) |
확인완료 |
`).join('') : `
| 배식 이력이 존재하지 않습니다. 식단 검증 탭에서 실시간 VLM 검증을 최종 완료해 주십시오. |
`}
`;
} else if (activeSubTab === '알레르기대장') {
if (elements.reportDocTitle) elements.reportDocTitle.textContent = state.currentMode === 'family' ? '가족 알레르기 및 만성질환 DB' : '집중 케어 대상자 대장';
contentHtml = `
${state.currentMode === 'family' ? '가족들의 건강 및 식품 과민반응 정보를 지속 보관하여 오인 사고를 예방하는 집중 예방 DB입니다.' : '사회복지시설 평가지표 24번 취약계층 식품 유해인자 맞춤 안전 관리대장 양식입니다.'}
| 순번 |
수혜자명 |
제한 식품 및 요인 |
핵심 대체 조리 지침 |
검증 방식 |
${state.members[currentFilterKey].filter(m => m.type !== '일반').map((m, idx) => {
return `
| ${idx + 1} |
${m.name} |
${m.detail} |
${m.instruction} |
VLM 비전 매칭 |
`;
}).join('')}
`;
} else if (activeSubTab === '대체식대장') {
if (elements.reportDocTitle) elements.reportDocTitle.textContent = '대 체 급 식 제 공 대 장';
contentHtml = `
특이 체질이나 의학적 위험 인자로 인해 일반 식사를 섭취하지 못하는 대상자에게 안전 대체식을 처방하고 지급을 검증한 이력서입니다.
| 제공일시 |
대상자 |
제한 원본 메뉴 |
실제 대체 급식 내용 |
대체 사유 |
VLM 스캔 완료시각 |
${filteredLogs.length > 0 ? filteredLogs.map(log => `
| ${log.date} |
${log.target.split(' ')[0]} |
${log.target.includes('아동') || log.target.includes('아들') ? '계란말이, 요구르트' : '쌀밥, 요플레'} |
${log.alternative.split('➔')[1] || log.alternative} |
${log.target.includes('아동') || log.target.includes('아들') ? '식품 알레르기 격리' : '혈당/유당 만성질환 케어'} |
${log.timestamp} |
`).join('') : `
| 대체 급식 배식 이력이 존재하지 않습니다. 식단 검증 탭에서 배식을 최종 확정해 주십시오. |
`}
`;
}
if (elements.reportDocContent) elements.reportDocContent.innerHTML = contentHtml;
const savedHours = (filteredLogs.length * 4.2).toFixed(1);
const co2Saved = (filteredLogs.length * 12.0).toFixed(1);
if (elements.esgCo2) elements.esgCo2.textContent = `${co2Saved}kg`;
if (elements.esgTime) elements.esgTime.textContent = `${savedHours}시간`;
if (elements.esgLocal) elements.esgLocal.textContent = state.currentMode === 'family' ? '75%' : (state.currentFacility === 'child' ? '45%' : '60%');
}
function initApiConfig() {
if (elements.apiKeyInput) elements.apiKeyInput.value = apiConfig.key;
if (elements.apiModelSelect) elements.apiModelSelect.value = apiConfig.model;
if (elements.toggleKeyVisibilityBtn) {
elements.toggleKeyVisibilityBtn.addEventListener('click', () => {
if (!elements.apiKeyInput) return;
const type = elements.apiKeyInput.type === 'password' ? 'text' : 'password';
elements.apiKeyInput.type = type;
elements.toggleKeyVisibilityBtn.innerHTML = type === 'password' ? '