feat: Phase 3 AI Radio (DJ Host & interleaved playlist) and Like/Dislike/Delete actions
- Add Like button: promotes wave track to permanent library and refills buffer - Add Dislike button: blacklists track in SQLite disliked_tracks, removes audio, refills buffer - Add Delete button in history table for library file removal - Add AI Radio module: wttr.in weather, Qwen 2.5 host monologues, speech synthesis, ID3 tags - Generate interleaved 'AI Радио.m3u8' alongside clean 'Моя Волна.m3u8' - Update Web UI with Radio DJ card, voice selection, and track actions
This commit is contained in:
Antigravity committed
1 parent
3db9bdb38b
commit
e5afeb06cc
15 files changed
+945
-8
No files matched your search
+152
-2
@@ -267,7 +267,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
function renderHistory(tracks) {
|
||||
if (!tracks || tracks.length === 0) {
|
||||
historyBody.innerHTML = `<tr><td colspan="5" class="empty-state">Пока нет загрузок</td></tr>`;
|
||||
historyBody.innerHTML = `<tr><td colspan="6" class="empty-state">Пока нет загрузок</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -278,6 +278,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
<td>${escapeHtml(t.title)}</td>
|
||||
<td>${escapeHtml(t.album || 'Singles')}</td>
|
||||
<td style="color: var(--text-secondary);">${formatDate(t.downloaded_at)}</td>
|
||||
<td>
|
||||
<button class="btn-delete" title="Удалить трек из Navidrome" onclick="deleteHistoryTrack('${escapeAttr(t.file_path)}')">🗑️</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
}
|
||||
@@ -413,14 +416,161 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
${escapeHtml(t.artist)} • ${t.size_mb} МБ (${t.age_days} дн. назад)
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.4rem; flex-shrink: 0;">
|
||||
<div style="display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center;">
|
||||
<button class="btn-play-preview" onclick="playPreviewTrack('${escapeAttr(t.path)}', '${escapeAttr(t.title)}', '${escapeAttr(t.artist)}', '', '', 'api/stream?url=' + encodeURIComponent('${escapeAttr(t.path)}'))">
|
||||
▶ Слушать
|
||||
</button>
|
||||
<button class="btn-like" title="Сохранить в библиотеку Navidrome" onclick="likeWaveTrack('${escapeAttr(t.filename)}')">
|
||||
⭐ В коллекцию
|
||||
</button>
|
||||
<button class="btn-dislike" title="Удалить из волны и больше не рекомендовать" onclick="dislikeWaveTrack('${escapeAttr(t.filename)}')">
|
||||
👎 Дизлайк
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join("");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Window actions for Like, Dislike & Delete
|
||||
window.likeWaveTrack = async function(filename) {
|
||||
if (!filename) return;
|
||||
try {
|
||||
const res = await fetch("api/wave/like", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ filename: filename })
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = "login";
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
alert(`⭐ Трек [${data.artist} — ${data.title}] перенесён в вашу постоянную библиотеку Navidrome!\nСлот в Волне автоматически обновлен.`);
|
||||
await fetchWaveStatus();
|
||||
await fetchHistory();
|
||||
} catch (e) {
|
||||
alert("Ошибка добавления в коллекцию: " + e);
|
||||
}
|
||||
};
|
||||
|
||||
window.dislikeWaveTrack = async function(filename) {
|
||||
if (!filename) return;
|
||||
if (!confirm("Дизлайкнуть трек? Он будет удалён из Волны и занесён в чёрный список рекомендаций.")) return;
|
||||
try {
|
||||
const res = await fetch("api/wave/dislike", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ filename: filename })
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = "login";
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
await fetchWaveStatus();
|
||||
} catch (e) {
|
||||
alert("Ошибка дизлайка: " + e);
|
||||
}
|
||||
};
|
||||
|
||||
window.deleteHistoryTrack = async function(filePath) {
|
||||
if (!filePath) return;
|
||||
if (!confirm("Удалить этот трек из библиотеки и стереть файл с диска?")) return;
|
||||
try {
|
||||
const res = await fetch(`api/track?file_path=${encodeURIComponent(filePath)}`, {
|
||||
method: "DELETE"
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = "login";
|
||||
return;
|
||||
}
|
||||
if (res.ok) {
|
||||
await fetchHistory();
|
||||
await fetchWaveStatus();
|
||||
} else {
|
||||
const err = await res.json();
|
||||
alert("Ошибка удаления: " + (err.detail || res.statusText));
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Ошибка сети при удалении: " + e);
|
||||
}
|
||||
};
|
||||
|
||||
// --- AI Radio Host Controller (Phase 3) ---
|
||||
const radioGenerateBtn = document.getElementById("radioGenerateBtn");
|
||||
const radioVoiceSelect = document.getElementById("radioVoiceSelect");
|
||||
const radioStatusLabel = document.getElementById("radioStatusLabel");
|
||||
const radioClipsCountLabel = document.getElementById("radioClipsCountLabel");
|
||||
const radioSegmentsContainer = document.getElementById("radioSegmentsContainer");
|
||||
const radioSegmentsList = document.getElementById("radioSegmentsList");
|
||||
|
||||
fetchRadioStatus();
|
||||
|
||||
if (radioGenerateBtn) {
|
||||
radioGenerateBtn.addEventListener("click", async () => {
|
||||
radioGenerateBtn.disabled = true;
|
||||
const voice = radioVoiceSelect ? radioVoiceSelect.value : "ru-RU-DmitryNeural";
|
||||
if (radioStatusLabel) {
|
||||
radioStatusLabel.textContent = "🎙️ Ведущий пишет реплики и сводит эфир...";
|
||||
radioStatusLabel.className = "badge badge-llm";
|
||||
}
|
||||
try {
|
||||
const res = await fetch("api/radio/generate", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ voice: voice })
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = "login";
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
if (data.status === "ok") {
|
||||
alert(`📻 Радиоэфир успешно сформирован!\nСгенерировано реплик ведущего: ${data.dj_segments_count}\nПлейлист «AI Радио.m3u8» готов в Navidrome.`);
|
||||
if (data.segments && data.segments.length > 0 && radioSegmentsContainer && radioSegmentsList) {
|
||||
radioSegmentsContainer.style.display = "block";
|
||||
radioSegmentsList.innerHTML = data.segments.map(s => `
|
||||
<div class="radio-segment-item">
|
||||
<div style="min-width: 0;">
|
||||
<div class="radio-segment-text">«${escapeHtml(s.text)}»</div>
|
||||
<div class="radio-segment-target">🎵 Перед треком: ${escapeHtml(s.before_track)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("");
|
||||
}
|
||||
} else {
|
||||
alert("Внимание: " + (data.message || "Ошибка генерации"));
|
||||
}
|
||||
await fetchRadioStatus();
|
||||
} catch (err) {
|
||||
alert("Ошибка генерации радиоэфира: " + err);
|
||||
} finally {
|
||||
radioGenerateBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchRadioStatus() {
|
||||
try {
|
||||
const res = await fetch("api/radio/status");
|
||||
if (res.status === 401) return;
|
||||
const data = await res.json();
|
||||
if (radioClipsCountLabel) {
|
||||
radioClipsCountLabel.textContent = `${data.speech_clips_count || 0} записей`;
|
||||
}
|
||||
if (radioStatusLabel) {
|
||||
if (data.playlist_ready && data.speech_clips_count > 0) {
|
||||
radioStatusLabel.textContent = "🟢 Эфир в ротации";
|
||||
radioStatusLabel.className = "badge badge-success";
|
||||
} else {
|
||||
radioStatusLabel.textContent = "🟡 Ожидает генерации";
|
||||
radioStatusLabel.className = "badge badge-warning";
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Radio status error:", e);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -811,3 +811,182 @@ input[type="text"]:focus {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Phase 3: Like, Dislike & AI Radio Styles */
|
||||
.btn-like {
|
||||
background-color: rgba(16, 185, 129, 0.15);
|
||||
color: #34d399;
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-like:hover {
|
||||
background-color: rgba(16, 185, 129, 0.3);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-dislike {
|
||||
background-color: rgba(239, 68, 68, 0.12);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(239, 68, 68, 0.25);
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-dislike:hover {
|
||||
background-color: rgba(239, 68, 68, 0.28);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: transparent;
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.radio-card {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.badge-radio {
|
||||
background-color: rgba(245, 158, 11, 0.18);
|
||||
color: #fbbf24;
|
||||
border: 1px solid rgba(245, 158, 11, 0.35);
|
||||
}
|
||||
|
||||
.radio-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.radio-header-title h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.radio-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.radio-settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin: 0.8rem 0;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(15, 23, 42, 0.5);
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.radio-voice-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.radio-voice-label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.radio-voice-select {
|
||||
background-color: #0f172a;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.radio-voice-select:focus {
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.radio-stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.75rem;
|
||||
background-color: rgba(15, 23, 42, 0.5);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.radio-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.radio-stat a {
|
||||
color: #fbbf24;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.radio-stat a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.radio-segments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.radio-segment-item {
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.radio-segment-text {
|
||||
font-size: 0.84rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.radio-segment-target {
|
||||
font-size: 0.75rem;
|
||||
color: #fbbf24;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user