第22章 主线项目(下):前端实现与项目完成发布
-
目标概述:主线项目的最后冲刺。本章将为多模态创作工作站开发前端界面,使各功能模块以友好的方式呈现给用户,并实现与后端接口的交互。完成前端后,将工作站部署上线,提供给读者试用体验。本章标志着一个完整 AI 项目的诞生,也为全书画上圆满句号。
-
前端技术选型:考虑读者背景简单,我们选择轻量的前端方案,例如直接用 HTML/CSS/JavaScript 或简易前端框架(如Bootstrap 搭配 jQuery)开发。解释这样做易于AI生成代码且读者理解,不深陷前端复杂性。若有兴趣可日后替换为React等。
-
界面设计:描述各功能页面结构:
-
首页:导航链接到各子功能页面。
-
聊天页:对话窗口UI(类似简易聊天盒),左侧显示历史问答,底部输入框发送问题。
-
创作页:表单允许输入主题、选择风格的下拉框,提交后在页面下方显示生成的文章文本。
-
演示页:输入演示标题/大纲,多选是否包含图像(如简单扩展),提交后提供下载 PPT 链接。
-
视觉问答页:文件选择控件 + 输入问题文本,提交后显示图像缩略图和答案文本。
我们给AI的提示包含上述布局要求和用Bootstrap美化的期望,让其生成初步HTML。 -
生成前端代码:AI 分别生成 HTML模板和JavaScript。我们可以采用 Flask 模板渲染(Jinja2),但为简化理解,也可做纯静态HTML调用后端REST接口。选择后者更直观:前端JS用 fetch 请求我们的 Flask后端API。AI将生成若干HTML文件,各含基本结构和JS脚本。截图展示例如 chat.html 里的聊天框结构和用于调用 /chat 接口的 JS 代码(使用 fetch('/chat', {method:'POST', body:...}) 发送用户输入,收到JSON后更新对话框)。
-
集成与打磨:将AI生成的前端文件放入 templates/ 或 static/ 文件夹,并配置 Flask 使之可访问(在 main.py 添加静态文件路由或简单的 send_from_directory)。修改后端接口返回格式以便前端处理,例如统一返回 JSON,比如 {"answer": "...", "status": 0} 等。可能需要调整CORS或JSONify方法。对这些我们通过AI提示和自主修改解决,记录修正过程。
-
用户体验优化:加入一些前端提示和错误处理:如生成内容时加载动画、错误时弹出提示框。AI可以生成基础代码,我们整合。比如 creation.html 增加 “正在生成,请稍候…” 状态指示。Vision模块文件上传通过AJAX需特殊处理 formData,我们确保AI代码正确处理。
-
完成度检查:本阶段我们应完整运行前后端,打开每个页面尝试实际操作:
-
在聊天页输入问题,马上看到AI回复追加在对话框;
-
在创作页提交主题,几秒后文章段落出现在页面;
-
在演示页提交,片刻后出现下载PPT链接,点击可下载文件并打开检查;
-
在视觉页上传测试图片并提问,稍后看到回答文字。
如果条件允许,我们可截图网页界面的几个功能演示图——如聊天页面对话记录、内容页输出的文章、视觉页带有图片和答案等等,展示给读者。 -
部署上线:将完整项目部署。由于上章已经部署后端,这里只需确保静态前端也部署(Railway能托管简单静态文件;或使用Vercel托管前端并将API请求代理到Railway域名)。给出上线后访问URL示例,让读者真正能够体验(如果本书支持在线Demo,可提供二维码)。强调我们使用了环境变量存储API密钥,在部署平台正确配置,截图展示配置界面以教育读者安全意识。
-
项目展望:庆祝项目完成,鼓励读者进行更多扩展:例如增加语音输入(调用语音识别API)使之成为真正多模态(文本、图像、语音)工作站;加入用户登录管理保存创作记录等。点明AI开发世界的广阔前景。
-
术语解释:最后解释一些前端术语如“AJAX”“DOM”“CORS”,并回顾全书涉及的重要概念,巩固知识体系。