├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # ChatGPT-API 2 | 3 | هذا المشروع هو مشروع تابع لمقطع chat gpt api في أكاديمية ترميز على اليوتيوب. 4 | 5 | [![Chat GPT Copy 2](https://user-images.githubusercontent.com/29100623/224706621-14f13882-a92b-40e1-bfe6-588cd6fec42d.png)](https://youtu.be/-RKwo0BSYL0) 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

تحدث معي

23 |
24 | 25 |
26 | 27 | 28 |
29 | 30 |
31 | أهلا بك.. اطرح أي سؤال يدور في بالك 32 |
33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.getElementById("submit-btn").addEventListener("click", function () { 2 | sendToChatGPT(); 3 | }); 4 | 5 | // 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 6 | 7 | function sendToChatGPT() { 8 | let value = document.getElementById("word-input").value; 9 | 10 | let body = { 11 | model: "gpt-3.5-turbo", 12 | messages: [{ role: "user", content: value }], 13 | tempreture: "1", 14 | }; 15 | 16 | let headers = { 17 | Authorization: "Bearer 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", 18 | }; 19 | 20 | axios 21 | .post("https://api.openai.com/v1/chat/completions", body, { 22 | headers: headers, 23 | }) 24 | .then((response) => { 25 | let reply = response.data.choices[0].message.content; 26 | document.getElementById("reply-content").textContent = reply; 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | #main-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | background-color: rgb(15 27 83); 6 | height: 100vh; 7 | flex-direction: column; 8 | } 9 | 10 | body { 11 | margin: 0px; 12 | color: white; 13 | direction: rtl; 14 | } 15 | 16 | body,button,input{ 17 | font-family: 'Cairo', sans-serif; 18 | } 19 | 20 | #main-title { 21 | font-size: 100px; 22 | margin: 0px; 23 | } 24 | 25 | #main-content { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | background-color: rgb(217, 217, 217); 30 | height: 200px; 31 | width: 700px; 32 | padding: 15px; 33 | margin-top: 30px; 34 | border-radius: 10px; 35 | box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); 36 | } 37 | 38 | #word-input { 39 | width: 500px; 40 | height: 50px; 41 | border: none; 42 | border-radius: 100px; 43 | padding: 0px 20px; 44 | } 45 | 46 | #submit-btn{ 47 | height: 50px; 48 | border: none; 49 | border-radius: 100px; 50 | margin: 0px 10px; 51 | width: 160px; 52 | background-color: rgb(35, 104, 252); 53 | color: white; 54 | font-size: 15px; 55 | cursor: pointer; 56 | transition: all 0.3s; 57 | } 58 | 59 | #submit-btn:hover{ 60 | background-color: rgb(11, 67, 188); 61 | } 62 | 63 | #reply-content { 64 | font-size: 25px; 65 | color: black; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | background-color: rgb(217, 217, 217); 70 | height: 400px; 71 | width: 700px; 72 | padding: 15px; 73 | margin-top: 30px; 74 | border-radius: 10px; 75 | box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); 76 | } --------------------------------------------------------------------------------