document.write(`
<div style="background-color:#343541 ;color:white;display:flex;font-family: Trebuchet MS, sans-serif; ">
<style>
h1{
font-size:33px;
font-weight: 600;
padding:200px 0;
}
.side-bar{
background-color: #202123;
width: 244px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content:space-between;
}
.main{
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
height: 100vh;
width:100%;
}
.info{
color:rgba(255,255,255,0.5);
font-size: 11px;
padding:10px;
}
input{
color: white;
border:none;
background-color: rgba(255,255,255,0.2);
width:100%;
font-size: 20px;
padding:12px 15px;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.05) 0 54px 55px,
rgba(0,0,0,0.05) 0 -12px 30px,
rgba(0,0,0,0.05) 0 4px 6px,
rgba(0,0,0,0.05) 0 12px 3px,
rgba(0,0,0,0.09) 0 -3px 5px
}
input:focus{
outline:none;
}
.input-container{
position:relative;
width:100%;
max-width:650px;
}
.bottom-section{
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#submit {
font-size: 35px;
color: white;
}
.input-container #submit{
position: absolute;
right:5px;
bottom:2px;
cursor:pointer;
}
button{
color: white;
border: solid 0.5px rgba(255,255,255,0.5);
background-color: transparent;
border-radius: 5px;
margin: 10px;
padding:10px;
}
nav{
border-top:solid 0.5px rgba(255,255,255,0.5);
margin: 10px;
padding:10px;
}
.history{
margin: 10px;
padding:10px;
display:flex;
flex-direction: column;
height:100%;
}
.history p{
cursor:pointer;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A.I. Text Generator</title>
</head>
<body>
<section class="side-bar">
<button id = "newchatbutton"> New chat</button>
<div class="history"></div>
<nav>
<p> Ask Me anything 😎️</p>
</nav>
</section>
<section class="main" style="display:flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
height: 100vh;">
<h1>A.I. Text Generator <br>(scroll down for link to second world)</h1>
<p id="output" ></p>
<div class="bottom-section">
<div class="input-container">
<input placeholder="Please give me 3-4 seconds to answer."/>
<div id="submit">➢</div>
</div>
</div>
<p class="info">My responses are not always accurate, please confirm the information via other trusted sources.</p>
</section>
</body>
</html>
</div>
`)
document.write ( "<center>" + AB.launchWorld ("9606218844","Image Generation") + "</center>" );
const API_KEY = "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"
const submitButton = document.querySelector('#submit')
const outputElement = document.querySelector('#output')
const inputElement = document.querySelector('input')
const historyElement = document.querySelector('.history')
const buttonElement = document.querySelector('#newchatbutton')
function changeInput(value){
const inputElement = document.querySelector('input')
inputElement.value = value
}
async function getMessage(){
const options = {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type' : 'application/json'
},
body:JSON.stringify({
model:"gpt-3.5-turbo",
messages:[{role:"user",content:inputElement.value}],
max_tokens:100
})
}
try{
const response = await fetch("https://api.openai.com/v1/chat/completions",options)
const data = await response.json()
console.log(data)
outputElement.textContent = data.choices[0].message.content
if(data.choices[0].message.content && inputElement.value){
const pElement = document.createElement('p')
pElement.textContent = inputElement.value
pElement.addEventListener('click',() => changeInput(pElement.textContent))
historyElement.append(pElement)
}
}catch(error){
console.error(error)
}
}
submitButton.addEventListener('click',getMessage)
function clearInput () {
inputElement.value = ''
}
buttonElement.addEventListener('click',clearInput)