Update app.py

app.py

@@ -9,7 +9,7 @@ from groq import Groq
 os.environ['GROQ_API_KEY'] = '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'
 groq_client = Groq(api_key=os.environ.get('GROQ_API_KEY'))
 
-# Load Whisper model (use `whisper.load_model` from the correct library)
+# Load Whisper model
 whisper_model = whisper.load_model("base")
 
 def process_audio(audio_file):
@@ -39,89 +39,47 @@ def process_audio(audio_file):
     except Exception as e:
         return str(e), None
 
-# Define custom CSS for the Gradio interface
+# Create Gradio interface with custom CSS
 css = """
-/* General body styling */
-body {
-    background: #f0f2f5; /* Light background for the app */
-    font-family: 'Arial', sans-serif;
-    color: #333;
-}
-
-/* Container styling */
-.gradio-container {
-    background: linear-gradient(135deg, #6e45e2, #88d3ce);
-    border-radius: 15px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin: auto; /* Centering container */
-    width: 80%; /* Adjusted width for responsiveness */
-    max-width: 700px; /* Max width for larger screens */
-}
-
-/* Title styling */
-.gradio-title {
-    color: #0056b3; /* Deep blue color for the title */
-    text-align: center;
-    margin-bottom: 20px;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-/* Input and output styling */
-.gradio-input, .gradio-output {
-    border-radius: 10px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-}
-
-/* Textbox styling */
-.gradio-textbox {
-    border: 2px solid #6e45e2;
-    background: #fff;
-    color: #333;
-    padding: 10px;
-    font-size: 16px;
-}
-
-/* Number component styling */
-.gradio-number {
-    border: 2px solid #6e45e2;
-    background: #fff;
-    color: #333;
-    border-radius: 8px;
-    padding: 10px;
-}
-
-/* Button styling */
-.gradio-button {
-    background: #6e45e2; /* Deep blue color for button */
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    padding: 12px 24px;
-    font-size: 18px;
-    cursor: pointer;
-    transition: background 0.3s, transform 0.3s;
-}
-
-.gradio-button:hover {
-    background: #5a3d9c; /* Darker blue on hover */
-    transform: scale(1.05); /* Slightly enlarge on hover */
-}
+    .gradio-container {
+        background: linear-gradient(135deg, #6e45e2, #88d3ce);
+        border-radius: 15px;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+    }
+    .gradio-input, .gradio-output {
+        border-radius: 10px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+    }
+    .gradio-textbox {
+        border: 2px solid #6e45e2;
+        background: #fff;
+        color: #333;
+    }
+    .gradio-audio {
+        border: 2px solid #88d3ce;
+        background: #fff;
+    }
+    .gradio-button {
+        background: #6e45e2;
+        color: #fff;
+        border: none;
+        border-radius: 8px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+    .gradio-button:hover {
+        background: #5a3d9c;
+    }
 """
 
-# Create Gradio interface with custom CSS
 iface = gr.Interface(
     fn=process_audio,
-    inputs=gr.Audio(type="filepath", label="Upload Audio File"),
-    outputs=[gr.Textbox(label="Response Text"), gr.Audio(label="Response Audio")],
+    inputs=gr.Audio(type="filepath"),
+    outputs=[gr.Textbox(label="Response"), gr.Audio(label="Response Audio")],
     live=True,
-    css=css,
-    title="Audio Transcription and Response Generator",
-    description="Upload an audio file to get a transcription and a response generated by the Llama 8b model.",
-    article="<h3>How to Use:</h3><ul><li>Upload an audio file.</li><li>Receive a transcribed text and response.</li></ul>"
+    css=css
 )
 
-# Launch the Gradio app
-if __name__ == "__main__":
-    iface.launch()
+iface.launch()