feat(vibe): explain recommendation signals
This commit is contained in:
@@ -22,6 +22,19 @@ function sampleTracks(tracks: Track[], count: number): Track[] {
|
|||||||
return sampled.slice(0, count);
|
return sampled.slice(0, count);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function VibeLearningHint() {
|
||||||
|
return (
|
||||||
|
<details className="rounded-lg border border-border bg-surface0 px-4 py-3 text-sm text-muted">
|
||||||
|
<summary className="cursor-pointer font-medium text-text">How Vibe learns</summary>
|
||||||
|
<div className="mt-3 space-y-2 text-xs leading-relaxed text-muted">
|
||||||
|
<p>Your seed track sets the first direction. From there, Vibe learns from what you finish, skip, dislike, or keep, alongside your library history and favourites.</p>
|
||||||
|
<p>It also avoids recent repeats and reshapes the upcoming queue as you listen.</p>
|
||||||
|
<p className="text-muted/70">It does not infer your location, weather, microphone input, or device activity.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function Vibe() {
|
export default function Vibe() {
|
||||||
const { currentTrack } = usePlaybackStore();
|
const { currentTrack } = usePlaybackStore();
|
||||||
const {
|
const {
|
||||||
@@ -119,6 +132,8 @@ export default function Vibe() {
|
|||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<VibeLearningHint />
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
|
<div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
|
||||||
{error}
|
{error}
|
||||||
@@ -200,6 +215,8 @@ export default function Vibe() {
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<VibeLearningHint />
|
||||||
|
|
||||||
{(empty || initialBatchStatus === 'exhausted' || initialBatchStatus === 'failed') && (
|
{(empty || initialBatchStatus === 'exhausted' || initialBatchStatus === 'failed') && (
|
||||||
<div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
|
<div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
|
||||||
{initialBatchStatus === 'failed'
|
{initialBatchStatus === 'failed'
|
||||||
|
|||||||
Reference in New Issue
Block a user