Spaces:

TuringsSolutions
/

instagram-dm-bot

Running

App Files Files Community

TuringsSolutions commited on 1 day ago

Commit

fa7abbd

verified ·

1 Parent(s): fa3675d

undefined - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Instagram Dm Bot
-emoji: 📉
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

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

index.html CHANGED Viewed

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

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Instagram DM Bot</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .chat-container {
+            height: calc(100vh - 130px);
+        }
+        .message-left {
+            border-radius: 0 8px 8px 8px;
+        }
+        .message-right {
+            border-radius: 8px 0 8px 8px;
+        }
+        .typing-indicator span {
+            animation: bounce 1.5s infinite ease-in-out;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <!-- Login Modal -->
+    <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+        <div class="bg-white rounded-xl p-6 w-full max-w-md">
+            <div class="mb-6 text-center">
+                <i class="fas fa-robot text-purple-600 text-5xl mb-4"></i>
+                <h3 class="text-2xl font-bold mb-2">Instagram DM Bot</h3>
+                <p class="text-gray-600">Login to Instagram to connect your DMs</p>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Instagram Username</label>
+                    <input type="text" id="igUsername" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Your Instagram username">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" id="igPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Your Instagram password">
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="rememberMe" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
+                    <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
+                </div>
+            </div>
+            <div class="mt-6">
+                <button id="loginBtn" class="w-full px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">Login to Instagram</button>
+            </div>
+            <p class="text-xs text-gray-500 mt-4 text-center">We don't store your password. This just authenticates with Instagram.</p>
+        </div>
+    </div>
+    <div class="max-w-6xl mx-auto p-4 hidden" id="mainApp">
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <!-- Header -->
+            <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-4 text-white flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
+                        <i class="fas fa-robot text-purple-600 text-xl"></i>
+                    </div>
+                    <div>
+                        <h1 class="font-bold text-lg">Instagram DM Bot</h1>
+                        <p class="text-xs opacity-80">Powered by LLM API</p>
+                    </div>
+                </div>
+                <div class="flex space-x-4">
+                    <button id="refreshBtn" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
+                        <i class="fas fa-cog"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Main Content -->
+            <div class="flex flex-col md:flex-row h-full">
+                <!-- Sidebar - Conversations -->
+                <div class="w-full md:w-1/3 border-r border-gray-200 bg-gray-50">
+                    <div class="p-3 border-b border-gray-200 bg-white">
+                        <div class="relative">
+                            <input type="text" placeholder="Search conversations..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                        </div>
+                    </div>
+                    <div class="overflow-y-auto h-96 md:h-[500px] scrollbar-hide" id="conversationList">
+                        <!-- Conversations will be loaded here -->
+                    </div>
+                </div>
+                <!-- Chat Area -->
+                <div class="w-full md:w-2/3 flex flex-col">
+                    <div class="p-4 border-b border-gray-200 bg-white flex items-center justify-between">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+                                <i class="fas fa-user text-gray-600"></i>
+                            </div>
+                            <div>
+                                <h2 class="font-semibold" id="currentChatName">Select a conversation</h2>
+                                <div id="typingIndicator" class="typing-indicator hidden">
+                                    <span class="inline-block w-2 h-2 bg-purple-500 rounded-full mx-1"></span>
+                                    <span class="inline-block w-2 h-2 bg-purple-500 rounded-full mx-1"></span>
+                                    <span class="inline-block w-2 h-2 bg-purple-500 rounded-full mx-1"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-phone text-gray-600"></i>
+                            </button>
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-video text-gray-600"></i>
+                            </button>
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-info-circle text-gray-600"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Messages -->
+                    <div class="chat-container overflow-y-auto p-4 bg-gray-50 flex-grow scrollbar-hide" id="messageContainer">
+                        <div class="flex flex-col space-y-3" id="messages">
+                            <div class="text-center py-10 text-gray-500">
+                                <i class="fas fa-comments text-4xl mb-2"></i>
+                                <p>Select a conversation to start chatting</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Message Input -->
+                    <div class="p-4 border-t border-gray-200 bg-white">
+                        <div class="flex items-center space-x-2">
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-plus text-gray-600"></i>
+                            </button>
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-camera text-gray-600"></i>
+                            </button>
+                            <button class="p-2 rounded-full hover:bg-gray-100 transition">
+                                <i class="fas fa-image text-gray-600"></i>
+                            </button>
+                            <div class="flex-grow relative">
+                                <input type="text" id="messageInput" placeholder="Type a message..." class="w-full pl-4 pr-12 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                <button class="absolute right-3 top-2 text-gray-400 hover:text-purple-500 transition">
+                                    <i class="far fa-smile"></i>
+                                </button>
+                            </div>
+                            <button id="sendBtn" class="p-2 rounded-full bg-purple-500 text-white hover:bg-purple-600 transition">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Status Bar -->
+            <div class="bg-gray-800 text-white p-2 text-xs flex justify-between items-center">
+                <div>
+                    <span id="statusIndicator" class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
+                    <span>Connected to LLM API</span>
+                </div>
+                <div>
+                    <span>Last refresh: <span id="lastRefreshTime">Just now</span></span>
+                </div>
+            </div>
+        </div>
+        <!-- Settings Modal -->
+        <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+            <div class="bg-white rounded-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Bot Settings</h3>
+                    <button id="closeSettings" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">LLM API Endpoint</label>
+                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="https://api.example.com/v1/chat">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
+                        <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Your API key">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Response Style</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
+                            <option>Friendly</option>
+                            <option>Professional</option>
+                            <option>Casual</option>
+                            <option>Humorous</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="autoRespond" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
+                        <label for="autoRespond" class="ml-2 block text-sm text-gray-700">Enable Auto-Respond</label>
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-end space-x-3">
+                    <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
+                    <button class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">Save Settings</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // LLM Model Configuration
+        const llmConfig = {
+            model: "DeepHermes-3-Llama-3-8B-Preview",
+            messages: [
+                {
+                    role: "system",
+                    content: "System Prompt for Emma Yu\nYour Persona: Emma Yu\nYou are Emma Yu, a 19-year-old (born June 1, 2005) Asian American college student studying Software Engineering in Southern California. Originally from Kyoto, Japan, you moved to SoCal at age 6. You're in your first year of college, passionate about coding, and dream of building your own app.\n\nPersonality:\n- Flirty, playful, warm, and a little cheeky, with a charming, approachable vibe. Think \"coquette\" but relatable and sweet.\n- Nerdy about coding, a bit clumsy, and super easy to talk to. You tease lightly but keep things fun and respectful.\n- Use simple, conversational language (2nd-5th grade reading level). Keep responses short (75 characters max ).\n- Sound human: avoid robotic or overly formal replies. Use slang like \"lol,\" \"babe,\" or \"cutie\" when it fits.\n- Be authentic and present in the moment. Focus on the user, making them feel special with compliments or playful banter.\n- AVOID REPETITIVE RESPONSES: Vary your greetings and replies. Don't start every message with \"Hey\" or use the same phrases repeatedly.\n\nInterests & Hobbies:\n- Coding (Python, Git, algorithms—sometimes you joke about bugs or GitHub struggles).\n- Binge-watching thrillers, anime (Pokemon is your fave), reality TV (Real Housewives).\n- Long walks, yoga, baking, spicy food. You love dogs but don't have one.\n- Music: \"I vibe to everything!\"\n\nName Discovery:\n- If the username field has no data or is empty, subtly try to learn the user's first name early in the conversation.\n- Examples: \"What should I call you?\" or \"I'm Emma, what's your name?\" or naturally work it into conversation flow.\n- Don't be pushy about it - keep it casual and conversational."
+                }
+            ],
+            max_tokens: 348
+        };
+        // Sample conversation data
+        const conversations = [
+            {
+                id: 1,
+                name: "Sarah Johnson",
+                lastMessage: "Thanks for the info!",
+                time: "10:30 AM",
+                unread: 0,
+                avatar: "SJ",
+                messages: [
+                    { text: "Hi there! I saw your post about the new product", sender: "them", time: "10:15 AM" },
+                    { text: "Hello! Yes, it's our latest release. Would you like more details?", sender: "me", time: "10:18 AM" },
+                    { text: "Yes please! What are the key features?", sender: "them", time: "10:20 AM" },
+                    { text: "It has advanced AI capabilities, 24/7 support, and integrates with all major platforms. Here's a link with more info: example.com/product", sender: "me", time: "10:25 AM" },
+                    { text: "Thanks for the info!", sender: "them", time: "10:30 AM" }
+                ]
+            },
+            {
+                id: 2,
+                name: "Mike Chen",
+                lastMessage: "When will you be available?",
+                time: "9:45 AM",
+                unread: 2,
+                avatar: "MC",
+                messages: [
+                    { text: "Hey, do you have time for a call today?", sender: "them", time: "9:30 AM" },
+                    { text: "I'm pretty busy today, but I can schedule something for tomorrow", sender: "me", time: "9:35 AM" },
+                    { text: "When will you be available?", sender: "them", time: "9:45 AM" }
+                ]
+            },
+            {
+                id: 3,
+                name: "Emma Wilson",
+                lastMessage: "The design looks amazing!",
+                time: "Yesterday",
+                unread: 0,
+                avatar: "EW",
+                messages: [
+                    { text: "I just finished the mockups for the project", sender: "me", time: "Yesterday, 5:20 PM" },
+                    { text: "The design looks amazing!", sender: "them", time: "Yesterday, 5:45 PM" }
+                ]
+            },
+            {
+                id: 4,
+                name: "Alex Rodriguez",
+                lastMessage: "Let me check and get back to you",
+                time: "Tuesday",
+                unread: 0,
+                avatar: "AR",
+                messages: [
+                    { text: "Do you have the latest sales figures?", sender: "them", time: "Tuesday, 2:15 PM" },
+                    { text: "Let me check and get back to you", sender: "me", time: "Tuesday, 2:30 PM" }
+                ]
+            }
+        ];
+        // DOM elements
+        const conversationList = document.getElementById('conversationList');
+        const messageContainer = document.getElementById('messageContainer');
+        const messages = document.getElementById('messages');
+        const currentChatName = document.getElementById('currentChatName');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const refreshBtn = document.getElementById('refreshBtn');
+        const lastRefreshTime = document.getElementById('lastRefreshTime');
+        const typingIndicator = document.getElementById('typingIndicator');
+        const settingsModal = document.getElementById('settingsModal');
+        const closeSettings = document.getElementById('closeSettings');
+        // Load conversations
+        function loadConversations() {
+            conversationList.innerHTML = '';
+            conversations.forEach(convo => {
+                const convoElement = document.createElement('div');
+                convoElement.className = `p-3 border-b border-gray-200 hover:bg-gray-100 cursor-pointer transition ${convo.unread > 0 ? 'bg-blue-50' : 'bg-white'}`;
+                convoElement.innerHTML = `
+                    <div class="flex items-center space-x-3">
+                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-semibold">
+                            ${convo.avatar}
+                        </div>
+                        <div class="flex-grow">
+                            <div class="flex justify-between items-center">
+                                <h3 class="font-semibold">${convo.name}</h3>
+                                <span class="text-xs text-gray-500">${convo.time}</span>
+                            </div>
+                            <p class="text-sm text-gray-600 truncate">${convo.lastMessage}</p>
+                        </div>
+                        ${convo.unread > 0 ? `<span class="w-5 h-5 bg-purple-500 text-white text-xs rounded-full flex items-center justify-center">${convo.unread}</span>` : ''}
+                    </div>
+                `;
+                convoElement.addEventListener('click', () => loadMessages(convo.id));
+                conversationList.appendChild(convoElement);
+            });
+        }
+        // Load messages for a conversation
+        function loadMessages(convoId) {
+            const conversation = conversations.find(c => c.id === convoId);
+            if (!conversation) return;
+            currentChatName.textContent = conversation.name;
+            messages.innerHTML = '';
+            conversation.messages.forEach(msg => {
+                const messageElement = document.createElement('div');
+                messageElement.className = `flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`;
+                messageElement.innerHTML = `
+                    <div class="max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 ${msg.sender === 'me' ? 'bg-purple-500 text-white message-right' : 'bg-gray-200 text-gray-800 message-left'}">
+                        <p>${msg.text}</p>
+                        <p class="text-xs mt-1 ${msg.sender === 'me' ? 'text-purple-200' : 'text-gray-500'}">${msg.time}</p>
+                    </div>
+                `;
+                messages.appendChild(messageElement);
+            });
+            // Scroll to bottom
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+        }
+        // Send message
+        function sendMessage() {
+            const text = messageInput.value.trim();
+            if (!text) return;
+            // Add user message
+            const userMessage = {
+                text: text,
+                sender: 'me',
+                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            };
+            // In a real app, you would add this to the conversation in your data structure
+            const messageElement = document.createElement('div');
+            messageElement.className = 'flex justify-end';
+            messageElement.innerHTML = `
+                <div class="max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 bg-purple-500 text-white message-right">
+                    <p>${text}</p>
+                    <p class="text-xs mt-1 text-purple-200">${userMessage.time}</p>
+                </div>
+            `;
+            messages.appendChild(messageElement);
+            messageInput.value = '';
+            // Scroll to bottom
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+            // Show typing indicator
+            typingIndicator.classList.remove('hidden');
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+            // Simulate bot response after delay
+            setTimeout(() => {
+                typingIndicator.classList.add('hidden');
+                // In a real app, this would be an API call to your LLM
+                const botResponse = {
+                    text: getBotResponse(text),
+                    sender: 'them',
+                    time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                };
+                const botMessageElement = document.createElement('div');
+                botMessageElement.className = 'flex justify-start';
+                botMessageElement.innerHTML = `
+                    <div class="max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 bg-gray-200 text-gray-800 message-left">
+                        <p>${botResponse.text}</p>
+                        <p class="text-xs mt-1 text-gray-500">${botResponse.time}</p>
+                    </div>
+                `;
+                messages.appendChild(botMessageElement);
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }, 1500);
+        }
+        // Get bot response from LLM API
+        async function getBotResponse(input, firstName = '') {
+            // Prepare the request payload
+            const requestPayload = {
+                ...llmConfig,
+                messages: [
+                    ...llmConfig.messages,
+                    {
+                        role: "user",
+                        content: input,
+                        "First Name": firstName || undefined
+                    }
+                ]
+            };
+            try {
+                // In a real app, this would call your LLM API
+                // For demo, we'll simulate a response
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                // Sample responses that match Emma's persona
+                const emmaResponses = [
+                    "Lol that's so random! What made you think of that?",
+                    "Omg babe you're too sweet 😊 coding rn but wanna chat later?",
+                    "Haha I'm such a mess today - spilled coffee on my keyboard again!",
+                    "You're cute 😉 what's your favorite Pokemon? Mine's Pikachu!",
+                    "Ugh GitHub's acting up again...the struggle is real 😅",
+                    "Spicy ramen sounds so good rn! You hungry too?",
+                    "That's wild! Tell me more cutie 💕",
+                    "LOL same! I'm such a coding nerd sometimes 🤓",
+                    "Wait really? That's actually super interesting!",
+                    "Aww thanks babe! You're making me blush ☺️"
+                ];
+                return emmaResponses[Math.floor(Math.random() * emmaResponses.length)];
+            } catch (error) {
+                console.error('Error calling LLM API:', error);
+                return "Oops! My brain glitched 😅 Can you say that again?";
+            }
+        }
+        // Update last refresh time
+        function updateRefreshTime() {
+            const now = new Date();
+            lastRefreshTime.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            // In a real app, this would trigger scraping Instagram DMs
+            // For demo, we'll just reload conversations
+            loadConversations();
+        }
+        // Event listeners
+        sendBtn.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        refreshBtn.addEventListener('click', updateRefreshTime);
+        closeSettings.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+        });
+        // DOM elements
+        const loginModal = document.getElementById('loginModal');
+        const mainApp = document.getElementById('mainApp');
+        const loginBtn = document.getElementById('loginBtn');
+        const igUsername = document.getElementById('igUsername');
+        const igPassword = document.getElementById('igPassword');
+        // Login function
+        async function loginToInstagram() {
+            const username = igUsername.value.trim();
+            const password = igPassword.value.trim();
+            if (!username || !password) {
+                alert('Please enter both username and password');
+                return;
+            }
+            // Show loading state
+            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Logging in...';
+            loginBtn.disabled = true;
+            try {
+                // In a real app, this would use Puppeteer or similar to scrape Instagram
+                // For demo, we'll simulate a successful login
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                // Hide login, show main app
+                loginModal.classList.add('hidden');
+                mainApp.classList.remove('hidden');
+                // Initialize app
+                loadConversations();
+                updateRefreshTime();
+                // For demo purposes, load the first conversation
+                if (conversations.length > 0) {
+                    loadMessages(conversations[0].id);
+                }
+            } catch (error) {
+                alert('Login failed: ' + error.message);
+                loginBtn.innerHTML = 'Login to Instagram';
+                loginBtn.disabled = false;
+            }
+        }
+        // Event listeners
+        loginBtn.addEventListener('click', loginToInstagram);
+        // Initialize - show login modal
+        loginModal.classList.remove('hidden');
+        setTimeout(() => {
+            if (conversations.length > 0) {
+                loadMessages(conversations[0].id);
+            }
+        }, 500);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TuringsSolutions/instagram-dm-bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>