css

app.py

@@ -372,7 +372,156 @@ def erase_and_record():
 # Gradio Interface
 def gradio_app():
     # reset_state()
-    with gr.Blocks(css=custom_html) as demo:
+    with gr.Blocks(css=""" 
+        /* Body Styles */
+        .gr-container {
+            font-family: Arial, sans-serif !important;
+            background-color: #F5F5DC !important;
+            color: #333 !important;
+        }
+
+        /* Row Styles */
+        .gr-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 15px 0;
+            padding: 10px;
+            width: 100%;
+        }
+
+        /* Audio Component Styles */
+        .gr-audio {
+            background-color: #F5F5DC;
+            padding: 10px 10px;
+            border-radius: 10px;
+            font-size:20px;
+            color:blue;
+        }
+
+        .gr-audio button[title="Clear"] {
+        display: none !important;
+        }
+
+        /* Prompt style */
+        .gr-prompt {
+            background-color: #F5F5DC;
+            color: #00008B; /* Deep Blue */
+            padding: 10px 10px;
+            border-radius: 10px;
+      
+        }
+        .gr-submit_button{
+            background-color: #28a745;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 20px;
+            cursor: pointer;
+            margin: 5px;
+        }
+
+        /* Erase button */
+        .gr-erase_button {
+            background-color: #EE4B2B;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 20px;
+            cursor: pointer;
+            margin: 5px;
+        }
+
+        .gr-erase_button:hover {
+            background-color: #A52A2A;
+        }
+
+        /* NExt button */
+        .gr-next_button {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 20px;
+            cursor: pointer;
+            margin: 5px;
+        }
+
+        .gr-next_button:hover {
+            background-color: #218838;
+        }
+
+        .warning-alert  {
+            font-size: 16px;
+            color: black;
+            margin-top: 2px;
+            text-align: center;
+            font-weight: bold;
+            border: 1px solid #d9534f;
+            padding: 10px;
+            background-color: #FFED01; /* Light red background for alert */
+     
+        }
+        .fail-alert  {
+            font-size: 16px;
+            color: black;
+            margin-top: 2px;
+            text-align: center;
+            font-weight: bold;
+            border: 1px solid #d9534f;
+            padding: 10px;
+            background-color: #FF0000; /* Light red background for alert */
+        }
+        .sucess-alert  {
+            font-size: 16px;
+            color: black;
+            margin-top: 2px;
+            text-align: center;
+            font-weight: bold;
+            border: 1px solid #d9534f;
+            padding: 10px;
+            background-color:#90EE90; /* Light red background for alert */
+        }
+        .gr-story_legacy_heading {
+                background-color: White;
+                font-size: 30px;
+                font-weight: bold;
+                color:#00008B;
+                text-align: left;
+                margin-top:-10px;
+                margin-bottom: 10px;
+            }
+        .project-code {
+                background-color: White;
+                font-size: 30px;
+                font-weight: bold;
+                color:#00008B; 
+                text-align: right;
+                margin-top:-10px;
+                margin-bottom: 10px;
+        }
+        .prompt-class {
+            font-weight: bold;
+            color:#00008B;
+            font-size: 20px;
+
+        }
+    .gr-markdown {
+            position: fixed;
+            width: 95%;
+            z-index: 1000;
+            border-radius: 5px;
+            margin-top:-10px;
+            margin-bottom: 20px;
+        } 
+    .prompt-text {
+        font-size: 15px;
+    }
+    """
+                   ) as demo:
         with gr.Row():
             gr.Markdown("""
             <div class ="gr-story_legacy_heading"">StoryLegacy</div>