def app_intro():
    return """
    <div style='text-align: left; padding: 20px; border-radius: 10px;'>
    <h1 style='text-align: center; color: #333;'>Student Performance Query System</h1>
    <h2 style='text-align: center; color: #666;'>Query Student Performance Data with NLP</h2>

    <p style='font-size: 18px; color: #444;'>Welcome to the Student Performance Query System! This application enables you to query student performance data using natural language processing (NLP) techniques. Originally designed with OpenAI functions, it has now been fully converted to utilize Mistral-8x7B-Instruct.</p>

    <h3 style='color: #737373;'>Key Features: </h3>
    <ul>
        <li>Translate natural language queries into actionable insights! ✨</li>
        <li>Engage in conversational queries to explore student performance data.</li>
        <li>Powered by Mistral-8x7B-Instruct.</li>
    </ul>

    <h3 style='color: #737373;'>In the Black Box: ⚙️</h3>
    <p style='font-size: 16px;'>This application utilizes the <a href="https://huggingface.co/mistralai/Mixtral-8x7B-Instruct-v0.1">Mistral-8x7B-Instruct-v0.1 LLM</a> to interpret your queries and provide insights into student performance data.</p>

    <h3 style='color: #737373;'>Get Started: </h3>
    <p style='font-size: 16px;'>Ask questions about student performance in plain language and let the system handle the rest! 🎓 The bot is here to assist you. Dataset used: <a href="https://archive.ics.uci.edu/dataset/320/student+performance">Student Performance Data</a>.</p>
    </div>
    """


def how_use_intro():
    return """
    <div style='text-align: left; padding: 20px; border-radius: 10px;'>
    <h2 style='text-align: center; color: #333;'>Getting Started with Student Performance Query System! 📊🔍</h2>
    <br>
    <h3 style='color: #777;'>How to Use:</h3>
    <ul style='font-size: 16px; color: #555;'>
        <li><b>Query Student Performance:</b> Enter your questions about student performance in the provided input box using natural language. Click "Submit" to get answers and insights.</li>
        <li><b>Interact with the Chatbot:</b> Engage in conversational queries with the chatbot. Ask about specific students, subjects, or trends to explore the dataset interactively.</li>
    </ul>
    <br>
    </div>
    """