Update app.py

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 import openai
 import os
 import base64
-import time
 
 # OpenAI API Configuration
 openai.api_key = os.getenv("OPENAI_API_KEY")
@@ -10,7 +9,7 @@ ANALYSIS_MODEL = "gpt-4o"
 MAX_TOKENS = 4096
 
 # System Prompt Configuration
-SYSTEM_PROMPT = """You are a professional crypto chart analyst and trader, Professional Crypto Technical Analyst:
+SYSTEM_PROMPT = """Professional Crypto Technical Analyst:
 1. Identify all technical patterns in the chart
 2. Determine key support/resistance levels
 3. Analyze volume and momentum indicators
@@ -77,25 +76,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 +108,7 @@ body {
     border: 1px solid var(--border-color);
     width: 100%;
 }
+
 .primary-button {
     background-color: var(--primary-color) !important;
     color: white !important;
@@ -112,30 +117,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 +179,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 +196,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 Q-Agent Vision
+                🚀 CryptoVision Pro
             </h1>
             <p style="color: var(--text-color); font-size: 1.1rem;">
                 Advanced AI-powered cryptocurrency technical analysis
@@ -188,12 +228,16 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
                     gr.Markdown("### 📊 Analysis Report")
                     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>"
+                        value="Analysis report will appear here",
+                        elem_classes=["markdown-container"]
                     )
 
     # Event Handling
     analyze_btn.click(
+        fn=lambda: "Generating report...",  # Show loading text immediately
+        outputs=analysis_output,
+        queue=False
+    ).then(
         fn=analyzer.analyze_chart,
         inputs=chart_input,
         outputs=analysis_output,
@@ -201,4 +245,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        server_port=int(os.getenv("PORT", 7860)),
+        show_error=True
+    )