Spaces:

MGZON
/

mgzon-app

Running

File size: 17,076 Bytes

87b09dd

<!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" />
  <!-- 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>
  <!-- Fonts & Styles -->
  <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>
  <!-- Markdown & Syntax Highlight -->
  <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>
  <!-- Animations -->
  <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" />
  <!-- Carousel -->
  <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" />
  <!-- Smooth Scroll -->
  <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" />
  <!-- Hammer.js for touch gestures -->
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
  <!-- Project-Specific Styles -->
  <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">
  <!-- Sidebar -->
  <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">
          <!-- Conversations will be populated by JavaScript -->
        </ul>
      </div>
      {% endif %}
    </nav>
  </aside>

  <!-- Swipe Hint for Mobile -->
  <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>

  <!-- Main Content -->
  <div class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto md:ml-64">
    <!-- Chat Header -->
    <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>

    <!-- Chat Area -->
    <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>
        <!-- Prompts -->
        <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>
      <!-- Footer Form -->
      <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>

    <!-- Copyright -->
    <div class="text-center text-xs text-gray-400 py-2">
      © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
    </div>
  </div>

  <!-- Scripts -->
  <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>