297 lines
13 KiB
Vue
297 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useTranslationStore } from '../stores/translation'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { useThemeStore } from '../stores/theme'
|
|
import LLMSelector from '../components/LLMSelector.vue'
|
|
import ProperNounsEditor from '../components/ProperNounsEditor.vue'
|
|
import ComparisonView from '../components/ComparisonView.vue'
|
|
|
|
const store = useTranslationStore()
|
|
const auth = useAuthStore()
|
|
const theme = useThemeStore()
|
|
const showHistorySidebar = ref(false)
|
|
|
|
onMounted(async () => {
|
|
await store.loadModels()
|
|
store.newSession()
|
|
store.loadHistory()
|
|
})
|
|
|
|
// Language options
|
|
const languages = [
|
|
{ value: 'auto', label: '자동 판단' },
|
|
{ value: '영어', label: '영어' },
|
|
{ value: '중국어', label: '중국어(간체)' },
|
|
{ value: '중문(번체)', label: '중국어(번체)' },
|
|
{ value: '일본어', label: '일본어' },
|
|
{ value: '프랑스어', label: '프랑스어' },
|
|
{ value: '독일어', label: '독일어' },
|
|
{ value: '스페인어', label: '스페인어' },
|
|
{ value: '러시아어', label: '러시아어' },
|
|
]
|
|
|
|
const targetLanguages = [
|
|
...languages.filter(l => l.value !== 'auto'),
|
|
{ value: '한국어', label: '한국어' },
|
|
]
|
|
|
|
function phaseLabel(n: number) {
|
|
const labels = ['', '초벌번역', '고유명사확인', '재번역', '마무리']
|
|
return labels[n] || ''
|
|
}
|
|
|
|
async function runPhase(phase: number) {
|
|
switch (phase) {
|
|
case 1: await store.executePhase1(); break
|
|
case 2: await store.executePhase2(); break
|
|
case 3: await store.executePhase3(); break
|
|
case 4: await store.executePhase4(); break
|
|
}
|
|
}
|
|
|
|
function handleNewTranslation() {
|
|
if (store.phase1Result || store.phase3Result || store.phase4Result) {
|
|
if (!confirm('현재 번역을 새로운 번역으로 교체하시겠습니까?')) return
|
|
}
|
|
store.newSession()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen">
|
|
<!-- Top Bar -->
|
|
<header class="bg-white/90 dark:bg-gray-800/90 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10 shadow-sm backdrop-blur">
|
|
<div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-lg font-bold text-gray-800 dark:text-gray-100">LLM 번역기</h1>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<!-- Dark Mode Toggle -->
|
|
<button
|
|
@click="theme.toggle()"
|
|
class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors flex items-center gap-1.5"
|
|
:title="theme.isDark ? '라이트모드' : '다크모드'"
|
|
>
|
|
{{ theme.isDark ? '☀️' : '🌙' }}
|
|
</button>
|
|
|
|
<!-- History Button -->
|
|
<button
|
|
@click="showHistorySidebar = true"
|
|
class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors flex items-center gap-1.5"
|
|
title="히스토리"
|
|
>
|
|
🕐 히스토리 ({{ store.history.length }})
|
|
</button>
|
|
|
|
<!-- User Info & Logout -->
|
|
<span class="text-sm text-gray-600 dark:text-gray-300">{{ auth.user_id }}</span>
|
|
<button @click="auth.logout()" class="px-3 py-1.5 text-sm bg-red-50 dark:bg-red-900/30 hover:bg-red-100 dark:hover:bg-red-900/50 text-red-600 rounded-lg transition-colors">
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
|
<!-- Model Selection Row -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
|
|
<div class="flex flex-wrap items-end gap-4">
|
|
<LLMSelector label="Phase 1 — 초벌번역" v-model:value="store.modelPhase1" :models="store.models" />
|
|
<LLMSelector label="Phase 2 — 고유명사" v-model:value="store.modelPhase2" :models="store.models" />
|
|
<LLMSelector label="Phase 3 — 재번역" v-model:value="store.modelPhase3" :models="store.models" />
|
|
<LLMSelector label="Phase 4 — 마무리" v-model:value="store.modelPhase4" :models="store.models" />
|
|
|
|
<!-- Language Selectors -->
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">출발어</label>
|
|
<select
|
|
v-model="store.sourceLanguage"
|
|
class="px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
>
|
|
<option v-for="lang in languages" :key="lang.value" :value="lang.value">
|
|
{{ lang.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-end pb-2 text-gray-400">→</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">도착어</label>
|
|
<select
|
|
v-model="store.targetLanguage"
|
|
class="px-3 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
>
|
|
<option v-for="lang in targetLanguages" :key="lang.value" :value="lang.value">
|
|
{{ lang.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- New Translation Button -->
|
|
<button @click="handleNewTranslation()" class="px-4 py-2 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
|
|
🔄 새 번역
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Source Text Input -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-sm font-semibold text-gray-700 dark:text-gray-200">📝 원문 입력</h2>
|
|
<span class="text-xs text-gray-400">{{ store.sourceText.length }}자</span>
|
|
</div>
|
|
<textarea
|
|
v-model="store.sourceText"
|
|
rows="10"
|
|
placeholder="번역할 원문을 여기에 붙여넣으세요..."
|
|
class="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-lg text-sm leading-relaxed resize-y bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
></textarea>
|
|
</section>
|
|
|
|
<!-- Phase Buttons -->
|
|
<section class="flex flex-wrap gap-3">
|
|
<button
|
|
@click="runPhase(1)"
|
|
:disabled="store.loading || !store.sourceText.trim() || !store.modelPhase1"
|
|
class="px-5 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
|
|
>
|
|
<span v-if="store.currentPhaseLoading === 1">⏳</span>
|
|
<span v-else>▶</span>
|
|
Phase 1 — 초벌번역
|
|
</button>
|
|
|
|
<button
|
|
@click="runPhase(2)"
|
|
:disabled="store.loading || !store.phase2Ready"
|
|
class="px-5 py-2.5 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
|
|
>
|
|
<span v-if="store.currentPhaseLoading === 2">⏳</span>
|
|
<span v-else>✓</span>
|
|
Phase 2 — 고유명사 확인
|
|
</button>
|
|
|
|
<button
|
|
@click="runPhase(3)"
|
|
:disabled="store.loading || !store.phase3Ready"
|
|
class="px-5 py-2.5 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
|
|
>
|
|
<span v-if="store.currentPhaseLoading === 3">⏳</span>
|
|
<span v-else>▶</span>
|
|
Phase 3 — 재번역
|
|
</button>
|
|
|
|
<button
|
|
@click="runPhase(4)"
|
|
:disabled="store.loading || !store.phase4Ready"
|
|
class="px-5 py-2.5 bg-pink-600 text-white rounded-lg font-medium hover:bg-pink-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
|
|
>
|
|
<span v-if="store.currentPhaseLoading === 4">⏳</span>
|
|
<span v-else>✨</span>
|
|
Phase 4 — 마무리 다듬기
|
|
</button>
|
|
</section>
|
|
|
|
<!-- Error Message -->
|
|
<div v-if="store.error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
|
|
⚠️ {{ store.error }}
|
|
<button @click="store.error = null" class="ml-3 underline hover:no-underline">닫기</button>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div v-if="store.loading && !store.error" class="flex items-center gap-2 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-4 py-3 rounded-lg text-sm">
|
|
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
{{ phaseLabel(store.currentPhaseLoading || 0) }} 진행 중...
|
|
</div>
|
|
|
|
<!-- Phase 2: Proper Noun Editor -->
|
|
<section v-if="store.phase1Done">
|
|
<ProperNounsEditor
|
|
:proper_nouns="store.phase2ProperNouns"
|
|
:style="store.phase2Style"
|
|
@update:proper_nouns="(v) => store.phase2ProperNouns = v"
|
|
@update:style="(v) => store.phase2Style = v"
|
|
/>
|
|
|
|
<!-- Phase 1 Summary (read-only display) -->
|
|
<div v-if="store.phase1Result?.summary" class="mt-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
|
|
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">📋 내용 요약</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">{{ store.phase1Result.summary }}</p>
|
|
</div>
|
|
|
|
<!-- Phase 1 Result Preview -->
|
|
<div v-if="store.phase1Result?.translated" class="mt-4 bg-white dark:bg-gray-800 rounded-xl border border-blue-200 dark:border-blue-700 p-5">
|
|
<h4 class="text-sm font-semibold text-blue-700 dark:text-blue-300 mb-2">초벌 번역 결과 미리보기</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">{{ store.phase1Result.translated }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Phase Comparison View -->
|
|
<ComparisonView />
|
|
</main>
|
|
|
|
<!-- History Sidebar (overlay) -->
|
|
<Transition name="slide">
|
|
<div v-if="showHistorySidebar" class="fixed inset-y-0 right-0 w-80 bg-white dark:bg-gray-800 shadow-2xl z-50 p-6 overflow-y-auto border-l border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center justify-between">
|
|
번역 히스토리
|
|
<button @click="showHistorySidebar = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">✕</button>
|
|
</h3>
|
|
|
|
<!-- History List -->
|
|
<div v-if="store.history.length === 0" class="text-sm text-gray-400 italic mt-4">
|
|
아직 번역 기록이 없습니다.
|
|
</div>
|
|
|
|
<ul v-else class="space-y-2">
|
|
<li v-for="(entry, idx) in store.history" :key="idx">
|
|
<button
|
|
@click="store.restoreFromHistory(entry); showHistorySidebar = false"
|
|
class="w-full text-left p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-100 dark:border-gray-600 transition-colors"
|
|
>
|
|
<div class="text-xs text-gray-400 mb-1">
|
|
{{ new Date(entry.timestamp).toLocaleString('ko-KR') }}
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-700 dark:text-gray-200 line-clamp-2">
|
|
{{ entry.source_preview || '(빈 원문)' }}
|
|
</div>
|
|
<div class="text-xs text-blue-500 mt-1">→ {{ entry.target_language }}</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Overlay background for sidebar -->
|
|
<div v-if="showHistorySidebar" @click="showHistorySidebar = false" class="fixed inset-0 bg-black/20 z-40"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.slide-enter-active,
|
|
.slide-leave-active {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.slide-enter-from,
|
|
.slide-leave-to {
|
|
transform: translateX(100%);
|
|
}
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|