Update app.py

app.py

@@ -0,0 +1,139 @@
+import streamlit as st
+import openai
+from io import BytesIO
+
+# Set your API Key
+openai.api_key = "your-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)}")