Skip to content

style(say-server): UI improvements #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ochafik wants to merge 1 commit into
base: main
Choose a base branch
from
+11 −24
Draft

style(say-server): UI improvements #308

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 11 additions & 24 deletions examples/say-server/server.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,10 @@ def say(
# 2. Provide the resourceUri metadata
# 3. Show the final text in the tool result
# 4. Provide widget UUID for multi-player coordination
autoplay_note = "playing automatically" if autoPlay else "ready to play on click"
return [types.TextContent(
type="text",
text=f"Displayed a TTS widget with voice '{voice}'. Click to play/pause, use toolbar to restart or fullscreen.",
text=f"The text is now displayed in a TTS widget and {autoplay_note} (voice: {voice}). The user can see and hear it - do not repeat the text.",
_meta={"widgetUUID": widget_uuid},
)]

Expand Down Expand Up @@ -692,7 +693,8 @@ def generate_sync():
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); }
.container { padding: 16px; min-height: 100px; position: relative; outline: none; }
.container { padding: 16px; position: relative; outline: none; }
.container.showingInfo { padding-bottom: 140px; } /* Space for info popup */
.textWrapper { position: relative; }
.textDisplay {
font-size: 16px; line-height: 1.6; padding: 8px; border-radius: 6px;
Expand Down Expand Up @@ -730,26 +732,10 @@ def generate_sync():
.fullscreenBtn .collapseIcon { display: none; }
.container.fullscreen .fullscreenBtn .expandIcon { display: none; }
.container.fullscreen .fullscreenBtn .collapseIcon { display: block; }
/* Info button - bottom right */
.infoBtn {
position: absolute;
bottom: 8px; right: 8px;
width: 24px; height: 24px;
border: none; border-radius: 50%;
background: rgba(128, 128, 128, 0.4);
color: white; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: bold; font-style: italic; font-family: serif;
opacity: 0.5;
transition: opacity 0.2s, background 0.2s;
z-index: 10;
}
.container:hover .infoBtn { opacity: 0.8; }
.infoBtn:hover { opacity: 1; background: rgba(128, 128, 128, 0.7); }
/* Info popup */
/* Info popup - positioned below toolbar */
.infoPopup {
position: absolute;
bottom: 40px; right: 8px;
top: 44px; right: 8px;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 12px 16px;
Expand Down Expand Up @@ -1344,7 +1330,7 @@ def generate_sync():
<span className="pending">{pendingText}</span>
</div>
</div>
{/* Toolbar - top right */}
{/* Toolbar - top right: Play/Pause, Reset, (i), Fullscreen */}
<div className="toolbar">
<button className="controlBtn" onClick={togglePlayPause} title="Play/Pause">
{status === "playing" ? (
Expand All @@ -1355,12 +1341,15 @@ def generate_sync():
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
)}
</button>
<button className="controlBtn" onClick={restartPlayback} title="Restart">
<button className="controlBtn" onClick={restartPlayback} title="Reset">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
<path d="M3 3v5h5"/>
</svg>
</button>
<button className="controlBtn infoBtn" onClick={() => setShowInfo(!showInfo)} title="Attribution info">
<span style={{fontStyle: "italic", fontFamily: "serif", fontWeight: "bold"}}>i</span>
</button>
<button className={`controlBtn fullscreenBtn` + (fullscreenAvailable ? ` available` : ``)} onClick={toggleFullscreen} title="Toggle fullscreen">
<svg className="expandIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
Expand All @@ -1370,8 +1359,6 @@ def generate_sync():
</svg>
</button>
</div>
{/* Info button - bottom right */}
<button className="infoBtn" onClick={() => setShowInfo(!showInfo)} title="Attribution info">i</button>
{showInfo && (
<div className="infoPopup">
<h4>Powered by Pocket TTS</h4>
Expand Down
Loading