sayang dibuang. Beegini tampilan awalnya
kode nya :
<!DOCTYPE html>
<html>
<head>
<title>Tanya apapun</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
margin: 0 auto;
max-width: 500px;
}
label {
display: block;
margin-bottom: 20px;
}
textarea#prompt {
padding: 10px;
border-radius: 7px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
width: 100%;
margin-bottom: 20px;
font-size: 16px;
height: 75px; /* Ubah nilai ini sesuai kebutuhan */
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #3e8e41;
}
#output {
margin-top: 20px;
padding: 20px;
background-color: #f1f1f1;
border-radius: 7px;
margin: 0 auto;
max-width: 500px;
clear:both;
}
.preloader {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.preloader img {
width: 85px;
height: 85px;
}
</style>
</head>
<body>
<h1>Tanya Apapun</h1>
<!-- tambahkan div preloader -->
<div class="preloader">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDxxKFhG3Wf9HmTzag9Spnum5v9IVjUkDYnL09e7EIhnP_c9q6NNAjgWMdlynzTO-yiby9NZZrR5jw3RCG_N_3ynMe0HotgdIgcRQN9sviz3dyV8raQgzaZQBojtxA4HXyS7mgfMN5YoWthH5f6S3X6tXZ8riq_75yJxAq713NFVsQbX_C8KxOZo0Mzg/s200/loading-search.gif" alt="loading...">
</div>
<form>
<label for="prompt">Masukkan pertanyaan:</label>
<textarea id="prompt" name="prompt"></textarea><br>
<button type="button" onclick="callOpenAI()">Cari Jawabannya</button>
<button type="button" onclick="resetForm()">Pertanyaan Baru</button>
</form>
<br>
<div id="output"></div>
<script>
function callOpenAI() {
const api_key = 'sk-xxxxxxxxx';
const prompt = document.getElementById('prompt').value;
const endpoint = 'https://api.openai.com/v1/engines/text-davinci-003/completions';
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${api_key}`
};
const params = {
prompt: prompt,
max_tokens: 3500,
temperature: 0.8
};
const preloader = document.querySelector('.preloader');
preloader.style.display = 'flex';
fetch(endpoint, {
method: 'POST',
headers: headers,
body: JSON.stringify(params)
})
.then(response => response.json())
.then(data => {
const output = document.getElementById('output');
output.innerHTML = `<p><strong>Jawaban:</strong></p><p>${data.choices[0].text.replace(/\n/g, '<br>')}</p>`;
preloader.style.display = 'none';
})
.catch(error => {
console.log(error);
preloader.style.display = 'none';
});
}
function resetForm() {
document.getElementById('prompt').value = '';
document.getElementById('output').innerHTML = '';
}
</script>
</body>
</html>
ketika hasil jawabannya ditampilkan :
Pubiway 