Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>XAI Stock & ETF Analyzer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/lime-js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/shap/0.41.0/shap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%); | |
| } | |
| .feature-impact-bar { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-impact-bar:hover { | |
| transform: scaleX(1.05); | |
| } | |
| .financial-card { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| transition: all 0.3s ease; | |
| } | |
| .financial-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .tab-button { | |
| transition: all 0.2s ease; | |
| } | |
| .tab-button.active { | |
| border-bottom-width: 3px; | |
| border-color: #3B82F6; | |
| } | |
| .positive-change { | |
| color: #10B981; | |
| } | |
| .negative-change { | |
| color: #EF4444; | |
| } | |
| .neutral-change { | |
| color: #6B7280; | |
| } | |
| .ticker-search:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="gradient-bg text-white py-6 px-4 shadow-lg"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h1 class="text-3xl font-bold mb-1">XAI Stock & ETF Analyzer</h1> | |
| <p class="text-lg opacity-90">AI-powered investment insights with explainable analytics</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" id="ticker-search" placeholder="Search ticker (e.g. AAPL, SPY)" | |
| class="ticker-search pl-10 pr-4 py-2 rounded-full text-gray-800 focus:outline-none w-64"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| <button id="search-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition"> | |
| Analyze | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Portfolio Selection --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4 md:mb-0">Portfolio Analysis</h2> | |
| <div class="flex space-x-3"> | |
| <button id="add-stock-btn" class="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-2"></i>Add Stock | |
| </button> | |
| <button id="add-etf-btn" class="bg-green-100 text-green-700 px-4 py-2 rounded-lg hover:bg-green-200 transition"> | |
| <i class="fas fa-plus mr-2"></i>Add ETF | |
| </button> | |
| <button id="compare-btn" class="bg-purple-100 text-purple-700 px-4 py-2 rounded-lg hover:bg-purple-200 transition"> | |
| <i class="fas fa-exchange-alt mr-2"></i>Compare | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="portfolio-cards"> | |
| <!-- Default cards --> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">SPY</h3> | |
| <p class="text-gray-600">SPDR S&P 500 ETF</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">ETF</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-2xl font-bold text-gray-800">$453.27</span> | |
| <span class="positive-change text-sm font-medium">+1.24%</span> | |
| </div> | |
| <div class="h-40 mb-4"> | |
| <canvas id="spy-chart"></canvas> | |
| </div> | |
| <button class="analyze-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition" | |
| data-ticker="SPY"> | |
| Analyze with XAI | |
| </button> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">AAPL</h3> | |
| <p class="text-gray-600">Apple Inc.</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Stock</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-2xl font-bold text-gray-800">$193.05</span> | |
| <span class="negative-change text-sm font-medium">-0.56%</span> | |
| </div> | |
| <div class="h-40 mb-4"> | |
| <canvas id="aapl-chart"></canvas> | |
| </div> | |
| <button class="analyze-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition" | |
| data-ticker="AAPL"> | |
| Analyze with XAI | |
| </button> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">TSLA</h3> | |
| <p class="text-gray-600">Tesla Inc.</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Stock</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-2xl font-bold text-gray-800">$248.48</span> | |
| <span class="positive-change text-sm font-medium">+3.12%</span> | |
| </div> | |
| <div class="h-40 mb-4"> | |
| <canvas id="tsla-chart"></canvas> | |
| </div> | |
| <button class="analyze-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition" | |
| data-ticker="TSLA"> | |
| Analyze with XAI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analysis Tabs --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px overflow-x-auto"> | |
| <button id="overview-tab" class="tab-button active py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-chart-line mr-2"></i>Overview | |
| </button> | |
| <button id="fundamentals-tab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-file-invoice-dollar mr-2"></i>Fundamentals | |
| </button> | |
| <button id="lime-tab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-brain mr-2"></i>LIME Explanation | |
| </button> | |
| <button id="shap-tab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-project-diagram mr-2"></i>SHAP Analysis | |
| </button> | |
| <button id="compare-tab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-balance-scale mr-2"></i>Comparison | |
| </button> | |
| <button id="sentiment-tab" class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm whitespace-nowrap"> | |
| <i class="fas fa-comment-dots mr-2"></i>Sentiment | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Overview Panel --> | |
| <div id="overview-panel"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-1">SPDR S&P 500 ETF (SPY)</h3> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-3xl font-bold text-gray-800">$453.27</span> | |
| <span class="positive-change text-lg font-medium">+$5.52 (+1.24%)</span> | |
| <span class="text-gray-600">Today</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">ETF</span> | |
| <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium ml-2">Large Cap</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-3">Key Metrics</h4> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">P/E Ratio</span> | |
| <span class="font-medium">21.34</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Dividend Yield</span> | |
| <span class="font-medium">1.35%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Expense Ratio</span> | |
| <span class="font-medium">0.09%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Assets</span> | |
| <span class="font-medium">$380.2B</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-3">Performance</h4> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">1 Week</span> | |
| <span class="positive-change font-medium">+2.1%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">1 Month</span> | |
| <span class="positive-change font-medium">+5.3%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">YTD</span> | |
| <span class="positive-change font-medium">+14.7%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">1 Year</span> | |
| <span class="positive-change font-medium">+22.4%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-3">AI Prediction</h4> | |
| <div class="flex flex-col items-center justify-center h-full"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">Bullish</div> | |
| <div class="text-gray-600 mb-4">68% confidence</div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200 mb-6"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Price Chart (6 Months)</h4> | |
| <div class="h-80"> | |
| <canvas id="overview-chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Top Holdings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium text-sm">1</span> | |
| </div> | |
| <span class="font-medium">Apple Inc.</span> | |
| </div> | |
| <span class="text-gray-600">7.2%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium text-sm">2</span> | |
| </div> | |
| <span class="font-medium">Microsoft Corp.</span> | |
| </div> | |
| <span class="text-gray-600">6.8%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium text-sm">3</span> | |
| </div> | |
| <span class="font-medium">Amazon.com Inc.</span> | |
| </div> | |
| <span class="text-gray-600">3.5%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium text-sm">4</span> | |
| </div> | |
| <span class="font-medium">NVIDIA Corp.</span> | |
| </div> | |
| <span class="text-gray-600">3.2%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium text-sm">5</span> | |
| </div> | |
| <span class="font-medium">Alphabet Inc.</span> | |
| </div> | |
| <span class="text-gray-600">2.1%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Sector Allocation</h4> | |
| <div class="h-64"> | |
| <canvas id="sector-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fundamentals Panel --> | |
| <div id="fundamentals-panel" class="hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Valuation Metrics</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">P/E Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">21.34</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 24.56</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">P/B Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">3.87</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 4.12</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">P/S Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">2.45</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 2.78</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Dividend Yield</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">1.35%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 1.42%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">PEG Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">1.56</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 1.72</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Financial Health</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Debt/Equity</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">0.45</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 0.62</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Current Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">1.32</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 1.18</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">ROE</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">18.2%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 15.7%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">ROA</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">8.5%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 7.2%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Operating Margin</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">22.4%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 19.8%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200 mb-6"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Historical Financials</h4> | |
| <div class="h-80"> | |
| <canvas id="financials-chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Growth Metrics</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Revenue Growth (YoY)</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">8.7%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 6.5%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">EPS Growth (YoY)</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">12.4%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 9.8%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">3Y Revenue Growth</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">9.2%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 7.1%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">3Y EPS Growth</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">11.5%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 8.9%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">5Y Revenue Growth</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">8.3%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 6.7%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Cash Flow</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Operating Cash Flow</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$45.2B</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">+12.4% YoY</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Free Cash Flow</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$32.7B</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">+9.8% YoY</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">CapEx</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$12.5B</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">+5.2% YoY</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">FCF Yield</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">3.8%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 2.9%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Dividend Payout Ratio</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">28.4%</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">Industry: 35.2%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LIME Explanation Panel --> | |
| <div id="lime-panel" class="hidden"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">LIME Explanation</h3> | |
| <p class="text-gray-600">Local Interpretable Model-agnostic Explanations show which features most influenced this prediction.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Feature Impact on Prediction</h4> | |
| <div id="lime-features" class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">P/E Ratio (21.3)</span> | |
| <span class="text-sm font-medium text-red-600">-0.23</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="feature-impact-bar bg-red-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Revenue Growth (8.7%)</span> | |
| <span class="text-sm font-medium text-green-600">+0.38</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="feature-impact-bar bg-green-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">ROE (18.2%)</span> | |
| <span class="text-sm font-medium text-green-600">+0.31</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="feature-impact-bar bg-green-500 h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Debt/Equity (0.45)</span> | |
| <span class="text-sm font-medium text-green-600">+0.18</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="feature-impact-bar bg-green-500 h-2 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Dividend Yield (1.35%)</span> | |
| <span class="text-sm font-medium text-red-600">-0.12</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="feature-impact-bar bg-red-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <h4 class="font-medium text-lg text-gray-700 mb-4">Prediction Confidence</h4> | |
| <div class="h-64"> | |
| <canvas id="lime-confidence-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="financial-card bg-white p-6 rounded-xl border | |
| </html> |