Update app.py

app.py

@@ -77,30 +77,25 @@ custom_css = """
     --text-color: #1e293b;
     --border-color: #e2e8f0;
 }
-
 body {
     background-color: var(--background-color);
     color: var(--text-color);
 }
-
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }
-
 .analysis-box {
     background-color: white;
     border-radius: 12px;
     padding: 24px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--border-color);
-    height: 400px; /* Initial height */
+    height: 600px;
     overflow-y: auto;
     width: 100%;
-    transition: height 0.3s ease;
 }
-
 .upload-box {
     background-color: white;
     border-radius: 12px;
@@ -109,7 +104,6 @@ body {
     border: 1px solid var(--border-color);
     width: 100%;
 }
-
 .primary-button {
     background-color: var(--primary-color) !important;
     color: white !important;
@@ -118,57 +112,30 @@ body {
     font-weight: 500 !important;
     width: 100%;
 }
-
 .primary-button:hover {
     background-color: var(--secondary-color) !important;
 }
-
 .markdown-container {
     max-width: 100%;
     margin: 0 auto;
     padding: 0 15px;
     word-wrap: break-word;
 }
-
-.loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}
-
 .loading-text {
     color: var(--primary-color);
     font-size: 1.2rem;
     text-align: center;
     margin-top: 2rem;
 }
-
-.loading-spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid var(--primary-color);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 .row {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }
-
 .column {
     flex: 1;
     min-width: 300px;
 }
-
 @media (max-width: 768px) {
     .row {
         flex-direction: column;
@@ -180,14 +147,6 @@ body {
 }
 """
 
-# Loading HTML template
-loading_html = """
-<div class="loading-container">
-    <div class="loading-spinner"></div>
-    <div class="loading-text">Generating report...</div>
-</div>
-"""
-
 # Gradio Interface
 analyzer = ChartAnalyzer()
 
@@ -197,7 +156,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
         gr.Markdown("""
         <div style="text-align: center; margin-bottom: 32px;">
             <h1 style="color: var(--primary-color); font-size: 2.5rem; margin-bottom: 16px;">
-                🚀 CryptoVision Pro
+                🚀 HundAI Q-Agent Vision
             </h1>
             <p style="color: var(--text-color); font-size: 1.1rem;">
                 Advanced AI-powered cryptocurrency technical analysis
@@ -227,17 +186,14 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             with gr.Column(elem_classes=["column"]):
                 with gr.Column(elem_classes=["analysis-box"]):
                     gr.Markdown("### 📊 Analysis Report")
-                    analysis_output = gr.HTML(
+                    analysis_output = gr.Markdown(
                         label="",
+                        elem_classes=["markdown-container"],
                         value="<div style='text-align:center; padding:20px; color:#666;'>Analysis report will appear here</div>"
                     )
 
     # Event Handling
     analyze_btn.click(
-        fn=lambda: loading_html,  # Show loading spinner immediately
-        outputs=analysis_output,
-        queue=False
-    ).then(
         fn=analyzer.analyze_chart,
         inputs=chart_input,
         outputs=analysis_output,