Hugging Face's logo

Spaces:
clem
/
invitra
Running

App Files
clem HF Staff commited on
Commit
4ece8a7
·
verified ·
1 Parent(s): 0d5eac0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +431 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Invitra
3
- emoji: 📚
4
- colorFrom: gray
5
  colorTo: pink
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: invitra
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: pink
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,431 @@
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>InVitra - Your Fertility Journey Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .ivf-timeline {
14
+ position: relative;
15
+ padding-left: 3rem;
16
+ }
17
+ .ivf-timeline::before {
18
+ content: '';
19
+ position: absolute;
20
+ left: 1.5rem;
21
+ top: 0;
22
+ bottom: 0;
23
+ width: 2px;
24
+ background: #8b5cf6;
25
+ }
26
+ .timeline-item {
27
+ position: relative;
28
+ margin-bottom: 2rem;
29
+ }
30
+ .timeline-item::before {
31
+ content: '';
32
+ position: absolute;
33
+ left: -3.5rem;
34
+ top: 0.5rem;
35
+ width: 1.5rem;
36
+ height: 1.5rem;
37
+ border-radius: 50%;
38
+ background: #8b5cf6;
39
+ border: 3px solid white;
40
+ }
41
+ .chat-bubble {
42
+ border-radius: 1.5rem;
43
+ max-width: 80%;
44
+ }
45
+ .user-bubble {
46
+ background-color: #8b5cf6;
47
+ color: white;
48
+ border-bottom-right-radius: 0.5rem;
49
+ }
50
+ .bot-bubble {
51
+ background-color: #f3f4f6;
52
+ color: #1f2937;
53
+ border-bottom-left-radius: 0.5rem;
54
+ }
55
+ .fade-in {
56
+ animation: fadeIn 0.5s ease-in;
57
+ }
58
+ @keyframes fadeIn {
59
+ from { opacity: 0; transform: translateY(10px); }
60
+ to { opacity: 1; transform: translateY(0); }
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="gradient-bg min-h-screen font-sans">
65
+ <!-- Header -->
66
+ <header class="bg-purple-600 text-white shadow-lg">
67
+ <div class="container mx-auto px-4 py-6">
68
+ <div class="flex justify-between items-center">
69
+ <div class="flex items-center space-x-3">
70
+ <i class="fas fa-baby text-3xl"></i>
71
+ <h1 class="text-2xl font-bold">InVitra</h1>
72
+ </div>
73
+ <nav>
74
+ <ul class="flex space-x-6">
75
+ <li><a href="#resources" class="hover:text-purple-200 transition">Resources</a></li>
76
+ <li><a href="#community" class="hover:text-purple-200 transition">Community</a></li>
77
+ <li><a href="#specialists" class="hover:text-purple-200 transition">Specialists</a></li>
78
+ </ul>
79
+ </nav>
80
+ </div>
81
+ </div>
82
+ </header>
83
+
84
+ <!-- Hero Section -->
85
+ <section class="py-16 px-4">
86
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
87
+ <div class="md:w-1/2 mb-10 md:mb-0">
88
+ <h2 class="text-4xl font-bold text-purple-800 mb-4">Your Personalized IVF Journey Guide</h2>
89
+ <p class="text-lg text-gray-700 mb-6">Empowering women with knowledge, support, and personalized advice throughout every step of the IVF process.</p>
90
+ <div class="flex space-x-4">
91
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition shadow-lg">
92
+ Get Started
93
+ </button>
94
+ <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition">
95
+ Learn More
96
+ </button>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2">
100
+ <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
101
+ alt="Supportive IVF journey"
102
+ class="rounded-xl shadow-xl w-full h-auto max-h-96 object-cover">
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-12">
109
+ <!-- IVF Process Timeline -->
110
+ <section class="mb-20">
111
+ <h2 class="text-3xl font-bold text-center text-purple-800 mb-12">Understanding the IVF Process</h2>
112
+ <div class="ivf-timeline max-w-3xl mx-auto">
113
+ <div class="timeline-item">
114
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">1. Initial Consultation</h3>
115
+ <p class="text-gray-700">Meet with a fertility specialist to discuss your medical history, perform tests, and create a personalized treatment plan.</p>
116
+ </div>
117
+ <div class="timeline-item">
118
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">2. Ovarian Stimulation</h3>
119
+ <p class="text-gray-700">You'll take fertility medications for 8-14 days to stimulate your ovaries to produce multiple eggs.</p>
120
+ </div>
121
+ <div class="timeline-item">
122
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">3. Egg Retrieval</h3>
123
+ <p class="text-gray-700">A minor surgical procedure where eggs are collected from your ovaries using ultrasound guidance.</p>
124
+ </div>
125
+ <div class="timeline-item">
126
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">4. Fertilization</h3>
127
+ <p class="text-gray-700">Eggs are combined with sperm in the lab. Fertilization may occur through conventional IVF or ICSI.</p>
128
+ </div>
129
+ <div class="timeline-item">
130
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">5. Embryo Development</h3>
131
+ <p class="text-gray-700">Fertilized eggs (embryos) are monitored for 3-5 days as they develop in the laboratory.</p>
132
+ </div>
133
+ <div class="timeline-item">
134
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">6. Embryo Transfer</h3>
135
+ <p class="text-gray-700">One or more healthy embryos are transferred to your uterus using a thin catheter.</p>
136
+ </div>
137
+ <div class="timeline-item">
138
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">7. Pregnancy Test</h3>
139
+ <p class="text-gray-700">About 9-14 days after embryo transfer, you'll have a blood test to check for pregnancy.</p>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Interactive Advice Chat -->
145
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-20">
146
+ <h2 class="text-3xl font-bold text-center text-purple-800 mb-8">Ask Our IVF Advisor</h2>
147
+ <div class="max-w-3xl mx-auto">
148
+ <div id="chat-container" class="h-96 overflow-y-auto mb-6 p-4 bg-gray-50 rounded-lg flex flex-col space-y-4">
149
+ <div class="bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md fade-in">
150
+ <p>Hello! I'm here to help answer your questions about the IVF process. What would you like to know today?</p>
151
+ </div>
152
+ </div>
153
+ <div class="flex">
154
+ <input type="text" id="user-input" placeholder="Ask about medications, side effects, success rates..."
155
+ class="flex-grow px-4 py-3 border-2 border-purple-300 rounded-l-full focus:outline-none focus:border-purple-500">
156
+ <button id="send-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-r-full transition">
157
+ <i class="fas fa-paper-plane"></i>
158
+ </button>
159
+ </div>
160
+ <div class="mt-4 flex justify-center space-x-4">
161
+ <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
162
+ Medication side effects?
163
+ </button>
164
+ <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
165
+ Success rates by age?
166
+ </button>
167
+ <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
168
+ Emotional support tips?
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Resources Section -->
175
+ <section id="resources" class="mb-20">
176
+ <h2 class="text-3xl font-bold text-center text-purple-800 mb-12">Helpful Resources</h2>
177
+ <div class="grid md:grid-cols-3 gap-8">
178
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
179
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
180
+ <i class="fas fa-book-medical text-6xl text-purple-600"></i>
181
+ </div>
182
+ <div class="p-6">
183
+ <h3 class="text-xl font-semibold text-purple-700 mb-3">IVF Medications Guide</h3>
184
+ <p class="text-gray-600 mb-4">Comprehensive information about fertility drugs, their purposes, and potential side effects.</p>
185
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a>
186
+ </div>
187
+ </div>
188
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
189
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
190
+ <i class="fas fa-utensils text-6xl text-purple-600"></i>
191
+ </div>
192
+ <div class="p-6">
193
+ <h3 class="text-xl font-semibold text-purple-700 mb-3">Nutrition & IVF</h3>
194
+ <p class="text-gray-600 mb-4">Dietary recommendations to support your fertility and IVF treatment success.</p>
195
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a>
196
+ </div>
197
+ </div>
198
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
199
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
200
+ <i class="fas fa-heart text-6xl text-purple-600"></i>
201
+ </div>
202
+ <div class="p-6">
203
+ <h3 class="text-xl font-semibold text-purple-700 mb-3">Emotional Wellness</h3>
204
+ <p class="text-gray-600 mb-4">Strategies for managing stress and emotional challenges during your IVF journey.</p>
205
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Community Section -->
212
+ <section id="community" class="bg-purple-50 rounded-xl p-8 mb-20">
213
+ <div class="max-w-4xl mx-auto">
214
+ <h2 class="text-3xl font-bold text-center text-purple-800 mb-8">Join Our Supportive Community</h2>
215
+ <div class="flex flex-col md:flex-row items-center">
216
+ <div class="md:w-1/2 mb-8 md:mb-0">
217
+ <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=760&q=80"
218
+ alt="Supportive community"
219
+ class="rounded-lg shadow-md w-full">
220
+ </div>
221
+ <div class="md:w-1/2 md:pl-8">
222
+ <h3 class="text-xl font-semibold text-purple-700 mb-4">You're Not Alone</h3>
223
+ <p class="text-gray-700 mb-6">Connect with other women going through similar experiences. Share stories, ask questions, and find emotional support from those who truly understand.</p>
224
+ <div class="space-y-4">
225
+ <div class="flex items-center">
226
+ <i class="fas fa-comments text-purple-600 mr-4 text-xl"></i>
227
+ <span>Private discussion forums</span>
228
+ </div>
229
+ <div class="flex items-center">
230
+ <i class="fas fa-calendar-check text-purple-600 mr-4 text-xl"></i>
231
+ <span>Live Q&A with specialists</span>
232
+ </div>
233
+ <div class="flex items-center">
234
+ <i class="fas fa-hands-helping text-purple-600 mr-4 text-xl"></i>
235
+ <span>Peer support groups</span>
236
+ </div>
237
+ </div>
238
+ <button class="mt-6 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition shadow">
239
+ Join Community
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+ </main>
246
+
247
+ <!-- Footer -->
248
+ <footer class="bg-purple-900 text-white py-12">
249
+ <div class="container mx-auto px-4">
250
+ <div class="grid md:grid-cols-4 gap-8">
251
+ <div>
252
+ <h3 class="text-xl font-bold mb-4">InVitra</h3>
253
+ <p class="text-purple-200">Empowering women with knowledge and support throughout their fertility journey.</p>
254
+ </div>
255
+ <div>
256
+ <h4 class="font-semibold mb-4">Quick Links</h4>
257
+ <ul class="space-y-2">
258
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Home</a></li>
259
+ <li><a href="#" class="text-purple-200 hover:text-white transition">About Us</a></li>
260
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Resources</a></li>
261
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Community</a></li>
262
+ </ul>
263
+ </div>
264
+ <div>
265
+ <h4 class="font-semibold mb-4">Support</h4>
266
+ <ul class="space-y-2">
267
+ <li><a href="#" class="text-purple-200 hover:text-white transition">FAQ</a></li>
268
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Privacy Policy</a></li>
269
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Terms of Service</a></li>
270
+ <li><a href="#" class="text-purple-200 hover:text-white transition">Contact Us</a></li>
271
+ </ul>
272
+ </div>
273
+ <div>
274
+ <h4 class="font-semibold mb-4">Connect With Us</h4>
275
+ <div class="flex space-x-4">
276
+ <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-facebook"></i></a>
277
+ <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-instagram"></i></a>
278
+ <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-twitter"></i></a>
279
+ <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-pinterest"></i></a>
280
+ </div>
281
+ <p class="mt-4 text-purple-200">Subscribe to our newsletter</p>
282
+ <div class="mt-2 flex">
283
+ <input type="email" placeholder="Your email" class="px-3 py-2 text-gray-800 rounded-l focus:outline-none w-full">
284
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 rounded-r"><i class="fas fa-paper-plane"></i></button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="border-t border-purple-800 mt-8 pt-8 text-center text-purple-400">
289
+ <p>&copy; 2023 InVitra. All rights reserved.</p>
290
+ </div>
291
+ </div>
292
+ </footer>
293
+
294
+ <script>
295
+ // IVF Knowledge Base
296
+ const ivfKnowledge = {
297
+ "medication side effects": {
298
+ response: "Common IVF medication side effects may include:<br><br>" +
299
+ "• Headaches<br>" +
300
+ "• Mood swings<br>" +
301
+ "• Bloating<br>" +
302
+ "• Mild abdominal pain<br>" +
303
+ "• Breast tenderness<br>" +
304
+ "• Hot flashes<br><br>" +
305
+ "Severe side effects like OHSS (Ovarian Hyperstimulation Syndrome) are rare but require immediate medical attention if you experience severe pain, nausea/vomiting, or sudden weight gain."
306
+ },
307
+ "success rates by age": {
308
+ response: "IVF success rates vary significantly by age:<br><br>" +
309
+ "• Under 35: ~40-50% per cycle<br>" +
310
+ "• 35-37: ~35-40% per cycle<br>" +
311
+ "• 38-40: ~25-30% per cycle<br>" +
312
+ "• 41-42: ~15-20% per cycle<br>" +
313
+ "• Over 42: ~5-10% per cycle<br><br>" +
314
+ "These are general statistics - your doctor can provide more personalized estimates based on your specific situation."
315
+ },
316
+ "emotional support tips": {
317
+ response: "Coping with IVF emotionally:<br><br>" +
318
+ "1. Join a support group (like ours!)<br>" +
319
+ "2. Practice mindfulness or meditation<br>" +
320
+ "3. Communicate openly with your partner<br>" +
321
+ "4. Set realistic expectations<br>" +
322
+ "5. Take breaks when needed<br>" +
323
+ "6. Consider counseling with a therapist specializing in fertility<br>" +
324
+ "7. Maintain other interests outside of IVF<br><br>" +
325
+ "Remember it's normal to feel a range of emotions during this process."
326
+ },
327
+ "cost": {
328
+ response: "IVF costs vary widely but typically range from $12,000-$20,000 per cycle in the US. This usually includes:<br><br>" +
329
+ "• Medications ($3,000-$6,000)<br>" +
330
+ "• Monitoring appointments<br>" +
331
+ "• Egg retrieval procedure<br>" +
332
+ "• Laboratory fees<br>" +
333
+ "• Embryo transfer<br><br>" +
334
+ "Additional costs may apply for genetic testing, frozen embryo transfers, or donor materials. Some insurance plans offer partial coverage."
335
+ },
336
+ "timeline": {
337
+ response: "A typical IVF cycle takes about 6-8 weeks from start to pregnancy test:<br><br>" +
338
+ "1. Ovarian stimulation: 8-14 days<br>" +
339
+ "2. Egg retrieval: 1 day procedure<br>" +
340
+ "3. Fertilization & embryo development: 3-5 days<br>" +
341
+ "4. Embryo transfer: 1 day procedure<br>" +
342
+ "5. Wait for pregnancy test: 9-14 days<br><br>" +
343
+ "Some protocols may vary this timeline, especially if using birth control pills first or freezing embryos for future transfer."
344
+ },
345
+ "preparation": {
346
+ response: "To prepare for IVF:<br><br>" +
347
+ "• Stop smoking and limit alcohol<br>" +
348
+ "• Maintain a healthy BMI<br>" +
349
+ "• Take prenatal vitamins (especially folic acid)<br>" +
350
+ "• Reduce caffeine intake<br>" +
351
+ "• Manage stress through relaxation techniques<br>" +
352
+ "• Review medications with your doctor<br>" +
353
+ "• Consider acupuncture (some find it helpful)<br><br>" +
354
+ "Your clinic will provide specific instructions for your protocol."
355
+ },
356
+ "default": {
357
+ response: "I'm here to help with your IVF questions. Could you please be more specific about what information you're looking for? For example, you could ask about:<br><br>" +
358
+ "• Medication side effects<br>" +
359
+ "• Success rates by age<br>" +
360
+ "• Emotional support tips<br>" +
361
+ "• IVF costs<br>" +
362
+ "• The IVF timeline<br>" +
363
+ "• How to prepare for IVF"
364
+ }
365
+ };
366
+
367
+ // Chat functionality
368
+ document.addEventListener('DOMContentLoaded', function() {
369
+ const chatContainer = document.getElementById('chat-container');
370
+ const userInput = document.getElementById('user-input');
371
+ const sendBtn = document.getElementById('send-btn');
372
+ const quickQuestions = document.querySelectorAll('.quick-question');
373
+
374
+ function addMessage(message, isUser) {
375
+ const messageDiv = document.createElement('div');
376
+ messageDiv.className = `${isUser ? 'user-bubble' : 'bot-bubble'} chat-bubble p-4 ${isUser ? 'self-end' : 'self-start'} max-w-xs md:max-w-md fade-in`;
377
+ messageDiv.innerHTML = `<p>${message}</p>`;
378
+ chatContainer.appendChild(messageDiv);
379
+ chatContainer.scrollTop = chatContainer.scrollHeight;
380
+ }
381
+
382
+ function getResponse(question) {
383
+ question = question.toLowerCase();
384
+ for (const key in ivfKnowledge) {
385
+ if (question.includes(key)) {
386
+ return ivfKnowledge[key].response;
387
+ }
388
+ }
389
+ return ivfKnowledge.default.response;
390
+ }
391
+
392
+ function handleUserInput() {
393
+ const question = userInput.value.trim();
394
+ if (question) {
395
+ addMessage(question, true);
396
+ userInput.value = '';
397
+
398
+ // Simulate typing indicator
399
+ const typingIndicator = document.createElement('div');
400
+ typingIndicator.className = 'bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md';
401
+ typingIndicator.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div></div>';
402
+ chatContainer.appendChild(typingIndicator);
403
+ chatContainer.scrollTop = chatContainer.scrollHeight;
404
+
405
+ // Remove typing indicator after delay and show response
406
+ setTimeout(() => {
407
+ chatContainer.removeChild(typingIndicator);
408
+ const response = getResponse(question);
409
+ addMessage(response, false);
410
+ }, 1000 + Math.random() * 1000);
411
+ }
412
+ }
413
+
414
+ // Event listeners
415
+ sendBtn.addEventListener('click', handleUserInput);
416
+ userInput.addEventListener('keypress', function(e) {
417
+ if (e.key === 'Enter') {
418
+ handleUserInput();
419
+ }
420
+ });
421
+
422
+ quickQuestions.forEach(button => {
423
+ button.addEventListener('click', function() {
424
+ userInput.value = this.textContent;
425
+ handleUserInput();
426
+ });
427
+ });
428
+ });
429
+ </script>
430
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=clem/invitra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
431
+ </html>
prompts.txt ADDED
File without changes