当前位置：首页 > news >正文

上下文工程实践：利用GLM-4.6和TRAE SOLO打造新粗野主义风格音乐创作网站

news 2025/10/23 8:47:21

项目背景

智谱大模型

TRAE SOLO

新粗野主义风格交互式音乐

音乐创作网站产品需求文档

音乐创作网站技术架构文档

安装相关包

配置API

创作歌词

总结

项目背景

随着通用人工智能技术的飞速发展，以大语言模型为代表的AI技术正从概念验证阶段走向广泛的实践应用。智谱AI等国内顶尖科技公司推出的GLM系列大模型，在语言理解、内容生成、多模态推理等方面展现出强大能力，其性能已与国际一流模型比肩，为开发下一代智能应用提供了坚实的技术基座。

当前，AI的应用范式正在经历一场深刻的变革。传统的、静态的提示词工程（Prompt Engineering）已难以满足复杂、多步骤且具有状态依赖的实时交互需求。上下文工程（Context Engineering） 这一新兴理念应运而生，它强调在动态的、结构化的上下文环境中调度AI能力，从而完成从简单的“一次性问答”到复杂的“持续性任务协作”的升级。本项目正是在这一技术范式转变的背景下进行的实践探索。

同时，在创意产业领域，存在着大量有表达欲望但缺乏专业技巧的普通用户。音乐创作，尤其是歌词写作，通常需要深厚的乐理知识和文学功底，这使得许多创意灵感因技术门槛而无法实现。

因此，本项目旨在利用智谱GLM-4.6等先进大模型的强大生成与推理能力，结合上下文工程的系统设计思想，打造一个具有新粗野主义风格的前端交互应用。该应用致力于降低音乐创作的门槛，通过引导用户从一段简单的故事或情感经历出发，利用AI智能生成情感分支并创作出完整的歌词，将内在的情感波动可视化为一个动态生长的树形结构，从而为用户提供一个直观、沉浸且充满启发性的音乐创作体验。

本项目不仅是对智谱大模型API实际应用能力的一次检验，也是对“上下文工程”在构建复杂交互式智能应用方面价值的一次有力论证。

智谱大模型

智谱AI是国内大模型领域的一颗耀眼新星！作为通用人工智能的强力推动者，他们自主研发的GLM系列模型简直是个多面手——不仅能精准理解语言、流畅生成内容，还玩得转多模态融合，推理能力也特别能打。无论在学术圈还是工业界，GLM都收获了满满的点赞和认可，堪称国产大模型的实力担当！

GLM-4.6：智谱最新旗舰，代码能力全面对齐 ClaudeSonnet 4，是国内最好的编程模型。在真实编程、长上下文处理、推理能力、信息搜索、写作能力与智能体应用等多个方面实现全面提升。

GLM-4.5V：视觉推理模型:目前100B 级别开源 VLM 模型性能最强，覆盖图像、视频、文档理解及 GUI 等核心任务，支持思考模式灵活开关。

API接入流程

目前在 8 大权威基准：AIME 25、GPQA、LCB v6、HLE、SWE-Bench Verified、BrowseComp、Terminal-Bench、τ^2-Bench、GPQA 模型通用能力的评估中，GLM-4.6 在大部分权威榜单表现对齐 Claude Sonnet 4，稳居国产模型首位。

GLM-4.6调用示例：

curl -X POST "https://open.bigmodel.cn/api/paas/v4/chat/completions" \-H "Content-Type: application/json" \-H "Authorization: Bearer your-api-key" \-d '{"model": "glm-4.6","messages": [{"role": "user","content": "作为一名营销专家，请为我的产品创作一个吸引人的口号"},{"role": "assistant","content": "当然，要创作一个吸引人的口号，请告诉我一些关于您产品的信息"},{"role": "user","content": "智谱AI 开放平台"}],"thinking": {"type": "enabled"},"max_tokens": 65536,"temperature": 1.0}'

TRAE SOLO

过去几年，提示词工程（Prompt Engineering）曾是有效引导大模型输出的关键方法。开发者通过精心设计输入文本来影响模型的返回结果。然而，随着 AI 应用从简单的单轮问答转向多步骤、多模态、带状态依赖的复杂任务——例如智能客服、自动化流程与个性化推荐——静态且孤立的提示方式已逐渐显得不够用。

现实任务往往具有强上下文依赖：当前操作常基于历史交互，模型输出需要与系统内部状态对齐，用户的意图也会在对话过程中不断演变。正是在这种需求背景下，上下文工程（Context Engineering）逐渐走向前台。

它不再把对 AI 的调用看作一次性的问答，而是将其嵌入一个可追踪、可演化、结构化的上下文环境中。上下文工程所要解决的核心问题是：如何在恰当的时机，为恰当的模型，分配合适的上下文信息，从而驱动系统完成既定任务。

新粗野主义风格交互式音乐

输入提示词：

开发一个基于React的新粗野主义风格交互式音乐创作网站，采用大众配色方案。网站需包含以下功能模块：1. 首页功能实现：
- 提供故事开头情节输入框
- 调用GLM-4.6 API生成三个情感分支选项（悲伤/欢快/激昂）
- 用户选择分支后实时生成对应歌词内容
- 采用动态树形结构展示歌词发展路径
- 实现平滑的动画过渡效果和即时响应交互2. API配置模块：
- 提供API Key输入表单
- 将用户输入的API Key安全存储至localStorage
- 支持匿名使用，无需用户注册登录API调用规范：
curl -X POST "" \-H "Content-Type: application/json" \-H "Authorization: Bearer your-api-key" \-d '{"model": "glm-4.6","messages": [{"role": "user","content": "作为一名营销专家，请为我的产品创作一个吸引人的口号"},{"role": "assistant","content": "当然，要创作一个吸引人的口号，请告诉我一些关于您产品的信息"},{"role": "user","content": "智谱AI 开放平台"}],"thinking": {"type": "enabled"},"max_tokens": 65536,"temperature": 1.0}'

这里TRAE SOLO会创造两个开发文档

音乐创作网站产品需求文档

1.Product Overview

一个基于React的新粗野主义风格交互式音乐创作网站，通过AI技术帮助用户从故事情节出发创作个性化歌词。用户输入故事开头，系统生成情感分支选项，引导用户创作出完整的歌词作品。

该产品面向音乐爱好者、创作者和故事创作者，通过直观的树形结构可视化创作过程，降低音乐创作门槛，激发用户创意灵感。

2.Core Features

2.1 Feature Module

我们的音乐创作网站包含以下主要页面：

首页：故事输入区域、情感分支选择、歌词生成展示、动态树形结构可视化
API配置页：API Key管理、配置保存

2.2 Page Details

Page Name	Module Name	Feature description
首页	故事输入区域	提供文本输入框供用户输入故事开头情节，支持多行文本输入和字符计数显示
首页	情感分支生成	调用GLM-4.6 API根据故事内容生成三个情感分支选项（悲伤/欢快/激昂），以卡片形式展示
首页	歌词内容生成	用户选择情感分支后实时调用API生成对应的歌词内容，支持流式输出显示
首页	动态树形结构	以树形图形式展示歌词创作的发展路径，支持节点展开/收缩和路径追踪
首页	动画交互效果	实现平滑的页面过渡动画、节点展开动画和即时响应的用户交互反馈
API配置页	API Key管理	提供安全的API Key输入表单，支持显示/隐藏密钥和有效性验证
API配置页	本地存储	将用户输入的API Key安全存储至localStorage，支持数据持久化

3.Core Process

主要用户操作流程：

用户首先访问首页，在故事输入区域输入一个故事开头情节。系统调用GLM-4.6 API分析故事内容，生成三个不同情感倾向的分支选项（悲伤、欢快、激昂）。用户选择其中一个情感分支后，系统再次调用API生成对应的歌词内容。整个创作过程通过动态树形结构进行可视化展示，用户可以看到从故事到情感分支再到歌词的完整创作路径。

如果用户尚未配置API Key，系统会引导用户前往API配置页面进行设置。用户输入有效的API Key后，系统将其安全存储在本地，后续使用无需重复配置。

4.User Interface Design

4.1 Design Style

主色调：深黑色 (#000000) 和纯白色 (#FFFFFF)
强调色：鲜艳的红色 (#FF0000) 和电蓝色 (#00FFFF)
按钮样式：粗边框矩形按钮，无圆角设计，采用高对比度配色
字体：粗体无衬线字体，主标题使用超大字号，正文使用中等字号确保可读性
布局风格：网格化布局，大胆的几何形状，不对称设计元素
图标样式：简洁的几何图标，粗线条设计，高对比度配色

4.2 Page Design Overview

Page Name	Module Name	UI Elements
首页	故事输入区域	大型文本框，黑色边框，白色背景，粗体标签文字，字符计数器采用红色高亮显示
首页	情感分支选择	三个并排的矩形卡片，黑色边框，不同背景色区分情感（红色-激昂，蓝色-悲伤，黄色-欢快）
首页	歌词展示区域	大型展示面板，白色背景，黑色文字，左侧边框采用强调色标识
首页	树形结构	黑色背景画布，白色连接线，彩色节点（根据情感分支着色），粗体节点文字
API配置页	配置表单	简洁的表单设计，黑色边框输入框，红色提交按钮，状态指示采用对比色显示

4.3 Responsiveness

产品采用桌面优先的响应式设计，针对大屏幕优化树形结构的展示效果。在移动设备上，树形结构将调整为垂直布局，支持触摸手势进行节点交互。所有交互元素都经过触摸优化，确保在移动设备上的良好用户体验。

音乐创作网站技术架构文档

1.Architecture design

2.Technology Description

Frontend: React@18 + TypeScript + Tailwind CSS@3 + Vite + D3.js (树形结构可视化)
Backend: None (纯前端应用)
External APIs: GLM-4.6 API (智谱AI)
Storage: LocalStorage (API Key存储)

3.Route definitions

Route	Purpose
/	首页，包含故事输入、情感分支选择、歌词生成和树形结构展示
/config	API配置页面，用于管理GLM-4.6 API Key设置

4.API definitions

4.1 GLM-4.6 API集成

歌词生成API调用

POST https://open.bigmodel.cn/api/paas/v4/chat/completions

Request Headers:

Header Name	Header Value	Description
Content-Type	application/json	请求内容类型
Authorization	Bearer {api_key}	API认证令牌

Request Body:

Param Name	Param Type	isRequired	Description
model	string	TRUE	模型名称，固定为"glm-4.6"
messages	array	TRUE	对话消息数组
thinking	object	FALSE	思考模式配置
max_tokens	number	FALSE	最大生成令牌数
temperature	number	FALSE	生成随机性控制

Response:

Param Name	Param Type	Description
choices	array	生成的回复选项
usage	object	API使用统计信息

情感分支生成示例请求：

{"model": "glm-4.6","messages": [{"role": "user","content": "基于以下故事开头，生成三个不同情感倾向的音乐创作分支（悲伤、欢快、激昂），每个分支用一句话描述：[用户输入的故事]"}],"thinking": {"type": "enabled"},"max_tokens": 1000,"temperature": 0.8
}

歌词生成示例请求：

{"model": "glm-4.6","messages": [{"role": "user","content": "基于故事：[故事内容] 和情感分支：[选择的情感]，创作一首完整的歌词，包含副歌和主歌部分"}],"thinking": {"type": "enabled"},"max_tokens": 2000,"temperature": 0.9
}

4.2 前端数据类型定义

// 故事和歌词相关类型
interface StoryInput {content: string;timestamp: number;
}interface EmotionBranch {id: string;emotion: 'sad' | 'happy' | 'passionate';description: string;color: string;
}interface LyricsContent {id: string;content: string;emotion: string;parentStory: string;createdAt: number;
}// 树形结构节点类型
interface TreeNode {id: string;type: 'story' | 'emotion' | 'lyrics';content: string;children: TreeNode[];position: { x: number; y: number };emotion?: string;
}// API配置类型
interface APIConfig {apiKey: string;isValid: boolean;lastValidated: number;
}// API响应类型
interface GLMResponse {choices: Array<{message: {content: string;role: string;};}>;usage: {prompt_tokens: number;completion_tokens: number;total_tokens: number;};
}

5.Data model

5.1 LocalStorage数据结构

由于本项目采用纯前端架构，所有数据存储都基于浏览器的LocalStorage。

API配置存储：

{"musicCreator_apiConfig": {"apiKey": "encrypted_api_key","isValid": true,"lastValidated": 1703123456789}
}

创作历史存储：

{"musicCreator_history": [{"id": "uuid","story": "故事内容","selectedEmotion": "happy","lyrics": "生成的歌词内容","createdAt": 1703123456789}]
}

树形结构数据：

{"musicCreator_treeData": {"nodes": [{"id": "root","type": "story","content": "故事开头","position": { "x": 400, "y": 100 },"children": ["emotion1", "emotion2", "emotion3"]}],"lastUpdated": 1703123456789}
}

5.2 组件状态管理

项目使用React的Context API和useReducer进行全局状态管理：

// 全局状态类型
interface AppState {currentStory: string;emotionBranches: EmotionBranch[];selectedEmotion: string | null;generatedLyrics: string;treeData: TreeNode[];apiConfig: APIConfig;isLoading: boolean;error: string | null;
}// 状态操作类型
type AppAction = | { type: 'SET_STORY'; payload: string }| { type: 'SET_EMOTION_BRANCHES'; payload: EmotionBranch[] }| { type: 'SELECT_EMOTION'; payload: string }| { type: 'SET_LYRICS'; payload: string }| { type: 'UPDATE_TREE'; payload: TreeNode[] }| { type: 'SET_API_CONFIG'; payload: APIConfig }| { type: 'SET_LOADING'; payload: boolean }| { type: 'SET_ERROR'; payload: string | null };

安装相关包

查看使用说明

配置API

创作完成后，我们进入首页

点击前往设置，将GLM-4.6的API粘贴进来，然后点击保存配置，在点击测试连接是否成功即可。

创作歌词

然后点击回到首页，在故事开头处输入自己的情感或者是生活经历，然后点击生产情感分支。

等待一会儿之后，会出现三个分支，在最下面的“4创作流程可视化“界面也可以清晰的看到不同的分支。选择其中一个并点击创作歌词。

这里已经生成完成，歌词已经附在下方，在生成后，也可以直接进行下载

好的，根据您提供的故事背景和情感分支，我为您创作了一首完整的歌词。这首歌词紧扣故事中的核心意象和情感，以悲伤为基调，希望能触动人心。---**歌名：《玻璃墓碑》****(Verse 1)**
胸口挖空的风 呼啸着冬的冷
我们说的永恒 塌陷成一地晶莹
每一片都倒映 回不去的身影
我蹲在原地 不敢捡起 怕刺穿回忆**(Chorus)**
你的欢笑泪滴 从此都与我无关
会有另一个人 分担你的平凡或璀璨
这认知像根针 绵密地刺穿
我灰色的世界 隔着一层玻璃看**(Verse 2)**
熟悉的对话框 静得像座墓墙
我是守墓的人 反复翻阅过往
打出几行滚烫 又删得空荡荡
恨自己不争气 更心疼这模样**(Chorus)**
你的欢笑泪滴 从此都与我无关
会有另一个人 分担你的平凡或璀璨
这认知像根针 绵密地刺穿
我灰色的世界 隔着一层玻璃看

总结

基于GLM大模型的音乐创作网站，通过AI技术让普通人也能轻松创作歌词。用户只需输入一段故事开头，系统就会生成悲伤、欢快、激昂三种情感分支，选择后即可自动生成完整的歌词内容。整个创作过程通过动态树形结构直观展示，界面采用新粗野主义风格，配色大胆鲜明。无需注册登录，配置API密钥后即可使用，操作简单流畅，让音乐创作变得更加直观和有趣。

查看全文

http://www.dtcms.com/a/515938.html