Update templates/index.html

templates/index.html

@@ -143,6 +143,7 @@
         .research-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
         .research-ticker { font-size: 1.8em; font-weight: 800; background: linear-gradient(135deg, #00d9ff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
         .rating-badge { padding: 10px 20px; border-radius: 25px; font-size: 1em; font-weight: 700; }
+        .rating-strong-buy { background: linear-gradient(135deg, #00ff88, #00d9ff); color: #1a1a2e; }
         .rating-buy { background: #2ed573; color: #1a1a2e; }
         .rating-hold { background: #ffa502; color: #1a1a2e; }
         .rating-sell { background: #ff4757; color: white; }
@@ -423,21 +424,28 @@
                     <div class="metrics-grid">
                         <div class="metric-card">
                             <div class="metric-label">현재가</div>
-                            <div class="metric-value">${{ "{:,.2f}".format(report.current_price) }}</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-label">목표가</div>
-                            <div class="metric-value" style="color: #00ff88;">${{ "{:,.2f}".format(report.target_price) }}</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-label">상승여력</div>
-                            <div class="metric-value" style="color: #00d9ff;">+{{ report.upside }}%</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-label">리스크</div>
-                            <div class="metric-value">{{ report.risk_level }}</div>
+                                <div class="metric-value">${{ "{:,.2f}".format(report.current_price) }}</div>
+                            </div>
+                            <div class="metric-card">
+                                <div class="metric-label">목표가</div>
+                                <div class="metric-value" style="color: #00ff88;">${{ "{:,.2f}".format(report.target_price) }}</div>
+                            </div>
+                            <div class="metric-card">
+                                <div class="metric-label">📉 하락 리스크</div>
+                                <div class="metric-value" style="color: #ff4757;">{{ report.get('expected_downside', -10) }}%</div>
+                                <div style="font-size: 0.7em; color: #888;">{{ report.get('down_probability', 45) }}% 확률</div>
+                            </div>
+                            <div class="metric-card" style="background: rgba(0,217,255,0.15); border: 1px solid rgba(0,217,255,0.3);">
+                                <div class="metric-label">🎯 기대 수익</div>
+                                <div class="metric-value" style="color: #00d9ff;">{% set pred = report.get('base_prediction', report.get('upside', 8)) %}{% if pred >= 0 %}+{% endif %}{{ pred }}%</div>
+                                <div style="font-size: 0.7em; color: #888;">R/R {{ report.get('risk_reward', 1.5) }}:1</div>
+                            </div>
+                            <div class="metric-card">
+                                <div class="metric-label">📈 상승 잠재력</div>
+                                <div class="metric-value" style="color: #00ff88;">+{{ report.get('expected_upside', 15) }}%</div>
+                                <div style="font-size: 0.7em; color: #888;">{{ report.get('up_probability', 55) }}% 확률</div>
+                            </div>
                         </div>
-                    </div>
                     <div class="soma-agent soma-supervisor">
                         <div class="soma-header">
                             <div class="soma-icon" style="background: #9b59b6;">👔</div>
@@ -668,8 +676,51 @@
                     <div class="metric-card"><div class="metric-label">현재가</div><div class="metric-value" id="result-current-price">-</div></div>
                     <div class="metric-card"><div class="metric-label">목표가</div><div class="metric-value" style="color: #00ff88;" id="result-target-price">-</div></div>
                     <div class="metric-card"><div class="metric-label">투자의견</div><div class="metric-value" style="color: #00d9ff;" id="result-rating">-</div></div>
-                    <div class="metric-card"><div class="metric-label">상승여력</div><div class="metric-value" style="color: #2ed573;" id="result-upside">-</div></div>
                 </div>
+                
+                <!-- 탄력성 예측 시각적 UI -->
+                <div class="elasticity-container" style="margin-bottom: 25px; padding: 20px; background: rgba(0,0,0,0.3); border-radius: 15px; border: 1px solid rgba(255,255,255,0.1);">
+                    <h4 style="color: #00d9ff; margin-bottom: 15px; text-align: center;">📊 탄력성 예측</h4>
+                    
+                    <!-- 시각적 바 -->
+                    <div class="elasticity-bar-container" style="position: relative; height: 50px; margin: 20px 0;">
+                        <div class="elasticity-scale" style="display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-bottom: 5px;">
+                            <span id="elasticity-min">-30%</span>
+                            <span>0%</span>
+                            <span id="elasticity-max">+40%</span>
+                        </div>
+                        <div class="elasticity-track" style="position: relative; height: 20px; background: linear-gradient(to right, #ff4757 0%, #ff4757 40%, #888 40%, #888 45%, #00ff88 45%, #00ff88 100%); border-radius: 10px; overflow: hidden;">
+                            <!-- 예측 범위 표시 -->
+                            <div id="elasticity-range" style="position: absolute; height: 100%; background: rgba(0,217,255,0.4); border: 2px solid #00d9ff; border-radius: 8px;"></div>
+                            <!-- 기본 예측치 마커 -->
+                            <div id="elasticity-marker" style="position: absolute; top: -8px; width: 4px; height: 36px; background: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,0.8);"></div>
+                        </div>
+                    </div>
+                    
+                    <!-- 수치 표시 - 확률 강조 -->
+                    <div style="display: flex; justify-content: space-between; gap: 15px; margin-top: 20px;">
+                        <div style="flex: 1; text-align: center; padding: 15px; background: rgba(255,71,87,0.15); border-radius: 10px; border: 1px solid rgba(255,71,87,0.3);">
+                            <div style="font-size: 12px; color: #ff6b7a; margin-bottom: 5px;">📉 하락 리스크</div>
+                            <div id="result-downside" style="font-size: 22px; font-weight: bold; color: #ff4757;">-</div>
+                            <div style="font-size: 11px; color: #888; margin-top: 3px;"><span id="result-down-prob">-</span> 확률</div>
+                        </div>
+                        <div style="flex: 1; text-align: center; padding: 15px; background: rgba(0,217,255,0.15); border-radius: 10px; border: 1px solid rgba(0,217,255,0.3);">
+                            <div style="font-size: 12px; color: #00d9ff; margin-bottom: 5px;">🎯 기대 수익</div>
+                            <div id="result-prediction" style="font-size: 24px; font-weight: bold; color: #00d9ff;">-</div>
+                            <div style="font-size: 11px; color: #888; margin-top: 3px;">R/R <span id="result-rr">-</span></div>
+                        </div>
+                        <div style="flex: 1; text-align: center; padding: 15px; background: rgba(0,255,136,0.15); border-radius: 10px; border: 1px solid rgba(0,255,136,0.3);">
+                            <div style="font-size: 12px; color: #00ff88; margin-bottom: 5px;">📈 상승 잠재력</div>
+                            <div id="result-upside" style="font-size: 22px; font-weight: bold; color: #00ff88;">-</div>
+                            <div style="font-size: 11px; color: #888; margin-top: 3px;"><span id="result-up-prob">-</span> 확률</div>
+                        </div>
+                    </div>
+                    
+                    <div style="text-align: center; margin-top: 12px; font-size: 11px; color: #666;">
+                        ※ AI 기반 분석이며 실제 투자 손익을 보장하지 않습니다
+                    </div>
+                </div>
+                
                 <div class="deep-section" style="background: rgba(0,217,255,0.1); border: 1px solid rgba(0,217,255,0.3);"><h3>📋 핵심 요약</h3><div class="content" id="result-executive-summary"></div></div>
                 <div class="deep-section"><h3>🏢 회사 개요</h3><div class="content" id="result-company-overview"></div></div>
                 <div class="deep-section"><h3>💰 재무 분석</h3><div class="content" id="result-financial-analysis"></div></div>
@@ -1399,6 +1450,46 @@
             return text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
         }
         
+        function updateElasticityUI(report) {
+            // 탄력성 데이터 추출 (기본값 설정)
+            const upside = report.expected_upside || 15;
+            const downside = report.expected_downside || -10;
+            const prediction = report.base_prediction || report.upside || 8;
+            const upProb = report.up_probability || 55;
+            const downProb = report.down_probability || 45;
+            const riskReward = report.risk_reward || 1.5;
+            
+            // 수치 표시
+            document.getElementById('result-upside').textContent = `+${upside}%`;
+            document.getElementById('result-downside').textContent = `${downside}%`;
+            document.getElementById('result-prediction').textContent = prediction >= 0 ? `+${prediction}%` : `${prediction}%`;
+            document.getElementById('result-prediction').style.color = prediction >= 0 ? '#00d9ff' : '#ff4757';
+            document.getElementById('result-up-prob').textContent = `${upProb}%`;
+            document.getElementById('result-down-prob').textContent = `${downProb}%`;
+            document.getElementById('result-rr').textContent = `${riskReward}:1`;
+            
+            // 시각적 바 업데이트
+            const minVal = Math.min(downside, -30);
+            const maxVal = Math.max(upside, 40);
+            const range = maxVal - minVal;
+            
+            // 스케일 라벨 업데이트
+            document.getElementById('elasticity-min').textContent = `${Math.round(minVal)}%`;
+            document.getElementById('elasticity-max').textContent = `+${Math.round(maxVal)}%`;
+            
+            // 범위 바 위치 계산 (downside ~ upside)
+            const rangeLeft = ((downside - minVal) / range) * 100;
+            const rangeRight = ((upside - minVal) / range) * 100;
+            const rangeEl = document.getElementById('elasticity-range');
+            rangeEl.style.left = `${rangeLeft}%`;
+            rangeEl.style.width = `${rangeRight - rangeLeft}%`;
+            
+            // 기본 예측 마커 위치
+            const markerPos = ((prediction - minVal) / range) * 100;
+            const markerEl = document.getElementById('elasticity-marker');
+            markerEl.style.left = `calc(${markerPos}% - 2px)`;
+        }
+        
         function initAnalysisCharts(report) {
             [metricsChartInstance, priceChartInstance, riskChartInstance, growthChartInstance].forEach(c => c && c.destroy());
             const cp = report.current_price || 100, tp = report.target_price || 112;
@@ -1504,7 +1595,9 @@
             document.getElementById('result-current-price').textContent = report.current_price ? `$${report.current_price.toLocaleString()}` : '-';
             document.getElementById('result-target-price').textContent = report.target_price ? `$${report.target_price.toLocaleString()}` : '-';
             document.getElementById('result-rating').textContent = report.rating || 'Buy';
-            document.getElementById('result-upside').textContent = report.upside ? `+${report.upside}%` : '-';
+            
+            // 탄력성 예측 UI 업데이트
+            updateElasticityUI(report);
             
             setTimeout(() => initAnalysisCharts(report), 100);
             
@@ -1602,10 +1695,28 @@
                                 <div class="metric-label">투자의견</div>
                                 <div class="metric-value">${document.getElementById('result-rating')?.textContent || '-'}</div>
                             </div>
-                            <div class="metric">
-                                <div class="metric-label">상승여력</div>
-                                <div class="metric-value">${document.getElementById('result-upside')?.textContent || '-'}</div>
+                        </div>
+                        
+                        <div class="section" style="background: #f0f8ff; border-left-color: #0099cc;">
+                            <div class="section-title">📊 수익률 전망</div>
+                            <div style="display: flex; justify-content: space-around; text-align: center; margin: 15px 0;">
+                                <div>
+                                    <div style="color: #cc0000; font-size: 12px;">📉 하락 리스크</div>
+                                    <div style="font-size: 20px; font-weight: bold; color: #cc0000;">${document.getElementById('result-downside')?.textContent || '-'}</div>
+                                    <div style="font-size: 11px; color: #666;">${document.getElementById('result-down-prob')?.textContent || '-'} 확률</div>
+                                </div>
+                                <div>
+                                    <div style="color: #0066cc; font-size: 12px;">🎯 기대 수익</div>
+                                    <div style="font-size: 24px; font-weight: bold; color: #0066cc;">${document.getElementById('result-prediction')?.textContent || '-'}</div>
+                                    <div style="font-size: 11px; color: #666;">R/R ${document.getElementById('result-rr')?.textContent || '-'}</div>
+                                </div>
+                                <div>
+                                    <div style="color: #009966; font-size: 12px;">📈 상승 잠재력</div>
+                                    <div style="font-size: 20px; font-weight: bold; color: #009966;">${document.getElementById('result-upside')?.textContent || '-'}</div>
+                                    <div style="font-size: 11px; color: #666;">${document.getElementById('result-up-prob')?.textContent || '-'} 확률</div>
+                                </div>
                             </div>
+                            <div style="text-align: center; font-size: 10px; color: #999;">※ AI 기반 분석이며 실제 투자 손익을 보장하지 ��습니다</div>
                         </div>
                         
                         <div class="section">