LaQuisha_complete-chat-browser_model-loader_and-backend_for-running-GGUF-models_with-Llama.cpp/index.html at main · Fortnumsound/LaQuisha_complete-chat-browser_model-loader_and-backend_for-running-GGUF-models_with-Llama.cpp · GitHub

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Chat with LaQuisha</title>
  <style>
    /* General page styling */
    body {
      font-family: Arial, sans-serif;
      background-image: url('/static/logo.png');
      background-position: top left;
      background-repeat: no-repeat;
      background-size: contain;
      background-attachment: fixed;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
    }
    /* Container for chat and controls */
    #chat-container {
      background-color: rgba(255, 255, 255, 0.85);
      border-radius: 8px;
      padding: 20px;
      margin-top: 20px;
      width: 90%;
      max-width: 700px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    #chat {
      max-height: 300px;
      overflow-y: auto;
      margin-top: 10px;
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 4px;
      background-color: #fafafa;
    }
    /* Input row styling */
    .input-row {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    .input-row input[type="text"] {
      flex-grow: 1;
      padding: 8px;
      margin-right: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .input-row button {
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
    }
    /* Settings row styling */
    .settings-row {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .settings-row label {
      margin-right: 4px;
    }
    /* File upload styling */
    .upload-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #mic_button {
      margin-left: 10px;
      background-color: #f44336;
    }

    /* Chat message row styling */
    .message-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    /* Avatar styling for LaQuisha's messages */
    .message-row .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .message-row p {
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="chat-container">
    <h1>Chat with LaQuisha</h1>
    <div class="settings-row">
      <div>
        <label for="user_name">Your Name:</label>
        <input type="text" id="user_name" placeholder="Enter your name" />
      </div>
      <div>
        <label for="temperature">Temperature:</label>
        <input type="range" id="temperature" min="0" max="2" step="0.1" value="1" />
        <span id="temp_value">1</span>
      </div>
      <div>
        <label for="tokens">Max Tokens:</label>
        <input type="number" id="tokens" value="150" min="1" />
      </div>
    </div>
    <div class="upload-row">
      <label for="model_file">Model file (.gguf):</label>
      <input type="file" id="model_file" />
      <button onclick="uploadModel()">Upload Model</button>
    </div>
    <div id="chat"></div>
    <div class="input-row">
      <input type="text" id="user_input" placeholder="Type a message..." />
      <button onclick="sendMessage()">Send</button>
      <button id="mic_button" onclick="toggleRecording()">🎤</button>
    </div>
  </div>
  <script>
    // Display the current temperature value
    const tempSlider = document.getElementById('temperature');
    const tempValueLabel = document.getElementById('temp_value');
    tempValueLabel.textContent = tempSlider.value;
    tempSlider.addEventListener('input', () => {
      tempValueLabel.textContent = tempSlider.value;
    });

    // Handle sending messages to the backend
    async function sendMessage() {
      const userInputElem = document.getElementById('user_input');
      const message = userInputElem.value.trim();
      if (!message) return;
      const userName = document.getElementById('user_name').value || 'User';
      const temperature = parseFloat(tempSlider.value);
      const maxTokens = parseInt(document.getElementById('tokens').value);

      // Display the user's message in the chat window
      appendMessage('You', message);
      userInputElem.value = '';

      try {
        const response = await fetch('/v1/chat/completions', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: [
              { role: 'system', content: `You are LaQuisha. Address the user as ${userName}.` },
              { role: 'user', content: message }
            ],
            temperature: temperature,
            max_tokens: maxTokens
          })
        });
        const data = await response.json();
        const reply = data.choices && data.choices[0]?.message?.content;
        appendMessage('LaQuisha', reply || 'Error: No response');
      } catch (err) {
        appendMessage('Error', 'Failed to fetch response: ' + err.message);
      }
    }

    // Append a chat message to the chat history
    function appendMessage(sender, content) {
      const chatDiv = document.getElementById('chat');
      // Create a container for the message row so we can attach an avatar
      const row = document.createElement('div');
      row.classList.add('message-row');
      // If the message is from LaQuisha, include the avatar image.  The avatar
      // should be placed in the static folder as ``avatar.png`` (or
      // customised as needed).  For other senders no avatar is shown.
      if (sender === 'LaQuisha') {
        const avatarImg = document.createElement('img');
        // Use the user's provided avatar file.  Place your image (e.g. ``laquisha_avatar.png``)
        // in the ``static`` folder.  Adjust the filename here to match your
        // actual file name.  The default below assumes a file named
        // laquisha_avatar.png exists in the static directory.
        avatarImg.src = '/static/laquisha_avatar.png';
        avatarImg.alt = 'LaQuisha Avatar';
        avatarImg.classList.add('avatar');
        row.appendChild(avatarImg);
      }
      // Create the paragraph containing the sender name and content
      const messageElem = document.createElement('p');
      messageElem.innerHTML = `<strong>${sender}:</strong> ${content}`;
      row.appendChild(messageElem);
      chatDiv.appendChild(row);
      chatDiv.scrollTop = chatDiv.scrollHeight;
    }

    // Speech recognition setup
    let recognition;
    let recording = false;
    // A running transcript of all speech captured during the current recording
    let finalTranscript = '';

    function toggleRecording() {
      // Check for browser support
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      if (!SpeechRecognition) {
        alert('Speech recognition is not supported in this browser.');
        return;
      }
      if (!recording) {
        recognition = new SpeechRecognition();
        recognition.lang = 'en-US';
        // Enable continuous listening so the microphone stays active until the user
        // clicks the mic button again.  Without this the recognition will stop
        // after a short pause.
        recognition.continuous = true;
        // Do not return interim results; set to true if you want live updates.
        recognition.interimResults = false;
        // Initialise finalTranscript with any existing text so speech can append
        // to previously typed or dictated input.  Without this, restarting the
        // microphone would overwrite the input field.
        finalTranscript = document.getElementById('user_input').value || '';
        recognition.onresult = (event) => {
          // Append all new results since the last onresult event.  Use
          // event.resultIndex so we only process new segments.  See the
          // Web Speech API example for details on this pattern【846104414636721†L165-L181】.
          for (let i = event.resultIndex; i < event.results.length; ++i) {
            finalTranscript += event.results[i][0].transcript;
          }
          document.getElementById('user_input').value = finalTranscript;
        };
        recognition.onend = () => {
          // If recording is still active, restart the recognizer.  This allows
          // continuous listening even if the browser stops the audio stream due
          // to a pause in speech.  Without restarting, the recogniser stops
          // listening after each pause.
          if (recording) {
            recognition.start();
          } else {
            document.getElementById('mic_button').textContent = '🎤';
          }
        };
        recognition.start();
        recording = true;
        document.getElementById('mic_button').textContent = '🔴';
      } else {
        // When the user clicks the mic button again, stop recording and reset
        // the button.  Do not clear the final transcript so the dictated text
        // remains in the input field.
        recognition.stop();
        recording = false;
        document.getElementById('mic_button').textContent = '🎤';
      }
    }

    // Upload a new GGUF model to the backend
    async function uploadModel() {
      const fileInput = document.getElementById('model_file');
      if (!fileInput.files.length) {
        alert('Please select a .gguf model file to upload');
        return;
      }
      const formData = new FormData();
      formData.append('file', fileInput.files[0]);
      try {
        const response = await fetch('/upload_model', {
          method: 'POST',
          body: formData
        });
        const data = await response.json();
        // Provide a more helpful notification including the model name.  Use
        // the uploaded file's name if the backend doesn't return one.  This
        // ensures users know when the model has been loaded successfully.
        const fileName = fileInput.files[0].name;
        const msg = data.message || `Model '${fileName}' uploaded.`;
        alert(msg);
      } catch (err) {
        alert('Upload failed: ' + err.message);
      }
    }
  </script>
</body>
</html>