📱 JARVIS 手机版 · 完整教学文件

来自 Abby FlowAI(@abby_flowai)· 「我把公司交给 AI 管」教学篇

💡 最懒的用法:把这整份文件复制丢给你的 AI(Claude / ChatGPT / Gemini), 对它说:「按这份文件帮我把 JARVIS 装进手机,我的系统是 Mac/Windows,我用的模型是 ____」, 然后照它的指示做就行。

你会得到什么

手机主屏幕上出现一个 JARVIS App 图标,点开就是你自己的 AI 聊天界面—— 用你电脑上现有的 API Key,大脑还是那个大脑,只是多了手机入口。

STEP 0 · 前提

STEP 1+2 · 建文件夹(网页入口 + 手机画面)

phone_app/
├─ server.py            # Flask · /ask → 你的 AI
└─ static/
   ├─ index.html        # 手机聊天画面
   ├─ manifest.webmanifest
   ├─ sw.js             # App 安装设定
   └─ icon-512.png      # 512×512 App 图标(随便放一张方图)

server.py(Gemini 版示例,其他模型让你的 AI 帮你改):

from flask import Flask, request, jsonify, send_from_directory
import google.generativeai as genai

genai.configure(api_key="你的_API_KEY")  # 用你现有那把
SYSTEM_PROMPT = "你是 JARVIS,我的 AI 总管。回复简洁、直接、像钢铁侠里的贾维斯。"
model = genai.GenerativeModel("gemini-2.0-flash", system_instruction=SYSTEM_PROMPT)

app = Flask(__name__, static_folder="static")

@app.route("/")
def home():
    return send_from_directory("static", "index.html")

@app.route("/ask", methods=["POST"])
def ask():
    q = request.json.get("q", "")
    r = model.generate_content(q)
    return jsonify({"a": r.text})

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

static/index.html(极简聊天界面,深色 + 金色,Abby 同款配色):

<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/static/manifest.webmanifest">
<title>JARVIS</title>
<style>
body{margin:0;font-family:-apple-system,sans-serif;background:#111;color:#eee;
display:flex;flex-direction:column;height:100vh}
header{padding:14px;text-align:center;color:#FFC53D;font-weight:800;
border-bottom:1px solid #333}
#log{flex:1;overflow-y:auto;padding:14px}
.me{background:#FFC53D;color:#111;border-radius:14px;padding:10px 14px;
margin:8px 0 8px auto;max-width:80%;width:fit-content}
.ai{background:#26232b;border-radius:14px;padding:10px 14px;margin:8px 0;max-width:80%}
form{display:flex;gap:8px;padding:12px;border-top:1px solid #333}
input{flex:1;background:#26232b;border:none;border-radius:12px;
padding:12px;color:#eee;font-size:16px}
button{background:#FFC53D;border:none;border-radius:12px;padding:0 18px;font-weight:800}
</style></head><body>
<header>JARVIS · AI Command Center</header>
<div id="log"></div>
<form onsubmit="send(event)">
<input id="q" placeholder="Ask JARVIS anything..." autocomplete="off">
<button>发送</button></form>
<script>
if("serviceWorker" in navigator) navigator.serviceWorker.register("/static/sw.js");
async function send(e){
  e.preventDefault();
  const q=document.getElementById("q");
  if(!q.value.trim())return;
  add("me",q.value);
  const text=q.value; q.value="";
  const r=await fetch("/ask",{method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({q:text})});
  const d=await r.json();
  add("ai",d.a);
}
function add(cls,txt){
  const div=document.createElement("div");
  div.className=cls; div.textContent=txt;
  const log=document.getElementById("log");
  log.appendChild(div); log.scrollTop=log.scrollHeight;
}
</script></body></html>

static/manifest.webmanifest:

{
  "name": "JARVIS",
  "short_name": "JARVIS",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#111111",
  "theme_color": "#111111",
  "icons": [{ "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}

static/sw.js(最简版,让浏览器允许安装):

self.addEventListener("install", () => self.skipWaiting());
self.addEventListener("fetch", () => {});

STEP 3 · 让手机安全连进来(Cloudflare 隧道,免费)

手机 App 规定必须走 https。三句指令:

# Mac
brew install cloudflared
# Windows(管理员 PowerShell)
winget install --id Cloudflare.cloudflared

# 窗口 1:启动 JARVIS 入口
python3 server.py

# 窗口 2:开隧道
cloudflared tunnel --url http://localhost:5000

它会生成一条网址:https://xxxx-xxxx.trycloudflare.com ← 手机打开这条

⚠️ 电脑一关,手机就连不上(大脑在你电脑上)。每次重开隧道,网址会变,重新打开新网址即可。

STEP 4 · 装进手机主屏幕

iPhone · Safari:分享 → 加入主屏幕 → 命名 JARVIS → 加入
Android · Chrome:右上「⋮」→ 安装应用程式 → 确认

常见问题

🔔 进阶:推送通知(iPhone 需 iOS 16.4+,先完成加入主屏幕)—— 把这份文件给你的 AI,说「帮我加上 Web Push 通知功能」,它会帮你在 sw.js 和 server.py 里补上。