JJ94 commited on
Commit
3a8dd40
·
verified ·
1 Parent(s): f79962c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +37 -19
templates/index.html CHANGED
@@ -4,29 +4,47 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chat with LLaMA</title>
7
- <script>
8
- async function sendMessage() {
9
- const message = document.getElementById("userInput").value;
10
- if (!message) return;
 
 
 
 
11
 
12
- document.getElementById("chatBox").innerHTML += `<p><b>You:</b> ${message}</p>`;
 
 
 
 
 
 
13
 
14
- const response = await fetch("/chat", {
15
- method: "POST",
16
- headers: { "Content-Type": "application/json" },
17
- body: JSON.stringify({ message })
18
- });
 
 
 
 
 
19
 
20
- const data = await response.json();
21
- document.getElementById("chatBox").innerHTML += `<p><b>Bot:</b> ${data.response}</p>`;
22
- document.getElementById("userInput").value = "";
 
 
 
 
 
 
 
23
  }
24
  </script>
25
- </head>
26
- <body>
27
- <h2>Chat with LLaMA</h2>
28
- <div id="chatBox" style="border: 1px solid #000; padding: 10px; width: 50%; height: 300px; overflow-y: scroll;"></div>
29
- <input type="text" id="userInput" placeholder="Type a message..." />
30
- <button onclick="sendMessage()">Send</button>
31
  </body>
32
  </html>
 
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chat with LLaMA</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
10
+ </head>
11
+ <body class="bg-light">
12
+
13
+ <div class="container py-5" x-data="{ messages: [], userInput: '' }">
14
+ <h2 class="mb-4 text-center">Chat with LLaMA 🤖</h2>
15
 
16
+ <div class="card shadow">
17
+ <div class="card-body" style="height: 300px; overflow-y: auto;" id="chatBox">
18
+ <template x-for="(msg, index) in messages" :key="index">
19
+ <p><b x-text="msg.role + ':'"></b> <span x-text="msg.content"></span></p>
20
+ </template>
21
+ </div>
22
+ </div>
23
 
24
+ <div class="input-group mt-3">
25
+ <input type="text" class="form-control" x-model="userInput" placeholder="Type a message..." @keydown.enter="sendMessage">
26
+ <button class="btn btn-primary" @click="sendMessage">Send</button>
27
+ </div>
28
+ </div>
29
+
30
+ <script>
31
+ function sendMessage() {
32
+ const userMessage = this.userInput;
33
+ if (!userMessage) return;
34
 
35
+ // Append user message
36
+ this.messages.push({ role: "You", content: userMessage });
37
+ this.userInput = "";
38
+
39
+ axios.post("/chat", { message: userMessage })
40
+ .then(response => {
41
+ this.messages.push({ role: "Bot", content: response.data.response });
42
+ document.getElementById("chatBox").scrollTop = document.getElementById("chatBox").scrollHeight;
43
+ })
44
+ .catch(error => console.error("Error:", error));
45
  }
46
  </script>
47
+
 
 
 
 
 
48
  </body>
49
  </html>
50
+