krishna195 commited on
Commit
1e483c6
·
verified ·
1 Parent(s): 5e20069

Update index.html

Browse files
Files changed (1) hide show
  1. 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>Text Generation Chatbot</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
- displayMessage("Error loading model.", 'bot-message');
 
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>