first runnable
This commit is contained in:
Julian Freeman
351
src/App.vue
Normal file
351
src/App.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import {
|
||||
Settings,
|
||||
Languages,
|
||||
Send,
|
||||
Copy,
|
||||
Trash2,
|
||||
ArrowRightLeft,
|
||||
Loader2,
|
||||
Check
|
||||
} from 'lucide-vue-next';
|
||||
import { fetch } from '@tauri-apps/plugin-http';
|
||||
import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const view = ref<'translate' | 'settings'>('translate');
|
||||
|
||||
// Translation State
|
||||
const sourceText = ref('');
|
||||
const targetText = ref('');
|
||||
const isTranslating = ref(false);
|
||||
const showCopyFeedback = ref(false);
|
||||
|
||||
// Language Selection
|
||||
const sourceLangCode = computed({
|
||||
get: () => settings.sourceLang.code,
|
||||
set: (code) => {
|
||||
const lang = LANGUAGES.find(l => l.code === code);
|
||||
if (lang) settings.sourceLang = lang;
|
||||
}
|
||||
});
|
||||
|
||||
const targetLangCode = computed({
|
||||
get: () => settings.targetLang.code,
|
||||
set: (code) => {
|
||||
const lang = LANGUAGES.find(l => l.code === code);
|
||||
if (lang) settings.targetLang = lang;
|
||||
}
|
||||
});
|
||||
|
||||
const sourceLang = computed(() => settings.sourceLang);
|
||||
const targetLang = computed(() => settings.targetLang);
|
||||
|
||||
const swapLanguages = () => {
|
||||
const temp = sourceLangCode.value;
|
||||
sourceLangCode.value = targetLangCode.value;
|
||||
targetLangCode.value = temp;
|
||||
};
|
||||
|
||||
const clearSource = () => {
|
||||
sourceText.value = '';
|
||||
targetText.value = '';
|
||||
};
|
||||
|
||||
const copyTarget = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(targetText.value);
|
||||
showCopyFeedback.value = true;
|
||||
setTimeout(() => {
|
||||
showCopyFeedback.value = false;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
}
|
||||
};
|
||||
|
||||
const translate = async () => {
|
||||
if (!sourceText.value.trim() || isTranslating.value) return;
|
||||
|
||||
isTranslating.value = true;
|
||||
targetText.value = '';
|
||||
|
||||
const prompt = settings.systemPromptTemplate
|
||||
.replace(/{SOURCE_LANG}/g, sourceLang.value.name)
|
||||
.replace(/{SOURCE_CODE}/g, sourceLang.value.code)
|
||||
.replace(/{TARGET_LANG}/g, targetLang.value.name)
|
||||
.replace(/{TARGET_CODE}/g, targetLang.value.code)
|
||||
.replace(/{TEXT}/g, sourceText.value);
|
||||
|
||||
const requestBody = {
|
||||
model: settings.modelName,
|
||||
prompt: prompt,
|
||||
stream: settings.enableStreaming
|
||||
};
|
||||
|
||||
settings.addLog('request', requestBody);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${settings.ollamaApiAddress}/api/generate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
settings.addLog('error', { status: response.status, text: errorText });
|
||||
throw new Error(`API error (${response.status}): ${errorText || response.statusText}`);
|
||||
}
|
||||
|
||||
if (settings.enableStreaming) {
|
||||
const reader = response.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
if (reader) {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
const lines = chunk.split('\n');
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
if (data.response) {
|
||||
targetText.value += data.response;
|
||||
}
|
||||
if (data.done) {
|
||||
settings.addLog('response', 'Stream finished');
|
||||
}
|
||||
} catch (e) {
|
||||
settings.addLog('error', `Chunk parse error: ${line}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const data = await response.json();
|
||||
settings.addLog('response', data);
|
||||
targetText.value = data.response;
|
||||
}
|
||||
} catch (err: any) {
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
settings.addLog('error', errorMsg);
|
||||
targetText.value = `Error: ${errorMsg}`;
|
||||
} finally {
|
||||
isTranslating.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="h-14 border-b bg-white flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<Languages class="w-6 h-6 text-blue-600" />
|
||||
<h1 class="font-semibold text-lg tracking-tight">GemmaTrans</h1>
|
||||
</div>
|
||||
<button
|
||||
@click="view = view === 'translate' ? 'settings' : 'translate'"
|
||||
class="p-2 hover:bg-slate-100 rounded-full transition-colors"
|
||||
>
|
||||
<Settings v-if="view === 'translate'" class="w-5 h-5 text-slate-600" />
|
||||
<Languages v-else class="w-5 h-5 text-slate-600" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- Translation View -->
|
||||
<div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x bg-white overflow-hidden">
|
||||
<!-- Source Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<div class="flex items-center gap-4 px-6 py-3 border-b bg-slate-50/50">
|
||||
<select
|
||||
v-model="sourceLangCode"
|
||||
class="bg-transparent border-none focus:ring-0 font-medium text-slate-700 cursor-pointer text-sm outline-none appearance-none"
|
||||
>
|
||||
<option v-for="lang in LANGUAGES" :key="lang.code" :value="lang.code">{{ lang.name }}</option>
|
||||
</select>
|
||||
<button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors">
|
||||
<ArrowRightLeft class="w-4 h-4 text-slate-500" />
|
||||
</button>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="clearSource" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors" title="Clear">
|
||||
<Trash2 class="w-4 h-4 text-slate-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="sourceText"
|
||||
placeholder="Type text here..."
|
||||
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300"
|
||||
></textarea>
|
||||
<div class="p-4 border-t flex justify-end">
|
||||
<button
|
||||
@click="translate"
|
||||
:disabled="isTranslating || !sourceText.trim()"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
|
||||
<Send v-else class="w-4 h-4" />
|
||||
{{ isTranslating ? 'Translating...' : 'Translate' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30">
|
||||
<div class="flex items-center gap-4 px-6 py-3 border-b bg-slate-50/50">
|
||||
<select
|
||||
v-model="targetLangCode"
|
||||
class="bg-transparent border-none focus:ring-0 font-medium text-slate-700 cursor-pointer text-sm outline-none appearance-none"
|
||||
>
|
||||
<option v-for="lang in LANGUAGES" :key="lang.code" :value="lang.code">{{ lang.name }}</option>
|
||||
</select>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="copyTarget" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors relative" title="Copy">
|
||||
<Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4 text-slate-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap">
|
||||
<template v-if="targetText">
|
||||
{{ targetText }}
|
||||
</template>
|
||||
<span v-else class="text-slate-300 italic">Translation will appear here...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings View -->
|
||||
<div v-else class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
|
||||
<div class="max-w-2xl mx-auto space-y-8">
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">API Configuration</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border p-6 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700">Ollama API Address</label>
|
||||
<input
|
||||
v-model="settings.ollamaApiAddress"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all"
|
||||
placeholder="http://localhost:11434"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700">Ollama Model Name</label>
|
||||
<input
|
||||
v-model="settings.modelName"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm"
|
||||
placeholder="translategemma:12b"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<label class="text-sm font-medium text-slate-700">Enable Streaming</label>
|
||||
<p class="text-xs text-slate-500">Render text as it is generated</p>
|
||||
</div>
|
||||
<button
|
||||
@click="settings.enableStreaming = !settings.enableStreaming"
|
||||
:class="cn(
|
||||
'w-12 h-6 rounded-full transition-colors relative',
|
||||
settings.enableStreaming ? 'bg-blue-600' : 'bg-slate-300'
|
||||
)"
|
||||
>
|
||||
<div :class="cn(
|
||||
'absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform',
|
||||
settings.enableStreaming ? 'translate-x-6' : 'translate-x-0'
|
||||
)"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">Prompt Engineering</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border p-6">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm font-medium text-slate-700">System Prompt Template</label>
|
||||
<button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 hover:underline">Reset to Default</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="settings.systemPromptTemplate"
|
||||
rows="8"
|
||||
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed"
|
||||
></textarea>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 text-[10px] font-mono rounded border text-slate-600">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">Debug Logs</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border p-4 space-y-2 overflow-hidden">
|
||||
<div v-if="settings.logs.length === 0" class="text-xs text-slate-400 text-center py-4 italic">
|
||||
No logs recorded yet. Try translating something.
|
||||
</div>
|
||||
<div
|
||||
v-for="(log, idx) in settings.logs"
|
||||
:key="idx"
|
||||
class="text-[10px] font-mono border-b last:border-0 pb-2 flex flex-col gap-1"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-slate-400">[{{ log.timestamp }}]</span>
|
||||
<span
|
||||
:class="cn(
|
||||
'px-1 rounded uppercase font-bold',
|
||||
log.type === 'request' ? 'bg-blue-100 text-blue-700' :
|
||||
log.type === 'response' ? 'bg-green-100 text-green-700' :
|
||||
'bg-red-100 text-red-700'
|
||||
)"
|
||||
>{{ log.type }}</span>
|
||||
</div>
|
||||
<pre class="bg-slate-50 p-2 rounded overflow-x-auto text-slate-600 max-h-32">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="h-8 bg-slate-100 border-t flex items-center px-4 justify-between shrink-0">
|
||||
<div class="text-[10px] text-slate-400">
|
||||
{{ settings.ollamaApiAddress }}
|
||||
</div>
|
||||
<div class="text-[10px] text-slate-400">
|
||||
GemmaTrans v0.1.0
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user