File size: 2,762 Bytes
45bcb9b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

<!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>