Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,261 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6';
+import { pipeline, TextStreamer } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers";
 
-// 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 = [
+{ role: "system", content: "You are a helpful assistant. Be concise and friendly in your responses." }
+];
+this.init();
+}
 
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+async init() {
+this.setupEventListeners();
+await this.loadModel();
+}
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+setupEventListeners() {
+const messageInput = document.getElementById('messageInput');
+const sendButton = document.getElementById('sendButton');
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
+// Handle input changes
+messageInput.addEventListener('input', () => {
+this.updateCharCount();
+this.autoResizeTextarea();
+sendButton.disabled = !messageInput.value.trim() || this.isGenerating;
 });
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+// Handle Enter key
+messageInput.addEventListener('keydown', (e) => {
+if (e.key === 'Enter' && !e.shiftKey) {
+e.preventDefault();
+this.sendMessage();
+}
+});
+
+// Handle send button
+sendButton.addEventListener('click', () => this.sendMessage());
+}
+
+updateCharCount() {
+const messageInput = document.getElementById('messageInput');
+const charCount = document.getElementById('charCount');
+charCount.textContent = `${messageInput.value.length} / 2000`;
+}
+
+autoResizeTextarea() {
+const textarea = document.getElementById('messageInput');
+textarea.style.height = 'auto';
+textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+}
+
+async loadModel() {
+try {
+// Show loading overlay
+const loadingOverlay = document.getElementById('loadingOverlay');
+const progressFill = document.getElementById('progressFill');
+const progressText = document.getElementById('progressText');
+const modelStatus = document.getElementById('modelStatus');
+const statusDot = modelStatus.querySelector('.status-dot');
+const statusText = modelStatus.querySelector('.status-text');
+
+// Update status
+statusText.textContent = 'Loading model...';
+statusDot.className = 'status-dot loading';
+
+// Create 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);
+progressFill.style.width = `${percentage}%`;
+progressText.textContent = `${percentage}%`;
+
+if (progress.status === 'downloading') {
+statusText.textContent = `Downloading... ${percentage}%`;
+} else if (progress.status === 'ready') {
+statusText.textContent = 'Processing model...';
+}
+}
+}
+);
+
+// Hide loading overlay
+loadingOverlay.style.opacity = '0';
+setTimeout(() => {
+loadingOverlay.style.display = 'none';
+}, 300);
+
+// Update status to ready
+statusText.textContent = 'Ready';
+statusDot.className = 'status-dot ready';
+document.getElementById('sendButton').disabled = false;
+
+} catch (error) {
+console.error('Error loading model:', error);
+const loadingOverlay = document.getElementById('loadingOverlay');
+const loadingContent = loadingOverlay.querySelector('.loading-content');
+
+loadingContent.innerHTML = `
+<div class="error-content">
+  <i class="fas fa-exclamation-triangle"></i>
+  <h2>Failed to Load Model</h2>
+  <p>There was an error loading the AI model. Please refresh the page and try again.</p>
+  <button onclick="location.reload()" class="retry-button">
+                        <i class="fas fa-redo"></i> Retry
+                    </button>
+</div>
+`;
+}
+}
+
+async sendMessage() {
+if (this.isGenerating || !this.generator) return;
+
+const messageInput = document.getElementById('messageInput');
+const message = messageInput.value.trim();
 
-    const reader = new FileReader();
+if (!message) return;
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+// Add user message to history
+this.messages.push({ role: "user", content: message });
+this.addMessageToUI(message, 'user');
 
-    reader.readAsDataURL(file);
+// Clear input
+messageInput.value = '';
+this.updateCharCount();
+this.autoResizeTextarea();
+
+// Disable send button
+this.isGenerating = true;
+document.getElementById('sendButton').disabled = true;
+
+// Show typing indicator
+this.showTypingIndicator();
+
+try {
+// Create text streamer for real-time output
+const streamer = new TextStreamer(this.generator.tokenizer, {
+skip_prompt: true,
+skip_special_tokens: true,
+callback_function: (text) => {
+this.updateStreamingMessage(text);
+}
 });
 
+// Generate response
+const output = await this.generator(this.messages, {
+max_new_tokens: 512,
+do_sample: false,
+temperature: 0.7,
+streamer: streamer
+});
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+// Get the assistant's response
+const assistantMessage = output[0].generated_text.at(-1).content;
+this.messages.push({ role: "assistant", content: assistantMessage });
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
+} catch (error) {
+console.error('Error generating response:', error);
+this.addMessageToUI('Sorry, I encountered an error. Please try again.', 'assistant error');
+} finally {
+// Hide typing indicator and re-enable send button
+this.hideTypingIndicator();
+this.isGenerating = false;
+document.getElementById('sendButton').disabled = false;
+}
 }
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
+showTypingIndicator() {
+const typingIndicator = document.getElementById('typingIndicator');
+typingIndicator.style.display = 'block';
 
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+// Create a placeholder message for streaming
+this.streamingMessageElement = this.addMessageToUI('', 'assistant', true);
+}
+
+hideTypingIndicator() {
+const typingIndicator = document.getElementById('typingIndicator');
+typingIndicator.style.display = 'none';
+}
+
+updateStreamingMessage(text) {
+if (this.streamingMessageElement) {
+const messageContent = this.streamingMessageElement.querySelector('.message-text');
+if (messageContent) {
+messageContent.textContent = text;
+this.scrollToBottom();
+}
+}
+}
 
-    // 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) + '%',
-    })
+addMessageToUI(content, role, isStreaming = false) {
+const chatMessages = document.getElementById('chatMessages');
+const messageDiv = document.createElement('div');
+messageDiv.className = `message ${role}`;
 
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
+const messageContent = document.createElement('div');
+messageContent.className = 'message-content';
 
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+if (role === 'assistant') {
+messageContent.innerHTML = `
+<div class="avatar">
+  <i class="fas fa-robot"></i>
+</div>
+<div class="message-content-inner">
+  <div class="message-role">AI Assistant</div>
+  <div class="message-text">${isStreaming ? '' : this.formatMessage(content)}</div>
+</div>
+`;
+} else if (role === 'user') {
+messageContent.innerHTML = `
+<div class="avatar user">
+  <i class="fas fa-user"></i>
+</div>
+<div class="message-content-inner">
+  <div class="message-role">You</div>
+  <div class="message-text">${this.formatMessage(content)}</div>
+</div>
+`;
+} else {
+messageContent.innerHTML = `<p>${content}</p>`;
 }
+
+messageDiv.appendChild(messageContent);
+chatMessages.appendChild(messageDiv);
+
+// Smooth scroll to bottom
+this.scrollToBottom();
+
+// Add entrance animation
+requestAnimationFrame(() => {
+messageDiv.style.opacity = '1';
+messageDiv.style.transform = 'translateY(0)';
+});
+
+return messageDiv;
+}
+
+formatMessage(content) {
+// Basic markdown-like formatting
+return content
+.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+.replace(/\*(.*?)\*/g, '<em>$1</em>')
+.replace(/`(.*?)`/g, '<code>$1</code>')
+.replace(/\n/g, '<br>');
+    }
+
+    scrollToBottom() {
+        const chatMessages = document.getElementById('chatMessages');
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+}
+
+// Initialize the chatbot when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new AppleChatBot();
+});