.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "auto_examples/plot_08_visualize.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_auto_examples_plot_08_visualize.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_auto_examples_plot_08_visualize.py:


.. _visualize_example:

Visualizing alignments
======================

Visualizing the alignment of the predicted and reference string is good way to gain some insight beyond summarized metrics.
To aid this type of analysis, Stringalign has functionality to quickly display a lightweight visualization of an alignment.

.. GENERATED FROM PYTHON SOURCE LINES 10-21

.. code-block:: Python


    import stringalign
    from stringalign.evaluate import AlignmentAnalyzer

    reference = "Hello world!"
    predicted = "Hello w0rld!!"

    tokenizer = stringalign.tokenize.GraphemeClusterTokenizer()
    analyzer = AlignmentAnalyzer.from_strings(reference=reference, predicted=predicted, tokenizer=tokenizer)
    analyzer.visualize()






.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <style>.alignment { font-family: monospace; text-align: left; --kept: hsl(198, 71%, 68%); --replaced: hsl(41, 100%, 75%); --inserted: hsl(0, 71%, 84%); --neutral: #fff; font-size: 1rem; } .alignment-chunk, .alignment-labels { display: inline-block; min-width: 1ex; } .alignment-chunk.spaced { margin-left: 0.5em; } span.reference, span.predicted { white-space: pre; display: block; text-align: center; } .kept.reference, .kept.predicted { background-color: var(--kept); } .deleted.reference { background-color: var(--inserted); } .deleted.predicted::after, .inserted.reference::after { content: "-"; } .inserted.predicted { background-color: var(--inserted); } .replaced.reference, .replaced.predicted{ background-color: var(--replaced); }</style><div class="alignment"><div class="alignment-labels"><span class="reference label">Reference:</span><span class="predicted label">Predicted:</span></div><div class='alignment-chunk'><span class="kept reference">H</span> <span class="kept predicted">H</span></div><div class='alignment-chunk'><span class="kept reference">e</span> <span class="kept predicted">e</span></div><div class='alignment-chunk'><span class="kept reference">l</span> <span class="kept predicted">l</span></div><div class='alignment-chunk'><span class="kept reference">l</span> <span class="kept predicted">l</span></div><div class='alignment-chunk'><span class="kept reference">o</span> <span class="kept predicted">o</span></div><div class='alignment-chunk'><span class="kept reference"> </span> <span class="kept predicted"> </span></div><div class='alignment-chunk'><span class="kept reference">w</span> <span class="kept predicted">w</span></div><div class='alignment-chunk'><span class="replaced reference">o</span> <span class="replaced predicted">0</span></div><div class='alignment-chunk'><span class="kept reference">r</span> <span class="kept predicted">r</span></div><div class='alignment-chunk'><span class="kept reference">l</span> <span class="kept predicted">l</span></div><div class='alignment-chunk'><span class="kept reference">d</span> <span class="kept predicted">d</span></div><div class='alignment-chunk'><span class="inserted reference"></span> <span class="inserted predicted">!</span></div><div class='alignment-chunk'><span class="kept reference">!</span> <span class="kept predicted">!</span></div></div>
    </div>
    <br />
    <br />

.. GENERATED FROM PYTHON SOURCE LINES 22-31

.. sidebar::

    :meth:`stringalign.evaluate.AlignmentAnalyzer.visualize` returns a :class:`stringalign.visualize.HtmlString`.
    This class inherits from the builtin :class:`str`-class, but its contents are interpreted as HTML by tools like Jupyter Notebook.

The visualization is based on html and CSS and can easily be displayed in a notebook, in dashboard-frameworks that support html or in a web application.

Sometimes it can be beneficial to add extra spacing between the alignment operation (for example if your tokenizer removes spaces or your text contains non-spacing tokens).
To add spacing between each token, you can use the ``space_alignment_ops`` flag.

.. GENERATED FROM PYTHON SOURCE LINES 31-36

.. code-block:: Python


    tokenizer = stringalign.tokenize.SplitAtWhitespaceTokenizer()
    analyzer = AlignmentAnalyzer.from_strings(reference=reference, predicted=predicted, tokenizer=tokenizer)
    analyzer.visualize()






.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <style>.alignment { font-family: monospace; text-align: left; --kept: hsl(198, 71%, 68%); --replaced: hsl(41, 100%, 75%); --inserted: hsl(0, 71%, 84%); --neutral: #fff; font-size: 1rem; } .alignment-chunk, .alignment-labels { display: inline-block; min-width: 1ex; } .alignment-chunk.spaced { margin-left: 0.5em; } span.reference, span.predicted { white-space: pre; display: block; text-align: center; } .kept.reference, .kept.predicted { background-color: var(--kept); } .deleted.reference { background-color: var(--inserted); } .deleted.predicted::after, .inserted.reference::after { content: "-"; } .inserted.predicted { background-color: var(--inserted); } .replaced.reference, .replaced.predicted{ background-color: var(--replaced); }</style><div class="alignment"><div class="alignment-labels"><span class="reference label">Reference:</span><span class="predicted label">Predicted:</span></div><div class='alignment-chunk'><span class="kept reference">Hello</span> <span class="kept predicted">Hello</span></div><div class='alignment-chunk'><span class="replaced reference">world!</span> <span class="replaced predicted">w0rld!!</span></div></div>
    </div>
    <br />
    <br />

.. GENERATED FROM PYTHON SOURCE LINES 37-39

.. code-block:: Python

    analyzer.visualize(space_alignment_ops=True)






.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <style>.alignment { font-family: monospace; text-align: left; --kept: hsl(198, 71%, 68%); --replaced: hsl(41, 100%, 75%); --inserted: hsl(0, 71%, 84%); --neutral: #fff; font-size: 1rem; } .alignment-chunk, .alignment-labels { display: inline-block; min-width: 1ex; } .alignment-chunk.spaced { margin-left: 0.5em; } span.reference, span.predicted { white-space: pre; display: block; text-align: center; } .kept.reference, .kept.predicted { background-color: var(--kept); } .deleted.reference { background-color: var(--inserted); } .deleted.predicted::after, .inserted.reference::after { content: "-"; } .inserted.predicted { background-color: var(--inserted); } .replaced.reference, .replaced.predicted{ background-color: var(--replaced); }</style><div class="alignment"><div class="alignment-labels"><span class="reference label">Reference:</span><span class="predicted label">Predicted:</span></div><div class='alignment-chunk spaced'><span class="kept reference">Hello</span> <span class="kept predicted">Hello</span></div><div class='alignment-chunk spaced'><span class="replaced reference">world!</span> <span class="replaced predicted">w0rld!!</span></div></div>
    </div>
    <br />
    <br />

.. GENERATED FROM PYTHON SOURCE LINES 40-44

Customize the visualization
---------------------------
The :meth:`stringalign.evaluate.AlignmentAnalyzer.visualize` method is a convenience wrapper around :func:`stringalign.visualize.create_alignment_html`.
If you want more customization you can use :func:`stringalign.visualize.create_alignment_html` directly. Then you can, for example, change the text labels

.. GENERATED FROM PYTHON SOURCE LINES 44-52

.. code-block:: Python


    stringalign.visualize.create_alignment_html(
        alignment=analyzer.raw_alignment,
        reference_label="Gold standard:",
        predicted_label="Model estimate:",
        space_alignment_ops=True,
    )






.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <style>.alignment { font-family: monospace; text-align: left; --kept: hsl(198, 71%, 68%); --replaced: hsl(41, 100%, 75%); --inserted: hsl(0, 71%, 84%); --neutral: #fff; font-size: 1rem; } .alignment-chunk, .alignment-labels { display: inline-block; min-width: 1ex; } .alignment-chunk.spaced { margin-left: 0.5em; } span.reference, span.predicted { white-space: pre; display: block; text-align: center; } .kept.reference, .kept.predicted { background-color: var(--kept); } .deleted.reference { background-color: var(--inserted); } .deleted.predicted::after, .inserted.reference::after { content: "-"; } .inserted.predicted { background-color: var(--inserted); } .replaced.reference, .replaced.predicted{ background-color: var(--replaced); }</style><div class="alignment"><div class="alignment-labels"><span class="reference label">Gold standard:</span><span class="predicted label">Model estimate:</span></div><div class='alignment-chunk spaced'><span class="kept reference">Hello</span> <span class="kept predicted">Hello</span></div><div class='alignment-chunk spaced'><span class="replaced reference">world!</span> <span class="replaced predicted">w0rld!!</span></div></div>
    </div>
    <br />
    <br />

.. GENERATED FROM PYTHON SOURCE LINES 53-57

Customize the styling (advanced)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

You can also supply your own style sheet, which we demonstrate in :ref:`this short example <custom_visualisation_stylesheet>`.


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.007 seconds)


.. _sphx_glr_download_auto_examples_plot_08_visualize.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: plot_08_visualize.ipynb <plot_08_visualize.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: plot_08_visualize.py <plot_08_visualize.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: plot_08_visualize.zip <plot_08_visualize.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_