ChatGPT Hello World

├── styles.css ├── readme.md ├── LICENSE ├── index.html ├── code.js └── source.opml /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Ubuntu; 3 | font-size: 18px; 4 | background-color: whitesmoke; 5 | } 6 | .divPageBody { 7 | width: 600px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | margin-top: 90px; 11 | margin-bottom: 500px; 12 | } 13 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Chat GPT Hello World 2 | 3 | A browser-based JavaScript app that finds out who Bull Mancuso is. 4 | 5 | ### How to 6 | 7 | I asked ChatGPT to explain how to get a developer account and api key. 8 | 9 | You can run the app from my server, here. 10 | 11 | It will fail the first time, then open the console and enter this: 12 | 13 | `localStorage.chatApiKey = "the text of your actual api key"` 14 | 15 | Reload the page and this time it should work. 16 | 17 | ### What you'll see 18 | 19 | You should see something like this. 20 | 21 | I've gotten a bunch of different answers, including it doesn't know who Bull Mancuso is. 22 | 23 | ### Podcast 24 | 25 | I recorded a 4-minute podcast about this little project. 26 | 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Dave Winer 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ChatGPT Hello World 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 |

27 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /code.js: -------------------------------------------------------------------------------- 1 | const apiKey = localStorage.chatApiKey; 2 | const apiUrl = "https://api.openai.com/v1/chat/completions"; 3 | 4 | function chatRequest (prompt, callback) { 5 | const headers = { 6 | "Authorization": `Bearer ${apiKey}` 7 | }; 8 | const data = { 9 | model: "gpt-3.5-turbo", 10 | messages: [ 11 | { 12 | role: "system", 13 | content: "You are a helpful assistant." 14 | }, 15 | { 16 | role: "user", 17 | content: prompt 18 | } 19 | ], 20 | max_tokens: 1000 21 | }; 22 | 23 | console.log ("chatRequest: headers == " + jsonStringify (headers)); 24 | console.log ("chatRequest: data == " + jsonStringify (data)); 25 | 26 | $.ajax ({ 27 | url: apiUrl, 28 | type: "POST", 29 | contentType: "application/json", 30 | headers, 31 | data: JSON.stringify (data), 32 | success: function (response) { 33 | callback (undefined, response.choices [0].message.content); 34 | }, 35 | error: function (xhr, status, error) { 36 | const theResponse = JSON.parse (xhr.responseText); 37 | callback (theResponse.error); 38 | } 39 | }); 40 | } 41 | function startup () { 42 | console.log ("startup"); 43 | console.log ("startup: apiKey == " + apiKey); 44 | console.log ("startup: apiUrl == " + apiUrl); 45 | 46 | var defaultPerson = "Bull Mancuso"; 47 | askDialog ("Who should we ask about:", defaultPerson, "", function (thePerson, flcancel) { 48 | if (!flcancel) { 49 | chatRequest ("Who is " + thePerson + "?", function (err, theResponse) { 50 | if (err) { 51 | alertDialog (err.message); 52 | } 53 | else { 54 | alertDialog (theResponse); 55 | } 56 | }); 57 | } 58 | }); 59 | 60 | 61 | } 62 | -------------------------------------------------------------------------------- /source.opml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | nodeEditor: chatGptHelloWorld 18 | Fri, 09 Aug 2024 15:54:09 GMT 19 | Sat, 10 Aug 2024 03:09:49 GMT 20 | Dave Winer 21 | http://davewiner.com/ 22 | 1, 2, 5, 11, 13, 14, 16, 22, 25, 27 23 | 1 24 | 206 25 | 454 26 | 944 27 | 1462 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | --------------------------------------------------------------------------------