Kommunikation mit Assistant auf Threads umgestellt
This commit is contained in:
29
index.php
Normal file
29
index.php
Normal file
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
// Include the configuration file
|
||||
require_once 'config.php';
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ChatGPT Assistent</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="chat-container">
|
||||
<h1>ChatGPT Assistent</h1>
|
||||
<div id="chat-messages"></div>
|
||||
<form id="chat-form">
|
||||
<input type="text" id="user-input" placeholder="Geben Sie Ihre Nachricht ein..." required>
|
||||
<button type="submit">Senden</button>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
// Pass PHP variables to JavaScript
|
||||
const OPENAI_API_KEY = "<?php echo $openai_api_key; ?>";
|
||||
const ASSISTANT_ID = "<?php echo $assistant_id; ?>";
|
||||
</script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
81
script.js
81
script.js
@@ -3,6 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const userInput = document.getElementById('user-input');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
|
||||
let threadId; // Variable to store the thread ID
|
||||
|
||||
chatForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const message = userInput.value.trim();
|
||||
@@ -11,31 +13,82 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
userInput.value = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('api.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ message: message }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
addMessage('Assistant', data.response);
|
||||
if (!threadId) {
|
||||
// Create a new thread
|
||||
threadId = await createThread(message);
|
||||
} else {
|
||||
throw new Error('Fehler bei der API-Anfrage');
|
||||
// Post a message to the existing thread
|
||||
await postMessageToThread(threadId, message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
console.error('Error:', error);
|
||||
addMessage('System', 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function createThread(message) {
|
||||
try {
|
||||
const response = await fetch('https://api.openai.com/v1/threads', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${OPENAI_API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": message
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
addMessage('Assistant', data.choices[0].message.content);
|
||||
return data.id;
|
||||
} else {
|
||||
throw new Error('Fehler bei der Erstellung des Threads');
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
async function postMessageToThread(threadId, message) {
|
||||
try {
|
||||
const response = await fetch(`https://api.openai.com/v1/threads/${threadId}/messages`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${OPENAI_API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": message
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
addMessage('Assistant', data.choices[0].message.content);
|
||||
} else {
|
||||
throw new Error('Fehler beim Posten der Nachricht');
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(sender, message) {
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
|
||||
chatMessages.appendChild(messageElement);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user