{"id":8931,"date":"2024-10-01T06:27:12","date_gmt":"2024-10-01T06:27:12","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=8931"},"modified":"2024-12-09T04:58:03","modified_gmt":"2024-12-09T04:58:03","slug":"build-an-efficient-keyword-extractor","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/build-an-efficient-keyword-extractor\/","title":{"rendered":"How to Build an Efficient Keyword Extractor using GPT-4"},"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-an-efficient-keyword-extractor\/#Setting_up_the_development_environment\" title=\"Setting up the development environment\">Setting up the development environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/metaschool.so\/articles\/build-an-efficient-keyword-extractor\/#Initialize_the_OpenAI_API\" title=\"Initialize the OpenAI API\">Initialize the OpenAI API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/build-an-efficient-keyword-extractor\/#Creating_the_frontend\" title=\"Creating the frontend\">Creating the frontend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/build-an-efficient-keyword-extractor\/#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-5\" href=\"https:\/\/metaschool.so\/articles\/build-an-efficient-keyword-extractor\/#FAQs\" title=\"FAQs\">FAQs<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Have you ever found yourself skimming through a wall of paragraphs just to find the key point of a text? How amazing it could be if you had a web app that instantly extracts the most important keywords from any text with a single click of a button? Here we\u2019ll build an efficient keyword extractor using OpenAI. We\u2019ll make it simple, easy to use, and best of all\u2014hands-on. Ready? Let&#8217;s dive in!<\/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.Y2lkPTc5MGI3NjExbTkzMTNseG9iamE1ODhiNXNuMGJ1cnphZXl1c2l4Z2ZsMjljZjRwaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/K4MYJzaghIq0c9XI3N\/giphy.gif\" alt=\"Meme for implementation\"\/><\/figure>\n<\/div>\n\n\n<p>First, let&#8217;s discuss what we\u2019re actually trying to build. Think of it as a highlight reel for long text. A keyword extractor is an app that scans the provided text and extracts the most important keyword from it. These are generally words that summarize the content or main ideas of a text.<\/p>\n\n\n\n<p>Why do we use OpenAI\u2019s model GPT-4? Well, these models are great in understanding the context of a text, making them an ideal choice to utilize for extracting the essential keywords. You will not be getting the high-frequency keywords like \u201cis\u201d or \u201cthe\u201d, you\u2019ll get the keywords that matter. Pretty cool, right?<\/p>\n\n\n\n<p>We\u2019re going to build a keyword extractor with the following features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Backend:<\/strong> We\u2019ll be using Python and Flask to interact with OpenAI\u2019s API.<\/li>\n\n\n\n<li><strong>Frontend:<\/strong> We\u2019ll use HTML to create a user-friendly interface where users can provide text and with a single click of a button it will extract the keywords.<\/li>\n<\/ul>\n\n\n\n<p>Ready to jump in? Let\u2019s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_the_development_environment\"><\/span>Setting up the development environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before we dive into the code we need to ensure we have the right set of tools to build a keyword extractor. Firstly you need to ensure Python is installed on your system. Use the terminal to check if it is already installed by running the following command on your terminal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python --version      \n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">python<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">--version<\/span><span style=\"color: #F8F8F2\">      <\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>If you see a version number just pops up, congrats, you\u2019re good to go.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1442\" height=\"544\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/python-version.gif\" alt=\"\" class=\"wp-image-8941\"\/><\/figure>\n<\/div>\n\n\n<p>If it\u2019s not installed, don\u2019t panic, head over to <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<p>Now, let&#8217;s get 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 vs Code<\/strong> (Or any other text editor you\u2019re comfortable with)<\/li>\n\n\n\n<li><strong>Terminal or Command prompt<\/strong><\/li>\n\n\n\n<li><strong>Basic understanding of Python<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s get started by setting up our environment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a project directory<\/h3>\n\n\n\n<p>Let\u2019s first create our project directory to store all of our keyword extractor app 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 Keyword_extractor\ncd Keyword_extractor\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\">Keyword_extractor<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">cd<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">Keyword_extractor<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Setup a virtual environment<\/h3>\n\n\n\n<p>Next, we\u2019ll create a virtual environment to manage our project dependencies. Think of the virtual environment as a safe place for all the code we\u2019re going to write. It is nice and isolated from the rest of your system. Run the following command to create a virtual environment.<\/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 -m venv chatbot_env\n\n# Activate the virtual environment\n\nsource chatbot_env\/bin\/activate  # For Mac\/Linux users\nchatbot_env\\\\Scripts\\\\activate   # For Windows users\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\">-m<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">venv<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">chatbot_env<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Activate the virtual environment<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF\">source<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">chatbot_env\/bin\/activate<\/span><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #88846F\"># For Mac\/Linux users<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">chatbot_env\\\\Scripts\\\\activate<\/span><span style=\"color: #F8F8F2\">   <\/span><span style=\"color: #88846F\"># For Windows users<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Install Required Packages<\/strong><\/h3>\n\n\n\n<p>Now let\u2019s install Flask and OpenAI, the backbone of our system. We\u2019ll need Flask for the web application and <code>python-dotenv<\/code> for loading the environment variables. Additionally, we\u2019ll install the OpenAI client for using AI models and <code>nltk<\/code> library to work with human language data.<\/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 python-dotenv openai nltk\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\">python-dotenv<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">openai<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">nltk<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Flask<\/strong> will be our lightweight web framework to create the web interface, and <strong>OpenAI<\/strong> is, well, for the AI magic! Let&#8217;s set up the OpenAI\u2019s API to power our system in the coming section.<\/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 during the signup and API key generation follow this guide to use OpenAI API to learn more about OpenAI API\u2019s. We also need to ensure our API is not exposed throughout the creation process. Let&#8217;s keep it safe using <code><a href=\"https:\/\/metaschool.so\/articles\/what-are-env-files\/\">.env<\/a><\/code> file in the next section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the .env file<\/h3>\n\n\n\n<p>To securely manage our OpenAI API key, we\u2019ll create a <code>.env<\/code> file. In the project directory create a file using 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=\"#For Mac users\ntouch .env\n\n# For windows users\necho. &gt; touch.env  # Using command prompt\nNew-Item -Path touch.env -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\">.env<\/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\">touch.env<\/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\">touch.env<\/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>Open the <code>.env<\/code> file in text editor and add your API key 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=\"OPENAI_API_KEY=your_openai_api_key_here\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\">OPENAI_API_KEY<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">your_openai_api_key_here<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Replace <code>your_openai_api_key_here<\/code> with your actual OpenAI API key. Now that you\u2019ve set up the OpenAI\u2019s API, it\u2019s time to get to the fun part of setting the backend of our app. Let\u2019s dive right in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the backend script<\/h3>\n\n\n\n<p>It&#8217;s time to build the brain of our keyword extractor and get our hands dirty with the backend side of our keyword extractor. Imagine our keyword extractor is like a cook superhero such as keyword ninja and what\u2019s a superhero without having its command center? This is where Flask comes in. Flask is like the headquarters where the actual magic happens. Flask is considered an invisible brain that coordinates all the missions, receives requests, and directs them to the right place. Let&#8217;s create a file named as <a href=\"http:\/\/app.py\" target=\"_blank\" rel=\"noopener\"><code>app.py<\/code><\/a> and use the following code to ensure our backend operations are completed:<\/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=\"import os\nfrom flask import Flask, render_template, request\nfrom dotenv import load_dotenv\nimport openai\nimport nltk\nfrom nltk.tokenize import word_tokenize\n\n# Load environment variables\nload_dotenv()\n\n# Initialize the Flask app\napp = Flask(__name__)\n\n# Set OpenAI API key\nopenai.api_key = os.getenv(&quot;OPENAI_API_KEY&quot;)\n\n# Ensure NLTK punkt is downloaded\nnltk.download('punkt')\n\n# Function to preprocess the text\ndef preprocess_text(text):\n    tokens = word_tokenize(text)\n    return tokens\n\n# Function to extract keywords using OpenAI API\ndef extract_keywords(text):\n    response = openai.ChatCompletion.create(\n        model=&quot;gpt-4&quot;,  # Use the chat model\n        messages=[\n            {&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: f&quot;Extract keywords from the following text:\\\\n\\\\n{text}&quot;}\n        ]\n    )\n    keywords = response['choices'][0]['message']['content'].strip()\n    return keywords\n\n# Home route\n@app.route('\/', methods=['GET', 'POST'])\ndef home():\n    extracted_keywords = None\n    if request.method == 'POST':\n        user_input = request.form['text']\n        # Preprocess the text\n        tokens = preprocess_text(user_input)\n        # Extract keywords\n        extracted_keywords = extract_keywords(user_input)\n    return render_template('index.html', keywords=extracted_keywords)\n\nif __name__ == &quot;__main__&quot;:\n    app.run(debug=True)\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\">import<\/span><span style=\"color: #F8F8F2\"> os<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">from<\/span><span style=\"color: #F8F8F2\"> flask <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> Flask, render_template, request<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">from<\/span><span style=\"color: #F8F8F2\"> dotenv <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> load_dotenv<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> openai<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> nltk<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">from<\/span><span style=\"color: #F8F8F2\"> nltk.tokenize <\/span><span style=\"color: #F92672\">import<\/span><span style=\"color: #F8F8F2\"> word_tokenize<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Load environment variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">load_dotenv()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Initialize the Flask app<\/span><\/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 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\"> os.getenv(<\/span><span style=\"color: #E6DB74\">&quot;OPENAI_API_KEY&quot;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Ensure NLTK punkt is downloaded<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">nltk.download(<\/span><span style=\"color: #E6DB74\">&#39;punkt&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Function to preprocess the text<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">preprocess_text<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">text<\/span><span style=\"color: #F8F8F2\">):<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    tokens <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> word_tokenize(text)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> tokens<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Function to extract keywords using OpenAI API<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">def<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">extract_keywords<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">text<\/span><span style=\"color: #F8F8F2\">):<\/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-4&quot;<\/span><span style=\"color: #F8F8F2\">,  <\/span><span style=\"color: #88846F\"># Use the chat model<\/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>\n<span class=\"line\"><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;Extract keywords from the following text:<\/span><span style=\"color: #AE81FF\">\\\\<\/span><span style=\"color: #E6DB74\">n<\/span><span style=\"color: #AE81FF\">\\\\<\/span><span style=\"color: #E6DB74\">n<\/span><span style=\"color: #AE81FF\">{<\/span><span style=\"color: #F8F8F2\">text<\/span><span style=\"color: #AE81FF\">}<\/span><span style=\"color: #E6DB74\">&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\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    keywords <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> response[<\/span><span style=\"color: #E6DB74\">&#39;choices&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;message&#39;<\/span><span style=\"color: #F8F8F2\">][<\/span><span style=\"color: #E6DB74\">&#39;content&#39;<\/span><span style=\"color: #F8F8F2\">].strip()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> keywords<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\"># Home route<\/span><\/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 style=\"color: #FD971F; font-style: italic\">methods<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #E6DB74\">&#39;GET&#39;<\/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\">home<\/span><span style=\"color: #F8F8F2\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    extracted_keywords <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">None<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> request.method <\/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: #F8F8F2\">        user_input <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> request.form[<\/span><span style=\"color: #E6DB74\">&#39;text&#39;<\/span><span style=\"color: #F8F8F2\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #88846F\"># Preprocess the text<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        tokens <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> preprocess_text(user_input)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #88846F\"># Extract keywords<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        extracted_keywords <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> extract_keywords(user_input)<\/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 style=\"color: #FD971F; font-style: italic\">keywords<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\">extracted_keywords)<\/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\">&quot;__main__&quot;<\/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><\/code><\/pre><\/div>\n\n\n\n<p>With that, we ensure the brain of our keyword extractor is working. It feels like you\u2019re creating something special, isn\u2019t it?\ud83d\udc68\u200d\ud83d\udcbb<\/p>\n\n\n\n<p>Now let\u2019s make it look pretty! Well, maybe not the prettiest front end in the world, but it\u2019ll do the job.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_the_frontend\"><\/span>Creating the frontend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We have sorted the brain of our keyword extractor, it&#8217;s time to build an interface where users can actually interact with our chatbot. To build a frontend let&#8217;s create a folder named as <code>templates<\/code> and create a file <code>index.html<\/code> inside the <code>templates<\/code> folder. Use the following commands to achieve 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=\"mkdir templates\ntouch templates\/index.html\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: #A6E22E\">touch<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">templates\/index.html<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Open the <code>index.html<\/code> in a text editor and paste the following code in 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=\"<!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;Keyword Extractor Using Open AI<\/title&gt;\n    <style&gt;\n        body {\n            display: flex;\n            justify-content: center; \/* Center horizontally *\/\n            align-items: center; \/* Center vertically *\/\n            height: 100vh; \/* Full viewport height *\/\n            margin: 0; \/* Remove default margin *\/\n            background-color: #f4f4f4; \/* Light background color *\/\n            font-family: Arial, sans-serif; \/* Font style *\/\n        }\n        .container {\n            text-align: center; \/* Center text *\/\n            background: white; \/* White background for form *\/\n            padding: 20px; \/* Padding around form *\/\n            border-radius: 8px; \/* Rounded corners *\/\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n        }\n        textarea {\n            width: 100%; \/* Full width of container *\/\n            max-width: 500px; \/* Max width *\/\n            margin: 10px 0; \/* Margin above and below *\/\n            padding: 10px; \/* Inner padding *\/\n            border: 1px solid #ccc; \/* Border style *\/\n            border-radius: 4px; \/* Rounded corners *\/\n        }\n        input[type=&quot;submit&quot;] {\n            padding: 10px 20px; \/* Padding around button *\/\n            background-color: #007bff; \/* Button background color *\/\n            color: white; \/* Button text color *\/\n            border: none; \/* No border *\/\n            border-radius: 4px; \/* Rounded corners *\/\n            cursor: pointer; \/* Pointer on hover *\/\n            transition: background-color 0.3s; \/* Transition effect *\/\n        }\n        input[type=&quot;submit&quot;]:hover {\n            background-color: #0056b3; \/* Darker blue on hover *\/\n        }\n    <\/style&gt;\n<\/head&gt;\n<body&gt;\n    <div class=&quot;container&quot;&gt;\n        <h1&gt;Keyword Extractor using AI<\/h1&gt;\n        <form method=&quot;POST&quot;&gt;\n            <textarea name=&quot;text&quot; rows=&quot;10&quot; placeholder=&quot;Enter your text here...&quot;&gt;<\/textarea&gt;<br&gt;\n            <input type=&quot;submit&quot; value=&quot;Extract Keywords&quot;&gt;\n        <\/form&gt;\n        {% if keywords %}\n            <h2&gt;Extracted Keywords:<\/h2&gt;\n            <p&gt;{{ keywords }}<\/p&gt;\n        {% endif %}\n    <\/div&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: #F92672\">&lt;<\/span><span style=\"color: #F44747\">!<\/span><span style=\"color: #AE81FF\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> html<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">html lang<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;en&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">head<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">meta charset<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">meta name<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> content<\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">title<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">Keyword Extractor Using Open <\/span><span style=\"color: #AE81FF\">AI<\/span><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">title<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">style<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        body {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            display: flex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            justify<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">content: center; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Center horizontally <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            align<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">items: center; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Center vertically <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            height: <\/span><span style=\"color: #F44747\">100vh<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Full viewport height <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            margin: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Remove default margin <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">color: <\/span><span style=\"color: #88846F\">#f4f4f4; \/* Light background color *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            font<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">family: Arial, sans<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">serif; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Font style <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        .container {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            text<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">align: center; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Center text <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background: white; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> White background <\/span><span style=\"color: #F92672\">for<\/span><span style=\"color: #F8F8F2\"> form <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: <\/span><span style=\"color: #F44747\">20px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Padding around form <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">radius: <\/span><span style=\"color: #F44747\">8px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Rounded corners <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            box<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">shadow: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F44747\">4px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F44747\">10px<\/span><span style=\"color: #F8F8F2\"> rgba(<\/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 style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Subtle shadow <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        textarea {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            width: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Full width of container <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF\">max<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">width: <\/span><span style=\"color: #F44747\">500px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Max width <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            margin: <\/span><span style=\"color: #F44747\">10px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Margin above <\/span><span style=\"color: #F92672\">and<\/span><span style=\"color: #F8F8F2\"> below <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: <\/span><span style=\"color: #F44747\">10px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Inner padding <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border: <\/span><span style=\"color: #F44747\">1px<\/span><span style=\"color: #F8F8F2\"> solid <\/span><span style=\"color: #88846F\">#ccc; \/* Border style *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">radius: <\/span><span style=\"color: #F44747\">4px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Rounded corners <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF\">input<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #66D9EF; font-style: italic\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;submit&quot;<\/span><span style=\"color: #F8F8F2\">] {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            padding: <\/span><span style=\"color: #F44747\">10px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F44747\">20px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Padding around button <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">color: <\/span><span style=\"color: #88846F\">#007bff; \/* Button background color *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            color: white; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Button text color <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border: none; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> No border <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            border<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">radius: <\/span><span style=\"color: #F44747\">4px<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Rounded corners <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            cursor: pointer; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Pointer on hover <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            transition: background<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">color <\/span><span style=\"color: #AE81FF\">0.<\/span><span style=\"color: #F44747\">3s<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #F92672\">\/*<\/span><span style=\"color: #F8F8F2\"> Transition effect <\/span><span style=\"color: #F92672\">*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF\">input<\/span><span style=\"color: #F8F8F2\">[<\/span><span style=\"color: #66D9EF; font-style: italic\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;submit&quot;<\/span><span style=\"color: #F8F8F2\">]:hover {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            background<\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\">color: <\/span><span style=\"color: #88846F\">#0056b3; \/* Darker blue on hover *\/<\/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\">&lt;\/<\/span><span style=\"color: #F8F8F2\">style<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">head<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">body<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">div <\/span><span style=\"color: #F92672\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;container&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">h1<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">Keyword Extractor using <\/span><span style=\"color: #AE81FF\">AI<\/span><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">h1<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">form method=<\/span><span style=\"color: #E6DB74\">&quot;POST&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">textarea name=<\/span><span style=\"color: #E6DB74\">&quot;text&quot;<\/span><span style=\"color: #F8F8F2\"> rows=<\/span><span style=\"color: #E6DB74\">&quot;10&quot;<\/span><span style=\"color: #F8F8F2\"> placeholder=<\/span><span style=\"color: #E6DB74\">&quot;Enter your text here...&quot;<\/span><span style=\"color: #F92672\">&gt;&lt;\/<\/span><span style=\"color: #F8F8F2\">textarea<\/span><span style=\"color: #F92672\">&gt;&lt;<\/span><span style=\"color: #F8F8F2\">br<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #66D9EF\">input<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">type<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;submit&quot;<\/span><span style=\"color: #F8F8F2\"> value=<\/span><span style=\"color: #E6DB74\">&quot;Extract Keywords&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">form<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        {<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> keywords <\/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\">&lt;<\/span><span style=\"color: #F8F8F2\">h2<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">Extracted Keywords:<\/span><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">h2<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #F92672\">&lt;<\/span><span style=\"color: #F8F8F2\">p<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">{{ keywords }}<\/span><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">p<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        {<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> endif <\/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\">&lt;\/<\/span><span style=\"color: #F8F8F2\">div<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">body<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F92672\">&lt;\/<\/span><span style=\"color: #F8F8F2\">html<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This will launch an interface where users can provide their long text and with a click of a button they will be able to extract keywords out of it. The <code>body<\/code> tag centers the form to make it centralized, with a light background color. The <code>.container<\/code> class is used to style the main form container with padding, rounded corners, and adjusting the shadows. The <code>textarea<\/code> element allows users to enter their text and a submit button with a blue background. <\/p>\n\n\n\n<p>With that, everything is set up, and it&#8217;s time to launch the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing it out<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p>Now for the actual fun\u2014running your app! In the project directory run the following command to launch our keyword extractor application:<\/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: #F8F8F2\">python app.py<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Open your browser and head over to <code>http:\/\/127.0.0.1:5000\/<\/code>. You should see your simple web app up and running. Input some text, hit the button, and\u2014boom\u2014OpenAI pulls out the keywords like magic.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1156\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2024\/09\/application-working.gif\" alt=\"\" class=\"wp-image-8943\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> If you ran into any bugs during the production, don\u2019t panic! Debugging is a part of development journey, and it will make you better as a builder.\ud83d\udcaa<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n<p>Congratulations! You\u2019ve built an efficient keyword extractor tool powered by OpenAI\u2019s model. Here, we took a simple idea and turned it into a functional web app. Whether you\u2019re extracting keywords for SEO, summarizing articles, or looking to do some text analysis, you now have your very own keyword extractor tool.<\/p>\n\n\n\n<p>But it&#8217;s the beginning of your journey. You just laid the foundation and now you could take it in any sort of exciting direction.<\/p>\n\n\n\n<p>I hope this collective journey be informative and super fun for you. Now you\u2019re all good to extract these keywords as a pro! Keep coding! \ud83d\ude04<\/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-1727249562476\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I customize the number of keywords extracted?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes you can modify the OpenAI prompt in a file<br \/>Currently, the app extracts a standard set of keywords, but you can easily modify the OpenAI prompt to adjust the number of keywords or even ask for phrases. For example, you could modify the prompt to &#8220;Extract 5 keywords&#8221; for more control.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727249622365\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is this app free to use?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The app uses OpenAI\u2019s API, which may have usage limits or costs depending on your OpenAI plan. While small usage may be free, for larger-scale applications, you may need to upgrade your API usage plan.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1727249642158\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How can I deploy this app so others can use it?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can deploy this app on hosting services like <strong>Heroku<\/strong>, <strong>AWS<\/strong>, or <strong>DigitalOcean<\/strong>. Flask apps are relatively easy to deploy, and with the right configuration, your keyword extractor can be available online for anyone to use.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":20,"featured_media":11107,"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],"tags":[115,174,365],"class_list":["post-8931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","tag-ai","tag-how-to","tag-openai"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8931","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=8931"}],"version-history":[{"count":17,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8931\/revisions"}],"predecessor-version":[{"id":11088,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/8931\/revisions\/11088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11107"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=8931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=8931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=8931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}