Download index.html from jebin2/TTS: direct link, hf CLI and curl.
- Browser
- Download file 45.5 kB
-
https://huggingface.co/spaces/jebin2/TTS/resolve/main/index.html
- Command line
-
hf download hf://spaces/jebin2/TTS/index.html
-
curl -L -o index.html https://huggingface.co/spaces/jebin2/TTS/resolve/main/index.html
45.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport" /> | |
| <title>TTS - Text-to-Speech</title> | |
| <!-- External Assets --> | |
| <script src="/static/js/tailwind.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Caveat:wght@400..700&display=swap" | |
| rel="stylesheet" /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" | |
| rel="stylesheet" /> | |
| <!-- Tailwind Configuration --> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| surface: "#e6f0fd", | |
| "crayon-blue": "#2563eb", | |
| "crayon-red": "#dc2626", | |
| "crayon-green": "#16a34a", | |
| "crayon-yellow": "#ca8a04", | |
| "crayon-orange": "#ea580c", | |
| "crayon-purple": "#7c3aed", | |
| "crayon-dark": "#1A1A1A" | |
| }, | |
| fontFamily: { | |
| "fredoka": ["Fredoka", "sans-serif"], | |
| "caveat": ["Caveat", "cursive"] | |
| }, | |
| fontSize: { | |
| "headline-lg": ["42px", { lineHeight: "1.1", fontWeight: "700" }], | |
| "headline-md": ["28px", { lineHeight: "1.2", fontWeight: "600" }], | |
| "body-lg": ["24px", { lineHeight: "1.5", fontWeight: "500" }], | |
| "label-sm": ["18px", { lineHeight: "1.2", letterSpacing: "0.01em", fontWeight: "500" }], | |
| "body-md": ["20px", { lineHeight: "1.5", fontWeight: "400" }] | |
| } | |
| }, | |
| }, | |
| } | |
| </script> | |
| <svg height="0" style="position: absolute;" width="0"> | |
| <filter height="120%" id="crayon-texture" width="120%" x="-10%" y="-10%"> | |
| <feTurbulence baseFrequency="0.4" numOctaves="3" result="noise" type="fractalNoise"></feTurbulence> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G"> | |
| </feDisplacementMap> | |
| </filter> | |
| <filter height="120%" id="crayon-heavy" width="120%" x="-10%" y="-10%"> | |
| <feTurbulence baseFrequency="0.5" numOctaves="4" result="noise" type="fractalNoise"></feTurbulence> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"> | |
| </feDisplacementMap> | |
| </filter> | |
| </svg> | |
| <style> | |
| /* Sketchbook Styles */ | |
| body { | |
| background-color: #e6f0fd; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"); | |
| color: #1A1A1A; | |
| font-family: 'Fredoka', sans-serif; | |
| } | |
| .bg-surface { | |
| background-color: rgb(255 255 255 / 0%) ; | |
| backdrop-filter: blur(2px); | |
| } | |
| .crayon-filter { | |
| filter: url('#crayon-texture'); | |
| } | |
| .crayon-heavy { | |
| filter: url('#crayon-heavy'); | |
| } | |
| .crayon-border-green { | |
| border: 4px solid #16a34a; | |
| border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px; | |
| filter: url('#crayon-texture'); | |
| } | |
| .task-card { | |
| border: 3px solid rgba(124, 58, 237, 0.4); | |
| border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px; | |
| filter: url('#crayon-texture'); | |
| } | |
| .crayon-border-blue { | |
| border: 4px dashed #2563eb; | |
| border-radius: 15px 10px 12px 18px / 12px 18px 15px 10px; | |
| filter: url('#crayon-texture'); | |
| } | |
| .crayon-border-purple { | |
| border: 4px solid #7c3aed; | |
| border-radius: 10px 16px 12px 14px / 16px 12px 14px 10px; | |
| filter: url('#crayon-texture'); | |
| } | |
| .crayon-button { | |
| border: 4px solid #2563eb; | |
| border-radius: 12px 8px 14px 10px / 8px 14px 10px 12px; | |
| transition: all 0.2s ease; | |
| filter: url('#crayon-texture'); | |
| cursor: pointer; | |
| } | |
| .crayon-button:hover { | |
| transform: scale(1.05) rotate(1deg); | |
| box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1); | |
| } | |
| .crayon-button:hover .material-symbols-outlined.spin-on-hover { | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes drift { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 50% { | |
| transform: translateX(20px); | |
| } | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| } | |
| .drift-slow { | |
| animation: drift 8s ease-in-out infinite; | |
| } | |
| .drift-medium { | |
| animation: drift 5s ease-in-out infinite; | |
| } | |
| .organic-shape { | |
| border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; | |
| filter: url('#crayon-texture'); | |
| } | |
| .scribble-fill-green { | |
| background: repeating-linear-gradient(60deg, #16a34a, #16a34a 2px, #15803d 3px, #16a34a 4px); | |
| } | |
| .progress-fill { | |
| background: repeating-linear-gradient(80deg, #2563eb, #2563eb 2px, #1d4ed8 3px, #2563eb 5px); | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; | |
| filter: url('#crayon-texture'); | |
| } | |
| /* --- Modals --- */ | |
| .modal { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 23, 42, 0.6); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| padding: 2rem; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| border: 4px solid #2563eb; | |
| width: 100%; | |
| max-width: 900px; | |
| border-radius: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| max-height: 85vh; | |
| box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| } | |
| .modal-sketch-bg { | |
| position: absolute; | |
| inset: -8px; | |
| border: 6px solid #2563eb; | |
| backdrop-filter: blur(10px); | |
| border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; | |
| z-index: -1; | |
| filter: url('#crayon-texture'); | |
| pointer-events: none; | |
| } | |
| .modal-header { | |
| padding: 1.5rem 2rem; | |
| border-bottom: 3px dashed #adc6ff; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .modal-body { | |
| padding: 2rem; | |
| overflow-y: auto; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| #resultText, | |
| pre { | |
| border: 3px dashed #adc6ff ; | |
| padding: 2rem ; | |
| border-radius: 20px ; | |
| font-family: 'Fredoka', sans-serif ; | |
| font-size: 1.5rem ; | |
| font-weight: 600 ; | |
| color: #fff ; | |
| white-space: pre-wrap ; | |
| word-break: break-all ; | |
| line-height: 1.6 ; | |
| filter: url('#crayon-texture'); | |
| } | |
| .close-modal { | |
| background: transparent; | |
| border: none; | |
| color: #dc2626; | |
| font-size: 3rem; | |
| cursor: pointer; | |
| font-weight: 700; | |
| } | |
| .text-headline-lg { | |
| filter: url('#crayon-texture'); | |
| } | |
| .copy-btn { | |
| background: #16a34a; | |
| color: white; | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 12px; | |
| font-weight: 700; | |
| box-shadow: 4px 4px 0px 0px #15803d; | |
| transition: all 0.2s; | |
| filter: url('#crayon-texture'); | |
| } | |
| .copy-btn:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 6px 6px 0px 0px #15803d; | |
| } | |
| /* --- Specific UI Elements --- */ | |
| .status-modal-content { | |
| max-width: 450px; | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| } | |
| .status-modal-bg { | |
| position: absolute; | |
| inset: -12px; | |
| border: 8px solid #2563eb; | |
| background: #e6f0fd; | |
| border-radius: 20px 40px 15px 35px / 35px 15px 40px 20px; | |
| z-index: -1; | |
| filter: url('#crayon-texture'); | |
| pointer-events: none; | |
| } | |
| .status-icon-container { | |
| width: 100px; | |
| height: 100px; | |
| margin: 0 auto 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px; | |
| border: 4px solid currentColor; | |
| filter: url('#crayon-texture'); | |
| position: relative; | |
| z-index: 20; | |
| } | |
| .status-icon-bg { | |
| position: absolute; | |
| inset: 0; | |
| background: currentColor; | |
| opacity: 0.15; | |
| z-index: -1; | |
| border-radius: inherit; | |
| } | |
| .modal-decoration { | |
| position: absolute; | |
| pointer-events: none; | |
| opacity: 0.3; | |
| z-index: 5; | |
| filter: url('#crayon-texture'); | |
| } | |
| .table-container::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| .table-container::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 10px; | |
| } | |
| .table-container::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 10px; | |
| border: 2px solid #f1f5f9; | |
| } | |
| .dragging { | |
| border-color: #16a34a ; | |
| background-color: #f0fdf4 ; | |
| } | |
| textarea { | |
| background: rgba(255, 255, 255, 0.4); | |
| border: 4px solid #2563eb; | |
| border-radius: 15px 10px 12px 18px / 12px 18px 15px 10px; | |
| outline: none; | |
| resize: none; | |
| font-family: 'Fredoka', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: #1A1A1A; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 100px; | |
| padding: 1rem; | |
| filter: url('#crayon-texture'); | |
| transition: border-color 0.2s; | |
| } | |
| textarea:focus { | |
| border-color: #7c3aed; | |
| background: #fff; | |
| } | |
| select, | |
| input[type="number"] { | |
| background: rgba(255, 255, 255, 0.4); | |
| border: 4px solid #7c3aed; | |
| border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px; | |
| padding: 0.5rem 0.8rem; | |
| font-family: 'Fredoka', sans-serif; | |
| color: #1e1b4b; | |
| filter: url('#crayon-texture'); | |
| outline: none; | |
| appearance: none; | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| /* --- Custom Dropdown --- */ | |
| .custom-dropdown { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .dropdown-trigger { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: rgba(255, 255, 255, 0.4); | |
| border: 4px solid #7c3aed; | |
| border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px; | |
| padding: 0.5rem 0.8rem; | |
| font-family: 'Fredoka', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: #1e1b4b; | |
| filter: url('#crayon-texture'); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .dropdown-trigger:hover { | |
| transform: scale(1.02) rotate(-0.5deg); | |
| border-color: #2563eb; | |
| } | |
| .dropdown-popup { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| left: 0; | |
| width: 100%; | |
| background: #fff; | |
| border: 4px solid #7c3aed; | |
| border-radius: 15px 25px 18px 22px / 22px 18px 25px 15px; | |
| z-index: 150; | |
| display: none; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| max-height: 200px; | |
| box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1); | |
| filter: url('#crayon-texture'); | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .dropdown-popup::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .dropdown-popup::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| .dropdown-popup::-webkit-scrollbar-thumb { | |
| background: #adc6ff; | |
| border-radius: 10px; | |
| } | |
| .dropdown-popup.active { | |
| display: flex; | |
| } | |
| .dropdown-group { | |
| padding: 0.3rem 0.8rem; | |
| background: #e6f0fd; | |
| color: #7c3aed; | |
| border-bottom: 2px dashed #adc6ff; | |
| } | |
| .dropdown-option { | |
| padding: 0.8rem 1.2rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-weight: 600; | |
| border-bottom: 1px solid #f1f5f9; | |
| } | |
| .dropdown-option:last-child { | |
| border-bottom: none; | |
| } | |
| .dropdown-option:hover { | |
| background: #f5f3ff; | |
| color: #7c3aed; | |
| padding-left: 1.5rem; | |
| } | |
| .dropdown-option.selected { | |
| background: #e6f0fd; | |
| color: #2563eb; | |
| } | |
| audio { | |
| width: 100%; | |
| height: 50px; | |
| border-radius: 12px; | |
| filter: url('#crayon-texture'); | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col overflow-hidden relative"> | |
| <!-- Main Background Decorations --> | |
| <div class="fixed inset-0 pointer-events-none overflow-hidden -z-10 opacity-40"> | |
| <!-- Stars --> | |
| <span | |
| class="material-symbols-outlined absolute text-5xl text-crayon-yellow top-20 left-[10%] rotate-12 crayon-heavy animate-pulse">star</span> | |
| <span | |
| class="material-symbols-outlined absolute text-3xl text-crayon-orange top-[40%] left-[5%] -rotate-12 crayon-filter">star</span> | |
| <span | |
| class="material-symbols-outlined absolute text-4xl text-crayon-yellow bottom-[20%] left-[15%] rotate-45 animate-pulse">star</span> | |
| <span | |
| class="material-symbols-outlined absolute text-6xl text-crayon-orange top-[15%] right-[15%] rotate-[-15deg] crayon-heavy">star</span> | |
| <span | |
| class="material-symbols-outlined absolute text-3xl text-crayon-yellow bottom-[30%] right-[10%] rotate-12 animate-pulse">star</span> | |
| <!-- Clouds --> | |
| <span | |
| class="material-symbols-outlined absolute text-[120px] text-crayon-blue top-[10%] left-[25%] opacity-20 drift-slow">cloud</span> | |
| <span | |
| class="material-symbols-outlined absolute text-[80px] text-crayon-purple bottom-[15%] left-[40%] opacity-10 drift-medium">cloud</span> | |
| <span | |
| class="material-symbols-outlined absolute text-[100px] text-crayon-blue top-[60%] right-[25%] opacity-15 drift-slow">cloud</span> | |
| <span | |
| class="material-symbols-outlined absolute text-[150px] text-crayon-purple top-[30%] right-[5%] opacity-10 drift-medium">cloud</span> | |
| <!-- Hearts --> | |
| <span | |
| class="material-symbols-outlined absolute text-4xl text-crayon-red top-[25%] left-[18%] rotate-[-15deg] crayon-filter animate-pulse">favorite</span> | |
| <span | |
| class="material-symbols-outlined absolute text-2xl text-crayon-red bottom-[10%] right-[20%] rotate-12 crayon-filter">favorite</span> | |
| <span | |
| class="material-symbols-outlined absolute text-5xl text-crayon-red top-[70%] left-[8%] rotate-[10deg] animate-pulse">favorite</span> | |
| </div> | |
| <!-- Header --> | |
| <header | |
| class="bg-surface flex justify-between items-center w-[calc(100%-48px)] mx-6 mt-6 px-8 py-5 crayon-border-green z-10 shrink-0 organic-shape shadow-sm"> | |
| <div class="flex items-center gap-5"> | |
| <div | |
| class="bg-crayon-green text-white w-14 h-14 rounded-2xl flex items-center justify-center border-[3px] border-crayon-green rotate-[-4deg] crayon-filter scribble-fill-green shadow-md"> | |
| <span class="material-symbols-outlined text-4xl">record_voice_over</span> | |
| </div> | |
| <div class="flex flex-col -rotate-1"> | |
| <h1 class="text-headline-lg text-[#4c1d95] leading-none mb-1">TTS</h1> | |
| <span class="text-label-sm text-[#4b5563] font-bold">Text-to-Speech</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-10 relative"> | |
| <div class="absolute -left-48 top-2 rotate-12 crayon-heavy"> | |
| <span class="material-symbols-outlined text-4xl text-crayon-yellow">star</span> | |
| </div> | |
| <div class="absolute -left-24 top-0 -rotate-6 crayon-heavy opacity-80"> | |
| <span class="material-symbols-outlined text-5xl text-crayon-blue">cloud</span> | |
| </div> | |
| <button id="apiDocBtn" | |
| class="flex items-center gap-2 text-headline-md text-crayon-purple px-8 py-3 bg-surface crayon-button rotate-1 shadow-md"> | |
| <span class="material-symbols-outlined text-3xl">menu_book</span> | |
| API DOC | |
| </button> | |
| <div | |
| class="flex items-center gap-4 bg-surface px-6 py-3 rounded-full border-[4px] border-crayon-green organic-shape shadow-md"> | |
| <div id="healthDot" class="w-4 h-4 rounded-full bg-crayon-green shadow-[0_0_12px_rgba(22,163,74,0.5)]"> | |
| </div> | |
| <span id="healthText" class="text-headline-md text-crayon-green text-2xl">Service Online</span> | |
| <div class="text-crayon-orange flex items-center justify-center rotate-[15deg]"> | |
| <span class="material-symbols-outlined text-4xl">light_mode</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex overflow-hidden p-8 gap-8 mx-auto w-full relative"> | |
| <!-- Input Section --> | |
| <section class="w-[450px] flex flex-col gap-8"> | |
| <div | |
| class="flex flex-col gap-4 p-6 bg-surface crayon-border-blue flex-1 relative organic-shape shadow-sm hover:shadow-md transition-shadow overflow-y-auto table-container"> | |
| <div class="flex items-center gap-4 mb-2 rotate-1"> | |
| <div | |
| class="bg-crayon-blue text-white rounded-full w-12 h-12 flex items-center justify-center border-2 border-crayon-blue crayon-filter shadow-md"> | |
| <span class="material-symbols-outlined text-3xl">edit_note</span> | |
| </div> | |
| <div> | |
| <h2 class="text-headline-md text-crayon-blue leading-none mb-1 flex items-center gap-2"> | |
| INPUT | |
| <span class="material-symbols-outlined text-crayon-red text-xl rotate-12">favorite</span> | |
| </h2> | |
| <p class="text-label-sm text-[#6b7280]">Submit your task</p> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex flex-col gap-4"> | |
| <div class="flex-1 min-h-[120px]"> | |
| <textarea id="textInput" placeholder="Enter text to speak..."></textarea> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <label class="text-label-sm font-bold text-crayon-purple">VOICE</label> | |
| <div class="custom-dropdown" id="voiceDropdown"> | |
| <div class="dropdown-trigger" id="voiceTrigger"> | |
| <span id="selectedVoice">American Male</span> | |
| <span class="material-symbols-outlined">expand_more</span> | |
| </div> | |
| <div class="dropdown-popup" id="voicePopup"> | |
| <div class="dropdown-group">Female</div> | |
| <div class="dropdown-option" data-value="1">Main</div> | |
| <div class="dropdown-option" data-value="2">Ellen</div> | |
| <div class="dropdown-option" data-value="5">Ellen (Young)</div> | |
| <div class="dropdown-option" data-value="9">British Woman</div> | |
| <div class="dropdown-option" data-value="11">Kelly (Story)</div> | |
| <div class="dropdown-option" data-value="14">News Female</div> | |
| <div class="dropdown-group">Male</div> | |
| <div class="dropdown-option" data-value="3">Kratos</div> | |
| <div class="dropdown-option selected" data-value="4">American Male</div> | |
| <div class="dropdown-option" data-value="6">Simple Guy</div> | |
| <div class="dropdown-option" data-value="8">BBC News</div> | |
| <div class="dropdown-option" data-value="10">David (News)</div> | |
| <div class="dropdown-option" data-value="12">Coach</div> | |
| <div class="dropdown-option" data-value="13">Motivational</div> | |
| </div> | |
| </div> | |
| <input type="hidden" id="voiceSelect" value="4"> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <label class="text-label-sm font-bold text-crayon-purple">SPEED</label> | |
| <input type="number" id="speedInput" value="1.0" step="0.1" min="0.5" max="2.0"> | |
| </div> | |
| <button id="generateBtn" | |
| class="crayon-button bg-crayon-blue text-white py-3 text-headline-md mt-2 flex items-center justify-center gap-2"> | |
| <span class="material-symbols-outlined text-3xl">rocket_launch</span> | |
| SUBMIT TASK | |
| </button> | |
| <div class="text-center py-2"> | |
| <span class="text-label-sm text-[#94a3b8] font-bold">OR</span> | |
| <div id="uploadZone" | |
| class="mt-2 py-3 border-[3px] border-dashed border-crayon-green rounded-xl cursor-pointer hover:bg-green-50 transition-colors"> | |
| <p class="text-label-sm text-crayon-green font-bold flex items-center justify-center gap-2"> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| Upload .txt | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <input type="file" id="fileInput" hidden accept=".txt,.md,.text"> | |
| </div> | |
| </section> | |
| <!-- Activity Section --> | |
| <section | |
| class="flex-1 flex flex-col bg-surface crayon-border-purple p-8 relative organic-shape overflow-hidden shadow-sm"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div class="flex items-center gap-4 rotate-1"> | |
| <div | |
| class="bg-crayon-purple text-white rounded-full w-14 h-14 flex items-center justify-center border-[3px] border-crayon-purple shadow-md"> | |
| <span class="material-symbols-outlined text-4xl">schedule</span> | |
| </div> | |
| <div> | |
| <h2 class="text-headline-lg text-[#4c1d95] leading-none mb-1">ACTIVITY</h2> | |
| <p class="text-label-sm text-[#6b7280] font-bold">Recent tasks</p> | |
| </div> | |
| </div> | |
| <div class="relative w-40 h-20 flex items-center"> | |
| <svg class="absolute left-[-30px] top-4 w-32 h-16 crayon-filter text-crayon-yellow" fill="none" | |
| stroke="currentColor" stroke-dasharray="6 6" stroke-linecap="round" stroke-width="3" | |
| viewBox="0 0 100 50"> | |
| <path d="M10,40 Q40,50 60,30 T90,10" /> | |
| </svg> | |
| <span | |
| class="material-symbols-outlined text-5xl text-crayon-orange absolute right-0 top-0 rotate-12">send</span> | |
| </div> | |
| <button onclick="loadTasks()" | |
| class="flex items-center gap-2 text-headline-md text-crayon-blue px-8 py-3 bg-surface crayon-button border-[4px] -rotate-1 shadow-md"> | |
| <span class="material-symbols-outlined text-3xl spin-on-hover">sync</span> | |
| Refresh | |
| </button> | |
| </div> | |
| <!-- List Header --> | |
| <div class="flex w-full px-6 pb-4 border-b-[5px] text-[#4c1d95] font-bold text-xl uppercase tracking-wider" | |
| style="border-color: rgba(124, 58, 237, 0.4); border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px; filter: url(#crayon-texture);"> | |
| <div class="w-1/2">CONTENT</div> | |
| <div class="w-1/6 text-center">STATUS</div> | |
| <div class="w-1/4 text-center">PROGRESS</div> | |
| <div class="w-[10%] text-center">ACTION</div> | |
| </div> | |
| <!-- Task List Body --> | |
| <div id="queueBody" class="flex flex-col gap-5 mt-6 overflow-y-auto flex-1 table-container pr-4"> | |
| <div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No speech tasks | |
| found yet...</div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Modals --> | |
| <!-- Result & API Modal --> | |
| <div id="resultModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-sketch-bg"></div> | |
| <!-- Decorations --> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-6xl text-crayon-yellow top-4 left-4 -rotate-12">star</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-8xl text-crayon-blue top-12 right-20 opacity-20">cloud</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-4xl text-crayon-orange bottom-10 left-10 rotate-45">star</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-7xl text-crayon-purple bottom-4 right-4 -rotate-6 opacity-40">cloud</span> | |
| <div class="modal-header"> | |
| <div class="flex items-center gap-6"> | |
| <span id="modalTitle" class="text-headline-lg text-[#1e1b4b]">Result</span> | |
| <button id="copyBtn" onclick="copyResult()" class="copy-btn">📋 Copy</button> | |
| <a id="downloadBtn" href="#" download class="copy-btn bg-crayon-blue shadow-blue-800">⬇️ Download | |
| Audio</a> | |
| </div> | |
| <button class="close-modal" onclick="closeModal()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="audioContainer" class="mb-6 hidden"> | |
| <audio id="audioPlayer" controls></audio> | |
| </div> | |
| <pre id="resultText"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Modal --> | |
| <div id="statusModal" class="modal"> | |
| <div class="modal-content status-modal-content"> | |
| <div id="statusBg" class="status-modal-bg"></div> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-4xl text-crayon-yellow top-6 right-6 rotate-12">star</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-6xl text-crayon-blue top-10 left-4 opacity-30">cloud</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-3xl text-crayon-orange bottom-8 right-10 -rotate-12">star</span> | |
| <span | |
| class="material-symbols-outlined modal-decoration text-5xl text-crayon-purple bottom-10 left-8 rotate-6 opacity-30">cloud</span> | |
| <div id="statusIconContainer" class="status-icon-container text-crayon-blue"> | |
| <div class="status-icon-bg"></div> | |
| <span id="statusIcon" class="material-symbols-outlined text-6xl animate-bounce">upload</span> | |
| </div> | |
| <h2 id="statusMessage" class="text-headline-lg text-crayon-blue mb-2">Processing...</h2> | |
| <p id="statusSubMessage" class="text-body-lg text-[#4b5563]">Creating your audio task, please wait.</p> | |
| </div> | |
| </div> | |
| <!-- Application Logic --> | |
| <script> | |
| // --- Configuration --- | |
| const API_BASE = '/api'; | |
| // --- DOM Elements --- | |
| const UI = { | |
| generateBtn: document.getElementById('generateBtn'), | |
| uploadZone: document.getElementById('uploadZone'), | |
| fileInput: document.getElementById('fileInput'), | |
| textInput: document.getElementById('textInput'), | |
| voiceSelect: document.getElementById('voiceSelect'), | |
| voiceDropdown: document.getElementById('voiceDropdown'), | |
| voiceTrigger: document.getElementById('voiceTrigger'), | |
| voicePopup: document.getElementById('voicePopup'), | |
| selectedVoice: document.getElementById('selectedVoice'), | |
| speedInput: document.getElementById('speedInput'), | |
| queueBody: document.getElementById('queueBody'), | |
| resultModal: document.getElementById('resultModal'), | |
| statusModal: document.getElementById('statusModal'), | |
| resultText: document.getElementById('resultText'), | |
| modalTitle: document.getElementById('modalTitle'), | |
| copyBtn: document.getElementById('copyBtn'), | |
| downloadBtn: document.getElementById('downloadBtn'), | |
| audioContainer: document.getElementById('audioContainer'), | |
| audioPlayer: document.getElementById('audioPlayer'), | |
| statusMessage: document.getElementById('statusMessage'), | |
| statusSubMessage: document.getElementById('statusSubMessage'), | |
| statusIcon: document.getElementById('statusIcon'), | |
| statusIconContainer: document.getElementById('statusIconContainer'), | |
| statusBg: document.getElementById('statusBg'), | |
| healthDot: document.getElementById('healthDot'), | |
| healthText: document.getElementById('healthText'), | |
| apiDocBtn: document.getElementById('apiDocBtn') | |
| }; | |
| // --- Custom Dropdown Logic --- | |
| UI.voiceTrigger.onclick = (e) => { | |
| e.stopPropagation(); | |
| UI.voicePopup.classList.toggle('active'); | |
| }; | |
| document.querySelectorAll('.dropdown-option').forEach(option => { | |
| option.onclick = (e) => { | |
| const value = option.getAttribute('data-value'); | |
| const text = option.innerText; | |
| UI.voiceSelect.value = value; | |
| UI.selectedVoice.innerText = text; | |
| document.querySelectorAll('.dropdown-option').forEach(opt => opt.classList.remove('selected')); | |
| option.classList.add('selected'); | |
| UI.voicePopup.classList.remove('active'); | |
| }; | |
| }); | |
| window.onclick = () => { | |
| UI.voicePopup.classList.remove('active'); | |
| }; | |
| // --- UI Helpers --- | |
| function updateStatusModal(type, msg, subMsg) { | |
| UI.statusMessage.innerText = msg; | |
| UI.statusSubMessage.innerText = subMsg || "Processing your request, please wait."; | |
| UI.statusIconContainer.className = "status-icon-container"; | |
| UI.statusIcon.className = "material-symbols-outlined text-6xl"; | |
| UI.statusBg.style.borderColor = ""; | |
| if (type === 'working') { | |
| UI.statusIconContainer.classList.add('text-crayon-blue'); | |
| UI.statusIcon.innerText = "settings"; | |
| UI.statusIcon.classList.add('animate-spin'); | |
| UI.statusBg.style.borderColor = "#2563eb"; | |
| } else if (type === 'success') { | |
| UI.statusIconContainer.classList.add('text-crayon-green'); | |
| UI.statusIcon.innerText = "check_circle"; | |
| UI.statusBg.style.borderColor = "#16a34a"; | |
| } else if (type === 'error') { | |
| UI.statusIconContainer.classList.add('text-crayon-red'); | |
| UI.statusIcon.innerText = "error"; | |
| UI.statusBg.style.borderColor = "#dc2626"; | |
| } | |
| } | |
| function closeModal() { | |
| UI.resultModal.classList.remove('active'); | |
| UI.audioPlayer.pause(); | |
| } | |
| function copyResult() { | |
| const text = UI.resultText.innerText; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const orig = UI.copyBtn.innerText; | |
| UI.copyBtn.innerText = '✓ Copied!'; | |
| setTimeout(() => { UI.copyBtn.innerText = orig; }, 2000); | |
| }); | |
| } | |
| // --- API Functions --- | |
| async function loadTasks() { | |
| try { | |
| const res = await fetch(`${API_BASE}/tasks`); | |
| const data = await res.json(); | |
| renderQueue(data); | |
| } catch (err) { | |
| console.error("Load tasks error:", err); | |
| } | |
| } | |
| async function handleGenerate() { | |
| const text = UI.textInput.value.trim(); | |
| if (!text) return; | |
| UI.statusModal.classList.add('active'); | |
| updateStatusModal('working', "Queuing...", "Sending text to server..."); | |
| const formData = new FormData(); | |
| formData.append('text', text); | |
| formData.append('voice', UI.voiceSelect.value); | |
| formData.append('speed', UI.speedInput.value); | |
| try { | |
| const res = await fetch(`${API_BASE}/tasks/upload`, { method: 'POST', body: formData }); | |
| if (res.ok) { | |
| updateStatusModal('success', "Queued! ✨", "Task created and starting soon."); | |
| UI.textInput.value = ''; | |
| setTimeout(() => { | |
| UI.statusModal.classList.remove('active'); | |
| loadTasks(); | |
| }, 1200); | |
| } else { | |
| updateStatusModal('error', "Failed ❌", "Could not create task."); | |
| setTimeout(() => UI.statusModal.classList.remove('active'), 2000); | |
| } | |
| } catch (err) { | |
| console.error("Upload error:", err); | |
| updateStatusModal('error', "Error ⚠️", "Could not reach server."); | |
| setTimeout(() => UI.statusModal.classList.remove('active'), 2000); | |
| } | |
| } | |
| async function handleFile(file) { | |
| if (!file) return; | |
| UI.statusModal.classList.add('active'); | |
| updateStatusModal('working', "Uploading...", "Reading text file..."); | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('voice', UI.voiceSelect.value); | |
| formData.append('speed', UI.speedInput.value); | |
| try { | |
| const res = await fetch(`${API_BASE}/tasks/upload`, { method: 'POST', body: formData }); | |
| if (res.ok) { | |
| updateStatusModal('success', "Uploaded! ✨", "Task created from file."); | |
| setTimeout(() => { | |
| UI.statusModal.classList.remove('active'); | |
| loadTasks(); | |
| }, 1200); | |
| } else { | |
| updateStatusModal('error', "Failed ❌", "Invalid file or server error."); | |
| setTimeout(() => UI.statusModal.classList.remove('active'), 2000); | |
| } | |
| } catch (err) { | |
| console.error("Upload error:", err); | |
| updateStatusModal('error', "Error ⚠️", "Connection failed."); | |
| setTimeout(() => UI.statusModal.classList.remove('active'), 2000); | |
| } | |
| } | |
| async function showResult(id) { | |
| try { | |
| const res = await fetch(`${API_BASE}/tasks/${id}`); | |
| const data = await res.json(); | |
| UI.modalTitle.innerText = "Speech Task Details"; | |
| UI.resultText.innerText = data.text || data.filename; | |
| UI.copyBtn.classList.remove('hidden'); | |
| if (data.status === 'completed') { | |
| UI.audioContainer.classList.remove('hidden'); | |
| UI.downloadBtn.classList.remove('hidden'); | |
| UI.audioPlayer.src = `${API_BASE}/download/${id}`; | |
| UI.downloadBtn.href = `${API_BASE}/download/${id}`; | |
| } else { | |
| UI.audioContainer.classList.add('hidden'); | |
| UI.downloadBtn.classList.add('hidden'); | |
| } | |
| UI.resultModal.classList.add('active'); | |
| } catch (err) { | |
| console.error("Show result error:", err); | |
| } | |
| } | |
| async function checkHealth() { | |
| try { | |
| const res = await fetch('/health'); | |
| const data = await res.json(); | |
| const healthy = data.status === 'healthy'; | |
| UI.healthDot.className = `w-4 h-4 rounded-full ${healthy ? 'bg-crayon-green' : 'bg-crayon-red'} shadow-md`; | |
| UI.healthText.innerText = healthy ? 'Service Online' : 'Service Down'; | |
| UI.healthText.className = `text-headline-md font-bold ${healthy ? 'text-crayon-green' : 'text-crayon-red'}`; | |
| } catch (e) { | |
| UI.healthDot.className = 'w-4 h-4 rounded-full bg-crayon-red shadow-md'; | |
| UI.healthText.innerText = 'Connection Error'; | |
| UI.healthText.className = 'text-headline-md font-bold text-crayon-red'; | |
| } | |
| } | |
| // --- Renderers --- | |
| function renderQueue(tasks) { | |
| if (tasks.length === 0) { | |
| UI.queueBody.innerHTML = '<div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No tasks found yet...</div>'; | |
| return; | |
| } | |
| UI.queueBody.innerHTML = tasks.map((t, i) => { | |
| const rotate = i % 2 === 0 ? 'rotate-[0.3deg]' : '-rotate-[0.3deg]'; | |
| const status = t.status.toLowerCase(); | |
| const colors = { | |
| completed: { text: 'crayon-green', bg: 'bg-[#f0fdf4]' }, | |
| failed: { text: 'crayon-red', bg: 'bg-[#fef2f2]' }, | |
| processing: { text: 'crayon-blue', bg: 'bg-[#eff6ff]' }, | |
| pending: { text: 'crayon-purple', bg: 'bg-[#f5f3ff]' }, | |
| not_started: { text: 'crayon-purple', bg: 'bg-[#f5f3ff]' } | |
| }; | |
| const theme = colors[status] || colors.pending; | |
| const snippet = t.filename || t.text || "Unnamed Task"; | |
| return ` | |
| <div class="task-card flex items-center p-6 bg-surface hover:border-crayon-purple transition-colors shadow-sm ${rotate}"> | |
| <div class="flex items-center gap-5 w-1/2"> | |
| <div class="w-14 h-16 border-[3px] border-crayon-blue rounded-xl p-2 bg-surface flex shadow-sm organic-shape rotate-[-3deg] shrink-0"> | |
| <div class="w-full h-full flex flex-col gap-1.5 p-0.5"> | |
| <div class="w-full h-1 bg-[#adc6ff] rounded-sm"></div> | |
| <div class="w-full h-1 bg-[#adc6ff] rounded-sm"></div> | |
| <div class="w-2/3 h-1 bg-[#adc6ff] rounded-sm"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col min-w-0"> | |
| <span class="text-headline-md text-[#1A1A1A] leading-tight font-bold mb-1 truncate">${snippet}</span> | |
| <div class="text-label-sm text-[#94a3b8] font-bold">${t.id.substring(0, 12)}</div> | |
| </div> | |
| </div> | |
| <div class="w-1/6 flex justify-center"> | |
| <div class="px-4 py-2 ${theme.bg} border-[3px] border-${theme.text} text-${theme.text} font-bold rounded-2xl uppercase tracking-tight crayon-filter text-sm"> | |
| ${status.replace('_', ' ')} | |
| </div> | |
| </div> | |
| <div class="w-1/4 flex items-center justify-center gap-4"> | |
| <div class="flex-1 h-5 border-[3px] border-[#adc6ff] rounded-full overflow-hidden bg-surface p-[1px] crayon-filter"> | |
| <div class="h-full rounded-full progress-fill shadow-sm" style="width:${t.progress}%"></div> | |
| </div> | |
| <span class="text-headline-md text-xl text-[#1A1A1A] font-bold w-12 text-right">${status === 'completed' ? '' : t.progress + '%'}</span> | |
| </div> | |
| <div class="w-[10%] flex justify-center"> | |
| <button onclick="showResult('${t.id}')" class="flex items-center gap-2 px-4 py-2 bg-white border-[3px] border-crayon-blue text-crayon-blue font-bold rounded-2xl hover:bg-crayon-blue hover:text-white transition-all shadow-sm crayon-filter text-sm"> | |
| <span class="material-symbols-outlined text-xl">${status === 'completed' ? 'play_arrow' : 'visibility'}</span> | |
| ${status === 'completed' ? 'PLAY' : 'VIEW'} | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| }).join(''); | |
| } | |
| // --- Event Listeners --- | |
| UI.generateBtn.onclick = handleGenerate; | |
| UI.uploadZone.onclick = () => UI.fileInput.click(); | |
| UI.uploadZone.ondragover = (e) => { e.preventDefault(); UI.uploadZone.classList.add('dragging'); }; | |
| UI.uploadZone.ondragleave = () => UI.uploadZone.classList.remove('dragging'); | |
| UI.uploadZone.ondrop = (e) => { | |
| e.preventDefault(); | |
| UI.uploadZone.classList.remove('dragging'); | |
| handleFile(e.dataTransfer.files[0]); | |
| }; | |
| UI.fileInput.onchange = (e) => handleFile(e.target.files[0]); | |
| UI.apiDocBtn.onclick = () => { | |
| const doc = { | |
| base_url: window.location.origin, | |
| endpoints: [ | |
| { method: "POST", path: "/api/tasks/upload", desc: "Create TTS task", params: { text: "string", voice: "1-14", speed: "0.5-2.0" } }, | |
| { method: "POST", path: "/api/tasks/upload", desc: "Create TTS task via file", params: { file: "UploadFile", voice: "1-14", speed: "0.5-2.0" } }, | |
| { method: "GET", path: "/api/tasks", desc: "List all tasks" }, | |
| { method: "GET", path: "/api/tasks/{task_id}", desc: "Get task details" }, | |
| { method: "GET", path: "/api/download/{task_id}", desc: "Download audio file" }, | |
| { method: "GET", path: "/health", desc: "Service health" } | |
| ], | |
| example_usage: `curl -X POST -F 'text=Hello world' -F 'voice=4' ${window.location.origin}/api/tasks/upload` | |
| }; | |
| UI.resultText.innerText = JSON.stringify(doc, null, 2); | |
| UI.modalTitle.innerText = "API Documentation"; | |
| UI.audioContainer.classList.add('hidden'); | |
| UI.downloadBtn.classList.add('hidden'); | |
| UI.copyBtn.classList.remove('hidden'); | |
| UI.resultModal.classList.add('active'); | |
| }; | |
| // --- Lifecycle --- | |
| loadTasks(); | |
| setInterval(loadTasks, 5000); | |
| setInterval(checkHealth, 10000); | |
| </script> | |
| </body> | |
| </html> |