templates/template_html.j2

<h2>Prompt</h2>
Below is the prompt that is given to the model. <hr>
<h2>Instructions</h2>
<span style="color: #FF00FF;">Use the following pieces of context to answer the question at the end.<br>If you don't know the answer, just say that you don't know, <span style="color: #FF00FF; font-weight: bold;">don't try to make up an answer.</span></span><br>
<h2>Context</h2>
{% for doc in documents %}
    <details class="doc-box">
        <summary>
            <b>Doc {{ loop.index }}:</b> <span class="doc-short">{{ doc.content[:100] }}...</span>
        </summary>
        <div class="doc-full">{{ doc.content }}</div>
    </details>
{% endfor %}

<h2>Query</h2> <span style="color: yellow;">{{ query }}</span>

<style>
    .doc-box {
        padding: 10px;
        margin-top: 10px;
        background-color: #1E90FF;
        border: none;
    }
    .doc-short, .doc-full {
        color: white;
    }
    summary::-webkit-details-marker {
        color: white;
    }
</style>