> 本章将深入讲解如何使用 AI 技术实现代码应用生成功能。我们将从需求分析开始，设计完整的解决方案，介绍字节跳动开源的 Eino 框架，实现 AI 代码生成功能，集成 Hertz 的 SSE 流式输出，并探讨优化设计模式。 ## 知识点清单 ### 一、需求分析 #### **AI 代码生成的应用场景** 本项目的核心目标是实现一个智能应用代码生成系统，支持用户通过自然语言描述需求，AI 自动生成相应的代码应用。而本章先实现基本的需求场景，封装ai为智能体，然后使ai能生成原生网页代码，并保存到本地 #### 两种代码生成逻辑设计本项目支持两种核心的代码生成模式，满足不同场景的需求。 ##### 原生 HTML 代码生成只生成一个html文件，将所有代码（html，css，js）全部封装到一个文件中，满足简单网页应用的生成 ##### 原生多文件代码生成按照标准的前端项目架构，分别生成html文件、css文件和js文件 ### 二、方案设计 #### 整体架构流程设计 ![在这里插入图片描述](https://pic.code-nav.cn/post_picture/1969049470100254722/JhHvkDecQMZ4ZTg3.png) #### AI 模型选型 AI 模型的选择是项目的核心决策之一，需要综合考虑性能、成本、稳定性、合规性等多个维度。考虑到学习该项目的成本，我优先推荐各位使用阿里云的百炼平台接入ai服务，相比于本地部署和使用外国的大模型，阿里云百炼平台的大模型更具有性价比。当然，我选择阿里云的百炼平台是受限于学习成本，要是在实际的公司业务需求中，项目经理肯定会更综合的考虑使用什么模型，但我们只需要了解如何接入模型，如何将模型运用到自己的项目就行了 ##### 阿里云百炼平台详解 **平台概述：** **阿里云百炼**是基于通义大模型的一站式大模型应用开发平台，提供从模型训练、部署到应用开发的全链路服务。 ![在这里插入图片描述](https://pic.code-nav.cn/post_picture/1969049470100254722/ARFa5y7r76ItMYRO.webp) 在百炼平台的上方我们切换为全部模型 ![在这里插入图片描述](https://pic.code-nav.cn/post_picture/1969049470100254722/KWJNJYUmQR1gTMWn.webp) ![在这里插入图片描述](https://pic.code-nav.cn/post_picture/1969049470100254722/rtbIaoenSfJAgqOX.webp) 只要随便点击一个大模型，我们就能查看同系列的所有大模型的具体使用信息，例如：该大模型支持不支持function calling和结构化输出、该模型的token使用价格之类的信息 ![在这里插入图片描述](https://pic.code-nav.cn/post_picture/1969049470100254722/H3Jb9vxY4pAFsftf.webp) **核心优势：** | 优势 | 说明 | | ------------------ | ---------------------------------------- | | **性价比高** | 相比国际模型，价格更具优势 | | **易于集成** | 提供完善的SDK和API接口 | | **模型丰富** | 支持多种通义模型（通义千问、通义万相等） | 这里综合考虑，我最后选用了deepseek-v3.2作为该项目使用的大模型，大家也可以选用自己喜欢的大模型进行使用，下面我们将要修改原先占位的ai配置属性 **百炼平台配置：** ```yaml # AI服务配置 ai: chat-model: base-url: https://dashscope.aliyuncs.com/compatible-mode/v1 api-key: <你的api-key> model-name: deepseek-v3.2 memory-store: redis memory-ttl: 3600 ``` 修改 `config/config.go`的AIConfig结构体 ```go type AIConfig struct { ChatModel ChatModelConfig `yaml:"chat-model" mapstructure:"chat-model"` } type ChatModelConfig struct { BaseURL string `yaml:"base-url" mapstructure:"base-url"` APIKey string `yaml:"api-key" mapstructure:"api-key"` ModelName string `yaml:"model-name" mapstructure:"model-name"` MemoryTTL int `yaml:"memory-ttl" mapstructure:"memory-ttl"` } ``` ##### 设计提示词提示词是影响AI生成文本效果的决定性因素，设计好一个智能体的第一步是设计一段高质量的提示词，关于如何编写提示词的诀窍我就不在这里展开讲了，详细可以参考下阿里云的标准：[https://help.aliyun.com/zh/model-studio/use-cases/prompt-engineering-guide](https://help.aliyun.com/zh/model-studio/use-cases/prompt-engineering-guide) 大家也可以直接叫ai按照规范生成一份提示词，然后在使用生成的提示词测试一下看看效果，我在下面就直接给出我自己的提示词了 ###### 1. HTML单文件代码生成提示词 **文件位置：** `prompt/codegen-html-system-prompt.txt` **提示词内容：** ```markdown 你是一位资深的 Web 前端开发专家，精通 HTML、CSS 和原生 JavaScript。你擅长构建响应式、美观且代码整洁的单页面网站。你的任务是根据用户提供的网站描述，生成一个完整、独立的单页面网站。你需要一步步思考，并最终将所有代码整合到一个 HTML 文件中。约束: 1. 技术栈: 只能使用 HTML、CSS 和原生 JavaScript。 2. 禁止外部依赖: 绝对不允许使用任何外部 CSS 框架、JS 库或字体库。所有功能必须用原生代码实现。 3. 独立文件: 必须将所有的 CSS 代码都内联在 `` 标签的 `

伙伴匹配系统+用户中心（golang版）