Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,327 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
+// Main application logic for Apple Style Chatbot
+import { pipeline, TextStreamer } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
 
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
+class AppleChatbot {
+    constructor() {
+        this.generator = null;
+        this.isGenerating = false;
+        this.messages = [];
+        this.settings = {
+            maxTokens: 512,
+            temperature: 0.7,
+            streaming: true
+        };
+        this.init();
+    }
+
+    async init() {
+        // Initialize UI elements
+        this.loadingScreen = document.getElementById('loadingScreen');
+        this.chatContainer = document.getElementById('chatContainer');
+        this.inputArea = document.getElementById('inputArea');
+        this.messagesList = document.getElementById('messagesList');
+        this.messageInput = document.getElementById('messageInput');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.clearBtn = document.getElementById('clearBtn');
+        this.settingsBtn = document.getElementById('settingsBtn');
+        this.progressFill = document.getElementById('progressFill');
+        this.loadingStatus = document.getElementById('loadingStatus');
+        this.charCount = document.getElementById('charCount');
+
+        // Setup event listeners
+        this.setupEventListeners();
+
+        // Load model
+        await this.loadModel();
+    }
+
+    setupEventListeners() {
+        // Send button
+        this.sendBtn.addEventListener('click', () => this.sendMessage());
+
+        // Enter key to send (Shift+Enter for new line)
+        this.messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+
+        // Character count
+        this.messageInput.addEventListener('input', (e) => {
+            const length = e.target.value.length;
+            this.charCount.textContent = `${length} / 1000`;
+            this.sendBtn.disabled = length === 0 || this.isGenerating;
 
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+            // Auto-resize textarea
+            e.target.style.height = 'auto';
+            e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+        });
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+        // Clear button
+        this.clearBtn.addEventListener('click', () => this.clearChat());
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
+        // Settings
+        this.settingsBtn.addEventListener('click', () => this.openSettings());
+        document.getElementById('closeSettings').addEventListener('click', () => this.closeSettings());
+        document.getElementById('saveSettings').addEventListener('click', () => this.saveSettings());
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
+        // Settings inputs
+        document.getElementById('maxTokens').addEventListener('input', (e) => {
+            document.getElementById('maxTokensValue').textContent = e.target.value;
+        });
+
+        document.getElementById('temperature').addEventListener('input', (e) => {
+            document.getElementById('temperatureValue').textContent = e.target.value;
+        });
+
+        // Close modal on backdrop click
+        document.getElementById('settingsModal').addEventListener('click', (e) => {
+            if (e.target.id === 'settingsModal') {
+                this.closeSettings();
+            }
+        });
     }
 
-    const reader = new FileReader();
+    async loadModel() {
+        try {
+            this.updateProgress(10, 'Downloading model...');
+            
+            // Initialize the text generation pipeline with progress callback
+            this.generator = await pipeline(
+                'text-generation',
+                'onnx-community/gemma-3-270m-it-ONNX',
+                {
+                    dtype: 'fp32',
+                    progress_callback: (progress) => {
+                        const percentage = Math.round(progress.progress * 100);
+                        const status = progress.status || 'Loading...';
+                        this.updateProgress(percentage, status);
+                    }
+                }
+            );
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+            this.updateProgress(100, 'Model ready!');
 
-    reader.readAsDataURL(file);
-});
+            // Hide loading screen and show chat
+            setTimeout(() => {
+                this.loadingScreen.style.display = 'none';
+                this.chatContainer.style.display = 'block';
+                this.inputArea.style.display = 'block';
+                this.messageInput.focus();
+            }, 500);
 
+        } catch (error) {
+            console.error('Error loading model:', error);
+            this.showError('Failed to load AI model. Please refresh the page and try again.');
+        }
+    }
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+    updateProgress(progress, status) {
+        this.progressFill.style.width = `${progress}%`;
+        this.loadingStatus.textContent = status;
+    }
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
+    async sendMessage() {
+        const text = this.messageInput.value.trim();
+        if (!text || this.isGenerating || !this.generator) return;
+
+        // Add user message
+        this.addMessage('user', text);
+        this.messages.push({ role: 'user', content: text });
+
+        // Clear input
+        this.messageInput.value = '';
+        this.charCount.textContent = '0 / 1000';
+        this.sendBtn.disabled = true;
+        this.messageInput.style.height = 'auto';
+
+        // Show typing indicator
+        const typingMessage = this.showTypingIndicator();
+
+        try {
+            this.isGenerating = true;
+
+            // Generate response
+            const response = await this.generateResponse();
+
+            // Remove typing indicator
+            typingMessage.remove();
+
+            // Add assistant response
+            this.addMessage('assistant', response);
+            this.messages.push({ role: 'assistant', content: response });
+
+        } catch (error) {
+            console.error('Error generating response:', error);
+            typingMessage.remove();
+            this.addMessage('assistant', 'Sorry, I encountered an error while generating a response. Please try again.');
+        } finally {
+            this.isGenerating = false;
+            this.sendBtn.disabled = false;
+            this.messageInput.focus();
+        }
+    }
+
+    async generateResponse() {
+        if (!this.generator) throw new Error('Generator not initialized');
+
+        const generationParams = {
+            max_new_tokens: this.settings.maxTokens,
+            do_sample: this.settings.temperature > 0,
+            temperature: this.settings.temperature,
+        };
+
+        // Create prompt from messages
+        const prompt = this.createPrompt();
+        
+        // Generate response
+        const output = await this.generator(prompt, generationParams);
+        
+        // Extract the assistant's response
+        const generatedText = output[0].generated_text;
+        const response = generatedText.replace(prompt, '').trim();
+        
+        return response || 'I apologize, but I couldn\'t generate a response.';
+    }
+
+    createPrompt() {
+        // Create a simple prompt from the conversation history
+        let prompt = '';
+        for (const msg of this.messages) {
+            if (msg.role === 'user') {
+                prompt += `User: ${msg.content}\n`;
+            } else {
+                prompt += `Assistant: ${msg.content}\n`;
+            }
+        }
+        prompt += 'Assistant: ';
+        return prompt;
+    }
+
+    addMessage(role, content) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${role}`;
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+        const avatar = document.createElement('div');
+        avatar.className = 'message-avatar';
+        avatar.innerHTML = role === 'user'
+            ? '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>'
+            : '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" /></svg>';
+
+        const messageContent = document.createElement('div');
+        messageContent.className = 'message-content';
+
+        const messageText = document.createElement('div');
+        messageText.className = 'message-text';
+        messageText.textContent = content;
+
+        const messageTime = document.createElement('div');
+        messageTime.className = 'message-time';
+        messageTime.textContent = this.getCurrentTime();
+
+        messageContent.appendChild(messageText);
+        messageContent.appendChild(messageTime);
+        messageDiv.appendChild(avatar);
+        messageDiv.appendChild(messageContent);
+
+        this.messagesList.appendChild(messageDiv);
+
+        // Scroll to bottom
+        this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
+    }
+
+    showTypingIndicator() {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message assistant';
+
+        const avatar = document.createElement('div');
+        avatar.className = 'message-avatar';
+        avatar.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" /></svg>';
+
+        const messageContent = document.createElement('div');
+        messageContent.className = 'message-content';
+
+        const typingIndicator = document.createElement('div');
+        typingIndicator.className = 'message-text typing-indicator';
+        typingIndicator.innerHTML = `
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
+        `;
+
+        const messageTime = document.createElement('div');
+        messageTime.className = 'message-time';
+        messageTime.textContent = 'Typing...';
+
+        messageContent.appendChild(typingIndicator);
+        messageContent.appendChild(messageTime);
+        messageDiv.appendChild(avatar);
+        messageDiv.appendChild(messageContent);
+
+        this.messagesList.appendChild(messageDiv);
+        this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
+
+        return messageDiv;
+    }
+
+    getCurrentTime() {
+        const now = new Date();
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    }
+
+    clearChat() {
+        if (confirm('Are you sure you want to clear all messages?')) {
+            // Keep only the welcome message
+            this.messagesList.innerHTML = `
+                <div class="message assistant">
+                    <div class="message-avatar">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" />
+                        </svg>
+                    </div>
+                    <div class="message-content">
+                        <div class="message-text">
+                            Hello! I'm your AI assistant powered by Gemma-3. How can I help you today?
+                        </div>
+                        <div class="message-time">${this.getCurrentTime()}</div>
+                    </div>
+                </div>
+            `;
+            this.messages = [];
+            this.messageInput.focus();
+        }
+    }
+
+    openSettings() {
+        document.getElementById('settingsModal').classList.add('active');
+        document.getElementById('maxTokens').value = this.settings.maxTokens;
+        document.getElementById('maxTokensValue').textContent = this.settings.maxTokens;
+        document.getElementById('temperature').value = this.settings.temperature;
+        document.getElementById('temperatureValue').textContent = this.settings.temperature;
+        document.getElementById('streaming').checked = this.settings.streaming;
+    }
+
+    closeSettings() {
+        document.getElementById('settingsModal').classList.remove('active');
+    }
+
+    saveSettings() {
+        this.settings.maxTokens = parseInt(document.getElementById('maxTokens').value);
+        this.settings.temperature = parseFloat(document.getElementById('temperature').value);
+        this.settings.streaming = document.getElementById('streaming').checked;
+        this.closeSettings();
+    }
+
+    showError(message) {
+        this.loadingStatus.textContent = message;
+        this.loadingStatus.style.color = 'var(--error)';
+    }
 }
+
+// Initialize the chatbot when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new AppleChatbot();
+});