├── .github └── FUNDING.yml ├── LICENSE ├── README.md ├── chatgpt.png ├── config.php ├── gptchat.php ├── index.html ├── screenshot.png ├── script.js ├── style.css └── tips └── Readme.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [volkansah] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: volkansah 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 S. Volkan Sah Kücükbudak 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GPT API Integration (in HTML/CSS with JS/PHP) 2 | ###### Updated: 02.06.2024 modules/endpoints 3 | 4 | ![Screenshot](chatgpt.png) 5 | [Need API-Stream? - show this branch](https://github.com/VolkanSah/GPT-API-Integration-in-HTML-CSS-with-JS-PHP/tree/gpt-with-stream) 6 | 7 | 8 | > [!IMPORTANT] 9 | > Please note that this code example is for a basic web application to show "How to do it?", not production use! 10 | 11 | ### Other Important sources for you! Please read befor! 12 | - [Secure Implementation of Artificial Intelligence (AI)](https://github.com/VolkanSah/Implementing-AI-Systems-Whitepaper) 13 | - [GPT Security Best Practices (with GPT3.5-Turbo Example)](https://github.com/VolkanSah/GPT-Security-Best-Practices) 14 | ###### GPT is interesting, let's use it to create a better world. 15 | 16 | This README.md file will guide you through the process of integrating the GPT API into your PHP-based website, enabling chat functionality using OpenAI's API. 17 | 18 | 19 | ## Prerequisites 20 | - PHP 7.4 or higher installed on your web server 21 | - A web server with support for PHP (e.g., Apache or Nginx) 22 | - Knowledge of HTML, CSS, and JavaScript (for designing the chat interface) 23 | - An API key for the GPT API from Openai.com 24 | 25 | ## API Key 26 | - Register for an account or log in to the OpenAi platform. 27 | - Navigate to the API Keys section and generate a new API key. 28 | - Store the API key safely, as you will need it in the next step. 29 | 30 | ## Setting Up 31 | - Clone or download this repository. 32 | - Replace YOUR_API_KEY and MODEL in config.php. 33 | - Replace the API_ENDPOINT URL in gptchat.php according to your needs (see list below). 34 | - Upload index.html, style.css, script.js, and gptchat.php files to your web server. 35 | - Access index.html in your browser (e.g., https://yourdomain.com/index.html). 36 | - Type a message in the chat input field and press Enter or click the Send button to send the message. 37 | - The OpenAI API should respond with a message from the language model. 38 | - Be cautious and set limits on your OpenAI Dashboard. 39 | ## OpenAi-API Endpoints 40 | **please change gptchat.php & config.php to your needs** 41 | 42 | ENDPOINT | MODEL NAME 43 | -- | -- 44 | /v1/chat/completions | gpt-4, gpt-4-0314, gpt-4-0613, gpt-4-32k, gpt-4-32k-0314, gpt-4-32k-0613, gpt-4-2024, gpt-4-32k-2024, gpt-3.5-turbo, gpt-3.5-turbo-0301, gpt-3.5-turbo-0613, gpt-3.5-turbo-16k, gpt-3.5-turbo-16k-0613, gpt-3.5-turbo-2024, gpt-3.5-turbo-16k-2024, gpt-3.5-turbo-0125 45 | /v1/completions | ada, ada-code-search-code, ada-code-search-text, ada-search-document, ada-search-query, ada-similarity, babbage, babbage-code-search-code, babbage-code-search-text, babbage-search-document, babbage-search-query, babbage-similarity, code-davinci-edit-001, code-search-ada-code-001, code-search-ada-text-001, code-search-babbage-code-001, code-search-babbage-text-001, curie, curie-instruct-beta, curie-search-document, curie-search-query, curie-similarity, davinci, davinci-instruct-beta, davinci-search-document, davinci-search-query, davinci-similarity, text-ada-001, text-babbage-001, text-curie-001, text-davinci-001, text-davinci-002, text-davinci-003, text-davinci-edit-001, text-embedding-ada-002, text-embedding-3-small, text-embedding-3-large, text-search-ada-doc-001, text-search-ada-query-001, text-search-babbage-doc-001, text-search-babbage-query-001, text-search-curie-doc-001, text-search-curie-query-001, text-search-davinci-doc-001, text-search-davinci-query-001, text-similarity-ada-001, text-similarity-babbage-001, text-similarity-curie-001, text-similarity-davinci-001 46 | /v1/edits | text-davinci-edit-001, code-davinci-edit-001 47 | /v1/audio/transcriptions | whisper-1 48 | /v1/audio/translations | whisper-1 49 | /v1/fine-tunes | davinci, curie, babbage, ada 50 | /v1/embeddings | text-embedding-ada-002, text-embedding-3-small, text-embedding-3-large, text-search-ada-doc-001, text-search-ada-query-001, text-search-babbage-doc-001, text-search-babbage-query-001, text-search-curie-doc-001, text-search-curie-query-001, text-search-davinci-doc-001, text-search-davinci-query-001 51 | /v1/moderations | text-moderation-latest, text-moderation-stable, text-moderation-007 52 | 53 | 54 | You've successfully integrated the GPT API into your PHP website! Now, you can customize the chat interface and enhance the user experience as needed. 55 | ## Screenshot 56 | 57 | 58 | **Please note that this code example is for a basic web application, and you should consider additional security measures please read [GPT Security Best Practices](https://github.com/VolkanSah/GPT-Security-Best-Practices)!** 59 | 60 | 61 | 62 | ### Thanks 63 | **"Thank you! Your support is appreciated, and I would be grateful if you could share this project with others, giving a :star: to my projects, or 64 | [becoming a 'Sponsor'](https://github.com/sponsors/volkansah). Don't forget to follow me for more free ideas and updates!"** 65 | 66 | ### Copyright 67 | - Volkan (Sah) Kücükbudak 68 | - [VolkanSah on Github](https://github.com/volkansah) 69 | - [Developer Site](https://volkansah.github.io) 70 | 71 | ### Other cool stuff for GPT! 72 | - [OpenAI Text-to-Speech Interface](https://github.com/VolkanSah/OpenAI-Text-to-Speech-Interface) 73 | - [ChatGPT ShellMaster (ChatGPT4 Plugin](https://github.com/VolkanSah/GPT-ShellMaster) 74 | - ['GPT Comment reply' Plugin for WordPress](https://github.com/VolkanSah/aicc-comments-reply-plugin) 75 | - [GPT over CLI](https://github.com/VolkanSah/GPT-over-CLI) 76 | - [GPT-Security-Best-Practices](https://github.com/VolkanSah/GPT-Security-Best-Practices) 77 | - [OpenAi cost calculator](https://github.com/VolkanSah/OpenAI-Cost-Calculator) 78 | - [Secure Implementation of Artificial Intelligence (AI)](https://github.com/VolkanSah/Implementing-AI-Systems-Whitepaper) 79 | - [Exploring the Code Interpreter in OpenAI](https://github.com/VolkanSah/The-Code-Interpreter-in-OpenAI-ChatGPT) 80 | 81 | 82 | ### License 83 | This project is copyright © [VolkanSah](https://github.com/volkansah) and is licensed under the [MIT LICENSE](LICENSE). You are free to use, modify, and distribute the code and assets, as long as the copyright notice and permission notice are preserved in all copies or substantial portions of the software." 84 | 85 | 86 | -------------------------------------------------------------------------------- /chatgpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VolkanSah/GPT-API-Integration-in-HTML-CSS-with-JS-PHP/9e1554d45ded6ea73cf33967603ba80d108edf58/chatgpt.png -------------------------------------------------------------------------------- /config.php: -------------------------------------------------------------------------------- 1 | gpt-3.5-turbo-16k, 34 | curl_setopt($ch, CURLOPT_URL, "https://api.openai.com/v1/engines/" . MODEL . "/completions"); 35 | curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 36 | curl_setopt($ch, CURLOPT_POST, 1); 37 | curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(array( 38 | 39 | "prompt" => $message, 40 | "max_tokens" => MAX_TOKENS, 41 | "temperature" => TEMPERATURE, 42 | "top_p" => TOP_P, 43 | "frequency_penalty" => FREQUENCY_PENALTY, 44 | "presence_penalty" => PRESENCE_PENALTY 45 | ))); 46 | // Set the Content-Type and Authorization headers 47 | curl_setopt($ch, CURLOPT_HTTPHEADER, array( 48 | "Content-Type: application/json", 49 | "Authorization: Bearer " . OPENAI_API_KEY 50 | )); 51 | // Execute the cURL session and store the response 52 | $response = curl_exec($ch); 53 | // Output the response 54 | echo $response; 55 | // Close the cURL session 56 | curl_close($ch); 57 | } else { 58 | // Set the HTTP response code to 405 (Method Not Allowed) if the request method is not POST 59 | http_response_code(405); 60 | // Output an error message in JSON format 61 | echo json_encode(['error' => 'Method not allowed']); 62 | } 63 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GPTChat API Integration 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VolkanSah/GPT-API-Integration-in-HTML-CSS-with-JS-PHP/9e1554d45ded6ea73cf33967603ba80d108edf58/screenshot.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const chatForm = document.getElementById("chat-form"); 2 | const chatInput = document.getElementById("chat-input"); 3 | const chatOutput = document.getElementById("chat-output"); 4 | 5 | chatForm.addEventListener("submit", async (e) => { 6 | e.preventDefault(); 7 | const message = chatInput.value.trim(); 8 | if (!message) return; 9 | 10 | chatOutput.innerHTML += `

${message}

`; 11 | chatInput.value = ""; 12 | chatOutput.scrollTop = chatOutput.scrollHeight; 13 | 14 | const response = await fetch("gptchat.php", { 15 | method: "POST", 16 | headers: { 17 | "Content-Type": "application/json", 18 | }, 19 | body: JSON.stringify({ message }), 20 | }); 21 | 22 | if (response.ok) { 23 | const data = await response.json(); 24 | if (data.choices && data.choices[0] && data.choices[0].text) { 25 | chatOutput.innerHTML += `

${data.choices[0].text}

`; 26 | } else { 27 | console.error("Error: Unexpected response format", data); 28 | } 29 | chatOutput.scrollTop = chatOutput.scrollHeight; 30 | } else { 31 | console.error("Error communicating with GPTChat API"); 32 | } 33 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f0f0f0; 4 | } 5 | 6 | .chat-container { 7 | width: 100%; 8 | max-width: 600px; 9 | margin: 40px auto; 10 | background-color: #fff; 11 | border-radius: 5px; 12 | box-shadow: 0 3px 10px rgba(0,0, 0, 0.1); 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | .chat-output { 18 | flex-grow: 1; 19 | padding: 20px; 20 | overflow-y: auto; 21 | max-height: 400px; 22 | } 23 | 24 | .chat-output p { 25 | margin: 10px 0; 26 | } 27 | 28 | .user-message { 29 | text-align: right; 30 | font-weight: bold; 31 | } 32 | 33 | .bot-message { 34 | text-align: left; 35 | font-weight: normal; 36 | } 37 | 38 | .chat-input-form { 39 | display: flex; 40 | align-items: center; 41 | padding: 10px; 42 | background-color: #f0f0f0; 43 | border-top: 1px solid #e0e0e0; 44 | } 45 | 46 | .chat-input { 47 | flex-grow: 1; 48 | border: none; 49 | border-radius: 3px; 50 | padding: 10px; 51 | margin-right: 10px; 52 | } 53 | 54 | .chat-submit { 55 | padding: 10px 20px; 56 | background-color: #007bff; 57 | color: #fff; 58 | font-weight: bold; 59 | border: none; 60 | cursor: pointer; 61 | border-radius: 3px; 62 | } 63 | 64 | .chat-submit:hover { 65 | background-color: #0056b3; 66 | } 67 | -------------------------------------------------------------------------------- /tips/Readme.md: -------------------------------------------------------------------------------- 1 | ### some tips 2 | - use for better error handling 3 | ```java 4 | if (response.ok) { 5 | const data = await response.json(); 6 | if (data.choices && data.choices[0] && data.choices[0].text) { 7 | chatOutput.innerHTML += `

${data.choices[0].text}

`; 8 | } else { 9 | console.error("Error: Unexpected response format", data); 10 | chatOutput.innerHTML += `

Entschuldigung, es gab ein Problem bei der Verarbeitung Ihrer Anfrage. Bitte versuchen Sie es später noch einmal.

`; 11 | } 12 | } else { 13 | console.error("Error communicating with GPTChat API"); 14 | chatOutput.innerHTML += `

Entschuldigung, es gab ein Problem bei der Kommunikation mit dem Berater. Bitte versuchen Sie es später noch einmal.

`; 15 | } 16 | chatOutput.scrollTop = chatOutput.scrollHeight; 17 | ``` 18 | --------------------------------------------------------------------------------