Build Your Own ChatGPT

Alyssa Hwang

WPE-II Presentation | April 18, 2023

1
 ChatGPT became a public phenomenon…

chat.openai.com 2
 …in large part because of its interface.

chat.openai.com 3
So let’s make our own.

4
This tutorial has two main parts.

5
This tutorial has two main parts.

🤖Overview of GPT-3

6
This tutorial has two main parts.

🤖Overview of GPT-3
🔍
Design Critique

7
This tutorial has two main parts.

🤖Overview of GPT-3
🔍 Design Critique

👩💻 Code Examples
Codebase | Fine-Tuning Notebook

8
GPT-3 is the brain of our chatbot.

Hello, how are you?

🤖 👩💻
9 🤖🔍
 You can use GPT-3 by giving it a prompt.

prompt completion

OpenAI logo from openai.com 10 🤖🔍

 Zero-shot prompting provides just an instruction.

The following is a
conversation with an AI
persona. The AI is a dog.
I'm good, how are you?
👩💻: Hi, how are you?
🤖:

OpenAI logo from openai.com 11 🤖🔍

 In-context learning provides examples in the context.

The following is a
conversation with an AI
persona. The AI is a dog.

👩💻: Hi, how are you? I love to play fetch!

🤖: I'm excited!
👩💻: What do you like to do
for fun?
🤖:

OpenAI logo from openai.com 12 🤖🔍

 In-context learning provides examples in the context.

The following is a
conversation with an AI
persona. The AI is a dog.

👩💻: Hi, how are you? I love to play fetch!

🤖: I'm excited!
👩💻: What do you like to do
for fun?
🤖:
One-shot

OpenAI logo from openai.com 13 🤖🔍

 In-context learning provides examples in the context.
The following is a conversation with an AI
persona. The AI is a dog.

👩💻: Hi, how are you?

🤖: I'm excited!
👩💻: What do you like to do for fun?
🤖: I love to play fetch! What about you?
👩💻: I like watching funny movies. I'm going for a walk!
🤖: My favorite food is chicken! What
about you? What about you?
👩💻: Spaghetti. Do you like going on
walks?
🤖: Yes, I love going on walks! What
about you?
👩💻: I like walking. What are you doing
today?
🤖:

OpenAI logo from openai.com 14 🤖🔍

 In-context learning provides examples in the context.
The following is a conversation with an AI
persona. The AI is a dog.

👩💻: Hi, how are you?

🤖: I'm excited!
👩💻: What do you like to do for fun?
🤖: I love to play fetch! What about you?
👩💻: I like watching funny movies. I'm going for a walk!
🤖: My favorite food is chicken! What
about you? What about you?
👩💻: Spaghetti. Do you like going on
walks?
🤖: Yes, I love going on walks! What
about you?
👩💻: I like walking. What are you doing
today?
🤖:
Few-shot

OpenAI logo from openai.com 15 🤖🔍

 Fine-tuning can help if prompting isn’t enough.

prompt
✨
completion

OpenAI logo from openai.com 16 🤖🔍

 Fine-tuning can help if prompting isn’t enough.

The following is a conversation between 🐭 and ⚔.

🐭: Can you spare some cheese?

⚔: I would love to give you some cheese
✨
because it would give me great honor.
🐭: You are so kind. Most people scream
when they see me.
...
###
Learning in Interactive Games with
Humans and Text (LIGHT) dataset

🤖🔍
Learning to Speak and Act in a Fantasy Text Adventure Game (Urbanek et al., EMNLP-IJCNLP 2019)
OpenAI logo from openai.com 17
 Fine-tuning can help if prompting isn’t enough.

The following is a conversation between 🐭 and ⚔.

🐭: Can you spare some cheese?\n

⚔: I would love to give you some cheese
✨
because it would give me great honor.\n
🐭: You are so kind. Most people scream
when they see me.\n
...
###

🧙: ... \n

🤖🔍
Learning to Speak and Act in a Fantasy Text Adventure Game (Urbanek et al., EMNLP-IJCNLP 2019)
OpenAI logo from openai.com 18
 Fine-tuning can help if prompting isn’t enough.

The following is a conversation between 🐭 and ⚔.

🐭: Can you spare some cheese?

⚔: I would love to give you some cheese
✨ Fine-tuning
curie on 9.8K
because it would give me great honor. examples cost
🐭: You are so kind. Most people scream about $40 in
when they see me.
... July 2022.
###

🤖🔍
Learning to Speak and Act in a Fantasy Text Adventure Game (Urbanek et al., EMNLP-IJCNLP 2019)
OpenAI logo from openai.com 19
See the results for yourself!
Wizard Persona without Fine-Tuning Wizard Persona with Fine-Tuning

👩💻: Hi, what are you doing? 👩💻: Hi, what are you doing?
🤖: I am casting a spell. 🤖: Just practicing my spells.
👩💻: What kind of spell? 👩💻: What kind of spells?
🍰? 🤖: I am casting a spell to make a cake. 🤖: Mostly what I learned from my master.
👩💻: Why? 👩💻: What is your favorite spell?
🤖: I want to make a cake because I am hungry. 🤖: I really like the one that turns everything into gold. 👑!
👩💻: What kind of job do you have? 👩💻: Why?
🤖: I am a wizard. 🤖: It's just my favorite.
👩💻: Tell me how to cast a spell. 👩💻: What job do you have?
🥣? 🤖: First, you have to gather some ingredients. You need 🤖: I am a wizard, I make gold and cast spells.
sugar, our, eggs, and butter. Then, you have to mix 👩💻: Tell me how to cast a spell.
the ingredients together. After that, you have to cook 🤖: First you must have a wand, and then you must 🪄!
the cake in a pan. After that, you have to frost it with remember your name.
frosting. 👩💻: Then what?
👩💻: Then what?
🤖: Then you must say the spell.
🤖: You have to eat the cake.

20 🤖🔍
fl
 Fine-tuning is straightforward with the API.

https://openai.com/blog/openai-api 21 🤖🔍
 Fine-tuning is straightforward with the API.
1 Create a JSON lines le with your ne-tuning data.

{
prompt: "The following is a conversation between mice and knight.",
completion: “mice: Can you spare some cheese?\nknight:I would love to give you some cheese ... ###”
}
...

https://openai.com/blog/openai-api 22 🤖🔍
fi
fi
 Fine-tuning is straightforward with the API.
1 Create a JSON lines le with your ne-tuning data.

2 Run the ne-tuning command on your command line.

openai api fine_tunes.create -t light_dialogue_finetuning.jsonl -m curie

ne-tuning data le model name

https://openai.com/blog/openai-api 23 🤖🔍
fi
fi
fi
fi
fi
Fine-tuning is straightforward with the API.
1 Create a JSON lines le with your ne-tuning data.

2 Run the ne-tuning command on your command line.

﹡ Check out my notebook for more details.

24 🤖🔍
fi
fi
fi
Now, how do we interact with GPT-3?

Hello, how are you?

🤖 👩💻
hi!

25 🤖🔍
 Human-centered design focuses on…
How do I gure out

👩💼
what I can do with
this interface?
discoverability
+
understanding
🔎

The Design of Everyday Things. Donald A. Norman, 1988. 26 🤖🔍

fi
 Human-centered design focuses on…
What does it all

👩💼
discoverability
mean?

+
understanding
🔎

The Design of Everyday Things. Donald A. Norman, 1988. 27 🤖🔍

 We can make interfaces easier to understand by…

👩💼
making their a ordances
discoverable through
signi ers and feedback.
🔎

The Design of Everyday Things. Donald A. Norman, 1988. 28 🤖🔍

fi
ff
 An affordance is a relationship.

👩💼 🔎 what a user can do with

an interface

a ordance
📷
The Design of Everyday Things. Donald A. Norman, 1988. 29 🤖🔍
ff
 A signifier tells the user about an affordance.

👩💼 📷 🔎

The Design of Everyday Things. Donald A. Norman, 1988. 30 🤖🔍

 Feedback communicates the result of an action.

👩💼 📸
🔎

The Design of Everyday Things. Donald A. Norman, 1988. 31 🤖🔍

 These signifiers may feel familiar. (Why?)

The Design of Everyday Things. Donald A. Norman, 1988. 32 🤖🔍

 You might not even be surprised when the cursor changes.

The Design of Everyday Things. Donald A. Norman, 1988. 33 🤖🔍

 You might not even be surprised when the cursor changes.

Conventions are important for usable interfaces!

The Design of Everyday Things. Donald A. Norman, 1988. 34 🤖🔍

 Affordances depend on a user’s ability.

Ability-based design
de nes ability as “the
possession of the
means or skill to do
something.”

🤖🔍
“Pointing, hand, cursor Icon” by Luc Chaissac from https://icon-icons.com/icon/pointing-hand-cursor/100160
Ability-Based Design (Wobbrock et al., Communications of the ACM 2018) 35
fi
 Ability has a source…

internal external
ephemeral long-lasting

🤖🔍
“Pointing, hand, cursor Icon” by Luc Chaissac from https://icon-icons.com/icon/pointing-hand-cursor/100160
Ability-Based Design (Wobbrock et al., Communications of the ACM 2018) 36
↔︎
↔︎
 …and a duration.

internal external
ephemeral long-lasting

🤖🔍
“Pointing, hand, cursor Icon” by Luc Chaissac from https://icon-icons.com/icon/pointing-hand-cursor/100160
Ability-Based Design (Wobbrock et al., Communications of the ACM 2018) 37
↔︎
↔︎
 Designing for a wider range of
abilities, regardless of context,
leads to more usable systems for
everyone.
💪🦾

38 🤖🔍
 Let’s evaluate our chatbot.

Heuristics for Conversational Agents

• Visibility of system status • Flexibility and ef ciency of use

• Match between system and • Aesthetic, minimalist and
the real world engaging design
• User control and freedom • Help users recognize,
• Consistency and standards diagnose and recover from
• Error prevention errors
• Help and guidance • Context preservation

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 39 🤖🔍

fi
 Let’s evaluate our chatbot.

Heuristics for Conversational Agents

• Visibility of system status • Flexibility and ef ciency of use

• Match between system and • Aesthetic, minimalist and
the real world engaging design
• User control and freedom 🆘 • Help users recognize,
✅• Consistency and standards diagnose and recover from
• Error prevention errors
• Help and guidance 🆗 • Context preservation

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 40 🤖🔍

fi
 ✅ Consistency and Standards

Users should not have to wonder whether different words,

options, or actions mean the same thing. Follow platform
conventions for the design of visual and interaction elements.
Users should also be able to receive consistent responses
even if they communicate the same function in multiple ways
(and modalities). Within the interaction, the system should
have a consistent voice, style of language, and personality.

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 41 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

✅ Use consistent terminology, like “persona” and “chatbot”

✅ Show chatbot messages in one consistent style
✅ Show human messages in a different consistent style

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 42 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

✅ Use consistent terminology, like “persona” and “chatbot”

✅ Show chatbot messages in one consistent style
✅ Show human messages in a different consistent style

.bot, .human { .bot {

border: 1px #ccc solid; float: left;
padding-left: 5px; background-color: #e1e1e1;
padding-right: 5px; }
height: auto;
position: relative; .human {
clear: both; left: 0;
overflow-wrap: break-word; right: 100;
min-width: 2.5%; float: right;
max-width: 40%; text-align: right;
border-radius: 3%; background-color: #d3b2ff;
} }

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 43 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

✅ User messages in colored boxes on the right

✅ Chatbot responses in gray boxes on the left
✅ Click “Send” or hit enter on the keyboard

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 44 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

✅ User messages in colored boxes on the right

✅ Chatbot responses in gray boxes on the left
✅ Click “Send” or hit enter on the keyboard

$("#textInput").keypress(function (e) {
if (e.which == 13 && $("#textInput").val().length > 0) {
getResponse();
}
});

$("#send").click(function () {
if ($("#textInput").val().length > 0) {
getResponse();
}
});

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 45 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

✅ User messages in colored boxes on the right

✅ Chatbot responses in gray boxes on the left
✅ Click “Send” or hit enter on the keyboard

$("#textInput").keypress(function (e) {
if (e.which == 13 && $("#textInput").val().length > 0) {
getResponse();
}
});

$("#send").click(function () {
if ($("#textInput").val().length > 0) {
getResponse();
}
});

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 46 🤖🔍

 ✅ Consistency and Standards
Users should not have to wonder whether different words, options, or actions mean the same thing. Follow
platform conventions for the design of visual and interaction elements. Users should also be able to receive
consistent responses even if they communicate the same function in multiple ways (and modalities). Within the
interaction, the system should have a consistent voice, style of language, and personality.

💭 💬
👩🔧 🤖
Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 47 🤖🔍
 🆗 Context Preservation

Maintain context preservation regarding the conversation

topic intra-session, and if possible inter-session. Allow the
user to reference past messages for further interactions to
support implicit user expectations of conversations.

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 48 🤖🔍

 🆗 Context Preservation
Maintain context preservation regarding the conversation topic intra-session, and if possible inter-session. Allow
the user to reference past messages for further interactions to support implicit user expectations of conversations.

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 49 🤖🔍

 🆗 Context Preservation
Maintain context preservation regarding the conversation topic intra-session, and if possible inter-session. Allow
the user to reference past messages for further interactions to support implicit user expectations of conversations.

def generate_prompt(human_input): import openai

global persona
global prev_human human_input = request.args.get("human_input")
global prev_bot

prompt = """This is a conversation between prompt = generate_prompt(human_input)

{persona} and human.

Human: {prev_human} response = openai.Completion.create(

{persona}: {prev_bot} model=model,
Human: {human_input} prompt=prompt,
{persona}:""".format(persona=persona, temperature=temperature,
prev_human=prev_human, max_tokens=150,
prev_bot=prev_bot, stop=[f"{persona}:","Human:", "\n"],
human_input=human_input) ).choices[0].text

return prompt return response

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 50 🤖🔍

 🆗 Context Preservation
Maintain context preservation regarding the conversation topic intra-session, and if possible inter-session. Allow
the user to reference past messages for further interactions to support implicit user expectations of conversations.

def generate_prompt(human_input): import openai

global persona
global prev_human human_input = request.args.get("human_input")
global prev_bot

prompt = """This is a conversation between prompt = generate_prompt(human_input)

{persona} and human.

Human: {prev_human} response = openai.Completion.create(

{persona}: {prev_bot} model=model,
Human: {human_input} prompt=prompt,
{persona}:""".format(persona=persona, temperature=temperature,
prev_human=prev_human, max_tokens=150,
prev_bot=prev_bot, stop=[f"{persona}:","Human:", "\n"],
human_input=human_input) ).choices[0].text

return prompt return response

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 51 🤖🔍

 🆘 Help Users Recognize, Diagnose and Recover from Errors

Error messages should be expressed in plain language (no

codes), precisely indicate the problem, and constructively
suggest a solution.

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 52 🤖🔍

 🆘 Help Users Recognize, Diagnose and Recover from Errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 53 🤖🔍

 🆘 Help Users Recognize, Diagnose and Recover from Errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.

function getResponse() {
...
var output = JSON.parse(botReplyJSON);
var botReply = output.response;

var botHTML = document.createElement("div");

botHTML.className = "bot";
var p = document.createElement("p");
p.innerHTML = botReply;
botHTML.append(p);

if (!output.success) {
botHTML.style.backgroundColor = "yellow";
}

$("#chatbox").append(botHTML);
var chatbox = document.getElementById('chatbox');
chatbox.scrollTop = chatbox.scrollHeight;
…
}

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 54 🤖🔍

 🆘 Help Users Recognize, Diagnose and Recover from Errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.

function getResponse() {
...
var output = JSON.parse(botReplyJSON);
var botReply = output.response;

var botHTML = document.createElement("div");

botHTML.className = "bot";
var p = document.createElement("p");
p.innerHTML = botReply;
botHTML.append(p);

if (!output.success) {
botHTML.style.backgroundColor = "yellow";
}

$("#chatbox").append(botHTML);
var chatbox = document.getElementById('chatbox');
chatbox.scrollTop = chatbox.scrollHeight;
…
}

Heuristic Evaluation of Conversational Agents (Langevin et al., CHI 2021) 55 🤖🔍

 Every new AI interface shares similar foundations.

💬
🤖
Amazon Echo Dot image courtesy of Home Depot 56
Thank you for listening!
Questions + Discussion

🙋
Ask me about
GPT-3, design,
or my chatbot!

57