Update app.py

app.py

@@ -67,7 +67,7 @@ class ChartAnalyzer:
         except Exception as e:
             return f"Analysis Error: {str(e)}"
 
-# Custom CSS for professional look
+# Custom CSS for optimized layout
 custom_css = """
 :root {
     --primary-color: #2563eb;
@@ -82,6 +82,12 @@ body {
     color: var(--text-color);
 }
 
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
 .analysis-box {
     background-color: white;
     border-radius: 12px;
@@ -90,6 +96,7 @@ body {
     border: 1px solid var(--border-color);
     height: 600px;
     overflow-y: auto;
+    width: 100%;
 }
 
 .upload-box {
@@ -98,6 +105,7 @@ body {
     padding: 24px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--border-color);
+    width: 100%;
 }
 
 .primary-button {
@@ -106,6 +114,7 @@ body {
     border-radius: 8px !important;
     padding: 12px 24px !important;
     font-weight: 500 !important;
+    width: 100%;
 }
 
 .primary-button:hover {
@@ -113,8 +122,10 @@ body {
 }
 
 .markdown-container {
-    max-width: 800px;
+    max-width: 100%;
     margin: 0 auto;
+    padding: 0 15px;
+    word-wrap: break-word;
 }
 
 .markdown-container h2 {
@@ -135,6 +146,27 @@ body {
     border-radius: 4px;
     font-family: monospace;
 }
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.column {
+    flex: 1;
+    min-width: 300px;
+}
+
+@media (max-width: 768px) {
+    .row {
+        flex-direction: column;
+    }
+    
+    .column {
+        width: 100%;
+    }
+}
 """
 
 # Gradio Interface
@@ -142,19 +174,37 @@ analyzer = ChartAnalyzer()
 
 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
-        </h1>
-        <p style="color: var(--text-color); font-size: 1.1rem;">
-            Advanced AI-powered cryptocurrency technical analysis
-        </p>
+    <div class="container">
+        <div style="text-align: center; margin-bottom: 32px;">
+            <h1 style="color: var(--primary-color); font-size: 2.5rem; margin-bottom: 16px;">
+                🚀 CryptoVision Pro
+            </h1>
+            <p style="color: var(--text-color); font-size: 1.1rem;">
+                Advanced AI-powered cryptocurrency technical analysis
+            </p>
+        </div>
+        
+        <div class="row">
+            <div class="column">
+                <div class="upload-box">
+                    <h3>📤 Upload Your Chart</h3>
+                    <gr.Image />
+                    <gr.Button />
+                </div>
+            </div>
+            
+            <div class="column">
+                <div class="analysis-box">
+                    <h3>📊 HundAI Agent Analysis Report</h3>
+                    <gr.Markdown />
+                </div>
+            </div>
+        </div>
     </div>
     """)
     
     with gr.Row():
         with gr.Column(scale=1, elem_classes=["upload-box"]):
-            gr.Markdown("### 📤 Upload Your Chart")
             chart_input = gr.Image(
                 type="filepath",
                 label="",
@@ -168,7 +218,6 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             )
             
         with gr.Column(scale=2, elem_classes=["analysis-box"]):
-            gr.Markdown("### 📊 Analysis Report")
             analysis_output = gr.Markdown(
                 label="",
                 elem_classes=["markdown-container"]