Hugging Face's logo

Spaces:
sam2ai
/
frontend_ui
Running

App Files Community
sam2ai commited on
Commit
e2a8ae1
·
1 Parent(s): 5355384

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +142 -17
index.html CHANGED
@@ -1,19 +1,144 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Question and Answer</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
9
+ <script>
10
+ function sendQuestion() {
11
+ document.getElementById("loading").classList.remove("hidden");
12
+ document.getElementById("answer").classList.add("hidden");
13
+ // https://baf8-34-87-104-241.ngrok-free.app/generate
14
+ // var myHeaders = new Headers();
15
+ // myHeaders.append("Content-Type", "application/json");
16
+
17
+ // var q_text = document.getElementById('question').value
18
+
19
+ // var raw = JSON.stringify({
20
+ // "prompt": '<s>[INST] {q_text} [/INST]',
21
+ // "max_tokens": 256,
22
+ // "temperature": 0.1
23
+ // });
24
+
25
+ // var requestOptions = {
26
+ // method: 'POST',
27
+ // headers: myHeaders,
28
+ // body: raw,
29
+ // redirect: 'follow'
30
+ // };
31
+
32
+ // fetch("https://baf8-34-87-104-241.ngrok-free.app/generate", requestOptions)
33
+ // .then(response => response.text())
34
+ // .then(result => console.log(result))
35
+ // .catch(error => console.log('error', error));
36
+
37
+ let data = JSON.stringify({
38
+ "prompt": "<s>[INST] ତୁମେ କିଏ? [/INST] ",
39
+ "max_tokens": 25,
40
+ "temperature": 0.1
41
+ });
42
+
43
+ let config = {
44
+ method: 'post',
45
+ maxBodyLength: Infinity,
46
+ url: 'https://5c6f-34-173-26-34.ngrok-free.app/generate',
47
+ headers: {
48
+ 'Content-Type': 'application/json'
49
+ },
50
+ data : data
51
+ };
52
+
53
+ axios.request(config)
54
+ .then((response) => {
55
+ console.log(JSON.stringify(response.data));
56
+ document.getElementById("answer").textContent = response.data;
57
+ document.getElementById("loading").classList.add("hidden");
58
+ document.getElementById("answer").classList.remove("hidden");
59
+ })
60
+ .catch((error) => {
61
+ console.log(error);
62
+ });
63
+
64
+
65
+ // let continuation = 'The best things in life are';
66
+ // let prompt = `<s>[INST] ${continuation} [/INST]`;
67
+ // let counter = 0;
68
+ // while(!continuation.includes('</s>') && counter < 5) {
69
+ // // Request more tokens from the server
70
+ // let data = { prompt: continuation, priority: 'MED' }; // 'HIGH' | 'MED' | 'LOW' | 'VLOW'
71
+ // try {
72
+ // const response = await axios.post(`http://mydomain.com/dt_llama`, data, { timeout: 10_000});
73
+ // if(response.data.status === 'success') {
74
+ // continuation += response.data.data.text;
75
+ // counter += 1;
76
+ // // Here write the continuation to your UI, or observable state etc.
77
+ // } else {
78
+ // console.error(response.data.error);
79
+ // break;
80
+ // }
81
+ // } catch(err) {
82
+ // // non-2XX/3XX response
83
+ // console.error(err);
84
+ // break;
85
+ // }
86
+ // }
87
+
88
+ // fetch(
89
+ // 'https://baf8-34-87-104-241.ngrok-free.app/generate' +
90
+ // encodeURIComponent(document.getElementById('question').value)
91
+ // )
92
+ // .then((response) => response.json())
93
+ // .then((data) => {
94
+ // document.getElementById("answer").textContent = data.answer;
95
+ // document.getElementById("loading").classList.add("hidden");
96
+ // document.getElementById("answer").classList.remove("hidden");
97
+ // })
98
+ // .catch((error) => {
99
+ // console.error("Error fetching data:", error);
100
+ // document.getElementById("loading").classList.add("hidden");
101
+ // document.getElementById("answer").textContent = "Error: Unable to fetch data";
102
+ // document.getElementById("answer").classList.remove("hidden");
103
+ // });
104
+ }
105
+
106
+ </script>
107
+ <style>
108
+ @keyframes spin {
109
+ to {
110
+ transform: rotate(360deg);
111
+ }
112
+ }
113
+
114
+ .animate-spin {
115
+ animation: spin 1s linear infinite;
116
+ }
117
+
118
+ </style>
119
+ </head>
120
+ <body class="bg-gray-100 min-h-screen">
121
+ <div class="container mx-auto py-8">
122
+ <div class="bg-white shadow-lg rounded-lg p-8">
123
+ <h1 class="text-3xl font-bold mb-4">Ask a Question</h1>
124
+ <textarea id="answer" class="w-full h-64 p-4 bg-gray-100 mb-4" readonly></textarea>
125
+ <!-- Loading message -->
126
+ <!-- Loading spinner -->
127
+ <div
128
+ id="loading"
129
+ class="hidden w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin mx-auto my-8"
130
+ ></div>
131
+ <div class="flex items-center space-x-4">
132
+ <input id="question" type="text" placeholder="Type your question here" class="flex-grow p-4 border rounded-lg">
133
+ <button
134
+ class="bg-blue-500 text-white py-3 px-6 rounded-lg"
135
+ onclick="sendQuestion()"
136
+ >
137
+ Ask
138
+ </button>
139
+ </div>
140
+ <div class="htmx-indicator h-2 w-2 bg-blue-500 invisible rounded-full"></div>
141
+ </div>
142
+ </div>
143
+ </body>
144
  </html>