{"id":9001,"date":"2024-10-02T10:19:45","date_gmt":"2024-10-02T10:19:45","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=9001"},"modified":"2024-12-09T04:22:24","modified_gmt":"2024-12-09T04:22:24","slug":"ai-powered-health-diagnosis-assistant","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/","title":{"rendered":"How to Build an AI-Powered Health Diagnosis Assistant"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_56_1 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#Setting_up_the_development_environment\" title=\"Setting up the development environment\">Setting up the development environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#Initialize_the_OpenAI_API\" title=\"Initialize the OpenAI API\">Initialize the OpenAI API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#Building_backend_with_Flask\" title=\"Building backend with Flask\">Building backend with Flask<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#Testing_our_app\" title=\"Testing our app\">Testing our app<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#Explore_more_on_Metaschool\" title=\"Explore more on Metaschool\">Explore more on Metaschool<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/metaschool.so\/articles\/ai-powered-health-diagnosis-assistant\/#FAQs\" title=\"FAQs\">FAQs<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Imagine you have an AI assistant that can assist you in providing a diagnosis based on the symptoms without needing to visit a doctor. How cool is having an AI-powered health diagnosis assistant, when you\u2019re feeling under the weather and unsure about visiting the clinic? This AI-powered assistant will take your symptoms and provide you with a recovery plan based on your symptoms. Something that feels like chatting with your doctor but from the comfort of your couch.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExY2p2dm96NGdoajh4amh1YnAwOXN0emF5ZXNkYjUxZW5wa244MnUzYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/A9MftKr3J3lra\/giphy.gif\" alt=\"Doctor checking patient\"\/><\/figure>\n<\/div>\n\n\n<p>Here, we will build an AI-powered health diagnosis system that utilizes OpenAI\u2019s model to process the symptoms and provide a diagnosis based on the symptoms. The goal is to stimulate a dialogue between humans and AI. Users will be able to provide the symptoms, and the AI assistant will provide the diagnosis or can ask follow-up questions. By the end of this article, we\u2019ll have a fully functional app and a deep understanding of how different features have interacted to develop such an app.<\/p>\n\n\n\n<p>Sounds very useful, right? Let\u2019s break down how to build it from scratch step by step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_the_development_environment\"><\/span>Setting up the development environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before we dive deep into the ocean of coding, let&#8217;s first set up an environment required to set up our AI-powered health diagnosis app. We\u2019ll be using Python\u2019s Flask server for the backend and the GPT-3.5-turbo model for generating the health advice.<\/p>\n\n\n\n<p>Before diving into setting up a development environment let&#8217;s discuss some tools and technologies we are going to use in this journey:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML\/CSS\/JS:<\/strong> We\u2019re going to use these tools to develop the front-end side of our application and create the user interface(UI).<\/li>\n\n\n\n<li><strong>OpenAI:<\/strong> It will serve as a brain of our tool. We\u2019ll use its API to diagnose the health based on the provided symptoms.<\/li>\n\n\n\n<li><strong>Flask and Python:<\/strong> We\u2019ll use these to set up the backend of our tool.<\/li>\n<\/ul>\n\n\n\n<p>We have decided to use Python programming language, due to its simplicity and perfection for handling APIs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setup a Flask project<\/h3>\n\n\n\n<p>Have you ever heard of Flask? No, don\u2019t worry. It\u2019s a web framework for Python, we can build simple web apps using it. Let\u2019s first create our project directory to store all of our files. Open the terminal and use the following commands to create and enter into a working directory:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"mkdir Health_diagnosis_assistant\ncd Health_diagnosis_assistant\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">mkdir<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">Health_diagnosis_assistant<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">Health_diagnosis_assistant<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now let\u2019s install Flask and OpenAI, the backbone of our system. Run the following commands inside your terminal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"pip install Flask openai\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">pip<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">install<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">Flask<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">openai<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Install Python<\/h3>\n\n\n\n<p>Firstly, you need to ensure Python is installed on your system. Use the terminal to check if it is already installed by running the following command on your terminal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python --version      \n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">--version<\/span><span style=\"color: #F8F8F2\">      <\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>If you see a version number, congrats, you\u2019re good to go. If it\u2019s not installed, don\u2019t panic, you can grab it from <a href=\"https:\/\/www.python.org\/\" target=\"_blank\" rel=\"noopener\">python.org<\/a> and download it on your system. I\u2019ll wait. Got it? cool.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1554\" height=\"544\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/python-version.gif\" alt=\"Checking Python version\" class=\"wp-image-9002\"\/><\/figure>\n<\/div>\n\n\n<p>Now, let&#8217;s get a few more things sorted, Ensure that you have access to the following items:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Studio or VSCode<\/strong> (or any editor of your choice)<\/li>\n\n\n\n<li><strong>Terminal or Command prompt<\/strong><\/li>\n<\/ul>\n\n\n\n<p>With that, we are all set to install the required Flask and OpenAI libraries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Initialize_the_OpenAI_API\"><\/span>Initialize the OpenAI API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now let&#8217;s bring the brain of our system\u2014The OpenAI API. To use OpenAI\u2019s API, we\u2019ll need to sign up over the <a href=\"https:\/\/auth.openai.com\/authorize?issuer=auth0.openai.com&amp;client_id=DRivsnm2Mu42T3KOpqdtwB3NYviHYzwD&amp;audience=https%3A%2F%2Fapi.openai.com%2Fv1&amp;redirect_uri=https%3A%2F%2Fplatform.openai.com%2Fauth%2Fcallback&amp;device_id=79f0c5cc-7af3-44c6-92af-a27fb1360484&amp;screen_hint=signup&amp;max_age=0&amp;scope=openid+profile+email+offline_access&amp;response_type=code&amp;response_mode=query&amp;state=TFRnMWxoVDNaUzRYTHNjT1lCRG41aXhaSDVVSzRZdkNJLUwyZFZOa3pTbA%3D%3D&amp;nonce=UH5yeXZyZGZpaktGbXVTcEVuR0EubWNuRzQ4WDh3cW4yTUk3ZjNESk9WZQ%3D%3D&amp;code_challenge=dmp6f15OrXFYmTbE8i5zJUHzaMmlp1lVKXSirfX43GU&amp;code_challenge_method=S256&amp;auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjEuMjEuMCJ9&amp;flow=control\" target=\"_blank\" rel=\"noopener\">OpenAl platform<\/a> and create an account. After signing in, move towards the API keys section and generate a new key. Keep this key safe because it&#8217;s your golden ticket to access the GPT models.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1082\" style=\"aspect-ratio: 1920 \/ 1082;\" width=\"1920\" autoplay loop muted src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/signup_openai-ezgif.com-cut-online-video-cutter.com_-1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>If you face any difficulty in during the signup and API key generation follow this <a href=\"https:\/\/metaschool.so\/articles\/openai-api-key\/\">guide to use OpenAI API<\/a> to learn more about OpenAI API\u2019s. We also need to ensure our API is not exposed throughout the creation process of health diagnosis assistant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Building_backend_with_Flask\"><\/span>Building backend with Flask<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that our development environment is set, let\u2019s start building our backend using Flask. The task of our AI-powered health diagnosis assistant is to receive user symptoms, send them to OpenAi for <em>diagnosis<\/em>, and return the response to the user. To accomplish this task, create a new Python file called <code>app.py<\/code>. Paste the following code in this file to set up a basic Flask app:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"from flask import Flask, render_template, request, jsonify\nimport openai\n\napp = Flask(__name__)\nopenai.api_key = &quot;ENTER-YOUR-API-KEY&quot;  # Replace with your actual OpenAI API key\n\n@app.route('\/')\ndef home():\n    return render_template('index.html')\n\n@app.route('\/diagnose', methods=['POST'])\ndef diagnose():\n    try:\n        data = request.get_json()  # Use get_json() to handle JSON request\n        user_input = data.get('message')  # Get the 'message' key safely\n        if not user_input:\n            return jsonify({'error': 'No input provided'}), 400\n\n        # Process the user input and send to OpenAI\n        response = openai.ChatCompletion.create(\n            model=&quot;gpt-3.5-turbo&quot;,\n            messages=[{&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: user_input}]\n        )\n        assistant_message = response['choices'][0]['message']['content']\n        return jsonify({'message': assistant_message})\n\n    except Exception as e:\n        return jsonify({'error': str(e)})\n\nif __name__ == '__main__':\n    app.run(debug=True)\n\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">from<\/span><span style=\"color: #F8F8F2\"> flask <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> Flask, render_template, request, jsonify<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> openai<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">app <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> Flask(__name__)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">openai.api_key <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&quot;ENTER-YOUR-API-KEY&quot;<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># Replace with your actual OpenAI API key<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">@app.route<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;\/&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">home<\/span><span style=\"color: #F8F8F2\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> render_template(<\/span><span style=\"color: #E6DB74\">&#39;index.html&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">@app.route<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;\/diagnose&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FD971F; font-style: italic\">methods<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #E6DB74\">&#39;POST&#39;<\/span><span style=\"color: #F8F8F2\">])<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">diagnose<\/span><span style=\"color: #F8F8F2\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">try<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        data <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> request.get_json()  <\/span><span style=\"color: #88846F\"># Use get_json() to handle JSON request<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        user_input <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> data.get(<\/span><span style=\"color: #E6DB74\">&#39;message&#39;<\/span><span style=\"color: #F8F8F2\">)  <\/span><span style=\"color: #88846F\"># Get the &#39;message&#39; key safely<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">not<\/span><span style=\"color: #F8F8F2\"> user_input:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> jsonify({<\/span><span style=\"color: #E6DB74\">&#39;error&#39;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&#39;No input provided&#39;<\/span><span style=\"color: #F8F8F2\">}), <\/span><span style=\"color: #AE81FF\">400<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #88846F\"># Process the user input and send to OpenAI<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        response <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> openai.ChatCompletion.create(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #FD971F; font-style: italic\">model<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;gpt-3.5-turbo&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #FD971F; font-style: italic\">messages<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">[{<\/span><span style=\"color: #E6DB74\">&quot;role&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&quot;user&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&quot;content&quot;<\/span><span style=\"color: #F8F8F2\">: user_input}]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        assistant_message <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> response[<\/span><span style=\"color: #E6DB74\">&#39;choices&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;message&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;content&#39;<\/span><span style=\"color: #F8F8F2\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> jsonify({<\/span><span style=\"color: #E6DB74\">&#39;message&#39;<\/span><span style=\"color: #F8F8F2\">: assistant_message})<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">except<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">Exception<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">as<\/span><span style=\"color: #F8F8F2\"> e:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> jsonify({<\/span><span style=\"color: #E6DB74\">&#39;error&#39;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF; font-style: italic\">str<\/span><span style=\"color: #F8F8F2\">(e)})<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> __name__ <\/span><span style=\"color: #F92672\">==<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;__main__&#39;<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    app.run(<\/span><span style=\"color: #FD971F; font-style: italic\">debug<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #AE81FF\">True<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The above code initializes Flask, a lightweight web server. it routes the root URL(\u2019\/\u2019) to the <code>index.html<\/code> to serve the front end of our app. When a user clicks on the \u201csubmit\u201d button after entering the symptoms, the <code>\/diagnose<\/code> route is called which sends the symptoms to OpenAI and returns the response to the user. This setup the complete backend logic to handle the complete backend logic of our health diagnosis assistant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Designing our friendly frontend<\/h3>\n\n\n\n<p>Now, it&#8217;s time to build our user interface for health diagnosis assistants. It&#8217;s our goal to make it simple yet intuitive for our users to share symptoms and receive feedback. Let&#8217;s start by building our structure. Create a folder in the project directory named <code>templates<\/code> and create a file <code>index.html<\/code> using the following:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"mkdir templates\n# For MAC users\ntouch templates\/index.html\n\n# For windows users\ncd templates\necho. &gt; index.html  # Using command prompt\nNew-Item -Path index.html -ItemType File # Using PowerShell \n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">mkdir<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For MAC users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates\/index.html<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For windows users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">echo<\/span><span style=\"color: #F8F8F2\">. <\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">index.html<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># Using command prompt<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">New-Item<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-Path<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">index.html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-ItemType<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">File<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #88846F\"># Using PowerShell <\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The folder is set up and the file has also been created. Let\u2019s start creating our frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Layout<\/h3>\n\n\n\n<p>Now paste the following code inside the <code>index.html<\/code> file.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<!DOCTYPE html&gt;\n<html lang=&quot;en&quot;&gt;\n<head&gt;\n    <meta charset=&quot;UTF-8&quot;&gt;\n    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    <link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='style.css') }}&quot;&gt;\n    <title&gt;Health Diagnosis Assistant<\/title&gt;\n<\/head&gt;\n<body&gt;\n    <div class=&quot;container&quot;&gt;\n        <h1&gt;Health Diagnosis Assistant<\/h1&gt;\n        <div id=&quot;chatbox&quot; class=&quot;chatbox&quot;&gt;<\/div&gt;\n        <form id=&quot;messageForm&quot;&gt;\n            <input type=&quot;text&quot; id=&quot;userInput&quot; placeholder=&quot;Enter your symptoms...&quot; required&gt;\n            <button type=&quot;submit&quot;&gt;Send<\/button&gt;\n        <\/form&gt;\n    <\/div&gt;\n    <script src=&quot;{{ url_for('static', filename='script.js') }}&quot;&gt;<\/script&gt;\n<\/body&gt;\n<\/html&gt;\n\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!<\/span><span style=\"color: #F92672\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">lang<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;en&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">charset<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">content<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">link<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">rel<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;stylesheet&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">href<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;{{ url_for(&#39;static&#39;, filename=&#39;style.css&#39;) }}&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;Health Diagnosis Assistant&lt;\/<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;container&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\">&gt;Health Diagnosis Assistant&lt;\/<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;chatbox&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;chatbox&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">form<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;messageForm&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            &lt;<\/span><span style=\"color: #F92672\">input<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;text&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;userInput&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">placeholder<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;Enter your symptoms...&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">required<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            &lt;<\/span><span style=\"color: #F92672\">button<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;submit&quot;<\/span><span style=\"color: #F8F8F2\">&gt;Send&lt;\/<\/span><span style=\"color: #F92672\">button<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;\/<\/span><span style=\"color: #F92672\">form<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">script<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">src<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;{{ url_for(&#39;static&#39;, filename=&#39;script.js&#39;) }}&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">script<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The above code provides a simple chatbot interface for interacting with the AI. Let\u2019s try to add some life to it by adding colors in the next section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS styling<\/h3>\n\n\n\n<p>Let\u2019s style our boring health diagnosis assistant webpage by playing with some colors around it. First, let&#8217;s create a folder in the project directory named as <code>static<\/code>, and inside <code>static<\/code> folder create a file called <code>styles.css<\/code> . We can perform this action using the following code:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"mkdir static\n# For MAC users\ntouch static\/style.css\n\n# For windows users\ncd static\necho. &gt; style.css  # Using command prompt\nNew-Item -Path style.css -ItemType File # Using PowerShell \n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">mkdir<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">static<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For MAC users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">static\/style.css<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For windows users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">static<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">echo<\/span><span style=\"color: #F8F8F2\">. <\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">style.css<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># Using command prompt<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">New-Item<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-Path<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">style.css<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-ItemType<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">File<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #88846F\"># Using PowerShell <\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Once <code>style.css<\/code> file is created paste the following code inside it:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"body {\n    font-family: Arial, sans-serif;\n    background-color: #eae7f0; \/* Light background for contrast *\/\n    color: #333;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    margin: 0;\n}\n\n#chatContainer {\n    width: 80%;\n    max-width: 600px;\n    background-color: #f9f7fc; \/* Light purple for chat container *\/\n    border: 1px solid #ddd;\n    border-radius: 10px;\n    padding: 20px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    overflow-y: auto;\n    max-height: 70vh; \/* Limit height for scroll *\/\n}\n\ninput[type=&quot;text&quot;] {\n    width: 80%;\n    max-width: 600px;\n    padding: 10px;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    margin-top: 10px;\n}\n\nbutton {\n    padding: 10px 20px;\n    margin-left: 5px;\n    border: none;\n    border-radius: 5px;\n    background-color: #5e54f2; \/* Dark purple button *\/\n    color: white;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #4c43d1; \/* Darker purple on hover *\/\n}\n\ndiv.message {\n    margin: 5px 0;\n}\n\n.message.user {\n    text-align: right; \/* Align user messages to the right *\/\n}\n\n.message.assistant {\n    text-align: left; \/* Align assistant messages to the left *\/\n    color: #5e54f2; \/* Color for assistant messages *\/\n    font-weight: bold; \/* Make assistant messages bold *\/\n}\n\n#inputContainer {\n    display: flex;\n    justify-content: center;\n    margin-top: 10px;\n}\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">font-family<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">Arial<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF\">sans-serif<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#eae7f0<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Light background for contrast *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#333<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">flex-direction<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">column<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">align-items<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">justify-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">margin<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">#chatContainer<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">80<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">max-width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">600<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#f9f7fc<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Light purple for chat container *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">solid<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#ddd<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">20<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">box-shadow<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">rgba<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">0.1<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">overflow-y<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">auto<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">max-height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Limit height for scroll *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">input<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #A6E22E\">type<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;text&quot;<\/span><span style=\"color: #F8F8F2\">] {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">80<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">max-width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">600<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">solid<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#ccc<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">margin-top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">button<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">20<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">margin-left<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">none<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#5e54f2<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Dark purple button *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">white<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">cursor<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">pointer<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">button<\/span><span style=\"color: #A6E22E\">:hover<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#4c43d1<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Darker purple on hover *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">div<\/span><span style=\"color: #A6E22E\">.message<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">margin<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.message.user<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">right<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Align user messages to the right *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.message.assistant<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">left<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Align assistant messages to the left *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#5e54f2<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Color for assistant messages *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">font-weight<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">bold<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #88846F\">\/* Make assistant messages bold *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">#inputContainer<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">justify-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">margin-top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This code provides a modern and clean look. We have used containers to center align the overall design and use some padding to ensure our interface is user-friendly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting up our Javascript<\/h3>\n\n\n\n<p>To ensure everything is functional, we will connect the front end with the back end using JavaScript. The JavaScript file will receive the symptoms, forward them to Flask, and then display the results. Let&#8217;s create a file called <code>script.js<\/code> using the following:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"# For MAC users\ntouch static\/script.js\n\n# For windows users\ncd static\necho. &gt; script.js  # Using command prompt\nNew-Item -Path script.js -ItemType File # Using PowerShell \n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88846F\"># For MAC users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">static\/script.js<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># For windows users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">static<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">echo<\/span><span style=\"color: #F8F8F2\">. <\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">script.js<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># Using command prompt<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">New-Item<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-Path<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">script.js<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">-ItemType<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">File<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #88846F\"># Using PowerShell <\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Once <code>script.js<\/code> file is created paste the following code inside it:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"document.addEventListener('DOMContentLoaded', function () {\n    const form = document.getElementById('messageForm');\n    const input = document.getElementById('userInput');\n    const chatbox = document.getElementById('chatbox');\n\n    form.addEventListener('submit', function (e) {\n        e.preventDefault(); \n\n        const message = input.value.trim();\n        if (message === '') return;\n\n        chatbox.innerHTML += `<div class=&quot;message user-message&quot;&gt;${message}<\/div&gt;`;\n        input.value = '';\n\n        fetch('\/diagnose', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json'\n            },\n            body: JSON.stringify({ message })\n        })\n        .then(response =&gt; {\n            if (!response.ok) {\n                throw new Error('Network response was not ok');\n            }\n            return response.json();\n        })\n        .then(data =&gt; {\n            if (data.error) {\n                chatbox.innerHTML += `<div class=&quot;message assistant-message&quot;&gt;Error: ${data.error}<\/div&gt;`;\n            } else {\n                chatbox.innerHTML += `<div class=&quot;message assistant-message&quot;&gt;${data.message}<\/div&gt;`;\n            }\n        })\n        .catch(error =&gt; {\n            chatbox.innerHTML += `<div class=&quot;message assistant-message&quot;&gt;Error: Unable to communicate with the server.<\/div&gt;`;\n            console.error('Error:', error);\n        });\n    });\n});\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">document.<\/span><span style=\"color: #A6E22E\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;DOMContentLoaded&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> form <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">getElementById<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;messageForm&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> input <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">getElementById<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;userInput&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> chatbox <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">getElementById<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;chatbox&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    form.<\/span><span style=\"color: #A6E22E\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;submit&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FD971F; font-style: italic\">e<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        e.<\/span><span style=\"color: #A6E22E\">preventDefault<\/span><span style=\"color: #F8F8F2\">(); <\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> message <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> input.value.<\/span><span style=\"color: #A6E22E\">trim<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (message <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;&#39;<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        chatbox.innerHTML <\/span><span style=\"color: #F92672\">+=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">`&lt;div class=&quot;message user-message&quot;&gt;<\/span><span style=\"color: #F92672\">${<\/span><span style=\"color: #F8F8F2\">message<\/span><span style=\"color: #F92672\">}<\/span><span style=\"color: #E6DB74\">&lt;\/div&gt;`<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        input.value <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">fetch<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;\/diagnose&#39;<\/span><span style=\"color: #F8F8F2\">, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            method: <\/span><span style=\"color: #E6DB74\">&#39;POST&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            headers: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                <\/span><span style=\"color: #E6DB74\">&#39;Content-Type&#39;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&#39;application\/json&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            body: JSON.<\/span><span style=\"color: #A6E22E\">stringify<\/span><span style=\"color: #F8F8F2\">({ message })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .<\/span><span style=\"color: #A6E22E\">then<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">response<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #F92672\">!<\/span><span style=\"color: #F8F8F2\">response.ok) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                <\/span><span style=\"color: #F92672\">throw<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">new<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">Error<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;Network response was not ok&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> response.<\/span><span style=\"color: #A6E22E\">json<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .<\/span><span style=\"color: #A6E22E\">then<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">data<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (data.error) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                chatbox.innerHTML <\/span><span style=\"color: #F92672\">+=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">`&lt;div class=&quot;message assistant-message&quot;&gt;Error: <\/span><span style=\"color: #F92672\">${<\/span><span style=\"color: #F8F8F2\">data.error<\/span><span style=\"color: #F92672\">}<\/span><span style=\"color: #E6DB74\">&lt;\/div&gt;`<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            } <\/span><span style=\"color: #F92672\">else<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                chatbox.innerHTML <\/span><span style=\"color: #F92672\">+=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">`&lt;div class=&quot;message assistant-message&quot;&gt;<\/span><span style=\"color: #F92672\">${<\/span><span style=\"color: #F8F8F2\">data.message<\/span><span style=\"color: #F92672\">}<\/span><span style=\"color: #E6DB74\">&lt;\/div&gt;`<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .<\/span><span style=\"color: #A6E22E\">catch<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">error<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            chatbox.innerHTML <\/span><span style=\"color: #F92672\">+=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">`&lt;div class=&quot;message assistant-message&quot;&gt;Error: Unable to communicate with the server.&lt;\/div&gt;`<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            console.<\/span><span style=\"color: #A6E22E\">error<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;Error:&#39;<\/span><span style=\"color: #F8F8F2\">, error);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The above code handles the form submission, it prevents the page from reloading and sends the user&#8217;s input to the Flask\u2019s backend. Javascript ensures the interaction is conversational and seamless to ensure a smooth user experience. Now, our app is ready to be tested with real-time scenarios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testing_our_app\"><\/span>Testing our app<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now it&#8217;s time to run our application and see our AI-powered health diagnosis app in action.<\/p>\n\n\n\n<p>Start the Flask development server by running the following command:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python app.py\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">app.py<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>It will start the server and launch the app at <a href=\"http:\/\/127.0.0.1:5000\/\" target=\"_blank\"><code>http:\/\/127.0.0.1:5000\/<\/code><\/a>. Open this link in the browser where you will be able to see the interface of our tool. Enter all the symptoms in the text box given and click <strong>Send<\/strong> to see your diagnosis.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1126\" style=\"aspect-ratio: 1920 \/ 1126;\" width=\"1920\" autoplay loop muted src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/system-ezgif.com-video-to-webp-converter.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>&lt;aside&gt; \ud83d\uddd2\ufe0f<\/p>\n\n\n\n<p><strong>Note:<\/strong> If you run into any bugs during production, don\u2019t panic! Debugging is a part of the development journey, and it will make you better as a builder.\ud83d\udcaa<\/p>\n\n\n\n<p>&lt;\/aside&gt;<\/p>\n\n\n\n<p>Congratulations! You have successfully built an AI-powered Health Diagnosis Assistant using OpenAI\u2019s API, Flask, HTML, and JavaScript. The assistant can take symptoms from the users, process them using AI, and provide a possible diagnosis in a user-friendly format.<\/p>\n\n\n\n<p>This article opens the door to countless possibilities in healthcare applications. From personalized care to improved accessibility, this app is a step toward the future of AI-driven health diagnosis assistants. Feel free to experiment and enhance this basic healthcare assistant we have set up. Who knows, one day it might save a life.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explore_more_on_Metaschool\"><\/span>Explore more on Metaschool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you found building an AI-powered code review assistant helpful, you might be interested in exploring more hands-on projects to expand your skills. Check out our other resources on <a href=\"https:\/\/metaschool.so\/courses\/\">Metaschool<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/metaschool.so\/articles\/build-a-code-review-assistant-using-ai\/\"><strong>How to Build a Code Review Assistant Using AI:<\/strong><\/a> We have an AI-based tool that does the heavy lifting\u2014an assistant that reviews our code in seconds and suggests improvements based on industry standards.<\/li>\n\n\n\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-ai-dating-coach-app\"><strong>Build an AI Dating Coach Using NextJS and OpenAI<\/strong>:<\/a> Ever thought about creating an app that provides personalized dating advice? This course guides you through building a dating coach app that uses OpenAI&#8217;s API and NextJS to deliver insightful advice to users.<\/li>\n\n\n\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-a-yebot-with-openai-api\"><strong>Build a YeBot with OpenAI API<\/strong><\/a>: Learn how to create a sophisticated chatbot using OpenAI\u2019s powerful API, perfect for enhancing your understanding of AI-driven applications.<\/li>\n<\/ul>\n\n\n\n<p>Explore these courses and more to continue your journey in AI on the Metaschool platform<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1727785111913\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How can I get started using the assistant?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>After setting up the complete health diagnosis assistant, simply enter your symptoms in the provided input field, and the assistant will generate a response based on the information provided.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727785151155\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is it possible to deploy the application on a different platform?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Absolutely! You can deploy the health diagnosis assistant application on various platforms such as AWS, Google Cloud, or Azure, depending on your requirements and familiarity with those services.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727785217696\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How can I improve the user interface of the application?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can enhance the user interface of health diagnos assistant by using modern front-end frameworks like React or Vue.js, and by adding responsive design techniques to improve usability across devices.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":20,"featured_media":11102,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[344,342],"tags":[115,369,365],"class_list":["post-9001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","category-software-development","tag-ai","tag-health-diagnosis-system","tag-openai"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/comments?post=9001"}],"version-history":[{"count":5,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9001\/revisions"}],"predecessor-version":[{"id":11096,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9001\/revisions\/11096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11102"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=9001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=9001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=9001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}