Spaces:

Djacon
/

text2feature

Running

App Files Files Community

Djacon commited on Oct 1, 2023

Commit

5673d7a

1 Parent(s): 4a383f5

Edit Theme

Browse files

Files changed (8) hide show

static/404.html +9 -7
static/emotion_detection.html +18 -5
static/images/favicon.svg +22 -0
static/images/logo.svg +0 -6
static/index.html +15 -13
static/js/detection.js +4 -5
static/js/summarizer.js +6 -6
static/text_summarizer.html +20 -7

static/404.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <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>
@@ -30,8 +30,8 @@
             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>
@@ -132,7 +132,9 @@
                                 </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>
@@ -211,18 +213,18 @@
                         <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>

     <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/favicon.svg">
     <script defer src="js/main.js"></script>
 </head>
             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-8" src="images/favicon.svg" alt="logo">
+                    <span class="mx-3 mt-1 font-medium text-lg">Text2<span style="color: #ffa116">Feature</span></span>
                 </a>
             </div>
                                 </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:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-40"
+                                    onfocus="this.style.border='1px solid #ffa116';"
+                                    onblur="this.style.border='1px solid #E5E7EB';"
                                     placeholder="Find anything...">
                             </div>
                         <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="hover:underline" style="color: #ffa116">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" style="color: #ffa116">
                                 404</h1>
                             <div
+                                class="w-32 h-1 my-6 md:my-6" style="background-color: #ffa116"">
                             </div>
                             <h2 class="text-xl font-semibold text-gray-800 md:text-3xl">Page not found</h2>

static/emotion_detection.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <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>
@@ -30,8 +30,8 @@
             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>
@@ -131,7 +131,9 @@
                                 </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>
@@ -257,7 +259,18 @@
                                 <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>

     <link rel="canonical" href="">
     <title>Text2Feature | Detection</title>
     <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/favicon.svg">
     <script defer src="js/main.js"></script>
 </head>
             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-8" src="images/favicon.svg" alt="logo">
+                    <span class="mx-3 mt-1 font-medium text-lg">Text2<span style="color: #ffa116">Feature</span></span>
                 </a>
             </div>
                                 </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:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-40"
+                                    onfocus="this.style.border='1px solid #ffa116';"
+                                    onblur="this.style.border='1px solid #E5E7EB';"
                                     placeholder="Find anything...">
                             </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">
+                                    <style>
+                                        #submit {
+                                            background-color: #ffa116;
+                                        }
+                                        #submit:hover {
+                                            background-color: #fcb140;
+                                        }
+                                        #submit:focus {
+                                            box-shadow: 0 0 5px 2px rgb(255, 188, 87);
+                                        }
+                                    </style>
+                                    <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 rounded-md focus:outline-none">
                                         <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>

static/images/favicon.svg ADDED Viewed

static/images/logo.svg DELETED Viewed

static/index.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <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>
@@ -30,8 +30,8 @@
             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>
@@ -131,7 +131,9 @@
                                 </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>
@@ -209,7 +211,7 @@
                         <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>
@@ -221,13 +223,13 @@
                                     <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"
@@ -242,13 +244,13 @@
                                     <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"
@@ -269,7 +271,7 @@
                                     </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"
@@ -287,7 +289,7 @@
                                     </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"
@@ -299,8 +301,8 @@
                         <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

     <link rel="canonical" href="">
     <title>Text2Feature | Homepage</title>
     <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/favicon.svg">
     <script defer src="js/main.js"></script>
 </head>
             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-8" src="images/favicon.svg" alt="logo">
+                    <span class="mx-3 mt-1 font-medium text-lg">Text2<span style="color: #ffa116">Feature</span></span>
                 </a>
             </div>
                                 </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:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-40"
+                                    onfocus="this.style.border='1px solid #ffa116';"
+                                    onblur="this.style.border='1px solid #E5E7EB';"
                                     placeholder="Find anything...">
                             </div>
                         <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="hover:underline" style="color: #ffa116">Homepage</a>
                         </div>
                     </div>
                                     <div class="flex items-end">
                                         <h2 class="mt-1 text-2xl font-medium text-gray-800">23</h2>
+                                        <span class="mx-2" style="color: #ffa116">
                                             +55%
                                         </span>
                                     </div>
                                 </div>
+                                <div class="p-2 text-white rounded-lg" style="background-color: #ffa116">
                                     <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"
                                     <div class="flex items-end">
                                         <h2 class="mt-1 text-2xl font-medium text-gray-800">54</h2>
+                                        <span class="mx-2" style="color: #ffa116">
                                             +5%
                                         </span>
                                     </div>
                                 </div>
+                                <div class="p-2 text-white rounded-lg" style="background-color: #ffa116">
                                     <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"
                                     </div>
                                 </div>
+                                <div class="p-2 text-white rounded-lg" style="background-color: #ffa116">
                                     <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"
                                     </div>
                                 </div>
+                                <div class="p-2 text-white rounded-lg" style="background-color: #ffa116">
                                     <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"
                         <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 sm:text-xl md:text-2xl">
+                                    Welcome to Text2<span style="color: #ffa116">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

static/js/detection.js CHANGED Viewed

@@ -81,7 +81,7 @@ function _getCaptions(src) {
 }
-function summarize(event) {
     event.preventDefault();
     if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
@@ -125,6 +125,8 @@ function summarize(event) {
             break;
         case 'sum-file':
             _extractFile();
             break;
         case 'sum-video':
             _getCaptions(sumVideoInput.value);
@@ -168,8 +170,5 @@ document.addEventListener("DOMContentLoaded", function () {
 document.addEventListener("DOMContentLoaded", function () {
     var submitButton = document.getElementById("submit");
-    submitButton.addEventListener("click", function (e) {
-      summarize(e);
-    });
   });

 }
+async function summarize(event) {
     event.preventDefault();
     if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
             break;
         case 'sum-file':
             _extractFile();
+            summaryText.value = 'Please wait...';
+            await (new Promise(resolve => setTimeout(resolve, 1000)));
             break;
         case 'sum-video':
             _getCaptions(sumVideoInput.value);
 document.addEventListener("DOMContentLoaded", function () {
     var submitButton = document.getElementById("submit");
+    submitButton.addEventListener("click", summarize);
   });

static/js/summarizer.js CHANGED Viewed

@@ -44,9 +44,9 @@ function _extractFile() {
         const reader = new FileReader();
         reader.onload = function() {
             extractText.value = reader.result.slice(0, MAX_SIZE);
         };
         reader.readAsText(file, 'CP1251');
-        return;
     } else if (file.type === 'application/pdf') {
         extractText.value = '';
         const reader = new FileReader();
@@ -80,7 +80,7 @@ function _getCaptions(src) {
 }
-function summarize(event) {
     event.preventDefault();
     if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
@@ -124,11 +124,14 @@ function summarize(event) {
             break;
         case 'sum-file':
             _extractFile();
             break;
         case 'sum-video':
             _getCaptions(sumVideoInput.value);
             break;
     }
     _summarize(extractText.value);
 }
@@ -167,8 +170,5 @@ document.addEventListener("DOMContentLoaded", function () {
 document.addEventListener("DOMContentLoaded", function () {
     var submitButton = document.getElementById("submit");
-    submitButton.addEventListener("click", function (e) {
-      summarize(e);
-    });
   });

         const reader = new FileReader();
         reader.onload = function() {
             extractText.value = reader.result.slice(0, MAX_SIZE);
+            // extractText.value = reader.result.slice(0, MAX_SIZE);
         };
         reader.readAsText(file, 'CP1251');
     } else if (file.type === 'application/pdf') {
         extractText.value = '';
         const reader = new FileReader();
 }
+async function summarize(event) {
     event.preventDefault();
     if (selectOption.value === 'sum-video' && !sumVideoInput.value.startsWith('https://www.youtube.com/watch?v=')) {
             break;
         case 'sum-file':
             _extractFile();
+            summaryText.value = 'Please wait...';
+            await (new Promise(resolve => setTimeout(resolve, 1000)));
             break;
         case 'sum-video':
             _getCaptions(sumVideoInput.value);
             break;
     }
     _summarize(extractText.value);
 }
 document.addEventListener("DOMContentLoaded", function () {
     var submitButton = document.getElementById("submit");
+    submitButton.addEventListener("click", summarize);
   });

static/text_summarizer.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <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>
@@ -30,8 +30,8 @@
             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>
@@ -131,7 +131,9 @@
                                 </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>
@@ -209,7 +211,7 @@
                         <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>
@@ -246,7 +248,7 @@
                                                 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" accept=".pdf, .txt" class="hidden">
                                     </label>
                                 </div>
@@ -259,7 +261,18 @@
                                 <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>

     <link rel="canonical" href="">
     <title>Text2Feature | Summarizer</title>
     <link rel="stylesheet" href="css/main.css">
+    <link rel="icon" type="image/svg+xml" href="images/favicon.svg">
     <script defer src="js/main.js"></script>
 </head>
             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-8" src="images/favicon.svg" alt="logo">
+                    <span class="mx-3 mt-1 font-medium text-lg">Text2<span style="color: #ffa116">Feature</span></span>
                 </a>
             </div>
                                 </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:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-40"
+                                    onfocus="this.style.border='1px solid #ffa116';"
+                                    onblur="this.style.border='1px solid #E5E7EB';"
                                     placeholder="Find anything...">
                             </div>
                         <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="hover:underline" style="color: #ffa116;">Text_Summarizer</a>
                         </div>
                     </div>
                                                 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 File</span>
                                         <input id="sum-file-input" type="file" accept=".pdf, .txt" class="hidden">
                                     </label>
                                 </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">
+                                    <style>
+                                        #submit {
+                                            background-color: #ffa116;
+                                        }
+                                        #submit:hover {
+                                            background-color: #fcb140;
+                                        }
+                                        #submit:focus {
+                                            box-shadow: 0 0 5px 2px rgb(255, 188, 87);
+                                        }
+                                    </style>
+                                    <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 rounded-md focus:outline-none">
                                         <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>