1045 lines
38 KiB
TypeScript
1045 lines
38 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { useBetterAuth } from '@/hooks/useBetterAuth'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Header } from '@/components/layout/Header'
|
|
import { Footer } from '@/components/layout/Footer'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card } from '@/components/ui/card'
|
|
import { LoadingSpinner } from '@/components/ui/loading-spinner'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
ArrowLeft,
|
|
Play,
|
|
Copy,
|
|
RefreshCw,
|
|
Clock,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Zap,
|
|
Eye,
|
|
FileText,
|
|
Settings,
|
|
BarChart3,
|
|
DollarSign,
|
|
Edit,
|
|
Save,
|
|
X
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { formatDistanceToNow } from 'date-fns'
|
|
import { zhCN, enUS } from 'date-fns/locale'
|
|
import { useLocale } from 'next-intl'
|
|
import { getPromptContent } from '@/lib/simulator-utils'
|
|
|
|
interface SimulatorRun {
|
|
id: string
|
|
name: string
|
|
status: string
|
|
userInput: string
|
|
promptContent?: string | null
|
|
output?: string
|
|
error?: string
|
|
outputType?: string
|
|
generatedFilePath?: string
|
|
createdAt: string
|
|
completedAt?: string
|
|
temperature?: number
|
|
maxTokens?: number
|
|
topP?: number
|
|
frequencyPenalty?: number
|
|
presencePenalty?: number
|
|
inputTokens?: number
|
|
outputTokens?: number
|
|
totalCost?: number
|
|
duration?: number
|
|
prompt: {
|
|
id: string
|
|
name: string
|
|
content: string
|
|
}
|
|
model: {
|
|
id: string
|
|
name: string
|
|
provider: string
|
|
modelId: string
|
|
description?: string
|
|
maxTokens?: number
|
|
}
|
|
}
|
|
|
|
interface Model {
|
|
id: string
|
|
modelId: string
|
|
name: string
|
|
provider: string
|
|
description?: string
|
|
maxTokens?: number
|
|
inputCostPer1k?: number
|
|
outputCostPer1k?: number
|
|
}
|
|
|
|
export default function SimulatorRunPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { user, loading: authLoading } = useBetterAuth()
|
|
const router = useRouter()
|
|
const t = useTranslations('simulator')
|
|
const locale = useLocale()
|
|
|
|
const [run, setRun] = useState<SimulatorRun | null>(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isExecuting, setIsExecuting] = useState(false)
|
|
const [streamOutput, setStreamOutput] = useState('')
|
|
const [runId, setRunId] = useState<string | null>(null)
|
|
const [isDuplicating, setIsDuplicating] = useState(false)
|
|
const [isEditing, setIsEditing] = useState(false)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [models, setModels] = useState<Model[]>([])
|
|
const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null)
|
|
const [isLoadingImage, setIsLoadingImage] = useState(false)
|
|
const [imageLoadError, setImageLoadError] = useState(false)
|
|
const [editForm, setEditForm] = useState({
|
|
name: '',
|
|
userInput: '',
|
|
promptContent: '',
|
|
modelId: '',
|
|
temperature: 0.7,
|
|
maxTokens: undefined as number | undefined,
|
|
topP: 1,
|
|
frequencyPenalty: 0,
|
|
presencePenalty: 0,
|
|
})
|
|
const outputRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const getParams = async () => {
|
|
const resolvedParams = await params
|
|
setRunId(resolvedParams.id)
|
|
}
|
|
getParams()
|
|
}, [params])
|
|
|
|
const fetchImageUrl = useCallback(async (runId: string) => {
|
|
try {
|
|
setIsLoadingImage(true)
|
|
const response = await fetch(`/api/simulator/${runId}/image`)
|
|
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
if (data.fileUrl) {
|
|
setGeneratedImageUrl(data.fileUrl)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching image URL:', error)
|
|
} finally {
|
|
setIsLoadingImage(false)
|
|
}
|
|
}, [])
|
|
|
|
const copyToClipboard = useCallback(async (text: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(text)
|
|
} catch (error) {
|
|
console.error('Failed to copy to clipboard:', error)
|
|
}
|
|
}, [])
|
|
|
|
const fetchRunCallback = useCallback(async () => {
|
|
if (!runId) return
|
|
try {
|
|
setIsLoading(true)
|
|
const response = await fetch(`/api/simulator/${runId}`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setRun(data)
|
|
|
|
// 如果是图片类型且有生成的文件路径,获取临时 URL
|
|
if (data.outputType === 'image' && data.generatedFilePath) {
|
|
fetchImageUrl(runId)
|
|
} else {
|
|
// 只有非图片类型才设置文本输出
|
|
setStreamOutput(data.output || '')
|
|
}
|
|
} else if (response.status === 404) {
|
|
router.push('/simulator')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching simulator run:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [runId, router, fetchImageUrl])
|
|
|
|
const fetchModels = useCallback(async () => {
|
|
try {
|
|
const response = await fetch('/api/simulator/models')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setModels(data.models || [])
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching models:', error)
|
|
}
|
|
}, [])
|
|
|
|
const handleStartEdit = () => {
|
|
if (!run || run.status !== 'pending') {
|
|
return
|
|
}
|
|
|
|
const promptContent = getPromptContent(run)
|
|
setEditForm({
|
|
name: run.name,
|
|
userInput: run.userInput,
|
|
promptContent,
|
|
modelId: run.model.id,
|
|
temperature: run.temperature || 0.7,
|
|
maxTokens: run.maxTokens,
|
|
topP: run.topP || 1,
|
|
frequencyPenalty: run.frequencyPenalty || 0,
|
|
presencePenalty: run.presencePenalty || 0,
|
|
})
|
|
setIsEditing(true)
|
|
|
|
// 获取模型列表
|
|
fetchModels()
|
|
}
|
|
|
|
const handleCancelEdit = () => {
|
|
setIsEditing(false)
|
|
setEditForm({
|
|
name: '',
|
|
userInput: '',
|
|
promptContent: '',
|
|
modelId: '',
|
|
temperature: 0.7,
|
|
maxTokens: undefined,
|
|
topP: 1,
|
|
frequencyPenalty: 0,
|
|
presencePenalty: 0,
|
|
})
|
|
}
|
|
|
|
const handleSaveEdit = async () => {
|
|
if (!run) return
|
|
|
|
setIsSaving(true)
|
|
try {
|
|
const response = await fetch(`/api/simulator/${run.id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: editForm.name,
|
|
userInput: editForm.userInput,
|
|
promptContent: editForm.promptContent,
|
|
modelId: editForm.modelId,
|
|
temperature: editForm.temperature,
|
|
maxTokens: editForm.maxTokens,
|
|
topP: editForm.topP,
|
|
frequencyPenalty: editForm.frequencyPenalty,
|
|
presencePenalty: editForm.presencePenalty,
|
|
}),
|
|
})
|
|
|
|
if (response.ok) {
|
|
const updatedRun = await response.json()
|
|
setRun(updatedRun)
|
|
setIsEditing(false)
|
|
console.log(t('runUpdated'))
|
|
} else {
|
|
console.error('Error updating run:', await response.text())
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating run:', error)
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!authLoading && user && runId) {
|
|
fetchRunCallback()
|
|
}
|
|
}, [user, authLoading, runId, fetchRunCallback])
|
|
|
|
|
|
const executeRun = async () => {
|
|
if (!run || run.status !== 'pending' || !runId) return
|
|
|
|
setIsExecuting(true)
|
|
setStreamOutput('')
|
|
|
|
try {
|
|
const response = await fetch(`/api/simulator/${runId}/execute`, {
|
|
method: 'POST',
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to start execution')
|
|
}
|
|
|
|
const reader = response.body?.getReader()
|
|
if (!reader) {
|
|
throw new Error('No response body')
|
|
}
|
|
|
|
let buffer = ''
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
if (done) break
|
|
|
|
buffer += new TextDecoder().decode(value)
|
|
const lines = buffer.split('\n')
|
|
buffer = lines.pop() || ''
|
|
|
|
for (const line of lines) {
|
|
if (line.startsWith('data: ')) {
|
|
const data = line.slice(6)
|
|
if (data === '[DONE]') {
|
|
// Execution completed, refresh data
|
|
await fetchRunCallback()
|
|
return
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(data)
|
|
if (parsed.choices?.[0]?.delta?.content) {
|
|
const content = parsed.choices[0].delta.content
|
|
setStreamOutput(prev => prev + content)
|
|
|
|
// Auto scroll to bottom
|
|
if (outputRef.current) {
|
|
outputRef.current.scrollTop = outputRef.current.scrollHeight
|
|
}
|
|
}
|
|
} catch {
|
|
// Ignore parsing errors
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error executing run:', error)
|
|
// Refresh data to get error status
|
|
await fetchRunCallback()
|
|
} finally {
|
|
setIsExecuting(false)
|
|
}
|
|
}
|
|
|
|
|
|
const handleDuplicateRun = async () => {
|
|
if (!run || !confirm(t('duplicateRunConfirm'))) {
|
|
return
|
|
}
|
|
|
|
setIsDuplicating(true)
|
|
try {
|
|
const response = await fetch(`/api/simulator/${run.id}/duplicate`, {
|
|
method: 'POST',
|
|
})
|
|
|
|
if (response.ok) {
|
|
const newRun = await response.json()
|
|
// 跳转到新创建的运行页面
|
|
router.push(`/simulator/${newRun.id}`)
|
|
} else {
|
|
console.error('Error duplicating run:', await response.text())
|
|
}
|
|
} catch (error) {
|
|
console.error('Error duplicating run:', error)
|
|
} finally {
|
|
setIsDuplicating(false)
|
|
}
|
|
}
|
|
|
|
const getStatusIcon = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return <Clock className="h-5 w-5" />
|
|
case 'running':
|
|
return <RefreshCw className="h-5 w-5 animate-spin" />
|
|
case 'completed':
|
|
return <CheckCircle2 className="h-5 w-5" />
|
|
case 'failed':
|
|
return <XCircle className="h-5 w-5" />
|
|
default:
|
|
return <Clock className="h-5 w-5" />
|
|
}
|
|
}
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800'
|
|
case 'running':
|
|
return 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800'
|
|
case 'completed':
|
|
return 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800'
|
|
case 'failed':
|
|
return 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800'
|
|
default:
|
|
return 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-900/20 dark:text-gray-400 dark:border-gray-800'
|
|
}
|
|
}
|
|
|
|
if (authLoading || isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<LoadingSpinner size="lg" />
|
|
<p className="mt-4 text-muted-foreground">Loading run details...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!user || !run) {
|
|
return null
|
|
}
|
|
|
|
const promptContent = getPromptContent(run)
|
|
const currentOutput = (isExecuting && run.status === 'pending') ? streamOutput : run.output
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Header />
|
|
|
|
<div className="container mx-auto px-4 py-8 max-w-6xl">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
<Link href="/simulator">
|
|
<Button variant="outline" size="sm">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
{t('backToList')}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
{isEditing ? (
|
|
<div className="mb-2">
|
|
<Label htmlFor="runName" className="text-sm font-medium">{t('runName')}</Label>
|
|
<Input
|
|
id="runName"
|
|
value={editForm.name}
|
|
onChange={(e) => setEditForm({...editForm, name: e.target.value})}
|
|
className="text-2xl font-bold border-2 border-primary"
|
|
placeholder={t('runName')}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<h1 className="text-3xl font-bold text-foreground mb-2">
|
|
{run.name}
|
|
</h1>
|
|
)}
|
|
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
|
|
<Badge className={`border ${getStatusColor(run.status)}`}>
|
|
<div className="flex items-center space-x-1">
|
|
{getStatusIcon(run.status)}
|
|
<span>{t(`status.${run.status}`)}</span>
|
|
</div>
|
|
</Badge>
|
|
<span>{run.model.provider} {run.model.name}</span>
|
|
<span>
|
|
{formatDistanceToNow(new Date(run.createdAt), {
|
|
addSuffix: true,
|
|
locale: locale === 'zh' ? zhCN : enUS
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
onClick={handleDuplicateRun}
|
|
disabled={isDuplicating}
|
|
variant="outline"
|
|
>
|
|
{isDuplicating ? (
|
|
<>
|
|
<LoadingSpinner size="sm" />
|
|
<span className="ml-2">{t('creating')}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy className="h-4 w-4 mr-2" />
|
|
{t('duplicateRun')}
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{/* 编辑按钮 - 只有pending状态才显示 */}
|
|
{run.status === 'pending' && !isEditing && (
|
|
<Button
|
|
onClick={handleStartEdit}
|
|
variant="outline"
|
|
>
|
|
<Edit className="h-4 w-4 mr-2" />
|
|
{t('editRun')}
|
|
</Button>
|
|
)}
|
|
|
|
{/* 编辑模式下的保存和取消按钮 */}
|
|
{isEditing && (
|
|
<>
|
|
<Button
|
|
onClick={handleCancelEdit}
|
|
variant="outline"
|
|
>
|
|
<X className="h-4 w-4 mr-2" />
|
|
{t('cancelEdit')}
|
|
</Button>
|
|
<Button
|
|
onClick={handleSaveEdit}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving ? (
|
|
<>
|
|
<LoadingSpinner size="sm" />
|
|
<span className="ml-2">{t('creating')}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{t('saveChanges')}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{run.status === 'pending' && !isEditing && (
|
|
<Button onClick={executeRun} disabled={isExecuting}>
|
|
{isExecuting ? (
|
|
<>
|
|
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
|
{t('executing')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="h-4 w-4 mr-2" />
|
|
{t('execute')}
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Left Side - Configuration */}
|
|
<div className="space-y-6">
|
|
{/* Prompt Content */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold flex items-center">
|
|
<FileText className="h-5 w-5 mr-2" />
|
|
{t('promptContent')}
|
|
</h2>
|
|
{!isEditing && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => copyToClipboard(promptContent)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{isEditing ? (
|
|
<Textarea
|
|
value={editForm.promptContent}
|
|
onChange={(e) => setEditForm({...editForm, promptContent: e.target.value})}
|
|
className="min-h-32 font-mono text-sm"
|
|
placeholder={t('promptContentPlaceholder')}
|
|
/>
|
|
) : (
|
|
<div className="bg-muted rounded-md p-4 border max-h-64 overflow-y-auto">
|
|
<pre className="text-sm text-foreground whitespace-pre-wrap font-mono">
|
|
{promptContent}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* User Input */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold">{t('userInput')}</h2>
|
|
{!isEditing && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => copyToClipboard(run.userInput)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{isEditing ? (
|
|
<Textarea
|
|
value={editForm.userInput}
|
|
onChange={(e) => setEditForm({...editForm, userInput: e.target.value})}
|
|
className="min-h-32"
|
|
placeholder={t('userInputPlaceholder')}
|
|
/>
|
|
) : (
|
|
<div className="bg-muted rounded-md p-4 border">
|
|
<div className="text-sm text-foreground whitespace-pre-wrap">
|
|
{run.userInput}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Configuration */}
|
|
<Card className="p-6">
|
|
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
|
<Settings className="h-5 w-5 mr-2" />
|
|
{t('configuration')}
|
|
</h2>
|
|
{isEditing ? (
|
|
<div className="space-y-4">
|
|
{/* Model Selection */}
|
|
<div>
|
|
<Label htmlFor="modelSelect" className="text-sm font-medium">{t('selectModel')}</Label>
|
|
<select
|
|
id="modelSelect"
|
|
value={editForm.modelId}
|
|
onChange={(e) => setEditForm({...editForm, modelId: e.target.value})}
|
|
className="w-full mt-1 px-3 py-2 border border-input bg-background rounded-md text-sm"
|
|
>
|
|
{models.map((model) => (
|
|
<option key={model.id} value={model.id}>
|
|
{model.provider} - {model.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Temperature */}
|
|
<div>
|
|
<Label htmlFor="temperature" className="text-sm font-medium">{t('temperature')}</Label>
|
|
<Input
|
|
id="temperature"
|
|
type="number"
|
|
min="0"
|
|
max="2"
|
|
step="0.1"
|
|
value={editForm.temperature}
|
|
onChange={(e) => setEditForm({...editForm, temperature: parseFloat(e.target.value) || 0.7})}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Max Tokens */}
|
|
<div>
|
|
<Label htmlFor="maxTokens" className="text-sm font-medium">{t('maxTokens')}</Label>
|
|
<Input
|
|
id="maxTokens"
|
|
type="number"
|
|
min="1"
|
|
value={editForm.maxTokens || ''}
|
|
onChange={(e) => setEditForm({...editForm, maxTokens: e.target.value ? parseInt(e.target.value) : undefined})}
|
|
placeholder="Leave empty for model default"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Top P */}
|
|
<div>
|
|
<Label htmlFor="topP" className="text-sm font-medium">{t('topP')}</Label>
|
|
<Input
|
|
id="topP"
|
|
type="number"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={editForm.topP}
|
|
onChange={(e) => setEditForm({...editForm, topP: parseFloat(e.target.value) || 1})}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Frequency Penalty */}
|
|
<div>
|
|
<Label htmlFor="frequencyPenalty" className="text-sm font-medium">{t('frequencyPenalty')}</Label>
|
|
<Input
|
|
id="frequencyPenalty"
|
|
type="number"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value={editForm.frequencyPenalty}
|
|
onChange={(e) => setEditForm({...editForm, frequencyPenalty: parseFloat(e.target.value) || 0})}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
{/* Presence Penalty */}
|
|
<div>
|
|
<Label htmlFor="presencePenalty" className="text-sm font-medium">{t('presencePenalty')}</Label>
|
|
<Input
|
|
id="presencePenalty"
|
|
type="number"
|
|
min="-2"
|
|
max="2"
|
|
step="0.1"
|
|
value={editForm.presencePenalty}
|
|
onChange={(e) => setEditForm({...editForm, presencePenalty: parseFloat(e.target.value) || 0})}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div className="col-span-2">
|
|
<span className="font-medium text-foreground">
|
|
{t('selectModel')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.model.provider} - {run.model.name}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('temperature')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.temperature || 0.7}
|
|
</span>
|
|
</div>
|
|
{run.maxTokens && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('maxTokens')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.maxTokens.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.topP && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('topP')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.topP}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.frequencyPenalty !== undefined && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('frequencyPenalty')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.frequencyPenalty}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.presencePenalty !== undefined && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('presencePenalty')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.presencePenalty}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Statistics */}
|
|
{(run.inputTokens || run.outputTokens || run.totalCost || run.duration) && (
|
|
<Card className="p-6">
|
|
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
|
<BarChart3 className="h-5 w-5 mr-2" />
|
|
{t('statistics')}
|
|
</h2>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
{run.inputTokens && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('inputTokens')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.inputTokens.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.outputTokens && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('outputTokens')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{run.outputTokens.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.totalCost && (
|
|
<div>
|
|
<span className="font-medium text-foreground flex items-center">
|
|
<DollarSign className="h-3 w-3 mr-1" />
|
|
{t('totalCost')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
${run.totalCost.toFixed(4)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{run.duration && (
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{t('duration')}:
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
{(run.duration / 1000).toFixed(2)}s
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right Side - Output */}
|
|
<div className="space-y-6">
|
|
<Card className="p-6 h-full">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold flex items-center">
|
|
<Zap className="h-5 w-5 mr-2" />
|
|
{t('output')}
|
|
</h2>
|
|
{currentOutput && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => copyToClipboard(currentOutput)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{run.status === 'pending' && !isExecuting ? (
|
|
<div className="text-center py-12">
|
|
<Clock className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
|
|
<p className="text-muted-foreground mb-4">
|
|
{t('pendingExecution')}
|
|
</p>
|
|
<Button onClick={executeRun}>
|
|
<Play className="h-4 w-4 mr-2" />
|
|
{t('execute')}
|
|
</Button>
|
|
</div>
|
|
) : run.status === 'running' || isExecuting ? (
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4 text-blue-600 dark:text-blue-400">
|
|
<RefreshCw className="h-4 w-4 animate-spin" />
|
|
<span className="text-sm font-medium">{t('generating')}</span>
|
|
</div>
|
|
<div
|
|
ref={outputRef}
|
|
className="bg-muted rounded-md p-4 border min-h-64 max-h-96 overflow-y-auto"
|
|
>
|
|
<div className="text-sm text-foreground whitespace-pre-wrap font-mono">
|
|
{currentOutput}
|
|
<span className="inline-block w-2 h-4 bg-blue-600 animate-pulse ml-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : run.error ? (
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4 text-red-600 dark:text-red-400">
|
|
<XCircle className="h-4 w-4" />
|
|
<span className="text-sm font-medium">{t('error')}</span>
|
|
</div>
|
|
<div className="bg-red-50 dark:bg-red-950/30 rounded-md p-4 border border-red-200 dark:border-red-800">
|
|
<div className="text-sm text-red-700 dark:text-red-300 whitespace-pre-wrap">
|
|
{run.error}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (run.outputType === 'image' && generatedImageUrl) || (run.outputType !== 'image' && currentOutput) ? (
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4 text-green-600 dark:text-green-400">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
<span className="text-sm font-medium">{t('completed')}</span>
|
|
</div>
|
|
|
|
{/* 图片输出 */}
|
|
{run.outputType === 'image' && generatedImageUrl && (
|
|
<div className="bg-gradient-to-br from-slate-50 via-background to-slate-50 dark:from-slate-900 dark:via-background dark:to-slate-900 rounded-2xl p-8 border shadow-lg">
|
|
<div className="text-center mb-6">
|
|
<div className="inline-flex items-center space-x-2 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21,15 16,10 5,21"></polyline>
|
|
</svg>
|
|
<span>生成的图片</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center mb-6">
|
|
<div className="relative group cursor-pointer">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
|
|
<img
|
|
src={generatedImageUrl}
|
|
alt="Generated image"
|
|
className="relative max-w-full max-h-[600px] rounded-xl shadow-2xl border border-white/20 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-3xl"
|
|
onError={() => {
|
|
console.error('Failed to load image')
|
|
setImageLoadError(true)
|
|
}}
|
|
onLoad={() => {
|
|
setImageLoadError(false)
|
|
}}
|
|
onClick={() => window.open(generatedImageUrl, '_blank')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center space-x-4">
|
|
<button
|
|
onClick={() => window.open(generatedImageUrl, '_blank')}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
<span>查看大图</span>
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
const response = await fetch(generatedImageUrl)
|
|
const blob = await response.blob()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.style.display = 'none'
|
|
a.href = url
|
|
a.download = `generated-image-${run.name || 'untitled'}-${Date.now()}.webp`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
window.URL.revokeObjectURL(url)
|
|
document.body.removeChild(a)
|
|
} catch (error) {
|
|
console.error('Download failed:', error)
|
|
}
|
|
}}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-green-50 hover:bg-green-100 dark:bg-green-900/30 dark:hover:bg-green-900/50 text-green-600 dark:text-green-400 rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<span>下载图片</span>
|
|
</button>
|
|
<button
|
|
onClick={() => copyToClipboard(generatedImageUrl)}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
<span>复制链接</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 文本输出 - 只在非图片类型时显示 */}
|
|
{run.outputType !== 'image' && currentOutput && (
|
|
<div className="bg-muted rounded-md p-4 border min-h-32 max-h-96 overflow-y-auto">
|
|
<div className="text-sm text-foreground whitespace-pre-wrap">
|
|
{currentOutput}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 图片错误状态 */}
|
|
{run.outputType === 'image' && generatedImageUrl && imageLoadError && (
|
|
<div className="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950/50 dark:to-red-900/50 rounded-xl p-8 border border-red-200 dark:border-red-800">
|
|
<div className="flex flex-col items-center justify-center space-y-4">
|
|
<div className="p-3 bg-red-100 dark:bg-red-900 rounded-full">
|
|
<svg className="h-8 w-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.19 2.5 1.732 2.5z" />
|
|
</svg>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-sm font-medium text-red-800 dark:text-red-200">图片加载失败</p>
|
|
<p className="text-xs text-red-600 dark:text-red-400 mt-1">图片可能已过期或无法访问</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setImageLoadError(false)
|
|
if (runId) {
|
|
fetchImageUrl(runId)
|
|
}
|
|
}}
|
|
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-xs rounded-lg transition-colors"
|
|
>
|
|
重新加载
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 图片加载中状态 */}
|
|
{run.outputType === 'image' && !generatedImageUrl && isLoadingImage && (
|
|
<div className="bg-gradient-to-br from-slate-50 via-background to-slate-50 dark:from-slate-900 dark:via-background dark:to-slate-900 rounded-2xl p-12 border shadow-lg">
|
|
<div className="flex flex-col items-center justify-center space-y-6">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full blur-md opacity-30 animate-pulse"></div>
|
|
<div className="relative p-4 bg-background rounded-full border shadow-sm">
|
|
<RefreshCw className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
</div>
|
|
<div className="text-center space-y-2">
|
|
<p className="text-lg font-semibold text-foreground">正在获取图片</p>
|
|
<p className="text-sm text-muted-foreground">正在从云端加载您生成的图片...</p>
|
|
</div>
|
|
<div className="w-32 h-1 bg-muted rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-primary to-primary/50 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : run.outputType === 'image' && !generatedImageUrl && !isLoadingImage ? (
|
|
<div className="text-center py-12">
|
|
<Eye className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
|
|
<p className="text-muted-foreground">
|
|
等待图片生成完成...
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<Eye className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
|
|
<p className="text-muted-foreground">
|
|
{t('noOutput')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
} |