Hugging Face's logo

Spaces:
Zenkad
/
zenkamind-web
Running

App Files Community
Zenkad commited on
Commit
ea3172b
·
verified ·
1 Parent(s): defd18e

Upload 3 files

Browse files
Files changed (3) hide show
  1. index.html +27 -19
  2. script.js +46 -0
  3. style.css +93 -28
index.html CHANGED
@@ -1,19 +1,27 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ZenkaMind — Yapay Zekâ Asistanı</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <h1>🧠 ZenkaMind v10</h1>
12
+ <p class="subtitle">Türkçe yapay zekâ sohbet asistanı — <strong>Mixtral 8x7B</strong> modelini kullanır</p>
13
+
14
+ <div class="chat-box" id="chat-box">
15
+ <div class="message bot">Merhaba 👋 Ben ZenkaMind! Size nasıl yardımcı olabilirim?</div>
16
+ </div>
17
+
18
+ <div class="input-area">
19
+ <input type="text" id="user-input" placeholder="Bir şey yazın..." autocomplete="off">
20
+ <button id="send-btn">Gönder</button>
21
+ </div>
22
+ </div>
23
+
24
+ <footer>© 2025 Zenkamind Bilişim & Teknoloji</footer>
25
+ <script src="script.js"></script>
26
+ </body>
27
+ </html>
script.js ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const HF_API_URL = httpsapi-inference.huggingface.comodelsmistralaiMixtral-8x7B-Instruct-v0.1;
2
+
3
+ async function sendMessage() {
4
+ const input = document.getElementById(user-input);
5
+ const chatBox = document.getElementById(chat-box);
6
+ const userMessage = input.value.trim();
7
+ if (!userMessage) return;
8
+
9
+ chatBox.innerHTML += `div class=message user${userMessage}div`;
10
+ input.value = ;
11
+
12
+ const loading = document.createElement(div);
13
+ loading.className = message bot;
14
+ loading.textContent = ⏳ Yanıt yazılıyor...;
15
+ chatBox.appendChild(loading);
16
+ chatBox.scrollTop = chatBox.scrollHeight;
17
+
18
+ try {
19
+ const response = await fetch(HF_API_URL, {
20
+ method POST,
21
+ headers {
22
+ Authorization `Bearer ${HF_TOKEN}`, Secret token Hugging Face'ten çekiliyor
23
+ Content-Type applicationjson
24
+ },
25
+ body JSON.stringify({
26
+ inputs userMessage
27
+ })
28
+ });
29
+
30
+ const data = await response.json();
31
+ chatBox.removeChild(loading);
32
+
33
+ const reply = data.[0].generated_text ⚠️ Modelden yanıt alınamadı.;
34
+ chatBox.innerHTML += `div class=message bot${reply}div`;
35
+ } catch (err) {
36
+ chatBox.removeChild(loading);
37
+ chatBox.innerHTML += `div class=message bot❌ Hata ${err.message}div`;
38
+ }
39
+
40
+ chatBox.scrollTop = chatBox.scrollHeight;
41
+ }
42
+
43
+ document.getElementById(send-btn).addEventListener(click, sendMessage);
44
+ document.getElementById(user-input).addEventListener(keypress, (e) = {
45
+ if (e.key === Enter) sendMessage();
46
+ });
style.css CHANGED
@@ -1,28 +1,93 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ background-color: #0d1117;
3
+ color: #e6edf3;
4
+ font-family: "Segoe UI", sans-serif;
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ justify-content: center;
9
+ height: 100vh;
10
+ margin: 0;
11
+ }
12
+
13
+ .container {
14
+ width: 90%;
15
+ max-width: 700px;
16
+ background-color: #161b22;
17
+ padding: 20px;
18
+ border-radius: 12px;
19
+ box-shadow: 0 0 15px rgba(0,0,0,0.5);
20
+ }
21
+
22
+ h1 {
23
+ text-align: center;
24
+ color: #00b4d8;
25
+ }
26
+
27
+ .subtitle {
28
+ text-align: center;
29
+ color: #8b949e;
30
+ margin-bottom: 20px;
31
+ }
32
+
33
+ .chat-box {
34
+ height: 400px;
35
+ overflow-y: auto;
36
+ background-color: #0d1117;
37
+ border-radius: 10px;
38
+ padding: 15px;
39
+ border: 1px solid #30363d;
40
+ }
41
+
42
+ .message {
43
+ margin: 10px 0;
44
+ padding: 10px;
45
+ border-radius: 10px;
46
+ line-height: 1.4;
47
+ }
48
+
49
+ .bot {
50
+ background-color: #21262d;
51
+ color: #58a6ff;
52
+ }
53
+
54
+ .user {
55
+ background-color: #238636;
56
+ color: #fff;
57
+ text-align: right;
58
+ }
59
+
60
+ .input-area {
61
+ display: flex;
62
+ margin-top: 15px;
63
+ }
64
+
65
+ #user-input {
66
+ flex: 1;
67
+ padding: 10px;
68
+ border: none;
69
+ border-radius: 10px;
70
+ background: #21262d;
71
+ color: #fff;
72
+ }
73
+
74
+ #send-btn {
75
+ background: #00b4d8;
76
+ color: #fff;
77
+ border: none;
78
+ border-radius: 10px;
79
+ padding: 10px 20px;
80
+ margin-left: 10px;
81
+ cursor: pointer;
82
+ transition: 0.3s;
83
+ }
84
+
85
+ #send-btn:hover {
86
+ background: #0096c7;
87
+ }
88
+
89
+ footer {
90
+ margin-top: 10px;
91
+ color: #8b949e;
92
+ font-size: 0.9em;
93
+ }