|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark-theme"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> |
|
|
<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="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" /> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico" /> |
|
|
<link rel="apple-touch-icon" href="/static/images/mg.svg" /> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
<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="preconnect" href="https://fonts.googleapis.com" /> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" /> |
|
|
<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://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" /> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" /> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" /> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script> |
|
|
|
|
|
<link rel="stylesheet" href="/static/css/animation/style.css" /> |
|
|
<link rel="stylesheet" href="/static/css/button.css" /> |
|
|
<link rel="stylesheet" href="/static/css/chat/bubble.css" /> |
|
|
<link rel="stylesheet" href="/static/css/chat/markdown.css" /> |
|
|
<link rel="stylesheet" href="/static/css/chat/style.css" /> |
|
|
<link rel="stylesheet" href="/static/css/header.css" /> |
|
|
<link rel="stylesheet" href="/static/css/icon.css" /> |
|
|
<link rel="stylesheet" href="/static/css/input.css" /> |
|
|
<link rel="stylesheet" href="/static/css/logo.css" /> |
|
|
<link rel="stylesheet" href="/static/css/prompts.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/1200.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/2000.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/320.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/360.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/3840.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/480.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/720.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/7680.css" /> |
|
|
<link rel="stylesheet" href="/static/css/screen/common.css" /> |
|
|
<link rel="stylesheet" href="/static/css/style.css" /> |
|
|
<link rel="stylesheet" href="/static/css/webkit.css" /> |
|
|
<link rel="stylesheet" href="/static/css/sidebar.css" /> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900"> |
|
|
|
|
|
<aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50"> |
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-10 h-10 mr-2 animate-pulse" /> |
|
|
<h2 class="text-lg font-bold text-white">MGZon</h2> |
|
|
</div> |
|
|
<button id="sidebarToggle" class="md:hidden text-white" aria-label="Close Sidebar"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<nav class="p-4"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="/" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path> |
|
|
</svg> |
|
|
Home |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="/about" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> |
|
|
</svg> |
|
|
About |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="/blog" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"></path> |
|
|
</svg> |
|
|
Blog |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="/docs" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> |
|
|
</svg> |
|
|
Docs |
|
|
</a> |
|
|
</li> |
|
|
{% if user %} |
|
|
<li> |
|
|
<a href="/auth/jwt/logout" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path> |
|
|
</svg> |
|
|
Logout |
|
|
</a> |
|
|
</li> |
|
|
{% else %} |
|
|
<li> |
|
|
<a href="/login" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors"> |
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path> |
|
|
</svg> |
|
|
Login |
|
|
</a> |
|
|
</li> |
|
|
{% endif %} |
|
|
</ul> |
|
|
{% if user %} |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between items-center px-2 mb-2"> |
|
|
<h3 class="text-sm font-semibold text-white">Conversations</h3> |
|
|
<button id="newConversationBtn" class="text-white hover:bg-gray-700 p-1 rounded" title="New Conversation"> |
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<ul id="conversationList" class="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
{% endif %} |
|
|
</nav> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div id="swipeHint" class="md:hidden fixed top-1/2 left-4 z-50 animate-pulse"> |
|
|
<img src="/static/images/swipe-hint.svg" alt="Swipe to open sidebar" class="w-8 h-8" /> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto md:ml-64"> |
|
|
|
|
|
<header class="chat-header p-3 flex justify-between items-center"> |
|
|
<div class="chat-title text-xl font-semibold text-white"> |
|
|
<span id="conversationTitle">{{ conversation_title | default('MGZon AI Assistant') }}</span> |
|
|
</div> |
|
|
<div class="chat-controls flex gap-2"> |
|
|
<button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M3 6h18" /> |
|
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /> |
|
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /> |
|
|
<path d="M10 11v6" /> |
|
|
<path d="M14 11v6" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex flex-col"> |
|
|
<div id="initialContent" class="flex flex-col items-center justify-center text-center h-full"> |
|
|
<div class="title mb-4 gradient-text text-3xl font-bold"> |
|
|
How can I help you today? |
|
|
</div> |
|
|
<p class="system text-gray-300 mb-4"> |
|
|
A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br> |
|
|
Type your query, upload images/files, or hold the send button to record audio! |
|
|
</p> |
|
|
|
|
|
<div class="prompts w-full max-w-md mx-auto grid gap-2"> |
|
|
<div class="prompt-item" data-prompt="What's the capital of France?"> |
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
<circle cx="12" cy="12" r="4" stroke-width="2" /> |
|
|
</svg> |
|
|
<span>What's the capital of France?</span> |
|
|
</div> |
|
|
<div class="prompt-item" data-prompt="Generate a Python script for a simple web server"> |
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
</svg> |
|
|
<span>Generate a Python script for a simple web server</span> |
|
|
</div> |
|
|
<div class="prompt-item" data-prompt="Analyze this image for me"> |
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
</svg> |
|
|
<span>Analyze this image for me</span> |
|
|
</div> |
|
|
<div class="prompt-item" data-prompt="Convert this text to audio"> |
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
</svg> |
|
|
<span>Convert this text to audio</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4"> |
|
|
You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue. |
|
|
</div> |
|
|
</div> |
|
|
<div id="chatArea" class="flex-1 hidden" aria-live="polite"> |
|
|
<div id="chatBox" class="flex-col" aria-live="polite"></div> |
|
|
</div> |
|
|
|
|
|
<form id="footerForm" class="flex p-4"> |
|
|
<div id="inputContainer" class="w-full"> |
|
|
<textarea id="userInput" placeholder="Ask anything..." required></textarea> |
|
|
<div id="rightIconGroup" class="flex gap-2"> |
|
|
<button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /> |
|
|
<path d="M14 2v6h6" /> |
|
|
</svg> |
|
|
</button> |
|
|
<input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" /> |
|
|
<button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" /> |
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2" /> |
|
|
<path d="M12 19v4" /> |
|
|
</svg> |
|
|
</button> |
|
|
<input type="file" id="audioInput" accept="audio/*" style="display: none;" /> |
|
|
<button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record" title="Click to Send or Hold to Record Voice"> |
|
|
<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> |
|
|
<div id="filePreview" class="upload-preview" style="display: none;"></div> |
|
|
<div id="audioPreview" class="audio-preview" style="display: none;"></div> |
|
|
</form> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="text-center text-xs text-gray-400 py-2"> |
|
|
© 2025 Mark Al-Asfar & MGZon AI. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> |
|
|
<script src="/static/js/chat.js"></script> |
|
|
<script> |
|
|
AOS.init(); |
|
|
// تمرير conversation_id و conversation_title إذا كانا موجودين |
|
|
{% if conversation_id %} |
|
|
window.conversationId = "{{ conversation_id }}"; |
|
|
window.conversationTitle = "{{ conversation_title }}"; |
|
|
if (window.loadConversation) { |
|
|
window.loadConversation("{{ conversation_id }}"); |
|
|
} |
|
|
{% endif %} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
