<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗣️</text></svg>"> <title>ChatTTS Forge Playground</title> <script type="importmap"> { "imports": { "preact": "https://cdn.jsdelivr.net/npm/preact@10.22.0/+esm", "htm": "https://cdn.jsdelivr.net/npm/htm@3.1.1/+esm", "preact/hooks": "https://cdn.jsdelivr.net/npm/preact@10.22.0/hooks/dist/hooks.module.js", "axios": "https://cdn.jsdelivr.net/npm/axios@1.7.2/+esm", "@quik-fe/stand": "https://cdn.jsdelivr.net/npm/@quik-fe/stand@1.1.2/+esm", "goober": "https://cdn.jsdelivr.net/npm/goober@2.1.14/+esm" } } </script> <style> * { box-sizing: border-box; padding: 0; margin: 0; } html { background-color: #1f1f1f; color: white; } body { font-family: sans-serif; } #app { display: flex; flex-direction: column; height: 100vh; width: 100vw; position: absolute; } .scrollable { overflow: auto; } .pg-scrollbar::-webkit-scrollbar { width: 8px; } .pg-scrollbar::-webkit-scrollbar-track { background-color: transparent; } .pg-scrollbar::-webkit-scrollbar-thumb { background-color: rgb(177, 177, 177); border-radius: 4px; } .pg-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgb(220, 220, 220); } .pg-scrollbar::-webkit-scrollbar-thumb:active { background-color: rgb(160, 160, 160); } </style> </head> <body> <div id="app"></div> <script type="module" src="./index.mjs"> </script> </body> </html>