Get started with OpenAI<\/h2>\n
\n To get started with OpenAI, sign up on the platform developers page<\/a> and take a look at the documentation<\/a>. Although there is a free tier that provides a limited number of requests, I signed up for a paid account (and set a reasonable paid limit). Once you have an account you can immediately try the interactive chat experience at chat.openai.com<\/a>. \n<\/p>\n If you are completely new to ChatGPT, consider following the quickstart<\/a> and reviewing some examples<\/a> before continuing.<\/p><\/blockquote>\n \n We can start to test our prompt ideas directly in the ChatGPT UI with the HTML content embedded<\/a> in the demo.\n<\/p>\n \n These are two prompts that we\u2019ll add to our Android demo:\n<\/p>\n \n Here\u2019s a screenshot showing the test ChatGPT interaction \u2013 the entire query consists of the prompt text followed by the HTML content, and the output contains the result:\n<\/p>\n \n Figure 1: Using ChatGPT to summarize an existing HTML page \u2013 prompt on the left and resulting \u2018summarized\u2019 HTML on the right<\/em>\n<\/p>\n \n Test both prompts \u2013 a short summary and a grammar- and spell-checked version of the content. To better test the spell checking feature, add some intentionally bad typos and grammar into your test data. You can continue to experiment with different prompts to achieve many different text outputs, but once you\u2019re finished playing, keep reading to get started with the developer API.\n<\/p>\n \n Because we want to access ChatGPT from an Android application, we\u2019ll need to use the provided API. The API consists of web requests and responses in a JSON format, using an authentication header for access control and billing.\n<\/p>\n \n When you are logged in to OpenAI you can generate authentication tokens from this page<\/a>, and then you can test any of the API endpoints listed in the documentation<\/a> using cURL, such as the \n Figure 2: Accessing the OpenAI API via curl<\/em>\n<\/p>\n \n Once you have confirmed that your API key is working using cURL, you can modify the \n For this example, we\u2019re going to make three fairly minor changes to the existing Source Editor<\/em><\/a> Android sample app:\n<\/p>\n \n You can easily browse the changes in this pull request on GitHub<\/a>.\n<\/p>\n \n This class contains the API details needed to access ChatGPT, including the URL and your API key (remember to keep this secret, and DON\u2019T check it into source control):\n<\/p>\n \n This method is called from the new feature buttons, and it passes in the prompt to be sent to ChatGPT. The code formats a valid JSON body, constructs the HTTP request with the required authorization header, and parses the ChatGPT answer from valid responses:\n<\/p>\n \n The code shown above is edited for clarity \u2013 the sample on GitHub<\/a> has more configuration options and error handling.\n<\/p>\n \n In order to call the ChatGPT features, new SVG images resources are added to the project, included in component_action_toolbar.xml<\/strong>, and wired up with calls to the \n The ChatGPT API call is triggered by new buttons added to the navigation bar. Run the sample (which now includes purposeful typos in the HTML, highlighted on the left screenshot in Figure 3) and choose either of the new grammar or summarization features via the toolbar buttons. After a short delay for the network request and processing time, the editable content and preview will be updated with the results from the OpenAI service:\n<\/p>\n \n Figure 3: Android application showing the original (typos highlighted manually) and results of the \n An interesting side-effect of the \n These prompts are just two examples of features that might make sense in a text editor application. Other things you could try include making the content more or less formal, translating to other languages, changing the formatting (eg. from HTML to Markdown), or providing an input for the user to generate content from their own prompts. An undo feature would also be useful if you\u2019re unhappy with the final results!\n<\/p>\n \n Here\u2019s a summary of the links shared in this post:\n<\/p>\n \n If you have any questions about ChatGPT or how to apply AI in your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\nSHORTEN = \"Strip away extra words in the below html content and provide a clear message as html content.\\n\\n\"\r\nGRAMMARCHECK = \"Check grammar and spelling in the below html content and provide the result as html content.\\n\\n\"<\/pre>\n
![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/04\/graphical-user-interface-text-application-descr.png\")
\n<\/p>\nOpenAI API<\/h2>\n
completions<\/code> endpoint that we will use in our demo:\n<\/p>\n![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/04\/text-description-automatically-generated.png\")
\n<\/p>\nprompt<\/code> text to use the test content from above (don\u2019t forget to make sure it\u2019s valid JSON). Once you\u2019re happy with the results from the API, it\u2019s time to add these features to the Android app.\n<\/p>\nAdding to Android<\/h2>\n
\n
HttpClient<\/code>, and parses the result\n <\/li>\nConstants class<\/h3>\n
internal object Constants {\r\n \/\/ The OpenAI API key.\r\n internal const val OPENAI_KEY = \"{OPENAPI_API_KEY_GOES_HERE}\"\r\n \/\/ The OpenAI API model name.\r\n internal const val OPENAI_MODEL_COMPLETIONS = \"text-davinci-003\"\r\n \/\/ The OpenAI API endpoint.\r\n internal const val API_ENDPOINT_COMPLETIONS = \"https:\/\/api.openai.com\/v1\/completions\"\r\n \/\/ ChatGPT prompts.\r\n internal const val SHORTEN = \"Strip away extra words in the below html content and provide a clear message as html content.\\n\\n\"\r\n internal const val GRAMMARCHECK = \"Check grammar and spelling in the below html content and provide the result as html content.\\n\\n\"\r\n}<\/pre>\nHttpClient API method<\/h3>\n
private suspend fun createCompletion(prompt: String): String {\r\n val openAIPrompt = mapOf(\r\n \"model\" to Constants.OPENAI_MODEL_COMPLETIONS,\r\n \"prompt\" to prompt,\r\n \"temperature\" to 0.5,\r\n \"max_tokens\" to 1500,\r\n )\r\n val content:String = gson.toJson(openAIPrompt).toString()\r\n val response = httpClient.post(Constants.API_ENDPOINT_COMPLETIONS) {\r\n headers {\r\n append(HttpHeaders.Authorization, \"Bearer \" + Constants.OPENAI_KEY)\r\n }\r\n contentType(ContentType.Application.Json)\r\n setBody (content)\r\n }\r\n if (response.status == HttpStatusCode.OK) {\r\n val jsonContent = response.bodyAsText()\r\n val choices = Json.parseToJsonElement(jsonContent).jsonObject[\"choices\"]!!.toString()\r\n val result = Json.parseToJsonElement(choices.removeSurrounding(\"[\", \"]\"))\r\n var text = result.jsonObject[\"text\"]!!.toString()\r\n return text\r\n }\r\n \/\/ Other Http status codes\r\n return \"Not OK status: \" + response.status\r\n}<\/pre>\nUI updates<\/h3>\n
createCompletion<\/code> method in MainActivity.kt<\/strong>. \n<\/p>\nTesting the demo<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/04\/word-image-3143-3.png\")
\n<\/p>\nGRAMMARCHECK<\/code> and SHORTEN<\/code> prompts on the source HTML.<\/em>\n<\/p>\nSHORTEN<\/code> prompt is that even though it doesn\u2019t contain an explicit request to fix spelling and grammar, the output does not contain the typos present in the source HTML. In both cases, the HTML formatting and links are preserved. Both prompts also preserve the DisplayFeature<\/strong> and FoldingFeature<\/strong> enum names, even though they are not \u2018correctly spelled\u2019 according to any dictionary.\n<\/p>\nFeedback and resources<\/h2>\n
\n