Hugging Face's logo

Spaces:
Mike0021
/
Drama-3
Paused

App Files Community
Drama-3
File size: 10,900 Bytes
e9cf2ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ecad1cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9cf2ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8542ef
 
 
 
 
 
 
e9cf2ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/* Palette, spacing and typography carried over from the original studio. */
:root, .gradio-container {
  --bg: #f6f5f3; --card: #fff; --soft: #efede9; --ink: #141414;
  --muted: #6b6b66; --border: #e2e0dc; --card-border: #e8e6e2;
  --moment-bg: #fbe9c4; --moment-ink: #7d4b00;
  --scope-bg: #d9ebfa; --scope-ink: #0b5687;
  --mood-bg: #ebe1fa; --mood-ink: #56289e;
  --body-background-fill: var(--bg); --body-text-color: var(--ink);
  --block-background-fill: var(--card); --input-background-fill: var(--card);
  --border-color-primary: var(--border); --block-border-color: var(--border);
  --button-primary-background-fill: var(--ink); --button-primary-text-color: var(--bg);
  --button-primary-background-fill-hover: #30302d;
  --button-secondary-background-fill: var(--card); --button-secondary-border-color: var(--border);
  --button-secondary-text-color: var(--ink); --button-secondary-background-fill-hover: var(--soft);
  --input-border-color: var(--border); --input-radius: 12px;
  --block-label-text-color: var(--muted); --block-title-text-color: var(--ink);
  --body-text-color-subdued: var(--muted);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif !important;
}
.dark, .dark .gradio-container {
  --bg: #161615; --card: #201f1d; --soft: #2a2826; --ink: #f3f2ef;
  --muted: #a8a7a1; --border: #35332f; --card-border: #35332f;
  --moment-bg: #463312; --moment-ink: #ffd68a;
  --scope-bg: #133852; --scope-ink: #a3d4fa;
  --mood-bg: #37245b; --mood-ink: #d9c4ff;
  --button-primary-background-fill-hover: #deddd8;
}
body { background: var(--bg); }
.gradio-container { max-width: 980px !important; margin: auto; padding: 26px 32px 48px !important; }
#studio { gap: 16px; }
.hero { margin: 20px 0 8px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 10px; color: var(--ink); }
.hero p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.hero p + p { margin-top: 10px; }
.hero strong { color: var(--ink); font-weight: 600; }
.hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; padding: 5px 14px; text-decoration: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #b7791f; }
.dot.ready { background: #1f9d55; box-shadow: 0 0 0 3px #1f9d5526; }
.account { position: relative; }
.account summary { cursor: pointer; }
.account a { position: absolute; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; color: var(--ink); }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 2px #1414140a; padding: 14px !important; gap: 10px !important; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.card-head h2 { font-size: 14px; font-weight: 600; color: var(--ink); }
#app-tabs { border: 0; }
#app-tabs > .tab-nav { margin-bottom: 16px; border: 0; }
#app-tabs > .tabitem { padding: 0; border: 0; background: transparent; }
#app-tabs > .tab-nav button { border-radius: 999px; padding: 7px 18px; color: var(--muted); }
#app-tabs > .tab-nav button.selected { background: var(--card); color: var(--ink); border-color: var(--border); }
#script textarea { font-size: 16px; line-height: 1.6; min-height: 120px; border-radius: 12px; }
.hint, .hint p { color: var(--muted); font-size: 12.5px; }
.examples { flex-wrap: wrap !important; gap: 6px !important; }
.examples button { flex: 0 1 auto; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; height: 29px; min-height: 29px; font-weight: 500; }
/* Direction tags: always visible, inline and wrapping. A group (label + chips) moves
   to the next line as a whole, then wraps inside when it is wider than the card. */
.gradio-container #direction-tags { flex-wrap: wrap !important; align-items: flex-start; justify-content: flex-start; gap: 6px 14px !important; }
.gradio-container #direction-tags > .tag-group { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; flex-wrap: wrap !important; align-items: center; justify-content: flex-start; gap: 4px !important; }
.gradio-container #direction-tags .tag-group > * { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
.gradio-container #direction-tags .html-container { padding: 0 !important; }
#direction-tags .plabel { display: block; padding: 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; line-height: 24px; text-transform: uppercase; color: var(--muted); }
.gradio-container #direction-tags button.chip { height: 24px; min-height: 24px; padding: 0 9px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
#direction-tags button.chip.point { background: var(--moment-bg); color: var(--moment-ink); }
#direction-tags button.chip.scope { background: var(--scope-bg); color: var(--scope-ink); }
#direction-tags button.chip.mood { background: var(--mood-bg); color: var(--mood-ink); }
#direction-tags button.chip:hover { filter: brightness(.96); }
.gradio-container #tag-hint { margin-top: -4px; }
.gradio-container #tag-hint p { margin: 0; font-size: 12px; }
.gradio-container #tag-hint code { padding: 0 3px; border: 0; font-size: 11px; }
#voice-mode .wrap { display: flex; flex-wrap: nowrap; background: var(--soft); border-radius: 999px; padding: 3px; gap: 3px; }
#voice-mode label { flex: 1; justify-content: center; border: 0; border-radius: 999px; background: transparent; padding: 7px 6px; }
#voice-mode input, #voice-presets input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#voice-mode label.selected, #voice-mode label:has(input:checked) { background: var(--card); box-shadow: 0 1px 2px #14141414; }
#voice-presets label { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
#voice-presets label.selected, #voice-presets label:has(input:checked) { background: var(--ink); color: var(--bg); }
#perform { border-radius: 999px; padding: 13px 20px; font-size: 16px; min-height: 50px; }
.direct h3 { font-size: 14px; margin-top: 8px; }
.boot { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.boot p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; text-decoration: none; color: var(--ink); }
.links a:hover { border-color: var(--ink); }
.credits, .fine { color: var(--muted); font-size: 12px; line-height: 1.6; }
.credits p { margin-top: 8px; }
code { background: var(--soft); padding: 0 4px; border-radius: 5px; }
@media (max-width: 640px) {
  .gradio-container { padding: 16px 12px 32px !important; }
  .hero { margin-top: 8px; }
  .card { padding: 12px !important; }
  #voice-mode label { font-size: 12px; }
}
.gradio-container #topbar { align-items: center; gap: 8px; }
.gradio-container #theme-toggle { border: 0; border-radius: 50%; width: 32px; height: 32px; min-height: 32px; padding: 0; background: var(--card); color: var(--ink); }
.gradio-container .examples button { background: var(--card); border: 1px solid var(--border); color: var(--ink); }
/* Examples: heading without the HTML block's vertical padding, closer to shorter
   buttons. No .gradio-container prefix: Gradio scopes these rules itself, and the
   scoped copy must outrank the .examples rules above. */
.examples-title .html-container { padding-top: 0 !important; padding-bottom: 0 !important; }
.examples-title { margin-bottom: -2px; }
.script-examples { gap: 5px !important; }
.script-examples button { height: 26px; min-height: 26px; padding: 0 10px; font-size: 12px; }
.gradio-container .card-head h2 { margin: 0; }
.gradio-container .card .hide-container { padding: 0; }
.gradio-container #app-tabs > div[role="tablist"] { margin-bottom: 16px; border: 0; }
.gradio-container #app-tabs > div[role="tablist"] button { border-radius: 999px; padding: 7px 18px; }
.gradio-container #app-tabs > div[role="tablist"] button[aria-selected="true"] { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.gradio-container .drama-script-mirror { position: absolute; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; color: var(--ink); background: transparent; box-sizing: border-box; }
.drama-script-mirror .h-point { background: var(--moment-bg); color: var(--moment-ink); border-radius: 4px; }
.drama-script-mirror .h-tag { background: var(--scope-bg); color: var(--scope-ink); border-radius: 4px; }
.drama-script-mirror .h-style { background: var(--mood-bg); color: var(--mood-ink); border-radius: 4px; }
.drama-script-mirror .h-note { background: #e3f1e3; color: #2a662d; border-radius: 4px; }
.dark .drama-script-mirror .h-note { background: #1e3a20; color: #b5e3b7; }
#script textarea.drama-highlighted { color: transparent !important; caret-color: var(--ink); }
#script textarea.drama-highlighted::selection { background: #7878ff47; color: transparent; }
.gradio-container .drama-script-mirror { z-index: 2; }
.gradio-container #app-tabs .tab-nav { margin-bottom: 16px; border-bottom: 0; }
.gradio-container #app-tabs .tab-nav button[role="tab"] { border-radius: 999px; }
.gradio-container #app-tabs .tab-nav button[aria-selected="true"] { background: var(--card); border: 1px solid var(--border); }
/* Gradio scopes media rules to .contain, so responsive padding belongs to the
   inner studio instead of .gradio-container. Remove the native outer padding. */
.gradio-container { padding: 0 !important; }
.gradio-container .main { padding: 0 !important; width: 100%; }
#studio { padding: 26px 32px 48px; }
@media (max-width: 640px) { #studio { padding: 16px 12px 32px; } }
.gradio-container #voice-presets label { border: 1px solid var(--border); }
/* The stage is a custom Gradio HTML component, with the original player styling. */
#studio:not([data-stage-busy="true"]):not([data-stage-playing="true"]) #stop { display: none; }
#stop { border-radius: 999px; min-height: 50px; }
#the-stage:not(.has-take) .stage-direct { display: none; }

/* Keep the resources in the introduction, before the studio. */
.resource-links { gap: 8px; margin: 0 0 6px; }
.resource-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; background: var(--card); font-size: 14px; font-weight: 600; }
.credits { font-size: 13px; }
.credits h2 { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 650; }
@media (max-width: 640px) {
  .resource-links { gap: 7px; }
  .resource-links a { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}