Hugging Face's logo

Spaces:
Arrcttacsrks
/
Llama-3.2-3B_ChatX
Sleeping

App Files Community
Arrcttacsrks commited on
Commit
45aeeb7
•
1 Parent(s): a432baa

Upload 3 files

Browse files
Files changed (3) hide show
  1. app(4).py +27 -0
  2. index.html +78 -0
  3. style.css +79 -0
app(4).py ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, request, jsonify, send_from_directory
2
+ import torch
3
+ from transformers import pipeline
4
+
5
+ # Khởi tạo ứng dụng Flask
6
+ app = Flask(__name__)
7
+
8
+ # Khởi tạo mô hình
9
+ model_id = "meta-llama/Llama-3.2-3B-Instruct"
10
+ pipe = pipeline("text-generation", model=model_id, torch_dtype=torch.bfloat16)
11
+
12
+ @app.route('/')
13
+ def home():
14
+ return send_from_directory('.', 'index.html')
15
+
16
+ @app.route('/style.css')
17
+ def style():
18
+ return send_from_directory('.', 'style.css')
19
+
20
+ @app.route('/chat', methods=['POST'])
21
+ def chat():
22
+ user_input = request.json.get('message')
23
+ response = pipe(user_input, max_new_tokens=256)
24
+ return jsonify({'response': response[0]['generated_text']})
25
+
26
+ if __name__ == '__main__':
27
+ app.run()
index.html ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chatbot</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="chat-container">
11
+ <h1>Chatbot</h1>
12
+ <div id="chat-box"></div>
13
+ <input type="text" id="user-input" placeholder="Nhập tin nhắn ở đây...">
14
+ <input type="text" id="username" placeholder="Nhập tên của bạn..." />
15
+ <button id="send-button">Gửi</button>
16
+ <button id="clear-button">Xóa lịch sử</button>
17
+ </div>
18
+
19
+ <script>
20
+ const chatBox = document.getElementById('chat-box');
21
+ const userInput = document.getElementById('user-input');
22
+ const usernameInput = document.getElementById('username');
23
+ const sendButton = document.getElementById('send-button');
24
+ const clearButton = document.getElementById('clear-button');
25
+
26
+ // Lưu trữ lịch sử tin nhắn
27
+ const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
28
+
29
+ // Hiển thị lịch sử tin nhắn
30
+ chatHistory.forEach(msg => {
31
+ chatBox.innerHTML += `<div class="${msg.role}-message">${msg.content}</div>`;
32
+ });
33
+
34
+ function addMessage(role, content) {
35
+ chatHistory.push({ role, content });
36
+ localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
37
+ chatBox.innerHTML += `<div class="${role}-message">${content}</div>`;
38
+ chatBox.scrollTop = chatBox.scrollHeight; // Cuộn xuống dưới
39
+ }
40
+
41
+ sendButton.addEventListener('click', sendMessage);
42
+ userInput.addEventListener('keypress', function (e) {
43
+ if (e.key === 'Enter') {
44
+ sendMessage();
45
+ }
46
+ });
47
+
48
+ clearButton.addEventListener('click', clearChat);
49
+
50
+ function sendMessage() {
51
+ const message = userInput.value;
52
+ const username = usernameInput.value || "Người dùng";
53
+ if (!message) return;
54
+
55
+ addMessage('user', `<strong>${username}:</strong> ${message}`);
56
+ userInput.value = '';
57
+
58
+ fetch('/chat', {
59
+ method: 'POST',
60
+ headers: {
61
+ 'Content-Type': 'application/json'
62
+ },
63
+ body: JSON.stringify({ message })
64
+ })
65
+ .then(response => response.json())
66
+ .then(data => {
67
+ addMessage('bot', `<strong>Bot:</strong> ${data.response}`);
68
+ });
69
+ }
70
+
71
+ function clearChat() {
72
+ localStorage.removeItem('chatHistory');
73
+ chatHistory.length = 0;
74
+ chatBox.innerHTML = '';
75
+ }
76
+ </script>
77
+ </body>
78
+ </html>
style.css ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ background-color: #f7f9fc;
3
+ font-family: 'Arial', sans-serif;
4
+ }
5
+
6
+ .chat-container {
7
+ width: 90%;
8
+ max-width: 600px;
9
+ margin: 50px auto;
10
+ background-color: white;
11
+ border-radius: 10px;
12
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
13
+ padding: 20px;
14
+ display: flex;
15
+ flex-direction: column;
16
+ }
17
+
18
+ h1 {
19
+ text-align: center;
20
+ color: #333;
21
+ }
22
+
23
+ #chat-box {
24
+ height: 400px;
25
+ overflow-y: auto;
26
+ border: 1px solid #ccc;
27
+ border-radius: 5px;
28
+ padding: 10px;
29
+ margin-bottom: 10px;
30
+ background: linear-gradient(to bottom, #ffffff, #f0f0f0);
31
+ }
32
+
33
+ .user-message {
34
+ text-align: right;
35
+ background-color: #cce5ff;
36
+ padding: 10px;
37
+ border-radius: 5px;
38
+ margin: 5px 0;
39
+ display: inline-block;
40
+ max-width: 80%;
41
+ animation: fadeIn 0.5s;
42
+ }
43
+
44
+ .bot-response {
45
+ text-align: left;
46
+ background-color: #e2e3e5;
47
+ padding: 10px;
48
+ border-radius: 5px;
49
+ margin: 5px 0;
50
+ display: inline-block;
51
+ max-width: 80%;
52
+ animation: fadeIn 0.5s;
53
+ }
54
+
55
+ input[type="text"] {
56
+ border: 1px solid #ccc;
57
+ border-radius: 5px;
58
+ padding: 10px;
59
+ margin-top: 10px;
60
+ }
61
+
62
+ button {
63
+ background-color: #007bff;
64
+ color: white;
65
+ border: none;
66
+ border-radius: 5px;
67
+ padding: 10px;
68
+ cursor: pointer;
69
+ margin-top: 5px;
70
+ }
71
+
72
+ button:hover {
73
+ background-color: #0056b3;
74
+ }
75
+
76
+ @keyframes fadeIn {
77
+ from { opacity: 0; }
78
+ to { opacity: 1; }
79
+ }