| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StockLens - Documentation</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .progress-bar { |
| transition: width 1s ease-in-out; |
| } |
| .doc-card { |
| transition: all 0.5s ease; |
| } |
| .doc-card:hover { |
| transform: scale(1.02); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="gradient-bg text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="trending-up" class="h-8 w-8 mr-2"></i> |
| <h极h1 class="text-2xl font-bold">StockLens</h1> |
| </a> |
| </div> |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-6"> |
| <li><a href="index.html" class="hover:underline">Home</a></li> |
| <极li><a href="backtesting.html" class="hover:underline">Backtesting</a></li> |
| <li><a href="historical-data.html" class="hover:underline">Historical Data</a></li> |
| <li><a href="documentation.html" class="hover:underline font-bold">Documentation</a></li> |
| <li><a href="contact.html" class="hover:underline">Contact</a></li> |
| </ul> |
| </nav> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="极h-6 w-6"></i> |
| </button> |
| </div> |
| |
| <div class="mt-12 text-center" data-aos="fade-up"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">StockLens Documentation</h2> |
| <p class="text-xl max-w-2xl mx-auto">Comprehensive guides and references for using our LSTM stock prediction platform</p> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-12"> |
| |
| <section class="mb-16" data-aos="fade-up"> |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Getting Started</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <a href="#api-setup" class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl doc-card"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-2 rounded-lg"> |
| <i data-feather="key" class="h-5 w-5 text-blue-600"></i> |
| </div> |
| <h3 class="ml-3 font-semibold text-gray-800">API Setup</h3> |
| </div> |
| <p class="text-gray-600">Learn how to set up your Polygon.io API key and connect to market data</p> |
| </a> |
| |
| <a href="#model-training" class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-xl doc-card"> |
| <div class="flex items-center mb极-4"> |
| <div class="bg-purple-100 p-2 rounded-lg"> |
| <i data-feather="cpu" class="h-5 w-5 text-purple-600"></i> |
| </div> |
| <h3 class="ml-3 font-semibold text-gray-800">Model Training</h3> |
| </div> |
| <p class="text-gray-600">Understand LSTM model parameters and training optimization techniques</p> |
| </a> |
| |
| <a href="#backtesting" class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl doc-card"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-2 rounded-lg"> |
| <i data-feather="bar-chart-2" class="h-5 w-5 text-green-600"></i> |
| </div> |
| <h3 class="ml-3 font-semibold text-gray-800">Backtesting</h3> |
| </div> |
| <p class="text-gray-600">Learn how to configure and interpret backtesting results</p> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div id="api-setup" class="space-y-6"> |
| <h3 class="text-xl font-semibold text-gray-800">API Setup Guide</h3> |
| <div class="prose max-w-none"> |
| <h4>Getting a Polygon.io API Key</h4> |
| <ol class="list-decimal pl-5 space-y-2"> |
| <li>Visit <a href="https://polygon.io" class="text-indigo-600 hover:underline">polygon.io</a> and create an account</li> |
| <li>Navigate to your dashboard and generate a new API key</li> |
| <li>Copy the API key to your clipboard</li> |
| <li>Paste the API key in the input field on the prediction page</li> |
| <li>Your key is stored locally in your browser and never sent to our servers</li> |
| </ol> |
| |
| <h4>API Rate Limits</h4> |
| <p>Polygon.io has different rate limits based on your plan:</p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Free plan: 5 API calls per minute</li> |
| <li>Starter plan: 30 API calls per minute</li> |
| <li>Developer plan: 200 API calls per minute</li> |
| <li>Advanced plan: 1000 API calls per minute</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div id="model-training" class="space-y-6"> |
| <h3 class="text-xl font-semibold text-gray-800">Model Training Guide</h3> |
| <div class="prose max-w-none"> |
| <h4>LSTM Architecture</h4> |
| <p>Our model uses a multi-layer LSTM architecture with the following components:</p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Input layer with 60-day lookback window</li> |
| <li>Two LSTM layers with 50 units each</li> |
| <li>Dropout layers for regularization (0.2 rate)</li> |
| <li>Dense output layer with linear activation</li> |
| </ul> |
| |
| <h4>Training Parameters</h4> |
| <p>Optimize your model with these parameters:</p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Epochs: 10-200 (more epochs for complex patterns)</li> |
| <li>Batch size: 32 (balance between speed and accuracy)</li> |
| <li>Lookback period: 30-120 days (adjust based on volatility)</li> |
| <li>Learning rate: Adaptive (managed automatically)</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="backtesting" class="mt-12 space-y-6"> |
| <h3 class="text-xl font-semibold text-gray-800">Backtesting Guide</h3> |
| <div class="prose max-w-none"> |
| <h4>Backtesting Strategies</h4> |
| <p>Choose from three different trading strategies:</p> |
| <ul class="list-disc pl-5 space-y-2"> |
| <li><strong>Buy & Hold:</strong> Traditional benchmark strategy</li> |
| <li><strong>LSTM Prediction:</strong> Follow model buy/sell signals</li> |
| <li><strong>Hybrid:</strong> Combine LSTM predictions with technical indicators</li> |
| </ul> |
| |
| <h4>Performance Metrics</h4> |
| <p>Understand key performance indicators:</p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li><strong>Total Return:</strong> Overall profit/loss percentage</li> |
| <li><strong>Annualized Return:</strong> Return projected to yearly basis</li> |
| <li><strong>Max Drawdown:</strong> Largest peak-to-trough decline</li> |
| <li><strong>Sharpe Ratio:</strong> Risk-adjusted return measure</li> |
| <li><strong>Win Rate:</strong> Percentage of profitable trades</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Frequently Asked Questions</h2> |
| |
| <div class="space-y-6"> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">How accurate are the predictions?</h3> |
| <p class="text-gray-600">Our LSTM models typically achieve 70-85% accuracy for 30-day predictions, with accuracy decreasing for longer timeframes. Actual results vary by stock and market conditions.</p> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Can I use this for live trading?</h3> |
| <p class="text-gray-600">While our models are designed for educational and research purposes, some users do incorporate the predictions into their trading strategies. Always paper trade first and use proper risk management.</p> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">How much historical data is used?</h3> |
| <p class="text-gray-600">By default, we use 1 year of daily data for training. You can extend this through the Historical Data page to get more data from alternative sources.</p> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">What technical indicators are used?</h3> |
| <p class="text-gray-600">Our models incorporate RSI, MACD, moving averages, Bollinger Bands, and volume indicators as additional features alongside price data.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="trending-up" class="h-6 w-6 mr-2 text-indigo-400"></i> |
| <h3 class="text-xl font-bold">StockLens</h3> |
| </a> |
| </div> |
| <p class="text-gray-400">Advanced AI-powered stock prediction using LSTM neural networks and comprehensive technical analysis.</p> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="documentation.html" class="text-gray-400 hover:text-white">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">API Reference</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
| <li><a href="#" class="text-gray极-400 hover:text-white">Blog</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semib极old mb-4">Connect</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="github" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin" class="h-5 w-5"></极i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="mail" class="h-5 w-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center text-gray-400"> |
| <p>© 2023 StockLens. All rights reserved. Documentation is for informational purposes only and should not be considered as financial advice.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| feather.replace(); |
| }); |
| </script> |
| </body> |
| </html> |
