scrimba
AI Apps
Build a chatbot with a fine-tuned model
Intro to fine-tuning
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

AboutCommentsNotes
Intro to fine-tuning
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')

const conversationArr = [
{
role: 'system',
content: 'You are a highly knowledgeable assistant that keeps its answers short.'
}
]

document.addEventListener('submit', (e) => {
e.preventDefault()
const userInput = document.getElementById('user-input')
conversationArr.push({
role: 'user',
content: userInput.value
})
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
})

async function fetchReply(){
const response = await openai.createChatCompletion({
model: 'gpt-4',
messages: conversationArr,
presence_penalty: 0,
frequency_penalty: 0.3
})
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:34