Spaces:

joung
/

joung-joung

Running

File size: 18,233 Bytes

addf17e

<!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>