Imagem e CSS

Subindo imagem cabeçalho Hippo Beta e refatorando código python e css

app.py

@@ -11,113 +11,6 @@ p = pipeline("automatic-speech-recognition")
 
 os.environ["OPENAI_API_KEY"]
 
-css = """
-
-#component-2 {position: absolute; bottom: 0;    width: 100%;
-}
-.app.svelte-ac4rv4>.main.svelte-ac4rv4 {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    background-image: url(https://i.ibb.co/xj8R4r3/background-vertical.png);
-}
-div.svelte-1frtwj3 {
-    display: inline-flex;
-    align-items: center;}
-    
-div.float.svelte-1frtwj3 {
-    position: absolute;
-    opacity: 0;
-    top: var(--block-label-margin);
-    left: var(--block-label-margin);}
-    
-.wrap.svelte-6roggh.svelte-6roggh {
- adding: var(--block-padding);
-    height: 100%;
-    max-height: 800px;
-    overflow-y: auto;
-    }
-    
-.bot.svelte-6roggh.svelte-6roggh, .pending.svelte-6roggh.svelte-6roggh {
-    border-color: var(--border-color-accent);
-    background-color: var(--color-accent-soft);
-    color: white;
-    font-family: initial;
-    font-style: italic;
-    font: message-box;
-    font-weight: bold;
-}
-div.svelte-1frtwj3 {
-    display: inline-flex;
-    align-items: center;
-    z-index: var(--layer-2);
-    box-shadow: var(--block-shadow);
-    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-radius: var(--radius-lg);
-    background: #ffffff;
-    overflow: hidden;
-    position: fixed;
-    bottom: 0;
-    margin-left: -16px;
-}
-
-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;
-    box-shadow: var(--block-shadow);
-    border-width: var(--block-border-width);
-    border-color: white;
-    border-radius: var(--block-radius);
-    background: white;
-    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;
-color: white;    
-        
-    
-}
-div.user.svelte-17nzccn.svelte-17nzccn {
-    background: #5F0000;
-}    
-"""
-
 def transcribe(audio):
     text = p(audio)["text"]
     return text
@@ -138,6 +31,11 @@ def construct_index(directory_path):
 
     return index
 
+# Load CSS from a separate file
+css_file = open("src/css/styles.css", "r")
+css = css_file.read()
+css_file.close()
+
 
 def chatbot(input_text):    
     num_outputs = 4097    
@@ -156,7 +54,7 @@ def chatbot(input_text):
 
 with gr.Blocks(css=css) as demo:
     realPath = str(os.path.dirname(os.path.realpath(__file__)))
-    img1 = gr.Image("images/1024x150_cabeçalho.hippo.png", elem_classes=".img.svelte-ms5bsk", elem_id="img.svelte-ms5bsk").style(container=False)
+    img1 = gr.Image("images/adega_hippo.png", elem_classes=".img.svelte-ms5bsk", elem_id="img.svelte-ms5bsk").style(container=False)
     gpt = gr.Chatbot(label = ".", 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?",

src/css/styles.css

@@ -0,0 +1,103 @@
+#component-2 {position: absolute; bottom: 0;    width: 100%;
+}
+.app.svelte-ac4rv4>.main.svelte-ac4rv4 {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    background-image: url(https://i.ibb.co/xj8R4r3/background-vertical.png);
+}
+div.svelte-1frtwj3 {
+    display: inline-flex;
+    align-items: center;}
+    
+div.float.svelte-1frtwj3 {
+    position: absolute;
+    opacity: 0;
+    top: var(--block-label-margin);
+    left: var(--block-label-margin);}
+    
+.wrap.svelte-6roggh.svelte-6roggh {
+ adding: var(--block-padding);
+    height: 100%;
+    max-height: 800px;
+    overflow-y: auto;
+    }
+    
+.bot.svelte-6roggh.svelte-6roggh, .pending.svelte-6roggh.svelte-6roggh {
+    border-color: var(--border-color-accent);
+    background-color: var(--color-accent-soft);
+    color: white;
+    font-family: initial;
+    font-style: italic;
+    font: message-box;
+    font-weight: bold;
+}
+div.svelte-1frtwj3 {
+    display: inline-flex;
+    align-items: center;
+    z-index: var(--layer-2);
+    box-shadow: var(--block-shadow);
+    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-radius: var(--radius-lg);
+    background: #ffffff;
+    overflow: hidden;
+    position: fixed;
+    bottom: 0;
+    margin-left: -16px;
+}
+
+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;
+    box-shadow: var(--block-shadow);
+    border-width: var(--block-border-width);
+    border-color: white;
+    border-radius: var(--block-radius);
+    background: white;
+    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;
+color: white;    
+        
+    
+}
+div.user.svelte-17nzccn.svelte-17nzccn {
+    background: #5F0000;
+}