Spaces:

Lyon28
/

AI-Character-Chat

Running

App Files Files Community

Lyon28 commited on 5 days ago

Commit

83e2658

verified ·

1 Parent(s): cc603f7

Upload 4 files

Browse files

Files changed (4) hide show

app.py +34 -6
avatar.png +2 -2
background.png +0 -0
index.html +539 -495

app.py CHANGED Viewed

@@ -2,7 +2,7 @@ import os
 import uvicorn
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 from transformers import pipeline, AutoTokenizer, AutoModel, set_seed
@@ -26,11 +26,14 @@ app.add_middleware(
     allow_headers=["*"],
 )
-@app.get("/", response_class=HTMLResponse)
-async def serve_frontend():
-    return FileResponse("index.html")
 # Set seed untuk konsistensi
 set_seed(42)
@@ -498,6 +501,32 @@ async def inference(request: dict):
             "status": "error"
         }
 # Run dengan CPU optimizations
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
@@ -505,7 +534,6 @@ if __name__ == "__main__":
         app,
         host="0.0.0.0",
         port=port,
-        log_level="info",
         workers=1,
         timeout_keep_alive=30,
         access_log=False

 import uvicorn
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 from transformers import pipeline, AutoTokenizer, AutoModel, set_seed
     allow_headers=["*"],
 )
+# Serve static files
+@app.get("/avatar.png")
+async def get_avatar():
+    return FileResponse("avatar.png")
+@app.get("/background.png")
+async def get_background():
+    return FileResponse("background.png")
 # Set seed untuk konsistensi
 set_seed(42)
             "status": "error"
         }
+# Serve HTML frontend
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend():
+    try:
+        with open("index.html", "r", encoding="utf-8") as file:
+            return HTMLResponse(content=file.read(), status_code=200)
+    except FileNotFoundError:
+        return HTMLResponse(content="<h1>Frontend not found</h1>", status_code=404)
+# API info endpoint
+@app.get("/api")
+async def api_info():
+    return {
+        "message": "Character AI Backend Ready",
+        "version": "1.0.0",
+        "platform": "CPU Optimized",
+        "endpoints": {
+            "chat": "/chat",
+            "models": "/models",
+            "health": "/health",
+            "config": "/config",
+            "inference": "/inference"
+        },
+        "frontend_url": "/"
+    }
 # Run dengan CPU optimizations
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
         app,
         host="0.0.0.0",
         port=port,
         workers=1,
         timeout_keep_alive=30,
         access_log=False

avatar.png CHANGED Viewed

Git LFS Details

SHA256: 4884f5fa8d5d877370006096a0a8f25145067fdafad1c1184c1d2c7f616c26dc
Pointer size: 132 Bytes
Size of remote file: 2.08 MB

Git LFS Details

SHA256: bb434ca30f4ff9e93a3e493ea31e86a727cc2ce35614f1f5f4f997573ca8cf8f
Pointer size: 131 Bytes
Size of remote file: 349 kB

background.png ADDED Viewed

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Character AI Chat - WhatsApp Style</title>
     <style>
         * {
             margin: 0;
@@ -13,446 +13,444 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #000;
             height: 100vh;
             overflow: hidden;
         }
         .chat-container {
-            width: 100%;
-            max-width: 414px;
             height: 100vh;
-            margin: 0 auto;
-            background: #000;
-            position: relative;
             display: flex;
             flex-direction: column;
         }
         /* Header */
         .chat-header {
-            background: rgba(28, 28, 30, 0.95);
-            backdrop-filter: blur(20px);
-            color: #fff;
-            padding: 20px 16px 12px 16px;
             display: flex;
             align-items: center;
-            gap: 12px;
-            border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
-            position: relative;
-            z-index: 100;
-        }
-        .status-bar {
-            position: absolute;
             top: 0;
-            left: 0;
-            right: 0;
-            height: 44px;
-            background: rgba(0, 0, 0, 0.1);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 20px;
-            font-size: 14px;
-            font-weight: 600;
-            color: #fff;
-        }
-        .back-button {
-            background: none;
-            border: none;
-            color: #007AFF;
-            font-size: 17px;
-            cursor: pointer;
-            padding: 8px;
-            margin-left: -8px;
         }
         .avatar {
             width: 40px;
             height: 40px;
-            border-radius: 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            color: #fff;
-            flex-shrink: 0;
-            position: relative;
-        }
-        .avatar img {
-            width: 100%;
-            height: 100%;
-            border-radius: 20px;
-            object-fit: cover;
         }
-        .contact-info {
             flex: 1;
-            display: flex;
-            flex-direction: column;
         }
-        .contact-name {
-            font-size: 17px;
             font-weight: 600;
-            color: #fff;
             margin-bottom: 2px;
         }
-        .contact-status {
             font-size: 13px;
-            color: rgba(255, 255, 255, 0.6);
             display: flex;
             align-items: center;
-            gap: 4px;
         }
-        .online-dot {
-            width: 8px;
-            height: 8px;
-            background: #34C759;
             border-radius: 50%;
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
         }
-        .header-actions {
-            display: flex;
-            gap: 12px;
         }
-        .header-btn {
-            background: none;
-            border: none;
-            color: #007AFF;
-            font-size: 20px;
-            cursor: pointer;
-            padding: 8px;
         }
-        /* Chat Messages */
-        .chat-messages {
             flex: 1;
-            background: #000;
-            background-image:
-                radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
-                radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
             overflow-y: auto;
-            padding: 16px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
         }
-        .message-wrapper {
             display: flex;
-            align-items: flex-end;
-            gap: 6px;
-            margin-bottom: 8px;
         }
-        .message-wrapper.user {
-            flex-direction: row-reverse;
         }
         .message-avatar {
-            width: 26px;
-            height: 26px;
-            border-radius: 13px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            color: #fff;
-            flex-shrink: 0;
         }
-        .message-bubble {
-            max-width: 75%;
             padding: 12px 16px;
             border-radius: 18px;
-            font-size: 16px;
-            line-height: 1.4;
             position: relative;
             word-wrap: break-word;
         }
-        .message-wrapper.user .message-bubble {
-            background: #007AFF;
-            color: #fff;
-            border-bottom-right-radius: 4px;
-            margin-right: 8px;
         }
-        .message-wrapper.bot .message-bubble {
-            background: rgba(44, 44, 46, 0.9);
-            color: #fff;
-            border-bottom-left-radius: 4px;
-            margin-left: 8px;
         }
-        .message-time {
             display: flex;
             align-items: center;
-            gap: 4px;
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.5);
-            margin-top: 4px;
             justify-content: flex-end;
         }
-        .message-wrapper.bot .message-time {
-            justify-content: flex-start;
         }
-        .message-status {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.6);
         }
-        .speed-indicator {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            display: inline-block;
         }
-        .fast { background: #34C759; }
-        .medium { background: #FF9500; }
-        .slow { background: #FF3B30; }
         /* Typing Indicator */
         .typing-indicator {
             display: none;
-            align-items: flex-end;
-            gap: 6px;
-            margin-bottom: 8px;
         }
-        .typing-bubble {
-            background: rgba(44, 44, 46, 0.9);
-            padding: 12px 16px;
-            border-radius: 18px;
-            border-bottom-left-radius: 4px;
-            margin-left: 8px;
             display: flex;
-            align-items: center;
-            gap: 4px;
         }
-        .typing-dot {
             width: 8px;
             height: 8px;
-            background: rgba(255, 255, 255, 0.4);
             border-radius: 50%;
-            animation: typing 1.4s infinite;
         }
-        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing {
-            0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
-            30% { opacity: 1; transform: scale(1); }
         }
-        /* Input Area */
-        .chat-input-container {
-            background: rgba(28, 28, 30, 0.95);
-            backdrop-filter: blur(20px);
-            padding: 12px 16px 32px 16px;
-            border-top: 0.5px solid rgba(255, 255, 255, 0.1);
         }
-        .input-wrapper {
             display: flex;
             align-items: flex-end;
             gap: 8px;
-            background: rgba(44, 44, 46, 0.8);
-            border-radius: 20px;
-            padding: 8px;
         }
-        .chat-input {
-            flex: 1;
             background: none;
             border: none;
-            color: #fff;
             font-size: 16px;
-            padding: 8px 12px;
-            outline: none;
-            resize: none;
-            max-height: 100px;
-            min-height: 20px;
             font-family: inherit;
         }
-        .chat-input::placeholder {
-            color: rgba(255, 255, 255, 0.4);
         }
-        .send-button {
-            background: #007AFF;
-            color: #fff;
             border: none;
-            border-radius: 16px;
-            width: 32px;
-            height: 32px;
             display: flex;
             align-items: center;
             justify-content: center;
-            cursor: pointer;
-            font-size: 14px;
-            flex-shrink: 0;
             transition: all 0.2s;
         }
-        .send-button:hover {
-            background: #0056b3;
         }
-        .send-button:disabled {
-            background: rgba(255, 255, 255, 0.2);
             cursor: not-allowed;
         }
-        /* Settings Panel */
-        .settings-panel {
             position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background: rgba(28, 28, 30, 0.95);
-            backdrop-filter: blur(20px);
-            border-top: 0.5px solid rgba(255, 255, 255, 0.1);
-            padding: 20px;
-            transform: translateY(0%);
-            transition: transform 0.3s ease;
-            z-index: 200;
-        }
-        .settings-panel.hidden {
-            transform: translateY(100%);
-        }
-        .settings-group {
-            margin-bottom: 20px;
-        }
-        .settings-label {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 13px;
-            margin-bottom: 8px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
         }
-        .settings-select {
-            width: 100%;
-            background: rgba(44, 44, 46, 0.8);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            color: #fff;
-            padding: 12px;
-            font-size: 16px;
-            outline: none;
         }
-        .settings-input {
-            width: 100%;
-            background: rgba(44, 44, 46, 0.8);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            color: #fff;
-            padding: 12px;
-            font-size: 16px;
-            outline: none;
         }
-        .settings-input::placeholder {
-            color: rgba(255, 255, 255, 0.4);
         }
-        /* Welcome Message */
-        .welcome-message {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 14px;
-            padding: 20px;
-            background: rgba(44, 44, 46, 0.3);
-            border-radius: 12px;
-            margin: 20px 0;
         }
         /* Responsive */
-        @media (min-width: 415px) {
             .chat-container {
-                border-radius: 20px;
-                margin: 20px auto;
-                height: calc(100vh - 40px);
-                box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
             }
         }
-        /* Custom Scrollbar */
-        .chat-messages::-webkit-scrollbar {
-            width: 2px;
         }
-        .chat-messages::-webkit-scrollbar-track {
             background: transparent;
         }
-        .chat-messages::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 1px;
         }
     </style>
 </head>
 <body>
     <div class="chat-container">
-        <!-- Status Bar -->
-        <div class="status-bar">
-            <span>9:41</span>
-            <span>●●●● WiFi 📶 100%</span>
-        </div>
         <!-- Header -->
         <div class="chat-header">
-            <button class="back-button">‹</button>
-            <div class="avatar">
-                <img src="avatar.png" alt="Character Avatar" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                <div style="display: none;">🤖</div>
-            </div>
-            <div class="contact-info">
-                <div class="contact-name" id="characterName">Sayang</div>
-                <div class="contact-status">
-                    <div class="online-dot"></div>
-                    <span id="statusText">online</span>
-                </div>
             </div>
             <div class="header-actions">
-                <button class="header-btn" onclick="toggleSettings()">⚙️</button>
-                <button class="header-btn">📞</button>
             </div>
         </div>
-        <!-- Settings Panel -->
-        <div class="settings-panel hidden" id="settingsPanel">
-            <div class="settings-group">
                 <div class="settings-label">Model AI</div>
-                <select class="settings-select" id="modelSelect">
-                    <option value="distil-gpt-2">DistilGPT-2 ⚡ (Tercepat)</option>
                     <option value="gpt-2-tinny">GPT-2 Tinny ⚡</option>
                     <option value="bert-tinny">BERT Tinny 🎭</option>
                     <option value="distilbert-base-uncased">DistilBERT 🎭</option>
@@ -465,64 +463,62 @@
                     <option value="gpt-neo">GPT-Neo</option>
                 </select>
             </div>
-            <div class="settings-group">
-                <div class="settings-label">Nama Karakter</div>
-                <input type="text" class="settings-input" id="charNameInput" value="Sayang" placeholder="Masukkan nama karakter">
             </div>
-            <div class="settings-group">
-                <div class="settings-label">Nama Anda</div>
-                <input type="text" class="settings-input" id="userNameInput" value="Kamu" placeholder="Masukkan nama Anda">
             </div>
-            <div class="settings-group">
-                <div class="settings-label">Situasi</div>
-                <select class="settings-select" id="situationSelect">
-                    <option value="Santai">Santai</option>
-                    <option value="Romantis">Romantis</option>
-                    <option value="Serius">Serius</option>
-                    <option value="Bermain">Bermain</option>
-                    <option value="Perhatian">Perhatian</option>
-                </select>
-            </div>
-            <div class="settings-group">
-                <div class="settings-label">Lokasi</div>
-                <select class="settings-select" id="locationSelect">
-                    <option value="Ruang tamu">Ruang tamu</option>
-                    <option value="Kamar tidur">Kamar tidur</option>
-                    <option value="Kafe">Kafe</option>
-                    <option value="Taman">Taman</option>
-                    <option value="Pantai">Pantai</option>
-                    <option value="Rumah">Rumah</option>
-                </select>
             </div>
         </div>
-        <!-- Chat Messages -->
-        <div class="chat-messages" id="chatMessages">
-            <div class="welcome-message">
-                <div style="font-size: 20px; margin-bottom: 8px;">🤖✨</div>
-                <strong>Character AI Chat Ready!</strong><br>
-                Berbicara dengan AI yang disesuaikan dengan karakter dan situasi pilihan Anda.<br><br>
-                <small>Tekan ⚙️ untuk mengatur karakter dan situasi</small>
             </div>
-        </div>
-        <!-- Typing Indicator -->
-        <div class="typing-indicator" id="typingIndicator">
-            <div class="message-avatar">🤖</div>
-            <div class="typing-bubble">
-                <div class="typing-dot"></div>
-                <div class="typing-dot"></div>
-                <div class="typing-dot"></div>
             </div>
         </div>
-        <!-- Input Area -->
-        <div class="chat-input-container">
-            <div class="input-wrapper">
-                <textarea class="chat-input" id="chatInput" placeholder="Ketik pesan..." rows="1"></textarea>
-                <button class="send-button" id="sendButton">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
                     </svg>
                 </button>
             </div>
@@ -530,220 +526,268 @@
     </div>
     <script>
-        // Global variables
-        const chatMessages = document.getElementById('chatMessages');
-        const chatInput = document.getElementById('chatInput');
-        const sendButton = document.getElementById('sendButton');
-        const typingIndicator = document.getElementById('typingIndicator');
-        const settingsPanel = document.getElementById('settingsPanel');
-        const characterName = document.getElementById('characterName');
-        const statusText = document.getElementById('statusText');
-        // Settings elements
-        const modelSelect = document.getElementById('modelSelect');
-        const charNameInput = document.getElementById('charNameInput');
-        const userNameInput = document.getElementById('userNameInput');
-        const situationSelect = document.getElementById('situationSelect');
-        const locationSelect = document.getElementById('locationSelect');
-        // API Configuration
         const API_BASE = window.location.origin;
-        let isSettingsOpen = false;
-        // Utility functions
-        function scrollToBottom() {
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-        function getSpeedClass(time) {
-            if (time < 2000) return 'fast';
-            if (time < 5000) return 'medium';
-            return 'slow';
         }
-        function formatTime() {
-            return new Date().toLocaleTimeString('id-ID', {
                 hour: '2-digit',
                 minute: '2-digit'
             });
         }
-        function toggleSettings() {
-            isSettingsOpen = !isSettingsOpen;
-            if (isSettingsOpen) {
-                settingsPanel.classList.remove('hidden');
-                statusText.textContent = 'mengatur...';
-            } else {
-                settingsPanel.classList.add('hidden');
-                statusText.textContent = 'online';
-            }
         }
-        function updateCharacterName() {
-            const name = charNameInput.value.trim() || 'Sayang';
-            characterName.textContent = name;
         }
-        function addMessage(content, isUser = false, responseTime = null, model = null) {
-            const messageWrapper = document.createElement('div');
-            messageWrapper.className = `message-wrapper ${isUser ? 'user' : 'bot'}`;
-            const avatar = document.createElement('div');
-            avatar.className = 'message-avatar';
-            avatar.textContent = isUser ? '👤' : '🤖';
-            const bubble = document.createElement('div');
-            bubble.className = 'message-bubble';
-            bubble.textContent = content;
-            const timeElement = document.createElement('div');
-            timeElement.className = 'message-time';
-            timeElement.innerHTML = formatTime();
-            if (responseTime && !isUser) {
-                const speedClass = getSpeedClass(responseTime);
-                timeElement.innerHTML += ` <span class="speed-indicator ${speedClass}"></span> ${responseTime}ms`;
-                if (model) {
-                    timeElement.innerHTML += ` • ${model}`;
-                }
-            }
-            bubble.appendChild(timeElement);
-            if (!isUser) {
-                messageWrapper.appendChild(avatar);
-            }
-            messageWrapper.appendChild(bubble);
-            chatMessages.appendChild(messageWrapper);
-            scrollToBottom();
         }
         function showTyping() {
-            typingIndicator.style.display = 'flex';
-            statusText.textContent = 'mengetik...';
-            scrollToBottom();
         }
         function hideTyping() {
-            typingIndicator.style.display = 'none';
-            statusText.textContent = 'online';
         }
         async function sendMessage() {
-            const message = chatInput.value.trim();
             if (!message) return;
-            // Disable input
-            chatInput.disabled = true;
-            sendButton.disabled = true;
             // Add user message
             addMessage(message, true);
-            chatInput.value = '';
             showTyping();
-            const startTime = Date.now();
             try {
-                const requestData = {
-                    message: message,
-                    model: modelSelect.value,
-                    situation: situationSelect.value,
-                    location: locationSelect.value,
-                    char_name: charNameInput.value.trim() || 'Sayang',
-                    user_name: userNameInput.value.trim() || 'Kamu',
-                    max_length: 200
-                };
                 const response = await fetch(`${API_BASE}/chat`, {
                     method: 'POST',
                     headers: {
-                        'Content-Type': 'application/json'
                     },
-                    body: JSON.stringify(requestData)
                 });
                 const data = await response.json();
-                const responseTime = Date.now() - startTime;
                 hideTyping();
                 if (data.status === 'success') {
-                    addMessage(data.response, false, responseTime, data.model);
                 } else {
-                    addMessage('Maaf, sedang ada masalah. Coba lagi ya 🙏', false, responseTime);
                 }
             } catch (error) {
-                const responseTime = Date.now() - startTime;
                 hideTyping();
-                addMessage('Koneksi bermasalah, coba lagi nanti 😅', false, responseTime);
                 console.error('Error:', error);
             }
-            // Re-enable input
-            chatInput.disabled = false;
-            sendButton.disabled = false;
-            chatInput.focus();
-            autoResize();
-        }
-        function autoResize() {
-            chatInput.style.height = 'auto';
-            chatInput.style.height = chatInput.scrollHeight + 'px';
         }
-        // Event listeners
-        sendButton.addEventListener('click', sendMessage);
-        chatInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendMessage();
-            }
-        });
-        chatInput.addEventListener('input', autoResize);
-        // Settings event listeners
-        charNameInput.addEventListener('input', updateCharacterName);
-        modelSelect.addEventListener('change', () => {
-            const selectedOption = modelSelect.options[modelSelect.selectedIndex];
-            statusText.textContent = `Model: ${selectedOption.text}`;
-            setTimeout(() => {
-                if (!isSettingsOpen) statusText.textContent = 'online';
-            }, 2000);
         });
-        // Close settings when clicking outside
-        document.addEventListener('click', (e) => {
-            if (isSettingsOpen && !settingsPanel.contains(e.target) && !e.target.closest('.header-btn')) {
-                toggleSettings();
             }
         });
-        // Initialize
-        window.addEventListener('load', () => {
-            chatInput.focus();
-            updateCharacterName();
-            // Add initial greeting
-            setTimeout(() => {
-                addMessage(`Halo ${userNameInput.value}! Aku ${charNameInput.value} 😊 Apa kabar hari ini?`, false, 1200, 'Character AI');
-            }, 1000);
-        });
-        // Prevent zoom on double tap (iOS)
-        let lastTouchEnd = 0;
-        document.addEventListener('touchend', (event) => {
-            const now = (new Date()).getTime();
-            if (now - lastTouchEnd <= 300) {
-                event.preventDefault();
-            }
-            lastTouchEnd = now;
-        }, false);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Character AI Chat</title>
     <style>
         * {
             margin: 0;
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: url('background.png'), linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background-size: cover;
+            background-attachment: fixed;
             height: 100vh;
             overflow: hidden;
         }
         .chat-container {
             height: 100vh;
             display: flex;
             flex-direction: column;
+            max-width: 100%;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
         }
         /* Header */
         .chat-header {
+            background: #075e54;
+            color: white;
+            padding: 10px 16px;
             display: flex;
             align-items: center;
+            position: sticky;
             top: 0;
+            z-index: 100;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
         }
         .avatar {
             width: 40px;
             height: 40px;
+            border-radius: 50%;
+            margin-right: 12px;
+            background: url('avatar.png'), linear-gradient(45deg, #25d366, #128c7e);
+            background-size: cover;
+            background-position: center;
         }
+        .header-info {
             flex: 1;
         }
+        .char-name {
+            font-size: 16px;
             font-weight: 600;
             margin-bottom: 2px;
         }
+        .status {
             font-size: 13px;
+            opacity: 0.8;
+            color: #dcf8c6;
+        }
+        .header-actions {
             display: flex;
             align-items: center;
+            gap: 20px;
         }
+        .three-dots {
+            cursor: pointer;
+            padding: 8px;
             border-radius: 50%;
+            transition: background 0.2s;
         }
+        .three-dots:hover {
+            background: rgba(255,255,255,0.1);
         }
+        /* Settings Popup */
+        .settings-popup {
+            display: none;
+            position: absolute;
+            top: 60px;
+            right: 16px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+            min-width: 280px;
+            z-index: 1000;
+            padding: 8px 0;
         }
+        .settings-popup.show {
+            display: block;
+            animation: popupIn 0.2s ease-out;
         }
+        @keyframes popupIn {
+            from { opacity: 0; transform: translateY(-10px) scale(0.95); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        .settings-section {
+            padding: 12px 20px;
+            border-bottom: 1px solid #eee;
+        }
+        .settings-section:last-child {
+            border-bottom: none;
+        }
+        .settings-label {
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+        .model-select, .input-field {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 14px;
+            background: #f8f9fa;
+        }
+        .input-field {
+            margin-top: 4px;
+        }
+        /* Chat Body */
+        .chat-body {
             flex: 1;
             overflow-y: auto;
+            padding: 20px 16px;
+            background: url('background.png'),
+                        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3), transparent),
+                        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3), transparent),
+                        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background-size: cover, 400px 400px, 400px 400px, cover;
+            background-attachment: fixed;
         }
+        /* Message Bubbles */
+        .message {
             display: flex;
+            margin-bottom: 12px;
+            animation: messageSlide 0.3s ease-out;
+        }
+        @keyframes messageSlide {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message.user {
+            justify-content: flex-end;
         }
+        .message.char {
+            justify-content: flex-start;
         }
         .message-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            margin: 0 8px;
+            background: url('avatar.png'), linear-gradient(45deg, #25d366, #128c7e);
+            background-size: cover;
+            background-position: center;
+            align-self: flex-end;
+        }
+        .message.user .message-avatar {
+            background: linear-gradient(45deg, #0084ff, #00a0ff);
         }
+        .bubble {
+            max-width: 70%;
             padding: 12px 16px;
             border-radius: 18px;
             position: relative;
             word-wrap: break-word;
+            backdrop-filter: blur(10px);
+        }
+        .message.user .bubble {
+            background: linear-gradient(135deg, #0084ff, #00a0ff);
+            color: white;
+            border-bottom-right-radius: 6px;
         }
+        .message.char .bubble {
+            background: rgba(255, 255, 255, 0.95);
+            color: #333;
+            border-bottom-left-radius: 6px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
         }
+        .message-text {
+            font-size: 16px;
+            line-height: 1.4;
+            margin-bottom: 6px;
         }
+        .message-meta {
             display: flex;
             align-items: center;
             justify-content: flex-end;
+            gap: 4px;
+            font-size: 12px;
+            opacity: 0.7;
         }
+        .timestamp {
+            color: inherit;
         }
+        .checkmarks {
+            color: #4fc3f7;
+            font-weight: bold;
         }
+        .message.char .checkmarks {
+            display: none;
         }
         /* Typing Indicator */
         .typing-indicator {
             display: none;
+            align-items: center;
+            margin-bottom: 12px;
         }
+        .typing-indicator.show {
             display: flex;
         }
+        .typing-dots {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 18px;
+            padding: 12px 16px;
+            margin-left: 48px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .typing-dots span {
+            display: inline-block;
             width: 8px;
             height: 8px;
             border-radius: 50%;
+            background: #999;
+            margin-right: 4px;
+            animation: typing 2s infinite;
         }
+        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+            30% { transform: translateY(-10px); opacity: 1; }
         }
+        /* Footer */
+        .chat-footer {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 12px 16px;
+            border-top: 1px solid rgba(0,0,0,0.1);
+            position: sticky;
+            bottom: 0;
         }
+        .input-container {
             display: flex;
             align-items: flex-end;
             gap: 8px;
         }
+        .emoji-btn {
             background: none;
             border: none;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            transition: background 0.2s;
+        }
+        .emoji-btn:hover {
+            background: rgba(0,0,0,0.05);
+        }
+        .message-input {
+            flex: 1;
+            min-height: 40px;
+            max-height: 120px;
+            padding: 10px 16px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
             font-size: 16px;
             font-family: inherit;
+            resize: none;
+            outline: none;
+            background: white;
+            transition: border-color 0.2s;
         }
+        .message-input:focus {
+            border-color: #075e54;
         }
+        .send-btn {
+            background: #075e54;
+            color: white;
             border: none;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.2s;
+            font-size: 18px;
         }
+        .send-btn:hover {
+            background: #128c7e;
+            transform: scale(1.05);
         }
+        .send-btn:disabled {
+            background: #ccc;
             cursor: not-allowed;
+            transform: none;
         }
+        /* Emoji Picker */
+        .emoji-picker {
+            display: none;
             position: absolute;
+            bottom: 70px;
+            left: 16px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+            padding: 16px;
+            max-width: 300px;
+            z-index: 1000;
         }
+        .emoji-picker.show {
+            display: block;
+            animation: popupIn 0.2s ease-out;
         }
+        .emoji-grid {
+            display: grid;
+            grid-template-columns: repeat(8, 1fr);
+            gap: 8px;
+            max-height: 200px;
+            overflow-y: auto;
         }
+        .emoji-item {
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 8px;
+            transition: background 0.2s;
         }
+        .emoji-item:hover {
+            background: #f0f0f0;
         }
         /* Responsive */
+        @media (max-width: 768px) {
             .chat-container {
+                height: 100vh;
+            }
+            .bubble {
+                max-width: 85%;
+            }
+            .settings-popup {
+                right: 8px;
+                min-width: 260px;
             }
         }
+        /* Scrollbar Styling */
+        .chat-body::-webkit-scrollbar {
+            width: 6px;
         }
+        .chat-body::-webkit-scrollbar-track {
             background: transparent;
         }
+        .chat-body::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.2);
+            border-radius: 3px;
+        }
+        .chat-body::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.3);
         }
     </style>
 </head>
 <body>
     <div class="chat-container">
         <!-- Header -->
         <div class="chat-header">
+            <div class="avatar"></div>
+            <div class="header-info">
+                <div class="char-name" id="charName">Sayang</div>
+                <div class="status" id="status">online</div>
             </div>
             <div class="header-actions">
+                <div class="three-dots" onclick="toggleSettings()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <circle cx="12" cy="5" r="2"/>
+                        <circle cx="12" cy="12" r="2"/>
+                        <circle cx="12" cy="19" r="2"/>
+                    </svg>
+                </div>
             </div>
         </div>
+        <!-- Settings Popup -->
+        <div class="settings-popup" id="settingsPopup">
+            <div class="settings-section">
                 <div class="settings-label">Model AI</div>
+                <select class="model-select" id="modelSelect">
+                    <option value="distil-gpt-2">DistilGPT-2 ⚡</option>
                     <option value="gpt-2-tinny">GPT-2 Tinny ⚡</option>
                     <option value="bert-tinny">BERT Tinny 🎭</option>
                     <option value="distilbert-base-uncased">DistilBERT 🎭</option>
                     <option value="gpt-neo">GPT-Neo</option>
                 </select>
             </div>
+            <div class="settings-section">
+                <div class="settings-label">Karakter</div>
+                <input type="text" class="input-field" id="charNameInput" placeholder="Nama karakter" value="Sayang">
+                <input type="text" class="input-field" id="userNameInput" placeholder="Nama kamu" value="Kamu">
             </div>
+            <div class="settings-section">
+                <div class="settings-label">Situasi & Lokasi</div>
+                <input type="text" class="input-field" id="situationInput" placeholder="Situasi" value="Santai">
+                <input type="text" class="input-field" id="locationInput" placeholder="Lokasi" value="Ruang tamu">
             </div>
+            <div class="settings-section">
+                <div class="settings-label">Panjang Pesan</div>
+                <input type="range" class="input-field" id="maxLengthRange" min="50" max="300" value="150">
+                <div style="font-size: 12px; color: #666; margin-top: 4px;">
+                    <span id="maxLengthValue">150</span> karakter maksimal
+                </div>
             </div>
         </div>
+        <!-- Chat Body -->
+        <div class="chat-body" id="chatBody">
+            <!-- Welcome Message -->
+            <div class="message char">
+                <div class="message-avatar"></div>
+                <div class="bubble">
+                    <div class="message-text">Hai! Aku siap ngobrol sama kamu nih. Mau bahas apa hari ini? 😊</div>
+                    <div class="message-meta">
+                        <span class="timestamp" id="welcome-time"></span>
+                    </div>
+                </div>
             </div>
+            <!-- Typing Indicator -->
+            <div class="typing-indicator" id="typingIndicator">
+                <div class="message-avatar"></div>
+                <div class="typing-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
             </div>
         </div>
+        <!-- Footer -->
+        <div class="chat-footer">
+            <!-- Emoji Picker -->
+            <div class="emoji-picker" id="emojiPicker">
+                <div class="emoji-grid" id="emojiGrid"></div>
+            </div>
+            <div class="input-container">
+                <button class="emoji-btn" onclick="toggleEmojiPicker()">😊</button>
+                <textarea class="message-input" id="messageInput" placeholder="Ketik pesan..." rows="1"></textarea>
+                <button class="send-btn" id="sendBtn" onclick="sendMessage()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/>
                     </svg>
                 </button>
             </div>
     </div>
     <script>
+        // Configuration
         const API_BASE = window.location.origin;
+        let isTyping = false;
+        let currentSettings = {
+            model: 'distil-gpt-2',
+            charName: 'Sayang',
+            userName: 'Kamu',
+            situation: 'Santai',
+            location: 'Ruang tamu',
+            maxLength: 150
+        };
+        // Emoji list
+        const emojis = [
+            '😊', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
+            '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗',
+            '😚', '😙', '😋', '😛', '😜', '🤪', '😝', '🤑',
+            '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
+            '😶', '😏', '😒', '🙄', '😬', '🤥', '😔', '😪',
+            '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧',
+            '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '😎',
+            '🤓', '🧐', '😕', '😟', '🙁', '☹️', '😮', '😯',
+            '😲', '😳', '🥺', '😦', '😧', '😨', '😰', '😥',
+            '😢', '😭', '😱', '😖', '😣', '😞', '😓', '😩',
+            '😫', '🥱', '😤', '😡', '😠', '🤬', '😈', '👿',
+            '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽'
+        ];
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeApp();
+            loadEmojiPicker();
+            setupEventListeners();
+            setWelcomeTime();
+        });
+        function initializeApp() {
+            // Load settings from elements
+            document.getElementById('charName').textContent = currentSettings.charName;
+            document.getElementById('charNameInput').value = currentSettings.charName;
+            document.getElementById('userNameInput').value = currentSettings.userName;
+            document.getElementById('situationInput').value = currentSettings.situation;
+            document.getElementById('locationInput').value = currentSettings.location;
+            document.getElementById('maxLengthRange').value = currentSettings.maxLength;
+            document.getElementById('maxLengthValue').textContent = currentSettings.maxLength;
+            document.getElementById('modelSelect').value = currentSettings.model;
+        }
+        function setupEventListeners() {
+            // Message input
+            const messageInput = document.getElementById('messageInput');
+            messageInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            messageInput.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+            });
+            // Settings inputs
+            document.getElementById('charNameInput').addEventListener('input', updateCharName);
+            document.getElementById('maxLengthRange').addEventListener('input', updateMaxLength);
+            // Model select
+            document.getElementById('modelSelect').addEventListener('change', function() {
+                currentSettings.model = this.value;
+            });
+            // Click outside to close popups
+            document.addEventListener('click', function(e) {
+                if (!e.target.closest('.settings-popup') && !e.target.closest('.three-dots')) {
+                    document.getElementById('settingsPopup').classList.remove('show');
+                }
+                if (!e.target.closest('.emoji-picker') && !e.target.closest('.emoji-btn')) {
+                    document.getElementById('emojiPicker').classList.remove('show');
+                }
+            });
         }
+        function setWelcomeTime() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('id-ID', {
                 hour: '2-digit',
                 minute: '2-digit'
             });
+            document.getElementById('welcome-time').textContent = timeString;
         }
+        function updateCharName() {
+            const newName = document.getElementById('charNameInput').value || 'Sayang';
+            currentSettings.charName = newName;
+            document.getElementById('charName').textContent = newName;
         }
+        function updateMaxLength() {
+            const value = document.getElementById('maxLengthRange').value;
+            currentSettings.maxLength = parseInt(value);
+            document.getElementById('maxLengthValue').textContent = value;
         }
+        function toggleSettings() {
+            const popup = document.getElementById('settingsPopup');
+            popup.classList.toggle('show');
+        }
+        function toggleEmojiPicker() {
+            const picker = document.getElementById('emojiPicker');
+            picker.classList.toggle('show');
+        }
+        function loadEmojiPicker() {
+            const grid = document.getElementById('emojiGrid');
+            emojis.forEach(emoji => {
+                const button = document.createElement('button');
+                button.className = 'emoji-item';
+                button.textContent = emoji;
+                button.onclick = () => insertEmoji(emoji);
+                grid.appendChild(button);
+            });
+        }
+        function insertEmoji(emoji) {
+            const input = document.getElementById('messageInput');
+            const start = input.selectionStart;
+            const end = input.selectionEnd;
+            const text = input.value;
+            input.value = text.substring(0, start) + emoji + text.substring(end);
+            input.selectionStart = input.selectionEnd = start + emoji.length;
+            input.focus();
+            document.getElementById('emojiPicker').classList.remove('show');
+        }
+        function getCurrentTime() {
+            const now = new Date();
+            return now.toLocaleTimeString('id-ID', {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        }
+        function addMessage(text, isUser = false, showTime = true) {
+            const chatBody = document.getElementById('chatBody');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${isUser ? 'user' : 'char'}`;
+            const time = showTime ? getCurrentTime() : '';
+            const checkmarks = isUser ? '<span class="checkmarks">✓✓</span>' : '';
+            messageDiv.innerHTML = `
+                <div class="message-avatar"></div>
+                <div class="bubble">
+                    <div class="message-text">${text}</div>
+                    <div class="message-meta">
+                        <span class="timestamp">${time}</span>
+                        ${checkmarks}
+                    </div>
+                </div>
+            `;
+            chatBody.appendChild(messageDiv);
+            chatBody.scrollTop = chatBody.scrollHeight;
         }
         function showTyping() {
+            if (isTyping) return;
+            isTyping = true;
+            document.getElementById('status').textContent = 'mengetik...';
+            document.getElementById('typingIndicator').classList.add('show');
+            const chatBody = document.getElementById('chatBody');
+            chatBody.scrollTop = chatBody.scrollHeight;
         }
         function hideTyping() {
+            if (!isTyping) return;
+            isTyping = false;
+            document.getElementById('status').textContent = 'online';
+            document.getElementById('typingIndicator').classList.remove('show');
         }
         async function sendMessage() {
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
             if (!message) return;
+            // Update settings from inputs
+            currentSettings.charName = document.getElementById('charNameInput').value || 'Sayang';
+            currentSettings.userName = document.getElementById('userNameInput').value || 'Kamu';
+            currentSettings.situation = document.getElementById('situationInput').value || 'Santai';
+            currentSettings.location = document.getElementById('locationInput').value || 'Ruang tamu';
             // Add user message
             addMessage(message, true);
+            input.value = '';
+            input.style.height = 'auto';
+            // Show typing
             showTyping();
+            // Disable send button
+            const sendBtn = document.getElementById('sendBtn');
+            sendBtn.disabled = true;
             try {
                 const response = await fetch(`${API_BASE}/chat`, {
                     method: 'POST',
                     headers: {
+                        'Content-Type': 'application/json',
                     },
+                    body: JSON.stringify({
+                        message: message,
+                        model: currentSettings.model,
+                        situation: currentSettings.situation,
+                        location: currentSettings.location,
+                        char_name: currentSettings.charName,
+                        user_name: currentSettings.userName,
+                        max_length: currentSettings.maxLength
+                    })
                 });
                 const data = await response.json();
+                // Simulate typing delay
+                await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
                 hideTyping();
                 if (data.status === 'success') {
+                    addMessage(data.response);
                 } else {
+                    addMessage('Maaf, ada masalah dengan sistem. Coba lagi ya! 😅');
                 }
             } catch (error) {
                 hideTyping();
                 console.error('Error:', error);
+                addMessage('Ups, koneksi bermasalah. Coba lagi nanti ya! 🔄');
             }
+            // Re-enable send button
+            sendBtn.disabled = false;
         }
+        // Handle online/offline status
+        window.addEventListener('online', function() {
+            document.getElementById('status').textContent = 'online';
         });
+        window.addEventListener('offline', function() {
+            if (!isTyping) {
+                document.getElementById('status').textContent = 'offline';
             }
         });
     </script>
 </body>
 </html>