Spaces:

MGZON
/

mgzon-app

Running

App Files Files Community

ibrahimlasfar commited on Aug 28

Commit

8f6aeec

1 Parent(s): 362b291

Update design and generation logic

Browse files

Files changed (7) hide show

main.py +22 -85
requirements.txt +1 -1
static/js/scripts.js +11 -7
templates/404.html +16 -16
templates/docs.html +159 -121
templates/index.html +112 -79
utils/generation.py +81 -10

main.py CHANGED Viewed

@@ -1,17 +1,13 @@
 import os
 import logging
-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.middleware.base import BaseHTTPMiddleware
 import gradio as gr
 from api.endpoints import router as api_router
 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)
@@ -23,41 +19,18 @@ 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.")
     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))
-# إعداد 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: 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
@@ -67,21 +40,13 @@ chatbot_ui = gr.ChatInterface(
     chatbot=gr.Chatbot(
         label="MGZon Chatbot",
         type="messages",
-        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. 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),
@@ -94,24 +59,29 @@ 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 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,
 )
 # ربط Gradio مع FastAPI
 app = gr.mount_gradio_app(app, chatbot_ui, path="/gradio")
 # Middleware لمعالجة 404
 class NotFoundMiddleware(BaseHTTPMiddleware):
     async def dispatch(self, request: Request, call_next):
@@ -126,35 +96,6 @@ class NotFoundMiddleware(BaseHTTPMiddleware):
 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):
@@ -168,11 +109,7 @@ async def docs(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 os
 import logging
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from starlette.middleware.base import BaseHTTPMiddleware
 import gradio as gr
 from api.endpoints import router as api_router
 from utils.generation import generate, LATEX_DELIMS
 # إعداد التسجيل
 logging.basicConfig(level=logging.INFO)
 # إعداد العميل لـ Hugging Face Inference API
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
+    logger.error("HF_TOKEN is not set in environment variables.")
     raise ValueError("HF_TOKEN is required for Inference API.")
 # إعدادات الـ queue
 QUEUE_SIZE = int(os.getenv("QUEUE_SIZE", 80))
 CONCURRENCY_LIMIT = int(os.getenv("CONCURRENCY_LIMIT", 20))
+# إعداد CSS
 css = """
+.gradio-container { max-width: 800px; margin: auto; }
+.chatbot { border: 1px solid #ccc; border-radius: 10px; }
+.input-textbox { font-size: 16px; }
 """
 # إعداد واجهة Gradio
     chatbot=gr.Chatbot(
         label="MGZon Chatbot",
         type="messages",
+        height=600,
         latex_delimiters=LATEX_DELIMS,
     ),
     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.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),
         ["Analyze the performance of a Django REST API."],
         ["Tell me about MGZon products and services."],
         ["Create a Flask route for user authentication."],
         ["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 MGZON/Veltrix for MGZon queries. Supports code generation, analysis, review, web search, and MGZon-specific queries. Licensed under Apache 2.0.",
     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")
+# تضمين API endpoints
+app.include_router(api_router)
 # Middleware لمعالجة 404
 class NotFoundMiddleware(BaseHTTPMiddleware):
     async def dispatch(self, request: Request, call_next):
 app.add_middleware(NotFoundMiddleware)
 # Root endpoint
 @app.get("/", response_class=HTMLResponse)
 async def root(request: Request):
 # Redirect لـ /gradio
 @app.get("/launch-chatbot", response_class=RedirectResponse)
 async def launch_chatbot():
+    return RedirectResponse(url="/gradio")
 # تشغيل الخادم
 if __name__ == "__main__":

requirements.txt CHANGED Viewed

@@ -10,4 +10,4 @@ beautifulsoup4==4.12.3
 tenacity==8.5.0
 selenium==4.25.0
 jinja2==3.1.4
-python-jose[cryptography]

 tenacity==8.5.0
 selenium==4.25.0
 jinja2==3.1.4
+cachetools==5.5.0

static/js/scripts.js CHANGED Viewed

@@ -1,3 +1,4 @@
 function copyCode(button) {
     const code = button.previousElementSibling.querySelector('code').textContent;
     navigator.clipboard.writeText(code).then(() => {
@@ -6,12 +7,18 @@ function copyCode(button) {
     });
 }
 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)';
@@ -21,13 +28,10 @@ document.querySelectorAll('.feature-card, .footer-card, .news-card').forEach(car
     });
 });
-// إغلاق/فتح الـ 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');

+// Copy Code
 function copyCode(button) {
     const code = button.previousElementSibling.querySelector('code').textContent;
     navigator.clipboard.writeText(code).then(() => {
     });
 }
+// Redirect to /gradio with loading animation
 document.getElementById('chatbot-link')?.addEventListener('click', (e) => {
     e.preventDefault();
+    const btn = e.target;
+    btn.querySelector('.loading').classList.remove('hidden');
+    btn.disabled = true;
+    setTimeout(() => {
+        window.location.href = '/gradio';
+    }, 1000); // تأخير بسيط عشان الـ animation
 });
+// Card animations
 document.querySelectorAll('.feature-card, .footer-card, .news-card').forEach(card => {
     card.addEventListener('mouseenter', () => {
         card.style.transform = 'scale(1.05) rotate(1deg)';
     });
 });
+// Sidebar toggle for mobile
 document.addEventListener('DOMContentLoaded', () => {
     const sidebar = document.querySelector('.sidebar');
+    const toggleBtn = document.querySelector('.sidebar-toggle');
     toggleBtn.addEventListener('click', () => {
         sidebar.classList.toggle('active');

templates/404.html CHANGED Viewed

@@ -4,26 +4,26 @@
     <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/boxicons@2.1.4/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>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>404 - Page Not Found</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
 </head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <div class="container max-w-6xl mx-auto text-center py-12 flex-1">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4">404 - Page Not Found 😕</h1>
+        <p class="text-lg mb-8">Oops! Looks like you wandered into the wrong corner of the internet.</p>
+        <a href="/" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform">Back to Home</a>
     </div>
+    <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12">
+        <div class="container max-w-6xl mx-auto text-center">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+            <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
+            <div class="flex justify-center gap-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
             </div>
+            <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
         </div>
     </footer>
     <script src="/static/js/scripts.js"></script>

templates/docs.html CHANGED Viewed

@@ -4,31 +4,57 @@
     <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/boxicons@2.1.4/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"}],
@@ -36,12 +62,11 @@
     "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",
@@ -53,12 +78,11 @@ response = requests.post(
     }
 )
 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
@@ -70,12 +94,11 @@ class ChatView(View):
             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__)
@@ -88,12 +111,11 @@ def 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('');
@@ -124,12 +146,11 @@ function ChatComponent() {
 }
 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();
@@ -152,12 +173,11 @@ app.post('/chat', async (req, res) => {
 });
 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
@@ -174,12 +194,11 @@ class ChatController < ApplicationController
         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
 {
@@ -194,88 +213,107 @@ class ChatController extends Controller
         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:support@mgzon.com">support@mgzon.com</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>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MGZon API Documentation</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <style>
+        @keyframes slideIn {
+            from { transform: translateX(-100%); }
+            to { transform: translateX(0); }
+        }
+        .sidebar.active { transform: translateX(0); }
+        @media (max-width: 768px) {
+            .sidebar { transform: translateX(-100%); }
+            .sidebar.active { transform: translateX(0); animation: slideIn 0.3s ease; }
+        }
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+    </style>
 </head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <button class="md:hidden fixed top-4 left-4 z-50 text-white text-2xl sidebar-toggle">☰</button>
+    <div class="sidebar fixed top-0 left-0 h-full w-64 bg-gradient-to-b from-blue-800 to-orange-500 text-white p-6 flex flex-col md:translate-x-0 transition-transform duration-300">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-20 h-20 mb-6 animate-pulse">
+        <nav class="flex flex-col gap-4">
+            <a href="/" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Home</a>
+            <a href="/docs" class="px-4 py-2 rounded-lg bg-orange-600">API Documentation</a>
+            <a href="https://hager-zon.vercel.app/about" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">About MGZon</a>
+            <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Community</a>
+            <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Mark Al-Asfar</a>
         </nav>
     </div>
+    <div class="flex-1 md:ml-64 p-6">
+        <div class="container max-w-6xl mx-auto">
+            <div class="text-center py-12">
+                <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+                <h1 class="text-5xl font-bold mb-4 animate-fade-in">MGZon API Documentation 📚</h1>
+                <p class="text-lg mb-8">
+                    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.
+                </p>
+            </div>
+            <div class="docs my-12">
+                <h2 class="text-3xl font-bold text-center mb-8">Endpoints</h2>
+                <div class="flex flex-wrap gap-4 mb-8">
+                    <button class="tab-btn bg-orange-500 text-white px-4 py-2 rounded-lg" data-tab="chat">Chat</button>
+                    <button class="tab-btn bg-gray-700 text-white px-4 py-2 rounded-lg" data-tab="code">Code</button>
+                    <button class="tab-btn bg-gray-700 text-white px-4 py-2 rounded-lg" data-tab="analysis">Analysis</button>
+                    <button class="tab-btn bg-gray-700 text-white px-4 py-2 rounded-lg" data-tab="oauth">OAuth</button>
+                </div>
+                <div id="chat" class="tab-content active">
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">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"}],
     "max_new_tokens": 4096,
     "enable_browsing": false
 }</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">Python (requests)</h3>
+                        <pre><code class="language-python">import requests
 response = requests.post(
     "https://hager-zon.vercel.app/api/chat",
     }
 )
 print(response.json())</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">Python (Django)</h3>
+                        <pre><code class="language-python">import requests
 from django.http import JsonResponse
 from django.views import View
             json={"message": data, "system_prompt": "You are a coding expert", "temperature": 0.7}
         )
         return JsonResponse(response.json())</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">Python (Flask)</h3>
+                        <pre><code class="language-python">from flask import Flask, request, jsonify
 import requests
 app = Flask(__name__)
         json={"message": data, "system_prompt": "You are a coding expert", "temperature": 0.7}
     )
     return jsonify(response.json())</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">JavaScript (React)</h3>
+                        <pre><code class="language-javascript">import React, { useState } from 'react';
 function ChatComponent() {
     const [message, setMessage] = useState('');
 }
 export default ChatComponent;</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">JavaScript (Node.js/Express)</h3>
+                        <pre><code class="language-javascript">const express = require('express');
 const fetch = require('node-fetch');
 const app = express();
 });
 app.listen(3000, () => console.log('Server running on port 3000'));</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">Ruby (Rails)</h3>
+                        <pre><code class="language-ruby">require 'httparty'
 class ChatController < ApplicationController
     def create
         render json: response.parsed_response
     end
 end</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">PHP (Laravel)</h3>
+                        <pre><code class="language-php">use Illuminate\Support\Facades\Http;
 class ChatController extends Controller
 {
         return $response->json();
     }
 }</code></pre>
+                        <button class="copy-btn bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">Bash (cURL)</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 bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                </div>
+                <div id="code" class="tab-content">
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">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 bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                </div>
+                <div id="analysis" class="tab-content">
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">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 bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                </div>
+                <div id="oauth" class="tab-content">
+                    <div class="code-block bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h3 class="text-xl font-semibold text-orange-500 mb-2">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 bg-orange-500 text-white px-4 py-2 rounded-lg mt-4">Copy</button>
+                    </div>
+                </div>
+                <a href="/" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform mt-8">Back to Home</a>
             </div>
         </div>
     </div>
+    <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12 mt-auto">
+        <div class="container max-w-6xl mx-auto text-center">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+            <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-mail-send text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Email Us</h3>
+                    <p>Contact: <a href="mailto:support@mgzon.com" class="text-orange-500 hover:underline">support@mgzon.com</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-phone text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Phone Support</h3>
                     <p>Call: +1-800-123-4567</p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-group text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Community</h3>
+                    <p>Join: <a href="https://hager-zon.vercel.app/community" class="text-orange-500 hover:underline">mgzon.com/community</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-code-alt text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">API Docs</h3>
+                    <p>Explore: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-help-circle text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">FAQ</h3>
+                    <p>Read: <a href="https://hager-zon.vercel.app/faq" class="text-orange-500 hover:underline">mgzon.com/faq</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-book text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Documentation</h3>
+                    <p>Learn: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
                 </div>
             </div>
+            <div class="flex justify-center gap-6 mt-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
             </div>
+            <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
         </div>
     </footer>
     <script src="/static/js/scripts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <script>
+        document.querySelectorAll('.tab-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.tab-btn').forEach(b => b.classList.replace('bg-orange-500', 'bg-gray-700'));
+                btn.classList.replace('bg-gray-700', 'bg-orange-500');
+                document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+                document.getElementById(btn.dataset.tab).classList.add('active');
+            });
+        });
+    </script>
 </body>
 </html>

templates/index.html CHANGED Viewed

@@ -4,106 +4,139 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MGZon Chatbot - Powered by AI</title>
-    <link rel="stylesheet" href="/static/css/styles.css">
     <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/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">
-        <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?
-        </p>
-        <a href="/gradio" id="chatbot-link" class="btn">Launch Chatbot</a>
-        <div class="features">
-            <h2>Features</h2>
-            <div class="feature-grid">
-                <div class="feature-card">
-                    <i class="bx bx-code-alt"></i>
-                    <h3>Code Generation</h3>
-                    <p>Generate code for React, Django, Flask, and more.</p>
-                </div>
-                <div class="feature-card">
-                    <i class="bx bx-search"></i>
-                    <h3>Web Search</h3>
-                    <p>Integrated web search for MGZon-related queries.</p>
-                </div>
-                <div class="feature-card">
-                    <i class="bx bx-analyse"></i>
-                    <h3>Analysis & Review</h3>
-                    <p>Detailed code and data analysis with insights.</p>
-                </div>
             </div>
-        </div>
-        <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>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:support@mgzon.com">support@mgzon.com</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>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MGZon Chatbot - Powered by AI</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <style>
+        @keyframes slideIn {
+            from { transform: translateX(-100%); }
+            to { transform: translateX(0); }
+        }
+        .sidebar.active { transform: translateX(0); }
+        @media (max-width: 768px) {
+            .sidebar { transform: translateX(-100%); }
+            .sidebar.active { transform: translateX(0); animation: slideIn 0.3s ease; }
+        }
+        .loading::after {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #fff;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-left: 8px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
 </head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <button class="md:hidden fixed top-4 left-4 z-50 text-white text-2xl sidebar-toggle">☰</button>
+    <div class="sidebar fixed top-0 left-0 h-full w-64 bg-gradient-to-b from-blue-800 to-orange-500 text-white p-6 flex flex-col md:translate-x-0 transition-transform duration-300">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-20 h-20 mb-6 animate-pulse">
+        <nav class="flex flex-col gap-4">
+            <a href="/" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition active:bg-orange-600">Home</a>
+            <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">API Documentation</a>
+            <a href="https://hager-zon.vercel.app/about" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">About MGZon</a>
+            <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Community</a>
+            <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Mark Al-Asfar</a>
         </nav>
     </div>
+    <div class="flex-1 md:ml-64 p-6">
+        <div class="container max-w-6xl mx-auto">
+            <div class="text-center py-12">
+                <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+                <h1 class="text-5xl font-bold mb-4 animate-fade-in">Welcome to MGZon Chatbot 🚀</h1>
+                <p class="text-lg mb-8">
+                    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?
+                </p>
+                <a href="/gradio" id="chatbot-link" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform">Launch Chatbot <span class="loading hidden"></span></a>
             </div>
+            <div class="features my-12">
+                <h2 class="text-3xl font-bold text-center mb-8">Features</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
+                        <i class="bx bx-code-alt text-4xl text-orange-500 mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
+                        <p>Generate code for React, Django, Flask, and more.</p>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
+                        <i class="bx bx-search text-4xl text-orange-500 mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Web Search</h3>
+                        <p>Integrated web search for MGZon-related queries.</p>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
+                        <i class="bx bx-analyse text-4xl text-orange-500 mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Analysis & Review</h3>
+                        <p>Detailed code and data analysis with insights.</p>
+                    </div>
                 </div>
+            </div>
+            <div class="news my-12">
+                <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon News</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
+                        <h3 class="text-xl font-semibold mb-2">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" class="text-orange-500 hover:underline">Read More</a>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
+                        <h3 class="text-xl font-semibold mb-2">Community Meetup</h3>
+                        <p>Join our next virtual meetup on e-commerce trends.</p>
+                        <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-orange-500 hover:underline">Join Now</a>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12 mt-auto">
+        <div class="container max-w-6xl mx-auto text-center">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+            <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-mail-send text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Email Us</h3>
+                    <p>Contact: <a href="mailto:support@mgzon.com" class="text-orange-500 hover:underline">support@mgzon.com</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-phone text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Phone Support</h3>
                     <p>Call: +1-800-123-4567</p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-group text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Community</h3>
+                    <p>Join: <a href="https://hager-zon.vercel.app/community" class="text-orange-500 hover:underline">mgzon.com/community</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-code-alt text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">API Docs</h3>
+                    <p>Explore: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-help-circle text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">FAQ</h3>
+                    <p>Read: <a href="https://hager-zon.vercel.app/faq" class="text-orange-500 hover:underline">mgzon.com/faq</a></p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                    <i class="bx bx-book text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="text-lg font-semibold mb-2">Documentation</h3>
+                    <p>Learn: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
                 </div>
             </div>
+            <div class="flex justify-center gap-6 mt-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
             </div>
+            <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
         </div>
     </footer>
     <script src="/static/js/scripts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
 </body>
 </html>

utils/generation.py CHANGED Viewed

@@ -6,13 +6,18 @@ from openai import OpenAI
 from pydoc import html
 from tenacity import retry, stop_after_attempt, wait_exponential
 import logging
 logger = logging.getLogger(__name__)
 # تعريف LATEX_DELIMS
 LATEX_DELIMS = [
-    {"left": "$$",  "right": "$$",  "display": True},
-    {"left": "$",   "right": "$",   "display": False},
     {"left": "\\[", "right": "\\]", "display": True},
     {"left": "\\(", "right": "\\)", "display": False},
 ]
@@ -38,7 +43,7 @@ def select_model(query: str) -> tuple[str, str]:
     logger.info(f"Selected {MODEL_NAME} with endpoint {API_ENDPOINT} for general query: {query}")
     return MODEL_NAME, API_ENDPOINT
-@retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=4, max=10))
 def request_generation(
     api_key: str,
     api_base: str,
@@ -54,11 +59,28 @@ def request_generation(
     deep_search: bool = False,
 ) -> Generator[str, None, None]:
     from utils.web_search import web_search  # تأخير الاستيراد
     client = OpenAI(api_key=api_key, base_url=api_base, timeout=60.0)
     task_type = "general"
-    if "code" in message.lower() or "programming" in message.lower() or any(ext in message.lower() for ext in ["python", "javascript", "react", "django", "flask"]):
         task_type = "code"
-        enhanced_system_prompt = f"{system_prompt}\nYou are an expert programmer. Provide accurate, well-commented code with examples and explanations. Support frameworks like React, Django, Flask, and others as needed."
     elif any(keyword in message.lower() for keyword in ["analyze", "analysis", "تحليل"]):
         task_type = "analysis"
         enhanced_system_prompt = f"{system_prompt}\nProvide detailed analysis with step-by-step reasoning, examples, and data-driven insights."
@@ -80,14 +102,19 @@ def request_generation(
                 input_messages.append(clean_msg)
     if deep_search:
-        search_result = web_search(message)
-        input_messages.append({"role": "user", "content": f"User query: {message}\nWeb search context: {search_result}"})
     else:
         input_messages.append({"role": "user", "content": message})
     tools = tools if tools and "gpt-oss" in model_name else []
     tool_choice = tool_choice if tool_choice in ["auto", "none", "any", "required"] and "gpt-oss" in model_name else "none"
     try:
         stream = client.chat.completions.create(
             model=model_name,
@@ -111,11 +138,13 @@ def request_generation(
                 content = chunk.choices[0].delta.content
                 if content == "<|channel|>analysis<|message|>":
                     if not reasoning_started:
                         yield "analysis"
                         reasoning_started = True
                     continue
                 if content == "<|channel|>final<|message|>":
                     if reasoning_started and not reasoning_closed:
                         yield "assistantfinal"
                         reasoning_closed = True
                     continue
@@ -123,7 +152,8 @@ def request_generation(
                 saw_visible_output = True
                 buffer += content
-                if "\n" in buffer or len(buffer) > 2000:
                     yield buffer
                     buffer = ""
                 continue
@@ -140,10 +170,12 @@ def request_generation(
             if chunk.choices[0].finish_reason in ("stop", "tool_calls", "error"):
                 if buffer:
                     yield buffer
                     buffer = ""
                 if reasoning_started and not reasoning_closed:
                     yield "assistantfinal"
                     reasoning_closed = True
@@ -155,15 +187,20 @@ def request_generation(
                         except Exception:
                             args_text = str(last_tool_args)
                         msg += f"\n\n• Tool requested: **{last_tool_name}**\n• Arguments: `{args_text}`"
                     yield msg
                 if chunk.choices[0].finish_reason == "error":
                     yield f"Error: Unknown error"
                 break
         if buffer:
             yield buffer
     except Exception as e:
         logger.exception(f"[Gateway] Streaming failed for model {model_name}: {e}")
         if model_name == MODEL_NAME:
@@ -186,11 +223,13 @@ def request_generation(
                         content = chunk.choices[0].delta.content
                         if content == "<|channel|>analysis<|message|>":
                             if not reasoning_started:
                                 yield "analysis"
                                 reasoning_started = True
                             continue
                         if content == "<|channel|>final<|message|>":
                             if reasoning_started and not reasoning_closed:
                                 yield "assistantfinal"
                                 reasoning_closed = True
                             continue
@@ -198,31 +237,40 @@ def request_generation(
                         saw_visible_output = True
                         buffer += content
-                        if "\n" in buffer or len(buffer) > 2000:
                             yield buffer
                             buffer = ""
                         continue
                     if chunk.choices[0].finish_reason in ("stop", "error"):
                         if buffer:
                             yield buffer
                             buffer = ""
                         if reasoning_started and not reasoning_closed:
                             yield "assistantfinal"
                             reasoning_closed = True
                         if not saw_visible_output:
                             yield "No visible output produced."
                         if chunk.choices[0].finish_reason == "error":
                             yield f"Error: Unknown error with fallback model {fallback_model}"
                         break
                 if buffer:
                     yield buffer
             except Exception as e2:
                 logger.exception(f"[Gateway] Streaming failed for fallback model {fallback_model}: {e2}")
                 yield f"Error: Failed to load both models ({model_name} and {fallback_model}): {e2}"
                 try:
                     client = OpenAI(api_key=api_key, base_url=FALLBACK_API_ENDPOINT, timeout=60.0)
@@ -240,25 +288,33 @@ def request_generation(
                             content = chunk.choices[0].delta.content
                             saw_visible_output = True
                             buffer += content
-                            if "\n" in buffer or len(buffer) > 2000:
                                 yield buffer
                                 buffer = ""
                             continue
                         if chunk.choices[0].finish_reason in ("stop", "error"):
                             if buffer:
                                 yield buffer
                                 buffer = ""
                             if not saw_visible_output:
                                 yield "No visible output produced."
                             if chunk.choices[0].finish_reason == "error":
                                 yield f"Error: Unknown error with tertiary model {TERTIARY_MODEL_NAME}"
                             break
                     if buffer:
                         yield buffer
                 except Exception as e3:
                     logger.exception(f"[Gateway] Streaming failed for tertiary model {TERTIARY_MODEL_NAME}: {e3}")
                     yield f"Error: Failed to load all models: {e3}"
         else:
             yield f"Error: Failed to load model {model_name}: {e}"
 def format_final(analysis_text: str, visible_text: str) -> str:
@@ -318,6 +374,21 @@ def generate(message, history, system_prompt, temperature, reasoning_effort, ena
                     "required": ["task"],
                 },
             },
         }
     ] if "gpt-oss" in model_name else []
     tool_choice = "auto" if "gpt-oss" in model_name else "none"

 from pydoc import html
 from tenacity import retry, stop_after_attempt, wait_exponential
 import logging
+from cachetools import TTLCache
+import hashlib
 logger = logging.getLogger(__name__)
+# إعداد Cache
+cache = TTLCache(maxsize=100, ttl=600)  # Cache بحجم 100 ومدة 10 دقايق
 # تعريف LATEX_DELIMS
 LATEX_DELIMS = [
+    {"left": "$$", "right": "$$", "display": True},
+    {"left": "$", "right": "$", "display": False},
     {"left": "\\[", "right": "\\]", "display": True},
     {"left": "\\(", "right": "\\)", "display": False},
 ]
     logger.info(f"Selected {MODEL_NAME} with endpoint {API_ENDPOINT} for general query: {query}")
     return MODEL_NAME, API_ENDPOINT
+@retry(stop=stop_after_attempt(5), wait=wait_exponential(multiplier=2, min=4, max=30))
 def request_generation(
     api_key: str,
     api_base: str,
     deep_search: bool = False,
 ) -> Generator[str, None, None]:
     from utils.web_search import web_search  # تأخير الاستيراد
+    # إنشاء مفتاح للـ cache بناءً على المدخلات
+    cache_key = hashlib.md5(json.dumps({
+        "message": message,
+        "system_prompt": system_prompt,
+        "model_name": model_name,
+        "chat_history": chat_history,
+        "temperature": temperature,
+        "max_new_tokens": max_new_tokens
+    }, sort_keys=True).encode()).hexdigest()
+    if cache_key in cache:
+        logger.info(f"Cache hit for query: {message[:50]}...")
+        for chunk in cache[cache_key]:
+            yield chunk
+        return
     client = OpenAI(api_key=api_key, base_url=api_base, timeout=60.0)
     task_type = "general"
+    if any(keyword in message.lower() for keyword in ["code", "programming", "python", "javascript", "react", "django", "flask"]):
         task_type = "code"
+        enhanced_system_prompt = f"{system_prompt}\nYou are an expert programmer. Provide accurate, well-commented code with examples and explanations. Support frameworks like React, Django, Flask, and others as needed. Format code with triple backticks (```) and specify the language."
     elif any(keyword in message.lower() for keyword in ["analyze", "analysis", "تحليل"]):
         task_type = "analysis"
         enhanced_system_prompt = f"{system_prompt}\nProvide detailed analysis with step-by-step reasoning, examples, and data-driven insights."
                 input_messages.append(clean_msg)
     if deep_search:
+        try:
+            search_result = web_search(message)
+            input_messages.append({"role": "user", "content": f"User query: {message}\nWeb search context: {search_result}"})
+        except Exception as e:
+            logger.error(f"Web search failed: {e}")
+            input_messages.append({"role": "user", "content": message})
     else:
         input_messages.append({"role": "user", "content": message})
     tools = tools if tools and "gpt-oss" in model_name else []
     tool_choice = tool_choice if tool_choice in ["auto", "none", "any", "required"] and "gpt-oss" in model_name else "none"
+    cached_chunks = []
     try:
         stream = client.chat.completions.create(
             model=model_name,
                 content = chunk.choices[0].delta.content
                 if content == "<|channel|>analysis<|message|>":
                     if not reasoning_started:
+                        cached_chunks.append("analysis")
                         yield "analysis"
                         reasoning_started = True
                     continue
                 if content == "<|channel|>final<|message|>":
                     if reasoning_started and not reasoning_closed:
+                        cached_chunks.append("assistantfinal")
                         yield "assistantfinal"
                         reasoning_closed = True
                     continue
                 saw_visible_output = True
                 buffer += content
+                if "\n" in buffer or len(buffer) > 1000:  # تقليل حجم الـ buffer
+                    cached_chunks.append(buffer)
                     yield buffer
                     buffer = ""
                 continue
             if chunk.choices[0].finish_reason in ("stop", "tool_calls", "error"):
                 if buffer:
+                    cached_chunks.append(buffer)
                     yield buffer
                     buffer = ""
                 if reasoning_started and not reasoning_closed:
+                    cached_chunks.append("assistantfinal")
                     yield "assistantfinal"
                     reasoning_closed = True
                         except Exception:
                             args_text = str(last_tool_args)
                         msg += f"\n\n• Tool requested: **{last_tool_name}**\n• Arguments: `{args_text}`"
+                    cached_chunks.append(msg)
                     yield msg
                 if chunk.choices[0].finish_reason == "error":
+                    cached_chunks.append(f"Error: Unknown error")
                     yield f"Error: Unknown error"
                 break
         if buffer:
+            cached_chunks.append(buffer)
             yield buffer
+        cache[cache_key] = cached_chunks  # حفظ في الـ cache
     except Exception as e:
         logger.exception(f"[Gateway] Streaming failed for model {model_name}: {e}")
         if model_name == MODEL_NAME:
                         content = chunk.choices[0].delta.content
                         if content == "<|channel|>analysis<|message|>":
                             if not reasoning_started:
+                                cached_chunks.append("analysis")
                                 yield "analysis"
                                 reasoning_started = True
                             continue
                         if content == "<|channel|>final<|message|>":
                             if reasoning_started and not reasoning_closed:
+                                cached_chunks.append("assistantfinal")
                                 yield "assistantfinal"
                                 reasoning_closed = True
                             continue
                         saw_visible_output = True
                         buffer += content
+                        if "\n" in buffer or len(buffer) > 1000:
+                            cached_chunks.append(buffer)
                             yield buffer
                             buffer = ""
                         continue
                     if chunk.choices[0].finish_reason in ("stop", "error"):
                         if buffer:
+                            cached_chunks.append(buffer)
                             yield buffer
                             buffer = ""
                         if reasoning_started and not reasoning_closed:
+                            cached_chunks.append("assistantfinal")
                             yield "assistantfinal"
                             reasoning_closed = True
                         if not saw_visible_output:
+                            cached_chunks.append("No visible output produced.")
                             yield "No visible output produced."
                         if chunk.choices[0].finish_reason == "error":
+                            cached_chunks.append(f"Error: Unknown error with fallback model {fallback_model}")
                             yield f"Error: Unknown error with fallback model {fallback_model}"
                         break
                 if buffer:
+                    cached_chunks.append(buffer)
                     yield buffer
+                cache[cache_key] = cached_chunks
             except Exception as e2:
                 logger.exception(f"[Gateway] Streaming failed for fallback model {fallback_model}: {e2}")
+                cached_chunks.append(f"Error: Failed to load both models ({model_name} and {fallback_model}): {e2}")
                 yield f"Error: Failed to load both models ({model_name} and {fallback_model}): {e2}"
                 try:
                     client = OpenAI(api_key=api_key, base_url=FALLBACK_API_ENDPOINT, timeout=60.0)
                             content = chunk.choices[0].delta.content
                             saw_visible_output = True
                             buffer += content
+                            if "\n" in buffer or len(buffer) > 1000:
+                                cached_chunks.append(buffer)
                                 yield buffer
                                 buffer = ""
                             continue
                         if chunk.choices[0].finish_reason in ("stop", "error"):
                             if buffer:
+                                cached_chunks.append(buffer)
                                 yield buffer
                                 buffer = ""
                             if not saw_visible_output:
+                                cached_chunks.append("No visible output produced.")
                                 yield "No visible output produced."
                             if chunk.choices[0].finish_reason == "error":
+                                cached_chunks.append(f"Error: Unknown error with tertiary model {TERTIARY_MODEL_NAME}")
                                 yield f"Error: Unknown error with tertiary model {TERTIARY_MODEL_NAME}"
                             break
                     if buffer:
+                        cached_chunks.append(buffer)
                         yield buffer
+                    cache[cache_key] = cached_chunks
                 except Exception as e3:
                     logger.exception(f"[Gateway] Streaming failed for tertiary model {TERTIARY_MODEL_NAME}: {e3}")
+                    cached_chunks.append(f"Error: Failed to load all models: {e3}")
                     yield f"Error: Failed to load all models: {e3}"
         else:
+            cached_chunks.append(f"Error: Failed to load model {model_name}: {e}")
             yield f"Error: Failed to load model {model_name}: {e}"
 def format_final(analysis_text: str, visible_text: str) -> str:
                     "required": ["task"],
                 },
             },
+        },
+        {
+            "type": "function",
+            "function": {
+                "name": "code_formatter",
+                "description": "Format code for readability and consistency",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "code": {"type": "string", "description": "Code to format"},
+                        "language": {"type": "string", "description": "Programming language (e.g., Python, JavaScript)"},
+                    },
+                    "required": ["code", "language"],
+                },
+            },
         }
     ] if "gpt-oss" in model_name else []
     tool_choice = "auto" if "gpt-oss" in model_name else "none"