Add client/server split and TTS app
Set up FastAPI server, vanilla UI, and deployment scripts for the TTS app, including DB/ffmpeg wiring and Apache config.
This commit is contained in:
dsyoon
7
client/run.sh
Normal file
7
client/run.sh
Normal file
@@ -0,0 +1,7 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
cd /home/dsyoon/workspace/tts/client
|
||||
|
||||
echo "Client is served by the FastAPI server."
|
||||
echo "No build step required."
|
||||
142
client/static/app.js
Normal file
142
client/static/app.js
Normal file
@@ -0,0 +1,142 @@
|
||||
const listEl = document.getElementById("tts-list");
|
||||
const textInput = document.getElementById("text-input");
|
||||
const saveBtn = document.getElementById("save-btn");
|
||||
const editBtn = document.getElementById("edit-btn");
|
||||
const deleteBtn = document.getElementById("delete-btn");
|
||||
const cancelBtn = document.getElementById("cancel-btn");
|
||||
const downloadLink = document.getElementById("download-link");
|
||||
|
||||
let items = [];
|
||||
let editMode = false;
|
||||
const selectedIds = new Set();
|
||||
|
||||
function setEditMode(isEdit) {
|
||||
editMode = isEdit;
|
||||
selectedIds.clear();
|
||||
editBtn.classList.toggle("hidden", editMode);
|
||||
deleteBtn.classList.toggle("hidden", !editMode);
|
||||
cancelBtn.classList.toggle("hidden", !editMode);
|
||||
downloadLink.classList.add("hidden");
|
||||
renderList();
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
listEl.innerHTML = "";
|
||||
items.forEach((item) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "tts-item";
|
||||
|
||||
if (editMode) {
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.checked = selectedIds.has(item.id);
|
||||
checkbox.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.checked) {
|
||||
selectedIds.add(item.id);
|
||||
} else {
|
||||
selectedIds.delete(item.id);
|
||||
}
|
||||
});
|
||||
li.appendChild(checkbox);
|
||||
} else {
|
||||
const bullet = document.createElement("span");
|
||||
bullet.textContent = "•";
|
||||
bullet.className = "bullet";
|
||||
li.appendChild(bullet);
|
||||
}
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.textContent = item.display_time;
|
||||
label.className = "item-label";
|
||||
li.appendChild(label);
|
||||
|
||||
li.addEventListener("click", () => handleItemClick(item));
|
||||
listEl.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadList() {
|
||||
const res = await fetch("/api/tts");
|
||||
items = await res.json();
|
||||
renderList();
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const text = (textInput.value || "").trim();
|
||||
if (text.length < 11) {
|
||||
alert("10개 글자 이상이어야 합니다");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch("/api/tts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
alert(err.detail || "저장에 실패했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const created = await res.json();
|
||||
items.unshift(created);
|
||||
renderList();
|
||||
}
|
||||
|
||||
async function handleItemClick(item) {
|
||||
if (editMode) {
|
||||
if (selectedIds.has(item.id)) {
|
||||
selectedIds.delete(item.id);
|
||||
} else {
|
||||
selectedIds.add(item.id);
|
||||
}
|
||||
renderList();
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/tts/${item.id}`);
|
||||
if (!res.ok) {
|
||||
alert("항목을 불러오지 못했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
textInput.value = data.text || "";
|
||||
downloadLink.href = data.download_url;
|
||||
downloadLink.classList.remove("hidden");
|
||||
downloadLink.click();
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const ids = Array.from(selectedIds);
|
||||
if (ids.length === 0) {
|
||||
alert("삭제할 항목을 선택하세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch("/api/tts", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ids }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
alert("삭제에 실패했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const deletedSet = new Set(data.deleted || []);
|
||||
items = items.filter((item) => !deletedSet.has(item.id));
|
||||
setEditMode(false);
|
||||
}
|
||||
|
||||
saveBtn.addEventListener("click", handleSave);
|
||||
editBtn.addEventListener("click", () => setEditMode(true));
|
||||
cancelBtn.addEventListener("click", () => setEditMode(false));
|
||||
deleteBtn.addEventListener("click", handleDelete);
|
||||
|
||||
loadList();
|
||||
114
client/static/styles.css
Normal file
114
client/static/styles.css
Normal file
@@ -0,0 +1,114 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d2d2d2;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
padding: 12px;
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 12px 18px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: #1f5f7a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #4f9acb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #c84040;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tts-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tts-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 6px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tts-item:hover {
|
||||
background: #f1f6f9;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#download-link {
|
||||
text-align: right;
|
||||
color: #1f5f7a;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
32
client/templates/index.html
Normal file
32
client/templates/index.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TTS 저장/조회/삭제</title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<section class="panel left">
|
||||
<div class="panel-header">입력 텍스트</div>
|
||||
<textarea id="text-input" rows="16" placeholder="텍스트를 입력하세요"></textarea>
|
||||
<button id="save-btn" class="primary">mp3 저장</button>
|
||||
</section>
|
||||
|
||||
<section class="panel right">
|
||||
<div class="panel-header">파일리스트</div>
|
||||
<ul id="tts-list" class="tts-list"></ul>
|
||||
|
||||
<div class="right-actions">
|
||||
<button id="edit-btn" class="secondary">편집</button>
|
||||
<button id="delete-btn" class="danger hidden">삭제</button>
|
||||
<button id="cancel-btn" class="secondary hidden">취소</button>
|
||||
</div>
|
||||
<a id="download-link" class="hidden" href="#" download>mp3 다운로드</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user