<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio Medical RAG App</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: black;
            font-family: 'Poppins', sans-serif;
            color: white;
        }
        .chat-container {
            max-width: 800px;
            margin: 50px auto;
            margin-top: 10%;
            padding: 20px;
            background-color: #333;
            border-radius: 10px;
        }
        .chat-heading {
            text-align: center;
            font-size: 2.5em;
            font-weight: 600;
            margin-bottom: 30px;
            color: #ffd700; /* Golden color for the heading */
        }
        .chat-input {
            margin-top: 20px; /* Added margin */
            margin-bottom: 20px;
            height: 100px; /* Increased height */
        }
        .chat-button {
            background-color: green;
            color: white;
            padding: 10px 20px;
            font-size: 1.2em;
        }
        .chat-response {
            background-color: #444;
            padding: 15px;
            border-radius: 5px;
            min-height: 100px; /* Minimum height for the response box */
            margin-top: 20px;
        }
        .accordion {
            margin-top: 20px;
            background-color: #444;
            border-radius: 5px;
        }
        .accordion-button {
            color: white;
            background-color: #555;
        }
        .accordion-body {
            color: white; /* Improved visibility of text */
        }
        pre {
            white-space:pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container chat-container">
        <h1 class="chat-heading">Bio Medical RAG App</h1>

        <div class="accordion" id="appDescriptionAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="descriptionHeading">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDescription" aria-expanded="true" aria-controls="collapseDescription">
                        About This App
                    </button>
                </h2>
                <div id="collapseDescription" class="accordion-collapse collapse" aria-labelledby="descriptionHeading" data-bs-parent="#appDescriptionAccordion">
                    <div class="accordion-body text-dark">
                        This is a RAG implementation using Open Source stack. BioMistral 7B has been used to build this app along with PubMedBert as an embedding model, Qdrant as a self hosted Vector DB, and Langchain & Llama CPP as an orchestration frameworks.
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <textarea id="userInput" class="form-control chat-input" placeholder="Type your query here..."></textarea>
                <button id="submitBtn" class="btn chat-button">Submit</button>
                <div id="response" class="chat-response"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('submitBtn').addEventListener('click', async function() {
            var userInput = document.getElementById('userInput').value;
            document.getElementById('response').innerHTML = '<p>Processing...</p>';
            const formData = new FormData();
            formData.append('query', userInput); 
            try {
                const response = await fetch('/get_response', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json();
                document.getElementById('response').innerHTML = `<p>${data.answer}</p><br><pre><b>Context: </b> ${data.source_document}</pre><br><pre><b>Source Document: </b> ${data.doc}</pre>`;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('response').innerHTML = '<p>Error processing your request</p>';
            }
        });

    </script>
</body>
</html>