Selamlar, Son dönemde ChatGPT ve benzeri yapılar için oldukça fazla frontend denemesi yapıldığını biliyoruz. ChatGPT benzeri bir sohbet arayüzü için GitHub üzerinde daha önce görüp beğendiğiniz, arayüzü başarılı olduğunu düşündüğünüz bir repo öneriniz var mıdır?

Selam, bunlar en popüler olanlar: 1- https://github.com/ChatGPTNextWeb/NextChat 2- https://github.com/danny-avila/LibreChat 3- https://github.com/lobehub/lobe-chat 4- https://github.com/mckaywrigley/chatbot-ui
Açık Kaynak ChatGPT HTML Frontedi Var Mı?

27-12-2025, 20:33:09

#1

soylenmezsmt

Selamlar,

Son dönemde ChatGPT ve benzeri yapılar için oldukça fazla frontend denemesi yapıldığını biliyoruz.
ChatGPT benzeri bir sohbet arayüzü için GitHub üzerinde daha önce görüp beğendiğiniz, arayüzü başarılı olduğunu düşündüğünüz bir repo öneriniz var mıdır?
27-12-2025, 20:39:57
onurCC
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background-color: #171717;
      color: #ffffff;
      height: 100vh;
      overflow: hidden;
      display: flex;
    }
    /* Sol Sidebar */
    .sidebar {
      width: 280px;
      background-color: #1f1f1f;
      display: flex;
      flex-direction: column;
      height: 100vh;
      border-right: 1px solid #2d2d2d;
    }
    .sidebar-header {
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #2d2d2d;
    }
    .google-logo {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc04 75%, #ea4335 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
      color: white;
      cursor: pointer;
    }
    .sidebar-nav {
      flex: 1;
      padding: 12px 8px;
      overflow-y: auto;
    }
    .nav-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      margin: 4px 0;
      border-radius: 8px;
      cursor: pointer;
      color: #e0e0e0;
      font-size: 14px;
      transition: background-color 0.2s;
      user-select: none;
    }
    .nav-item:hover {
      background-color: #2d2d2d;
    }
    .nav-item.active {
      background-color: #2d2d2d;
    }
    .nav-item svg {
      width: 20px;
      height: 20px;
      margin-right: 12px;
      fill: currentColor;
    }
    .nav-badge {
      background-color: #10a37f;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: auto;
      font-weight: 600;
    }
    .sidebar-footer {
      padding: 16px;
      border-top: 1px solid #2d2d2d;
    }
    .user-profile {
      display: flex;
      align-items: center;
      padding: 12px;
      background-color: #2d2d2d;
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #4a4a4a;
      margin-right: 12px;
    }
    .user-info {
      flex: 1;
    }
    .user-name {
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 2px;
    }
    .user-plan {
      font-size: 12px;
      color: #a0a0a0;
    }
    .upgrade-btn {
      background-color: #2d2d2d;
      border: 1px solid #3d3d3d;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    .upgrade-btn:hover {
      background-color: #3d3d3d;
    }
    /* Üst Bar */
    .top-bar {
      position: fixed;
      top: 0;
      left: 280px;
      right: 0;
      height: 60px;
      background-color: #171717;
      border-bottom: 1px solid #2d2d2d;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: 100;
    }
    .top-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }
    .top-left svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
      margin-left: 4px;
      transition: transform 0.2s;
    }
    .top-left:hover svg {
      transform: translateY(2px);
    }
    .top-center {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .upgrade-pill {
      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border: none;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .upgrade-pill:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }
    .upgrade-pill svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
    .top-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .top-icon {
      width: 24px;
      height: 24px;
      cursor: pointer;
      fill: #ffffff;
      stroke: #ffffff;
      stroke-width: 1.5;
      transition: opacity 0.2s;
    }
    .top-icon:hover {
      opacity: 0.7;
    }
    /* Ana İçerik */
    .main-content {
      margin-left: 280px;
      margin-top: 60px;
      flex: 1;
      height: calc(100vh - 60px);
      background-color: #171717;
      display: flex;
      flex-direction: column;
      padding: 40px;
      overflow-y: auto;
    }
    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
    .welcome-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-height: 400px;
    }
    .welcome-screen.hidden {
      display: none;
    }
    .welcome-message {
      font-size: 32px;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 40px;
      text-align: center;
    }
    .chat-messages {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 24px 0;
      min-height: 200px;
    }
    .message {
      display: flex;
      gap: 16px;
      animation: fadeIn 0.3s ease-in;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .message-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .message-avatar.user {
      background-color: #4a4a4a;
    }
    .message-avatar.ai {
      background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc04 75%, #ea4335 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
      color: white;
    }
    .message-content {
      flex: 1;
      color: #e0e0e0;
      font-size: 15px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .message.user .message-content {
      color: #ffffff;
    }
    .input-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      background-color: #2d2d2d;
      border-radius: 24px;
      padding: 12px 16px;
      border: 1px solid #3d3d3d;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .input-container:focus-within {
      border-color: #4d4d4d;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    }
    .input-left-icon {
      width: 24px;
      height: 24px;
      fill: #ffffff;
      margin-right: 12px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .input-left-icon:hover {
      opacity: 0.7;
    }
    .chat-input {
      flex: 1;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 16px;
      outline: none;
      padding: 8px 0;
    }
    .chat-input::placeholder {
      color: #a0a0a0;
    }
    .input-right-icons {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: 12px;
    }
    .input-icon {
      width: 24px;
      height: 24px;
      fill: #ffffff;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .input-icon:hover {
      opacity: 0.7;
    }
    .typing-indicator {
      display: none;
      gap: 4px;
      padding: 12px 0;
    }
    .typing-indicator.active {
      display: flex;
    }
    .typing-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #a0a0a0;
      animation: typing 1.4s infinite;
    }
    .typing-dot:nth-child(2) {
      animation-delay: 0.2s;
    }
    .typing-dot:nth-child(3) {
      animation-delay: 0.4s;
    }
    @keyframes typing {
      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.7;
      }
      30% {
        transform: translateY(-10px);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <!-- Sol Sidebar -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="google-logo">G</div>
    </div>
    <div class="sidebar-nav">
      <div class="nav-item" data-action="new-chat">
        <svg viewBox="0 0 24 24">
          <path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
        </svg>
        Yeni sohbet
      </div>
      <div class="nav-item" data-action="search">
        <svg viewBox="0 0 24 24">
          <path
            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
        </svg>
        Sohbetleri ara
      </div>
      <div class="nav-item" data-action="images">
        <svg viewBox="0 0 24 24">
          <path
            d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
        </svg>
        Görseller
        <span class="nav-badge">YENİ</span>
      </div>
      <div class="nav-item" data-action="apps">
        <svg viewBox="0 0 24 24">
          <path
            d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
        </svg>
        Uygulamalar
      </div>
      <div class="nav-item" data-action="projects">
        <svg viewBox="0 0 24 24">
          <path
            d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
        </svg>
        Projeler
      </div>
    </div>
    <div class="sidebar-footer">
      <div class="user-profile">
        <div class="user-avatar"></div>
        <div class="user-info">
          <div class="user-name">Onur Can Çelik</div>
          <div class="user-plan">Ücretsiz</div>
        </div>
        <button class="upgrade-btn">Yükselt</button>
      </div>
    </div>
  </div>
  <!-- Üst Bar -->
  <div class="top-bar">
    <div class="top-left" id="chatgpt-dropdown">
      ChatGPT
      <svg viewBox="0 0 24 24">
        <path d="M7 10l5 5 5-5z" />
      </svg>
    </div>
    <div class="top-center">
      <button class="upgrade-pill" id="upgrade-pill">
        <svg viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
        </svg>
        Go'ya yükselterek
      </button>
    </div>
    <div class="top-right">
      <svg class="top-icon" id="profile-icon" viewBox="0 0 24 24" fill="none">
        <path
          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          stroke="currentColor" fill="none" />
      </svg>
      <svg class="top-icon" id="new-chat-icon" viewBox="0 0 24 24" fill="none">
        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"
          stroke="currentColor" fill="none" />
        <path d="M12 6v6m0 0v6m0-6h6m-6 0H6" stroke="currentColor" fill="none" />
      </svg>
    </div>
  </div>
  <!-- Ana İçerik -->
  <div class="main-content">
    <div class="chat-container">
      <div class="welcome-screen" id="welcome-screen">
        <div class="welcome-message">Hey Onur. Dalmaya hazır mısın?</div>
      </div>
      <div class="chat-messages" id="chat-messages" style="display: none;"></div>
      <div class="typing-indicator" id="typing-indicator">
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
        <div class="typing-dot"></div>
      </div>
      <div class="input-container">
        <svg class="input-left-icon" id="attach-icon" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
        <input type="text" class="chat-input" id="chat-input" placeholder="Herhangi bir şey sor" autocomplete="off">
        <div class="input-right-icons">
          <svg class="input-icon" id="mic-icon" viewBox="0 0 24 24">
            <path
              d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.31 6-6.72h-1.7z" />
          </svg>
          <svg class="input-icon" id="equalizer-icon" viewBox="0 0 24 24">
            <path
              d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
          </svg>
        </div>
      </div>
    </div>
  </div>
  <script>
    // DOM Elementleri
    const chatInput = document.getElementById('chat-input');
    const chatMessages = document.getElementById('chat-messages');
    const welcomeScreen = document.getElementById('welcome-screen');
    const typingIndicator = document.getElementById('typing-indicator');
    const navItems = document.querySelectorAll('.nav-item');
    const upgradeBtn = document.querySelector('.upgrade-btn');
    const upgradePill = document.getElementById('upgrade-pill');
    const newChatIcon = document.getElementById('new-chat-icon');
    const attachIcon = document.getElementById('attach-icon');
    const micIcon = document.getElementById('mic-icon');
    const equalizerIcon = document.getElementById('equalizer-icon');
    // Chat geçmişi
    let messages = [];
    // AI Yanıtları (Demo)
    const aiResponses = [
      "Merhaba! Size nasıl yardımcı olabilirim?",
      "Bu konuda daha fazla bilgi verebilirim. Hangi açıdan yardımcı olmamı istersiniz?",
      "İlginç bir soru! Bu konuda şunları söyleyebilirim...",
      "Anladım. Bu durumda şöyle bir yaklaşım önerebilirim.",
      "Harika bir soru! Size detaylı bir açıklama yapabilirim.",
      "Bu konuda size yardımcı olmaktan mutluluk duyarım. Başka bir şey sormak ister misiniz?",
      "Evet, bu konuda size rehberlik edebilirim. Daha spesifik bir soru sorarsanız daha iyi yardımcı olabilirim.",
      "Anladım. Size bu konuda kapsamlı bir açıklama yapabilirim."
    ];
    // Mesaj gönderme fonksiyonu
    function sendMessage(text) {
      if (!text.trim()) return;
      // Welcome ekranını gizle
      if (welcomeScreen && !welcomeScreen.classList.contains('hidden')) {
        welcomeScreen.classList.add('hidden');
        chatMessages.style.display = 'flex';
      }
      // Kullanıcı mesajını ekle
      addMessage(text, 'user');
      messages.push({ role: 'user', content: text });
      // Input'u temizle
      chatInput.value = '';
      // Typing indicator göster
      typingIndicator.classList.add('active');
      // AI yanıtını simüle et (1-2 saniye sonra)
      setTimeout(() => {
        typingIndicator.classList.remove('active');
        const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
        addMessage(randomResponse, 'ai');
        messages.push({ role: 'ai', content: randomResponse });
        // Scroll to bottom
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }, 1000 + Math.random() * 1000);
    }
    // Mesaj ekleme fonksiyonu
    function addMessage(text, role) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${role}`;
      const avatar = document.createElement('div');
      avatar.className = `message-avatar ${role}`;
      if (role === 'ai') {
        avatar.textContent = 'G';
      }
      const content = document.createElement('div');
      content.className = 'message-content';
      content.textContent = text;
      messageDiv.appendChild(avatar);
      messageDiv.appendChild(content);
      chatMessages.appendChild(messageDiv);
      // Scroll to bottom
      setTimeout(() => {
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }, 100);
    }
    // Yeni sohbet başlat
    function startNewChat() {
      messages = [];
      chatMessages.innerHTML = '';
      welcomeScreen.classList.remove('hidden');
      chatMessages.style.display = 'none';
      chatInput.focus();
    }
    // Event Listeners
    chatInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage(chatInput.value);
      }
    });
    // Navigasyon öğeleri
    navItems.forEach(item => {
      item.addEventListener('click', () => {
        // Aktif durumu güncelle
        navItems.forEach(nav => nav.classList.remove('active'));
        item.classList.add('active');
        const action = item.dataset.action;
        switch (action) {
          case 'new-chat':
            startNewChat();
            break;
          case 'search':
            alert('Sohbet arama özelliği yakında eklenecek!');
            break;
          case 'images':
            alert('Görseller özelliği yakında eklenecek!');
            break;
          case 'apps':
            alert('Uygulamalar özelliği yakında eklenecek!');
            break;
          case 'projects':
            alert('Projeler özelliği yakında eklenecek!');
            break;
        }
      });
    });
    // Upgrade butonları
    upgradeBtn.addEventListener('click', () => {
      alert('Yükseltme sayfasına yönlendiriliyorsunuz...');
    });
    upgradePill.addEventListener('click', () => {
      alert('Go planına yükseltme sayfasına yönlendiriliyorsunuz...');
    });
    // Üst bar ikonları
    newChatIcon.addEventListener('click', () => {
      startNewChat();
    });
    document.getElementById('profile-icon').addEventListener('click', () => {
      alert('Profil ayarları yakında eklenecek!');
    });
    document.getElementById('chatgpt-dropdown').addEventListener('click', () => {
      alert('ChatGPT menüsü yakında eklenecek!');
    });
    // Input ikonları
    attachIcon.addEventListener('click', () => {
      alert('Dosya ekleme özelliği yakında eklenecek!');
    });
    micIcon.addEventListener('click', () => {
      alert('Sesli mesaj özelliği yakında eklenecek!');
    });
    equalizerIcon.addEventListener('click', () => {
      alert('Ayarlar menüsü yakında eklenecek!');
    });
    // Input focus
    chatInput.addEventListener('focus', () => {
      chatInput.parentElement.style.borderColor = '#4d4d4d';
    });
    chatInput.addEventListener('blur', () => {
      chatInput.parentElement.style.borderColor = '#3d3d3d';
    });
    // Sayfa yüklendiğinde input'a focus
    window.addEventListener('load', () => {
      chatInput.focus();
    });
  </script>
</body>
</html>
27-12-2025, 20:43:10

#3

cemalgnlts

Selam, bunlar en popüler olanlar:
1- https://github.com/ChatGPTNextWeb/NextChat
2- https://github.com/danny-avila/LibreChat
3- https://github.com/lobehub/lobe-chat
4- https://github.com/mckaywrigley/chatbot-ui