Hugging Face's logo

Spaces:
DocPereira
/
deepsite-project
Running

App Files Community
DocPereira commited on
Commit
b2edfb1
·
verified ·
1 Parent(s): 1de9714

Salvar

Browse files
Files changed (1) hide show
  1. index.html +169 -17
index.html CHANGED
@@ -1,19 +1,171 @@
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>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Mini LLM Chat</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <!-- CSS embutido -->
9
+ <style>
10
+ body {
11
+ font-family: Arial, sans-serif;
12
+ background: #f0f0f0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ margin: 0;
18
+ }
19
+
20
+ .chat-container {
21
+ background: white;
22
+ padding: 20px;
23
+ width: 400px;
24
+ max-width: 90%;
25
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
26
+ border-radius: 10px;
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: 10px;
30
+ }
31
+
32
+ h1 {
33
+ text-align: center;
34
+ margin-top: 0;
35
+ }
36
+
37
+ .chat-box {
38
+ flex-grow: 1;
39
+ border: 1px solid #ccc;
40
+ padding: 10px;
41
+ overflow-y: auto;
42
+ height: 300px;
43
+ border-radius: 5px;
44
+ background: #fafafa;
45
+ }
46
+
47
+ .message {
48
+ margin-bottom: 10px;
49
+ line-height: 1.4;
50
+ }
51
+
52
+ .message.user {
53
+ text-align: right;
54
+ color: #2b7a0b;
55
+ }
56
+
57
+ .message.llm {
58
+ text-align: left;
59
+ color: #333;
60
+ }
61
+
62
+ .input-container {
63
+ display: flex;
64
+ gap: 5px;
65
+ }
66
+
67
+ #user-input {
68
+ flex-grow: 1;
69
+ padding: 8px;
70
+ border: 1px solid #ccc;
71
+ border-radius: 5px;
72
+ }
73
+
74
+ #send-btn {
75
+ padding: 8px 12px;
76
+ background: #4caf50;
77
+ color: white;
78
+ border: none;
79
+ border-radius: 5px;
80
+ cursor: pointer;
81
+ }
82
+
83
+ #send-btn:hover {
84
+ background: #45a049;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body>
89
+ <div class="chat-container">
90
+ <h1>🧠 Mini LLM Chat</h1>
91
+
92
+ <div id="chat-box" class="chat-box"></div>
93
+
94
+ <div class="input-container">
95
+ <input
96
+ type="text"
97
+ id="user-input"
98
+ placeholder="Digite sua pergunta..."
99
+ autocomplete="off"
100
+ />
101
+ <button id="send-btn">Enviar</button>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- JavaScript embutido -->
106
+ <script>
107
+ const chatBox = document.getElementById("chat-box");
108
+ const userInput = document.getElementById("user-input");
109
+ const sendBtn = document.getElementById("send-btn");
110
+
111
+ // Modelo público da Hugging Face (pode trocar por outro)
112
+ const HF_API_URL =
113
+ "https://api-inference.huggingface.co/models/tiiuae/falcon-7b-instruct";
114
+
115
+ // 🔑 Coloque seu token Hugging Face aqui:
116
+ const HF_API_TOKEN = "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";
117
+ async function sendMessage() {
118
+ const text = userInput.value.trim();
119
+ if (!text) return;
120
+
121
+ addMessage(text, "user");
122
+ userInput.value = "";
123
+
124
+ addMessage("...", "llm");
125
+ const placeholder = chatBox.lastChild;
126
+
127
+ try {
128
+ const response = await fetch(HF_API_URL, {
129
+ method: "POST",
130
+ headers: {
131
+ Authorization: `Bearer ${HF_API_TOKEN}`,
132
+ "Content-Type": "application/json",
133
+ },
134
+ body: JSON.stringify({
135
+ inputs: text,
136
+ parameters: { max_new_tokens: 200, temperature: 0.7 },
137
+ }),
138
+ });
139
+
140
+ const result = await response.json();
141
+ console.log(result);
142
+
143
+ if (result.error) {
144
+ placeholder.textContent = "⚠️ Erro: " + result.error;
145
+ } else {
146
+ placeholder.textContent =
147
+ result[0]?.generated_text?.trim() || "❌ Sem resposta do modelo.";
148
+ }
149
+ } catch (err) {
150
+ console.error(err);
151
+ placeholder.textContent = "❌ Erro de conexão com o modelo.";
152
+ }
153
+
154
+ chatBox.scrollTop = chatBox.scrollHeight;
155
+ }
156
+
157
+ function addMessage(text, sender) {
158
+ const msg = document.createElement("div");
159
+ msg.classList.add("message", sender);
160
+ msg.textContent = text;
161
+ chatBox.appendChild(msg);
162
+ chatBox.scrollTop = chatBox.scrollHeight;
163
+ }
164
+
165
+ sendBtn.addEventListener("click", sendMessage);
166
+ userInput.addEventListener("keydown", (e) => {
167
+ if (e.key === "Enter") sendMessage();
168
+ });
169
+ </script>
170
+ </body>
171
+ </html>