Spaces:

joung
/

joung-joung

Running

App Files Files Community

joung-joung / index.html

joung

Add 2 files

addf17e verified 7 months ago

raw

history blame contribute delete

18.2 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>건강 상담 챗봇 - MediCare AI</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}
	.typing-indicator span {
	animation: pulse 1.5s infinite ease-in-out;
	}
	.typing-indicator span:nth-child(2) {
	animation-delay: 0.2s;
	}
	.typing-indicator span:nth-child(3) {
	animation-delay: 0.4s;
	}
	.chat-container {
	height: calc(100vh - 180px);
	}
	@media (max-width: 640px) {
	.chat-container {
	height: calc(100vh - 160px);
	}
	}
	.message-animation {
	animation: fadeIn 0.3s ease-out;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<div class="container mx-auto max-w-4xl px-4 py-6">
	<!-- Header -->
	<header class="flex items-center justify-between mb-6">
	<div class="flex items-center space-x-3">
	<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
	<i class="fas fa-user-md text-blue-600 text-xl"></i>
	</div>
	<div>
	<h1 class="text-2xl font-bold text-gray-800">MediCare AI</h1>
	<p class="text-sm text-gray-500">AI 건강 상담 챗봇</p>
	</div>
	</div>
	<div class="flex space-x-2">
	<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600">
	<i class="fas fa-history"></i>
	</button>
	<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600">
	<i class="fas fa-cog"></i>
	</button>
	</div>
	</header>

	<!-- Chat Container -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden mb-4 chat-container" id="chatContainer">
	<!-- Welcome Message -->
	<div class="p-4 border-b border-gray-100 bg-blue-50">
	<div class="flex space-x-3">
	<div class="flex-shrink-0">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
	<i class="fas fa-user-md text-blue-600 text-sm"></i>
	</div>
	</div>
	<div class="message-animation">
	<div class="text-sm font-medium text-gray-700">MediCare AI</div>
	<div class="mt-1 text-sm text-gray-600">
	안녕하세요! MediCare AI 건강 상담 챗봇입니다. <br>
	어떤 건강 관련 문제로 도움을 드릴까요? <br>
	증상, 복용 중인 약물, 또는 건강 관련 질문을 알려주세요.
	</div>
	<div class="mt-3 flex flex-wrap gap-2">
	<button onclick="quickQuestion('두통이 심해요')" class="px-3 py-1 text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-full border border-blue-100 transition">
	두통이 심해요
	</button>
	<button onclick="quickQuestion('복통이 있어요')" class="px-3 py-1 text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-full border border-blue-100 transition">
	복통이 있어요
	</button>
	<button onclick="quickQuestion('감기 증상이 있어요')" class="px-3 py-1 text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-full border border-blue-100 transition">
	감기 증상이 있어요
	</button>
	<button onclick="quickQuestion('스트레스 관리 방법')" class="px-3 py-1 text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-full border border-blue-100 transition">
	스트레스 관리 방법
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Chat Messages will be appended here -->
	<div id="chatMessages" class="overflow-y-auto h-full p-4 space-y-4"></div>
	</div>

	<!-- Input Area -->
	<div class="bg-white rounded-xl shadow-md p-4">
	<div class="flex items-center space-x-2">
	<button class="p-2 rounded-full text-gray-500 hover:bg-gray-100">
	<i class="fas fa-plus"></i>
	</button>
	<div class="flex-grow relative">
	<input
	type="text"
	id="userInput"
	placeholder="증상이나 건강 관련 질문을 입력하세요..."
	class="w-full py-3 px-4 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
	onkeypress="handleKeyPress(event)"
	>
	<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-500">
	<i class="far fa-smile"></i>
	</button>
	</div>
	<button onclick="sendMessage()" class="p-3 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	<div class="mt-3 text-xs text-gray-500 text-center">
	참고: 이 챗봇은 전문 의료 상담을 대체하지 않습니다. 심각한 증상이 있을 경우 즉시 병원을 방문하세요.
	</div>
	</div>

	<!-- Quick Action Buttons (Mobile) -->
	<div class="sm:hidden mt-4 flex justify-around">
	<button onclick="quickQuestion('응급 상황이에요')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-600 rounded-full text-sm font-medium">
	<i class="fas fa-bell mr-1"></i> 응급
	</button>
	<button onclick="showSymptomsList()" class="px-4 py-2 bg-green-100 hover:bg-green-200 text-green-600 rounded-full text-sm font-medium">
	<i class="fas fa-list-ul mr-1"></i> 증상 목록
	</button>
	<button onclick="quickQuestion('병원 찾기')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-600 rounded-full text-sm font-medium">
	<i class="fas fa-hospital mr-1"></i> 병원 찾기
	</button>
	</div>
	</div>

	<script>
	// Sample responses for demonstration
	const botResponses = {
	"두통이 심해요": [
	"두통이 심하시군요. 몇 가지 추가 정보를 알려주시겠어요?",
	"1. 두통이 얼마나 지속되었나요? (몇 시간/몇 일)",
	"2. 어느 부위가 아프신가요? (이마, 뒷목, 한쪽 등)",
	"3. 추가 증상이 있나요? (구토, 시야 이상, 발열 등)",
	"일반적으로 스트레스, 수면 부족, 탈수 등이 두통의 원인이 될 수 있습니다. 충분한 휴식과 물 섭취를 권장드립니다. 하지만 지속되거나 심해지면 병원을 방문하시길 바랍니다."
	],
	"복통이 있어요": [
	"복통이 있으시군요. 더 자세히 설명해주실 수 있나요?",
	"1. 어느 부위가 아프신가요? (위, 배꼽 주변, 아랫배 등)",
	"2. 통증의 성격이 어떻게 되나요? (찌르는 듯, 묵직한, 쥐어짜는 듯 등)",
	"3. 추가 증상이 있나요? (설사, 변비, 구토, 발열 등)",
	"가벼운 복통의 경우 소화불량, 가스 차임, 식중독 등이 원인일 수 있습니다. 하지만 급성 맹장염이나 다른 중증 질환의 가능성도 있으니 통증이 심하거나 지속되면 반드시 병원을 방문하세요."
	],
	"감기 증상이 있어요": [
	"감기 증상이 있으시군요. 어떤 증상이 있나요?",
	"1. 발열이 있나요? 있다면 체온은 어떻게 되나요?",
	"2. 기침, 인후통, 콧물 중 어떤 증상이 있나요?",
	"3. 증상이 얼마나 지속되었나요?",
	"감기는 대개 7-10일 정도 지속됩니다. 충분한 휴식과 수분 섭취, 비타민 섭취가 도움이 됩니다. 고열(38.5°C 이상)이 지속되거나 호흡곤란 등이 있으면 병원을 방문하세요."
	],
	"스트레스 관리 방법": [
	"스트레스 관리는 건강 유지에 매우 중요합니다. 몇 가지 방법을 알려드릴게요:",
	"1. 규칙적인 운동: 하루 30분 정도의 유산소 운동이 도움이 됩니다.",
	"2. 충분한 수면: 하루 7-8시간의 질 좋은 수면을 취하세요.",
	"3. 명상 또는 심호흡: 하루 5-10분씩 명상이나 깊은 호흡을 해보세요.",
	"4. 취미 활동: 즐거움을 주는 활동에 시간을 할당하세요.",
	"5. 사회적 지원: 친구나 가족과의 대화가 큰 도움이 됩니다.",
	"스트레스가 지속되어 일상 생활에 지장을 준다면 전문가와 상담하는 것을 권장합니다."
	],
	"응급 상황이에요": [
	"<span class='font-bold text-red-600'>응급 상황인 경우 즉시 119에 연락하거나 가까운 응급실을 방문하세요.</span>",
	"다음과 같은 증상이 있으면 즉시 응급처치가 필요합니다:",
	"- 호흡곤란 또는 숨을 쉴 수 없음",
	"- 심한 가슴 통증 또는 압박감",
	"- 의식 소실 또는 혼란 상태",
	"- 심한 출혈",
	"- 심한 두통과 함께 구토 또는 시야 이상",
	"이 챗봇은 응급 상황에 대처할 수 없습니다. 위험 가능성이 있다고 판단되면 즉시 전문 의료기관을 찾으세요."
	],
	"병원 찾기": [
	"가까운 병원을 찾고 계시군요. 현재 위치 기반으로 검색할 수 있습니다.",
	"1. <button class='text-blue-600 underline'>내 위치에서 가까운 병원 찾기</button>",
	"2. <button class='text-blue-600 underline'>응급실이 있는 병원 찾기</button>",
	"3. <button class='text-blue-600 underline'>야간진료 가능 병원 찾기</button>",
	"더 정확한 정보를 원하시면 보건복지부 홈페이지(www.mohw.go.kr) 또는 지역 보건소에 문의하실 수 있습니다."
	],
	"default": [
	"이해하지 못했어요. 건강 관련 증상이나 질문을 더 자세히 설명해주시겠어요?",
	"예를 들어 다음과 같이 질문할 수 있습니다:",
	"- \"어제부터 열이 38도 나고 기침이 나요\"",
	"- \"왼쪽 팔에 저림 현상이 있는데 어떤 게 원인일까요?\"",
	"- \"혈압을 낮추는 자연적인 방법이 있을까요?\""
	]
	};

	// Function to send message
	function sendMessage() {
	const userInput = document.getElementById('userInput');
	const message = userInput.value.trim();

	if (message === '') return;

	// Add user message to chat
	addMessageToChat(message, 'user');
	userInput.value = '';

	// Show typing indicator
	showTypingIndicator();

	// Simulate bot thinking
	setTimeout(() => {
	// Remove typing indicator
	removeTypingIndicator();

	// Generate bot response
	let response;
	for (const key in botResponses) {
	if (message.toLowerCase().includes(key.toLowerCase())) {
	response = botResponses[key];
	break;
	}
	}

	if (!response) {
	response = botResponses['default'];
	}

	// Add bot response to chat
	response.forEach((line, index) => {
	setTimeout(() => {
	addMessageToChat(line, 'bot');
	}, index * 500);
	});

	}, 1000 + Math.random() * 1000);
	}

	// Function to handle quick questions
	function quickQuestion(question) {
	document.getElementById('userInput').value = question;
	sendMessage();
	}

	// Function to show symptoms list
	function showSymptomsList() {
	const symptoms = [
	"두통", "복통", "발열", "기침", "인후통",
	"메스꺼움", "구토", "현기증", "피로감",
	"호흡곤란", "흉통", "관절통", "근육통",
	"설사", "변비", "피부 발진", "시야 이상"
	];

	let message = "<div class='font-medium mb-2'>증상 목록:</div><div class='flex flex-wrap gap-2'>";
	symptoms.forEach(symptom => {
	message += `<button onclick="quickQuestion('${symptom}이 있어요')" class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full">${symptom}</button>`;
	});
	message += "</div>";

	addMessageToChat(message, 'bot');
	}

	// Function to add message to chat
	function addMessageToChat(message, sender) {
	const chatMessages = document.getElementById('chatMessages');
	const messageDiv = document.createElement('div');
	messageDiv.className = 'message-animation';

	if (sender === 'user') {
	messageDiv.innerHTML = `
	<div class="flex justify-end">
	<div class="max-w-xs sm:max-w-md md:max-w-lg bg-blue-600 text-white rounded-xl px-4 py-2">
	${message}
	</div>
	</div>
	`;
	} else {
	messageDiv.innerHTML = `
	<div class="flex space-x-3">
	<div class="flex-shrink-0">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
	<i class="fas fa-user-md text-blue-600 text-sm"></i>
	</div>
	</div>
	<div class="max-w-xs sm:max-w-md md:max-w-lg bg-gray-100 text-gray-800 rounded-xl px-4 py-2">
	${message}
	</div>
	</div>
	`;
	}

	chatMessages.appendChild(messageDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	// Function to show typing indicator
	function showTypingIndicator() {
	const chatMessages = document.getElementById('chatMessages');
	const typingDiv = document.createElement('div');
	typingDiv.className = 'flex space-x-3';
	typingDiv.id = 'typingIndicator';
	typingDiv.innerHTML = `
	<div class="flex-shrink-0">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
	<i class="fas fa-user-md text-blue-600 text-sm"></i>
	</div>
	</div>
	<div class="bg-gray-100 text-gray-800 rounded-xl px-4 py-2">
	<div class="typing-indicator">
	<span>.</span><span>.</span><span>.</span>
	</div>
	</div>
	`;

	chatMessages.appendChild(typingDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	// Function to remove typing indicator
	function removeTypingIndicator() {
	const typingIndicator = document.getElementById('typingIndicator');
	if (typingIndicator) {
	typingIndicator.remove();
	}
	}

	// Function to handle enter key press
	function handleKeyPress(event) {
	if (event.key === 'Enter') {
	sendMessage();
	}
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joung/joung-joung" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>