Update UI to not show blank area, update readme

.pre-commit-config.yaml

@@ -0,0 +1,15 @@
+repos:
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+    -   id: check-yaml
+    -   id: end-of-file-fixer
+    -   id: trailing-whitespace
+-   repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.0.288
+    hooks:
+    -   id: ruff
+-   repo: https://github.com/psf/black
+    rev: 23.9.1
+    hooks:
+    -   id: black

README.md

@@ -1,7 +1,8 @@
 # Build your own ChatGPT app
 
-This repository includes a simple Python Flask app that streams responses from ChatGPT
-to an HTML/JS frontend using [NDJSON](http://ndjson.org/) over a [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
+This repository includes a simple Python [Quart](https://quart.palletsprojects.com/en/latest/)
+app that streams responses from ChatGPT to an HTML/JS frontend using [NDJSON](http://ndjson.org/)
+over a [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
 
 The repository is designed for use with [Docker containers](https://www.docker.com/), both for local development and deployment, and includes infrastructure files for deployment to [Azure Container Apps](https://learn.microsoft.com/azure/container-apps/overview). 🐳
 
@@ -53,7 +54,7 @@ This repo is set up for deployment on Azure Container Apps using the configurati
     ```shell
     azd up
     ```
-    It will prompt you to provide an `azd` environment name (like "flask-app"), select a subscription from your Azure account, and select a [location where OpenAI is available](https://azure.microsoft.com/explore/global-infrastructure/products-by-region/?products=cognitive-services&regions=all) (like "francecentral"). Then it will provision the resources in your account and deploy the latest code. If you get an error or timeout with deployment, changing the location can help, as there may be availability constraints for the OpenAI resource.
+    It will prompt you to provide an `azd` environment name (like "chat-app"), select a subscription from your Azure account, and select a [location where OpenAI is available](https://azure.microsoft.com/explore/global-infrastructure/products-by-region/?products=cognitive-services&regions=all) (like "francecentral"). Then it will provision the resources in your account and deploy the latest code. If you get an error or timeout with deployment, changing the location can help, as there may be availability constraints for the OpenAI resource.
 
 3. When `azd` has finished deploying, you'll see an endpoint URI in the command output. Visit that URI, and you should see the chat app! 🎉
 4. When you've made any changes to the app code, you can just run:

src/flaskapp/templates/index.html

@@ -94,10 +94,14 @@
                 body: JSON.stringify({message: message})
             });
 
-            messageDiv.innerHTML = "";
+
             let answer = "";
             for await (const event of readNDJSONStream(response.body)) {
                 if (event["choices"][0]["delta"]["content"]) {
+                    // Clear out the DIV if its the first answer chunk we've received
+                    if (answer == "") {
+                        messageDiv.innerHTML = "";
+                    }
                     answer += event["choices"][0]["delta"]["content"];
                     messageDiv.innerHTML = converter.makeHtml(answer);
                     messageDiv.scrollIntoView();