Spaces:

appleorangejuice
/

multi-agent-chat

Running

File size: 27,892 Bytes

d82b099

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멀티 에이전트 채팅 시스템</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>
        .agent-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .message-animation {
            animation: fadeIn 0.3s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .typing-indicator {
            display: inline-flex;
            align-items: center;
        }
        .typing-dot {
            width: 8px;
            height: 8px;
            background-color: #9CA3AF;
            border-radius: 50%;
            margin: 0 2px;
            animation: typingAnimation 1.4s infinite ease-in-out;
        }
        .typing-dot:nth-child(1) { animation-delay: 0s; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typingAnimation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold text-indigo-800 mb-2">멀티 에이전트 채팅 시스템</h1>
            <p class="text-gray-600">여러 AI 에이전트와 동시에 대화하며 다양한 관점을 경험하세요</p>
        </header>

        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 에이전트 선택 패널 -->
            <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4 h-fit">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">에이전트 선택</h2>
                <div class="space-y-3">
                    <div class="agent-card bg-indigo-50 p-4 rounded-lg cursor-pointer transition-all duration-300 border border-indigo-100" 
                         onclick="selectAgent('analyst')" data-agent="analyst">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center mr-3">
                                <i class="fas fa-chart-line text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-indigo-800">분석가 알렉스</h3>
                                <p class="text-xs text-gray-500">데이터 분석 전문가</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="agent-card bg-green-50 p-4 rounded-lg cursor-pointer transition-all duration-300 border border-green-100" 
                         onclick="selectAgent('creative')" data-agent="creative">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-200 flex items-center justify-center mr-3">
                                <i class="fas fa-paint-brush text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-green-800">크리에이터 클로이</h3>
                                <p class="text-xs text-gray-500">창의적 아이디어 생성기</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="agent-card bg-red-50 p-4 rounded-lg cursor-pointer transition-all duration-300 border border-red-100" 
                         onclick="selectAgent('debater')" data-agent="debater">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-red-200 flex items-center justify-center mr-3">
                                <i class="fas fa-comments text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-red-800">토론가 데이빗</h3>
                                <p class="text-xs text-gray-500">논리적 토론 전문가</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="agent-card bg-yellow-50 p-4 rounded-lg cursor-pointer transition-all duration-300 border border-yellow-100" 
                         onclick="selectAgent('advisor')" data-agent="advisor">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-yellow-200 flex items-center justify-center mr-3">
                                <i class="fas fa-lightbulb text-yellow-600"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-yellow-800">조언가 제시카</h3>
                                <p class="text-xs text-gray-500">전략적 조언 제공자</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <h3 class="text-sm font-semibold text-gray-700 mb-2">시스템 설정</h3>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-600">에이전트 간 상호작용</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="agentInteraction" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">실시간 반응</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="realtimeResponse" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- 채팅 메인 영역 -->
            <div class="w-full lg:w-3/4 flex flex-col">
                <!-- 선택된 에이전트 표시 -->
                <div class="bg-white rounded-xl shadow-md p-4 mb-4">
                    <div class="flex flex-wrap gap-3" id="selectedAgentsContainer">
                        <div class="text-sm text-gray-500">에이전트를 선택하세요 (복수 선택 가능)</div>
                    </div>
                </div>

                <!-- 채팅 내용 -->
                <div class="flex-1 bg-white rounded-xl shadow-md p-4 mb-4 overflow-y-auto" id="chatContainer" style="min-height: 400px;">
                    <div class="text-center text-gray-500 py-10" id="welcomeMessage">
                        <i class="fas fa-robot text-4xl text-indigo-300 mb-3"></i>
                        <p class="text-lg">멀티 에이전트 채팅 시스템에 오신 것을 환영합니다!</p>
                        <p class="text-sm mt-2">왼쪽에서 대화할 에이전트를 선택해 주세요.</p>
                    </div>
                    <div id="chatMessages" class="space-y-4 hidden"></div>
                </div>

                <!-- 메시지 입력 -->
                <div class="bg-white rounded-xl shadow-md p-4">
                    <div class="flex items-center">
                        <input type="text" id="userInput" placeholder="메시지를 입력하세요..." 
                               class="flex-1 border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        <button onclick="sendMessage()" class="bg-indigo-600 text-white py-2 px-6 rounded-r-lg hover:bg-indigo-700 transition duration-300">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="flex justify-between mt-2">
                        <div class="text-xs text-gray-500">
                            <span id="charCount">0</span>/500
                        </div>
                        <div class="flex space-x-2">
                            <button class="text-gray-500 hover:text-indigo-600" title="파일 첨부">
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button class="text-gray-500 hover:text-indigo-600" title="음성 입력">
                                <i class="fas fa-microphone"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 선택된 에이전트 저장
        let selectedAgents = [];
        let conversationHistory = [];
        
        // 에이전트 정보
        const agents = {
            analyst: {
                name: "분석가 알렉스",
                color: "indigo",
                icon: "chart-line",
                description: "데이터 분석 전문가",
                personality: "저는 데이터와 사실에 기반한 분석을 제공합니다. 감정보다는 숫자와 통계를 신뢰합니다."
            },
            creative: {
                name: "크리에이터 클로이",
                color: "green",
                icon: "paint-brush",
                description: "창의적 아이디어 생성기",
                personality: "상상력이 풍부하고 독창적인 아이디어를 제공하는 것이 제 강점입니다. 틀에 얽매이지 않는 사고를 좋아해요!"
            },
            debater: {
                name: "토론가 데이빗",
                color: "red",
                icon: "comments",
                description: "논리적 토론 전문가",
                personality: "논리적 오류를 찾아내고 다양한 관점에서 문제를 바라보는 것을 좋아합니다. 강한 주장도 두려워하지 않아요."
            },
            advisor: {
                name: "조언가 제시카",
                color: "yellow",
                icon: "lightbulb",
                description: "전략적 조언 제공자",
                personality: "실용적이고 실행 가능한 조언을 제공하는 것을 좋아합니다. 장기적인 관점에서 문제를 해결하는 데 집중합니다."
            }
        };

        // 에이전트 선택 함수
        function selectAgent(agentId) {
            const agentCard = document.querySelector(`[data-agent="${agentId}"]`);
            
            if (selectedAgents.includes(agentId)) {
                // 이미 선택된 경우 제거
                selectedAgents = selectedAgents.filter(id => id !== agentId);
                agentCard.classList.remove(`border-${agents[agentId].color}-300`, `ring-2`, `ring-${agents[agentId].color}-300`);
            } else {
                // 선택되지 않은 경우 추가
                selectedAgents.push(agentId);
                agentCard.classList.add(`border-${agents[agentId].color}-300`, `ring-2`, `ring-${agents[agentId].color}-300`);
            }
            
            updateSelectedAgentsUI();
        }

        // 선택된 에이전트 UI 업데이트
        function updateSelectedAgentsUI() {
            const container = document.getElementById('selectedAgentsContainer');
            
            if (selectedAgents.length === 0) {
                container.innerHTML = '<div class="text-sm text-gray-500">에이전트를 선택하세요 (복수 선택 가능)</div>';
                document.getElementById('welcomeMessage').classList.remove('hidden');
                document.getElementById('chatMessages').classList.add('hidden');
                return;
            }
            
            container.innerHTML = '';
            selectedAgents.forEach(agentId => {
                const agent = agents[agentId];
                const badge = document.createElement('div');
                badge.className = `flex items-center bg-${agent.color}-100 text-${agent.color}-800 px-3 py-1 rounded-full text-sm`;
                badge.innerHTML = `
                    <i class="fas fa-${agent.icon} mr-1"></i>
                    ${agent.name}
                `;
                container.appendChild(badge);
            });
            
            document.getElementById('welcomeMessage').classList.add('hidden');
            document.getElementById('chatMessages').classList.remove('hidden');
        }

        // 메시지 전송 함수
        function sendMessage() {
            const userInput = document.getElementById('userInput');
            const message = userInput.value.trim();
            
            if (message === '' || selectedAgents.length === 0) return;
            
            // 사용자 메시지 추가
            addMessage('user', '당신', 'gray', 'user', message);
            userInput.value = '';
            updateCharCount();
            
            // 채팅 컨테이너 스크롤 아래로
            scrollChatToBottom();
            
            // 에이전트 응답 생성 (시뮬레이션)
            simulateAgentResponses(message);
        }

        // 에이전트 응답 시뮬레이션
        function simulateAgentResponses(userMessage) {
            const interactionEnabled = document.getElementById('agentInteraction').checked;
            const realtimeEnabled = document.getElementById('realtimeResponse').checked;
            
            // 대화 기록에 사용자 메시지 추가
            conversationHistory.push({
                sender: 'user',
                message: userMessage,
                timestamp: new Date().toISOString()
            });
            
            // 각 에이전트의 응답 생성
            selectedAgents.forEach((agentId, index) => {
                const agent = agents[agentId];
                
                // 실시간 응답 시뮬레이션을 위해 약간의 지연 추가
                setTimeout(() => {
                    // 에이전트가 서로 상호작용하는 경우
                    if (interactionEnabled && index > 0) {
                        const previousAgentId = selectedAgents[index-1];
                        const previousAgent = agents[previousAgentId];
                        
                        // 이전 에이전트의 응답을 참조하여 메시지 생성
                        const response = generateInteractiveResponse(agentId, previousAgentId, userMessage);
                        addMessage('agent', agent.name, agent.color, agentId, response);
                        
                        // 대화 기록에 추가
                        conversationHistory.push({
                            sender: agentId,
                            message: response,
                            timestamp: new Date().toISOString()
                        });
                    } else {
                        // 독립적인 응답 생성
                        const response = generateAgentResponse(agentId, userMessage);
                        
                        // 실시간 타이핑 효과
                        if (realtimeEnabled) {
                            showTypingIndicator(agentId);
                            
                            setTimeout(() => {
                                removeTypingIndicator(agentId);
                                addMessage('agent', agent.name, agent.color, agentId, response);
                                
                                // 대화 기록에 추가
                                conversationHistory.push({
                                    sender: agentId,
                                    message: response,
                                    timestamp: new Date().toISOString()
                                });
                                
                                scrollChatToBottom();
                            }, 1500 + Math.random() * 1000); // 랜덤 지연
                        } else {
                            addMessage('agent', agent.name, agent.color, agentId, response);
                            
                            // 대화 기록에 추가
                            conversationHistory.push({
                                sender: agentId,
                                message: response,
                                timestamp: new Date().toISOString()
                            });
                            
                            scrollChatToBottom();
                        }
                    }
                }, index * 500); // 에이전트 간 응답 지연
            });
        }

        // 에이전트 응답 생성
        function generateAgentResponse(agentId, userMessage) {
            const agent = agents[agentId];
            const responses = {
                analyst: [
                    `제가 분석한 결과, "${userMessage}"라는 주제는 몇 가지 핵심 요소로 나눌 수 있습니다. 첫째, 데이터 상으로는...`,
                    `흥미로운 질문입니다. 제가 최근에 본 연구에 따르면, 이와 관련된 통계는...`,
                    `저는 이 문제를 정량적으로 접근하는 것을 선호합니다. 측정 가능한 지표로 보면...`
                ],
                creative: [
                    `와, "${userMessage}"라니 정말 영감을 주는 주제네요! 제 상상력이 즉시 활활 타오르는군요. 만약 우리가...`,
                    `이 주제로 이런 아이디어는 어떨까요? [창의적인 제안]. 물론 이건 시작일 뿐이고 더 발전시킬 수 있어요!`,
                    `제 머릿속에 재미있는 이미지가 떠오르네요. 이 주제를 색다른 각도에서 보면...`
                ],
                debater: [
                    `논리적으로 접근해보자면, "${userMessage}"에 대한 주장에는 몇 가지 논점이 있습니다. 첫째로...`,
                    `반대 의견을 제시해도 될까요? 왜냐하면... 물론 다른 관점도 있습니다.`,
                    `이 문제를 양면에서 바라보는 것이 중요합니다. 한편으로는... 하지만 다른 한편으로는...`
                ],
                advisor: [
                    `실용적인 조언을 드리자면, "${userMessage}"에 대해 다음 단계를 고려해보세요: 1) ... 2) ...`,
                    `장기적인 관점에서, 이 문제를 해결하기 위한 전략은... 단기적으로는...`,
                    `제 경험상, 이런 유형의 문제에는 이러한 접근 방식이 효과적이었습니다...`
                ]
            };
            
            // 에이전트 성격을 반영한 무작위 응답 선택
            const randomIndex = Math.floor(Math.random() * responses[agentId].length);
            return responses[agentId][randomIndex];
        }

        // 에이전트 상호작용 응답 생성
        function generateInteractiveResponse(agentId, previousAgentId, userMessage) {
            const agent = agents[agentId];
            const previousAgent = agents[previousAgentId];
            
            // 에이전트 조합에 따른 특별한 응답
            const interactionResponses = {
                analyst_creative: [
                    `[${previousAgent.name}]님의 창의적인 아이디어에 데이터를 더해보겠습니다. 통계적으로 보면 그 아이디어는...`,
                    `창의성과 데이터는 좋은 조합입니다. ${previousAgent.name}님의 제안을 분석해보니...`
                ],
                creative_debater: [
                    `[${previousAgent.name}]님의 논점은 흥미롭지만, 조금 더 파격적인 접근은 어떨까요? 예를 들어...`,
                    `토론을 더 생동감 있게 만들기 위해 제안을 드리자면...`
                ],
                debater_advisor: [
                    `[${previousAgent.name}]님의 논리적 지적은 타당합니다. 이를 바탕으로 실행 가능한 계획을 세운다면...`,
                    `토론 내용을 실전에 적용하기 위한 구체적인 단계는...`
                ],
                advisor_analyst: [
                    `[${previousAgent.name}]님의 조언을 데이터로 검증해보았습니다. 결과는...`,
                    `전략적 제안을 수치화해보니 몇 가지 흥미로운 점이 발견되었습니다...`
                ]
            };
            
            const key = `${previousAgentId}_${agentId}`;
            if (interactionResponses[key]) {
                const randomIndex = Math.floor(Math.random() * interactionResponses[key].length);
                return interactionResponses[key][randomIndex];
            } else {
                // 일반적인 응답
                return generateAgentResponse(agentId, userMessage);
            }
        }

        // 채팅 메시지 추가
        function addMessage(sender, name, color, agentId, message) {
            const chatMessages = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message-animation flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
            
            if (sender === 'user') {
                messageDiv.innerHTML = `
                    <div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-100 rounded-xl p-3">
                        <div class="text-xs text-gray-500 mb-1">${name}</div>
                        <p>${message}</p>
                    </div>
                `;
            } else {
                messageDiv.innerHTML = `
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-${color}-200 flex items-center justify-center mr-2">
                            <i class="fas fa-${agents[agentId].icon} text-${color}-600"></i>
                        </div>
                        <div class="max-w-xs md:max-w-md lg:max-w-lg bg-${color}-50 rounded-xl p-3">
                            <div class="flex items-center">
                                <span class="font-medium text-${color}-800 mr-2">${name}</span>
                                <span class="text-xs text-gray-500">${agents[agentId].description}</span>
                            </div>
                            <p class="mt-1">${message}</p>
                        </div>
                    </div>
                `;
            }
            
            chatMessages.appendChild(messageDiv);
            scrollChatToBottom();
        }

        // 타이핑 인디케이터 표시
        function showTypingIndicator(agentId) {
            const chatMessages = document.getElementById('chatMessages');
            const agent = agents[agentId];
            
            const typingDiv = document.createElement('div');
            typingDiv.className = `flex justify-start typing-indicator-${agentId}`;
            typingDiv.innerHTML = `
                <div class="flex items-start">
                    <div class="w-8 h-8 rounded-full bg-${agent.color}-200 flex items-center justify-center mr-2">
                        <i class="fas fa-${agent.icon} text-${agent.color}-600"></i>
                    </div>
                    <div class="bg-${agent.color}-50 rounded-xl p-3">
                        <div class="flex items-center">
                            <span class="font-medium text-${agent.color}-800 mr-2">${agent.name}</span>
                            <span class="text-xs text-gray-500">${agent.description}</span>
                        </div>
                        <div class="typing-indicator mt-1">
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                        </div>
                    </div>
                </div>
            `;
            
            chatMessages.appendChild(typingDiv);
            scrollChatToBottom();
        }

        // 타이핑 인디케이터 제거
        function removeTypingIndicator(agentId) {
            const indicators = document.querySelectorAll(`.typing-indicator-${agentId}`);
            indicators.forEach(indicator => indicator.remove());
        }

        // 채팅 스크롤 아래로
        function scrollChatToBottom() {
            const chatContainer = document.getElementById('chatContainer');
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 문자 수 카운트
        document.getElementById('userInput').addEventListener('input', function() {
            updateCharCount();
        });

        function updateCharCount() {
            const input = document.getElementById('userInput');
            const charCount = document.getElementById('charCount');
            const count = input.value.length;
            charCount.textContent = count;
            
            if (count > 400) {
                charCount.classList.add('text-red-500');
                charCount.classList.remove('text-gray-500');
            } else {
                charCount.classList.remove('text-red-500');
                charCount.classList.add('text-gray-500');
            }
        }

        // 엔터 키로 메시지 전송
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.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=appleorangejuice/multi-agent-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>