Hugging Face's logo

Spaces:
Mrdips
/
undefined
Running

App Files Community
Mrdips commited on
Commit
1ead186
·
verified ·
1 Parent(s): 112ced3

созай чат с ИИ

Browse files
Files changed (3) hide show
  1. chat.html +108 -0
  2. index.html +10 -2
  3. style.css +10 -0
chat.html ADDED
@@ -0,0 +1,108 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Chat - The Colorless Wonder</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body>
12
+ <div class="card">
13
+ <h1>AI Chat Assistant</h1>
14
+ <div id="chat-container" class="mb-4 p-4 border rounded-lg bg-gray-50 h-96 overflow-y-auto">
15
+ <!-- Chat messages will appear here -->
16
+ </div>
17
+ <div class="flex">
18
+ <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 p-2 border rounded-l-lg">
19
+ <button onclick="sendMessage()" class="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600">Send</button>
20
+ </div>
21
+ </div>
22
+
23
+ <script>
24
+ // Function to add a message to the chat
25
+ function addMessage(sender, text) {
26
+ const chatContainer = document.getElementById('chat-container');
27
+ const messageDiv = document.createElement('div');
28
+ messageDiv.classList.add('mb-2');
29
+
30
+ if (sender === 'user') {
31
+ messageDiv.classList.add('text-right');
32
+ messageDiv.innerHTML = `<div class="inline-block bg-blue-100 p-2 rounded-lg">${text}</div>`;
33
+ } else {
34
+ messageDiv.classList.add('text-left');
35
+ messageDiv.innerHTML = `<div class="inline-block bg-gray-100 p-2 rounded-lg">${text}</div>`;
36
+ }
37
+
38
+ chatContainer.appendChild(messageDiv);
39
+ chatContainer.scrollTop = chatContainer.scrollHeight;
40
+ }
41
+
42
+ // Function to send message to AI
43
+ async function sendMessage() {
44
+ const userInput = document.getElementById('user-input');
45
+ const message = userInput.value.trim();
46
+
47
+ if (message) {
48
+ // Add user message to chat
49
+ addMessage('user', message);
50
+ userInput.value = '';
51
+
52
+ try {
53
+ // Show typing indicator
54
+ const typingDiv = document.createElement('div');
55
+ typingDiv.id = 'typing-indicator';
56
+ typingDiv.classList.add('text-left', 'mb-2');
57
+ typingDiv.innerHTML = '<div class="inline-block bg-gray-100 p-2 rounded-lg">Thinking...</div>';
58
+ document.getElementById('chat-container').appendChild(typingDiv);
59
+ document.getElementById('chat-container').scrollTop = document.getElementById('chat-container').scrollHeight;
60
+
61
+ // Call AI API (using OpenAI-compatible API)
62
+ const response = await fetch('https://api.openai.com/v1/chat/completions', {
63
+ method: 'POST',
64
+ headers: {
65
+ 'Content-Type': 'application/json',
66
+ 'Authorization': 'Bearer YOUR_API_KEY_HERE' // Replace with your actual API key
67
+ },
68
+ body: JSON.stringify({
69
+ model: "gpt-3.5-turbo",
70
+ messages: [{role: "user", content: message}],
71
+ temperature: 0.7
72
+ })
73
+ });
74
+
75
+ // Remove typing indicator
76
+ document.getElementById('typing-indicator').remove();
77
+
78
+ if (response.ok) {
79
+ const data = await response.json();
80
+ const aiResponse = data.choices[0].message.content.trim();
81
+ addMessage('ai', aiResponse);
82
+ } else {
83
+ addMessage('ai', 'Sorry, I encountered an error. Please try again.');
84
+ }
85
+ } catch (error) {
86
+ // Remove typing indicator
87
+ if (document.getElementById('typing-indicator')) {
88
+ document.getElementById('typing-indicator').remove();
89
+ }
90
+ addMessage('ai', 'Sorry, I encountered an error. Please try again.');
91
+ }
92
+ }
93
+ }
94
+
95
+ // Allow sending message with Enter key
96
+ document.getElementById('user-input').addEventListener('keypress', function(e) {
97
+ if (e.key === 'Enter') {
98
+ sendMessage();
99
+ }
100
+ });
101
+
102
+ // Initial welcome message
103
+ window.onload = function() {
104
+ addMessage('ai', 'Hello! I am your AI assistant. How can I help you today?');
105
+ };
106
+ </script>
107
+ </body>
108
+ </html>
index.html CHANGED
@@ -1,11 +1,19 @@
 
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>The Colorless Wonder</title>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/fe
10
  </head>
11
- </html>
 
 
 
 
 
 
 
 
1
+
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>The Colorless Wonder</title>
8
+ <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
 
11
  </head>
12
+ <body>
13
+ <div class="card">
14
+ <h1>The Colorless Wonder</h1>
15
+ <p>Welcome to the Colorless Wonder website.</p>
16
+ <p><a href="chat.html" class="text-blue-500 hover:underline">Chat with our AI assistant</a></p>
17
+ </div>
18
+ </body>
19
+ </html>
style.css CHANGED
@@ -1,3 +1,4 @@
 
1
  body {
2
  padding: 2rem;
3
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
@@ -26,3 +27,12 @@ p {
26
  .card p:last-child {
27
  margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+
2
  body {
3
  padding: 2rem;
4
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
27
  .card p:last-child {
28
  margin-bottom: 0;
29
  }
30
+
31
+ a {
32
+ color: #3b82f6;
33
+ text-decoration: none;
34
+ }
35
+
36
+ a:hover {
37
+ text-decoration: underline;
38
+ }