Update app.py

app.py

@@ -103,10 +103,100 @@ def model_generate_ans(img=None,img_audio=None,val_q=None):
 
 with gr.Blocks() as demo:
 
+     # Add custom CSS stylesheet within Markdown
     gr.Markdown(
     """
-    # Chat with MultiModal GPT !
-    Build using combining clip model and phi-2 model.
+    <style>
+    /* General Layout */
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f9f9f9;
+        margin: 0;
+        padding: 0;
+    }
+
+    /* Header */
+    h1, h2, h3 {
+        text-align: center;
+        color: #333;
+        font-weight: bold;
+    }
+
+    gr-Markdown h1 {
+        font-size: 28px;
+        color: #4CAF50;
+    }
+
+    /* Container and Columns */
+    .gr-row {
+        display: flex;
+        justify-content: center;
+        margin: 20px 0;
+    }
+
+    .gr-column {
+        flex: 1;
+        margin: 0 10px;
+        padding: 10px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        background-color: #fff;
+        border-radius: 8px;
+    }
+
+    /* Input Components */
+    .gr-Image, .gr-Audio, .gr-Text {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+
+    .gr-Image label, .gr-Audio label, .gr-Text label {
+        font-size: 16px;
+        font-weight: bold;
+        color: #555;
+    }
+
+    /* Submit Button */
+    .gr-Button {
+        width: 100%;
+        background-color: #4CAF50;
+        color: white;
+        padding: 10px;
+        font-size: 16px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .gr-Button:hover {
+        background-color: #45a049;
+    }
+
+    /* Text Output */
+    .gr-Text {
+        font-size: 16px;
+        color: #333;
+        min-height: 100px;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .gr-row {
+            flex-direction: column;
+        }
+
+        .gr-column {
+            margin: 10px 0;
+        }
+    }
+    </style>
+
+    # Discover MultiModal GPT: A New AI Experience!
+    Leveraging the best of CLIP and Phi-2 models for enhanced image, audio, and text understanding.
+    
     """
     )