Chat GPT integration "Step by step how to"
Hello friends!
@Genesis @OneEagle @thomlin
As the code is being stripped I added txt files, please copy code from them.
Here is the step by step list to integrate basic chat GPT to your site, with copy button of responses a spinning icon whlie waiting for the response and history list. It is a basic setup with GPT 3.5 Turbo language model. (every model is possible but they have multiple different parameters). You dont need programming skills as I will provide you the codes, just copy and paste :)
we used html, javascript and php:
- You need an openai key. Go to platform.openai.com create a free account. From the member menu view/create API keys, then note your api key as this key is shown only once. (If lost it you may create another).
- Go to UNA studio > Pages > Custom > Add New Page
- system name: aichat, title: aichat
- Click injections > in the HEAD area paste the text from >>> injections-HEAD.txt from the attachments.
- Click Cover photo and disable it. > Click Create.
Click on the raw block that you create > Deselect unauthenticed from the visibility list or adjust as you wish for instance you may prefer Administrator access only while testing. Continue setting the RAw block add this code to content area:
>>>refer to RAWBlockcontent.txt in the attachments
now you will need to create a single php page called process.php in the main UNA directory (this is needed not to present our API key to public, but reading it through an ajax call from the page). Replace YOUR_OPENAI_API_KEY with your one.The contents of process.php to be:
>>>refer to processphp.txt in the attachments.
There are some functions in the above codes that are intended to use for debugging when needed.
Navigate to yourunasite/page.php?i=aichat and you will see your functional page :)
If you have questions I will try to help.
-
-
Brilliant! Thank you @Cem ✊
Promoted and pinned your post for everyone.
-
Great job @Cem 👍 thanks a lot it's great!
-
Thank you Andrey 😊
-
Just awesome @Cem. Thank you so much for sharing. Nice work! The above code should be added to UNA core by default. Any plan? @Andrey Yasko @Alex T⚜️ @Alexey
-
@OneEagle for further improvements my ideas are:
- it will be great to integrate it to messenger
- members could use these models with site points
- chat history to be recorded to members profile (in case of messenger integration this will not be needed)
-
Excellent, Cem. Thank you for sharing this!
-
Only showing the Code on the page Any ideas?
-
Either syntax error or may be php is not enabled on your server.
-
Well PHP has to be active for the UNA platform to work so I will rule that out. Syntax error Can definitely be the issue. I do notice the source code to copy/paste for the process.php does not start with <?php all PHP files start with this. Also there is a lot of source> with out enclosing the <source> tag.. I still have not got it working yet but I will check back...
-
I corrected it 👍 if you still have an issue write please.
-
Great ideas!
-
Hello @Cem you might want to correct the Syntax for the Injection part for the page head section and the Body Content section. I think the Syntax is being stripped on the source. there are a lot of source without the starting < . for others that don't know much of coding would never get this with a copy/paste.
-
Ok seems like when it's posted here it is stripped.
I will add as attachments.
-
Remember on OPEN Ai New accounts get about $18.00 test credit. Then you have to be a paid subscriber for additional request. Otherwise you will get a Parse Error on the API.. :)
-
This is awesome!
-
please can you integrate this for me on my website?
-
Yes please check your messages.
-
Following these instructions, I get the following error:
How to fix? and what does kopyala mean? I replaced 'kopyala' button with 'Try Again' button. That simply launches a dialog box that says
SafeSocialOnline.com says
Try Again
-
Could you check the error from the browser console and web server log flie?
Did you enter the API to the PHP file?
Kopyala means Copy in Turkish, you may translate it to your language in this section of the RAW block content txt:
onclick="copyToClipboard('${mesajid}')">Kopyala`;I corrected the RAW-block_content.txt file with English titles.
-
I had a semicolon before closing " ' " on api secret key. Now it works. :) Very Cool! I also changed some prompts and outputs to english language. Well Done. Thank you!
-
Why is text stripped of formatting such as line breaks or paragraph breaks? Is there a fix for this?
Example
You: what is safesocialonline.com
Answer: (first paragraph embellished slightly for accuracy)
SafeSocialOnline+AI: Safesocialonline.com is a social media platform that provides a promise of Real People, No Fake Accounts, No Bullying, No Racism, and in short, no Toxic content. AI moderation prevents toxic content from ever being posted. It also has parental control and monitoring services to help parents keep their children safe online. The website offers several tools and features to parents to ensure their child's online activities are monitored and protected. The website provides monitoring of popular social media platforms, website filtering, and access restriction, and online activity monitoring that alerts parents on suspicious online activities or bullying on their children's devices. Safesocialonline.com emphasizes on providing parents with the necessary tools to manage their children's social media usage and help them develop responsible online habits.
Should be something more like: (first paragraph embellished slightly for accuracy. But it seems like the paragraph breaks should be there when the answer comes?
SafeSocialOnline+AI: Safesocialonline.com is a social media platform that provides a promise of Real People, No Fake Accounts, No Bullying, No Racism, and in short, no Toxic content. AI moderation prevents toxic content from ever being posted. It also has parental control and monitoring services to help parents keep their children safe online.
The website offers several tools and features to parents to ensure their child's online activities are monitored and protected.
The website provides monitoring of popular social media platforms, website filtering, and access restriction, and online activity monitoring that alerts parents on suspicious online activities or bullying on their children's devices.
Safesocialonline.com emphasizes on providing parents with the necessary tools to manage their children's social media usage and help them develop responsible online habits.
-
As default it will give you plain text to reduce the financial and computational cost and to provide less compexity in case you want to process the output on yourside.
If you ask it to format the text with paragraphs and headings etc. it will when suitable.
Try this format: detailed information about Malta with structured HTML formatted paragraphs please.
-
Sweet! Again, Nice Work! Thank you.
-
-
@Robert Sussman I had the same problem. I solved it when I found a typo in my API Secret key entry. I had I had a semicolon before the closing " ' " on api secret key. It belongs at the line end. The entire secret key is enclosed in single quote and ends in a semi colon; Like this 'YourSecretKey';
-
Check out this implementation at https://safesocialonline.com/page/aichat
-
Unforunatly, it did not work at my end. I followed the instructions and the wheel kept spinning with no error message on the chat page (see attached).
When I checked the developer tools I got this one.
Any help?
-
Here is the process.php file, in case i missed up something.
-
somewhere, you set something wrong or copied it.. according to the instructions, everything works as it should..im happy
-
How do I set the parameters of the window for aichat..I would like to make it bigger..stretch to the whole page
-
sorry i'm blind i found it :)
-
there is a syntax error possbily you may see the where it is by clicking the aichat-2188:2 on up right corner.
-
looks and works great on your site I will check out my API key again. How are you doing the child verification for the add child? Thanks
-
@Cem Thank you very much for the information provided. For the convenience of mobile phones, it is better to move the html text from the left down.
-
@Cem hello there, I have the problem with the spinning circle like @Tajrebatee posted above. Does anyone know what the fix was? I have checked the codes and all seems fine.
Image below
-
what's the error in browser console?
-
This is what I find:
jquery.min.js?rev=599:2 jQuery.Deferred exception: $(...).addWebForms is not a function TypeError: $(...).addWebForms is not a function
at HTMLDocument.<anonymous> (https://molosserdogs.com/inc/js/jquery.webForms.js?rev=599:395:13)
at e (https://molosserdogs.com/plugins_public/jquery/jquery.min.js?rev=599:2:30038)
at t (https://molosserdogs.com/plugins_public/jquery/jquery.min.js?rev=599:2:30340) undefined
-
no these errors are not related.
Your error is:
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
success https://molosserdogs.com/aichat:933
jQuery 6
handleUserInput https://molosserdogs.com/aichat:924
jQuery 9
<anonymous> https://molosserdogs.com/aichat:954
so there is a syntax error. You may first check the api key for extra spaces/characters etc. and the pasted codes for other typos.
-
Hello @Cem !
I guess it would be better to create your own module with that integration to have all the necessary content within to avoid uploading files like the process.php. It will be more comfortable for the users.
