Hugging Face's logo

Spaces:
abdullahalioo
/
putter
Running

App Files Community
abdullahalioo commited on
Commit
d4e9189
·
verified ·
1 Parent(s): 5f06477

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +241 -19
index.html CHANGED
@@ -1,19 +1,241 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>DeepSeek AI Server</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://js.puter.com/v2/"></script>
9
+ <style>
10
+ body {
11
+ font-family: 'Inter', sans-serif;
12
+ background-color: #f3f4f6;
13
+ }
14
+ #output {
15
+ white-space: pre-wrap;
16
+ word-wrap: break-word;
17
+ }
18
+ #apiResponse {
19
+ font-family: monospace;
20
+ white-space: pre;
21
+ overflow-x: auto;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="min-h-screen flex flex-col items-center justify-center p-4">
26
+ <div class="w-full max-w-4xl bg-white shadow-lg rounded-lg p-6">
27
+ <h1 class="text-2xl font-bold text-gray-800 mb-4 text-center">DeepSeek AI Server</h1>
28
+
29
+ <!-- Web Interface Tab -->
30
+ <div class="mb-6" id="webInterface">
31
+ <div class="mb-4">
32
+ <input
33
+ type="text"
34
+ id="query"
35
+ placeholder="Enter your query (e.g., Explain dark matter)"
36
+ class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
37
+ >
38
+ <button
39
+ id="submit"
40
+ class="mt-2 w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition"
41
+ >
42
+ Get AI Response
43
+ </button>
44
+ </div>
45
+ <div id="output" class="bg-gray-100 p-4 rounded-lg text-gray-800 min-h-32"></div>
46
+ </div>
47
+
48
+ <!-- API Tester Tab -->
49
+ <div class="mb-6 hidden" id="apiTester">
50
+ <div class="mb-4">
51
+ <h2 class="text-lg font-semibold mb-2">Test API Endpoint</h2>
52
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
53
+ <div>
54
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Request</label>
55
+ <textarea
56
+ id="apiRequest"
57
+ class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 h-32"
58
+ placeholder='{"query": "Your question here", "model": "gpt-4o"}'
59
+ ></textarea>
60
+ <button
61
+ id="apiSubmit"
62
+ class="mt-2 w-full bg-green-600 text-white p-3 rounded-lg hover:bg-green-700 transition"
63
+ >
64
+ Send API Request
65
+ </button>
66
+ </div>
67
+ <div>
68
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Response</label>
69
+ <div id="apiResponse" class="w-full p-3 border rounded-lg bg-gray-100 h-32 overflow-auto"></div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="bg-gray-100 p-4 rounded-lg">
75
+ <h2 class="text-lg font-semibold mb-2">API Documentation</h2>
76
+ <div class="space-y-3">
77
+ <div>
78
+ <h3 class="font-medium">Endpoint</h3>
79
+ <code class="bg-gray-200 p-1 rounded text-sm">POST /api/ask</code>
80
+ </div>
81
+ <div>
82
+ <h3 class="font-medium">Request Body</h3>
83
+ <pre class="bg-gray-200 p-2 rounded text-sm overflow-x-auto">
84
+ {
85
+ "query": "string", // Required
86
+ "model": "string" // Optional (default: "gpt-4o")
87
+ }</pre>
88
+ </div>
89
+ <div>
90
+ <h3 class="font-medium">Example Usage</h3>
91
+ <pre class="bg-gray-200 p-2 rounded text-sm overflow-x-auto">
92
+ fetch('/api/ask', {
93
+ method: 'POST',
94
+ headers: {
95
+ 'Content-Type': 'application/json'
96
+ },
97
+ body: JSON.stringify({
98
+ query: "Explain quantum computing",
99
+ model: "gpt-4o"
100
+ })
101
+ })
102
+ .then(response => response.text())
103
+ .then(data => console.log(data));</pre>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Tab Navigation -->
110
+ <div class="flex border-b">
111
+ <button
112
+ class="px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600"
113
+ onclick="showTab('webInterface')"
114
+ >
115
+ Web Interface
116
+ </button>
117
+ <button
118
+ class="px-4 py-2 font-medium text-gray-500 hover:text-gray-700"
119
+ onclick="showTab('apiTester')"
120
+ >
121
+ API Tester
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <script>
127
+ // Tab navigation
128
+ function showTab(tabId) {
129
+ document.getElementById('webInterface').classList.add('hidden');
130
+ document.getElementById('apiTester').classList.add('hidden');
131
+ document.getElementById(tabId).classList.remove('hidden');
132
+
133
+ // Update active tab styling
134
+ const tabs = document.querySelectorAll('.flex.border-b button');
135
+ tabs.forEach(tab => {
136
+ tab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
137
+ tab.classList.add('text-gray-500', 'hover:text-gray-700');
138
+ });
139
+
140
+ event.currentTarget.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
141
+ event.currentTarget.classList.remove('text-gray-500', 'hover:text-gray-700');
142
+ }
143
+
144
+ // Web Interface Functionality
145
+ async function streamResponse(query) {
146
+ const outputDiv = document.getElementById('output');
147
+ outputDiv.innerHTML = ''; // Clear previous output
148
+ const submitButton = document.getElementById('submit');
149
+ submitButton.disabled = true; // Disable button during processing
150
+
151
+ try {
152
+ outputDiv.innerHTML += '<h2 class="text-lg font-semibold text-blue-600">AI Response:</h2>';
153
+
154
+ // Using Puter SDK directly (client-side)
155
+ const chatResponse = await puter.ai.chat(
156
+ query,
157
+ {
158
+ model: 'gpt-4o',
159
+ stream: true
160
+ }
161
+ );
162
+
163
+ for await (const part of chatResponse) {
164
+ if (part?.text) {
165
+ outputDiv.innerHTML += part.text;
166
+ outputDiv.scrollTop = outputDiv.scrollHeight; // Auto-scroll to bottom
167
+ }
168
+ }
169
+
170
+ } catch (error) {
171
+ outputDiv.innerHTML += `<p class="text-red-600">Error: ${error.message}</p>`;
172
+ } finally {
173
+ submitButton.disabled = false; // Re-enable button
174
+ }
175
+ }
176
+
177
+ // API Tester Functionality
178
+ async function testApi() {
179
+ const apiRequest = document.getElementById('apiRequest').value.trim();
180
+ const apiResponseDiv = document.getElementById('apiResponse');
181
+ const apiSubmitButton = document.getElementById('apiSubmit');
182
+
183
+ apiResponseDiv.textContent = '';
184
+ apiSubmitButton.disabled = true;
185
+
186
+ try {
187
+ if (!apiRequest) {
188
+ throw new Error('Please enter a valid JSON request');
189
+ }
190
+
191
+ const requestObj = JSON.parse(apiRequest);
192
+ if (!requestObj.query) {
193
+ throw new Error('Request must include a "query" field');
194
+ }
195
+
196
+ // Using Puter SDK directly (client-side)
197
+ const response = await puter.ai.chat(
198
+ requestObj.query,
199
+ {
200
+ model: requestObj.model || 'gpt-4o',
201
+ stream: false
202
+ }
203
+ );
204
+
205
+ apiResponseDiv.textContent = JSON.stringify(response, null, 2);
206
+ } catch (error) {
207
+ apiResponseDiv.textContent = `Error: ${error.message}`;
208
+ } finally {
209
+ apiSubmitButton.disabled = false;
210
+ }
211
+ }
212
+
213
+ // Event listeners
214
+ document.getElementById('submit').addEventListener('click', () => {
215
+ const query = document.getElementById('query').value.trim();
216
+ if (query) {
217
+ streamResponse(query);
218
+ } else {
219
+ document.getElementById('output').innerHTML = '<p class="text-red-600">Please enter a query.</p>';
220
+ }
221
+ });
222
+
223
+ document.getElementById('query').addEventListener('keypress', (e) => {
224
+ if (e.key === 'Enter') {
225
+ document.getElementById('submit').click();
226
+ }
227
+ });
228
+
229
+ document.getElementById('apiSubmit').addEventListener('click', testApi);
230
+
231
+ document.getElementById('apiRequest').addEventListener('keypress', (e) => {
232
+ if (e.key === 'Enter' && e.ctrlKey) {
233
+ testApi();
234
+ }
235
+ });
236
+
237
+ // Initialize with web interface shown
238
+ showTab('webInterface');
239
+ </script>
240
+ </body>
241
+ </html>