Giter VIP home page Giter VIP logo

volkansah / gpt-api-integration-in-html-css-with-js-php Goto Github PK

View Code? Open in Web Editor NEW
67.0 5.0 52.0 336 KB

A basic GPT conversation script designed to help you learn to interact with OpenAI's GPT technology. Includes best practices and a free security whitepaper.

Home Page: https://github.com/VolkanSah/

License: MIT License

HTML 9.89% CSS 16.06% PHP 55.04% JavaScript 19.02%
api api-key chat-gpt chat-gpt-3 chatgpt chatgpt-api chatgpt3 chatgpt4 html html-css-javascript

gpt-api-integration-in-html-css-with-js-php's Introduction

GPT API Integration (in HTML/CSS with JS/PHP)

Updated: 13.07.2023 (Working well) Please note that this code example is for a basic web application.

Screenshot

Other Important sources for you! Please read befor!

GPT is interesting, let's use it to create a better world.

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.

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 GPT API from Openai.com

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

  • Clone or download this repository.
  • Replace YOUR_API_KEY and MODEL in config.php.
  • Replace the API_ENDPOINT URL in gptchat.php according to your needs (see list below).
  • Upload index.html, style.css, script.js, and gptchat.php files to your web server.
  • Access index.html 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 OpenAI API should respond with a message from the language model.
  • Be cautious and set limits on your OpenAI Dashboard.

OpenAi-API Endpoints

please change gptchat.php & config.php to your needs

ENDPOINT MODEL NAME
/v1/chat/completions gpt-4, gpt-4-0314,gpt-4-0613, gpt-4-32k, gpt-4-32k-0314, 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.
/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-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
/v1/edits text-davinci-edit-001, code-davinci-edit-001
/v1/audio/transcriptions whisper-1
/v1/audio/translations whisper-1
/v1/fine-tunes davinci, curie, babbage, ada
/v1/embeddings text-embedding-ada-002, 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
/v1/moderations text-moderation-latest, text-moderation-stable

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.

Screenshot

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!

Thanks

"Thank you! Your support is appreciated, and I would be grateful if you could share this project with others, giving a ⭐ to my projects, or
becoming a 'Sponsor'. Don't forget to follow me for more free ideas and updates!"

Copyright

Other cool stuff for GPT!

License

This project is copyright © VolkanSah and is licensed under the MIT 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."

gpt-api-integration-in-html-css-with-js-php's People

Contributors

volkansah avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

skorupdmr gf-elite thejustinjames gmh5225 ifeanyijc kirodev rossman22590 accessitech jennifermorales18 marciopocebon edskamor shairam researchforumonline drumskills supuna97 fickya1987 magus168 schwabischesbauernbrot nchamsi alfasignde gear273 esmer09 snisterx96 ishankkaushik vivawaves ecalderini vanipm popupjquery advardia bumkailashkumar nileshoo dark-makers madagastar tobywobe muflahiomar18 ali-khaled-949 mehmetba lutskboy goldouts mahmud44323 anon198102 omarlaouan amin45454 lentesx jarferh martin-chavez-9 raimal-raja roolook anime-kun32 quantumcryptohub-io omekeuchechi szela2912

gpt-api-integration-in-html-css-with-js-php's Issues

Unexpected response format

Hello, thank you for the code.
As the gpt4 API is now available for all I tried to use your code with my API key but I have this error in the log console:
Object
error
:
{message: 'you must provide a model parameter', type: 'invalid_request_error', param: null, code: null}
[[Prototype]]
:
Object

I tried to use gpt-4, gpt-3.5-turbo and so one but alsways the same message.
Can you help me please ?

Unexpect JSON response error

Hi,

Thanks for working in this repo, it is very interesting.

I have tried your code but after setting my Open AI api key in config.php and writing and submit a simple Hi prompt, it returns an error like as follows.

Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at HTMLFormElement. (script.js:26:37)
(anonymous) @ script.js:26

What could be the problem.

Thanks

What API_ENDPOINT URL do you mean?

According to gptchat.php I need to change "API endpoint URL".
In original gptchat.php code line after this comment is

curl_setopt($ch, CURLOPT_URL, "https://api.openai.com/v1/engines/" . MODEL . "/completions");

Questions:

  1. Does "CURLOPT_URL" is the same as "API endpoint URL" term?
  2. According to readme.md ENDPOINT for gpt-3.5-turbo model is /v1/chat/completions. Where is exact API endpoint URL substring in gptchat.php? It looks like it mixed with MODEL in endpoing URL. Any suggestions?

Thanks

Issue with turbo

Nice job!

I try to use:

define('MODEL', 'gpt-3.5-turbo');

and get the following error in console:

script.js:27 
 Error: Unexpected response format 
{error: {…}}
error
: 
{message: 'This is a chat model and not supported in the v1/c…ndpoint. Did you mean to use v1/chat/completions?', type: 'invalid_request_error', param: 'model', code: null}
[[Prototype]]
: 
Object
constructor

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.