Update interface.py

interface.py

@@ -228,6 +228,115 @@ label {
     animation: slideIn 0.5s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
     color: #e0e0e0 !important;
+    padding: 1.5rem !important;
+    min-height: 200px !important;
+}
+
+/* Markdown container styling */
+.output-box .prose, .output-box .markdown {
+    font-size: 1.2rem !important;
+    line-height: 1.8 !important;
+}
+
+/* Markdown styling */
+.output-box h1 {
+    color: #00f2fe !important;
+    margin-top: 1.5rem !important;
+    margin-bottom: 1rem !important;
+    font-size: 2rem !important;
+}
+
+.output-box h2 {
+    color: #00f2fe !important;
+    margin-top: 1.5rem !important;
+    margin-bottom: 0.75rem !important;
+    font-size: 1.6rem !important;
+}
+
+.output-box h3 {
+    color: #4facfe !important;
+    margin-top: 1rem !important;
+    margin-bottom: 0.5rem !important;
+    font-size: 1.3rem !important;
+}
+
+.output-box p {
+    color: #e0e0e0 !important;
+    line-height: 1.9 !important;
+    margin-bottom: 1.2rem !important;
+    font-size: 1.15rem !important;
+}
+
+.output-box strong {
+    color: #4facfe !important;
+    font-weight: 600 !important;
+    font-size: 1.2rem !important;
+}
+
+.output-box code {
+    background: rgba(0, 242, 254, 0.15) !important;
+    padding: 3px 8px !important;
+    border-radius: 6px !important;
+    color: #00f2fe !important;
+    font-size: 1.1rem !important;
+    border: 1px solid rgba(0, 242, 254, 0.3) !important;
+}
+
+.output-box ul, .output-box ol {
+    font-size: 1.15rem !important;
+    line-height: 1.8 !important;
+    margin-left: 1.5rem !important;
+    color: #e0e0e0 !important;
+}
+
+.output-box li {
+    margin-bottom: 0.5rem !important;
+}
+
+/* Enhanced response area glow effect */
+.output-box:hover {
+    border-color: rgba(0, 242, 254, 0.4) !important;
+    box-shadow: 0 6px 25px rgba(0, 242, 254, 0.3) !important;
+    transition: all 0.3s ease !important;
+}
+
+/* JSON viewer styling */
+.output-box pre {
+    background: rgba(20, 20, 30, 0.9) !important;
+    border-radius: 10px !important;
+    padding: 1.5rem !important;
+    overflow-x: auto !important;
+    border: 1px solid rgba(0, 242, 254, 0.3) !important;
+    font-size: 1.05rem !important;
+    line-height: 1.6 !important;
+}
+
+.output-box .json-holder {
+    background: rgba(20, 20, 30, 0.9) !important;
+    border-radius: 10px !important;
+    padding: 1.5rem !important;
+    font-size: 1.05rem !important;
+}
+
+.output-box .json-key {
+    color: #00f2fe !important;
+    font-weight: 600 !important;
+}
+
+.output-box .json-string {
+    color: #90ee90 !important;
+}
+
+.output-box .json-number {
+    color: #ffa07a !important;
+}
+
+/* Special styling for AI response area */
+div[data-testid="markdown"] {
+    background: rgba(35, 35, 50, 0.6) !important;
+    padding: 1.5rem !important;
+    border-radius: 12px !important;
+    border: 1px solid rgba(0, 242, 254, 0.15) !important;
 }
 
 @keyframes slideIn {
@@ -450,8 +559,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as interface:
             with gr.Row():
                 with gr.Column():
                     status_output_home = gr.Textbox(label="📊 Status", elem_classes="output-box")
-                    response_output_home = gr.Textbox(label="🤖 AI Response", lines=8, elem_classes="output-box")
-                    sources_output_home = gr.Textbox(label="📚 Sources", lines=6, elem_classes="output-box")
+                    response_output_home = gr.Markdown(label="🤖 AI Response", elem_classes="output-box")
+                    sources_output_home = gr.JSON(label="📚 Sources", elem_classes="output-box")
             
             submit_btn_home.click(
                 fn=process_homepage_only,