Hugging Face's logo

Zeroxdesignart
/
chatbot-url

Model card Files Community
Zeroxdesignart commited on
Commit
c4f4b3e
•
1 Parent(s): 55ddddc

Create chat-url

Browse files
Files changed (1) hide show
  1. chat-url +115 -0
chat-url ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <title>URL-based Chatbot</title>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
5
+ </head>
6
+ <body>
7
+ <div class="container">
8
+ <h2> made by zeroxdesignart.com<h2>
9
+ <h1>URL-based Chatbot</h1>
10
+ <div id="chatContainer" class="card">
11
+ <div class="card-body" id="chatBody">
12
+ <div class="mb-3">
13
+ <label for="urlInput" class="form-label">Enter URL:</label>
14
+ <input type="text" class="form-control" id="urlInput">
15
+ </div>
16
+ <div id="chatMessages"></div>
17
+ <div id="loadingIndicator" style="display: none;">
18
+ <div class="spinner-border" role="status">
19
+ <span class="visually-hidden">Loading...</span>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ <div class="card-footer">
24
+ <div class="input-group">
25
+ <input type="text" class="form-control" id="messageInput">
26
+ <button class="btn btn-primary" id="sendMessageButton">Send</button>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </div>
31
+
32
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
33
+ <script>
34
+ const chatContainer = document.getElementById('chatContainer');
35
+ const chatBody = document.getElementById('chatBody');
36
+ const chatMessages = document.getElementById('chatMessages');
37
+ const urlInput = document.getElementById('urlInput');
38
+ const messageInput = document.getElementById('messageInput');
39
+ const sendMessageButton = document.getElementById('sendMessageButton');
40
+ const loadingIndicator = document.getElementById('loadingIndicator');
41
+
42
+ const apiUrl = 'https://www.literallyanything.io/api/integrations/chatgpt';
43
+
44
+ function addMessage(content, role) {
45
+ const messageDiv = document.createElement('div');
46
+ messageDiv.classList.add('alert', 'alert-primary');
47
+ messageDiv.role = 'alert';
48
+ messageDiv.textContent = content;
49
+ messageDiv.style.wordWrap = 'break-word';
50
+
51
+ if (role === 'assistant') {
52
+ messageDiv.classList.add('text-end');
53
+ }
54
+
55
+ chatMessages.appendChild(messageDiv);
56
+ chatBody.scrollTop = chatBody.scrollHeight;
57
+ }
58
+
59
+ async function sendMessage() {
60
+ const url = urlInput.value.trim();
61
+ const message = messageInput.value.trim();
62
+
63
+ if (!url) {
64
+ alert('Please enter a URL');
65
+ return;
66
+ }
67
+
68
+ if (!message) {
69
+ alert('Please enter a message');
70
+ return;
71
+ }
72
+
73
+ addMessage(`User: ${message}`, 'user');
74
+ messageInput.value = '';
75
+
76
+ showLoadingIndicator();
77
+
78
+ try {
79
+ const response = await fetch(apiUrl, {
80
+ method: 'POST',
81
+ headers: {
82
+ 'Content-Type': 'application/json'
83
+ },
84
+ body: JSON.stringify({
85
+ systemPrompt: `The user provided a URL: ${url}`,
86
+ prompts: [
87
+ { role: 'user', content: message }
88
+ ]
89
+ })
90
+ });
91
+
92
+ const data = await response.json();
93
+ const assistantResponse = data.response;
94
+
95
+ addMessage(`Assistant: ${assistantResponse}`, 'assistant');
96
+ } catch (error) {
97
+ console.error(error);
98
+ alert('An error occurred. Please try again.');
99
+ }
100
+
101
+ hideLoadingIndicator();
102
+ }
103
+
104
+ function showLoadingIndicator() {
105
+ loadingIndicator.style.display = 'block';
106
+ }
107
+
108
+ function hideLoadingIndicator() {
109
+ loadingIndicator.style.display = 'none';
110
+ }
111
+
112
+ sendMessageButton.addEventListener('click', sendMessage);
113
+ </script>
114
+ </body>
115
+ </html>