{% extends "base.html" %} {% block title %}Home{% endblock %}
{% block content %}
    <div class="container mt-4">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Encountered error!</strong> {{ "error message." }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div>
            <form action="#" method="get">
                <div class="input-group">
                    <input type="search" id="form1" class="form-control" placeholder="What is ChatGPT"/>
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
        <hr>
        <div class="container mt-4">
            <div class="row">
                <div class="col-md-6">
                    <h2>what is chatgpt</h2>
                    <p>ChatGPT is a computer program that generates text responses in the form of a conversation. It was
                        created by OpenAI in 2018, and it is free to use for anyone with an account on their website.
                        [5] ChatGPT is designed to generate human-like responses, but it is not always
                        accurate. Users can upvote or downvote the responses they receive, and OpenAI gathers data from
                        users to further train and fine-tune ChatGPT. [4].</p>
                </div>
                <div class="col-md-6">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h5 class="mb-1">
                                <img src="https://www.google.com/s2/favicons?domain=zdnet.com" alt="Favicon">
                                <a href="https://www.zdnet.com/article/what-is-chatgpt-and-why-does-it-matter-heres-everything-you-need-to-know/">[1]
                                    zdnet.com</a>
                            </h5>
                            <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">What is ChatGPT and why
                                does it matter? Here's everything you need to know</h4>
                            <p class="mb-1"> The launch of a paid version had been rumored for some time before the
                                official release. In January, OpenAI announced on its Discord server that it was
                                considering to start charging for ChatGPT with a version called ChatGPT
                                Professional.</p>
                        </li>
                        <li class="list-group-item">
                            <h5 class="mb-1">
                                <img src="https://www.google.com/s2/favicons?domain=openai.com" alt="Favicon">
                                <a href="https://openai.com/blog/chatgpt/">[2] openai.com</a>
                            </h5>
                            <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">ChatGPT: Optimizing
                                Language Models for Dialogue</h4>
                            <p class="mb-1">We are excited to introduce ChatGPT to get users' feedback and learn about
                                its strengths and weaknesses. During the research preview, usage of ChatGPT is free. Try
                                it now at chat.openai.com.</p>
                        </li>
                        <li class="list-group-item">
                            <h5 class="mb-1">[3] xxx.com</h5>
                            <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">xxx title xxx</h4>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius elit
                                lectus, vitae faucibus mi egestas in. Nulla</p>
                        </li>
                        <li class="list-group-item">
                            <h5 class="mb-1">[4] xxx.com</h5>
                            <h4 class="mb-1" style="font-family: 'Playfair Display', Georgia">xxx title xxx</h4>
                            <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius elit
                                lectus, vitae faucibus mi egestas in. Nulla</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Click to expand Explainability 👆
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                         data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <p>What is ChatGPT.</p>
                                </div>
                                <div class="col-md-8">
                                    <p>ChatGPT is a computer program that generates text responses in the form of a
                                        conversation. It was created by OpenAI in 2018, and it is free to use for anyone
                                        with an account on their website. [5] ChatGPT is designed to generate human-like
                                        responses, but it is not always
                                        accurate. Users can upvote or downvote the responses they receive, and OpenAI
                                        gathers data from users to further train and fine-tune ChatGPT.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>

{% endblock %}