Hugging Face's logo

Spaces:
derricka59
/
quantumsync-ai-interface-nebula-edition
Running

App Files Community
derricka59 commited on
Commit
2755860
·
verified ·
1 Parent(s): 8f99aa9

<!DOCTYPE html>

Browse files

<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QhySync AI vQOS v3.0</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
.chat-bubble-user {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.chat-bubble-ai {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.highlight {
background-color: rgba(255, 255, 0, 0.3);
padding: 2px;
border-radius: 3px;
}
.sidebar-collapsed {
transform: translateX(-100%);
}
.sidebar-expanded {
transform: translateX(0);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
</style>
</head>
<body class="h-screen flex bg-base-200 overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="w-80 bg-base-300 shadow-xl flex flex-col transition-transform duration-300 sidebar-expanded">
<!-- Top Section -->
<div class="p-4 border-b border-base-200">
<div class="flex items-center justify-between mb-4">
<!-- Profile Icon -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<img id="profile-img" src="http://static.photos/technology/200x200/1" />
</div>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><a onclick="openProfile()">Profile</a></li>
<li><a onclick="openSettings()">Settings</a></li>
<li><a>Logout</a></li>
</ul>
</div>

<!-- Search Box -->
<div class="flex-1 mx-4">
<div class="form-control">
<input type="text" id="search-input" placeholder="Search chats..." class="input input-bordered input-sm w-full" />
</div>
</div>

<!-- New Chat Button -->
<button id="new-chat-btn" class="btn btn-ghost btn-circle">
<i data-feather="plus"></i>
</button>
</div>
</div>

<!-- Chat History -->
<div class="flex-1 overflow-y-auto p-4 space-y-2">
<div id="chat-history" class="space-y-2">
<!-- Chat items will be dynamically added here -->
</div>
</div>

<!-- Bottom Section -->
<div class="p-4 border-t border-base-200 space-y-2">
<button id="ai-pods-btn" class="btn btn-primary w-full justify-start">
<i data-feather="cpu" class="mr-2"></i>
AI Pods
</button>
<button id="instructions-btn" class="btn btn-secondary w-full justify-start">
<i data-feather="book" class="mr-2"></i>
Instructions
</button>
</div>
</div>

<!-- Main Content -->
<div class="flex-1 flex flex-col">
<!-- Header Toolbar -->
<header class="navbar bg-base-100 shadow-sm p-4">
<div class="flex-1">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<i data-feather="settings"></i>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><a onclick="openCommandPalette()">Command Palette</a></li>
<li><a onclick="openHelp()">Help Documentation</a></li>
<li><a onclick="runTroubleshooter()">Self-Healing Troubleshooter</a></li>
</ul>
</div>
</div>
<div class="flex-none">
<button class="btn btn-ghost btn-circle">
<i data-feather="moon"></i>
</button>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<i data-feather="more-vertical"></i>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><a onclick="openSettings()">Settings</a></li>
<li><a>Export Data</a></li>
<li><a>Import Data</a></li>
</ul>
</div>
</div>
</header>

<!-- Chat Area -->
<main id="chat-area" class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- Chat messages will be dynamically added here -->
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-ai text-white">
Hello! I'm QhySync AI vQOS v3.0. How can I assist you today?
</div>
</div>
</main>

<!-- Input Area -->
<footer class="p-4 bg-base-100 border-t border-base-200">
<div class="flex items-center space-x-2">
<div class="flex-1 relative">
<div id="tool-icons" class="absolute left-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
<button class="btn btn-ghost btn-xs" onclick="toggleTool('search')">
<i data-feather="search"></i>
</button>
<button class="btn btn-ghost btn-xs" onclick="toggleTool('canvas')">
<i data-feather="edit-3"></i>
</button>
<button class="btn btn-ghost btn-xs" onclick="toggleTool('browser')">
<i data-feather="globe"></i>
</button>
</div>
<textarea
id="message-input"
class="textarea textarea-bordered w-full pl-20 pr-20"
placeholder="Type your message here..."
rows="1"
></textarea>
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
<button id="mic-btn" class="btn btn-ghost btn-xs" onclick="toggleVoiceInput()">
<i data-feather="mic"></i>
</button>
<button id="speaker-btn" class="btn btn-ghost btn-xs hidden" onclick="toggleVoiceOutput()">
<i data-feather="volume-2"></i>
</button>
<button class="btn btn-primary btn-sm" onclick="sendMessage()">
<i data-feather="send"></i>
</button>
</div>
</div>
</div>
</footer>
</div>

<!-- Context Menu -->
<div id="context-menu" class="absolute hidden bg-base-100 shadow-lg rounded-box p-2 z-50">
<ul class="menu menu-sm">
<li><a onclick="cutText()">Cut</a></li>
<li><a onclick="copyText()">Copy</a></li>
<li><a onclick="pasteText()">Paste</a></li>
<li><a onclick="pasteUnformatted()">Unformatted Paste</a></li>
<li><a onclick="openCommandPalette()">Command Palette</a></li>
<li><a onclick="formatText()">Format Text</a></li>
<li><a onclick="openHelp()">Help</a></li>
<li><a onclick="enhancePrompt()">Enhance Prompt</a></li>
</ul>
</div>

<!-- Modals -->
<dialog id="profile-modal" class="modal">
<div class="modal-box max-w-2xl">
<h3 class="font-bold text-lg">Profile Settings</h3>
<div class="py-4 space-y-4">
<div class="form-control">
<label class="label">
<span class="label-text">Profile Picture</span>
</label>
<input type="file" class="file-input file-input-bordered w-full" accept=".png,.jpeg,.gif" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Username</span>
</label>
<input type="text" class="input input-bordered" value="current_user" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Phone Number</span>
</label>
<input type="tel" class="input input-bordered" placeholder="+1 (555) 123-4567" />
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Enable 2FA</span>
<input type="checkbox" class="toggle toggle-primary" />
</label>
</div>
</div>
<div class="modal-action">
<button class="btn btn-primary">Save Changes</button>
<button class="btn btn-ghost" onclick="document.getElementById('profile-modal').close()">Can

Files changed (2) hide show
  1. ai-pods.html +358 -0
  2. instructions.html +381 -0
ai-pods.html ADDED
@@ -0,0 +1,358 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Pods - QhySync AI vQOS v3.0</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css" rel="stylesheet" type="text/css" />
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .pod-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .pod-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
19
+ }
20
+ @keyframes float {
21
+ 0%, 100% { transform: translateY(0px); }
22
+ 50% { transform: translateY(-10px); }
23
+ }
24
+ .floating {
25
+ animation: float 3s ease-in-out infinite;
26
+ }
27
+ .gradient-border {
28
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29
+ padding: 2px;
30
+ border-radius: 12px;
31
+ }
32
+ .gradient-border > div {
33
+ background: #1f2937;
34
+ border-radius: 10px;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="h-screen bg-base-200">
39
+ <!-- Header -->
40
+ <header class="navbar bg-base-100 shadow-sm p-4">
41
+ <div class="flex-1">
42
+ <button class="btn btn-ghost" onclick="window.location.href='index.html'">
43
+ <i data-feather="arrow-left" class="mr-2"></i>
44
+ Back to Chat
45
+ </button>
46
+ <h1 class="text-xl font-bold ml-4">AI Pods - Custom Agent Training</h1>
47
+ </div>
48
+ <div class="flex-none">
49
+ <button class="btn btn-primary" onclick="showCreatePodModal()">
50
+ <i data-feather="plus" class="mr-2"></i>
51
+ Create New Pod
52
+ </button>
53
+ </div>
54
+ </header>
55
+
56
+ <!-- Main Content -->
57
+ <main class="p-6 overflow-y-auto">
58
+ <!-- Overview Section -->
59
+ <div class="mb-8">
60
+ <div class="flex justify-between items-center mb-6">
61
+ <h2 class="text-2xl font-bold">Your AI Pods</h2>
62
+ <div class="flex gap-2">
63
+ <div class="form-control">
64
+ <input type="text" placeholder="Search pods..." class="input input-bordered input-sm" />
65
+ </div>
66
+ <div class="dropdown dropdown-end">
67
+ <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
68
+ <i data-feather="filter" class="mr-2"></i>
69
+ Filter
70
+ </div>
71
+ <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
72
+ <li><a>All Pods</a></li>
73
+ <li><a>Active</a></li>
74
+ <li><a>Training</a></li>
75
+ <li><a>Ready</a></li>
76
+ </ul>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Pods Grid -->
82
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="pods-container">
83
+ <!-- Sample Pod Cards -->
84
+ <div class="gradient-border floating">
85
+ <div class="pod-card bg-base-100 rounded-xl p-6 h-full">
86
+ <div class="flex justify-between items-start mb-4">
87
+ <div>
88
+ <h3 class="text-lg font-semibold text-primary">Customer Support Agent</h3>
89
+ <div class="badge badge-success badge-sm mt-1">Trained</div>
90
+ </div>
91
+ <div class="dropdown dropdown-end">
92
+ <div tabindex="0" role="button" class="btn btn-ghost btn-xs">
93
+ <i data-feather="more-vertical"></i>
94
+ </div>
95
+ <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
96
+ <li><a>Edit</a></li>
97
+ <li><a>Duplicate</a></li>
98
+ <li><a class="text-error">Delete</a></li>
99
+ </ul>
100
+ </div>
101
+ </div>
102
+ <p class="text-base-content/70 text-sm mb-4">Handles customer inquiries and support tickets efficiently with natural language processing.</p>
103
+ <div class="flex justify-between items-center text-xs text-base-content/60">
104
+ <div class="flex items-center gap-1">
105
+ <i data-feather="file-text" class="w-3 h-3"></i>
106
+ <span>12 docs</span>
107
+ </div>
108
+ <div class="flex items-center gap-1">
109
+ <i data-feather="link" class="w-3 h-3"></i>
110
+ <span>2 APIs</span>
111
+ </div>
112
+ <div class="flex items-center gap-1">
113
+ <i data-feather="activity" class="w-3 h-3"></i>
114
+ <span>1 webhook</span>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="gradient-border">
121
+ <div class="pod-card bg-base-100 rounded-xl p-6 h-full">
122
+ <div class="flex justify-between items-start mb-4">
123
+ <div>
124
+ <h3 class="text-lg font-semibold text-primary">Technical Writer</h3>
125
+ <div class="badge badge-warning badge-sm mt-1">Training</div>
126
+ </div>
127
+ <div class="dropdown dropdown-end">
128
+ <div tabindex="0" role="button" class="btn btn-ghost btn-xs">
129
+ <i data-feather="more-vertical"></i>
130
+ </div>
131
+ <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
132
+ <li><a>Edit</a></li>
133
+ <li><a>Duplicate</a></li>
134
+ <li><a class="text-error">Delete</a></li>
135
+ </ul>
136
+ </div>
137
+ </div>
138
+ <p class="text-base-content/70 text-sm mb-4">Generates technical documentation and API references automatically.</p>
139
+ <div class="flex justify-between items-center text-xs text-base-content/60">
140
+ <div class="flex items-center gap-1">
141
+ <i data-feather="file-text" class="w-3 h-3"></i>
142
+ <span>8 docs</span>
143
+ </div>
144
+ <div class="flex items-center gap-1">
145
+ <i data-feather="link" class="w-3 h-3"></i>
146
+ <span>1 API</span>
147
+ </div>
148
+ <div class="flex items-center gap-1">
149
+ <i data-feather="activity" class="w-3 h-3"></i>
150
+ <span>0 webhooks</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="gradient-border">
157
+ <div class="pod-card bg-base-100 rounded-xl p-6 h-full">
158
+ <div class="flex justify-between items-start mb-4">
159
+ <div>
160
+ <h3 class="text-lg font-semibold text-primary">Marketing Assistant</h3>
161
+ <div class="badge badge-success badge-sm mt-1">Ready</div>
162
+ </div>
163
+ <div class="dropdown dropdown-end">
164
+ <div tabindex="0" role="button" class="btn btn-ghost btn-xs">
165
+ <i data-feather="more-vertical"></i>
166
+ </div>
167
+ <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
168
+ <li><a>Edit</a></li>
169
+ <li><a>Duplicate</a></li>
170
+ <li><a class="text-error">Delete</a></li>
171
+ </ul>
172
+ </div>
173
+ </div>
174
+ <p class="text-base-content/70 text-sm mb-4">Creates engaging marketing content and analyzes campaign performance.</p>
175
+ <div class="flex justify-between items-center text-xs text-base-content/60">
176
+ <div class="flex items-center gap-1">
177
+ <i data-feather="file-text" class="w-3 h-3"></i>
178
+ <span>15 docs</span>
179
+ </div>
180
+ <div class="flex items-center gap-1">
181
+ <i data-feather="link" class="w-3 h-3"></i>
182
+ <span>3 APIs</span>
183
+ </div>
184
+ <div class="flex items-center gap-1">
185
+ <i data-feather="activity" class="w-3 h-3"></i>
186
+ <span>2 webhooks</span>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Quick Actions -->
195
+ <div class="bg-base-100 rounded-xl p-6 mb-8">
196
+ <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
197
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
198
+ <button class="btn btn-outline justify-start" onclick="showCreatePodModal()">
199
+ <i data-feather="plus" class="mr-2"></i>
200
+ Create New Pod
201
+ </button>
202
+ <button class="btn btn-outline justify-start">
203
+ <i data-feather="upload" class="mr-2"></i>
204
+ Import Pod Config
205
+ </button>
206
+ <button class="btn btn-outline justify-start">
207
+ <i data-feather="download" class="mr-2"></i>
208
+ Export All Pods
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </main>
213
+
214
+ <!-- Create Pod Modal -->
215
+ <dialog id="create-pod-modal" class="modal">
216
+ <div class="modal-box max-w-4xl">
217
+ <h3 class="font-bold text-lg mb-6">Create New AI Pod</h3>
218
+
219
+ <div class="space-y-6">
220
+ <!-- Basic Information -->
221
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
222
+ <div class="form-control">
223
+ <label class="label">
224
+ <span class="label-text">Pod Name</span>
225
+ </label>
226
+ <input type="text" class="input input-bordered" placeholder="Enter pod name" />
227
+ </div>
228
+ <div class="form-control">
229
+ <label class="label">
230
+ <span class="label-text">Category</span>
231
+ </label>
232
+ <select class="select select-bordered">
233
+ <option disabled selected>Select category</option>
234
+ <option>Customer Service</option>
235
+ <option>Technical</option>
236
+ <option>Marketing</option>
237
+ <option>Research</option>
238
+ <option>Creative</option>
239
+ </select>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Description -->
244
+ <div class="form-control">
245
+ <label class="label">
246
+ <span class="label-text">Description</span>
247
+ </label>
248
+ <textarea class="textarea textarea-bordered h-24" placeholder="Describe the purpose and functionality of this AI pod..."></textarea>
249
+ </div>
250
+
251
+ <!-- System Prompt -->
252
+ <div class="form-control">
253
+ <label class="label">
254
+ <span class="label-text">System Prompt</span>
255
+ </label>
256
+ <textarea class="textarea textarea-bordered h-32 font-mono text-sm" placeholder="Define the agent's personality, role, and behavior..."></textarea>
257
+ </div>
258
+
259
+ <!-- Training Data -->
260
+ <div class="form-control">
261
+ <label class="label">
262
+ <span class="label-text">Training Data</span>
263
+ </label>
264
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
265
+ <div>
266
+ <label class="label">
267
+ <span class="label-text">Input Examples</span>
268
+ </label>
269
+ <textarea class="textarea textarea-bordered h-32 font-mono text-sm" placeholder='["Example input 1", "Example input 2"]'></textarea>
270
+ </div>
271
+ <div>
272
+ <label class="label">
273
+ <span class="label-text">Expected Outputs</span>
274
+ </label>
275
+ <textarea class="textarea textarea-bordered h-32 font-mono text-sm" placeholder='["Expected output 1", "Expected output 2"]'></textarea>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- File Upload -->
281
+ <div class="form-control">
282
+ <label class="label">
283
+ <span class="label-text">Upload Training Files</span>
284
+ </label>
285
+ <div class="border-2 border-dashed border-base-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-colors" onclick="document.getElementById('file-upload').click()">
286
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto mb-4 text-base-content/50"></i>
287
+ <p class="text-base-content/70 mb-2">Drag & drop files here or click to browse</p>
288
+ <p class="text-sm text-base-content/50">Supported: PDF, DOC, JSON, CSV, MP3, MP4</p>
289
+ </div>
290
+ <input type="file" id="file-upload" multiple class="hidden" accept=".pdf,.doc,.docx,.json,.csv,.mp3,.mp4" />
291
+ <div class="mt-4 space-y-2" id="uploaded-files"></div>
292
+ </div>
293
+
294
+ <!-- API Configuration -->
295
+ <div class="form-control">
296
+ <label class="label">
297
+ <span class="label-text">API Configuration</span>
298
+ </label>
299
+ <div class="space-y-3">
300
+ <input type="text" class="input input-bordered" placeholder="API Endpoint URL" />
301
+ <input type="text" class="input input-bordered" placeholder="API Key (optional)" />
302
+ <button class="btn btn-outline btn-sm">
303
+ <i data-feather="plus" class="mr-2"></i>
304
+ Add Another API
305
+ </button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="modal-action">
311
+ <button class="btn btn-primary">Create Pod</button>
312
+ <button class="btn btn-ghost" onclick="document.getElementById('create-pod-modal').close()">Cancel</button>
313
+ </div>
314
+ </div>
315
+ </dialog>
316
+
317
+ <script>
318
+ // Initialize Feather Icons
319
+ feather.replace();
320
+
321
+ // Show create pod modal
322
+ function showCreatePodModal() {
323
+ document.getElementById('create-pod-modal').showModal();
324
+ }
325
+
326
+ // Handle file upload
327
+ document.getElementById('file-upload').addEventListener('change', function(e) {
328
+ const files = e.target.files;
329
+ const uploadedFiles = document.getElementById('uploaded-files');
330
+ uploadedFiles.innerHTML = '';
331
+
332
+ Array.from(files).forEach(file => {
333
+ const fileElement = document.createElement('div');
334
+ fileElement.className = 'flex justify-between items-center p-2 bg-base-200 rounded';
335
+ fileElement.innerHTML = `
336
+ <div class="flex items-center gap-2">
337
+ <i data-feather="file" class="w-4 h-4"></i>
338
+ <span class="text-sm">${file.name}</span>
339
+ </div>
340
+ <button class="btn btn-ghost btn-xs" onclick="this.parentElement.remove()">
341
+ <i data-feather="x" class="w-3 h-3"></i>
342
+ </button>
343
+ `;
344
+ uploadedFiles.appendChild(fileElement);
345
+ });
346
+ feather.replace();
347
+ });
348
+
349
+ // Add floating animation to first pod card
350
+ document.addEventListener('DOMContentLoaded', function() {
351
+ const firstPod = document.querySelector('.floating');
352
+ if (firstPod) {
353
+ firstPod.style.animationDelay = '0s';
354
+ }
355
+ });
356
+ </script>
357
+ </body>
358
+ </html>
instructions.html ADDED
@@ -0,0 +1,381 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Instructions - QhySync AI vQOS v3.0</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css" rel="stylesheet" type="text/css" />
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .instruction-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .instruction-card:hover {
17
+ transform: translateY(-3px);
18
+ box-shadow: 0 8px 20px rgba(0,0,0,0.15);
19
+ }
20
+ .step-number {
21
+ width: 32px;
22
+ height: 32px;
23
+ border-radius: 50%;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ font-weight: bold;
28
+ font-size: 14px;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="h-screen bg-base-200">
33
+ <!-- Header -->
34
+ <header class="navbar bg-base-100 shadow-sm p-4">
35
+ <div class="flex-1">
36
+ <button class="btn btn-ghost" onclick="window.location.href='index.html'">
37
+ <i data-feather="arrow-left" class="mr-2"></i>
38
+ Back to Chat
39
+ </button>
40
+ <h1 class="text-xl font-bold ml-4">Instructions & Documentation</h1>
41
+ </div>
42
+ <div class="flex-none">
43
+ <div class="form-control">
44
+ <input type="text" placeholder="Search instructions..." class="input input-bordered input-sm" />
45
+ </div>
46
+ </div>
47
+ </header>
48
+
49
+ <!-- Main Content -->
50
+ <main class="p-6 overflow-y-auto">
51
+ <!-- Welcome Section -->
52
+ <div class="hero bg-base-100 rounded-xl p-8 mb-8">
53
+ <div class="hero-content text-center">
54
+ <div class="max-w-4xl">
55
+ <h1 class="text-4xl font-bold mb-4">Welcome to QhySync AI vQOS v3.0</h1>
56
+ <p class="text-lg text-base-content/70 mb-6">
57
+ Your intelligent assistant for seamless AI-powered conversations and custom agent training.
58
+ Get started with our comprehensive guide below.
59
+ </p>
60
+ <div class="flex gap-4 justify-center">
61
+ <button class="btn btn-primary" onclick="scrollToSection('getting-started')">
62
+ <i data-feather="play" class="mr-2"></i>
63
+ Get Started
64
+ </button>
65
+ <button class="btn btn-outline" onclick="scrollToSection('features')">
66
+ <i data-feather="star" class="mr-2"></i>
67
+ Key Features
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Getting Started -->
75
+ <div id="getting-started" class="mb-12">
76
+ <h2 class="text-3xl font-bold mb-6">Getting Started</h2>
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
78
+ <!-- Step 1 -->
79
+ <div class="instruction-card card bg-base-100 shadow-lg">
80
+ <div class="card-body">
81
+ <div class="flex items-center gap-3 mb-4">
82
+ <div class="step-number bg-primary text-primary-content">1</div>
83
+ <h3 class="card-title text-lg">Start a Conversation</h3>
84
+ </div>
85
+ <p class="text-base-content/70">
86
+ Open the chat interface and start typing your questions. Use natural language to communicate with the AI.
87
+ </p>
88
+ <div class="card-actions justify-end mt-4">
89
+ <button class="btn btn-ghost btn-sm" onclick="window.location.href='index.html'">
90
+ Try it now
91
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Step 2 -->
98
+ <div class="instruction-card card bg-base-100 shadow-lg">
99
+ <div class="card-body">
100
+ <div class="flex items-center gap-3 mb-4">
101
+ <div class="step-number bg-secondary text-secondary-content">2</div>
102
+ <h3 class="card-title text-lg">Create AI Pods</h3>
103
+ </div>
104
+ <p class="text-base-content/70">
105
+ Build custom AI agents tailored to your specific needs with our intuitive pod creation system.
106
+ </p>
107
+ <div class="card-actions justify-end mt-4">
108
+ <button class="btn btn-ghost btn-sm" onclick="window.location.href='ai-pods.html'">
109
+ Create a Pod
110
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Step 3 -->
117
+ <div class="instruction-card card bg-base-100 shadow-lg">
118
+ <div class="card-body">
119
+ <div class="flex items-center gap-3 mb-4">
120
+ <div class="step-number bg-accent text-accent-content">3</div>
121
+ <h3 class="card-title text-lg">Advanced Features</h3>
122
+ </div>
123
+ <p class="text-base-content/70">
124
+ Explore voice input, file uploads, API integrations, and other powerful tools to enhance your workflow.
125
+ </p>
126
+ <div class="card-actions justify-end mt-4">
127
+ <button class="btn btn-ghost btn-sm" onclick="scrollToSection('advanced-features')">
128
+ Learn More
129
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Key Features -->
138
+ <div id="features" class="mb-12">
139
+ <h2 class="text-3xl font-bold mb-6">Key Features</h2>
140
+ <div class="space-y-6">
141
+ <!-- Feature 1 -->
142
+ <div class="card bg-base-100 shadow-lg">
143
+ <div class="card-body">
144
+ <div class="flex items-start gap-4">
145
+ <div class="bg-primary/10 p-3 rounded-lg">
146
+ <i data-feather="message-circle" class="w-6 h-6 text-primary"></i>
147
+ </div>
148
+ <div class="flex-1">
149
+ <h3 class="card-title mb-2">Natural Language Processing</h3>
150
+ <p class="text-base-content/70 mb-4">
151
+ Our AI understands and responds to natural language queries with high accuracy.
152
+ You can ask questions, request analyses, or engage in detailed conversations.
153
+ </p>
154
+ <div class="flex gap-2 flex-wrap">
155
+ <div class="badge badge-primary">Real-time</div>
156
+ <div class="badge badge-secondary">Multi-language</div>
157
+ <div class="badge badge-accent">Context-aware</div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Feature 2 -->
165
+ <div class="card bg-base-100 shadow-lg">
166
+ <div class="card-body">
167
+ <div class="flex items-start gap-4">
168
+ <div class="bg-secondary/10 p-3 rounded-lg">
169
+ <i data-feather="cpu" class="w-6 h-6 text-secondary"></i>
170
+ </div>
171
+ <div class="flex-1">
172
+ <h3 class="card-title mb-2">Custom AI Pods</h3>
173
+ <p class="text-base-content/70 mb-4">
174
+ Create specialized AI agents for different tasks. Train them with your data,
175
+ connect to external APIs, and deploy them for specific use cases.
176
+ </p>
177
+ <div class="flex gap-2 flex-wrap">
178
+ <div class="badge badge-primary">Custom Training</div>
179
+ <div class="badge badge-secondary">API Integration</div>
180
+ <div class="badge badge-accent">Multi-modal</div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Feature 3 -->
188
+ <div class="card bg-base-100 shadow-lg">
189
+ <div class="card-body">
190
+ <div class="flex items-start gap-4">
191
+ <div class="bg-accent/10 p-3 rounded-lg">
192
+ <i data-feather="settings" class="w-6 h-6 text-accent"></i>
193
+ </div>
194
+ <div class="flex-1">
195
+ <h3 class="card-title mb-2">Advanced Tools</h3>
196
+ <p class="text-base-content/70 mb-4">
197
+ Access powerful tools including voice input/output, file processing,
198
+ web browsing capabilities, and real-time collaboration features.
199
+ </p>
200
+ <div class="flex gap-2 flex-wrap">
201
+ <div class="badge badge-primary">Voice I/O</div>
202
+ <div class="badge badge-secondary">File Support</div>
203
+ <div class="badge badge-accent">Real-time</div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Advanced Features -->
213
+ <div id="advanced-features" class="mb-12">
214
+ <h2 class="text-3xl font-bold mb-6">Advanced Features</h2>
215
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
216
+ <!-- Voice Features -->
217
+ <div class="card bg-base-100 shadow-lg">
218
+ <div class="card-body">
219
+ <h3 class="card-title mb-4 flex items-center gap-2">
220
+ <i data-feather="mic" class="text-primary"></i>
221
+ Voice Input/Output
222
+ </h3>
223
+ <ul class="space-y-2 text-base-content/70">
224
+ <li class="flex items-center gap-2">
225
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
226
+ <span>Real-time speech recognition</span>
227
+ </li>
228
+ <li class="flex items-center gap-2">
229
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
230
+ <span>Natural voice synthesis</span>
231
+ </li>
232
+ <li class="flex items-center gap-2">
233
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
234
+ <span>Multiple language support</span>
235
+ </li>
236
+ <li class="flex items-center gap-2">
237
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
238
+ <span>Background noise filtering</span>
239
+ </li>
240
+ </ul>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- File Processing -->
245
+ <div class="card bg-base-100 shadow-lg">
246
+ <div class="card-body">
247
+ <h3 class="card-title mb-4 flex items-center gap-2">
248
+ <i data-feather="file-text" class="text-secondary"></i>
249
+ File Processing
250
+ </h3>
251
+ <ul class="space-y-2 text-base-content/70">
252
+ <li class="flex items-center gap-2">
253
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
254
+ <span>PDF document analysis</span>
255
+ </li>
256
+ <li class="flex items-center gap-2">
257
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
258
+ <span>Image recognition</span>
259
+ </li>
260
+ <li class="flex items-center gap-2">
261
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
262
+ <span>Audio/video transcription</span>
263
+ </li>
264
+ <li class="flex items-center gap-2">
265
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
266
+ <span>Spreadsheet data extraction</span>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- API Integration -->
273
+ <div class="card bg-base-100 shadow-lg">
274
+ <div class="card-body">
275
+ <h3 class="card-title mb-4 flex items-center gap-2">
276
+ <i data-feather="link" class="text-accent"></i>
277
+ API Integration
278
+ </h3>
279
+ <ul class="space-y-2 text-base-content/70">
280
+ <li class="flex items-center gap-2">
281
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
282
+ <span>REST API connections</span>
283
+ </li>
284
+ <li class="flex items-center gap-2">
285
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
286
+ <span>Webhook support</span>
287
+ </li>
288
+ <li class="flex items-center gap-2">
289
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
290
+ <span>Real-time data streaming</span>
291
+ </li>
292
+ <li class="flex items-center gap-2">
293
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
294
+ <span>Custom authentication</span>
295
+ </li>
296
+ </ul>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Security -->
301
+ <div class="card bg-base-100 shadow-lg">
302
+ <div class="card-body">
303
+ <h3 class="card-title mb-4 flex items-center gap-2">
304
+ <i data-feather="shield" class="text-primary"></i>
305
+ Security & Privacy
306
+ </h3>
307
+ <ul class="space-y-2 text-base-content/70">
308
+ <li class="flex items-center gap-2">
309
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
310
+ <span>End-to-end encryption</span>
311
+ </li>
312
+ <li class="flex items-center gap-2">
313
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
314
+ <span>Data anonymization</span>
315
+ </li>
316
+ <li class="flex items-center gap-2">
317
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
318
+ <span>GDPR compliance</span>
319
+ </li>
320
+ <li class="flex items-center gap-2">
321
+ <i data-feather="check" class="w-4 h-4 text-success"></i>
322
+ <span>Regular security audits</span>
323
+ </li>
324
+ </ul>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Quick Tips -->
331
+ <div class="bg-primary text-primary-content rounded-xl p-6 mb-8">
332
+ <div class="flex items-start gap-4">
333
+ <i data-feather="lightbulb" class="w-8 h-8 mt-1"></i>
334
+ <div>
335
+ <h3 class="text-xl font-bold mb-2">Pro Tips</h3>
336
+ <ul class="space-y-2">
337
+ <li>• Use specific and detailed prompts for better responses</li>
338
+ <li>• Train your AI pods with relevant data for specialized tasks</li>
339
+ <li>• Utilize voice commands for hands-free operation</li>
340
+ <li>• Connect external APIs to extend functionality</li>
341
+ <li>• Use the command palette (Ctrl+K) for quick actions</li>
342
+ </ul>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </main>
347
+
348
+ <!-- Footer -->
349
+ <footer class="p-6 bg-base-300 text-center">
350
+ <p class="text-base-content/70">
351
+ Need more help? Contact our support team at
352
+ <a href="mailto:support@qysync.ai" class="link link-primary">support@qysync.ai</a>
353
+ </p>
354
+ </footer>
355
+
356
+ <script>
357
+ // Initialize Feather Icons
358
+ feather.replace();
359
+
360
+ // Smooth scroll to section
361
+ function scrollToSection(sectionId) {
362
+ document.getElementById(sectionId).scrollIntoView({
363
+ behavior: 'smooth'
364
+ });
365
+ }
366
+
367
+ // Add hover effects to instruction cards
368
+ document.addEventListener('DOMContentLoaded', function() {
369
+ const cards = document.querySelectorAll('.instruction-card');
370
+ cards.forEach(card => {
371
+ card.addEventListener('mouseenter', function() {
372
+ this.style.transform = 'translateY(-3px)';
373
+ });
374
+ card.addEventListener('mouseleave', function() {
375
+ this.style.transform = 'translateY(0)';
376
+ });
377
+ });
378
+ });
379
+ </script>
380
+ </body>
381
+ </html>