Spaces:

Donyking1818
/

BuilderBot.app

Paused

App Files Files Community

Donyking1818 commited on Feb 2

Commit

cb00eaf

verified ·

1 Parent(s): a9c1754

Update index.js

Browse files

Files changed (1) hide show

index.js +698 -333

index.js CHANGED Viewed

@@ -2,520 +2,887 @@ const {
     default: makeWASocket,
     DisconnectReason,
     useMultiFileAuthState,
-    fetchLatestBaileysVersion
 } = require('@whiskeysockets/baileys');
 const QRCode = require('qrcode-terminal');
 const qrcode = require('qrcode');
 const axios = require('axios');
 const fs = require('fs');
 const path = require('path');
 const http = require('http');
 // ===== CONFIG =====
 const PORT = process.env.PORT || 7860;
 const HF_TOKEN = process.env.HF_TOKEN || '';
-const AUTH_FOLDER = path.join(__dirname, 'auth_info');
-// State management
 let sock = null;
 let qrCodeData = null;
 let connectionStatus = 'disconnected';
-let lastQRTime = null;
-// ===== HTTP SERVER (Web Interface + API) =====
-const server = http.createServer(async (req, res) => {
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('Content-Type', 'application/json');
-    const url = req.url;
-    // Health check
-    if (url === '/') {
-        res.end(JSON.stringify({
-            status: 'running',
-            bot: 'WhatsApp Bot',
-            connection: connectionStatus,
-            timestamp: new Date().toISOString()
-        }));
-    }
-    // Get QR Code (Base64 image)
-    else if (url === '/qr') {
-        if (qrCodeData && connectionStatus === 'qr_ready') {
-            res.setHeader('Content-Type', 'image/png');
-            const qrBuffer = await qrcode.toBuffer(qrCodeData, {
-                type: 'png',
-                width: 400,
-                margin: 2
-            });
-            res.end(qrBuffer);
-        } else {
-            res.end(JSON.stringify({
-                status: connectionStatus,
-                message: connectionStatus === 'connected'
-                    ? 'Sudah terhubung! Tidak perlu QR.'
-                    : 'QR belum siap, tunggu sebentar...',
-                timestamp: new Date().toISOString()
-            }));
-        }
-    }
-    // Get Status
-    else if (url === '/status') {
-        res.end(JSON.stringify({
-            status: connectionStatus,
-            qr_available: !!qrCodeData,
-            qr_age: lastQRTime ? Math.floor((Date.now() - lastQRTime) / 1000) : null,
-            session_exists: fs.existsSync(AUTH_FOLDER),
-            timestamp: new Date().toISOString()
-        }));
-    }
-    // Force reconnect
-    else if (url === '/reconnect') {
-        if (sock) {
-            sock.logout();
-            res.end(JSON.stringify({ message: 'Reconnecting...' }));
-        } else {
-            res.end(JSON.stringify({ message: 'Bot not initialized' }));
-        }
-    }
-    // HTML Interface
-    else if (url === '/panel' || url === '/web') {
-        res.setHeader('Content-Type', 'text/html');
-        res.end(getWebInterface());
-    }
-    else {
-        res.writeHead(404);
-        res.end(JSON.stringify({ error: 'Not found' }));
-    }
-});
-server.listen(PORT, () => {
-    console.log(`🌐 Web server running on port ${PORT}`);
-    console.log(`📱 Panel: http://localhost:${PORT}/panel`);
-    console.log(`📊 Status: http://localhost:${PORT}/status`);
-    console.log(`📷 QR Code: http://localhost:${PORT}/qr`);
-});
-// ===== WEB INTERFACE HTML =====
-function getWebInterface() {
-    return `
 <!DOCTYPE html>
 <html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WhatsApp Bot Control Panel</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: 'Segoe UI', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
-            padding: 20px;
-            color: white;
         }
         .container {
-            max-width: 600px;
             margin: 0 auto;
         }
-        h1 { text-align: center; margin-bottom: 30px; font-size: 2em; }
-        .card {
-            background: rgba(255,255,255,0.1);
             backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 25px;
-            margin-bottom: 20px;
-            border: 1px solid rgba(255,255,255,0.2);
         }
-        .status-box {
             display: flex;
             align-items: center;
-            gap: 15px;
-            margin-bottom: 20px;
         }
         .status-icon {
-            width: 60px; height: 60px;
             border-radius: 50%;
             display: flex; align-items: center; justify-content: center;
-            font-size: 28px;
         }
-        .connected { background: #4CAF50; }
-        .disconnected { background: #f44336; }
-        .qr_ready { background: #FF9800; animation: pulse 2s infinite; }
         @keyframes pulse {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.05); }
         }
-        .qr-container {
             text-align: center;
             padding: 20px;
         }
-        .qr-container img {
-            max-width: 300px;
-            border-radius: 15px;
-            background: white;
-            padding: 15px;
         }
         .btn {
-            width: 100%;
-            padding: 15px;
             border: none;
-            border-radius: 12px;
             font-size: 16px;
             font-weight: bold;
             cursor: pointer;
-            margin-top: 10px;
             transition: all 0.3s;
         }
-        .btn-primary { background: #4CAF50; color: white; }
-        .btn-warning { background: #FF9800; color: white; }
-        .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
-        .info-text {
-            background: rgba(0,0,0,0.2);
-            padding: 15px;
-            border-radius: 10px;
-            margin-top: 15px;
-            font-size: 14px;
-            line-height: 1.6;
         }
-        .mode-indicator {
-            display: inline-block;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 12px;
             font-weight: bold;
-            margin-top: 10px;
         }
-        .mode-qr { background: #FF9800; }
-        .mode-session { background: #2196F3; }
-        .logs {
-            background: rgba(0,0,0,0.3);
             padding: 15px;
-            border-radius: 10px;
-            font-family: monospace;
-            font-size: 12px;
             max-height: 200px;
             overflow-y: auto;
-            margin-top: 15px;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>🤖 WhatsApp Bot Panel</h1>
-        <div class="card">
-            <div class="status-box">
-                <div class="status-icon" id="statusIcon">⏳</div>
-                <div>
-                    <h2 id="statusTitle">Memuat...</h2>
-                    <p id="statusDesc">Sedang cek koneksi...</p>
-                    <span class="mode-indicator" id="modeBadge">-</span>
                 </div>
             </div>
-            <div class="qr-container" id="qrContainer" style="display:none;">
-                <h3>📱 Scan QR Code Ini</h3>
-                <p style="margin-bottom:15px;opacity:0.9;">Buka WhatsApp → Menu → Linked Devices → Link a Device</p>
-                <img id="qrImage" src="" alt="QR Code">
-                <p style="margin-top:10px;font-size:12px;opacity:0.7;">QR Refresh otomatis setiap 20 detik</p>
             </div>
-            <div id="connectedPanel" style="display:none;">
-                <div style="text-align:center;padding:20px;">
-                    <div style="font-size:60px;margin-bottom:10px;">✅</div>
-                    <h3>Bot Terhubung!</h3>
-                    <p>Siap menerima pesan WhatsApp</p>
                 </div>
-                <button class="btn btn-warning" onclick="reconnect()">🔄 Reset & Scan Ulang</button>
             </div>
-            <div class="logs" id="logs"></div>
-        </div>
-        <div class="card">
-            <h3>📖 Cara Pakai:</h3>
-            <div class="info-text">
-                <strong>Mode 1 - QR (Pertama Kali):</strong><br>
-                Scan QR code di atas pakai WhatsApp lu<br><br>
-                <strong>Mode 2 - Session (Otomatis):</strong><br>
-                Setelah scan pertama, bot auto-connect tanpa QR lagi<br><br>
-                <strong>Command Bot:</strong><br>
-                • Kirim <code>!ai [pertanyaan]</code> → Tanya AI<br>
-                • Kirim <code>!help</code> → Bantuan<br>
-                • Kirim foto → AI analyze gambar
             </div>
         </div>
     </div>
     <script>
-        let refreshInterval;
         async function checkStatus() {
             try {
-                const res = await fetch('/status');
                 const data = await res.json();
                 updateUI(data);
             } catch (e) {
-                addLog('Error: ' + e.message);
             }
         }
         function updateUI(data) {
             const icon = document.getElementById('statusIcon');
             const title = document.getElementById('statusTitle');
-            const desc = document.getElementById('statusDesc');
-            const modeBadge = document.getElementById('modeBadge');
-            const qrContainer = document.getElementById('qrContainer');
-            const connectedPanel = document.getElementById('connectedPanel');
             // Update status display
-            if (data.status === 'connected') {
                 icon.className = 'status-icon connected';
                 icon.textContent = '✓';
                 title.textContent = 'Terhubung';
-                desc.textContent = 'Bot aktif & siap pakai';
-                modeBadge.className = 'mode-indicator mode-session';
-                modeBadge.textContent = 'MODE: SESSION (AUTO)';
-                qrContainer.style.display = 'none';
-                connectedPanel.style.display = 'block';
-                addLog('✅ Bot terhubung ke WhatsApp');
-            }
-            else if (data.status === 'qr_ready') {
-                icon.className = 'status-icon qr_ready';
                 icon.textContent = '📱';
-                title.textContent = 'Menunggu Scan QR';
-                desc.textContent = 'Scan QR code untuk pairing';
-                modeBadge.className = 'mode-indicator mode-qr';
-                modeBadge.textContent = 'MODE: QR PAIRING';
-                qrContainer.style.display = 'block';
-                connectedPanel.style.display = 'none';
-                document.getElementById('qrImage').src = '/qr?' + Date.now();
-                addLog('📱 QR Code tersedia, silakan scan');
-            }
-            else {
                 icon.className = 'status-icon disconnected';
-                icon.textContent = '✕';
-                title.textContent = 'Terputus';
-                desc.textContent = 'Menghubungkan ulang...';
-                modeBadge.className = 'mode-indicator';
-                modeBadge.textContent = 'MODE: -';
-                qrContainer.style.display = 'none';
-                connectedPanel.style.display = 'none';
             }
         }
-        function addLog(msg) {
-            const logs = document.getElementById('logs');
-            const time = new Date().toLocaleTimeString();
-            logs.innerHTML += \`[\\${time}] \\${msg}<br>\`;
-            logs.scrollTop = logs.scrollHeight;
         }
-        async function reconnect() {
-            if (!confirm('Yakin mau reset? Perlu scan QR lagi.')) return;
-            addLog('🔄 Mereset koneksi...');
-            await fetch('/reconnect');
             setTimeout(checkStatus, 2000);
         }
-        // Auto refresh
         checkStatus();
-        refreshInterval = setInterval(checkStatus, 3000);
-        addLog('🚀 Panel dimuat');
     </script>
 </body>
 </html>
-    `;
-}
-// ===== WHATSAPP BOT CORE =====
-async function startBot() {
-    console.log('🚀 Memulai WhatsApp Bot...');
-    // Cek apakah ada session tersimpan
-    const hasSession = fs.existsSync(AUTH_FOLDER) &&
-                       fs.readdirSync(AUTH_FOLDER).length > 0;
-    if (hasSession) {
-        console.log('📂 Session ditemukan! Mode: AUTO-CONNECT');
-        console.log('🔄 Menghubungkan ke WhatsApp...');
     } else {
-        console.log('📱 Session tidak ditemukan! Mode: QR PAIRING');
-        console.log('⚠️  Tunggu QR code muncul...');
     }
     const { state, saveCreds } = await useMultiFileAuthState(AUTH_FOLDER);
     const { version } = await fetchLatestBaileysVersion();
     sock = makeWASocket({
         version,
         printQRInTerminal: true,
         auth: state,
         browser: ['Ubuntu', 'Chrome', '20.0.04'],
         generateHighQualityLinkPreview: true,
         syncFullHistory: false,
         markOnlineOnConnect: true,
-        keepAliveIntervalMs: 30000, // Keep alive setiap 30 detik
         connectTimeoutMs: 60000,
         defaultQueryTimeoutMs: 60000,
     });
     // Event handlers
     sock.ev.on('connection.update', async (update) => {
         const { connection, lastDisconnect, qr } = update;
-        // QR Code muncul
         if (qr) {
-            console.log('\n🔥 QR CODE BARU:');
-            QRCode.generate(qr, { small: true });
             qrCodeData = qr;
-            lastQRTime = Date.now();
             connectionStatus = 'qr_ready';
-            console.log('📷 QR juga tersedia di: /qr');
-            console.log('🌐 Panel kontrol: /panel');
         }
-        // Koneksi berubah
         if (connection === 'open') {
-            console.log('\n✅ BERHASIL! Bot terhubung ke WhatsApp');
-            console.log('📱 Nomor:', sock.user.id.split(':')[0]);
-            console.log('🤖 Siap menerima pesan!\n');
             connectionStatus = 'connected';
             qrCodeData = null;
-            // Kirim notifikasi ke diri sendiri (opsional)
             try {
                 await sock.sendMessage(sock.user.id, {
-                    text: '🤖 *Bot Aktif!*\n\nBot sudah terhubung dan siap digunakan.\n\nKetik *!help* untuk bantuan.'
                 });
-            } catch (e) {
-                // Ignore error
-            }
         }
-        // Koneksi tertutup
         else if (connection === 'close') {
             const statusCode = lastDisconnect?.error?.output?.statusCode;
             const shouldReconnect = statusCode !== DisconnectReason.loggedOut;
-            console.log('\n❌ Koneksi terputus:', statusCode);
             connectionStatus = 'disconnected';
-            qrCodeData = null;
             if (shouldReconnect) {
-                console.log('🔄 Reconnect otomatis dalam 5 detik...');
                 setTimeout(startBot, 5000);
-            } else {
-                console.log('🚪 Logged out. Hapus folder auth_info untuk scan ulang.');
             }
         }
     });
-    // Save credentials
     sock.ev.on('creds.update', saveCreds);
-    // Handle messages
     sock.ev.on('messages.upsert', async ({ messages, type }) => {
         if (type !== 'notify') return;
         const msg = messages[0];
         if (!msg.message || msg.key.fromMe) return;
         const sender = msg.key.remoteJid;
-        const isGroup = sender.endsWith('@g.us');
-        const senderName = msg.pushName || 'User';
-        // Extract text
-        let text = '';
-        if (msg.message.conversation) {
-            text = msg.message.conversation;
-        } else if (msg.message.extendedTextMessage?.text) {
-            text = msg.message.extendedTextMessage.text;
-        } else if (msg.message.imageMessage?.caption) {
-            text = msg.message.imageMessage.caption;
-        }
-        console.log(`\n📩 Pesan dari ${senderName} (${isGroup ? 'Group' : 'Private'}):`);
-        console.log(`   "${text.substring(0, 50)}${text.length > 50 ? '...' : ''}"`);
-        // Command handler
         if (text.startsWith('!')) {
-            await handleCommand(sock, msg, sender, text, senderName);
         }
-        // Auto AI response (optional - reply semua pesan)
-        else if (!isGroup) {
             await handleAIResponse(sock, sender, text);
         }
     });
 }
-// ===== COMMAND HANDLER =====
-async function handleCommand(sock, msg, sender, text, senderName) {
-    const args = text.slice(1).trim().split(' ');
-    const cmd = args.shift().toLowerCase();
     switch(cmd) {
         case 'help':
             await sock.sendMessage(sender, {
-                text: `🤖 *Bot Commands:*\n\n` +
-                      `*!ai [pertanyaan]* → Tanya AI\n` +
-                      `*!status* → Cek status bot\n` +
-                      `*!ping* → Test response\n\n` +
-                      `📷 Kirim foto untuk analyze gambar`
             });
             break;
-        case 'ping':
-            await sock.sendMessage(sender, { text: '🏓 Pong! Bot aktif.' });
             break;
         case 'status':
-            const uptime = process.uptime();
-            const hours = Math.floor(uptime / 3600);
-            const mins = Math.floor((uptime % 3600) / 60);
             await sock.sendMessage(sender, {
-                text: `📊 *Status Bot*\n\n` +
-                      `Status: ${connectionStatus}\n` +
-                      `Uptime: ${hours}j ${mins}m\n` +
-                      `Platform: Hugging Face Space`
             });
             break;
-        case 'ai':
-            const question = args.join(' ');
-            if (!question) {
-                await sock.sendMessage(sender, {
-                    text: '❌ Ketik: !ai pertanyaan lu'
-                });
-                return;
-            }
-            await handleAIResponse(sock, sender, question);
             break;
         default:
-            await sock.sendMessage(sender, {
-                text: '❓ Command tidak dikenal. Ketik !help'
-            });
     }
 }
-// ===== AI RESPONSE (Hugging Face) =====
 async function handleAIResponse(sock, sender, text) {
     try {
-        await sock.sendMessage(sender, { text: '⏳ AI sedang berpikir...' });
-        // Pake model gratis dari Hugging Face
         const response = await axios.post(
             'https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2',
             {
@@ -523,7 +890,7 @@ async function handleAIResponse(sock, sender, text) {
                 parameters: { max_new_tokens: 500, temperature: 0.7 }
             },
             {
-                headers: {
                     'Authorization': `Bearer ${HF_TOKEN}`,
                     'Content-Type': 'application/json'
                 },
@@ -531,29 +898,27 @@ async function handleAIResponse(sock, sender, text) {
             }
         );
-        let reply = '';
-        if (response.data && response.data[0]) {
-            reply = response.data[0].generated_text || 'Tidak ada response';
-            // Bersihin format
-            reply = reply.replace(/<s>\[INST\].*?\[\/INST\]\s*/, '');
-        } else {
-            reply = 'Maaf, AI tidak merespon.';
-        }
-        await sock.sendMessage(sender, { text: `🤖 *AI:*\n\n${reply}` });
     } catch (error) {
-        console.error('AI Error:', error.message);
         await sock.sendMessage(sender, {
-            text: '❌ Error AI: ' + (error.response?.data?.error || 'Service sibuk, coba lagi')
         });
     }
 }
-// ===== START EVERYTHING =====
-startBot();
-// Keep alive log
 setInterval(() => {
-    console.log(`[${new Date().toISOString()}] 💓 Heartbeat - Status: ${connectionStatus}`);
 }, 60000);

     default: makeWASocket,
     DisconnectReason,
     useMultiFileAuthState,
+    fetchLatestBaileysVersion,
+    usePairingCode
 } = require('@whiskeysockets/baileys');
 const QRCode = require('qrcode-terminal');
 const qrcode = require('qrcode');
 const axios = require('axios');
 const fs = require('fs');
 const path = require('path');
+const express = require('express');
 const http = require('http');
+const WebSocket = require('ws');
+const app = express();
+const server = http.createServer(app);
+const wss = new WebSocket.Server({ server });
 // ===== CONFIG =====
 const PORT = process.env.PORT || 7860;
 const HF_TOKEN = process.env.HF_TOKEN || '';
+const AUTH_FOLDER = path.join(__dirname, 'auth');
+const USE_PAIRING_CODE = true; // Set false kalau mau QR biasa
+// State
 let sock = null;
 let qrCodeData = null;
+let pairingCode = null;
 let connectionStatus = 'disconnected';
+let connectionLogs = [];
+let startTime = Date.now();
+// ===== MIDDLEWARE =====
+app.use(express.json());
+app.use(express.static('public'));
+// ===== HTML UI KEREN =====
+const HTML_UI = `
 <!DOCTYPE html>
 <html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 WhatsApp Bot - HF Space</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
             min-height: 100vh;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .stars {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            pointer-events: none;
+            background-image:
+                radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
+                radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
+                radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
+                radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
+                radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
+            background-repeat: repeat;
+            background-size: 200px 200px;
+            animation: twinkle 5s ease-in-out infinite;
+            opacity: 0.5;
+        }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 0.8; }
         }
         .container {
+            max-width: 900px;
             margin: 0 auto;
+            padding: 20px;
+            position: relative;
+            z-index: 1;
         }
+        header {
+            text-align: center;
+            padding: 40px 0;
+        }
+        h1 {
+            font-size: 3em;
+            background: linear-gradient(90deg, #00d4ff, #7b2cbf, #ff006e);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 10px;
+            animation: gradient 3s ease infinite;
+            background-size: 200% 200%;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .subtitle {
+            color: #8892b0;
+            font-size: 1.1em;
+        }
+        .status-card {
+            background: rgba(255,255,255,0.05);
             backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 24px;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
         }
+        .status-header {
             display: flex;
             align-items: center;
+            gap: 20px;
+            margin-bottom: 25px;
         }
         .status-icon {
+            width: 80px; height: 80px;
             border-radius: 50%;
             display: flex; align-items: center; justify-content: center;
+            font-size: 36px;
+            position: relative;
+            transition: all 0.3s;
+        }
+        .status-icon::before {
+            content: '';
+            position: absolute;
+            inset: -5px;
+            border-radius: 50%;
+            background: inherit;
+            opacity: 0.3;
+            animation: pulse-ring 2s ease-out infinite;
+        }
+        @keyframes pulse-ring {
+            0% { transform: scale(1); opacity: 0.5; }
+            100% { transform: scale(1.3); opacity: 0; }
         }
+        .connected { background: linear-gradient(135deg, #00b894, #00cec9); }
+        .disconnected { background: linear-gradient(135deg, #e17055, #d63031); }
+        .connecting { background: linear-gradient(135deg, #fdcb6e, #e17055); animation: pulse 1.5s infinite; }
         @keyframes pulse {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.05); }
         }
+        .status-info h2 {
+            font-size: 1.8em;
+            margin-bottom: 5px;
+        }
+        .status-badge {
+            display: inline-block;
+            padding: 6px 16px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .badge-online { background: #00b894; color: #fff; }
+        .badge-offline { background: #e17055; color: #fff; }
+        .badge-connecting { background: #fdcb6e; color: #000; }
+        .connection-panel {
+            background: rgba(0,0,0,0.2);
+            border-radius: 16px;
+            padding: 25px;
             text-align: center;
+        }
+        .pairing-box {
+            background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(123,44,191,0.1));
+            border: 2px dashed #00d4ff;
+            border-radius: 16px;
+            padding: 30px;
+            margin: 20px 0;
+        }
+        .pairing-code {
+            font-family: 'Courier New', monospace;
+            font-size: 3em;
+            font-weight: bold;
+            color: #00d4ff;
+            letter-spacing: 10px;
+            text-shadow: 0 0 20px rgba(0,212,255,0.5);
+            margin: 15px 0;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 20px rgba(0,212,255,0.5); }
+            to { text-shadow: 0 0 30px rgba(0,212,255,0.8), 0 0 40px rgba(0,212,255,0.4); }
+        }
+        .qr-box {
+            background: #fff;
             padding: 20px;
+            border-radius: 16px;
+            display: inline-block;
+            margin: 15px 0;
         }
+        .qr-box img {
+            width: 280px; height: 280px;
+        }
+        .instructions {
+            text-align: left;
+            background: rgba(255,255,255,0.05);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 20px;
         }
+        .instructions h3 {
+            color: #00d4ff;
+            margin-bottom: 15px;
+            display: flex; align-items: center; gap: 10px;
+        }
+        .instructions ol {
+            padding-left: 20px;
+            line-height: 2;
+            color: #a8b2d1;
+        }
+        .instructions li {
+            margin-bottom: 8px;
+        }
         .btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
             border: none;
+            padding: 15px 40px;
+            border-radius: 30px;
             font-size: 16px;
             font-weight: bold;
             cursor: pointer;
             transition: all 0.3s;
+            margin: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 30px rgba(102,126,234,0.4);
         }
+        .btn-danger {
+            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .stat-box {
+            background: rgba(255,255,255,0.05);
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .stat-value {
+            font-size: 2em;
             font-weight: bold;
+            color: #00d4ff;
+        }
+        .stat-label {
+            color: #8892b0;
+            font-size: 0.9em;
+            margin-top: 5px;
         }
+        .logs-container {
+            background: rgba(0,0,0,0.4);
+            border-radius: 12px;
             padding: 15px;
+            margin-top: 20px;
             max-height: 200px;
             overflow-y: auto;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            line-height: 1.6;
+        }
+        .log-entry {
+            padding: 3px 0;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .log-time { color: #00d4ff; }
+        .log-info { color: #a8b2d1; }
+        .log-success { color: #00b894; }
+        .log-error { color: #e17055; }
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .feature-card {
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            padding: 25px;
+            transition: all 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            background: rgba(255,255,255,0.08);
+            border-color: rgba(0,212,255,0.3);
+        }
+        .feature-icon {
+            font-size: 2.5em;
+            margin-bottom: 15px;
+        }
+        .feature-title {
+            font-size: 1.2em;
+            margin-bottom: 10px;
+            color: #00d4ff;
+        }
+        .feature-desc {
+            color: #8892b0;
+            font-size: 0.95em;
+            line-height: 1.6;
+        }
+        footer {
+            text-align: center;
+            padding: 40px 0;
+            color: #8892b0;
+            font-size: 0.9em;
+        }
+        .hidden { display: none !important; }
+        @media (max-width: 600px) {
+            h1 { font-size: 2em; }
+            .pairing-code { font-size: 2em; letter-spacing: 5px; }
+            .qr-box img { width: 200px; height: 200px; }
         }
     </style>
 </head>
 <body>
+    <div class="stars"></div>
     <div class="container">
+        <header>
+            <h1>🚀 WhatsApp AI Bot</h1>
+            <p class="subtitle">Powered by Hugging Face Space</p>
+        </header>
+        <!-- STATUS CARD -->
+        <div class="status-card">
+            <div class="status-header">
+                <div class="status-icon disconnected" id="statusIcon">📴</div>
+                <div class="status-info">
+                    <h2 id="statusTitle">Menghubungkan...</h2>
+                    <span class="status-badge badge-offline" id="statusBadge">Offline</span>
                 </div>
             </div>
+            <!-- CONNECTING PANEL -->
+            <div id="connectingPanel" class="connection-panel">
+                <p>Sedang menyiapkan koneksi...</p>
+                <div class="stats-grid" style="margin-top: 20px;">
+                    <div class="stat-box">
+                        <div class="stat-value" id="uptime">0s</div>
+                        <div class="stat-label">Uptime</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="reconnectCount">0</div>
+                        <div class="stat-label">Reconnect</div>
+                    </div>
+                </div>
             </div>
+            <!-- PAIRING CODE PANEL -->
+            <div id="pairingPanel" class="connection-panel hidden">
+                <div class="pairing-box">
+                    <h3>📱 Pairing Code</h3>
+                    <p style="margin-bottom: 15px; color: #a8b2d1;">Masukkan kode ini di WhatsApp</p>
+                    <div class="pairing-code" id="pairingCode">----</div>
+                    <p style="margin-top: 15px; font-size: 0.9em; color: #fdcb6e;">⏳ Berlaku 2 menit</p>
                 </div>
+                <div class="instructions">
+                    <h3>📋 Cara Connect:</h3>
+                    <ol>
+                        <li>Buka <strong>WhatsApp Android</strong> lu</li>
+                        <li>Klik <strong>⋮ (Menu)</strong> → <strong>Linked Devices</strong></li>
+                        <li>Klik <strong>Link a Device</strong></li>
+                        <li>Pilih <strong>Link with phone number</strong></li>
+                        <li>Masukkan kode di atas ☝️</li>
+                        <li>Tunggu sampai terhubung!</li>
+                    </ol>
+                </div>
+                <button class="btn" onclick="switchToQR()">🔄 Ganti ke QR Code</button>
             </div>
+            <!-- QR PANEL -->
+            <div id="qrPanel" class="connection-panel hidden">
+                <div class="qr-box">
+                    <img id="qrImage" src="" alt="QR Code">
+                </div>
+                <p style="margin-top: 15px; color: #a8b2d1;">Scan pakai WhatsApp → Linked Devices</p>
+                <button class="btn" onclick="switchToPairing()">🔄 Ganti ke Pairing Code</button>
+            </div>
+            <!-- CONNECTED PANEL -->
+            <div id="connectedPanel" class="connection-panel hidden">
+                <div style="font-size: 4em; margin-bottom: 15px;">✅</div>
+                <h3 style="color: #00b894; margin-bottom: 10px;">Bot Terhubung!</h3>
+                <p style="color: #a8b2d1; margin-bottom: 20px;">Siap menerima pesan WhatsApp</p>
+                <div class="stats-grid">
+                    <div class="stat-box">
+                        <div class="stat-value" id="connUptime">0s</div>
+                        <div class="stat-label">Uptime</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="msgReceived">0</div>
+                        <div class="stat-label">Pesan</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="msgSent">0</div>
+                        <div class="stat-label">Terbalas</div>
+                    </div>
+                </div>
+                <button class="btn btn-danger" onclick="logout()" style="margin-top: 20px;">🚪 Logout & Reset</button>
+            </div>
+            <div class="logs-container" id="logs">
+                <div class="log-entry"><span class="log-time">[--:--:--]</span> <span class="log-info">System initialized...</span></div>
+            </div>
+        </div>
+        <!-- FEATURES -->
+        <div class="features">
+            <div class="feature-card">
+                <div class="feature-icon">🤖</div>
+                <div class="feature-title">AI Chat</div>
+                <div class="feature-desc">Balas pesan otomatis pakai AI Hugging Face. Tinggal chat langsung dapet jawaban!</div>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🖼️</div>
+                <div class="feature-title">Image Analysis</div>
+                <div class="feature-desc">Kirim foto ke bot, AI bakal analyze dan deskripsiin isi gambarnya.</div>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">⚡</div>
+                <div class="feature-title">24/7 Online</div>
+                <div class="feature-desc">Jalan terus di cloud Hugging Face. Auto-reconnect kalau terputus.</div>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔒</div>
+                <div class="feature-title">Secure Session</div>
+                <div class="feature-desc">Session tersimpan aman. Login sekali, tetap connect selamanya.</div>
             </div>
         </div>
+        <footer>
+            <p>🚀 Running on Hugging Face Space | Built with Baileys & Node.js</p>
+            <p style="margin-top: 10px; font-size: 0.8em;">Status: <span id="footerStatus">Initializing</span></p>
+        </footer>
     </div>
     <script>
+        let currentMode = 'pairing'; // 'pairing' atau 'qr'
+        let stats = { received: 0, sent: 0, startTime: Date.now() };
+        function addLog(msg, type = 'info') {
+            const logs = document.getElementById('logs');
+            const time = new Date().toLocaleTimeString();
+            const typeClass = type === 'success' ? 'log-success' : type === 'error' ? 'log-error' : 'log-info';
+            logs.innerHTML += \`<div class="log-entry"><span class="log-time">[\${time}]</span> <span class="\${typeClass}">\${msg}</span></div>\`;
+            logs.scrollTop = logs.scrollHeight;
+        }
+        function updateUptime() {
+            const elapsed = Math.floor((Date.now() - stats.startTime) / 1000);
+            const hours = Math.floor(elapsed / 3600);
+            const mins = Math.floor((elapsed % 3600) / 60);
+            const secs = elapsed % 60;
+            const str = hours > 0 ? \`\${hours}j \${mins}m\` : \`\${mins}m \${secs}s\`;
+            document.getElementById('uptime').textContent = str;
+            document.getElementById('connUptime').textContent = str;
+        }
+        setInterval(updateUptime, 1000);
         async function checkStatus() {
             try {
+                const res = await fetch('/api/status');
                 const data = await res.json();
                 updateUI(data);
             } catch (e) {
+                addLog('Connection error: ' + e.message, 'error');
             }
         }
         function updateUI(data) {
+            const status = data.status;
             const icon = document.getElementById('statusIcon');
             const title = document.getElementById('statusTitle');
+            const badge = document.getElementById('statusBadge');
+            const footer = document.getElementById('footerStatus');
             // Update status display
+            if (status === 'connected') {
                 icon.className = 'status-icon connected';
                 icon.textContent = '✓';
                 title.textContent = 'Terhubung';
+                badge.className = 'status-badge badge-online';
+                badge.textContent = 'Online';
+                footer.textContent = 'Connected';
+                showPanel('connectedPanel');
+                stats.received = data.messagesReceived || 0;
+                stats.sent = data.messagesSent || 0;
+                document.getElementById('msgReceived').textContent = stats.received;
+                document.getElementById('msgSent').textContent = stats.sent;
+            } else if (status === 'qr_ready') {
+                icon.className = 'status-icon connecting';
                 icon.textContent = '📱';
+                title.textContent = 'Menunggu Scan';
+                badge.className = 'status-badge badge-connecting';
+                badge.textContent = 'QR Ready';
+                footer.textContent = 'Waiting for QR scan';
+                if (currentMode === 'qr') {
+                    showPanel('qrPanel');
+                    document.getElementById('qrImage').src = '/api/qr?' + Date.now();
+                } else {
+                    showPanel('pairingPanel');
+                }
+            } else if (status === 'pairing_code') {
+                icon.className = 'status-icon connecting';
+                icon.textContent = '🔢';
+                title.textContent = 'Menunggu Pairing';
+                badge.className = 'status-badge badge-connecting';
+                badge.textContent = 'Pairing';
+                footer.textContent = 'Waiting for pairing code';
+                showPanel('pairingPanel');
+                if (data.pairingCode) {
+                    document.getElementById('pairingCode').textContent = data.pairingCode;
+                }
+            } else {
                 icon.className = 'status-icon disconnected';
+                icon.textContent = '⚡';
+                title.textContent = 'Menghubungkan...';
+                badge.className = 'status-badge badge-offline';
+                badge.textContent = 'Connecting';
+                footer.textContent = 'Reconnecting...';
+                showPanel('connectingPanel');
             }
         }
+        function showPanel(id) {
+            ['connectingPanel', 'pairingPanel', 'qrPanel', 'connectedPanel'].forEach(pid => {
+                document.getElementById(pid).classList.add('hidden');
+            });
+            document.getElementById(id).classList.remove('hidden');
+        }
+        function switchToQR() {
+            currentMode = 'qr';
+            fetch('/api/switch-mode?mode=qr');
+            addLog('Switched to QR mode');
         }
+        function switchToPairing() {
+            currentMode = 'pairing';
+            fetch('/api/switch-mode?mode=pairing');
+            addLog('Switched to pairing code mode');
+        }
+        async function logout() {
+            if (!confirm('Yakin mau logout? Perlu pair ulang.')) return;
+            addLog('Logging out...');
+            await fetch('/api/logout');
             setTimeout(checkStatus, 2000);
         }
+        // WebSocket untuk real-time updates
+        const ws = new WebSocket('ws://' + window.location.host);
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.type === 'log') addLog(data.message, data.logType);
+            if (data.type === 'status') updateUI(data.data);
+        };
+        // Polling fallback
+        setInterval(checkStatus, 3000);
         checkStatus();
+        addLog('System ready', 'success');
     </script>
 </body>
 </html>
+`;
+// ===== ROUTES =====
+// Main UI
+app.get('/', (req, res) => res.send(HTML_UI));
+app.get('/panel', (req, res) => res.send(HTML_UI));
+// API Status
+app.get('/api/status', (req, res) => {
+    res.json({
+        status: connectionStatus,
+        pairingCode: pairingCode,
+        qrReady: !!qrCodeData,
+        uptime: Math.floor((Date.now() - startTime) / 1000),
+        timestamp: new Date().toISOString()
+    });
+});
+// Get QR Image
+app.get('/api/qr', async (req, res) => {
+    if (qrCodeData) {
+        const buffer = await qrcode.toBuffer(qrCodeData, {
+            type: 'png', width: 400, margin: 2
+        });
+        res.set('Content-Type', 'image/png');
+        res.send(buffer);
     } else {
+        res.status(404).json({ error: 'QR not ready' });
     }
+});
+// Switch mode
+app.get('/api/switch-mode', (req, res) => {
+    const mode = req.query.mode;
+    // Implementasi switch mode bisa ditambahin di sini
+    res.json({ success: true, mode });
+});
+// Logout
+app.get('/api/logout', async (req, res) => {
+    if (sock) {
+        await sock.logout();
+    }
+    // Hapus session
+    if (fs.existsSync(AUTH_FOLDER)) {
+        fs.rmSync(AUTH_FOLDER, { recursive: true });
+    }
+    res.json({ success: true });
+});
+// ===== WEBSOCKET BROADCAST =====
+function broadcast(data) {
+    wss.clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify(data));
+        }
+    });
+}
+function log(message, type = 'info') {
+    console.log(`[${new Date().toLocaleTimeString()}] ${message}`);
+    broadcast({ type: 'log', message, logType: type });
+}
+// ===== WHATSAPP BOT =====
+async function startBot() {
+    log('🚀 Starting WhatsApp Bot...');
     const { state, saveCreds } = await useMultiFileAuthState(AUTH_FOLDER);
     const { version } = await fetchLatestBaileysVersion();
+    // Pilih pairing method
+    const phoneNumber = ''; // Kosongin biar pake QR atau isi nomor lu buat pairing code
     sock = makeWASocket({
         version,
+        logger: require('pino')({ level: 'silent' }),
         printQRInTerminal: true,
         auth: state,
         browser: ['Ubuntu', 'Chrome', '20.0.04'],
         generateHighQualityLinkPreview: true,
         syncFullHistory: false,
         markOnlineOnConnect: true,
+        keepAliveIntervalMs: 30000,
         connectTimeoutMs: 60000,
         defaultQueryTimeoutMs: 60000,
+        // Pairing code config
+        pairingCode: USE_PAIRING_CODE,
     });
+    // Pairing code handler
+    if (USE_PAIRING_CODE && !state.creds.registered && phoneNumber) {
+        setTimeout(async () => {
+            const code = await sock.requestPairingCode(phoneNumber);
+            pairingCode = code;
+            connectionStatus = 'pairing_code';
+            log(`🔢 Pairing Code: ${code}`, 'success');
+            log('📱 Masukkan kode di WhatsApp → Linked Devices', 'info');
+        }, 3000);
+    }
     // Event handlers
     sock.ev.on('connection.update', async (update) => {
         const { connection, lastDisconnect, qr } = update;
         if (qr) {
             qrCodeData = qr;
             connectionStatus = 'qr_ready';
+            log('📷 QR Code ready! Scan sekarang...', 'info');
+            broadcast({ type: 'status', data: { status: 'qr_ready' } });
         }
         if (connection === 'open') {
             connectionStatus = 'connected';
             qrCodeData = null;
+            pairingCode = null;
+            log('✅ BOT CONNECTED!', 'success');
+            log(`📱 Nomor: ${sock.user.id.split(':')[0]}`, 'info');
+            broadcast({
+                type: 'status',
+                data: {
+                    status: 'connected',
+                    user: sock.user.name || sock.user.id
+                }
+            });
+            // Notifikasi startup
             try {
                 await sock.sendMessage(sock.user.id, {
+                    text: `🤖 *Bot Aktif!*\n\n✅ Terhubung ke Hugging Face Space\n⏰ ${new Date().toLocaleString()}\n\nKetik *!help* untuk bantuan.`
                 });
+            } catch (e) {}
         }
         else if (connection === 'close') {
             const statusCode = lastDisconnect?.error?.output?.statusCode;
             const shouldReconnect = statusCode !== DisconnectReason.loggedOut;
             connectionStatus = 'disconnected';
+            log(`❌ Disconnected: ${statusCode}`, 'error');
+            broadcast({ type: 'status', data: { status: 'disconnected' } });
             if (shouldReconnect) {
+                log('🔄 Reconnecting in 5s...', 'info');
                 setTimeout(startBot, 5000);
             }
         }
     });
     sock.ev.on('creds.update', saveCreds);
+    // Message handler
+    let msgCount = { received: 0, sent: 0 };
     sock.ev.on('messages.upsert', async ({ messages, type }) => {
         if (type !== 'notify') return;
         const msg = messages[0];
         if (!msg.message || msg.key.fromMe) return;
+        msgCount.received++;
         const sender = msg.key.remoteJid;
+        const pushName = msg.pushName || 'User';
+        let text = msg.message.conversation ||
+                   msg.message.extendedTextMessage?.text ||
+                   msg.message.imageMessage?.caption || '';
+        log(`📩 ${pushName}: ${text.substring(0, 30)}...`);
+        // Commands
         if (text.startsWith('!')) {
+            await handleCommand(sock, msg, text, sender);
+            msgCount.sent++;
         }
+        // Auto reply private chat
+        else if (!sender.endsWith('@g.us') && text) {
             await handleAIResponse(sock, sender, text);
+            msgCount.sent++;
         }
+        broadcast({
+            type: 'status',
+            data: {
+                status: connectionStatus,
+                messagesReceived: msgCount.received,
+                messagesSent: msgCount.sent
+            }
+        });
     });
 }
+// ===== COMMANDS =====
+async function handleCommand(sock, msg, text, sender) {
+    const cmd = text.slice(1).split(' ')[0].toLowerCase();
+    const args = text.slice(1).split(' ').slice(1).join(' ');
     switch(cmd) {
         case 'help':
             await sock.sendMessage(sender, {
+                text: `🤖 *Command List*\n\n` +
+                      `*!ai [pertanyaan]* - Tanya AI\n` +
+                      `*!status* - Cek status bot\n` +
+                      `*!ping* - Test bot\n` +
+                      `*!image [prompt]* - Generate gambar\n\n` +
+                      `Atau langsung chat aja buat AI auto-reply!`
             });
             break;
+        case 'ai':
+            if (!args) {
+                await sock.sendMessage(sender, { text: '❌ Ketik: !ai pertanyaan lu' });
+                return;
+            }
+            await handleAIResponse(sock, sender, args);
             break;
         case 'status':
+            const uptime = Math.floor((Date.now() - startTime) / 1000);
             await sock.sendMessage(sender, {
+                text: `📊 *Status*\nUptime: ${Math.floor(uptime/60)}m\nStatus: ${connectionStatus}`
             });
             break;
+        case 'ping':
+            await sock.sendMessage(sender, { text: '🏓 Pong! Bot aktif.' });
             break;
+        case 'image':
+            await sock.sendMessage(sender, { text: '⏳ Generating image...' });
+            // Implementasi image generation bisa ditambahin
+            break;
         default:
+            await sock.sendMessage(sender, { text: '❓ Command gak dikenal. Ketik !help' });
     }
 }
+// ===== AI RESPONSE =====
 async function handleAIResponse(sock, sender, text) {
     try {
+        await sock.sendMessage(sender, { text: '⏳ AI mikir...' });
         const response = await axios.post(
             'https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2',
             {
                 parameters: { max_new_tokens: 500, temperature: 0.7 }
             },
             {
+                headers: {
                     'Authorization': `Bearer ${HF_TOKEN}`,
                     'Content-Type': 'application/json'
                 },
             }
         );
+        let reply = response.data[0]?.generated_text || 'Gagal dapet response';
+        reply = reply.replace(/<s>\[INST\].*?\[\/INST\]\s*/, '');
+        await sock.sendMessage(sender, { text: `🤖 ${reply}` });
     } catch (error) {
+        log('AI Error: ' + error.message, 'error');
         await sock.sendMessage(sender, {
+            text: '❌ AI lagi sibuk, coba lagi ntar ya.'
         });
     }
 }
+// ===== START =====
+server.listen(PORT, () => {
+    log(`🌐 Web server: http://localhost:${PORT}`, 'success');
+    log(`📱 Panel: http://localhost:${PORT}/panel`, 'info');
+    startBot();
+});
+// Keep alive
 setInterval(() => {
+    log(`💓 Heartbeat | Status: ${connectionStatus}`, 'info');
 }, 60000);