Hugging Face's logo

Spaces:
poemsforaphrodite
/
bot
Sleeping

App Files Community
poemsforaphrodite commited on
Commit
01e760b
·
verified ·
1 Parent(s): e1527da

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +93 -0
index.html ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Bot Testing Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body class="bg-gray-100 min-h-screen p-8">
10
+ <div class="max-w-4xl mx-auto">
11
+ <h1 class="text-3xl font-bold mb-8 text-center">Bot Testing Interface</h1>
12
+
13
+ <!-- Upload Section -->
14
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
15
+ <h2 class="text-xl font-semibold mb-4">1. Create Bot</h2>
16
+ <form id="uploadForm" class="space-y-4">
17
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
18
+ <input type="file" id="files" multiple class="w-full">
19
+ </div>
20
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
21
+ Upload Documents
22
+ </button>
23
+ </form>
24
+ <div id="botId" class="mt-4 text-green-600 font-medium"></div>
25
+ </div>
26
+
27
+ <!-- Query Section -->
28
+ <div class="bg-white rounded-lg shadow-md p-6">
29
+ <h2 class="text-xl font-semibold mb-4">2. Query Bot</h2>
30
+ <form id="queryForm" class="space-y-4">
31
+ <input type="text" id="queryBotId" placeholder="Enter Bot ID"
32
+ class="w-full p-2 border rounded">
33
+ <textarea id="query" placeholder="Enter your question"
34
+ class="w-full p-2 border rounded h-24"></textarea>
35
+ <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
36
+ Send Query
37
+ </button>
38
+ </form>
39
+ <div id="response" class="mt-4 p-4 bg-gray-50 rounded-lg hidden">
40
+ <h3 class="font-semibold mb-2">Response:</h3>
41
+ <p id="responseText" class="whitespace-pre-wrap"></p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <script>
47
+ document.getElementById('uploadForm').addEventListener('submit', async (e) => {
48
+ e.preventDefault();
49
+ const formData = new FormData();
50
+ const files = document.getElementById('files').files;
51
+
52
+ for (let file of files) {
53
+ formData.append('files', file);
54
+ }
55
+
56
+ try {
57
+ const response = await fetch('/upload-documents', {
58
+ method: 'POST',
59
+ body: formData
60
+ });
61
+ const data = await response.json();
62
+ document.getElementById('botId').textContent = `Bot ID: ${data.botid}`;
63
+ document.getElementById('queryBotId').value = data.botid;
64
+ } catch (error) {
65
+ console.error('Error:', error);
66
+ alert('Error uploading files');
67
+ }
68
+ });
69
+
70
+ document.getElementById('queryForm').addEventListener('submit', async (e) => {
71
+ e.preventDefault();
72
+ const formData = new FormData();
73
+ formData.append('botid', document.getElementById('queryBotId').value);
74
+ formData.append('query', document.getElementById('query').value);
75
+
76
+ try {
77
+ const response = await fetch('/query', {
78
+ method: 'POST',
79
+ body: formData
80
+ });
81
+ const data = await response.json();
82
+ const responseDiv = document.getElementById('response');
83
+ const responseText = document.getElementById('responseText');
84
+ responseDiv.classList.remove('hidden');
85
+ responseText.textContent = data.response;
86
+ } catch (error) {
87
+ console.error('Error:', error);
88
+ alert('Error sending query');
89
+ }
90
+ });
91
+ </script>
92
+ </body>
93
+ </html>