Spaces:
Running on Zero
Running on Zero
Mobile-friendly: hide speed/variation in Advanced + responsive both apps
Browse filesHosted:
- Move Speaking speed and Delivery variation into the closed Advanced
disclosure alongside pitch/seed; default view is now text + voice
model + Generate. Advanced uses a single-column grouped card.
- Stronger breakpoints: 680/520/380 — compact padding, smaller card
paddings, wrapped transport, shorter waveform, hidden mini-seek,
condensed top bar, smaller type.
Browser (embedded WebGPU runtime):
- Inject mobile media-queries into the runtime iframe: hide the
foldkit inspector/devtools pane on phones, full-width content,
bigger tap targets, larger speech input, tighter spacing.
- Bump mobile iframe floor to 1020px and re-measure after theme
injection settles so the collapsed layout is sized correctly.
Co-Authored-By: Claude <noreply@anthropic.com>
- index.html +64 -22
index.html
CHANGED
|
@@ -119,8 +119,8 @@ details.adv summary::-webkit-details-marker{display:none}
|
|
| 119 |
details.adv summary .chev{margin-left:auto;color:var(--muted);transition:transform .22s ease;font-size:13px}
|
| 120 |
details.adv[open] summary .chev{transform:rotate(90deg)}
|
| 121 |
details.adv summary .dot-i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
|
| 122 |
-
details.adv .body{padding:0 16px 16px;display:grid;grid-template-columns:1fr
|
| 123 |
-
details.adv .body .group{border:
|
| 124 |
|
| 125 |
/* actions */
|
| 126 |
.actions{display:flex;gap:12px;margin-top:18px;align-items:stretch}
|
|
@@ -231,15 +231,38 @@ a.dl:hover{background:rgba(10,132,255,.12);color:var(--accent);border-color:var(
|
|
| 231 |
.hidden{display:none!important}
|
| 232 |
|
| 233 |
@media(max-width:680px){
|
| 234 |
-
.page{padding:
|
| 235 |
.meters{display:none}
|
| 236 |
.compare-grid{grid-template-columns:1fr}
|
| 237 |
details.adv .body{grid-template-columns:1fr}
|
| 238 |
-
.browser-frame{height:
|
| 239 |
.actions{flex-direction:column}
|
| 240 |
.btn.secondary{padding:0 20px;min-height:48px}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 241 |
}
|
| 242 |
-
@media(max-width:520px){ .brand .name small{display:none} .link:not(.always){display:none} }
|
| 243 |
</style>
|
| 244 |
</head>
|
| 245 |
<body>
|
|
@@ -287,29 +310,25 @@ a.dl:hover{background:rgba(10,132,255,.12);color:var(--accent);border-color:var(
|
|
| 287 |
<label><input type="radio" name="model" value="Inflect Micro v2" checked><span><strong>Micro v2</strong><small>Higher quality · 9.36M</small></span></label>
|
| 288 |
<label><input type="radio" name="model" value="Inflect Nano v2"><span><strong>Nano v2</strong><small>Lighter · 3.96M</small></span></label>
|
| 289 |
</div>
|
| 290 |
-
<div style="margin-top:18px" class="group">
|
| 291 |
-
<div class="row">
|
| 292 |
-
<div class="top"><label for="speed">Speaking speed</label><span class="val" id="speed-val">1.00×</span></div>
|
| 293 |
-
<input type="range" id="speed" min="0.7" max="1.35" step="0.01" value="1.0">
|
| 294 |
-
</div>
|
| 295 |
-
<div class="row">
|
| 296 |
-
<div class="top"><label for="variation">Delivery variation</label><span class="val" id="variation-val">Steady</span></div>
|
| 297 |
-
<input type="range" id="variation" min="0" max="1" step="0.001" value="0.667">
|
| 298 |
-
<small>Lower is steadier; higher gives each take more character.</small>
|
| 299 |
-
</div>
|
| 300 |
-
</div>
|
| 301 |
<details class="adv">
|
| 302 |
<summary><span class="dot-i"></span><span>Advanced</span><span class="chev">▸</span></summary>
|
| 303 |
<div class="body">
|
| 304 |
-
<div class="group"
|
|
|
|
|
|
|
|
|
|
|
|
|
| 305 |
<div class="row">
|
| 306 |
-
<div class="top"><label for="
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 307 |
<input type="range" id="pitch" min="-2" max="2" step="0.25" value="0">
|
| 308 |
</div>
|
| 309 |
-
</div>
|
| 310 |
-
<div class="group" style="border:0">
|
| 311 |
<div class="row">
|
| 312 |
-
<div class="top"><label for="seed">
|
| 313 |
<input type="number" id="seed" value="0" step="1" inputmode="numeric">
|
| 314 |
</div>
|
| 315 |
</div>
|
|
@@ -514,6 +533,29 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
|
|
| 514 |
::-webkit-scrollbar{width:10px;height:10px}
|
| 515 |
::-webkit-scrollbar-thumb{background:#2a2c2e;border-radius:6px;border:2px solid #07080a}
|
| 516 |
::-webkit-scrollbar-track{background:transparent}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 517 |
`;
|
| 518 |
const apply = () => {
|
| 519 |
let doc;
|
|
@@ -533,7 +575,7 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
|
|
| 533 |
})();
|
| 534 |
|
| 535 |
/* responsive browser frame height */
|
| 536 |
-
(function(){ const frame=$("webgpu-frame"); const apply=(h)=>{ const n=Number(h); if(Number.isFinite(n)&&n>0){ const floor=frame.clientWidth<1024?
|
| 537 |
|
| 538 |
/* client */
|
| 539 |
let client=null;
|
|
|
|
| 119 |
details.adv summary .chev{margin-left:auto;color:var(--muted);transition:transform .22s ease;font-size:13px}
|
| 120 |
details.adv[open] summary .chev{transform:rotate(90deg)}
|
| 121 |
details.adv summary .dot-i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
|
| 122 |
+
details.adv .body{padding:0 16px 16px;display:grid;grid-template-columns:1fr;gap:0}
|
| 123 |
+
details.adv .body .group{border:1px solid var(--line-soft)}
|
| 124 |
|
| 125 |
/* actions */
|
| 126 |
.actions{display:flex;gap:12px;margin-top:18px;align-items:stretch}
|
|
|
|
| 231 |
.hidden{display:none!important}
|
| 232 |
|
| 233 |
@media(max-width:680px){
|
| 234 |
+
.page{padding:18px 14px 56px}
|
| 235 |
.meters{display:none}
|
| 236 |
.compare-grid{grid-template-columns:1fr}
|
| 237 |
details.adv .body{grid-template-columns:1fr}
|
| 238 |
+
.browser-frame{height:1000px}
|
| 239 |
.actions{flex-direction:column}
|
| 240 |
.btn.secondary{padding:0 20px;min-height:48px}
|
| 241 |
+
.card-pad{padding:18px 16px}
|
| 242 |
+
.script{font-size:17px;line-height:1.8}
|
| 243 |
+
.tctrl{flex-wrap:wrap}
|
| 244 |
+
a.dl{margin-left:0}
|
| 245 |
+
.np-badge{width:40px;height:40px}
|
| 246 |
+
}
|
| 247 |
+
@media(max-width:520px){
|
| 248 |
+
.topbar{padding:11px 14px;gap:10px}
|
| 249 |
+
.brand .name small{display:none}
|
| 250 |
+
.link:not(.always){display:none}
|
| 251 |
+
.segctrl button{padding:6px 12px;font-size:12px}
|
| 252 |
+
.scrub-row{flex-wrap:nowrap;gap:9px}
|
| 253 |
+
.wave{height:56px}
|
| 254 |
+
.tc{min-width:34px;font-size:11px}
|
| 255 |
+
.tbtn{width:28px;height:28px}
|
| 256 |
+
.tbtn.play{width:46px;height:46px}
|
| 257 |
+
.mini-seek{display:none}
|
| 258 |
+
.mini-tc{font-size:11px}
|
| 259 |
+
.meterbars{height:24px}
|
| 260 |
+
}
|
| 261 |
+
@media(max-width:380px){
|
| 262 |
+
.brand .name{font-size:14px}
|
| 263 |
+
.logo{width:28px;height:28px}
|
| 264 |
+
.segctrl button{padding:6px 10px}
|
| 265 |
}
|
|
|
|
| 266 |
</style>
|
| 267 |
</head>
|
| 268 |
<body>
|
|
|
|
| 310 |
<label><input type="radio" name="model" value="Inflect Micro v2" checked><span><strong>Micro v2</strong><small>Higher quality · 9.36M</small></span></label>
|
| 311 |
<label><input type="radio" name="model" value="Inflect Nano v2"><span><strong>Nano v2</strong><small>Lighter · 3.96M</small></span></label>
|
| 312 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 313 |
<details class="adv">
|
| 314 |
<summary><span class="dot-i"></span><span>Advanced</span><span class="chev">▸</span></summary>
|
| 315 |
<div class="body">
|
| 316 |
+
<div class="group">
|
| 317 |
+
<div class="row">
|
| 318 |
+
<div class="top"><label for="speed">Speaking speed</label><span class="val" id="speed-val">1.00×</span></div>
|
| 319 |
+
<input type="range" id="speed" min="0.7" max="1.35" step="0.01" value="1.0">
|
| 320 |
+
</div>
|
| 321 |
<div class="row">
|
| 322 |
+
<div class="top"><label for="variation">Delivery variation</label><span class="val" id="variation-val">Steady</span></div>
|
| 323 |
+
<input type="range" id="variation" min="0" max="1" step="0.001" value="0.667">
|
| 324 |
+
<small>Lower is steadier; higher gives each take more character.</small>
|
| 325 |
+
</div>
|
| 326 |
+
<div class="row">
|
| 327 |
+
<div class="top"><label for="pitch">Pitch shift</label><span class="val" id="pitch-val">0 st</span></div>
|
| 328 |
<input type="range" id="pitch" min="-2" max="2" step="0.25" value="0">
|
| 329 |
</div>
|
|
|
|
|
|
|
| 330 |
<div class="row">
|
| 331 |
+
<div class="top"><label for="seed">Repeatable seed</label><span class="val" id="seed-val">0</span></div>
|
| 332 |
<input type="number" id="seed" value="0" step="1" inputmode="numeric">
|
| 333 |
</div>
|
| 334 |
</div>
|
|
|
|
| 533 |
::-webkit-scrollbar{width:10px;height:10px}
|
| 534 |
::-webkit-scrollbar-thumb{background:#2a2c2e;border-radius:6px;border:2px solid #07080a}
|
| 535 |
::-webkit-scrollbar-track{background:transparent}
|
| 536 |
+
|
| 537 |
+
/* ---- mobile: simplify the embedded runtime layout ---- */
|
| 538 |
+
@media(max-width:680px){
|
| 539 |
+
html,body,#root{background:#07080a !important}
|
| 540 |
+
.max-w-3xl{max-width:100% !important}
|
| 541 |
+
/* collapse the inspector/devtools pane on phones */
|
| 542 |
+
.dt-inspector-pane, .dt-panel, .dt-panel-wide{display:none !important}
|
| 543 |
+
/* let the main content breathe */
|
| 544 |
+
.p-5{padding:1rem !important}
|
| 545 |
+
.p-4{padding:0.85rem !important}
|
| 546 |
+
/* tap targets bigger */
|
| 547 |
+
.speech-input{min-height:140px !important;font-size:16px !important}
|
| 548 |
+
button{min-height:42px}
|
| 549 |
+
.text-sm{font-size:0.85rem !important}
|
| 550 |
+
.text-xs{font-size:0.72rem !important}
|
| 551 |
+
}
|
| 552 |
+
@media(max-width:520px){
|
| 553 |
+
.px-3{padding-left:0.6rem !important;padding-right:0.6rem !important}
|
| 554 |
+
.py-5{padding-top:0.9rem !important;padding-bottom:0.9rem !important}
|
| 555 |
+
.gap-6{gap:0.75rem !important}
|
| 556 |
+
.gap-4{gap:0.6rem !important}
|
| 557 |
+
.text-2xs{font-size:0.62rem !important}
|
| 558 |
+
}
|
| 559 |
`;
|
| 560 |
const apply = () => {
|
| 561 |
let doc;
|
|
|
|
| 575 |
})();
|
| 576 |
|
| 577 |
/* responsive browser frame height */
|
| 578 |
+
(function(){ const frame=$("webgpu-frame"); const apply=(h)=>{ const n=Number(h); if(Number.isFinite(n)&&n>0){ const floor=frame.clientWidth<1024?1020:560; frame.style.height=`${Math.max(floor,Math.min(2400,n+2))}px`; } }; const measure=()=>{ try{ const d=frame.contentDocument; apply(Math.max(d?.body?.scrollHeight||0,d?.documentElement?.scrollHeight||0)); }catch(_){} }; window.addEventListener("message",(ev)=>{ if(ev.source!==frame.contentWindow) return; if(ev.data?.type==="inflect-web-resize") apply(ev.data.height); }); frame.addEventListener("load",measure); [120,500,1000,1800,3000].forEach((d)=>setTimeout(measure,d)); })();
|
| 579 |
|
| 580 |
/* client */
|
| 581 |
let client=null;
|