Markush9191 commited on
Commit
101566e
·
verified ·
1 Parent(s): e75e6b4

Create an LLM chatbot that can analyze text, audio and visual data to give you the best possible responses to say back, based off of psychological tests, relationship psychology and through LLM data analyzation. Can socially identify markers within analyzed texts and gives you regenerated AI responses based off of analyzations - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +306 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Textanalytics
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: textanalytics
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,307 @@
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>PsychAI - Advanced Communication Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .gradient-bg {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .chat-bubble {
17
+ border-radius: 1.5rem;
18
+ max-width: 80%;
19
+ }
20
+ .user-bubble {
21
+ background-color: #4f46e5;
22
+ color: white;
23
+ border-bottom-right-radius: 0.5rem;
24
+ }
25
+ .ai-bubble {
26
+ background-color: #f3f4f6;
27
+ color: #111827;
28
+ border-bottom-left-radius: 0.5rem;
29
+ }
30
+ .analysis-tag {
31
+ font-size: 0.75rem;
32
+ padding: 0.25rem 0.5rem;
33
+ border-radius: 9999px;
34
+ }
35
+ .pulse-animation {
36
+ animation: pulse 2s infinite;
37
+ }
38
+ @keyframes pulse {
39
+ 0% { opacity: 0.6; }
40
+ 50% { opacity: 1; }
41
+ 100% { opacity: 0.6; }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 min-h-screen">
46
+ <!-- Navigation -->
47
+ <nav class="gradient-bg text-white shadow-lg">
48
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
49
+ <div class="flex items-center space-x-2">
50
+ <i data-feather="activity" class="w-6 h-6"></i>
51
+ <span class="text-xl font-bold">PsychAI</span>
52
+ </div>
53
+ <div class="hidden md:flex space-x-6">
54
+ <a href="#" class="hover:text-gray-200 transition">Home</a>
55
+ <a href="#" class="hover:text-gray-200 transition">Features</a>
56
+ <a href="#" class="hover:text-gray-200 transition">About</a>
57
+ </div>
58
+ <button class="md:hidden">
59
+ <i data-feather="menu" class="w-6 h-6"></i>
60
+ </button>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section class="gradient-bg text-white py-16">
66
+ <div class="container mx-auto px-4 text-center" data-aos="fade-up">
67
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Advanced Psychological AI Assistant</h1>
68
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
69
+ Analyze text, audio, and visual data to craft psychologically optimized responses
70
+ </p>
71
+ <div class="flex flex-col md:flex-row justify-center gap-4">
72
+ <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg">
73
+ Try Now
74
+ </button>
75
+ <button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-700 transition">
76
+ Learn More
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Main Chat Interface -->
83
+ <section class="container mx-auto px-4 py-12 max-w-6xl">
84
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
85
+ <!-- Chat Header -->
86
+ <div class="bg-gray-800 text-white p-4 flex items-center">
87
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
88
+ <i data-feather="cpu" class="w-5 h-5"></i>
89
+ </div>
90
+ <div class="ml-3">
91
+ <h3 class="font-semibold">PsychAI Assistant</h3>
92
+ <p class="text-xs text-gray-300">Analyzing your input...</p>
93
+ </div>
94
+ <div class="ml-auto flex space-x-2">
95
+ <button class="p-2 rounded-full hover:bg-gray-700">
96
+ <i data-feather="settings" class="w-4 h-4"></i>
97
+ </button>
98
+ <button class="p-2 rounded-full hover:bg-gray-700">
99
+ <i data-feather="maximize-2" class="w-4 h-4"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Chat Messages -->
105
+ <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-container">
106
+ <!-- AI Welcome Message -->
107
+ <div class="flex justify-start">
108
+ <div class="chat-bubble ai-bubble p-4">
109
+ <p>Hello! I'm PsychAI, your advanced psychological assistant. I can analyze text, audio, and visual data to help you craft the most effective responses based on psychological principles.</p>
110
+ <div class="mt-2 flex flex-wrap gap-2">
111
+ <span class="analysis-tag bg-blue-100 text-blue-800">Empathy Detected</span>
112
+ <span class="analysis-tag bg-purple-100 text-purple-800">Open-Ended</span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- User Message -->
118
+ <div class="flex justify-end">
119
+ <div class="chat-bubble user-bubble p-4">
120
+ <p>My partner seems distant lately. How should I approach this?</p>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- AI Response -->
125
+ <div class="flex justify-start">
126
+ <div class="chat-bubble ai-bubble p-4">
127
+ <p>Based on psychological research, I recommend a gentle, non-confrontational approach. Try saying: "I've noticed you've seemed a bit distant recently. I want you to know I'm here to listen if you'd like to share what's on your mind."</p>
128
+ <div class="mt-2 flex flex-wrap gap-2">
129
+ <span class="analysis-tag bg-green-100 text-green-800">Active Listening</span>
130
+ <span class="analysis-tag bg-yellow-100 text-yellow-800">Non-Judgmental</span>
131
+ <span class="analysis-tag bg-red-100 text-red-800">Emotional Support</span>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- AI Generating Indicator -->
137
+ <div class="flex justify-start hidden" id="ai-thinking">
138
+ <div class="chat-bubble ai-bubble p-4 flex items-center">
139
+ <div class="pulse-animation flex space-x-2">
140
+ <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
141
+ <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
142
+ <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
143
+ </div>
144
+ <span class="ml-2 text-gray-500">Analyzing psychological markers...</span>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Input Area -->
150
+ <div class="border-t border-gray-200 p-4">
151
+ <div class="flex items-center">
152
+ <button class="p-2 text-gray-500 hover:text-gray-700">
153
+ <i data-feather="paperclip" class="w-5 h-5"></i>
154
+ </button>
155
+ <input type="text" placeholder="Type your message or upload text/audio/image..."
156
+ class="flex-1 border-0 focus:ring-0 focus:outline-none px-4 py-2">
157
+ <button class="p-2 text-indigo-600 hover:text-indigo-800">
158
+ <i data-feather="send" class="w-5 h-5"></i>
159
+ </button>
160
+ </div>
161
+ <div class="mt-2 flex justify-between text-xs text-gray-500">
162
+ <div class="flex space-x-2">
163
+ <button class="hover:text-indigo-600">Text Analysis</button>
164
+ <button class="hover:text-indigo-600">Audio Analysis</button>
165
+ <button class="hover:text-indigo-600">Visual Analysis</button>
166
+ </div>
167
+ <button class="hover:text-indigo-600">Psychological Settings</button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Features Section -->
174
+ <section class="bg-gray-100 py-16">
175
+ <div class="container mx-auto px-4">
176
+ <h2 class="text-3xl font-bold text-center mb-12">Advanced Psychological Analysis</h2>
177
+ <div class="grid md:grid-cols-3 gap-8">
178
+ <!-- Feature 1 -->
179
+ <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up">
180
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-4">
181
+ <i data-feather="message-square" class="text-indigo-600 w-6 h-6"></i>
182
+ </div>
183
+ <h3 class="font-bold text-xl mb-2">Text Analysis</h3>
184
+ <p class="text-gray-600">Deep analysis of linguistic patterns, emotional tone, and psychological markers in written communication.</p>
185
+ </div>
186
+
187
+ <!-- Feature 2 -->
188
+ <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
189
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-4">
190
+ <i data-feather="mic" class="text-purple-600 w-6 h-6"></i>
191
+ </div>
192
+ <h3 class="font-bold text-xl mb-2">Audio Analysis</h3>
193
+ <p class="text-gray-600">Voice tone, speech patterns, and emotional cues analysis for comprehensive psychological profiling.</p>
194
+ </div>
195
+
196
+ <!-- Feature 3 -->
197
+ <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
198
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mb-4">
199
+ <i data-feather="image" class="text-pink-600 w-6 h-6"></i>
200
+ </div>
201
+ <h3 class="font-bold text-xl mb-2">Visual Analysis</h3>
202
+ <p class="text-gray-600">Facial expression, body language, and micro-expressions analysis for deeper psychological insights.</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Footer -->
209
+ <footer class="bg-gray-900 text-white py-12">
210
+ <div class="container mx-auto px-4">
211
+ <div class="grid md:grid-cols-4 gap-8">
212
+ <div>
213
+ <h3 class="font-bold text-xl mb-4">PsychAI</h3>
214
+ <p class="text-gray-400">Advanced psychological analysis for better communication.</p>
215
+ </div>
216
+ <div>
217
+ <h4 class="font-semibold mb-4">Features</h4>
218
+ <ul class="space-y-2">
219
+ <li><a href="#" class="text-gray-400 hover:text-white">Text Analysis</a></li>
220
+ <li><a href="#" class="text-gray-400 hover:text-white">Audio Analysis</a></li>
221
+ <li><a href="#" class="text-gray-400 hover:text-white">Visual Analysis</a></li>
222
+ </ul>
223
+ </div>
224
+ <div>
225
+ <h4 class="font-semibold mb-4">Resources</h4>
226
+ <ul class="space-y-2">
227
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
228
+ <li><a href="#" class="text-gray-400 hover:text-white">Research Papers</a></li>
229
+ <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li>
230
+ </ul>
231
+ </div>
232
+ <div>
233
+ <h4 class="font-semibold mb-4">Connect</h4>
234
+ <div class="flex space-x-4">
235
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
236
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
237
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
242
+ <p>© 2023 PsychAI. All rights reserved.</p>
243
+ </div>
244
+ </div>
245
+ </footer>
246
+
247
+ <script>
248
+ AOS.init({
249
+ duration: 800,
250
+ easing: 'ease-in-out',
251
+ once: true
252
+ });
253
+ feather.replace();
254
+
255
+ // Simple chat interaction simulation
256
+ document.querySelector('input').addEventListener('keypress', function(e) {
257
+ if(e.key === 'Enter') {
258
+ const chatContainer = document.getElementById('chat-container');
259
+ const thinkingIndicator = document.getElementById('ai-thinking');
260
+
261
+ // Show user message
262
+ const userMessage = this.value;
263
+ const userBubble = document.createElement('div');
264
+ userBubble.className = 'flex justify-end';
265
+ userBubble.innerHTML = `
266
+ <div class="chat-bubble user-bubble p-4">
267
+ <p>${userMessage}</p>
268
+ </div>
269
+ `;
270
+ chatContainer.appendChild(userBubble);
271
+
272
+ // Show thinking indicator
273
+ thinkingIndicator.classList.remove('hidden');
274
+ chatContainer.appendChild(thinkingIndicator);
275
+
276
+ // Scroll to bottom
277
+ chatContainer.scrollTop = chatContainer.scrollHeight;
278
+
279
+ // Clear input
280
+ this.value = '';
281
+
282
+ // Simulate AI response after delay
283
+ setTimeout(() => {
284
+ thinkingIndicator.classList.add('hidden');
285
+
286
+ // Create AI response
287
+ const aiBubble = document.createElement('div');
288
+ aiBubble.className = 'flex justify-start';
289
+ aiBubble.innerHTML = `
290
+ <div class="chat-bubble ai-bubble p-4">
291
+ <p>Based on psychological analysis, I recommend a response that shows empathy and openness. Try: "I appreciate you sharing that with me. How can I best support you in this situation?"</p>
292
+ <div class="mt-2 flex flex-wrap gap-2">
293
+ <span class="analysis-tag bg-green-100 text-green-800">Empathy</span>
294
+ <span class="analysis-tag bg-purple-100 text-purple-800">Supportive</span>
295
+ </div>
296
+ </div>
297
+ `;
298
+ chatContainer.appendChild(aiBubble);
299
+
300
+ // Scroll to bottom again
301
+ chatContainer.scrollTop = chatContainer.scrollHeight;
302
+ }, 2000);
303
+ }
304
+ });
305
+ </script>
306
+ </body>
307
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an LLM chatbot that can analyze text, audio and visual data to give you the best possible responses to say back, based off of psychological tests, relationship psychology and through LLM data analyzation. Can socially identify markers within analyzed texts and gives you regenerated AI responses based off of analyzations