Skip to content

Gpt 4 chat api integration v2.0.0 #5

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

Closed
wants to merge 5 commits into from
Closed

Gpt 4 chat api integration v2.0.0 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cdf9746
Update gptchat.php
VolkanSah Apr 17, 2023
e7b0257
Create config.php
VolkanSah Apr 17, 2023
c8eeef5
Update README.md
VolkanSah Apr 17, 2023
8520f6e
Update README.md
VolkanSah Apr 17, 2023
04c8b36
Update config.php
VolkanSah Apr 17, 2023
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
214 changes: 25 additions & 189 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,199 +1,35 @@
# ChatGPT 4 API Integration for your Websites in PHP/JS
###### ChatGPT is interesting, let use it for creating a better world.
This README.md file will guide you through the process of integrating the ChatGPT API into your PHP website, allowing you to set up a chat functionality using OpenAI's API
##### Screenshot
<img src="interface.png">

## Prerequisites

- PHP 7.4 or higher installed on your web server
- A web server with support for PHP (e.g., Apache or Nginx)
- Knowledge of HTML, CSS, and JavaScript (for designing the chat interface)
- An API key for the ChatGPT API

## API Key

# ChatGPT 4 API Integration v2.0.0 for your Websites in PHP/JS
This README.md file will guide you through the process of integrating the ChatGPT API into your PHP website, with advanced configuration options for the GPT-4 API. In this version, you can fine-tune the API's behavior to better suit your needs while ensuring a more secure and efficient integration.

### Prerequisites
- PHP 7.4 or higher installed on your web server
- A web server with support for PHP (e.g., Apache or Nginx)
- Knowledge of HTML, CSS, and JavaScript (for designing the chat interface)
- An API key for the ChatGPT API
### New Features in v2.0.0
- Customizable model selection (e.g., "text-davinci-003")
- Adjustable temperature, max tokens, top_p, frequency_penalty, and presence_penalty settings
- Improved security and code organization
### API Key
- Register for an account or log in to the OpenAi platform.
- Navigate to the API Keys section and generate a new API key.
- Store the API key safely, as you will need it in the next step.
### Setting up the PHP Script
In this version, you'll create a new PHP file that contains advanced configuration options for the GPT-4 API. The existing gptchat.php script needs to be updated to include these new options in the API request.

## Setting up the PHP Script

Create a new PHP file named gptchat.php and place the following code inside it:

```php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// Replace YOUR_API_KEY with your actual OpenAi API key
define('API_KEY', 'YOUR_API_KEY');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$message = urlencode($input['message']);

// change this domain to your needs, please
$url = "https://api.gptchat.com/v1/engines/gpt-4/complete?api_key=" . API_KEY . "&message=" . $message;

$response = file_get_contents($url);
echo $response;
} else {
http_response_code(405);
echo json_encode(['error' => 'Method not allowed']);
}
```

Replace YOUR_API_KEY with the API key you generated in the previous step and set your api-domain

## Creating a Chat Interface

Create an HTML file named index.html and place the following code inside it:

```html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPTChat API Integration</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="chat-container">
<div id="chat-output" class="chat-output"></div>
<form id="chat-form" class="chat-input-form">
<input type="text" id="chat-input" class="chat-input" placeholder="Type your message here" autocomplete="off">
<button type="submit" class="chat-submit">Send</button>
</form>
</div>
</body>
</html>
```

### Next, create a CSS file named style.css for styling the chat interface:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.chat-container {
width: 100%;
max-width: 600px;
margin: 40px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0, 0, 0.1);
display: flex;
flex-direction: column;
}
### Creating a Chat Interface
The chat interface remains the same as in the previous version. You can continue using the same index.html, style.css, and script.js files from the base version (v1.0.0).

.chat-output {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
max-height: 400px;
}

.chat-output p {
margin: 10px 0;
}

.user-message {
text-align: right;
font-weight: bold;
}

.bot-message {
text-align: left;
font-weight: normal;
}

.chat-input-form {
display: flex;
align-items: center;
padding: 10px;
background-color: #f0f0f0;
border-top: 1px solid #e0e0e0;
}

.chat-input {
flex-grow: 1;
border: none;
border-radius: 3px;
padding: 10px;
margin-right: 10px;
}

.chat-submit {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 3px;
}

.chat-submit:hover {
background-color: #0056b3;
}
```
### Lastly, create a JavaScript file named `script.js` to handle the chat functionality:
```javascript
document.addEventListener('DOMContentLoaded', () => {
const chatForm = document.getElementById('chat-form');
const chatInput = document.getElementById('chat-input');
const chatOutput = document.getElementById('chat-output');

chatForm.addEventListener('submit', async (event) => {
event.preventDefault();
const message = chatInput.value.trim();

if (message.length === 0) return;

chatOutput.innerHTML += `<p class="user-message">${message}</p>`;
chatInput.value = '';
chatOutput.scrollTop = chatOutput.scrollHeight;

const response = await fetch('gptchat.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message }),
});

if (response.ok) {
const data = await response.json();
chatOutput.innerHTML += `<p class="bot-message">${data.choices[0].text}</p>`;
chatOutput.scrollTop = chatOutput.scrollHeight;
} else {
console.error('Error communicating with GPTChat API');
}
});
});
```
Now you have a basic chat interface to communicate with the ChatGPT API.
Testing the Chat Functionality

- Upload the index.html, style.css, script.js, and gptchat.php files to your web server.
### Testing the Chat Functionality
- Upload the updated gptchat.php file along with the index.html, style.css, and script.js files to your web server.
- Access the index.html file in your browser (e.g., https://yourdomain.com/index.html).
- Type a message in the chat input field and press Enter or click the Send button to send the message.
- The ChatGPT API should respond with a message from the language model.


**Be carful and set Limits on your OpenAi Dashboard**

- The ChatGPT API should respond with a message from the language model.
- Be careful and set limits on your OpenAi Dashboard!

That's it! You have successfully integrated the ChatGPT API into your PHP website. You can now customize the chat interface and improve the user experience as needed.
That's it! You have successfully integrated the ChatGPT API with advanced configuration options into your PHP website. You can now customize the chat interface and improve the user experience as needed.

**I appreciate your support and would be grateful if you could share this project with others and give me a "star" on GitHub** or become a sponsor
I appreciate your support and would be grateful if you could share this project with others, give me a "star" on GitHub, or consider becoming a sponsor.

### Copyright
S. Volkan Sah Kücükbudak
### Copyright
Volkan Kücükbudak
12 changes: 12 additions & 0 deletions config.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?php
// config file
// Set OpenAI-API key
define('OPENAI_API_KEY', 'Your API here');
// set Modellparameter
define('MODEL', 'text-davinci-003');
define('TEMPERATURE', 0.9);
define('MAX_TOKENS', 100);
define('TOP_P', 1);
define('FREQUENCY_PENALTY', 0.0);
define('PRESENCE_PENALTY', 0.0);
// end if ;)
15 changes: 7 additions & 8 deletions gptchat.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// Replace YOUR_API_KEY with your actual GPTChat API key
define('API_KEY', 'YOUR_API_KEY');
// function
// Importieren der Konfigurationsdatei
require_once 'config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$message = urlencode($input['message']);
// change url to you needs and please ad limits to you openai account
$url = "https://api.gptchat.com/v1/engines/gpt-4/complete?api_key=" . API_KEY . "&message=" . $message;
// get response
$url = "https://api.openai.com/v1/engines/" . MODEL . "/completions?api_key=" . OPENAI_API_KEY . "&temperature=" . TEMPERATURE . "&max_tokens=" . MAX_TOKENS . "&top_p=" . TOP_P . "&frequency_penalty=" . FREQUENCY_PENALTY . "&presence_penalty=" . PRESENCE_PENALTY . "&stop=" . urlencode('[" Human:", " AI:"]') . "&prompt=" . $message;

$response = file_get_contents($url);
echo $response; // print
echo $response;
} else {
// show error if else
http_response_code(405);
echo json_encode(['error' => 'Method not allowed']);
}