ollama运行Phi-4-mini-reasoning详细教程：含API封装、Flask接口与前端对接示例

ollama运行Phi-4-mini-reasoning详细教程含API封装、Flask接口与前端对接示例如果你对轻量级但推理能力强大的AI模型感兴趣那么Phi-4-mini-reasoning绝对值得一试。这个模型虽然体积小巧但在数学和逻辑推理任务上表现不俗特别适合部署在个人电脑或资源有限的环境中。今天这篇文章我会带你从零开始完成Phi-4-mini-reasoning的本地部署、API接口封装并最终搭建一个简单的前端页面来调用它。整个过程就像搭积木一步步来你会发现把AI模型变成可用的服务其实并不复杂。1. 环境准备与ollama部署首先我们需要一个运行模型的环境。ollama是一个非常好用的工具它让大模型的本地部署变得像安装普通软件一样简单。1.1 安装ollamaollama支持Windows、macOS和Linux系统。这里以Linux/macOS为例Windows用户可以直接下载安装包。打开终端执行以下命令一键安装curl -fsSL https://ollama.ai/install.sh | sh安装完成后启动ollama服务ollama serve服务启动后它会默认在本地11434端口运行。你可以打开浏览器访问http://localhost:11434如果看到ollama的API文档页面说明安装成功。1.2 拉取Phi-4-mini-reasoning模型模型已经准备好了我们只需要把它下载到本地。在终端中执行ollama pull phi-4-mini-reasoning:latest这个命令会从ollama的模型库中拉取最新版的Phi-4-mini-reasoning。根据你的网络速度可能需要等待几分钟。下载完成后你可以用下面的命令验证模型是否可用ollama run phi-4-mini-reasoning:latest运行后会进入一个交互式界面你可以直接输入问题测试模型比如输入Hello, how are you?看看模型的回复是否正常。按CtrlD可以退出交互模式。2. 基础使用与模型测试在封装API之前我们先熟悉一下模型的基本能力这样后面设计接口时心里更有数。2.1 通过命令行测试模型ollama提供了简单的命令行接口我们可以先试试模型的基本功能。创建一个测试文件test_model.pyimport requests import json def test_phi4_mini(): # ollama的API地址 url http://localhost:11434/api/generate # 请求参数 payload { model: phi-4-mini-reasoning:latest, prompt: 请解释什么是勾股定理并给出一个例子。, stream: False # 设置为False一次性返回完整结果 } # 发送请求 response requests.post(url, jsonpayload) if response.status_code 200: result response.json() print(模型回复) print(result[response]) print(f\n生成耗时{result.get(total_duration, 0) / 1e9:.2f}秒) else: print(f请求失败状态码{response.status_code}) print(response.text) if __name__ __main__: test_phi4_mini()运行这个脚本你应该能看到模型对勾股定理的解释。这个测试很重要它确认了三件事ollama服务正常运行模型加载成功基础API调用方式正确2.2 了解模型特性Phi-4-mini-reasoning有以下几个特点我们在设计接口时需要考虑到推理能力强特别擅长数学和逻辑问题上下文长度大支持128K tokens可以处理很长的对话响应速度快相比大模型它的生成速度更快资源占用少可以在消费级GPU甚至CPU上运行你可以多测试几个不同类型的问题感受一下模型的能力边界test_cases [ 计算15 × 24 38 ÷ 2, 用Python写一个函数判断一个数是否为素数, 简述光合作用的过程, 推理如果所有猫都怕水而Tom是一只猫那么Tom怕水吗 ]3. 使用Flask封装RESTful API现在进入正题我们要把模型包装成一个标准的Web API这样任何程序都能通过HTTP请求来调用它。3.1 创建Flask应用首先安装必要的依赖pip install flask flask-cors然后创建app.py文件这是我们的主程序from flask import Flask, request, jsonify from flask_cors import CORS import requests import json import time app Flask(__name__) CORS(app) # 允许跨域请求方便前端调用 # ollama API配置 OLLAMA_URL http://localhost:11434/api/generate MODEL_NAME phi-4-mini-reasoning:latest app.route(/api/health, methods[GET]) def health_check(): 健康检查接口 try: # 尝试调用ollama验证服务状态 test_payload { model: MODEL_NAME, prompt: test, stream: False, max_tokens: 1 } response requests.post(OLLAMA_URL, jsontest_payload, timeout5) if response.status_code 200: return jsonify({ status: healthy, model: MODEL_NAME, ollama_status: running }) else: return jsonify({ status: unhealthy, error: fOllama returned status {response.status_code} }), 500 except Exception as e: return jsonify({ status: unhealthy, error: str(e) }), 500 app.route(/api/chat, methods[POST]) def chat(): 主要的聊天接口 try: # 获取请求数据 data request.json if not data or message not in data: return jsonify({error: 缺少message参数}), 400 user_message data[message] # 可选的参数 max_tokens data.get(max_tokens, 500) temperature data.get(temperature, 0.7) # 构建ollama请求 payload { model: MODEL_NAME, prompt: user_message, stream: False, options: { num_predict: max_tokens, temperature: temperature, top_p: 0.9, repeat_penalty: 1.1 } } # 记录开始时间 start_time time.time() # 发送请求到ollama response requests.post(OLLAMA_URL, jsonpayload) # 计算耗时 elapsed_time time.time() - start_time if response.status_code 200: result response.json() # 构建响应 return jsonify({ success: True, response: result.get(response, ), usage: { prompt_tokens: len(user_message.split()), # 简单估算 completion_tokens: len(result.get(response, ).split()), total_tokens: len(user_message.split()) len(result.get(response, ).split()) }, timing: { total_time: elapsed_time, load_time: result.get(load_duration, 0) / 1e9 if result.get(load_duration) else 0, generate_time: result.get(total_duration, 0) / 1e9 if result.get(total_duration) else 0 } }) else: return jsonify({ success: False, error: f模型服务错误: {response.status_code}, details: response.text }), 500 except requests.exceptions.ConnectionError: return jsonify({ success: False, error: 无法连接到ollama服务请确保ollama正在运行 }), 503 except Exception as e: return jsonify({ success: False, error: f服务器内部错误: {str(e)} }), 500 app.route(/api/models, methods[GET]) def list_models(): 列出可用模型扩展功能 try: # 注意ollama官方API没有直接列出模型的端点 # 这里我们可以检查预设模型是否可用 return jsonify({ available_models: [MODEL_NAME], current_model: MODEL_NAME }) except Exception as e: return jsonify({error: str(e)}), 500 if __name__ __main__: # 启动Flask应用 print(f启动Phi-4-mini-reasoning API服务...) print(f模型: {MODEL_NAME}) print(fAPI地址: http://localhost:5000) print(f健康检查: http://localhost:5000/api/health) print(f聊天接口: POST http://localhost:5000/api/chat) app.run(host0.0.0.0, port5000, debugTrue)3.2 启动和测试API服务保存好app.py后在终端中运行python app.py你会看到服务启动信息。现在我们可以测试API是否正常工作。打开另一个终端用curl测试健康检查接口curl http://localhost:5000/api/health应该看到类似这样的响应{ model: phi-4-mini-reasoning:latest, ollama_status: running, status: healthy }再测试聊天接口curl -X POST http://localhost:5000/api/chat \ -H Content-Type: application/json \ -d {message: 你好请介绍一下你自己}如果一切正常你会收到模型的回复。这个API现在已经可以对外提供服务了。3.3 API接口文档我们创建的API有三个主要端点端点方法功能请求示例/api/healthGET健康检查curl http://localhost:5000/api/health/api/chatPOST聊天对话curl -X POST http://localhost:5000/api/chat -H Content-Type: application/json -d {message:你好}/api/modelsGET列出模型curl http://localhost:5000/api/models聊天接口的完整请求参数{ message: 你的问题或对话内容, max_tokens: 500, // 可选最大生成token数 temperature: 0.7 // 可选生成温度控制随机性 }响应格式{ success: true, response: 模型的回复内容, usage: { prompt_tokens: 10, completion_tokens: 50, total_tokens: 60 }, timing: { total_time: 1.23, load_time: 0.12, generate_time: 1.11 } }4. 构建简单前端界面有了后端API我们现在可以创建一个简单的前端页面让用户通过浏览器直接与模型交互。4.1 创建HTML页面新建一个index.html文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePhi-4-mini-reasoning 聊天界面/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 900px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; } .header h1 { font-size: 2.2rem; margin-bottom: 10px; } .header p { opacity: 0.9; font-size: 1.1rem; } .status-bar { background: #f8f9fa; padding: 15px 30px; border-bottom: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; } .status-indicator { display: flex; align-items: center; gap: 10px; } .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #28a745; } .status-dot.offline { background: #dc3545; } .chat-container { display: flex; height: 500px; } .chat-history { flex: 1; padding: 20px; overflow-y: auto; border-right: 1px solid #e9ecef; } .message { margin-bottom: 20px; padding: 15px; border-radius: 10px; max-width: 80%; } .user-message { background: #e3f2fd; margin-left: auto; border-bottom-right-radius: 5px; } .bot-message { background: #f5f5f5; margin-right: auto; border-bottom-left-radius: 5px; } .message-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; color: #666; } .input-area { padding: 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; } .input-group { display: flex; gap: 10px; } textarea { flex: 1; padding: 15px; border: 2px solid #e9ecef; border-radius: 10px; font-size: 1rem; resize: none; font-family: inherit; transition: border-color 0.3s; } textarea:focus { outline: none; border-color: #667eea; } button { padding: 0 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, opacity 0.2s; } button:hover { transform: translateY(-2px); opacity: 0.9; } button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .controls { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; } .control-group { display: flex; align-items: center; gap: 8px; } label { font-size: 0.9rem; color: #666; } input[typerange] { width: 150px; } .usage-info { font-size: 0.85rem; color: #666; margin-top: 10px; padding: 10px; background: white; border-radius: 5px; border: 1px solid #e9ecef; } media (max-width: 768px) { .chat-container { flex-direction: column; height: auto; } .chat-history { height: 400px; border-right: none; border-bottom: 1px solid #e9ecef; } .container { margin: 10px; } } /style /head body div classcontainer div classheader h1Phi-4-mini-reasoning 智能助手/h1 p轻量级推理模型 · 本地部署 · 实时对话/p /div div classstatus-bar div classstatus-indicator div classstatus-dot idstatusDot/div span idstatusText检查服务状态.../span /div div idmodelInfo模型: phi-4-mini-reasoning:latest/div /div div classchat-container div classchat-history idchatHistory !-- 聊天记录会动态添加到这里 -- div classmessage bot-message div classmessage-header strongPhi-4-mini-reasoning/strong span系统/span /div div classmessage-content 你好我是Phi-4-mini-reasoning一个专注于推理的AI助手。我可以帮你解答数学问题、逻辑推理、编程问题等。有什么可以帮你的吗 /div /div /div /div div classinput-area div classinput-group textarea idmessageInput placeholder输入你的问题...按ShiftEnter换行Enter发送 rows3 /textarea button idsendButton发送/button /div div classcontrols div classcontrol-group label formaxTokens生成长度:/label input typerange idmaxTokens min50 max2000 value500 step50 span idmaxTokensValue500 tokens/span /div div classcontrol-group label fortemperature随机性:/label input typerange idtemperature min0 max1 value0.7 step0.1 span idtemperatureValue0.7/span /div button idclearButton清空对话/button button idexampleButton示例问题/button /div div classusage-info idusageInfo 等待对话开始... /div /div /div script // API配置 const API_BASE_URL http://localhost:5000; // DOM元素 const chatHistory document.getElementById(chatHistory); const messageInput document.getElementById(messageInput); const sendButton document.getElementById(sendButton); const clearButton document.getElementById(clearButton); const exampleButton document.getElementById(exampleButton); const statusDot document.getElementById(statusDot); const statusText document.getElementById(statusText); const usageInfo document.getElementById(usageInfo); const maxTokensSlider document.getElementById(maxTokens); const maxTokensValue document.getElementById(maxTokensValue); const temperatureSlider document.getElementById(temperature); const temperatureValue document.getElementById(temperatureValue); // 更新滑块显示 maxTokensSlider.addEventListener(input, () { maxTokensValue.textContent ${maxTokensSlider.value} tokens; }); temperatureSlider.addEventListener(input, () { temperatureValue.textContent temperatureSlider.value; }); // 检查服务状态 async function checkServiceStatus() { try { const response await fetch(${API_BASE_URL}/api/health); if (response.ok) { const data await response.json(); statusDot.className status-dot; statusText.textContent 服务正常 (模型: ${data.model}); return true; } else { throw new Error(服务响应异常); } } catch (error) { statusDot.className status-dot offline; statusText.textContent 服务离线 - 请确保后端服务正在运行; return false; } } // 添加消息到聊天记录 function addMessage(content, isUser false) { const messageDiv document.createElement(div); messageDiv.className message ${isUser ? user-message : bot-message}; const now new Date(); const timeString now.toLocaleTimeString([], { hour: 2-digit, minute: 2-digit }); messageDiv.innerHTML div classmessage-header strong${isUser ? 你 : Phi-4-mini-reasoning}/strong span${timeString}/span /div div classmessage-content${content}/div ; chatHistory.appendChild(messageDiv); chatHistory.scrollTop chatHistory.scrollHeight; } // 发送消息到API async function sendMessage() { const message messageInput.value.trim(); if (!message) return; // 禁用输入和按钮 messageInput.disabled true; sendButton.disabled true; sendButton.textContent 思考中...; // 添加用户消息 addMessage(message, true); // 清空输入框 messageInput.value ; try { const response await fetch(${API_BASE_URL}/api/chat, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ message: message, max_tokens: parseInt(maxTokensSlider.value), temperature: parseFloat(temperatureSlider.value) }) }); if (response.ok) { const data await response.json(); if (data.success) { // 添加AI回复 addMessage(data.response); // 更新使用信息 usageInfo.innerHTML 本次生成耗时: ${data.timing.total_time.toFixed(2)}秒 | 输入token: ${data.usage.prompt_tokens} | 输出token: ${data.usage.completion_tokens} | 总token: ${data.usage.total_tokens} ; } else { addMessage(抱歉出错了: ${data.error}); } } else { throw new Error(HTTP错误: ${response.status}); } } catch (error) { addMessage(请求失败: ${error.message}。请检查后端服务是否运行。); } finally { // 恢复输入和按钮 messageInput.disabled false; sendButton.disabled false; sendButton.textContent 发送; messageInput.focus(); } } // 清空对话 function clearChat() { if (confirm(确定要清空所有对话记录吗)) { chatHistory.innerHTML div classmessage bot-message div classmessage-header strongPhi-4-mini-reasoning/strong span系统/span /div div classmessage-content 对话已清空。我是Phi-4-mini-reasoning一个专注于推理的AI助手。有什么可以帮你的吗 /div /div ; usageInfo.textContent 等待对话开始...; } } // 添加示例问题 function addExampleQuestions() { const examples [ 计算15 × 24 38 ÷ 2, 用Python写一个函数判断一个数是否为素数, 简述光合作用的过程, 推理如果所有猫都怕水而Tom是一只猫那么Tom怕水吗, 解释什么是区块链技术, 帮我写一个简单的HTML登录页面 ]; const randomExample examples[Math.floor(Math.random() * examples.length)]; messageInput.value randomExample; messageInput.focus(); } // 事件监听 sendButton.addEventListener(click, sendMessage); messageInput.addEventListener(keydown, (e) { if (e.key Enter !e.shiftKey) { e.preventDefault(); sendMessage(); } }); clearButton.addEventListener(click, clearChat); exampleButton.addEventListener(click, addExampleQuestions); // 初始化 window.addEventListener(DOMContentLoaded, () { // 检查服务状态 checkServiceStatus(); // 定期检查状态每30秒 setInterval(checkServiceStatus, 30000); // 聚焦输入框 messageInput.focus(); }); /script /body /html4.2 启动完整系统现在我们有三个部分需要运行ollama服务模型运行环境Flask API服务后端接口前端页面用户界面按照以下步骤启动完整系统步骤1启动ollama服务# 在新终端中运行 ollama serve步骤2启动Flask API服务# 在另一个终端中进入项目目录 python app.py步骤3打开前端页面有两种方式打开前端页面方式一直接浏览器打开双击index.html文件或在浏览器中打开文件。方式二使用Python简单HTTP服务器# 在项目目录中运行 python -m http.server 8000然后在浏览器中访问http://localhost:80004.3 测试完整流程打开前端页面后你应该能看到顶部状态栏显示服务正常绿色圆点聊天区域有模型的欢迎消息底部有输入框和控制面板尝试输入一些问题计算25 × 34 - 78 ÷ 3用JavaScript写一个函数反转字符串解释牛顿第二定律观察模型的回复质量和速度。你还可以调整生成长度和随机性参数看看对回复的影响。5. 常见问题与解决方案在部署和使用过程中你可能会遇到一些问题。这里整理了一些常见问题和解决方法。5.1 ollama服务相关问题问题1ollama serve 启动失败错误端口11434被占用解决# 查找占用端口的进程 sudo lsof -i :11434 # 停止占用进程或更改ollama端口 OLLAMA_HOST0.0.0.0:11435 ollama serve问题2模型下载太慢或失败错误下载超时或网络错误解决# 使用镜像源如果可用 # 或者手动下载模型文件 ollama pull phi-4-mini-reasoning:latest --insecure5.2 Flask API相关问题问题3Flask服务无法连接到ollama错误无法连接到ollama服务解决确保ollama服务正在运行ollama serve检查ollama是否在默认端口curl http://localhost:11434如果端口不同修改app.py中的OLLAMA_URL问题4跨域问题CORS错误前端无法调用后端API解决 我们已经在前端代码中配置了CORS。如果还有问题可以# 在app.py中更详细地配置CORS from flask_cors import CORS CORS(app, resources{r/api/*: {origins: *}})5.3 前端相关问题问题5前端页面无法加载错误空白页面或控制台错误解决检查浏览器控制台F12的错误信息确保Flask服务在运行http://localhost:5000/api/health检查前端代码中的API地址是否正确问题6消息发送后无响应错误按钮一直显示思考中...解决检查网络请求F12 → Network标签查看后端日志是否有错误检查ollama模型是否正常加载5.4 性能优化建议如果你的系统响应较慢可以尝试以下优化优化1调整生成参数# 在app.py的chat接口中调整 payload { model: MODEL_NAME, prompt: user_message, stream: False, options: { num_predict: 200, # 减少生成长度 temperature: 0.5, # 降低随机性 top_p: 0.8, # 降低top_p值 repeat_penalty: 1.0 # 降低重复惩罚 } }优化2使用流式响应修改API支持流式响应让用户看到实时生成过程app.route(/api/chat/stream, methods[POST]) def chat_stream(): 流式聊天接口 data request.json user_message data[message] def generate(): # 构建流式请求 payload { model: MODEL_NAME, prompt: user_message, stream: True # 启用流式 } # 发送流式请求到ollama response requests.post(OLLAMA_URL, jsonpayload, streamTrue) for line in response.iter_lines(): if line: line line.decode(utf-8) if line.startswith(data: ): data json.loads(line[6:]) if response in data: yield fdata: {json.dumps({chunk: data[response]})}\n\n yield data: [DONE]\n\n return Response(generate(), mimetypetext/event-stream)前端也需要相应修改以支持流式显示。6. 总结通过这个教程我们完成了一个完整的Phi-4-mini-reasoning本地部署和应用开发流程。让我们回顾一下关键步骤6.1 核心成果成功部署了Phi-4-mini-reasoning模型使用ollama轻松拉取和运行了这个轻量级推理模型构建了完整的RESTful API用Flask封装了模型接口提供了健康检查、聊天对话等功能开发了用户友好的前端界面创建了直观的Web界面让非技术用户也能方便使用实现了完整的系统集成将模型、后端、前端无缝连接形成了一个可用的AI应用6.2 技术要点回顾ollama的便捷性让大模型部署变得极其简单一条命令就能运行Flask的灵活性快速构建API服务易于扩展和维护前后端分离架构前端专注交互后端专注逻辑便于独立开发和部署完整的错误处理从服务健康检查到用户输入验证都有相应的处理机制6.3 扩展思路这个基础系统还有很多可以扩展的方向添加多轮对话支持目前是单轮对话可以添加对话历史管理实现文件上传功能让模型可以处理上传的文档、图片等添加用户认证为不同用户提供个性化的使用体验集成更多模型除了Phi-4-mini-reasoning还可以集成其他ollama模型部署到服务器将整个系统部署到云服务器提供公开访问6.4 实用建议开发环境建议在Linux或macOS上开发Windows用户可以使用WSL性能监控可以添加日志记录和性能监控了解模型使用情况安全考虑如果部署到公网需要添加速率限制和输入验证备份配置定期备份模型配置和对话记录Phi-4-mini-reasoning虽然体积小但推理能力相当不错特别适合教育、研究、个人助手等场景。通过这个教程你不仅学会了如何部署这个模型更重要的是掌握了将AI模型产品化的完整流程。现在你可以基于这个基础框架开发出更多有趣和实用的AI应用了。无论是个人项目还是商业应用这个技术栈都能为你提供坚实的基础。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。