Spaces:

clem
/

in-vitra

Running

App Files Files

clem HF Staff commited on 24 days ago

Commit

8911fb5

verified ·

1 Parent(s): 93a89f6

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +363 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: In Vitra
-emoji: ⚡
-colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: in-vitra
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,363 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InVitra - Your Fertility Journey Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
+        }
+        .chat-bubble {
+            border-radius: 1.5rem;
+            max-width: 80%;
+        }
+        .user-bubble {
+            background-color: #7e22ce;
+            color: white;
+            border-bottom-right-radius: 0.5rem;
+        }
+        .bot-bubble {
+            background-color: #f5f3ff;
+            color: #1f2937;
+            border-bottom-left-radius: 0.5rem;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .hero-image {
+            width: 300px;
+            height: 300px;
+            object-fit: cover;
+            border-radius: 50%;
+            border: 5px solid white;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        }
+        .resource-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen font-sans">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-purple-800 to-purple-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-baby-carriage text-3xl"></i>
+                    <h1 class="text-2xl font-bold">InVitra</h1>
+                </div>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="#chat" class="hover:text-purple-200 transition">Chat</a></li>
+                        <li><a href="#resources" class="hover:text-purple-200 transition">Resources</a></li>
+                        <li><a href="#about" class="hover:text-purple-200 transition">About</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="py-16 px-4">
+        <div class="container mx-auto flex flex-col items-center text-center">
+            <img src="https://images.unsplash.com/photo-1607748851687-ba9a10438621?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
+                 alt="Supportive hands"
+                 class="hero-image mb-8">
+            <h2 class="text-4xl font-bold text-purple-900 mb-4">Your Personalized IVF Companion</h2>
+            <p class="text-lg text-purple-800 mb-6 max-w-2xl">Empowering women with knowledge, support, and personalized advice throughout every step of the IVF process.</p>
+            <a href="#chat" class="bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-800 hover:to-purple-600 text-white px-6 py-3 rounded-full font-medium transition shadow-lg">
+                Start Chatting <i class="fas fa-chevron-right ml-2"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Interactive Advice Chat -->
+    <section id="chat" class="bg-white rounded-xl shadow-lg p-6 mb-20 container mx-auto max-w-4xl">
+        <h2 class="text-3xl font-bold text-center text-purple-900 mb-8">Ask Our IVF Advisor</h2>
+        <div class="max-w-3xl mx-auto">
+            <div id="chat-container" class="h-96 overflow-y-auto mb-6 p-4 bg-purple-50 rounded-lg flex flex-col space-y-4">
+                <div class="bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md fade-in">
+                    <p>Hello! I'm here to help answer your questions about the IVF process. What would you like to know today?</p>
+                </div>
+            </div>
+            <div class="flex">
+                <input type="text" id="user-input" placeholder="Ask about medications, side effects, success rates..."
+                       class="flex-grow px-4 py-3 border-2 border-purple-300 rounded-l-full focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-300">
+                <button id="send-btn" class="bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-800 hover:to-purple-600 text-white px-6 py-3 rounded-r-full transition">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+            <div class="mt-4 flex flex-wrap justify-center gap-2">
+                <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
+                    Medication side effects?
+                </button>
+                <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
+                    Success rates by age?
+                </button>
+                <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
+                    Emotional support tips?
+                </button>
+                <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
+                    What's the typical cost?
+                </button>
+                <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition">
+                    How long does IVF take?
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Resources Section -->
+    <section id="resources" class="mb-20 container mx-auto max-w-4xl">
+        <h2 class="text-3xl font-bold text-center text-purple-900 mb-12">Helpful Resources</h2>
+        <div class="grid md:grid-cols-2 gap-8">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 resource-card">
+                <div class="h-48 bg-gradient-to-r from-purple-100 to-purple-50 flex items-center justify-center">
+                    <i class="fas fa-pills text-6xl text-purple-600"></i>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-purple-800 mb-3">IVF Medications Guide</h3>
+                    <p class="text-gray-600 mb-4">Comprehensive information about fertility drugs, their purposes, and potential side effects.</p>
+                    <a href="#" class="text-purple-600 font-medium hover:text-purple-800 flex items-center">
+                        Read More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 resource-card">
+                <div class="h-48 bg-gradient-to-r from-purple-100 to-purple-50 flex items-center justify-center">
+                    <i class="fas fa-apple-alt text-6xl text-purple-600"></i>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-purple-800 mb-3">Nutrition & IVF</h3>
+                    <p class="text-gray-600 mb-4">Dietary recommendations to support your fertility and IVF treatment success.</p>
+                    <a href="#" class="text-purple-600 font-medium hover:text-purple-800 flex items-center">
+                        Read More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 resource-card">
+                <div class="h-48 bg-gradient-to-r from-purple-100 to-purple-50 flex items-center justify-center">
+                    <i class="fas fa-heartbeat text-6xl text-purple-600"></i>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-purple-800 mb-3">Emotional Wellness</h3>
+                    <p class="text-gray-600 mb-4">Strategies for managing stress and emotional challenges during your IVF journey.</p>
+                    <a href="#" class="text-purple-600 font-medium hover:text-purple-800 flex items-center">
+                        Read More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 resource-card">
+                <div class="h-48 bg-gradient-to-r from-purple-100 to-purple-50 flex items-center justify-center">
+                    <i class="fas fa-calendar-check text-6xl text-purple-600"></i>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-purple-800 mb-3">IVF Timeline</h3>
+                    <p class="text-gray-600 mb-4">Understand what to expect at each stage of the IVF process with our detailed timeline.</p>
+                    <a href="#" class="text-purple-600 font-medium hover:text-purple-800 flex items-center">
+                        Read More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="bg-gradient-to-b from-purple-50 to-white rounded-xl p-8 mb-20 container mx-auto max-w-4xl">
+        <h2 class="text-3xl font-bold text-center text-purple-900 mb-8">About InVitra</h2>
+        <div class="flex flex-col md:flex-row items-center">
+            <div class="md:w-1/3 mb-8 md:mb-0 md:pr-8">
+                <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
+                     alt="Supportive community"
+                     class="rounded-lg shadow-md w-full">
+            </div>
+            <div class="md:w-2/3">
+                <h3 class="text-xl font-semibold text-purple-800 mb-4">Our Mission</h3>
+                <p class="text-gray-700 mb-6">InVitra was created by Regina Sil and Clem Delangue to provide compassionate, evidence-based support for women navigating the complex IVF journey. Our platform combines medical expertise with personal understanding to guide you through every step.</p>
+                <div class="space-y-4">
+                    <div class="flex items-start">
+                        <i class="fas fa-check-circle text-purple-600 mr-4 mt-1"></i>
+                        <span>Trusted information reviewed by fertility specialists</span>
+                    </div>
+                    <div class="flex items-start">
+                        <i class="fas fa-check-circle text-purple-600 mr-4 mt-1"></i>
+                        <span>Personalized guidance tailored to your situation</span>
+                    </div>
+                    <div class="flex items-start">
+                        <i class="fas fa-check-circle text-purple-600 mr-4 mt-1"></i>
+                        <span>24/7 access to support when you need it most</span>
+                    </div>
+                </div>
+                <button class="mt-6 bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-800 hover:to-purple-600 text-white px-6 py-3 rounded-full font-medium transition shadow">
+                    Contact Us <i class="fas fa-envelope ml-2"></i>
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gradient-to-r from-purple-900 to-purple-800 text-white py-12">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-8">
+                <h3 class="text-xl font-bold mb-4">InVitra</h3>
+                <p class="text-purple-200 max-w-2xl mx-auto">Empowering women with knowledge and support throughout their fertility journey.</p>
+            </div>
+            <div class="flex justify-center space-x-6 mb-6">
+                <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-facebook"></i></a>
+                <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-instagram"></i></a>
+                <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-linkedin"></i></a>
+            </div>
+            <div class="border-t border-purple-800 pt-6 text-purple-300">
+                <p>&copy; 2023 InVitra. All rights reserved.</p>
+                <p class="mt-2 text-sm">Created by Regina Sil & Clem Delangue</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // IVF Knowledge Base
+        const ivfKnowledge = {
+            "medication side effects": {
+                response: "Common IVF medication side effects may include:<br><br>" +
+                         "• Headaches<br>" +
+                         "• Mood swings<br>" +
+                         "• Bloating<br>" +
+                         "• Mild abdominal pain<br>" +
+                         "• Breast tenderness<br>" +
+                         "• Hot flashes<br><br>" +
+                         "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."
+            },
+            "success rates by age": {
+                response: "IVF success rates vary significantly by age:<br><br>" +
+                         "• Under 35: ~40-50% per cycle<br>" +
+                         "• 35-37: ~35-40% per cycle<br>" +
+                         "• 38-40: ~25-30% per cycle<br>" +
+                         "• 41-42: ~15-20% per cycle<br>" +
+                         "• Over 42: ~5-10% per cycle<br><br>" +
+                         "These are general statistics - your doctor can provide more personalized estimates based on your specific situation."
+            },
+            "emotional support tips": {
+                response: "Coping with IVF emotionally:<br><br>" +
+                         "1. Join a support group (like ours!)<br>" +
+                         "2. Practice mindfulness or meditation<br>" +
+                         "3. Communicate openly with your partner<br>" +
+                         "4. Set realistic expectations<br>" +
+                         "5. Take breaks when needed<br>" +
+                         "6. Consider counseling with a therapist specializing in fertility<br>" +
+                         "7. Maintain other interests outside of IVF<br><br>" +
+                         "Remember it's normal to feel a range of emotions during this process."
+            },
+            "cost": {
+                response: "IVF costs vary widely but typically range from $12,000-$20,000 per cycle in the US. This usually includes:<br><br>" +
+                         "• Medications ($3,000-$6,000)<br>" +
+                         "• Monitoring appointments<br>" +
+                         "• Egg retrieval procedure<br>" +
+                         "• Laboratory fees<br>" +
+                         "• Embryo transfer<br><br>" +
+                         "Additional costs may apply for genetic testing, frozen embryo transfers, or donor materials. Some insurance plans offer partial coverage."
+            },
+            "timeline": {
+                response: "A typical IVF cycle takes about 6-8 weeks from start to pregnancy test:<br><br>" +
+                         "1. Ovarian stimulation: 8-14 days<br>" +
+                         "2. Egg retrieval: 1 day procedure<br>" +
+                         "3. Fertilization & embryo development: 3-5 days<br>" +
+                         "4. Embryo transfer: 1 day procedure<br>" +
+                         "5. Wait for pregnancy test: 9-14 days<br><br>" +
+                         "Some protocols may vary this timeline, especially if using birth control pills first or freezing embryos for future transfer."
+            },
+            "preparation": {
+                response: "To prepare for IVF:<br><br>" +
+                         "• Stop smoking and limit alcohol<br>" +
+                         "• Maintain a healthy BMI<br>" +
+                         "• Take prenatal vitamins (especially folic acid)<br>" +
+                         "• Reduce caffeine intake<br>" +
+                         "• Manage stress through relaxation techniques<br>" +
+                         "• Review medications with your doctor<br>" +
+                         "• Consider acupuncture (some find it helpful)<br><br>" +
+                         "Your clinic will provide specific instructions for your protocol."
+            },
+            "default": {
+                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>" +
+                         "• Medication side effects<br>" +
+                         "• Success rates by age<br>" +
+                         "• Emotional support tips<br>" +
+                         "• IVF costs<br>" +
+                         "• The IVF timeline<br>" +
+                         "• How to prepare for IVF"
+            }
+        };
+        // Chat functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chat-container');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const quickQuestions = document.querySelectorAll('.quick-question');
+            function addMessage(message, isUser) {
+                const messageDiv = document.createElement('div');
+                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`;
+                messageDiv.innerHTML = `<p>${message}</p>`;
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            function getResponse(question) {
+                question = question.toLowerCase();
+                for (const key in ivfKnowledge) {
+                    if (question.includes(key)) {
+                        return ivfKnowledge[key].response;
+                    }
+                }
+                return ivfKnowledge.default.response;
+            }
+            function handleUserInput() {
+                const question = userInput.value.trim();
+                if (question) {
+                    addMessage(question, true);
+                    userInput.value = '';
+                    // Simulate typing indicator
+                    const typingIndicator = document.createElement('div');
+                    typingIndicator.className = 'bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md';
+                    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>';
+                    chatContainer.appendChild(typingIndicator);
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                    // Remove typing indicator after delay and show response
+                    setTimeout(() => {
+                        chatContainer.removeChild(typingIndicator);
+                        const response = getResponse(question);
+                        addMessage(response, false);
+                    }, 1000 + Math.random() * 1000);
+                }
+            }
+            // Event listeners
+            sendBtn.addEventListener('click', handleUserInput);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    handleUserInput();
+                }
+            });
+            quickQuestions.forEach(button => {
+                button.addEventListener('click', function() {
+                    userInput.value = this.textContent;
+                    handleUserInput();
+                });
+            });
+        });
+    </script>
+<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/in-vitra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes