first runnable

2026-02-22 16:30:45 -04:00
commit 5abd514c1d
39 changed files with 8302 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,7 @@
+# Tauri + Vue + TypeScript
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + Vue + Typescript App</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "gemmatrans-client",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.0",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-http": "^2.5.7",
+    "@tauri-apps/plugin-opener": "^2",
+    "@vueuse/core": "^14.2.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.575.0",
+    "pinia": "^3.0.4",
+    "tailwind-merge": "^3.5.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/spec/prd.md
+++ b/spec/prd.md
@@ -0,0 +1,85 @@
+# PRD: GemmaTrans Desktop Client
+
+## 1. Project Overview
+**GemmaTrans** is a lightweight, high-performance desktop translation client built with **Tauri** and **Vue 3**. It is designed to act as a modern frontend for the **TranslateGemma** model running on a local or remote **Ollama** instance (including over private networks like Tailscale). The application prioritizes speed, privacy, and a professional "Google Translate" aesthetic.
+
+---
+
+## 2. Technical Stack
+* **Core Framework:** [Tauri](https://tauri.app/) (Rust backend for system-level API access).
+* **Frontend Framework:** [Vue 3](https://vuejs.org/) (Composition API).
+* **Styling:** [Tailwind CSS](https://tailwindcss.com/) (Minimalist, modern utility-first CSS).
+* **Package Manager:** `pnpm`.
+* **State Management:** [Pinia](https://pinia.vuejs.org/) (To persist user settings and prompt templates).
+* **Icons:** [Lucide Vue Next](https://lucide.dev/).
+
+---
+
+## 3. User Interface (UI) Requirements
+The UI should be **Modern, Minimalist, and Functional**, mimicking the clean layout of Google Translate.
+
+### 3.1 Main Translation Interface
+* **Split-Pane Layout:**
+    * **Left (Source):** Input text area with a header for language selection.
+    * **Right (Target):** Read-only text area for the translation result, with a header for the target language selection.
+* **Language Selection:** Dropdowns supporting both **Full Name** (e.g., English) and **ISO Code** (e.g., en).
+* **Actions:** * "Translate" button (with loading state).
+    * "Copy" button on the target pane.
+    * "Clear" button on the source pane.
+
+### 3.2 Settings View
+* **API Configuration:** A text input for the `Ollama API Address` (e.g., `http://100.x.y.z:11434`).
+* **Output Control:** A toggle switch for `Enable Streaming` (renders text as it is generated).
+* **Prompt Engineering:** A large text area for the `System Prompt Template`.
+
+---
+
+## 4. Functional Requirements
+
+### 4.1 Prompt Engineering Engine
+The application must dynamically inject variables into the user-provided template before sending the request to the Ollama API.
+
+**Default Template:**
+> You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
+> Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:
+> 
+> {TEXT}
+
+### 4.2 Template Variables
+The engine must support and correctly replace the following tokens:
+* `{SOURCE_LANG}`: Full name of the input language (e.g., "Chinese").
+* `{SOURCE_CODE}`: Short code of the input language (e.g., "zh-Hans").
+* `{TARGET_LANG}`: Full name of the output language (e.g., "English").
+* `{TARGET_CODE}`: Short code of the output language (e.g., "en").
+* `{TEXT}`: The actual content provided by the user.
+
+### 4.3 Ollama Integration
+* Support for the `/api/generate` endpoint.
+* Ability to handle both `stream: true` (progressive UI updates) and `stream: false` (batch updates).
+* Support for connecting to any valid URL provided in Settings, ensuring compatibility with Tailscale IPs.
+
+---
+
+## 5. Technical Implementation Details
+
+### 5.1 Language Mapping (Default Configuration)
+The application will provide a default list of languages:
+| Language | Code |
+| :--- | :--- |
+| English | en |
+| Chinese | zh-Hans |
+| Japanese | ja |
+| Spanish | es |
+| French | fr |
+| German | de |
+
+### 5.2 Persistence
+* All settings (API Address, Stream Toggle, and Custom Prompt Template) must be stored in the user's local application data folder to ensure they are remembered across restarts.
+
+---
+
+## 6. Success Metrics
+* **Connectivity:** Seamless communication with an Ollama instance over a Tailscale network.
+* **UX:** The "Streaming" mode should feel responsive with no UI lag during high-token-per-second generation.
+
+---
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -0,0 +1,26 @@
+[package]
+name = "gemmatrans-client"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "gemmatrans_client_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+tauri-plugin-http = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    {
+      "identifier": "http:default",
+      "allow": [{ "url": "http://*:*/**" }, { "url": "https://*:*/**" }]
+    }
+  ]
+}
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -0,0 +1,15 @@
+// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_http::init())
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    gemmatrans_client_lib::run()
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "gemmatrans-client",
+  "version": "0.1.0",
+  "identifier": "top.volan.gemmatrans-client",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "gemmatrans-client",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import './style.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(createPinia());
+app.mount('#app');
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -0,0 +1,53 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+
+export interface Language {
+  name: string;
+  code: string;
+}
+
+export const LANGUAGES: Language[] = [
+  { name: 'English', code: 'en' },
+  { name: 'Chinese', code: 'zh-Hans' },
+  { name: 'Japanese', code: 'ja' },
+  { name: 'Spanish', code: 'es' },
+  { name: 'French', code: 'fr' },
+  { name: 'German', code: 'de' },
+];
+
+export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
+Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:
+
+{TEXT}`;
+
+export const useSettingsStore = defineStore('settings', () => {
+  const ollamaApiAddress = useLocalStorage('ollama-api-address', 'http://localhost:11434');
+  const modelName = useLocalStorage('model-name', 'translategemma:12b');
+  const enableStreaming = useLocalStorage('enable-streaming', true);
+  const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE);
+  const sourceLang = useLocalStorage('source-lang', LANGUAGES[1]); // Default Chinese
+  const targetLang = useLocalStorage('target-lang', LANGUAGES[0]); // Default English
+
+  const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
+  
+  const addLog = (type: 'request' | 'response' | 'error', content: any) => {
+    logs.value.unshift({
+      timestamp: new Date().toLocaleTimeString(),
+      type,
+      content
+    });
+    if (logs.value.length > 20) logs.value.pop(); // Keep last 20 logs
+  };
+
+  return {
+    ollamaApiAddress,
+    modelName,
+    enableStreaming,
+    systemPromptTemplate,
+    sourceLang,
+    targetLang,
+    logs,
+    addLog
+  };
+});
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [vue(), tailwindcss()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));