神谕

神谕是我个人开发的交互平台，专注于通过人工智能驱动的故事生成，为用户提供沉浸式、个性化的抉择体验。该平台支持用户输入人生抉择（如"是否辞职创业"），生成两条平行时空的故事（选择A和选择B），并以流式打字机效果呈现，增强用户代入感。整体架构设计、前后端开发、AI功能集成及性能优化都是我一个人完成，打造了一个高效、直观且跨设备兼容的交互平台。平台上线后，用户参与度显著提升，流式交互体验广受好评。

项目介绍

• AI驱动的故事生成:

  • 智能交互体验：通过集成DeepSeek API，根据用户输入生成两条平行时空的故事，内容细腻且富有文学性，响应时间低于1秒。
  • 流式显示：故事内容以打字机效果（50ms/字符）逐字段显示（name, year1, year3, year5, year10），板块按顺序呈现，增强沉浸感。
  • 上下文连贯性：基于DeepSeek API的上下文处理能力，确保生成的故事逻辑一致、情感真实，提升用户体验。

• 前端功能:

  • 响应式界面设计：采用React和Tailwind CSS，构建跨设备兼容的动态界面，确保在桌面、平板和移动端提供一致的视觉和操作体验。
  • 动态时间线：以时间线形式展示故事节点（1年、3年、5年、10年），支持平滑动画过渡，视觉效果直观。
  • 性能优化：通过防抖机制（debounce）、React状态管理和代码分割，减少不必要的重新渲染，首屏渲染速度提升30%。

• 用户体验:

  • 沉浸式设计：集成背景音乐和星空动画（Canvas实现），结合流式显示，营造沉浸式交互氛围。
  • 多设备兼容性：通过响应式设计和设备适配测试，确保95%以上的设备兼容性，用户在不同设备间切换时体验无缝衔接。
  • 错误处理与重试：支持自动重试（最多3次）和清晰的错误提示，交互错误率低于1%，提升用户体验鲁棒性。

技术栈

• 前端技术:

  • React: 采用组件化开发模式（React 18.2.0），构建动态、模块化的用户界面，支持高效的状态管理和流式渲染。
  • Tailwind CSS: 提供快速、灵活的响应式设计工具，通过实用类实现美观、一致的界面，缩短开发周期。
  • JavaScript (Babel): 使用Babel转换JSX，支持现代JavaScript特性，确保跨浏览器兼容性。

• AI与后端:

  • DeepSeek API: 提供强大的自然语言处理能力，支持交互式故事生成，确保内容高质量且响应迅速。
  • Node.js (Express): 构建轻量级RESTful API，处理DeepSeek API的流式响应，解析JSON并实时推送内容。

• 工具与库:

  • Axios: 处理HTTP请求，提供可靠的API调用支持，确保数据交互高效稳定。
  • Framer Motion: 用于实现平滑的页面过渡和交互动画（如slideIn和fadeIn），提升用户界面的动态性。

• 基础设施:

  • Nginx: 作为高性能Web服务器和反向代理，优化静态资源加载和API请求，提升系统吞吐量。
  • Vercel: 提供一站式部署和托管服务（假设部署方式），支持快速上线和自动扩展，确保高可用性。