Hugging Face's logo

Spaces:
Ouiam123
/
chatbot_app
Runtime error

App Files Community
Ouiam123 commited on
Commit
f5e2bdd
·
verified ·
1 Parent(s): db0dd0c

Upload 3 files

Browse files
Files changed (3) hide show
  1. app.py +57 -0
  2. requirements.txt +2 -0
  3. templates/index.html +120 -0
app.py ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ from flask import Flask, render_template, request, jsonify
3
+ import requests
4
+ import time
5
+ from dotenv import load_dotenv
6
+
7
+ load_dotenv() # Load environment variables from .env file
8
+
9
+ app = Flask(__name__)
10
+
11
+ class APIInferenceChatbot:
12
+ def __init__(self, api_token):
13
+ self.api_url = "https://api-inference.huggingface.co/models/Ouiam123/Llama-2-7b-chat-finetune-tourism"
14
+ self.headers = {
15
+ "Authorization": f"Bearer {api_token}",
16
+ "Content-Type": "application/json"
17
+ }
18
+
19
+ def generate_response(self, input_text):
20
+ formatted_prompt = f"<s>[INST] {input_text} [/INST>"
21
+ payload = {
22
+ "inputs": formatted_prompt,
23
+ "parameters": {
24
+ "max_new_tokens": 500,
25
+ "temperature": 0.7,
26
+ "top_p": 0.95,
27
+ "repetition_penalty": 1.15
28
+ }
29
+ }
30
+ response = requests.post(self.api_url, headers=self.headers, json=payload, timeout=30)
31
+ if response.status_code == 503:
32
+ time.sleep(20)
33
+ response = requests.post(self.api_url, headers=self.headers, json=payload)
34
+ response.raise_for_status()
35
+ result = response.json()
36
+ return result[0].get('generated_text', '').strip() if isinstance(result, list) and result else str(result)
37
+
38
+ # Get the API token from the environment variable
39
+ api_token = os.getenv("HF_API_TOKEN")
40
+ if not api_token:
41
+ raise ValueError("Hugging Face API token not found in environment variables!")
42
+
43
+ # Initialize the chatbot with the API token from the environment
44
+ chatbot = APIInferenceChatbot(api_token)
45
+
46
+ @app.route('/')
47
+ def home():
48
+ return render_template('index.html') # Serve the HTML file
49
+
50
+ @app.route('/chat', methods=['POST'])
51
+ def chat():
52
+ message = request.json.get('message', '')
53
+ response = chatbot.generate_response(message)
54
+ return jsonify({'response': response}) # Return the response as JSON
55
+
56
+ if __name__ == '__main__':
57
+ app.run(host='0.0.0.0', port=7860, debug=True)
requirements.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ flask
2
+ requests
templates/index.html ADDED
@@ -0,0 +1,120 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>🇲🇦 Moroccan Tourism Assistant</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ max-width: 800px;
12
+ margin: 20px auto;
13
+ padding: 0 20px;
14
+ }
15
+ .chat-container {
16
+ border: 1px solid #ccc;
17
+ border-radius: 5px;
18
+ padding: 20px;
19
+ height: 400px;
20
+ overflow-y: auto;
21
+ margin-bottom: 20px;
22
+ }
23
+ .message {
24
+ margin: 10px 0;
25
+ padding: 10px;
26
+ border-radius: 5px;
27
+ }
28
+ .user-message {
29
+ background-color: #e3f2fd;
30
+ margin-left: 20%;
31
+ }
32
+ .bot-message {
33
+ background-color: #f5f5f5;
34
+ margin-right: 20%;
35
+ }
36
+ .input-container {
37
+ display: flex;
38
+ gap: 10px;
39
+ }
40
+ #user-input {
41
+ flex-grow: 1;
42
+ padding: 10px;
43
+ border: 1px solid #ccc;
44
+ border-radius: 5px;
45
+ }
46
+ button {
47
+ padding: 10px 20px;
48
+ background-color: #007bff;
49
+ color: white;
50
+ border: none;
51
+ border-radius: 5px;
52
+ cursor: pointer;
53
+ }
54
+ button:hover {
55
+ background-color: #0056b3;
56
+ }
57
+ .loading {
58
+ display: none;
59
+ margin: 10px 0;
60
+ color: #666;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <h1>🇲🇦 Moroccan Tourism Assistant</h1>
66
+ <div class="chat-container" id="chat-container"></div>
67
+ <div class="loading" id="loading">Assistant is thinking...</div>
68
+ <div class="input-container">
69
+ <input type="text" id="user-input" placeholder="Ask about tourism in Morocco...">
70
+ <button onclick="sendMessage()">Send</button>
71
+ </div>
72
+
73
+ <script>
74
+ function addMessage(message, isUser) {
75
+ const chatContainer = document.getElementById('chat-container');
76
+ const messageDiv = document.createElement('div');
77
+ messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
78
+ messageDiv.textContent = message;
79
+ chatContainer.appendChild(messageDiv);
80
+ chatContainer.scrollTop = chatContainer.scrollHeight;
81
+ }
82
+
83
+ function sendMessage() {
84
+ const input = document.getElementById('user-input');
85
+ const message = input.value.trim();
86
+
87
+ if (message) {
88
+ addMessage(message, true);
89
+ input.value = '';
90
+ document.getElementById('loading').style.display = 'block';
91
+
92
+ fetch('/chat', {
93
+ method: 'POST',
94
+ headers: {
95
+ 'Content-Type': 'application/json',
96
+ },
97
+ body: JSON.stringify({ message: message })
98
+ })
99
+ .then(response => response.json())
100
+ .then(data => {
101
+ document.getElementById('loading').style.display = 'none';
102
+ addMessage(data.response, false);
103
+ })
104
+ .catch(error => {
105
+ document.getElementById('loading').style.display = 'none';
106
+ addMessage('Sorry, an error occurred while processing your message.', false);
107
+ console.error('Error:', error);
108
+ });
109
+ }
110
+ }
111
+
112
+ // Allow sending message with Enter key
113
+ document.getElementById('user-input').addEventListener('keypress', function(e) {
114
+ if (e.key === 'Enter') {
115
+ sendMessage();
116
+ }
117
+ });
118
+ </script>
119
+ </body>
120
+ </html>