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();
});