Update endpoints and session support

Dockerfile

@@ -19,14 +19,17 @@ RUN pip install --upgrade pip
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Create /data directory with correct permissions
+RUN mkdir -p /data && chmod -R 755 /data
+
 # Copy all project files
 COPY . .
 
 # Verify files in /app
 RUN ls -R /app
 
-# Expose port 7860 for Gradio
+# Expose port 7860 for FastAPI
 EXPOSE 7860
 
-# Run the Gradio app
+# Run the FastAPI app
 CMD ["python", "main.py"]

api/auth.py

@@ -0,0 +1,42 @@
+# api/auth.py
+from fastapi_users import FastAPIUsers
+from fastapi_users.authentication import CookieTransport, JWTStrategy, AuthenticationBackend
+from fastapi_users.db import SQLAlchemyUserDatabase
+from httpx_oauth.clients.google import GoogleOAuth2
+from httpx_oauth.clients.github import GitHubOAuth2
+from api.database import SessionLocal
+from api.models import User
+import os
+
+# إعداد Cookie Transport
+cookie_transport = CookieTransport(cookie_max_age=3600)
+
+# إعداد JWT Strategy
+SECRET = os.getenv("JWT_SECRET", "your_jwt_secret_here")  # ضعه في Space Secrets
+
+def get_jwt_strategy() -> JWTStrategy:
+    return JWTStrategy(secret=SECRET, lifetime_seconds=3600)
+
+auth_backend = AuthenticationBackend(
+    name="jwt",
+    transport=cookie_transport,
+    get_strategy=get_jwt_strategy,
+)
+
+# إعداد عملاء OAuth
+GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID")
+GOOGLE_CLIENT_SECRET = os.getenv("GOOGLE_CLIENT_SECRET")
+GITHUB_CLIENT_ID = os.getenv("GITHUB_CLIENT_ID")
+GITHUB_CLIENT_SECRET = os.getenv("GITHUB_CLIENT_SECRET")
+
+google_oauth_client = GoogleOAuth2(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET)
+github_oauth_client = GitHubOAuth2(GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET)
+
+# إعداد FastAPIUsers
+fastapi_users = FastAPIUsers[User, int](
+    lambda: SQLAlchemyUserDatabase(User, SessionLocal(), oauth_account_table=OAuthAccount),
+    [auth_backend],
+)
+
+# Dependency للحصول على المستخدم الحالي
+current_active_user = fastapi_users.current_user(active=True)

api/database.py

@@ -0,0 +1,27 @@
+# api/database.py
+import os
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+# جلب URL قاعدة البيانات من المتغيرات البيئية
+SQLALCHEMY_DATABASE_URL = os.getenv("SQLALCHEMY_DATABASE_URL")
+if not SQLALCHEMY_DATABASE_URL:
+    raise ValueError("SQLALCHEMY_DATABASE_URL is not set in environment variables.")
+
+# إنشاء المحرك
+engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False})
+
+# إعداد الجلسة
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+# قاعدة أساسية للنماذج
+Base = declarative_base()
+
+# دالة للحصول على الجلسة
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

api/endpoints.py

@@ -1,11 +1,16 @@
+# api/endpoints.py
 import os
-from fastapi import APIRouter, HTTPException, UploadFile, File
+import uuid
+from fastapi import APIRouter, Depends, HTTPException, Request, status, UploadFile, File
 from fastapi.responses import StreamingResponse
-import io
-from openai import OpenAI
 from api.models import QueryRequest
+from api.auth import current_active_user
+from api.database import get_db
+from sqlalchemy.orm import Session
 from utils.generation import request_generation, select_model
 from utils.web_search import web_search
+import io
+from openai import OpenAI
 
 router = APIRouter()
 
@@ -13,13 +18,16 @@ HF_TOKEN = os.getenv("HF_TOKEN")
 BACKUP_HF_TOKEN = os.getenv("BACKUP_HF_TOKEN")
 API_ENDPOINT = os.getenv("API_ENDPOINT", "https://router.huggingface.co/v1")
 FALLBACK_API_ENDPOINT = os.getenv("FALLBACK_API_ENDPOINT", "https://api-inference.huggingface.co")
-MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:cerebras")
-SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2")
-TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:cerebras")
+MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:together")
+SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2:featherless-ai")
+TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:together")
 CLIP_BASE_MODEL = os.getenv("CLIP_BASE_MODEL", "Salesforce/blip-image-captioning-large")
 CLIP_LARGE_MODEL = os.getenv("CLIP_LARGE_MODEL", "openai/clip-vit-large-patch14")
 ASR_MODEL = os.getenv("ASR_MODEL", "openai/whisper-large-v3")
-TTS_MODEL = os.getenv("TTS_MODEL", "espnet/kan-bayashi_arabic_vits")
+TTS_MODEL = os.getenv("TTS_MODEL", "facebook/mms-tts-ara")
+
+# تخزين عدد الرسائل لكل جلسة (بديل مؤقت)
+session_message_counts = {}
 
 @router.get("/api/model-info")
 def model_info():
@@ -45,7 +53,26 @@ async def performance_stats():
     }
 
 @router.post("/api/chat")
-async def chat_endpoint(req: QueryRequest):
+async def chat_endpoint(
+    request: Request,
+    req: QueryRequest,
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     model_name, api_endpoint = select_model(req.message, input_type="text")
     stream = request_generation(
         api_key=HF_TOKEN,
@@ -67,7 +94,26 @@ async def chat_endpoint(req: QueryRequest):
     return {"response": response}
 
 @router.post("/api/audio-transcription")
-async def audio_transcription_endpoint(file: UploadFile = File(...)):
+async def audio_transcription_endpoint(
+    request: Request,
+    file: UploadFile = File(...),
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     model_name, api_endpoint = select_model("transcribe audio", input_type="audio")
     audio_data = await file.read()
     stream = request_generation(
@@ -86,14 +132,33 @@ async def audio_transcription_endpoint(file: UploadFile = File(...)):
     return {"transcription": response}
 
 @router.post("/api/text-to-speech")
-async def text_to_speech_endpoint(req: dict):
+async def text_to_speech_endpoint(
+    request: Request,
+    req: dict,
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     text = req.get("text", "")
     model_name, api_endpoint = select_model("text to speech", input_type="tts")
     stream = request_generation(
         api_key=HF_TOKEN,
         api_base=api_endpoint,
         message=text,
-        system_prompt="Convert the provided text to speech using Parler-TTS.",
+        system_prompt="Convert the provided text to speech using a text-to-speech model.",
         model_name=model_name,
         temperature=0.7,
         max_new_tokens=128000,
@@ -104,7 +169,26 @@ async def text_to_speech_endpoint(req: dict):
     return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
 
 @router.post("/api/code")
-async def code_endpoint(req: dict):
+async def code_endpoint(
+    request: Request,
+    req: dict,
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     framework = req.get("framework")
     task = req.get("task")
     code = req.get("code", "")
@@ -129,7 +213,26 @@ async def code_endpoint(req: dict):
     return {"generated_code": response}
 
 @router.post("/api/analysis")
-async def analysis_endpoint(req: dict):
+async def analysis_endpoint(
+    request: Request,
+    req: dict,
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     message = req.get("text", "")
     output_format = req.get("output_format", "text")
     model_name, api_endpoint = select_model(message, input_type="text")
@@ -151,7 +254,27 @@ async def analysis_endpoint(req: dict):
     return {"analysis": response}
 
 @router.post("/api/image-analysis")
-async def image_analysis_endpoint(file: UploadFile = File(...), output_format: str = "text"):
+async def image_analysis_endpoint(
+    request: Request,
+    file: UploadFile = File(...),
+    output_format: str = "text",
+    user: str = Depends(current_active_user, use_cache=False),
+    db: Session = Depends(get_db)
+):
+    session_id = request.session.get("session_id")
+    if not user and not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        session_message_counts[session_id] = 0
+
+    if not user:
+        session_message_counts[session_id] = session_message_counts.get(session_id, 0) + 1
+        if session_message_counts[session_id] > 4:
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Message limit reached. Please log in to continue."
+            )
+
     model_name, api_endpoint = select_model("analyze image", input_type="image")
     image_data = await file.read()
     stream = request_generation(

api/models.py

@@ -1,11 +1,34 @@
-from pydantic import BaseModel
+# api/models.py
+from fastapi_users.db import SQLAlchemyBaseUserTable, SQLAlchemyBaseOAuthAccountTable
+from sqlalchemy import Column, Integer, String, Boolean
+from sqlalchemy.orm import relationship
+from sqlalchemy.ext.declarative import declarative_base
+from pydantic import BaseModel, Field
 from typing import List, Optional
 
+Base = declarative_base()
+
+# جدول OAuth Accounts لتخزين بيانات تسجيل الدخول الخارجي
+class OAuthAccount(SQLAlchemyBaseOAuthAccountTable, Base):
+    __tablename__ = "oauth_accounts"
+    pass
+
+# نموذج المستخدم
+class User(SQLAlchemyBaseUserTable, Base):
+    __tablename__ = "users"
+    id = Column(Integer, primary_key=True, index=True)
+    email = Column(String, unique=True, index=True, nullable=False)
+    hashed_password = Column(String, nullable=True)  # nullable لأن OAuth ممكن ما يحتاج باسورد
+    is_active = Column(Boolean, default=True)
+    is_superuser = Column(Boolean, default=False)
+    oauth_accounts = relationship("OAuthAccount", back_populates="user")
+
+# نموذج طلب الاستعلام (كما هو)
 class QueryRequest(BaseModel):
     message: str
-    system_prompt: str = "You are an expert assistant providing detailed, comprehensive, and well-structured responses. For code, include comments, examples, and complete implementations. For image-related queries, provide detailed analysis or descriptions. For general queries, provide in-depth explanations with examples and additional context where applicable. Respond in the requested output format (text or audio)."
-    history: Optional[List[dict]] = None
-    temperature: float = 0.7
-    max_new_tokens: int = 128000
-    enable_browsing: bool = False
-    output_format: str = "text"  # جديد: دعم نوع الإخراج
+    system_prompt: Optional[str] = "You are an expert assistant providing detailed, comprehensive, and well-structured responses."
+    history: Optional[List[dict]] = []
+    temperature: Optional[float] = 0.7
+    max_new_tokens: Optional[int] = 128000
+    enable_browsing: Optional[bool] = True
+    output_format: Optional[str] = "text"

main.py

@@ -1,15 +1,22 @@
 import os
 import logging
-from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi import FastAPI, Request, Depends, HTTPException, status, Query
+from fastapi.responses import HTMLResponse, RedirectResponse, PlainTextResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from starlette.middleware.base import BaseHTTPMiddleware
+from starlette.middleware.sessions import SessionMiddleware
 from fastapi.openapi.docs import get_swagger_ui_html
-import gradio as gr
+from fastapi.middleware.cors import CORSMiddleware
 from api.endpoints import router as api_router
-from utils.generation import generate, LATEX_DELIMS
-import io
+from api.auth import fastapi_users, auth_backend, current_active_user, google_oauth_client, github_oauth_client
+from api.database import get_db, engine, Base
+from api.models import User
+from motor.motor_asyncio import AsyncIOMotorClient
+from pydantic import BaseModel
+from typing import List
+import uvicorn
+import markdown2
 
 # إعداد التسجيل
 logging.basicConfig(level=logging.INFO)
@@ -20,354 +27,83 @@ logger.info("Files in /app/: %s", os.listdir("/app"))
 
 # إعداد العميل لـ Hugging Face Inference API
 HF_TOKEN = os.getenv("HF_TOKEN")
-BACKUP_HF_TOKEN = os.getenv("BACKUP_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: 0 auto;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #f5f7fa;
-    padding: 20px;
-}
-.chatbot {
-    border-radius: 12px;
-    background: #ffffff;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    height: 70vh;
-    overflow-y: auto;
-    padding: 20px;
-}
-.chatbot .message {
-    margin-bottom: 15px;
-    padding: 10px 15px;
-    border-radius: 8px;
-}
-.chatbot .user {
-    background: #25D366;
-    color: white;
-    margin-left: 20%;
-    border-radius: 8px 8px 0 8px;
-}
-.chatbot .assistant {
-    background: #f1f0f0;
-    margin-right: 20%;
-    border-radius: 8px 8px 8px 0;
-}
-.input-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 50px;
-    padding: 10px;
-    margin: 20px 0;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-}
-.input-textbox {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    font-size: 16px;
-    padding: 12px 15px;
-    background: transparent;
-}
-.input-icon, .submit-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 20px;
-    padding: 10px;
-    color: #333;
-    transition: color 0.2s;
-}
-.input-icon:hover, .submit-btn:hover {
-    color: #25D366;
-}
-.submit-btn {
-    background: #25D366;
-    color: white;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.output-container {
-    background: #f9f9f9;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 10px 0;
-}
-.audio-output-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: #ffffff;
-    padding: 10px;
-    border-radius: 8px;
-    margin-top: 10px;
-}
-.settings-accordion {
-    background: #ffffff;
-    border-radius: 8px;
-    padding: 15px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-}
-.upload-preview {
-    max-width: 200px;
-    max-height: 200px;
-    border-radius: 8px;
-    margin: 10px 0;
-}
-"""
-
-# دالة لمعالجة الإدخال
-def process_input(message, audio_input=None, image_input=None, history=None, system_prompt=None, temperature=0.7, reasoning_effort="medium", enable_browsing=True, max_new_tokens=128000, output_format="text"):
-    input_type = "text"
-    audio_data = None
-    image_data = None
-    if audio_input:
-        input_type = "audio"
-        try:
-            with open(audio_input, "rb") as f:
-                audio_data = f.read()
-            message = "Transcribe this audio"
-        except Exception as e:
-            logger.error(f"Failed to read audio file: {e}")
-            return f"Error: Failed to read audio file: {e}", None, [], ""
-    elif image_input:
-        input_type = "image"
-        try:
-            with open(image_input, "rb") as f:
-                image_data = f.read()
-            message = "Analyze this image"
-        except Exception as e:
-            logger.error(f"Failed to read image file: {e}")
-            return f"Error: Failed to read image file: {e}", None, [], ""
-    
-    response_text = ""
-    audio_response = None
-    chatbot_history = history or []
-    try:
-        for chunk in generate(
-            message=message,
-            history=history,
-            system_prompt=system_prompt,
-            temperature=temperature,
-            reasoning_effort=reasoning_effort,
-            enable_browsing=enable_browsing,
-            max_new_tokens=max_new_tokens,
-            input_type=input_type,
-            audio_data=audio_data,
-            image_data=image_data,
-            output_format=output_format
-        ):
-            if isinstance(chunk, bytes):
-                audio_response = io.BytesIO(chunk)
-                audio_response.name = "response.wav"
-            else:
-                response_text += chunk
-            chatbot_history.append({"role": "assistant", "content": response_text})
-            yield response_text or "Processing...", audio_response, chatbot_history, ""
-    except Exception as e:
-        logger.error(f"Generation failed: {e}")
-        return f"Error: Generation failed: {e}", None, [], ""
-
-# دالة لتنظيف المدخلات بعد الإرسال
-def clear_inputs(response_text, audio_response, chatbot, message):
-    return response_text, audio_response, [], ""
+# إعداد MongoDB
+MONGO_URI = os.getenv("MONGODB_URI")
+if not MONGO_URI:
+    logger.error("MONGODB_URI is not set in environment variables.")
+    raise ValueError("MONGODB_URI is required for MongoDB.")
 
-# دالة لمعاينة الملفات
-def preview_file(file_input, audio_input):
-    if file_input:
-        return gr.update(value=f"<img src='{file_input}' class='upload-preview'>", visible=True), gr.update(visible=False)
-    if audio_input:
-        return gr.update(visible=False), gr.update(value=f"<audio controls src='{audio_input}'></audio>", visible=True)
-    return gr.update(visible=False), gr.update(visible=False)
+client = AsyncIOMotorClient(MONGO_URI)
+db = client["hager"]
 
-# دالة لمعالجة زر إرسال الصوت
-def submit_audio(audio_input, output_format):
-    if not audio_input:
-        return "Please upload or record an audio file.", None, [], ""
-    response_text = ""
-    audio_response = None
-    chatbot_history = []
-    try:
-        for text, audio in process_input(message="", audio_input=audio_input, output_format=output_format):
-            response_text = text or "No text response generated."
-            audio_response = audio
-            chatbot_history.append({"role": "assistant", "content": response_text})
-        return response_text, audio_response, chatbot_history, ""
-    except Exception as e:
-        logger.error(f"Audio submission failed: {e}")
-        return f"Error: Audio processing failed: {e}", None, [], ""
-
-# دالة لمعالجة زر إرسال الصورة
-def submit_image(image_input, output_format):
-    if not image_input:
-        return "Please upload an image.", None, [], ""
-    response_text = ""
-    audio_response = None
-    chatbot_history = []
-    try:
-        for text, audio in process_input(message="", image_input=image_input, output_format=output_format):
-            response_text = text or "No text response generated."
-            audio_response = audio
-            chatbot_history.append({"role": "assistant", "content": response_text})
-        return response_text, audio_response, chatbot_history, ""
-    except Exception as e:
-        logger.error(f"Image submission failed: {e}")
-        return f"Error: Image processing failed: {e}", None, [], ""
+# إعداد Jinja2 مع دعم Markdown
+templates = Jinja2Templates(directory="templates")
+templates.env.filters['markdown'] = lambda text: markdown2.markdown(text)
 
-# إعداد واجهة Gradio
-with gr.Blocks(css=css, theme="gradio/soft") as chatbot_ui:
-    gr.Markdown(
-        """
-        <div style="text-align: center;">
-            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" style="width: 100px; margin-bottom: 10px;">
-            <h1>MGZon Chatbot</h1>
-            <p>A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS. Type your query, upload images/files, or record audio in one sleek input form!</p>
-        </div>
-        """
-    )
-    with gr.Row():
-        with gr.Column(scale=3):
-            chatbot = gr.Chatbot(
-                label="Chat",
-                height=600,
-                latex_delimiters=LATEX_DELIMS,
-                elem_classes="chatbot",
-                type="messages"
-            )
-        with gr.Column(scale=1):
-            with gr.Accordion("⚙️ Settings", open=False, elem_classes="settings-accordion"):
-                system_prompt = gr.Textbox(
-                    label="System Prompt",
-                    value="You are an expert assistant providing detailed, comprehensive, and well-structured responses. Support text, audio, image, and file inputs. For audio, transcribe using Whisper. For text-to-speech, use TTS. For images, analyze content appropriately. Respond in the requested output format (text or audio).",
-                    lines=4
-                )
-                temperature = gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, step=0.1, value=0.7)
-                reasoning_effort = gr.Radio(label="Reasoning Effort", choices=["low", "medium", "high"], value="medium")
-                enable_browsing = gr.Checkbox(label="Enable DeepSearch (web browsing)", value=True)
-                max_new_tokens = gr.Slider(label="Max New Tokens", minimum=50, maximum=128000, step=50, value=128000)
-                output_format = gr.Radio(label="Output Format", choices=["text", "audio"], value="text")
-    with gr.Row():
-        with gr.Column():
-            with gr.Group(elem_classes="input-container"):
-                message = gr.Textbox(
-                    placeholder="Type your message, or use icons to upload files/audio...",
-                    lines=1,
-                    elem_classes="input-textbox",
-                    show_label=False
-                )
-                file_input = gr.File(
-                    file_types=["image", ".mp3", ".wav"],
-                    show_label=False,
-                    elem_classes="input-icon",
-                    visible=False
-                )
-                audio_input = gr.Audio(
-                    type="filepath",
-                    show_label=False,
-                    elem_classes="input-icon",
-                    visible=False
-                )
-                file_preview = gr.HTML(label="File Preview", visible=False)
-                audio_preview = gr.HTML(label="Audio Preview", visible=False)
-                file_btn = gr.Button("📎", elem_classes="input-icon")
-                audio_btn = gr.Button("🎤", elem_classes="input-icon")
-                submit_btn = gr.Button("➡️", elem_classes="submit-btn")
-    output_text = gr.Textbox(label="Response", lines=10, elem_classes="output-container")
-    output_audio = gr.Audio(label="Voice Output", type="filepath", elem_classes="audio-output-container", autoplay=True)
+# موديل للمقالات
+class BlogPost(BaseModel):
+    id: str
+    title: str
+    content: str
+    author: str
+    date: str
+    created_at: str
 
-    # ربط الأحداث
-    file_btn.click(
-        fn=lambda: gr.update(visible=True),
-        outputs=file_input
-    )
-    audio_btn.click(
-        fn=lambda: gr.update(visible=True),
-        outputs=audio_input
-    )
-    file_input.change(
-        fn=preview_file,
-        inputs=[file_input, audio_input],
-        outputs=[file_preview, audio_preview]
-    )
-    audio_input.change(
-        fn=preview_file,
-        inputs=[file_input, audio_input],
-        outputs=[file_preview, audio_preview]
-    )
-    submit_btn.click(
-        fn=process_input,
-        inputs=[message, audio_input, file_input, chatbot, system_prompt, temperature, reasoning_effort, enable_browsing, max_new_tokens, output_format],
-        outputs=[output_text, output_audio, chatbot, message],
-    ).then(
-        fn=clear_inputs,
-        inputs=[output_text, output_audio, chatbot, message],
-        outputs=[output_text, output_audio, chatbot, message]
-    ).then(
-        fn=lambda: [gr.update(visible=False), gr.update(visible=False)],
-        outputs=[file_preview, audio_preview]
-    )
-    message.submit(
-        fn=process_input,
-        inputs=[message, audio_input, file_input, chatbot, system_prompt, temperature, reasoning_effort, enable_browsing, max_new_tokens, output_format],
-        outputs=[output_text, output_audio, chatbot, message],
-    ).then(
-        fn=clear_inputs,
-        inputs=[output_text, output_audio, chatbot, message],
-        outputs=[output_text, output_audio, chatbot, message]
-    ).then(
-        fn=lambda: [gr.update(visible=False), gr.update(visible=False)],
-        outputs=[file_preview, audio_preview]
-    )
-    file_input.change(
-        fn=submit_image,
-        inputs=[file_input, output_format],
-        outputs=[output_text, output_audio, chatbot, message],
-    ).then(
-        fn=clear_inputs,
-        inputs=[output_text, output_audio, chatbot, message],
-        outputs=[output_text, output_audio, chatbot, message]
-    ).then(
-        fn=lambda: [gr.update(visible=False), gr.update(visible=False)],
-        outputs=[file_preview, audio_preview]
-    )
-    audio_input.change(
-        fn=submit_audio,
-        inputs=[audio_input, output_format],
-        outputs=[output_text, output_audio, chatbot, message],
-    ).then(
-        fn=clear_inputs,
-        inputs=[output_text, output_audio, chatbot, message],
-        outputs=[output_text, output_audio, chatbot, message]
-    ).then(
-        fn=lambda: [gr.update(visible=False), gr.update(visible=False)],
-        outputs=[file_preview, audio_preview]
-    )
+# إعدادات الـ queue
+QUEUE_SIZE = int(os.getenv("QUEUE_SIZE", 80))
+CONCURRENCY_LIMIT = int(os.getenv("CONCURRENCY_LIMIT", 20))
 
 # إعداد FastAPI
 app = FastAPI(title="MGZon Chatbot API")
 
-# ربط Gradio مع FastAPI
-app = gr.mount_gradio_app(app, chatbot_ui, path="/gradio")
+# إضافة SessionMiddleware
+app.add_middleware(SessionMiddleware, secret_key=os.getenv("JWT_SECRET"))
 
-# ربط الملفات الثابتة والقوالب
+# إنشاء الجداول ��لقائيًا
+Base.metadata.create_all(bind=engine)
+
+# ربط الملفات الثابتة
 app.mount("/static", StaticFiles(directory="static"), name="static")
-templates = Jinja2Templates(directory="templates")
+
+# إضافة CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["https://mgzon-mgzon-app.hf.space"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# إضافة auth routers
+app.include_router(
+    fastapi_users.get_auth_router(auth_backend),
+    prefix="/auth/jwt",
+    tags=["auth"],
+)
+app.include_router(
+    fastapi_users.get_register_router(),
+    prefix="/auth",
+    tags=["auth"],
+)
+app.include_router(
+    fastapi_users.get_users_router(),
+    prefix="/users",
+    tags=["users"],
+)
+app.include_router(
+    fastapi_users.get_oauth_router(google_oauth_client, auth_backend, os.getenv("JWT_SECRET"), redirect_url="https://mgzon-mgzon-app.hf.space/auth/google/callback"),
+    prefix="/auth/google",
+    tags=["auth"],
+)
+app.include_router(
+    fastapi_users.get_oauth_router(github_oauth_client, auth_backend, os.getenv("JWT_SECRET"), redirect_url="https://mgzon-mgzon-app.hf.space/auth/github/callback"),
+    prefix="/auth/github",
+    tags=["auth"],
+)
 
 # Middleware لمعالجة 404
 class NotFoundMiddleware(BaseHTTPMiddleware):
@@ -386,8 +122,32 @@ app.add_middleware(NotFoundMiddleware)
 
 # Root endpoint
 @app.get("/", response_class=HTMLResponse)
-async def root(request: Request):
-    return templates.TemplateResponse("index.html", {"request": request})
+async def root(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+    return templates.TemplateResponse("index.html", {"request": request, "user": user})
+
+# Chat endpoint
+@app.get("/chat", response_class=HTMLResponse)
+async def chat(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+    return templates.TemplateResponse("chat.html", {"request": request, "user": user})
+
+# About endpoint
+@app.get("/about", response_class=HTMLResponse)
+async def about(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+    return templates.TemplateResponse("about.html", {"request": request, "user": user})
+
+# Blog endpoint (قائمة المقالات)
+@app.get("/blog", response_class=HTMLResponse)
+async def blog(request: Request, skip: int = Query(0, ge=0), limit: int = Query(10, ge=1, le=100)):
+    posts = await db.blog_posts.find().skip(skip).limit(limit).to_list(limit)
+    return templates.TemplateResponse("blog.html", {"request": request, "posts": posts})
+
+# Blog post endpoint (عرض مقالة كاملة)
+@app.get("/blog/{post_id}", response_class=HTMLResponse)
+async def blog_post(request: Request, post_id: str):
+    post = await db.blog_posts.find_one({"id": post_id})
+    if not post:
+        raise HTTPException(status_code=404, detail="Post not found")
+    return templates.TemplateResponse("blog_post.html", {"request": request, "post": post})
 
 # Docs endpoint
 @app.get("/docs", response_class=HTMLResponse)
@@ -399,12 +159,72 @@ async def docs(request: Request):
 async def swagger_ui():
     return get_swagger_ui_html(openapi_url="/openapi.json", title="MGZon API Documentation")
 
+# Sitemap endpoint (ديناميكي)
+@app.get("/sitemap.xml", response_class=PlainTextResponse)
+async def sitemap():
+    posts = await db.blog_posts.find().to_list(100)
+    xml = '<?xml version="1.0" encoding="UTF-8"?>\n'
+    xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>daily</changefreq>\n'
+    xml += '    <priority>1.0</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/chat</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>daily</changefreq>\n'
+    xml += '    <priority>0.8</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/about</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>weekly</changefreq>\n'
+    xml += '    <priority>0.7</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/login</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>weekly</changefreq>\n'
+    xml += '    <priority>0.8</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/register</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>weekly</changefreq>\n'
+    xml += '    <priority>0.8</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/docs</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>weekly</changefreq>\n'
+    xml += '    <priority>0.9</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/blog</loc>\n'
+    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += '    <changefreq>daily</changefreq>\n'
+    xml += '    <priority>0.9</priority>\n'
+    xml += '  </url>\n'
+    for post in posts:
+        xml += '  <url>\n'
+        xml += f'    <loc>https://mgzon-mgzon-app.hf.space/blog/{post["id"]}</loc>\n'
+        xml += f'    <lastmod>{post["date"]}</lastmod>\n'
+        xml += '    <changefreq>weekly</changefreq>\n'
+        xml += '    <priority>0.9</priority>\n'
+        xml += '  </url>\n'
+    xml += '</urlset>'
+    return xml
+
 # Redirect لـ /gradio
-@app.get("/launch-chatbot", response_class=RedirectResponse)
+@app.get("/gradio", response_class=RedirectResponse)
 async def launch_chatbot():
-    return RedirectResponse(url="/gradio", status_code=302)
+    return RedirectResponse(url="/chat", status_code=302)
+
+# ربط API endpoints
+app.include_router(api_router)
 
 # تشغيل الخادم
 if __name__ == "__main__":
-    import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=int(os.getenv("PORT", 7860)))

requirements.txt

@@ -16,10 +16,20 @@ pydub==0.25.1
 ffmpeg-python==0.2.0
 numpy==1.26.4
 parler-tts @ git+https://github.com/huggingface/parler-tts.git@5d0aca9753ab74ded179732f5bd797f7a8c6f8ee
-torch>=2.0.0
+torch==2.4.1
 torchaudio==2.4.1
 transformers==4.43.3
 webrtcvad==2.0.10
 Pillow==10.4.0
 urllib3==2.0.7
 protobuf==3.19.6
+fastapi-users[sqlalchemy]>=13.0.0
+sqlalchemy>=2.0.0
+python-jose[cryptography]>=3.3.0
+passlib[bcrypt]>=1.7.4
+httpx-oauth
+python-multipart
+aiofiles
+motor
+redis
+markdown2

space.yaml

@@ -7,4 +7,9 @@ sdk: fastapi
 sdk_version: "0.101.0"
 app_file: main.py
 pinned: false
----
+python_version: "3.10"
+resources:
+  cpu: 2
+  memory: 8Gi
+  disk: 20Gi
+---

static/css/styles.css

@@ -234,3 +234,181 @@ footer {
         margin-left: 0;
     }
 }
+
+/* /static/css/style.css */
+.chat-title {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: #e6eefc;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px 0;
+}
+
+.chat-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px;
+  background: #ffffff;
+  border-radius: 50px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.chat-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 70vh;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f7fa;
+}
+
+#chatArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  padding: 20px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#chatBox {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.bubble {
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  border-radius: 8px;
+  max-width: 80%;
+}
+
+.bubble-user {
+  background: #25D366;
+  color: white;
+  margin-left: 20%;
+  border-radius: 8px 8px 0 8px;
+}
+
+.bubble-assist {
+  background: #f1f0f0;
+  margin-right: 20%;
+  border-radius: 8px 8px 8px 0;
+}
+
+#inputContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 50px;
+  padding: 10px;
+  margin: 20px 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+#userInput {
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  padding: 12px 15px;
+  background: transparent;
+}
+
+#rightIconGroup button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 10px;
+  color: #333;
+  transition: color 0.2s;
+}
+
+#rightIconGroup button:hover {
+  color: #25D366;
+}
+
+#sendBtn {
+  background: #25D366;
+  color: white;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-preview {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 8px;
+  margin: 10px 0;
+}
+
+.audio-preview {
+  margin: 10px 0;
+}
+
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #25D366;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.md-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.md-content th, .md-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.md-content th {
+  background: #f1f0f0;
+}
+
+.styled-hr {
+  border: none;
+  height: 1px;
+  background: #ddd;
+  margin: 20px 0;
+}

static/google97468ef1f6b6e804.html

@@ -0,0 +1 @@
+google-site-verification: google97468ef1f6b6e804.html

static/js/chat.js

@@ -0,0 +1,389 @@
+// static/js/chat.js
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+
+// Prism.
+Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
+
+// UI elements.
+const chatArea = document.getElementById('chatArea');
+const chatBox = document.getElementById('chatBox');
+const initialContent = document.getElementById('initialContent');
+const form = document.getElementById('footerForm');
+const input = document.getElementById('userInput');
+const btn = document.getElementById('sendBtn');
+const stopBtn = document.getElementById('stopBtn');
+const fileBtn = document.getElementById('fileBtn');
+const audioBtn = document.getElementById('audioBtn');
+const fileInput = document.getElementById('fileInput');
+const audioInput = document.getElementById('audioInput');
+const filePreview = document.getElementById('filePreview');
+const audioPreview = document.getElementById('audioPreview');
+const promptItems = document.querySelectorAll('.prompt-item');
+const mainHeader = document.getElementById('mainHeader');
+const chatHeader = document.getElementById('chatHeader');
+const homeBtn = document.getElementById('homeBtn');
+const clearBtn = document.getElementById('clearBtn');
+const loginBtn = document.getElementById('loginBtn');
+const messageLimitWarning = document.getElementById('messageLimitWarning');
+
+// Track state.
+let streamMsg = null;
+let conversationHistory = JSON.parse(sessionStorage.getItem('conversationHistory') || '[]');
+let currentAssistantText = "";
+let isRequestActive = false;
+let abortController = null;
+
+// تحميل المحادثة عند تحميل الصفحة
+document.addEventListener('DOMContentLoaded', () => {
+    AOS.init({
+        duration: 800,
+        easing: 'ease-out-cubic',
+        once: true,
+        offset: 50
+    });
+    if (conversationHistory.length > 0) {
+        enterChatView();
+        conversationHistory.forEach(msg => {
+            addMsg(msg.role, msg.content);
+        });
+    }
+});
+
+// تحقق من الـ token
+function checkAuth() {
+    return localStorage.getItem('token');
+}
+
+// Render markdown content.
+function renderMarkdown(el) {
+    const raw = el.dataset.text || "";
+    const html = marked.parse(raw, {
+        gfm: true,
+        breaks: true,
+        smartLists: true,
+        smartypants: false,
+        headerIds: false
+    });
+    el.innerHTML = '<div class="md-content">' + html + '</div>';
+    const wrapper = el.querySelector('.md-content');
+
+    // Wrap tables.
+    const tables = wrapper.querySelectorAll('table');
+    tables.forEach(t => {
+        if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
+        const div = document.createElement('div');
+        div.className = 'table-wrapper';
+        t.parentNode.insertBefore(div, t);
+        div.appendChild(t);
+    });
+
+    // Style horizontal rules.
+    const hrs = wrapper.querySelectorAll('hr');
+    hrs.forEach(h => {
+        if (!h.classList.contains('styled-hr')) {
+            h.classList.add('styled-hr');
+        }
+    });
+
+    // Highlight code.
+    Prism.highlightAllUnder(wrapper);
+}
+
+// Chat view.
+function enterChatView() {
+    mainHeader.style.display = 'none';
+    chatHeader.style.display = 'flex';
+    chatHeader.setAttribute('aria-hidden', 'false');
+    chatBox.style.display = 'flex';
+    initialContent.style.display = 'none';
+}
+
+// Home view.
+function leaveChatView() {
+    mainHeader.style.display = 'flex';
+    chatHeader.style.display = 'none';
+    chatHeader.setAttribute('aria-hidden', 'true');
+    chatBox.style.display = 'none';
+    initialContent.style.display = 'flex';
+}
+
+// Chat bubble.
+function addMsg(who, text) {
+    const div = document.createElement('div');
+    div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
+    div.dataset.text = text;
+    renderMarkdown(div);
+    chatBox.appendChild(div);
+    chatBox.style.display = 'flex';
+    chatBox.scrollTop = chatBox.scrollHeight;
+    return div;
+}
+
+// Clear all chat.
+function clearAllMessages() {
+    stopStream(true);
+    conversationHistory = [];
+    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    currentAssistantText = "";
+    if (streamMsg) {
+        const loadingEl = streamMsg.querySelector('.loading');
+        if (loadingEl) loadingEl.remove();
+        streamMsg = null;
+    }
+    chatBox.innerHTML = "";
+    input.value = "";
+    btn.disabled = true;
+    stopBtn.style.display = 'none';
+    btn.style.display = 'inline-flex';
+    filePreview.style.display = 'none';
+    audioPreview.style.display = 'none';
+    messageLimitWarning.classList.add('hidden');
+    enterChatView();
+}
+
+// File preview.
+function previewFile() {
+    if (fileInput.files.length > 0) {
+        const file = fileInput.files[0];
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
+                filePreview.style.display = 'block';
+                audioPreview.style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    if (audioInput.files.length > 0) {
+        const file = audioInput.files[0];
+        if (file.type.startsWith('audio/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
+                audioPreview.style.display = 'block';
+                filePreview.style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+}
+
+// Send user message.
+async function submitMessage() {
+    if (isRequestActive) return;
+    let message = input.value.trim();
+    let formData = new FormData();
+    let endpoint = '/api/chat';
+    let inputType = 'text';
+    let outputFormat = 'text';
+
+    if (fileInput.files.length > 0) {
+        const file = fileInput.files[0];
+        if (file.type.startsWith('image/')) {
+            endpoint = '/api/image-analysis';
+            inputType = 'image';
+            message = 'Analyze this image';
+            formData.append('file', file);
+            formData.append('output_format', 'text');
+        }
+    } else if (audioInput.files.length > 0) {
+        const file = audioInput.files[0];
+        if (file.type.startsWith('audio/')) {
+            endpoint = '/api/audio-transcription';
+            inputType = 'audio';
+            message = 'Transcribe this audio';
+            formData.append('file', file);
+        }
+    } else if (message) {
+        formData.append('message', message);
+        formData.append('system_prompt', 'You are an expert assistant providing detailed, comprehensive, and well-structured responses.');
+        formData.append('history', JSON.stringify(conversationHistory));
+        formData.append('temperature', '0.7');
+        formData.append('max_new_tokens', '128000');
+        formData.append('enable_browsing', 'true');
+        formData.append('output_format', 'text');
+    } else {
+        return;
+    }
+
+    enterChatView();
+    addMsg('user', message);
+    conversationHistory.push({ role: 'user', content: message });
+    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    streamMsg = addMsg('assistant', '');
+    const loadingEl = document.createElement('span');
+    loadingEl.className = 'loading';
+    streamMsg.appendChild(loadingEl);
+    stopBtn.style.display = 'inline-flex';
+    btn.style.display = 'none';
+    input.value = '';
+    btn.disabled = true;
+    filePreview.style.display = 'none';
+    audioPreview.style.display = 'none';
+
+    isRequestActive = true;
+    abortController = new AbortController();
+
+    try {
+        const token = checkAuth();
+        const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            body: formData,
+            headers: headers,
+            signal: abortController.signal
+        });
+
+        if (!response.ok) {
+            if (response.status === 403) {
+                messageLimitWarning.classList.remove('hidden');
+                input.disabled = true;
+                const loadingEl = streamMsg.querySelector('.loading');
+                if (loadingEl) loadingEl.remove();
+                streamMsg = null;
+                isRequestActive = false;
+                abortController = null;
+                btn.style.display = 'inline-flex';
+                stopBtn.style.display = 'none';
+                return;
+            }
+            if (response.status === 401) {
+                localStorage.removeItem('token');
+                window.location.href = '/login';
+                return;
+            }
+            throw new Error('Request failed');
+        }
+
+        if (endpoint === '/api/audio-transcription') {
+            const data = await response.json();
+            const transcription = data.transcription || 'Error: No transcription generated.';
+            streamMsg.dataset.text = transcription;
+            renderMarkdown(streamMsg);
+            streamMsg.dataset.done = '1';
+            conversationHistory.push({ role: 'assistant', content: transcription });
+            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+        } else if (endpoint === '/api/image-analysis') {
+            const data = await response.json();
+            const analysis = data.image_analysis || 'Error: No analysis generated.';
+            streamMsg.dataset.text = analysis;
+            renderMarkdown(streamMsg);
+            streamMsg.dataset.done = '1';
+            conversationHistory.push({ role: 'assistant', content: analysis });
+            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+        } else {
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                streamMsg.dataset.text = buffer;
+                currentAssistantText = buffer;
+                const loadingEl = streamMsg.querySelector('.loading');
+                if (loadingEl) loadingEl.remove();
+                renderMarkdown(streamMsg);
+                chatBox.scrollTop = chatBox.scrollHeight;
+            }
+            streamMsg.dataset.done = '1';
+            conversationHistory.push({ role: 'assistant', content: buffer });
+            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+        }
+
+        streamMsg = null;
+        isRequestActive = false;
+        abortController = null;
+        btn.style.display = 'inline-flex';
+        stopBtn.style.display = 'none';
+    } catch (error) {
+        if (streamMsg) {
+            const loadingEl = streamMsg.querySelector('.loading');
+            if (loadingEl) loadingEl.remove();
+            streamMsg.dataset.text = error.message || 'An error occurred during the request.';
+            renderMarkdown(streamMsg);
+            streamMsg.dataset.done = '1';
+            streamMsg = null;
+            isRequestActive = false;
+            abortController = null;
+        }
+        btn.style.display = 'inline-flex';
+        stopBtn.style.display = 'none';
+    }
+}
+
+// Stop streaming and cancel the ongoing request.
+function stopStream(forceCancel = false) {
+    if (!isRequestActive) return;
+    isRequestActive = false;
+    if (abortController) {
+        abortController.abort();
+        abortController = null;
+    }
+    if (streamMsg && !forceCancel) {
+        const loadingEl = streamMsg.querySelector('.loading');
+        if (loadingEl) loadingEl.remove();
+        streamMsg.dataset.text += '';
+        renderMarkdown(streamMsg);
+        streamMsg.dataset.done = '1';
+        streamMsg = null;
+    }
+    stopBtn.style.display = 'none';
+    btn.style.display = 'inline-flex';
+    stopBtn.style.pointerEvents = 'auto';
+}
+
+// Prompts.
+promptItems.forEach(p => {
+    p.addEventListener('click', () => {
+        input.value = p.dataset.prompt;
+        submitMessage();
+    });
+});
+
+// File and audio inputs.
+fileBtn.addEventListener('click', () => {
+    fileInput.click();
+});
+audioBtn.addEventListener('click', () => {
+    audioInput.click();
+});
+fileInput.addEventListener('change', previewFile);
+audioInput.addEventListener('change', previewFile);
+
+// Submit.
+form.addEventListener('submit', e => {
+    e.preventDefault();
+    submitMessage();
+});
+
+// Stop.
+stopBtn.addEventListener('click', () => {
+    stopBtn.style.pointerEvents = 'none';
+    stopStream();
+});
+
+// Home.
+homeBtn.addEventListener('click', () => {
+    window.location.href = '/';
+});
+
+// Clear messages.
+clearBtn.addEventListener('click', () => {
+    clearAllMessages();
+});
+
+// Login button.
+if (loginBtn) {
+    loginBtn.addEventListener('click', () => {
+        window.location.href = '/login';
+    });
+}
+
+// Enable send button only if input has text.
+input.addEventListener('input', () => {
+    btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
+});

static/robots.txt

@@ -0,0 +1,17 @@
+User-agent: *
+Allow: /
+Disallow: /utils/
+Disallow: /api/
+Disallow: /main.py
+Disallow: /mgzon_users.db
+Disallow: /data/
+Disallow: /Dockerfile
+Disallow: /space.yaml
+Disallow: /requirements.txt
+Allow: /static/robots.txt
+Allow: /static/sitemap.xml
+Allow: /static/google97468ef1f6b6e804.html
+Allow: /static/favicon.ico
+Allow: /static/css/
+Allow: /static/js/
+Sitemap: https://mgzon-mgzon-app.hf.space/static/sitemap.xml

static/sitemap.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/chat</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/about</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/login</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/register</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+  <loc>https://mgzon-mgzon-app.hf.space/blog/mgzon-ai-revolution-2025</loc>
+  <lastmod>2025-09-01</lastmod>
+  <changefreq>weekly</changefreq>
+  <priority>0.9</priority>
+</url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/docs</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/blog</loc>
+    <lastmod>2025-09-01</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>0.9</priority>
+  </url>
+</urlset>

templates/500.html

@@ -0,0 +1,32 @@
+<!-- templates/500.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 - Server Error</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">500 - Server Error 😓</h1>
+        <p class="text-lg mb-8">Something went wrong on our end. Please try again later or contact support.</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>
+</body>
+</html>

templates/about.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Learn about MGZon AI, founded by Mark Al-Asfar in Alexandria, Egypt. Discover our mission, team, and achievements in AI and e-commerce.">
+  <meta name="keywords" content="MGZon AI, Mark Al-Asfar, AI chatbot, e-commerce, code generation, Alexandria, technology, team, achievements">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>About MGZon AI – Our Story</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="About MGZon AI – Our Story">
+  <meta property="og:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
+  <meta property="og:image" content="static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/about">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="About MGZon AI – Our Story">
+  <meta name="twitter:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
+  <meta name="twitter:image" content="static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "MGZon AI",
+  "url": "https://mgzon-mgzon-app.hf.space",
+  "logo": "static/images/mg.svg",
+  "founder": {
+    "@type": "Person",
+    "name": "Mark Al-Asfar",
+    "sameAs": "https://mark-elasfar.web.app/"
+  },
+  "description": "MGZon AI develops AI-powered solutions for e-commerce and coding, founded by Mark Al-Asfar from Alexandria, Egypt.",
+  "keywords": ["MGZon AI", "Mark Al-Asfar", "AI chatbot", "e-commerce", "code generation", "Alexandria", "technology", "team", "MGZon", "MGZon chatbot", "E-commerce chatbot", "5G", "6G", "2025 AI trends"],
+  "address": {
+    "@type": "PostalAddress",
+    "addressLocality": "Alexandria",
+    "addressCountry": "Egypt"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg bg-emerald-600">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+        <img src="static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">About MGZon AI</h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">Founded by Mark Al-Asfar in Alexandria, Egypt, MGZon AI is revolutionizing e-commerce and coding with AI-driven solutions.</p>
+      </div>
+      <!-- Story Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Story</h2>
+        <div class="glass p-6">
+<p class="mb-4">MGZon AI was founded in 2023 in Alexandria, Egypt, by Mark Al-Asfar with a vision to empower developers and businesses through AI-driven solutions like MGZon Chatbot. We leverage technologies like DeepSeek, FastAPI, and 5G/6G innovations to deliver cutting-edge e-commerce and code generation tools.</p>
+          <p>From a small startup to a global player, we now operate warehouses in the USA, Canada, and China, serving thousands of users worldwide.</p>
+        </div>
+      </section>
+      <!-- Founder Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Meet Our Founder</h2>
+        <div class="glass p-6 text-center">
+          <img src="static/images/mg.svg" alt="Mark Al-Asfar" class="w-24 h-24 mx-auto mb-4 rounded-full">
+          <h3 class="text-xl font-semibold mb-2">Mark Al-Asfar</h3>
+          <p class="mb-4">A visionary developer from Alexandria, Mark Al-Asfar founded MGZon AI to bridge the gap between AI innovation and practical applications in coding and e-commerce.</p>
+          <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Learn More About Mark</a>
+        </div>
+      </section>
+      <!-- Team Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Team</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6 text-center">
+            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
+            <h3 class="text-xl font-semibold mb-2">Hager Mohamed</h3>
+            <p class="mb-4">Lead AI Engineer, specializing in machine learning and chatbot development.</p>
+          </div>
+          <div class="glass p-6 text-center">
+            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
+            <h3 class="text-xl font-semibold mb-2">Ahmed Khaled</h3>
+            <p class="mb-4">E-commerce Specialist, driving innovative solutions for online businesses.</p>
+          </div>
+        </div>
+      </section>
+      <!-- Achievements Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Achievements</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">Global Reach</h3>
+            <p>Serving over 10,000 users across 50 countries with our AI tools.</p>
+          </div>
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">Award-Winning Innovation</h3>
+            <p>Recognized as a top AI startup in MENA by TechCrunch in 2024.</p>
+          </div>
+        </div>
+      </section>
+      <!-- Mission Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Mission</h2>
+        <div class="glass p-6">
+          <p>At MGZon AI, we aim to make AI accessible to developers and businesses, simplifying coding and enhancing e-commerce with cutting-edge technology.</p>
+        </div>
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="static/images/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-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

templates/blog.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+  <meta name="keywords" content="MGZon AI, blog, AI trends, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Blog - MGZon AI</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Blog - MGZon AI">
+  <meta property="og:description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+<meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/blog">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Blog - MGZon AI">
+  <meta name="twitter:description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+<meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Blog",
+  "name": "MGZon AI Blog",
+  "url": "https://mgzon-mgzon-app.hf.space/blog",
+  "description": "Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.",
+  "keywords": ["MGZon Chatbot", "blog", "AI trends", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "AI chatbot", "Code generation bot", "E-commerce chatbot", "Python AI chatbot", "AI for coding", "E-commerce automation", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="/blog" class="px-4 py-2 rounded-lg bg-emerald-600">Blog</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+          MGZon AI Blog
+        </h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">
+  Stay updated with the latest trends in AI, coding, and e-commerce from MGZon AI. Explore topics like text generation, Python AI chatbots, and 2025 AI trends with insights from Mark Al-Asfar.
+        </p>
+      </div>
+      <!-- Blog Posts -->
+<section class="my-12">
+  <h2 class="text-3xl font-bold text-center mb-8">Latest Posts</h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    {% for post in posts %}
+    <div class="glass p-6">
+      <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
+      <p class="mb-4">{{ post.content | truncate(100) }}</p>
+      <p class="text-sm text-gray-300">By {{ post.author }} | {{ post.date }}</p>
+      <a href="/blog/{{ post.id }}" class="text-emerald-300 hover:underline">Read More →</a>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

templates/blog_post.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{{ post.title }} - Read about AI, coding, and e-commerce trends from MGZon AI by Mark Al-Asfar.">
+  <meta name="keywords" content="MGZon Chatbot, MGZon AI, blog, AI trends, code generation, e-commerce, Mark Al-Asfar, AI chatbot, code generation bot, e-commerce chatbot, Python AI chatbot, AI for coding, e-commerce automation, 2025 AI trends, chatgpt, grok, deepseek, text generation">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>{{ post.title }} - MGZon AI</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="{{ post.title }} - MGZon AI">
+  <meta property="og:description" content="{{ post.content | truncate(150) }}">
+<meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/blog/{{ post.id }}">
+  <meta property="og:type" content="article">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ post.title }} - MGZon AI">
+  <meta name="twitter:description" content="{{ post.content | truncate(150) }}">
+<meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  "headline": "{{ post.title }}",
+  "url": "https://mgzon-mgzon-app.hf.space/blog/{{ post.id }}",
+  "description": "{{ post.content | truncate(150) }}",
+  "keywords": ["MGZon Chatbot", "MGZon AI", "blog", "AI trends", "code generation", "e-commerce", "Mark Al-Asfar", "AI chatbot", "code generation bot", "e-commerce chatbot", "Python AI chatbot", "AI for coding", "e-commerce automation", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "author": {
+    "@type": "Person",
+    "name": "Mark Al-Asfar",
+    "url": "https://mark-elasfar.web.app/"
+  },
+  "datePublished": "{{ post.date }}",
+  "publisher": {
+    "@type": "Organization",
+    "name": "MGZon AI",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "/static/images/mg.svg"
+    }
+  },
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+    .markdown-content img {
+      max-width: 100%;
+      height: auto;
+      margin: 1rem 0;
+    }
+    .markdown-content h2 {
+      font-size: 1.875rem;
+      font-weight: bold;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
+    .markdown-content p {
+      margin-bottom: 1rem;
+    }
+    .markdown-content a {
+      color: #34d399;
+      text-decoration: underline;
+    }
+    .markdown-content blockquote {
+      border-left: 4px solid #34d399;
+      padding-left: 1rem;
+      margin: 1rem 0;
+      color: #d1d5db;
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="/blog" class="px-4 py-2 rounded-lg bg-emerald-600">Blog</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+          {{ post.title }}
+        </h1>
+        <p class="text-sm text-gray-300">By {{ post.author }} | {{ post.date }}</p>
+      </div>
+      <!-- Blog Post Content -->
+      <section class="my-12 glass p-8 markdown-content">
+{{ post.content | markdown | safe }}
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

templates/chat.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Chat with MGZon Chatbot, an AI-powered tool for coding, analysis, and e-commerce queries. Supports text, image, and audio inputs." />
+  <meta name="keywords" content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, Gradio, FastAPI, e-commerce, programming, Mark Al-Asfar" />
+  <meta name="author" content="Mark Al-Asfar" />
+  <meta name="robots" content="index, follow" />
+  <title>MGZon Chatbot – AI Assistant</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+  <link rel="apple-touch-icon" href="static/images/mg.svg" />
+  <!-- Open Graph -->
+  <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
+  <meta property="og:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta property="og:image" content="static/images/mg.svg" />
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
+  <meta property="og:type" content="website" />
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="MGZon Chatbot – AI Assistant" />
+  <meta name="twitter:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta name="twitter:image" content="static/images/mg.svg
+
+" />
+  <!-- JSON-LD -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/chat",
+    "description": "An AI-powered chatbot for coding, analysis, and e-commerce queries."
+  }
+  </script>
+  <link rel="stylesheet" href="/static/css/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
+</head>
+<body>
+  <div id="mainHeader" style="display: flex; align-items: center; justify-content: center; padding: 20px;">
+    <img src="static/images/mg.svg" alt="MGZon Logo" style="width: 100px; margin-bottom: 10px;">
+    <h1>MGZon Chatbot</h1>
+  </div>
+  <div id="chatHeader" style="display: none;" aria-hidden="true">
+    <div class="chat-title">MGZon Chatbot</div>
+    <div class="chat-controls">
+      <button id="homeBtn" aria-label="Home">🏠</button>
+      <button id="clearBtn" aria-label="Clear Chat">🗑️</button>
+      {% if not user %}
+        <button id="loginBtn" class="bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-4 py-2 rounded" aria-label="Login">Login</button>
+      {% endif %}
+    </div>
+  </div>
+  <div id="initialContent" style="text-align: center; padding: 20px;">
+    <p>A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS. Type your query, upload images/files, or record audio!</p>
+    <div class="prompt-item" data-prompt="What's the capital of France?">Capital of France</div>
+    <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">Python Web Server</div>
+  </div>
+  <div class="chat-section">
+    <div id="chatArea">
+      <div id="chatBox" class="flex-col" aria-live="polite"></div>
+      <div id="messageLimitWarning" class="text-red-500 text-center hidden">You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue.</div>
+    </div>
+    <form id="footerForm" class="flex p-3 bg-transparent" autocomplete="off" style="position: relative; margin-top: auto; width: 100%;">
+      <div id="inputContainer">
+        <input type="text" id="userInput" placeholder="Ask anything..." required style="word-break:break-word;" />
+        <div id="rightIconGroup">
+          <button type="button" id="fileBtn" aria-label="Upload File">📎</button>
+          <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
+          <button type="button" id="audioBtn" aria-label="Record Audio">🎤</button>
+          <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
+          <button type="submit" id="sendBtn" disabled aria-label="Send">
+            <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+            </svg>
+          </button>
+          <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+              <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </form>
+    <div id="filePreview" class="upload-preview" style="display: none;"></div>
+    <div id="audioPreview" class="audio-preview" style="display: none;"></div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.0/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  <script src="/static/js/chat.js"></script>
+</body>
+</html>

templates/docs.html

@@ -1,319 +1,284 @@
 <!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 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"}],
-    "temperature": 0.7,
-    "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",
-    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 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
-
-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 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__)
-
-@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 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('');
-    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 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.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 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
-        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 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
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta name="keywords" content="MGZon Chatbot, API documentation, code generation, e-commerce, FastAPI, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>API Documentation - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="API Documentation - MGZon Chatbot">
+  <meta property="og:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/docs">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="API Documentation - MGZon Chatbot">
+  <meta name="twitter:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
 {
-    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();
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "API Documentation - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/docs",
+  "description": "Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.",
+  "keywords": ["MGZon Chatbot", "API documentation", "code generation", "e-commerce", "FastAPI", "Mark Al-Asfar", "MGZon", "MGZon AI", "AI chatbot", "Code generation bot", "Python AI chatbot", "FastAPI integration", "AI for coding", "AI developer tools", "text generation"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <!-- Prism (for code highlighting) -->
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
     }
-}</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>
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg bg-emerald-600">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+        <img src="static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+<h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">About MGZon AI by Mark Al-Asfar</h1>
+          MGZon Chatbot API Documentation
+        </h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">
+          Integrate MGZon Chatbot's AI-powered features into your applications. Learn how to use our APIs for code generation, web search, and e-commerce solutions.
+        </p>
+        <p>Explore the MGZon Chatbot API for seamless integration of AI-powered code generation, text generation, and e-commerce automation. Built by Mark Al-Asfar using FastAPI and Hugging Face AI.</p>
+        <a href="https://x.ai/api" target="_blank" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+          Get API Key <i class="bx bx-key ml-2"></i>
+        </a>
+      </div>
+      <!-- API Overview -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">API Overview</h2>
+        <div class="glass p-6">
+          <p class="mb-4">The MGZon Chatbot API provides endpoints for code generation, real-time web search, and e-commerce functionalities. Built with FastAPI, it offers secure and scalable integration.</p>
+          <p>Base URL: <code class="bg-gray-800/60 p-1 rounded">https://mgzon-mgzon-app.hf.space/api</code></p>
         </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>
+      </section>
+      <!-- Authentication -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Authentication</h2>
+        <div class="glass p-6">
+          <p class="mb-4">Use JWT tokens for authentication. Register or login to obtain a token.</p>
+          <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/auth/jwt/login" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "username=your_email&password=your_password"
+          </code></pre>
+        </div>
+      </section>
+      <!-- Endpoints -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Endpoints</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">/chat (POST)</h3>
+            <p class="mb-4">Interact with the AI chatbot for code generation or queries.</p>
+            <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/chat" \
+  -H "Authorization: Bearer your_token" \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Generate a Python function"}'
+            </code></pre>
+          </div>
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">/web_search (POST)</h3>
+            <p class="mb-4">Perform real-time web searches.</p>
+            <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/web_search" \
+  -H "Authorization: Bearer your_token" \
+  -H "Content-Type: application/json" \
+  -d '{"query": "AI trends 2025"}'
+            </code></pre>
+          </div>
+        </div>
+      </section>
+      <!-- Getting Started -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Getting Started</h2>
+        <div class="glass p-6">
+          <p class="mb-4">1. Register at <a href="/register" class="text-emerald-300 hover:underline">/register</a>.</p>
+          <p class="mb-4">2. Obtain your API key from <a href="https://x.ai/api" target="_blank" class="text-emerald-300 hover:underline">xAI API</a>.</p>
+          <p>3. Use the endpoints above to integrate MGZon Chatbot into your application.</p>
+        </div>
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
         </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>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
 </body>
 </html>

templates/index.html

@@ -1,22 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="MGZon Chatbot – AI-powered assistant for code generation, web search, and e-commerce solutions by Mark Al-Asfar from Alexandria, Egypt.">
+  <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, 
+United States, FastAPI, Gradio">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
   <title>MGZon Chatbot – Powered by AI</title>
-
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
+  <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+  <meta property="og:image" content="static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="MGZon Chatbot – AI-Powered Solutions">
+  <meta name="twitter:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+  <meta name="twitter:image" content="static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/",
+  "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
+  "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "potentialAction": {
+    "@type": "SearchAction",
+    "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
+    "query-input": "required name=search_term_string"
+  },
+  "publisher": {
+    "@type": "Organization",
+    "name": "MGZon AI",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "static/images/mg.svg"
+    }
+  }
+}
+</script>
   <!-- Tailwind (v3) -->
   <script src="https://cdn.tailwindcss.com"></script>
-
   <!-- Boxicons -->
-  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
-
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
   <!-- Prism (for code highlighting) -->
-  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
-
   <style>
-    /* Animated gradient background */
     @keyframes gradientShift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
@@ -28,8 +65,6 @@
       animation: gradientShift 15s ease infinite;
       font-family: system-ui, sans-serif;
     }
-
-    /* Glass-morphism helpers */
     .glass {
       background: rgba(255, 255, 255, 0.07);
       border-radius: 1rem;
@@ -37,24 +72,16 @@
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
     }
-
-    /* Sidebar transition */
     .sidebar {
       transition: transform 0.3s ease-in-out;
     }
-
-    /* Hide logo when sidebar is collapsed */
     .sidebar.collapsed .logo {
       opacity: 0;
       transition: opacity 0.2s ease;
     }
-
-    /* Prevent sidebar from covering the footer */
     .main-content {
-      min-height: calc(100vh - 4rem); /* footer height approx. */
+      min-height: calc(100vh - 4rem);
     }
-
-    /* Loading spinner for button */
     .loading {
       display: inline-block;
       width: 1rem;
@@ -68,15 +95,11 @@
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
-
-    /* Card hover and transition effects */
     .glass:hover {
       transform: scale(1.05);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
       background: rgba(255, 255, 255, 0.15);
     }
-
-    /* Responsive adjustments */
     @media (max-width: 768px) {
       .sidebar {
         transform: translateX(-100%);
@@ -87,166 +110,141 @@
     }
   </style>
 </head>
-
 <body class="text-white flex flex-col min-h-screen">
   <!-- Mobile toggle button -->
-  <button
-    id="sidebarToggle"
-    class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition"
-    aria-label="Toggle navigation"
-  >
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
     <i class="bx bx-menu"></i>
   </button>
-
   <!-- Sidebar -->
-  <aside
-    id="sidebar"
-    class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40"
-  >
-    <!-- Close button for mobile -->
-    <button
-      id="closeSidebar"
-      class="md:hidden text-white text-2xl absolute top-4 right-4"
-      aria-label="Close sidebar"
-    >
-      ✕
-    </button>
-    <!-- Logo (optional: hidden in homepage) -->
-    <img
-      src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg"
-      alt="MGZon Logo"
-      class="logo w-20 h-20 mx-auto mb-8 animate-pulse"
-    />
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
     <nav class="flex flex-col gap-3">
-      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition active:bg-emerald-600">Home</a>
+      <a href="/" class="px-4 py-2 rounded-lg bg-emerald-600">Home</a>
       <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
-      <a href="https://hager-zon.vercel.app/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
       <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
       <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
     </nav>
   </aside>
-
   <!-- Main content -->
   <main class="flex-1 md:ml-64 p-6 main-content">
     <section class="container max-w-6xl mx-auto">
       <!-- Hero -->
       <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"
-        />
+        <img src="static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
         <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
           Welcome to MGZon Chatbot 🚀
         </h1>
         <p class="text-lg max-w-2xl mx-auto mb-8">
-          MGZon Chatbot is an 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?
+          MGZon Chatbot is an AI-powered assistant for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from 
+United States. Ready to code smarter and shop better?
+  Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
         </p>
-        <a
-          href="/gradio"
-          id="launchBtn"
-          class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl"
-        >
-          Launch Chatbot <i class="bx bx-rocket ml-2"></i>
-          <span id="spinner" class="loading hidden"></span>
-        </a>
+        {% if user %}
+          <div class="flex justify-center gap-4">
+            <a href="/chat" id="launchBtn" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Launch Chatbot <i class="bx bx-rocket ml-2"></i>
+              <span id="spinner" class="loading hidden"></span>
+            </a>
+            <a href="/auth/jwt/logout" class="inline-flex items-center bg-gradient-to-r from-red-500 to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Logout <i class="bx bx-log-out ml-2"></i>
+            </a>
+          </div>
+        {% else %}
+          <div class="flex justify-center gap-4">
+            <a href="/login" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Login <i class="bx bx-log-in ml-2"></i>
+            </a>
+            <a href="/register" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Sign Up <i class="bx bx-user-plus ml-2"></i>
+            </a>
+          </div>
+        {% endif %}
       </div>
-
       <!-- Features -->
       <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Features</h2>
+        <h2 class="text-3xl font-bold text-center mb-8">Why Choose MGZon?</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('code-generation')">
-            <button
-              class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
-              onclick="event.stopPropagation(); closeCardDetails('code-generation')"
-              aria-label="Close card"
-            >
-              &times;
-            </button>
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('code-generation')" aria-label="Close card">&times;</button>
             <i class="bx bx-code-alt text-4xl text-emerald-300 mb-4"></i>
             <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
-            <p>Generate code for React, Django, Flask, and more.</p>
+            <p>Generate clean, well-commented code for React, Django, Flask, Node.js, and more.</p>
             <div id="code-generation-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>Supports multiple frameworks including React, Django, Flask, and Node.js. Generate clean, well-commented code with examples.</p>
+              <p>Supports multiple frameworks with examples and best practices for seamless integration.</p>
               <button onclick="closeCardDetails('code-generation')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
             </div>
           </div>
           <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('web-search')">
-            <button
-              class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
-              onclick="event.stopPropagation(); closeCardDetails('web-search')"
-              aria-label="Close card"
-            >
-              &times;
-            </button>
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('web-search')" aria-label="Close card">&times;</button>
             <i class="bx bx-search text-4xl text-emerald-300 mb-4"></i>
             <h3 class="text-xl font-semibold mb-2">Web Search</h3>
-            <p>Integrated web search for MGZon-related queries.</p>
+            <p>Real-time web search for MGZon queries and industry insights.</p>
             <div id="web-search-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>Search the web for up-to-date information and MGZon-specific answers.</p>
+              <p>Get up-to-date answers and insights tailored to your needs.</p>
               <button onclick="closeCardDetails('web-search')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
             </div>
           </div>
-          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('analysis')">
-            <button
-              class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
-              onclick="event.stopPropagation(); closeCardDetails('analysis')"
-              aria-label="Close card"
-            >
-              &times;
-            </button>
-            <i class="bx bx-analyse text-4xl text-emerald-300 mb-4"></i>
-            <h3 class="text-xl font-semibold mb-2">Analysis & Review</h3>
-            <p>Detailed code and data analysis with insights.</p>
-            <div id="analysis-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>Provides in-depth code reviews and data analysis with actionable insights.</p>
-              <button onclick="closeCardDetails('analysis')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('ecommerce')">
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('ecommerce')" aria-label="Close card">&times;</button>
+            <i class="bx bx-cart text-4xl text-emerald-300 mb-4"></i>
+            <h3 class="text-xl font-semibold mb-2">E-commerce Solutions</h3>
+            <p>AI-driven tools to optimize your online store and boost sales.</p>
+            <div id="ecommerce-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+              <p>From product recommendations to inventory management, MGZon enhances your e-commerce experience.</p>
+              <button onclick="closeCardDetails('ecommerce')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
             </div>
           </div>
         </div>
       </section>
-
       <!-- News -->
       <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon News</h2>
+        <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon Updates</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">New API Features</h3>
-            <p>Explore our updated API with OAuth 2.0 support.</p>
+            <h3 class="text-xl font-semibold mb-2">New AI Features</h3>
+            <p>Explore our latest AI updates for smarter code and e-commerce tools.</p>
             <a href="https://hager-zon.vercel.app/blog" target="_blank" class="text-emerald-300 hover:underline">Read More →</a>
           </div>
           <div class="glass p-6">
-            <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-emerald-300 hover:underline">Join Now →</a>
+            <h3 class="text-xl font-semibold mb-2">Global Expansion</h3>
+            <p>New warehouses in the USA, Canada, and China to serve you better.</p>
+            <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-emerald-300 hover:underline">Learn More →</a>
+          </div>
+        </div>
+      </section>
+      <!-- Testimonials -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">What Our Users Say</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <p class="mb-4">"MGZon Chatbot transformed how I code. The AI-generated snippets are accurate and save hours!"</p>
+            <p class="font-semibold">– Ahmed, Developer</p>
+          </div>
+          <div class="glass p-6">
+            <p class="mb-4">"The e-commerce tools helped me optimize my store and boost sales by 30%."</p>
+            <p class="font-semibold">– Sarah, Store Owner</p>
           </div>
         </div>
       </section>
     </section>
   </main>
-
   <!-- Footer -->
   <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
     <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"
-      />
+     <img src="static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
       <p class="mb-4">
-        Developed by
-        <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by
-        <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
       </p>
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
           <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">Email Us</h4>
-          <p>
-            <a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a>
-          </p>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
           <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Reach out to our support team for any inquiries or assistance.</p>
             <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
@@ -264,9 +262,7 @@
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
           <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">Community</h4>
-          <p>
-            <a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a>
-          </p>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
           <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Join our vibrant community to share ideas and collaborate.</p>
             <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
@@ -275,9 +271,7 @@
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
           <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">API Docs</h4>
-          <p>
-            <a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a>
-          </p>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
           <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Explore our API documentation for seamless integration.</p>
             <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
@@ -286,9 +280,7 @@
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
           <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">FAQ</h4>
-          <p>
-            <a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a>
-          </p>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
           <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Find answers to common questions in our FAQ section.</p>
             <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
@@ -297,78 +289,54 @@
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
           <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">Documentation</h4>
-          <p>
-            <a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a>
-          </p>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
           <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Access comprehensive documentation for MGZon Chatbot.</p>
             <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
       </div>
-      <!-- Social icons -->
       <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition">
-          <i class="bx bxl-github"></i>
-        </a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 transition">
-          <i class="bx bxl-facebook"></i>
-        </a>
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
-
-  <!-- Scripts -->
   <script>
-    // Sidebar toggle for mobile
     const sidebar = document.getElementById('sidebar');
     const toggleBtn = document.getElementById('sidebarToggle');
     const closeSidebarBtn = document.getElementById('closeSidebar');
-
     toggleBtn.addEventListener('click', () => {
       sidebar.classList.toggle('active');
       sidebar.classList.toggle('-translate-x-full');
       sidebar.classList.toggle('translate-x-0');
     });
-
     closeSidebarBtn.addEventListener('click', () => {
       sidebar.classList.remove('active');
       sidebar.classList.add('-translate-x-full');
       sidebar.classList.remove('translate-x-0');
     });
-
-    // Close sidebar when clicking outside
     document.addEventListener('click', (e) => {
-      if (
-        !sidebar.contains(e.target) &&
-        !toggleBtn.contains(e.target) &&
-        window.innerWidth < 768
-      ) {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
         sidebar.classList.remove('active');
         sidebar.classList.add('-translate-x-full');
         sidebar.classList.remove('translate-x-0');
       }
     });
-
-    // Launch button spinner
-    const launchBtn = document.getElementById('launchBtn');
-    const spinner = document.getElementById('spinner');
-    launchBtn.addEventListener('click', (e) => {
-      spinner.classList.remove('hidden');
-      setTimeout(() => spinner.classList.add('hidden'), 2000); // Simulate loading
-    });
-
-    // Card details toggle
     function showCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.remove('hidden');
     }
     function closeCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.add('hidden');
     }
+    const launchBtn = document.getElementById('launchBtn');
+    const spinner = document.getElementById('spinner');
+    launchBtn.addEventListener('click', (e) => {
+      spinner.classList.remove('hidden');
+      setTimeout(() => spinner.classList.add('hidden'), 2000);
+    });
   </script>
 </body>
 </html>

templates/login.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
+  <meta name="keywords" content="MGZon Chatbot, login, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Login - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Login - MGZon Chatbot">
+  <meta property="og:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/login">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Login - MGZon Chatbot">
+  <meta name="twitter:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Login - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/login",
+  "description": "Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.",
+  "keywords": ["MGZon Chatbot", "login", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .loading {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  </style>
+</head>
+<body class="text-white min-h-screen flex flex-col justify-center items-center">
+  <div class="container max-w-md mx-auto text-center py-12">
+    <img src="static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+      Login to MGZon Chatbot
+    </h1>
+    <div class="glass p-8">
+      <form id="loginForm" action="/auth/jwt/login" method="POST" class="flex flex-col gap-4">
+        <input type="email" name="username" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <button type="submit" id="loginBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login <i class="bx bx-log-in ml-2"></i>
+          <span id="spinner" class="loading hidden"></span>
+        </button>
+      </form>
+      <div class="flex justify-center gap-4 mt-4 flex-wrap">
+        <a href="/auth/google/login" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login with Google <i class="bx bxl-google ml-2"></i>
+        </a>
+        <a href="/auth/github/login" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login with GitHub <i class="bx bxl-github ml-2"></i>
+        </a>
+      </div>
+      <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a></p>
+      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
+    </div>
+  </div>
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="static/images/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-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const loginForm = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    loginForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      const formData = new FormData(loginForm);
+      try {
+        const response = await fetch('/auth/jwt/login', {
+          method: 'POST',
+          body: formData
+        });
+        spinner.classList.add('hidden');
+        if (response.ok) {
+          window.location.href = '/chat';
+        } else {
+          const error = await response.json();
+          errorMsg.textContent = error.detail || 'Login failed. Please try again.';
+          errorMsg.classList.remove('hidden');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'An error occurred. Please try again.';
+        errorMsg.classList.remove('hidden');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.">
+  <meta name="keywords" content="MGZon Chatbot, register, sign up, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Register - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Register - MGZon Chatbot">
+  <meta property="og:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/register">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Register - MGZon Chatbot">
+  <meta name="twitter:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Register - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/register",
+  "description": "Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.",
+  "keywords": ["MGZon Chatbot", "register", "sign up", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .loading {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  </style>
+</head>
+<body class="text-white min-h-screen flex flex-col justify-center items-center">
+  <div class="container max-w-md mx-auto text-center py-12">
+    <img src="static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+      Register for MGZon Chatbot
+    </h1>
+    <div class="glass p-8">
+      <form id="registerForm" action="/auth/register" method="POST" class="flex flex-col gap-4">
+        <input type="text" name="username" id="username" placeholder="Username" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="email" name="email" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <button type="submit" id="registerBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Register <i class="bx bx-user-plus ml-2"></i>
+          <span id="spinner" class="loading hidden"></span>
+        </button>
+      </form>
+      <div class="flex justify-center gap-4 mt-4 flex-wrap">
+        <a href="/auth/google/login" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Sign Up with Google <i class="bx bxl-google ml-2"></i>
+        </a>
+        <a href="/auth/github/login" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Sign Up with GitHub <i class="bx bxl-github ml-2"></i>
+        </a>
+      </div>
+      <p class="mt-4">Already have an account? <a href="/login" class="text-emerald-300 hover:underline">Login</a></p>
+      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
+    </div>
+  </div>
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="static/images/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-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </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-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 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-emerald-300 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>
+    const registerForm = document.getElementById('registerForm');
+    const registerBtn = document.getElementById('registerBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    registerForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      const formData = new FormData(registerForm);
+      try {
+        const response = await fetch('/auth/register', {
+          method: 'POST',
+          body: formData
+        });
+        spinner.classList.add('hidden');
+        if (response.ok) {
+          window.location.href = '/chat';
+        } else {
+          const error = await response.json();
+          errorMsg.textContent = error.detail || 'Registration failed. Please try again.';
+          errorMsg.classList.remove('hidden');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'An error occurred. Please try again.';
+        errorMsg.classList.remove('hidden');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

utils/generation.py

@@ -35,13 +35,13 @@ HF_TOKEN = os.getenv("HF_TOKEN")
 BACKUP_HF_TOKEN = os.getenv("BACKUP_HF_TOKEN")
 API_ENDPOINT = os.getenv("API_ENDPOINT", "https://router.huggingface.co/v1")
 FALLBACK_API_ENDPOINT = os.getenv("FALLBACK_API_ENDPOINT", "https://api-inference.huggingface.co")
-MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:cerebras")
-SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2")
-TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:cerebras")
+MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:together")
+SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2:featherless-ai")
+TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:together")
 CLIP_BASE_MODEL = os.getenv("CLIP_BASE_MODEL", "Salesforce/blip-image-captioning-large")
 CLIP_LARGE_MODEL = os.getenv("CLIP_LARGE_MODEL", "openai/clip-vit-large-patch14")
 ASR_MODEL = os.getenv("ASR_MODEL", "openai/whisper-large-v3")
-TTS_MODEL = os.getenv("TTS_MODEL", "espnet/kan-bayashi_arabic_vits")
+TTS_MODEL = os.getenv("TTS_MODEL", "facebook/mms-tts-ara")
 
 def check_model_availability(model_name: str, api_base: str, api_key: str) -> tuple[bool, str]:
     try:
@@ -165,23 +165,23 @@ def request_generation(
             return
 
     # معالجة تحويل النص إلى صوت (TTS)
-    if model_name == TTS_MODEL or output_format == "audio":
-        task_type = "text_to_speech"
-        try:
-            model = ParlerTTSForConditionalGeneration.from_pretrained(TTS_MODEL)
-            processor = AutoProcessor.from_pretrained(TTS_MODEL)
-            inputs = processor(text=message, return_tensors="pt")
-            audio = model.generate(**inputs)
-            audio_file = io.BytesIO()
-            torchaudio.save(audio_file, audio[0], sample_rate=22050, format="wav")
-            audio_file.seek(0)
-            yield audio_file.read()
-            cache[cache_key] = [audio_file.read()]
-            return
-        except Exception as e:
-            logger.error(f"Text-to-speech failed: {e}")
-            yield f"Error: Text-to-speech failed: {e}"
-            return
+if model_name == TTS_MODEL or output_format == "audio":
+    task_type = "text_to_speech"
+    try:
+        model = ParlerTTSForConditionalGeneration.from_pretrained(TTS_MODEL)
+        processor = AutoProcessor.from_pretrained(TTS_MODEL)
+        inputs = processor(text=message, return_tensors="pt")
+        audio = model.generate(**inputs)
+        audio_file = io.BytesIO()
+        torchaudio.save(audio_file, audio[0], sample_rate=22050, format="wav")
+        audio_file.seek(0)
+        yield audio_file.read()
+        cache[cache_key] = [audio_file.read()]
+        return
+    except Exception as e:
+        logger.error(f"Text-to-speech failed: {e}")
+        yield f"Error: Text-to-speech failed: {e}"
+        return
 
     # معالجة الصور
     if model_name in [CLIP_BASE_MODEL, CLIP_LARGE_MODEL] and image_data: