From f4247045244c7dd0823a1a47953cb67a0da3956c Mon Sep 17 00:00:00 2001 From: openhands Date: Wed, 21 May 2025 16:34:36 +0000 Subject: [PATCH] Fix API compatibility and streaming issues 1. Improved custom API compatibility with better response format handling 2. Enhanced OpenAI translation with configurable model and API endpoint 3. Fixed streaming output functionality 4. Updated next.config.mjs with proper API routing and security headers 5. Added timeout configuration for large text translations --- components/OpenAISettings.tsx | 149 ++++++++ components/TranslationInput.tsx | 241 +++++++++--- components/TranslationServices.tsx | 45 ++- next.config.mjs | 34 ++ pages/api/translate-stream.ts | 580 +++++++++++++++++++++++++++++ pages/api/translate.ts | 173 +++++++-- 6 files changed, 1122 insertions(+), 100 deletions(-) create mode 100644 components/OpenAISettings.tsx create mode 100644 pages/api/translate-stream.ts diff --git a/components/OpenAISettings.tsx b/components/OpenAISettings.tsx new file mode 100644 index 0000000..59d94ac --- /dev/null +++ b/components/OpenAISettings.tsx @@ -0,0 +1,149 @@ +import { useState, useEffect } from "react"; +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + Button, + FormControl, + FormLabel, + Input, + VStack, + useToast, + Text, + Box, + Divider, +} from "@chakra-ui/react"; + +interface OpenAISettingsProps { + isOpen: boolean; + onClose: () => void; +} + +const OpenAISettings = ({ isOpen, onClose }: OpenAISettingsProps) => { + const [apiKey, setApiKey] = useState(""); + const [model, setModel] = useState("gpt-4o-mini"); + const [endpoint, setEndpoint] = useState("https://api.openai.com/v1/chat/completions"); + const toast = useToast(); + + // 加载保存的设置 + useEffect(() => { + if (isOpen) { + const savedApiKey = localStorage.getItem("openai_api_key") || ""; + const savedModel = localStorage.getItem("openai_model") || "gpt-4o-mini"; + const savedEndpoint = localStorage.getItem("openai_endpoint") || "https://api.openai.com/v1/chat/completions"; + + setApiKey(savedApiKey); + setModel(savedModel); + setEndpoint(savedEndpoint); + } + }, [isOpen]); + + const handleSave = () => { + // 保存到localStorage + localStorage.setItem("openai_api_key", apiKey); + localStorage.setItem("openai_model", model); + localStorage.setItem("openai_endpoint", endpoint); + + // 更新环境变量（通过前端无法直接修改环境变量，这里只是模拟） + // 实际上这些值会在API请求时从localStorage中读取 + window.sessionStorage.setItem("OPENAI_API_KEY", apiKey); + window.sessionStorage.setItem("OPENAI_MODEL", model); + window.sessionStorage.setItem("OPENAI_ENDPOINT", endpoint); + + toast({ + title: "设置已保存", + description: "OpenAI设置已成功保存。", + status: "success", + duration: 3000, + isClosable: true, + position: "top", + }); + + onClose(); + }; + + return ( + + + + OpenAI设置 + + + + + 配置OpenAI翻译服务的API密钥、模型和端点。这些设置将保存在浏览器中，不会上传到服务器。 + + + + + + API密钥 + setApiKey(e.target.value)} + bg="gray.700" + borderColor="gray.600" + /> + + + + 模型 + setModel(e.target.value)} + bg="gray.700" + borderColor="gray.600" + /> + + + + API端点 + setEndpoint(e.target.value)} + bg="gray.700" + borderColor="gray.600" + /> + + + + + 常用模型: + + + - gpt-4o-mini (OpenAI) + + + - gpt-3.5-turbo (OpenAI) + + + - gpt-4o (OpenAI) + + + - claude-3-opus-20240229 (Anthropic) + + + + + + + + + + + ); +}; + +export default OpenAISettings; \ No newline at end of file diff --git a/components/TranslationInput.tsx b/components/TranslationInput.tsx index 0768fba..dd47d4a 100644 --- a/components/TranslationInput.tsx +++ b/components/TranslationInput.tsx @@ -1,6 +1,6 @@ "use client"; -import { Box, VStack, Textarea, Select, Button, Spinner, HStack, Grid, GridItem, Collapse, Flex, useToast, Text, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon } from "@chakra-ui/react"; +import { Box, VStack, Textarea, Select, Button, Spinner, HStack, Grid, GridItem, Collapse, Flex, useToast, Text, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, Switch, FormControl, FormLabel } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import axios from "axios"; import { useTranslationContext } from "../contexts/TranslationContext"; @@ -14,10 +14,20 @@ const TranslationInput = () => { const [sourceLang, setSourceLang] = useState("auto"); const [targetLang, setTargetLang] = useState("en"); const { services, customAPIs, addHistory } = useTranslationContext(); - const [translations, setTranslations] = useState<{ service: string; text: string; name: string }[]>([]); + const [translations, setTranslations] = useState<{ service: string; text: string; name: string; streaming?: boolean }[]>([]); const [loading, setLoading] = useState(false); + const [useStreaming, setUseStreaming] = useState(true); const toast = useToast(); + // 获取OpenAI配置 + const getOpenAIConfig = () => { + return { + apiKey: localStorage.getItem("openai_api_key") || "", + model: localStorage.getItem("openai_model") || "gpt-4o-mini", + endpoint: localStorage.getItem("openai_endpoint") || "https://api.openai.com/v1/chat/completions" + }; + }; + const handleTranslate = async () => { if (services.length === 0) { toast({ @@ -34,58 +44,173 @@ const TranslationInput = () => { setLoading(true); setTranslations([]); - try { - const promises = services.map(service => - axios.post("/api/translate", { - text, - sourceLang: sourceLang === "auto" ? "" : sourceLang, - targetLang, - service, - customAPIs, - }) - ); - - const results = await Promise.all(promises); - const newTranslations = results.map((res, index) => ({ - service: services[index], - text: res.data.translatedText, - name: getServiceName(services[index]), - })); - setTranslations(newTranslations); - - // 添加到历史记录 - newTranslations.forEach(t => { - addHistory({ - id: uuidv4(), - inputText: text, - sourceLang, - targetLang, - service: t.service, - translatedText: t.text, - timestamp: new Date().toISOString(), + // 初始化每个服务的翻译结果 + const initialTranslations = services.map(service => ({ + service, + text: useStreaming ? "" : "翻译中...", + name: getServiceName(service), + streaming: useStreaming + })); + setTranslations(initialTranslations); + + // 获取OpenAI配置 + const openAIConfig = getOpenAIConfig(); + + if (useStreaming) { + // 使用流式输出 + services.forEach((service, index) => { + const eventSource = new EventSource(`/api/translate-stream?dummy=${Date.now()}`); + + // 发送初始请求数据 + fetch('/api/translate-stream', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + text, + sourceLang: sourceLang === "auto" ? "" : sourceLang, + targetLang, + service, + customAPIs, + openAIConfig, + }), + }).catch(error => { + console.error('流式请求发送失败:', error); + setTranslations(prev => + prev.map((t, i) => + i === index ? { ...t, text: `翻译失败: ${error.message}` } : t + ) + ); + eventSource.close(); }); - }); - toast({ - title: "翻译成功", - description: "您的文本已成功翻译。", - status: "success", - duration: 3000, - isClosable: true, - position: "top", + let fullText = ""; + + eventSource.onmessage = (event) => { + if (event.data === "[DONE]") { + eventSource.close(); + + // 添加到历史记录 + addHistory({ + id: uuidv4(), + inputText: text, + sourceLang, + targetLang, + service, + translatedText: fullText, + timestamp: new Date().toISOString(), + }); + + if (index === services.length - 1) { + setLoading(false); + toast({ + title: "翻译成功", + description: "您的文本已成功翻译。", + status: "success", + duration: 3000, + isClosable: true, + position: "top", + }); + } + return; + } + + try { + const data = JSON.parse(event.data); + if (data.error) { + setTranslations(prev => + prev.map((t, i) => + i === index ? { ...t, text: `翻译失败: ${data.error}` } : t + ) + ); + eventSource.close(); + return; + } + + if (data.text) { + fullText += data.text; + setTranslations(prev => + prev.map((t, i) => + i === index ? { ...t, text: fullText } : t + ) + ); + } + } catch (error) { + console.error('解析流数据失败:', error); + } + }; + + eventSource.onerror = (error) => { + console.error('流式请求错误:', error); + setTranslations(prev => + prev.map((t, i) => + i === index ? { ...t, text: `翻译失败: 连接错误` } : t + ) + ); + eventSource.close(); + + if (index === services.length - 1) { + setLoading(false); + } + }; }); - } catch (error: any) { - console.error(error); - toast({ - title: "翻译失败", - description: error.response?.data?.error || "翻译失败，请稍后重试。", - status: "error", - duration: 3000, - isClosable: true, - position: "top", - }); - } finally { - setLoading(false); + } else { + // 使用普通请求 + try { + const promises = services.map(service => + axios.post("/api/translate", { + text, + sourceLang: sourceLang === "auto" ? "" : sourceLang, + targetLang, + service, + customAPIs, + openAIConfig, + }) + ); + + const results = await Promise.all(promises); + const newTranslations = results.map((res, index) => ({ + service: services[index], + text: res.data.translatedText, + name: getServiceName(services[index]), + })); + setTranslations(newTranslations); + + // 添加到历史记录 + newTranslations.forEach(t => { + addHistory({ + id: uuidv4(), + inputText: text, + sourceLang, + targetLang, + service: t.service, + translatedText: t.text, + timestamp: new Date().toISOString(), + }); + }); + + toast({ + title: "翻译成功", + description: "您的文本已成功翻译。", + status: "success", + duration: 3000, + isClosable: true, + position: "top", + }); + } catch (error: any) { + console.error(error); + toast({ + title: "翻译失败", + description: error.response?.data?.error || "翻译失败，请稍后重试。", + status: "error", + duration: 3000, + isClosable: true, + position: "top", + }); + } finally { + setLoading(false); + } } }; @@ -180,6 +305,20 @@ const TranslationInput = () => { p={4} /> + + + + 流式输出 + + setUseStreaming(e.target.checked)} + colorScheme="brand" + /> + + + + + {/* OpenAI设置模态框 */} + ); }; diff --git a/next.config.mjs b/next.config.mjs index 61cd5ed..2371a33 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,6 +1,40 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, + async rewrites() { + return [ + { + source: '/api/:path*', + destination: '/api/:path*', + }, + ]; + }, + // 允许在iframe中使用和跨域请求 + headers: async () => { + return [ + { + source: '/:path*', + headers: [ + { + key: 'X-Frame-Options', + value: 'ALLOWALL', + }, + { + key: 'Access-Control-Allow-Origin', + value: '*', + }, + { + key: 'Access-Control-Allow-Methods', + value: 'GET, POST, PUT, DELETE, OPTIONS', + }, + { + key: 'Access-Control-Allow-Headers', + value: 'X-Requested-With, Content-Type, Authorization', + }, + ], + }, + ]; + }, }; export default nextConfig; diff --git a/pages/api/translate-stream.ts b/pages/api/translate-stream.ts new file mode 100644 index 0000000..a75ff41 --- /dev/null +++ b/pages/api/translate-stream.ts @@ -0,0 +1,580 @@ +import type { NextApiRequest, NextApiResponse } from "next"; +import axios from "axios"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + if (req.method !== "POST") { + res.status(405).json({ error: "Method not allowed" }); + return; + } + + const { text, sourceLang, targetLang, service, customAPIs, openAIConfig } = req.body; + + if (!text || !targetLang || !service) { + res.status(400).json({ error: "Missing parameters" }); + return; + } + + // 设置响应头，支持流式输出 + res.setHeader('Content-Type', 'text/event-stream'); + res.setHeader('Cache-Control', 'no-cache'); + res.setHeader('Connection', 'keep-alive'); + + try { + if (service.startsWith("custom_")) { + const customAPI = customAPIs.find((api: any) => api.id === service); + if (customAPI) { + await streamWithCustomAPI(text, sourceLang, targetLang, customAPI, res); + } else { + throw new Error("未找到自定义API配置"); + } + } else if (service === "openai") { + await streamWithOpenAI(text, sourceLang, targetLang, res, openAIConfig); + } else { + // 对于不支持流式输出的服务，使用普通方式获取结果后模拟流式输出 + let translatedText = ""; + + switch (service) { + case "google": + translatedText = await translateWithGoogle(text, sourceLang, targetLang); + break; + case "tongyi": + translatedText = await translateWithTongyi(text, sourceLang, targetLang); + break; + case "deepl": + translatedText = await translateWithDeepL(text, sourceLang, targetLang); + break; + case "siliconflow": + translatedText = await translateWithSiliconFlow(text, sourceLang, targetLang); + break; + case "deepseek": + translatedText = await translateWithDeepSeek(text, sourceLang, targetLang); + break; + default: + throw new Error("未知的翻译服务"); + } + + // 模拟流式输出 + simulateStreamOutput(translatedText, res); + } + } catch (error: any) { + // 发送错误消息 + res.write(`data: ${JSON.stringify({ error: error.message || "内部服务器错误" })}\n\n`); + res.end(); + } +} + +// 模拟流式输出 +const simulateStreamOutput = (text: string, res: NextApiResponse) => { + const chunks = text.split(' '); + let index = 0; + + // 每100ms发送一个单词，模拟流式输出 + const interval = setInterval(() => { + if (index < chunks.length) { + const chunk = chunks[index]; + res.write(`data: ${JSON.stringify({ text: chunk + ' ' })}\n\n`); + index++; + } else { + clearInterval(interval); + res.write(`data: [DONE]\n\n`); + res.end(); + } + }, 100); + + // 确保请求关闭时清除定时器 + res.on('close', () => { + clearInterval(interval); + res.end(); + }); +}; + +// OpenAI流式输出 +const streamWithOpenAI = async (text: string, source: string, target: string, res: NextApiResponse, openAIConfig?: any) => { + // 从环境变量或配置中获取API密钥和设置 + let apiKey = process.env.OPENAI_API_KEY || ""; + let model = process.env.OPENAI_MODEL || "gpt-4o-mini"; + let endpoint = process.env.OPENAI_ENDPOINT || "https://api.openai.com/v1/chat/completions"; + + // 如果提供了配置，则使用配置中的值 + if (openAIConfig) { + if (openAIConfig.apiKey) apiKey = openAIConfig.apiKey; + if (openAIConfig.model) model = openAIConfig.model; + if (openAIConfig.endpoint) endpoint = openAIConfig.endpoint; + } + + if (!apiKey) { + throw new Error("OpenAI API 密钥未配置"); + } + + const data = { + model: model, + messages: [ + { + role: "system", + content: "你是一个专业的翻译助手，请准确翻译用户提供的文本，保持原文的意思、风格和格式。只返回翻译后的文本，不要添加解释或其他内容。" + }, + { + role: "user", + content: `请将以下文本从${source || "自动检测"}翻译成${target}语言：\n\n${text}`, + }, + ], + stream: true, + max_tokens: 4000, // 增加最大token数，避免长文本被截断 + temperature: 0.1, // 降低温度，使翻译更准确 + }; + + try { + const response = await axios.post(endpoint, data, { + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json' + }, + responseType: 'stream', + timeout: 120000 // 增加超时时间到2分钟 + }); + + response.data.on('data', (chunk: Buffer) => { + const lines = chunk.toString().split('\n').filter(line => line.trim() !== ''); + + for (const line of lines) { + if (line.includes('[DONE]')) { + res.write(`data: [DONE]\n\n`); + continue; + } + + if (line.startsWith('data: ')) { + try { + // 处理特殊情况：有些API返回的不是JSON + if (line.substring(6).trim() === '[DONE]') { + res.write(`data: [DONE]\n\n`); + continue; + } + + const data = JSON.parse(line.substring(6)); + + // 处理标准OpenAI流式响应格式 + if (data.choices && data.choices.length > 0) { + const choice = data.choices[0]; + + // 处理delta格式 + if (choice.delta && choice.delta.content) { + res.write(`data: ${JSON.stringify({ text: choice.delta.content })}\n\n`); + } + // 处理message格式 + else if (choice.message && choice.message.content) { + res.write(`data: ${JSON.stringify({ text: choice.message.content })}\n\n`); + } + // 处理text格式 + else if (choice.text) { + res.write(`data: ${JSON.stringify({ text: choice.text })}\n\n`); + } + // 处理content格式 + else if (choice.content) { + res.write(`data: ${JSON.stringify({ text: choice.content })}\n\n`); + } + } + // 处理其他可能的流式响应格式 + else if (data.text) { + res.write(`data: ${JSON.stringify({ text: data.text })}\n\n`); + } + else if (data.content) { + res.write(`data: ${JSON.stringify({ text: data.content })}\n\n`); + } + else if (data.chunk) { + res.write(`data: ${JSON.stringify({ text: data.chunk })}\n\n`); + } + else if (data.token) { + res.write(`data: ${JSON.stringify({ text: data.token })}\n\n`); + } + else if (typeof data === 'string') { + res.write(`data: ${JSON.stringify({ text: data })}\n\n`); + } + } catch (e) { + console.error('解析流数据失败:', e, '原始数据:', line.substring(6)); + // 尝试直接发送文本 + try { + res.write(`data: ${JSON.stringify({ text: line.substring(6) })}\n\n`); + } catch (err) { + console.error('发送流数据失败:', err); + } + } + } + } + }); + + response.data.on('end', () => { + // 确保发送结束标记 + res.write(`data: [DONE]\n\n`); + res.end(); + }); + + response.data.on('error', (err: Error) => { + console.error('流处理错误:', err); + res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`); + res.write(`data: [DONE]\n\n`); + res.end(); + }); + + // 设置超时处理 + setTimeout(() => { + if (!res.writableEnded) { + console.error('流处理超时'); + res.write(`data: ${JSON.stringify({ error: "请求超时，请尝试减少文本长度或使用非流式输出" })}\n\n`); + res.write(`data: [DONE]\n\n`); + res.end(); + } + }, 110000); // 设置比请求超时略短的时间 + + } catch (error: any) { + console.error('OpenAI流式请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message || '请求失败，请检查API配置'}`); + } +}; + +// 自定义API流式输出 +const streamWithCustomAPI = async (text: string, source: string, target: string, customAPI: any, res: NextApiResponse) => { + const data = { + model: customAPI.model || "gpt-3.5-turbo", + messages: [ + { + role: "system", + content: "你是一个专业的翻译助手，请准确翻译用户提供的文本，保持原文的意思、风格和格式。只返回翻译后的文本，不要添加解释或其他内容。" + }, + { + role: "user", + content: `请将以下文本从${source || "自动检测"}翻译成${target}语言：\n\n${text}`, + }, + ], + stream: true, + max_tokens: 4000, // 增加最大token数，避免长文本被截断 + temperature: 0.1, // 降低温度，使翻译更准确 + }; + + try { + const response = await axios.post(customAPI.endpoint, data, { + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${customAPI.apiKey}`, + 'Content-Type': 'application/json' + }, + responseType: 'stream', + timeout: 120000 // 增加超时时间到2分钟 + }); + + response.data.on('data', (chunk: Buffer) => { + const lines = chunk.toString().split('\n').filter(line => line.trim() !== ''); + + for (const line of lines) { + if (line.includes('[DONE]')) { + res.write(`data: [DONE]\n\n`); + continue; + } + + if (line.startsWith('data: ')) { + try { + // 处理特殊情况：有些API返回的不是JSON + if (line.substring(6).trim() === '[DONE]') { + res.write(`data: [DONE]\n\n`); + continue; + } + + const data = JSON.parse(line.substring(6)); + + // 处理标准OpenAI流式响应格式 + if (data.choices && data.choices.length > 0) { + const choice = data.choices[0]; + + // 处理delta格式 + if (choice.delta && choice.delta.content) { + res.write(`data: ${JSON.stringify({ text: choice.delta.content })}\n\n`); + } + // 处理message格式 + else if (choice.message && choice.message.content) { + res.write(`data: ${JSON.stringify({ text: choice.message.content })}\n\n`); + } + // 处理text格式 + else if (choice.text) { + res.write(`data: ${JSON.stringify({ text: choice.text })}\n\n`); + } + // 处理content格式 + else if (choice.content) { + res.write(`data: ${JSON.stringify({ text: choice.content })}\n\n`); + } + } + // 处理其他可能的流式响应格式 + else if (data.text) { + res.write(`data: ${JSON.stringify({ text: data.text })}\n\n`); + } + else if (data.content) { + res.write(`data: ${JSON.stringify({ text: data.content })}\n\n`); + } + else if (data.chunk) { + res.write(`data: ${JSON.stringify({ text: data.chunk })}\n\n`); + } + else if (data.token) { + res.write(`data: ${JSON.stringify({ text: data.token })}\n\n`); + } + else if (typeof data === 'string') { + res.write(`data: ${JSON.stringify({ text: data })}\n\n`); + } + } catch (e) { + console.error('解析流数据失败:', e, '原始数据:', line.substring(6)); + // 尝试直接发送文本 + try { + res.write(`data: ${JSON.stringify({ text: line.substring(6) })}\n\n`); + } catch (err) { + console.error('发送流数据失败:', err); + } + } + } + } + }); + + response.data.on('end', () => { + // 确保发送结束标记 + res.write(`data: [DONE]\n\n`); + res.end(); + }); + + response.data.on('error', (err: Error) => { + console.error('流处理错误:', err); + res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`); + res.write(`data: [DONE]\n\n`); + res.end(); + }); + + // 设置超时处理 + setTimeout(() => { + if (!res.writableEnded) { + console.error('流处理超时'); + res.write(`data: ${JSON.stringify({ error: "请求超时，请尝试减少文本长度或使用非流式输出" })}\n\n`); + res.write(`data: [DONE]\n\n`); + res.end(); + } + }, 110000); // 设置比请求超时略短的时间 + + } catch (error: any) { + console.error('自定义API流式请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message || '请求失败，请检查API配置'}`); + } +}; + +// 以下是从translate.ts复制的非流式翻译函数 +// 渠道: 谷歌翻译 +const translateWithGoogle = async (text: string, source: string, target: string): Promise => { + const { Translate } = require('@google-cloud/translate').v2; + + const projectId = process.env.GOOGLE_CLOUD_PROJECT_ID; + const keyFilename = process.env.GOOGLE_CLOUD_KEYFILE; + + if (!projectId || !keyFilename) { + throw new Error("Google Cloud 项目ID或密钥文件路径未配置"); + } + + const translate = new Translate({ projectId, keyFilename }); + + try { + const [translation] = await translate.translate(text, { + from: source, + to: target, + }); + return translation; + } catch (error: any) { + console.error('谷歌翻译请求失败:', error); + throw new Error(`翻译失败: ${error.message}`); + } +}; + +// 渠道: 通义千问 +const translateWithTongyi = async (text: string, source: string, target: string): Promise => { + const apiKey = process.env.TONGYI_API_KEY; + + if (!apiKey) { + throw new Error("通义千问 API 密钥未配置"); + } + + const data = { + model: "qwen-turbo", + input: { + messages: [ + { + role: "user", + content: `请将以下文本从${source}翻译成${target}语言：${text}`, + }, + ], + }, + }; + + const config = { + method: 'post', + url: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation', + headers: { + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json' + }, + data: data, + }; + + try { + const response = await axios(config); + + if ( + response.data && + response.data.output && + response.data.output.text + ) { + const translatedText = response.data.output.text.trim(); + return translatedText; + } else { + throw new Error("无效的响应结构"); + } + } catch (error: any) { + console.error('通义千问翻译请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message}`); + } +}; + +// 渠道: DeepL +const translateWithDeepL = async (text: string, source: string, target: string): Promise => { + const apiKey = process.env.DEEPL_API_KEY; + + if (!apiKey) { + throw new Error("DeepL API 密钥未配置"); + } + + const data = new URLSearchParams({ + text: text, + source_lang: source.toUpperCase(), + target_lang: target.toUpperCase(), + }); + + const config = { + method: 'post', + url: 'https://api-free.deepl.com/v2/translate', + headers: { + 'Authorization': `DeepL-Auth-Key ${apiKey}`, + 'Content-Type': 'application/x-www-form-urlencoded' + }, + data: data, + }; + + try { + const response = await axios(config); + + if ( + response.data && + response.data.translations && + response.data.translations.length > 0 && + response.data.translations[0].text + ) { + const translatedText = response.data.translations[0].text.trim(); + return translatedText; + } else { + throw new Error("无效的响应结构"); + } + } catch (error: any) { + console.error('DeepL翻译请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.message || error.message}`); + } +}; + +// 渠道: 硅基流动 +const translateWithSiliconFlow = async (text: string, source: string, target: string): Promise => { + const apiKey = process.env.SILICONFLOW_API_KEY; + + if (!apiKey) { + throw new Error("硅基流动 API 密钥未配置"); + } + + const data = { + model: "Qwen/Qwen2.5-32B-Instruct", + messages: [ + { + role: "user", + content: `请将以下文本从${source}翻译成${target}语言：${text}`, + }, + ], + }; + + const config = { + method: 'post', + url: 'https://api.siliconflow.cn/v1/chat/completions', + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json' + }, + data: data, + }; + + try { + const response = await axios(config); + + if ( + response.data && + response.data.choices && + response.data.choices.length > 0 && + response.data.choices[0].message && + response.data.choices[0].message.content + ) { + const translatedText = response.data.choices[0].message.content.trim(); + return translatedText; + } else { + throw new Error("无效的响应结构"); + } + } catch (error: any) { + console.error('硅基流动翻译请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message}`); + } +}; + +// 渠道: 深度求索 +const translateWithDeepSeek = async (text: string, source: string, target: string): Promise => { + const apiKey = process.env.DEEPSEEK_API_KEY; + + if (!apiKey) { + throw new Error("DeepSeek API 密钥未配置"); + } + + const data = { + model: "deepseek-chat", + messages: [ + { + role: "user", + content: `请将以下文本从${source}翻译成${target}语言：${text}`, + }, + ], + }; + + const config = { + method: 'post', + url: 'https://api.deepseek.com/v1/chat/completions', + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${apiKey}`, + 'Content-Type': 'application/json' + }, + data: data, + }; + + try { + const response = await axios(config); + + if ( + response.data && + response.data.choices && + response.data.choices.length > 0 && + response.data.choices[0].message && + response.data.choices[0].message.content + ) { + const translatedText = response.data.choices[0].message.content.trim(); + return translatedText; + } else { + throw new Error("无效的响应结构"); + } + } catch (error: any) { + console.error('DeepSeek翻译请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message}`); + } +}; \ No newline at end of file diff --git a/pages/api/translate.ts b/pages/api/translate.ts index 94dbed2..9846054 100644 --- a/pages/api/translate.ts +++ b/pages/api/translate.ts @@ -15,7 +15,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< return; } - const { text, sourceLang, targetLang, service, customAPIs } = req.body; + const { text, sourceLang, targetLang, service, customAPIs, openAIConfig } = req.body; if (!text || !targetLang || !service) { res.status(400).json({ error: "Missing parameters" }); @@ -38,7 +38,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< translatedText = await translateWithGoogle(text, sourceLang, targetLang); break; case "openai": - translatedText = await translateWithOpenAI(text, sourceLang, targetLang); + translatedText = await translateWithOpenAI(text, sourceLang, targetLang, req); break; case "tongyi": translatedText = await translateWithTongyi(text, sourceLang, targetLang); @@ -90,9 +90,19 @@ const translateWithGoogle = async (text: string, source: string, target: string) }; // 渠道: OpenAI -const translateWithOpenAI = async (text: string, source: string, target: string): Promise => { - // 从环境变量中获取 API 密钥 - const apiKey = process.env.OPENAI_API_KEY; +const translateWithOpenAI = async (text: string, source: string, target: string, req?: any): Promise => { + // 从环境变量中获取默认值 + let apiKey = process.env.OPENAI_API_KEY || ""; + let model = process.env.OPENAI_MODEL || "gpt-4o-mini"; + let endpoint = process.env.OPENAI_ENDPOINT || "https://api.openai.com/v1/chat/completions"; + + // 如果请求中包含OpenAI配置，则使用请求中的配置 + if (req && req.body && req.body.openAIConfig) { + const { apiKey: reqApiKey, model: reqModel, endpoint: reqEndpoint } = req.body.openAIConfig; + if (reqApiKey) apiKey = reqApiKey; + if (reqModel) model = reqModel; + if (reqEndpoint) endpoint = reqEndpoint; + } if (!apiKey) { throw new Error("OpenAI API 密钥未配置"); @@ -100,48 +110,80 @@ const translateWithOpenAI = async (text: string, source: string, target: string) // 构建请求数据 const data = { - model: "gpt-4o-mini", + model: model, messages: [ + { + role: "system", + content: "你是一个专业的翻译助手，请准确翻译用户提供的文本，保持原文的意思、风格和格式。只返回翻译后的文本，不要添加解释或其他内容。" + }, { role: "user", - content: `请将以下文本从${source}翻译成${target}语言：${text}`, + content: `请将以下文本从${source || "自动检测"}翻译成${target}语言：\n\n${text}`, }, ], + stream: false, + max_tokens: 4000, // 增加最大token数，避免长文本被截断 + temperature: 0.1, // 降低温度，使翻译更准确 }; // 配置请求参数 const config = { method: 'post', - url: 'https://api.openai.com/v1/chat/completions', + url: endpoint, headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, data: data, + timeout: 120000, // 增加超时时间到2分钟，避免大文本翻译超时 }; try { // 发送请求 const response = await axios(config); - // 检查响应结构 - if ( - response.data && - response.data.choices && - response.data.choices.length > 0 && - response.data.choices[0].message && - response.data.choices[0].message.content - ) { - // 提取并返回翻译结果 - const translatedText = response.data.choices[0].message.content.trim(); - return translatedText; - } else { - throw new Error("无效的响应结构"); + // 增强响应结构检查 + if (response.data) { + // 标准OpenAI格式 + if ( + response.data.choices && + response.data.choices.length > 0 + ) { + if (response.data.choices[0].message && response.data.choices[0].message.content) { + return response.data.choices[0].message.content.trim(); + } else if (response.data.choices[0].text) { + // 兼容旧版OpenAI API + return response.data.choices[0].text.trim(); + } else if (response.data.choices[0].content) { + // 兼容某些API格式 + return response.data.choices[0].content.trim(); + } + } + // 兼容其他可能的API格式 + else if (response.data.response) { + return response.data.response.trim(); + } + else if (response.data.result) { + return response.data.result.trim(); + } + else if (response.data.text) { + return response.data.text.trim(); + } + else if (response.data.content) { + return response.data.content.trim(); + } + else if (typeof response.data === 'string') { + return response.data.trim(); + } } + + // 如果无法识别响应格式，返回错误 + console.error('无法识别的OpenAI响应格式:', JSON.stringify(response.data)); + throw new Error("无效的响应结构"); } catch (error: any) { - console.error('翻译请求失败:', error.response?.data || error.message); - throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message}`); + console.error('OpenAI翻译请求失败:', error.response?.data || error.message); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message || '请求失败，请检查API配置'}`); } }; @@ -308,16 +350,25 @@ const translateWithSiliconFlow = async (text: string, source: string, target: st // 渠道: 自定义API const translateWithCustomAPI = async (text: string, source: string, target: string, customAPI: any): Promise => { + // 构建请求数据 - 确保兼容OpenAI API格式 const data = { - model: customAPI.model, + model: customAPI.model || "gpt-3.5-turbo", // 提供默认模型 messages: [ + { + role: "system", + content: "你是一个专业的翻译助手，请准确翻译用户提供的文本，保持原文的意思、风格和格式。只返回翻译后的文本，不要添加解释或其他内容。" + }, { role: "user", - content: `请将以下文本从${source}翻译成${target}语言：${text}`, + content: `请将以下文本从${source || "自动检测"}翻译成${target}语言：\n\n${text}`, }, ], + stream: false, // 默认不使用流式输出 + max_tokens: 4000, // 增加最大token数，避免长文本被截断 + temperature: 0.1, // 降低温度，使翻译更准确 }; + // 配置请求参数 const config = { method: 'post', url: customAPI.endpoint, @@ -327,26 +378,74 @@ const translateWithCustomAPI = async (text: string, source: string, target: stri 'Content-Type': 'application/json' }, data: data, + // 增加超时时间，避免大文本翻译超时 + timeout: 120000, // 增加到2分钟 }; try { const response = await axios(config); - if ( - response.data && - response.data.choices && - response.data.choices.length > 0 && - response.data.choices[0].message && - response.data.choices[0].message.content - ) { - const translatedText = response.data.choices[0].message.content.trim(); - return translatedText; - } else { - throw new Error("无效的响应结构"); + // 增强响应结构检查，支持更多API格式 + if (response.data) { + // 标准OpenAI格式 + if ( + response.data.choices && + response.data.choices.length > 0 + ) { + if (response.data.choices[0].message && response.data.choices[0].message.content) { + return response.data.choices[0].message.content.trim(); + } else if (response.data.choices[0].text) { + // 兼容旧版OpenAI API + return response.data.choices[0].text.trim(); + } else if (response.data.choices[0].content) { + // 兼容某些API格式 + return response.data.choices[0].content.trim(); + } else if (response.data.choices[0].delta && response.data.choices[0].delta.content) { + // 兼容流式输出格式 + return response.data.choices[0].delta.content.trim(); + } + } + // 兼容其他可能的API格式 + else if (response.data.response) { + return response.data.response.trim(); + } + else if (response.data.result) { + return response.data.result.trim(); + } + else if (response.data.translation) { + return response.data.translation.trim(); + } + else if (response.data.output) { + if (typeof response.data.output === 'string') { + return response.data.output.trim(); + } else if (response.data.output.text) { + return response.data.output.text.trim(); + } else if (response.data.output.content) { + return response.data.output.content.trim(); + } else if (response.data.output.translation) { + return response.data.output.translation.trim(); + } + } + else if (response.data.text) { + return response.data.text.trim(); + } + else if (response.data.content) { + return response.data.content.trim(); + } + else if (response.data.generated_text) { + return response.data.generated_text.trim(); + } + else if (typeof response.data === 'string') { + return response.data.trim(); + } } + + // 如果无法识别响应格式，返回原始响应以便调试 + console.error('无法识别的API响应格式:', JSON.stringify(response.data)); + throw new Error(`无法识别的API响应格式: ${JSON.stringify(response.data).substring(0, 200)}...`); } catch (error: any) { console.error('自定义API翻译请求失败:', error.response?.data || error.message); - throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message}`); + throw new Error(`翻译失败: ${error.response?.data?.error?.message || error.message || '请求失败，请检查API配置'}`); } };