# lingshanli99999/soundcare_h5 architecture

> Architecture diagram of the GitHub repository lingshanli99999/soundcare_h5, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lingshanli99999/soundcare_h5
- Repository: https://github.com/lingshanli99999/soundcare_h5

## Overview

SoundCare H5 is a browser-based wellness music app. Users start from the home page, choose a scene or describe a need, generate music with manual or AI-assisted settings, then play it while viewing simulated HRV feedback; profile information is documented as static mock data. The graph follows documented routes and sampled API, store, and player behavior. Home, AI-generation, and API wiring beyond the supplied excerpts is represented only where the README supports it.

Main entry points: [`src/router/index.ts`](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/router/index.ts) (Page router), [`src/views/PlayerView.vue`](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/PlayerView.vue) (Music player), [`src/views/AiGenerateView.vue`](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/AiGenerateView.vue) (AI generation), [`src/views/GenerateView.vue`](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/GenerateView.vue) (Manual generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_main["App bootstrap<br/>[main.ts]"]
  node_app["App shell<br/>[App.vue]"]
  node_router["Page router<br/>[index.ts]"]
  node_home["Home and scenes<br/>[HomeView.vue]"]
  node_profile["Profile mock<br/>[ProfileView.vue]"]
end

subgraph group_generation["Music generation"]
  node_generate["Manual generation<br/>[GenerateView.vue]"]
  node_ai_generate["AI generation<br/>[AiGenerateView.vue]"]
  node_music_api["Music API<br/>[music.ts]"]
  node_llm_api["Prompt API<br/>[llm.ts]"]
end

subgraph group_wellbeing["Playback wellbeing"]
  node_player["Music player<br/>[PlayerView.vue]"]
  node_hrv_store["HRV state<br/>[hrv.ts]"]
  node_hrv_utils["HRV calculations<br/>[hrv.ts]"]
end

subgraph group_integration["API and persistence"]
  node_music_store["Music state<br/>[music.ts]"]
  node_storage["Browser storage<br/>[storage.ts]"]
  node_api_client["HTTP client<br/>[client.ts]"]
end

node_user(("User"))
node_backend{{"SoundCare backend"}}
node_browser_audio["Browser audio"]

node_user -->|"opens app"| node_home
node_main -->|"mounts"| node_app
node_main -->|"installs"| node_router
node_app -->|"renders routes"| node_router
node_router -->|"dispatches"| node_home
node_router -->|"dispatches"| node_generate
node_router -->|"dispatches"| node_ai_generate
node_router -->|"dispatches"| node_player
node_router -->|"dispatches"| node_profile
node_home -->|"opens scene"| node_generate
node_home -->|"opens prompt"| node_ai_generate
node_home -->|"reads mock HRV"| node_hrv_store
node_generate -->|"requests music"| node_music_api
node_generate -->|"saves result"| node_music_store
node_generate -->|"navigates"| node_player
node_ai_generate -->|"optimizes prompt"| node_llm_api
node_ai_generate -->|"requests music"| node_music_api
node_ai_generate -->|"saves result"| node_music_store
node_ai_generate -->|"navigates"| node_player
node_music_api -->|"posts request"| node_api_client
node_llm_api -->|"posts request"| node_api_client
node_api_client -->|"sends API calls"| node_backend
node_player -->|"loads track"| node_music_store
node_music_store -->|"reads and writes"| node_storage
node_player -->|"plays track"| node_browser_audio
node_player -->|"updates feedback"| node_hrv_store
node_hrv_store -->|"calculates metrics"| node_hrv_utils
node_user -->|"sets parameters"| node_generate
node_user -->|"controls playback"| node_player

click node_main "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/main.ts"
click node_app "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/App.vue"
click node_router "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/router/index.ts"
click node_home "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/HomeView.vue"
click node_generate "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/GenerateView.vue"
click node_ai_generate "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/AiGenerateView.vue"
click node_player "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/PlayerView.vue"
click node_profile "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/ProfileView.vue"
click node_hrv_store "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/stores/hrv.ts"
click node_hrv_utils "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/utils/hrv.ts"
click node_music_store "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/stores/music.ts"
click node_storage "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/utils/storage.ts"
click node_music_api "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/music.ts"
click node_llm_api "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/llm.ts"
click node_api_client "https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/client.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_router,node_home,node_profile,node_user,node_browser_audio toneBlue
class node_generate,node_ai_generate,node_music_api,node_llm_api toneAmber
class node_player,node_hrv_store,node_hrv_utils toneMint
class node_music_store,node_storage,node_api_client toneRose
class node_backend toneIndigo
```

## Components

### App navigation

- [App bootstrap](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/main.ts): `src/main.ts`
- [App shell](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/App.vue): `src/App.vue`
- [Page router](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/router/index.ts): `src/router/index.ts`
- [Home and scenes](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Profile mock](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/ProfileView.vue): `src/views/ProfileView.vue`

### Music generation

- [Manual generation](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/GenerateView.vue): `src/views/GenerateView.vue`
- [AI generation](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/AiGenerateView.vue): `src/views/AiGenerateView.vue`
- [Music API](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/music.ts): `src/api/music.ts`
- [Prompt API](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/llm.ts): `src/api/llm.ts`

### Playback wellbeing

- [Music player](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/views/PlayerView.vue): `src/views/PlayerView.vue`
- [HRV state](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/stores/hrv.ts): `src/stores/hrv.ts`
- [HRV calculations](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/utils/hrv.ts): `src/utils/hrv.ts`

### API and persistence

- [Music state](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/stores/music.ts): `src/stores/music.ts`
- [Browser storage](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/utils/storage.ts): `src/utils/storage.ts`
- [HTTP client](https://github.com/lingshanli99999/soundcare_h5/blob/main/src/api/client.ts): `src/api/client.ts`

### Other components

- **User**
- **SoundCare backend**
- **Browser audio**

## Connections

- User → Home and scenes: opens app
- App bootstrap → App shell: mounts
- App bootstrap → Page router: installs
- App shell → Page router: renders routes
- Page router → Home and scenes: dispatches
- Page router → Manual generation: dispatches
- Page router → AI generation: dispatches
- Page router → Music player: dispatches
- Page router → Profile mock: dispatches
- Home and scenes → Manual generation: opens scene
- Home and scenes → AI generation: opens prompt
- Home and scenes → HRV state: reads mock HRV
- Manual generation → Music API: requests music
- Manual generation → Music state: saves result
- Manual generation → Music player: navigates
- AI generation → Prompt API: optimizes prompt
- AI generation → Music API: requests music
- AI generation → Music state: saves result
- AI generation → Music player: navigates
- Music API → HTTP client: posts request
- Prompt API → HTTP client: posts request
- HTTP client → SoundCare backend: sends API calls
- Music player → Music state: loads track
- Music state → Browser storage: reads and writes
- Music player → Browser audio: plays track
- Music player → HRV state: updates feedback
- HRV state → HRV calculations: calculates metrics
- User → Manual generation: sets parameters
- User → Music player: controls playback