Upload index.js with huggingface_hub

index.js

@@ -0,0 +1,175 @@
+// Main application logic
+class ChatAssistant {
+    constructor() {
+        this.pipeline = null;
+        this.isModelLoaded = false;
+        this.worker = null;
+        this.messageHistory = [];
+        
+        this.initializeElements();
+        this.setupEventListeners();
+        this.loadModel();
+    }
+    
+    initializeElements() {
+        this.chatMessages = document.getElementById('chatMessages');
+        this.userInput = document.getElementById('userInput');
+        this.sendButton = document.getElementById('sendButton');
+        this.modelStatus = document.getElementById('modelStatus');
+        this.progressFill = document.getElementById('progressFill');
+        this.progressText = document.getElementById('progressText');
+    }
+    
+    setupEventListeners() {
+        this.sendButton.addEventListener('click', () => this.sendMessage());
+        this.userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+    }
+    
+    async loadModel() {
+        try {
+            this.modelStatus.textContent = 'Loading model...';
+            this.updateProgress(0, 'Initializing...');
+            
+            // Create a Web Worker for model loading
+            this.worker = new Worker('worker.js');
+            
+            // Listen for messages from the worker
+            this.worker.onmessage = (event) => {
+                const { type, data, progress } = event.data;
+                
+                if (type === 'progress') {
+                    this.updateProgress(progress * 100, `Downloading: ${Math.round(progress * 100)}%`);
+                } else if (type === 'ready') {
+                    this.pipeline = data;
+                    this.isModelLoaded = true;
+                    this.modelStatus.textContent = 'Ready';
+                    this.updateProgress(100, 'Model loaded!');
+                    this.addMessage('assistant', 'Hola! I\'m ready to chat. How can I help you today?');
+                } else if (type === 'error') {
+                    this.handleError(data);
+                }
+            };
+            
+            // Start model loading in worker
+            this.worker.postMessage({ type: 'loadModel' });
+            
+        } catch (error) {
+            this.handleError(error);
+        }
+    }
+    
+    updateProgress(percentage, text) {
+        this.progressFill.style.width = `${percentage}%`;
+        this.progressText.textContent = text;
+    }
+    
+    async sendMessage() {
+        const userInput = this.userInput.value.trim();
+        if (!userInput || !this.isModelLoaded) return;
+        
+        // Add user message to chat
+        this.addMessage('user', userInput);
+        this.userInput.value = '';
+        this.userInput.disabled = true;
+        this.sendButton.disabled = true;
+        
+        try {
+            // Show typing indicator
+            const typingIndicator = this.addTypingIndicator();
+            
+            // Generate response
+            const response = await this.generateResponse(userInput);
+            
+            // Remove typing indicator and add response
+            typingIndicator.remove();
+            this.addMessage('assistant', response);
+            
+        } catch (error) {
+            this.handleError(error);
+            this.userInput.disabled = false;
+            this.sendButton.disabled = false;
+        }
+        
+        this.userInput.disabled = false;
+        this.sendButton.disabled = false;
+        this.userInput.focus();
+    }
+    
+    async generateResponse(input) {
+        if (!this.pipeline) {
+            throw new Error('Model not loaded');
+        }
+        
+        try {
+            const result = await this.pipeline(input, {
+                max_new_tokens: 100,
+                temperature: 0.7,
+                top_p: 0.9,
+                do_sample: true,
+                return_full_text: false
+            });
+            
+            return result[0].generated_text.trim();
+        } catch (error) {
+            throw new Error('Failed to generate response: ' + error.message);
+        }
+    }
+    
+    addMessage(sender, content) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const messageContent = document.createElement('div');
+        messageContent.className = 'message-content';
+        messageContent.textContent = content;
+        
+        messageDiv.appendChild(messageContent);
+        this.chatMessages.appendChild(messageDiv);
+        
+        // Scroll to bottom
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+        
+        this.messageHistory.push({ sender, content });
+    }
+    
+    addTypingIndicator() {
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'message assistant';
+        
+        const typingContent = document.createElement('div');
+        typingContent.className = 'message-content typing';
+        
+        const dots = document.createElement('span');
+        dots.textContent = '...';
+        typingContent.appendChild(dots);
+        
+        typingDiv.appendChild(typingContent);
+        this.chatMessages.appendChild(typingDiv);
+        
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+        
+        return typingDiv;
+    }
+    
+    handleError(error) {
+        console.error('Error:', error);
+        this.modelStatus.textContent = 'Error';
+        this.addMessage('assistant', 'Sorry, I encountered an error. Please try again later.');
+        
+        // Show error message to user
+        const errorMessage = document.createElement('div');
+        errorMessage.className = 'error-message';
+        errorMessage.textContent = 'An error occurred: ' + error.message;
+        this.chatMessages.appendChild(errorMessage);
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new ChatAssistant();
+});