Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,237 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.6';
+import { pipeline, TextStreamer, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
+
+// Configure environment
+env.allowLocalModels = false;
+
+class ChatApp {
+constructor() {
+this.generator = null;
+this.conversationHistory = [
+{ role: "system", content: "You are a helpful, friendly AI assistant. Provide clear, concise, and accurate responses." }
+];
+this.isGenerating = false;
+
+this.elements = {
+loadingScreen: document.getElementById('loadingScreen'),
+chatInterface: document.getElementById('chatInterface'),
+messagesContainer: document.getElementById('messagesContainer'),
+userInput: document.getElementById('userInput'),
+sendButton: document.getElementById('sendButton'),
+loadingStatus: document.getElementById('loadingStatus'),
+progressFill: document.getElementById('progressFill'),
+progressText: document.getElementById('progressText')
+};
+
+this.init();
+}
 
-// 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');
+async init() {
+try {
+await this.loadModel();
+this.setupEventListeners();
+this.showChatInterface();
+} catch (error) {
+console.error('Initialization error:', error);
+this.showError('Failed to initialize the application. Please refresh the page.');
+}
+}
 
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+async loadModel() {
+this.updateLoadingStatus('Downloading model...', 0);
+
+try {
+this.generator = await pipeline(
+"text-generation",
+"onnx-community/Qwen2.5-0.5B-Instruct",
+{
+dtype: "q8",
+device: "webgpu",
+progress_callback: (progress) => {
+if (progress.status === 'progress') {
+const percent = Math.round((progress.loaded / progress.total) * 100);
+this.updateLoadingStatus(
+`Loading ${progress.file}...`,
+percent
+);
+} else if (progress.status === 'done') {
+this.updateLoadingStatus('Model loaded successfully!', 100);
+}
+}
+}
+);
+} catch (error) {
+console.log('WebGPU not available, falling back to WASM');
+this.generator = await pipeline(
+"text-generation",
+"onnx-community/Qwen2.5-0.5B-Instruct",
+{
+dtype: "q8",
+progress_callback: (progress) => {
+if (progress.status === 'progress') {
+const percent = Math.round((progress.loaded / progress.total) * 100);
+this.updateLoadingStatus(
+`Loading ${progress.file}...`,
+percent
+);
+}
+}
+}
+);
+}
+}
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+updateLoadingStatus(message, percent) {
+this.elements.loadingStatus.textContent = message;
+this.elements.progressFill.style.width = `${percent}%`;
+this.elements.progressText.textContent = `${percent}%`;
+}
+
+showChatInterface() {
+setTimeout(() => {
+this.elements.loadingScreen.style.display = 'none';
+this.elements.chatInterface.style.display = 'flex';
+this.elements.userInput.focus();
+}, 500);
+}
+
+setupEventListeners() {
+// Send button click
+this.elements.sendButton.addEventListener('click', () => this.handleSend());
+
+// Enter key to send (Shift+Enter for new line)
+this.elements.userInput.addEventListener('keydown', (e) => {
+if (e.key === 'Enter' && !e.shiftKey) {
+e.preventDefault();
+this.handleSend();
+}
+});
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
+// Auto-resize textarea
+this.elements.userInput.addEventListener('input', (e) => {
+e.target.style.height = 'auto';
+e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+this.elements.sendButton.disabled = !e.target.value.trim() || this.isGenerating;
 });
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+// Suggestion buttons
+document.querySelectorAll('.suggestion-btn').forEach(btn => {
+btn.addEventListener('click', (e) => {
+const prompt = e.target.dataset.prompt;
+this.elements.userInput.value = prompt;
+this.elements.userInput.dispatchEvent(new Event('input'));
+this.handleSend();
+});
+});
+}
 
-    const reader = new FileReader();
+async handleSend() {
+const message = this.elements.userInput.value.trim();
+if (!message || this.isGenerating) return;
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+// Clear input
+this.elements.userInput.value = '';
+this.elements.userInput.style.height = 'auto';
+this.elements.sendButton.disabled = true;
 
-    reader.readAsDataURL(file);
+// Hide welcome message if present
+const welcomeMsg = document.querySelector('.welcome-message');
+if (welcomeMsg) welcomeMsg.remove();
+
+// Add user message
+this.addMessage(message, 'user');
+
+// Add assistant message placeholder with typing indicator
+const assistantMessageDiv = this.addMessage('', 'assistant', true);
+const messageContent = assistantMessageDiv.querySelector('.message-content');
+
+// Add to conversation history
+this.conversationHistory.push({ role: "user", content: message });
+
+this.isGenerating = true;
+
+try {
+let fullResponse = '';
+
+// Create text streamer with callback
+const streamer = new TextStreamer(this.generator.tokenizer, {
+skip_prompt: true,
+skip_special_tokens: true,
+callback_function: (text) => {
+fullResponse += text;
+// Remove typing indicator if present
+const typingIndicator = messageContent.querySelector('.typing-indicator');
+if (typingIndicator) typingIndicator.remove();
+
+// Update message content
+messageContent.textContent = fullResponse;
+this.scrollToBottom();
+}
+});
+
+// Generate response
+const output = await this.generator(this.conversationHistory, {
+max_new_tokens: 512,
+do_sample: false,
+streamer: streamer,
 });
 
+// Get final response
+const finalResponse = output[0].generated_text.at(-1).content;
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+// Update conversation history
+this.conversationHistory.push({ role: "assistant", content: finalResponse });
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
+// Ensure final text is displayed
+messageContent.textContent = finalResponse;
+
+} catch (error) {
+console.error('Generation error:', error);
+messageContent.textContent = 'Sorry, I encountered an error generating a response. Please try again.';
+} finally {
+this.isGenerating = false;
+this.elements.sendButton.disabled = false;
+this.elements.userInput.focus();
+this.scrollToBottom();
+}
 }
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
+addMessage(content, role, showTyping = false) {
+const messageDiv = document.createElement('div');
+messageDiv.className = `message ${role}-message`;
+
+const avatar = document.createElement('div');
+avatar.className = 'message-avatar';
+avatar.textContent = role === 'user' ? '👤' : '🤖';
+
+const messageContent = document.createElement('div');
+messageContent.className = 'message-content';
+
+if (showTyping) {
+const typingIndicator = document.createElement('div');
+typingIndicator.className = 'typing-indicator';
+typingIndicator.innerHTML = '<span></span><span></span><span></span>';
+messageContent.appendChild(typingIndicator);
+} else {
+messageContent.textContent = content;
+}
 
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+messageDiv.appendChild(avatar);
+messageDiv.appendChild(messageContent);
+this.elements.messagesContainer.appendChild(messageDiv);
 
-    // 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) + '%',
-    })
+this.scrollToBottom();
+return messageDiv;
+}
 
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
+scrollToBottom() {
+this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollHeight;
+}
 
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+showError(message) {
+this.elements.loadingStatus.textContent = message;
+this.elements.loadingStatus.style.color = '#FF3B30';
 }
+}
+
+// Initialize the app
+new ChatApp();