Correção CSS (#11)

- Correção CSS (8b5db7b38c19ca242c819fd3b873379c955333b6)


Co-authored-by: Renato Cardoso Zimmer <[email protected]>

app.py

@@ -13,8 +13,13 @@ 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;
@@ -25,11 +30,8 @@ div.float.svelte-1frtwj3 {
     height: 100%;
     max-height: 100%;
     overflow-y: auto;
-    }
-.bot.svelte-6roggh.svelte-6roggh, .pending.svelte-6roggh.svelte-6roggh {
-    border-color: ##D9A13D;
-    background: ##D9A13D;
 }
+
 div.svelte-1frtwj3 {
     display: inline-flex;
     align-items: center;
@@ -50,30 +52,77 @@ div.svelte-1frtwj3 {
 
 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);
+    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;
+}
 
-div.svelte-awbtu4 {
+.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 var(--border-color-primary);
+    border: var(--block-border-width) solid #5f0000;
     border-radius: var(--radius-lg);
-    background: var(--border-color-primary);
+    background: #ffffff;
     overflow: hidden;
     position: fixed;
     bottom: 0;
     margin-left: -16px;
 }
-img.svelte-ms5bsk {
-    width: var(--size-full);
-    height: 90px;
-    object-fit: contain;
+
+.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;
 }
 .app.svelte-ac4rv4.svelte-ac4rv4 {
     max-width: none;
@@ -81,6 +130,7 @@ img.svelte-ms5bsk {
 }
 .app.svelte-ac4rv4.svelte-ac4rv4{max-width:none}
 .wrap.svelte-1o68geq.svelte-1o68geq {max-height: none}
+
 .block.svelte-mppz8v {
     position: relative;
     margin: 0;
@@ -128,11 +178,11 @@ def chatbot(input_text):
     return str(response.response)
 
 
-with gr.Blocks(css=css, elem_classes=".app.svelte-ac4rv4.svelte-ac4rv4") as demo:
+with gr.Blocks(css=css) as demo:
     realPath = str(os.path.dirname(os.path.realpath(__file__)))
-    img1 = gr.Image("images/imagem teste.png")
-    gpt = gr.Chatbot(label="Converse com a Zoh",elem_classes=".wrap.svelte-1o68geq.svelte-1o68geq", elem_id="chatbot").style(container=True)
-    msg = gr.Textbox(elem_id="div.svelte-awbtu4",elem_classes="div.svelte-awbtu4", show_label=False,
+    img1 = gr.Image("images/1024x150_cabeçalho.hippo.png", elem_classes=".img.svelte-ms5bsk", elem_id="img.svelte-ms5bsk").style(container=False)
+    gpt = gr.Chatbot(elem_classes=".wrap.svelte-1o68geq.svelte-1o68geq", elem_id="chatbot").style(container=True)
+    msg = gr.Textbox(elem_id="div.svelte-awbtu4",elem_classes="textBoxBot", show_label=False,
                 placeholder="Bem vindo ao Hippo Supermercados, em que posso ajuda-lo?",
             ).style(container=False)
     #clear = gr.Button("Limpar Conversa")