InternLM2-Chat-1.8B项目实战构建一个全栈智能技术博客系统想自己动手搭建一个能自动写文章、润色文字的智能博客吗今天我们就来玩点不一样的用InternLM2-Chat-1.8B这个轻量级大模型作为大脑从零开始搭建一个全栈的智能博客系统。整个过程就像搭积木我会带你从前端页面到后端逻辑再到AI模型集成一步步把系统跑起来。这个项目特别适合想了解大模型如何在实际项目中落地的朋友。你不需要有很深的理论基础跟着步骤走就能看到一个完整的、可运行的智能应用是怎么诞生的。最终你会得到一个具备用户管理、文章发布并且能调用AI帮你撰写和优化内容的博客平台。1. 项目整体设计与环境准备在开始敲代码之前我们先花几分钟看看这个系统长什么样以及需要准备哪些工具。整个系统可以分成三块来看。最前面是用户直接操作的博客网站比如用Vue或React来写负责展示文章、提供发布和编辑的界面。中间是后端服务器我们用Python的FastAPI来搭建它就像系统的调度中心处理用户登录、保存文章、接收前端的AI请求等所有业务逻辑。最后也是最核心的一块就是AI模型服务它独立运行专门负责加载InternLM2-Chat-1.8B模型并响应后端发来的“写文章”、“润色文字”这类智能请求。为什么要这么设计呢主要是为了灵活和稳定。把AI服务单独部署以后模型升级或者想换一个模型试试都不会影响到博客网站和后端服务器的正常运行。接下来看看我们需要准备些什么。开发环境操作系统推荐使用Linux如Ubuntu 20.04或macOSWindows用户可以通过WSL2获得类似的体验。Python版本需要3.8或以上。这是后端和AI服务的主要语言。Node.js版本需要16或以上。这是用来构建前端项目的。代码编辑器VS Code、PyCharm或者你顺手的任何一款都可以。Git用于下载项目代码和模型。关键工具与框架Conda强烈建议使用Conda来创建独立的Python环境避免不同项目的包版本冲突。Docker可选但推荐如果你希望AI模型服务能在各种环境下轻松部署用Docker会方便很多。FastAPI一个现代、快速高性能的Python Web框架用于构建后端API。Vue.js / React两者任选其一用于构建前端用户界面。本教程会以Vue 3为例但思路是相通的。硬件要求 重点在于运行InternLM2-Chat-1.8B模型。这是一个1.8B参数的“小”模型对硬件比较友好。内存建议至少16GB RAM。运行模型服务本身会占用一定内存。GPU可选但能极大提升体验如果你有NVIDIA GPU显存4GB或以上如GTX 1650, RTX 2060等可以安装CUDA来加速模型推理生成速度会快很多。纯CPU也能运行只是响应会慢一些。好了蓝图和工具清单都有了我们接下来就进入动手环节先把项目的骨架搭起来。2. 搭建项目基础骨架我们从一个空文件夹开始创建出整个项目的目录结构。打开你的终端跟着下面的命令一步步来。首先创建项目根目录并初始化前后端。# 创建项目主文件夹 mkdir smart-blog-system cd smart-blog-system # 创建后端服务目录 mkdir backend cd backend # 创建并激活后端的Python虚拟环境使用conda conda create -n smart-blog-backend python3.10 conda activate smart-blog-backend # 初始化后端项目创建必要的文件 touch main.py requirements.txt接下来准备前端项目。我们退回根目录用Vue的官方脚手架快速生成一个项目。# 退回项目根目录 cd .. # 使用Vue官方脚手架创建前端项目确保已安装Node.js npm create vuelatest frontend # 创建过程中命令行会交互式询问除TypeScript和Router建议启用外其他选项按需选择或直接回车用默认值即可。 # 进入前端目录安装依赖 cd frontend npm install现在你的smart-blog-system目录结构应该大致如下smart-blog-system/ ├── backend/ # Python后端服务 │ ├── main.py # 后端主入口文件 │ └── requirements.txt # Python依赖列表 └── frontend/ # Vue前端项目 ├── src/ ├── package.json └── ...这个结构非常清晰前后端分离便于独立开发和部署。3. 开发后端核心API服务后端是整个系统的中枢它负责用户认证、博客内容管理以及最关键的一步——把前端的请求转发给AI模型服务。我们用FastAPI来写因为它写起来快自动生成的交互文档也很方便。首先处理一下后端依赖。编辑backend/requirements.txt文件加入以下内容fastapi0.104.1 uvicorn[standard]0.24.0 sqlalchemy2.0.23 pydantic2.5.0 pydantic-settings2.1.0 python-jose[cryptography]3.3.0 passlib[bcrypt]1.7.4 httpx0.25.1然后在backend目录下运行pip install -r requirements.txt来安装这些包。接下来我们编写后端的核心逻辑。打开backend/main.py开始编码。为了控制篇幅这里展示核心部分完整的用户模型ORM、数据库连接和工具函数需要你根据代码注释自行补充。from fastapi import FastAPI, Depends, HTTPException, status from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm from pydantic import BaseModel from typing import Optional, List import httpx import os # 初始化FastAPI应用 app FastAPI(title智能博客系统后端API) # 定义数据模型Pydantic class UserCreate(BaseModel): username: str password: str class UserLogin(BaseModel): username: str password: str class BlogPostCreate(BaseModel): title: str raw_content: str # 用户输入的原始内容 class BlogPostAIRequest(BaseModel): instruction: str # 用户给AI的指令如“写一篇关于Python入门的文章” style: Optional[str] 技术博客 # 文章风格 length: Optional[str] 中等 # 文章长度 # 模拟一个“文章”存储实际项目请连接数据库 fake_db_posts [] # 核心AI服务客户端 AI_SERVICE_URL os.getenv(AI_SERVICE_URL, http://localhost:8001) async def call_ai_service(prompt: str, max_tokens: int 500) - str: 调用独立的AI模型服务。 这里我们假设AI服务有一个 /generate 的POST接口。 async with httpx.AsyncClient() as client: try: # 构建请求体格式需要与你的AI服务匹配 payload { prompt: prompt, max_tokens: max_tokens, temperature: 0.7 # 控制创造性值越高越随机 } response await client.post(f{AI_SERVICE_URL}/generate, jsonpayload, timeout30.0) response.raise_for_status() result response.json() # 假设AI服务返回格式为 {text: 生成的文本...} return result.get(text, ) except Exception as e: print(f调用AI服务失败: {e}) return [AI服务暂不可用] # 用户认证相关端点示例需完善 oauth2_scheme OAuth2PasswordBearer(tokenUrltoken) app.post(/token) async def login(form_data: OAuth2PasswordRequestForm Depends()): # 这里应验证用户名和密码并返回JWT token # 为简化我们返回一个模拟token return {access_token: ffake-token-for-{form_data.username}, token_type: bearer} # 博客文章相关端点 app.post(/api/posts, status_codestatus.HTTP_201_CREATED) async def create_post(post: BlogPostCreate, token: str Depends(oauth2_scheme)): 创建一篇新博客文章原始内容 new_post { id: len(fake_db_posts) 1, title: post.title, content: post.raw_content, status: draft } fake_db_posts.append(new_post) return {message: 文章创建成功, post_id: new_post[id]} app.post(/api/ai/generate) async def generate_content_with_ai(request: BlogPostAIRequest, token: str Depends(oauth2_scheme)): 核心功能请求AI生成或润色博客内容 # 1. 构建给AI的提示词Prompt # 这是影响生成质量的关键步骤你可以设计得更精细 system_prompt 你是一位资深技术博主擅长撰写清晰、易懂的技术文章。 user_prompt f请以{request.style}的风格撰写一篇{request.length}长度的文章。主题或要求是{request.instruction} full_prompt f{system_prompt}\n\n用户指令{user_prompt} # 2. 调用AI服务 generated_text await call_ai_service(full_prompt) # 3. 返回结果 return { instruction: request.instruction, generated_content: generated_text } app.get(/api/posts) async def get_posts(token: str Depends(oauth2_scheme)): 获取文章列表 return {posts: fake_db_posts} if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)这段代码搭建了后端的几个核心接口用户登录模拟、创建普通博客文章以及最重要的——向AI服务请求生成内容。call_ai_service函数是连接我们自建AI模型的桥梁。你可以通过运行python main.py来启动后端服务它默认会在http://localhost:8000运行。访问http://localhost:8000/docs就能看到FastAPI自动生成的漂亮API文档并可以就地测试接口。后端跑起来了我们再来给这个系统装上“大脑”。4. 部署与集成InternLM2-Chat-1.8B模型服务现在我们来部署本次项目的智能核心——InternLM2-Chat-1.8B模型。我们将它作为一个独立的服务启动这样后端就可以通过HTTP请求来调用它。首先为AI服务创建一个新的目录和独立环境。# 在项目根目录下 cd /path/to/smart-blog-system mkdir ai-service cd ai-service # 创建AI服务的独立环境 conda create -n smart-blog-ai python3.10 conda activate smart-blog-ai然后安装运行模型所需的核心库。创建ai-service/requirements.txttorch2.0.0 transformers4.35.0 accelerate0.24.0 fastapi0.104.1 uvicorn[standard]0.24.0 sentencepiece # 用于分词运行pip install -r requirements.txt进行安装。如果你有GPU并希望加速请确保安装的是支持CUDA的PyTorch版本可从PyTorch官网获取对应命令。接下来我们需要下载模型。这里有两种方式从Hugging Face直接下载推荐# 在Python脚本中或交互式环境中运行 from transformers import AutoTokenizer, AutoModelForCausalLM model_name internlm/internlm2-chat-1_8b tokenizer AutoTokenizer.from_pretrained(model_name, trust_remote_codeTrue) model AutoModelForCausalLM.from_pretrained(model_name, trust_remote_codeTrue, torch_dtypetorch.float16) # 使用半精度节省显存 # 保存到本地目录例如 ./model model.save_pretrained(./model) tokenizer.save_pretrained(./model)使用Modelscope国内镜像速度可能更快from modelscope import snapshot_download model_dir snapshot_download(Shanghai_AI_Laboratory/internlm2-chat-1_8b)模型准备好之后我们编写AI服务的启动脚本。创建ai-service/main.pyfrom fastapi import FastAPI from pydantic import BaseModel from transformers import AutoTokenizer, AutoModelForCausalLM import torch import uvicorn from contextlib import asynccontextmanager # 定义请求和响应模型 class GenerationRequest(BaseModel): prompt: str max_tokens: int 500 temperature: float 0.7 class GenerationResponse(BaseModel): text: str # 生命周期管理启动时加载模型关闭时清理 asynccontextmanager async def lifespan(app: FastAPI): # 启动时加载模型 print(正在加载InternLM2-Chat-1.8B模型...) global tokenizer, model model_path ./model # 修改为你的模型实际路径 tokenizer AutoTokenizer.from_pretrained(model_path, trust_remote_codeTrue) model AutoModelForCausalLM.from_pretrained( model_path, trust_remote_codeTrue, torch_dtypetorch.float16, # 半精度节省显存 device_mapauto # 自动分配设备CPU/GPU ) print(模型加载完毕) yield # 关闭时清理如果有需要 print(正在清理模型...) # 创建FastAPI应用并绑定生命周期 app FastAPI(titleInternLM2-Chat-1.8B 模型服务, lifespanlifespan) app.post(/generate) async def generate_text(request: GenerationRequest): 接收prompt调用模型生成文本 try: # 将输入文本转换为模型可接受的格式 inputs tokenizer(request.prompt, return_tensorspt).to(model.device) # 调用模型生成 with torch.no_grad(): outputs model.generate( **inputs, max_new_tokensrequest.max_tokens, temperaturerequest.temperature, do_sampleTrue # 启用采样以使用temperature ) # 解码生成的token为文本 generated_text tokenizer.decode(outputs[0], skip_special_tokensTrue) # 简单处理移除输入的prompt部分只返回新生成的内容 # 注意这是一个简单实现对于对话模型更复杂的处理可能更好 response_text generated_text[len(request.prompt):].strip() return GenerationResponse(textresponse_text) except Exception as e: return GenerationResponse(textf生成过程中出现错误: {str(e)}) app.get(/health) async def health_check(): return {status: healthy, model: InternLM2-Chat-1.8B} if __name__ __main__: # 注意AI服务运行在另一个端口避免与后端冲突 uvicorn.run(app, host0.0.0.0, port8001)这个服务启动后就提供了一个/generate接口。它接收包含提示词prompt的请求调用加载好的InternLM2模型生成文本再返回结果。现在你可以启动这个AI服务了cd /path/to/smart-blog-system/ai-service conda activate smart-blog-ai python main.py看到“模型加载完毕”的日志后AI服务就在http://localhost:8001准备就绪了。你可以用curl或Postman测试一下curl -X POST http://localhost:8001/generate \ -H Content-Type: application/json \ -d {prompt: 请用简单的语言解释一下什么是机器学习, max_tokens: 200}大脑和中枢都准备好了最后我们给系统做个好看的“脸面”。5. 构建前端用户界面前端是用户直接交互的地方。我们需要两个主要页面一个是普通的博客文章列表和编辑页另一个是调用AI的智能创作页。这里我们用Vue 3和Element Plus组件库来快速搭建。首先在前端项目里安装Element Plus。cd /path/to/smart-blog-system/frontend npm install element-plus element-plus/icons-vue然后我们修改src/App.vue设置路由和整体布局。接着创建两个核心页面组件。1. 智能创作页面 (src/views/AICreation.vue)这个页面是亮点用户在这里输入指令让AI帮忙写文章。template div classai-creation h2 智能创作助手/h2 el-form :modelform label-width100px el-form-item label创作指令 el-input v-modelform.instruction typetextarea :rows3 placeholder告诉AI你想写什么例如写一篇关于FastAPI快速入门的教程 / /el-form-item el-form-item label文章风格 el-select v-modelform.style placeholder请选择 el-option label技术博客 value技术博客 / el-option label轻松随笔 value轻松随笔 / el-option label项目报告 value项目报告 / /el-select /el-form-item el-form-item label文章长度 el-radio-group v-modelform.length el-radio label简短简短/el-radio el-radio label中等中等/el-radio el-radio label详细详细/el-radio /el-radio-group /el-form-item el-form-item el-button typeprimary clickgenerateWithAI :loadingloading {{ loading ? AI思考中... : 开始创作 }} /el-button el-button clickresetForm重置/el-button /el-form-item /el-form el-divider / div v-ifresult.generatedContent h3✨ AI生成结果/h3 el-alert :title根据指令『${result.instruction}』生成 typesuccess :closablefalse / div classresult-content !-- 使用一个只读的富文本编辑器或简单文本框展示 -- el-input v-modelresult.generatedContent typetextarea :rows15 readonly / /div div classaction-buttons el-button typesuccess clickuseAsDraft用作草稿/el-button el-button clickcopyToClipboard复制内容/el-button /div /div /div /template script setup import { ref, reactive } from vue import { ElMessage } from element-plus import axios from axios // 配置后端API地址根据你的实际部署地址修改 const API_BASE http://localhost:8000 const form reactive({ instruction: , style: 技术博客, length: 中等 }) const result reactive({ instruction: , generatedContent: }) const loading ref(false) const generateWithAI async () { if (!form.instruction.trim()) { ElMessage.warning(请输入创作指令) return } loading.value true try { // 调用我们在后端定义的 /api/ai/generate 接口 const response await axios.post(${API_BASE}/api/ai/generate, form, { headers: { // 注意实际项目中这里需要携带有效的认证token Authorization: Bearer fake-token-for-demo } }) result.instruction response.data.instruction result.generatedContent response.data.generated_content ElMessage.success(AI创作完成) } catch (error) { console.error(调用AI失败:, error) ElMessage.error(创作失败请检查网络或后端服务) } finally { loading.value false } } const resetForm () { form.instruction form.style 技术博客 form.length 中等 result.generatedContent } const useAsDraft () { ElMessage.info(功能开发中将内容保存为草稿) // 这里可以跳转到文章编辑页并填充内容 } const copyToClipboard async () { try { await navigator.clipboard.writeText(result.generatedContent) ElMessage.success(内容已复制到剪贴板) } catch (err) { ElMessage.error(复制失败) } } /script style scoped .ai-creation { max-width: 900px; margin: 0 auto; padding: 20px; } .result-content { margin-top: 20px; } .action-buttons { margin-top: 20px; } /style2. 博客文章管理页面 (src/views/BlogPosts.vue)这个页面负责展示文章列表和创建普通文章代码结构类似主要是调用后端的/api/posts接口进行增删改查。由于篇幅限制这里不展开全部代码其核心是使用axios调用GET /api/posts获取文章列表并展示。提供一个表单调用POST /api/posts创建新文章。可以添加编辑和删除功能调用相应的后端接口。最后配置路由在src/router/index.js中将这两个页面挂载到导航菜单上。完成前端代码后在frontend目录下运行npm run dev就可以在浏览器中访问http://localhost:5173看到你的智能博客系统前端了。6. 联调测试与项目总结到了最激动人心的环节——把前后端和AI服务串联起来看看整个系统能不能跑通。第一步启动所有服务打开三个终端窗口分别运行AI模型服务在ai-service目录下python main.py(端口 8001)后端API服务在backend目录下python main.py(端口 8000)前端开发服务器在frontend目录下npm run dev(端口 5173)确保它们都启动成功没有报错。第二步测试核心流程打开浏览器访问http://localhost:5173。导航到“智能创作”页面。在输入框里试着写一个指令比如“用通俗的语言介绍一下什么是神经网络”。选择风格为“技术博客”长度“中等”点击“开始创作”。观察页面状态。如果一切正常按钮会显示“AI思考中...”几秒到几十秒后取决于你的硬件下方会显示出AI生成的文章内容。测试“复制内容”或“用作草稿”按钮草稿功能需你后续完善。可能遇到的问题与排查前端调用后端失败打开浏览器开发者工具F12的“网络(Network)”标签查看API请求是否返回错误如404或500。检查前端代码中的API_BASE地址是否正确以及后端服务是否在运行。后端调用AI服务失败查看后端服务的运行日志。确认AI_SERVICE_URL配置是否正确默认http://localhost:8001。可以在后端机器上用curl http://localhost:8001/health测试AI服务是否健康。AI生成速度慢或没反应如果是CPU运行生成几百字可能需要较长时间几十秒。查看AI服务日志确认模型是否加载成功是否有生成进度。如果使用GPU但依然很慢检查CUDA和PyTorch的GPU版本是否安装正确。整个项目走下来我们从零搭建了一个具备AI能力的全栈应用。前端负责交互后端负责业务逻辑和调度而InternLM2-Chat-1.8B模型则作为独立的智能服务提供核心能力。这种解耦的设计让系统更清晰也更容易维护和扩展。你可以在这个基础上做很多有趣的改进比如完善真实的用户登录和数据库增加文章发布、评论功能尝试设计更复杂的Prompt让AI写出更符合你要求的文章或者把这个AI服务封装成Docker镜像方便部署到云服务器上。动手实践是学习技术最好的方式。希望这个项目能帮你打通大模型应用开发的“任督二脉”感受到将AI模型集成到真实产品中的乐趣和挑战。接下来就轮到你发挥创意去打造属于自己的智能应用了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。