DreamWeaver/dreamweaver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve generation analytics and maintenance

Browse Source
This commit is contained in:
Yuyan
2026-04-19 09:03:40 +08:00
parent d5a173aa0d
commit 5318de670f
21 changed files with 1155 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/types/generation.ts
View File

@@ -42,15 +42,23 @@ export interface GenerationProviderStat {
export interface GenerationProviderStats {
story_id: number
window_days: number | null
capability: string | null
total_calls: number
successful_calls: number
failed_calls: number
avg_latency_ms: number | null
estimated_cost_usd: number
by_provider: GenerationProviderStat[]
failure_reasons: Array<{
reason: string
count: number
}>
}
export interface GenerationProviderAnalytics {
window_days: number | null
capability: string | null
total_calls: number
successful_calls: number
failed_calls: number
@@ -59,4 +67,30 @@ export interface GenerationProviderAnalytics {
job_count: number
story_count: number
by_provider: GenerationProviderStat[]
failure_reasons: Array<{
reason: string
count: number
}>
}
export interface GenerationRecentFailure {
job_id: string
story_id: number | null
story_title: string | null
output_mode: string
current_step: string
error_message: string | null
failure_label: string
updated_at: string
}
export interface GenerationOpsSummary {
window_hours: number
stale_threshold_minutes: number
active_jobs: number
stale_running_jobs: number
failed_jobs: number
degraded_jobs: number
asset_retry_jobs: number
recent_failures: GenerationRecentFailure[]
}

127
frontend/src/views/MyStories.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '../api/client'
import CreateStoryModal from '../components/CreateStoryModal.vue'
@@ -7,7 +7,7 @@ import BaseButton from '../components/ui/BaseButton.vue'
import BaseCard from '../components/ui/BaseCard.vue'
import EmptyState from '../components/ui/EmptyState.vue'
import LoadingSpinner from '../components/ui/LoadingSpinner.vue'
import type { GenerationProviderAnalytics } from '../types/generation'
import type { GenerationOpsSummary, GenerationProviderAnalytics } from '../types/generation'
import {
getAssetStatusMeta,
getGenerationStatusMeta,
@@ -39,9 +39,12 @@ interface StoryItem {
const router = useRouter()
const stories = ref<StoryItem[]>([])
const providerAnalytics = ref<GenerationProviderAnalytics | null>(null)
const opsSummary = ref<GenerationOpsSummary | null>(null)
const loading = ref(true)
const error = ref('')
const showCreateModal = ref(false)
const selectedWindow = ref<'7' | '30' | 'all'>('30')
const selectedCapability = ref<'all' | 'text' | 'image' | 'tts' | 'storybook'>('all')
const readableCount = computed(() =>
stories.value.filter((story) => isReadableGenerationStatus(story.generation_status)).length,
@@ -57,15 +60,30 @@ const providerSuccessRate = computed(() => {
)
})
const topProvider = computed(() => providerAnalytics.value?.by_provider[0] ?? null)
const topFailureReason = computed(() => providerAnalytics.value?.failure_reasons[0] ?? null)
function buildProviderAnalyticsPath() {
const params = new URLSearchParams()
if (selectedWindow.value !== 'all') {
params.set('days', selectedWindow.value)
}
if (selectedCapability.value !== 'all') {
params.set('capability', selectedCapability.value)
}
const query = params.toString()
return `/api/generations/provider-analytics${query ? `?${query}` : ''}`
}
async function fetchStories() {
try {
const [storyList, analytics] = await Promise.all([
const [storyList, analytics, ops] = await Promise.all([
api.get<StoryItem[]>('/api/stories'),
api.get<GenerationProviderAnalytics>('/api/generations/provider-analytics'),
api.get<GenerationProviderAnalytics>(buildProviderAnalyticsPath()),
api.get<GenerationOpsSummary>('/api/generations/ops-summary'),
])
stories.value = storyList
providerAnalytics.value = analytics
opsSummary.value = ops
} catch (e) {
error.value = e instanceof Error ? e.message : '加载失败'
} finally {
@@ -106,6 +124,27 @@ function formatCost(value?: number | null) {
return typeof value === 'number' ? `$${value.toFixed(4)}` : '$0.0000'
}
function formatOutputMode(value: string) {
switch (value) {
case 'storybook':
return '绘本'
case 'asset_retry':
return '资源重试'
case 'asset_generation':
return '资源生成'
default:
return '故事'
}
}
function setWindow(value: '7' | '30' | 'all') {
selectedWindow.value = value
}
function setCapability(value: 'all' | 'text' | 'image' | 'tts' | 'storybook') {
selectedCapability.value = value
}
onMounted(() => {
void fetchStories()
@@ -114,6 +153,10 @@ onMounted(() => {
router.replace({ query: { ...router.currentRoute.value.query, openCreate: undefined } })
}
})
watch([selectedWindow, selectedCapability], () => {
void fetchStories()
})
</script>
<template>
@@ -191,6 +234,18 @@ onMounted(() => {
<p class="mt-2 text-sm leading-6 text-gray-500">
最近生成和资源补全留下的供应商调用轨迹。
</p>
<div class="mt-4 flex flex-wrap gap-2">
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === '7' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('7')">最近 7 天</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === '30' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('30')">最近 30 天</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === 'all' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('all')">全部</button>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'all' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('all')">全部能力</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'text' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('text')">文本</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'image' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('image')">图片</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'tts' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('tts')">语音</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'storybook' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('storybook')">绘本</button>
</div>
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:min-w-[520px]">
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
@@ -214,6 +269,70 @@ onMounted(() => {
<p v-if="topProvider" class="mt-4 text-sm text-gray-500">
当前样本中最前面的能力组合是 {{ topProvider.capability }} / {{ topProvider.adapter }}，成功 {{ topProvider.success_count }} 次，失败 {{ topProvider.failure_count }} 次。
</p>
<p v-if="topFailureReason" class="mt-2 text-sm text-rose-600">
最常见失败原因：{{ topFailureReason.reason }}（{{ topFailureReason.count }} 次）
</p>
</BaseCard>
<BaseCard
v-if="opsSummary"
class="mb-8"
padding="lg"
>
<div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-xl font-bold text-gray-800">任务运行概览</h2>
<p class="mt-2 text-sm leading-6 text-gray-500">
最近 {{ opsSummary.window_hours }} 小时的任务健康度，运行超过
{{ opsSummary.stale_threshold_minutes }} 分钟会被视为卡住。
</p>
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:min-w-[520px]">
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">运行中</div>
<div class="mt-1 text-lg font-semibold text-gray-800">{{ opsSummary.active_jobs }}</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">超时待收敛</div>
<div class="mt-1 text-lg font-semibold" :class="opsSummary.stale_running_jobs ? 'text-amber-600' : 'text-gray-800'">
{{ opsSummary.stale_running_jobs }}
</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">最近失败</div>
<div class="mt-1 text-lg font-semibold" :class="opsSummary.failed_jobs ? 'text-rose-600' : 'text-gray-800'">
{{ opsSummary.failed_jobs }}
</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">资源任务</div>
<div class="mt-1 text-lg font-semibold text-gray-800">{{ opsSummary.asset_retry_jobs }}</div>
</div>
</div>
</div>
<p v-if="opsSummary.degraded_jobs" class="mt-4 text-sm text-amber-600">
最近 {{ opsSummary.window_hours }} 小时有 {{ opsSummary.degraded_jobs }} 个任务以降级完成收尾。
</p>
<div v-if="opsSummary.recent_failures.length" class="mt-4 space-y-3">
<div
v-for="failure in opsSummary.recent_failures"
:key="failure.job_id"
class="rounded-lg border border-rose-100 bg-rose-50 px-4 py-3"
>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="text-sm font-semibold text-gray-800">
{{ failure.story_title || `${formatOutputMode(failure.output_mode)}任务` }}
</div>
<div class="text-xs text-gray-500">{{ formatDate(failure.updated_at) }}</div>
</div>
<div class="mt-1 text-xs text-rose-600">
{{ failure.failure_label }} · {{ failure.error_message || '请打开任务轨迹查看原因' }}
</div>
</div>
</div>
<p v-else class="mt-4 text-sm text-emerald-600">
最近 {{ opsSummary.window_hours }} 小时没有失败任务，当前链路比较稳定。
</p>
</BaseCard>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">