<!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 #}
                <div>
                    <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>
                </div>
                <h1>RAG Evaluation Toolkit</h1>
        </div>
        
        
        
        <div id="gsk-overview">
            {% if knowledge_script is not none %}
            <div class="overview-side">
                <h3 class="extended-title">Knowledge base overview</h3>
                {{knowledge_script | safe}}
                {{knowledge_div | safe}}
            </div>
            {% endif %}
            <div class="overview-side" style="flex:1">
                <h3 class="extended-title">Components Analysis</h3>
                <table style="width:50%" id="component-table">
                {% for component_name, component in components.items() %}
                    <tr title="This is a tooltip">
                        <td><strong>{{component_name}}</strong> </td>
                        <td><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> <span class="tooltip-text" id="fade">{{component.description}}</span></td>
                        <td><strong>{{(component.score*100)|round(2)}}%</strong> </td>
                    </tr>
                {% endfor %}
                </table>
                <div class="callout">
                    <span class="callout-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                        <path
                            d="M14 9.5c0-.825.675-1.5 1.5-1.5h1c.825 0 1.5.675 1.5 1.5v1c0 .825-.675 1.5-1.5 1.5h-1c-.825 0-1.5-.675-1.5-1.5v-1zM20 24h-8v-2h2v-6h-2v-2h6v8h2z" />
                        <path
                            d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 29C8.82 29 3 23.18 3 16S8.82 3 16 3s13 5.82 13 13-5.82 13-13 13z" />
                    </svg></span>
                    
                    <p>Each component is scored based on the correctness of the agent on different types of questions.
                    Each score grades a component from 0 to 100%. <br>
                    <strong>Low scores help you identify weaknesses of your RAG and what
                    components need improvement</strong>.</p>
                   
                </div>
            </div>
        </div>
        <div id="gsk-advice">
            <div id="recommendation">
                <h2>⚠️ Recommendation</h2>
                {{recommendation}}
            </div>
            
        </div>
        <div class="separator"></div>
        <div id="gsk-correctness">
            <h3>Correctness</h3>

            <div class="flex-row">
                <div style="flex:0.7">
                    <div class="correctness-indicator {% if correctness >= 0.7 %} green {% elif correctness >= 0.3 %} orange {% else %} red {% endif %}">Overall Correctness Score: {{(correctness*100)|round(2)}}% </div>
                </div>

                <div class="corr-plot">
                    {{topic_correctness_script | safe}}
                    {{topic_correctness_div | safe}}
                </div>
            </div>
        </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>
{% endblock %}

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