别怕看不懂AI,跟我一步步写个调参界面,立马学会提示词

npx create-next-app@latest prompt-lab --typescript --tailwindcd prompt-labnpm install langchain @langchain/openai

import { NextRequest, NextResponse } from 'next/server';import { ChatOpenAI } from "@langchain/openai";import { HumanMessage, SystemMessage } from "@langchain/core/messages";export async function POST(req: NextRequest) { try {   const { systemPrompt, userMessage, temperature } = await req.json();   // 初始化模型，temperature 由前端控制   const model = new ChatOpenAI({     modelName: "gpt-3.5-turbo",     temperature: temperature ?? 0.7,     maxRetries: 1,     timeout: 30000,     configuration: {        baseURL: process.env.OPENAI_API_BASE || "https://api.openai.com/v1",      },    });   // 构建消息数组：系统提示词 + 用户消息   const messages = [     new SystemMessage(systemPrompt || "你是一个有帮助的助手。"),     new HumanMessage(userMessage || "你好"),   ];   const response = await model.invoke(messages);   return NextResponse.json({     success: true,     reply: response.content,   }); } catch(error) {   return NextResponse.json({      success: false,      error: "调用失败"    }, { status: 500 }); }}

OPENAI_API_KEY=你的apiKeyOPENAI_API_BASE= api地址

"use client";import { useState } from "react";export default function Home() { const [systemPrompt, setSystemPrompt] = useState("你是一个有帮助的助手。"); const [temperature, setTemperature] = useState(0.7); const [userInput, setUserInput] = useState(""); const [chatHistory, setChatHistory] = useState<{role: string; content: string}[]>([]); const [loading, setLoading] = useState(false);  const sendMessage = async () => {     if (!userInput.trim() || loading) return;     setLoading(true);     const newHistory = [...chatHistory,        { role: "user", content: userInput }     ];     setChatHistory(newHistory);     setUserInput("");     try {       const res = await fetch("/api/chat", {         method: "POST",         headers: { "Content-Type": "application/json" },         body: JSON.stringify({ systemPrompt, userMessage: userInput, temperature }),       });       const data = await res.json();       setChatHistory([...newHistory,          { role: "assistant", content: data.reply }       ]);     } catch {       setChatHistory([...newHistory,          { role: "assistant", content: "请求失败" }       ]);   } finally {     setLoading(false);   } };  return ( <divclassName="flex h-screen max-w-6xl mx-auto p-4 gap-4"> {/* 左侧控制面板 */} <divclassName="w-80 bg-gray-50 p-4 rounded-lg space-y-4"> <h2className="font-bold text-lg">⚙️ Prompt 控制台</h2> <div> <labelclassName="block text-sm font-medium mb-1">系统提示词（人设）</label> <textarea className="w-full border rounded p-2 h-32 text-sm" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} /> </div> <div> <labelclassName="block text-sm font-medium mb-1"> Temperature: {temperature} </label> <input type="range" min="0" max="2" step="0.1" value={temperature} onChange={(e) => setTemperature(parseFloat(e.target.value))} className="w-full" /> <divclassName="flex justify-between text-xs text-gray-400"> <span>严谨 (0)</span> <span>平衡 (1)</span> <span>狂放 (2)</span> </div> </div> {/* 预设模板 */} <div> <labelclassName="block text-sm font-medium mb-2">快速预设</label> <divclassName="space-y-1"> {[ { label: "毒舌评论员", prompt: "你是一个尖酸刻薄的评论员，喜欢吐槽一切。" }, { label: "暖心朋友", prompt: "你是一个温暖、鼓励人的好朋友，总是看到光明面。" }, { label: "代码导师", prompt: "你是一个资深前端工程师，回答简洁，直接给代码方案。" }, ].map((preset) => ( <button key={preset.label} onClick={() => setSystemPrompt(preset.prompt)} className="block w-full text-left px-3 py-2 bg-white border rounded text-sm hover:bg-blue-50" > {preset.label} </button> ))} </div> </div> </div> {/* 右侧聊天区域 */} <divclassName="flex-1 flex flex-col border rounded-lg"> <divclassName="flex-1 overflow-y-auto p-4 space-y-3"> {chatHistory.map((msg, i) => ( <divkey={i}className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}> <divclassName={`p-3rounded-lgmax-w-[70%] ${ msg.role === "user" ? "bg-blue-500 text-white" : "bg-gray-100" }`}> {msg.content} </div> </div> ))} {loading && <divclassName="text-gray-400 text-sm">AI 正在思考...</div>} </div> <divclassName="border-t p-4 flex gap-2"> <input className="flex-1 border rounded-lg p-3" value={userInput} onChange={(e) => setUserInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && sendMessage()} placeholder="试试问同一个问题，然后切换左侧人设..." /> <button className="bg-blue-500 text-white px-6 rounded-lg disabled:opacity-50" onClick={sendMessage} disabled={loading} > 发送 </button> </div> </div> </div> );}