{% extends "base.html" %} {% load static %} {% block content %}
<section class="hero" style="background-color:#2a2e2f">
    <div class="container">
        <div class="columns">
            <div class="column is-6">
                <h1 class="title is-1 has-text-white">Text annotation for Human</h1>
                <h2 class="subtitle is-4 has-text-white">Just create project, upload data and start annotation. You can build dataset in hours.</h2>
                <p>
                    <a class="button is-medium is-primary">
                        Try Demo
                    </a>
                </p>
            </div>
            <div class="column is-6">
                <figure class="image">
                    <img src="{% static 'images/sequence_labeling.png' %}">
                </figure>
            </div>
        </div>
    </div>
</section>

<div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="columns is-vcentered">
                    <div class="column is-5 is-offset-1">
                        <figure class="image">
                            <img src="{% static 'images/sequence_labeling.png' %}" alt="Description">
                        </figure>
                    </div>
                    <div class="column is-5">
                        <h1 class="title is-2">
                            Document Classification
                        </h1>
                        <h2 class="subtitle is-4">
                            Document annotation for any document classification tasks.
                        </h2>
                        <br>
                        <p>
                            <a class="button is-primary">
                                Try Demo
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="columns is-vcentered">
                    <div class="column is-5 is-offset-1">
                        <figure class="image">
                            <img src="{% static 'images/sequence_labeling.png' %}" alt="Description">
                        </figure>
                    </div>
                    <div class="column is-5">
                        <h1 class="title is-2">
                            Sequence Labeling
                        </h1>
                        <h2 class="subtitle is-4">
                            A super easy interface to tag for named entity recognition, part-of-speech tagging, semantic role labeling.
                        </h2>
                        <br>
                        <p>
                            <a class="button is-primary">
                                Try Demo
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="columns is-vcentered">
                    <div class="column is-5 is-offset-1">
                        <figure class="image">
                            <img src="{% static 'images/sequence_labeling.png' %}" alt="Description">
                        </figure>
                    </div>
                    <div class="column is-5">
                        <h1 class="title is-2">
                            Sequence to Sequence
                        </h1>
                        <h2 class="subtitle is-4">
                            A super easy interface to label for any sequence to sequence tasks.
                        </h2>
                        <br>
                        <p>
                            <a class="button is-primary">
                                Try Demo
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

<div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">
    <div class="container">

        <div class="columns features">
            <div class="column is-4">
                <div class="card is-shady">
                    <div class="card-image">
                        <figure class="image is-4by3">
                            <img src="https://source.unsplash.com/RWnpyGtY1aU" alt="Placeholder image" class="modal-button" data-target="modal-image2">
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="content">
                            <h4>Team Collaboration</h4>
                            <p>Invite other users to help you annotate text and create an annotated corpus. You only have to
                                create a guideline and upload text data. Team collaboration can accelate annotation process.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="card is-shady">
                    <div class="card-image">
                        <figure class="image is-4by3">
                            <img src="https://source.unsplash.com/6Ticnhs1AG0" alt="Placeholder image">
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="content">
                            <h4>Language independent</h4>
                            <p>doccano is not dependent on any languages. You can annotate any languages such as English, Spanish,
                                Chinese and so on. Regardless of your language, you can quickly start annotating text.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-4 modal-button" data-target="modal-image">
                <div class="card is-shady">
                    <div class="card-image">
                        <figure class="image is-4by3">
                            <img src="https://i.imgsafe.org/ba/baa924a5e3.png" alt="Placeholder image">
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="content">
                            <h4>Active learning</h4>
                            <p>Active learning is one of the most powerful tools in creating annotated corpora. Machine learning
                                model automatically annotates texts. You're only asked to judge whether the examples are
                                correct or not.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="columns">
            <div class="column is-4">
                <h2>
                    <strong class="has-text-white">DOCCANO</strong>
                </h2>
                <ul>
                    <li>
                        <a href="#">Documentation</a>
                    </li>
                    <li>
                        <a href="#">Live Demo</a>
                    </li>
                    <li>
                        <a href="#">Source code</a>
                    </li>
                    <li>
                        <a href="#">Contribution</a>
                    </li>
                </ul>
            </div>
            <div class="column is-4">
                <h2>
                    <strong class="has-text-white">FEATURES</strong>
                </h2>
                <ul>
                    <li>
                        <a href="#">Text Classification</a>
                    </li>
                    <li>
                        <a href="#">Sequence Labeling</a>
                    </li>
                    <li>
                        <a href="#">Sequence to Sequence</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content has-text-centered">
            <p>
                <a href="https://github.com/chakki-works/doccano">doccano</a> by
                <a href="https://github.com/Hironsan">Hironsan</a>. The source code is licensed
                <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
                <br>
            </p>
        </div>
    </div>
</footer>
{% endblock %}