Spaces:
Running
Running
File size: 4,877 Bytes
0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 dd1b723 0675392 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
// index.js content here
import { pipeline, TextStreamer } from "@huggingface/transformers";
class QwenChatApp {
constructor() {
this.generator = null;
this.chatHistory = [
{ role: "system", content: "You are a helpful assistant." }
];
this.initializeElements();
this.initializeEventListeners();
this.loadModel();
}
initializeElements() {
this.chatContainer = document.getElementById('chat-container');
this.chatHistoryElement = document.getElementById('chat-history');
this.userInputElement = document.getElementById('user-input');
this.submitButton = document.getElementById('submit-btn');
this.loadingElement = document.getElementById('loading');
this.form = document.getElementById('input-form');
}
initializeEventListeners() {
this.form.addEventListener('submit', (e) => this.handleSubmit(e));
}
async loadModel() {
try {
this.showLoading(true);
this.generator = await pipeline(
"text-generation",
"onnx-community/Qwen3-0.6B-ONNX",
{ dtype: "q4f16" }
);
this.showLoading(false);
this.addMessage("assistant", "Hello! I'm ready to help you with questions about machine learning. What would you like to know?");
} catch (error) {
this.showLoading(false);
this.addMessage("assistant", "Sorry, I encountered an error loading the model. Please refresh the page.");
console.error("Error loading model:", error);
}
}
async handleSubmit(e) {
e.preventDefault();
const userInput = this.userInputElement.value.trim();
if (!userInput || !this.generator) return;
// Add user message to history
this.addMessage("user", userInput);
this.userInputElement.value = "";
try {
this.showLoading(true);
// Add user input to chat history
this.chatHistory.push({ role: "user", content: userInput });
// Create streamer for real-time output
let responseText = "";
const assistantMessageElement = this.addMessage("assistant", "", true);
const streamer = new TextStreamer(this.generator.tokenizer, {
skip_prompt: true,
skip_special_tokens: true,
callback_function: (text) => {
responseText += text;
assistantMessageElement.textContent = responseText;
this.scrollToBottom();
}
});
// Generate response
const output = await this.generator(this.chatHistory, {
max_new_tokens: 256,
do_sample: false,
streamer: streamer
});
// Update chat history with assistant response
const assistantResponse = output[0].generated_text.at(-1).content;
this.chatHistory.push({ role: "assistant", content: assistantResponse });
this.showLoading(false);
} catch (error) {
this.showLoading(false);
this.addMessage("assistant", "Sorry, I encountered an error generating the response. Please try again.");
console.error("Error generating response:", error);
}
}
addMessage(role, content, isStreaming = false) {
const messageElement = document.createElement('div');
messageElement.classList.add('message', role);
const roleElement = document.createElement('div');
roleElement.classList.add('role');
roleElement.textContent = role === 'user' ? 'You' : 'Assistant';
const contentElement = document.createElement('div');
contentElement.classList.add('content');
contentElement.textContent = content;
messageElement.appendChild(roleElement);
messageElement.appendChild(contentElement);
this.chatHistoryElement.appendChild(messageElement);
if (!isStreaming) {
this.scrollToBottom();
}
return contentElement;
}
scrollToBottom() {
this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
}
showLoading(show) {
if (show) {
this.loadingElement.classList.remove('hidden');
this.submitButton.disabled = true;
} else {
this.loadingElement.classList.add('hidden');
this.submitButton.disabled = false;
}
this.scrollToBottom();
}
}
// Initialize the app when the page loads
document.addEventListener('DOMContentLoaded', () => {
new QwenChatApp();
}); |