Upload 7 files

Dockerfile

@@ -0,0 +1,28 @@
+# Use the official Python image as a base
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PORT=7860
+
+# Set work directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends build-essential && \
+    rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy app files
+COPY . .
+
+# Expose the port Hugging Face Spaces expects
+EXPOSE 7860
+
+# Start the FastAPI app using uvicorn on port 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,81 @@
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+from typing import Dict
+from groq import Groq
+
+# ─── CONFIG ─────────────────────────────────────────────
+GROQ_API_KEY = "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"
+MODEL         = "llama-3.3-70b-versatile"
+# ────────────────────────────────────────────────────────
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+class BudgetInput(BaseModel):
+    salary: float
+    risk_tolerance: str
+    expenses: Dict[str, Dict[str, float]]
+
+@app.get("/", response_class=HTMLResponse)
+async def get_chat(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.post("/analyze")
+async def analyze(data: BudgetInput):
+    try:
+        total = sum(
+            amt
+            for category in data.expenses.values()
+            for amt in category.values()
+        )
+        remaining = data.salary - total
+
+        # build messages
+        system_msg = {
+            "role": "system",
+            "content": (
+                "You are a helpful financial advisor assistant "
+                "Based on a user's monthly salary, categorized expenses, and risk tolerance, and don't gave them desclaimer about anything "
+                "provide secure, actionable investment suggestions in a friendly tone , make sure give them concise on point and stats of it , list of where can you invest, is there any way ."
+            )
+        }
+        lines = []
+        for cat, vals in data.expenses.items():
+            for name, amt in vals.items():
+                lines.append(f"{name}: ₹{amt:.2f}")
+        user_msg = {
+            "role": "user",
+            "content": (
+                f"I have a monthly salary of ₹{data.salary:.2f}.\n"
+                f"My expenses:\n" + "\n".join(lines) + "\n"
+                f"Remaining balance: ₹{remaining:.2f}\n"
+                f"My risk tolerance is '{data.risk_tolerance}'.\n"
+                "Please suggest how I should invest this amount securely."
+            )
+        }
+
+        client = Groq(api_key=GROQ_API_KEY)
+        resp = client.chat.completions.create(
+            model=MODEL,
+            messages=[system_msg, user_msg],
+            temperature=0.5,
+            max_tokens=1024,
+            top_p=1.0,
+        )
+        advice_md = resp.choices[0].message.content
+
+        return JSONResponse({
+            "summary": {
+                "salary": data.salary,
+                "total_expenses": total,
+                "remaining_balance": remaining,
+                "expense_breakdown": data.expenses,
+            },
+            "groq_advice_markdown": advice_md
+        })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+uvicorn
+jinja2
+python-multipart    # for template rendering
+groq

static/css/style.css

@@ -0,0 +1,32 @@
+/* Fade-in animation */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .message {
+    animation: fadeIn 0.3s ease-out;
+  }
+  /* Typing indicator */
+  .typing {
+    width: 24px;
+    height: 24px;
+    position: relative;
+  }
+  .typing span {
+    display: block;
+    width: 6px; height: 6px;
+    background: #4B5563;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 0;
+    animation: bounce 0.6s infinite ease-in-out;
+  }
+  .typing span:nth-child(1) { left: 0; animation-delay: 0s; }
+  .typing span:nth-child(2) { left: 9px; animation-delay: 0.2s; }
+  .typing span:nth-child(3) { left: 18px; animation-delay: 0.4s; }
+  
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50%     { transform: translateY(-6px); }
+  }
+  

static/js/chat.js

@@ -0,0 +1,238 @@
+const messagesEl = document.getElementById('messages');
+const inputArea = document.getElementById('input-area');
+const balanceBar = document.getElementById('balance-bar');
+const balanceValue = document.getElementById('balance-value');
+const balanceProgress = document.getElementById('balance-progress');
+const sendBtn = document.getElementById('send');
+
+let state = { expenses: { fixed: {}, optional: {}, custom: {} } };
+let queue = [
+  { key:'name', text:'Hello there! What’s your name?', type:'text' },
+  { key:'intro', text:"I’m your helpful advisor. I’ll help you make your money boom 💰—but remember, there’s always risk. Think twice!", type:'info' },
+  { key:'salary', text:'Enter your total monthly in-hand salary: ₹', type:'number' },
+  ...[
+    'Rent/Mortgage','Groceries','Utilities','EMI/Loan'
+  ].map(k=>({ key:k, text:`Enter your monthly ${k}: ₹`, type:'number', cat:'fixed' })),
+  ...[
+    'Insurance','Transport','Gym','Subs'
+  ].flatMap(k=>[
+    { key:`has_${k}`, text:`Do you have ${k}? (y/n)`, type:'yesno' },
+    { key:k,        text:`Enter your monthly ${k}: ₹`, type:'number', depends:`has_${k}`, cat:'optional' }
+  ]),
+  { key:'has_custom', text:'Any other recurring expenses to add? (y/n)', type:'yesno' },
+  { key:'custom_count', text:'How many?', type:'number', depends:'has_custom' },
+  // custom entries dynamic
+];
+
+let idx = 0, customCount = 0, customIdx = 0, awaitingCustom = false;
+
+// Helper: Render input control based on question type
+function renderInput(q) {
+  inputArea.innerHTML = '';
+  let el;
+  if(q.type==='yesno') {
+    el = document.createElement('div');
+    ['Yes','No'].forEach(opt => {
+      const btn = document.createElement('button');
+      btn.textContent = opt;
+      btn.className = 'px-4 py-2 rounded-lg border bg-gray-50 hover:bg-blue-100 text-blue-700 font-semibold mx-1';
+      btn.onclick = () => {
+        inputArea.querySelectorAll('button').forEach(b=>b.disabled=true);
+        handleYesNo(opt);
+      };
+      el.appendChild(btn);
+    });
+  } else if(q.type==='number') {
+    el = document.createElement('input');
+    el.type = 'number';
+    el.className = 'flex-1 p-3 rounded-lg border bg-gray-100 focus:outline-none';
+    el.placeholder = 'Enter amount';
+    el.id = 'input';
+    el.oninput = () => sendBtn.disabled = !el.value;
+  } else {
+    el = document.createElement('input');
+    el.type = 'text';
+    el.className = 'flex-1 p-3 rounded-lg border bg-gray-100 focus:outline-none';
+    el.placeholder = 'Type your answer...';
+    el.id = 'input';
+    el.oninput = () => sendBtn.disabled = !el.value;
+  }
+  inputArea.appendChild(el);
+  if(q.type!=='yesno') {
+    sendBtn.disabled = true;
+    el.addEventListener('keydown', e => { if(e.key==='Enter' && el.value) sendBtn.click(); });
+    el.focus();
+  } else {
+    sendBtn.disabled = true;
+  }
+}
+
+// Helper: Update balance bar
+function updateBalanceBar(balance, salary) {
+  if(salary && salary > 0) {
+    balanceBar.classList.remove('hidden');
+    balanceValue.textContent = `₹${balance.toLocaleString()}`;
+    let percent = Math.max(0, Math.min(100, Math.round((balance/salary)*100)));
+    balanceProgress.style.width = percent + '%';
+    balanceProgress.className =
+      'h-2 rounded-full ' + (percent > 60 ? 'bg-green-400' : percent > 30 ? 'bg-yellow-400' : 'bg-red-400');
+  } else {
+    balanceBar.classList.add('hidden');
+  }
+}
+
+// Helper: Add message to chat (supports markdown for bot)
+function addMessage(txt, who){
+  const div = document.createElement('div');
+  div.className = 'message flex items-end gap-2 ' + (who==='bot'
+    ? 'justify-start' : 'justify-end flex-row-reverse');
+  if(who==='bot') {
+    // Render markdown for bot replies
+    const avatar = `<img src="https://img.icons8.com/color/48/000000/bot.png" class="w-8 h-8 rounded-full border shadow bg-white">`;
+    const msg = document.createElement('div');
+    msg.className = 'bg-gray-100 text-gray-800 p-3 rounded-2xl max-w-[80%] whitespace-pre-line shadow-sm';
+    msg.innerHTML = marked.parse(txt) + `<div class='text-xs text-gray-400 mt-1 text-right'>${new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}</div>`;
+    div.innerHTML = avatar;
+    div.appendChild(msg);
+  } else {
+    const avatar = `<img src="https://img.icons8.com/color/48/000000/user-male-circle.png" class="w-8 h-8 rounded-full border shadow bg-blue-100">`;
+    const msg = document.createElement('div');
+    msg.className = 'bg-blue-600 text-white p-3 rounded-2xl max-w-[80%] whitespace-pre-line shadow-sm';
+    msg.innerHTML = txt + `<div class='text-xs text-gray-200 mt-1 text-right'>${new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}</div>`;
+    div.innerHTML = avatar;
+    div.appendChild(msg);
+  }
+  messagesEl.appendChild(div);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+// Helper: Add typing indicator
+function addTyping(){
+  const div = document.createElement('div');
+  div.className = 'typing self-start flex space-x-1';
+  div.innerHTML = '<span></span><span></span><span></span>';
+  messagesEl.appendChild(div);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+  return div;
+}
+
+// Helper: Handle yes/no button clicks
+function handleYesNo(val) {
+  addMessage(val,'user');
+  const q = queue[idx];
+  if(q && q.type==='yesno'){
+    state[q.key] = val.toLowerCase().startsWith('y');
+  }
+  idx++;
+  ask();
+}
+
+// Main logic
+async function ask(){
+  if(awaitingCustom){
+    const q = queue[idx];
+    if(customIdx < customCount){
+      if(state.customStep==='name'){
+        addMessage(`Name of expense #${customIdx+1}?`,'bot');
+        renderInput({type:'text'});
+        return;
+      } else {
+        addMessage(`Amount for '${state.current}' ₹`,'bot');
+        renderInput({type:'number'});
+        return;
+      }
+    } else {
+      awaitingCustom = false;
+      idx++;
+    }
+  }
+  if(idx < queue.length){
+    const q = queue[idx];
+    if(q.depends && !state[q.depends]){ idx++; return ask(); }
+    addMessage(q.text,'bot');
+    renderInput(q);
+  } else {
+    // submit
+    addMessage('Fetching suggestions…','bot');
+    const spinner = addTyping();
+    const payload = {
+      salary: state.salary,
+      risk_tolerance: 'moderate',
+      expenses: state.expenses
+    };
+    const res = await fetch('/analyze', {
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body: JSON.stringify(payload)
+    });
+    spinner.remove();
+    const json = await res.json();
+    addMessage(json.groq_advice_markdown,'bot');
+    inputArea.innerHTML = '';
+    sendBtn.disabled = true;
+  }
+}
+
+// Send button handler
+sendBtn.onclick = async ()=>{
+  let el = inputArea.querySelector('input');
+  let val = el ? el.value.trim() : '';
+  if(!val) return;
+  addMessage(val,'user');
+  const q = queue[idx];
+
+  // handle custom
+  if(q && q.key==='custom_count'){
+    customCount = parseInt(val);
+    state.customStep = 'name';
+    awaitingCustom = true;
+    if(el) el.value='';
+    return ask();
+  }
+  if(awaitingCustom){
+    if(state.customStep==='name'){
+      state.current = val;
+      state.customStep = 'amount';
+    } else {
+      if(!state.expenses.custom) state.expenses.custom = {};
+      state.expenses.custom[state.current] = parseFloat(val);
+      customIdx++;
+      state.customStep = 'name';
+    }
+    if(el) el.value='';
+    return ask();
+  }
+
+  // store normal
+  if(q && q.type==='number'){
+    const num = parseFloat(val);
+    if(q.key==='salary') state.salary = num;
+    else {
+      const cat = q.cat || 'custom';
+      state.expenses[cat][q.key] = num;
+      // Show balance after each expense
+      let spent = 0;
+      Object.values(state.expenses).forEach(catObj =>
+        Object.values(catObj).forEach(amt => spent+=amt));
+      let balance = (state.salary||0) - spent;
+      updateBalanceBar(balance, state.salary);
+      addMessage(`Paid ${q.key.replace(/_/g,' ')} → ₹${num.toLocaleString()},  Balance: ₹${balance.toLocaleString()}`,'bot');
+    }
+  } else if(q && q.key==='name'){
+    state.name = val;
+  }
+
+  idx++;
+  if(el) el.value='';
+  ask();
+};
+
+// Initialize
+ask();
+
+// Add the Marked.js CDN for markdown support
+if (!window.marked) {
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
+  document.head.appendChild(script);
+}

templates/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Budget Advisor</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/static/css/style.css" />
+</head>
+<body class="bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center min-h-screen font-sans">
+  <div class="w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-blue-100">
+    <div class="flex items-center gap-2 px-6 py-4 bg-gradient-to-r from-blue-600 to-green-500">
+      <img src="https://img.icons8.com/color/48/000000/bot.png" alt="Bot" class="w-8 h-8 rounded-full bg-white p-1 shadow">
+      <h1 class="text-white text-lg font-bold tracking-wide">AI Finance Advisor</h1>
+    </div>
+    <div class="flex-1 px-4 py-6 space-y-4 overflow-y-auto bg-gradient-to-br from-white to-blue-50" id="messages" style="min-height:320px;"></div>
+    <footer class="w-full bg-white border-t pt-2 pb-2 flex flex-col gap-1 sticky bottom-0 z-10 shadow-xl">
+      <div class="flex items-center px-4">
+        <div id="input-area" class="flex-1 flex gap-2"></div>
+        <button id="send" class="p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50" disabled>Send</button>
+      </div>
+      <div id="balance-bar" class="px-6 pb-1 pt-1 hidden">
+        <div class="flex justify-between text-xs text-gray-500 mb-1">
+          <span>Balance</span>
+          <span id="balance-value">₹0</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+          <div id="balance-progress" class="h-2 bg-green-400" style="width:100%"></div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <!-- Marked.js for markdown rendering -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="/static/js/chat.js"></script>
+</body>
+</html>