ai-agent-router 0.2.2 → 0.2.4

package/dist/src/app/tokenizer/page.js

@@ -0,0 +1,318 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TokenizerPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Nav_1 = __importDefault(require("../components/Nav"));
+const ToastProvider_1 = require("../components/ToastProvider");
+const LANGUAGES = [
+    { value: '简体中文', label: '简体中文' },
+    { value: '英文', label: '英文' },
+    { value: '繁体中文', label: '繁体中文' },
+    { value: '日语', label: '日语' },
+    { value: '法语', label: '法语' },
+    { value: '西班牙语', label: '西班牙语' },
+];
+function TokenizerPage() {
+    const [activeTab, setActiveTab] = (0, react_1.useState)('test');
+    const [models, setModels] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [submitting, setSubmitting] = (0, react_1.useState)(null);
+    const [selectedModelId, setSelectedModelId] = (0, react_1.useState)('');
+    const [sourceLanguage, setSourceLanguage] = (0, react_1.useState)('简体中文');
+    const [targetLanguage, setTargetLanguage] = (0, react_1.useState)('英文');
+    const [testScope, setTestScope] = (0, react_1.useState)('both');
+    const [temperature, setTemperature] = (0, react_1.useState)('0');
+    const [topP, setTopP] = (0, react_1.useState)('1');
+    const [sourceText, setSourceText] = (0, react_1.useState)('');
+    const [targetText, setTargetText] = (0, react_1.useState)('');
+    const [sourceResult, setSourceResult] = (0, react_1.useState)(null);
+    const [targetResult, setTargetResult] = (0, react_1.useState)(null);
+    const [translationUsage, setTranslationUsage] = (0, react_1.useState)(null);
+    const [translationTimeMs, setTranslationTimeMs] = (0, react_1.useState)(null);
+    const [historyItems, setHistoryItems] = (0, react_1.useState)([]);
+    const [historyLoading, setHistoryLoading] = (0, react_1.useState)(false);
+    const { showToast } = (0, ToastProvider_1.useToast)();
+    (0, react_1.useEffect)(() => {
+        loadModels();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 'history') {
+            loadHistory();
+        }
+    }, [activeTab]);
+    const selectedModel = (0, react_1.useMemo)(() => models.find((model) => model.id === Number(selectedModelId)) || null, [models, selectedModelId]);
+    const loadModels = async () => {
+        try {
+            const res = await fetch('/api/models?enabled=true');
+            const data = await res.json();
+            setModels(Array.isArray(data) ? data : []);
+        }
+        catch (error) {
+            console.error('Failed to load tokenizer models:', error);
+            showToast('模型加载失败', 'error');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const loadHistory = async () => {
+        setHistoryLoading(true);
+        try {
+            const res = await fetch('/api/tokenizer/history?limit=50');
+            const data = await res.json();
+            if (!res.ok) {
+                throw new Error(data.error || '历史记录加载失败');
+            }
+            setHistoryItems(Array.isArray(data.logs) ? data.logs : []);
+        }
+        catch (error) {
+            console.error('Failed to load tokenizer history:', error);
+            showToast(error.message || '历史记录加载失败', 'error');
+        }
+        finally {
+            setHistoryLoading(false);
+        }
+    };
+    const canSubmit = Boolean(selectedModelId);
+    const parsedTemperature = Number(temperature);
+    const parsedTopP = Number(topP);
+    const createRequestBody = (payload) => ({
+        model_id: Number(selectedModelId),
+        mode: payload.mode,
+        source_language: payload.sourceLanguage,
+        target_language: payload.targetLanguage,
+        text: payload.text,
+        temperature: Number.isFinite(parsedTemperature) ? parsedTemperature : 0,
+        top_p: Number.isFinite(parsedTopP) ? parsedTopP : 1,
+    });
+    const runMeasure = async (side, text, language) => {
+        if (!canSubmit) {
+            showToast('请先选择模型', 'error');
+            return null;
+        }
+        if (!text.trim()) {
+            showToast(side === 'source' ? '请输入源语言文本' : '请输入目标语言文本', 'error');
+            return null;
+        }
+        try {
+            const res = await fetch('/api/tokenizer/test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(createRequestBody({
+                    mode: 'measure',
+                    sourceLanguage: language,
+                    text,
+                })),
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                throw new Error(data.error || '测试失败');
+            }
+            const result = {
+                text: data.text || '',
+                usage: data.usage,
+                response_time_ms: data.response_time_ms,
+            };
+            if (side === 'source') {
+                setSourceResult(result);
+            }
+            else {
+                setTargetResult(result);
+            }
+            showToast(side === 'source' ? '源语言测试完成' : '目标语言测试完成', 'success');
+            return result;
+        }
+        catch (error) {
+            console.error('Tokenizer measure failed:', error);
+            showToast(error.message || '测试失败', 'error');
+            return null;
+        }
+    };
+    const handleTranslate = async () => {
+        if (!canSubmit) {
+            showToast('请先选择模型', 'error');
+            return;
+        }
+        if (!sourceText.trim()) {
+            showToast('请输入源语言文本', 'error');
+            return;
+        }
+        setSubmitting('translate');
+        try {
+            const res = await fetch('/api/tokenizer/test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(createRequestBody({
+                    mode: 'translate',
+                    sourceLanguage,
+                    targetLanguage,
+                    text: sourceText,
+                })),
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                throw new Error(data.error || '翻译失败');
+            }
+            setTargetText(data.text || '');
+            setTranslationUsage(data.usage || null);
+            setTranslationTimeMs(data.response_time_ms || null);
+            setTargetResult(null);
+            await loadHistory();
+            showToast('翻译完成，已填入目标语言文本', 'success');
+        }
+        catch (error) {
+            console.error('Tokenizer translate failed:', error);
+            showToast(error.message || '翻译失败', 'error');
+        }
+        finally {
+            setSubmitting(null);
+        }
+    };
+    const handleRunTests = async () => {
+        if (!canSubmit) {
+            showToast('请先选择模型', 'error');
+            return;
+        }
+        if (testScope !== 'target' && !sourceText.trim()) {
+            showToast('请输入源语言文本', 'error');
+            return;
+        }
+        if (testScope !== 'source' && !targetText.trim()) {
+            showToast('请输入目标语言文本', 'error');
+            return;
+        }
+        setSubmitting('test');
+        try {
+            if (testScope === 'source') {
+                await runMeasure('source', sourceText, sourceLanguage);
+                setTargetResult(null);
+                await loadHistory();
+                return;
+            }
+            if (testScope === 'target') {
+                await runMeasure('target', targetText, targetLanguage);
+                setSourceResult(null);
+                await loadHistory();
+                return;
+            }
+            const sourcePromise = fetch('/api/tokenizer/test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(createRequestBody({
+                    mode: 'measure',
+                    sourceLanguage,
+                    text: sourceText,
+                })),
+            });
+            const targetPromise = fetch('/api/tokenizer/test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(createRequestBody({
+                    mode: 'measure',
+                    sourceLanguage: targetLanguage,
+                    text: targetText,
+                })),
+            });
+            const [sourceRes, targetRes] = await Promise.all([sourcePromise, targetPromise]);
+            const [sourceData, targetData] = await Promise.all([sourceRes.json(), targetRes.json()]);
+            if (!sourceRes.ok) {
+                throw new Error(sourceData.error || '源语言测试失败');
+            }
+            if (!targetRes.ok) {
+                throw new Error(targetData.error || '目标语言测试失败');
+            }
+            setSourceResult({
+                text: sourceData.text || '',
+                usage: sourceData.usage,
+                response_time_ms: sourceData.response_time_ms,
+            });
+            setTargetResult({
+                text: targetData.text || '',
+                usage: targetData.usage,
+                response_time_ms: targetData.response_time_ms,
+            });
+            await loadHistory();
+            showToast('双语言测试完成', 'success');
+        }
+        catch (error) {
+            console.error('Tokenizer compare failed:', error);
+            showToast(error.message || '测试失败', 'error');
+        }
+        finally {
+            setSubmitting(null);
+        }
+    };
+    const usageDelta = sourceResult && targetResult
+        ? targetResult.usage.total_tokens - sourceResult.usage.total_tokens
+        : null;
+    const compareTimeMs = (sourceResult?.response_time_ms || 0) + (targetResult?.response_time_ms || 0);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Nav_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: "min-h-screen flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "text-lg", children: "\u52A0\u8F7D\u4E2D..." }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Nav_1.default, {}), (0, jsx_runtime_1.jsx)("main", { className: "max-w-6xl mx-auto py-6 sm:px-6 lg:px-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-4 py-4 sm:px-0 space-y-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex rounded-xl border border-slate-200 bg-white/80 p-1 shadow-sm", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab('test'), className: `rounded-lg px-4 py-2 text-xs font-semibold transition-colors ${activeTab === 'test'
+                                        ? 'bg-emerald-600 text-white'
+                                        : 'text-slate-600 hover:bg-slate-100'}`, children: "\u5F00\u59CB\u6D4B\u8BD5" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab('history'), className: `rounded-lg px-4 py-2 text-xs font-semibold transition-colors ${activeTab === 'history'
+                                        ? 'bg-emerald-600 text-white'
+                                        : 'text-slate-600 hover:bg-slate-100'}`, children: "\u5386\u53F2\u8BB0\u5F55" })] }), activeTab === 'test' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("section", { className: "bg-white/75 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/60 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-lg font-bold text-slate-800", children: "Tokenizer" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 mt-1", children: "\u9009\u62E9\u6A21\u578B\u540E\uFF0C\u53EF\u4EE5\u5148\u7FFB\u8BD1\uFF0C\u518D\u9ED8\u8BA4\u4E00\u952E\u6D4B\u8BD5\u4E24\u79CD\u8BED\u8A00\u7684 token \u6D88\u8017\u3002" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3 lg:min-w-[620px]", children: [(0, jsx_runtime_1.jsx)(Field, { label: "\u6A21\u578B", children: (0, jsx_runtime_1.jsxs)("select", { value: selectedModelId, onChange: (e) => setSelectedModelId(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400", children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "\u8BF7\u9009\u62E9\u6A21\u578B" }), models.map((model) => ((0, jsx_runtime_1.jsxs)("option", { value: model.id, children: [model.provider_name ? `${model.provider_name} / ` : '', model.name] }, model.id)))] }) }), (0, jsx_runtime_1.jsx)(Field, { label: "\u6E90\u8BED\u8A00", children: (0, jsx_runtime_1.jsx)("select", { value: sourceLanguage, onChange: (e) => setSourceLanguage(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400", children: LANGUAGES.map((language) => ((0, jsx_runtime_1.jsx)("option", { value: language.value, children: language.label }, language.value))) }) }), (0, jsx_runtime_1.jsx)(Field, { label: "\u76EE\u6807\u8BED\u8A00", children: (0, jsx_runtime_1.jsx)("select", { value: targetLanguage, onChange: (e) => setTargetLanguage(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400", children: LANGUAGES.map((language) => ((0, jsx_runtime_1.jsx)("option", { value: language.value, children: language.label }, language.value))) }) })] })] }), selectedModel && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex flex-wrap items-center gap-2 text-[11px] text-slate-500", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-emerald-50 px-2.5 py-1 font-medium text-emerald-700", children: selectedModel.provider_name || 'Provider' }), (0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600", children: selectedModel.model_id })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-gradient-to-r from-emerald-50/80 via-white to-amber-50/60 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-sm font-bold text-slate-800", children: "\u7FFB\u8BD1\u4E0E\u5BF9\u6BD4" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 mt-1", children: "\u6D4B\u8BD5\u6A21\u5F0F\u9ED8\u8BA4\u662F\u5168\u90E8\u6D4B\u8BD5\uFF1B\u5982\u679C\u53EA\u60F3\u6D4B\u4E00\u4FA7\uFF0C\u53EF\u4EE5\u5148\u5207\u6362\u8303\u56F4\u518D\u6267\u884C\u3002" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3 xl:min-w-[520px]", children: [(0, jsx_runtime_1.jsx)(Field, { label: "\u6D4B\u8BD5\u8303\u56F4", children: (0, jsx_runtime_1.jsxs)("select", { value: testScope, onChange: (e) => setTestScope(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400", children: [(0, jsx_runtime_1.jsx)("option", { value: "both", children: "\u5168\u90E8\u6D4B\u8BD5" }), (0, jsx_runtime_1.jsx)("option", { value: "source", children: "\u4EC5\u6E90\u8BED\u8A00" }), (0, jsx_runtime_1.jsx)("option", { value: "target", children: "\u4EC5\u76EE\u6807\u8BED\u8A00" })] }) }), (0, jsx_runtime_1.jsx)(Field, { label: "Temperature", children: (0, jsx_runtime_1.jsx)("input", { type: "number", step: "0.1", min: "0", max: "2", value: temperature, onChange: (e) => setTemperature(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400" }) }), (0, jsx_runtime_1.jsx)(Field, { label: "Top P", children: (0, jsx_runtime_1.jsx)("input", { type: "number", step: "0.1", min: "0", max: "1", value: topP, onChange: (e) => setTopP(e.target.value), className: "block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleTranslate, disabled: !canSubmit || submitting !== null, className: "inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-700 shadow-sm", children: submitting === 'translate' ? '翻译中...' : `翻译为${targetLanguage}` }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRunTests, disabled: !canSubmit || submitting !== null, className: "inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-emerald-700 bg-white hover:bg-emerald-50 border border-emerald-200 shadow-sm", children: submitting === 'test'
+                                                                ? '测试中...'
+                                                                : testScope === 'both'
+                                                                    ? '开始全部测试'
+                                                                    : testScope === 'source'
+                                                                        ? '开始源语言测试'
+                                                                        : '开始目标语言测试' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3", children: [(0, jsx_runtime_1.jsx)(CompareCard, { title: "\u6E90\u8BED\u8A00\u603B\u8BA1", value: sourceResult?.usage.total_tokens, note: buildUsageNote(sourceResult), signed: false }), (0, jsx_runtime_1.jsx)(CompareCard, { title: "\u76EE\u6807\u8BED\u8A00\u603B\u8BA1", value: targetResult?.usage.total_tokens, note: buildUsageNote(targetResult), signed: false }), (0, jsx_runtime_1.jsx)(CompareCard, { title: "\u5DEE\u503C", value: usageDelta, note: usageDelta === null ? '等待两侧结果' : usageDelta >= 0 ? '目标语言更高' : '源语言更高', signed: true })] }), translationUsage && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-semibold text-slate-700", children: "\u6700\u8FD1\u4E00\u6B21\u7FFB\u8BD1\u6D88\u8017" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 mt-1", children: translationUsage.estimated ? 'Estimated token usage' : 'Exact usage from provider response' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold text-slate-800", children: translationUsage.total_tokens }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[11px] text-slate-500", children: ["Total tokens", translationTimeMs !== null ? ` · ${translationTimeMs} ms` : ''] })] })] }) }))] })] }), (0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-1 gap-5 xl:grid-cols-2", children: [(0, jsx_runtime_1.jsx)(LanguagePanel, { title: "\u6E90\u8BED\u8A00\u8F93\u5165", subtitle: "\u539F\u6587\u8F93\u5165\u533A", language: sourceLanguage, text: sourceText, onChange: setSourceText, result: sourceResult, accent: "emerald" }), (0, jsx_runtime_1.jsx)(LanguagePanel, { title: "\u76EE\u6807\u8BED\u8A00\u8F93\u5165", subtitle: "\u53EF\u624B\u52A8\u8F93\u5165\uFF0C\u6216\u4F7F\u7528\u7FFB\u8BD1\u7ED3\u679C", language: targetLanguage, text: targetText, onChange: setTargetText, result: targetResult, accent: "amber" })] })] })) : ((0, jsx_runtime_1.jsxs)("section", { className: "bg-white/75 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/60 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-sm font-bold text-slate-800", children: "\u5386\u53F2\u8BB0\u5F55" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 mt-1", children: "\u5C55\u793A\u6700\u8FD1 50 \u6761 Tokenizer \u8C03\u7528\u8BB0\u5F55\uFF0C\u5305\u62EC\u6A21\u5F0F\u3001token\u3001\u8017\u65F6\u548C\u6587\u672C\u6458\u8981\u3002" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: loadHistory, disabled: historyLoading, className: "inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200", children: historyLoading ? '刷新中...' : '刷新' })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-5 space-y-3", children: historyItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-4 py-10 text-center text-xs text-slate-400", children: "\u6682\u65E0\u6D4B\u8BD5\u8BB0\u5F55" })) : (historyItems.map((item) => ((0, jsx_runtime_1.jsxs)("article", { className: "rounded-xl border border-slate-200 bg-white/90 p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2 text-[11px]", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-emerald-50 px-2.5 py-1 font-medium text-emerald-700", children: item.mode === 'translate' ? '翻译' : '测试' }), item.provider_name && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600", children: item.provider_name })), item.model_id && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600", children: item.model_id })), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-400", children: formatDateTime(item.created_at) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-600", children: [item.source_language || '--', item.target_language ? ` -> ${item.target_language}` : '', item.response_time_ms !== null ? ` · ${item.response_time_ms} ms` : '', item.usage?.estimated ? ' · estimated' : ' · exact'] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2 min-w-[220px]", children: [(0, jsx_runtime_1.jsx)(MiniMetric, { label: "\u8F93\u5165", value: item.usage?.input_tokens }), (0, jsx_runtime_1.jsx)(MiniMetric, { label: "\u8F93\u51FA", value: item.usage?.output_tokens }), (0, jsx_runtime_1.jsx)(MiniMetric, { label: "\u603B\u8BA1", value: item.usage?.total_tokens })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 grid grid-cols-1 gap-3 xl:grid-cols-2", children: [(0, jsx_runtime_1.jsx)(HistoryTextBlock, { title: "\u8BF7\u6C42\u6587\u672C", content: item.source_text }), (0, jsx_runtime_1.jsx)(HistoryTextBlock, { title: "\u8FD4\u56DE\u6587\u672C", content: item.result_text })] })] }, item.id)))) })] }))] }) })] }));
+}
+function Field({ label, children, }) {
+    return ((0, jsx_runtime_1.jsxs)("label", { className: "block", children: [(0, jsx_runtime_1.jsx)("span", { className: "block text-xs font-semibold text-slate-700 mb-1.5", children: label }), children] }));
+}
+function LanguagePanel({ title, subtitle, language, text, onChange, result, accent, }) {
+    const accentClass = accent === 'emerald'
+        ? 'border-emerald-100/60 bg-white/75'
+        : 'border-amber-100/60 bg-white/75';
+    const buttonClass = accent === 'emerald'
+        ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
+        : 'bg-amber-500 hover:bg-amber-600 text-white';
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `backdrop-blur-sm shadow-md rounded-2xl border p-6 ${accentClass}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-sm font-bold text-slate-800", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-slate-500 mt-1", children: [language, " \u00B7 ", subtitle] })] }), (0, jsx_runtime_1.jsx)("div", { className: `inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold shadow-sm ${buttonClass}`, children: accent === 'emerald' ? 'Source' : 'Target' })] }), (0, jsx_runtime_1.jsx)("textarea", { value: text, onChange: (e) => onChange(e.target.value), rows: 8, placeholder: `请输入${language}文本`, className: "mt-4 block w-full rounded-xl border border-slate-200 bg-white/90 px-3 py-3 text-sm shadow-sm focus:border-emerald-400" }), result ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-3", children: [(0, jsx_runtime_1.jsx)(MetricCard, { label: "\u8F93\u5165", value: result.usage.input_tokens }), (0, jsx_runtime_1.jsx)(MetricCard, { label: "\u8F93\u51FA", value: result.usage.output_tokens }), (0, jsx_runtime_1.jsx)(MetricCard, { label: "\u603B\u8BA1", value: result.usage.total_tokens })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2 text-[11px]", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium text-slate-600", children: result.usage.estimated ? 'Estimated token usage' : 'Exact usage from provider response' }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-400", children: result.response_time_ms !== undefined ? `${result.response_time_ms} ms` : 'LLM 返回文本' })] }), (0, jsx_runtime_1.jsx)("pre", { className: "whitespace-pre-wrap break-words rounded-lg bg-white px-3 py-3 text-xs text-slate-700 border border-slate-200", children: result.text || '无返回文本' })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-4 py-6 text-xs text-slate-400", children: "\u8FD9\u91CC\u4F1A\u5C55\u793A token \u6D88\u8017\u548C\u6A21\u578B\u8FD4\u56DE\u6587\u672C\u3002" }))] }));
+}
+function MiniMetric({ label, value }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg bg-slate-50 border border-slate-200 px-3 py-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-slate-500", children: label }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-sm font-bold text-slate-800", children: value ?? '--' })] }));
+}
+function HistoryTextBlock({ title, content }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-slate-200 bg-slate-50/70 p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[11px] font-semibold text-slate-600", children: title }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-2 whitespace-pre-wrap break-words text-xs text-slate-700 max-h-40 overflow-auto", children: content || '无内容' })] }));
+}
+function formatDateTime(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+    return new Intl.DateTimeFormat('zh-CN', {
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(date);
+}
+function buildUsageNote(result) {
+    if (!result) {
+        return '等待结果';
+    }
+    const base = result.usage.estimated ? 'estimated' : 'exact';
+    return result.response_time_ms !== undefined
+        ? `${base} · ${result.response_time_ms} ms`
+        : base;
+}
+function MetricCard({ label, value }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg bg-white border border-slate-200 px-3 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-[11px] text-slate-500", children: [label, " token"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-lg font-bold text-slate-800", children: value })] }));
+}
+function CompareCard({ title, value, note, signed = false, suffix, }) {
+    const renderedValue = value === null || value === undefined
+        ? '--'
+        : signed && value > 0
+            ? `+${value}${suffix ? ` ${suffix}` : ''}`
+            : `${value}${suffix ? ` ${suffix}` : ''}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-xl border border-slate-200 bg-slate-50/80 p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-semibold text-slate-600", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-2xl font-bold text-slate-800", children: renderedValue }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-[11px] text-slate-400", children: note })] }));
+}

package/dist/src/cli/index.js

@@ -111,7 +111,7 @@ program
     const gatewayScriptPath = path_1.default.join(packageRoot, 'dist', 'src', 'cli', 'gateway-server.js');
     if (background) {
         ensureAarDir();
-        const envBase = { ...process.env, NODE_ENV: 'production' };
+        const envBase = { ...process.env, NODE_ENV: 'production', SQLJS_WASM_PATH: (0, database_1.getSqlJsWasmPath)() };
         const uiProc = (0, child_process_1.spawn)(process.execPath, [serverPath, 'start', '-p', uiPort.toString()], {
             cwd: packageRoot,
             env: { ...envBase, PORT: uiPort.toString() },
@@ -157,7 +157,7 @@ program
     const uiProcess = (0, child_process_1.spawn)(process.execPath, [serverPath, 'start', '-p', uiPort.toString()], {
         cwd: packageRoot,
         stdio: ['ignore', 'inherit', 'inherit'],
-        env: { ...process.env, PORT: uiPort.toString(), NODE_ENV: 'production' },
+        env: { ...process.env, PORT: uiPort.toString(), NODE_ENV: 'production', SQLJS_WASM_PATH: (0, database_1.getSqlJsWasmPath)() },
     });
     uiProcess.on('error', (error) => {
         console.error(`Failed to start Web UI: ${error.message}`);
@@ -167,7 +167,7 @@ program
         ? (0, child_process_1.spawn)(process.execPath, [gatewayScriptPath, '--port', String(gatewayPort)], {
             cwd: packageRoot,
             stdio: ['ignore', 'pipe', 'pipe'],
-            env: { ...process.env, NODE_ENV: 'production' },
+            env: { ...process.env, NODE_ENV: 'production', SQLJS_WASM_PATH: (0, database_1.getSqlJsWasmPath)() },
         })
         : null;
     if (gatewayProcess?.stdout) {

package/dist/src/db/database.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSqlJsWasmPath = getSqlJsWasmPath;
 exports.getDatabase = getDatabase;
 exports.closeDatabase = closeDatabase;
 exports.getDbPath = getDbPath;
@@ -22,28 +23,25 @@ const DB_PATH = process.env.DB_PATH || path_1.default.join(os_1.default.homedir(
 function generateRandomApiKey() {
     return `aar-${crypto_1.default.randomBytes(16).toString('hex')}`;
 }
-// Use hardcoded path for the built/distributed WASM file
-// Next.js copies sql-wasm.wasm to its chunks directory
-function findSqlJsWasmPath() {
-    // Try Next.js chunks directory first (works in dev and production)
-    const nextChunksPath = path_1.default.join(process.cwd(), '.next', 'dev', 'server', 'chunks', 'sql-wasm.wasm');
-    if (fs_1.default.existsSync(nextChunksPath)) {
-        return nextChunksPath;
-    }
-    // Try production .next directory
-    const prodChunksPath = path_1.default.join(process.cwd(), '.next', 'server', 'chunks', 'sql-wasm.wasm');
-    if (fs_1.default.existsSync(prodChunksPath)) {
-        return prodChunksPath;
-    }
-    // Try node_modules as fallback
-    const nodeModulesPath = path_1.default.join(process.cwd(), 'node_modules', 'sql.js', 'dist', 'sql-wasm.wasm');
-    if (fs_1.default.existsSync(nodeModulesPath)) {
-        return nodeModulesPath;
+// sql.js WASM 路径解析（支持 CLI 全局安装、本地开发、Next.js 进程）
+let _wasmPath = null;
+function getSqlJsWasmPath() {
+    if (!_wasmPath) {
+        // 1. 优先使用环境变量（CLI 启动的 Next.js 进程）
+        if (process.env.SQLJS_WASM_PATH) {
+            _wasmPath = process.env.SQLJS_WASM_PATH;
+        }
+        // 2. Next.js 开发/生产模式：使用 cwd 相对路径
+        else if (fs_1.default.existsSync(path_1.default.join(process.cwd(), 'node_modules', 'sql.js', 'dist', 'sql-wasm.wasm'))) {
+            _wasmPath = path_1.default.join(process.cwd(), 'node_modules', 'sql.js', 'dist', 'sql-wasm.wasm');
+        }
+        // 3. CLI 模式（tsc 编译后）：通过 require.resolve 定位
+        else {
+            _wasmPath = path_1.default.join(path_1.default.dirname(require.resolve('sql.js')), 'sql-wasm.wasm');
+        }
     }
-    // Use the most likely location as default
-    return nodeModulesPath;
+    return _wasmPath;
 }
-const SQLJS_WASM_PATH = findSqlJsWasmPath();
 let dbInstance = null;
 let sqlJsInstance = null;
 let lastLoadMtimeMs = 0;
@@ -70,7 +68,7 @@ async function initSqlJsEngine() {
         sqlJsInstance = await (0, sql_js_1.default)({
             locateFile: (file) => {
                 if (file.endsWith('.wasm')) {
-                    return SQLJS_WASM_PATH;
+                    return getSqlJsWasmPath();
                 }
                 return `https://sql.js.org/dist/${file}`;
             }

package/dist/src/db/queries.js

@@ -20,6 +20,8 @@ exports.getRequestLogById = getRequestLogById;
 exports.getRequestLogCount = getRequestLogCount;
 exports.deleteRequestLogs = deleteRequestLogs;
 exports.deleteAllRequestLogs = deleteAllRequestLogs;
+exports.getTokenizerLogs = getTokenizerLogs;
+exports.getTokenizerLogCount = getTokenizerLogCount;
 exports.getConfig = getConfig;
 exports.setConfig = setConfig;
 exports.getAllConfig = getAllConfig;
@@ -294,6 +296,25 @@ async function deleteAllRequestLogs() {
     const result = await (0, database_1.run)('DELETE FROM request_logs');
     return result.changes;
 }
+async function getTokenizerLogs(limit = 50, offset = 0) {
+    return await (0, database_1.queryAll)(`
+    SELECT l.*, m.name as model_name, m.model_id, p.name as provider_name
+    FROM request_logs l
+    LEFT JOIN models m ON l.model_id = m.id
+    LEFT JOIN providers p ON m.provider_id = p.id
+    WHERE l.request_path = '/tokenizer/test'
+    ORDER BY l.created_at DESC
+    LIMIT ? OFFSET ?
+  `, [limit, offset]);
+}
+async function getTokenizerLogCount() {
+    const result = await (0, database_1.queryOne)(`
+    SELECT COUNT(*) as count
+    FROM request_logs
+    WHERE request_path = '/tokenizer/test'
+  `);
+    return result?.count || 0;
+}
 // Config queries
 async function getConfig(key) {
     return await (0, database_1.queryOne)('SELECT * FROM config WHERE key = ?', [key]);