css for hint airi

app.py

@@ -169,6 +169,31 @@ css2 = """
 .prompt label {
     font-size: 20px !important;
 }
+
+.hint {
+    font-size: 20px !important;
+    text-align: center;
+    --text-md: 20px;
+}
+
+.airi-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    white-space: nowrap;
+}
+.airi {
+    font-size: 20px;
+    text-align: center;
+    --text-md: 20px;
+    width: 100%;
+    padding: 10px 0;
+}
+.airi img {
+    vertical-align: middle;
+    max-height: 1.2em;
+    margin-left: 5px;
+}
 """
 
 def get_demo():
@@ -200,11 +225,12 @@ def get_demo():
                     btn8 = gr.Button("", icon=info["image"].format("armchair"), elem_classes=["my-custom-button"])
 
                 # prod_desc = gr.Markdown(value="""<div style="font-size: 20px;">Choose the product you want to showcase </div"> 🠕""", visible=True)
-                prod_desc = gr.Markdown(
-                    '<div style="font-size: 20px; text-align: center;">'
-                    '<span>Choose the product you want to showcase 🠕</span>'
-                    '</div>'
-                )
+                # prod_desc = gr.Markdown(
+                #     '<div style="font-size: 20px; text-align: center;">'
+                #     '<span>Choose the product you want to showcase 🠕</span>'
+                #     '</div>'
+                # )
+                prod_desc = gr.Markdown("Choose the product you want to showcase 🠕", elem_classes=["hint"])
 
                 input_image = gr.Image(label="Chosen product", type="pil", height=300, width=300, visible=False, interactive=False, container=True, elem_classes=["input_image_container"])
                 descr = gr.Markdown(value=temaplte.format(""), visible=False)
@@ -236,12 +262,16 @@ def get_demo():
                 #         <div>Made by FusionBrainLab, AIRI</div><img src="https://static.tildacdn.com/tild3633-6662-4437-a333-646631346335/Airinet.png" style="width: 70px; height: auto;">
                 #     </div>
                 #     ''')
+        #         gr.Markdown(
+        #     '<div style="display: flex; align-items: center; gap: 10px; font-size: 20px; text-align: center; margin-left: 200px;">'
+        #     '<span>Made by FusionBrainLab, AIRI</span>'
+        #     '<img src="https://static.tildacdn.com/tild3633-6662-4437-a333-646631346335/Airinet.png" style="width: 70px; height: auto;">'
+        #     '</div>'
+        # )
                 gr.Markdown(
-            '<div style="display: flex; align-items: center; gap: 10px; font-size: 20px; text-align: center; margin-left: 200px;">'
-            '<span>Made by FusionBrainLab, AIRI</span>'
-            '<img src="https://static.tildacdn.com/tild3633-6662-4437-a333-646631346335/Airinet.png" style="width: 70px; height: auto;">'
-            '</div>'
-        )
+    '<span class="airi-content">Made by FusionBrainLab, AIRI <img src="https://static.tildacdn.com/tild3633-6662-4437-a333-646631346335/Airinet.png" style="width: 70px; height: auto;"></span>',
+    elem_classes=["airi"]
+)
 
         btn_generate.click(
             fn=generate_image,