Update app.py

app.py

@@ -77,25 +77,30 @@ 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: 600px;
+    height: 400px; /* Initial height */
     overflow-y: auto;
     width: 100%;
+    transition: height 0.3s ease;
 }
+
 .upload-box {
     background-color: white;
     border-radius: 12px;
@@ -104,6 +109,7 @@ body {
     border: 1px solid var(--border-color);
     width: 100%;
 }
+
 .primary-button {
     background-color: var(--primary-color) !important;
     color: white !important;
@@ -112,30 +118,57 @@ 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;
@@ -147,6 +180,14 @@ 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()
 
@@ -156,7 +197,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;">
-                🚀 HundAI Trade Agent
+                🚀 CryptoVision Pro
             </h1>
             <p style="color: var(--text-color); font-size: 1.1rem;">
                 Advanced AI-powered cryptocurrency technical analysis
@@ -186,15 +227,17 @@ 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.Markdown(
+                    analysis_output = gr.HTML(
                         label="",
-                        elem_classes=["markdown-container"],
-                        height=300,
-                        value="<div class='loading-text'>Report will be ready...</div>"
+                        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,