Update app.py

app.py

@@ -13,113 +13,78 @@ p = pipeline("automatic-speech-recognition")
 os.environ["OPENAI_API_KEY"] = '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'
 
 css = """
-.gradio-container {
-    background-color: #ffffff;
-}
-    
 #component-2 {position: absolute; bottom: 0;    width: 100%;
 }
-
 div.float.svelte-1frtwj3 {
     position: absolute;
     opacity: 0;
+    top: var(--block-label-margin);
+    left: var(--block-label-margin);}
+    
+.wrap.svelte-6roggh.svelte-6roggh {
+    padding: var(--block-padding);
     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;
-
-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 {
-    display: flex;
-    flex-direction: inherit;
-    flex-wrap: wrap;
-    gap: var(--form-gap-width);
+    z-index: var(--layer-2);
     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;
-}
-
-.textarea.svelte-1pie7s6.svelte-1pie7s6 {
+    border: var(--block-label-border-width) solid #ffffff;
+    border-top: none;
+    border-left: none;
+    border-radius: var(--block-label-radius);
+    background: #eff6ff;
+    padding: var(--block-label-padding);
+    pointer-events: none;
+    color: var(--block-label-text-color);
+    font-weight: var(--block-label-text-weight);
+    width: 100%;
+    line-height: var(--line-sm);
+    }
+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;
 }
-
-.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;
+    background-color: #ffffff;
 }
 .app.svelte-ac4rv4.svelte-ac4rv4{max-width:none}
 .wrap.svelte-1o68geq.svelte-1o68geq {max-height: none}
-
 .block.svelte-mppz8v {
     position: relative;
     margin: 0;
-    return str(response.response)
+    box-shadow: var(--block-shadow);
+    border-width: var(--block-border-width);
+    border-color: #dbeafe;
+    border-radius: var(--block-radius);
+    background: #dbeafe;
+    width: 100%;
+    line-height: var(--line-sm);
+}
+
 """
 
 def transcribe(audio):