Spaces:

Ajeya95
/

MyPharmaAI

Sleeping

File size: 20,073 Bytes

c1bc991

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyPharma AI - Your Study Companion</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        /* Indian Traditional Theme CSS */
        :root {
            --saffron: #FF9933;
            --maroon: #800000;
            --gold: #FFD700;
            --peacock-blue: #005F9E;
            --cream: #FFF8E7;
            --dark-gold: #B8860B;
            --light-saffron: #FFE4B5;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, var(--cream) 0%, var(--light-saffron) 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* Indian pattern background */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.05;
            background-image: 
                radial-gradient(circle at 25% 25%, var(--saffron) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, var(--maroon) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--maroon) 0%, var(--peacock-blue) 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: "🕉️";
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 30px;
            opacity: 0.3;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            font-weight: 300;
        }

        .quote-container {
            background: var(--gold);
            color: var(--maroon);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
            font-style: italic;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(255,215,0,0.3);
        }

        /* Chat Container */
        .chat-container {
            flex: 1;
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 3px solid var(--gold);
        }

        .chat-header {
            background: linear-gradient(135deg, var(--saffron) 0%, var(--gold) 100%);
            padding: 15px 20px;
            color: var(--maroon);
            font-weight: bold;
            font-size: 1.1em;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            max-height: 500px;
            min-height: 300px;
        }

        .message {
            margin-bottom: 20px;
            animation: fadeIn 0.3s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.user {
            text-align: right;
        }

        .message.bot {
            text-align: left;
        }

        .message-bubble {
            display: inline-block;
            max-width: 80%;
            padding: 15px 20px;
            border-radius: 20px;
            position: relative;
            word-wrap: break-word;
        }

        .message.user .message-bubble {
            background: linear-gradient(135deg, var(--peacock-blue) 0%, var(--maroon) 100%);
            color: white;
            border-bottom-right-radius: 5px;
        }

        .message.bot .message-bubble {
            background: linear-gradient(135deg, var(--light-saffron) 0%, var(--cream) 100%);
            color: var(--maroon);
            border: 2px solid var(--saffron);
            border-bottom-left-radius: 5px;
        }

        .agent-badge {
            display: inline-block;
            background: var(--gold);
            color: var(--maroon);
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        /* Input Area */
        .input-area {
            padding: 20px;
            background: var(--cream);
            border-top: 3px solid var(--gold);
        }

        .input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        #messageInput {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid var(--saffron);
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            background: white;
            transition: all 0.3s ease;
        }

        #messageInput:focus {
            border-color: var(--peacock-blue);
            box-shadow: 0 0 15px rgba(0,95,158,0.2);
        }

        #sendBtn {
            background: linear-gradient(135deg, var(--saffron) 0%, var(--gold) 100%);
            color: var(--maroon);
            border: none;
            padding: 15px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        #sendBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,153,51,0.4);
        }

        #sendBtn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Loading Animation */
        .loading {
            display: none;
            text-align: center;
            color: var(--maroon);
            font-style: italic;
        }

        .loading.show {
            display: block;
        }

        .loading::after {
            content: "...";
            animation: dots 1.5s infinite;
        }

        @keyframes dots {
            0%, 20% { content: "..."; }
            40% { content: "....."; }
            60% { content: "......."; }
            80%, 100% { content: "..."; }
        }

        /* Quick Actions */
        .quick-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .quick-btn {
            background: white;
            color: var(--peacock-blue);
            border: 2px solid var(--peacock-blue);
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .quick-btn:hover {
            background: var(--peacock-blue);
            color: white;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .message-bubble {
                max-width: 95%;
            }
            
            .input-container {
                flex-direction: column;
            }
            
            #messageInput {
                width: 100%;
                margin-bottom: 10px;
            }
            
            .quick-actions {
                justify-content: center;
            }
        }

        /* Error Messages */
        .error-message {
            background: #ffebee;
            color: #c62828;
            border: 1px solid #ef5350;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }

        /* Success Messages */
        .success-message {
            background: #e8f5e8;
            color: #2e7d32;
            border: 1px solid #4caf50;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>🇮🇳 MyPharma AI</h1>
            <div class="subtitle">{{ greeting or "नमस्ते! Your Intelligent Pharmacy Study Companion" }}</div>
        </div>

        <!-- Daily Quote -->
        <div class="quote-container" id="quoteContainer">
            📿 {{ daily_quote or "विद्या धनं सर्व धन प्रधानम् - Knowledge is the supreme wealth" }}
        </div>

        <!-- Chat Container -->
        <div class="chat-container">
            <div class="chat-header">
                💬 Chat with Your AI Study Buddy
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <div class="message bot">
                    <div class="message-bubble">
                        <div class="agent-badge">🤖 Academic Agent</div>
                        🙏 <strong>Namaste!</strong> I'm your AI study companion for pharmacy subjects!<br><br>
                        
                        I can help you with:<br>
                        📚 <strong>Academic Questions</strong> - Pharmacology, chemistry, biology concepts<br>
                        💊 <strong>Drug Information</strong> - Mechanisms, side effects, interactions<br>
                        ❓ <strong>Quiz Generation</strong> - Practice questions and tests<br>
                        🧠 <strong>Memory Aids</strong> - Mnemonics and memory tricks<br>
                        🗣️ <strong>Viva Practice</strong> - Mock interview sessions<br><br>
                        
                        <em>आपका अध्ययन साथी (Your Study Companion)</em> ✨
                    </div>
                </div>
            </div>

            <div class="input-area">
                <div id="fileUploadSection" style="margin-bottom: 15px; background: #fff8e7; padding: 15px; border-radius: 10px; border: 1px solid var(--saffron);">
                    <h4 style="margin-bottom: 10px; color: var(--maroon);">📄 Upload Your Notes (PDF, DOCX, TXT)</h4>
                    <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                        <input type="file" id="fileInput" style="flex: 1;">
                        <button id="uploadBtn" onclick="uploadFile()" style="background: var(--peacock-blue); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer;">Upload File</button>
                    </div>
                    <div id="fileList">
                    </div>
                </div>
                <!-- Quick Action Buttons -->
                <div class="quick-actions">
                    <button class="quick-btn" onclick="populateInput('Explain ')">📊 Explain Topic</button>
                    <button class="quick-btn" onclick="populateInput('What are the side effects of ')">⚗️ Drug Info</button>
                    <button class="quick-btn" onclick="populateInput('Make a quiz on ')">❓ Create Quiz</button>
                    <button class="quick-btn" onclick="populateInput('Mnemonic for ')">🧠 Mnemonics</button>
                </div>

                <!-- Input Container -->
                <div class="input-container">
                    <input type="text" 
                           id="messageInput" 
                           placeholder="Ask me anything about pharmacy... (e.g., 'Explain the Krebs cycle')" 
                           onkeypress="handleKeyPress(event)">
                    <button id="sendBtn" onclick="sendMessage()">Send 📨</button>
                </div>
                
                <div class="loading" id="loading">
                    🔄 Processing your query
                </div>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        let isProcessing = false;

        // In templates/index.html, inside the <script> tag

        // --- File Management Functions ---

        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                addMessage('Please select a file to upload first.', 'bot', 'error');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            showLoading(true);
            isProcessing = true;

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData,
                });
                const data = await response.json();
                if (data.success) {
                    addMessage(`✅ ${data.message}`, 'bot', 'academic');
                    updateFileList(data.files);
                } else {
                    addMessage(`❌ Upload Error: ${data.error}`, 'bot', 'error');
                }
            } catch (error) {
                addMessage(`❌ Connection Error: ${error.message}`, 'bot', 'error');
            } finally {
                showLoading(false);
                isProcessing = false;
                fileInput.value = ''; // Clear the file input
            }
        }

        function updateFileList(files = []) {
            const fileListDiv = document.getElementById('fileList');
            if (files.length > 0) {
                let fileLinks = files.map(f => `<span>${f.original_name}</span>`).join(', ');
                fileListDiv.innerHTML = `<div style="font-size: 0.9em; margin-top: 10px;"><strong>Active Files:</strong> ${fileLinks} <button onclick="clearFiles()" style="margin-left: 10px; background: #800000; color: white; border: none; border-radius: 5px; cursor: pointer; padding: 2px 8px;">Clear All</button></div>`;
            } else {
                fileListDiv.innerHTML = '';
            }
        }

        async function clearFiles() {
            showLoading(true);
            isProcessing = true;
            try {
                const response = await fetch('/clear_files', { method: 'POST' });
                const data = await response.json();
                if (data.success) {
                    addMessage('🧹 All uploaded files and sessions have been cleared.', 'bot', 'academic');
                    updateFileList([]);
                } else {
                    addMessage(`❌ Error: ${data.error}`, 'bot', 'error');
                }
            } catch (error) {
                addMessage(`❌ Connection Error: ${error.message}`, 'bot', 'error');
            } finally {
                showLoading(false);
                isProcessing = false;
            }
        }

        // Update the file list on page load
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/files').then(res => res.json()).then(data => {
                updateFileList(data.files);
            });
        });
        // Send message function
        async function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (!message || isProcessing) return;
            
            // Add user message to chat
            addMessage(message, 'user');
            input.value = '';
            
            // Show loading
            showLoading(true);
            isProcessing = true;
            
            try {
                const response = await fetch('/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ query: message })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    addMessage(data.message, 'bot', data.agent_used);
                } else {
                    addMessage(`❌ Error: ${data.error || 'Something went wrong'}`, 'bot', 'error');
                }
                
            } catch (error) {
                addMessage(`❌ Connection error: ${error.message}`, 'bot', 'error');
            } finally {
                showLoading(false);
                isProcessing = false;
            }
        }

        // Add message to chat
        function addMessage(text, sender, agentType = '') {
        const messagesContainer = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}`;
        
        let agentBadge = '';
        if (sender === 'bot' && agentType) {
            const agentIcons = {
                'academic': '📚 Academic Agent',
                'drug_info': '💊 Drug Info Agent',
                'quiz_generation': '❓ Quiz Master',
                'mnemonic_creation': '🧠 Memory Master',
                'viva_practice': '🗣️ Viva Coach',
                'error': '⚠️ System'
            };
            agentBadge = `<div class="agent-badge">${agentIcons[agentType] || '🤖 AI Assistant'}</div>`;
        }
        
        // THE FIX: Use marked.parse() to convert markdown to HTML
        // instead of a simple replace.
        const formattedText = marked.parse(text || 'Sorry, I received an empty response.');

        messageDiv.innerHTML = `
            <div class="message-bubble">
                ${agentBadge}
                ${formattedText}
            </div>
        `;
        
        messagesContainer.appendChild(messageDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // Show/hide loading
        function showLoading(show) {
            const loading = document.getElementById('loading');
            const sendBtn = document.getElementById('sendBtn');
            
            loading.classList.toggle('show', show);
            sendBtn.disabled = show;
        }

        // Handle Enter key press
        function handleKeyPress(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendMessage();
            }
        }

        // Quick message function
        function populateInput(templateText) {
            const input = document.getElementById('messageInput');
            input.value = templateText;
            input.focus(); // This handily puts the cursor in the text box for you!
        }

        // Get new quote function
        async function getNewQuote() {
            try {
                const response = await fetch('/quote');
                const data = await response.json();
                document.getElementById('quoteContainer').innerHTML = `📿 ${data.quote}`;
            } catch (error) {
                console.error('Failed to fetch new quote:', error);
            }
        }

        // Initialize app
        document.addEventListener('DOMContentLoaded', function() {
            // Focus on input
            document.getElementById('messageInput').focus();
            
            // Get new quote every 5 minutes
            setInterval(getNewQuote, 5 * 60 * 1000);
        });
    </script>
</body>
</html>