Upload 31 files

backend/gemini.py

@@ -0,0 +1,85 @@
+import backtrader as bt
+import yfinance as yf
+import re
+import google.generativeai as genai
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+from datetime import datetime
+
+
+# Configure the Generative AI model
+MODEL_ID = "models/gemini-2.0-flash"
+API_KEY = "ENTER API_KEY HERE"
+genai.configure(api_key=API_KEY)
+model = genai.GenerativeModel(MODEL_ID)
+
+
+
+
+# ====== 1. Get Strategy Code from Gemini ======
+def get_strategy_code_from_gemini(user_input: str):
+   prompt = f"""
+You are a financial assistant that writes Backtrader strategies.
+
+
+Take this user request: "{user_input}"
+Generate a complete Backtrader strategy (Python) using bt.Strategy with these requirements:
+1. Initial capital is $100
+2. Only whole share orders (no fractional shares)
+3. Must include both buy and sell logic
+4. Strategy should have at least one indicator (like SMA, RSI, etc.)
+5. Include proper order management (check for pending orders)
+6. Include logging of trades
+7. Output only valid Python code (no explanation or markdown formatting)
+"""
+   response = model.generate_content(prompt)
+   strategy_code = response.text.strip()
+   strategy_code = strategy_code.replace("```python", "").replace("```", "")
+   return strategy_code
+
+
+# ====== 2. Convert Gemini Output into a Strategy Class ======
+def create_strategy_from_code(code_string: str):
+   local_scope = {}
+   try:
+       exec(code_string, globals(), local_scope)
+       for obj in local_scope.values():
+           if isinstance(obj, type) and issubclass(obj, bt.Strategy):
+               return obj
+       raise ValueError("No valid strategy class found in Gemini output.")
+   except Exception as e:
+       raise ValueError(f"Error creating strategy from code: {str(e)}")
+
+
+# ====== 3. Remove extraneous main execution block ======
+def extract_strategy_only(code_str: str) -> str:
+   main_block_start = code_str.find("if __name__ == '__main__':")
+   return code_str[:main_block_start].strip() if main_block_start != -1 else code_str.strip()
+
+
+# ====== 4. Main Workflow ======
+def full_workflow(user_input: str):
+   # Extract ticker and dates
+   ticker_match = re.search(r'\b([A-Z]{2,5})\b', user_input)
+   ticker = ticker_match.group(1) if ticker_match else "AAPL"
+
+
+   dates = re.findall(r'(\d{4}-\d{2}-\d{2})', user_input)
+   start_date = dates[0] if len(dates) > 0 else '2022-01-01'
+   end_date = dates[1] if len(dates) > 1 else '2023-01-01'
+
+
+   print("\n🤖 Generating strategy...")
+   strategy_code = get_strategy_code_from_gemini(user_input)
+
+
+   print(extract_strategy_only(strategy_code))
+
+
+# ====== 7. Example Execution ======
+if __name__ == "__main__":
+   user_input = "Create RSI strategy for MSFT, buy below 30 sell above 70, from 2021-01-01 to 2022-12-31"
+   full_workflow(user_input)
+
+generate_answer = get_strategy_code_from_gemini

backend/server.py

@@ -0,0 +1,30 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from gemini import generate_answer 
+
+app = FastAPI()
+
+# ✅ Allow requests from your frontend URL
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[
+        "https://fintrack-flax.vercel.app",  # Vercel deployment URL
+        "http://localhost:5173",  # Vite default port
+        "http://127.0.0.1:5173",   # Some systems resolve as 127.0.0.1 instead
+    ],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class StrategyRequest(BaseModel):
+    user_input: str
+
+@app.post("/generate-strategy")
+async def generate_strategy(request: StrategyRequest):
+    try:
+        response = generate_answer(request.user_input)
+        return {"strategy_code": response}
+    except Exception as e:
+        return {"error": str(e)}

src/App.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect, useRef } from 'react'
+import { useAuth0 } from '@auth0/auth0-react'
+import { useNavigate } from 'react-router-dom'
+import ChatInput from './components/chatinput'
+import MessageBubble from './components/MessageBubble'
+import './styles/App.css'
+
+type Message = { role: 'user' | 'bot'; text: string }
+type Session = { id: number; title: string; messages: Message[] }
+
+function App() {
+  const { loginWithRedirect, logout, isAuthenticated } = useAuth0()
+  const navigate = useNavigate()
+
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [showPrompt, setShowPrompt] = useState(true)
+  const [sessions, setSessions] = useState<Session[]>([
+    { id: 1, title: 'Session 1', messages: [] }
+  ])
+  const [activeSessionId, setActiveSessionId] = useState(1)
+  const activeSession = sessions.find(s => s.id === activeSessionId) || sessions[0]
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const handleSend = async (text: string) => {
+    const userMessage: Message = { role: 'user', text }
+    setSessions(prev =>
+      prev.map(session =>
+        session.id === activeSessionId
+          ? { ...session, messages: [...session.messages, userMessage] }
+          : session
+      )
+    )
+    setShowPrompt(false)
+
+    try {
+      const res = await fetch('https://fintrack-backend-8dji.onrender.com/generate-strategy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_input: text })
+      });
+
+      const data = await res.json()
+      const botText = data.strategy_code || data.error || 'Error: Empty response.'
+
+      const botMessage: Message = { role: 'bot', text: botText }
+      setSessions(prev =>
+        prev.map(session =>
+          session.id === activeSessionId
+            ? { ...session, messages: [...session.messages, botMessage] }
+            : session
+        )
+      )
+    } catch (err) {
+      const errorMessage: Message = { role: 'bot', text: '⚠️ Error: Failed to connect to server.' }
+      setSessions(prev =>
+        prev.map(session =>
+          session.id === activeSessionId
+            ? { ...session, messages: [...session.messages, errorMessage] }
+            : session
+        )
+      )
+    }
+  }
+
+  const handleNewChat = () => {
+    const newId = sessions.length + 1
+    const newSession: Session = { id: newId, title: `Session ${newId}`, messages: [] }
+    setSessions(prev => [newSession, ...prev])
+    setActiveSessionId(newId)
+    setShowPrompt(true)
+  }
+
+  const suggestions = [
+    'Enter a stock trading strategy...',
+    'Backtest a moving average crossover...',
+    'Analyze S&P 500 signals...',
+    'Try a momentum-based portfolio...',
+    'Run a mean reversion strategy...',
+    'Backtest Bollinger Band breakouts...'
+  ]
+  const [currentSuggestion, setCurrentSuggestion] = useState(suggestions[0])
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSuggestion(prev => {
+        let next = prev
+        while (next === prev) {
+          next = suggestions[Math.floor(Math.random() * suggestions.length)]
+        }
+        return next
+      })
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (videoRef.current) {
+        if (document.visibilityState === 'visible') {
+          videoRef.current.play().catch(() => {})
+        } else {
+          videoRef.current.pause()
+        }
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibility)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility)
+    }
+  }, [])
+
+  return (
+    <>
+      <video
+        ref={videoRef}
+        className="background-video"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src="https://i.imgur.com/RCoLmZ9.mp4"
+      />
+
+      <div className="app-container">
+        {sidebarOpen && (
+          <aside className="sidebar">
+            <div className="sidebar-header">
+              <img
+                src="/image.png"
+                alt="Collapse Sidebar"
+                className="sidebar-icon"
+                onClick={() => setSidebarOpen(false)}
+              />
+              <h1 className="site-title">FinTrack</h1>
+              <img
+                src="/newchat.png"
+                alt="New Chat"
+                className="sidebar-icon"
+                onClick={handleNewChat}
+              />
+            </div>
+
+            <div className="history-list">
+              {sessions.map(session => (
+                <div
+                  key={session.id}
+                  className={`history-item ${session.id === activeSessionId ? 'active' : ''}`}
+                  onClick={() => setActiveSessionId(session.id)}
+                >
+                  {session.title}
+                </div>
+              ))}
+            </div>
+          </aside>
+        )}
+
+        {!sidebarOpen && (
+          <img
+            src="/opensidebar.png"
+            alt="Open Sidebar"
+            className="open-sidebar-button"
+            onClick={() => setSidebarOpen(true)}
+          />
+        )}
+
+        <main className="main-panel">
+          <div className="top-ui-wrapper">
+            <div className="top-navbar">
+              <img
+                src="/Cropped_Image.png"
+                className="nav-logo"
+                alt="Logo"
+                onClick={() => navigate('/')}
+              />
+              <span className="nav-link" onClick={() => navigate('/about')}>About</span>
+              <span className="nav-link" onClick={() => navigate('/about#founders')}>Founders</span>
+            </div>
+
+            <div className="auth-buttons">
+              {!isAuthenticated ? (
+                <>
+                  <span className="auth-link" onClick={() => loginWithRedirect()}>Login</span>
+                  <span
+                    className="auth-link"
+                    onClick={() =>
+                      loginWithRedirect({ authorizationParams: { screen_hint: 'signup' } })
+                    }
+                  >
+                    Sign Up
+                  </span>
+                </>
+              ) : (
+                <span className="auth-link" onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
+                  Log Out
+                </span>
+              )}
+            </div>
+          </div>
+
+          {showPrompt && (
+            <div className="prompt-banner">
+              <h2 className="prompt-text fade-in">How can I help you?</h2>
+              <p className="suggestion-text">{currentSuggestion}</p>
+            </div>
+          )}
+
+          <div className="chat-area">
+            {activeSession.messages.map((msg, i) => (
+              <MessageBubble key={i} role={msg.role} text={msg.text} />
+            ))}
+          </div>
+
+          <div className="chat-box-wrapper">
+            <ChatInput onSend={handleSend} />
+          </div>
+        </main>
+      </div>
+    </>
+  )
+}
+
+export default App

src/TextToCodeModel(1).py

@@ -0,0 +1,111 @@
+from datasets import load_dataset
+from transformers import AutoTokenizer, AutoModelForCausalLM, TrainingArguments, TextStreamer, DataCollatorForLanguageModeling
+from peft import LoraConfig, get_peft_model, TaskType
+from trl import SFTTrainer
+import torch
+
+
+# Clear CUDA cache before loading models
+torch.cuda.empty_cache()
+
+device = torch.device("cuda")
+
+dataset = load_dataset("koutch/stackoverflow_python")
+
+dataset = dataset["train"]
+
+def format_example(example):
+    return {
+        "text": f"### Question:\n{example['question_body'].strip()}\n\n### Answer:\n{example['answer_body'].strip()}"
+    }
+
+dataset = dataset.map(format_example)
+dataset = dataset.filter(lambda x: x["text"] is not None and len(x["text"]) > 0)
+dataset = dataset.shuffle(seed=42).select(range(30_000))
+
+tokenizer = AutoTokenizer.from_pretrained("deepseek-ai/DeepSeek-R1-Distill-Qwen-7B")
+
+tokenizer.add_special_tokens({'additional_special_tokens': ["<|user|>", "<|assistant|>"]})
+
+data_collator = DataCollatorForLanguageModeling(
+    tokenizer=tokenizer,
+    mlm=False  # Causal LM, so no masked LM
+)
+
+model = AutoModelForCausalLM.from_pretrained("deepseek-ai/DeepSeek-R1-Distill-Qwen-7B",device_map="cuda",torch_dtype=torch.float16)
+
+model.resize_token_embeddings(len(tokenizer))
+
+lora_config = LoraConfig(
+    r=8,
+    lora_alpha=32,
+    target_modules=["q_proj", "v_proj"],
+    lora_dropout=0.1,
+    bias="none",
+    task_type=TaskType.CAUSAL_LM
+)
+
+model = get_peft_model(model, lora_config)
+
+def tokenize_function(example):
+    result = tokenizer(
+        example["text"],
+        truncation=True,
+        padding="max_length",
+        max_length=1024,
+    )
+    result["text"] = example["text"]  # Keep original text
+    return result
+
+tokenized_dataset = dataset.map(tokenize_function, batched=True)
+
+# Step 3: Training arguments
+training_args = TrainingArguments(
+    output_dir="/home/deshpa70",
+    per_device_train_batch_size=2,
+    gradient_accumulation_steps=2,
+    num_train_epochs=1,
+    logging_dir="./logs",
+    save_total_limit=2,
+    logging_steps=250,
+    save_steps=500,
+    learning_rate=3e-4,
+    bf16=True,
+    optim="paged_adamw_8bit",
+    report_to="none"
+)
+
+trainer = SFTTrainer(
+    peft_config=lora_config,
+    model=model,
+    train_dataset=tokenized_dataset,
+    args=training_args,
+    data_collator=data_collator
+)
+
+trainer.train()
+model.eval()
+
+while True:
+        prompt = input("\n Enter your programming question (or type 'exit' to quit):\n> ")
+        if prompt.lower() == 'exit':
+            break
+
+        formatted_prompt = f"<|user|>\n{prompt}\n<|assistant|>\n"
+        inputs = tokenizer(formatted_prompt, return_tensors="pt").to(device)
+        streamer = TextStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+
+
+        output = model.generate(
+            **inputs,
+            max_new_tokens=50000,
+            do_sample=True,
+            top_p=0.9,
+            temperature=0.8,
+            repetition_penalty=1.1,
+            streamer=streamer
+        )
+
+
+# Clear CUDA cache before loading models
+torch.cuda.empty_cache()

src/components/AboutPage.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import '../styles/AboutPage.css'
+
+function AboutPage() {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const hash = window.location.hash
+    if (hash === '#founders') {
+      const el = document.getElementById('founders-section')
+      el?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    const handleVisibility = () => {
+      if (videoRef.current) {
+        if (document.visibilityState === 'visible') {
+          videoRef.current.play().catch(() => {})
+        } else {
+          videoRef.current.pause()
+        }
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibility)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility)
+    }
+  }, [])
+
+  return (
+    <>
+      <video
+        ref={videoRef}
+        className="about-video"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src="https://i.imgur.com/RCoLmZ9.mp4"
+      />
+
+      {/* 🔼 Top navbar centered like on home screen */}
+      <div className="about-navbar-wrapper">
+        <div className="top-navbar">
+          <img
+            src="/Cropped_Image.png"
+            className="nav-logo"
+            alt="Logo"
+            onClick={() => navigate('/')}
+          />
+          <span className="nav-link" onClick={() => navigate('/about')}>About</span>
+          <span className="nav-link" onClick={() => navigate('/about#founders')}>Founders</span>
+        </div>
+      </div>
+
+      <div className="about-page-scroll">
+        <section className="about-section" id="about-section">
+          <h1>About <span className="highlight">FinTrack</span></h1>
+          <p>
+            FinTrack is an intuitive, natural-language–powered stock strategy builder.
+            Just describe your idea — whether it’s backtesting a moving average crossover,
+            analyzing tech stocks, or deploying a momentum strategy — and our AI handles the rest.
+          </p>
+        </section>
+
+        <section className="founders-section" id="founders-section">
+          <h2>Founders</h2>
+          <p>Meet the team behind FinTrack:</p>
+          <ul>
+            <li><a href="https://www.linkedin.com/in/vishruthg/" target="_blank" rel="noopener noreferrer"><strong>Vishruth</strong></a> – Frontend</li>
+            <li><a href="https://www.linkedin.com/in/ronilmitra/" target="_blank" rel="noopener noreferrer"><strong>Ronil</strong></a> – Frontend</li>
+            <li><a href="https://www.linkedin.com/in/kalyan-archakam/" target="_blank" rel="noopener noreferrer"><strong>Kalyan</strong></a> – Backend</li>
+            <li><a href="https://www.linkedin.com/in/sudhanva-deshpande-81a94a280/" target="_blank" rel="noopener noreferrer"><strong>Sudhanva</strong></a> – Backend</li>
+            <li><a href="https://www.linkedin.com/in/navan-dendukuri-64a03b360/" target="_blank" rel="noopener noreferrer"><strong>Navan</strong></a> – Backend</li>
+          </ul>
+        </section>
+      </div>
+    </>
+  )
+}
+
+export default AboutPage

src/components/History.tsx

@@ -0,0 +1,14 @@
+function History() {
+  return (
+    <aside className="history-panel">
+      <h2>History</h2>
+      <ul>
+        <li className="history-item">Session 1</li>
+        <li className="history-item">Session 2</li>
+        <li className="history-item">Session 3</li>
+      </ul>
+    </aside>
+  );
+}
+
+export default History;

src/components/MessageBubble.tsx

@@ -0,0 +1,19 @@
+import '../styles/MessageBubble.css'
+
+function MessageBubble({ role, text }: { role: 'user' | 'bot'; text: string }) {
+  const isCode = text.includes('\n') && role === 'bot'
+
+  return (
+    <div className={`message-bubble ${role}`}>
+      {isCode ? (
+        <pre className="code-block">
+          <code>{text}</code>
+        </pre>
+      ) : (
+        <p>{text}</p>
+      )}
+    </div>
+  )
+}
+
+export default MessageBubble

src/components/Metrics.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import '../styles/Metrics.css'
+
+function Metrics() {
+  const [tab, setTab] = useState('code')
+  return (
+    <div className="metrics-panel">
+      <div className="tab-buttons">
+        <button className={tab === 'code' ? 'active' : ''} onClick={() => setTab('code')}>Code</button>
+        <button className={tab === 'chart' ? 'active' : ''} onClick={() => setTab('chart')}>Chart</button>
+        <button className={tab === 'metrics' ? 'active' : ''} onClick={() => setTab('metrics')}>Metrics</button>
+      </div>
+      <div className="tab-content">
+        {tab === 'code' && <pre>{`function backtest() {
+  // strategy here
+}`}</pre>}
+        {tab === 'chart' && <p>[Chart output goes here]</p>}
+        {tab === 'metrics' && (
+          <ul>
+            <li>Return: 10%</li>
+            <li>Sharpe: 1.4</li>
+            <li>Max Drawdown: 5%</li>
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Metrics

src/components/Spinner.tsx

@@ -0,0 +1,7 @@
+import '../styles/Spinner.css'
+
+function Spinner() {
+  return <div className="spinner"></div>
+}
+
+export default Spinner

src/components/chatinput.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import '../styles/chatinput.css' // Make sure file is named exactly like this
+
+function ChatInput({ onSend }: { onSend: (msg: string) => void }) {
+  const [input, setInput] = useState('')
+
+  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && input.trim()) {
+      onSend(input)
+      setInput('')
+    }
+  }
+
+  return (
+    <div className="chat-input-wrapper">
+      <input
+        className="chat-input"
+        type="text"
+        placeholder="Ask something..."
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKey}
+      />
+      <button className="send-button" onClick={handleSend}>
+        Send
+      </button>
+    </div>
+  )
+
+  function handleSend() {
+    if (input.trim()) {
+      onSend(input)
+      setInput('')
+    }
+  }
+}
+
+export default ChatInput

src/main.tsx

@@ -0,0 +1,26 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { Auth0Provider } from '@auth0/auth0-react'
+import './styles/index.css'
+import App from './App'
+import AboutPage from './components/AboutPage'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Auth0Provider
+      domain="fintrack-dev.us.auth0.com"
+      clientId="tM4JJsEXpaSaYU84C7aXxlp0bWhXcwyM"
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+      }}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Routes>
+      </BrowserRouter>
+    </Auth0Provider>
+  </StrictMode>
+)

src/styles/AboutPage.css

@@ -0,0 +1,102 @@
+.about-video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+    z-index: 0;
+    opacity: 0.15;
+    filter: blur(5px) brightness(0.9);
+    pointer-events: none;
+  }
+  
+  /* 🔼 Centered NAVBAR on AboutPage */
+  .about-navbar-wrapper {
+    position: fixed;
+    top: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5;
+  }
+  
+  .top-navbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+  }
+  
+  .nav-logo {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+  }
+  
+  .nav-link {
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    color: var(--color-text);
+  }
+  
+  /* 🔁 Scroll layout */
+  .about-page-scroll {
+    position: relative;
+    z-index: 2;
+    height: 100vh;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
+  
+  .about-section,
+  .founders-section {
+    scroll-snap-align: start;
+    min-height: 100vh;
+    padding: 5rem 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+    color: var(--color-text);
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+  
+  .about-section h1,
+  .founders-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .highlight {
+    background: linear-gradient(to right, #38d9a9, #66ffe3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 800;
+  }
+  
+  .about-section p,
+  .founders-section p,
+  .founders-section ul {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: var(--color-muted);
+    max-width: 700px;
+    margin: 0 auto;
+  }
+  
+  .founders-section ul {
+    list-style: none;
+    padding-left: 0;
+    margin-top: 1.5rem;
+  }
+  
+  .founders-section li {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }

src/styles/App.css

@@ -0,0 +1,276 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
+
+:root {
+  --color-bg: #0a192f;
+  --color-panel: rgba(0, 0, 0, 0.6);
+  --color-accent: #38d9a9;
+  --color-text: #ffffff;
+  --color-muted: #9ca3af;
+  --color-error: #ef4444;
+  font-family: 'Poppins', 'Segoe UI', sans-serif;
+}
+
+/* Reset */
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 16px;
+  line-height: 1.5;
+  font-family: 'Poppins', 'Segoe UI', sans-serif;
+  overflow: hidden;
+}
+
+/* 🎥 Background video */
+.background-video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  z-index: 0;
+  opacity: 0.15;
+  filter: blur(5px) brightness(0.9);
+  pointer-events: none;
+}
+
+/* Layout */
+.app-container {
+  display: flex;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
+  background-color: transparent;
+  color: var(--color-text);
+}
+
+/* Sidebar */
+.sidebar {
+  width: 280px;
+  height: 100vh;
+  padding: 2rem 1.5rem;
+  background-color: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(16px);
+  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 2.5rem;
+  position: relative;
+}
+
+.sidebar-icon {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: transform 0.2s ease;
+}
+.sidebar-icon:hover {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.site-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.75rem;
+  font-weight: 800;
+  background: linear-gradient(to right, #38d9a9, #66ffe3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 0;
+}
+
+.open-sidebar-button {
+  position: absolute;
+  top: 1.5rem;
+  left: 1.5rem;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  z-index: 3;
+  transition: transform 0.2s ease;
+}
+.open-sidebar-button:hover {
+  transform: scale(1.1);
+}
+
+/* 🧠 Session History */
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.history-item {
+  padding: 0.6rem 1rem;
+  border-radius: 999px; /* bubble style */
+  background-color: rgba(51, 65, 85, 0.8);
+  cursor: pointer;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  text-align: center;
+}
+.history-item:hover {
+  background-color: #38d9a9;
+  color: #0f172a;
+}
+.history-item.active {
+  background-color: #38d9a9;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+/* 🔼 Top navbar */
+.top-ui-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  padding: 0 2rem;
+}
+.top-navbar {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+  margin: 0 auto;
+}
+.nav-logo {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+.nav-link {
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+/* 🔐 Auth buttons */
+.auth-buttons {
+  display: flex;
+  gap: 2rem;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+}
+.auth-link {
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+/* 👨‍💻 Main */
+.main-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 2rem 8rem;
+  overflow-y: auto;
+  background-color: transparent;
+  position: relative;
+  z-index: 2;
+}
+
+
+/* 💬 Prompt */
+.prompt-banner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}
+.prompt-text {
+  font-size: 3rem;
+  font-weight: 900;
+  background: linear-gradient(to right, #38d9a9, #66ffe3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+}
+.suggestion-text {
+  font-size: 0.9rem;
+  color: var(--color-muted);
+  margin-top: 1rem;
+}
+
+/* 💬 Chat area */
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-bottom: 2rem;
+}
+
+/* 📝 Chat box */
+.chat-box-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem;
+  position: fixed;
+  bottom: 0;
+  left: 280px; /* width of your sidebar */
+  right: 0;
+  z-index: 3;
+  background: linear-gradient(to top, rgba(10, 25, 47, 0.95), transparent); /* optional: smooth fade */
+}
+
+.chat-box-wrapper > .chat-input-wrapper {
+  width: 100%;
+  max-width: 900px;
+  padding: 1rem 1.25rem;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* 🌐 Utility */
+button {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+.about-page {
+  padding: 2rem;
+  background-color: var(--color-bg);
+  min-height: 100vh;
+  color: var(--color-text);
+  position: relative;
+  z-index: 1;
+  overflow-y: auto;
+}
+
+.about-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding-top: 3rem;
+}

src/styles/History.css

@@ -0,0 +1,38 @@
+.chat-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 2rem;
+  margin-top: auto;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-top: 1px solid #334155;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+.chat-input {
+  flex: 1;
+  max-width: 800px;
+  padding: 1rem 1.25rem;
+  background-color: #0f172a;
+  color: #ffffff;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  font-size: 1rem;
+}
+
+.send-button {
+  background-color: var(--color-accent);
+  color: #0f172a;
+  font-weight: 600;
+  border: none;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  transition: background-color 0.2s;
+}
+
+.send-button:hover {
+  background-color: #2ec4a1;
+}

src/styles/MessageBubble.css

@@ -0,0 +1,36 @@
+.message-bubble {
+  max-width: 70%;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  margin-bottom: 0.75rem;
+  font-size: 0.95rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  line-height: 1.4;
+  font-family: 'Poppins', sans-serif;
+}
+
+.message-bubble.user {
+  background-color: #38d9a9;
+  color: #0f172a;
+  align-self: flex-end;
+}
+
+.message-bubble.bot {
+  background-color: #334155;
+  color: #ffffff;
+  align-self: flex-start;
+}
+
+/* 🧠 Code formatting for bot responses */
+.code-block {
+  background-color: #1e293b;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: 0.85rem;
+  padding: 1rem;
+  border-radius: 10px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+  margin: 0;
+}

src/styles/Metrics.css

@@ -0,0 +1,33 @@
+.metrics-panel {
+  background-color: #1e293b;
+  color: #e2e8f0;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 1rem;
+}
+
+.tab-buttons button {
+  background-color: #334155;
+  color: #ffffff;
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+
+.tab-buttons .active {
+  background-color: #38d9a9;
+  color: #0f172a;
+}
+
+.tab-content {
+  margin-top: 1rem;
+  background-color: #0f172a;
+  padding: 1rem;
+  border-radius: 8px;
+  font-family: monospace;
+  color: #e2e8f0;
+}

src/styles/Spinner.css

@@ -0,0 +1,14 @@
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #38d9a9;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 2rem auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/styles/chatinput.css

@@ -0,0 +1,44 @@
+.chat-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 2rem;
+  margin-top: auto;
+
+  background-color: rgba(0, 0, 0, 0.4); /* translucent black */
+  backdrop-filter: blur(12px); /* soft blur to match sidebar */
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+.chat-input {
+  flex: 1;
+  max-width: 800px;
+  padding: 1rem 1.25rem;
+  background-color: rgba(15, 23, 42, 0.6);
+  color: #ffffff;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-family: 'Poppins', sans-serif;
+  outline: none;
+}
+
+.send-button {
+  background-color: #38d9a9;
+  color: #0f172a;
+  font-weight: 600;
+  border: none;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  transition: background-color 0.2s ease;
+  font-family: 'Poppins', sans-serif;
+}
+
+.send-button:hover {
+  background-color: #2ec4a1;
+}

src/styles/index.css

@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
+
+/* Root theme variables */
+:root {
+  --color-bg: #0a192f;
+  --color-panel: rgba(0, 0, 0, 0.6);
+  --color-accent: #38d9a9;
+  --color-text: #ffffff;
+  --color-muted: #9ca3af;
+  --color-error: #ef4444;
+
+  font-family: 'Poppins', 'Segoe UI', sans-serif;
+}
+
+/* Global Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  font-family: 'Poppins', 'Segoe UI', sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  overflow: hidden;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  font-family: 'Poppins', sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Make scrollbars prettier on webkit */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}

src/styles/styles.css

@@ -0,0 +1,23 @@
+.card {
+    background-color: var(--color-panel);
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    margin-bottom: 1rem;
+  }
+  
+  .section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--color-text);
+  }
+  
+  .accent-text {
+    color: var(--color-accent);
+  }
+  
+  .muted-text {
+    color: var(--color-muted);
+  }
+  

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />