从简历被拒到用AI提效：一个大专前端的野路子探索
大家好，我是阿强，一个刚入职两个月的大专应届前端。每天8点雷打不动坐在工位上泡枸杞茶（别笑，是真的），一边啃着煎饼果子一边刷掘金。去年秋招时投了47份简历，39个石沉大海，剩下8个面试里有6个问我“为什么学历不是本科”——但好在最终还是靠自学Vue3 + TypeScript + 一些开源项目混进了现在这家公司。
最近我们组接了个新活：给内部运营后台加个“智能文案生成”功能，产品经理说：“用户填几个关键词，AI自动出五条营销文案，要快、要准、还要带点网感。” 我一听就懵了——我连PyTorch都没装过，这不纯纯赶鸭子上架？
但转念一想：这玩意儿要是做成了，下次跳槽简历上就能写“AI+前端融合实践”了，立马来劲！
被产品需求逼出来的技术探索
事情是这样的。上周三站会，产品小李推了推眼镜，一脸认真地说：“老板看了竞品，说人家都能用AI写Slogan了，我们怎么还在手动复制粘贴？” 技术老大老王瞥了我一眼：“阿强，你不是最近在学AI吗？试试看。”
我？学AI？我只是在B站看了几节吴恩达的课，还在Colab上跑过Hello World级别的模型……但嘴上还是硬气：“行，我搞！”
于是，我开始了为期五天的“边学边干”式开发。目标很明确：不能让后端改接口，不能影响现有系统，前端自己搞定AI调用和展示。
第一坑：选型纠结症
最开始我想直接调OpenAI API，但公司网络策略卡得死，连curl都超时。后来发现国内有阿里云百炼、腾讯混元、讯飞星火，但要么要企业认证，要么按token收费贵得离谱。
最后灵光一闪：用开源模型 + Web Worker + ONNX.js！
对，就是那个能在浏览器里跑AI模型的ONNX Runtime Web。虽然模型小、效果一般，但胜在——免费、离线、不依赖后端。
我在Hugging Face上扒拉了半天，找到一个叫 gpt2-chinese 的轻量级中文生成模型，压缩后只有50MB左右（实际加载时还得分块，后面再说）。
🤓 小知识：ONNX（Open Neural Network Exchange）是个跨框架的模型格式，PyTorch/TensorFlow训练好的模型都能转成它，然后用
onnxruntime-web在浏览器跑。
开发心得：前端也能玩转AI，但别太飘
说干就干。我建了个新分支，信心满满地 npm install onnxruntime-web，结果页面直接卡死三分钟。
原因？模型太大，主线程直接崩了。
赶紧查文档，发现官方推荐用 Web Worker 加载模型。于是我把推理逻辑扔进 worker 里：
// ai-worker.js
import * as ort from 'onnxruntime-web';
let session = null;
self.onmessage = async (e) => {
const { type, payload } = e.data;
if (type === 'LOAD_MODEL') {
try {
// 分片加载模型（关键！）
const modelUrl = '/models/gpt2-chinese/model.onnx';
session = await ort.InferenceSession.create(modelUrl, {
executionProviders: ['webgl'], // 用GPU加速
});
self.postMessage({ type: 'MODEL_LOADED' });
} catch (err) {
self.postMessage({ type: 'ERROR', error: err.message });
}
}
if (type === 'GENERATE_TEXT' && session) {
const { inputText, maxLength } = payload;
// 这里省略tokenizer处理（实际用了transformers.js）
const output = await session.run({ input_ids: ... });
self.postMessage({ type: 'TEXT_RESULT', result: decode(output) });
}
};
主页面那边就简单多了：
// main.vue
const worker = new Worker('/ai-worker.js');
worker.postMessage({ type: 'LOAD_MODEL' });
worker.onmessage = (e) => {
if (e.data.type === 'TEXT_RESULT') {
this.generatedTexts = e.data.result;
}
};
// 用户点击“生成”时
generate() {
worker.postMessage({
type: 'GENERATE_TEXT',
payload: { inputText: this.keywords, maxLength: 50 }
});
}
踩坑记录：
- 模型文件必须放在
public/目录，否则Webpack会把它当模块打包，体积爆炸 - WebGL执行提供者（execution provider）在低端手机上可能不支持，得降级到CPU
- 中文Tokenizer处理巨麻烦，最后用了
@xenova/transformers库，但它本身就有1.2MB……
产品上线后的“惊喜”
周五下午，我提了PR，测试小姐姐跑完用例说“基本OK”，我就美滋滋准备下班。结果周一早上，运维大哥私聊我：“你们那个AI页面，昨天晚上把CDN流量打爆了！”
原来我把50MB的模型文件直接放CDN，而没做缓存策略。每个用户进来都重新下载，100人同时用 = 5GB流量，公司账单差点报警。
紧急修复：
- 给模型文件加
Cache-Control: max-age=31536000（一年缓存） - 前端首次加载时显示“正在初始化AI引擎…”进度条
- 加个 localStorage 标记，避免重复加载
| 优化前 | 优化后 |
|---|---|
| 首次加载耗时 12s | 首次加载 8s，后续 <1s |
| CDN日流量 5GB | 日均 50MB |
| 内存占用峰值 1.2GB | 稳定在 600MB |
虽然数据看起来一般，但产品经理已经拿着截图去跟老板汇报“我们实现了AI赋能业务”，而我……终于不用再被问“大专生能不能扛住压力”了。
给同样野路子出身的朋友几点真心话
简历不是学历的附属品，是能力的投影仪
我现在敢在简历写“独立实现前端AI推理模块”，HR筛简历时根本不会点开学历。项目、代码、思考深度，才是敲门砖。别怕用“非主流”方案
正规军可能觉得“前端跑AI？不专业！” 但小公司要的是快速交付+低成本。用Web Worker + ONNX，零后端改造，三天上线，老板笑了，你就赢了。开发心得：80%的时间在处理边缘情况
比如用户关掉页面时要 terminate worker，比如模型加载失败要 fallback 到 mock 数据，比如低端机要禁用 WebGL……这些脏活累活，才是真实世界的开发。AI不是魔法，是工具
别被 hype 带偏。我们现在这个功能，准确率也就60%，但运营说“能省下他们写文案的时间就行”。技术的价值，在于解决具体问题，而不是炫技。
最后说句掏心窝子的：作为一个非科班、非名校的大专生，我深知每一步都走得比别人更用力。但正是这种“没人帮我兜底”的处境，逼我学会快速试错、快速学习、快速交付。
现在每天早上8点坐到工位，我不再焦虑学历，而是想着：“今天又能折腾点什么新东西？”
也许这就是技术探索最迷人的地方——你不需要等谁批准，打开编辑器，世界就是你的 playground。
对了，下周产品又要加“AI自动配图”功能……我已经在研究 stable-diffusion-webui 了。兄弟们，有没有避坑指南？评论区救救孩子！
评论 0