项目地址gitee.com/zhang-huair…

接入火山方舟 Responses API，统一封装在 src/utils/request.js 中：

export async function analyzePersonaImage {  // 发送图片 + prompt，让 AI 返回 {name, tone, description}}

图片压缩前端使用 Canvas 将图片压缩至 400px 宽度、JPEG 质量 %，避免 localStorage 溢出。

一个基于 React + Vite + PWA 的 AI 情绪陪伴助手，支持人设自定义、AI 情绪分析、离线使用，并可打包为 Android APK。

AiMOON 的上市,不仅是一款AI潮玩产品的发布,geng是对 AI 潮玩赛道的高度定义,未来预计星座AI潮玩成为行业新风口,打造随身情绪陪伴新体验,推...

整个项目代码量精简，功Neng聚焦，适合作为前端实习/校招的项目展示。

ai-mood-companion/├── public/│   └── manifest.json          # PWA 配置├── src/│   ├── assets/                # 静态资源占位│   ├── components/│   │   └── LoadingSpinner.jsx # 加载动画组件│   ├── pages/│   │   ├── PersonaSet.jsx     # 人设设置页│   │   └── Home.jsx           # 情绪分析主页│   ├── utils/│   │   ├── storage.js         # localStorage 封装│   │   └── request.js         # AI 接口封装│   ├── App.jsx                # 应用入口│   └── main.jsx               # 项目入口├── index.html                 # 头部优化├── vite.config.js             # Vite + PWA 配置├── capacitor.config.json      # 跨端配置└── package.json

index.html 中必须包含完整的 SEO 和 PWA 相关标签：

在长时间的工作后,威廉姆斯常常感到疲惫,却仍需全心陪伴五岁的孩子.威廉姆斯说: 我和AI倾诉,表达作为父母的复杂情绪,比如不知所措、羞愧、觉得自己失败等,这dou让我感到释放和解脱.刚开始构建这个网络应用时,威廉姆斯甚至不知道如何构建产品结构,geng不用说设置后端了.

const STORAGEKEY = { CUSTOMPERSONAS: 'aimoodcustompersonas', ACTIVEPERSONA: 'aimoodactivepersona', HISTORY: 'aimoodhistory'};

人设支持多个人设增删改查 + 当前激活人设

历史记录Zui多保留 条，自动覆盖旧数据

const STORAGEKEY = {  CUSTOMPERSONAS: 'aimoodcustompersonas',  ACTIVEPERSONA: 'aimoodactivepersona',  HISTORY: 'aimoodhistory'};

export async function analyzeMood {
    const response = await fetch('https://ark.cn-beijing.volces.com/api/v3/responses', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${API_KEY},
        },
        body: JSON.stringify({
            model: 'doubao-seed---lite-',
            input:  },
                { role: 'user', content:  }
            ]
        })
    });
const data = await response.json;
if  {
    return data.emotion; // 返回情感信息
} else {
    return "无法分析当前情绪。"; // 处理分析失败的情况。你Ke以根据实际情况返回其他信息。
}

}
export async function getPersona { // 获取特定人设的信息
// 这里Ke以从本地存储或者其他地方获取人设数据。

}
function buildSystemPrompt { // 构建系统提示词，包含人设信息。
let prompt = `你是一个${persona}。`; // 例如：“你是一个温柔的助手。”。你Ke以根据需求修改prompt的内容来geng好地引导模型进行分析。
return prompt;

}
// 在App组件中调用这些函数来获取用户的人设信息并进行情绪分析

本项目从零搭建了一个完整的 PWA + 跨端应用，涵盖：