Hugging Face's logo

Spaces:
TejAndrewsACC
/
Chater
Sleeping

App Files Community
TejAndrewsACC commited on
Commit
594a7c1
·
verified ·
1 Parent(s): b5bfe0f

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +133 -0
index.html ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Chatbot with GPT Model</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ background-color: #f0f0f0;
16
+ }
17
+ #chatbox {
18
+ width: 400px;
19
+ height: 500px;
20
+ background-color: #fff;
21
+ border-radius: 10px;
22
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23
+ display: flex;
24
+ flex-direction: column;
25
+ }
26
+ #chatlogs {
27
+ flex: 1;
28
+ padding: 20px;
29
+ overflow-y: auto;
30
+ border-bottom: 1px solid #ddd;
31
+ }
32
+ .chat-message {
33
+ margin: 10px 0;
34
+ }
35
+ .user {
36
+ text-align: right;
37
+ }
38
+ .bot {
39
+ text-align: left;
40
+ }
41
+ .message {
42
+ max-width: 70%;
43
+ padding: 10px;
44
+ border-radius: 5px;
45
+ display: inline-block;
46
+ }
47
+ .user .message {
48
+ background-color: #dcf8c6;
49
+ }
50
+ .bot .message {
51
+ background-color: #f1f0f0;
52
+ }
53
+ #userInput {
54
+ display: flex;
55
+ padding: 10px;
56
+ }
57
+ #userInput input {
58
+ flex: 1;
59
+ padding: 10px;
60
+ border: 1px solid #ddd;
61
+ border-radius: 5px;
62
+ margin-right: 10px;
63
+ }
64
+ #userInput button {
65
+ padding: 10px 20px;
66
+ border: none;
67
+ border-radius: 5px;
68
+ background-color: #007bff;
69
+ color: white;
70
+ cursor: pointer;
71
+ }
72
+ #userInput button:hover {
73
+ background-color: #0056b3;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body>
78
+ <div id="chatbox">
79
+ <div id="chatlogs"></div>
80
+ <div id="userInput">
81
+ <input type="text" id="userMessage" placeholder="Type a message...">
82
+ <button onclick="sendMessage()">Send</button>
83
+ </div>
84
+ </div>
85
+
86
+ <script>
87
+ const API_TOKEN = 'YOUR_HUGGING_FACE_API_TOKEN';
88
+ const MODEL_URL = 'https://api-inference.huggingface.co/models/gpt2';
89
+
90
+ function sendMessage() {
91
+ const userInput = document.getElementById('userMessage').value;
92
+ if (userInput.trim() === '') return;
93
+
94
+ appendMessage(userInput, 'user');
95
+
96
+ // Get bot response from GPT model
97
+ getBotResponse(userInput).then(botResponse => {
98
+ appendMessage(botResponse, 'bot');
99
+ });
100
+
101
+ document.getElementById('userMessage').value = '';
102
+ }
103
+
104
+ function appendMessage(message, sender) {
105
+ const chatlogs = document.getElementById('chatlogs');
106
+ const messageElement = document.createElement('div');
107
+ messageElement.className = `chat-message ${sender}`;
108
+ messageElement.innerHTML = `<div class="message">${message}</div>`;
109
+ chatlogs.appendChild(messageElement);
110
+ chatlogs.scrollTop = chatlogs.scrollHeight;
111
+ }
112
+
113
+ async function getBotResponse(userInput) {
114
+ const response = await fetch(MODEL_URL, {
115
+ method: 'POST',
116
+ headers: {
117
+ 'Authorization': `Bearer ${API_TOKEN}`,
118
+ 'Content-Type': 'application/json'
119
+ },
120
+ body: JSON.stringify({
121
+ inputs: userInput,
122
+ parameters: {
123
+ max_length: 50
124
+ }
125
+ })
126
+ });
127
+
128
+ const data = await response.json();
129
+ return data[0].generated_text.trim();
130
+ }
131
+ </script>
132
+ </body>
133
+ </html>