remove keys file

busino · Apr 1, 2023 · 01b0227 · 01b0227
1 parent 819ca86
commit 01b0227
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 78 deletions.
diff --git a/ChatUriBrowser/index.html b/ChatUriBrowser/index.html
@@ -7,20 +7,29 @@
   <body>
     <h1>SwissGPT</h1>
 
+    Nimm eine Frage auf und hör dir die Antwort an.
+
     <div id='btns'>
-        <button id='start'>Start</button>
-        <button id='stop'>Stop</button>
+        <button id='start'>Start Recording</button>
     </div>
 
-    Question:
-    <textarea id="question">
+    <p>
+    Question:<br>
+    <textarea id="question" rows="6" cols="80">
     </textarea>
-    Answer:
-    <textarea id="answer">
+    <button id="ask" title="Diese Frage beantworten.">Ask</button>
+    </p>
+    <p>
+    Answer:<br>
+    <textarea id="answer" rows="6" cols="80">
     </textarea>
+    <button id="tell" title="Diesen Text vorlesen.">Tell</button>
+    </p>
 
+    <p>
     <audio id="audio" controls src="">
     </audio>
+    </p>
 
     <script src="keys.js"></script>
     <script src="main.js"></script>

diff --git a/ChatUriBrowser/keys.js b/ChatUriBrowser/keys.js
diff --git a/ChatUriBrowser/main.js b/ChatUriBrowser/main.js
@@ -1,6 +1,7 @@
 /** HTML Elements */
 const start = document.getElementById('start');
-const stop = document.getElementById('stop');
+const ask = document.getElementById('ask');
+const tell = document.getElementById('tell');
 const question = document.getElementById('question');
 const answer = document.getElementById('answer');
 const audio = document.getElementById('audio');
@@ -9,40 +10,59 @@ const audio = document.getElementById('audio');
 let stream;
 let recorder;
 let chunks;
+let recording = false;
 
+initMicro();
 
 /** Microphone recording */
-navigator.mediaDevices.getUserMedia({audio: true})
-    .then(_stream => {
-        stream = _stream;
-        recorder = new MediaRecorder(stream);
-        recorder.ondataavailable = e => {
-        chunks.push(e.data);
-        if(recorder.state == 'inactive') {
-            question.value = '';
-            answer.value = '';
-            sendToSpeech();
-        }
-    };
-    console.log('got media successfully');
-});
+function initMicro() {
 
+    navigator.mediaDevices.getUserMedia({audio: true})
+        .then(_stream => {
+            stream = _stream;
+            recorder = new MediaRecorder(stream);
+            recorder.ondataavailable = e => {
+                chunks.push(e.data);
+                if(recorder.state == 'inactive') {
+                    question.value = '';
+                    answer.value = '';
+                    sendToSpeech();
+                }
+            };
+        console.log('got media successfully');
+    });
+}
 
-/** Button Actions */
-start.onclick = event => {
-    console.log('start');
+
+function reset() {
     chunks=[];
     question.value = '';
     answer.value = '';
-    recorder.start();
-};
+}
 
-stop.onclick = event => {
-    console.log('stop');
-    recorder.stop();
+/** Button Actions */
+start.onclick = event => {
+    console.log('start');
+    if (recording) {
+        recorder.stop();
+        recording = false;
+        start.textContent = 'Start Recording';
+    } else {
+        reset();
+        recorder.start();
+        recording = true;
+        start.textContent = 'Stop';
+    }
 };
 
+ask.onclick = event => {
+    answer.value = '';
+    fetchChatGPT(question.value);
+}
 
+tell.onclick = event => {
+    text2Speech(answer.value);
+}
 
 function sendToSpeech() {
     console.log('Send to speech.');
@@ -70,66 +90,79 @@ function sendToSpeech() {
 
 
 function fetchChatGPT(text) {
-    console.log('fetchChatGPT');
-  console.log('Ask for text', text);
-  const url = 'https://api.openai.com/v1/chat/completions';
-  const req = 
-  {
-    "model": "gpt-3.5-turbo",
-    "messages": [{"role": "user", "content": text}]
-  }
-  const headers = {
-    'Content-Type': "application/json",
-    'Authorization': `Bearer ${CKEY}`
-  };
+    console.log('fetchChatGPT', text);
+    if (!text) {
+        text='Erzähl mir die Geschichte vom bösen Wolf in 2 Sätzen.';
+    }
+    console.log('Ask for text', text);
+    const url = 'https://api.openai.com/v1/chat/completions';
+    // Request Parameters
+    const req = 
+    {
+        "model": "gpt-3.5-turbo",
+        "messages": [{"role": "user", "content": text}]
+    }
+    // Headers
+    const headers = {
+        'Content-Type': "application/json",
+        'Authorization': `Bearer ${CKEY}`
+    };
 
-  fetch(
-    url, 
-    { method: 'POST', 
-      headers: headers,
-      body: JSON.stringify(req)}
-  ).then(
-    res => res.json()
-  )
-  .then(data => {
-    console.log(data)
-    console.log(data.choices[0])
-    console.log(data.choices[0].message.content);
-    const content = data.choices[0].message.content;
-    answer.value = content;
-    text2Speech(content);
-  });
+    fetch(
+        url,
+        { 
+            method: 'POST', 
+            headers: headers,
+            body: JSON.stringify(req)
+        }
+    )
+    .then(
+        res => res.json()
+    )
+    .then(data => {
+        console.log(data)
+        console.log(data.choices[0])
+        console.log(data.choices[0].message.content);
+        const content = data.choices[0].message.content;
+        answer.value = content;
+        text2Speech(content);
+    });
 }
 
 function text2Speech(text) {
     console.log('text2Speech');
     console.log('Ask for text', text);
+    if (!text) {
+        text = 'Kein Text vorhanden.';
+    }
     var url = 'https://switzerlandnorth.tts.speech.microsoft.com/cognitiveservices/v1';
-    const xml = `<speak version='1.0' xml:lang='en-US'><voice xml:lang='de-CH' xml:gender='Male'
-    name='de-CH-LeniNeural'>
-        ${text}
-  </voice></speak>`;
-
+    // query
+    const xml = `<speak version='1.0' xml:lang='en-US'>
+<voice xml:lang='de-CH' xml:gender='Male' name='de-CH-LeniNeural'>
+${text}
+</voice>
+</speak>`;
+    // headers
     const headers = {
       'Ocp-Apim-Subscription-Key': SKEY,
       'Content-Type': 'application/ssml+xml',
       'X-Microsoft-OutputFormat': 'riff-8khz-16bit-mono-pcm'
     };
-
+    // fetch the voices
     fetch(
-      url, 
-      { method: 'POST', 
-        headers: headers,
-        body: xml}
+        url,
+        {
+            method: 'POST', 
+            headers: headers,
+            body: xml
+        }
     )
-    .then(response => 
-      response.arrayBuffer()
+    .then(response => response.arrayBuffer()
     )
     .then(buffer => {
-         console.log(buffer);
-         const blob = new Blob([buffer], { type: "audio/wav" });
-         audio.src = window.URL.createObjectURL(blob);
-         audio.play();
+        //console.log(buffer);
+        const blob = new Blob([buffer], { type: "audio/wav" });
+        audio.src = window.URL.createObjectURL(blob);
+        audio.play();
     });
-
 }