Audio8-TTS-Realistic-0.6b

Running on Zero

Deploy Audio8 SGLang ZeroGPU Playground

f433c1b verified 6 days ago

9.16 kB

:root,
.dark,
.gradio-container {
  --a8-ink: #191a22;
  --a8-muted: #737780;
  --a8-line: #e9eaed;
  --a8-primary: #2a2b3d;
  --a8-mint: #6fdba1;
  --a8-blue: #3ab2da;
  --body-background-fill: #fff;
  --background-fill-primary: #fff;
  --background-fill-secondary: #f8f9fa;
  --block-background-fill: #fff;
  --block-border-color: #e9eaed;
  --block-label-background-fill: #fff;
  --block-label-text-color: #555964;
  --block-title-text-color: #191a22;
  --body-text-color: #191a22;
  --body-text-color-subdued: #737780;
  --input-background-fill: #fff;
  --input-border-color: #e3e5e9;
  --input-placeholder-color: #8a8d96;
  --input-text-color: #191a22;
  --border-color-primary: #e9eaed;
  --border-color-accent: #3ab2da;
  --color-accent: #2a2b3d;
  --link-text-color: #2a2b3d;
  --button-primary-background-fill: #2a2b3d;
  --button-primary-background-fill-hover: #37394e;
  --button-primary-text-color: #fff;
  --button-secondary-background-fill: #fff;
  --button-secondary-background-fill-hover: #f6f7f9;
  --button-secondary-text-color: #555964;
}

html,
body,
gradio-app,
.gradio-container {
  background: #fff !important;
  color: var(--a8-ink) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.gradio-container {
  max-width: none !important;
  padding: 0 28px !important;
}

.gradio-container footer { display: none !important; }

#audio8-playground {
  width: min(1060px, 100%);
  margin: 0 auto;
  gap: 0 !important;
}

#audio8-playground .block,
#audio8-playground .form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#audio8-playground .form { gap: 18px !important; }
#audio8-playground .block label > span { color: #555964 !important; }
#audio8-playground .block label { font-weight: 500; }

#a8-hero-block { overflow: visible; }
.a8-hero { position: relative; padding: 104px 20px 71px; text-align: center; }
.a8-hero-inner { max-width: 800px; margin: 0 auto; }
.a8-model-link {
  position: absolute;
  top: 26px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #575b66 !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 9px 2px;
}
.a8-model-link:hover { color: var(--a8-ink) !important; }
.a8-model-link span { color: #9b9ea6; font-size: 16px; }
.a8-overline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #747884;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  margin: 0 0 22px;
}
.a8-accent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a8-mint); }
.a8-hero h1 {
  margin: 0;
  color: var(--a8-ink);
  font-size: clamp(30px, 4.65vw, 53px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1.2;
}
.a8-tagline { margin: 14px 0 20px; color: #474a55; font-size: 25px; font-weight: 400; letter-spacing: -.035em; }
.a8-spec { margin: 0; color: #858892; font-size: 12px; font-weight: 400; letter-spacing: .025em; }
.a8-spec span { padding: 0 8px; color: var(--a8-blue); }

#a8-preview-notice {
  align-self: center;
  width: auto;
  margin: -34px auto 34px;
  padding: 7px 13px !important;
  border-radius: 7px;
  background: #f6f8f9 !important;
  text-align: center;
}
#a8-preview-notice p { margin: 0; color: #6a707b; font-size: 12px; }

#a8-workspace { align-items: stretch; gap: 0 !important; border-top: 1px solid var(--a8-line); }
#a8-text-panel,
#a8-voice-panel { min-width: 0; gap: 17px !important; padding-top: 29px; padding-bottom: 25px; }
#a8-text-panel { padding-right: 37px; }
#a8-voice-panel { padding-left: 37px; border-left: 1px solid var(--a8-line); }
.a8-panel-heading { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.a8-step { color: #a2a5ad; font-size: 10px; font-weight: 500; letter-spacing: .05em; }
.a8-panel-heading h2 { margin: 0; color: var(--a8-ink); font-size: 17px; font-weight: 550; letter-spacing: -.025em; }

#audio8-playground textarea,
#audio8-playground input[type="text"] {
  color: var(--a8-ink) !important;
  background: #fff !important;
  border: 1px solid #e3e5e9 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#audio8-playground textarea:focus,
#audio8-playground input[type="text"]:focus {
  outline: none !important;
  border-color: #75bbcd !important;
  box-shadow: 0 0 0 3px rgb(58 178 218 / 8%) !important;
}
#a8-target-text textarea { min-height: 247px; padding: 17px 18px; font-size: 16px; line-height: 1.75; }
#a8-reference-text textarea { padding: 12px 14px; font-size: 13px; line-height: 1.65; }
#a8-voice-picker .wrap {
  border: 1px solid #e3e5e9 !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#a8-voice-picker input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
#a8-voice-picker .options { background: #fff !important; border: 1px solid var(--a8-line); }
#a8-voice-picker .item { color: var(--a8-ink) !important; }
#a8-voice-picker .item:hover { background: #f4f7f8 !important; }

#a8-reference-audio,
#a8-output-audio {
  background: #fafbfc !important;
  border: 1px solid var(--a8-line) !important;
  border-radius: 11px !important;
  overflow: hidden;
}
#a8-reference-audio > label,
#a8-output-audio > label { padding: 11px 12px 0; }
#a8-reference-audio .source-selection { padding: 4px 8px; background: transparent; }
#a8-reference-audio .source-selection button { font-size: 11px; }
#a8-reference-audio .wrap,
#a8-output-audio .wrap { background: transparent !important; }
#a8-reference-audio .empty { min-height: 105px; }
#a8-output-audio .empty { min-height: 115px; }

.a8-small-label p { margin: 0; color: #878b94; font-size: 11px; }
.a8-hint p { margin: 0; color: #838791; font-size: 11px; line-height: 1.65; }
.a8-hint strong { color: #6c717c; font-weight: 500; }
.a8-permission { margin-top: -6px; }
#a8-text-examples { justify-content: flex-start; flex-wrap: wrap; gap: 7px !important; margin-top: -9px; }
#a8-text-examples button {
  flex: 0 0 auto;
  min-width: 0 !important;
  padding: 7px 12px;
  min-height: 32px;
  border: 1px solid #e9eaed !important;
  border-radius: 7px;
  color: #656a76 !important;
  background: #fff !important;
  font-size: 11px;
  font-weight: 400;
  box-shadow: none !important;
}
#a8-text-examples button:hover { color: #303444 !important; border-color: #b7c8ce !important; background: #f8fafb !important; }

#a8-generate-row { margin-top: 9px; margin-bottom: 34px; gap: 10px !important; }
#a8-generate {
  flex: 1 1 auto;
  width: auto;
  min-height: 50px;
  border: 1px solid var(--a8-primary) !important;
  border-radius: 10px;
  color: #fff !important;
  background: var(--a8-primary) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 2px 4px rgb(22 25 40 / 6%) !important;
  transition: background 150ms ease;
}
#a8-generate:hover:not(:disabled) { background: #393b51 !important; }
#a8-generate:disabled { color: #8b8d96 !important; background: #e9eaf0 !important; border-color: #e9eaf0 !important; cursor: not-allowed; box-shadow: none !important; }
#a8-stop {
  flex: 0 0 88px;
  min-height: 50px;
  border: 1px solid #e3e5e9 !important;
  border-radius: 10px;
  color: #656a76 !important;
  background: #fff !important;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none !important;
}
#a8-stop:hover:not(:disabled) { background: #f7f8fa !important; border-color: #bfc3cc !important; }
#a8-stop:disabled { color: #b2b5bd !important; cursor: not-allowed; }

#a8-result-panel { gap: 16px !important; padding: 28px 0 0; border-top: 1px solid var(--a8-line); }
#a8-generation-status { min-height: 20px; }
#a8-generation-status p { margin: 0; color: #7b808a; font-size: 12px; line-height: 1.6; }
.a8-endnote { padding: 43px 0 35px; text-align: center; color: #a0a3ab; font-size: 10px; letter-spacing: .035em; }

#audio8-playground button:focus-visible,
#audio8-playground a:focus-visible { outline: 2px solid var(--a8-blue); outline-offset: 3px; }

@media (max-width: 760px) {
  .gradio-container { padding: 0 20px !important; }
  .a8-hero { padding: 98px 0 50px; }
  .a8-hero h1 { font-size: clamp(27px, 6.8vw, 42px); letter-spacing: -.05em; }
  .a8-tagline { margin: 12px 0 18px; font-size: 23px; }
  .a8-model-link { top: 19px; }
  #a8-workspace { flex-direction: column; }
  #a8-text-panel,
  #a8-voice-panel { min-width: 0 !important; width: 100%; padding: 25px 0; }
  #a8-voice-panel { border-left: 0; border-top: 1px solid var(--a8-line); }
  #a8-target-text textarea { min-height: 205px; font-size: 15px; }
  #a8-generate-row { margin-top: 0; margin-bottom: 28px; }
  #a8-preview-notice { margin: -20px auto 25px; }
  #a8-preview-notice p { font-size: 11px; }
  .a8-endnote { padding: 34px 0 28px; }
}

@media (prefers-reduced-motion: reduce) {
  #audio8-playground * { scroll-behavior: auto !important; transition: none !important; }
}

/* Gradio adds its own horizontal padding; keep one intentional outer gutter. */
.gradio-container main { padding-left: 0 !important; padding-right: 0 !important; }

	:root,
	.dark,
	.gradio-container {
	--a8-ink: #191a22;
	--a8-muted: #737780;
	--a8-line: #e9eaed;
	--a8-primary: #2a2b3d;
	--a8-mint: #6fdba1;
	--a8-blue: #3ab2da;
	--body-background-fill: #fff;
	--background-fill-primary: #fff;
	--background-fill-secondary: #f8f9fa;
	--block-background-fill: #fff;
	--block-border-color: #e9eaed;
	--block-label-background-fill: #fff;
	--block-label-text-color: #555964;
	--block-title-text-color: #191a22;
	--body-text-color: #191a22;
	--body-text-color-subdued: #737780;
	--input-background-fill: #fff;
	--input-border-color: #e3e5e9;
	--input-placeholder-color: #8a8d96;
	--input-text-color: #191a22;
	--border-color-primary: #e9eaed;
	--border-color-accent: #3ab2da;
	--color-accent: #2a2b3d;
	--link-text-color: #2a2b3d;
	--button-primary-background-fill: #2a2b3d;
	--button-primary-background-fill-hover: #37394e;
	--button-primary-text-color: #fff;
	--button-secondary-background-fill: #fff;
	--button-secondary-background-fill-hover: #f6f7f9;
	--button-secondary-text-color: #555964;
	}

	html,
	body,
	gradio-app,
	.gradio-container {
	background: #fff !important;
	color: var(--a8-ink) !important;
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	}

	.gradio-container {
	max-width: none !important;
	padding: 0 28px !important;
	}

	.gradio-container footer { display: none !important; }

	#audio8-playground {
	width: min(1060px, 100%);
	margin: 0 auto;
	gap: 0 !important;
	}

	#audio8-playground .block,
	#audio8-playground .form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	}

	#audio8-playground .form { gap: 18px !important; }
	#audio8-playground .block label > span { color: #555964 !important; }
	#audio8-playground .block label { font-weight: 500; }

	#a8-hero-block { overflow: visible; }
	.a8-hero { position: relative; padding: 104px 20px 71px; text-align: center; }
	.a8-hero-inner { max-width: 800px; margin: 0 auto; }
	.a8-model-link {
	position: absolute;
	top: 26px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #575b66 !important;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none !important;
	padding: 9px 2px;
	}
	.a8-model-link:hover { color: var(--a8-ink) !important; }
	.a8-model-link span { color: #9b9ea6; font-size: 16px; }
	.a8-overline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #747884;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	margin: 0 0 22px;
	}
	.a8-accent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a8-mint); }
	.a8-hero h1 {
	margin: 0;
	color: var(--a8-ink);
	font-size: clamp(30px, 4.65vw, 53px);
	font-weight: 600;
	letter-spacing: -.055em;
	line-height: 1.2;
	}
	.a8-tagline { margin: 14px 0 20px; color: #474a55; font-size: 25px; font-weight: 400; letter-spacing: -.035em; }
	.a8-spec { margin: 0; color: #858892; font-size: 12px; font-weight: 400; letter-spacing: .025em; }
	.a8-spec span { padding: 0 8px; color: var(--a8-blue); }

	#a8-preview-notice {
	align-self: center;
	width: auto;
	margin: -34px auto 34px;
	padding: 7px 13px !important;
	border-radius: 7px;
	background: #f6f8f9 !important;
	text-align: center;
	}
	#a8-preview-notice p { margin: 0; color: #6a707b; font-size: 12px; }

	#a8-workspace { align-items: stretch; gap: 0 !important; border-top: 1px solid var(--a8-line); }
	#a8-text-panel,
	#a8-voice-panel { min-width: 0; gap: 17px !important; padding-top: 29px; padding-bottom: 25px; }
	#a8-text-panel { padding-right: 37px; }
	#a8-voice-panel { padding-left: 37px; border-left: 1px solid var(--a8-line); }
	.a8-panel-heading { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
	.a8-step { color: #a2a5ad; font-size: 10px; font-weight: 500; letter-spacing: .05em; }
	.a8-panel-heading h2 { margin: 0; color: var(--a8-ink); font-size: 17px; font-weight: 550; letter-spacing: -.025em; }

	#audio8-playground textarea,
	#audio8-playground input[type="text"] {
	color: var(--a8-ink) !important;
	background: #fff !important;
	border: 1px solid #e3e5e9 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	}
	#audio8-playground textarea:focus,
	#audio8-playground input[type="text"]:focus {
	outline: none !important;
	border-color: #75bbcd !important;
	box-shadow: 0 0 0 3px rgb(58 178 218 / 8%) !important;
	}
	#a8-target-text textarea { min-height: 247px; padding: 17px 18px; font-size: 16px; line-height: 1.75; }
	#a8-reference-text textarea { padding: 12px 14px; font-size: 13px; line-height: 1.65; }
	#a8-voice-picker .wrap {
	border: 1px solid #e3e5e9 !important;
	border-radius: 9px !important;
	background: #fff !important;
	box-shadow: none !important;
	}
	#a8-voice-picker input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
	#a8-voice-picker .options { background: #fff !important; border: 1px solid var(--a8-line); }
	#a8-voice-picker .item { color: var(--a8-ink) !important; }
	#a8-voice-picker .item:hover { background: #f4f7f8 !important; }

	#a8-reference-audio,
	#a8-output-audio {
	background: #fafbfc !important;
	border: 1px solid var(--a8-line) !important;
	border-radius: 11px !important;
	overflow: hidden;
	}
	#a8-reference-audio > label,
	#a8-output-audio > label { padding: 11px 12px 0; }
	#a8-reference-audio .source-selection { padding: 4px 8px; background: transparent; }
	#a8-reference-audio .source-selection button { font-size: 11px; }
	#a8-reference-audio .wrap,
	#a8-output-audio .wrap { background: transparent !important; }
	#a8-reference-audio .empty { min-height: 105px; }
	#a8-output-audio .empty { min-height: 115px; }

	.a8-small-label p { margin: 0; color: #878b94; font-size: 11px; }
	.a8-hint p { margin: 0; color: #838791; font-size: 11px; line-height: 1.65; }
	.a8-hint strong { color: #6c717c; font-weight: 500; }
	.a8-permission { margin-top: -6px; }
	#a8-text-examples { justify-content: flex-start; flex-wrap: wrap; gap: 7px !important; margin-top: -9px; }
	#a8-text-examples button {
	flex: 0 0 auto;
	min-width: 0 !important;
	padding: 7px 12px;
	min-height: 32px;
	border: 1px solid #e9eaed !important;
	border-radius: 7px;
	color: #656a76 !important;
	background: #fff !important;
	font-size: 11px;
	font-weight: 400;
	box-shadow: none !important;
	}
	#a8-text-examples button:hover { color: #303444 !important; border-color: #b7c8ce !important; background: #f8fafb !important; }

	#a8-generate-row { margin-top: 9px; margin-bottom: 34px; gap: 10px !important; }
	#a8-generate {
	flex: 1 1 auto;
	width: auto;
	min-height: 50px;
	border: 1px solid var(--a8-primary) !important;
	border-radius: 10px;
	color: #fff !important;
	background: var(--a8-primary) !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	box-shadow: 0 2px 4px rgb(22 25 40 / 6%) !important;
	transition: background 150ms ease;
	}
	#a8-generate:hover:not(:disabled) { background: #393b51 !important; }
	#a8-generate:disabled { color: #8b8d96 !important; background: #e9eaf0 !important; border-color: #e9eaf0 !important; cursor: not-allowed; box-shadow: none !important; }
	#a8-stop {
	flex: 0 0 88px;
	min-height: 50px;
	border: 1px solid #e3e5e9 !important;
	border-radius: 10px;
	color: #656a76 !important;
	background: #fff !important;
	font-size: 13px;
	font-weight: 400;
	box-shadow: none !important;
	}
	#a8-stop:hover:not(:disabled) { background: #f7f8fa !important; border-color: #bfc3cc !important; }
	#a8-stop:disabled { color: #b2b5bd !important; cursor: not-allowed; }

	#a8-result-panel { gap: 16px !important; padding: 28px 0 0; border-top: 1px solid var(--a8-line); }
	#a8-generation-status { min-height: 20px; }
	#a8-generation-status p { margin: 0; color: #7b808a; font-size: 12px; line-height: 1.6; }
	.a8-endnote { padding: 43px 0 35px; text-align: center; color: #a0a3ab; font-size: 10px; letter-spacing: .035em; }

	#audio8-playground button:focus-visible,
	#audio8-playground a:focus-visible { outline: 2px solid var(--a8-blue); outline-offset: 3px; }

	@media (max-width: 760px) {
	.gradio-container { padding: 0 20px !important; }
	.a8-hero { padding: 98px 0 50px; }
	.a8-hero h1 { font-size: clamp(27px, 6.8vw, 42px); letter-spacing: -.05em; }
	.a8-tagline { margin: 12px 0 18px; font-size: 23px; }
	.a8-model-link { top: 19px; }
	#a8-workspace { flex-direction: column; }
	#a8-text-panel,
	#a8-voice-panel { min-width: 0 !important; width: 100%; padding: 25px 0; }
	#a8-voice-panel { border-left: 0; border-top: 1px solid var(--a8-line); }
	#a8-target-text textarea { min-height: 205px; font-size: 15px; }
	#a8-generate-row { margin-top: 0; margin-bottom: 28px; }
	#a8-preview-notice { margin: -20px auto 25px; }
	#a8-preview-notice p { font-size: 11px; }
	.a8-endnote { padding: 34px 0 28px; }
	}

	@media (prefers-reduced-motion: reduce) {
	#audio8-playground * { scroll-behavior: auto !important; transition: none !important; }
	}

	/* Gradio adds its own horizontal padding; keep one intentional outer gutter. */
	.gradio-container main { padding-left: 0 !important; padding-right: 0 !important; }