@lewist9x/distil-beta/dist/public/templates/pipeline-versions.html

An opinionated library for managing LLM pipelines. Define, track, rate, and curate prompt–completion pairs for fine-tuning.

<div class="space-y-4">
    {{#each generations}}
    <div class="bg-white border rounded-lg p-4 hover:bg-gray-50">
        <div class="flex justify-between items-start mb-2">
            <div>
                <h3 class="text-sm font-medium">Generation {{truncate id 8}}</h3>
                <p class="text-xs text-gray-500">{{formatDate timestamp}}</p>
            </div>
            <div class="flex items-center space-x-2">
                <div class="rating-widget">
                    {{#times 5}}
                    <button class="star-btn {{#if (lte this ../rating)}}active{{/if}}"
                            onclick="rateGeneration('{{../id}}', {{this}})">★</button>
                    {{/times}}
                </div>
                <button class="btn btn-sm {{#if isFinetuned}}btn-primary{{else}}btn-ghost{{/if}}"
                        onclick="markForFinetuning('{{id}}')">
                    {{#if isFinetuned}}Finetuned{{else}}Mark for FT{{/if}}
                </button>
            </div>
        </div>
        <div class="mt-2">
            <div class="text-sm">
                <h4 class="font-medium text-gray-700">Output</h4>
                <pre class="mt-1 text-sm text-gray-600 whitespace-pre-wrap p-3 bg-gray-50 rounded-md">{{output}}</pre>
            </div>
            <div class="mt-2 flex space-x-2">
                <button class="btn btn-sm btn-ghost" onclick="showDetails('{{id}}')">
                    View Details
                </button>
            </div>
        </div>
    </div>
    {{/each}}
</div>

<style>
.rating-widget .star-btn {
    color: #d1d5db;
    font-size: 1.25rem;
    padding: 0 2px;
}
.rating-widget .star-btn.active {
    color: #fbbf24;
}
</style>

<script>
function rateGeneration(id, rating) {
    htmx.ajax('POST', `/dashboard/pipelines/${pipelineName}/versions/${versionId}/generations/${id}/rate`, {
        values: { rating },
        swap: 'innerHTML'
    });
}

function markForFinetuning(id) {
    htmx.ajax('POST', `/dashboard/pipelines/${pipelineName}/versions/${versionId}/generations/finetune`, {
        values: { generationIds: [id] },
        swap: 'innerHTML'
    });
}

function showDetails(id) {
    htmx.ajax('GET', `/dashboard/pipelines/${pipelineName}/versions/${versionId}/generations/${id}`, {
        target: '#content-area',
        swap: 'innerHTML'
    });
}
</script>