Spaces:

joung
/

joung-joung

Running

App Files Files Community

joung commited on Apr 14

Commit

addf17e

verified ·

1 Parent(s): b2ae804

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +340 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Joung Joung
-emoji: ⚡
-colorFrom: indigo
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: joung-joung
+emoji: 🐳
+colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,340 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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