deepseek vue本地大模型展示

### 集成 DeepSeek 大规模预训练模型到 Vue 项目 #### 准备工作 为了在 Vue 项目中集成并展示本地的大规模预训练模型，需先完成环境配置。确保已安装 Node.js 和 npm 或 yarn 工具链，并创建一个新的 Vue 项目或使用现有项目。 #### 安装依赖库 通过命令行工具进入项目的根目录，执行如下操作来安装必要的 Python 环境和支持包： ```bash pip install torch transformers npm install axios vue-axios ``` 上述命令分别用于安装 PyTorch 及 HuggingFace 的 `transformers` 库以加载 DeepSeek 模型[^1]，以及前端所需的 HTTP 请求中间件和其对应的 Vue 插件。 #### 加载模型和服务化部署 编写简单的 Flask API 来提供预测服务，保存为 `app.py` 文件: ```python from flask import Flask, request, jsonify import torch from transformers import AutoModelForCausalLM, AutoTokenizer model_name_or_path = "./path_to_your_deepseek_model" tokenizer = AutoTokenizer.from_pretrained(model_name_or_path) model = AutoModelForCausalLM.from_pretrained(model_name_or_path) app = Flask(__name__) @app.route('/predict', methods=['POST']) def predict(): data = request.json inputs = tokenizer(data['text'], return_tensors="pt") outputs = model.generate(**inputs) result = tokenizer.decode(outputs[0], skip_special_tokens=True) return jsonify({"response": result}) if __name__ == "__main__": app.run(port=5000) ``` 这段代码实现了基于 POST 方法接收输入文本并通过 DeepSeek 进行推理返回响应的功能[^2]。 #### 创建 Vue 组件调用接口 接下来，在 Vue 中定义组件负责发送请求给刚才搭建的服务端点，并显示结果。这里给出简化版的 `.vue` 单文件组件例子： ```html <template> <div id="deepseek-demo"> <textarea v-model="inputText"></textarea><br/> <button @click="getPrediction">获取回复</button><br/> <div>{{ outputResponse }}</div> </div> </template> <script> export default { name: 'DeepSeekDemo', data() { return { inputText: '', outputResponse: '' } }, methods: { async getPrediction() { try { const response = await this.$http.post('http://localhost:5000/predict', { text: this.inputText }); this.outputResponse = response.data.response; } catch (error) { console.error(error); } } } } </script> ``` 此部分利用了之前提到过的 RESTful API 设计原则，使得交互更加直观友好[^3]。 #### 启动应用测试效果 最后一步就是启动整个应用程序来进行实际验证。首先开启后端服务器： ```bash python app.py ``` 随后运行 Vue 开发服务器查看页面表现情况。