index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Qwen AI — Intelligent Conversation</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
  <!-- ── SIDEBAR ─────────────────────────────────────────── -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <div class="logo">
        <div class="logo-mark">
          <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="1.5"/>
            <path d="M10 16 Q16 8 22 16 Q16 24 10 16Z" fill="currentColor" opacity="0.8"/>
          </svg>
        </div>
        <span class="logo-text">Qwen<span class="logo-accent">AI</span></span>
      </div>
      <button class="new-chat-btn" id="newChatBtn" title="New conversation">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 5v14M5 12h14"/>
        </svg>
      </button>
    </div>

    <div class="sidebar-search">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
      </svg>
      <input type="text" placeholder="Search conversations..." id="searchInput" />
    </div>

    <div class="chat-list" id="chatList">
      <!-- Populated by JS -->
    </div>

    <div class="sidebar-footer">
      <button class="settings-trigger" id="settingsTrigger">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
        </svg>
        <span>Settings</span>
      </button>
      <div class="model-badge">
        <span class="model-dot"></span>
        Qwen3.5-0.8B · FP16
      </div>
    </div>
  </aside>

  <!-- ── MAIN CHAT AREA ──────────────────────────────────── -->
  <main class="main-panel">
    <!-- Top bar -->
    <header class="top-bar">
      <button class="sidebar-toggle" id="sidebarToggle">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 12h18M3 6h18M3 18h18"/>
        </svg>
      </button>
      <div class="chat-title-wrap">
        <span class="chat-title" id="chatTitleDisplay">New Conversation</span>
      </div>
      <div class="top-bar-actions">
        <button class="icon-btn thinking-toggle-btn active" id="thinkingToggleBtn" title="Toggle thinking mode">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
            <circle cx="12" cy="17" r=".5" fill="currentColor"/>
            <circle cx="12" cy="12" r="10"/>
          </svg>
          <span>Thinking</span>
        </button>
        <button class="icon-btn" id="clearChatBtn" title="Clear chat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
            <path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
          </svg>
        </button>
      </div>
    </header>

    <!-- Messages container -->
    <div class="messages-container" id="messagesContainer">
      <!-- Welcome screen -->
      <div class="welcome-screen" id="welcomeScreen">
        <div class="welcome-logo">
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2" opacity="0.3"/>
            <path d="M20 32 Q32 16 44 32 Q32 48 20 32Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </div>
        <h1 class="welcome-title">Good to see you.</h1>
        <p class="welcome-subtitle">I'm Qwen AI — ready to reason, create, and assist.<br/>Ask me anything.</p>
        <div class="suggestion-chips">
          <button class="chip" data-prompt="Explain quantum entanglement simply">⚛️ Quantum physics</button>
          <button class="chip" data-prompt="Write a Python async web scraper">🐍 Python code</button>
          <button class="chip" data-prompt="Analyze the pros and cons of remote work">🌍 Analysis</button>
          <button class="chip" data-prompt="Write a haiku about artificial intelligence">✍️ Creative writing</button>
        </div>
      </div>

      <!-- Messages will be inserted here -->
      <div class="messages-list" id="messagesList"></div>
    </div>

    <!-- ── INPUT AREA ──────────────────────────────────────── -->
    <div class="input-area-wrapper">
      <!-- Attachments preview -->
      <div class="attachments-preview" id="attachmentsPreview"></div>

      <div class="input-area">
        <div class="input-box">
          <!-- Attach button -->
          <div class="attach-menu-wrap">
            <button class="attach-btn" id="attachBtn" title="Attach media">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
              </svg>
            </button>
            <div class="attach-menu" id="attachMenu">
              <button class="attach-option" id="attachImageBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <rect x="3" y="3" width="18" height="18" rx="2"/>
                  <circle cx="8.5" cy="8.5" r="1.5"/>
                  <polyline points="21 15 16 10 5 21"/>
                </svg>
                Upload Image
              </button>
              <button class="attach-option" id="attachVideoBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>
                </svg>
                Upload Video
              </button>
            </div>
          </div>

          <!-- Textarea -->
          <textarea
            id="messageInput"
            placeholder="Message Qwen AI..."
            rows="1"
            class="message-input"
          ></textarea>

          <!-- Context window + send -->
          <div class="input-right">
            <div class="context-chip" id="contextChip" title="Click to adjust context window">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
              </svg>
              <span id="contextLabel">8K</span>
            </div>
            <button class="send-btn" id="sendBtn" disabled>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
              </svg>
            </button>
          </div>
        </div>

        <p class="disclaimer">Qwen3.5-0.8B · CPU inference · Responses may be slow</p>
      </div>
    </div>

    <!-- Hidden file inputs -->
    <input type="file" id="imageInput" accept="image/*" multiple style="display:none" />
    <input type="file" id="videoInput" accept="video/*" style="display:none" />
  </main>

  <!-- ── SETTINGS PANEL ──────────────────────────────────── -->
  <div class="settings-overlay" id="settingsOverlay"></div>
  <div class="settings-panel" id="settingsPanel">
    <div class="settings-header">
      <h2>Settings</h2>
      <button class="close-btn" id="closeSettings">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>

    <!-- System Prompt -->
    <div class="settings-section">
      <label class="settings-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/>
        </svg>
        System Prompt
      </label>
      <textarea
        id="systemPromptInput"
        class="system-prompt-textarea"
        placeholder="You are a helpful, harmless, and honest AI assistant..."
        rows="5"
      >You are a helpful, harmless, and honest AI assistant. You are powered by Qwen3.5-0.8B and excel at reasoning, coding, writing, and analysis.</textarea>
    </div>

    <!-- Context Window -->
    <div class="settings-section">
      <label class="settings-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>
        Context Window
        <span class="settings-value" id="contextValueDisplay">8,192 tokens</span>
      </label>
      <div class="slider-track">
        <input
          type="range"
          id="contextSlider"
          min="1024"
          max="262144"
          step="1024"
          value="8192"
          class="slider"
        />
        <div class="slider-labels">
          <span>1K</span>
          <span>32K</span>
          <span>64K</span>
          <span>128K</span>
          <span>252K</span>
        </div>
      </div>
      <p class="settings-hint">⚠️ Larger context = slower on CPU. Recommended: 4K–16K for speed.</p>
    </div>

    <!-- Thinking Mode -->
    <div class="settings-section">
      <label class="settings-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r=".5" fill="currentColor"/><circle cx="12" cy="12" r="10"/>
        </svg>
        Thinking Mode
      </label>
      <div class="toggle-row">
        <span class="toggle-desc">Show model's reasoning process before answer</span>
        <label class="toggle-switch">
          <input type="checkbox" id="thinkingModeToggle" checked />
          <span class="toggle-knob"></span>
        </label>
      </div>
    </div>

    <!-- Temperature -->
    <div class="settings-section">
      <label class="settings-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M14 14.76V3.5a2.5 2.5 0 00-5 0v11.26a4.5 4.5 0 105 0z"/>
        </svg>
        Temperature
        <span class="settings-value" id="tempValueDisplay">0.6</span>
      </label>
      <input type="range" id="tempSlider" min="0" max="1" step="0.05" value="0.6" class="slider" />
    </div>

    <!-- Max New Tokens -->
    <div class="settings-section">
      <label class="settings-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
        </svg>
        Max Output Tokens
        <span class="settings-value" id="maxTokensDisplay">2048</span>
      </label>
      <input type="range" id="maxTokensSlider" min="256" max="8192" step="256" value="2048" class="slider" />
    </div>

    <button class="apply-btn" id="applySettings">Apply Settings</button>
  </div>

  <!-- ── CONTEXT QUICK PANEL ─────────────────────────────── -->
  <div class="context-quick-panel" id="contextQuickPanel">
    <div class="cqp-header">Context Window</div>
    <div class="cqp-presets">
      <button class="cqp-preset" data-val="4096">4K</button>
      <button class="cqp-preset" data-val="8192">8K</button>
      <button class="cqp-preset active" data-val="16384">16K</button>
      <button class="cqp-preset" data-val="32768">32K</button>
      <button class="cqp-preset" data-val="65536">64K</button>
      <button class="cqp-preset" data-val="131072">128K</button>
      <button class="cqp-preset" data-val="262144">252K</button>
    </div>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>