Hugging Face's logo

Spaces:
iamseyhmus7
/
Turkish-LLM-RAG-Chatbot
Running

App Files Community
Turkish-LLM-RAG-Chatbot
File size: 7,739 Bytes 
70d956a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Sohbet Chatbot</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/styles.css"/>
</head>
<body class="bg-gray-100 dark:bg-[#1e1e1e] text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="flex h-screen">
    <!-- Sidebar -->
    <div id="sidebar" class="w-80 bg-white dark:bg-[#2a2a2a] shadow-lg p-5 absolute md:static z-20 h-full" role="navigation" aria-label="Sohbet Geçmişi">
      <!-- Profesyonel başlık + ikonlar -->
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Sohbetler</h2>
        <div class="flex items-center gap-2">
          <button id="new-chat" class="text-indigo-600 hover:text-indigo-800 text-xl" title="Yeni Sohbet">
            <i class="fas fa-plus-circle"></i>
          </button>
          <button id="toggle-theme" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 text-xl ml-2" title="Tema Değiştir">
            <i class="fas fa-moon"></i>
          </button>
          <button id="close-sidebar" class="md:hidden text-gray-600 hover:text-gray-800 dark:text-gray-300 text-xl" title="Kapat">
            <i class="fas fa-times-circle"></i>
          </button>
        </div>
      </div>

      <!-- Arama -->
      <div class="mb-4">
      <input id="chat-search" type="text" placeholder="Sohbetlerde Ara..."

      class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"

      aria-label="Sohbet Arama">
      </div>

      <!-- Kullanıcı adı -->
      <div class="mb-4">
      <input id="username-input" type="text" placeholder="Kullanıcı Adı Girin"

      class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"

      aria-label="Kullanıcı Adı">
      </div>

      <!-- Tema Seçici -->
      <div class="mb-4 relative">
          <select id="theme-selector"

          class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 dark:bg-gray-700 dark:text-white"

          aria-label="Tema Seç">
          <option value="default">Varsayılan Tema</option>
          <option value="blue">Mavi Tema</option>
          <option value="green">Yeşil Tema</option>
          <option value="purple">Mor Tema</option>
          <option value="red">Kırmızı Tema</option>
        </select>
        <div id="theme-preview" class="absolute w-4 h-4 rounded-full top-3 right-3"></div>
      </div>

      <!-- Mesaj Stili Seçici -->
      <div class="mb-4">
        <select id="bubble-style" class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" aria-label="Mesaj Balonu Stili">
          <option value="rounded">Yuvarlak Kenarlı</option>
          <option value="sharp">Keskin Kenarlı</option>
        </select>
      </div>

      <!-- Sohbet Geçmişi -->
      <div id="chat-history" class="space-y-3" role="list" aria-label="Sohbet Geçmişi Listesi">
        <!-- Dinamik sohbet geçmişi -->
      </div>
    </div>

    <!-- Ana Sohbet Alanı -->
    <div class="flex-1 flex flex-col">
      <!-- Başlık -->
      <div class="bg-white dark:bg-[#2a2a2a] shadow p-4 flex justify-between items-center">
        <button id="open-sidebar" class="md:hidden text-gray-600 hover:text-gray-800 dark:text-gray-300 ripple" aria-label="Sidebar'ı Aç">
          <i class="fas fa-bars"></i>
        </button>
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Chatbot 🤖</h1>
      </div>

      <!-- Mesajlar -->
      <div id="chat-container" class="chat-container p-6 flex-1 bg-white dark:bg-[#1e1e1e]" role="main" aria-label="Sohbet Alanı">
        <div id="messages" class="flex flex-col space-y-2"></div>
      </div>

      <!-- Mesaj Giriş Alanı -->
      <div class="bg-white dark:bg-[#2a2a2a] p-4 shadow">
        <div id="quick-replies" class="flex gap-2 mb-2 flex-wrap">
          <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Merhaba! 😊')">Merhaba!</button>
          <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Nasılsın?')">Nasılsın?</button>
          <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 ripple" onclick="quickReply('Teşekkürler!')">Teşekkürler!</button>
        </div>
        <form id="chat-form" class="flex items-center gap-3">
          <div class="relative flex-1">
            <input id="message-input" type="text" placeholder="Mesajınızı yazın... 😊" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" aria-label="Mesaj Girişi">
            <button type="button" id="emoji-picker-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 ripple" aria-label="Emoji Seçici">
              <i class="fas fa-smile"></i>
            </button>
            <div id="emoji-picker" class="hidden absolute bottom-14 right-0 bg-white dark:bg-gray-800 border rounded-lg p-3 shadow-xl max-w-sm z-10">
              <div class="flex gap-2 flex-wrap text-xl">
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😊')">😊</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😂')">😂</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('👍')">👍</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('❤️')">❤️</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🚀')">🚀</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🌟')">🌟</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('😎')">😎</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🎉')">🎉</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🙌')">🙌</span>
                <span class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 p-1 rounded" onclick="addEmoji('🔥')">🔥</span>
              </div>
            </div>
          </div>
          <button type="submit" class="bg-indigo-600 text-white p-3 rounded-lg hover:bg-indigo-700 transition-colors ripple" aria-label="Mesaj Gönder">
            <i class="fas fa-paper-plane"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

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