Spaces:
Running
Running
Update index.html
Browse files- index.html +17 -7
index.html
CHANGED
@@ -1,10 +1,9 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html lang="en">
|
3 |
-
|
4 |
<head>
|
5 |
<meta charset="UTF-8">
|
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 |
-
<title>
|
8 |
|
9 |
<!-- Import the pipeline from transformers.js -->
|
10 |
<script type="module">
|
@@ -20,15 +19,18 @@
|
|
20 |
<div class="container mt-5" style="max-width: 800px; margin: 0 auto;">
|
21 |
<h1 class="text-center mb-4" style="font-weight: bold; color: #333;">AI Chatbot</h1>
|
22 |
|
|
|
|
|
|
|
23 |
<!-- Chatbot Interface -->
|
24 |
-
<div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto;">
|
25 |
<!-- Chat messages will appear here -->
|
26 |
</div>
|
27 |
|
28 |
<!-- Input and Button Section -->
|
29 |
<div class="input-group mt-3">
|
30 |
-
<input id="user-input" type="text" class="form-control" placeholder="Type your message..." />
|
31 |
-
<button id="send-button" class="btn btn-primary" onclick="handleUserInput()">Send</button>
|
32 |
</div>
|
33 |
</div>
|
34 |
|
@@ -41,9 +43,18 @@
|
|
41 |
console.log("Loading text generation model...");
|
42 |
generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
|
43 |
console.log("Model loaded successfully!");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
44 |
} catch (error) {
|
45 |
console.error("Error loading model:", error);
|
46 |
-
|
|
|
47 |
}
|
48 |
}
|
49 |
|
@@ -123,5 +134,4 @@
|
|
123 |
}
|
124 |
</style>
|
125 |
</body>
|
126 |
-
|
127 |
</html>
|
|
|
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>AI Chatbot</title>
|
7 |
|
8 |
<!-- Import the pipeline from transformers.js -->
|
9 |
<script type="module">
|
|
|
19 |
<div class="container mt-5" style="max-width: 800px; margin: 0 auto;">
|
20 |
<h1 class="text-center mb-4" style="font-weight: bold; color: #333;">AI Chatbot</h1>
|
21 |
|
22 |
+
<!-- Model Loading Status -->
|
23 |
+
<div id="loading-status" class="alert alert-warning text-center">⏳ Please wait, model is loading...</div>
|
24 |
+
|
25 |
<!-- Chatbot Interface -->
|
26 |
+
<div id="chat-container" class="p-3" style="height: 70vh; overflow-y: auto; background: #f8f9fa; border-radius: 10px; border: 1px solid #ddd;">
|
27 |
<!-- Chat messages will appear here -->
|
28 |
</div>
|
29 |
|
30 |
<!-- Input and Button Section -->
|
31 |
<div class="input-group mt-3">
|
32 |
+
<input id="user-input" type="text" class="form-control" placeholder="Type your message..." disabled />
|
33 |
+
<button id="send-button" class="btn btn-primary" onclick="handleUserInput()" disabled>Send</button>
|
34 |
</div>
|
35 |
</div>
|
36 |
|
|
|
43 |
console.log("Loading text generation model...");
|
44 |
generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
|
45 |
console.log("Model loaded successfully!");
|
46 |
+
|
47 |
+
// Update UI when model is loaded
|
48 |
+
document.getElementById('loading-status').className = "alert alert-success text-center";
|
49 |
+
document.getElementById('loading-status').innerHTML = "✅ Model Loaded! You can start chatting.";
|
50 |
+
|
51 |
+
// Enable input fields
|
52 |
+
document.getElementById('user-input').disabled = false;
|
53 |
+
document.getElementById('send-button').disabled = false;
|
54 |
} catch (error) {
|
55 |
console.error("Error loading model:", error);
|
56 |
+
document.getElementById('loading-status').className = "alert alert-danger text-center";
|
57 |
+
document.getElementById('loading-status').innerHTML = "❌ Error loading model. Please refresh.";
|
58 |
}
|
59 |
}
|
60 |
|
|
|
134 |
}
|
135 |
</style>
|
136 |
</body>
|
|
|
137 |
</html>
|