diff --git a/app/lib/hooks/usePromptEnhancer.ts b/app/lib/hooks/usePromptEnhancer.ts index f376cc0..16787ca 100644 --- a/app/lib/hooks/usePromptEnhancer.ts +++ b/app/lib/hooks/usePromptEnhancer.ts @@ -43,11 +43,21 @@ export function usePromptEnhancer() { break; } - _input += decoder.decode(value); + const chunk = decoder.decode(value); + const lines = chunk.split('\n'); - logger.trace('Set input', _input); + for (const line of lines) { + if (line.startsWith('0:')) { + const content = JSON.parse(line.slice(2)); + _input += content; + setInput(_input); + } else if (line.startsWith('e:') || line.startsWith('d:')) { + // 处理元数据,如果需要的话 + logger.trace('Metadata', line); + } + } - setInput(_input); + logger.trace('Processed input', _input); } } catch (error) { _error = error; @@ -59,10 +69,6 @@ export function usePromptEnhancer() { setEnhancingPrompt(false); setPromptEnhanced(true); - - setTimeout(() => { - setInput(_input); - }); } } }; diff --git a/app/routes/api.enhancer.ts b/app/routes/api.enhancer.ts index 5c8175c..daedbb8 100644 --- a/app/routes/api.enhancer.ts +++ b/app/routes/api.enhancer.ts @@ -1,54 +1,76 @@ import { type ActionFunctionArgs } from '@remix-run/cloudflare'; -import { StreamingTextResponse, parseStreamPart } from 'ai'; import { streamText } from '~/lib/.server/llm/stream-text'; import { stripIndents } from '~/utils/stripIndent'; const encoder = new TextEncoder(); -const decoder = new TextDecoder(); -export async function action(args: ActionFunctionArgs) { - return enhancerAction(args); +// 模拟数据生成函数 +function* mockDataGenerator(message: string) { + const mockResponse = `您好!我希望开发一个功能完善的考勤管理系统。该系统应该包括以下功能: + +1. 员工签到和签退功能 +2. 请假和加班申请管理 +3. 考勤数据统计和报表生成 +4. 管理员后台管理界面 +5. 移动端适配,方便员工随时查看和操作 +6. 与公司现有人事系统的集成 + +请问您能帮我设计这个系统的基本架构和主要功能模块吗?我希望使用React作为前端框架,Node.js作为后端,MongoDB作为数据库。同时,我也想了解一下如何确保系统的安全性和数据隐私保护。谢谢!`; + + for (let i = 0; i < mockResponse.length; i += 2) { + yield mockResponse.slice(i, i + 2); + } } -async function enhancerAction({ context, request }: ActionFunctionArgs) { +// 环境变量或配置来控制是否使用模拟数据 +// const USE_MOCK_DATA = process.env.USE_MOCK_DATA === 'true'; +const USE_MOCK_DATA = true; + +export async function action({ context, request }: ActionFunctionArgs) { const { message } = await request.json<{ message: string }>(); try { - const result = await streamText( - [ - { - role: 'user', - content: stripIndents` - I want you to improve the user prompt that is wrapped in \`\` tags. + if (USE_MOCK_DATA) { + // 使用模拟数据 + const stream = new ReadableStream({ + async start(controller) { + for (const chunk of mockDataGenerator(message)) { + controller.enqueue(encoder.encode(`0:${JSON.stringify(chunk)}\n`)); + await new Promise(resolve => setTimeout(resolve, 50)); // 模拟延迟 + } + controller.enqueue(encoder.encode('e:{"finishReason":"unknown","usage":{"promptTokens":null,"completionTokens":null},"isContinued":false}\n')); + controller.enqueue(encoder.encode('d:{"finishReason":"unknown","usage":{"promptTokens":null,"completionTokens":null}}\n')); + controller.close(); + } + }); - IMPORTANT: Only respond with the improved prompt and nothing else! + return new Response(stream, { + headers: { 'Content-Type': 'text/plain; charset=utf-8' } + }); + } else { + // 使用实际 AI 服务 + const result = await streamText( + [ + { + role: 'user', + content: stripIndents` + I want you to improve the user prompt that is wrapped in \`\` tags. - - ${message} - - `, - }, - ], - context.cloudflare.env, - ); + IMPORTANT: Only respond with the improved prompt and nothing else! - const transformStream = new TransformStream({ - transform(chunk, controller) { - const processedChunk = decoder - .decode(chunk) - .split('\n') - .filter((line) => line !== '') - .map(parseStreamPart) - .map((part) => part.value) - .join(''); + Also, please ensure your response is entirely in Chinese. - controller.enqueue(encoder.encode(processedChunk)); - }, - }); + + ${message} + + `, + }, + ], + context.cloudflare.env, + ); - const transformedStream = result.toAIStream().pipeThrough(transformStream); - - return new StreamingTextResponse(transformedStream); + return result.toDataStreamResponse(); + } } catch (error) { console.log(error);