commit 00000023

app.py

@@ -4,12 +4,13 @@ import torch
 import re
 from fastapi import FastAPI, Request
 from fastapi.responses import StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel
 from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
 from huggingface_hub import login
 from langchain_community.tools import DuckDuckGoSearchRun
 from fastapi.middleware.cors import CORSMiddleware
-import os
 import uvicorn
 
 # ✅ Safe GPU decorator
@@ -27,6 +28,10 @@ app = FastAPI(
     redoc_url="/redoc"    # ReDoc at /redoc
 )
 
+# ✅ Static + templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
 # Enable CORS (important for browser clients)
 app.add_middleware(
     CORSMiddleware,
@@ -90,6 +95,11 @@ class ChatRequest(BaseModel):
     history: list = []
 
 # ---------------- FastAPI route ----------------
+# ---------------- Routes ----------------
+@app.get("/", summary="Serve homepage")
+async def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
 @app.post("/chat-stream", summary="Stream assistant reply", tags=["Chat"])
 async def chat_stream(body: ChatRequest):
     """

static/style.css

@@ -0,0 +1,246 @@
+  body {
+      font-family: 'Roboto', sans-serif;
+      background: #121212;
+      color: #ffffff;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      padding: 0 16px;
+    }
+
+    .chat-container {
+      background: #1f1f1f;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+      padding: 20px;
+      max-width: 700px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    h2 {
+      text-align: center;
+      color: #bb86fc;
+      margin-bottom: 20px;
+      font-weight: 500;
+    }
+
+    .chat-box {
+      flex-grow: 1;
+      max-height: 420px;
+      overflow-y: auto;
+      padding: 12px;
+      border: 1px solid #2d2d2d;
+      border-radius: 8px;
+      background: #2a2a2a;
+      margin-bottom: 16px;
+      display: flex;
+  flex-direction: column;
+    }
+.message {
+  display: block; /* ensures full-width layout */
+  width: fit-content;
+  max-width: 85%;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.message.user {
+  align-self: flex-end;
+  margin-left: auto;
+  background: #333c4d;
+  color: #e3f2fd;
+  border-bottom-right-radius: 0;
+}
+
+.message.assistant {
+  align-self: flex-start;
+  margin-right: auto;
+  background: #383838;
+  border-bottom-left-radius: 0;
+}
+
+    .text-content {
+      white-space: pre-wrap;
+    }
+
+    .input-area {
+      display: flex;
+      gap: 10px;
+    }
+
+    textarea {
+      flex-grow: 1;
+      padding: 10px 12px;
+      resize: none;
+      border-radius: 6px;
+      background: #2a2a2a;
+      color: #fff;
+      border: 1px solid #444;
+      font-size: 14px;
+    }
+
+    button {
+      background: #6200ee;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      padding: 10px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+
+    button:hover {
+      background: #3700b3;
+    }
+
+    .typing-indicator {
+      display: flex;
+      gap: 6px;
+      margin: 6px 0 12px;
+    }
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      background-color: #bb86fc;
+      border-radius: 50%;
+      animation: blink 1.4s infinite both;
+    }
+
+    .dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes blink {
+      0%, 80%, 100% { opacity: 0.2; }
+      40% { opacity: 1; }
+    }
+
+    .code-block {
+      position: relative;
+      background: #1e1e1e;
+      color: #eee;
+      padding: 12px;
+      border-radius: 8px;
+      margin-top: 8px;
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      background: #444;
+      color: #fff;
+      border: none;
+      padding: 4px 8px;
+      font-size: 12px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .copy-btn:hover {
+      background: #666;
+    }
+
+    @media (max-width: 600px) {
+      .chat-box {
+        max-height: 60vh;
+      }
+
+      button {
+        padding: 8px 14px;
+      }
+    }
+
+    .timestamp {
+  font-size: 11px;
+  color: #aaa;
+  margin-top: 4px;
+  display: block;
+}
+
+.timestamp.user {
+  text-align: right;
+}
+
+.timestamp.assistant {
+  text-align: left;
+}
+
+.code-line {
+  display: flex;
+}
+
+.line-number {
+  width: 30px;
+  color: #888;
+  text-align: right;
+  padding-right: 12px;
+  user-select: none;
+}
+
+.line-content {
+  flex-grow: 1;
+  white-space: pre-wrap;
+}
+
+.code-block-wrapper {
+  position: relative;
+  background: #2d2d2d;
+  border-radius: 8px;
+  margin: 10px 0;
+  padding-top: 1.5em;
+  overflow: auto;
+}
+
+.language-label {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  background: #444;
+  color: #fff;
+  padding: 2px 8px;
+  font-size: 0.75em;
+  border-bottom-left-radius: 4px;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  background: transparent;
+  color: white;
+  border: none;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+
+pre[class*="language-"] {
+  white-space: pre-wrap !important;
+  word-break: break-word;
+  overflow-x: auto;
+}
+
+.chat-image {
+  max-width: 100%;
+  height: auto;
+  margin-top: 10px;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+
+

templates/index.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Chat Mate</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="/static/style.css" />
+  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
+  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+
+  <!-- Prism -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css">
+  <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-shell-session.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kotlin.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-swift.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-scala.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-dart.min.js"></script>
+
+  <script src="https://unpkg.com/vue@3"></script>
+</head>
+
+<body>
+  <div id="app" class="chat-container">
+    <h2>💬 Chat Mate</h2>
+
+    <div class="chat-box" ref="chatbox">
+      <div v-for="(msg, i) in history" :key="i" class="message" :class="msg.role">
+        <template v-if="msg.role === 'assistant' && msg.content.includes('```')">
+          <div class="message-content" v-html="renderCode(msg.content)"></div>
+          {% raw %}<div class="timestamp" :class="msg.role">{{ msg.time }}</div>{% endraw %}
+        </template>
+        <template v-else>
+          <div class="text-content" v-html="formatText(msg.content)"></div>
+          {% raw %}<div class="timestamp" :class="msg.role">{{ msg.time }}</div>{% endraw %}
+        </template>
+      </div>
+
+      <div v-if="loading" class="typing-indicator">
+        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
+      </div>
+    </div>
+
+    <div class="input-area">
+      <textarea v-model="message" placeholder="Ask something..." rows="2"></textarea>
+      <button @click="sendMessage" :disabled="!message.trim() || loading">Send</button>
+    </div>
+  </div>
+
+  <script>
+    const { createApp, ref, nextTick } = Vue;
+
+    createApp({
+      setup() {
+        const message = ref('');
+        const history = ref([]);
+        const loading = ref(false);
+        const chatbox = ref(null);
+
+        const scrollToBottom = () => {
+          nextTick(() => {
+            if (chatbox.value) chatbox.value.scrollTop = chatbox.value.scrollHeight;
+          });
+        };
+
+     const formatText = (text) => {
+  // ✅ Handle base64 images
+  const imageRegex = /\[IMAGE_START\](.*?)\[IMAGE_END\]/gs;
+  text = text.replace(imageRegex, (match, base64) => {
+    const src = `data:image/png;base64,${base64.trim()}`;
+    return `<img src="${src}" alt="Generated Image" class="chat-image"/>`;
+  });
+
+  // ✅ Normalize line endings and remove excessive blank lines
+  text = text.replace(/\r\n|\r/g, '\n');
+  text = text.replace(/\n{3,}/g, '\n\n');
+
+  // ✅ Parse fenced code blocks (```code```)
+  text = text.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+    const language = lang ? ` class="language-${lang}"` : '';
+    return `<pre><code${language}>${code.trim().replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
+  });
+
+  // ✅ Parse blockquotes
+  text = text.replace(/^> (.*)$/gm, '<blockquote>$1</blockquote>');
+
+  // ✅ Headings
+  text = text.replace(/^### (.*)$/gm, '<h3>$1</h3>');
+
+  // ✅ Horizontal rules
+  text = text.replace(/^---$/gm, '<hr>');
+
+  // ✅ Bold (**text**) and italic (*text*)
+  text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+  // ✅ Emoji rendering using colon syntax (:smile:)
+  const emojiMap = {
+    smile: "😄",
+    sad: "😢",
+    heart: "❤️",
+    thumbs_up: "👍",
+    fire: "🔥",
+    check: "✅",
+    x: "❌",
+    star: "⭐",
+    rocket: "🚀",
+    warning: "⚠️",
+  };
+  text = text.replace(/:([a-z0-9_+-]+):/g, (match, name) => emojiMap[name] || match);
+
+  // ✅ Unordered list (bullets)
+  const listify = (lines, tag) =>
+    `<${tag}>` +
+    lines.map(item => `<li>${item.replace(/^(\-|\d+\.)\s*/, '').trim()}</li>`).join('') +
+    `</${tag}>`;
+
+  text = text.replace(
+    /((?:^[-*] .+(?:\n|$))+)/gm,
+    (match) => listify(match.trim().split('\n'), 'ul')
+  );
+
+  // ✅ Ordered list (fix separate `1.` items issue)
+  text = text.replace(/^(\d+\. .+)$/gm, '__ORDERED__START__$1__ORDERED__END__');
+  text = text.replace(
+    /__ORDERED__START__(\d+\. .+?)__ORDERED__END__/gs,
+    (_, line) => `<ol><li>${line.replace(/^\d+\.\s*/, '')}</li></ol>`
+  );
+  text = text.replace(/<\/ol>\s*<ol>/g, '');
+
+  // ✅ Markdown-style tables
+  text = text.replace(
+    /^\|(.+?)\|\n\|([-:| ]+)\|\n((?:\|.*\|\n?)*)/gm,
+    (_, headerRow, dividerRow, bodyRows) => {
+      const headers = headerRow.split('|').map(h => `<th>${h.trim()}</th>`).join('');
+      const rows = bodyRows.trim().split('\n').map(r =>
+        '<tr>' + r.split('|').map(cell => `<td>${cell.trim()}</td>`).join('') + '</tr>'
+      ).join('');
+      return `<table><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
+    }
+  );
+
+  // ✅ Paragraphs and line breaks inside paragraphs
+  const blocks = text.split(/\n{2,}/).map(block => {
+    if (
+      block.startsWith('<h3>') ||
+      block.startsWith('<hr>') ||
+      block.startsWith('<ul>') ||
+      block.startsWith('<ol>') ||
+      block.startsWith('<table>') ||
+      block.startsWith('<pre>') ||
+      block.startsWith('<blockquote>') ||
+      block.startsWith('<img')
+    ) {
+      return block;
+    } else {
+      return `<p>${block.trim().replace(/\n/g, '<br>')}</p>`;
+    }
+  });
+
+  return blocks.join('\n');
+};
+
+
+
+
+
+        const renderCode = (text) => {
+          const codeBlocks = text.split(/```/);
+          let output = '';
+
+          for (let i = 0; i < codeBlocks.length; i++) {
+            if (i % 2 === 1) {
+              const lines = codeBlocks[i].split('\n');
+              let langGuess = /^[a-zA-Z]+$/.test(lines[0]) ? lines[0].trim().toLowerCase() : '';
+              const codeLines = langGuess ? lines.slice(1) : lines;
+              const rawCode = codeLines.join('\n');
+
+              if (!langGuess) langGuess = detectLanguageByKeywords(rawCode);
+
+              const escapeHTML = (str) =>
+                str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                   .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+
+              const escapedCode = escapeHTML(rawCode);
+
+              output += `
+                <div class="code-block-wrapper">
+                  <div class="language-label">${langGuess.toUpperCase() || 'CODE'}</div>
+                  <pre class="line-numbers language-${langGuess}"><code class="language-${langGuess}">${escapedCode}</code></pre>
+                </div>
+              `;
+            } else {
+              output += `<div class="text-content">${formatText(codeBlocks[i])}</div>`;
+            }
+          }
+
+          nextTick(() => setTimeout(() => Prism.highlightAll(), 0));
+          return output;
+        };
+
+        const detectLanguageByKeywords = (code) => {
+          const keywords = {
+             python: ['def ', 'print(', 'import ', 'class '],
+  javascript: ['function ', 'console.log(', 'let ', 'const ', 'document.getElementById'],
+  typescript: ['interface ', 'type ', 'let ', 'const ', ': string', ': number'],
+  java: ['import java.', 'ArrayList<', 'System.out', 'void main(', 'public class', 'new '],
+  c: ['#include <stdio.h>', 'printf(', 'scanf(', 'int main('],
+  cpp: ['#include', 'std::', 'cout <<', 'cin >>'],
+  bash: ['#!/bin/bash', 'echo ', 'cd ', 'ls', 'pwd'],
+  shell: ['#!/bin/sh', 'echo ', 'export ', 'fi'],
+  sql: ['SELECT ', 'INSERT ', 'UPDATE ', 'FROM ', 'WHERE ', 'JOIN ', 'DELETE '],
+  html: ['<!DOCTYPE html>', '<html>', '<div>', '<script>'],
+  css: ['color:', 'font-size:', 'margin:', 'padding:'],
+  go: ['package main', 'fmt.Println', 'func main()'],
+  php: ['<?php', 'echo ', '$_', '->'],
+  ruby: ['def ', 'puts ', 'end', 'class '],
+  kotlin: ['fun main(', 'val ', 'var ', 'println('],
+  swift: ['import SwiftUI', 'struct ', 'var body:', 'Text('],
+  rust: ['fn main()', 'println!', 'let mut'],
+  scala: ['object ', 'def ', 'val ', 'println('],
+  dart: ['void main()', 'print(', 'var ', 'class '],
+          };
+
+          let best = 'plaintext', score = 0;
+          for (const [lang, keys] of Object.entries(keywords)) {
+            let s = 0;
+            for (const k of keys) s += (code.match(new RegExp(k, 'g')) || []).length;
+            if (s > score) [score, best] = [s, lang];
+          }
+          return best;
+        };
+
+        const sendMessage = async () => {
+          if (!message.value.trim()) return;
+          history.value.push({ role: 'user', content: message.value, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) });
+          scrollToBottom();
+
+          const assistant = { role: 'assistant', content: '', time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) };
+          history.value.push(assistant);
+          loading.value = true;
+
+          const payload = { message: message.value, history: history.value.slice(0, -1) };
+          message.value = '';
+
+          const response = await fetch("/chat-stream", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload)
+          });
+
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let done = false;
+
+          while (!done) {
+            const { value, done: isDone } = await reader.read();
+            if (value) {
+              assistant.content += decoder.decode(value);
+              scrollToBottom();
+            }
+            done = isDone;
+          }
+
+          loading.value = false;
+        };
+
+        return { message, history, sendMessage, renderCode, formatText, loading, chatbox };
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>