Update app.py

app.py

@@ -32,14 +32,14 @@ HTML_TEMPLATE = """
     
     #app-header {
         text-align: center;
-        background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
+        background: rgba(255, 255, 255, 0.3); /* Semi-transparent white */
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         position: relative; /* To position the artifacts */
     }
     #app-header h1 {
-        color: #f308eb;
+        color: #FF0000;
         font-size: 2em;
         margin-bottom: 10px;
     }
@@ -76,33 +76,15 @@ HTML_TEMPLATE = """
 <div id="app-header">
     <!-- Artifacts -->
     <div class="artifact large"></div>
-    <div class="artifact medium"></div>
-    <div class="artifact small"></div>
+    <div class="artifact large"></div>
+    <div class="artifact large"></div>
+    <div class="artifact large"></div>
     <!-- Content -->
-    <h1>Shakespeare Dialogue Generator</h1>
-    <p>Generate new dialogue for Shakespearean character by selecting character from dropdown.</p>
-        <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
-        <div class="concept">
-            <img src="https://github.com/santule/ERA/assets/20509836/b6b4031a-265d-43f6-bd59-813097c0022b" alt="Romeo">
-            <div class="concept-description">Romeo</div>
-        </div>
-        <div class="concept">
-            <img src="https://github.com/santule/ERA/assets/20509836/4333692c-54f7-42e4-b53a-14044c8151a3" alt="Juliet">
-            <div class="concept-description">Juliet</div>
-        </div>
-        <div class="concept">
-            <img src="https://github.com/santule/ERA/assets/20509836/7e03233a-bf1d-48aa-b156-46f525aa76c6" alt="Shakespeare">
-            <div class="concept-description">Shakespeare</div>
-        </div>
-        <div class="concept">
-            <img src="https://github.com/santule/ERA/assets/20509836/0dd19c74-72e5-4ea5-8f66-06b7655b81aa" alt="King Richard III">
-            <div class="concept-description">King Richard III</div>
-        </div>
-    </div>
-</div>
+    <h1>SHAKESPEARE  DIALOGUE  GENERATOR</h1>
+    <p>Generate dialogue for Shakespearean character by selecting character from dropdown.</p>
 """
 
-with gr.Blocks() as interface:
+with gr.Blocks(theme=gr.themes.Glass(),css=".gradio-container {background: url('file=https://github.com/santule/ERA/assets/20509836/b6b4031a-265d-43f6-bd59-813097c0022b')}") as interface:
     gr.HTML(value=HTML_TEMPLATE, show_label=False)
     with gr.Row():
         character_dropdown = gr.Dropdown(