Update app.py

app.py

@@ -10,12 +10,8 @@ from transformers import pipeline
 p = pipeline("automatic-speech-recognition")
 
 css = """
-    
 #component-2 {position: absolute; bottom: 0;    width: 100%;
 }
-.gradio-container {
-    background-color: #ffffff;
-}
 div.float.svelte-1frtwj3 {
     position: absolute;
     opacity: 0;
@@ -26,8 +22,11 @@ div.float.svelte-1frtwj3 {
     height: 100%;
     max-height: 100%;
     overflow-y: auto;
+    }
+.bot.svelte-6roggh.svelte-6roggh, .pending.svelte-6roggh.svelte-6roggh {
+    border-color: #759ce9;
+    background: #ffffff;
 }
-
 div.svelte-1frtwj3 {
     display: inline-flex;
     align-items: center;
@@ -45,80 +44,24 @@ div.svelte-1frtwj3 {
     width: 100%;
     line-height: var(--line-sm);
     }
-
-div.bot.svelte-6roggh.svelte-6roggh {
-    background: #D9A13D;
-}
-
-div.bot.svelte-17nzccn.svelte-17nzccn {
-    background: #D9A13D;
-}
-
-div.user.svelte-6roggh.svelte-6roggh {
-    background: #5F0000;
-}
-
-div.user.svelte-17nzccn.svelte-17nzccn {
-    background: #5F0000;
-}    
-
-div.textBoxBot {
+div.svelte-awbtu4 {
     display: flex;
     flex-direction: inherit;
     flex-wrap: wrap;
     gap: var(--form-gap-width);
     box-shadow: var(--block-shadow);
-    border: var(--block-border-width) solid #5f0000;
+    border: var(--block-border-width) solid var(--border-color-primary);
     border-radius: var(--radius-lg);
-    background: #ffffff;
+    background: var(--border-color-primary);
     overflow: hidden;
     position: fixed;
     bottom: 0;
     margin-left: -16px;
 }
-
-.textarea.svelte-1pie7s6.svelte-1pie7s6 {
-    display: flex;
-    flex-direction: inherit;
-    flex-wrap: wrap;
-    gap: var(--form-gap-width);
-    box-shadow: var(--block-shadow);
-    border: var(--block-border-width) solid #5f0000;
-    border-radius: var(--radius-lg);
-    background: #ffffff;
-    overflow: hidden;
-    position: fixed;
-    bottom: 0;
-    margin-left: -16px;
-}
-
-.svelte-1pie7s6.svelte-1pie7s6 {
-    display: flex;
-    flex-direction: inherit;
-    flex-wrap: wrap;
-    gap: var(--form-gap-width);
-    box-shadow: var(--block-shadow);
-    border: 5px solid #5f0000;
-    border-radius: var(--radius-lg);
-    border-color: #5F0000;
-    background: #ffffff;
-    color: #5F0000;    
-    font-size: 16px;    
-    overflow: hidden;
-    position: fixed;
-    bottom: 20px; /* Ajuste a distância vertical do rodapé */
-    margin-left: -5px;
-    max-height: 80vh; /* Ajuste a altura máxima da div */
-    max-width: 78%; /* Ajuste a largura máxima da div */
-}
-
-
-.img.svelte-ms5bsk {
-    width: 100%;
-    height: 100%;
-    background-color: #ffffff;    
-    border: 0px;    
-    border-width: 0px;
+img.svelte-ms5bsk {
+    width: var(--size-full);
+    height: 90px;
+    object-fit: contain;
 }
 .app.svelte-ac4rv4.svelte-ac4rv4 {
     max-width: none;
@@ -126,18 +69,18 @@ div.textBoxBot {
 }
 .app.svelte-ac4rv4.svelte-ac4rv4{max-width:none}
 .wrap.svelte-1o68geq.svelte-1o68geq {max-height: none}
-
 .block.svelte-mppz8v {
     position: relative;
     margin: 0;
     box-shadow: var(--block-shadow);
     border-width: var(--block-border-width);
-    border-color: #ffffff;
+    border-color: #dbeafe;
     border-radius: var(--block-radius);
-    background: #ffffff;
+    background: #dbeafe;
     width: 100%;
     line-height: var(--line-sm);
 }
+
 """
 
 md = """This is some code: