scrimba
Updating the JS 3
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Updating the JS 3
AboutCommentsNotes
Updating the JS 3
Expand for more info
index.js
run
preview
console
import { Configuration, OpenAIApi } from 'openai'
import { process } from './env'

const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
})

const openai = new OpenAIApi(configuration)

const chatbotConversation = document.getElementById('chatbot-conversation')

let conversationStr = ''

document.addEventListener('submit', (e) => {
e.preventDefault()
const userInput = document.getElementById('user-input')
conversationStr += userInput.value
console.log(conversationStr)
fetchReply()
const newSpeechBubble = document.createElement('div')
newSpeechBubble.classList.add('speech', 'speech-human')
chatbotConversation.appendChild(newSpeechBubble)
newSpeechBubble.textContent = userInput.value
userInput.value = ''
chatbotConversation.scrollTop = chatbotConversation.scrollHeight
})

//{data: {id: "cmpl-76POjkpjAZBS0SNWLTMiG7h2lWJtl", object: "text_completion", created: 1681761953, model: "davinci:ft-scrimba-2023-03-29-13-42-07", choices: [{text: " How have you been?! And guess what! I came back and I thought we", index: 0, logprobs: null, finish_reason: "length"}], usage: {prompt_tokens: 2, completion_tokens: 16, total_tokens: 18}}, status: 200, statusText: "", headers: {cache-control: "no-cache, must-revalidate", content-type: "application/json"}, config: {transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}, adapter: xhrAdapter(e), transformRequest: [transformRequest(e,t)], transformResponse: [transformResponse(e)], timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", maxContentLength: -1, maxBodyLength: -1, validateStatus: validateStatus(e), headers: {Accept: "application/json, text/plain, */*", Content-Type: "application/json", User-Agent: "OpenAI/NodeJS/3.2.1", Authorization: "Bearer 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"}, method: "post", data: "{"model":"davinci:ft-scrimba-2023-03-29-13-42-07","prompt":"Hey!","presence_penalty":0,"frequency_penalty":0.3}", url: "https://api.openai.com/v1/completions"}, request: XMLHttpRequest {}}

async function fetchReply(){
const response = await openai.createCompletion({
model: 'davinci:ft-scrimba-2023-03-29-13-42-07',
prompt: conversationStr,
presence_penalty: 0,
frequency_penalty: 0.3
})
console.log(response)
// conversationArr.push(response.data.choices[0].message)
// renderTypewriterText(response.data.choices[0].message.content)
}

function renderTypewriterText(text) {
const newSpeechBubble = document.createElement('div')
newSpeechBubble.classList.add('speech', 'speech-ai', 'blinking-cursor')
chatbotConversation.appendChild(newSpeechBubble)
let i = 0
const interval = setInterval(() => {
newSpeechBubble.textContent += text.slice(i-1, i)
if (text.length === i) {
clearInterval(interval)
newSpeechBubble.classList.remove('blinking-cursor')
}
i++
chatbotConversation.scrollTop = chatbotConversation.scrollHeight
}, 50)
}
Console
/index.html
-2:44