Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,332 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6';
+// Main application logic for Apple Style Chatbot
+import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
 
-// 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: 400,
+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');
 
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+// Setup event listeners
+this.setupEventListeners();
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+// Load model
+await this.loadModel();
+}
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
+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();
+}
 });
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+// 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 reader = new FileReader();
+// Auto-resize textarea
+e.target.style.height = 'auto';
+e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+});
+
+// Clear button
+this.clearBtn.addEventListener('click', () => this.clearChat());
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+// Settings
+this.settingsBtn.addEventListener('click', () => this.openSettings());
+document.getElementById('closeSettings').addEventListener('click', () => this.closeSettings());
+document.getElementById('saveSettings').addEventListener('click', () => this.saveSettings());
+
+// Settings inputs
+document.getElementById('maxTokens').addEventListener('input', (e) => {
+document.getElementById('maxTokensValue').textContent = e.target.value;
+});
 
-    reader.readAsDataURL(file);
+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();
+}
+});
+}
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+async loadModel() {
+try {
+this.updateProgress(10, 'Downloading model...');
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
+// 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);
 }
+}
+);
+
+this.updateProgress(100, 'Model ready!');
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
+// 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);
 
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+} catch (error) {
+console.error('Error loading model:', error);
+this.showError('Failed to load AI model. Please refresh the page and try again.');
+}
+}
+
+updateProgress(progress, status) {
+this.progressFill.style.width = `${progress}%`;
+this.loadingStatus.textContent = status;
+}
 
-    // 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) + '%',
-    })
+async sendMessage() {
+const text = this.messageInput.value.trim();
+if (!text || this.isGenerating || !this.generator) return;
 
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
+// Add user message
+this.addMessage('user', text);
+this.messages.push({ role: 'user', content: text });
 
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+// 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}`;
+
+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();
+});