Spaces:

lablab-ai-amd-developer-hackathon
/

amd-finance-llm

Runtime error

App Files Files Community

shah-shazid-askary commited on May 8

Commit

3b91726

verified ·

1 Parent(s): 58ffabd

Upload index.html

Browse files

Files changed (1) hide show

index.html +983 -0

index.html ADDED Viewed

	@@ -0,0 +1,983 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AMD Finance LLM — AI-Powered Financial Intelligence</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --blue: #2563eb;
+            --blue-dark: #1d4ed8;
+            --blue-light: #dbeafe;
+            --blue-glow: #3b82f6;
+            --gray-50: #f8fafc;
+            --gray-100: #f1f5f9;
+            --gray-200: #e2e8f0;
+            --gray-300: #cbd5e1;
+            --gray-400: #94a3b8;
+            --gray-500: #64748b;
+            --gray-600: #475569;
+            --gray-700: #334155;
+            --gray-800: #1e293b;
+            --gray-900: #0f172a;
+            --radius: 16px;
+            --radius-lg: 24px;
+            --radius-xl: 32px;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+            --shadow-blue: 0 10px 40px -10px rgb(37 99 235 / 0.3);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #fff;
+            color: var(--gray-800);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+        /* Navigation */
+        nav {
+            position: fixed;
+            top: 0; left: 0; right: 0;
+            background: rgba(255,255,255,0.85);
+            backdrop-filter: blur(20px);
+            z-index: 1000;
+            border-bottom: 1px solid var(--gray-100);
+        }
+        nav .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 72px;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 800;
+            font-size: 1.25rem;
+            color: var(--gray-900);
+            text-decoration: none;
+        }
+        .logo-icon {
+            width: 36px; height: 36px;
+            background: linear-gradient(135deg, var(--blue), var(--blue-glow));
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.1rem;
+        }
+        .nav-links {
+            display: flex;
+            gap: 32px;
+            align-items: center;
+        }
+        .nav-links a {
+            text-decoration: none;
+            color: var(--gray-600);
+            font-weight: 500;
+            font-size: 0.9rem;
+            transition: color 0.2s;
+        }
+        .nav-links a:hover { color: var(--blue); }
+        .nav-cta {
+            background: var(--blue);
+            color: white !important;
+            padding: 10px 24px;
+            border-radius: 100px;
+            font-weight: 600 !important;
+            transition: all 0.2s !important;
+            box-shadow: var(--shadow-blue);
+        }
+        .nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
+        /* Hero */
+        .hero {
+            padding: 160px 0 100px;
+            position: relative;
+            overflow: hidden;
+        }
+        .hero-bg {
+            position: absolute;
+            top: -200px; right: -200px;
+            width: 800px; height: 800px;
+            background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        .hero-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+            align-items: center;
+        }
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: var(--blue-light);
+            color: var(--blue-dark);
+            padding: 8px 16px;
+            border-radius: 100px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            margin-bottom: 24px;
+        }
+        .badge-dot {
+            width: 8px; height: 8px;
+            background: var(--blue);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+        h1 {
+            font-size: 3.5rem;
+            font-weight: 900;
+            line-height: 1.1;
+            color: var(--gray-900);
+            margin-bottom: 24px;
+            letter-spacing: -0.02em;
+        }
+        h1 .gradient-text {
+            background: linear-gradient(135deg, var(--blue), #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--gray-500);
+            margin-bottom: 40px;
+            max-width: 520px;
+            line-height: 1.7;
+        }
+        .hero-buttons {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 48px;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 16px 32px;
+            border-radius: 100px;
+            font-weight: 600;
+            font-size: 1rem;
+            text-decoration: none;
+            transition: all 0.2s;
+            cursor: pointer;
+            border: none;
+        }
+        .btn-primary {
+            background: var(--blue);
+            color: white;
+            box-shadow: var(--shadow-blue);
+        }
+        .btn-primary:hover {
+            background: var(--blue-dark);
+            transform: translateY(-2px);
+            box-shadow: 0 14px 40px -10px rgb(37 99 235 / 0.4);
+        }
+        .btn-secondary {
+            background: white;
+            color: var(--gray-700);
+            border: 2px solid var(--gray-200);
+        }
+        .btn-secondary:hover {
+            border-color: var(--blue);
+            color: var(--blue);
+        }
+        .hero-stats {
+            display: flex;
+            gap: 40px;
+        }
+        .stat { display: flex; flex-direction: column; }
+        .stat-number { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); }
+        .stat-label { font-size: 0.85rem; color: var(--gray-400); font-weight: 500; }
+        .hero-card {
+            background: white;
+            border-radius: var(--radius-xl);
+            padding: 32px;
+            box-shadow: var(--shadow-lg);
+            border: 1px solid var(--gray-100);
+        }
+        .chat-bubble {
+            background: var(--gray-50);
+            border-radius: var(--radius);
+            padding: 16px 20px;
+            margin-bottom: 12px;
+            font-size: 0.9rem;
+            animation: slideIn 0.6s ease-out forwards;
+            opacity: 0;
+        }
+        .chat-bubble.user {
+            background: var(--blue);
+            color: white;
+            margin-left: 40px;
+            animation-delay: 0.3s;
+        }
+        .chat-bubble.assistant { border-left: 3px solid var(--blue); animation-delay: 0.6s; }
+        .chat-bubble.assistant-2 { border-left: 3px solid #8b5cf6; animation-delay: 0.9s; }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Social Proof */
+        .social-proof {
+            padding: 60px 0;
+            border-top: 1px solid var(--gray-100);
+            border-bottom: 1px solid var(--gray-100);
+        }
+        .social-proof p {
+            text-align: center;
+            color: var(--gray-400);
+            font-size: 0.9rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 32px;
+        }
+        .logos {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 60px;
+            flex-wrap: wrap;
+        }
+        .logo-item {
+            font-weight: 700;
+            font-size: 1.25rem;
+            color: var(--gray-300);
+            transition: color 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .logo-item:hover { color: var(--gray-500); }
+        /* Sections */
+        .features, .pricing, .faq, .cta { padding: 100px 0; }
+        .comparison { padding: 100px 0; background: var(--gray-50); }
+        .testimonials { padding: 100px 0; background: var(--gray-50); }
+        .section-header {
+            text-align: center;
+            max-width: 640px;
+            margin: 0 auto 80px;
+        }
+        .section-tag {
+            display: inline-block;
+            background: var(--blue-light);
+            color: var(--blue-dark);
+            padding: 6px 16px;
+            border-radius: 100px;
+            font-size: 0.8rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 16px;
+        }
+        h2 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            color: var(--gray-900);
+            margin-bottom: 16px;
+            letter-spacing: -0.02em;
+        }
+        .section-header p { color: var(--gray-500); font-size: 1.1rem; }
+        .feature-grid, .testimonial-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 32px;
+        }
+        .feature-card {
+            background: white;
+            border: 1px solid var(--gray-100);
+            border-radius: var(--radius-lg);
+            padding: 40px 32px;
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--blue), #8b5cf6);
+            transform: scaleX(0);
+            transition: transform 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+            border-color: transparent;
+        }
+        .feature-card:hover::before { transform: scaleX(1); }
+        .feature-icon {
+            width: 56px; height: 56px;
+            background: var(--blue-light);
+            border-radius: var(--radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin-bottom: 24px;
+        }
+        .feature-card h3 {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--gray-900);
+            margin-bottom: 12px;
+        }
+        .feature-card p { color: var(--gray-500); font-size: 0.95rem; line-height: 1.7; }
+        /* Table */
+        .table-wrapper {
+            background: white;
+            border-radius: var(--radius-xl);
+            overflow: hidden;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--gray-100);
+        }
+        table { width: 100%; border-collapse: collapse; }
+        th {
+            background: var(--gray-50);
+            padding: 20px 24px;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.85rem;
+            color: var(--gray-500);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            border-bottom: 1px solid var(--gray-100);
+        }
+        td {
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--gray-100);
+            font-size: 0.95rem;
+        }
+        tr:last-child td { border-bottom: none; }
+        .col-feature { font-weight: 600; color: var(--gray-800); }
+        .check { color: #22c55e; font-weight: 700; }
+        .cross { color: var(--gray-300); }
+        .highlight-row { background: linear-gradient(90deg, rgba(37,99,235,0.03), transparent); }
+        .our-tool { color: var(--blue); font-weight: 700; }
+        /* Pricing */
+        .pricing-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 24px;
+            max-width: 960px;
+            margin: 0 auto;
+        }
+        .pricing-card {
+            background: white;
+            border: 2px solid var(--gray-100);
+            border-radius: var(--radius-xl);
+            padding: 40px 32px;
+            position: relative;
+            transition: all 0.3s;
+        }
+        .pricing-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+        .pricing-card.popular {
+            border-color: var(--blue);
+            box-shadow: var(--shadow-blue);
+            transform: scale(1.05);
+        }
+        .popular-badge {
+            position: absolute;
+            top: -12px; left: 50%;
+            transform: translateX(-50%);
+            background: var(--blue);
+            color: white;
+            padding: 6px 20px;
+            border-radius: 100px;
+            font-size: 0.8rem;
+            font-weight: 700;
+        }
+        .pricing-name { font-size: 1.1rem; font-weight: 700; color: var(--gray-700); margin-bottom: 8px; }
+        .pricing-price { font-size: 3rem; font-weight: 900; color: var(--gray-900); margin-bottom: 4px; }
+        .pricing-price span { font-size: 1rem; font-weight: 500; color: var(--gray-400); }
+        .pricing-desc { color: var(--gray-400); font-size: 0.9rem; margin-bottom: 32px; }
+        .pricing-features { list-style: none; margin-bottom: 32px; }
+        .pricing-features li {
+            padding: 8px 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9rem;
+            color: var(--gray-600);
+        }
+        .pricing-features li::before {
+            content: '✓';
+            color: var(--blue);
+            font-weight: 700;
+            width: 20px; height: 20px;
+            background: var(--blue-light);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.7rem;
+            flex-shrink: 0;
+        }
+        .pricing-btn { width: 100%; justify-content: center; }
+        .pricing-card.popular .pricing-btn { background: var(--blue); color: white; box-shadow: var(--shadow-blue); }
+        /* Testimonials */
+        .testimonial-card {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--gray-100);
+        }
+        .stars { color: #fbbf24; font-size: 1.1rem; margin-bottom: 16px; }
+        .testimonial-text { font-size: 1rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; font-style: italic; }
+        .testimonial-author { display: flex; align-items: center; gap: 12px; }
+        .author-avatar {
+            width: 44px; height: 44px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--blue), #8b5cf6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 700;
+            font-size: 1rem;
+        }
+        .author-name { font-weight: 700; color: var(--gray-900); font-size: 0.95rem; }
+        .author-title { font-size: 0.85rem; color: var(--gray-400); }
+        /* FAQ */
+        .faq-list { max-width: 720px; margin: 0 auto; }
+        .faq-item { border-bottom: 1px solid var(--gray-100); }
+        .faq-question {
+            width: 100%;
+            padding: 24px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: none;
+            border: none;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--gray-800);
+            cursor: pointer;
+            text-align: left;
+            transition: color 0.2s;
+        }
+        .faq-question:hover { color: var(--blue); }
+        .faq-icon {
+            width: 28px; height: 28px;
+            background: var(--gray-100);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            transition: all 0.3s;
+            flex-shrink: 0;
+            margin-left: 16px;
+        }
+        .faq-item.active .faq-icon { background: var(--blue); color: white; transform: rotate(45deg); }
+        .faq-answer {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out, padding 0.3s;
+        }
+        .faq-item.active .faq-answer { max-height: 300px; padding-bottom: 24px; }
+        .faq-answer p { color: var(--gray-500); line-height: 1.7; }
+        /* CTA */
+        .cta-box {
+            background: linear-gradient(135deg, var(--blue), #1e40af);
+            border-radius: var(--radius-xl);
+            padding: 80px 40px;
+            text-align: center;
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+        .cta-box::before {
+            content: '';
+            position: absolute;
+            top: -50%; right: -20%;
+            width: 600px; height: 600px;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
+            border-radius: 50%;
+        }
+        .cta-box h2 { color: white; font-size: 2.5rem; margin-bottom: 16px; position: relative; }
+        .cta-box p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 480px; margin: 0 auto 40px; position: relative; }
+        .cta-btn { background: white; color: var(--blue); position: relative; }
+        .cta-btn:hover { background: var(--gray-50); }
+        /* Footer */
+        footer {
+            background: var(--gray-900);
+            color: var(--gray-400);
+            padding: 80px 0 40px;
+        }
+        .footer-grid {
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr 1fr;
+            gap: 60px;
+            margin-bottom: 60px;
+        }
+        .footer-brand p { margin-top: 16px; line-height: 1.7; font-size: 0.9rem; }
+        .footer-logo { color: white; font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
+        .footer-links h4 { color: white; font-size: 0.9rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; }
+        .footer-links a { display: block; color: var(--gray-400); text-decoration: none; padding: 6px 0; font-size: 0.9rem; transition: color 0.2s; }
+        .footer-links a:hover { color: white; }
+        .footer-bottom {
+            border-top: 1px solid var(--gray-800);
+            padding-top: 32px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.85rem;
+        }
+        .footer-social { display: flex; gap: 16px; }
+        .footer-social a {
+            width: 36px; height: 36px;
+            background: var(--gray-800);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--gray-400);
+            text-decoration: none;
+            transition: all 0.2s;
+        }
+        .footer-social a:hover { background: var(--blue); color: white; }
+        /* Mobile */
+        @media (max-width: 900px) {
+            .hero-grid, .feature-grid, .pricing-grid, .testimonial-grid, .footer-grid { grid-template-columns: 1fr; }
+            h1 { font-size: 2.5rem; }
+            h2 { font-size: 2rem; }
+            .hero { padding: 120px 0 60px; }
+            .pricing-card.popular { transform: none; }
+            .nav-links { display: none; }
+            .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
+        }
+    </style>
+</head>
+<body>
+<nav>
+    <div class="container">
+        <a href="#" class="logo">
+            <div class="logo-icon">💰</div>
+            AMD Finance LLM
+        </a>
+        <div class="nav-links">
+            <a href="#features">Features</a>
+            <a href="#pricing">Pricing</a>
+            <a href="#faq">FAQ</a>
+            <a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/amd-finance-llm" class="nav-cta" target="_blank">Launch App →</a>
+        </div>
+    </div>
+</nav>
+<section class="hero">
+    <div class="hero-bg"></div>
+    <div class="container">
+        <div class="hero-grid">
+            <div>
+                <div class="badge"><span class="badge-dot"></span>Powered by AMD Instinct MI300X</div>
+                <h1>AI Financial Intelligence.<br><span class="gradient-text">Trained on ROCm.</span></h1>
+                <p class="hero-subtitle">Domain-specific LLM fine-tuned on 500K financial instructions. Get instant, accurate answers on investing, economics, accounting, and market analysis.</p>
+                <div class="hero-buttons">
+                    <a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/amd-finance-llm" class="btn btn-primary" target="_blank">Try It Free →</a>
+                    <a href="https://huggingface.co/shah-shazid-askary/amd-finance-llm" class="btn btn-secondary" target="_blank">View on Hugging Face</a>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat"><span class="stat-number">500K+</span><span class="stat-label">Training Samples</span></div>
+                    <div class="stat"><span class="stat-number">7.6B</span><span class="stat-label">Parameters</span></div>
+                    <div class="stat"><span class="stat-number">&lt;100ms</span><span class="stat-label">Response Time</span></div>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="hero-card">
+                    <div class="chat-bubble user">What's the P/E ratio and how do investors use it?</div>
+                    <div class="chat-bubble assistant"><strong>P/E (Price-to-Earnings)</strong> compares a company's stock price to its earnings per share. A high P/E suggests investors expect future growth; a low P/E may indicate undervaluation or risk...</div>
+                    <div class="chat-bubble assistant-2">💡 <strong>Pro tip:</strong> Compare P/E against industry peers and historical averages for context.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="social-proof">
+    <div class="container">
+        <p>Built with industry-leading technology</p>
+        <div class="logos">
+            <div class="logo-item">🔷 AMD</div>
+            <div class="logo-item">🤗 Hugging Face</div>
+            <div class="logo-item">⚡ PyTorch</div>
+            <div class="logo-item">🚀 vLLM</div>
+            <div class="logo-item">🧠 Qwen</div>
+            <div class="logo-item">📊 ROCm</div>
+        </div>
+    </div>
+</section>
+<section class="features" id="features">
+    <div class="container">
+        <div class="section-header">
+            <div class="section-tag">Features</div>
+            <h2>Everything you need for financial analysis</h2>
+            <p>Trained on diverse financial datasets and optimized for AMD hardware, our model delivers accurate, context-aware financial intelligence.</p>
+        </div>
+        <div class="feature-grid">
+            <div class="feature-card">
+                <div class="feature-icon">⚡</div>
+                <h3>Lightning Fast Inference</h3>
+                <p>Powered by vLLM on AMD Instinct MI300X with Flash Attention 2. Sub-100ms responses for real-time financial decision making.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🎯</div>
+                <h3>Domain-Specialized Accuracy</h3>
+                <p>Fine-tuned on 500K financial instruction examples covering investing, monetary policy, accounting, and risk analysis.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔒</div>
+                <h3>Private & Secure</h3>
+                <p>Self-host on AMD Developer Cloud or your own infrastructure. Your financial data never leaves your control.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🌐</div>
+                <h3>Open Source & Transparent</h3>
+                <p>Full training code, datasets, and weights available on Hugging Face. Apache 2.0 licensed. No black boxes.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">📈</div>
+                <h3>Multi-Modal Reasoning</h3>
+                <p>Handles complex numerical reasoning, financial calculations, comparative analysis, and scenario modeling.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔧</div>
+                <h3>Easy Integration</h3>
+                <p>OpenAI-compatible API via vLLM. Drop-in replacement for GPT-4 in your existing financial tools and workflows.</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="comparison" id="comparison">
+    <div class="container">
+        <div class="section-header">
+            <div class="section-tag">Comparison</div>
+            <h2>How we stack up against the competition</h2>
+            <p>See why AMD Finance LLM is the smart choice for financial AI.</p>
+        </div>
+        <div class="table-wrapper">
+            <table>
+                <thead><tr><th>Feature</th><th>AMD Finance LLM</th><th>Generic GPT-4</th><th>BloombergGPT</th><th>FinBERT</th></tr></thead>
+                <tbody>
+                    <tr class="highlight-row"><td class="col-feature">Domain-Specific Training</td><td class="our-tool">✓ 500K finance instructions</td><td class="cross">✗ General purpose</td><td class="check">✓ Finance focused</td><td class="check">✓ Sentiment only</td></tr>
+                    <tr><td class="col-feature">Open Source</td><td class="our-tool">✓ Apache 2.0</td><td class="cross">✗ Closed</td><td class="cross">✗ Closed</td><td class="check">✓ Open</td></tr>
+                    <tr><td class="col-feature">Self-Hostable</td><td class="our-tool">✓ On-prem / cloud</td><td class="cross">✗ API only</td><td class="cross">✗ Enterprise only</td><td class="check">✓ Yes</td></tr>
+                    <tr class="highlight-row"><td class="col-feature">AMD Hardware Optimized</td><td class="our-tool">✓ Native ROCm support</td><td class="cross">✗ CUDA only</td><td class="cross">✗ NVIDIA only</td><td class="cross">✗ CPU/GPU generic</td></tr>
+                    <tr><td class="col-feature">Fine-Tunable</td><td class="our-tool">✓ Full weights + code</td><td class="cross">✗ No</td><td class="cross">✗ No</td><td class="check">✓ Limited</td></tr>
+                    <tr><td class="col-feature">Inference Cost</td><td class="our-tool">✓ Free self-host</td><td class="cross">$$$ Per token</td><td class="cross">$$$ Enterprise</td><td class="check">✓ Free</td></tr>
+                    <tr class="highlight-row"><td class="col-feature">Conversational QA</td><td class="our-tool">✓ Full chat + reasoning</td><td class="check">✓ Yes</td><td class="check">✓ Yes</td><td class="cross">✗ Classification only</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</section>
+<section class="pricing" id="pricing">
+    <div class="container">
+        <div class="section-header">
+            <div class="section-tag">Pricing</div>
+            <h2>Simple, transparent pricing</h2>
+            <p>Start free, scale as you grow. No hidden fees, no surprises.</p>
+        </div>
+        <div class="pricing-grid">
+            <div class="pricing-card">
+                <div class="pricing-name">Community</div>
+                <div class="pricing-price">$0<span>/month</span></div>
+                <div class="pricing-desc">Perfect for research and personal use</div>
+                <ul class="pricing-features">
+                    <li>Hugging Face Space access</li>
+                    <li>Shared GPU inference</li>
+                    <li>Community support</li>
+                    <li>Basic rate limits</li>
+                </ul>
+                <a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/amd-finance-llm" class="btn btn-secondary pricing-btn" target="_blank">Get Started</a>
+            </div>
+            <div class="pricing-card popular">
+                <div class="popular-badge">Most Popular</div>
+                <div class="pricing-name">Developer</div>
+                <div class="pricing-price">$49<span>/month</span></div>
+                <div class="pricing-desc">For builders and small teams</div>
+                <ul class="pricing-features">
+                    <li>Dedicated GPU instance</li>
+                    <li>vLLM API endpoint</li>
+                    <li>10K requests/day</li>
+                    <li>Priority support</li>
+                    <li>Custom model weights</li>
+                </ul>
+                <a href="#" class="btn btn-primary pricing-btn">Start Free Trial</a>
+            </div>
+            <div class="pricing-card">
+                <div class="pricing-name">Enterprise</div>
+                <div class="pricing-price">Custom</div>
+                <div class="pricing-desc">For financial institutions</div>
+                <ul class="pricing-features">
+                    <li>Multi-GPU MI300X cluster</li>
+                    <li>Private deployment</li>
+                    <li>Unlimited requests</li>
+                    <li>24/7 dedicated support</li>
+                    <li>Custom fine-tuning</li>
+                    <li>SLA guarantee</li>
+                </ul>
+                <a href="#" class="btn btn-secondary pricing-btn">Contact Sales</a>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="testimonials">
+    <div class="container">
+        <div class="section-header">
+            <div class="section-tag">Testimonials</div>
+            <h2>Loved by finance professionals</h2>
+            <p>See what early users are saying about AMD Finance LLM.</p>
+        </div>
+        <div class="testimonial-grid">
+            <div class="testimonial-card">
+                <div class="stars">★★★★★</div>
+                <p class="testimonial-text">"The domain-specific training really shows. When I ask about bond yield curves or Fed policy, the answers are precise and contextual. Beats generic LLMs for finance work."</p>
+                <div class="testimonial-author"><div class="author-avatar">MK</div><div><div class="author-name">Michael Chen</div><div class="author-title">Portfolio Manager, Vertex Capital</div></div></div>
+            </div>
+            <div class="testimonial-card">
+                <div class="stars">★★★★★</div>
+                <p class="testimonial-text">"Running this on our AMD MI300X cluster is a game changer. The vLLM integration gives us GPT-4 level throughput at a fraction of the cost. Fully self-hosted too."</p>
+                <div class="testimonial-author"><div class="author-avatar">SR</div><div><div class="author-name">Sarah Rodriguez</div><div class="author-title">CTO, Fintech Solutions Inc.</div></div></div>
+            </div>
+            <div class="testimonial-card">
+                <div class="stars">★★★★★</div>
+                <p class="testimonial-text">"We compared this against BloombergGPT for our risk analysis pipeline. AMD Finance LLM matched accuracy while being open source and customizable. Hugely valuable."</p>
+                <div class="testimonial-author"><div class="author-avatar">DJ</div><div><div class="author-name">David Park</div><div class="author-title">Head of Quant, Asia Markets Group</div></div></div>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="faq" id="faq">
+    <div class="container">
+        <div class="section-header">
+            <div class="section-tag">FAQ</div>
+            <h2>Frequently asked questions</h2>
+            <p>Everything you need to know about AMD Finance LLM.</p>
+        </div>
+        <div class="faq-list">
+            <div class="faq-item active">
+                <button class="faq-question">What makes AMD Finance LLM different from ChatGPT or Claude?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>AMD Finance LLM is specifically fine-tuned on 500,000 financial instruction examples covering investing, monetary policy, accounting, and market analysis. Unlike general-purpose models, it understands financial terminology, regulatory frameworks, and numerical reasoning at a deeper level. Plus it's fully open source and optimized for AMD hardware.</p></div>
+            </div>
+            <div class="faq-item">
+                <button class="faq-question">Can I self-host this on my own servers?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>Absolutely. The entire stack — model weights, training code, Docker configuration, and serving scripts — is available on Hugging Face under Apache 2.0 license. You can deploy on AMD Developer Cloud MI300X instances, on-premise ROCm servers, or even consumer AMD GPUs with quantized versions.</p></div>
+            </div>
+            <div class="faq-item">
+                <button class="faq-question">What hardware do I need for self-hosting?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>For full 7B parameter inference with vLLM, we recommend at least one AMD Instinct MI300X (192GB HBM3) or equivalent. For development/testing, the model can run on a single MI210/MI250 with gradient checkpointing. Quantized versions for 8GB VRAM are coming soon.</p></div>
+            </div>
+            <div class="faq-item">
+                <button class="faq-question">Is the model suitable for production financial decisions?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>While AMD Finance LLM demonstrates strong financial reasoning, it should be used as an analytical assistant alongside human expertise and verified data sources. Never rely solely on AI for investment, trading, or regulatory compliance decisions. We provide the tools — you provide the judgment.</p></div>
+            </div>
+            <div class="faq-item">
+                <button class="faq-question">Can I fine-tune the model on my own financial data?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>Yes! The training script (train.py) is included in the repository and uses standard TRL SFTTrainer. You can fine-tune on proprietary datasets, add company-specific knowledge, or adapt for regional regulations. The Docker container includes all dependencies for ROCm training.</p></div>
+            </div>
+            <div class="faq-item">
+                <button class="faq-question">How do I connect the Gradio UI to my own vLLM server?<span class="faq-icon">+</span></button>
+                <div class="faq-answer"><p>In the Space settings, enable "Use External API / vLLM" and enter your server URL and API key. The UI supports any OpenAI-compatible endpoint including vLLM, TGI, or cloud providers. Test the connection with the built-in "Test Connection" button before chatting.</p></div>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="cta">
+    <div class="container">
+        <div class="cta-box">
+            <h2>Ready to upgrade your financial analysis?</h2>
+            <p>Join thousands of finance professionals using AMD Finance LLM for smarter, faster decision making.</p>
+            <a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/amd-finance-llm" class="btn cta-btn" target="_blank">Launch the App — It's Free →</a>
+        </div>
+    </div>
+</section>
+<footer>
+    <div class="container">
+        <div class="footer-grid">
+            <div class="footer-brand">
+                <div class="footer-logo"><div class="logo-icon">💰</div>AMD Finance LLM</div>
+                <p>Domain-specific AI for finance, built on AMD ROCm and open source. Fine-tuned on 500K financial instructions for accurate, contextual financial intelligence.</p>
+            </div>
+            <div class="footer-links">
+                <h4>Product</h4>
+                <a href="#features">Features</a>
+                <a href="#pricing">Pricing</a>
+                <a href="#comparison">Comparison</a>
+                <a href="https://huggingface.co/shah-shazid-askary/amd-finance-llm">Model Card</a>
+            </div>
+            <div class="footer-links">
+                <h4>Resources</h4>
+                <a href="https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/amd-finance-llm">Live Demo</a>
+                <a href="#">GitHub (soon)</a>
+                <a href="https://huggingface.co/datasets/Josephgflowers/Finance-Instruct-500k">Dataset</a>
+                <a href="https://arxiv.org/abs/2503.16252">Fin-R1 Paper</a>
+            </div>
+            <div class="footer-links">
+                <h4>Company</h4>
+                <a href="#">About</a>
+                <a href="#">Blog</a>
+                <a href="#faq">FAQ</a>
+                <a href="#">Contact</a>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <span>© 2024 AMD Finance LLM. Built for the lablab.ai AMD Developer Hackathon.</span>
+            <div class="footer-social">
+                <a href="https://huggingface.co/shah-shazid-askary/amd-finance-llm" target="_blank" title="Hugging Face">🤗</a>
+                <a href="#" title="GitHub">⚡</a>
+                <a href="#" title="Twitter">𝕏</a>
+            </div>
+        </div>
+    </div>
+</footer>
+<script>
+    // FAQ Accordion
+    document.querySelectorAll('.faq-question').forEach(button => {
+        button.addEventListener('click', () => {
+            const item = button.parentElement;
+            const wasActive = item.classList.contains('active');
+            document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
+            if (!wasActive) item.classList.add('active');
+        });
+    });
+    // Smooth scroll
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    });
+    // Navbar shadow on scroll
+    window.addEventListener('scroll', () => {
+        const nav = document.querySelector('nav');
+        if (window.scrollY > 50) {
+            nav.style.boxShadow = '0 4px 20px rgba(0,0,0,0.05)';
+        } else {
+            nav.style.boxShadow = 'none';
+        }
+    });
+</script>
+</body>
+</html>