Hugging Face's logo

Spaces:
ayazfau
/
googleflant5largeDocker
Running

App Files Community
ayazfau commited on
Commit
1b6af4a
·
verified ·
1 Parent(s): d14a20e

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +48 -39
templates/index.html CHANGED
@@ -1,39 +1,48 @@
1
- <!-- templates/index.html -->
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Chat UI</title>
8
- </head>
9
- <body>
10
- <h1>Chat UI</h1>
11
- <form action="/generate" method="get">
12
- <label for="user_input">User Input:</label><br>
13
- <input type="text" id="user_input" name="text"><br><br>
14
- <button type="submit">Generate Response</button>
15
- </form>
16
- <div id="output">
17
- <h2>Output:</h2>
18
- <p id="response"></p>
19
- </div>
20
-
21
- <script>
22
- async function generateResponse() {
23
- const userInput = document.getElementById("user_input").value;
24
- const responseElement = document.getElementById("response");
25
-
26
- const response = await fetch(`/generate?text=${encodeURIComponent(userInput)}`);
27
- const responseData = await response.json();
28
-
29
- responseElement.textContent = responseData.output;
30
- }
31
-
32
- const form = document.querySelector("form");
33
- form.addEventListener("submit", function(event) {
34
- event.preventDefault();
35
- generateResponse();
36
- });
37
- </script>
38
- </body>
39
- </html>
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Chat UI</title>
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10
+ </head>
11
+ <body class="bg-light">
12
+ <div class="container py-4">
13
+ <h1 class="mb-4">Chat UI</h1>
14
+ <form id="chatForm">
15
+ <div class="mb-3">
16
+ <label for="userInput" class="form-label">User Input:</label>
17
+ <input type="text" id="userInput" class="form-control" name="text" required>
18
+ </div>
19
+ <button type="submit" class="btn btn-primary">Generate Response</button>
20
+ </form>
21
+ <div id="output" class="mt-4">
22
+ <h2>Output:</h2>
23
+ <p id="response" class="text-muted">Waiting for response...</p>
24
+ </div>
25
+ </div>
26
+
27
+ <!-- Bootstrap JS (optional, for components like modals) -->
28
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-I5qk7Sre1gBaw0r+UVjz5VewS9D90t+7fJAkfxB8zbabFegBl1XjcFEx5anftvb7" crossorigin="anonymous"></script>
29
+
30
+ <script>
31
+ async function generateResponse() {
32
+ const userInput = document.getElementById("userInput").value;
33
+ const responseElement = document.getElementById("response");
34
+
35
+ const response = await fetch(`/generate?text=${encodeURIComponent(userInput)}`);
36
+ const responseData = await response.json();
37
+
38
+ responseElement.textContent = responseData.output;
39
+ }
40
+
41
+ const chatForm = document.getElementById("chatForm");
42
+ chatForm.addEventListener("submit", function(event) {
43
+ event.preventDefault();
44
+ generateResponse();
45
+ });
46
+ </script>
47
+ </body>
48
+ </html>