Chromium-Voice-Example/index.html at main · danomation/Chromium-Voice-Example · 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
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function () {
 var stopped = "false";
    try {
        var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
        var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
        var recognition = new webkitSpeechRecognition() || SpeechRecognition();
    } catch (e) {
        var recognition = Object;
    }

    recognition.continuous = true;
    recognition.interimResults = false;
    recognition.onresult = function (event) {
        var recording = '';
        for (var i = event.resultIndex; i < event.results.length; ++i) {
                recording += event.results[i][0].transcript;
        }
        if ($('#text').val != recording) {
            $('#text').val(recording);
            $('#textResponse').val("loading...");
            sendToGPT(recording);
        }
    }

  $('#startRecognition').click(function () {
    $('#text').focus();
    console.log("started");
    recognition.start();
    console.log("started - nextline");
  });
  $('#stopRecognition').click(function () {
    recognition.stop();
  });

});
function sendToGPT(transcript) {
var data = {
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "system",
        "content": "You are a helpful assistant."
      },
      {
        "role": "user",
        "content": transcript
      }
    ]
  };
console.log(data);
$.ajax({
        url: 'https://api.openai.com/v1/chat/completions',
        beforeSend: function(xhr) {
             xhr.setRequestHeader("Authorization", "Bearer " + $('#openaitoken').val() + "");
        },
        type: "POST",
        cache: false,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({"model": "gpt-3.5-turbo","messages": [{"role": "system", "content": "You are a bot named wintermute. You don't use any punctuation aside from period."},{"role": "user","content": transcript}]}),
        success: function(data){
            console.log(JSON.stringify(data["choices"][0]["message"]["content"]));
            JSON.stringify(data["choices"][0]["message"]["content"]);
            var response = JSON.stringify(data["choices"][0]["message"]["content"]);
            $("#textResponse").val(response);
            let testing = new SpeechSynthesisUtterance(response);
            testing.default=false;
            testing.localservice=true;
            testing.lang = "en-GB";
            //testing.pitch = 0.5;
            testing.voice = speechSynthesis.getVoices().filter(function(voice) {
                return voice.name == "Google UK English";
            })[0];
            speechSynthesis.speak(testing);

        },
            error: function(){
            alert("Cannot get data");
        }
});
}
</script>
</head>
<body>
<h1>Desktop Chrome Only</h1>
Requirements: Recent enough chrome for webspeechapi implementation<br>
Known issues: Don't navigate away from page. To refresh close tab and reopen<br><br>
openai token (not stored)<br>
<input id="openaitoken"><button onclick="">submit</button><br>
elevenlabs token (not stored) - not implemented yet<br>
<input id="elevenlabstoken"><button onclick="">submit</button><br>
<button id="startRecognition">Start Listening</button>
<button id="stopRecognition">Stop Listening</button><br>
<textarea id="text" style="left: 0; width: 50vw; height: 25vh;"></textarea>
<textarea id="textResponse" style="left: 0; width: 50vw; height: 25vh;"></textarea>
</body>
</html>