Add application file

app.py

@@ -35,11 +35,20 @@ class ProgressCallback:
         self.failed_count = 0
         
     def update_progress(self, current, total, success, failed, comment_text=""):
+        global bot_status
+        
         self.current_progress = current
         self.total_comments = total
         self.success_count = success
         self.failed_count = failed
         
+        # Update global bot status
+        bot_status['current_progress'] = current
+        bot_status['total_comments'] = total
+        bot_status['success_count'] = success
+        bot_status['failed_count'] = failed
+        bot_status['current_comment'] = comment_text
+        
         # Emit progress update to all connected clients
         self.socketio.emit('progress_update', {
             'current': current,
@@ -187,6 +196,8 @@ def run_tiktok_bot(video_url, comment_text, num_comments):
 @socketio.on('connect')
 def handle_connect():
     emit('connected', {'message': 'Connected to server'})
+    # Send current bot status to the newly connected client
+    emit('bot_status', bot_status)
 
 @socketio.on('disconnect')
 def handle_disconnect():

templates/index.html

@@ -155,8 +155,46 @@
         
         let isRunning = false;
         
+        // Fetch current bot status when page loads
+        fetchCurrentStatus();
+        
         socket.on('connect', function(data) {
             addLog('Connected to server', 'success');
+            // Fetch current bot status when connecting
+            fetchCurrentStatus();
+        });
+        
+        socket.on('bot_status', function(data) {
+            // Update UI with current bot status from server
+            isRunning = data.is_running;
+            
+            if (isRunning) {
+                // Update progress section
+                progressSection.classList.remove('hidden');
+                
+                // Update progress bar
+                const percentage = data.total_comments > 0 
+                    ? Math.round((data.current_progress / data.total_comments) * 100) 
+                    : 0;
+                progressBar.style.width = `${percentage}%`;
+                progressText.textContent = `${data.current_progress} / ${data.total_comments} (${percentage}%)`;
+                
+                // Update statistics
+                successCount.textContent = data.success_count;
+                failedCount.textContent = data.failed_count;
+                
+                if (data.current_comment) {
+                    currentComment.textContent = data.current_comment.length > 20 
+                        ? data.current_comment.substring(0, 20) + '...' 
+                        : data.current_comment;
+                }
+                
+                // Update status
+                statusText.textContent = data.status_message;
+                addLog(`Bot is currently running: ${data.status_message}`, 'info');
+            }
+            
+            updateUI();
         });
         
         socket.on('bot_started', function(data) {
@@ -196,6 +234,12 @@
             addLog(data.message, 'error');
         });
         
+        socket.on('bot_stopped', function(data) {
+            isRunning = false;
+            updateUI();
+            addLog(data.message, 'warning');
+        });
+        
         botForm.addEventListener('submit', async function(e) {
             e.preventDefault();
             
@@ -243,6 +287,45 @@
             }
         });
         
+        async function fetchCurrentStatus() {
+            try {
+                const response = await fetch('/status');
+                const status = await response.json();
+                
+                isRunning = status.is_running;
+                
+                if (isRunning) {
+                    // Update progress section
+                    progressSection.classList.remove('hidden');
+                    
+                    // Update progress bar
+                    const percentage = status.total_comments > 0 
+                        ? Math.round((status.current_progress / status.total_comments) * 100) 
+                        : 0;
+                    progressBar.style.width = `${percentage}%`;
+                    progressText.textContent = `${status.current_progress} / ${status.total_comments} (${percentage}%)`;
+                    
+                    // Update statistics
+                    successCount.textContent = status.success_count;
+                    failedCount.textContent = status.failed_count;
+                    
+                    if (status.current_comment) {
+                        currentComment.textContent = status.current_comment.length > 20 
+                            ? status.current_comment.substring(0, 20) + '...' 
+                            : status.current_comment;
+                    }
+                    
+                    // Update status
+                    statusText.textContent = status.status_message;
+                    addLog(`Bot is currently running: ${status.status_message}`, 'info');
+                }
+                
+                updateUI();
+            } catch (error) {
+                addLog(`Error fetching status: ${error.message}`, 'error');
+            }
+        }
+        
         function updateUI() {
             if (isRunning) {
                 startBtn.disabled = true;