Skip to content

06 - AI #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vherus wants to merge 1 commit into
base: 05-modal-interactions
Choose a base branch
from
Open

06 - AI #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ <h2>Ash Ketchum</h2>
</div>
</div>

<script src="config.js"></script>
<script src="main.js"></script>
</body>
</html>
53 changes: 44 additions & 9 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,61 @@ modalClose.addEventListener('click', function() {
modal.classList.add('hidden');
});

// Create a function that generates an AI prompt
function getRandomAction() {
// Define a list of AI actions that we want the character to perform
const actions = [
'say hello in your most iconic way',
'give fashion advice based on your tastes',
'share a summary of your last epic adventure',
'reveal your hopes and dreams to me',
'tell me who is your best friend',
'write your linkedin bio'
];

// Generate a random number between 0 and the length of the actions list so we can choose one at random
const randIdx = Math.floor(Math.random() * actions.length);
return actions[randIdx];
}

// Create a function that will run when we click on a character
async function playCharacter(character) {
// Remove the hidden class from the loading image so it shows on screen
loading.classList.remove('hidden');

// Define some content to display in the modal. We'll switch this out with AI dialog later!
const content = 'You clicked a character!'
// Get a random action by running the function we created
const action = getRandomAction();

// Send a prompt to ChatGPT
const response = await fetch(_CONFIG_.API_BASE_URL + '/chat/completions', {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${_CONFIG_.API_KEY}`,
},
method: 'POST',
body: JSON.stringify({
model: _CONFIG_.GPT_MODEL,
messages: [
{
role: 'user',
content: `You are ${character} and should ${action} in a maximum of 100 characters without breaking character`
},
]
})
})

const jsonData = await response.json();
const content = jsonData.choices[0].message.content;

// Add that content, as well as the character name, into the modal HTML
// Add the response that ChatGPT gave us to the modal HTML
modalContent.innerHTML = `
<h2>${character}</h2>
<p>${content}</p>
<code>Well done!</code>
<code>Character: ${character}, Action: ${action}</code>
`;

// After 2 seconds, remove the hidden class from the modal so it shows on screen and hide the loading image
setTimeout(function () {
modal.classList.remove('hidden');
loading.classList.add('hidden');
}, 2000)
modal.classList.remove('hidden');
loading.classList.add('hidden');
}

// Create a function to run when the page loads
Expand Down