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

Phi-4-mini-reasoning Chainlit移动端适配：PWA打包与iOS/Android离线访问教程

news 2026/6/1 18:56:16

Phi-4-mini-reasoning Chainlit移动端适配：PWA打包与iOS/Android离线访问教程

1. 项目概述

Phi-4-mini-reasoning是一个轻量级开源模型，专注于高质量推理任务。它基于合成数据构建，特别优化了数学推理能力，支持128K令牌的超长上下文处理。本教程将指导您如何将这个强大的模型通过Chainlit前端适配到移动设备，实现PWA打包和离线访问功能。

2. 环境准备

2.1 基础环境确认

在开始移动端适配前，请确保您已经完成以下准备工作：

已成功部署Phi-4-mini-reasoning模型服务
Chainlit前端能够正常调用模型
具备基本的Web开发环境（Node.js 16+）

您可以通过以下命令验证模型服务状态：

cat /root/workspace/llm.log

2.2 移动端适配工具准备

我们需要以下工具来实现PWA打包：

Workbox：用于生成Service Worker
Webpack或Vite：构建工具
@vitejs/plugin-pwa（如使用Vite）
Manifest文件生成工具

3. PWA配置实现

3.1 创建Web应用清单

在项目public目录下创建manifest.json文件：

{ "name": "Phi-4推理助手", "short_name": "Phi4AI", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90e2", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

3.2 配置Service Worker

使用Workbox创建Service Worker脚本（sw.js）：

import { precacheAndRoute } from 'workbox-precaching'; import { registerRoute } from 'workbox-routing'; import { StaleWhileRevalidate } from 'workbox-strategies'; // 预缓存关键资源 precacheAndRoute(self.__WB_MANIFEST); // 缓存API响应 registerRoute( ({url}) => url.pathname.startsWith('/api/'), new StaleWhileRevalidate({ cacheName: 'api-cache', }) );

4. Chainlit移动端适配

4.1 响应式布局调整

修改Chainlit前端代码，确保界面适配移动设备：

from chainlit import Chainlit import chainlit.components as c app = Chainlit() # 添加移动端meta标签 app.add_head( c.meta( name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" ) ) # 响应式样式调整 app.add_style(""" @media (max-width: 768px) { .chat-container { width: 100% !important; padding: 10px !important; } .input-area { flex-direction: column !important; } } """)

4.2 离线功能增强

为Chainlit添加离线检测和处理逻辑：

// 在Chainlit前端添加离线检测 window.addEventListener('load', () => { function updateOnlineStatus() { if (!navigator.onLine) { showOfflineMessage(); } } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); updateOnlineStatus(); }); function showOfflineMessage() { // 显示离线提示 }

5. 构建与打包

5.1 使用Vite构建PWA

安装必要依赖：

npm install @vitejs/plugin-pwa workbox-window

配置vite.config.js：

import { defineConfig } from 'vite' import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ plugins: [ VitePWA({ registerType: 'autoUpdate', manifest: { // 使用之前创建的manifest配置 }, workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg}'] } }) ] })

5.2 构建命令

执行构建：

npm run build

构建完成后，将生成可用于PWA部署的dist目录。

6. 平台特定适配

6.1 iOS适配技巧

在index.html中添加iOS特定meta标签：

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="/icons/icon-192x192.png">

6.2 Android适配技巧

创建Android Web App Manifest：

// 在manifest.json中添加 "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app" }]

7. 测试与部署

7.1 本地测试

使用http-server测试PWA功能：

npm install -g http-server http-server dist -p 8080

测试要点：

离线访问功能
添加到主屏幕
推送通知（如配置）

7.2 生产部署

推荐部署方式：

静态文件托管（Netlify/Vercel）
Nginx配置
Docker容器部署

Nginx配置示例：

server { listen 80; server_name your-domain.com; location / { root /path/to/dist; try_files $uri $uri/ /index.html; # PWA缓存策略 add_header Cache-Control "no-cache"; if ($request_filename ~* ^.*\.(json)$) { add_header Cache-Control "no-store"; } } }