Spaces:
Runtime error
Runtime error
File size: 3,342 Bytes
5e883a6 0485bf4 5e883a6 9a97f06 5e883a6 | 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 | import streamlit as st
import openai
import os
from io import BytesIO
# Set your API Key
openai.api_key = os.getenv("GROQ_API_KEY")
# Inject Custom CSS and JavaScript for the UI
st.markdown(
"""
<style>
/* Black background with animated moving balls */
body {
background-color: black;
color: white;
overflow: hidden;
}
/* Animation for the background */
@keyframes move {
0% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(20px);
}
100% {
transform: translateY(0) translateX(0);
}
}
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
background-color: #FF4500;
border-radius: 50%;
animation: move 3s infinite;
}
.ball:nth-child(1) {
top: 10%;
left: 20%;
}
.ball:nth-child(2) {
top: 30%;
left: 70%;
animation-delay: 1s;
}
.ball:nth-child(3) {
top: 50%;
left: 40%;
animation-delay: 2s;
}
/* Styled input box */
textarea, select {
background-color: black;
color: white;
border: 2px solid #FF4500;
border-radius: 8px;
padding: 10px;
width: 100%;
}
textarea:focus, select:focus {
outline: none;
border-color: #FFD700;
box-shadow: 0 0 15px #FFD700;
transition: 0.3s ease-in-out;
}
/* Styled button */
.stButton button {
background: linear-gradient(45deg, #FF4500, #FFD700);
color: white;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 12px;
padding: 10px 20px;
transition: transform 0.3s, box-shadow 0.3s;
}
.stButton button:hover {
transform: scale(1.1);
box-shadow: 0 0 15px #FFD700;
}
</style>
""",
unsafe_allow_html=True,
)
# Add moving balls to the background
st.markdown(
"""
<div class="background">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
""",
unsafe_allow_html=True,
)
# Application title
st.title("✨ Text-to-Speech Generator ✨")
st.write("Enter text and convert it to speech with OpenAI's TTS model!")
# Input text and voice options
text_input = st.text_area("🎤 Enter Text Below", "Hello world! This is a streaming test.")
voice_option = st.selectbox("🎵 Choose a Voice", ["alloy", "default"]) # Expand as needed
if st.button("Generate Speech 🎶"):
with st.spinner("✨ Generating... Please wait ✨"):
try:
# API call to OpenAI
response = openai.Audio.create(
model="tts-1",
voice=voice_option,
input=text_input,
)
# Load audio into memory
audio_bytes = BytesIO(response["audio"])
# Audio playback in Streamlit
st.audio(audio_bytes, format="audio/mp3")
st.success("✅ Speech generated successfully!")
except Exception as e:
st.error(f"❌ An error occurred: {str(e)}")
|