name-generator/index.html at main · utkuerol/name-generator · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </script>
    <script>
        function showNames(text) {
            var toShow = document.getElementById("names")
            toShow.innerText = ""
            lines = text.split("\n")
            for (let i = 0; i < 10; i++) {
                random = lines[Math.floor((Math.random() * lines.length))]
                toShow.innerText += random
                toShow.innerText += "\n"
            }
        }

        function readFile() {
            lang = $("#lang option:selected").val();
            gender = $("#gender option:selected").val();
            filepath = "generated/new/" + lang + "-" + gender + ".txt"
            console.log(filepath)
            fetch(filepath)
                .then(response => response.text())
                .then(text => showNames(text))
        }

    </script>
</head>

<body>
    <div class="jumbotron jumbotron-fluid mb-0">
        <div class="container">
            <h1 class="display-4">Name Generator</h1>
            <p class="lead">Built with Long Short-Term Memory (LSTM) Networks</p>
            <hr class="my-4">
            <p>Select a language and gender from the dropdown menu and press <b>Get Names</b> to generate 10
                machine-generated names similar to the chosen language.</p>
            <form id="langselect">
                <label for="lang">Language: </label>
                <select name="languages" id="lang">
                    <option value="English">English</option>
                    <option value="Greek">Greek</option>
                    <option value="French">French</option>
                    <option value="Italian">Italian</option>
                    <option value="Japanese">Japanese</option>
                    <option value="German">German</option>
                    <option value="Arabic">Arabic</option>
                    <option value="Hebrew">Hebrew</option>
                    <option value="Germanic">Germanic</option>
                    <option value="East-Asian">East-Asian</option>
                    <option value="Turkic">Anatolian (Unreliable)</option>
                    <option value="Hispanic">Hispanic</option>
                    <option value="Slavic">Slavic</option>
                    <option value="Scandinavian">Scandinavian</option>
                </select>
                <label for="gender">Gender: </label>
                <select name="genders" id="gender">
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </form>
            <button type="button" id="btnGetTxt" onclick="readFile()" class="btn btn-dark">Get Names</button>
        </div>
    </div>

    <div class="container" style="margin-top: 10px;">
        <div class="card-header" style="width: 25rem;">
            <div class="card-body" id="names">
            </div>
        </div>
    </div>
</body>

</html>