AI学习第5天：从 AI 项目快速切换到小产品 MVP——从模型调用到前端集成（Flask+ React）

在网上看了很多的学习AI的文章和视频发现，很多 AI 项目停在调得通模型阶段，学习AI的你是不是也遇到了这样的问题：

🤖 模型能跑通，但没人能用

📉 只有 Notebook，没有接口

🙅‍♀️ 没有界面，用户连尝试都困难

在昨天的学习中，我已经搭建好了了一个AI项目并通过FastAPI集成了deepseek的api调用。今天我结合自己对前端React了解的基础上，在项目通过React实现了聊天界面。实现从 模型调用 ➜ 可访问 Web 应用：把它变成“可被别人使用的产品 MVP”。

✅ MVP 架构长这样

模型服务（推理） --> FlaskAPI 接口 --> React 前端 UI

你只需准备 3 个部分：

组件	工具	描述
模型推理	deepseek api	支持任意本地/在线模型
API 接口	Flask	统一 JSON 调用入口
前端 UI	React	用户输入 ➜ 显示模型结果

🧱 技术栈推荐（后端 + 前端）

技术栈	理由
Flask	轻量级、可扩展，适合初学者
React	搭建交互 UI 快，Ant Design
axios + JSON	前后端通信通用方案，几行代码接通

Step 1️⃣：准备模型推理服务API

更新整理昨天AI项目中的src\serving\api\app.py，deepseek api key保存到环境变量里面，同时增加了log日志记录。

from flask import Flask, request, jsonify

启动接口：

python -m src.serving.api.app

Step 2️⃣：前端页面调用接口（React 示例）

✅ 项目结构

your_react_chat/

✅ 步骤 1：初始化 React 项目（Vite）

npm create vite@latest your_react_chat --template react

✅ 步骤 2：安装 Axios（用于请求）

npm install axios

✅ 步骤 3：创建 API 请求封装（src/api/chat.js）

import axios from'axios';

✅ 步骤4：实现src/components/MessageBubble.module.scss

.bubbleRow {

✅ 步骤5：实现src/components/MessageBubble.jsx

importReactfrom'react';

✅ 步骤6：创建主聊天窗口（src/components/ChatWindow.jsx）

importReact, { useState } from'react';

步骤 7：在 App.jsx 中加载

importReactfrom'react';

✅ 步骤 8：启动服务

npm run dev

访问：http://localhost:5173

想入门 AI 大模型却找不到清晰方向？备考大厂 AI 岗还在四处搜集零散资料？别再浪费时间啦！2025 年 AI 大模型全套学习资料已整理完毕，从学习路线到面试真题，从工具教程到行业报告，一站式覆盖你的所有需求，现在全部免费分享！

👇👇扫码免费领取全部内容👇👇

​

一、学习必备：100+本大模型电子书+26 份行业报告 + 600+ 套技术PPT，帮你看透 AI 趋势

想了解大模型的行业动态、商业落地案例？大模型电子书？这份资料帮你站在 “行业高度” 学 AI：

1. 100+本大模型方向电子书

2. 26 份行业研究报告：覆盖多领域实践与趋势

报告包含阿里、DeepSeek 等权威机构发布的核心内容，涵盖：

• 职业趋势：《AI + 职业趋势报告》《中国 AI 人才粮仓模型解析》；
• 商业落地：《生成式 AI 商业落地白皮书》《AI Agent 应用落地技术白皮书》；
• 领域细分：《AGI 在金融领域的应用报告》《AI GC 实践案例集》；
• 行业监测：《2024 年中国大模型季度监测报告》《2025 年中国技术市场发展趋势》。

3. 600+套技术大会 PPT：听行业大咖讲实战

PPT 整理自 2024-2025 年热门技术大会，包含百度、腾讯、字节等企业的一线实践：

• 安全方向：《端侧大模型的安全建设》《大模型驱动安全升级（腾讯代码安全实践）》；
• 产品与创新：《大模型产品如何创新与创收》《AI 时代的新范式：构建 AI 产品》；
• 多模态与 Agent：《Step-Video 开源模型（视频生成进展）》《Agentic RAG 的现在与未来》；
• 工程落地：《从原型到生产：AgentOps 加速字节 AI 应用落地》《智能代码助手 CodeFuse 的架构设计》。

二、求职必看：大厂 AI 岗面试 “弹药库”，300 + 真题 + 107 道面经直接抱走

想冲字节、腾讯、阿里、蔚来等大厂 AI 岗？这份面试资料帮你提前 “押题”，拒绝临场慌！

1. 107 道大厂面经：覆盖 Prompt、RAG、大模型应用工程师等热门岗位

面经整理自 2021-2025 年真实面试场景，包含 TPlink、字节、腾讯、蔚来、虾皮、中兴、科大讯飞、京东等企业的高频考题，每道题都附带思路解析：

2. 102 道 AI 大模型真题：直击大模型核心考点

针对大模型专属考题，从概念到实践全面覆盖，帮你理清底层逻辑：

3. 97 道 LLMs 真题：聚焦大型语言模型高频问题

专门拆解 LLMs 的核心痛点与解决方案，比如让很多人头疼的 “复读机问题”：

三、路线必明： AI 大模型学习路线图，1 张图理清核心内容

刚接触 AI 大模型，不知道该从哪学起？这份「AI大模型 学习路线图」直接帮你划重点，不用再盲目摸索！

路线图涵盖 5 大核心板块，从基础到进阶层层递进：一步步带你从入门到进阶，从理论到实战。

L1阶段:启航篇丨极速破界AI新时代

L1阶段：了解大模型的基础知识，以及大模型在各个行业的应用和分析，学习理解大模型的核心原理、关键技术以及大模型应用场景。

L2阶段：攻坚篇丨RAG开发实战工坊

L2阶段：AI大模型RAG应用开发工程，主要学习RAG检索增强生成：包括Naive RAG、Advanced-RAG以及RAG性能评估，还有GraphRAG在内的多个RAG热门项目的分析。

L3阶段：跃迁篇丨Agent智能体架构设计

L3阶段：大模型Agent应用架构进阶实现，主要学习LangChain、 LIamaIndex框架，也会学习到AutoGPT、 MetaGPT等多Agent系统，打造Agent智能体。

L4阶段：精进篇丨模型微调与私有化部署

L4阶段：大模型的微调和私有化部署，更加深入的探讨Transformer架构，学习大模型的微调技术，利用DeepSpeed、Lamam Factory等工具快速进行模型微调，并通过Ollama、vLLM等推理部署框架，实现模型的快速部署。

L5阶段：专题集丨特训篇 【录播课】

四、资料领取：全套内容免费抱走，学 AI 不用再找第二份

不管你是 0 基础想入门 AI 大模型，还是有基础想冲刺大厂、了解行业趋势，这份资料都能满足你！
现在只需按照提示操作，就能免费领取：

👇👇扫码免费领取全部内容👇👇

​

2025 年想抓住 AI 大模型的风口？别犹豫，这份免费资料就是你的 “起跑线”！