|
|
| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Multilingual LM Demo</title>
|
| <style>
|
| body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
|
| .container { display: flex; flex-direction: column; gap: 20px; }
|
| textarea { width: 100%; height: 100px; padding: 10px; font-size: 16px; }
|
| button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; }
|
| button:hover { background: #45a049; }
|
| .output { border: 1px solid #ccc; padding: 15px; min-height: 100px; background: #f9f9f9; }
|
| .language-tag { display: inline-block; margin: 5px; padding: 5px 10px; background: #e0e0e0; cursor: pointer; }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>Multilingual Language Model Demo</h1>
|
|
|
| <div>
|
| <strong>Language:</strong>
|
| <span class="language-tag" onclick="setLanguage('[EN] ')">English</span>
|
| <span class="language-tag" onclick="setLanguage('[HI] ')">Hindi</span>
|
| <span class="language-tag" onclick="setLanguage('[PA] ')">Punjabi</span>
|
| </div>
|
|
|
| <textarea id="prompt" placeholder="Enter your prompt here..."></textarea>
|
|
|
| <div>
|
| <label>Temperature: <input type="range" id="temp" min="0.1" max="2.0" step="0.1" value="0.7"></label>
|
| <label>Max Length: <input type="number" id="maxlen" min="20" max="500" value="100"></label>
|
| </div>
|
|
|
| <button onclick="generate()">Generate</button>
|
|
|
| <div class="output" id="output">Response will appear here...</div>
|
| </div>
|
|
|
| <script>
|
| function setLanguage(tag) {
|
| document.getElementById('prompt').value = tag;
|
| }
|
|
|
| async function generate() {
|
| const prompt = document.getElementById('prompt').value;
|
| const temp = document.getElementById('temp').value;
|
| const maxlen = document.getElementById('maxlen').value;
|
|
|
| document.getElementById('output').innerHTML = 'Generating...';
|
|
|
| try {
|
| const response = await fetch('/generate', {
|
| method: 'POST',
|
| headers: {'Content-Type': 'application/json'},
|
| body: JSON.stringify({prompt, temp, maxlen})
|
| });
|
|
|
| const data = await response.json();
|
| document.getElementById('output').innerHTML = data.response;
|
| } catch (error) {
|
| document.getElementById('output').innerHTML = 'Error: ' + error;
|
| }
|
| }
|
| </script>
|
| </body>
|
| </html>
|
| |
