17 lines
1.5 KiB
Vue
17 lines
1.5 KiB
Vue
<template>
|
|
<div class="space-y-2 rounded-xl border border-white/10 p-3 text-sm" aria-live="polite">
|
|
<div class="flex justify-between gap-3"><button class="text-left" @click="$emit('select')"><strong>{{ job.request.promptSections.action.slice(0,70) }}</strong><span class="block capitalize text-amber-200">{{ job.state==='waiting'?'queued':job.state }} · Shot {{ shot }}/{{ total }}</span></button><button v-if="!terminal" @click="$emit('cancel')">Cancel</button></div>
|
|
<p>{{ elapsed }} {{ job.startedAt?'elapsed':'waiting' }} · {{ job.request.settings.duration }}s target<span v-if="job.state==='rendering' && job.progress"> · Step {{ job.progress.step }}/{{ job.progress.maxStep }} ({{ job.progress.percent }}%)</span></p>
|
|
<progress v-if="job.state==='rendering'" class="h-2 w-full accent-amber-300" :value="job.progress?.percent" max="100" />
|
|
<p v-if="job.error" role="alert" class="text-red-300">{{ job.error }}</p>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {elapsedSeconds} from '~/shared/studio2/queue-view.mjs'
|
|
const props=defineProps<{job:any;now:number}>();defineEmits(['select','cancel'])
|
|
const terminal=computed(()=>['complete','failed','cancelled'].includes(props.job.state))
|
|
const total=computed(()=>props.job.prompts?.length || (props.job.request.batch?.length || 0)+1)
|
|
const shot=computed(()=>Math.min(total.value,(props.job.index || 0)+1))
|
|
const elapsed=computed(()=>{const seconds=elapsedSeconds(props.job,props.now);return `${Math.floor(seconds/60)}m ${seconds%60}s`})
|
|
</script>
|