Delete chatbot.js

chatbot.js

@@ -1,496 +0,0 @@
-/**
- * HumanGen.AI Chatbot Module
- * Static Space에서 Gradio 백엔드를 호출하는 챗봇
- * 
- * 사용법: index.html 끝에 아래 스크립트 태그 추가
- * <script type="module" src="chatbot.js"></script>
- */
-
-import { Client } from "https://esm.sh/@gradio/client@1.4.0";
-
-// ============================================
-// 설정 - 본인의 Gradio Space 주소로 변경하세요!
-// ============================================
-const GRADIO_SPACE = "Heartsync/humangen-chatbot";  // 예: "seawolf2357/humangen-chatbot"
-
-// ============================================
-// 챗봇 UI 스타일
-// ============================================
-const chatbotStyles = `
-<style>
-/* 챗봇 컨테이너 */
-#hg-chatbot-container {
-    position: fixed;
-    bottom: 100px;
-    right: 20px;
-    z-index: 10000;
-    font-family: 'Comic Neue', cursive, sans-serif;
-}
-
-/* 챗봇 토글 버튼 */
-#hg-chat-toggle {
-    width: 65px;
-    height: 65px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-    border: 3px solid #1F2937;
-    box-shadow: 4px 4px 0px #1F2937;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28px;
-    transition: all 0.2s ease;
-    animation: hg-pulse 2s infinite;
-}
-
-#hg-chat-toggle:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: 6px 6px 0px #1F2937;
-}
-
-@keyframes hg-pulse {
-    0%, 100% { box-shadow: 4px 4px 0px #1F2937, 0 0 0 0 rgba(59, 130, 246, 0.4); }
-    50% { box-shadow: 4px 4px 0px #1F2937, 0 0 0 10px rgba(59, 130, 246, 0); }
-}
-
-/* 챗봇 윈도우 */
-#hg-chat-window {
-    display: none;
-    position: absolute;
-    bottom: 80px;
-    right: 0;
-    width: 380px;
-    max-width: calc(100vw - 40px);
-    background: #FFFFFF;
-    border: 3px solid #1F2937;
-    border-radius: 16px;
-    box-shadow: 8px 8px 0px #1F2937;
-    overflow: hidden;
-    animation: hg-slideUp 0.3s ease;
-}
-
-@keyframes hg-slideUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* 헤더 */
-#hg-chat-header {
-    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-    color: white;
-    padding: 15px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 3px solid #1F2937;
-}
-
-#hg-chat-header h3 {
-    margin: 0;
-    font-family: 'Bangers', cursive;
-    font-size: 1.3rem;
-    letter-spacing: 1px;
-    text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
-}
-
-#hg-chat-close {
-    background: none;
-    border: none;
-    color: white;
-    font-size: 24px;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-}
-
-/* 메시지 영역 */
-#hg-chat-messages {
-    height: 350px;
-    overflow-y: auto;
-    padding: 15px;
-    background: #FEF9C3;
-    background-image: radial-gradient(#1F2937 1px, transparent 1px);
-    background-size: 15px 15px;
-}
-
-/* 메시지 스타일 */
-.hg-message {
-    margin-bottom: 12px;
-    display: flex;
-    flex-direction: column;
-}
-
-.hg-message.user {
-    align-items: flex-end;
-}
-
-.hg-message.bot {
-    align-items: flex-start;
-}
-
-.hg-message-bubble {
-    max-width: 85%;
-    padding: 12px 16px;
-    border-radius: 12px;
-    border: 2px solid #1F2937;
-    box-shadow: 3px 3px 0px #1F2937;
-    font-size: 0.95rem;
-    line-height: 1.5;
-    word-wrap: break-word;
-}
-
-.hg-message.user .hg-message-bubble {
-    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-    color: white;
-    border-radius: 12px 12px 0 12px;
-}
-
-.hg-message.bot .hg-message-bubble {
-    background: white;
-    color: #1F2937;
-    border-radius: 12px 12px 12px 0;
-}
-
-/* 타이핑 인디케이터 */
-.hg-typing {
-    display: flex;
-    gap: 4px;
-    padding: 8px 12px;
-}
-
-.hg-typing span {
-    width: 8px;
-    height: 8px;
-    background: #3B82F6;
-    border-radius: 50%;
-    animation: hg-bounce 1.4s infinite ease-in-out;
-}
-
-.hg-typing span:nth-child(1) { animation-delay: 0s; }
-.hg-typing span:nth-child(2) { animation-delay: 0.2s; }
-.hg-typing span:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes hg-bounce {
-    0%, 80%, 100% { transform: scale(0); }
-    40% { transform: scale(1); }
-}
-
-/* 입력 영역 */
-#hg-chat-input-area {
-    padding: 15px;
-    border-top: 3px solid #1F2937;
-    background: white;
-    display: flex;
-    gap: 10px;
-}
-
-#hg-chat-input {
-    flex: 1;
-    padding: 12px 15px;
-    border: 2px solid #1F2937;
-    border-radius: 8px;
-    font-family: 'Comic Neue', cursive;
-    font-size: 1rem;
-    outline: none;
-    transition: all 0.2s;
-}
-
-#hg-chat-input:focus {
-    border-color: #3B82F6;
-    box-shadow: 3px 3px 0px #3B82F6;
-}
-
-#hg-chat-send {
-    padding: 12px 20px;
-    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-    color: white;
-    border: 2px solid #1F2937;
-    border-radius: 8px;
-    font-family: 'Bangers', cursive;
-    font-size: 1.1rem;
-    cursor: pointer;
-    box-shadow: 3px 3px 0px #1F2937;
-    transition: all 0.15s;
-}
-
-#hg-chat-send:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: 5px 5px 0px #1F2937;
-}
-
-#hg-chat-send:active {
-    transform: translate(1px, 1px);
-    box-shadow: 2px 2px 0px #1F2937;
-}
-
-#hg-chat-send:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* 빠른 질문 버튼 */
-#hg-quick-questions {
-    padding: 10px 15px;
-    background: #F3F4F6;
-    border-top: 2px dashed #D1D5DB;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.hg-quick-btn {
-    padding: 6px 12px;
-    background: white;
-    border: 2px solid #1F2937;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.15s;
-}
-
-.hg-quick-btn:hover {
-    background: #FACC15;
-    transform: translateY(-2px);
-}
-
-/* 모바일 반응형 */
-@media (max-width: 480px) {
-    #hg-chat-window {
-        width: calc(100vw - 30px);
-        right: -5px;
-        bottom: 75px;
-    }
-    
-    #hg-chat-messages {
-        height: 300px;
-    }
-}
-</style>
-`;
-
-// ============================================
-// 챗봇 HTML 구조
-// ============================================
-const chatbotHTML = `
-<div id="hg-chatbot-container">
-    <!-- 토글 버튼 -->
-    <div id="hg-chat-toggle" title="AI 도우미와 대화하기">
-        💬
-    </div>
-    
-    <!-- 챗봇 윈도우 -->
-    <div id="hg-chat-window">
-        <div id="hg-chat-header">
-            <h3>🤖 AI 도우미</h3>
-            <button id="hg-chat-close">✕</button>
-        </div>
-        
-        <div id="hg-chat-messages">
-            <div class="hg-message bot">
-                <div class="hg-message-bubble">
-                    안녕하세요! 👋 HumanGen.AI에 대해 궁금한 것이 있으시면 물어보세요!
-                </div>
-            </div>
-        </div>
-        
-        <div id="hg-quick-questions">
-            <button class="hg-quick-btn">서비스 종류</button>
-            <button class="hg-quick-btn">이미지 생성</button>
-            <button class="hg-quick-btn">비디오 생성</button>
-            <button class="hg-quick-btn">한국어 지원</button>
-            <button class="hg-quick-btn">요금 문의</button>
-        </div>
-        
-        <div id="hg-chat-input-area">
-            <input type="text" id="hg-chat-input" placeholder="메시지를 입력하세요..." autocomplete="off">
-            <button id="hg-chat-send">전송</button>
-        </div>
-    </div>
-</div>
-`;
-
-// ============================================
-// 챗봇 클래스
-// ============================================
-class HumanGenChatbot {
-    constructor() {
-        this.client = null;
-        this.history = [];
-        this.isOpen = false;
-        this.isLoading = false;
-        
-        this.init();
-    }
-    
-    async init() {
-        // 스타일 & HTML 삽입
-        document.head.insertAdjacentHTML('beforeend', chatbotStyles);
-        document.body.insertAdjacentHTML('beforeend', chatbotHTML);
-        
-        // DOM 요소
-        this.container = document.getElementById('hg-chatbot-container');
-        this.toggle = document.getElementById('hg-chat-toggle');
-        this.window = document.getElementById('hg-chat-window');
-        this.closeBtn = document.getElementById('hg-chat-close');
-        this.messages = document.getElementById('hg-chat-messages');
-        this.input = document.getElementById('hg-chat-input');
-        this.sendBtn = document.getElementById('hg-chat-send');
-        this.quickBtns = document.querySelectorAll('.hg-quick-btn');
-        
-        // 이벤트 바인딩
-        this.toggle.addEventListener('click', () => this.toggleChat());
-        this.closeBtn.addEventListener('click', () => this.toggleChat());
-        this.sendBtn.addEventListener('click', () => this.sendMessage());
-        this.input.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                this.sendMessage();
-            }
-        });
-        
-        // 빠른 질문 버튼
-        this.quickBtns.forEach(btn => {
-            btn.addEventListener('click', () => {
-                this.input.value = btn.textContent + ' 알려줘';
-                this.sendMessage();
-            });
-        });
-        
-        // Gradio 클라이언트 연결
-        try {
-            this.client = await Client.connect(GRADIO_SPACE);
-            console.log('✅ HumanGen Chatbot 연결 성공');
-            
-            // 사용 가능한 API 엔드포인트 확인 (디버깅용)
-            try {
-                const apiInfo = await this.client.view_api();
-                console.log('📡 사용 가능한 API:', apiInfo);
-            } catch (e) {
-                console.log('API 정보 조회 불가');
-            }
-        } catch (error) {
-            console.error('❌ Chatbot 연결 실패:', error);
-            this.showError('챗봇 서버 연결에 실패했습니다. 잠시 후 다시 시도해주세요.');
-        }
-    }
-    
-    toggleChat() {
-        this.isOpen = !this.isOpen;
-        this.window.style.display = this.isOpen ? 'block' : 'none';
-        this.toggle.innerHTML = this.isOpen ? '✕' : '💬';
-        
-        if (this.isOpen) {
-            this.input.focus();
-        }
-    }
-    
-    addMessage(content, isUser = false) {
-        const messageDiv = document.createElement('div');
-        messageDiv.className = `hg-message ${isUser ? 'user' : 'bot'}`;
-        messageDiv.innerHTML = `<div class="hg-message-bubble">${this.formatMessage(content)}</div>`;
-        this.messages.appendChild(messageDiv);
-        this.scrollToBottom();
-    }
-    
-    formatMessage(text) {
-        // 마크다운 스타일 포맷팅
-        return text
-            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-            .replace(/\*(.*?)\*/g, '<em>$1</em>')
-            .replace(/`(.*?)`/g, '<code style="background:#F3F4F6;padding:2px 6px;border-radius:4px;">$1</code>')
-            .replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank" style="color:#3B82F6;">$1</a>')
-            .replace(/([a-z0-9-]+\.humangen\.ai)/gi, '<a href="https://$1" target="_blank" style="color:#3B82F6;font-weight:700;">$1</a>')
-            .replace(/\n/g, '<br>');
-    }
-    
-    showTyping() {
-        const typingDiv = document.createElement('div');
-        typingDiv.className = 'hg-message bot';
-        typingDiv.id = 'hg-typing-indicator';
-        typingDiv.innerHTML = `
-            <div class="hg-message-bubble">
-                <div class="hg-typing">
-                    <span></span><span></span><span></span>
-                </div>
-            </div>
-        `;
-        this.messages.appendChild(typingDiv);
-        this.scrollToBottom();
-    }
-    
-    hideTyping() {
-        const typing = document.getElementById('hg-typing-indicator');
-        if (typing) typing.remove();
-    }
-    
-    showError(message) {
-        this.addMessage(`⚠️ ${message}`, false);
-    }
-    
-    scrollToBottom() {
-        this.messages.scrollTop = this.messages.scrollHeight;
-    }
-    
-    async sendMessage() {
-        const message = this.input.value.trim();
-        if (!message || this.isLoading) return;
-        
-        // 사용자 메시지 표시
-        this.addMessage(message, true);
-        this.input.value = '';
-        
-        // 로딩 상태
-        this.isLoading = true;
-        this.sendBtn.disabled = true;
-        this.showTyping();
-        
-        try {
-            if (!this.client) {
-                throw new Error('서버에 연결되지 않았습니다.');
-            }
-            
-            // Gradio API 호출 - /chat 엔드포인트, message만 전달
-            const result = await this.client.predict("/chat", { 
-                message: message 
-            });
-            
-            this.hideTyping();
-            console.log('API 응답:', result);
-            
-            // 응답 처리 - result.data가 문자열
-            if (result.data) {
-                this.addMessage(result.data, false);
-                this.history.push([message, result.data]);
-            } else {
-                this.addMessage('응답을 받지 못했습니다.', false);
-            }
-            
-        } catch (error) {
-            console.error('메시지 전송 오류:', error);
-            this.hideTyping();
-            this.showError('메시지 전송에 실패했습니다: ' + error.message);
-        } finally {
-            this.isLoading = false;
-            this.sendBtn.disabled = false;
-            this.input.focus();
-        }
-    }
-}
-
-// ============================================
-// 초기화
-// ============================================
-document.addEventListener('DOMContentLoaded', () => {
-    window.humangenChatbot = new HumanGenChatbot();
-});
-
-// 페이지 로드 후 바로 실행 (DOMContentLoaded 이미 발생한 경우)
-if (document.readyState === 'complete' || document.readyState === 'interactive') {
-    setTimeout(() => {
-        if (!window.humangenChatbot) {
-            window.humangenChatbot = new HumanGenChatbot();
-        }
-    }, 100);
-}