Upload 2 files

API call with frontend

app.py

@@ -0,0 +1,73 @@
+import streamlit as st
+import requests
+import os
+
+# Streamlit code for UI
+st.set_page_config(page_title="Denoiser App", page_icon="🎵")
+
+# Function to add custom CSS styles
+def local_css(file_name):
+    with open(file_name) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+local_css("styles.css")  # Load custom CSS styles
+
+page_bg_img = f"""
+<style>
+[data-testid="stAppViewContainer"] > .main {{
+background-image: url("https://i.postimg.cc/4xgNnkfX/Untitled-design.png");
+background-size: cover;
+background-position: center center;
+background-repeat: no-repeat;
+background-attachment: local;
+}}
+[data-testid="stHeader"] {{
+background: rgba(0,0,0,0);
+}}
+</style>
+"""
+
+st.markdown(page_bg_img, unsafe_allow_html=True)
+# Function to display app title with custom styling
+def app_title(title):
+    st.markdown(f"<h1 style='text-align: center; color: #1DB954;'>{title}</h1>", unsafe_allow_html=True)
+
+# Function to display error message with custom styling
+def error_message(message):
+    st.markdown(f"<p style='text-align: center; color: #ff0000;'>{message}</p>", unsafe_allow_html=True)
+
+# File uploader for audio
+app_title("Let's Denoise!")
+audio_file = st.file_uploader("Upload audio file", type=["mp3", "wav"])
+
+if audio_file is not None:
+    st.audio(audio_file, format='audio/wav')
+
+    # Text input
+    text_input = st.text_input("Enter text for processing")
+
+    # Enable the "Generate" button only if both audio file and text are provided
+    if audio_file is not None and text_input:
+        if st.button("Denoise it!", key="generate_button"):
+            # Upload audio file and text to FastAPI server
+            files = {'file': audio_file.getvalue()}
+            data = {'text': text_input}
+            response = requests.post('http://localhost:8000/upload', files=files, data=data)
+
+            if response.status_code == 200:
+                st.success("Go Ahead!")
+                processed_audio_file_path = response.json()["processed_audio_file"]
+
+                # Load and display processed audio
+                st.audio(processed_audio_file_path, format='audio/wav')
+
+                # Add download button for processed audio
+                processed_audio_bytes = open(processed_audio_file_path, 'rb').read()
+                st.download_button(
+                    label="Download Your Denoised Audio",
+                    data=processed_audio_bytes,
+                    file_name=os.path.basename(processed_audio_file_path),
+                    mime='audio/wav'
+                )
+            else:
+                error_message("Failed to upload audio file and process.")

styles.css

@@ -0,0 +1,85 @@
+/* stylish_button.css */
+
+/* Body styling for dark theme */
+body {
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    background-color: #ffffff;
+    color: #ffffff;
+}
+
+/* Title styling */
+h1 {
+    color: #1DB954;
+    text-align: center;
+}
+
+/* File uploader styling */
+div.stFileUploader {
+    margin-top: 20px;
+    color: #ffffff;
+    text-align: center;
+}
+
+/* Text input styling */
+div.stTextInput {
+    margin-top: 20px;
+}
+
+
+/* Button styling */
+div.stButton>button {
+    background-color: #4CAF50 !important; /* Darker green */
+    color: #ffffff !important;
+    border-radius: 5px !important;
+    padding: 10px 20px !important;
+    font-size: 16px !important;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    text-align: center;
+}
+
+/* Download button text styling */
+div.stButton>button>span {
+    font-weight: bold !important;
+}
+
+/* Download button hover effect */
+div.stButton>button:hover {
+    background-color: #45a049 !important; /* Darker green on hover */
+}
+
+
+/* Error message styling */
+p.errorMessage {
+    color: #ff0000;
+    text-align: center;
+}
+
+/* Audio player styling */
+div.stAudio {
+    margin-top: 20px;
+}
+
+/* Download button styling */
+div.stDownloadButton>button {
+    background-color: #4CAF50 !important; /* Darker green */
+    color: #ffffff !important;
+    border-radius: 5px !important;
+    padding: 10px 20px !important;
+    font-size: 16px !important;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    text-align: center;
+}
+
+/* Download button text styling */
+div.stDownloadButton>button>span {
+    font-weight: bold !important;
+}
+
+/* Download button hover effect */
+div.stDownloadButton>button:hover {
+    background-color: #45a049 !important; /* Darker green on hover */
+}