Update app.py

app.py

@@ -168,7 +168,7 @@ custom_html="""
                 margin-top:-10px;
                 margin-bottom: 10px;
             }
-        .project-code {
+        .gr-project_code {
                 background-color: White;
                 font-size: 30px;
                 font-weight: bold;
@@ -372,162 +372,13 @@ def erase_and_record():
 # Gradio Interface
 def gradio_app():
     # reset_state()
-    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.Blocks(css=custom_html) as demo:
         with gr.Row():
             gr.Markdown("""
-            <div class ="gr-story_legacy_heading"">StoryLegacy</div>
+            <div class ="gr-story_legacy_heading">StoryLegacy</div>
             """)
             gr.Markdown(f"""
-            <div style="background-color: White; font-size: 30px !important; font-weight: bold !important; color: #00008B !important; text-align: right; margin-top: -10px; margin-bottom: 10px;">Project: {PROJECT_CODE}</div>
+            <div class="gr-project_code">Project: {PROJECT_CODE}</div>
             """)
 
         with gr.Row():