{"id":9027,"date":"2024-10-02T09:21:15","date_gmt":"2024-10-02T09:21:15","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=9027"},"modified":"2024-12-09T04:24:14","modified_gmt":"2024-12-09T04:24:14","slug":"build-a-sentiment-analysis-tool","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/","title":{"rendered":"How to Build a Sentiment Analysis Tool Using AI"},"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\/build-a-sentiment-analysis-tool\/#What_is_sentiment_analysis\" title=\"What is sentiment analysis?\">What is sentiment analysis?<\/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\/build-a-sentiment-analysis-tool\/#Setting_up_the_development_environment\" title=\"Setting up the development environment\">Setting up the development environment<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Install_Python\" title=\"Install Python\">Install Python<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Setup_a_Flask_project\" title=\"Setup a Flask project\">Setup a Flask project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Front_end_essentials\" title=\"Front end essentials\">Front end essentials<\/a><\/li><\/ul><\/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\/build-a-sentiment-analysis-tool\/#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-7\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Develop_the_frontend\" title=\"Develop the frontend\">Develop the frontend<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#HTML_Layout\" title=\"HTML Layout\">HTML Layout<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Running_our_application\" title=\"Running our application\">Running our application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#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-11\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#FAQs\" title=\"FAQs\">FAQs<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#What_tools_and_technologies_are_required_to_build_a_sentiment_analysis_tool\" title=\"What tools and technologies are required to build a sentiment analysis tool?\">What tools and technologies are required to build a sentiment analysis tool?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#Can_I_customize_the_sentiment_analysis_model_to_handle_specific_types_of_data\" title=\"Can I customize the sentiment analysis model to handle specific types of data?\">Can I customize the sentiment analysis model to handle specific types of data?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/metaschool.so\/articles\/build-a-sentiment-analysis-tool\/#What_are_the_limitations_of_AI-based_sentiment_analysis\" title=\"What are the limitations of AI-based sentiment analysis?\">What are the limitations of AI-based sentiment analysis?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p>Customer feedback is critical in every business, whether you\u2019re running an online store or a physical cafe. Feedback sets a direction for you to align your future progress. It\u2019s like a goldmine that lets you understand their likes, dislikes, and areas of improvement. But when you\u2019re dealing with hundreds of comments, reviews, and feedback, it becomes impossible to sort them manually and draw some conclusions from them. This is where a need to build a sentiment analysis tool came into existence. But what exactly is this tool?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-1024x576.jpg\" alt=\"Sentiment analysis\" class=\"wp-image-9029\" srcset=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-1024x576.jpg 1024w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-300x169.jpg 300w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-150x84.jpg 150w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-768x432.jpg 768w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-1536x864.jpg 1536w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis-1320x743.jpg 1320w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/sentiment-analysis.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Building a <a href=\"https:\/\/metaschool.so\/articles\/nltk-sentiment-analysis\/\">sentiment analysis<\/a> tool is a perfect solution to the never-ending task of manually sorting hundreds of comments and trying the understand the sentiment of your users. Imagine you have a tool that analyzes all of your comments, understands the sentiment of each comment, and draws some conclusions from it. Well, it&#8217;s not a dream, it&#8217;s a reality that we\u2019re going to build by the end of this article. Whether you\u2019re trying to roll out a new feature, launch a new product, or just want to monitor your social media, sentiment analysis is a perfect choice to get some insight. You might be thinking \u201cBut how does it know about the sentiment of the user?\u201d.<\/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.Y2lkPTc5MGI3NjExNXN0OTdubHE3aWo3OWVhNnA2dXJ4c2EzZzl1aXVzdWt1eWpvYWp3MSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/UThpUbZef3ulWxgvfn\/giphy.gif\" alt=\"Confused gif\"\/><\/figure>\n<\/div>\n\n\n<p>Let&#8217;s dive into it and build it step by step!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_sentiment_analysis\"><\/span>What is sentiment analysis?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sentiment analysis is a technique used to determine the emotional tone of a given text\u2014whether it\u2019s negative, positive or it\u2019s neutral. Imagine you\u2019re a product owner and your team just launched a new feature, you want to understand how the users feel about this feature. You can use sentiment analysis to understand the feedback instead of manually going through hundreds of comments.<\/p>\n\n\n\n<p>Now, let\u2019s start building a sentiment analysis tool that is going to make your life much simpler!<\/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 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 analyze the sentiment of provided comments.<\/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\n\n\n<li><strong>Chart.js:<\/strong> To visualize our sentiment analysis results visually.<\/li>\n<\/ul>\n\n\n\n<p>We have decided to use Python programming language, due to its simplicity for handling APIs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Install_Python\"><\/span>Install Python<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, 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 just pops up, 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\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1442\" height=\"544\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/python-version-1.gif\" alt=\"Python version\" class=\"wp-image-9031\"\/><\/figure>\n\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<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setup_a_Flask_project\"><\/span>Setup a Flask project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Have you ever heard of Flask? No? Don\u2019t worry, let me explain. Flask is a web framework for Python, where we can build simple web applications. Imagine you\u2019re building a resort. Python is your toolbox containing all the fancy tools, but you need a structure to build on top of it, right? That\u2019s where the magic of Flask comes in, its like a structure that helps us to build a simple house, in our case a small app quickly. Basically Flask is a web framework that supports us when we just want to get things done without a headache of external dependencies. Let\u2019s gather all our required tools by installing the Python and Flask.<\/p>\n\n\n\n<p>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 sentiment_analysis\ncd sentiment_analysis\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\">sentiment_analysis<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">sentiment_analysis<\/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\"><span class=\"ez-toc-section\" id=\"Front_end_essentials\"><\/span>Front end essentials<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We\u2019ll be using HTML to develop the structure of our tool\u2019s frontend, CSS for staying the frontend, and Javascript to add some interactivity. I\u2019ll walk you through all of it later in this article.<\/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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Develop_the_frontend\"><\/span>Develop the frontend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s start our frontend development journey with a webpage that allows users to input their comments and get feedback for the sentiments. 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>As the folder is set up and the file is also created let\u2019s start creating our frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML_Layout\"><\/span>HTML Layout<span class=\"ez-toc-section-end\"><\/span><\/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    <title&gt;Sentiment Analysis Tool<\/title&gt;\n    <link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('static', filename='styles.css') }}&quot;&gt;\n    <script src=&quot;<https:\/\/cdn.jsdelivr.net\/npm\/chart.js&gt;&quot;&gt;<\/script&gt;\n<\/head&gt;\n<body&gt;\n    <div class=&quot;container&quot;&gt;\n        <h1&gt;Sentiment Analysis Tool<\/h1&gt;\n        <textarea id=&quot;textInput&quot; placeholder=&quot;Enter comments separated by new lines...&quot; required&gt;<\/textarea&gt;\n        <button id=&quot;analyzeButton&quot;&gt;Analyze Sentiment<\/button&gt;\n        <h2 id=&quot;result&quot;&gt;<\/h2&gt;\n        <canvas id=&quot;sentimentChart&quot; width=&quot;400&quot; height=&quot;200&quot;&gt;<\/canvas&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\">title<\/span><span style=\"color: #F8F8F2\">&gt;Sentiment Analysis Tool&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\">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;styles.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\">script<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">src<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;&lt;https:\/\/cdn.jsdelivr.net\/npm\/chart.js&gt;&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\">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;Sentiment Analysis Tool&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\">textarea<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;textInput&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">placeholder<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;Enter comments separated by new lines...&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">required<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">textarea<\/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\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;analyzeButton&quot;<\/span><span style=\"color: #F8F8F2\">&gt;Analyze Sentiment&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\">h2<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;result&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">canvas<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">id<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;sentimentChart&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">width<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;400&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">height<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;200&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">canvas<\/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>This code acts as a skeleton for our sentiment analysis tool. It provides us with an area where users will enter the comments, a button to trigger sentiment analysis, and also a section to display the results. 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\"><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Styling<\/h3>\n\n\n\n<p>Let\u2019s style our boring 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 it create a file called <code>styles.css<\/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 static\n# For MAC users\ntouch static\/styles.css\n\n# For windows users\ncd static\necho. &gt; styles.css  # Using command prompt\nNew-Item -Path styles.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\/styles.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\">styles.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\">styles.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>styles.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=\"\/* Basic reset *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Arial', sans-serif;\n    background-color: #f0f0f0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n}\n\n.container {\n    background-color: white;\n    padding: 20px;\n    width: 90%;\n    max-width: 600px;\n    text-align: center;\n    border-radius: 8px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\ntextarea {\n    width: 100%;\n    height: 150px;\n    margin-bottom: 15px;\n    padding: 10px;\n    font-size: 16px;\n}\n\nbutton {\n    background-color: #4CAF50;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #45a049;\n}\n\n#result {\n    margin-top: 20px;\n    font-size: 18px;\n}\n\ncanvas {\n    margin-top: 20px;\n    width: 100%;\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: #88846F\">\/* Basic reset *\/<\/span><\/span>\n<span class=\"line\"><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\">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 style=\"color: #66D9EF; font-style: italic\">padding<\/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 style=\"color: #66D9EF; font-style: italic\">box-sizing<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">border-box<\/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\">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: #E6DB74\">&#39;Arial&#39;<\/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\">#f0f0f0<\/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\">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\">min-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>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.container<\/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: #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\">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\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">90<\/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\">text-align<\/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\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">8<\/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>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">textarea<\/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\">100<\/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\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">150<\/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-bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">15<\/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\">font-size<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">16<\/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\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#4CAF50<\/span><span style=\"color: #F8F8F2\">;<\/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\">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\">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\">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\">#45a049<\/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\">#result<\/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\">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\">font-size<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">18<\/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\">canvas<\/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\">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\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/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><\/code><\/pre><\/div>\n\n\n\n<p>This code provides a new 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\">The Javascript<\/h3>\n\n\n\n<p>With that, now it\u2019s time to add some connections that allow our front end to connect with the backend, right? That\u2019s where <code>script.js<\/code> comes into play. The javascript receives the comments, forwards them to Flask, and then displays 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.getElementById('analyzeButton').addEventListener('click', function() {\n    const textInput = document.getElementById('textInput').value;\n    const comments = textInput.split('\\\\n').filter(comment =&gt; comment.trim() !== '');\n\n    fetch('\/analyze', {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application\/json'\n        },\n        body: JSON.stringify({ comments: comments })\n    })\n    .then(response =&gt; response.json())\n    .then(data =&gt; {\n        const resultElement = document.getElementById('result');\n        const chartData = { positive: 0, negative: 0, neutral: 0 };\n\n        \/\/ Process and display the results\n        resultElement.innerHTML = ''; \/\/ Clear previous results\n        data.forEach(item =&gt; {\n            resultElement.innerHTML += `<p&gt;${item.comment} - ${item.sentiment}<\/p&gt;`;\n            \/\/ Count sentiments for the chart\n            if (item.sentiment.includes(&quot;positive&quot;)) {\n                chartData.positive++;\n            } else if (item.sentiment.includes(&quot;negative&quot;)) {\n                chartData.negative++;\n            } else {\n                chartData.neutral++;\n            }\n        });\n\n        \/\/ Update the chart (if using Chart.js)\n        updateChart(chartData);\n    })\n    .catch(error =&gt; console.error('Error:', error));\n});\n\nfunction updateChart(data) {\n    const ctx = document.getElementById('sentimentChart').getContext('2d');\n    const chart = new Chart(ctx, {\n        type: 'bar',\n        data: {\n            labels: ['Positive', 'Negative', 'Neutral'],\n            datasets: [{\n                label: 'Sentiment Count',\n                data: [data.positive, data.negative, data.neutral],\n                backgroundColor: ['#4CAF50', '#F44336', '#FFEB3B']\n            }]\n        },\n        options: {\n            scales: {\n                y: {\n                    beginAtZero: true\n                }\n            }\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\">getElementById<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;analyzeButton&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;click&#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\"> textInput <\/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;textInput&#39;<\/span><span style=\"color: #F8F8F2\">).value;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> comments <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> textInput.<\/span><span style=\"color: #A6E22E\">split<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;<\/span><span style=\"color: #AE81FF\">\\\\<\/span><span style=\"color: #E6DB74\">n&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">filter<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">comment<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">=&gt;<\/span><span style=\"color: #F8F8F2\"> comment.<\/span><span style=\"color: #A6E22E\">trim<\/span><span style=\"color: #F8F8F2\">() <\/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;\/analyze&#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\">({ comments: comments })<\/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\"> response.<\/span><span style=\"color: #A6E22E\">json<\/span><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: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> resultElement <\/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;result&#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\"> chartData <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> { positive: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, negative: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, neutral: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #88846F\">\/\/ Process and display the results<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        resultElement.innerHTML <\/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: #88846F\">\/\/ Clear previous results<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        data.<\/span><span style=\"color: #A6E22E\">forEach<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">item<\/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\">            resultElement.innerHTML <\/span><span style=\"color: #F92672\">+=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">`&lt;p&gt;<\/span><span style=\"color: #F92672\">${<\/span><span style=\"color: #F8F8F2\">item.comment<\/span><span style=\"color: #F92672\">}<\/span><span style=\"color: #E6DB74\"> - <\/span><span style=\"color: #F92672\">${<\/span><span style=\"color: #F8F8F2\">item.sentiment<\/span><span style=\"color: #F92672\">}<\/span><span style=\"color: #E6DB74\">&lt;\/p&gt;`<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #88846F\">\/\/ Count sentiments for the chart<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (item.sentiment.<\/span><span style=\"color: #A6E22E\">includes<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&quot;positive&quot;<\/span><span style=\"color: #F8F8F2\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                chartData.positive<\/span><span style=\"color: #F92672\">++<\/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 style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (item.sentiment.<\/span><span style=\"color: #A6E22E\">includes<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&quot;negative&quot;<\/span><span style=\"color: #F8F8F2\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                chartData.negative<\/span><span style=\"color: #F92672\">++<\/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\">                chartData.neutral<\/span><span style=\"color: #F92672\">++<\/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>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #88846F\">\/\/ Update the chart (if using Chart.js)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">updateChart<\/span><span style=\"color: #F8F8F2\">(chartData);<\/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\"> 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>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">updateChart<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">data<\/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\"> ctx <\/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;sentimentChart&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">getContext<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;2d&#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\"> chart <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">new<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">Chart<\/span><span style=\"color: #F8F8F2\">(ctx, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        type: <\/span><span style=\"color: #E6DB74\">&#39;bar&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        data: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            labels: [<\/span><span style=\"color: #E6DB74\">&#39;Positive&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;Negative&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;Neutral&#39;<\/span><span style=\"color: #F8F8F2\">],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            datasets: [{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                label: <\/span><span style=\"color: #E6DB74\">&#39;Sentiment Count&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                data: [data.positive, data.negative, data.neutral],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                backgroundColor: [<\/span><span style=\"color: #E6DB74\">&#39;#4CAF50&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;#F44336&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;#FFEB3B&#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>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        options: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            scales: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                y: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">                    beginAtZero: <\/span><span style=\"color: #AE81FF\">true<\/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 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 javascript file will collect all the comments and with the click of a button, it will send it to the flask backend and display the sentiment results over the screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creation of Backend<\/h2>\n\n\n\n<p>Alright, let&#8217;s get into setting up the fun part, the backend! This is where the actual magic of sentiment analysis happens. We\u2019ll utilize Flask to create a backend server and handle the post requests from the front end. Create an <a href=\"http:\/\/app.py\" target=\"_blank\" rel=\"noopener\"><code>app.py<\/code><\/a> file in the project directory as follows:<\/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 app.py\n\n# For windows users\necho. &gt; app.py  # Using command prompt\nNew-Item -Path app.py -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\">app.py<\/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\">echo<\/span><span style=\"color: #F8F8F2\">. <\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">app.py<\/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\">app.py<\/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>app.py<\/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=\"from flask import Flask, request, jsonify, render_template\nimport openai\n\napp = Flask(__name__)\n\n# Set your OpenAI API key\nopenai.api_key = 'Enter-your-API-key here'\n\n@app.route('\/')\ndef home():\n    return render_template('index.html')\n\n@app.route('\/analyze', methods=['POST'])\ndef analyze_sentiment():\n    data = request.json\n    comments = data.get('comments')\n    \n    results = []\n    for text in comments:\n        response = openai.ChatCompletion.create(\n            model=&quot;gpt-3.5-turbo&quot;,\n            messages=[{&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: f&quot;Analyze the sentiment of this text: '{text}'&quot;}]\n        )\n        sentiment = response.choices[0].message['content']\n        results.append({'comment': text, 'sentiment': sentiment})\n    \n    return jsonify(results)\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, request, jsonify, render_template<\/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>\n<span class=\"line\"><span style=\"color: #88846F\"># Set your OpenAI API key<\/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\">&#39;Enter-your-API-key here&#39;<\/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;\/analyze&#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\">analyze_sentiment<\/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.json<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    comments <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> data.get(<\/span><span style=\"color: #E6DB74\">&#39;comments&#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\">    results <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> []<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">for<\/span><span style=\"color: #F8F8F2\"> text <\/span><span style=\"color: #F92672\">in<\/span><span style=\"color: #F8F8F2\"> comments:<\/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\">: <\/span><span style=\"color: #66D9EF; font-style: italic\">f<\/span><span style=\"color: #E6DB74\">&quot;Analyze the sentiment of this text: &#39;<\/span><span style=\"color: #AE81FF\">{<\/span><span style=\"color: #F8F8F2\">text<\/span><span style=\"color: #AE81FF\">}<\/span><span style=\"color: #E6DB74\">&#39;&quot;<\/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\">        sentiment <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> response.choices[<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">].message[<\/span><span style=\"color: #E6DB74\">&#39;content&#39;<\/span><span style=\"color: #F8F8F2\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        results.append({<\/span><span style=\"color: #E6DB74\">&#39;comment&#39;<\/span><span style=\"color: #F8F8F2\">: text, <\/span><span style=\"color: #E6DB74\">&#39;sentiment&#39;<\/span><span style=\"color: #F8F8F2\">: sentiment})<\/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\"> jsonify(results)<\/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>In the above code, the Flask server serves the HTML file and uses OpenAI API to process each comment. The OpenAI\u2019s model analyzes the sentiment and returns its analysis in simple terms as positive, negative, or neutral.<\/p>\n\n\n\n<p>Now that we\u2019ve set up the front end and back end of the sentiment analysis tool, it\u2019s time to test it out by running our applications in the upcoming section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Running_our_application\"><\/span>Running our application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now it&#8217;s time to run our application and utilize our sentiment analysis tool in action.<\/p>\n\n\n\n<p>Start our 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>. You\u2019ll see the interface of our sentiment analysis tool. Enter all the comments and analysis will be performed in no time, thanks to the power of OpenAI!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1262\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/10\/application.gif\" alt=\"Sentiment analysis application\" class=\"wp-image-9033\"\/><\/figure>\n\n\n\n<p>Not only do we get instant feedback, but we also get a chart visualizing how many comments fall under each category. Pretty neat, right?<\/p>\n\n\n\n<p>Congratulations! You have just built a sentiment analysis tool. Feel free to experiment with it or add more functionality according to your specific requirements. You can use OpenAI to analyze comments in multiple languages or provide a dashboard to show different trends over time. Building this sentiment analysis tool is a landmark, isn\u2019t it?<\/p>\n\n\n\n<p>What\u2019s next on your learning journey? Are you going to expand this tool or planning to try something new, keep on experimenting as every project helps you to grow as a builder!<\/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 courses 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\/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\n\n\n<li><a href=\"https:\/\/metaschool.so\/courses\/build-a-code-translator-using-nextjs-and-openai-api\"><strong>Build a Code Translator Using NextJS and OpenAI API<\/strong><\/a>: Dive into building a code translation tool using NextJS and OpenAI, a great way to apply your knowledge practically and innovatively.<\/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-1727863102224\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_tools_and_technologies_are_required_to_build_a_sentiment_analysis_tool\"><\/span>What tools and technologies are required to build a sentiment analysis tool?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To build a sentiment analysis tool, you&#8217;ll need a combination of backend and frontend technologies. The core requirements include:<br \/><strong>Backend<\/strong>: A web framework like Flask (Python) to handle API requests.<br \/><strong>API<\/strong>: OpenAI\u2019s GPT model for sentiment analysis.<br \/><strong>Frontend<\/strong>: HTML, CSS, JavaScript, and libraries like Chart.js for data visualization.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727863115115\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_customize_the_sentiment_analysis_model_to_handle_specific_types_of_data\"><\/span>Can I customize the sentiment analysis model to handle specific types of data?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, with proper prompt engineering or by fine-tuning an AI model, you can train it to understand specific types of data, such as customer reviews, social media posts, or product feedback. By providing examples and context in the API prompt, you can tailor the results to your needs without deep AI model training.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727863154653\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_are_the_limitations_of_AI-based_sentiment_analysis\"><\/span>What are the limitations of AI-based sentiment analysis?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>AI-based sentiment analysis is powerful but has limitations. It may struggle with sarcasm, nuanced emotions, or domain-specific language unless trained on specialized datasets. Additionally, the accuracy may vary depending on the quality and length of the input text. Fine-tuning or prompt engineering can help improve accuracy in some cases.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":20,"featured_media":11104,"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":[],"class_list":["post-9027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","category-software-development"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9027","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=9027"}],"version-history":[{"count":5,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9027\/revisions"}],"predecessor-version":[{"id":11090,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/9027\/revisions\/11090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11104"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=9027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=9027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=9027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}