SLM

ui/script.js

@@ -0,0 +1,118 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const editor = document.getElementById('editor');
+    const suggestionOverlay = document.getElementById('suggestion-overlay');
+    const status = document.getElementById('status');
+    
+    // Controls
+    const nGramSelect = document.getElementById('n-gram');
+    const tempInput = document.getElementById('temperature');
+    const tempValDisplay = document.getElementById('temp-val');
+    const lengthInput = document.getElementById('length');
+    const lengthValDisplay = document.getElementById('length-val');
+    const generateBtn = document.getElementById('generate-more-btn');
+
+    let currentSuggestion = '';
+    let isFetching = false;
+    let debounceTimer;
+
+    const autoResize = () => {
+        editor.style.height = 'auto';
+        suggestionOverlay.style.height = 'auto';
+        const newHeight = Math.max(360, editor.scrollHeight);
+        editor.style.height = newHeight + 'px';
+        suggestionOverlay.style.height = newHeight + 'px';
+    };
+
+    tempInput.addEventListener('input', () => { tempValDisplay.textContent = tempInput.value; });
+    lengthInput.addEventListener('input', () => { lengthValDisplay.textContent = lengthInput.value; });
+    
+    const triggerUpdate = () => {
+        currentSuggestion = '';
+        updateSuggestion();
+        const prompt = editor.value;
+        if (prompt.trim().length > 0) fetchPrediction(prompt);
+    };
+
+    nGramSelect.addEventListener('change', triggerUpdate);
+    tempInput.addEventListener('change', triggerUpdate);
+    lengthInput.addEventListener('change', triggerUpdate);
+
+    const fetchPrediction = async (prompt, customLength = null) => {
+        if (isFetching) return;
+
+        isFetching = true;
+        status.textContent = 'Thinking...';
+        status.classList.add('fetching');
+        
+        const n = parseInt(nGramSelect.value);
+        const temperature = parseFloat(tempInput.value);
+        const length = customLength || parseInt(lengthInput.value);
+
+        try {
+            const response = await fetch('/api/predict', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt, n, temperature, length }),
+            });
+
+            if (!response.ok) throw new Error('Network response failed');
+
+            const data = await response.json();
+            
+            if (customLength) {
+                insertText(data.prediction || '');
+            } else {
+                currentSuggestion = data.prediction || '';
+                updateSuggestion();
+            }
+
+        } catch (error) {
+            console.error('Prediction failed:', error);
+            status.textContent = 'Error';
+        } finally {
+            isFetching = false;
+            status.textContent = 'Idle';
+            status.classList.remove('fetching');
+        }
+    };
+
+    const updateSuggestion = () => {
+        const editorText = editor.value;
+        const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
+        suggestionOverlay.textContent = editorText + space + currentSuggestion;
+    };
+    
+    const insertText = (text) => {
+        if (!text) return;
+        const space = (editor.value.length > 0 && !/\s$/.test(editor.value)) ? ' ' : '';
+        editor.value += space + text;
+        currentSuggestion = '';
+        updateSuggestion();
+        autoResize();
+        window.scrollTo(0, document.body.scrollHeight);
+    };
+
+    editor.addEventListener('input', () => {
+        autoResize();
+        clearTimeout(debounceTimer);
+        currentSuggestion = '';
+        updateSuggestion();
+        const prompt = editor.value;
+        if (prompt.trim().length === 0) return;
+        debounceTimer = setTimeout(() => fetchPrediction(prompt), 300);
+    });
+
+    editor.addEventListener('keydown', (e) => {
+        if (e.key === 'Tab' && currentSuggestion) {
+            e.preventDefault();
+            insertText(currentSuggestion);
+            fetchPrediction(editor.value);
+        }
+    });
+    
+    generateBtn.addEventListener('click', () => {
+        fetchPrediction(editor.value, 50);
+    });
+
+    autoResize();
+});