<!DOCTYPE html>
{% block head %}

<style>
    {% include "rag_report/static/style.css" %}
</style>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.4.min.js" integrity="sha384-5QIrjQuyo4I/x6DK/Sau33lcA3hT2TCZGr9vbk+2ebd7Da6FnR1amdM+9B5xOrSf" crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.4.min.js" integrity="sha384-tXTWPp/bAKa+K9RPuXh7DNvye0Mv+P+6y4rAMVy+pWapsnXg9UG7g20WZ0N4i28A" crossorigin="anonymous"></script>


{% endblock %}

{% block content %}
<div class="main">
    <div id="gsk-rag" class="dark:text-white dark:bg-zinc-800 rounded border border-gray-500">
        <div class="header border-b border-b-gray-500">
            {# Giskard logo #}
                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="30" viewBox="0 0 30 15" fill="none" id="gsk-logo">
                    <path fill="#fff" fill-rule="evenodd"
                        d="M22.504 1.549a4.196 4.196 0 0 1 2.573-.887v.002a3.783 3.783 0 0 1 2.706 1.086 3.783 3.783 0 0 1 1.126 2.69 3.771 3.771 0 0 1-1.126 2.69 3.77 3.77 0 0 1-2.706 1.085l-4.794.011-2.533 3.467L8.203 15l2.881-3.335a9.829 9.829 0 0 1-4.663-1.68H3.185L0 7.163h3.934C4.263 3.165 8.187 0 12.96 0c2.24 0 4.489.696 6.175 1.909a7.423 7.423 0 0 1 1.882 1.919 4.194 4.194 0 0 1 1.487-2.28ZM7.05 3.249l3.91 3.915h1.505L7.89 2.584a7.773 7.773 0 0 0-.84.665Zm4.079-2.008 5.923 5.923h1.503l-6.086-6.087c-.45.023-.898.078-1.34.164ZM4.574 8.226h-1.77l.784.693h1.584a8.454 8.454 0 0 1-.598-.693Zm9.479 0H5.984c1.469 1.477 3.656 2.377 5.977 2.422l2.092-2.422Zm-2.458 4.472 5.492-1.902 1.878-2.569h-3.508l-3.862 4.47Zm10.361-5.552h3.265a2.714 2.714 0 0 0 1.747-4.648 2.711 2.711 0 0 0-1.888-.773 3.127 3.127 0 0 0-3.123 3.124v2.297Zm3.659-3.73a.677.677 0 1 1-.134 1.348.677.677 0 0 1 .134-1.348Z"
                        clip-rule="evenodd" />
                </svg>
            <h1>RAG Evaluation Toolkit</h1>
        </div>
        
        <div class="section-container">
            <div class="components-container">
                {% for component_name, component in components.items() %}
                <div class="component-card">
                    <div class="component-title">{{component_name}}</div>
                    <div class="component-value tooltip {% if component.score >= 0.7 %} text-green {% elif component.score >= 0.3 %} text-orange {% else %} text-red {% endif %}">
                        {{(component.score*100)|round(2)}}%
                            <span class="tooltiptext" id="fade">{{component.description}}</span>
                    </div>
                    <div class="component-bar">
                        <progress max="100" value={{component.score*100}} class="{% if component.score >= 0.7 %} progress-green {% elif component.score >= 0.3 %} progress-orange {% else %} progress-red {% endif %}">{{(component.score*100)|round(2)}}%</progress>
                    </div>
                </div>
                {% endfor %}
                <div class="overall-card">
                    <div class="overall-title">Overall Correctness Score</div>
                    <div class="overall-value">{{(correctness*100)|int}}%</div>
                </div>
            </div>
        </div>

        <div class="section-container">
            <div class="section-card">
                <div class="section-title">RECOMMENDATION</div>
                <span class="section-content">{{recommendation}}</span>
            </div>
        </div>

        <div class="section-container">
            <div class="section-card">
                <div class="section-title">CORRECTNESS BY TOPIC</div>
                {{topic_correctness_script | safe}}
                {{topic_correctness_div | safe}}
            </div>
        </div>

        <div class="section-container">
            <div class="section-card">
                <div class="section-title">KNOWLEDGE BASE OVERVIEW</div>
                {{knowledge_script | safe}}
                {{knowledge_div | safe}}
            </div>
        </div>

        <div class="section-container">
            <div class="section-card">

                <div class="section-title">SELECTED METRICS</div>

                {% if additional_metrics %}
                <div class="separator"></div>
                <div id="gsk-metrics">
                    {# Tab links #}
                    <div class="tab">
                        <div class="tab-title">Selected metrics</div>
                        {% for tab, _ in metric_histograms.items() %}
                        <button class="tablinks{% if loop.index == 1 %} active{% endif %}"
                            onclick="opentab(event, '{{tab}}')">{% if tab == "Question" %} Question types {% else %} {{tab}} {%
                            endif %}</button>
                        {% endfor %}
                    </div>
                    {# Tab content #}
                    {% for tab, content in metric_histograms.items() %}
                    <div id={{tab}} class="tabcontent"{% if loop.index == 1 %} style="display: block"{% endif %}>
                        {% for split_value, metrics in content.items()%}
                        <div class="tab-row">
                            {% if split_value != "Overall" %}<h4>{{split_value}}</h4>{% endif %}
                            <div class="hist-row">
                                {% for metric, hist in metrics.items() %}
                                <div>
                                    {{hist.script | safe}}
                                    {{hist.div | safe}}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="separator-border"></div>
                        
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

            </div>
        </div>

        
    </div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
    {% include "rag_report/static/internal.js" %}
</script>
{% endblock %}