Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Talking Snake - PDF & Web to Speech</title> | |
| <!-- PWA / Mobile App Configuration --> | |
| <meta name="application-name" content="Talking Snake"> | |
| <meta name="theme-color" content="#1a1a2e"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <link rel="manifest" href="/static/manifest.json"> | |
| <!-- iOS PWA Configuration --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="apple-mobile-web-app-title" content="Talking Snake"> | |
| <link rel="apple-touch-icon" href="/static/apple-touch-icon.png"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png"> | |
| <!-- Standard favicon --> | |
| <link rel="icon" type="image/png" href="/static/favicon.png"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png"> | |
| <link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500&display=swap"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"> | |
| <script src="https://unpkg.com/htmx.org@2.0.4"></script> | |
| </head> | |
| <body> | |
| <div class="main-content"> | |
| <img src="/static/talking_snake.png" alt="Talking Snake" class="logo"> | |
| <h1>Talking Snake</h1> | |
| <div class="container"> | |
| <div class="input-section" id="inputSection"> | |
| <div class="options-row"> | |
| <div class="style-selector"> | |
| <span class="style-label">Style:</span> | |
| <div class="style-buttons" id="styleButtons"> | |
| <button class="style-btn active" data-style="technical" title="Clear, precise reading for code and technical documentation"> | |
| <i class="fa-solid fa-microchip"></i> | |
| </button> | |
| <button class="style-btn" data-style="narrative" title="Natural, engaging reading for articles and stories"> | |
| <i class="fa-solid fa-book-open"></i> | |
| </button> | |
| <button class="style-btn" data-style="child_narrative" title="Playful, expressive reading for children's stories"> | |
| <i class="fa-solid fa-child"></i> | |
| </button> | |
| <button class="style-btn" data-style="news" title="Authoritative, clear delivery for news and reports"> | |
| <i class="fa-solid fa-newspaper"></i> | |
| </button> | |
| <button class="style-btn" data-style="academic" title="Measured, scholarly reading for papers and research"> | |
| <i class="fa-solid fa-graduation-cap"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="language-selector"> | |
| <span class="style-label">Language:</span> | |
| <div class="style-buttons" id="languageButtons"> | |
| <button class="style-btn lang-btn active" data-language="english" title="English">🇬🇧</button> | |
| <button class="style-btn lang-btn" data-language="chinese" title="Chinese">🇨🇳</button> | |
| <button class="style-btn lang-btn" data-language="japanese" title="Japanese">🇯🇵</button> | |
| <button class="style-btn lang-btn" data-language="korean" title="Korean">🇰🇷</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tabs"> | |
| <button class="tab active" data-tab="upload"><i class="fa-solid fa-upload"></i> Upload File</button> | |
| <button class="tab" data-tab="url"><i class="fa-solid fa-link"></i> From URL</button> | |
| <button class="tab" data-tab="text"><i class="fa-solid fa-keyboard"></i> Paste Text</button> | |
| </div> | |
| <div class="tab-content active" id="upload-tab"> | |
| <div class="drop-zone" id="dropZone"> | |
| <i class="fa-solid fa-file-pdf drop-icon"></i> | |
| <p>Drag & drop a PDF here</p> | |
| <input type="file" id="fileInput" accept=".pdf" class="hidden-file-input"> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="url-tab"> | |
| <div class="url-form"> | |
| <div class="url-input-row"> | |
| <input type="url" id="urlInput" placeholder="https://example.com/article or .pdf"> | |
| <button class="submit-btn" id="urlSubmit"><i class="fa-solid fa-microphone"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="text-tab"> | |
| <div class="text-form"> | |
| <textarea id="textInput" placeholder="Paste or type your text here..." rows="6"></textarea> | |
| <button class="submit-btn" id="textSubmit"><i class="fa-solid fa-microphone"></i> Read Text</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="processing-section" id="processingSection"> | |
| <div class="processing-row-1"> | |
| <div class="doc-info" id="docInfo"></div> | |
| </div> | |
| <div class="processing-row-2"> | |
| <div class="status" id="status"></div> | |
| <div class="processing-progress-container" id="processingProgressContainer"> | |
| <div class="processing-progress-bar" id="processingProgressBar"></div> | |
| </div> | |
| <div class="control-buttons"> | |
| <button class="control-btn play-btn hidden" id="streamPlayBtn" title="Play audio"><i class="fa-solid fa-play"></i></button> | |
| <button class="control-btn pause-btn hidden" id="pauseBtn" title="Pause/Resume"><i class="fa-solid fa-pause"></i></button> | |
| <button class="control-btn stop-btn" id="stopBtn" title="Stop generation"><i class="fa-solid fa-stop"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="device-info" id="deviceInfo"></div> | |
| <div class="player" id="player"> | |
| <div class="filename" id="filename"></div> | |
| <div class="custom-player"> | |
| <button class="player-btn play-btn" id="playerPlayBtn" title="Play/Pause"> | |
| <i class="fa-solid fa-play"></i> | |
| </button> | |
| <div class="progress-container" id="progressContainer"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <input type="range" class="progress-slider" id="progressSlider" min="0" max="100" value="0"> | |
| </div> | |
| <span class="time-display" id="timeDisplay">0:00 / 0:00</span> | |
| <button class="player-btn download-btn hidden" id="downloadBtn" title="Download Audio"> | |
| <i class="fa-solid fa-download"></i> | |
| </button> | |
| <button class="player-btn delete-btn hidden" id="deleteBtn" title="Delete Audio"> | |
| <i class="fa-solid fa-trash"></i> | |
| </button> | |
| </div> | |
| <audio id="audio" preload="auto"></audio> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Built with <i class="fa-solid fa-heart"></i> for listeners everywhere | <a href="https://github.com/LucaCappelletti94/talking-snake" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i> GitHub</a></p> | |
| </footer> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |