Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store as speechStore } from "/components/chat/speech/speech-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="progress-bar-box"> | |
| <h4 id="progress-bar-h"> | |
| <span id="progress-bar-i">|></span><span id="progress-bar"></span> | |
| </h4> | |
| <h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeaking"> | |
| <span id="stop-speech" @click="$store.speech.stop()" style="cursor: pointer">Stop Speech</span> | |
| </h4> | |
| </div> | |
| <style> | |
| #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md); padding-bottom: 0; display: flex; justify-content: space-between; z-index: 1001; } | |
| #progress-bar-box h4 { margin: 0 1.2em 0 0; } | |
| #progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; } | |
| #progress-bar-i { font-weight: bold; padding-right: 0.5em; color: var(--color-secondary); } | |
| .shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; } | |
| @keyframes shine { to { background-position: -200% center; } } | |
| .light-mode #progress-bar-i { color: var(--color-border-dark); opacity: 0.5; } | |
| </style> | |
| </body> | |
| </html> | |