Refined core logic and sprinkled some magic

main.py

@@ -1,14 +1,17 @@
 import os
 import logging
-from fastapi import FastAPI
-from fastapi.responses import HTMLResponse
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-from starlette.requests import Request
+from starlette.middleware.base import BaseHTTPMiddleware
 import gradio as gr
 from api.endpoints import router as api_router
-from utils.generation import generate, format_final, LATEX_DELIMS
+from utils.generation import generate, LATEX_DELIMS
 from utils.web_search import web_search
+from fastapi.security import OAuth2PasswordBearer
+from datetime import datetime, timedelta
+from jose import JWTError, jwt
 
 # إعداد التسجيل
 logging.basicConfig(level=logging.INFO)
@@ -20,18 +23,41 @@ logger.info("Files in /app/: %s", os.listdir("/app"))
 # إعداد العميل لـ Hugging Face Inference API
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
-    logger.error("HF_TOKEN is not set in environment variables.")
+    logger.error("HF_TOKEN is not set.")
     raise ValueError("HF_TOKEN is required for Inference API.")
 
+# إعدادات JWT لـ OAuth 2.0
+SECRET_KEY = os.getenv("JWT_SECRET_KEY", "your-secret-key")  # غيّرها في الإنتاج
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 30
+
 # إعدادات الـ queue
 QUEUE_SIZE = int(os.getenv("QUEUE_SIZE", 80))
 CONCURRENCY_LIMIT = int(os.getenv("CONCURRENCY_LIMIT", 20))
 
-# إعداد CSS
+# إعداد OAuth2
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/oauth/token")
+
+# إعداد FastAPI
+app = FastAPI(
+    title="MGZon Chatbot API",
+    description="API for MGZon Chatbot with support for code generation, analysis, and MGZon-specific queries.",
+    version="1.0.0",
+)
+
+# ربط الملفات الثابتة والقوالب
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+# تضمين API endpoints
+app.include_router(api_router)
+
+# إعداد CSS لـ Gradio
 css = """
-.gradio-container { max-width: 800px; margin: auto; }
-.chatbot { border: 1px solid #ccc; border-radius: 10px; }
-.input-textbox { font-size: 16px; }
+.gradio-container { max-width: 900px; margin: auto; }
+.chatbot { border: 2px solid #ff6f61; border-radius: 15px; background: rgba(255, 255, 255, 0.05); }
+.input-textbox { font-size: 18px; border-radius: 10px; }
+.submit-btn { background: linear-gradient(45deg, #ff6f61, #e55a50); }
 """
 
 # إعداد واجهة Gradio
@@ -41,13 +67,21 @@ chatbot_ui = gr.ChatInterface(
     chatbot=gr.Chatbot(
         label="MGZon Chatbot",
         type="messages",
-        height=600,
+        height=700,
         latex_delimiters=LATEX_DELIMS,
+        avatar_images=(
+            "https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg",
+            "https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg",
+        ),
     ),
     additional_inputs_accordion=gr.Accordion("⚙️ Settings", open=True),
     additional_inputs=[
-        gr.Textbox(label="System prompt", value="You are a helpful assistant capable of code generation, analysis, review, and more.", lines=2),
-        gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, step=0.1, value=0.9),
+        gr.Textbox(
+            label="System prompt",
+            value="You are a helpful assistant capable of code generation, analysis, review, and more. Support frameworks like React, Django, Flask, Rails, Laravel, and others.",
+            lines=2,
+        ),
+        gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, step=0.1, value=0.7),
         gr.Radio(label="Reasoning Effort", choices=["low", "medium", "high"], value="medium"),
         gr.Checkbox(label="Enable DeepSearch (web browsing)", value=True),
         gr.Slider(label="Max New Tokens", minimum=50, maximum=128000, step=50, value=4096),
@@ -60,34 +94,86 @@ chatbot_ui = gr.ChatInterface(
         ["Analyze the performance of a Django REST API."],
         ["Tell me about MGZon products and services."],
         ["Create a Flask route for user authentication."],
+        ["Generate a Laravel controller for user management."],
         ["What are the latest trends in AI?"],
         ["Provide guidelines for publishing a technical blog post."],
         ["Who is the founder of MGZon?"],
     ],
     title="MGZon Chatbot",
-    description="A versatile chatbot powered by GPT-OSS-20B and a fine-tuned model for MGZon queries. Supports code generation, analysis, review, web search, and MGZon-specific queries. Licensed under Apache 2.0. ***DISCLAIMER:*** Analysis may contain internal thoughts not suitable for final response.",
+    description=(
+        "A versatile chatbot powered by GPT-OSS-20B and MGZON/Veltrix. Supports code generation, analysis, review, web search, and MGZon-specific queries. "
+        "Built by <a href='https://mark-elasfar.web.app/' target='_blank'>Mark Al-Asfar</a>. "
+        "Licensed under Apache 2.0. <strong>DISCLAIMER:</strong> Analysis may contain internal thoughts not suitable for final response."
+    ),
     theme="gradio/soft",
     css=css,
 )
 
-# إعداد FastAPI
-app = FastAPI(title="MGZon Chatbot API")
-
 # ربط Gradio مع FastAPI
 app = gr.mount_gradio_app(app, chatbot_ui, path="/gradio")
 
-# ربط الملفات الثابتة والقوالب
-app.mount("/static", StaticFiles(directory="static"), name="static")
-templates = Jinja2Templates(directory="templates")
+# Middleware لمعالجة 404
+class NotFoundMiddleware(BaseHTTPMiddleware):
+    async def dispatch(self, request: Request, call_next):
+        try:
+            response = await call_next(request)
+            if response.status_code == 404:
+                return templates.TemplateResponse("404.html", {"request": request}, status_code=404)
+            return response
+        except Exception as e:
+            logger.exception(f"Error processing request: {e}")
+            return templates.TemplateResponse("404.html", {"request": request}, status_code=404)
 
-# تضمين API endpoints
-app.include_router(api_router)
+app.add_middleware(NotFoundMiddleware)
+
+# OAuth 2.0 token endpoint (مثال أولي)
+@app.post("/oauth/token")
+async def token():
+    """إنشاء رمز OAuth 2.0 (مثال أولي)."""
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = jwt.encode(
+        {"sub": "mgzon_user", "exp": datetime.utcnow() + access_token_expires},
+        SECRET_KEY,
+        algorithm=ALGORITHM,
+    )
+    return {"access_token": access_token, "token_type": "bearer"}
+
+# Health check endpoint
+@app.get("/api/health")
+async def health_check():
+    """فحص حالة النموذج والخدمة."""
+    try:
+        # اختبار اتصال بسيط بنموذج افتراضي
+        client = OpenAI(api_key=HF_TOKEN, base_url=FALLBACK_API_ENDPOINT, timeout=10.0)
+        client.chat.completions.create(
+            model=TERTIARY_MODEL_NAME,
+            messages=[{"role": "user", "content": "Ping"}],
+            max_tokens=10,
+        )
+        return JSONResponse({"status": "healthy", "model": TERTIARY_MODEL_NAME})
+    except Exception as e:
+        logger.error(f"Health check failed: {e}")
+        return JSONResponse({"status": "unhealthy", "error": str(e)}, status_code=503)
 
 # Root endpoint
 @app.get("/", response_class=HTMLResponse)
 async def root(request: Request):
     return templates.TemplateResponse("index.html", {"request": request})
 
+# Docs endpoint
+@app.get("/docs", response_class=HTMLResponse)
+async def docs(request: Request):
+    return templates.TemplateResponse("docs.html", {"request": request})
+
+# Redirect لـ /gradio
+@app.get("/launch-chatbot", response_class=RedirectResponse)
+async def launch_chatbot():
+    try:
+        return RedirectResponse(url="/gradio")
+    except Exception as e:
+        logger.error(f"Failed to redirect to /gradio: {e}")
+        raise HTTPException(status_code=500, detail="Failed to redirect to chatbot")
+
 # تشغيل الخادم
 if __name__ == "__main__":
     import uvicorn

static/css/styles.css

@@ -2,29 +2,77 @@ body {
     font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
-    background: linear-gradient(135deg, #1e3c72, #2a5298);
+    background: linear-gradient(45deg, #1e3c72, #2a5298, #ff6f61, #1e3c72);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
     color: #fff;
     min-height: 100vh;
-    overflow-x: hidden;
+    display: flex;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.sidebar {
+    width: 250px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.sidebar-logo {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+}
+
+.sidebar nav {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.sidebar nav a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background 0.3s;
+}
+
+.sidebar nav a:hover, .sidebar nav a.active {
+    background: #ff6f61;
 }
 
 .container {
     max-width: 1200px;
-    margin: auto;
+    margin-left: 270px;
     padding: 20px;
-    text-align: center;
+    flex: 1;
 }
 
 .logo {
-    width: 100px;
-    height: 100px;
+    width: 120px;
+    height: 120px;
     margin-bottom: 20px;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }
 
 h1 {
-    font-size: 3rem;
+    font-size: 3.5rem;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    animation: fadeIn 1s ease-in-out;
 }
 
 p {
@@ -36,65 +84,85 @@ p {
 .btn {
     display: inline-block;
     padding: 15px 30px;
-    background: #ff6f61;
+    background: linear-gradient(45deg, #ff6f61, #e55a50);
     color: #fff;
     text-decoration: none;
     border-radius: 25px;
     font-size: 1.1rem;
-    transition: background 0.3s, transform 0.2s;
+    transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .btn:hover {
-    background: #e55a50;
-    transform: scale(1.05);
+    transform: scale(1.1);
+    box-shadow: 0 4px 15px rgba(255, 111, 97, 0.5);
 }
 
-.features, .docs {
+.features, .docs, .news {
     margin-top: 40px;
     text-align: left;
 }
 
-.features h2, .docs h2 {
-    font-size: 1.8rem;
-    margin-bottom: 15px;
+.features h2, .docs h2, .news h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
     text-align: center;
+    color: #fff;
 }
 
-.feature-grid, .footer-grid {
+.feature-grid, .footer-grid, .news-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }
 
-.feature-card, .footer-card {
+.feature-card, .footer-card, .news-card {
     background: rgba(255, 255, 255, 0.1);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
     text-align: center;
+    aspect-ratio: 1/1;
 }
 
-.feature-card:hover, .footer-card:hover {
+.feature-card:hover, .footer-card:hover, .news-card:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.2);
 }
 
 .feature-card i, .footer-card i {
-    font-size: 2rem;
+    font-size: 2.5rem;
     margin-bottom: 10px;
     color: #ff6f61;
 }
 
+.news-card a {
+    color: #ff6f61;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.news-card a:hover {
+    text-decoration: underline;
+}
+
 .code-block {
     position: relative;
     margin-bottom: 20px;
-}
-
-.code-block pre {
     background: #1a1a1a;
     padding: 20px;
     border-radius: 10px;
+}
+
+.code-block h3 {
+    color: #ff6f61;
+    margin-bottom: 10px;
+}
+
+.code-block pre {
+    background: transparent;
+    padding: 0;
     color: #c9e4ca;
     font-family: 'Courier New', monospace;
     overflow-x: auto;
@@ -110,6 +178,7 @@ p {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background 0.3s;
 }
 
 .copy-btn:hover {
@@ -131,24 +200,37 @@ footer {
 }
 
 .footer-logo {
-    width: 80px;
-    height: 80px;
+    width: 100px;
+    height: 100px;
     margin-bottom: 20px;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }
 
 .footer-social a {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     color: #fff;
-    margin: 0 10px;
-    transition: color 0.3s;
+    margin: 0 15px;
+    transition: color 0.3s, transform 0.3s;
 }
 
 .footer-social a:hover {
     color: #ff6f61;
+    transform: scale(1.2);
 }
 
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: static;
+        padding: 10px;
+    }
+    .container {
+        margin-left: 0;
+    }
 }

static/js/scripts.js

@@ -6,7 +6,30 @@ function copyCode(button) {
     });
 }
 
-document.getElementById('chatbot-link').addEventListener('click', (e) => {
+document.getElementById('chatbot-link')?.addEventListener('click', (e) => {
     e.preventDefault();
     window.location.href = '/gradio';
 });
+
+// تأثيرات للكروت
+document.querySelectorAll('.feature-card, .footer-card, .news-card').forEach(card => {
+    card.addEventListener('mouseenter', () => {
+        card.style.transform = 'scale(1.05) rotate(1deg)';
+    });
+    card.addEventListener('mouseleave', () => {
+        card.style.transform = 'scale(1) rotate(0deg)';
+    });
+});
+
+// إغلاق/فتح الـ sidebar على الموبايل
+document.addEventListener('DOMContentLoaded', () => {
+    const sidebar = document.querySelector('.sidebar');
+    const toggleBtn = document.createElement('button');
+    toggleBtn.textContent = '☰';
+    toggleBtn.className = 'sidebar-toggle';
+    document.body.prepend(toggleBtn);
+    
+    toggleBtn.addEventListener('click', () => {
+        sidebar.classList.toggle('active');
+    });
+});

templates/404.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - Page Not Found</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="logo">
+        <h1>404 - Page Not Found 😕</h1>
+        <p>Oops! Looks like you wandered into the wrong corner of the internet.</p>
+        <a href="/" class="btn">Back to Home</a>
+    </div>
+    <footer>
+        <div class="footer-container">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="footer-logo">
+            <p>Developed by <a href="https://mark-elasfar.web.app/" target="_blank">Mark Al-Asfar</a> | Powered by MGZon AI</p>
+            <div class="footer-social">
+                <a href="https://github.com/Mark-Lasfar/MGZon"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p>© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="/static/js/scripts.js"></script>
+</body>
+</html>

templates/docs.html

@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MGZon API Documentation</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="sidebar">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="sidebar-logo">
+        <nav>
+            <a href="/">Home</a>
+            <a href="/docs" class="active">API Documentation</a>
+            <a href="https://hager-zon.vercel.app/about">About MGZon</a>
+            <a href="https://hager-zon.vercel.app/community">Community</a>
+            <a href="https://mark-elasfar.web.app/" target="_blank">Mark Al-Asfar</a>
+        </nav>
+    </div>
+    <div class="container">
+        <h1>MGZon API Documentation 📚</h1>
+        <p>
+            Integrate MGZon Chatbot into your projects with our API. Supports Python (Django, Flask, FastAPI), JavaScript (React, Node.js, Express), Ruby (Rails), PHP (Laravel), and more. Explore the examples below to get started.
+        </p>
+        <div class="docs">
+            <h2>Endpoints</h2>
+            <div class="code-block">
+                <h3>POST /api/chat</h3>
+                <p>Send a chat message to the MGZon Chatbot and get a response.</p>
+                <pre><code class="language-json">{
+    "message": "Your query here",
+    "system_prompt": "You are a helpful assistant",
+    "history": [{"role": "user", "content": "Previous message"}, {"role": "assistant", "content": "Previous response"}],
+    "temperature": 0.7,
+    "max_new_tokens": 4096,
+    "enable_browsing": false
+}</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>Python (requests) - Chat</h3>
+                <p>Make a chat request using Python's requests library.</p>
+                <pre><code class="language-python">import requests
+
+response = requests.post(
+    "https://hager-zon.vercel.app/api/chat",
+    json={
+        "message": "Generate a React component",
+        "system_prompt": "You are a coding expert",
+        "temperature": 0.7,
+        "max_new_tokens": 4096
+    }
+)
+print(response.json())</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>Python (Django) - Chat</h3>
+                <p>Integrate with a Django project.</p>
+                <pre><code class="language-python">import requests
+from django.http import JsonResponse
+from django.views import View
+
+class ChatView(View):
+    def post(self, request):
+        data = request.POST.get('message')
+        response = requests.post(
+            "https://hager-zon.vercel.app/api/chat",
+            json={"message": data, "system_prompt": "You are a coding expert", "temperature": 0.7}
+        )
+        return JsonResponse(response.json())</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>Python (Flask) - Chat</h3>
+                <p>Integrate with a Flask app.</p>
+                <pre><code class="language-python">from flask import Flask, request, jsonify
+import requests
+
+app = Flask(__name__)
+
+@app.route('/chat', methods=['POST'])
+def chat():
+    data = request.json.get('message')
+    response = requests.post(
+        "https://hager-zon.vercel.app/api/chat",
+        json={"message": data, "system_prompt": "You are a coding expert", "temperature": 0.7}
+    )
+    return jsonify(response.json())</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>JavaScript (React) - Chat</h3>
+                <p>Integrate with a React app using fetch.</p>
+                <pre><code class="language-javascript">import React, { useState } from 'react';
+
+function ChatComponent() {
+    const [message, setMessage] = useState('');
+    const [response, setResponse] = useState('');
+
+    const handleSubmit = async () => {
+        const res = await fetch('https://hager-zon.vercel.app/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                message,
+                system_prompt: 'You are a coding expert',
+                temperature: 0.7,
+                max_new_tokens: 4096
+            })
+        });
+        const data = await res.json();
+        setResponse(data.response);
+    };
+
+    return (
+        <div>
+            <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
+            <button onClick={handleSubmit}>Send</button>
+            <p>{response}</p>
+        </div>
+    );
+}
+
+export default ChatComponent;</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>JavaScript (Node.js/Express) - Chat</h3>
+                <p>Integrate with a Node.js/Express server.</p>
+                <pre><code class="language-javascript">const express = require('express');
+const fetch = require('node-fetch');
+const app = express();
+
+app.use(express.json());
+
+app.post('/chat', async (req, res) => {
+    const { message } = req.body;
+    const response = await fetch('https://hager-zon.vercel.app/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            message,
+            system_prompt: 'You are a coding expert',
+            temperature: 0.7,
+            max_new_tokens: 4096
+        })
+    });
+    const data = await response.json();
+    res.json(data);
+});
+
+app.listen(3000, () => console.log('Server running on port 3000'));</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>Ruby (Rails) - Chat</h3>
+                <p>Integrate with a Ruby on Rails app.</p>
+                <pre><code class="language-ruby">require 'httparty'
+
+class ChatController < ApplicationController
+    def create
+        response = HTTParty.post(
+            'https://hager-zon.vercel.app/api/chat',
+            body: {
+                message: params[:message],
+                system_prompt: 'You are a coding expert',
+                temperature: 0.7,
+                max_new_tokens: 4096
+            }.to_json,
+            headers: { 'Content-Type' => 'application/json' }
+        )
+        render json: response.parsed_response
+    end
+end</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>PHP (Laravel) - Chat</h3>
+                <p>Integrate with a Laravel app.</p>
+                <pre><code class="language-php">use Illuminate\Support\Facades\Http;
+
+class ChatController extends Controller
+{
+    public function chat(Request $request)
+    {
+        $response = Http::post('https://hager-zon.vercel.app/api/chat', [
+            'message' => $request->input('message'),
+            'system_prompt' => 'You are a coding expert',
+            'temperature' => 0.7,
+            'max_new_tokens' => 4096
+        ]);
+        return $response->json();
+    }
+}</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>Bash (cURL) - Chat</h3>
+                <pre><code class="language-bash">curl -X POST https://hager-zon.vercel.app/api/chat \
+-H "Content-Type: application/json" \
+-d '{"message":"Generate a React component","system_prompt":"You are a coding expert","temperature":0.7,"max_new_tokens":4096}'</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>POST /api/code</h3>
+                <p>Generate or modify code for various frameworks.</p>
+                <pre><code class="language-json">{
+    "framework": "React",
+    "task": "Create a login form component",
+    "code": "// Existing code (optional)"
+}</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>POST /api/analysis</h3>
+                <p>Analyze code or data with detailed insights.</p>
+                <pre><code class="language-json">{
+    "text": "Analyze this Python code: print('Hello World')"
+}</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+            <div class="code-block">
+                <h3>OAuth 2.0 Authentication</h3>
+                <p>Authenticate with MGZon using OAuth 2.0.</p>
+                <pre><code class="language-bash">curl -X POST https://hager-zon.vercel.app/oauth/token \
+-H "Content-Type: application/json" \
+-d '{"client_id": "YOUR_CLIENT_ID", "client_secret": "YOUR_CLIENT_SECRET", "grant_type": "client_credentials"}'</code></pre>
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+        </div>
+        <a href="/" class="btn">Back to Home</a>
+    </div>
+    <footer>
+        <div class="footer-container">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="footer-logo">
+            <p>Developed by <a href="https://mark-elasfar.web.app/" target="_blank">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank">MGZon AI</a></p>
+            <div class="footer-grid">
+                <div class="footer-card">
+                    <i class="bx bx-mail-send"></i>
+                    <h3>Email Us</h3>
+                    <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
+                </div>
+                <div class="footer-card">
+                    <i class="bx bx-phone"></i>
+                    <h3>Phone Support</h3>
+                    <p>Call: +1-800-123-4567</p>
+                </div>
+                <div class="footer-card">
+                    <i class="bx bx-group"></i>
+                    <h3>Community</h3>
+                    <p>Join: <a href="https://hager-zon.vercel.app/community">mgzon.com/community</a></p>
+                </div>
+                <div class="footer-card">
+                    <i class="bx bx-code-alt"></i>
+                    <h3>API Docs</h3>
+                    <p>Explore: <a href="/docs">mgzon.com/docs</a></p>
+                </div>
+                <div class="footer-card">
+                    <i class="bx bx-help-circle"></i>
+                    <h3>FAQ</h3>
+                    <p>Read: <a href="https://hager-zon.vercel.app/faq">mgzon.com/faq</a></p>
+                </div>
+                <div class="footer-card">
+                    <i class="bx bx-book"></i>
+                    <h3>Documentation</h3>
+                    <p>Learn: <a href="/docs">mgzon.com/docs</a></p>
+                </div>
+            </div>
+            <div class="footer-social">
+                <a href="https://github.com/Mark-Lasfar/MGZon"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p>© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="/static/js/scripts.js"></script>
+</body>
+</html>

templates/index.html

@@ -8,8 +8,17 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
 </head>
 <body>
+    <div class="sidebar">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="sidebar-logo">
+        <nav>
+            <a href="/" class="active">Home</a>
+            <a href="/docs">API Documentation</a>
+            <a href="https://hager-zon.vercel.app/about">About MGZon</a>
+            <a href="https://hager-zon.vercel.app/community">Community</a>
+            <a href="https://mark-elasfar.web.app/" target="_blank">Mark Al-Asfar</a>
+        </nav>
+    </div>
     <div class="container">
-        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="logo">
         <h1>Welcome to MGZon Chatbot 🚀</h1>
         <p>
             MGZon Chatbot is your AI-powered assistant for code generation, analysis, and MGZon-specific queries. Built with Gradio and FastAPI, it supports multiple frameworks and languages. Ready to explore?
@@ -35,50 +44,26 @@
                 </div>
             </div>
         </div>
-        <div class="docs">
-            <h2>API Documentation</h2>
-            <p>Integrate MGZon Chatbot into your projects with our API. Supports Python, JavaScript, and more.</p>
-            <div class="code-block">
-                <h3>Python (gradio_client)</h3>
-                <pre><code class="language-python">from gradio_client import Client
-client = Client("https://mgzon-mgzon-app.hf.space/gradio")
-result = client.predict(
-    message="Generate a React component",
-    system_prompt="You are a coding expert",
-    temperature=0.7,
-    max_new_tokens=4096,
-    api_name="/api/chat"
-)
-print(result)</code></pre>
-                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
-            </div>
-            <div class="code-block">
-                <h3>JavaScript (fetch)</h3>
-                <pre><code class="language-javascript">fetch('https://mgzon-mgzon-app.hf.space/api/chat', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        message: 'Generate a React component',
-        system_prompt: 'You are a coding expert',
-        temperature: 0.7,
-        max_new_tokens: 4096
-    })
-}).then(response => response.json()).then(data => console.log(data));</code></pre>
-                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
-            </div>
-            <div class="code-block">
-                <h3>Bash (curl)</h3>
-                <pre><code class="language-bash">curl -X POST https://mgzon-mgzon-app.hf.space/api/chat \
--H "Content-Type: application/json" \
--d '{"message":"Generate a React component","system_prompt":"You are a coding expert","temperature":0.7,"max_new_tokens":4096}'</code></pre>
-                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+        <div class="news">
+            <h2>Latest MGZon News</h2>
+            <div class="news-grid">
+                <div class="news-card">
+                    <h3>New API Features</h3>
+                    <p>Explore our updated API with OAuth 2.0 support.</p>
+                    <a href="https://hager-zon.vercel.app/blog" target="_blank">Read More</a>
+                </div>
+                <div class="news-card">
+                    <h3>Community Meetup</h3>
+                    <p>Join our next virtual meetup on e-commerce trends.</p>
+                    <a href="https://hager-zon.vercel.app/community" target="_blank">Join Now</a>
+                </div>
             </div>
         </div>
     </div>
     <footer>
         <div class="footer-container">
             <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="footer-logo">
-            <p>MGZon is a leading platform for e-commerce integrations and API solutions.</p>
+            <p>Developed by <a href="https://mark-elasfar.web.app/" target="_blank">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank">MGZon AI</a></p>
             <div class="footer-grid">
                 <div class="footer-card">
                     <i class="bx bx-mail-send"></i>
@@ -93,22 +78,22 @@ print(result)</code></pre>
                 <div class="footer-card">
                     <i class="bx bx-group"></i>
                     <h3>Community</h3>
-                    <p>Join: <a href="https://mgzon.com/community">mgzon.com/community</a></p>
+                    <p>Join: <a href="https://hager-zon.vercel.app/community">mgzon.com/community</a></p>
                 </div>
                 <div class="footer-card">
                     <i class="bx bx-code-alt"></i>
                     <h3>API Docs</h3>
-                    <p>Explore: <a href="https://mgzon.com/developers">mgzon.com/developers</a></p>
+                    <p>Explore: <a href="/docs">mgzon.com/docs</a></p>
                 </div>
                 <div class="footer-card">
                     <i class="bx bx-help-circle"></i>
                     <h3>FAQ</h3>
-                    <p>Read: <a href="https://mgzon.com/faq">mgzon.com/faq</a></p>
+                    <p>Read: <a href="https://hager-zon.vercel.app/faq">mgzon.com/faq</a></p>
                 </div>
                 <div class="footer-card">
                     <i class="bx bx-book"></i>
                     <h3>Documentation</h3>
-                    <p>Learn: <a href="https://mgzon.com/docs">mgzon.com/docs</a></p>
+                    <p>Learn: <a href="/docs">mgzon.com/docs</a></p>
                 </div>
             </div>
             <div class="footer-social">