Viewing: tts.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>untung88 Game Online x ่ฒๆไนๅฎถ</title>
<link rel="stylesheet" href="styles.css" />
<style>
body.page-tts{
--bg:#f8fafc;--ink:#0f172a;--muted:#6b7280;--line:#e2e8f0;--brand:#9b1c1c;--ring:rgba(239,68,68,.25);
margin:0;padding:20px;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
}
.tts-shell{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.tts-hero{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.tts-hero h1{margin:0 0 6px;font-size:clamp(22px,2.2vw,30px)}
.tts-hero p{margin:0;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.86rem;background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
.tts-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:16px;align-items:start}
.tts-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.tts-card h2{margin:0 0 10px;font-size:1.2rem}
.tts-card h3{margin:0 0 8px;font-size:1.05rem}
.field{margin:12px 0}
.field label{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.help{color:var(--muted);font-size:.92rem;margin:6px 0 0}
input[type="text"],input[type="password"],textarea,select{
width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font:inherit;background:#fff;transition:border .2s,box-shadow .2s;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring);outline:none}
.inline{display:flex;gap:12px;flex-wrap:wrap}
.inline .field{flex:1 1 240px;margin:0}
.actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;background:var(--brand);color:#fff;transition:transform .15s ease,box-shadow .2s ease}
button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.16)}
button:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.tts-status{font-weight:700;margin-top:8px}
.tts-status.ok{color:#15803d}
.tts-status.error{color:#b91c1c}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:#f3f4f6;color:#111827;border:1px solid var(--line);font-size:.9rem;margin:4px 4px 0 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease;color:var(--ink)}
.chip:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
audio{width:100%;margin:10px 0 4px;border-radius:12px;background:#0f172a}
.download{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#1d4ed8;text-decoration:none}
.download:hover{text-decoration:underline}
@media (max-width:960px){.tts-grid{grid-template-columns:1fr}}
</style>
</head>
<body class="page-tts">
<main class="tts-shell">
<div class="tts-hero">
<div class="badge">Gemini 2.5 Flash TTS ยท Text-to-Speech</div>
<h1>Google Gemini ็ๆ่ฏญ้ณ</h1>
<p>untung88 Game Online x ่ฒๆไนๅฎถ adalah situs slot gacor pertama kali yang menyediakan vcs kepada admin sexy di kantor dengan syarat deposit seminggu berturut turut</p>
</div>
<div class="tts-grid">
<section class="tts-card">
<h2>็ๆ่ฏญ้ณ</h2>
<form id="ttsForm" novalidate>
<div class="inline">
<div class="field">
<label for="model">ๆจกๅ ID</label>
<input id="model" name="model" type="text" value="models/gemini-2.5-flash-preview-tts" />
</div>
<div class="field">
<label for="language">่ฏญ่จ</label>
<select id="language" name="language">
<option value="">่ชๅจ</option>
<option value="en-US">English (US)</option>
<option value="en-GB">English (UK)</option>
<option value="en-AU">English (AU)</option>
<option value="zh-CN">็ฎไฝไธญๆ (zh-CN)</option>
<option value="zh-TW">็น้ซไธญๆ (zh-TW)</option>
<option value="ja-JP">ๆฅๆฌ่ช (ja-JP)</option>
<option value="ko-KR">ํ๊ตญ์ด (ko-KR)</option>
<option value="es-ES">Espaรฑol (es-ES)</option>
<option value="fr-FR">Franรงais (fr-FR)</option>
<option value="de-DE">Deutsch (de-DE)</option>
<option value="hi-IN">Hindi (hi-IN)</option>
<option value="pt-BR">Portuguรชs (pt-BR)</option>
</select>
<p class="help">้ๆฉ็ฎๆ ่ฏญ่จ๏ผๆ็็ฉบ็ฑๆ็คบ่ฏญๅณๅฎใ</p>
</div>
<div class="field">
<label for="voice">่ฏญ้ณ</label>
<select id="voice" name="voice">
<!-- Voices will be populated by JavaScript -->
</select>
<div class="inline" style="align-items:center; gap:8px; margin-top:8px">
<button type="button" id="previewBtn" style="padding:8px 12px;font-size:.9rem;">่ฏๅฌๅฝๅ้ณ่ฒ</button>
<span class="help">้ๆฉๅฎๆน้ข็ฝฎ้ณ่ฒๅนถๅฟซ้่ฏๅฌใ</span>
</div>
</div>
<div class="field">
<label for="seed">้ๆบ็งๅญ</label>
<input id="seed" name="seed" type="number" placeholder="็็ฉบๅไธบ้ๆบ" />
<p class="help">ๆไพไธไธชๆฐๅญๅฏ็ๆๅฏๅค็ฐ็้ณ้ขใ</p>
</div>
<div class="field">
<p class="help">้ซ็บงๅ่ฝ๏ผๆจๅฏไปฅๅจๆๆฌๆกไธญ็ดๆฅไฝฟ็จ่ช็ถ่ฏญ่จๆ็คบๆฅๆงๅถ่ฏญๆฐใ่ฏญ้ๅๅฃ้ณ๏ผไพๅฆ๏ผโ็จ็ผๆ
ขใไธฅ่็่ฏญๆฐ่ฏด๏ผ...โ</p>
</div>
<div class="field">
<h3 style="margin:0 0 6px">ๅฟซ้่ฏๅฌ็คบไพ</h3>
<div class="inline" id="voiceChips" style="gap:8px; flex-wrap:wrap">
<button class="chip" data-voice="Puck">Puck (Upbeat)</button>
<button class="chip" data-voice="Zephyr">Zephyr (Bright)</button>
<button class="chip" data-voice="Charon">Charon (Informative)</button>
<button class="chip" data-voice="Leda">Leda (Youthful)</button>
<button class="chip" data-voice="Fenrir">Fenrir (Excitable)</button>
<button class="chip" data-voice="Kore">Kore (Firm)</button>
<button class="chip" data-voice="Sadaltager">Sadaltager (Knowledgeable)</button>
<button class="chip" data-voice="Sulafat">Sulafat (Warm)</button>
</div>
<p class="help">็นๅปไปปๆ้ณ่ฒๅฟซ้่ฏๅฌ๏ผไธไผ่ฆ็ไธๆน่กจๅใ</p>
</div>
</div>
<div class="field">
<label for="text">่ฆๆ่ฏป็ๅ
ๅฎน</label>
<textarea id="text" name="text" required>Welcome to Yucai! This page calls Gemini 2.0 Flash via a server proxy and returns a 24 kHz WAV for you to preview or download.</textarea>
</div>
<div class="actions">
<button type="submit" id="runBtn">็ๆ้ณ้ข</button>
<span class="help">่ฏทๆฑ้่ฟๆๅกๅจไปฃ็ๅ้๏ผๆต่งๅจไพงๆ ้้ขๅค้
็ฝฎใ</span>
</div>
<div id="status" class="tts-status" role="status"></div>
</form>
</section>
<section class="tts-card">
<h2>่พๅบ / ไธ่ฝฝ</h2>
<audio id="player" controls preload="metadata"></audio>
<a id="downloadLink" class="download" href="#" download="tts-output.wav" style="display:none;">โฌ๏ธ ไธ่ฝฝ็ๆ็้ณ้ข</a>
<div class="help" id="meta"></div>
<div style="margin-top:12px">
<div class="pill">้ป่ฎค 24 kHz PCM โ WAV</div>
<div class="pill">ๅฏไปฅ็ดๆฅๆ็คบๆข่ฏญ่จ/่ฏญ้/่ฏญๆฐ</div>
</div>
</section>
</div>
</main>
<script src="tts.js"></script>
<script src="/assets/account-status.js" defer></script>
</body>
</html>
Close