Add Static Website

.gitignore

@@ -1 +1 @@
-__pycache__
+__pycache__/

LICENCE

@@ -0,0 +1,399 @@
+Attribution-NonCommercial 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+	wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More_considerations
+     for the public:
+	wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-NonCommercial 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-NonCommercial 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+  d. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  e. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  f. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  g. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  h. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  i. NonCommercial means not primarily intended for or directed towards
+     commercial advantage or monetary compensation. For purposes of
+     this Public License, the exchange of the Licensed Material for
+     other material subject to Copyright and Similar Rights by digital
+     file-sharing or similar means is NonCommercial provided there is
+     no payment of monetary compensation in connection with the
+     exchange.
+
+  j. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  k. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  l. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part, for NonCommercial purposes only; and
+
+            b. produce, reproduce, and Share Adapted Material for
+               NonCommercial purposes only.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties, including when
+          the Licensed Material is used other than for NonCommercial
+          purposes.
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+       4. If You Share Adapted Material You produce, the Adapter's
+          License You apply must not prevent recipients of the Adapted
+          Material from complying with this Public License.
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database for NonCommercial purposes
+     only;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material; and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

README.md

@@ -1,11 +1,6 @@
----
-title: Emotion Detection
-emoji: 🐠
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
-license: mit
----
+# Text2Feature
+Powerful text mining tool. Convert raw text into clean using modern technologies of NLP and AI
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+You can test my website right here 👇
+
+Link: [djacon.github.io/text2feature](https://djacon.github.io/text2feature)

main.py

@@ -1,30 +1,32 @@
-import uvicorn
-from fastapi import FastAPI, Request, HTTPException
-from fastapi.middleware.cors import CORSMiddleware
+from fastapi import FastAPI
+from pydantic import BaseModel
+from fastapi.responses import RedirectResponse
+from fastapi.staticfiles import StaticFiles
+
 from inference import predict_emotions
 
 app = FastAPI()
 
-# You can choose your own website hosts
-allowed_hosts = [
-    "http://127.0.0.1",
-    "https://djacon.github.io"
-]
+# app.add_middleware(
+#     CORSMiddleware,
+#     allow_origins=allowed_hosts,
+#     allow_credentials=True,
+#     allow_methods=["*"],
+#     allow_headers=["*"],
+# )
 
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=allowed_hosts,
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
+app.mount("/static", StaticFiles(directory='static', html=True))
 
 
 @app.get('/')
-async def hello():
-    return {'msg': 'Hello, World!'}
+async def redirect_to_static_index():
+    return RedirectResponse(url='/static/index.html')
+
+
+class EmotionRequest(BaseModel):
+    text: str
 
 
 @app.post('/predict_emotion')
-async def predict(text: str):
-    return predict_emotions(text)
+async def predict(request: EmotionRequest):
+    return predict_emotions(request.text)

static/404.html

@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="canonical" href="">
+    <title>Text2Feature | 404 Page</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
+    <script defer src="js/main.js"></script>
+</head>
+
+<body class="overflow-hidden">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B751Q3XBFC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-B751Q3XBFC');
+    </script>
+
+    <div x-data="{ sidebarOpen: false }" class="relative flex h-screen text-gray-800 bg-white font-roboto">
+        <div x-cloak :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false"
+            class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
+
+        <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
+            class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
+            <div class="mt-8">
+                <a href="index.html" class="flex items-center">
+                  <img class="w-auto h-6" src="images/logo.svg" alt="logo">
+                  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="text-indigo-600">Feature</span></span>
+                </a>
+            </div>
+
+            <hr class="my-6 border-gray-100">
+
+            <nav class="space-y-8">
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="index.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Homepage</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="text_summarizer.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Text Summarizer</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="emotion_detection.html">
+                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                            <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
+                            <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#1C274C"/>
+                            <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Emotion Detection</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+
+                        <span class="mx-3 font-medium capitalize">Project 3</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 4</span>
+                    </a>
+                </div>
+
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">OTHER</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="/">
+                        <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M474.89,300.41a121.43,121.43,0,0,1-121.3,121.3H247.08V392.13H353.59a91.72,91.72,0,1,0,0-183.44H87.53L151,272.2l-20.92,20.92L30.89,193.9l99.22-99.22L151,115.6l-63.5,63.51H353.59A121.43,121.43,0,0,1,474.89,300.41Z" />
+                        </svg>
+                        <span class="mx-3 font-medium">Visit Main Website</span>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
+            <header class="bg-white border-b border-gray-100">
+                <div class="flex items-center justify-between px-4 py-4 sm:px-6">
+                    <div class="flex items-center">
+                        <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
+                            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </button>
+
+                        <div class="relative" x-data="{ search: '' }" @click.away="search = ''">
+                            <div class="relative mx-4 lg:mx-0">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round"></path>
+                                    </svg>
+                                </span>
+
+                                <input x-model="search" type="text"
+                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    placeholder="Find anything...">
+                            </div>
+
+                            <div class="absolute right-0 z-20 w-full py-2 mt-2 space-y-4 overflow-hidden bg-white rounded-md shadow-xl"
+                                x-show="search.length > 0" x-cloak
+                                x-transition:enter="transition ease-out duration-100 transform"
+                                x-transition:enter-start="opacity-0 scale-95"
+                                x-transition:enter-end="opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75 transform"
+                                x-transition:leave-start="opacity-100 scale-100"
+                                x-transition:leave-end="opacity-0 scale-95">
+
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Projects</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="text_summarizer.html">
+                                            Text Summarizer
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="emotion_detection.html">
+                                            Emotion Detection
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 3
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 4
+                                        </a>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Other</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="/">
+                                            Visit Main Website
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center">
+                        <div x-data="{ dropdownOpen: false }" class="relative inline-block">
+                            <button @click="dropdownOpen = ! dropdownOpen" class="relative z-10 flex items-center flex-shrink-0 text-sm text-gray-600 focus:outline-none">
+                                <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
+                            </button>
+                
+                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                                    <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
+                                    <div class="mx-1">
+                                        <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
+                                        <p class="text-sm text-gray-500">github.com/Djacon</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="flex-1 overflow-y-auto">
+                <div class="px-4 py-8 sm:px-6">
+                    <div>
+                        <h1 class="text-2xl font-medium text-gray-700 sm:text-3xl"> 404
+                        </h1>
+
+                        <div class="hidden mt-3 overflow-y-auto text-sm lg:items-center lg:flex whitespace-nowrap">
+                            <a class="text-gray-600">Pages</a>
+                            <span class="mx-1 text-gray-500">/</span>
+                            <a href="404.html" class="text-indigo-600 hover:underline">404</a>
+                        </div>
+                    </div>
+
+                    <div class="mt-6">
+                        <div class="flex flex-col items-center justify-center h-96">
+                            <h1
+                                class="font-bold text-transparent text-7xl md:text-9xl bg-clip-text bg-gradient-to-r from-indigo-800 via-indigo-900 to-gray-900">
+                                404</h1>
+
+                            <div
+                                class="w-32 h-1 my-6 bg-gradient-to-r from-indigo-800 via-indigo-900 to-gray-900 md:my-6">
+                            </div>
+
+                            <h2 class="text-xl font-semibold text-gray-800 md:text-3xl">Page not found</h2>
+
+
+                            <a href="index.html"
+                                class="flex items-center px-4 py-2 mt-6 tracking-wide text-gray-600 capitalize transition-colors duration-200 transform bg-white rounded-md hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-50">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-1.5" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+                                </svg>
+                                <span class="mx-1.5">Go Back</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>

static/emotion_detection.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="canonical" href="">
+    <title>Text2Feature | Detection</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
+    <script defer src="js/main.js"></script>
+</head>
+
+<body class="overflow-hidden">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B751Q3XBFC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-B751Q3XBFC');
+    </script>
+
+    <div x-data="{ sidebarOpen: false }" class="relative flex h-screen text-gray-800 bg-white font-roboto">
+        <div x-cloak :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false"
+            class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
+
+        <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
+            class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
+            <div class="mt-8">
+                <a href="index.html" class="flex items-center">
+                  <img class="w-auto h-6" src="images/logo.svg" alt="logo">
+                  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="text-indigo-600">Feature</span></span>
+                </a>
+            </div>
+
+            <hr class="my-6 border-gray-100">
+
+            <nav class="space-y-8">
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="index.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Homepage</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="text_summarizer.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Text Summarizer</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-300 transform bg-gray-200 rounded-lg bg-opacity-40"
+                        href="emotion_detection.html">
+                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                            <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
+                            <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#1C274C"/>
+                            <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Emotion Detection</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 3</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 4</span>
+                    </a>
+                </div>
+
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">OTHER</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="/">
+                        <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M474.89,300.41a121.43,121.43,0,0,1-121.3,121.3H247.08V392.13H353.59a91.72,91.72,0,1,0,0-183.44H87.53L151,272.2l-20.92,20.92L30.89,193.9l99.22-99.22L151,115.6l-63.5,63.51H353.59A121.43,121.43,0,0,1,474.89,300.41Z" />
+                        </svg>
+                        <span class="mx-3 font-medium">Visit Main Website</span>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
+            <header class="bg-white border-b border-gray-100">
+                <div class="flex items-center justify-between px-4 py-4 sm:px-6">
+                    <div class="flex items-center">
+                        <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
+                            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </button>
+
+                        <div class="relative" x-data="{ search: '' }" @click.away="search = ''">
+                            <div class="relative mx-4 lg:mx-0">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round"></path>
+                                    </svg>
+                                </span>
+
+                                <input x-model="search" type="text"
+                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    placeholder="Find anything...">
+                            </div>
+
+                            <div class="absolute right-0 z-20 w-full py-2 mt-2 space-y-4 overflow-hidden bg-white rounded-md shadow-xl"
+                                x-show="search.length > 0" x-cloak
+                                x-transition:enter="transition ease-out duration-100 transform"
+                                x-transition:enter-start="opacity-0 scale-95"
+                                x-transition:enter-end="opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75 transform"
+                                x-transition:leave-start="opacity-100 scale-100"
+                                x-transition:leave-end="opacity-0 scale-95">
+
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Projects</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="text_summarizer.html">
+                                            Text Summarizer
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="emotion_detection.html">
+                                            Emotion Detection
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 3
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 4
+                                        </a>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Other</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="/">
+                                            Visit Main Website
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center">
+                        <div x-data="{ dropdownOpen: false }" class="relative inline-block">
+                            <button @click="dropdownOpen = ! dropdownOpen" class="relative z-10 flex items-center flex-shrink-0 text-sm text-gray-600 focus:outline-none">
+                                <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
+                            </button>
+                
+                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                                    <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
+                                    <div class="mx-1">
+                                        <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
+                                        <p class="text-sm text-gray-500">github.com/Djacon</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="flex-1 overflow-y-auto">
+                <div class="px-4 py-8 sm:px-6">
+                    <div>
+                        <h1 class="text-2xl font-medium text-gray-700 sm:text-3xl">Emotion Detection</h1>
+
+                        <div class="hidden mt-3 overflow-y-auto text-sm lg:items-center lg:flex whitespace-nowrap">
+                            <a class="text-gray-600">Pages</a>
+                            <span class="mx-1 text-gray-500">/</span>
+                            <a href="" class="text-indigo-600 hover:underline">Emotion_Detection</a>
+                        </div>
+                    </div>
+
+                    <div class="mt-6">
+                        <div class="w-full p-4 bg-white rounded-lg xl:p-6">
+                            <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Upload text</h1>
+
+                            <form id='sum-form' class="mt-6 space-y-5" onsubmit="return false;">
+                                <div>
+                                    <label for="sum-type" class="block text-sm text-gray-700 capitalize">Select Type</label>
+                                    <select id="sum-type"
+                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
+                                        <option value="sum-text">Identify Text</option>
+                                        <option value="sum-file">Identify PDF</option>
+                                    </select>
+                                </div>
+
+                                <div id="sum-text-div">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">description</label>
+                                    <textarea id="sum-text-input" required class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    style="min-height: 300px;"></textarea>
+                                </div>
+
+                                <div id="sum-file-div" class="hidden">
+                                    <label for="image" class="block text-sm text-gray-700 capitalize">file</label>
+                                    <label  
+                                        class="flex flex-col items-center justify-center w-full h-32 mt-2 text-gray-500 border-2 border-dashed rounded-md cursor-pointer hover:text-gray-600">
+                                        <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 20 20">
+                                            <path
+                                                d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z">
+                                            </path>
+                                        </svg>
+                                        <span class="mt-4">Select PDF File</span>
+                                        <input id="sum-file-input" type="file" class="hidden">
+                                    </label>
+                                </div>
+
+                                <div id="sum-video-div" class="hidden">
+                                    <label for="video" class="block text-sm text-gray-700 capitalize">Youtube link</label>
+                                    <input id="sum-video-input" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="url"
+                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
+                                </div>
+                                <p id='sum-err' class="hidden mt-2 text-sm text-red-500">Your password is too short.</p>
+
+                                <div class="flex justify-end">
+                                    <button id="submit" type="button" class="w-full flex items-center justify-center px-2 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md hover:bg-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-50">
+                                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                                            <g id="SVGRepo_iconCarrier">
+                                              <path d="M7 10L12 15L17 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                            </g>
+                                          </svg>
+                                        <span class="mx-1">Detect</span>
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+
+                        <div class="w-full p-4 mt-8 bg-white rounded-lg xl:p-6">
+                            <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Result</h1>
+
+                            <div class="md:flex gap-8">
+                                <div class="w-full md:w-1/2 grid-cols-2 mt-6">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">Extracted Text</label>
+                                    <textarea disabled id="extracted-text"
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                        style="min-height: 250px;"></textarea>
+                                </div>
+
+                                <div class="w-full md:w-1/2 grid-cols-2 mt-6">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">Emotion Prediction</label>
+                                    <textarea disabled id="summarized-text"
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                        style="min-height: 250px;"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script src="js/detection.js"></script>
+</body>
+</html>

static/index.html

@@ -0,0 +1,781 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="canonical" href="">
+    <title>Text2Feature | Homepage</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
+    <script defer src="js/main.js"></script>
+</head>
+
+<body class="overflow-hidden">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B751Q3XBFC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-B751Q3XBFC');
+    </script>
+
+    <div x-data="{ sidebarOpen: false }" class="relative flex h-screen text-gray-800 bg-white font-roboto">
+        <div x-cloak :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false"
+            class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
+
+        <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
+            class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
+            <div class="mt-8">
+                <a href="index.html" class="flex items-center">
+                  <img class="w-auto h-6" src="images/logo.svg" alt="logo">
+                  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="text-indigo-600">Feature</span></span>
+                </a>
+            </div>
+
+            <hr class="my-6 border-gray-100">
+
+            <nav class="space-y-8">
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-200 transform bg-gray-200 rounded-lg bg-opacity-40"
+                        href="index.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Homepage</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="text_summarizer.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Text Summarizer</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="emotion_detection.html">
+                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                            <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
+                            <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#1C274C"/>
+                            <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Emotion Detection</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 3</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 4</span>
+                    </a>
+                </div>
+
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">OTHER</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="/">
+                        <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M474.89,300.41a121.43,121.43,0,0,1-121.3,121.3H247.08V392.13H353.59a91.72,91.72,0,1,0,0-183.44H87.53L151,272.2l-20.92,20.92L30.89,193.9l99.22-99.22L151,115.6l-63.5,63.51H353.59A121.43,121.43,0,0,1,474.89,300.41Z" />
+                        </svg>
+                        <span class="mx-3 font-medium">Visit Main Website</span>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
+            <header class="bg-white border-b border-gray-100">
+                <div class="flex items-center justify-between px-4 py-4 sm:px-6">
+                    <div class="flex items-center">
+                        <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
+                            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </button>
+
+                        <div class="relative" x-data="{ search: '' }" @click.away="search = ''">
+                            <div class="relative mx-4 lg:mx-0">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round"></path>
+                                    </svg>
+                                </span>
+
+                                <input x-model="search" type="text"
+                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    placeholder="Find anything...">
+                            </div>
+
+                            <div class="absolute right-0 z-20 w-full py-2 mt-2 space-y-4 overflow-hidden bg-white rounded-md shadow-xl"
+                                x-show="search.length > 0" x-cloak
+                                x-transition:enter="transition ease-out duration-100 transform"
+                                x-transition:enter-start="opacity-0 scale-95"
+                                x-transition:enter-end="opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75 transform"
+                                x-transition:leave-start="opacity-100 scale-100"
+                                x-transition:leave-end="opacity-0 scale-95">
+
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Projects</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="text_summarizer.html">
+                                            Text Summarizer
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="emotion_detection.html">
+                                            Emotion Detection
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 3
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 4
+                                        </a>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Other</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="/">
+                                            Visit Main Website
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center">
+                        <div x-data="{ dropdownOpen: false }" class="relative inline-block">
+                            <button @click="dropdownOpen = ! dropdownOpen" class="relative z-10 flex items-center flex-shrink-0 text-sm text-gray-600 focus:outline-none">
+                                <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
+                            </button>
+                
+                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                                    <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
+                                    <div class="mx-1">
+                                        <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
+                                        <p class="text-sm text-gray-500">github.com/Djacon</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="flex-1 overflow-y-auto">
+                <div class="px-4 py-8 sm:px-6">
+                    <div>
+                        <h1 class="text-2xl font-medium text-gray-700 sm:text-3xl">Homepage</h1>
+
+                        <div class="hidden mt-3 overflow-y-auto text-sm lg:items-center lg:flex whitespace-nowrap">
+                            <a class="text-gray-600">Pages</a>
+                            <span class="mx-1 text-gray-500">/</span>
+                            <a href="" class="text-indigo-600 hover:underline">Homepage</a>
+                        </div>
+                    </div>
+
+                    <div class="mt-6">
+                        <section class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
+                            <div class="flex items-center justify-between px-6 py-3 bg-white rounded-lg shadow-sm">
+                                <div>
+                                    <p class="font-medium text-gray-500">Today’s Users</p>
+
+                                    <div class="flex items-end">
+                                        <h2 class="mt-1 text-2xl font-medium text-gray-800">23</h2>
+                                        <span class="mx-2 text-indigo-500">
+                                            +55%
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+                                    </svg>
+                                </div>
+                            </div>
+
+                            <div class="flex items-center justify-between px-6 py-3 bg-white rounded-lg shadow-sm">
+                                <div>
+                                    <p class="font-medium text-gray-500">Total Users</p>
+
+                                    <div class="flex items-end">
+                                        <h2 class="mt-1 text-2xl font-medium text-gray-800">54</h2>
+                                        <span class="mx-2 text-indigo-500">
+                                            +5%
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                </div>
+                            </div>
+
+                            <div class="flex items-center justify-between px-6 py-3 bg-white rounded-lg shadow-sm">
+                                <div>
+                                    <p class="font-medium text-gray-500">New Users</p>
+
+                                    <div class="flex items-end">
+                                        <h2 class="mt-1 text-2xl font-medium text-gray-800">+15</h2>
+                                        <span class="mx-2 text-green-500">
+                                            +34%
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                    </svg>
+                                </div>
+                            </div>
+
+                            <div class="flex items-center justify-between px-6 py-3 bg-white rounded-lg shadow-sm">
+                                <div>
+                                    <p class="font-medium text-gray-500">Total Projects</p>
+
+                                    <div class="flex items-end">
+                                        <h2 class="mt-1 text-2xl font-medium text-gray-800">2</h2>
+                                    </div>
+                                </div>
+
+                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                                    </svg>
+                                </div>
+                            </div>
+                        </section>
+
+                        <section class="mt-6 space-y-6">
+                            <div class="w-full p-4 bg-white rounded-lg xl:p-6">
+                                <h1 class="text-lg font-medium text-gray-700 sm:text-xl md:text-2xl">
+                                    Welcome to Text2<span class="text-indigo-600">Feature</span>!
+                                </h1>
+                                <p class="mt-4 text-gray-800">
+                                    – your gateway to the world of text processing and analysis! Our tools empower you to
+                                    easily and swiftly process textual information from any source, be it files, web pages, or text data. We provide
+                                    you with powerful instruments to search for and extract key 'features' within text, aiding you in extracting
+                                    valuable insights and making informed decisions.
+                                </p>
+                                <p class="mt-4 text-gray-800">
+                                    With Text2Feature, you can:
+                                </p>
+                                <ul class="mt-2 text-gray-800" style="list-style-type: disc; list-style-position: inside;">
+                                    <li>Import and analyze text files in various formats.</li>
+                                    <li>Search for and highlight important features within text for further exploration.</li>
+                                    <li>Structure and organize your textual content for more effective analysis.</li>
+                                    <li>Utilize a range of tools and methods for text processing and knowledge extraction.</li>
+                                </ul>
+                                <p class="mt-4 text-gray-800">
+                                    Join Text2Feature and transform text into valuable knowledge effortlessly. Get started now and bring your
+                                    research and analytical ideas to life!
+                                </p>
+                            </div>
+                        </section>
+
+                        <!-- <section class="mt-6 space-y-6">
+                            <div class="w-full p-4 bg-white rounded-lg xl:p-6">
+                                <div class="mb-5 rounded-lg bg-gradient-to-r from-indigo-900 to-gray-900">
+                                    <canvas id="barChart" height="80"></canvas>
+                                </div>
+
+                                <div>
+                                    <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
+                                        active users</h1>
+
+                                    <p class="mt-2 text-gray-500">
+                                        <span class="text-green-500">(+10)</span>&nbsp;than last week
+                                    </p>
+
+                                    <div class="grid gap-12 mt-8 sm:grid-cols-2 md:grid-cols-4">
+                                        <div>
+                                            <div class="flex items-center capitalize">
+                                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                                        viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            stroke-width="2"
+                                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                                                    </svg>
+                                                </div>
+
+                                                <div class="mx-3 font-medium text-gray-500 ">users</div>
+                                            </div>
+
+                                            <div class="mt-3">
+                                                <h1 class="text-xl font-semibold text-gray-600">23,212</h1>
+
+                                                <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
+                                                    <div class="w-8/12 h-1 bg-indigo-500"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <div class="flex items-center capitalize">
+                                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                                        viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            stroke-width="2"
+                                                            d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+                                                    </svg>
+                                                </div>
+
+                                                <div class="mx-3 font-medium text-gray-500 ">Clicks</div>
+                                            </div>
+
+                                            <div class="mt-3">
+                                                <h1 class="text-xl font-semibold text-gray-600">3,125m</h1>
+
+                                                <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
+                                                    <div class="w-11/12 h-1 bg-indigo-500"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <div class="flex items-center capitalize">
+                                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                                        viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            stroke-width="2"
+                                                            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                                                    </svg>
+                                                </div>
+
+                                                <div class="mx-3 font-medium text-gray-500 ">Sales</div>
+                                            </div>
+
+                                            <div class="mt-3">
+                                                <h1 class="text-xl font-semibold text-gray-600">$89,000</h1>
+
+                                                <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
+                                                    <div class="w-5/6 h-1 bg-indigo-500"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <div class="flex items-center capitalize">
+                                                <div class="p-2 text-white bg-indigo-500 rounded-lg">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                                        viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            stroke-width="2"
+                                                            d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                                                    </svg>
+                                                </div>
+
+                                                <div class="mx-3 font-medium text-gray-500 ">Items</div>
+                                            </div>
+
+                                            <div class="mt-3">
+                                                <h1 class="text-xl font-semibold text-gray-600">260</h1>
+
+                                                <div class="w-full mt-3 overflow-hidden bg-gray-200 rounded-full">
+                                                    <div class="w-2/3 h-1 bg-indigo-500"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </section> -->
+
+                        <!-- <section class="mt-6 space-y-6 xl:flex xl:space-y-0 xl:-mx-3">
+                            <div class="w-full p-4 bg-white rounded-lg shadow-sm xl:mx-3 xl:w-2/3 xl:p-6">
+                                <h2 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Projects</h2>
+
+                                <p class="flex items-center mt-2 text-gray-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
+                                        viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+
+                                    <span class="mx-2">30 done this month</span>
+                                </p>
+
+                                <div class="flex flex-col mt-8">
+                                    <div class="overflow-x-auto">
+                                        <div class="inline-block min-w-full align-middle">
+                                            <div class="overflow-hidden">
+                                                <table class="min-w-full divide-y divide-gray-200">
+                                                    <thead>
+                                                        <tr>
+                                                            <th scope="col"
+                                                                class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
+                                                                <span>COMPANIES</span>
+                                                            </th>
+                                                            <th scope="col"
+                                                                class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
+                                                                <span>MEMBERS</span>
+                                                            </th>
+                                                            <th scope="col"
+                                                                class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
+                                                                <span>BUDGET</span>
+                                                            </th>
+                                                            <th scope="col"
+                                                                class="px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase rtl:text-right">
+                                                                <span>COMPLETION</span>
+                                                            </th>
+                                                        </tr>
+                                                    </thead>
+
+                                                    <tbody class="bg-white divide-y divide-gray-200">
+                                                        <tr>
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
+                                                                Chakra Soft UI Version
+                                                            </td>
+
+                                                            <td class="px-6 py-4 font-medium whitespace-nowrap">
+                                                                <div
+                                                                    class="relative z-0 flex -space-x-1 overflow-hidden">
+                                                                    <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-20 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                </div>
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
+                                                                $128.00
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
+                                                                <span class="font-medium text-indigo-500">66%</span>
+                                                                <div
+                                                                    class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
+                                                                    <div class="w-8/12 h-full bg-indigo-500"></div>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+
+                                                        <tr>
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
+                                                                Add Progress Track
+                                                            </td>
+
+                                                            <td class="px-6 py-4 font-medium whitespace-nowrap">
+                                                                <div
+                                                                    class="relative z-0 flex -space-x-1 overflow-hidden">
+                                                                    <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                </div>
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
+                                                                $220.00
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
+                                                                <span class="font-medium text-indigo-500">25%</span>
+                                                                <div
+                                                                    class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
+                                                                    <div class="w-3/12 h-full bg-indigo-500 "></div>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+
+                                                        <tr>
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
+                                                                Fix Platform Errors
+                                                            </td>
+
+                                                            <td class="px-6 py-4 font-medium whitespace-nowrap">
+                                                                <div
+                                                                    class="relative z-0 flex -space-x-1 overflow-hidden">
+                                                                    <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                </div>
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
+                                                                $89.00
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
+                                                                <span class="font-medium text-indigo-500">100%</span>
+                                                                <div
+                                                                    class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
+                                                                    <div class="w-full h-full bg-indigo-500"></div>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+
+                                                        <tr>
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-800 whitespace-nowrap">
+                                                                Chakra Soft UI Version
+                                                            </td>
+
+                                                            <td class="px-6 py-4 font-medium whitespace-nowrap">
+                                                                <div
+                                                                    class="relative z-0 flex -space-x-1 overflow-hidden">
+                                                                    <img class="relative z-40 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-30 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-20 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-10 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                    <img class="relative z-0 inline-block w-6 h-6 rounded-full ring-2 ring-white"
+                                                                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                                                        alt="">
+                                                                </div>
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 font-medium text-gray-700 whitespace-nowrap">
+                                                                $256.00
+                                                            </td>
+
+                                                            <td
+                                                                class="px-6 py-4 text-gray-700 capitalize whitespace-nowrap">
+                                                                <span class="font-medium text-indigo-500">75%</span>
+                                                                <div
+                                                                    class="w-full h-2 overflow-hidden bg-gray-200 rounded-full">
+                                                                    <div class="w-9/12 h-full bg-indigo-500 "></div>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="w-full p-4 bg-white rounded-lg shadow-sm xl:mx-3 xl:w-1/3 xl:p-6">
+                                <h2 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Orders overview</h2>
+
+                                <p class="mt-2 text-gray-500">
+                                    <span class="text-green-500">+30%</span>&nbsp;this month
+                                </p>
+
+                                <div class="flow-root mt-6">
+                                    <ul class="-mb-8">
+                                        <li>
+                                            <div class="relative pb-8">
+                                                <span
+                                                    class="absolute top-4 left-4 rtl:right-4 rtl:left-auto -ml-px h-full w-0.5 bg-gray-200"
+                                                    aria-hidden="true"></span>
+                                                <div class="relative flex">
+                                                    <div>
+                                                        <span
+                                                            class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
+                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                class="w-5 h-5 text-blue-500" viewBox="0 0 20 20"
+                                                                fill="currentColor">
+                                                                <path
+                                                                    d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+                                                            </svg>
+                                                        </span>
+                                                    </div>
+
+                                                    <div class="min-w-0 flex-1 pt-1.5 mx-3">
+                                                        <div>
+                                                            <p class="text-sm font-medium text-gray-700">$2400, Design
+                                                                changes</p>
+                                                            <p
+                                                                class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
+                                                                22 DEC 7:20 PM</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+
+                                        <li>
+                                            <div class="relative pb-8">
+                                                <span
+                                                    class="absolute top-4 left-4 -ml-px rtl:right-4 rtl:left-auto h-full w-0.5 bg-gray-200"
+                                                    aria-hidden="true"></span>
+                                                <div class="relative flex">
+                                                    <div>
+                                                        <span
+                                                            class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
+                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                class="w-5 h-5 text-indigo-500" viewBox="0 0 20 20"
+                                                                fill="currentColor">
+                                                                <path fill-rule="evenodd"
+                                                                    d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
+                                                                    clip-rule="evenodd" />
+                                                            </svg>
+                                                        </span>
+                                                    </div>
+
+                                                    <div class="min-w-0 flex-1 pt-1.5 mx-3">
+                                                        <div>
+                                                            <p class="text-sm font-medium text-gray-700">New order
+                                                                #4219423</p>
+                                                            <p
+                                                                class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
+                                                                21 DEC 11:21 PM</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+
+                                        <li>
+                                            <div class="relative pb-8">
+                                                <span
+                                                    class="absolute top-4 left-4 -ml-px rtl:right-4 rtl:left-auto h-full w-0.5 bg-gray-200"
+                                                    aria-hidden="true"></span>
+                                                <div class="relative flex">
+                                                    <div>
+                                                        <span
+                                                            class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
+                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                class="w-5 h-5 text-cyan-500" viewBox="0 0 20 20"
+                                                                fill="currentColor">
+                                                                <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
+                                                                <path fill-rule="evenodd"
+                                                                    d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
+                                                                    clip-rule="evenodd" />
+                                                            </svg>
+                                                        </span>
+                                                    </div>
+
+                                                    <div class="min-w-0 flex-1 pt-1.5 mx-3">
+                                                        <div>
+                                                            <p class="text-sm font-medium text-gray-700">New card added
+                                                                for order #3210145</p>
+                                                            <p
+                                                                class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
+                                                                21 DEC 11:21 PM</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+
+                                        <li>
+                                            <div class="relative pb-8">
+                                                <div class="relative flex">
+                                                    <div>
+                                                        <span
+                                                            class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
+                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                class="w-5 h-5 text-green-500" viewBox="0 0 20 20"
+                                                                fill="currentColor">
+                                                                <path
+                                                                    d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+                                                            </svg>
+                                                        </span>
+                                                    </div>
+
+
+                                                    <div class="min-w-0 flex-1 pt-1.5 mx-3">
+                                                        <div>
+                                                            <p class="text-sm font-medium text-gray-700">Server Payments
+                                                                for April</p>
+                                                            <p
+                                                                class="w-32 mt-1 text-sm text-gray-500 truncate sm:w-auto">
+                                                                21 DEC 9:28 PM</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </section> -->
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>

static/js/detection.js

@@ -0,0 +1,134 @@
+// Form Divs
+const form = document.getElementById("sum-form");
+const sumText  = document.getElementById("sum-text-div");
+const sumFile  = document.getElementById("sum-file-div");
+const sumVideo = document.getElementById("sum-video-div");
+
+// Form Data
+const selectOption  = document.getElementById("sum-type");
+const sumTextInput  = document.getElementById("sum-text-input");
+const sumVideoInput = document.getElementById("sum-video-input");
+
+// Error Output Section
+const sumError = document.getElementById("sum-err");
+
+// Result Section
+const extractText = document.getElementById("extracted-text");
+const summaryText = document.getElementById("summarized-text");
+
+
+// In progress...
+function _summarize(text) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/predict_emotion", true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+ 
+    var data = JSON.stringify({ "text": text });
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            resp = xhr.responseText;
+            result = Object.entries(JSON.parse(resp)).sort((a, b) => b[1] - a[1]).map(a => a[0]+': '+a[1]).join('\n');
+            summaryText.value = result;
+        }
+    };
+
+    xhr.send(data)
+    return;
+}
+
+// In progress...
+function _extractPDF(file) {
+    return file;
+}
+
+// In progress...
+function _getCaptions(src) {
+    return src;
+}
+
+
+function summarize(event) {
+    event.preventDefault();
+    
+    if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
+        sumError.innerText = 'Invalid Youtube Link';
+        sumError.classList.remove('hidden');
+        return;
+    }
+
+    switch (selectOption.value) {
+        case 'sum-text':
+            let value = sumTextInput.value
+            if (value === '') {
+                sumError.innerText = `You need to input some text`;
+                sumError.classList.remove('hidden');
+                return;
+            }
+            break;
+        case 'sum-file':
+            sumError.innerText = 'This option is not supported, yet';
+            sumError.classList.remove('hidden');
+            return;
+    }
+
+    sumError.classList.add('hidden');
+
+    // Here we can finally summarize data
+    let extractedText = '';
+    switch (selectOption.value) {
+        case 'sum-text':
+            extractedText = sumTextInput.value;
+            break;
+        case 'sum-file':
+            extractedText = _extractPDF(sumFileInput);
+            break;
+        case 'sum-video':
+            extractedText = _getCaptions(sumVideoInput.value);
+            break;
+    }
+
+    extractText.value = extractedText;
+    _summarize(extractedText);
+}
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    selectOption.addEventListener("change", function () {
+        switch (selectOption.value) {
+            case 'sum-text':
+                sumText.classList.remove('hidden');
+                sumFile.classList.add('hidden');
+                sumVideo.classList.add('hidden');
+
+                sumTextInput.setAttribute("required", "");
+                sumVideoInput.removeAttribute("required");
+                break;
+            case 'sum-file':
+                sumText.classList.add('hidden');
+                sumFile.classList.remove('hidden');
+                sumVideo.classList.add('hidden');
+
+                sumTextInput.removeAttribute("required");
+                sumVideoInput.removeAttribute("required");
+                break;
+            case 'sum-video':
+                sumText.classList.add('hidden');
+                sumFile.classList.add('hidden');
+                sumVideo.classList.remove('hidden');
+
+                sumTextInput.removeAttribute("required");
+                sumVideoInput.setAttribute("required", "");
+                break;
+        }
+        sumError.classList.add('hidden');
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    var submitButton = document.getElementById("submit");
+  
+    submitButton.addEventListener("click", function (e) {
+      summarize(e);
+    });
+  });

static/js/summarizer.js

@@ -0,0 +1,132 @@
+// Form Divs
+const form = document.getElementById("sum-form");
+const sumText  = document.getElementById("sum-text-div");
+const sumFile  = document.getElementById("sum-file-div");
+const sumVideo = document.getElementById("sum-video-div");
+
+// Form Data
+const selectOption  = document.getElementById("sum-type");
+const sumTextInput  = document.getElementById("sum-text-input");
+const sumVideoInput = document.getElementById("sum-video-input");
+
+// Error Output Section
+const sumError = document.getElementById("sum-err");
+
+// Result Section
+const extractText = document.getElementById("extracted-text");
+const summaryText = document.getElementById("summarized-text");
+
+
+// In progress...
+function _summarize(text) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "https://www.editpad.org/tool/tool/summarizingTool", true);
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+    var data = `text=${text}&percnt=40&modd=1&captha=0`;
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var response = JSON.parse(xhr.responseText);
+            summaryText.value = response.content;
+        }
+    };
+
+    xhr.send(data)
+    return;
+}
+
+// In progress...
+function _extractPDF(file) {
+    return file;
+}
+
+// In progress...
+function _getCaptions(src) {
+    return src;
+}
+
+
+function summarize(event) {
+    event.preventDefault();
+    
+    if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
+        sumError.innerText = 'Invalid Youtube Link';
+        sumError.classList.remove('hidden');
+        return;
+    }
+
+    switch (selectOption.value) {
+        case 'sum-text':
+            len = sumTextInput.value.length
+            if (len < 100) {
+                sumError.innerText = `The text size should be at least 100 characters (${len} < 100)`;
+                sumError.classList.remove('hidden');
+                return;
+            }
+            break;
+        case 'sum-file':
+            sumError.innerText = 'This option is not supported, yet';
+            sumError.classList.remove('hidden');
+            return;
+    }
+
+    sumError.classList.add('hidden');
+
+    // Here we can finally summarize data
+    let extractedText = '';
+    switch (selectOption.value) {
+        case 'sum-text':
+            extractedText = sumTextInput.value;
+            break;
+        case 'sum-file':
+            extractedText = _extractPDF(sumFileInput);
+            break;
+        case 'sum-video':
+            extractedText = _getCaptions(sumVideoInput.value);
+            break;
+    }
+
+    extractText.value = extractedText;
+    _summarize(extractedText);
+}
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    selectOption.addEventListener("change", function () {
+        switch (selectOption.value) {
+            case 'sum-text':
+                sumText.classList.remove('hidden');
+                sumFile.classList.add('hidden');
+                sumVideo.classList.add('hidden');
+
+                sumTextInput.setAttribute("required", "");
+                sumVideoInput.removeAttribute("required");
+                break;
+            case 'sum-file':
+                sumText.classList.add('hidden');
+                sumFile.classList.remove('hidden');
+                sumVideo.classList.add('hidden');
+
+                sumTextInput.removeAttribute("required");
+                sumVideoInput.removeAttribute("required");
+                break;
+            case 'sum-video':
+                sumText.classList.add('hidden');
+                sumFile.classList.add('hidden');
+                sumVideo.classList.remove('hidden');
+
+                sumTextInput.removeAttribute("required");
+                sumVideoInput.setAttribute("required", "");
+                break;
+        }
+        sumError.classList.add('hidden');
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    var submitButton = document.getElementById("submit");
+  
+    submitButton.addEventListener("click", function (e) {
+      summarize(e);
+    });
+  });

static/text_summarizer.html

@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="canonical" href="">
+    <title>Text2Feature | Summarizer</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
+    <script defer src="js/main.js"></script>
+</head>
+
+<body class="overflow-hidden">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B751Q3XBFC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-B751Q3XBFC');
+    </script>
+
+    <div x-data="{ sidebarOpen: false }" class="relative flex h-screen text-gray-800 bg-white font-roboto">
+        <div x-cloak :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false"
+            class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
+
+        <div x-cloak :class="sidebarOpen ? 'translate-x-0 ease-in' : '-translate-x-full ease-out'"
+            class="fixed inset-y-0 left-0 z-30 w-64 px-4 overflow-y-auto transition duration-200 transform bg-white border-r border-gray-100 lg:translate-x-0 lg:relative lg:inset-0 ">
+            <div class="mt-8">
+                <a href="index.html" class="flex items-center">
+                  <img class="w-auto h-6" src="images/logo.svg" alt="logo">
+                  <span class="mx-3 mt-1 font-medium text-lg">Text2<span class="text-indigo-600">Feature</span></span>
+                </a>
+            </div>
+
+            <hr class="my-6 border-gray-100">
+
+            <nav class="space-y-8">
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">PAGES</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-200 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="index.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Homepage</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-300 transform bg-gray-200 rounded-lg bg-opacity-40"
+                        href="text_summarizer.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Text Summarizer</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="emotion_detection.html">
+                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                            <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#1C274C"/>
+                            <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#1C274C"/>
+                            <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Emotion Detection</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 3</span>
+                    </a>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span class="mx-3 font-medium capitalize">Project 4</span>
+                    </a>
+                </div>
+
+                <div class="space-y-4">
+                    <h3 class="px-4 text-sm tracking-wider text-gray-400 uppercase">OTHER</h3>
+
+                    <a class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        href="/">
+                        <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M474.89,300.41a121.43,121.43,0,0,1-121.3,121.3H247.08V392.13H353.59a91.72,91.72,0,1,0,0-183.44H87.53L151,272.2l-20.92,20.92L30.89,193.9l99.22-99.22L151,115.6l-63.5,63.51H353.59A121.43,121.43,0,0,1,474.89,300.41Z" />
+                        </svg>
+                        <span class="mx-3 font-medium">Visit Main Website</span>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
+            <header class="bg-white border-b border-gray-100">
+                <div class="flex items-center justify-between px-4 py-4 sm:px-6">
+                    <div class="flex items-center">
+                        <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
+                            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </button>
+
+                        <div class="relative" x-data="{ search: '' }" @click.away="search = ''">
+                            <div class="relative mx-4 lg:mx-0">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round"></path>
+                                    </svg>
+                                </span>
+
+                                <input x-model="search" type="text"
+                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    placeholder="Find anything...">
+                            </div>
+
+                            <div class="absolute right-0 z-20 w-full py-2 mt-2 space-y-4 overflow-hidden bg-white rounded-md shadow-xl"
+                                x-show="search.length > 0" x-cloak
+                                x-transition:enter="transition ease-out duration-100 transform"
+                                x-transition:enter-start="opacity-0 scale-95"
+                                x-transition:enter-end="opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75 transform"
+                                x-transition:leave-start="opacity-100 scale-100"
+                                x-transition:leave-end="opacity-0 scale-95">
+
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Projects</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="text_summarizer.html">
+                                            Text Summarizer
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="emotion_detection.html">
+                                            Emotion Detection
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 3
+                                        </a>
+
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="">
+                                            Project 4
+                                        </a>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h3 class="px-5 text-xs tracking-wider text-gray-500 uppercase">Other</h3>
+                                    <div class="mt-2">
+                                        <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                                            href="/">
+                                            Visit Main Website
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center">
+                        <div x-data="{ dropdownOpen: false }" class="relative inline-block">
+                            <button @click="dropdownOpen = ! dropdownOpen" class="relative z-10 flex items-center flex-shrink-0 text-sm text-gray-600 focus:outline-none">
+                                <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
+                            </button>
+                
+                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                                    <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
+                                    <div class="mx-1">
+                                        <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
+                                        <p class="text-sm text-gray-500">github.com/Djacon</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="flex-1 overflow-y-auto">
+                <div class="px-4 py-8 sm:px-6">
+                    <div>
+                        <h1 class="text-2xl font-medium text-gray-700 sm:text-3xl">Text Summarizer</h1>
+
+                        <div class="hidden mt-3 overflow-y-auto text-sm lg:items-center lg:flex whitespace-nowrap">
+                            <a class="text-gray-600">Pages</a>
+                            <span class="mx-1 text-gray-500">/</span>
+                            <a href="" class="text-indigo-600 hover:underline">Text_Summarizer</a>
+                        </div>
+                    </div>
+
+                    <div class="mt-6">
+                        <div class="w-full p-4 bg-white rounded-lg xl:p-6">
+                            <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Upload text</h1>
+
+                            <form id='sum-form' class="mt-6 space-y-5" onsubmit="return false;">
+                                <div>
+                                    <label for="sum-type" class="block text-sm text-gray-700 capitalize">Select Type</label>
+                                    <select id="sum-type"
+                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
+                                        <option value="sum-text">Summarize Text</option>
+                                        <option value="sum-file">Summarize PDF</option>
+                                        <!-- In progress... -->
+                                        <!-- <option value="sum-video">Summarize Youtube Video</option> -->
+                                    </select>
+                                </div>
+
+                                <div id="sum-text-div">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">description</label>
+                                    <textarea id="sum-text-input" required class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    style="min-height: 300px;"></textarea>
+                                </div>
+
+                                <div id="sum-file-div" class="hidden">
+                                    <label for="image" class="block text-sm text-gray-700 capitalize">file</label>
+                                    <label  
+                                        class="flex flex-col items-center justify-center w-full h-32 mt-2 text-gray-500 border-2 border-dashed rounded-md cursor-pointer hover:text-gray-600">
+                                        <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 20 20">
+                                            <path
+                                                d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z">
+                                            </path>
+                                        </svg>
+                                        <span class="mt-4">Select PDF File</span>
+                                        <input id="sum-file-input" type="file" class="hidden">
+                                    </label>
+                                </div>
+
+                                <div id="sum-video-div" class="hidden">
+                                    <label for="video" class="block text-sm text-gray-700 capitalize">Youtube link</label>
+                                    <input id="sum-video-input" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="url"
+                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
+                                </div>
+                                <p id='sum-err' class="hidden mt-2 text-sm text-red-500">Your password is too short.</p>
+
+                                <div class="flex justify-end">
+                                    <button id="submit" type="button" class="w-full flex items-center justify-center px-2 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md hover:bg-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-50">
+                                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                                            <g id="SVGRepo_iconCarrier">
+                                              <path d="M7 10L12 15L17 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                                            </g>
+                                          </svg>
+                                        <span class="mx-1">Summarize</span>
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+
+                        <div class="w-full p-4 mt-8 bg-white rounded-lg xl:p-6">
+                            <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Result</h1>
+
+                            <div class="md:flex gap-8">
+                                <div class="w-full md:w-1/2 grid-cols-2 mt-6">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">Extracted Text</label>
+                                    <textarea disabled id="extracted-text"
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                        style="min-height: 300px;"></textarea>
+                                </div>
+
+                                <div class="w-full md:w-1/2 grid-cols-2 mt-6">
+                                    <label for="description"
+                                        class="block text-sm text-gray-700 capitalize">Summarized Text</label>
+                                    <textarea disabled id="summarized-text"
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                        style="min-height: 300px;"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script src="js/summarizer.js"></script>
+</body>
+</html>