)
项目教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目地址https://github.com/ZIQI-a/huamiao_Agent本章目标要做的事构建古诗词生成功能 —— 输入名词生成诗词带注释赏析学到的知识领域特定的 Prompt 设计Few-shot 示例在诗词中的应用多步骤生成先写诗再注释再赏析古风 UI 设计8.1 诗词 Prompt 设计创建src/lib/prompts/poem.tsexportinterfacePoemOptions{noun:string;type:string;dynasty:string;}exportfunctiongetPoemSystemPrompt(options:PoemOptions){const{type,dynasty}options;return你是一位精通古典文学的诗人深谙${dynasty}代诗词的格律和意境。 ## 创作要求 - 诗词类型${type}- 风格参考${dynasty}代诗风 - 根据用户提供的名词或主题创作 ## 格律要求${getTypeRules(type)}## 创作原则 1. 意境优先诗要有画面感让读者看见诗中的场景 2. 用典自然可以用典故但要自然不生硬 3. 情景交融景中有情情中有景 4. 语言凝练每个字都要有用不多余 ## 输出格式 请严格按以下格式输出不要添加额外内容 [诗词标题] [诗词正文每句一行] --- [注释] - 词语1解释 - 词语2解释 [赏析] 对诗词的意境、手法、情感进行赏析80-120字 ## 约束 - 不要写现代白话诗 - 不要在诗词正文中加括号注释 - 不要使用过于生僻的字 - 诗词标题要雅致不要直接用输入的名词;}functiongetTypeRules(type:string):string{construles:Recordstring,string{五言绝句:五言绝句四句每句五字。注意平仄和押韵。,七言绝句:七言绝句四句每句七字。注意平仄和押韵。,五言律诗:五言律诗八句每句五字。中间两联颔联、颈联要求对仗。,七言律诗:七言律诗八句每句七字。中间两联颔联、颈联要求对仗。,宋词:宋词按词牌填写。请注明使用的词牌名如《浣溪沙》《蝶恋花》等。,};returnrules[type]||rules[七言绝句];}exportconstPOEM_TYPES[{value:五言绝句,label:五言绝句},{value:七言绝句,label:七言绝句},{value:五言律诗,label:五言律诗},{value:七言律诗,label:七言律诗},{value:宋词,label:宋词},];exportconstDYNASTIES[{value:唐,label:唐诗},{value:宋,label:宋词},{value:魏晋,label:魏晋风骨},];8.2 创建 API Route创建src/app/api/poems/generate/route.tsimport{streamText}fromai;import{createOpenAI}fromai-sdk/openai;import{getPoemSystemPrompt}from/lib/prompts/poem;constdeepseekcreateOpenAI({apiKey:process.env.DEEPSEEK_API_KEY,baseURL:https://api.deepseek.com,});exportasyncfunctionPOST(req:Request){const{noun,type,dynasty}awaitreq.json();if(!noun){returnnewResponse(请输入名词,{status:400});}constsystemgetPoemSystemPrompt({noun,type:type||七言绝句,dynasty:dynasty||唐,});constresultstreamText({model:deepseek(deepseek-chat),system,prompt:请以「${noun}」为主题创作一首诗词。,maxTokens:1500,temperature:0.9,// 诗词需要更多创意});returnresult.toDataStreamResponse();}8.3 构建古诗词页面修改src/app/poems/page.tsxuse client;import{useState}fromreact;import{useCompletion}fromai/react;import{Button}from/components/ui/button;import{Input}from/components/ui/input;import{Label}from/components/ui/label;import{Card,CardContent,CardHeader,CardTitle}from/components/ui/card;import{Select,SelectContent,SelectItem,SelectTrigger,SelectValue,}from/components/ui/select;import{PageContainer}from/components/layout/page-container;import{POEM_TYPES,DYNASTIES}from/lib/prompts/poem;exportdefaultfunctionPoems(){const[noun,setNoun]useState();const[type,setType]useState(七言绝句);const[dynasty,setDynasty]useState(唐);const{completion,isLoading,error,complete}useCompletion({api:/api/poems/generate,});consthandleGenerateasync(){if(!noun.trim())return;awaitcomplete(,{body:{noun,type,dynasty},});};return(PageContainer title古诗词生成description输入名词AI 创作古诗词div classNamegrid grid-cols-1 lg:grid-cols-3 gap-6{/* 左侧参数 */}div classNamelg:col-span-1CardCardHeaderCardTitle创作参数/CardTitle/CardHeaderCardContent classNamespace-y-4div classNamespace-y-2Label主题名词/LabelInput value{noun}onChange{(e)setNoun(e.target.value)}placeholder如月亮、故乡、春天...onKeyDown{(e)e.keyEnterhandleGenerate()}//divdiv classNamespace-y-2Label诗词类型/LabelSelect value{type}onValueChange{setType}SelectTriggerSelectValue//SelectTriggerSelectContent{POEM_TYPES.map((t)(SelectItem key{t.value}value{t.value}{t.label}/SelectItem))}/SelectContent/Select/divdiv classNamespace-y-2Label风格朝代/LabelSelect value{dynasty}onValueChange{setDynasty}SelectTriggerSelectValue//SelectTriggerSelectContent{DYNASTIES.map((d)(SelectItem key{d.value}value{d.value}{d.label}/SelectItem))}/SelectContent/Select/divButton onClick{handleGenerate}disabled{!noun.trim()||isLoading}classNamew-fullsizelg{isLoading?诗意酝酿中...:创作诗词}/Button/CardContent/Card/div{/* 右侧诗词展示 */}div classNamelg:col-span-2Card classNamemin-h-[500px]CardHeaderCardTitle诗词预览/CardTitle/CardHeaderCardContent{error(div classNametext-red-500 mb-4生成失败{error.message}/div)}{!completion!isLoading(div classNametext-center text-muted-foreground py-20div classNametext-6xl mb-4/divp输入一个名词开始诗意之旅/p/div)}{isLoading!completion(div classNametext-center text-muted-foreground py-20div classNametext-6xl mb-4 animate-pulse/divp诗兴大发中.../p/div)}{completion(div classNamepoem-contentPoemRenderer content{completion}/{isLoading(span classNameinline-block w-0.5 h-5 bg-primary animate-pulse/)}/div)}/CardContent/Card/div/div/PageContainer);}// 诗词专用渲染组件functionPoemRenderer({content}:{content:string}){// 按 --- 分割诗词和注释赏析constpartscontent.split(---);constpoemPartparts[0]?.trim();constanalysisPartparts[1]?.trim();return(div classNamespace-y-8{/* 诗词正文 - 古风样式 */}div classNametext-center py-8div classNameinline-block text-left{poemPart?.split(\n).map((line,i){if(line.trim())returnbr key{i}/;// 标题行不以标点结尾的短行if(i0!line.match(/[。]$/)line.trim().length10){return(h3 key{i}classNametext-2xl font-bold text-primary mb-6 text-center{line.trim()}/h3);}return(p key{i}classNametext-xl leading-loose tracking-wider text-foreground/90{line.trim()}/p);})}/div/div{/* 注释赏析 - 普通排版 */}{analysisPart(div classNameborder-t pt-6{analysisPart.split(\n).map((line,i){if(line.trim())returnbr key{i}/;if(line.trim().startsWith([)||line.trim().startsWith(【)){return(h4 key{i}classNamefont-semibold text-lg mt-4 mb-2{line.replace(/[\[\]【】]/g,)}/h4);}if(line.trim().startsWith(-)){return(p key{i}classNametext-muted-foreground ml-4 mb-1{line}/p);}return(p key{i}classNametext-foreground/80 leading-7 mb-2{line}/p);})}/div)}/div);}8.4 测试古诗词生成访问http://localhost:3000/poems输入「月亮」选七言绝句唐诗风格点击创作观察诗词生成尝试不同名词故乡、梅花、编程、咖啡切换不同诗词类型和朝代风格本章小结要点说明领域 Prompt诗词需要格律约束和意境要求Temperature诗词创作用较高温度0.9增加创意古风 UI居中排版、大字号、行间距大内容分割用---分隔诗词正文和注释赏析下一章预告目前所有数据都在内存中刷新页面就丢失了。下一章我们引入 SQLite 数据库让创作的文章和诗词持久化保存。如果这个教程对你有帮助欢迎 ⭐ Star 支持一下 教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目https://github.com/ZIQI-a/huamiao_Agent